/* ------------------------------------------------------------------ POWLOKA — naglowek, nawigacja, hero, stopka. Zrodlo: teczka.json#wyglad.profil_ukladu (nawigacja, hero_wideo). ------------------------------------------------------------------ */ /* =========================== NAGLOWEK ============================ */ /* Pasek lezy NA wideo, bez wlasnego tla. Po przewinieciu ponizej hero dostaje tlo `powierzchnia` i cienka obwodke dolna. Przelacza sie klasa .piu-przyklejony, ktora ustawia IntersectionObserver na hero — NIE prog w pikselach: prog klamie przy kazdej innej wysokosci hero, a ta wysokosc jest inna na telefonie niz na desktopie. */ .piu-naglowek { position: sticky; top: 0; z-index: 40; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 180ms ease, border-color 180ms ease; } .piu-naglowek__rzad { display: flex; align-items: center; gap: var(--piu-r4); min-height: 64px; } /* NA TELEFONIE NAWIGACJA MA WLASNY WIERSZ. Wersja jednowierszowa byla zepsuta i widac to bylo na zrzucie: przy 390 px wordmark zjadal polowe szerokosci, nawigacji zostawalo 190 px, czyli poltora dzialu, a nic nie mowilo, ze pasek sie przewija. Kontrakt zada "widocznych nazw dzialow" — przy 190 px nie sa widoczne. Dwa wiersze daja pelne 350 px na pasek, czyli trzy dzialy naraz. */ @media (max-width: 1023px) { .piu-naglowek__rzad { flex-wrap: wrap; row-gap: 0; padding-block: var(--piu-r2); min-height: 0; } /* Logo i hamburger w JEDNYM wierszu. Uklad dwuwierszowy pochodzil z czasow przewijanego paska dzialow; pasek zastapila szuflada, wiec drugi wiersz zostal pusty, a hamburger spadal pod logo. */ .piu-naglowek__rzad > .piu-logo { flex: 1 1 auto; min-height: 44px; } .piu-naglowek__rzad > .piu-logo svg { height: 24px; } .piu-naglowek__rzad > .piu-hamburger { flex: 0 0 auto; } } .piu-naglowek.piu-przyklejony { background-color: var(--piu-powierzchnia); border-bottom-color: var(--piu-obwodka); } /* Na hero (pasek przezroczysty) etykiety stoja na zlozeniu gradientu, wiec biora tekst wariantu nocnego. Po przyklejeniu wracaja na papier. */ /* Jasny tekst dotyczy PASKA lezacego na wideo, a nie wszystkiego, co siedzi w nawigacji. Poprzednia wersja celowala w `.piu-nav a`, wiec lapala takze linki w rozwinietym panelu mega menu - a ten panel stoi na wlasnej, jasnej powierzchni i jego linki musza byc ciemne. Dochodzi `:not(.piu-naglowek--otwarty)`: gdy panel jest otwarty, pasek dostaje tlo powierzchni i cala jego zawartosc wraca na ciemny tekst. */ .piu-naglowek:not(.piu-przyklejony):not(.piu-naglowek--stale):not(.piu-naglowek--otwarty):not(.piu-naglowek--szuflada) .piu-nav__przycisk, .piu-naglowek:not(.piu-przyklejony):not(.piu-naglowek--stale):not(.piu-naglowek--otwarty):not(.piu-naglowek--szuflada) .piu-nav__link, .piu-naglowek:not(.piu-przyklejony):not(.piu-naglowek--stale):not(.piu-naglowek--otwarty):not(.piu-naglowek--szuflada) .piu-hamburger, .piu-naglowek:not(.piu-przyklejony):not(.piu-naglowek--stale):not(.piu-naglowek--otwarty):not(.piu-naglowek--szuflada) .piu-logo { color: var(--piu-tekst-noc); } .piu-naglowek:not(.piu-przyklejony):not(.piu-naglowek--stale):not(.piu-naglowek--otwarty):not(.piu-naglowek--szuflada) { --pieczec: var(--piu-akcent-noc); } .piu-naglowek.piu-przyklejony .piu-nav__przycisk, .piu-naglowek.piu-przyklejony .piu-nav__link, .piu-naglowek.piu-przyklejony .piu-hamburger, .piu-naglowek.piu-przyklejony .piu-logo { color: var(--piu-tekst); } /* Na kazdej inne stronie niz glowna pasek ma tlo od pierwszej klatki. */ .piu-naglowek--stale { background-color: var(--piu-powierzchnia); border-bottom-color: var(--piu-obwodka); } .piu-logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; } .piu-logo svg { display: block; height: 28px; width: auto; } /* =========================== NAWIGACJA =========================== */ /* Reguly nawigacji przenioslyy sie w calosci do assets/css/nawigacja.css razem z mega menu i szuflada. Zostawienie ich tutaj kosztowalo realny defekt: stare `.piu-nav ul { display:flex; white-space:nowrap }` lapalo takze liste tekstow w panelu mega menu i wypychalo ja jednym rzedem poza panel. Martwa regula w arkuszu nie jest neutralna - jest pulapka czekajaca na nowy znacznik o tej samej nazwie. */ /* ============================= HERO ============================== */ /* Swiadomie NIE 100vh: pasek okna na telefonie zjada rozne wartosci, a pierwszy ekran ma konczyc sie widocznym poczatkiem nastepnej sekcji, zeby czytelnik wiedzial, ze strona idzie dalej. */ .piu-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; /* Pasek lezy NA hero, nie nad nim. Wartosc NIE jest wpisana na sztywno: skrypt mierzy realna wysokosc naglowka i ustawia --piu-naglowek-h. Twarde 64 px zalamalo sie w chwili, gdy nawigacja dostala na telefonie wlasny wiersz — naglowek urosl do 109 px, a hero dalej podciagalo sie o 64, wiec wiersz z logo wypadal na tlo strony i bialy wordmark znikal. Fallback odpowiada ukladowi dwuwierszowemu. */ margin-top: calc(-1 * var(--piu-naglowek-h, 108px)); padding-top: var(--piu-naglowek-h, 108px); overflow: hidden; background-color: var(--piu-tlo-noc); background-size: cover; background-position: center; } @media (min-width: 1024px) { .piu-hero { min-height: 82vh; } } .piu-hero__wideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* WARSTWA STALA. Napis na ruchomym obrazie nie ma stalego kontrastu, wiec kontrastu NIE liczy sie wobec wideo — liczy sie wobec ZLOZENIA gradientu z najjasniejszym pikselem kadru-postera. Krycie 0.72 przy gornej krawedzi, 0.55 w pasie tresci, do zera w srodku kadru. */ .piu-hero__zaslona { position: absolute; top: 0; left: 0; /* JAWNE 100%, nie samo `inset: 0`. Przy samym inset:0 zaslona wychodzila 712,5 px przy hero 738 px i ostatnie 25 px kadru zostawalo bez przyciemnienia - to byl "jasny pasek na dole". Wideo ma te wymiary podane wprost i dlatego bylo poprawne; zaslona ich nie miala. */ width: 100%; height: 100%; z-index: 1; pointer-events: none; /* GLADKA KRZYWA, BEZ PLASKOWYZU. Poprzednia wersja szla 0.62 -> 0.52 przez pierwsze 30% szerokosci, czyli prawie plasko, a potem opadala - i to czytalo sie jako ciemny PROSTOKAT z widoczna prawa krawedzia. Teraz oba gradienty maja gesto rozstawione przystanki przyblizajace wygladzenie, wiec nigdzie nie ma odcinka o stalym kryciu, ktory oko lapie jako ksztalt. */ background: linear-gradient(to right, rgba(46, 33, 41, 0.74) 0%, rgba(46, 33, 41, 0.71) 8%, rgba(46, 33, 41, 0.65) 18%, rgba(46, 33, 41, 0.56) 28%, rgba(46, 33, 41, 0.44) 39%, rgba(46, 33, 41, 0.31) 50%, rgba(46, 33, 41, 0.19) 61%, rgba(46, 33, 41, 0.09) 72%, rgba(46, 33, 41, 0.03) 84%, rgba(46, 33, 41, 0.00) 100%), linear-gradient(to bottom, rgba(46, 33, 41, 0.82) 0%, rgba(46, 33, 41, 0.74) 8%, rgba(46, 33, 41, 0.63) 17%, rgba(46, 33, 41, 0.54) 27%, rgba(46, 33, 41, 0.57) 40%, rgba(46, 33, 41, 0.59) 55%, rgba(46, 33, 41, 0.63) 72%, rgba(46, 33, 41, 0.62) 88%, rgba(46, 33, 41, 0.66) 100%); } /* Tresc STOI NAD ZASLONA. Bez tej reguly (z-index 2 wobec zaslony 1) caly tekst hero wpada pod przyciemnienie i znika - zaliczone 2026-09-07 przy przepisywaniu zaslony, gdy podmiana bloku zjadla te regule razem z nim. */ .piu-hero__tresc { position: relative; z-index: 2; width: 100%; padding-bottom: var(--piu-r7); color: var(--piu-tekst-noc); } .piu-hero__tresc h1 { color: var(--piu-tekst-noc); } .piu-hero__tresc p { color: var(--piu-tekst-noc); } /* Przy prefers-reduced-motion element video NIE jest wstawiany do DOM (skrypt tego pilnuje). Tu zostaje sam kadr statyczny jako tlo. */ @media (prefers-reduced-motion: reduce) { .piu-hero__wideo { display: none; } } /* ============================= STOPKA ============================ */ .piu-stopka { background-color: var(--piu-tlo-noc); color: var(--piu-tekst-noc); padding-block: var(--piu-r7); } .piu-stopka a { color: var(--piu-akcent-noc); }