/* ========================================================================== * SAMA MATCHA — baner i panel zgód (Complianz) * * Complianz generuje arkusz do uploads/complianz/css/banner-1-optin.css z palety * zapisanej w bazie. NIE przepisujemy tam hexów: baza rozjechałaby się z tokenami * przy pierwszej zmianie palety, a plik z uploads nie jedzie w repozytorium. * * Cały wygląd baneru wtyczka czyta ze zmiennych `--cmplz_*` deklarowanych w jej * arkuszu na `:root`. Podmieniamy więc ZMIENNE, nie reguły — jedna deklaracja * przenosi kolor na wszystkie miejsca, w których wtyczka go używa, i nie wchodzimy * w wojnę selektorów z kodem, który przy aktualizacji może się przenumerować. * * Swoistość: arkusz wtyczki ładuje się PO naszym (`cmplz-banner-1-optin-css` jest * ostatni w ), więc samo `:root` by przegrało przy równej swoistości. * Dlatego `html:root` — (0,1,1) wobec (0,1,0) — i `html .cmplz-…` tam, gdzie * zmienna nie wystarcza. Zero !important. * * Doktryna elewacji: baner unosi się nad treścią, czyli ten sam wyjątek co sticky * — dostaje cień, więc NIE dostaje ani ramki, ani kontrastu tła. Karty kategorii * w środku mają odwrotnie: kontrast tła, bez ramki i bez cienia. * ========================================================================== */ html:root { /* Powierzchnia baneru */ --cmplz_banner_background_color: var(--c-paper); --cmplz_banner_border_width: 0; --cmplz_banner_border_radius: var(--r-md); --cmplz_banner_margin: var(--sp-2); /* Typografia */ --cmplz_text_color: var(--c-text); --cmplz_hyperlink_color: var(--c-moss); --cmplz_title_font_size: var(--fs-h3); --cmplz_text_font_size: var(--fs-small); --cmplz_link_font_size: var(--fs-caption); --cmplz_category_body_font_size: var(--fs-caption); --cmplz_category_header_title_font_size: var(--fs-small); --cmplz_category_header_active_font_size: var(--fs-caption); /* Przyciski: geometria wspólna, kolor rozłączny. „Akceptuję wszystkie" — las na papierze, 12,4:1. „Odrzucam" — sage z atramentem, 7,9:1; oba wypełnione, ta sama bryła. „Ustawienia" świadomie lżejsze: to droga w bok, nie trzecia decyzja. Obwódka odrzucenia jest MCHEM, nie sage. Sage na papierze to 1,97:1, czyli poniżej 3:1 z WCAG 1.4.11 (kontrast elementu sterującego wobec tła) — przycisk rozmywałby się w powierzchni baneru, a to dokładnie ta przewaga akceptacji, której nie chcemy. Mech na papierze daje 6,1:1 i rysuje krawędź, nie zmieniając ani bryły, ani wypełnienia (border-box, 1 px z arkusza wtyczki). */ --cmplz_button_accept_background_color: var(--c-forest); --cmplz_button_accept_border_color: var(--c-forest); --cmplz_button_accept_text_color: var(--c-paper); --cmplz_button_deny_background_color: var(--c-sage); --cmplz_button_deny_border_color: var(--c-moss); --cmplz_button_deny_text_color: var(--c-ink); --cmplz_button_settings_background_color: var(--c-paper); --cmplz_button_settings_border_color: var(--c-line); --cmplz_button_settings_text_color: var(--c-moss); --cmplz_button_border_radius: var(--r-full); --cmplz_button_font_size: var(--fs-small); /* Kategorie i przełączniki */ --cmplz_category_header_always_active_color: var(--c-moss); --cmplz_slider_active_color: var(--c-moss); --cmplz_slider_inactive_color: var(--c-muted); --cmplz_slider_bullet_color: var(--c-paper); } /* ── Powierzchnia ───────────────────────────────────────────────────────── * Cień i krój to jedyne rzeczy z elewacji, których wtyczka nie trzyma * w zmiennej. `html` z przodu tylko po to, żeby przebić późniejszy arkusz. * Cień wtyczka deklaruje trzy razy, mocniej (`.cmplz-cookiebanner.cmplz-show`, * plus wersja :hover), więc dokładamy klasę stanu — inaczej zostałby czarny, * dwuwarstwowy cień materiałowy, obcy resztą witryny. * ---------------------------------------------------------------------- */ html .cmplz-cookiebanner, html .cmplz-cookiebanner.cmplz-show, html .cmplz-cookiebanner.cmplz-show:hover { box-shadow: var(--shadow-lift); } html .cmplz-cookiebanner { font-family: var(--font-sans); line-height: var(--lh-body); padding: var(--sp-3) var(--sp-4); } /* Wtyczka gasi tytuł poniżej 425 px i centruje go nad lewym akapitem. Zostaje widoczny (nazywa, co się otworzyło) i wraca do lewej krawędzi, tak jak cała typografia witryny. */ html .cmplz-cookiebanner .cmplz-header .cmplz-title { color: var(--c-ink); display: block; font-family: var(--font-display); grid-column: 1 / 3; /* pierwsza kolumna to 100 px pod logo, którego nie ma */ justify-self: start; line-height: var(--lh-snug); } html .cmplz-cookiebanner .cmplz-message p { margin-block: 0 var(--sp-2); } html .cmplz-cookiebanner .cmplz-message p:last-child { margin-block-end: 0; } html .cmplz-cookiebanner .cmplz-message a:hover { color: var(--c-ink); } /* ── Przyciski ─────────────────────────────────────────────────────────── * Geometria wprost z .sm-btn (sm-base.css): 48 px wysokości, pełny promień, * ten sam krój i kerning. JEDNA reguła na wszystkie przyciski baneru, więc * „Odrzucam" i „Akceptuję wszystkie" nie mają jak się różnić rozmiarem — * różni je wyłącznie kolor ze zmiennych powyżej. * ---------------------------------------------------------------------- */ html .cmplz-cookiebanner .cmplz-buttons { align-items: center; } html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-family: var(--font-sans); font-weight: 500; height: 48px; letter-spacing: var(--ls-caps); padding: var(--sp-2) var(--sp-3); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background-color: var(--c-ink); border-color: var(--c-ink); } /* Odrzucenie ciemnieje pod kursorem tak samo jak akceptacja (las → atrament, sage → mech). Odruchem było rozjaśnienie do mgły, ale wtedy „Odrzucam" pod kursorem niemal znika z papieru, gdy „Akceptuję wszystkie" nabiera mocy — asymetria afordancji, czyli ten sam grzech co różny rozmiar przycisków. Mech wymaga papierowego napisu (atrament na mchu to 2,6:1). */ html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background-color: var(--c-moss); border-color: var(--c-moss); color: var(--c-paper); } html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { border-color: var(--c-moss); color: var(--c-ink); } /* ── Ognisko ───────────────────────────────────────────────────────────── * Complianz po otwarciu baneru ustawia ognisko na „×", a po rozwinięciu panelu * na pierwszym przełączniku. Odziedziczony pierścień z motywu (zielona obwódka * plus poświata) pokazywał się więc od razu po kliknięciu myszą, zanim ktokolwiek * dotknął klawiatury. Gasimy `:focus`, zostawiamy `:focus-visible` na tokenach — * klawiatura widzi wszystko, mysz nie widzi nic. * ---------------------------------------------------------------------- */ html .cmplz-cookiebanner .cmplz-close:focus, html .cmplz-cookiebanner .cmplz-category-toggle:focus, html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus { box-shadow: none; outline: 0; } html .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible, html .cmplz-cookiebanner .cmplz-close:focus-visible, html .cmplz-cookiebanner .cmplz-category-toggle:focus-visible, html .cmplz-cookiebanner .cmplz-link:focus-visible { box-shadow: none; outline: 2px solid var(--c-moss); outline-offset: 3px; } /* Przełącznik kategorii: wtyczka rysuje pierścień na ::before etykiety, i to kobaltem (#245fcc). Ten sam rozmiar, nasz kolor. Selektor musi być tak długi jak jej własny, żeby wygrać swoistością. */ html .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: none; } html .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before { box-shadow: 0 0 0 2px var(--c-moss); } /* ── Kategorie ─────────────────────────────────────────────────────────── * Karta na papierze prosiłaby o hairline, ale kategorii jest cztery pod sobą * i cztery ramki robią kratę. Zostaje kontrast tła (krem), bez ramki, bez cienia. * Cel dotykowy nagłówka podbity do 44 px — wtyczka daje mniej. * ---------------------------------------------------------------------- */ html .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: var(--c-cream); border: 0; border-radius: var(--r-sm); margin-block-end: var(--sp-1); padding-inline: var(--sp-2); } html .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { min-height: 44px; } html .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title { color: var(--c-ink); } html .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { line-height: var(--lh-body); padding-inline: 0; } html .cmplz-cookiebanner .cmplz-close:hover { color: var(--c-ink); }