/* * Silent Heroes — Cookie consent banner (Complianz) skin * Ciemny wariant marki: czerń #111 + czerwień #CC1B1B, Poppins, radius 8/4px. * * Complianz steruje wyglądem banera przez zmienne CSS (--cmplz_*), ustawiane * w „Look & Feel". Najpewniej jest te zmienne NADPISAĆ (!important wygrywa * niezależnie od kolejności ładowania), zamiast walczyć z pojedynczymi klasami. * Toggle kategorii to natywny → kolor przez accent-color. */ /* ==== CLS FIX (KRYTYCZNE) — baner ZAWSZE poza przepływem od 1. paintu ==== * Layout-CSS banera Complianz (position:fixed) ładuje się ~350ms ZA PÓŹNO * (osobny plik, nie w ). Przez ten czas baner renderuje się w normalnym * przepływie u góry strony i spycha całe #page w dół → 2 wielkie skoki * (CLS ~1.6 na mobile, wydajność mobile 70). Ten plik jest w , więc * reguła zadziała ZANIM baner wejdzie do DOM. * * ⚠ 09.09.2026 — pozycja zmieniona z prawego dolnego rogu na ŚRODEK EKRANU (decyzja * właściciela). Robimy to TUTAJ, a nie w „Look & Feel" Complianz, bo ten plik i tak * nadpisałby ustawienie panelu (`!important` + wcześniejsze ładowanie) — dwa źródła * prawdy o pozycji skończyłyby się polowaniem na duchy. Klasa `cmplz-bottom-right` * może nadal wisieć na banerze; bez znaczenia, wygrywa ten plik. * * ⭐ ZASIĘG: ten plik jest wspólny dla OBU witryn multisite (.pro i .store ładują ten sam * motyw — zweryfikowane w HTML sklepu 09.09.2026), więc wyśrodkowanie i zdjęcie ✕ działa * też w sklepie. **Decyzja właściciela 09.09: tak ma być — NIE rozdzielać per-blog.** * Gdyby ktoś w przyszłości chciał inaczej, potrzebna jest gałąź na `body.blog-2`, * a nie „poprawka" tych reguł. */ .cmplz-cookiebanner { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; /* Baner nigdy nie wychodzi poza ekran: na niskich telefonach treść przewija się * WEWNĄTRZ banera, zamiast wypychać przyciski poza viewport. Margines 16 px z każdej * strony robi też za szerokość na mobile — dlatego nie ma tu osobnej media query. */ max-width: min(560px, calc(100vw - 32px)) !important; max-height: calc(100vh - 32px) !important; overflow-y: auto !important; } /* ---- ✕ USUNIĘTE (decyzja właściciela, 09.09.2026) ---- * Complianz traktuje kliknięcie ✕ jak PEŁNĄ ODMOWĘ: zapisuje `banner-status=dismissed` * i `saved_categories=["functional"]` na 365 dni (zmierzone na produkcji 09.09), a baner * nie wraca na kolejnych podstronach. Na .store po ✕ `fbq` w ogóle się nie ładuje. * Do tego ✕ stał w rogu banera zajmującego pół ekranu telefonu — najbardziej odruchowy * gest na tym widoku zapisywał odmowę na rok. * ⚠ To NIE odbiera możliwości odmowy: „Odmów" zostaje w pierwszej warstwie, jednym * kliknięciem, tej samej wagi co „Akceptuję". Esc i tak nigdy nic nie robił (zmierzone). * ⚠ Na mobile `.cmplz-title` jest ukryty, więc po zdjęciu ✕ `.cmplz-header` schodzi do 0 px * i nie zostaje pusty pasek. Na desktopie w nagłówku zostaje sam tytuł. */ .cmplz-cookiebanner .cmplz-close { display: none !important; } /* Dopóki Complianz nie oznaczy banera jako gotowego (klasa cmplz-show), trzymaj * go display:none — tak jak własne (późne) CSS Complianz. Bez tego baner pojawia * się pusty i rośnie w miarę doładowywania treści (przyciski/linki) → reflow * liczony jako CLS. Z tą regułą baner pojawia się dopiero * w finalnym rozmiarze. */ .cmplz-cookiebanner:not(.cmplz-show) { display: none !important; } /* Po cmplz-show Complianz jeszcze dopełnia treść banera (linki/przyciski) → baner rośnie. * Po wyśrodkowaniu rośnie symetrycznie od środka, a nie w górę jak przy przypięciu do dołu, * ale wniosek jest ten sam: opóźniamy MALOWANIE o ~0.9s (opacity), żeby treść ustabilizowała * się, zanim baner stanie się widoczny — skoki pod opacity:0 nie są liczone do CLS. * ⚠ Animujemy WYŁĄCZNIE opacity. `transform` jest zajęty przez wyśrodkowanie * (translate(-50%,-50%)) — animacja ruszająca transform skasowałaby pozycję. */ .cmplz-cookiebanner.cmplz-show { animation: sh-cmplz-reveal .25s ease .9s both; } @keyframes sh-cmplz-reveal { from { opacity: 0; } to { opacity: 1; } } /* ---- Nadpisanie zmiennych Complianz (paleta marki) ---- */ :root { /* Banner */ --cmplz_banner_background_color: var(--sh-black) !important; /* #111 */ --cmplz_banner_border_color: rgba(255, 255, 255, .08) !important; --cmplz_banner_border_width: 1px !important; --cmplz_banner_border_radius: 8px !important; /* --sh-radius-md */ /* Tekst + linki */ --cmplz_text_color: rgba(255, 255, 255, .84) !important; --cmplz_hyperlink_color: #ffffff !important; --cmplz_category_header_always_active_color: rgba(255, 255, 255, .5) !important; /* Przyciski — wspólny radius */ --cmplz_button_border_radius: 4px !important; /* --sh-radius */ /* Akceptuję — czerwony (primary) */ --cmplz_button_accept_background_color: var(--sh-red) !important; /* #CC1B1B */ --cmplz_button_accept_border_color: var(--sh-red) !important; --cmplz_button_accept_text_color: #ffffff !important; /* Odrzuć — outline biały (secondary) */ --cmplz_button_deny_background_color: transparent !important; --cmplz_button_deny_border_color: rgba(255, 255, 255, .45) !important; --cmplz_button_deny_text_color: #ffffff !important; /* Ustawienia / Zapisz — outline biały (secondary) */ --cmplz_button_settings_background_color: transparent !important; --cmplz_button_settings_border_color: rgba(255, 255, 255, .45) !important; --cmplz_button_settings_text_color: #ffffff !important; /* Przełącznik kategorii (toggle slider) — Complianz używa pseudo-elementów, nie natywnego checkboxa. Sterują nim te zmienne: */ --cmplz_slider_active_color: var(--sh-red) !important; /* włączony = czerwony */ --cmplz_slider_inactive_color: rgba(255, 255, 255, .28) !important; /* wyłączony = szary */ --cmplz_slider_bullet_color: #ffffff !important; /* gałka = biała */ } /* ---- Typografia: Poppins (brak zmiennej na font-family) ---- */ .cmplz-cookiebanner, .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-btn, .cmplz-cookiebanner .cmplz-category-title, .cmplz-manage-consent { font-family: var(--sh-font-sans) !important; } .cmplz-cookiebanner .cmplz-title { letter-spacing: var(--sh-tracking-tight) !important; } /* Wszystko bez pogrubień — font-weight 400 (Complianz domyślnie daje 500/bold) */ .cmplz-cookiebanner, .cmplz-cookiebanner *, .cmplz-cookiebanner strong, .cmplz-cookiebanner b, .cmplz-cookiebanner h1, .cmplz-cookiebanner h2, .cmplz-cookiebanner h3, .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-btn, .cmplz-cookiebanner .cmplz-category-title, .cmplz-cookiebanner .cmplz-always-active, .cmplz-manage-consent, .cmplz-manage-consent * { font-weight: 400 !important; } /* ---- Hover przycisków (Complianz nie ma zmiennych na hover) ---- */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus { background-color: var(--sh-red-dark) !important; /* #A81515 */ border-color: var(--sh-red-dark) !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { background-color: rgba(255, 255, 255, .12) !important; border-color: #ffffff !important; } /* ---- „Zobacz preferencje" = LINK, nie trzeci przycisk (10.09.2026) ---- * Trzy kontrolki tej samej wagi to ściana decyzyjna: oko nie ma czego wybrać, * więc częściej nie wybiera nic. Prawo wymaga równorzędności „Akceptuję" vs * „Odmów" — trzecia opcja NIE musi mieć tej samej wagi i może być odnośnikiem. * Zostaje widoczna i klikalna, schodzi tylko z poziomu przycisku. * * ⚠ Dotyczy WYŁĄCZNIE `.cmplz-view-preferences`. `.cmplz-save-preferences` * (pojawia się PO wejściu w preferencje) MUSI zostać przyciskiem — to jest * zatwierdzenie wyboru, a nie odnośnik; podmiana obu zabrałaby użytkownikowi * sposób zapisania własnych ustawień. */ /* Desktopowy kontener przycisków to `flex` z `nowrap` (zmierzone na produkcji 10.09) — * sam margines NIE złamie wiersza i link ląduje obok „Odmów". Stąd jawne zawijanie * plus zajęcie całej linii przez link. Na mobile kontener jest gridem (media query * niżej), gdzie `flex-*` jest ignorowane i wiersz wymusza `grid-column`. */ .cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap !important; } /* ⚠ Samo `flex-wrap:wrap` NIE wystarcza i psuje układ: Complianz daje każdemu przyciskowi * `width:100%` (zmierzone na produkcji: 484 px przy kontenerze 484 px) i `flex:0 1 auto`. * Bez zawijania przyciski kurczyły się do jednego wiersza; po włączeniu zawijania każdy * bierze pełną szerokość i ląduje w OSOBNYM wierszu. Dlatego dwie decyzje dostają * `flex:1 1 0` i dzielą wiersz po równo, a link zajmuje linię pod nimi. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { flex: 0 0 100% !important; /* własna linia pod przyciskami */ background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; margin: 10px auto 0 !important; font-size: 12px !important; /* jak linki dokumentów pod spodem */ line-height: 1.4 !important; color: rgba(255, 255, 255, .7) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus { color: #ffffff !important; background: none !important; /* gasi hover przycisków wtórnych wyżej */ border: 0 !important; } /* ---- Linki dokumentów: Complianz renderuje je jako