/* ========================================================================= Szablon ŁUKASZ — arkusz stylów frontu (Etap 1–2: rama + strona główna). Źródło wyglądu: paczka starego szablonu (`application/layouts/*.phtml`, `less/variables.less`, `less/gpg/*.less`) i lokalna kopia https://www.lukasz.strony-parafialne.pl/. ⚠️ TEN ARKUSZ JEST SKÓRĄ NA `front-base.css` (od 11.09.2026). Łukasz nie ma własnych widoków chromu — renderuje się TYMI SAMYMI partialami co Klasyk (nagłówek, baner, kolumna boczna, stopka, widgety strony głównej), więc potrzebuje TYCH SAMYCH reguł: siatki treści, zakresu sekcji, stanów fokusu, ram pasów, kafli. Te reguły leżą we wspólnej bazie i layout ładuje ją PRZED tym plikiem. Tutaj zostaje tylko to, czym Łukasz się RÓŻNI: wartości tożsamości w `:root` (kroje, geometria, szerokość, stopka) i sekcja „SKÓRA ŁUKASZA", która przebudowuje resztę. Do 11.09.2026 ten plik był KOPIĄ `front.css` z dopiskiem — każda poprawka Klasyka wymagała ręcznego przeniesienia. Wydzielenie bazy to zamknęło. ⚠️ KOLORY BIERZE Z PALETY PARAFII, NIE ZE STAREGO SZABLONU. Morska (#7BA3A8), ceglana (#C13F31) i granatowa (#29507B) ze starego Łukasza to JEDNA konkretna paleta, a w ISP 4.0 paletę wybiera parafia, nie szablon (patrz App\Support\SitePalettes). „1:1" znaczy tu więc: ten sam UKŁAD i ta sama FORMA — belka, pas menu, ramy pasów, datownik na kaflu, trójdzielna stopka — w barwach, które parafia sobie wybrała. ========================================================================= */ :root { /* Promienie (E1c — słownik; DZISIEJSZE wartości 1:1, bez zaokrąglania). Zachowane wszystkie faktycznie użyte odcienie (zasada „zostają oba"). */ /* ŁUKASZ JEST KANCIASTY — cała skala promieni zbita do zera (poza pigułką i kołem, które opisują KSZTAŁT, a nie stopień zaokrąglenia). Stary szablon nie ma ani jednego zaokrąglonego rogu: kafle, przyciski, pola i plakietki są prostokątne. Zmiana idzie przez tokeny, więc obejmuje też te miejsca, w których zaokrąglenie wpisano kiedyś wprost do reguły. */ --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --radius-3xl: 0px; --radius-4xl: 0px; /* Stopka Łukasza stoi na KOLORZE GŁÓWNYM palety (stary szablon: granat #29507B), a nie na własnym ciemnym brązie jak u Klasyka. */ --footer-bg: var(--pri); /* Kontener starego Łukasza — Bootstrap 3, 1170 px (`less/variables.less`). Węższy niż u Klasyka (1320) i to jest różnica WIDOCZNA: pasy Łukasza mają wyraźne marginesy boczne, treść nie dochodzi do krawędzi okna. */ --tresc-max: 1170px; /* KROJE ŁUKASZA (`less/variables.less` z paczki). Advent Pro jest krojem BEZSZERYFOWYM o wąskim rysunku — stoi tu w miejscu „serif", bo token nazywa ROLĘ (pismo nagłówkowe), a nie klasyfikację. Zmiana nazwy tokenu dotknęłaby klasy `.serif` używanej we wspólnych partialach. */ --font-serif: 'Advent Pro', 'Trebuchet MS', 'Segoe UI', sans-serif; --font-sans: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Łukasz: lista aktualności jako kafle (skóra podstron, Etap 3) — dopisana do listy siatek strony głównej. Lista w bazie obsługuje siatki WSPÓLNE; skóra rozszerza ją własną regułą o tym samym kształcie i tej samej specyficzności (strażnik `test_kazda_siatka_kafli_jest_objeta_regula_strony_glownej` zbiera wszystkie takie reguły z bazy i skóry). */ .front-root--home :is( .news-rows__period ) { display: flex; flex-wrap: wrap; } .front-root--home :is( .news-rows__period ) > * { flex: 1 1 var(--kafel); max-width: var(--kafel-max, var(--kafel)); min-width: 0; } /* KARTY-LINKI: TRZY OBOK SIEBIE TAKŻE W WĘŻSZEJ KOLUMNIE (16.09.2026). Kolumna główna Łukasza ma 780 px — kontener 1170 px (`--tresc-max` wyżej) wobec 1320 u Klasyka — więc wspólna podłoga 260 px z bazy dawała trzem kartom 828 px i trzecia spadała pod spód. Sama w niepełnym rzędzie rosła przy tym do `--kafel-max` (430 px), czyli była SZERSZA od dwóch nad nią. Niższa podłoga mieści trzy karty po ~244 px (3 × 228 + 2 × 24 = 732 ≤ 780) i tym samym nie zostawia niepełnego rzędu. Przy 390 px zostaje jedna kolumna: dwie karty potrzebowałyby 480 px, a siatka ma tam 294 px. */ .cards-links-grid { --kafel: clamp(228px, 23.5cqi, 320px); } /* Wcięcie przycisku w TEJ karcie węższe niż bazowe 26 px: napis „Dowiedz się więcej →" potrzebuje w jednym wierszu 215 px, a w karcie 244 px zostaje na treść 202 px — bez tego przycisk łamał się na dwa wiersze. Zmiana dotyczy wyłącznie kart-linków; pozostałe przyciski Łukasza zostają bazowe. */ .card-link__more { padding-inline: 18px; } /* ========================================================================= ======================== S K Ó R A Ł U K A S Z A ====================== ========================================================================= Reguły wspólne z Klasykiem są w `front-base.css` (ten sam markup wymaga tych samych reguł). Poniżej jest to, czym Łukasz się od niego RÓŻNI — i tylko to. Kolejność ma znaczenie: ten plik ładuje się PO bazie, więc przy równej specyficzności te reguły wygrywają. Źródła każdego bloku wskazane przy nim z nazwy pliku z paczki szablonu. ========================================================================= */ /* ---- BELKA NAGŁÓWKA (`less/gpg/navbar.less`) ---------------------------- Biały pas z KRESKĄ pod spodem w kolorze uzupełniającym (@suplement-color), logo wysokie na 71 px, nazwa parafii tłustym pismem nagłówkowym. Menu zostaje po prawej (stary szablon pozycjonuje je `absolute; right: 0`) — u nas trzyma je `margin-left: auto` z reguły wspólnej, więc nic tu nie trzeba robić. */ .front-header { border-bottom: 2px solid var(--pri); } .front-header__logo { height: 71px; } .front-header__name { font-weight: 700; letter-spacing: 0; /* Nazwa w kolorze GŁÓWNYM, nie akcentowym — u Klasyka też, ale tam pismo jest szeryfowe i renaissance'owe; tu decyduje wąski rysunek Advent Pro. */ text-transform: none; } .front-header__subtitle { letter-spacing: 0.08em; } /* Pozycja menu jest PROSTOKĄTNĄ PŁYTKĄ, nie napisem z kreską pod spodem. Stan bieżący i najechanie wypełniają ją kolorem głównym z białym napisem (`li.active a, li a:hover` → `background-color: @main-color`) — to jest najbardziej rozpoznawalny element chromu tego szablonu. */ /* ⚠️ PRZEDROSTEK `.front-root a`, NIE SAMA KLASA. Wyżej w arkuszu stoi reset `.front-root a:not(.btn) { color: inherit }` o specyficzności (0,2,1) — sama `.front-topnav__link` (0,1,0) z nim przegrywa NIEZALEŻNIE od kolejności i deklaracja koloru nie robi nic. Kosztowało to jeden zrzut: pozycje menu i pozycja „Multimedia" w kolumnie bocznej wychodziły w kolorze tekstu rodzica, choć arkusz wyraźnie mówił co innego. Ten sam zabieg co przy `.front-root a.front-skip` wyżej. */ .front-root a.front-topnav__link, .front-topnav__link { font-family: var(--font-serif); font-size: 17px; letter-spacing: 0.02em; color: var(--section-accent-ink); border-bottom: 0; padding: 8px 15px; transition: color var(--motion-state) var(--motion-ease-state), background-color var(--motion-state) var(--motion-ease-state); } .front-root a.front-topnav__link:hover, .front-root .front-topnav__group:hover > a.front-topnav__link, .front-root a.front-topnav__link--active, .front-topnav__link:hover, .front-topnav__group:hover > .front-topnav__link, .front-topnav__link--active { color: var(--surface); background: var(--pri); border-bottom-color: transparent; } .front-topnav__caret { color: inherit; } .front-topnav__submenu { border-top: 2px solid var(--pri); } /* ---- KOLUMNA BOCZNA (`less/gpg/side-nav.less`) -------------------------- PEŁNY BLOK KOLORU, nie biała karta z włosową obwódką: całe menu boczne stoi na kolorze głównym, napisy są jasne, a pozycja bieżąca — akcentowa. Nagłówek „MENU" jest częścią tej samej plamy, oddzieloną włosem, a nie osobnym pasem nad kartą. */ .front-sidebar__box { background: var(--pri); border: 0; } /* NAPISY NA GRANACIE KOLUMNY BOCZNEJ (13.09.2026). Baza pisze je kolorami z JASNEGO boksu Klasyka (`--section-accent-ink`, `--ink`, `--muted`) — na kolorze głównym Łukasza wychodziło 1,33 / 1,85 / 1,45:1. `--sec-on-dark` (3,79:1) wciąż jest poniżej progu 4,5:1; `--sec-soft` to najciemniejszy token ponad nim (6,99:1 dla „Granat i morska"). Tokeny ZALEŻNE od tła strony (`--ink`, `--muted`) nie nadają się tu wcale — pod nimi jest zawsze granat. Pilnuje SidebarBandInsetsTest. */ .front-sidebar__box .front-quote-box__kicker, .front-sidebar__box .front-quote-box__text, .front-sidebar__box .front-quote-box__author { color: var(--sec-soft, var(--surface)); } .front-sidebar__head { /* 3,79:1 na `--sec-on-dark` — poniżej progu; patrz komentarz przy boksie. */ color: var(--sec-soft, var(--surface)); border-bottom-color: rgba(255, 255, 255, 0.22); font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.16em; } .front-sidebar__row { border-left-color: transparent; } .front-root a.front-sidebar__link, .front-root a.front-sidebar__sublink, .front-sidebar__link, .front-sidebar__sublink, .front-sidebar__caret { /* Pełna biel powierzchni, nie przyciemniony atrament stopki — stary szablon ma w menu bocznym `color:#fff` bez wyjątków (`less/gpg/side-nav.less`). */ color: var(--surface); font-family: var(--font-serif); font-size: 17px; } /* Pozycja BEZ własnego odnośnika (folder) ma ten sam kolor co reszta — wyciszenie z Klasyka („--ink-2" na białej karcie) na granatowym bloku czytałoby się jak pozycja nieczynna. */ .front-sidebar__row:hover .front-sidebar__link, .front-sidebar__row.is-active .front-sidebar__link { color: var(--sec-strong, var(--pri)); } .front-root a.front-sidebar__link:hover, .front-root a.front-sidebar__sublink:hover, .front-root a.front-sidebar__sublink.is-active, .front-sidebar__link:hover, .front-sidebar__sublink:hover, .front-sidebar__row.is-active .front-sidebar__link, .front-sidebar__sublink.is-active { /* TEKST LEŻY NA JASNYM WIERSZU, NIE NA GRANACIE (13.09.2026). Tło daje baza (`.front-sidebar__row.is-active/:hover` → `--surface-alt`, czyli kolor strony), a `background: transparent` niżej zdejmuje je tylko z odnośnika — wiersz zostaje jasny. Jasny akcent miał tu 2,19:1. `--sec-strong` to najciemniejszy token przechodzący próg na KAŻDYM tle strony (najsłabiej: piaskowy 4,66:1). */ color: var(--sec-strong, var(--pri)); background: transparent; } .front-sidebar__row.is-active { border-left-color: var(--sec-on-dark, var(--sec)); } /* Obrys fokusu w bloku menu bocznego — obszar jest CIEMNY i stoi poza zakresem pasa, więc `--section-focus` (na jasnym: przyciemniony akcent) byłby na nim niewidoczny. Ta sama zasada, którą Klasyk stosuje do chromu ciemnego. */ .front-sidebar__box { --section-focus: var(--sec-on-dark, var(--sec)); } /* ---- NAGŁÓWKI PASÓW (`less/variables.less` → @headings-color) ----------- Pismo nagłówkowe, wersaliki i GRUBA KRESKA pod tytułem w kolorze akcentu. Stary szablon rysuje tę kreskę osobnym `
`; tu jest obwódką tytułu, więc nie wymaga zmiany w żadnym widoku. */ .section-title { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; padding-bottom: 10px; border-bottom: 3px solid var(--section-accent); } .kicker { font-family: var(--font-serif); letter-spacing: 0.3em; } /* ---- KAFEL AKTUALNOŚCI (`less/gpg/other-news.less`, `news-slider.less`) -- Dwa znaki rozpoznawcze: DATOWNIK wychodzący POZA lewy górny róg zdjęcia i tytuł wyśrodkowany pismem nagłówkowym. */ .news-card__title { text-align: center; font-weight: 700; font-size: 19px; } /* DATOWNIK KAFLA = MORSKA WSTĄŻKA (decyzja Bartka z 10.09.2026, pkt 2). Źródło: `less/gpg/timeline.less` → `.gpg-date-outer` — prostokąt w kolorze głównym szablonu z dwoma trójkątami z obramowań (`.top`, `.bottom`), czyli pionowy równoległobok przyklejony do PRAWEJ krawędzi kadru. Tak wygląda datownik na liście aktualności starego Łukasza. Kwadrat z Etapu 2 był wzorowany na ceglanym `div.gpg-date` ze strony głównej — decyzja wybrała wstążkę dla wszystkich kafli aktualności. Kształt robi `clip-path`, bez dodatkowych elementów w widoku; skos ma proporcję oryginału (trójkąt 20 px na 40 px szerokości). Barwa bez zmian: ciemniejszy morski (`--section-accent-ink`, na pasie jasnym = `--sec-strong`) z białym napisem — 6,23:1; surowy morski dawałby bieli 2,75:1. Kolejność jak w oryginale: miesiąc drobno NAD dniem. Strona wpisu ma własną kartkę z datą obok tytułu — to nie kafel, zostaje prostokątem niżej. */ .news-stamps--over { inset: 0; padding: 10px 56px 0 10px; } .news-stamps--over .news-date { position: absolute; top: 12px; right: 0; margin-left: 0; } :is(.news-card, .news-featured, .news-row) .news-date { --wstazka-skos: 12px; min-width: 44px; padding: calc(var(--wstazka-skos) + 3px) 8px calc(var(--wstazka-skos) + 3px); border: 0; clip-path: polygon(0 var(--wstazka-skos), 100% 0, 100% calc(100% - var(--wstazka-skos)), 0 100%); box-shadow: none; } :is(.news-card, .news-featured, .news-row) .news-date__month { order: -1; margin: 0 0 2px; font-size: 11px; letter-spacing: 0.08em; } /* ZASŁONA KOLORU PO NAJECHANIU (decyzja pkt 5) — `less/gpg/style.less`: `.gpg-outer:hover { background-color: fade(@main-color, 80%) }`, czyli morski z kryciem 0,8 nad zdjęciem. Na kaflach aktualności to SAM EFEKT KOLORU, bez tekstu na zasłonie: tytuł stoi pod zdjęciem, a plakietka kategorii i datownik mają własne tła i leżą nad zasłoną (`--z-plakietka`). Tylko tam, gdzie jest kursor — na dotyku najechania nie ma, więc i zasłony. */ :is(.news-card__media, .news-featured__media, .news-row__media) { position: relative; } :is(.news-card__media, .news-featured__media, .news-row__media)::after { content: ''; position: absolute; inset: 0; background: var(--sec); opacity: 0; pointer-events: none; transition: opacity var(--motion-state) var(--motion-ease-state); } @media (hover: hover) { :is(.news-card, .news-featured, .news-row):is(:hover, :focus-visible) :is(.news-card__media, .news-featured__media, .news-row__media)::after { opacity: 0.8; } } /* PRZYCISK „WIĘCEJ" NA KAFLU (decyzja pkt 3) — zostaje, w formie obrysowanej, jak `WIĘCEJ` pod kaflami listy starego Łukasza. Etykieta z tłumaczeń bez zmian (wspólny kafel), wersaliki robi skóra. Cały kafel jest odnośnikiem, więc to WYGLĄD napisu, nie osobny cel kliknięcia. Najechanie na kafel wypełnia obrys; szerokość się nie zmienia (bazowe rozsuwanie słów zdjęte — przycisk nie zmienia wymiarów, zasada z `.btn--action`). */ .news-card__more { display: inline-flex; align-items: center; padding: 6px 14px; border: 2px solid var(--section-accent-ink); color: var(--section-accent-ink); font-family: var(--font-serif); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; transition: background-color var(--motion-state) var(--motion-ease-state), color var(--motion-state) var(--motion-ease-state); } .news-card:hover .news-card__more, .news-card:focus-visible .news-card__more { background: var(--section-accent-ink); color: var(--surface); word-spacing: normal; } /* PRZYCISKI OBRYSOWANE (decyzja pkt 1). Wypełnione odpadają — biały napis na morskim ma 2,75:1. Napis i obwódka w ciemniejszym morskim (`--sec-strong`: 6,23:1 na białym, 5,56:1 na tle strony), najechanie wypełnia obrys tym samym kolorem pod białym napisem (6,23:1). Oba warianty dostają obrys — decyzja nie robi wyjątku dla podstawowego. Na pasie ciemnym i akcentowym rządzą tokeny zakresu (`--section-action-quiet-*`), tak jak w Klasyku. */ .btn--action, .btn--action-quiet { background: transparent; color: var(--section-action-quiet-ink, var(--sec-strong, var(--sec))); border-color: var(--section-action-quiet-border, var(--sec-strong, var(--sec))); } .btn--action:hover, .btn--action-quiet:hover { background: var(--section-action-quiet-bg-hover, var(--sec-strong, var(--sec))); color: var(--section-action-quiet-ink-hover, var(--surface)); } .news-date { min-width: 0; padding: 4px 12px 5px; background: var(--section-accent-ink); color: var(--surface); border: 2px solid var(--surface); font-weight: 700; } .news-date__day { font-size: 30px; font-weight: 700; line-height: 1; } .news-date__month { margin-top: 0; font-size: 14px; letter-spacing: 0.04em; color: inherit; } .news-date__year { color: inherit; opacity: 0.85; } /* ---- STOPKA (`application/layouts/body.phtml`) -------------------------- Kolor bierze z `--footer-bg` (kolor główny palety, ustawiony przy tokenach). Zostaje tu wyłącznie pismo: nazwy bloków idą pismem nagłówkowym w wersalikach, tak jak w starym szablonie. */ .front-footer__label { font-family: var(--font-serif); letter-spacing: 0.16em; } .front-footer__name { font-weight: 700; } /* ---- WĄSKI EKRAN (decyzja P1, 09.09.2026) ------------------------------- ⚠️ TU NIE UKRYWAMY NICZEGO, I TO JEST RÓŻNICA WOBEC ORYGINAŁU. Stary Łukasz chowa na telefonie `hidden-xs`-em baner, menu boczne, Ewangelię, ogłoszenia i logotypy — czyli połowę tego, po co ktoś wchodzi na stronę parafii z telefonu. Zgodność „1:1" obowiązuje WYŁĄCZNIE na desktopie; poniżej 768 px obowiązują zasady ISP 4.0 i wszystkie te elementy zostają, tylko układają się w jedną kolumnę. Reguły zwijania są w części wspólnej (te same partiale, te same klasy) — tutaj korygujemy jedynie to, co skóra Łukasza zmieniła na szerokim ekranie i co na wąskim wyglądałoby źle. */ @media (max-width: 767px) { /* PRZEŁĄCZNIK ZWINIĘTEGO MENU BOCZNEGO — ta sama plama koloru co rozwinięty blok. Wspólny partial pokazuje na wąskim ekranie przycisk zamiast listy (menu jest DOSTĘPNE, tylko zwinięte — dokładnie tak samo jak w Klasyku, to nie jest ukrywanie z decyzji P1). Bez tej reguły przycisk zostawał biały i wyglądał jak element z innego szablonu. */ .front-sidebar__toggle { background: var(--pri); color: var(--surface); border: 0; font-family: var(--font-serif); letter-spacing: 0.16em; --section-focus: var(--sec-on-dark, var(--sec)); } .front-sidebar__toggle-icon { color: var(--sec-on-dark, var(--sec)); } /* (Wstążka stoi w kadrze przy prawej krawędzi — dawne przesuwanie datownika do środka kadru, gdy wychodził poza lewy róg, nie jest już potrzebne.) */ .news-date__day { font-size: 24px; } .news-date__month { font-size: 12px; } /* Pozycja menu na pełną szerokość wiersza — płytka koloru ma sens dopiero wtedy, gdy jest w niej co kliknąć palcem. */ .front-topnav__link { padding: 10px 14px; } .front-header__logo { height: 56px; } } /* ========================================================================= =================== S K Ó R A Ł U K A S Z A — P O D S T R O N Y ======== ========================================================================= Etap 3 (10.09.2026). Podstrony renderują się widokami KLASYKA w layoucie Łukasza (widoki wołają `frontView('layouts.app')`), więc wszystko poniżej to skóra na tym samym markupie — żadnej własnej kopii widoku. Źródła: zrzuty i markup z `kopia-starego-lukasza/` oraz `less/gpg/*.less` z paczki (content, article-index, article-show, announcements, gallery-*, subpages). Każdy blok podaje swój plik. ========================================================================= */ /* ---- KONTENER ZAPYTAŃ NA SEKCJI PODSTRONY -------------------------------- ⚠️ BEZ TEGO `cqi` NA PODSTRONACH LICZY SIĘ OD OKNA. Pasy strony głównej są kontenerami (`container-type` na `section.front-section`), sekcje podstron (`div.front-section`) — nie. Siatki kafli i stopień nagłówka biorą szerokość z `cqi`, więc na podstronie mierzyły 1440 px okna zamiast 828 px kolumny i dobijały do maksimum: katalog galerii dawał JEDEN kafel na całą szerokość. U Klasyka ten sam brak ukrywa szersza kolumna (kontener 1320), dlatego poprawka stoi tu, a nie we wspólnej warstwie. Lightbox nie cierpi na zawieraniu — od 26.07.2026 jest wyprowadzany do `` (`x-teleport`), patrz skala warstw w `:root`. */ .front-root:not(.front-root--home) .front-main > .front-section { container-type: inline-size; } /* ---- NAGŁÓWEK PODSTRONY (`h2` w `#page_content`, `@headings-*`) --------- U starego Łukasza tytuł podstrony to GOŁY nagłówek: krój nagłówkowy w odmianie LEKKIEJ, zwykła wielkość liter, kolor nagłówków, bez kreski i bez pasa. Reguła strony głównej (wersaliki, 700, gruba kreska akcentu) dotyczy NAGŁÓWKÓW PASÓW i przelewała się tu na `h1` podstron — stąd zawężenie do korzenia, który NIE jest stroną główną. Kolor = kolor bloku menu bocznego, tak jak w oryginale (tam oba są ceglane, tu oba idą z koloru głównego). */ .front-root:not(.front-root--home) :is(.section-title, .front-page__title, .front-post__title) { font-family: var(--font-serif); font-weight: 300; text-transform: none; letter-spacing: 0; font-size: clamp(26px, 3.4cqi, 32px); line-height: 1.2; padding-bottom: 0; border-bottom: 0; color: var(--section-heading, var(--pri)); } /* Nagłówek WEWNĄTRZ podstrony („Poprzednie ogłoszenia", nagłówki bloków Kontaktu i Mszy) — ta sama odmiana, stopień niżej. */ .front-root:not(.front-root--home) :is(.ann-previous__title, .front-page-block__title) { font-weight: 300; text-transform: none; letter-spacing: 0; } /* Nadlinia i okruszki ZOSTAJĄ, choć stary Łukasz ich nie ma — to nawigacja i orientacja (gdzie jestem, jak wrócić), nie ozdoba. Rozstrzygnięte przez Bartka 10.09.2026 (pkt 4 przeglądu): okruszki zostają także na desktopie, nadlinia bez zmian. Tu tylko ściszone, żeby nie konkurowały z lekkim tytułem. */ .front-root:not(.front-root--home) .section-head .kicker { letter-spacing: 0.2em; } /* ---- PROZA (`less/gpg/content.less`) ------------------------------------ Interlinia 2, akapity wyjustowane, zdjęcia w cienkiej ramce z odstępem, odnośniki tłuste w kolorze akcentu. */ .rich-text { font-size: 17px; line-height: 2; } .rich-text :is(p, ul, ol) { margin: 0 0 14px; } .rich-text img, .rich-text figure.content-image img { padding: 5px; border: 1px solid var(--border); background: var(--surface); } /* ⚠️ JUSTOWANIE WYŁĄCZNIE NA SZEROKIM EKRANIE (decyzja P1). W wąskiej kolumnie telefonu justowanie rozciąga odstępy między słowami w „rzeki" i pogarsza czytelność — WCAG 1.4.8 odradza je w ogóle. Oryginał robi to na każdej szerokości; tu 1:1 obowiązuje tylko na desktopie. `hyphens` zmniejsza rozstrzelenie tam, gdzie justujemy. */ @media (min-width: 768px) { .rich-text p { text-align: justify; hyphens: auto; } } /* ---- PASEK MIESIĘCY (`news-timeline.css` rdzenia, `.gpg-months`) -------- U starego Łukasza lista aktualności zaczyna się PASEM miesięcy w kolorze akcentu: wersalikowe skróty w pełnej płycie, bieżący miesiąc na ciemniejszym polu. Tu ten sam pas niesie przełącznik miesięcy archiwum. Tło to przyciemniony akcent, nie surowy: biel na surowej morskiej ma 2,75:1 (oryginał tak miał), na przyciemnionej — 6,23:1. */ .news-archive-months { background: var(--sec-strong, var(--sec)); padding: 0; gap: 0; border-radius: 0; } /* ⚠️ PRZEDROSTEK `.front-root` I ZNACZNIK `a` — nie dla porządku. Pozycje- odnośniki przegrywały z resetem `.front-root a:not(.btn) { color: inherit }` (0,2,1), a stan bieżący z bazowym `.front-root .news-archive-months__item.is-active` (0,3,0) — zrzut pokazał ciemne napisy na morskim pasie. Za pierwszym razem znacznik `a` dostały tylko najechanie i stan bieżący, więc spoczynkowe odnośniki nadal brały kolor z resetu (wyszło pomiarem reguł w przeglądarce). */ .front-root .news-archive-months__item, .front-root a.news-archive-months__item { font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.05em; padding: 14px 13px; border: 0; border-radius: 0; background: transparent; color: var(--surface); } .front-root a.news-archive-months__item:hover { background: var(--pri); border-color: transparent; color: var(--surface); } .front-root .news-archive-months__item.is-active, .front-root a.news-archive-months__item.is-active { background: var(--pri); color: var(--surface); } .front-root .news-archive-months__item.is-empty { color: var(--surface); opacity: 0.55; } .news-archive-months { --section-focus: var(--surface); } /* ---- LISTA AKTUALNOŚCI JAKO KAFLE (`less/gpg/other-news.less`) ---------- Stary Łukasz pokazuje aktualności KAFLAMI: zdjęcie na górze, wersalikowy tytuł pod nim, zajawka drobnym szarym. ISP 4.0 ma tu wiersze — ten sam markup (`a.news-row`) układa się tu w kafel samą siatką, bez nowego widoku. Siatka liczy kolumny z kontenera (`--kafel`), jak każda siatka kafli frontu; na pełnej kolumnie treści wychodzą trzy, tak jak `col-md-4` oryginału. */ /* SZEROKOŚĆ KAFLA LICZONA OD KOLUMNY (kontener zapytań na sekcji podstrony, niżej): 26cqi z 828 px = 215 px → trzy kafle, jak `col-md-4` oryginału. Pierwsza wersja miała `clamp(220px, 30cqi, 300px)` bez kontenera — `cqi` liczył się od okna, kafel dobijał do 300 px i wychodziły DWIE kolumny (3×300 + 2×20 = 940 > 828, zmierzone). */ .news-rows__period { --kafel: clamp(200px, 26cqi, 280px); grid-template-columns: repeat(auto-fill, minmax(min(var(--kafel), 100%), 1fr)); justify-content: var(--kafle-justify, start); gap: 30px 20px; } .news-rows__month { grid-column: 1 / -1; } .news-row { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; align-content: start; gap: 12px; padding: 0; border-bottom: 0; } .news-row:hover { background: transparent; } .news-row__media { grid-area: media; overflow: hidden; } .news-row__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .news-row__body { grid-area: body; padding: 0 4px; } .news-row__title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; text-transform: uppercase; line-height: 1.25; } .news-row__excerpt { font-size: 14px; line-height: 1.8; } @media (min-width: 768px) { .news-row__excerpt { text-align: justify; } } /* Datownik kafla — `div.gpg-date` na PRAWEJ krawędzi kadru, blisko góry. Wpis bez zdjęcia nie ma kadru, więc datownik zostaje w przepływie. */ .news-row:has(.news-row__media) > .news-date { position: absolute; top: 12px; right: 0; z-index: var(--z-plakietka); } .news-row:not(:has(.news-row__media)) > .news-date { grid-area: media; justify-self: start; } /* ---- KATALOG GALERII (`less/gpg/gallery-index.less`) -------------------- Trzy kafle w rzędzie, jak `col-md-4` oryginału. ⚠️ Ten sam błąd granicy co wyżej, tylko gorszy: bazowe maksimum Klasyka (410 px) plus odstęp 22 px daje 842 px wobec 828 px kolumny Łukasza — mieścił się JEDEN kafel i pojedyncza galeria rozlewała się na całą kolumnę (zmierzone: ścieżka 828 px). Naprawą NIE jest inne `--kafel`, tylko kontener zapytań na sekcji podstrony (niżej) — bazowe `31cqi` liczy się wtedy od kolumny, a nie od okna. */ .front-root:not(.front-root--home) .gallery-grid { gap: 8px; } /* ---- WPIS (`less/gpg/article-show.less`) -------------------------------- Podpis wpisu (autor) po prawej, szarym — `p.signature`. */ .front-post__byline { color: var(--muted); } /* ---- OGŁOSZENIA (`less/gpg/announcements.less`) ------------------------- Data szarym pod tytułem; odnośniki domykające („» Archiwum | Pobierz jako PDF") po prawej. Tabele w treści ogłoszeń: pasy wierszy i ramka komórek. */ .ann-date { color: var(--muted); } .ann-body table { width: 100%; border-collapse: collapse; margin-top: 12px; } .ann-body td { padding: 8px; border: 1px solid var(--border); } .ann-body tr:nth-child(odd) { background: var(--surface-2); } .ann-pdf { text-align: right; } /* ---- KONTAKT (`#contact_view`) ------------------------------------------ Stary Łukasz: dane kontaktowe po LEWEJ, formularz po PRAWEJ, mapa pod spodem na całą szerokość. Tu te same bloki są rodzeństwem jednej sekcji, więc układ robi siatka — bez zmiany kolejności w drzewie (czytnik ekranu i klawiatura dalej idą: mapa, dane, biuro, formularz). ⚠️ TYLKO GDY FORMULARZ JEST. Parafia bez formularza (#3 go nie ma) dostawała siatkę dwukolumnową z pustą prawą połową i treścią ściśniętą do lewej. */ @media (min-width: 900px) { .front-section:has(> .front-page-block--map):has(> .front-form) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; } .front-section:has(> .front-page-block--map):has(> .front-form) > * { grid-column: 1; } .front-section:has(> .front-page-block--map):has(> .front-form) > :is(.front-breadcrumbs, h1, header) { grid-column: 1 / -1; } .front-section:has(> .front-page-block--map):has(> .front-form) > .front-page-block--map { grid-column: 1 / -1; order: 10; } .front-section:has(> .front-page-block--map):has(> .front-form) > .front-form { grid-column: 2; grid-row: 2 / span 6; } }