/* Kosmetika — původně vygeneroval build (_build/postav_kosmetiku_web.py); ten se už nespouští, EDITUJ PŘÍMO. Rozměry jsou z rámce 274:105 (desktop); tablet a mobil grafik nedodal — displejová písma jedou po ladderu ze STUDIA, výzva na konci podle rámců HOMEPAGE a text v panelu se nezmenšuje (tak to má ceník ve svých vlastních třech rámcích). JEDEN MARKUP, TŘI PÁSMA. Stránka NENÍ plátno s absolutními souřadnicemi — je to tok, ve kterém se mění jen rozměry. Vzorem je ceník a Studio. TEXT SE PŘELÉVÁ. Panel nemá výšku z návrhu; má odsazení a roste s obsahem. Kdyby dostal výšku, dlouhý text by z něj na užším okně vytekl. */ body.page-template-page-kosmetika, body.stranka-kosmetika { position: relative; } /* Pozadí kreslí SPOLEČNÁ vrstva `#fig-pozadi` — táž jako na homepage. Kotví se na , ne dovnitř stránky: 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-kosmetika > #fig-pozadi, body.stranka-kosmetika > #fig-pozadi { position: absolute; inset: 0; height: auto; } body.page-template-page-kosmetika .fig-pozadi-okno, body.stranka-kosmetika .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-kosmetika .fig-pata-pruh-kosmetika, body.stranka-kosmetika .fig-pata-pruh-kosmetika { position: absolute; left: calc(50% - 720px); width: 1440px; bottom: 0; height: 72px; background: #F1EEE9; pointer-events: none; } #kosmetika-stranka { position: relative; } #kosmetika { 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. */ #kosmetika .ks-ozdoba-cara { position: absolute; height: 1px; background: #D2BEA9; } #kosmetika .ks-ozdoba-hvezda { position: absolute; background: url("assets/obrazky/imgVector37.svg") no-repeat center/contain; } #kosmetika .ks-hero { text-align: center; } #kosmetika .ks-hero-1, #kosmetika .ks-hero-2 { display: block; } #kosmetika .ks-podtitul { text-align: center; } /* PANEL. Přechod je v datech balíčku jen jako `radial-gradient(#F9F1E8, #FFFFFF)` bez polohy — návrhový nástroj ho do CSS převádí přibližně. Bere se proto matice ze SVG návrhu, v pixelech rámce, stejně jako u ceníku. */ #kosmetika .ks-panel { position: relative; margin-left: auto; margin-right: auto; /* `position: relative` BEZ z-indexu nezakládá vlastní kontext vrstvení — `z-index: -1` na ::before pak neuteče `.ks-panel`, ale celému dokumentu a schová se za neprůhledné pozadí . Naměřeno: box pozadí neviditelný na živém webu, `elementFromPoint` i `getComputedStyle` ukazovaly správný obsah, jen pod vším ostatním. `z-index: 0` stačí — kontext vrstvení založí, obsah se nikam neposune. Nalezeno 29. 8. 2026, viz proc/kosmetika_zindex.py. */ z-index: 0; } #kosmetika .ks-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; 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); } #kosmetika .ks-panel > * { position: relative; } #kosmetika .ks-jiskry { position: relative; display: block; } #kosmetika .ks-jiskra { position: absolute; max-width: none; } #kosmetika .ks-znacka, #kosmetika .ks-znacka-podtitul, #kosmetika .ks-osoba { text-align: center; } /* Kontakt se na úzkém pásmu zalomí u svislítka, ne uprostřed čísla. */ /* Návrh má kolem svislítka DVĚ mezery; HTML by z nich udělalo jednu, proto je to odsazení. `0.5em` při 20 px = 10 px na stranu, tedy tolik, kolik dvě mezery Jostu zaberou. */ #kosmetika .ks-osoba-delic { color: #D19F68; padding: 0 0.5em; } #kosmetika .ks-osoba-cast { white-space: nowrap; } #kosmetika .ks-osoba-tucne { font-weight: 500; } #kosmetika .ks-osoba-tel { color: inherit; text-decoration: none; } #kosmetika .ks-osoba-tel:hover, #kosmetika .ks-osoba-tel:focus-visible { text-decoration: underline; } /* TEXT V PANELU. Odstavce nemají vlastní mezeru — dělá ji `ks-mezera-*` podle toho, kolik prázdných řádků je mezi nimi v návrhu. */ #kosmetika .ks-text > * { margin: 0; } #kosmetika .ks-text > .ks-mezera-1 { margin-top: 22px; } #kosmetika .ks-text > .ks-mezera-2 { margin-top: 44px; } #kosmetika .ks-text > .ks-mezera-3 { margin-top: 66px; } #kosmetika .ks-text strong, #kosmetika .ks-duraz { font-weight: 500; } #kosmetika .ks-cas { font-weight: 600; color: #A8845E; } /* Odrážky: text zalomeného řádku NEPODTÉKÁ značku — jinak by druhý řádek vypadal jako další položka. Návrh je má jako obyčejné odstavce, na desktopu se to nepozná (vejdou se na řádek), na mobilu ano. */ #kosmetika .ks-seznam { list-style: none; padding: 0; } #kosmetika .ks-seznam li { padding-left: 1.15em; text-indent: -1.15em; } #kosmetika .ks-seznam li::before { content: "✦"; display: inline-block; width: 1.15em; text-indent: 0; } #kosmetika .ks-seznam li:nth-child(odd)::before { color: #A8845E; } #kosmetika .ks-seznam li:nth-child(even)::before { color: #7E5232; } /* DĚLIČ nad výzvou: dvě vlasové čáry a mezi nimi kroužek s jiskrami. Čáry se roztahují samy, mezera kolem kroužku je z návrhu. */ #kosmetika .ks-delic { display: flex; align-items: center; margin-left: auto; margin-right: auto; } #kosmetika .ks-delic-cara { flex: 1 1 0; height: 1px; background: #D2BEA9; } #kosmetika .ks-znak { position: relative; flex: none; width: 95px; height: 95px; } #kosmetika .ks-znak svg { display: block; } #kosmetika .ks-znak-jiskra { position: absolute; max-width: none; } /* VÝZVA „V hlavní roli Vy“. JE TO TÝŽ BLOK, JAKÝ MÁ HOMEPAGE pod ceníkem — zadavatel 25. 8. 2026: „tohle je to samé, co máme na homepage pod ceníkem. vezmi si to z toho, a budeš to mít 1:1“. Čísla se proto nevymýšlejí: rozměry i barvy jsou vzaté z toho, co homepage UŽ MÁ (`fx11`, `fx20`, `fx127`, `fx304`–`fx307`, `fx173`, `fx174` ve `style.css`), a `kontrola_kosmetiky.py` obě stránky POROVNÁVÁ — kdyby se rozešly, spadne. Rozdíl je jediný a je záměrný: homepage to má jako plátno s absolutními souřadnicemi v celé stránce, tady je to samostatný blok, takže se souřadnice počítají proti němu. Kresba vychází stejně. */ #kosmetika .ks-vyzva { position: relative; margin-left: auto; margin-right: auto; } #kosmetika .ks-vyzva-nadpis { margin: 0; } /* Všechny kusy leží ABSOLUTNĚ. Nadpis je dvojice různě velkých písem (44 px vedle 84 px) a v návrhu se nezarovnávají ani účařím, ani horní hranou — jen tam takhle leží. Kdyby se skládaly tokem, záviselo by umístění na tom, jak široce se který text vykreslil. */ #kosmetika .ks-vyzva-1, #kosmetika .ks-vyzva-2, #kosmetika .ks-vyzva-popis, #kosmetika .ks-vyzva-tlacitko, #kosmetika .ks-vyzva-popisek { position: absolute; margin: 0; } #kosmetika .ks-vyzva-popis { text-align: center; } /* Tlačítko: týž tvar jako CTA na Studiu, včetně toho, že se popisek svisle NEODSAZUJE — `