/* pc.css nie zeruje marginesu body, a przeglądarka daje mu 8 px. Bez tego wideo nie dobija do prawej krawędzi okna, tylko zatrzymuje się 8 px przed nią. Do zgłoszenia w design systemie. */ body{margin:0} /* ---- Menu: wyższe, z większym logo, przyklejone do góry ---- Design system daje pasek 60 px i logo 30 px, a nawigacja nie jest przyklejona. Bez przyklejenia nie ma dokąd wjechać logo, więc zmiana idzie w komplecie. Propozycja do pc.css. */ :root{--pcw-nav-h:4.5rem; /* rynna: to samo, co kontener design systemu odkłada z lewej i prawej. Liczona z 100vw, więc przy widocznym pasku przewijania jest o jego połowę za szeroka; służy tylko jako przybliżenie we wzorze na logo. Paddingi liczą rynnę z procentów, od szerokości bez paska (2026-09-10). */ --pcw-gutter:max(var(--pc-margin), calc((100vw - var(--pc-container)) / 2))} @media (min-width:1120px){:root{--pcw-nav-h:6rem}} .pc-nav{--nav-h:var(--pcw-nav-h);--pc-nav-logo:2.25rem;position:sticky;top:0} /* pasek nie zasłania pola z fokusem ani celu kotwicy (audyt menu M-04, 2026-09-11). Przeglądarka i Lenis odejmują scroll-padding strony i scroll-margin celu, więc sekcje z własnym górnym odstępem mają scroll-margin 0. Ta sama reguła co w zestawie podstron */ html{scroll-padding-top:var(--pcw-nav-h)} /* Pasek jest kontenerem, więc przy szerokich oknach kończył się na 240 i 1680 z 1920 i spod jego boków wychodziło to, co przewijało się pod spodem. Teraz pasek idzie przez całe okno, a jego treść stoi tam, gdzie postawiłby ją kontener: padding równy rynnie daje przy 1920 dokładnie 320 i 1600, czyli to samo co kontener design systemu. */ .pc-nav{max-width:none;padding-inline:max(var(--pc-margin), calc((100% - var(--pc-container)) / 2))} /* panel mega menu zostaje na krawędziach kontenera, tak jak w design systemie */ .pc-nav .pc-menu{inset-inline:calc(max(var(--pc-margin), calc((100% - var(--pc-container)) / 2)) - var(--pc-margin))} @media (min-width:1120px){.pc-nav{--pc-nav-logo:3rem}} /* bardzo niskie okno (1366 × 768 przy 125 % to 490 px): pasek wraca do wysokości z design systemu, żeby hero razem z zegarem zmieściło się na pierwszym ekranie (2026-09-10) */ @media (min-width:1024px) and (max-height:560px){:root{--pcw-nav-h:var(--pc-control)}.pc-nav{--pc-nav-logo:2.25rem}} /* telefon: 72 px paska to 9 % ekranu przez całe przewijanie; 60 px mieści przyciski 44 px z oddechem. Telefon poziomo: pasek z design systemu, jak przy niskim oknie wyżej (2026-09-10) */ @media (max-width:767px){:root{--pcw-nav-h:calc(var(--pc-control) + var(--hsp-xs))}} @media (max-width:1023px) and (max-height:500px){:root{--pcw-nav-h:var(--pc-control)}} /* telefon: znak w pasku w rozmiarze z design systemu (30 px). Przy 36 px znak, trzy przyciski i odstępy miały 375 px, więc przy 360 px hamburger dotykał krawędzi ekranu */ @media (max-width:767px){.pc-nav{--pc-nav-logo:inherit}} /* pasek menu telefonu i tabletu ma wysokość paska strony, więc krzyżyk otwiera się dokładnie w miejscu hamburgera, a nie 5 do 8 px niżej */ @media (max-width:1119px){ /* the burger shows up to 1119 px (audit K-15, 2026-09-17; was 1023) */ .pc-sheet{padding-block-start:0} .pc-sheet__bar{min-height:var(--pcw-nav-h)} } /* ---- Znak wjeżdża z lewej, pasek ciemnieje ---- Ten sam mechanizm, co na powerconnect.pl. Tam znak stoi na swoim miejscu z `opacity:0`, a lista jest przesunięta o `translateX(-230px)`; klasa `--sticky-styles` zeruje przesunięcie i odsłania znak, a pasek w tym samym momencie zmienia kolory. Tutaj przesunięcie liczy się z szerokości znaku, więc trzyma się przy każdej wysokości paska, a przełącznikiem jest ta sama klasa co wcześniej: `pcw-logo-parked` żyje, dopóki duże logo z hero nie schowa się pod paskiem. Na górze strony: pasek biały, tekst atramentowy, menu przy lewej krawędzi treści, bez znaku. Po przewinięciu: pasek atramentowy, tekst biały, menu odsuwa się w prawo, a w jego miejscu pojawia się biały znak. */ .pc-nav{--pcw-logo-w:calc(174 / 57 * var(--pc-nav-logo)); transition:background var(--pc-t-base) var(--pc-ease),color var(--pc-t-base) var(--pc-ease)} .pc-nav__links{margin-inline:0;transition:transform var(--pc-t-base) var(--pc-ease)} /* ukryty znak nie jest przystankiem tabulacji (audyt menu M-05, 2026-09-11): visibility gaśnie dopiero po wygaszeniu znaku, a przy jego wjeździe wraca od razu */ .pc-nav__logo{transition:opacity var(--pc-t-base) var(--pc-ease),visibility 0s} .pcw-logo-parked .pc-nav__logo{opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--pc-t-base) var(--pc-ease),visibility 0s var(--pc-t-base)} .pcw-logo-parked .pc-nav__links{transform:translateX(calc(-1 * (var(--pcw-logo-w) + var(--nav-gap))))} html:not(.pcw-logo-parked) .pc-nav{background:var(--pc-ink);color:var(--pc-white)} html:not(.pcw-logo-parked) .pc-nav .pc-nav__link{color:var(--pc-white)} html:not(.pcw-logo-parked) .pc-nav .pc-nav__util-btn{background:var(--pc-white);color:var(--pc-ink)} html:not(.pcw-logo-parked) .pc-nav .pc-nav__util-btn:hover, html:not(.pcw-logo-parked) .pc-nav .pc-nav__lang a:hover{background:var(--pc-spark);color:var(--pc-ink)} /* otwarta zakładka na białym pasku: tytuł w kolorze swojej linii, Voltage (Piotr 2026-09-15). Design system zostawia tu tekst atramentowy, bo Voltage na bieli ma 3,35:1; Piotr wybrał kolor linii świadomie i tylko dla białego paska. Na atramentowym pasku tytuł zostaje biały. */ .pc-nav__link{transition:color var(--pc-t-fast) var(--pc-ease)} .pcw-logo-parked .pc-nav .pc-nav__link[aria-expanded="true"]{color:var(--pc-voltage)} /* ---- Punkt orientacyjny i przycisk biletu (audyt menu, 2026-09-11) ---- Zakładki paska i grupy menu telefonu stoją w