/* Baza motywu — to, co obowiązuje zanim jakakolwiek sekcja powie cokolwiek. * * Świadomie krótkie. Rozmiary nagłówków, odstępy sekcji i szerokości kontenerów * NIE są tutaj: każda sekcja ma je zapisane liczbowo w swoim pliku canvasu * (`docs/canvas/*.dc.html`), więc wymyślanie tu skali typograficznej znaczyłoby * tylko tyle, że każdy szablon musiałby ją potem nadpisywać. * * Plik ładuje się globalnie, razem z `tokens.css` i `fonts.css`. Wszystko poza * tą trójką idzie przez `szewko_styl()` z pliku szablonu — reguła „enqueue per * szablon" z PORT.md §2a. */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; /* Pergamin, nie biel. Sekcje i tak ustawiają własne tła na całą szerokość; jedyny efekt tego wiersza to brak białego błysku pod stroną w trakcie ładowania i na przewinięciu poza koniec dokumentu. Odpowiednik mapowania `--background` z repo Reacta. */ background: var(--color-parchment); color: var(--color-dark-mahogany); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: 1.2; /* Rozmiar celowo dziedziczony — patrz nagłówek pliku. */ font-size: inherit; } p, figure, blockquote, ul, ol, dl { margin: 0; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } button, input, select, textarea { font: inherit; color: inherit; } /* Obrys skupienia jest jeden na całą witrynę i DWUWARSTWOWY. * * ⚠︎ Do 11.08.2026 stało tu zdanie „Sand Gold trzyma się i na Smoked Tencie, * i na Pergaminie" — i było nieprawdziwe. Zmierzone sondą * `scripts/audyt-kontrastu.js`: **8,31:1 na Smoked Tencie, ale 1,87:1 na * Pergaminie** i 1,56:1 na Bleached Linen, przy progu 3:1 (WCAG 1.4.11 i 2.4.11). * Na karcie produktu pod progiem były WSZYSTKIE osiem rodzajów kontrolek, * na archiwum sklepu szesnaście z dwudziestu dwóch. * * Jednowarstwowy obrys nie ma na tej palecie jak zadziałać: **żaden kolor nie * przekracza 3:1 na wszystkich tłach naraz** — ciepłe padają na jasnych, ciemne * na ciemnych. Stąd dwa pierścienie o przeciwnej jasności; zawsze kontrastuje * co najmniej jeden, a najgorszy przypadek to 3,55:1 na Camel Brownie. * * Złoto zostaje dokładnie tam, gdzie działało — obwódka jest na ciemnych * sekcjach niewidoczna (Smoked Tent na Smoked Tencie to 1,00). Rozstrzygnięcie * K6, warianty i pomiary: `docs/KONTRAST.md` §6a.1. * * ⚠︎ `outline` musi zostać JEDNYM z pierścieni, a `box-shadow` może być tylko * dodatkiem: tryb wysokiego kontrastu Windows usuwa cienie, a obrysy zachowuje. * Ogniskowa oparta wyłącznie na `box-shadow` znikłaby dokładnie tym osobom, * które ten tryb włączyły, żeby widzieć lepiej. * * Bez `:focus-visible` obrys pojawiałby się też po kliknięciu myszą, czego * design nigdzie nie zakłada. */ :focus-visible { outline: 2px solid var(--color-sand-gold); outline-offset: 2px; box-shadow: var(--pierscien-ogniskowej); } /* Wymagane przez rdzeń WordPressa (formularz komentarzy, widżety, paginacja) i przez każdą ikonę bez etykiety w designie. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed; top: var(--space-md); left: var(--space-md); z-index: 100000; width: auto; height: auto; padding: var(--space-sm) var(--space-md); clip-path: none; background: var(--color-parchment); color: var(--color-dark-mahogany); font-family: var(--font-ui); } /* Ruch w tym projekcie jest ozdobny (fale wydm, dryf tła, kurtyna ładowania), więc wyłączenie go nie zabiera żadnej informacji. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─── KOMUNIKATY WOOCOMMERCE — REGUŁA STĄD ZESZŁA ─────────────────────── * * Do 11.08.2026 stało tutaj sześćdziesiąt linii tymczasowego wyglądu trzech * klas `woocommerce-*`. Był to **zastępnik z czasu, gdy komunikat nie miał * designu** — postawiony po to, żeby zdanie „Odłożone na bok. Czeka na Ciebie * pod listą." nie było na pustym koszyku niewidoczne. * * Design powstał (runda `komunikaty-r2.md`, warianty 1–5) i komunikat jest * dziś **komponentem z własnym partem**: `template-parts/komunikat.php` * + `assets/css/komunikat.css`, logika w `inc/komunikaty.php`. * * ⚠︎ Nie odtwarzaj tu niczego „na wszelki wypadek". Arkusz komponentu jest * kolejkowany globalnie, dokładnie z tego samego powodu, dla którego reguła * stała kiedyś w tym pliku: komunikat nie należy do żadnej podstrony. * Dwie reguły na te same klasy znaczyłyby wyścig specyficzności, w którym * wygrywałby ten plik — bo `base.css` kolejkuje się wcześniej. * * Zostaje niżej WYŁĄCZNIE znacznik blokowy (`wc-block-components-notice-banner`), * bo to drugi, cudzy byt, którego nasz komponent nie renderuje. */ /* ─── KOMUNIKAT W ZNACZNIKU BLOKOWYM — REGUŁA STĄD ZESZŁA ─────────────── * * `wc-block-components-notice-banner` to **drugi znacznik tego samego bytu**: * rdzeń wypisuje go w bramce blokowej, a sięgają po niego wtyczki z własnymi * zakładkami konta (pierwsza złapana — „Płatności One click" Przelewy24). * * Do 11.08.2026 stała tu jego własna receptura, napisana z reguły kontrastowej, * bo komunikat nie miał wtedy designu. Dziś ma: znacznik blokowy dostaje * **postać pasma** z `assets/css/komunikat.css`, czyli tę samą anatomię, co * komunikat własny motywu. Jedna receptura zamiast dwóch. */ /* ─── CEL DOTYKOWY OKRUSZKÓW — JEDNA REGUŁA NA CAŁĄ WITRYNĘ ────────────── * * Odnośnik w okruszkach jest `inline` w wierszu ścieżki i ma przez to * **55,7 × 20 px** (zmierzone 20.08.2026 na `/faq`). Obowiązujący próg to * **24 × 24 px** — WCAG 2.2, SC 2.5.8 „Target Size (Minimum)", poziom AA. * ⚠︎ To NIE jest 44 × 44: tamto jest SC 2.5.5, poziom AAA. SC 2.5.8 ma do tego * wyjątek dla odnośników w tekście płynnym, których wysokość wyznacza interlinia * sąsiedniego zdania — okruszek jest dokładnie taki, więc dałoby się na ten * wyjątek powołać. Decyzja właściciela z 20.08: **wolimy przejść próg wprost** * niż tłumaczyć się wyjątkiem przy audycie dostępności. * * ⚠︎ Odpowiedź zamawiała `display: inline-block` + `padding: 2px 0` i **tego * mechanizmu tu nie ma, bo pomiar go obalił w dwóch punktach naraz.** Oba * zmierzone 20.08 przed wdrożeniem, na żywej witrynie: * · wypełnienie inline-blocka leży POZA polem wiersza, więc `/faq` rosło * z 21 na 25 px, a `h1.top` z 266 na 270 — czyli zmiana wyglądu na siedmiu * podstronach, dokładnie to, czego odpowiedź zabraniała; * · 2 px nie dobija do progu tam, gdzie wiersz ma 13 px, a nie 14: `/sklep` * i `/koszyk` kończyły na **23,5 px**, czyli pół piksela pod progiem AA. * * Zostaje więc domowy wzorzec projektu — nakładka na pseudoelemencie, * ta sama, którą `PORT.md` §2d opisuje i którą mają już u siebie okruszki * koszyka (`cart.css`) i karty produktu (`single-product.css`). Nakładka jest * `position: absolute`, więc **z definicji nie zajmuje miejsca w układzie** * i pytanie „czy wiersz urósł" przestaje istnieć. Zmierzone po wdrożeniu na * **dziesięciu powierzchniach z okruszkami × dwóch szerokościach** (1440 * i 390 px): cel od 25 do 50 px, a wysokość nawigacji i pozycja następnego * elementu **co do dziesiątej części piksela bez zmian** na każdej z dwudziestu * kombinacji. Jedyny wyjątek to `/kontakt` przy 390 px, gdzie okruszków nie * ma w ogóle (`showBreadcrumb: !mobile`, `kontakt-hero.css`) — nie ma więc celu * do powiększania. * * ⚠︎ Reguła używa WYŁĄCZNIE właściwości z rodziny `inset` i ani jednej * z rodziny `height`. To nie jest gust: `cart.css` i `single-product.css` * mają na tym samym pseudoelemencie własne `inset-block` (−15 px i −13 px, * czyli cele 49 i 45 px). Gdyby stało tu `top` + `height`, zderzenie dałoby * pudełko **przeliczone nad odnośnikiem** — przy `top`, `bottom` i `height` * naraz przeglądarka ignoruje `bottom`. Przy samych `inset` nadpisanie jest * czyste: lokalna wartość po prostu wygrywa. * `min-height` jest podłogą na wypadek wiersza mniejszego niż dzisiejsze 19 px. * * ⚠︎ `:where()` nie jest ozdobnikiem składniowym — **zeruje specyficzność** * i to jest jedyny powód, dla którego tu stoi. Bez niego selektor ma dokładnie * tyle samo, co obie kopie lokalne (atrybut liczy się jak klasa), a remis * rozstrzyga kolejność wczytania — zmierzone 20.08: wygrywał ten plik * i **ścinał** cel koszyka z 49 na 25 px, a karty produktu z 45 na 24,8. * Oba wyniki nadal przechodzą AA, więc usterki nie było widać; nieprawdziwe * robiły się za to komentarze w tamtych arkuszach. Z `:where()` reguła jest * tym, czym ma być: **podłogą dla powierzchni bez własnej nakładki**, nie * sufitem dla tych, które ją mają. * * Selektor jest atrybutowy, a nie listą dziesięciu klas, bo **wspólnego * helpera okruszków jeszcze nie ma** (`D45` otwarte od fali 0) i każdy part * pisze własny `