/* ========================================================================== TF Media — designové tokeny Jediné místo, kde se mění barva, velikost písma nebo rytmus. ========================================================================== */ :root { /* --- Podklad --------------------------------------------------------- Ne čistá černá. Teplý tmavý tón, aby seděl ke zlaté z loga. Metafora: potemnělá režie, svítí jen to, co běží. */ --ink-900: #0B0A08; /* podklad stránky */ --ink-850: #100D0A; /* jemné odsazení sekce */ --ink-800: #14110C; /* vyvýšený panel */ --ink-750: #191509; --ink-700: #1E1A13; /* vlasové linky */ --ink-600: #2C2619; /* výraznější linky */ --ink-500: #3D3524; /* --- Papír ----------------------------------------------------------- Světlé sekce fungují jako tvrdý střih ze studia na VT. */ --paper-50: #F4F1EA; --paper-100: #E9E4D8; --paper-200: #D8D1C1; --paper-300: #C2B9A4; /* --- Zlatá ----------------------------------------------------------- Vytažená přímo z loga. Používá se jako signálová barva: rozsvícená kontrolka, špička na VU metru. Ne jako dekorace. */ --gold-900: #6B4503; --gold-800: #8A5B04; /* text na papíru — 5,1:1 ✓ AA */ --gold-700: #A66B05; --gold-600: #BC7C06; /* hluboká z loga */ --gold-500: #C48715; /* jádro loga */ --gold-400: #D49F32; /* střed loga */ --gold-300: #E0B24A; /* text na tmavém — 10,0:1 ✓ AAA */ --gold-200: #EFC764; /* lesk loga */ --gold-100: #F4CF6D; /* --- Text ------------------------------------------------------------ */ --fg: #F1ECE1; /* na tmavém — 16,8:1 */ --fg-mid: #B8AF9C; /* na tmavém — 9,1:1 */ --fg-dim: #8A8271; /* na tmavém — 5,2:1 ✓ AA */ --fg-l: #1A1611; /* na papíru — 16,2:1 */ --fg-mid-l: #4E4638; /* na papíru — 8,2:1 */ --fg-dim-l: #756B58; /* na papíru — 4,7:1 ✓ AA */ /* --- Stav ------------------------------------------------------------ */ --tally: #E0B24A; /* svítí = na vysílání */ --chyba: #E8735A; /* na tmavém — 5,6:1 */ --chyba-l: #A32F16; /* na papíru — 6,1:1 */ --ok: #7FB069; /* --- Písmo ----------------------------------------------------------- Archivo — expandovaný grotesk, jako televizní titulkovka a znělka. Osu šířky (wdth 100–125) skoro nikdo nepoužívá, proto to nevypadá jako default. Newsreader — editorial patka. Mediální firma, publicistická váha, tvrdý kontrast k roztaženému grotesku. IBM Plex Mono — timecode, štítky, čísla. Jen drobný text. */ --font-display: 'Archivo', Georgia, serif; --font-text: 'Newsreader', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --wdth-display: 118; /* výchozí roztažení nadpisů */ --wdth-wide: 125; /* maximum — jen hero */ /* --- Velikosti písma ------------------------------------------------- Fluidní, 320 → 1440 px. */ --t-xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem); --t-sm: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); --t-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --t-1: clamp(1.1875rem, 1.11rem + 0.36vw, 1.4375rem); --t-2: clamp(1.4375rem, 1.29rem + 0.71vw, 2rem); --t-3: clamp(1.75rem, 1.49rem + 1.30vw, 2.75rem); --t-4: clamp(2.125rem, 1.65rem + 2.38vw, 4rem); --t-5: clamp(2.625rem, 1.72rem + 4.52vw, 6rem); --t-6: clamp(3rem, 1.09rem + 9.55vw, 10.5rem); /* hero, 856 000 */ --lh-tight: 0.92; --lh-snug: 1.12; --lh-normal: 1.55; --lh-loose: 1.7; --ls-display: -0.02em; --ls-mono: 0.08em; --ls-stitek: 0.16em; /* prostrkané technické štítky */ /* --- Rytmus ---------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --sekce-y: clamp(4rem, 2.5rem + 7.5vw, 9rem); /* svislý odstup sekcí */ /* --- Rozvržení -------------------------------------------------------- */ --sirka: 78rem; /* hlavní obsahový sloupec */ --sirka-uzka: 46rem; /* běžný text — max ~72 znaků na řádek */ --gutter: clamp(1.25rem, 0.7rem + 2.75vw, 3rem); /* Výška plovoucí pilulky i s odsazením od horní hrany. Řídí scroll-padding-top, aby kotvy nekončily pod hlavičkou. */ --hlavicka-h: 4.9rem; /* --- Linky a rohy ----------------------------------------------------- Broadcast je ostrý. Zaoblení skoro žádné. */ --linka: 1px solid var(--ink-700); --linka-vyr: 1px solid var(--ink-600); --linka-zlata: 1px solid color-mix(in srgb, var(--gold-600) 45%, transparent); --r-0: 0; --r-1: 2px; --r-2: 3px; /* Zaoblení je vyhrazené vrstveným prvkům, které leží *nad* stránkou — plovoucí hlavičce a dlaždicím. Obsah v textovém sloupci zůstává ostrý. Kdyby se zaoblilo všechno, spadne to do obyčejného dashboardu. */ --r-3: 14px; --r-4: 22px; --r-max: 999px; /* --- Vyvýšené panely -------------------------------------------------- Hloubka se dělá světlem na horní hraně a stínem pod prvkem, ne rozostřením pozadí. Žádný backdrop-filter. */ --panel: linear-gradient(180deg, var(--ink-800), var(--ink-850)); --panel-vyr: linear-gradient(180deg, #1A1610, var(--ink-800)); --hrana-svetlo: inset 0 1px 0 color-mix(in srgb, var(--gold-200) 12%, transparent); --stin-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35); --stin-2: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .45); /* Šířka plovoucí pilulky. Po odscrollování se stáhne. Sedm položek v angličtině je o poznání širších než v češtině — proto je pilulka širší, než by pro čistě český web stačilo. */ --pilulka: 76rem; --pilulka-s: 66rem; /* --- Pohyb ------------------------------------------------------------ */ --rychle: 120ms; --stredni: 260ms; --pomalu: 520ms; --lock: 2200ms; /* naladění signálu v hero */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* --- Vrstvení ---------------------------------------------------------- */ --z-plátno: 0; --z-obsah: 1; --z-postup: 25; --z-hlavicka: 30; --z-menu: 40; --z-skip: 50; } /* Vypnutý pohyb znamená vypnutý, ne zjemněný. */ @media (prefers-reduced-motion: reduce) { :root { --rychle: 0ms; --stredni: 0ms; --pomalu: 0ms; --lock: 0ms; } }