# Návrh B „Noční směna“: brand a design manuál

Podklad pro implementaci webu tootevru.cz v Laravelu (Blade) a Tailwindu v4. Vše, co je tady popsané, je v ukázce ve složce `design/navrh-b-nocni-smena/` (zdroj v `_src/`, vzhled v `assets/css/style.css`, chování v `assets/js/main.js`).

---

## 1. Koncept

**Design read:** nouzová zámečnická služba pro člověka, který stojí ve dvě ráno před zabouchnutými dveřmi s telefonem na pár procentech baterie. Jazyk je tmavý, klidný a vysoce kontrastní, jako ulice pod sodíkovou lampou. Technicky: nativní CSS, jediná proměnná rodina Archivo (osa šířky) a lehký, účelný pohyb.

**Tři myšlenky, na kterých návrh stojí:**

1. **Tma je výchozí stav.** Web je v tmavém režimu pro všechny (rozhodnutí značky: méně oslnění v noci, úspora baterie na OLED displejích). Světlý režim je jen na vyžádání přes přepínač Den / Noc. Systémové nastavení `prefers-color-scheme` se záměrně nesleduje.
2. **Oranžová svítí jen tam, kde má.** Sodíková oranžová je vyhrazená pro hovor (CTA), živý stav (pohotovost, značka „teď“) a motiv kroužku z loga. Nikde jinde.
3. **Přesnost místo efektů.** Technické kresby jemnou linkou, tabulková čísla, jasné ceny. Řemeslník, který ví, co dělá.

**Nastavení (dials):** DESIGN_VARIANCE 6 (asymetrie, nerovné mřížky, ale čitelné), MOTION_INTENSITY 4 (plynulé CSS přechody, žádná choreografie), VISUAL_DENSITY 4 (běžné rozestupy, dost tmavého prostoru).

**Tvarový systém:** interaktivní prvky jsou pilulky (999 px), karty a panely 14 px, pole formuláře 12 px. Pravidlo platí všude bez výjimky.

---

## 2. Logo

| Varianta | Soubor | Použití |
|---|---|---|
| Bez subtextu, tmavé písmo | `logo-tootevru-bez-subtextu.png` (276 × 72 px) | světlý režim (Den), světlé podklady |
| Bez subtextu, světlé písmo | `logo-tootevru-bez-subtextu-light.png` | tmavý režim (Noc, výchozí), tmavé podklady |
| Se subtextem „zámečnický servis“ | `logo-tootevru.png`, `-light.png` | tiskoviny, profily, OG obrázek. Na webu se nepoužívá. |

- **Velikost na webu:** hlavička 30 px na výšku (mobil), 36 px (od 1024 px). PNG má dvojnásobné rozlišení pro 36 px, víc nezvětšovat.
- **Minimální velikost:** 24 px na výšku. Pod tím se slévá háček nad „ř“.
- **Ochranná zóna:** průměr oranžového kroužku (zhruba polovina výšky loga) na všech stranách. Do zóny nesmí žádný text ani ikona. V hlavičce to hlídá `margin-right: auto` a mezera `gap`.
- **Na tmavém podkladu** vždy světlá varianta (`-light`). Oranžový kroužek zůstává stejný, nemění se ani neinvertuje.
- **Přepínání v režimech:** v HTML jsou obě varianty, CSS skryje tu nepotřebnou (`:root[data-theme="light"] .logo__img--on-dark { display: none }`). Skrytá varianta není v přístupnostním stromu.
- **Nedělat:** logo na oranžové ploše, stín, obrys, deformace, jiná barva kroužku, logo v textu věty.
- **Doporučení:** nechat logo převést do **SVG** (vektorizace podle předlohy, ideálně od grafika). Výhody: ostré na všech displejích, barvy písma přes `currentColor` (jedna varianta místo dvou), menší soubor, možnost animovat kroužek. Kroužek pak může sloužit i jako favicon a maska.

---

## 3. Barvy

Tokeny jsou CSS proměnné na `:root`. Tmavá sada je výchozí, světlá platí pod `html[data-theme="light"]`. Sdílené komponenty (cookie lišta, lightbox, výběr data, mapa) berou barvy ze stejných tokenů.

### 3.1 Noc (výchozí)

| Token | Hex | Použití |
|---|---|---|
| `--c-bg` | `#0E1012` | pozadí stránky |
| `--c-surface` | `#15181B` | panely, patička, formulářová karta |
| `--c-surface-2` | `#1C2024` | karty-visačky, zvýrazněné panely, vizitka |
| `--c-ink` | `#ECEEF0` | hlavní text, nadpisy |
| `--c-muted` | `#9199A1` | vedlejší text, popisky |
| `--c-line` | `#262B30` | dekorativní linky a obrysy karet |
| `--c-line-strong` | `#68717A` | hrany polí, čipů, tlačítek s obrysem |
| `--c-accent` | `#F07A2A` | sodíková oranžová: CTA, živý stav, kroužek |
| `--c-accent-hover` | `#F58D47` | hover oranžových tlačítek |
| `--c-accent-text` | `#F07A2A` | oranžový text (stejný jako akcent) |
| `--c-on-accent` | `#0E1012` | text na oranžové |
| `--c-live` | `#F07A2A` | tečka „Pohotovost aktivní“, značka „teď“ |
| `--c-focus` | `#F07A2A` | fokusový prstenec |
| `--c-error` | `#FF8A7A` | chyby formuláře |
| `--c-success` | `#7FD1A0` | úspěch (odeslaná poptávka) |
| `--c-glow` | `rgb(240 122 42 / .12)` | záře pouliční lampy |
| `--c-glow-strong` | `rgb(240 122 42 / .28)` | záře kolem klíčové dírky, stín CTA |

### 3.2 Den (přepínač)

| Token | Hex | Poznámka |
|---|---|---|
| `--c-bg` | `#F2F3F4` | |
| `--c-surface` | `#FBFBFB` | |
| `--c-surface-2` | `#ECEEF0` | |
| `--c-ink` | `#111315` | |
| `--c-muted` | `#555C63` | |
| `--c-line` | `#D9DDE0` | |
| `--c-line-strong` | `#7E868E` | |
| `--c-accent` | `#EA6F22` | barva kroužku z loga |
| `--c-accent-hover` | `#DD6419` | |
| `--c-accent-text` | `#B04A10` | oranžová pro **text** a tenké čáry (akcent sám na světlém nestačí) |
| `--c-on-accent` | `#111315` | |
| `--c-live` / `--c-focus` | `#B04A10` | |
| `--c-error` | `#B3261E` | |
| `--c-success` | `#1E7A46` | |

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

| Dvojice | Noc | Den | Požadavek |
|---|---|---|---|
| ink na bg / surface / surface-2 | 16,4 / 15,3 / 14,1 | 16,8 / 18,0 / 16,0 | 4,5 |
| muted na bg / surface / surface-2 | 6,6 / 6,2 / 5,7 | 6,1 / 6,6 / 5,8 | 4,5 |
| accent-text na bg / surface / surface-2 | 6,8 / 6,4 / 5,9 | 4,9 / 5,3 / 4,7 | 4,5 |
| on-accent na accent (text tlačítka) | 6,8 | 6,0 | 4,5 |
| on-accent na accent-hover | 8,0 | 5,2 | 4,5 |
| error na surface | 7,8 | 6,3 | 4,5 |
| success na surface | 9,8 | 5,2 | 4,5 |
| line-strong na surface / bg (hrany polí) | 3,6 / 3,8 | 3,6 / 3,3 | 3,0 |
| bílá na `#EA6F22` | 3,1 | 3,1 | **nevyhovuje**, proto má oranžové tlačítko vždy tmavý text |

`--c-line` (1,3:1) je jen dekorativní. Nikdy jím nevyznačovat hranici ovládacího prvku.

### 3.4 Pravidla

- Jeden akcent na celém webu. Žádná modrá pro odkazy, žádná zelená „tlačítka“.
- Oranžová plocha = jde se volat (nebo je to vybraná volba v kalkulačce či formuláři). Oranžový text = živý stav nebo zvýrazněná hodnota.
- Hvězdičky recenzí jsou oranžové (hodnocení je stav, ne dekorace).
- Žádná čistá černá `#000` ani čistá bílá `#FFF`.
- Tematický zámek: světlá sekce uvnitř tmavé stránky neexistuje (ani obráceně). Výjimka: lightbox je vždy tmavý (fotka dokumentu).

---

## 4. Typografie

### 4.1 Rodina

Jediná rodina **Archivo** (variabilní, osy `wdth` 62 až 125 %, `wght` 100 až 900). V ukázce z Google Fonts, v produkci self-host (woff2, subset latin + latin-ext, `font-display: swap`, případně `size-adjust` fallbacku proti CLS).

```
https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap
```

| Role | Šířka (`font-stretch`) | Řez | Další |
|---|---|---|---|
| Display (H1, H2, featured recenze, titulky panelů) | 125 % (Expanded) | 750 až 800 | tracking -0,01em, řádkování 1,02 až 1,08, větná velká písmena |
| Mezititulky (H3, názvy služeb, legendy) | 112 % | 700 | řádkování 1,2 |
| Text | 100 % | 400, 500 | řádkování 1,6 |
| Čísla (ceny, časy, telefon) | 112 % | 600 až 650 | `font-variant-numeric: tabular-nums` |
| „Mono“ token (`--font-mono`) | stejná rodina | | tabulkové číslice, jiný font se nenačítá |

Kontrast v H1 na úvodu řeší **váha, ne jiná rodina**: „Pracuji nonstop –“ je 800, pokračování sloganu 450 v poloviční velikosti. Obojí je jeden element `<h1>`.

### 4.2 Škála

| Token | Hodnota | 375 px | 1440 px | Použití |
|---|---|---|---|---|
| `--fs-xs` | 0,8125rem | 13 | 13 | top bar, patička dole, popisky os |
| `--fs-sm` | 0,9375rem | 15 | 15 | vedlejší texty, recenze meta |
| `--fs-body` | 1,0625rem | 17 | 17 | text (v noci na mobilu raději větší) |
| `--fs-lead` | clamp(1,0625rem, 1rem + 0,35vw, 1,25rem) | 17 | 20 | perex |
| `--fs-h3` | clamp(1,1875rem, 1,1rem + 0,4vw, 1,375rem) | 19 | 22 | H3, názvy služeb |
| `--fs-h2` | clamp(1,75rem, 1,3rem + 1,9vw, 2,75rem) | 28 | 44 | H2 |
| `--fs-h1` | clamp(2,5rem, 1,5rem + 4,2vw, 5rem) | 40 | 80 | H1 podstránek (krátká slova: Ceník, Kontakt) |
| `--fs-hero` | clamp(2rem, 1,1rem + 3,4vw, 3,625rem) | 32 | 58 | slogan na úvodu (první řádek) |
| `--fs-price` | clamp(1,875rem, 1,5rem + 1,3vw, 2,625rem) | 30 | 42 | ceny na visačkách, příplatky |

### 4.3 Čeština a sazba

- Nadpisy `text-wrap: balance`, odstavce `text-wrap: pretty`, měřítko textu max. 60 až 68 znaků.
- Nezlomitelná mezera po jednopísmenných předložkách a spojkách (v, k, s, z, o, u, a, i), v číslech a cenách („1 300 Kč“), v telefonu („730 915 828“), před „%“ a mezi „8:00 až 17:00“. Podrobně v `COPYWRITING.md`.
- Uvozovky „ “, žádné pomlčky (jedinou výjimkou je pomlčka ve sloganu klienta).
- Font má kompletní českou diakritiku ve všech šířkách, háčky ani čárky se neořezávají při řádkování 1,02 (ověřeno na „ř“, „Č“).

---

## 5. Mřížka a rozestupy

- **Kontejner:** `min(100% - 2 × gutter, 1240px)`, gutter 16 px (mobil), 24 px (od 640), 32 px (od 1024).
- **Mřížka:** CSS Grid, 12 sloupců jen tam, kde je potřeba (visačky 7 + 5 / 5 + 7). Jinak dvousloupcové mřížky s poměry 1,5 : 1 (hero), 5 : 7 (kdo přijede, poptávka), 4 : 8 (recenze), 7 : 5 (kalkulačka, kontakt).
- **Zlomy:** 480, 560, 640, 720, 900, 1024, 1200, 1280 px. Pod 720 až 900 px je vše v jednom sloupci.
- **Škála rozestupů:** `--s-1` 4 px, `--s-2` 8, `--s-3` 12, `--s-4` 16, `--s-5` 24, `--s-6` 32, `--s-7` 48, `--s-8` 64, `--s-9` 96.
- **Sekce:** `--section-y: clamp(3.5rem, 2.4rem + 4.4vw, 7rem)` (56 až 112 px). Sousední sekce se nesčítají (druhá má `padding-top: 0`).
- **Výšky:** top bar 44 px (mobil) / 40 px (desktop), hlavička 64 / 72 px, hero na desktopu `min-height: calc(88dvh - top bar - hlavička)`, nikdy `100vh`.

---

## 6. Rádiusy

| Token | Hodnota | Kde |
|---|---|---|
| `--radius-btn` | 999 px | všechna tlačítka, čipy, segmentový přepínač, přepínač Den / Noc, plovoucí lišta, čipy dat (svislé kapsle) |
| `--radius-md` | 14 px | karty, visačky, panely, mapa, cookie lišta, obrázky |
| `--radius-sm` | 12 px | pole formuláře, denní pás, rohy lightbox obrázku |

Kruh (50 %) jen pro ikonová tlačítka (hamburger, poptávka v liště) a kroužky.

---

## 7. Stíny a záře

Na tmavém podkladu stín skoro nevidět, hloubku dělá **světlo**:

- **Záře pouliční lampy:** statický `radial-gradient(closest-side, var(--c-glow), transparent 72%)` v pravém horním rohu hero a hlaviček podstránek, v rohu panelu „Akutní?“, vizitky a závěrečné výzvy. Nikdy se nehýbe.
- **Záře klíčové dírky:** `filter: drop-shadow(0 0 28px var(--c-glow-strong))` na obalu, takže sleduje tvar dírky.
- **CTA:** `box-shadow: 0 18px 44px -20px var(--c-glow-strong)`, na hover silnější.
- **Panely nad mapou, lišta, cookie:** tónovaný stín `0 22px 44px -14px var(--c-shadow)` (noc černá 72 %, den ink 16 %) + 1px obrys `--c-line`.
- **Karty:** žádný stín, jen vnitřní obrys `inset 0 0 0 1px var(--c-line)`, na hover `--c-line-strong`.

---

## 8. Ikony

- **Phosphor Icons 2.1.2**, řez **regular** (1,5 px tah) pro UI, řez **fill** jen pro hvězdičky hodnocení.
- Ikony nikdy samy nenesou význam: vždy s textem, nebo s `aria-label` / skrytým textem.
- Velikost 1,05 až 1,4rem podle kontextu, barva `currentColor`. Oranžové jen v akcentních situacích (špendlík působnosti, aktivní režim v přepínači, chyba formuláře je v barvě chyby).
- Použité ikony: `phone`, `key` (hlavní CTA), `envelope-simple`, `map-pin`, `moon`, `sun`, `list`, `x`, `arrow-right`, `arrow-up-right`, `note-pencil`, `star`, `google-logo`, `storefront`, `navigation-arrow`, `door-open`, `car-profile`, `toolbox`, `van`, `info`, `receipt`, `plus`, `magnifying-glass-plus`, `download-simple`, `paper-plane-tilt`, `check-circle`, `warning-circle` (přes CSS `::before` u chyb).
- Emoji ani ručně kreslené ikony se nepoužívají.

---

## 9. Ilustrace: technické kresby

Klient si přál ilustrace, návrh B je pojímá jako **technický výkres**: přesná liniová kresba, jako list z dílenské dokumentace.

- **Motivy:** (a) řez cylindrickou vložkou (stavítka, pružiny, střižná rovina, klíč), (b) klíč se zuby a kroužkem, (c) klika a zámek dveří auta.
- **Linka:** 1,25 px, `vector-effect: non-scaling-stroke` (tloušťka se nemění s velikostí), zakončení kulatá.
- **Barvy:** obrysy `--c-ink` na 82 %, detaily `--c-muted`, šrafování řezu `--c-muted` na 42 %, **jediný** oranžový prvek na kresbu (jedno stavítko, kroužek klíče, vložka zámku auta).
- **Konvence výkresu:** šrafování řezu pod 45° (těleso a rotor opačným směrem), osy čerchovaně (`12 3 2 3`), skryté hrany čárkovaně (`4 3`), kóty s šikmými zarážkami. Žádné texty ani čísla v kresbě (nepředstírat přesnost).
- **Použití střídmě:** max. jedna kresba na sekci. Hlavička ceníku (vložka), skupina Auta v ceníku (auto), vizitka v kontaktu (klíč), dvě široké visačky na úvodu (vložka, klíč).
- **Implementace:** inline SVG (`_src/partials/ill-*.html`), aby šly barvit tokeny a fungovaly v obou režimech. Samostatné soubory pro jiné použití: `assets/img/illustrations/*.svg` (výchozí noční barvy). Kresby jsou dekorativní (`aria-hidden="true"`).

---

## 10. Fotografie

- **Směr:** skutečná práce a skutečný člověk. Ruce, nářadí, zámek, dveře, auto, Ondřej v pracovním. Nic ze stockových bank.
- **Zpracování v noci:** fotky se tlumí (`--photo-filter: brightness(.72) contrast(1.08) saturate(.8)`), aby na tmavé stránce neoslňovaly. V klíčové dírce se navíc přidává oranžové světlo shora (multiply). Ve dne jen jemná úprava (`brightness(.98)`).
- **Duotón (portrét):** stíny `--duo-lo` (#121417), světla `--duo-hi` (sodíková oranžová). Realizace: pozadí oranžové, fotka v odstínech šedi `mix-blend-mode: multiply`, přes ni vrstva `--duo-lo` s `lighten`. Funguje i na dovolenkové fotce, protože sjednotí barvy.
- **Ořez:** portrét 4 : 5 (desktop) / 1 : 1 (mobil), doklady 3 : 4, klíčová dírka 5 : 8.
- **Formáty:** WebP + JPG fallback přes `<picture>`, `srcset` 600w / 1200w, vždy `width` a `height`. Hero obrázek `fetchpriority="high"`, ostatní `loading="lazy"`.
- **Co nafotit (priorita):**
  1. Portrét Ondřeje v pracovním oblečení u dveří nebo u auta, na výšku i na šířku, večer pod pouliční lampou nebo s čelovkou (sedí ke konceptu), plus jeden denní.
  2. Detail rukou s nástrojem u cylindrické vložky (nahradí/doplní klíčovou dírku).
  3. Otevírání auta v noci, světlo z telefonu nebo lampy.
  4. Nářadí na tmavém podkladu (pro budoucí podstránky služeb).
  5. Auto nebo dodávka s označením (pokud existuje) pro Google profil.

---

## 11. Komponenty

Stavy u všech interaktivních prvků: **hover** (jemná změna obrysu nebo pozadí), **focus-visible** (2px prstenec `--c-focus`, odsazení 3 px; na oranžových tlačítkách prstenec v barvě `--c-ink`, jinak by splynul), **active** (`scale(.98)`), **disabled** (`opacity: .45`, bez ukazatele), **error** (jen pole formuláře).

### 11.1 Top bar
E-mail, telefon, působnost a přepínač Den / Noc. Výška 44 / 40 px, text 13 px `--c-muted`, hover `--c-ink`. Na mobilu jsou e-mail a telefon jen ikony (text zůstává pro čtečky jako skrytý), působnost zkrácená na „Liberecký kraj“, od 560 px celá („Liberecký kraj: Jablonecko, Semilsko, Liberecko“), od 900 px i texty e-mailu a telefonu. Dotykové plochy 44 px.

### 11.2 Hlavička
Sticky, pozadí `--c-bg`. Po odscrollování (`.is-scrolled` ze sdíleného `[data-header]`) spodní linka a průhlednost s rozostřením (s pevným fallbackem). Desktop: logo vlevo, menu (pilulky, aktivní položka s obrysem `--c-line-strong` a `aria-current="page"`), vpravo tlačítko „730 915 828“. Mobil: logo, tlačítko hovoru, hamburger (44 px kruh). Panel menu je přes celou výšku pod hlavičkou, položky v display řezu 28 až 36 px, aktivní oranžově, dole věta o provozní době.

### 11.3 Tlačítko hovoru (hlavní CTA)
Oranžová pilulka 64 px, vlevo tmavý kruh 48 px s ikonou klíče, vpravo číslo „730 915 828“ (Archivo 112 %, 650, 22 až 28 px, tabulkové číslice). Hover: světlejší oranžová a silnější záře, klíč se otočí o 90° (viz `UNIQUE-ELEMENTS.md`). Focus: stejné otočení + prstenec. Active: `scale(.98)`. Čtečky slyší „Zavolat 730 915 828“. Kompaktní verze (hlavička, lišta, patička, kalkulačka) má ikonu telefonu a výšku 44 až 52 px.

### 11.4 Ostatní tlačítka a odkazy
- `btn--ghost`: průhledné, obrys `--c-line-strong`, hover obrys `--c-ink` + pozadí `--c-surface-2`. Pro „Ohodnotit na …“, „Uložit do telefonu“, profily.
- `link-arrow`: podtržený text 600 se šipkou, hover oranžové podtržení a posun šipky o 3 px. „Ceník“, „O mně“, „Poslat poptávku“.
- Popisky tlačítek nikdy nezalamovat (`white-space: nowrap`).

### 11.5 Karty-visačky
Viz `UNIQUE-ELEMENTS.md`. Plocha `--c-surface-2`, rádius 14 px, skutečný průsek otvorem vlevo nahoře, oranžový kroužek. Hover: obrys `--c-line-strong`, šipka oranžová a o 4 px vpravo, visačka se na kroužku zhoupne o -0,8° až -1,4°. Focus: prstenec kolem celé visačky.

### 11.6 Formuláře
- Popisek nad polem (600, 16 px), nepovinná pole označena „(nepovinné)“, nápověda pod polem `--c-muted`.
- Pole: výška 52 px, rádius 12 px, pozadí `--c-bg` (v panelu `--c-surface` je tak zapuštěné), obrys `--c-line-strong` (3,6 : 1).
- Hover: obrys `--c-ink`. Focus: prstenec 2 px `--c-focus` + obrys v téže barvě.
- Chyba: obrys a vnitřní linka `--c-error`, text chyby pod polem s ikonou `warning-circle`, `aria-invalid="true"`, pole je propojené přes `aria-describedby`.
- Čipy (radio): pilulky 52 až 56 px, obrys `--c-line-strong`, vybraný = oranžová plocha s tmavým textem, fokus prstencem kolem čipu.
- Výběr data: sdílený `.date-chip` jako svislé kapsle (rádius 999 px), víkendy bez zvláštního zvýraznění (plánované práce jsou v běžné době za běžnou cenu).
- Odeslání: oranžové tlačítko 56 px „Odeslat poptávku“. Úspěch: panel s ikonou `check-circle` (`--c-success`), nadpis, věta a kompaktní CTA hovoru, fokus se přesune na panel.

### 11.7 Recenze
Levý sloupec (sticky od 1024 px): nadpis, segmentový přepínač Google / Seznam (pilulky, aktivní = `--c-ink` plocha s tmavým textem), souhrn (číslo 52 až 72 px, hvězdy, počet), výzva „Pomohl jsem vám? Budu rád za hodnocení.“ + tlačítko „Ohodnotit na …“ + odkaz „Všechny recenze na …“. Pravý sloupec: velká recenze (display 125 %, 22 až 30 px, max. 30 znaků na řádek) a dvě menší (max. 3 řádky, `line-clamp: 3`). Žádná automatická rotace.

### 11.8 Mapa působnosti
Leaflet se sdíleným `coverage-map.js`. Okresy oranžově (`--map-area-*`), základna Velké Hamry jako oranžový kroužek. Podklad podle režimu (`data-tiles` a třída `coverage-map--dark/--light`), návrh doladí filtr přes `--map-tile-filter`. Panel se seznamem okresů: od 1200 px leží na mapě vlevo nahoře (plný panel, s `backdrop-filter` jen jako vylepšení), pod 1200 px je pod mapou. Zoom tlačítka 40 px v barvách návrhu.

### 11.9 Patička
Pozadí `--c-surface`. Značka + kompaktní CTA, sloupce Kontakt (Ondřej Balý, IČ, Nejsem plátce DPH, telefon, e-mail), Působnost, Stránky (včetně Ochrany osobních údajů), Profily (Google, Firmy.cz) + tlačítko „Nastavení cookies“ + odkaz „Přihlášení“ (`/admin`, `rel="nofollow"`). Pod patičkou na střed „Web vytvořil Ing. Zdeněk Hejzlar“.

### 11.10 Cookie lišta
Sdílená konfigurace (orestbida v3). Barvy z tokenů, tlačítka pilulky 44 px, primární hover `--c-accent-hover`. Obě hlavní volby stejně výrazné.

### 11.11 Lightbox
Sdílený `<dialog>`, pozadí vždy tmavé, obrázek s rádiusem 14 px, ovládací tlačítka 48 px kruhy, šipky a Esc.

### 11.12 Plovoucí mobilní lišta
Viz `UNIQUE-ELEMENTS.md`. Pod 768 px, 12 px od okrajů, pilulka s oranžovým „730 915 828“ a kruhovým tlačítkem na poptávku.

### 11.13 Přepínač Den / Noc
Viz `UNIQUE-ELEMENTS.md`. Segmentový přepínač v top baru (dvě tlačítka s `aria-pressed`), aktivní režim s obrysem a oranžovou ikonou.

---

## 12. Pohyb

| Co | Proč | Jak | Reduced motion |
|---|---|---|---|
| Náběh hero (text po 60 ms, dírka) | hierarchie: první slogan, pak CTA | `rise` 0,8 s, `ease-out` | vypnuto |
| Otočení klíče v CTA | zpětná vazba: „tohle otevírá“ | `rotate(90deg)` 0,5 s pružinová křivka | bez otočení |
| Pulz tečky „Pohotovost aktivní“ | skutečný živý stav | `scale` + `opacity` 2,4 s, jen tečka | statická tečka |
| Zhoupnutí visačky | zpětná vazba na hover | `rotate(-0.8 až -1.4deg)` kolem otvoru | vypnuto |
| Odhalení sekcí při scrollu | klidné tempo čtení | `[data-reveal]`, 18 px + opacity, 0,8 s | vše hned viditelné |
| Vysunutí mobilní lišty | změna stavu | `translateY` + opacity 0,4 s | okamžitě |
| Přepnutí Den / Noc | změna stavu celé stránky | View Transitions API, prolínání 0,35 s | okamžitě |
| FAQ plus na křížek | stav otevřeno / zavřeno | `rotate(45deg)` | okamžitě |

Animuje se jen `transform` a `opacity`. Žádné scroll listenery (jen IntersectionObserver ze sdíleného skriptu a z `main.js`). Globální pojistka pod `prefers-reduced-motion: reduce` zkracuje všechny přechody na 0,01 ms.

---

## 13. Responzivita

- Mobile-first, bez vodorovného posuvu na 375 px (hero a hlavičky podstránek mají `overflow-x: clip`, záře tak nepřetékají).
- Na 375 × 667 je hlavní CTA nad ohybem (spodní hrana cca 411 px), klíčová dírka je pod ním a menší (max. 200 px šířky).
- Vícesloupcové sekce padají do jednoho sloupce pod 720 až 1024 px (viz jednotlivé bloky v CSS).
- Další služby: pod 1024 px vodorovný posuvný řádek se `scroll-snap`, od 1024 px mřížka 3 sloupce, od 1280 px 6 sloupců.
- Recenze a čipy ve formuláři: dva sloupce jen tam, kde je místo (720 až 1023 px a od 1280 px).
- Plovoucí lišta jen pod 768 px, stránka má dole rezervu 80 px, aby nic nezakryla.

---

## 14. Přístupnost

- Kontrasty dle tabulky 3.3, oranžová tlačítka s tmavým textem.
- Viditelný fokus všude, skip link „Přeskočit na obsah“, landmarky `header`, `nav`, `main`, `footer`, `aside`.
- `aria-current="page"` v menu, drobečková navigace na podstránkách.
- Dotykové plochy min. 44 px (top bar, hamburger, zoom mapy 40 px je výjimka Leafletu).
- Denní pás má textovou alternativu (legenda + skrytý popis dne + viditelná věta „Teď platí …“).
- Kalkulačka hlásí výsledek přes `aria-live="polite"`.
- Záložky recenzí podle WAI-ARIA (šipky, Home, End).
- Formulář: popisky nad poli, chyby textem (ne jen barvou), `aria-invalid`, `aria-describedby`, bez předvyplněného souhlasu.
- Obrázky s popisnými alt texty, dekorace `aria-hidden`.

---

## 15. Tailwind v4

Tokeny přes `@theme` (vzniknou z nich utility i CSS proměnné). Světlý režim přepisuje stejné proměnné pod `[data-theme="light"]`, takže utility fungují v obou režimech bez `dark:` variant.

```css
@import "tailwindcss";

/* světlý režim jen ručně (přepínač), systémové nastavení se nesleduje */
@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));

@theme {
  /* barvy: noc (výchozí) */
  --color-bg: #0E1012;
  --color-surface: #15181B;
  --color-surface-2: #1C2024;
  --color-ink: #ECEEF0;
  --color-muted: #9199A1;
  --color-line: #262B30;
  --color-line-strong: #68717A;
  --color-accent: #F07A2A;
  --color-accent-hover: #F58D47;
  --color-accent-text: #F07A2A;
  --color-on-accent: #0E1012;
  --color-live: #F07A2A;
  --color-focus: #F07A2A;
  --color-error: #FF8A7A;
  --color-success: #7FD1A0;
  --color-glow: rgb(240 122 42 / 0.12);
  --color-glow-strong: rgb(240 122 42 / 0.28);

  /* typografie */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-base--line-height: 1.6;
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h3--line-height: 1.2;
  --text-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --text-h2--line-height: 1.06;
  --text-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);
  --text-h1--line-height: 1;
  --text-hero: clamp(2rem, 1.1rem + 3.4vw, 3.625rem);
  --text-hero--line-height: 1.02;
  --text-price: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem);
  --text-price--line-height: 1;

  /* tvar */
  --radius-field: 12px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* layout */
  --container-page: 1240px;
  --spacing-section: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);

  /* pohyb */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --animate-live-pulse: live-pulse 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;

  @keyframes live-pulse {
    0% { transform: scale(1); opacity: 0.55; }
    80%, 100% { transform: scale(2.8); opacity: 0; }
  }
}

@layer base {
  :root { color-scheme: dark; }
  [data-theme="light"] {
    color-scheme: light;
    --color-bg: #F2F3F4;
    --color-surface: #FBFBFB;
    --color-surface-2: #ECEEF0;
    --color-ink: #111315;
    --color-muted: #555C63;
    --color-line: #D9DDE0;
    --color-line-strong: #7E868E;
    --color-accent: #EA6F22;
    --color-accent-hover: #DD6419;
    --color-accent-text: #B04A10;
    --color-on-accent: #111315;
    --color-live: #B04A10;
    --color-focus: #B04A10;
    --color-error: #B3261E;
    --color-success: #1E7A46;
    --color-glow: rgb(234 111 34 / 0.14);
    --color-glow-strong: rgb(234 111 34 / 0.22);
  }
  body { @apply bg-bg text-ink font-sans text-base antialiased; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
}

/* role písma (šířková osa) */
@utility font-display-x {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 780;
  letter-spacing: -0.01em;
}
@utility font-num {
  font-stretch: 112%;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
```

Příklad: `<a class="inline-flex items-center gap-3.5 rounded-pill bg-accent text-on-accent px-7 py-2 font-num text-2xl hover:bg-accent-hover">`.

Tokeny pro sdílené komponenty (`--c-bg`, `--c-surface`, `--c-ink`, `--c-muted`, `--c-line`, `--c-accent`, `--c-on-accent`, `--radius-sm`, `--radius-md`, `--radius-btn`, `--font-body`, `--font-display`, `--font-mono`) je v Laravelu nejjednodušší namapovat v jednom bloku: `--c-bg: var(--color-bg);` atd.

---

## 16. Dělat / nedělat

| Dělat | Nedělat |
|---|---|
| Tmavý režim jako výchozí pro všechny | Přepínat režim podle systému nebo denní doby |
| Oranžovou jen pro hovor, živý stav a kroužek | Oranžové nadpisy, ikony do počtu, oranžové pozadí sekcí |
| Číslo „730 915 828“ jako popisek každého tlačítka hovoru | „Zavolejte nám“, „Kontaktujte nás“, jiné varianty |
| Tabulkové číslice u cen a časů | Proporcionální číslice v cenících |
| Technické kresby střídmě, jedna oranžová věc | Ilustrace v každé sekci, barevné kresby, maskoti |
| Skutečné fotky, ztlumené v noci | Stock fotky, jasné bílé plochy na tmavé stránce |
| Pilulky u všeho, na co se klepe | Hranatá tlačítka, mix rádiusů |
| Statickou záři lampy | Animované gradienty, neonové obrysy textu |
| Pohyb jako zpětnou vazbu | Nekonečné smyčky kromě skutečného živého stavu |
| Plné panely s volitelným rozostřením | Sklo bez pevného fallbacku |
| Nadpisy větnými písmeny | VERZÁLKY, štítky nad každým nadpisem, číslování sekcí |