/* ========================================================================== Zdroj pravdy pro vzhled všech tří webů -------------------------------------------------------------------------- Platí pro viktorbenes.org i pro rozhraní Chronomap a Tempomapy (panely, karty nad mapou, tlačítka, texty). Barvy a styly DAT v mapách (škála izochron, barvy módů, porovnání, vrstvy, legenda) jsou v tokens-mapy.css a na tento soubor záměrně neodkazují. Původ hodnot: weby/web/styles.css a HTML obou map (nasazené verze 26. 9. 2026), sjednocené v kroku 3. Rozhodnutí a jejich důvody jsou v PROGRESS.md. U sjednocených škál je vždy uvedeno, na co se při napojování webů převádějí dřívější hodnoty („dřív: …“). Vzhled se mění jen tady (a v tokens-mapy.css), nikdy přímo v webech. ========================================================================== */ :root { /* ======================= BARVY ======================= */ /* ---------- Barvy značky ---------- */ --ink: #221d24; /* hlavní text */ --ink-soft: #5c5058; /* vedlejší text, popisky */ --mute: #765c6b; /* tlumený text (neaktivní volby, patička aplikací); dřív #9a7d8e (kontrast 2,8 : 1 na panelu), teď ≥ 4,5 : 1 na paper, panel i bílé */ --mute-soft: #cbb9c4; /* velmi tlumené linky a oddělovače */ --paper: #f5efe2; /* pozadí stránky */ --panel: #ecdec8; /* pozadí panelů a informačních karet */ --line: #ddccae; /* linky, okraje, oddělovače */ --navy: #1d2b4f; /* odkazy; hlavní ovládací prvky v aplikacích */ --navy-deep: #131d38; /* nadpisy, tmavá sekce, bubliny nad mapou */ --accent: #5c2a4a; /* hlavní akcent (švestková): tlačítka webu, štítky */ --accent-soft: #e4d5e3; /* světlé pozadí štítku a odznaku */ --accent-vivid: #7a4468; /* hover tlačítka, akcent na tmavém pozadí */ --text-on-accent: #fff; /* text na akcentu i na navy */ /* Dřív v mapách: --gold = --accent, --gold-soft = --accent-soft, --gold-vivid = --accent-vivid, --red (Tempomapa) = --accent. */ /* ---------- Plochy ---------- */ --surface: #fff; /* bílé karty, pole, tlačítka voleb */ --header-bg: rgba(245, 239, 226, 0.92); /* průsvitná hlavička webu */ --header-blur: 6px; /* ---------- Tmavá sekce webu (ke stažení, zvýrazněná služba) ---------- */ --on-dark-text: #eee6d6; --on-dark-heading: #fff; --on-dark-muted: #b9c0d4; /* dřív i #c7cee2 */ --on-dark-placeholder: #8a93ab; --on-dark-surface: rgba(255, 255, 255, 0.05); /* dřív 0.04 / 0.05 / 0.06 */ --on-dark-surface-strong: rgba(255, 255, 255, 0.08); /* štítek sekce */ --on-dark-border: rgba(255, 255, 255, 0.14); /* dřív 0.14 / 0.15 */ --on-dark-border-strong: rgba(255, 255, 255, 0.25); /* okraj pole formuláře */ --on-dark-error: #e56962; /* chybová hláška v tmavé sekci (stejný odstín jako --error, světlejší): 5,2 : 1 na navy-deep, 4,5 : 1 na kartě */ /* ---------- Stavové barvy ---------- */ --error: #b3261e; /* dřív i #a13a3a (správa recenzí), #b8342f (Tempomapa) */ --error-deep: #832e2e; /* hover tlačítka „Smazat“ ve správě recenzí */ --success: #097309; /* potvrzení (Tempomapa: data načtena); dřív #0ca30c (2,9 : 1 na paper), teď 5,3 : 1 */ --form-note: #5a6279; /* drobný text pod formulářem na světlém pozadí; dřív #7d859e (2,8 : 1 na panelu), teď ≥ 4,5 : 1; v tmavé sekci se místo něj používá --on-dark-muted */ --warning-bg: #fdf0e6; /* varování v aplikacích (chybí data, podklad mapy) */ --warning-text: #8a4a1c; --warning-border: #f0d5bb; --warning-code-border: #ecd9c4; /* ======================= PÍSMO ======================= */ --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-weight-regular: 400; --font-weight-semibold: 600; /* popisky, štítky v aplikacích */ --font-weight-bold: 700; /* tlačítka (web i aplikace; dřív v mapách 600) */ --font-weight-extrabold: 800; /* nadpisy webu, značka a název aplikace (dřív v mapách 700) */ /* ---------- Velikosti písma: web (kořen 16px) ---------- */ --font-size-root: 16px; --font-size-h1: clamp(2rem, 4vw, 2.7rem); --font-size-h2: clamp(1.7rem, 3vw, 2.3rem); --font-size-h3-diagram: clamp(1.2rem, 2vw, 1.4rem); --font-size-stat: 2.6rem; /* číslo v kruhu (roky praxe) */ --font-size-xl: 1.3rem; /* nadpis zvýrazněné služby */ --font-size-lg: 1.2rem; /* úvodní odstavec, nadpisy karet (dřív 1.15 / 1.2) */ --font-size-md: 1.1rem; /* nadpis formuláře a oznámení */ --font-size-body: 1.02rem; /* text stránky (dřív i 1 / 1.05) */ --font-size-text: 0.96rem; /* text karet, tlačítka, pole, menu (dřív 0.92 až 0.98) */ --font-size-small: 0.88rem; /* popover, menší tlačítka (dřív 0.85 / 0.86 / 0.88) */ --font-size-meta: 0.82rem; /* meta údaje, patička, přepínač jazyka, štítky (dřív 0.8 / 0.82) */ --font-size-note: 0.78rem; /* poznámka pod formulářem */ /* ---------- Velikosti písma: aplikace (hustý panel a karty nad mapou) ---------- Rozhraní map je záměrně menší než web (základ 0.95rem místo 1.02rem). */ --app-font-size-body: 0.95rem; /* text panelu (dřív i 0.9 / 0.92) */ --app-font-size-title: 1.05rem; /* název aplikace, hodnota prahu, krok průvodce */ --app-font-size-dialog: 1.5rem; /* nadpis úvodního průvodce (dřív i 1.2 u načítání, 1.3 na mobilu) */ --app-font-size-control: 0.82rem;/* tlačítka voleb, pole hledání (dřív 0.78 až 0.87) */ --app-font-size-hint: 0.75rem; /* nápovědy, poznámky, odznaky (dřív 0.72 až 0.78) */ --app-font-size-label: 0.68rem; /* verzálkové štítky, patička, přepínač jazyka (dřív 0.64 až 0.7) */ --app-font-size-tiny: 0.62rem; /* čísla na ose a v legendě (dřív 0.6 až 0.63) */ /* ---------- Řádkování ---------- */ --line-height-body: 1.65; /* web i aplikace */ --line-height-h1: 1.2; --line-height-h2: 1.25; --line-height-list: 1.6; /* odrážky, patička aplikací, texty průvodce */ --line-height-compact: 1.55; /* popover, poznámky v aplikacích (dřív i 1.5) */ --line-height-tight: 1.45; /* popis karty ke stažení */ --line-height-control: 1.35; /* tlačítka voleb */ --line-height-none: 1; /* ---------- Prostrkání ---------- */ --letter-spacing-heading: -0.015em; --letter-spacing-card-title: -0.01em; --letter-spacing-label: 0.14em; /* verzálky na webu (eyebrow, štítek sekce; dřív i 0.1em) */ --letter-spacing-app-label: 0.09em; /* verzálky v aplikacích (dřív 0.06 až 0.09em) */ --letter-spacing-app-small: 0.03em; /* přepínač jazyka, odznaky (dřív 0.03 až 0.05em) */ /* ======================= MEZERY ======================= */ /* Škála po 4px. Dřívější hodnoty se při napojování převedou na nejbližší krok (při shodné vzdálenosti na vyšší): 2 → 4, 5 → 4, 6 → 8, 7 → 8, 9 → 8, 10 → 12, 11 → 12, 13 → 12, 14 → 16, 15 → 16, 18 → 20, 22 → 24, 26 → 28, 30 → 32, 34 → 32, 36 → 40, 38 → 40, 52 → 56, 76 → 80, 100 → 96. Výjimky jsou pozice karet nad mapou (viz níže). */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; /* Mezery podle role */ --gutter: var(--space-24); /* boční okraj obsahu webu */ --section-padding-top: var(--space-80); /* dřív 76px */ --section-padding-bottom: var(--space-96); /* dřív 100px */ --hero-padding-top: var(--space-96); --hero-padding-bottom: var(--space-80); --footer-margin-top: var(--space-96); --grid-gap: var(--space-16); --grid-gap-lg: var(--space-24); --card-padding: var(--space-28); /* karty webu (dřív 26 až 34px) */ --app-section-padding: var(--space-16) var(--space-20); /* sekce panelu aplikace */ --app-card-padding: var(--space-12) var(--space-16); /* karty nad mapou (dřív 9–11 × 12–22px) */ --app-control-gap: var(--space-8); /* mezera mezi tlačítky voleb (dřív 7px) */ --app-map-inset: var(--space-12); /* odstup karet od okraje mapy */ /* ======================= ZAOBLENÍ ======================= */ --radius-2xs: 2px; /* barevné vzorky a pruhy (legenda) */ --radius-xs: 6px; /* náhled PDF, zavírací křížek, kód (dřív i 4px) */ --radius-control: 8px; /* tlačítka voleb, pole a tlačítka v panelu aplikací, bubliny (dřív i 7px) */ --radius-sm: 10px; /* pole a tlačítka formulářů webu (dřív i 3px u recenzí a kontaktu), snímek průvodce (dřív 12px), varování */ --radius-md: 14px; /* karty, tlačítka webu, karty nad mapou, úvodní průvodce (dřív 16px) */ --radius-lg: 22px; /* fotka */ --radius-pill: 999px; /* pilulky: tlačítko v hlavičce, štítky, odznaky (dřív v mapách 99px) */ --radius-round: 50%; /* tečky */ /* ======================= OKRAJE A STÍNY ======================= */ --border: 1px solid var(--line); /* Všechny stíny mají barvu navy-deep; liší se jen tvarem podle účelu. */ --shadow-float: 0 18px 40px -20px rgba(19, 29, 56, 0.35); /* web: popover, fotka */ --shadow-menu: 0 12px 24px -16px rgba(19, 29, 56, 0.25); /* web: mobilní menu */ --shadow-card: 0 3px 16px rgba(19, 29, 56, 0.16); /* aplikace: karty nad mapou, varování */ --shadow-tooltip: 0 4px 18px rgba(19, 29, 56, 0.28); /* aplikace: bubliny nad mapou */ --shadow-side-toggle: 2px 0 14px rgba(19, 29, 56, 0.28); /* aplikace: tlačítko panelu */ --shadow-dialog: 0 24px 64px rgba(19, 29, 56, 0.3); /* aplikace: úvodní průvodce, načítání */ /* ======================= PRŮSVITNÉ PLOCHY APLIKACÍ ======================= */ --app-card-bg: rgba(245, 239, 226, 0.95); /* karty nad mapou, legenda */ --app-card-blur: 4px; --app-dialog-bg: rgba(245, 239, 226, 0.97); /* úvodní průvodce, načítání, spodní lišta průvodce (dřív i 0.98) */ --app-backdrop: rgba(19, 29, 56, 0.42); /* clona za dialogem */ --app-backdrop-blur: 7px; --app-tooltip-bg: var(--navy-deep); /* bubliny nad mapou */ --app-tooltip-text: #fff; --app-tooltip-padding: var(--space-8) var(--space-12); /* dřív 7×11 (Chronomapy) a 5×8 (Tempomapa) */ /* ======================= ROZVRŽENÍ ======================= */ --max: 1080px; /* šířka obsahu webu */ --width-heading: 780px; /* hlavní nadpis, diagram */ --width-notice: 720px; --width-text: 640px; /* perex, hlavička sekce, formulář recenze, úvodní průvodce aplikací */ --width-caption: 560px; --width-downloads: 480px; --width-popover: 320px; --width-popover-apps: 620px; --width-case-meta: 200px; --app-side-width: 352px; /* boční panel aplikací */ --app-right-card-width: 288px;/* karta Odkud a vzhled */ --app-reach-card-width: 272px;/* karta Dosah (Tempomapa dřív 250px) */ --touch-target: 44px; /* minimální dotyková plocha na mobilu */ --logo-height: 28px; /* logo v hlavičce webu (na telefonu pod 520px skryté) */ /* ---------- Zlomy ---------- CSS proměnné nejdou použít v @media; hodnoty jsou tu jako závazný přehled. */ --breakpoint-tablet: 860px; /* web: jeden sloupec */ --breakpoint-app: 900px; /* aplikace: mobilní rozvržení (dřív Chronomapy 760px) */ --breakpoint-app-tablet: 700px; /* aplikace: Dosah a legenda vedle sebe (700–900px) */ --breakpoint-phone: 560px; /* aplikace: průvodce přes celou obrazovku */ --breakpoint-phone-web: 520px;/* web: karty aplikací pod sebou */ --breakpoint-phone-sm: 480px; /* web: karty ke stažení pod sebou */ /* ======================= POHYB A VRSTVY ======================= */ --transition-fast: 0.13s; /* tlačítka voleb v aplikacích */ --transition-color: 0.15s; /* odkazy a hover */ --transition-layout: 0.2s; /* menu, sbalení panelu */ --z-header: 50; /* web */ --z-popover: 60; /* web */ /* Vrstvy aplikací se liší podle knihovny mapy (MapLibre v Chronomapách 3–60, Leaflet v Tempomapě 1150–2100) a zůstávají v kódu každé aplikace. */ /* ======================= DEKORACE WEBU (izochronní linky) ======================= */ --deco-stroke-width: 1.4; --deco-stroke-width-ring: 1.6; --deco-stroke-opacity-divider: 0.55; /* Motiv v pozadí sekce ke stažení je data URI s pevnými barvami #2a3a63, #40355a a #7a4468; na proměnné odkazovat nemůže. */ }