sám nevykreslí jen tehdy, když mu do
toho nesaháme — jenže `position:absolute` obsah ze slotu vytáhne
a on se pak vysází i zavřený (naměřeno display:block a výška 163 px
bez atributu `open`). Zavírá se proto týmž mechanismem, jaký na to
používá prohlížeč: display:none. Není to krytí ani viditelnost, takže
panel zůstává zavřený i pro klávesnici a pro čtečku. */
.hs-zdroj:not([open]) > .hs-zdroj-in{display:none}
.hs-zdroj[open] > .hs-zdroj-in{
position:absolute;top:calc(100% + 6px);left:0;z-index:12;
min-width:190px;max-width:min(300px,70vw);
padding:10px 12px;border-radius:var(--r-sm,10px);
background:var(--hs-bg,#1F2226);
border:1px solid var(--hs-line,rgba(255,255,255,.18));
box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hs-zdroj-in a{display:block;color:var(--hs-fg,#fff);
font-family:var(--font-text);font-size:13px;line-height:1.35;
text-decoration:underline;text-underline-offset:2px}
/* U pravého kraje se panel zarovná doprava, ať nevyteče z okna.
Kartičky firem stojí v mřížce, takže „poslední ve své řadě" je
spolehlivější než měření v pixelech. */
.hs-firm:last-child .hs-zdroj[open] > .hs-zdroj-in,
.hs-col:last-child .hs-zdroj[open] > .hs-zdroj-in{left:auto;right:0}
/* Odkazy ve vysunutém panelu se zdroji měly na telefonu dotykový cíl
164 × 18 px, tedy pod normou 24. Řeší to výplň, ne větší písmo —
text zdroje má zůstat drobný, klikací plocha ne. */
.hs-zdroj-in a{display:flex;align-items:center;min-height:24px;
padding-block:3px}
/* ═══ „NOTHING NEW" — PATENT MEZI FILMEM A VRSTVAMI (28. 8.) ═════════
Chová se přesně jako #onelayer: na počítači je to fáze přišpendlené
scény, krytí jí dává script.js (prahy P0/P1 a G0/G1), na telefonu je
z ní běžný blok ve sloupci. Rozvržení textu si bere z pravidel pro
.vrstva-radek výš, přidává se jen obrázek a řádka s patenty. */
@media (min-width:701px){
/* Vrstva 7, ne 4 jako #onelayer: patent přichází AŽ ZA filmem, a ten
má z-index 6 — při čtyřce by video patent překreslilo. Sedmička je
nad videem i nad jeho popiskem a pod historií (8); vrstvy mají
také 7 a stojí v dokumentu za patentem, takže ho správně vystřídají. */
/* 29. 8.: SEKCE ZAČÍNÁ POD LIŠTOU, NE POD NÍ SCHOVANÁ. Obsah je
s obrázkem 685 px vysoký a scéna se středila svisle, takže první
řádek („PROVEN TECHNOLOGIES. NEW ARCHITECTURE.") vycházel na y = 74,
zatímco lišta končí na 79 — eyebrow se schoval pod ni.
Středění se proto ruší a blok se opírá o horní hranu s odsazením
na lištu a vzduch pod ní. Sourozenci #onelayer a #zaver mají nad
textem 210 a 231 px, tolik se sem s obrázkem nevejde — proto
odsazení, které dá vzduch a přitom se celý blok vejde do obrazovky. */
.hero > #patent{
position:absolute;inset:0;z-index:7;
padding-top:clamp(120px,18vh,170px);
margin:0;min-height:0;
/* flex-start, ne center: se středěním se obsah vyšší než rám rozlil
na obě strany a eyebrow vylezl nad odsazení, tedy pod lištu. */
display:flex;align-items:flex-start;
opacity:0;visibility:hidden;
will-change:opacity,transform}
}
@media(max-width:700px){
.hero > #patent{order:6;position:static;inset:auto;
opacity:1;visibility:visible;min-height:auto;
padding-block:clamp(48px,8vh,80px)}
/* film a jeho text jdou o jedno níž, patent se vsune mezi ně a vrstvy */
.hero > .hp-vid{order:5}
.hero > .liveop-in{order:5}
.hero > #scLayers{order:7}
.hero > #scHist{order:8}
}
#patent .eyebrow{display:block;margin:0 0 clamp(10px,1.6vh,18px)}
/* Nadpis má tentýž stupeň jako #onelayer a #zaver — 46 px z minulé dávky
byl přesně ten „jiný text", kterého si Michaela všimla. Druhá věta se
na jeden řádek nevejde a lámat se bude; to je v pořádku, rodina je
důležitější než počet řádků. */
#patent .vr-h{font-size:clamp(27px,4.4vw,63px)}
#patent .vr-p{max-width:44ch}
/* Obrázek vyplní sloupec celý (1068 px místo 760) — tím zmizí prázdno
vpravo od něj, kvůli kterému se sekce středila. */
/* Odstupy uvnitř bloku jsou stažené, aby se s odsazením na lištu vešel
celý obsah do jedné obrazovky — naměřeno 685 px obsahu v 833px rámu. */
#patent .eyebrow{margin-bottom:clamp(8px,1.2vh,12px)}
#patent .vr-p{margin-top:clamp(12px,1.8vh,18px)}
#patent img{
display:block;width:100%;height:auto;max-width:100%;
margin:clamp(14px,2.2vh,24px) 0 clamp(10px,1.4vh,14px)}
/* Patentová čísla jsou ÚDAJ, ne ozdoba: drobná, ale plnou barvou textu,
ať se dají přečíst i opsat. Kvůli tomu se také nesázejí do obrázku. */
.pat-cisla{
margin:0;font-family:var(--font-text);
font-size:clamp(13px,1.05vw,15px);line-height:1.4;
letter-spacing:.02em;color:var(--ink)}
/* ═══ ZÁVĚREČNÁ VÝZVA NA KONCI STRÁNKY (28. 8.) ══════════════════════
Běžná sekce za přišpendlenou scénou, ne její fáze — proto tu nejsou
žádná pravidla o absolutním umístění ani o krytí. Rozvržení, sloupec
i velikosti nadpisu dědí z .vrstva-radek, stejně jako #onelayer.
Přidává se jen tlačítko a jeho odstup; eyebrow bere tentýž odstup
jako v sekci s patentem. */
#zaver .eyebrow{display:block;margin:0 0 clamp(10px,1.6vh,18px)}
/* „So are we." je růžově, jako to má Radek na tabuli i jako to měla
poslední kapitola historie, ze které se věta přestěhovala. Na světlém
podkladu platí --pink-ink — druhá ze dvou značkových růžových. */
#zaver .vr-h .accent{color:var(--pink-ink,#FB5494)}
#zaver .vr-p{max-width:42ch}
/* Řádek nad tlačítkem (29. 8. odpoledne). Nadpisem i větou je teď
Radkovo tvrzení „The result"; naše dosavadní věta se neztratila,
sjela sem — je to pokyn, co se stane po kliknutí, ne tvrzení, tak
stojí u tlačítka a menším písmem než lead. */
#zaver .vr-pobidka{margin:clamp(16px,2.4vh,26px) 0 0;max-width:42ch;
font-family:var(--font-text);font-size:clamp(14px,1.1vw,16px);
line-height:1.5;color:var(--muted,#52525A)}
#zaver .btn{margin-top:clamp(14px,2vh,20px)}
/* Na telefonu se závěr přestane roztahovat na celou obrazovku. Sekce má
min-height jedné obrazovky a obsah svisle na střed — na 390 × 844 měl
obsah 394 px ze 772, takže nad ním zbylo 189 px prázdna a spolu
s doběhem historie z toho byla mezera 269 px mezi poslední kapitolou
a prvním textem závěru. Na počítači je ta celoobrazovková plocha
v pořádku (obsah ji vyplní), na telefonu je to díra. */
@media(max-width:700px){
#zaver{min-height:0}
}
/* Šipka v tlačítku je táž jako u ostatních výzev na webu. */
#zaver .btn svg{width:1em;height:1em;flex:none}
/* ═══ ČÍSLA U VĚJÍŘE: ROVNÁ DĚLICÍ ČÁRA (28. 8.) ═════════════════════
Michaela: „u těch čísel je nějaký rámeček, vidíš to?" Není to rámeček,
je to zaoblená svorka „(" — a vznikla tím, že se dvě pravidla
ve styles.css o sobě nevědí:
.fst má border, border-radius 16 px a stín
.sc-fan .fst vypíná border i stín, ale NE border-radius
.sc-fan .fst + .fst vrací jedinou čáru vlevo
Ta jediná čára se pak vykreslí s šestnácti pixely kolen na obou
koncích, tedy jako svorka místo vlasové svislice. Komentář v HTML
u té řádky přitom sám říká „dělí je vlasová svislá linka, ne rámečky
ani karty" — stránka si to předepsala a nedodržela.
Dělicí čára ZŮSTÁVÁ, jen se narovná. Rámeček ani stín se nevracejí. */
.sc-fan .fst{border-radius:0}
/* ═══ PATENT NA STŘED (28. 8.) ═══════════════════════════════════════
Michaela: „ten patent by měl být uprostřed podle mě." Obal `.wrap`
vystředěný byl, ale obsah v něm stál vlevo: obrázek 201–961 při středu
okna 735, tedy o 154 px vedle, popisek s čísly dokonce o 255 px.
Sekce #onelayer o dvě obrazovky výš přitom vystředěná je a obě nesou
tutéž třídu .vrstva-radek — mají vypadat jako jedna rodina.
Středí se celý blok, ne jednotlivosti: eyebrow, nadpis, lead, obrázek
i řádka s patenty. Rytmus stránky se nemění, jen zarovnání. */
/* 28. 8. VEČER: STŘEDĚNÍ SE RUŠÍ. Bylo to moje řešení Michaelina
„patent má být uprostřed" a bylo špatné — obal dostal text-align:center,
ale nadpis i lead si nesly vlastní text-align:left, takže nic nestálo
ani vlevo jako zbytek webu, ani doopravdy na středu: nadpis měl střed
na 648, lead na 700, okno na 735. Michaela to viděla znovu: „přijde mi
jiné ten text od toho, co máme na webu normálně."
Patent se proto vrací DO RODINY: jeden levý okraj se sekcemi #onelayer
a #zaver. Důvod, proč se to původně středilo — 308 px prázdna vpravo
od obrázku — mizí sám tím, že obrázek vyplní celý sloupec. */
#patent .vr-in{text-align:left}
/* ═══ HISTORIE PODLE RADKOVY TABULE (28. 8.) ═════════════════════════
Podklad je fotka flipchartu IMG_2182.JPG. Když se tabule a nahrávka
rozejdou, platí tabule — Radek na ní kreslil ROZLOŽENÍ, ne jen slova.
1 · TŘI MÍSTA V ŘADĚ. Na tabuli má éra 1897–1972 tři boxy vedle sebe
(NY, Barcelona, Mercedes). Karty stojí ve stejném slotu a ve stejné
mřížce jako kartičky firem o kapitolu níž, aby historie držela jeden
tvar a nevypadala jako dvě různé sekce. */
/* Řada míst patří POD text, přes celou šířku kapitoly — ne do úzkého
pravého sloupce. Kapitola je dvousloupcová mřížka a `.hs-art` v ní
sedí vpravo; než se tohle dopsalo, dostala tři místa 232 px na všechna
dohromady (61 px na kartu) a nadpis vedle nich spadl na čtyři řádky.
Naměřeno na 1470 × 833. */
/* Mezera mezi textem a řadou: mřížka kapitoly má 50 px, a to je při
pevné výšce desky (456 px) o 18 px víc, než se sem vejde. Dvacet
stačí — řada má nad sebou ještě vlastní odsazení. */
.sc-wipe--hist .hs-chap:has(.hs-mista){grid-template-columns:1fr;row-gap:20px}
/* Řada se vrací i z odsazení, které si kapitola drží pro archivní snímek
u roku 1919 (`--k01-odsun`, 465 px na 1470). Snímek visí u HORNÍ hrany
kapitoly, kdežto řada sedí dole, takže si nemají jak přijít do cesty —
a karty tím dostanou 330 px místo 185 a věta se vejde na dva řádky
místo čtyř. Bez toho řada přetékala desku o 76 px. */
.sc-wipe--hist .hs-chap .hs-mista{grid-column:1/-1;align-self:end;
margin-left:calc(var(--k01-odsun, 0px) * -1);
width:calc(100% + var(--k01-odsun, 0px))}
.hs-mista{display:grid;gap:clamp(14px,1.6vw,26px);
grid-template-columns:repeat(3,minmax(0,1fr));
/* Odsazení i vnitřek karty jsou stažené na míru: s původními hodnotami
přetékala řada desku o 37 px, a výška desky se měnit nesmí. */
margin-top:clamp(8px,1.4vh,16px)}
@media (max-width:700px){ .hs-mista{grid-template-columns:1fr;gap:14px} }
.hs-misto{display:flex;flex-direction:column;gap:2px;
padding-top:7px;border-top:1px solid var(--hs-line,rgba(255,255,255,.18))}
/* Rok je údaj, tedy displejové písmo — stejně jako letopočty na ose. */
.hs-misto-rok{font-family:var(--font-display);font-size:19px;line-height:1.1;
color:var(--hs-fg,#fff)}
.hs-misto-kde{font-family:var(--font-text);font-size:13px;letter-spacing:.12em;
text-transform:uppercase;color:var(--hs-mut,rgba(255,255,255,.74))}
.hs-misto-veta{margin:1px 0 0;font-family:var(--font-text);
font-size:14px;line-height:1.35;color:var(--hs-mut,rgba(255,255,255,.74))}
/* 2 · RÁMUJÍCÍ KAPITOLY: ROK JEN JEDNOU A TEXT NA STŘED.
`.hs-chap::before` vypisuje data-era, a nad scénou totéž slovo vypisuje
velký letopočet #hsRok — na kapitole „today" tak stálo „today" dvakrát
pod sebou, jednou velké, jednou malé. Na rámujících kapitolách proto
::before mlčí; u ostatních zůstává, tam se rok nad scénou neopakuje.
A protože je deska u všech pěti kapitol stejně vysoká (drží ji ta
nejvyšší, s kartami firem), zbývalo pod textem rámujících kapitol
309 a 268 px prázdna. Text se proto středí svisle. Výška desky se
nemění — poskakující deska by byla horší vada než prázdno. */
.hs-chap--stripe::before{content:none}
/* Specifičnost musí přebít `.sc-wipe--hist .hs-chap{align-items:stretch}`
o kus výš v tomhle souboru — se samotnou `.hs-chap--stripe` vyšlo
align-items na `stretch`, `.hs-copy` se natáhla na celou výšku desky
a text v ní zůstal nahoře (naměřeno nad 62 / pod 0). */
.sc-wipe--hist .hs-chap--stripe{display:flex;align-items:center;
justify-content:flex-start}
/* Dvě věci držely text nahoře, obě naměřené na vykreslené stránce:
1. kapitola má padding-top 62 px a padding-bottom 0 — samo o sobě
to udělá 62 px nerovnosti, i kdyby se obsah středil dokonale;
2. `.hs-copy` dostávala align-self:stretch (o kus výš v tomhle
souboru), takže se natáhla přes celou desku a text zůstal na
jejím horním okraji.
Rámující kapitola nic z toho nepotřebuje: nemá letopočet, pro který
se to odsazení dělalo (::before je u ní vypnuté), ani kartičky, kvůli
kterým se `.hs-copy` roztahuje. */
.sc-wipe--hist .hs-chap--stripe{padding-top:0;padding-bottom:0}
.sc-wipe--hist .hs-chap--stripe > .hs-copy{align-self:center;width:100%;
padding-top:0}
/* Na závěrečném rámečku je `.hs-copy` počítaná jako display:contents
(pravidlo `:not(:has(.hs-art))` o kus výš), takže flexovou položkou
není ona, ale sám nadpis — středit se proto musí ON. `margin-block:auto`
je tu schválně vedle `align-self`: v flexboxu rozdělí volné místo
nad a pod rovným dílem i tam, kde `align-self` přebije něco jiného. */
/* Specifičnost musí přebít `.sc-wipe--hist .hs-chap:not(:has(.hs-art))
.hs-copy .h{align-self:start}` o kus výš — to je pět tříd, tohle šest.
Naměřeno: bez toho zůstal nadpis na align-self:start a seděl na horní
hraně desky (nad 0 / pod 371). */
.sc-wipe--hist .hs-chap.hs-chap--stripe:not(:has(.hs-art)) .hs-copy .h,
.sc-wipe--hist .hs-chap.hs-chap--stripe .hs-copy .h,
.sc-wipe--hist .hs-chap.hs-chap--stripe .h{align-self:center;margin-block:auto}
/* Rámující kapitola má vlastní BÍLÉ pozadí (`.hs-chap--stripe{background:#fff}`),
ale odstavec v ní dědil `--hs-mut`, tedy bílou se 74 % krytí — bílá na
bílé, kontrast 1 : 1. Nadpis to nepotkalo, ten má `--ink` napevno.
Druhý řádek proto dostává tutéž tmavou rodinu, jen tlumenější.
Naměřeno na vykreslené stránce, ne odhadem z CSS. */
.sc-wipe--hist .hs-chap--stripe .lead{color:var(--hs-mut,var(--muted,#52525A));
max-width:52ch;margin-top:clamp(12px,1.8vh,22px)}
/* ═══ VRSTVY: SEKCE SE S NAŠÍ VRSTVOU ROZSVÍTÍ (28. 8.) ══════════════
Michaela: „když přijde naše vrstva, tak se musí u vrstvy 3 všechny auta
dát na růžovou a pozadí se té celé sekce se udělat bílé."
Pozadí i barvu textu dosazuje script.js do proměnných níž, a to
plynule s příletem naší desky. Text se překlápí natvrdo v bodě, kde
jsou bílá i černá stejně čitelné — prolnutí by prošlo střední šedou,
na které nečte ani jedna.
POPISKY UVNITŘ DESEK SE NEMĚNÍ: jsou bílé a mají svůj vlastní tmavý
podklad v obrázku. Mění se jen text scény kolem nich. */
.sc-wipe--layers{background:var(--lay-bg,var(--coal,#131418))}
.sc-wipe--layers .h,
.sc-wipe--layers .lead,
.sc-wipe--layers .eyebrow{color:var(--lay-fg,#fff)}
.sc-wipe--layers .lead{color:var(--lay-mut,rgba(255,255,255,.74))}
/* ŠTÍTKY VRSTEV JSOU VŽDY BÍLÉ. Komentář, který tu stál do 4. 9., tvrdil
opak — že barvu berou podle scény, ne podle desky pod sebou — a právě
ten byl ta chyba. `--lay-fg` počítá script.js z pozadí SCÉNY: jakmile
se scéna rozsvítí do bílé, překlopí se text na #0E0E10. Jenže štítky
neleží na scéně, leží na DESKÁCH, a ty jsou černé: medián jasu 0,000
u všech čtyř. Tmavý text na nich má kontrast 1,09 : 1 proti normě 4,5
— to není málo kontrastní, to je neviditelné, a přesně to Michaela
třikrát hlásila jako „černé na černém".
Bílá má na téže desce 21 : 1, takže se nemá o čem rozhodovat. */
.sc-wipe--layers .lay-tag{
color:#FFFFFF;
/* Bílý text sám o sobě nestačí. Zadání počítalo s tím, že štítky leží
na deskách (medián jasu 0,000), a tam bílá platí — jenže naměřeno
na vykreslené stránce na 1440 i 1920 leží štítky VEDLE kresby, na
bílém pozadí scény, a tam by bílý text zmizel úplně stejně jako
předtím mizel tmavý na deskách. Proto si štítek nese vlastní
podklad: pak platí obě polohy a nezáleží na tom, co je pod ním. */
/* Podklad je NEPRŮHLEDNÝ. Při krytí 0,72 prosvítalo bílé pozadí scény
natolik, že naše růžová #FB5494 měla na štítku jen 2,8 : 1; při 0,9
to bylo 5,4, ale jen v ustáleném stavu — během nájezdu štítku číslo
kolísalo. Na plné barvě platí pořád: bílá 19 : 1, růžová 7,4 : 1,
ať je pod štítkem cokoliv. */
background:#0A0B0E;
border-radius:8px;
padding:6px 10px;
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px)}
.sc-wipe--layers .lay-tag b{color:#FFFFFF}
.sc-wipe--layers .lay-tag i{color:rgba(255,255,255,.72)}
/* Náš štítek: tučný název bere dopočítanou růžovou, drobné „Layer 2“
pod ním ne. Je 13 px a na světlém podkladu růžová pod 24 px nestačí
ani v tmavší variantě (design systém) — naměřeno 3,09 : 1 proti
normě 4,5. Bere proto tlumenou barvu textu jako ostatní popisky.
Růžová v NAŠEM štítku brala dopočet proti pozadí scény, tedy ze
stejného důvodu špatně. Na desce s jasem 0,000 má značková #FB5494
kontrast 7,4 : 1, takže tam smí stát napevno. */
.sc-wipe--layers .lay-tag.us b{color:#FB5494}
.sc-wipe--layers .lay-tag.us i{color:rgba(255,255,255,.72)}
/* Růžová ve zvýrazněném slově se dopočítává v script.js na kontrast —
pevná hodnota by uprostřed překlopení ležela na střední šedi, kde
nesplní ani značková, ani tmavší varianta. */
.sc-wipe--layers .h .accent{color:var(--lay-pink,var(--pink))}
/* ═══ ČASOVÁ OSA JDE PRYČ (28. 8.) ═══════════════════════════════════
Michaela: „zda tu časovou osu nevymazat úplně a nechat jen roky, tak
jak to má radek v tom obrázku." Na Radkově tabuli žádná osa nakreslená
není — jsou tam jen popisky ér.
Odchází celý pruh `.hs-scrub`, tedy dráha, výplň, puntík, mezníky,
stopy, pásy, zastávky i popisky stupnice. ZŮSTÁVÁ velký letopočet
#hsRok („nechat jen roky"), popisek éry nad kapitolou, počitadlo
01 / 05 a řádek značky nahoře — ty leží mimo tenhle pruh.
Prvky se nemažou z HTML: script.js z nich dál počítá polohy a
z těch se bere, kde která éra na dráze leží. Jen se nekreslí. */
.sc-wipe--hist .hs-scrub{display:none}
/* Karty se při rolování jedna po druhé mírně zvětší — „trošku zvětší
new york, pak při dalším scrollování barcelona atd." Měřítko dává
script.js, tady je jen střed otáčení a plynulost. Zvětšuje se
transformem, takže se sousedům nic neposune. */
.hs-misto,.hs-firm,.hs-col{transform-origin:50% 50%;will-change:transform}
/* Čtyři firmy VEDLE SEBE — na tabuli má řada ② čtyři boxy v jedné řadě.
Mřížka měla tři sloupce, takže čtvrtá karta spadla pod ně a přetekla
desku. Na telefonu zůstává sloupec, tam se čtyři karty vedle sebe
nevejdou. */
@media (min-width:901px){
.sc-wipe--hist .hs-chap--tmava .hs-art--firms{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Se čtyřmi kartami v řadě je karta užší a text v ní tedy vyšší —
naměřeno 506 px proti desce 492, tedy přetečení o 52 px dolů.
Stahuje se vnitřek karet, ne jejich obsah: žádné číslo ani řádek
nemizí, jen se sesedají těsněji. Výška desky se nemění. */
@media (min-width:901px){
.sc-wipe--hist .hs-chap--tmava .hs-art--firms{gap:clamp(10px,1.1vw,18px)}
/* Karta je svislý flex a mezi pěti položkami měla 20 px mezer, tedy
80 px jen na mezerách — to je hlavní důvod, proč se čtvrtá karta
nevešla. Osm pixelů stačí a nic z obsahu nemizí. */
.sc-wipe--hist .hs-chap--tmava .hs-firm{padding:14px 14px 12px;gap:8px}
.sc-wipe--hist .hs-chap--tmava .hs-firm .hs-raise{margin-top:6px}
.sc-wipe--hist .hs-chap--tmava .hs-firm .hs-note{margin-top:8px;line-height:1.35}
.sc-wipe--hist .hs-chap--tmava .hs-firm .hs-facts{margin-top:8px}
.sc-wipe--hist .hs-chap--tmava .hs-firm .hs-facts li{margin-top:4px;line-height:1.3}
.sc-wipe--hist .hs-chap--tmava .hs-firm .hs-dead{margin-top:10px}
}
/* ═══ RÁMUJÍCÍ SNÍMEK: TEXT NA OKRAJI RODINY (28. 8. večer) ══════════
Odsazení `--k01-odsun` dělá v kapitole místo pro archivní snímek
u roku 1919. Pravidlo ale míří na `[data-era^="1897"]`, což sedí
i na RÁMUJÍCÍ kapitolu „1897" — a ta žádný snímek nemá. Text jí tím
utekl na x = 389 místo 201, tedy pryč od okraje, na kterém stojí
#onelayer, patent i závěr. Michaela: „to rozložení v první historii
je špatné." */
@media (min-width:901px){
.sc-wipe--hist .hs-chap--stripe[data-era^="1897"]{padding-left:0}
.sc-wipe--hist .hs-chap--stripe[data-era^="1897"]::before{left:0}
}
/* ═══ JEDEN ZÁPIS DISPLEJOVÉHO PÍSMA (28. 8. večer) ══════════════════
Michaela: „mám pocit, že máš někde špatné písmo." Cizí písmo na
stránce není — vykresluje se jen Panchang a Inter. Zápisy toho
displejového ale byly tři, a jeden z nich vadný:
Panchang, PanchangVariable, Georgia, serif 22 prvků
Panchang, system-ui, sans-serif 11 prvků
Panchang, system-ui, sans-serif, Georgia, serif 1 prvek ← velký rok
Ten třetí je nesmysl: `sans-serif` je generická rodina a všechno za
ní už nikdy neplatí, takže „Georgia, serif" na konci je mrtvý zápis.
Praktický důsledek: kdyby se Panchang jednou nenačetl, spadla by
jedna část stránky na systémový bezpatkový a druhá na Georgii — a
přesně tak vzniká dojem, že je někde jiné písmo.
Jeden zápis pro celou stránku, i pro velký rok. */
:root{--font-display:Panchang,PanchangVariable,Georgia,serif}
.hs-rok,.sc-wipe--hist .hs-rok{font-family:var(--font-display)}
/* ═══ TMAVÁ KAPITOLA SI DRŽÍ SVĚTLÝ TEXT ════════════════════════════
Kapitola „2000 — 2026" má vlastní tmavý panel a nezávisí na tom, jakou
barvu má scéna kolem. Od chvíle, kdy se scéna na rámujícím snímku
překlápí do bílé, se ale --hs-fg mění na tmavou pro celou scénu — a
text téhle kapitoly, který si ho bere, byl tmavý na tmavém panelu.
Naměřeno kontrolou vzhledu: 1,21 : 1 u nadpisu „Then billions chased
scale." a 1 : 1 u údajů v kartách.
Panel je tmavý vždycky, tak je tu i text vždycky světlý. */
.sc-wipe--hist .hs-chap--tmava .h,
.sc-wipe--hist .hs-chap--tmava .lead,
.sc-wipe--hist .hs-chap--tmava .eyebrow,
.sc-wipe--hist .hs-chap--tmava .hs-firm,
.sc-wipe--hist .hs-chap--tmava .hs-logo--slot b,
.sc-wipe--hist .hs-chap--tmava .hs-raise,
.sc-wipe--hist .hs-chap--tmava .hs-zdroj summary span{color:#fff}
.sc-wipe--hist .hs-chap--tmava .hs-yr,
.sc-wipe--hist .hs-chap--tmava .hs-note,
.sc-wipe--hist .hs-chap--tmava .hs-facts,
.sc-wipe--hist .hs-chap--tmava .hs-facts i,
.sc-wipe--hist .hs-chap--tmava .hs-dead{color:rgba(255,255,255,.74)}
.sc-wipe--hist .hs-chap--tmava .hs-facts li,
.sc-wipe--hist .hs-chap--tmava .hs-facts li i{color:rgba(255,255,255,.74)}
.sc-wipe--hist .hs-chap--tmava .hs-facts li b{color:#fff}
/* Hlavička scény — značka, „scroll to move through time" a počitadlo —
měla barvu napevno, takže na bílém rámujícím snímku zmizela
(naměřeno 1 : 1). Bere teď barvu scény jako všechno ostatní. */
.sc-wipe--hist .hs-hint,
.sc-wipe--hist .hs-brand,
.sc-wipe--hist .hs-count{color:var(--hs-mut,rgba(255,255,255,.74))}
.sc-wipe--hist .hs-count b{color:var(--hs-fg,#fff)}
/* ═══ RANNÍ DÁVKA 29. 8. ═════════════════════════════════════════════
„Better Place" přetékalo přes pravou hranu své karty a naráželo do
„Ample" vedle. Se čtyřmi kartami v řadě je karta 135 px široká a
jméno na jeden řádek nevejde — `white-space:nowrap` mu to zakazovalo.
Zalomí se tedy; velikost ani znění se nemění. */
.sc-wipe--hist .hs-chap--tmava .hs-logo--slot b{
white-space:normal;overflow-wrap:anywhere;line-height:1.2}
/* Hvězdička u místa sedí pod jeho větou, uvnitř karty — stejně jako
u firem. Panel se rozbaluje pod ní a je zarovnaný k jejímu levému
okraji, ne přes sousední kartu. */
/* Hvězdička stojí NA KONCI věty, ne pod ní. Jako sourozenec spadla
na vlastní řádek a visela sama pod textem — na telefonu z toho byly
tři osamocené hvězdičky pod třemi kartami. Uvnitř odstavce se chová
jako slovo: sedí za tečkou a panel se rozbaluje pod ní. */
.hs-misto .hs-zdroj{display:inline-block;vertical-align:baseline;margin:0 0 0 .35em}
.hs-misto .hs-zdroj-in{min-width:min(280px,72vw)}
/* Bílá plocha překlopení. Leží NAD podkladem scény a POD kapitolami,
takže překryje uhlovou plochu, ale ne text ani karty.
29. 8. odpoledne: PŘELIV UŽ NENÍ ŘEZ. Do teď to dělal
`clip-path:circle()`, a ten řeže natvrdo — vznikl holý bílý kotouč
s nožovou hranou uprostřed obrazovky, který k ničemu na stránce
nepatřil. Michaela: „a tento přechod je teď jiný než ty předtím."
Teď je to radiální maska: uvnitř bílá, na kraji přechod do průhledna
přes 80 px, takže hrana je světelná, ne nožová. Masku i její střed
dosazuje script.js — bere tentýž střed jako bloomDraw(), aby dvě
předávky po sobě nebyly na pixel stejné. */
.sc-wipe--hist .hs-bila{
position:absolute;inset:0;z-index:0;
background:#fff;pointer-events:none;opacity:0;
-webkit-mask-image:none;mask-image:none}
/* ═══ VÍTĚZOVÉ NESOU CELOU OBRAZOVKU (29. 8.) ════════════════════════
Michaela: „ty winners jsou na mě moc malé, chce to nějak jinak
zakomponovat." Naměřeno: vítěz měl 232 × 248 px, tedy 57 536 px² —
MÉNĚ než karta ve čtyřkartové řadě, ze které měl vyrůst (58 480).
A oba seděli v pravé polovině sloupce.
Teď zabírají sloupec celý, dva vedle sebe, a jsou to ty největší
karty v celé historii. */
@media (min-width:901px){
/* Kapitola je dvousloupcová mřížka a karty seděly v jejím pravém
sloupci — 780…1269, tedy 489 px na oba vítěze dohromady. Řada proto
jde přes celou šířku kapitoly, pod text, stejně jako řada míst
v kapitole o principu. */
/* 29. 8. odpoledne: KAPITOLA SE MUSÍ VEJÍT DO OKNA. Po zvětšení
karet sahaly na 1470 × 833 až na 913 px, tedy 80 px pod spodní
hranu. Karty jsou dominanta a nezmenšují se — ubírá se NAD nimi,
kde ležely dvě stejná odsazení pod sebou: jedno na článku (dělá
místo letopočtu ery, který na něm visí absolutně) a druhé ještě
jednou na .hs-copy, kde už je to čirý vzduch, protože popisek
eyebrow je v historii schovaný. Kapitola s třemi firmami má tohle
druhé odsazení vynulované odjakživa; vítězové ho dostávají taky. */
.sc-wipe--hist .hs-chap--leaders{grid-template-columns:1fr;
row-gap:clamp(8px,1.4vh,16px);
padding-top:calc(var(--fs-h2) + clamp(2px,.6vh,10px))}
.sc-wipe--hist .hs-chap--leaders .hs-copy{padding-top:0}
.sc-wipe--hist .hs-chap--leaders .lead{margin-top:clamp(8px,1.2vh,14px)}
/* 29. 8. odpoledne: VÍTĚZ JE VĚTŠÍ. Naměřeno na 1470 × 833: karta NIO
měla 534 × 331, naše 516 × 320 — poražený měl o 7 % větší plochu než
vítěz. Sloupce byly proto chvíli nestejné — naše 1,16 dílu proti
jednomu.
29. 8. večer to Michaela upřesnila: vítězové jsou OBA, jen každý
ve své kategorii — BattSwap pro commercial, NIO pro passenger.
Karty jsou proto stejně velké a na jedné lince dna; jediný rozdíl
je naše růžová v číslech a v lince pod značkou. */
.sc-wipe--hist .hs-chap--leaders .hs-two{
grid-column:1/-1;align-self:end;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:stretch;
gap:clamp(20px,2.4vw,40px);width:100%}
/* Karty musí mít společnou linku dna. Bez tohohle si každá vzala výšku
podle svého obsahu — naše 334, NIO 325 — a přejímka připouští rozdíl
šest pixelů. `1fr` samo nestačilo: sloupce se sázely podle obsahu
(531 + 516 + mezera = 1 087 na 1 068 široké mřížce), proto minmax
s nulovým minimem. */
.sc-wipe--hist .hs-chap--leaders .hs-col{align-self:stretch}
/* Obě karty na jednu mřížku. Do teď měla každá vlastní tok a `margin-top
:auto` u seznamu čísel — NIO má tři řádky, my čtyři, takže první číslo
v naší kartě leželo o 20 px níž a četlo se to jako dvě různě sázené
tabulky. Popisek i značka teď stojí na řádcích pevné výšky, takže obě
karty začínají čísly na jedné lince. */
.sc-wipe--hist .hs-chap--leaders .hs-col{
min-height:300px;padding:clamp(18px,2vw,26px);
border-radius:var(--r-lg,24px);
display:flex;flex-direction:column;gap:0}
/* Značka je dominanta karty, ne poznámka pod popiskem. Z 20 px výšky
jde na 48 — náš nápis tím dostane přes 200 px šířky, tedy zhruba
37 % karty místo dosavadních 15. Popisek stojí pod ní. */
.sc-wipe--hist .hs-chap--leaders .hs-logo{
height:clamp(32px,5vh,44px);display:flex;align-items:center;
margin:0 0 clamp(6px,.9vh,9px)}
/* Kategorie je NADPIS karty, ne řádek pod značkou. „Commercial fleets
& machines" a „Passenger vehicles" mají být to první, co člověk
přečte — pořadí je značka, kategorie, čísla. Verzálky 13 px na to
byly moc malé; jde na displejové písmo v běžné velikosti nadpisu
karty. */
/* Nadpis karty drží výšku dvou řádků, i když je na jeden. „Commercial
fleets & machines" se láme na dva, „Passenger vehicles" ne — a bez
pevné výšky začínala čísla v každé kartě jinde (naměřeno 24 px
rozdílu). Obě karty tak mají první číslo na jedné lince. */
.sc-wipe--hist .hs-chap--leaders .hs-col-lab{
display:block;margin:0 0 clamp(6px,1vh,10px);
min-height:2.3em;
font-family:var(--font-display);font-weight:400;
font-size:clamp(17px,1.5vw,21px);line-height:1.15;
letter-spacing:-.01em;text-transform:none}
.sc-wipe--hist .hs-chap--leaders .hs-facts{margin-top:0}
.sc-wipe--hist .hs-chap--leaders .hs-facts li{font-size:15px}
.sc-wipe--hist .hs-chap--leaders .hs-facts li b{font-size:21px}
}
/* ═══ NAŠE KARTA SVÍTÍ (29. 8.) ══════════════════════════════════════
Michaela: „ten čtvereček, kde jsme my, barevně fakt moc nesedí,
myslím si, že by měl více svítit nebo být bílý nebo cokoli."
Naměřeno: naše karta měla podklad rgba(251,84,148,.07), tedy proti
uhlové rgb(46,38,46) — od sousední se lišila o 5,8 bodu jasu z 255.
Proto se nečetla jako naše, ale jako tatáž karta s jiným rámečkem.
Je z ní bílá deska se značkovou září. Text v ní jde do tmavé, jinak
by na bílé zmizel; růžová v ní bere tmavší odstín, protože je pod
24 px (design systém). */
/* 29. 8. večer: ZÁŘ JE PRYČ, NE ZMENŠENÁ. Byla tam z jediného důvodu —
odlišit bílou desku od uhlové obrazovky kolem. Kapitola vítězů se teď
překlápí do bílé celá, takže není co odlišovat: karta a obrazovka mají
tutéž barvu a naše je poznat velikostí, pořadím a růžovou uvnitř.
Michaela: „vadí mi to nasvícení kolem toho bílého pole."
Zůstává vlásový růžový lem. Bez něj by na bílé obrazovce nebylo vidět,
kde deska začíná a končí. */
.sc-wipe--hist .hs-chap--leaders .hs-col--us{
background:#fff;border-color:transparent;
box-shadow:0 0 0 1px rgba(251,84,148,.45)}
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-col-lab,
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-facts li,
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-facts li i{color:rgba(14,14,16,.72)}
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-facts li b{color:#0E0E10}
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-facts .hs-win b{color:var(--pink-ink,#FB5494)}
/* Na bílé desce musí růžová zůstat vidět — je to pořád NAŠE karta.
Nese ji popisek nahoře, čísla a linka pod značkou; všechno v tmavším
odstínu --pink-ink, protože pod 24 px značková růžová na světlém
nestačí (design systém). Bez toho měla karta 13 růžových pixelů
a přejímka čeká aspoň 60. */
/* 29. 8. večer: NADPISEK NENÍ RŮŽOVÝ. Byl v tmavší --pink-ink, protože
13px text má normu 4,5 : 1 a značková na bílé dá jen 3,08 — jenže tím
byly v jedné kartě dvě růžové vedle sebe a Michaela to právem viděla
jako chybu. Barvu textu mu dává pravidlo o kus výš spolu s čísly
a poznámkami; růžová v kartě zůstává jediná, značková, na číslech. */
/* Čísla mají 21 px tučně, tedy VELKÝ text — norma 3,0. Značková ji
splní (3,08) a je to barva, kterou má značka mít. Michaela: „a není
to podle mě ani naše růžová." Měla pravdu, byla tam #BD376B. */
/* 31. 8.: ČÍSLA JDOU NA --pink-ink. Značková růžová má na bílé 3,09 : 1
a na telefonu jsou ta čísla 16 px, tedy DROBNÝ text s normou 4,5 —
naměřeno na `65K+`, `~2M`, `99.95%` i `Profitable`. Na počítači mají
21 px a normu 3, kde by značková ještě těsně prošla, ale mít v jedné
kartě dvě různé růžové podle šířky okna je horší než mít jednu, která
platí všude. --pink-ink dá 5,35 : 1. U `Profitable` se přitom nic
nedopisuje — mění se výhradně barva. */
/* 2. 9.: čísla v naší kartě vítězů jsou tmavá, ne růžová. Značková
růžová má na bílé 3,09 : 1 a tohle je 16px text, kde platí 4,5.
Třetí cesta ze zadání — text zůstane tmavý a růžová na téhle
obrazovce zůstává ve značce a v liště. */
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-facts li b{color:var(--ink,#1D1D1F)}
/* Linka pod značkou není text, takže se na ni žádná norma kontrastu
nevztahuje — je značková. */
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-logo--us{
padding-bottom:clamp(8px,1.2vh,14px);
border-bottom:2px solid var(--pink)}
/* Značka na bílé desce musí být tmavá, ne bílá. A musí mít stejnou váhu
jako značka NIO vedle: NIO je čtvercová značka 39 × 28, naše je široký
nápis, který se do téže výšky řádku vešel jen 17 px vysoký — vedle sebe
pak působila naše karta slaběji, přesně naopak, než má. Nápis proto
vyplní výšku řádku celý. */
.sc-wipe--hist .hs-chap--leaders .hs-col--us .hs-logo--us img{filter:none;
height:100%;width:auto;max-width:none}
/* ═══ PRUH „10×" (29. 8.) ════════════════════════════════════════════
Radkova grafika. Na počítači je to fáze připnuté scény jako #patent,
na telefonu běžný blok ve sloupci. Rozvržení podle předlohy: nahoře
obrovské číslo vlevo a text vpravo, dole diagram přes celou šířku.
Pozadí je velmi světlé, ne čistě bílé — tak to má Radek a odliší se
tím od bílých pruhů #onelayer a #patent hned vedle. */
@media (min-width:701px){
/* Svisle na stred, ne shora. Při horním zarovnání a odsazení 150 px
zbývalo pod diagramem 330 px prázdna z 833 — dvě pětiny obrazovky.
Sourozenci #onelayer i #patent jsou vystředění, tenhle pruh se tím
do rodiny vrací. Lišta nahoře se odečítá odsazením, aby optický
střed seděl na ploše POD ní. */
.hero > #desetkrat{
position:absolute;inset:0;z-index:7;
margin:0;min-height:0;
padding-top:var(--lista-v,72px);
display:flex;align-items:center;
opacity:0;visibility:hidden;
will-change:opacity,transform}
}
@media(max-width:700px){
/* Na telefonu je z pruhu běžný blok ve sloupci. Musí ale stát NAD
závojem hera (.hero::before, z-index 1) — ten kreslí radiální tmu
přes celý sloupec a čím níž prvek leží, tím je tmavší. Naměřeno:
světlé pozadí #F5F6F8 se v pruhu vykreslovalo jako 178/223/242
zleva doprava, tedy špinavý přechod místo klidné plochy.
Sourozenec #onelayer tím netrpí jen proto, že leží vysoko, kde je
závoj ještě průhledný. */
.hero > #desetkrat{order:7;position:relative;z-index:2;inset:auto;
opacity:1;visibility:visible;min-height:auto;
padding-block:clamp(40px,7vh,72px)}
.hero > #scHist{order:9}
}
#desetkrat{background:#F5F6F8}
#desetkrat .vr-in{display:flex;flex-direction:column;gap:clamp(26px,4vh,52px)}
/* ═══ PRUH 10× — JEN ČÍSLO (31. 8.) ═════════════════════════════════
Michaela: „ty ikonky atd tam moc nezapadají, my to máme víc takový
realističtější, něco AI, a tohle je fakt obyčejně nakreslené."
Diagram byl jediná čárová kresba na webu, který jinak stojí na
fotkách a vykreslených vrstvách — a kreslil podruhé týž motiv, jaký
scéna vrstev těsně před ním ukáže doopravdy. Je pryč i s pravidly
(.dx-krok, .dx-ram, .dx-stoh, .dx-vozy, .dx-vuz, .dx-linka,
.dx-popis); markup leží v parked/10x-diagram.html.
Zbylo, co ta obrazovka opravdu říká: velké číslo, nadpis, dvě řádky
textu a hodně prázdna. Sazba je na střed, číslo nahoře — podle
Radkovy předlohy PREDLOHA-10x.png.
Stupně písma jsou čtyři, ne šest: nadpis a odstavec se stáhly tak,
aby číslo bylo ohnisko (148 ÷ 34 = 4,4). Naměřeno: se starým
rozvržením byl poměr 3,52 a obrazovka neměla dominantu. */
.dx-hlava{display:flex;flex-direction:column;align-items:center;
text-align:center;gap:clamp(10px,1.6vh,18px)}
/* 31. 8.: ČÍSLO BERE ŠÍŘKU STRÁNKY. Michaela: „na desktopu tu část
s 10× mi přijde, že je to spíš jakoby na čtverec rozložený a my tyhle
popisy máme rozložené skoro po celé stránce ne?" Naměřeno: text měl
503 px, tedy 34,9 % šířky okna, kdežto patent vedle bere 63,3 %.
Šířku nemůže přinést nadpis — pruh má mít ohnisko aspoň 4,0, tedy
číslo aspoň čtyřikrát větší než druhé písmo, a nadpis by ho stáhl.
Přinese ji tedy samo číslo: velikost vychází z toho požadavku na
šířku, ne z oka. */
.dx-cislo{margin:0;display:flex;align-items:center;justify-content:center;
gap:.02em;font-family:var(--font-display);font-weight:700;line-height:.88;
font-size:clamp(96px,27.5vw,380px);letter-spacing:-.04em;color:var(--ink);
white-space:nowrap}
/* Křížek je --pink-ink, ne značková růžová. Značková má na podkladu
pruhu #F5F6F8 kontrast 2,86 : 1 a norma pro velký tučný je 3 —
naměřeno z pixelů snímku na pěti místech průběhu. --pink-ink dá
5,35 : 1 a je to táž barva, jakou tu nese popisek naší vrstvy. */
/* 3. 9.: KŘÍŽEK U 10× JE ČERNÝ. Michaela: „u toho 10× je X opět
růžové, dala bych ho asi černě." Na bílém podkladu má růžová
3,09 : 1 (na 380 px by normu velkého písma ještě prošla), černá
19,60 : 1 — a hlavně: růžová je na webu vyhrazená našemu řešení,
„10× víc" je tvrzení o trhu. */
.dx-cislo b{color:#050505;font-weight:700}
.dx-slovo{display:flex;flex-direction:column;align-items:center;
max-width:68ch}
#desetkrat .eyebrow{display:block;margin:0 0 clamp(8px,1.2vh,14px)}
#desetkrat .vr-h{font-size:clamp(22px,2.4vw,34px);margin:0}
/* Odstavec a řádek pod ním mají TÝŽ stupeň — je to jedna myšlenka ve
dvou větách a dva blízké stupně vedle sebe vypadají jako omyl.
Ušetří to i jednu velikost z těch čtyř, které tahle obrazovka smí
mít. */
#desetkrat .vr-p{margin-top:clamp(10px,1.6vh,16px);max-width:62ch;
font-size:clamp(15px,1.2vw,17px);line-height:1.5}
.dx-pod{margin:clamp(10px,1.6vh,16px) 0 0;font-family:var(--font-text);
font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--muted,#52525A)}
/* Blok „jedna část = jedna obrazovka" (snap + min-height) je od
29. 8. večer pryč. Snap se na dotyku pral s prstem — uživatel táhl
a snap ho dotahoval jinam, a to bylo to sekání. Scéna si obraz drží
sama tím, že je připnutá; snap nemá co dohánět. */
/* ═══ TELEFON: TÁŽ PŘIPNUTÁ SCÉNA JAKO NA POČÍTAČI (29. 8. večer) ═════
Michaela: „nedá se to udělat stejně jako na desktopu? aby tam prostě
při scrollování najela ta kapitola? jakoby celá?"
Do teď se na telefonu scéna vůbec nestavěla: `upd()` se nespouštěl,
takže se nic nepřepínalo — všechny čtyři kapitoly historie i všechny
čtyři vrstvy měly krytí 1 od začátku stránky do konce. Vrstvy se jen
naskládaly přes sebe a kapitoly stály pod sebou jako odstavce.
Blok o kus výš („scény se na mobilu nepohybují, stojí pod sebou")
zůstává v souboru kvůli všem těm úpravám rozvržení pro úzké okno,
které pořád platí — tenhle blok z něj vrací zpátky JEN geometrii:
scéna je zase připnutá a fáze v ní leží přes sebe.
Dráha je odvozená od počtu fází, ne od výšky obsahu: osm fází
(hero · #onelayer · vějíř · film · #patent · #desetkrat · vrstvy ·
historie) po zhruba stu obrazovkových výšek, tedy táž tabulka prahů
jako na počítači. */
@media(max-width:700px){
/* Výšku dosazuje script.js v pixelech (viz komentář výš). */
.pin > .hero{position:sticky;top:0;height:100svh;min-height:100svh;
display:flex;align-items:center;overflow:hidden}
/* Fáze zase leží přes sebe, ne pod sebou. Krytí a viditelnost jim
dopisuje script.js, stejně jako na počítači. */
.hero > .hero-lepivy,
.hero > .wrap.hero-inner,
.hero > .fanwipe,
.hero > .hp-vid,
.hero > .liveop-in,
.hero > #onelayer,
.hero > #patent,
.hero > #desetkrat,
.hero > #scLayers,
.hero > #scHist{
position:absolute;inset:0;width:auto;height:auto;
margin:0;order:0;translate:none}
/* POŘADÍ VRSTVENÍ. Fáze se navzájem nepřekrývají krytím, ale tím, že
ta pozdější leží NAD tou dřívější — a to drží z-index. Na telefonu
ho tři fáze neměly (#onelayer a #patent `auto`, #desetkrat 2, proti
4 / 7 / 7 na počítači), protože jim ho dávala jen desktopová
pravidla. Bílá scéna vějíře (z-index 5) proto ležela nad patentem
i nad pruhem 10× a obrazovka byla v jejich fázi prostě prázdná bílá
— naměřeno 600 px u patentu a 700 px u pruhu, jas 255 bez jediného
tmavého bodu. Hodnoty jsou tytéž jako na počítači. */
.hero > #onelayer{z-index:4}
.hero > #patent{z-index:7}
.hero > #desetkrat{z-index:7}
.hero > .sc-wipe{position:absolute;inset:0;height:auto}
.hero .sc-fan,.hero .sc-in{position:absolute;inset:0;height:auto}
.hero #scHist .hs-chap{position:absolute;display:block}
.hero #scHist .hs-body{height:100%;min-height:0}
/* Pruh pro fleet managery se vrací tam, kam patří ve scéně: na spodek
hera, přes celou šířku mínus okraje. Skládaná scéna ho vysunula pod
hero jako blok v toku (`position:static;width:auto`), a jakmile je
hero zase připnutá scéna, dělal ze sebe položku flexu vedle textu
a smrskl se na třetinu šířky. Hodnoty jsou tytéž jako na počítači. */
/* Text hera si nechá dole místo pro ten pruh — jinak mu leží přes
poslední řádky perexu (naměřeno, že pruh začínal 30 px nad koncem
odstavce). Odsazení je výška pruhu i s jeho odstupem ode dna. */
.hero > .wrap.hero-inner{padding-bottom:clamp(210px,26vh,250px)}
.hero > .fleetbar{position:absolute;left:50%;translate:-50% 0;
bottom:clamp(20px,3.4vh,42px);
width:min(calc(100% - 2*var(--pad)),var(--maxw));
margin:0}
/* Film je