/* ============================================================================= foreto — warstwa bazowa Tu trafia WYŁĄCZNIE to, czego theme.json nie umie wyrazić: zachowania (dziedziczenie koloru, :focus-visible), zapytania medialne o preferencje użytkownika i przełącznik ciemnego motywu. Ani jednej wartości liczbowej ani szesnastkowej — wszystkie stoją w theme.json i przychodzą tu przez var(--wp--*). Jeśli musisz tu wpisać liczbę, brakuje tokenu. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Przewijanie kotwic płynne. Serwis ma odsyłacze do sekcji w obrębie strony — przyciski prowadzące do formularza, kotwice w „O nas", powrót na górę — a skok natychmiastowy nie mówi, w którą stronę strona się przesunęła. Bez osobnego zabezpieczenia, bo ono już jest: blok @media (prefers-reduced-motion: reduce) niżej gasi scroll-behavior do auto z !important. Kto ma wyłączony ruch w systemie, dostaje skok. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* ODSTĘP NAD KAŻDYM CELEM PRZEWIJANIA, nie tylko nad kotwicą. scroll-padding siedzi na KONTENERZE przewijania, więc obejmuje kotwice, scrollIntoView i — czego scroll-margin nie łapie — przewinięcia wywołane FOKUSEM. PRZY FOKUSIE DZIAŁA WARUNKOWO i warto wiedzieć kiedy, bo to nie jest oczywiste. Zmierzone na torze karuzeli klientów (obszar przewijalny, więc z tabindex="0" dla klawiatury): gdy element wystaje ponad krawędź o 20 px, przeglądarka dosuwa go do góry i zatrzymuje dokładnie na 48 px, czyli odstęp obowiązuje. Gdy wystaje o 60 px lub więcej — CENTRUJE go w oknie (krawędź ląduje na 388 px) i odstęp przestaje mieć znaczenie, bo element i tak trafia na środek ekranu. Czyli: reguła pracuje dokładnie w tym przypadku, w którym będzie potrzebna przy przyklejonym pasku — gdy cel siedzi tuż pod nim. JEDNO ŹRÓDŁO, NIE DWA. Wcześniej odstęp niósł scroll-margin-top wypisany na celach kotwic. Obie własności DODAJĄ SIĘ — zmierzone: sekcja lądowała 96 px od krawędzi zamiast 48 — więc tamta reguła została zdjęta. Pojedyncza sekcja może nadal poprosić o WIĘCEJ, dopisując sobie scroll-margin-top; dodawanie jest wtedy zamierzone, a nie przypadkowe. */ scroll-padding-top: var(--foreto-scroll-offset, var(--foreto-space-7)); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Element zastępczy zajmuje wiersz jak tekst i zostawia szczelinę pod spodem. */ img, svg, video, canvas, iframe { display: block; max-width: 100%; } /* Odsyłacz bierze kolor z kontekstu — inaczej na czerwonym paśmie byłby czarny. Kolor najechania niesie theme.json (elements.link:hover). */ a:where(:not(.wp-element-button)) { color: inherit; } /* ODSYŁACZ W TREŚCI MUSI BYĆ WIDOCZNY. Reguła wyżej zdejmuje mu kolor, żeby brał go z kontekstu — i to jest słuszne dla odsyłaczy, które są kartą, przyciskiem albo pozycją menu, bo tam nośnikiem jest cały element. Dla odsyłacza W ZDANIU nie zostaje wtedy nic: ani koloru, ani podkreślenia, więc od reszty akapitu nie różni się niczym aż do najechania. To złamanie 1.4.1 — informacja niesiona wyłącznie zmianą, której nie ma. LISTA JEST DODATNIA, nie odjemna — i to jest poprawka po pomiarze. Pierwsza wersja brzmiała „każdy `a` bez klasy w `p`, `li` albo `dd"` i złapała okruszki, menu prawne w stopce i znaczniki realizacji: wszystkie mają tam goły odsyłacz w gołym `li`. Wyliczenie kontekstów PROZY zamiast wyliczania wyjątków nie ma jak złapać niczego, czego nie wymieniono. `:not([class])` dodatkowo zdejmuje przyciski i karty, które w prozie też się zdarzają. Podkreślenie z odstępem, bo sam kolor to jeden nośnik. */ :where( .wp-block-paragraph, .wp-block-list, .foreto-prose, .of-proces, .of-list, .kr-panel__list, .foreto-case-meta ) a:not([class]) { color: var(--wp--custom--text--accent); text-decoration: underline; text-underline-offset: 3px; } :where( .wp-block-paragraph, .wp-block-list, .foreto-prose, .of-proces, .of-list, .kr-panel__list, .foreto-case-meta ) a:not([class]):hover, :where( .wp-block-paragraph, .wp-block-list, .foreto-prose, .of-proces, .of-list, .kr-panel__list, .foreto-case-meta ) a:not([class]):focus-visible { color: var(--wp--custom--text--primary); } /* Na czerwonym i czarnym paśmie czerwony odsyłacz znika — tam nośnikiem zostaje samo podkreślenie, a kolor wraca do dziedziczonego. */ :where([data-tone="accent"], [data-tone="ink"]) :where( .wp-block-paragraph, .wp-block-list, .foreto-prose, .of-proces, .of-list, .kr-panel__list, .foreto-case-meta ) a:not([class]) { color: inherit; } /* :focus-visible, nie :focus — pierścień po kliknięciu myszą czyta się jak usterka. Grubość i odstęp z pomiaru systemu. */ :focus-visible { outline: 2px solid var(--wp--custom--state--focus); outline-offset: 2px; } /* Na czerwonym tle czerwony pierścień znika. */ .has-red-background-color :focus-visible, .has-red-text-background-color :focus-visible, [data-tone="accent"] :focus-visible { outline-color: var(--wp--custom--state--focus-on-accent); } /* Preferencja użytkownika wygrywa z każdą regułą lokalną — stąd !important. */ @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; } } /* ============================================================================= Ciemny motyw Przełącznik: [data-theme="dark"] na albo na dowolnym kontenerze — zmienne dziedziczą, więc da się mieć ciemne pasmo na jasnej stronie. Przemapowana jest WYŁĄCZNIE warstwa semantyczna. Skala surowa (--wp--preset--color--*) zostaje nietknięta: blok, któremu redaktor jawnie ustawił „Czerń", ma zostać czarny. Akcenty zostają czerwone, czerń i biel zamieniają się miejscami. ========================================================================== */ html[data-theme="dark"], [data-theme="dark"] { --wp--custom--surface--page: var(--wp--custom--dark--page); --wp--custom--surface--card: var(--wp--custom--dark--page); --wp--custom--surface--band: var(--wp--custom--dark--band); --wp--custom--surface--success: var(--wp--custom--dark--green); --wp--custom--text--primary: var(--wp--custom--dark--ink); --wp--custom--text--accent: var(--wp--custom--dark--accent-text); --wp--custom--text--muted: var(--wp--custom--dark--muted); --wp--custom--text--muted-page: var(--wp--custom--dark--muted); --wp--custom--text--success: var(--wp--custom--dark--green); --wp--custom--text--on-success: var(--wp--custom--dark--page); --wp--custom--border--hairline: var(--wp--custom--dark--hairline); --wp--custom--border--hairline-page: var(--wp--custom--dark--hairline); --wp--custom--border--control: var(--wp--custom--dark--control); --wp--custom--border--strong: var(--wp--custom--dark--ink); --wp--custom--border--elevation: var(--wp--custom--dark--hairline); --wp--custom--state--ink-hover: var(--wp--custom--dark--ink-hover); --wp--custom--state--focus: var(--wp--custom--dark--ink); --wp--custom--state--scrim: var(--wp--custom--dark--scrim); /* Cień rgb(0 0 0 / .08) na czerni jest niewidzialny — wyniesienie przejmuje ramka z --wp--custom--border--elevation. */ --wp--preset--shadow--card: none; } /* Tło i kolor tekstu strony biorą się ze stylów globalnych, które WordPress przypina do :root — a te czytają zmienne semantyczne, więc reguła wyżej wystarcza. Wyjątek: nie dostaje tła od WordPressa, a przy krótkiej stronie widać spod biel przeglądarki. */ html[data-theme="dark"] { background: var(--wp--custom--surface--page); }