/* Zgody na ciasteczka — pas i nakładka wtyczki WPConsent w wyglądzie motywu. * * Źródła transkrypcji, oba zatwierdzone: * · pas → `src/app/components/CookieBannerVariant1.tsx` (repo designu), * wołany z `canvas:Zamowienie Mobile Finalny` jako `.cookiebox`, * · nakładka → `canvas:Nakladka Zgod Ciasteczek` + `Nakladka Zgod Klatki`. * * ⚠︎ TEN ARKUSZ STYLUJE CUDZY ZNACZNIK ZAMKNIĘTY W SHADOW DOM. To jest wyjątek * od reguły „jeden plik CSS na template part": partu tu nie ma i nie będzie, * bo znacznik generuje wtyczka (D70). Plik ginie razem z wtyczką, nie z partem. * * ── DLACZEGO TO DZIAŁA BEZ JEDNEJ LINII JAVASCRIPTU ────────────────────── * * Rozpoznanie W47 i D70 zakładały, że przy WPConsent „wygląd zaczyna zależeć * od JS-u", bo baner siedzi w shadow roocie, a wtyczka nie ma pola „własny CSS". * ⚠︎ **Zmierzone 07.08.2026 na żywej stronie: to założenie jest FAŁSZYWE.** * Do wnętrza shadow DOM prowadzą dwie drogi i obie są czystym CSS-em: * * 1. WŁASNOŚCI NIESTANDARDOWE DZIEDZICZĄ PRZEZ GRANICĘ SHADOW DOM. * Wtyczka wypisuje jedenaście zmiennych `--wpconsent-*` w atrybucie * `style` na `#wpconsent-root` (`class-wpconsent-banner.php:114`), a jej * wewnętrzny arkusz czyta je przez `var()`. Ustawione niżej na * `#wpconsent-container` — czyli na HOŚCIE shadow roota, o jeden poziom * niżej — nadpisują wartości odziedziczone dla całego poddrzewa. * ⚠︎ Dlatego na `#wpconsent-container`, a nie na `#wpconsent-root`: tam * wartości stoją w atrybucie `style`, którego nie przebije żaden selektor * bez `!important`. Host nie ma na sobie żadnej z tych zmiennych, więc * wygrywamy zwykłą kaskadą. * * 2. `::part()` SIĘGA Z ZEWNĄTRZ. Wtyczka wystawia dwadzieścia siedem * atrybutów `part` i jawnie przepuszcza je przez `wp_kses` * (`class-wpconsent-banner.php:99–107`). * * Zysk jest większy niż wygoda: **nie ma wstrzykiwania arkusza skryptem, więc * nie ma mrugnięcia przy ładowaniu**, a reguła „CSS jest źródłem prawdy * o wyglądzie" zostaje w mocy. Cena zapisana w D70 nie jest płacona. * * ── CZEGO `::part()` NIE DOSIĘGA, I TO JEST GRANICA TWARDA ─────────────── * * `::part()` wskazuje SAM element z atrybutem `part` — nie jego potomków. * Nie da się napisać `::part(x) > p`. Elementy bez `part` są więc poza * zasięgiem i pozostają nimi: * * · `.wpconsent-banner-message` — pojemnik na kopię pasa. Dosięgamy go * WYŁĄCZNIE własnościami dziedziczonymi (`color`, `font-*`, `line-height`) * ustawionymi na rodzicu `::part(wpconsent-banner-body)`. * ⚠︎ **Konsekwencja: obie linie kopii mają ten sam rozmiar**, a canvas * rysuje 14 px i 12 px z kryciem 65 %. Odstępstwo jest świadome i opisane * w `docs/CMP.md` §6 razem z drogą wyjścia (filtr * `wpconsent_after_banner_message` + własny `part`). * · odnośnik do polityki prywatności wewnątrz kopii — `color` nie dziedziczy * się na ``, bo bije go arkusz przeglądarki. Kolor odnośnika ustawia * dziś sama wtyczka z `--wpconsent-text`. * · `.wpconsent-powered-by` — plakietka „Powered by WPConsent". Bez `part`, * więc **zdejmuje ją USTAWIENIE, nie CSS**: `hide_powered_by`, * `scripts/zgody-ustawienia.php`. * * ── ⚠︎ GRANICA PRZESUNIĘTA 10.08.2026 — WTYCZKA MA JEDENAŚCIE `part` WIĘCEJ ── * * Powyższy akapit obowiązuje dalej dla PASA. Dla **nakładki** przestał: * atrybuty `part` zostały dopisane do `class-wpconsent-banner.php`, bo bez nich * zatwierdzonego projektu nie dawało się odtworzyć w żadnej ilości CSS-u. * Repozytorium śledzi wtyczki, więc diff po jej aktualizacji pokaże, co przepadło; * każda zmiana nosi w kodzie wtyczki komentarz `// SZEWKO:` z powodem. * * `wpconsent-preferences-body` pojemnik przewijany — wypełnienie boczne * `wpconsent-category-text` lewa kolumna rzędu (nazwa + opis) * `wpconsent-category-name` nazwa kategorii — inaczej zostaje na 15 px * `wpconsent-service-name` nazwa usługi zagnieżdżonej * `wpconsent-category-description` opis, wyjęty ze zwiniętego akordeonu * `wpconsent-checkbox-column` prawa kolumna rzędu * `wpconsent-accordion-arrow` strzałka — miała kontrast 1:1, patrz §3a * `wpconsent-checkbox-slider` pigułka przełącznika * `wpconsent-cookie-name` nazwa ciasteczka w wykazie * `wpconsent-cookie-desc` kolumna „Po co" * `wpconsent-cookie-duration` kolumna „Jak długo" — patrz `data-etykieta` * * Trzy ostatnie niosą przy sobie **`data-etykieta` z napisem nagłówka kolumny**, * bo poniżej 600 px wiersz nagłówkowy znika, a wartość „do wylogowania" bez * etykiety stoi w powietrzu. Napis jedzie atrybutem, nie `content` w tym pliku: * nagłówki kolumn są ustawieniem wtyczki i zaszyte tutaj rozjechałyby się * z widokiem desktopowym po pierwszej zmianie w panelu. * * Do arkusza wtyczki weszły ponadto **trzy literały zamienione na zmienne**, * każda z tą samą wartością domyślną — `--wpconsent-toggle-off-bg` (§3e) oraz * `--wpconsent-intro-font-size` i `--wpconsent-intro-line-height` (§3b). * Bez ustawionej zmiennej wtyczka wygląda dokładnie tak jak przed zmianą. * * ⚠︎ Ósma zmiana nie dodaje `part`, tylko **zdejmuje klasę** * `wpconsent-preferences-checkbox-toggle-disabled`. Powód jest kaskadowy i nie * ma na niego obejścia z zewnątrz: ta klasa maluje suwak `#ccc !important` * z arkusza WEWNĄTRZ shadow DOM, a przy deklaracjach `!important` kolejność * drzew się **odwraca** — wygrywa drzewo wewnętrzne, więc nasze `!important` * też by przegrało. Kategoria NIEZBĘDNE świeciła przez to szarością na 50 % * krycia, czyli wyglądała na wyłączoną, będąc włączoną na stałe. * * Czego mimo to nadal nie dosięgamy w nakładce — jedna rzecz: * * · **krycie 80 % na kopii wstępu.** Ten sam akapit od `wpautop()` bez `part`; * rozmiar i interlinię udało się wyprowadzić zmiennymi, ale `opacity` * zostało literałem, bo na Pergaminie daje kontrast ~7:1 i nie było czego * ratować. Gdyby kiedyś przeszkadzało — czwarta zmienna w tym samym miejscu. * * ── DLACZEGO KOLORÓW NIE MA W USTAWIENIACH WTYCZKI ────────────────────── * * Wtyczka ma w panelu komplet pól kolorystycznych i kusi, żeby wpisać w nie * nasze heksy. Nie robimy tego: kolory zapisane w bazie są **poza * repozytorium i poza `tokens.css`**, więc pierwsza zmiana palety rozjechałaby * baner po cichu, a odtworzenie z czystej bazy dałoby granat WPConsent. * `scripts/zgody-ustawienia.php` przestawia wyłącznie to, czego CSS nie umie. */ /* ========================================================================= * 1. PODSTAWIENIE PALETY — jedenaście zmiennych wtyczki na tokeny motywu * ====================================================================== */ #wpconsent-container { /* Pas: Dark Mahogany z kreską Sand Gold 30 % (`CookieBannerVariant1.tsx:57`). */ --wpconsent-background: var(--color-dark-mahogany); --wpconsent-text: var(--color-parchment); --wpconsent-outline-color: color-mix(in srgb, var(--color-sand-gold) 30%, transparent); /* „Akceptuję" jest jedynym przyciskiem wypełnionym — i świadomie NIE nosi * `gradient-sunrise-glow`. Gradient jest zarezerwowany dla CTA sprzedażowych; * użyty tutaj robił ze zgody na ciasteczka najmocniejszy wizualnie element * pierwszego wejścia na stronę (błąd 26 przeglądu 22.07). */ --wpconsent-accept-bg: var(--color-parchment); --wpconsent-accept-color: var(--color-dark-mahogany); /* „Odrzucam" i „Ustawienia" są obrysowane, nie wypełnione — obrys robi * `::part()` niżej, bo wtyczka nie ma zmiennej na kolor ramki. */ --wpconsent-cancel-bg: transparent; --wpconsent-cancel-color: var(--color-sand-gold); --wpconsent-preferences-bg: transparent; --wpconsent-preferences-color: var(--color-sand-gold); --wpconsent-font-size: 14px; /* ⚠︎ PIERŚCIEŃ FOKUSU BYŁ NIEBIESKI. `frontend.css` wtyczki ustawia na * `:host` wartość `#007cba` — kolor administracyjny WordPressa, obcy palecie * i widoczny przy każdej nawigacji klawiaturą po pasie. Canvas nakładki * rysuje obrys `2px solid` w Desert Rust i to jest jedyna wartość, jaką ten * projekt zna. * * Zmienna nie jest wymieniona wśród jedenastu wypisywanych na * `#wpconsent-root` — mieszka wyłącznie w arkuszu wewnętrznym. Sięgamy do * niej tą samą drogą: `:host` ma specyficzność pseudoklasy, a deklaracja * z drzewa zewnętrznego i tak bije deklarację z wnętrza shadow DOM. */ --wpconsent-focus-outline-color: var(--color-desert-rust); } /* ========================================================================= * 2. PAS ZGÓD * ====================================================================== */ #wpconsent-container::part(wpconsent-banner) { border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent); /* ⚠︎ PAS JEST PEŁNOEKRANOWY, A JEGO TREŚĆ — NIE. Canvas trzyma treść * w kolumnie 1440 px z odstępem 80 px (`max-w-[1440px] mx-auto lg:px-20`), * czyli kolumna tekstu ma 1280 px, ale WYPEŁNIENIE biegnie od krawędzi * do krawędzi okna. * * Pierwsza wersja robiła to przez `max-width: 1440px; margin: 0 auto` — i to * jest BŁĄD, zmierzony na 1920 px: `.wpconsent-banner-holder` jest * przezroczysty, więc zwężenie samego pasa zostawiło Dark Mahogany tylko na * środkowych 1440 px, a po bokach świeciła strona. Holder **nie ma atrybutu * `part`**, więc tła nie da się przenieść na niego — jedyną drogą jest * zostawić pas pełnej szerokości i zbudować kolumnę SAMYM wypełnieniem. * * `max()` wybiera większy z dwóch odstępów: odstęp z canvasu (24 → 80 px) * albo tyle, ile trzeba, żeby treść nie przekroczyła 1280 px. Zmierzone: * 390 px → 24, 1000 px → 50, 1440 px → 80, 1920 px → 320. */ padding-block: 16px; padding-inline: max(clamp(24px, 5vw, 80px), calc((100% - 1280px) / 2)); } #wpconsent-container::part(wpconsent-banner-body) { font-family: var(--font-body); font-size: 14px; line-height: 1.375; color: var(--color-parchment); /* Wtyczka centruje kopię pasa; canvas wyrównuje ją do lewej i stawia obok * przycisków dosuniętych do prawej. Reguła z zewnątrz wygrywa z arkuszem * wtyczki, bo w kaskadzie shadow DOM deklaracje z drzewa ZEWNĘTRZNEGO biją * deklaracje z wnętrza — i to jest ta sama zasada, dzięki której działa * cały ten plik. */ text-align: left; /* Kopia nie rozciąga się na całą szerokość pasa: canvas trzyma ją w kolumnie * i zostawia oddech przed rzędem przycisków. */ max-width: 640px; /* Poniżej progu wtyczka układa pas w kolumnę (`frontend.css`, * `max-width: 767px`) — i canvas mobilny robi to samo, tyle że ze * WYŚRODKOWANĄ kopią. Wyrównanie do lewej obowiązuje więc wyłącznie tam, * gdzie przyciski stoją OBOK tekstu, a nie pod nim. * ⚠︎ Próg jest cudzy: to wartość z arkusza wtyczki, nie z naszych tokenów. * Przy jej zmianie w aktualizacji trzeba poprawić i tutaj — dlatego stoi * w komentarzu, a nie tylko w regule. */ @media (max-width: 767px) { text-align: center; max-width: none; } } /* Rząd przycisków — canvas daje 12 px między nimi i dosuwa je do prawej. */ #wpconsent-container::part(wpconsent-banner-footer) { gap: 12px; flex-shrink: 0; } /* Trzy przyciski pasa. `min-height: 44px` jest wymogiem, nie ozdobą: pas jest * pierwszą rzeczą, jakiej użytkownik dotyka na stronie, a miał 36 px * (przegląd 22.07, błąd 27). */ #wpconsent-container::part(wpconsent-button-accept), #wpconsent-container::part(wpconsent-button-cancel), #wpconsent-container::part(wpconsent-button-preferences) { min-height: 44px; padding: 10px 24px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: background-color var(--duration-fast) var(--ease-desert), color var(--duration-fast) var(--ease-desert); @media (prefers-reduced-motion: reduce) { transition: none; } } #wpconsent-container::part(wpconsent-button-cancel), #wpconsent-container::part(wpconsent-button-preferences) { border: 1px solid var(--color-sand-gold); } #wpconsent-container::part(wpconsent-button-cancel):hover, #wpconsent-container::part(wpconsent-button-preferences):hover { background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); } #wpconsent-container::part(wpconsent-button-accept) { border: 1px solid var(--color-parchment); } #wpconsent-container::part(wpconsent-button-accept):hover { background: var(--color-sand-gold); border-color: var(--color-sand-gold); } /* ========================================================================= * 3. NAKŁADKA ZGÓD — `canvas:Nakladka Zgod Ciasteczek` * ====================================================================== */ /* ⚠︎ DWA ELEMENTY O MYLĄCYCH NAZWACH — pomyłka kosztowała jeden przebieg. * `wpconsent-preferences-modal` NIE JEST kartą, tylko **przyciemnieniem tła**: * `position: fixed`, na całe okno. Kartą jest `wpconsent-preferences-content`. * Zestylowane odwrotnie dają nakładkę w kolorze pergaminu, przyklejoną do * lewej krawędzi okna i szeroką na 720 px — zmierzone, nie zgadnięte. */ /* Przyciemnienie: canvas daje Smoked Tent 70 % na całe okno i trzyma kartę * w ramce 40 × 24 px, żeby na wąskim ekranie nie dotykała krawędzi. */ #wpconsent-container::part(wpconsent-preferences-modal) { background: color-mix(in srgb, var(--color-smoked-tent) 70%, transparent); box-sizing: border-box; padding: 40px 24px; @media (max-width: 600px) { padding: 20px 16px; } } /* ⚠︎ TU MIESZKA PRZYCZYNA „OBCIĘTEGO TEKSTU" — `padding: 0` niżej. * * Wtyczka trzyma na karcie własne `padding-inline: 26px`, a rzędy kategorii * wychodzą poza nie **ujemnym marginesem**: `.wpconsent-cookie-category` ma * `margin: 0 -26px; padding: 0 26px`, czyli kreski rozdzielające sięgają * krawędzi karty, a treść zostaje w kolumnie. Zerując wypełnienie karty (żeby * nagłówek i stopka miały własne, z canvasu) zostawiliśmy **sam minus**. * * Zmierzone 10.08 przed naprawą, 1920 px: karta `x=591,5`, rząd `x=566,5` * i szerszy o 52 px; pasmo przewijane `scrollWidth 735` przy `clientWidth 705`. * Lewa strona ginęła pod `overflow: hidden` karty, prawa chowała przełączniki * pod paskiem przewijania. Naprawa jest dwuczęściowa i **obie części są * konieczne**: wypełnienie wraca na `::part(wpconsent-preferences-body)` (§3c), * a ujemny margines rzędu jest tam zerowany. * * Wysokość karty jest z canvasu — `min(740px, 88vh)`, nie `max-height`. * Stała wysokość znaczy, że pasmo przewija się **zawsze**, więc rząd ucięty * w połowie u dołu jest zaproszeniem do przewijania, a nie usterką. */ #wpconsent-container::part(wpconsent-preferences-content) { background: var(--color-parchment); border: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent); border-radius: 4px; box-shadow: 0 32px 90px color-mix(in srgb, var(--color-smoked-tent) 55%, transparent); width: 720px; max-width: 100%; height: min(740px, 88vh); max-height: 100%; color: var(--color-smoked-tent); padding: 0; /* ⚠︎ DRUGIE PODSTAWIENIE PALETY, I TO NIE JEST POWTÓRZENIE §1. * * WPConsent ma **jedną** parę `--wpconsent-background` / `--wpconsent-text` * na dwie powierzchnie: ciemny pas i tę kartę. W §1 podstawiliśmy pod tekst * Pergamin — poprawnie dla pasa w Dark Mahogany, zabójczo tutaj. Zmierzone: * strzałka akordeonu renderowała się `rgb(245,233,211)` na karcie * `rgb(245,233,211)`, czyli **kontrast 1:1** — jedyne wejście w szczegóły * ciasteczek było niewidoczne. * * Zmienne niestandardowe dziedziczą w dół, więc ustawione na karcie obowiązują * całe jej wnętrze i **nie ruszają pasa**, który jest osobnym poddrzewem. * * `--wpconsent-accept-bg` wygląda tu na pomyłkę, a nie jest: wtyczka maluje * nim **włączony suwak** (`input:checked + …-slider`), nie tylko przycisk. * Kolor przycisków stopki nadpisujemy niżej wprost, więc Oasis Green trafia * wyłącznie tam, gdzie canvas go rysuje. */ --wpconsent-text: var(--color-smoked-tent); --wpconsent-outline-color: color-mix(in srgb, var(--color-camel-brown) 15%, transparent); --wpconsent-accept-bg: var(--color-oasis-green); /* Zmienna dopisana do wtyczki — wyłączony przełącznik. Pełny rachunek przy * regule bieżni niżej; w skrócie: stanu włączonego nie da się złapać * z zewnątrz, więc stan wyłączony musi przyjść od środka. */ --wpconsent-toggle-off-bg: color-mix(in srgb, var(--color-camel-brown) 16%, transparent); /* Wstęp nakładki. Dwie zmienne dopisane do wtyczki z tego samego powodu: * `wpautop()` robi ten akapit bez `part`, więc rozmiaru nie da się w niego * wpisać z zewnątrz, a wtyczka trzymała go na 14 px z interlinią 2em. * Zgłoszenie właściciela z 10.08 („osoby ze słabym wzrokiem mogą mieć * problem") dotyczy najpierw tego zdania — to ono niesie decyzję. */ --wpconsent-intro-font-size: 16px; --wpconsent-intro-line-height: 1.6; /* Pasek przewijania pasma — canvas daje 10 px, kciuk Camel Brown 35 %, * bieżnię 8 %. Obie własności DZIEDZICZĄ, więc ustawione na karcie schodzą * do pasma w środku bez potrzeby sięgania po `::-webkit-scrollbar`. */ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-camel-brown) 35%, transparent) color-mix(in srgb, var(--color-camel-brown) 8%, transparent); } #wpconsent-container::part(wpconsent-preferences-header) { background: var(--color-parchment); padding: 30px 32px 18px; @media (max-width: 600px) { padding: 22px 20px 14px; } } #wpconsent-container::part(wpconsent-preferences-title) { /* T8 (12.08.2026) — Cinzel → Literata. Krój ozdobny poniżej 26 px zamienia wypustki liter w szum; pełny powód przy `.szewko-home-kafel__nazwa` w `home-kafel-kategorii.css`. */ font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-smoked-tent); } /* ⚠︎ TYTUŁ DOSTAJE FOKUS PRZY OTWARCIU — to nie jest usterka, tylko sposób, * w jaki wtyczka ogłasza okno czytnikom ekranu (`tabindex="0"` na `

` * plus `focus()`). Pierścienia **nie zdejmujemy**: nagłówek jest przez ten * `tabindex` osiągalny tabulatorem, więc bez obrysu klawiatura gubi miejsce. * Dosunięty do liter czytał się jednak jak rdzawa ramka wokół napisu (zrzut * właściciela z 10.08) — odsunięcie o 4 px robi z niego pierścień fokusu. */ #wpconsent-container::part(wpconsent-preferences-title):focus-visible { outline: 2px solid var(--color-desert-rust); outline-offset: 4px; border-radius: 2px; } /* ⚠︎ Rozmiar i interlinia NIE JADĄ STĄD, tylko ze zmiennych `--wpconsent-intro-*` * podstawionych na karcie w §3a. Kopia siedzi w `

` od `wpautop()`, na którym * wtyczka ustawia je wprost, a deklaracja bezpośrednia bije wartość * odziedziczoną z `::part()`. Wartości niżej zostają jako opis zamiaru i jako * to, co obowiązuje sam pojemnik. */ #wpconsent-container::part(wpconsent-preferences-description) { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent); max-width: 580px; } /* ========================================================================= * 3c. PASMO PRZEWIJANE — druga połowa naprawy z §3a * ====================================================================== */ /* `part` dopisany do wtyczki (patrz nagłówek). Wypełnienie musi siedzieć TUTAJ, * a nie na karcie: pasek przewijania ma stać przy krawędzi karty, a nie 32 px * w głębi, więc pojemnik przewijany biegnie pełną szerokością i sam odsuwa treść. */ #wpconsent-container::part(wpconsent-preferences-body) { padding-inline: 32px; @media (max-width: 600px) { padding-inline: 20px; } } #wpconsent-container::part(wpconsent-preferences-close) { width: 44px; height: 44px; color: color-mix(in srgb, var(--color-camel-brown) 95%, transparent); border-radius: 2px; } #wpconsent-container::part(wpconsent-preferences-close):hover { background: color-mix(in srgb, var(--color-camel-brown) 10%, transparent); color: var(--color-desert-rust); } /* Kategorie. Canvas rozdziela je kreską Camel Brown 15 % NAD każdą pozycją * i daje 20 px oddechu w pionie. * * ⚠︎ `margin-inline: 0` jest drugą połową naprawy z §3a — zdejmuje ujemny * margines wtyczki. `border-bottom: none` zdejmuje jej kreskę DOLNĄ: canvas * rysuje jedną kreskę na styk, a nie dwie o pół piksela od siebie. */ #wpconsent-container::part(wpconsent-accordion-item) { border-top: 1px solid color-mix(in srgb, var(--color-camel-brown) 15%, transparent); border-bottom: none; margin-inline: 0; padding: 0; background: transparent; } /* Rząd: nazwa z opisem po lewej, przełącznik po prawej, wyrównane do GÓRY — * canvas daje `align-items: flex-start`, bo opis bywa trzywierszowy i wyśrodkowany * przełącznik odjeżdżałby wtedy na środek akapitu. */ #wpconsent-container::part(wpconsent-accordion-header) { align-items: flex-start; gap: 20px; padding-block: 20px; background: transparent; } /* ⚠︎ Lewa kolumna jest SIATKĄ, i to nie jest ozdoba. Wtyczka stawia strzałkę * jako osobny przycisk PRZED nazwą, więc nazwa zaczyna się 44 px w prawo, * a przeniesiony spod akordeonu opis — przy krawędzi kolumny. Bez siatki oba * wiersze stoją w innych miejscach i rząd wygląda na złamany. Kolumna strzałki * ma stałe 44 px, opis dostaje `grid-column: 2`, czyli równa się do nazwy. */ #wpconsent-container::part(wpconsent-category-text) { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 4px; padding-right: 0; } #wpconsent-container::part(wpconsent-category-name), #wpconsent-container::part(wpconsent-service-name) { font-family: var(--font-heading); font-size: 19px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; color: var(--color-smoked-tent); margin: 0; cursor: pointer; } /* Usługa zagnieżdżona jest młodszym bytem niż kategoria i canvas daje jej * mniejszy stopień — inaczej „Cloudflare Turnstile" krzyczy tak samo jak * „NIEZBĘDNE", pod którym stoi. */ #wpconsent-container::part(wpconsent-service-name) { font-size: 16px; text-transform: none; } /* Opis — wyjęty ze zwiniętego akordeonu zmianą we wtyczce. To on robi z rzędu * treść zamiast pustego pudełka po 132 px. */ #wpconsent-container::part(wpconsent-category-description) { grid-column: 2; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--color-camel-brown) 95%, transparent); margin: 6px 0 0; /* Na wąskim ekranie opis schodzi pod kolumnę strzałki. Zmierzone przy 390 px: * wcięcie 48 px zabierało akapitowi jedną czwartą szerokości (202 px zamiast * 250), czyli po trzy słowa w wierszu. Wyrównanie do nazwy jest warte tych * pikseli na desktopie i nie jest ich warte tutaj. */ @media (max-width: 600px) { grid-column: 1 / -1; } } /* Strzałka rozwijająca. Wtyczka daje jej `border-color: var(--wpconsent-text)`, * czyli po podstawieniu z §3a — Smoked Tent zamiast Pergaminu. Kolor odnośnika * sekcji dokładamy tutaj, żeby czytało się jako „to się klika". */ #wpconsent-container::part(wpconsent-accordion-toggle) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 2px; color: var(--color-desert-rust); background: transparent; transition: background-color var(--duration-fast) var(--ease-desert); @media (prefers-reduced-motion: reduce) { transition: none; } } #wpconsent-container::part(wpconsent-accordion-toggle):hover { background: color-mix(in srgb, var(--color-camel-brown) 10%, transparent); } /* ⚠︎ Osobna reguła, nie `::part(toggle):hover ::part(arrow)` — **`::part()` nie * łączy się w łańcuch i nie ma po nim potomka**. Stan najechania na strzałkę * robi więc tło przycisku wyżej, a nie zmiana koloru samej kreski. */ #wpconsent-container::part(wpconsent-accordion-arrow) { border-color: var(--color-desert-rust); } /* Prawa kolumna — canvas wyrównuje przełącznik do prawej i podnosi o 2 px, * żeby jego oś optyczna trafiła w wersaliki nazwy. */ #wpconsent-container::part(wpconsent-checkbox-column) { flex: 0 0 auto; display: flex; justify-content: flex-end; padding-top: 9px; } /* Rozwinięta zawartość rzędu — wykaz ciasteczek i usługi zagnieżdżone. * * Wcięcie 48 px to szerokość kolumny strzałki (44) plus przerwa siatki (4) * z `::part(wpconsent-category-text)`. Bez niego wykaz zaczyna się przy krawędzi * rzędu, a opis nad nim — 48 px dalej, i rząd rozpada się na dwa bloki * wyrównane do różnych osi. Liczba jest przepisana z tamtej siatki i **musi się * z nią zmieniać razem**. */ #wpconsent-container::part(wpconsent-accordion-content) { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--color-camel-brown) 95%, transparent); padding-left: 48px; @media (max-width: 600px) { padding-left: 0; } } /* Wykaz pojedynczych ciasteczek. Krój UI; **14 px, nie 13** — wykaz jest * najgęstszym tekstem nakładki i to on pierwszy przestaje się dawać czytać. * Podniesione razem ze wstępem i opisami, zgłoszenie właściciela z 10.08. */ #wpconsent-container::part(wpconsent-cookies-list), #wpconsent-container::part(wpconsent-cookies-list-item) { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-smoked-tent) 90%, transparent); border-color: color-mix(in srgb, var(--color-camel-brown) 15%, transparent); } #wpconsent-container::part(wpconsent-cookies-list-header) { font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-smoked-tent); } /* ⚠︎ TRZY KOLUMNY TO ŚWIADOME ODSTĘPSTWO OD CANVASU — canvas daje dwie * (nazwa · czas), wtyczka trzy (Ciasteczko · Po co · Jak długo). Zostaje wersja * wtyczki, bo środkowa kolumna niesie kopię napisaną w tonie sklepu, a canvas * ma w tym miejscu same nazwy techniczne. Rozstrzygnięte przez właściciela 10.08. * * Na wąskim ekranie ta sama siatka jest jednak nie do czytania: przy 390 px * na wykaz zostaje 287 px, czyli kolumny 41 / 165 / 41. Dlatego poniżej progu * rzędy składają się w jedną kolumnę, a wiersz nagłówkowy znika — trzy etykiety * jedna pod drugą nie opisują już niczego, co stoi obok. * * ⚠︎ ZNIKAJĄCY NAGŁÓWEK ZABIERA ZE SOBĄ ZNACZENIE KOLUMN — i to była usterka * zgłoszona 10.08. „do wylogowania" albo „2 dni" bez etykiety stoi w powietrzu; * czytelnik nie ma jak zgadnąć, że to okres przechowywania. Dlatego wartości * dostają etykietę wprost przy sobie, wziętą z `data-etykieta` — czyli z tego * samego USTAWIENIA wtyczki, które wypisuje nagłówek kolumny na desktopie. * `content: attr()` znaczy, że zmiana napisu w panelu przechodzi na oba widoki * naraz; wpisany tutaj rozjechałby się z nagłówkiem po cichu. */ @media (max-width: 600px) { #wpconsent-container::part(wpconsent-cookies-list-header) { display: none; } #wpconsent-container::part(wpconsent-cookies-list-item) { grid-template-columns: 1fr; gap: 6px; padding-inline: 0; padding-block: 16px; } /* Nazwa ciasteczka otwiera blok i niesie się sama — pogrubienie mówi * „to jest tytuł tej pozycji" wyraźniej niż dopisana etykieta. */ #wpconsent-container::part(wpconsent-cookie-name) { font-weight: 700; color: var(--color-smoked-tent); } /* Okres przechowywania jest jedyną wartością, której nie da się rozpoznać * po samej treści — dostaje etykietę w linii, oddzieloną kropką w duchu * pozostałych wykazów witryny. */ #wpconsent-container::part(wpconsent-cookie-duration)::before { content: attr(data-etykieta) " · "; color: color-mix(in srgb, var(--color-camel-brown) 90%, transparent); font-weight: 600; } #wpconsent-container::part(wpconsent-cookie-duration) { color: var(--color-smoked-tent); } } /* Przełącznik — canvas daje pigułkę 52 × 30 px. Wtyczka renderuje go jako * `