/* Ceník — původně vygeneroval build (_build/postav_cenik.py); ten se už nespouští, EDITUJ PŘÍMO. Rozměry a barvy jsou z rámce 121:68, obsah z _build/cenik_data.json. Na rozdíl od zbytku motivu tenhle blok NENÍ absolutně pozicovaný: ceník se rozbaluje, takže se výšky mění a obsah pod tím se musí posunout. Z návrhu se proto berou rozměry a mezery, ne souřadnice. */ /* `max-width` musí být. Plátno je široké jako rámec, ale VEŠKERÝ obsah je v něm vystředěný a nejširší prvek má 827 px (podtitul), karty 563 — takže se šířka rámce nepotřebuje na nic než na vystředění. Bez toho ceník na tabletu přetékal: pásmo tabletu vlastní rámec nemá (§ 1), takže platí desktopové rozměry, ale ceník stojí v toku a žádné `canvas.js` ho nezmenší jako plátno. V okně 900 px z něj byla vidět levá polovina a ceny končily za hranou. S `max-width` se jen zúží a obsah zůstane vystředěný — na desktopu se nemění nic, tam je okno vždycky širší než rámec. */ #cenik { position: relative; width: 1440px; max-width: 100%; margin: 0 auto; padding-bottom: 80px; } /* Ozdoba pod hlavičkou: vlasová čára přes šířku rámce a hvězdička na ní. Kreslí si ji každé plátno ze svého rámce (tady 121:88 a 121:85, na mobilu 121:225 a 121:224) — do hlavičky nepatří, ta je přilepená a ozdoba má s obsahem odrolovat. */ #cenik .cn-ozdoba-cara { position: absolute; top: 102.5px; left: 175px; right: 185px; height: 1px; background: #D2BEA9; } #cenik .cn-ozdoba-hvezda { position: absolute; top: 95px; right: 161px; width: 16px; height: 16px; background: url("assets/obrazky/imgVector37.svg") no-repeat center/contain; } /* Pozadí kreslí SPOLEČNÁ vrstva `#fig-pozadi` — táž, jakou má homepage i studio. Do 15. 8. 2026 si ho ceník maloval sám jedním pravidlem na `` (podklad #F4F1EC, textura na 50 %, nad tím násobicí #F4F1EC, tedy skladba ceníkového rámce). Rozcházelo se to se zbytkem webu: NAMĚŘENO u levého okraje, ceník proti homepage −12,0 / −3,7 / −8,7 stupně jasu na y 400 / 800 / 1200. Zadavatel to reklamoval slovy „studio je totožné s homepage, ale ceník má tmavší“. Vrstva se sem vkládá jako první prvek `#cenik-stranka` (viz SABLONA_PHP) a kresbu jí dává blok `paticka:od`… ve `style.css`, který ceník linkuje stejně jako každá jiná stránka. VÝŠKA se bere ze stránky, ne z proměnné. Na homepage je okno vysoké `var(--fig-platno-h)`, kterou píše canvas.js z výšky plátna — jenže ceník plátno nemá, canvas.js se na něm ukončí hned na začátku a platila by ZÁLOŽNÍ hodnota 7898 px. Absolutně pozicovaná vrstva by tím natáhla rolovací plochu několikanásobně přes konec obsahu. `inset: 0` uvnitř `#cenik-stranka` (ten je `position: relative`) dá vrstvě přesně výšku obsahu — a roste s ní i při rozbalování skupin, na což pevná hodnota stejně nestačí. */ /* Kotví se na , NE na #cenik-stranka. Patičku vkládá `footer.php` AŽ ZA obsahem, takže je jeho sourozencem — vrstva ukotvená dovnitř `#cenik-stranka` na ni nedosáhne a patička zůstane na holé barvě. ZMĚŘENO na okně 1500: ostrá vodorovná hrana na y 1892 (jas 218,1 → 221,0), přesně kde `#cenik-stranka` končí (1893 px), a pod ní plochá barva bez textury. Zadavatel to hlásil jako „patička je tmavší, jakoby ji dělila vodorovná čára“. Vrstva proto stojí PŘED `#cenik-stranka` jako přímé dítě a `inset: 0` jí dá výšku celého dokumentu i s patičkou. */ body.page-template-page-cenik, body.stranka-cenik { position: relative; } body.page-template-page-cenik > #fig-pozadi, body.stranka-cenik > #fig-pozadi { position: absolute; inset: 0; height: auto; } body.page-template-page-cenik .fig-pozadi-okno, body.stranka-cenik .fig-pozadi-okno { height: 100%; } /* Spodní pruh patičky přes CELOU šířku okna. Patička je široká přesně jako návrhový rámec (1440 px) a vodorovně ořezává, takže její vlastní pruh na širším okně skončí s ní a vedle prosvítá pozadí — zadavatel to hlásil jako „na ceníku má pruh jen 90 %“. Homepage a studio ho proto mají zopakovaný ve vrstvě pozadí (`pruh_desktopu()` ve slozit_web.py), jenže ta ho vkládá jen do `canvas.php` a `canvas-studio.php`. Ceník plátno nemá, tak si ho přidává sám — na spodní hranu vrstvy, která má výšku celého dokumentu. Na homepage je ukotvený přes `--fig-platno-h`, jenže tu na ceníku nikdo nenastavuje (není tam canvas.js) a záložních 7898 px je mimo stránku. V pásmech se SKRÝVÁ: tam pruh nesou `paticka-tablet.php` a `paticka-mobil.php`, které vkládá `footer.php`, a měly by se překrýt (mobilní je nižší, 52 px). */ body.page-template-page-cenik .fig-pata-pruh-cenik, body.stranka-cenik .fig-pata-pruh-cenik { position: absolute; left: calc(50% - 720px); width: 1440px; bottom: 0; height: 72px; background: #F1EEE9; pointer-events: none; } #cenik-stranka { position: relative; } /* `line-height` = výška textového boxu z návrhu. Bez toho si ji určí písmo a celý svislý rytmus se posune — na prvním renderu byl podtitul o 150 px níž. Mezery mezi bloky jsou rozdíly poloh z návrhu, ne odhad. */ #cenik .cn-hero { margin: 0; padding-top: 159.341px; text-align: center; } #cenik .cn-hero-1 { display: block; line-height: 57px; font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 42px; color: #A8845E; } #cenik .cn-hero-2 { display: block; margin-top: -8.0925px; line-height: 80px; font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 59px; color: #7E5232; } #cenik .cn-podtitul { max-width: 827px; height: 69px; margin: 3.765px auto 0; text-align: center; font-family: "Jost", sans-serif; font-weight: 300; font-size: 18px; color: #7E5232; line-height: 22px; } /* Tvrdé zlomy podtitulu. Návrh je má v každém rámci jinde — desktop jeden, mobil tři — a markup je jeden pro obě pásma, takže se vysází všechny a nehodící se skryje. `display: none` zlom opravdu ODSTRANÍ, `br` se jinak zalamuje samo od sebe. */ #cenik .cn-zlom-d { display: inline; } #cenik .cn-zlom-m { display: none; } #cenik .cn-sekce { width: 563px; margin: 52.0363px auto 0; } #cenik .cn-sekce:first-of-type { margin-top: 38.0225px; } /* Nadpis sekce je v návrhu odsazený od hrany karty (121:96 začíná 21 px za ní), ne zarovnaný s jejím okrajem. */ #cenik .cn-sekce-nadpis { height: 59px; margin: 0 0 -15.0363px; padding-left: 21px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 29px; color: #7E5232; line-height: 30px; } /* První sekce má v mobilním rámci pod nadpisem o 6 px víc než ostatní (50 px od horní hrany nadpisu proti 44). Na desktopu jsou obě stejné, takže se tam nic nemění. Je to rozdíl mezi SEKCEMI, ne mezi stavy — při rozbalení skupiny se nic nehne. */ #cenik .cn-sekce:first-of-type .cn-sekce-nadpis { margin-bottom: -15.0362px; } /* Skupina: sbalená je pruh s radiálním přechodem, rozbalená bílá karta s obrysem. Obojí přesně jak to má návrh u 121:92 a 121:93. */ #cenik .cn-skupina { position: relative; border-radius: 12px; margin-bottom: 10px; } /* Přechod je v datech balíčku jen jako `radial-gradient(#F9F1E8, #FFFFFF)` bez polohy — skutečný je otočený a Figma ho do CSS převádí přibližně (proto ta její poznámka „rotation not supported“). Bere se proto její vlastní zápis, ověřený proti MCP: obrys #A8845E, krytí 0.6, poloměr 12, stín 0 0 80 rgba(0,0,0,.1). */ #cenik .cn-skupina::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNTYzIDU0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxyZWN0IHg9JzAnIHk9JzAnIGhlaWdodD0nMTAwJScgd2lkdGg9JzEwMCUnIGZpbGw9J3VybCgjZyknLz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzEwJyBncmFkaWVudFRyYW5zZm9ybT0nbWF0cml4KC0yMC4xMzYgMi4wODMxIC0zOC42OTYgLTAuNzQ0NzggNTM3Ljk2IC00LjgyNzgpJz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjQ5LDI0MSwyMzIpJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjU1LDI1NSwyNTUpJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="); background-size: 100% 100%; /* 0.6 = presne podle Figmy (opacity vrstvy, overeno MCP get_design_context na uzlu 274:109). Chvili tu bylo 0.83 jako kompenzace za tmavsi sdilene pozadi (#E3DED6 misto Figmina #F4F1EC) — ZBYTECNE: skutecna pricina tmaveho/neviditelneho boxu byla jinde. `data:image/svg+xml;utf8,` s DOSLOVNYM `#` v `fill='url(#g)'` prohlizec pri navigaci/nekterych cestach vykresleni interpretuje jako URL FRAGMENT a SVG usekne uprostred atributu ("AttValue: ' expected"). Prevedeno na `;base64,` (viz _build/svg_na_base64.py) — zadne specialni znaky, funguje vsude stejne. Ted uz 0.6 vypada spravne. Viz proc/kosmetika_cenik_opacity.py a proc/svg_fragment_bug.py. */ opacity: 0.6; box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1); } /* Mezera pod poslední skupinou v sekci se NEDÁVÁ — odstup k další sekci dělá `margin-top` sekce. Dvě sousedící mezery by se sečetly. */ #cenik .cn-skupina:last-child { margin-bottom: 0; } #cenik .cn-skupina.je-otevrena { border-radius: 12px; } /* Rozbalená karta má TÝŽ přechod, krytí i stín jako sbalený pruh — navíc jen obrys. Napoprvé jsem jí dal `background: none`, protože výpis dat ukázal u 121:92 jen `strokes`; přechod je ale ve `fills` a stránka pak vypadala úplně jinak. */ /* Karta má SVŮJ přechod, ne ten z pruhu — matice je jiná, protože box je 563×536 místo 563×54. Použít jeden na obojí znamená úplně jinou kresbu. */ #cenik .cn-skupina.je-otevrena::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNTYzIDUzNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cmVjdCB4PScwJyB5PScwJyBoZWlnaHQ9JzEwMCUnIHdpZHRoPScxMDAlJyBmaWxsPSd1cmwoI2cpJy8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSdnJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPScxMCcgZ3JhZGllbnRUcmFuc2Zvcm09J21hdHJpeCgtMjAuMTM2IDIwLjY3NyAtMzguNjk2IC03LjM5MjcgNTM3Ljk2IC00Ny45MjEpJz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjQ5LDI0MSwyMzIpJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjU1LDI1NSwyNTUpJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="); border: 1px solid #A8845E; } #cenik .cn-skupina-hlava { margin: 0; } /* HLAVA SKUPINY JE V OBOU STAVECH STEJNÁ — odsazení, písmo i proklad. Návrh ji má v rozbalené kartě níž (desktop o 10 px), protože ji vystřeďuje do výšky hlavy, a ta je sbalená 54 px, rozbalená 66. Text i šipka pak při rozkliku poskočily. Rozhodnutí zadavatele ze 14. 8.: platí poloha ze sbaleného pruhu. Mění se jen VÝŠKA hlavy — poloha čáry, řádků a celé karty zůstává z dat. */ #cenik .cn-prepinac { position: relative; display: flex; align-items: flex-start; width: 100%; min-height: 54px; padding: 14.0263px 45px 0; border: 0; background: none; text-align: left; cursor: pointer; } /* Hlava rozbalené karty má pevnou výšku k dělicí čáře (121:158 na 66 px od horní hrany karty), aby řádky pod ní začaly přesně jako v návrhu. Odsazení textu se NEPŘEPISUJE — jen výška. */ #cenik .cn-skupina.je-otevrena .cn-prepinac { min-height: 66px; height: 66px; } #cenik .cn-nazev { line-height: 30px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; color: #3C1D06; } /* Trojúhelníček z návrhu (121:155) — sbalený míří doprava, rozbalený dolů. V datech je otočený o −90° a 180°, tady to dělá `clip-path`. */ #cenik .cn-sipka { position: absolute; left: 26.5px; top: 23.67px; width: 7.5px; height: 8.66px; background: #A8845E; transition: none; clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Rozbalená míří dolů (v návrhu rotace 180°). Box 10 × 10 je týž jako u sbalené, mění se jen tvar v něm — a s ním rámeček inkoustu, protože otočený trojúhelník je 8,66 × 7,5 místo 7,5 × 8,66. Proto se nepřetáčí `rotate`: rozměry i odsazení inkoustu jsou z dat, pro každý tvar své. */ #cenik .cn-skupina.je-otevrena .cn-sipka { left: 25.92px; top: 24.25px; width: 8.66px; height: 7.5px; clip-path: polygon(0 0, 100% 0, 50% 100%); } #cenik .cn-prepinac:focus-visible { outline: 2px solid #A8845E; outline-offset: 2px; } #cenik .cn-telo { position: relative; } #cenik .cn-telo[hidden] { display: none; } #cenik .cn-radky { list-style: none; margin: 0; /* Vpravo se NEODSAZUJE: cena si odstup od hrany karty drží sama (`margin-right`). Sečtení obojího ji posunulo o 24,5 px dovnitř. */ padding: 29.0225px 0 25.9775px 24px; } /* Dělicí čára pod názvem skupiny (121:158). Má PŘECHODOVÝ tah, ne plnou barvu: `#A8845E` → `#D2BEA9` s koncovým krytím 0, takže se vytrácí. A je 539 px dlouhá — na desktopu tím končí přesně na hraně karty, na mobilu ji přesahuje, protože rámec vznikl kopií desktopového. Ověřeno v referenčním renderu: opravdu ji tam přesahuje. Je to VLASTNÍ prvek, ne `::before`: pseudoprvek se nedá změřit kontrolou. */ /* POZOR na vlasovou čáru. Box vysoký 0,5 px s OBRÁZKOVÝM pozadím (a gradient se počítá jako obrázek) Chrome zaokrouhlí na celé pixely — a když zlomek jeho `top` vyjde 0,5 a víc, obě hrany se zaokrouhlí na totéž číslo, výška je nula a nenamaluje se NIC. Čára pak měla správný rámeček 539 × 0,5 na y 508,98 a v renderu po ní nebyla ani stopa. Řešilo se to boxem 1 px zmenšeným `scaleY(0.5)`, jenže ten tah ztenčoval a v některých rasterizérech mizel taky. Teď je box vysoký 3 px — tedy tak, že se na nulu zaokrouhlit nemůže — a půlpixelový tah v něm kreslí SVG, totéž, jaké vydává Figma. Žádný `transform`. */ #cenik .cn-cara { display: none; } #cenik .cn-skupina.je-otevrena .cn-cara { display: block; position: absolute; left: 24px; top: -2px; width: 539px; height: 3px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzknIGhlaWdodD0nMycgdmlld0JveD0nMCAwIDUzOSAzJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2MnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScwJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNBODg0NUUnIHN0b3Atb3BhY2l0eT0nMScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0ncmdiKDIxMCwxOTAsMTY5KScgc3RvcC1vcGFjaXR5PScwJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0nMCcgeT0nMS43NScgd2lkdGg9JzUzOScgaGVpZ2h0PScwLjUnIGZpbGw9J3VybCgjYyknLz48L3N2Zz4="); background-repeat: no-repeat; /* Obrázek je dlouhý jako celý TAH (539 px), prvek jen jako jeho VIDITELNÁ část (539 px) — zbytek se ořízne, přesně jak to dělá rámec v návrhu. Kdyby se přechod natáhl na viditelnou část, vytratil by se dřív. */ background-size: 539px 3px; } /* Řádek NENÍ zarovnaný účařím. `align-items: baseline` by o svislé poloze ceny rozhodly metriky obou písem — z dat návrhu by se nedala spočítat a s každou změnou velikosti by se tiše posunula. Takhle začínají oba boxy na horní hraně řádku a rozdíl mezi nimi je rozdíl korigovaných poloh z návrhu (`cena_dolu`), tedy měřitelná hodnota. */ #cenik .cn-radek { position: relative; display: flex; align-items: flex-start; min-height: 19px; margin-bottom: 14px; } #cenik .cn-radek:last-child { margin-bottom: 0; } /* Položky se NEZALAMUJÍ mezi sloupce — název, tečky a cena zůstanou vedle sebe. Zalamuje se jen TEXT NÁZVU, když se nevejde (viz `.cn-sluzba`). */ #cenik .cn-radek { flex-wrap: nowrap; } /* DLOUHÝ NÁZEV SE ZALOMÍ. Dřív tu bylo `white-space: nowrap` a k tomu `flex: 0 1 auto` — jenže minimální šířka pružné položky je u nezalomitelného textu jeho CELÁ šířka, takže se název neuměl ani zúžit, ani zlomit a místo toho vytlačil cenu z karty ven. Změřeno: na desktopu se nevešly 3 z 75 položek (nejhůř o 38 px), na mobilu 24 z 75 (nejhůř o 187 px, medián 69). Zkrátit texty tolik nejde — z nejdelší položky by musela zmizet celá závorka s obsahem ošetření. Výška se proto NEDRŽÍ z dat (to by druhý řádek přetekl do dalšího); drží se `line-height`, takže dvouřádkový název je přesně dvakrát tak vysoký a rytmus zůstane. `flex: 1 1 auto` a `overflow: hidden`: název sahá až k ceně a uřízne vodicí tečky přesně na své hraně (viz `.cn-tecky`). Spodní odsazení se zápornou spodní mezerou je proto, aby řez neuťal dolní dotažnice — `overflow` ořezává na hraně vnitřního okraje, ne řádku. */ #cenik .cn-sluzba { flex: 1 1 auto; overflow: hidden; margin-right: 8.84px; padding-bottom: 8px; margin-bottom: -8px; line-height: 19px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 18px; color: #3C1D06; } /* Konec názvu za nezlomitelnou mezerou („– do 10 let“, „– zkouška“) má v MOBILNÍM rámci menší řez. Balíček to nemá (uzly 121:176 a 121:182 mají `fontSize: null`), hodnota je z Figmy přes MCP a leží v `cenik_tahy.json`. Bez toho vyšly ty dva řádky o 11 px širší a vodicí tečky se zkrátily na zbytek — naměřeno proti referenci. Desktop je jednolitý, tam se velikost dědí. `line-height: 0` proto, že menší řez sedí na TÉMŽE účaří, ale jeho řádkový box sahá níž a řádek by o pixel narostl; přes dva takové řádky se karta protáhla o 2 px a všechno pod nimi se posunulo (naměřeno +2,00 px od sedmého řádku dolů). Nulový proklad vyřadí ten box z výpočtu výšky řádku — glyfy se kreslí dál, jen do ní nemluví. */ #cenik .cn-upresneni { font-size: inherit; line-height: 0; } /* Číselný rozsah („15–20 min.“) se nesmí zlomit u pomlčky. */ #cenik .cn-nezlom { white-space: nowrap; } /* Vodicí tečky: v návrhu má každý řádek jinou šířku, protože se dopočítává z délky textu. Pružná výplň to udělá za nás a nerozejde se to, když zadavatel název služby změní. Vzor a barva jsou z návrhu (121:105). */ /* `border: dashed` nejde: prohlížeč si délku čárky určí sám a vyjdou z toho výrazné čárky místo teček. Návrh má `strokeDashPattern [1, 3]` a tloušťku 0,5 px — tedy 1 px tečka, 3 px mezera. Přesně to udělá opakovaný přechod. */ /* Tečky jsou u DOLNÍ hrany řádku (čára 121:105 je na y 554, řádek začíná na 534), ne na jeho středu. Posouvá je `position: relative`, ne `margin-top`: ten zvětšil řádek a karta narostla o 19,5 px i se vším pod ní — táž chyba, jakou jsem předtím udělal u ceny. Relativní posun do rozvržení nemluví a kontrola ho na prvku najde. */ /* Tečky jsou přesně ta čára, kterou Figma vydává do SVG: `stroke-width 0.5`, `stroke-linecap round`, `stroke-dasharray "1 3"`. Opakovaným lineárním přechodem to nešlo — ten dělá hranaté obdélníčky, kdežto kulaté zakončení dělá z každé čárky tečku. Kreslí se proto tímtéž SVG, jen dlaždicově opakovaným. Tečky NEJSOU sloupec vedle názvu, ale DOTAŽNICE uvnitř něj, hned za textem. Jako sloupec se totiž u zalomené položky neměly kam natáhnout: název zabral skoro celou šířku a na tečky zbylo jejich minimum, tedy jedna jediná — vypadalo to, že tam nejsou vůbec. Uvnitř navazují na poslední řádek textu, ať je krátký nebo dlouhý. Jsou proto ŠIROKÉ NASLEPO (563 px) a uřízne je hrana názvu, který sahá až k ceně. Aby ta šířka nezlomila řádek, ruší ji záporná pravá mezera — do rozvržení tak dotažnice mluví nulovou šířkou. */ /* Box je vysoký 3 px a tah leží uprostřed něj — stejně jako u dělicí čáry. Předchozí varianta (box 1 px zmenšený `scaleY(0.5)` s dlaždicí vysokou 0,5 px) ztenčovala tah DVAKRÁT: dlaždice vyplnila jen horní polovinu boxu a box se pak celý zmáčkl na polovinu. Z půlpixelového tahu zbyla čtvrtina — naměřeno proti referenci 62 % inkoustu Figmy — a na světlém pozadí nebyly tečky vidět. */ /* Cena se zarovnává k DOLNÍ hraně řádku, ne k horní. U jednořádkové položky je to totéž (řádek je vysoký jako ona), u zalomené to znamená „vedle posledního řádku názvu“ — tak, jak to dělá obsah knihy. Kdyby zůstala nahoře, ukazovala by na první řádek názvu a druhý by visel pod ní. Svisle sedí dotažnice na ÚČAŘÍ posledního řádku (`vertical-align`), takže se se zalomením posune sama; odstup od účaří je z dat. */ #cenik .cn-tecky { display: inline-block; vertical-align: baseline; width: 563px; margin: 0 -571.34px 0 8.34px; position: relative; top: 1.9775px; height: 3px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzMnIHZpZXdCb3g9JzAgMCA0IDMnPjxsaW5lIHgxPScwLjI1JyB5MT0nMS43NScgeDI9JzEuMjUnIHkyPScxLjc1JyBzdHJva2U9JyM3RTUyMzInIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48L3N2Zz4="); background-repeat: repeat-x; background-size: 4px 3px; } /* Cena sedí v návrhu o 1.02187 px níž než název — má menší písmo a jinou účaří. Posouvá se `position: relative`, NE `margin-top`: ten zvětšil řádek a posunul kartu i všechno pod ní o 7,7 px (naměřeno kontrolou). */ /* „až“ v ceně s rozsahem má vlastní řez, velikost i barvu (viz `_cena_az` v cenik_tahy.json — z Figmy, protože balíček u těch uzlů hlásí `unresolved-mixed-text-style`). I ta mezera před ním je menší. */ #cenik .cn-az { font-size: 14px; font-weight: 600; font-style: italic; color: #D19F68; } #cenik .cn-mezera { font-size: 16px; } /* Výška se drží z dat, ne z obsahu: kurzíva „až“ jinak zvětší řádkový box o 1 px a přes třináct řádků se to nasčítá — karta pak narostla o 9 px i se vším pod ní (naměřeno kontrolou). */ #cenik .cn-cena { flex: none; align-self: flex-end; margin-right: 28px; white-space: nowrap; position: relative; top: 1.02187px; height: 19px; line-height: 19px; font-family: "Jost", sans-serif; font-weight: 600; font-size: 17px; color: #A8845E; } /* --- mobilní pásmo (rámec 121:160) --- */ /* Ceník — původně vygeneroval build (_build/postav_cenik.py); ten se už nespouští, EDITUJ PŘÍMO. Rozměry a barvy jsou z rámce 121:68, obsah z _build/cenik_data.json. Na rozdíl od zbytku motivu tenhle blok NENÍ absolutně pozicovaný: ceník se rozbaluje, takže se výšky mění a obsah pod tím se musí posunout. Z návrhu se proto berou rozměry a mezery, ne souřadnice. */ /* `max-width` musí být. Plátno je široké jako rámec, ale VEŠKERÝ obsah je v něm vystředěný a nejširší prvek má 827 px (podtitul), karty 563 — takže se šířka rámce nepotřebuje na nic než na vystředění. Bez toho ceník na tabletu přetékal: pásmo tabletu vlastní rámec nemá (§ 1), takže platí desktopové rozměry, ale ceník stojí v toku a žádné `canvas.js` ho nezmenší jako plátno. V okně 900 px z něj byla vidět levá polovina a ceny končily za hranou. S `max-width` se jen zúží a obsah zůstane vystředěný — na desktopu se nemění nic, tam je okno vždycky širší než rámec. */ /* Ozdoba pod hlavičkou: vlasová čára přes šířku rámce a hvězdička na ní. Kreslí si ji každé plátno ze svého rámce (tady 121:88 a 121:85, na mobilu 121:225 a 121:224) — do hlavičky nepatří, ta je přilepená a ozdoba má s obsahem odrolovat. */ /* Pozadí kreslí SPOLEČNÁ vrstva `#fig-pozadi` — táž, jakou má homepage i studio. Do 15. 8. 2026 si ho ceník maloval sám jedním pravidlem na `` (podklad #F4F1EC, textura na 50 %, nad tím násobicí #F4F1EC, tedy skladba ceníkového rámce). Rozcházelo se to se zbytkem webu: NAMĚŘENO u levého okraje, ceník proti homepage −12,0 / −3,7 / −8,7 stupně jasu na y 400 / 800 / 1200. Zadavatel to reklamoval slovy „studio je totožné s homepage, ale ceník má tmavší“. Vrstva se sem vkládá jako první prvek `#cenik-stranka` (viz SABLONA_PHP) a kresbu jí dává blok `paticka:od`… ve `style.css`, který ceník linkuje stejně jako každá jiná stránka. VÝŠKA se bere ze stránky, ne z proměnné. Na homepage je okno vysoké `var(--fig-platno-h)`, kterou píše canvas.js z výšky plátna — jenže ceník plátno nemá, canvas.js se na něm ukončí hned na začátku a platila by ZÁLOŽNÍ hodnota 7898 px. Absolutně pozicovaná vrstva by tím natáhla rolovací plochu několikanásobně přes konec obsahu. `inset: 0` uvnitř `#cenik-stranka` (ten je `position: relative`) dá vrstvě přesně výšku obsahu — a roste s ní i při rozbalování skupin, na což pevná hodnota stejně nestačí. */ /* Kotví se na , NE na #cenik-stranka. Patičku vkládá `footer.php` AŽ ZA obsahem, takže je jeho sourozencem — vrstva ukotvená dovnitř `#cenik-stranka` na ni nedosáhne a patička zůstane na holé barvě. ZMĚŘENO na okně 1500: ostrá vodorovná hrana na y 1892 (jas 218,1 → 221,0), přesně kde `#cenik-stranka` končí (1893 px), a pod ní plochá barva bez textury. Zadavatel to hlásil jako „patička je tmavší, jakoby ji dělila vodorovná čára“. Vrstva proto stojí PŘED `#cenik-stranka` jako přímé dítě a `inset: 0` jí dá výšku celého dokumentu i s patičkou. */ /* Spodní pruh patičky přes CELOU šířku okna. Patička je široká přesně jako návrhový rámec (1440 px) a vodorovně ořezává, takže její vlastní pruh na širším okně skončí s ní a vedle prosvítá pozadí — zadavatel to hlásil jako „na ceníku má pruh jen 90 %“. Homepage a studio ho proto mají zopakovaný ve vrstvě pozadí (`pruh_desktopu()` ve slozit_web.py), jenže ta ho vkládá jen do `canvas.php` a `canvas-studio.php`. Ceník plátno nemá, tak si ho přidává sám — na spodní hranu vrstvy, která má výšku celého dokumentu. Na homepage je ukotvený přes `--fig-platno-h`, jenže tu na ceníku nikdo nenastavuje (není tam canvas.js) a záložních 7898 px je mimo stránku. V pásmech se SKRÝVÁ: tam pruh nesou `paticka-tablet.php` a `paticka-mobil.php`, které vkládá `footer.php`, a měly by se překrýt (mobilní je nižší, 52 px). */ /* `line-height` = výška textového boxu z návrhu. Bez toho si ji určí písmo a celý svislý rytmus se posune — na prvním renderu byl podtitul o 150 px níž. Mezery mezi bloky jsou rozdíly poloh z návrhu, ne odhad. */ /* Tvrdé zlomy podtitulu. Návrh je má v každém rámci jinde — desktop jeden, mobil tři — a markup je jeden pro obě pásma, takže se vysází všechny a nehodící se skryje. `display: none` zlom opravdu ODSTRANÍ, `br` se jinak zalamuje samo od sebe. */ /* Nadpis sekce je v návrhu odsazený od hrany karty (121:96 začíná 21 px za ní), ne zarovnaný s jejím okrajem. */ /* První sekce má v mobilním rámci pod nadpisem o 6 px víc než ostatní (50 px od horní hrany nadpisu proti 44). Na desktopu jsou obě stejné, takže se tam nic nemění. Je to rozdíl mezi SEKCEMI, ne mezi stavy — při rozbalení skupiny se nic nehne. */ /* Skupina: sbalená je pruh s radiálním přechodem, rozbalená bílá karta s obrysem. Obojí přesně jak to má návrh u 121:92 a 121:93. */ /* Přechod je v datech balíčku jen jako `radial-gradient(#F9F1E8, #FFFFFF)` bez polohy — skutečný je otočený a Figma ho do CSS převádí přibližně (proto ta její poznámka „rotation not supported“). Bere se proto její vlastní zápis, ověřený proti MCP: obrys #A8845E, krytí 0.6, poloměr 12, stín 0 0 80 rgba(0,0,0,.1). */ /* Mezera pod poslední skupinou v sekci se NEDÁVÁ — odstup k další sekci dělá `margin-top` sekce. Dvě sousedící mezery by se sečetly. */ /* Rozbalená karta má TÝŽ přechod, krytí i stín jako sbalený pruh — navíc jen obrys. Napoprvé jsem jí dal `background: none`, protože výpis dat ukázal u 121:92 jen `strokes`; přechod je ale ve `fills` a stránka pak vypadala úplně jinak. */ /* Karta má SVŮJ přechod, ne ten z pruhu — matice je jiná, protože box je 563×536 místo 563×54. Použít jeden na obojí znamená úplně jinou kresbu. */ /* HLAVA SKUPINY JE V OBOU STAVECH STEJNÁ — odsazení, písmo i proklad. Návrh ji má v rozbalené kartě níž (desktop o 10 px), protože ji vystřeďuje do výšky hlavy, a ta je sbalená 54 px, rozbalená 60. Text i šipka pak při rozkliku poskočily. Rozhodnutí zadavatele ze 14. 8.: platí poloha ze sbaleného pruhu. Mění se jen VÝŠKA hlavy — poloha čáry, řádků a celé karty zůstává z dat. */ /* Hlava rozbalené karty má pevnou výšku k dělicí čáře (121:158 na 60 px od horní hrany karty), aby řádky pod ní začaly přesně jako v návrhu. Odsazení textu se NEPŘEPISUJE — jen výška. */ /* Trojúhelníček z návrhu (121:155) — sbalený míří doprava, rozbalený dolů. V datech je otočený o −90° a 180°, tady to dělá `clip-path`. */ /* Rozbalená míří dolů (v návrhu rotace 180°). Box 10 × 10 je týž jako u sbalené, mění se jen tvar v něm — a s ním rámeček inkoustu, protože otočený trojúhelník je 8,66 × 7,5 místo 7,5 × 8,66. Proto se nepřetáčí `rotate`: rozměry i odsazení inkoustu jsou z dat, pro každý tvar své. */ /* Dělicí čára pod názvem skupiny (121:158). Má PŘECHODOVÝ tah, ne plnou barvu: `#A8845E` → `#D2BEA9` s koncovým krytím 0, takže se vytrácí. A je 328 px dlouhá — na desktopu tím končí přesně na hraně karty, na mobilu ji přesahuje, protože rámec vznikl kopií desktopového. Ověřeno v referenčním renderu: opravdu ji tam přesahuje. Je to VLASTNÍ prvek, ne `::before`: pseudoprvek se nedá změřit kontrolou. */ /* POZOR na vlasovou čáru. Box vysoký 0,5 px s OBRÁZKOVÝM pozadím (a gradient se počítá jako obrázek) Chrome zaokrouhlí na celé pixely — a když zlomek jeho `top` vyjde 0,5 a víc, obě hrany se zaokrouhlí na totéž číslo, výška je nula a nenamaluje se NIC. Čára pak měla správný rámeček 539 × 0,5 na y 508,98 a v renderu po ní nebyla ani stopa. Řešilo se to boxem 1 px zmenšeným `scaleY(0.5)`, jenže ten tah ztenčoval a v některých rasterizérech mizel taky. Teď je box vysoký 3 px — tedy tak, že se na nulu zaokrouhlit nemůže — a půlpixelový tah v něm kreslí SVG, totéž, jaké vydává Figma. Žádný `transform`. */ /* Řádek NENÍ zarovnaný účařím. `align-items: baseline` by o svislé poloze ceny rozhodly metriky obou písem — z dat návrhu by se nedala spočítat a s každou změnou velikosti by se tiše posunula. Takhle začínají oba boxy na horní hraně řádku a rozdíl mezi nimi je rozdíl korigovaných poloh z návrhu (`cena_dolu`), tedy měřitelná hodnota. */ /* Položky se NEZALAMUJÍ mezi sloupce — název, tečky a cena zůstanou vedle sebe. Zalamuje se jen TEXT NÁZVU, když se nevejde (viz `.cn-sluzba`). */ /* DLOUHÝ NÁZEV SE ZALOMÍ. Dřív tu bylo `white-space: nowrap` a k tomu `flex: 0 1 auto` — jenže minimální šířka pružné položky je u nezalomitelného textu jeho CELÁ šířka, takže se název neuměl ani zúžit, ani zlomit a místo toho vytlačil cenu z karty ven. Změřeno: na desktopu se nevešly 3 z 75 položek (nejhůř o 38 px), na mobilu 24 z 75 (nejhůř o 187 px, medián 69). Zkrátit texty tolik nejde — z nejdelší položky by musela zmizet celá závorka s obsahem ošetření. Výška se proto NEDRŽÍ z dat (to by druhý řádek přetekl do dalšího); drží se `line-height`, takže dvouřádkový název je přesně dvakrát tak vysoký a rytmus zůstane. `flex: 1 1 auto` a `overflow: hidden`: název sahá až k ceně a uřízne vodicí tečky přesně na své hraně (viz `.cn-tecky`). Spodní odsazení se zápornou spodní mezerou je proto, aby řez neuťal dolní dotažnice — `overflow` ořezává na hraně vnitřního okraje, ne řádku. */ /* Konec názvu za nezlomitelnou mezerou („– do 10 let“, „– zkouška“) má v MOBILNÍM rámci menší řez. Balíček to nemá (uzly 121:176 a 121:182 mají `fontSize: null`), hodnota je z Figmy přes MCP a leží v `cenik_tahy.json`. Bez toho vyšly ty dva řádky o 11 px širší a vodicí tečky se zkrátily na zbytek — naměřeno proti referenci. Desktop je jednolitý, tam se velikost dědí. `line-height: 0` proto, že menší řez sedí na TÉMŽE účaří, ale jeho řádkový box sahá níž a řádek by o pixel narostl; přes dva takové řádky se karta protáhla o 2 px a všechno pod nimi se posunulo (naměřeno +2,00 px od sedmého řádku dolů). Nulový proklad vyřadí ten box z výpočtu výšky řádku — glyfy se kreslí dál, jen do ní nemluví. */ /* Číselný rozsah („15–20 min.“) se nesmí zlomit u pomlčky. */ /* Vodicí tečky: v návrhu má každý řádek jinou šířku, protože se dopočítává z délky textu. Pružná výplň to udělá za nás a nerozejde se to, když zadavatel název služby změní. Vzor a barva jsou z návrhu (121:105). */ /* `border: dashed` nejde: prohlížeč si délku čárky určí sám a vyjdou z toho výrazné čárky místo teček. Návrh má `strokeDashPattern [1, 3]` a tloušťku 0,5 px — tedy 1 px tečka, 3 px mezera. Přesně to udělá opakovaný přechod. */ /* Tečky jsou u DOLNÍ hrany řádku (čára 121:105 je na y 554, řádek začíná na 534), ne na jeho středu. Posouvá je `position: relative`, ne `margin-top`: ten zvětšil řádek a karta narostla o 19,5 px i se vším pod ní — táž chyba, jakou jsem předtím udělal u ceny. Relativní posun do rozvržení nemluví a kontrola ho na prvku najde. */ /* Tečky jsou přesně ta čára, kterou Figma vydává do SVG: `stroke-width 0.5`, `stroke-linecap round`, `stroke-dasharray "1 3"`. Opakovaným lineárním přechodem to nešlo — ten dělá hranaté obdélníčky, kdežto kulaté zakončení dělá z každé čárky tečku. Kreslí se proto tímtéž SVG, jen dlaždicově opakovaným. Tečky NEJSOU sloupec vedle názvu, ale DOTAŽNICE uvnitř něj, hned za textem. Jako sloupec se totiž u zalomené položky neměly kam natáhnout: název zabral skoro celou šířku a na tečky zbylo jejich minimum, tedy jedna jediná — vypadalo to, že tam nejsou vůbec. Uvnitř navazují na poslední řádek textu, ať je krátký nebo dlouhý. Jsou proto ŠIROKÉ NASLEPO (352 px) a uřízne je hrana názvu, který sahá až k ceně. Aby ta šířka nezlomila řádek, ruší ji záporná pravá mezera — do rozvržení tak dotažnice mluví nulovou šířkou. */ /* Box je vysoký 3 px a tah leží uprostřed něj — stejně jako u dělicí čáry. Předchozí varianta (box 1 px zmenšený `scaleY(0.5)` s dlaždicí vysokou 0,5 px) ztenčovala tah DVAKRÁT: dlaždice vyplnila jen horní polovinu boxu a box se pak celý zmáčkl na polovinu. Z půlpixelového tahu zbyla čtvrtina — naměřeno proti referenci 62 % inkoustu Figmy — a na světlém pozadí nebyly tečky vidět. */ /* Cena se zarovnává k DOLNÍ hraně řádku, ne k horní. U jednořádkové položky je to totéž (řádek je vysoký jako ona), u zalomené to znamená „vedle posledního řádku názvu“ — tak, jak to dělá obsah knihy. Kdyby zůstala nahoře, ukazovala by na první řádek názvu a druhý by visel pod ní. Svisle sedí dotažnice na ÚČAŘÍ posledního řádku (`vertical-align`), takže se se zalomením posune sama; odstup od účaří je z dat. */ /* Cena sedí v návrhu o 0.02 px níž než název — má menší písmo a jinou účaří. Posouvá se `position: relative`, NE `margin-top`: ten zvětšil řádek a posunul kartu i všechno pod ní o 7,7 px (naměřeno kontrolou). */ /* „až“ v ceně s rozsahem má vlastní řez, velikost i barvu (viz `_cena_az` v cenik_tahy.json — z Figmy, protože balíček u těch uzlů hlásí `unresolved-mixed-text-style`). I ta mezera před ním je menší. */ /* Výška se drží z dat, ne z obsahu: kurzíva „až“ jinak zvětší řádkový box o 1 px a přes třináct řádků se to nasčítá — karta pak narostla o 9 px i se vším pod ní (naměřeno kontrolou). */ /* =================================================== PÁSMOVÁ PRAVIDLA PŘELOŽENÁ NA @media (1. 9. 2026) Původně `html.pasmo-*` třídy nastavované JS podle šířky okna (viz proc/pasmo_tridou.py) — zadavatel se rozhodl tu křehkost (třída se nemusí přepočítat při každé změně velikosti okna) vyměnit za standardní @media, které řeší prohlížeč sám. Vysvětlení náhrady odebrané třídy/:not() za `:root` (kvůli specificitě) je v proc/pasma_media.py. Původní vysvětlující komentáře jednotlivých pravidel ZŮSTÁVAJÍ výše v souboru na svém místě, jen samotné pravidlo se přesunulo sem dolů. */ @media (max-width:767px){ html:root .fig-pata-pruh-cenik{ display: none; } html:root #cenik{ position: relative; width: 402px; max-width: 100%; margin: 0 auto; padding-bottom: 80px; } html:root #cenik .cn-ozdoba-cara{ position: absolute; top: 81.5px; left: 26px; right: 54px; height: 1px; background: #D2BEA9; } html:root #cenik .cn-ozdoba-hvezda{ position: absolute; top: 74px; right: 31px; width: 16px; height: 16px; background: url("assets/obrazky/imgVector37.svg") no-repeat center/contain; } html:root body.page-template-page-cenik, html:root body.stranka-cenik{ position: relative; } html:root body.page-template-page-cenik > #fig-pozadi, html:root body.stranka-cenik > #fig-pozadi{ position: absolute; inset: 0; height: auto; } html:root body.page-template-page-cenik .fig-pozadi-okno, html:root body.stranka-cenik .fig-pozadi-okno{ height: 100%; } html:root body.page-template-page-cenik .fig-pata-pruh-cenik, html:root body.stranka-cenik .fig-pata-pruh-cenik{ position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: #F1EEE9; pointer-events: none; } html:root .fig-pata-pruh-cenik{ display: none; } html:root #cenik-stranka{ position: relative; } html:root #cenik .cn-hero{ margin: 0; padding-top: 140.312px; text-align: center; } html:root #cenik .cn-hero-1{ display: block; line-height: 53px; font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 39px; color: #A8845E; } html:root #cenik .cn-hero-2{ display: block; margin-top: -11.1056px; line-height: 66px; font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 49px; color: #7E5232; } html:root #cenik .cn-podtitul{ max-width: 365px; height: 69px; margin: 3.80687px auto 0; text-align: center; font-family: "Jost", sans-serif; font-weight: 300; font-size: 15px; color: #7E5232; line-height: 20px; } html:root #cenik .cn-zlom-d{ display: none; } html:root #cenik .cn-zlom-m{ display: inline; } html:root #cenik .cn-sekce{ width: 352px; margin: 46.0362px auto 0; } html:root #cenik .cn-sekce:first-of-type{ margin-top: 46.0231px; } html:root #cenik .cn-sekce-nadpis{ height: 59px; margin: 0 0 -15.0363px; padding-left: 21px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 29px; color: #7E5232; line-height: 30px; } html:root #cenik .cn-sekce:first-of-type .cn-sekce-nadpis{ margin-bottom: -9.03625px; } html:root #cenik .cn-skupina{ position: relative; border-radius: 12px; margin-bottom: 10px; } html:root #cenik .cn-skupina::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNTYzIDU0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxyZWN0IHg9JzAnIHk9JzAnIGhlaWdodD0nMTAwJScgd2lkdGg9JzEwMCUnIGZpbGw9J3VybCgjZyknLz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzEwJyBncmFkaWVudFRyYW5zZm9ybT0nbWF0cml4KC0yMC4xMzYgMi4wODMxIC0zOC42OTYgLTAuNzQ0NzggNTM3Ljk2IC00LjgyNzgpJz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjQ5LDI0MSwyMzIpJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjU1LDI1NSwyNTUpJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="); background-size: 100% 100%; opacity: 0.6; box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1); } html:root #cenik .cn-skupina:last-child{ margin-bottom: 0; } html:root #cenik .cn-skupina.je-otevrena{ border-radius: 12px; } html:root #cenik .cn-skupina.je-otevrena::before{ background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNTYzIDUzNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cmVjdCB4PScwJyB5PScwJyBoZWlnaHQ9JzEwMCUnIHdpZHRoPScxMDAlJyBmaWxsPSd1cmwoI2cpJy8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSdnJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPScxMCcgZ3JhZGllbnRUcmFuc2Zvcm09J21hdHJpeCgtMjAuMTM2IDIwLjY3NyAtMzguNjk2IC03LjM5MjcgNTM3Ljk2IC00Ny45MjEpJz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjQ5LDI0MSwyMzIpJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2IoMjU1LDI1NSwyNTUpJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="); border: 1px solid #A8845E; } html:root #cenik .cn-skupina-hlava{ margin: 0; } html:root #cenik .cn-prepinac{ position: relative; display: flex; align-items: flex-start; width: 100%; min-height: 54px; padding: 14.0263px 45px 0; border: 0; background: none; text-align: left; cursor: pointer; } html:root #cenik .cn-skupina.je-otevrena .cn-prepinac{ min-height: 60px; height: 60px; } html:root #cenik .cn-nazev{ line-height: 30px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; color: #3C1D06; } html:root #cenik .cn-sipka{ position: absolute; left: 25.5px; top: 23.67px; width: 7.5px; height: 8.66px; background: #A8845E; transition: none; clip-path: polygon(0 0, 100% 50%, 0 100%); } html:root #cenik .cn-skupina.je-otevrena .cn-sipka{ left: 24.92px; top: 24.25px; width: 8.66px; height: 7.5px; clip-path: polygon(0 0, 100% 0, 50% 100%); } html:root #cenik .cn-prepinac:focus-visible{ outline: 2px solid #A8845E; outline-offset: 2px; } html:root #cenik .cn-telo{ position: relative; } html:root #cenik .cn-telo[hidden]{ display: none; } html:root #cenik .cn-radky{ list-style: none; margin: 0; /* Vpravo se NEODSAZUJE: cena si odstup od hrany karty drží sama (`margin-right`). Sečtení obojího ji posunulo o 24,5 px dovnitř. */ padding: 30.02px 0 30.98px 24px; } html:root #cenik .cn-cara{ display: none; } html:root #cenik .cn-skupina.je-otevrena .cn-cara{ display: block; position: absolute; left: 24px; top: -2px; width: 328px; height: 3px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MzknIGhlaWdodD0nMycgdmlld0JveD0nMCAwIDUzOSAzJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2MnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScwJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNBODg0NUUnIHN0b3Atb3BhY2l0eT0nMScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0ncmdiKDIxMCwxOTAsMTY5KScgc3RvcC1vcGFjaXR5PScwJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0nMCcgeT0nMS43NScgd2lkdGg9JzUzOScgaGVpZ2h0PScwLjUnIGZpbGw9J3VybCgjYyknLz48L3N2Zz4="); background-repeat: no-repeat; /* Obrázek je dlouhý jako celý TAH (539 px), prvek jen jako jeho VIDITELNÁ část (328 px) — zbytek se ořízne, přesně jak to dělá rámec v návrhu. Kdyby se přechod natáhl na viditelnou část, vytratil by se dřív. */ background-size: 539px 3px; } html:root #cenik .cn-radek{ position: relative; display: flex; align-items: flex-start; min-height: 19px; margin-bottom: 14px; } html:root #cenik .cn-radek:last-child{ margin-bottom: 0; } html:root #cenik .cn-radek{ flex-wrap: nowrap; } html:root #cenik .cn-sluzba{ flex: 1 1 auto; overflow: hidden; margin-right: 8.02px; padding-bottom: 8px; margin-bottom: -8px; line-height: 19px; font-family: "Jost", sans-serif; font-weight: 500; font-size: 16px; color: #3C1D06; } html:root #cenik .cn-upresneni{ font-size: 14px; line-height: 0; } html:root #cenik .cn-nezlom{ white-space: nowrap; } html:root #cenik .cn-tecky{ display: inline-block; vertical-align: baseline; width: 352px; margin: 0 -360.53px 0 8.53px; position: relative; top: 0.98px; height: 3px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzMnIHZpZXdCb3g9JzAgMCA0IDMnPjxsaW5lIHgxPScwLjI1JyB5MT0nMS43NScgeDI9JzEuMjUnIHkyPScxLjc1JyBzdHJva2U9JyM3RTUyMzInIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48L3N2Zz4="); background-repeat: repeat-x; background-size: 4px 3px; } html:root #cenik .cn-az{ font-size: 14px; font-weight: 600; font-style: italic; color: #D19F68; } html:root #cenik .cn-mezera{ font-size: 16px; } html:root #cenik .cn-cena{ flex: none; align-self: flex-end; margin-right: 22px; white-space: nowrap; position: relative; top: 0.02px; height: 19px; line-height: 19px; font-family: "Jost", sans-serif; font-weight: 600; font-size: 16px; color: #A8845E; } } @media (min-width:768px) and (max-width:1199px){ html:root .fig-pata-pruh-cenik{ display: none; } html:root .fig-pata-pruh-cenik{ display: none; } }