# Návrh A „Signál“: brand a design manuál Podklad pro implementaci webu tootevru.cz v Laravelu + Tailwind v4. Ukázka: `design/navrh-a-signal/*.html`, zdrojové šablony v `_src/`, vizuál v `assets/css/style.css`. --- ## 1. Koncept **Design read:** lokální pohotovostní služba pro lidi ve stresu, kteří web otevírají na telefonu. Vizuální jazyk orientačního systému (letiště, nádraží, doprava): jasná hierarchie, velká čísla, jedna signální barva. Nativní CSS tokeny, Geist + Geist Mono, zdrženlivý pohyb. **Myšlenka „Signál“:** člověk před zamčenými dveřmi nečte, skenuje. Web se proto chová jako cedule na nástupišti: nahoře stav (co platí teď), pak jediná výrazná akce (zavolat), pak fakta v číslech. Oranžová z loga je „signální světlo“: svítí jen tam, kde se dá něco udělat (volat) nebo kde se něco děje právě teď (aktuální čas, aktivní stav). Všechno ostatní je inkoust a šedá. **Tři pravidla, ze kterých vychází vše ostatní:** 1. Oranžová = akce nebo živý stav. Nikdy dekorace. 2. Čísla, na kterých záleží (telefon, ceny, časy, data), jsou v Geist Mono. Dispečerský pocit a rychlé čtení. 3. Linky místo stínů. Téměř ostré rohy (4 a 8 px). Žádné pilulky, žádné štítky přes obrázky. ### Nastavení (dials) | Dial | Hodnota | Proč | |---|---|---| | DESIGN_VARIANCE | 5 | asymetrické mřížky (7:5), ale klidné, čitelné, bez experimentů | | MOTION_INTENSITY | 3 | skoro statický web, pohyb jen jako zpětná vazba (hover, přepnutí záložky, posun ručičky) | | VISUAL_DENSITY | 4 | běžná hustota webové aplikace, sekce 56 až 88 px, žádné galerijní prázdno | --- ## 2. Logo | Varianta | Soubor | Použití | |---|---|---| | Bez subtextu, tmavé | `logo-tootevru-bez-subtextu.png` (276 × 72, 2×) | hlavička a patička na světlém podkladu | | Bez subtextu, světlé | `logo-tootevru-bez-subtextu-light.png` | tmavý režim, tmavé plochy | | Se subtextem „zámečnický servis“ | `logo-tootevru.png`, `-light.png` | tiskoviny, OG obrázek, vizitka; na webu se nepoužívá (subtext je při 36 px nečitelný) | - **Barvy loga:** inkoust `#231F20`, oranžový prstenec `#EA6F22`. Barvy loga se neupravují, tokeny webu (`#1D1B1C`, `#EA6F22`) jsou s nimi opticky shodné. - **Velikost:** hlavička 36 px výška (desktop), 32 px (tablet), 28 px (mobil). Patička 32 px. Minimum 24 px výšky (pod tím se ztrácí háček v „ř“). - **Ochranná zóna:** kolem loga volné místo minimálně ve velikosti prstence „o“ (cca 50 % výšky loga). V hlavičce je to zajištěno výškou 64 px a paddingem. - **Tmavý podklad:** vždy světlá varianta přes ``. Logo nikdy neinvertovat filtrem. - **Zakázáno:** deformace, stín, obrys, jiné barvy, logo na fotografii bez podkladu, animace prstence. - **Doporučení:** nechat logo převést do vektoru (SVG, 2 cesty + prstenec jako ``). Výhody: ostré na všech displejích, přebarvení tokenem (`currentColor` pro text, `var(--c-accent)` pro prstenec), menší velikost, možnost použít prstenec samostatně jako favicon. Do té doby PNG ve 2× rozlišení. - **Favicon:** samotný oranžový prstenec na průhledném podkladu (SVG favicon + 180 px apple-touch-icon s inkoustovým pozadím). --- ## 3. Barvy ### Tokeny | Token | Světlý | Tmavý | Použití | |---|---|---|---| | `--c-bg` | `#F3F3F1` | `#141313` | pozadí stránky | | `--c-surface` | `#FCFCFB` | `#1C1B1A` | panely, dlaždice, karty recenzí, pole formuláře, patička | | `--c-ink` | `#1D1B1C` | `#F1EFEC` | text, ikony, linky piktogramů, oblouk ciferníku, fokus | | `--c-muted` | `#5C5A58` | `#A19E9A` | doplňkový text, popisky, legendy | | `--c-line` | `#DDDBD7` | `#2E2C2A` | vlasové linky, ohraničení panelů (dekorativní) | | `--c-line-strong` | `#827F7B` | `#75726D` | ohraničení polí formuláře a ghost tlačítek (musí mít 3:1) | | `--c-accent` | `#EA6F22` | `#F07B30` | výplň tlačítka Volat, prstenec, ručička, aktivní podtržení, živá tečka | | `--c-accent-hover` | `#D9621A` | `#F48F4E` | hover tlačítka Volat | | `--c-on-accent` | `#1D1B1C` | `#141313` | text na oranžové | | `--c-accent-text` | `#B24C12` | `#F07B30` | oranžový text (jen výjimečně, obrys okresů v mapě) | | `--c-accent-soft` | accent 9 % v bg (`#F2E7DE`) | `#281C16` | tónovaná dlaždice, akutní banner, vybraná volba formuláře | | `--c-danger` | `#B3261E` | `#FF8A7A` | chybové hlášky a rámeček chybného pole | | `--wk-50` | ink 28 % v surface | ink 26 % | mapa příplatků +50 % | | `--wk-100` | ink 72 % v surface | ink 70 % | mapa příplatků +100 % | ### Ověřené kontrasty (WCAG 2.2) | Dvojice | Světlý | Tmavý | Výsledek | |---|---|---|---| | ink na bg | 15,42:1 | 16,16:1 | AAA | | muted na bg | 6,18:1 | 6,95:1 | AA (i malý text) | | muted na surface | 6,69:1 | 6,45:1 | AA | | muted na accent-soft | 5,64:1 | 6,21:1 | AA | | on-accent na accent (tlačítko Volat) | 5,54:1 | 6,70:1 | AA | | on-accent na accent-hover | 4,66:1 | 7,85:1 | AA | | accent-text na bg | 4,80:1 | 6,70:1 | AA | | danger na surface | 6,37:1 | 7,51:1 | AA | | line-strong na surface (ohraničení polí) | 3,88:1 | 3,59:1 | splňuje 3:1 pro prvky UI | | **bílá na #EA6F22** | 3,09:1 | | **nepoužívat**, proto tmavý text na oranžové | `--c-line` (1,35:1) je čistě dekorativní dělicí linka. Pole formuláře proto mají `--c-line-strong`. ### Pravidla - Oranžová se objevuje jen jako: výplň tlačítka Volat (a mobilní lišty), prstenec v logu, ciferníku a piktogramech, ručička ciferníku, buňka „teď“ v mapě příplatků, živá tečka stavu, podtržení aktivní položky menu a záložky, podtržení odkazů, vybraná volba formuláře. - Oranžový text na světlém pozadí jen výjimečně a vždy `--c-accent-text`, nikdy `--c-accent`. - Žádné přechody, žádné neonové záře, žádná čistá černá ani bílá. - Tmavý režim je plnohodnotný, ne invertovaný: tokeny se přepnou v `@media (prefers-color-scheme: dark)`. --- ## 4. Typografie **Rodiny:** Geist (300 až 800, variabilní) pro UI a nadpisy, Geist Mono (400 až 600) pro čísla. V produkci self-host přes Fontsource nebo `@font-face` (latin + latin-ext kvůli češtině), `font-display: swap`, preload jen Geist 400 a 650. ### Škála | Role | Velikost (mobil až desktop) | Řez | Řádkování | Prostrkání | |---|---|---|---|---| | Display (H1 domů) | 34 až 58 px, `clamp(2.125rem, 1.45rem + 2.7vw, 3.625rem)` | 650 | 1,04 | -0,035em | | H1 podstránky | 34 až 56 px, `clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem)` | 650 | 1,04 | -0,032em | | H2 sekce | 26 až 38 px, `clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem)` | 650 | 1,08 | -0,028em | | H3 / titulek dlaždice | 18 až 22 px, `clamp(1.125rem, 1.05rem + .35vw, 1.375rem)` | 650 | 1,2 | -0,015em | | Perex (lead) | 18 px / 1.125rem | 400 | 1,55 | 0 | | Text | 16 px / 1rem | 400 | 1,6 | 0 | | Malý text | 14 px / .875rem | 400 až 500 | 1,5 | 0 | | Mikro (horní lišta, legendy) | 12 až 13 px | 500 mono | 1,3 | -0,02em | | Velké číslo (fakta) | 56 až 104 px, mono | 500 | 0,92 | -0,05em | | Telefon Kontakt | 40 až 92 px, mono | 500 | 1 | -0,05em | | Číslo v tlačítku Volat XL | 22 px, mono | 600 | 1 | -0,02em | ### Pravidla - Nadpisy `text-wrap: balance`, odstavce `text-wrap: pretty`, max. šířka textu 56 až 68 znaků. - Zdůraznění ve stejné rodině: tučněji nebo barvou `--c-muted` (H1 na úvodu: první část inkoustem, zbytek šedě). Žádná kurzíva v nadpisech, žádný serif. - Čeština: nezlomitelná mezera za jednopísmennými předložkami a spojkami (v, k, s, z, o, u, a, i), uvnitř čísel, cen a telefonu. Podrobně v `COPYWRITING.md`. - **Číslice:** vše, co má číselnou hodnotu pro rozhodnutí (telefon, cena, čas, datum, hodnocení, IČ), sází třída `.num`: Geist Mono + `font-variant-numeric: tabular-nums`. Rozsahy: mono jen časy, spojka „až“ zůstává v Geistu (`8:00 až 17:00`). Ve štítcích legend může být mono celý řádek. --- ## 5. Mřížka a spacing - **Obal:** max. šířka obsahu 1240 px, boční okraj `clamp(16px, 4vw, 40px)`. - **Mřížka:** na desktopu dvousloupcová asymetrie 7:5 (hero, služby, fakta, působnost, ceník, kontakt), O mně 5:7. Pod 900 px vše do jednoho sloupce, pořadí podle důležitosti (text a akce před ilustrací). - **Spacing škála (4px základ):** 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80. - **Sekce:** `clamp(56px, 6.5vw, 88px)` nahoře i dole. Sekce se oddělují vlasovou linkou `border-top` (ne střídáním pozadí). - **Hlavička:** 64 px desktop, 60 px mobil. Horní lišta 40 px. --- ## 6. Rádiusy, linky, stíny | Token | Hodnota | Kde | |---|---|---| | `--radius-sm` | 4 px | pole formuláře, malé prvky, segment záložky, lupa v galerii | | `--radius-md` | 8 px | dlaždice, panely, karty recenzí, fotky, cookie lišta, lightbox tlačítka | | `--radius-btn` | 8 px | všechna tlačítka | | 0 | ostré | buňky mapy příplatků, mobilní akční lišta (přes celou šířku) | | 50 % | kruh | jen tam, kde je kruh významem: živá tečka, zastávky milníků, znak vybrané volby (prstenec) | **Pilulky se nepoužívají.** Stíny také ne, s jedinou výjimkou: hlavička po odscrollování (`.is-scrolled`) dostane jemný stín tónovaný inkoustem (`0 12px 24px -18px`). Vše ostatní drží vlasová linka 1 px `--c-line`. --- ## 7. Ikony - **Phosphor Icons 2.1.2**, váha Regular pro UI, Fill jen pro telefon v tlačítku Volat a hvězdy hodnocení. - Velikost 1,15 až 1,35 násobek velikosti písma vedle; v tlačítkách `1.25em`. - Ikona vždy s `aria-hidden="true"`, význam nese text nebo `aria-label` rodiče. - Použité: `phone`, `chat-text`, `envelope-simple`, `map-pin`, `list`, `x`, `arrow-right`, `arrow-up-right`, `arrow-left`, `star`, `magnifying-glass-plus`, `address-book`, `check-circle`, `clock`, `phone-call`, `warning`, `caret-down`, `info`, `receipt`, `shield-check`, `navigation-arrow`, `wrench`, `lock-key`, `key`, `keyhole`, `vault`, `dots-three-outline`. - Ruční SVG ikony se nekreslí. Ruční jsou jen ilustrace (piktogramy), viz níže. --- ## 8. Ilustrace: piktogramy s prstencem Styl dopravních piktogramů: geometrická liniová kresba, mřížka 96 × 96 px, linka 2 px, čtvercové konce (`stroke-linecap: square`), ostré spoje (`stroke-linejoin: miter`), bez výplní. Každý piktogram má **právě jeden oranžový prstenec** odvozený z loga (kroužek klíče, vložka zámku, číselník trezoru). | Soubor | Motiv | Prstenec | Kde | |---|---|---|---| | `picto-dvere` | dveře se zárubní, klika, klíč v zámku | hlava klíče | úvod (velká dlaždice), ceník | | `picto-auto` | auto z boku + klíč | hlava klíče | úvod, ceník | | `picto-klic` | klíč zlomený na dvě části | hlava klíče | úvod | | `picto-trezor` | trezor s dvířky a nožkami | číselník | ceník | | `picto-montaz` | cylindrická vložka + šroubovák | rotor vložky | poptávka | **Pravidla:** - Inline SVG (partialy `_src/partials/picto-*.html`), barva linek `currentColor`, prstenec `var(--c-accent)`: automaticky funguje tmavý režim. - Tloušťka čáry se přepočítává podle zobrazené velikosti (`--picto-stroke`, `--picto-ring`), aby vykreslená linka měla vždy cca 2 px a prstenec 5 až 6 px. - Samostatné soubory pro jiné použití: `assets/img/illustrations/picto-*.svg`. - Nové piktogramy (např. kancelář, nábytek, SGHK): stejná mřížka, max. 8 tahů, jeden prstenec, žádné stínování, žádné postavičky ani obličeje. --- ## 9. Fotografie - Dnes k dispozici: `ondrej-baly.jpg` (dovolenková fotka z hor), `otevirani-auta.jpg` (ruce u zámku auta), naskenované dokumenty se začerněnými osobními údaji. - **Směr:** dokumentární, denní světlo, bez filtrů a bez stock fotek. Ruce při práci, nářadí, skutečné dveře a auta z regionu. - **Co nafotit:** (1) portrét Ondřeje v pracovním oblečení u dveří, na výšku 4:5 i na šířku 3:2; (2) detail rukou při otevírání bytových dveří; (3) auto (dodávka) s nářadím, bez SPZ; (4) sada cylindrických vložek a klíčů na neutrálním podkladu pro poptávku. - Formát WebP + JPG fallback, miniatury 600 px, velké 1200 až 1600 px, vždy `width`/`height` kvůli CLS. - Žádné štítky, ceny ani popisky přes fotky. Popisek vždy pod obrázkem. --- ## 10. Komponenty ### Horní lišta (`.topbar`) Světlá, 40 px, Geist Mono 12 px, vlasová linka dole. Vlevo působnost s ikonou špendlíku, vpravo e-mail a telefon. Pod 720 px se zkrátí text působnosti („Jablonecko, Semilsko, Liberecko“) a e-mail s telefonem jsou ikonová tlačítka 40 × 40 px s přístupným názvem. Hover: podtržení oranžovou. ### Hlavička (`.site-header`) Logo vlevo, menu, tlačítko Volat. Na desktopu (≥ 768 px) sticky, po odscrollování dostane `.is-scrolled` (stín). Na mobilu není sticky, protože tam je sticky spodní lišta. Menu na desktopu od 1024 px: odkazy 15 px/500, aktivní stránka `aria-current="page"` a oranžová linka 2 px pod odkazem, hover šedá linka. Pod 1024 px hamburger 44 × 44 px a rozbalovací panel přes celou šířku (velké odkazy 22 px, aktivní s oranžovým pruhem vlevo, pod nimi provozní doba a e-mail). ### Tlačítko Volat (`.btn--call`) Jediná oranžová výplň na webu. Ikona telefonu (Fill) + „730 915 828“ v Geist Mono 600. Varianty: základní 48 px, hlavička 44 px, XL 64 px (hero, závěr sekce, akutní banner). Na mobilu XL přes celou šířku. Stavy: hover `--c-accent-hover`; active posun o 1 px dolů; focus obrys 2 px `--c-ink` s odsazením 3 px; disabled se nepoužívá (volat jde vždy). Přístupnost: `aria-label="Zavolat na 730 915 828"` (obsahuje viditelný text). ### Ostatní tlačítka - **Ghost** (`.btn--ghost`): průhledné, rámeček `--c-line-strong`, text ink. Hover: pozadí surface, rámeček ink. Pro „Poslat poptávku“, „SMS“, „Uložit do telefonu“, „Ohodnotit na …“. - **Odeslat** (`.btn--submit`): plné inkoustové tlačítko, text bg. Primární akce formuláře, záměrně ne oranžové (oranžová = volat). - **Disabled:** pozadí `--c-line`, text muted, kurzor not-allowed (šipky pásu recenzí na konci: průhlednost 35 %). ### Dlaždice služeb (`.tile`) Surface, rámeček line, rádius 8 px, padding 20 až 28 px. Piktogram, titulek H3, cena mono. Celá dlaždice klikací (roztažený odkaz v titulku). Jedna dlaždice tónovaná `--c-accent-soft` pro rytmus. Hover: rámeček ink, šipka vpravo nahoře se posune o 3 px. Focus: obrys celé dlaždice (`:has(a:focus-visible)`). ### Seznam dalších služeb (`.more`) Dva sloupce bez linek pod řádky, řádek 52 px: název, cena mono muted, šipka. Hover: pozadí surface. Jedna linka nad celou skupinou. ### Pás faktů (`.facts`) Bez karet: horní a dolní linka, jeden velký fakt (foto 4:5 + „2019“ mono 104 px) a dva menší pod sebou oddělené linkou. ### Recenze Segmentový přepínač Google | Seznam (`role="tablist"`, aktivní segment pozadí bg + oranžová linka), souhrn (hodnota mono, hvězdy ink, počet), vodorovný pás karet se scroll-snap. Karta: hvězdy, text max. 3 řádky (`line-clamp`), jméno, zdroj a datum mono. Šipky 44 px od 720 px výš, na mobilu se posouvá prstem. CTA „Ohodnotit na Google“ / „Ohodnotit na Seznamu“ a odkaz na všechny recenze se mění se záložkou (`data-tab-show`). ### Formulář - Popisek nad polem (600, 15 px), nepovinná pole označená „(nepovinné)“ šedě, nahoře věta „Všechna pole jsou povinná, pokud není uvedeno jinak.“ - Pole 50 px, surface, rámeček line-strong, rádius 4 px. Hover: rámeček ink. Focus: obrys 2 px ink. Chyba: rámeček danger (1 px + vnitřní 1 px), pod polem text danger s vykřičníkem, `aria-invalid`, `aria-describedby`. Disabled: pozadí bg, text muted. - Volba služby: karty 64 px ve dvou sloupcích, ikona Phosphor, znak volby vpravo. Vybraná: rámeček ink, pozadí accent-soft, znak se změní na oranžový prstenec. Chyba skupiny: rámečky danger. - Výběr dne: sdílené čipy `.date-chip` (14 dní + Jiný den), číslo dne mono, víkend tučně, vybraný čip oranžový s tmavým textem. - Stav úspěchu: panel s ikonou, nadpisem „Poptávka odeslána“, dalším krokem a tlačítkem Volat, dostane fokus. ### Mapa působnosti Leaflet v rámečku (linka, rádius 8 px), výška 320 až 500 px. Okresy oranžovou výplní 12 až 16 % a obrysem `--c-accent-text`, základna Velké Hamry jako prstenec. Podklad odbarvený do šedé (v tmavém režimu tmavě šedý). Ovládání zoomu ve stylu návrhu (surface, linka, 4 px). Vedle mapy vždy textový seznam obcí. ### Patička Surface, 5 sloupců na desktopu (značka + tlačítko Volat, Kontakt, Působnost, Stránky, Profily), na mobilu značka přes celou šířku a sloupce 2 × 2. Spodní řádek: copyright, „Nastavení cookies“ (tlačítko), „Přihlášení“ (`/admin`). Pod patičkou na střed „Web vytvořil Ing. Zdeněk Hejzlar“. ### Cookie lišta Sdílená konfigurace orestbida/cookieconsent, vzhled z tokenů (surface, ink, oranžová tlačítka s tmavým textem, rádius 8 px). Na mobilu je box posunutý nad spodní akční lištu, aby šlo volat i před rozhodnutím o cookies. ### Lightbox Sdílený ``: vždy tmavé pozadí (i ve světlém režimu), tlačítka 48 px se zaoblením 8 px (ne kruhy), počítadlo mono. Náhledy v galerii mají lupu vpravo dole (na hover, na dotykových zařízeních trvale). ### Mobilní akční lišta (`.callbar`) Fixně dole přes celou šířku pod 768 px: 2/3 oranžové „730 915 828“, 1/3 „SMS“. Výška 60 px + safe area. Podrobně v `UNIQUE-ELEMENTS.md`. --- ## 11. Pohyb | Co | Jak | Proč | |---|---|---| | Hover tlačítek, dlaždic, odkazů | barva 150 ms, šipka posun 3 px za 200 ms | zpětná vazba, co je klikací | | Stisk tlačítka | `translateY(1px)` | fyzický pocit stisku | | Stín hlavičky | 200 ms při `.is-scrolled` | ukazuje, že hlavička „plave“ nad obsahem | | Ručička ciferníku | `transition: transform .8s` při aktualizaci (co 30 s) | stavová změna, ne dekorace | | Přepnutí záložky recenzí | fade 220 ms | návaznost obsahu | | Menu na mobilu | fade + posun 6 px za 180 ms | kde se panel vzal | | FAQ | otočení šipky 200 ms | stav otevřeno / zavřeno | Žádné animace při načtení, žádné scroll reveal efekty, žádné smyčky. Křivka `cubic-bezier(.2, .7, .2, 1)`. Při `prefers-reduced-motion: reduce` se všechny přechody a animace zkrátí na 0,01 ms, plynulé scrollování se vypne. --- ## 12. Responzivita | Breakpoint | Co se mění | |---|---| | < 480 px | XL tlačítka přes celou šířku, ghost XL 56 px, recenze 88 % šířky | | 480 px | ciferník 200 px vedle legendy, volby formuláře ve dvou sloupcích | | 560 px | jméno + příjmení, e-mail + telefon vedle sebe | | 640 px | ciferník 250 px (tablet) | | 720 px | horní lišta s plným textem, seznam dalších služeb ve 2 sloupcích, šipky u recenzí | | 768 px | sticky hlavička, konec mobilní akční lišty, dlaždice služeb 7:5 | | 900 px | dvousloupcové sekce (hero, fakta, působnost, ceník, O mně, kontakt), ciferník vpravo v hero, milníky vodorovně | | 1024 px | desktopové menu, formulář + boční panel, sticky obsah u Ochrany osobních údajů | Obsah nikdy neteče do stran: dlouhé tabulky mají vlastní vodorovný posun, pás recenzí a galerie dokumentů na mobilu scroll-snap. Ověřeno na 375 px. --- ## 13. Tmavý režim - Automaticky podle `prefers-color-scheme`, žádný přepínač (web je jednoúčelový, systémové nastavení stačí). - Přepínají se jen tokeny. Logo přes ``, piktogramy a ciferník přes `currentColor` a proměnné, mapa dostane tmavý podklad (`data-tiles="dark"` nastaví `main.js`). - Oranžová je v tmavém režimu o stupeň světlejší (`#F07B30`), aby měla stejnou sílu signálu. - Tónované plochy (`accent-soft`) jsou v tmavém režimu teplá tmavá hnědá, ne oranžová. --- ## 14. Přístupnost - Kontrasty dle tabulky výše, AA všude, AAA u hlavního textu. - Viditelný fokus: obrys 2 px `--c-ink`, odsazení 3 px, na všech interaktivních prvcích. - Dotykové cíle min. 44 × 44 px (menu, tlačítka, odkazy v patičce a seznamech, šipky, přepínač záložek; horní lišta 40 px s ekvivalentem v hlavičce). - Odkaz „Přeskočit na obsah“, landmarky `header`, `nav`, `main`, `footer`, jeden H1 na stránku, `aria-current` v menu. - Ciferník a mapa příplatků mají textovou alternativu (legenda, `desc`, věta „Teď je …“). - Formulář: popisky nad poli, chybové texty česky pod polem, `aria-invalid`, `aria-describedby`, `fieldset` + `legend` pro skupiny. - `min-height: 100dvh`, nikdy `100vh`. --- ## 15. Tailwind v4: `@theme` ```css @import "tailwindcss"; @theme { /* barvy (světlý režim) */ --color-bg: #F3F3F1; --color-surface: #FCFCFB; --color-ink: #1D1B1C; --color-muted: #5C5A58; --color-line: #DDDBD7; --color-line-strong: #827F7B; --color-accent: #EA6F22; --color-accent-hover: #D9621A; --color-on-accent: #1D1B1C; --color-accent-text: #B24C12; --color-accent-soft: color-mix(in oklab, var(--color-accent) 9%, var(--color-bg)); --color-danger: #B3261E; --color-wk-50: color-mix(in oklab, var(--color-ink) 28%, var(--color-surface)); --color-wk-100: color-mix(in oklab, var(--color-ink) 72%, var(--color-surface)); /* písmo */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --text-display: clamp(2.125rem, 1.45rem + 2.7vw, 3.625rem); --text-display--line-height: 1.04; --text-display--letter-spacing: -0.035em; --text-display--font-weight: 650; --text-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem); --text-h1--line-height: 1.04; --text-h1--letter-spacing: -0.032em; --text-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem); --text-h2--line-height: 1.08; --text-h2--letter-spacing: -0.028em; --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --text-h3--line-height: 1.2; --text-h3--letter-spacing: -0.015em; --text-lead: 1.125rem; --text-lead--line-height: 1.55; --text-figure: clamp(3.5rem, 2.2rem + 5vw, 6.5rem); --text-figure--line-height: 0.92; --text-figure--letter-spacing: -0.05em; --font-weight-heading: 650; /* tvary */ --radius-sm: 4px; --radius-md: 8px; --radius-btn: 8px; /* breakpointy: výchozí sm/md/lg/xl zůstávají, přidané xs a split */ --breakpoint-xs: 30rem; /* 480 */ --breakpoint-split: 56.25rem; /* 900: dvousloupcové sekce */ /* pohyb a stín */ --ease-signal: cubic-bezier(0.2, 0.7, 0.2, 1); --shadow-header: 0 1px 0 var(--color-line), 0 12px 24px -18px color-mix(in oklab, var(--color-ink) 45%, transparent); --container-wrap: 77.5rem; /* 1240 */ } @layer base { @media (prefers-color-scheme: dark) { :root { --color-bg: #141313; --color-surface: #1C1B1A; --color-ink: #F1EFEC; --color-muted: #A19E9A; --color-line: #2E2C2A; --color-line-strong: #75726D; --color-accent: #F07B30; --color-accent-hover: #F48F4E; --color-on-accent: #141313; --color-accent-text: #F07B30; --color-danger: #FF8A7A; --color-wk-50: color-mix(in oklab, var(--color-ink) 26%, var(--color-surface)); --color-wk-100: color-mix(in oklab, var(--color-ink) 70%, var(--color-surface)); --shadow-header: 0 1px 0 var(--color-line), 0 12px 28px -16px rgb(0 0 0 / 0.7); } } /* aliasy pro sdílené komponenty (lightbox, date-chip, mapa, cookie lišta) */ :root { --c-bg: var(--color-bg); --c-surface: var(--color-surface); --c-ink: var(--color-ink); --c-muted: var(--color-muted); --c-line: var(--color-line); --c-accent: var(--color-accent); --c-on-accent: var(--color-on-accent); --font-body: var(--font-sans); --font-display: var(--font-sans); --map-area-fill: var(--color-accent); --map-area-stroke: var(--color-accent-text); --map-area-opacity: 0.12; --map-base: var(--color-accent); --map-town: var(--color-ink); --map-label: var(--color-ink); --map-halo: var(--color-surface); } body { @apply bg-bg text-ink font-sans antialiased; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { @apply outline-2 outline-offset-3 outline-ink; } } @utility num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; } ``` Příklad tlačítka Volat v Blade: ```blade 730 915 828 ``` --- ## 16. Dělat / nedělat | Dělat | Nedělat | |---|---| | Oranžová jen na volání a živý stav | Oranžové nadpisy, pozadí sekcí, ikony „pro ozdobu“ | | Telefon všude stejně: ikona + „730 915 828“ mono | Různé popisky („Zavolejte nám“, „Kontaktujte mě“, „Volat teď“) | | Čísla v Geist Mono, tabulkové číslice | Ceny v proporcionálním písmu, poskakující sloupce | | Vlasová linka, prázdné místo | Stíny pod kartami, rámečky pod každým řádkem | | Rádius 4 nebo 8 px | Pilulky, kulatá tlačítka, mix tvarů | | Piktogram s jedním prstencem | Clip-art, postavičky, víc barev, stínování | | Sekce oddělené linkou ve stejném tématu | Tmavý pruh uprostřed světlé stránky | | Věcný text v 1. osobě | Superlativy, emoji, štítky „TOP“, „NOVÉ“ | | Textová alternativa ke každé grafice | Informace jen v barvě nebo jen v obrázku |