Soft „nature“ UI — téma a provoz

Stav dokumentu: Aktuální — vizuální směr, CSP, základní komponenty a částečné design tokeny (--radius-nature-* v @theme) jsou v kódu; ilustrace z R2 jako hero zůstávají v backlogu.

Tento dokument popisuje vizuální směr veřejného webu Soul of Herbs („měkká příroda“: zaoblené karty, pastelové plochy, jemná dekorace) a co je potřeba pro údržbu, rozšíření a přístupnost.

Související: plán komponent v 26-ui-components.md, obsahová pravidla v 30-content-guidelines.md.

Kde v kódu co žije

Oblast	Soubor	Poznámka
Globální pozadí těla, typografie display, tokeny zaoblení	`app/root.tsx` + `app/app.css`	`body` používá třídy z `nature.body`; v `@theme` jsou `--font-display` (Literata) a `--radius-nature-card` / `--radius-nature-inner` (utility `rounded-nature-*` v `nature-classes.ts` i veřejných routách katalogu a detailů).
Společné řetězce Tailwind tříd	`app/ui/nature-classes.ts`	Exportovaný objekt `nature` — literály pro JIT; neskládat dynamicky z částí.
Dekorace (SVG list, rozmazané „bloby“)	`app/components/nature-decor.tsx`	Čistě dekorativní; vždy `aria-hidden` u SVG / prázdných blobů.
Úvodní stránka	`app/routes/home.tsx`	Hero karta, technické info v `<details>`.
Katalog	`app/routes/byliny.tsx`	Mřížka karet, filtry v jedné velké kartě, technické poznámky / D1 v `<details>`.
Detail byliny	`app/routes/byliny.$slug.tsx`	Horní karta: text + první obrázek z `images` jako hero (`partitionHerbImages` v `app/lib/herb-images.ts`); sekce níže jako karty (`Section`).
Karta byliny v katalogu	`app/components/herb-card.tsx`	Odkazová karta — stejné utility jako dříve (`nature.herbCard`).
Bezpečnostní hlavičky (prod.)	`workers/security-headers.ts` + `workers/app.ts`	Na HTML odpovědích: CSP včetně `fonts.googleapis.com` / `fonts.gstatic.com`, `nosniff`, `Referrer-Policy`. Ve zdrojácích se CSP připojuje jen když `import.meta.env.PROD` (typicky `react-router dev` bez CSP; produkční Worker bundle z buildu hlavičky vždy doplní).

Fonty se načítají z Google Fonts v app/root.tsx (links): Inter (text) + Literata (nadpisy přes font-display).

Co je potřeba při změnách UI

Nové obrazovky — používej existující klíče z nature (karty, tlačítka, vstupy). Pokud vzniká třetí layout šířky, přidej nový klíč do nature-classes.ts místo kopírování dlouhých řetězců do více rout.
Nové barvy — drž se stone / emerald / amber / sky / rose s nízkou saturací na velkých plochách; akcenty a text musí držet rozumný kontrast (viz níže).
Ilustrace — dnešní motiv je inline SVG (LeafSprig) a CSS blob (SoftBlob). Pro vlastní ilustrace: jednotný styl (tloušť čar / paleta), WebP/SVG, rozumná velikost; dekorace nesmí být jediný nosič informace.
Dark mode — projekt spoléhá na prefers-color-scheme (Tailwind dark:). Každá nová komponenta musí mít dark: variantu pozadí, textu a ohraničení.
Reduced motion — jemné transition a active:scale jsou OK; při přidávání animací doplň @media (prefers-reduced-motion: reduce) (globálně v app.css nebo lokálně).

Přístupnost (povinné minimum)

Dekorativní SVG a bloby: aria-hidden="true" (už u LeafSprig / SoftBlob).
Kontrast: pastel na velkých plochách + tmavší text; odkazy a primární tlačítka musí zůstat čitelné proti pozadí.
Klávesová navigace: nativní prvky (<a>, <button>, <details>, <select>) zachovat; při vlastních „chip“ filtrech by bylo potřeba role a stavy (zatím používáme odkazy a formulářové prvky).

Závislosti a nasazení

Žádný nový npm balíček — čistě Tailwind + Google Fonts.
Fonts z CDN + CSP — produkční Worker přidává Content-Security-Policy na text/html (viz workers/security-headers.ts): style-src zahrnuje https://fonts.googleapis.com, font-src zahrnuje https://fonts.gstatic.com.

Budoucí rozšíření (volitelné)

Extrahovat z rout opakující se bloky (HerbCard, Section, EmptyHint) do app/components/ — hotovo: herb-card.tsx, herb-detail-section.tsx (další bloky detailu zůstávají inline dle 26-ui-components.md).
Ilustrace per bylina — první řádek images (po sort_order) jako hero vedle textu v horní kartě; public_url nebo R2 → /media/… (viz herb-detail.server.ts). Další obrázky zůstávají v sekci „Obrázky“.
Design tokeny částečně v @theme (app/app.css): zaoblení karet a vnitřních kontrol (rounded-nature-card, rounded-nature-inner) — barvy a stíny zatím zůstávají v Tailwind utility řetězcích v nature-classes.ts.