# Návrh C „Z Jizerek“: brand a design manuál

Podklad pro implementaci webu tootevru.cz v Laravelu (Blade) a Tailwindu v4. Ukázka: `design/navrh-c-z-jizerek/*.html`, zdroje v `_src/`, styly v `assets/css/style.css`.

---

## 1. Koncept a design read

**Design read:** osobní web místního řemeslníka pro lidi z Jablonecka, Semilska a Liberecka, v čistém, lidském a ilustrovaném místním jazyce (skutečný člověk z Jizerských hor, kterému můžete zavolat), postavený na nativním CSS, písmech Bricolage Grotesque a Figtree a na jemném pohybu. Minimalistický a krizově jasný: tlačítko pro volání je vždy vidět.

Tři obrazy, ze kterých se celý návrh skládá:

| Obraz | Kde se objevuje | Co říká |
|---|---|---|
| Oranžový kroužek z loga jako **kroužek na klíče** | svazek klíčů na hlavní stránce, klíč v zámku v hero ilustraci, CTA pás, drobné ilustrace ceníku | „tootevřu“ je o klíčích a zámcích, značka drží pohromadě |
| **Vrstevnice** z turistické mapy | pozadí hero, hlaviček podstránek a patičky | jsem místní, znám terén, dojedu i do kopců |
| **Hřeben Jizerek s Ještědem** a turistické značení | hero ilustrace, panorama v patičce, milníky jako trasa | konkrétní region, ne generický „zámečník kdekoli“ |

Principy:

1. **Volání je vždy po ruce.** Oranžové tlačítko s číslem je v hlavičce, v hero, v patičce a na mobilu v plovoucí liště. Nic ho nepřekrývá.
2. **Člověk, ne firma.** Mluví Ondřej v 1. osobě, fotka je skutečná, ilustrace jsou přívětivé, ne korporátní.
3. **Místní, ne obecné.** Obce, okresy, Jizerky a Ještěd v obraze i textu, ale bez turistických klišé.
4. **Klid a řád.** Hodně vzduchu, jedna akcentní barva, žádné blikání. Člověk v nouzi potřebuje jasno, ne show.
5. **Poctivé údaje.** Ceny, data, dokumenty a hodnocení jsou reálné nebo zřetelně označené jako ukázkové (`<!-- MOCK -->`).

## 2. Dials (nastavení vizuálu)

| Dial | Hodnota | Proč |
|---|---|---|
| DESIGN_VARIANCE | **7** | asymetrické rozvržení (hero 1,1 : 0,9, karta přes rám ilustrace, koláž „Kdo přijede“, masonry recenzí), na mobilu vždy jeden sloupec |
| MOTION_INTENSITY | **4** | jemné CSS přechody: náběh hero, jedno zhoupnutí svazku klíčů, houpnutí vybraného klíče, odhalení sekcí při scrollu; žádné nekonečné smyčky kromě tečky „živého“ stavu |
| VISUAL_DENSITY | **3** | vzdušné sekce (`--section-y` 64 až 128 px), krátké texty, max. 5 sekcí na hlavní stránce |

## 3. Logo

**Varianty (sdílené soubory v `design/_shared/assets/img/`):**

| Soubor | Použití |
|---|---|
| `logo-tootevru-bez-subtextu.png` (276 × 72) | hlavička a patička na světlém podkladu |
| `logo-tootevru-bez-subtextu-light.png` | totéž v tmavém režimu (`<picture>` + `prefers-color-scheme: dark`) |
| `logo-tootevru.png`, `logo-tootevru-light.png` (se subtextem „zámečnický servis“) | OG obrázek, vizitka, tisk, polep auta, e-mailový podpis; na webu ne v hlavičce |

- **Barvy loga:** písmo `#231F20`, kroužek `#EA6F22`. Webová „ink“ je smrková `#17262B`; v malé ploše loga rozdíl nevadí, při vektorizaci ale doporučuji ponechat původní `#231F20`.
- **Velikost na webu:** hlavička 30 px výška na mobilu, 36 px na desktopu (PNG 72 px = 2x). Patička 34 px.
- **Minimální velikost:** 24 px výška na obrazovce (bez subtextu), 36 px se subtextem. V tisku 20 mm šířky.
- **Ochranná zóna:** na všech stranách alespoň výška oranžového kroužku „o“ (u 36 px loga je to zhruba 14 px). V hlavičce se do zóny nic nedává, tlačítka začínají až za ní.
- **Na tmavém podkladu:** jen světlá varianta. Na oranžovou plochu ani na neklidnou fotku logo nepatří; pokud musí na fotku, pak na klidné místo s ztmavením alespoň 60 %.
- **Doporučení:** logo **vektorizovat do SVG** (dvě plné barvy, žádné stíny), z kroužku „o“ připravit favicon a ikonu aplikace (oranžový kroužek na světlé mlze `#EDF1EF`, verze 32, 180 a 512 px). SVG logo pak může v tmavém režimu přebírat barvu přes `currentColor` a odpadne druhý PNG soubor.
- **Nedělat:** roztahovat, obtahovat, přidávat stín, měnit barvu kroužku, vkládat logo do rámečku nebo odznaku, používat jen samotný kroužek bez slova jako logo na webu.

## 4. Barvy

Jedna akcentní barva (oranžová z loga), ostatní jsou chladné mlžné a smrkové neutrály. Poměr zhruba 70 % mlha a povrchy, 25 % smrková čerň a smrková, 5 % oranžová.

### Tokeny

| Token | Světlý | Tmavý | Použití |
|---|---|---|---|
| `--c-bg` | `#EDF1EF` mlha | `#0F1817` | pozadí stránky |
| `--c-surface` | `#F7F9F8` | `#16211F` | karty, panely, pole formuláře na tmavém |
| `--c-surface-2` | `#E3EAE6` | `#121C1A` | tiché panely (svazek klíčů, CTA pás, info karty) |
| `--c-ink` | `#17262B` smrková čerň | `#E6ECEA` | text, obrys tlačítek, focus |
| `--c-muted` | `#4F5E5B` | `#98A6A2` | vedlejší text, popisky |
| `--c-line` | `#D2DBD7` | `#25332F` | jemné linky, okraje karet |
| `--c-line-strong` | `#71837E` | `#62736F` | okraje polí formuláře (3 : 1 a víc) |
| `--c-accent` | `#EA6F22` | `#F07B30` | tlačítka volání, kroužek, hvězdy, vybraný stav |
| `--c-accent-hover` | `#ED8341` | `#F28B49` | hover tlačítek (světlejší, kontrast roste) |
| `--c-on-accent` | `#17262B` | `#0F1817` | text na oranžové (vždy tmavý) |
| `--c-accent-text` | `#AD4B14` | `#F4924F` | oranžový text (např. „nonstop“, víkendy v kalendáři) |
| `--c-accent-soft` | `≈ #EDE3D8` (11 % oranžové do bg) | `≈ #28231A` | zvýrazněná recenze, panel akutní situace, příplatky |
| `--c-pine` | `#2F4A43` | `#9FB8B0` | sekundární neutrál: ilustrace, horní lišta, trasa, osa dne; **není to druhý akcent** |
| `--c-error` | `#A8321F` | `#F59B8C` | chyby formuláře |
| `--c-topbar` / `--c-topbar-ink` | `#2F4A43` / `#E6ECEA` | `#0B1312` / `#B7C4C0` | horní lišta |
| `--c-footer` | `#DFE7E3` | `#0B1312` | patička (a výplň popředí panoramatu) |
| `--c-topo` | smrková 17 % | smrková 11 % | barva vrstevnic |

Ilustrace mají vlastní paletu `--ill-*` (viz kapitola 11).

### Ověřené kontrasty (WCAG 2.2)

| Dvojice | Světlý | Tmavý |
|---|---|---|
| ink na bg | 13,7 : 1 | 15,1 : 1 |
| ink na surface | 14,7 : 1 | 13,8 : 1 |
| muted na bg | 6,0 : 1 | 7,1 : 1 |
| muted na surface-2 | 5,6 : 1 | 6,9 : 1 |
| on-accent na accent (tlačítko) | 5,0 : 1 | 6,5 : 1 |
| on-accent na accent-hover | 5,9 : 1 | 7,4 : 1 |
| accent-text na bg | 4,9 : 1 | 7,8 : 1 |
| ink na accent-soft | 12,3 : 1 | 13,0 : 1 |
| muted na accent-soft | 5,4 : 1 | 6,2 : 1 |
| topbar-ink na topbar | 8,1 : 1 | 10,5 : 1 |
| muted na footer | 5,4 : 1 | 7,5 : 1 |
| error na bg | 5,9 : 1 | 8,6 : 1 |
| okraj pole (line-strong) na bg | 3,5 : 1 | 3,6 : 1 |

Pravidla:

- **Bílý text na oranžové nikdy** (jen 3,1 : 1). Oranžová tlačítka mají vždy tmavý text `--c-on-accent`.
- Oranžová `--c-accent` jako text jen ve velkých plochách a jen v tmavém režimu; pro text ve světlém režimu vždy `--c-accent-text`.
- `--c-accent-text` na `--c-accent-soft` má jen 4,4 : 1, proto se na měkkém oranžovém podkladu píše tmavě (ink, muted).
- Hvězdy v recenzích jsou oranžové a dekorativní (2,9 : 1); hodnocení je vždy i textem („5,0 z 5“, pro čtečky).

## 5. Typografie

| Role | Písmo | Řezy | Osy |
|---|---|---|---|
| Nadpisy, velká čísla, rozcestník | **Bricolage Grotesque** (variabilní) | 650 až 720 | `wdth` 90 až 94 % (`font-stretch`), `opsz` automaticky (`font-optical-sizing: auto`), prostrkání -0,02 až -0,025 em |
| Text, UI, formuláře, ceny | **Figtree** (variabilní) | 400, 500, 600, 650, 700 | tabulkové číslice (`font-variant-numeric: tabular-nums`) |

Ukázka načítá Google Fonts: `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Figtree:wght@300..800&display=swap`. **V produkci self-host** (GDPR, výkon): `@fontsource-variable/bricolage-grotesque` a `@fontsource-variable/figtree` přes Vite, podmnožina `latin` + `latin-ext` (čeština), `font-display: swap`, preload jen řezu pro H1.

### Škála (fluidní přes `clamp`, 1 rem = 16 px)

| Token | Mobil | Desktop | Písmo, řez, řádkování | Použití |
|---|---|---|---|---|
| `--fs-hero` | 34 px (2,125 rem) | 62 px (3,875 rem) | Bricolage 720, wdth 92 %, lh 1,02 | H1 slogan na hlavní stránce, max. 3 řádky na desktopu |
| `--fs-h1` | 38 px | 60 px | Bricolage 720, wdth 92 %, lh 1,08 | H1 podstránek (krátké: Ceník, O mně) |
| `--fs-h2` | 28 px | 42 px | Bricolage 700, wdth 94 %, lh 1,08 | nadpisy sekcí |
| `--fs-h3` | 19 px | 22 px | Bricolage 650, lh 1,2 | nadpisy karet |
| `--fs-lead` | 18 px | 21 px | Figtree 400, lh 1,5 | perex, podtitul hero |
| `--fs-base` | 16 px | 17 px | Figtree 400, lh 1,6 | text |
| `--fs-sm` | 15 px | 15 px | Figtree 400 až 600 | popisky, patička |
| `--fs-xs` | 13 px | 13 px | Figtree 500 | horní lišta, drobné poznámky |
| velká čísla | 28 až 56 px | | Bricolage 700, wdth 90 %, tnum | hodnocení 5,0, příplatky, telefon v kontaktu |

Pravidla:

- Nadpisy `text-wrap: balance`, odstavce `text-wrap: pretty`, délka řádku textu max. 60 až 65 znaků.
- Zdůraznění jen tučným řezem téhož písma, žádné kurzívy v nadpisech, žádné míchání s patkovým písmem.
- Ceny, časy, data a telefon vždy tabulkovými číslicemi (třída `.tnum`, automaticky u `<time>`, tlačítek a cen).
- Česká typografie (nezlomitelné mezery, uvozovky, čísla) je v `COPYWRITING.md`, kapitola 7.

## 6. Mřížka a mezery

- Kontejner `min(100% - 2 × gutter, 1240px)`, gutter `clamp(16px, 4vw, 40px)`.
- Mezera mezi sekcemi `--section-y: clamp(4rem, 2.6rem + 5.5vw, 8rem)`, těsnější sekce `clamp(2rem, 1.5rem + 2.5vw, 4rem)`.
- Škála mezer po 4 px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128.
- Zlomy (mobile first): **560** (tlačítka vedle sebe), **640** (formulář ve dvou sloupcích), **720** (ilustrovaný svazek klíčů, masonry recenzí, horní lišta s textem), **900** (ceník a trasa v mřížce), **960** (hero a mapa ve dvou sloupcích), **1024** (plná navigace, konec mobilní lišty), **1100** (koláž „Kdo přijede“ ve třech sloupcích, patička v pěti).
- Asymetrie: hero 1,1 : 0,9, svazek klíčů 5 : 6, koláž 4 : 5 : 3, recenze 4 : 8, mapa 7 : 5, ceník 7 : 5. Pod 720 px vše v jednom sloupci.

## 7. Radius (tvarový systém)

| Prvek | Radius |
|---|---|
| karty, panely, rámy fotek a ilustrací, cookie modal | **22 px** (`--radius-card`) |
| tlačítka, klíče v segmentovém přepínači, přepínač menu | **14 px** (`--radius-btn`) |
| pole formuláře, čipy data | **12 px** (`--radius-input`) |
| volby služby (radio karty), FAQ, mapa ovládání | 16 až 18 px (mezistupeň pro velké klikací plochy) |
| ikonové dlaždice | 12 až 16 px |
| přepínač Google / Seznam | plná kapsle 999 px (jediná kapsle na webu) |
| turistická značka | 3 px (napodobuje plechovou značku) |
| fotka v mobilní liště | kruh |

Pravidlo: větší plocha, větší radius. Ostré rohy se nepoužívají, kapsle jen u přepínače zdroje recenzí.

## 8. Stíny

- `--shadow-float` (smrkově tónovaný, nízká opacita) **jen pro plovoucí prvky**: karta otevírací doby, mobilní lišta, rozbalené mobilní menu, cookie lišta.
- Běžné karty stín nemají, drží je barva povrchu a jemná linka `--c-line`.
- Hover primárního tlačítka dostává měkkou oranžovou záři pod tlačítkem (jen desktop, jen hover).
- V tmavém režimu jsou stíny černé a výraznější (jinak by zmizely).

## 9. Vzor vrstevnic

- Soubor `assets/img/topo.svg` (18 kB), bezešvá dlaždice 1200 × 800, 15 hladin, každá 5. vrstevnice silnější (jako na turistické mapě), hřbety protažené ve směru západ až východ jako Jizerské hory.
- Generuje ho `_src/tools/topo.py` (numpy: periodický šum filtrovaný přes FFT, marching squares, Ramer-Douglas-Peucker, vyhlazení Catmull-Rom). Jiný vzor: `python3 _src/tools/topo.py <seed>`.
- Použití výhradně jako **maska** (`mask-image`) přes barvu `--c-topo`, takže se sám přebarví v tmavém režimu. Velikost dlaždice 960 px.
- Kde: hero (s gradientní maskou, aby text vlevo zůstal čistý), hlavičky podstránek, hero O mně, patička. Jinde ne.
- Intenzita: 17 % smrkové ve světlém, 11 % v tmavém. Pod textem nikdy víc.
- Produkce: SVG musí jít ze stejné domény (mask-image vyžaduje CORS), v Laravelu přes Vite asset je to splněno.

## 10. Ikony

- **Phosphor Icons 2.1.2**, výhradně. Váha **regular** pro UI, **bold** pro telefon v tlačítkách a šipky odkazů, **fill** jen pro hvězdy hodnocení a ikonu akutní situace.
- Velikost 1,1 až 1,35 rem, v ikonových dlaždicích 1,35 až 1,6 rem.
- Ikona je vždy doplněk textu (`aria-hidden="true"`), samostatná ikona jen s `aria-label` nebo skrytým textem.
- Použité ikony: `phone`, `envelope-simple`, `map-pin`, `list`, `x`, `arrow-right`, `arrow-up-right`, `star`, `magnifying-glass-plus`, `arrows-out-simple`, `signpost`, `clock-countdown`, `info`, `receipt`, `plus`, `lock-key`, `lock-key-open`, `keyhole`, `key`, `buildings`, `wrench`, `chat-circle-dots`, `shield-check`, `paper-plane-tilt`, `check`, `clock`, `address-book`, `storefront`, `google-logo`.
- Ruční kreslení ikon je zakázané. Ruční kresba je vyhrazená ilustracím.

## 11. Ilustrace

**Styl:** čistá linková kresba, tah 2,25 px se zakulacenými konci (`vector-effect: non-scaling-stroke`, takže tloušťka drží v každé velikosti), obrys smrkovou černí, ploché výplně z mlžné a smrkové palety, **jedna oranžová plocha na ilustraci** jako ohnisko (kroužek na klíče, slunce, čepička klíče, rukojeť sejfu). Bez přechodů, bez stínů, bez textu, bez obličejů.

**Paleta ilustrací (tokeny):**

| Token | Světlý | Tmavý | Na co |
|---|---|---|---|
| `--ill-stroke` | `#17262B` | `#9FB8B0` | hlavní obrys |
| `--ill-line` | `#4A665E` | `#6F8A83` | vzdálený hřeben, Ještěd |
| `--ill-sky` | `#F7F9F8` | `#16211F` | nebe (pozadí rámu) |
| `--ill-far` / `--ill-hill` / `--ill-ground` | `#E1E9E5` / `#CFDBD6` / `#E9EFEC` | `#1A2826` / `#1F2F2C` / `#192522` | hřebeny, kopce, louka |
| `--ill-tree` | `#9DB3AC` | `#2B403A` | smrky |
| `--ill-door` / `--ill-door-2` | `#2F4A43` / `#3E5D55` | `#2F4A43` / `#38564E` | dveře, výplně dveří |
| `--ill-paper` | `#F7F9F8` | `#1E2C29` | kov klíčů, zárubeň, cedule |
| `--ill-accent` | `#EA6F22` | `#F07B30` | kroužek, slunce, čepička |
| `--ill-night`, `--ill-moon-cut` | průhledné | `#9FB8B0`, barva nebe | hvězdy a srpek měsíce jen v noci |

**Noční varianta zdarma:** v tmavém režimu se na nebi objeví hvězdy a ze slunce se výřezem stane srpek měsíce. Pohotovost je nonstop, ilustrace to ukazuje bez jediného slova.

**Knihovna (inline v `_src/partials/`, samostatně v `assets/img/illustrations/`):**

| Motiv | Partial | Export | Použití |
|---|---|---|---|
| Dveře se svazkem klíčů v zámku, hřeben Jizerek s Ještědem, smrky, pěšina, rozcestník | `ill-hero.html` | `hero-dvere-jizerky.svg` | hero hlavní stránky |
| Panorama: Ještěd s vysílačem, hřeben Jizerek s rozhlednou, Krkonoše v dálce, smrky | `ill-panorama.html` | `panorama-jizerky-jested.svg` | vršek patičky, všechny stránky |
| Klíč od dveří, autoklíč, klíč od sejfu (visí z kroužku) | `key-door/car/safe.html` | `klic-*.svg` | svazek klíčů (záložky služeb) |
| Drobné motivy dveře, auto, sejf | `spot-*.html` | `spot-*.svg` | hlavičky panelů ceníku |
| Kroužek se dvěma klíči | v `cta-band.html` | | CTA pás na podstránkách |

**Pravidla:** barvy jen přes třídy (`.s`, `.sl`, `.f-*`, `.ring`), nikdy natvrdo v SVG; inline, pokud se má přebarvovat; dekorativní ilustrace `aria-hidden="true"`, hero ilustrace `role="img"` s `<title>`. Nové motivy (další obce, rozhledny, auto s dodávkou) kreslit na stejné mřížce a stejnou tloušťkou, nejdřív v šedé, oranžovou přidat až nakonec a jen na jedno místo.

## 12. Fotografie

- Směr: skutečné, denní světlo, přirozené barvy, žádné stockové fotky. Fotka má ukázat, kdo přijede a že to umí.
- Současná fotka `ondrej-baly.jpg` je z dovolené na hoře (funguje pro místní „z hor“ náladu, ale ne jako řemeslník). **Nafotit:**
  1. portrét v pracovním oblečení u dveří domu v Jizerkách, na výšku 4 : 5 i na šířku 3 : 2,
  2. čtvercový výřez obličeje pro mobilní lištu, poptávku a kontakt (tváří do objektivu, bez slunečních brýlí),
  3. ruce s nářadím u zámku dveří a u auta (detail, na výšku),
  4. dodávka nebo kufr s nářadím (důvěra, že přijede vybavený),
  5. výměna cylindrické vložky, montáž zámku (pro poptávku a budoucí podstránky).
- Technicky: delší strana 1600 px, WebP + JPG, `width` a `height` v HTML, `loading="lazy"` mimo první obrazovku. Rám fotek 22 px, bez popisků přes fotku.
- Výřez obličeje z fotky na výšku je v ukázce řešený pozicováním (`.callbar__photo img`); v produkci připravit samostatný čtvercový výřez.
- Dokumenty jen s začerněnými osobními údaji (rodné číslo, adresa, datum narození).

## 13. Komponenty

Stavy platí pro všechny interaktivní prvky: **hover** (jemná změna barvy nebo podtržení), **focus** (obrys 3 px `--c-focus` s odsazením 3 px, vždy viditelný při ovládání klávesnicí), **active** (posun o 1 px a zmenšení na 98,5 %), **disabled** (50 % opacita, kurzor `not-allowed`), **error** (červený okraj pole a text pod polem).

| Komponenta | Anatomie | Poznámky a stavy |
|---|---|---|
| **Horní lišta** | ikona + „Liberecký kraj: Jablonecko, Semilsko, Liberecko“ vlevo, e-mail a telefon vpravo | smrkové pozadí; na mobilu jen oblasti bez „Liberecký kraj:“, e-mail a telefon jako ikony 44 × 44 px se skrytým textem |
| **Hlavička** | logo, navigace (Domů, Ceník, O mně, Poptávka, Kontakt), tlačítko volání | sticky, průsvitná mlha s rozostřením; po odscrollování linka a stín (`.is-scrolled`); aktivní odkaz `aria-current` s oranžovou linkou; na mobilu logo, tlačítko s číslem, hamburger |
| **Mobilní menu** | velké odkazy (Bricolage 22 px), poznámka o pohotovosti, tlačítko volání, e-mail | panel pod hlavičkou, Esc zavírá, zamyká scroll, schová mobilní lištu |
| **Tlačítko volání** | ikona telefonu (bold) + „Zavolat 730 915 828“ | oranžové, tmavý text, min. 48 px (hero 56 px); v úzké hlavičce jen ikona a číslo, `aria-label` celý |
| **Tlačítka** | primární (oranžová plná), obrysové (1,5 px ink) | jedno primární na blok; obrysové pro „Poslat poptávku“, „Uložit do telefonu“, „Ohodnotit na Google“ |
| **Odkaz se šipkou** | text + šipka | oranžové podtržení 2 px, šipka se při hoveru posune o 3 px, výška 44 px |
| **Karty a panely** | povrch `--c-surface` nebo `--c-surface-2`, radius 22 px | bez stínu, obsah drží mezery; zvýrazněná karta `--c-accent-soft` |
| **Svazek klíčů** | viz `UNIQUE-ELEMENTS.md` | záložky přes `[data-tabs]` |
| **Řádky ceníku** | název, tečkové vodítko, cena | nejhledanější služby tučně; „po posouzení“ tlumeně; bez linky pod každým řádkem; pod 480 px bez teček |
| **Formulář** | popisek nad polem, pole 52 px, chyba pod polem | pole na `--c-bg` s okrajem `--c-line-strong`; focus: ink okraj + oranžový prstenec 4 px; chyba: `--c-error` okraj + text (`aria-invalid`, `aria-describedby`) |
| **Volba služby** | radio karty s ikonou v dlaždici | vybraná: oranžový okraj, `--c-accent-soft`, ikona na oranžové |
| **Čipy data** | den v týdnu, číslo, měsíc | sdílený `[data-date-strip]`; víkend oranžovým textem; vybraný čip oranžový s tmavým textem; „Jiný den“ otevře `<input type="date">` |
| **Úspěch** | ikona fajfky na oranžové, nadpis, text, odkaz | `[data-form-success]`, dostane fokus |
| **Recenze** | přepínač Google / Seznam, souhrn (velké číslo + hvězdy + počet), karty, výzva k hodnocení | výzva a odkazy se mění se záložkou (`[data-tab-show]`); na mobilu karty v pásu se snapem |
| **Mapa** | Leaflet v rámu 22 px, okresy oranžově, obce smrkovou černí | podklad odbarvený přes `--map-tile-filter` do smrkového tónu, v tmavém režimu invertovaný |
| **Patička** | panorama, pak logo + claim + volání, Kontakt, Působnost, Stránky, Najdete mě (Google, Firmy.cz, Nastavení cookies, Přihlášení) | vrstevnice uvnitř; pod ní pruh „Web vytvořil Ing. Zdeněk Hejzlar“ na střed |
| **Cookie lišta** | sdílená konfigurace orestbida v3 | přebírá tokeny, radius 22 px u modalu, 14 px u tlačítek, tlačítka stejné váhy |
| **Lightbox** | sdílený `<dialog>` | tmavé pozadí vždy, šipky a Esc |
| **Mobilní lišta s fotkou** | viz `UNIQUE-ELEMENTS.md` | jen pod 1024 px |
| **Karta otevírací doby** | viz `UNIQUE-ELEMENTS.md` | plovoucí, se stínem |
| **FAQ** | `<details>` karty, plus se otočí na křížek | jen odpovědi, které známe z podkladů |
| **CTA pás** | kroužek s klíči, nadpis, věta, volání + poptávka | na podstránkách na konci obsahu |

## 14. Pohyb

Pohyb vysvětluje stav nebo vede pozornost, nikdy nezdobí sám pro sebe.

| Animace | Co a proč | Parametry |
|---|---|---|
| Náběh hero | text a ilustrace vyjedou o 16 px, karta otevírací doby jako poslední: pořadí čtení | 0,8 s, `cubic-bezier(0.16, 1, 0.3, 1)`, zpoždění 0 až 0,36 s |
| Zhoupnutí svazku v hero | klíče v zámku se jednou zhoupnou: ilustrace „ožije“ a upozorní na ohnisko | 2,6 s, jednou, tlumené kmitání 14°, -9°, 5°, -2,5°, 1° |
| Houpnutí vybraného klíče | zpětná vazba na výběr záložky | 1,1 s, rotace kolem bodu zavěšení |
| Odhalení sekcí | `[data-reveal]` vyjede o 22 px a zprůhlední se při vstupu do viewportu | 0,8 s, stupňované po 90 ms ve skupině `[data-reveal-group]` |
| Tečka živého stavu | prstenec kolem oranžové tečky: „jsem na příjmu teď“ | 2,6 s, nekonečně, jediná smyčka na webu |
| Mobilní lišta | vyjede zespodu po načtení | 0,6 s |
| Mikrointerakce | hover tlačítek, posun šipky, narovnání náhledů dokumentů, otočení plusu ve FAQ | 0,2 až 0,35 s |

**Reduced motion:** při `prefers-reduced-motion: reduce` se všechny animace zkrátí na 0,01 ms a proběhnou jen jednou, odhalované prvky jsou rovnou vidět (řeší i `common.js`), houpání klíčů se vůbec nespustí (`main.js`), plynulý scroll se vypne. Animuje se jen `transform`, `opacity`, `rotate` a `translate`.

## 15. Responzivita

- Mobile first, jeden sloupec pod 720 px, žádný vodorovný scroll stránky (ověřeno na 375 px; vodorovný je jen pás recenzí, řada čipů data a široké tabulky v zásadách, vždy uvnitř vlastního kontejneru).
- Na 375 × 667 jsou nadpis, podtitul a obě tlačítka hero vidět bez scrollu a nad mobilní lištou.
- Mobilní lišta s fotkou pod 1024 px, stránka má dole rezervu 84 px + `safe-area-inset-bottom`.
- `min-height: 100dvh`, nikdy `100vh`.
- Dotyková zařízení (`pointer: coarse`): odkazy v patičce a obsahu zásad mají 44 px.

## 16. Tmavý režim

- Řízený `prefers-color-scheme`, výchozí je světlý. Tokeny se přepínají v `:root` (kapitola 4), komponenty nic nepřepisují.
- Logo ve světlé variantě přes `<picture>`, `theme-color` pro oba režimy, `color-scheme: light dark`.
- Ilustrace se přebarví samy a přejdou do noční varianty (hvězdy, srpek měsíce).
- Mapa: sdílený skript nechává `data-tiles="light"`, tmavý vzhled dělá `--map-tile-filter` (inverze + nádech smrkové).
- Fotky a dokumenty se neinvertují ani neztmavují.
- Oranžová je v tmavém režimu o stupeň světlejší (`#F07B30`), aby měla stejnou sílu.

## 17. Přístupnost

- Skip link „Přeskočit na obsah“, landmarky `header`, `nav` (hlavní a v patičce), `main`, `footer`, `aria-current` v navigaci.
- Kontrasty AA ověřené (kapitola 4), focus viditelný všude, cíle dotyku 44 px.
- Záložky (svazek klíčů, recenze) jsou WAI-ARIA tabs se šipkami, Home a End (sdílený `common.js`).
- Formulář: popisky nad poli, žádný placeholder místo popisku, chyby textem pod polem, `aria-invalid` a `aria-describedby`, skupiny ve `fieldset` s `legend`, `autocomplete` pro jméno, e-mail, telefon a adresu, honeypot skrytý čtečkám.
- Hodnocení hvězdami má textovou alternativu, mapa má `role="img"` a popis, hero ilustrace `<title>`, ostatní ilustrace `aria-hidden`.
- Čeština: `lang="cs"`, nezlomitelné mezery, žádné zkratky bez vysvětlení (kromě běžných IČ, DPH).

## 18. Tailwind v4: `@theme`

Doporučený postup: sémantické tokeny jako CSS proměnné v `:root` (přepínané pro tmavý režim), do Tailwindu napojené přes `@theme inline`. Třídy pak jsou `bg-bg`, `text-ink`, `bg-accent`, `rounded-card`, `font-display`, `shadow-float` atd.

```css
@import "tailwindcss";

/* tmavý režim podle systému (výchozí chování dark: ve v4) */
@custom-variant dark (@media (prefers-color-scheme: dark));

:root {
  --c-bg: #EDF1EF;
  --c-surface: #F7F9F8;
  --c-surface-2: #E3EAE6;
  --c-ink: #17262B;
  --c-muted: #4F5E5B;
  --c-line: #D2DBD7;
  --c-line-strong: #71837E;
  --c-accent: #EA6F22;
  --c-accent-hover: #ED8341;
  --c-on-accent: #17262B;
  --c-accent-text: #AD4B14;
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 11%, var(--c-bg));
  --c-pine: #2F4A43;
  --c-error: #A8321F;
  --c-topbar: #2F4A43;
  --c-topbar-ink: #E6ECEA;
  --c-footer: #DFE7E3;
  --c-topo: color-mix(in srgb, var(--c-pine) 17%, transparent);

  --ill-stroke: #17262B;  --ill-line: #4A665E;   --ill-sky: #F7F9F8;
  --ill-far: #E1E9E5;     --ill-hill: #CFDBD6;   --ill-ground: #E9EFEC;
  --ill-tree: #9DB3AC;    --ill-door: #2F4A43;   --ill-door-2: #3E5D55;
  --ill-paper: #F7F9F8;   --ill-accent: var(--c-accent);
  --ill-cap-off: #CFDBD6; --ill-night: transparent; --ill-moon-cut: transparent;
  --ill-foot: var(--c-footer);

  --map-tile-filter: grayscale(1) sepia(0.15) hue-rotate(90deg) contrast(0.9) brightness(1.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0F1817;
    --c-surface: #16211F;
    --c-surface-2: #121C1A;
    --c-ink: #E6ECEA;
    --c-muted: #98A6A2;
    --c-line: #25332F;
    --c-line-strong: #62736F;
    --c-accent: #F07B30;
    --c-accent-hover: #F28B49;
    --c-on-accent: #0F1817;
    --c-accent-text: #F4924F;
    --c-pine: #9FB8B0;
    --c-error: #F59B8C;
    --c-topbar: #0B1312;
    --c-topbar-ink: #B7C4C0;
    --c-footer: #0B1312;
    --c-topo: color-mix(in srgb, var(--c-pine) 11%, transparent);

    --ill-stroke: #9FB8B0;  --ill-line: #6F8A83;   --ill-sky: #16211F;
    --ill-far: #1A2826;     --ill-hill: #1F2F2C;   --ill-ground: #192522;
    --ill-tree: #2B403A;    --ill-door: #2F4A43;   --ill-door-2: #38564E;
    --ill-paper: #1E2C29;   --ill-cap-off: #2B3D38;
    --ill-night: #9FB8B0;   --ill-moon-cut: var(--ill-sky);

    --map-tile-filter: grayscale(1) invert(1) sepia(0.2) hue-rotate(110deg) brightness(0.72) contrast(1.05);
  }
}

@theme inline {
  /* barvy: bg-bg, text-ink, border-line, bg-accent, text-on-accent ... */
  --color-bg: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-surface-2: var(--c-surface-2);
  --color-ink: var(--c-ink);
  --color-muted: var(--c-muted);
  --color-line: var(--c-line);
  --color-line-strong: var(--c-line-strong);
  --color-accent: var(--c-accent);
  --color-accent-hover: var(--c-accent-hover);
  --color-on-accent: var(--c-on-accent);
  --color-accent-text: var(--c-accent-text);
  --color-accent-soft: var(--c-accent-soft);
  --color-pine: var(--c-pine);
  --color-error: var(--c-error);
  --color-topbar: var(--c-topbar);
  --color-topbar-ink: var(--c-topbar-ink);
  --color-footer: var(--c-footer);
}

@theme {
  /* písma: font-display, font-sans */
  --font-display: "Bricolage Grotesque Variable", "Figtree Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* typografická škála: text-hero, text-h1, text-h2 ... */
  --text-hero: clamp(2.125rem, 1.2rem + 3.3vw, 3.875rem);
  --text-hero--line-height: 1.02;
  --text-hero--letter-spacing: -0.025em;
  --text-h1: clamp(2.375rem, 1.6rem + 3.2vw, 3.75rem);
  --text-h1--line-height: 1.08;
  --text-h1--letter-spacing: -0.025em;
  --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
  --text-h2--line-height: 1.08;
  --text-h2--letter-spacing: -0.02em;
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h3--line-height: 1.2;
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-lead--line-height: 1.5;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-base--line-height: 1.6;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;

  /* tvar: rounded-card, rounded-btn, rounded-input */
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 12px;

  /* stíny jen pro plovoucí prvky */
  --shadow-float: 0 22px 44px -22px rgb(23 38 43 / 0.34), 0 2px 8px rgb(23 38 43 / 0.06);
  --shadow-bar: 0 -10px 30px -12px rgb(23 38 43 / 0.30);

  /* zlomy */
  --breakpoint-sm: 560px;
  --breakpoint-form: 640px;
  --breakpoint-md: 720px;
  --breakpoint-grid: 900px;
  --breakpoint-split: 960px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1100px;

  /* kontejner a rytmus */
  --container-page: 1240px;
  --spacing-gutter: clamp(16px, 4vw, 40px);
  --spacing-section: clamp(4rem, 2.6rem + 5.5vw, 8rem);

  /* pohyb */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --animate-rise: rise 0.8s var(--ease-out-soft) both;
  --animate-key-swing: key-swing 1.1s var(--ease-out-soft);

  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes key-swing {
    0%   { rotate: var(--rest, 0deg); }
    18%  { rotate: calc(var(--rest, 0deg) + 11deg); }
    40%  { rotate: calc(var(--rest, 0deg) - 7deg); }
    60%  { rotate: calc(var(--rest, 0deg) + 3.5deg); }
    80%  { rotate: calc(var(--rest, 0deg) - 1.2deg); }
    100% { rotate: var(--rest, 0deg); }
  }
}

/* zbytek (ilustrace, vrstevnice, svazek klíčů, trasa) zůstává jako komponentové CSS v @layer components,
   převzít z assets/css/style.css, oddíly 6, 8, 9, 18 */
```

Ukázka použití: `<a class="inline-flex min-h-12 items-center gap-2 rounded-btn bg-accent px-5 font-semibold text-on-accent hover:bg-accent-hover">`.

## 19. Do a Don't

| Ano | Ne |
|---|---|
| Oranžová jen pro volání, vybraný stav a jedno ohnisko ilustrace | oranžové nadpisy, rámečky, pozadí sekcí |
| Tmavý text na oranžových tlačítkách | bílý text na oranžové |
| Jedno číslo, jeden popisek: „Zavolat 730 915 828“ | „Volejte“, „Kontaktujte nás“, „Zavolejte hned“ střídavě |
| Obce jako prostý text ve sloupcích | obce jako barevné štítky nebo kapsle |
| Ilustrace linkou 2,25 px s jednou oranžovou plochou | clip-art, 3D, přechody, postavičky s obličejem |
| Vrstevnice jako tichá maska v hero a patičce | vrstevnice za odstavci textu nebo v kartách |
| Skutečné fotky Ondřeje a jeho práce | stockové fotky zámečníků, AI obrázky |
| Karta s hodinami jako jediný plovoucí prvek se stínem | stíny na všech kartách |
| Ceník s tečkovými vodítky, nejhledanější tučně | tabulka s linkou pod každým řádkem |
| Recenze se jménem, zdrojem a datem, max. 3 řádky | vymyšlená čísla bez označení MOCK, hodnocení v JSON-LD |
| Ikony Phosphor, emoji nikde | emoji, smajlíky, odznaky „TOP“, „Nejlepší“ |
| Pomlčka jen ve sloganu, rozsahy „8:00 až 17:00“ | pomlčky jako oddělovač, rozsahy psané pomlčkou mezi čísly |