/* ZuzkaPro.Nails — z návrhu 5:2149 (KOTLAR-EDU), 6. 9. 2026. 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 Kosmetika, jejíž geometrii má návrh SHODNOU do pixelu (panel 378 od vrcholu, jiskry 408, značka 506, podtitul 558, kontakt 616, text 706 — všechno vychází z týchž odsazení). Tablet a mobil grafik nedodal; displejová písma jedou po témž ladderu jako Kosmetika/Studio a text v panelu se nezmenšuje. TEXT SE PŘELÉVÁ. Panel nemá výšku z návrhu (1649 px); má odsazení a roste s obsahem, jinak by z něj dlouhý text na užším okně vytekl. DOLNÍ POLOVINA STRÁNKY TADY NENÍ. Výzvu „Fotky napoví…“ i galerii kreslí `studio.css` — je to týž blok jako na Studiu a Portfoliu (rytmus dlaždic v návrhu je doslova blok `b` z `atelier_kotlar_studio_rytmus()`), a od 8. 9. 2026 i beze zbytku STEJNÝ text a ikona tlačítka (dřív měl návrh jiný text a ikonu telefonu — zadavatel požádal o sjednocení, viz proc/zuzkapro_nails_stranka.py). */ body.page-template-page-zuzkapro-nails { 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. */ body.page-template-page-zuzkapro-nails > #fig-pozadi { position: absolute; inset: 0; height: auto; } body.page-template-page-zuzkapro-nails .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-zuzkapro-nails .fig-pata-pruh-zuzkapro { position: absolute; left: calc(50% - 720px); width: 1440px; bottom: 0; height: 72px; background: #F1EEE9; pointer-events: none; } #zuzkapro-stranka { position: relative; } /* BEZ `padding-bottom` — na rozdíl od Kosmetiky stránka nekončí panelem, pokračuje galerií. Spodní vzduch dává `#studio`. */ #zuzkapro { position: relative; max-width: 100%; margin: 0 auto; } /* 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. */ #zuzkapro .zp-ozdoba-cara { position: absolute; height: 1px; background: #D2BEA9; } #zuzkapro .zp-ozdoba-hvezda { position: absolute; background: url("assets/obrazky/imgVector37.svg") no-repeat center/contain; } #zuzkapro .zp-hero { text-align: center; } #zuzkapro .zp-hero-1, #zuzkapro .zp-hero-2 { display: block; } #zuzkapro .zp-podtitul { text-align: center; } /* PANEL. Přechod je v datech návrhu jen jako `radial-gradient(#F9F1E8, #FFFFFF)` bez polohy — bere se proto matice ze SVG návrhu, v pixelech rámce, stejně jako u Kosmetiky a ceníku. Zápis je `;base64,`, ne `utf8,`: doslovný `#` v `fill='url(#g)'` prohlížeč místy bere jako fragment URL a SVG usekne. Viz proc/svg_fragment_bug.py. */ #zuzkapro .zp-panel { position: relative; margin-left: auto; margin-right: auto; /* `position: relative` BEZ z-indexu nezakládá vlastní kontext vrstvení a `z-index: -1` na ::before by pak uteklo celému dokumentu — schovalo by se za neprůhledné pozadí . Viz proc/kosmetika_zindex.py. */ z-index: 0; } #zuzkapro .zp-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background-size: 100% 100%; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTA4OCAxNjQ5JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxyZWN0IHg9JzAnIHk9JzAnIGhlaWdodD0nMTAwJScgd2lkdGg9JzEwMCUnIGZpbGw9J3VybCgjZyknLz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzEwJyBncmFkaWVudFRyYW5zZm9ybT0nbWF0cml4KC0zOC45MTIgNjMuNjEyIC03NC43OCAtMjIuNzQzIDEwMzkuNiAtMTQ3LjQzKSc+PHN0b3Agc3RvcC1jb2xvcj0nI0Y5RjFFOCcgb2Zmc2V0PScwJy8+PHN0b3Agc3RvcC1jb2xvcj0nI0ZGRkZGRicgb2Zmc2V0PScxJy8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"); /* 0.6 = krytí vrstvy přesně podle návrhu (uzel 5:2153). */ opacity: 0.6; box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1); } #zuzkapro .zp-panel > * { position: relative; } #zuzkapro .zp-jiskry { position: relative; display: block; } #zuzkapro .zp-jiskra { position: absolute; max-width: none; } #zuzkapro .zp-znacka, #zuzkapro .zp-znacka-podtitul { text-align: center; } /* TEXT V PANELU. Odstavce nemají vlastní mezeru — dělá ji `zp-mezera-*` podle toho, kolik prázdných řádků je mezi nimi v návrhu. */ #zuzkapro .zp-text > * { margin: 0; } #zuzkapro .zp-text > .zp-mezera-1 { margin-top: 22px; } #zuzkapro .zp-text > .zp-mezera-2 { margin-top: 44px; } /* 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. */ #zuzkapro .zp-seznam { list-style: none; padding: 0; } #zuzkapro .zp-seznam li { padding-left: 1.15em; text-indent: -1.15em; } #zuzkapro .zp-seznam li::before { content: "✦"; display: inline-block; width: 1.15em; text-indent: 0; font-size: 18px; } #zuzkapro .zp-seznam li:nth-child(odd)::before { color: #A8845E; } #zuzkapro .zp-seznam li:nth-child(even)::before { color: #7E5232; } /* VÝZVA „Fotky napoví…“ — sdílí ji se Studiem/Portfoliem beze změny (`studio.css`, text i ikona STEJNÉ jako tam). Návrh 5:2195 měl původně jiný text („Objednejte se ještě dnes“) a ikonu telefonu místo šipky — zadavatel 8. 9. 2026 požádal o sjednocení se zbytkem webu, takže tahle odchylka od Studia zmizela (třída `.zp-cta` i pravidla pro ni se odstranily, zůstal jen svislý odstup výzvy od panelu výš). */ .zp-galerie-blok #studio .st-cta { margin-top: 73px; } /* ---------------------------------------------- DESKTOP */ #zuzkapro { width: 1088px; } #zuzkapro .zp-ozdoba-cara { top: 103px; left: 0px; width: 1080px; } #zuzkapro .zp-ozdoba-hvezda { top: 95px; left: 1088px; width: 16px; height: 16px; } #zuzkapro .zp-hero { padding-top: 159px; } #zuzkapro .zp-hero-1 { margin: 0 auto; } #zuzkapro .zp-hero-2 { margin: -8px auto 0; } /* `min-height` z návrhu (box 69 px, text v něm jen dva řádky = 44 px) — bez ní by panel začínal o 25 px výš, než ho grafik posadil. Ne pevná `height` jako na Studiu: kdyby se text jednou prodloužil, měl by kam růst místo aby vytekl na panel. Na užších pásmech se nezadává vůbec, tam se stejně zalomí na víc řádků. */ #zuzkapro .zp-podtitul { margin: 4px auto 0; max-width: 841px; min-height: 69px; } #zuzkapro .zp-panel { width: 1088px; border-radius: 12px; padding: 30px 44px 66px; margin-top: 17px; } #zuzkapro .zp-jiskry { width: 85px; height: 81px; margin: 0 auto; } #zuzkapro .zp-jiskra-a { left: 0px; top: 0px; width: 57px; height: 57px; } #zuzkapro .zp-jiskra-b { left: 41px; top: 47px; width: 34px; height: 34px; } #zuzkapro .zp-jiskra-c { left: 66px; top: 13px; width: 19px; height: 19px; } #zuzkapro .zp-znacka { margin: 17px auto 0; } #zuzkapro .zp-znacka-podtitul { margin: -5px auto 0; } #zuzkapro .zp-text { margin-top: 60px; } #zuzkapro .zp-hero-1 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 42px; line-height: 57px; color: #A8845E; } #zuzkapro .zp-hero-2 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 59px; line-height: 80px; color: #7E5232; } #zuzkapro .zp-podtitul { font-family: "Jost", sans-serif; font-weight: 300; font-size: 18px; line-height: 22px; color: #7E5232; } #zuzkapro .zp-znacka { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 42px; line-height: 57px; color: #A8845E; } #zuzkapro .zp-znacka-podtitul { font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 17px; line-height: 23px; color: #7E5232; } #zuzkapro .zp-text { font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #3C1D06; } #zuzkapro .zp-uvod, #zuzkapro .zp-nadpis { font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; line-height: 22px; color: #3C1D06; } /* Značkové mezinadpisy (FABY, GEL BY ZUZKAPRO.NAILS, …) jsou v návrhu hnědé, na rozdíl od nadpisu „Co získáte…“. */ #zuzkapro .zp-nadpis-hneda { color: #7E5232; } /* =================================================== PÁSMOVÁ PRAVIDLA. `html:root` kvůli specificitě — desktopová hodnota výš má `#zuzkapro`, holé `#zuzkapro` uvnitř @media by ji nepřebilo. Vysvětlení je v proc/pasma_media.py. */ @media (max-width:767px){ html:root .fig-pata-pruh-zuzkapro{ display: none; } html:root #zuzkapro{ width: 347px; } html:root #zuzkapro .zp-ozdoba-cara{ top: 82px; left: -2px; width: 322px; } html:root #zuzkapro .zp-ozdoba-hvezda{ top: 74px; left: 327px; width: 16px; height: 16px; } html:root #zuzkapro .zp-hero{ padding-top: 159px; } html:root #zuzkapro .zp-hero-1{ margin: 0 auto; } html:root #zuzkapro .zp-hero-2{ margin: 15px auto 0; } html:root #zuzkapro .zp-podtitul{ margin: 37px auto 0; max-width: 259px; } html:root #zuzkapro .zp-panel{ width: 347px; border-radius: 12px; padding: 30px 44px 66px; margin-top: 17px; } html:root #zuzkapro .zp-jiskry{ width: 85px; height: 81px; margin: 0 auto; } html:root #zuzkapro .zp-jiskra-a{ left: 0px; top: 0px; width: 57px; height: 57px; } html:root #zuzkapro .zp-jiskra-b{ left: 41px; top: 47px; width: 34px; height: 34px; } html:root #zuzkapro .zp-jiskra-c{ left: 66px; top: 13px; width: 19px; height: 19px; } html:root #zuzkapro .zp-znacka{ margin: 17px auto 0; } html:root #zuzkapro .zp-znacka-podtitul{ margin: 18px auto 0; } html:root #zuzkapro .zp-text{ margin-top: 60px; } html:root .zp-galerie-blok #studio .st-cta{ margin-top: 40px; } html:root #zuzkapro .zp-hero-1 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 25px; line-height: 34px; color: #A8845E; } html:root #zuzkapro .zp-hero-2 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 35px; line-height: 47px; color: #7E5232; } html:root #zuzkapro .zp-podtitul { font-family: "Jost", sans-serif; font-weight: 300; font-size: 15px; line-height: 20px; color: #7E5232; } html:root #zuzkapro .zp-znacka { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 25px; line-height: 34px; color: #A8845E; } html:root #zuzkapro .zp-znacka-podtitul { font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 17px; line-height: 23px; color: #7E5232; } html:root #zuzkapro .zp-text { font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #3C1D06; } html:root #zuzkapro .zp-uvod, html:root #zuzkapro .zp-nadpis { font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; line-height: 22px; color: #3C1D06; } /* Značkové mezinadpisy (FABY, GEL BY ZUZKAPRO.NAILS, …) jsou v návrhu hnědé, na rozdíl od nadpisu „Co získáte…“. */ html:root #zuzkapro .zp-nadpis-hneda { color: #7E5232; } } @media (min-width:768px) and (max-width:1199px){ html:root .fig-pata-pruh-zuzkapro{ display: none; } html:root #zuzkapro{ width: 698.91px; } html:root #zuzkapro .zp-ozdoba-cara{ top: 85px; left: 0px; width: 700px; } html:root #zuzkapro .zp-ozdoba-hvezda{ top: 77px; left: 705px; width: 16px; height: 16px; } html:root #zuzkapro .zp-hero{ padding-top: 159px; } html:root #zuzkapro .zp-hero-1{ margin: 0 auto; } html:root #zuzkapro .zp-hero-2{ margin: -4px auto 0; } html:root #zuzkapro .zp-podtitul{ margin: 11px auto 0; max-width: 610.91px; } html:root #zuzkapro .zp-panel{ width: 698.91px; border-radius: 12px; padding: 30px 44px 66px; margin-top: 17px; } html:root #zuzkapro .zp-jiskry{ width: 85px; height: 81px; margin: 0 auto; } html:root #zuzkapro .zp-jiskra-a{ left: 0px; top: 0px; width: 57px; height: 57px; } html:root #zuzkapro .zp-jiskra-b{ left: 41px; top: 47px; width: 34px; height: 34px; } html:root #zuzkapro .zp-jiskra-c{ left: 66px; top: 13px; width: 19px; height: 19px; } html:root #zuzkapro .zp-znacka{ margin: 17px auto 0; } html:root #zuzkapro .zp-znacka-podtitul{ margin: -1px auto 0; } html:root #zuzkapro .zp-text{ margin-top: 60px; } html:root .zp-galerie-blok #studio .st-cta{ margin-top: 47px; } html:root #zuzkapro .zp-hero-1 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 39px; line-height: 53px; color: #A8845E; } html:root #zuzkapro .zp-hero-2 { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 54px; line-height: 73px; color: #7E5232; } html:root #zuzkapro .zp-podtitul { font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #7E5232; } html:root #zuzkapro .zp-znacka { font-family: "Cinzel Decorative", sans-serif; font-weight: 400; font-size: 39px; line-height: 53px; color: #A8845E; } html:root #zuzkapro .zp-znacka-podtitul { font-family: "Cinzel Decorative", sans-serif; font-weight: 700; font-size: 17px; line-height: 23px; color: #7E5232; } html:root #zuzkapro .zp-text { font-family: "Jost", sans-serif; font-weight: 300; font-size: 16px; line-height: 22px; color: #3C1D06; } html:root #zuzkapro .zp-uvod, html:root #zuzkapro .zp-nadpis { font-family: "Jost", sans-serif; font-weight: 500; font-size: 21px; line-height: 22px; color: #3C1D06; } /* Značkové mezinadpisy (FABY, GEL BY ZUZKAPRO.NAILS, …) jsou v návrhu hnědé, na rozdíl od nadpisu „Co získáte…“. */ html:root #zuzkapro .zp-nadpis-hneda { color: #7E5232; } }