/* ============================================================ VOŠG Hellichova — vizuální identita výukových materiálů Jediný zdroj barev, typografie a rozměrů. Nikde jinde nepsat hexy natvrdo — vždy přes proměnnou odsud. Návrhový princip: ČITELNOST NA ŠPATNÉ PROJEKCI V DENNÍM SVĚTLE. Projektor neumí udělat černou — umí jen nesvítit. V osvětlené místnosti je proto tmavé pozadí šedý flek. Vše je světlé. Paleta odvozená z IBM Carbon (Apache 2.0), primární navy je vlastní barva školy dle CLAUDE.md §8. ============================================================ */ :root { /* ---------- ZÁKLAD ---------- */ --c-bg: #ffffff; /* pozadí — vždy světlé, nikdy tmavé téma */ --c-bg-alt: #f1f5f9; /* odlišená plocha — mírně do modra, ať ladí s navy */ --c-bg-sunk: #e3eaf1; /* vnořená plocha, patička */ --c-text: #161616; /* hlavní text — kontrast 18.9:1 na bílé */ --c-text-soft: #525252; /* doplňkový text — 8.0:1, NIKDY pod 16px */ --c-line: #c3ced9; /* linky a rámečky — musí být vidět z 10 m */ --c-line-soft: #dfe6ed; /* ---------- PRIMÁRNÍ (navy) ---------- */ --c-primary: #1f4e79; /* 8.6:1 na bílé — bezpečné i pro text */ --c-primary-dark: #14344f; /* 12.4:1 — nadpisy, maximální kontrast */ --c-primary-mid: #2e6da4; /* 5.3:1 — jen výplň, NE text pod 24px */ --c-primary-wash: #e8eff6; /* jemné pozadí bloku s navy textem */ --c-on-primary: #ffffff; /* text na navy výplni */ /* ---------- AKCENT (teplý) ---------- Pozor: syté oranžové mají na bílé kontrast ~3:1 → jako TEXT nikdy. --c-accent = pouze plná výplň (pruhy, značky), text na ní bílý --c-accent-tx = tmavá varianta, když je potřeba barevný TEXT */ --c-accent: #b8510e; /* 5.0:1 — výplň i text nad 20px */ --c-accent-tx: #8a3d0b; /* 7.4:1 — barevný text kdekoli */ --c-accent-wash: #fbeee5; --c-on-accent: #ffffff; /* ---------- FUNKČNÍ BLOKY ---------- Konvence repa (CLAUDE.md §1): žlutá = zadání, zelená = řešení. */ --c-task-bg: #fcf4d6; /* ZADÁNÍ / úloha / „spočítejte" */ --c-task-line: #8e6a00; --c-task-text: #452f00; --c-solve-bg: #defbe6; /* ŘEŠENÍ / výsledek */ --c-solve-line: #0e6027; --c-solve-text: #022d0d; --c-warn-bg: #fff1f1; /* POZOR / častá chyba */ --c-warn-line: #a2191f; --c-warn-text: #520408; --c-note-bg: #e8eff6; /* POZNÁMKA / kontext */ --c-note-line: #1f4e79; --c-note-text: #14344f; /* ---------- INTERAKCE (Slido, hlasování, video) ---------- */ --c-live-bg: #f4f4f4; --c-live-line: #1f4e79; /* ---------- TYPOGRAFIE ---------- Arial dle CLAUDE.md §8. Systémový font = nulová závislost, funguje offline i na školním počítači, jistá česká diakritika. */ --font: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; --font-mono: "Consolas", "Courier New", monospace; /* Váhy: nepoužívat light/thin — na projekci se ztratí. */ --w-normal: 400; --w-bold: 700; /* ---------- TYPOGRAFICKÁ ŠKÁLA PREZENTACÍ ---------- Absolutní px v měřítku slidu 1280 × 720. reveal.js celý slide proporcionálně zvětší, takže 24 px na slidu = 24 px i na plátně v poměru k ploše — nezávisle na rozlišení projektoru. TVRDÉ MINIMUM: --fs-min (24 px) pro veškerý běžný text. Jediná výjimka: --fs-label pro KRÁTKÉ VERZÁLKOVÉ TUČNÉ štítky (SITUACE, HLASOVÁNÍ, 1. SEMESTR) — velká písmena a tučný řez jsou čitelné i menší. A --fs-meta pro zápatí a číslo slidu, což student nečte. */ --fs-min: 24px; /* ⛔ pod tuto hodnotu nikdy s obsahem */ --fs-body: 25px; /* běžný text v blocích */ --fs-body-lg: 28px; /* text, který má nést váhu */ --fs-card: 24px; /* text v kartě (nejhustší místo) */ --fs-card-head:27px; /* hlavička karty */ --fs-lead: 25px; /* podtitulek pod nadpisem slidu */ --fs-h2: 42px; /* nadpis slidu */ --fs-h3: 28px; /* podnadpis uvnitř obsahu */ --fs-h1-sec: 62px; /* sekční předěl */ --fs-h1-cover: 76px; /* titulní slide */ --fs-big: 52px; /* klíčová věta přes celý slide */ --fs-label: 19px; /* ⚠️ jen VERZÁLKOVÉ TUČNÉ štítky */ --fs-meta: 16px; /* ⚠️ jen zápatí a číslo slidu */ /* ---------- TVAR ---------- Zaoblení čitelnost na projekci nesnižuje — tu drží kontrast a velikost písma. Ostré rohy naopak působí tvrdě a v kombinaci s rámečkem kolem každého prvku i nepřehledně. Škála (3 stupně + pilulka) je z Material Design 3 (Apache 2.0). Důvod, proč odjinud než paleta: IBM Carbon je záměrně hranatý, tvar tam není co půjčovat. */ --r-sm: 6px; /* štítky, pruhy grafu, drobná tlačítka */ --r-md: 12px; /* karty, bloky, řádky, obrázky */ --r-lg: 20px; /* velké plochy — panely, obrázek přes slide */ --r-pill: 999px; /* odznaky, přepínače, čísla v kolečku */ /* ---------- LINKY A PLOCHY ---------- Zásada: plocha místo rámečku. Prvek se odlišuje TÓNEM POZADÍ; rámeček se přidává jen tam, kde na sebe dvě stejně světlé plochy navazují. Dřív měl rámeček skoro každý prvek a slide z toho byl mřížkovaný. */ --r-line: 2px; /* silný rámeček — jen tam, kde nese význam */ --r-hair: 1px; /* jemná linka mezi řádky */ --r-bar: 6px; /* barevný pruh u bloku */ } /* ============================================================ TVRDÁ PRAVIDLA — nepřepisovat v jednotlivých materiálech ------------------------------------------------------------ 1. Pozadí je vždy světlé. Žádné tmavé téma, ani „jen na sekční slidy" — v denním světle zmizí. 2. Barevný text jen z --c-primary, --c-primary-dark, --c-accent-tx a textových barev bloků. Nic světlejšího. 3. Sytá barva se používá jako VÝPLŇ s bílým textem, ne jako barva písma na bílé. 4. Žádné stíny, gradienty ani průhlednost. Na špatné projekci se stín stejně neukáže — oddělení plochy musí nést TÓN, ne efekt. Zaoblení (--r-sm/md/lg) je naopak v pořádku a používá se všude; ostrý roh je výjimka, ne pravidlo. 5. Text na slidu nikdy pod --fs-min (24px). Výjimku mají jen verzálkové tučné štítky (--fs-label) a zápatí (--fs-meta). Hlídá to nástroj spolecne/identita/nastroje/kontrola-slidu.js — spouštět po každé úpravě prezentace. 6. Šedá --c-text-soft není pro nosný obsah, jen pro popisky. 7. Když se obsah nevejde, ZKRÁTÍ SE TEXT nebo rozdělí na dva slidy. Nikdy se nezmenší písmo. ============================================================ */