/* ============================================================= ECORSON — design systém webu ------------------------------------------------------------- Tokeny jsou navzorkované z grafického návrhu, ne odhadnuté. Rozbor předlohy a živá ukázka: http://localhost/ecorson.cz/priprava/ 🔴 TENHLE SOUBOR PATŘÍ MODULU `ecorson-vzhled` (na míru). Do balíčku jádra se NEZABALUJE — jinak by první aktualizace přepsala design každému webu na téhle bázi. Členění: TOKENY · BASE · TYPOGRAFIE · LAYOUT · KOMPONENTY · KATALOG · KALKULAČKA · VZORNÍK · KOŠÍK · STAVY · RESPONSIVE ============================================================= */ /* ========================================================= 1. TOKENY ========================================================= */ :root { /* Značka 🔴 Hodnoty jsou ODEBRANÉ z předlohy, ne odhadnuté — u textu a akcentu nejsvětlejším/nejsytějším pixelem v ploše glyfu, u ploch mediánem okolí (jediný pixel je u AI renderu šum). Skript: scratchpad/vzorek2.php, předloha ChatGPT Image 29. 8. 2026. */ /* ⚠️ #D75001 je MEDIÁN výplně tlačítka v předloze, ne nejsytější pixel. Dřív tu bylo #DE4400 odebrané „nejsytějším pixelem" — ten ale padne na světlý okraj přechodu a barva pak vyjde signálnější, než ve skutečnosti je. Oponentura to nezávisle popsala jako „víc akční e-shop než prémiový interiér". Měření: `porovnat-hero.php`. */ --ec-primary: #D75001; /* Tmavá oranžová pro tah štětcem po najetí na kartu. Musí být výrazně tmavší než plocha karty, aby na ní zůstal světlý text čitelný — značková `--ec-primary` je na podklad pod textem moc světlá. */ --ec-primary-deep: #7A2E00; /* tah štětcem po najetí na kartu */ --ec-primary-hover: #E85E08; --ec-primary-active: #B24101; --ec-primary-soft: rgba(215, 80, 1, .14); /* ⚠️ #D77439 je MEDIÁN pixelů UVNITŘ tahů slova „ATMOSFÉRU“ v předloze (kvartily #C96D34–#DF7B3E). Dřív tu bylo #EE7F30 z odběru „nejsytější pixel“ — ten padne na okraj vyhlazení a barva vyjde světlejší a křiklavější. Oponentura to opakovaně popisovala jako „oranžová je ostřejší než v návrhu“. ✔ Výplň tlačítka měřená stejně dává #D74F02, což na `--ec-primary` (#D75001) sedí — tam byla metoda správně. */ --ec-accent: #D77439; /* zvýrazněné slovo v nadpisu */ --ec-accent-soft: rgba(215, 116, 57, .14); /* Plochy */ --ec-bg: #171714; /* pozadí stránky */ --ec-header: #14110D; /* hlavička je tmavší než stránka */ --ec-rail: #161513; --ec-surface: #1C1713; --ec-surface-2: #1F1915; --ec-surface-3: #262019; --ec-overlay: rgba(10, 8, 6, .86); /* Text */ --ec-text: #DCD9D4; --ec-text-strong: #F7F1E8; --ec-muted: #A8ABA5; --ec-faint: #6E6A64; /* Linky */ --ec-border: rgba(242, 234, 227, .12); --ec-border-strong: rgba(242, 234, 227, .22); /* Stavy */ --ec-danger: #E5484D; --ec-danger-soft: rgba(229, 72, 77, .13); --ec-warning: #F0A020; --ec-warning-soft: rgba(240, 160, 32, .13); --ec-success: #46A758; --ec-success-soft: rgba(70, 167, 88, .13); --ec-info: #4A90D9; --ec-info-soft: rgba(74, 144, 217, .13); /* Písmo ⚠️ Předloha je AI render — přesný font z ní nejde odečíst. Tohle je náhrada odpovídající charakteru, čeká na potvrzení zadavatelem. */ --ec-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --ec-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ec-font-mono: "JetBrains Mono", Consolas, "SF Mono", monospace; /* Spacing — jedna škála, nic mimo ni */ --ec-1: 4px; --ec-2: 8px; --ec-3: 12px; --ec-4: 16px; --ec-5: 24px; --ec-6: 32px; --ec-7: 48px; --ec-8: 64px; --ec-9: 80px; --ec-10: 120px; /* Layout */ /* 🔴 1600, ne 1280. Změřeno z předlohy: obsahový pás tam zabírá **95,6 %** dostupné plochy (dlaždice od x=108 do x=1622 při šířce 1672 s pruhem 88 px) — tedy skoro celou šířku s úzkým okrajem, ne vycentrovaný sloupec. Úplně bez stropu to ale nejde: na 2560px displeji by řádky textu v katalogu byly nečitelně dlouhé. 1600 je kompromis — na běžných šířkách sedí na předlohu, na velmi širokých se zastaví. */ --ec-container: 1600px; /* 🔴 ŠÍŘKA ČTENÉHO TEXTU — JEDNA HODNOTA PRO CELÝ WEB. Do 31. 8. 2026 se počítala v `ch` (72ch, 66ch). Jenže `ch` je šířka znaku „0" v použitém písmu a u téhle sady vychází ~6,5 px místo očekávaných ~8 px — z „66 znaků na řádek" se tak stal sloupec 430 px široký. Na stránce obchodních podmínek z toho byla nudle na třetině obrazovky. 768 px při 16px písmu je zhruba 78 znaků na řádek, tedy horní okraj doporučeného rozsahu — na dokumentové stránce správně, protože tam se čte souvisle a prázdno vedle textu ruší víc než delší řádek. */ --ec-mira-textu: 48rem; --ec-gutter: 24px; --ec-header-h: 72px; --ec-gap: 24px; /* Šířka levého pruhu s ikonami. Drží se v proměnné, protože ji potřebuje mřížka i odsazení hlavičky — dvě čísla by se dřív nebo později rozešla. */ --ec-rail-w: 124px; /* Kulaté tlačítko na dlaždici. Odsazení textu se z něj počítá. */ --ec-tile-go: 40px; /* Rámečky a stíny */ --ec-r-sm: 4px; --ec-r-md: 8px; --ec-r-lg: 14px; --ec-r-xl: 22px; --ec-r-pill: 999px; --ec-shadow: 0 12px 32px rgba(0, 0, 0, .38); --ec-shadow-pop: 0 24px 64px rgba(0, 0, 0, .55); /* 🔴 POLE A TLAČÍTKA MAJÍ JEDNU VÝŠKU. Dřív měla pole 48 px a tlačítka 40 px, takže tlačítko vedle pole bylo o 8 px nižší. Nejvíc to bilo do očí v košíku u přepočtu množství — zadavatel to označil jménem. Ta výška NENÍ odhad: v předloze měří tlačítko 217 × 40 px (`_plan/oponentura/mereni-*.php`). Srovnalo se tedy pole dolů k tlačítku, ne naopak — jinak by se rozjelo hero, které už je podle předlohy odměřené a schválené. ⚠️ Na dotykovém ovládání se obojí zvedne na 44 px (Apple HIG). Zvedá se to SPOLEČNĚ jedním tokenem, aby se rozdíl nemohl vrátit zadními vrátky. */ --ec-ctl-h: 40px; --ec-ctl-h-sm: 36px; --ec-btn-h: var(--ec-ctl-h); /* Pohyb */ --ec-ease: cubic-bezier(.2, .6, .2, 1); --ec-t-hover: 200ms; --ec-t-expand: 300ms; /* Vrstvení — řízená hierarchie, žádné z-index: 99999 */ --ec-z-header: 100; --ec-z-drawer: 200; --ec-z-modal: 1000; } /* ========================================================= 2. BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } /* 🔴 `color-scheme: dark` řekne prohlížeči, že je web tmavý. Bez toho vykreslí SVĚTLÉ posuvníky, výběrová pole a další vlastní prvky — na tmavém pozadí do očí bije hlavně posuvník levého pruhu. Řeší to i formulářové prvky, ne jen posuvníky. */ :root { color-scheme: dark; } /* 🔴 ŽÁDNÝ OBRÁZEK NIKDY PŘES SVŮJ RÁM. Jedna zapomenutá `max-width` stačí k tomu, aby se celá stránka rozjela do šířky — a pozná se to až na konkrétním produktu s velkou fotkou, ne při běžném proklikání. */ img, svg, video, canvas { max-width: 100%; } /* Skok na kotvu plynule, ať je poznat, KAM se stránka posunula. Skok naráz působí, jako by se načetla jiná stránka. ⚠️ Komu vadí pohyb na obrazovce, tomu se nevnucuje (`prefers-reduced-motion`). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ec-bg); color: var(--ec-text); font: 400 .9375rem/1.68 var(--ec-font-body); /* 🔴 `break-word`, ne `anywhere`. `anywhere` láme i slovo, které by se na další řádek celé vešlo — a protože se dědí, dělalo to z každého českého názvu „Dekorativn / í omítky". Chytlo se to na dlaždicích kategorií, v levém pruhu i v soupisu místností. Ochrana proti dlouhému kódu odstínu zůstává: `break-word` sáhne po lámání u slova, které se nevejde ani samo na prázdný řádek. ⚠️ Uvnitř gridu `break-word` NEOVLIVNÍ výpočet min-content (viz `web-css-konvence`), proto mají mřížkové položky `minmax(0,1fr)` a `min-width: 0` — ne globální `anywhere`. */ overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } a { color: var(--ec-accent); text-decoration: none; transition: color var(--ec-t-hover) var(--ec-ease); } a:hover { color: var(--ec-text-strong); } img { max-width: 100%; display: block; } /* Přeskočení na obsah. 🔴 Nad obsahem jsou dvě lepivé navigace (hlavička a levý pruh s kategoriemi). Kdo chodí po klávesnici, jinak protabuje desítky odkazů, než se dostane k obsahu stránky. Odkaz je vidět až při zaměření. */ .ec-skip { position: absolute; left: var(--ec-4); top: -100px; z-index: 100; display: inline-block; padding: var(--ec-3) var(--ec-4); background: var(--ec-primary); color: #fff; border-radius: var(--ec-r-md); transition: top var(--ec-t-hover) var(--ec-ease); } .ec-skip:focus { top: var(--ec-3); color: #fff; } /* Na dotykovém ovládání se cíl zvětší — pole i tlačítka naráz, jedním tokenem, aby mezi nimi nemohl znovu vzniknout rozdíl. */ @media (pointer: coarse) { :root { --ec-ctl-h: 44px; } /* Kulatá tlačítka na fotkách a u karuselů — prst potřebuje 44 px. */ .ec-fav__btn, .ec-karusel-ovladani__btn { width: 44px; height: 44px; } /* Malá tlačítka karet („Detail", „Spočítat") měla na tabletu 36 px. */ .ec-btn--sm { min-height: 40px; } /* Textové odkazy v patičce a v blocích (20–25 px vysoké): plocha pro prst se zvětší odsazením, záporný okraj vrátí rozestupy řádků, jak byly. */ .ec-footer li a, .feature-link { display: inline-block; padding-block: 10px; margin-block: -10px; } } /* Web se neovládá jen myší — focus musí být vidět. */ :focus-visible { outline: 2px solid var(--ec-accent); outline-offset: 3px; border-radius: var(--ec-r-sm); } /* ========================================================= 3. TYPOGRAFIE ========================================================= */ /* 🔴 `:where()` SRÁŽÍ SPECIFICITU ZÁKLADU NA NULU. Uvnitř `:where()` se selektor do specificity nepočítá, takže `:where(.ec-page) h1` má (0,0,1) — pouhé jméno prvku. Kterákoli komponentní třída ho pak přebije sama, bez zdvojování a bez `!important`. ⚠️ TŘETÍ VÝSKYT TÉHOŽ PROBLÉMU. `.ec-page h2` má (0,1,1) a přebíjelo `.ec-hero__title`, pak `.ec-tile__title` a teď `.ec-product-card__title` (0,1,0). U karty produktu se to projevilo dvakrát: nadpis se vykresloval v 2,4 rem místo 1 rem a jeho `margin-top: 64px` udělal mezi náhledem a názvem díru, kterou zadavatel odhadl na 70–100 px. Dvakrát jsem to léčil zdvojenou třídou u konkrétní komponenty. To je léčba příznaku — každá další komponenta s nadpisem spadne do stejné pasti. Tohle ji zavírá pro všechny. Skill `web-css-konvence`: „Když prvek nereaguje na třídu, nehledej cache — spočítej specificitu." */ .ec-h1, :where(.ec-page) h1 { margin: 0 0 var(--ec-4); font: 800 clamp(2.25rem, 5vw, 4rem)/1.04 var(--ec-font-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--ec-text-strong); } /* Dlouhý název produktu jako nadpis („ŠABLONY PRO VYTVÁŘENÍ EFEKTU DŘEVA - 100x130 - 130x135") měl v 64 px čtyři řádky a na telefonu pět; fotka začínala až pod ohybem. Šablona třídu přidá podle délky názvu. */ .ec-h1--dlouhy { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1; } .ec-h2, :where(.ec-page) h2 { margin: var(--ec-8) 0 var(--ec-4); font: 700 clamp(1.6rem, 3vw, 2.4rem)/1.12 var(--ec-font-display); letter-spacing: -.015em; color: var(--ec-text-strong); } .ec-h3 { margin: var(--ec-6) 0 var(--ec-3); font: 700 1.3rem/1.25 var(--ec-font-display); color: var(--ec-text-strong); } /* ⚠️ Šířka v `rem`, ne v `ch` — `ch` je u téhle písmové sady ~6,5 px místo očekávaných ~8, takže „68 znaků" vyšlo na 440 px. Viz `--ec-mira-textu`. */ /* ⚠️ ODSAZENÍ SI URČUJE TŘÍDA, NE PROHLÍŽEČ. Ostatní typografické třídy (`.ec-h1`, `.ec-h2`, `.ec-eyebrow`) mají `margin` vypsaný; `.ec-lead` spoléhal na výchozí `1em` odstavce (17 px). V běžném toku se ten margin složil s odsazením nadpisu a nebylo to vidět — jenže v mřížce se marginy neskládají, přičetl se ke `gap` a na detailu produktu z toho bylo 49 px. */ .ec-lead { margin: 0 0 var(--ec-4); font-size: 1.0625rem; line-height: 1.62; color: var(--ec-muted); max-width: var(--ec-mira-textu); } .ec-eyebrow { margin: 0 0 var(--ec-3); font: 600 .6875rem/1.2 var(--ec-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ec-accent); } .ec-muted { color: var(--ec-muted); } .ec-faint { color: var(--ec-faint); } .ec-num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ========================================================= 4. LAYOUT ========================================================= */ .ec-container { width: 100%; max-width: var(--ec-container); margin-inline: auto; padding-inline: var(--ec-gutter); } .ec-section { padding-block: var(--ec-9); } /* 🔴 POSLEDNÍ BLOK STRÁNKY SE MUSÍ ODLEPIT OD PATIČKY SÁM. Patička nemá vlastní horní mezeru (měla 120 px navíc k odsazení sekcí — zrušeno), takže o odstup se stará obsah. Pásy úvodní stránky (`.ec-band`) mají jen horní odsazení, aby na sebe těsně navazovaly — a poslední z nich („Oblíbené povrchy") pak seděl přímo na patičce. Naměřeno 0 px. */ /* Bloky stavebnice mají vlastní spodní okraj (`.builder-section:last-child`) — sčítal se na 160 px. */ main.ec-page > :last-child:not(.builder-row):not(.builder-section):not(.builder-cta) { padding-bottom: var(--ec-9); } /* 🔴 PRVNÍ SEKCE PODSTRÁNKY MÁ MENŠÍ ODSAZENÍ NAHOŘE. Hlavička je sticky a vysoká 72 px, takže s 80 px odsazení začínala drobečková navigace až 152 px pod okrajem okna a nad nadpisem zela díra. Dole 80 px zůstává — tam se navazuje na patičku. Úvodní stránka začíná hero, ne `.ec-section`, takže se jí to netýká. */ main.ec-page > .ec-section:first-child { padding-top: var(--ec-7); } .ec-section--tight { padding-block: var(--ec-7); } /* 🔴 Pásy pod hero na sebe těsně navazují — ODMĚŘENO v předloze: hero končí na y=530, dlaždice začínají na 537 (7 px), končí na 653, ikonový pás začíná na 675 (**22 px**), končí na 752, nadpis „Oblíbené povrchy" je na 795 (**43 px**). Dřív tu byla běžná sekce s odsazením 48 px nahoře i dole, takže mezery vycházely 48 / 96 / 128 px — pásy se rozpadly a hero s dlaždicemi přestalo držet pohromadě. */ .ec-band { padding-block: 0; } /* Dlaždice leží NA fotce, proto vlastní vrstvící kontext — jinak by je překryv obalu (`z-index: -1`) sice nepřebil, ale stín a kulaté rohy by se skládaly nepředvídatelně. */ /* ⚠️ 20 px, ne odměřených 7 — zadavatel to takhle chce (30. 8. 2026). Sedm pixelů platilo, dokud hero končilo fotkou; teď končí textem a dlaždice by na něm doslova ležely. */ .ec-band--tiles { position: relative; padding-top: 20px; } .ec-band--usp { padding-top: 22px; } .ec-band--after { padding-top: 43px; } /* 🔴 Vždy minmax(0, 1fr), nikdy holé 1fr — holé 1fr se nesmí zmenšit pod obsah a jediný nezalomitelný název rozbije celou mřížku. */ .ec-grid { display: grid; gap: var(--ec-gap); } .ec-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .ec-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .ec-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* Palety vzorníku jsou náhled, ne zboží — na telefonu dva sloupce. Jeden sloupec dělal ze 45 palet stránku na 25 obrazovek. */ @media (max-width: 560px) { .ec-grid--palety { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ec-3); } } /* Detail produktu: obsah + přilepený souhrn */ /* 🔴 DETAIL SE NEROZTAHUJE NA CELOU ŠÍŘKU KONTEJNERU. Ten je kvůli hero a dlaždicím široký 1600 px; po odečtení postranního sloupce zbylo na text přes 870 px, jenže souvislý text se nad ~75 znaky na řádek čte špatně, takže měl `.ec-prose` vlastní strop 68ch. Výsledek: text v levé půlce sloupce a vpravo od něj 360 px prázdna. Zadavatel to popsal přesně — „vpravo je volné místo, text je vlevo, nevím proč". Správné řešení je omezit BLOK, ne text v něm: sloupec se zúží na míru čitelného řádku a text ho pak vyplní celý. Prázdno se přesune na okraje stránky, kam patří. ⚠️ Zúžení sedí na `.ec-container--text` v šabloně, NE tady na mřížce. Zúžená mřížka uvnitř široké stránky se sice vycentruje, ale drobečková navigace nad ní zůstane u levého okraje a mezi ní a nadpisem vznikne díra na 200 px. Zúžit se musí celý blok najednou. */ .ec-detail { display: grid; gap: var(--ec-7); grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } /* ── Hlavní sloupec detailu ───────────────────────────────────────────── */ /* 🔴 JEDEN SLOUPEC, GALERIE PŘES CELOU ŠÍŘKU. Zkoušelo se rozdělení na dva sloupce (galerie vlevo, text vpravo), aby se využil široký monitor. Dopadlo to hůř: fotka se zmenšila na půlku, u krátkého popisu zůstal vedle ní pruh prázdna a nad textovým sloupcem díra až k nadpisu. Zadavatel to shrnul přesně — „malé fotky, všude díry". Fotka je u dekorativní omítky to hlavní; zákazník podle ní vybírá povrch. Dostane tedy celou šířku sloupce (~1 100 px na velkém monitoru) a text jde pod ni. ⚠️ Text si drží vlastní strop 72 znaků na řádek. Prázdno vpravo od něj je záměr, ne chyba: pod plnou šířkou galerie se odstavec čte jako textový blok, ne jako rozbitá mřížka. Roztáhnout ho přes celých 1 100 px by dalo ~130 znaků na řádek, u čehož oko ztrácí konec řádku. */ /* 🔴 `minmax(0, 1fr)` JE POVINNÉ, NE OZDOBA. Bez něj má mřížka implicitní sloupec `auto`, jehož minimum je **min-content** — a min-content bloku s velkou fotkou je vlastní šířka té fotky. Sloupec se proto roztáhl na šířku obrázku (u produktu s jedinou fotkou přes 4 000 px), přetekl přes postranní panel a celá stránka dostala vodorovný posuvník. `overflow: hidden` na galerii uvnitř to NEZACHRÁNÍ. Ořízne sice, co z galerie kouká ven, ale příspěvek k min-content se počítá z obsahu a probublá mřížce nahoru — sloupec se roztáhne, i když je fotka viditelně oříznutá. ⚠️ Nepozná se to proklikáním webu. Záleží na tom, jak velký je zdrojový soubor konkrétního produktu; u většiny katalogu se nic nestane a pak přijde jeden produkt, u kterého se stránka rozjede do šířky. Nalezeno na BETON CALCE. ⚠️ Tohle je tatáž past jako u `.ec-detail` výš. V každé mřížce, do které může přijít obrázek nebo dlouhý text, musí být `minmax(0, …)` (`web-css-konvence`, sekce o gridu a flexu). */ .ec-detail__main { display: grid; gap: var(--ec-6); align-content: start; grid-template-columns: minmax(0, 1fr); } /* Totéž o úroveň níž — položka mřížky má výchozí `min-width: auto`. */ .ec-detail__media { min-width: 0; } .ec-detail__text { max-width: var(--ec-mira-textu); } /* Nadpis a srdíčko na jedné ose. */ /* Přehrávač kurzu: tlačítko „Zpět na kurzy" se nesmí lámat („ZPĚT NA / KURZY") ani brát nadpisu místo — když se nevejde, jde pod nadpis. Název lekce pod přehrávačem je o stupeň menší než nadpis kurzu. */ .ec-watch .ec-detail__head { flex-wrap: wrap; } /* Jako odkaz bez vnitřního odsazení: pod nadpisem lícuje s jeho levou hranou a na telefonu se neroztáhne přes celou šířku (≤ 480 px `.ec-btn` jinak dostane 100 %). */ .ec-watch .ec-detail__head > .ec-btn { flex: none; width: auto; padding-inline: 0; white-space: nowrap; } .ec-watch .ec-h2--tight { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } .ec-watch .ec-h2--tight + .ec-watch__nav { margin-top: 0; } /* Obsah pod úvodním odstavcem nemá být nalepený na text (16 px). */ .ec-lead + .ec-grid { margin-top: var(--ec-6); } .ec-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ec-4); } .ec-detail__head .ec-h1 { margin: 0; } /* 🔴 NADPIS A PODTITUL JSOU JEDEN BLOK. Podtitul stál vedle hlavičky jako další položka `.ec-detail__main`, takže ho od názvu oddělila mezera mřížky (32 px) plus vlastní margin odstavce — 49 px. Podtitul je ale částí nadpisu („CORADO / Perleťová metalíza"), ne samostatným blokem. Srdíčko zůstává vpravo nahoře, hlavička je pořád flex o dvou položkách. */ .ec-detail__title { min-width: 0; } .ec-detail__title .ec-lead { margin: var(--ec-3) 0 0; } /* Na detailu srdíčko nepluje nad fotkou, ale stojí v řádku s nadpisem. */ .ec-detail__head .ec-fav { position: static; } .ec-detail__head .ec-fav__btn { width: 40px; height: 40px; } /* 🔴 KAŽDÁ IKONA ROZHRANÍ JE BLOK. Jako inline prvek sedne `` na účaří textu a vypadá posunutá o pár pixelů dolů. Uvnitř flexu se prvky blokují samy, takže tam to nevadí — jenže spoléhat na to, že prvek zrovna ve flexu JE, je přesně ten předpoklad, kterým se zarovnání rozbíjí, jakmile se obal přestylizuje. `display: block` proto u všech ikon, ne jen u těch, kde to zrovna vadí (`web-ikony-zarovnani`, bod 4). */ .ec-detail__head .ec-fav__btn svg { display: block; width: 20px; height: 20px; } /* ── Hlavička ─────────────────────────────────────────── */ .ec-header { position: sticky; top: 0; z-index: var(--ec-z-header); display: flex; align-items: center; gap: var(--ec-7); min-height: var(--ec-header-h); padding-inline: var(--ec-gutter); background: color-mix(in srgb, var(--ec-header) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ec-border); } /* Prohlížeč bez `color-mix` dostane plnou barvu — přijde o průhlednost, ne o čitelnost. `@supports not` se vyhodnotí jen tam, kde podpora chybí, takže na pořadí proti pravidlu výš nezáleží. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .ec-header { background: var(--ec-header); } } .ec-logo { display: inline-flex; align-items: center; gap: var(--ec-3); font: 800 1.05rem/1 var(--ec-font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ec-text-strong); } .ec-logo__mark { display: grid; place-items: center; width: 36px; height: 36px; background: var(--ec-primary); color: #fff; border-radius: var(--ec-r-md); } /* Obrázkové logo: výška je dána hlavičkou, šířka se dopočítá — logo má poměr 256 : 75 a natvrdo psaná šířka by ho na jiném logu zdeformovala. */ .ec-logo--image { gap: 0; } .ec-logo__img { display: block; height: 34px; width: auto; } @media (max-width: 768px) { .ec-logo__img { height: 28px; } } /* Kontakt v hlavičce (telefon, e-mail). `align-items: center` a `line-height: 1` jsou to, co drží ikonu a text na společné ose — bez nich ikona ujede o pár pixelů a nikdo neví proč (`web-ikony-zarovnani`). */ .ec-header__contact { display: inline-flex; align-items: center; gap: var(--ec-2); color: var(--ec-muted); font-size: .875rem; line-height: 1; white-space: nowrap; } .ec-header__contact svg { display: block; width: 16px; height: 16px; flex: none; } .ec-header__contact:hover { color: var(--ec-primary); } /* ── Kontaktní seznam v patičce ───────────────────────────────────────── */ /* 🔴 IKONA MUSÍ DRŽET SVOU ŠÍŘKU I U VÍCEŘÁDKOVÉHO ÚDAJE. Adresa se na úzkém sloupci zalomí, a kdyby byla ikona součástí textového toku, druhý řádek by začal pod ní. `align-items: flex-start` + `flex: none` drží ikonu u prvního řádku a text v jednom bloku vedle ní. */ /* Rozestup dědí z `.ec-footer ul` — viz poznámka tam. */ .ec-contact li { display: flex; align-items: flex-start; gap: var(--ec-3); /* ⚠️ Tahle hodnota MUSÍ sedět na výšku `` výš (1.5em). Změnit jednu bez druhé znamená ikonu zase o kus vedle. */ line-height: 1.5; } /* Víceřádkový údaj (adresa) se drží pohromadě vedle ikony, ne pod ní. */ .ec-contact li > span, .ec-contact li > a { min-width: 0; } /* 🔴 IKONA SE ZAROVNÁVÁ NA VÝŠKU PRVNÍHO ŘÁDKU, NE MAGICKÝM POSUNEM. Předchozí verze měla `margin-top: .18em` — číslo odhadnuté od oka, které sedí jen při jedné velikosti písma a jednom řádkování. Jakmile se kterékoli z toho změní, ikona zase ujede. Zarovnání ikon je vada, která se v tomhle projektu opakuje pořád dokola; odhadnutá konstanta ji vždycky jen odloží na příště. Správně: `` dostane VÝŠKU CELÉHO ŘÁDKU (`1.5em` = `line-height` položky) a šířku 16 px. Kresba se kvůli výchozímu `preserveAspectRatio="xMidYMid meet"` vejde do menšího z rozměrů, tedy do 16 px, a ve zbylé výšce se vystředí — přesně na optický střed prvního řádku textu vedle ní. Funguje to při jakékoli velikosti písma, protože obě hodnoty jsou v `em`. ⚠️ `display: block` je povinné. Jinak je `` inline prvek, sedne na účaří textu a vypadá posunutě dolů (`web-ikony-zarovnani`, bod 4). */ .ec-contact svg { display: block; width: 16px; height: 1.5em; flex: none; color: var(--ec-primary); } /* ── Priority+ navigace ──────────────────────────────────────────────── 🔴 NAVIGACE JE JEDINÝ PRVEK HLAVIČKY, KTERÝ SMÍ USTOUPIT. Logo, kontakt i ikony mají `flex: none` — když se šířka zmenší, zkracuje se navigace (položky jdou pod „…"), ne ikony. Dřív se ve flexu zmenšovalo všechno naráz: ikony se scvrkly na tečky a položky menu se zalomily na dva řádky („O / nás"). ⚠️ Bez JavaScriptu se seznam zalamuje (`flex-wrap: wrap`) — ošklivé, ale dostupné. Jednořádkový ořez zapíná až třída `.js` na ``. */ .ec-nav { flex: 1 1 auto; min-width: 0; } .ec-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ec-6); list-style: none; margin: 0; padding: 0; } /* 🔴 BEZ `overflow: hidden`. Rozbalovací nabídka „…" je potomek seznamu; s ořezem se otevřela do nuly a vypadalo to, že tlačítko nic nedělá. Jednořádkovost drží `nowrap` + přesun položek do nabídky skriptem — ořez není potřeba, jen do doběhnutí skriptu můžou položky na okamžik přesáhnout, což hlavička (sama bez ořezu) unese. */ .js .ec-nav__list { flex-wrap: nowrap; } .ec-nav__list > li { flex: none; white-space: nowrap; } .ec-nav a { color: var(--ec-text); font-weight: 500; } .ec-nav a:hover, .ec-nav a.is-active { color: var(--ec-accent); } .ec-nav__more { position: relative; } .ec-nav__more-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ec-border-strong); border-radius: var(--ec-r-md); background: none; color: var(--ec-text); cursor: pointer; } .ec-nav__more-btn svg { display: block; width: 18px; height: 18px; } .ec-nav__more-btn:hover, .ec-nav__more-btn[aria-expanded="true"] { border-color: var(--ec-accent); color: var(--ec-accent); } .ec-nav__menu { position: absolute; top: calc(100% + var(--ec-2)); left: 0; z-index: 2; min-width: 220px; padding: var(--ec-2) 0; margin: 0; list-style: none; background: var(--ec-surface); border: 1px solid var(--ec-border-strong); border-radius: var(--ec-r-md); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); } .ec-nav__menu[hidden] { display: none; } .ec-nav__menu li { white-space: nowrap; } .ec-nav__menu a { display: block; padding: var(--ec-3) var(--ec-5); } .ec-nav__menu a:hover { background: var(--ec-surface-2); } /* Ikony tlačítka: desktop „…", mobil hamburger, otevřeno křížek. */ /* ⚠️ Selektor s tlačítkem, ne samotná třída ikony — `.ec-nav__more-btn svg` má (0,1,1) a jednoduchá třída (0,1,0) by prohrála: na desktopu byly vidět tři tečky i hamburger naráz. */ .ec-nav__more-btn .ec-nav__ico-burger, .ec-nav__more-btn .ec-nav__ico-close { display: none; } .ec-nav__menu-extra { display: none; } /* ── Mobilní menu (≤ 768 px) ───────────────────────────────────────────── 🔴 NENÍ TO ZMENŠENÝ DESKTOP. Pod 768 px jdou do panelu VŠECHNY položky (`pripojPriorityMenu` to vynutí) a panel je přes celou obrazovku pod hlavičkou: velké odkazy na klepnutí, dole košík, oblíbené a kontakt. Rozbalovací seznam o šířce 220 px, který tu byl dřív, šel ovládat, ale nebyl použitelný — zadavatel: „Kde je mobilní verze menu?" */ @media (max-width: 768px) { .ec-nav__more-btn .ec-nav__ico-dots { display: none; } .ec-nav__more-btn .ec-nav__ico-burger { display: block; } .ec-nav__more-btn[aria-expanded="true"] .ec-nav__ico-burger { display: none; } .ec-nav__more-btn[aria-expanded="true"] .ec-nav__ico-close { display: block; } .ec-nav__more { position: static; } .ec-nav__menu { /* 🔴 NE `position: fixed`. Hlavička má `backdrop-filter`, a ten z ní dělá kontejner pro fixní potomky — panel měl 80 px, tedy výšku hlavičky. Absolutně pod hlavičkou (ta je `sticky`, takže je to totéž místo) s výškou zbytku obrazovky. */ position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--ec-header-h)); height: calc(100dvh - var(--ec-header-h)); z-index: var(--ec-z-header); min-width: 0; padding: var(--ec-4) var(--ec-gutter) var(--ec-8); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ec-header); border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; } .ec-nav__menu[hidden] { display: none; } .ec-nav__menu > li { white-space: normal; } .ec-nav__menu a { padding: var(--ec-4) 0; font: 600 1.25rem/1.2 var(--ec-font-display); color: var(--ec-text-strong); border-bottom: 1px solid var(--ec-border); } .ec-nav__menu a:hover { background: none; color: var(--ec-accent); } /* Rychlé odkazy hned pod položkami, ne přilepené ke dnu panelu — na 768 px mezi nimi zela díra 330 px. */ .ec-nav__menu-extra { display: block; padding-top: var(--ec-6); } /* Rychlé odkazy jako stejně vysoká tlačítka v mřížce — v řádku holého textu nebylo poznat, že se na ně dá klepnout. */ .ec-nav__menu-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ec-2); margin-bottom: var(--ec-5); } .ec-nav__menu .ec-nav__menu-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--ec-2) var(--ec-3); font: 600 .9375rem/1.2 var(--ec-font-body); text-align: center; border: 1px solid var(--ec-border-strong); border-radius: var(--ec-r-md); } .ec-nav__menu-contact { display: grid; gap: var(--ec-3); } .ec-nav__menu-contact a { display: flex; align-items: center; gap: var(--ec-3); padding: 0; border: 0; font: 400 1rem/1 var(--ec-font-body); color: var(--ec-text); } .ec-nav__menu-contact svg { display: block; width: 18px; height: 18px; flex: none; color: var(--ec-primary); } /* Stránka pod otevřeným panelem se neposouvá. */ body.ec-menu-open { overflow: hidden; } } .ec-header__right { margin-left: auto; display: flex; align-items: center; gap: var(--ec-3); } /* 🔴 NIC V PRAVÉ SKUPINĚ SE NEZMENŠUJE. Ikony i kontakt drží svou velikost, místo pouští navigace. Viz poznámka nad `.ec-nav`. */ .ec-header__right > * { flex: none; } .ec-cart-link svg { display: block; width: 18px; height: 18px; flex: none; } .ec-logo { flex: none; } /* Košík v hlavičce s počítadlem */ .ec-cart-link { display: inline-flex; align-items: center; gap: var(--ec-2); /* Vyšší a širší než dřív — v předloze jsou to plnohodnotné boxy, ne drobné ikonky nalepené na kraji. */ height: 42px; padding-inline: var(--ec-4); border: 1px solid var(--ec-border-strong); border-radius: var(--ec-r-md); color: var(--ec-text); } .ec-cart-link:hover { border-color: var(--ec-accent); color: var(--ec-accent); } .ec-cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: var(--ec-2); background: var(--ec-primary); color: #fff; border-radius: var(--ec-r-pill); font: 700 .6875rem/1 var(--ec-font-body); } /* 🔴 MEDIÁLNÍ PRAVIDLA HLAVIČKY AŽ ZA JEJÍMI KOMPONENTAMI. Do 1. 9. 2026 byl tenhle blok o sto řádků VÝŠ než definice `.ec-header__right` a `.ec-cart-link`; obě mají stejnou specificitu, takže vyhrálo to níž položené — základní hodnoty — a úzká okna (≤ 430 px) dostala plné odsazení i mezery. Naměřeno: 320 px → přetečení 18 px, ačkoli pravidla pro 360 px v souboru byla. Tatáž past jako u `.builder-cta`. */ /* 🔴 ÚSPORA MÍSTA PO KROCÍCH, NE NARÁZ. Hlavička nese logo, navigaci, telefon, e-mail a košík. Skrývat text hned na tabletu by z ní udělala řadu ikon, u kterých nikdo nepozná, co dělají; nechat ho až do mobilu zase přeteče. Proto tři stupně: nejdřív zmizí e-mailová adresa (telefon je při objednávce materiálu důležitější a čte se rychleji), pak i číslo, a nakonec zůstanou samotné ikony jako proklik. */ @media (max-width: 1280px) { .ec-header { gap: var(--ec-5); } .ec-header__contact--email span { display: none; } } @media (max-width: 900px) { .ec-header { gap: var(--ec-4); } .ec-header__contact span { display: none; } } @media (max-width: 560px) { /* Text u košíku je poslední, co jde pryč — ikona sama je srozumitelná. */ .ec-cart-link > span:not(.ec-cart-count) { display: none; } .ec-cart-link { padding-inline: var(--ec-3); } } /* 🔴 NEJUŽŠÍ TELEFONY (≤ 430 px). Naměřeno na 390 px: logo 96 + „…" 40 + pravá skupina 236 + mezery a odsazení = 452 px → přetečení 62 px. Ubírá se to nejméně potřebné: e-mailová ikona (telefon zůstává, na mobilu se na něj klepe), boxy tlačítek na 40 px, mezery na 8 a logo na 24 px výšky. Po úpravě se hlavička vejde s rezervou. */ /* 🔴 MOBILNÍ HLAVIČKA (≤ 768 px) NENÍ ZMENŠENÝ DESKTOP. Dřív tu bylo sedm prvků vedle sebe (logo, hamburger, telefon, oblíbené, účet, hledání, košík) a přihlášený zákazník s košíkem hlavičku roztáhl na 405 px — mobil pak zmenšil celou stránku. Teď: logo vlevo, vpravo hledání, účet, košík a hamburger úplně na kraji, všechno stejné čtverce. Telefon, e-mail a oblíbené jsou v panelu menu (`.ec-nav__menu-extra`). Počet v košíku je odznak na ikoně, ne text vedle ní — box drží šířku. */ @media (max-width: 768px) { :root { --ec-header-h: 60px; --ec-head-btn: 44px; } .ec-header { gap: var(--ec-3); padding-inline: var(--ec-gutter); } .ec-header__contact, .ec-cart-link--fav { display: none; } .ec-nav { order: 3; flex: none; } .ec-header__right { gap: var(--ec-2); } .ec-header .ec-cart-link { position: relative; justify-content: center; width: var(--ec-head-btn); height: var(--ec-head-btn); min-height: 0; padding: 0; } .ec-header .ec-cart-link > span:not(.ec-cart-count) { display: none; } .ec-header .ec-cart-count { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--ec-header); } .ec-header .ec-cart-count--dot { top: 6px; right: 6px; } .ec-nav__more-btn { width: var(--ec-head-btn); height: var(--ec-head-btn); } .ec-logo__img { height: 28px; } } @media (max-width: 360px) { :root { --ec-head-btn: 40px; } .ec-header { gap: var(--ec-2); padding-inline: var(--ec-3); } .ec-header__right { gap: var(--ec-1); } .ec-logo__img { height: 22px; } } /* ── Patička ──────────────────────────────────────────── */ /* ⚠️ ŽÁDNÝ VLASTNÍ ODSTUP NAD PATIČKOU. Obsah nad ní končí odsazením sekce (`.ec-section` má dole 80 px) a patička má svoje odsazení nahoře (64 px). Přidat k tomu ještě 120 px `margin-top` znamenalo přes 260 px prázdna mezi koncem textu a patičkou — u krátké stránky to vypadá jako nedokončený obsah, ne jako vzdušný design. */ .ec-footer { margin-top: 0; padding-block: var(--ec-8) var(--ec-6); background: var(--ec-surface); border-top: 1px solid var(--ec-border); } .ec-footer__cols { display: grid; gap: var(--ec-6); grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); } .ec-footer h4 { margin: 0 0 var(--ec-3); font: 600 .75rem/1.2 var(--ec-font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ec-muted); } /* 🔴 JEDEN SVISLÝ RYTMUS PRO VŠECHNY SLOUPCE PATIČKY. Odstup mezi položkami byl na dvou místech naráz: `li { margin-bottom: 8px }` tady a `gap: 12px` u kontaktního seznamu. Sčítaly se, takže kontakt měl 20 px a sousední sloupce 8 px — „v patičce jsou mezery každá jiná". Odstup dělá VÝHRADNĚ `gap` na seznamu; `li` nemá vlastní margin. Dvě místa, kde se rozhoduje o téže mezeře, se dřív nebo později rozejdou. */ .ec-footer ul { display: grid; gap: var(--ec-3); list-style: none; margin: 0; padding: 0; } .ec-footer li { margin: 0; } /* Značkový sloupec je širší než ostatní — nese logo a odstavec, ne seznam. */ .ec-footer__cols { align-items: start; } .ec-footer__brand { grid-column: span 2; max-width: 34rem; } /* Čtyři bloky patičky: na tabletu 2 × 2. S `auto-fit` vyšly tři sloupce a „Dokumenty" spadly samy pod logo. */ @media (max-width: 900px) { .ec-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ec-footer__brand { grid-column: auto; } } @media (max-width: 560px) { .ec-footer__cols { grid-template-columns: minmax(0, 1fr); } } /* Časový rozsah se nesmí zlomit uprostřed („8:00– / 16:00"). */ .ec-footer__hours { white-space: nowrap; } /* ⚠️ Logo v patičce nemá být menší než v hlavičce (34 px). Třicet pixelů v širokém sloupci vypadalo jako zapomenutá ikonka; patička je navíc místo, kde se značka připomíná naposledy. */ .ec-footer__logo { display: block; height: 46px; width: auto; margin-bottom: var(--ec-5); } .ec-footer__wordmark { margin: 0 0 var(--ec-4); font: 800 1.05rem/1 var(--ec-font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ec-text-strong); } .ec-footer__tagline { margin: 0; color: var(--ec-muted); font-size: .875rem; line-height: 1.6; } .ec-footer__social { display: flex; flex-wrap: wrap; gap: var(--ec-4); margin-top: var(--ec-4); } .ec-footer__social li { margin: 0; } .ec-footer__social a { color: var(--ec-muted); font-size: .8125rem; } .ec-footer__social a:hover { color: var(--ec-primary); } .ec-footer a:hover { color: var(--ec-primary); } /* Odkaz, který ve skutečnosti spouští akci, musí být `