/** * Vlastná hlavička — benab-style (px-shop-theme) dizajn. * * Samostatné CSS bez build kroku — hlavička sa načítava na každej stránke, * aj tam, kde archive.css nie je (Elementor stránky, košík…), preto sú * tokeny deklarované priamo na .px-header (rovnaké hodnoty ako .pc-scope * v archive.css + farby topbaru z Elementor kitu). * * Breakpointy podľa Elementoru: mobil < 768, tablet 768–1024, desktop ≥ 1025. * * Panely, ktoré do prvého vykreslenia nezasahujú (ponuka live vyhľadávania, * drawer, mini-košík), sú v assets/css/header-panels.css — ten nie je * v , dopĺňa ho assets/js/header.js mimo kritickej cesty. */ .px-header { --pc-paper: 255 255 255; --pc-ink: 4 40 23; /* Text #042817 */ --pc-accent: 0 122 64; /* predvolená zelená #007A40 — min. 4.5:1 s bielou (WCAG 1.4.3) */ --pc-accent-deep: 0 98 58; /* #00623A */ --pc-accent-bright: 0 191 99; /* Pôvodná #00BF63 — len na tmavých plochách (topbar) */ --pc-soft: 244 246 247; --pc-line: 231 243 237; /* Light #E7F3ED */ --pc-muted: 84 104 95; --pc-sage: 137 171 160; /* Sekundárny #89ABA0 */ --pc-topbar-text: 135 152 146; /* Footer Text #879892 */ --pc-radius-control: 9999px; --px-header-topbar-h: 2.5rem; --px-header-main-h: 4rem; position: sticky; top: 0; z-index: 990; font-size: 0.9375rem; line-height: 1.4; color: rgb(var(--pc-ink)); } .px-header *, .px-header *::before, .px-header *::after { box-sizing: border-box; } .px-header a { text-decoration: none; color: inherit; } .px-header ul { margin: 0; padding: 0; list-style: none; } .px-header-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .px-header .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Rovnaký kontajner ako archív / úvodka. Odsadenie je v premennej, lebo si ho pýta aj mega panel — ten je absolútne pozicovaný a hrany má zarovnať s obsahom kontajnera, nie s jeho vonkajším okrajom. */ .px-header__container { --px-gutter: 1rem; margin-left: auto; margin-right: auto; width: 100%; max-width: var(--pc-container); padding-left: var(--px-gutter); padding-right: var(--px-gutter); } @media (min-width: 640px) { .px-header__container { --px-gutter: 1.5rem; } } @media (min-width: 1024px) { .px-header__container { --px-gutter: 2rem; } } /* Sticky: topbar odscrolluje, hlavný pruh zostáva */ @media (min-width: 768px) { .px-header { top: calc(-1 * var(--px-header-topbar-h)); } } @media (min-width: 783px) { body.admin-bar .px-header { top: calc(32px - var(--px-header-topbar-h)); } } .px-header.is-stuck .px-header__main { box-shadow: 0 4px 16px rgb(var(--pc-ink) / 0.08); } /* ========================================================================= TOPBAR ========================================================================= */ .px-header__topbar { background: rgb(var(--pc-ink)); color: rgb(var(--pc-topbar-text)); font-size: 0.8125rem; } .px-header__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--px-header-topbar-h); } .px-header__contacts { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .px-header__contacts a { display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.15s; } .px-header__contacts a:hover { color: rgb(var(--pc-accent-bright)); } .px-header__contacts .px-header-icon { width: 0.875rem; height: 0.875rem; color: rgb(var(--pc-accent-bright)); } .px-header__tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1023px) { .px-header__tagline { display: none; } } .px-header__topnav { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .px-header__topmenu { display: flex; align-items: center; gap: 1.25rem; } .px-header__topmenu a { transition: color 0.15s; } .px-header__topmenu a:hover, .px-header__topmenu .current-menu-item > a { color: rgb(var(--pc-accent-bright)); } /* Na tablete sa horné menu nezmestí — je v draweri */ @media (max-width: 1024px) { .px-header__topnav nav { display: none; } } .px-header__social { display: flex; align-items: center; gap: 0.25rem; } /* Ikona má 16 px, cieľ dotyku aspoň 24 px (WCAG 2.5.8): odkaz je štvorec 1.5rem s ikonou v strede, medzera medzi ikonami ostáva opticky ~12 px. */ .px-header__social a { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; transition: color 0.15s; } .px-header__social a:hover { color: rgb(var(--pc-accent-bright)); } .px-header__social .px-header-icon { width: 1rem; height: 1rem; } @media (max-width: 767px) { .px-header__topbar { display: none; } } /* ========================================================================= HLAVNÝ PRUH ========================================================================= */ .px-header__main { background: rgb(var(--pc-paper)); border-bottom: 1px solid rgb(var(--pc-line)); transition: box-shadow 0.2s; } .px-header__main-inner { display: flex; align-items: center; gap: 1.5rem; height: var(--px-header-main-h); } @media (min-width: 1025px) { .px-header { --px-header-main-h: 5.5rem; } } .px-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .px-header__logo img { display: block; width: auto; height: 2.25rem; } @media (min-width: 1025px) { .px-header__logo img { height: 3rem; } } .px-header__logo-text { font-size: 1.25rem; font-weight: 700; } /* ---- Desktop navigácia (menu Kategórie) ---- */ .px-header__nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; } @media (max-width: 1024px) { .px-header__nav { display: none; } } .px-header__menu { display: flex; align-items: center; gap: 0.25rem; } /* Kotva mega panela je kontajner pruhu, nie položka ani navigácia — panel ide na celú šírku obsahu stránky. Položky preto ostávajú `static` a podčiarknutie beží voči odkazu, nie voči
  • . */ .px-header__main-inner, .px-header__navbar > .px-header__container { position: relative; } .px-header__menu > li { position: static; display: flex; align-items: center; } /* Menu v hlavnom riadku: položka je vysoká ako celý riadok. Mega panel začína pod ním a keby bola položka len taká vysoká ako odkaz (~2.25rem v 5.5rem riadku), myš by cestou dole opustila `li:hover` a panel by sa zavrel skôr, než sa naň dá prejsť. Odkaz ostáva vlastným boxom (podčiarknutie, chevron). V samostatnom pruhu (`nav--bar`) to netreba — pruh je presne taký vysoký ako položky, medzera tam nevzniká (0.5.8: min-height tam zbytočne zdvihol pruh na 5.5rem). */ .px-header__main-inner .px-header__menu > li { min-height: var(--px-header-main-h); } /* O stupeň menšie než zvyšok hlavičky (0.9375rem): lišta je jej najhustejší riadok — osem kategórií, ktoré sa nesmú zalomiť, a od pridania ikon si každá berie ešte 1.25rem navyše. Zhoduje sa s prvou úrovňou mega panela, takže po otvorení panela veľkosť textu neposkočí. */ .px-header__menu > li > a { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: color 0.15s; } /* Podčiarknutie označuje, kde zákazník práve je — nie kde má myš. Pri hoveri ho nekreslíme: otvorený mega panel je sám o sebe dosť veľký signál a linka pod položkou splývala s akcentovou hranou panela. */ .px-header__menu > li > a::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.125rem; height: 2px; background: rgb(var(--pc-accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; } .px-header__menu > li:hover > a, .px-header__menu > li:focus-within > a, .px-header__menu > li.current-menu-item > a, .px-header__menu > li.current-menu-ancestor > a { color: rgb(var(--pc-accent-deep)); } .px-header__menu > li.current-menu-item > a::after, .px-header__menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } /* Chevron pre položky s podmenu. Glyf kreslí maska vycentrovaná v boxe (véčko je symetrické okolo stredu viewBoxu), takže otočka o 180° okolo stredu boxu je zároveň otočka okolo vlastnej osi glyfu — bez oblúku. */ .px-header__menu .menu-item-has-children > a::before { content: ''; order: 2; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.18s ease; flex-shrink: 0; } /* Otvorený panel otočí šípku nahor */ .px-header__menu > li:hover > a::before, .px-header__menu > li:focus-within > a::before { transform: rotate(180deg); } /* ---- Mega panel ---- Panel visí pod pruhom cez celú šírku obsahu kontajnera — hrany sedia s logom aj s obsahom stránky pod hlavičkou. Druhá úroveň je hlavička stĺpca (obrázok alebo ikona kategórie + názov), tretia holý zoznam odkazov pod ňou. Zoznam tečie do vyvážených stĺpcov (`columns`), nie do mriežky: kategórie majú od nuly po osem podpoložiek a mriežka by pod každým krátkym stĺpcom nechala dieru cez celý riadok. Obsah dopĺňa pxt_nav_subcategories() z product_cat, obal .px-mega pridáva PXT_Mega_Walker. */ .px-mega { position: absolute; top: 100%; left: var(--px-gutter); right: var(--px-gutter); max-height: min(78vh, 48rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; /* Dole stačí málo — odstup pod posledným riadkom nesie samotná skupina. */ padding: 1.75rem 1.75rem 0.5rem; background: rgb(var(--pc-paper)); /* Panel aj lišta sú biele, takže hranu musí spraviť rám a tieň. Hore je akcentová linka — hlavička sa nad ňou skončí a panel čitateľne začne; tieň má tesnú vrstvu (odsadí panel od lišty) a mäkkú (odlepí ho od stránky pod ním). */ border: 1px solid rgb(var(--pc-line)); border-top: 2px solid rgb(var(--pc-accent)); border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg); box-shadow: 0 0.125rem 0.5rem rgb(var(--pc-ink) / 0.1), 0 1.5rem 2.5rem -0.5rem rgb(var(--pc-ink) / 0.28); opacity: 0; visibility: hidden; /* Panel má stovky odkazov a desiatky obrázkov. content-visibility ich necháva nevykreslené (a obrázky nenačítané), kým sa menu neotvorí — samotné visibility:hidden na to nestačí, panel je hneď pod hlavičkou, teda „vo výreze“, a lazy obrázky by sa načítali. */ content-visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 10; } .px-header__menu > li:hover > .px-mega, .px-header__menu > li:focus-within > .px-mega { opacity: 1; visibility: visible; content-visibility: visible; transform: translateY(0); } /* Počet stĺpcov si nájde šírka panela: na kontajneri v plnej šírke ich vyjde šesť, na užšom okne postupne ubúdajú. */ .px-mega > .sub-menu { columns: 11.5rem; column-gap: 1.5rem; } /* Kategória s hŕstkou skupín (do päť): `columns` by ich vyvažovali podľa výšky — tri krátke skupiny skončia v prvom stĺpci, štvrtá v druhom a zvyšok panela zíva prázdny. Tu preto idú skupiny vedľa seba zľava ako flex položky a viditeľná je len karta široká podľa obsahu. Obal .px-mega však ostáva celoplošný a NEVIDITEĽNÝ: drží hover. Keby sa zúžil, položka vpravo (napr. posledná v lište) a karta vľavo by nemali spoločnú plochu a menu by sa pri ceste myšou zavrelo skôr, než sa naň dá prejsť. Vzhľad panela (podklad, rám, tieň, odsadenie) preto nesie .sub-menu. Od šiestej skupiny platí multicol na plnú šírku vyššie. Pozor: `:has()` sa nesmie vnárať do `:has()` — prehliadač by celé pravidlo zahodil. Preto sa obal pýta na šiestu skupinu priamo. */ .px-mega:not(:has(> .sub-menu > li:nth-child(6))) { padding: 0; max-height: none; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .px-mega > .sub-menu:not(:has(> li:nth-child(6))) { /* Obal je na celú šírku kontajnera (drží hover a kotvu), karta v ňom sedela vždy vľavo bez ohľadu na to, nad ktorou položkou je myš. `--px-mega-offset` ju posunie pod položku; hodnotu počíta header.js a orezáva ju o pravý okraj obalu. Bez JS ostáva 0 = pri ľavom okraji. */ margin-left: var(--px-mega-offset, 0); columns: auto; display: inline-flex; flex-wrap: wrap; gap: 0 2.5rem; box-sizing: border-box; width: max-content; max-width: 100%; max-height: min(78vh, 48rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 1.75rem 1.75rem 0.5rem; background: rgb(var(--pc-paper)); border: 1px solid rgb(var(--pc-line)); border-top: 2px solid rgb(var(--pc-accent)); border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg); box-shadow: 0 0.125rem 0.5rem rgb(var(--pc-ink) / 0.1), 0 1.5rem 2.5rem -0.5rem rgb(var(--pc-ink) / 0.28); } .px-mega > .sub-menu:not(:has(> li:nth-child(6))) > li { flex: 0 1 auto; min-width: 11.5rem; } /* Médium kategórie — rovnaký box ako .pc-cat-tiles__icon v archíve */ .px-header .px-menu-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; width: 2.25rem; height: 2.25rem; border-radius: var(--pc-radius-sm); background: rgb(var(--pc-soft)); color: rgb(var(--pc-accent)); transition: background 0.15s ease; } .px-header .px-menu-icon svg { width: 1.375rem; height: 1.375rem; } /* Obrázok kategórie: bez šedého podkladu, fotky sú na bielom a rám za nimi robí lem. cover, lebo pomery strán sú rôzne a contain by rozhádzal riadok. */ .px-header .px-menu-icon--photo { background: none; } .px-header .px-menu-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Prvá úroveň: ikona ide do riadku k názvu, nie do boxu ako v paneli — lišta je riadok textu a 2.25rem podklad by ju zdvojnásobil. Akcent ju odlíši od textu a zároveň drží lištu farebne pri značke. */ .px-header__menu > li > a > .px-menu-icon { width: 1.25rem; height: 1.25rem; background: none; border-radius: 0; color: rgb(var(--pc-accent)); transition: color 0.15s; } .px-header__menu > li > a > .px-menu-icon svg { width: 100%; height: 100%; } /* Bez podčiarknutia nesie spätnú väzbu hoveru len farba — nech stmavne aj ikona, nielen text. `inherit` je vtedy accent-deep z pravidla vyššie. */ .px-header__menu > li:hover > a > .px-menu-icon, .px-header__menu > li:focus-within > a > .px-menu-icon, .px-header__menu > li.current-menu-item > a > .px-menu-icon, .px-header__menu > li.current-menu-ancestor > a > .px-menu-icon { color: inherit; } /* Chevron dropdownov sem nepatrí (v paneli nič nevyklápame) */ .px-header__menu .sub-menu .menu-item-has-children > a::before { content: none; } /* Druhá úroveň — hlavička stĺpca aj s vlastným zoznamom je jeden blok; `break-inside` ho drží pokope, inak by hlavička ostala na konci stĺpca a jej odkazy pokračovali v nasledujúcom. */ .px-mega > .sub-menu > li { break-inside: avoid; /* Strop šírky drží riadky čitateľné aj v jedno- či dvojstĺpcovom paneli, kde by sa stĺpec roztiahol na celý kontajner. */ max-width: 22rem; padding-bottom: 1.25rem; } .px-mega > .sub-menu > li > a { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: rgb(var(--pc-ink)); transition: color 0.15s ease; } .px-mega > .sub-menu > li > a:hover, .px-mega > .sub-menu > li:focus-within > a { color: rgb(var(--pc-accent-deep)); } /* Médium hlavičky pri hoveri prevezme akcent — celý blok tak reaguje ako jeden prvok, nielen text. */ .px-mega > .sub-menu > li > a:hover .px-menu-icon:not(.px-menu-icon--photo) { background: rgb(var(--pc-accent) / 0.12); } /* Tretia úroveň — holý zoznam zarovnaný pod text hlavičky, nie pod médium. Vlasová linka vedie stredom média a viaže odkazy k svojej kategórii; pri šiestich stĺpcoch vedľa seba je to jediné, čo ich od seba oddelí. */ .px-mega .sub-menu .sub-menu { display: grid; margin: 0.25rem 0 0 1.125rem; padding-left: 1.625rem; border-left: 1px solid rgb(var(--pc-line)); } .px-mega .sub-menu .sub-menu a { display: block; padding: 0.1875rem 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: rgb(var(--pc-muted)); transition: color 0.15s ease, transform 0.15s ease; } .px-mega .sub-menu .sub-menu a:hover, .px-mega .sub-menu .sub-menu li:focus-within > a { color: rgb(var(--pc-accent-deep)); transform: translateX(2px); } /* „Ďalšie (n)" — zvyšok podkategórií je na archíve rodiča */ .px-mega .sub-menu .px-menu-more > a { color: rgb(var(--pc-accent-deep)); font-weight: 600; } /* ---- Akcie vpravo ---- */ .px-header__actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; margin-left: auto; } /* `a.` v selektore: inak vyhráva `.px-header a { color: inherit }` a text by bol tmavý */ .px-header a.px-header__cta { display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; border-radius: var(--pc-radius-control); background: rgb(var(--pc-accent)); color: #fff; font-weight: 600; font-size: 0.875rem; white-space: nowrap; transition: background 0.15s; } .px-header a.px-header__cta:hover { background: rgb(var(--pc-accent-deep)); color: #fff; } /* `a.` aj tu, a nielen kvôli farbe: bez neho má selektor nižšiu špecificitu (0,2,0) než pravidlo vyššie (0,2,1) a `display: none` sa neuplatní — media query špecificitu nedvíha. CTA potom ostávalo v hlavičke aj na mobile, akcie pretiekli za okraj a hamburger — jediný vstup do menu — skončil mimo obrazovky. */ @media (max-width: 1279px) { .px-header__main a.px-header__cta { display: none; } } .px-header__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--pc-sunk)); color: rgb(var(--pc-sage)); cursor: pointer; transition: background 0.15s, color 0.15s; } .px-header__iconbtn:hover { background: rgb(var(--pc-accent)); color: #fff; } /* Čakanie na CSS panelov (header.js, `toggleBusy()`). Tlačidlo musí dať najavo, že klik zaregistrovalo — inak vyzerá pokazene. Bez animácie a bez posunu rozmerov, aby to nespôsobilo CLS ani nerušilo. */ .px-header [data-px-toggle].is-loading { opacity: 0.6; cursor: progress; } @media (max-width: 767px) { .px-header__account { display: none; } } .px-header__hamburger { background: rgb(var(--pc-accent)); color: #fff; } .px-header__hamburger:hover { background: rgb(var(--pc-accent-deep)); } @media (min-width: 1025px) { .px-header__hamburger { display: none; } } /* ---- Košík ---- */ .px-header__cart { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.875rem; border-radius: var(--pc-radius-control); background: rgb(var(--pc-sunk)); font-weight: 600; font-size: 0.875rem; transition: background 0.15s; } .px-header__cart:hover { background: rgb(var(--pc-soft)); } .px-header__cart-icon { position: relative; display: inline-flex; color: rgb(var(--pc-sage)); } .px-header__cart:hover .px-header__cart-icon { color: rgb(var(--pc-accent)); } .px-header-cart-count { position: absolute; top: -0.5rem; right: -0.625rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: var(--pc-radius-control); background: rgb(var(--pc-accent)); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; } .px-header-cart-total { white-space: nowrap; } /* Mobil: päť akcií s krúžkami a medzerami sa do radu nezmestí a rad pretekal za pravý okraj. Podfarbenie aj medzery idú preč — spacing nesie samotný box (gap 0, ikona centrovaná v 2.25rem), logo klesne o stupeň. Hover stavy prefarbujú na bielu/akcent s podkladom, bez podkladu by ikona zmizla — preto override aj na :hover. */ @media (max-width: 767px) { .px-header__main-inner { gap: 0.75rem; } /* Poistka pre extra úzke displeje: logo sa smie stlačiť, kresba sa zmenší so zachovaným pomerom strán a drží pri ľavom okraji. */ .px-header__logo { flex-shrink: 1; min-width: 0; } .px-header__logo img { height: 2rem; max-width: 100%; object-fit: contain; object-position: left center; } /* Kompaktné podfarbené ikony (pôvodne boli na mobile transparentné; zmena 0.4.6 podľa libike). Tokeny --pc-sunk/--pc-accent preberá child téma, takže odtieň sa prispôsobí každému webu. */ .px-header__actions { gap: 0.25rem; } .px-header__iconbtn { width: 2.25rem; height: 2.25rem; background: rgb(var(--pc-sunk)); border-radius: 50%; } .px-header__iconbtn:hover { background: rgb(var(--pc-accent)); color: #fff; } .px-header__hamburger { color: rgb(var(--pc-accent)); } /* Košík: súčet je na mobile skrytý, ostáva ikona s počítadlom — rovnaký sunk krúžok ako ostatné akcie. */ .px-header__cart, .px-header__cart:hover { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; background: rgb(var(--pc-sunk)); border-radius: 50%; } .px-header-cart-total { display: none; } } /* ========================================================================= PANELY (search / drawer / minicart) + BACKDROP ========================================================================= */ .px-header__backdrop { position: fixed; inset: 0; background: rgb(var(--pc-ink) / 0.5); z-index: 1000; opacity: 0; transition: opacity 0.2s; } .px-header__backdrop.is-open { opacity: 1; } .px-header__panel[hidden], .px-header__backdrop[hidden] { display: none; } /* ---- Drawer + mini-košík (pravé panely) — škrupina ---- Obsah oboch panelov je v header-panels.css, ktorý sa načítava lenivo. Škrupina však musí byť tu: `