/* =========================================================
BattSwap — Electric machines should work. Not wait.
Light / Apple-inspired system · brand pink #FB5494
Panchang (display) + Inter (text)
========================================================= */
/* ---------------------------------------------------------
PÍSMA — od 10. 8. z vlastního serveru, ne z cizích CDN.
Předtím se tahala dvěma tagy z fonts.googleapis.com
a api.fontshare.com, a to s trikem media="print"
onload="this.media='all'". Ten trik jim schválně sníží
prioritu, takže první vykreslení proběhne systémovým
fontem a text pak přeskočí do Panchangu. Na studené cache
— což je každý první návštěvník, včetně Radka a investorů —
to znamená DNS + TLS na dva cizí hosty a teprve pak písmo.
Vlastní soubory to ruší celé: žádná třetí strana, žádné
přeskočení, a náhled na Netlify nezávisí na cizí dostupnosti.
Licence obojí dovoluje (Inter OFL, Panchang ITF Free Font
License) a brandmanuál sám na tyhle dva zdroje odkazuje.
Inter je variabilní (300–900) ve dvou subsetech; latin-ext
je tam kvůli české diakritice a znakům €, ×, −.
Panchang má jen ty řezy, které web opravdu používá.
--------------------------------------------------------- */
@font-face{
font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;
src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;
src:url('assets/fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{font-family:'Panchang';font-style:normal;font-weight:400;font-display:swap;
src:url('assets/fonts/panchang-400.woff2') format('woff2')}
@font-face{font-family:'Panchang';font-style:normal;font-weight:500;font-display:swap;
src:url('assets/fonts/panchang-500.woff2') format('woff2')}
@font-face{font-family:'Panchang';font-style:normal;font-weight:600;font-display:swap;
src:url('assets/fonts/panchang-600.woff2') format('woff2')}
@font-face{font-family:'Panchang';font-style:normal;font-weight:700;font-display:swap;
src:url('assets/fonts/panchang-700.woff2') format('woff2')}
@font-face{font-family:'Panchang';font-style:normal;font-weight:800;font-display:swap;
src:url('assets/fonts/panchang-800.woff2') format('woff2')}
:root{
--accent-rgb:251,84,148; /* pink — remapped to khaki on defense theme */
--pink:rgb(var(--accent-rgb));
--pink-deep:#E23E7C;
/* Růžová tam, kde musí nést text pod 24 px. Nikde jinde — jinde zůstává
#FB5494. Není to doplňková barva značky, je to funkční barva textu.
Michaela 10. 8.: značková #FB5494 má na bílé 3,09 : 1 a na text pod
24 px je potřeba 4,5. Tenhle odstín má stejný tón (337°) i sytost,
jen je o 4 % tmavší, a projde na KAŽDÉ světlé ploše z palety:
bílá 5,35 : 1 · --bg-2 4,92 : 1 · --bg-3 4,67 : 1
a bílý text na téhle výplni také 5,35 : 1
Doměřeno; můj první návrh #C84376 na --bg-2 padal na 4,27 a na
--bg-3 na 4,05, tedy pod práh. */
--pink-ink:#BD376B;
--pink-soft:rgba(var(--accent-rgb),.14);
--ink:#0E0E10;
--ink-2:#1D1D1F;
--muted:#6E6E73;
--muted-2:#9A9AA0;
--bg:#FFFFFF;
--bg-2:#F5F5F7;
--bg-3:#EFEFF2;
--card:#FFFFFF;
--line:rgba(0,0,0,.08);
--line-2:rgba(0,0,0,.05);
--charcoal:#161719;
--maxw:1180px;
--pad:clamp(20px,5vw,56px);
--font-display:'Panchang',system-ui,sans-serif;
--font-text:'Inter',system-ui,sans-serif;
/* ---- velikosti písma: devět kroků ---------------------------------
Bylo tu 128 různých hodnot ve 317 výskytech. Rozdíl mezi 13 a 13,4 px
nikdo vědomě nevidí, ale mozek při čtení hledá vzor — a když ho
nenajde, přečte to jako nepořádek. Hodnoty jsou z design systému.
Dvě dna, která se nesmí podlézt: text v kartě 15 px (--fs-sm),
verzálkový popisek 12 px (--fs-label). */
--fs-display:clamp(2.75rem,6vw,4.75rem); /* h1 hero */
--fs-h1:clamp(2.25rem,4.4vw,3.5rem); /* h1 podstránek */
--fs-h2:clamp(2rem,3.6vw,3rem); /* nadpis sekce */
--fs-h3:1.375rem; /* nadpis karty 22 */
--fs-lead:clamp(1.0625rem,1.25vw,1.1875rem); /* perex 17–19 */
--fs-body:1rem; /* 16 */
--fs-sm:.9375rem; /* 15 — text v kartě*/
--fs-xs:.8125rem; /* 13 — poznámky */
--fs-label:.75rem; /* 12 — JEN verzálky*/
/* ---- zaoblení: čtyři hodnoty, nic mezi tím -------------------------
Bylo tu 28 různých čísel včetně 12, 13, 14, 15, 17, 18, 19, 20, 22
a dvou různých „kulatých" (100px i 999px) na stejném tvaru. Oko to
čte jako nepořádek. Mapoval jsem podle významu prvku, ne podle čísla:
ikony a chipy sm, karty md, velké bloky lg, tlačítka pill.
Kolečka (50%) a drobné ukazatele pod 8 px zůstávají — nejsou to
karty a token by je zdeformoval. */
/* Nejmenší zaoblení pro tenké dráhy. Chybělo, a proto se rozutekly:
osa historie měla 2 px, pruhy grafů 4 px, posuvník 5 px. */
--r-xs:4px; /* tenké dráhy: posuvníky, osy, pruhy grafů */
--r-sm:10px; /* ikony, chipy, drobné dlaždice */
--r-md:16px; /* karty, panely */
--r-lg:24px; /* velké bloky, rámy scén */
--r-pill:999px; /* tlačítka, pilulky, dráhy */
/* staré názvy zůstávají, míří na nové hodnoty — ať se nemusí přepisovat
všech 23 míst, která je používají */
--radius:var(--r-md);
--radius-lg:var(--r-lg);
/* ---- stíny: tři výšky, vždy dvě složky ----------------------------
Jedna složka vypadá jako drop shadow z Wordu. Krátká ostrá dělá
kontakt s plochou, dlouhá měkká spad. Barva je odvozená z inkoustu
(11,12,14), ne černá — černá na světlé ploše šedne.
e1 karta ležící na ploše
e2 karta zvednutá hoverem, panel nad obsahem
e3 modal a plovoucí prvky
Na tmavé ploše stín nefunguje, tam se prvek odlišuje světlým okrajem
rgba(255,255,255,.10) — viz .fleetbar. */
/* Barva textu NA růžové výplni. Bílý text na #FB5494 má 3,09 : 1, což je
pod prahem — a takhle vypadalo 16 z 21 plných tlačítek na webu, včetně
„Talk to our team" v liště. Tmavý inkoust na téže růžové má 6,24 : 1,
takže značková barva zůstává přesně, jak je, a mění se jen popisek.
Nesmí to být var(--ink): na uhlu je --ink bílá a tlačítko by spadlo
zpátky na 3,09. Na defense je „růžová" vojenská zeleň, tam bílá
naopak platí (7,73 : 1) — proto to má vlastní hodnotu v tématu. */
/* Dvě různé situace na růžové, dva různé tokeny — nejde je slít:
--on-pink text NA růžové výplni v MALÉ velikosti (hlavička
tabulky, odznak v grafu — 12 px tučné). Tam platí
práh 4,5 a bílá by dala 3,09, takže tmavý inkoust.
--pink-btn výplň TLAČÍTEK. Je to tatáž růžová, jen o kousek
tmavší (#FA3882 místo #FB5494), aby bílý popisek měl
rezervu: 3,53 : 1 místo 3,09.
--on-pink-btn popisek tlačítka, bílý. Norma se plní velikostí —
19 px při řezu 700 je „velký tučný text", kde platí
mírnější práh 3 : 1, a 3,53 ho splní s rezervou.
--pink zůstává nedotčená pro grafiku a čísla. */
--on-pink:#0E0E10;
--pink-btn:#FA3882;
--on-pink-btn:#fff;
--e1:0 1px 2px rgba(11,12,14,.05),0 6px 16px -8px rgba(11,12,14,.12);
--e2:0 2px 6px rgba(11,12,14,.06),0 20px 40px -20px rgba(11,12,14,.22);
--e3:0 8px 24px rgba(11,12,14,.08),0 44px 80px -36px rgba(11,12,14,.32);
/* Nadzvednutí v barvě značky. Bylo pro totéž gesto šest hodnot
(krytí .5, .55, .6, .9 a čtyři různé rozostření). Zářiče, které něco
ZNAMENAJÍ (»tohle jsme my«, »vybráno«), zůstávají svoje — nejsou to
výšky, ale významy: .wl.me, .wnode, .gchip i, .trow.us, .lay--us.on. */
--lift:0 8px 22px -6px rgba(var(--accent-rgb),.55);
/* staré názvy jako přesměrování — 88 míst se tím srovná naráz */
--shadow:var(--e1);
--shadow-lg:var(--e2);
--ease:cubic-bezier(.16,1,.30,1);
}
/* Defense theme — same layout, military-green accent instead of pink */
:root[data-theme="defense"]{
--accent-rgb:63,90,48; /* military / forest green */
--pink:rgb(var(--accent-rgb));
--pink-deep:#24401f;
--charcoal:#1c241a;
--on-pink:#fff; /* vojenská zeleň je tmavá, bílý text má 7,73 : 1 */
--pink-btn:rgb(var(--accent-rgb)); /* zeleň už tmavá je, netmavíme */
--on-pink-btn:#fff;
}
/* pages with a LIGHT hero (defense, fleets) → keep the nav dark from the top */
:root[data-theme="defense"] .nav:not(.scrolled),
:root.light-nav .nav:not(.scrolled){background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line)}
:root[data-theme="defense"] .nav:not(.scrolled) .brand .logo-white,
:root.light-nav .nav:not(.scrolled) .brand .logo-white{display:none}
:root[data-theme="defense"] .nav:not(.scrolled) .brand .logo-dark,
:root.light-nav .nav:not(.scrolled) .brand .logo-dark{display:block}
:root[data-theme="defense"] .nav:not(.scrolled) .brand-suffix,
:root[data-theme="defense"] .nav:not(.scrolled) .nav-links a,
:root.light-nav .nav:not(.scrolled) .nav-links a,
:root.light-nav .nav:not(.scrolled) .navdrop > button{color:var(--muted)}
:root[data-theme="defense"] .nav:not(.scrolled) .navdrop > button{color:var(--muted)}
:root[data-theme="defense"] .nav:not(.scrolled) .burger,
:root.light-nav .nav:not(.scrolled) .burger{color:var(--ink)}
:root.light-nav .nav:not(.scrolled) .nav-links a:hover,
:root.light-nav .nav:not(.scrolled) .navdrop:hover > button,
:root.light-nav .nav:not(.scrolled) .navdrop.open > button{color:var(--ink)}
/* light full-bleed hero (matches the presentation defense slide) */
.dhero{position:relative;min-height:80svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
/* mobil: úzký vysoký rám ořízne fotku o ~2/3 — 45 % drží v záběru stanici, ne jen panely */
.dhero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 52%;z-index:-2}
.dhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--bg) 26%,rgba(245,245,247,.55) 46%,rgba(245,245,247,0) 70%)}
/* desktop: obrázek dostane vlastní půlku vpravo a měkce se rozplyne — nic se neschovává pod textem */
@media(min-width:900px){
/* fotka dostane pravé dvě třetiny, měkce se rozplyne a je posunutá tak,
aby v záběru zůstal vůz i stanice — ne jen solární panely */
.dhero .bg{left:auto;right:0;width:64%;object-position:24% 58%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.dhero::after{background:linear-gradient(100deg,var(--bg) 28%,rgba(245,245,247,.30) 42%,rgba(245,245,247,0) 56%)}
}
.dhero .wrap{padding-block:clamp(116px,15vh,170px)}
.dhero h1{font-size:var(--fs-display);max-width:16ch}
/* NEPŘEVÁDĚT na bílou. Zkusil jsem to podle bodu 1 a byla to chyba: hero na
defense NENÍ fotka pod textem — .dhero::after překrývá levou část bílým
přechodem a nadpis je tmavý inkoust. Bílý accent tam vyšel 1,00 : 1,
tedy bílá na bílé. Růžová tady leží na světlém podkladu a je to velký
tučný text, kde platí práh 3 : 1. */
.dhero h1 .accent{color:var(--pink)}
.dhero .lead{color:var(--muted);max-width:42ch}
/* desktop: text drží levou půlku, ať nezasahuje do fotky */
@media(min-width:900px){
.dhero h1{font-size:var(--fs-h1);max-width:13ch}
.dhero .lead{max-width:33ch}
.dhero .machines{max-width:50ch}
}
/* tlačítko na fotce potřebuje podklad, jinak zmizí (platí i na mobilu) */
.dhero .btn.ghost{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(0,0,0,.10)}
.dhero .btn.ghost:hover{background:rgba(255,255,255,.92);border-color:var(--pink);transition-duration:var(--t-fast)}
@media(max-width:620px){.dhero::after{background:linear-gradient(180deg,var(--bg) 40%,rgba(245,245,247,.6) 62%,transparent 90%)}}
/* coverage table */
.ctable{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:var(--fs-sm)}
.ctable th,.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.ctable th{font-family:var(--font-text);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.ctable td{font-family:var(--font-text);font-weight:600;color:var(--ink)}
.ctable td.cov{color:var(--pink)}
.ctable tr:last-child td{border-bottom:0}
.ctable tr:hover td{background:var(--bg-2);transition-duration:var(--t-fast)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--font-text);
background:var(--bg);color:var(--ink-2);line-height:1.55;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--pink);color:#fff}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.03;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,10vw,132px);position:relative}
.section.alt{background:var(--bg-2)}
.section.dark{background:var(--charcoal);color:#fff}
.section.dark h1,.section.dark h2,.section.dark h3{color:#fff}
.center{text-align:center;margin-inline:auto}
/* ---- popisek nad nadpisem ------------------------------------------
Michaela 10. 8.: „#FB5494 má na bílé kontrast 3,09 : 1 — na drobný text
nestačí a působí vyšisovaně. Dnes ji používáme na popisky, akcenty
nadpisů, čísla, ikony, rámečky i tlačítka, takže nezvýrazňuje nic."
Doměřeno: 3,089 : 1. Práh pro text pod 24 px je 4,5 : 1, chybí tedy
skoro třetina. Pro velký tučný text (práh 3,0) růžová projde.
Popisek má 0,74 rem = 11,8 px, tedy hluboko pod hranicí. Text je proto
šedý a růžovou nese jen ta čárka — grafický prvek, na který se kontrastní
pravidla nevztahují, a zvýraznění tím zůstane zachované. */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-weight:600;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
color:#63636A;
}
.eyebrow::before{content:"";flex:none;width:22px;height:1px;background:var(--pink)}
.center .eyebrow::before{display:none}
h2.h{font-size:var(--fs-h1);margin-top:.3em}
.h .muted{color:var(--muted-2)}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:54ch;margin-top:1.1em;line-height:1.6}
.center .lead{margin-inline:auto}
.pink{color:var(--pink)}
/* 720 px lámalo „Why operators choose BattSwap" (potřebuje 1351 px) na tři
řádky. U vystředěných nadpisů je místa dost, perex si šířku drží sám. */
.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px)}
.center.sec-head{max-width:900px}
.center.sec-head .lead{max-width:60ch;margin-inline:auto}
.center.sec-head{margin-inline:auto}
/* ---------- buttons (pink translucent glow on hover) ---------- */
.btn{
--bg-btn:var(--pink-btn);--fg:var(--on-pink-btn);
position:relative;display:inline-flex;align-items:center;gap:.55em;
/* 19 px natvrdo, ne var(--fs-lead). Ten je clamp(1.0625rem,1.25vw,1.1875rem)
a vyjde 17–18 px, takže by NIKDY nepřekročil hranici 18,66 px, od které
platí mírnější práh pro velký tučný text — a bílá na růžové by tím
spadla pod normu. Je to horní hodnota --fs-lead připíchnutá na fixní,
ne nová velikost mimo stupnici. */
font-weight:700;font-size:1.1875rem;padding:.72em 1.4em;border-radius:var(--r-pill);
background:var(--bg-btn);color:var(--fg);border:1px solid transparent;cursor:pointer;
isolation:isolate;overflow:hidden;
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.btn::after{ /* sheen sweep */
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
transform:translateX(-120%);transition:transform var(--t-slow) var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--lift),0 0 0 6px rgba(var(--accent-rgb),.12);transition-duration:var(--t-fast)}
.btn:hover::after{transform:translateX(120%);transition-duration:var(--t-fast)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px}
.btn.dark{--bg-btn:var(--ink);--fg:#fff}
.btn.dark:hover{box-shadow:var(--lift),0 0 0 6px rgba(var(--accent-rgb),.12);background:var(--pink-btn);color:var(--on-pink-btn);transition-duration:var(--t-fast)}
.btn.ghost{--bg-btn:transparent;--fg:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.10);transition-duration:var(--t-fast)}
/* .lg mělo font-size --fs-body (16 px), což by velké tlačítko poslalo POD
hranici 18,66 px a bílý popisek na růžové by přestal splňovat normu.
Velké tlačítko je proto ještě o kousek větší než základní. */
.btn.lg{padding:.95em 1.8em;font-size:1.25rem}
.btn.on-dark{--bg-btn:rgba(255,255,255,.1);--fg:#fff;border-color:rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.btn.on-dark:hover{background:var(--pink-btn);border-color:var(--pink-btn);color:var(--on-pink-btn);transition-duration:var(--t-fast)}
/* frosted "milk glass" — for buttons over the hero video */
.btn.glass{--bg-btn:rgba(255,255,255,.70);--fg:var(--ink);border-color:rgba(0,0,0,.10);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.btn.glass::after{display:none}
.btn.glass:hover{background:rgba(255,255,255,.92);border-color:var(--pink);color:var(--pink);box-shadow:var(--lift);transform:translateY(-2px);transition-duration:var(--t-fast)}
/* na tmavém heru (fleets — denní záběr) zůstává bílá varianta */
.hero.on-daylight .btn.glass{--bg-btn:rgba(255,255,255,.16);--fg:#fff;border-color:rgba(255,255,255,.32)}
.hero.on-daylight .btn.glass:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.55);color:#fff;transition-duration:var(--t-fast)}
/* ---------- nav ---------- */
.nav{
position:fixed;top:0;left:0;right:0;z-index:70;
display:flex;align-items:center;justify-content:space-between;
padding:14px var(--pad);transition:background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), padding var(--t-base) var(--ease);
}
/* Krytí bylo .72 a to je málo. Velký nadpis, který podjíždí lištu, přes ni
prosvítal jako rozmazaný flek — na fleets.html vypadal řádek „Built for
diverse" rozpatlaně, zatímco „fleet operations" pod lištou byl ostrý.
Přesně to Michaela hlásila jako „ořezává se to pod navigací". Odsazením
se to spravit nedá: na volném scrollu skončí pod lištou kterýkoli prvek.
Lišta proto musí být krycí — text za ni zaleze čistě.
Změřeno na pruhu lišty s nadpisem za ní (rozsah jasu, hladká bílá plocha
snese tak 2–3 stupně, než je flek vidět):
krytí .93, rozostření 18 px … rozsah 7 ← původní stav, vidět
krytí .93, rozostření 40 px … rozsah 4 ← slabší, ale ještě vidět
krycí bílá … rozsah 0 ← čisté, tohle je nasazené
Rozostření zůstává jen pro ten zlomek přechodu, kdy krytí ještě nedojelo.
Nad hero videem se nic nemění: tam lišta .scrolled nemá a je průhledná. */
.nav.scrolled{background:var(--bg);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line);padding-top:10px;padding-bottom:10px}
/* ---- menu nad tmavým podkladem -------------------------------------
Michaela 10. 8.: „.nav.scrolled se vždy přepne na bílou bez ohledu na
to, jaká sekce je pod ní. Nad tmavým videem a nad tmavými sekcemi tím
vzniká šedý pruh s tmavým logem a vypadá to jako nedodělek."
Třídu .nav--on-coal nasazuje script.js — na podstránkách podle sekcí
s data-surface="coal", na homepage podle toho, která scéna je právě
odkrytá (tam jsou to fáze jednoho přišpendleného prvku, takže je
observer nerozliší).
Do .scrolled ani do témat light-nav a defense se tím nesahá: ty míří
na .nav:not(.scrolled), tohle na .nav.scrolled.nav--on-coal.
Radek psal krytí .72; dávám krycí ze stejného důvodu jako u světlé
varianty výš — při .72 prosvítaly bílé nadpisy tmavých sekcí skrz. */
.nav.scrolled.nav--on-coal{background:#131418;
box-shadow:0 1px 0 rgba(255,255,255,.10)}
.nav.scrolled.nav--on-coal .brand,
.nav.scrolled.nav--on-coal .brand .mark,
.nav.scrolled.nav--on-coal .burger{color:#fff}
.nav.scrolled.nav--on-coal .brand .sw,
.nav.scrolled.nav--on-coal .brand-suffix{color:rgba(255,255,255,.65)}
.nav.scrolled.nav--on-coal .brand .logo-dark{display:none}
.nav.scrolled.nav--on-coal .brand .logo-white{display:block}
.nav.scrolled.nav--on-coal .nav-links a,
.nav.scrolled.nav--on-coal .navdrop > button{color:rgba(255,255,255,.82)}
.nav.scrolled.nav--on-coal .nav-links a:hover,
.nav.scrolled.nav--on-coal .navdrop:hover > button,
.nav.scrolled.nav--on-coal .navdrop.open > button{color:#fff}
/* Totéž ještě NEODSCROLLOVANÉ. Michaela 14. 8.: „lišta na sales.html je
světle šedá přes tmavou stránku a vypadá to jako chyba vykreslení."
Příčina: sales.html si na nasazuje light-nav, což byl do sloučení
sekcí pravdivý předpoklad — stránka začínala světle. Dnes je první sekce
#configure tmavá, takže nad ní ležela bílá lišta s krytím 0,7.
Tmavá varianta se proto neváže na .scrolled, ale na .nav--on-coal:
ta třída říká, co je POD lištou, a to je jediné, na čem záleží. */
:root.light-nav .nav.nav--on-coal:not(.scrolled){
/* Krycí, ne průsvitná. Průsvitnou variantu (krytí .55) jsem zkusil
a kontrola vzhledu ji právem shodila: bílý popisek na průsvitném
podkladu se nedá změřit, protože se nedá určit, co je pod ním —
a co se nedá změřit, to na investorském webu nemá být. Pod lištou
je tady plochá tmavá sekce, ne fotka, takže krycí barva nic nezakrývá.
Je to táž #131418 jako ve stavu .scrolled, jen bez posunu. */
background:#131418;
box-shadow:0 1px 0 rgba(255,255,255,.10)}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand .mark,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .burger{color:#fff}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand .sw,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand-suffix{color:rgba(255,255,255,.65)}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand .logo-dark{display:none}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .brand .logo-white{display:block}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .nav-links a,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .navdrop > button{color:rgba(255,255,255,.82)}
:root.light-nav .nav.nav--on-coal:not(.scrolled) .nav-links a:hover,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .navdrop:hover > button,
:root.light-nav .nav.nav--on-coal:not(.scrolled) .navdrop.open > button{color:#fff}
/* over the dark hero video: white nav until scrolled */
.nav:not(.scrolled) .brand,.nav:not(.scrolled) .brand .mark,.nav:not(.scrolled) .burger{color:#fff}
.nav:not(.scrolled) .brand .sw{color:rgba(255,255,255,.65)}
.nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.82)}
.nav:not(.scrolled) .nav-links a:hover{color:#fff;transition-duration:var(--t-fast)}
@media(max-width:940px){.nav:not(.scrolled) .nav-links a{color:var(--muted)}}
.brand{display:flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--ink)}
.brand .sw{font-weight:400;color:var(--muted)}
.brand .mark{width:28px;height:28px;color:var(--ink)}
/* official logo images from the brand manual */
.brand .logo{height:25px;width:auto;display:block}
/* ---- logo v heru větší, po scrollu zpět ----------------------------
Radek 12. 8.: „Na hero page logo bude trošku větší, jakmile začne
scrollovat, ono se malinko zmenší."
Zvětšuje se JEN transformací, ne výškou: výška by přepočítala řádek
navigace a menu by poskočilo. Osa je vlevo na střed, takže logo
zůstane ukotvené k levému okraji a nedýchá do stran. Výchozí stav
(v heru) je 1,35× z 25 px, tedy 33,75 px; po odscrollování 1×. */
.nav .brand{transform-origin:left center;
transition:transform var(--t-base) var(--ease)}
.nav:not(.scrolled) .brand{transform:scale(1.35)}
.nav.scrolled .brand{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
.nav .brand{transition:none}
}
.nav:not(.scrolled) .brand .logo-dark{display:none}
.nav.scrolled .brand .logo-white{display:none}
.footer .brand .logo{height:30px}
.brand-suffix{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);letter-spacing:-.01em;color:var(--muted);padding-left:.15em;align-self:center}
.nav:not(.scrolled) .brand-suffix{color:rgba(255,255,255,.72)}
.nav-links{display:flex;gap:1.9rem;align-items:center}
/* Křížek patří jen do mobilní zásuvky — na širokém okně žádná není. */
.nav-close{display:none}
.nav-links a{font-size:var(--fs-sm);color:var(--muted);transition:color var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--ink);transition-duration:var(--t-fast)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;background:none;border:0;color:var(--ink);width:28px;height:28px;cursor:pointer}
@media(max-width:940px){
/* Zavřená zásuvka je odsunutá mimo okno, ale do 13. 8. zůstávala
„visible" — a tím i zaostřitelná. Kdo jde po stránce klávesnicí,
spadl do neviditelných odkazů; přejímka to našla jako dotykový cíl
311×19 px s kontrastem 1 : 1. visibility se přepíná s prodlevou,
takže zavírací animace zůstane vidět celá. */
.nav-links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;justify-content:center;gap:1.6rem;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);transform:translateX(100%);visibility:hidden;transition:transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);border-left:1px solid var(--line)}
.nav-links.open{visibility:visible;transition:transform var(--t-base) var(--ease), visibility 0s}
/* V otevřené zásuvce je podklad bílý, ale lišta na homepage má bílý text —
„Solutions" tak vycházelo rgba(255,255,255,.82) na bílé, tedy 1,00 : 1
a doslova neviditelné. Uvnitř zásuvky proto platí barva jako u odkazů.
Kontrola to nenajde: zavřenou zásuvku neměří a otevřít ji neumí. */
.nav-links .navdrop > button,
.nav.scrolled.nav--on-coal .nav-links .navdrop > button,
.nav:not(.scrolled) .nav-links .navdrop > button{color:var(--muted)}
/* Terč 44×44 px, tedy nad normou 24. Sedí v pravém horním koutu zásuvky,
kde ho hledá ruka i oko; barva a zaoblení z design systému. */
.nav-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;
width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);
background:var(--bg-2);color:var(--ink);cursor:pointer;
transition:background var(--t-fast) var(--ease)}
.nav-close svg{width:20px;height:20px}
.nav-close:hover{background:var(--bg-3);transition-duration:var(--t-base)}
.nav-close:active{background:var(--bg-3)}
.nav-links.open{transform:none}
.nav-links a{font-size:var(--fs-body)}
.nav-cta .btn{display:none}
.burger{display:block}
}
/* ---------- hero — svět v pohybu ----------
Radkova fotka jako pozadí. Kamera se pomalu sune doleva (mírný
pohyb, ne statický obraz), drony létají v plátně nad ní.
Text vlevo nad čistou oblohou, tmavý závoj kvůli čitelnosti. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
overflow:hidden;color:#fff;background:#1A1B1D;isolation:isolate;perspective:1500px;perspective-origin:78% 30%}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;transform-style:preserve-3d}
/* ---- podklad hera na podstránkách (fleets.html) --------------------
Tahle tři pravidla v CSS CHYBĚLA. Zmizela, když se přepisovalo hero na
homepage, a protože .hero je display:flex, chovalo se video jako obsah:
.hero-video mělo šířku 1920 px a odstrčilo .hero-inner na x=1920, tedy
536 px za výřez. .hero{overflow:hidden} to odřízlo, IntersectionObserver
správně hlásil ratio 0, takže se nikdy nepřidalo .in — a nadpis
„Stop charging downtime." se nezobrazil vůbec. Změřeno 10. 8.
Michaela: „stránka se otevře jako 900 px videa bez jediného slova." */
.hero-poster{position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
/* ztmavení pod textem — bez něj je bílý nadpis na světlé fotce nečitelný;
hodnoty jsou doměřené, viz komentář u .hero.on-daylight níž */
.hero-scroll{position:absolute;left:50%;bottom:clamp(18px,3vh,34px);
transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.55em;
font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.72);pointer-events:none}
.hero-scroll .mouse{width:17px;height:26px;border-radius:9px;
border:1.5px solid rgba(255,255,255,.5);position:relative}
.hero-scroll .mouse::after{content:"";position:absolute;left:50%;top:5px;
width:2px;height:6px;border-radius:1px;background:rgba(255,255,255,.8);
transform:translateX(-50%);animation:msWheel 1.9s ease-in-out infinite}
@keyframes msWheel{0%,100%{transform:translate(-50%,0);opacity:1}
60%{transform:translate(-50%,7px);opacity:.25}}
@media(prefers-reduced-motion:reduce){.hero-scroll .mouse::after{animation:none}}
/* Radkův výřez zůstává celý: muž vpravo, oči míří na text vlevo.
Otáčení i klidový pohyb řídí skript — při scrollu se scéna
natáčí doleva, v klidu se jen nepatrně houpe. */
/* Dvě osy zvlášť, jinak to nejde dohromady:
– ZVĚTŠENÍ nese obal a roste odspodu, takže ukusuje z oblohy
a flotila dole zůstane celá vidět;
– OTÁČENÍ nese samotná fotka a jeho osa leží PŘÍMO V OBLIČEJI,
takže obličej se nikam neposune ani se nestlačí — otáčí se
kolem něj jen okolní svět. */
.hero-photo{transform-origin:50% 100%;will-change:transform}
.hero-fx{transform-origin:78% 30%;will-change:transform;backface-visibility:hidden}
/* Dvě vrstvy jedné fotky, obě přes stejný cover → drží zákryt na pixel.
Rozdíl v pohybu (ne v mapování) dělá tu hloubku: pozadí se skoro
nehýbe, muž ano, a protože je blízko, mění se u něj i perspektiva. */
.hero-photo video,.hero-photo img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 50%}
.hero-photo img{will-change:transform;backface-visibility:hidden}
/* Obě vrstvy MUSÍ mít stejný transform-origin: při stejném scale(1.055)
okolo různých bodů se rozejdou o (origin2−origin1)·(1−z), což tady
dělalo ~10 × 18 px — muž byl posunutý vůči pozadí i v klidu a přerod
pak kreslil dvojitý obraz. Natočení o 2,6° je tak malé, že posun osy
do středu rámu není na obličeji poznat (pod 1 px). */
/* Vrstvy musí být ŠIRŠÍ než rám. translate3d posouvá celý prvek, ne jen
obraz uvnitř — při posunu 4,2 % proto u pravé hrany zůstal pruh bez
obrázku a prosvítalo pozadí. Naměřeno jako tvrdý skok jasu 160 → 27
v jediném sloupci. Přesah 5 % na každou stranu je víc než největší
posun (4,2 %), takže rám je krytý v každé fázi.
Obě vrstvy mají stejný přesah i stejnou osu — jinak se rozejdou.
max-width:none je nutné — globální reset má img{max-width:100%}
a bez něj se šířka 110 % ořízne zpátky na 100 %. */
.hero-photo .hp-bg,.hero-photo .hp-man{width:110%;max-width:none;left:-5%;right:auto}
.hp-bg,.hp-man{transform-origin:50% 60%}
/* hero video leží úplně vespod a chová se jako ta fotka předtím */
.hp-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ---------- oblouk kamery ve dvou vrstvách ----------
Michaelin diagram z 10. 8.: kamera obíhá po oblouku zprava doleva,
postava zůstává v záběru, panorama v dálce beze změny.
Amplitudy jsou spočítané, ne odhadnuté. Obraz je 2400 px široký a
v rámu 1440x900 ho object-fit:cover zvětší podle výšky (900/1367 =
0,658), takže 1 px obrazu = 0,658 px na displeji. Vyplněný lem po muži
v pozadí má ~60 px obrazu = ~39 px na displeji. Rozdíl posunu obou
vrstev musí zůstat pod tím, jinak se u jeho obrysu ukáže zaplácnuté
místo. Muž ±2,2 % z 1440 px = ±32 px, pozadí ±0,35 % = ±5 px, tedy
rozdíl v krajní pozici 27 px = 41 px obrazu. Pod lemem, s rezervou.
Perioda 40 s a ease-in-out: v krajních polohách se pohyb zastaví a
otočí, takže není poznat, že se to vrací. Radek 8. 8.: „aby to byl
lehkej pohyb, který toho člověka až skoro hypnotizuje."
Jen vodorovně — nahoru a dolů výslovně nechtěl.
Běží to na compositoru (translate3d), takže to nestojí výkon. */
.hp-bg{animation:heroArcBg 40s cubic-bezier(.45,0,.55,1) infinite alternate}
.hp-man{z-index:1;animation:heroArcMan 40s cubic-bezier(.45,0,.55,1) infinite alternate}
/* Amplituda zvětšená 11. 8. podle HERO.md: „dnešní posun je tak malý, že to
působí, jako by se obraz skoro hýbal — a to je horší než klid."
Rozdíl posunu vrstev šel z 1,85 % na 3,6 % šířky prvku, tedy zhruba
dvojnásobek. Na okno 1440 px to je 52 px na displeji a 83 px v obraze
2560 px — proto má nové pozadí vyplněný lem 130 px, ne 60 jako dřív
(tools/hero-layers-novy.py). Kdyby se amplituda zvětšovala dál, musí se
znovu spočítat i ten lem, jinak u obrysu muže vykoukne zaplácnutá díra. */
@keyframes heroArcBg{
from{transform:translate3d(.6%,0,0)}
to{transform:translate3d(-.6%,0,0)}}
@keyframes heroArcMan{
from{transform:translate3d(4.2%,0,0)}
to{transform:translate3d(-4.2%,0,0)}}
@media(prefers-reduced-motion:reduce){
.hp-bg,.hp-man{animation:none;transform:none}}
.hp-bg{z-index:0}
.hp-man{z-index:1}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}
/* Ztmavení pod textem. Historie: radiální gradient dělal „čtvereček",
lineární přes celou výšku „mlhu". Tohle je jeden monotónní přechod
zleva, svisle vymaskovaný, takže drží pod textem a nad flotilou slábne.
Hodnoty jsou doměřené: prohledal jsem kombinace krytí a masky a hledal
tu, kde projde kontrast všech tří textů podle WCAG a zároveň zůstane
nad flotilou nejvíc světla. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
/* ZÁVOJ STAŽENÝ NA TŘETINU (15. 8.).
Do 14. 8. tu bylo krytí .90/.80/.62/.40/.20/.06 a kvůli němu byla levá
polovina obrazovky tmavá bez ohledu na to, jak světlý je film: při jasu
filmu 80 z 255 zbylo na kraji 23, ve 20 % šířky 30 a ve 38 % jen 41.
Přegradování filmu to spravit nemohlo — film tím závojem neprojde.
Tři dny se měřil SOUBOR místo OBRAZOVKY; od téhle dávky se jas hera
měří ze snímku, ne z videa.
Čitelnost textu proto nedrží závoj přes celý obraz, ale úzký stín jen
za blokem s textem (.hero-inner::before níž) a text-shadow. Kontrast
je doměřený na vykreslené stránce se zamrzlým videem, ne odhadnutý.
Barva je --coal rgb(19,20,24). Ta původní měla odstín 215° a sytost
67 %, tedy modrou, kterou brandmanuál nezná. */
background:linear-gradient(97deg,
rgba(19,20,24,.20) 0%, rgba(19,20,24,.15) 20%, rgba(19,20,24,.09) 38%,
rgba(19,20,24,.04) 54%, rgba(19,20,24,0) 70%);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,
rgba(0,0,0,.4) 77%,rgba(0,0,0,0) 88%);
mask-image:linear-gradient(180deg,#000 0%,#000 66%,
rgba(0,0,0,.4) 77%,rgba(0,0,0,0) 88%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(19,20,24,0) 0%,rgba(19,20,24,0) 70%,
rgba(19,20,24,.02) 86%,rgba(19,20,24,.06) 96%,rgba(19,20,24,.12) 100%)}
/* Stín JEN pod textem, ne přes celý obraz. Sedí na bloku s nadpisem,
perexem a odkazem, je o kousek širší než text a do stran i dolů
vymizí, takže na fotce nemá kde se vyloupnout. Tohle je to, co drží
kontrast — ne závoj přes celou šířku. */
.hero-inner{position:relative}
.hero-inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;
/* 18. 8.: rovný spád s maskou tvořil hranu na obou koncích — svisle
maska, vodorovně poslední zastávka gradientu. Na světlé fotce se
tím za textem vyloupl obdélník. Teď je to elipsa, která uvnitř
prvku dojede na nulu, takže hranu nemá kde udělat.
Prvek sedí PŘESNĚ na textovém bloku (inset:0). Větší nešel:
přesahoval pod pilulku „For last-mile commercial fleet managers",
a tam, kde stínítko zakryje neprůhledný prvek, vypadá jeho okraj
při měření jako skok krytí 0,25 na jediný pixel. Pilulka začíná
na 95 % výšky bloku (na 1440×621 už na 83 %), proto spád končí
nulou na 80 % poloměru.
Sílu drží měření kontrastu, ne odhad: vrchol je snížený z 0,62 na
0,42 a při něm má na 1440×900 perex 9,95 : 1 a h1 16,32 : 1,
na 390×844 perex 5,35 : 1 a h1 9,43 : 1 (prahy 5,0 a 4,0). */
inset:0;width:auto;height:auto;
background:radial-gradient(ellipse 46% 40% at 26% 40%,
rgba(19,20,24,.42) 0%,
rgba(19,20,24,.38) 26%,
rgba(19,20,24,.26) 48%,
rgba(19,20,24,.12) 68%,
rgba(19,20,24,.04) 84%,
rgba(19,20,24,0) 98%)}
.hero h1,.hero .lead,.hero .hero-play{text-shadow:0 1px 3px rgba(19,20,24,.55),
0 2px 16px rgba(19,20,24,.45)}
/* Na mobilu leží text přes celou šířku, takže stín pod ním musí být taky
přes celou šířku — sloupcová varianta výš by mu kryla jen dvě třetiny
a perex vycházel 3,04 : 1. Svisle se maskuje, aby nikde nekončil hranou. */
@media(max-width:900px){
/* Táž elipsa, jen širší a uprostřed — text jde na mobilu přes celou
šířku. Spád pod 180° tu dělal rovnou hranu nahoře i dole. */
.hero-inner::before{
inset:0;width:auto;height:auto;
background:radial-gradient(ellipse 56% 38% at 50% 42%,
rgba(19,20,24,.42) 0%,
rgba(19,20,24,.38) 26%,
rgba(19,20,24,.26) 48%,
rgba(19,20,24,.12) 68%,
rgba(19,20,24,.04) 84%,
rgba(19,20,24,0) 98%)}
}
/* ---- ztmavení hero na fleets.html ------------------------------------
Pražská fotka je světlá a bílý text na ní neprošel. Změřeno poctivě:
dva snímky téhož okamžiku, jeden s textem a jeden s `visibility:hidden`,
rozdíl dá přesně pixely glyfů a jasnost pozadí čtu na nich. Video je
při měření zamrzlé a projdu celou smyčku — jinak měřím pohyb, ne obraz.
Výchozí stav (5. percentil, nejhorší snímek smyčky):
1440 nadpis bílý 3,24 · nadpis růžový 1,64 · perex 4,53 · scroll 1,98
390 nadpis bílý 2,54 · nadpis růžový 2,00 · perex 2,46 · scroll 1,95
Rozhodující je RŮŽOVÝ řádek, ne bílý. #FB5494 má na čisté černé strop
6,72 : 1, takže na 4,5 potřebuje pozadí s jasností pod 0,025 — prakticky
černou. Proto je ztmavení silnější, než by bílý text potřeboval. Barvu
růžové jsem nesvětlal: tint, který by na 4,5 dosáhl při slabším ztmavení,
vyjde skoro bílý a akcent značky by zmizel.
Dvě geometrie, dvě řešení:
· 1440 — text stojí vlevo a blok nadpisu končí na x≈900 z 1440 (62 %),
takže přechod drží krytí až po 68 % a pak padá. Vpravo zůstane depo,
obloha i flotila ve světle. Ze čtyř zkoušených sil prošla tato.
· pod 900 px — text zabírá y 170–607 z 844 a ukazatel scrollu je na 793,
tedy skoro celý rám. Boční přechod nemá kam ustoupit, proto svislý.
Po nasazení, nejslabší hodnota přes celou smyčku:
1440 růžový nadpis 4,95 · scroll 6,90 · ostatní nad 16
390 růžový nadpis 5,21 · perex 14,75 · ostatní nad 13 */
.hero.on-daylight::before{
/* Ztmavení je PÁS NAHOŘE, ne klín zleva. Důvod: po odrůžovění může být
nadpis na dvou řádcích, a ten sahá do 91 % šířky — klín zleva by ho
neochránil. Všechen text ale leží v horní třetině (drobenka 189,
nadpis 232–500, perex 521, tlačítka 578–638), takže dole smí pás
doslábnout a dlažba i vozy zůstanou vidět.
Změřeno od nejslabší varianty nahoru, projde až tato:
krytí pásu .50 → nadpis 3,64 · tlačítko 2,80
krytí pásu .58 → nadpis 4,69 · tlačítko 3,32
krytí pásu .64 → nadpis 5,68 · tlačítko 3,94
krytí pásu .72 → nadpis 7,41 · tlačítko 4,75 ← nasazeno
Nadpis by vydržel i .50; drží to zpátky prosklené tlačítko (bílý text
na 16% bílé) a ukazatel scrollu. Až bude primární tlačítko plné
růžové (bod 2), nese kontrast samo a pás může zesvětlat. */
background:linear-gradient(180deg,
rgba(17,18,19,.72) 0%, rgba(17,18,19,.68) 46%, rgba(17,18,19,.52) 62%,
rgba(17,18,19,.20) 78%, rgba(17,18,19,.05) 100%);
-webkit-mask-image:none;mask-image:none}
/* Spodní vinětace nese ukazatel scrollu a spodní hranu tlačítek. Silnější
vinětace vyjde levněji než tmavší pás: díky ní prošlo ztmavení o dva
stupně slabší, než by jinak muselo být. */
.hero.on-daylight::after{height:42%;
background:linear-gradient(180deg,rgba(17,18,19,0) 0%,rgba(17,18,19,.231) 40%,
rgba(17,18,19,.495) 72%,rgba(17,18,19,.66) 100%)}
@media(max-width:900px){
/* Na mobilu text zabírá víc rámu, proto je pás delší a vinětace vyšší. */
.hero.on-daylight::before{
background:linear-gradient(180deg,
rgba(17,18,19,.68) 0%, rgba(17,18,19,.64) 46%, rgba(17,18,19,.50) 66%,
rgba(17,18,19,.22) 84%, rgba(17,18,19,.10) 100%)}
.hero.on-daylight::after{height:34%;
background:linear-gradient(180deg,rgba(17,18,19,0) 0%,
rgba(17,18,19,.18) 55%,rgba(17,18,19,.52) 100%)}
}
.hero .liveop-in .h{color:#fff}
/* nadpis leží na videu, proto bílý — viz .hero h1 .nowait */
.hero .liveop-in .h .accent{color:#fff}
.hero .liveop-in .lead{color:rgba(255,255,255,.78)}
/* 18. 8.: bylo rgba(255,255,255,.72). Text na fotce nemá důvod být
poloprůhledný — nejhorší snímek filmu dával 4,08 : 1 proti prahu 4,5.
Bílá zvedla i všechny ostatní snímky; na tři nejsvětlejší záběry ale
sama nestačí, viz ZPRAVA-18-8.md. */
.hero .liveop-in .eyebrow{color:#fff}
.hero .liveop-in .liveop-stats b{color:#fff}
.hero .liveop-in .liveop-stats div:first-child b{color:var(--pink)}
.hero .liveop-in .liveop-stats i{color:rgba(255,255,255,.6)}
/* Místo tří technických čísel jediný marker a tlačítko na zvuk (Radek 8. 8.).
Řádek je proto úzký, ne roztažený na tři sloupce. */
.hero .liveop-in .liveop-stats{gap:clamp(12px,1.6vw,20px);align-items:center;
margin-top:clamp(16px,2.2vh,26px)}
.liveop-live{display:inline-flex;align-items:center;gap:.5em;
font-family:var(--font-text);font-size:var(--fs-label);font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:#fff;
padding:.5em .85em .5em .75em;border-radius:var(--r-pill);
background:rgba(var(--accent-rgb),.22);
border:1px solid rgba(var(--accent-rgb),.55)}
.liveop-live::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--pink);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.7);
animation:opLive 2.4s ease-out infinite}
@keyframes opLive{
0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.65)}
70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}
100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media(prefers-reduced-motion:reduce){.liveop-live::before{animation:none}}
.liveop-sound{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
font-family:var(--font-text);font-size:var(--fs-label);font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.86);
padding:.5em .9em;border-radius:var(--r-pill);
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
backdrop-filter:blur(6px);transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)
border-color .3s ease}
.liveop-sound svg{width:16px;height:16px;flex:none}
.liveop-sound .ls-on{display:none}
.liveop-sound[aria-pressed="true"]{color:#fff;
background:rgba(var(--accent-rgb),.26);border-color:rgba(var(--accent-rgb),.6)}
.liveop-sound[aria-pressed="true"] .ls-on{display:block}
.liveop-sound[aria-pressed="true"] .ls-off{display:none}
.liveop-sound:hover{background:rgba(255,255,255,.18);color:#fff;transition-duration:var(--t-fast)}
.liveop-sound:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* Celý blok má pointer-events:none, aby neblokoval scénu pod sebou.
Tlačítko se dá kliknout jen když je text opravdu vidět — jinak by
neviditelné tlačítko bralo myš vějíři, což se tady už třikrát stalo. */
.hero .liveop-in.on .liveop-sound{pointer-events:auto}
/* z-index 7, ne 4. Při přehazování pořadí (hero → vějíř → video) se .hp-vid
vytáhlo z .hero-photo a dostalo z-index 6 — a tím se tenhle text dostal
POD video, takže byl celý neviditelný. Sedmičku sdílí s vrstvami
(.sc-wipe--layers), které jsou v DOM později, takže scéna text správně
překryje, jak má. Vějíř (z 5) mu nevadí: v jeho fázi má text krytí 0. */
.hero .liveop-in{position:absolute;left:0;right:0;bottom:0;z-index:7;opacity:0;
margin-inline:auto;max-width:var(--maxw);padding-inline:var(--pad);pointer-events:none}
.hero .liveop-in::before{content:"";position:absolute;left:-100vw;right:-100vw;bottom:-40px;top:-40px;
z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(17,18,19,0) 0%,rgba(17,18,19,.55) 55%,rgba(17,18,19,.78) 100%)}
/* Hero je přes celou šířku, takže obal tu smí být širší než 1180 px běžné
sekce: nadpis „Stop charging downtime." potřebuje na jeden řádek 1134 px.
V noci jsem to zkusil a vrátil, protože růžový řádek nadpisu při téhle
šířce zabíhal do světlé části fotky a padal na 1,39 : 1. Michaela 11. 8.
nadpis odrůžověla, a bílá tu šířku unese — takže dva řádky můžou být. */
.hero .hero-inner{max-width:1300px}
.hero-inner{position:relative;z-index:3;width:100%;padding-block:clamp(90px,12vh,140px) clamp(150px,20vh,210px)}
.hero .hero-inner>*{max-width:min(100%,var(--hero-col,600px))}
@media(min-width:900px){.hero-inner{--hero-col:min(600px,calc(43vw - 20px))}}
/* nahoře jen tři položky jako v Radkově návrhu; zbytek zůstává v menu */
@media(min-width:901px){.nav-links .nav-more{display:none}}
.hero [data-hero-in]{opacity:0;transform:translateY(18px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.hero [data-hero-in].in{opacity:1;transform:none}
html.hero-intro .nav{opacity:0;pointer-events:none}
.nav{transition:opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease)}
.hero .hero-inner .eyebrow{color:rgba(255,255,255,.72);opacity:1}
.hero h1{color:#fff;font-size:var(--fs-h2);font-weight:700;
max-width:100%;margin-top:.35em;line-height:1.05}
/* Michaela 11. 8.: „nadpis celý bílý — růžová patří na akci a na jedno
číslo, ne na text." Navíc to uvolní ruce ztmavení: #FB5494 má na čisté
černé strop 6,72 : 1, takže kvůli ní musela být fotka skoro černá.
Bílá má rezervu, takže překryv může být výrazně slabší. */
.hero h1 .nowait{color:#fff}
/* Scény (vějíř, vrstvy, historie) jsou taky uvnitř .hero, takže bílé
písmo hera se na ně nesmí vztahovat — lead by byl bílý na bílé. */
.hero .hero-inner p.lead{color:rgba(255,255,255,.76);max-width:44ch;font-size:var(--fs-lead)}
/* „See live operation" */
.hero-play{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.9rem;
color:#fff;font-weight:600;font-size:var(--fs-body);text-decoration:none}
.hero-play .hp-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
border:1.5px solid rgba(var(--accent-rgb),.75);color:var(--pink);flex:none;
transition:background var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.hero-play .hp-ic svg{width:16px;height:16px;margin-left:2px}
.hero-play .hp-ar{width:18px;height:18px;color:var(--pink);transition:transform var(--t-base) var(--ease)}
.hero-play:hover .hp-ic{background:rgba(var(--accent-rgb),.18);transform:scale(1.06);transition-duration:var(--t-fast)}
.hero-play:hover .hp-ar{transform:translateX(5px);transition-duration:var(--t-fast)}
/* Spodní pruh pro flotily je pryč. Byl to fixní tmavý banner přes celou
šířku, který ležel přes hero. Proklik na konfigurátor je teď druhým,
tichým odkazem vedle hlavního CTA (.hero-alt). */
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;
gap:clamp(16px,2.4vw,42px);margin-top:1.9rem}
.hero-cta .hero-play{margin-top:0}
/* Bez podtržení (Michaela 7. 8.) — vedle hlavního odkazu ho drží jen
šipka a váha písma, stejně jako u „See live operation". */
.hero-alt{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
color:rgba(255,255,255,.88);font-weight:600;font-size:var(--fs-sm);
transition:color var(--t-fast) var(--ease)}
.hero-alt svg{width:16px;height:16px;color:var(--pink);
transition:transform var(--t-base) var(--ease)}
.hero-alt:hover{color:#fff;transition-duration:var(--t-fast)}
.hero-alt:hover svg{transform:translateX(4px);transition-duration:var(--t-fast)}
@media(max-width:620px){.hero-cta{gap:14px}.hero-alt{font-size:var(--fs-sm)}}
/* ---------- chlívek pro commercial fleet managery ----------
Radek 10. 8. poslal návrh: blok dole přes šířku obsahu, zaoblený,
s přechodem z tmavé do brandové růžové, ikona vlevo, oslovení a jedna
věta uprostřed, akce vpravo. Na schůzce to popsal jako „dominantní
button dole, odlišený od zbytku, s minimalistickým textem".
z-index 7: musí být nad videem (6), stejně jako text Live operation —
na tuhle přesnou chybu jsem dneska už jednou narazila, když video
dostalo šestku a text zůstal na čtyřce a zmizel.
Krytí i pointer-events řídí .hero-inner-logika ve script.js, aby pás
odešel spolu s nadpisem, jak se scrolluje k vějíři. */
.fleetbar{position:absolute;z-index:7;left:50%;translate:-50% 0;
bottom:clamp(20px,3.4vh,42px);
width:min(calc(100% - 2*var(--pad)),var(--maxw));
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:clamp(14px,2vw,26px);
padding:clamp(16px,2vh,22px) clamp(18px,2.4vw,30px);
border-radius:var(--r-md);text-decoration:none;color:#fff;
/* Tmavé mléčné sklo místo barevné plochy (14. 8.). Přechod z tmavě modré
do růžové dělal dvě věci naráz: růžová byla na CELÉ ploše, takže se
v ní ztrácelo jediné místo k prokliku, a ten modrofialový začátek
(rgba(11,17,34)) není žádná ze čtyř barev značky. Sklo nechá prosvítat
fotku a růžovou nechá jen tam, kde má něco znamenat — na tlačítku
a na kolečku s ikonou. */
border:1px solid rgba(255,255,255,.14);
background:rgba(19,20,24,.52);
backdrop-filter:blur(18px) saturate(1.15);
-webkit-backdrop-filter:blur(18px) saturate(1.15);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
/* Tady chyběla čárka: var(--ease) a border-color se slepily do jednoho
kusu a celá deklarace byla neplatná, takže se neanimovalo vůbec nic. */
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease)}
/* Jen translateY. Vodorovné vystředění drží vlastnost translate výš —
kdyby se −50 % zopakovalo i v transformu, pás by uskočil o půl šířky. */
.fleetbar:hover{transform:translateY(-3px);
border-color:rgba(255,255,255,.3);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.fleetbar:focus-visible{outline:2px solid #fff;outline-offset:3px}
.fb-ic{flex:none;width:clamp(40px,4.6vh,52px);height:clamp(40px,4.6vh,52px);
border-radius:50%;display:grid;place-items:center;color:var(--pink);
background:rgba(var(--accent-rgb),.16);
border:1px solid rgba(var(--accent-rgb),.5)}
.fb-ic svg{width:52%;height:52%}
.fb-txt{min-width:0;display:flex;flex-direction:column;gap:.24em}
/* „For last-mile commercial fleet managers" je popisek na pět slov, ne
nadpis — brandmanuál na něj Panchang nechce. */
.fb-txt b{font-family:var(--font-text);font-weight:700;
font-size:var(--fs-lead);letter-spacing:-.01em;line-height:1.15}
.fb-txt i{font-style:normal;font-size:var(--fs-sm);
color:rgba(255,255,255,.76);line-height:1.3}
/* Plné růžové tlačítko, ne jen text. Na skle je to jediná barevná plocha
v celé liště, takže je hned vidět, kam se kliká.
19 px / 700 natvrdo ze stejného důvodu jako u .btn: bílá na --pink-btn
plní normu jako VELKÝ tučný text (práh 3 : 1), a --fs-body je 16 px,
tedy pod hranicí 18,66 px, kde ten mírnější práh začíná platit. */
.fb-go{flex:none;display:inline-flex;align-items:center;gap:.6em;
font-weight:700;font-size:1.1875rem;white-space:nowrap;
padding:.62em 1.15em;border-radius:var(--r-pill);
background:var(--pink-btn);color:var(--on-pink-btn);
transition:background var(--t-fast) var(--ease)}
.fleetbar:hover .fb-go{background:var(--pink-deep)}
.fb-go svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease)}
.fleetbar:hover .fb-go svg{transform:translateX(5px);transition-duration:var(--t-fast)}
/* Na mobilu se to složí pod sebe: ikona a oslovení do řádku, akce pod ně.
Přes tři sloupce by se na 375 px nadpis lámal po jednom slově. */
@media(max-width:720px){
/* start, ne center: nadpis se tady láme na tři řádky a svisle
vystředěná ikona pak visela u posledního z nich */
.fleetbar{grid-template-columns:auto 1fr;gap:12px 14px;
padding:14px 16px;border-radius:var(--r-md);align-items:start}
.fb-ic{width:38px;height:38px;margin-top:2px}
/* Čára nad akcí a odsazení jsou pryč: dělily text od textového odkazu.
Teď je z akce plná pilulka, ta se oddělí sama a čára by přes ni
jen přeškrtla horní hranu. */
.fb-go{grid-column:1 / -1;justify-content:space-between;align-items:center;
margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.fleetbar,.fb-go svg{transition:none}
.fleetbar:hover{transform:none};transition-duration:var(--t-fast)}
}
@media(prefers-reduced-motion:reduce){
.hero [data-hero-in]{opacity:1;transform:none;transition:none}
html.hero-intro .nav{opacity:1;pointer-events:auto}
.hero-photo img{transform:none!important}
}
/* ---------- light hero (video in a frame) ---------- */
body.lighthero .nav:not(.scrolled){background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--line)}
body.lighthero .nav:not(.scrolled) .brand .logo-white{display:none}
body.lighthero .nav:not(.scrolled) .brand .logo-dark{display:block}
body.lighthero .nav:not(.scrolled) .nav-links a{color:var(--muted)}
body.lighthero .nav:not(.scrolled) .burger{color:var(--ink)}
.lhero{position:relative;overflow:hidden;padding-block:clamp(120px,15vh,160px) clamp(56px,7vw,88px);
background:radial-gradient(52% 55% at 88% 16%,rgba(var(--accent-rgb),.10),transparent 62%),var(--bg)}
.lhero .two{align-items:center;gap:clamp(28px,5vw,64px)}
.lhero h1{font-size:var(--fs-display);max-width:13ch;margin-top:.3em}
.lhero h1 .nowait{color:var(--pink)}
.lhero .lead{color:var(--muted);max-width:46ch}
.vframe{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0e0f11;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.vframe video{width:100%;height:100%;object-fit:cover}
.vframe::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg);box-shadow:inset 0 0 60px 12px rgba(0,0,0,.45)}
@media(max-width:820px){.lhero .two{grid-template-columns:1fr}.lhero-media{order:-1;max-width:520px;margin-inline:auto;width:100%}}
/* ---------- stat backbone band ---------- */
.backbone{background:var(--bg);border-bottom:1px solid var(--line);
padding-block:clamp(10px,1.4vw,16px)}
/* Celá sekce se musí vejít na jednu obrazovku, jinak není při najíždění myší
vidět, jak se čísla přepočítávají. Text je proto sražený a vějíř si sám bere
jen tolik místa, kolik po něm zbyde — viz šířka níž. */
/* Nadpis a čísla stojí VEDLE SEBE. Pod sebou braly 150 px a nadpis musel být
drobný; takhle má pás výšku jen toho vyššího a na nadpis zbyde na velikost. */
.bb-top{display:flex;align-items:center;gap:clamp(20px,3vw,52px);
margin-bottom:clamp(4px,.6vw,8px);
/* pás je stejně široký jako vějíř pod ním — v úzkém textovém sloupci
by se nadpis lámal na čtyři řádky a pás by byl vyšší než celý vějíř */
/* centrujeme OKRAJEM, ne transformací: na .bb-top sedí data-reveal
a jeho animace by transform přepsala (a pás by ujel doprava) */
--bbw:min(100vw - 24px,1760px);
width:var(--bbw);margin-left:calc(50% - var(--bbw) / 2);
padding-inline:clamp(4px,1.4vw,28px)}
.backbone .sec-head{flex:1 1 60%;min-width:0;max-width:none;margin:0;text-align:left}
/* min-width:0 je nutné — bez něj se mřížka nesmrskne pod obsah karet
a pás přeteče přes okno */
.backbone .fan-stats{flex:0 1 40%;min-width:0;max-width:none;margin:0;
grid-template-columns:repeat(3,1fr);gap:clamp(6px,.7vw,10px)}
.backbone .fst{min-width:0}
.backbone .fst>div{min-width:0}
.backbone .fst-l{overflow-wrap:anywhere}
@media(max-width:1120px){
/* na užším displeji se to zase poskládá pod sebe a vycentruje */
.bb-top{flex-direction:column;gap:clamp(10px,1.6vw,16px);padding-inline:0}
.backbone .sec-head{flex:none;text-align:center}
.backbone .fan-stats{flex:none;width:100%}
}
.backbone .sec-head .h{font-size:var(--fs-h1);line-height:1.04;text-wrap:balance}
/* menší karty s čísly a drobnější poznámka — každý ušetřený pixel jde vějíři */
.backbone .fst{padding:10px 12px;gap:9px}
.backbone .fst-ic{width:28px;height:28px;border-radius:var(--r-sm)}
.backbone .fst-ic svg{width:15px;height:15px}
.backbone .fst-l{font-size:var(--fs-label);line-height:1.25}
.backbone .fst-ic svg{width:17px;height:17px}
.backbone .fst-v{font-size:var(--fs-h3)}
.backbone .fst-l{font-size:var(--fs-label)}
.backbone .sec-head .lead{font-size:var(--fs-lead);max-width:none;margin-top:.5em}
.backbone .fan-stats{margin-top:clamp(6px,.8vw,10px)}
.backbone .fan{margin-top:clamp(0px,.5vw,6px)}
.backbone .note-wrap{margin-top:clamp(4px,.7vw,8px)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-row.c3{grid-template-columns:repeat(3,1fr)}
.stat{padding:clamp(30px,4vw,52px) clamp(14px,2vw,30px);border-left:1px solid var(--line-2);text-align:center}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat .n .u{color:inherit}
.stat .l{color:var(--muted);font-size:var(--fs-xs);margin-top:.7em}
@media(max-width:720px){.stat-row{grid-template-columns:1fr 1fr}.stat{border-top:1px solid var(--line-2)}.stat:nth-child(odd){border-left:0}.stat-row .stat:nth-child(-n+2){border-top:0}}
/* machine icon strip */
.machines{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.machine{display:flex;align-items:center;gap:.5em;padding:.6em 1.05em;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--muted);font-size:var(--fs-xs);font-weight:500;transition:var(--t-base) var(--ease)}
.machine svg{width:18px;height:18px;color:var(--pink);transition:transform var(--t-base) var(--ease)}
.machine:hover{color:var(--ink);border-color:var(--pink);box-shadow:var(--lift);transform:translateY(-2px);transition-duration:var(--t-fast)}
.machine:hover svg{transform:scale(1.15);transition-duration:var(--t-fast)}
/* ---------- glow cards (cursor-follow) ---------- */
.cards{display:grid;gap:18px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c5{grid-template-columns:repeat(5,1fr)}
.cards.c6{grid-template-columns:repeat(6,1fr)}
.card{
position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:30px 28px;overflow:hidden;transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease);
}
.card::before,.flow-node::before,.feat::before,.step::before,.band .b::before{ /* cursor spotlight (shared) */
content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none;z-index:0;
background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.14),transparent 60%);
}
.card > *,.flow-node > *,.feat > *,.step > *,.band .b > *{position:relative;z-index:1}
.card:hover,.flow-node:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-rgb),.4);transition-duration:var(--t-fast)}
.card:hover::before,.flow-node:hover::before,.feat:hover::before,.step:hover::before,.band .b:hover::before{opacity:1;transition-duration:var(--t-fast)}
/* chrome-free items still get the pink glow + a gentle lift */
.feat,.step,.band .b{position:relative;overflow:hidden;border-radius:var(--r-md);
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease)}
.feat{border-radius:var(--radius)}
.feat:hover,.band .b:hover{transform:translateY(-4px);transition-duration:var(--t-fast)}
.step:hover{transform:translateX(4px);transition-duration:var(--t-fast)}
.band .b::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.30),transparent 60%)}
.feat:hover .ic{transform:scale(1.12) rotate(-4deg);transition-duration:var(--t-fast)}
.feat .ic{transition:transform var(--t-base) var(--ease)}
.card .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--pink-soft);display:grid;place-items:center;color:var(--pink);margin-bottom:18px}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:var(--fs-body);margin-bottom:.4em}
.card p{color:var(--muted);font-size:var(--fs-sm)}
.card .k{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.card .k.num{font-family:var(--font-text);white-space:nowrap}
@media(max-width:920px){.cards.c4{grid-template-columns:1fr 1fr}.cards.c3{grid-template-columns:1fr}.cards.c5,.cards.c6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cards.c4{grid-template-columns:1fr}.cards.c5,.cards.c6{grid-template-columns:1fr 1fr}}
/* ---------- breadcrumb (Solutions subpages) ---------- */
.crumb{display:flex;align-items:center;gap:.5em;font-size:var(--fs-xs);color:var(--muted-2);padding-top:clamp(96px,11vh,124px)}
.crumb a{color:var(--muted-2)}
.crumb a:hover{color:var(--pink);transition-duration:var(--t-fast)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--muted)}
/* breadcrumb sitting on a dark full-bleed hero */
.crumb.on-dark{padding-top:0;margin-bottom:1.1rem;color:rgba(255,255,255,.62)}
.crumb.on-dark a,.crumb.on-dark .cur{color:rgba(255,255,255,.62)}
.crumb.on-dark a:hover{color:#fff;transition-duration:var(--t-fast)}
/* ---------- icon feature row (why choose / platform highlights) ---------- */
/* same box family as .card — light border, white surface, rounded */
.feat{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:28px 20px;box-shadow:var(--shadow)}
.feat .ic{width:46px;height:46px;margin:0 auto 16px;border-radius:var(--r-sm);background:var(--pink-soft);
display:grid;place-items:center;color:var(--pink)}
.feat .ic svg{width:23px;height:23px}
.feat h4{font-size:var(--fs-body);margin-bottom:.35em}
.feat p{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.feat:hover{box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-rgb),.4);transition-duration:var(--t-fast)}
/* ---------- numbered deployment steps ---------- */
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:18px;align-items:flex-start;padding:18px 4px;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
/* Bílá na plné výplni. Růžová na --pink-soft dávala jen 2,9 : 1, tedy
ještě méně než na bílé. Výplň je podle pravidla dovolená. */
.step .no{font-family:var(--font-text);font-weight:800;font-size:var(--fs-xs);color:#fff;background:var(--pink-ink);border-radius:var(--r-sm);padding:.45em .6em;line-height:1;min-width:34px;text-align:center}
.step h4{font-size:var(--fs-body);margin-bottom:.2em}
.step p{font-size:var(--fs-xs);color:var(--muted)}
/* ---------- dark stat band (operating benefits that matter) ---------- */
.band{background:var(--charcoal);color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,4.5vw,52px) clamp(20px,3vw,40px);box-shadow:var(--shadow-lg)}
.band h2,.band h3{color:#fff}
.band .bgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:clamp(22px,3vw,34px)}
.band .b{text-align:center;padding:10px 8px;border-left:1px solid rgba(255,255,255,.12)}
.band .b:first-child{border-left:0}
.band .b .bv{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h3);line-height:1.1;white-space:nowrap}
.band .b .bl{font-size:var(--fs-label);color:rgba(255,255,255,.62);margin-top:.45em;line-height:1.45}
@media(max-width:920px){.band .bgrid{grid-template-columns:repeat(3,1fr);gap:18px}.band .b{border-left:0}}
@media(max-width:520px){.band .bgrid{grid-template-columns:1fr 1fr}}
/* ---------- market ladder fan (hero of the homepage) ---------- */
/* tři čísla, která se přepočítávají jak se trh rozevírá */
.fan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);
max-width:940px;margin:clamp(22px,3vw,34px) auto 0}
.fst{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.fst-ic{flex:none;width:42px;height:42px;border-radius:var(--r-sm);background:var(--pink-soft);
display:grid;place-items:center;color:var(--pink)}
.fst-ic svg{width:21px;height:21px}
.fst-v{font-family:var(--font-text);font-weight:800;font-size:var(--fs-lead);
letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.fst-v .u{color:var(--muted);font-size:max(var(--fs-label),.62em);font-weight:600;margin-left:.15em}
.fst-l{font-size:var(--fs-label);color:var(--muted);margin-top:.35em;line-height:1.3}
@media(max-width:760px){.fan-stats{grid-template-columns:1fr}}
/* vějíř */
.fan{position:relative;max-width:1360px;margin:clamp(10px,2vw,22px) auto 0}
/* Vějíř smí přetéct přes šířku textového sloupce — jinak působí jako malý obrázek.
Zároveň se ale zastropuje výškou: vezme si jen to, co zbylo z obrazovky po
nadpisu, číslech a poznámce (poměr stran je 2.4:1), takže se sekce vždy vejde. */
.backbone .fan{
/* Vejít se musí ČÍSLA + VĚJÍŘ (nadpis smí odrolovat) — kdyby se měl vejít
i nadpis, zůstal by vějíř malý. 240 = karty s čísly + poznámka +
spodní odsazení + lepicí navigace. */
max-width:none; /* strop řeší min() níž, ne základní pravidlo */
--fan-h:calc(100svh - 302px);
/* na běžném notebooku brzdí vějíř šířka okna, ne výška — pustíme ho tedy
skoro k okrajům; samotná kresba má uvnitř tak jako tak volné boky */
--fw:min(100vw - 24px, 1760px, max(560px, var(--fan-h) * 2.4));
width:var(--fw);margin-left:calc(50% - var(--fw) / 2)}
.fan-svg{width:100%;height:auto;display:block;overflow:visible}
/* paprsky se kreslí na canvas (240 čar v 60 fps — v SVG by to web zabilo) */
.fst-v{white-space:nowrap}
.fan-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
pointer-events:none;z-index:0}
.fan-svg{position:relative;z-index:1}
/* kategorie */
/* --fopen (0..1) řídí scroll: dokud je vějíř svinutý, popisky nejsou
vidět — jinak by visely v prázdnu daleko od vláken. */
.fnode{opacity:calc(.5*var(--fopen,1));transition:opacity var(--t-fast) var(--ease)}
.fnode.on{opacity:var(--fopen,1)}
/* mléčné sklo — vějíř pod destičkou prosvítá a tím se to s ním spojí */
.fnode .fn-plate{fill:rgba(255,255,255,.58);stroke:rgba(11,11,15,.06);stroke-width:1;
transition:var(--t-base) var(--ease)}
.fnode.on .fn-plate{fill:rgba(255,255,255,.66);stroke:rgba(var(--accent-rgb),.32)}
.fnode .fn-ic{color:var(--muted-2);transition:color var(--t-fast) var(--ease)}
.fnode.on .fn-ic{color:var(--pink)}
.fnode .fn-t{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;fill:var(--muted-2);
text-anchor:middle;transition:fill var(--t-fast) var(--ease)}
.fnode.on .fn-t{fill:var(--ink)}
/* přírůstek trhu — objeví se až když kategorie naskočí */
.fnode .fn-chip{opacity:0;transition:opacity var(--t-fast) var(--ease) .12s}
.fnode.on .fn-chip{opacity:1}
.fnode .fn-chip rect{fill:var(--pink);rx:11}
.fnode .fn-chip text{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:700;fill:#fff;text-anchor:middle}
/* střed */
.fcore-glow{fill:var(--pink);opacity:.16;filter:blur(20px)}
/* jádro je bílé — na světlé stránce působí černý kotouč jako díra */
.fcore{fill:#fff}
.fcore-edge{fill:none;stroke:var(--pink);stroke-width:1.2;opacity:.22}
.fcore-ring{fill:none;stroke:var(--pink);stroke-width:1.8;opacity:.65}
.fcore-pulse{fill:none;stroke:var(--pink);stroke-width:2;opacity:0;transform-origin:600px 548px}
.fan.full .fcore-pulse{animation:fcorepulse 2.8s var(--ease) infinite}
@keyframes fcorepulse{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.32)}}
.fcore-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);fill:#fff;text-anchor:middle}
/* Metodika je schovaná pod „i" — čísla jsou dopočítaná z velikosti trhu,
takže musí být ověřitelná, ale nemusí zabírat místo. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.note-wrap{position:relative;display:flex;justify-content:center;margin-top:6px}
.note-i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
background:var(--card);color:var(--muted-2);cursor:pointer;
font:600 12px/1 var(--font-text);display:grid;place-items:center;padding:0;
transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.note-i:hover,.note-i:focus-visible{color:var(--pink);border-color:var(--pink);transition-duration:var(--t-fast)}
.fan-note{position:absolute;top:calc(100% + 9px);left:50%;
width:min(620px,calc(100vw - 2*var(--pad)));
transform:translateX(-50%) translateY(-4px);
opacity:0;visibility:hidden;pointer-events:none;z-index:6;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
box-shadow:var(--shadow);padding:11px 14px;text-align:center;
font-size:var(--fs-label);line-height:1.55;color:var(--muted-2);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base) var(--ease)}
.note-wrap:hover .fan-note,.note-i:focus-visible+.fan-note,.note-wrap.open .fan-note{
opacity:1;visibility:visible;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.fcore-pulse{animation:none}}
/* ---------- vrstvy: problém (černá) a řešení (světlá) ----------
Diagram kreslíme sami, jen z brandových barev. Text nese animace:
energie stoupá ze sítě nahoru a bez prostřední vrstvy se nikam nedostane. */
/* přechod z bílé do černé je součástí sekce — nahoře i dole se rozplyne */
.section.dark{
background:linear-gradient(180deg,
var(--bg) 0,
#17181B clamp(90px,14vh,190px),
#17181B 100%);
color:#fff;border:0;
padding-block:clamp(120px,18vh,240px)}
.section.dark .lead{color:rgba(255,255,255,.6)}
/* v problému ještě nejsme — růžová je vyhrazená pro nás, proto tu nesvítí */
.section.dark .eyebrow{color:rgba(255,255,255,.6)}
.section.dark .h{color:#fff}
.figwrap{max-width:760px;margin:clamp(26px,4vw,52px) auto 0}
.stackwrap{position:relative}
.flowfx{position:absolute;inset:-6% -4%;width:108%;height:112%;
display:block;pointer-events:none;z-index:0}
/* ---- stoh vrstev: jen číslo a název, popis až po najetí ---- */
.stack{list-style:none;margin:0;padding:0;position:relative;z-index:1;
display:grid;gap:clamp(9px,1.2vw,14px);perspective:1200px}
.slab{position:relative;display:flex;align-items:center;gap:14px;
padding:16px 20px;border-radius:var(--r-md);
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
transform:rotateX(7deg);transform-origin:50% 100%;
transition:transform var(--t-base) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.slab:hover{transform:rotateX(0deg) translateY(-3px);background:rgba(255,255,255,.08);z-index:2;transition-duration:var(--t-fast)}
.slab-n{flex:none;width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
font-family:var(--font-text);font-weight:800;font-size:var(--fs-label);
background:rgba(255,255,255,.1);color:rgba(255,255,255,.62)}
.slab-t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);letter-spacing:.01em}
/* popis se ukáže až po najetí — proto na desce není odstavec */
.slab-d{margin-left:auto;max-width:44%;text-align:right;
font-size:var(--fs-xs);line-height:1.4;color:rgba(255,255,255,.5);
opacity:0;transform:translateX(6px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.slab:hover .slab-d{opacity:1;transform:none;transition-duration:var(--t-fast)}
.slab.me{background:var(--pink-soft);border-color:rgba(var(--accent-rgb),.45)}
.slab.me .slab-n{background:var(--pink);color:#fff}
.slab.me .slab-t{color:var(--pink)}
.slab.gap{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.22)}
.slab.gap .slab-n{background:transparent;border:1px dashed rgba(255,255,255,.26);color:rgba(255,255,255,.42)}
.slab.gap .slab-t{color:rgba(255,255,255,.6)}
.stack-cap{margin:clamp(12px,1.6vw,18px) 0 0;text-align:center;
font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.34)}
/* světlá sekce používá stejný stoh, jen obrácené tóny */
.section:not(.dark) .slab{border-color:var(--line);background:var(--bg-2)}
.section:not(.dark) .slab:hover{background:var(--bg-3);transition-duration:var(--t-fast)}
.section:not(.dark) .slab-n{background:var(--bg-3);color:var(--muted)}
.section:not(.dark) .slab-d{color:var(--muted)}
.section:not(.dark) .slab.me{background:var(--pink-soft);border-color:rgba(var(--accent-rgb),.45)}
.section:not(.dark) .slab.me .slab-n{background:var(--pink);color:#fff}
.section:not(.dark) .stack-cap{color:var(--muted-2)}
.lyr{display:grid;grid-template-columns:47fr 53fr;gap:clamp(20px,3vw,52px);align-items:center}
@media(max-width:900px){
.lyr{grid-template-columns:1fr}
.slab{transform:none;flex-wrap:wrap}
.slab-d{margin-left:0;max-width:100%;text-align:left;opacity:1;transform:none;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.slab,.slab:hover{transform:none;transition:none}}
/* ---------- PAPRSKY JAKO PODPIS WEBU ----------
Stejný motiv jako vějíř, jen v jiné roli: zdola přicházejí rozházená vlákna,
projdou naší růžovou linkou a nad ní se rozevřou do klidného vějíře.
Vrstvy nejsou 3D destičky, ale úrovně, kterými to světlo prochází. */
/* Šířku stropuje i výška okna: co zbyde po nadpisu, to si vezme obrázek
(poměr stran 2.42:1). Bez toho si bere výšku, kterou nemá, a sekce přeteče. */
#solution,#problem{padding-block:clamp(24px,3vw,40px)}
#solution .sec-head,#problem .sec-head{margin-bottom:clamp(8px,1.2vw,14px)}
#solution .sec-head .h,#problem .sec-head .h{font-size:var(--fs-h2);line-height:1.06}
#solution .sec-head .lead,#problem .sec-head .lead{font-size:var(--fs-lead);margin-top:.5em}
.weave{position:relative;
--wvh:calc(100svh - 345px);
--wvw:min(100vw - 24px, 1500px, max(560px, var(--wvh) * 2.42));
width:var(--wvw);margin:clamp(10px,1.4vw,18px) 0 0;
margin-left:calc(50% - var(--wvw)/2);
aspect-ratio:1500/620}
.weave-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.wl{position:absolute;left:0;right:0;top:var(--y);height:1px;
background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
z-index:2}
/* popisky střídají strany a nesou číslo — jinak dvě tenké linky nad sebou splynou */
.wl i{position:absolute;left:0;top:-1.7em;font-style:normal;display:inline-flex;
align-items:baseline;gap:.5em;padding:2px 8px 2px 0;
font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.02em;
color:var(--muted);background:linear-gradient(90deg,var(--bg) 70%,transparent)}
.wl.r i{left:auto;right:0;padding:2px 0 2px 8px;
background:linear-gradient(270deg,var(--bg) 70%,transparent)}
.wl i b{font-family:var(--font-text);font-weight:800;font-size:var(--fs-label);
color:var(--muted-2);letter-spacing:.08em}
.section.dark .wl i{background:linear-gradient(90deg,var(--charcoal) 70%,transparent)}
.section.dark .wl.r i{background:linear-gradient(270deg,var(--charcoal) 70%,transparent)}
.section.dark .wl i b{color:rgba(255,255,255,.3)}
.wl.me i b{color:var(--pink)}
.wl.me{background:linear-gradient(90deg,transparent,var(--pink) 8%,var(--pink) 92%,transparent);
height:2px;box-shadow:0 0 22px 2px rgba(var(--accent-rgb),.35)}
.wl.me i{color:var(--pink);font-size:var(--fs-sm)}
@media(max-width:760px){.wl i{font-size:var(--fs-label)}}
/* tmavá varianta téhož obrazu — problém je stejná scéna, jen bez naší vrstvy */
.section.dark .wl{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 12%,rgba(255,255,255,.14) 88%,transparent)}
.section.dark .wl i{color:rgba(255,255,255,.45)}
.section.dark .wcap{color:rgba(255,255,255,.32)}
.wl.gap{background:none;height:0;border-top:1.5px dashed rgba(255,255,255,.3)}
.wl.gap i{color:rgba(255,255,255,.55)}
/* náš znak přesně v místě, kde se vlákna sejdou — „tady stojíme my" */
.wnode{position:absolute;left:50%;top:var(--y);transform:translate(-50%,-50%);z-index:3;
width:60px;height:60px;border-radius:50%;background:#fff;
display:grid;place-items:center;
box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.35),0 0 34px 6px rgba(var(--accent-rgb),.22)}
.wnode img{width:34px;height:34px}
/* co přichází a co odchází — dvě slova, ne odstavce */
.wcap{position:absolute;left:0;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
color:var(--muted-2);z-index:2}
.wcap.in{bottom:2%}
.wcap.out{top:1%}
@media(max-width:760px){.wnode{width:46px;height:46px}.wnode img{width:26px;height:26px}}
/* ---------- energy layers diagram ---------- */
.layfig{margin:clamp(30px,4vw,48px) 0 0;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.layfig-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.layfig img{display:block;width:100%;height:auto}
.layfig figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1.2em;
padding:16px clamp(18px,2.4vw,28px);border-top:1px solid var(--line-2);
font-size:var(--fs-xs);color:var(--muted)}
.layfig .lg-key{display:inline-flex;align-items:center;gap:.5em}
.layfig .lg-key i{width:9px;height:9px;border-radius:3px;flex:none}
.layfig .lg-key.us i{background:var(--pink)}
.layfig .lg-key.us{color:var(--ink);font-weight:600}
.layfig .lg-key.them i{background:var(--bg-3);border:1px solid var(--line)}
.layfig .lg-hint{margin-left:auto;display:none;align-items:center;gap:.4em;color:var(--muted-2);font-size:var(--fs-label)}
.layfig .lg-hint svg{width:14px;height:14px}
@media(max-width:820px){
/* na úzkém displeji popisky nejdou přečíst -> vodorovné posouvání */
.layfig-scroll img{width:auto;height:min(58vh,420px);max-width:none}
.layfig .lg-hint{display:inline-flex}
}
/* ---------- the missing layer (problem, visual instead of text) ---------- */
.layers{max-width:880px;margin:clamp(28px,4vw,44px) auto 0;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,16px);
perspective:1400px}
.lay{position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,26px);
padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);border-radius:var(--r-md);
background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
transform:rotateX(6deg);transform-origin:center bottom;
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease)}
.lay:hover{transform:rotateX(0deg) translateY(-3px);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.lay .lay-ic{flex:none;width:46px;height:46px;border-radius:var(--r-sm);background:var(--bg-3);display:grid;place-items:center;color:var(--muted)}
.lay .lay-ic svg{width:23px;height:23px}
.lay .lay-t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--ink);line-height:1.15}
.lay .lay-s{font-size:var(--fs-xs);color:var(--muted);margin-top:.25em}
.lay .lay-tag{margin-left:auto;flex:none;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted-2);background:var(--bg-3);border-radius:var(--r-pill);padding:.34em .8em;white-space:nowrap}
/* the gap — the layer that is missing */
.lay.gap{background:linear-gradient(180deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.03));
border:1.5px dashed rgba(var(--accent-rgb),.55);box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);
animation:laypulse 3.2s var(--ease) infinite}
@keyframes laypulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.18)}50%{box-shadow:0 0 34px -4px rgba(var(--accent-rgb),.42)}}
.lay.gap .lay-ic{background:var(--pink-soft);color:var(--pink)}
.lay.gap .lay-t{color:var(--pink)}
.lay.gap .lay-tag{color:#fff;background:var(--pink)}
/* the three pain points, compact — no paragraphs */
.lay-pains{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(20px,2.6vw,30px)}
.pain{display:inline-flex;align-items:center;gap:.55em;padding:.6em 1.05em;border-radius:var(--r-pill);
background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs);transition:var(--t-base) var(--ease)}
.pain svg{width:17px;height:17px;color:var(--pink);flex:none}
.pain b{color:var(--ink);font-weight:600}
.pain:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:var(--lift);transition-duration:var(--t-fast)}
@media(max-width:620px){.lay{flex-wrap:wrap}.lay .lay-tag{margin-left:0}}
@media(prefers-reduced-motion:reduce){.lay.gap{animation:none}.lay{transform:none}}
/* ---------- newsroom / blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
.posts:empty{display:none}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow);display:flex;flex-direction:column;
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease)}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-rgb),.4);transition-duration:var(--t-fast)}
.post-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.post-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);
transition:transform var(--t-base) var(--ease), filter var(--t-fast) var(--ease)}
.post:hover .post-media img{transform:scale(1.05);filter:grayscale(0) contrast(1.02);transition-duration:var(--t-fast)}
.post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;align-items:center;gap:.7em;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.post-kind{color:var(--pink);font-weight:600}
.post-title{font-size:var(--fs-body);line-height:1.25;margin:.6em 0 .4em}
.post-title a{color:var(--ink)}
.post-title a:hover{color:var(--pink);transition-duration:var(--t-fast)}
.post-x{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;flex:1}
.post-more{display:inline-flex;align-items:center;gap:.45em;margin-top:1.1rem;font-size:var(--fs-xs);font-weight:600;color:var(--pink)}
.post-more svg{width:15px;height:15px;transition:transform var(--t-base) var(--ease)}
.post:hover .post-more svg{transform:translateX(3px);transition-duration:var(--t-fast)}
@media(max-width:920px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}
/* honest empty state until the first article exists */
.posts-empty{text-align:center;max-width:660px;margin:0 auto;padding:clamp(32px,5vw,64px) clamp(20px,3vw,40px);
background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.posts-empty .pe-ic{width:60px;height:60px;margin:0 auto clamp(18px,2.4vw,26px);border-radius:var(--r-sm);
background:var(--pink-soft);display:grid;place-items:center;color:var(--pink)}
.posts-empty .pe-ic svg{width:30px;height:30px}
/* ---------- battery-swap history timeline ---------- */
.tl{position:relative;margin:clamp(28px,4vw,44px) 0 clamp(30px,4vw,48px);overflow:hidden}
.tl::before,.tl::after{content:"";position:absolute;top:0;bottom:0;width:clamp(24px,6vw,90px);z-index:3;pointer-events:none}
.tl::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tl::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.tl-track{display:flex;gap:clamp(14px,2vw,22px);align-items:stretch;will-change:transform;
transition:transform var(--t-base) var(--ease);padding-block:6px}
.tl-item{flex:0 0 clamp(210px,23vw,268px);position:relative;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-md);padding:20px 20px 22px;overflow:hidden;transition:border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.tl-item:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4);transition-duration:var(--t-fast)}
.tl-item .yr{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em;color:var(--muted-2);line-height:1}
.tl-item .ti{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--ink);margin:.55em 0 .3em}
.tl-item .tx{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.tl-item .dot{position:absolute;right:18px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--line);border:2px solid var(--card);box-shadow:0 0 0 2px var(--line)}
/* the failures */
.tl-item.fell .yr{color:var(--muted-2)}
.tl-item.fell .tag{display:inline-block;margin-top:.7em;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);background:var(--bg-3);border-radius:var(--r-pill);padding:.28em .7em}
/* us */
.tl-item.now{border-color:rgba(var(--accent-rgb),.45);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--card))}
.tl-item.now .yr,.tl-item.now .ti{color:var(--pink)}
.tl-item.now .dot{background:var(--pink);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35)}
.tl-item.now .tag{display:inline-block;margin-top:.7em;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
color:#fff;background:var(--pink);border-radius:var(--r-pill);padding:.28em .7em}
.tl-rail{position:relative;height:1px;background:var(--line);margin-top:2px}
.tl-hint{display:flex;align-items:center;gap:.5em;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
color:var(--muted-2);margin-top:14px}
.tl-hint svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.tl-track{transition:none}}
/* ---------- two doors (fleets / defense) ---------- */
.doors{gap:clamp(16px,2.4vw,24px);align-items:stretch}
.ctaband.door{display:block;min-height:340px;transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.ctaband.door:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.ctaband.door .inner{padding:clamp(28px,3.4vw,44px)}
.ctaband.door h3{color:#fff;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);line-height:1.08;margin-top:.3em}
.ctaband.door .lead{margin-top:.7em;font-size:var(--fs-sm);max-width:34ch}
.ctaband.door .btn{margin-top:1.5rem;pointer-events:none}
.ctaband.door img{transition:transform var(--t-base) var(--ease)}
.ctaband.door:hover img{transform:scale(1.05);transition-duration:var(--t-fast)}
@media(max-width:860px){.doors{grid-template-columns:1fr}.ctaband.door{min-height:280px}}
/* ---------- brand slogan signature (in hero) ---------- */
.hero-sig{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(22px,3.4vh,34px);
font-family:var(--font-display);font-weight:600;font-size:var(--fs-lead);
color:var(--ink);letter-spacing:-.01em}
.hero-sig .keep{color:var(--pink)}
.hero-sig::before{content:"";width:26px;height:1px;background:rgba(0,0,0,.25);flex:none}
/* ---------- brand slogan band ---------- */
.slogan{position:relative;overflow:hidden;background:var(--charcoal);color:#fff;border-radius:var(--radius-lg);
padding:clamp(52px,9vw,110px) clamp(24px,5vw,60px);text-align:center;box-shadow:var(--shadow-lg)}
.slogan::before{content:"";position:absolute;left:50%;top:-40%;width:min(780px,120%);aspect-ratio:1;transform:translateX(-50%);
background:radial-gradient(circle,rgba(var(--accent-rgb),.34),transparent 62%);filter:blur(18px);pointer-events:none}
.slogan .mark{position:relative;width:52px;height:52px;margin:0 auto clamp(20px,3vw,30px);opacity:.95}
.slogan h2{position:relative;color:#fff;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.025em}
.slogan h2 .keep{color:var(--pink);display:block}
.slogan p{position:relative;color:rgba(255,255,255,.62);margin-top:1.2em;font-size:var(--fs-lead);max-width:46ch;margin-inline:auto}
@media(prefers-reduced-motion:no-preference){.slogan h2 .keep{animation:slogpulse 4.5s var(--ease) infinite}}
@keyframes slogpulse{0%,100%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}50%{text-shadow:0 0 34px rgba(var(--accent-rgb),.5)}}
/* ---------- checklist (built for the field) ---------- */
.checks{display:flex;flex-direction:column;gap:2px;margin-top:1.5rem}
.checks li{display:flex;align-items:center;gap:.7em;padding:11px 2px;border-bottom:1px solid var(--line-2);list-style:none;font-size:var(--fs-sm);color:var(--ink)}
.checks li:last-child{border-bottom:0}
.checks svg{width:17px;height:17px;color:var(--pink);flex:none}
/* ---------- ideal customer profile table ---------- */
.icp{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:var(--fs-sm);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
/* Bílý text na značkové růžové má 3,09 : 1 a hlavička je 12px tučná,
takže na ni platí práh 4,5. Stejný token jako u tlačítek → 6,24 : 1. */
.icp th{text-align:left;padding:12px 18px;font-family:var(--font-text);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--on-pink);background:var(--pink);font-weight:600}
.icp td{padding:13px 18px;border-top:1px solid var(--line-2);color:var(--muted);vertical-align:top}
.icp td:first-child{color:var(--ink);font-weight:500;width:34%}
.icp tr:hover td{background:var(--bg-2);transition-duration:var(--t-fast)}
.icp .yes{color:var(--pink-ink);font-weight:600}
@media(max-width:640px){.icp,.icp tbody,.icp tr,.icp td{display:block;width:100%}.icp thead{display:none}.icp tr{border-top:1px solid var(--line-2);padding:6px 0}.icp td{border:0;padding:5px 16px}.icp td:first-child{width:auto;padding-top:12px}}
/* ---------- nav dropdown (Solutions) ---------- */
.navdrop{position:relative}
.navdrop > button{display:flex;align-items:center;gap:.35em;font-family:var(--font-text);font-size:var(--fs-sm);color:var(--muted);background:none;border:0;cursor:pointer;padding:0;transition:color var(--t-fast) var(--ease)}
.navdrop > button svg{width:13px;height:13px;transition:transform var(--t-base) var(--ease)}
.navdrop:hover > button,.navdrop.open > button{color:var(--ink);transition-duration:var(--t-fast)}
.navdrop.open > button svg{transform:rotate(180deg)}
.nav:not(.scrolled) .navdrop > button{color:rgba(255,255,255,.82)}
.nav:not(.scrolled) .navdrop:hover > button,.nav:not(.scrolled) .navdrop.open > button{color:#fff;transition-duration:var(--t-fast)}
.navdrop .menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:230px;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e3);padding:8px;opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease);z-index:80}
.navdrop:hover .menu,.navdrop.open .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-duration:var(--t-fast)}
.navdrop .menu a{display:block;padding:.62em .8em;border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-sm);transition:background var(--t-fast) var(--ease)}
.navdrop .menu a span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:.12em}
.navdrop .menu a:hover{background:var(--pink-soft);transition-duration:var(--t-fast)}
/* visibility:inherit, ne visible: v zásuvce je rozbalovací nabídka vždy
otevřená, ale když je zavřená celá zásuvka, musí zmizet s ní. Výslovné
„visible" u potomka totiž přebije „hidden" u rodiče — a klávesnice se
pak do skryté nabídky dostala (nalezeno tabulátorem 13. 8.). */
@media(max-width:940px){.navdrop .menu{position:static;transform:none;opacity:1;visibility:inherit;box-shadow:none;border:0;background:none;backdrop-filter:none;padding:4px 0 0;min-width:0}.navdrop{width:100%}.navdrop > button{width:100%;justify-content:center}}
/* ---------- two column ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.two.media-right{direction:ltr}
@media(max-width:880px){.two{grid-template-columns:1fr;gap:36px}}
.media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media.tall{aspect-ratio:4/5}
.media.wide{aspect-ratio:16/10}
.badge-float{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--shadow)}
.badge-float .b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);line-height:1;color:var(--pink)}
.badge-float .s{font-size:var(--fs-label);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.3em}
/* ---------- separate-energy diagram ---------- */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px)}
.flow-node{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 18px;text-align:center;position:relative;overflow:hidden;transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-fast) var(--ease)}
.flow-node .ic{width:44px;height:44px;margin:0 auto 12px;border-radius:var(--r-sm);background:var(--pink-soft);display:grid;place-items:center;color:var(--pink)}
.flow-node .ic svg{width:22px;height:22px}
.flow-node h4{font-size:var(--fs-sm);white-space:nowrap}
.flow-node p{font-size:var(--fs-xs);color:var(--muted);margin-top:.3em}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--pink);padding:0 6px;flex:0 0 34px}
.flow-arrow svg{width:22px;height:22px;animation:flowpulse 2s var(--ease) infinite}
@keyframes flowpulse{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@media(max-width:820px){.flow{flex-direction:column}.flow-arrow{transform:rotate(90deg);padding:4px 0}}
/* ---------- time comparison (clock + minute-scaled bars) ---------- */
.timecompare{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px}
.tc-head{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:16px}
.trow{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:center;margin-bottom:12px}
.trow:last-child{margin-bottom:0}
.tlabel{display:flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.tlabel svg{width:20px;height:20px;color:var(--muted-2)}
.trow.us .tlabel svg{color:var(--pink)}
.tbar{height:20px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden}
.tfill{height:100%;width:0;border-radius:var(--r-pill);transition:width var(--t-base) var(--ease)}
.trow.us .tfill{background:linear-gradient(90deg,var(--pink),var(--pink-deep));box-shadow:var(--lift)}
.trow.them .tfill{background:var(--muted-2)}
.tval{font-family:var(--font-text);font-weight:700;font-size:var(--fs-h3);color:var(--ink);text-align:right;min-width:88px}
.tval span{font-size:var(--fs-label);color:var(--muted);font-weight:500}
@media(max-width:520px){.trow{grid-template-columns:112px 1fr auto;gap:10px}.tval{font-size:var(--fs-h3);min-width:70px}}
/* ---------- stories (why different) ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
.story{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;position:relative;overflow:hidden;transition:var(--t-base) var(--ease)}
.story:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.story .co{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.story .raised{font-size:var(--fs-xs);color:var(--muted-2);margin-top:.1em}
.story .why{font-size:var(--fs-sm);color:var(--muted);margin-top:.8em;padding-top:.8em;border-top:1px solid var(--line-2)}
.story.win{background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.02));border-color:rgba(var(--accent-rgb),.4)}
.story.win .co{color:var(--pink-deep)}
.story .tag{position:absolute;top:14px;right:14px;font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;padding:3px 8px;border-radius:6px}
.story.dead .tag{background:var(--bg-3);color:var(--muted)}
.story.win .tag{background:var(--pink);color:#fff}
@media(max-width:820px){.stories{grid-template-columns:1fr}}
.pillars{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6rem}
.pillar{display:flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:.6em 1.1em;font-size:var(--fs-sm)}
.pillar svg{width:17px;height:17px;color:var(--pink)}
/* ---------- product hotspots ---------- */
.product{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--charcoal)}
.product img{width:100%;display:block}
.hotspot{position:absolute;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.9);display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:var(--e1)}
.hotspot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pink);opacity:.7;animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.hotspot .plus{width:14px;height:14px;font-size:var(--fs-xs);color:var(--pink-ink);font-weight:700}
.hotspot.active{background:var(--pink)}
.hotspot.active .plus{color:var(--on-pink)} /* bílá na růžové = 3,09 při 13 px */
.hotspot.active::before{display:none}
.tip{position:absolute;z-index:5;background:rgba(19,20,24,.92);backdrop-filter:blur(10px);color:#fff;border-radius:var(--r-md);padding:14px 16px;width:210px;transform:translate(-50%,calc(-100% - 22px));opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease);box-shadow:var(--e3)}
.tip.show{opacity:1}
.tip .tt{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:#fff}
.tip .tv{font-family:var(--font-text);font-weight:700;font-size:var(--fs-h3);color:var(--pink);margin:.15em 0}
.tip .td{font-size:var(--fs-xs);color:rgba(255,255,255,.7)}
.spec-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.spec{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.spec .sn{font-family:var(--font-text);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.spec .sn .u{color:inherit;font-size:var(--fs-body)}
.spec .sl{font-size:var(--fs-sm);color:var(--muted);margin-top:.3em}
@media(max-width:820px){.spec-list{grid-template-columns:1fr 1fr}}
/* ---------- interactive x-ray vehicle ---------- */
/* vehicle stage — real x-ray render with interactive hotspots */
.veh-stage{position:relative;border-radius:var(--r-lg);background:transparent;transform:perspective(1200px);transition:transform var(--t-base) var(--ease);will-change:transform}
.veh-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-lg)}
.veh-img{width:100%;display:block;aspect-ratio:1537/1023;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.015);animation:xfloat 9s ease-in-out infinite}
/* pulsing pink swappable battery — bright core + soft halo, reads as a lit pack inside the wireframe */
.veh-battery{position:absolute;left:51.5%;top:61%;width:27%;height:30%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:screen;background:radial-gradient(circle at 50% 50%,rgba(255,150,195,.95) 0%,rgba(var(--accent-rgb),.85) 12%,rgba(var(--accent-rgb),.45) 30%,rgba(var(--accent-rgb),.16) 52%,transparent 72%);filter:blur(2px);animation:battpulse 2.6s ease-in-out infinite}
@keyframes battpulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
/* light scan sweep across the body */
.veh-scan{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:var(--r-lg)}
.veh-scan::before{content:"";position:absolute;top:-10%;bottom:-10%;width:34%;left:-45%;transform:skewX(-14deg);background:linear-gradient(100deg,transparent,rgba(var(--accent-rgb),.12) 44%,rgba(255,255,255,.28) 50%,rgba(var(--accent-rgb),.12) 56%,transparent);animation:vehscan 7s var(--ease) infinite}
@keyframes vehscan{0%{left:-45%}60%,100%{left:125%}}
@media(prefers-reduced-motion:reduce){.veh-img,.veh-battery,.veh-scan::before{animation:none}}
/* unified monochrome photography — pink stays the only accent */
.mono{filter:grayscale(1) contrast(1.04)}
/* glowing CGI "see inside" card (drivetrain) */
.cgi-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0e0f11;box-shadow:var(--shadow-lg)}
.cgi-card video,.cgi-card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.cgi-card .cap{position:absolute;left:18px;bottom:16px;color:#fff;z-index:2}
.cgi-card .cap .t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body)}
.cgi-card .cap .s{font-size:var(--fs-xs);color:rgba(255,255,255,.72);margin-top:.15em}
@keyframes xfloat{0%,100%{transform:scale(1.015) translateY(0)}50%{transform:scale(1.015) translateY(-6px)}}
@keyframes xdfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---------- calculator ---------- */
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr}
.calc-in{padding:clamp(26px,3.5vw,42px)}
.usecases{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.uc{padding:.5em .95em;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:var(--fs-xs);font-weight:500;cursor:pointer;transition:var(--t-base) var(--ease);display:flex;align-items:center;gap:.4em}
.uc svg{width:15px;height:15px}
.uc.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.field{margin-bottom:22px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px}
.field label .val{font-family:var(--font-text);font-weight:600;color:var(--ink);font-size:var(--fs-body)}
/* Dráha je vizuálně 5 px, ale plocha k ťuknutí musí mít 24 px (WCAG 2.2).
Řeší to svislé odsazení a background-clip:content-box — barevná dráha
zůstane tenká, klikací prvek je vysoký 25 px. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;
padding-block:10px;background-clip:content-box;box-sizing:content-box;
border-radius:var(--r-xs);outline:none;background:var(--bg-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:rgba(var(--accent-rgb),.9);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(var(--accent-rgb),.28),0 0 0 1px rgba(0,0,0,.05)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:rgba(var(--accent-rgb),.9);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(var(--accent-rgb),.28)}
/* iOS / Volvo-style segmented control: grey track, white selected pill, transparent rest */
.seg{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px}
.seg button{flex:1;min-width:60px;padding:9px 8px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--muted);font-family:var(--font-text);font-size:var(--fs-xs);font-weight:500;cursor:pointer;transition:var(--t-base) var(--ease)}
.seg button:hover{color:var(--ink);transition-duration:var(--t-fast)}
.seg button.active{background:#fff;color:var(--ink);box-shadow:var(--e1);font-weight:600}
.calc-out{background:linear-gradient(170deg,#161719,#232427);color:#fff;padding:clamp(26px,3.5vw,42px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.calc-out::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 80% 0,rgba(var(--accent-rgb),.25),transparent 60%);pointer-events:none}
.calc-out .rlab{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);position:relative}
.calc-out .save{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h1);line-height:1;letter-spacing:-.02em;color:#fff;margin:.15em 0 .05em;position:relative}
.calc-out .perkm{display:flex;align-items:center;gap:12px;margin:.4em 0 1.4rem;position:relative}
.calc-out .perkm .old{font-family:var(--font-text);font-weight:400;color:rgba(255,255,255,.66);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4);font-size:var(--fs-body)}
.calc-out .perkm .new{font-family:var(--font-text);font-weight:700;font-size:var(--fs-h3);color:#fff}
.calc-out .perkm .pct{background:rgba(var(--accent-rgb),.16);color:var(--pink);font-weight:700;font-size:var(--fs-xs);padding:.25em .7em;border-radius:var(--r-pill)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.mini .m{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:14px 16px}
.mini .m .mv{font-family:var(--font-text);font-weight:700;font-size:var(--fs-h3);color:#fff}
.mini .m .mv .u{color:inherit}
.mini .m .ml{font-size:var(--fs-label);color:rgba(255,255,255,.6);margin-top:.2em}
.calc-cta{margin-top:auto;padding-top:1.5rem;position:relative}
.calc-note{font-size:var(--fs-label);color:rgba(255,255,255,.45);margin-top:1rem;position:relative}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
/* ---------- use-case marquee ---------- */
.marquee{overflow:hidden;margin-top:clamp(40px,5.5vw,72px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scrollx 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.mtag{display:flex;align-items:center;gap:.55em;padding:.75em 1.3em;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font-weight:600;color:var(--ink);white-space:nowrap}
.mtag svg{width:19px;height:19px;color:var(--pink)}
/* ---------- CTA band ---------- */
.ctaband{position:relative;isolation:isolate;border-radius:var(--radius-lg);overflow:hidden;color:#fff}
.ctaband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) contrast(1.04)}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,13,14,.9),rgba(12,13,14,.5))}
.ctaband .inner{padding:clamp(46px,7vw,88px) clamp(30px,6vw,72px)}
.ctaband h2{color:#fff;font-size:var(--fs-h1);max-width:16ch}
/* Brandmanuál: Panchang jen na nadpisy a čísla. „Less waiting. More
deliveries." je odstavec, ne nadpis — jde na Inter. */
.ctaband .tl{color:var(--pink);font-family:var(--font-text);font-weight:600;font-size:var(--fs-body);margin-top:.5em}
/* ---------- footer ---------- */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(56px,8vw,84px)}
/* dva sloupce místo čtyř — v patičce zůstalo šest odkazů */
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(28px,4vw,64px)}
.foot-brand p{color:var(--muted);max-width:32ch;margin-top:1rem;font-size:var(--fs-sm)}
/* --muted-2 dávalo v patičce 2,57 : 1 (norma 4,5). --muted je 4,84 na
šedé patičce — nová barva se nezavádí, jen se použije tmavší token. */
.foot-col h4{font-family:var(--font-text);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
/* Odkazy v patičce měly 23 px na výšku, norma je 24. Přidané odsazení
je svislé, takže se řádkování drží — jen se zvětšila plocha k ťuknutí. */
.foot-col a{display:block;color:var(--muted);font-size:var(--fs-sm);padding-block:3px;margin-bottom:.4em;transition:color var(--t-fast) var(--ease)}
.foot-col a:hover{color:var(--pink);transition-duration:var(--t-fast)}
/* dole: autorské údaje vlevo, tagline uprostřed, sítě vpravo */
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
gap:14px 22px;margin-top:clamp(44px,6vw,68px);padding-block:20px;
border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}
.foot-bottom .fb-tag{margin-left:auto}
.socials--foot{margin-top:0;gap:10px}
.socials--foot a{width:34px;height:34px}
.socials--foot a svg{width:17px;height:17px}
.socials--tel{margin-top:1.1rem}
@media(max-width:760px){
.foot-bottom{justify-content:flex-start}
.foot-bottom .fb-tag{margin-left:0}
.socials--foot{width:100%;justify-content:flex-start}
}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
/* ---------- real photo strip ---------- */
.photostrip{display:flex;flex-direction:column;gap:14px;margin-top:clamp(30px,4vw,48px)}
.substrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photostrip .pcard--feature{aspect-ratio:16/9}
.pcard--feature video,.pcard--feature img{object-position:50% 42%}
.pcard--feature .cap{left:22px;right:22px;bottom:20px}
.pcard--feature .cap .t{font-size:var(--fs-h3)}
.pcard--feature .cap .s{font-size:var(--fs-sm)}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow);transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.pcard img,.pcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-base) var(--ease)}
/* resting still = monochrome (always shown when not playing) */
.pcard .poster-img{filter:grayscale(1) contrast(1.05)}
/* video sits on top in full colour, fades in only while it plays */
.pcard video{opacity:0;filter:contrast(1.02) saturate(1.05);transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.pcard.playing video{opacity:1}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.pcard:hover .poster-img,.pcard:hover video{transform:scale(1.06);transition-duration:var(--t-fast)}
/* small play hint on video cards, fades away on hover */
.pcard .playhint{position:absolute;top:12px;right:12px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-label);color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding-left:2px;transition:opacity var(--t-fast) var(--ease)}
.pcard:hover .playhint{opacity:0;transition-duration:var(--t-fast)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,14,16,.72));z-index:1}
.pcard .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff}
.pcard .cap .t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body)}
.pcard .cap .s{font-size:var(--fs-label);color:rgba(255,255,255,.8);margin-top:.15em}
.pcard .live{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:.4em;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);padding:.3em .6em;border-radius:var(--r-pill)}
.pcard .live i{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}70%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media(max-width:760px){.substrip{grid-template-columns:1fr}.photostrip .pcard--feature{aspect-ratio:4/3}}
/* ---------- media + copy (solution real photo) ---------- */
.badge-float.br{left:auto;right:20px}
/* ---------- modal (email capture) ---------- */
.modal-scrim{position:fixed;inset:0;z-index:100;background:rgba(15,15,17,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
.modal-scrim.open{opacity:1;pointer-events:auto}
.modal{width:min(520px,100%);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--e3);overflow:hidden;transform:translateY(16px) scale(.98);transition:transform var(--t-base) var(--ease);max-height:92vh;overflow-y:auto}
.modal-scrim.open .modal{transform:none}
.modal-top{background:linear-gradient(160deg,#161719,#232427);color:#fff;padding:26px 28px;position:relative;overflow:hidden}
.modal-top::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 0,rgba(var(--accent-rgb),.35),transparent 60%)}
.modal-top .rlab{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);position:relative}
.modal-top .big{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em;color:#fff;margin:.2em 0;position:relative}
.modal-top .sum{font-size:var(--fs-xs);color:rgba(255,255,255,.75);position:relative}
.modal-body{padding:26px 28px}
.modal-body h3{font-size:var(--fs-h3);margin-bottom:.3em}
.modal-body p.sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:1.2rem}
.modal-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.modal-field label{font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.modal-field input{padding:.85em 1em;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--font-text);font-size:var(--fs-body);color:var(--ink);background:var(--bg);transition:var(--t-base) var(--ease)}
.modal-field input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)}
.modal-field input.err{border-color:#e23b3b;box-shadow:0 0 0 4px rgba(226,59,59,.12)}
.modal .btn{width:100%;justify-content:center;margin-top:6px}
.modal-close{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:grid;place-items:center;transition:var(--t-base) var(--ease)}
.modal-close:hover{background:rgba(255,255,255,.28);transition-duration:var(--t-fast)}
.modal-close svg{width:16px;height:16px}
/* Odkaz uvnitř věty měl 17 px na výšku, norma 24. inline-block
s odsazením plochu zvětší a řádek se nerozhodí. */
.tapok{display:inline-block;padding-block:4px}
.modal-fine{font-size:var(--fs-label);color:var(--muted);margin-top:1rem;text-align:center}
/* Chybová hláška u formuláře. Nic nového mimo systém — jen růžová pro
text pod 24 px, tedy --pink-ink, a stejná velikost jako drobný text. */
.modal-err{color:var(--pink-ink);font-weight:600;margin-top:.5em}
.modal-err[hidden]{display:none}
.modal-success{text-align:center;padding:16px 8px}
.modal-success .tick{width:64px;height:64px;border-radius:50%;background:var(--pink-soft);display:grid;place-items:center;margin:0 auto 18px;color:var(--pink)}
.modal-success .tick svg{width:30px;height:30px}
.modal-success h3{font-size:var(--fs-h3);margin-bottom:.4em}
.modal-success p{color:var(--muted);font-size:var(--fs-sm)}
/* ---------- defense page extras ---------- */
.backlink{display:inline-flex;align-items:center;gap:.4em;color:var(--muted);font-size:var(--fs-sm);margin-bottom:1rem;transition:color var(--t-fast) var(--ease)}
.backlink:hover{color:var(--pink);transition-duration:var(--t-fast)}
.backlink svg{width:16px;height:16px}
/* ---------- global reach (dotted world map showpiece) ---------- */
.global{position:relative;overflow:hidden;color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,5vw,60px);background:radial-gradient(90% 120% at 50% -10%,#1b1d22,#0c0d0f)}
.global h2,.global h2 .muted{color:#fff}
.global .eyebrow{color:rgba(255,255,255,.72)}
.global .lead{color:rgba(255,255,255,.72)}
.wm{position:relative;margin-top:clamp(24px,4vw,40px)}
.wm-svg{width:100%;height:auto;display:block;overflow:visible}
.mk{fill:var(--pink)}
.mk-ring{fill:none;stroke:var(--pink);opacity:.7;transform-origin:center;transform-box:fill-box;animation:mkpulse 2.4s ease-out infinite}
@keyframes mkpulse{0%{transform:scale(.5);opacity:.85}80%,100%{transform:scale(3);opacity:0}}
.arc{fill:none;stroke:url(#arcgrad);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.7))}
.arc-dash{fill:none;stroke:rgba(var(--accent-rgb),.4);stroke-width:2.4;stroke-dasharray:3 9;stroke-linecap:round;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-48}}
/* operating markers — bright, pulsing */
.op-dot{fill:var(--pink);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.95))}
.op-ring{fill:none;stroke:var(--pink);stroke-width:2.2;opacity:.75;transform-origin:center;transform-box:fill-box;animation:mkpulse 2.4s ease-out infinite}
/* target markets — soft light glow over Europe */
.eu-target{fill:rgba(var(--accent-rgb),.20);filter:blur(9px)}
.gchips{display:flex;flex-direction:column;gap:16px;margin-top:clamp(20px,3vw,30px);align-items:center}
.gc-group{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:720px}
.gc-label{flex-basis:100%;text-align:center;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.gchip{display:flex;align-items:center;gap:.5em;font-size:var(--fs-xs);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:.5em 1em}
.gchip i{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px 1px rgba(var(--accent-rgb),.9)}
/* target chips — muted, hollow dot */
.gchip.target{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.58)}
.gchip.target i{background:transparent;border:1.5px solid rgba(var(--accent-rgb),.55);box-shadow:none}
@media(prefers-reduced-motion:reduce){.mk-ring,.op-ring,.arc-dash{animation:none}}
/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
/* V heru kratší náběh: je to první obrazovka a 0,8 s tam působí, jako by
se stránka nenačetla. Michaela 10. 8. chtěla nadpis do 400 ms. */
.js .hero [data-reveal],.js .dhero [data-reveal]{
transition-duration:.34s;transition-delay:0s !important}
/* staggered reveal — children slide in one-by-one (Apple-style) */
.js .stagger > *{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.js .stagger.in > *{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
/* .hero [data-reveal] má vlastní transition-duration a specificitou
přebíjelo `transition:none` — zůstávalo prolnutí 0,34 s. Pohyb tam
nebyl, ale při vypnutých animacích nemá být ani to. */
.js [data-reveal],.js .hero [data-reveal],.js .dhero [data-reveal]{
opacity:1;transform:none;transition:none}
*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}
/* ---------- žádné zapadání scén ----------
Bývalo tu scroll-snap-type:y proximity a .hero{scroll-snap-align:start}.
Od chvíle, co je celý začátek stránky jedna přišpendlená scéna, je
.hero sticky prvek uvnitř .pin — a snap si ho pořád tahal zpátky na
svůj bod. Scroll se pak v půlce přechodu zasekl a skočil až o kus dál.
Přesně to skákání, co Michaela hlásila. Ostatní .section na stránce
nejsou, takže snap neměl co dělat, jen škodil. */
/* ---------- Live operation — celoobrazovkové video ---------- */
/* video se objeví prolnutím přes přišpendlené hero */
.liveop{position:relative;min-height:100svh;display:flex;align-items:flex-end;
overflow:hidden;background:#121314;color:#fff;isolation:isolate;z-index:1;
}
.liveop-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.liveop::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(18,19,20,.62) 0%,rgba(18,19,20,.22) 26%,
rgba(18,19,20,.18) 48%,rgba(18,19,20,.62) 74%,rgba(18,19,20,.90) 100%)}
.liveop-in{position:relative;z-index:2;width:100%;padding-block:0 clamp(56px,8vh,96px)}
.liveop .eyebrow{color:rgba(255,255,255,.72)}
.liveop .h{color:#fff;font-size:var(--fs-h2);max-width:16ch;margin-top:.3em;line-height:1.06}
.liveop .h .accent{color:var(--pink)}
.liveop .lead{color:rgba(255,255,255,.72);max-width:44ch}
.liveop-stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,64px);margin-top:clamp(24px,3.4vh,40px);
padding-top:clamp(18px,2.4vh,26px);border-top:1px solid rgba(255,255,255,.18)}
.liveop-stats b{display:block;font-family:var(--display,inherit);font-size:var(--fs-h2);font-weight:700;line-height:1}
.liveop-stats div:first-child b{color:var(--pink)}
.liveop-stats i{font-style:normal;display:block;margin-top:.35rem;font-size:var(--fs-label);
letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.58)}
@media(prefers-reduced-motion:reduce){.liveop-v{display:none}}
/* ---------- přerod fotky ve video přes vlásečnice ----------
Hero je přišpendlené uvnitř vlastního rámu (ne uvnitř ,
jinak by zůstalo přilepené pod celým webem). Scroll uvnitř rámu
řídí, jak moc je obraz rozpadlý. */
/* 4,2 obrazovky scrollu na pět scén — dřív 5,6 a vleklo se to */
.pin{position:relative;height:660svh}
.pin > .hero{position:sticky;top:0;height:100svh;min-height:100svh}
/* Canvas je replaced element — samotné inset:0 ho neroztáhne, drží si
velikost ze svých atributů. Bez width/height plátno nekrylo hero
a vpravo i dole zůstával tmavý pruh s tvrdou hranou. */
/* opacity tu dřív byla 0 a starý kód ji nastavoval z JS — po přepsání
na masky to nikdo nenastavoval a vlásky i lupy byly neviditelné. */
.hero-morph{position:absolute;inset:0;width:100%;height:100%;z-index:3;
display:block;pointer-events:none}
/* ---- druhé rozbalení: video → vějíř trhů ----
Sekce s videem je taky přišpendlená a přes ni se ze stejného jádra
rozevře bílý svět. Až je rozevřený celý, pin skončí a naváže sekce
vějíře — má stejné bílé pozadí, takže předání není vidět. */
/* Jeden rám pro celý začátek: fotka → video → vějíř. Dřív tu byly dvě
sekce a v každé totéž video, takže se hrálo dvakrát pod sebou. */
.fanwipe{position:absolute;inset:0;z-index:5;background:var(--bg);overflow:hidden;
opacity:0;will-change:transform}
.fanwipe-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}
/* vějíř jako scéna přes celou plochu rámu */
/* Vějíř je dominanta: jde přes celou šířku obrazovky a jádro sedí u
spodní hrany. Poměr 1200:500 drží SVG i plátno ve stejném mapování,
takže se popisky nerozejdou s vlákny. */
/* Scéna vějíře si brala kliknutí i s krytím 0 a leží nad hero, takže
„See live operation" a „Calculate savings" nešlo kliknout. Není to
.sc-wipe, tak na ni pravidlo pointer-events:none nesedělo. Myš dostane
jen když je vážně odkrytá — třídu .live nasazuje script.js. */
.fanwipe{pointer-events:none}
.fanwipe.live{pointer-events:auto}
.sc-fan{position:absolute;inset:0;z-index:1;overflow:hidden}
.sc-fan .wrap{max-width:none;width:100%;padding:0;height:100%;position:relative}
/* Vějíř je dominanta scény, takže je širší než rám a přetéká do stran
(vlákna se u krajů stejně ztrácejí v masce). Aspect 1200/560 odpovídá
novému viewBoxu; odsazení od spodní hrany je tam, aby jádro se svou
září nebylo useknuté — Michaela 7. 8. */
/* Vějíř už není na střed okna, ale na střed toho, co mu zbylo: text
i čísla stojí od 14. 8. v levém sloupci, takže se vějíř posune doprava
o tolik, aby jeho nejlevější popisek („Last-mile delivery & logistics")
začínal až za sloupcem. Doměřeno na 1280–1920 px, viz níž. */
.sc-fan .fan{position:absolute;left:calc(50% + clamp(80px,9.8vw,200px));
transform:translateX(-50%);
bottom:clamp(24px,4.4vh,68px);max-width:none; /* .fan má jinak strop 1360 px */
width:min(118%,1680px);aspect-ratio:1200/560;margin:0;height:auto}
.sc-fan .fan-svg,.sc-fan .fan-canvas{width:100%;height:100%}
/* Prstenec popisků je stažený blíž k jádru. Vlákna tím zůstanou velká
(vějíř je dominanta), ale rohy rámu se uvolní pro nadpis a čísla —
při plné velikosti do nich popisky zajížděly. */
/* Vějíř zmenšen z .78 na .64. Důvod: nadpis scény šel z 18 px na --fs-h2
(48 px) a při .78 do něj zajížděly popisky „Trucking & long haul"
a „Last-mile delivery" — vějíř se kreslí kolem středu, takže zmenšení
posune levé popisky doprava a udělá nadpisu místo. Zkoušel jsem .70,
tam kolize ještě zůstávala. */
.sc-fan .fnode{transform-box:view-box;transform-origin:600px 548px;transform:scale(.64)}
/* nadpis a čísla plavou nad ním vlevo */
/* Textový sloupec byl nalepený na horní hranu (padding-top 120 px, dole 0),
takže levá spodní třetina scény zela prázdnotou. Teď stojí svisle na
střed vedle vějíře a prázdno je nahoře i dole stejné.
Flex, ne transform: na .bb-top sedí data-reveal a ten transform používá.
14. 8.: sloupec je SVISLÝ a nese i čísla. Do té doby seděla čísla
absolutně v pravém horním rohu. Michaela: „podle mě se člověk skoro
nikdy na stránce doprava nedívá." Vpravo teď nezůstalo nic a vějíř má
celou zbylou plochu. */
/* Řada čísel je NAD nadpisem, ne pod ním — a je to měřením vynucené,
ne libovůle. Popisky vějíře tvoří prstenec, který na 1512 × 860 zabírá
celou šířku mezi y 286 a 589. Řada je široká přes celou scénu, takže
pod nadpisem by ležela přesně v něm: doměřeno 30–116 px překryvu na
„Advanced air mobility" a „Last-mile delivery". Nad prstencem je jediný
volný pás přes celou šířku, a nadpis se do něj vejít nemůže (sám je
206 px vysoký). Nadpis proto zůstává vlevo POD řadou — tam vějíř
popisky nemá, ty jsou uprostřed a vpravo.
Pořadí v HTML se nemění, mění se jen pořadí vykreslení. */
.sc-fan .bb-top{position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
/* Odsazení musí pustit lištu: ta je fixní a vysoká 79 px, takže při
menším odsazení se první číslo schová pod ni. */
padding:clamp(96px,11vh,128px) var(--pad) clamp(24px,3vh,40px);pointer-events:none}
.sc-fan .fan-stats{order:-1}
.sc-fan .sec-head{max-width:min(38%,420px)}
/* Michaela 11. 8.: „číslo $4.10T je kolem 90 px a nadpis kolem 22 px —
mezi nimi není nic a nadpis vedle toho čísla působí jako popisek."
Naměřeno ještě míň: 18 px, tedy velikost PEREXU. Nadpis scény má být
--fs-h2. Nová velikost se nezavádí, jen se sáhne po správném kroku. */
/* Strop 36 px (12. 8., OPRAVY.md bod 4). Při plných 48 px se nadpis lámal
na čtyři řádky a končil na x=439, tedy na paprscích a těsně u ikony
„Trucking" (x=470). Rozšíření sloupce, které zadání navrhovalo první,
to naopak ZHORŠÍ: tři řádky jsou delší, takže nadpis skončí na x=549,
rovnou v té ikoně. Doměřeno: 40 px končí na 469 (pořád kolize), 36 px
na 429 (39 px vzduchu), 32 px na 389.
36 px je tedy největší velikost, která dá tři řádky a skončí před
diagramem — a vějíř se přitom nemusel zmenšit.
Stupnice mezi --fs-h2 (48) a --fs-h3 (22) žádný krok nemá, proto je to
strop na tokenu, ne nová hodnota mimo stupnici. Na mobilu se nic nemění:
--fs-h2 tam vychází 32 px, takže min() vezme 32. */
.sc-fan .sec-head .h{font-size:min(var(--fs-h2),2.25rem);line-height:1.06}
/* Na užším desktopu je vějíř blíž ke středu — na 1280 px začíná jeho ikona
už na x=414 místo 468, takže 36 px kolidovalo o 15 px. Doměřeno, strop
je tam proto 32 px (nadpis končí na 389, vzduch 25 px). */
@media(min-width:901px) and (max-width:1400px){
.sc-fan .sec-head .h{font-size:min(var(--fs-h2),2rem)}
}
.sc-fan .sec-head .lead{font-size:var(--fs-sm);margin-top:.5rem;max-width:34ch}
/* Čísla stojí pod nadpisem a perexem, ve stejném sloupci a na stejné
levé hraně — klidná řada, velké číslo a pod ním popisek. Šířka je táž
jako u hlavičky, aby popisky lámaly na stejném místě. */
.sc-fan .fan-stats{position:static;display:flex;flex-direction:column;
gap:0;width:min(980px,100%);max-width:100%;
margin:clamp(16px,2.6vh,30px) auto 0;text-align:center;
display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;
align-items:start}
/* ---------- tři čísla v jedné řadě (16. 8.) ------------------------
Do 16. 8. tu bylo $4.10T velké, růžové a se září, a pod čarou dvě
menší čísla. Radek 8. 8. to tak chtěl („to nejdůležitější číslo má
svítit"), jenže tehdy stála čísla v pravém horním rohu vedle vějíře.
Od 14. 8. jsou v levém sloupci pod nadpisem a Michaela je 16. 8.
posunula nahoru doprostřed, vedle sebe.
V řadě musí být všechna tři stejně velká. Kdyby jedno zůstalo
dominantou, přebilo by na téhle obrazovce nadpis — a jedna dominanta
na obrazovku je pravidlo 1 z PREDLOHA.md. Dominantou je tady nadpis
scény, čísla jsou důkaz pod ním.
Proto je pryč i růžová záře: byla vlastností toho jednoho čísla,
ne řady. Barva čísel je --ink-2, popisky --muted (5,07 : 1 na bílé;
--muted-2 má jen 2,80 a normu neplní). */
.sc-fan .fst{display:block;background:none;backdrop-filter:none;
border:0;box-shadow:none;padding:0 clamp(12px,2vw,28px)}
.sc-fan .fst + .fst{border-left:1px solid var(--line)}
.sc-fan .fst-v{font-family:var(--font-text);font-weight:800;
font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.03em;
font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sc-fan .fst-v .u{font-size:max(var(--fs-label),.5em);margin-left:.2em;
font-weight:700;color:var(--muted)}
.sc-fan .fst-l{font-size:var(--fs-label);color:var(--muted);
margin-top:.5em;letter-spacing:.02em;line-height:1.3}
.sc-fan .note-wrap{display:none}
@media(max-width:860px){
.sc-fan .sec-head{max-width:none}
.sc-fan .fan-stats{position:static;width:auto;margin-top:clamp(14px,2.4vh,22px)}
}
/* Na úzkém displeji nemá řada kam se rozložit — jde pod sebe a svislé
linky mizí, protože by dělily nic. */
@media(max-width:700px){
.sc-fan .fan-stats{grid-template-columns:1fr;gap:clamp(12px,2.4vh,20px)}
.sc-fan .fst{padding:0;text-align:center}
.sc-fan .fst + .fst{border-left:0}
}
@media(prefers-reduced-motion:reduce){.fanwipe{display:none}}
/* Video se neprolíná — leží nad fotkou a odkrývá ho vějíř (clipPath).
Dokud se nezačne scrollovat, je maska prázdná, takže není vidět nic. */
/* Odkrývání MĚKKOU maskou, ne clip-pathem: clip umí jen ostrý řez, a ať
je nazubený jakkoli jemně, pořád se čte jako pila. Radiální přechod
dá rozplynutí a vlákna kreslená na plátně přes něj přesahují — teprve
to vypadá jako vlásky ve vějíři. */
/* přechod řídí JS; než se spustí, scéna je skrytá */
/* Video je mimo .hero-photo, takže si musí vlastní krytí i mapování
obrázku nést samo. z-index 6 = nad vějířem (5), pod vrstvami (7). */
/* pointer-events:none je nutné: video je teď NAD vějířem, a i s krytím 0
by mu bralo myš — hraní s vlásečnicemi by přestalo fungovat. Video
samo interaktivní nikdy není. */
.hp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 50%;z-index:6;opacity:0;pointer-events:none;
will-change:transform}
.fanclip{position:absolute;width:0;height:0;overflow:hidden}
.hero-morph{z-index:3}
@media(prefers-reduced-motion:reduce){.pin{height:auto}.pin > .hero{position:relative}.hero-morph{display:none}}
/* Vláknový přerod je zaparkovaný (6. 8.) — vypadal jako rozmazaná kaše
přes fotku i přes video. Kód zůstává; zapne se smazáním třídy
`no-morph` z v index.html. */
html.no-morph .pin{height:auto}
html.no-morph .pin > .hero{position:relative}
html.no-morph .hero-morph{display:none}
/* ---------- scény uvnitř rámu: vrstvy a historie ----------
Odkrývají se stejnou měkkou maskou jako video a vějíř, každá má
vlastní proměnné, aby se navzájem nepřepisovaly. */
/* Scény vrstev a historie leží NAD vějířem. Maska je jen vizuální —
na kliky a hover se pořád chytají, takže by kurzor na vějíř nedosáhl
a hraní s vlásečnicemi by nefungovalo. Proto nechytat. */
.sc-wipe{position:absolute;inset:0;overflow:hidden;background:var(--bg);pointer-events:none;
opacity:0;will-change:transform}
.sc-wipe--layers{z-index:7;}
.sc-wipe--hist{z-index:8;color:var(--ink)}
.sc-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}
.sc-in{position:absolute;inset:0;z-index:1;display:flex;align-items:center;
padding-block:clamp(84px,11vh,120px) clamp(30px,5vh,60px)}
.sc-in .wrap{width:100%}
.sc-in .h{font-size:var(--fs-h2);line-height:1.05;margin-top:.3em}
.sc-in .lead{max-width:52ch;margin-top:.7rem}
/* vrstvy — plotny nad sebou, naše svítí růžově */
.lstack{margin-top:clamp(20px,3.4vh,38px);display:flex;flex-direction:column;gap:10px}
.lay{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
padding:clamp(12px,1.7vh,20px) clamp(16px,2vw,26px);border-radius:var(--r-md);
border:1px solid var(--line);background:var(--bg-2);
opacity:.34;transform:translateY(10px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)
background .7s ease,border-color .7s ease,box-shadow .7s ease}
.lay.on{opacity:1;transform:none}
.lay-n{font-family:var(--font-display);font-weight:700;color:var(--muted-2);font-size:var(--fs-sm);flex:none;width:2.2em}
.lay-t{font-weight:600;font-size:var(--fs-lead)}
.lay-s{color:var(--muted);font-size:var(--fs-xs);margin-left:auto;text-align:right}
.lay--us{border-color:rgba(var(--accent-rgb),.35)}
.lay--us.on{background:linear-gradient(100deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));
border-color:rgba(var(--accent-rgb),.75);
box-shadow:var(--lift)}
.lay--us.on .lay-t{color:var(--pink)}
.lay--us.on .lay-n{color:var(--pink)}
/* historie — pás let */
.htl{margin-top:clamp(20px,3.4vh,38px);display:flex;gap:clamp(10px,1.4vw,20px);align-items:stretch}
.hit{flex:1;min-width:0;padding:clamp(12px,1.6vh,18px) clamp(12px,1.4vw,18px);
border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-2);
opacity:0;transform:translateY(14px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.hit.on{opacity:1;transform:none}
.hit img{width:100%;height:clamp(70px,11vh,104px);object-fit:cover;border-radius:var(--r-sm);
margin-bottom:.7rem;filter:grayscale(1) contrast(1.05)}
.hit b{display:block;font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;
font-size:var(--fs-h2);line-height:.95;color:var(--ink)}
.hit i{display:block;font-style:normal;font-weight:600;margin-top:.5rem;font-size:var(--fs-sm)}
.hit span{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.3rem;line-height:1.35}
.hit--fell b{color:var(--muted-2)}
.hit--fell i{color:var(--muted-2)}
.hit--now{border-color:rgba(var(--accent-rgb),.55);
background:linear-gradient(100deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02))}
.hit--now b,.hit--now i{color:var(--pink)}
@media(max-width:860px){
.htl{flex-wrap:wrap;gap:8px}.hit{flex:1 1 45%}
.hit img{height:64px}
.hit b{font-size:var(--fs-lead)}
.lay-s{display:none}
/* na úzké obrazovce se scéna neroztahuje na střed — jinak zůstane
mezi nadpisem a obsahem prázdné pásmo */
.sc-in{align-items:flex-start;padding-block:clamp(76px,10vh,100px) 20px}
.sc-in .lead{margin-top:.5rem;font-size:var(--fs-sm)}
.lstack{margin-top:18px;gap:8px}
.htl{margin-top:18px}
}
/* =========================================================
SALES / KONFIGURÁTOR (sales.html)
Radek: „to je jakoby konfigurátor… čtyři nástavby, čtyři barevný
variace, defaultně bílá" — a hravost vějíře se sem musí přenést,
proto pod vozem běží stejná vlákna a reagují na kurzor.
========================================================= */
/* --- laky. --pt = plech, --pl = obrys, --pd = stín/tmavší plocha --- */
.cfg{--pt:#EDEEF0;--pl:#B9BCC3;--pd:#DDDFE3;--pgl:255,255,255}
.cfg[data-color="red"] {--pt:#B21F35;--pl:#7C1122;--pd:#8E1729;--pgl:214,60,86}
.cfg[data-color="olive"] {--pt:#666B3E;--pl:#41452A;--pd:#525730;--pgl:132,138,88}
.cfg[data-color="graphite"]{--pt:#3B3E44;--pl:#22242A;--pd:#2C2F35;--pgl:110,116,128}
.cfg{position:relative;overflow:hidden;isolation:isolate;
padding-block:clamp(96px,12vh,132px) clamp(40px,6vw,64px);
background:
radial-gradient(90% 60% at 50% 108%,rgba(122,132,158,.10),transparent 66%),
linear-gradient(178deg,var(--bg) 0%,var(--bg-2) 62%,var(--bg) 100%)}
.cfg-silk{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.cfg-grid{position:relative;z-index:1;display:grid;gap:clamp(18px,2.4vw,34px);
grid-template-columns:minmax(0,1fr);
grid-template-areas:"copy" "price" "stage" "setup"}
@media(min-width:1060px){
.cfg-grid{grid-template-columns:minmax(250px,.92fr) minmax(0,1.75fr) minmax(258px,.86fr);
grid-template-areas:"copy price setup" "copy stage setup";
align-items:start;column-gap:clamp(20px,2.4vw,40px)}
}
/* ---------- levý sloupec ---------- */
.cfg-copy{grid-area:copy;align-self:center}
.cfg-copy h1{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.02em;margin-top:.5rem}
.cfg-copy h1 .dot{color:var(--pink)}
.cfg-copy .lead{font-size:var(--fs-body);max-width:34ch}
/* přepínač obchodního modelu — Radkův „jezdec" */
.mtoggle{position:relative;display:flex;margin-top:1.8rem;padding:5px;gap:4px;
background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);
box-shadow:inset 0 1px 2px rgba(0,0,0,.03);max-width:400px}
.mt-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);
background:var(--pink);box-shadow:var(--lift);
transition:transform var(--t-base) var(--ease)}
.mtoggle.b .mt-pill{transform:translateX(100%)}
.mtoggle button{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
gap:.5em;padding:.72em .6em;border:0;background:none;cursor:pointer;border-radius:var(--r-pill);
font-family:var(--font-text);font-size:var(--fs-xs);font-weight:600;color:var(--muted);
transition:color var(--t-fast) var(--ease)}
.mtoggle button svg{width:16px;height:16px}
/* Bílá na růžové pilulce dávala 3,09 : 1 při 13 px, kde je práh 4,5.
--on-pink je přesně pro malý text na růžové výplni: 6,23 : 1. */
.mtoggle button.on{color:var(--on-pink)}
.mt-note{margin-top:.85rem;font-size:var(--fs-xs);color:var(--muted);max-width:38ch}
/* ---------- svítící cena ---------- */
.cfg-price{grid-area:price;text-align:center;align-self:end;padding-bottom:.4rem}
.cp-lab{font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cp-big{display:flex;align-items:flex-start;justify-content:center;gap:.06em;margin-top:.15em;
color:var(--pink);line-height:.92;
filter:drop-shadow(0 8px 34px rgba(var(--accent-rgb),.34))}
.cp-big .cur{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h2);margin-top:.16em}
.cp-big .num{font-family:var(--font-text);font-weight:800;font-size:var(--fs-display);letter-spacing:-.035em;
font-variant-numeric:tabular-nums}
.cp-big .per{font-family:var(--font-text);font-weight:600;font-size:var(--fs-h3);
color:var(--ink);align-self:flex-end;margin-bottom:.5em;margin-left:.1em}
.cp-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:.5em;max-width:40ch;margin-inline:auto;min-height:2.5em}
.cp-sub b{color:var(--ink);font-weight:600}
/* ---------- vůz ---------- */
.cfg-hint{display:flex;align-items:center;gap:.5em;margin-top:.4rem;
font-size:var(--fs-label);color:var(--muted-2);letter-spacing:.02em}
.cfg-hint svg{width:14px;height:14px}
@media(hover:none){.cfg-hint{display:none}}
/* ---------- pravý panel ---------- */
.cfg-setup{grid-area:setup;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,1.7vw,24px)}
.cs-h{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);line-height:1.2}
.cs-lab{font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
font-weight:600;margin:1.15rem 0 .6rem}
.cs-bodies{display:flex;flex-direction:column;gap:7px}
.cs-b{position:relative;display:flex;align-items:center;gap:11px;width:100%;
padding:9px 11px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--bg);
cursor:pointer;text-align:left;transition:var(--t-base) var(--ease);color:var(--muted)}
.cs-b:hover{border-color:rgba(var(--accent-rgb),.4);background:var(--bg-2);transition-duration:var(--t-fast)}
.cs-b:hover .cs-thumb{opacity:.85;transition-duration:var(--t-fast)}
.cs-thumb{width:64px;height:34px;flex:none;object-fit:contain;transition:var(--t-base) var(--ease);
/* oficiální snímky z produktové brožury jsou na bílé — multiply ji zahodí,
takže sedí i na růžově podbarveném vybraném řádku a měkký stín zůstane */
mix-blend-mode:multiply;filter:saturate(0) contrast(1.06);opacity:.62}
.cs-bt{font-family:var(--font-text);font-size:var(--fs-xs);font-weight:600;color:var(--ink);line-height:1.2}
.cs-tick{width:17px;height:17px;margin-left:auto;color:var(--pink);opacity:0;transform:scale(.6);
transition:var(--t-base) var(--ease);flex:none}
.cs-b.on{border-color:var(--pink);background:rgba(var(--accent-rgb),.055);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09)}
.cs-b.on .cs-thumb{opacity:1;filter:none}
.cs-b.on .cs-tick{opacity:1;transform:none}
.cs-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cs-c{display:flex;flex-direction:column;align-items:center;gap:.45em;padding:9px 3px;
border-radius:var(--r-sm);border:1.5px solid transparent;background:none;cursor:pointer;transition:var(--t-base) var(--ease)}
.cs-c i{width:27px;height:27px;border-radius:50%;background:var(--sw);
border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 -3px 7px rgba(0,0,0,.16);transition:var(--t-base) var(--ease)}
.cs-c span{font-size:var(--fs-label);color:var(--muted);font-weight:500;letter-spacing:.01em}
.cs-c:hover{background:var(--bg-2);transition-duration:var(--t-fast)}
.cs-c.on{border-color:var(--pink);background:rgba(var(--accent-rgb),.055)}
.cs-c.on i{box-shadow:inset 0 -3px 7px rgba(0,0,0,.16),0 0 0 3px rgba(var(--accent-rgb),.22)}
.cs-c.on span{color:var(--ink);font-weight:600}
.cs-fine{font-size:var(--fs-label);line-height:1.45;color:var(--muted-2);margin-top:1.1rem}
/* ---------- čtyři parametry pod vozem ---------- */
.cfg-specs{position:relative;z-index:1;display:grid;gap:12px;margin-top:clamp(20px,3vw,34px);
grid-template-columns:repeat(auto-fit,minmax(174px,1fr))}
/* Světlo za dlaždicemi — bez něj by bílé sklo na bílém pozadí nebylo vidět.
Tohle je to, co se skrz sklo láme a co ho vůbec dělá sklem. */
.cfg-specs::before{content:"";position:absolute;z-index:-1;
inset:-26px 2% -22px;border-radius:var(--r-lg);pointer-events:none;
background:
radial-gradient(46% 120% at 18% 50%,rgba(116,124,146,.15),transparent 72%),
radial-gradient(42% 115% at 52% 42%,rgba(142,150,172,.13),transparent 74%),
radial-gradient(44% 120% at 84% 58%,rgba(126,134,156,.12),transparent 72%);
filter:blur(26px)}
.cs4{display:flex;align-items:center;gap:13px;padding:17px 19px;border-radius:var(--r-md);
border:0;box-shadow:none;
translate:0 0;transition:transform var(--t-base) var(--ease), background var(--t-fast) var(--ease)}
.cs4:hover{transform:scale(1.035);
background:linear-gradient(158deg,rgba(255,255,255,.70),rgba(255,255,255,.34))}
@media(prefers-reduced-motion:reduce){.cs4{animation:none}}
.cs4-ic{flex:none;width:40px;height:40px;border-radius:var(--r-sm);
background:linear-gradient(150deg,rgba(122,130,152,.20),rgba(122,130,152,.09));
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--e1);
display:grid;place-items:center;color:#5d6478;position:relative;z-index:3}
.cs4-ic svg{width:19px;height:19px}
.cs4>div:last-of-type{position:relative;z-index:3}
.cs4-v{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.01em;
color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.cs4-v .u{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.cs4-l{font-size:var(--fs-label);color:var(--muted);margin-top:.35em;line-height:1.3}
.cs4-dl{display:flex;align-items:center;justify-content:center;gap:.55em;padding:17px 19px;
border:0;border-radius:var(--r-md);color:var(--ink);position:relative;z-index:3;
font-size:var(--fs-xs);font-weight:600;transition:var(--t-base) var(--ease)}
.cs4-dl svg{width:17px;height:17px;color:var(--pink)}
.cs4-dl:hover{transform:scale(1.028);
background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.44))}
.cs4-dl{transition:transform var(--t-base) var(--ease), background var(--t-fast) var(--ease)}
.cs4-dl>*{position:relative;z-index:3}
/* =========================================================
EKONOMIKA PROVOZU
========================================================= */
.econ{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
@media(min-width:940px){.econ{grid-template-columns:.86fr 1.14fr}}
.econ-in{padding:clamp(24px,3.2vw,40px)}
.efield{margin-bottom:26px}
.efield label{display:flex;justify-content:space-between;align-items:baseline;
font-size:var(--fs-sm);color:var(--muted);margin-bottom:11px}
.efield .ev{color:var(--muted);font-size:var(--fs-xs)}
.efield .ev b{font-family:var(--font-text);font-weight:700;color:var(--ink);font-size:var(--fs-body);
font-variant-numeric:tabular-nums}
/* --muted-2 dávalo 2,80 : 1 na bílé (norma 4,5); --muted má 5,07. */
.erng{display:flex;justify-content:space-between;font-size:var(--fs-label);color:var(--muted);margin-top:6px}
.ederived{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
background:linear-gradient(120deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.02));
border:1px solid rgba(var(--accent-rgb),.24)}
.ed-ic{flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;
color:var(--pink);border:1px solid rgba(var(--accent-rgb),.2)}
.ed-ic svg{width:18px;height:18px}
.ed-l{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ed-l em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted-2);font-weight:600}
.ed-v{font-family:var(--font-text);font-weight:800;font-size:var(--fs-h3);color:var(--ink);margin-top:.15em;
font-variant-numeric:tabular-nums}
.ed-s{font-size:var(--fs-label);color:var(--muted);margin-top:.3em;line-height:1.4}
.emile{margin-top:14px;padding:11px 15px;border-radius:var(--r-sm);background:var(--bg-2);
font-size:var(--fs-label);color:var(--muted)}
.emile b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* ---------- pravá polovina: odpověď ----------------------------------
Podle schválené předlohy (podklady/kalkulacka-navrh.html, 14. 8.).
Byla tmavá s přechodem a se dvěma září; teď je to světlá polovina
téhož rámu. Uvnitř nejsou karty, jen řádky — osm nádob na jedné
obrazovce bylo proti pravidlu 4 z PREDLOHA.md. */
.econ-out{background:var(--bg-2);
padding:clamp(24px,3.2vw,40px);position:relative;display:flex;flex-direction:column}
.econ-out>*{position:relative}
.eo-h{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.eo-sum{font-size:var(--fs-xs);color:var(--muted);margin-top:.4em}
/* JEDNA dominanta: cena je největší text scény (pravidlo 1). */
.eo-big{display:flex;align-items:flex-end;gap:.35em;flex-wrap:wrap;margin-top:1rem}
.eo-v{font-family:var(--font-text);font-weight:800;letter-spacing:-.045em;
line-height:.92;font-size:clamp(2.6rem,5.4vw,4.2rem);font-variant-numeric:tabular-nums}
.eo-j{font-size:var(--fs-body);color:var(--muted);font-weight:600;padding-bottom:.55em}
.eo-pill{margin-left:auto;background:var(--pink-btn);color:var(--on-pink-btn);
border-radius:var(--r-pill);padding:.42em 1em;font-size:1.1875rem;font-weight:700;
white-space:nowrap;align-self:center}
.eo-per{font-size:var(--fs-xs);color:var(--muted);margin:.5rem 0 0}
.eo-per b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* Srovnání jsou TŘI PRUHY, ne tři karty s přeškrtnutými cenami.
Přeškrtnutá cena je vzorec z e-shopu; tady má být vidět rozdíl. */
.bars{display:flex;flex-direction:column;gap:12px;margin:1.4rem 0 1.1rem}
.bar{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:14px;
font-size:var(--fs-xs);padding:0;background:none;border:0}
.bar-kdo{color:var(--muted);font-weight:600}
.bar-track{height:10px;border-radius:5px;background:rgba(11,12,14,.07);overflow:hidden;margin:0}
.bar-track span{display:block;height:100%;border-radius:5px;background:#C9CBD1;
transition:width var(--t-slow) var(--ease)}
.bar-kolik{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}
.bar--us .bar-kdo{color:var(--ink);font-weight:800}
.bar--us .bar-track span{background:var(--pink-btn)}
.bar--us .bar-kolik{color:var(--ink)}
@media(max-width:520px){.bar{grid-template-columns:88px 1fr auto;gap:10px}}
/* Světlá polovina — barvy textu jdou z tokenů pro světlý povrch. */
.eo-inc{display:flex;gap:.6em;align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-2);
line-height:1.45;margin-bottom:.9rem}
.eo-inc b{font-weight:700}
/* fajfka u výčtu: růžová z tokenů, ne zelená — zelená není barva značky */
.eo-inc svg{width:15px;height:15px;flex:none;margin-top:.15em;color:var(--pink-ink)}
.econ-out .btn{width:100%;justify-content:center;margin-top:auto}
.eo-fine{font-size:var(--fs-label);color:var(--muted);margin-top:.75rem;line-height:1.45}
.econ-alt{margin-top:1.2rem;font-size:var(--fs-xs);color:var(--muted);text-align:center}
.econ-alt a{color:var(--pink-ink);font-weight:600;border-bottom:1px solid rgba(var(--accent-rgb),.45)}
/* =========================================================
PROČ BATTSWAP
========================================================= */
.wgrid{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.wcard{padding:clamp(20px,2.2vw,28px);border-radius:var(--radius);border:1px solid var(--line);
background:var(--card);box-shadow:var(--shadow);transition:var(--t-base) var(--ease)}
.wcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-rgb),.3);transition-duration:var(--t-fast)}
.wc-ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--pink-soft);display:grid;place-items:center;
color:var(--pink);margin-bottom:1rem}
.wc-ic svg{width:21px;height:21px}
.wcard h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);line-height:1.22}
.wcard p{font-size:var(--fs-sm);color:var(--muted);margin-top:.6em;line-height:1.6}
/* nejsilnější argument nedostane víc místa, ale barvu — mřížka tak zůstane
celá 3x2 a nikde nezbyde díra po liché kartě */
.wcard--hero{background:linear-gradient(150deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.02));
border-color:rgba(var(--accent-rgb),.3)}
.wcard--hero .wc-ic{background:var(--pink);color:#fff}
.wc-fig{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1.1rem}
.wcf{padding:13px 14px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.7);border:1px solid var(--line)}
/* Velká tenká číslice — druhý prvek z Radkova časopisu: fakt stojí sám za sebe,
pod ním jen drobný popisek. Váha 300 proti našim tučným cenám dělá kontrast. */
.wcf b{display:block;font-family:var(--font-text);font-weight:300;
font-size:var(--fs-h2);letter-spacing:-.035em;
color:var(--muted-2);line-height:.92}
.wcf i{display:block;font-style:normal;font-size:var(--fs-label);color:var(--muted);margin-top:.45em;line-height:1.35}
.wcf--us{background:#fff;border-color:rgba(var(--accent-rgb),.45)}
.wcf--us b{color:var(--pink)}
/* =========================================================
TECHNICKÁ DATA
========================================================= */
/* min() kolem 430px — jinak sloupec drží 430 px i na mobilu a stránka
se roztáhne do strany (vodorovný scroll na 375 px). */
.tspecs{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
.tsp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(18px,2vw,26px);box-shadow:var(--shadow)}
/* Nadpis skupiny parametrů: text tmavý, růžovou nese čárka —
stejná řeč jako u .eyebrow. */
.tsp h4{font-size:var(--fs-label);letter-spacing:.10em;text-transform:uppercase;color:var(--ink);
display:flex;align-items:center;gap:10px;white-space:nowrap}
.tsp h4::before{content:"";flex:none;width:22px;height:1px;background:var(--pink)}
.tsp dl{margin:0}
.tsp dl>div{display:flex;justify-content:space-between;gap:14px;padding:.62em 0;
border-top:1px solid var(--line-2)}
.tsp dl>div:first-child{border-top:0}
.tsp dt{font-size:var(--fs-xs);color:var(--muted);margin:0}
.tsp dd{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums}
.dims{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3vw,44px);
margin-top:clamp(14px,1.6vw,20px);padding:clamp(18px,2.2vw,30px);
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.dims > svg{flex:1 1 380px;min-width:300px;max-width:660px;height:auto}
.dims .dsil{fill:none;stroke:var(--muted-2);stroke-width:1.8;stroke-linejoin:round;opacity:.5}
.dims .dm{fill:none;stroke:var(--muted-2);stroke-width:1.3}
.dims .dm-g{stroke-dasharray:5 6;opacity:.7}
.dims .dmt{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:700;fill:var(--ink);
text-anchor:middle;font-variant-numeric:tabular-nums}
.dims .dmn{font-family:var(--font-text);font-size:var(--fs-xs);font-weight:500;fill:var(--muted-2);text-anchor:middle}
.dims-dl{flex:0 0 auto}
.dims-dl svg{width:17px;height:17px;flex:none}
/* =========================================================
CALL TO ACTION
========================================================= */
.ctarow{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.ct{display:flex;align-items:center;gap:13px;padding:17px 19px;border-radius:var(--r-md);
border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
text-align:left;cursor:pointer;font:inherit;color:inherit;transition:var(--t-base) var(--ease);width:100%}
.ct:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.42);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.ct-ic{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--pink-soft);
display:grid;place-items:center;color:var(--pink)}
.ct-ic svg{width:20px;height:20px}
.ct-t{min-width:0}
.ct-t b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.ct-t i{display:block;font-style:normal;font-size:var(--fs-label);color:var(--muted);margin-top:.25em;line-height:1.35}
.ct-ar{width:17px;height:17px;margin-left:auto;flex:none;color:var(--muted-2);transition:var(--t-base) var(--ease)}
.ct:hover .ct-ar{color:var(--pink);transform:translateX(3px);transition-duration:var(--t-fast)}
@media(max-width:1059px){
.cfg{padding-block:clamp(88px,11vh,110px) clamp(32px,5vw,48px)}
.cfg-price{align-self:auto;text-align:left}
.cp-big{justify-content:flex-start}
.cp-sub{margin-inline:0}
}
@media(max-width:520px){
.cs-colors{grid-template-columns:repeat(4,1fr)}
.cs-c span{font-size:var(--fs-label)}
}
/* direct purchase = delší číslo (36,500) — musí se vejít na jeden řádek */
.cp-big.wide .num{font-size:var(--fs-display)}
.cp-big.wide .per{margin-bottom:.35em}
.modal-top .big i{font-style:normal;font-weight:500;font-size:var(--fs-sm);color:var(--muted);margin-left:.1em}
/* ---------- patička: sociální sítě + telefon ---------- */
.socials{display:flex;align-items:center;gap:14px;margin-top:1.2rem;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
border:1px solid var(--line);color:var(--ink-2);
transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.socials a svg{width:19px;height:19px}
.socials a:hover{color:var(--pink);border-color:rgba(var(--accent-rgb),.6);
background:rgba(var(--accent-rgb),.07);transform:translateY(-2px)}
.socials .tel{width:auto;height:38px;border-radius:var(--r-pill);padding:0 16px;
font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em}
/* =========================================================
REÁLNÉ FOTKY (sales.html)
Grocery je vůz, který dneska jezdí — proto je ve scéně fotka.
Ostatní nástavby zatím fotky nemají, tam zůstává kresba.
========================================================= */
/* --- vůz ve scéně: fotka místo kresby --- */
.veh-photo{width:100%;max-width:700px;position:relative;margin-inline:auto}
.veh-photo img{width:100%;height:auto;display:block;aspect-ratio:940/520;
/* JPEG + maska místo PNG s alfou — pětinová váha při stejné siluetě.
Maska se mění s nástavbou, proto přichází inline jako --m. */
-webkit-mask-image:var(--m);mask-image:var(--m);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* laky se přepínají, ať to nepřeskočí */
.veh-photo img{transition:opacity var(--t-fast) var(--ease)}
.veh-photo.swap img{opacity:0}
/* štítek pod vozem — co je fotka a co vizualizace */
.veh-state{display:flex;align-items:center;gap:.5em;margin-top:.7rem;
font-size:var(--fs-label);color:var(--muted);letter-spacing:.01em}
/* Tečka u popisku „render / dobarveno" nenese informaci, jen odděluje —
proto šedá z tokenů, ne barevný semafor. */
.vs-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none;
box-shadow:0 0 0 3px rgba(11,12,14,.06)}
.cfg[data-veh="tinted"] .vs-dot{background:var(--muted-2);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
/* --- galerie z provozu --- */
.opgrid{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.op{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-3);
box-shadow:var(--shadow);transition:var(--t-base) var(--ease)}
.op:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);transition-duration:var(--t-fast)}
.op{aspect-ratio:3/2}
.op img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--t-base) var(--ease)}
/* fotky jsou obalené kvůli WebP; obal je normálně řádkový prvek,
takže by se výška 100 % neměla o co opřít a fotka by se sesypala. */
.op picture{display:block;width:100%;height:100%}
.op:hover img{transform:scale(1.035);transition-duration:var(--t-fast)}
.op figcaption{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;color:#fff;font-size:var(--fs-label);
line-height:1.4;background:linear-gradient(transparent,rgba(14,14,16,.82) 58%)}
.op figcaption b{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:.25em}
/* velká fotka zabere 2x2 buňky — mřížka tak vyjde přesně 3x3 a nezbyde díra */
@media(min-width:900px){.op--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
/* --- fotky na kartách „proč BattSwap" --- */
.wcard{padding:0;overflow:hidden;display:flex;flex-direction:column}
.wc-img{position:relative;margin:0}
.wc-img img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.wcard .wc-ic{position:absolute;left:16px;bottom:-21px;width:42px;height:42px;border-radius:var(--r-sm);
background:#fff;display:grid;place-items:center;color:var(--pink);margin:0;
box-shadow:var(--e1)}
.wcard--hero .wc-ic{background:var(--pink);color:#fff}
.wcard h3{margin:34px clamp(18px,2vw,24px) 0}
.wcard p{margin:.6em clamp(18px,2vw,24px) 0}
.wcard .wc-fig{margin:1.1rem clamp(18px,2vw,24px) 0}
.wcard > :last-child{margin-bottom:clamp(20px,2.2vw,26px)}
/* --- fotopás nad CTA --- */
.ctaphoto{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:clamp(18px,2.4vw,28px);
box-shadow:var(--shadow-lg)}
.ctaphoto picture{display:block}
.ctaphoto img{width:100%;height:auto;display:block;aspect-ratio:21/8;object-fit:cover;min-height:230px}
/* Obal .ctaphoto-in je od 15. 8. zrušený celý — text je nad fotkou, tedy
ho nad ní nemá co držet, a s ním padly i jeho dva tmavé závoje. Fotka
je teď čistý pás, na kterém je vidět celý vůz. */
@media(max-width:620px){
.ctaphoto img{aspect-ratio:4/3}
}
/* detailní fotky v technické sekci */
.tdetail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(12px,1.4vw,18px);margin-top:clamp(12px,1.4vw,18px)}
.tdetail figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow);aspect-ratio:3/2}
.tdetail img{width:100%;height:100%;object-fit:cover;display:block}
.tdetail figcaption{position:absolute;inset:auto 0 0 0;padding:40px 18px 15px;color:#fff;
font-size:var(--fs-label);line-height:1.4;background:linear-gradient(transparent,rgba(14,14,16,.8) 58%)}
.tdetail figcaption b{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:.22em}
/* co je v sazbě — vyváží levý panel a odpovídá na „co za to dostanu" */
.einc{margin-top:clamp(16px,2vw,24px);padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.einc-h{font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.einc ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.52rem}
.einc li{position:relative;padding-left:1.6em;font-size:var(--fs-label);color:var(--ink);line-height:1.45}
.einc li::before{content:"";position:absolute;left:0;top:.38em;width:13px;height:8px;
border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);
transform:rotate(-45deg);border-radius:1px}
.einc-not{margin-top:.9rem;font-size:var(--fs-label);color:var(--muted-2)}
/* =========================================================
LUPY — prvek z časopisu Faszination Forschung, který se líbí Radkovi:
kroužek vytáhne detail ze scény a vlásová linka řekne, odkud je.
Drženo v naší paletě: neutrální fotka, růžová jen jako značka místa.
========================================================= */
.loupes{margin:0 0 clamp(14px,1.8vw,22px)}
.loupes svg{width:100%;height:auto;display:block;overflow:visible}
.loupes .lg0{stop-color:var(--pink);stop-opacity:.14}
.loupes .lg1{stop-color:var(--pink);stop-opacity:0}
/* vlásečnice — stejná tenkost jako linky ve vějíři */
.lp-lead line{stroke:var(--pink);stroke-width:.22;opacity:.75}
.lp-anchor circle{fill:none;stroke:var(--pink);stroke-width:.3;opacity:.9}
.lp-ring circle{fill:none;stroke:#fff;stroke-width:.7;
filter:drop-shadow(0 .6px 1.8px rgba(0,0,0,.30))}
.lp-num text{font-family:var(--font-text);font-size:var(--fs-label);font-weight:800;
fill:var(--pink);text-anchor:middle;letter-spacing:.04em}
.lp-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);
margin-top:clamp(10px,1.2vw,16px)}
.lp-legend div{position:relative;padding-top:.7rem;border-top:1px solid var(--line)}
.lp-legend b{display:block;font-family:var(--font-text);font-size:var(--fs-label);font-weight:800;
color:var(--pink);letter-spacing:.06em;margin-bottom:.35em}
.lp-legend i{display:block;font-style:normal;font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.25}
.lp-legend span{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:.35em;line-height:1.45}
@media(max-width:760px){
.lp-legend{grid-template-columns:1fr 1fr}
.lp-num text{font-size:var(--fs-label)}
}
@media(max-width:460px){.lp-legend{grid-template-columns:1fr}}
/* vůz se za kurzorem jemně natočí — dotek 3D, ne otáčení modelu */
.veh-photo{transform-style:preserve-3d;will-change:transform;
transition:transform var(--t-base) var(--ease)}
.cfg-stage:hover .veh-photo{transition:none}
/* ---------- VRSTVY: isometrické desky, tmavý problém → světlé řešení ----------
Podle Radkova prototypu „The Grid Unlock" a diagramu LAYERS. Scéna má
dva stavy a přepíná je scroll; ten přechod z tmavé do světlé je pointa. */
/* Scéna je TMAVÁ (13. 8.). Do té doby tu stálo pravidlo opačné a mělo
svůj důvod: plochý podklad od kluků měl ČERNÉ popisky (LAYER 1–4,
POWER PLANT, TRANSFORMER…), takže na tmavém pozadí mizely. Ten
obrázek už scéna nepoužívá — nové desky mají popisky BÍLÉ a ty by
naopak zmizely na světlém. Pozadí proto drží uhlová, nepřeklápí se. */
.sc-wipe--layers{background:var(--coal,#131418)}
/* stretch, ne center: .lay-grid si bere výšku, aby diagram dostal
spočítaný zbytek a nevytékal pod dolní hranu */
.sc-wipe--layers .sc-in{align-items:stretch;
/* Menší svislé odsazení než ostatní scény: každý ušetřený pixel jde
do diagramu, který je tu dominanta. Doměřeno na 1280x800 i 1440x900. */
padding-block:clamp(70px,9vh,96px) clamp(16px,2.4vh,30px)}
.sc-wipe--layers .sc-in .wrap{display:flex;flex-direction:column;min-height:0}
/* Jeden sloupec: text nahoře, diagram pod ním přes celou šířku. Dřív to byl
dvousloupec 42/58 a diagram v něm byl malý — Radek 8. 8.: „už tam prostě
žádná dominanta není." */
.lay-grid{display:flex;flex-direction:column;
gap:clamp(10px,1.6vh,20px);width:100%;height:100%;align-items:stretch}
/* 62ch nechávalo nadpisu 626 px, ale „The vehicles are ready. / The grid
is not." potřebuje 762 px a lámalo se na tři řádky. */
.lay-copy{position:relative;flex:none;max-width:78ch}
.lay-state{transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.lay-state.st-b{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(10px)}
.sc-wipe--layers.solved .st-a{opacity:0;transform:translateY(-10px)}
.sc-wipe--layers.solved .st-b{opacity:1;transform:none}
.sc-wipe--layers .h{color:var(--lay-fg,var(--ink))}
.sc-wipe--layers .lead{color:var(--lay-mut,var(--muted))}
/* Michaela 13. 8. změřila: --pink má na bílé 3,09 a na #F5F5F7 jen 2,84,
--pink-btn #FA3882 má 3,53 a 3,24. Na světlém podkladu tedy --pink-btn
(velký nadpis, práh 3,0). Na tmavém zůstává --pink, tam má 5,96. */
.sc-wipe--layers .h .accent{color:var(--pink-btn)}
/* Lead se nesmí lámat na tři řádky — každý řádek tady bere výšku diagramu */
.sc-wipe--layers .lead{max-width:64ch}
.lay-stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:clamp(10px,1.6vh,18px)}
.lay-stats b{display:block;font-family:var(--font-display);font-weight:400;
font-size:var(--fs-lead);color:var(--pink);line-height:1}
.lay-stats i{display:block;font-style:normal;font-size:var(--fs-xs);margin-top:.4rem;
color:var(--lay-mut,var(--muted));max-width:16ch}
.lay-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2.6vh,28px)}
.lay-chips span{border:1px solid rgba(var(--accent-rgb),.5);color:var(--pink);
border-radius:var(--r-pill);padding:.42em 1em;font-size:var(--fs-label);font-weight:600;
letter-spacing:.06em;text-transform:uppercase}
/* ---------- Diagram vrstev: grafika od kluků, ne abstraktní desky ----------
Radek 8. 8.: „Ať je tam přesně to, co dělali oni." Předchozích ~95 řádků
dělalo isometrické desky z divů (rotateX(54deg), scaleY(1.70) na text,
řady obdélníčků VAN/CAR/BUS). Vypadalo to čistě, ale nedalo se z toho
poznat, co to je — a to byla přesně jeho výtka. Celé je to pryč.
Příběh teď nese BARVA. Na začátku je sestava odbarvená a ztmavená:
naftový, nerozsvícený svět, v němž naše růžová vrstva vůbec není vidět
(odbarvení růžovou zabije). Jak roste --glow, barva přichází — růžová
vrstva se objeví jako první a s ní se rozsvítí všechno nad ní. Přesně
to Radek vyprávěl: naše vrstva je PŘÍČINA, ne odměna.
--glow (0..1) nastavuje script.js ze scrollu, stejně jako dřív. */
/* Diagram je dominanta scény, ne ilustrace vedle textu — Radek 8. 8.:
„už tam prostě žádná dominanta není." Dostane proto celou zbylou výšku
rámu a šířka se dopočítá z poměru. Bez toho výškového rozpočtu se
spodní deska sekala o dolní hranu obrazovky (ověřeno na 1440x900). */
.laystack{position:relative;margin:0;width:100%;
flex:1 1 auto;min-height:0;
display:flex;align-items:center;justify-content:center}
.laystack-in{position:relative;display:block;height:100%;
transform:scale(calc(.975 + .025*var(--glow,0)));transform-origin:50% 58%}
.laystack picture{display:block;height:100%}
.laystack img{display:block;height:100%;width:auto;max-width:100%;
object-fit:contain}
/* ---- prolnutí místo filtru (DOKONCENI.md bod 2) --------------------
Dřív tu byly tři filtry přepočítávané v každém snímku scrollu na
obrázku 2200 px širokém, který se zároveň zvětšoval transformací.
Filtr se neodbaví na grafické kartě, takže prohlížeč překresloval
celý obraz — naměřeno 29 fps a 99 % snímků nad 20 ms.
Teď leží dvě hotové verze přes sebe a přejíždí se mezi nimi
průhledností, kterou grafická karta zvládne. Obal .lay-pair se
smrskne přesně na rozměr spodního obrázku, takže horní na něm sedí
pixel na pixel; bez toho by se rozjely, protože šířka se dopočítává
z výšky. */
.lay-pair{position:relative;display:inline-block;height:100%;max-width:100%}
.lay-pair picture{display:block;height:100%}
.laystack .lay-b{position:absolute;inset:0;width:100%;height:100%;
opacity:var(--glow,0);will-change:opacity}
/* Záře z naší vrstvy. Střed sedí na růžové desce v podkladu — změřeno
na výřezu, ne odhad: deska má střed na 45 % šířky a 62 % výšky. */
.laystack-bloom{position:absolute;left:45%;top:62%;translate:-50% -50%;
width:74%;aspect-ratio:2.1/1;pointer-events:none;
opacity:calc(.85*var(--glow,0));
background:radial-gradient(ellipse at center,
rgba(var(--accent-rgb),.42) 0%,
rgba(var(--accent-rgb),.20) 38%,
rgba(var(--accent-rgb),0) 72%)}
@media(prefers-reduced-motion:reduce){.laystack{transform:none}}
@media(max-width:900px){
.lay-grid{gap:14px}
.lay-copy{min-height:0}
.lay-copy .st-b{position:static;opacity:0;height:0;overflow:hidden}
.sc-wipe--layers.solved .st-a{position:absolute;opacity:0;height:0;overflow:hidden}
.sc-wipe--layers.solved .st-b{position:static;height:auto;overflow:visible}
}
/* =========================================================
TEKUTÉ SKLO — podle reference (Envato „Liquid Glass Call Outs")
Co dělá sklo sklem NENÍ mléčná výplň, ale HRANA. V referenci je výplň
skoro průhledná — footage je skrz panel čitelné — a celý dojem nese silný
lesklý rám, ve kterém světlo obíhá dokola. Na tmavém videu stačí bílý lem;
my jsme na světlém podkladu, takže lem musí mít i tmavou stranu, jinak
by zmizel. Proto kónický přechod: světlo nahoře, stín vpravo dole.
========================================================= */
.glassy{position:relative;isolation:isolate;border-radius:var(--r-md);
background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.10));
-webkit-backdrop-filter:blur(4px) saturate(155%);backdrop-filter:blur(4px) saturate(155%);
box-shadow:
inset 0 1.5px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.4),
0 14px 30px -14px rgba(14,14,16,.34),
0 2px 6px -3px rgba(14,14,16,.16)}
/* silný lem — světlo obíhá dokola, dole vpravo se láme do stínu */
.glassy::before{content:"";position:absolute;inset:0;border-radius:inherit;
padding:2.4px;pointer-events:none;z-index:2;
background:conic-gradient(from 205deg,
rgba(255,255,255,.98) 0%, rgba(255,255,255,.30) 18%,
rgba(14,14,16,.20) 42%, rgba(255,255,255,.45) 62%,
rgba(255,255,255,.98) 84%, rgba(255,255,255,.98) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude}
/* statický lesk přes horní půlku — sklo drží dojem i bez pohybu */
.glassy::after{content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;z-index:0;mix-blend-mode:overlay;opacity:.55;
background:linear-gradient(158deg,rgba(255,255,255,.85) 0%,transparent 46%)}
/* =========================================================
POPISKY NA VOZE
========================================================= */
.veh-3d{position:relative;width:100%;max-width:700px;margin-inline:auto;
transform-style:preserve-3d}
.veh-photo{transform:none !important}
.vcal{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.vc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
transform:translateZ(26px)}
.vc-svg line{stroke:rgba(14,14,16,.52);stroke-width:2;stroke-linecap:round}
/* pathLength="1" normalizuje délku, takže se čára dá natáhnout bez počítání */
.vcal.show .vc-svg line{stroke-dasharray:1;stroke-dashoffset:1;
animation:vcDraw .5s var(--ease) var(--d,0s) forwards}
@keyframes vcDraw{to{stroke-dashoffset:0}}
/* kotva = skleněná kulička, ne puntík */
.vc-bead{position:absolute;width:21px;height:21px;border-radius:50%;
transform:translateZ(34px) translate(-50%,-50%);
background:
radial-gradient(circle at 34% 28%,rgba(255,255,255,.98),rgba(255,255,255,.30) 44%,rgba(255,255,255,.05) 62%),
radial-gradient(circle at 68% 76%,rgba(14,14,16,.22),transparent 58%);
box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.92),
inset 0 -1px 2px rgba(14,14,16,.18),
0 3px 9px -2px rgba(14,14,16,.34)}
.vc-bead::after{content:"";position:absolute;inset:-5px;border-radius:50%;
border:1.2px solid rgba(var(--accent-rgb),.38)}
/* panel — text sedí uvnitř skla */
.vc-chip{position:absolute;transform:translateZ(48px) translate(-50%,-50%);
display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
padding:.66em 1.1em;border-radius:var(--r-sm);
font-size:var(--fs-sm);font-weight:600;color:var(--ink);letter-spacing:.01em;
text-shadow:0 1px 0 rgba(255,255,255,.75)}
/* číslo nese chip sám, barvu textu na to nepotřebuje */
.vc-chip b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.vc-chip>*{position:relative;z-index:3}
.vcal .vc-chip,.vcal .vc-svg,.vcal .vc-bead{opacity:1}
.vcal.show .vc-bead{animation:vcBead var(--t-base) var(--ease) var(--d,0s) backwards}
.vcal.show .vc-chip{animation:vcIn var(--t-slow) var(--ease) var(--d,0s) backwards}
@keyframes vcBead{
from{opacity:0;transform:translateZ(34px) translate(-50%,-50%) scale(.2)}
to {opacity:1;transform:translateZ(34px) translate(-50%,-50%) scale(1)}
}
@keyframes vcIn{
from{opacity:0;transform:translateZ(48px) translate(-50%,-50%) scale(.8);filter:blur(7px)}
to {opacity:1;transform:translateZ(48px) translate(-50%,-50%) scale(1);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
.vcal.show .vc-chip,.vcal.show .vc-bead,.vcal.show .vc-svg line{animation:none}
.vcal.show .vc-svg line{stroke-dashoffset:0}
}
/* na úzkém displeji by popisky vůz přerostly */
@media(max-width:820px){.vcal{display:none}}
/* ---------- obsah scény naskakuje po prvcích, ne jako celá deska ----------
Tohle je ta „zajímavost": scéna se neposune jako placka, ale nadpis,
text a grafika přijedou každý o kousek později. */
[data-sin]{opacity:0;transform:translateY(22px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
[data-sin].in{opacity:1;transform:none}
/* ---------- HISTORIE — kapitoly na jednom místě + posuvník po ose ----------
Podle Radkova prototypu „129 Years of Battery Swapping".
Radek 8. 8.: „A vlastně je ta historie na tmavším pozadí, ne černý —
to černý s tou růžou je jako po pohřebišti… a nakonec se to prosvětlí
a ukáže se ta kategorie leaders."
Proto tmavé pozadí, ne černá, a v POSLEDNÍ kapitole se překlopí do
bílé, aby finále s oběma leadery svítilo. Barvy jdou přes proměnné,
protože je za běhu přepisuje script.js — na dvou pozadích musí
fungovat i rámečky karet, tlumený text a osa.
14. 8.: pozadí tu bylo modrošedé se sytostí 57 %. Brandmanuál má
v tmavých tónech 0 až 14 % (#2E2E2E je neutrální, #393E42 má 14 %)
a naše --coal 21 %, takže historie byla čtyřikrát sytější než cokoli,
co značka používá — a Michaela ji od 12. 8. opakovaně hlásila jako
modrou. Nové #1F2226 má sytost 18 % při stejném jasu. */
.sc-wipe--hist{background:var(--hs-bg,#1F2226);color:var(--hs-fg,#fff)}
.sc-wipe--hist .h{color:var(--hs-fg,#fff)}
.sc-wipe--hist .lead{color:var(--hs-mut,rgba(255,255,255,.68))}
.sc-wipe--hist .lead b{color:var(--hs-fg,#fff);font-weight:700}
.sc-wipe--hist .sc-in{align-items:stretch}
.sc-wipe--hist .sc-in .wrap{display:flex;flex-direction:column}
.hs{display:flex;flex-direction:column;flex:1;min-height:0;
/* dole musí zůstat místo na pruh pro flotily, jinak přes něj leží osa */
padding-block:clamp(64px,9vh,104px) clamp(86px,12vh,110px)}
.hs-top{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:clamp(10px,1.6vh,18px);
border-bottom:1px solid var(--hs-line,rgba(255,255,255,.16))}
.hs-brand{font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--hs-mut,rgba(255,255,255,.6))}
.hs-count{font-family:var(--font-display);font-size:var(--fs-label);letter-spacing:.14em;
color:var(--hs-mut,rgba(255,255,255,.6))}
.hs-count b{color:var(--hs-fg,#fff);font-weight:700}
/* všechny kapitoly leží na sobě, vidět je vždy jedna */
.hs-body{position:relative;flex:1;min-height:0;margin-block:clamp(12px,2.4vh,28px)}
.hs-chap{position:absolute;inset:0;display:grid;
/* .44fr dávalo textu 448 px, ale nadpisy kapitol potřebují 560–588 px
a stály na třech řádcích. Obrázek na .48fr pořád nese celou šířku rámu. */
grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
gap:clamp(20px,3.4vw,56px);align-items:center;
opacity:0;pointer-events:none}
/* Pointer events jen když je scéna VIDĚT. Bez té podmínky si historie
brala myš i s krytím 0 — leží na z-indexu 7, tedy nad vějířem, a hraní
s vlásečnicemi tím přestalo fungovat. Třídu .live nasazuje script.js
podle skutečného odkrytí scény. */
.sc-wipe.live .hs-chap.on{pointer-events:auto}
.hs-copy .eyebrow{color:var(--hs-mut,rgba(255,255,255,.68))}
.hs-chap .h{font-size:var(--fs-h2);line-height:1.06;margin:.35em 0 .5em}
/* logo hráče, o kterém kapitola mluví */
.hs-logo{display:block;margin:.9rem 0 .2rem;height:clamp(22px,3vh,30px)}
.hs-logo img{height:100%;width:auto;display:block}
/* Cizí loga (NIO) jsou v tmavé kresbě, takže na tmavé historii skoro
nejsou vidět. Na tmavém pozadí se proto obrátí do světla a jak se scéna
prosvětlí, obrácení odejde. Naše logo se nechává být — v poslední
kapitole už je pozadí bílé a logo-dark je tam správně. */
.hs-logo:not(.hs-logo--us) img{filter:invert(var(--hs-inv,1))}
.hs-logo b{display:inline-block;font-family:var(--font-display);font-weight:700;
font-size:var(--fs-lead);letter-spacing:.16em;line-height:1;color:var(--hs-fg,#fff)}
.hs-logo--us img{height:100%}
/* dočasná náhrada za logo NIO — ohraničená, ať je poznat, že je to
místo pro značku, a ne že se název omylem opakuje */
.hs-logo--slot{display:block;height:auto}
.hs-logo--slot b{border:1px solid var(--hs-line,rgba(255,255,255,.28));border-radius:var(--r-sm);padding:.3em .75em;
font-size:var(--fs-lead);letter-spacing:.2em}
.hs-chap .lead{max-width:38ch}
.hs-art{position:relative;margin:0}
/* Jen historické snímky, ne loga. Původně to mířilo na .hs-art img, tedy
na KAŽDÝ obrázek ve scéně — a protože tohle pravidlo stojí v souboru
později než .hs-logo img při stejné specificitě, přebilo ho a loga
v poslední kapitole se nafoukla na 340 px přes celý text. */
.hs-shot img{object-fit:cover;border-radius:var(--r-sm);display:block;
filter:grayscale(1) contrast(1.05)}
.hs-art figcaption{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
margin-top:.85rem}
.hs-art figcaption b{font-family:var(--font-display);font-weight:400;
font-size:var(--fs-h2);line-height:1}
/* Dědily --muted, což je na tmavém podkladu 3,54 : 1. Sousední .hs-art
figcaption span má --hs-mut a ten na stejném podkladu vychází 6,5. */
.hs-art figcaption i{font-style:normal;font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--hs-mut,rgba(255,255,255,.6))}
.hs-art figcaption span{flex-basis:100%;font-size:var(--fs-xs);color:var(--hs-mut,rgba(255,255,255,.66))}
.hs-art--cards,.hs-art--stats{display:grid;gap:clamp(10px,1.4vw,18px)}
.hs-art--cards{grid-template-columns:repeat(2,1fr)}
/* Pevný počet sloupců, ne auto-fit: „99.95%" je v tomhle širokém
displejovém řezu delší než úzká dlaždice a přetékalo to ven.
Tři dlaždice se vejdou do řady, čtyři jdou do 2×2. */
.hs-art--s3{grid-template-columns:repeat(3,1fr)}
.hs-art--s4{grid-template-columns:repeat(2,1fr)}
/* Pozadí karet přes proměnnou, ne pevná bílá. Bílé sklo rgba(255,255,255,.55)
tu zbylo ze světlého tématu a na tmavé historii svítilo jako panel —
a protože backdrop-filter vytváří vlastní kompozitní vrstvu, prosakovalo
i skrz neaktivní kapitoly s krytím 0. Rozostření je proto pryč; barvu
dodává --hs-card, kterou spolu s ostatními překlápí script.js. */
.hs-card,.hs-stat{border:1px solid var(--hs-line,rgba(255,255,255,.18));border-radius:var(--r-md);
padding:clamp(14px,2vh,22px);background:var(--hs-card,rgba(255,255,255,.06))}
.hs-card b,.hs-stat b{display:block;font-family:var(--font-display);font-weight:400;
font-size:var(--fs-lead);line-height:1}
/* dlaždice statistik jsou úzké — číslo se nesmí zalomit ani přetéct */
.hs-stat b{font-size:var(--fs-h3);white-space:nowrap;
max-width:100%;overflow:hidden}
.hs-stat{padding:clamp(11px,1.6vh,17px) clamp(9px,1vw,14px)}
.hs-stat i{font-size:var(--fs-label);letter-spacing:.11em}
.hs-card i,.hs-stat i{display:block;font-style:normal;font-size:var(--fs-label);font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--hs-mut,rgba(255,255,255,.6));margin-top:.5em}
.hs-card span{display:block;font-size:var(--fs-xs);color:var(--hs-mut,rgba(255,255,255,.66));margin-top:.7em}
/* Číslo ztráty už není červené: barva se od 14. 8. nese textem, ne
odstínem. Jede přes --hs-fg, takže se překlopí spolu s pozadím. */
.hs-stat--red b{color:var(--hs-fg,#fff)}
.hs-stat--win{border-color:rgba(var(--accent-rgb),.5);
background:linear-gradient(140deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.04))}
.hs-stat--win b{color:var(--hs-pink,var(--pink));font-size:var(--fs-lead)}
/* Zvýrazněné slovo v historii jede přes --hs-pink, ne přes --pink:
pozadí scény se v poslední kapitole přebarvuje a script.js podle jeho
jasu volí, kterou růžovou použít — a kolem překlopení ji stáhne
k barvě textu, protože tam nesplní práh ani jedna z nich. */
.hs-chap--us .h .accent{color:var(--hs-pink,var(--pink))}
/* posuvník po časové ose */
/* ---- 01: tři historické snímky v řadě ----
Radek 8. 8.: „Celou dobu tady koukám na nějaké šuliny z New Yorku,
neukáže se mi tady ta Barcelona, ten Mercedes z roku 72." */
.hs-art--era{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(10px,1.4vw,20px);align-items:start}
.hs-shot{margin:0;display:flex;flex-direction:column;gap:.55rem}
/* position:relative TADY, ne jen u .hs-art--photo: ta třída v index.html
není ani jednou (ověřeno), takže se zrno kotvilo na .hs-art a místo tří
rámečků kreslilo tři desky přes celou obrazovou část kapitoly, každou
s krytím 0,20 a multiply. To je ta blikající vrstva ze 14. 8.
Nepolohovaný předek absolutně polohovaného potomka neořezává, takže
overflow:hidden to nezastavil. */
.hs-shot .hs-frame{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);
border:1px solid var(--hs-line,rgba(255,255,255,.18))}
.hs-shot img{width:100%;height:clamp(120px,20vh,190px);object-fit:cover;display:block}
.hs-shot figcaption{display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap}
/* Snímek, který ještě nemáme: rámeček s rokem místo fotky. Jak se soubor
uloží do assets/img/ pod jménem z data-shot, script.js ho najde, vloží
a tahle třída zmizí — stejný postup jako u loga NIO. */
.hs-shot--slot .hs-frame{height:clamp(120px,20vh,190px);display:grid;
place-items:center;border-style:dashed;
background:var(--hs-slot,rgba(255,255,255,.05))}
.hs-shot--slot .hs-frame b{font-family:var(--font-display);font-weight:400;
font-size:var(--fs-lead);color:var(--hs-mut,rgba(255,255,255,.5))}
/* ---- 02 a 03: firmy s logem, částkou a tím, jak dopadly ----
Radek 8. 8.: „Dal bych tam loga těch firem. Je dobrý vidět, kolik
narejzovali a dole hlavně, že jsou zlikvidovaný." */
/* Počet sloupců podle počtu karet. Od 12. 8. má kapitola o kapitálovém
běhu tři firmy (Better Place, Ample a Aulton — ten přišel ze zrušené
kapitoly „Still unsolved", OPRAVY.md bod 3) a ve dvou sloupcích padala
třetí karta do druhé řady a vyjížděla z obrazovky. */
.hs-art--firms{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(12px,1.6vw,22px);align-items:stretch}
/* Jen na širokém okně. Na mobilu se karty staví pod sebe pravidlem níž
a tenhle selektor by ho specificitou přebil (:has bere specificitu
svého argumentu) — na 390 px pak tři sloupce přetékaly. */
@media(min-width:901px){
.hs-art--firms:has(.hs-firm:nth-child(3)){grid-template-columns:repeat(3,1fr);
gap:clamp(8px,1.1vw,16px)}
/* Tři karty ve sloupci pro dvě byly 143 px široké a text se v nich lámal
po dvou slovech. Kapitola s třemi firmami proto dá obrázkové části víc
místa — 0,58 proti 0,42 místo poloviny. */
.hs-chap:has(.hs-firm:nth-child(3)){
grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
}
.hs-art--one{grid-template-columns:minmax(0,.62fr)}
.hs-firm{display:flex;flex-direction:column;gap:.42rem;
border:1px solid var(--hs-line,rgba(255,255,255,.18));border-radius:var(--r-md);
padding:clamp(14px,2vh,20px) clamp(13px,1.4vw,18px)}
.hs-firm .hs-logo{margin:0 0 .2rem;height:clamp(18px,2.4vh,24px)}
.hs-firm .hs-logo--slot{height:auto}
.hs-firm .hs-logo--slot b{font-size:var(--fs-label)}
.hs-yr{font-family:var(--font-text);font-size:var(--fs-label);font-weight:700;
letter-spacing:.12em;text-transform:uppercase;
color:var(--hs-mut,rgba(255,255,255,.55))}
.hs-raise{font-family:var(--font-display);font-weight:400;
font-size:var(--fs-lead);letter-spacing:-.02em;
color:var(--hs-fg,#fff);line-height:1.1}
.hs-note{font-size:var(--fs-xs);color:var(--hs-mut,rgba(255,255,255,.66));
line-height:1.4;flex:1}
/* Jak dopadly. Červená, ne růžová — růžová je naše barva a nesmí
označovat cizí bankrot. */
.hs-dead{align-self:flex-start;font-size:var(--fs-label);font-weight:600;
letter-spacing:.12em;text-transform:uppercase;
padding:.36em .7em;border-radius:var(--r-pill);
/* Signální barva je od 14. 8. pryč. Byla sice „červená" podle odstínu,
ale při jasu 76 % a plné sytosti četla na tmavém pozadí jako korálová,
tedy oranžová — a brandmanuál zná růžovou, šedou řadu, černou
a bílou. Text („Liquidated · 2013") nese význam sám.
Barvy jdou přes --hs-fg / --hs-mut, protože se překlápějí s pozadím
poslední kapitoly; pevná bílá by na světlé půlce zmizela. */
color:var(--hs-mut,rgba(255,255,255,.72));
background:transparent;
border:1px solid var(--hs-line,rgba(255,255,255,.22))}
/* .hs-dead--warn zrušen 14. 8.: měl odstín 38–39° a sytost 66–81 %, tedy
žlutooranžovou, kterou brandmanuál nezná (růžová, šedá řada, černá,
bílá — nic dalšího). Věta „IPO application refiled" je informace, ne
varování, a nepotřebuje barvu, aby ji někdo přečetl — v index.html
z ní je obyčejná .hs-note. */
/* ---- 05: finále, dva leadeři vedle sebe ----
Radek 8. 8.: „nakonec se to prosvětlí a ukáže se ta kategorie leaders,
passenger vehicles je NIO, komerčně my — a u nich statistika." */
/* Michaela 10. 8.: „text poslední kapitoly se v jednom bodě scrollu
podsune pod průhledný nav a je nečitelný."
Změřeno: při VÝJEZDU přišpendlené scény (scrollY 5290–5540 na 1440x900)
zajede obsah až 271 px za lištu. Horní odstup to posouvá později a
zkracuje, zbytek řeší zhasnutí obsahu ve script.js — 271 px odstupu
by se do rámu nevešlo. */
/* .38fr dávalo nadpisu 387 px a stál na třech řádcích; loga snesou méně. */
.hs-chap--leaders{grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
padding-top:clamp(18px,4vh,46px)}
.hs-chap--leaders .h{margin-bottom:0}
.hs-chap--leaders .h .accent{color:var(--hs-pink,var(--pink))}
.hs-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.hs-col{display:flex;flex-direction:column;gap:.6rem;
border:1px solid var(--hs-line,rgba(255,255,255,.18));border-radius:var(--r-md);
padding:clamp(15px,2.2vh,22px) clamp(14px,1.5vw,20px)}
.hs-col--us{border-color:rgba(var(--accent-rgb),.55);
background:rgba(var(--accent-rgb),.07)}
.hs-col-lab{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--hs-mut,rgba(255,255,255,.6))}
/* popisek zůstává tlumený jako u druhého sloupce — náš sloupec je
odlišený růžovým rámečkem a 7% výplní, barvu textu na to nepotřebuje */
.hs-col .hs-logo{margin:0 0 .3rem;height:clamp(18px,2.4vh,26px)}
.hs-col .hs-logo--slot{height:auto}
.hs-facts{list-style:none;margin:0;padding:0;display:flex;
flex-direction:column;gap:.5rem}
.hs-facts li{font-size:var(--fs-xs);color:var(--hs-mut,rgba(255,255,255,.7));
line-height:1.35}
.hs-facts li b{font-family:var(--font-text);font-weight:800;
font-size:var(--fs-body);color:var(--hs-fg,#fff);
font-variant-numeric:tabular-nums;margin-right:.35em}
.hs-facts li i{display:block;font-style:normal;font-size:var(--fs-label);
letter-spacing:.06em;color:var(--hs-faint,rgba(255,255,255,.45));margin-top:.1em}
/* Historie se v poslední kapitole překlápí z tmavé do bílé. Na tmavém má
značková růžová 5,8 : 1 a smí zůstat, na bílém má 3,09 a musí ztmavit —
proto se odstín interpoluje spolu s pozadím (--hs-pink v script.js). */
.hs-facts .hs-win b{color:var(--hs-pink,var(--pink))}
/* ---- osa a nápověda ---- */
.hs-scrub-top{display:flex;justify-content:space-between;align-items:baseline;
gap:14px;flex-wrap:wrap}
.hs-hint{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--hs-faint,rgba(255,255,255,.42))}
@media(max-width:900px){
.hs-art--era{grid-template-columns:1fr;gap:10px}
.hs-shot:nth-child(n+2){display:none} /* na mobilu jen první snímek */
.hs-art--firms{grid-template-columns:1fr}
.hs-two{grid-template-columns:1fr}
.hs-chap--leaders{grid-template-columns:1fr}
.hs-hint{display:none}
}
.hs-scrub{padding-top:clamp(8px,1.4vh,16px)}
/* Letopočty zůstávají v řezu 700 — jsou to čísla, ne popisky (viz .hs-yr). */
.hs-era{color:var(--hs-mut,rgba(255,255,255,.6));display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;margin-bottom:.7em}
.hs-track{position:relative;height:2px;background:var(--line);border-radius:var(--r-xs)}
.hs-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--r-xs);
background:linear-gradient(90deg,rgba(var(--accent-rgb),.35),var(--pink))}
.hs-dot{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
border-radius:50%;background:var(--bg);border:2.5px solid var(--pink);
box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16)}
.hs-ticks{display:flex;justify-content:space-between;margin-top:.6em}
.hs-ticks i{font-style:normal;font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--hs-mut,rgba(255,255,255,.6))}
@media(max-width:900px){
.hs-chap{grid-template-columns:1fr;gap:14px;align-content:center}
.hs-chap .h{font-size:var(--fs-lead)}
.hs-shot img{height:clamp(110px,18vh,150px)}
.hs-art--cards{grid-template-columns:1fr}
.hs-art--s3,.hs-art--s4{grid-template-columns:repeat(2,1fr)}
.hs-chap .lead{font-size:var(--fs-sm)}
}
/* --- tmavý pruh s fotkami z provozu --------------------------------------
Michaela 8. 8.: „já bych zkusila i to tmavé pozadí". Fotky měly kolem sebe
bílou, která jim ubírala kontrast — a stránka byla světlá celou cestu
a ztmavla až úplně na konci. Tmavý pás pod konfigurátorem dělá obojí:
fotky na něm ožijí a stránka dostane rytmus hlavní stránky
(světlá scéna s vozem → tmavý pás s reálným provozem → světlé argumenty).
Je to jen pozadí — mřížka fotek i klipy zůstávají, jak byly. */
.opband{background:linear-gradient(180deg,#1A1B1D,#1F2022);
padding-block:clamp(34px,5vw,64px) clamp(40px,5.5vw,76px);margin-top:clamp(26px,4vw,44px)}
/* pruh má dosednout na konec sekce, jinak by pod ním zůstal světlý proužek */
.cfg:has(.opband){padding-bottom:0}
.opband .op-lede{margin-top:0;color:rgba(255,255,255,.66)}
.opband .op-hint{color:rgba(255,255,255,.42)}
/* podklad fotky, než se načte — na tmavém nesmí svítit */
.opband .op{background:rgba(255,255,255,.06)}
/* fotky uvnitř konfigurátoru — patří k vozu, nemají vlastní nadpis */
.op-lede{position:relative;z-index:1;font-size:var(--fs-xs);color:var(--muted);
margin:clamp(26px,4vw,44px) 0 .9rem;letter-spacing:.01em}
.cfg .opgrid{position:relative;z-index:1}
/* --- fotky z provozu ožijí: po najetí myší se prolne sestříhaný klip ------ */
.op video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none}
.op.playing video{opacity:1}
/* fotka pod videem se nezvětšuje, jinak by po odjetí myši „cukla" */
.op[data-clip]:hover img{transform:none;transition-duration:var(--t-fast)}
.op[data-clip]{cursor:pointer}
/* titulek musí zůstat nad videem */
.op figcaption{z-index:2}
.op-hint{display:block;margin-top:.15em;color:var(--muted-2);font-size:var(--fs-label)}
@media(prefers-reduced-motion:reduce){.op video{display:none}.op-hint{display:none}}
/* dotykové displeje hover neumí — tam se klip pouští klepnutím */
@media(hover:none){.op-hint{visibility:hidden}}
/* --- proklik: delší vysvětlení se rozbalí až na požádání ------------------
V úvodu konfigurátoru bylo textu tolik, že přebíjel cenu i vůz. Zůstala
jedna věta, zbytek je pod tímhle prokliknutím. */
.fold{margin:.9rem 0 0}
.fold>summary{display:inline-flex;align-items:center;gap:.35em;cursor:pointer;list-style:none;
font-size:var(--fs-xs);font-weight:500;color:var(--muted);padding:.3em 0;
transition:color var(--t-fast) var(--ease);user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::marker{content:''}
.fold>summary:hover{color:var(--ink);transition-duration:var(--t-fast)}
.fold>summary svg{width:13px;height:13px;transition:transform var(--t-base) var(--ease)}
.fold[open]>summary svg{transform:rotate(180deg)}
.fold>summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}
.fold-b{animation:foldIn .34s var(--ease) both}
.fold-b p{margin:.15rem 0 0;font-size:var(--fs-xs);line-height:1.55;color:var(--muted);max-width:38ch}
@keyframes foldIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* v pravém panelu je to drobné písmo, ať to nekonkuruje výběru nástavby */
.fold--fine{margin-top:1rem}
.fold--fine>summary{font-size:var(--fs-label);color:var(--muted-2)}
.fold--fine .fold-b p{margin-top:.35rem}
.fold--fine .cs-fine{margin-top:0}
/* prázdná poznámka u modelu (pay-as-you-go) nesmí dělat mezeru */
.mt-note:empty{display:none}
@media(prefers-reduced-motion:reduce){.fold-b{animation:none}}
/* --- popisky u vozu: větší, aby byly čitelné i na menší scéně ------------
Sklo je z .glassy; tady se jen zesiluje lem a stín, ať štítek drží tvar
i na světlém laku. */
.vc-chip::before{padding:2.8px}
.vc-chip{box-shadow:var(--e2)}
/* --- vůz se hýbe ---------------------------------------------------------
Naklápění za kurzorem se neosvědčilo, tak je to obráceně: pomalý
pravidelný pohyb, který na myš vůbec nereaguje a nedá se „rozjet".
Hýbe se celá scéna včetně popisků, takže kuličky pořád ukazují tam,
kam mají — vůz a štítky jsou v jednom 3D prostoru.
Vypnout = smazat dvě řádky s animation níž. */
/* perspektiva musí sedět na rodiči, jinak by se vůz jen vodorovně smrskl
místo aby se natáčel */
.cfg-stage{animation:vehIn .9s var(--ease) both;perspective:1200px;perspective-origin:50% 56%}
@keyframes vehIn{
from{opacity:0;transform:translateY(28px)}
to {opacity:1;transform:none}
}
/* Žádné poskakování nahoru a dolů — vůz se jen pomalu natáčí kolem svislé
osy, jako by stál na otočném podstavci. Výchylka je tak malá, že kuličky
popisků (jsou o kus blíž ke kameře) uhnou nanejvýš o dva pixely a pořád
sedí na tom, na co ukazují. */
.veh-3d{animation:vehTurn 12s ease-in-out .9s infinite;will-change:transform}
@keyframes vehTurn{
0%,100%{transform:rotateY(-4deg)}
50% {transform:rotateY(4deg)}
}
@media(prefers-reduced-motion:reduce){.cfg-stage,.veh-3d{animation:none}}
/* --- kola se točí ---------------------------------------------------------
Disk je kruhový výřez z renderu (poloměr 36 px v souřadnicích 940×520,
střed přesně na růžovém náboji) položený zpátky na své místo. Pneumatika
pod ním zůstává v obrázku, takže se točí jen ta část, kde je to vidět
— a švy nejsou poznat, protože vedou po hraně disku.
Disk je stejný ve všech čtyřech lacích, ale NE napříč nástavbami: pickup
má kola o 15 px dál vpravo než grocery, garbage o 8 a k tomu menší zadní.
Proto je disků osm — dva na každý vůz — a nasazuje je stage() v script.js.
Vypnout otáčení = smazat řádek s animation. */
/* Rám kola se NEotáčí — drží jen pozici a nasvícení. Točí se až disk uvnitř.
V renderu je totiž světlo zapečené do obrázku, takže se dřív otáčelo spolu
s kolem: odlesky obíhaly dokola a vypadalo to rozjetě. Z obrázků je proto
nasvícení vyrovnané pryč a odlesk se stínem přidává tahle vrstva, která
zůstává stát. */
.veh-wheel{position:absolute;top:79.8%;width:7.77%;aspect-ratio:1;pointer-events:none;
transform:translate(-50%,-50%);opacity:1;transition:opacity var(--t-fast) var(--ease)}
/* konkrétní místo a obrázek nasazuje stage() v script.js — každá nástavba
má kola jinde, takže to nejde napsat natvrdo do CSS */
.vw-disc{position:absolute;inset:0;border-radius:50%;
background:center/contain no-repeat;
animation:wheelSpin 5s linear infinite}
.veh-wheel::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:
radial-gradient(circle at 60% 24%,rgba(255,255,255,.17),transparent 55%),
radial-gradient(circle at 42% 92%,rgba(0,0,0,.34),transparent 62%)}
.veh-photo.swap .veh-wheel{opacity:0}
@keyframes wheelSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vw-disc{animation:none}}
/* --- „Proč BattSwap": fotka vlevo, šest bodů v mřížce vpravo --------------
Tahle sekce prošla třemi podobami a každá řešila jednu Michaelinu výtku:
1. šest karet pod sebou → přes dvě obrazovky textu,
2. rozklikávací seznam → „spousta lidí nenapadne, že to musí
rozkliknout" (a měla pravdu, pět ze šesti argumentů minulo),
3. lepkavá fotka a vše otevřené → „vypadá mnohem líp, jen to nesedí
na jednu stránku".
Tohle je čtvrtá: otevřené zůstává všech šest, ale stojí vedle sebe
v mřížce 2 × 3, takže se sekce vejde pod lištu. Nic se neklika, nic se
neschovává, jen se čte v šesti kratších sloupcích místo jednoho dlouhého.
Fotka drží vlevo, je vysoká přesně jako mřížka a mění se podle bodu, nad
kterým je myš. Najetí je tady bezpečné — na rozdíl od rozbalovacího
seznamu se nic nesráží ani neposkakuje, mřížka stojí. Než na ni někdo
najede, střídá se sama po pěti vteřinách, aby bylo vidět, že fotky
k bodům patří. */
.wsplit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(14px,2vw,28px);align-items:stretch}
.ws-side{display:flex;flex-direction:column;gap:clamp(8px,1vh,12px);min-height:0}
.ws-stage{position:relative;flex:1 1 auto;min-height:0;margin:0;
border-radius:var(--radius);overflow:hidden;background:var(--bg-3);
box-shadow:var(--shadow)}
.ws-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.04);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.ws-stage img.on{opacity:1;transform:none}
/* popisek pod fotkou musí být čitelný na jakémkoli snímku */
.ws-stage::after{content:"";position:absolute;inset:auto 0 0;height:42%;
background:linear-gradient(transparent,rgba(0,0,0,.5));pointer-events:none}
.ws-cap{position:absolute;left:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px);
bottom:clamp(11px,1.4vh,16px);z-index:2;color:#fff;font-weight:600;
font-size:var(--fs-lead);letter-spacing:-.01em;
text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* Čísla o síti byla schovaná uvnitř druhého bodu. Je to náš hlavní argument —
nesmí záviset na tom, jestli na něj někdo najede. Proto sedí natrvalo pod
fotkou a drží levý sloupec zarovnaný s mřížkou. */
.ws-fig{flex:0 0 auto;margin-top:0}
.ws-fig .wcf{padding:.5em .7em}
.ws-fig .wcf b{font-size:var(--fs-h3)}
.ws-fig .wcf i{font-size:var(--fs-label);line-height:1.3;margin-top:.3em}
.ws-grid{display:grid;grid-template-columns:1fr 1fr;
gap:clamp(8px,1.1vw,14px);align-content:stretch}
.ws-item{display:flex;flex-direction:column;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-md);
padding:clamp(11px,1.25vw,17px) clamp(12px,1.3vw,18px);
box-shadow:var(--e1);
transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease)
transform .35s var(--ease)}
.ws-item.on{border-color:rgba(var(--accent-rgb),.5);box-shadow:var(--shadow);
transform:translateY(-2px)}
.wr-ic{width:clamp(28px,2.3vw,34px);aspect-ratio:1;border-radius:var(--r-sm);
display:grid;place-items:center;background:var(--bg-3);color:var(--muted);
transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.wr-ic svg{width:56%;height:56%}
.ws-item.on .wr-ic{background:var(--pink);color:#fff}
.wr-t{margin:.55em 0 0;font-size:var(--fs-lead);font-weight:600;
letter-spacing:-.012em;line-height:1.22;color:var(--ink)}
.ws-item p{margin:.42em 0 0;font-size:var(--fs-sm);line-height:1.48;
color:var(--muted)}
/* Sekce se má vejít pod lištu i s očkem nad nadpisem. */
/* ---- jedno odsazení pro všechny sekce sales.html ---------------------
Bylo tu pět ručních hodnot (0, 27, 28, 41 a 108 px) ve třinácti
přepisech. NOC.md chtěl clamp(72px,9vw,128px), ale na téhle stránce to
nejde: platí tu pravidlo „jedna sekce = jedna obrazovka" z 8. 8. a už
dnes se #why na okně 1440x760 nevejde o 140 px a #economics o 61 px.
Se 128 px by každá sekce přetekla o víc než 300 px a vykoukla by pod ní
hlava té další — přesně to, co Michaela reklamovala. Proto zůstává
jedna proměnná, ale v hodnotě, kterou to pravidlo unese; tvrdá čísla
z ní zmizela. */
:root{--section-y:clamp(20px,2.8vh,48px)}
@media(min-width:901px) and (max-height:980px){:root{--section-y:clamp(16px,2.2vh,36px)}}
@media(min-width:901px) and (max-height:860px){:root{--section-y:clamp(18px,2.6vh,40px)}}
@media(max-width:900px){:root{--section-y:clamp(40px,6vh,72px)}}
#why .sec-head{margin-bottom:clamp(12px,2vh,22px)}
/* Totéž jako u vějíře: nadpis sekce běžel na velikosti perexu (18 px). */
#why .sec-head .h{font-size:var(--fs-h2)}
#why .sec-head .lead{margin-top:.4em}
/* Běžný notebook má pod lištou 720–820 px. Sekce se tam musí vejít, tak
jde dolů vzduch kolem nadpisu a uvnitř karet. Na velkém monitoru
(nad 980 px) se vzduch vrací. */
@media(min-width:901px) and (max-height:980px){
#why .sec-head{margin-bottom:clamp(10px,1.6vh,18px)}
.ws-item{padding-block:clamp(9px,1.05vw,14px)}
.ws-grid{gap:clamp(8px,.9vw,11px)}
.ws-side{gap:8px}
}
@media(max-width:900px){
/* Na telefonu se šest bodů na obrazovku nevejde tak jako tak — fotka jde
nahoru, body pod sebe a sekce se normálně roluje. */
.wsplit{grid-template-columns:1fr;gap:12px}
.ws-stage{aspect-ratio:3/2;flex:0 0 auto}
.ws-grid{grid-template-columns:1fr;gap:10px}
.ws-item{padding:14px 16px}
/* na mobilu se karta zmenšuje, ale text v kartě má dno 15 px */
.ws-item p{font-size:var(--fs-sm)}
}
@media(prefers-reduced-motion:reduce){
.ws-stage img{transform:none;transition:opacity .3s linear}
.ws-item.on{transform:none}
}
/* ---------- archivní fotka 1897: jemné oživení ----------
Michaela 7. 8.: „umíš rozpohybovat trošku i tohle video? třeba ty lidi
v něm?" Lidi rozpohybovat neumím — to je generativní video. Co dělá
archivní snímek živým i bez toho, je pomalý posun kamery a zrno, jaké
má dobový film. Posun je schválně malý (max 1,045): soubor má 450x403
px a zobrazuje se na 571x340, takže větší přiblížení už ukazuje pixely.
Běží jen na aktivní kapitole, ať se nic nekreslí mimo obraz. */
.hs-chap.on .hs-shot img{animation:histDrift 30s ease-in-out infinite alternate}
@keyframes histDrift{
from{transform:scale(1.008) translate3d(.5%,.4%,0)}
to {transform:scale(1.045) translate3d(-.9%,-.7%,0)}
}
.hs-shot img{will-change:transform}
/* zrno — feTurbulence v data URI, žádný externí soubor.
Jen na rámečku, který má fotku: prázdné sloty 1943 a 1972 zrno
nepotřebují, je to zrno filmu, ne dekorace. A pomaleji: 0,42 s se
steps(2) je pět skoků za vteřinu, což se pere s posunem fotky
i s přejezdem kapitol — jeden pohyb v jednu chvíli (PREDLOHA.md). */
.hs-chap.on .hs-shot:not(.hs-shot--slot) .hs-frame::before{content:"";position:absolute;inset:0;z-index:1;
pointer-events:none;border-radius:var(--r-sm);opacity:.12;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
animation:histGrain 1.2s steps(3) infinite}
@keyframes histGrain{
0% {transform:translate3d(0,0,0)}
50% {transform:translate3d(-3%,2%,0)}
100%{transform:translate3d(2%,-3%,0)}
}
/* popisek nesmí být pod zrnem ani pod ořezem obrázku */
.hs-art figcaption{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
.hs-chap.on .hs-shot img{animation:none}
.hs-chap.on .hs-shot:not(.hs-shot--slot) .hs-frame::before{animation:none;opacity:.10}
}
/* kalkulačka se má vejít na jednu obrazovku */
#economics .sec-head{margin-bottom:clamp(16px,2.4vw,28px)}
/* výčet toho, co sazba pokrývá, je pod proklikem — v panelu vpravo stejně
stojí jednou větou, tohle je rozpis pro toho, kdo chce detail */
.einc .fold{margin:0}
.einc ul{margin:.7rem 0 0}
.einc li{font-size:var(--fs-xs)}
.ederived{padding:13px 16px}
.emile{margin-top:11px;padding:9px 14px}
/* srovnávací pruhy (diesel, běžné EV) nemusí být tak velké jako ten náš */
/* méně vzduchu v obou sloupcích, ať se sekce vejde na obrazovku */
.econ-in,.econ-out{padding:clamp(20px,2.7vw,30px)}
#economics .sec-head .h{font-size:var(--fs-lead)}
.bars{margin:.9rem 0 .7rem}
.eo-fine{margin-top:.6rem}
/* ---------- světelný nálet mezi scénami (přechod „bloom") ----------
Podle Envato „Cinematic Bloom Light Lens Flare Transitions", který
poslala Michaela 7. 8. Leží nad všemi scénami včetně historie (z 7),
proto z-index 9. screen = světlo se přičítá, nic nepřekrývá. */
.hero-bloom{position:absolute;inset:0;width:100%;height:100%;
z-index:9;pointer-events:none;mix-blend-mode:screen}
/* Popisek „Official product render" ležel pod štítkem Swappable pack —
ten visí kus pod scénou, protože se kotví na baterku pod podvozkem.
Posunout štítek výš nejde, začal by lézt na kola, tak jde níž popisek.
Na úzkém displeji jsou štítky skryté, tam zůstává původní mezera. */
@media(min-width:821px){.veh-state{margin-top:2rem}}
/* --- každá sekce se má vejít pod lištu i s očkem nad nadpisem -------------
Lišta je fixní a vysoká 79 px, takže z okna zbývá o tolik míň. Bez
scroll-margin skočí kotva tak, že očko („The operating case") zmizí
přesně pod lištou — proto ten odstup. */
section[id]{scroll-margin-top:84px}
#economics .sec-head{margin-bottom:clamp(14px,1.9vw,20px)}
.ederived{padding:11px 15px}
.eo-fine{margin-top:.5rem}
/* kalkulačce chybělo pár pixelů, aby se vešla i s očkem pod lištu */
.econ-in,.econ-out{padding:clamp(18px,2.4vw,26px)}
.bars{margin:.75rem 0 .6rem}
.eo-inc{margin-bottom:.7rem}
/* Závěrečná výzva měla pořád původních 128 px vzduchu nahoře i dole,
takže se nevešla, i když obsahu má nejmíň ze všech. */
#why .sec-head .lead,#economics .sec-head .lead{margin-top:.55em}
#talk .sec-head{margin-bottom:clamp(14px,1.9vw,20px)}
/* Nadpis sekce má být nadpis sekce — stejný krok jako #why a #specs.
Do 15. 8. tu žádný nebyl (ležel uvnitř fotky) a tenhle .h nesl jen
drobný řádek nad pruhem, proto byl na velikosti perexu. */
#talk .sec-head .h{font-size:var(--fs-h2)}
.econ-alt{margin-top:.7rem}
.bars{gap:6px}
/* Diesel a běžné EV stojí vedle sebe — jsou to dvě varianty „jak to je dnes",
takže patří na jeden řádek. Náš pruh zůstává přes celou šířku pod nimi.
Sekce tím zhubla o celou výšku jednoho pruhu. */
@media(min-width:940px){
.bars{grid-template-columns:1fr 1fr}
.bar--us{grid-column:1/-1}
}
/* Kalkulačka působila po zeštíhlení moc drobně. Pruhy jsou teď dva vedle sebe,
takže je vodorovně místa dost — čísla můžou být zase velká. */
.bar--us .bar-t{font-size:var(--fs-xs)}
.eo-h{font-size:var(--fs-label)}
.eo-sum{font-size:var(--fs-sm)}
.efield label{font-size:var(--fs-sm)}
.ed-v{font-size:var(--fs-body)}
/* ---------- plovoucí CTA ----------
Nahrazuje zrušenou spodní lištu: kompaktní pilulka vpravo dole, která
nezakrývá jádro vějíře (to je dole uprostřed) ani osu v historii
(ta má vlastní spodní odsazení).
14. 8.: animace ctaGlow zrušená celá. Dýchala stínem donekonečna, a to
je z animovatelných vlastností ta nejdražší — prohlížeč ji nepředá
grafické kartě, ale překresluje. Běžela navíc i nahoře na stránce, kde
má pilulka opacity 0 a není vidět (změřeno na vykreslené stránce:
getAnimations() ji hlásil jako running při opacity 0). Tlačítko má být
vidět, ne blikat — zůstává klidný stín --lift. */
.cta-float{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.6vh,30px);
z-index:70;display:inline-flex;align-items:center;gap:.6rem;
padding:.82em 1.35em;border-radius:var(--r-pill);text-decoration:none;
/* 19 px / 700 jako tlačítka: bílý popisek na růžové splní normu jen
jako velký tučný text (od 18,66 px). --fs-lead je clamp a vyjde
17–18 px, tedy pod hranicí. */
font-weight:700;font-size:1.1875rem;letter-spacing:.01em;
color:var(--on-pink-btn);background:var(--pink-btn);
box-shadow:var(--lift);
opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.cta-float.show{opacity:1;transform:none;pointer-events:auto}
.cta-float svg{width:17px;height:17px;transition:transform var(--t-base) var(--ease)}
.cta-float:hover{transform:translateY(-2px);transition-duration:var(--t-fast)}
.cta-float:hover svg{transform:translateX(4px);transition-duration:var(--t-fast)}
/* Na mobilu NE přes celou šířku: jádro vějíře je dole uprostřed a
roztažené tlačítko na něj lezlo. Zůstává kompaktní vpravo. */
@media(max-width:620px){
/* na mobilu se pilulka zmenšuje, ale popisek musí zůstat 19 px — viz výš */
.cta-float{right:14px;bottom:14px;padding:.6em 1em;font-size:1.1875rem;gap:.45rem}
.cta-float svg{width:15px;height:15px}
/* POZOR, otevřená vada: na 390 px pilulka pořád leží přes poznámky
poslední kapitoly historie — .hs-note o 9 px a .hs-dead o 29 px
(změřeno na vykreslené stránce při scrollY 3900). Spravit odsazením
kapitoly nešlo: kapitoly jsou position:absolute s inset:0 a obsah
se v nich na mobilu do rámu nevejde už dnes, takže 100 px odsazení
posunulo obsah o 50 px nahoru a sebralo nadpis kapitoly („Then
billions chased scale."). Vrácené. Ta mobilní historie potřebuje
vlastní rozhodnutí — viz hlášení ze 14. 8. */
}
/* --- vějíř jako předěl do tmavého závěru ---------------------------------
V rohu to byla ozdoba nalepená přes funkční panel. Tady je vějíř sám tou
scénou: pruh přes celou šířku, ve kterém se světlá stránka přelije do
modročerni závěru. Vlákna jsou světlá, protože leží na tmavnoucím podkladu. */
.fanband{position:relative;width:100%;height:var(--fan-h,clamp(190px,24vh,300px));overflow:hidden;
background:linear-gradient(180deg,var(--bg) 0%,#17181A 62%,#1A1B1D 100%)}
.fanband .ef-cv{width:100%;height:100%;display:block}
.fanband .ef-mark{position:absolute;left:50%;bottom:22px;width:44px;height:44px;
transform:translateX(-50%);opacity:.92;
filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
@media(prefers-reduced-motion:reduce){.fanband .ef-cv{display:none}}
/* Řádek s parametry i fotky pod vozem musí mít stejnou šířku jako scéna,
jinak se pět dlaždic zalomí do dvou řádků a spodní se ořízne. */
@media(min-width:1240px){
#configure > .wrap{max-width:min(1560px,95vw)}
}
/* --- tmavý závěr (znovu; při přestavbě vějíře na pruh se blok omylem
odstranil spolu s rohovou verzí) ---------------------------------- */
#talk{background:linear-gradient(180deg,#1A1B1D 0%,#1F2022 100%);color:#fff}
#talk .h{color:#fff}
#talk .lead{color:rgba(255,255,255,.72)}
#talk .ct{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13);
color:#fff;box-shadow:none}
#talk .ct:hover{background:rgba(255,255,255,.10);border-color:rgba(var(--accent-rgb),.5);
transform:translateY(-2px)}
#talk .ct-ic{background:rgba(255,255,255,.09);color:#fff}
#talk .ct b{color:#fff}
#talk .ct i{color:rgba(255,255,255,.6)}
#talk .ct-ar{color:var(--pink)}
/* --- kulička u „Swappable pack" ukazuje průběh výměny --------------------
Michaela 8. 8.: ať je vidět, kdy je hotovo, ne jen že to trvá 3 minuty.
Kolem kuličky obíhá tenký růžový oblouk — jedno kolo = jedna výměna.
Drobné, aby to nepřebilo vůz. */
.vc-bead--load::before{content:"";position:absolute;inset:-6px;border-radius:50%;
background:conic-gradient(var(--pink) var(--p,0deg),rgba(var(--accent-rgb),.16) 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 2.4px),#000 0);
animation:swapLoad 3.2s linear infinite}
@property --p{syntax:'';inherits:false;initial-value:0deg}
@keyframes swapLoad{
0%{--p:0deg}
84%{--p:360deg}
100%{--p:360deg}
}
@media(prefers-reduced-motion:reduce){.vc-bead--load::before{animation:none;--p:360deg}}
/* ================= KALKULAČKA: větší a v jedné černé =====================
Michaela 8. 8.: „ta kalkulačka se mi nějak nelíbí, chtělo by to větší
a hlavně trošku změnu těch barev".
Velikost: sekce prošla šesti vrstvami úspor místa (každá odjinud v tomhle
souboru), až z ní zbylo 699 px — přitom pod lištou má k dispozici 821.
Těch 120 px si bere zpátky: větší nadpis, vzduch v panelech, větší čísla.
Barvy: tmavý panel byl uhlově šedý (#1A1B1F), kdežto pruh s fotkami nad ním
i závěrečná výzva pod ním jsou modročerné — na jedné stránce se potkávaly
dvě různé černé a oko to pozná, i když nepojmenuje. Teď je černá jedna.
A zelený štítek u našeho pruhu byl jediná zelená na celém webu; je z něj
růžová, tedy naše barva. Zpátky stačí vrátit tyhle dva řádky. */
#economics .sec-head{margin-bottom:clamp(16px,2.5vh,32px)}
#economics .sec-head .h{font-size:var(--fs-h2)}
.econ-in,.econ-out{padding:clamp(22px,3vw,36px)}
.efield{margin-bottom:clamp(20px,2.7vh,32px)}
.ederived{padding:15px 18px}
.bars{margin:1.1rem 0 .9rem}
.eo-inc{margin-bottom:.9rem}
.eo-fine{margin-top:.7rem}
/* Tmavé pozadí odpovědi je od 14. 8. pryč — podle schválené předlohy je
pravá polovina světlá. Tmavá zůstává jediné sekci na stránce, a to je
#configure (pravidlo 3 z PREDLOHA.md: tmavá je role, ne rytmus). */
/* ============ TECHNICKÁ DATA NA JEDNU OBRAZOVKU ==========================
Michaela 8. 8.: „technical data se nevlezou na jednu stránku". Lupy jsou
pryč (proč, stojí v sales.html) a zbytek se přestal stavět pod sebe:
tabulka vlevo, rozměrový výkres vpravo. Zase platí, že se výška bere
z rozvržení, ne ze schovávání — všech 24 řádků tabulky zůstává čitelných. */
@media(min-width:901px){
#specs .wrap{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(0,1fr);
gap:clamp(18px,2.4vw,36px);align-items:start}
#specs .sec-head{grid-column:1/-1}
/* uvnitř užšího sloupce by auto-fit spadl na jeden sloupec a karty by se
postavily pod sebe — proto jsou dva sloupce určené natvrdo */
.tspecs{grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,14px)}
.dims{flex-direction:column;gap:14px;padding:0}
.dims > svg{flex:0 0 auto;width:100%;max-width:none;min-width:0}
}
/* Sekce na sales měly do 13. 8. odsazení --section-y (~20 px) — hodnotu
vymyšlenou pro přišpendlené scény na homepage, kde se každá musí vejít
na jednu obrazovku, a proto počítanou z VÝŠKY okna (2,2vh). Na stránce,
která se normálně roluje, to nemá žádný smysl: na okně 900 px vysokém
z toho vyšlo 19,8 px místo 132 px z design systému. Přepisy jsou zrušené
a sekce berou odsazení z .section. Tah švu spočítaný pro
88px odsazení by tu obsah přetáhl přes předchozí sekci, takže se tady
šev nepřešívá — barva se mění po hranici, obsah ji nepřekračuje. */
#why,#economics,#specs,#deploy,#fit,#talk{--seam-pull:0px}
/* Nadpis #fit byl jediný se svojí velikostí — přišel s inline stylem
ze sloučené fleets.html a vycházel na 41,6 px, tedy mimo stupnici.
Inline styl je z HTML pryč a nadpis má --fs-h2 jako ostatní sekce. */
#fit .h{font-size:var(--fs-h2)}
#specs .sec-head{margin-bottom:clamp(12px,1.6vh,24px)}
#specs .sec-head .h{font-size:var(--fs-h2)}
#specs .sec-head .lead{margin-top:.4em}
.tsp{padding:clamp(13px,1.4vw,19px) clamp(14px,1.5vw,20px)}
.tsp h4{margin-bottom:.5em}
.tsp dl>div{padding:.4em 0;gap:10px}
.tsp dt,.tsp dd{font-size:var(--fs-label)}
/* Krátká obrazovka — tabulka musí projít i pod 800 px výšky okna. */
@media(min-width:901px) and (max-height:860px){
/* na nízkém okně se stohované řádky přitáhnou ještě víc */
.tsp dl>div.je-dlouha{padding-block:.2em}
.tsp dl>div.je-dlouha dd{margin-top:.05em}
/* Sekce na sales měly do 13. 8. odsazení --section-y (~20 px) — hodnotu
vymyšlenou pro přišpendlené scény na homepage, kde se každá musí vejít
na jednu obrazovku, a proto počítanou z VÝŠKY okna (2,2vh). Na stránce,
která se normálně roluje, to nemá žádný smysl: na okně 900 px vysokém
z toho vyšlo 19,8 px místo 132 px z design systému. Přepisy jsou zrušené
a sekce berou odsazení z .section. Tah švu spočítaný pro
88px odsazení by tu obsah přetáhl přes předchozí sekci, takže se tady
šev nepřešívá — barva se mění po hranici, obsah ji nepřekračuje. */
#why,#economics,#specs,#deploy,#fit,#talk{--seam-pull:0px}
#specs .sec-head{margin-bottom:12px}
.tsp{padding:11px 14px}
.tsp dl>div{padding:.34em 0}
.tsp dt,.tsp dd{font-size:var(--fs-label)}
.tspecs{gap:10px}
}
/* Kalkulačka je po zvětšení na 13" notebooku o kousek přes okraj — tady si
ubere zpátky jen tolik, aby se vešla, ne víc. */
@media(min-width:901px) and (max-height:860px){
#economics .sec-head{margin-bottom:clamp(12px,1.8vh,22px)}
.econ-in,.econ-out{padding:clamp(18px,2.2vw,27px)}
.efield{margin-bottom:clamp(16px,2.1vh,24px)}
.bars{margin:.9rem 0 .75rem}
.eo-inc{margin-bottom:.75rem}
.eo-fine{margin-top:.55rem}
}
/* ============ JEDNA SEKCE = JEDNA OBRAZOVKA =============================
Michaela 8. 8.: „tady už vidím další stránku a to je taky špatně".
Sekce se sice vejdou pod lištu, ale menší než obrazovka být nesmí — jinak
pod nimi vykoukne očko té následující. Každá proto vyplní zbytek okna
a obsah v ní stojí na výšku uprostřed.
K tomu jemné zaskakování: `proximity` (ne `mandatory`) znamená, že se
stránka srovná, až když u předělu zastavíte — volnému rolování nebrání.
scroll-padding drží odstup na fixní lištu, aby očko neskončilo pod ní. */
@media(min-width:901px) and (min-height:660px){
/* scroll-padding tady být nesmí: sekce mají scroll-margin-top 84 px kvůli
kotvám a zaskakování ho počítá taky — sečetlo by se to a sekce by se
zastavila o 84 px níž, než má. */
/* POZOR: styles.css je sdílený se všemi stránkami. Zaskakování se proto
nesmí pověsit na holé html — na homepage ho jedna dřívější verze měla
a přišpendlenou scénu to rozbíjelo (sticky .hero si snap pořád tahal
zpátky a scroll v půlce přechodu poskočil, viz poznámka u řádku ~1164).
Platí jen tam, kde si stránka sama nasadí .snap-pages — dnes sales. */
html.snap-pages{scroll-snap-type:y proximity}
#why,#economics,#specs,#talk{
min-height:calc(100vh - 84px);
scroll-snap-align:start;
display:flex;flex-direction:column;justify-content:center}
/* .wrap je uvnitř flexu — ať si drží svoji šířku a nesmršťuje se */
#why > .wrap,#economics > .wrap,#specs > .wrap,#talk > .wrap{width:100%}
}
/* ---- vějíř jako součást poslední obrazovky ------------------------------
Michaela 8. 8.: „ta poslední stránka musí být u toho vějíře zastavená,
protože pak ten vějíř nejde vidět". Měla pravdu: zaskakování mířilo na
začátek #talk, takže se pruh s vějířem přes noc přeskočil.
Poslední obrazovka je proto vějíř + výzva dohromady — zastavuje se na
vějíři a výzva si vezme přesně zbytek okna. */
:root{--fan-h:clamp(190px,24vh,300px)}
@media(min-width:901px) and (min-height:660px){
.fanband{scroll-snap-align:start;scroll-margin-top:84px}
#talk{min-height:calc(100vh - 84px - var(--fan-h));
scroll-snap-align:none;
padding-block:clamp(22px,3.2vh,52px)}
}
/* Na nižším okně se vějíř s výzvou na jednu obrazovku nevešly — vějíř zhubne
a výzva si ubere vzduch, ať pruh zůstane vidět celý. */
@media(min-width:901px) and (max-height:860px){
:root{--fan-h:clamp(150px,19vh,220px)}
#talk .sec-head{margin-bottom:clamp(10px,1.5vh,18px)}
/* Na nízkém okně se nadpis zmenší, ale zůstane nadpisem — strop, ne
přepnutí na velikost perexu. */
#talk .sec-head .h{font-size:min(var(--fs-h2),2rem)}
}
/* ============ VŮZ VĚTŠÍ ==================================================
Michaela 8. 8.: „nemělo by to auto být ještě větší? přece jen o něj na té
stránce jde". Mělo. Prostřední sloupec měl 588 px, takže vůz zabíral 41 %
okna — a strop .veh-3d (700 px) se ani nestihl uplatnit, dřív došla šířka
sloupce. Sloupec se proto rozšířil na úkor obou postranních (ty mají
spodní hranici 250 a 258 px, pod ni nespadnou) a strop šel nahoru.
Render má nativně 940 px, takže i po zvětšení kreslí pod svým rozlišením
a nikde neměkne. */
@media(min-width:1060px){
.cfg-grid{grid-template-columns:minmax(250px,.74fr) minmax(0,2.2fr) minmax(258px,.78fr)}
}
/* Strop je na dvou místech — .veh-3d drží 3D obálku a .veh-photo samotný
render. Kdyby se zvedl jen jeden, na širokém monitoru by vůz zůstal
na 700 px, i když sloupec má přes 800. */
.veh-3d,.veh-photo{max-width:780px}
/* Vůz vyrostl do výšky, tak si tenhle řádek vzduch nad sebou ubere —
jinak by hero přerostlo obrazovku a dole by vykoukl tmavý pruh. */
@media(min-width:821px){.veh-state{margin-top:1.05rem}}
/* ---------- ZÁVĚREČNÁ VÝZVA -----------------------------------------
Michaela 10. 8.: stránka končila poslední kapitolou časové osy a hned
patičkou, bez jakékoli výzvy. Tahle sekce to uzavírá a zároveň dělá
nárazník mezi výjezdem přišpendlené scény a patičkou.
Uhlové pozadí je záměr: celá stránka končí světlým finále časové osy,
takže tmavý blok je zřetelný předěl. data-surface="coal" v HTML k tomu
přepne i menu, aby nad ním nevznikl šedý pruh s tmavým logem. */
.close{position:relative;background:#131418;color:#fff;
padding-block:clamp(72px,9vw,128px);overflow:hidden}
/* Jemná růžová záře z levého okraje — ta samá řeč jako u jádra vějíře,
ne plocha, aby text zůstal čitelný. */
.close::before{content:"";position:absolute;left:-8%;top:-30%;
width:52%;aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(var(--accent-rgb),.16) 0%,
rgba(var(--accent-rgb),.05) 42%,rgba(var(--accent-rgb),0) 70%)}
.close-in{position:relative;display:grid;
/* Text potřebuje šířku: nadpis je 54 px a „Run our vehicles" má na jeden
řádek přes 480 px. První pokus měl .close-copy{max-width:24ch}
a nadpis se lámal na šest řádků. */
grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);
gap:clamp(28px,4vw,72px);align-items:end}
.close-copy{min-width:0}
.close .h{font-size:var(--fs-h2);line-height:1.06;text-wrap:balance;
letter-spacing:-.025em;color:#fff;margin:0}
.close .lead{margin-top:1rem;max-width:46ch;color:rgba(255,255,255,.7)}
.close-cta{display:flex;align-items:center;flex-wrap:wrap;
gap:clamp(16px,2.4vw,34px);margin-top:clamp(22px,3vh,34px)}
/* Sekundární je textový odkaz, ne druhé tlačítko — dvě tlačítka vedle sebe
si konkurují a ani jedno pak není primární. */
.close-alt{display:inline-flex;align-items:center;gap:.5rem;padding-block:4px;
text-decoration:none;color:rgba(255,255,255,.86);font-weight:600;
font-size:var(--fs-sm);transition:color var(--t-fast) var(--ease)}
.close-alt svg{width:16px;height:16px;color:var(--pink);
transition:transform var(--t-base) var(--ease)}
.close-alt:hover{color:#fff;transition-duration:var(--t-fast)}
.close-alt:hover svg{transform:translateX(4px);transition-duration:var(--t-fast)}
.close-alt:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:4px}
/* Tenký řádek s reálnými čísly. Tatáž, která nese finále časové osy. */
.close-proof{list-style:none;margin:0;padding:0;display:flex;
flex-direction:column;gap:.55rem;text-align:right;white-space:nowrap}
.close-proof li{font-size:var(--fs-sm);color:rgba(255,255,255,.62)}
.close-proof li b{font-family:var(--font-text);font-weight:800;
font-size:var(--fs-body);color:#fff;font-variant-numeric:tabular-nums;
margin-right:.4em}
.close-proof .cp-win b{color:var(--pink)}
@media(max-width:900px){
.close-in{grid-template-columns:1fr;gap:clamp(24px,4vh,40px);align-items:start}
.close-copy{max-width:none}
/* na mobilu čísla do řádku pod sebe zleva, ne zprava */
.close-proof{text-align:left;flex-direction:row;flex-wrap:wrap;
gap:.5rem 1.4rem;white-space:normal}
}
/* ============ TMAVÝ POVRCH SEKCE ======================================
NOC.md: „světlá je výchozí; tmavý povrch dostane jen sekce s rentgenem
vozu a závěrečná výzva." Zjištění při měření: na fleets ani sales dnes
NENÍ tmavá žádná sekce — tmavé jsou jen bloky uvnitř světlých sekcí
(.band, .econ, .ctaband). Střídání tam bylo mechanické: alt, alt, bílá,
alt, bílá, alt, bílá — a ty dvě alt vedle sebe byly přesně ta zmizelá
hranice, na kterou si NOC.md stěžuje.
Řeším to jedním flipem: rentgen vozu (#vehicle) jde na uhel. Tím zmizí
dvojice alt–alt a tmavá dostane význam — do vozu se má vidět, a rentgen
na tmavém stojanu je ten obraz, který si o to říká. Zbytek stránky pak
střídá bílou a #F5F5F7 sám, bez dalšího zásahu.
Neobracím jednotlivé prvky. Komponenty uvnitř používají tokeny
(--ink, --card, --line, --bg), takže stačí ty tokeny v sekci přepsat
a celý vnitřek se obrátí sám. Hodnoty jsou z battswap-design-system.css,
ať se ty dva soubory nerozejdou.
Stíny: na tmavém stín nefunguje, proto e1–e3 v téhle sekci nejsou nic
a prvek se odlišuje světlým okrajem (--line je tu rgba(255,255,255,.10)).
Prstence a růžové zářiče mají hodnoty přímo, takže tím nezmizí. */
[data-surface="coal"]{
--bg:#131418; --bg-2:#1B1D22; --bg-3:#24272E;
--card:#1B1D22; --line:rgba(255,255,255,.10);
--ink:#FFFFFF; --muted:#A6A9B4; /* 7,6 : 1 na uhlu */
--pink-ink:var(--pink); /* #BD376B je na tmavém příliš temná */
--e1:none; --e2:none; --e3:none; --shadow:none; --shadow-lg:none;
background:var(--bg); color:var(--ink);
}
/* .section.alt si nese vlastní pozadí — na uhlu musí ustoupit */
.section.alt[data-surface="coal"]{background:var(--bg)}
/* Aktivní pilulky mají background:var(--ink);color:#fff. Na uhlu je --ink
bílá, takže „Battery" byla bílá na bílé a zmizela. Na tmavém povrchu se
proto vybraná pilulka obrací: bílá výplň, uhlový text. */
[data-surface="coal"] .uc.active{background:#fff;color:#131418;border-color:#fff}
/* .seg button.active jde naopak — bílá výplň s var(--ink) textem, což je
na uhlu bílá na bílé z druhé strany */
[data-surface="coal"] .seg button.active{background:#fff;color:#131418}
/* .eyebrow má pevnou šedou #63636A vybranou pro světlé pozadí — na uhlu
z ní bylo 3,09 : 1. Na tmavém povrchu bere tlumenou barvu povrchu
(#A6A9B4 = 7,6 : 1). Růžová čárka před textem zůstává. */
[data-surface="coal"] .eyebrow{color:var(--muted)}
/* ============ ŠVY MEZI SEKCEMI ========================================
Změřeno na fleets.html: na každé hranici bylo 250–267 px, kde není nic.
(Na sales.html je to 28, 53 a −7 px, tam se šev řešit nemusí.)
Dvě věci zvlášť:
1. Odsazení nesymetricky. Bylo 132 px shora i zdola, takže na spoji
stálo 264 px prázdna. Horní je teď dvě třetiny spodního — sekce má
dole vydechnout, nahoře ne.
2. Přes hranici vystoupá první blok následující sekce. Ale jen když je
to VIZUÁLNÍ blok (.band, .ctaband, .two, .media). Nadpisy
necháváme na místě: nadpis napůl na šedé a napůl na bílé nevypadá
jako záměr, ale jako chyba sazby. Blok, který hranici překročí, ji
naopak sešije.
Kotvy to nerozbije: section[id] má scroll-margin-top 84 px, takže blok
po doskoku začne na 92 px, tedy pod lištou (71 px). */
.section{padding-top:clamp(48px,6.7vw,88px);padding-bottom:clamp(72px,10vw,132px);
--seam-pull:calc(clamp(48px,6.7vw,88px) + clamp(40px,5vw,80px))}
.section + .section > .wrap > .band:first-child,
.section + .section > .wrap > .ctaband:first-child,
.section + .section > .wrap > .two:first-child,
.section + .section > .wrap > .media:first-child{
/* Tah musí být VĚTŠÍ než horní odsazení, jinak se jen vyruší s ním
a blok skončí pár pixelů POD hranicí — přesně to se stalo poprvé.
Proto odsazení plus těch clamp(40px,5vw,80px), o které má přesahovat.
POZOR (opraveno 11. 8.): tah je spočítaný pro sekce s odsazením
clamp(48px,6.7vw,88px). Na sales.html mají sekce --section-y, což je
~20 px, takže tam tenhle tah obsah přetáhl PŘES předchozí sekci —
tabulka „Does BattSwap fit" ležela na krocích „How deployment works"
a překrývala je o 134 px. Proto je tah v proměnné a stránky s malým
odsazením si ho nastaví na nulu. */
position:relative;
margin-top:calc(-1 * var(--seam-pull,0px))}
/* Doplňkový řádek v kontaktní kartě (.ct i) vycházel na 12 px. Je to text
karty, ne verzálkový popisek, a NOC.md má pro text v kartě dno 15 px. */
.ct i{font-style:normal;font-size:var(--fs-sm)}
/* ============ TECHNICAL DATA: prázdna po zarovnání ====================
NOC.md chtěl čtyři karty do dvou stejných sloupců a výkres s tlačítkem
jako pruh přes celou šířku pod nimi. To tady nejde: výkres stojí vedle
tabulky schválně, protože jinak se sekce nevejde na jednu obrazovku
(Michaela 8. 8.: „technical data se nevlezou na jednu stránku") —
pod karty by přidal ~300 px a sekce by přetekla. Zůstává tedy vedle,
ale obě vady, na které NOC.md míří, se spraví zarovnáním:
1. Karta „Weights & volume" měla dole prázdný pruh, protože ji řádek
roztáhl na výšku sousední karty, ale obsah se nerozprostřel.
Řádky se teď rozloží po celé výšce karty.
2. Sloupec s výkresem byl o 290 px nižší než tabulka, takže pod ním
zela díra. Teď je stejně vysoký a výkres i tlačítko v něm stojí
svisle na střed. */
.tsp{display:flex;flex-direction:column}
.tsp dl{flex:1;display:flex;flex-direction:column;justify-content:space-between}
@media(min-width:901px){
#specs .wrap{align-items:stretch}
.dims{height:100%;justify-content:center;align-content:center}
}
/* „Does BattSwap fit your operation?" potřebuje 1035 px a symetrická půlka
dávala 498 — chybělo 20 px na dva řádky. Jen tahle sekce, .two používají
i jiné stránky. */
@media(min-width:901px){
#fit .two{grid-template-columns:1.14fr 1fr}
}
/* ============ SCÉNA VRSTEV NA MOBILU ==================================
Michaela 11. 8.: „na 390 px je diagram poštovní známka uprostřed
obrazovky s asi třemi sty pixely prázdna nad i pod ním a s nečitelnými
popisky." Naměřeno: obrázek měl 350 px šířky v boxu vysokém 541 px.
Obrázek je proto přes celou šířku okna (vystoupí z .wrap), výška se
řídí jeho poměrem stran místo zbytku scény, a popisky LAYER 1–4 jsou
pod ním jako čitelný seznam na 15 px, ne jako součást grafiky. */
.lay-legend{display:none}
/* Zvýraznění naší vrstvy patří legendě jako celku, ne jen desktopu —
jinak by to byly dvě různé komponenty. Na světlém podkladu musí být
růžová --pink-ink, plná #FB5494 se pod 24 px nesmí (brandmanuál). */
.lay-legend .is-us span{color:var(--pink-ink)}
@media(max-width:720px){
.laystack{flex:none;display:block;
/* výstup z .wrap na celou šířku okna */
width:100vw;margin-inline:calc(50% - 50vw)}
.laystack-in{height:auto;display:block}
.laystack picture{height:auto}
.laystack img{width:100%;height:auto;max-width:none}
.lay-pair{display:block;width:100%;height:auto}
.lay-pair picture{height:auto}
.lay-legend{display:grid;gap:10px;margin:16px var(--pad) 0;padding:0;list-style:none}
.lay-legend li{display:flex;align-items:flex-start;gap:12px;
padding-bottom:10px;border-bottom:1px solid var(--line)}
.lay-legend li:last-child{border-bottom:0;padding-bottom:0}
.lay-legend b{flex:none;width:26px;height:26px;border-radius:var(--r-sm);
display:grid;place-items:center;font-family:var(--font-display);
font-size:var(--fs-label);background:var(--bg-2);color:var(--muted)}
.lay-legend .is-us b{background:var(--pink);color:var(--on-pink)}
.lay-legend span{display:block;font-size:var(--fs-sm);font-weight:600;
color:var(--ink);line-height:1.25;min-width:0}
.lay-legend i{display:block;font-style:normal;font-weight:400;
font-size:var(--fs-sm);color:var(--muted);margin-top:.15em}
}
/* ---- legenda vedle diagramu na desktopu -----------------------------
OPRAVY.md bod 6. Seznam existoval, ale byl schovaný v @media(max-width:720px),
takže ho na velké obrazovce nikdo nikdy neviděl — na 1440 px měl
display:none a nulovou výšku. Teď je scéna dvousloupcová: diagram vlevo,
legenda vpravo jako text v našem písmu.
Poměr sloupců drží diagram dominantní. Legenda si bere 258 px z 1180,
tedy 22 % — diagram zůstává na 79 % šířky. Popisky jsou 15 px (--fs-sm),
ne 13: pod patnáct běžný text nesmí.
Od 901 px. Mezi 721 a 900 px zůstává stav jako dosud (bez legendy),
tam by 210 px sloupce diagram příliš zmáčklo. */
@media(min-width:901px){
/* Legenda si sedne do PRAVÉHO OKRAJE, ne do šířky textu. Kdyby si brala
z .wrap, diagram by se zmenšil z 1068 na 786 px (naměřeno) a popisky
zapečené v grafice by se ještě zdrobnily — přesně ten problém, který
legenda řeší. Blok se proto rozšíří jen doprava: levá hrana diagramu
zůstane zarovnaná s nadpisem a bitmapa má na 1440 px 908 px místo 786
a na 1920 px 1080 px místo 747. Výlet je omezený na 340 px, aby na
velmi širokém okně legenda neodplula od diagramu. */
.laystack{justify-content:flex-start;gap:clamp(24px,2.6vw,44px);
--vylet:max(0px, min(340px, (100vw - var(--maxw))/2 - 8px));
width:calc(100% + var(--vylet))}
.laystack-in{flex:1 1 auto;min-width:0}
.lay-legend{display:grid;align-content:center;flex:none;
width:clamp(206px,17vw,258px);gap:clamp(10px,1.5vh,18px);
margin:0;padding:0;list-style:none}
.lay-legend li{display:flex;align-items:flex-start;gap:12px;
padding-bottom:clamp(9px,1.3vh,14px);border-bottom:1px solid var(--line)}
.lay-legend li:last-child{border-bottom:0;padding-bottom:0}
.lay-legend b{flex:none;width:26px;height:26px;border-radius:var(--r-sm);
display:grid;place-items:center;font-family:var(--font-display);
font-size:var(--fs-label);background:var(--bg-2);color:var(--muted)}
.lay-legend .is-us b{background:var(--pink);color:var(--on-pink)}
.lay-legend span{display:block;font-size:var(--fs-sm);font-weight:600;
color:var(--ink);line-height:1.25;min-width:0}
.lay-legend i{display:block;font-style:normal;font-weight:400;
font-size:var(--fs-sm);color:var(--muted);line-height:1.35;margin-top:.2em}
}
/* Na nízkém okně sahá legenda do plovoucí pilulky „Calculate savings".
Naměřený přesah: 3 px na 1440×720, 10 na 1100×700, 29 na 901×640.
Pilulka je vysoká 61 px, takže si legenda pod sebou rezervuje 90 px
a středění ji o polovinu rezervy zvedne — to je 45 px, tedy s rezervou
nad největší naměřený přesah. Nad legendou zbývá 53–147 px volna,
takže se nemá kam narazit. Na vysokém okně (nad 830 px) žádný přesah
není a legenda zůstává přesně na středu diagramu. */
@media(min-width:901px) and (max-height:830px){
.lay-legend{align-self:stretch;padding-bottom:90px}
}
/* ---- zvětšení diagramu na mobilu -----------------------------------
Obrázek je 2200 px široký a na 390px displeji jsou popisky v grafice
i po roztažení na celou šířku malé. Ťuknutí ho otevře na plnou výšku
okna a posouvá se do stran — tam už jsou čitelné. */
.lay-zoom{display:none}
@media(max-width:720px){
/* Scéna je uvnitř .sc-wipe, které má pointer-events:none, aby si
neviditelné vrstvy nebraly kliknutí. Tlačítko si dotyk musí vzít
zpátky — ale jen když je scéna vážně odkrytá (.live), jinak by
kradlo kliknutí scénám pod sebou. Na tuhle chybu tenhle projekt
narazil už u historie, vějíře i videa. */
.sc-wipe .lay-zoom{pointer-events:none}
.sc-wipe.live .lay-zoom{pointer-events:auto}
.lay-zoom{display:inline-flex;align-items:center;gap:.5em;
margin:12px var(--pad) 0;padding:.6em 1em;
border:1px solid var(--line);border-radius:var(--r-pill);
background:var(--card);color:var(--ink);font:inherit;
font-size:var(--fs-sm);font-weight:600;cursor:pointer;
transition:background var(--t-fast) var(--ease)}
.lay-zoom svg{width:16px;height:16px;color:var(--pink)}
.lay-zoom:active{background:var(--bg-2);transition-duration:var(--t-fast)}
}
.layzoom{position:fixed;inset:0;z-index:120;background:#0B0C0E;
display:flex;align-items:center;justify-content:flex-start}
.layzoom[hidden]{display:none}
.layzoom-scroll{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
display:flex;align-items:center;-webkit-overflow-scrolling:touch}
.layzoom-scroll img{height:100%;width:auto;max-width:none;display:block}
/* Křížek i nápověda musí být vidět i nad světlou částí obrázku — proto
krycí tmavá výplň, ne průhledná bílá (na téhle grafice zmizela). */
.layzoom-close{position:absolute;top:14px;right:14px;z-index:2;
width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
background:#131418;color:#fff;display:grid;place-items:center;
box-shadow:0 2px 10px rgba(0,0,0,.45)}
.layzoom-close svg{width:20px;height:20px}
.layzoom-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
color:#fff;background:rgba(19,20,24,.82);padding:.5em 1em;
border-radius:var(--r-pill);pointer-events:none}
/* ============ VĚJÍŘ NA MOBILU ========================================
Na 390 px byl vějíř 460 px široký chuchvalec s popisky pod 10 px.
Pod 720 px se proto SVG skryje a kategorie stojí pod sebou jako
čitelný seznam. Velké číslo zůstává nahoře, seznam pod ním.
Rozsvěcení řídí tatáž logika jako u uzlů vějíře (třída .on). */
.fan-list{display:none}
@media(max-width:720px){
.sc-fan .fan-svg,.sc-fan .fan-canvas{display:none}
/* Na desktopu je textový sloupec i s čísly absolutně přes celou scénu
(leží VEDLE vějíře). Na mobilu vějíř není, takže se scéna srovná do
jednoho sloupce: nadpis → velké číslo → seznam kategorií. */
.sc-fan .wrap{display:flex;flex-direction:column;justify-content:center;
gap:clamp(14px,2.4vh,26px);padding-block:clamp(16px,3vh,32px);overflow-y:auto}
.sc-fan .bb-top{position:static;display:block;padding:0 var(--pad);
flex:none}
.sc-fan .sec-head{max-width:none;margin-bottom:14px}
.sc-fan .fan-stats{position:static;width:auto;text-align:left;
margin-top:14px;gap:10px}
.sc-fan .fan{position:static;transform:none;width:100%;height:auto;
flex:none;display:block}
.fan-list{display:grid;gap:2px;width:100%;margin:0;padding:0;list-style:none}
.fan-item{display:flex;align-items:center;gap:12px;
padding:10px var(--pad);font-size:var(--fs-sm);font-weight:600;
color:var(--muted);
/* pohyb jen na průhlednosti a posunu, jak žádá design systém */
opacity:.42;transform:translateY(6px);
transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),
color var(--t-slow) var(--ease)}
.fan-item.on{opacity:1;transform:none;color:var(--ink)}
.fi-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);
display:grid;place-items:center;
background:var(--pink-soft);color:var(--pink)}
.fi-ic svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){
.fan-item{opacity:1;transform:none;transition:none}
}
}
/* ============ HERO NA INDEXU — VÝŘEZ PRO ÚZKÉ OBRAZOVKY ==============
Michaela 11. 8.: „z fotky je vidět jen brada a kus vlasů u pravého
okraje, postava je mimo záběr."
Spočítáno, ne odhadnuto: fotka je 2400 px široká, při cover na okno
390×844 se zvětší na 1482×844, takže je vidět jen prostředních 26 %
šířky. Postava přitom stojí mezi 58 a 89 % šířky a obličej mezi 61
a 78 % — při object-position 50 % tedy z principu nemůže být v záběru.
Svisle se neořezává nic (výška sedí na pixel), proto se mění jen
vodorovná složka. 70 % dá celou hlavu; zkoušel jsem i 62 %, tam se
ořezávalo temeno, a 76 %, tam už postava tlačí na text.
Obě vrstvy dostávají STEJNOU hodnotu — kdyby se lišily, rozejdou se
při přerodu stejně, jako by se rozešly kvůli transform-origin.
Samotný záběr se nemění, jen se jinak ořezává. */
@media(max-width:720px){
/* Selektor musí být specifičtější než .hero-photo img (0,1,1), jinak
prohraje a výřez se vůbec neprojeví — na to jsem si sáhl. */
.hero-photo .hp-bg,.hero-photo .hp-man,.hero-photo .hp-hero{
object-position:70% 50%}
}
/* Ztmavení hero na indexu pro úzké obrazovky. Na desktopu je přechod
zleva (text vlevo, muž vpravo), na mobilu text zabírá celou šířku
a leží uprostřed výšky — pás je proto svislý s vrcholem uprostřed.
Změřeno od nejslabší varianty: krytí .30 → perex 4,04 · odkaz 3,47;
.38 → 5,12 · 4,41; .46 → 6,20 · 5,40 ← nasazeno jako první průchozí.
Bez něj měl perex 2,11 : 1 a 44 % glyfů pod prahem. */
@media(max-width:720px){
.hero:not(.on-daylight)::before{
background:linear-gradient(180deg,
rgba(17,18,19,.46) 0%, rgba(17,18,19,.56) 18%, rgba(17,18,19,.66) 34%,
rgba(17,18,19,.68) 52%, rgba(17,18,19,.62) 68%, rgba(17,18,19,.46) 86%,
rgba(17,18,19,.30) 100%);
-webkit-mask-image:none;mask-image:none}
}
/* ---- dlouhé hodnoty v technických datech pod popisek ----------------
Michaela 11. 8.: „hodnoty vpravo se lámou na dva řádky a zarovnané
doprava působí roztřepeně."
Naměřeno: z 24 párů se lámou tři — nejdelší nelámaná hodnota má
23 znaků, nejkratší lámaná 31, takže odhadovaný práh 28 sedí přesně
mezi ně. Značku ale nasazuje skript podle SKUTEČNÉHO zalomení, ne
podle počtu znaků — kde se text zalomí, závisí na šířce okna a na
mobilu je ten práh jinde. */
.tsp dl>div.je-dlouha{display:block;padding-block:.28em}
/* Odsazení pod popiskem je malé schválně: stohovaný řádek je vyšší než
dvouřádkový vedle popisku a sekce „Technical data" se musí vejít na
jednu obrazovku. Bez toho přetekla o 14 px. */
.tsp dl>div.je-dlouha dd{text-align:left;margin-top:.12em;
font-weight:600;max-width:none}
/* ---- klidný hero na indexu ------------------------------------------
Posun obou vrstev (oblouk kamery) se vypíná spolu se smyčkou v JS.
Zpátky: smazat class="hero-still" z v index.html.
Fleets.html tím nijak dotčené není — tam běží skutečné video. */
.hero-still .hp-bg,.hero-still .hp-man{animation:none}
/* ---- sloučená sekce „operating case" (ZITRA.md bod 1) ----------------
Argument nese titulek a věta, důkaz nese skutečná fotka. Rám je ten
z bývalého tmavého pásu (.op), takže zůstává i rozhýbání po najetí.
Pás měl vlastní tmavé pozadí; teď je z něj řádná sekce s coal povrchem,
takže si barvu bere z tokenů a nemusí ji mít vlastní. */
.wcase .op-lede{margin:0 0 clamp(14px,2vw,22px);color:var(--muted)}
.wcase .op-hint{color:var(--muted)}
/* Podklad rámečku, než se fotka načte. Sekce je od 12. 8. světlá, takže
světlá průhledná by na ní nebyla vidět vůbec — tady tmavá. */
.wcase .op{background:rgba(15,15,17,.06)}
.wcase .sec-head{margin-bottom:clamp(10px,1.4vh,18px)}
/* Na širokém okně dostane zvýrazněná karta dva sloupce — jedna, ne víc.
Řádek ale jen jeden: obecné pravidlo výš jí dává span 2 i na řádky, což
po sloučení obou fotkových sekcí (pět karet místo šesti) nechávalo vpravo
dole prázdné pole. Dva sloupce krát jeden řádek se pětice vyskládá přesně:
2 + 1 nahoře, 1 + 1 + 1 dole. */
@media(min-width:901px){
.wcase .opgrid{grid-template-columns:repeat(3,1fr)}
.wcase .op--wide{grid-column:span 2;grid-row:auto;aspect-ratio:auto}
/* Karty v jedné řadě mají mít stejnou výšku. Samotné natažení mřížkou
nestačí, protože .op má vlastní poměr stran a ten by vyhrál — proto
výška 100 %: karta vedle široké fotky dorovná její výšku. */
.wcase .opgrid .op{width:100%;height:100%}
}
/* ============ PŘECHODY MEZI STRÁNKAMI ================================
ZITRA.md bod 4. Nativní funkce prohlížeče, žádná knihovna: při přechodu
se stránky přelijí místo bílého bliknutí. Ve Firefoxu se prostě nic
nestane a stránka se načte jako dřív, takže se nic nerozbije.
Sdílené prvky dostanou jméno, aby se mezi stránkami morfovaly. Jméno
musí být na stránce unikátní — proto jen lišta a logo, ty jsou na všech
stránkách jedny a tytéž. */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
.nav .brand{view-transition-name:brand}
/* doba a křivka z design systému, ne výchozí prohlížečové */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){
animation-duration:var(--t-base);
animation-timing-function:var(--ease)}
@media(prefers-reduced-motion:reduce){
@view-transition{navigation:none}
}
/* ============ HERO VIDEO NA HOMEPAGE (12. 8.) =========================
Schválená smyčka nahradila dvouvrstvou paralaxu. Vrstvy ani jejich
animace se nemazaly — @keyframes heroArcBg / heroArcMan zůstávají a
tools/hero-layers-novy.py taky; jen v DOM nejsou žádné .hp-bg / .hp-man,
takže se neuplatní. Vrátit je znamená vrátit do index.html
a dva .
Rám plní object-fit:cover, stejně jako to dělaly vrstvy. Vlastní třída
hp-loop, protože hp-vid je obsazená videem přerodu (má opacity:0). */
.hp-loop{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 50%;z-index:0;pointer-events:none}
/* Mobilní výřez 70 % byl spočítaný pro FOTKU, kde postava stála na 67–91 %
šířky. Video je komponované jinak, takže tady zůstává na středu. */
@media(max-width:720px){
.hero-photo .hp-loop{object-position:50% 50%}
}
/* ---- ztmavení pod nadpisem na videu --------------------------------
Samostatná vrstva nad videem, ne filtr na videu, aby se nezašpinil
celý obraz.
Přeměřeno 12. 8. na NOVÉ smyčce (1920×1080, 24 fps, 9,25 s) — ta má
soumrak a horní levý kout je skoro tmavá obloha, takže potřebuje
mnohem méně než předchozí záběr. Měřeno na pixelech glyfů v sedmi
okamžicích smyčky, rozhoduje vždy perex a nejhorší je t = 7,5 s na
desktopu a t = 0 s na mobilu:
1440×900: bez ztmavení 4,49 · ×0,20 → 4,88 · ×0,30 → 5,09
×0,48 → 5,36 ← nasazeno · ×1,00 → 6,88
390 px: ×0,80 → 4,21 · ×0,90 → 4,59 · ×0,95 → 4,80 ← nasazeno
Rozhodlo ale VELKÉ okno, ne 1440. Na 1920×1080 je výřez cover jiný,
flotila vyjede za perex a kontrast spadne: při ×0,30 dával 4,44, tedy
pod hranicí. Doměřeno v devatenácti okamžicích smyčky po půl sekundě
(sedm vzorků nejhorší chvíli minulo — je to t = 8,0 s, ne 7,5 s):
při ×0,48 je nejnižší hodnota 4,74. Proto je desktopové ztmavení
nastavené podle 1920×1080, ne podle 1440.
Na desktopu tak zbyl jen slabý nádech vlevo (krytí .26 → 0, dřív .54),
na mobilu musí pás zůstat silný: text tam leží přes celou šířku, tedy
i přes flotilu a rozsvícenou stanici. */
/* POZOR: tohle jsou pravidla, která na hero videu OPRAVDU platí — základní
.hero::before je přebíjejí obě. Zadání dávky 6 počítalo závoj z toho
základního (krytí .90), jenže na desktopu se používalo .26 → 0. Tmavá
levá strana proto nebyla závojem: změřeno na vykreslené stránce, i když
se závoj i stín ÚPLNĚ vypnou, má levý pruh jen 55 z 255. Zbytek je
samotný záběr — vlevo stojí tmavá vozidla nad večerní vodou.
Barva je od 15. 8. --coal rgb(19,20,24); ta původní měla odstín 215°
a sytost 67 %, tedy modrou mimo brandmanuál. */
@media(min-width:901px){
.hero.hero--video::before{
background:linear-gradient(97deg,
rgba(19,20,24,.20) 0%, rgba(19,20,24,.15) 20%, rgba(19,20,24,.09) 38%,
rgba(19,20,24,.04) 54%, rgba(19,20,24,0) 70%);
-webkit-mask-image:none;mask-image:none}
}
/* Na mobilu leží text přes celou šířku, tedy i přes rozsvícenou stanici,
takže pás musí zůstat silnější než na desktopu. Krytí je doměřené:
pod .52 nahoře spadl nadpis pod 4,5 : 1. */
@media(max-width:900px){
.hero.hero--video::before{
background:linear-gradient(180deg,
rgba(19,20,24,.60) 0%, rgba(19,20,24,.52) 22%, rgba(19,20,24,.40) 46%,
rgba(19,20,24,.26) 64%, rgba(19,20,24,.13) 82%, rgba(19,20,24,.04) 100%);
-webkit-mask-image:none;mask-image:none}
}
/* ---- rentgen vozu na dotyku ------------------------------------------
Hotspoty měly 34 px, což je pod doporučenými 44 px pro prst. Na dotyku
se zvětšují; kreslený křížek uvnitř zůstává stejně velký, roste jen
terč. Plovoucí popisek se na dotyku vůbec nekreslí (viz script.js) —
klepnutí ho otevřelo přes celý vůz. */
@media(hover:none){
.hotspot{width:44px;height:44px}
.tip{display:none !important}
}
/* ---- šev kolem tmavého pásu s rentgenem -----------------------------
Tady bývalo #vehicle{padding-block:clamp(44px,5.5vh,80px)}. Mělo to dát
tmavému pásu VÍC vzduchu než světlým sousedům, protože ti měli ~20 px
z --section-y. Jak se sousedům 13. 8. vrátilo odsazení z design systému
(88/132 px), obrátil se ten záměr naruby: 49 px bylo najednou MÍŇ než
u sousedů. Pravidlo je proto zrušené a rentgen bere .section jako
všechno ostatní — nesymetrii u švu drží samo (88 px shora, 132 zdola). */
/* ═══════════ KONFIGURÁTOR PODLE PŘEDLOHY (13. 8.) ═══════════════════
Přeneseno z navrh-sales.html. Hodnoty z předlohy nahrazené tokeny:
15px → --fs-sm · 13px → --fs-xs · 12px → --fs-label
17px → --fs-lead · 22px → --fs-h3 · 999px → --r-pill
Dvě hodnoty token nemají a hlásím to místo zavádění nové:
· nadpis v předloze clamp(32px,3vw,44px), tady --fs-h2, tedy na
1440 px 48 místo 44,
· cena v předloze clamp(40px,4.4vw,58px), tady --fs-h1, tedy na
1440 px 56 místo 58.
Pilulka a karta jsou jediné dva tvary; bublina, kolečko s vodicí
čárkou a skleněná dlaždice jsou pryč (pravidla 4 a 5). */
.cfg2 .cfg2-head{max-width:640px}
.cfg2 h1.h{font-size:var(--fs-h2);line-height:1.05;margin:0 0 .3em}
.cfg2 .lead{max-width:50ch}
.cfg2-stage{position:relative;width:min(600px,66%);margin:clamp(2px,.8vh,12px) auto 0}
.cfg2-stage .veh-photo{position:relative;z-index:1}
.cfg2-stage img{width:100%;height:auto;display:block;position:relative;z-index:1}
.cfg2-ground{position:absolute;left:50%;bottom:-10px;translate:-50% 0;width:64%;height:30px;z-index:0;
background:radial-gradient(ellipse at 50% 50%,rgba(11,12,14,.22) 0%,rgba(11,12,14,.07) 46%,transparent 72%);
filter:blur(7px)}
.cfg2-cap{margin:16px 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
/* Tečka byla znak „●" a jako text měla na bílé 2,62 : 1 proti prahu 4,5.
Je to čistá dekorace, ne informace, takže z ní je tvar: kruh z pozadí.
Vypadá stejně, ale přestává být textem — a přejímka měří text. */
.cfg2-cap .cfg2-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
background:var(--muted-2);margin-right:7px;vertical-align:middle}
.cfg2-picks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;
margin-top:clamp(18px,2.4vh,28px)}
.chip2{appearance:none;border:1px solid var(--line);background:transparent;border-radius:var(--r-pill);
padding:11px 20px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);
cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.chip2:hover{border-color:rgba(11,12,14,.30);transition-duration:var(--t-base)}
.chip2[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.chip2[aria-pressed=false]{color:var(--muted)}
.cfg2-sep{width:1px;height:24px;background:var(--line);margin:0 8px}
.dot2{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0}
.dot2[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px;border-color:transparent}
.cfg2-answer{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
gap:clamp(22px,4vw,54px);margin-top:clamp(20px,2.6vh,32px);
padding-top:clamp(18px,2.2vh,26px);border-top:1px solid var(--line)}
.cfg2-price{text-align:center}
.cfg2-price .cp-lab{display:block;margin-bottom:6px}
/* Předloha nemá za cenou žádnou záři a číslo je Panchang, ne Inter —
drop-shadow ze staré verze se proto vypíná a velikosti se přebijí. */
.cfg2-price .cp-big{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
font-size:var(--fs-h1);line-height:1;display:block;filter:none;color:var(--ink)}
.cfg2-price .cp-big .num{font-family:var(--font-display);font-weight:700;
font-size:1em;letter-spacing:-.03em;color:var(--pink-ink)}
.cfg2-price .cp-big .cur,.cfg2-price .cp-big .per{font-family:var(--font-display);
align-self:auto;margin:0}
.cfg2-price .cp-big .num{color:var(--pink-ink)}
.cfg2-price .cp-big .cur,.cfg2-price .cp-big .per{font-size:.32em;font-weight:600;
color:var(--muted);letter-spacing:0}
.cfg2-covers{font-size:var(--fs-sm);line-height:1.5;color:var(--muted);max-width:34ch;margin:0}
.cfg2-covers b{color:var(--ink);font-weight:600}
.cfg2 .mt-note{margin:.8rem auto 0;text-align:center;max-width:52ch}
.cfg2-facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
gap:clamp(18px,3.2vw,44px);margin-top:clamp(16px,2.2vh,26px)}
.cfg2-facts .f2{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.cfg2-facts .f2 b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);
color:var(--ink);letter-spacing:-.01em}
.cfg2-facts .f2 b .u{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.cfg2-facts .f2-more{margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--pink-ink);
text-decoration:none;padding-block:4px} /* 23 → 31 px, norma dotykového cíle je 24 */
@media(max-width:860px){
.cfg2-stage{width:100%}
.cfg2-answer{flex-direction:column;align-items:center;gap:22px}
.cfg2-facts{justify-content:flex-start}
.cfg2-facts .f2-more{margin-left:0;width:100%}
}
/* ═══════════ JEDEN PODVOZEK, ČTYŘI NÁSTAVBY (13. 8.) ════════════════
Přeneseno z navrh-sales.html. Souřadnice dílů jsou z meta.json
přepočítané na procenta, takže sedí v každé velikosti. Animuje se
jen transform a opacity. Doby a křivka z tokenů: 340/420 ms
z předlohy nahrazeno --t-slow (640) by bylo pomalé, proto --t-base
na posun a --t-fast na průhlednost — obojí ze systému. */
/* Záporný margin nahoře: mezi perexem a vozem zela díra 94 px (změřeno
14. 8. na vykreslené stránce). Není to vzduch, ale REZERVA — scéna musí
pojmout i nejvyšší nástavbu, parcel box, a ten začíná 4 % od horní hrany
scény, zatímco podvozek až na 21,88 %. U zbylých tří voleb je ta rezerva
prázdná a čte se jako chyba.
Stáhnout jde jen o tolik, kolik snese parcel box: ten měl k perexu
26 px a po stažení mu zbývá 15. Zbytek se bez zásahu do obsahu ubrat
nedá — víc už by nejvyšší nástavba lezla do textu. Viz hlášení. */
.sys{position:relative;width:min(620px,68%);aspect-ratio:673/425;
margin:0 auto clamp(26px,3vh,40px)}
.sys img{position:absolute;display:block}
.sys .sys-base{left:4.01%;top:21.88%;width:95.99%}
.sys .sys-body{opacity:0;transform:translateY(-26px);
transition:opacity var(--t-fast) var(--ease), transform var(--t-base) var(--ease)}
.sys .sys-body.on{opacity:1;transform:translateY(0)}
.sys .grocery{left:0.30%;top:21.18%;width:53.34%}
.sys .parcel {left:0.00%;top:4.00%;width:53.64%}
.sys .pickup {left:0.30%;top:21.41%;width:53.34%}
.sys .garbage{left:3.12%;top:17.41%;width:50.52%}
.sys .sys-seam{position:absolute;left:1%;right:47%;top:20.6%;height:1px;
background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent);
opacity:1}
.sys .sys-floor{position:absolute;left:10%;bottom:2%;width:70%;height:26px;
background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 46%,transparent 74%);
filter:blur(8px)}
/* Tahle sekce má být JEDEN produktový moment na obrazovku, takže se
měří na výšku okna — proto vh, a proto tady schválně neplatí odsazení
z .section (88/132 px). Není to ten průsak --section-y, který jsem
ráno rušil: ten platil pro sekce, které se normálně rolují.
Změřeno: s odsazením z design systému měla sekce 1078 px, s tímhle
a se srovnanou hlavičkou se vejde pod 900. */
/* Nahoře navíc výška lišty: #configure je první sekce stránky, začíná na
y = 0 a fixní lišta jí ukrajovala 29 px z prvního řádku nadpisu (změřeno
14. 8. na náhledu). Dole zůstává původní hodnota. */
#configure{padding-block:calc(84px + clamp(4px,0.8vh,12px)) clamp(28px,3.4vh,44px)}
/* Předloha dává nadpisu clamp(32px,3vw,44px) a pod hlavičkou žádnou
mezeru — odstup dělá vlastní margin scény. */
#configure .cfg2-head{margin-bottom:0}
#configure h1.h{font-size:var(--fs-h2)}
#configure .cfg2-picks{margin-top:clamp(14px,2vh,24px)}
.sys-part{margin:clamp(12px,1.8vh,20px) auto 0;max-width:56ch;text-align:center}
.sys-part b{display:block;font-family:var(--font-display);font-weight:700;
font-size:var(--fs-lead);margin-bottom:6px}
.sys-part p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
/* Na tmavé ploše má chip světlý okraj a stisknutý je bílý — tokeny
pro tmavý povrch, nic nového. */
[data-surface="coal"] .chip2{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.70)}
[data-surface="coal"] .chip2:hover{border-color:rgba(255,255,255,.36);color:#fff}
[data-surface="coal"] .chip2[aria-pressed=true]{background:#fff;border-color:#fff;color:var(--coal,#131418)}
@media(max-width:860px){.sys{width:100%}}
/* ═══════════ SLOUČENÁ SEKCE NA TMAVÉ (13. 8., ZADANI.md) ════════════
Konfigurátor je teď na uhlové ploše, takže cena, fakta a popisky
potřebují světlé tokeny. Nic nového se nezavádí — jen se přepíná
na hodnoty, které už pro tmavý povrch existují. */
[data-surface="coal"] .cfg2-price .cp-big{color:#fff}
[data-surface="coal"] .cfg2-price .cp-big .num{color:var(--pink)}
[data-surface="coal"] .cfg2-price .cp-big .cur,
[data-surface="coal"] .cfg2-price .cp-big .per,
[data-surface="coal"] .cfg2-price .cp-lab{color:rgba(255,255,255,.70)}
[data-surface="coal"] .cfg2-answer{border-top-color:rgba(255,255,255,.14)}
[data-surface="coal"] .cfg2-covers{color:rgba(255,255,255,.70)}
[data-surface="coal"] .cfg2-covers b{color:#fff}
[data-surface="coal"] .cfg2-facts .f2{color:rgba(255,255,255,.70)}
[data-surface="coal"] .cfg2-facts .f2 b{color:#fff}
[data-surface="coal"] .cfg2-facts .f2 b .u{color:rgba(255,255,255,.70)}
[data-surface="coal"] .cfg2-facts .f2-more{color:var(--pink)}
[data-surface="coal"] .cfg2-sep{background:rgba(255,255,255,.14)}
/* Přepínač modelu: na tmavé je pilulka bílá s tmavým popiskem, aby
nesplynula s pozadím. Neaktivní popisek světlý. */
/* Na tmavé ploše nese výplň samo tlačítko, ne posuvná pilulka za ním.
Důvod je měřitelnost: pilulka je samostatný prvek, takže kontrolní
skript pod textem viděl pozadí přepínače (1,05 : 1), ne růžovou.
Teď je barva na tom prvku, na kterém je text — a měří se správně:
--on-pink na --pink-btn dává 6,23 : 1. */
[data-surface="coal"] .mtoggle{background:rgba(255,255,255,.10)}
[data-surface="coal"] .mtoggle .mt-pill{display:none}
[data-surface="coal"] .mtoggle button{color:rgba(255,255,255,.70);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
[data-surface="coal"] .mtoggle button.on{background:var(--pink-btn);color:var(--on-pink)}
/* ═══════════ ČTYŘI VRSTVY, KAŽDÁ ZVLÁŠŤ (13. 8.) ════════════════════
Pohyb i čísla jsou z předlohy podklady/vrstvy-ukazka-B.html.
Animuje se JEN transform a opacity — nic jiného. Přesně tohle byla
chyba staré scény, která problikávala: animovaný filter na obrázku
2200 px širokém.
Scéna je tmavá: popisky uvnitř nových desek jsou bílé. Starý komentář
u .sc-wipe--layers říkal opak, protože platil pro plochý obrázek
s černými popisky — ten už tu není. */
.sc-wipe--layers{--lay-fg:#fff;--lay-mut:rgba(255,255,255,.66)}
/* Sestava si bere ZBYLOU výšku scény a šířku si dopočítá z poměru —
jinak by při plné šířce (1068 px) vyšla na 825 px a vytekla 231 px
pod okno; scéna je přišpendlená, takže by to nešlo doscrollovat. */
.lay-desky{position:relative;flex:1 1 auto;min-height:0;height:100%;
width:auto;max-width:100%;aspect-ratio:2000/1545;margin:0 auto} /* skutečné plátno souborů, ověřeno */
/* Desky NAD popisky (14. 8.). Do té doby měl popisek z-index 4 a deska
nic, takže letící deska popiskem prosvítala a tiskla se přes něj —
Michaela: „popisky jdou přes ty vrstvy". Pravidlo 5 z PREDLOHA.md říká,
že přes produkt neleží nic. Otočeným pořadím deska popisek při náletu
zakryje, a to je hloubka, ne chyba. */
.lay-desky .lay-l{position:absolute;inset:0;width:100%;height:100%;z-index:2;
object-fit:contain;opacity:0;will-change:transform,opacity}
/* Štítky vrstev — vysázené v HTML, ne v obraze. Souřadnice z předlohy. */
.lay-tag{position:absolute;z-index:1;pointer-events:none;opacity:0;
transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease)}
.lay-tag b{display:block;font-family:var(--font-display);font-weight:700;
font-size:clamp(13px,1.15vw,17px);line-height:1.15;color:#fff}
.lay-tag i{display:block;font-style:normal;font-size:var(--fs-label);font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:3px}
.lay-tag.us b{color:var(--pink)}
.lay-tag.us i{color:rgba(251,84,148,.8)}
/* Popisek musí v klidu zůstat CELÝ vlevo od své desky — pod deskou by ho
deska zakryla. Hranice neprůhledné části desek jsou změřené z alfa
kanálu souborů (plátno 2000 × 1545):
deska 1 x 10,4–67,0 % deska 2 x 26,1–81,3 %
deska 3 x 36,2–84,2 % deska 4 x 45,0–93,2 %
Šířka popisku se proto omezuje na volný pruh vlevo od té které desky.
Text se nemění ani o znak, jen se zalomí na dva řádky; písmo zůstává.
Doměřeno v prohlížeči, ne odhadem — čísla jsou v hlášení. */
.lay-tag.t1{left:0%;top:64%;max-width:9.6%}
.lay-tag.t2{left:1.5%;top:44.5%;max-width:23.6%}
.lay-tag.t3{left:15%;top:30.2%;max-width:20.4%}
.lay-tag.t4{left:22%;top:13%;max-width:22.4%}
@media(max-width:860px){.lay-tag{display:none}}
/* Komu systém animace vypíná, ten vidí scénu rovnou složenou. */
@media(prefers-reduced-motion:reduce){
.lay-desky .lay-l{opacity:1 !important;transform:none !important}
.lay-tag{opacity:1 !important;transform:none !important;transition:none}
}
/* ═══════════ PRAVIDLO 2: SEKCE SE VEJDE NA OBRAZOVKU (14. 8.) ═══════════
PREDLOHA.md, pravidlo 2: „Nadpis a obsah musí být vidět zároveň."
Mělo se to hlídat od přenosu předlohy a nehlídalo — proto to Michaela
našla až na nasazeném náhledu. Doměřeno v prohlížeči, ne odhadem z CSS:
#configure h1 zasahoval 29 px pod fixní lištu hned po načtení
#why od horní hrany sekce ke spodní hraně první řady fotek
815 px, přičemž na obrazovku se vejde 813 px
#economics totéž 853 px
Kotvy vinu nenesou — sekce mají scroll-margin-top 84 px a ten funguje.
První sekce stránky ale žádnou kotvu nemá: začíná na y = 0, kde přes ni
fixní lišta leží. Odsazení #configure je proto o výšku lišty větší
(řeší se u samotného #configure, aby přebilo jeho vlastní odsazení).
Tady zůstává jen #why a #economics — a ubírá se v nich jen vzduch,
nikde ne obsah. Poměr ze systému platí dál: odsazení za švem je
o třetinu menší než před ním (60 / 90 místo 88 / 132).
Bloky musí být až tady na konci: #economics má odsazení hlavičky
a panelů nastavené na čtyřech místech výš v souboru, včetně jednoho
@media pro nízká okna, a ty by tenhle zápis jinak přebily.
Od teď to hlídá tools/kontrola-vzhled.py — vypíše tabulku sekce ·
naměřeno · práh · prošlo a spadne, když se to zase rozejde. */
/* 14. 8. podruhé: pravidlo 2 se od téhož dne měří i na okně 820 px
(displej 1440 × 900 minus lišta systému a chrom prohlížeče) — a tam obě
sekce propadly. #why o 36 px, #economics o 17. Ubírá se zase jen vzduch:
největší kus držel horní margin .op-lede, clamp(26px,4vw,44px), tedy
44 px vzduchu mezi perexem a řádkem o fotkách. */
#why,#economics{padding-block:32px 48px}
#why .sec-head{margin-bottom:8px}
#why .sec-head .h{margin-top:8px}
#why .op-lede{margin:8px 0 10px}
/* Řádek o fotkách stál na dvou řádcích jen proto, že .op-hint je blokový.
Na jednom řádku je to týž text (nic se nepřepisuje) a sekce zhubne
o výšku jednoho řádku. */
@media(min-width:901px){#why .op-hint{display:inline}}
#economics .sec-head{margin-bottom:12px}
#economics .sec-head .h{margin-top:8px}
#economics .sec-head .lead,#why .sec-head .lead{margin-top:.35em}
#economics .econ-in,#economics .econ-out{padding-block:clamp(12px,1.4vw,16px)}
/* ═══════════ BARVY VOZU U TECHNICKÝCH DAT (14. 8.) ═══════════════════
Při sloučení konfigurátoru se tečky barev zrušily, protože rozložený
podvozek je jeden díl v jedné barvě a lak dává smysl až na složené
fotce. Michaela rozhodla, že podvozek zůstává nahoře a barvy jdou sem.
Fotka i maska se přepínají tímtéž kódem jako dřív (stage() ve script.js),
jen visí na jiné sekci — nová mechanika nevznikla. */
/* #specs je nad 900 px dvousloupcová mřížka (tabulky vlevo, výkres
vpravo). Bez tohohle by fotka sedla do prvního sloupce, tabulky by
spadly do druhého a čtvrtá karta by přetekla o 73 px ven ze stránky —
přesně to kontrola vzhledu nahlásila. Fotka patří přes obě. */
.veh-paint{margin:0 0 clamp(22px,3.2vh,36px);text-align:center;grid-column:1/-1}
.veh-paint .veh-photo{max-width:min(620px,100%)}
.veh-paints{display:flex;justify-content:center;gap:14px;
margin-top:clamp(12px,1.8vh,18px)}
.veh-paint .veh-state{justify-content:center;margin-top:.6rem}
/* ═══════════ VĚJÍŘ JAKO TICHÝ MOTIV (14. 8.) ═════════════════════════
Michaela: „nemá to prolínat na celé stránce toho sales?" Paprsčitý
obrazec z homepage se tu opakuje v pozadí několika sekcí — pokaždé
jinak natočený a v jiném měřítku.
Jedna třída, jeden zdroj: paprsky nejsou obrázek ani pět kopií v CSS,
ale jeden repeating-conic-gradient. Natočení a měřítko si každá sekce
řekne proměnnou (--uhel, --mer) přímo v HTML, takže v souboru zůstává
jediné pravidlo.
Leží to na VLASTNÍM prvku uvnitř sekce, ne na pozadí sekce — a to
schválně: kdyby byl motiv pozadím sekce, kontrola vzhledu by u každého
textu v ní našla „obraz" místo barvy a přestala by měřit kontrast.
Takhle měří dál a motiv jí nic nezakryje.
Krytí 0,035, žádná animace, na mobilu se nezobrazuje (nemá tam kde
vyniknout) a v #configure není vůbec — přes produkt neleží nic,
to je pravidlo 5 z PREDLOHA.md.
Ke krytí: úplně nulový dopad na kontrast má jen motiv, který není
vidět. Změřeno na vykreslené stránce, pod skutečnými rámečky textu:
při 0,05 ubral nejvíc 2,21 : 1 (v #economics z 19,28 na 17,07),
při 0,035 je to 1,81 : 1. Práh je 4,5, takže je pořád desetinásobná
rezerva — ale číslo je to nenulové a patří sem napsané. */
/* U vodorovných hran motiv VYMIZÍ dřív, než hrana přijde. Bez toho běžely
paprsky až k okraji sekce a tam se usekly rovnou čarou — na švu tmavé
sekce a bílého #why byl ten řez vidět jako pravítko (Michaela 15. 8.). */
.paprsky{position:absolute;inset:0;z-index:0;overflow:hidden;
pointer-events:none;opacity:.035;color:var(--ink);
-webkit-mask-image:linear-gradient(180deg,
transparent 0%, #000 14%, #000 82%, transparent 100%);
mask-image:linear-gradient(180deg,
transparent 0%, #000 14%, #000 82%, transparent 100%)}
.paprsky::before{content:"";position:absolute;left:50%;top:124%;
width:var(--mer,150%);aspect-ratio:1;translate:-50% -50%;
rotate:var(--uhel,0deg);
background:repeating-conic-gradient(from 200deg at 50% 50%,
currentColor 0 .3deg, transparent .3deg 2.4deg);
-webkit-mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);
mask-image:radial-gradient(closest-side,#000 26%,transparent 76%)}
/* obsah sekce musí zůstat nad motivem */
.paprsky ~ .wrap{position:relative;z-index:1}
@media(max-width:900px){.paprsky{display:none}}
/* ═══════════ PRUH PRO PLOVOUCÍ PILULKU (14. 8.) ══════════════════════
Pilulka „Calculate savings" je od 14. 8. vidět až do konce stránky
(Michaela). Že nepřekrývá obsah, nedělá skript, ale místo: sekce na
konci stránky a patička mají vyhrazený pruh o výšku pilulky i s jejím
odstupem od spodní hrany.
Na širokých obrazovkách (nad 1800 px) žádný pruh potřeba není —
sloupec obsahu končí dřív než pilulka začíná a ta sedí ve volném
okraji. Pod tím se okraj ztenčí a pruh se zapne.
Třída .ma-pilulku je na jen na stránce, která pilulku má;
sales.html tím zůstává nedotčená. */
@media(max-width:1799px){
html.ma-pilulku #pilot{padding-bottom:calc(128px + 78px)}
/* Nahoře taky: když se kotvou doskočí na závěrečnou sekci, vykoukne
patička spodní hranou a pilulka ležela přes její nadpisy sloupců
(„Contact", „Media enquiries") — změřeno na 1440 px. */
html.ma-pilulku .footer{padding-top:calc(clamp(56px,7vw,96px) + 78px);
padding-bottom:96px}
}
@media(max-width:620px){
html.ma-pilulku #pilot{padding-bottom:calc(72px + 78px)}
html.ma-pilulku .footer{padding-bottom:88px}
}
/* Tečky barev v konfigurátoru leží na uhlové ploše, takže tmavý obrys
vybrané tečky by na ní zanikl — na tmavém povrchu je bílý. */
[data-surface="coal"] .dot2{border-color:rgba(255,255,255,.22)}
[data-surface="coal"] .dot2[aria-pressed=true]{outline-color:#fff}
/* ═══════════ NÍZKÉ OKNO: PRAVIDLO 2 PLATÍ I TAM (14. 8.) ═════════════
Pravidlo 2 se od 14. 8. měří ve třech výškách okna — 900, 800 a 720 px
— protože Michaela má okno nižší než kontrola a viděla u #why uříznutý
nadpis a druhou řadu fotek pod spodní hranou, zatímco kontrola hlásila
zeleno. Při 720 px zbývá pod lištou 633 px a dvě sekce se do toho
nevešly: #why o 91 px a #configure o 53.
Nejdřív jde vzduch, teprve pak obraz — a jen na nízkém okně, na velkém
se nemění nic:
· #why odsazení sekce 32/48 → 20/30, mezery v hlavičce dolů
a první řada fotek z poměru 3:2 na 16:9. Fotky se tím ořezávají,
ne mažou, a je jich pořád šest.
· #configure scéna z 620 px na 520 — vůz je dominanta a nezmenšuje
se rád, ale na 720px okně nemá kam se vejít jinak. Nad 760 px
výšky okna zůstává v původní velikosti. */
/* #why se ubírá dřív — při 800 px mu do prahu zbývaly 3 px, což je
v mezích toho, jak se liší vykreslení písma. Od 860 px výšky okna dolů
je proto sekce sevřenější; vůz v #configure až od 760, tam je rezerva
větší a zmenšovat dominantu dřív, než je nutné, nemá smysl. */
@media(min-width:901px) and (max-height:860px){
#why{padding-block:20px 30px}
#why .sec-head{margin-bottom:4px}
#why .sec-head .h{margin-top:4px}
#why .op-lede{margin:4px 0 6px}
#why .opgrid{gap:10px}
#why .opgrid .op--wide{aspect-ratio:1.85}
}
@media(min-width:901px) and (max-height:760px){
.sys{width:min(500px,58%)}
}
/* Na uhlové ploše musí být motiv světlý, jinak tam po něm není ani stopa —
currentColor je jinak --ink. Krytí zůstává stejné. */
[data-surface="coal"] .paprsky{color:#fff}
/* Tečka laku na světlém povrchu potřebuje obrys, jinak bílá zmizí:
--line je rgba(0,0,0,.08) a bílá tečka na bílé ploše se v něm ztratí.
Kroužek je proto z téhož tokenu, ale plný — ne nová barva, jen bez
průhlednosti. */
.dot2{border-color:rgba(0,0,0,.22)}
.dot2[aria-pressed=true]{outline-color:var(--ink)}