/* Wspólna warstwa motywu dla całej platformy. * * PO CO. Strony powstają z pięćdziesięciu generatorów i każdy niósł własną paletę — * 98 miejsc z własnym `:root`. Wyszły z tego dwie różne linie kolorystyczne: ciepła * granatowo-złota na stronach publicznych i chłodna szaro-niebieska na diecezjalnych. * Ten plik ustawia JEDNĄ paletę i przekłada na nią wszystkie dotychczasowe nazwy * zmiennych, więc strony nie muszą być przepisywane, a mimo to wyglądają jak rodzeństwo. * * JAK TO DZIAŁA. Plik jest wczytywany jako ostatni w , więc przy równej sile * selektora wygrywa z paletą wpisaną w stronę. Nazwy dotychczasowe (--navy, --gold, * --brand, --surface…) nie znikają — wskazują na wspólne barwy. * * TRZY UKŁADY: jasny, ciemny i telefon. Jasny i ciemny to barwy; telefon to szerokość — * strona składa się w jedną kolumnę i dostaje większe pola do kliknięcia, niezależnie * od tego, na czym jest oglądana. Wybór trzyma się w przeglądarce (motyw.js). */ /* ── barwy wspólne: motyw jasny ─────────────────────────────────────────────── */ :root, :root[data-motyw="jasny"], :root[data-theme="light"] { /* ── TŁO: JASNY BŁĘKIT, NIE KOŚĆ SŁONIOWA ───────────────────────────────── * Zmiana z 27.08.2026, polecenie ks. Andrzeja: „więcej żółtego, a nie * granatowego przy KSM-owskim", „więcej niebieskiego jasnego". Ciepła kość * słoniowa ciągnęła całą platformę w stronę pergaminu; żółć Pantone 116 na * niej gasła, bo obie barwy są ciepłe i o zbliżonej jasności. Na chłodnym * błękicie żółć wreszcie prowadzi. * * Barwy sprawdzone rachunkiem przed wpisaniem — nie na oko: * pismo #1a2b45 na tle strony 12,78:1 * pismo drugie #44546f 6,87:1 * pismo słabe #5b6779 5,15:1 (na plansza-2 nadal 4,60:1) * Wszystkie powyżej progu 4,5:1. */ --t-tlo: #eef3fb; /* tło strony — jasny błękit */ --t-plansza: #ffffff; /* karty, tabele, wszystko wyniesione */ --t-plansza-2: #dde7f5; /* drugi poziom: pigułki, nagłówki tabel */ /* Trzy ekrany pisały `var(--t-tlo-2, …)`, a takiej zmiennej nigdy nie było — więc zawsze brały wartość zapasową, kremową. W motywie ciemnym wychodziło z tego białe pismo na kremowym tle, 1,02:1. Alias zamyka tę dziurę. */ --t-tlo-2: var(--t-plansza-2); --t-plansza-3: #cddef2; --t-tekst: #1a2b45; /* Pola formularzy: tło i pismo zawsze z tej samej pary — inaczej przy motywie ciemnym powstaje biały tekst na białym tle. */ --t-pole-tlo: #ffffff; --t-pole-tekst: #1a2b45; --t-pole-brzeg: #c9d9ee; --t-zazn-tlo: #ffcd00; /* Pantone 116 — żółć KSM */ --t-zazn-tekst: #17120a; /* 12,40:1 na żółci — było 10,26:1 na starym złocie */ --t-tekst-2: #44546f; /* Podniesione z #626e80: na jasnoniebieskiej planszy drugiego poziomu stary odcień dawał 4,14:1, czyli poniżej progu. Teraz 4,60:1. */ --t-slaby: #5b6779; /* DWIE GRUBOŚCI KRESKI, BO SŁUŻĄ DO CZEGO INNEGO. * `--t-linia` to obwódka ozdobna: karta i tak odcina się tłem oraz cieniem, * więc kreska tylko domyka kształt. `--t-linia-mocna` obrysowuje rzeczy, * które trzeba ROZPOZNAĆ — pola formularza, przełączniki, granice tabel — * i te muszą mieć 3:1 według WCAG 2.1 (1.4.11). Zrównanie obu zamieniłoby * jasny motyw w siatkę oliwkowych kresek bez pożytku dla czytelności. */ --t-linia: #c9d9ee; /* Stara oliwkowa kreska nie spełniała własnego wymogu: 2,93:1 na tle strony przy wymaganych 3:1 (WCAG 1.4.11). Nowa daje 3,47:1 na tle strony, 3,10:1 na planszy drugiego poziomu i 3,87:1 na bieli. */ --t-linia-mocna: #5f83b8; --t-marka: #0b2242; /* granat KSM — powierzchnia: nagłówki, hero */ --t-marka-2: #12305a; --t-marka-jasna: #2a5da8; --t-akcent-tekst: #1a4a8a; /* marka jako TEKST na jasnym tle */ --t-akcent-tekst-2: #1f66b8; /* Nagłówek pisany granatem. Osobna zmienna, bo granat nagłówka ma w motywie * jasnym zostać dokładnie taki, jaki był (#0b2242), a w ciemnym rozjaśnić się * do czytelnego błękitu. `--t-akcent-tekst` się do tego nie nadaje: służy * odnośnikom i jest w motywie jasnym wyraźnie jaśniejszy od granatu. */ --t-naglowek: #0b2242; /* Żółć Pantone 116 zamiast dawnego złota #f7b500. Jedno wystąpienie, nie dwa: wcześniej `--t-akcent` deklarowano tu i wyżej (#b8860b), więc górny wpis był martwy i mylił każdego, kto go czytał. */ --t-akcent: #ffcd00; /* żółć KSM, Pantone 116 */ --t-akcent-2: #ffe066; --t-ok: #1c7a4a; --t-ok-tlo: #e6f4ec; --t-uwaga: #8a5c00; /* 4,5:1 na --t-uwaga-tlo */ --t-uwaga-tlo: #fdf3dd; --t-zle: #b3261e; --t-zle-tlo: #fdeceb; --t-cien: 0 1px 2px rgba(11,34,66,.06), 0 8px 24px rgba(11,34,66,.07); --t-cien-mocny: 0 10px 34px rgba(11,34,66,.16); --t-promien: 14px; --t-promien-maly: 9px; color-scheme: light; } /* ── motyw ciemny ───────────────────────────────────────────────────────────── */ /* Nie jest to jasny motyw z odwróconą jasnością. Granat zostaje rodziną barw, ale * marka musi rozjaśnieć — granat #0b2242 na ciemnym tle byłby nieczytelny. */ /* ── DWIE NAZWY TEGO SAMEGO WYBORU ──────────────────────────────────────────── * Platforma ma dwa niezależne mechanizmy motywu: `motyw.js` ustawia na * atrybut `data-motyw` (jasny|ciemny|auto), a wstrzykiwany przez serwer * STYL_INIT ustawia `data-theme` (light|dark) z ciasteczka `ksm_styl`. * * Do 27.08.2026 ten plik słuchał tylko pierwszego. Skutek był taki, że na * ekranie, który ma własne barwy pod `data-theme="dark"` i NIE wciąga * `motyw.js` — na przykład w podręczniku — tło robiło się ciemne, a barwy * z tego pliku zostawały jasne. Wychodziło pismo #44546f na tle #0d1829, * czyli 2,33:1 przy progu 4,5:1: cytat z Ewangelii nieczytelny. * * Dlatego oba atrybuty prowadzą do tych samych barw. Jeden wybór, dwie nazwy. */ :root[data-motyw="ciemny"], :root[data-theme="dark"] { --t-tlo: #151d2b; --t-plansza: #1f2a3d; --t-plansza-2: #2a374e; --t-tlo-2: #2a374e; --t-plansza-3: #35435d; --t-tekst: #f2f5fa; --t-tekst-2: #cfd8e6; --t-pole-tlo: #16202e; --t-pole-tekst: #f2f5fa; --t-pole-brzeg: #2c3a4e; --t-zazn-tlo: #ffd75e; --t-zazn-tekst: #12305a; --t-slaby: #9aa5b8; --t-linia: rgba(255,255,255,.22); --t-linia-mocna: rgba(255,255,255,.55); /* Powierzchnia marki zostaje ciemna także w motywie ciemnym. Rozjaśnienie granatu zamieniało pasek nagłówka w jasnoniebieską wstęgę z białym tekstem — dokładnie to, czego motyw ciemny ma nie robić. Rozjaśnia się natomiast marka użyta jako TEKST, bo granat na ciemnym tle jest nieczytelny. */ --t-marka: #16233a; --t-marka-2: #1d2d49; --t-marka-jasna: #8fbcf5; --t-naglowek: #d8e6fa; --t-akcent-tekst: #8fbcf5; --t-akcent-tekst-2: #b3d3fb; --t-akcent: #ffc933; --t-akcent-2: #ffdf85; --t-ok: #6ee7a8; --t-ok-tlo: rgba(110,231,168,.12); --t-uwaga: #ffd27a; --t-uwaga-tlo: rgba(255,210,122,.12); --t-zle: #ff9d92; --t-zle-tlo: rgba(255,157,146,.12); --t-cien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34); --t-cien-mocny: 0 10px 34px rgba(0,0,0,.5); color-scheme: dark; } /* ── WERSJA PATRIOTYCZNA — BIAŁO-CZERWONA ──────────────────────────────────── * * Ks. Andrzej, 29.08.2026: „możesz zrobić trzy wersje kolorystyczne: ciemne, * jasne i biało-czerwone" oraz „patriotyczny biało-czerwony, ale taki * ostrzejszy" — i, o całej platformie: „wszystkie: jasny, ciemny * i patriotyczny". * * PO CO. Są dni, w których strona ma mówić o Ojczyźnie, zanim ktokolwiek * przeczyta pierwsze zdanie: Święto Niepodległości i start „Polaka z Sercem" * 11 listopada, uroczystość Chrystusa Króla, rocznice narodowe. * * OSTRO, NIE DELIKATNIE. Biel czysta, bez ciepła. Czerwień rozdzielona * na dwie: #d81e34 na płaszczyznach i #b3081f na tekście — ta druga daje * na bieli 7,4:1 zamiast 4,6:1, więc zdanie napisane marką jest naprawdę * czytelne, a nie „jeszcze się mieści". Linie mocniejsze niż w wersji jasnej, * bo delikatny obrys w tych barwach ginie. * * ŻÓŁĆ ZOSTAJE ŻÓŁCIĄ. Zaznaczenia i akcenty biorą dalej żółć z godła KSM — * to jest barwa Stowarzyszenia i nie ustępuje przed barwami flagi. Trzy barwy * na ekranie to komplet: biel, czerwień, żółć tarczy. */ :root[data-motyw="patriotyczny"] { --t-tlo: #ffffff; --t-plansza: #ffffff; --t-plansza-2: #fdeef0; --t-tlo-2: #fdeef0; --t-plansza-3: #f9dde1; --t-tekst: #0d0d0d; --t-tekst-2: #3a3a3a; --t-pole-tlo: #ffffff; --t-pole-tekst: #0d0d0d; --t-pole-brzeg: #e3aab3; --t-zazn-tlo: #ffcd00; --t-zazn-tekst: #17120a; --t-slaby: #4a4a4a; --t-linia: #e8b5bd; --t-linia-mocna: #b3081f; --t-marka: #d81e34; /* powierzchnia: nagłówki, pasy, hero */ --t-marka-2: #b3081f; --t-marka-jasna: #ff6b7d; --t-naglowek: #b3081f; --t-akcent-tekst: #b3081f; /* marka jako TEKST — 7,4:1 na bieli */ --t-akcent-tekst-2: #8f0518; --t-akcent: #ffcd00; --t-akcent-2: #ffe066; --t-ok: #14683d; --t-ok-tlo: #e4f3ea; --t-uwaga: #8a5c00; --t-uwaga-tlo: #fdf3dd; --t-zle: #b3081f; --t-zle-tlo: #fdeceb; --t-cien: 0 1px 2px rgba(179,8,31,.1), 0 8px 24px rgba(179,8,31,.12); --t-cien-mocny: 0 10px 34px rgba(179,8,31,.22); color-scheme: light; } /* Cienki pas flagi u góry strony — znak, że to ten dzień, a nie inny. Cztery piksele: widać, a nie przeszkadza. */ :root[data-motyw="patriotyczny"] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9998; background: linear-gradient(to bottom, #fff 0 50%, #d81e34 50% 100%); box-shadow: 0 1px 0 rgba(179,8,31,.35); pointer-events: none; } /* Gdy nikt nic nie wybrał, idziemy za ustawieniem systemu. */ @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]):not([data-motyw="ciemny"]):not([data-theme="light"]):not([data-theme="dark"]) { --t-tlo: #151d2b; --t-plansza: #1f2a3d; --t-plansza-2: #2a374e; --t-tlo-2: #2a374e; --t-plansza-3: #35435d; --t-tekst: #f2f5fa; --t-tekst-2: #cfd8e6; --t-pole-tlo: #16202e; --t-pole-tekst: #f2f5fa; --t-pole-brzeg: #2c3a4e; --t-zazn-tlo: #ffd75e; --t-zazn-tekst: #12305a; --t-slaby: #9aa5b8; --t-linia: rgba(255,255,255,.22); --t-linia-mocna: rgba(255,255,255,.55); --t-marka: #16233a; --t-marka-2: #1d2d49; --t-marka-jasna: #8fbcf5; --t-naglowek: #d8e6fa; --t-akcent-tekst: #8fbcf5; --t-akcent-tekst-2: #b3d3fb; --t-akcent: #ffc933; --t-akcent-2: #ffdf85; --t-ok: #6ee7a8; --t-ok-tlo: rgba(110,231,168,.12); --t-uwaga: #ffd27a; --t-uwaga-tlo: rgba(255,210,122,.12); --t-zle: #ff9d92; --t-zle-tlo: rgba(255,157,146,.12); --t-cien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34); --t-cien-mocny: 0 10px 34px rgba(0,0,0,.5); color-scheme: dark; } } /* ── przekład dotychczasowych nazw ──────────────────────────────────────────── */ /* Tu spinają się obie rodziny kolorów. Strona pisana w nazwach „navy/gold/cream" * i strona pisana w „brand/surface/plane" dostają te same barwy. Żaden generator nie * musi być z tego powodu ruszany. */ /* SIŁA SELEKTORA CELOWO ZEROWA — `:where()`. * * Ten blok jest siecią bezpieczeństwa dla stron, które własnej palety ciemnej * nie mają. Dopóki stało tu `:root, :root[data-motyw]`, wygrywał ze WSZYSTKIM, * co strona ma u siebie — a 121 stron paneli ma własny motyw ciemny pod * `[data-theme="dark"]`, z poprawnie rozjaśnionym `--navy:#c9d6ec`. * Warstwa zgodności przywracała im ciemny granat jako kolor tekstu, więc * nagłówki wychodziły ciemnym po ciemnym: zmierzone 1,03:1 przy wymaganych 4,5:1. * * To była właściwa przyczyna zgłoszenia „tryb nocny nieczytelny" — nie paleta, * tylko to, że wspólna warstwa odbierała stronom ich własne barwy nocne. * * `:where()` nie wnosi siły selektora, więc każda reguła strony wygrywa, * a tam, gdzie strona nic nie mówi, zostaje wspólna paleta. */ :where(:root) { --navy: var(--t-marka); --navy2: var(--t-marka-2); --gold: var(--t-akcent); --gold2: var(--t-akcent-2); --zloto: var(--t-akcent); --cream: var(--t-tlo); --tlo: var(--t-tlo); --plane: var(--t-tlo); --ink: var(--t-tekst); --tekst: var(--t-tekst); --ink-2: var(--t-tekst-2); --muted: var(--t-slaby); --line: var(--t-linia); --linia: var(--t-linia); --card: var(--t-plansza); --surface: var(--t-plansza); --chip: var(--t-plansza-2); --surface-2: var(--t-plansza-2); --surface-3: var(--t-plansza-3); /* Rozróżnienie, na którym wykładała się pierwsza wersja: te same nazwy służyły raz za tło (pasek, hero), raz za kolor tekstu (nagłówki, odnośniki). Tło ma zostać ciemne zawsze, tekst musi się odwracać razem z motywem. */ --brand: var(--t-akcent-tekst); --brand-2: var(--t-akcent-tekst-2); --s1: var(--t-akcent-tekst-2); --s2: var(--t-akcent-tekst); --s3: var(--t-marka); --hero: var(--t-marka); --ok: var(--t-ok); --warn: var(--t-uwaga); --no: var(--t-zle); --zle: var(--t-zle); --zle-tlo: var(--t-zle-tlo); /* Nazwy używane przez ekrany dopisane w sierpniu 2026 — „moje konto", wnioski o zwrot, skrzynki instytucji, informator, współpraca z asystentami. Bez nich wchodziły ich własne wartości zapasowe, zawsze jasne, także w motywie ciemnym. */ --papier: var(--t-plansza); --pole: var(--t-pole-tlo); --brzeg: var(--t-linia); --glebia: var(--t-tekst-2); --alarm: var(--t-zle); --zgoda: var(--t-ok); } /* ── ratunek dla stron pisanych twardymi kolorami ───────────────────────────── */ /* Część stron powstała, zanim istniały zmienne, i ma wpisane wprost `background:#fff` * albo `color:#0b2242`. W motywie ciemnym taka karta świeciłaby bielą. Poniżej sieć * bezpieczeństwa: najczęstsze twarde barwy przestawiamy na wspólne. Nie zastąpi to * porządnego przepisania stylów, ale sprawia, że ciemny motyw jest używalny wszędzie, * a nie tylko tam, gdzie ktoś o nim pomyślał. */ :root[data-motyw="ciemny"] body, :root[data-theme="dark"] body { background: var(--t-tlo); color: var(--t-tekst); } :root[data-motyw="ciemny"] [style*="background:#fff"], :root[data-theme="dark"] [style*="background:#fff"], :root[data-motyw="ciemny"] [style*="background:#ffffff"], :root[data-theme="dark"] [style*="background:#ffffff"], :root[data-motyw="ciemny"] [style*="background: #fff"], :root[data-theme="dark"] [style*="background: #fff"] { background: var(--t-plansza) !important; } /* PARY KOLORÓW SIĘ NIE ROZRYWA. * * Ta reguła rozjaśnia granatowy tekst wpisany w atrybut `style`, bo w ciemnym * motywie stałby ciemny na ciemnym. Ale gdy ktoś ustawił w tym samym atrybucie * TAKŻE tło, para jest przemyślana — granat na żółtym przycisku, granat na * złotym kaflu — i podmiana samego koloru robi z niej biel na żółtym. * * Wyszło 28.08.2026, gdy ciemny motyw zaczął w ogóle działać: pasek „Zobacz * i załatw" na KAŻDYM ekranie panelu miał kontrast 1,19 — tekst niewidoczny. * Wcześniej nikt tego nie zobaczył, bo ciemny motyw nie włączał się nigdy. * * Dlatego: podmieniamy kolor tylko tam, gdzie autor NIE ustawił własnego tła. */ :root[data-motyw="ciemny"] [style*="color:#0b2242"]:not([style*="background"]), :root[data-theme="dark"] [style*="color:#0b2242"]:not([style*="background"]), :root[data-motyw="ciemny"] [style*="color:#1a2b45"]:not([style*="background"]), :root[data-theme="dark"] [style*="color:#1a2b45"]:not([style*="background"]) { color: var(--t-tekst) !important; } /* BIEL JEST WYJĄTKIEM OD WYJĄTKU. * * Reguła wyżej zostawia granat w spokoju, gdy autor ustawił własne tło — bo * para „granat na żółtym" jest przemyślana. Ale tło BIAŁE zostaje w ciemnym * motywie podmienione na ciemną planszę regułą kilka linijek wyżej — i wtedy * granatowy tekst zostaje sam na ciemnym. Tu więc podmieniamy oba: skoro tło * przestało być białe, kolor też musi się zmienić. * * Dotyczy m.in. przycisku „Mój profil" w stopce każdego ekranu panelu. */ :root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background:#fff"], :root[data-theme="dark"] [style*="color:#0b2242"][style*="background:#fff"], :root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background:#ffffff"], :root[data-theme="dark"] [style*="color:#0b2242"][style*="background:#ffffff"], :root[data-motyw="ciemny"] [style*="color:#0b2242"][style*="background: #fff"], :root[data-theme="dark"] [style*="color:#0b2242"][style*="background: #fff"], :root[data-motyw="ciemny"] [style*="color:#1a2b45"][style*="background:#fff"], :root[data-theme="dark"] [style*="color:#1a2b45"][style*="background:#fff"] { color: var(--t-tekst) !important; } /* ── styl telefonu ─────────────────────────────────────────────────────────── */ /* Zasada: telefon to NIE „wszystko w jednej kolumnie". Rozłożenie kilkunastu ikon * jedna pod drugą robi z krótkiej listy kilometrowe przewijanie i gubi rytm strony. * Zwężamy więc kafelki i pozwalamy im się układać po kilka w rzędzie, a jedną kolumnę * zostawiamy wyłącznie tam, gdzie jest tekst do czytania. * * Te same reguły działają w dwóch sytuacjach: gdy ktoś wybierze układ telefonu * przyciskiem oraz gdy po prostu wejdzie z wąskiego ekranu. Jedno źródło zachowania, * więc podgląd pokazuje to, co widać naprawdę na telefonie. */ :root[data-uklad="telefon"] body { max-width: 480px; margin: 0 auto; box-shadow: var(--t-cien-mocny); background: var(--t-tlo); } /* Ikony i kafle: gęsto, po kilka w rzędzie. */ :root[data-uklad="telefon"] .ikonki-siatka, :root[data-uklad="telefon"] .kafle, :root[data-uklad="telefon"] .kpi3 { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important; gap: 8px !important; } /* Liczby i wskaźniki: po dwa w rzędzie — czytelne, a nie rozwleczone. */ :root[data-uklad="telefon"] .liczby, :root[data-uklad="telefon"] .kpi, :root[data-uklad="telefon"] .poziomy { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 10px !important; } /* Karty z treścią: jedna, ewentualnie dwie — tu naprawdę trzeba czytać. */ :root[data-uklad="telefon"] .siatka4, :root[data-uklad="telefon"] .mods, :root[data-uklad="telefon"] .mapa-box { grid-template-columns: 1fr !important; gap: 12px !important; } :root[data-uklad="telefon"] .btn, :root[data-uklad="telefon"] .pigulki button, :root[data-uklad="telefon"] .mapa-narzedzia button { min-height: 44px; /* dolna granica celu dotykowego */ font-size: 15px; } :root[data-uklad="telefon"] table { font-size: 13px; } :root[data-uklad="telefon"] .tabela-wrap, :root[data-uklad="telefon"] .nav3 { overflow-x: auto; } /* Nagłówek na telefonie zawija się zamiast ściskać podpisy do jednej litery. */ :root[data-uklad="telefon"] .top { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; } :root[data-uklad="telefon"] .top > div:last-child { flex-wrap: wrap; gap: 8px; } /* To samo na wąskim ekranie, bez wybierania czegokolwiek. */ @media (max-width: 640px) { .ikonki-siatka, .kafle, .kpi3 { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; } .liczby, .kpi, .poziomy { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .siatka4, .mods, .mapa-box { grid-template-columns: 1fr; } .btn, .pigulki button, .mapa-narzedzia button { min-height: 44px; } .top { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; } .mapa-narzedzia span:last-child { display: none; } /* podpowiedź o kółku myszy */ } /* ── przełącznik motywu ─────────────────────────────────────────────────────── */ .motyw-przel { position: fixed; right: 14px; bottom: 14px; z-index: 70; display: flex; gap: 3px; padding: 4px; background: var(--t-plansza); border: 1px solid var(--t-linia); border-radius: 100px; box-shadow: var(--t-cien); } .motyw-przel button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 100px; background: transparent; color: var(--t-tekst-2); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; } .motyw-przel button:hover { background: var(--t-plansza-2); } .motyw-przel button[aria-pressed="true"] { background: var(--t-marka); color: var(--t-plansza); } :root[data-motyw="ciemny"] .motyw-przel button[aria-pressed="true"] { color: var(--t-tekst); } .motyw-przel button:focus-visible { outline: 2px solid var(--t-akcent); outline-offset: 2px; } @media print { .motyw-przel { display: none } } /* ── mapy w motywie ciemnym ─────────────────────────────────────────────────── */ /* Ramka mapy dostaje tło z barwy regionu wstawianej stylem wprost w element, więc * w motywie ciemnym zostawała jasną płytą. Podkłady map też są z natury jasne — * przygaszamy je, żeby nie świeciły jak lampa pośrodku ciemnej strony. */ :root[data-motyw="ciemny"] .mapa-svg-wrap { background: radial-gradient(120% 90% at 18% 8%, color-mix(in srgb, var(--reg-akcent) 20%, transparent), transparent 62%), var(--t-plansza); } :root[data-motyw="ciemny"] .mapa-svg-wrap svg .pk { filter: saturate(.8) brightness(.68); } :root[data-motyw="ciemny"] .reg-plakietka { background: rgba(22,30,45,.86); } :root[data-motyw="ciemny"] .mapa-diec .obraz { background: var(--t-plansza-2); } :root[data-motyw="ciemny"] .mapa-diec figcaption { background: var(--t-plansza); } /* Pasy „Polak z Sercem" i „Modlitwa" mają własny arkusz: wspolne/pasy.css. * Dociąga go pasy.js — ten sam skrypt, który wstawia ich znaczniki. */ /* ── zakładki poziomów (Kraj · Diecezja · Parafia · KSM · Wspólnoty) ─────────── */ /* Ten sam pasek jest na trzech różnych hostach, budowany przez trzy różne generatory. * Wygląd trzymamy tutaj, żeby nie rozjechał się przy najbliższej zmianie w jednym * z nich — nawigacja, która wygląda inaczej na każdym poziomie, sprawia wrażenie * trzech osobnych serwisów zamiast jednego. */ .nav3{display:flex;gap:6px;overflow-x:auto;padding:2px;align-items:center} .nav3 a{flex:none;color:#fff;text-decoration:none;font-size:12.5px;font-weight:700; padding:8px 15px;border-radius:100px;background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);white-space:nowrap;line-height:1} .nav3 a:hover{background:rgba(255,255,255,.24)} .nav3 a.on{background:#fff;color:var(--t-marka,#0b2242);border-color:#fff} .nav3 a.ikonowy{display:inline-flex;align-items:center;gap:6px} .nav3 a.ikonowy img{border-radius:3px;display:block} @media(max-width:640px){ .nav3 a.ikonowy span:last-child{display:none} .nav3 a.ikonowy{padding-left:11px;padding-right:11px} } /* Przełącznik motywu jest przyklejony do prawego dolnego rogu okna. Na krótkich * stronach potrafił przykryć ostatni przycisk — stąd zapas na dole. Ustawiony * zmienną, żeby strona z własną stopką mogła go sobie wyzerować. */ body{padding-bottom:var(--zapas-na-przelacznik,64px)} @media print{body{padding-bottom:0}} /* ── obrysy, które trzeba rozpoznać ─────────────────────────────────────────── */ /* Pole, w które się wpisuje, musi być widoczne jako pole — WCAG 2.1, 1.4.11 * (kontrast elementów interfejsu, 3:1). Obwódki ozdobne zostają subtelne. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea, .pole, table th, table td { border-color: var(--t-linia-mocna, #9c8d6b); } :focus-visible { outline: 3px solid var(--t-akcent, #f7b500); outline-offset: 2px; } /* ── strony bez własnej palety nocnej ───────────────────────────────────────── */ /* `--navy` służy w wygenerowanych stronach 843 razy za KOLOR TEKSTU i tylko * 171 razy za tło. W motywie ciemnym musi więc rozjaśnieć, inaczej nagłówki * znikają. Siła selektora znów zerowa: strona, która ma własne barwy nocne, * dalej rządzi u siebie. */ /* SIŁA SELEKTORA CELOWO WYŻSZA NIŻ `:root` STRONY. * Przy `:where()` (siła zero) wygrywała definicja `:root{--navy:#0b2242}` * wpisana w stronę i granat wracał jako kolor tekstu na ciemnym tle. * Tu chcemy wygrać: wartość, którą podstawiamy, jest jasna, więc jest dobra * także dla stron, które mają własną paletę nocną. */ /* ── znaczki, w których granat jest TŁEM, nie pismem ───────────────────────── * `--navy` w motywie ciemnym rozjaśnia się, bo w 843 miejscach jest kolorem * pisma. Ale w kilkunastu jest TŁEM znaczka (skrót diecezji, poziom struktury) * — i tam rozjaśnienie daje złote pismo na jasnym tle, czyli 1,1:1. * Te znaczki mają zostać ciemne w obu motywach: to małe znaki, a nie płaszczyzny, * więc stała barwa niczego nie psuje, za to zawsze się czyta. * Mierzone: 42 wystąpienia `.dk` na jednej stronie struktury. */ :root[data-motyw="ciemny"] .dk, :root[data-theme="dark"] .dk, :root[data-motyw="ciemny"] .hier .lvl, :root[data-theme="dark"] .hier .lvl { background: #0b2242; color: #ffd75e; } /* Pasek górny stron publicznych ma tę samą przypadłość: tło budowane z `--navy`, które w nocy się rozjaśnia, i złote pismo na nim. Pasek ma zostać granatowy — to powierzchnia marki, a nie tekst. */ :root[data-motyw="ciemny"] .top, :root[data-theme="dark"] .top { background: linear-gradient(180deg, #0b2242, #12305a); color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top { background: linear-gradient(180deg, #0b2242, #12305a); color: #fff; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dk, :root:not([data-theme="light"]) .hier .lvl { background: #0b2242; color: #ffd75e; } :root:not([data-theme="light"]) .hier .lvl.d { background: var(--t-plansza-2); color: var(--t-tekst); } } :root[data-motyw="ciemny"] .hier .lvl.d, :root[data-theme="dark"] .hier .lvl.d { background: var(--t-plansza-2); color: var(--t-tekst); } :root[data-motyw="ciemny"], :root[data-theme="dark"] { --navy: var(--t-naglowek); --navy2: var(--t-naglowek); --ink: var(--t-tekst); --cichy: var(--t-slaby); --karta: var(--t-plansza); --tlo: var(--t-tlo); --chip: var(--t-plansza-2); --linia: var(--t-linia); --ac: var(--t-naglowek); --cream: var(--t-tlo); --card: var(--t-plansza); --surface: var(--t-plansza); --muted: var(--t-slaby); } /* Napis na złocie zostaje ciemny w OBU motywach — złoto jest jasne zawsze. * Biały tekst na złocie daje 2,1:1 i nie spełniał wymogu także w motywie * jasnym; to usterka, która była tam od początku, a wyszła dopiero przy * pomiarze zamówionym przez ks. Mateusza. */ [style*="background:var(--t-akcent"], [style*="background:#f7b500"], [style*="background:#ffc933"], .btn-zloty, .cta-zloty { color: var(--t-marka, #0b2242); } /* ── przyciski pasów: kolor tekstu musi wygrać z regułą strony ─────────────── */ /* Pomiar w przeglądarce pokazał na obu przyciskach 1:1 — biały napis na białym * i biały na złocie. Same reguły `.pzs-cta` / `.modl-cta` są poprawne, ale * strony mają własne reguły dla odnośników wewnątrz pasa, o wyższej sile * selektora, i to one wygrywały. Podnosimy siłę po naszej stronie zamiast * poprawiać to w pięćdziesięciu generatorach. */ .pzs-baner a.pzs-cta, a.pzs-cta { background: #fff; color: #8e1526; } .pzs-baner a.pzs-cta.ghost, a.pzs-cta.ghost { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.62); } .modl-baner a.modl-cta, a.modl-cta { background: var(--t-akcent,#f7b500); color: #0b2242; } /* ── sieć bezpieczeństwa dla jasnych teł wpisanych w atrybut `style` ────────── */ /* Generatory wstawiają część barw wprost w element. W motywie ciemnym taka * płyta zostaje jasna, a tekst na niej dziedziczy jasny kolor — i znika. * Poniżej te barwy, które pomiar wskazał jako realnie występujące. */ :root[data-motyw="ciemny"] [style*="background:#dde7f5"], :root[data-motyw="ciemny"] [style*="background:#f3ecdd"], :root[data-motyw="ciemny"] [style*="background:#eceef2"], :root[data-motyw="ciemny"] [style*="background:#f6f7f9"], :root[data-motyw="ciemny"] [style*="background:#f2f2f7"], :root[data-motyw="ciemny"] [style*="background:#fbf3df"], :root[data-motyw="ciemny"] [style*="background:#fbeecd"], :root[data-motyw="ciemny"] [style*="background:#e0f3e7"], :root[data-motyw="ciemny"] [style*="background:#e4f3e6"], :root[data-motyw="ciemny"] [style*="background:#eef3fb"] { background: var(--t-plansza-2) !important; color: var(--t-tekst); } /* Napis na złocie zostaje ciemny — złoto jest jasne w obu motywach. * Reguła po nazwach klas używanych przez generatory dla odnośnika-przycisku. */ /* ── ostatnie trzy przypadki wskazane pomiarem ─────────────────────────────── */ /* `--obszar-ink` to barwa nagłówka sekcji, ustawiana przy KAŻDEJ sekcji osobno * (każdy obszar ma swój odcień). W motywie ciemnym wszystkie te odcienie są * ciemne, więc nagłówki znikały. Jeden wspólny, jasny odcień czyta się dobrze * i nie odbiera sekcjom rozpoznawalności — tę niesie ikona i tło kafla. */ :root[data-motyw="ciemny"] .obt, :root[data-theme="dark"] .obt { color: var(--t-naglowek); } /* Odnośnik-przycisk na złotym tle: napis ciemny, bo złoto jest jasne zawsze. */ a.g[style*="f7b500"], a.g[style*="var(--t-akcent"], .kafel a.g { color: var(--t-marka, #0b2242) !important; } /* Podpis drugorzędny w stylu systemowym. Przy .60 dawał 3,3:1 na białym, * stąd .78. W motywie ciemnym ta sama wartość jest ciemnoszara na ciemnym — * czyli niewidoczna — więc odwracamy ją razem z motywem. To jest ta sama * pułapka co przy granacie: jedna nazwa, dwa zastosowania, dwa motywy. */ :root, :root[data-motyw] { --label-2: rgba(60,60,67,.78); --label:#000; } :root[data-motyw="ciemny"], :root[data-theme="dark"] { --label: var(--t-tekst); --label-2: rgba(235,238,245,.80); --label-3: rgba(235,238,245,.45); --label-4: rgba(235,238,245,.22); --sep: rgba(255,255,255,.22); --sep-opaque: #3a4763; } /* Klasa `.g` znaczy w różnych stronach co innego: raz złoty przycisk, raz * niebieski, raz zielony. Wcześniejsza wersja tej reguły ustawiała ciemny * napis KAŻDEMU `.g` i przez to zgasiła biały napis na granatowym przycisku * „Formacja / zapisy" — 1:1, napis zniknął zupełnie. Reguła musi więc pytać * o TŁO, a nie o nazwę klasy. */ [style*="background:var(--t-akcent"], [style*="background:#f7b500"], [style*="background:#ffd75e"], [style*="background:#ffc933"] { color: var(--t-marka, #0b2242); } /* ── ciemne sekcje na jasnej stronie ───────────────────────────────────────── */ /* Niektóre panele mają celowo ciemną sekcję („mozliwości platformy") także * w motywie jasnym. Wpisany w nią granatowy nagłówek dawał 1,15:1 — ciemne * po ciemnym. Napisy w takiej sekcji muszą być jasne w OBU motywach. */ [style*="background:#10151f"] b, [style*="background:#10151f"] span, [style*="background:#131a25"] b, [style*="background:#131a25"] span, [style*="background:#161d2a"] b, [style*="background:#161d2a"] span, [style*="background:#1a2333"] b, [style*="background:#1a2333"] span, .sekcja-ciemna b, .sekcja-ciemna span { color: var(--t-tekst, #f2f5fa); } /* Pole „przeciągnij pliki" — podpis pisany barwą akcentu dawał 1,4:1 na * prawie białym tle. Akcent zostaje na obramowaniu, napis dostaje kolor tekstu. */ .drop, .drop * { color: var(--t-tekst-2, #44546f); } .drop { border-color: var(--t-akcent, #f7b500); } /* ── szerokie tabele na wąskim ekranie ─────────────────────────────────────── */ /* Wykaz parafii, wykaz mediów, kompletność danych — wszystkie mają tabele * szersze niż telefon. Do tej pory taka tabela rozpychała CAŁĄ stronę: pojawiał * się poziomy pasek przewijania na dole okna, nagłówek jechał w bok razem * z treścią, a stopka kończyła się w połowie ekranu. Wygląda to na zepsutą * stronę, choć zepsuta jest tylko jedna tabela. * * Tabela przewija się teraz WEWNĄTRZ SIEBIE: zachowuje swoją naturalną * szerokość, ale nie wypycha reszty. `display:block` jest tu konieczne — * element `table` nie przyjmuje `overflow`, bo nie jest zwykłym blokiem. * * Tylko na wąskich ekranach. Na rzutniku i na komputerze tabele mają zostać * dokładnie takie, jakie są — tam mieszczą się bez przewijania. */ @media (max-width: 900px) { table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── pasek nagłówka na wąskim ekranie ──────────────────────────────────────── */ /* `.top` to godło, nazwa i nawigacja w jednym rzędzie bez zawijania. Na telefonie * ta trójka nie mieści się w 390 px, a `.nav3` — choć sam ma przewijanie — nie * może się skurczyć poniżej swojej treści, bo element siatki ma domyślnie * `min-width:auto`. Skutek: pasek wystawał o kilkadziesiąt pikseli i wypychał * całą stronę w bok. * * Nawigacja schodzi więc do własnego wiersza i przewija się w nim poziomo — * zamiast przewijać całą stronę. */ @media (max-width: 700px) { .top { flex-wrap: wrap; } .top .nav3 { min-width: 0; flex: 1 1 100%; margin-left: 0 !important; } /* Prawy blok paska („Zaloguj się", przełącznik motywu) jest odsuwany * marginesem `margin-left:auto`. Po zawinięciu wiersza ten margines spycha go * poza ekran, bo nie ma już czego odsuwać. W wąskim układzie ma stanąć * na początku własnego wiersza. */ .top > div[style*="margin-left:auto"] { margin-left: 0 !important; flex: 1 1 100%; flex-wrap: wrap; } } /* ZAPORA NA PRZYSZŁOŚĆ. Pole, które ma tło z motywu, musi mieć z motywu także kolor pisma. Reguła stoi na końcu arkusza, więc łapie także ekrany, które ustawiają samo tło — a tych było dwadzieścia jeden. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { background-color: var(--t-pole-tlo, #fff); color: var(--t-pole-tekst, var(--t-tekst, #1a2b45)); } /* ZAZNACZENIE MA BYĆ WIDAĆ. Bez tego przeglądarka dobiera kolor sama i przy jasnym piśmie na ciemnym tle zaznaczony fragment bywa nie do odczytania. */ ::selection { background: var(--t-zazn-tlo, #f7b500); color: var(--t-zazn-tekst, #17120a); } ::-moz-selection { background: var(--t-zazn-tlo, #f7b500); color: var(--t-zazn-tekst, #17120a); } /* Pola wyboru: znaczek w barwie platformy, w obu motywach ten sam gest. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--t-akcent, #c8922a); width: 18px; height: 18px; } /* Widoczne wejście klawiaturą — kto nie używa myszy, ma wiedzieć, gdzie jest. */ input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--t-akcent, #c8922a); outline-offset: 2px; } input::placeholder, textarea::placeholder { color: var(--t-tekst-2, #6b7a90); opacity: .75; }