Komponenty

Tři varianty podle grafiky. Výchozí je žlutá: Exo 2 SemiBold 18, výška 52, šipka 16 px. Druhá .is-outline je bílá s tmavým obrysem 1,5 px (Zvýhodněná hypotéka, blok financing-examples), třetí .is-navy je tmavá se žlutým hoverem (Referenční projekty, blok project-showcase). Třídy .button, .is-outline, .is-navy, .has-arrow, .has-arrow-down (rotovaný chevron), .is-block, .is-small (malá varianta 40 / 14 z karet projektů). Hover na světlém pozadí CG Blue s bílým textem i šipkou, na tmavém pozadí (sekce .is-bg-dark nebo karta .is-dark) bílé s tmavým textem; obrys se na tmavém pozadí obrací na bílý.

Args pretitle, pretitleStyle (line), title, text, tag, align (center | left), size (hero | small), layout (split | actions), reveal, classes, id. Varianta split má sloupce v poměru 566 : 808; třída is-split-even v classes je přepne na 1 : 1. Varianta actions má vpravo slot pro ovladače — jeho obsah se předává {% call %} blokem, takže si markup (js-* třídy, ARIA) drží blok u sebe. Mezera pod hlavičkou je --spc-section-header, bloky si ji přepisují. Jako samostatná sekce stránky se komponenta vkládá blokem headline.

Poloprůhledné bílé sklo (--clr-glass) s rozostřeným podkladem (--blur-glass) — všude, kde text leží nad videem nebo nad tmavým přechodem: karta v hero, karta a vyhledávací panel v map-hero, dlaždice v cta-tiles. Je to jen CSS, žádné makro — každá karta má jiný obsah, třída se přidá na existující element. Modifikátor .has-line přidá žlutou linku 40 × 4 nad obsah. Rozměry se ladí proměnnými --glass-card-radius, --glass-card-line-width, --glass-card-line-gap a --glass-card-line-inline (auto linku vycentruje), a to na tomtéž elementu — deklarace na sekci nad ním by se neuplatnila.

Bez podpory backdrop-filter (starší Safari a Firefox, vypnuté průhlednosti) by bílá na 10 % text neunesla, proto @supports not podklad zatmaví na --glass-card-fallback (navy 65 %). Panel karty projektu má sklo vlastní — leží nad neprůhledným podkladem a zapíná se až od 768 px.

Dva drobné prvky, které sdílí karta nabídky (offer-dark, offer-light) s detailem programu v bloku programs a s blokem image-text-with-header. Podnadpis je <p>, ne nadpis — popisuje následující obsah, není to úroveň osnovy stránky. Výchozí je 20 SemiBold; třída is-small v classes ho přepne na drobných 16 Bold pro textový sloupec vedle obrázku. Bez textu se nevypíše nic.

Dekorativní linka 40 × 4 a pod ní titulek, oboje vlevo — vzor ze světlých sekcí s titulkem zarovnaným vlevo (financing-examples, layout-examples, download-cards, project-signpost). Od sectionHeader se liší tím, že linka je bez textu nadtitulku. Tři velikosti: h3 (35 Regular), h3-small (32 Regular, výchozí) a h4 (24 Bold); mezera pod linkou se odvozuje z velikosti (12 / 14 / 24), gap ji umí přebít. Titulek snese tučný akcent (<strong>), barva linky jde přebít proměnnou --line-header-line-color. Mezeru pod hlavičkou určuje blok, ne komponenta. Bez titulku se nevypíše nic.

Kolečko „i“ a drobný právní text pod obsahem sekce (poprvé v bloku financing-examples). Ikona je textový znak, ne SVG — tak je i v grafice — a je aria-hidden, význam nese text. Text je WYSIWYG pole, uvnitř platí styly .content-wrapper. Mezery kolem poznámky určuje blok, který ji vkládá, ne komponenta. Bez textu se nevypíše nic.

Šedomodrá linka 40 × 4, titulek ve dvou řezech (základ Regular, <strong> SemiBold), perex Medium a šedá poznámka. Markup si píše každý blok sám — obal .text-column (linka je jeho ::before, proto na něm visí data-reveal-line), uvnitř .text-column-title, .text-column-text a .text-column-note (odstavce z filtru paragraphs, mezi nimi 30). Používají ho bloky image-text-with-header a endowment-fund. Šířku sloupce určuje blok.

Fotka osoby, jméno, kontaktní řádky ve žlutém čtverci a volitelné CTA — používá je blok contact-cta (varianta s titulkem nad boxem), project-table a contact-list (kulatá fotka). Args name, photo, contacts (pole { type: 'phone' | 'email', value }, whitelist typů je v makru), cta, dál háky classes, photoClasses, bodyClasses, ctaClasses a lazy. Kontakty komponenta nečte odnikud — dostane je od bloku, takže můžou být globální (site.json) i osobní.

Obal je display: contents, takže fotka, sloupec jména i CTA zůstávají přímými položkami layoutu bloku; rozměry se ladí proměnnými --contact-person-* zapsanými na .blok .contact-person (fotka i --contact-person-photo-fit / -position / -bg / -ring). Řádky kreslí komponenta contact-row — jejich vzhled ladí --contact-row-* na .blok .contact-row. Jméno je popisek kontaktů (aria-labelledby), ne nadpis; fotka je dekorace (alt="") a smí přesahovat nad hranu boxu — obal proto nikdy nesmí mít overflow: hidden. Bez dat se nevypíše nic.

Globální panel „Sjednat schůzku“ — není blok, vkládá se jednou z layouts/base.njk a data má v _data/contactForm.json. Na téhle stránce je proto taky. Záložka je součástí panelu: zavřená vykouká u pravého okraje, po kliku vyjede celý panel a zůstane na jeho levé straně, druhý klik ho zase zasune (pod 768 px je z ní plovoucí kulaté tlačítko). Otevře ho i jakýkoli odkaz na kotvu #schuzka — js/components/anchors.ts ji na kotvě otevře místo scrollování. Není to modal ze components/modal/, jen sdílí jeho utility (focus trap, zámek scrollu, Esc).

Prohlížečka fotek postavená nad components/modal: dialog, focus trap, Esc, zámek scrollu i návrat fokusu zůstávají modalu, lightbox řeší jen fotku, popisek, počítadlo a listování šipkami ←/→. Makro vypíše prázdnou skořápku; sadu do ní vloží js/components/lightbox.ts voláním openLightbox(id, photos, index, trigger). Fotky se nevypisují dvakrát — collectPhotos(root) je přečte z odkazů .js-lightbox-item (href a data-srcset / data-webp / data-alt / data-width / data-height). Poprvé v bloku project-showcase. Skořápka je position: fixed, takže nesmí ležet uvnitř prvku s data-reveal.

Pole, zaškrtávátka, stavy a hlášky, ze kterých se skládá každý formulář v šabloně — kontaktní panel „Sjednat schůzku“ i registrace v bloku signup. Třídy jsou .form (mřížka), .form-row (sloupce vedle sebe), .form-field (jedno pole, stav .is-invalid), .form-required (hvězdička), .form-error (hláška pod polem, prázdná se skryje), .form-check (řádek se zaškrtávátkem), .form-control.has-icon + .form-control-icon (pole s ikonou vpravo), .form-control.has-icon-start (ikona vlevo, plátno 24 — adresní pole v magazine-order), .form-actions a .form-submit.

⚠ Ukázky níž nejsou <form>, ale <div class="form"> — stavy se vypisují staticky (stejně jako u tlačítek se tu neemuluje hover) a formulář v knihovně by se buď odesílal, nebo by po Enteru přenačetl stránku. Živé chování ukazuje vysouvací panel výš: odeslání řídí js/components/form.ts na třídě .js-form (s atributem data-mail odesílá na API, bez něj simuluje), který přepíná .is-submitting, .is-invalid a plní .js-form-message. Kontrakt těchto tříd se nesmí měnit.