/* ============================================================================ assets/css/header.css — lucide-sk ---------------------------------------------------------------------------- Enqueue: wp_enqueue_scripts (functions.php → lucide_sk_enqueue_front), závislosť `lucide-sk-tokens`. Načíta sa na KAŽDEJ stránke front-endu. Kontrakt s markupom (parts/header.html) a so skriptami: .lu-header template part

, priamy potomok .wp-site-blocks .lu-header__bar1 logo, hľadanie, účet, košík #lu-drawer.lu-header__bar2.lu-drawer navigácia = zároveň panel drawera .lu-burger [data-lu-drawer-toggle], VIDITEĽNÝ LEN POD 1200 px .lu-drawer__close [data-lu-drawer-close], len v režime drawera .lu-drawer__scrim prekryv, vyrába ho drawer.js na konci html.lu-drawer-open zámok rolovania (triedu dáva drawer.js) .lu-header--transparent / .is-solid priehľadná hlavička (header-sentinel.js) .lu-header-sentinel 1 px prvok pod hero vo front-page.html HRANICA 1200 px musí sedieť s konštantou BREAKPOINT v assets/js/drawer.js. Mobile-first: predvolený stav je DRAWER, vodorovný pruh sa zapína až v @media (min-width: 1200px). Pohyb je celý v CSS cez --lu-t-* z tokens.css, ktoré sú pri prefers-reduced-motion prepnuté na 1 ms — preto tu nie je vlastný @media (prefers-reduced-motion) blok (okrem jedného doplnku pri drawerovi, kde by aj 1 ms posun bol zbytočný). ========================================================================== */ /* ============================================================================ 1. LEPIVÁ HLAVIČKA ---------------------------------------------------------------------------- Pribitý má ostať LEN pás 2 (48 px). Dosahuje sa to záporným `top`: hlavička je sticky, ale odrolovaná o výšku pásu 1. Aby tá hodnota vždy sedela, má pás 1 rovnakú hodnotu ako `min-height` — reálna výška teda nikdy nie je MENŠIA než odsadenie a navigácia sa nikdy neodreže. Ak je pás 1 vyšší (dlhé logo), ostane pod ním len prilepený prúžok navigácie o kúsok nižšie. ========================================================================== */ .lu-header { --lu-bar1-h: 118px; /* mobil: riadok s logom (44) + medzera (10) + hľadanie (44) + padding (20) */ position: sticky; top: calc(-1 * var(--lu-bar1-h)); z-index: var(--lu-z-header); /* Template part nie je .has-global-padding, preto si celoplošný tmavý pás vyrobíme presným zrušením root paddingu z theme.json. */ margin-inline: calc(-1 * var(--lu-gutter)); background-color: var(--lu-black); color: var(--lu-white); transition: background-color var(--lu-t-base); } @media (min-width: 992px) { .lu-header { --lu-bar1-h: var(--lu-header-h); } } /* Obsah oboch pásov je centrovaný na --lu-container, pozadie ostáva na celú šírku. `max()` nahrádza vnorený .container z lucide.com. */ .lu-header .lu-header__bar1, .lu-header .lu-header__bar2 { max-width: none; margin-inline: 0; padding-inline: max(var(--lu-gutter), calc((100% - var(--lu-container)) / 2)); } /* 1 px sentinel pod hero (front-page.html) — nesmie robiť medzeru. */ .lu-header-sentinel { block-size: 1px; margin: 0; padding: 0; } /* ============================================================================ 2. PÁS 1 — logo, hľadanie, účet, košík ---------------------------------------------------------------------------- Poradie v riadku rieši `order`, nie markup: pod 992 px ide hľadanie do vlastného riadka (s tým počíta aj header-sentinel.js, ktorý pri zmene šírky prepočítava výšku hlavičky). ========================================================================== */ .lu-header .lu-header__bar1 { min-block-size: var(--lu-bar1-h); padding-block: var(--lu-sp-10); column-gap: var(--lu-sp-15); row-gap: var(--lu-sp-10); align-items: center; } /* ---- burger: LEN pod 1200 px --------------------------------------------- */ .lu-burger { order: 1; display: inline-flex; flex: none; flex-direction: column; justify-content: center; gap: 5px; inline-size: 44px; block-size: 44px; margin: 0; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .lu-burger span { display: block; inline-size: 24px; block-size: 2px; margin-inline: auto; background: currentColor; transition: transform var(--lu-t-base), opacity var(--lu-t-base); } /* otvorené menu = krížik (stav drží drawer.js cez aria-expanded) */ .lu-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .lu-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .lu-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- logo ---------------------------------------------------------------- */ .lu-header .lu-logo { order: 2; flex: 0 1 auto; margin: 0; max-inline-size: 130px; } /* core/site-logo dáva obrázku inline šírku; obmedzenie ide preto cez rodiča a `object-fit`, nie cez !important na width. */ .lu-header .lu-logo img { max-inline-size: 100%; max-block-size: 44px; block-size: auto; object-fit: contain; object-position: left center; } /* ---- hľadanie ------------------------------------------------------------ */ .lu-header .lu-search { order: 4; flex: 1 0 100%; max-inline-size: 100%; margin: 0; } /* Woo mení názvy tried medzi verziami — cielime na prvky, nie na .wc-block-*. */ .lu-header .lu-search form, .lu-header .lu-search > div { display: flex; inline-size: 100%; } .lu-header .lu-search label:not(:focus):not(:active) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lu-header .lu-search input[type="search"], .lu-header .lu-search input[type="text"] { flex: 1 1 auto; min-inline-size: 0; min-block-size: 44px; padding: 10px 15px; background: var(--lu-white); color: var(--lu-ink); border: 0; border-radius: var(--lu-r-0); font-family: var(--lu-font-body); font-size: var(--lu-fs-sm); line-height: var(--lu-lh-base); } .lu-header .lu-search input::placeholder { color: var(--lu-ink-placeholder); opacity: 1; } .lu-header .lu-search button { flex: none; min-block-size: 44px; padding-inline: var(--lu-sp-15); background: var(--lu-search-btn); color: var(--lu-white); border: 0; border-radius: var(--lu-r-0); cursor: pointer; } .lu-header .lu-search button:hover { background: var(--lu-blue-dark); } .lu-header .lu-search button svg { fill: currentColor; inline-size: 20px; block-size: 20px; } /* ---- účet + košík -------------------------------------------------------- */ .lu-header .lu-header__actions { order: 3; flex: none; column-gap: var(--lu-sp-5); align-items: center; } .lu-header .lu-header__actions a, .lu-header .lu-header__actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-inline-size: 44px; min-block-size: 44px; padding-inline: var(--lu-sp-5); background: none; border: 0; color: var(--lu-white); font-family: var(--lu-font-body); font-size: var(--lu-fs-sm); text-decoration: none; cursor: pointer; } .lu-header .lu-header__actions a:hover, .lu-header .lu-header__actions button:hover { color: var(--lu-cream); text-decoration: none; } .lu-header .lu-header__actions svg, .lu-header .lu-header__actions img { inline-size: 24px; block-size: 24px; fill: currentColor; } /* počítadlo kusov v mini košíku */ .lu-header .lu-cart .wc-block-mini-cart__badge, .lu-header .lu-cart .wc-block-mini-cart__quantity-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; background: var(--lu-blue-dark); color: var(--lu-white); border: 0; border-radius: var(--lu-r-pill); font-size: var(--lu-fs-xs); font-weight: var(--lu-fw-bold); line-height: 1; } @media (min-width: 992px) { .lu-header .lu-logo { max-inline-size: 180px; } .lu-header .lu-logo img { max-block-size: 56px; } .lu-header .lu-search { order: 3; flex: 0 1 400px; } .lu-header .lu-header__actions { order: 4; } } /* ============================================================================ 3. PÁS 2 — DRAWER (predvolený stav, teda pod 1200 px) ---------------------------------------------------------------------------- Panel je odsunutý za ľavý okraj a `visibility: hidden` ho vyradí aj z fokusu v prehliadačoch bez `inert`. drawer.js pridáva `.is-open`. ========================================================================== */ .lu-header .lu-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(86vw, 340px); max-inline-size: 100%; z-index: var(--lu-z-drawer); padding-inline: var(--lu-sp-15); padding-block: var(--lu-sp-15) calc(var(--lu-sp-40) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--lu-shadow-drawer); transform: translateX(-100%); visibility: hidden; transition: transform var(--lu-t-base), visibility 0s linear var(--lu-t-base); } .lu-header .lu-drawer.is-open { transform: none; visibility: visible; transition: transform var(--lu-t-base), visibility 0s; } /* zavieracie tlačidlo */ .lu-drawer__close { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-inline-start: auto; margin-block-end: var(--lu-sp-10); padding: 0; background: none; border: 0; color: var(--lu-white); cursor: pointer; } .lu-drawer__close[hidden] { display: none; } /* prekryv (vyrába ho drawer.js) */ .lu-drawer__scrim { position: fixed; inset: 0; z-index: calc(var(--lu-z-drawer) - 1); background: var(--lu-scrim); } .lu-drawer__scrim[hidden] { display: none; } /* zámok rolovania — trieda je háčik, drawer.js dáva navyše inline overflow */ html.lu-drawer-open { overflow: hidden; } /* Prekryv vzniká na konci , teda MIMO stohovacieho kontextu hlavičky (tá má z-index --lu-z-header). Bez tohto pravidla by prekryv prekryl aj samotný panel. Triedu na nasadzuje drawer.js spolu so zámkom. */ html.lu-drawer-open .lu-header { z-index: var(--lu-z-modal); } /* ---- navigácia v režime drawera ------------------------------------------ */ .lu-drawer .lu-nav { display: block; inline-size: 100%; } .lu-drawer .lu-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; inline-size: 100%; } .lu-drawer .lu-nav .wp-block-navigation-item { inline-size: 100%; border-block-end: 1px solid var(--lu-nav-hover); } .lu-drawer .lu-nav .wp-block-navigation-item__content { display: block; inline-size: 100%; padding: 12px 5px; color: var(--lu-white); font-size: var(--lu-fs-md); text-decoration: none; } /* Podmenu je v drawerovi vždy rozbalené — schované položky za hoverom sa na dotykovom zariadení neotvárajú. */ .lu-drawer .lu-nav .wp-block-navigation__submenu-container { position: static; inline-size: 100%; min-inline-size: 0; padding: 0 0 var(--lu-sp-10) var(--lu-sp-15); background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .lu-drawer .lu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { border-block-end: 0; } .lu-drawer .lu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-block: 9px; color: var(--lu-line); font-size: var(--lu-fs-sm); } /* šípka podmenu je v rozbalenom zozname zbytočná */ .lu-drawer .lu-nav .wp-block-navigation__submenu-icon { display: none; } /* Poistka pre prípad, že jadro predsa vykreslí responzívny obal (overlayMenu je "never", takže by nemalo). */ .lu-drawer .lu-nav .wp-block-navigation__responsive-container { position: static; display: block; inline-size: auto; padding: 0; background: transparent; } .lu-drawer .lu-nav .wp-block-navigation__responsive-container-open, .lu-drawer .lu-nav .wp-block-navigation__responsive-container-close { display: none; } /* zvýraznený odkaz na veľkoobchod */ .lu-nav__wholesale > .wp-block-navigation-item__content { background: var(--lu-blue-dark); /* #397fcc má pod bielym textom len 4,13:1 */ color: var(--lu-white); font-weight: var(--lu-fw-medium); } .lu-drawer .lu-nav .lu-nav__wholesale { margin-block-start: var(--lu-sp-15); border-block-end: 0; } .lu-drawer .lu-nav .lu-nav__wholesale > .wp-block-navigation-item__content { padding-inline: var(--lu-sp-15); text-align: center; } /* ============================================================================ 4. PÁS 2 — VODOROVNÁ NAVIGÁCIA (od 1200 px) ---------------------------------------------------------------------------- Nad hranicou drawer neexistuje: burger aj zavieracie tlačidlo sú preč a panel sa vracia do toku stránky. ========================================================================== */ @media (min-width: 1200px) { .lu-burger, .lu-drawer__close, .lu-drawer__scrim { display: none; } .lu-header .lu-drawer { position: static; inline-size: auto; max-inline-size: none; min-block-size: var(--lu-nav-h); padding-block: 0; padding-inline: max(var(--lu-gutter), calc((100% - var(--lu-container)) / 2)); overflow: visible; box-shadow: none; transform: none; visibility: visible; transition: none; } .lu-header .lu-drawer .lu-nav { display: flex; align-items: center; min-block-size: var(--lu-nav-h); } .lu-drawer .lu-nav .wp-block-navigation__container { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0; } .lu-drawer .lu-nav .wp-block-navigation-item { inline-size: auto; border-block-end: 0; } /* poistka: rozbaľovacie menu sa musí kotviť o svoju položku */ .lu-drawer .lu-nav .wp-block-navigation-item.has-child { position: relative; } .lu-drawer .lu-nav .wp-block-navigation-item__content { display: flex; align-items: center; gap: 4px; min-block-size: var(--lu-nav-h); padding: 0 12px; color: var(--lu-white); font-size: var(--lu-fs-sm); text-transform: uppercase; letter-spacing: var(--lu-ls-caps); transition: background-color var(--lu-t-fast); } .lu-drawer .lu-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover, .lu-drawer .lu-nav > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background: var(--lu-nav-hover); text-decoration: none; } .lu-drawer .lu-nav .wp-block-navigation__submenu-icon { display: inline-flex; } /* ---- rozbaľovacie podmenu ---- */ .lu-drawer .lu-nav .wp-block-navigation__submenu-container { position: absolute; inset-block-start: 100%; inset-inline-start: 0; inline-size: auto; min-inline-size: 260px; padding: var(--lu-sp-5) 0; z-index: var(--lu-z-dropdown); background: var(--lu-white); color: var(--lu-ink); border: 0; border-radius: var(--lu-r-0); box-shadow: var(--lu-shadow-panel); } .lu-drawer .lu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-block-size: 0; padding: 10px 15px; color: var(--lu-ink); font-size: var(--lu-fs-sm); text-transform: none; letter-spacing: normal; } .lu-drawer .lu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--lu-dropdown-hover); color: var(--lu-black); text-decoration: none; } .lu-drawer .lu-nav .lu-nav__wholesale { margin-block-start: 0; } } /* ============================================================================ 5. PRIEHĽADNÁ HLAVIČKA NA DOMOVSKEJ STRÁNKE ---------------------------------------------------------------------------- front-page.html dáva časti triedu `lu-header--transparent`; header-sentinel.js pridáva `.is-solid`, keď sentinel pod hero zájde pod hlavičku. Priehľadná hlavička je `position: absolute` (leží NAD hero, nezaberá miesto), po prepnutí je `position: fixed` so záporným `top` — teda rovnaký výsledok ako lepivá hlavička na ostatných šablónach. !important je tu odôvodnené: WordPress generuje triedy palety (`.has-contrast-background-color`) s !important, inak by sa priehľadnosť nedala dosiahnuť bez zásahu do markupu hlavičky. ========================================================================== */ .lu-header--transparent { position: absolute; inset-inline: 0; inset-block-start: 0; margin-inline: 0; background-color: transparent; } .lu-header--transparent .lu-header__bar1, .lu-header--transparent .lu-header__bar2:not(.is-open) { background-color: transparent !important; } /* jemné stmavenie pod textom hlavičky, aby bol čitateľný nad svetlým hero */ .lu-header--transparent::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--lu-black-a60), transparent); pointer-events: none; } .lu-header--transparent.is-solid { position: fixed; inset-block-start: calc(-1 * var(--lu-bar1-h)); background-color: var(--lu-black); } .lu-header--transparent.is-solid::before { display: none; } /* Otvorený drawer nesmie byť priehľadný ani na domovskej stránke. */ .lu-header--transparent .lu-drawer.is-open { background-color: var(--lu-black); } @media (prefers-reduced-motion: reduce) { .lu-header .lu-drawer { transition: none; } }