/* Studio — původně vygeneroval build (_build/postav_studio_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). JEDEN MARKUP, TŘI PÁSMA. Zadavatel 22. 8. 2026: „Cílem je udělat tuto stránku jako jeden markup. Nechceme tady mít tři markupy.“ Stránka proto NENÍ plátno s absolutními souřadnicemi jako homepage — je to tok, ve kterém se mění jen rozměry. Vzorem je ceník. Svislý rytmus dělají marginy spočítané z ROZDÍLŮ souřadnic návrhu a každý blok si nese výšku svého boxu z návrhu. Kdyby prohlížeč zalomil odstavec jinak než návrh, posune se text uvnitř boxu — ne všechno pod ním. */ body.page-template-page-portfolio, body.page-template-page-studio, body.stranka-studio { position: relative; } /* Pozadí kreslí SPOLEČNÁ vrstva `#fig-pozadi` — táž jako na homepage. Kotví se na , ne na `#studio-stranka`: patičku vkládá `footer.php` až za obsahem, takže je jeho sourozencem a vrstva ukotvená dovnitř by na ni nedosáhla (u ceníku to zadavatel hlásil jako „patička je tmavší“). */ body.page-template-page-portfolio > #fig-pozadi, body.page-template-page-studio > #fig-pozadi, body.stranka-studio > #fig-pozadi { position: absolute; inset: 0; height: auto; } body.page-template-page-portfolio .fig-pozadi-okno, body.page-template-page-studio .fig-pozadi-okno, body.stranka-studio .fig-pozadi-okno { height: 100%; } /* Spodní pruh patičky přes celou šířku okna — v pásmech ho nesou vlastní patičky, tady by se překrývaly. */ body.page-template-page-portfolio .fig-pata-pruh-studio, body.page-template-page-studio .fig-pata-pruh-studio, body.stranka-studio .fig-pata-pruh-studio { position: absolute; left: calc(50% - 720px); width: 1440px; bottom: 0; height: 72px; background: #F1EEE9; pointer-events: none; } #studio-stranka { position: relative; } #studio { position: relative; max-width: 100%; margin: 0 auto; padding-bottom: 80px; } /* Ozdoba pod hlavičkou: vlasová čára a hvězdička na ní. Kreslí si ji stránka, ne hlavička — ta je přilepená a ozdoba má odrolovat. */ #studio .st-ozdoba-cara { position: absolute; height: 1px; background: #D2BEA9; } #studio .st-ozdoba-hvezda { position: absolute; background: url("assets/obrazky/imgVector37.svg") no-repeat center/contain; } #studio .st-hero { text-align: center; } #studio .st-hero-1, #studio .st-hero-2 { display: block; } /* Oba kusy druhého řádku dědí písmo řádku. Na mobilu je návrh dělí na dvě velikosti a tam si každý své písmo dostane. */ #studio .st-hero-pro, #studio .st-hero-peci { font: inherit; color: inherit; } #studio .st-podtitul { text-align: center; } /* GALERIE. Sloupce jsou tři samostatné stohy — přesně jak je návrh kreslí. Dlaždice nenese výšku v pixelech, ale `--v` z DESKTOPOVÉHO návrhu; pásmo si ji přepočítá přes šířku svého sloupce, takže tabletová galerie vyjde jako desktopová × 0,641787 sama od sebe. */ #studio .st-galerie { display: flex; gap: var(--mez); } #studio .st-sloupec { display: flex; flex-direction: column; gap: var(--mez); width: var(--sl); } #studio .st-dlazdice { position: relative; overflow: hidden; width: 100%; height: calc(var(--sl) * var(--v) / 347); background: #C4C4C4; border-radius: 12px; } /* FOTKA V DLAŽDICI. Čtyři procenta jsou týž zápis, jaký vydá Figma: o kolik je fotka větší než dlaždice a o kolik se posune. Počítá je `studio_obrazky.vyrez()` ze zoomu a ohniska, tedy z toho, co grafik u fotky určil — ne z tvaru konkrétní dlaždice. Výchozí hodnoty jsou prosté pokrytí na střed, takže dlaždice bez vlastního výřezu nemusí nic nastavovat. `max-width: none` schválně: motiv má na obrázcích globální `max-width: 100%`, které by fotku srazilo zpátky na šířku dlaždice a výřez by zmizel. */ /* LUPA — průhledné tlačítko přes celou dlaždici. Nic nekreslí, jen přijímá klik a dává fotce jméno pro odečítač. Ohraničení při fokusu je uvnitř, aby ho neuřízl `overflow: hidden` dlaždice. */ #studio .st-lupa { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } #studio .st-lupa:focus-visible { outline: 3px solid #7e5232; outline-offset: -3px; border-radius: 12px; } /* ZVĚTŠENINA. Fotka se ukazuje celá a nezvětšená — `contain` ji dopočítá do okna zařízení, ať je na výšku, nebo na šířku. */ #st-lupa.st-lupa-okno { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; } #st-lupa.st-lupa-okno::backdrop { background: rgba(20, 14, 10, .92); } #st-lupa .st-lupa-ram { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 16px; box-sizing: border-box; } #st-lupa #st-lupa-obraz { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; display: block; } #st-lupa .st-lupa-popis { color: #f1eee9; font-family: "Jost", sans-serif; font-size: 15px; text-align: center; max-width: 60ch; } #st-lupa .st-lupa-pocet { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; color: #c9c0b6; font-family: "Jost", sans-serif; font-size: 13px; font-variant-numeric: tabular-nums; } /* Ovládací tlačítka. Plocha 44 px kvůli prstu, kresba menší. PODKLAD JE TMAVÝ, ne světlý. Nejdřív měl krytí 0,12 ze světlé barvy — nad ztmaveným pozadím to stačilo, jenže šipky leží PŘES fotku a nad světlým snímkem (bílá fasáda, obloha) zmizely. Zadavatel to hlásil z telefonu. Tmavý podklad drží kontrast nad čímkoli, protože kresba je světlá; stín ho odlepí i od tmavé fotky. */ #st-lupa .st-lupa-zavrit, #st-lupa .st-lupa-krok { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 14, 10, .58); box-shadow: 0 2px 12px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; z-index: 2; } #st-lupa .st-lupa-zavrit:hover, #st-lupa .st-lupa-krok:hover { background: rgba(20, 14, 10, .82); } #st-lupa .st-lupa-zavrit:focus-visible, #st-lupa .st-lupa-krok:focus-visible { outline: 3px solid #f1eee9; outline-offset: 2px; } #st-lupa .st-lupa-zavrit { top: 12px; right: 12px; } #st-lupa .st-lupa-zavrit::before, #st-lupa .st-lupa-zavrit::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; background: #f1eee9; } #st-lupa .st-lupa-zavrit::before { transform: rotate(45deg); } #st-lupa .st-lupa-zavrit::after { transform: rotate(-45deg); } #st-lupa .st-lupa-krok { top: 50%; transform: translateY(-50%); } #st-lupa .st-lupa-zpet { left: 12px; } #st-lupa .st-lupa-dopredu { right: 12px; } /* ŠIPKA JE OTOČENÝ ČTVEREČEK se dvěma okraji, takže střed jeho rámečku NENÍ střed kresby: po otočení o 45° zbude z „L“ tvar „<“, jehož hrot trčí na jednu stranu. Když se vycentroval rámeček, kresba seděla o `--posun` vedle — zadavatel to viděl okem u šipky zpět. Kompenzace se proto přičítá v NEOTOČENÝCH osách (translateX se v pořadí uplatní až po rotaci), takže je jedno, jak velké tlačítko je. */ #st-lupa .st-lupa-krok::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; --posun: 3.6px; border-left: 2px solid #f1eee9; border-bottom: 2px solid #f1eee9; } #st-lupa .st-lupa-zpet::before { transform: translate(-50%, -50%) translateX(var(--posun)) rotate(45deg); } #st-lupa .st-lupa-dopredu::before { transform: translate(-50%, -50%) translateX(calc(-1 * var(--posun))) rotate(-135deg); } /* Jediná fotka = není kam listovat. */ #st-lupa.je-sama .st-lupa-krok { display: none; } /* Na dotyku o kus větší terč a blíž ke kraji, ať nepřekrývá střed fotky. Hover se na dotyku nekoná, tak podklad rovnou o něco sytější. */ @media (hover: none) { #st-lupa .st-lupa-zavrit, #st-lupa .st-lupa-krok { width: 48px; height: 48px; background: rgba(20, 14, 10, .68); } #st-lupa .st-lupa-zpet { left: 8px; } #st-lupa .st-lupa-dopredu { right: 8px; } #st-lupa .st-lupa-zavrit::before, #st-lupa .st-lupa-zavrit::after { left: 15px; top: 23px; } } #studio .st-foto { position: absolute; display: block; max-width: none; width: calc(var(--s, 100) * 1%); height: calc(var(--vy, 100) * 1%); left: calc(var(--l, 0) * 1%); top: calc(var(--t, 0) * 1%); object-fit: cover; } /* CTA blok. */ #studio .st-cta { text-align: center; } #studio .st-cta-hvezda { display: block; margin: 0 auto; background: url("assets/obrazky/imgVector89.svg") no-repeat center/contain; } #studio .st-cta-nadpis, #studio .st-cta-text { margin-left: auto; margin-right: auto; } #studio .st-cta-tlacitko { position: relative; display: block; margin-left: auto; margin-right: auto; padding: 0; border: 0; cursor: pointer; background: #A8845E; } #studio .st-cta-popis { display: block; } #studio .st-cta-kolecko { position: absolute; display: block; background: #F1EEE9; border-radius: 50%; } #studio .st-cta-kolecko::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("assets/obrazky/imgVector74.svg") no-repeat center/contain; } /* Tvrdé zlomy podtitulu. Návrh je má v každém rámci jinde; ukazuje se vždy jen sada svého pásma. */ #studio .st-zlom-d, #studio .st-zlom-t, #studio .st-zlom-m { display: none; } /* ---------------------------------------------- DESKTOP */ #studio { --sl: 347px; --mez: 24px; width: 1089px; } #studio .st-ozdoba-cara { top: 103px; left: 0px; width: 1080px; } #studio .st-ozdoba-hvezda { top: 95px; left: 1088px; width: 16px; height: 16px; } #studio .st-hero { padding-top: 159px; } #studio .st-hero-1 { margin: 0px auto 0; height: 57px; } #studio .st-hero-2 { margin: -8px auto 0; height: 80px; } #studio .st-podtitul { margin: 4px auto 0; height: 69px; max-width: 827px; } #studio .st-galerie-a { margin: 22px auto 0; } #studio .st-cta { margin: 48px auto 0; } #studio .st-cta-hvezda { margin: 0px auto 0; height: 69px; max-width: 72px; } #studio .st-cta-nadpis { margin: 17px auto 0; height: 31px; max-width: 479px; } #studio .st-cta-text { margin: 4px auto 0; height: 69px; max-width: 810px; } #studio .st-cta-tlacitko { margin-top: -15px; } #studio .st-galerie-b { margin: 90px auto 0; } #studio .st-cta-nadpis { font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 23px; line-height: 31px; color: #3C1D06; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1025px; } #studio .st-cta-popis { font-family: "Cinzel", sans-serif; font-weight: 600; font-size: 17px; line-height: 23px; color: #EBE7DD; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.0881px; } #studio .st-cta-text { font-family: "Jost", sans-serif; font-weight: 300; font-size: 19px; line-height: 22px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.1506px; } #studio .st-hero-1 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 42px; line-height: 57px; color: #A8845E; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1825px; } #studio .st-hero-2 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 59px; line-height: 80px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.2488px; } #studio .st-podtitul { font-family: "Jost", sans-serif; font-weight: 300; font-size: 18px; line-height: 22px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.3038px; } #studio .st-cta-tlacitko { width: 360px; height: 42px; border-radius: 21px; margin-left: 359px; margin-right: auto; } #studio .st-cta-kolecko { width: 56px; height: 56px; right: -16px; top: -7px; } #studio .st-cta-kolecko::after { width: 15px; height: 30px; } #studio .st-cta-popis { margin: 0 0 0 19px; width: 292px; } /* ---------------------------------------------- TABLET */ /* ---------------------------------------------- MOBIL */ /* Mobil skládá tři sloupce do jednoho. `display: contents` udělá z dlaždic přímé potomky galerie a `order` je poskládá tak, jak je kreslí mobilní rámec. Druhý blok galerie na mobilu není. */ /* Obal druhého řádku na mobilu NIC nedrží — výšku i odsazení nesou oba kusy zvlášť. Bez tohohle by na něm zůstalo desktopové pravidlo (`margin-top: -8px; height: 80px`) a celý mobil by se posunul o 8 px nahoru; kontrola to našla jako „dlaždice −7 px svisle“. */ /* =================================================== 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-studio{ display: none; } html:root #studio .st-zlom-m{ display: inline; } html:root #studio{ --sl: 347px; --mez: 24px; width: 347px; } html:root #studio .st-ozdoba-cara{ top: 82px; left: -2px; width: 322px; } html:root #studio .st-ozdoba-hvezda{ top: 74px; left: 327px; width: 16px; height: 16px; } html:root #studio .st-hero{ padding-top: 143px; } html:root #studio .st-hero-1{ margin: 0px auto 0; height: 34px; } html:root #studio .st-hero-pro{ margin: 2px auto 0; height: 31px; } html:root #studio .st-hero-peci{ margin: 1px auto 0; height: 47px; } html:root #studio .st-podtitul{ margin: 13px auto 0; height: 107px; max-width: 365px; } html:root #studio .st-galerie-a{ margin: 7px auto 0; } html:root #studio .st-cta{ margin: 40px auto 0; } html:root #studio .st-cta-hvezda{ margin: 0px auto 0; height: 69px; max-width: 72px; } html:root #studio .st-cta-nadpis{ margin: 17px auto 0; height: 31px; max-width: 379px; } html:root #studio .st-cta-text{ margin: 5px auto 0; height: 69px; max-width: 284px; } html:root #studio .st-cta-tlacitko{ margin-top: 2px; } html:root #studio .st-cta-nadpis{ font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 23px; line-height: 31px; color: #3C1D06; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1025px; } html:root #studio .st-cta-popis{ font-family: "Cinzel", sans-serif; font-weight: 600; font-size: 15px; line-height: 20px; color: #EBE7DD; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.0719px; } html:root #studio .st-cta-text{ font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.27px; } html:root #studio .st-hero-1{ font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 25px; line-height: 34px; color: #A8845E; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.1062px; } html:root #studio .st-hero-peci{ font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 35px; line-height: 47px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1487px; } html:root #studio .st-hero-pro{ font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 23px; line-height: 31px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1112px; } html:root #studio .st-podtitul{ font-family: "Jost", sans-serif; font-weight: 300; font-size: 15px; line-height: 20px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.2531px; } html:root #studio .st-cta-tlacitko{ width: 325px; height: 42px; border-radius: 21px; margin-left: 3px; margin-right: auto; } html:root #studio .st-cta-kolecko{ width: 56px; height: 56px; right: -16px; top: -7px; } html:root #studio .st-cta-kolecko::after{ width: 15px; height: 30px; } html:root #studio .st-cta-popis{ margin: 0 0 0 2px; width: 292px; } html:root #studio .st-galerie-b{ margin: 48px auto 0; } html:root #studio .st-galerie{ flex-direction: column; } html:root #studio .st-sloupec{ display: contents; } html:root #studio .st-dlazdice{ order: var(--m, 0); width: var(--sl); } html:root #studio .st-hero-pro, html:root #studio .st-hero-peci{ display: block; } html:root #studio .st-hero-2{ margin-top: 0; height: auto; } } @media (min-width:768px) and (max-width:1199px){ html:root .fig-pata-pruh-studio{ display: none; } html:root #studio .st-zlom-t{ display: inline; } html:root #studio{ --sl: 222.7px; --mez: 15.4px; width: 698.91px; } html:root #studio .st-ozdoba-cara{ top: 85px; left: 0px; width: 700px; } html:root #studio .st-ozdoba-hvezda{ top: 77px; left: 705px; width: 16px; height: 16px; } html:root #studio .st-hero{ padding-top: 159px; } html:root #studio .st-hero-1{ margin: 0px auto 0; height: 53px; } html:root #studio .st-hero-2{ margin: -6px auto 0; height: 73px; } html:root #studio .st-podtitul{ margin: 6px auto 0; height: 69px; max-width: 625px; } html:root #studio .st-galerie-a{ margin: 49px auto 0; } html:root #studio .st-cta{ margin: 58.55px auto 0; } html:root #studio .st-cta-hvezda{ margin: 0px auto 0; height: 69px; max-width: 72px; } html:root #studio .st-cta-nadpis{ margin: 17px auto 0; height: 31px; max-width: 479px; } html:root #studio .st-cta-text{ margin: 4px auto 0; height: 69px; max-width: 810px; } html:root #studio .st-cta-tlacitko{ margin-top: -15px; } html:root #studio .st-galerie-b{ margin: 84px auto 0; } html:root #studio .st-cta-nadpis{ font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 23px; line-height: 31px; color: #3C1D06; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1025px; } html:root #studio .st-cta-popis{ font-family: "Cinzel", sans-serif; font-weight: 600; font-size: 17px; line-height: 23px; color: #EBE7DD; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.0881px; } html:root #studio .st-cta-text{ font-family: "Jost", sans-serif; font-weight: 300; font-size: 19px; line-height: 22px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.1506px; } html:root #studio .st-hero-1{ font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 39px; line-height: 53px; color: #A8845E; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.1638px; } html:root #studio .st-hero-2{ font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 54px; line-height: 73px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 0.2275px; } html:root #studio .st-podtitul{ font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #7E5232; /* svislá korekce účaří: návrh − prohlížeč */ position: relative; top: 1.27px; } html:root #studio .st-cta-tlacitko{ width: 360px; height: 42px; border-radius: 21px; margin-left: 172px; margin-right: auto; } html:root #studio .st-cta-kolecko{ width: 56px; height: 56px; right: -16px; top: -7px; } html:root #studio .st-cta-kolecko::after{ width: 15px; height: 30px; } html:root #studio .st-cta-popis{ margin: 0 0 0 19px; width: 292px; } } @media (min-width:1200px){ html:root:root #studio .st-zlom-d{ display: inline; } }