/* ============================================================================= Fundacja Wstawaj Alicja: system.css Wymaga tokens.css. Tylko to, czego nie ostyluje blok GenerateBlocks. 1. Pomocniki a11y klasy na markup z PHP 2. Treść wpisów rytm akapitów w artykułach i projektach 3. Nakładka menu @keyframes ikony i selektory na 4. Reguły globalne musi zostać na końcu tej grupy 5. Strona podopiecznego karty ze skrótkodów (po globalnych, celowo) 6. Szukajka listingu przycisk czyszczenia ze skrótkodu 7. Przełącznik motywu ikona ze skrótkodu i przejście między motywami 8. Aktualności meta i zdjęcie karty listingu, galeria wpisu 9. Podgląd zdjęć kafle i pasek miniatur nakładki GLightbox 10. Projekty karty i lista lat ze skrótkodów 11. Strona 404 treść z content-404.php 12. Pakiet ruchu klikalność kart, wejścia, pasek, nagłówek 13. Hero „Słowa" nagłówek ze słów, lead z CTA, przycisk „w dół" 14. Komunikaty GiveWP pudełko błędu na stronach systemowych 15. Pas logotypów kafel partnera jasny w obu motywach 16. Pas powitalny komunikat nad nagłówkiem, gaszony z localStorage Fluent Forms: zero reguł w motywie, wygląd idzie z własnego CSS wtyczki. ============================================================================= */ /* ============================================================================= 1. POMOCNIKI A11Y ============================================================================= */ /* Widoczne tylko dla czytnika ekranu. Bez display:none i visibility:hidden, bo te wycinają element także z drzewa dostępności. */ .u-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================= 2. TREŚĆ WPISÓW Artykuły i projekty pisane w edytorze, nie strony składane z kontenerów GB. padding-block-end tylko na single-post: za treścią wpisu stoi siostrzana sekcja „Więcej aktualności", a strona projektu kończy się na .entry-content. ============================================================================= */ /* 24px bez wyjątków */ .single-post .entry-content > * + *, .single-projekt .entry-content > * + * { margin-block-start: var(--fdn-spacing-lg); } /* Cap na wszystkich dzieciach, bo zdjęcie w treści ma szerokość akapitu. Kolumna stoi przy lewej krawędzi pasa, bez centrowania; układ blokowy daje każdemu dziecku min(100%, cap), więc wszystkie trzymają wspólną lewą krawędź. */ .single-post .entry-content > *, .single-projekt .entry-content > * { max-inline-size: var(--fdn-container-text); } /* Rytm treści stoi na marginesach górnych, a GP zeruje dolny margines ostatniego akapitu: bez tego treść kończy się na styk z sekcją „Więcej aktualności". Tylko single-post, strony i profile to stos sekcji GB z własnymi paddingami. */ .single-post .entry-content { padding-block-end: var(--fdn-space-section); } /* Pismo kolumny czytania: dziedziczenie z kontenera obejmuje akapity bez klas, a klasa t-body-* na elemencie wygrywa, więc lead zostaje przy 20 px. Interlinia jawnie: gdyby GP emitował sztywne 24 px zamiast mnożnika, pismo 18 dostałoby 1,33. */ .single-post .entry-content, .single-projekt .entry-content { font-size: var(--fdn-font-size-prose); line-height: var(--fdn-line-height-body); } /* Tytuł stoi w .entry-header, siostrze .entry-content, więc cap kolumny dostaje osobno. Reguła na h1, nie na .entry-header: GP Premium potrafi wstawić zdjęcie wyróżniające do nagłówka i cap na kontenerze ścinałby kadr. */ .single-post h1.entry-title, .single-post .entry-meta { max-inline-size: var(--fdn-container-text); } /* Tytuł wpisu i projektu na stopień 3xl: 42 px brało się z GP (h1 po nazwie elementu), a Customizer daje h1 tylko krój i wagę. Ten sam stopień co zdanie wejściowe podstrony i nazwisko na profilu; na mobile 3xl schodzi do 34 px. */ .single-post h1.entry-title, .single-projekt h1.entry-title { font-size: var(--fdn-font-size-3xl); line-height: var(--fdn-line-height-heading); } /* Nagłówki w treści wpisu i projektu na drabinkę tokenów zamiast 35/29/24 px z GP. Specyficzność zerowa z wyboru: :where() daje (0,0,1), tyle co `h2` GP, i wygrywa wyłącznie kolejnością arkuszy (enqueue na priorytecie 20, po generate_scripts). Za to przegrywa z każdą klasą (Global Styles, presety rdzenia, style per blok): to domyślny rozmiar nagłówka bez klasy, nie nadpisanie wyboru redaktora. Interlinia jawnie, bo GP daje h1-h3 1.2em, a h4 nic. */ :where(.single-post .entry-content, .single-projekt .entry-content) :is(h1, h2, h3, h4) { line-height: var(--fdn-line-height-heading); } :where(.single-post .entry-content, .single-projekt .entry-content) h1 { font-size: var(--fdn-font-size-2xl); } :where(.single-post .entry-content, .single-projekt .entry-content) h2 { font-size: var(--fdn-font-size-lg); } :where(.single-post .entry-content, .single-projekt .entry-content) h3 { font-size: var(--fdn-font-size-md); } :where(.single-post .entry-content, .single-projekt .entry-content) h4 { font-size: var(--fdn-font-size-base); } /* Etykieta nad tytułem: u wpisu kategoria i data (element GP z bazy woła [fwa_wpis_meta]), u projektu rok zakończenia (hak w inc/projekty.php). Selektor łapie wrapper ze skrótkodu, nie klasę bloku z bazy. Zawężenie do .entry-header: trójka „Więcej aktualności" woła ten sam skrótkod i ma zostać przy 13 px karty. Kolor na kat i data wprost, bo ich klasy mają własne kolory w sekcji 8 (0,1,0), które wygrałyby z dziedziczeniem. Margines tylko u projektu: wrapper wpisu jest inline w akapicie bloku, który sam daje odstęp. */ .single-post .entry-header .fwa-akt__meta, .single-projekt .entry-header .fwa-projekt__rok { color: var(--fdn-color-text-secondary); font-size: var(--fdn-font-size-base); line-height: var(--fdn-line-height-body); } .single-post .entry-header .fwa-akt__kat, .single-post .entry-header .fwa-akt__data { color: inherit; } .single-projekt .entry-header .fwa-projekt__rok { margin-block: 0 var(--fdn-spacing-lg); } /* podkreślanie włącza Customizer; tu sam offset, bo domyślny tnie ogonki w „ą" */ .entry-content a { text-underline-offset: 0.2em; } /* Zdjęcie wyróżniające wpisu. Pozycję przestawia Customizer (Layout, Blog, Location); tu tylko kadr, promień i odstępy. Pola szerokości i wysokości w Customizerze zostają puste, bo wpisana wysokość generuje przycięty plik. Selektor długi z dwu powodów: GP ma `.separate-containers .inside-article > .featured-image` (0,3,0), więc `body` daje (0,3,1) i wygrywa niezależnie od kolejności; a GP Premium wstawia zdjęcie albo jako siostrę .entry-content, albo w samym nagłówku, więc selektor potomka łapie oba ułożenia. */ body.single-post .inside-article .featured-image { margin-block: var(--fdn-spacing-lg); } body.single-post .inside-article .featured-image img { display: block; inline-size: 100%; block-size: var(--fdn-post-hero); border-radius: var(--fdn-radius-md); object-fit: cover; } /* Odstęp pod zdjęciem ma być jeden. GP daje `.entry-content:not(:first-child)` margin-top 2em, który zlewa się z dolnym marginesem zdjęcia i wygrywa (32 > 24). Zerujemy go tylko tam, gdzie zdjęcie poprzedza treść; wpis bez zdjęcia zostaje przy rytmie GP. Dwie reguły, bo zdjęcie bywa siostrą .entry-content albo ostatnim dzieckiem nagłówka. */ body.single-post .featured-image + .entry-content { margin-block-start: 0; } /* Osobna reguła, nie druga pozycja w liście selektorów wyżej: przeglądarka bez :has() unieważnia całą regułę, w której taki selektor stoi. */ body.single-post .entry-header:has(.featured-image) + .entry-content { margin-block-start: 0; } /* ============================================================================= 3. NAKŁADKA MENU MOBILNEGO Reszta siedzi w Global Style u-menu-overlay. Tu tylko to, co dotyczy elementów poza blokiem Menu Container. ============================================================================= */ /* podmiana ikony hamburger <-> X */ @keyframes fwa-icon-in { from { opacity: 0; transform: rotate(-90deg) scale(0.7); } to { opacity: 1; transform: rotate(0deg) scale(1); } } /* blokada przewijania tła pod otwartą nakładką, zamiast JS-a */ body:has(.gb-menu-container--toggled) { overflow: hidden; } /* Stan startowy nakładki: GB chowa ją przez display:none, więc bez tego nie ma od czego animować, a edytor CSS w GB nie przyjmuje @starting-style. Prefiks `body` jest konieczny: bez niego reguła ma tę samą specyficzność co Global Style i przegrywa, bo ten arkusz ładuje się wcześniej. */ @starting-style { body .u-menu-overlay.gb-menu-container--toggled { clip-path: circle(0% at calc(100% - var(--fdn-space-gutter) - 22px) calc(var(--fdn-size-header) / 2)); } body .u-menu-overlay.gb-menu-container--toggled .gb-menu > li { opacity: 0; transform: translateY(12px); } } /* Bielenie przy otwartym menu. Powrót do ciemnego jest opóźniony w Global Style u-menu-toggle; tu tylko zdejmujemy opóźnienie na wejściu. */ body:has(.gb-menu-container--toggled) :is(.gb-menu-open-icon, .gb-menu-toggle-text) { color: var(--fdn-color-menu-overlay-text); transition-delay: 0s; } /* ============================================================================= 4. REGUŁY GLOBALNE Musi zostać na końcu tej grupy: :focus-visible pisze do box-shadow i ma taką samą specyficzność co zwykła klasa. ============================================================================= */ /* Domyślna warstwa jasna. Przełącznik motywu nie pisze color-scheme z JS: w trybie ciemnym wygrywa `html[data-theme="dark"]` z tokens.css (0,1,1) nad tą regułą (0,0,1). Tu zostaje wartość dla strony bez atrybutu, także wczytanej bez JS. */ html { color-scheme: light; } /* zapas pod przyklejony nagłówek przy każdym przewinięciu do elementu (WCAG 2.4.11) */ html { scroll-padding-block-start: calc(var(--fdn-size-header) + var(--fdn-spacing-md)); } /* Cel dotykowy 48px (WCAG 2.5.8). Nie każdy