/* ========================================================== MOJE OBJEDNÁVKA (systémová stránka /moje-objednavka) Formulář na vyhledání objednávky/žádost o vrácení je Shoptetův React widget vykreslený ve web componentu (#shadow-root) - na jeho vnitřní elementy (.layout__login, .button_primary...) NELZE mířit běžnými CSS selektory, protože styly uvnitř shadow DOM jsou izolované od zbytku stránky. CSS custom properties (proměnné) jsou ale výjimka - ty přes hranici shadow DOM PROCHÁZEJÍ. DŮLEŽITÉ: musí se přepsat přímo na HOSTITELSKÉM elementu (main#order-withdraw - to je ten, co v sobě nese shadow root), NE na nějakém jeho obalu (#content-wrapper apod.)! Widget má tytéž proměnné znovu deklarované na ":host" uvnitř svého vlastního adoptovaného stylesheetu, a taková deklarace platí jako "vlastní" hodnota HOSTITELE - vlastní hodnota vždycky vyhraje nad zděděnou, bez ohledu na !important (ověřeno živě: přepis na #content-wrapper byl celý přeškrtnutý jako "Inherited from..."). Když ale cílíme na stejný element (#order-withdraw), na kterém je i ":host" deklarace, obě soupeří v normální cascade na stejné úrovni - tam už !important vyhraje. */ #order-withdraw { --Global-Backgrounds-Content-Primary: var(--sh-color-surface) !important; --Corner-Radius_Bigger: var(--sh-radius-md) !important; /* .button { border-radius: var(--Corner-Radius); } - samostatný token od --Corner-Radius_Bigger karty výš, ověřeno v devtools */ --Corner-Radius: var(--sh-radius-btn) !important; --Global-Backgrounds-Button-Primary: var(--sh-color-cta) !important; /* podtržítko před "Hover", ne pomlčka - stejná konvence jako --Corner-Radius_Bigger, ověřeno v devtools */ --Global-Backgrounds-Button-Primary_Hover: var(--sh-color-cta-hover) !important; --Global-Foregrounds-Button-Primary: var(--sh-color-cta) !important; --Global-Foregrounds-Button-Primary_Hover: var(--sh-color-cta-hover) !important; /* písmo - stejná technika, widget odkazuje na --Text-Font a tři váhové úrovně (Small/Base/Large) přes var(), viz devtools dump ":root,:host{--Text-Font:...; --Font-Weight-Body_Small:500; ...}" */ --Text-Font: var(--sh-font-family-body) !important; --Font-Weight-Body_Small: var(--sh-font-weight-body) !important; --Font-Weight-Body_Base: var(--sh-font-weight-body) !important; --Font-Weight-Body_Large: var(--sh-font-weight-body) !important; } /* .orderWithdraw (main-14.css) dává hostiteli pevné background-color: #f6f6f6 - žádný var(), takže tohle NENÍ shadow-DOM token, ale normální pravidlo v běžném (light) DOM. Jde tedy přepsat úplně normálně vyšší specificitou (ID+třída > jen třída), bez !important a bez triků s proměnnými. Tohle je POZADÍ STRÁNKY kolem karty formuláře. */ #order-withdraw.orderWithdraw { background-color: var(--sh-color-bg); } /* druhý, samostatný zdroj téhož vizuálního pozadí - .orderWithdraw--page má vlastní ::before (position:absolute, na celou šířku viewportu, z-index:-1), který "podkládá" stránku stejnou #f6f6f6 barvou. Musí se přepsat zvlášť, protože je to jiný selektor (jiná třída + ::before) než .orderWithdraw výš. */ #order-withdraw.orderWithdraw--page::before { background-color: var(--sh-color-bg); } /* #content-wrapper.container (homepage.css) dává VŠEM stránkám spodní padding (var(--sh-space-section)) - na téhle stránce v něm ale prosvítá jiná barva zespodu (patrně další sekce/pozadí za obsahem), protože ::before výš pokrývá jen výšku .orderWithdraw--page, ne tenhle padding navíc. Scoped jen na tuhle stránku (.orderWithdraw__container), ať se nedotkne spodního paddingu na žádné jiné stránce. Vyšší specificita (ID + 2 třídy) než #content-wrapper.container (ID + 1 třída), takže vyhraje bez ohledu na pořadí souborů. */ #content-wrapper.container.orderWithdraw__container { padding-bottom: 0; } /* ========================================================== PAGE TITLE ========================================================== */ .pageArticleDetail > header > h1{ text-align:left; /* menší než nadpis hera na homepage (ten je --sh-heading-display); obsahové stránky mají nadpis jako úvod do textu, ne jako hlavní sdělení — velký display zabíral půl obrazovky (2026-10-18) */ font-size: var(--sh-heading-xl); line-height: 1.05; text-wrap: balance; margin-top:0; margin-bottom:var(--sh-space-title-gap); /* stejný rytmus jako .sh-hero__title (homepage.css) */ } /* mobil: H1 nesmí být menší než nadpisy sekcí pod ním (.sh-hp-title = --sh-heading-xl), proto zůstává xl jako na desktopu (dřív md) */ /* na tabletu/mobilu je hlavička position:fixed a i po opravě její výšky (header.css) sedí nadpis hned na hraně obsahu — malá rezerva navíc, ať to nepůsobí nalepené */ @media (max-width: 991px) { .pageArticleDetail > header > h1{ margin-top: var(--sh-space-md); } } /* ========================================================== OBSAHOVÉ STRÁNKY (Spolek, Jak balíme objednávky, ...) Stránka (.pageArticleDetail) nemá na rozdíl od blogového článku žádný ".text" obal se základní typografií (viz blog.css ".news-item-detail .text h2/p/...") – stejné hodnoty tady znovu, scoped na [itemprop="about"] (Shoptetův obal obsahu z admin HTML editoru), ať vypadá stejně jako text v článku. Třídy s prefixem .sh-page__ jsou sdílené komponenty pro TENHLE typ stránky obecně (ne jen pro Spolek) – 2sloupcový řádek, úvodní text, mřížka fotek, číslované kroky, kontakt s kulatou fotkou. Používá je Spolek i "Jak balíme objednávky" a měly by je používat i další podobné stránky, ať vypadají konzistentně a styl se udržuje na jednom místě. Potřebuje-li konkrétní stránka vlastní výjimku, neupravuj tyhle sdílené třídy — obal obsah té stránky vlastní třídou (např. .sh-page--baleni) a přepiš jen v jejím scope. */ .pageArticleDetail [itemprop="about"] { font-family: var(--sh-font-family-body); font-size: var(--sh-text-base); line-height: var(--sh-line-height-body); color: var(--sh-color-text); } .pageArticleDetail [itemprop="about"] p { margin: 0 0 var(--sh-space-sm); } /* obyčejná fotka vložená přímo do textu (ne uvnitř .sh-page__media/ .sh-page__gallery-photo/... - ty mají vlastní width:100% pravidlo) - main-14 dává obrázkům jen max-width:100%, což užší/portrétové fotky nenatáhne na celou šířku sloupce, jen je omezí shora. Width:100% fotku roztáhne přes celou šířku jako zbytek obsahu (žádná mezera vpravo), height:auto zachová poměr stran. */ .pageArticleDetail [itemprop="about"] img { display: block; width: 100%; height: auto; border-radius: var(--sh-radius-md); } .pageArticleDetail [itemprop="about"] h2 { margin: var(--sh-space-lg) 0 var(--sh-space-sm); font-family: var(--sh-font-family-headings); font-size: var(--sh-heading-sm); line-height: var(--sh-line-height-heading-sm); font-weight: var(--sh-font-weight-heading); color: var(--sh-color-text); } /* menší podnadpis uvnitř sloupce (např. "Zajímá vás víc?" na Výročních zprávách) - stejné hodnoty jako .news-item-detail .text h3 v blog.css, ať h3 vypadá stejně v článku i na téhle stránce */ .pageArticleDetail [itemprop="about"] h3 { margin: var(--sh-space-md) 0 var(--sh-space-xs); font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); line-height: var(--sh-line-height-heading); font-weight: var(--sh-font-weight-heading); color: var(--sh-color-text); } /* .sh-value__title (homepage.css) je taky h3 - schválně BEZ marginu a s větším fontem, mezeru pod číslem dělá gap na .sh-value__heading (flex column), ne margin na h3. Bez tohohle scoped přebití by mu pravidlo výš (třída+atribut+tag > jedna třída) tiše vyhrávalo - stejný problém, jaký tu byl už víckrát (viz .sh-page__icon + h2 apod.) */ .pageArticleDetail [itemprop="about"] h3.sh-value__title { margin: 0; font-size: var(--sh-heading-sm); } /* dlouhé číslované/odrážkové texty (Obchodní podmínky a pod.) — stejný rytmus jako odstavce (p výš), jen s odsazením kvůli odrážkám/číslům */ .pageArticleDetail [itemprop="about"] ol, .pageArticleDetail [itemprop="about"] ul { margin: 0 0 var(--sh-space-sm); padding-left: 1.25em; } /* číslované seznamy (1. 2. 3.) chceme zarovnané na stejnou levou hranu jako běžné odstavce - list-style-position:inside dá číslo do řádku textu místo do vlastního sloupce vlevo od paddingu (na rozdíl od záporného margin-left tohle nikdy nepřeteče mimo obsah stránky) */ .pageArticleDetail [itemprop="about"] ol { padding-left: 0; list-style-position: inside; } /* stejná barva odrážky/čísla jako u blogových článků (blog.css .news-item-detail .text li::marker) */ .pageArticleDetail [itemprop="about"] li::marker { color: var(--sh-color-accent); } .pageArticleDetail [itemprop="about"] li { margin: 0 0 var(--sh-space-xs); } .pageArticleDetail [itemprop="about"] li:last-child { margin-bottom: 0; } .pageArticleDetail [itemprop="about"] li > ol, .pageArticleDetail [itemprop="about"] li > ul { margin-top: var(--sh-space-xs); } /* úvodní věta hned pod H1 – stejný rytmus jako .sh-hero__subtitle (homepage.css) */ .sh-page__intro { font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); font-weight: var(--sh-font-weight-body); line-height: 1.5; color: var(--sh-color-text); margin: 0 0 var(--sh-space-lead-gap); } /* stejný vzhled automaticky i bez ruční třídy .sh-page__intro - první odstavec hned pod H1 (typicky prostý text bez .sh-page__ rozvržení, např. Obchodní podmínky, Ochrana osobních údajů) ať vypadá stejně, aniž bychom na každé nové stránce museli pamatovat přidat třídu. H1 + tenhle úvod jsou navíc na 70% šířky (viz :has() pravidlo níž) - ZBYTEK obsahu stránky (h2, p, ol, ul...) zůstává na celou šířku. */ .pageArticleDetail [itemprop="about"] > p:first-child { font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); font-weight: var(--sh-font-weight-body); line-height: 1.5; color: var(--sh-color-text); margin: 0 0 var(--sh-space-lead-gap); } /* úvod uvnitř obalu (ne první potomek, např. 404) – [itemprop="about"] p (0,2,1) z main-14 by mu jinak vrátil menší odstup */ .pageArticleDetail [itemprop="about"] .sh-page__intro { margin: 0 0 var(--sh-space-lead-gap); } /* H1 + intro — širší než 1. sloupec řádků níže (na zkoušku 70 % šířky
, dřív přesně na šířku sloupce, viz calc() níže). H1 je sice mimo [itemprop="about"] (vlastní admin pole), ale měří se proti stejné šířce
, takže procento sedí i tam. :has() omezuje H1 pravidlo jen na stránky, které mají nějaký úvod (ať už .sh-page__intro, nebo automatický p:first-child výš) — zbytek obsahu stránky (h2, p, ol, ul...) zůstává vždycky na celou šířku. */ .pageArticleDetail:has(.sh-page__intro) > header > h1, .pageArticleDetail:has([itemprop="about"] > p:first-child) > header > h1, .sh-page__intro, .pageArticleDetail [itemprop="about"] > p:first-child { max-width: 70%; } /* ---------- nadpis sekce: eyebrow label + velký title ---------- Znovupoužité .sh-segmentation-intro__label/__title z homepage.css. Label (span) je bez konfliktu, ale .pageArticleDetail [itemprop="about"] h2 výše (třída+atribut+tag) má vyšší specificitu než samotné .sh-segmentation-intro__title (jedna třída), takže by jeho menší --sh-heading-sm tiše vyhrávalo nad zamýšleným větším --sh-heading-md – stejný scope navíc, ať naše pravidlo vyhraje. margin-top:0 (místo zděděných var(--sh-space-lg) shora) – nad titulkem už je label, který spacing sám zajišťuje. */ .pageArticleDetail [itemprop="about"] h2.sh-segmentation-intro__title { max-width: none; margin: 0 0 var(--sh-space-sm); font-family: var(--sh-font-family-headings); font-size: var(--sh-heading-md); line-height: var(--sh-line-height-heading-sm); font-weight: var(--sh-font-weight-heading); color: var(--sh-color-text); } /* stejný problém, stejná oprava jako .sh-segmentation-intro__title výš – .sh-value__text (homepage.css, kroky "01"/"02") je taky odstavec uvnitř [itemprop="about"], takže by mu bez tohohle scoped přebití potichu vyhrávalo obecné margin-bottom:sm místo zamýšlené 0 (mezeru mezi dvěma odstavci stejného kroku dělá .sh-value__text + .sh-value__text v homepage.css). */ .pageArticleDetail [itemprop="about"] p.sh-value__text { margin: 0; } /* .sh-value__text + .sh-value__text (homepage.css) samo o sobě prohrává - "margin:0" výš má vyšší specificitu (třída+atribut+tag) než dvě spojené třídy, takže by margin-top pro mezeru mezi odstavci stejného kroku potichu nikdy neplatil. Stejná specificita tady navíc (p.sh-value__text + p.sh-value__text), ať vyhraje. */ .pageArticleDetail [itemprop="about"] p.sh-value__text + p.sh-value__text { margin-top: var(--sh-space-xs); } /* ---------- samostatný úvod sekce (label + nadpis + text) ---------- Pro řádky BEZ druhého sloupce (obrázek/box) - třeba "Jak balíme objednávky" mezi dvěma .sh-page__row. Stejný rytmus nahoře/dole jako .sh-page__row, ať sekce navazují stejně jako všude jinde. */ .sh-page__section-intro { padding-top: var(--sh-space-section); padding-bottom: var(--sh-space-md); } /* .sh-page__row hned pod tímhle blokem má SVOJI vlastní padding-top: section - bez tohohle resetu by se sečetl s padding-bottom:md výš a mezi "Jak balíme" a další row by vznikla dvojnásobná (obří) mezera místo zamýšlených space-md. */ .sh-page__section-intro + .sh-page__row { padding-top: 0; } /* ---------- ikona v podbarveném boxu (např. "Ještě méně odpadu") ---------- Stejná mask-image technika jako ikony na stránce Doprava (viz níže .sh-page__delivery-row) – nezávisí na tom, že Shoptetův editor při uložení odstraňuje z HTML. Samostatná (ne přes .sh-delivery-feature__icon), protože box tu není v .sh-delivery-row mřížce. */ .sh-page__icon { display: block; width: 48px; height: 48px; margin-bottom: var(--sh-space-sm); color: var(--sh-color-accent); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* když je druhý icon+nadpis blok naskládaný rovnou pod odstavec předchozího (Jak balíme: Potraviny na váhu / Prací a čistící prostředky na váhu v jednom sloupci), potřebuje odstup shora – stejný token jako zbytek mezer mezi bloky na těchto stránkách */ p + .sh-page__icon { margin-top: var(--sh-space-lg); } /* list – reálná ikona "leaf" z Lucide (MIT), viewBox ponechán 0 0 24 24 (stejný princip škálování jako u sáčku výše), stroke-width:1 */ .sh-page__icon--leaf { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* papírový sáček (Potraviny na váhu, stránka Jak balíme) – reálná ikona "paper-bag" z Lucide (MIT), ne vlastní kresba. Ponechán originální viewBox 0 0 24 24 (žádné přepočítávání souřadnic) – mask-size:contain ho i tak roztáhne na stejných 48px jako ostatní ikony, takže stroke-width:1 tady vyjde opticky stejně silně jako stroke-width:2 na ikonách kreslených v prostoru 0 0 48 48 (1 jednotka z 24 se do 48px boxu škáluje 2×, stejně jako 1 jednotka z 48). */ .sh-page__icon--bag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.364%203.848C4%206%203%209.652%203%2012.652V19a2%202%200%20002%202h14a2%202%200%20002-2v-5c0-2.334-1.816-4.668-2.622-7.002%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%203h11.379a2%202%200%20011.789%201.106l.723%201.447A1%201%200%200119.997%207h-8.525a2%202%200%2001-1.789-1.106L8.79%204.105a2%202%200%2010-3.579%201.789l2.261%204.522A5%205%200%20018%2012.652V21%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.364%203.848C4%206%203%209.652%203%2012.652V19a2%202%200%20002%202h14a2%202%200%20002-2v-5c0-2.334-1.816-4.668-2.622-7.002%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%203h11.379a2%202%200%20011.789%201.106l.723%201.447A1%201%200%200119.997%207h-8.525a2%202%200%2001-1.789-1.106L8.79%204.105a2%202%200%2010-3.579%201.789l2.261%204.522A5%205%200%20018%2012.652V21%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* čisticí prostředky (Prací a čisticí prostředky na váhu, stránka Jak balíme) – reálná ikona "soap-dispenser-droplet" z Lucide (MIT), viewBox 0 0 24 24, stroke-width:1 (stejný princip jako výše) */ .sh-page__icon--bottle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.5%202v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202H7a2%202%200%200%200-2%202%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.29%2014.76A6.67%206.67%200%200%201%2017%2011a6.6%206.6%200%200%201-2.29%203.76c-1.15.92-1.71%202.04-1.71%203.19%200%202.22%201.8%204.05%204%204.05s4-1.83%204-4.05c0-1.16-.57-2.26-1.71-3.19%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.607%2021H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h7V7a1%201%200%200%200-1-1H9a1%201%200%200%200-1%201v3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.5%202v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202H7a2%202%200%200%200-2%202%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.29%2014.76A6.67%206.67%200%200%201%2017%2011a6.6%206.6%200%200%201-2.29%203.76c-1.15.92-1.71%202.04-1.71%203.19%200%202.22%201.8%204.05%204%204.05s4-1.83%204-4.05c0-1.16-.57-2.26-1.71-3.19%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.607%2021H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h7V7a1%201%200%200%200-1-1H9a1%201%200%200%200-1%201v3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* ---------- seznam s tečkami, stejný vzor jako u článků na blogu ---------- .sh-article__toc li::marker má jinak content:none (blog.css, kvůli odkazovým seznamům typu "Vše o nákupu", kde tečku nechceme) - stejná specificita jako moje pravidlo níž, takže by prohrávalo podle pořadí souborů. .sh-page__member-tiers navíc ve selektoru = vyšší specificita, vyhraje jistě. content musí být nastavený explicitně (ne přes list-style, to by "content:none" stejně přebilo). */ .sh-article__toc .sh-page__member-tiers li::marker { content: "• "; color: var(--sh-color-accent); } /* stejný specificity problém jako u ::marker výš - .sh-article__toc ul (blog.css) má margin:0;padding:0, potřebujeme víc specifické */ .sh-article__toc .sh-page__member-tiers { padding-left: 1.25em; margin: 0 0 var(--sh-space-sm); } .sh-page__member-tiers li { margin-bottom: var(--sh-space-xs); font-size: var(--sh-text-lg); } /* telefonní čísla se nemají lámat přes dva řádky */ a[href^="tel:"] { white-space: nowrap; } /* h2 hned za ikonou nemá dostávat zděděný velký margin-top z [itemprop="about"] h2 – ikona sama dělá odstup shora dost. Musí mít stejnou/vyšší specificitu než ".pageArticleDetail [itemprop='about'] h2" (třída+atribut+tag), jinak dřívější verze (jen ".sh-page__icon + h2") tiše prohrávala a mezera zůstávala stejně velká jako bez opravy. */ .pageArticleDetail [itemprop="about"] .sh-page__icon + h2 { margin-top: 0; } /* ---------- řádky (2sloupcová komponenta) ---------- Grid (ne flex+%) ze stejného důvodu jako .homepage-blog-wrapper.row v blog.css: s procentuální šířkou sloupců by "gap" mohl přetéct přes 100 %; "fr" jednotky ho odečtou automaticky. 1fr/1fr = poměr 50/50, stejné jako u H1/intro výše. align-items necháno na výchozím "stretch" (grid), takže druhý sloupec vždy vyplní stejnou výšku, jakou má sloupec vedle (obrázek, mřížka fotek...). */ .sh-page__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-space-xl); /* stejný rytmus jako mezi sekcemi na homepage a na stránce Doprava (.sh-page__delivery-row) – padding, ne margin, ať se sekce nesčítají zvlášť nahoře/dole mezi sousedícími řádky */ padding-top: var(--sh-space-section); padding-bottom: var(--sh-space-md); } /* [itemprop="about"] h2 výše dává nadpisu margin-top pro odstup od předchozího obsahu – jako první prvek textového sloupce by ale posouval text pod horní hranu sloupce vedle; vynulováno, ať oboje začíná na stejné výšce */ .sh-page__row > .sh-article__col-main > h2:first-child, .sh-page__row > .sh-article__toc > h2:first-child, .sh-page__row > .sh-article__col-main > .sh-article__toc:first-child > h2:first-child { margin-top: 0; } /* poslední prvek textového sloupce nesmí mít spodní margin – jinak text končí výš, než je spodní hrana sloupce vedle něj */ .sh-page__row > .sh-article__col-main > :last-child { margin-bottom: 0; } /* box VLOŽENÝ v textovém sloupci ZA jiným obsahem (na konci textu) – sedí hned pod odstavci, vlastní odstup nahoře navíc k tomu, co dává .sh-article__toc (margin-top:0 v blog.css) */ .sh-page__row > .sh-article__col-main .sh-article__toc { margin-top: var(--sh-space-md); } /* box, který je JEDINÝM obsahem sloupce (žádný text před ním) – bez toho odstupu navíc, ať začíná na stejné výšce jako sloupec vedle. Vyšší specificita (:first-child navíc) než pravidlo výše, vyhrává bez ohledu na pořadí v souboru. */ .sh-page__row > .sh-article__col-main > .sh-article__toc:first-child { margin-top: 0; } /* box jako SAMOSTATNÝ sloupec – bez vlastního odstupu shora, jen ať se nenatahuje na celou výšku řádku (výchozí grid stretch), zůstává v přirozené výšce nahoře */ .sh-page__row > .sh-article__toc { align-self: start; } .sh-page__media { border-radius: var(--sh-radius-md); overflow: hidden; } /* !important - obecné pravidlo ".pageArticleDetail [itemprop='about'] img" výš (kvůli fotce vložené přímo do textu) má vyšší specificitu (třída+atribut+tag) než tohle (třída+tag), takže by jinak potichu přebíjelo height:100%/width:100% tady a rozbilo object-fit:cover ořez fotky do čtverce */ .sh-page__media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; } /* varianta se 2 fotkami vedle sebe místo jedné (404 stránka) - každá fotka je vlastní .sh-page__media, ať se stejně jako výš stará o radius/overflow/cover; wrapper jen udělá 2sloupcový grid a na mobilu (viz media query níž) zalomí pod sebe */ .sh-page__media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-space-sm); } /* ---------- mřížka čtvercových fotek ---------- Stejné fotky jako na homepage Instagram feedu (.sh-origin-social__photo v homepage.css) */ .sh-page__gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sh-space-xs); } /* varianta 3 vedle sebe (stránka Výroční zprávy) – na desktopu i tabletu 3, na mobilu zpátky na výchozí 2 */ .sh-page__gallery-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767px) { .sh-page__gallery-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* varianta 4 vedle sebe v jedné řadě (stránka Kontakty) – vlastní modifikátor, ať se výchozí 2×2 mřížka (Spolek atd.) nemění */ .sh-page__gallery-grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 767px) { .sh-page__gallery-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sh-page__gallery-photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--sh-radius-md); } /* !important ze stejného důvodu jako .sh-page__media img výš */ .sh-page__gallery-photo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.25, 1, .5, 1); } .sh-page__gallery-photo:hover img { transform: scale(1.04); } /* ---------- kulaté ikony sociálních sítí + odkaz (stránka Kontakty) ---------- Ikony jako CSS mask (stejný princip jako .sh-page__icon výše), jen místo currentColor na 48px boxu tady sedí bílé (--sh-color-text-inverse) uvnitř menšího kulatého kotoučku v naší CTA barvě – logo platformy, ne její oficiální barva. */ /* sloupec ikona+text pod sebou, ne v řadě vedle sebe */ .sh-page__social-links { display: flex; flex-direction: column; gap: var(--sh-space-xs); margin-bottom: var(--sh-space-md); } .sh-page__social-link-row { display: flex; align-items: center; gap: var(--sh-space-xs); } .sh-page__social-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--sh-radius-btn); background: var(--sh-color-cta); transition: var(--sh-transition); } .sh-page__social-icon:hover { background: var(--sh-color-cta-hover); transform: var(--sh-btn-hover-transform); box-shadow: var(--sh-btn-hover-shadow); } .sh-page__social-icon::before { content: ""; display: block; width: 16px; height: 16px; background-color: var(--sh-color-text-inverse); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* reálná ikona "brand-instagram" z Tabler (MIT) */ .sh-page__social-icon--instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%208a4%204%200%200%201%204%20-4h8a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-8a4%204%200%200%201%20-4%20-4l0%20-8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.5%207.5v.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%208a4%204%200%200%201%204%20-4h8a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-8a4%204%200%200%201%20-4%20-4l0%20-8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.5%207.5v.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* reálná ikona "brand-facebook" z Tabler (MIT) */ .sh-page__social-icon--facebook::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2010v4h3v7h4v-7h3l1%20-4h-4v-2a1%201%200%200%201%201%20-1h3v-4h-3a5%205%200%200%200%20-5%205v2h-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2010v4h3v7h4v-7h3l1%20-4h-4v-2a1%201%200%200%201%201%20-1h3v-4h-3a5%205%200%200%200%20-5%205v2h-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } .sh-page__social-text { font-family: var(--sh-font-family-headings); font-size: var(--sh-text-lg); font-weight: var(--sh-font-weight-body); color: var(--sh-color-accent); text-decoration: none; transition: var(--sh-transition); } /* @účet těsně nad fotkami a zarovnaný s jejich levým okrajem; zavináč v Georgii má vlevo malý prázdný okraj, proto záporný margin */ .sh-page__social-handle { display: block; margin: 0 0 var(--sh-space-s) -.06em; line-height: 1.2; } .sh-page__social-text:hover { color: var(--sh-color-cta-hover); } /* ---------- řádek "3 karty s ikonou" (homepage .sh-delivery-feature) ---------- a řádek pod ním "podbarvený box (2/3) + obrázek (1/3)" – obě řady sdílí stejnou 3sloupcovou mřížku, ať jejich sloupce opticky lícují nad sebou. */ .sh-page__delivery-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sh-space-md); } /* rytmus mezi sekcemi stejný jako na homepage (padding-top: var(--sh-space-section) na začátku každé sekce); 1. řádek navíc padding-bottom, ať karty a box "Doprava zdarma" pod nimi nejsou nalepené na sebe */ .sh-page__delivery-row { padding-top: var(--sh-space-section); } /* obecný obal pro další sekce na stránce (mimo .sh-page__delivery-row dvojici výše), stejný odstup shora jako mezi sekcemi na homepage */ .sh-page__section { padding-top: var(--sh-space-section); } .sh-page__delivery-row:first-of-type { padding-bottom: var(--sh-space-md); } /* box zabírající šířku 2 sloupců (Doprava zdarma vedle obrázku) */ .sh-page__col-span-2 { grid-column: span 2; } /* Ikony karet "Kurýr na adresu" / "Výdejní boxy..." / "Naše výdejny..." – Shoptetův editor obsahu (TinyMCE) při uložení "Zdrojového kódu" potichu odstraňuje tagy (nejsou na jeho whitelistu povolených elementů), takže inline SVG v HTML nikdy nepřežije uložení. Ikony proto místo v HTML žijí tady jako CSS mask-image (base64/URL-encoded SVG) – background-color: currentColor pak funguje stejně jako stroke:currentColor u inline SVG na homepage, takže barva jde dál řídit přes .sh-delivery-feature__icon { color: ... } beze změny. Cílené podle pořadí karty v řádku (:nth-child), protože všechny tři prázdné
jsou po výmazu SVG editorem nerozlišitelné. */ .sh-page__delivery-row .sh-delivery-feature__icon { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* 1. karta – dům (Kurýr na adresu) – reálná ikona "house" z Lucide (MIT), viewBox 0 0 24 24, stroke-width:1 (stejný princip jako sáček/list výše) */ .sh-page__delivery-row .sh-delivery-feature:nth-child(1) .sh-delivery-feature__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* 2. karta – výdejní box/schránka (Výdejní boxy a odběrná místa), mřížka přihrádek s úchyty místo obecné krabice */ .sh-page__delivery-row .sh-delivery-feature:nth-child(2) .sh-delivery-feature__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2219%22%20x2%3D%2242%22%20y2%3D%2219%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2232%22%20x2%3D%2242%22%20y2%3D%2232%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%226%22%20x2%3D%2224%22%20y2%3D%2242%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2219%22%20x2%3D%2242%22%20y2%3D%2219%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2232%22%20x2%3D%2242%22%20y2%3D%2232%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%226%22%20x2%3D%2224%22%20y2%3D%2242%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); } /* 3. karta – komunita (Naše výdejny na Zlínsku) – přepracováno, původní tvar seděl výš (~y16–48 v 48px canvasu = 66% výšky posunuté dolů), zatímco dům/box (1./2. karta) sedí ~y6–41 (79% výšky, vycentrováno) – opticky pak vypadala menší a níž. Nová verze má stejný rozsah y6–42 jako sesterské ikony. */ .sh-page__delivery-row .sh-delivery-feature:nth-child(3) .sh-delivery-feature__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2042c0-10%205-17%2011-17s11%207%2011%2017%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24%2042c0-8%204-14%208-14s8%206%208%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2042c0-10%205-17%2011-17s11%207%2011%2017%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24%2042c0-8%204-14%208-14s8%206%208%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* box v tomhle řádku nemá nad sebou ikonu jako karty vedle něj – jeho nadpis (h2, dědí velký margin-top z [itemprop="about"] h2 výše) by jinak sedněl níž než nadpisy karet; zarovnáno na stejnou výšku */ .sh-page__delivery-row .sh-article__toc > h2:first-child { margin-top: 0; } /* totéž pro karty S ikonou (.sh-delivery-feature__title) - živě ověřeno v devtools, že skutečný tag je H3, ne H2 (moje předchozí verze cílila na h2, takže se vůbec netrefila - selektor prostě nic neodpovídalo). Soupeří s ".pageArticleDetail [itemprop='about'] h3 { margin: var(--sh-space-md) 0 var(--sh-space-xs); }" (třída+ atribut+typ) - proto tu typový selektor "h3" musí být taky, jinak má nižší specificitu a tiše prohrává. */ .sh-page__delivery-row h3.sh-delivery-feature__title { margin-top: 0; } /* ---------- mřížka podbarvených boxů s adresami výdejen ---------- */ .sh-page__locations-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sh-space-md); margin-top: var(--sh-space-md); } .sh-page__locations-grid .sh-article__toc { margin: 0; } .sh-page__location-name { display: block; margin: 0 0 var(--sh-space-xs); font-family: var(--sh-font-family-headings); font-size: var(--sh-text-lg); font-weight: var(--sh-font-weight-medium); color: var(--sh-color-text); } .sh-page__location-address { margin: 0 0 var(--sh-space-xs); color: var(--sh-color-text-muted); } .sh-page__location-price { margin: 0; font-weight: var(--sh-font-weight-medium); } @media (max-width: 991px) { .sh-page__delivery-row, .sh-page__locations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .sh-page__delivery-row, .sh-page__locations-grid { grid-template-columns: 1fr; } } /* ---------- číslované kroky ("Jak to funguje" apod.) ---------- Bez boxu/karty — plyne v textu jako běžný odstavec/nadpis. */ .sh-page__steps-title { display: block; margin: var(--sh-space-md) 0 var(--sh-space-sm); font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); font-weight: var(--sh-font-weight-heading); color: var(--sh-color-text); } /* "Vše o nákupu" na Kontaktech – hned za kontaktní fotkou/telefonem, větší nadpis a větší odstup shora než ostatní použití .sh-page__steps-title */ .sh-page__contact + .sh-page__steps-title { margin-top: var(--sh-space-lg); font-size: var(--sh-heading-sm); } /* ---------- seznam odkazů se šipkou ("Vše o nákupu" apod.) ---------- Stejný vizuální recept jako .sh-delivery-feature__link/.read-article (viz homepage.css, blog.css) – text + šipka, podtržení jen na hover. Vlastní třída tady v pages.css, ať zůstanou soubory podle stránek oddělené. */ .sh-page__link-list { display: flex; flex-direction: column; gap: var(--sh-space-xs); margin-top: var(--sh-space-sm); } .sh-page__link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); font-weight: var(--sh-font-weight-body); color: var(--sh-color-accent); text-decoration: none; transition: var(--sh-transition); } /* šipku kreslí Georgie jako u odkazů v kartách (znak →), ikonový font Shoptetu je robustnější a vypadal jinak */ .sh-page__link i { display: none; } .sh-page__link::after { content: "→"; display: inline-block; margin-left: .4em; transition: var(--sh-transition); } .sh-page__link:hover::after { transform: translateX(4px); } .sh-page__link:hover { color: var(--sh-color-cta-hover); text-decoration: none; } /* číslování přes CSS counter + kolečko, stejný vizuální jazyk jako kroky v košíku (cart.css: ol.cart-header > li > a::before) – na rozdíl od nativního
    markeru (viz historie výše) nezávisí na list-style ani na tom, jestli
  1. zůstane display:list-item. */ .sh-page__steps-list { counter-reset: sh-page-step; display: flex; flex-direction: column; gap: var(--sh-space-xs); list-style: none; margin: 0 0 var(--sh-space-md); padding: 0; } .sh-page__steps-list li { counter-increment: sh-page-step; display: flex; align-items: flex-start; gap: var(--sh-space-sm); font-family: var(--sh-font-family-body); font-size: var(--sh-text-sm); line-height: var(--sh-line-height-body); color: var(--sh-color-text); } .sh-page__steps-list li::before { content: counter(sh-page-step); display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--sh-radius-btn); background: var(--sh-color-cta-subtle); color: var(--sh-color-text); font-family: var(--sh-font-family-headings); font-size: var(--sh-text-sm); font-weight: var(--sh-font-weight-medium); line-height: 1; } /* odkaz "Doprava a výdejní místa" uvnitř podbarveného boxu – hned pod odstavcem, ne s obvyklým odstupem .sh-delivery-feature__link (ten je určený pro sloupec pod textem na homepage; tady je bez něj blíž k textu). Zásah jen v tomhle kontextu, ne do sdílené třídy samotné, ať homepage dál používá svůj vlastní odstup. font-weight navíc: blog.css ".sh-article__toc a" (třída+tag) má vyšší specificitu než samotné ".sh-delivery-feature__link" (jen třída), takže jeho font-weight-medium tiše přebíjelo zamýšlené font-weight-bold odkazu – opraveno tady ve stejném scope. */ .sh-article__toc .sh-delivery-feature__link { margin-top: 0; font-weight: var(--sh-font-weight-bold); } /* ---------- kontaktní blok ---------- Bez boxu/pozadí – kulatá fotka vlevo, e-mail/telefon vpravo pod sebou. */ .sh-page__contact { display: flex; align-items: center; gap: var(--sh-space-sm); } /* !important ze stejného důvodu jako .sh-page__media img výš (jinak ".pageArticleDetail [itemprop='about'] img" tiše přebíjelo malou kulatou fotku na plnou šířku sloupce) */ .sh-page__contact-photo { flex: 0 0 auto; width: 96px !important; height: 96px !important; border-radius: var(--sh-radius-btn) !important; object-fit: cover; margin: 0 !important; } /* .pageArticleDetail [itemprop="about"] p výše (třída+atribut+tag) má vyšší specificitu než tohle samotné pravidlo (třída+tag), takže jeho var(--sh-space-sm) tiše vyhrávalo nad zamýšleným menším odstupem tady – proto stejný scope navíc, ať naše pravidlo skutečně vyhraje */ .pageArticleDetail [itemprop="about"] .sh-page__contact-info p { margin: 0 0 var(--sh-space-xs); } /* stejný specificity problém jako u kontaktu výše – .pageArticleDetail [itemprop="about"] p (třída+atribut+tag) přebíjí .sh-article__faq-item p (třída+tag), takže margin-top odpovědi na Spolku/Kontaktech/Dopravě tiše mizel, i když na blogu (mimo [itemprop="about"]) je vidět */ .pageArticleDetail [itemprop="about"] .sh-article__faq-item p { margin-top: var(--sh-space-sm); } /* otázka větší než odpověď (blog.css má --sh-text-lg, což je menší než běžný text odpovědi) — stejná velikost jako úvodní věta stránky */ .pageArticleDetail [itemprop="about"] .sh-article__faq-item summary { font-size: var(--sh-text-xl); } /* stejný specificity problém znovu – karty "Kurýr na adresu" / "Výdejní boxy..." / "Naše výdejny..." na Dopravě (.sh-page__delivery-row, sdílí .sh-delivery-feature__text z homepage.css) měly pod textem navíc margin-bottom: var(--sh-space-sm) z obecného [itemprop="about"] p, takže se sčítal s margin-top odkazu pod ním – na homepage (mimo [itemprop="about"]) se to neprojevuje, proto tam byla mezera menší. */ .pageArticleDetail [itemprop="about"] .sh-delivery-feature__text { margin: 0; } /* na Spolku/Kontaktech/Dopravě (mimo blog) je FAQ v 1 sloupci omezené na stejnou šířku jako H1+intro pod nadpisem stránky (max-width:70 % v pravidle níže), ne na celou šířku článku */ .pageArticleDetail [itemprop="about"] .sh-article__faq { max-width: 70%; } /* FAQ jako sloupec v .sh-page__row (Kontakty) – přes celou šířku sloupce, ne dalších 70 % z už tak poloviční šířky */ .pageArticleDetail [itemprop="about"] .sh-page__row .sh-article__faq { max-width: 100%; } @media (max-width: 991px) { .pageArticleDetail [itemprop="about"] .sh-article__faq { max-width: none; } } .sh-page__contact-info p:last-child { margin-bottom: 0; } .sh-page__contact-info a { font-family: var(--sh-font-family-headings); font-size: var(--sh-text-lg); font-weight: var(--sh-font-weight-medium); color: var(--sh-color-accent); text-decoration: none; transition: var(--sh-transition); } .sh-page__contact-info a:hover { color: var(--sh-color-accent-hover); } /* telefon a e-mail bez podtržení — main-14 podtrhává odkazy v obsahu stránky (text-decoration i border-bottom), proto stejný scope [itemprop="about"] a !important */ .pageArticleDetail [itemprop="about"] .sh-page__contact-info a, .pageArticleDetail [itemprop="about"] .sh-page__contact-info a:hover { text-decoration: none !important; border-bottom: 0 !important; background-image: none !important; box-shadow: none !important; } /* na desktopu je H1/intro schválně užší (70 % šířky article) kvůli vizuální rovnováze se sloupci níže – na tabletu/mobilu už žádné sloupce vedle sebe nejsou (viz níže), 70 % by jen zbytečně lámalo řádky na úzké obrazovce */ @media (max-width: 991px) { .pageArticleDetail:has(.sh-page__intro) > header > h1, .pageArticleDetail:has([itemprop="about"] > p:first-child) > header > h1, .sh-page__intro, .pageArticleDetail [itemprop="about"] > p:first-child { max-width: 100%; } /* 2 sloupce vedle sebe (text/text, text/obrázek...) jsou na tabletu už dost úzké na to, aby se v nich pohodlně četlo – zalomeno na jeden sloupec o breakpoint dřív než běžný mobilní 767px. Menší gap/margin-top než na desktopu (--sh-space-xl), ať stránka na menší obrazovce zbytečně nenatahuje. */ /* sloupce pod sebou jsou dvě samostatné sekce (např. FAQ a Instagram) → mezera jako mezi sekcemi, ne jako mezi odstavci */ .sh-page__row { grid-template-columns: 1fr; gap: var(--sh-space-section); margin-top: var(--sh-space-lg); } .sh-page__row > .sh-article__toc { margin-top: var(--sh-space-md); } } @media (max-width: 767px) { /* na mobilu obrázek/box padá pod text (ne stretch na výšku) – vlastní rozumná výška, ne 100 % rodiče */ .sh-page__media { min-height: 280px; } .sh-page__media-pair { grid-template-columns: 1fr; } /* ještě o něco menší odstup MEZI ŘÁDKY (margin-top) než na tabletu, ale VĚTŠÍ odstup MEZI SLOUPCI v rámci jednoho řádku (gap) - na mobilu se sloupce zalomí pod sebe a potřebují víc vzduchu, ať druhý sloupec (obrázek/box) nepůsobí jako součást prvního (např. hned za tlačítkem "Zpátky na úvod") */ .sh-page__row { gap: var(--sh-space-section-mobile); margin-top: var(--sh-space-md); } /* kulatá fotka + kontakt vedle sebe se na úzkém mobilu snadno zmáčknou – ať se v případě potřeby zalomí, ne přetečou */ .sh-page__contact { flex-wrap: wrap; } } /* ========================================================== 404 – dva sloupce, text/tlačítka vlevo, foto vpravo Nadpis (h1) se zadává v administraci, zbytek (text, tlačítka, foto) je vlastní HTML blok vložený hned za něj. Shoptetem generovaný podnadpis a odstavce ("Stránka nebyla nalezena...") se schovávají – nahrazuje je vlastní text s třídou .sh-404__text. ========================================================== */ .empty-content-404 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--sh-space-lg); } .empty-content-404 > h1 { grid-column: 1; font-size: var(--sh-heading-md); margin-top: 0; margin-bottom: var(--sh-space-sm); } /* Shoptetem generovaný podnadpis/odstavce a jejich ikona pryč, nahrazuje je vlastní obsah níže */ .empty-content-404 > h2, .empty-content-404 > p:not(.sh-404__text) { display: none; } .empty-content-404 > .sh-404__text { grid-column: 1; font-family: var(--sh-font-family-body); font-size: var(--sh-text-xl); font-weight: var(--sh-font-weight-body); line-height: var(--sh-line-height-body); color: var(--sh-color-text); margin: 0 0 var(--sh-space-md); } .empty-content-404 > .sh-404__actions { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--sh-space-sm); } .empty-content-404 > .sh-404__media { grid-column: 2; grid-row: 1 / -1; align-self: stretch; min-height: 400px; border-radius: var(--sh-radius-md); overflow: hidden; } .empty-content-404 > .sh-404__media img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { .empty-content-404 { grid-template-columns: 1fr; } .empty-content-404 > .sh-404__media { grid-column: 1; grid-row: auto; order: 10; min-height: 280px; margin-top: var(--sh-space-sm); } } /* ========================================================== 404 – text a tlačítka na bílém, pod nimi žlutý pás vlastností Nadpis H1 je z administrace. Pás (.sh-hero__strip z homepage.css) sahá od okraje k okraji okna přes stín + clip-path (bez 100vw, které by přidalo vodorovný posuvník) a hned za ním následuje patička, proto se nuluje spodní odsazení stránky. ========================================================== */ .sh-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; /* stejná mezera jako mezi tlačítky karet (.sh-duo__actions) */ margin-bottom: var(--sh-space-section); } .sh-404 .sh-hero__strip { box-shadow: 0 0 0 100vmax var(--sh-color-highlight); clip-path: inset(0 -100vmax); } /* main-14 dává seznamům a jejich položkám v obsahu vlastní mezery — pás by byl vyšší a text by seděl nahoře */ .pageArticleDetail .sh-404 .sh-hero__strip-track, .pageArticleDetail .sh-404 .sh-hero__strip li { margin: 0; padding-top: 0; padding-bottom: 0; } .pageArticleDetail .sh-404 .sh-hero__strip-track { padding-block: calc(var(--sh-space-xs) * 2); } /* odkaz „Všechny cukry" je z hera (světlý na tmavém) — na bílém tmavý; !important kvůli !important v .sh-hero__link v homepage.css */ .sh-404 .sh-hero__link { color: var(--sh-color-text) !important; border-bottom-color: var(--sh-color-text); } .sh-404 .sh-hero__link:hover { border-bottom-color: var(--sh-color-cta); } /* pás je poslední prvek stránky — hned za ním patička, bez bílého pruhu (stejný princip jako na homepage) */ #content-wrapper:has(.sh-404), .content-inner:has(.sh-404), .pageArticleDetail:has(.sh-404), .pageArticleDetail [itemprop="about"]:has(.sh-404) { margin-bottom: 0; padding-bottom: 0; } /* ========================================================== KONTAKTY (kontakty.html) – dvě barevné karty + formulář Karty mají stejný tvar jako .sh-hp-guide__item na homepage (ikona nahoře, nadpis a text dole). Sdílené komponenty (.sh-page__row/faq/social) jsou výš. ========================================================== */ /* karty 50 % + formulář 50 % v jednom řádku; pod 992 px pod sebou */ .sh-page__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sh-space-xl); /* víc vzduchu mezi kartami a formulářem */ align-items: start; padding-top: var(--sh-space-md); } @media (max-width: 991px) { .sh-page__split { grid-template-columns: minmax(0, 1fr); } } /* h2 z main-14 má margin-top 40 px — jako první ve sloupci by formulář začínal níže než karty vedle */ .pageArticleDetail [itemprop="about"] .sh-page__split-form h2 { margin-top: 0; /* stejná velikost jako nadpisy karet vedle (Kontakty, Vše o nákupu) */ font-size: var(--sh-heading-card); line-height: var(--sh-line-height-heading-sm); } .sh-page__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--sh-space-xs) * 2); } .sh-page__card { display: flex; flex-direction: column; min-height: 0; padding: clamp(24px, 2.8vw, 36px); border-radius: var(--sh-radius-card); background: var(--sh-color-surface); color: var(--sh-color-text); } .sh-page__card--highlight { background: var(--sh-color-highlight); } .sh-page__card-icon { display: block; width: 32px; height: 32px; margin-bottom: var(--sh-space-md); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* phone (Lucide, ISC) */ .sh-page__card-icon--phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } /* shopping-bag (Lucide, ISC) */ .sh-page__card-icon--bag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); } /* stejný nadpis karty jako .sh-hp-guide__heading; h3 z main-14 má vlastní margin/barvu, proto stejný scope jako u odstavců níž */ .pageArticleDetail [itemprop="about"] .sh-page__card-title { margin: 0 0 calc(var(--sh-space-xs) * 2); font-family: var(--sh-font-family-headings); font-size: var(--sh-heading-card); font-weight: var(--sh-font-weight-heading); line-height: var(--sh-line-height-heading-sm); color: inherit; } /* tenký řez: telefon, e-mail i odkazy v kartách jen text běžné tloušťky (ne tučné jako .sh-page__link a .sh-page__contact-info a) */ .pageArticleDetail [itemprop="about"] .sh-page__card p { margin: 0; font-family: var(--sh-font-family-body); font-size: var(--sh-text-base); font-weight: var(--sh-font-weight-body); line-height: 1.6; color: inherit; } .pageArticleDetail [itemprop="about"] .sh-page__card a { font-weight: var(--sh-font-weight-body); color: inherit; text-decoration: none; } .pageArticleDetail [itemprop="about"] .sh-page__card a:hover { text-decoration: none; color: var(--sh-color-accent-hover); } @media (max-width: 575px) { .sh-page__cards { grid-template-columns: minmax(0, 1fr); } .sh-page__card { min-height: 0; } } /* tmavě zelený pás na celou šířku okna (stín + clip-path, ne 100vw, ať nevznikne vodorovný posuvník); uvnitř běžný obsah */ .sh-page__band { background: var(--sh-color-cta-dark); box-shadow: 0 0 0 100vmax var(--sh-color-cta-dark); clip-path: inset(0 -100vmax); padding-bottom: var(--sh-space-section); } .pageArticleDetail [itemprop="about"] .sh-page__band h2 { color: var(--sh-color-text-inverse); } /* ========================================================== ZELENÝ ÚVOD STRÁNEK (zkouška) — H1 + úvodní věta Tmavě zelený pás na celou šířku okna jako hero na homepage, bílý text. H1 (
    ) a úvod (první odstavec v [itemprop="about"]) jsou sourozenci, proto mají pás každý zvlášť a mezi nimi nesmí být mezera. Pás se roztahuje stínem + clip-path (ne 100vw, ať nevznikne vodorovný posuvník). Vrátit zpět = smazat tento blok. ========================================================== */ .pageArticleDetail > header { padding-top: var(--sh-space-md); padding-bottom: var(--sh-space-section); background: var(--sh-color-cta-dark); box-shadow: 0 0 0 100vmax var(--sh-color-cta-dark); clip-path: inset(0 -100vmax); } .pageArticleDetail > header > h1 { margin-bottom: 0; color: var(--sh-color-text-inverse) !important; } /* stránka s úvodem: pás pokračuje pod H1 až za úvodní větu */ .pageArticleDetail:has([itemprop="about"] > p:first-child) > header { padding-bottom: var(--sh-space-title-gap); /* odstup H1 od úvodní věty */ } .pageArticleDetail [itemprop="about"] > p:first-child, .pageArticleDetail [itemprop="about"] > .sh-page__intro:first-child { /* -1px překryv: mezi H1 a úvodem by jinak mohla probliknout sub-pixelová čárka (obě části mají vlastní pás) */ margin: -1px 0 var(--sh-space-section); padding-top: 1px; /* vyrovnává -1px překryv výš */ padding-bottom: var(--sh-space-section); background: var(--sh-color-cta-dark); box-shadow: 0 0 0 100vmax var(--sh-color-cta-dark); clip-path: inset(0 -100vmax); color: var(--sh-color-text-inverse); } /* drobečky nad zeleným úvodem — součást pásu, ne bílý proužek nad ním. Jen na stránkách (.pageArticleDetail), ostatní stránky eshopu (kategorie, produkt) mají drobečky bílé. Přebíjí `background ... !important` z category.css. */ .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) { background: var(--sh-color-cta-dark) !important; box-shadow: 0 0 0 100vmax var(--sh-color-cta-dark); clip-path: inset(0 -100vmax); color: var(--sh-color-text-inverse-muted); } .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) a, .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) span { color: var(--sh-color-text-inverse-muted); } .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) a:hover, .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) .navigation-home-icon-wrapper:hover { color: var(--sh-color-text-inverse); } /* aktuální stránka (poslední položka) výraznější než odkazy */ .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) > span:last-child, .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) > span:last-child span { color: var(--sh-color-text-inverse); } /* H1 nasedá těsně pod drobečky — mezera už je v jejich vlastním paddingu */ .breadcrumbs:has(+ .content-wrapper-in .pageArticleDetail) + .content-wrapper-in .pageArticleDetail > header { margin-top: -1px; padding-top: 0; } /* Kontakty: karty + formulář sedí na stejném zeleném pásu jako úvod nad nimi (jeden souvislý zelený blok od drobečků po formulář) */ .sh-page__band--flush { margin-top: -1px; } .pageArticleDetail [itemprop="about"] > p:first-child:has(+ .sh-page__band--flush) { margin-bottom: 0; } .sh-page__band--flush .sh-page__split { padding-top: 0; } /* úvodní věta stejně široká jako sloupec s kartami pod ní (polovina mřížky .sh-page__split bez poloviny mezery mezi sloupci) */ .pageArticleDetail [itemprop="about"] > p:first-child:has(+ .sh-page__band--flush) { max-width: calc((100% - var(--sh-space-xl)) / 2); } @media (max-width: 991px) { .pageArticleDetail [itemprop="about"] > p:first-child:has(+ .sh-page__band--flush) { max-width: none; } } /* formulář na tmavém pozadí: bílý text, pole jen s bílým rámečkem (smart label plave uvnitř pole, bílé pozadí by schovalo bílý popisek) */ .sh-page__band--flush .sh-page__split-form, .sh-page__band--flush .sh-page__split-form p, .sh-page__band--flush .sh-page__split-form label, .sh-page__band--flush .sh-page__split-form .required-asterisk { color: var(--sh-color-text-inverse); } .sh-page__band--flush .sh-page__split-form a { color: var(--sh-color-text-inverse); text-decoration: underline; } .sh-page__band--flush .sh-page__split-form .form-control { background: transparent; border-color: var(--sh-color-text-inverse-muted); color: var(--sh-color-text-inverse); } .sh-page__band--flush .sh-page__split-form .form-control:focus { border-color: var(--sh-color-text-inverse); } /* odeslat: limetkové tlačítko jako v hero (.sh-hero--split .sh-btn--primary), výchozí tmavě zelené by na zeleném pozadí splynulo. !important kvůli `.btn.btn-primary { background … !important }` v base.css. */ .sh-page__band--flush .sh-page__split-form .btn.btn-primary { background: var(--sh-color-cta-on-dark) !important; border-color: var(--sh-color-cta-on-dark) !important; color: var(--sh-color-on-cta-on-dark) !important; } .sh-page__band--flush .sh-page__split-form .btn.btn-primary:hover { background: var(--sh-color-cta-on-dark-hover) !important; border-color: var(--sh-color-cta-on-dark-hover) !important; color: var(--sh-color-on-cta-on-dark) !important; } /* ========================================================== SVĚTLÁ STRÁNKA — výjimka ze zeleného úvodu Stránka z administrace má zelený pás pod drobečky a H1 jako výchozí. Pokud je obsah stránky celý obalený do
    …
    , zůstane úvod na bílém (jako dřív). Obal zároveň zruší automatické zelené pozadí úvodní věty, protože už není přímým potomkem [itemprop="about"]. ========================================================== */ /* #content-wrapper navíc kvůli specificitě: zelený úvod má pravidlo se sourozeneckým selektorem drobečků, které by jinak vyhrálo */ #content-wrapper:has(.sh-page--light) .pageArticleDetail > header { padding-top: var(--sh-space-md); padding-bottom: 0; background: none; box-shadow: none; clip-path: none; } #content-wrapper:has(.sh-page--light) .pageArticleDetail > header > h1 { margin-bottom: var(--sh-space-title-gap); color: var(--sh-color-text) !important; } /* drobečky: :has() uvnitř :has() je v CSS neplatné, proto přes společného rodiče #content-wrapper (drobečky i obsah jsou jeho děti) */ #content-wrapper:has(.sh-page--light) > .breadcrumbs { background: var(--sh-color-bg) !important; box-shadow: none; clip-path: none; } #content-wrapper:has(.sh-page--light) > .breadcrumbs a, #content-wrapper:has(.sh-page--light) > .breadcrumbs span { color: var(--sh-color-text-muted); } #content-wrapper:has(.sh-page--light) > .breadcrumbs > span:last-child, #content-wrapper:has(.sh-page--light) > .breadcrumbs > span:last-child span { color: var(--sh-color-text); } /* bez úvodní věty obsah nasedá hned pod H1 — vzduch jako mezi sekcemi */ .sh-page--light > :first-child:not(.sh-page__intro) { margin-top: var(--sh-space-lg); } /* úvodní věta uvnitř obalu: bílé pozadí, tmavý text, žádný pás */ .sh-page--light > .sh-page__intro { background: none; box-shadow: none; clip-path: none; padding: 0; margin: 0 0 var(--sh-space-lead-gap); color: var(--sh-color-text); } /* ========================================================== DOPRAVA A PLATBA (doprava-a-platba.html) — čtyři barevné karty Stejné karty jako na Kontaktech (.sh-page__card) a ve stejných barvách jako průvodce na homepage (.sh-hp-guide__item): lucerna / jedle / muchomůrka / noc. ========================================================== */ .sh-page__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sh-page__cards--4 .sh-page__card:nth-child(1) { background: var(--sh-color-cta-on-dark); } .sh-page__cards--4 .sh-page__card:nth-child(2) { background: var(--sh-color-forest); } .sh-page__cards--4 .sh-page__card:nth-child(3) { background: var(--sh-color-mark); } /* tmavé karty (jedle, muchomůrka, noc): světlý text, ikona lucernou jako v průvodci na homepage */ .sh-page__cards--4 .sh-page__card:nth-child(n+2) { color: var(--sh-color-text-inverse); } .sh-page__cards--4 .sh-page__card:nth-child(4) { background: var(--sh-color-cta-dark); } .sh-page__cards--4 .sh-page__card:nth-child(n+2) .sh-page__card-icon { color: var(--sh-color-cta-on-dark); } @media (max-width: 991px) { .sh-page__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .sh-page__cards--4 { grid-template-columns: minmax(0, 1fr); } } /* house (Lucide, ISC) */ .sh-page__card-icon--home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } /* locker – schránky na balíky (vlastní kresba v stylu Lucide) */ .sh-page__card-icon--package { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M12 3v18M3 9h18M3 15h18'/%3E%3Cpath d='M9 6.3h.01M18 6.3h.01M9 12.3h.01M18 12.3h.01M9 18.3h.01M18 18.3h.01' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M12 3v18M3 9h18M3 15h18'/%3E%3Cpath d='M9 6.3h.01M18 6.3h.01M9 12.3h.01M18 12.3h.01M9 18.3h.01M18 18.3h.01' stroke-width='2'/%3E%3C/svg%3E"); } /* truck (Lucide, ISC) */ .sh-page__card-icon--truck { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } /* credit-card (Lucide, ISC) */ .sh-page__card-icon--card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"); } /* ========================================================== ZAROVNÁNÍ OBSAHU STRÁNEK S HLAVIČKOU main-14 dává
    i drobečkům vlastní 16px padding vlevo/vpravo, takže obsah stránky (H1, karty, formulář) začínal o 16 px dál než logo a menu v hlavičce a končil o 16 px dřív než ikony košíku. Na stránkách (.pageArticleDetail) proto padding nulujeme a obsah lícuje s hlavičkou. ========================================================== */ .content:has(.pageArticleDetail) { padding-left: 0; padding-right: 0; } #content-wrapper:has(.pageArticleDetail) > .breadcrumbs { padding-left: 0; padding-right: 0; } /* ========================================================== TABULKA V PRÁVNÍCH TEXTECH (ochrana-osobnich-udaju.html) Účely zpracování, právní základy a doby uchování. Na úzké obrazovce se tabulka posouvá do strany uvnitř obalu, ne celá stránka. ========================================================== */ .sh-page__table-wrap { overflow-x: auto; margin: 0 0 var(--sh-space-md); } .sh-page__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--sh-text-base); line-height: 1.5; } .sh-page__table th, .sh-page__table td { padding: var(--sh-space-s) var(--sh-space-sm) var(--sh-space-s) 0; border-bottom: 1px solid var(--sh-color-border); text-align: left; vertical-align: top; } .sh-page__table th { font-family: var(--sh-font-family-headings); font-weight: var(--sh-font-weight-heading); font-size: var(--sh-text-xl); color: var(--sh-color-text); border-bottom: 2px solid var(--sh-color-text); } /* ========================================================== MOJE OBJEDNÁVKA / ODSTOUPENÍ OD SMLOUVY (/moje-objednavka/) Formulář vykresluje Shoptet jako React widget uvnitř shadow DOM (
    ). Vnitřní prvky se z našeho CSS nedají zasáhnout selektory, ale widget čte CSS proměnné — a ty přes hranici shadow DOM dědí z hostitele, přebíjí tak jeho vlastní :host výchozí hodnoty. Měnit jde jen to, co widget přes proměnné nabízí: barvy, písmo těla, zaoblení. Nadpis (h1) a rozměry zůstávají shoptetí. ========================================================== */ #order-withdraw { --Text-Font: var(--sh-font-family-body); --Global-Foregrounds-Content-Primary: var(--sh-color-text); --Global-Foregrounds-Content-Link: var(--sh-color-accent); --Global-Backgrounds-Content-Primary: var(--sh-color-surface); --Global-Backgrounds-Button-Primary: var(--sh-color-cta); --Global-Foregrounds-Button-Primary: var(--sh-color-on-cta); --Corner-Radius: var(--sh-radius-btn); /* jen tlačítko */ --Corner-Radius_Bigger: var(--sh-radius-card); /* karty a boxy */ } /* undo-2 (Lucide, ISC) — vrácení zboží */ .sh-page__card-icon--return { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E"); } /* package-x (Lucide, ISC) — reklamace, vadné zboží */ .sh-page__card-icon--claim { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M3.29 7 12 12l8.71-5'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m17 13 5 5m-5 0 5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M3.29 7 12 12l8.71-5'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m17 13 5 5m-5 0 5-5'/%3E%3C/svg%3E"); } /* nadpis samostatného bloku na stránce (Odstoupení od smlouvy, Reklamační řád …) — větší než běžné h2 v textu, stejná velikost jako nadpisy sekcí na homepage (--sh-heading-xl); odstup nad ním odděluje bloky */ .pageArticleDetail [itemprop="about"] h2.sh-page__block-title { margin: var(--sh-space-section) 0 var(--sh-space-sm); font-size: var(--sh-heading-xl); line-height: var(--sh-line-height-heading); color: var(--sh-color-text); } /* odkazy uvnitř odstavců: podtržené + šipka u akčních odkazů, jinak nejsou na textu v jedné barvě poznat. (Karty a seznamy odkazů mají vlastní styl, proto jen přímé potomky odstavců mimo karty.) */ .pageArticleDetail [itemprop="about"] :not(.sh-page__card) > p > a:not([class]), .pageArticleDetail [itemprop="about"] p > a.sh-page__inline-link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .pageArticleDetail [itemprop="about"] p > a.sh-page__inline-link:hover, .pageArticleDetail [itemprop="about"] :not(.sh-page__card) > p > a:not([class]):hover { text-decoration-thickness: 2px; } /* akční odkaz v kartě (Odstoupit od smlouvy online, odkazy v kartě „Vše o nákupu"): stejné písmo jako text karty, jen podtržený, ať je poznat, že se dá kliknout */ .pageArticleDetail [itemprop="about"] .sh-page__card a.sh-page__card-link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .pageArticleDetail [itemprop="about"] .sh-page__card a.sh-page__card-link:hover { text-decoration-thickness: 2px; } /* ========================================================== PRO FIRMY (pro-firmy.html) — čtyři karty 2×2 vedle formuláře Karty jsou ty z Dopravy (.sh-page__cards--4: žlutá / mátová / limetková / tmavě zelená), jen ve dvou sloupcích, protože zabírají polovinu mřížky .sh-page__split. Ikony: Lucide (ISC). ========================================================== */ @media (min-width: 576px) { .sh-page__cards--4.sh-page__cards--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* store */ .sh-page__card-icon--store { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); } /* layers */ .sh-page__card-icon--layers { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); } /* globe */ .sh-page__card-icon--globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); } /* ========================================================== FIREMNÍ POLE V KONTAKTNÍM FORMULÁŘI (js/company-form.js) JS přidá nad pole Zpráva firmu, IČO, telefon, typ provozovny, zájem o produkty a odběr. Na bílé stránce (Pro firmy) mají tmavý text, uvnitř zeleného pásu (.sh-page__band--flush) bílý. ========================================================== */ .sh-company-form { margin-bottom: var(--sh-space-sm); } .sh-company-form__group { margin-bottom: var(--sh-space-s); } .sh-company-form__legend { display: block; margin-bottom: var(--sh-space-xs); } .sh-page__band--flush .sh-company-form__legend { color: var(--sh-color-text-inverse); } .sh-company-form__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sh-space-xs) var(--sh-space-sm); } .sh-company-form__check { display: flex; align-items: center; gap: var(--sh-space-xs); margin: 0; cursor: pointer; } .sh-page__band--flush .sh-company-form__check { color: var(--sh-color-text-inverse); } .sh-company-form__check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--sh-color-cta); } .sh-page__band--flush .sh-company-form__check input { accent-color: var(--sh-color-cta-on-dark); } /* rozbalovací seznam: text pole je bílý, ale nabídka je systémová, bílý text na bílém by zmizel */ .sh-page__band--flush .sh-company-form select.form-control option { color: var(--sh-color-text); background: var(--sh-color-bg); } @media (max-width: 575px) { .sh-company-form__products { grid-template-columns: minmax(0, 1fr); } } /* ========================================================== PRO FIRMY — levý sloupec: číslované body pod sebou Komponenta „Proč Multipack" z homepage (.sh-hp-why__*), tady v jednom sloupci vedle dlouhého formuláře. Nadpis h3 z main-14 má vyšší specificitu než .sh-hp-why .sh-hp-why__heading, proto vlastní pravidlo s [itemprop="about"]. ========================================================== */ .sh-page__why { display: flex; flex-direction: column; gap: var(--sh-space-md); } .pageArticleDetail [itemprop="about"] .sh-page__why .sh-hp-why__heading { margin: clamp(16px, 1.8vw, 24px) 0 var(--sh-space-xs); font-family: var(--sh-font-family-headings); font-size: var(--sh-heading-card); font-weight: var(--sh-font-weight-heading); line-height: var(--sh-line-height-heading-sm); color: var(--sh-color-text-inverse); } .pageArticleDetail [itemprop="about"] .sh-page__why .sh-hp-why__item p { margin: 0; font-size: var(--sh-text-base); line-height: 1.6; color: var(--sh-color-text-inverse-muted); } /* kratší formulář: jméno | e-mail, firma | IČO, telefon | typ provozovny vedle sebe; produkty, zpráva, souhlas a odeslat přes celou šířku. .sh-company-form (JS) se rozpustí do mřížky formuláře. */ body.in-pro-firmy .sh-page__split-form form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sh-space-sm); } body.in-pro-firmy .sh-page__split-form .sh-company-form { display: contents; } body.in-pro-firmy .sh-page__split-form fieldset > input[type="hidden"] { display: none; } body.in-pro-firmy .sh-page__split-form .sh-company-form__products-group, body.in-pro-firmy .sh-page__split-form fieldset > .form-group:has(textarea), body.in-pro-firmy .sh-page__split-form fieldset > .consents, body.in-pro-firmy .sh-page__split-form fieldset > .submit-wrapper { grid-column: 1 / -1; } @media (max-width: 575px) { body.in-pro-firmy .sh-page__split-form form fieldset { grid-template-columns: minmax(0, 1fr); } } /* zaškrtávací políčka v poptávce: šablona Shoptetu nativní checkbox schová a kreslí vlastní podle své struktury (input + label), kterou JS nemá — políčko se proto nezobrazilo. Kreslíme vlastní. */ .sh-company-form__check::before, .sh-company-form__check::after { display: none !important; } .sh-company-form__check input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: static !important; opacity: 1 !important; visibility: visible !important; display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 2px solid currentColor; border-radius: 0; background: transparent no-repeat center / 80%; cursor: pointer; } .sh-company-form__check input[type="checkbox"]:checked { border-color: var(--sh-color-cta); background-color: var(--sh-color-cta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } /* na zeleném pásu: světlý rámeček, limetkové zaškrtnutí s tmavou fajfkou */ .sh-page__band--flush .sh-company-form__check input[type="checkbox"]:checked { border-color: var(--sh-color-cta-on-dark); background-color: var(--sh-color-cta-on-dark); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1B33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } /* formulář ve sloupci vedle karet: main-14 ho omezuje proměnnými --forms-max-width a --form-fields-width-lg (v DevTools max-width: var(--forms-max-width); width: var(--form-fields-width-lg)), takže zůstával na ~440 px a nevyplnil sloupec. Přebíjíme specificitou přes obal. */ .sh-page__split-form form, .sh-page__split-form form fieldset { max-width: none; width: 100%; } .sh-page__split-form form .form-group, .sh-page__split-form form .form-control-wrapper, .sh-page__split-form form .form-control { max-width: none; width: 100%; } /* spacing mezi poli formuláře v poptávce — nad Zprávou nebylo žádné */ .sh-page__split-form form .form-group { margin-bottom: var(--sh-space-s); } .sh-page__split-form form fieldset > .form-group:has(textarea) { margin-top: var(--sh-space-sm); } /* nezaškrtnuté políčko: průhledné s rámečkem v barvě textu (šablona mu dávala bílé pozadí a černý okraj). !important kvůli specificitě pravidel input[type="checkbox"] z main-14. */ .sh-company-form__check input[type="checkbox"]:not(:checked) { background-color: transparent !important; border: 2px solid currentColor !important; box-shadow: none !important; } .sh-page__band--flush .sh-company-form__check input[type="checkbox"]:not(:checked) { border-color: var(--sh-color-text-inverse-muted) !important; } /* PRO FIRMY na bílé: číslované body vlevo v tmavých barvách (komponenta .sh-hp-why__* z homepage je navržená pro zelený podklad) */ .sh-page--light .sh-page__why .sh-hp-why__item { border-top-color: var(--sh-color-border); } .sh-page--light .sh-page__why .sh-hp-why__number { color: var(--sh-color-accent); } .pageArticleDetail [itemprop="about"] .sh-page--light .sh-page__why .sh-hp-why__heading { color: var(--sh-color-text); } .pageArticleDetail [itemprop="about"] .sh-page--light .sh-page__why .sh-hp-why__item p { color: var(--sh-color-text); } /* karta v limetkové (jako třetí karta průvodce na homepage) — mátová na bílé stránce skoro splývá s pozadím */ .sh-page__card--lime { background: var(--sh-color-cta-on-dark); } /* dlouhý e-mail (klara@skritkovezadrspachu.cz) se v úzké kartě nevejde na jeden řádek — zalomit, ne přetéct přes okraj karty */ .pageArticleDetail [itemprop="about"] .sh-page__card p, .pageArticleDetail [itemprop="about"] .sh-page__card a { overflow-wrap: anywhere; } /* karta v jedli (Kontakty — „Vše o nákupu“): světlý text, ikona lucernou jako tmavé karty průvodce na homepage */ .sh-page__card--forest { background: var(--sh-color-forest); color: var(--sh-color-text-inverse); } .sh-page__card--forest .sh-page__card-icon { color: var(--sh-color-cta-on-dark); } /* PRO FIRMY: barevné karty pod sebou v jednom sloupci vedle formuláře. Karty z Dopravy (.sh-page__cards--4: žlutá / mátová / limetková / tmavě zelená), tady v jedné řadě a jen tak vysoké, jak je potřeba. */ .sh-page__cards--4.sh-page__cards--stack { grid-template-columns: minmax(0, 1fr); } .sh-page__cards--stack .sh-page__card { min-height: 0; } .sh-page__cards--stack .sh-page__card-icon { margin-bottom: var(--sh-space-md); } .pageArticleDetail [itemprop="about"] .sh-page__cards--stack .sh-page__card-title { margin-top: 0; } /* zaškrtnuté políčko: výplň a fajfka musí přebít pravidla šablony (jinak zůstal jen slabý zelený okraj bez fajfky) */ .sh-company-form__check input[type="checkbox"]:checked { border: 2px solid var(--sh-color-cta) !important; background-color: var(--sh-color-cta) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 80% !important; box-shadow: none !important; } .sh-page__band--flush .sh-company-form__check input[type="checkbox"]:checked { border-color: var(--sh-color-cta-on-dark) !important; background-color: var(--sh-color-cta-on-dark) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1B33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important; } /* PRO FIRMY — nadpis formuláře větší (velikost nadpisů sekcí) a vlastní úvodní text; výchozí větu Shoptetu („Máte nějaké otázky? …") schováme, jde o odstavec těsně před
    a jinak se v administraci nedá změnit. */ body.in-pro-firmy .pageArticleDetail [itemprop="about"] .sh-page__split-form h2 { margin: 0 0 var(--sh-space-sm); font-size: var(--sh-heading-xl); line-height: var(--sh-line-height-heading); } body.in-pro-firmy .sh-page__split-form p:has(+ form) { display: none; } .pageArticleDetail [itemprop="about"] .sh-page__split-form p.sh-page__form-lead { margin: 0 0 var(--sh-space-md); font-size: var(--sh-text-base); line-height: 1.6; } /* MOBIL: FAQ pod formulářem na Kontaktech — obě sekce jsou bílé, takže plný odstup mezi sekcemi (--sh-space-section) vypadal jako zbytečná díra. Menší horní odsazení jen pro řádek hned za .sh-page__split. */ @media (max-width: 767px) { .sh-page__split + .sh-page__row { padding-top: var(--sh-space-md); } } /* řádek (nebo dvousloupec s formulářem) hned pod úvodní větou: vzduch dělá už spodní margin úvodu (--sh-space-lead-gap), padding-top řádku (--sh-space-section) a margin-top na tabletu/mobilu se přičítaly a mezera byla dvojnásobná. Specificita .intro + .row přebíjí media query výš i bez !important. */ .sh-page__intro + .sh-page__row, .sh-page__intro + .sh-page__split { padding-top: 0; margin-top: 0; } /* Kontakty: fotka s telefonem a e-mailem je hned pod úvodní větou, a když jim zbude jen mezera pod úvodem (20–35 px), působí slepeně — přidáme --sh-space-md (celkem asi 55–80 px). Na všech šířkách; jen řádek s kontaktem, ostatní stránky se nemění. */ .sh-page__intro + .sh-page__row:has(.sh-page__contact) { padding-top: var(--sh-space-md); }