html,body{margin:0;padding:0}
/* Pielgrzymka Edukacji Domowej — mapa modlitwy i szkół.
────────────────────────────────────────────────────────────────────────────
Moduł jest CIEMNY. Granat wieży jasnogórskiej ze znaku pielgrzymki niesie
całość, błękit otwartej księgi jest akcentem, a złoto aureoli zostaje
jedynym ciepłym kolorem na stronie.
To nie jest wybór estetyczny, tylko treściowy: świecy nie widać w dzień.
Na ciemnym granacie każde zapalone światło czyta się natychmiast, choć
zajmuje ułamek powierzchni mapy — a o to w tym module chodzi.
Wszystkie barwy siedzą w zmiennych. Żeby dopasować moduł do innego motywu,
wystarczy nadpisać `.ped { --ped-plomien: … }` w motywie potomnym.
──────────────────────────────────────────────────────────────────────────── */
/* ── MOTYW CIEMNY MUSI MIEĆ SWOJE SELEKTORY POTOMNE ────────────────────────
Zmierzone 2.09.2026 po kliknięciu „Ciemna": 21 nieczytelnych napisów —
granat #25276B na nocy #071d38 (1,66 : 1) i #2E4473 na nocy (2,58 : 1).
„Zaśpiewajmy razem", „Chleb Prawdy", podpisy pod obrazami.
Przyczyna: `.ped-piesn` zagnieżdżony w `.ped` ZACHOWUJE własny
`data-motyw="maryjny"` ze znaczników, bo skrypt świadomie pomija moduły
zagnieżdżone (rodzic i dziecko mają pokazywać to samo, więc przestawia się
tylko rodzica). Dziecko trafiało więc w regułę maryjną, kiedy rodzic był
już nocny — i miało jasną paletę na ciemnym gruncie.
Trzy pozostałe motywy dostały selektory potomne wcześniej; ciemny ich nie
miał, bo był motywem podstawowym i nikomu nie przeszkadzało. Przestał nim
być 2.09.2026 i wtedy to wyszło. */
.ped[data-motyw="ciemny"] .ped-zglos,
.ped[data-motyw="ciemny"] .ped-wykaz,
.ped[data-motyw="ciemny"] .ped-piesn,
.ped, .ped-zglos, .ped-wykaz, .ped-piesn {
--ped-noc: #04142a; /* najciemniejsze — plansza mapy i pieśni */
--ped-tlo: #071d38; /* tło modułu */
--ped-papier: #0e2c50; /* karty, panele, pola */
--ped-pole: #0a2444; /* wnętrze pól formularza */
--ped-tekst: #DCDFF2; /* tekst główny */
--ped-glebia: #AEB6DC; /* tekst poboczny */
--ped-blekit: #4a9fd8; /* błękit ze znaku — odnośniki, przyciski wtórne */
--ped-brzeg: #1d4372;
--ped-ziemia: #12365f; /* diecezja, w której nikt jeszcze nie zapalił świecy */
--ped-granica: #214d7f; /* linie między diecezjami */
--ped-najazd: #1a4674;
--ped-zloto: #E2B354; /* złoto ze znaku — liczby, sigla, akcenty */
--ped-plomien: #ffb524; /* płomień świecy */
--ped-blask: #EBCB86; /* poświata wokół płomienia */
/* PISMO NA ZŁOTEJ POWIERZCHNI. Osobny żeton, bo `--ped-zloto` NIE JEST
złotem we wszystkich wersjach: w jasnej to granat #2E4473, w biało-
-czerwonej czerwień #ce1126. Ciemnobrązowe pismo wpisane na sztywno pod
złoto dawało tam 1,93 : 1 i 3,29 : 1 (zmierzone 5.09.2026 na czternastu
ekranach). Ta sama pułapka co `--ped-blask`: barwa dobrana pod jeden
grunt, użyta na czterech. */
--ped-na-zlocie: #1a1206; /* 9,54 : 1 na złocie #E2B354 */
--ped-zar: #5a3f07; /* przygasły żar — od niego zaczyna się blask */
--ped-alarm: #ff9b8b;
--ped-zgoda: #7ddba8;
--ped-knot: #fff3cf; /* jasny punkt w środku płomienia */
--ped-akcent-tekst: var(--ped-zloto); /* na granacie złoto jest czytelne */
color: var(--ped-tekst);
font-family: inherit;
}
/* ── Wersja jasna ─────────────────────────────────────────────────────────
Ta sama identyfikacja, odwrócone role: biel i błękit niosą stronę, granat
schodzi do tekstu, złoto zostaje płomieniem. Bliżej strony pielgrzymkaed.pl;
lepiej się drukuje i lepiej czyta w pełnym słońcu.
Zmieniamy WYŁĄCZNIE zmienne — żadna reguła niżej nie wie o motywach. */
/* MODUŁY ZAGNIEŻDŻONE MUSZĄ IŚĆ ZA MOTYWEM RODZICA.
Wiersz 18 nadaje ciemną paletę wszystkim czterem rodzajom modułów:
`.ped, .ped-zglos, .ped-wykaz, .ped-piesn`. Kiedy `.ped-piesn` leży
WEWNĄTRZ `.ped` z przełączonym motywem, jego własna deklaracja (0,1,0)
bije wartość odziedziczoną — i pieśń wraca do barw nocnych, tyle że na
białym tle. Zmierzone 1.09.2026 po kliknięciu „Biało-czerwona":
23 napisy poniżej progu, najgorsze 1,13 : 1, czyli praktycznie niewidoczne.
Nikt tego nie zgłosił, bo motyw trzeba najpierw włączyć.
Selektor potomny daje 0,3,0 i rozstrzyga. */
/* ── Wersja maryjna — DOMYŚLNA ────────────────────────────────────────────
Ks. Andrzej, 2.09.2026: „zrób kolor maryjny, koniecznie spójny ze stroną,
i niech on się zawsze odpala jako pierwszy, a resztę żeby można było
przełączyć".
── DLACZEGO TO SPINA OBA SERWISY ───────────────────────────────────────
pielgrzymkaed.pl jest biało-granatowa ze złotem: grunt #ffffff, granat
#25276B, złoto #E2B354. Motyw maryjny bierze DOKŁADNIE TE WARTOŚCI, więc
człowiek przechodzący z jednej strony na drugą widzi tę samą stronę,
a nie dwa dzieła o podobnej nazwie. Do tego dochodzi błękit maryjny —
ta jedna barwa, która mówi, o co tu chodzi, zanim ktokolwiek przeczyta
choćby zdanie.
── DWA BŁĘKITY, BO GRUNTY SĄ DWA ───────────────────────────────────────
#DCDFF2 świeci na nocy (7,21 : 1), ale na bieli daje 2,65 : 1 i znika.
Na jasnym gruncie prowadzi więc #2E4473 (5,24 : 1). To ta sama barwa
w dwóch odcieniach, nie dwie barwy.
── ZŁOTO ZOSTAJE ŚWIATŁEM ──────────────────────────────────────────────
Na bieli złoto nie jest pismem — jest płomieniem i powierzchnią. Pismo,
które musi być złote, jest ciemnozłote #2E4473 (5,70 : 1). To samo prawo
obowiązuje po drugiej stronie dzieła; tam pilnuje go skrypt w warstwie
`pielgrzymka-spojnosc`.
Wszystkie liczby zmierzone w przeglądarce 2.09.2026. */
.ped[data-motyw="maryjny"], .ped-zglos[data-motyw="maryjny"],
.ped-wykaz[data-motyw="maryjny"], .ped-piesn[data-motyw="maryjny"],
.ped[data-motyw="maryjny"] .ped-zglos,
.ped[data-motyw="maryjny"] .ped-wykaz,
.ped[data-motyw="maryjny"] .ped-piesn {
/* ── GRUNT JASNY, NA POLECENIE ks. ANDRZEJA Z 6.09.2026 ──────────────────
Moduł idzie za gruntem strony: skoro pielgrzymkaed.pl jest biała,
biały jest i moduł. Barwy bierzemy z paska pomostu `.ped-most`, bo to
jedyne miejsce, gdzie oba serwisy mówiły tą samą paletą: granat
#0e417c i złoto #fac647.
Poprzednia wartość (granat #25276B jako grunt) pochodziła z polecenia
z 2.09.2026 wieczorem i została nią odwrócona. Powód rozróżnienia
maryjnej od jasnej zostaje w mocy, tylko przenosi się z gruntu na
paletę — patrz komentarz przy `:root` niżej.
ZŁOTO PRZESTAJE BYĆ PISMEM. Na bieli #fac647 daje 1,59 : 1. Dlatego
`--ped-zloto` — żeton, który w kilkunastu regułach maluje LITERY —
jest tu granatem, dokładnie tak jak w wersji jasnej. Płomień i blask
zostają złote, bo to grafika, nie pismo. */
--ped-noc: #F7F3E8; /* plansza mapy i pieśni — papier marki */
--ped-tlo: #ffffff; /* grunt modułu — biel */
--ped-papier: #FDFBF6; /* karty i panele */
--ped-pole: #ffffff; /* wnętrze pól formularza */
--ped-tekst: #25276B; /* Navy ze skryptu — 12,42 : 1 na bieli */
--ped-glebia: #2E4473; /* Steel — 7,53 : 1 na bieli */
--ped-blekit: #2E4473; /* odnośniki i przyciski wtórne */
--ped-brzeg: #E3DCCB;
--ped-ziemia: #EDE7D8; /* diecezja bez zapalonej świecy */
--ped-granica: #D9D0BC;
--ped-najazd: #EFE6D2;
--ped-zloto: #2E4473; /* PISMO — złoto na bieli dałoby 1,84 : 1 */
--ped-plomien: #fac647; /* płomień — GRAFIKA, złoto pomostu */
--ped-blask: #e0a500; /* poświata — GRAFIKA, nie pismo */
--ped-na-zlocie: #ffffff; /* „złoto" jest tu granatem — 10,17 : 1 */
--ped-zar: #F7E9C6;
--ped-alarm: #a3271b; /* na jasnym gruncie alarm musi być ciemny */
--ped-zgoda: #17603c; /* 6,05 : 1 na karcie #F4F8FD */
--ped-knot: #a86a00;
--ped-akcent-tekst: #2E4473; /* Steel ze skryptu — 7,53 : 1 na bieli */
}
/* Na złotej powierzchni pismo jest granatowe — biel na złocie to 1,59 : 1.
Wymieniamy WPROST, bo `.ped a.…{color:inherit}` bije reguły klasowe.
6.09.2026: te przyciski malują się `background: var(--ped-plomien)`, a płomień
ZOSTAJE złoty także po przejściu na biały grunt (jest grafiką, nie pismem).
Powierzchnia jest więc ta sama co wcześniej, zmienia się tylko odcień
granatu — z marki #25276B na granat pomostu #0e417c. Na złocie #fac647
daje 6,41 : 1, a na blasku, który wchodzi pod kursorem, 4,62 : 1.
`--ped-noc` jest tu jasne (#E8EEF7), więc bez tej reguły byłby to
niemal biały napis na złocie. */
.ped[data-motyw="maryjny"] .ped-zapal,
.ped[data-motyw="maryjny"] a.ped-zapal,
.ped[data-motyw="maryjny"] .ped-zapisy-przycisk,
.ped[data-motyw="maryjny"] a.ped-zapisy-przycisk,
.ped[data-motyw="maryjny"] .ped-slowo-przycisk,
.ped[data-motyw="maryjny"] a.ped-slowo-przycisk,
.ped[data-motyw="maryjny"] .ped-motyw.wybrany,
.ped-piesn[data-motyw="maryjny"] .ped-motyw.wybrany,
.ped-modlitwa[data-motyw="maryjny"] .ped-motyw.wybrany {
color: #25276B; font-weight: 700;
}
/* Pasek „zapisz rodzinę →" bierze pismo z `--ped-zloto`, a ten żeton jest
na bieli granatem. Osobna reguła ze złotem była potrzebna, dopóki pasek
leżał na ciemnym gruncie; teraz złoto dałoby tu 1,59 : 1. */
.ped[data-motyw="maryjny"] a.ped-pasek-zapisy { color: #2E4473; }
/* ── PRZYCISKI CZYNNOŚCI: GRANAT I BIEL, NIE ZŁOTO I GRANAT ────────────────
Do 6.09.2026 stało tu złote tło z granatowym pismem. Na jasnym gruncie
TAK ZOSTAĆ NIE MOŻE — i nie z powodu samej pary barw (6,41 : 1 jest
dobre), tylko przez szczegółowość. Reguła jasnego gruntu niżej,
`:root:not([data-barwy="ciemny"]) .ped a.ped-fb { color:#ffffff }`,
ma 0,4,1 i bije tę regułę (0,3,1). Maryjna, która od dziś jasnym gruntem
JEST, dostałaby więc biel na złocie — 1,59 : 1.
Zamiast walczyć o szczegółowość, idziemy za tamtą regułą: powierzchnia
granatowa, pismo białe, 10,17 : 1. To zarazem układ paska pomostu
po stronie pielgrzymkaed.pl. */
.ped[data-motyw="maryjny"] .ped-fb,
.ped[data-motyw="maryjny"] .ped-wyslij,
.ped-zglos[data-motyw="maryjny"] .ped-fb,
.ped-zglos[data-motyw="maryjny"] .ped-wyslij {
background: #25276B; color: #ffffff; font-weight: 700;
}
.ped[data-motyw="maryjny"] .ped-fb:hover,
.ped[data-motyw="maryjny"] .ped-wyslij:hover,
.ped-zglos[data-motyw="maryjny"] .ped-fb:hover,
.ped-zglos[data-motyw="maryjny"] .ped-wyslij:hover { background: #1B1D46; }
.ped[data-motyw="jasny"], .ped-zglos[data-motyw="jasny"],
.ped-wykaz[data-motyw="jasny"], .ped-piesn[data-motyw="jasny"],
.ped[data-motyw="jasny"] .ped-zglos,
.ped[data-motyw="jasny"] .ped-wykaz,
.ped[data-motyw="jasny"] .ped-piesn {
--ped-noc: #F7F3E8;
--ped-tlo: #ffffff;
--ped-papier: #FDFBF6;
--ped-pole: #ffffff;
--ped-tekst: #25276B;
--ped-glebia: #2E4473;
--ped-blekit: #2E4473;
--ped-brzeg: #E3DCCB;
--ped-ziemia: #EDE7D8;
--ped-granica: #D9D0BC;
--ped-najazd: #EFE6D2;
--ped-zloto: #2E4473; /* pociemnione: #b87f08 dawało kontrast 3.27 (próg 4.5) */
--ped-plomien: #f0a30a;
--ped-blask: #ffd97a; /* poświata płomienia — GRAFIKA, nie tekst */
--ped-na-zlocie: #ffffff; /* złoto jest tu granatem — 9,59 : 1 */
--ped-zar: #f7e9c6;
--ped-alarm: #a3271b;
--ped-zgoda: #1f7a4c;
--ped-knot: #a86a00;
--ped-akcent-tekst: #2E4473; /* akcent CZYTELNY na jasnym tle (kontrast > 4.5) */
}
.ped, .ped-zglos, .ped-wykaz {
max-width: 980px;
margin: 0 auto;
background: var(--ped-tlo);
border-radius: 18px;
padding: clamp(18px, 3.5vw, 34px);
}
/* Zagnieżdżone bloki (formularz szkół wewnątrz mapy) nie dokładają drugiego
tła ani drugiego marginesu — inaczej powstaje ramka w ramce. */
.ped .ped-zglos, .ped .ped-wykaz { background: none; padding: 0; border-radius: 0; }
/* Pola mają szerokość 100% i wewnętrzny odstęp naraz. Bez tej reguły na wąskim
ekranie wystają poza stronę i cała witryna zaczyna przewijać się w bok.
Wiele motywów ustawia to u siebie — ale nie wszystkie, a moduł ma działać
w każdym, do którego ktoś go wklei. */
.ped, .ped-zglos, .ped-wykaz,
.ped *, .ped-zglos *, .ped-wykaz * { box-sizing: border-box; }
/* ── Przełącznik wersji ───────────────────────────────────────────────────── */
.ped-gora { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ped-motyw {
font: inherit; font-size: .85em; font-weight: 650; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 20px;
border: 1px solid var(--ped-brzeg);
background: var(--ped-papier); color: var(--ped-glebia);
}
.ped-motyw:hover { background: var(--ped-ziemia); color: var(--ped-tekst); }
.ped-motyw.wybrany {
background: var(--ped-plomien); color: var(--ped-noc); border-color: var(--ped-plomien);
}
.ped-motyw-kropka {
width: 12px; height: 12px; border-radius: 50%; display: inline-block;
border: 1px solid rgba(0, 0, 0, .18);
}
.ped-motyw:focus-visible { outline: 2px solid var(--ped-plomien); outline-offset: 2px; }
/* ── Wersja biało-czerwona ────────────────────────────────────────────────
Barwy narodowe wzięte dosłownie: biel jako grunt, czerwień jako światło.
Płomień świecy ma czerwoną łunę i BIAŁY rdzeń — samo światło modlitwy jest
więc biało-czerwone, bez doklejania flagi w rogu strony.
CZERWIEŃ JEST JEDNA: #ce1126. Do 1.09.2026 stało tu zdanie „czerwień to
#D4213D, ta z ustawy o godle" — a arkusz malował #ce1126, chorągiewka
#d4213d, próbka przy przełączniku znów #d4213d. Trzy czerwienie i jedno
powołanie się na ustawę, którego kod nie wykonywał.
Ustawa opisuje barwę współrzędnymi CIE, nie kodem szesnastkowym; #D4213D
jest jednym z jej przeliczeń na ekran, #ce1126 drugim. Żadne nie jest
„tym z ustawy" w sensie prawnym. Wybieram #ce1126, bo na bieli daje
5,63 : 1 wobec 5,14 : 1 dla #D4213D (zmierzone), więc czyta się jako
pismo, a nie tylko jako plama — i bo cały motyw już na niej stoi.
Gdyby miała obowiązywać ta druga, zmienia się ten jeden wiersz. */
.ped[data-motyw="patriotyczny"], .ped-zglos[data-motyw="patriotyczny"],
.ped-wykaz[data-motyw="patriotyczny"], .ped-piesn[data-motyw="patriotyczny"],
.ped[data-motyw="patriotyczny"] .ped-zglos,
.ped[data-motyw="patriotyczny"] .ped-wykaz,
.ped[data-motyw="patriotyczny"] .ped-piesn {
/* BIAŁO-CZERWONE, NIE RÓŻOWE. Wcześniej wszystkie płaszczyzny miały domieszkę
różu (#f6f0f1, #fdf9fa, #f1e2e5) i całość czytała się jako blady pastel.
Teraz biel jest bielą — czysta, bez domieszki — a czerwień jedna, krwista,
ta sama na fladze, w akcentach i na mapie. Dwie barwy, nie dziesięć odcieni.
Czerwień #ce1126 to barwa flagowa w odczycie ekranowym: kontrast 5,63 na
bieli (zmierzone 1.09.2026; wcześniej stało tu 6,1 — powyżej progu 4,5
tak czy inaczej, ale liczba ma być zmierzona, a nie oszacowana), czyli
czytelna także jako tekst, nie tylko jako plama. */
--ped-noc: #ffffff;
--ped-tlo: #ffffff;
--ped-papier: #ffffff;
--ped-pole: #ffffff;
--ped-tekst: #17171a;
--ped-glebia: #55555c; /* szarość neutralna, bez różu */
--ped-blekit: #ce1126; /* rolę akcentu przejmuje czerwień */
--ped-brzeg: #e6e6e9; /* obramowania: szarość, żeby biel została bielą */
--ped-ziemia: #f7f7f8; /* diecezja bez świecy — biel z ledwie widocznym cieniem */
--ped-granica: #c9c9cf;
--ped-najazd: #fdeef0; /* najazd kursorem: ślad czerwieni, nie róż */
--ped-zloto: #ce1126; /* krwista czerwień flagowa */
--ped-plomien: #ce1126;
--ped-blask: #ff8fa1; /* poświata płomienia — GRAFIKA, nie tekst */
--ped-na-zlocie: #ffffff; /* złoto jest tu czerwienią — 5,63 : 1 */
--ped-zar: #fff2f4;
--ped-alarm: #8a1010;
--ped-zgoda: #1f7a4c;
--ped-knot: #ffffff; /* biały rdzeń płomienia */
--ped-akcent-tekst: #b30e20; /* ciemniejsza czerwień do tekstu: 7,00 (zmierzone) */
}
/* Na białym gruncie sam biały rdzeń zniknąłby, więc dostaje czerwony obrys. */
.ped[data-motyw="patriotyczny"] .ped-plomyk-punkt,
.ped-piesn[data-motyw="patriotyczny"] .ped-plomyk-punkt {
stroke: var(--ped-plomien); stroke-width: 1px; vector-effect: non-scaling-stroke;
}
/* Przycisk „Zapal światło": biel na czerwieni zamiast granatu na złocie. */
.ped[data-motyw="patriotyczny"] .ped-zapal { color: #ffffff; }
.ped[data-motyw="patriotyczny"] .ped-zapal:hover { background: #b30e20; color: #fff; }
.ped[data-motyw="patriotyczny"] .ped-slowo-przycisk,
.ped[data-motyw="patriotyczny"] .ped-zapisy-przycisk { color: #ffffff; }
.ped[data-motyw="patriotyczny"] .ped-piesn-przycisk.wybrana { color: #ffffff; }
/* ── Nagłówek ─────────────────────────────────────────────────────────────── */
.ped-naglowek { text-align: center; margin-bottom: 26px; }
.ped-logo {
display: block; margin: 0 auto 18px;
width: 260px; max-width: 62%; height: auto;
}
.ped-nadtytul {
font-size: .78em; letter-spacing: .16em; text-transform: uppercase;
color: var(--ped-zloto); margin: 0 0 .5em;
}
.ped-tytul { margin: 0 0 .4em; line-height: 1.2; text-wrap: balance; color: var(--ped-tekst); }
.ped-wstep { margin: 0 auto; max-width: 56ch; color: var(--ped-glebia); line-height: 1.65; }
/* ── Liczby ───────────────────────────────────────────────────────────────── */
.ped-liczby {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px; margin-bottom: 22px;
}
.ped-liczba {
background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
border-radius: 12px; padding: 16px 12px; text-align: center;
}
.ped-liczba strong {
display: block; font-size: 1.9em; line-height: 1.1;
color: var(--ped-zloto); font-variant-numeric: tabular-nums;
}
.ped-liczba span { font-size: .85em; color: var(--ped-glebia); }
.ped-liczba em {
display: block; margin-top: 3px; font-style: normal;
font-size: .78em; color: var(--ped-glebia); opacity: .8;
}
/* Kafel szkół odróżnia się znacznikiem, nie kolorem — obok świec ma stać
równorzędnie, a nie konkurować o uwagę. */
.ped-liczba--szkoly { border-left: 3px solid var(--ped-blekit); }
.ped-liczba--szkoly strong { color: var(--ped-blekit); }
/* ── Pasek intencji u góry ────────────────────────────────────────────────
Pierwsza rzecz po nagłówku. Kto wchodzi, ma najpierw zobaczyć, o co modlą się
inni — dopiero wtedy zapalenie własnej świecy przestaje być wypełnianiem
formularza, a staje się dołączeniem. */
.ped-pasek-intencji {
background: var(--ped-papier);
border: 1px solid var(--ped-brzeg);
border-left: 4px solid var(--ped-plomien);
border-radius: 0 12px 12px 0;
padding: 14px 18px; margin-bottom: 18px;
}
.ped-pasek-tytul {
margin: 0 0 10px; font-size: .74em; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ped-akcent-tekst, var(--ped-zloto));
}
.ped-pasek-lista {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 8px;
max-height: 168px; overflow-y: auto;
}
.ped-pasek-lista li {
padding: 8px 12px; background: var(--ped-pole);
border: 1px solid var(--ped-brzeg); border-radius: 9px;
font-size: .93em; line-height: 1.5;
}
/* Świeżo dopisana intencja rozjaśnia się na chwilę — żeby było widać, że
właśnie doszła, a nie żeby migać bez powodu. */
.ped-pasek-lista li.swieza { animation: ped-doszla 2.4s ease-out; }
@keyframes ped-doszla {
0% { background: var(--ped-zar); transform: translateY(-4px); }
100% { background: var(--ped-pole); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ped-pasek-lista li.swieza { animation: none; } }
/* ── Własna intencja przy Słowie ─────────────────────────────────────────── */
.ped-moja-intencja {
margin: 0 0 14px; padding: 10px 14px;
background: var(--ped-pole); border-radius: 9px;
font-size: .95em; line-height: 1.55;
}
.ped-moja-intencja span {
display: block; font-size: .82em; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--ped-zloto); margin-bottom: 3px;
}
/* ── Chwila decyzji, po modlitwie ────────────────────────────────────────── */
.ped-decyzja {
margin-top: 22px; padding: 26px 24px; text-align: center;
background: linear-gradient(180deg,
color-mix(in srgb, var(--ped-plomien) 12%, var(--ped-papier)), var(--ped-papier));
border: 1px solid var(--ped-plomien);
border-radius: 14px;
animation: ped-wejscie 1.1s ease-out;
}
@keyframes ped-wejscie {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ped-decyzja { animation: none; } }
.ped-decyzja-nad {
margin: 0 0 6px; font-size: max(.74em, 13px); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-decyzja h3 { margin: 0 0 8px; color: var(--ped-tekst); text-wrap: balance; }
.ped-decyzja p { margin: 0 0 16px; color: var(--ped-glebia); }
.ped-decyzja-male { margin: 14px 0 0 !important; font-size: .87em; opacity: .85; }
/* ── Zapisy na pielgrzymkę ───────────────────────────────────────────────── */
/* Stoją nisko, po modlitwie — kto zapalił świecę, zrobił już pierwszy krok
i wtedy pytanie o drugi brzmi naturalnie, a nie jak zaczepka na wejściu. */
.ped-zapisy {
margin-top: 30px; padding: 26px 24px; text-align: center;
background: var(--ped-papier);
border: 1px solid var(--ped-brzeg); border-top: 3px solid var(--ped-plomien);
border-radius: 4px 4px 14px 14px;
}
.ped-zapisy-nad {
margin: 0 0 6px; font-size: .74em; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--ped-zloto);
}
.ped-zapisy h3 { margin: 0 0 6px; color: var(--ped-tekst); }
.ped-zapisy p { margin: 0 0 16px; color: var(--ped-glebia); }
.ped-zapisy-przycisk {
display: inline-block; padding: 17px 38px; border-radius: 11px;
background: var(--ped-plomien); color: var(--ped-noc);
font-weight: 800; text-decoration: none; font-size: 1.22em;
letter-spacing: .01em;
box-shadow: 0 0 24px rgba(255, 181, 36, .26);
}
.ped-zapisy-przycisk:hover { background: var(--ped-blask); }
/* ── Mapa ─────────────────────────────────────────────────────────────────── */
.ped-plansza {
background: radial-gradient(ellipse at 50% 42%,
color-mix(in srgb, var(--ped-noc) 82%, var(--ped-blekit)) 0%,
var(--ped-noc) 72%);
border: 1px solid var(--ped-brzeg);
border-radius: 16px; padding: 12px; position: relative;
}
.ped-mapa { position: relative; }
.ped-mapa svg { width: 100%; height: auto; display: block; }
.ped-diec {
fill: var(--ped-ziemia);
stroke: var(--ped-granica);
stroke-width: 30;
stroke-linejoin: round;
cursor: pointer;
transition: fill .25s ease;
}
.ped-diec:hover { fill: var(--ped-najazd); }
/* Blask rośnie z liczbą świec — `--blask` liczy skrypt WZGLĘDEM najjaśniejszej
diecezji. Gdyby liczyć bezwzględnie, przy pięciu świecach w całym kraju mapa
byłaby jednolicie ciemna i nie mówiłaby nic.
Mieszamy złoto z PRZYGASŁYM ŻAREM, a nie z granatem tła. Złoto i granat są
barwami dopełniającymi — ich mieszanka daje brudną oliwkę i diecezja
z jedną świecą wyglądałaby na zabłoconą zamiast na ledwo tlącą się. */
.ped-diec.pali {
fill: color-mix(in srgb, var(--ped-plomien) calc(14% + var(--blask) * 86%), var(--ped-zar));
filter: drop-shadow(0 0 calc(6px + 22px * var(--blask)) var(--ped-blask));
animation: ped-drga 3.8s ease-in-out infinite;
}
@keyframes ped-drga { 0%, 100% { opacity: .88; } 45% { opacity: 1; } }
/* Znaczniki szkół — celowo inne w formie, nie tylko w kolorze: kto nie odróżnia
barw, ma rozróżnić kształtem.
Obrys liczymy w pikselach ekranu, nie w jednostkach mapy — viewBox ma prawie
37 000 jednostek szerokości, więc „stroke-width: 2” wyszłoby cieńsze niż
jedna dwudziesta piksela i znacznik byłby niewidoczny. */
.ped-szkola-znak, .ped-szkola-punkt {
fill: var(--ped-papier); stroke: var(--ped-tekst);
stroke-width: 1.5px; vector-effect: non-scaling-stroke;
cursor: pointer;
}
.ped-szkola-znak:hover, .ped-szkola-punkt:hover { fill: var(--ped-blask); }
/* Barwy łuny płomyka — osobno dla każdej wersji strony. Stopnie gradientu
dają się stylować jak zwykłe elementy, więc płomień zmienia kolor razem
z resztą: złoty na granacie, czerwony na bieli. */
.ped-luna-0 { stop-color: var(--ped-blask); stop-opacity: .95; }
.ped-luna-1 { stop-color: var(--ped-plomien); stop-opacity: .45; }
.ped-luna-2 { stop-color: var(--ped-plomien); stop-opacity: 0; }
/* Płomień świecy — to on ma być widać, nie sam odcień obszaru. */
.ped-plomyk { pointer-events: none; }
.ped-plomyk-punkt { fill: var(--ped-knot); }
.ped-plomyk-luna { animation: ped-migot 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes ped-migot {
0%, 100% { opacity: .82; transform: scale(.94); }
50% { opacity: 1; transform: scale(1.06); }
}
/* Rozbłysk w chwili zapalenia — żeby nie przeoczyć własnego światła. */
.ped-plomyk.zaplon { animation: ped-zaplon 2.4s ease-out; transform-box: fill-box; }
@keyframes ped-zaplon {
0% { opacity: 0; }
12% { opacity: 1; }
100% { opacity: 1; }
}
/* Rozjaśniamy, zamiast animować barwę. Kolor obszaru powstaje z mieszania
(color-mix) i przeglądarka nie umie go płynnie przeliczyć — animacja koloru
dawała w połowie drogi stalowy przebłysk zamiast złota. */
.ped-diec.zaplon { animation: ped-blysk 2.4s ease-out; }
@keyframes ped-blysk {
0% { filter: drop-shadow(0 0 34px var(--ped-blask)) brightness(2.1) saturate(.7); }
100% { filter: drop-shadow(0 0 calc(6px + 22px * var(--blask)) var(--ped-blask)) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
.ped-diec.pali { animation: none; opacity: 1; }
.ped-diec, .ped-szkola-znak, .ped-szkola-punkt { transition: none; }
.ped-plomyk-luna, .ped-plomyk.zaplon, .ped-diec.zaplon { animation: none; }
}
.ped-dymek {
position: absolute; z-index: 5;
background: var(--ped-papier); color: var(--ped-tekst);
border: 1px solid var(--ped-brzeg);
border-radius: 8px; padding: 7px 12px; font-size: 13px; line-height: 1.45;
pointer-events: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
max-width: 260px;
}
.ped-dymek b { color: var(--ped-akcent-tekst, var(--ped-blask)); }
/* ── Panel diecezji ───────────────────────────────────────────────────────── */
.ped-szczegoly {
position: relative;
margin: 12px 0 0;
background: var(--ped-papier);
border: 1px solid var(--ped-brzeg);
border-left: 4px solid var(--ped-plomien);
border-radius: 0 12px 12px 0;
padding: 16px 44px 16px 20px;
max-height: 340px; overflow-y: auto;
}
.ped-szczegoly-zamknij {
position: absolute; top: 8px; right: 10px;
width: 30px; height: 30px; line-height: 1;
border: 0; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--ped-glebia);
font-size: 22px;
}
.ped-szczegoly-zamknij:hover { background: var(--ped-ziemia); color: var(--ped-tekst); }
.ped-szczegoly-tytul { margin: 0 0 4px; font-size: 1.05em; color: var(--ped-tekst); }
.ped-szczegoly-swiece { margin: 0 0 12px; font-size: .88em; color: var(--ped-zloto); font-weight: 650; }
.ped-szczegoly-ile { margin: 0 0 8px; font-size: .85em; color: var(--ped-glebia); }
.ped-szczegoly-pusto { margin: 0; font-size: .9em; color: var(--ped-glebia); }
.ped-szczegoly-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ped-szczegoly-lista li {
padding: 9px 12px; background: var(--ped-pole);
border: 1px solid var(--ped-brzeg); border-radius: 8px;
font-size: .89em; line-height: 1.5;
overflow-wrap: anywhere;
}
.ped-szczegoly-lista li.niepewna { border-left: 3px solid var(--ped-plomien); }
.ped-szcz-nazwa { display: block; font-weight: 650; }
.ped-szcz-adres { display: block; color: var(--ped-glebia); font-size: .95em; }
.ped-szcz-kontakt { display: block; margin-top: 2px; }
.ped-szcz-kontakt a { color: var(--ped-zloto); }
.ped-szcz-uwaga { display: block; margin-top: 3px; font-size: .88em; color: var(--ped-plomien); }
/* Podpowiedź nie jest pozycją legendy, tylko zdaniem do przeczytania —
dostaje więc całą szerokość pod nią, a nie miejsce między znakami. */
.ped-podpowiedz { flex-basis: 100%; color: var(--ped-glebia); opacity: .9; }
.ped-legenda {
display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
font-size: .85em; color: var(--ped-glebia); padding: 10px 6px 2px;
}
.ped-kropka { width: 11px; height: 11px; display: inline-block; margin-right: 4px; }
.ped-kropka--swieca { border-radius: 50%; background: var(--ped-plomien);
box-shadow: 0 0 10px var(--ped-blask); }
.ped-kropka--szkola { background: var(--ped-papier); border: 2px solid var(--ped-tekst);
transform: rotate(45deg); }
/* Znak diecezji w legendzie: obrys taki jak na mapie, ze śladem blasku
w środku — żeby było widać, że to samo oznaczenie mówi o dwóch rzeczach
naraz: gdzie przebiega granica i ile świec się w niej pali. */
.ped-kropka--diecezja {
background: color-mix(in srgb, var(--ped-zloto) 22%, transparent);
border: 1.5px solid var(--ped-glebia);
border-radius: 3px;
}
/* ── Modlitwa ─────────────────────────────────────────────────────────────── */
/* Tekst modlitwy dostaje szerszy oddech niż reszta strony: krótsza kolumna,
wyższa interlinia, wyraźne przerwy między zwrotkami. Modlitwę się odmawia,
a nie przegląda — układ ma prowadzić oko wers po wersie. */
.ped-modlitwa {
margin-top: 26px;
background: var(--ped-papier);
border: 1px solid var(--ped-brzeg);
border-top: 3px solid var(--ped-plomien);
border-radius: 4px 4px 14px 14px;
padding: 30px clamp(18px, 5vw, 46px) 34px;
}
.ped-modlitwa-czolo { text-align: center; margin-bottom: 26px; }
.ped-modlitwa-tytul { margin: 0 0 6px; line-height: 1.25; text-wrap: balance; color: var(--ped-tekst); }
.ped-modlitwa-podtytul {
margin: 0 0 4px; color: var(--ped-akcent-tekst, var(--ped-zloto));
font-weight: 650; font-size: .95em;
}
.ped-modlitwa-okazja {
margin: 0; color: var(--ped-glebia);
font-size: .84em; letter-spacing: .02em;
}
.ped-modlitwa-tresc {
max-width: 54ch; margin: 0 auto;
font-size: 1.02em; line-height: 1.8;
color: var(--ped-tekst);
}
/* Wers, który nie mieści się w szerokości, dostaje wcięcie — inaczej jego
przeniesiony ogon czyta się jak osobna linijka modlitwy i psuje rytm. */
.ped-modlitwa-tresc p {
margin: 0 0 1.5em;
padding-left: 1.4em; text-indent: -1.4em;
}
.ped-wezwanie {
display: block; font-weight: 700;
color: var(--ped-akcent-tekst); letter-spacing: -.005em;
}
.ped-wezwania-koncowe {
margin-top: 2em !important;
padding-top: 1.3em;
border-top: 1px solid var(--ped-brzeg);
font-weight: 650;
}
.ped-amen {
margin: 0 !important; text-align: center;
font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
font-size: .92em; color: var(--ped-akcent-tekst, var(--ped-zloto));
}
/* ── Formularze ───────────────────────────────────────────────────────────── */
.ped-form, .ped-zglos-form { margin-top: 22px; }
.ped-pole { margin-bottom: 16px; }
.ped-pole label, .ped-rodzaj legend {
display: block; font-weight: 650; margin-bottom: 5px; font-size: .95em;
color: var(--ped-tekst);
}
.ped-rzad { display: flex; gap: 8px; flex-wrap: wrap; }
.ped-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ped-siatka--trzy { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ped select, .ped input[type="text"], .ped input[type="email"],
.ped-zglos select, .ped-zglos input, .ped-zglos textarea, .ped-wykaz input[type="search"] {
width: 100%; padding: 11px 13px; font: inherit;
border: 1px solid var(--ped-brzeg); border-radius: 10px;
background: var(--ped-pole); color: var(--ped-tekst);
}
.ped ::placeholder, .ped-zglos ::placeholder, .ped-wykaz ::placeholder {
color: color-mix(in srgb, var(--ped-glebia) 84%, var(--ped-pole));
opacity: 1;
}
.ped select:focus-visible, .ped input:focus-visible,
.ped-zglos select:focus-visible, .ped-zglos input:focus-visible,
.ped-zglos textarea:focus-visible, .ped-wykaz input:focus-visible {
outline: 2px solid var(--ped-plomien); outline-offset: 2px; border-color: var(--ped-plomien);
}
.ped-rzad .ped-diecezja { flex: 1; min-width: 220px; width: auto; }
.ped-lok, .ped-zapal, .ped-wyslij, .ped-kopiuj, .ped-pobierz, .ped-fb {
font: inherit; font-weight: 700; border: 0; border-radius: 10px;
padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-block;
}
.ped-lok { background: var(--ped-ziemia); color: var(--ped-tekst); white-space: nowrap; }
.ped-lok:hover { background: var(--ped-najazd); }
/* Główny gest strony świeci tak jak świeca na mapie — złoto na granacie. */
.ped-zapal {
display: block; width: 100%; margin-top: 8px; padding: 15px 20px; font-size: 1.05em;
background: var(--ped-plomien); color: var(--ped-noc);
box-shadow: 0 0 24px rgba(255, 181, 36, .28);
}
.ped-zapal:hover { background: var(--ped-blask); }
.ped-wyslij {
display: block; width: 100%; margin-top: 8px; padding: 15px 20px; font-size: 1.05em;
background: var(--ped-blekit); color: var(--ped-noc);
}
.ped-wyslij:hover { background: #6fb6e4; }
.ped-zapal:disabled, .ped-wyslij:disabled { opacity: .5; cursor: default; box-shadow: none; }
.ped-male { font-weight: 400; font-size: .85em; color: var(--ped-glebia); }
.ped-wym { color: var(--ped-plomien); }
.ped-stanlok, .ped-info, .ped-z-info { font-size: .9em; margin: 7px 0 0; min-height: 1.3em;
color: var(--ped-glebia); }
.ped-info.blad, .ped-z-info.blad { color: var(--ped-alarm); font-weight: 600; }
.ped-info.ok, .ped-z-info.ok { color: var(--ped-zgoda); font-weight: 600; }
.ped-rodzaj { border: 0; padding: 0; margin: 0 0 16px; }
.ped-rodzaj label {
display: flex; gap: 8px; align-items: baseline;
font-weight: 400; margin-bottom: 6px; cursor: pointer;
color: var(--ped-tekst);
}
.ped-rodzaj input { width: auto; }
/* ── Mapa i Słowo obok siebie ─────────────────────────────────────────────
Na szerokim ekranie Słowo stoi po prawej stronie mapy — w zasięgu wzroku
w chwili, gdy zapala się świeca. Na wąskim schodzi pod mapę, bo kolumna
szerokości kciuka nie nadaje się do czytania Pisma. */
.ped-obok {
display: grid; gap: 14px;
grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
align-items: start;
}
@media (max-width: 900px) {
.ped-obok { grid-template-columns: 1fr; }
}
/* ── Słowo Boże ───────────────────────────────────────────────────────────── */
.ped-slowo {
padding: 22px 24px 20px;
background: var(--ped-papier);
border: 1px solid var(--ped-brzeg); border-left: 4px solid var(--ped-zloto);
border-radius: 0 14px 14px 0;
position: sticky; top: 14px;
}
.ped-slowo-nadpis {
margin: 0 0 12px; font-size: .74em; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--ped-akcent-tekst, var(--ped-zloto));
}
.ped-slowo-zacheta { margin: 0; color: var(--ped-glebia); font-size: .95em; line-height: 1.6; }
.ped-slowo-tresc { margin: 0; padding: 0; border: 0; }
.ped-slowo-tekst {
font-size: 1.16em; line-height: 1.7; margin: 0 0 .7em; color: var(--ped-tekst);
}
.ped-slowo-sigla {
font-style: normal; font-weight: 700; color: var(--ped-zloto); font-size: .95em;
}
/* Świeże słowo oddycha przez kilka chwil: łuna wokół ramki i lekki przyrost
jasności liter. Puls jest wolny i wygasa sam — migający tekst nie daje się
czytać, a o czytanie tu chodzi. */
.ped-slowo.swieze { animation: ped-oddech 2.6s ease-in-out 3; }
@keyframes ped-oddech {
0%, 100% { box-shadow: 0 0 0 rgba(255, 181, 36, 0); }
50% { box-shadow: 0 0 26px rgba(255, 181, 36, .34); }
}
.ped-slowo.swieze .ped-slowo-tekst { animation: ped-wnikanie 1.1s ease-out; }
@keyframes ped-wnikanie {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: none; }
}
/* ── Zapisy pod Słowem ───────────────────────────────────────────────────── */
.ped-slowo-zapisy {
margin-top: 16px; padding: 14px 16px; text-align: center;
background: color-mix(in srgb, var(--ped-plomien) 14%, var(--ped-papier));
border: 1px solid var(--ped-plomien); border-radius: 11px;
}
.ped-slowo-zapisy p { margin: 0 0 10px; font-size: .93em; color: var(--ped-tekst); }
.ped-slowo-przycisk {
display: block; padding: 16px 20px; border-radius: 10px;
background: var(--ped-plomien); color: var(--ped-noc);
font-weight: 800; text-decoration: none;
font-size: 1.14em; letter-spacing: .01em;
}
.ped-slowo-przycisk:hover { background: var(--ped-blask); }
.ped-pasek-zapisy {
float: right; text-transform: none; letter-spacing: 0;
font-size: 1.05em; font-weight: 650; color: var(--ped-zloto); text-decoration: none;
}
.ped-pasek-zapisy:hover { text-decoration: underline; }
/* Zaproszenie do zapisu daje o sobie znać pulsowaniem — ale POWOLI.
Cykl trwa prawie dwie sekundy i wygasa sam po kilku powtórzeniach.
Szybkie miganie bywa niebezpieczne dla osób z padaczką światłoczułą
i męczy wszystkich pozostałych; wolne tętno przyciąga wzrok i nie razi. */
.ped-slowo-przycisk.migoce,
.ped-zapisy-przycisk.migoce { animation: ped-tetno 1.9s ease-in-out 5; }
@keyframes ped-tetno {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 181, 36, 0); }
50% { transform: scale(1.035); box-shadow: 0 0 30px 6px var(--ped-blask); }
}
@media (prefers-reduced-motion: reduce) {
.ped-slowo-przycisk.migoce, .ped-zapisy-przycisk.migoce { animation: none; }
}
/* Późniejsze przypomnienie — jedno zdanie, bez natarczywości. */
.ped-przypomnienie {
margin-top: 10px; padding: 10px 14px; border-radius: 9px;
background: color-mix(in srgb, var(--ped-plomien) 16%, var(--ped-papier));
border: 1px solid var(--ped-plomien);
font-size: .93em; color: var(--ped-tekst);
animation: ped-wejscie .9s ease-out;
}
@media (prefers-reduced-motion: reduce) { .ped-przypomnienie { animation: none; } }
/* ── Prośby o słowo ───────────────────────────────────────────────────────── */
.ped-prosby { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ped-brzeg); }
.ped-prosby-wstep { margin: 0 0 8px; font-size: .85em; color: var(--ped-glebia); }
.ped-prosby-rzad { display: flex; flex-wrap: wrap; gap: 7px; }
.ped-prosba {
font: inherit; font-size: .86em; font-weight: 650; cursor: pointer;
padding: 7px 13px; border-radius: 18px;
border: 1px solid var(--ped-brzeg);
background: var(--ped-pole); color: var(--ped-tekst);
}
.ped-prosba:hover { background: var(--ped-ziemia); border-color: var(--ped-zloto); }
.ped-prosba:focus-visible { outline: 2px solid var(--ped-plomien); outline-offset: 2px; }
.ped-prosba:disabled { opacity: .5; cursor: default; }
.ped-prosby-info { margin: 8px 0 0; font-size: .85em; color: var(--ped-glebia); min-height: 1.2em; }
.ped-prosby-info.blad { color: var(--ped-alarm); }
@media (prefers-reduced-motion: reduce) {
.ped-slowo.swieze, .ped-slowo.swieze .ped-slowo-tekst { animation: none; }
}
/* ── Pieśń ────────────────────────────────────────────────────────────────── */
.ped-piesn { margin-top: 24px; }
.ped-piesn-tytul { margin: 0 0 12px; color: var(--ped-tekst); }
/* Obraz pokazujemy CAŁY. Ikony Jasnogórskiej nie przycina się do paska —
albo widać ją w całości, albo nie ma jej wcale. Stąd `contain` i stała
proporcja ramki zamiast wykroju na siłę. */
.ped-piesn-obrazy { margin: 0; }
.ped-obrazy {
position: relative; aspect-ratio: 3 / 2;
background: var(--ped-noc);
border: 1px solid var(--ped-brzeg); border-radius: 14px;
overflow: hidden;
}
.ped-obraz {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
opacity: 0; transition: opacity 2.2s ease-in-out;
}
.ped-obraz.widoczny { opacity: 1; }
.ped-powieksz {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 38px; height: 38px; line-height: 1;
font: inherit; font-size: 18px; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
background: rgba(27, 29, 70, .80); color: #fff;
}
.ped-powieksz:hover { background: rgba(27, 29, 70, .94); }
.ped-powieksz:focus-visible { outline: 2px solid var(--ped-blask); outline-offset: 2px; }
/* Pełny ekran: obraz dostaje całą przestrzeń, ramka schodzi z drogi. */
.ped-obrazy:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; }
.ped-obrazy:fullscreen .ped-obraz { object-fit: contain; }
/* Zapasowe rozsunięcie tam, gdzie pełny ekran jest niedostępny. */
.ped-piesn.ped-rozsuniete .ped-obrazy { aspect-ratio: 16 / 10; }
.ped-piesn.ped-rozsuniete {
position: relative;
width: 100vw; margin-left: 50%; transform: translateX(-50%);
padding: 0 clamp(12px, 4vw, 60px);
}
.ped-piesn-pult { padding: 16px 2px 0; }
/* Nazwa pieśni stoi POD paskiem odtwarzania — pasek jest tym, po co się tu
przychodzi, więc to on ma być pierwszy pod ręką. */
.ped-piesn-jedna + .ped-piesn-jedna { margin-top: 16px; }
.ped-piesn-nazwa {
margin: 6px 2px 0; color: var(--ped-akcent-tekst);
font-weight: 650; font-size: .95em; letter-spacing: .02em;
}
.ped-audio { width: 100%; display: block; }
.ped-piesn-podpis {
margin: 8px 2px 0; text-align: right; font-style: italic;
color: var(--ped-glebia); font-size: .85em;
}
.ped-piesn-stopka { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
.ped-obraz { transition: none; }
}
@media (max-width: 640px) {
.ped-obrazy { aspect-ratio: 4 / 3; }
}
/* ── Udostępnianie ────────────────────────────────────────────────────────── */
.ped-udostepnij {
margin-top: 18px; padding: 16px 20px; background: var(--ped-ziemia);
border-radius: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.ped-udostepnij p { margin: 0; font-weight: 600; color: var(--ped-tekst); }
.ped-fb { background: var(--ped-blekit); color: var(--ped-noc); }
.ped-kopiuj, .ped-pobierz { background: var(--ped-pole); color: var(--ped-tekst); }
.ped-kopiuj:hover, .ped-pobierz:hover { background: var(--ped-najazd); }
.ped-udost-info { flex-basis: 100%; margin: 0; }
/* ── Intencje ─────────────────────────────────────────────────────────────── */
.ped-intencje { margin-top: 28px; }
.ped-intencje h3 { margin-bottom: 10px; color: var(--ped-tekst); }
.ped-intencje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ped-intencje li {
background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
border-radius: 10px; padding: 12px 16px;
}
.ped-int-tresc { display: block; line-height: 1.55; }
.ped-int-kto { display: block; font-size: .82em; color: var(--ped-akcent-tekst, var(--ped-zloto)); margin-top: 4px; }
/* ── Zachęta i wykaz szkół ────────────────────────────────────────────────── */
.ped-zacheta { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ped-brzeg); }
.ped-zacheta h3 { margin-bottom: .4em; color: var(--ped-tekst); }
/* WIELKOŚĆ PISMA WPISANA WPROST, ŻEBY POZIOM NAGŁÓWKA BYŁ WOLNY.
Tytuł modułu zgłoszeniowego stał zawsze jako `h3` — także tam, gdzie nad nim
był sam `h1` strony, czyli z przeskokiem poziomu (zmierzone 6.09.2026 na
`/zglos-szkole`). Czytnik ekranu ogłasza wtedy „nagłówek trzeciego stopnia"
pod nagłówkiem pierwszego i człowiek słyszy, że coś po drodze pominął.
Poziom musi iść za miejscem w treści, a nie za wyglądem — więc wygląd
dostaje własny zapis: 1.17em to dokładnie tyle, ile przeglądarka dawała
`h3` (19,89 px przy podstawie 17 px). Dzięki temu ta sama klasa wygląda
identycznie jako `h2` na `/zglos-szkole` i jako `h3` w module na stronie
modlitwy, gdzie nad nią stoi `h2` i poziom jest poprawny. */
.ped-zglos-tytul { margin: 22px 0 14px; color: var(--ped-tekst); font-size: 1.17em; }
.ped-wykaz-gora {
display: flex; gap: 14px; justify-content: space-between;
align-items: center; flex-wrap: wrap; margin-bottom: 20px;
}
.ped-wykaz-licznik { margin: 0; }
.ped-wykaz-licznik strong { color: var(--ped-zloto); font-size: 1.3em; }
.ped-szukaj { flex: 1; min-width: 240px; max-width: 340px; }
.ped-woj-grupa { margin-bottom: 26px; }
.ped-woj-tytul {
margin: 0 0 10px; font-size: 1.05em; text-transform: uppercase;
letter-spacing: .07em; color: var(--ped-zloto);
display: flex; align-items: baseline; gap: 10px;
}
.ped-woj-ile {
font-size: .8em; background: var(--ped-ziemia); color: var(--ped-glebia);
border-radius: 20px; padding: 2px 10px; letter-spacing: 0;
}
.ped-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ped-szkola {
background: var(--ped-papier); border: 1px solid var(--ped-brzeg);
border-radius: 10px; padding: 13px 16px;
overflow-wrap: anywhere;
}
.ped-szkola--niepewna { border-left: 3px solid var(--ped-plomien); }
.ped-szkola-nazwa { margin: 0 0 4px; font-weight: 650; line-height: 1.4; }
.ped-szkola-adres { margin: 0 0 6px; font-size: .88em; color: var(--ped-glebia); }
.ped-szkola-diec { display: block; font-size: .92em; opacity: .85; }
.ped-szkola-kontakt { margin: 0; font-size: .84em; display: flex; gap: 10px; flex-wrap: wrap; }
.ped-szkola-kontakt a { color: var(--ped-zloto); }
.ped-brak { color: var(--ped-plomien); font-style: italic; }
.ped-uwaga { margin: 6px 0 0; font-size: .8em; color: var(--ped-plomien); }
.ped-nic { padding: 20px; text-align: center; color: var(--ped-glebia); }
.ped-wykaz-stopka { margin-top: 8px; font-size: .9em; color: var(--ped-glebia); }
.ped-stopka {
margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--ped-brzeg);
font-size: .82em; color: var(--ped-glebia); text-align: center; line-height: 1.6;
}
@media (max-width: 640px) {
.ped-siatka { grid-template-columns: 1fr; }
.ped-zapal, .ped-wyslij { padding: 16px 20px; }
.ped-lok { width: 100%; }
.ped-szczegoly { padding: 16px 40px 16px 16px; }
}
/* ── oprawa strony ────────────────────────────────────────────────────────
Ciemny granat i jedno ciepłe światło. Wokół mapy ma być cicho —
to mapa i modlitwa są tu treścią. */
/* ── PALETA STRONY: MARYJNA JEST PODSTAWĄ, NIE OPCJĄ ───────────────────────
Ks. Andrzej, 2.09.2026: „niech on się zawsze odpala jako pierwszy".
„Zawsze" znaczy także wtedy, gdy skrypt się nie wczyta albo gdy strona
go w ogóle nie ma — a wykaz szkół i kalendarium nie mają. Dlatego motyw
maryjny nie jest nadpisaniem, tylko WARTOŚCIĄ WYJŚCIOWĄ; noc jest tym,
co się dokłada, gdy ktoś ją wybierze. Odwrotnie niż do dziś. */
/* ── GRUNT STRONY ──────────────────────────────────────────────────────────
JEDNA WERSJA STOI NA CIEMNYM, TRZY NA JASNYM.
Ks. Andrzej, 6.09.2026: strona pielgrzymkowa po stronie GOTÓW ma być
kolorystycznie jak pielgrzymkaed.pl. To rozstrzyga pytanie, które audyt
zostawił otwarte — ustępuje GOTÓW.
── TO ODWRACA POLECENIE Z 2.09.2026 ────────────────────────────────────
2.09 wieczorem polecenie brzmiało odwrotnie: „przywróć ciemne tło
w wersji maryjnej". Stał za nim argument, który nie znika wraz ze zmianą
decyzji: jeśli maryjna też będzie jasna, to czym różni się od jasnej?
Odpowiedź jest teraz inna niż wtedy — RÓŻNI SIĘ PALETĄ, nie gruntem.
Maryjna mówi granatem #0e417c i złotem #fac647 ze strony pielgrzymki;
jasna zostaje przy swoim błękicie #093e7a / #2b84be. Grunt mają wspólny,
bo taki jest grunt pielgrzymkaed.pl — biel.
── SKĄD TE DWIE BARWY ──────────────────────────────────────────────────
Nie z arkusza, tylko z paska pomostu `.ped-most`, który stoi po obu
stronach dzieła (`mu-plugins/pielgrzymka-spojnosc.php`). To jedyne
miejsce, w którym oba serwisy mówiły tą samą paletą — więc to ono jest
wzorcem, a nie odwrotnie. Granat #0e417c na bieli daje 10,17 : 1.
── ZŁOTO NA BIELI NIE JEST PISMEM ──────────────────────────────────────
#fac647 na bieli to 1,59 : 1. Złoto zostaje powierzchnią, płomieniem
i kreską; pismo, które ma być „złote", jest granatem. Stąd dwie różne
wartości `--zloto` i `--zloto-pismo` — ta sama pułapka, którą wersja
jasna rozwiązała wcześniej. */
:root {
/* ── PALETA MARKI, 18.09.2026 ──────────────────────────────────────────
Polecenie ks. Andrzeja: dostosować barwy całej strony do skryptu social
media „I Ogólnopolska Pielgrzymka ED" i do siedmiu plansz z wrzutni.
Skrypt podaje sześć barw: #E2B354 Mustard, #25276B Navy, #2E4473 Steel,
#DCDFF2 Lawenda, #FFFFFF, #1A1A1A. Dwie wartości, których skrypt nie
podaje, są ZMIERZONE NA pielgrzymkaed.pl (18.09.2026, przeglądarką):
papier #F7F3E8 i #FDFBF6 - tam marka stoi w praktyce i ona rozstrzyga
o spójności. Pismem bieżącym tamtej strony jest Steel #2E4473.
CO SIĘ ZMIENIŁO. Do dziś grunt i pismo brały „granat pomostu" #0e417c
i złoto #fac647 - barwy dobrane po to, żeby zgadzać się z pomostem KSM,
a nie ze skryptem dzieła. Zmierzone przed zmianą na ośmiu podstronach:
#0e417c był barwą 271 napisów, a panele stały na zimnych błękitach
#f4f8fd, #eef3fb, #dce7f5. Marka dzieła nie miała na stronie ani jednego
ze swoich sześciu odcieni w roli wiodącej.
WERSJA „JASNA" MIAŁA JE OD DAWNA - i to z niej biorą się te wartości.
Zmienia się to, że są teraz wersją domyślną, czyli tą, którą widzi
człowiek, który niczego nie wybierał. */
--noc: #ffffff; /* grunt strony — biel, jak pielgrzymkaed.pl */
--tlo: #F7F3E8; /* plansza i panele — papier zmierzony na PED */
--papier: #FDFBF6; /* karty — jaśniejszy papier stamtąd */
--tekst: #25276B; /* Navy ze skryptu — 12,42 : 1 na bieli */
--przygaszony: #2E4473; /* Steel — pismo bieżące pielgrzymkaed.pl */
--brzeg: #E3DCCB; /* włos ramki — ciepły, pod papier */
/* ZŁOTO MA DWIE ROLE. Na bieli rozchodzą się one całkowicie:
powierzchnia zostaje złota, pismo musi być granatowe. */
--zloto: #E2B354; /* POWIERZCHNIA i kreska — Mustard ze skryptu */
--zloto-pismo: #2E4473; /* PISMO — złoto na bieli dałoby 1,84 : 1 */
--plomien: #fac647; /* PŁOMIEŃ ŚWIECY zostaje — to grafika, nie marka */
--blask: #e0a500; /* poświata; na bieli ciemniejsza niż w nocy */
--na-zlocie: #1A1A1A; /* Antracyt ze skryptu — 9,54 : 1 na złocie */
--blekit: #2E4473;
}
/* Wersje stojące na bieli — wartości, które do 2.09.2026 były podstawą. */
:root:is([data-barwy="jasny"], [data-barwy="patriotyczny"]) {
--noc: #ffffff;
--tlo: #F7F3E8; /* ten sam papier, co w wersji domyślnej */
--papier: #FDFBF6;
--tekst: #25276B; /* Navy ze skryptu — 12,42 : 1 na bieli */
--przygaszony: #2E4473;
--brzeg: #E3DCCB;
--zloto: #E2B354; /* POWIERZCHNIA i światło */
--zloto-pismo: #2E4473; /* PISMO na bieli — 5,70 : 1 */
--plomien: #E2B354;
--blask: #e0a500; /* poświata; na bieli ciemniejsza niż w nocy */
--na-zlocie: #1A1A1A; /* Antracyt ze skryptu — 9,54 : 1 na złocie */
--blekit: #2E4473; /* Steel na jasnym gruncie — 7,53 : 1 */
}
/* Noc — świeca w mroku. Dobra dla mapy świateł, więc zostaje do wyboru.
DWA PRZEŁĄCZNIKI, JEDEN WYNIK. Strona ma dwa niezależne oznaczenia motywu:
`data-barwy` (wersja kolorystyczna dzieła: maryjna, jasna, biało-czerwona,
ciemna) i `data-theme` (motyw wspólny GOTÓW, ustawiany także z preferencji
systemu). Ten blok reagował wyłącznie na pierwsze z nich.
ZMIERZONE 18.09.2026, motyw ciemny systemu, pięć podstron: skrypt stawia
na `html` `data-theme="dark" data-barwy="maryjny"`. Wspólny motyw szedł
więc w noc i malował grunt na ciemno, a paleta STRONY zostawała jasna -
granatowe pismo na granatowym gruncie. 92 napisy poniżej progu, m.in.
„Czym jest szkoła przyjazna" 1,12 : 1 i cały program dnia 1,90 : 1.
Wada jest starsza niż dzisiejsza zmiana barw; dziś ją tylko zmierzono.
Wyraźny wybór jasnej wersji dzieła nadal wygrywa - stąd oba `:not()`. */
:root[data-barwy="ciemny"] {
/* Noc też idzie w rodzinę marki: #1B1D46 to grunt ciemnych plansz
pielgrzymkaed.pl, a #DCDFF2 Lawenda jest w skrypcie wprost przypisana
do pisma na granacie. Płomień i poświata zostają — to świeca, nie znak. */
--noc: #101230;
--tlo: #1B1D46;
--papier: #242A5C;
--tekst: #DCDFF2;
--przygaszony: #AEB6DC;
--brzeg: #333A6B;
--zloto: #E2B354;
--zloto-pismo: #E2B354; /* na nocy złoto jest czytelne także jako pismo */
--plomien: #ffb524;
--blask: #EBCB86;
--na-zlocie: #1A1A1A;
--blekit: #DCDFF2; /* błękit maryjny na nocy — 7,21 : 1 */
}
/* ── MOTYW MARYJNY NA POZIOMIE CAŁEJ STRONY ────────────────────────────────
Ks. Andrzej, 2.09.2026: „zrób kolor maryjny koniecznie spójny ze stroną
i niech on się zawsze odpala jako pierwszy".
── CZEGO NIE ZAUWAŻYŁEM ZA PIERWSZYM RAZEM ─────────────────────────────
Motyw był tylko wewnątrz modułów `.ped`. Skutek zmierzony na telefonie:
strona główna świeciła bielą, a wykaz szkół i kalendarium zostawały nocne,
bo tam żadnego modułu `.ped` nie ma. Dwa ekrany tego samego dzieła w dwóch
różnych światach — dokładnie to, czego mieliśmy się pozbyć.
Motyw musi więc siedzieć na `html`, a nie tylko na kafelku w środku strony.
── BARWY ───────────────────────────────────────────────────────────────
Te same, co na pielgrzymkaed.pl: biel jako grunt, granat #25276B jako
pismo (10,17 : 1), złoto #E2B354 jako światło. Do tego błękit maryjny
#2E4473 na jasnym gruncie (5,24 : 1). Pismo poboczne #2E4473 — zmierzone
6,0 : 1 na bieli, czyli czytelne także wtedy, gdy jest małe. */
/* Na jasnym gruncie odnośnik prowadzi błękitem maryjnym, nie złotem. */
/* Odcień bierzemy z żetonu, a nie wpisujemy go tu na sztywno: maryjna
prowadzi granatem pomostu #0e417c, jasna i biało-czerwona zostają przy
granacie marki #2E4473. Do 6.09.2026 stała tu jedna wartość dla wszystkich
trzech wersji — i maryjna, choć ma własną paletę, brała cudzy granat. */
:root:not([data-barwy="ciemny"]) .ped a,
:root:not([data-barwy="ciemny"]) .szept a,
:root:not([data-barwy="ciemny"]) .opr a { color: var(--zloto-pismo, #2E4473); }
/* Znak i płomyk nad tytułem: na bieli potrzebują ciemniejszego rdzenia. */
:root:not([data-barwy="ciemny"]) .plomyk {
background: linear-gradient(to top, transparent, #e0a500);
box-shadow: 0 0 22px 4px rgba(250, 198, 71, .55);
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--noc); color: var(--tekst);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
line-height: 1.7; font-size: 17px;
}
.opr { max-width: 1020px; margin: 0 auto; padding: 0 18px 80px; }
.czolo { padding: 58px 0 34px; text-align: center; }
.czolo-etykieta {
font-size: .74em; letter-spacing: .2em; text-transform: uppercase;
color: var(--zloto-pismo, var(--zloto)); margin: 0 0 14px; font-weight: 700;
}
.czolo h1 {
font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1;
margin: 0 auto 18px; max-width: 18ch; text-wrap: balance; letter-spacing: -.02em;
}
.czolo p { margin: 0 auto; max-width: 54ch; color: var(--przygaszony); font-size: 1.06em; }
/* Płomyk nad tytułem — ten sam gest, który potem powtarza się na mapie. */
.plomyk {
width: 3px; height: 46px; margin: 0 auto 26px;
background: linear-gradient(to top, transparent, var(--plomien));
border-radius: 3px;
box-shadow: 0 0 26px 5px rgba(255, 181, 36, .42);
}
/* ── KOLOR ODNOŚNIKÓW ─────────────────────────────────────────────────────
Ten arkusz nigdy nie ustawiał koloru linków. Każdy odnośnik bez własnej
klasy dostawał domyślny granat przeglądarki (#0000ee) i na ciemnym tle
dawał kontrast 1,80:1 przy wymaganych 4,5:1 — czyli był praktycznie
niewidoczny. Zmierzone 28.08.2026 na stronie głównej: trzy odnośniki
w akapicie „możesz iść z nami na trzy sposoby".
Reguła jest u korzenia, bo inaczej ta sama wada wróci przy pierwszym
nowym akapicie z linkiem. */
/* ODNOŚNIK WEWNĄTRZ MODUŁU BIERZE BARWĘ MODUŁU, NIE STRONY.
Ta reguła ma 0,1,1 i bije każdą regułę klasową odnośnika (0,1,0) — także
`.ped-pasek-zapisy { color: var(--ped-zloto) }`. Skutek po włączeniu motywu
biało-czerwonego: „zapisz rodzinę →" i odnośnik w legendzie mapy zostawały
złote na bieli, 1,55 : 1. Zmierzone 1.09.2026.
`--ped-akcent-tekst` istnieje we wszystkich trzech motywach i jest w każdym
dobrany do gruntu: na granacie złoto (bez zmian, 8,9 : 1), na jasnym #2E4473,
na biało-czerwonym #b30e20 (7,00 : 1). Poza modułem zmiennej nie ma i wtedy
działa wartość zapasowa, czyli złoto strony — `.szept a` i `.opr a` bez zmian. */
.ped a, .szept a, .opr a {
color: var(--ped-akcent-tekst, var(--zloto-pismo, var(--zloto)));
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 3px;
}
.ped a:hover, .szept a:hover, .opr a:hover {
color: #E2B354; text-decoration: underline; text-underline-offset: 3px; }
/* Na jasnym gruncie poświata jest za jasna na pismo — wchodzi granat. */
:root:not([data-barwy="ciemny"]) .ped a:hover,
:root:not([data-barwy="ciemny"]) .szept a:hover,
:root:not([data-barwy="ciemny"]) .opr a:hover { color: var(--tekst); }
.ped a:visited, .szept a:visited, .opr a:visited { color: var(--zloto-pismo, var(--zloto)); }
.ped a:focus-visible, .szept a:focus-visible, .opr a:focus-visible {
outline: 2px solid var(--zloto); outline-offset: 2px; border-radius: 3px;
}
/* Odnośniki, które są przyciskami, mają własne tło i własny kolor — te
reguły nie mogą ich przemalować.
WYKAZ BYŁ NIEPEŁNY. Reguła złotego pisma z 28.08.2026 przemalowała także
`.ped-slowo-przycisk` („Zapisz rodzinę") i `.ped-fb` — złote litery na
pomarańczowym tle dają 1,14:1 przy wymaganych 4,5:1. Główny przycisk
strony z modlitwą był przez to praktycznie niewidoczny. Zmierzone
przeglądarką, nie odczytane z arkusza.
Dlatego wyłączenie jest teraz oparte NA ROLI, nie na wykazie nazw:
każdy odnośnik, który sam maluje sobie tło, sam odpowiada za swój kolor. */
.ped a.przycisk, .ped a[class*="btn"], .ped a[class*="wyj"],
.ped-nav a, .ped a.wysylam,
.ped a.ped-slowo-przycisk, .ped a.ped-zapisy-przycisk, .ped a.ped-fb,
.ped a.ped-lok, .ped a.ped-zapal, .ped a.ped-wyslij,
.ped a.ped-kopiuj, .ped a.ped-pobierz,
.ped a[class*="przycisk"], .szept a[class*="przycisk"], .opr a[class*="przycisk"] {
color: inherit;
}
/* TA SAMA ZASADA MUSI PRZEBIĆ REGUŁĘ JASNEGO GRUNTU.
Wyłączenie wyżej ma szczegółowość 0,2,1, a reguła barwiąca odnośniki na
jasnym gruncie — 0,3,1, więc wygrywała i malowała błękitem także przyciski,
które same mają tło. Skutek zmierzony: „Udostępnij na Facebooku" — błękit
na granacie, 1,94 : 1. Prefiks `:root:not(...)` wyrównuje szczegółowość
i przywraca zasadę: kto maluje sobie tło, odpowiada za swój kolor. */
:root:not([data-barwy="ciemny"]) .ped a.przycisk,
:root:not([data-barwy="ciemny"]) .ped a[class*="btn"],
:root:not([data-barwy="ciemny"]) .ped a[class*="wyj"],
:root:not([data-barwy="ciemny"]) .ped a.wysylam,
:root:not([data-barwy="ciemny"]) .ped a.ped-slowo-przycisk,
:root:not([data-barwy="ciemny"]) .ped a.ped-zapisy-przycisk,
:root:not([data-barwy="ciemny"]) .ped a.ped-fb,
:root:not([data-barwy="ciemny"]) .ped a.ped-lok,
:root:not([data-barwy="ciemny"]) .ped a.ped-zapal,
:root:not([data-barwy="ciemny"]) .ped a.ped-wyslij,
:root:not([data-barwy="ciemny"]) .ped a.ped-kopiuj,
:root:not([data-barwy="ciemny"]) .ped a.ped-pobierz,
:root:not([data-barwy="ciemny"]) .ped a[class*="przycisk"],
:root:not([data-barwy="ciemny"]) .szept a[class*="przycisk"],
:root:not([data-barwy="ciemny"]) .opr a[class*="przycisk"] {
color: inherit;
}
/* Przyciski o granatowym tle piszą bielą — `inherit` dałoby im granat
na granacie (zmierzone 1,00 : 1). */
:root:not([data-barwy="ciemny"]) .ped a.ped-fb,
:root:not([data-barwy="ciemny"]) .ped a.ped-wyslij { color: #ffffff; }
.szept {
display: flex; gap: 13px; align-items: flex-start;
background: var(--tlo); border: 1px solid var(--brzeg);
border-left: 3px solid var(--plomien);
border-radius: 0 12px 12px 0; padding: 15px 20px; margin-bottom: 30px;
color: var(--przygaszony); font-size: .95em;
}
.szept p { margin: 0; }
.dzial { margin-top: 62px; }
.dzial h2 {
font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 10px;
text-wrap: balance; letter-spacing: -.01em;
}
.dzial > p { margin: 0 auto 24px; max-width: 58ch; color: var(--przygaszony); }
.srodek { text-align: center; }
.siatka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.karta {
background: var(--tlo); border: 1px solid var(--brzeg);
border-radius: 14px; padding: 22px 24px; text-align: left;
}
/* NAGŁÓWEK KARTY. Brał `--blask`, czyli barwę POŚWIATY wokół płomienia.
Na nocy wychodziło to dobrze przypadkiem; na bieli dało 1,22 : 1.
Poświata jest grafiką, nie pismem — nagłówek bierze barwę pisma. */
.karta h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--tekst); }
.karta p { margin: 0; font-size: .96em; color: var(--przygaszony); }
.stopka {
margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--brzeg);
font-size: .86em; color: var(--przygaszony); text-align: center;
}
/* ── Flaga Rzeczypospolitej — tylko w wersji biało-czerwonej ────────────────
Znak, że to pielgrzymka ogólnopolska. Rysowana dwoma pasami zamiast pliku
graficznego: proporcja 5:8 jak w ustawie o godle, barwy te same co reszta
wersji. Obrys jest konieczny — biały pas na białym tle zniknąłby bez niego. */
.ped-flaga { display: none; }
.ped[data-motyw="patriotyczny"] .ped-flaga,
.ped-piesn[data-motyw="patriotyczny"] .ped-flaga,
.ped-modlitwa[data-motyw="patriotyczny"] .ped-flaga {
display: inline-flex; flex-direction: column; width: 40px; height: 25px;
border: 1px solid rgba(0,0,0,.22); border-radius: 2px; overflow: hidden;
vertical-align: -5px; margin-right: 10px; flex: none;
box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.ped-flaga i { display: block; height: 50%; }
.ped-flaga i:first-child { background: #ffffff; }
.ped-flaga i:last-child { background: #ce1126; }
/* Podpis przy fladze — mówi wprost, co ta wersja znaczy.
Wyśrodkowany na polecenie ks. Andrzeja z 2.09.2026; flaga zostaje
na początku napisu. Dlatego `block`, a nie `flex`: przy `flex` napis
trzymał się lewej krawędzi, a po zawinięciu na wąskim ekranie flaga
zostawała sama przy pierwszym wierszu. Jako element wierszowy flaga
płynie z tekstem — stoi przed pierwszym słowem, a wszystkie wiersze
środkują się razem z nią. */
.ped-ogolnopolska { display: none; }
.ped[data-motyw="patriotyczny"] .ped-ogolnopolska {
display: block; text-align: center; text-wrap: balance; margin: 14px 0 4px;
font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
line-height: 1.7; color: var(--ped-akcent-tekst);
}
/* ── Czytelność przycisków w wersji jasnej ──────────────────────────────────
Pomiar pokazał to, czego na oko nie widać: jasny tekst (#e4ecf7) na złocie
(#f0a30a) daje kontrast 1.77, a na błękicie (#2b84be) — 3.43. Przy progu 4.5
znaczy to, że napis „Zapal światło" i „Zapisz rodzinę" są słabo czytelne
właśnie tam, gdzie muszą być najczytelniejsze: na przyciskach do działania.
Na złocie tekst musi być CIEMNY — złoto jest jasne i nie da się na nim
położyć jasnego pisma. Błękit przyciemniamy, bo tam działa odwrotnie. */
.ped[data-motyw="jasny"] .ped-zapal,
.ped[data-motyw="jasny"] .ped-zapisy-przycisk,
.ped[data-motyw="jasny"] .ped-motyw.wybrany,
.ped-piesn[data-motyw="jasny"] .ped-motyw.wybrany,
.ped-modlitwa[data-motyw="jasny"] .ped-motyw.wybrany {
color: #25276B; /* granat na złocie — kontrast 8.4 */
font-weight: 700;
}
/* ── MODUŁ STOJĄCY SAMODZIELNIE MUSI MIEĆ TE SAME SELEKTORY ────────────────
Zmierzone 6.09.2026 na `/zglos-szkole`, wersja jasna: przycisk „Prześlij"
daje 3,43 : 1 przy wymaganych 4,5 : 1 — pismo #e4ecf7 na błękicie #2b84be.
Na `/modlitwa` ten sam przycisk daje 7,01 : 1.
Przyczyna jest lustrzanym odbiciem tej z motywu ciemnego: reguły barw
przycisków były zapisane WYŁĄCZNIE jako potomne `.ped`. Na stronie modlitwy
`.ped-zglos` leży w `.ped` i regułę łapie; na `/zglos-szkole` moduł stoi sam,
bez rodzica, więc spada do wartości podstawowej — a ta jest dobrana pod
ciemny grunt. Bloki zmiennych (wiersze 106, 171, 250) mają oba selektory
od dawna; brakowało ich przy samych przyciskach. */
.ped[data-motyw="jasny"] .ped-fb,
.ped[data-motyw="jasny"] .ped-wyslij,
.ped-zglos[data-motyw="jasny"] .ped-fb,
.ped-zglos[data-motyw="jasny"] .ped-wyslij {
background: #1c5d8c; /* ciemniejszy błękit — kontrast 6.1 z bielą */
color: #ffffff;
}
.ped[data-motyw="jasny"] .ped-fb:hover,
.ped[data-motyw="jasny"] .ped-wyslij:hover,
.ped-zglos[data-motyw="jasny"] .ped-fb:hover,
.ped-zglos[data-motyw="jasny"] .ped-wyslij:hover { background: #164a70; }
/* To samo w wersji biało-czerwonej: przyciski akcji z białym pismem na pełnej
czerwieni — żywe i czytelne naraz. */
.ped[data-motyw="patriotyczny"] .ped-fb,
.ped[data-motyw="patriotyczny"] .ped-wyslij,
.ped-zglos[data-motyw="patriotyczny"] .ped-fb,
.ped-zglos[data-motyw="patriotyczny"] .ped-wyslij {
background: #c8102e; color: #ffffff;
}
.ped[data-motyw="patriotyczny"] .ped-fb:hover,
.ped[data-motyw="patriotyczny"] .ped-wyslij:hover,
.ped-zglos[data-motyw="patriotyczny"] .ped-fb:hover,
.ped-zglos[data-motyw="patriotyczny"] .ped-wyslij:hover { background: #b30e20; }
/* ── I MOTYW CIEMNY, ŻEBY KOMPLET BYŁ ZAMKNIĘTY ────────────────────────────
Barwy ciemne przycisk brał dotąd z wartości podstawowej `.ped-wyslij`
(0,1,0), bo ciemny był motywem domyślnym i własnej reguły nie potrzebował.
Po dopisaniu selektorów samodzielnych (`.ped-zglos[data-motyw="…"]`, 0,3,0)
przestało to wystarczać: moduł zagnieżdżony na `/modlitwa` zachowuje własne
`data-motyw="maryjny"`, więc pod nocnym rodzicem przycisk zaczął brać złoto.
Zmierzone 6.09.2026: 6,84 : 1 — czytelne, ale nie z tej wersji.
Reguła stoi PO tamtych i ma tę samą siłę, więc rodzic rozstrzyga.
Wartości są dokładnie te, które motyw ciemny dawał wcześniej: błękit ze
znaku i noc jako pismo, 6,36 : 1. */
.ped[data-motyw="ciemny"] .ped-fb,
.ped[data-motyw="ciemny"] .ped-wyslij,
.ped-zglos[data-motyw="ciemny"] .ped-fb,
.ped-zglos[data-motyw="ciemny"] .ped-wyslij {
background: var(--ped-blekit); color: var(--ped-noc);
}
.ped[data-motyw="ciemny"] .ped-fb:hover,
.ped[data-motyw="ciemny"] .ped-wyslij:hover,
.ped-zglos[data-motyw="ciemny"] .ped-fb:hover,
.ped-zglos[data-motyw="ciemny"] .ped-wyslij:hover { background: #6fb6e4; }
/* Zdanie pod licznikami. Liczba bez wyjaśnienia bywa czytana jak się komu
podoba — a tu różnica między „ludźmi" a „zapaleniami" jest istotna. */
.ped-co-liczymy {
flex-basis: 100%;
margin: 6px 0 0;
font-size: .86rem;
line-height: 1.5;
color: var(--ped-glebia);
max-width: 62ch;
}
/* ── MODLITWA OBOK POLSKI ────────────────────────────────────────────────────
Panel z ikoną jasnogórską i tekstem modlitwy stoi W KOLUMNIE OBOK MAPY,
nie na niej. Mapa ma zostać widoczna: to na niej pali się światło, które
ktoś przed chwilą zapalił, i to ona rozświetla się na Amen.
Wcześniej panel leżał na środku Polski i zasłaniał dokładnie to, o co chodzi. */
.ped-nad-mapa {
padding: 18px 20px;
margin-bottom: 14px;
border-radius: 18px;
background: color-mix(in srgb, var(--ped-papier) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--ped-zloto) 42%, transparent);
box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
text-align: center;
max-height: 0;
opacity: 0;
overflow: hidden;
padding-block: 0;
border-width: 0;
transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
}
.ped-nad-mapa.widoczna {
max-height: 80rem;
opacity: 1;
padding-block: 18px;
border-width: 1px;
}
.ped-nad-ikona {
display: block;
width: clamp(96px, 42%, 150px);
margin: 0 auto 12px;
border-radius: 8px;
box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
/* Okno tekstu: zaczyna się od pierwszego wersu — przygaszamy tylko dolną
krawędź, żeby było widać, że tekst biegnie dalej. */
.ped-nad-modlitwa {
max-height: min(34vh, 260px);
overflow: hidden;
mask-image: linear-gradient(to bottom, #000 84%, transparent);
}
.ped-nad-przewijak {
transition: transform .2s linear;
font-size: .93rem;
line-height: 1.6;
color: var(--ped-tekst);
text-align: left;
}
.ped-nad-przewijak p { margin: 0 0 12px; }
.ped-nad-przewijak .ped-wezwanie { color: var(--ped-zloto); font-weight: 700; }
.ped-nad-przewijak .ped-modlitwa-wezwania { color: var(--ped-glebia); }
.ped-nad-przewijak .ped-amen { color: var(--ped-akcent-tekst, var(--ped-zloto)); font-weight: 700; letter-spacing: .1em; }
.ped-nad-sigla, .ped-nad-tekst { display: none; }
.ped-nad-stopka {
margin: 12px 0 0;
font-size: .86rem;
line-height: 1.5;
color: var(--ped-glebia);
}
/* Po Amen tekst zwija się do kilku wersów, a zaproszenie zostaje na wierzchu. */
.ped-nad-mapa.po-modlitwie .ped-nad-modlitwa { max-height: 5.4rem; }
.ped-nad-mapa.po-modlitwie .ped-nad-ikona { width: clamp(72px, 30%, 110px); }
/* Zamknięcie modlitwy: cała diecezja, z której szło światło, rozświetla się
na kilka sekund. Znak, a nie miganie — stąd długie, spokojne przejście. */
.ped-diec.rozblysk { animation: pedRozblysk 6s ease-out 1; }
@keyframes pedRozblysk {
0% { filter: brightness(1); }
18% { filter: brightness(2.1) saturate(1.25); }
100% { filter: brightness(1); }
}
/* Własny płomień rośnie na czas modlitwy — ma być widoczny z drugiego końca
mapy, a nie ginąć wśród cudzych świateł. */
.ped-plomyk.wielki .ped-plomyk-tresc {
transform-box: fill-box; transform-origin: center;
animation: pedWielki .9s ease-out forwards;
}
@keyframes pedWielki { to { transform: scale(2.1); } }
.ped-nad-zapisy {
display: inline-block;
margin-top: 14px;
padding: 11px 22px;
border-radius: 999px;
background: var(--ped-zloto);
color: #1b1408;
font: 700 .9rem/1 system-ui, sans-serif;
text-decoration: none;
}
.ped-nad-zapisy[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.ped-nad-mapa { transition: opacity .3s ease; }
.ped-nad-przewijak { transition: none; }
.ped-plomyk.wielki .ped-plomyk-tresc { animation: none; transform: scale(1.8); }
.ped-diec.rozblysk { animation: none; filter: brightness(1.6); }
}
/* Przycisk pojawia się tylko wtedy, gdy przeglądarka nie pozwoliła zagrać
nagraniu sama. Wtedy musi dać się w niego kliknąć, choć cały panel nad mapą
kliknięć nie przyjmuje. */
.ped-nad-graj {
margin-top: 14px;
padding: 10px 20px;
border: 1px solid var(--ped-zloto);
border-radius: 999px;
background: transparent;
color: var(--ped-zloto);
font: 700 .88rem/1 system-ui, sans-serif;
cursor: pointer;
}
.ped-nad-graj[hidden] { display: none; }
/* Ikona nad Polską i modlitwa pod nią. Panel jest wysoki, więc tekst dostaje
własne okno i sunie w nim w rytm nagrania — całość nie rośnie w nieskończoność. */
.ped-nad-ikona {
display: block;
width: clamp(84px, 16%, 132px);
margin: 0 auto 12px;
border-radius: 8px;
box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.ped-nad-modlitwa {
max-height: min(38vh, 300px);
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.ped-nad-przewijak {
transition: transform .2s linear;
font-size: .95rem;
line-height: 1.6;
color: var(--ped-tekst);
}
.ped-nad-przewijak p { margin: 0 0 12px; }
.ped-nad-przewijak .ped-wezwanie { color: var(--ped-zloto); font-weight: 700; }
.ped-nad-przewijak .ped-modlitwa-wezwania { color: var(--ped-glebia); }
.ped-nad-przewijak .ped-amen { color: var(--ped-akcent-tekst, var(--ped-zloto)); font-weight: 700; letter-spacing: .1em; }
/* Własny płomień rośnie na czas modlitwy — ma być widoczny z drugiego końca
mapy, a nie ginąć wśród cudzych świateł. */
.ped-plomyk.wielki .ped-plomyk-tresc {
transform-box: fill-box; transform-origin: center;
animation: pedWielki .9s ease-out forwards;
}
@keyframes pedWielki { to { transform: scale(2.1); } }
.ped-nad-zapisy {
display: inline-block;
margin-top: 14px;
padding: 11px 22px;
border-radius: 999px;
background: var(--ped-zloto);
color: #1b1408;
font: 700 .9rem/1 system-ui, sans-serif;
text-decoration: none;
}
.ped-nad-zapisy[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.ped-plomyk.wielki .ped-plomyk-tresc { animation: none; transform: scale(1.8); }
.ped-nad-przewijak { transition: none; }
}
/* Po Amen panel schodzi na górę i maleje — rozświetlona diecezja ma być
widoczna, a to ona jest zakończeniem modlitwy. Zaproszenie zostaje. */
.ped-nad-mapa.po-modlitwie {
top: 22%;
width: min(26rem, 78%);
padding: 14px 18px;
transition: top .9s ease, width .9s ease, padding .9s ease;
}
.ped-nad-mapa.po-modlitwie .ped-nad-modlitwa { max-height: 5.4rem; }
.ped-nad-mapa.po-modlitwie .ped-nad-ikona { width: clamp(56px, 11%, 84px); }
/* ── MAPA CICHNIE NA CZAS MODLITWY ──────────────────────────────────────────
Punkty szkół i cudze płomienie gasną, żeby zostało jedno światło — to
zapalone przed chwilą. Nic nie znika z danych; to zasłona na trzy minuty. */
.ped-plansza.modli-sie .ped-szkola-znak,
.ped-plansza.modli-sie .ped-szkola-punkt {
opacity: 0;
transition: opacity 1.2s ease;
pointer-events: none;
}
.ped-plansza.modli-sie .ped-plomyk:not(.wielki) {
opacity: .12;
transition: opacity 1.2s ease;
}
.ped-plansza .ped-szkola-znak,
.ped-plansza .ped-szkola-punkt,
.ped-plansza .ped-plomyk { transition: opacity 1.4s ease; }
/* Prostokąt zapisów rozpala się razem z diecezją — to samo zamknięcie. */
.ped-slowo-zapisy.rozpalona {
animation: pedRozpalenie 9s ease-out 1;
border-radius: 14px;
}
@keyframes pedRozpalenie {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ped-zloto) 70%, transparent); }
12% { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--ped-zloto) 60%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
.ped-slowo-zapisy.rozpalona { animation: none;
box-shadow: 0 0 18px 3px color-mix(in srgb, var(--ped-zloto) 45%, transparent); }
}
/* Wers, który właśnie brzmi. Reszta przygasza się, ale zostaje czytelna —
modlitwa to całość, a nie ciąg pojedynczych zdań. */
.ped-nad-przewijak .ped-wers {
margin: 0 0 12px;
opacity: .45;
transition: opacity .5s ease, color .5s ease;
}
.ped-nad-przewijak .ped-wers.teraz {
opacity: 1;
color: var(--ped-tekst);
}
@media (prefers-reduced-motion: reduce) {
.ped-nad-przewijak .ped-wers { transition: none; }
}
/* Światło bez konta gaśnie po modlitwie — powoli, żeby było widać, że gaśnie,
a nie że zniknęło przez usterkę. */
.ped-plomyk.gasnie { animation: pedGasniecie 2.6s ease-in forwards; }
@keyframes pedGasniecie {
0% { opacity: 1; }
60% { opacity: .35; }
100% { opacity: 0; }
}
.ped-nad-drogi {
margin: 10px 0 0;
font-size: .86rem;
line-height: 1.55;
color: var(--ped-glebia);
}
.ped-nad-drogi a { color: var(--ped-zloto); }
.ped-nad-drogi[hidden] { display: none; }
/* ── FLAGA ZAMIAST ŚWIECY W WERSJI BIAŁO-CZERWONEJ ──────────────────────────
W wersji patriotycznej światło modlitwy ma postać flagi wbitej w diecezję,
z której ktoś się modli. Płomień i flaga są rysowane razem przy każdym
świetle; tutaj rozstrzygamy, który z nich widać — dzięki temu przełączenie
wersji działa od razu, bez przerysowywania mapy. */
/* W KAŻDEJ WERSJI STOI I ŚWIATŁO, I FLAGA. Wcześniej wersja biało-czerwona
zamieniała jedno na drugie; teraz płomień pali się przy drzewcu, a flaga
stoi obok niego — bo jedno mówi o modlitwie, a drugie o tym, czyja ona jest.
Flaga jest odsunięta w bok, żeby oba znaki dały się odczytać osobno. */
.ped-mapa .ped-flaga { display: block; transform: translateX(180px); }
.ped-flaga-maszt { fill: #6b4b2a; }
/* Płótno faluje jak na wietrze: powolne, nieduże wychylenie, bez migania.
Ruch idzie od masztu, więc punkt obrotu stoi przy drzewcu. */
.ped-flaga-plotno {
transform-box: fill-box;
transform-origin: left center;
animation: pedFalowanie 3.4s ease-in-out infinite;
}
@keyframes pedFalowanie {
0%, 100% { transform: skewY(0deg) scaleX(1); }
30% { transform: skewY(-2.4deg) scaleX(.97); }
65% { transform: skewY(2.1deg) scaleX(1.02); }
}
/* Zapalona świeca powiększa się na czas modlitwy — flaga tak samo. */
.ped-plomyk.wielki .ped-flaga { filter: drop-shadow(0 0 300px rgba(220, 20, 60, .55)); }
@media (prefers-reduced-motion: reduce) {
.ped-flaga-plotno { animation: none; }
}
/* Diecezja, z której ktoś się właśnie modli. W czasie modlitwy nie świeci —
świeci na Amen — ale jest obrysowana, żeby było widać, gdzie stoi świeca. */
.ped-diec.moja-modlitwa {
stroke: var(--ped-zloto);
stroke-width: 2.5px;
vector-effect: non-scaling-stroke;
fill-opacity: .34;
}
.ped-nad-drogi .ped-nad-intencja { font-weight: 700; }
/* ── OPRAWA OBRAZU W PANELU MODLITWY ────────────────────────────────────────
Przy ikonie stoją dwie flagi i świeca — w każdej wersji kolorystycznej.
Znaki są rysowane czystym stylem (bez plików), więc nic się nie dogrywa
i nic nie miga przy wolnym łączu. */
.ped-nad-obraz {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
}
.ped-nad-flaga {
width: 26px; height: 34px;
position: relative;
flex: none;
}
/* Drzewce */
.ped-nad-flaga::before {
content: ""; position: absolute; left: 0; bottom: 0;
width: 2px; height: 34px; background: #6b4b2a; border-radius: 1px;
}
/* Płótno: biel na górze, czerwień pod nią — jak na fladze. */
.ped-nad-flaga::after {
content: ""; position: absolute; left: 2px; top: 2px;
width: 22px; height: 15px;
background: linear-gradient(to bottom, #ffffff 0 50%, #ce1126 50% 100%);
border: 1px solid rgba(0, 0, 0, .18);
transform-origin: left center;
animation: pedFalaFlagi 3.4s ease-in-out infinite;
}
.ped-nad-flaga--p::after { animation-delay: -1.2s; }
@keyframes pedFalaFlagi {
0%, 100% { transform: skewY(0deg) scaleX(1); }
32% { transform: skewY(-4deg) scaleX(.95); }
68% { transform: skewY(3.4deg) scaleX(1.03); }
}
/* Świeca przy obrazie — płomień drga jak przy prawdziwym knocie. */
.ped-nad-swieca {
position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
width: 10px; height: 26px;
background: linear-gradient(to bottom, #fdf6e3, #e8d6a8);
border-radius: 3px 3px 2px 2px;
box-shadow: 0 0 12px rgba(253, 200, 69, .5);
}
.ped-nad-swieca::after {
content: ""; position: absolute; left: 50%; top: -13px;
width: 9px; height: 14px; margin-left: -4.5px;
background: radial-gradient(ellipse at 50% 70%, #fff3c4 0%, #E2B354 45%, rgba(253,200,69,0) 72%);
border-radius: 50% 50% 45% 45%;
animation: pedDrganie 2.6s ease-in-out infinite;
}
@keyframes pedDrganie {
0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
40% { transform: scale(1.14) translateY(-1px); opacity: .92; }
70% { transform: scale(.95) translateY(1px); opacity: 1; }
}
/* W CIEMNEJ WERSJI OBRAZ ROZŚWIETLA SIĘ NA CZAS MODLITWY — tak jak ikona
oświetlona świecami. W jasnej i biało-czerwonej wystarczy delikatna obwódka,
bo tam poświata na białym tle wygląda jak zabrudzenie. */
.ped-nad-mapa.modli-sie .ped-nad-ikona {
box-shadow: 0 0 34px 6px rgba(253, 200, 69, .45), 0 8px 26px rgba(0, 0, 0, .5);
animation: pedOswietlenie 6s ease-in-out infinite;
}
@keyframes pedOswietlenie {
0%, 100% { box-shadow: 0 0 26px 4px rgba(253, 200, 69, .34), 0 8px 26px rgba(0, 0, 0, .5); }
50% { box-shadow: 0 0 40px 8px rgba(253, 200, 69, .52), 0 8px 26px rgba(0, 0, 0, .5); }
}
.ped[data-motyw="jasny"] .ped-nad-mapa.modli-sie .ped-nad-ikona,
.ped[data-motyw="patriotyczny"] .ped-nad-mapa.modli-sie .ped-nad-ikona {
animation: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ped-zloto) 45%, transparent),
0 8px 22px rgba(0, 0, 0, .18);
}
@media (prefers-reduced-motion: reduce) {
.ped-nad-flaga::after, .ped-nad-swieca::after,
.ped-nad-mapa.modli-sie .ped-nad-ikona { animation: none; }
}
/* Szkoły Benedykta przy modlitwie z diecezji drohiczyńskiej i warszawsko-praskiej.
Wypisujemy je z wykazu szkół, więc nowa placówka pojawi się tu sama. */
.ped-nad-benedykt {
margin: 12px 0 0;
padding: 12px 14px;
border-radius: 12px;
background: color-mix(in srgb, var(--ped-zloto) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ped-zloto) 38%, transparent);
text-align: left;
font-size: .88rem;
line-height: 1.5;
}
.ped-nad-benedykt[hidden] { display: none; }
.ped-nad-benedykt b { display: block; margin-bottom: 6px; color: var(--ped-zloto); }
.ped-nad-benedykt ul { list-style: none; margin: 0 0 8px; padding: 0; }
.ped-nad-benedykt li {
display: flex; gap: 8px; align-items: baseline; justify-content: space-between;
padding: 4px 0; color: var(--ped-tekst);
border-bottom: 1px solid color-mix(in srgb, var(--ped-zloto) 16%, transparent);
}
.ped-nad-benedykt li:last-child { border-bottom: 0; }
.ped-nad-benedykt li .miasto { color: var(--ped-tekst); font-weight: 650; }
.ped-nad-benedykt li span { color: var(--ped-glebia); font-size: .84rem; text-align: right; }
.ped-nad-benedykt a { color: var(--ped-zloto); }
/* ── WYBRANA DIECEZJA I JEJ SZKOŁY ──────────────────────────────────────────
Kliknięcie w diecezję pokazuje ją na mapie: obrys w barwie akcentu i jej
punkty szkół w pełnej sile. Reszta kraju przygasza się, ale zostaje
widoczna — chodzi o policzenie tych szkół, nie o schowanie reszty. */
.ped-plansza.wyrozniona .ped-diec { opacity: .38; transition: opacity .45s ease; }
.ped-plansza.wyrozniona .ped-szkola-punkt,
.ped-plansza.wyrozniona .ped-szkola-znak { opacity: .18; transition: opacity .45s ease; }
.ped-plansza.wyrozniona .ped-diec.wybrana {
opacity: 1;
stroke: var(--ped-zloto);
stroke-width: 2.5px;
vector-effect: non-scaling-stroke;
}
.ped-plansza.wyrozniona .ped-szkola-punkt.wybrana,
.ped-plansza.wyrozniona .ped-szkola-znak.wybrana {
opacity: 1;
fill: var(--ped-zloto);
stroke: var(--ped-tlo);
stroke-width: 1.2px;
vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: reduce) {
.ped-plansza.wyrozniona .ped-diec,
.ped-plansza.wyrozniona .ped-szkola-punkt,
.ped-plansza.wyrozniona .ped-szkola-znak { transition: none; }
}
/* ── WEJŚCIE DLA PROWADZĄCYCH ─────────────────────────────────────────────
Nawigacja dzieła prowadzi pielgrzyma. Ten jeden odnośnik prowadzi kogoś
innego — Joannę Biegańską do kokpitu, Marię Kobylińską do biura. Stoi
dlatego po prawej, odsunięty, obrysowany: widać go, gdy się go szuka,
i nie zabiera uwagi, gdy się go nie szuka. */
.ped-nav .ped-nav-wejdz {
margin-left: auto;
border: 1px solid var(--brzeg, #1d4372);
border-radius: 999px;
padding: 6px 15px;
color: var(--zloto, #E2B354);
}
.ped-nav .ped-nav-wejdz:hover {
border-color: var(--zloto, #E2B354);
color: var(--blask, #EBCB86);
}
/* ── PRZYCISKI ODZYSKUJĄ SWÓJ KOLOR ───────────────────────────────────────
`color: inherit` przy wyłączeniu reguły odnośników było poprawką w połowie:
przycisk brał kolor RODZICA, czyli jasne pismo, i lądował jasnym napisem
na jasnym pomarańczu — 1,56:1 przy wymaganych 4,5:1.
Przycisk z własnym tłem musi mieć własny, wprost zapisany kolor pisma.
Reguły stoją na końcu arkusza, żeby nie dało się ich przypadkiem
wyprzedzić inną regułą o tej samej sile. Zmierzone przeglądarką. */
.ped a.ped-slowo-przycisk,
.ped a.ped-slowo-przycisk:visited,
.ped a.ped-zapisy-przycisk,
.ped a.ped-zapisy-przycisk:visited { color: var(--ped-noc); }
.ped a.ped-fb, .ped a.ped-fb:visited { color: var(--ped-noc); }
.ped a.ped-lok, .ped a.ped-lok:visited,
.ped a.ped-kopiuj, .ped a.ped-kopiuj:visited,
.ped a.ped-pobierz, .ped a.ped-pobierz:visited { color: var(--ped-tekst); }
/* ── PISMO W ZGŁOSZENIU SZKOŁY: CIEMNIEJSZE W WERSJACH NA BIELI ─────────────
Ks. Andrzej, 2.09.2026: „w wersji jasnej i biało-czerwonej litery są zbyt
jasne (»Powiedz nam o szkole« i niżej)".
Pomiar mówił, że jest dobrze — i to prawda, ale tylko wobec progu.
Zmierzone przed poprawką na białym gruncie:
jasna: pismo #093e7a — 10,60 : 1, podpowiedzi #3c648f — 6,16 : 1
biało-czerwona: pismo #17171a — 17,89 : 1, podpowiedzi #55555c — 7,39 : 1
Wszystko powyżej 4,5. A jednak formularz czyta się blado, bo przy dłuższym
wypełnianiu liczy się nie próg, tylko wysiłek: 14 px w kolorze rozjaśnionym
błękitem albo szarością męczy szybciej niż ten sam tekst w głębszym tonie.
Próg mówi „da się odczytać", nie „czyta się dobrze".
Ciemniejsze barwy wchodzą TYLKO w tym module i TYLKO w dwóch wersjach
stojących na bieli. Wersja maryjna ma już granat #25276B, a ciemna pisze
jasnym po nocy — tam nie ma czego pogłębiać. */
.ped[data-motyw="jasny"] .ped-zacheta,
.ped[data-motyw="jasny"] .ped-zglos,
.ped-zglos[data-motyw="jasny"] {
--ped-tekst: #0b2c56; /* było #093e7a */
--ped-glebia: #2c4a6b; /* było #3c648f */
}
.ped[data-motyw="jasny"] .ped-zacheta h3,
.ped[data-motyw="jasny"] .ped-zacheta p { color: #0b2c56; }
.ped[data-motyw="patriotyczny"] .ped-zacheta,
.ped[data-motyw="patriotyczny"] .ped-zglos,
.ped-zglos[data-motyw="patriotyczny"] {
--ped-tekst: #101013; /* było #17171a */
--ped-glebia: #3a3a41; /* było #55555c */
}
.ped[data-motyw="patriotyczny"] .ped-zacheta h3,
.ped[data-motyw="patriotyczny"] .ped-zacheta p { color: #101013; }
/* ── POLE OBOWIĄZKOWE I PODPOWIEDŹ POD NIM ────────────────────────────────
Dodane 05.09.2026 przy naprawie zapisu. Numer telefonu był w formularzu
opisany jako „nieobowiązkowo", a baza go wymagała — człowiek dostawał
błąd serwera zamiast prośby o numer. Skoro pole jest wymagane, ma to być
widać przy etykiecie, a POWÓD ma stać pod polem, nie w regulaminie.
Kontrast zmierzony wobec obu podłoży modułu:
złoto #E2B354 na #25276B = 6,84 : 1 na #2E4473 = 4,93 : 1
głębia #B9BEE4 na #25276B = 7,31 : 1 na #2E4473 = 5,27 : 1
Próg dla pisma drobnego wynosi 4,5 : 1 — oba warianty przechodzą. */
.pole label .wymagane {
color: var(--ped-akcent-tekst, #E2B354);
font-weight: 600;
white-space: nowrap;
}
.pole .podpowiedz {
margin: 6px 0 0;
/* 13 px, NIE 0,8 rem. Zmierzone 5.09.2026: 0,8 rem to 12,8 px — poniżej
progu czytelności. A podpowiedź pod polem niesie tu rzeczy, których nie
ma nigdzie indziej na stronie: „Jedyny numer, pod którym odbierzemy
w dniu pielgrzymki". Kto jej nie doczyta, poda zły numer. */
font-size: 13px;
line-height: 1.45;
color: var(--ped-glebia);
}
/* Uwaga o przycisku głównym w wersjach jasnych: naprawione zmienną
`--ped-na-zlocie` (wyżej w tym pliku, po jednej wartości na wersję).
Nadpisania w tym miejscu nie ma świadomie — dwa źródła prawdy o jednym
kolorze rozjeżdżają się przy pierwszej poprawce. Zmierzone 6.09.2026:
sama zmienna wystarcza, przyciski „Czytałem, wysyłamy", „Przyjmuję"
i „Zatwierdzam" przechodzą próg 4,5 : 1 we wszystkich czterech wersjach. */