/* ============================================================================ ANOVEI — dark.css: tryb ciemny strony publicznej KIEDY DZIAŁA Tylko pod html[data-theme="dark"]. Atrybut ustawia skrypt na górze w layout.html.twig (ręczny wybór → preferencja systemu → pora dnia). W trybie jasnym żadna reguła stąd się nie łapie. JAK JEST ZBUDOWANY 1. Tokeny z scripts/tailwind/input.css dostają ciemne wartości — wszystko, co już z nich korzysta (.card, .btn, .section--alt, strony ofertowe, kalkulator), przełącza się samo. 2. Szablony mają jeszcze ok. 60 „gołych" klas Tailwinda (bg-white, text-gray-600, border-gray-100…), a style.css kilkadziesiąt wartości hex. Zamiast dopisywać wariant `dark:` w każdym szablonie i przebudowywać Tailwinda, mapujemy je tutaj na te same tokeny. Nowy szablon, który używa klas z listy niżej albo tokenów, jest ciemny bez żadnej pracy. 3. Pasek nawigacji, hero, stopka i sekcje na granatowym tle są ciemne w obu motywach — tu się ich nie rusza. ZASADA: LICZY SIĘ ŁĄCZNA ILOŚĆ ŚWIATŁA Z EKRANU, NIE SAM KOLOR TŁA Tryb ciemny jest po to, żeby ekran nie raził w ciemnym pokoju. Dlatego nie ma tu czystej bieli: tekst to #CDD5DE, przyciski mają stonowane wypełnienie zamiast białego, a jasne obrazy są mocno przygaszone. Przy zmianach mierz, nie oceniaj na oko — średnia luminancja zrzutu strony na telefonie na stronach tekstowych wychodzi 3–4 %, na stronie głównej i ofertowych 10–20 % (tryb jasny ma ok. 60 %). Nowy duży jasny element psuje to bardziej niż cokolwiek. ZRZUTY PANELU Mają drugi komplet z ciemnego motywu panelu ({nazwa}-dark.webp, generowany przez `node capture.js --theme=dark` w scripts/screenshots). Adresy podmienia skrypt na górze w layout.html.twig — nie CSS. Animowana replika „Panel w akcji" jest rysowana w CSS-ie i ma tu własny ciemny motyw (sekcja 5c). PUŁAPKA: --c-ink-900 / --c-ink-700 To jednocześnie „granatowe tło" (hero, przycisk główny, .card--dark) i „kolor nagłówka na jasnym". Token zostaje granatowy, a miejsca, gdzie jest kolorem TEKSTU, mają tu osobne reguły — odwrócenie tokenu zrobiłoby z granatowych sekcji białe plamy. ========================================================================= */ html[data-theme="dark"] { color-scheme: dark; --c-surface: 12 17 23; /* #0C1117 — tło strony */ --c-surface-alt: 19 27 36; /* #131B24 — pas naprzemienny, tło pomocnicze */ --c-card: 23 32 42; /* #17202A — karta uniesiona nad tło (dawne bg-white) */ --c-border: 42 55 68; /* #2A3744 */ --c-ink: 205 213 222; /* #CDD5DE — tekst podstawowy (12,5:1); celowo nie biel, patrz sekcja 0 */ --c-ink-2: 158 170 183; /* #9EAAB7 — tekst pomocniczy (7,8:1) */ --c-ink-3: 124 137 150; /* #7C8996 — metadane (5,3:1) */ --c-on-dark: 190 200 210; /* #BEC8D2 — tekst na zdjęciu hero i granatowych sekcjach */ --d-btn: 36 92 116; /* #245C74 — wypełnienie przycisku głównego (z tekstem --c-ink 6:1) */ --d-btn-hover: 47 122 153; /* #2F7A99 */ --c-accent-600: 127 196 221; /* tekst i linki: na ciemnym tle rolę 600 przejmuje 300 */ --c-accent-50: 22 41 54; /* #162936 — tint */ --c-success: 74 222 128; --c-warning: 251 191 36; --c-error: 248 113 113; --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 8px 24px rgb(0 0 0 / .5); } /* Fala pod hero ma wypełnienie wpisane atrybutem w SVG (#ffffff) — CSS wygrywa z atrybutem prezentacyjnym, więc przejście hero → treść zostaje bez białego pasa. */ html[data-theme="dark"] .hero svg path[fill="#ffffff"] { fill: rgb(var(--c-surface)); } /* ── 0. Biel → stonowana jasność ───────────────────────────────────────────── Tekst pisany bielą (hero, stopka, klasy text-white) schodzi do koloru tekstu podstawowego; lead i opisy na zdjęciu hero — do --c-on-dark. */ html[data-theme="dark"] .hero, html[data-theme="dark"] .offer-hero-band, html[data-theme="dark"] .text-white, html[data-theme="dark"] .lg\:text-white, html[data-theme="dark"] .hover\:text-white:hover, html[data-theme="dark"] .anovei-offer .offer-hero h1, html[data-theme="dark"] .copyright, html[data-theme="dark"] .footer .header, html[data-theme="dark"] .footer i { color: rgb(var(--c-ink)); } html[data-theme="dark"] .offer-hero .offer-lead, html[data-theme="dark"] .hero .text-gray-100 { color: rgb(var(--c-on-dark)); } /* Niebieski przycisk CTA (.button, „Cennik i zamówienie" w pasku): ciemniejszy gradient i napis bez czystej bieli. */ html[data-theme="dark"] .button, html[data-theme="dark"] .nav-buy-btn, html[data-theme="dark"] .navigation li a.nav-buy-btn { background: linear-gradient(45deg, #123f82, #124ea3); color: #d6dde5; } html[data-theme="dark"] .button:hover, html[data-theme="dark"] .nav-buy-btn:hover, html[data-theme="dark"] .navigation li a.nav-buy-btn:hover { background: linear-gradient(45deg, #1753a9, #1765d3); color: #fff; } /* Wypełnione przyciski w kolorze logo („Zamów" na kaflach, CTA pod artykułem): #4791B2 na całą szerokość telefonu to po zrzutach panelu druga najjaśniejsza powierzchnia — schodzi do tego samego wypełnienia co przycisk główny. */ html[data-theme="dark"] .bg-brand, html[data-theme="dark"] .hover\:bg-brand:hover { background-color: rgb(var(--d-btn)); } html[data-theme="dark"] a.bg-brand:hover, html[data-theme="dark"] button.bg-brand:hover { background-color: rgb(var(--d-btn-hover)); } /* Drugi przycisk w hero strony głównej (w trybie jasnym biały). */ html[data-theme="dark"] .button.hero__button--light, html[data-theme="dark"] .button.hero__button--light:hover { background: rgb(255 255 255 / .1); color: rgb(var(--c-ink)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); } html[data-theme="dark"] .button.hero__button--light:hover { background: rgb(255 255 255 / .16); } /* ── 1. Gołe klasy Tailwinda → tokeny ─────────────────────────────────────── */ html[data-theme="dark"] .bg-white { background-color: rgb(var(--c-card)); } html[data-theme="dark"] .bg-white\/95 { background-color: rgb(var(--c-card) / .95); } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgb(var(--c-surface-alt)); } html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-blue-100 { background-color: rgb(var(--c-accent-50)); } html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100 { background-color: rgb(127 29 29 / .35); } html[data-theme="dark"] .bg-yellow-100 { background-color: rgb(133 77 14 / .35); } html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-ink-900, html[data-theme="dark"] .text-\[\#30455e\], html[data-theme="dark"] .hover\:text-gray-900:hover { color: rgb(var(--c-ink)); } html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .hover\:text-gray-600:hover { color: rgb(var(--c-ink-2)); } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: rgb(var(--c-ink-3)); } html[data-theme="dark"] .text-brand-dark, html[data-theme="dark"] .text-blue-700 { color: rgb(var(--c-accent-300)); } html[data-theme="dark"] .text-red-800 { color: rgb(254 202 202); } html[data-theme="dark"] .text-green-600 { color: rgb(var(--c-success)); } html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-blue-100 { border-color: rgb(var(--c-border)); } html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-border)); } /* Białe przyciski na granatowych banerach (cennik, CTA): zamiast białej plamy — półprzezroczyste wypełnienie z obrysem. Nadal czytają się jako przycisk główny. */ html[data-theme="dark"] .bg-white.text-\[\#30455e\] { background-color: rgb(255 255 255 / .1); color: rgb(var(--c-ink)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); } html[data-theme="dark"] .bg-white.text-\[\#30455e\]:hover { background-color: rgb(255 255 255 / .16); } /* Cienie kart pisane w nawiasach kwadratowych (8% czerni) na ciemnym tle nie istnieją — kartę od tła odcina obrys. */ html[data-theme="dark"] [class*="shadow-[1px_4px_"] { box-shadow: 0 0 0 1px rgb(var(--c-border)); } /* ── 2. Komponenty z input.css, w których ink-900 jest kolorem ────────────── */ html[data-theme="dark"] .card { background-color: rgb(var(--c-card)); } html[data-theme="dark"] .btn-primary { background-color: rgb(var(--d-btn)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .btn-primary:hover { background-color: rgb(var(--d-btn-hover)); color: #fff; } html[data-theme="dark"] .btn-secondary { background-color: rgb(var(--c-card)); } html[data-theme="dark"] .btn-ghost:hover { color: #fff; } html[data-theme="dark"] .card--dark, html[data-theme="dark"] .section--dark { background-color: rgb(var(--c-surface-alt)); } html[data-theme="dark"] .skip-link:focus { background-color: rgb(var(--c-card)); } /* ── 3. style.css: strony ofertowe ───────────────────────────────────────── */ html[data-theme="dark"] .anovei-offer h1, html[data-theme="dark"] .anovei-offer h2, html[data-theme="dark"] .anovei-offer h3 { color: rgb(var(--c-ink)); } /* Przyciski: żadnych białych ani jasnoniebieskich wypełnień — patrz sekcja 0. */ html[data-theme="dark"] .offer-button { background: rgb(var(--d-btn)); border-color: rgb(var(--d-btn)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .offer-button:hover { background: rgb(var(--d-btn-hover)); border-color: rgb(var(--d-btn-hover)); color: #fff; } html[data-theme="dark"] .offer-button--secondary { background: transparent; color: rgb(var(--c-accent-300)); } html[data-theme="dark"] .offer-button--secondary:hover { background: rgb(var(--c-accent-50)); color: #fff; } html[data-theme="dark"] .offer-hero .offer-button { background: rgb(var(--d-btn)); border-color: rgb(var(--d-btn)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .offer-hero .offer-button:hover { background: rgb(var(--d-btn-hover)); border-color: rgb(var(--d-btn-hover)); color: #fff; } html[data-theme="dark"] .offer-hero .offer-button--secondary { background: rgb(15 27 38 / .45); border-color: rgb(var(--c-accent-500)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .offer-hero .offer-button--secondary:hover { background: rgb(var(--c-accent-50)); border-color: rgb(var(--c-accent-300)); color: #fff; } html[data-theme="dark"] .ticket-calculator__fields input, html[data-theme="dark"] .ticket-calculator__fields select { background: rgb(var(--c-card)); color: rgb(var(--c-ink)); } /* ── 4. style.css: formularze ────────────────────────────────────────────── */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=number], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: rgb(var(--c-surface)); border-color: rgb(var(--c-border)); color: rgb(var(--c-ink)); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: rgb(var(--c-ink-3)); } html[data-theme="dark"] input[type=text]:focus, html[data-theme="dark"] input[type=email]:focus, html[data-theme="dark"] input[type=tel]:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background-color: rgb(var(--c-surface-alt)); border-color: #4791b2; } html[data-theme="dark"] input[type=text]:invalid:not(:placeholder-shown), html[data-theme="dark"] input[type=email]:invalid:not(:placeholder-shown), html[data-theme="dark"] input[type=tel]:invalid:not(:placeholder-shown) { background-color: rgb(127 29 29 / .25); } html[data-theme="dark"] input[type=text]:valid:not(:placeholder-shown), html[data-theme="dark"] input[type=email]:valid:not(:placeholder-shown), html[data-theme="dark"] input[type=tel]:valid:not(:placeholder-shown) { background-color: rgb(20 83 45 / .25); border-color: rgb(34 197 94 / .6); } html[data-theme="dark"] input[type=checkbox] { --border: #4a5b6c; --border-hover: #7fc4dd; --background: rgb(var(--c-surface)); --disabled: #1b2632; --disabled-inner: #3a4856; } /* Pas .copyright i stopka mają już jasnoniebieski wariant linku — reszta strony go przejmuje. */ html[data-theme="dark"] .link { color: #7fb6ff; } /* ── 5. style.css: poradnik ──────────────────────────────────────────────── */ html[data-theme="dark"] .article-body { color: rgb(var(--c-ink-2)); } html[data-theme="dark"] .article-body h2, html[data-theme="dark"] .article-body h3, html[data-theme="dark"] .article-body strong { color: rgb(var(--c-ink)); } html[data-theme="dark"] .article-body a { color: rgb(var(--c-accent-300)); } html[data-theme="dark"] .article-body a:hover { color: #fff; } html[data-theme="dark"] .article-body th, html[data-theme="dark"] .article-body td { border-color: rgb(var(--c-border)); } html[data-theme="dark"] .article-body th { background: rgb(var(--c-surface-alt)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .article-body blockquote { color: rgb(var(--c-ink-2)); } html[data-theme="dark"] .article-toc__box { background: rgb(var(--c-surface-alt)); border-color: rgb(var(--c-border)); } html[data-theme="dark"] .article-toc summary { color: rgb(var(--c-ink)); } html[data-theme="dark"] .article-toc ol { border-left-color: rgb(var(--c-border)); } html[data-theme="dark"] .article-toc a { color: rgb(var(--c-ink-3)); } html[data-theme="dark"] .article-toc a:hover, html[data-theme="dark"] .article-toc a[aria-current] { color: rgb(var(--c-ink)); } @media (min-width: 1280px) { html[data-theme="dark"] .article-toc__box { background: none; } } /* ── 5a. Strony prawne (style inline w partials/legal-styles.html.twig) ───── */ html[data-theme="dark"] .reg-section p, html[data-theme="dark"] .reg-section li { color: rgb(var(--c-ink-2)); } html[data-theme="dark"] .reg-section strong { color: rgb(var(--c-ink)); } html[data-theme="dark"] .reg-section h2, html[data-theme="dark"] .reg-section a { color: rgb(var(--c-accent-300)); } html[data-theme="dark"] .reg-section a:hover { color: #fff; } html[data-theme="dark"] .reg-info-box { background: rgb(var(--c-accent-50)); border-color: rgb(var(--c-border)); color: rgb(var(--c-ink)); } html[data-theme="dark"] .reg-info-box a { color: rgb(var(--c-accent-300)); } /* ── 5b. „Panel w akcji": oprawa sceny (zakładki, kroki) idzie za motywem, samo okno z repliką panelu ma ciemny motyw w sekcji 5c. ─────────────── */ html[data-theme="dark"] .anv-demo__tab, html[data-theme="dark"] .anv-demo__step { background: rgb(var(--c-card)); } /* Wybrana zakładka: tint + obrys, nie pełny akcent — pasek postępu sceny na jej dolnej krawędzi jest w accent-300 i na takim samym tle by zniknął. */ html[data-theme="dark"] .anv-demo__tab[aria-selected="true"] { background: rgb(var(--c-accent-50)); border-color: rgb(var(--c-accent-500)); color: #fff; } html[data-theme="dark"] .anv-demo__step.is-on { background: rgb(var(--c-accent-50)); } /* ── 5c. „Panel w akcji": ciemna replika ───────────────────────────────────── Replika (css/panel-demo.css) ma własne zmienne --d-* z jasną paletą panelu plus kilkadziesiąt kolorów wpisanych wprost. Tu dostaje ciemny motyw — celowo O TON JAŚNIEJSZY niż ciemny motyw samego panelu na zrzutach (tło #1B222B zamiast prawie czarnego): animacja jest głównym elementem sekcji i ma się odcinać od tła strony (#0C1117), a nie w nim ginąć. Kolory statusów (KPI, plakietki, kalendarz) to te same barwy co w jasnym panelu, w wersji „ciemne tło + jasny napis", tak jak robi to panel w trybie ciemnym. */ html[data-theme="dark"] .anv-stage { background: #1b222b; --d-nav: #12171d; --d-nav-sec: #55616e; --d-nav-mut: #6b7783; --d-ink: #e6eaee; --d-ink-2: #cdd4db; --d-ink-3: #9ba6b2; --d-ink-4: #7d8894; --d-ink-5: #aeb7c1; --d-line: #35414e; --d-line-2: #2c3743; --d-line-3: #44515f; --d-head: #202933; --d-btn: #e5e7eb; /* w ciemnym panelu przycisk główny i aktywna pigułka są jasne */ --d-focus: #6b7783; --d-bg: #1b222b; } html[data-theme="dark"] .anv-demo__window { background: #1b222b; filter: none; } html[data-theme="dark"] .anv-demo__chrome { background: linear-gradient(180deg, #232c37, #1e2630); } html[data-theme="dark"] .anv-demo__url { background: #161c23; } /* Powierzchnie wpisane w replice jako #fff. */ html[data-theme="dark"] .anv-top, html[data-theme="dark"] .anv-card, html[data-theme="dark"] .anv-fcard, html[data-theme="dark"] .anv-chart, html[data-theme="dark"] .anv-modal, html[data-theme="dark"] .anv-drawer, html[data-theme="dark"] .anv-window2, html[data-theme="dark"] .anv-cal__d { background: #242d38; } html[data-theme="dark"] .anv-pill, html[data-theme="dark"] .anv-ftab, html[data-theme="dark"] .anv-input, html[data-theme="dark"] .anv-btn--ghost { background: #1f2731; } html[data-theme="dark"] .anv-pill.is-hot, html[data-theme="dark"] .anv-btn--ghost.is-hot { background: #2c3743; } html[data-theme="dark"] .anv-modal__foot, html[data-theme="dark"] .anv-window2__bar { background: #202933; } html[data-theme="dark"] .anv-window2__bar b { background: #4a5766; } html[data-theme="dark"] .anv-sticky { background: rgb(36 45 56 / 95%); } html[data-theme="dark"] .anv-cal__d.is-sel { background: #1d3340; } /* Jasny przycisk główny (--d-btn) potrzebuje ciemnego napisu; przyciski w kolorze marki i pomarańczowy zostają z białym. Rozjaśnienie przy „hot" (brightness 1.35) na jasnym przycisku dałoby czystą biel — zostaje sam pierścień. */ html[data-theme="dark"] .anv-btn, html[data-theme="dark"] .anv-pill.is-current, html[data-theme="dark"] .anv-ftab.is-current, html[data-theme="dark"] .anv-sbtn.is-current { color: #111827; } html[data-theme="dark"] .anv-btn--brand, html[data-theme="dark"] .anv-btn--orange { color: #fff; } html[data-theme="dark"] .anv-btn--ghost { color: var(--d-ink-2); } html[data-theme="dark"] .anv-btn--link { color: var(--d-ink-3); } html[data-theme="dark"] .anv-btn.is-hot { filter: none; } html[data-theme="dark"] .anv-btn--brand.is-hot, html[data-theme="dark"] .anv-btn--orange.is-hot { filter: brightness(1.2); } /* Statusy: ciemne tło w barwie statusu, jasny napis. */ html[data-theme="dark"] .anv-kpi--blue { background: #17283f; border-color: #27456e; color: #8ab4f8; } html[data-theme="dark"] .anv-kpi--orange { background: #35220f; border-color: #65401a; color: #fdba74; } html[data-theme="dark"] .anv-kpi--yellow { background: #322a0e; border-color: #5f4f17; color: #fcd34d; } html[data-theme="dark"] .anv-kpi--purple { background: #261f45; border-color: #44387a; color: #c4b5fd; } html[data-theme="dark"] .anv-kpi--green { background: #12301f; border-color: #1f5636; color: #86efac; } html[data-theme="dark"] .anv-kpi--gray { background: #242d38; border-color: #35414e; color: #9ba6b2; } html[data-theme="dark"] .anv-badge--blue { background: #1c3252; color: #93c5fd; } html[data-theme="dark"] .anv-badge--orange { background: #43290f; color: #fdba74; } html[data-theme="dark"] .anv-badge--yellow { background: #3d3310; color: #fde047; } html[data-theme="dark"] .anv-badge--purple { background: #2e2556; color: #c4b5fd; } html[data-theme="dark"] .anv-badge--green { background: #143824; color: #86efac; } html[data-theme="dark"] .anv-badge--gray { background: #2c3743; color: #9ba6b2; } html[data-theme="dark"] .anv-badge--amber { background: #40300f; color: #fcd34d; } html[data-theme="dark"] .anv-badge--red { background: #45191b; color: #fca5a5; } html[data-theme="dark"] .anv-ev { background: #1a4a2e; color: #bbf7d0; } html[data-theme="dark"] .anv-ev--amber { background: #54440f; color: #fef08a; } html[data-theme="dark"] .anv-ev--new { background: #1f3d66; color: #bfdbfe; } /* Słupki wykresu: w jasnym panelu prawie czarne (#252525), w ciemnym — szare, tak jak na zrzucie serwis-zlecenia-dark. */ html[data-theme="dark"] .anv-cbar span { background: #8b949e; } /* Powiadomienie: w jasnym panelu granatowe na białym; tu o ton jaśniejsze od kart. */ html[data-theme="dark"] .anv-toast { background: #303b48; box-shadow: 0 0 0 1px #44515f, 0 12px 28px rgb(0 0 0 / .45); } /* Reguły tła wyżej mają wyższą specyficzność niż `.is-current` w panel-demo.css, więc stan wybrany trzeba tu powtórzyć. */ html[data-theme="dark"] .anv-pill.is-current, html[data-theme="dark"] .anv-ftab.is-current { background: var(--d-btn); border-color: var(--d-btn); } /* Kolory wpisane stylem inline w scenach (templates/partials/demo/*): wyróżnione wiersze, dni spoza miesiąca, zielone kwoty. Atrybut style wygrywa z arkuszem, stąd !important — tylko tutaj. */ html[data-theme="dark"] .anv-stage [style*="background:#f8fafc"] { background: #1f2731 !important; } html[data-theme="dark"] .anv-stage [style*="color:#cbd5e1"], html[data-theme="dark"] .anv-stage [style*="color:#d1d5db"] { color: #55616e !important; } html[data-theme="dark"] .anv-stage [style*="background:#f0fdf4"] { background: #12301f !important; border-color: #1f5636 !important; } html[data-theme="dark"] .anv-stage [style*="background:#fffbeb"] { background: #322a0e !important; } html[data-theme="dark"] .anv-stage [style*="background:#fef2f2"] { background: #3a1719 !important; } html[data-theme="dark"] .anv-stage [style*="color:#15803d"] { color: #86efac !important; } html[data-theme="dark"] .anv-stage [style*="color:#b45309"] { color: #fcd34d !important; } /* Baner cookies pochodzi ze wspólnego szkieletu (templates/layout/base.html.twig) i ma przycisk główny w bg-gray-900 — na ciemnej karcie zlewałby się z tłem. */ html[data-theme="dark"] #jn-consent-banner .bg-gray-900 { background-color: rgb(var(--d-btn)); color: rgb(var(--c-ink)); } /* ── 6. Obrazy ─────────────────────────────────────────────────────────────── Loga klientów to pliki z białym albo przezroczystym tłem i ciemnym znakiem — na ciemnej stronie dostają jasną płytkę zamiast znikać. */ html[data-theme="dark"] .trust-logo-link { background: #e8edf2; padding: .5rem .75rem; filter: brightness(.72); } html[data-theme="dark"] .trust-card__logo { padding: .5rem 0; } /* Jasny interfejs w ciemnej stronie świeci jak latarka. Zrzuty mają ciemny komplet (podmiana adresów w layout.html.twig), a replika „Panel w akcji" własny ciemny motyw (sekcja 5c), więc filtr łapie już tylko zrzut, któremu brakuje pliku -dark (selektor :not niżej). Przygaszanie filtrem brightness (nie opacity — przezroczystość pokazałaby tło spod obrazu). 0.76 to wybór Karola: połowa drogi między mocnym przygaszeniem 0.52 a pełną jasnością. Niżej = ciemniej, 1 = bez zmian. */ html[data-theme="dark"] img[src*="/images/panel/"]:not([src*="-dark"]), html[data-theme="dark"] img[src*="/images/offer/"] { filter: brightness(.76) contrast(1.05); } /* Pasek zestawu na /cennik (telefon): przycisk jak reszta niebieskich CTA w tym motywie. */ html[data-theme="dark"] .basket-bar { background: #161d25; color: rgb(var(--c-ink)); box-shadow: 0 -1px 0 rgb(var(--c-border)), 0 -6px 24px rgb(0 0 0 / .4); } html[data-theme="dark"] .basket-bar__cta { background: linear-gradient(45deg, #123f82, #124ea3); color: #d6dde5; }