/* bold — assets/css/styles.css PLIK GENEROWANY z partiali w template-parts/scss. Nie edytuj go ręcznie — poprawki idą do partiala, potem: python3 narzedzia/zbuduj-arkusz.py Kolejność partiali: main.scss */ /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ========================================================= BOLD — HOME Makieta statyczna strony głównej. Reset, zmienne i komponenty przeniesione dokładnie ze styleguide'u (bold-styleguide.html) — zero nowych wartości projektowych. Czysty HTML5 + CSS (Custom Properties). Zero JS, zero bibliotek, dwa kroje z Google Fonts (Anton + Archivo). Mobile first — breakpointy wyłącznie 600px / 1024px. ========================================================= */ /* ---------- 1. ZMIENNE (identyczne ze styleguide'em) ---------- */ :root{ /* Kolory */ --color-black:#111111; --color-white:#ffffff; --color-neon:#e8ff00; --color-gray:#666666; --color-bg-section:#f2f2f2; /* Obramowania */ --border-standard:2px; --border-container:3px; --border-divider:3px; /* Cienie — wyłącznie twarde, zero rozmycia */ --shadow-offset:4px; --focus-offset:3px; --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black); --shadow-hard-sm: 2px 2px 0 0 var(--color-black); --shadow-hard-lg: 8px 8px 0 0 var(--color-black); /* Zaokrąglenia — brak, zawsze 0 */ --radius-none:0; /* Skala odstępów */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; /* Asymetria — wysunięcie poza siatkę */ --overlap-title:40px; /* Typografia */ /* Kroje: Anton (display, jedna waga 400, wersaliki) + Archivo (tekst, 400-700). Anton zawiera subset latin-ext — polskie diakrytyki bez fallbacku. */ --font-display: "Anton", "Arial Narrow", Impact, sans-serif; --font-family-base: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fs-h1:36px; --fs-h2:28px; --fs-h3:20px; --fs-h4:18px; --fs-lead:20px; --fs-body:16px; --fs-meta:14px; --fs-micro:12px; --lh-tight:1.22; --lh-display:1.3; --lh-normal:1.75; --tracking-tight:-0.02em; --tracking-display:-0.01em; --tracking-normal:0; --tracking-wide:0.08em; /* Wagi ograniczone do zakresu wczytywanego z Archivo (400-700). Nagłówki displayowe idą na Anton, który ma wyłącznie wagę 400. */ --fw-regular:400; --fw-medium:500; --fw-bold:600; --fw-heavy:700; --fw-black:700; /* Siatka */ --container-max:1200px; --text-col-max:780px; /* Sloty reklamowe — rezerwacja wysokości, zero CLS */ --ad-mobile-w:300; --ad-mobile-h:50; --ad-tablet-w:728; --ad-tablet-h:90; --ad-desktop-w:1150; --ad-desktop-h:90; --ad-footer-w:300; --ad-footer-h:50; } :root{ --fs-caption: 11px; --color-gray-light: #d9d9d9; } /* ===== z makiety: 404.html ===== */ :root{ --fs-404: 120px; } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ---------- 2. RESET (identyczny ze styleguide'em) ---------- */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; border-radius:var(--radius-none); } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ font-family:var(--font-family-base); font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--color-black); background:var(--color-white); -webkit-font-smoothing:antialiased; } img, picture{ max-width:100%; display:block; } ul, ol{ list-style:none; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input, textarea, select{ font:inherit; color:inherit; } /* ---------- 3. STAN FOCUS (WYMAGANE WE WSZYSTKICH MAKIETACH) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn-solid:focus-visible, .btn-outline:focus-visible, .pagination a:focus-visible{ outline:3px solid var(--color-neon); outline-offset:var(--focus-offset); } .site-header a:focus-visible{ outline-color:var(--color-neon); } .news-ticker__list a:hover, .news-ticker__list a:focus-visible { color: var(--color-neon); border-bottom-color: var(--color-neon); } /* 2. Badge kategorii jako odsyłacz do archiwum działu. */ a.tag { text-decoration: none; } a.tag:hover { background: var(--color-neon); color: var(--color-black); } /* ============================================================ V3 — POPRAWKI PO AUDYCIE WYTYCZNYCH TRAFFIC PEAKS Dopisane na końcu, żeby łatwo było zobaczyć różnicę względem v2. Przy przenoszeniu do style.css motywu — wtopić w odpowiednie sekcje. ============================================================ */ /* Kadry bez plików graficznych (podgląd makiety) nie zapadają się na płasko. */ img{ background:repeating-linear-gradient(45deg,#f2f2f2 0 8px,#eaeaea 8px 16px); } .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- V3: klikalne zdjęcia w listingach (wytyczna 18) ---------- Jeśli tytuł wpisu jest linkiem, kadr obok też prowadzi do wpisu. Link na obrazku jest pomocniczy: aria-hidden + tabindex="-1", żeby czytnik ekranu i Tab nie dostawały tego samego celu dwa razy. */ a.media-link{ display:block; height:100%; } a.media-link img{ display:block; width:100%; height:100%; object-fit:cover; } .hero-latest__arrow:focus-visible, .hero-latest__dots button:focus-visible{ outline:var(--border-container) solid var(--color-black); outline-offset:2px; } .hero-latest .hero-latest__arrow:focus-visible, .hero-latest .hero-latest__dots button:focus-visible{ outline-color:var(--color-neon); } /* ===== z makiety: single.html ===== */ .post-toc__list a:focus-visible{ outline-color:var(--color-neon); } /* 8. Tabela danych technicznych w treści wpisu — .post-table. Ta sama konwencja co .wp-block-table w blocks-comments.html: ramka kontenerowa 3 px, nagłówek na czerni w wersalikach, wiersze parzyste na tle sekcji. Wrapper przewija się w poziomie, żeby tabela nigdy nie rozpychała dokumentu na wąskich ekranach. */ .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* ===== z makiety: category.html ===== */ /* ---------- 3. STAN FOCUS (WYMAGANE WE WSZYSTKICH MAKIETACH) ---------- */ a:focus-visible, button:focus-visible, .pagination a:focus-visible{ outline:3px solid var(--color-neon); outline-offset:var(--focus-offset); } /* ===== z makiety: 404.html ===== */ input{ font:inherit; color:inherit; } /* ---------- 3. STAN FOCUS (WYMAGANE WE WSZYSTKICH MAKIETACH) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .pagination a:focus-visible{ outline:3px solid var(--color-neon); outline-offset:var(--focus-offset); } /* ===== z makiety: author.html ===== */ /* ---------- 3. STAN FOCUS (WYMAGANE WE WSZYSTKICH MAKIETACH) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, .pagination a:focus-visible{ outline:3px solid var(--color-neon); outline-offset:var(--focus-offset); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ h1,h2,h3,h4{ line-height:var(--lh-tight); } /* ---------- 5. TYPOGRAFIA ---------- */ h1{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:400; letter-spacing:var(--tracking-display); line-height:var(--lh-display); text-transform:uppercase; } h2{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:400; letter-spacing:var(--tracking-display); line-height:var(--lh-display); text-transform:uppercase; } h3{ font-size:var(--fs-h3); font-weight:var(--fw-heavy); } h4{ font-size:var(--fs-h4); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-gray); } p{ font-size:var(--fs-body); } .meta{ font-size:var(--fs-meta); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-gray); } .meta a{ color:var(--color-black); border-bottom:var(--border-standard) solid var(--color-neon); } .meta a:hover{ background:var(--color-neon); } /* ---------- 7. TAG KATEGORII ---------- */ .tag{ display:inline-block; background:var(--color-black); color:var(--color-white); border:var(--border-standard) solid var(--color-black); padding:var(--space-1) var(--space-3); font-size:var(--fs-micro); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); } .tag--outline{ background:var(--color-white); color:var(--color-black); } /* Neon jest zdarzeniem, nie tłem — maksymalnie dwa wystąpienia na ekran. Modyfikator .tag--neon zarezerwowany dla wpisu wiodącego i etykiety materiału sponsorowanego. */ .tag--neon{ background:var(--color-neon); color:var(--color-black); border-color:var(--color-black); } .tag--outline:hover{ background:var(--color-neon); } /* ===== z makiety: category.html ===== */ .meta a:hover{ background:var(--color-neon); color:var(--color-black); } /* ===== z makiety: 404.html ===== */ table{ border-collapse:collapse; width:100%; } /* ===== z makiety: author.html ===== */ /* --- WIDOK 2: archiwum tagu --- */ .tag-head{ margin-bottom:var(--space-6); } .tag-head__title{ text-transform:uppercase; } .tag-head__prefix{ display:block; font-size:var(--fs-meta); font-weight:var(--fw-heavy); letter-spacing:var(--tracking-wide); color:var(--color-gray); margin-bottom:var(--space-2); } .tag-head__count{ margin-top:var(--space-2); } .tag-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); } .tag-tile{ border:var(--border-standard) solid var(--color-black); } .tag-tile__media{ aspect-ratio:3/2; overflow:hidden; } .tag-tile__media img{ width:100%; height:100%; object-fit:cover; } .tag-tile__body{ padding:var(--space-4); } .tag-tile__tag{ margin-bottom:var(--space-2); } .tag-tile__title{ font-size:var(--fs-h4); font-weight:var(--fw-heavy); line-height:1.25; margin-bottom:var(--space-2); } .tag-tile__title a:hover{ background:var(--color-neon); } .tag-tile__meta{ display:flex; flex-wrap:wrap; gap:var(--space-3); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ---------- 4. SIATKA / KONTENERY ---------- */ .container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-4); } .col-text{ max-width:var(--text-col-max); } /* ---------- 11. SEPARATOR ---------- */ .divider{ border:0; height:var(--border-divider); background:var(--color-black); margin-block:var(--space-7); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ---------- 6. PRZYCISKI ---------- */ .btn-solid, .btn-outline{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); font-size:var(--fs-meta); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); border:var(--border-standard) solid var(--color-black); border-radius:var(--radius-none); transition:transform .05s linear; } .btn-solid{ background:var(--color-black); color:var(--color-white); box-shadow:var(--shadow-hard); } .btn-solid:hover{ background:var(--color-neon); color:var(--color-black); } .btn-solid:active{ transform:translate(var(--shadow-offset), var(--shadow-offset)); box-shadow:0 0 0 0 var(--color-black); } .btn-outline{ background:var(--color-white); color:var(--color-black); box-shadow:none; } .btn-outline:hover{ background:var(--color-neon); border-color:var(--color-black); } .btn-outline:active{ transform:translate(var(--border-standard), var(--border-standard)); } /* 14. Powrót na górę. Twardy kwadrat, bez zaokrągleń — jak reszta motywu. Pojawia się po przewinięciu jednego ekranu. */ .to-top { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 70; width: 48px; height: 48px; display: grid; place-items: center; background: var(--color-white); color: var(--color-black); border: var(--border-container) solid var(--color-black); box-shadow: var(--shadow-hard); font-family: var(--font-display); font-size: 20px; line-height: 1; opacity: 0; visibility: hidden; transition: opacity 140ms linear; } .to-top:hover { background: var(--color-neon); } .to-top.is-visible { opacity: 1; visibility: visible; } /* ===== z makiety: single.html ===== */ /* ---------- 6. PRZYCISKI ---------- */ .btn-outline{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); font-size:var(--fs-meta); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); border:var(--border-standard) solid var(--color-black); border-radius:var(--radius-none); background:var(--color-white); color:var(--color-black); } /* ===== z makiety: 404.html ===== */ /* ---------- 6. PRZYCISKI ---------- */ .btn-solid{ display:inline-flex; align-items:center; justify-content:center; background:var(--color-black); color:var(--color-white); border:var(--border-standard) solid var(--color-black); padding:var(--space-3) var(--space-5); font-size:var(--fs-meta); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); box-shadow:var(--shadow-hard); } .btn-solid:hover{ background:var(--color-white); color:var(--color-black); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ---------- 13. SLOTY REKLAMOWE (rezerwacja wysokości = zero CLS) ---------- */ .ad-slot{ display:flex; align-items:center; justify-content:center; background:var(--color-bg-section); border:var(--border-standard) solid var(--color-black); overflow:hidden; margin-block:var(--space-4); } .ad-slot img{ width:100%; height:100%; object-fit:cover; } .ad-breakout{ margin-inline:calc(-1 * var(--space-4)); } .ad-slot--header{ width:100%; max-width:calc(var(--ad-mobile-w) * 1px); aspect-ratio:var(--ad-mobile-w) / var(--ad-mobile-h); margin-inline:auto; } .ad-slot--footer{ width:100%; max-width:calc(var(--ad-footer-w) * 1px); aspect-ratio:var(--ad-footer-w) / var(--ad-footer-h); margin-inline:auto; } /* 21. Do pięciu banerów w stopce, w jednym rzędzie na desktopie. */ .footer-ads { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-7); } .ad-slot--footer { min-height: 90px; } .site-logo img, .footer-logo img, .footer-ai-graphic, .ad-slot img, .footer-contact-figure img{ background:none; } .footer-ads .ad-slot--footer{ display:block; padding:0; border:none; min-height:50px; } .footer-ads .ad-slot--footer img{ display:block; width:100%; height:auto; max-width:300px; } /* --- V3: baner stopki dokładnie 300×50 --- Slot dziedziczył width:100% i rozciągał grafikę ponad 300 px, a pod nią zostawał pusty pas tła. Sloty mają teraz sztywne 300×50 — dokładnie rozmiar z dokumentacji — i zawijają się w kolejny rząd na wąskim ekranie. */ .footer-ads{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-7); } .footer-ads .ad-slot--footer{ flex:0 0 auto; width:300px; height:50px; padding:0; border:none; min-height:0; background:none; } .footer-ads .ad-slot--footer a{ display:block; width:300px; height:50px; } .footer-ads .ad-slot--footer img{ display:block; width:300px; height:50px; max-width:100%; object-fit:contain; } /* --- pasmo banerów (środkowa część stopki — dok „Baner w stopce") --- */ .footer-ads{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-7); padding-bottom:var(--space-7); border-bottom:var(--border-standard) solid var(--color-black); } .footer-ads::before{ content:"Reklama"; flex:0 0 100%; font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-black); margin-bottom:var(--space-3); } .footer-ads .ad-slot--footer a, .footer-ads .ad-slot--footer img{ display:block; width:300px; height:50px; } .footer-ads .ad-slot--footer img{ object-fit:contain; } /* --- V3 fix: stopka na wąskim desktopie --- 1. Sloty banerów dziedziczyły margin:16px auto z bazowej reguły .ad-slot; auto w kontenerze flex zjada całą wolną przestrzeń, więc rząd banerów się rozjeżdżał. Zerujemy margines — odstęp niesie gap. 2. Kolumna opisowa rozciągała się na całą szerokość już od 620 px, przez co „Partnerzy" spadali do osobnego rzędu z dziurą obok. Rozpięcie działa tylko w układzie dwukolumnowym (620–899 px), a od 900 px wchodzą cztery kolumny. */ .footer-ads .ad-slot--footer{ margin:0; } .footer-logo, .site-footer .footer-grid, .footer-ads{ margin:0 0 var(--space-6); padding-bottom:var(--space-6); border-bottom:var(--border-standard) solid var(--color-black); } .footer-ads{ gap:var(--space-3); } .footer-ads::before{ margin-bottom:var(--space-3); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ========================================================= 14. KOMPONENTY STRONY GŁÓWNEJ Poniższe klasy budują WYŁĄCZNIE ze zmiennych zdefiniowanych powyżej — żadna nowa wartość liczbowa/kolor/krój nie jest wprowadzana. Tam gdzie da się użyć komponentu ze styleguide'u bezpośrednio (.tag, .box-shadow, .btn-outline, .meta, .divider, .ad-slot, h1–h4) — jest on użyty bez modyfikacji. ========================================================= */ /* --- Header --- */ /* Header — stale czarny pasek przyklejony do górnej krawędzi. Wybrano stałą inwersję zamiast przełączania po wyjściu poza hero: makiety są bez JS, a scroll-driven animations nie mają jeszcze wystarczającego wsparcia przeglądarek. Wysokość pozostaje 71px. */ .site-header{ background:var(--color-black); color:var(--color-white); border-bottom:var(--border-standard) solid var(--color-black); } .site-header a{ color:var(--color-white); } .site-header a:hover{ background:var(--color-neon); color:var(--color-black); } .site-header__row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); padding-block:var(--space-4); } .site-logo{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:400; text-transform:uppercase; letter-spacing:var(--tracking-display); line-height:var(--lh-normal); /* utrzymuje wysokość paska na 71px */ } .site-logo:hover{ background:var(--color-neon); } .site-nav{ flex:1 1 auto; } .site-nav ul{ display:flex; flex-wrap:wrap; gap:var(--space-5); } .site-nav a, .site-search{ font-size:var(--fs-meta); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); } .site-nav a:hover, .site-search:hover{ background:var(--color-neon); } /* 6 + 18. Menu: na tablecie zawija się, na mobile chowa pod hamburger. Liczba kategorii nie jest ograniczona — lista zawija się w kolejne wiersze, zamiast wypychać logo i wyszukiwanie z paska. */ .site-nav ul { flex-wrap: wrap; row-gap: var(--space-2); } .site-nav-mobile { display: none; } /* ---------- MENU DWUPOZIOMOWE ---------- */ .site-nav__list{ display:flex; align-items:center; gap:var(--space-5); list-style:none; } .site-nav__list > li{ position:relative; } .site-nav .has-sub > a::after{ content:"\25BE"; margin-left:6px; font-size:.75em; } .site-nav__sub{ position:absolute; top:100%; left:calc(var(--space-3) * -1); min-width:230px; display:none; list-style:none; padding:var(--space-2); background:var(--color-white); border:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-hard); z-index:90; } .site-nav .has-sub:hover > .site-nav__sub, .site-nav .has-sub:focus-within > .site-nav__sub{ display:block; } .site-nav__sub a{ display:block; padding:var(--space-2) var(--space-3); color:var(--color-black); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:var(--tracking-wide); border-bottom:var(--border-standard) solid transparent; } .site-nav__sub a:hover{ background:var(--color-neon); } /* Mobilne podmenu — zagnieżdżone
w panelu menu. */ .site-nav-mobile .mobile-sub > summary{ list-style:none; cursor:pointer; padding:var(--space-2) 0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-black); } .site-nav-mobile .mobile-sub > summary::-webkit-details-marker{ display:none; } .site-nav-mobile .mobile-sub > summary::after{ content:" +"; } .site-nav-mobile .mobile-sub[open] > summary::after{ content:" \2212"; } .site-nav-mobile .mobile-sub > ul{ margin:var(--space-2) 0 var(--space-3) var(--space-4); border-left:var(--border-standard) solid var(--color-black); padding-left:var(--space-3); display:grid; gap:var(--space-2); } /* --- V3 fix: .site-nav ul (0,1,1) wygrywało z .site-nav__sub (0,1,0), więc panel podmenu był zawsze rozwinięty. Podnosimy specyficzność. --- */ .site-nav ul.site-nav__sub{ display:none; } .site-nav .has-sub:hover > ul.site-nav__sub, .site-nav .has-sub:focus-within > ul.site-nav__sub{ display:block; } /* ---------- V3 fix: JASNY PASEK NAGŁÓWKA (wytyczna 13) ---------- Logo portali Traffic Peaks jest w czarnym foncie, więc pasek nagłówka nie może być czarny — logo byłoby niewidoczne. Pasek dostaje białe tło i grubą czarną krawędź dolną; charakter motywu (twarde krawędzie, neon jako akcent) zostaje bez zmian. Ten sam warunek dotyczy stopki. */ .site-header{ background:var(--color-white); color:var(--color-black); border-bottom:var(--border-divider) solid var(--color-black); } .site-header a{ color:var(--color-black); } .site-nav a, .site-search{ color:var(--color-black); } .site-logo{ display:inline-flex; align-items:center; } .site-logo img{ display:block; height:32px; width:auto; background:none; } /* ============================================================ V3 — MENU PRZEPROJEKTOWANE Co się zmieniło i dlaczego: · linki serwisowe (redakcja, mapa, kontakt) zeszły do cienkiego paska nad logiem — w menu głównym zostają tylko kategorie; · pozycja menu to pełnowysokościowy cel kliknięcia (72 px), nie sam tekst; stan aktywny i hover niesie neonowy pasek u dołu, więc widać, gdzie jesteś (heurystyka „widoczność stanu"); · panel podmenu dostał etykietę, neonową krawędź górną łączącą go z pozycją i pozycję „Wszystko w dziale" — wejście do kategorii nadrzędnej nie ginie; · link partnera ma własną etykietę „partner" i ramkę, więc nie udaje kategorii redakcyjnej; · wyszukiwanie to kwadratowy przycisk z ikoną i podpisem, a nie kolejny link w rzędzie; · menu mobilne: panel na pełną szerokość, pozycje 52 px. ============================================================ */ /* --- pasek użytkowy --- */ .site-topbar{ background:var(--color-black); color:var(--color-white); } .site-topbar__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:34px; flex-wrap:wrap; } .site-topbar__tagline{ font-size:var(--fs-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-white); opacity:.75; } .site-topbar__links{ display:flex; list-style:none; gap:var(--space-4); } .site-header .site-topbar__links a{ color:var(--color-white); font-size:var(--fs-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:var(--space-2) 0; border-bottom:var(--border-standard) solid transparent; } .site-header .site-topbar__links a:hover{ border-bottom-color:var(--color-neon); background:none; } /* --- pasek główny --- */ .site-header__row{ display:flex; align-items:stretch; gap:var(--space-5); min-height:72px; } .site-logo{ display:inline-flex; align-items:center; flex:0 0 auto; } .site-logo img{ display:block; height:30px; width:auto; background:none; } /* --- menu --- */ .site-nav{ margin-left:auto; } .site-nav ul.site-nav__list{ display:flex; align-items:stretch; gap:0; list-style:none; flex-wrap:wrap; } .site-nav__item{ position:relative; display:flex; align-items:stretch; } .site-header .site-nav a.nav-link{ display:flex; align-items:center; gap:6px; padding:0 var(--space-4); min-height:72px; font-family:var(--font-display); font-size:var(--fs-h4); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-black); position:relative; background:none; } .site-header .site-nav a.nav-link::after{ content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:0; height:var(--shadow-offset); background:var(--color-neon); transform:scaleX(0); transform-origin:left center; transition:transform .12s linear; } .site-header .site-nav a.nav-link:hover{ background:var(--color-bg-section); } .site-header .site-nav a.nav-link:hover::after, .site-nav__item:focus-within > a.nav-link::after{ transform:scaleX(1); } .site-header .site-nav a.nav-link[aria-current="page"]{ background:var(--color-bg-section); } .site-header .site-nav a.nav-link[aria-current="page"]::after{ transform:scaleX(1); } .nav-link__chev{ width:7px; height:7px; border-right:var(--border-standard) solid currentColor; border-bottom:var(--border-standard) solid currentColor; transform:rotate(45deg) translateY(-2px); } /* --- panel podmenu --- */ .site-nav__panel{ position:absolute; top:100%; left:0; min-width:250px; display:none; z-index:90; background:var(--color-white); border:var(--border-container) solid var(--color-black); border-top:var(--shadow-offset) solid var(--color-neon); box-shadow:var(--shadow-hard); padding:var(--space-3); } .site-nav .has-sub:hover > .site-nav__panel, .site-nav .has-sub:focus-within > .site-nav__panel{ display:block; } .site-nav__panel-label{ font-size:var(--fs-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-gray); padding:0 var(--space-2) var(--space-2); } .site-nav ul.site-nav__sub{ display:block; list-style:none; padding:0; border:0; box-shadow:none; position:static; min-width:0; } .site-header .site-nav ul.site-nav__sub a{ display:flex; align-items:center; min-height:44px; padding:0 var(--space-3); color:var(--color-black); font-family:var(--font-family-base); font-weight:var(--fw-bold); font-size:var(--fs-meta); text-transform:none; letter-spacing:var(--tracking-normal); border-bottom:0; } .site-header .site-nav ul.site-nav__sub a:hover{ background:var(--color-neon); } .site-nav__sub-all{ border-top:var(--border-standard) solid var(--color-black); margin-top:var(--space-2); } .site-header .site-nav .site-nav__sub-all a{ font-family:var(--font-display); text-transform:uppercase; font-size:var(--fs-micro); letter-spacing:var(--tracking-wide); } /* --- wyszukiwanie --- */ .site-header a.site-search{ align-self:center; display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 var(--space-3); border:var(--border-container) solid var(--color-black); background:var(--color-white); color:var(--color-black); font-family:var(--font-display); font-size:var(--fs-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; flex:0 0 auto; } .site-header a.site-search:hover{ background:var(--color-neon); } .site-search .icon{ width:16px; height:16px; stroke-linecap:square; } /* --- V3: nagłówek w trzech pasmach (pasek użytkowy / logo / kategorie) --- Przy 4–6 kategoriach i linku partnera jeden rząd pękał i menu zawijało się pod logo przypadkiem. Rozdzielenie na pasmo marki i pasmo kategorii daje stały układ na każdej szerokości — i miejsce na kolejne działy. */ .site-header__row{ display:flex; align-items:center; gap:var(--space-5); min-height:64px; flex-wrap:nowrap; } .site-header__brandside{ margin-left:auto; display:flex; align-items:center; gap:var(--space-4); } .site-navbar{ border-top:var(--border-standard) solid var(--color-black); } .site-navbar__row{ display:flex; align-items:stretch; } .site-nav{ margin-left:0; } .site-nav ul.site-nav__list{ flex-wrap:wrap; } .site-header .site-nav a.nav-link{ min-height:56px; padding:0 var(--space-4); } .site-header .site-nav a.nav-link:first-child{ padding-left:0; } .site-nav__item:first-child > a.nav-link{ padding-left:0; } .site-nav__item:first-child > a.nav-link::after{ left:0; } /* --- V3: wyrównanie pasma kategorii --- Wszystkie pozycje mają równy padding (spójne prostokąty podświetlenia), a cała lista jest przesunięta o ten padding w lewo, więc pierwsza pozycja zaczyna się w linii logo. Link partnera trzyma się prawej krawędzi. */ .site-navbar__row{ justify-content:space-between; } .site-nav{ width:100%; } .site-nav ul.site-nav__list{ margin-left:calc(-1 * var(--space-4)); width:100%; } .site-header .site-nav a.nav-link, .site-nav__item:first-child > a.nav-link{ padding:0 var(--space-4); } .site-nav__item:first-child > a.nav-link::after{ left:var(--space-3); } /* --- V3: czytelność menu --- Anton to font wąski, wersalikowy i o mocno zwartym oczku — przy 18px i rozstrzeleniu 0.08em pozycje menu czytały się z trudem. Nawigacja przechodzi na Archivo (font treści) w grubości 700, wielkością i małymi literami: wyraźne różnice między znakami i normalne odstępy. Anton zostaje tam, gdzie pracuje dobrze — w nagłówkach. */ .site-header .site-nav a.nav-link{ font-family:var(--font-family-base); font-weight:var(--fw-heavy); font-size:17px; letter-spacing:var(--tracking-normal); text-transform:none; } .site-header .site-nav .site-nav__sub-all a{ font-family:var(--font-family-base); font-weight:var(--fw-heavy); font-size:var(--fs-meta); letter-spacing:var(--tracking-normal); text-transform:none; } .site-nav-mobile .mobile-sub > summary, .site-nav-mobile > ul > li > a{ font-family:var(--font-family-base); font-weight:var(--fw-heavy); font-size:17px; letter-spacing:var(--tracking-normal); text-transform:none; } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ .section{ padding-block:var(--space-8); } .section--tinted{ background:var(--color-bg-section); } .section--tinted + .section--tinted{ border-top:var(--border-standard) solid var(--color-black); } /* ---------- 9. BOX Z TWARDYM CIENIEM ---------- */ .box-shadow{ background:var(--color-white); border:var(--border-standard) solid var(--color-black); box-shadow:var(--shadow-hard-lg); padding:var(--space-6); } /* --- Kafelek siatki (obraz flush z ramką, bez marginesu wewnętrznego) --- */ .grid-tile{ border:var(--border-standard) solid var(--color-black); display:flex; flex-direction:column; background:var(--color-white); } .grid-tile__media{ aspect-ratio:3/2; overflow:hidden; } .grid-tile__media img{ width:100%; height:100%; object-fit:cover; display:block; } .grid-tile__body{ padding:var(--space-4); } .grid-tile__tag{ margin-bottom:var(--space-2); } .grid-tile__title{ font-size:var(--fs-h3); font-weight:var(--fw-heavy); line-height:1.2; margin-bottom:var(--space-2); } .grid-tile__title a:hover{ background:var(--color-neon); } .grid-tile__meta{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-3); } /* Raster asymetryczny na siatce 12-kolumnowej. Żadne dwa kafle obok siebie nie mają tej samej szerokości: 8/4, 5/7, 7/5 na desktopie i 7/5, 5/7, 7/5 na tablecie. */ .home-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); /* stretch, nie start — inaczej kafle o różnej wysokości zostawiają rwane dziury i siatka wygląda na zepsutą */ align-items:stretch; } /* ============================================================ RUCHOMY PASEK „DALEJ W NAJNOWSZYCH" Domknięcie sekcji Najnowsze: to, co nie zmieściło się na kartach, jedzie tytułami. Ruch jest tu informacją — pokazuje, że lista jest dłuższa niż widoczny wycinek. Dostępność: lista jest zduplikowana, żeby pętla nie miała szwu; druga kopia ma aria-hidden, więc czytnik ekranu czyta tytuły raz. Pasek staje przy najechaniu i przy fokusie z klawiatury, żeby dało się kliknąć odsyłacz. Przy systemowym ograniczeniu ruchu animacja nie startuje wcale — zostaje lista przewijana w poziomie. ============================================================ */ .news-ticker { background: var(--color-black); color: var(--color-white); border-block: var(--border-container) solid var(--color-black); display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); overflow: hidden; } .news-ticker__label { flex: none; margin: 0; padding-left: var(--space-4); font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-neon); } .news-ticker__viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; } .news-ticker__track { display: flex; width: max-content; animation: ticker 45s linear infinite; } .news-ticker:hover .news-ticker__track, .news-ticker:focus-within .news-ticker__track { animation-play-state: paused; } .news-ticker__list { display: flex; align-items: baseline; gap: var(--space-5); padding-right: var(--space-5); } .news-ticker__list li { flex: none; display: flex; align-items: baseline; gap: var(--space-5); } .news-ticker__list li::after { content: "\002022"; color: var(--color-neon); } .news-ticker__list a { white-space: nowrap; font-size: var(--fs-meta); border-bottom: 2px solid transparent; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ DZIAŁY NA STRONIE GŁÓWNEJ Każdy dział to skrzynka: czarny pasek z nazwą i trzy wpisy. Pasek jest czarny, kafle na bieli — cztery pełne czarne bloki pod sobą byłyby ścianą, a nie rytmem. ============================================================ */ .section-eyebrow { font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-5); } .cat-band { border: var(--border-container) solid var(--color-black); background: var(--color-white); margin-bottom: var(--space-6); } .cat-band:last-child { margin-bottom: 0; } .cat-band__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); background: var(--color-black); color: var(--color-white); padding: var(--space-3) var(--space-4); } .cat-band__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--color-white); margin: 0; } .cat-band__count { font-size: var(--fs-micro); color: var(--color-gray-light); font-variant-numeric: tabular-nums; } .cat-band__link { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-neon); border-bottom: 2px solid transparent; } .cat-band__link:hover { border-bottom-color: var(--color-neon); } .cat-band__grid { display: grid; grid-template-columns: 1fr; } .cat-tile { display: flex; flex-direction: column; border-top: var(--border-standard) solid var(--color-black); } .cat-tile__media { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: var(--border-standard) solid var(--color-black); } .cat-tile__media img { width: 100%; height: 100%; object-fit: cover; } .cat-tile__body { padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-2); } .cat-tile__title { font-family: var(--font-family-base); font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: var(--lh-tight); } .cat-tile__title a:hover { background: var(--color-neon); } /* ============================================================ POPRAWKI Z LISTY KLIENTA — 25.08.2026 ============================================================ */ /* 5. Odstęp baner → zdjęcie główne. Było 115 px: 64 px paddingu pierwszej sekcji + 32 px marginesu wpisu wiodącego + 16 px slotu. Pierwsza sekcja po banerze nie potrzebuje pełnego paddingu, bo baner sam już oddziela ją od nagłówka. Zostaje 32 px. */ main > .section:first-child { padding-top: var(--space-4); } /* Sekcja materiałów sponsorowanych — bez cieni, bez neonu, bez ramek. Wygląda jak zwykła lista wpisów, bo taka ma być (wytyczna 12). */ .sponsored-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); } .sponsored-grid .grid-tile__body p{ font-size:var(--fs-meta); color:var(--color-gray); margin-bottom:var(--space-3); } /* --- V3: odstęp nad paskiem „Dalej w najnowszych" --- Pasek stykał się z kartami sekcji nad nim (reguła .ticker-section nie dotyczyła tego elementu — w makiecie nazywa się .news-ticker). */ .news-ticker{ margin-top:var(--space-8); } /* ============================================================ V3 — „NAJNOWSZE" JAKO HERO-SLIDER Za inspiracjami: duży tytuł w lewej kolumnie, jedno mocne zdjęcie po prawej z twardym cieniem, dużo powietrza, jeden przycisk, wskaźniki 01/02/03. W języku Bold: Anton w tytule, neon jako podkreślenie jednej frazy, czarne ramki i cień offsetowy. ============================================================ */ .hero-latest__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); } .hero-latest__head .section-eyebrow{ margin:0; } .hero-latest__stage{ position:relative; } .hero-slide{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center; } .hero-slide[hidden]{ display:none; } .hero-slide__text{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); } .hero-slide__kicker{ display:flex; align-items:center; gap:var(--space-4); } .hero-slide__title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(34px, 5vw, 68px); line-height:.98; letter-spacing:var(--tracking-display); margin:0; max-width:14ch; } .hero-slide__title a{ color:var(--color-black); } .hero-slide__title a:hover{ background:none; } /* neon jest zdarzeniem: jedna fraza tytułu, nie całe tło */ .hero-slide__title mark{ background:var(--color-neon); color:var(--color-black); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .hero-slide__lead{ font-size:var(--fs-lead); line-height:var(--lh-normal); max-width:42ch; margin:0; } .hero-slide__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); margin-top:var(--space-2); } .hero-slide__media{ position:relative; overflow:visible; aspect-ratio:4 / 3; border:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-black); background:var(--color-bg-section); } .hero-slide__media img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-slide__media .media-link{ display:block; height:100%; } /* --- nawigacja slajdera --- */ .hero-latest__nav{ display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-6); } .hero-latest__arrow{ width:44px; height:44px; display:inline-grid; place-items:center; border:var(--border-standard) solid var(--color-black); background:var(--color-white); font-family:var(--font-display); font-size:var(--fs-h4); cursor:pointer; color:var(--color-black); } .hero-latest__arrow:hover{ background:var(--color-black); color:var(--color-white); } .hero-latest__dots{ display:flex; gap:var(--space-2); } .hero-latest__dots button{ min-width:44px; height:44px; padding:0 var(--space-3); border:var(--border-standard) solid transparent; background:none; font-family:var(--font-family-base); font-weight:var(--fw-heavy); font-size:var(--fs-meta); letter-spacing:var(--tracking-wide); color:var(--color-black); cursor:pointer; } .hero-latest__dots button:hover{ border-color:var(--color-black); } .hero-latest__dots button[aria-selected="true"]{ background:var(--color-neon); border-color:var(--color-black); } /* --- V3: „Najnowsze" na czerni --- Sekcja otwierająca odwraca kolory: czarne tło, biały tekst, neon jako jedyny akcent (fraza w tytule, aktywny wskaźnik, cień kadru). Pasek „Dalej w najnowszych" pod nią jest też czarny, więc razem tworzą jedno ciemne pasmo otwarcia; oddziela je cienka biała linia. */ .hero-latest{ background:var(--color-black); color:var(--color-white); padding-block:var(--space-7) var(--space-7) !important; } .hero-latest .section-eyebrow, .hero-latest .meta, .hero-latest .hero-slide__lead, .hero-latest .hero-slide__title a, .hero-latest .hero-latest__all{ color:var(--color-white); } .hero-latest .hero-latest__all:hover{ color:var(--color-neon); } .hero-latest .hero-slide__kicker .tag{ background:var(--color-white); color:var(--color-black); border-color:var(--color-white); } .hero-latest .hero-slide__kicker .tag:hover{ background:var(--color-neon); border-color:var(--color-neon); } .hero-latest .hero-slide__title a:hover mark{ background:var(--color-white); } .hero-latest .btn-solid{ background:var(--color-neon); color:var(--color-black); border-color:var(--color-neon); } .hero-latest .btn-solid:hover{ background:var(--color-white); border-color:var(--color-white); } .hero-latest .hero-slide__media{ border-color:var(--color-white); box-shadow:var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-neon); } .hero-latest .hero-latest__arrow{ background:var(--color-black); color:var(--color-white); border-color:var(--color-white); } .hero-latest .hero-latest__arrow:hover{ background:var(--color-white); color:var(--color-black); } .hero-latest .hero-latest__dots button{ color:var(--color-white); } .hero-latest .hero-latest__dots button:hover{ border-color:var(--color-white); } .hero-latest .hero-latest__dots button[aria-selected="true"]{ background:var(--color-neon); color:var(--color-black); border-color:var(--color-neon); } /* tytuł: wiersze nachodziły na siebie przy .98 — Anton potrzebuje ok. 1.05 */ .hero-slide__title{ line-height:1.05; } .hero-slide__title mark{ padding:0 .1em; line-height:inherit; } /* pasek pod sekcją: jedno ciemne pasmo, rozdzielone cienką białą linią */ .news-ticker{ margin-top:0; border-top-color:var(--color-white); } /* baner nad menu nie styka się z czarnym pasmem otwarcia */ .hero-latest{ margin-top:var(--space-6); } /* --- V3: czytelny tytuł w hero --- Anton wersalikami w tej skali nie działa: wąskie oczko, ogonki ą/ż wchodzą w wiersz poniżej, a neonowe tło frazy zasłania poprzedni wiersz. Długi tytuł SEO (60–70 znaków) rozbijałby się na 5–6 wierszy. Tytuł idzie na Archivo 700, małymi literami, w skali 28–44 px z interlinią 1.12 — sześćdziesięcioznakowy tytuł mieści się w 3 wierszach. Neon zostaje jako podkreślenie frazy, nie jako blok. */ .hero-slide__title{ font-family:var(--font-family-base); font-weight:var(--fw-heavy); text-transform:none; letter-spacing:var(--tracking-tight); font-size:clamp(28px, 3.4vw, 44px); line-height:1.12; max-width:24ch; text-wrap:balance; } .hero-slide__title mark{ background:none; color:inherit; padding:0; box-shadow:inset 0 -0.28em 0 0 var(--color-neon); } .hero-latest .hero-slide__title a:hover mark{ box-shadow:inset 0 -1em 0 0 var(--color-neon); color:var(--color-black); } .hero-slide__lead{ font-size:var(--fs-body); max-width:48ch; } /* --- V3: stała wysokość sceny slidera --- Slajdy były przełączane przez display:none, więc czarne pasmo dostosowywało wysokość do bieżącego wpisu i skakało przy klikaniu. Wszystkie trzy slajdy leżą teraz w tej samej komórce siatki — scena ma wysokość najwyższego z nich i nie zmienia jej wcale. Slajdy nieaktywne są niewidoczne i wyjęte z nawigacji (inert), więc Tab i czytnik ekranu widzą tylko ten na wierzchu. */ .hero-latest__stage{ display:grid; grid-template-areas:"slide"; align-items:center; } .hero-slide{ grid-area:slide; } .hero-slide:not(.is-active){ visibility:hidden; pointer-events:none; } .hero-slide[hidden]{ display:grid; } /* --- V3: przyciski „Zobacz artykuł" w jednej linii --- Przycisk stał zaraz pod lidem, więc jego wysokość zależała od długości opisu i w trzech kartach wypadał na trzech różnych poziomach. Karta jest kolumną flex, opis się rozciąga, a przycisk jest dociśnięty do dna — przyciski leżą w jednej linii niezależnie od długości tekstów. */ .sponsored-grid{ align-items:stretch; } .sponsored-grid .grid-tile{ display:flex; flex-direction:column; } .sponsored-grid .grid-tile__body{ display:flex; flex-direction:column; flex:1 1 auto; } .sponsored-grid .grid-tile__body p{ flex:1 1 auto; } .sponsored-grid .grid-tile__body .btn-outline{ align-self:flex-start; margin-top:var(--space-4); } /* ===== z makiety: single.html ===== */ .grid-tile__meta{ display:flex; flex-wrap:wrap; gap:var(--space-3); } .home-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); } /* ===== z makiety: author.html ===== */ /* ---------- 8. BOX Z TWARDYM CIENIEM ---------- */ .box-shadow{ border:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-hard-lg); padding:var(--space-6); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ .lead{ font-size:var(--fs-lead); font-weight:var(--fw-regular); line-height:1.45; max-width:var(--text-col-max); } .post-lead .lead{ margin-bottom:var(--space-5); } main > .section:first-child > .container > .post-lead { margin-top: 0; } /* 12. Odstęp po opisie redakcji / boksie autora. */ .author-box, .editorial-note, .redakcja-note { margin-bottom: var(--space-8); } .author-box__link{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-wide); border-bottom:var(--border-standard) solid var(--color-neon); } /* ===== z makiety: single.html ===== */ /* --- Breadcrumbs --- */ .breadcrumbs{ margin-block:var(--space-5); } .breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); } .breadcrumbs a{ font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-gray); } .breadcrumbs a:hover{ background:var(--color-neon); color:var(--color-black); } .breadcrumbs .is-sep{ font-size:var(--fs-micro); color:var(--color-gray); } .breadcrumbs .is-current{ font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--color-black); } /* --- Nagłówek wpisu --- */ .post-tag{ margin-bottom:var(--space-4); } /* H1 na pełnej szerokości kontenera (1200px), nie w kolumnie tekstu */ .post-title{ max-width:none; margin-bottom:var(--space-5); } .post-lead-text{ margin-bottom:var(--space-5); } .post-meta-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); padding-bottom:var(--space-5); border-bottom:var(--border-standard) solid var(--color-black); margin-bottom:var(--space-6); } /* Data publikacji i data aktualizacji jako dwie osobne pozycje meta. Etykieta zostaje w konwencji .meta (szare wersaliki, tracking 0.08em), sama data idzie czernią i wagą 700 — kontrast bez dodatkowego koloru. */ .post-date{ display:inline-flex; align-items:baseline; gap:var(--space-2); } .post-date time{ color:var(--color-black); font-weight:var(--fw-heavy); } /* --- Spis treści --- */ /* Twardy czarny blok w strumieniu treści (bez position:sticky — sticky jest sygnaturą innych motywów paczki). Numeracja odpowiada kolejności czytania. Neon pojawia się wyłącznie na numerze pozycji pod kursorem i w obrysie :focus-visible — na statycznym ekranie limit dwóch wystąpień neonu zajmuje wyłącznie tag kategorii. */ .post-toc{ background:var(--color-black); color:var(--color-white); border:var(--border-container) solid var(--color-black); padding:var(--space-5); margin-bottom:var(--space-7); } .post-toc__title{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:400; line-height:var(--lh-display); letter-spacing:var(--tracking-display); text-transform:uppercase; padding-bottom:var(--space-3); border-bottom:var(--border-container) solid var(--color-white); } .post-toc__list li + li{ border-top:var(--border-standard) solid var(--color-white); } .post-toc__list a{ display:flex; align-items:center; gap:var(--space-4); padding-block:var(--space-3); color:var(--color-white); } .post-toc__num{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:var(--space-6); height:var(--space-6); background:var(--color-white); color:var(--color-black); font-size:var(--fs-micro); font-weight:var(--fw-heavy); letter-spacing:var(--tracking-wide); } .post-toc__label{ font-size:var(--fs-meta); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-wide); line-height:1.3; } .post-toc__list a:hover .post-toc__num{ background:var(--color-neon); } .post-toc__list a:hover .post-toc__label{ text-decoration:underline; text-underline-offset:var(--space-1); } /* --- Obraz wyróżniający i obraz wide (pełna szerokość kontenera) --- */ .post-figure{ margin-bottom:var(--space-6); } .post-figure__media{ position:relative; border:var(--border-container) solid var(--color-black); aspect-ratio:3/2; overflow:hidden; margin-bottom:0; } /* Podpis wewnątrz kadru — czarny pasek w dolnym rogu zdjęcia */ .post-figure__caption{ position:absolute; left:0; bottom:0; max-width:100%; background:var(--color-black); color:var(--color-white); padding:var(--space-2) var(--space-4); font-size:var(--fs-caption); font-weight:var(--fw-heavy); text-transform:uppercase; letter-spacing:var(--tracking-wide); line-height:1.3; } .post-figure__media--wide{ aspect-ratio:21/9; border:var(--border-standard) solid var(--color-black); margin-bottom:0; } .post-figure__media img{ width:100%; height:100%; object-fit:cover; } /* --- Treść wpisu --- */ .post-body{ margin-bottom:var(--space-6); } .post-body p{ margin-bottom:var(--space-5); } .post-body h2{ margin-top:var(--space-7); margin-bottom:var(--space-4); } .post-body h3{ margin-top:var(--space-5); margin-bottom:var(--space-3); } .post-body ul{ margin-bottom:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); } .post-body ul li{ padding-left:var(--space-5); position:relative; } .post-body ul li::before{ content:"■"; position:absolute; left:0; color:var(--color-black); font-size:var(--fs-micro); } /* --- Cytat blokowy --- */ .pull-quote{ border-left:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-hard); background:var(--color-white); padding:var(--space-5); margin-bottom:var(--space-5); font-size:var(--fs-lead); font-weight:var(--fw-bold); line-height:1.4; } /* --- Box „Warto wiedzieć” --- */ .box-tip{ border:var(--border-standard) solid var(--color-black); padding:var(--space-5); margin-bottom:var(--space-5); } .box-tip__label{ display:inline-block; margin-bottom:var(--space-3); } .box-tip p{ margin-bottom:0; } /* --- FAQ --- */ /* Seria twardych bloków, wszystko odsłonięte od razu — bez
, bo motyw niczego nie chowa (rozwijane akordeony to wzorzec focused/glam/journal). Pytanie: Anton, wersaliki, biel na czarnym pasku. Odpowiedź: Archivo na bieli. Bloki rozdzielone ramką 3px. Zero neonu. */ .post-faq{ margin-bottom:var(--space-6); } .post-faq__list{ display:flex; flex-direction:column; gap:var(--space-5); } .post-faq__item{ border:var(--border-container) solid var(--color-black); background:var(--color-white); } /* Specyficzność podniesiona ponad `.post-body h3`, żeby zdjąć marginesy nagłówka wewnątrz paska pytania. */ .post-faq .post-faq__q{ display:flex; align-items:flex-start; gap:var(--space-4); margin:0; padding:var(--space-3) var(--space-4); background:var(--color-black); color:var(--color-white); font-family:var(--font-display); font-size:var(--fs-h3); font-weight:400; /* Pytania łamią się na 2-3 wersy. Wcześniej stało tu 1.15; pomiar rysunku glifów (Range.getBoundingClientRect + TextMetrics) pokazał, że przy 390 px ogonek Ą pierwszego wersu wchodzi w kreskę Ż/Ó wersu poniżej o ok. 6 px. Obowiązuje więc ten sam token co w pozostałych nagłówkach Antona — 1.3 to minimum dla polskich diakrytyków. */ line-height:var(--lh-display); letter-spacing:var(--tracking-display); text-transform:uppercase; } .post-faq__index{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:var(--space-6); height:var(--space-6); background:var(--color-white); color:var(--color-black); font-family:var(--font-family-base); font-size:var(--fs-micro); font-weight:var(--fw-heavy); letter-spacing:var(--tracking-wide); } .post-faq__a{ padding:var(--space-4); } .post-faq__a p{ margin-bottom:var(--space-3); } .post-faq__a p:last-child{ margin-bottom:0; } /* --- Box autora --- */ .author-box__name{ font-size:var(--fs-body); font-weight:var(--fw-heavy); margin-bottom:var(--space-2); } .author-box p{ margin-bottom:0; } .post-table{ margin-bottom:var(--space-6); } .post-table__scroll{ overflow-x:auto; border:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-hard); } .post-table table{ width:100%; min-width:560px; border-collapse:collapse; } .post-table th, .post-table td{ border:var(--border-standard) solid var(--color-black); padding:var(--space-3) var(--space-4); text-align:left; font-size:var(--fs-meta); line-height:var(--lh-normal); } .post-table thead th{ background:var(--color-black); color:var(--color-white); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:var(--fw-heavy); } .post-table tbody th{ font-weight:var(--fw-heavy); } /* Liczby w stałej szerokości znaku — kolumny parametrów czytają się w pionie, bez „skakania” przecinków. */ .post-table td{ font-variant-numeric:tabular-nums; } .post-table tbody tr:nth-child(even){ background:var(--color-bg-section); } .post-table__caption{ margin-top:var(--space-3); font-size:var(--fs-meta); color:var(--color-gray); } /* 9. Osadzony film — .post-video. Proporcja 16:9 rezerwowana przez aspect-ratio, więc layout nie przeskakuje po wczytaniu iframe'a. Ramka 3 px jak przy pozostałych mediach wpisu. */ .post-video{ margin-bottom:var(--space-6); } .post-video__frame{ position:relative; aspect-ratio:16/9; border:var(--border-container) solid var(--color-black); background:var(--color-black); overflow:hidden; } .post-video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .post-video__caption{ margin-top:var(--space-3); font-size:var(--fs-meta); color:var(--color-gray); } /* ============================================================ WIDOK WPISU — JEDNA SZEROKOŚĆ KOLUMNY Decyzja klienta: w widoku wpisu nic nie jest szersze od tekstu. Okruszki, tytuł, zdjęcia, tabele, film i FAQ trzymają tę samą krawędź co akapity — czytelnik ma jedną oś, a nie trzy. Wcześniej tekst miał 780 px, a zdjęcia i tytuł 1072 px, więc kolumna „rozjeżdżała się" przy każdej ilustracji. ============================================================ */ main .breadcrumbs ol, main .post-title, main .post-figure, main .post-video, main .post-table, main .post-toc, main .post-faq, main .author-box, main .tag-list { max-width: var(--text-col-max); } /* ===== z makiety: 404.html ===== */ .lead{ font-size:var(--fs-lead); font-weight:var(--fw-regular); max-width:var(--text-col-max); } /* Krótkie info o autorze — ten sam komponent co archiwum autora w search-archives.html (.author-box + ramka kontenerowa z twardym cieniem). Bez avatara — zgodnie z briefem. */ .author-box{ max-width:var(--text-col-max); border:var(--border-container) solid var(--color-black); box-shadow:var(--shadow-hard-lg); padding:var(--space-6); } .author-box__bio{ margin-bottom:0; } /* 12. Odstęp po boksie autora. */ .author-box { margin-bottom: var(--space-8); } /* ===== z makiety: author.html ===== */ /* --- WIDOK 3: archiwum autora --- */ .author-box{ margin-bottom:var(--space-7); max-width:var(--text-col-max); } .author-box__name{ font-size:var(--fs-h2); font-weight:var(--fw-black); margin-bottom:var(--space-3); } .author-box__bio{ } .author-box__count{ margin-top:var(--space-3); } /* ===== z makiety: authors.html ===== */ .page-head .lead{ max-width:var(--text-col-max); } /* WYGENEROWANE przez narzedzia/wyciagnij-css.py — nie edytuj ręcznie. Źródłem jest makieta w katalogu makieta/. Po poprawce w makiecie uruchom skrypt ponownie, potem narzedzia/zbuduj-arkusz.py. */ /* ===== z makiety: home.html ===== */ /* ---------- 12. PAGINACJA ---------- */ .pagination{ display:flex; flex-wrap:wrap; gap:var(--space-2); } .pagination a, .pagination span{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:var(--border-standard) solid var(--color-black); font-weight:var(--fw-heavy); font-size:var(--fs-meta); } .pagination a:hover{ background:var(--color-neon); } .pagination .is-current{ background:var(--color-neon); color:var(--color-black); } .pagination .is-next{ width:auto; padding-inline:var(--space-4); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--fs-micro); } /* 7. Odstęp przed paginacją. */ .pagination, nav[aria-label*="aginacj"], nav[aria-label*="strono"] { margin-top: var(--space-8); } /* ---------- PANEL BOCZNY (kategoria, wyszukiwanie, archiwum autora) ---------- Wytyczna 7: panel dopuszczalny na archiwach, bez treści sponsorowanych, i NIE wchodzi do hierarchii nagłówków — dlatego etykieta to

, a dostępną nazwę regionu nosi aria-label na