/* ========================================================================= BAZA ARKUSZY FRONTU — szablony, które renderują się WIDOKAMI KLASYKA (wydzielona 11.09.2026 z `front.css`, kolejność reguł Klasyka 1:1). Layout ładuje najpierw TEN plik, potem SKÓRĘ szablonu: Klasyk = front-base.css + front.css Łukasz = front-base.css + front-lukasz.css Mapa jest jedna: `App\Support\FrontTemplates::ARKUSZE` — z niej czytają layouty i strażniki (testy czytają POŁĄCZENIE bazy i skóry, tak jak przeglądarka). ⚠️ CO JEST TUTAJ, A CO W SKÓRZE. Tu stoi wszystko, czego potrzebuje markup partiali Klasyka: siatka treści, zakres sekcji, fokus, ramy pasów, kafle, moduły. W skórze stoją WARTOŚCI TOŻSAMOŚCI (tokeny: promienie, tło stopki, szerokość treści, kroje — patrz `:root` niżej, gdzie zostawiono po nich znacznik) i reguły, którymi szablon się od Klasyka RÓŻNI. Poprawka w bazie dociera do wszystkich szablonów naraz — po to ta baza jest. ⚠️ NOWOCZESNY NA NIEJ NIE STOI — i to jest decyzja (wariant A, 11.09.2026), nie zaległość. Ma własne widoki z makiety i własny arkusz; z Klasykiem dzieli 86 identycznych reguł na ~1100, a 352 selektory ma te same z INNYMI deklaracjami. Wciągnięcie go tutaj byłoby przepisaniem Nowoczesnego. ⚠️ NICZEGO TU NIE PRZESTAWIAJ „dla porządku". Kolejność jest wynikiem kaskady — przy równej specyficzności wygrywa reguła późniejsza. Dowodem przy zmianie tego pliku jest porównanie stylów wyliczonych (`tools/audyt-frontu/style.mjs`), nie zrzut ekranu (docs/UI-STYLE.md). Źródło wyglądu Klasyka: "Parafia - Strona główna (standalone)_ok.html". Paleta frontu jest inna niż panel Filament — to celowe (patrz CLAUDE.md). --pri / --sec nadpisuje paleta parafii, inline na .front-root w layoucie; wartości w `:root` niżej to tylko zapas. ========================================================================= */ :root { --pri: #4A2532; /* bordowy — kolor główny */ --sec: #B08A3E; /* złoty — kolor akcentu */ --bg: #FAF7F2; /* kremowe tło strony */ --surface: #FFFFFF; --surface-alt: #FAF7F2; --surface-2: #F3EDE3; --border: #EBE4D8; --border-2: #E8E1D6; --border-3: #EFE8DC; /* Skala promieni (radius-xs do radius-4xl) stoi w SKÓRZE szablonu — Klasyk zaokrągla od 2 do 14 px, Łukasz jest kanciasty. Pigułka i koło zostają tutaj, bo opisują KSZTAŁT, a nie stopień zaokrąglenia. */ --radius-pill: 999px; --radius-circle: 50%; /* Cienie POWTARZALNE (E1c). Pozostałe box-shadow są jednorazowe i mają różne wartości (kolor/rozmycie/krycie) — zostają dosłownie, bo scalenie zmieniłoby piksele (kryterium: zero zmian wizualnych). */ /* ============================================================ SKALA WARSTW (26.07.2026) — JEDNA dla całego frontu. Powstała po realnym błędzie: przycisk nakładki baneru wyświetlał się NAD powiększonym zdjęciem w galerii. Przyczyną nie była za wysoka liczba przy przycisku, tylko to, że LIGHTBOX SIEDZIAŁ WEWNĄTRZ TREŚCI — a element pozycjonowany w środku kontenera, który tworzy własny kontekst nakładania (u nas robi to `container-type`), nie może przebić się nad rodzeństwo tego kontenera, choćby miał z-index 1000. Dlatego lightbox jest teraz WYPROWADZANY DO (`x-teleport`), a warstwy mają jedną skalę. ZASADA: nowy element z podniesioną warstwą bierze zmienną z tej listy. Żadnych liczb wpisywanych wprost — inaczej za pół roku znów nie będzie wiadomo, co nad czym leży. ============================================================ */ --z-tlo: 0; /* wzory i zdjęcia w tle sekcji */ --z-tresc: 1; /* treść sekcji nad tłem */ --z-plakietka: 2; /* plakietki na zdjęciach, ikona odtwarzania, nakładka baneru */ --z-sterowanie: 3; /* strzałki karuzeli */ --z-rozwijane: 30; /* podmenu nagłówka, menu mobilne */ --z-naglowek: 60; /* przyklejony nagłówek */ --z-belka: 70; /* belka zgody na ciasteczka */ --z-nakladka: 80; /* nakładka „pełne informacje" */ --z-zdjecie: 90; /* POWIĘKSZONE ZDJĘCIE — nad wszystkim */ --shadow-1: 0 8px 24px rgba(46, 32, 22, 0.12); --shadow-2: 0 6px 18px rgba(46,32,22,0.18); /* Cień PLAKIETKI leżącej na zdjęciu (25.07.2026). Kartka z datą jest biała, więc na ciemnym zdjęciu widać ją od razu, ale na jasnym jej krawędź znikała (biel na bieli = 1:1) — sam włosowy obrys z palety bywa na to za słaby. Cień odrysowuje krawędź dokładnie tam, gdzie jest potrzebny: na jasnym tle jest widoczny, na ciemnym niewidoczny i niepotrzebny. */ --shadow-stamp: 0 1px 4px rgba(20, 12, 10, 0.28); --ink: #29241F; /* główny tekst */ --ink-2: #4B4238; --ink-3: #5B5248; --muted: #8A7F70; /* Tło stopki (footer-bg) stoi w SKÓRZE szablonu — Klasyk: własny ciemny brąz, Łukasz: kolor główny. */ --footer-ink: rgba(246, 239, 228, 0.85); --footer-ink-dim: rgba(246, 239, 228, 0.55); --footer-hair: rgba(255, 255, 255, 0.12); /* JEDNA SIATKA TREŚCI (31.07.2026). Wcześniej były DWA tokeny — `--container` Każdy pas z osobna wyglądał poprawnie, ale na całej stronie treść zaczynała się w dwóch różnych miejscach i pasy nie stały w jednej linii. Teraz JEDNA szerokość dla WSZYSTKIEGO: strefy dwukolumnowej, menu bocznego, pasów pełnej szerokości, kart-linków, taśm, stopki i nagłówka. Wyrównane w GÓRĘ, do szerszej z dwóch wartości — właścicielowi zależy na szerokim układzie. Tła zostają na całą szerokość okna; wyrównana jest wyłącznie treść. `--tresc-pad` to margines boczny na ekranach węższych niż `--tresc-max`. */ /* Szerokość treści (tresc-max) stoi w SKÓRZE szablonu — Klasyk 1320 px, Łukasz 1170 px. */ --tresc-pad: 24px; /* WCIĘCIE DO LINII TREŚCI — JEDEN token dla wszystkiego, co ma tło na całą szerokość, a treść na wspólnej siatce (02.08.2026). Pas strony głównej używał tej formuły wprost w `padding-inline`; odkąd korzysta z niej też treść przyklejonego paska akcji, musi być JEDNA — inaczej tekst banera i tytuły sekcji zaczynałyby się w dwóch różnych miejscach, a nikt by tego nie zauważył przy zmianie jednej z kopii. `100%` NIE jest tu liczone w chwili deklaracji: procenty w wartości zmiennej zostają tokenem i rozwiązują się dopiero przy użyciu, względem bloku zawierającego DANY element. Dlatego ten sam token daje 60 px na pasie pełnej szerokości (okno 1440) i 24 px w kolumnie głównej — bez wariantów. */ --tresc-wciecie: max(var(--tresc-pad), calc((100% - var(--tresc-max)) / 2)); /* Wcięcie wewnętrzne bloku w pasie trójdzielnym. */ --trio-pad: 26px; /* ============================================================ CZYTELNA DŁUGOŚĆ WIERSZA (31.07.2026, reguła 3). Pas pełnej szerokości ma 1272 px treści. Akapit rozciągnięty na całą tę szerokość to ~170 znaków w wierszu — oko gubi początek następnego wiersza. Blok TEKSTOWY albo ogranicza się do tej miary, albo dzieli treść na kolumny (listy niezależnych pozycji: intencje, nagłówki wiadomości). Jednostka `ch` zamiast pikseli, bo miara ma iść za stopniem pisma, a nie za rozdzielczością — po zmianie kroju wiersz zostaje tak samo długi. */ --proza-max: 68ch; /* JEDEN token odstępu pionowego pasa strony głównej — zastąpił rozjechane 44px (Klasyk) i trzy różne clamp-y (Nowoczesny). Padding-block pasa, więc dwa sąsiednie pasy dzieli 2× ta wartość; clamp sam redukuje ją na telefonie (≈36px) i rozciąga na desktopie (≈64px), bez osobnego tokenu mobilnego. */ --band-space: clamp(2.25rem, 4.5vw, 4rem); /* Kroje (font-serif i font-sans) stoją w SKÓRZE szablonu. Nazwy mówią o ROLI (pismo nagłówkowe / tekst ciągły), nie o klasyfikacji kroju. */ /* Tokeny odstępów (korekta bloków treści, zgłoszenie Bartka) — ta sama skala matematyczna 8/12/16/24/32px co w panelu (UI-STYLE.md), tylko w rem, żeby marginesy bloków treści nie były pojedynczymi, przypadkowymi wartościami px. */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ } html, body { margin: 0; padding: 0; background: var(--bg); } * { box-sizing: border-box; } /* ============================================================ TŁO STRONY (12.09.2026) — zamknięty zestaw, wybór parafii. Rejestr: App\Support\Front\PageBackgrounds; progi i pomiary: docs/funkcje/tlo-strony-rekonesans.md. TO NIE JEST TŁO SEKCJI. Pas z mocnym tłem (`dark`, `accent`, `photo`) zasłania tło strony u siebie i tak ma zostać — tło strony widać tam, gdzie dziś widać ton strony. „Przygaszone" i łuki „wzoru" liczą się od koloru tła strony, a przy zdjęciu automat ich nie daje (12.09.2026). KOLOR nie potrzebuje tu ANI JEDNEJ reguły: wchodzi w paletę jako kotwica `bg`, więc `--bg` już jest tym kolorem. Zdejmujemy tylko tło z `.front-root`, żeby przy ZDJĘCIU nie zakrywało warstwy. DLACZEGO WARSTWA `position: fixed` POD TREŚCIĄ, a nie `background-attachment: fixed` na `html`: Safari na iPhonie tego nie obsługuje (rysuje tło jak przewijane, rozciągnięte na całą wysokość strony). Pomiar w renderze potwierdził, że warstwa daje identyczne wyniki. DLACZEGO `z-index: -1`: warstwa ma iść POD treść. Przy `z-index: 0` element pozycjonowany maluje się NAD tłami i tekstem elementów niepozycjonowanych — złapane przy pomiarach, zasłaniało pół strony. Ujemna warstwa maluje się zaraz po tle korzenia, więc `html` i `body` muszą być wtedy przezroczyste. ============================================================ */ html[data-tlo] .front-root { background: transparent; } html[data-tlo="zdjecie"], html[data-tlo="zdjecie"] body { background: transparent; } html[data-tlo="zdjecie"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--tlo-strony) center / cover no-repeat; pointer-events: none; } .front-root { font-family: var(--font-sans); color: var(--ink); background: var(--bg); min-height: 100vh; line-height: 1.6; } /* Linki treści dziedziczą kolor tekstu (reset domyślnego niebieskiego), ale NIE przyciski (.btn*) — te mają własny kolor (biel na ciemnym tle). Bez :not(.btn) reguła (0,1,1) wygrywała z .btn--dark (0,1,0) → ciemny tekst na ciemnym przycisku. */ /* ============================================================ E2 — ZAKRES SEKCJI (tła pasów strony głównej) Sekcja ustawia zmienne inline (serwerowo, z palety — patrz App\Support\Front\SectionBackgrounds), a wnętrza widgetów konsumują TE zmienne zamiast palety. DOMYŚLNE wartości poniżej = DZISIEJSZE kolory, dlatego wariant „jasne" nie nadpisuje niczego i render jest identyczny jak przed E2 (dowód braku regresji). ============================================================ */ :root { --section-bg: transparent; /* dziś sekcje nie malują własnego tła */ --section-text: var(--ink); --section-heading: var(--pri); --section-muted: var(--muted); --section-border: var(--border); --section-link: var(--pri); --section-accent: var(--sec); --card-bg: var(--surface); --card-text: var(--ink); --card-heading: var(--pri); --card-muted: var(--muted); --card-link: var(--pri); --card-border: var(--border); --card-bg-alt: var(--surface-2); /* STANY INTERAKCJI (25.07.2026). Domyślne wartości = wariant „jasne"; warianty ciemny/akcentowy podmieniają je w App\Support\Front\SectionBackgrounds, dokładnie tym samym mechanizmem co kolory tekstu i obwódek. */ --card-border-hover: var(--sec-strong, var(--sec)); --card-bg-hover: var(--card-bg); /* na jasnym reaguje cień, tło zostaje */ --card-bg-active: var(--surface-2); /* Obrys fokusu klawiatury. Na jasnych tłach ciemny akcent palety, bo trzy z czterech palet nie mają w sobie niebieskiego i systemowy pierścień byłby tam ciałem obcym; na ciemnych i akcentowych — biel (patrz SectionBackgrounds). */ --section-focus: var(--sec-strong, var(--pri)); /* AKCENT DO TEKSTU I CIENKICH LINII (25.07.2026, Etap 6 pracy nocnej). Jasne złoto/srebro ma na białym tle 2,6–3,1:1 — poniżej progu. Ten token jest jego CZYTELNYM odpowiednikiem: na jasnym tle wariant przyciemniony, na ciemnym i akcentowym z powrotem jasny (patrz SectionBackgrounds). `--section-accent` zostaje dla DEKORACJI: ramek zdjęć, pasków nad kartami, obramowań cytatów — tam kolor niczego nie komunikuje. */ --section-accent-ink: var(--sec-strong, var(--sec)); /* TŁO WIERSZA przy najechaniu i wciśnięciu — osobne od kafla, bo wiersz nie ma cienia i tło jest jego głównym sygnałem (patrz `.news-row:hover`). */ --row-bg-hover: var(--surface-2); --row-bg-active: var(--border-3); /* PODŁOGA CZYTELNOŚCI TEKSTU FUNKCJONALNEGO (07.09.2026). Wartość była wpisana wprost w `max()` przy minucie godziny; teraz jest tokenem, bo tę samą granicę trzyma etykieta rodzaju na kaflu Multimediów w Nowoczesnym. Ta sama nazwa i wartość stoi w public/css/front-modern.css. Pilnuje TypographyFloorTest. */ --text-floor: 11px; } .front-section { background: var(--section-bg); color: var(--section-text); } .front-section .section-title { color: var(--section-heading); } .front-root a:not(.btn) { color: inherit; } /* ============================================================ FOKUS KLAWIATURY — warstwa dostępności (25.07.2026) Do tej pory front Klasyka NIE MIAŁ ANI JEDNEJ reguły fokusu: obrys rysowała przeglądarka po swojemu, a na ciemnym pasie bywał niewidoczny. Osoba poruszająca się klawiaturą nie wiedziała, gdzie jest. `:focus-visible`, nie `:focus` — obrys pokazuje się przy nawigacji klawiaturą, a nie po kliknięciu myszą. Odstęp (`outline-offset`) sprawia, że obrys leży na tle SEKCJI, więc kontrast liczymy względem niego — i dlatego kolor jest tokenem zakresu sekcji, nie stałą. ============================================================ */ .front-root :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--section-focus); outline-offset: 2px; } /* Fokus NIGDY nie jest wyłączany bez zamiennika — gdyby ktoś kiedyś dopisał `outline: none`, ta reguła i strażnik w testach mają go zatrzymać. */ /* ============================================================ OGRANICZONY RUCH (systemowe ustawienie dostępności) Przejścia stanów stają się natychmiastowe. Zmiana koloru i cienia zostaje — znika tylko sam RUCH w czasie. ============================================================ */ /* Ograniczenie ruchu (prefers-reduced-motion) obsługuje JEDEN zapis dla obu szablonów — public/css/motion.css. Nie dopisywać tu drugiego: różniły się i jeden z nich wyłączał przejścia zamiast skracać ich czas. */ /* ---- Typografia pomocnicza ---- */ .serif { font-family: var(--font-serif); } .kicker { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--section-accent-ink); font-weight: 700; } .section-title { font-family: var(--font-serif); /* SKALA IDZIE ZA KOLUMNĄ, NIE ZA OKNEM (08.08.2026). Do tej pory `3.4vw` mierzyło szerokość OKNA, więc nagłówek w komórce ⅓ pasa trójdzielnego (395 px) dostawał dokładnie ten sam stopień co nagłówek pasa pełnej szerokości (1272 px) — zmierzone 40 px w obu. W jednym rzędzie stały wtedy obok siebie nagłówki 40 px i 20 px (Ogłoszenia kompakt), co czytało się jak usterka renderowania, a nie jak hierarchia. `cqi` mierzy kontener, a `container-type: inline-size` stoi już na `.front-section` (używają go siatki kafli). WSPÓŁCZYNNIK 4.5 DOBRANY POMIAROWO, nie przepisany z poprzedniej wartości: przy 3.4 (tyle, ile było przy `vw`) kolumna główna strefy spadała z 40 na 30 px, a przy 4.3 — na 38,3 px, czyli zmiana wychodziła poza wąskie komórki, o które chodziło. Przy 4.5 górną granicę osiąga już kontener ~890 px, więc zmienia się WYŁĄCZNIE to, co naprawdę wąskie. Zmierzone po zmianie: pas pełny 40 px, strefa 40 px, telefon 28 px — wszystkie bez zmian; komórka ⅓ pasa trójdzielnego 40 → 28 px. */ font-size: clamp(28px, 4.5cqi, 40px); font-weight: 600; color: var(--section-link); margin: 0; line-height: 1.15; } /* PRZEJDŹ DO TREŚCI (07.09.2026, A23) — pierwszy przystanek klawisza Tab. UKRYCIE PRZEZ WYPROWADZENIE POZA EKRAN, nie `display: none` ani `visibility: hidden`: te dwa WYJMUJĄ element z kolejności tabulacji, więc odnośnik nigdy by fokusu nie dostał i nie miał jak się pokazać. Po otrzymaniu fokusu wjeżdża w widok — w pełni widoczny, nie półprzezroczysty. Kolor obrysu z zakresu sekcji, jak wszędzie; odnośnik leży na tle strony, czyli poza pasami, więc bierze zapas z `:root`. Cel skoku (`
`) ma `tabindex="-1"`, ale NIE gasimy mu obrysu: `outline: none` jest w tym arkuszu zakazane (FocusVisibleTest), a i tak nie byłoby potrzebne — fokus po skoku z odnośnika nie jest fokusem KLAWIATUROWYM w rozumieniu `:focus-visible`, więc przeglądarka obrysu tam nie rysuje. Sprawdzone na żywo w obu szablonach. */ /* Selektor `.front-root a.front-skip`, nie samo `.front-skip`: wyżej w arkuszu stoi `.front-root a:not(.btn) { color: inherit }` (reset domyślnego niebieskiego), które ma tę samą wagę i przebiłoby kolor odnośnika — biały napis na ciemnej pigułce zamieniłby się w ciemny na ciemnym, 1,45:1. Ta reguła stoi PÓŹNIEJ, więc przy równej wadze wygrywa. */ .front-root a.front-skip { position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-naglowek) + 1); transform: translateY(-200%); display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--pri); color: var(--surface); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-2, 0 8px 24px rgba(0, 0, 0, 0.28)); transition: transform var(--motion-state) var(--motion-ease-state); } /* `:focus`, NIE `:focus-visible` — wyjątek świadomy i jedyny w tym arkuszu. Odnośnika pominięcia nie da się złapać myszą (leży poza ekranem), więc rozróżnienie „klawiatura kontra kliknięcie" nic tu nie wnosi, a `:focus` jest ściśle szerszy: pokazuje odnośnik w każdym przypadku, w którym zrobiłby to `:focus-visible`, i w kilku, w których tamten by się zawahał. Odnośnik, który przy fokusie się nie pokazał, jest gorszy niż jego brak. */ .front-root a.front-skip:focus { transform: translateY(0); } /* =========================== NAGŁÓWEK =========================== */ .front-header { background: var(--surface); border-bottom: 1px solid var(--border-2); } .front-header__inner { max-width: var(--tresc-max); margin: 0 auto; padding: 14px var(--tresc-pad); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* Logo parafii: skalowane NA WYSOKOŚĆ z zachowaniem proporcji, bez kadrowania. Logo ma nieprzewidywalny kształt (poziome/pionowe/herb/z tekstem) — NIGDY nie wymuszamy okręgu ani przycięcia. Okrąg zarezerwowany dla zdjęć OSÓB (Duszpasterze). */ .front-header__logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; } .front-header__logo { height: 56px; width: auto; max-width: 240px; /* zabezpieczenie układu przy bardzo szerokim logo */ flex: 0 0 auto; object-fit: contain; /* całe logo widoczne, bez obcięcia */ display: block; } /* Blok tożsamości (logo + nazwa) — jedna całość, bo na poziomie 2/3 układu przenosi się do własnego rzędu w komplecie. Odstęp 18px = dawny odstęp kontenera, więc poziom 1 wygląda dokładnie jak przed zmianą. */ .front-header__brand { display: flex; align-items: center; gap: 18px; flex: 0 1 auto; min-width: 0; } /* Blok tytułu nie „rozpycha" nagłówka — kotwice trzyma margin-left:auto na menu (niżej), więc ukrycie nazwy/podtytułu NIE przesuwa menu. */ .front-header__titles { flex: 0 1 auto; min-width: 0; } .front-header__name { font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: var(--pri); line-height: 1.15; text-decoration: none; } .front-header__subtitle { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* ---- Menu górne (desktop) ---- */ /* margin-left:auto = stała kotwica po PRAWEJ: menu zostaje przy prawej krawędzi niezależnie od obecności nazwy/podtytułu (ukrycie tekstu nie przesuwa menu). */ .front-topnav { display: flex; gap: 6px; align-items: center; margin-left: auto; } .front-topnav__group { position: relative; } .front-topnav__link { text-decoration: none; color: var(--ink-2); font-size: 16px; letter-spacing: 0.04em; padding: 10px 14px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: color var(--motion-state) var(--motion-ease-state), border-color var(--motion-state) var(--motion-ease-state); cursor: pointer; } .front-topnav__link:hover, .front-topnav__group:hover > .front-topnav__link, .front-topnav__link--active { color: var(--pri); border-bottom-color: var(--sec); } /* Aktywna GRUBIEJ niż hover — inaczej „gdzie jestem" wyglądałoby tak samo jak „na co najechałem". Ujemny margines dolny kompensuje grubszą ramkę, żeby pozycje nie skakały o 1 px. */ .front-topnav__link--active { font-weight: 700; /* Akcent PRZYCIEMNIONY: pasek niesie informację „tu jesteś", więc musi mieć kontrast (jasne złoto ma na białym 2,6–3,1:1, ten wariant 6,0–6,9:1 we wszystkich czterech paletach). Hover zostaje przy jasnym akcencie. */ border-bottom-color: var(--sec-strong, var(--sec)); border-bottom-width: 3px; margin-bottom: -1px; } .front-topnav__caret { font-size: 11px; color: var(--section-accent-ink); } /* podmenu (poziom 2) — rozwijane na hover na desktopie */ .front-topnav__submenu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(46, 32, 22, 0.14); padding: 6px 0; margin: 0; list-style: none; z-index: var(--z-rozwijane); display: none; } .front-topnav__group:hover > .front-topnav__submenu, .front-topnav__group:focus-within > .front-topnav__submenu { display: block; } .front-topnav__sublink { display: block; text-decoration: none; color: var(--ink-2); font-size: 15px; padding: 10px 18px; border-left: 3px solid transparent; } .front-topnav__sublink:hover { color: var(--pri); background: var(--surface-alt); border-left-color: var(--section-accent-ink); } /* Oznaczenie strony, na której jesteśmy (kolory z tokenów palety, nie na sztywno). W podmenu podkreślenia nie ma — rolę wskaźnika pełni pasek z lewej i tło. */ .front-topnav__sublink--active { color: var(--pri); background: var(--surface-alt); border-left-color: var(--sec-strong, var(--sec)); font-weight: 700; } /* ---- Hamburger + menu mobilne ---- */ .front-burger { background: none; border: 1px solid #D9CFC0; border-radius: var(--radius-lg); width: 46px; height: 46px; display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; /* kotwica po prawej na mobile (gdy topnav ukryty) */ } .front-burger span { display: block; width: 20px; height: 2px; background: var(--pri); } .front-mobilenav { border-top: 1px solid var(--border-2); background: var(--surface); padding: 8px 0; } .front-mobilenav a, .front-mobilenav__parent { display: block; text-decoration: none; color: var(--ink-2); font-size: 16px; padding: 13px 24px; } .front-mobilenav__parent { font-weight: 700; color: var(--pri); } .front-mobilenav__child { padding-left: 40px; font-size: 15px; } /* Aktywna pozycja w menu mobilnym — pasek akcentu z lewej zamiast podkreślenia (na liście pionowej podkreślenie zlewa się z odstępami między pozycjami). */ .front-mobilenav a.is-active { color: var(--pri); font-weight: 700; box-shadow: inset 4px 0 0 var(--sec-strong, var(--sec)); background: var(--surface-alt); } /* ---- Dopasowanie nagłówka: poziomy 1-3 (patrz front/partials/header-fit) ---- */ /* Pozycja schowana do „Więcej" (albo sam kontener „Więcej", zanim jest potrzebny). */ .front-topnav .is-header-overflow { display: none !important; } /* Pomiar naturalnej szerokości menu — chwilowo bez zawijania I BEZ KURCZENIA pozycji. Samo `nowrap` nie wystarcza: pozycje jako elementy flex domyślnie mają flex-shrink:1, więc ściskają się do dostępnej szerokości i menu raportuje węższy rozmiar niż naprawdę potrzebuje (błąd wykryty w przeglądarce 18.07.2026 — nagłówek zostawał na poziomie 1 mimo dwóch linii menu). */ .front-topnav[data-header-measuring] { flex-wrap: nowrap !important; } .front-topnav[data-header-measuring] > * { flex: 0 0 auto !important; white-space: nowrap !important; } /* Podmenu „Więcej" wyrównane do PRAWEJ (pozycja stoi przy prawej krawędzi). */ [data-header-more] .front-topnav__submenu { left: auto; right: 0; } .front-topnav__sublink--child { padding-left: 34px; font-size: 14px; } @media (min-width: 901px) { /* Poziom 2 i 3: blok logo+nazwa dostaje własny rząd, menu rząd pod nim — oba wyśrodkowane. Żadnego ściskania nazwy obok linków. */ .front-header[data-header-level="2"] .front-header__inner, .front-header[data-header-level="3"] .front-header__inner { flex-direction: column; align-items: center; gap: 10px; } .front-header[data-header-level="2"] .front-header__brand, .front-header[data-header-level="3"] .front-header__brand { justify-content: center; text-align: center; } .front-header[data-header-level="2"] .front-topnav, .front-header[data-header-level="3"] .front-topnav { margin-left: 0; justify-content: center; flex-wrap: wrap; row-gap: 2px; /* zwarte, gdy menu i tak zejdzie do dwóch linii */ } } /* ---- Przyklejony nagłówek (ustawienie: Wygląd strony → Tożsamość) ---- */ .front-header[data-sticky] { position: sticky; top: 0; z-index: var(--z-naglowek); /* Kompensacja skoku: o ile nagłówek się skurczy, tyle dokładamy pod nim, więc treść strony NIE PODSKAKUJE w momencie zwinięcia (--header-shrink liczy skrypt dopasowania; obie zmiany mają ten sam czas i krzywą). */ margin-bottom: 0; transition: margin-bottom 180ms ease, box-shadow 180ms ease; } .front-header[data-sticky][data-condensed] { margin-bottom: var(--header-shrink, 0px); box-shadow: 0 6px 18px rgba(46, 32, 22, 0.08); } .front-header[data-sticky] .front-header__inner { transition: padding 180ms ease, gap 180ms ease; } .front-header[data-sticky] .front-header__name, .front-header[data-sticky] .front-header__logo { transition: font-size 180ms ease, height 180ms ease; } /* Kurczenie na DESKTOPIE (poprawka 24.07.2026): w układzie wyśrodkowanym (nazwa w swoim rzędzie, menu pod spodem) przyklejony nagłówek zasłaniał zbyt dużo strony. Po przewinięciu wraca do JEDNEGO RZĘDU: mała nazwa z lewej, menu z prawej. NAZWA ZOSTAJE i dalej prowadzi na stronę główną — bez niej nie wiadomo, gdzie się jest, i nie ma czym wrócić na górę serwisu. */ @media (min-width: 901px) { .front-header[data-sticky][data-condensed] .front-header__inner { flex-direction: row !important; align-items: center; gap: 18px; padding-top: 8px; padding-bottom: 8px; /* Nic nie spada do drugiej linii — nadmiar pozycji menu chowa skrypt dopasowania pod „Więcej ▾" (liczy je dla węższego, zwiniętego rzędu). */ flex-wrap: nowrap !important; } .front-header[data-sticky][data-condensed] .front-header__brand { justify-content: flex-start !important; text-align: left !important; } .front-header[data-sticky][data-condensed] .front-topnav { margin-left: auto !important; justify-content: flex-end !important; flex-wrap: nowrap; } .front-header[data-sticky][data-condensed] .front-header__logo { height: 34px; } .front-header[data-sticky][data-condensed] .front-header__subtitle { display: none; } .front-header[data-sticky][data-condensed] .front-header__name { font-size: 20px; } } /* Skoki do kotwic nie chowają treści pod nagłówkiem — wysokość publikuje skrypt dopasowania do zmiennej --header-h. */ html { scroll-padding-top: calc(var(--header-h, 0px) + 12px); } @media (max-width: 900px) { /* Po przewinięciu nagłówek zwija się do wąskiego paska: zostaje nazwa (skrócona wielokropkiem) i przycisk menu; logo i podtytuł chowamy, żeby przyklejony nagłówek nie zjadał małego ekranu. */ .front-header[data-sticky][data-condensed] .front-header__inner { padding-top: 6px; padding-bottom: 6px; } .front-header[data-sticky][data-condensed] .front-header__logo-link, .front-header[data-sticky][data-condensed] .front-header__subtitle { display: none; } .front-header[data-sticky][data-condensed] .front-header__name { font-size: 18px; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* =========================== KORPUS DWUKOLUMNOWY =========================== */ .front-body { width: 100%; } .front-body__inner { max-width: var(--tresc-max); margin: 0 auto; padding: 48px var(--tresc-pad); } .front-body--with-sidebar .front-body__inner { display: flex; gap: 32px; align-items: flex-start; } .front-main { flex: 1 1 auto; min-width: 0; } /* ---- Okruszki (decyzja B2, 09.09.2026) ---- Ten sam markup co w Nowoczesnym (`front.partials.breadcrumbs`), typografia Klasyka: krój tekstowy, stopień 13 px jak `.kicker`, kolor przygaszony. Stoją NAD nagłówkiem podstrony, w kolumnie treści — pas pełnej szerokości to pozycja B1 i nie jest rozstrzygnięta. */ .front-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; color: var(--ink-3); font-size: 13px; line-height: 1.4; } .front-breadcrumbs a { color: var(--pri); text-decoration: none; text-underline-offset: 0.2em; transition: color var(--motion-state) var(--motion-ease-state); } .front-breadcrumbs a:hover { text-decoration: underline; } .front-breadcrumbs a:active { opacity: 0.75; } .front-breadcrumbs .sep { opacity: 0.55; } /* ---- Lewa kolumna ---- */ /* `order: -1` — kolumna boczna stoi w drzewie ZA treścią (żeby `h1` podstrony był pierwszym nagłówkiem dokumentu, a skok „przejdź do treści" nie zostawiał jej za plecami), a po LEWEJ stawia ją arkusz. To jest miejsce, w którym `FrontTemplates::railSide('classic') === 'start'` przekłada się na wygląd — do 08.09.2026 robiła to kolejność w Blade. Reguła obowiązuje na obu szerokościach: przy jednej kolumnie rail zostaje NAD treścią. */ .front-sidebar { order: -1; flex: 0 0 262px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; } .front-sidebar__toggle { display: none; } .front-sidebar__box { background: var(--surface); border: 1px solid var(--border); } .front-sidebar__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-3); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--section-accent-ink); font-weight: 700; } .front-sidebar__list, .front-sidebar__sublist { list-style: none; margin: 0; padding: 0; } .front-sidebar__list { padding: 8px 0; } .front-sidebar__row { display: flex; align-items: stretch; border-left: 3px solid transparent; } /* Wiersz folderu jest