/* ========================================================================== Zapomenutá chalupa — komponenty V TOMHLE SOUBORU JE VŠECHNO, CO SE VYKRESLUJE. Žádná hodnota se tu ale nepíše natvrdo — barvy, velikosti a šířky se berou z tokens.css. Když v tomhle souboru uvidíš číslo, je to buď hodnota bez vlastního tokenu (a měla by ho dostat), nebo poměr, který na tokenu nezávisí. ========================================================================== */ /* --- Základ --------------------------------------------------------------- Kapitálky se nikde nepíšou do HTML. Nadpisy se píšou malými písmeny a kapitálky vyrobí font-variant-caps — text tak zůstane čitelný pro vyhledávače i hlasové odečítače. */ html { font-size: var(--velikost-zaklad); /* ⚠️ WEB JE JEN SVĚTLÝ, A MUSÍ SE TO ŘÍCT NAHLAS (26. 9. 2026). Chrome na Androidu umí stránkám, které o sobě nic neřeknou, sám obrátit barvy do tmavého režimu („Auto Dark Theme"). Udělal by to i nám — a z naměřené palety (#F8F7F6 pozadí, #57524E text, hlína ve štítku) by zbylo něco docela jiného. Tenhle řádek mu řekne, že stránka umí světlý režim a žádný jiný nechce, takže do ní nesahá. Prohlížečům na počítači to nemění nic. */ color-scheme: light; /* ⚠️ POJISTKA PRO KOTVY, KDYBY NEDOBĚHL JAVASCRIPT (26. 9. 2026). Odstup pod lepivou hlavičku počítá skript.js (výška hlavičky + 24 px) a dělá to přesněji — čte si skutečnou výšku podbarvení. Když se ale skript nenačte, prohlížeč skočí na kotvu sám a nadpis sekce skončí schovaný pod hlavičkou. Tohle je to nejhorší z obou pásem: hlavička má 90 px na desktopu a 75 na mobilu, k tomu 24 px vzduchu. Když skript běží, pravidlo se neuplatní — prohlížeč na kotvu neskáče, roluje ho skript. */ scroll-padding-top: 114px; } /* ⚠️ KDO SI V SYSTÉMU ŘEKL O MÉNĚ POHYBU, DOSTANE HO (26. 9. 2026). Volba „omezit pohyb" (macOS, iOS, Windows i Android) není vrtoch — lidem s migrénami a s poruchami rovnováhy z animací bývá fyzicky špatně. Náš web sám od sebe roluje přes 16 000 px plynule a tlačítko se při najetí nadechne. Vypínají se jen pohyby, ne barvy: podbarvení a ztmavení při najetí zůstávají, takže je pořád poznat, na čem myš stojí. Rolování zůstane funkční, jen skočí rovnou na místo. ⚠️ Plynulé rolování na sekce si řídí skript.js přes behavior:'smooth'. CSS na to nedosáhne, takže si to hlídá skript sám — když se tohle pravidlo bude měnit, podívat se i tam. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Zvětšení tlačítka je jediný pohyb, který nedělá přechod, ale transform — ten by se vypnutím přechodu jen zrychlil, ne zrušil. */ .tlacitko:hover { transform: none; } .sipka:hover { transform: translateY(-50%); } } body { margin: 0; background: var(--barva-pozadi); color: var(--barva-text); font-family: var(--pismo); font-size: var(--velikost-zaklad); line-height: var(--radek); letter-spacing: var(--prostrkani-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-size: var(--velikost-zaklad); font-weight: 400; line-height: var(--radek); letter-spacing: var(--prostrkani-nadpis); font-variant-caps: all-small-caps; margin: 0; } /* ⚠️ PRAVIDLO PRO VŠECHNY KOMPONENTY Prostrkání zapsané v em se spočítá na velikosti písma toho prvku, kde je napsané, a dál se dědí už jako pevný počet pixelů. Body má 18 px, takže 0,05em = 0,9 px — a ta 0,9 px se dědí i do perexu se 30 px, kde odpovídá jen 0,03em. Proto každý prvek, který si mění velikost písma, musí letter-spacing zopakovat. Platí i pro tlačítko, navigaci a popisky. */ /* Perex a popisek fotky — základní typografie, ne komponenta. Popisky mají řádkování 1,5 jako všechno ostatní; ve Figmě je u nich 40 px, ale to je artefakt výšky textového pole, ne záměr. */ /* Perex. Na mobilu vyplní celou šířku obsahu a text jde doleva — stojí tedy na stejné svislici jako fotky a zbytek stránky. Od tabletu nahoru dostane pevnou šířku (600 px tablet, 680 desktop), posadí se na střed stránky a text se centruje. Pevná šířka je tu schválně: perex se pak zalamuje na všech oknech stejně a jde ohlídat, kde se který řádek zlomí. */ .perex { font-size: var(--velikost-perex); letter-spacing: var(--prostrkani-text); max-width: var(--obsah-uzky); margin-inline: auto; } @media (min-width: 700px) { .perex { text-align: center; } } /* Zalomení perexu je PEVNÉ podle Janova zadání (25. 9. 2026) — v HTML jsou
s touhle třídou. Stejný princip jako právní text v patičce. Jedna sada zlomů stačí desktopu i tabletu, a to není odhad: tablet je sice užší (600 proti 680 px), ale písmo i prostrkání se zmenší ve stejném poměru (24/30 = 0,8 přesně, prostrkání je v em). Nejdelší možný desktopový řádek 680 px tedy na tabletu vyjde na 544 px a v šestistovkovém sloupci mu zbyde 56 px. Co se vejde na desktop, vejde se vždycky i na tablet. Ověřeno na všech sedmi perexech: tabletová šířka řádku je přesně 0,8 desktopové (663,1 → 530,5 px). ⚠️ Důsledek: na tabletu je textový sloupec až o 56 px (9 %) užší, než kolik místa má. Je to cena za to, že je tvar zalomení v obou pásmech stejný. Kdyby to mělo vadit, --obsah-uzky na tabletu stáhnout na 544 px a tablet bude přesná zmenšenina desktopu. ⚠️ Strop na řádek je 680 px (naměřeno 40–47 znaků podle šířky písmen). Delší řádek se zlomí sám a vznikne řádek navíc — po každé úpravě perexu přeměřit. Nejtěsnější je dnes první řádek sekce chalupa: 663,1 px, tedy rezerva 16,9 px. Vypíná se na mobilu, kde se perex láme podle šířky displeje a pevné zlomy by ho roztrhaly. */ @media (max-width: 699px) { .perex-zlom { display: none; } } .popisek { font-size: var(--velikost-popisek); letter-spacing: var(--prostrkani-text); font-style: italic; } /* --- Přeskočit na obsah --------------------------------------------------- Odkaz jen pro toho, kdo chodí po stránce klávesnicí. Není vidět, dokud na něj nedoskočí kurzor — pak se ukáže v levém horním rohu a odskočí za navigaci. Bez něj se musí před každým příchodem na stránku protabovat sedmi položkami. ⚠️ Neschovává se přes display: none ani visibility: hidden — obojí by ho vyřadilo i z tabulátoru a odkaz by se nedal najít vůbec. Schovává se posunem mimo obrazovku, takže zůstane dosažitelný. Barvy si bere z tlačítka, aby to na webu nebyl další nový vzhled; je to jediné místo, kde se akcentní modrá objeví mimo tlačítko a mobilní menu, a ukáže se vždycky jen na okamžik. ⚠️ Skript ho schválně NEOBSLUHUJE (viz skript.js): u něj je výchozí chování prohlížeče lepší, protože kromě skoku posune i místo, odkud pokračuje tabulátor. Odstup pod hlavičku mu dá scroll-padding-top. */ .preskocit { /* ⚠️ fixed, ne absolute. Absolutně umístěný odkaz sedí na začátku DOKUMENTU a roluje pryč s ním — kdo se na stránku vrátí odrolovaný (obnovení stránky, návrat tlačítkem zpět) a zmáčkne Tab, dostal by kurzor na odkaz, který je někde vysoko nad viditelnou částí, a nic by se mu neukázalo. Naměřeno: na odrolované stránce vyšel 18 px mimo. Fixed ho drží v okně, ať je stránka kdekoli. */ position: fixed; top: var(--okraj); left: var(--okraj); z-index: 200; /* nad hlavičkou, ta má 100 */ /* ⚠️ Odsazení od kraje je v `top`, NE v `margin`, a je to schválně. Posun nahoru se počítá z VLASTNÍ výšky odkazu (100 %), kdežto odsazení je pevných 40 px — když si každé z nich řeší jiná vlastnost, nedají se sečíst do jednoho čísla a odkaz zůstane viditelně zaražený o kus do obrazovky. Změřeno: s marginem a posunem −150 % přečuhoval 15 px a v akcentní modré to bylo na světlém pozadí vidět. Takhle se od sebe odečtou přesně: −(vlastní výška + odsazení), a čtyři pixely navíc jsou rezerva na zaokrouhlení. */ transform: translateY(calc(-100% - var(--okraj) - 4px)); transition: transform 0.15s ease; background: var(--barva-akcent); color: #ffffff; padding: 0.5em 1em; border-radius: var(--radius); text-decoration: none; letter-spacing: var(--prostrkani-text); white-space: nowrap; } /* Bílý text si musí barvu zopakovat — obecné a:hover má vyšší specificitu než jedna třída, stejná past jako u tlačítka. */ .preskocit:focus, .preskocit:hover { transform: translateY(0); color: #ffffff; background: var(--barva-akcent); } /* Cíl odkazu. tabindex="-1" v HTML dovolí kurzoru na
dosednout; obrys by ale na bloku přes celou stránku vypadal jako chyba. */ main:focus { outline: none; } /* --- Textové odkazy ------------------------------------------------------- Výchozí vzhled odkazu kdekoli v textu — v perexu, v accordionu, v patičce. Převzato z původního webu, přemapované na naši paletu. Podtržení je silné (4 px) a v průhledné modré, takže nekřičí, ale je nepřehlédnutelné. Při najetí myší podtržení zmizí a místo něj se objeví podbarvení se spodní linkou — stejný princip jako v navigaci, jen v jiné barvě. ⚠️ Podbarvení NESMÍ kreslit vrstva pod textem (::before). Když se odkaz zalomí na dva řádky, počítá se absolutně umístěná vrstva z obálky obou kusů — ta má zápornou šířku, prohlížeč ji srovná na nulu a z podbarvení zbude svislý proužek na konci prvního řádku. Kreslí ho proto sám odkaz na svém pozadí, viz níž. ⚠️ Netýká se navigace, mobilního menu, tlačítka ani odkazu „přeskočit na obsah" — ty mají vlastní vzhled. Dřív je chránila jen vyšší specificita; od chvíle, kdy podbarvení sedí na odkazu samotném, jsou vyjmenované v :not(), aby se jim odsazení ani pozadí nepřidalo vůbec. ⚠️ Vyjmutí patří JEN SEM, na pravidlo pro podbarvení (0-2-0). Na výchozí vzhled `a` (0-0-1) se sahat nesmí — viz varování u něj výš. Podbarvení musí odkaz „přeskočit na obsah" vyjmout proto, že má vlastní pozadí a odsazení a tohle pravidlo mu obojí přebíjelo: pozadí vyšlo průhledné a odsazení 3 px místo 0,5em. Změřeno. */ /* ⚠️ TENHLE SELEKTOR MUSÍ ZŮSTAT HOLÉ `a`, NIC SE DO NĚJ NESMÍ PŘIDAT. Specificita holého `a` je 0-0-1, tedy níž než jakákoli třída — a právě proto si komponenty jako `.tlacitko` (0-1-0) můžou barvu a podtržení přebít samy. Stalo se to 26. 9. 2026: při doplnění odkazu „přeskočit na obsah" tu chvíli stálo `a:not(.preskocit)`. To je 0-1-1, tedy VÍC než `.tlacitko`, a tlačítku to přebilo bílý text na barvu textu — na modrém pozadí šedý nápis. Nahlásil Jan. Je to přesně ta past, která je popsaná o kus níž u `a:hover`. Odkaz „přeskočit na obsah" vyjímat netřeba: `.preskocit` je 0-1-0 a barvu, podtržení i polohu si přebije sám. Vyjmenovává se jen u pravidla pro podbarvení níž, které má 0-2-0 a tam by ho jinak přebilo. */ a { color: inherit; position: relative; text-decoration: underline; text-decoration-color: var(--barva-podtrzeni); text-decoration-thickness: var(--podtrzeni-sila); text-underline-offset: var(--podtrzeni-odstup); /* Linka nesmí uhýbat dotahům písmen (p, q, j, y) — prohlížeč to dělá sám od sebe a u 4px linky by z ní byla přerušovaná čára. */ text-decoration-skip-ink: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; } /* Podbarvení kreslí odkaz na svém vlastním pozadí. Aby přesahovalo za písmena, dostane odsazení — a to se hned zase odečte záporným okrajem, takže je pro sazbu nulové: · svislé odsazení se u řádkového prvku do výšky řádku nepočítá vůbec, · vodorovné vyruší záporný okraj, takže text kolem odkazu i text na dalším řádku zůstanou přesně tam, kde byly (ověřeno měřením). box-decoration-break: clone je to podstatné — bez něj by zalomený odkaz dostal jedno podbarvení protažené přes oba řádky. S ním má každý řádek vlastní zaoblený obdélník i vlastní spodní linku. Navigace, logo, mobilní menu, tlačítko a odkaz „přeskočit na obsah" jsou vyjmuté: mají vlastní vzhled a odsazení navíc by jim rozhodilo rozměry. ⚠️ Vyjmenovávají se NÁZVY komponent, ne .hlavicka jako rodič — ukázka navigace ve styleguidu stojí mimo hlavičku a přes rodiče by se minula. */ a:not(.tlacitko, .preskocit, .hlavicka-logo, .hlavicka-nav-vlevo a, .hlavicka-nav-vpravo a, .menu-prekryv a) { padding: 0.15em 0.2em 0.05em; margin-inline: -0.2em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-color: transparent; box-shadow: 0 2px 0 rgba(97, 130, 164, 0); transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } a:hover { color: var(--barva-hover-text); text-decoration-color: transparent; } a:not(.tlacitko, .preskocit, .hlavicka-logo, .hlavicka-nav-vlevo a, .hlavicka-nav-vpravo a, .menu-prekryv a):hover { background-color: var(--barva-hover-pozadi); box-shadow: 0 2px 0 var(--barva-podtrzeni); } a:focus-visible { outline: 2px solid var(--barva-hover-text); outline-offset: 3px; } /* ⚠️ Odkaz ven z webu se nezalamuje. Před „atomickým" řádkovým prvkem, a tím je šipka (inline-block, viz níž), smí prohlížeč zlomit řádek — a když se text odkazu na řádek ještě vejde a šipka už ne, spadne šipka sama na začátek dalšího řádku i s čárkou za sebou. Viděl jsem to při zkoušce ve zvětšení; v běžné velikosti je to úzké okno, ale existuje. ⚠️ PLATÍ ZA PŘEDPOKLADU, ŽE JSOU NÁZVY ODKAZŮ KRÁTKÉ. Všechny dnešní jsou jedno slovo nebo dvě svázaná pevnou mezerou (Kubova Huť, Velký Javor, Instagram, Mapa), takže se stejně nezalamovaly. Kdyby přibyl dlouhý víceslovný název, tohle pravidlo by ho vytlačilo ze sloupce — pak nowrap zrušit a osamocenou šipku řešit jinak. */ a.odkaz-externi.odkaz-externi { white-space: nowrap; } /* Odkaz ven z webu dostane za text šipku — čtenář dopředu ví, že odchází pryč. Ikona je součástí odkazu, ne obsahu: odečítač ji přeskočí, protože je vložená přes ::after. Velikost 0,8em, aby seděla k písmu, ať je jakkoli velké. ⚠️ KLÍČOVÉ JE `display: inline-block`. Šipka tím zůstane uvnitř odkazu, takže se při najetí podbarví spolu s ním (přál si Jan 16. 9. 2026) — ale PODTRŽENÍ NA NI NESAHÁ: dekorace zděděná z rodiče se podle specifikace nekreslí přes „atomické" řádkové prvky, a inline-block je právě takový. `text-decoration: none` na potomkovi by nepomohlo, podtržení rodiče se tím zrušit nedá. ⚠️ Dva pokusy předtím, ať se k nim někdo nevrací: 1. Šipka uvnitř odkazu jako obyčejný řádkový prvek — podtrhávala se. 2. Šipka umístěná ABSOLUTNĚ do místa rezervovaného marginem, s vlastním podbarvením. Podtržení sice minula, ale podbarvení je poloprůhledné (12 % modré), takže tam, kde se obě plochy překrývaly, vyšla barva dvakrát tmavší — mezi textem a šipkou zůstal tmavý pruh. Nahlásil Jan, ověřeno. A překryv tam být musel, aby spoj neměl zub od zaobleného rohu odkazu. **Poloprůhledné plochy se nedají skládat na sraz** — tudy cesta nevede. Tohle řešení nemá ani jednu z těch vad: plocha je jedna jediná, takže se nemá co sčítat a není co napojovat. Navíc snese zalomený odkaz — obě předchozí varianty by u něj šipku odhodily jinam, a kvůli tomu se víceslovná jména musela svazovat pevnou mezerou. */ a.odkaz-externi.odkaz-externi::after { content: 'arrow_outward'; display: inline-block; /* Mezera od textu. Sama o sobě by byla skoro nulová — znak si kolem sebe nechává jen ~1,6 px vlastního vzduchu. S marginem vyjde ~3,8 px, tedy o třetinu míň než původních 5,2 (přál si Jan). */ margin-left: 0.15em; /* Změřené dorovnání: inline-block se opírá o svou vnitřní účaří a vychází o 0,4 px níž než dřív. Při změně velikosti šipky přeměřit. */ vertical-align: 0.03em; font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; font-size: 0.8em; font-style: normal; letter-spacing: 0; line-height: 1; } /* Jen pro styleguide: ukáže stav najetí natrvalo, aby šlo na snímku posoudit, že se podbarví i šipka. Na webu se nepoužívá — musí proto vypsat totéž, co dělá a:hover. */ .sg-najeto-odkaz a.odkaz-externi { background-color: var(--barva-hover-pozadi); color: var(--barva-hover-text); text-decoration-color: transparent; box-shadow: 0 2px 0 var(--barva-podtrzeni); } /* --- Ikony ---------------------------------------------------------------- Material Symbols Outlined, wght 300, FILL 0. Písmo se načítá z našeho serveru (@font-face v tokens.css, soubor fonts/MaterialSymbols.woff2) — dřív viselo na Google Fonts, dnes už ne. Ikona vzniká tak, že se napíše NÁZEV ikony ("close", "add") a ligatura z něj udělá obrázek. ⚠️ NÁZEV IKONY SE PÍŠE SEM DO CSS, NIKDY DO HTML (změna 26. 9. 2026). Do 26. 9. stálo v HTML doslova add, tedy 47× slovo „add" ve viditelném textu stránky. Oku to nevadilo, ale: · robot, který si ze stránky bere text (vyhledávač, jazykový model), dostal „Dvě ložnice s koupelnami add"; · hlasová čtečka totéž přečetla nahlas. Samotné aria-hidden na to NESTAČÍ — to schová prvek před čtečkou, ale text v HTML zůstane a roboti ho čtou dál. Změřeno: po přidání aria-hidden bylo „add" v textu stránky pořád 47×. Jediné, co ho odstraní, je přesun názvu do `content`, protože obsah z CSS se do textu stránky nepočítá. Není to nový způsob, jen sjednocení: takhle se odjakživa kreslí šipka u odkazů ven (`arrow_outward`) i fajfka v seznamech (`check_circle`). ⚠️ KDYŽ PŘIBUDE IKONA: založit další třídu `.ikona--jmeno` sem dolů, do HTML psát jen tu třídu a prázdný . A zkontrolovat, že znak vůbec je v našem zúženém písmu — viz seznam v tokens.css. */ .ikona { font-family: 'Material Symbols Outlined'; font-style: normal; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; line-height: 1; display: inline-block; user-select: none; } .ikona--plus::before { content: 'add'; } .ikona--krizek::before { content: 'close'; } .ikona--srdce::before { content: 'favorite'; } .ikona--vlevo::before { content: 'arrow_back'; } .ikona--vpravo::before { content: 'arrow_forward'; } /* --- Srdce na konci sekce rezervace --------------------------------------- Poslední odrážka řádku „Platba, podrobnosti" končí místo vykřičníku srdcem (přál si Jan 25. 9. 2026). Do té doby tam stálo „Vítejte na Šumavě!" a byl to poslední vykřičník na webu. ⚠️ JE TO IKONA Z NAŠEHO PÍSMA, NE EMOJI A NE SVG — a je to schválně. Emoji si každý systém kreslí po svém (Apple, Android a Windows mají tři různá srdce), takže by vzhled určoval návštěvníkův telefon, ne my. SVG by šlo taky, ale muselo by se u něj ručně hlídat čtvero: velikost vůči písmu, svislé zarovnání na účaří, zalomení řádku před ním a barva zapečená v souboru, na kterou CSS nedosáhne (přesně ta past, kterou máme u větvičky a log médií). Ikona z písma je text: škáluje sama, sedí na účaří sama a barvu bere z CSS. Plné srdce (FILL 1), ne obrysové — tenká linka by se ve větě ztratila, stejná úvaha jako u větvičky v seznamech. Obrysové je na jednu změnu: přepsat FILL na 0. ⚠️ VELIKOST A SVISLÁ POLOHA JSOU ZMĚŘENÉ, NE ODHADNUTÉ (25. 9. 2026). Material Symbols kreslí znak doprostřed čtverce, kdežto písmena sedí u účaří — srdce proto samo od sebe plave nad řádkem. Jan to nahlásil („vypadá, jako by lítalo ve vzduchu") a zadal PRAVIDLO: **horní hrana srdce lícuje s horní hranou verzálek a vykřičníku.** Změřeno v prohlížeči přes canvas TextMetrics, písmo 100 px: · verzálka „V" i vykřičník sahají 71,6 nad účaří → 0,716em · kresba srdce sahá od 15,4 do 86,9 → 0,154 a 0,869em Z toho posun = 0,869 − 0,716 / velikost. Při 1,15em vyjde −0,246em, zaokrouhleno na −0,25em (rozdíl 0,08 px, neviditelný). Špička srdce tím sahá 0,106em POD účaří, tedy 1,9 px při textu 18 px — chová se jako dotah u „y" nebo čárky, a je to v pořádku. ⚠️ PŘI ZMĚNĚ VELIKOSTI PŘEPOČÍTAT I POSUN, obě čísla drží pohromadě: 1,10em → −0,218em · 1,15em → −0,246em · 1,20em → −0,272em. ⚠️ Cesta, která NEVYŠLA: srovnat optické středy srdce a malých písmen (−0,33em při 1,15em). Spočítané to bylo správně, ale Janovi to přišlo moc dole — u znaku vedle verzálky rozhoduje horní hrana, ne střed. ⚠️ V HTML je PŘED srdcem pevná mezera. Bez ní smí prohlížeč zlomit řádek a srdce by zůstalo samo na dalším řádku — tentýž případ jako šipka u odkazů ven z webu. */ .srdce { font-size: 1.15em; color: var(--barva-srdce); font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: -0.25em; } /* --- Hlavička ------------------------------------------------------------- Chování převzaté z původního webu, schváleno. Změněné jsou barvy (teď z tokenů) a přepínač menu: místo ikony hamburgeru je od 25. 9. 2026 slovo „menu" (rozhodl Jan) — viz .hlavicka-menu níž. ⚠️ HLAVIČKA SE UŽ NEROZTAHUJE NA 100vw (změna 26. 9. 2026). Do té doby tu stálo `width: 100vw; margin-left: calc(50% - 50vw)`, tedy trik „roztáhni se na celé okno, i když sedíš v užším obalu". Bylo to zbytečné a škodilo to: · Na webu je hlavička přímým potomkem , které nemá odsazení — takže je přes celou šířku sama od sebe. · Ve styleguidu ji roztahuje už .sg-scena, uvnitř které z toho výpočtu stejně vyjde nula. · A hlavně: `100vw` je šířka okna VČETNĚ posuvníku. Na macu má posuvník nulovou šířku, ale na Windows a Linuxu zabírá ~15 px — hlavička tam tedy byla o 15 px širší než stránka, přelézala o 7,5 px na každou stranu a dole naskočil vodorovný posuvník. Změřeno na okně 1400 px: stránka 1385, hlavička 1400, přetečení 7 px. Je to táž past, která je popsaná u linky ve foto pásu a u odsazení karet — tady jen zůstala neopravená. Stín nekreslí sama hlavička, ale vrstva ::before pod ní, která končí 10 px nad jejím spodním okrajem. Díky tomu stín nezasahuje pod položky navigace a nedělá kolem nich šedý lem. */ /* Sloupce jsou mobilní: logo vlevo, prázdný střed, přepínač menu vpravo. Desktopové 1fr auto 1fr se nasazuje až v bloku na 920 px. */ .hlavicka { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: transparent; } .hlavicka::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 10px; background: transparent; box-shadow: none; transition: background 0.25s ease, box-shadow 0.25s ease; z-index: -1; pointer-events: none; } /* Třídu přidává JS, jakmile se odscrolluje byť o pixel. */ .hlavicka.odscrolovano::before { background: var(--barva-pozadi); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); } /* Na mobilu stojí logo vlevo, ale odsazené tak, aby bylo na středu nadpisu pod ním — viz --logo-odsazeni. Výška se dopočítá z poměru loga (2:3) a určuje výšku celé hlavičky: 75 px mobil, 90 px desktop. */ .hlavicka-logo { grid-column: 1; justify-self: start; margin-left: var(--logo-odsazeni); } .hlavicka-logo img { display: block; width: var(--logo-sirka); height: auto; } /* --- Navigace na desktopu ------------------------------------------------- */ .hlavicka-nav-vlevo, .hlavicka-nav-vpravo { display: none; } .hlavicka-nav-vlevo a, .hlavicka-nav-vpravo a, .hlavicka-menu-text { color: var(--barva-text); text-decoration: none; position: relative; } /* Podklad položky je zase ::before, aby se dal zvětšit přes text a nezvětšoval přitom řádek. Inset je záporný = přesahuje ven. */ .hlavicka-nav-vlevo a::before, .hlavicka-nav-vpravo a::before, .hlavicka-menu-text::before { content: ''; position: absolute; inset: -0.3em -0.73em -0.4em; border-radius: 100px; background: transparent; transition: background 0.2s ease; z-index: -1; } .hlavicka-nav-vlevo a:hover, .hlavicka-nav-vpravo a:hover, .hlavicka-nav-vlevo a:focus-visible, .hlavicka-nav-vpravo a:focus-visible, .hlavicka-menu:hover .hlavicka-menu-text, .hlavicka-menu:focus-visible .hlavicka-menu-text { color: var(--barva-hover-text); } .hlavicka-nav-vlevo a:hover::before, .hlavicka-nav-vpravo a:hover::before, .hlavicka-nav-vlevo a:focus-visible::before, .hlavicka-nav-vpravo a:focus-visible::before { background: var(--barva-hover-pozadi); } /* Sekce, ve které právě jsi — tečkovaný obrys. Zaoblený obrys se kreslí borderem, ne přechodem jako rovné linky. ⚠️ Týmž pravidlem se kreslí i rámeček kolem slova „menu" v mobilní hlavičce — Jan chtěl, aby vypadalo přesně jako aktivní položka (25. 9. 2026). Je to schválně JEDNO pravidlo, ne dvě podobná: kdyby se vzhled aktivní položky ladil, musí se to projevit i na přepínači menu. */ .hlavicka-nav-vlevo a.aktivni::before, .hlavicka-nav-vpravo a.aktivni::before, .hlavicka-menu-text::before { background: transparent; border: var(--linka-obrys); } /* Když na aktivní položku najedeš, obrys ustoupí podkladu. */ .hlavicka-nav-vlevo a.aktivni:hover::before, .hlavicka-nav-vpravo a.aktivni:hover::before, .hlavicka-nav-vlevo a.aktivni:focus-visible::before, .hlavicka-nav-vpravo a.aktivni:focus-visible::before, .hlavicka-menu:hover .hlavicka-menu-text::before, .hlavicka-menu:focus-visible .hlavicka-menu-text::before { background: var(--barva-hover-pozadi); border: none; } /* --- Přepínač menu a Rezervace — jen pod 901 px --------------------------- */ /* Figma (uzel 511:1000) měla vpravo hamburger 40 × 40, pravou hranou 20 px od kraje obrazovky. ⚠️ Od 25. 9. 2026 tam místo ikony stojí SLOVO „menu" (rozhodl Jan): běžný text v základní barvě a kolem něj kulatý tečkovaný rámeček — tedy přesně to, jak vypadá aktivní položka desktopové navigace. Kreslí ho tatáž pravidla, viz .hlavicka-menu-text výš. ⚠️ Po otevření se slovo vymění za křížek. Ten Jan nechal, i když ikona hamburgeru zmizela. ⚠️ Znak „dehaze" tím vypadl z webu úplně — v souboru s ikonami zatím zůstal. Při nejbližší výměně písma ho jde vynechat (a zvednout ?v=). */ .hlavicka-menu { background: none; border: none; cursor: pointer; font: inherit; /* tlačítko písmo z okolí samo nedědí */ letter-spacing: inherit; /* v em by se přepočítalo, viz pravidlo o dědění */ display: flex; align-items: center; justify-content: center; align-self: stretch; grid-column: 3; justify-self: end; color: var(--barva-text); /* Rámeček přesahuje text o 0,73em do stran a má k tomu 1px hranu. O to se PRAVÉ odsazení zvětší, takže pravá hrana RÁMEČKU (ne textu) sedí přesně na --okraj — na téže svislici jako hrana hero fotky a zbytku obsahu. Nalevo se nekompenzuje, tam je to jen klikací plocha. */ padding: 0 calc(var(--okraj) + 0.73em + 1px) 0 var(--okraj); } /* Křížek žádný rámeček nemá, takže si bere plné odsazení a na --okraj dosedne sám. */ .menu-open .hlavicka-menu { padding-right: var(--okraj); } .hlavicka-menu .ikona { font-size: var(--ikona-hlavicka); transition: color 0.25s ease; } /* Zavřené menu ukazuje slovo, otevřené křížek. */ .ikona-zavrit { display: none; } .menu-open .hlavicka-menu-text { display: none; } .menu-open .ikona-zavrit { display: inline-block; } .menu-open .hlavicka-menu .ikona { color: #fff; } /* Zbytek hlavičky při otevřeném menu zmizí, ale místo si drží — proto visibility, ne display. Přepínač tak neposkočí. */ .menu-open .hlavicka-logo, .menu-open .hlavicka-nav-vlevo, .menu-open .hlavicka-nav-vpravo { visibility: hidden; } .menu-open .hlavicka::before { background: transparent; box-shadow: none; } /* --- Přepnutí na desktop -------------------------------------------------- 901 px, ne 1100. Hlavní zlom webu je jinde, ale hlavička se přepíná tady — níž se sedm položek navigace vedle loga prostě nevejde. Stejný zlom má i zarovnání úvodního nadpisu — musí se přepnout spolu s logem, jinak by bylo logo na středu a nadpis pod ním vlevo. */ @media (min-width: 901px) { .hlavicka { grid-template-columns: 1fr auto 1fr; } .hlavicka-menu { display: none; } .hlavicka-logo { grid-column: 2; justify-self: center; } .hlavicka-nav-vlevo, .hlavicka-nav-vpravo { display: flex; align-items: center; align-self: stretch; gap: var(--hlavicka-mezera); font-size: var(--velikost-nav); letter-spacing: var(--prostrkani-text); } /* Navigace se drží u loga, ne u kraje okna — proto je odsazení na vnitřní straně pevné a na vnější slouží jen jako minimum, kdyby se okno hodně zúžilo. Svisle je zarovnaná na střed loga. */ .hlavicka-nav-vlevo { grid-column: 1; justify-self: end; padding-left: var(--okraj); padding-right: var(--hlavicka-mezera-logo); } .hlavicka-nav-vpravo { grid-column: 3; justify-self: start; padding-right: var(--okraj); padding-left: var(--hlavicka-mezera-logo); } } /* --- Mobilní menu --------------------------------------------------------- Překryv přes celou obrazovku. Otevřený stav drží třída .menu-open — na webu ji nese , ve styleguide rám ukázky. Proto je v selektorech .menu-open bez značky prvku, aby fungovala v obou případech. */ .menu-prekryv { display: none; position: fixed; inset: 0; background: var(--barva-akcent); z-index: 99; overflow-y: auto; padding-top: 80px; /* ⚠️ Rolování se nepřelije na stránku pod menu (26. 9. 2026). Překryv je sice přes celou obrazovku, ale sedm položek se do ní vejde, takže uvnitř není co rolovat — a prst pak posouval obsah ZA menu. `contain` řekne prohlížeči, ať se rolování na kraji nepřenáší dál. Spolu se zámkem na níž to drží i na iOS, kde samotné overflow: hidden na body nestačí. */ overscroll-behavior: contain; } .menu-open .menu-prekryv { display: block; } /* Zámek rolování stránky pod otevřeným menu. Sedí na , ne na : poloha rolování se tím nezapomene, takže se po zavření menu čtenář vrátí přesně tam, kde byl. */ body.menu-open { overflow: hidden; } .menu-prekryv nav { padding: 0 var(--okraj); } .menu-prekryv a { display: flex; align-items: center; color: #fff; text-decoration: none; /* Stejně velké jako perex, tedy 24 px (přál si Jan 16. 9. 2026). ⚠️ Token má na desktopu 30 px, ale menu se nad 900 px nezobrazuje, takže na webu je vždycky 24. Ve styleguidu je ukázka menu vidět i na širokém okně — tam proto vyjde 30 px a je to jen zdání. */ font-size: var(--velikost-perex); letter-spacing: var(--prostrkani-text); padding: 0.5em 0; /* Linka je kreslená na pozadí, ne borderem — jen tak jde nastavit rozestup teček. Proto i to no-repeat a přesná výška. */ background-image: var(--linka-svetla); background-repeat: no-repeat; background-size: 100% var(--linka-sila); background-position: top left; } /* Poslední položka potřebuje i spodní linku, jinak seznam „vyteče". */ .menu-prekryv a:last-child { background-image: var(--linka-svetla), var(--linka-svetla); background-position: top left, bottom left; } /* --- Úvodní nadpis stránky ------------------------------------------------ Figma: desktop uzel 526:1789, mobil 510:980. Velikost, řádkování, prostrkání i barva vycházejí přesně z toho, co má h1 v základu — 20/18 px, řádkování 1,5, prostrkání 0,3em, barva textu. Doplnit bylo potřeba jen dvě věci: zalomení na dva řádky a zarovnání. Blok je vždy jen tak široký, jak je nejdelší řádek (fit-content), a text v něm je na střed. Na mobilu tak stojí u levého okraje, na desktopu se odsazením auto posadí na střed okna — v obou případech to sedí na Figmu. */ /* ⚠️ SMLOUVA: prvky na kotvě (--kotva) se umisťují vůči kraji STRÁNKY. Musí proto být v rodiči, který sahá od kraje k okraji a nemá vodorovné odsazení — jinak se kotva odpočítá od hrany rodiče a sloupec se posune. Platí pro .nadpis-uvodni i .sekce-zahlavi. Nadpis patří k logu — sedí středem na téže kotvě, takže se s logem posouvá jako jeden celek. Stejná technika i pojistka jako u nadpisu sekce: translateX pro posun o půl vlastní šířky, max() aby levá hrana nikdy nepřelezla okraj stránky. */ /* Úvodní nadpis je pro sekci *chalupa* totéž, co záhlaví pro ostatní sekce — patří k hlavní fotce pod sebou, ne k obsahu níž. Dostane proto touž mezeru: jeden řádek (30 px desktop, 27 mobil), ne velkou mezeru mezi bloky. Figma: nadpis končí na 163, perex začíná na 1133, mezi nimi stojí fotka vysoká 900. Na obě mezery tedy zbývá 70 px; naše tokeny dají 30 + 45 = 75. Rozdíl 5 px přes dvě mezery je v mezích ručního kreslení a rytmus je přednější (viz CLAUDE.md, „Čísla z Figmy"). */ .nadpis-uvodni { margin-bottom: var(--zahlavi-odstup); width: fit-content; margin-top: var(--nadpis-odstup); margin-inline-start: var(--kotva); transform: translateX(max(calc(var(--okraj) - var(--kotva)), -50%)); text-align: center; } /* Na desktopu je logo na středu okna a nadpis pod ním taky. */ @media (min-width: 901px) { .nadpis-uvodni { margin-inline: auto; transform: none; } } /* --- Accordion ------------------------------------------------------------ Nativní
/ . Žádný JS — otevírání i přístupnost z klávesnice umí prohlížeč sám. Linky: každý řádek má linku nahoře, poslední navíc dole. Kdyby měl každý linku nahoře i dole, sousední řádky by se zdvojily na 2 px. Kreslí se přes ::before / ::after, aby nezvětšovaly výšku řádku. */ /* Položka accordionu = prostor od tečkované linky k další. Při najetí se mění JEN NÁZEV položky — řádek s popiskem —, ne rozbalený obsah; u zavřené položky je název celá položka, takže se mění od linky k lince. Šířka zůstává přesně na sloupec: podklad ani linky nepřesahují do stran (rozhodl uživatel), místo toho se text odsune o 4 px doprava. isolation: podklad názvu (z-index −1) zůstane pod textem i linkami, ale nad stránkou. */ .accordion details { position: relative; isolation: isolate; } .accordion details::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--linka-sila); background-image: var(--linka); } .accordion details:last-of-type::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--linka-sila); background-image: var(--linka); } .accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--accordion-mezera); padding: var(--accordion-padding) 0; cursor: pointer; list-style: none; /* šipka, kterou
kreslí sám */ position: relative; /* podklad názvu se počítá z řádku s popiskem */ transition: color 0.2s ease; } .accordion summary::-webkit-details-marker { display: none; } /* Podklad názvu — od horní linky ke spodnímu okraji řádku s popiskem (u zavřené položky je tam spodní linka), přesně na šířku sloupce. Rovné rohy — nahoře a dole ho ohraničují rovné linky. */ .accordion summary::before { content: ''; position: absolute; inset: 0; background-color: transparent; transition: background-color 0.2s ease; z-index: -1; } /* NAJETÍ — světle modrý podklad, tmavší popisek, ikona i linky názvu, a popisek se odsune o 4 px doprava: podklad je na šířku sloupce a text začíná přesně na jeho okraji, takže by se o něj jinak opíral. Spouští ho popisek (jen na něj jde kliknout). Horní linka ztmavne vždy, spodní jen u zavřené položky — u rozbalené leží až pod obsahem a ten se nemění. Spodní linka položky je horní linkou té další (u poslední její ::after). .sg-najeto = stav najetí natrvalo, jen pro styleguide. */ .accordion summary:is(:hover, :focus-visible, .sg-najeto) { color: var(--barva-hover-text); } .accordion summary:is(:hover, :focus-visible, .sg-najeto)::before { background-color: var(--barva-hover-pozadi); } .accordion summary:is(:hover, :focus-visible, .sg-najeto) .accordion-text { transform: translateX(4px); } .accordion details:has(> summary:is(:hover, :focus-visible, .sg-najeto))::before, .accordion details:not([open]):has(> summary:is(:hover, :focus-visible, .sg-najeto)) + details::before, .accordion details:last-of-type:not([open]):has(> summary:is(:hover, :focus-visible, .sg-najeto))::after { background-image: var(--linka-zvyraznena); } /* Znak je menší než plocha, ve které sedí — proto ta dvě čísla. Rotace se pak točí kolem středu plochy a ikona neposkakuje. Barvu bere z řádku, takže při najetí ztmavne s popiskem. */ .accordion-ikona { flex-shrink: 0; width: var(--ikona-stred); height: var(--ikona-stred); display: flex; align-items: center; justify-content: center; font-size: var(--ikona-stred); transition: transform 0.25s ease, color 0.2s ease; } .accordion details[open] .accordion-ikona { transform: rotate(45deg); } /* Popisek řádku je BĚŽNÝ TEXT, ne nadpis — ověřeno z Figmy (uzel 526:2039): prostrkání 1 px na 20 px písma = 0,05em, žádné kapitálky, psaný velkým počátečním písmenem. Nadpis je až celý sloupec (.accordion-nadpis). Prostrkání je tu zopakované schválně: dědilo by se z body jako pevné pixely, viz pravidlo v CLAUDE.md. */ .accordion-text { letter-spacing: var(--prostrkani-text); transition: transform 0.2s ease; } /* Rozbalená položka se zvlášť nezvýrazňuje (rozhodl uživatel 11. 9. 2026) — pozná se podle ikony otočené na křížek. Zkoušely se čtyři varianty (obrys, podklad, tmavší text, linka podél obsahu) a všechny vypadly. */ .accordion-telo { /* Nad obsahem je jeden řádek těla (1,5em = 27 px desktop, 24 mobil), pod ním jeden a půl (2,25em = 40,5 / 36 px) — rozbalený blok se tak od dalšího řádku accordionu oddělí zřetelněji, než se drží svého popisku. Obojí zůstává v půlřádkovém rytmu webu. V em, protože se počítá z písma těla, ne stránky — stejně jako mezery v patičce. Nahoře se odečítá spodní odsazení řádku accordionu (--accordion-padding), které nad obsahem už je: viditelná mezera od popisku k první položce tak vyjde přesně na jeden řádek. */ padding: calc(1.5em - var(--accordion-padding)) 0 2.25em; /* O dva body menší než řádek accordionu nad ním (20 → 18, 18 → 16). ⚠️ Prostrkání se musí zopakovat: 0,05em z body se dědí jako pevné pixely, takže by tu jinak zůstala hodnota spočítaná z většího písma. */ font-size: var(--velikost-accordion); letter-spacing: 0.05em; } .accordion-telo > :first-child { margin-top: 0; } .accordion-telo > :last-child { margin-bottom: 0; } /* --- Seznam v rozbaleném accordionu --------------------------------------- Rozbalený text je výčet v odrážkách (rozhodl uživatel). Odrážky jsou krátké věty seskupené podle tématu — pokoj a výhled, postel, lůžkoviny, nábytek, okna, koupelna — a mezi nimi je půl řádku, aby se víceřádková položka četla jako celek. Půl řádku drží rytmus webu: všechny svislé mezery jsou v krocích po půl řádku. Varianta .seznam--husty: bez mezer mezi položkami, pro výčet krátkých jednořádkových hesel. Na webu se zatím nepoužívá; ve styleguidu zůstává na přání uživatele, kdyby se někde hodila. Odsazení a mezery jsou v em — seznam se drží velikosti písma. */ .seznam { list-style: none; /* vlastní značka, ne puntík od prohlížeče */ margin: .75em 0 0; /* půl řádku, kdyby nad seznamem byl odstavec */ padding: 0; } /* ⚠️ Odsazení se řídí šířkou značky. Ikona je široká 1em, takže 1,5em nechává půl em vzduchu. Při změně značky přeměřit. */ .seznam > li { position: relative; padding-left: 1.5em; } .seznam > li + li { margin-top: .75em; } /* půl řádku mezi položkami */ .seznam--husty > li + li { margin-top: 0; } /* ⚠️ ZKOUŠKA (11. 9. 2026): značka je ikona check_circle, plná (FILL 1). Předtím puntík •, ještě předtím dlouhá pomlčka. Ikona je ze stejného písma jako ostatní ikony webu, jen s vyplněním — ostatní ikony mají FILL 0 zapsaný výslovně, takže je změna nezasáhne. */ .seznam > li::before { content: 'check_circle'; font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; font-style: normal; font-weight: normal; letter-spacing: 0; font-size: 1em; line-height: inherit; position: absolute; left: 0; top: 0; } /* ⚠️ ZKOUŠKA B (11. 9. 2026): značka větvička — tatáž kresba jako nad nadpisy sekcí (images/vetvicka.svg). Je z tenkých linek, takže aby byla stejně výrazná jako plný kroužek fajfky (průměr ~0,83em), je o kus vyšší: 0,9em. Soubor má kolem kresby průhledný okraj (kresba 23 × 20 v ploše 30 × 20), proto je prvek 1,35em široký a posunutý o 0,05em doleva — viditelná kresba pak začíná tam, kde začíná kroužek fajfky. Svisle na středu prvního řádku: (1,5em řádek − 0,9em) / 2 = 0,3em. */ /* Text je od větvičky odsunutý dvakrát dál než od fajfky (přání uživatele): viditelná kresba končí na 1,12em, odsazení 1,9em tedy nechává ~0,78em vzduchu — 14 px na desktopu, 12,5 px na mobilu. Při 1,5em to bylo jen 6,8 px a kresba se na text lepila. */ .seznam--vetvicka > li { padding-left: 1.9em; } .seznam--vetvicka > li::before { content: ''; width: 1.35em; height: .9em; top: .3em; left: -.05em; /* Obrázek na pozadí, NE maska. Maska se načítá se stejnou kontrolou původu jako písma a při otevření stránky přímo ze souboru (file://) se nemusí načíst — větvička pak úplně zmizí (nahlásil uživatel). Barvu z textu brát nemusí: obsah se při najetí nemění. */ background: url('images/vetvicka.svg') no-repeat center / contain; } /* --- Štítek „XY min" v seznamech okolí ------------------------------------- V sekci okolí začíná skoro každá odrážka časovou vzdáleností. Jako běžný text se plete s popisem a špatně se skenuje; štítek z ní udělá samostatný údaj, který oko najde dřív, než začne číst. Barva je světlá hlína (vybral Jan 16. 9. 2026) — průměr všech pixelů osmi fotek domu, zesvětlený se zachovaným odstínem. Modrá se sem nesmí: je vyhrazená klikatelným prvkům. ⚠️ KLÍČOVÉ: štítek je `display: inline`, ne inline-block. Svislé odsazení na řádkovém prvku NEZVĚTŠUJE výšku řádku, takže svislý rytmus zůstává nedotčený — a účaří písma ve štítku sedí na účaří okolního textu samo od sebe, protože řádkové prvky se zarovnávají právě na účaří. U inline-block by se řádek roztáhl a účaří by se muselo dorovnávat ručně. */ .stitek { display: inline; background: var(--barva-hlina-svetla); font-size: 0.8em; /* menší než text kolem */ /* ⚠️ ODSAZENÍ JE NAHOŘE NULOVÉ, A JE TO SCHVÁLNĚ. Jan nahlásil, že text ve štítku vypadá výš než text kolem. Změřeno: účaří sedí přesně (rozdíl 0,00 px) — nesedí ale štítek kolem něj. Podbarvení řádkového prvku kreslí prohlížeč přes celý rámeček písma, a ten je nad účařím skoro čtyřikrát vyšší než pod ním. Kapitálky jsou přitom nízké (8,6 px při písmu 14,4), takže nad nimi zbývalo 6,86 px a pod účařím jen 5,44 — štítek byl shora nafouklý a text v něm působil posunutě. Nulové horní odsazení oba pruhy srovná na 5,4 px. Poměr se drží v každé velikosti, protože rámeček písma i kapitálky rostou stejně. ⚠️ Spodní odsazení se zmenšovat nedá pod nulu — pod účařím leží dotahy písma, které do rámečku patří vždycky. Proto se rovná horní pruh dolů, ne spodní nahoru. */ padding: 0 0.5em 0.1em; border-radius: 4px; /* Mezera od následujícího slova. Samotná mezera v textu (5,1 px) vycházela opticky menší než mezi slovy — plná plocha štítku končí ostře, kdežto písmeno má kolem sebe vzduch. 0,15em to dorovná na ~7,2 px, tedy mírně víc než mezi slovy (přál si Jan). */ margin-right: 0.15em; font-variant-caps: all-small-caps; letter-spacing: 0.06em; /* kapitálky potřebují víc než běžný text */ white-space: nowrap; /* „20–30 min" se nikdy nezlomí */ } /* --- Trojice accordionových sloupců --------------------------------------- Figma (uzly 526:2037 / 526:2069 / 526:2101): tři bloky po 507 px s mezerou 39 px, dohromady 1599 px v ploše 100 → 1699. Šířka sloupce se nikde nezapisuje — počítá se z šířky celé trojice. Díky tomu drží i tehdy, když jsou sloupce jen dva nebo jeden: zůstanou stejně široké jako ve trojici a celá skupina se posadí na střed. Na mobilu se sloupce skládají pod sebe přes celou šířku obsahu (Figma 515:1173–515:1258). Svislé rozestupy tam jsou násobky řádkování: mezi bloky 1,5 řádku, od nadpisu k prvnímu řádku půl řádku. */ .accordion-trojice { display: flex; flex-direction: column; gap: var(--accordion-mezera-bloku); width: var(--obsah-siroky); margin-inline: auto; } /* Nadpis sloupce JE nadpis — sdílený vzhled si bere ze základu (kapitálky, prostrkání 0,3em). Ověřeno z Figmy, uzel 526:2068. */ .accordion-nadpis { margin-bottom: var(--accordion-nadpis-odstup); } @media (min-width: 1100px) { .accordion-trojice { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: start; /* sloupce mají různý počet řádků */ } /* Základ = třetina šířky bez dvou mezer. flex-grow 0, aby se osamocený sloupec neroztáhl přes celou šířku. */ .accordion-sloupec { flex: 0 1 calc((100% - 2 * var(--accordion-mezera-bloku)) / 3); } } /* --- Sekce ---------------------------------------------------------------- Sekce nic nekreslí. Jediné, co dělá, je svislá mezera mezi bloky, ze kterých je složená: nadpis s hlavní fotkou, perex, dvojice fotka + text, trojice accordionů, foto pás. Mezi všemi je stejná — --blok-odstup, tedy 2,5 řádku na desktopu a 2 na mobilu. ⚠️ Sekce NEMÁ vodorovné odsazení. Každý blok si svou šířku řeší sám (široká / střední / úzká vrstva) a foto pás i prvky na kotvě potřebují rodiče, který sahá od kraje ke kraji. Odsazení na sekci by je posunulo. Mezera se dává marginem následujícímu sourozenci, ne gapem: nadpis a hlavní fotka jsou jeden blok a potřebují mezi sebou menší mezeru, a to by u gapu nešlo vypnout. */ .sekce > * + * { margin-top: var(--blok-odstup); } /* Značka, nadpis a hlavní fotka jsou JEDEN blok. Mezeru mezi nimi (20 px) si nese záhlaví ve svém margin-bottom, aby fungovala i mimo sekci — tady se jen zruší ta velká, aby se obě nesčetly. */ .sekce > .sekce-zahlavi + .foto-hero { margin-top: 0; } /* Totéž platí pro úvodní nadpis stránky: i on tvoří s hlavní fotkou jeden blok. Mezeru si nese sám ve svém margin-bottom. */ .sekce > .nadpis-uvodni + .foto-hero { margin-top: 0; } /* Perex patří k fotce nad sebou, ne k obsahu pod sebou — drží se jí blíž než ostatní bloky: 1,5 řádku na desktopu, 1 řádek na mobilu. PRAVIDLO PRO SEKCI BEZ HLAVNÍ FOTKY (Jan, 2. 10. 2026): když mezi nadpisem a perexem fotka není, vypadne fotka i s mezerou nad sebou a perex si nechá tu svou. Stojí tedy pod nadpisem stejně daleko, jako by stál pod fotkou — 45 px na desktopu, 27 na mobilu. Velká mezera mezi bloky (75 / 54 px) by tu nadpis od jeho textu odtrhla. První výskyt: osobni-udaje.html. */ .sekce > .foto-hero + .perex, .sekce > .sekce-zahlavi + .perex { margin-top: var(--perex-odstup); } /* Mezi sekcemi je naopak volněji než uvnitř nich, aby bylo poznat, že jedna skončila a druhá začíná: 3,5 řádku na desktopu, 3 na mobilu. */ .sekce + .sekce { margin-top: var(--sekce-odstup); } /* Totéž platí nahoře na stránce, která nezačíná úvodním nadpisem pod logem, ale rovnou záhlavím sekce (Jan, 2. 10. 2026): mezi hlavičkou a větvičkou je mezera mezi sekcemi. Bez ní větvička seděla těsně pod logem. Hlavní stránky se to netýká — její první sekce začíná úvodním nadpisem, který si mezeru od loga řeší sám (--nadpis-odstup). První výskyt: osobni-udaje.html. */ main > .sekce:first-child > .sekce-zahlavi:first-child { margin-top: var(--sekce-odstup); } /* --- Záhlaví sekce: značka + nadpis --------------------------------------- Figma 786:16 (značka) a 526:1790 (nadpis). Nadpis si velikost, řádkování, prostrkání i kapitálky bere ze sdíleného vzhledu nadpisů — přidává jen zarovnání na střed. Značka je vlastní soubor images/vetvicka.svg. Vykresluje se ve své přirozené velikosti 30 × 20; kresba uvnitř má 23 × 20 a zbytek je průhledný okraj. Stejně to má Figma, proto se šířka NEZMENŠUJE na 23 — tím by se zmenšila i kresba. */ /* Na mobilu, kde je hero fotka na výšku, sedí nadpis sekce svým středem na KOTVĚ — na levé hraně fotek zarovnaných doprava. Logo v hlavičce sedí na téže kotvě, takže spolu s pravými fotkami tvoří svislici. Posun dělá translateX, protože jen v transformu se procenta počítají z VLASTNÍ šířky prvku; v marginu by se počítala z rodiče. To max() je pojistka proti zalomení. Nadpis se normálně posune o půl své šířky doleva (−50 %), ale nikdy dál, než aby jeho levá hrana dosedla na okraj stránky. Delší nadpis se proto místo zalomení jen posune doprava a přestane být na kotvě přesně — což je mnohem lepší než zalomený nadpis. Šířka se nijak neomezuje. */ .sekce-zahlavi { width: fit-content; margin-inline-start: var(--kotva); transform: translateX(max(calc(var(--okraj) - var(--kotva)), -50%)); text-align: center; margin-bottom: var(--zahlavi-odstup); } /* Od tabletu nahoru je hero fotka na šířku a nadpis se vrací na střed. */ @media (min-width: 700px) { .sekce-zahlavi { width: auto; margin-inline-start: 0; transform: none; } } /* Zalomení dlouhého nadpisu sekce na mobilu —
v HTML (Jan, 2. 10. 2026). LOKÁLNÍ ODCHYLKA S JEDINÝM VÝSKYTEM: nadpis „osobní údaje" na osobni-udaje.html. Jednořádkový je tak široký, že ho pojistka max() výš odsune od kotvy doprava, a větvička nad ním pak nesedí pod logem. Na dva řádky se vejde a střed nadpisu, větvičky i loga je zase na jedné svislici — stejně jako u úvodního nadpisu „zapomenutá / chalupa". Od 700 px nahoru je nadpis na středu stránky a zlom se vypíná. ⚠️ Před
musí být v HTML mezera, jinak by z nadpisu na širším okně (a pro roboty vždycky) zbylo jedno slovo — viz H1 na hlavní stránce. */ @media (min-width: 700px) { .zahlavi-zlom { display: none; } } .znacka { display: block; width: var(--znacka-sirka); height: var(--znacka-vyska); margin: 0 auto var(--znacka-odstup); } /* --- Hlavní fotka sekce --------------------------------------------------- Široká vrstva: nad 1800 px okna se zastaví na 1600, níž vyplní šířku okna bez okrajů. Poměr 16:9 na desktopu, 3:4 na mobilu — o obojí se stará --pomer-hero. ⚠️ Zlom v MUSÍ sedět na zlom --pomer-hero (700 px). Kdyby se rozešly, dostala by se širokoúhlá fotka do vysokého rámu a ořízla by se. */ .foto-hero { display: block; width: var(--obsah-siroky); margin-inline: auto; } .foto-hero img { display: block; width: 100%; height: auto; aspect-ratio: var(--pomer-hero); object-fit: cover; border-radius: var(--radius); } /* NA MOBILU JDOU VŠECHNY HLAVNÍ FOTKY PŘES CELOU ŠÍŘKU DISPLEJE, až k hranám, a mají hranaté rohy (Jan, 2. 10. 2026). Platí do 699 px, tedy tam, kde je fotka na výšku (3:4); od 700 px nahoru má zase šířku široké vrstvy a zaoblení. Poměr stran zůstává — mění se jen šířka, ne tvar. Rohy jsou hranaté proto, že zaoblení 6 px na hraně displeje působí jako nedovřená fotka. Do 2. 10. 2026 to dělala jen úvodní fotka stránky, třídou .foto-hero--uvodni; ta třída už neexistuje, z výjimky je pravidlo. Šířka je 100 %, ne 100vw: sekce sahá od kraje ke kraji, takže vyjde nastejno — a kdyby okno mělo klasickou posuvnou lištu, 100vw by ji počítalo do šířky a fotka by přetekla. ⚠️ Fotka proto musí stát v rodiči BEZ vodorovného odsazení, jinak k hranám nedosáhne (ve styleguidu ho ukázka má, tam je to v pořádku). Mobilní soubory mají 1200 × 1600; nejširší telefon (448 px při DPR 3) by chtěl 1344, tedy mají 89 %. Není to vidět. */ @media (max-width: 699px) { .foto-hero { width: 100%; } .foto-hero img { border-radius: 0; } } /* --- Dvojice fotka + text ------------------------------------------------- Figma 526:1794 + 526:1791 a 526:1796 + 526:1793. Mobil: text VŽDY pod fotkou, bez ohledu na to, na které straně stojí na desktopu. Fotka přes celou šířku obsahu. Desktop: fotka a text vedle sebe, obojí pevně široké — s šířkou okna se nemění. Text je svisle na středu fotky, ať je jakkoli dlouhý; o to se stará align-items: center. Prohození stran dělá .dvojice--obraceno. Používá row-reverse, takže v HTML zůstane pořadí „fotka, text" — hlasové odečítače tak čtou nejdřív fotku s popisem, ať je vykreslená vlevo nebo vpravo. Vedlejší efekt row-reverse je, že se obsah srovná na PRAVOU hranu střední vrstvy, a to je přesně to, co Figma kreslí. */ .dvojice { display: flex; flex-direction: column; gap: var(--dvojice-mezera); /* Mobil a tablet: dvojice je užší než pás, ve kterém stojí, a přisazená k jeho LEVÉMU okraji. Zbylé místo zůstává vpravo. Pás se do 700 px okna roztahuje s obsahem, nad 700 se zastaví na 660 a jen se posouvá na střed stránky. Proto ten min() u šířky a max() v odsazení. */ width: calc(min(var(--obsah-siroky), var(--dvojice-pas)) * var(--dvojice-podil)); margin-inline: var(--dvojice-odsazeni) auto; } /* Obrácená dvojice se přisadí k PRAVÉMU okraji pásu. Fotka je na desktopu vpravo, takže těžiště zůstane vpravo i tady. */ .dvojice--obraceno { margin-inline: auto var(--dvojice-odsazeni); } /* ⚠️ GLOBÁLNÍ PRAVIDLO (rozhodl uživatel): na mobilu a tabletu NEROZHODUJE o straně to, kde fotka stojí na desktopu, ale JEJÍ TVAR: obdélníková fotka (3:2) → dvojice se přisadí VPRAVO čtvercová fotka (1:1) → dvojice se přisadí VLEVO Dva tvary tak mají na úzkém displeji vždycky stejnou stranu a stránka dostane pravidelný rytmus, i když se strany na desktopu střídají jinak. Na desktopu se nemění nic. Rozhoduje `:has()`, ne třída navíc v HTML — pravidlo pak platí samo od sebe a nedá se zapomenout napsat. ⚠️ PLATÍ JEN NA MOBILU, tedy do 699 px (rozhodl uživatel). Na tabletu se strany řídí tím, kde fotka stojí na desktopu — tedy třídou `.dvojice--obraceno`, jako by tablet byl zmenšený desktop. Původně pravidlo platilo do 1099 px; uživatel to zúžil, protože na tabletu je dost místa na to, aby se rozvržení drželo desktopu. Omezení shora je nutné i technicky: `:has()` má vyšší specificitu než `.dvojice` v desktopovém bloku níž, takže by mu jinak přebilo `margin-inline: auto` a rozhodilo desktop. */ @media (max-width: 699px) { .dvojice:has(.dvojice-foto--sirka) { margin-inline: auto var(--dvojice-odsazeni); } .dvojice:has(.dvojice-foto--ctverec) { margin-inline: var(--dvojice-odsazeni) auto; } } /* Dvojic může být pod sebou libovolně, i jen jedna. */ .dvojice + .dvojice { margin-top: var(--dvojice-odstup); } .dvojice-foto img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); } .dvojice-foto--ctverec img { aspect-ratio: var(--pomer-ctverec); } .dvojice-foto--sirka img { aspect-ratio: var(--pomer-sirka); } .dvojice-text > :first-child { margin-top: 0; } .dvojice-text > :last-child { margin-bottom: 0; } @media (min-width: 1100px) { .dvojice { flex-direction: row; align-items: center; width: var(--obsah-stredni); margin-inline: auto; /* na desktopu zase na střed stránky */ } .dvojice--obraceno { flex-direction: row-reverse; margin-inline: auto; } /* flex: none = nesmršťovat ani neroztahovat, držet přesnou šířku */ .dvojice-foto, .dvojice-text { flex: none; } .dvojice-foto--ctverec { width: var(--dvojice-ctverec); } .dvojice-foto--sirka { width: var(--dvojice-sirka); } .dvojice-text { width: var(--dvojice-text); } } /* Textový sloupec složený z několika POJMENOVANÝCH SKUPIN — dílčí nadpis a k němu odstavec. Zatím jediný výskyt: „pro čtyři / pro šest / pro osm" v sekci uvnitř, proto je to lokální odchylka a ne varianta ve styleguidu. Kdyby se to na stránce zopakovalo, patří to zpátky do styleguidu ke schválení. Nadpis drží u svého odstavce (žádná mezera mezi nimi), mezi skupinami je celý řádek. Ověřeno z Figmy: vrstva 526:1811 je vysoká 330 px, tedy přesně 11 řádků — tři skupiny po třech řádcích a mezi nimi dvě prázdné. Rem, ne em: mezera se počítá z písma dokumentu, takže vyjde na řádek i kdyby si sloupec někdy sáhl na jinou velikost písma. */ .text-skupiny > * { margin: 0; } .text-skupiny > p + h3 { margin-top: 1.5rem; } /* --- Vodorovný pás -------------------------------------------------------- Společný základ pro všechno, co se dá posouvat do stran: foto pás s kartami i ohlasy v médiích. Chování je převzaté z původního webu (schváleno) — scroll se snapem, skrytý scrollbar, šipky, výplně na obou koncích. Vlastní vzhled si přidává každá komponenta zvlášť: foto pás krémové pozadí a odsazení, ohlasy nic. ⚠️ SMLOUVA: pás musí být v rodiči, který sahá od kraje ke kraji a nemá vodorovné odsazení — tedy přímo v sekci, ne uvnitř sloupce s okraji. Odsazení první karty se počítá z šířky pásu; kdyby pás začínal jinde než stránka, rozešla by se hrana karty s hranou hero fotky. Stejná smlouva jako u prvků na kotvě, viz .sekce-zahlavi. */ .pas { position: relative; width: 100%; } /* Posouvá se prstem, kolečkem myši nebo šipkami. scroll-padding drží zasnapovanou položku na téže hraně, na které stojí ta první. */ .pas-rada { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: var(--pas-odsazeni); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pas-rada::-webkit-scrollbar { display: none; } /* Řada, která se posadí na střed, dokud se vejde. Jakmile se přestane vejít, chová se sama od sebe jako obyčejný pás a jede se od kraje. Dělá to `safe`: bez něj by se při přetečení obsah odsunul na obě strany stejně a k prvnímu prvku by se nedalo doscrollovat vůbec. */ .pas-rada--na-stred { justify-content: safe center; } /* Výplň na obou koncích řady. Vlevo posadí první položku na hranu široké vrstvy, vpravo nenechá poslední dosednout natvrdo k okraji okna. Je to prázdný prvek, ne padding — padding na scrollovaném prvku se v některých prohlížečích na konci řady ztrácí. ⚠️ Výplň musí být vysoká jako celá řada. Podle ní se totiž pozná, jestli je pás na kraji: JS ji hlídá přes IntersectionObserver a nulově vysoký prvek by se tvářil, že není nikdy vidět — šipky by pak svítily pořád. Stretch je výchozí chování flexu, ale je tu napsané schválně, aby ho nikdo omylem nepřepsal. */ .pas-okraj { align-self: stretch; } /* --- Šipky ---------------------------------------------------------------- Bílé kolečko se stínem — výjimka z pravidla „žádné stíny", schváleno. Ve Figmě nejsou, jsou převzaté z původního webu; nové je jen to, že mají barvu textu místo černé. Ukazují se od 700 px výš, tedy i na tabletu — v tom pásmu můžou být malé displeje bez dotyku, kde by pás nešlo posunout ničím jiným než kolečkem myši. Pod 700 px zůstávají schované, telefon dotyk má vždycky. Třídu .je-videt přidává JS podle toho, jestli je výplň na tom konci celá vidět. Svislé umístění si řeší každá komponenta zvlášť — u foto pásu jde o střed fotky, u ohlasů o střed celé řady. */ .sipka { display: none; position: absolute; /* Vlastní velikost písma, aby se em ve velikosti kolečka počítalo ze základního čísla i tam, kde má okolí jiné písmo. */ font-size: var(--velikost-zaklad); transform: translateY(-50%); z-index: 2; width: var(--sipka-velikost); height: var(--sipka-velikost); padding: 0; border: 0; border-radius: 50%; background: #ffffff; box-shadow: var(--stin-plovouci); color: var(--barva-text); cursor: pointer; align-items: center; justify-content: center; } .sipka .ikona { font-size: var(--sipka-ikona); } .sipka--vlevo { left: var(--okraj); } .sipka--vpravo { right: var(--okraj); } @media (min-width: 700px) { .sipka.je-videt { display: flex; } .sipka { transition: transform 0.2s ease; } .sipka:hover { transform: translateY(-50%) scale(1.5); } } /* --- Foto pás ------------------------------------------------------------- Krémový pás přes celou šířku stránky, v něm vodorovná řada karet 4:5. Figma: pozadí 526:1784, karta 526:2121, popisek 526:1812. */ .foto-pas { /* Šířka pásu se tím dá číst jako délka (100cqw) i uvnitř řady, kde procenta znamenají něco jiného — viz linka níž. */ container-type: inline-size; } /* Pás nemá vlastní pozadí — ohraničuje ho tečkovaná linka nahoře a dole (rozhodl Jan 16. 9. 2026; do té doby tu byla krémová plocha). ⚠️ LINKA JE SVÁZANÁ S FOTKAMI, NE S OKNEM. Když se pásem posouvá, posouvá se i linka a na konci řady skončí přesně s poslední fotkou — přál si to Jan. Drží to tři věci dohromady: 1. Linka se kreslí jako pozadí SCROLLOVANÉ ŘADY, ne pásu kolem ní. 2. `background-attachment: local` ji přilepí k obsahu řady, takže jede s fotkami. Bez toho by stála na místě jako pozadí okna. 3. Díky tomu `100%` v šířce pozadí znamená **šířku celé řady včetně toho, co je za okrajem obrazovky** (u nás ~2600 px místo ~1300). Ověřeno pokusem, není to odhad. ⚠️ Odsazení se musí odečíst v PIXELECH, ne v procentech. Procenta by se totiž taky počítala z šířky celé řady, takže by z nich vyšlo mnohem větší číslo než 40 px. Proto je pás `container-type: inline-size` — tím jde jeho šířka číst jako délka (`100cqw`) a odsazení se spočítá stejně jako u první karty. Se 100vw by to nešlo: na Windows by se připočetl systémový posuvník a linka by se s fotkou rozešla o ~7 px. ⚠️ Svislé odsazení nese ŘADA, ne pás. Pozadí se kreslí nejvýš po hranu prvku, takže kdyby odsazení zůstalo na pásu, linka by ležela těsně na fotkách. Vodorovné odsazení na scrollovaném prvku by se naopak na pravém konci ztratilo (viz výplně níž) — svislému to nehrozí. ⚠️ LINKA JE JEN DOLE (rozhodl Jan 16. 9. 2026), i když odsazení je nahoře i dole. Nad fotkami tedy vzduch je, jen ho nic nezavírá — pás se shora opře o předchozí blok a linka pod ním funguje jako uzávěr, ne jako rám. */ .foto-pas .pas-rada { gap: var(--karta-mezera); padding-block: var(--pas-odsazeni-nad) var(--pas-odsazeni-pod); --linka-odsazeni: calc((100cqw - var(--obsah-siroky)) / 2); background-image: var(--linka); background-repeat: no-repeat; background-attachment: local; background-size: calc(100% - 2 * var(--linka-odsazeni)) var(--linka-sila); background-position: center bottom; } .foto-pas .pas-okraj { flex: 0 0 calc(var(--pas-odsazeni) - var(--karta-mezera)); } .foto-pas-karta { flex: 0 0 var(--karta-sirka); margin: 0; scroll-snap-align: start; /* Mezera fotka → popisek přes gap, ne přes margin na popisku: gap se počítá z písma karty, ne z menšího písma popisku. */ display: flex; flex-direction: column; gap: var(--karta-popisek-odstup); } .foto-pas-karta img { display: block; width: 100%; height: auto; aspect-ratio: var(--pomer-karta); object-fit: cover; border-radius: var(--radius); } /* Svisle na středu FOTKY, ne celé karty — popisek pod fotkou se do výpočtu nepočítá. Výška fotky je šířka karty krát 5/4 (poměr 4:5). ⚠️ HORNÍ odsazení řady se musí připočíst — jinak sedí šipky o celou jeho výšku výš, než je střed fotky. A musí to být to horní: nahoře je půl řádku, dole celý, takže dosadit špatné by šipky posunulo o 15 px. Při každé změně tohohle odsazení sem zkontrolovat; hýbalo se s ním už čtyřikrát. */ .foto-pas-sipka { top: calc(var(--pas-odsazeni-nad) + var(--karta-sirka) * 1.25 / 2); } /* --- Ohlasy v médiích ----------------------------------------------------- Řada citací, pod každou logo média. Figma: text 526:2198 (sloupec 200 px, rozestup 280, tedy mezera 80), rámy log 786:9 / 786:11 / 786:12 — všechny 120 × 60, s vlastním průhledným okrajem uvnitř souboru (stejně jako větvička v záhlaví sekce, proto se nezmenšují na kresbu). Stojí to na společném pásu, jen se řada posadí na střed. Dokud se citace vejdou, blok je uprostřed stránky a nikam se neposouvá; jakmile se přestanou vejít, začne se od hrany obsahu a jede se šipkami — přesně jako foto pás. Přepíná to samo `justify-content: safe center`, žádný JS na to není. */ /* ⚠️ Mezera mezi citacemi se dělá marginem, ne gapem — na rozdíl od foto pásu. Gap platí i mezi výplní a první citací a nedá se odečíst: mezera je 80 px, ale odsazení pásu jen 40, takže by z rozdílu vyšlo záporné číslo a první citace by při přetečení stála 80 px od kraje místo 40. S marginem má výplň přesně odsazení obsahu a citace dosedne na hranu hero fotky, jak to dělá foto pás. */ .ohlasy .pas-okraj { flex: 0 0 var(--pas-odsazeni); } .ohlas + .ohlas { margin-left: var(--ohlas-mezera); } /* Šipka na středu celé řady, ne jedné její části: citace mají různý počet řádků, takže žádná pevná výška, ze které by šlo počítat. */ .ohlasy-sipka { top: 50%; } .ohlas { flex: 0 0 var(--ohlas-sirka); margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: var(--ohlas-logo-odstup); } /* Citace je běžný text v kurzívě, na střed. Uvozovky se píšou do textu, ne přes ::before — jsou to české „…“ a patří do obsahu. Blockquote má vlastní odsazení od prohlížeče, to se ruší. Výška je vždycky na tři řádky, ať je textu kolik chce: kratší citace nechá zbytek prázdný, delší se ořízne. Loga pod citacemi díky tomu stojí na jedné čáře i v řadě, kde má každá citace jinou délku. Ořez dělá line-clamp, doplnění „…“ na konec JS (viz styleguide.html). Kdyby JS nedoběhl, zůstane aspoň trojtečka bez uzavírací uvozovky — text v žádném případě nepřeteče a loga se nerozjedou. */ .ohlas-text { margin: 0; font-style: italic; text-align: center; /* Celá šířka sloupce, ne jen šířka textu: karta má align-items: center, a bez tohohle by se box scvrkl na nejdelší řádek. Zalomení by vyšlo stejně, ale ořez by se počítal z jiné šířky, než jakou má sloupec. */ width: 100%; height: calc(var(--ohlas-radku) * var(--radek) * 1em); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ohlas-radku); line-clamp: var(--ohlas-radku); } /* Logo média je POPISEK citace, ne volný obrázek vedle ní — proto sedí ve
. Odečítač pak ohlásí „popisek: PročNe" a je z toho jasné, že jde o zdroj citace nad ním; předtím to musel čtenář uhodnout z pořadí. Je to vzor, který pro citaci se zdrojem ukazuje přímo specifikace HTML, a totéž už dělají karty ve foto pásu. Vlastní vzhled nemá žádný: rozestup od citace drží `gap` na .ohlas a šířku si figcaption vezme od loga uvnitř. */ .ohlas-zdroj { display: block; } /* Logo se vykresluje ve své přirozené velikosti 120 × 60. Vzduch kolem kresby je součástí souboru, proto se nezmenšuje ani neroztahuje. */ .ohlas-logo { display: block; width: var(--logo-medium-sirka); height: var(--logo-medium-vyska); } /* --- Tlačítko ------------------------------------------------------------- Figma 526:2158. Jediné barevné místo na webu: modré pozadí, bílý text Bold a 2px hrana zespodu a zprava, která mu dává hmotu. Je to odkaz, ne