/* rail.css: lewa szyna nawigacji, JEDEN arkusz dla aplikacji i stron tresci. * * Do 02.09.2026 te reguly siedzialy w css/app-desktop.css. Ten plik ladowala * wylacznie powloka aplikacji, wiec 292 strony tresci nie mialy z czego * narysowac szyny i zostawaly przy pasku gornym. Przeniesienie jest DOSLOWNE: * te same selektory, ta sama kolejnosc, te same wartosci, a css/app-desktop.css * laduje sie zaraz po tym pliku, wiec kaskada w aplikacji sie nie zmienia. * * Reguly wylacznie dla stron tresci (szyna jako warstwa `fixed`, wciecie * korpusu strony, marka nad zakladkami) mieszkaja na koncu pliku pod klasa * .rail--static. Powloka aplikacji tej klasy nie nosi, wiec jej nie widzi. * * Markup rysuja DWA generatory z tego samego modelu (js/nav/model.js): * js/nav/rail.js w aplikacji i renderStaticRail() w scripts/sync-navigation.mjs * na stronach tresci. Zgodnosci obu z modelem pilnuje * test/szynaStronTresci.test.js. */ /* Szyny nie ma. Bez JavaScriptu szyna jest pusta, wiec `:empty` zostawia wtedy widoczny pasek gorny (patrz nizej). */ .rail { display: none; } @media (min-width: 900px) { :root { --rail-w: 232px; --rail-compact-w: 76px; } /* ================= SZYNA ================= */ .rail { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: 0; /* `.app-bar` jest `fixed`, wiec wypadl z ukladu i szyna zaczyna sie na gorze okna. Wlasny odstep robi jej miejsce pod marka. */ padding-top: 72px; /* Pelna wysokosc okna, nie `max-height`: szyna urwana w polowie ekranu czyta sie jak karta, a nie jak kolumna powloki. */ height: 100dvh; padding-inline: var(--sp-3); padding-bottom: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); background: var(--bg); } /* Pusta szyna (brak JavaScriptu) nie moze zabierac kolumny. */ .rail:empty { display: none; } .rail__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .rail__tab { display: flex; align-items: center; gap: var(--sp-3); width: 100%; /* WCAG 2.2 AA 2.5.8 wymaga 44 px; 48 px daje zapas na powiekszony kroj. */ min-height: 48px; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius); background: none; color: var(--text-dim); font: 600 14px var(--font-ui); text-align: left; cursor: pointer; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .rail__tab:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); } .rail__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Aktywna pozycja WYPELNIONA zielenia (kontrakt, sekcja 1). Etykieta bierze tusz akcentu, zeby kontrast na zielonym wypelnieniu byl ten sam, co na przycisku wiodacym. */ .rail__tab.is-active { background: var(--accent); color: var(--accent-contrast); } .rail__tab.is-active:hover { background: var(--accent-strong); color: var(--accent-contrast); } .rail__ico { flex: none; width: 22px; height: 22px; } /* ---- pozycje sekcji aktywnej ---- */ .rail__sub { display: none; margin: 2px 0 var(--sp-2); padding: 0 0 0 calc(22px + var(--sp-3) + var(--sp-3)); list-style: none; } /* Rozwija sie WYLACZNIE sekcja, w ktorej gracz jest. */ .rail__item:has(> .rail__tab.is-active) > .rail__sub { display: grid; } .rail__sub-item { display: flex; align-items: center; gap: var(--sp-1); width: 100%; min-height: 34px; padding: 0 var(--sp-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); font: 500 13px var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; } .rail__sub-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } .rail__sub-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .rail__sub-item.is-active { color: var(--accent); } /* ---- karta „Nastepny krok" u dolu szyny ---- */ /* Karta stoi BEZPOSREDNIO pod pozycjami nawigacji. Do 05.09.2026 miala `margin-top: auto` i przy 1440x900 miedzy „Profil" a karta zostawalo 320 do 440 px pustki (audyt wizualny, znalezisko 18; kontrakt START 2.2). */ .rail__next { margin-top: var(--sp-2); } .rail__next-btn { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kicker ico" "action ico" "detail detail"; align-items: center; gap: 2px var(--sp-2); width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .rail__next-btn:hover { border-color: var(--accent); } .rail__next-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rail__next-kicker { grid-area: kicker; color: var(--text-dim); font: 600 var(--fs-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; } .rail__next-action { grid-area: action; font-size: 14px; font-weight: 700; } .rail__next-detail { grid-area: detail; color: var(--text-dim); font-size: var(--fs-micro); } .rail__next-ico { grid-area: ico; width: 20px; height: 20px; color: var(--accent); } /* Przycisk rozwiniecia dotyczy wylacznie pasma posredniego. */ .rail__expand { display: none; } } /* ================= PASMO POSREDNIE 900-1179 PX (D-13) ================= */ @media (min-width: 900px) and (max-width: 1179px) { .rail { align-items: center; padding-inline: var(--sp-2); } .rail__tab { justify-content: center; padding-inline: 0; } .rail__label, .rail__sub, .rail__next-kicker, .rail__next-action, .rail__next-detail { display: none; } /* Pozycje sekcji aktywnej znikaja razem z etykietami. Sam `.rail__sub` wyzej nie wystarcza: regula rozwijajaca liste pod aktywna zakladka (`.rail__item:has(> .rail__tab.is-active) > .rail__sub`) ma wyzsza specyficznosc i wygrywala, wiec w kolumnie 76 px zostawaly pelne etykiety, ktore lamaly sie na trzy wiersze i wychodzily poza tlo szyny. Wyjscie do tych pozycji daje „Rozwin nawigacje" (regula ponizej). */ .rail:not(.is-expanded) .rail__item:has(> .rail__tab.is-active) > .rail__sub { display: none; } .rail__next-btn { grid-template-columns: auto; grid-template-areas: "ico"; justify-items: center; padding: var(--sp-3); } /* Zwinieta szyna pokazuje piec wejsc glownych. Pozostale osiem widokow musi miec z niej wyjscie, inaczej w tym pasmie znikaja z powloki. */ .rail__expand { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius); background: none; color: var(--text-dim); cursor: pointer; } .rail__expand:hover { color: var(--text); border-color: var(--accent); } .rail__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rail__expand-ico { width: 20px; height: 20px; } .rail__expand-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Rozwiniecie jest NAKLADKA, nie zmiana siatki: kolumna planszy nie moze zwezic sie w reakcji na otwarcie menu. */ .rail.is-expanded { position: fixed; top: 64px; left: 0; z-index: 40; width: var(--rail-w); height: calc(100dvh - 64px); padding-top: var(--sp-3); align-items: stretch; box-shadow: var(--shadow); } /* Przyciemnienie pod nakladka. Bez niego tresc obok menu czyta sie rowno z nim i nie widac, ktora warstwa jest teraz na wierzchu. Ta sama receptura, co pod szuflada mobilna (css/mobile-nav.css), zeby oba menu gasily tlo tak samo; bez tamtej poswiaty akcentu, bo panel ma tu 232 px, a nie caly ekran. `z-index: -1` maluje warstwe ZA tlem szyny, ale wciaz wewnatrz jej kontekstu ukladania (z-index 40), wiec przykrywa tresc, marke i dwie ikony w rogu, a samego panelu nie zaciemnia. Dzieki temu nie trzeba osobnego elementu w DOM ani klasy na `body`. */ .rail.is-expanded::before { content: ""; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg-sunken) 78%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .rail.is-expanded .rail__tab { justify-content: flex-start; padding-inline: var(--sp-3); } .rail.is-expanded .rail__label, .rail.is-expanded .rail__next-kicker, .rail.is-expanded .rail__next-action, .rail.is-expanded .rail__next-detail { display: block; } .rail.is-expanded .rail__item:has(> .rail__tab.is-active) > .rail__sub { display: grid; } .rail.is-expanded .rail__expand { border-color: var(--accent); color: var(--text); } .rail.is-expanded .rail__next-btn { grid-template-columns: 1fr auto; grid-template-areas: "kicker ico" "action ico" "detail detail"; justify-items: stretch; } } @media (prefers-reduced-motion: reduce) { .rail__tab { transition: none; } } /* ================= SZYNA NA STRONACH TRESCI (.rail--static) ================= Strona tresci nie ma `.app-shell`, wiec szyna nie moze byc kolumna siatki: naglowek, `main` i stopka kazdej z 292 stron sa rodzenstwem w . Zamiast przebudowywac uklad kazdego z osmiu szablonow, szyna jest warstwa `fixed`, a korpus dostaje wciecie rowne jej szerokosci. Efekt na ekranie jest ten sam, co w aplikacji (kolumna po lewej, tresc w reszcie szerokosci), a pelnoekranowe hero mistrzow zostaje pelnoekranowe: po prostu w wezszym plotnie. Ponizej 900 px nie widac stad NICZEGO: strony tresci zostaja przy rozwijanym pasku gornym (`css/site-header.css`). Dolnego paska zakladek z aplikacji tu nie ma i to jest decyzja, nie przeoczenie: to sa strony do czytania, a pasek przyklejony do dolu zabiera im wiersze tekstu. */ @media (min-width: 900px) { .rail--static { position: fixed; top: 0; left: 0; z-index: 40; width: var(--rail-w); /* Marka siedzi W szynie, a nie w pasku nad nia (aplikacja ma tam `.app-bar`, strona tresci nie ma go wcale), wiec odstep u gory jest wlasny. */ padding-top: var(--sp-4); } /* Wciecie korpusu. `:has` na zamiast klasy, bo klasy na pisze osiem generatorow stron i kazdy inaczej; obecnosc szyny jest faktem o dokumencie, nie o szablonie. */ body:has(> .rail--static) { padding-inline-start: var(--rail-w); } /* Pasek gorny jest telefoniczny. Na desktopie niesie nawigacje szyna, dokladnie jak w aplikacji (`.app-nav[data-enhanced]` znika tak samo). */ body:has(> .rail--static) .site-nav { display: none; } /* Marka zostaje jedna: ta w szynie. Bez tego kazda strona ma dwa logotypy obok siebie, jedno nad drugim. */ body:has(> .rail--static) .landing-brand, body:has(> .rail--static) .masters-brand { display: none; } /* Naglowek strony bez marki i bez paska jest pustym pasem 64 px nad trescia. */ body:has(> .rail--static) .landing-header:not(:has(.landing-header-back)), body:has(> .rail--static) .masters-header { display: none; } /* Naglowek landingu z linkiem powrotnym ZOSTAJE: ten link jest kontekstowy (prowadzi do rodzica w strukturze tresci), a nie site-wide. */ body:has(> .rail--static) .landing-header { min-height: 0; padding-block: var(--sp-2); } /* Kreska po lewej stronie linku powrotu oddzielala go OD MARKI. Marka przeniosla sie do szyny, wiec kreska wisiala w powietrzu. */ body:has(> .rail--static) .landing-header-back { margin-left: 0; padding-left: 0; border-left: 0; } /* Zakładki w powłoce to `