/* ========================================================================== Wersja 6 - nagłówek i strona główna /wersja6/. Dopracowana kopia wersji 1: ten sam układ, poprawione to, co wypunktował panel sędziowski 30.09.2026. Arkusz ładowany tylko na tej stronie (page-wersja.php), po wspólnym wersje.css. Wszystkie wymiary z tokenów motywu; cienia nie ma żadnego (pasek przyklejony odcina się linią, panel działu ramką) - README par. 3. ========================================================================== */ .w6 { background: var(--c-bg); } /* --- Pas faktów ---------------------------------------------------------- Cztery fakty i telefon jako tap-to-call. W W1 media query ukrywało na telefonie showroom i zwrot - akurat te dwa, które budują zaufanie. Tutaj nic nie znika: wiersz przewija się palcem. */ .w6__promo { background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-200); } .w6__promo-in { display: flex; align-items: center; gap: var(--s-6); min-height: 36px; margin: 0; padding-block: 0; list-style: none; } .w6__promo-in li { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; } .w6__promo-in svg { flex: none; opacity: .8; } .w6__promo-in a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; color: var(--c-on-ink); } .w6__promo-in a:hover, .w6__promo-in a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .w6__promo-in a:focus-visible { outline-color: var(--c-on-ink); } .w6__promo-tel { margin-left: auto; gap: var(--s-3); } .w6__promo-tel a { font-weight: var(--fw-medium); } .w6__promo-godziny { opacity: .75; } /* Dział, w którym stoi klient: ta sama kreska co przy najechaniu, tylko na stałe. Bez tego pasek nie mówi, gdzie się jest - stary nagłówek mówił (aria-current w szynie działów). */ .w6__dep-link.is-tu { border-bottom-color: var(--c-ink); } /* --- Rząd: logo | wyszukiwarka pośrodku | narzędzia ---------------------- */ .w6__row { display: flex; align-items: center; gap: var(--s-6); min-height: 80px; } .w6__burger { display: none; place-items: center; width: var(--touch); height: var(--touch); margin-left: -10px; } .w6__logo { flex: none; } .w6__logo img { width: 112px; height: 45px; display: block; } .w6__search { flex: 1 1 auto; max-width: 640px; margin-inline: auto; display: flex; height: var(--h-btn); border: var(--bw-strong) solid var(--c-ink); } .w6__search:focus-within { outline: var(--bw-heavy) solid var(--c-ink); outline-offset: 2px; } .w6__search__icon { width: var(--h-field); display: grid; place-items: center; color: var(--c-ink-3); } .w6__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-500); } .w6__search input:focus { outline: none; } .w6__search button { width: 112px; border: 0; background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-300); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .w6__search button:hover, .w6__search button:focus-visible { background: var(--c-ink-2); } .w6__tools { flex: none; margin-left: auto; } /* --- Pasek działów ------------------------------------------------------- Sześć działów z ikoną, dalej trzy pozycje drugiego planu. W W1 te trzy stały kapitalikami przy 13 px - to treść, nie etykieta, więc wersaliki wracają do etykiet, a odróżnia je kolor i waga. */ .w6__nav { position: relative; border-top: var(--bw-hair) solid var(--c-line); border-bottom: var(--bw-hair) solid var(--c-line); } /* NIGDY dwa wiersze. Pozycji jest dziesięć i wystarczy węższe okno albo dłuższa nazwa działu, żeby ostatnia („Promocje") spadła do drugiego wiersza - tak było 1.10 przy ok. 1300 px. Zawijanie jest więc wyłączone, a gdyby mimo ciaśniejszych odstępów zabrakło miejsca, pozycje kurczą się i nazwa dostaje wielokropek. Przewijania na liście użyć NIE WOLNO: panele działów siedzą w jej wnętrzu i `overflow` by je przyciął. */ .w6__deps { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; list-style: none; min-width: 0; } .w6__dep { min-width: 0; } .w6__dep { position: static; } .w6__dep-link { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-btn); padding-inline: var(--s-3); min-width: 0; font-size: var(--fs-400); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: var(--bw-heavy) solid transparent; } .w6__dep-link > svg { flex: none; } .w6__dep:first-child .w6__dep-link { padding-left: 0; } .w6__dep:hover > .w6__dep-link, .w6__dep:focus-within > .w6__dep-link { border-bottom-color: var(--c-ink); } .w6__dep--first-link { margin-left: auto; } .w6__dep--link .w6__dep-link { font-size: var(--fs-300); color: var(--c-ink-2); } .w6__dep--link:last-child .w6__dep-link { padding-right: 0; } .w6__dep--link:hover .w6__dep-link, .w6__dep--link:focus-within .w6__dep-link { color: var(--c-ink); } .w6__dep--promo .w6__dep-link { color: var(--c-ink); font-weight: var(--fw-semibold); } /* --- Panel działu -------------------------------------------------------- Same linki: pełna lista grup w kolumnach (liczbę kolumn układa CSS, więc dział z pięcioma grupami nie zostawia pustych miejsc, a dział z czternastoma nie robi jednej długiej szpalty) plus wyjście na cały dział. Kadru działu tu nie ma - ten sam plik stoi chwilę niżej w kaflu, a sześć ukrytych kadrów to sześć pobrań za nic. */ .w6__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-header); visibility: hidden; opacity: 0; background: var(--c-bg); border-bottom: var(--bw-strong) solid var(--c-ink); transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); } /* Klawiatura: panel otwiera fokus w linku działu i zostaje otwarty, dopóki fokus jest w środku. */ .w6__dep:focus-within > .w6__panel { visibility: visible; opacity: 1; transition-delay: 0s; } /* Mysz: hover TYLKO tam, gdzie hover istnieje. Na dotyku dotknięcie działu otwiera stronę działu, a pełna lista grup jest w szufladzie - nic nie zależy od stanu, którego palec nie umie wywołać. */ @media (hover: hover) { .w6__dep:hover > .w6__panel { visibility: visible; opacity: 1; transition-delay: 0s; } } .w6__panel-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: start; padding-block: var(--s-5) var(--s-6); } .w6__groups { columns: 3; column-gap: var(--s-7); margin: 0; padding: 0; list-style: none; } .w6__groups li { break-inside: avoid; } .w6__groups a { display: block; padding-block: var(--s-3); font-size: var(--fs-400); color: var(--c-ink-2); } .w6__groups a:hover, .w6__groups a:focus-visible { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; } .w6__panel-all { flex: none; } /* Pozycja „Wszystkie kategorie": wejście do pełnego drzewa 52 grup z osiami, chipami i markami (panel ntb24_tree_panel z motywu). W pasku stoi po lewej stronie grupy drugorzędnej, z ikoną menu, żeby nie mylić jej z linkiem do strony. */ .w6__dep--drzewo .w6__dep-link { gap: 6px; color: var(--c-ink); } .w6__dep--drzewo .w6__dep-link > svg { flex: none; } /* --- Przyklejanie nagłówka ------------------------------------------------ W1, W2 i W4 miały atrybut data-ntb-header, ale w ich arkuszach nie było ani jednej reguły .is-stuck (style.css:973 dotyczy tylko .ntb-header), więc ntb.js dopisywał klasę, która nic nie robiła. Tutaj pasek przykleja się od 1024 px: pas faktów ustępuje, rząd i pasek działów niższe, granicą jest linia - cienia nie dodajemy. Na telefonie przyklejonego nagłówka NIE ma: nawigację niesie tam dolny pasek .ntb-mbar, a drugi pasek zabrałby jeszcze więcej pierwszego ekranu. */ @media (min-width: 1024px) { .w6.is-stuck { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-bg); } .w6.is-stuck .w6__promo { display: none; } .w6.is-stuck .w6__row { min-height: 60px; } .w6.is-stuck .w6__search { height: var(--touch); } .w6.is-stuck .w6__logo img { width: 96px; height: 39px; } .w6.is-stuck .w6__dep-link { min-height: 48px; } } /* Dziesięć pozycji paska (sześć działów, „Wszystkie kategorie", Marki, Dobór rozmiaru, Promocje) potrzebuje z ikonami 1317 px. Kontener na 1440 px daje 1376 px, więc mieszczą się dokładnie; niżej ikony schodzą i zostaje sam tekst. Zmierzone 1.10.2026 na sklepie, nie szacowane. */ @media (max-width: 1439px) { .w6__dep-link { padding-inline: var(--s-3); font-size: var(--fs-300); } .w6__dep-link > svg { display: none; } .w6__dep--link .w6__dep-link { font-size: var(--fs-200); } } @media (max-width: 1199px) { .w6__dep-link { padding-inline: var(--s-2); } .w6__groups { columns: 2; column-gap: var(--s-6); } } /* Pomiar w przeglądarce: dziesięć pozycji mieści się w jednym wierszu do 1075 px, niżej pasek łamie się na dwa (nav 98 px zamiast 50 px, a cały przyklejony nagłówek 158 px zamiast 110 px). W tym paśmie schodzi więc pozycja „Wszystkie kategorie" - jako jedyna nie prowadzi do nowej treści: komplet 49 grup jest w panelach działów obok, a poniżej 1024 px całą nawigację i tak przejmuje szuflada. */ @media (max-width: 1074px) { .w6__dep--drzewo { display: none; } } /* Telefon i tablet: burger, logo 90 px, cztery ikony bez odstępu w jednym wierszu (44 + 8 + 90 + 8 + 176 = 326 px < 358 px), pole szukania w drugim. Wysokość nagłówka: 44 (fakty) + 4 + 44 (logo i ikony) + 8 + 44 (pole) + 8 = 152 px, czyli 18,7% ekranu 812 px - w W1 było 168 px i 20,7%. */ @media (max-width: 1023px) { .w6__promo-in { gap: var(--s-4); min-height: var(--touch); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .w6__promo-in::-webkit-scrollbar { display: none; } .w6__promo-in li:last-child { padding-right: var(--s-4); } .w6__promo-godziny { display: none; } .w6__promo-tel { margin-left: 0; } .w6__promo-tel a { min-height: var(--touch); } .w6__row { flex-wrap: wrap; gap: var(--s-2); min-height: 0; padding-block: var(--s-1) var(--s-2); } .w6__burger { display: grid; } .w6__logo img { width: 90px; height: 36px; } .w6__search { order: 4; flex-basis: 100%; max-width: none; height: var(--touch); margin-inline: 0; border-width: var(--bw-hair); } .w6__search__icon { width: var(--touch); } .w6__search button { width: 96px; } .w6__tools { gap: 0; } .w6__tools__cart { padding-inline: 4px 0; } .w6__tools__sum { display: none; } .w6__nav { display: none; } } /* --- Szuflada wspólna (markup z _dane.php) ------------------------------- W1 chowała ją samym `transform: translateX(-104%)`: szuflada była poza ekranem, ale 57 jej linków zostawało w kolejności tabulacji PRZED treścią strony - pierwszy Tab na telefonie wpadał w niewidoczne menu. `visibility` wyjmuje je z drzewa dostępności i z tabulacji, a opóźnienie 200 ms zostawia wysuwanie widoczne. Otwiera ją kotwica #wersja-menu (:target) albo #wersja-szukaj z dolnego paska (:has(:target) - pole siedzi w środku szuflady). Wspólnego :focus-within nie używamy już do otwierania: przy visibility: hidden fokus nie ma jak tam trafić, a to właśnie było źródło problemu. Cienia nie ma - motyw dopuszcza go wyłącznie pod paskiem przyklejonym. */ .ntb-wm--6 { visibility: hidden; box-shadow: none; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .ntb-wm--6:target, .ntb-wm--6:has(:target) { visibility: visible; transform: none; box-shadow: none; transition-delay: 0s; } /* ========================================================================== WERSJA 6 - strona główna ========================================================================== */ /* --- Kadr otwierający ---------------------------------------------------- H1 na tokenie --fs-1000 (34-52 px) i mierze --w-head: W1 wpisywała tu `clamp(2rem, 4vw, 3.5rem)` i `15ch`, czyli trzynasty stopień drabiny i dziewiątą miarę ad hoc obok tokenu, który już istnieje. */ .w6h-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; padding-top: var(--s-7); } .w6h-hero h1 { margin-top: var(--s-3); max-width: var(--w-head); font-family: var(--f-display); font-weight: var(--fw-regular); font-size: var(--fs-1000); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-wrap: balance; } .w6h-hero p { margin-top: var(--s-4); max-width: var(--w-text); font-size: var(--fs-500); line-height: var(--lh-body); color: var(--c-ink-2); } .w6h-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .w6h-hero__more { margin-top: var(--s-4); } .w6h-hero__media .ntb-frame, .w6h-hero__media .ntb-ph { aspect-ratio: 2 / 1; } .w6h-hero__media .ntb-frame img { width: 100%; height: 100%; object-fit: cover; } /* --- Kafle działów ------------------------------------------------------ Kadr 3:2 jak zdjęcia działów. Pod nazwą stoją NAZWY GRUP, nie opis działu: trzy z sześciu opisów (term meta ntb_intro) podają liczbę grup, która nie zgadza się z katalogiem, a nazwy grup pochodzą z tych samych danych, które klient zobaczy w panelu i na stronie działu. */ .w6h-deps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-7); } .w6h-dep { display: grid; gap: var(--s-2); align-content: start; } .w6h-dep__media .ntb-frame, .w6h-dep__media .ntb-ph { aspect-ratio: var(--ar-editorial); border: var(--bw-hair) solid var(--c-line); } .w6h-dep__media .ntb-frame img { width: 100%; height: 100%; object-fit: cover; } .w6h-dep:hover .w6h-dep__media .ntb-frame, .w6h-dep:hover .w6h-dep__media .ntb-ph, .w6h-dep:focus-visible .w6h-dep__media .ntb-frame, .w6h-dep:focus-visible .w6h-dep__media .ntb-ph { border-color: var(--c-ink); } .w6h-dep__name { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-700); font-weight: var(--fw-medium); line-height: var(--lh-snug); } .w6h-dep__name > svg { flex: none; margin-top: 2px; } .w6h-dep:hover .w6h-dep__name > span, .w6h-dep:focus-visible .w6h-dep__name > span { text-decoration: underline; text-underline-offset: 4px; } .w6h-dep__groups { font-size: var(--fs-300); line-height: var(--lh-label); color: var(--c-ink-3); } /* --- Film marki ---------------------------------------------------------- Plakat jest zwykłym obrazem