/* ═══════════════════════════════════════════════════════════════════════════ OLFAKTORIUM — paleta i typografia. Jedno źródło prawdy dla całego portalu. ── JAK TO DZIAŁA ────────────────────────────────────────────────────────── Dwie niezależne osie, obie sterowane atrybutem na : data-styl = który ZESTAW kolorów (brak = domyslny, "jesien", "zima"…) data-motyw = jasny czy ciemny ("light" / "dark" / brak = systemowy) Wartości surowe siedzą w --krem-* (jasny) i --butelka-* (ciemny). Niżej są mapowane na tokeny robocze (--paper, --ink…), których używają strony. Strona NIGDY nie sięga po --krem-* ani --butelka-* — tylko po tokeny robocze. ── DODANIE NOWEGO STYLU (np. jesień) ────────────────────────────────────── Wystarczy JEDEN blok z wartościami, które mają się różnić. Mapowanie jasny/ciemny działa dalej samo, bo var() rozwiązuje się dopiero przy użyciu: :root[data-styl="jesien"]{ --krem-paper:#F7F0E4; --krem-gold:#B5793A; --butelka-paper:#2B2118; } Czego NIE podasz, dziedziczy się z domyślnego. Żadnych zmian w HTML ani JS. ── BUTELKA W SKRÓCIE ────────────────────────────────────────────────────── Motyw ciemny różni się od jasnego TYLKO siedmioma wartościami. Kafelki zostają kremowe — to zamierzone i dobrze wygląda. Zmienia się tło strony i to, co leży tekstem bezpośrednio na nim. ── DLACZEGO SĄ TOKENY "-tlo" ────────────────────────────────────────────── --ink to tekst W KAFELKU, --ink-tlo to tekst POZA kafelkiem. W jasnym motywie mają tę samą wartość, bo tło strony i karty są prawie takie same. W ciemnym MUSZĄ się różnić: kafelek jest kremowy, tło strony zielone. Mylenie ich to najczęstsza przyczyna nieczytelnego tekstu. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── KREM — motyw jasny ── */ --krem-paper:#F6F2EA; /* tło strony */ --krem-paper2:#EFE9DD; /* tło drugiego planu: pasy, wgłębienia, tagi */ --krem-card:#FFFEFA; /* tło kafelka/karty */ --krem-ink:#17251E; /* tekst główny W KAFELKU */ --krem-soft:#6C7269; /* tekst drugorzędny W KAFELKU */ --krem-ink-tlo:#17251E; /* tekst główny POZA kafelkiem */ --krem-soft-tlo:#6C7269; /* tekst drugorzędny POZA kafelkiem */ --krem-line:#E4DCCB; /* ramki, kreski, separatory */ --krem-gold:#7D6335; /* akcent złoty W KAFELKU (przyciemnione 2026-08-17: #A9884E dawało 3.29:1) */ --krem-gold-tlo:#7D6335; /* akcent złoty POZA kafelkiem (było #A9884E = 2.98:1, teraz 5.07:1) */ --krem-gold-jasne:#D9C08A; /* jaśniejsze złoto: obramowanie w animacji, gradienty */ --krem-zielen:#1E3A2F; /* ciemna zieleń marki */ --krem-btn-bg:#14271F; /* główne CTA — tło */ --krem-btn-fg:#F6F2EA; /* główne CTA — napis */ --krem-chip-bg:#1E3A2F; /* wybrana opcja/pigułka — tło */ --krem-chip-tx:#F6F2EA; /* wybrana opcja/pigułka — napis */ --krem-kontrolka:#1E3A2F; /* accent-color checkboxów i radio */ /* Przełącznik PL/ENG — leży w nawigacji, czyli NA TLE strony, dlatego ma własne tokeny zamiast --paper2/--btn-bg (te są kremowe także w Butelce). */ --krem-prze-tlo:#EFE9DD; /* tło całego przełącznika */ --krem-prze-wsk:#14271F; /* pigułka pod aktywnym językiem */ --krem-prze-akt:#F6F2EA; /* napis aktywnego języka */ /* Pigułkowy przycisk w nawigacji („Moje Olfaktorium" / „Home") — wraca na 9 stronach. W Kremie sama ramka bez wypełnienia, w Butelce potrzebuje tła, żeby odciąć się od zieleni. Tekst bierze --ink-tlo, bo przycisk leży na tle strony. */ --krem-nav-btn:transparent; --krem-nav-pelny:#14271F; /* wariant wypełniony tego przycisku (strona startowa) */ --krem-opcje-tlo:transparent; /* przycisk „opcje zaawansowane" — w Kremie sama ramka */ /* Chipsy filtra puli losowania: nasycone wypełnienie z białym napisem. Leżą na tle strony, więc w Butelce muszą być jaśniejsze, żeby odciąć się od zieleni. */ --krem-chipf-tak:#3B6D11; --krem-chipf-nie:#B44A30; /* Plakietka zgodnosci z DNA: w Kremie przezroczysta zlota mgielka na tle strony, w Butelce musi byc krycie, zeby ciemny tekst mial na czym usiasc. */ --krem-zgod-tlo:color-mix(in srgb, var(--gold) 15%, transparent); --krem-tor-tlo:#EFE9DD; /* tor paska akordow — lezy na tle strony */ --krem-zle:#A8443C; /* błąd W KAFELKU */ --krem-zle-tlo:#A8443C; /* błąd POZA kafelkiem */ --krem-pkt-bg:#EAF3DE; /* tag „ok" — tło */ --krem-pkt-tx:#3B6D11; /* tag „ok" — napis */ --krem-uwaga-bg:#FAEEDA; /* tag ostrzeżenia — tło */ --krem-uwaga-tx:#854F0B; /* tag ostrzeżenia — napis */ --krem-info-bg:#EEEDFE; /* tag informacyjny — tło */ --krem-info-tx:#534AB7; /* tag informacyjny — napis */ --krem-neutr-bg:#F1EFE8; /* tag neutralny — tło */ --krem-neutr-tx:#5F5E5A; /* tag neutralny — napis */ /* Cień pod listą podpowiedzi wyszukiwarki. Nie jest kolorem, ale zmienia się z motywem — na ciemnym tle musi być głębszy, żeby w ogóle było go widać. */ --krem-cien:0 12px 30px rgba(0,0,0,.10); --krem-r-kwiatowe:#C4577F; --krem-r-drzewne:#7D8A55; --krem-r-korzenne:#B44A30; --krem-r-slodkie:#B37A38; --krem-r-owocowe:#CC5C6E; --krem-r-swieze:#3F9B8E; --krem-r-zmyslowe:#8264A0; --krem-r-ambrowe:#C06A2B; /* ── BUTELKA — motyw ciemny. Tylko to, co różni się od Kremu. Reszta dociąga się z --krem-* przez fallback w mapowaniu niżej. ── */ --butelka-paper:#1E3A2F; /* zieleń butelkowa zamiast kremu */ --butelka-ink-tlo:#F3EFE4; /* 10.7:1 na zieleni */ --butelka-soft-tlo:#B7C4BB; /* 6.8:1 — wyraźnie ciszej, nadal czytelnie */ --butelka-gold-tlo:#C5A572; /* 5.3:1 — jaśniejsze złoto, bo ciemne dawało 3.7:1 */ --butelka-chip-bg:#A9884E; /* na zieleni zieleń nie zadziała, więc złoto */ --butelka-chip-tx:#14271F; --butelka-kontrolka:#A9884E; --butelka-zle-tlo:#E0968E; /* ciemna czerwień na zieleni miała 2.1:1 */ --butelka-prze-tlo:#1E3A2F; /* przełącznik zlewa się z tłem nawigacji */ --butelka-prze-wsk:#12241C; /* pigułka ciemniejsza od tła, nie jaśniejsza */ --butelka-prze-akt:#F3EFE4; --butelka-nav-btn:#25473A; /* jaśniejsza zieleń niż tło strony */ --butelka-nav-pelny:#25473A; /* w Butelce oba warianty zlewają się w jeden */ /* Na zieleni sama ramka ginie, więc przycisk dostaje jasne wypełnienie. Tekst zostaje przy --ink (ciemny), bo tło jest jasne w obu motywach. */ --butelka-opcje-tlo:color-mix(in srgb, var(--gold) 22%, var(--card)); --butelka-chipf-tak:#4E8A2A; --butelka-chipf-nie:#C85A3E; --butelka-zgod-tlo:color-mix(in srgb, var(--gold) 22%, var(--card)); --butelka-tor-tlo:#12241C; --butelka-cien:0 12px 30px rgba(0,0,0,.34); /* ── MAPOWANIE: domyślnie Krem ── */ --paper:var(--krem-paper); --paper2:var(--krem-paper2); --card:var(--krem-card); --ink:var(--krem-ink); --soft:var(--krem-soft); --ink-tlo:var(--krem-ink-tlo); --soft-tlo:var(--krem-soft-tlo); --line:var(--krem-line); --gold:var(--krem-gold); --gold-tlo:var(--krem-gold-tlo); --gold-jasne:var(--krem-gold-jasne); --zielen:var(--krem-zielen); --btn-bg:var(--krem-btn-bg); --btn-fg:var(--krem-btn-fg); --chip-bg:var(--krem-chip-bg); --chip-tx:var(--krem-chip-tx); --kontrolka:var(--krem-kontrolka); --prze-tlo:var(--krem-prze-tlo); --prze-wsk:var(--krem-prze-wsk); --prze-akt:var(--krem-prze-akt); --nav-btn:var(--krem-nav-btn); --nav-pelny:var(--krem-nav-pelny); --opcje-tlo:var(--krem-opcje-tlo); --chipf-tak:var(--krem-chipf-tak); --chipf-nie:var(--krem-chipf-nie); --zgod-tlo:var(--krem-zgod-tlo); --tor-tlo:var(--krem-tor-tlo); --zle:var(--krem-zle); --zle-tlo:var(--krem-zle-tlo); --pkt-bg:var(--krem-pkt-bg); --pkt-tx:var(--krem-pkt-tx); --uwaga-bg:var(--krem-uwaga-bg); --uwaga-tx:var(--krem-uwaga-tx); --info-bg:var(--krem-info-bg); --info-tx:var(--krem-info-tx); --neutr-bg:var(--krem-neutr-bg); --neutr-tx:var(--krem-neutr-tx); --cien:var(--krem-cien); --r-kwiatowe:var(--krem-r-kwiatowe); --r-drzewne:var(--krem-r-drzewne); --r-korzenne:var(--krem-r-korzenne); --r-slodkie:var(--krem-r-slodkie); --r-owocowe:var(--krem-r-owocowe); --r-swieze:var(--krem-r-swieze); --r-zmyslowe:var(--krem-r-zmyslowe); --r-ambrowe:var(--krem-r-ambrowe); /* ── Typografia — wspólna dla wszystkich stylów ── */ --serif:"Cormorant Garamond","Palatino Linotype",Georgia,serif; --disp:var(--serif); --sans:"Jost","Segoe UI",system-ui,sans-serif; --body:"Segoe UI",system-ui,-apple-system,sans-serif; } /* ═══ MOTYW CIEMNY ═══ Dwa bloki z tą samą treścią — to konieczne, nie przeoczenie: pierwszy łapie ustawienie systemowe, drugi ręczny przełącznik na stronie. Gdyby był tylko pierwszy, suwak jasny/ciemny nie działałby u kogoś, kto ma w systemie jasny motyw. Zapis var(--butelka-X, var(--krem-X)) znaczy: weź wartość Butelki, a jeśli jej nie ma — zostaw kremową. Dlatego wyżej wypisane jest tylko to, co się faktycznie różni. */ @media (prefers-color-scheme:dark){ :root:not([data-motyw="light"]){ --paper:var(--butelka-paper, var(--krem-paper)); --paper2:var(--butelka-paper2, var(--krem-paper2)); --card:var(--butelka-card, var(--krem-card)); --ink:var(--butelka-ink, var(--krem-ink)); --soft:var(--butelka-soft, var(--krem-soft)); --ink-tlo:var(--butelka-ink-tlo, var(--krem-ink-tlo)); --soft-tlo:var(--butelka-soft-tlo, var(--krem-soft-tlo)); --line:var(--butelka-line, var(--krem-line)); --gold:var(--butelka-gold, var(--krem-gold)); --gold-tlo:var(--butelka-gold-tlo, var(--krem-gold-tlo)); --zielen:var(--butelka-zielen, var(--krem-zielen)); --btn-bg:var(--butelka-btn-bg, var(--krem-btn-bg)); --btn-fg:var(--butelka-btn-fg, var(--krem-btn-fg)); --chip-bg:var(--butelka-chip-bg, var(--krem-chip-bg)); --chip-tx:var(--butelka-chip-tx, var(--krem-chip-tx)); --kontrolka:var(--butelka-kontrolka, var(--krem-kontrolka)); --prze-tlo:var(--butelka-prze-tlo, var(--krem-prze-tlo)); --prze-wsk:var(--butelka-prze-wsk, var(--krem-prze-wsk)); --prze-akt:var(--butelka-prze-akt, var(--krem-prze-akt)); --nav-btn:var(--butelka-nav-btn, var(--krem-nav-btn)); --nav-pelny:var(--butelka-nav-pelny, var(--krem-nav-pelny)); --opcje-tlo:var(--butelka-opcje-tlo, var(--krem-opcje-tlo)); --chipf-tak:var(--butelka-chipf-tak, var(--krem-chipf-tak)); --chipf-nie:var(--butelka-chipf-nie, var(--krem-chipf-nie)); --zgod-tlo:var(--butelka-zgod-tlo, var(--krem-zgod-tlo)); --tor-tlo:var(--butelka-tor-tlo, var(--krem-tor-tlo)); --gold-jasne:var(--butelka-gold-jasne, var(--krem-gold-jasne)); --zle:var(--butelka-zle, var(--krem-zle)); --zle-tlo:var(--butelka-zle-tlo, var(--krem-zle-tlo)); --pkt-bg:var(--butelka-pkt-bg, var(--krem-pkt-bg)); --pkt-tx:var(--butelka-pkt-tx, var(--krem-pkt-tx)); --uwaga-bg:var(--butelka-uwaga-bg, var(--krem-uwaga-bg)); --uwaga-tx:var(--butelka-uwaga-tx, var(--krem-uwaga-tx)); --info-bg:var(--butelka-info-bg, var(--krem-info-bg)); --info-tx:var(--butelka-info-tx, var(--krem-info-tx)); --neutr-bg:var(--butelka-neutr-bg, var(--krem-neutr-bg)); --neutr-tx:var(--butelka-neutr-tx, var(--krem-neutr-tx)); --cien:var(--butelka-cien, var(--krem-cien)); --r-kwiatowe:var(--butelka-r-kwiatowe, var(--krem-r-kwiatowe)); --r-drzewne:var(--butelka-r-drzewne, var(--krem-r-drzewne)); --r-korzenne:var(--butelka-r-korzenne, var(--krem-r-korzenne)); --r-slodkie:var(--butelka-r-slodkie, var(--krem-r-slodkie)); --r-owocowe:var(--butelka-r-owocowe, var(--krem-r-owocowe)); --r-swieze:var(--butelka-r-swieze, var(--krem-r-swieze)); --r-zmyslowe:var(--butelka-r-zmyslowe, var(--krem-r-zmyslowe)); --r-ambrowe:var(--butelka-r-ambrowe, var(--krem-r-ambrowe)); } } :root[data-motyw="dark"]{ --paper:var(--butelka-paper, var(--krem-paper)); --paper2:var(--butelka-paper2, var(--krem-paper2)); --card:var(--butelka-card, var(--krem-card)); --ink:var(--butelka-ink, var(--krem-ink)); --soft:var(--butelka-soft, var(--krem-soft)); --ink-tlo:var(--butelka-ink-tlo, var(--krem-ink-tlo)); --soft-tlo:var(--butelka-soft-tlo, var(--krem-soft-tlo)); --line:var(--butelka-line, var(--krem-line)); --gold:var(--butelka-gold, var(--krem-gold)); --gold-tlo:var(--butelka-gold-tlo, var(--krem-gold-tlo)); --zielen:var(--butelka-zielen, var(--krem-zielen)); --btn-bg:var(--butelka-btn-bg, var(--krem-btn-bg)); --btn-fg:var(--butelka-btn-fg, var(--krem-btn-fg)); --chip-bg:var(--butelka-chip-bg, var(--krem-chip-bg)); --chip-tx:var(--butelka-chip-tx, var(--krem-chip-tx)); --kontrolka:var(--butelka-kontrolka, var(--krem-kontrolka)); --prze-tlo:var(--butelka-prze-tlo, var(--krem-prze-tlo)); --prze-wsk:var(--butelka-prze-wsk, var(--krem-prze-wsk)); --prze-akt:var(--butelka-prze-akt, var(--krem-prze-akt)); --nav-btn:var(--butelka-nav-btn, var(--krem-nav-btn)); --nav-pelny:var(--butelka-nav-pelny, var(--krem-nav-pelny)); --opcje-tlo:var(--butelka-opcje-tlo, var(--krem-opcje-tlo)); --chipf-tak:var(--butelka-chipf-tak, var(--krem-chipf-tak)); --chipf-nie:var(--butelka-chipf-nie, var(--krem-chipf-nie)); --zgod-tlo:var(--butelka-zgod-tlo, var(--krem-zgod-tlo)); --tor-tlo:var(--butelka-tor-tlo, var(--krem-tor-tlo)); --gold-jasne:var(--butelka-gold-jasne, var(--krem-gold-jasne)); --zle:var(--butelka-zle, var(--krem-zle)); --zle-tlo:var(--butelka-zle-tlo, var(--krem-zle-tlo)); --pkt-bg:var(--butelka-pkt-bg, var(--krem-pkt-bg)); --pkt-tx:var(--butelka-pkt-tx, var(--krem-pkt-tx)); --uwaga-bg:var(--butelka-uwaga-bg, var(--krem-uwaga-bg)); --uwaga-tx:var(--butelka-uwaga-tx, var(--krem-uwaga-tx)); --info-bg:var(--butelka-info-bg, var(--krem-info-bg)); --info-tx:var(--butelka-info-tx, var(--krem-info-tx)); --neutr-bg:var(--butelka-neutr-bg, var(--krem-neutr-bg)); --neutr-tx:var(--butelka-neutr-tx, var(--krem-neutr-tx)); --cien:var(--butelka-cien, var(--krem-cien)); --r-kwiatowe:var(--butelka-r-kwiatowe, var(--krem-r-kwiatowe)); --r-drzewne:var(--butelka-r-drzewne, var(--krem-r-drzewne)); --r-korzenne:var(--butelka-r-korzenne, var(--krem-r-korzenne)); --r-slodkie:var(--butelka-r-slodkie, var(--krem-r-slodkie)); --r-owocowe:var(--butelka-r-owocowe, var(--krem-r-owocowe)); --r-swieze:var(--butelka-r-swieze, var(--krem-r-swieze)); --r-zmyslowe:var(--butelka-r-zmyslowe, var(--krem-r-zmyslowe)); --r-ambrowe:var(--butelka-r-ambrowe, var(--krem-r-ambrowe)); }