/* Rám webu (etapa 1): servisní proužek, hlavička, lišta kategorií, patička. Přeneseno z prototyp/navrh-ab-obchod.py (návrh AB „Obchod"), spec docs/superpowers/specs/2026-09-04-etapa-1-ram-webu.md, oddíly 2 a 3. Barvy = tokeny ze spec §1, zapsané jako --mlv-* s pevnou hodnotou, aby CSS nezáviselo na slugu palety v theme.json (ten se ladí souběžně). Čtyři odstíny navíc (#F5B301 hvězda, #6E6E72 placeholder, #3A3A3E text dlaždic, #2A2A2E linka v patičce) jsou převzaté ze schváleného prototypu. Písma jdou přes preset proměnné theme.json (slug nadpis/text) s fallbackem. */ :root{ --mlv-cerna:#0A0A0C; --mlv-cervena:#E00103; --mlv-seda:#4E4E52; --mlv-seda-svetla:#C1C1C5; --mlv-linka:#E1E2E5; --mlv-papir:#F5F6F7; --mlv-sirka:1400px; --mlv-nadpis:var(--wp--preset--font-family--nadpis,"Big Shoulders",Barlow,system-ui,sans-serif); --mlv-text:var(--wp--preset--font-family--text,Barlow,system-ui,sans-serif); /* pohyb panelu podle transitions.dev „menu dropdown"; --dropdown-close-dur čte i mlv-ram.js, název se nesmí měnit */ --dropdown-open-dur:250ms; --dropdown-close-dur:150ms; --dropdown-pre-scale:0.97; --dropdown-closing-scale:0.99; --dropdown-ease:cubic-bezier(0.22, 1, 0.36, 1); } /* Template part hlavičky se vykresluje jako
. Sticky .lista by v něm držela jen po výšku toho obalu (sticky prvek je uvězněný v content boxu rodiče) — display:contents obal zruší a .lista se lepí k oknu v rámci celé stránky. */ header.wp-block-template-part{display:contents} /* Přilepená hlavička: kotvy a scrollIntoView se nesmí schovat pod ni. */ html{scroll-padding-top:120px} .obal{width:100%;max-width:var(--mlv-sirka);margin:0 auto;padding:0 20px; box-sizing:border-box} /* ---------- servisní proužek ---------- */ .servis{background:var(--mlv-cerna);color:#fff;font-size:14px; font-family:var(--mlv-text)} .servis .obal{display:flex;gap:28px;justify-content:center;flex-wrap:wrap; padding:7px 20px} .servis b{font-weight:600} .servis .hvezda{color:#F5B301} /* ---------- hlavička ---------- */ .lista{position:sticky;top:0;z-index:10;background:#fff;color:var(--mlv-cerna); border-bottom:1px solid var(--mlv-linka);padding:0;font-family:var(--mlv-text)} .lista .obal{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:clamp(16px,3vw,40px);padding:14px 20px; max-width:var(--mlv-sirka);min-height:112px} .znacka img{display:block;width:auto} /* 84 px, ne 64: při 64 má řádek se sloganem 10 px, tři čtvrtiny jeho tahů jsou polotóny a čte se rozmazaně (změřeno 4. 9.). */ .znacka .slogan{height:84px} .znacka .bez{height:40px;display:none} .hledani{display:flex;max-width:720px;width:100%} .hledani input{flex:1;font:400 16px/1.2 var(--mlv-text);padding:13px 16px; border:2px solid var(--mlv-cerna);border-right:0;background:#fff;min-width:0; border-radius:0;color:var(--mlv-cerna)} .hledani input::placeholder{color:#6E6E72} .hledani button{font:600 16px/1 var(--mlv-text);background:var(--mlv-cervena); color:#fff;border:0;padding:0 22px;cursor:pointer;border-radius:0} .hledani button:hover{background:var(--mlv-cerna)} .hledani button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2; display:block} .hledani .screen-reader-text{position:absolute;clip-path:inset(50%); width:1px;height:1px;overflow:hidden;white-space:nowrap} .ucet{display:flex;gap:22px;align-items:center;font-size:14px;font-weight:600} .ucet a{text-decoration:none;display:flex;flex-direction:column; align-items:center;gap:3px;min-width:44px;position:relative;color:inherit} .ucet svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8} /* POZOR na název třídy: .pocet koliduje s číslem skladem ve větě „Sháním". */ .ucet .kosik-pocet{background:var(--mlv-cervena);color:#fff;font-size:14px; line-height:1;padding:2px 5px;font-weight:600;position:absolute;top:-6px; left:calc(50% + 6px)} .lista.mensi .znacka .slogan{display:none} .lista.mensi .znacka .bez{display:block} /* Zmenšení bez posunu obsahu: stejná výška boxu, jen menší logo uvnitř. Kdyby se výška měnila, obsah pod hlavičkou by při rolování poskočil. */ .lista.mensi .obal{min-height:92px} /* ---------- lišta kategorií ---------- */ /* Lišta pod hlavičkou, podkategorie v panelu přes celou šířku. Vrstvení: sticky .lista zakládá vlastní vrstvu (z-index 10), lišta musí zůstat pod ní — proto position:relative a z-index 8; panel má uvnitř té vrstvy 30. */ .kat{background:#fff;border-bottom:1px solid var(--mlv-linka); position:relative;z-index:8;font-family:var(--mlv-text)} .kat .obal{display:flex;align-items:center;gap:0} /* ul se smí rolovat: sedm názvů s fotkou se do 1400 px vejde jen tak tak a při užším okně se jinak podsouvaly pod „Všechny kategorie". Panel to neořízne — jeho vztažný prvek je .kat, ne tenhle seznam. */ .kat ul{list-style:none;margin:0;padding:0;display:flex;flex:1 1 auto; min-width:0;overflow-x:auto;scrollbar-width:none} .kat ul::-webkit-scrollbar{display:none} .kat .koren{position:static} /* Zadavatel 5. 9.: zvětšit fotky i nápisy ve stromu kategorií. Změřeno injektovanými variantami na živé stránce: verzálky 22 px přetékaly o 337 px; vítěz je 20 px Big Shoulders bez verzálek, fotka 44 px, šipky pryč - sedm kategorií + „Všechny kategorie" = přesně 1360 px. */ .kat .koren>a{display:flex;align-items:center;gap:8px;padding:8px 7px; text-decoration:none; font:800 20px/1.1 var(--wp--preset--font-family--nadpis,"Big Shoulders",Barlow,sans-serif); letter-spacing:0; white-space:nowrap;border-bottom:3px solid transparent;color:inherit} .kat .koren>a img{width:44px;height:44px;object-fit:contain;flex:none; background:var(--mlv-papir)} .kat .koren>a:hover,.kat .koren.otevreno>a{color:var(--mlv-cervena); border-bottom-color:var(--mlv-cervena)} /* Šipka zůstává v DOM (JS ji přepíná), ale nekreslí se - při větším písmu se sedm kategorií se šipkami nevešlo; otevření hlásí červené podtržení stavu .otevreno. */ .kat .koren>a .sip{display:none} .kat .koren.otevreno>a .sip{transform:scaleY(-1)} .kat .vse{display:flex;gap:10px;padding-left:10px;flex:none} .kat .vse a{text-decoration:none;font-size:14px;font-weight:600; white-space:nowrap;color:inherit} .kat .vse a:hover{color:var(--mlv-cervena)} /* Panel podkategorií přes celou šířku. Zadavatel 5. 9.: větší fotky i nápisy - fotka 72 px, název 16 px, kvůli tomu 4 dlaždice v řadě. */ .kat .deti{position:absolute;left:0;right:0;top:100%;background:#fff; border-bottom:1px solid var(--mlv-linka); box-shadow:0 14px 30px rgba(10,10,12,.13);padding:18px 0 22px;z-index:30} .kat .deti .vnitrek{max-width:var(--mlv-sirka);margin:0 auto;padding:0 20px; /* box-sizing:border-box je nutný - druhé pravidlo .vnitrek níž přidává vlastní padding:16px 20px, který by se jinak k max-height připočítal navíc a strop 60 % okna by neplatil (změřeno: 493px místo 461px). */ box-sizing:border-box;max-height:calc(60vh - 40px);overflow-y:auto; overscroll-behavior:contain} /* Panel je od 8. 9. 2026 mřížka sloupců: sloupec = podkategorie, pod ní její druhy. Fotka se zmenšila ze 72 na 26 px – osm sloupců vedle sebe se s velkými fotkami na šířku nevejde. */ .kat .deti .vnitrek{display:grid;grid-template-columns:repeat(4,1fr); gap:14px 20px;padding:16px 20px} .kat .deti .sloupec{min-width:0} .kat .deti a{display:flex;align-items:center;gap:8px;text-decoration:none; color:inherit;min-width:0} .kat .deti .hlava{font-weight:700;font-size:14px;padding-bottom:6px; margin-bottom:5px;border-bottom:1px solid var(--mlv-linka)} .kat .deti .druh{font-size:12px;padding:3px 0} .kat .deti a:hover{color:var(--mlv-cervena)} .kat .deti img{width:26px;height:26px;object-fit:contain;flex:none} .kat .deti span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:1200px){ .kat .deti .vnitrek{grid-template-columns:repeat(3,1fr)}} .t-dropdown{transform-origin:top center;transform:scale(var(--dropdown-pre-scale)); opacity:0;pointer-events:none; transition:transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease); will-change:transform,opacity} .t-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto} .t-dropdown.is-closing{transform:scale(var(--dropdown-closing-scale));opacity:0; pointer-events:none; transition:transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease)} @media (prefers-reduced-motion: reduce){.t-dropdown{transition:none !important}} /* Užší okno: lišta se posune do vodorovného rolování, panely se nepoužijí. */ @media(max-width:1099px){ .kat .obal{padding:0} .kat .vse{display:none} /* Panely se do úzkého okna nevejdou (5 dlaždic = min. 451 px obsahu, který absolutní panel nevyklipne) a lišta se tu stejně roluje. */ .kat .deti{display:none} .kat .koren>a{font-size:18px;padding:8px 12px} .kat .koren>a img{width:36px;height:36px} .kat .koren>a .sip{display:none}} @media(hover:none){.kat .deti{display:none}} /* ---------- patička ---------- */ /* Selektory přes .paticka, ne footer: značku