/* * Tabletové a mobilní pásmo + nová hlavička. Původně vygeneroval * `python _build/slozit_web.py`; ten se už nespouští — EDITUJ PŘÍMO. */ /* * Přepínání pásem. Žádná interpolace mezi rámci — model z NAVAZANI § 15.6. * * >= 1200 desktopové plátno * 768-1199 tabletové plátno * < 768 mobilní plátno * * PROČ TŘÍDA NA A NE MEDIA QUERY * Media query měří šířku okna, `canvas.js` a `pasma.js` měří * `documentElement.clientWidth` — a ty dvě čísla se liší o lištu posuvníku. * Na hraně pásma se pak rozejdou: ZMĚŘENO, že `@media (max-width: 1199px)` * v okně 1200 px změnilo 6 464 pixelů stránky (kroužky s textem po obvodu * a část sazby), protože se stránka stihla vysázet ve dvou různých stavech. * S 1199 px šířky ani na jednu stranu nic neposkočí. Třídu nasazuje pasma.js * podle téhož čísla, kterým se řídí měřítko, takže se rozejít nemůžou. * * Bez JavaScriptu zůstane v DOM viditelné desktopové plátno a `canvas.js` ho * stejně nezmenší — to je přesně stav, ve kterém byl web před zavedením pásem. * * Neaktivní plátna jsou display:none, takže je odečítač obrazovky nečte ani * nenabízí v pořadí tabulátoru, a jejich obrázky (loading="lazy") se vůbec * nestáhnou. Pro vyhledávače v DOM zůstávají — daň varianty B z GUIDE § 5.4. */ /* `#fig-hlavicka` tu do 22. 8. 2026 bylo taky — hlavičky byly tři a dvě se v každém pásmu schovávaly. Teď je JEDNA pro všechna pásma, takže se skrývat nesmí; mění se jí jen rozměry (blok hlavičky na konci souboru). *//* Jeden markup: pravidlo `html.pasmo-tablet #stage-wrap, html.pasmo-mobil #stage-wrap` zahozeno — schovávalo by jediné plátno forku. Viz proc/pasmo_tridou.py. */ /* Než se skript ozve, neukazuj nová plátna — jinak by pod desktopovým probleskla. */ /* -------------------------------------------------------------------- POZADÍ. Desktop ho kreslí CSS vrstvou #fig-pozadi, ne uzly v plátně. Tabletový a mobilní rámec si ho ale nesou uvnitř jako dva obrovské uzly (textura 1554 px a plocha 1626 px na 768/402 px širokém návrhu). Ty se z plátna vyjmuly a nahrazuje je tohle: TÝŽ obrázek jako na desktopu, jen zapsaný přímo na . Nezmenšuje se s plátnem. Je to celoplošná kresba, ne prvek rozvržení — a i sám návrh s ní tak zachází: mobilní rámec je 402 px široký, ale pozadí v něm má 1554 px a je vidět jen jeho střed. Šířka 1740 px a výška 7400 px jsou rozměry, ve kterých ho kreslí desktop; pod obrázkem pokračuje barva jeho vlastního okraje. -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- REZERVAČNÍ FORMULÁŘ NA TABLETU — uzly 114:66–114:92 (rámec 88:228). Tablet je blíž DESKTOPU než mobilu: nadpis má vedle sebe s kroužkem, ne pod sebou, a pole jsou ve DVOU sloupcích. Shodné s desktopem jsou i písma popisků (17/600) a odsazení popisek→pole (7 px) — měnit se musí rozměry, mřížka a tlačítka. Rozměry z dat (panel 700 × 766 na 370,3274; hodnoty vůči jeho hraně): panel 700 × 766, odsazení 24 px do stran, 58 nahoře, 16 dole nadpis Cinzel 600 27 px #3C1D06, kroužek 95 × 95 mezi slovy mřížka 2 sloupce po 311 px, mezera 30 px, řádky po 92 px popisek 17/600 #3C1D06, 7 px nad polem pole 311 × 42, poloměr 32, bílé podnadpis 17/600, 40 px nad, 3 px pod storno 504 px široké, 14 px, řádek 20 px (naměřeno na referenci) odeslat 155 × 42, písmo 18/600 #EBE7DD na #A8845E zavřít 89 × 36, písmo 16/600 #3C1D06, tah #A8915E Tlačítka jsou POD SEBOU a vystředěná (na desktopu jsou vedle sebe). -------------------------------------------------------------------- */ /* Dva sloupce musí být vypsané i nad 900 px — obecné pravidlo motivu je dává jen pod tou hranicí a tabletové pásmo sahá do 1439. */ /* -------------------------------------------------------------------- REZERVAČNÍ FORMULÁŘ NA MOBILU — uzel 105:406 „Mobilní formulář“. Dialog je jeden pro všechna pásma (stojí mimo plátna jako sourozenec #stage-wrap), takže se nic nekopíruje — jen se pro mobil přepíše geometrie. Většina už sedí z desktopu: pole 42 px s poloměrem 32 na bílé, tlačítko #A8845E s textem #EBE7DD, obrys #A8915E, panel s poloměrem 12 a stínem 0 0 80 rgba(0,0,0,.1). Návrh mění rozměry a typografii. Rozměry z návrhu (rámec 402 px, panel 28..371 × 95..1043): panel 343 × 948, odsazení 16 px do stran nadpis Cinzel 600 32 px, DVA řádky pod sebou po 34 px (116 a 150) popisek Cinzel 600 16 px (desktop má 17) pole 311 × 42, rozteč polí 85 px odeslat 182 × 50,62, poloměr 38,57, písmo 21,49 px zavřít 91 × 42, písmo 16 px -------------------------------------------------------------------- */ /* Šířka je 343 px z návrhu, ale STROP, ne pevná hodnota: na telefonu užším než 343 px se mezera k okraji smrskne až na nulu, místo aby panel přetekl. `overflow-x: hidden` je nutné — jiskry z návrhu zasahují do odsazení panelu a bez toho na ně dialog nabídne vodorovný posuvník. Svislý posuvník zůstává, formulář je 948 px vysoký a na nižší obrazovku se nevejde. */ /* Nadpis je na mobilu na dvou řádcích a BEZ kroužku s textem po obvodu — ten má návrh jen na desktopu, kde stojí mezi slovy. Kroužek se skryje a jeho obal se vyřadí z toku, aby se „Rezervační“ a „formulář“ dostaly pod sebe; jiskry v něm zůstanou a zakotví se na panel. */ /* `padding-top: 5px` proti `margin-bottom` o 5 menšímu: nadpis se posune dolů, ale VÝŠKA BLOKU zůstane, takže pole pod ním nikam neutečou. Naměřeno — inkoust „Rezervační“ začínal 5 px nad návrhem (21 proti 26 od hrany panelu), protože se 32px písmo v řádku 34 px centruje jinak než v boxu 43 px, jaký mu dává návrh. Šířka přitom sedí (190 proti 191 px), velikost je správně. */ /* Obal jisker se STATICKY smrskne na nulu a hlavně přestane být pozicovaný — jiskry se tím zavěsí přímo na panel. Napoprvé jsem mu dal `position: absolute` s nulovým rozměrem a `right` se pak počítal proti nulové šířce, takže velká jiskra skončila mimo panel. */ /* Polohy z návrhu vůči HRANĚ PANELU (panel stojí na 28,95): 42 px #7E5232 314,108 → 286,13 velká vpravo nahoře 25 px #A8845E 66,153 → 38,58 14 px #DBC593 52,133 → 24,38 Velká se kotví zprava: 343 − (286 + 42) = 15. `!important` musí být: polohu nesou jiskry v inline stylu z desktopu. POZOR — ODSAZENÍ PANELU SE NEODEČÍTÁ. Napoprvé jsem od těch čísel odečetl padding (16 a 21) v domnění, že se absolutní potomek měří od VNITŘNÍ hrany. Měří se od PADDING BOXU, a ten odsazení už zahrnuje, takže se odečetlo dvakrát. Změřeno: velká jiskra vyšla 17 px vpravo a 20 px nad návrhem, malá 15 px vlevo a 22 px nad ním — přesně o ten padding. */ /* Rozteč polí 85 px = popisek 22 + mezera 6 + pole 42 + 15. */ /* Zalomení storno textu se mezi pásmy liší (§ 15.19, § 15.22), takže jsou v markupu tři verze a přepínají se. `br { display: none }` zlom opravdu vypne. Ve výchozím stavu (desktop) svítí jen ta bez přípony. */ .fig-dialog-storno-mobil, .fig-dialog-storno-tablet { display: none; } .fig-zlom-mobil { display: none; } /* Pořadí v markupu je zavřít → děkujeme → odeslat (desktop je má vedle sebe). `column-reverse` z pásma pod 620 px to obrátí na odeslat → děkujeme → zavřít, jenže návrh má „Děkujeme…“ NAHOŘE jako poslední dva řádky storno textu (uzel 105:421), teprve pod ním tlačítka. Proto `column` s výslovným pořadím — spoléhat na obrácení tady nestačí. Tlačítka navíc NEJSOU přes celou šířku, mají rozměr z návrhu. */ /* VÝŠKA ŘÁDKU 19 px. Uzel 105:421 ji má v datech u všech pěti řádků, jenže já ji nenastavil vůbec a dědila se výchozí z písma — naměřeno 20 px ve storno textu a 22 px v poděkování proti návrhovým 19. Jost má `normal` kolem 1,45, takže se to nikdy netrefí samo. Mezi textem a poděkováním má návrh prázdný řádek (odstavec se zerowidth mezerou, taky 19 px). */ /* Šířka 308 px z návrhu (uzel 105:421), ne celých 311 px sloupce — o ty tři pixely se láme text. */ /* POZOR na pokušení dát totéž pozadí i na #stage-wrap-*. Zkoušel jsem to jako domnělou opravu světlých fotek pilířů — nepomohlo to (příčina byla jinde, viz § 15.16) a navíc vznikl viditelný svislý šev na hranách plátna, kde se pozadí okna potkalo s pozadím plátna. */ /* -------------------------------------------------------------------- OKNO PŘES CELOU ŠÍŘKU. Plátno je užší než okno, ale kresba v něm sahá dál (tabletový rámec má 1440 px na 768px plátně, mobilní kreslí sousední karty carouselů za svou hranou). Bez tohohle obalu o to naroste `documentElement.scrollWidth` a naskočí vodorovný posuvník — ZMĚŘENO 413 px přetoku na okně 900 px a 445 px na 402 px. `overflow: hidden` musí sedět TADY, na prvku přes celou šířku, ne na plátně: na plátně by uřízlo i to, co má být vidět (text „Spojujeme léta praxe“ na tabletu přesahuje 768px sloupec na obě strany). Takhle se ořezává až na hraně okna, přesně jako rámec v návrhu. -------------------------------------------------------------------- */ .fig-pasmo-okno { position: relative; width: 100%; overflow: hidden; } /* -------------------------------------------------------------------- KARUSEL PILÍŘŮ (§ 15.17). `touch-action: pan-y` musí zůstat — bez něj si prohlížeč vezme vodorovný tah pro svoje gesto a `pointerup` přijde s nulovým posunem, takže by karusel nereagoval. Svislé rolování stránky zůstává prstu k dispozici. -------------------------------------------------------------------- */ .fig-pilire-karusel { transition: transform .45s cubic-bezier( .22, .61, .36, 1 ); } /* `touch-action` jen když karusel opravdu jede. Nad hranicí, kde se všechny tři pilíře vejdou vedle sebe, se chová jako desktop a prstu se nesmí brát nic. Plocha pro tah leží POD kartami, takže bere jen prázdná místa mezi nimi — kliky na karty jdou dál na kartu. */ .fig-pilire-karusel.je-karusel { touch-action: pan-y; } /* -------------------------------------------------------------------- KARUSEL CENÍKU (§ 15.21). Řada se posouvá vodorovně, prostřední karta se zvedne o `--zvednuti` (na tabletu 30 px z návrhu, na mobilu 0). `--zaklad` srovná karty na společnou základnu — v návrhu je prostřední nakreslená výš, ale zvýraznit se má vždycky ta uprostřed, ne ta konkrétní. -------------------------------------------------------------------- */ .fig-cenik-karusel { position: absolute; left: 0; top: 0; width: 100%; height: 0; touch-action: pan-y; } .fig-cenik-radek { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform: translateX( var( --cenik-posun, 0px ) ); transition: transform .45s cubic-bezier( .22, .61, .36, 1 ); } .fig-cenik-karta { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform: translateY( var( --zaklad, 0px ) ); transition: transform .45s cubic-bezier( .22, .61, .36, 1 ); } .fig-cenik-karta.je-zvyrazneno { transform: translateY( calc( var( --zaklad, 0px ) - var( --zvednuti, 0px ) ) ); } /* Tečky jsou ovladatelné, ne jen ukazatel. */ .fig-cenik-tecka { cursor: pointer; transition: background-color .25s ease; } /* Karta mimo střed se dá kliknutím vystředit, tak ať to je poznat. Na kartě uprostřed zůstává kurzor obyčejný — tam klik patří obsahu („Zobrazit více“), ne karuselu. */ .fig-cenik-karta:not(.je-zvyrazneno) { cursor: pointer; } @media ( prefers-reduced-motion: reduce ) { .fig-cenik-radek, .fig-cenik-karta { transition: none; } } .fig-pilire-karusel.je-karusel .fig-pilire-plocha { cursor: grab; } .fig-pilire-plocha { pointer-events: auto; } @media ( prefers-reduced-motion: reduce ) { .fig-pilire-karusel { transition: none; } } #stage-wrap-tablet{clip-path:inset(0 -100vw)} #stage-wrap-mobil{overflow:hidden;overflow:clip;overflow-clip-margin:183px} /* ================================================================= Pásmo „tablet“ — rámec 62:42, plátno 768 × 8283 px. Třídy mají předponu `tb`, protože krok 02 čísluje pravidla zvlášť pro každé plátno a `fx7` znamená v každém něco jiného. ================================================================= */ #stage-wrap-tablet{position:relative;width:768px;height:8283px;margin:0 auto;transform-origin:0 0} #stage-wrap-tablet .fig-platno{position:absolute;top:0;left:-336px;width:1440px;height:100%} /* Kořen plátna nesmí mít vlastní výplň, jinak zakryje CSS pozadí . Desktop dělá totéž se svým uzlem 1:19. */ #stage-wrap-tablet [data-node-id="62:42"]{background-color:transparent} /* Barvu si nedědí sám od sebe (UA mu dává color:-webkit-link) a motiv ji vrací jen odkazům BEZ třídy (`a:not([class])`), protože na desktopu ji každý takový odkaz nese ve vlastní třídě. V těchhle dvou rámcích ji ale nese skupina s display:contents, takže odkazy v navigaci vycházely modré. `:where()` je tu POVINNÉ. Bez něj má pravidlo specificitu (1,0,1) a přebije i odkaz, který SVOU barvu má ve třídě — třeba tlačítko „Objednat se“ (62:62, #F1EDE4 proti .tb16 se specificitou (0,1,0)). Text pak zdědil barvu okolí místo návrhové. `:where()` specificitu vynuluje, takže vlastní třída uzlu vyhraje a odkazy bez barvy si dědění pořád vezmou. */ :where(#stage-wrap-tablet a){color:inherit} #stage-wrap-tablet a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #stage-wrap-tablet a:hover{opacity:.72} #stage-wrap-tablet a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* ------------------------------------------------------------------ Plátno stránky je 768 px (návrhová šířka rámce 62:42). Vrstva s kresbou si nechává šířku rámce z návrhu (1440 px), aby procenta v calc() vycházela stejně jako v návrhu, a posune se o -336 px. Přetok pozadí přes okraje plátna je záměr — na širším okně díky němu nezůstane holá plocha. Svisle se ořezává (rámec v návrhu potomky ořezává), do stran ne. `overflow` použít nejde: jedna osa na hidden zakáže visible i té druhé a přetok pozadí by zmizel. clip-path ořízne jen shora/zdola. ------------------------------------------------------------------ */ #stage-wrap-tablet .fig-platno{left:-336px;width:1440px} /* Pravidlo ořezu stojí VÝŠ (jedno místo pro obě pásma, počítá se z `RAMCE`). Odůvodnění nad tímhle komentářem je z mezivýstupu a pro mobil od 20. 8. 2026 NEPLATÍ ve dvou věcech: do stran se pouští až do `orez_sirka` px a ořezává `overflow: clip`, ne `clip-path` — ten mění vyhlazování písma uvnitř plátna. */ /* ---- přilepená hlavička pásma ---------------------------------- */ #fig-hlavicka-tablet{position:fixed;left:0;right:0;top:0;height:75px;z-index:100;--doba-odkaz:.2s} #fig-hlavicka-tablet .fig-hlavicka-deska{position:relative;width:768px;height:0;margin:0 auto;transform-origin:0 0} /* Vnitřní vrstva si drží šířku rámce jako plátno, aby procenta v calc() vycházela stejně jako v návrhu. */ #fig-hlavicka-tablet .fig-hlavicka-vrstva{position:absolute;top:0;left:-336px;width:1440px;height:0} /* Položky navigace se nesmí zalomit — „Reference“ je o písmeno delší než původní „Rference“ a v původním rámečku se zlomí. */ #fig-hlavicka-tablet p,#fig-hlavicka-tablet a{white-space:nowrap} :where(#fig-hlavicka-tablet a){color:inherit} #fig-hlavicka-tablet a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #fig-hlavicka-tablet a:hover{opacity:.72} #fig-hlavicka-tablet a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* ---- překlápěcí karty ---------------------------------------- */ /* Mechanismus je desktopový a `.fig-flip*` v style.css je až na jedno pravidlo NEscopovaný, takže platí i tady. Rub biografie se skládá z absolutně umístěných uzlů rámce 88:228, takže žádná další pravidla nepotřebuje. */ #stage-wrap-tablet{--doba:.62s;--doba-najeti:.28s} #stage-wrap-tablet .fig-flip-deska{width:1440px;height:8283px} /* ---- vějíř galerie: rozprostření hromádky rolováním ----------- */ #stage-wrap-tablet{--vejir-t:0;--vejir-posun:calc(168px * var(--vejir-t))} /* Plátno roste s vějířem, jinak by spodek ořízlo okno pásma. */ #stage-wrap-tablet{height:calc(8283px + var(--vejir-posun))} /* Zbytek stránky pod galerií se odsune dolů. Krytí odkazu se vyjmenovává znovu — `#stage-wrap-tablet a` je (1,0,1) a shorthand `transition` by odkazům přechod zrušil. */ #stage-wrap-tablet .fig-vejir-posun{translate:0 var(--vejir-posun);transition:opacity .2s ease} /* Spínač už není potřeba — vějíř se ovládá rolováním. */ #stage-wrap-tablet .fig-vejir-spinac{display:none} #stage-wrap-tablet [data-node-id="62:307"].fig-vejir-karta{--kt:clamp(0, calc((var(--vejir-t) - 0.30) / 0.70), 1);translate:calc(56.31px * var(--kt)) calc(-23.85px * var(--kt));width:calc(306.091px + -9.496px * var(--kt));height:calc(369.106px + -6.893px * var(--kt))} #stage-wrap-tablet [data-node-id="62:307"].fig-vejir-karta>*{rotate:calc(-6.17deg * var(--kt))} #stage-wrap-tablet [data-node-id="62:311"].fig-vejir-karta{--kt:clamp(0, calc((var(--vejir-t) - 0.24) / 0.70), 1);translate:calc(97.77px * var(--kt)) calc(-51.88px * var(--kt));width:calc(282.066px + 13.781px * var(--kt));height:calc(351.400px + 10.264px * var(--kt))} #stage-wrap-tablet [data-node-id="62:311"].fig-vejir-karta>*{rotate:calc(6.03deg * var(--kt))} #stage-wrap-tablet [data-node-id="62:306"].fig-vejir-karta{--kt:clamp(0, calc((var(--vejir-t) - 0.18) / 0.70), 1);translate:calc(-233.96px * var(--kt)) calc(119.66px * var(--kt));width:calc(295.835px + 10.274px * var(--kt));height:calc(361.655px + 7.464px * var(--kt))} #stage-wrap-tablet [data-node-id="62:306"].fig-vejir-karta>*{rotate:calc(-7.98deg * var(--kt))} #stage-wrap-tablet [data-node-id="62:310"].fig-vejir-karta{--kt:clamp(0, calc((var(--vejir-t) - 0.12) / 0.70), 1);translate:calc(135.65px * var(--kt)) calc(13.44px * var(--kt));width:calc(288.846px + 34.398px * var(--kt));height:calc(356.484px + 24.673px * var(--kt))} #stage-wrap-tablet [data-node-id="62:310"].fig-vejir-karta>*{rotate:calc(11.4deg * var(--kt))} #stage-wrap-tablet [data-node-id="62:309"].fig-vejir-karta{--kt:clamp(0, calc((var(--vejir-t) - 0.06) / 0.70), 1);translate:calc(-162.10px * var(--kt)) calc(185.81px * var(--kt));width:calc(323.246px + 7.013px * var(--kt));height:calc(381.158px + 4.759px * var(--kt))} #stage-wrap-tablet [data-node-id="62:309"].fig-vejir-karta>*{rotate:calc(-12.87deg * var(--kt))} #stage-wrap-tablet [data-node-id="62:308"].fig-vejir-karta{--kt:clamp(0, calc(var(--vejir-t) / 0.70), 1);translate:calc(95.78px * var(--kt)) calc(227.26px * var(--kt));width:calc(263.434px + 46.477px * var(--kt));height:calc(337.117px + 34.720px * var(--kt))} #stage-wrap-tablet [data-node-id="62:308"].fig-vejir-karta>*{rotate:calc(8.72deg * var(--kt))} /* Vypnutý pohyb: vějíř rovnou rozevřený i s odkazem na portfolio. */ @media (prefers-reduced-motion:reduce){#stage-wrap-tablet{--vejir-t:1}} @media print{#stage-wrap-tablet{--vejir-t:0 !important}} /* ---- svislá spojnice pod pilíři ------------------------------- */ /* Popisky se s desktopovým blokem posunuly (§ 15.16), takže čára začínala uvnitř textu. Aktualizovaný návrh (uzel 88:369) ji má 74 px od y = 2178. Vnější prvek drží výšku rámečku, vnitřní délku čáry — musí se přepsat oba. */ /* ---- ceník: aktivní a neaktivní karta ------------------------- */ /* Barvy podle ROLE uzlu, obě sady z dat návrhu (cenik.py). Aktivní je vždycky ta uprostřed, ne ta, kterou tak nakreslil návrh — proto se to přepíná třídou, ne zapeče do uzlů. */ #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:196"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:196"]{border:0;opacity:0.2} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:198"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:198"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:199"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:199"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:200"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:200"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:201"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:201"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:202"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:202"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:203"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:203"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:210"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:210"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:211"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:211"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:212"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:212"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:213"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:213"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:214"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:214"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:216"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:216"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:221"]{border:1px solid #A8915E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:221"]{border:1px solid #A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:223"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:223"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:178"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:178"]{border:0;opacity:0.2} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:179"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:179"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:180"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:180"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:181"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:181"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:182"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:182"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:183"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:183"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:184"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:184"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:185"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:185"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:186"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:186"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:187"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:187"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:188"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:188"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:189"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:189"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:204"]{border:1px solid #A8915E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:204"]{border:1px solid #A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:205"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:205"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:197"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:197"]{border:0;opacity:0.2} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:222"]{border:1px solid #A8915E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:222"]{border:1px solid #A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:224"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:224"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:235"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:235"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:236"]{color:#7E5232} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:236"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:237"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:237"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta.je-zvyrazneno [data-node-id="62:238"]{color:#3C1D06} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:238"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:239"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:240"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:241"]{color:#A8845E} #stage-wrap-tablet .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:242"]{color:#A8845E} /* ---- pruh patičky přes celou šířku ----------------------------- */ /* Výška se musí zmenšovat s plátnem; měřítko píše pasma.js. */ .fig-pata-pruh{position:absolute;left:0;right:0;bottom:0;background:#F1EEE9;pointer-events:none;display:none} /* ---- patička pásma ---------------------------------------------- */ /* Stojí v TOKU pod plátnem a plátno je o ni kratší. Obal je přes celé okno kvůli pruhu, deska je široká jako návrh a měřítko jí dává pasma.js — stejně jako plátnu, jinak by se rozešly. */ #fig-paticka-tablet{position:relative;width:100%;overflow:hidden} #fig-paticka-tablet .fig-paticka-deska{position:relative;width:768px;height:397px;margin:0 auto;transform-origin:0 0;overflow:hidden;will-change:transform} /* Vnitřní vrstva si drží rozměr celého rámce a je odsunutá o hranici nahoru, takže uzlům platí jejich původní `top`. */ #fig-paticka-tablet .fig-paticka-vrstva{position:absolute;top:-7886px;left:-336px;width:1440px;height:8283px} #fig-paticka-tablet p,#fig-paticka-tablet a{white-space:nowrap} :where(#fig-paticka-tablet a){color:inherit} #fig-paticka-tablet a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #fig-paticka-tablet a:hover{opacity:.72} #fig-paticka-tablet a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* Plátno se zkracuje přesně o výšku patičky — ta teď stojí POD ním. Připisuje se jako override, aby to `--zpet` sundal s celým pasma.css. */ #stage-wrap-tablet{height:7886px} /* ================================================================= Pásmo „mobil“ — rámec 62:437, plátno 402 × 8474 px. Třídy mají předponu `mb`, protože krok 02 čísluje pravidla zvlášť pro každé plátno a `fx7` znamená v každém něco jiného. ================================================================= */ #stage-wrap-mobil{position:relative;width:402px;height:8474px;margin:0 auto;transform-origin:0 0} #stage-wrap-mobil .fig-platno{position:absolute;top:0;left:0px;width:402px;height:100%} /* Kořen plátna nesmí mít vlastní výplň, jinak zakryje CSS pozadí . Desktop dělá totéž se svým uzlem 1:19. */ #stage-wrap-mobil [data-node-id="62:437"]{background-color:transparent} /* Barvu si nedědí sám od sebe (UA mu dává color:-webkit-link) a motiv ji vrací jen odkazům BEZ třídy (`a:not([class])`), protože na desktopu ji každý takový odkaz nese ve vlastní třídě. V těchhle dvou rámcích ji ale nese skupina s display:contents, takže odkazy v navigaci vycházely modré. `:where()` je tu POVINNÉ. Bez něj má pravidlo specificitu (1,0,1) a přebije i odkaz, který SVOU barvu má ve třídě — třeba tlačítko „Objednat se“ (62:62, #F1EDE4 proti .tb16 se specificitou (0,1,0)). Text pak zdědil barvu okolí místo návrhové. `:where()` specificitu vynuluje, takže vlastní třída uzlu vyhraje a odkazy bez barvy si dědění pořád vezmou. */ :where(#stage-wrap-mobil a){color:inherit} #stage-wrap-mobil a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #stage-wrap-mobil a:hover{opacity:.72} #stage-wrap-mobil a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* ------------------------------------------------------------------ Plátno stránky je 402 px (návrhová šířka rámce 62:437). Ořezává se jako rámec v návrhu, i do stran: sousední karty carouselů leží ZA hranou návrhu a v okně širším než 402 px by se bez ořezu odhalily celé. Vedle plátna kreslí barvu okraje body. Ořezává `overflow`, ne `clip-path`, ačkoli výsledek je týž: clip-path na obalu zakládá „backdrop root“ a všechno uvnitř pak má pod sebou prázdno, takže `backdrop-filter` nemá co rozmazat. Změřeno: pod ořezem clip-path se neprojevil ani `invert(1)`, po záměně za overflow rozostření sedí na návrh. Platí to jen tam, kde se ořezává ze všech čtyř stran — pásmo s ořezem jen svisle clip-path potřebuje a filtr v něm mít nemůže. ------------------------------------------------------------------ */ /* Pravidlo ořezu stojí VÝŠ (jedno místo pro obě pásma, počítá se z `RAMCE`). Odůvodnění nad tímhle komentářem je z mezivýstupu a pro mobil od 20. 8. 2026 NEPLATÍ ve dvou věcech: do stran se pouští až do `orez_sirka` px a ořezává `overflow: clip`, ne `clip-path` — ten mění vyhlazování písma uvnitř plátna. */ /* ---- přilepená hlavička pásma ---------------------------------- */ #fig-hlavicka-mobil{position:fixed;left:0;right:0;top:0;height:75px;z-index:100;--doba-odkaz:.2s} #fig-hlavicka-mobil .fig-hlavicka-deska{position:relative;width:402px;height:0;margin:0 auto;transform-origin:0 0} /* Vnitřní vrstva si drží šířku rámce jako plátno, aby procenta v calc() vycházela stejně jako v návrhu. */ #fig-hlavicka-mobil .fig-hlavicka-vrstva{position:absolute;top:0;left:0px;width:402px;height:0} /* Položky navigace se nesmí zalomit — „Reference“ je o písmeno delší než původní „Rference“ a v původním rámečku se zlomí. */ #fig-hlavicka-mobil p,#fig-hlavicka-mobil a{white-space:nowrap} :where(#fig-hlavicka-mobil a){color:inherit} #fig-hlavicka-mobil a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #fig-hlavicka-mobil a:hover{opacity:.72} #fig-hlavicka-mobil a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* ---- překlápěcí karty ---------------------------------------- */ /* Mechanismus je desktopový a `.fig-flip*` v style.css je až na jedno pravidlo NEscopovaný, takže platí i tady. Rub biografie se skládá z absolutně umístěných uzlů rámce 88:228, takže žádná další pravidla nepotřebuje. */ #stage-wrap-mobil{--doba:.62s;--doba-najeti:.28s} #stage-wrap-mobil .fig-flip-deska{width:402px;height:8474px} /* ---- ceník: aktivní a neaktivní karta ------------------------- */ /* Barvy podle ROLE uzlu, obě sady z dat návrhu (cenik.py). Aktivní je vždycky ta uprostřed, ne ta, kterou tak nakreslil návrh — proto se to přepíná třídou, ne zapeče do uzlů. */ #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:608"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:608"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:626"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:626"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:627"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:627"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:628"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:628"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:629"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:629"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:630"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:630"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:631"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:631"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:635"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:635"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:636"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:636"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:637"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:637"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:638"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:638"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:639"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:639"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:641"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:641"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:648"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:648"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:649"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:649"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:607"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:607"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:610"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:610"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:611"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:611"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:612"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:612"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:613"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:613"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:614"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:614"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:615"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:615"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:616"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:616"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:617"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:617"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:618"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:618"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:619"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:619"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:620"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:620"]{color:#A8845E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:653"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:653"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:654"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:654"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:609"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:609"]{border:1px solid #A8845E;opacity:0.6} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:633"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:633"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:634"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:634"]{color:#7E5232} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:644"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:644"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:645"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:645"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:665"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:665"]{border:1px solid #A8915E} #stage-wrap-mobil .fig-cenik-karta.je-zvyrazneno [data-node-id="62:666"]{color:#3C1D06} #stage-wrap-mobil .fig-cenik-karta:not(.je-zvyrazneno) [data-node-id="62:666"]{color:#3C1D06} /* ---- rozbalené mobilní menu (uzly 118:*) ---------------------- */ /* Menu sedí v přilepené hlavičce, protože tam bydlí i hamburger. Panel překryje horní část stránky včetně loga a hamburgeru; hvězda sedí přesně tam, kde je zavřený hamburger, takže ovladač neposkočí. */ #fig-hlavicka .fig-menu-mobil{position:absolute;left:0;top:0;width:100%;height:0;z-index:60} #fig-hlavicka .fig-menu-mobil[hidden]{display:none} #fig-hlavicka .fig-menu-panel{position:absolute;left:0;top:0;width:100%} #fig-hlavicka .fig-menu-polozka{position:absolute;display:flex;align-items:center;justify-content:center;font-family:"Cinzel", serif;font-weight:500;font-size:22px;color:#3C1D06;text-decoration:none;text-align:center} #fig-hlavicka .fig-menu-polozka:hover{opacity:.72} /* Tlačítko "Objednat se" — grafik ho v návrhu na mobilní hlavičce zapomněl (na mobilu je `.hl-objednat`/`.hl-tlacitko` schválně `display:none`, viz media dotaz níž), doplněno 6. 9. 2026 do rozbaleného menu podle Figmy (uzly 5:1836–5:1838, soubor KOTLAR-EDU). Stejný vzhled jako `.hl-tlacitko`/`.hl-objednat` na desktopu/tabletu (barva #A8845E, radius 32px, Cinzel SemiBold 17px), ale jako JEDEN prvek (pozadí i text pohromadě), ne dvojice překrývajících se uzlů — tady na to není důvod dvojici držet. */ #fig-hlavicka .fig-menu-cta{position:absolute;display:flex;align-items:center;justify-content:center;background:#A8845E;border-radius:32px;font-family:"Cinzel", serif;font-weight:600;font-size:17px;color:#F1EDE4;text-decoration:none;text-align:center} #fig-hlavicka .fig-menu-zavrit,#fig-hlavicka .fig-menu-spoust{position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none} #fig-hlavicka .fig-menu-spoust{color:transparent;font:inherit;z-index:61} #fig-hlavicka .fig-menu-popis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #fig-hlavicka .fig-menu-zavrit:focus-visible,#fig-hlavicka .fig-menu-spoust:focus-visible,#fig-hlavicka .fig-menu-polozka:focus-visible,#fig-hlavicka .fig-menu-cta:focus-visible{outline:2px solid #7e5232;outline-offset:3px} #fig-hlavicka.je-menu-otevreno .fig-hlavicka-zavoj{opacity:0} /* ---- pruh patičky přes celou šířku ----------------------------- */ /* Výška se musí zmenšovat s plátnem; měřítko píše pasma.js. */ .fig-pata-pruh{position:absolute;left:0;right:0;bottom:0;background:#F1EEE9;pointer-events:none;display:none} /* ---- patička pásma ---------------------------------------------- */ /* Stojí v TOKU pod plátnem a plátno je o ni kratší. Obal je přes celé okno kvůli pruhu, deska je široká jako návrh a měřítko jí dává pasma.js — stejně jako plátnu, jinak by se rozešly. */ #fig-paticka-mobil{position:relative;width:100%;overflow:hidden} #fig-paticka-mobil .fig-paticka-deska{position:relative;width:402px;height:447px;margin:0 auto;transform-origin:0 0;overflow:hidden;will-change:transform} /* Vnitřní vrstva si drží rozměr celého rámce a je odsunutá o hranici nahoru, takže uzlům platí jejich původní `top`. */ #fig-paticka-mobil .fig-paticka-vrstva{position:absolute;top:-8027px;left:0px;width:402px;height:8474px} #fig-paticka-mobil p,#fig-paticka-mobil a{white-space:nowrap} :where(#fig-paticka-mobil a){color:inherit} #fig-paticka-mobil a{text-decoration:none;cursor:pointer;transition:opacity .2s ease} #fig-paticka-mobil a:hover{opacity:.72} #fig-paticka-mobil a:focus-visible{outline:2px solid #7e5232;outline-offset:3px} /* Plátno se zkracuje přesně o výšku patičky — ta teď stojí POD ním. Připisuje se jako override, aby to `--zpet` sundal s celým pasma.css. */ #stage-wrap-mobil{height:8027px} /* ================================================================= PŘILEPENÁ HLAVIČKA PO ODROLOVÁNÍ — rámec 81:79. Pruh se ztenčí ze 103 na 75 px, logo zmenší, obsah jde nahoru. Nahoře na stránce NIC z toho neplatí — tam má hlavička vypadat jako v hlavním rámci, protože pod ní v plátně leží dělicí čára (1:126, y = 103) a jiskra (1:94, y = 95), které se nehýbou. Dokud byl přepis bezpodmínečný, obsah se s nimi rozcházel. Souřadnice jsou doslova z get_metadata. Uzly zůstávají v DOM tam, kde jsou; přepisují se jen pozice, protože desktopové plátno se nesmí přegenerovat (krok 03, který ho postavil, v repu není). `left` u textů je STŘED (mají translateX(-50%)), u loga a podkladu tlačítka levá hrana. Ověřeno proti starým hodnotám. ================================================================= */ /* Položky navigace se nesmí zalomit. Návrh dává „Reference“ 90 px, ale náš rasterizér ji vysází o kousek širší a text se zlomil na dva řádky. Uzly jsou kotvené na střed, takže rozdíl pár pixelů na šířce nikam neposune. */ #fig-hlavicka .fig-hlavicka-deska p,#fig-hlavicka .fig-hlavicka-deska a{white-space:nowrap} /* Přechod mezi plnou a přilepenou podobou. Stejná doba i křivka jako u závoje, ať se to hýbe jako jedna věc. JEN V DESKTOPOVÉM PÁSMU. Od 22. 8. 2026 je hlavička jedna pro všechna pásma a mění při přepnutí pásma `left`, `top` i rozměry. Kdyby na nich visel přechod, hodnota by se po přepnutí PLYNULE měnila z desktopové na pásmovou — a v renderovacím harnessu, kde časová osa stojí, by zamrzla na té desktopové. Vypadalo to jako by pásmové CSS neplatilo: `left` zůstal 475,5 px místo 205, ačkoli pravidlo v souboru bylo správně a prohlížeč potvrdil, že selektor sedí. Stálo to hodinu hledání v cascade. */ /* Na dobu PŘEPNUTÍ PÁSMA se přechod vypne. Hlavička je jedna pro všechna pásma, takže se `left` a spol. mění i při něm — a plynulá změna z polohy jiného pásma se při rychlém tahání za okraj okna nedotáhne. Zadavatel to našel takhle: „když okno zmenším a zvětším, rozpadne se zarovnání a ulítne doleva.“ Třídu nasazuje pasma.js na jeden snímek. */ html.je-prepinani #fig-hlavicka [data-node-id],html.je-prepinani #fig-hlavicka .fig-hlavicka-deska{transition:none !important} /* -> 81:305 */ /* -> 81:307 */ /* -> 81:303 */ /* -> 81:304 */ /* -> 81:306 */ /* -> 81:308 */ /* -> 81:316 */ /* -> 81:317 */ /* ---- pruh patičky přes celou šířku (desktop) -------------------- */ /* Leží ve vrstvě pozadí, ne v plátně: plátno vodorovně ořezává. `--fig-platno-h` píše canvas.js a roste s rozprostřeným vějířem, takže pruh drží u spodní hrany i pak. Rozšíření 1500 px na stranu ořízne `.fig-pozadi-okno`, které je přes celé okno. */ .fig-pozadi-deska > .fig-pata-pruh-desktop{position:absolute;left:-1500px;width:4440px;top:calc(var(--fig-platno-h, var(--fig-pozadi-h)) - 72px);height:72px;background:#F1EEE9;pointer-events:none} /* ---- desky návrhové šířky na střed (desktopové pásmo) --------- */ /* Blok širší než rodič má obě automatické marginy nulové, takže by se zarovnal VLEVO a přetekl doprava. Pod 1440 px okna se proto ořezává na obě strany stejně, nad ní vyjde totéž co `auto`. Na homepage tohle počítá canvas.js a jeho inline styl vyhraje — stránky bez plátna (ceník, studio) ho ale nemají. */ /* Hlavička — původně vygeneroval build (_build/postav_hlavicku_web.py); ten se už nespouští, EDITUJ PŘÍMO. Rozměry jsou z rámců 228:136 (desktop), 228:31 (tablet) a 228:94 (mobil). JEDNA HLAVIČKA, JEDEN MARKUP, TŘI PÁSMA. Do 22. 8. 2026 byly tři a dvě z nich se na každé stránce schovávaly. Položky navigace a text tlačítka se pozicují STŘEDEM (`translateX(-50%)`), logo a podklad tlačítka hranou. Není to libovůle: odrolovaný stav dává navigaci `width: auto` a `left` = střed, takže bez toho transformu by se po odrolování zarovnala vlevo. */ #fig-hlavicka .hl-odkaz { position: absolute; white-space: nowrap; text-align: center; font-family: "Cinzel", serif; font-style: normal; line-height: normal; word-break: break-word; } #fig-hlavicka .hl-logo { position: absolute; display: block; } #fig-hlavicka .hl-logo-obr { display: none; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } #fig-hlavicka .hl-tlacitko { position: absolute; background-color: #A8845E; } #fig-hlavicka .hl-hamburger { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; } #fig-hlavicka .hl-hamburger img { display: block; width: 100%; height: 100%; } /* Popisek pro odečítač — vidět nemá být. */ #fig-hlavicka .hl-popis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------- DESKTOP */ #fig-hlavicka .fig-hlavicka-deska { width: 1440px; } #fig-hlavicka .hl-logo-desktop { display: block; } #fig-hlavicka .hl-cenik { display: block; left: 697px; top: 45px; width: 60px; height: 24px; transform: translateX(-50%); } #fig-hlavicka .hl-hamburger { display: none; } #fig-hlavicka .hl-kontakt { display: block; left: 944.5px; top: 45px; width: 83px; height: 24px; transform: translateX(-50%); } #fig-hlavicka .hl-logo { display: block; left: 178px; top: 27.99px; width: 118.84px; height: 43.7px; } #fig-hlavicka .hl-nas-tym { display: block; left: 585px; top: 45px; width: 78px; height: 24px; transform: translateX(-50%); } #fig-hlavicka .hl-o-nas { display: block; left: 475.5px; top: 45px; width: 55px; height: 24px; transform: translateX(-50%); } #fig-hlavicka .hl-objednat { display: block; left: 1183px; top: 43px; width: 162px; height: 23px; transform: translateX(-50%); } #fig-hlavicka .hl-reference { display: block; left: 815px; top: 45px; width: 90px; height: 24px; transform: translateX(-50%); } #fig-hlavicka .hl-tlacitko { display: block; left: 1102px; top: 32px; width: 162px; height: 45px; } #fig-hlavicka .hl-odkaz { font-size: 18px; font-weight: 500; color: #3C1D06; } #fig-hlavicka .hl-objednat { font-size: 17px; font-weight: 600; color: #F1EDE4; } #fig-hlavicka .hl-tlacitko { border-radius: 32px; } /* `.hl-tlacitko` je jen kreslený podklad (aria-hidden, prázdný div) — klikací je jedině `.hl-objednat`, a ten je svým vlastním boxem (162×23) menší než hnědý podklad pod ním (162×45). Obecná přístupnostní záplata (`pristupnost.css`, WCAG 2.5.8) mu dá jen `max(100%,24px)`, tedy dosah 162×24 — pořád o dost míň, než kolik zabírá viditelná pilulka, takže horní/dolní pruh tlačítka vypadal klikací, ale nebyl. `.hl-objednat` má stejný střed jako `.hl-tlacitko` (left+width se shodují, jen `.hl-tlacitko` nemá `translateX(-50%)` a `.hl-objednat` ano — dopočteno: oba středy 1183px), takže stačí `::after` roztáhnout na přesný rozměr podkladu — nemusí se měřit znovu, jen opsat 162×45 z pravidla výš. Specifičtější než `pristupnost.css` (`html:root` navíc), proto vyhraje bez `!important`. */ html:root #fig-hlavicka .hl-objednat::after{ width: 162px; height: 45px; } /* ---------------------------------------------- TABLET */ /* ---------------------------------------------- MOBIL */ /* Patička — polohy VYGENEROVÁNO buildem (_build/postav_paticku_web.py). Berou se z týchž dat, ze kterých staví build i `kontrola_paticek_pasem.py` (`paticka_slouceni.NOVE`, rámce 166:68, 176:425 a 176:80). JEDNA PATIČKA, JEDEN MARKUP, TŘI PÁSMA. Do 22. 8. 2026 byly tři a dvě z nich se na každé stránce schovávaly. Vnitřek bloků si nechává desktopové třídy `fx###`: patička se mezi pásmy NEZMENŠUJE, mění se jen polohy čtrnácti bloků. Změřeno — logo má 94 × 34 px ve všech třech pásmech, ikony sítí 19 × 19, copyright 467 × 17. */ /* ---------------------------------------------- DESKTOP */ #fig-paticka { width: 1440px; height: 276px; } /* `overflow: visible` (style.css má `hidden`) — bez toho by rodič ořezal box-shadow `.pt-pruh` níž zpátky na svých 1440px a pruh by NEŠEL přes celou šířku okna. Tablet i mobil to takhle mají už dávno (viz `html:root #fig-paticka{ overflow: visible; }` v jejich @media blocích níž) — desktopu to jako jedinému chybělo, proto se rozcházel. Bezpečné: změřeno na živém webu, ŽÁDNÉ dítě patičky nepřesahuje její box (logo, kontakt, navigace, ikony, čáry i hvězdička leží uvnitř 0–1440 px), takže `hidden` tu fakticky nic neořezávalo. Viz proc/paticka_pruh_full_width.py. */ #fig-paticka { overflow: visible; } /* Přes celou šířku okna, ne jen 1440px — zadavatel 1. 9. 2026, chce to na VŠECH pásmech/stránkách stejně. Tablet a mobil (níž v tomhle souboru) už tenhle trik měly; desktopu chyběl. NENÍ to `overflow: visible` na `#fig-paticka` + `width:100vw` (zkoušeno, kolidovalo to přesně s TÍMHLE pravidlem — obě mění `width`/`left` na stejném selektoru se stejnou specificitou, vyhrávalo to, co je v souboru POZDĚJI, a zbytek se смíchal do rozjetého stavu). Box-shadow se spreadem 100vmax + clip-path `inset(0 -100vmax)` místo toho: vlastní box zůstává 1440px (pozice se nemění), jen se barva „rozlije“ do stran daleko za něj, ale `clip-path` ji drží striktně v původní výšce (nahoře/dole beze změny) — funguje i uvnitř `#fig-paticka` s `overflow:hidden`, protože `clip-path` je output samotného prvku, ne něco, co by rodič musel dovolit. Viz proc/ paticka_pruh_full_width.py, dodatek. */ #fig-paticka .pt-pruh { display: block; transform: none; left: 0px; top: 204px; width: 1440px; height: 72px; box-shadow: 0 0 0 100vmax #F1EEE9; clip-path: inset(0 -100vmax); } #fig-paticka .pt-hvezda { display: block; transform: none; left: 1264px; top: 0px; width: 16px; height: 16px; } #fig-paticka .pt-cara { display: block; transform: none; left: 176px; top: 8px; width: 1080px; height: 0px; } #fig-paticka .pt-logo { display: block; transform: none; left: 178px; top: 40.31px; width: 93.52px; height: 34.39px; } #fig-paticka .pt-kontakt { display: block; transform: none; left: 176px; top: 98px; width: 554px; height: 83px; } #fig-paticka .pt-nadpis { display: block; transform: none; left: 797px; top: 55px; width: 161px; height: 26px; } #fig-paticka .pt-sl1 { display: block; transform: none; left: 797px; top: 98px; width: 91px; height: 83px; } #fig-paticka .pt-sl2 { display: block; transform: none; left: 885px; top: 98px; width: 91px; height: 83px; } #fig-paticka .pt-sl3 { display: block; transform: none; left: 974px; top: 98px; width: 91px; height: 83px; } #fig-paticka .pt-sledujte { display: block; transform: none; left: 1140px; top: 55px; width: 128px; height: 26px; } #fig-paticka .pt-fb { display: block; transform: none; left: 1142px; top: 108px; width: 19px; height: 19px; } #fig-paticka .pt-ig { display: block; transform: none; left: 1184px; top: 108px; width: 19px; height: 19px; } #fig-paticka .pt-yt { display: block; transform: none; left: 1224px; top: 109px; width: 24px; height: 16px; } #fig-paticka .pt-copyright { display: block; transform: none; left: 487px; top: 230px; width: 467px; height: 17px; } /* Zalomení kontaktu podle návrhu: řádek začíná úsekem 1, 4. */ #fig-paticka .pt-kontakt .pt-u2::before { content: none; } #fig-paticka .pt-kontakt .pt-u3::before { content: none; } #fig-paticka .pt-kontakt .pt-u4::before { content: "\A "; white-space: pre; } #fig-paticka .pt-kontakt .pt-u5::before { content: none; } #fig-paticka .pt-kontakt .pt-u6::before { content: none; } #fig-paticka .pt-kontakt .pt-sep1 { display: inline; } #fig-paticka .pt-kontakt .pt-sep2 { display: inline; } #fig-paticka .pt-kontakt .pt-sep3 { display: none; } #fig-paticka .pt-kontakt .pt-sep4 { display: inline; } #fig-paticka .pt-kontakt .pt-sep5 { display: inline; } /* Zarovnání ZMĚŘENO v referenčním renderu návrhu (viz `zarovnani()`). */ #fig-paticka .pt-kontakt { text-align: left; } #fig-paticka .pt-nadpis { text-align: left; } #fig-paticka .pt-sl1 { text-align: left; } #fig-paticka .pt-sl2 { text-align: left; } #fig-paticka .pt-sl3 { text-align: left; } #fig-paticka .pt-sledujte { text-align: left; } #fig-paticka .pt-copyright { text-align: center; } /* ---------------------------------------------- TABLET */ /* Zalomení kontaktu podle návrhu: řádek začíná úsekem 1, 4. */ /* Zarovnání ZMĚŘENO v referenčním renderu návrhu (viz `zarovnani()`). */ /* Svislá dělítka mezi sloupci odkazů má jen desktop. */ /* ---------------------------------------------- MOBIL */ /* Zalomení kontaktu podle návrhu: řádek začíná úsekem 1, 3, 5. */ /* Zarovnání ZMĚŘENO v referenčním renderu návrhu (viz `zarovnani()`). */ /* Svislá dělítka mezi sloupci odkazů má jen desktop. */ /* slouceni:od */ /* Nová patička podle rámců 166:68 (desktop), 176:425 (tablet) a 176:80 (mobil) — zadání 17. 8. 2026. Polohy jsou ČTENÉ z dat návrhu, ne opsané; vypisuje se jen to, co se liší. Původní pravidla se nepřepisují, `zpet()` maže celý blok. */ /* pásmo tablet */ /* pásmo mobil */ #fig-paticka-mobil .fig-paticka-hvezda { position: absolute; left: 355px; top: 8027px; width: 16px; height: 16px; } #fig-paticka-mobil .fig-paticka-cara { position: absolute; left: 26px; top: 8035px; width: 322px; height: 0px; } /* slouceni:do */ /* =================================================== 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 #stage-wrap-tablet{ display: none !important; } html:root body.atelier-kotlar{ /* Jen podkladová barva. Kresbu nese vrstva #fig-pozadi, která od 15. 8. 2026 platí i v pásmech — dřív tu stál týž webP jako na desktopu, načtený podruhé. */ background: #E3DED6; } html:root .fig-dialog{ width: min(343px, 100vw); max-height: 100vh; overflow-x: hidden; } html:root .fig-dialog .fig-dialog-panel{ position: relative; padding: 21px 16px 12px; overflow: hidden; } html:root .fig-dialog .fig-dialog-hlava{ display: block; text-align: center; font-size: 32px; line-height: 34px; padding-top: 5px; margin: 0 0 24px; } html:root .fig-dialog .fig-dialog-hlava > span{ display: block; } html:root .fig-dialog .fig-dialog-znak{ position: static; display: block; width: 0 !important; height: 0 !important; margin: 0; pointer-events: none; } html:root .fig-dialog .fig-dialog-znak .fig-ring{ display: none; } html:root .fig-dialog .fig-dialog-jiskra:nth-of-type(1){ left: auto !important; right: 15px !important; top: 13px !important; } html:root .fig-dialog .fig-dialog-jiskra:nth-of-type(2){ left: 38px !important; top: 58px !important; } html:root .fig-dialog .fig-dialog-jiskra:nth-of-type(3){ left: 24px !important; top: 38px !important; } html:root .fig-dialog .fig-dialog-mrizka{ gap: 15px; } html:root .fig-dialog .fig-dialog-popisek{ font-size: 16px; margin-bottom: 6px; } html:root .fig-dialog .fig-dialog-podnadpis{ margin: 27px 0 7px; } html:root .fig-dialog .fig-dialog-diky{ font-size: 15px; } html:root .fig-dialog .fig-dialog-storno:not(.fig-dialog-storno-mobil){ display: none; } html:root .fig-dialog .fig-dialog-storno-mobil{ display: block; } html:root .fig-dialog .fig-zlom-mobil{ display: inline; } html:root .fig-dialog .fig-dialog-tlacitka{ flex-direction: column; margin: 0; gap: 14px; } html:root .fig-dialog .fig-dialog-storno, html:root .fig-dialog .fig-dialog-storno p{ line-height: 19px; } html:root .fig-dialog .fig-dialog-storno-mobil{ width: 308px; margin-left: auto; margin-right: auto; } html:root .fig-dialog .fig-dialog-diky{ order: 1; margin: 19px 0 12px; line-height: 19px; } html:root .fig-dialog .fig-dialog-odeslat{ order: 2; } html:root .fig-dialog .fig-dialog-zavrit{ order: 3; } html:root .fig-dialog .fig-dialog-odeslat{ width: 182px; height: 50.62px; border-radius: 38.57px; font-size: 21.49px; min-width: 0; padding: 0; } html:root .fig-dialog .fig-dialog-zavrit{ width: 91px; height: 42px; font-size: 16px; min-width: 0; padding: 0; } html:root .anchor{scroll-margin-top:var(--fig-hlavicka-pasmo-h,75px)} html:root .fig-pata-pruh-mobil{display:block;height:calc(52px * var(--pasmo-meritko,1))} html:root .fig-pata-pruh-desktop{display:none} html:root #fig-hlavicka .fig-hlavicka-deska{ width: 402px; } html:root #fig-hlavicka .hl-logo-mobil{ display: block; } html:root #fig-hlavicka .hl-cenik{ display: none; } html:root #fig-hlavicka .hl-hamburger{ display: block; left: 350px; top: 36px; width: 26px; height: 16px; } html:root #fig-hlavicka .hl-kontakt{ display: none; } html:root #fig-hlavicka .hl-logo{ display: block; left: 26px; top: 20.35px; width: 106px; height: 38.98px; } html:root #fig-hlavicka .hl-nas-tym{ display: none; } html:root #fig-hlavicka .hl-o-nas{ display: none; } html:root #fig-hlavicka .hl-objednat{ display: none; } html:root #fig-hlavicka .hl-reference{ display: none; } html:root #fig-hlavicka .hl-tlacitko{ display: none; } html:root #fig-paticka{ width: 402px; height: 447px; } html:root #fig-paticka{ overflow: visible; } html:root #fig-paticka .pt-pruh{ display: block; transform: none; left: -785px; top: 395px; width: 1440px; height: 52px; } html:root #fig-paticka .pt-hvezda{ display: block; transform: none; left: 355px; top: 0px; width: 16px; height: 16px; } html:root #fig-paticka .pt-cara{ display: block; transform: none; left: 26px; top: 8px; width: 322px; height: 0px; } html:root #fig-paticka .pt-logo{ display: block; transform: none; left: 154px; top: 42px; width: 93.52px; height: 34.39px; } html:root #fig-paticka .pt-kontakt{ display: block; transform: none; left: 23px; top: 93px; width: 357px; height: 83px; } html:root #fig-paticka .pt-nadpis{ display: block; transform: none; left: 138px; top: 194px; width: 127px; height: 26px; } html:root #fig-paticka .pt-sl1{ display: block; transform: none; left: 74px; top: 230px; width: 91px; height: 53px; } html:root #fig-paticka .pt-sl2{ display: block; transform: none; left: 156px; top: 230px; width: 91px; height: 53px; } html:root #fig-paticka .pt-sl3{ display: block; transform: none; left: 238px; top: 230px; width: 91px; height: 53px; } html:root #fig-paticka .pt-sledujte{ display: block; transform: none; left: 137px; top: 305px; width: 128px; height: 26px; } html:root #fig-paticka .pt-fb{ display: block; transform: none; left: 149px; top: 345px; width: 19px; height: 19px; } html:root #fig-paticka .pt-ig{ display: block; transform: none; left: 191px; top: 345px; width: 19px; height: 19px; } html:root #fig-paticka .pt-yt{ display: block; transform: none; left: 231px; top: 346px; width: 24px; height: 16px; } html:root #fig-paticka .pt-copyright{ display: block; transform: none; left: -32px; top: 412px; width: 467px; height: 17px; } html:root #fig-paticka .pt-kontakt .pt-u2::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-u3::before{ content: "\A "; white-space: pre; } html:root #fig-paticka .pt-kontakt .pt-u4::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-u5::before{ content: "\A "; white-space: pre; } html:root #fig-paticka .pt-kontakt .pt-u6::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-sep1{ display: inline; } html:root #fig-paticka .pt-kontakt .pt-sep2{ display: none; } html:root #fig-paticka .pt-kontakt .pt-sep3{ display: inline; } html:root #fig-paticka .pt-kontakt .pt-sep4{ display: none; } html:root #fig-paticka .pt-kontakt .pt-sep5{ display: inline; } html:root #fig-paticka .pt-pruh{ left: 0; width: 100%; box-shadow: 0 0 0 100vmax #F1EEE9; clip-path: inset(0 -100vmax); } html:root #fig-paticka .pt-copyright{ left: 0; width: 100%; } html:root #fig-paticka .pt-kontakt{ text-align: center; } html:root #fig-paticka .pt-nadpis{ text-align: center; } html:root #fig-paticka .pt-sl1{ text-align: center; } html:root #fig-paticka .pt-sl2{ text-align: center; } html:root #fig-paticka .pt-sl3{ text-align: center; } html:root #fig-paticka .pt-sledujte{ text-align: center; } html:root #fig-paticka .pt-copyright{ text-align: center; } html:root #fig-paticka .pt-delitko{ display: none; } } @media (min-width:768px) and (max-width:1199px){ html:root #stage-wrap-mobil{ display: none !important; } html:root body.atelier-kotlar{ /* Jen podkladová barva. Kresbu nese vrstva #fig-pozadi, která od 15. 8. 2026 platí i v pásmech — dřív tu stál týž webP jako na desktopu, načtený podruhé. */ background: #E3DED6; } html:root .fig-dialog{ width: min(700px, calc(100vw - 32px)); } html:root .fig-dialog .fig-dialog-panel{ padding: 58px 24px 16px; } html:root .fig-dialog .fig-dialog-hlava{ margin: 0 0 54px; } html:root .fig-dialog .fig-dialog-mrizka{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 20px 30px; } html:root .fig-dialog .fig-dialog-podnadpis{ margin: 40px 0 3px; } html:root .fig-dialog .fig-dialog-storno, html:root .fig-dialog .fig-dialog-storno p{ line-height: 20px; } html:root .fig-dialog .fig-dialog-storno-tablet{ width: 504px; margin-left: auto; margin-right: auto; } html:root .fig-dialog .fig-dialog-diky{ font-size: 14px; line-height: 20px; } html:root .fig-dialog .fig-dialog-tlacitka{ flex-direction: column; margin: 0; gap: 18px; } html:root .fig-dialog .fig-dialog-diky{ order: 1; margin: 20px 0 8px; } html:root .fig-dialog .fig-dialog-odeslat{ order: 2; width: 155px; height: 42px; font-size: 18px; min-width: 0; padding: 0; } html:root .fig-dialog .fig-dialog-zavrit{ order: 3; width: 89px; height: 36px; font-size: 16px; min-width: 0; padding: 0; } html:root .fig-dialog .fig-dialog-storno:not(.fig-dialog-storno-tablet){ display: none; } html:root .fig-dialog .fig-dialog-storno-tablet{ display: block; } html:root .anchor{scroll-margin-top:var(--fig-hlavicka-pasmo-h,75px)} html:root .fig-pata-pruh-tablet{display:block;height:calc(72px * var(--pasmo-meritko,1))} html:root .fig-pata-pruh-desktop{display:none} html:root #fig-hlavicka .fig-hlavicka-deska{ width: 768px; } html:root #fig-hlavicka .hl-logo-tablet{ display: block; } html:root #fig-hlavicka .hl-cenik{ display: block; left: 366.85px; top: 36.15px; width: 50.77px; height: 20px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-hamburger{ display: none; } html:root #fig-hlavicka .hl-kontakt{ display: block; left: 550.26px; top: 36.15px; width: 70.23px; height: 20px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-logo{ display: block; left: 34px; top: 21.76px; width: 100.56px; height: 36.98px; } html:root #fig-hlavicka .hl-nas-tym{ display: block; left: 285.27px; top: 36.15px; width: 65px; height: 20px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-o-nas{ display: block; left: 205px; top: 36.15px; width: 46px; height: 20px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-objednat{ display: block; left: 675.5px; top: 35px; width: 117px; height: 18px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-reference{ display: block; left: 453.69px; top: 36.15px; width: 76.15px; height: 20px; transform: translateX(-50%); } html:root #fig-hlavicka .hl-tlacitko{ display: block; left: 617px; top: 25px; width: 117px; height: 38px; } html:root #fig-hlavicka .hl-odkaz{ font-size: 15px; font-weight: 500; color: #3C1D06; } html:root #fig-hlavicka .hl-objednat{ font-size: 13px; font-weight: 600; color: #F1EDE4; } html:root #fig-hlavicka .hl-tlacitko{ border-radius: 27.08px; } /* Stejný důvod jako u desktopu výš — dosah `.hl-objednat` roztažený na přesný rozměr tabletového `.hl-tlacitko` (117×38 z pravidla výš), ne jen na obecné WCAG minimum. */ html:root #fig-hlavicka .hl-objednat::after{ width: 117px; height: 38px; } html:root #fig-paticka{ width: 768px; height: 397px; } html:root #fig-paticka{ overflow: visible; } html:root #fig-paticka .pt-pruh{ display: block; transform: none; left: -336px; top: 325px; width: 1440px; height: 72px; } html:root #fig-paticka .pt-hvezda{ display: block; transform: none; left: 742px; top: 0px; width: 16px; height: 16px; } html:root #fig-paticka .pt-cara{ display: block; transform: none; left: 34px; top: 8px; width: 700px; height: 0px; } html:root #fig-paticka .pt-logo{ display: block; transform: none; left: 337px; top: 40.31px; width: 93.52px; height: 34.39px; } html:root #fig-paticka .pt-kontakt{ display: block; transform: none; left: 34px; top: 98px; width: 700px; height: 83px; } html:root #fig-paticka .pt-nadpis{ display: block; transform: none; left: 118px; top: 184px; width: 161px; height: 26px; } html:root #fig-paticka .pt-sl1{ display: block; transform: none; left: 118px; top: 227px; width: 91px; height: 83px; } html:root #fig-paticka .pt-sl2{ display: block; transform: none; left: 206px; top: 227px; width: 91px; height: 83px; } html:root #fig-paticka .pt-sl3{ display: block; transform: none; left: 295px; top: 227px; width: 91px; height: 83px; } html:root #fig-paticka .pt-sledujte{ display: block; transform: none; left: 540px; top: 184px; width: 128px; height: 26px; } html:root #fig-paticka .pt-fb{ display: block; transform: none; left: 542px; top: 237px; width: 19px; height: 19px; } html:root #fig-paticka .pt-ig{ display: block; transform: none; left: 584px; top: 237px; width: 19px; height: 19px; } html:root #fig-paticka .pt-yt{ display: block; transform: none; left: 624px; top: 238px; width: 24px; height: 16px; } html:root #fig-paticka .pt-copyright{ display: block; transform: none; left: 151px; top: 352px; width: 467px; height: 17px; } html:root #fig-paticka .pt-kontakt .pt-u2::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-u3::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-u4::before{ content: "\A "; white-space: pre; } html:root #fig-paticka .pt-kontakt .pt-u5::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-u6::before{ content: none; } html:root #fig-paticka .pt-kontakt .pt-sep1{ display: inline; } html:root #fig-paticka .pt-kontakt .pt-sep2{ display: inline; } html:root #fig-paticka .pt-kontakt .pt-sep3{ display: none; } html:root #fig-paticka .pt-kontakt .pt-sep4{ display: inline; } html:root #fig-paticka .pt-kontakt .pt-sep5{ display: inline; } html:root #fig-paticka .pt-pruh{ left: 0; width: 100%; box-shadow: 0 0 0 100vmax #F1EEE9; clip-path: inset(0 -100vmax); } html:root #fig-paticka .pt-copyright{ left: 0; width: 100%; } html:root #fig-paticka .pt-kontakt{ text-align: center; } html:root #fig-paticka .pt-nadpis{ text-align: left; } html:root #fig-paticka .pt-sl1{ text-align: left; } html:root #fig-paticka .pt-sl2{ text-align: left; } html:root #fig-paticka .pt-sl3{ text-align: left; } html:root #fig-paticka .pt-sledujte{ text-align: left; } html:root #fig-paticka .pt-copyright{ text-align: center; } html:root #fig-paticka .pt-delitko{ display: none; } } @media (min-width:1200px){ html:root #stage-wrap-tablet, html:root #stage-wrap-mobil{ display: none !important; } html:root:root #fig-hlavicka [data-node-id="1:38"], html:root:root #fig-hlavicka [data-node-id="1:40"], html:root:root #fig-hlavicka [data-node-id="1:36"], html:root:root #fig-hlavicka [data-node-id="1:37"], html:root:root #fig-hlavicka [data-node-id="1:39"], html:root:root #fig-hlavicka [data-node-id="1:41"], html:root:root #fig-hlavicka [data-node-id="1:124"], html:root:root #fig-hlavicka [data-node-id="1:125"]{transition:top var(--doba-hlavicka) var(--krivka-hlavicka),left var(--doba-hlavicka) var(--krivka-hlavicka),width var(--doba-hlavicka) var(--krivka-hlavicka),height var(--doba-hlavicka) var(--krivka-hlavicka)} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:38"]{left:476.5px;top:28px;width:auto} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:40"]{left:586px;top:28px;width:auto} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:36"]{left:698px;top:28px;width:auto} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:37"]{left:816px;top:28px;width:auto} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:39"]{left:945.5px;top:28px;width:auto} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:41"]{left:179px;top:17.79px;width:109px;height:40.08px} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:124"]{left:1103px;top:15px;width:162px;height:45px} html:root:root.je-scrollnuto #fig-hlavicka [data-node-id="1:125"]{left:1184px;top:26px;width:auto} html:root:root #fig-hlavicka .fig-hlavicka-deska, html:root:root #fig-pozadi .fig-pozadi-deska, html:root:root #fig-paticka, html:root:root #stage-wrap{ margin-left: calc(50% - 720px); margin-right: 0; } html:root:root #cenik{ width: 1440px; max-width: none; margin-left: calc(50% - 720px); margin-right: 0; } } @media (min-width:768px){ html:root #stage-wrap-mobil{ display: none; } html:root #fig-hlavicka-mobil{display:none} html:root #fig-paticka-mobil{display:none} } @media (max-width:767px),(min-width:1200px){ html:root #stage-wrap-tablet{ display: none; } html:root #fig-hlavicka-tablet{display:none} html:root #fig-paticka-tablet{display:none} }