/* ═══════════════════════════════════════════════════════════════════════
NASTAVENÍ ZNAČKY — co měnit v novém projektu
═══════════════════════════════════════════════════════════════════════
Šablona se v novém projektu PŘEBARVUJE a přepisuje, nepřestavuje.
Typografie, mezery, mřížka, zlomy, pohyb, plovoucí lišta, mobilní menu,
cookies lišta i formulář jsou vyladěné na skutečných zařízeních a mají
zůstat beze změny. Podrobný postup redesignu: docs/DESIGN.md.
── MĚNIT: tokeny v :root (hned níže) ──────────────────────────────────
Barvy
· --modr ............ hlavní modrá (akcent značky): tlačítka, odkazy,
pilulky rubrik, otevřená karta FAQ, šipky. Bílý
text na ní i ona na bílé aspoň 4,5:1.
· --modr-tm ......... hover akcentu (o stupeň tmavší než --modr)
· --modr-sv ......... světlejší akcent pro kresby a netextové prvky
(na bílé jen jako netextový prvek, ≥ 3:1)
· --modr-ik ......... akcent na tmavém podkladu (kontakt, patka, štítky
na tmavé, zadní strana karet); na --tmava ≥ 4,5:1
· --tmava ........... hluboká tmavá plocha: formulář, kontakt, patka,
mobilní menu, dlaždice a karty
· --foto-bila ....... barva pozadí portrétu / plátna úvodu (fotka pak
na ploše nemá hranu)
· --bila ............ základní světlé pozadí stránky
· --seda ............ světlá plocha sekce otázek, hover v liště
· --linka ........... vlasové linky a obrysy karet
· --ink ............. hlavní text (≥ 7:1 na bílé)
· --ink-dim ......... tlumený text (≥ 4,5:1 na bílé i na --seda)
· --pole-linka, --pole-linka-h ... obrysy polí a neaktivních prvků
(≥ 3:1 kvůli WCAG 1.4.11)
· --chyba, --chyba-bg, --zavazek ... stavové barvy (jen s kontrolou
kontrastu)
· --w, --w-dim, --w-mute, --line-t ... bílá a její průhlednosti na tmavé
ploše; měnit jen tehdy, když --tmava přestane být tmavá
Písmo
· --ff .............. rodina písma. Font se načítá ve web.html v
( na Google Fonts, dnes Geist 100–900
i s kurzívou). Nová rodina musí mít skutečné řezy
400–800 a skutečnou kurzívu (font-synthesis-weight
je vypnuté). 'Interpunkce' nechat v --ff PŘED hlavní
rodinou (viz @font-face níže). Po změně rodiny
ověřit zlomy nadpisů — max-width jsou v ch.
Syrové barvy mimo :root (odvozené z tokenů — při změně značky dohledat
a nahradit RGB složku, krytí ponechat):
· rgba(106,61,240,…) = --modr ... .hl-nav a[aria-current], .bod-text
.reseni, .duo::after, .z-odpoved
· rgba(201,184,255,.20) = --modr-sv ... aura odznaku .f-odznak
· rgba(0,158,219,.30) ... druhý tón duotónu .duo::after
· rgba(36,18,61,…) ... tmavý tón posuvníku (html) a pozadí .cookies
· rgba(36,18,61,…) = --ink ... uvnitř --stin a --stin-plov (jen RGB)
· #35214F ... výplň automaticky vyplněného pole na tmavém panelu
· rgba(250,251,253,0) / rgba(252,253,254,.62) ... závoj spodní hrany
úvodu (.hero-scena::after), navazuje na --bila
· #hero::before (mobil a zařízení na výšku) ... 21 barev po 5 % z řádku
y=36 souboru images/hero-platno.webp (sloupce 1080–2559) — po výměně
plátna navzorkovat znovu
Obrázky úvodu: images/hero-platno.webp (2560×1488), hero-platno-m.webp
(1280×744), hero-portret.webp (1600×1600, průhledné pozadí). Při výměně
ZACHOVAT rozměry i kompozici (postava na stejném místě plátna, levá
třetina plátna světlá) — jinak nesedí pixelová čísla scény v sekci HERO.
── NEMĚNIT ────────────────────────────────────────────────────────────
· typová stupnice --t-*, proklady --lh-*, prostrkání --ls-*
· mezery --s1 … --s9, --sekce, --edge
· mřížka --kol-gap, --kol-7-5, --kol-5-7, --kol-6-6
· poloměry --r, --r-s, --r-pill; linky --line, --line-akcent, --bar-w,
--bar-h
· stíny --stin, --stin-plov (tvar, rozostření, krytí)
· lišta --hdr, --hdr-vule
· křivky --ease, --ease-prichod, --ease-kryt a všechny časy a zpoždění
v transition / animation
· zlomy media queries (360, 401–560, 561, 640, 900, 1000/1001, 1160,
1440×900, orientation, hover, prefers-reduced-motion, forced-colors)
· pixelová čísla scény úvodu (měřítka --s a --u, 1488, 2560, 1273…)
· názvy tříd a id — čtou je web.html, page.js, motion.js, kotvy.js
a cookies.js
Pevné rozměry v komentářích (zlomy nadpisů, výšky karet, šířky loga)
jsou měřené na textech určité délky: nový obsah držet v podobné délce,
nebo zlomy ověřit na 320, 375, 390, 768, 1024, 1280 a 1440 px.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
ŠABLONA WEBU — hlavní styly
JEDNA RODINA (dnes Geist 100–900, původně Archivo). JEDNA ODSAZOVACÍ STUPNICE. TŘI POLOMĚRY.
OSM VELIKOSTÍ PÍSMA.
Newsreader byl smazán: v se natahoval jen ve váze 400, takže neměl
tučný řez. Každý uvnitř serifového odstavce proto fyzicky přepnul
na Archivo — nebyl to styl, byla to konstrukční vada. K tomu x-výška
Archivo 0,526 em vs. Newsreader 0,433 em: při stejném font-size vypadal
Archivo o 21–24 % větší, takže deklarovaná a vnímaná hierarchie mířily
proti sobě. To je ta „nejednotnost“.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* ── PÍSMO ─────────────────────────────────────────────────────────── */
/* Písmo kostry = hlas dílny Figtree (SPEC 2.2). Figtree má vlastní českou
interpunkci („ “ … ·), rodina 'Interpunkce' proto ve stacku není potřeba. */
--ff:var(--f-ui); /* Figtree z css/zaklad.css (SPEC 2.4); @font-face Interpunkce níže zůstává */
/* ── TYPOVÁ STUPNICE — převzato z linkdr.com (Geist) ───────────────
Naměřeno v jejich DOM: H1 60/800/lh 1.0/ls −.033em · H2 36/600/lh 1.11/
ls −.03em · lead 20/500/lh 1.4 · text 16/400/lh 1.5 · popisek 14 ·
mikroverzálky 11/700/ls .12em.
Dvě odchylky, obě kvůli publiku 20–70 let: běžný text je 18 px místo 16
(jejich 16 je článek v appce, tohle čte i sedmdesátiletý) a popisek 15
místo 14. Poměry, váhy a tracking jsou převzaté beze změny. */
/* Jméno v úvodu je největší prvek na stránce — poměr k nadpisu sekce
vychází zhruba 4:1, k odstavci 8:1. To je plakátová stupnice, ne
„nadpis o dva stupně nad textem". */
--t-mega:clamp(50px,9.4vw,148px);
--t-display:clamp(38px,4.6vw,60px);
--t-h2:clamp(28px,3.6vw,50px);
--t-h3:clamp(19px,1.6vw,23px);
--t-lead:clamp(19px,1.5vw,20px);
--t-body:clamp(17px,1.2vw,18px);
--t-ui:16px;
--t-cap:15px;
--t-micro:11px;
/* jejich proklady: H1 = 1.0 (60/60), H2 = 1.11 (40/36), lead 1.4, text 1.5.
H1 zvednuto na 1.06 — 1.0 by v češtině uřízlo háček nad velkým Č. */
/* Souvislý text má jen DVĚ hodnoty: 1.65 pro běžný odstavec a 1.55 pro
větší uvozující větu. Na stránce jich bylo patnáct a čtyři z nich byly
pod 1.45 na textu, který se má číst (1.25, 1.30, 1.40, 1.42) — právě
odtud byl ten pocit sevřenosti. Referenční web, se kterým jsme to
srovnávali, drží 1.60–1.65 a pod 1.45 jde jen u displejových stupňů. */
--lh-display:1.06; --lh-h2:1.04; --lh-h3:1.35; --lh-lead:1.55; --lh-body:1.65;
--ls-display:-.033em; --ls-h2:-.04em; --ls-h3:-.01em;
--ls-txt:0; --ls-caps:.12em;
/* MOST: staré názvy kostry → tokeny SPEC (css/zaklad.css). Nemazat, dokud
je používá page.js / kostra (formulář dotazů, akordeon, mobilní menu). */
--modr:var(--kouzlo); --modr-tm:var(--kouzlo-h); --modr-sv:var(--s-lev); --modr-ik:var(--p-lev);
--tmava:var(--noc); --foto-bila:var(--list); --bila:var(--papir); --seda:var(--papir-2);
--zavazek:var(--uspech); --w:var(--list);
--w-dim:rgb(var(--papir-rgb) / .88); --w-mute:rgb(var(--papir-rgb) / .74); --line-t:var(--noc-linka);
--stin:var(--stin-karta); --stin-plov:var(--stin-zvednuta);
/* --linka, --ink, --ink-dim, --pole-linka, --pole-linka-h, --chyba, --chyba-bg
definuje css/zaklad.css pod stejným jménem (SPEC 2.4), proto tu nejsou. */
/* ── MŘÍŽKA A MEZERY ───────────────────────────────────────────────
Dvousloupcové sekce smějí použít JEN jeden ze tří poměrů a JEN
--kol-gap. Dřív bylo na stránce 13 svislých os a 4 různé mezery. */
--edge:clamp(20px,5vw,80px);
--kol-gap:clamp(32px,4vw,64px);
--kol-7-5:minmax(0,7fr) minmax(0,5fr);
--kol-5-7:minmax(0,5fr) minmax(0,7fr);
--kol-6-6:minmax(0,1fr) minmax(0,1fr);
/* jedna 4px stupnice; v gap/margin/padding nesmí být syrová px hodnota */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:96px;
--sekce:clamp(72px,8vw,128px);
/* ── TVARY — tři poloměry a jedno pravidlo ─────────────────────────
--r-pill = navigace a odkazy (něco někam VEDE)
--r-s = pole, odeslání, hlášky (něco DĚLÁ)
--r = fotky a plochy
Dřív jich bylo sedm. */
--r:16px; --r-s:12px; --r-pill:999px;
--line:1px; --line-akcent:3px;
--bar-w:40px; --bar-h:var(--line-akcent);
--hdr:80px; /* motion.js ji měří ze skutečné hlavičky */
--hdr-vule:24px;
--ease:cubic-bezier(.22,.61,.24,1);
/* ── KŘIVKY NÁSTUPU ────────────────────────────────────────────────
Dvě, ne jedna, a v tom je celý rozdíl mezi „nějaké animace tam jsou"
a pohybem, který působí draze.
--ease-prichod je exponenciální doběh: prvek se hned na začátku
rozjede skoro celou dráhu a zbytek dlouho doplouvá do klidu. Tak se
hýbe hmota, která něco váží. Symetrická křivka (rozjezd i dojezd
stejně dlouhý) je naopak to, co dělá pohyb strojovým — a přesně ta
tu předtím byla.
--ease-kryt je pro KRYTÍ a je záměrně jiná a mnohem kratší.
Nejčastější chyba je hnát krytí po téže dlouhé křivce jako pohyb:
text pak skoro sekundu visí poloprůhledný, špatně se čte a celé to
působí rozmazaně. Správně se obsah zviditelní rychle (do zhruba
0,4 s je plně čitelný) a POHYB dojíždí ještě dlouho potom — oko
čte obsah, periferní vidění vnímá dojezd. */
--ease-prichod:cubic-bezier(.16,1,.3,1);
--ease-kryt:cubic-bezier(.33,.9,.4,1);
color-scheme:light;
}
/* ── RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overscroll-behavior:none vypne gumové přetažení nad začátek a pod konec
stránky — stejně jako to má landing editoru. Bez toho se na trackpadu
i na telefonu za horní a spodní hranou odhalí šedý podklad prohlížeče
a lepivá hlavička se odlepí. */
/* ── KULATÁ INTERPUNKCE ─────────────────────────────────────────────────
Geist kreslí tečku, čárku, dvojtečku, středník i prostředník jako
ČTVEREČKY. V textu to působí technicky a v drobných stupních to vypadá
jako vada tisku. Montserrat je má kulaté.
Nemění se ale písmo — mění se JEN těch pár znaků. `unicode-range`
omezuje tuhle rodinu na U+2C–2E (čárka, spojovník, tečka), U+3A–3B
(dvojtečka, středník), U+B7 (prostředník), U+2013–2014 (pomlčky)
a U+2026 (výpustka). Všechno ostatní propadne na Geist, protože pro
znaky mimo rozsah se tahle rodina vůbec nezkouší.
Soubor je podmnožina z Google Fonts (Montserrat, variabilní 100–900,
licence SIL OFL), 1,7 kB. Hostuje se u nás, aby web ani tiskové PDF
nezáviselo na cizí URL, která se může změnit.
POŘADÍ V STACKU JE PODSTATNÉ: 'Interpunkce' musí být PŘED 'Geist',
jinak si Geist vezme tečku dřív, než na tuhle rodinu dojde řada. */
@font-face{
font-family:'Interpunkce';
font-style:normal;
font-weight:100 900;
font-display:block;
src:url('fonts/interpunkce-montserrat.woff2') format('woff2');
unicode-range:U+2C-2E, U+3A-3B, U+B7, U+2013-2014, U+2026;
}
html{background:var(--bila);scroll-behavior:smooth;overscroll-behavior:none;
scroll-padding-top:calc(var(--hdr) + var(--hdr-vule));
-webkit-text-size-adjust:100%;
/* macOS kreslí posuvník tence a přes obsah, bez vlastní stopy — Windows
Chromium (Chrome, Edge, Opera) defaultně kreslí širokou neprůhlednou
dráhu, na téhle stránce bílý pruh vpravo. Vlastní styl to sjednotí
na obou platformách na tenký, poloprůhledný pruh bez dráhy. */
scrollbar-width:thin;scrollbar-color:rgb(var(--ink-rgb) / .22) transparent}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgb(var(--ink-rgb) / .22);
border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:rgb(var(--ink-rgb) / .38);
border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
body{font-family:var(--ff);font-weight:400;font-synthesis-weight:none;
background:var(--bila);color:var(--ink);overscroll-behavior:none;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--modr);color:#fff}
/* Zalamování 2026: balance drží řádky nadpisu opticky stejně dlouhé,
pretty hlídá sirotky (osamocené slovo na posledním řádku odstavce).
Obojí je progresivní vylepšení — prohlížeč bez podpory je ignoruje.
POZOR: balance NEsmí na nadpisy sekané přes splitLines (R-lines) —
motion.js jim přepisuje textContent na po řádcích a balance by
se pral s ručním zlomem; těm zůstává výchozí zalamování. */
h1,h2:not(.R-lines),h3,.z-otazka{text-wrap:balance}
p{text-wrap:pretty}
:focus{outline:none}
/* Dvoubarevný prstenec: tmavé jádro + světlý lem drží ≥3:1 na bílé,
na šedé i na plné modré. Pole formuláře mají vlastní, decentnější. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;
box-shadow:0 0 0 6px var(--bila),0 0 0 8px var(--ink);border-radius:var(--r-s)}
.na-modre :focus-visible,.na-tmave :focus-visible,#hlavicka :focus-visible{
outline-color:var(--bila);
box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 0 8px var(--bila)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* ── TYPOGRAFIE ───────────────────────────────────────────────────────
Velikost ani rodinu neurčuje nikdy element — vždy třída. */
h1,h2,h3{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.t-display{font-size:var(--t-display);font-weight:800;line-height:var(--lh-display);
letter-spacing:var(--ls-display);color:var(--ink)}
/* Nadpisy sekcí nesou 60 px a váhu 800. Na 36 px a šestistovce byly proti
sedmdesátce v úvodu neviditelné a stránka neměla druhý typografický
stupeň — jen obří jméno a pak samý odstavec. */
.t-h2{font-size:var(--t-h2);font-weight:800;line-height:var(--lh-h2);
letter-spacing:var(--ls-h2);color:inherit}
/* MEZERA POD NADPISEM — jedna hodnota pro celý web. .t-h2 sama žádnou
neměla, takže tři sekce (řada znaků, poradna, otázky) měly odstavec
nalepený přímo pod účařím: naměřeno 0 px. U stupně 50 px s prokladem
1,04 je řádkový box těsný, takže nula znamená doslova nulu.
Hodnota je --s4, protože přesně tu má vztah nadpis→text všude jinde
(čtyři body programu i nadpis po odeslání formuláře). Dřív tu stálo
--s6 podle úvodní sekce představení, jenže 32 px byla na webu osamocená výjimka — sjednoceno dolů,
ne nahoru. Odsazení sedí na ODSTAVCI, ne na nadpisu: nadpisy, po kterých
následuje mřížka nebo obrázek, si tím drží vlastní odstup. */
.t-h2 + p{margin-top:var(--s4)}
/* Totéž pro nadpis, po kterém následuje blok místo odstavce — nadpis
v kontaktu měl taky nulu. */
.t-h2 + div{margin-top:var(--s4)}
.t-h3{font-size:var(--t-h3);font-weight:700;line-height:var(--lh-h3);
letter-spacing:var(--ls-h3);color:inherit}
.t-lead{font-size:var(--t-lead);font-weight:500;line-height:var(--lh-lead);
letter-spacing:var(--ls-txt);color:var(--ink);max-inline-size:44ch}
.t-body{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);
color:var(--ink-dim);max-inline-size:62ch}
.t-cap{font-size:var(--t-cap);font-weight:500;line-height:1.45;color:var(--ink-dim)}
.t-micro{font-size:var(--t-micro);font-weight:700;line-height:1.3;
letter-spacing:var(--ls-caps);text-transform:uppercase}
.t-zavazek{color:var(--zavazek);font-weight:600;margin-top:var(--s4)}
/* ── IKONY — Tabler Icons (MIT) ─────────────────────────────────────── */
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-ikonou{display:flex;align-items:flex-start;gap:var(--s3)}
.t-micro.s-ikonou{align-items:center;gap:var(--s2)}
.ico-btn{width:1.05em;height:1.05em;stroke-width:2.2;
transition:transform .28s var(--ease)}
.btn:hover .ico-btn{transform:translateX(4px)}
/* ── OBAL, PLOCHY, HLAVA SEKCE ──────────────────────────────────────── */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--edge)}
section{padding-block:var(--sekce)}
/* #kdo → #program: plný --sekce nahoře i dole na obou (až 128+128 px)
dělal mezi poslední kartou témat a rubrikou sekce kroků díru, jako
by spolu vůbec nesouvisely — přitom na sebe plynule navazují (kroky
jsou pokračování programu). Míň prostoru na tomhle jednom švu, ne na
celé stránce. */
#kdo{padding-top:var(--s7);padding-bottom:var(--s8)}
#program{padding-top:var(--s8)}
/* Kontakt → patka: plných 128 px pod posledním řádkem kontaktů dělalo
před nízkou patkou prázdný pás; 48 px stačí, patka má vlastní odstup.
A stejně tak nahoře: plný --sekce nad nadpisem kontaktu dělal mezi
poradnou a kontaktem díru — 64 px drží oddělení sekcí, ne propast. */
/* Kontakt i patka v jedné hluboké tmavě modré (světlá šedá i hlavní modrá
plocha vyzkoušeny a zamítnuty) — dole je zkrátka jen tmavá. */
#kontakt{padding-top:var(--s8);padding-bottom:var(--s7)}
/* jediný způsob, jak se sekce otevírá */
.sek-hlava{margin-bottom:var(--s8)}
.sek-hlava > * + *{margin-top:var(--s5)}
.zvyrazneni{color:var(--modr);font-weight:700}
/* Nadpis témat má i na širokých displejích držet dva řádky zalomené
zhruba v polovině (laděno na nadpisu o 38 znacích, zlom po čtvrtém
slově) — na plnou šířku byl jednořádkový a působil jako titulek novin,
ne jako blok. 17ch je font-relativní, takže zlom drží na každém
rozlišení; změřené pásmo správného zlomu je u nadpisu té délky 16 až
18ch (19ch už posunulo zlom o slovo dál, 14ch o slovo dřív). Při jiné
délce nadpisu pásmo ověřit znovu. Na mobilu (pod 561 px) se nechává přirozené
zalomení sloupcem — 17ch by tam byl UŽŠÍ než sloupec a rozbil by
ho na tři řádky. */
@media(min-width:561px){#kdo .sek-hlava h2{max-width:17ch}}
/* Zpátky na čistý text bez plochy — obdélníkový štítek (i bílý na
modré, i světle modrý na tmavé) čte se jako label komponenta ze
staršího webdesignu. Rozlišení nese barva a prostrkaná verzálka
samotná, žádná krabička okolo. */
.stitek{color:var(--modr);margin-bottom:var(--s4);display:block}
/* Tři nosné rubriky (sekce témat, kroků a otázek)
jako pilulka v hlavní modré s bílým textem — na přání zadavatele mají
vystoupit z řady běžných štítků. Ostatní štítky zůstávají holé
verzálky. */
.stitek--pilulka{display:inline-block;padding:var(--s2) var(--s4);
border-radius:var(--r-pill);background:var(--modr);color:var(--w)}
/* MODRÉ ČÁRKY ODSTRANĚNY z celého webu na přání zadavatele. Byly nad
štítkem sekce, nad štítkem programového bodu, nad nadpisem formuláře,
vlevo od kickeru v úvodu a vlevo od echa odeslané otázky. Rozlišení
nese samotná mikrotypografie — prostrkané verzálky v modři jsou
dostatečně odlišené i bez pruhu. */
/* Šedá je pryč ze všech světlých sekcí — jen bílá, tmavá a modrá zůstávají
jako barevné plochy. .na-sede je teď stejná bílá jako .na-bile; jméno
třídy zůstalo (mění se přes ni layout, ne barva), ale barvu nenese. */
.na-bile{background:var(--bila)}
.na-sede{background:var(--bila)}
.na-modre{background:var(--modr);color:var(--w)}
.na-modre .stitek{color:var(--w)}
.na-modre .t-body,.na-modre .t-lead{color:var(--w-dim)}
.na-tmave{background:var(--tmava);color:var(--w)}
/* Štítky na tmavé v modré Z IKON (--modr-ik) — plná hlavní modrá byla na tmavé
moc tmavá a bílá zase žádný akcent; tahle střední modrá je táž, jakou
nesou nakreslené ikony karet, takže nejde o novou barvu navíc. */
.na-tmave .stitek{color:var(--modr-ik)}
.na-tmave .t-body,.na-tmave .t-lead{color:var(--w-dim)}
/* tři poměry pro celou stránku, jedna mezera */
.poradna,.otazky-hlava,.otazky{display:grid;column-gap:var(--kol-gap)}
.poradna{grid-template-columns:var(--kol-7-5)}
.otazky-hlava{grid-template-columns:var(--kol-7-5)}
/* Celá sekce na světlé šedé: bílá plocha kolem krátkého akordeonu
působila prázdně. Na šedé dostanou bílé karty i bílá pole formuláře
obrys plochy a sekce se opticky zaplní. */
#otazky{background:var(--seda)}
/* Užší levý sloupec, širší akordeon — poměr z referenčního vzoru.
Dvě řádky mřížky: nahoře vlevo úvod (pilulka, nadpis, odstavec),
pod ním formulář; akordeon sedí ve DRUHÉ řádce vedle formuláře
a středí se VŮČI NĚMU (align-self:center), ne vůči celému sloupci
i s nadpisem — přesně tak to zadavatel chtěl. */
.otazky{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
align-items:start;row-gap:var(--s6)}
.otazky-uvod{grid-column:1;grid-row:1}
.otazky .formular-panel{grid-column:1;grid-row:2;align-self:start;width:100%}
/* Seznam se NEcentruje živě přes align-self — při rozbalení odpovědi by
se celý přepočítal a poskočil. Kotví ho jednorázový margin-top, který
po načtení spočítá page.js tak, aby SLOŽENÝ seznam seděl uprostřed
výšky formuláře; rozbalená odpověď pak roste jen SMĚREM DOLŮ. */
.otazky .faq-seznam{grid-column:2;grid-row:2;align-self:start}
.otazky-uvod > h2{margin-top:var(--s5)}
.otazky-uvod > .t-lead{margin-top:var(--s5);font-size:15px;line-height:1.65;
color:var(--ink-dim);max-width:46ch}
/* ── FAQ AKORDEON (podle referenčního vzoru) ─────────────────────────
Položka = zaoblená světlá karta; řádek otázky nese kulaté modré
tlačítko se šipkou, odpověď se rozbaluje pod ním. Výška se animuje
trikem grid-template-rows 0fr→1fr — jediný způsob, jak plynule
rozbalit obsah neznámé výšky bez měření v JS. */
/* Barevná řeč akordeonu = řeč zbytku webu: klidná šedá karta, na
hover se ohlásí vlasovým obrysem, OTEVŘENÁ karta zbělá, dostane
modrý vlasový obrys a měkký stín — stejné „vystoupení z plochy",
jakým mluví dlaždice a panely jinde. Otázka otevřené karty se
přebarví do hlavní modré. */
.faq-pol{border:var(--line) solid var(--linka);border-radius:16px;
background:var(--bila);overflow:hidden;
transition:background .25s var(--ease),border-color .25s var(--ease),
box-shadow .25s var(--ease)}
@media(hover:hover){.faq-pol:not(.otevrena):hover{border-color:var(--pole-linka)}}
/* OTEVŘENÁ karta je plná hlavní modrá s bílým textem (referenční vzor) —
jediná sytá plocha v seznamu, nejde přehlédnout, která odpověď se čte. */
.faq-pol.otevrena{background:var(--modr);border-color:var(--modr);
box-shadow:var(--stin)}
.faq-pol.otevrena .faq-ot{color:#fff}
.faq-pol.otevrena .faq-text{color:rgba(255,255,255,.88)}
.faq-pol.otevrena .faq-meta{color:rgba(255,255,255,.62)}
.faq-pol.otevrena .faq-meta b{color:#fff}
.faq-pol.otevrena .faq-sip{background:#fff;color:var(--modr)}
.faq-ot:focus-visible{outline:3px solid var(--modr);outline-offset:-3px;
border-radius:16px}
.faq-pol + .faq-pol{margin-top:var(--s4)}
.faq-ot{display:flex;align-items:center;justify-content:space-between;
gap:var(--s4);width:100%;padding:18px var(--s5);cursor:pointer;
text-align:left;font-family:inherit;font-size:17px;font-weight:600;
letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.faq-sip{flex:none;width:32px;height:32px;border-radius:50%;
background:var(--modr);color:#fff;display:flex;align-items:center;
justify-content:center;transition:transform .3s var(--ease),
background .2s var(--ease)}
.faq-sip svg{width:13px;height:13px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Hover ztmavuje kolečko jen na ZAVŘENÝCH kartách — na otevřené modré
kartě musí kolečko zůstat bílé (tmavě modrá na modré vypadala špatně). */
@media(hover:hover){
.faq-pol:not(.otevrena) .faq-ot:hover .faq-sip{background:var(--modr-tm)}
.faq-pol.otevrena .faq-ot:hover .faq-sip{background:#fff;color:var(--modr)}
}
.faq-pol.otevrena .faq-sip{transform:rotate(180deg)}
/* Výšku rozbalení animuje JS přes pevné px (viz page.js): přechod
grid-template-rows 0fr→1fr část mobilních prohlížečů neumí plynule
a rozbalení tam SKÁKALO. height v px umí animovat všechno. */
.faq-telo{height:0;overflow:hidden;
transition:height .42s var(--ease)}
/* Obsah se nevytahuje jen výškou — zároveň se prolne a dojede pár pixelů
shora. Bez toho vypadá text během rozjezdu jako přiskřípnutý pod
hranou; s prolnutím je vidět odpověď, ne posouvající se pruh.
Otevírání má malé zpoždění (text nabíhá, až je pro něj místo),
zavírání ho nemá — text zmizí dřív, než se karta stihne sesypat. */
.faq-telo-in{min-height:0;opacity:0;transform:translateY(-5px);
transition:opacity .2s var(--ease),transform .2s var(--ease)}
.faq-pol.otevrena .faq-telo-in{opacity:1;transform:none;
transition:opacity .34s var(--ease) .07s,transform .34s var(--ease) .07s}
.faq-text{padding:0 var(--s5);color:var(--ink-dim);
font-size:14.5px;line-height:1.65}
.faq-text + .faq-text{padding-top:var(--s3)}
.faq-meta{display:block;padding:var(--s3) var(--s5) var(--s4);
font-size:12.5px;color:var(--pole-linka-h)}
.faq-meta b{font-weight:700;color:var(--modr)}
/* Stránkování odpovědí (page.js): ‹ 01 / 02 › pohromadě uprostřed pod
seznamem. Šipky JSOU kolečka karet (.faq-sip) — plná hlavní modrá, bílá
šipka, 32 px, tentýž hover —, jen otočené do stran. Žádná linka ani
popisek. Čítač jedním tónem: zvýrazněné aktuální číslo vedle šedého
celkového působilo nesourodě.
Skrytá položka zůstává v DOM jako soused, takže první viditelná karta
na další stránce by bez pravidla s [hidden] dostala horní mezeru. */
.faq-nav{display:flex;align-items:center;justify-content:center;gap:var(--s3);
margin-top:var(--s5)}
.faq-pol[hidden] + .faq-pol{margin-top:0}
.faq-pocitadlo{min-width:4.5ch;text-align:center;font-size:14px;font-weight:600;
letter-spacing:.02em;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.faq-pocitadlo b{color:inherit;font-weight:inherit}
.faq-sipka{position:relative;width:32px;height:32px;flex:none;border:0;
border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
background:var(--modr);color:#fff;cursor:pointer;touch-action:manipulation;
transition:background .2s var(--ease),opacity .2s var(--ease),transform .1s var(--ease)}
/* dotyková plocha 44 px, viditelné kolečko zůstává 32 px jako na kartách */
.faq-sipka::before{content:'';position:absolute;inset:-6px;border-radius:inherit}
.faq-sipka svg{width:13px;height:13px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
.faq-sipka:not([aria-disabled="true"]):hover{background:var(--modr-tm)}
}
.faq-sipka:not([aria-disabled="true"]):active{transform:scale(.94)}
/* Krajní (neaktivní) šipka: ne vybledlá modrá, ale bílé kolečko s vlasovým
obrysem a šedou šipkou — týž obrys, jaký mají karty. Obrys je vnitřní
stín, takže kolečko zůstává přesně 32 px a nic neposkočí. */
.faq-sipka[aria-disabled="true"]{background:var(--bila);color:var(--pole-linka);
box-shadow:inset 0 0 0 1px var(--linka);cursor:default}
.faq-sipka:focus-visible{outline:3px solid var(--modr);outline-offset:3px;box-shadow:none}
@media(prefers-reduced-motion:reduce){
.faq-telo{transition:none!important}.faq-sip{transition:none}
.faq-telo-in{transition:none!important;opacity:1;transform:none}
}
/* ── HLAVIČKA — plovoucí pilulka ────────────────────────────────────── */
/* ŽÁDNÝ will-change:transform na hlavičce ani pilulce — NIKDY. Zkusil se
jako „zrychlení" scrollu a rozbil mobilní menu: will-change:transform
dělá z prvku containing block pro position:fixed potomky, takže se
.hl-menu-wrap (fixed, inset:0 — viz komentář u něj: musí ležet vůči
VIEWPORTU, ne vůči pilulce) ukotvil k pilulce a panel se ořízl do ní.
Plynulosti scrollu to navíc nepomohlo. */
#hlavicka{position:fixed;top:0;left:0;right:0;z-index:100;
padding:var(--s4) var(--edge) 0;
padding-top:calc(env(safe-area-inset-top,0px) + var(--s4));pointer-events:none}
.hl{display:flex;align-items:center;gap:var(--s2);
width:max-content;max-width:100%;margin-inline:auto;pointer-events:auto;
background:rgba(255,255,255,.88);
backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
border:var(--line) solid var(--linka);
border-radius:var(--r-pill);padding:var(--s2) var(--s2) var(--s2) var(--s5);
box-shadow:var(--stin-plov)}
/* flex:none — bez toho se logo v úzké mobilní liště smrskává spolu
s ostatními položkami. U textu by to jen zkrátilo řádek, ale znak
loga má šířku auto (dopočítanou z poměru stran), takže smrsknutí
jeho vlastního boxu obraz zdeformuje. Zmenšovat se má nav, ne logo. */
.hl-logo{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;flex:none;
font-size:var(--t-cap);font-weight:800;letter-spacing:-.02em;white-space:nowrap;
text-decoration:none;color:var(--ink);
/* Bez svislé dělicí linky za logem — odstraněno na přání, rozestup
stačí. (Mobilní pravidlo, které linku nulovalo, tím pádem jen
neškodně přebíjí nuly.) */
padding-right:var(--s3);margin-right:var(--s1)}
.hl-logo svg{width:24px;height:24px;fill:var(--modr);flex:none}
/* Varianta loga jako rastr () místo SVG znaku — s průhledným
pozadím, výška ladí se SVG znakem. */
.hl-logo img.hl-logo-znak{width:auto;height:26px;display:block;flex:none}
/* Znak nemusí být čtvercový (původní měl poměr 70,9 : 100, vyšší než
široký) — pevná šířka by ho zúžila nebo roztáhla. Šířka auto,
výška daná. */
.hl-logo svg.hl-logo-znak{width:auto;height:26px}
/* Mimo .hl (viz komentář v HTML u #hl-menu-panel) — na desktopu úplně
schovaný, na mobilu se stává celoobrazovkovým panelem. */
.hl-menu-wrap{display:none}
.hl-menu-btn{display:none}
.hl-nav{display:flex;gap:var(--s1)}
.hl-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;
white-space:nowrap;padding:0 var(--s3);border-radius:var(--r-pill);
text-decoration:none;color:var(--ink-dim);
font-size:var(--t-cap);font-weight:500;
transition:color .2s var(--ease),background .2s var(--ease)}
@media(hover:hover){.hl-nav a:hover{color:var(--ink);background:var(--seda)}}
.hl-nav a[aria-current="true"]{color:var(--modr);background:rgb(var(--kouzlo-rgb) / .08)}
.hl-cta{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
padding:0 var(--s5);border-radius:var(--r-pill);background:var(--modr);color:#fff;
font-size:var(--t-cap);font-weight:700;letter-spacing:var(--ls-txt);
text-decoration:none;white-space:nowrap;flex:none;margin-left:var(--s2);
transition:background .2s var(--ease),transform .1s var(--ease)}
.hl-cta:hover{background:var(--modr-tm)}
/* CTA sedí v desktopovém nav MEZI položkami (… předposlední odkaz · CTA ·
poslední odkaz — pořadí na přání zadavatele). Selektor .hl-nav a (0,1,1) je
silnější než .hl-cta (0,1,0), takže bez téhle přebíjky by pilulka
zdědila šedý vzhled položky. Mobilní panel má vlastní kopii, kde CTA
zůstává samostatně dole — tam tohle neplatí. */
.hl-nav a.hl-cta{padding:0 var(--s5);background:var(--modr);color:#fff;
font-weight:700;margin-left:var(--s2)}
@media(hover:hover){.hl-nav a.hl-cta:hover{background:var(--modr-tm);color:#fff}}
.hl-cta:active{transform:scale(.97)}
.skip{position:absolute;left:var(--s2);top:var(--s2);z-index:200;transform:translateY(-200%);
background:var(--modr);color:#fff;padding:var(--s4) var(--s5);border-radius:var(--r-s);
text-decoration:none;font-weight:700;transition:transform .2s var(--ease)}
.skip:focus{transform:none}
/* ── HERO ─────────────────────────────────────────────────────────────
Světlý úvod. Portrét je VÝŘEZ s průhledným pozadím a se spodkem
zapečeným do bílé (images/hero-portret.webp); sekce i bílé části plátna
jsou čistě bílé (--bila, #FFFFFF), takže fotka nikde nemá hranu a
vytrácí se do plochy. Proto žádný rám ani stín.
Motiv v pozadí leží pod tím jako náznak: zesvětlený, ne průhledný,
aby v něm nebyla šedivá špína.
Z úvodu editoru VF je převzatý kicker s LEVÝM PRUHEM (ne pilulka
s tečkou — to je nejrozeznatelnější podpis šablony) a dvojice tlačítek.
Naměřeno v předloze portrétu: temeno 4,6 %, zornice 34,8 %, ramena
73,2 % — proto portrét nikdy nesmí do bloku širšího než čtverec. */
/* --bila (čistě bílá). Dřív tu žádná CSS proměnná neuměla přebít
pixely zapečené v souborech samotných (portrét i městské plátno měly
podklad #F9FAFD/#F9FBFC, ne čistou bílou) — na širokém desktopu, kde
ta plocha kolem postavy i po stranách plátna tvoří velké souvislé
pole, to bylo vidět jako ostrý obdélník. Opraveno přímo v obrazových
souborech (jednorázový přepočet pixelů 25. 8., ne v CSS) — mají teď
na těch místech skutečných (255,255,255), takže sekce a fotka
konečně sedí na stejnou hodnotu, ne jen opticky blízkou. */
#hero{position:relative;overflow:hidden;padding:0;background:var(--bila)}
/* Plátno s motivem v pozadí úvodu (images/hero-platno.webp).
HOTOVÉ PLÁTNO: snímek je vygradovaný v Photoshopu a má v sobě zapečenou
geometrii, obě rozplynutí i krytí. CSS tu proto nemá masku, filtr, opacity
ani blend. Postupně tu bylo všechno z toho — řetězec sepia→hue-rotate→
saturate, dvě masky přes mask-composite, duotón blendem `color`,
isolation:isolate a nakonec mix-blend-mode:multiply. Nic z toho už neplatí
a nic z toho se sem nemá vracet: každá další vrstva efektu se ukázala jako
místo, kde se to rozbije.
Barva sekce je předpočítaná přímo v souboru (viz níže u .hero-mesto),
takže bílá plátna JE čistá bílá #FFFFFF (= --bila) a snímek nemá hranu. */
/* ── SCÉNA: MĚSTO + POSTAVA JAKO JEDEN CELEK ─────────────────────────────
Měřítko scény --s (velikost jednoho pixelu plátna) řídí VÝHRADNĚ výška
sekce. Dřív město běželo na object-fit:cover, tedy na max(šířka, výška):
při zúžení okna se přeškálovalo, kdežto postava viselá na výšce ne — a
motiv v pozadí postavě ujel za rameno. Teď obojí visí na téže veličině, takže
se nemůžou rozejít při žádné velikosti okna.
Že šířku měřítko neřídí, nevadí: plátno má levou třetinu i spodek čistě
bílé (změřeno: sloupce 0–640 a řádky 1448–1487 jsou přesně 255), takže
na širokém monitoru není co odhalit — bílá vedle bílé. */
.hero-scena{position:absolute;inset:0;z-index:0;overflow:hidden;
pointer-events:none;
/* Měřítko se počítá z TÉŽE hodnoty, jakou má výška sekce — tedy přímo
z min(93vh,890px) z .hero-in. Container query by dala totéž, ale tohle
nic nezapíná a nezavádí do řetězce další zádrhel. Když se výška sekce
v .hero-in změní, MUSÍ se změnit i tady, jinak se scéna rozejde.
DRUHÁ MEZ JE ŠÍŘKA. Jen z výšky by postava na užším okně zabrala 71 %
obrazovky a sazba by neměla kam — hlavní tlačítko leželo na postavě
(na 1001 px o 172 px, a to už před posunem doleva). Dělitel je 2560,
tedy šířka plátna: obě meze se přesně protínají na 1440 px, takže
schválená kompozice zůstává na pixel stejná a mění se jen pod ní.
Že plátno pak na užším okně nesahá k levému okraji, nevadí — jeho levá
třetina je stejně bílá jako sekce. */
--s:min(calc(min(93vh, 890px) / 1488), calc(100vw / 2560))}
/* PROČ decoding="sync" NA PLÁTNĚ (ve web.html) — nesahat na to.
Snímek vnořený dvakrát do absolutně umístěných obalů s overflow:hidden
se s decoding="async" v Chromiu nikdy nezkompozituje: element má správnou
velikost i pozici, je načtený, viditelný, kresba do