Téma se přepíná v panelu vpravo dole — stejném, jakým se na klientských stránkách přehazují bloky.

Kaskáda mřížky — data-reveal-group

Nadpis po řádcích — reveal-lines

Řemeslo, na které se dá spolehnout.

Jednotlivé varianty

Vše respektuje systémové „omezit pohyb". Bez JS zůstane obsah viditelný a statický.

Barvy a povrchy

Primární — jediná plná škála

Brand se používá napříč celým systémem, takže si zaslouží plnou, ručně doladěnou škálu. Ostatní role mají jen tolik odstínů, kolik jich něco vykresluje — token, který nikde není vidět, nejde při tvorbě tématu zkontrolovat.

Sekundární — druhá barva brandu

Primární jedná (buttony, odkazy), sekundární zdůrazňuje (značky, čísla). Jednobarevný brand ji nastaví na odstín primární — nic se nerozbije.

Dva tokeny, protože značka a slovo nejsou stejná práce: base je barva, která se má vidět (tečka, linka u citátu), strong ta, která se má číst (čísla). Bezpečnostní žluť měří jako tečka výborně a jako číslo 1,85:1 — proto se strong měří, nevybírá. Brand s tmavou druhou barvou nastaví oba tokeny stejně a nic se nehne.

Terciární — akcent (volitelný)

Třetí barva brandu, pokud ji brand má (--color-accent). Nenastavená spadá na sekundární — tady ve swatchi i v odvozené paletě níže, kde z ní generátor v tom případě staví „accent" rampu. Vitarent sem dává CTA žlutou: buttony na ni míří přes --btn-surface, ale teprve deklarovaná jako barva se propíše do palety a do adminu. Bez -strong varianty schválně — žlutou nikde nic nečte, čitelný stupeň dopočítá generátor na 800.

Stavy — čtyři tokeny na roli

podklad · linka a ikona · text na podkladu · text na plné barvě

Úspěch

Varování

Chyba

Informace

Odvozená paleta — co z tématu odchází do adminu

Generuje backend-data/templates/tools/design_tokens.mjs z tématu výše; jde do setup/design každého klienta. Odstíny s rámečkem si zvolilo téma samo, zbytek je dopočítaný v Oklabu podle primárního žebříku.

Proč to není v tématu: drop-core popisuje barvy stupni (role × 50–900), my úkolem (soft je podklad, strong text na něm, on text na plné barvě). Osmdesát ručně vybraných hodnot na klienta by nikdo nevyplnil a většinu z nich nic nevykresluje — a hlavně by se ztratilo to, co stupeň říct neumí: strong je naměřená podmínka, ne rung. Proto zůstávají dva jazyky pro psaní a jeden pro výstup: překlad dělá generátor, a tady je vidět, co z něj vyleze.

Překladová tabulka: base → 500 a 600 · soft → nejsvětlejší stupeň, který ještě projde 4,5:1 proti strong (na tmavém tématu naopak nejtmavší) · strong → 800 · surface/alt/border → neutral 50/100/200 · text-muted/text → neutral 600/900.

Číslo je na všech čtyřech povrchech schválně: pozadí bloku je vlastnost instance, takže statistika může skončit na kterémkoliv z nich. Na světlých ji nese --color-secondary-strong, na brandu a inverzu ustoupí zvýraznění čitelnosti a číslo si vezme text-on-primary / text-on-inverse — jinak by každá role potřebovala jednu hodnotu na povrch a takovou sadu už nikdo nevyplní.

Fotopodklad (.section--photo)

Kontrola: každý text na každém povrchu musí splnit WCAG AA (PRINCIPLES §9). U fotopodkladu se měří proti nejsvětlejšímu pixelu pod každým řádkem — clona je nastavená na nejsvětlejší hodnotu, která projde na všech fotkách v knihovně, ne na té aktuální.

Stavové barvy

Úspěch, varování, chyba, informace. Každý stav má čtyři tokeny: podklad, linku, text na podkladu a text na plné barvě.

Plné barvy testují token -on — právě tady jantar nejčastěji propadne v kontrastu, aniž by to bylo na první pohled vidět.

Typografie

Buttony

Hover ověřit myší, fokus tabulátorem, stisk myší (button se lehce propadne). Poslední testuje dlouhý label.

Odkazy, tagy, eyebrow

Ikony — Phosphor

Předvybraná sada. Šest vah stejné kresby, ~9 000 ikon, MIT licence. Níže placeholdery v jejím stylu.

Před nasazením prvního klienta vyměnit za skutečné Phosphor SVG (BACKLOG). Výměna sady = jeden soubor.

Obrázky

Poměry 16:9, 4:3, 1:1. Třetí rámeček = fallback bez fotky (PRINCIPLES §6).

Formulářové prvky

Newsletter — sběr adres

Jedno pole, jeden button; na úzkém sloupci se dvojice sama zalomí do sloupce, bez breakpointu. Label pole je skrytý (viditelným nadpisem je titulek bloku nad formulářem), validaci dělá form.js stejně jako u kontaktního formuláře. Souhlas neřeší checkbox, ale potvrzovací e-mail — poznámka to říká.

Grafické radio karty

Radio skupina jako dlaždice: skutečný radio input leží neviditelně přes celou kartu, takže klávesnice, validace i odeslání vidí obyčejná radia. Zaškrtnutí kreslí vnitřní ring (nic se neposune), fokus stejný kroužek jako každý ovladač. Druhá skupina je textová s odznakem a nápovědou — odznak sedí kartě na rameni.

Slider s vypsanou hodnotou

Vyplněnou část dráhy drží scripts/range.js přes --range-fill, hodnotu píše do řádku pod ovladačem (formát data-range-format="czk", mezery sází Intl). Bez JS je to funkční nativní range — výplň stojí na fallbacku a řádek ukazuje výchozí hodnotu z markupu.

Formulář ve dvou krocích

Sekce data-step, tlačítka data-step-next / data-step-prev (type="button"). „Dál" validuje jen viditelný krok, ve stejném chybovém jazyce jako submit; odesílá se jednou, na konci. Bez JS se nic neskrývá — formulář je prostě jedna dlouhá stránka. Zkuste pokračovat s prázdným polem.

Karty — tři obsahové varianty

Prostřední karta testuje extrémně dlouhý titulek, pravá chybějící fotku. Najeď myší — karta se nadzvedne a fotka se pomalu přiblíží. Obrázek vede tam co titulek, ale je mimo pořadí tabulátoru: klávesnice ani čtečka se o stejný cíl nezastavují dvakrát.

Počty karet — mřížka se řídí obsahem

Jedna karta dostane jiný tvar, ne zmenšenou verzi řady tří — s fotkou se otočí na bok, bez fotky drží obsah na čitelné míře. Čtyři se lámou na 2×2 místo 3+1, neúplná řada začíná vlevo — tam, kde začíná každá jiná. Zmenšuj okno — na tabletu jsou dva sloupce, na mobilu jeden a jedna karta je zase obyčejná karta.

1 karta s fotkou

1 karta bez fotky

2 karty

4 karty

5 karet

Testimonial

Řada, kterou lze listovat. Tlačítka se objeví sama, jakmile je čím listovat — se dvěma kartami vypadá blok přesně jako obyčejná dvojice. Na dotyku se posouvá prstem, na trackpadu dvěma prsty; tlačítka jsou pro myš, která pro vodorovný posun žádné gesto nemá. Poslední karta má schválně krátký text a předposlední dlouhý — podpisy musí zůstat na společné patě.

Proces — kroky na časové ose

Očíslované kroky spolupráce se společnou spojnicí. Číslo píše CSS čítač, takže přeskládané kroky se přečíslují samy. Pin nese ikonu v barvě secondary, lhůta je metadata. Druhá ukázka je hraniční stav: tři kroky, bez lhůt, jeden s dlouhým názvem — patky se drží, spojnice končí u posledního pinu.

1. Zaslaná nabídkado 5 dnů

   Ocenění nemovitosti

   Zajistíme profesionální ocenění vaší nemovitosti, které bude základem pro stanovení výkupní ceny.

2. Osobní schůzkado 10 dní

   Individuální nabídka

   Připravíme vám nabídku na míru, která bude zohledňovat hodnotu nemovitosti i další faktory.

3. Ověřeno notářemdo 1 měsíce

   Právní zajištění

   Připravíme smlouvy, které garantují vaše práva, a celý proces ověříme notářsky.

4. Výplatado 2 měsíců

   Výplata peněz

   Po podpisu smlouvy vám bude vyplacena sjednaná částka a vy můžete dál bydlet ve svém domově.

Hraniční stav — 3 kroky, bez lhůt, dlouhý název

1. Poptávka

   Nezávazná konzultace zdarma a bez závazků po telefonu

   Zavoláte, my se ptáme. Nic nepodepisujete.

2. Zaměření

   Schůzka u vás

   Přijedeme, změříme, probereme možnosti.

3. Realizace

   Hotovo

   Předání a záruka.

Akordeon (FAQ)

Stránkování a drobečková navigace

Drobečková navigace je od 2026-08-04 samostatný blok (`block-crumbs`) — pevný na místě jako hlavička, jde jen schovat. Nese horní odsazení podstránky; když je schovaný, přebírá ho blok pod ním. Tady je jen komponenta; blok v kompozici ukazují podstránky.

Výpisy používají načíst další: odkaz na další stránku, který skript změní na „připoj další stránku“. Bez JS zůstane odkazem a funguje normálně. Uprostřed, protože nikam neposílá — je to konec seznamu ptající se, jestli pokračovat.

Předchozí/další zůstává v systému jako druhá možnost — na výpisu, kde dává větší smysl listovat než hromadit. Číslované stránky admin neumí: nedává šabloně počet stránek ani číslo té aktuální, takže by to byla komponenta, která vypadá dobře tady a na žádném reálném webu nejde postavit.

Na první stránce chybí levý odkaz úplně — ovládací prvek, který nejde použít, je lepší nekreslit než kreslit zašedle.

Kontaktní formulář (složený)

Kontaktní karty a mapa

Kanály rozepsané po kartách — to, co má kontaktní stránka nabídnout dřív než formulář. Na homepage zůstává jeden panel vedle formuláře (.contact-info), tady je z každého kanálu karta.

Řada srovná karty na stejnou výšku — správně, když nesou srovnatelně dlouhý obsah. Prostřední je schválně bez poznámky: takhle vypadá řada, když jedna karta výrazně kratší je, a proto se vedle formuláře skládají pod sebe (PRINCIPLES §8). Povinné údaje drží u spodní hrany a odděluje je linka — je to jiné publikum než adresa nad nimi.

Pod sebou — vedle formuláře

Stejná karta, jen .contact-cards--stack. Každá je přesně tak vysoká, kolik unese; žádná se nenatahuje na sousedku.

Mapa

Bezplatný embed, bez API klíče a bez fakturačního účtu — adresa je v parametru q=. Tlačítko patří mapě, takže bere její šířku a otevírá navigaci Googlu, ne náš vlastní embed.

Mapa — varianta na klepnutí

Stejná fasáda jako u videa a audia: dokud na ni nikdo neklepne, nejde ke Googlu jediný požadavek. Pro klienta, který má v zásadách napsáno, že se nic nenačítá samo — jinak stačí mapa výše. data-id je adresa tak, jak byste ji napsali do vyhledávání.

Dlouhý text (detail článku, textová stránka)

Článkové moduly

Prvky, které redaktor vkládá dovnitř textu — na rozdíl od bloků výše, ze kterých se skládá stránka. Živě je uvidíš v detailu článku.

Šířky: text · široký · přes celou šířku

Tři úrovně, jedna osa. Text drží čtecí míru, tabulky a podobné „ke čtení“ dostanou .is-wide, fotky a videa .is-full.

Autorský řádek

Bez fotky spadne na iniciály — autor bez portrétu je běžnější než s ním.

Vytržený citát

Deska, která se za rok zkroutí, není vada materiálu. Je to vada trpělivosti.

Obrázek s popiskem

Galerie — 12 fotek

Ve třech se galerie chová hezky sama od sebe; test je dvanáct. Mřížka se přizpůsobuje šířce, ne počtu, takže poslední řádka nikdy neroztáhne zbylé kusy do nesmyslných rozměrů.

Kliknutím obrázek zvětšíte. Procházet lze šipkami.

Video a playlist — načtou se až po kliknutí

Vložený iframe kontaktuje YouTube a nastaví cookies ve chvíli, kdy se stránka otevře. Tohle je zástupný obrázek; nic třetí strany se nenačte, dokud čtenář neklikne.

Přehrát video na YouTube Video se načte až po kliknutí. Do té doby se s YouTube nic nepřenáší.

Přehrávač zvuku

Vlastní ovládání, protože nativní <audio> se nedá otémovat. Převíjení potřebuje HTTP Range — když ho server neumí, lišta to řekne místo toho, aby kliknutí tiše ignorovala.

Soubor ke stažení

Faktový list a čísla projektu

Z detailu reference. Deska přišroubovaná k práci — dokumentární rejstřík, ne ozdoba. Obojí je v adminu vypnutelné: malá zakázka nemusí mít co vypsat.

Realizace

Březen 2026

Místo

Vsetín

Materiál

Jasanový masiv

Doba výroby

11 týdnů

• 6,4 mběžných metrů linky
• 1 kmenna všechna čela
• 11 týdnůod zaměření po montáž

Karta dalšího článku nebo reference