/* Pasek nawigacji — arkusz `header.php`. * * Przepisane z klas Tailwinda `NavbarVariant3.tsx`. Wartości są te same co * do piksela; jeśli któraś się nie zgadza, to jest błąd przepisania, nie * decyzja projektowa. Punkt łamania `lg` Tailwinda to 1024px, `md` to 768px. * * ⚠︎ **PRÓG WARIANTU PASKA TO 1280 px, NIE 1024 px — i to jest wynik pomiaru, * nie przepisana klasa `lg:`.** Zgłoszenie właściciela z 10.08.2026 („poniżej * 1160 px nawigacja trochę się rozwala"). Rachunek: prawa grupa * (O Karawanie · Dziennik · Kontakt + klaster ikon) potrzebuje **460,5 px** * bez zawijania, siatka `1fr auto 1fr` daje jej `(szerokość − 160 wyściółki * − 104 znaku) / 2`, więc: * * ≤ 1160 px → kolumna 440,5 — „O Karawanie" łamie się na dwie linie * i wchodzi na znak (to jest zrzut właściciela) * 1200 px → kolumna 460,5 — mieści się, ale do znaku zostaje 12,4 px * 1280 px → kolumna 500,5 — do znaku 47,5 px, czyli tyle, ile wynosi * odstęp między dwoma linkami (40 px). To jest ten próg. * * Poniżej 1280 px obowiązuje pasek mobilny (hamburger · znak · skrzynia). * ⚠︎ **Pięć media query poniżej musi mieć TĘ SAMĄ liczbę** — grupy linków, * znak desktopowy, pasek mobilny, nakładka i wyściółka pasa. Rozjazd choćby * jednej daje albo dwa paski naraz, albo żaden. */ /* Wysokość paska w stanie litym. Jedna deklaracja na trzech odbiorców: sam pasek, rozpórka pod nim i `scroll-margin-top` kotwic w dokumentach (`strona.css`). Powód jest z raportu rozpoznania paczki „prawne": cztery pliki canvasu podają trzy różne liczby (90, 80 i 114 wpisane w JS), bo każdy przepisywał wynik zamiast go liczyć. „114px nie jest wartością do przepisania, tylko wynikiem działania" — tutaj jest to działanie. */ :root { /* ⚠︎ **72px PONIŻEJ progu 1280px, 90px nad nim — zmiana z 11.08.2026.** Do tej pory była to JEDYNA wysokość paska bez wartości mobilnej: 10.08 rozdzielił pasek nad hero (140 / 116), a pasek lity został przy jednej liczbie dla telefonu i desktopu. Zgłoszenie właściciela dotyczyło koszyka, gdzie nawigacja spotyka się z przyklejonym paskiem decyzji. Zmierzone na `/koszyk`, 390px: pasek decyzji 77px (12 wyściółki + 48 przycisku + 16 + 1 obrysu; na iOS do 95px, bo dochodzi `safe-area-inset-bottom`) nawigacja 90px razem 167px = 30,2 % okna iPhone'a SE (553px) 22,8 % okna iPhone'a 14 (734px) Po zmianie 149px, czyli 26,9 % na SE. Przycisk 48px i wyściółki 12/16 w pasku decyzji nie mają już czego oddać — całość zysku musiała przyjść z nawigacji. Dla porównania konwencja: pasek Material 56dp, pasek iOS 44pt, typowy sklep mobilny 56–64px. 90px było 1,4–1,6 × normy, 72px jest 1,1–1,3 ×. */ --szewko-pasek-wysokosc: 72px; /* Wysokość paska w stanie przezroczystym, czyli nad hero. Drugi odbiorca to górny odstęp sekcji hero: pasek nie ma tam rozpórki i leży NA sekcji, więc treść musi zaczynać się dokładnie pod nim. Pliki canvasu wpisują tę samą liczbę wprost do geometrii sekcji (`/dziennik` 140px na desktopie, 148px na 390px przy pasku 64px) — i to jest ta klasa usterki, którą ten token znosi. ⚠︎ **116px POD progiem 1280px, 140px nad nim — zmiana z 10.08.2026.** Do tej pory było 140px na każdej szerokości i to była realna usterka, nie uproszczenie: pasek mobilny mieści hamburger (44), znak (80) i skrzynię (52), więc w 140px zostawało nad i pod nimi po ~30px pustki — właściciel zobaczył ją jako „zbyt dużą przestrzeń nad nawigacją" w stanie nieprzewiniętym. 80 + 2 × 18 = 116, czyli to samo pole ciszy 18px, z którego liczy się znak desktopowy (140 − 2 × 18 = 104). ⚠︎ **To jest zmiana o zasięgu CAŁEJ WITRYNY, nie jednej podstrony.** Token karmi górny odstęp ośmiu sekcji hero (`dziennik-hero`, `sklep-hero`, `kontakt-hero`, `duch-hero`, `cart`, `form-checkout`, `kasa-pusta`, `thankyou`), `top` przyklejenia w `cart-totals` i `scroll-margin-top` w `kontakt-formularz`. Wszystkie dostają na wąskim ekranie 24px mniej i wszystkie tego chciały — każda liczyła „wysokość paska + oddech", a pasek był za wysoki. Dwaj odbiorcy liczący `top` zostają bezpieczni, bo 116 − 20 = 96 dalej mija pasek LITY (90px), a to jego mijają. */ --szewko-pasek-hero: 116px; @media (min-width: 1280px) { --szewko-pasek-wysokosc: 90px; --szewko-pasek-hero: 140px; } } .szewko-navbar { /* `--szewko-navbar-offset` ustawia `navbar.js` na podstawie wysokości paska ogłoszeń: `max(0, wysokość − scrollY)`. Bez paska zostaje zerem, więc pasek da się wpiąć później bez ruszania tego arkusza. */ position: fixed; top: var(--szewko-navbar-offset, 0px); right: 0; left: 0; z-index: 350; height: var(--szewko-pasek-hero); background: transparent; transition: height var(--duration-mid) var(--ease-desert), background-color var(--duration-mid) var(--ease-desert), box-shadow var(--duration-mid) var(--ease-desert); /* Stan „lity": nad hero dochodzi po przewinięciu 80px, na pozostałych widokach obowiązuje od pierwszej klatki (klasa z PHP). */ &.szewko-navbar--pelna, &.szewko-navbar--przewiniety { height: var(--szewko-pasek-wysokosc); background: color-mix(in srgb, var(--color-smoked-tent) 95%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-nav); } & .szewko-navbar__pas { /* CELOWO bez `position: relative`. Panel mega-menu ma się kotwiczyć do paska (czyli do okna), a nie do tego kontenera — w Reakcie jest rodzeństwem tego diva, nie jego dzieckiem. Ustawienie tu `relative` przesuwa panel o szerokość lewej kolumny siatki. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-lg); @media (min-width: 768px) { padding: 0 48px; } @media (min-width: 1280px) { padding: 0 80px; } } /* ─── Grupy linków ────────────────────────────────────────── */ & .szewko-navbar__lewo, & .szewko-navbar__prawo { display: none; align-items: center; gap: var(--space-xl); transition: gap var(--duration-mid) var(--ease-desert); @media (min-width: 1280px) { display: flex; } } & .szewko-navbar__prawo { justify-content: flex-end; } &.szewko-navbar--pelna, &.szewko-navbar--przewiniety { & .szewko-navbar__lewo, & .szewko-navbar__prawo { gap: 32px; } } /* ⚠︎ **Pole klikalne linku to NIE jest sam napis.** Zmierzone 11.08.2026 w stanie litym: `Sklep` miał 34,8 × 16 px, czyli 556 px² na najważniejsze wejście paska. Wysokość 16 px jest poniżej 24 px z WCAG 2.2 SC 2.5.8, a wyjątek dla „linków w zdaniu" nie obejmuje paska nawigacji. Wyściółka 8 px w pionie z ujemnym marginesem daje 32 px pola klikalnego i NIE rusza układu: `__lewo` i `__prawo` centrują elementy (`align-items: center`), więc pudełko marginesu zostaje tej samej wysokości co treść. Podkreślenie przenosi się razem z nią na `bottom: 8px` — inaczej odjechałoby o wyściółkę pod descendery. */ & .szewko-navbar__link { position: relative; display: inline-flex; align-items: center; padding-block: 8px; margin-block: -8px; font-family: var(--font-ui); font-weight: 600; /* ⚠︎ **0,875rem = 14 px — decyzja T6 z 11.08.2026. NIE JEST TO cofnięcie poprawki z tego samego dnia**, mimo że liczba wygląda tak samo jak ta, którą wtedy stąd zdjęto. Zdjęta była **inna rzecz**: `0.875rem` stało w regule STANU LITEGO i sprawiało, że link KURCZYŁ SIĘ przy przewijaniu (14 px lity wobec 16 px nad hero). Ten warunek dalej obowiązuje — link ma jeden rozmiar w obu stanach. T6 zmienia wyłącznie, JAKI to rozmiar. Dlaczego 14, a nie 16: skala z `docs/TYPOGRAFIA.md` §4 definiuje szczeble przez RODZAJ tekstu (mikroetykieta, pomocniczy, ciągły, lead), a **nawigacja nie jest żadnym z nich** — linku się nie czyta, tylko skanuje. Pakiet 1 sprawdził, że 16 px Literaty trafia równo w szczebel `czytelny` (ekw. 16,3) i zostawił liczbę. To weryfikowało, że stoi ona NA szczeblu, a nie że nawigacja należy NA TYM szczeblu — linki paska miały przez to rozmiar akapitu. 14 px to ekw. **14,3**, czyli `pomocniczy`. Wobec stanu sprzed 11.08 (14 px Crimson Pro, ekw. 11,8) jest to nadal **+21 % optycznie**, mimo identycznej liczby — bo Literata ma wysokość x 0,51 wobec 0,42. Stopka stoi na tym samym rachunku i schodzi o oczko niżej, na 13 px; obie reguły przelicza się razem. */ font-size: 0.875rem; letter-spacing: 0.04em; color: var(--color-parchment); text-decoration: none; transition: color var(--duration-mid) var(--ease-desert); &:hover { color: var(--color-sand-gold); } /* Podkreślenie wyjeżdża od lewej na całą szerokość linku. */ & .szewko-navbar__podkreslenie { position: absolute; bottom: 8px; left: 0; width: 0; height: 2px; background: var(--color-sand-gold); transition: width var(--duration-mid); } &:hover .szewko-navbar__podkreslenie, &:focus-visible .szewko-navbar__podkreslenie { width: 100%; } } /* Nad hero pasek jest przezroczysty i linki leżą na zdjęciu — bez cienia biały tekst gubi się na jasnym piasku. W stanie litym cień znika, bo tło jest już ciemne i pełne. */ &:not(.szewko-navbar--pelna):not(.szewko-navbar--przewiniety) { & .szewko-navbar__link, & .szewko-ikona { /* ⚠︎ Jedyne miejsce rundy z 13.08.2026, w którym zdjęcie surowego koloru NIE jest tożsamościowe: było `rgba(0, 0, 0, 0.6)`, czyli czerń spoza palety. Zastąpione Smoked Tentem, bo to najciemniejsza barwa motywu, a paleta jest świadomie ciepła — czarny cień był tu jedynym zimnym elementem. ZMIERZONE Playwrightem 13.08.2026 (podmiana filtra w locie, ta sama odsłona, strona główna, pasek w stanie przezroczystym): kontrast tekstu do najciemniejszego piksela cienia 15,75 : 1 → 15,15 : 1 (−3,8 %) największa różnica na kanał ΔR 7/255 pikseli z różnicą > 5/255 54 z 3074 (1,76 % kadru) poza pasem ~5 px od glifu różnica DOKŁADNIE 0 ⚠︎ Pierwsza wersja tego komentarza mówiła „różnica jest podprogowa" i było to NIEŚCISŁE — w pasie 1–4 px przy krawędzi liter sięga 7/255, czyli powyżej progu dostrzegalności na gładkim tle. Nieistotna jest nie dlatego, że mała, tylko dlatego, że **leży dokładnie na krawędzi litery**, gdzie i tak następuje skok barwy. Zapas kontrastu jest przy tym ponad trzykrotny wobec 4,5 : 1. ⚠︎ Poniżej 1280 px ta reguła nie renderuje NICZEGO — `.szewko-navbar__link` i `.szewko-navbar__ikony` są wtedy `display: none`, a pasek mobilny ma własne elementy poza tym selektorem. Na 390 px zmiana nie ma żadnego skutku wizualnego. ⚠︎ ROZSTRZYGNIĘTE PRZEZ WŁAŚCICIELA 13.08.2026, PO ZOBACZENIU POMIARU: **zostaje Smoked Tent.** To nie jest stan tymczasowy ani „do sprawdzenia później" — decyzja zapadła na liczbach wyżej. **Nie przywracaj czerni** i nie traktuj tego jako długu do domknięcia. Odwrót jest możliwy, ale wymaga nowej decyzji właściciela, nie inicjatywy przy okazji: `rgba(0, 0, 0, 0.6)` łamie regułę 3 (kolory wyłącznie przez tokeny), więc czerń musiałaby najpierw dostać własny token w `tokens.css`. */ filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--color-smoked-tent) 60%, transparent)); } } /* ⚠︎ **Linki NIE kurczą się razem z paskiem — zdjęte 11.08.2026.** Stało tu `font-size: 0.875rem`, czyli 14 px w stanie litym wobec 16 px nad hero. Dwa powody zdjęcia, oba zmierzone, nie oszacowane: 1. **`--font-ui` to Crimson Pro, a nie krój bezszeryfowy.** Zmierzona wysokość x wynosi 0,43 em wobec 0,52 em Arialu, więc 14 px tego kroju czyta się jak **11,6 px** kroju interfejsowego, a 13 px stopki jak 10,7 px. To nie jest kwestia gustu — to jest liczba, przez którą pasek w stanie litym wyglądał na wyszeptany. ⚠︎ **Ten punkt przestał obowiązywać jeszcze tego samego dnia.** `--font-ui` to od pakietu 0 naprawy typografii **Literata (x 0,51)**, czyli krój o wysokości x praktycznie równej odniesieniu — patrz `docs/TYPOGRAFIA.md`, decyzja T3. Powód zdjęcia kurczenia się nie zmienia (punkt 2 zostaje w mocy), ale **rachunek z tego punktu jest nieaktualny**. ✔ **Przeliczone w pakiecie 1 (11.08.2026): 16px ZOSTAJE.** 16px Literaty to ekw. **16,3**, czyli szczebel `czytelny` skali z §4 — link paska ląduje na szczeblu i stoi nad podłogą, więc nie ma tu czego podnosić ani obniżać. Stopka na tym samym rachunku wypadła inaczej i zeszła z 15px na 14px (`footer.css`) — bo tam liczba BYŁA kompensacją Crimson Pro, a tutaj wzięła się ze zrównania dwóch stanów paska. 2. **Stan lity obowiązuje niemal zawsze**: nad hero od 80 px przewinięcia, a na podstronach bez hero od pierwszej klatki. „Duży" wariant 16 px widać było wyłącznie na nieprzewiniętej stronie głównej. ⚠︎ **Nie kosztuje to progu 1280 px, i to też jest pomiar.** Prawa grupa (trzy linki + klaster ikon) mierzy: 14 px, odstęp 32 (stan lity, przed zmianą) → 397,2 px 16 px, odstęp 32 (stan lity, po zmianie) → 424,2 px 16 px, odstęp 40 (stan nad hero, bez zmian) → 448,2 px Kolumna dostępna przy 1280 px to `(1280 − 160 wyściółki − 104 znaku) / 2` = 508 px. Konfiguracja NAJSZERSZA na pasku (448,2) jest ta sama co przed zmianą — stan lity ma węższy znak (70 px) i węższy odstęp, więc po zmianie mieści się z zapasem 100,8 px. Próg zostaje na 1280 i nie ma czego ruszać w pięciu media query. (Rachunek „460,5 px" z nagłówka pliku był liczony, nie mierzony, i wychodzi wyżej niż stan faktyczny. Zostawiony jako zapis rozumowania o progu.) */ /* ─── Logo ────────────────────────────────────────────────── */ & .szewko-navbar__logo { display: none; align-items: center; justify-content: center; transition: filter var(--duration-mid) var(--ease-desert); @media (min-width: 1280px) { display: flex; } /* 104 px, nie 120 — korekta właściciela z 10.08.2026 („lekko zbyt duże"). Liczba jest wyprowadzona z paska, nie dobrana na oko: znak jest okrągły i wypełnia swój kadr, więc przy 120 px w pasku 140 px zostawało po 10 px pola ciszy nad i pod tarczą — mniej niż odstęp między dwoma linkami, czyli znak dotykał krawędzi paska. 140 − 2 × 18 = 104 daje pole ciszy 18 px, a tarcza zostaje 2,4× wyższa od pigułki ikony (44 px), więc środek kompozycji dalej wygrywa z klastrem po prawej. ⚠︎ Stan lity NIE zmienia się razem z tym: 70 px w pasku 90 px ma proporcję 0,78 i właściciel go nie zakwestionował. Skok przy przewinięciu jest po zmianie mniejszy (104 → 70 zamiast 120 → 70) i to jest skutek pożądany — przejście było najbardziej ruchliwym elementem paska. */ & img { width: 104px; height: 104px; object-fit: contain; transition: width var(--duration-mid) var(--ease-desert), height var(--duration-mid) var(--ease-desert); } } &.szewko-navbar--pelna, &.szewko-navbar--przewiniety { & .szewko-navbar__logo { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--color-sand-gold) 40%, transparent)); & img { width: 70px; height: 70px; } } } /* ─── Klaster ikon: konto + skrzynia ──────────────────────── */ /* ⚠︎ **Pigułki mają 44 px, nie 52 — korekta z 11.08.2026** („czy ikona koszyka i konta nie są za duże w porównaniu do linków"). Były zdefiniowane jako wyściółka 8 + wnętrze 36 = 52 px, czyli **3,25 × rozmiar pisma linku**; typowy pasek trzyma się 2,5–2,8 ×. Do tego para była niezestrojona wewnętrznie: glif konta rysował się w 24 px, a skrzynia w 36 px — półtora raza większa od sąsiadki w identycznym pudełku. Po zmianie: pudełko 44 × 44 (wyściółka 8 + wnętrze 28), glif konta zostaje 24 px, rysunek skrzyni schodzi do 28. Skrzynia dalej jest większa i tak ma być — to ilustracja, nie glif konturowy, więc przy równym stopniu czytałaby się mniejsza. Klaster zwęża się ze 112 px do 96 px, co dokłada 16 px zapasu prawej grupie. ⚠︎ **Reguła celowo siedzi w `__ikony`, a nie na `.szewko-skrzynia`.** Ten sam part renderuje się w pasku MOBILNYM, gdzie 52 px jest dobre: nie ma tam linków tekstowych, do których miałby się skalować, a skrzynia jest jedynym wejściem do koszyka na dotyku. `__ikony` żyje wyłącznie w `__prawo`, czyli powyżej 1280 px — więc żadnego media query nie trzeba, a mobilne 52 px zostaje nietknięte. */ & .szewko-navbar__ikony { display: flex; align-items: center; gap: var(--space-sm); /* ⚠︎ Skrzynia dochodzi do 44px INNĄ drogą niż pigułka konta: wyściółka 6 i rysunek 32, a nie 8 i 28. Powód wyszedł dopiero na zrzucie — plakietka licznika ma stałe 20px wysokości, więc na rysunku 28px zajmowała ⅔ jego wysokości i to ona, a nie skrzynia, stawała się treścią ikony. Przy 32px proporcja wraca do 0,63, czyli tam, gdzie była przy 36px. */ & .szewko-skrzynia { padding: 6px; } & .szewko-skrzynia__rysunek { width: 32px; height: 32px; } } & .szewko-navbar__chip { display: flex; align-items: center; justify-content: center; padding: var(--space-sm); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); color: var(--color-sand-gold); transition: background-color 200ms var(--ease-desert); &:hover { background: color-mix(in srgb, var(--color-sand-gold) 15%, transparent); } & .szewko-navbar__chip-srodek { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } } /* ─── Mega-menu „Sklep" ───────────────────────────────────── */ /* Wysoka strefa najazdu z ujemnym marginesem: kursor jadący w dół do menu przechodzi przez pas, w którym nadal jest „nad" linkiem, więc menu nie zamyka się w połowie drogi. Wartości takie same jak w Reakcie: 80px nad hero, 40px w stanie litym. ⚠︎ **W PIONIE to działało, w POZIOMIE nie — poprawka z 11.08.2026.** Zgłoszenie właściciela („wyjedziemy myszką chociaż trochę poza link Sklep i menu się chowa"). Pomiar w stanie litym pokazał, dlaczego: link „Sklep" 34,8 × 16 px strefa najazdu 34,8 px szerokości ⟵ wyściółka była TYLKO w pionie panel mega-menu 360 px szerokości, górna krawędź 36 px niżej Czyli: żeby dojść do panelu szerokiego na 360 px, trzeba było przejechać 36 px **korytarzem szerokim na 34,8 px**. Każdy ruch po skosie — a do kafla w prawej części panelu jedzie się właśnie po skosie — wychodził poza strefę, a `mouseleave` zamykał panel NATYCHMIAST, bez opóźnienia. Lekarstwo jest dwuczęściowe i obie części są potrzebne: · tutaj — **tolerancja pozioma 24 px** na stronę, tą samą sztuczką co w pionie (wyściółka + ujemny margines), więc korytarz ma 82,8 px zamiast 34,8 i układ paska nie drgnął o piksel. 24 px mieści się w połowie odstępu do „FAQ" (32 px w stanie litym, 40 nad hero), więc strefy sąsiadów się nie nakładają; · `assets/js/navbar.js` — **opóźnienie 220 ms przy zamykaniu**, które znosi resztę: przejazd po skosie przez martwy narożnik trwa krócej, a powrót kursora kasuje licznik. */ & .szewko-navbar__sklep { /* `static`, żeby panel liczył się względem paska — patrz komentarz przy `__pas`. Sam kontener jest tu wyłącznie strefą najazdu. */ position: static; display: flex; align-items: center; padding-block: 80px; padding-inline: 24px; margin-block: -80px; margin-inline: -24px; } &.szewko-navbar--pelna .szewko-navbar__sklep, &.szewko-navbar--przewiniety .szewko-navbar__sklep { padding-block: 40px; margin-block: -40px; } & .szewko-navbar__mega { position: absolute; top: 100%; /* W Reakcie stoi tu `left-20`, czyli sztywne 80px od lewej krawędzi OKNA. Do 1440px to jest dokładnie lewa krawędź linku „Sklep", bo kontener ma wtedy 80px wyściółki i zaczyna się w zerze. Powyżej 1440px kontener się centruje, a sztywne 80px zostaje przy krawędzi ekranu i panel odjeżdża od linku o kilkaset pikseli. `max()` trzyma jedno i drugie: 80px na wąskich, wyściółka wyśrodkowanego kontenera na szerokich. */ left: max(80px, calc(50% - 720px + 80px)); z-index: 50; width: 360px; padding: var(--space-md); border-top: 2px solid var(--color-sand-gold); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-dark-mahogany); box-shadow: var(--shadow-nav); &[hidden] { display: none; } } & .szewko-navbar__kafel { display: flex; gap: var(--space-md); align-items: center; padding: 12px; border-radius: var(--radius-md); text-decoration: none; transition: background-color 200ms var(--ease-desert); opacity: 0; animation: szewko-wsuw var(--szewko-opoznienie, 200ms) ease-out forwards; &:hover { background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); } & .szewko-navbar__kafel-ikona { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); color: var(--color-sand-gold); transition: background-color 200ms var(--ease-desert), color 200ms var(--ease-desert); } &:hover .szewko-navbar__kafel-ikona { background: color-mix(in srgb, var(--color-sand-gold) 15%, transparent); color: var(--color-brass-lantern); } & .szewko-navbar__kafel-tresc { flex: 1; } & .szewko-navbar__kafel-nazwa { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--color-parchment); } & .szewko-navbar__kafel-opis { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.75rem; font-style: italic; color: var(--color-sand-gold); } & .szewko-navbar__kafel-strzalka { color: var(--color-sand-gold); opacity: 0; transition: opacity 200ms var(--ease-desert); } &:hover .szewko-navbar__kafel-strzalka { opacity: 1; } } & .szewko-navbar__mega-stopka { margin-top: var(--space-sm); padding-top: 12px; border-top: 1px solid var(--color-sand-gold); & a { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-ui); font-size: 0.75rem; color: var(--color-sand-gold); text-decoration: none; &:hover { color: var(--color-brass-lantern); } } } /* ─── Pasek mobilny ───────────────────────────────────────── */ & .szewko-navbar__mobile { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; @media (min-width: 1280px) { display: none; } & .szewko-navbar__mobile-lewo { display: flex; justify-content: flex-start; } & .szewko-navbar__mobile-prawo { display: flex; justify-content: flex-end; } & .szewko-navbar__mobile-logo { display: flex; justify-content: center; /* 80 px — druga korekta właściciela tego samego dnia (48 → 64 → 80). Powód pierwszej był hierarchiczny: przy 48 px znak marki był MNIEJSZY od hamburgera (44 × 44) i od skrzyni (52 × 52), czyli środek kompozycji i jedyny nośnik marki miał w pasku najmniejszą wagę wizualną. 64 px to odwróciło, ale zostawiło znak za małym na paśmie tabletowym, które po przesunięciu progu na 1280 px sięga teraz **do 1279 px**. 80 px wychodzi z tej samej reguły co znak desktopowy: pasek 116 px minus po 18 px pola ciszy. Jedna wartość na całe pasmo poniżej 1280 px, bo poziomo mieści się z ogromnym zapasem nawet na 390 px (44 + 80 + 52 = 176 px treści przy 342 px pasa) — dzielenie tego na telefon i tablet dawałoby dwie liczby tam, gdzie wystarcza jedna. */ & img { width: 80px; height: 80px; object-fit: contain; transition: width var(--duration-mid) var(--ease-desert), height var(--duration-mid) var(--ease-desert); } } } /* ⚠︎ **Bez tej reguły 80 px NIE ZMIEŚCI SIĘ po przewinięciu.** Pasek lity ma na telefonie 72 px, więc znak w rozmiarze paska przezroczystego wypełniłby go z okładem. Pasek mobilny dostaje więc **skalowanie znaku między stanami**, którego do dziś nie miał (przy 64 px jedna wartość mieściła się w obu paskach i nie było czego skalować). Przejście jedzie tą samą krzywą co desktopowe 104 → 70, więc oba paski zwijają się identycznie. ⚠︎ **56 px, nie 64 — razem ze zjazdem paska 90 → 72 px (11.08.2026). I NIE jest to liczba dobrana na oko: to proporcja, którą ten plik już stosuje.** Pasek lity liczy znak PROPORCJĄ (desktopowe „70 px w pasku 90 px ma proporcję 0,78"), a pasek nad hero — POLEM CISZY (140 − 2 × 18 = 104, 116 − 2 × 18 = 80). Tutaj obowiązuje pierwsza reguła: 72 × 0,78 = 56,2 → 56 px, pole ciszy po 8 px Wariant „pole ciszy 10 px jak na desktopie" dawał 52 px i **remis ze skrzynią** (52 × 52) — czyli dokładnie ten rozjazd hierarchii, który 10.08 kazał podnieść znak z 48 px. Przy 56 px znak zostaje największym elementem paska, a że jest wypełnioną tarczą wobec półprzezroczystej pigułki skrzyni, wygrywa wagą wizualną z zapasem. Reszta paska mieści się bez zmian: hamburger 44 i skrzynia 52 zostawiają w 72 px odpowiednio 14 i 10 px pola ciszy. */ &.szewko-navbar--pelna, &.szewko-navbar--przewiniety { & .szewko-navbar__mobile-logo img { width: 56px; height: 56px; } } & .szewko-navbar__hamburger { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: calc(-1 * var(--space-sm)); padding: 0; border: 0; background: none; cursor: pointer; & .szewko-navbar__hamburger-belki { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 20px; & span { width: 100%; height: 2px; background: var(--color-sand-gold); transition: transform 200ms var(--ease-desert), opacity 200ms var(--ease-desert); } } /* Krzyżyk. Stan otwarty żyje na pasku, nie na przycisku, bo nakładka ma własny przycisk zamykający — ten zmienia się tylko wtedy, gdy nakładka wjeżdża spod niego. */ &[aria-expanded='true'] .szewko-navbar__hamburger-belki { & span:nth-child(1) { transform: rotate(45deg) translateY(8px); } & span:nth-child(2) { opacity: 0; } & span:nth-child(3) { transform: rotate(-45deg) translateY(-8px); } } } } /* Rozpórka pod pasek `fixed` — tylko na widokach bez hero. Nad hero pasek celowo leży na obrazie. */ .szewko-navbar__rozporka { height: var(--szewko-pasek-wysokosc); } /* Pasek administratora WordPressa też jest przyklejony do góry okna i nie przesuwa elementów `fixed` — bez tego nawigacja chowa się pod nim, ale tylko zalogowanym. Problem nie istniał w Reakcie, więc nie ma go w źródle designu. 46px poniżej 783px, bo tam pasek administratora jest wyższy. */ .admin-bar .szewko-navbar { top: calc(var(--szewko-navbar-offset, 0px) + 32px); } @media screen and (max-width: 782px) { .admin-bar .szewko-navbar { top: calc(var(--szewko-navbar-offset, 0px) + 46px); } } .admin-bar .szewko-nakladka { top: 32px; @media screen and (max-width: 782px) { top: 46px; } } /* ─── Skrzynia (ikona koszyka) ──────────────────────────────── */ .szewko-skrzynia { position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-sm); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); transition: background-color 200ms var(--ease-desert); &:hover { background: color-mix(in srgb, var(--color-sand-gold) 15%, transparent); } & .szewko-skrzynia__rysunek { position: relative; display: block; width: 36px; height: 36px; & img { width: 100%; height: 100%; object-fit: contain; } } & .szewko-skrzynia__plakietka { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-desert-rust); color: var(--color-parchment); font-family: var(--font-ui); font-weight: 700; /* ⚠︎ 12px, nie 11 — szczebel `mikro` (`docs/TYPOGRAFIA.md` §4, pakiet 1), i jest to pozycja, której SONDA NIE ZOBACZY: plakietka renderuje się wyłącznie przy niepustym koszyku, więc na zrzucie ze świeżej sesji jej nie ma. Licznik rzeczy w skrzyni jest daną wprost z reguły T5. Pigułka zostaje 20px wysoka: `line-height` schodzi na 1, żeby 12px z dziedziczonym 1,5 (18px) nie napierało na jej krawędzie. */ font-size: 12px; line-height: 1; animation: szewko-plakietka 200ms var(--ease-desert) forwards; } } /* ─── Nakładka mobilna ─────────────────────────────────────── */ .szewko-nakladka { position: fixed; inset: 0; /* Wyżej niż pasek (350), żeby logo, skrzynia i hamburger spod niej nie prześwitywały. */ z-index: 360; padding: var(--space-lg); overflow-y: auto; background: var(--color-smoked-tent); &[hidden] { display: none; } @media (min-width: 1280px) { display: none; } & .szewko-nakladka__glowa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); & img { width: 48px; height: 48px; object-fit: contain; } } & .szewko-nakladka__zamknij { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-sand-gold); border-radius: var(--radius-md); background: none; cursor: pointer; & span { position: relative; display: block; width: 16px; height: 16px; &::before, &::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--color-sand-gold); } &::before { transform: rotate(45deg); } &::after { transform: rotate(-45deg); } } } & .szewko-nakladka__menu { display: flex; flex-direction: column; } & .szewko-nakladka__kreska { width: 100%; height: 1px; background: var(--color-sand-gold); opacity: 0.2; } & .szewko-nakladka__kafel { display: flex; gap: var(--space-md); align-items: center; padding: 12px 0; text-decoration: none; } & .szewko-nakladka__kafel-ikona { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-sand-gold) 8%, transparent); color: var(--color-sand-gold); } & .szewko-nakladka__kafel-tresc { flex: 1; } & .szewko-nakladka__kafel-nazwa { display: block; /* T8 (12.08.2026) — Cinzel → Literata; powód przy `.szewko-home-kafel__nazwa` w `home-kafel-kategorii.css`. ⚠︎ Waga 700 dopisana JAWNIE: reguła jej nie miała, więc dziedziczyła 400, a renderowała się grubo tylko dlatego, że Cinzel istnieje w motywie wyłącznie w 700. Literata jest zmienna, więc bez tej linii kafle nakładki zblakłyby po cichu. */ font-family: var(--font-ui); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-parchment); } & .szewko-nakladka__kafel-opis { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 0.75rem; font-style: italic; color: var(--color-sand-gold); } /* Konto wchodzi TUTAJ, nie do paska mobilnego — pasek ma trzy strefy (hamburger / logo / skrzynia) i taki jest zamknięty design mobilny. Osobny wiersz, bo to jedyny link osobisty w tej nakładce. ⚠︎ **14px razem z `__reszta` (T6), i to nie jest kosmetyka.** Oba wiersze stoją w nakładce jeden pod drugim, oddzielone samą kreską — zejście wyłącznie `__reszta` dałoby „Moje konto" o oczko większe od „O Karawanie" leżącego 20px niżej, bez żadnego powodu widocznego dla czytelnika. Cel dotykowy jest tu niezależny od pisma: dyktuje go ikona 44 × 44. */ /* Wejście na cały sklep — wiersz przeniesiony z `.szewko-navbar__mega-stopka`. ⚠︎ **14px, nie 12px jak w mega-menu na desktopie**, i to jest świadome: w nakładce nie ma ani jednego napisu poniżej 14px (T6), a ten wiersz stoi bezpośrednio nad „Moje konto" w tym samym rejestrze roli. Kolor Sand Gold zostaje z oryginału — odróżnia wyjście „na wszystko" od kafli kategorii, które są Pergaminem. Kreska jest węższa niż ta pod „Moje konto" (20% wobec 30%), bo tamta rozdziela DWA BLOKI nawigacji, a ta dopina wiersz do listy kategorii, której jest podsumowaniem. */ & .szewko-nakladka__wszystko { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 20%, transparent); & a { display: flex; gap: var(--space-sm); align-items: center; /* 44px to próg dotykowy, ten sam co przy ikonach paska — wiersz ma jedną linijkę tekstu, więc bez tego zszedłby do ~21px. */ min-height: 44px; font-family: var(--font-ui); font-size: 0.875rem; color: var(--color-sand-gold); text-decoration: none; } } & .szewko-nakladka__konto { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent); & a { display: flex; gap: var(--space-md); align-items: center; padding: var(--space-sm) 0; font-family: var(--font-ui); font-size: 0.875rem; color: var(--color-parchment); text-decoration: none; } } /* ⚠︎ **To są linki nawigacyjne — 14px, szczebel `pomocniczy` (T6).** Poprawione 11.08.2026 po obejrzeniu nakładki na telefonie. Stało tu 16px, czyli ekw. **16,3** — dokładnie tyle, ile miał pasek nawigacji PRZED T6. Pierwsze przejście T6 ominęło tę regułę, bo wyłączyłem z niej „kafle nakładki mobilnej" jako nagłówki bloków z opisem. ⚠︎ **`__reszta` nie jest kaflem** — to zwykłe linki wierszowe („O Karawanie", „Dziennik", „Kontakt", „FAQ"), odpowiednik `.szewko-navbar__link` co do roli. Skutek pominięcia był taki, że **T6 nie zmieniła na telefonie NICZEGO, co widzi użytkownik**: linki paska są poniżej 768px ukryte, więc jedyną nawigacją jest ta nakładka. ⚠︎ **Wyściółka 12px, nie 10 — próg dotykowy, nie ozdoba.** Rachunek z tego komentarza trzeba było przeliczyć razem z rozmiarem, bo zejście z 16 na 14px skraca wiersz: 14px × 1,5 interlinii z `base.css` = 21px, plus 2 × 10px dałoby **41px**, czyli 3px poniżej progu 44px. 2 × 12 + 21 = **45px**. (Wcześniej: 16px × 1,5 = 24px, 2 × 10 + 24 = 44px — dokładnie na progu.) Pozostałe wiersze nakładki przechodzą niezależnie od pisma, bo mają w środku ikonę 44 × 44 (`__kafel`, `__konto`) i to ona dyktuje wysokość. */ & .szewko-nakladka__reszta { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-md); & a { padding: 12px 0; font-family: var(--font-ui); font-size: 0.875rem; color: var(--color-parchment); text-decoration: none; } } } @keyframes szewko-wsuw { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes szewko-plakietka { from { transform: scale(0); } to { transform: scale(1); } }