/* ========================================================================== JELÍNEK — Brand guide & UI guide Společné styly pro všechny stránky. -------------------------------------------------------------------------- JAK EDITOVAT: - Barvy a rozměry jsou definované jako CSS proměnné v :root níže. Změna proměnné se projeví na celém webu. - Názvy tokenů odpovídají UI guidu (Clrs): JELINEK-BROWN, TEXT-MUTED1 apod. ========================================================================== */ /* -------------------------------------------------------------------------- 1) FONTY Nahrajte soubory .woff2 do složky assets/fonts/ s názvy uvedenými níže. Dokud soubory chybí, prohlížeč automaticky použije fallback (Arial/Georgia). font-display: block (dřív swap): swap ukázal při načítání na okamžik fallbackový font a pak stránku překreslil — viditelné bliknutí. block nechá text zlomek vteřiny neviditelný a vykreslí ho rovnou správným řezem; fonty jsou malé a ze stejné domény, takže se to nestihne projevit. Stejná hodnota je i v kitu (svelte/src/lib/theme/fonts.css) — měňte obě místa najednou. -------------------------------------------------------------------------- */ @font-face { font-family: "GT Walsheim Pro"; src: url("../fonts/GT-Walsheim-Pro-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: "GT Walsheim Pro"; src: url("../fonts/GT-Walsheim-Pro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "GT Walsheim Pro"; src: url("../fonts/GT-Walsheim-Pro-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: "GT Walsheim Pro"; src: url("../fonts/GT-Walsheim-Pro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: "GT Walsheim Pro"; src: url("../fonts/GT-Walsheim-Pro-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: block; } @font-face { font-family: "Avenir Next LT Pro"; src: url("../fonts/AvenirNextLTPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "Avenir Next LT Pro"; src: url("../fonts/AvenirNextLTPro-Demi.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: "Avenir Next LT Pro"; src: url("../fonts/AvenirNextLTPro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: "Archer"; src: url("../fonts/Archer-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "Archer"; src: url("../fonts/Archer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: "Archer"; src: url("../fonts/Archer-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; } /* -------------------------------------------------------------------------- 2) DESIGN TOKENY (zdroj: UI guide — Clrs) -------------------------------------------------------------------------- */ :root { /* ---- BAREVNÝ SYSTÉM: 3 rodiny, odstíny se liší JEN posledním číslem HSL (světlost L) ---- Neutrál (bílá): hsl(0, 0%, L) — L od 100 (bílá) po 0 (černá) Hnědá: hsl(29, 44%, L) — divize Nábytek Magenta: hsl(324, 100%, L) — divize Zdravý spánek Sémantické barvy (hlášky) si drží vlastní tóny — viz níže. Pořadí zápisu: HSL → HEX → RGB. */ /* Primární značkové barvy — přesný HSL přepočet originálních HEX (HEX zůstává v komentáři) */ --JELINEK-WHITE: hsl(0, 0%, 100%); /* JELÍNEK Bílá — #FFFFFF */ --JELINEK-BROWN: hsl(29, 44%, 62%); /* JELÍNEK Hnědá — #C99E75, divize Nábytek */ --JELINEK-MAGENTA: hsl(324, 100%, 46%); /* JELÍNEK Magenta — #EC008C, divize Zdravý spánek */ --JELINEK-BLACK: hsl(0, 0%, 0%); /* JELÍNEK Černá — #000000 */ /* Hover / highlight (světlejší odstín téže barvy) */ --JELINEK-WHITE-HIGHLIGHT: hsl(0, 0%, 95%); /* JELINEK-WHITE-HIGHLIGHT */ --JELINEK-BROWN-HIGHLIGHT: hsl(29, 44%, 80%); /* JELINEK-BROWN-HIGHLIGHT */ --JELINEK-MAGENTA-HIGHLIGHT:hsl(324, 100%, 70%); /* JELINEK-MAGENTA-HIGHLIGHT */ --JELINEK-BLACK-HIGHLIGHT: hsl(0, 0%, 38%); /* JELINEK-BLACK-HIGHLIGHT */ --ON-JELINEK-BLACK: hsl(0, 0%, 95%); /* text na plném černém tlačítku */ /* Pozadí */ --bg-white: hsl(0, 0%, 100%); /* BG-WHITE — bílá, základní pozadí stránky (dřív BACKGROUND) */ --bg-gray: hsl(0, 0%, 95%); /* BG-GRAY — jemné odlišení sekcí a karet */ --bg-brown: hsl(29, 44%, 95%); /* BG-BROWN — hnědá rodina (29,44), světlejší než highlight (L 95 %); divize Nábytek */ --bg-magenta: hsl(324, 100%, 95%); /* BG-MAGENTA — panely divize Zdravý spánek */ --bg-black: hsl(0, 0%, 0%); /* BG-BLACK — tmavé plochy ve světlém režimu */ /* Okraje */ --border-subtle: hsl(0, 0%, 91%); /* BORDER-SUBTLE — neutrální jemný okraj karet, navigace, utilit. ploch; zároveň koncová barva gradientního rámečku panelů */ /* Text */ --text-black: hsl(0, 0%, 5%); /* TEXT-BLACK */ --text-muted1: hsl(0, 0%, 38%); /* TEXT-MUTED1 */ --text-muted2: hsl(0, 0%, 62%); /* TEXT-MUTED2 */ --text-white: hsl(0, 0%, 95%); /* TEXT-WHITE — text na tmavém pozadí (dřív TEXT-LIGHT) */ /* Sémantické barvy (pozadí hlášek) — vlastní tóny, nejsou součástí 3 rodin */ --sem-success: hsl(80, 47%, 90%); --sem-error: hsl(5, 100%, 90%); --sem-warning: hsl(45, 67%, 90%); --sem-info: hsl(173, 19%, 90%); --sem-success-strong: hsl(142, 76%, 38%); /* tag „Skladem“ — 4. stupeň zelené z doplňkové palety */ --sem-error-strong: hsl(5, 100%, 38%); /* sytá varianta chyby — okraj pole a text hlášky */ /* Rádiusy (zdroj: UI guide) */ --radius-button: 8px; --radius-image: clamp(10px, 0.8vw, 15px); --radius-card: clamp(10px, 1vw, 15px); --radius-section: clamp(10px, 3vw, 15px); --radius-pill: 9999px; /* Stín interaktivních prvků (zdroj: UI guide) */ --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.188), 0px 12px 12px hsl(0, 0%, 0%, 0.082); --shadow-resting: 0px 2px 2px hsl(0, 0%, 0%, 0.188), 0px 6px 6px hsl(0, 0%, 0%, 0.082); /* klidový stav tlačítek a dlaždic */ /* Přechody — jednotné délky, ať se celý web chová stejně */ --dur-fast: 0.12s; /* drobnosti — zesvětlení plochy, políčko palety */ --dur-base: 0.15s; /* výchozí — tlačítka, dlaždice, karty */ --dur-slow: 0.2s; /* velké plochy a přepínač režimu */ --ease: ease; /* Odlesk na horní hraně ploch v tmavém režimu (vnořený stín). Neutrální hodnota pro všechny plochy včetně dlaždic, menu a černých panelů; divizní panely si ji přepisují na produktovou barvu. Ve světlém režimu se odlesk nekreslí vůbec. */ --box-primary: hsl(0, 0%, 50%); /* Sklo (glassmorphism) — jedno pravidlo pro všechny průsvitné plochy: sklo v obsahu, plovoucí menu i přilepený přepínač. Výplň musí zůstat poloprůhledná, jinak sklo zmizí. */ --glass-fill: hsl(0, 0%, 100%, 0.5); --glass-border: hsl(0, 0%, 100%, 0.75); /* v tmavém režimu jemnější — viz dark blok */ /* POZOR: do filtru nikdy nepřidávat brightness() — iOS Safari pak vykreslí celou stránku černě (ověřeno na telefonu). Ztmavení/projasnění řeší --glass-fill. */ --glass-filter: blur(25px) saturate(140%); /* Focus — viditelný prstenec při ovládání klávesnicí */ --focus-color: var(--JELINEK-BROWN); --focus-width: 2px; --focus-offset: 2px; /* Písma */ --font-primary: "GT Walsheim Pro", Arial, Helvetica, sans-serif; --font-secondary: "GT Walsheim Pro", Arial, Helvetica, sans-serif; /* UI, drobný text a popisy (řez Light) */ --font-serif: "Archer", Georgia, "Times New Roman", serif; /* Layout */ --page-max: 1180px; --header-h: 70px; /* MOBIL: výška pruhu hlavičky; od 640 px 94 px (plovoucí, viz ZLOMY) */ --subnav-h: 58px; /* výška plovoucí lišty kapitol vč. mezer */ /* Typografická škála — mobile-first. Kořen je pevných 16 px (viz html níže), takže --step0 = tělo textu = 16 px na KAŽDÉ šířce okna, i na nejužším mobilu. Čísla jsou ta z brand guidu: mobilní řada 18/21/23/26/29/33 (poměr 1.125 zaokrouhlený nahoru) a monitorová řada 20/24/28/34/40/48 (poměr 1.200). Přechod mezi nimi ale NENÍ skok na breakpointu — každý stupeň má vlastní clamp(), který mezi šířkou okna 320 a 1024 px interpoluje lineárně: při 320 px se trefí přesně do mobilní hodnoty, při 1024 px přesně do té monitorové, a od 1024 px výš drží maximum. Tabulka v kapitole „Typografie" tak platí doslova v obou krajních sloupcích a mezi nimi se plynule přechází. (Dřív se na hranici 1024 px měnil h1 skokem o 45 % přes jediný pixel šířky okna; sloupce tabulky se tímhle nemění, mizí jen ten skok.) Sestupné stupně (--step-down1/2 = .small / .tiny) jsou PEVNÉ na mobilní hodnotě 15/13 px: drobný text se s rostoucím oknem nesmí zmenšovat. POZOR — to je jediné místo, kde se čísla liší od brand guidu (tam .small klesal na monitoru na 14 px a .tiny na 12 px); čeká to na potvrzení designérem, náhradní varianta je plochých 14/12 px všude. */ --step0: 1rem; /* 16 px, plochých */ --step1: clamp(1.125rem, 1.0682rem + 0.2841vw, 1.25rem); /* 18 → 20 px */ --step2: clamp(1.3125rem, 1.2273rem + 0.4261vw, 1.5rem); /* 21 → 24 px */ --step3: clamp(1.4375rem, 1.2955rem + 0.7102vw, 1.75rem); /* 23 → 28 px */ --step4: clamp(1.625rem, 1.3977rem + 1.1364vw, 2.125rem); /* 26 → 34 px */ --step5: clamp(1.8125rem, 1.5rem + 1.5625vw, 2.5rem); /* 29 → 40 px */ --step6: clamp(2.0625rem, 1.6364rem + 2.1307vw, 3rem); /* 33 → 48 px */ --step-down1: 0.9375rem; /* 15 px, plochých */ --step-down2: 0.8125rem; /* 13 px, plochých */ /* Mezery — 8point grid (best practice). Odstup sekcí je plynulý přes clamp (víc vzduchu na desktopu). */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-section: clamp(24px, 4vw, 48px); } /* -------------------------------------------------------------------------- 2b) DARK MODE (experiment) — aktivuje se atributem data-theme="dark" na . Hodnoty vychází z dark palety (BG-DARK, TEXT-LIGHT, BORDER-DARK/HIGHLIGHT…). -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; /* Stejné 3 rodiny (stejný odstín H i sytost S), jen jiná světlost L. */ /* Pozadí — tmavé pozadí stránky, karty/sekce o stupeň tmavší (čerň) */ --bg-white: hsl(0, 0%, 5%); /* BG-WHITE — hlavní pozadí stránky (dřív BACKGROUND) */ --bg-gray: hsl(0, 0%, 15%); /* BG-GRAY — jemné odlišení sekcí a karet */ --bg-brown: hsl(29, 44%, 10%); /* BG-BROWN */ --bg-magenta: hsl(324, 100%, 10%); /* BG-MAGENTA */ --bg-black: hsl(0, 0%, 0%); /* Text (muted1/2 prohozené kvůli čitelnosti na tmavém) */ --text-black: hsl(0, 0%, 92%); /* TEXT-BLACK v dark režimu */ --text-muted1: hsl(0, 0%, 62%); --text-muted2: hsl(0, 0%, 38%); --text-white: hsl(0, 0%, 95%); /* TEXT-WHITE — text na tmavém pozadí (dřív TEXT-LIGHT) */ /* Produktové barvy ztmavnou; hover je naopak rozjasní na světlý odstín */ --JELINEK-BROWN: hsl(29, 44%, 40%); /* PRIM-DARK-BROWN */ --JELINEK-MAGENTA: hsl(324, 100%, 30%); /* PRIM-DARK-MAGENTA */ --JELINEK-BROWN-HIGHLIGHT: hsl(29, 44%, 62%); /* hover → JELINEK-BROWN */ --JELINEK-MAGENTA-HIGHLIGHT: hsl(324, 100%, 46%); /* hover → JELINEK-MAGENTA */ /* Neutrální značkové barvy se v tmavém režimu PROHODÍ, aby černé prvky (tlačítka, kickery, pilly, linky) zůstaly na tmavém pozadí čitelné: bílá ztmavne na černou, černá zesvětlá na 95 %. Text na „černé" (nyní světlé) výplni je proto tmavý. */ --JELINEK-WHITE: hsl(0, 0%, 0%); --JELINEK-BLACK: hsl(0, 0%, 95%); --JELINEK-BLACK-HIGHLIGHT: hsl(0, 0%, 60%); --JELINEK-WHITE-HIGHLIGHT: hsl(0, 0%, 5%); /* prohození jako u WHITE (světlé 95 → tmavé 5) */ --ON-JELINEK-BLACK: hsl(0, 0%, 5%); /* Sémantické barvy — tmavší syté odstíny, vždy se světlým textem kvůli čitelnosti */ --sem-success: hsl(80, 47%, 24%); --sem-error: hsl(5, 100%, 24%); --sem-warning: hsl(45, 67%, 38%); --sem-info: hsl(173, 19%, 24%); --sem-error-strong: hsl(5, 100%, 54%); /* na tmavém pozadí světlejší, aby zůstal čitelný */ --glass-fill: hsl(0, 0%, 0%, 0.6); /* sklo v tmavém režimu ztmavuje místo projasnění */ --glass-border: hsl(0, 0%, 100%, 0.25); /* na tmavém stačí jemnější hrana */ --focus-color: var(--JELINEK-BROWN-HIGHLIGHT); /* prstenec focusu světlejší na tmavém */ /* Okraje a stíny */ --border-subtle: hsl(0, 0%, 20%); /* BORDER-SUBTLE (dark) — okraj utilit. ploch + konec gradientu panelů */ --border-highlight-white: hsl(0, 0%, 40%); /* BORDER-HIGHLIGHT-WHITE — světlejší horní hrana v dark */ /* Analogické stíny: stejná geometrie jako light, jen místo černé při nízkém krytí použijeme bílou při nízkém krytí — na tmavém pozadí tak vznikne jemné projasnění místo neviditelné černé. */ /* Stíny zůstávají černé i v tmavém režimu — bližší vrstva jemná, vzdálenější výraznější. */ --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.063), 0px 12px 12px hsl(0, 0%, 0%, 0.188); --shadow-resting: 0px 2px 2px hsl(0, 0%, 0%, 0.063), 0px 6px 6px hsl(0, 0%, 0%, 0.188); } /* Pager (předchozí/další kapitola) — v dark světlejší horní hrana. */ :root[data-theme="dark"] .pager a { border-top-color: var(--border-highlight-white); } /* Dark: plochy mají jemný vnořený horní stín v primární barvě divize (neutrál = JELINEK-BLACK). */ :root[data-theme="dark"] .panel, :root[data-theme="dark"] .card, :root[data-theme="dark"] .demo, :root[data-theme="dark"] .swatch, :root[data-theme="dark"] .logo-tool { box-shadow: inset 0 2px 1px -1px var(--box-primary); } /* Dlaždice mají i vržený stín — vnořený stín se k němu přidá (klid i hover). */ :root[data-theme="dark"] .tile { box-shadow: var(--shadow-resting), inset 0 2px 1px -1px var(--box-primary); } :root[data-theme="dark"] .tile:hover { box-shadow: var(--shadow-interactive), inset 0 2px 1px -1px var(--box-primary); } /* Průhledné pilly potřebují v dark viditelný vnořený stín a světlý aktivní segment. Barvy stínu jsou shodné s interaktivním stínem (bílá při nízkém krytí). */ :root[data-theme="dark"] .tabs--demo, :root[data-theme="dark"] .color-formats, :root[data-theme="dark"] .logo-tool__langs, :root[data-theme="dark"] .logo-tool__bgtabs { box-shadow: 0 0 10px hsl(0, 0%, 100%, 0.251) inset, inset 0 0px 50px hsl(0, 0%, 100%, 0.063), inset 0 2px 1px -1px var(--box-primary); /* odlesk na horní hraně jako u ploch */ } /* (aktivní segment se v dark režimu vyřeší sám přes JELINEK-BLACK = hsl(0,0%,50%)) */ /* Poloprůhledná tmavá hlavička i lišta kapitol (plovoucí pruhy = __inner) */ :root[data-theme="dark"] .site-header__inner, :root[data-theme="dark"] .chapter-nav__inner { background: var(--glass-fill); /* tmavá výplň řeší token */ } /* Inset (horní odlesk) patří jen na horní hranu celého panelu = hlavička. */ :root[data-theme="dark"] .site-header__inner { box-shadow: var(--shadow-resting), inset 0 2px 1px -1px var(--box-primary); } /* Submenu je spodní část panelu — jen drop stín, žádný inset (jinak bílá linka na spoji). */ :root[data-theme="dark"] .chapter-nav__inner { box-shadow: var(--shadow-resting); } /* Tmavá sytá pozadí hlášek/štítků nesou v dark režimu světlý text kvůli čitelnosti */ :root[data-theme="dark"] .alert, :root[data-theme="dark"] .alert strong { color: var(--text-white); } /* -------------------------------------------------------------------------- 3) ZÁKLAD -------------------------------------------------------------------------- */ * { box-sizing: border-box; } /* Základ škály = 16px na každé šířce okna — doporučená velikost pro čtení, a navíc díky ní iPhone nezvětšuje stránku při psaní do formuláře. Dřív se kořen na užších obrazovkách zmenšoval (až na 13px), čímž se zmenšil i text — mobil tak dostal nejmenší písmo na nejmenší obrazovce. Velikosti teď mění jednotlivé stupně škály (--step1…--step6 výše), ne kořen; tělo textu proto zůstává 16px všude. AŽ SE BUDE PŘEDĚLÁVAT HLAVIČKA: správná hodnota tady je `100%`, ne `16px` — `100%` respektuje uživatelem nastavenou velikost písma v prohlížeči, `16px` ji přebíjí. Teď to nejde: rozvržení hlavičky stojí na ručně změřených pixelových konstantách (--header-h, --subnav-h níže), zatímco text v ní je v rem. Pevných 16px ten rozpor zakrývá; při `100%` a výchozí velikosti písma 24px hlavička překryje lištu kapitol o 42,5 px na hranici mobilního rozvržení (měřeno při 621 px, dnes je ta hranice 640 px) a o 6,5 px při 768 i 1440 px — stejně na této i na předchozí verzi, není to tedy nic, co by způsobila škála. Až --header-h přestane být ruční konstanta (viz nálezy M3/M5/M9 v auditu), přepni tento řádek na `100%` ve stejném commitu a jako přejímací test použij projetí stránek s výchozí velikostí písma prohlížeče 24px. */ html { scroll-behavior: smooth; font-size: 16px; /* základ škály — stejný na mobilu i monitoru */ height: 100%; /* Barvu plátna (= plocha odhalená pružným přeskrolováním) přepíná skript v jelinek.js: nahoře barva stránky, dole černá jako patička. */ background-color: var(--bg-white); } body { margin: 0; /* Sloupec přes celou výšku okna — u krátkých kapitol drží patičku dole. */ min-height: 100%; display: flex; flex-direction: column; background: var(--bg-white); color: var(--text-black); font-family: var(--font-serif); /* Archer Book — odstavce a text */ font-weight: 400; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); } main { flex: 1 0 auto; } img { max-width: 100%; display: block; } /* Inline neformátovaný text (code) — drobný monospace v přerušovaném šedém rámečku */ code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted2); border: 1px dashed var(--text-muted2); border-radius: 4px; padding: 1px 6px; } /* Focus — prstenec při ovládání klávesnicí (Tab). Myš ho nevyvolá (:focus-visible). :where() má nulovou specifičnost, takže si ho komponenty mohou přebít vlastním pravidlem. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Odkazy jsou vždy tučné — v textu i jako tlačítko (viz .btn níže). */ a { color: var(--JELINEK-BROWN); text-decoration: none; font-weight: 700; } a:hover { text-decoration: underline; } /* „Blokové" odkazy (dlaždice, stránkování) si drží běžnou váhu obsahu — tučný řez u nich nesou vlastní nadpisy / , ne celé tělo. */ .tile, .pager a { font-weight: 400; } .container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-3); } /* width:100% drží plnou šířku i ve flex body (jinak se main smrskne na obsah) */ /* -------------------------------------------------------------------------- 4) TYPOGRAFIE Hierarchie: eyebrow / číslo kapitoly (velikost „h5") → H1 → H2 → H3 → H4 → text -------------------------------------------------------------------------- */ /* Nadpisy — typografická škála (viz --step1…--step6 výše); každý stupeň roste plynule s šířkou okna. h1 = step6 … h4 = step3, eyebrow o stupeň pod h4 (= „h5", step2). Mění se jen velikost a řádkování; řez (GT Walsheim Bold) zůstává. V obsahu guidu se h5/h6 nepoužívají (hierarchie končí u h4 + eyebrow), pravidla pro ně tu ale musí zůstat: reprodukuje je komponentová knihovna (svelte/src/lib/theme/base.css) a hlídá je check-css-lock.js. Bez nich by
a
spadly na výchozí velikost prohlížeče (0.83em / 0.67em rodiče), tedy MENŠÍ než odstavec — a knihovna by definovala pravidla, která v guidu nemají předlohu. Totéž platí pro .sub níže. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 700; margin: 0 0 0.4em; } h1 { font-size: var(--step6); line-height: 1.1; letter-spacing: -0.01em; } h2 { font-size: var(--step5); line-height: 1.1; } h3 { font-size: var(--step4); line-height: 1.2; } h4 { font-size: var(--step3); line-height: 1.2; } h5 { font-size: var(--step2); line-height: 1.3; } h6 { font-size: var(--step1); line-height: 1.3; } p { font-size: var(--step0); line-height: 1.4; margin: 0 0 1em; } .muted { color: var(--text-muted1); } .muted2 { color: var(--text-muted2); } .serif { font-family: var(--font-serif); } .small { font-size: var(--step-down1); line-height: 1.1; font-weight: 300; } .tiny { font-size: var(--step-down2); line-height: 1.1; } .sub { font-size: var(--step2); line-height: 1.3; } /* Role písma napříč webem: GT Walsheim = nadpisy · Archer = odstavce a text · Avenir = UI a drobný text. Tyto UI prvky proto přepínáme na Avenir (jinak by zdědily Archer z těla). */ .eyebrow, .small, .tag, .tab, figcaption, label.field-label, .site-header__nav a, .chapter-nav a, .pager a, .pager span, .logo-tool__meta { font-family: var(--font-secondary); } .site-header__title { font-family: var(--font-primary); } /* Text v ohraničených blocích používá písmo pro drobný text a popisy (Light). Nadpisy, tlačítka, štítky a další prvky si díky vlastním pravidlům drží svůj řez. */ .card, .panel, .alert, .tile, .demo, .swatch { font-family: var(--font-secondary); font-weight: 300; } /* Zvýraznění textu v základním řezu Light = GT Walsheim Medium (ne výrazné Bold). */ .card strong, .card b, .panel strong, .panel b, .alert strong, .alert b, .tile strong, .tile b, .demo strong, .demo b, .swatch strong, .swatch b, .small strong, .small b { font-weight: 500; } /* Eyebrow — krátký barevný perex nad nadpisem (vzor z prezentací) */ .eyebrow { font-weight: 700; color: var(--JELINEK-BROWN); margin: 0 0 0.35em; font-size: var(--step2); /* velikost „h5" (o stupeň pod h4) — kicker / číslo kapitoly */ } .eyebrow--magenta { color: var(--JELINEK-MAGENTA); } .eyebrow--black { color: var(--JELINEK-BLACK); } /* Linka pod nadpisem = 75 % šířky NAPSANÉHO textu. Realizováno jako ::after nadpisu, který následuje
— nadpis se zúží na šířku textu, samotné
se skryje. (Barevné varianty se přebírají z třídy hr přes :has.) */ .rule, .rule--magenta, .rule--black, .rule--white { display: none; } :is(h1, h2, h3):has(+ .rule) { width: fit-content; max-width: 100%; margin-bottom: 0; } :is(h1, h2, h3):has(+ .rule)::after { content: ""; display: block; height: 3px; width: 75%; border-radius: 2px; margin: var(--space-2) 0 var(--space-3); background: var(--JELINEK-BROWN); } :is(h1, h2, h3):has(+ .rule--magenta)::after { background: var(--JELINEK-MAGENTA); } :is(h1, h2, h3):has(+ .rule--black)::after { background: var(--JELINEK-BLACK); } :is(h1, h2, h3):has(+ .rule--white)::after { background: var(--text-white); } /* -------------------------------------------------------------------------- 5) HLAVIČKA A NAVIGACE MOBILE-FIRST. Nepodmíněné deklarace v této sekci popisují TELEFON; širší obrazovky je přepínají v @media (min-width: 640px) na konci sekce. Na telefonu je hlavička `absolute`: plný pruh přes celou šířku, který plave nad hero (jeho šedý pruh běží pod hlavičkou, takže pod lištou nevzniká viditelný spoj) a při scrollu odjede s obsahem. Odsazení hero se proto počítá z --header-h na všech šířkách — na telefonu 70 px, od 640 px 94 px (plovoucí pruh s mezerami). Od 640 px výš je hlavička `fixed`, tedy plovoucí a přilepená nahoře. Položky menu jsou na telefonu schované pod hamburgerem; ten se otevírá jako skleněný panel zavěšený na hlavičce. Viz initMobileMenu() v jelinek.js. -------------------------------------------------------------------------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; /* plave nad hero; zároveň kotva pro mobilní menu */ padding: 0; /* MOBIL: pruh přes celou šířku; od 640 px plovoucí (viz ZLOMY) */ --logo-mark: 46px; /* velikost znaku v hlavičce; fonty jsou proporční k němu */ } .site-header__inner { display: flex; align-items: center; gap: calc(var(--logo-mark) * 107 / 400); /* mezera = pravý okraj parohů ve znaku */ padding: 12px var(--space-3); max-width: none; margin: 0 auto; /* MOBIL: plná šířka */ background: var(--glass-fill); /* stejné sklo jako .glassmorphism */ -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-width: 0 0 1px; /* MOBIL: jen spodní linka, žádné zaoblení */ border-radius: 0; box-shadow: var(--shadow-resting); } .site-header__logo { display: inline-flex; flex: 0 0 auto; line-height: 0; border-radius: var(--radius-button); overflow: hidden; } /* znak zaoblený jako tlačítka (min. 8px) */ .site-header__logo img, .site-header__mark { width: var(--logo-mark); height: var(--logo-mark); display: block; } /* Proporce převzaté z loga (znak : nadpis : podnázev = 170 : 71 : 28) */ .site-header__title { font-weight: 700; line-height: 1; font-size: calc(var(--logo-mark) * 71 / 170); letter-spacing: -0.01em; } .site-header__title span { display: block; color: var(--text-muted1); font-family: "Avenir Next LT Pro", "Avenir Next", Arial, sans-serif; font-weight: 600; /* Avenir Demi */ font-size: calc(var(--logo-mark) * 35 / 170); letter-spacing: 0.064em; text-transform: uppercase; /* tracking 64 + vždy verzálky */ margin-top: 0.3em; line-height: 1.1; } /* Položky menu jsou terciární tlačítka (.btn--ghost) — vzhled, hover i aktivní stav (plná výplň) tedy řeší systém tlačítek. Tady zbývá jen rozestup a menší odsazení, aby se hlavička nenafoukla. */ .site-header__nav .btn { padding: 9px var(--space-2); font-size: 0.95rem; text-align: left; } /* MOBILE FIRST — na mobilu je menu schované pod hamburgerem a otevírá se jako skleněný panel pod hlavičkou. Od 640 px se hamburger skryje a položky se vrátí do řádku. BEZ JAVASCRIPTU se ale nesmí schovat nic: hamburger ovládá skript, takže by panel zůstal zavřený navždy a na telefonu by nebyla dostupná ŽÁDNÁ navigace. Sbalení je proto celé podmíněné třídou .has-js, kterou nastavuje vložený skript na začátku partials/header.html — ještě než se hlavička vykreslí, takže nic neproblikne. Bez JS zůstávají odkazy v řádku hlavičky a zalomí se (stav před hamburgerem); hlavička je pak vyšší, ale všechno je dostupné. Kdyby někdo .has-js z těchto selektorů vytahoval, vrátí se tím menu nefunkční bez JS. */ .site-header__nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } /* A protože se ty odkazy bez JS zalomí, je hlavička na telefonu VYŠŠÍ než --header-h (měřeno na /ui-old/komponenty.html: 197 px při 320 px, 162 px při 375 px, proti 70 px se sbaleným menu). Plovoucí hlavička by pak překryla začátek hero — jeho odsazení je spočítané z --header-h. Bez JS ji proto vracíme do běžného toku: hero pod ní nezůstane schovaný, jen se objeví spoj v šedém pruhu, který `position: absolute` odstraňuje (to je cena za funkční navigaci bez skriptu). Platí to NA VŠECH ŠÍŘKÁCH, ne jen na telefonu, a to je záměr. Nejdřív tu stálo `position: fixed` zpátky od 640 px — jenže i tam se lišta zalomí, jen na jiné stránce: na rozcestníku má podnázev „Brand guide & UI guide" a při 640 px má hlavička bez JS 126 px proti 94 px odsazení hero, tedy 4 px přes první nadpis (naměřeno). Kde přesně se zalomí, závisí na délce podnázvu, ne na šířce okna, takže žádný zlom to nespraví. V toku hlavička nikdy nic nepřekryje; cenou je trocha vzduchu navíc pod lištou, což je pro režim bez skriptu přijatelné. */ :root:not(.has-js) .site-header { position: static; } .site-header__burger { display: none; /* zapíná se až s .has-js */ flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; padding: 0 10px; /* 44px = pohodlný cíl pro prst */ border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-button); } :root.has-js .site-header__burger { display: inline-flex; } .site-header__burger span { display: block; height: 2px; background: var(--text-black); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } /* Otevřený hamburger se překlopí na křížek */ .site-header.is-menu-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-menu-open .site-header__burger span:nth-child(2) { opacity: 0; } .site-header.is-menu-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } :root.has-js .site-header__nav { display: none; /* zavřené menu */ position: absolute; top: 100%; left: 0; right: 0; z-index: 48; flex-direction: column; align-items: stretch; gap: 4px; margin-left: 0; padding: 12px; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--glass-fill); /* stejné sklo jako hlavička */ border: 1px solid var(--glass-border); border-width: 0 0 1px; -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-resting); } :root.has-js .site-header.is-menu-open .site-header__nav { display: flex; } :root.has-js .site-header__nav .theme-toggle { align-self: flex-start; margin: var(--space-1) 0 0 var(--space-2); } /* Kapitoly aktuálního guidu (do panelu je doplní skript) — oddělené linkou */ .site-menu__chapters { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--glass-border); } .site-menu__chapters .btn { font-size: 0.9rem; padding: 7px var(--space-2); } /* Přepínač světlý/tmavý režim — pill s posuvným kolečkem a černou minimalistickou ikonou */ .theme-toggle { position: relative; flex: 0 0 auto; width: 52px; height: 28px; padding: 0; cursor: pointer; background: transparent; border: 2px solid var(--text-black); border-radius: var(--radius-pill); } .theme-toggle__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-white); box-shadow: var(--shadow-resting); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-slow) var(--ease); } .theme-toggle.is-dark .theme-toggle__knob { transform: translateX(24px); } .theme-toggle__icon { width: 13px; height: 13px; display: block; color: var(--text-black); } /* Navigace kapitol (pilulky pod hlavičkou) */ /* Lišta kapitol = plovoucí skleněný pruh se stejnými vlastnostmi jako hlavní menu, vysunutý zpod hlavičky. NENÍ sticky — scrolluje s obsahem, takže při scrollu zajede zpět pod hlavní menu. Mobile-first: na telefonu lišta VŮBEC NENÍ vidět — kapitoly jsou v hamburgeru (skript je do panelu naklonuje odsud, takže zdroj pravdy zůstává jeden). Od 640 px výš se lišta zobrazí a vysouvá se absolutně podle --header-h. */ .chapter-nav { display: none; /* na mobilu jsou kapitoly v hamburgeru */ position: static; top: calc(var(--header-h) - 11px); left: 0; right: 0; z-index: 49; padding: 0 var(--space-3); } /* Náznak vodorovného scrollu — jemné zastínění u kraje pruhu na té straně, kam se dá ještě posunout. Třídy nastavuje initChapterNavScroll() v jelinek.js podle skutečné polohy scrollu, takže se náznak nikdy neukáže tam, kde není co posouvat. Bez JS se nezobrazí nic a lišta se chová jako dřív. Pozice odpovídá vnitřnímu pruhu, dokud vyplňuje celou šířku (0 24px) — nad --page-max + mezery je pruh užší, tam už ale žádné pilulky nepřetékají. Offset 25px = 24px vnějšího odsazení lišty (--space-3) + 1px rámeček pruhu. */ .chapter-nav::before, .chapter-nav::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 36px; /* z-index: 1 — .chapter-nav__inner má backdrop-filter, a tím vytváří stejnou vykreslovací vrstvu jako tyhle absolutně umístěné pseudoprvky; bez z-indexu by se ::before schoval pod ním. Odsazení o 1px drží zastínění uvnitř rámečku, ať se nerozmazává jeho hrana. */ z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease); } .chapter-nav::before { left: 25px; border-radius: 0 0 0 calc(var(--radius-card) - 1px); background: linear-gradient(to right, var(--bg-white) 20%, transparent); } .chapter-nav::after { right: 25px; border-radius: 0 0 calc(var(--radius-card) - 1px) 0; background: linear-gradient(to left, var(--bg-white) 20%, transparent); } .chapter-nav.has-scroll-start::before, .chapter-nav.has-scroll-end::after { opacity: 1; } .chapter-nav__inner { display: flex; gap: 6px; overflow-x: auto; padding: var(--space-1) var(--space-2); max-width: var(--page-max); margin: 0 auto; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border: 1px solid var(--glass-border); border-top-width: 0; /* spoj s hlavičkou bez linky */ border-radius: 0 0 var(--radius-card) var(--radius-card); /* zaoblený jen spodek */ box-shadow: var(--shadow-resting); } .chapter-nav a { white-space: nowrap; color: var(--text-muted1); font-size: 0.88rem; font-weight: 500; padding: 6px 13px; border-radius: var(--radius-pill); border: 1px solid transparent; } .chapter-nav a:hover { color: var(--text-black); background: var(--bg-gray); text-decoration: none; } .chapter-nav a.is-active { color: var(--text-black); border-color: var(--JELINEK-BROWN); background: var(--bg-brown); } /* Posuvná oblast má v HTML tabindex="0" (WCAG 2.1.1 — posuvnou oblast musí jít ovládat i klávesnicí); ať je při zaostření vidět, kde uživatel je. Barva i šířka jdou z tokenů focusu (--focus-color/--focus-width), stejně jako globální prstenec výše a formulářová pole níž — natvrdo psaná --JELINEK-BROWN by v tmavém režimu byla tmavší než všude jinde (tam se --focus-color mění na --JELINEK-BROWN-HIGHLIGHT). Odsazení je záporné (prstenec dovnitř), aby se nepřekrýval s hlavičkou nad lištou — proto ne přímo --focus-offset. */ .chapter-nav__inner:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: calc(-1 * var(--focus-offset)); } /* Od 640 px výš: hlavička i lišta kapitol se odlepí od krajů a plavou nad obsahem, hamburger mizí a položky menu se vrací do řádku. Lišta kapitol se zobrazí a vysune se zpod hlavičky. Základní deklarace výše popisují telefon. Rules jsou schválně tady, u pravidel, ne v souhrnném bloku na konci souboru — jinak by rozvržení hlavičky bylo popsané na dvou místech naráz a jedna z kopií by dřív nebo později zůstala pozadu. */ @media (min-width: 640px) { :root { --header-h: 94px; } /* plovoucí pruh je vyšší o vnější mezery */ .site-header { position: fixed; padding: 12px var(--space-3); } /* odlepí se od krajů = plovoucí */ .site-header__inner { max-width: var(--page-max); border-width: 1px; border-radius: var(--radius-card); } :root.has-js .site-header__burger { display: none; } :root.has-js .site-header__nav { display: flex; position: static; flex-direction: row; align-items: center; margin-left: auto; gap: var(--space-1); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root.has-js .site-header__nav .theme-toggle { align-self: auto; margin: 0; } .site-menu__chapters { display: none; } /* na širších obrazovkách je lišta kapitol pod hlavičkou */ .chapter-nav { display: block; position: absolute; } /* hlavička = horní část panelu (zaoblený jen vrch, bez spodní linky a stínu, ať plynule přechází do submenu); po odscrollování submenu se zaoblí zase celá */ :root:has(.chapter-nav):not(.is-subnav-scrolled) .site-header__inner { border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom-width: 0; box-shadow: none; } /* Dark: zadokovaná hlavička nese jen vnořený horní odlesk jako tiles — bez vrženého stínu, aby na spoji se submenu nevznikla linka. */ :root[data-theme="dark"]:has(.chapter-nav):not(.is-subnav-scrolled) .site-header__inner { box-shadow: inset 0 2px 1px -1px var(--box-primary); } :root.is-subnav-scrolled .site-header__inner { border-radius: var(--radius-card); border-bottom-width: 1px; } } /* -------------------------------------------------------------------------- 6) SEKCE A PANELY -------------------------------------------------------------------------- */ /* Hlavička plave nad hero na všech šířkách (na telefonu absolute, od 640 px fixed), takže šedý pruh hero běží pod ní a pod lištou nevzniká viditelný spoj. Odsazení se proto počítá z --header-h všude; var() se u zlomu přepočítá samo (70 → 94 px), žádné opakování v @media není potřeba. Lišta kapitol je na telefonu skrytá (kapitoly jsou v hamburgeru), proto se o --subnav-h odsazuje až od 640 px. */ .page-hero { padding: calc(var(--header-h) + 28px) 0 var(--space-section); /* odsazení pod plovoucí hlavičku + vzduch */ background: var(--bg-gray); box-shadow: 0 0 0 100vmax var(--bg-gray); /* celoplošný šedý pruh bez vodorovného posuvníku; sahá i za menu */ clip-path: inset(0 -100vmax); } @media (min-width: 640px) { /* Stránky s lištou kapitol: hero odsadit i pod ni. */ .chapter-nav ~ main .page-hero { padding-top: calc(var(--header-h) + var(--subnav-h) + 20px); } } .section { padding: var(--space-section) 0; } /* Jednotný jemný rámeček pro VŠECHNY plochy (panely, karty, dema, dlaždice, vzorníky, logo-nástroj): 1px gradient BORDER-SUBTLE → BORDER-SUBTLE (subtle→subtle). Divize se pozná jen tónovaným pozadím (--box-fill), okraj je všude stejný. Zaoblení zachováno technikou padding-box/border-box. */ .panel, .card, .demo, .tile, .swatch, .logo-tool { --box-fill: var(--bg-white); --box-accent: var(--border-subtle); border: 1px solid transparent; border-radius: var(--radius-card); background: linear-gradient(var(--box-fill), var(--box-fill)) padding-box, linear-gradient(180deg, var(--box-accent) 10%, var(--border-subtle) 50%) border-box; } .panel, .card, .demo { padding: var(--space-3); margin-bottom: 1.5rem; } /* V mřížce řeší mezery gap — spodní margin se tam vynuluje. */ .grid .panel, .grid .card, .grid .demo { margin-bottom: 0; } .panel--light, .demo--light { --box-fill: var(--bg-gray); } .panel--dark { --box-fill: var(--bg-black); color: var(--text-white); } .panel--dark h1, .panel--dark h2, .panel--dark h3 { color: var(--text-white); } /* Divizní barva boxu se projevuje jen tónovaným pozadím; rámeček zůstává jednotný subtle (stejně jako u neutrálních a utilitárních ploch). */ .panel--brown, .card--brown, .demo--brown { --box-fill: var(--bg-brown); --box-primary: var(--JELINEK-BROWN); } .panel--magenta, .card--magenta, .demo--magenta { --box-fill: var(--bg-magenta); --box-primary: var(--JELINEK-MAGENTA); } /* Mřížky — MOBILE FIRST: základ je jeden sloupec, širší obrazovky sloupce přidávají. */ .grid { display: grid; gap: var(--space-3); } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } /* základ (od 360 px) */ @media (min-width: 640px) { /* velké telefony, malé tablety */ .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { /* notebook a výš */ .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } /* Fotky */ .photo { border-radius: var(--radius-image); object-fit: cover; width: 100%; } figure { margin: 0; } figcaption { font-size: 0.82rem; color: var(--text-muted1); margin-top: var(--space-1); } /* -------------------------------------------------------------------------- 7) KOMPONENTY (zdroj: UI guide — Clrs) -------------------------------------------------------------------------- */ /* Tlačítka — 3 slohy (primární / sekundární / terciární) × 3 akcentní barvy. Barva se řídí třídou --brown / --magenta / --black, sloh --secondary / --ghost (bez slohové třídy = primární plná výplň). */ .btn { display: inline-block; cursor: pointer; text-align: center; font-family: var(--font-primary); font-weight: 700; font-size: 0.98rem; line-height: 1.2; /* GT Walsheim Bold — odkazy jsou tučné */ padding: 11px 26px; border: 2px solid transparent; border-radius: var(--radius-button); box-shadow: var(--shadow-resting); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); text-decoration: none; } .btn:hover { text-decoration: none; } /* ---- Sloh 1: PRIMÁRNÍ (plná výplň) ---------------------------------------- */ .btn--brown { background: var(--JELINEK-BROWN); color: var(--text-white); } .btn--brown:hover { background: var(--JELINEK-BROWN-HIGHLIGHT); box-shadow: var(--shadow-interactive); } .btn--magenta { background: var(--JELINEK-MAGENTA); color: var(--text-white); } .btn--magenta:hover { background: var(--JELINEK-MAGENTA-HIGHLIGHT); box-shadow: var(--shadow-interactive); } .btn--black { background: var(--JELINEK-BLACK); color: var(--ON-JELINEK-BLACK); } .btn--black:hover { background: var(--JELINEK-BLACK-HIGHLIGHT); color: var(--ON-JELINEK-BLACK); box-shadow: var(--shadow-interactive); } /* ---- Sloh 2: SEKUNDÁRNÍ (ohraničení, průhledné pozadí) --------------------- */ .btn--secondary { background: transparent; } .btn--secondary.btn--brown { color: var(--JELINEK-BROWN); border-color: var(--JELINEK-BROWN); } .btn--secondary.btn--magenta { color: var(--JELINEK-MAGENTA); border-color: var(--JELINEK-MAGENTA); } .btn--secondary.btn--black { color: var(--JELINEK-BLACK); border-color: var(--JELINEK-BLACK); } /* hover → vypadá totožně jako primární na hoveru (highlight výplň, bez viditelného rámečku) */ .btn--secondary.btn--brown:hover { background: var(--JELINEK-BROWN-HIGHLIGHT); color: var(--text-white); border-color: transparent; box-shadow: var(--shadow-interactive); -webkit-backdrop-filter: none; backdrop-filter: none; } .btn--secondary.btn--magenta:hover { background: var(--JELINEK-MAGENTA-HIGHLIGHT); color: var(--text-white); border-color: transparent; box-shadow: var(--shadow-interactive); -webkit-backdrop-filter: none; backdrop-filter: none; } .btn--secondary.btn--black:hover { background: var(--JELINEK-BLACK-HIGHLIGHT); color: var(--ON-JELINEK-BLACK); border-color: transparent; box-shadow: var(--shadow-interactive); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- Sloh 3: TERCIÁRNÍ (bez ohraničení, jen text) ------------------------- */ .btn--ghost { background: transparent; border-color: transparent; box-shadow: none; } .btn--ghost.btn--brown { color: var(--JELINEK-BROWN); } .btn--ghost.btn--magenta { color: var(--JELINEK-MAGENTA); } .btn--ghost.btn--black { color: var(--JELINEK-BLACK); } .btn--ghost:hover { background: transparent; box-shadow: none; } .btn--ghost.btn--brown:hover { color: var(--JELINEK-BROWN-HIGHLIGHT); } .btn--ghost.btn--magenta:hover { color: var(--JELINEK-MAGENTA-HIGHLIGHT); } .btn--ghost.btn--black:hover { color: var(--JELINEK-BLACK-HIGHLIGHT); } /* Aktivní / vybraný stav — vždy plná výplň v akcentní barvě prim-(akcent). Platí napříč slohy i pro segmenty pillů (.tab, .logo-tool__lang, .logo-tool__bgtab). */ .btn.is-active, .btn--secondary.is-active, .btn--ghost.is-active { border-color: transparent; box-shadow: var(--shadow-interactive); -webkit-backdrop-filter: none; backdrop-filter: none; } .btn--brown.is-active { background: var(--JELINEK-BROWN); color: var(--text-white); } .btn--magenta.is-active { background: var(--JELINEK-MAGENTA); color: var(--text-white); } .btn--black.is-active { background: var(--JELINEK-BLACK); color: var(--ON-JELINEK-BLACK); } /* Disabled — společné pro všechny slohy i barvy. Hover na disabled nesmí dělat nic: selektory :hover níže drží stejný vzhled jako klidový disabled stav. */ .btn:disabled, .btn.is-disabled, .btn:disabled:hover, .btn.is-disabled:hover { background: var(--bg-gray); color: var(--text-muted2); border-color: transparent; cursor: not-allowed; box-shadow: none; text-decoration: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Tag / štítek */ .tag { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 3px 12px; border-radius: var(--radius-pill); } .tag--instock { background: var(--sem-success-strong); color: var(--text-white); } .tag--todo { background: var(--bg-gray); color: var(--text-muted1); border: 1px dashed var(--text-muted2); } /* Tag podle pravidla doplňkových barev — odstín zvol přes --tag-h a --tag-s; světlost se bere z žebříku (nejsvětlejší 90 / základní 54 / nejtmavší 24) a přepíná se dle režimu. tag--soft = tlumená (barevné pozadí kraj, text základ), tag--fill = plná (pozadí základ, text kraj). */ .tag--soft, .tag--fill { --tag-h: 0; --tag-s: 0%; } .tag--soft { background: hsl(var(--tag-h), var(--tag-s), 90%); color: hsl(var(--tag-h), var(--tag-s), 54%); } .tag--fill { background: hsl(var(--tag-h), var(--tag-s), 54%); color: hsl(var(--tag-h), var(--tag-s), 90%); } :root[data-theme="dark"] .tag--soft { background: hsl(var(--tag-h), var(--tag-s), 24%); } :root[data-theme="dark"] .tag--fill { color: hsl(var(--tag-h), var(--tag-s), 24%); } /* Alerty — sémantické hlášky */ .alert { border-radius: var(--radius-card); padding: var(--space-2) 20px; margin: 0 0 14px; font-size: var(--step-down1); line-height: 1.1; /* text v sémantických boxech = velikost „small“, ne odstavec */ } .alert strong { display: block; margin-bottom: 2px; } .alert--success { background: var(--sem-success); } .alert--error { background: var(--sem-error); } .alert--warning { background: var(--sem-warning); } .alert--info { background: var(--sem-info); } /* Taby */ /* Přepínač (pill). Když se segmenty na úzkou obrazovku nevejdou, NEZALOMÍ se do dalšího řádku, ale posouvají se do strany — vpravo se objeví šipka (doplní skript). */ .tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* posuvník skrytý, posouvá se tahem/šipkou */ } /* Stejné chování mají i další řádky pilulek: lišta kapitol a přepínač provedení loga. */ .chapter-nav__inner, .logo-tool__bgtabs { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .tabs::-webkit-scrollbar, .chapter-nav__inner::-webkit-scrollbar, .logo-tool__bgtabs::-webkit-scrollbar { display: none; } /* Obal, který drží šipku (vytváří skript kolem každého takového řádku). min-width: 0 — bez toho by se obal uvnitř flex rodiče nesmrskl pod šířku pilulek a řádek by přetekl ven místo posouvání. */ .tabs-scroll { position: relative; min-width: 0; } /* Zarovnání obalu tam, kde měl řádek vlastní šířku nebo okraje */ .chapter-nav .tabs-scroll { max-width: var(--page-max); margin: 0 auto; } .chapter-nav .tabs-scroll__prev { left: 8px; } .chapter-nav .tabs-scroll__next { right: 8px; } .logo-tool .tabs-scroll { margin: var(--space-2); } .logo-tool .tabs-scroll > .logo-tool__bgtabs { margin: 0; } .tabs-scroll__prev, .tabs-scroll__next { position: absolute; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--bg-white); color: var(--text-muted1); cursor: pointer; box-shadow: var(--shadow-resting); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .tabs-scroll__prev { left: 2px; } .tabs-scroll__next { right: 2px; } /* Levá se ukáže, jen když už je co posouvat zpět; pravá dokud je co posouvat dál. */ .tabs-scroll.is-overflowing:not(.is-start) .tabs-scroll__prev { display: flex; } .tabs-scroll.is-overflowing:not(.is-end) .tabs-scroll__next { display: flex; } .tabs-scroll__prev:hover, .tabs-scroll__next:hover { background: var(--JELINEK-BLACK); color: var(--ON-JELINEK-BLACK); } .color-formats .tabs-scroll { flex: 1; } /* Segment pillu — jednotný vzhled pro všechny přepínače (taby, jazyk loga, pozadí loga): tučný text, stejný font, velikost i padding (a tím i stejná výška). */ .tab, .logo-tool__bgtab, .logo-tool__lang { flex: 1 0 auto; text-align: center; cursor: pointer; white-space: nowrap; /* roztáhne se, ale nikdy se nesmrskne pod text */ padding: 10px var(--space-2); border: 0; border-radius: var(--radius-pill); font-family: var(--font-secondary); font-weight: 700; font-size: 0.9rem; line-height: 1.2; color: var(--text-muted1); background: transparent; } .tab:hover, .logo-tool__bgtab:hover, .logo-tool__lang:hover { background: var(--text-muted1); color: var(--text-white); } /* Aktivní / vybraný segment = plná akcentní barva (neutrální = JELINEK-BLACK) */ .tab.is-active, .logo-tool__bgtab.is-active, .logo-tool__lang.is-active { background: var(--JELINEK-BLACK); color: var(--ON-JELINEK-BLACK); } /* Jednotný segmentový přepínač (pill) — průhledné pozadí, zapuštěný vnitřní stín a stejný rámeček jako ostatní plochy (BORDER-SUBTLE). Pozadí zůstává průhledné, proto tu nejde gradientní rámeček ploch — vizuálně je ale shodný, protože gradient ploch dnes vede z BORDER-SUBTLE do BORDER-SUBTLE. */ .tabs--demo, .color-formats, .logo-tool__langs, .logo-tool__bgtabs { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 6px; box-shadow: inset 0 0px 5px hsl(0, 0%, 0%, 0.251), inset 0 0px 5px hsl(0, 0%, 0%, 0.063); } /* Mezera mezi segmenty. Šířku (100 % na mobilu, 75 % od 640 px) řeší společné pravidlo .tabs--demo/.color-formats níž — viz „Jednotná šířka přepínačů“. */ .tabs--demo { gap: 6px; } /* VOLITELNĚ přilepený přepínač — třída is-sticky. Pilulka zůstane po ruce i při scrollování (např. přepínač formátu barev, ať se kvůli přepnutí nemusí rolovat nahoru). Přilepí se pod plovoucí hlavičku a dostane sklo, aby přes ni nebyl vidět obsah pod ní. Zůstává POD hlavičkou i lištou kapitol (z-index 40 < 49/50). Používat střídmě — jen tam, kde se přepínač opravdu používá průběžně; jinak zabírá místo. */ .is-sticky { /* Na telefonu se lepí k hornímu okraji (top: 8px): hlavička je tam `absolute`, takže při scrollu odjede a pilulku nic nezakrývá. Od 640 px hlavička plave (`fixed`) a pilulka se musí zastavit pod ní — proto odsazení podle --header-h. (Mezikrok, kdy byla hlavička na telefonu `sticky` a pilulka se proto na mobilu nelepila vůbec, padl s převzetím mobilní hlavičky od designéra.) */ position: sticky; top: 8px; z-index: 40; background: var(--glass-fill); border: 1px solid var(--glass-border); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); } @media (min-width: 640px) { .is-sticky { top: calc(var(--header-h) + 8px); } } /* pod plovoucí hlavičku */ /* Tmavý režim přilepeného přepínače řeší token --glass-fill. */ /* Dlaždice (tile) — klikatelná karta (rámeček řeší jednotný gradient výše) */ .tile { display: block; padding: 22px; color: var(--text-black); box-shadow: var(--shadow-resting); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .tile:hover { box-shadow: var(--shadow-interactive); text-decoration: none; transform: translateY(-2px); } .tile.is-active { border-color: var(--JELINEK-BROWN); background: var(--bg-brown); } .tile h3 { margin-bottom: 6px; } .tile p { color: var(--text-muted1); font-size: 0.9rem; margin: 0; } /* Posuvná řada dlaždic — alternativa k dlouhému výpisu (např. mnoho podstránek). Dlaždice zůstanou v jedné řadě a posouvají se do strany; poslední je záměrně částečně vidět, aby bylo poznat, že řada pokračuje. Šipky doplní skript pod řadu. */ .tile-scroller { display: flex; gap: var(--space-3); flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; /* Posuvná oblast ořezává obsah, takže stín dlaždic potřebuje rezervu: do stran 12 px a dolů 24 px (tolik sahá stín při najetí myší), nahoru 4 px (dlaždice se o 2 px zvedne). Záporné okraje po stranách rezervu zase vyruší, aby řada zůstala zarovnaná s obsahem. */ padding: 4px 12px var(--space-3); margin: -4px -12px 0; scroll-padding-inline: 12px; /* aby přichytávání (snap) počítalo s rezervou a neodsunulo řadu */ } .tile-scroller::-webkit-scrollbar { display: none; } .tile-scroller > * { flex: 0 0 80%; scroll-snap-align: start; } /* mobil: 1 dlaždice + náhled další */ @media (min-width: 640px) { .tile-scroller > * { flex-basis: 46%; } } /* 2 + náhled */ @media (min-width: 1024px) { .tile-scroller > * { flex-basis: 31%; } } /* 3 + náhled */ @media (min-width: 1440px) { .tile-scroller > * { flex-basis: 23%; } } /* 4 + náhled */ /* U dlaždic jsou šipky pod řadou uprostřed (ne na okrajích jako u pilulek) a na kraji řady jen zešednou — aby dvojice šipek neposkakovala. */ .tabs-scroll--below { padding-bottom: 44px; } .tabs-scroll--below .tabs-scroll__prev, .tabs-scroll--below .tabs-scroll__next { top: auto; bottom: 0; transform: none; width: 34px; height: 34px; } .tabs-scroll--below .tabs-scroll__prev { left: calc(50% - 40px); right: auto; } .tabs-scroll--below .tabs-scroll__next { right: calc(50% - 40px); left: auto; } .tabs-scroll--below.is-overflowing .tabs-scroll__prev, .tabs-scroll--below.is-overflowing .tabs-scroll__next { display: flex; } .tabs-scroll--below.is-start .tabs-scroll__prev, .tabs-scroll--below.is-end .tabs-scroll__next { opacity: 0.35; pointer-events: none; } /* Nadpisy uvnitř komponent (karty, dlaždice) nejsou obsahová hierarchie — drží menší, komponentní velikost, ne velký stupeň z modulární škály. */ .card h3, .tile h3 { font-size: var(--step1); line-height: 1.3; } /* Formulářové prvky */ .input, .select { width: 100%; font-family: var(--font-secondary); font-size: 0.98rem; padding: 11px 14px; border-radius: var(--radius-button); border: 1px solid var(--text-muted2); background: var(--bg-white); color: var(--text-black); } .input::placeholder { color: var(--text-muted2); } .input:focus, .select:focus { outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px; border-color: var(--focus-color); } label.field-label { display: block; font-weight: 500; font-size: 0.88rem; margin: 0 0 6px; } /* Ukázka kódu pod příkladem (UI guide) — klik zkopíruje celý řádek. */ .code-line { margin: 10px 0 0; } .code-line code { display: block; white-space: pre-wrap; word-break: break-word; padding: var(--space-1) 12px; border-style: solid; border-color: var(--border-subtle); color: var(--text-muted1); background: var(--bg-gray); cursor: pointer; } .code-line code:hover { color: var(--text-black); } /* Chybový stav pole — sytá varianta sémantické chybové barvy (SEM-ERROR). */ .input.is-error, .select.is-error { border-color: var(--sem-error-strong); } .input.is-error:focus, .select.is-error:focus { outline-color: var(--sem-error-strong); border-color: var(--sem-error-strong); } .field-error { display: block; margin: 6px 0 0; font-family: var(--font-secondary); font-size: var(--step-down1); font-weight: 500; color: var(--sem-error-strong); } /* Ukázka barevného vzorku (swatch) — rámeček řeší jednotný gradient výše */ .swatch { overflow: hidden; } .swatch__color { height: 92px; } .swatch__meta { padding: 12px 14px; font-size: 0.82rem; } .swatch__meta strong { display: block; font-size: 0.88rem; } .swatch__meta code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-muted1); font-size: 0.8rem; cursor: pointer; border: 0; padding: 0; border-radius: 0; } .swatch__meta code:hover { color: var(--text-black); } .swatch__meta code.is-empty { cursor: default; color: var(--text-muted2); } .swatch__meta code.is-empty:hover { color: var(--text-muted2); } /* Řádek režimu (LMODE/DMODE) ve vzorníku */ .swatch__mode { display: flex; align-items: center; gap: 10px; } .swatch__mode-lbl { font-family: var(--font-secondary); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.05em; color: var(--text-muted2); min-width: 62px; flex: 0 0 auto; white-space: nowrap; } .swatch__mode .swatch__value { flex: 1; margin: 3px 0; } /* Řádek s hodnotou barvy + tlačítko kopírovat */ .swatch__value { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin: 2px 0 4px; } .swatch__copy { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--text-muted2); padding: 4px; border-radius: 6px; line-height: 0; } .swatch__copy:hover { color: var(--text-black); background: var(--bg-gray); } .swatch__copy.is-copied { color: var(--sem-success-strong); } .swatch__copy:disabled { opacity: 0.3; cursor: default; } .swatch__copy:disabled:hover { color: var(--text-muted2); background: transparent; } /* Doplňkové barvy — hustá mřížka odstínů (žebřík světlosti). Klik na políčko kopíruje HEX. */ .pal-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .pal-ramp { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border-subtle); } .pal-cell { display: block; width: 100%; height: 26px; border: 0; padding: 0; margin: 0; cursor: pointer; transition: filter var(--dur-fast) var(--ease); } .pal-cell:hover { filter: brightness(1.12); } .pal-cell.is-copied { box-shadow: inset 0 0 0 2px hsl(0, 0%, 100%), inset 0 0 0 4px var(--JELINEK-BLACK); } /* Přepínač formátu barev (HEX / RGB / HSL / CMYK / Pantone) */ .color-formats { display: flex; align-items: center; margin: 6px auto 22px; } .color-formats .tabs { flex: 1; gap: 6px; } /* Jednotná šířka přepínačů: na mobilu přes celou šířku, od 640 px zúžené na 75 %. */ .tabs--demo, .color-formats { width: 100%; margin-inline: auto; } @media (min-width: 640px) { .tabs--demo, .color-formats { width: 75%; } } /* Interaktivní náhled a stažení loga (kapitola Logo) — rámeček řeší jednotný gradient výše */ .logo-tool { overflow: hidden; margin-top: 20px; } .logo-tool__bgtabs { display: flex; gap: 6px; margin: var(--space-2); } /* nezalamuje se — viz .tabs výše */ .logo-tool__stage { min-height: 340px; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--bg-brown); } .logo-tool__img { width: min(320px, 70%); height: auto; display: block; } .logo-tool__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 20px; background: var(--bg-gray); border-top: 1px solid var(--border-subtle); } .logo-tool__meta { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; } .logo-tool__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .logo-tool__langs { display: inline-flex; gap: 6px; } /* Split-button: stažení + kopírování CDN odkazu (mediální knihovna). */ .logo-tool__pair { display: inline-flex; } .logo-tool__pair .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .logo-tool__copy { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 11px 13px; display: inline-flex; align-items: center; border-left: 1px solid hsla(0, 0%, 100%, 0.3); } .logo-tool__copy svg { width: 16px; height: 16px; display: block; } .logo-tool__copy .logo-tool__copy-check { display: none; } .logo-tool__copy.is-copied .logo-tool__copy-link { display: none; } .logo-tool__copy.is-copied .logo-tool__copy-check { display: block; } .logo-tool__copy:disabled { opacity: 0.35; cursor: default; box-shadow: none; } /* Obsahové logo — lockup pro popis právě prohlíženého obsahu (znak + JELÍNEK + verzálkový podnázev). Proporce znak : nadpis : podnázev = 170 : 71 : 28. Barva znaku (parohů) se mění podle divize; text je vždy neutrální, podnázev vždy verzálkami. */ .content-logo { display: inline-flex; align-items: center; gap: calc(var(--logo-mark) * 107 / 400); --logo-mark: 96px; color: var(--text-white); } /* mezera = pravý okraj parohů ve znaku */ .content-logo--brown { color: var(--JELINEK-BROWN); } .content-logo--magenta { color: var(--JELINEK-MAGENTA); } .content-logo__svg { width: var(--logo-mark); height: var(--logo-mark); display: block; flex: 0 0 auto; } .content-logo__title { font-family: var(--font-primary); font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-size: calc(var(--logo-mark) * 71 / 170); color: var(--text-black); } .content-logo__sub { display: block; color: var(--text-muted1); font-family: "Avenir Next LT Pro", "Avenir Next", Arial, sans-serif; font-weight: 600; /* Avenir Demi */ font-size: calc(var(--logo-mark) * 35 / 170); letter-spacing: 0.064em; text-transform: uppercase; margin-top: 0.3em; line-height: 1.1; } /* Patička */ .site-footer { margin-top: 60px; background: var(--bg-black); color: var(--text-white); border-radius: var(--radius-section) var(--radius-section) 0 0; } .site-footer__inner { max-width: var(--page-max); margin: 0 auto; padding: 40px var(--space-3); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; } .site-footer img { width: 52px; height: 52px; border-radius: 12px; } .site-footer a { color: var(--JELINEK-BROWN); } .site-footer .slogan { font-weight: 700; } .site-footer .meta { margin-left: auto; font-size: 0.85rem; color: var(--text-muted2); } /* Navigace předchozí / další kapitola */ /* flex-wrap + základní šířka 200px: na úzkém displeji se karty poskládají pod sebe místo aby se obě mačkaly do jednoho řádku (na 375px displeji měly po 156 px). Zlom vychází z obsahu, ne z breakpointu: dvě karty po 200 px + mezera 16 px (--space-2) se vejdou do obsahové šířky od 416 px výš, tj. zhruba od 464px širokého okna. */ .pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: 44px 0 10px; } .pager a { flex: 1 1 200px; max-width: 340px; padding: var(--space-2) 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); color: var(--text-black); box-shadow: var(--shadow-resting); transition: box-shadow var(--dur-base) var(--ease); } .pager a:hover { box-shadow: var(--shadow-interactive); text-decoration: none; } .pager a span { display: block; font-size: 0.78rem; color: var(--text-muted1); } .pager a.next { text-align: right; margin-left: auto; } /* Pomocné */ .mb-0 { margin-bottom: 0; } .flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .center { text-align: center; } /* Tmavá karta pro neutrální (černý) akcent — neutrál se lokálně překlopí na světlý, aby text i tlačítka zůstaly čitelné (stejná logika jako dark režim). */ .demo--black { --box-fill: var(--bg-black); color: var(--text-white); --JELINEK-BLACK: hsl(0, 0%, 50%); --JELINEK-BLACK-HIGHLIGHT: hsl(0, 0%, 60%); --ON-JELINEK-BLACK: hsl(0, 0%, 5%); --text-muted1: hsl(0, 0%, 62%); --text-muted2: hsl(0, 0%, 42%); } /* Glassmorphism — průsvitná matná „skleněná" plocha (rozostří obsah za sebou) */ /* POZOR: gradientní rámeček (technika padding-box/border-box jako u panelů) tu NEFUNGUJE. Vrstva s gradientem se kreslí přes celou plochu prvku a poloprůhledná výplň nad ní ji nezakryje — místo skla vznikne jednolitá tmavá plocha. Sklo proto potřebuje obyčejný poloprůhledný rámeček; ten se navíc přizpůsobí jakékoli fotce pod sebou. */ .glassmorphism { background-color: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: 15px; -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--shadow-interactive); } /* V tmavém režimu sklo ztmavuje tmavší výplní (--glass-fill), ne filtrem. */ /* Tmavý režim řeší token --glass-fill (0,0,0/60 %), hrana zůstává stejná. */ /* Tabulky */ /* MOBILE FIRST: na úzké obrazovce se široká tabulka nesmí roztlačit stránku. Řeší to overflow-wrap: anywhere — dlouhé nedělitelné hodnoty (zápisy stínů, barev, tokenů) se smí zalomit i uvnitř slova. Bez toho má tabulka větší minimální šířku než stránka a na úzkém mobilu vodorovně přeteče (měřeno: /ui-old/rezimy.html přetékalo o 99 px při 320 px, /ui-old/radiusy-a-stiny.html o 11 px). POZOR: vlastnost neovlivňuje jen samotné zalamování, ale i výpočet min-content, a tedy i rozdělení šířek sloupců — auto layout tabulky přerozdělí sloupce i tam, kde je místa dost. Proto ji od 640 px výš (hranice mobilu, stejná jako u rozvržení výše) zase vypínáme: šířky sloupců na tabletu a monitoru tak zůstávají přesně takové, jaké byly (ověřeno porovnáním s předchozí verzí na /ui-old/radiusy-a-stiny.html, /ui-old/logo.html, /ui-old/rezimy.html a /brand/typografie.html při 621, 640, 768, 900, 1024 a 1440 px). ZVAŽOVANÁ ALTERNATIVA (varianta z brandového guidu): `display: block; overflow-x: auto` na tabulce, tedy posouvat tabulku do strany samu v sobě. Nevzali jsme ji ze dvou důvodů: (1) `display: block` na v Safari/VoiceOver odebere tabulce její sémantiku (řádky a záhlaví přestanou být řádky a záhlaví) — a tohle jsou zrovna specifikační tabulky guidu; (2) vznikne posuvná oblast bez `tabindex`, kterou nejde ovládat klávesnicí (WCAG 2.1.1) — přesně to, kvůli čemu má lišta kapitol tabindex="0". Kdyby se posouvání přesto chtělo, čistá cesta je obalit tabulku posuvným
em s tabindex="0" a role/aria ponechat tabulce. */ table.spec { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-family: var(--font-secondary); overflow-wrap: anywhere; } @media (min-width: 640px) { table.spec { overflow-wrap: normal; } } table.spec th, table.spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } table.spec th { font-weight: 700; font-size: 0.85rem; } table.spec td { font-variant-numeric: tabular-nums; } /* Tabular Lining pro čísla */ /* -------------------------------------------------------------------------- ZLOMY (mobile first) — soupis, ne pravidla. Sada zlomů celého guidu: 640 px (velké telefony / malé tablety) · 1024 px (notebook a výš) · 1440 px (velké monitory — na guidu se needituje, je to pravidlo pro e-shop). Popisuje je kapitola „Rozvržení a zlomy". Samotná pravidla tady NEJSOU. Základ souboru popisuje telefon a širší obrazovky ho přepínají v @media hned u příslušného pravidla — hlavička a lišta kapitol v sekci 5, hero v sekci 6, mřížky v sekci 6, tabulky výše. Držet je u pravidel je záměr: jinak by rozvržení hlavičky bylo popsané na dvou místech naráz a jedna z kopií by dřív nebo později zůstala pozadu. Typografická škála žádný zlom nemá — je plynulá přes clamp() (viz --step* nahoře). -------------------------------------------------------------------------- */