/* ═══ BARWY DZIEŁA — DWA REJESTRY ══════════════════════════════════════════ Ks. Andrzej, 1.09.2026: „stwórz kolorystykę maryjną taką, która będzie wszystkim jasno o tym mówić, że to jest ten kierunek, oraz drugi wizerunek to patriotyczne". ── CO BYŁO ────────────────────────────────────────────────────────────── Strony dzieła stały na granacie nocy (#04101f) i złocie. To jest dobre i zostaje — pielgrzymka nazywa się „Światła na Jasną Górę", więc noc z lampionami niesie znaczenie, nie jest ozdobą. Brakowało natomiast SAMEGO BŁĘKITU. Jedyny błękit na stronie, #a8cbf3, ma na nocy kontrast 11,37 : 1 — jest tak jasny, że oko czyta go jako biel z odcieniem, a nie jako barwę maryjną. Kierunek był w treści („Idziemy do Matki"), a nie było go w barwie. ── DWA REJESTRY, NIE DWIE PALETY ──────────────────────────────────────── Rejestr maryjny jest domyślny i obowiązuje wszędzie. Rejestr patriotyczny włącza się klasą `.reg-patriotyczny` TYLKO tam, gdzie treść jest narodowa: Jasna Góra jako sanktuarium narodu, rocznice, hymn. Barwy flagi rozsypane po całej stronie przestają cokolwiek znaczyć — a mają znaczyć. ── KAŻDA BARWA ZMIERZONA, NIE DOBRANA NA OKO ──────────────────────────── Wartości niżej to kontrast wobec gruntu, na którym ta barwa NAPRAWDĘ leży. Próg: 4,5 : 1 dla pisma zwykłego, 3,0 : 1 dla dużego. ══════════════════════════════════════════════════════════════════════════ */ :root, .reg-maryjny { /* ── GRUNT ───────────────────────────────────────────────────────────── Noc i lampiony. Zostaje bez zmian — to jest treść, nie tło. */ --dz-noc: #101230; --dz-panel: #1B1D46; /* ── BŁĘKIT MARYJNY ──────────────────────────────────────────────────── Wiodący. 7,21 : 1 na nocy, 6,38 : 1 na panelu — przechodzi dla pisma zwykłego z zapasem, więc nadaje się i na nagłówki, i na zdania. */ --dz-blekit: #DCDFF2; /* Jaśniejszy — do drobnego pisma i podpisów. 9,76 : 1 na nocy. */ --dz-blekit-jas: #AEB6DC; /* Nasycony — do PŁASZCZYZN, ramek i dużych napisów. 3,53 : 1 na nocy, czyli poniżej progu dla zwykłego pisma. NIE UŻYWAĆ do zdań. */ --dz-blekit-mocny: #8E9BC4; /* ── ZŁOTO I BIEL ────────────────────────────────────────────────────── Złoto to światło i korona: 12,31 : 1. Biel to płaszcz: 19,11 : 1. */ --dz-zloto: #E2B354; --dz-biel: #ffffff; /* ── BARWA WIODĄCA REJESTRU ──────────────────────────────────────────── Tego używają wszystkie reguły niżej. Zmiana rejestru to zmiana tych trzech wierszy, a nie przepisywanie całego arkusza. */ --dz-wiodaca: var(--dz-blekit); --dz-wiodaca-mocna: var(--dz-blekit-mocny); --dz-wiodaca-jas: var(--dz-blekit-jas); } /* ── REJESTR PATRIOTYCZNY ─────────────────────────────────────────────────── Biel i czerwień. Czerwień jest JEDNA — flagowa #ce1126, ta sama, którą dzieło ma już w motywie „biało-czerwonym" w `pielgrzymka.css`. Zmieniają się tylko jej odcienie zależnie od gruntu, bo ta sama czerwień na bieli daje 5,63 : 1 (czytelna), a na nocy 3,40 : 1 (za mało dla pisma) — więc na ciemnym gruncie rozjaśniamy ją do #ff8fa1 (8,82 : 1). Udawanie, że jeden odcień wystarczy na oba grunty, kończy się napisem, którego nie widać — i nikt tego nie zauważy, bo „przecież jest czerwony". */ .reg-patriotyczny { /* CZERWIEŃ JEST JUŻ W DZIELE i nie wolno dokładać drugiej. Arkusz `pielgrzymka.css` ma dopracowany motyw „biało-czerwony" z czerwienią #ce1126 — biel czystą, bez domieszki różu, i jedną czerwienią flagową. Napisałem najpierw własną (#c8102e), po czym zobaczyłem tamtą: dwie czerwienie różniące się o kilka procent to nie jest bogactwo, tylko rozjazd, którego nikt później nie posprząta. Biorę tamte wartości. Zmierzone (deklaracje w tamtym arkuszu były o włos zawyżone): #ce1126 na bieli 5,63 : 1 — czytelna jako pismo, #b30e20 na bieli 7,00 : 1 — do pisma drobnego, #ce1126 na nocy 3,40 : 1 — TYLKO duże pismo i płaszczyzny, #ff8fa1 na nocy 8,82 : 1 — to jest czerwień do ciemnego gruntu. */ --dz-czerwien: #ce1126; --dz-czerwien-ciemna: #b30e20; --dz-czerwien-jas: #ff8fa1; --dz-wiodaca: var(--dz-czerwien-jas); --dz-wiodaca-mocna: var(--dz-czerwien); --dz-wiodaca-jas: #ffc2cb; } /* Na jasnym gruncie rejestr patriotyczny odwraca się: czerwień ciemnieje, bo to ona ma być czytana, a nie tło. */ .reg-patriotyczny.na-bieli { --dz-wiodaca: var(--dz-czerwien); --dz-wiodaca-mocna: var(--dz-czerwien-ciemna); } /* ═══ ZASTOSOWANIE ════════════════════════════════════════════════════════ Barwa wiodąca wchodzi tam, gdzie prowadzi oko, i TYLKO tam. Nie zamalowuje wielkich płaszczyzn — noc zostaje nocą, bo to ona niesie „światła na Jasną Górę". Selektory są prawdziwymi klasami tych stron; sprawdzone w znacznikach, nie zgadnięte. ═══════════════════════════════════════════════════════════════════════ */ /* NADTYTUŁ „10 października 2026 · Jasna Góra". To jest pierwsze miejsce, w którym oko szuka, o czym jest strona — i to ono ma powiedzieć, dokąd idziemy. Dotąd było złote, tak samo jak świeca i światło; teraz jest błękitne, bo mówi o CELU drogi, a nie o świetle, które się niesie. Złoto zostaje przy tym, co jest światłem. */ /* SZCZEGÓŁOWOŚĆ MA TU ZNACZENIE i pierwsza wersja o tym zapomniała. Nadtytuł jest akapitem wewnątrz `.czolo`, a arkusz dzieła ma regułę `.czolo p { color: var(--przygaszony) }` — bardziej szczegółową niż samo `.czolo-etykieta`. Skutek: barwa nie zmieniała się ani na złotą, ani na błękitną, tylko zostawała przygaszona. Zapytałem przeglądarkę, która reguła wygrywa, zamiast zgadywać po arkuszu. */ .czolo .czolo-etykieta { color: var(--dz-wiodaca); /* ROZMIAR TEŻ. Ta sama pułapka szczegółowości co przy barwie i ten sam skutek: `.czolo p` (0,1,1) bije `.czolo-etykieta` (0,1,0), a nadtytuł jest akapitem — więc zamiast zapowiedzianych .74em dostawał 1.06em. Zmierzone w przeglądarce: 18,02 px zamiast 12,58 px. Wielkimi literami z odstępem .2em nie mieścił się w wierszu i łamał się na dwa. */ font-size: .74em; } /* Nawigacja — odnośnik czynny prowadzi błękitem. */ .ped-nav-a.tu, .ped-nav-a[aria-current="page"] { color: var(--dz-wiodaca); } /* Znacznik i plakietka. */ .ped-znacznik { color: var(--dz-wiodaca); border: 1px solid var(--dz-wiodaca-mocna); border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; } /* Panel, który mówi o DRODZE (a nie o świetle) — ramka błękitna. Klasę dokłada się świadomie, przy konkretnym panelu; nie zamalowujemy wszystkich naraz, bo wtedy barwa przestaje cokolwiek rozróżniać. */ .ped-pole.droga { border-left-color: var(--dz-wiodaca-mocna); } /* Odnośnik w treści — podkreślenie zostaje, żeby dało się go rozpoznać także wtedy, gdy ktoś nie rozróżnia barw. */ .ped-tresc a, a.wiodacy { color: var(--dz-wiodaca); text-decoration: underline; text-underline-offset: 2px; } /* ── PASEK NARODOWY ──────────────────────────────────────────────────────── Biel i czerwień jako dwa pola, nie jako przejście tonalne — flaga nie jest gradientem. Do treści narodowych: Jasna Góra jako sanktuarium narodu, rocznice, hymn. */ .pas-narodowy { display: block; height: 6px; border-radius: 3px; background: linear-gradient(to bottom, var(--dz-biel) 0 50%, #ce1126 50% 100%); } /* ── GRUNT JASNY ─────────────────────────────────────────────────────────── TU BYŁ BŁĄD I WART JEST ZAPAMIĘTANIA. Pierwsza wersja ściemniała błękit przy `prefers-color-scheme: light` — czyli wedle ustawienia SYSTEMU odwiedzającego. Ale strony dzieła mają grunt ciemny niezależnie od tego ustawienia, więc na czyimś jasnym systemie błękit ściemniał do #2c6cb0 i lądował na nocy z kontrastem 3,53 : 1, poniżej progu. Zmierzone w przeglądarce, nie wydedukowane. O barwie rozstrzyga GRUNT, na którym napis leży, a nie ustawienie systemu. Dlatego jasna wersja włącza się klasą `.na-bieli`, dokładaną tam, gdzie grunt naprawdę jest jasny. */ .na-bieli { --dz-blekit: #2E4473; /* Steel — 7,53 : 1 na bieli */ --dz-blekit-mocny: #25276B; /* Navy — 12,42 : 1 na bieli */ --dz-blekit-jas: #4A5578; --dz-wiodaca: var(--dz-blekit); --dz-wiodaca-mocna: var(--dz-blekit-mocny); } /* ═══ TRZY DROGI — WIDOCZNE JAKO DZIAŁANIA ════════════════════════════════ Audyt z 1.09.2026: nad zgięciem strony głównej nie było ANI JEDNEGO wyraźnego wezwania do zapisu. Trzy drogi istniały, ale jako odnośniki wplecione w zdanie — a odnośnik w zdaniu czyta ten, kto już czyta. Przy 6 zapisanych osobach na 500 i 39 dniach to jest strata, na którą dzieła nie stać. CZEGO NIE ZROBIŁEM: nie wysunąłem zapisu przed dwie pozostałe drogi. Kolejność w tym miejscu jest przemyślana i opisana w samej stronie — od najniższego progu do najwyższego, „kto nie zapisze się dziś, ma zostawić przynajmniej intencję". Promowanie zapisu ponad modlitwę odwróciłoby sens tej strony. Trzy drogi zostają równe; różni je tylko to, że ostatnia jest pełnią decyzji — i dlatego jedna ma wypełnienie. Zmierzone: pismo błękitne na nocy 7,21 : 1, pismo nocne na złocie 12,31 : 1. Pola dotykowe mają 46 px wysokości, powyżej progu 44 px. */ .trzy-drogi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 4px; } /* SZCZEGÓŁOWOŚĆ — trzeci raz tego samego dnia i trzeci raz ta sama nauka. `.szept a { color: var(--zloto) }` ma 0,1,1 i wygrywa z samym `.droga-btn` (0,1,0). Skutek: wszystkie trzy przyciski wychodziły złote, więc znikała różnica między drogą a pełnią decyzji — czyli jedyna rzecz, którą te barwy miały tu powiedzieć. Zmierzone w przeglądarce: 10,89 : 1 zamiast 6,38 : 1 nie jest problemem czytelności, tylko problemem znaczenia. Prefiks `.trzy-drogi` daje 0,2,0 i rozstrzyga. */ .trzy-drogi .droga-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: .96rem; line-height: 1.2; border: 1.5px solid var(--dz-wiodaca-mocna); color: var(--dz-wiodaca); background: transparent; } .trzy-drogi .droga-btn:hover, .trzy-drogi .droga-btn:focus-visible { border-color: var(--dz-blekit-jas); color: var(--dz-blekit-jas); } /* Pełnia decyzji — jedyny przycisk z wypełnieniem. Złoto, bo to jest światło, do którego idziemy, a nie kolejny odnośnik. */ .trzy-drogi .droga-btn.pelnia { background: var(--dz-zloto); border-color: var(--dz-zloto); color: #1A1A1A; } .trzy-drogi .droga-btn.pelnia:hover, .trzy-drogi .droga-btn.pelnia:focus-visible { background: #D7A33F; border-color: #D7A33F; color: #1A1A1A; } /* NA TELEFONIE TRZY DROGI MUSZĄ ZMIEŚCIĆ SIĘ RAZEM. Zmierzone przy 390 px: w układzie pionowym z pełnymi odstępami dwie z trzech spadały poniżej zgięcia — czyli człowiek widział tylko pierwszą i o dwóch pozostałych nie wiedział. Odstępy i wysokości zejdź do minimum, które nadal trzyma próg 44 px dla pola dotykowego. */ @media (max-width: 620px) { /* CZOŁO USTĘPUJE MIEJSCA. Zmierzone przy 390 px przed poprawką: nagłówek kończył się na 765 px przy zgięciu 844 px, więc na trzy drogi zostawało 79 px — czyli nie mieściła się ani jedna. Nic tu nie znika; wszystko zjeżdża do rozmiarów, w jakich nadal się to czyta. */ .czolo { padding: 24px 0 14px; } .plomyk { height: 28px; margin: 0 auto 12px; } .czolo-znak { height: 132px; width: auto; margin-bottom: 10px; } .czolo h1 { font-size: clamp(1.62rem, 6.6vw, 2rem); margin-bottom: 12px; } .czolo p { font-size: 1em; } .trzy-drogi { flex-direction: column; gap: 7px; margin: 14px 0 2px; } .trzy-drogi .droga-btn { justify-content: center; text-align: center; min-height: 46px; padding: 10px 16px; font-size: .93rem; } } /* ── POMOST MIĘDZY DWIEMA STRONAMI DZIEŁA ─────────────────────────────────── Ten pasek stoi po OBU stronach: tutaj (modlitwa, modul, szkoly) i na pielgrzymkaed.pl, gdzie składa go `mu-plugins/pielgrzymka-spojnosc.php`. Ks. Andrzej, 6.09.2026: ma wyglądać identycznie w obu miejscach. Wartości są więc przepisane co do znaku z wtyczki po tamtej stronie. ── DLACZEGO NIE IDZIE ZA MOTYWEM ─────────────────────────────────────── Bo jest JEDNYM obiektem widocznym po dwóch stronach dzieła. Gdyby brał barwy z żetonów wersji, wyglądałby inaczej w każdej z czterech i nigdy nie byłby „ten sam pasek". Dlatego barwy są tu wpisane, a nie wzięte z `var(--…)` — wyjątkowo i świadomie. ── TO ODWRACA USTALENIE Z 2.09.2026 ──────────────────────────────────── 2.09 polecenie brzmiało: „wyspy nie ma, blok bierze grunt wersji, w której stoi", i na jasnym gruncie pasek stawał się przezroczysty. Rozstrzygnięcie z 6.09 („identycznie jak na pielgrzymkaed.pl") znaczy coś przeciwnego, bo po tamtej stronie pasek JEST wyspą — granatowym blokiem na białej stronie, oddzielonym złotą kreską. Wyspa wraca. Kontrast w tym bloku: 6,41 – 12,28 : 1, siedem par, wszystkie powyżej progu. Te same siedem, które zmierzono po stronie pielgrzymkaed.pl. */ .ped-most { background: #1B1D46; color: #ffffff; padding: 44px 22px; margin: 56px 0 6px; border-radius: 18px; border-top: 4px solid #E2B354; line-height: 1.65; } .ped-most-nad { margin: 0 0 6px; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #E2B354; } .ped-most h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); margin: 0 0 10px; color: #ffffff; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; line-height: 1.2; text-wrap: balance; } .ped-most-lead { margin: 0 0 22px; color: #DCDFF2; max-width: 64ch; font-size: 1.03rem; } .ped-most-drogi { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 820px) { .ped-most-drogi { grid-template-columns: 1fr; } } .ped-most-droga { display: flex; flex-direction: column; gap: 5px; min-height: 44px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid #3A3F7A; background: #242A5C; text-decoration: none; transition: border-color .15s, background .15s; } .ped-most-droga:hover, .ped-most-droga:focus-visible { border-color: #E2B354; background: #2E3566; } .ped-most-droga:focus-visible { outline: 2px solid #E2B354; outline-offset: 3px; } .ped-most-droga b { color: #ffffff; font-size: 1.02rem; line-height: 1.3; } .ped-most-droga i { color: #AEB6DC; font-style: normal; font-size: .9rem; line-height: 1.5; } /* Pełnia decyzji — jedna droga ze złotym wypełnieniem. Tego po tamtej stronie nie ma (tam trzy drogi są równe), ale barwy zostają te same: złoto #fac647 i granat #0e417c, 6,41 : 1. */ .ped-most-droga.pelnia { background: #E2B354; border-color: #E2B354; } .ped-most-droga.pelnia b, .ped-most-droga.pelnia i { color: #1A1A1A; } .ped-most-droga.pelnia:hover, .ped-most-droga.pelnia:focus-visible { background: #D7A33F; border-color: #D7A33F; } .ped-most-stopa { margin: 20px 0 0; color: #AEB6DC; font-size: .92rem; max-width: 64ch; } /* Pasek odpowiada za swoje barwy sam — reguła odnośnika modułu (`.ped a{color:var(--ped-akcent-tekst)}`) przemalowałaby drogi na granat, czyli granat na granacie. */ .ped .ped-most-droga, .opr .ped-most-droga { color: #ffffff; } /* ── GRUNT ROZSTRZYGA O ODCIENIU BŁĘKITU ─────────────────────────────────── Od 2.09.2026 stroną domyślną jest maryjna, czyli biała. Barwa wiodąca `--dz-wiodaca` była ustawiona na #DCDFF2 — błękit dobrany do nocy (7,21 : 1), który na bieli daje 2,65 : 1 i po prostu znika. Zmierzone na nadtytule „10 października 2026 · Jasna Góra" i na nagłówku zaproszenia. Ta sama barwa, drugi odcień: na jasnym gruncie prowadzi #2E4473 (5,24 : 1). */ :root:is([data-barwy="jasny"],[data-barwy="patriotyczny"]) { --dz-wiodaca: #2E4473; --dz-wiodaca-mocna: #25276B; --dz-wiodaca-jas: #25276B; } /* ── MARYJNA TEŻ STOI OD 6.09.2026 NA BIELI ──────────────────────────────── Wartość podstawowa `--dz-wiodaca` to błękit maryjny #DCDFF2, dobrany pod noc. Na bieli daje 2,65 : 1 — dokładnie ten sam błąd, który wiersz wyżej naprawiono 2.09 dla wersji jasnej i biało-czerwonej. Maryjna dołącza do nich, ale własnym granatem: barwą pomostu #0e417c (10,17 : 1), a nie granatem marki #25276B. Dzięki temu obie wersje stoją na bieli i nadal różnią się paletą. */ :root[data-barwy="maryjny"], :root:not([data-barwy]) { /* 18.09.2026: wersja domyślna przechodzi na granat marki #25276B. Do dziś prowadziła „granatem pomostu" #0e417c, dobranym pod KSM, a nie pod skrypt dzieła. */ --dz-wiodaca: #25276B; --dz-wiodaca-mocna: #1B1D46; --dz-wiodaca-jas: #25276B; } /* Pełnia decyzji — złota powierzchnia, pismo granatowe (12,31 : 1). Pasek pomostu wypadł z tego wykazu 6.09.2026: odkąd nie idzie za motywem, sam odpowiada za swoje barwy i nadpisania gruntu tylko by mu przeszkadzały. */ :root:is([data-barwy="jasny"],[data-barwy="patriotyczny"]) .trzy-drogi .droga-btn.pelnia { color: #1A1A1A; } /* ── PASEK POMOSTU NIE IDZIE JUŻ ZA WERSJĄ ───────────────────────────────── Stało tu dziewięć reguł, które na jasnym gruncie rozbierały pasek na części: tło przezroczyste, nadtytuł granatowy, karty białe. Wszystkie zniknęły 6.09.2026 razem z decyzją, że pasek ma wyglądać identycznie po obu stronach dzieła — a skoro identycznie, to niezależnie od wersji. Reguły są teraz wyżej, w jednym miejscu, z barwami wpisanymi wprost. */ /* ── NADTYTUŁY NA TELEFONIE ──────────────────────────────────────────────── Zmierzone przy 390 px: 12,6 px, wielkimi literami, z rozstrzeleniem .2em. To są napisy, od których zaczyna się czytanie sekcji — data pielgrzymki, „Słowo na drogę", „O co modlą się w tej chwili". Rozstrzelenie schodzi, rozmiar rośnie. */ @media (max-width: 600px) { /* `.czolo .czolo-etykieta` — bo `.czolo p` (0,1,1) bije samą klasę (0,1,0). Ta sama pułapka co przy barwie i przy rozmiarze na komputerze; trzeci raz ten sam prefiks. */ .czolo .czolo-etykieta, .ped-pasek-tytul, .ped-slowo-nadpis, .ped-zapisy-nad, .ped-most-nad, .ped-modlitwa-podtytul { font-size: .86rem; letter-spacing: .1em; } .ped-int-kto { font-size: .88rem; } } /* ZNAK PIELGRZYMKI NA NOCY. Oficjalne logo jest granatowo-błękitne ze złotą aureolą — na białym gruncie czyta się samo. W wersji ciemnej granat znika w tle (#04101F), więc tylko tam odwracamy znak do bieli. Złoto aureoli też wtedy bieleje; to strata, ale mniejsza niż znak, którego nie widać. */ :root[data-barwy="ciemny"] .czolo-znak { filter: brightness(0) invert(1); opacity: .96; }