/* ========================================================================== WIN-WIN BLOKY – jeden vzhled pro všechny stránky webu -------------------------------------------------------------------------- Platí na webu (obsah stránky .ww-obsah) i v editoru stránek (.editor-styles-wrapper), takže v editoru vidíte totéž co na webu. PRAVIDLA SYSTÉMU - Karty mají vždy stejnou šířku: mřížka má pevný počet sloupců (2 nebo 3). Jedna karta se nikdy neroztáhne přes celou šířku, zbude prázdné místo. - Karty, rámečky a sloupce v jedné řadě mají vždy stejnou výšku; tlačítka a odkazy „→“ na konci karty jsou dole v jedné linii. - Mezery mezi prvky řídí tento soubor, v editoru se nenastavují. - Barvy: tmavá #1A1C20, zlatá #BC926A, světle zlatá #D4B08C, zlatá pro text #8A6440, béžová #F6EFE7, krémová #FBF8F4, šedá #F8F9FA. OBSAH 1. Základ (písmo, nadpisy, odstavce, odkazy) 2. Rozvržení stránky (page.php) 3. Mřížky (dva sloupce, karty 2 / 3 v řadě) 4. Odstavce (perex, nadtitulek, rámeček, malý text, zkratka, upozornění) 5. Seznamy (fajfky, křížky, štítky, kroky) 6. Skupiny (karta, karta s obrázkem, béžový rámeček, řádek s ikonou, tmavý řádek, schéma, tmavý pruh, otázky) 7. Ikona 8. Tlačítka 9. Otázky a odpovědi (blok Podrobnosti) 10. Mobil 11. Jen v editoru ========================================================================== */ /* ---------- 1. ZÁKLAD ---------- */ .ww-obsah, .editor-styles-wrapper { color: #1A1C20; font-size: 16px; line-height: 1.65; } .editor-styles-wrapper { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .ww-obsah, .editor-styles-wrapper .is-root-container { container-type: inline-size; container-name: ww-obsah; } :is(.ww-obsah, .editor-styles-wrapper) :is(p, ul, ol) { margin: 0 0 16px; } :is(.ww-obsah, .editor-styles-wrapper) h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.25; font-weight: 700; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) h3 { margin: 26px 0 12px; font-size: 19px; line-height: 1.35; font-weight: 700; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) h4 { margin: 22px 0 10px; font-size: 17px; line-height: 1.4; font-weight: 700; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) :is(h2, h3, h4):first-child { margin-top: 0; } :is(.ww-obsah, .editor-styles-wrapper) strong { font-weight: 700; } :is(.ww-obsah, .editor-styles-wrapper) a { color: #8A6440; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } :is(.ww-obsah, .editor-styles-wrapper) a:hover { color: #6B4C2F; text-decoration-color: currentColor; } /* Samostatné odkazy v obsahu (Odkaz →, Celý článek →, karty Kontaktů): bez podtržení, podtrhnou se pod myší. */ :is(.ww-obsah, .editor-styles-wrapper) :is(p.is-style-ww-odkaz-sipka a, a.wp-block-read-more, .wp-block-winwin-kontakty a) { text-decoration: none; } :is(.ww-obsah, .editor-styles-wrapper) :is(p.is-style-ww-odkaz-sipka a, a.wp-block-read-more, .wp-block-winwin-kontakty a):hover { color: #6B4C2F; text-decoration: underline; text-decoration-color: currentColor; } :is(.ww-obsah, .editor-styles-wrapper) a:focus-visible { outline: 2px solid #8A6440; outline-offset: 3px; border-radius: 3px; } :is(.ww-obsah, .editor-styles-wrapper) :is(ul, ol):not([class*="is-style-"]) { padding-left: 22px; } :is(.ww-obsah, .editor-styles-wrapper) :is(ul, ol):not([class*="is-style-"]) > li { margin: 0 0 8px; } :is(.ww-obsah, .editor-styles-wrapper) [id] { scroll-margin-top: 140px; } :is(.ww-obsah, .editor-styles-wrapper) img { max-width: 100%; height: auto; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-image { margin: 0 0 16px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-image img { display: block; border-radius: 12px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-image figcaption { margin: 8px 0 0; font-size: 14px; color: #4A4D54; text-align: center; } :is(.ww-obsah, .editor-styles-wrapper) hr.wp-block-separator { margin: 36px 0; border: 0; border-top: 1px solid #EEE6DC; opacity: 1; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-table { margin: 0 0 16px; overflow-x: auto; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-table :is(th, td) { padding: 10px 12px; border: 1px solid #EEE6DC; text-align: left; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-table thead th { background: #F6EFE7; } /* Poslední prvek ve skupině nemá spodní mezeru (v editoru i před tlačítkem „+“). */ :is(.ww-obsah, .editor-styles-wrapper) .wp-block-group > :last-child, :is(.ww-obsah, .editor-styles-wrapper) .wp-block-group > :nth-last-child(2):has(+ .block-list-appender) { margin-bottom: 0; } /* Oddíly stránky: skupiny přímo v obsahu mají mezi sebou 52 px. */ :is(.ww-obsah, .editor-styles-wrapper .is-root-container) > .wp-block-group { margin-bottom: 52px; } :is(.ww-obsah, .editor-styles-wrapper .is-root-container) > .wp-block-group:has(+ :is(.is-style-ww-upozorneni, .wp-block-block)) { margin-bottom: 22px; } :is(.ww-obsah, .editor-styles-wrapper .is-root-container) > .wp-block-group:last-child, .ww-obsah > :last-child { margin-bottom: 0; } /* Skupiny se stylem Win-Win ignorují „zúžené“ rozvržení WordPressu (jinak by se obsah karet centroval). */ :is(.ww-obsah, .editor-styles-wrapper) [class*="is-style-ww-"].is-layout-constrained > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; } /* ---------- 2. ROZVRŽENÍ STRÁNKY (page.php) ---------- */ .ww-stranka.ww-single-post { margin: 0; padding: 60px; background: var(--pure-white, #fff); border-radius: var(--radius-prvku, 12px); box-shadow: var(--luxusni-stin, 0 20px 40px rgba(0, 0, 0, .04)); } .ww-stranka-hlavicka { margin: 0 0 40px; text-align: center; } .ww-stranka-nadpis { margin: 0; font-size: 42px; line-height: 1.2; font-weight: 700; color: #1A1C20; } /* Stejný nadpis na všech stránkách – i tam, kde web ještě načítá globální styly nadpisů ze starých šablon (např. Elementor kit: malý zlatý nadpis). Vyšší váha selektoru je záměrná. */ .ww-stranka-hlavicka h1.ww-stranka-nadpis { margin: 0; font-family: inherit; font-size: 42px; font-style: normal; line-height: 1.2; font-weight: 700; letter-spacing: normal; text-transform: none; color: #1A1C20; } /* Vlastní nadpis H1 v obsahu z bloků (šablona pak svůj nadpis nepřidá) – stejný vzhled jako nadpis stránky. :where() = nízká váha, vlastní styly pluginů (doklady, ověření podpisu) mají přednost. */ :is(.ww-obsah, .editor-styles-wrapper) :where(h1) { margin: 0 0 24px; font-size: 42px; line-height: 1.2; font-weight: 700; color: #1A1C20; } .ww-stranka > .ww-obsah:first-child > h1:first-child { margin-bottom: 40px; text-align: center; } .ww-stranka-obrazek { margin: 0 0 50px; overflow: hidden; border-radius: var(--radius-prvku, 12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .05); } .ww-stranka-obrazek img { display: block; width: 100%; height: auto; max-height: 500px; object-fit: cover; } @media (max-width: 1024px) { .ww-stranka.ww-single-post { padding: 30px 20px; } .ww-stranka-nadpis, .ww-stranka-hlavicka h1.ww-stranka-nadpis, .ww-obsah :where(h1) { font-size: 30px; } } /* ---------- 3. MŘÍŽKY ---------- Pevný počet sloupců, aby karta měla vždy stejnou velikost. */ :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) { display: grid; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dva-sloupce { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 44px; align-items: stretch; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dva-sloupce.ww-na-stred { align-items: center; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karty-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karty-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) > * { margin: 0 !important; max-width: none !important; min-width: 0; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) > .block-list-appender { position: static; grid-column: 1 / -1; } /* Stejná výška v řadě: položky mřížky se roztáhnou na výšku nejvyšší (align-items: stretch výše). Karta nebo rámeček zabalený v obyčejné skupině vyplní celou výšku i tak. */ :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) > .wp-block-group:not([class*="is-style-"]):has(> :is(.is-style-ww-karta, .is-style-ww-karta-obrazek, .is-style-ww-box, .is-style-ww-schema):only-child) { display: flex; flex-direction: column; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) > .wp-block-group:not([class*="is-style-"]) > :is(.is-style-ww-karta, .is-style-ww-karta-obrazek, .is-style-ww-box, .is-style-ww-schema):only-child { flex: 1 1 auto; } /* Výpis článků (Smyčka dotazu, styl Karty po 2 / po 3): karta vyplní celou položku seznamu. */ :is(.ww-obsah, .editor-styles-wrapper) ul.wp-block-post-template:is(.is-style-ww-karty-2, .is-style-ww-karty-3) > li { display: flex; flex-direction: column; } :is(.ww-obsah, .editor-styles-wrapper) ul.wp-block-post-template:is(.is-style-ww-karty-2, .is-style-ww-karty-3) > li > :only-child { flex: 1 1 auto; } @container ww-obsah (max-width: 880px) { :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karty-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container ww-obsah (max-width: 660px) { :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-dva-sloupce, .is-style-ww-karty-2, .is-style-ww-karty-3) { grid-template-columns: minmax(0, 1fr); } } /* ---------- 4. ODSTAVCE ---------- */ :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-perex { margin: 0 0 22px; font-size: 18px; line-height: 1.7; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-nadtitulek { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-ramecek { margin: 0 0 16px; padding: 14px 16px; background: #F8F9FA; border-radius: 10px; font-size: 15px; line-height: 1.6; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-maly { font-size: 14px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-zkratka { width: fit-content; margin: 0 0 5px; padding: 2px 8px; background: #F6EFE7; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-upozorneni { margin: 0; font-size: 13.5px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) :is(p.is-style-ww-upozorneni, .wp-block-block) + p.is-style-ww-upozorneni { margin-top: 8px; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-odkaz-sipka a { font-weight: 600; text-decoration: none; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-odkaz-sipka a::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform .3s ease; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-odkaz-sipka a:hover::after { transform: translateX(4px); } /* ---------- 5. SEZNAMY ---------- */ :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-fajfky, .is-style-ww-krizky, .is-style-ww-stitky, .is-style-ww-kroky) { padding: 0; list-style: none; } /* Fajfky */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-fajfky > li { position: relative; margin: 0 0 12px; padding-left: 30px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-fajfky > li::before { content: ""; position: absolute; left: 6px; top: .3em; width: 7px; height: 12px; border: solid #BC926A; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } /* Křížky */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-krizky > li { position: relative; margin: 0 0 12px; padding-left: 30px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-krizky > li::before { content: "\00D7"; position: absolute; left: 3px; top: -.05em; font-size: 22px; font-weight: 700; line-height: 1.2; color: #8A6440; } /* Štítky (krátké výhody v řadě) */ :is(.ww-obsah, .editor-styles-wrapper) ul.is-style-ww-stitky, :is(.ww-obsah, .editor-styles-wrapper) ol.is-style-ww-stitky { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-stitky > li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 10px; background: #fff; border: 1px solid rgba(188, 146, 106, .4); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-stitky > li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%238A6440'/%3E%3Cpath d='m8 12.3 2.8 2.8 5.2-5.3' stroke='%23BC926A'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } /* Číslované kroky */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-kroky { margin: 0 0 18px; counter-reset: wwkrok; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-kroky > li { position: relative; margin: 0; padding: 0 0 14px 40px; counter-increment: wwkrok; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-kroky > li::before { content: counter(wwkrok); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; background: #1A1C20; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; color: #D4B08C; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-kroky > li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 30px; bottom: 3px; border-left: 2px dotted rgba(188, 146, 106, .55); } /* ---------- 6. SKUPINY ---------- */ /* Karta */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta { display: flex; flex-direction: column; padding: 26px 24px 24px; background: #fff; border: 1px solid #EEE6DC; border-top: 4px solid #BC926A; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .04); } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > * { margin-left: 0; margin-right: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > .is-style-ww-ramecek:last-child, :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > .is-style-ww-ramecek:nth-last-child(2):has(+ .block-list-appender) { margin-top: auto; } /* Tlačítka a odkaz „→“ na konci karty jsou vždy dole – v řadě stejně vysokých karet v jedné linii. */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > :is(.wp-block-buttons, p.is-style-ww-odkaz-sipka, .wp-block-read-more):last-child, :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > :is(.wp-block-buttons, p.is-style-ww-odkaz-sipka, .wp-block-read-more):nth-last-child(2):has(+ .block-list-appender) { margin-top: auto; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > p:not([class*="is-style-"]) { font-size: 15px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > :is(h2, h3) { margin: 16px 0 8px; font-size: 18px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta > :is(h2, h3):first-child { margin-top: 0; } /* Karta s obrázkem (obrázek nahoře, text pod ním, celá karta je klikací přes odkaz se šipkou) */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #EEE6DC; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .04); transition: transform .3s ease, box-shadow .3s ease; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #F6EFE7; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s ease; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group { display: flex; flex: 1; flex-direction: column; padding: 22px 24px; border-top: 4px solid #BC926A; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group > :is(h2, h3) { margin: 0 0 10px; font-size: 19px; line-height: 1.3; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group > p:not([class*="is-style-"]) { font-size: 15px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group > :is(.is-style-ww-odkaz-sipka, .wp-block-buttons):last-child, :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group > :is(.is-style-ww-odkaz-sipka, .wp-block-buttons):nth-last-child(2):has(+ .block-list-appender) { margin-top: auto; } .ww-obsah .is-style-ww-karta-obrazek .is-style-ww-odkaz-sipka a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .ww-obsah .is-style-ww-karta-obrazek:hover, .ww-obsah .is-style-ww-karta-obrazek:focus-within { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0, 0, 0, .08); } .ww-obsah .is-style-ww-karta-obrazek:hover > .wp-block-image img { transform: scale(1.04); } .ww-obsah .is-style-ww-karta-obrazek:focus-within { outline: 3px solid #8A6440; outline-offset: 3px; } .ww-obsah .is-style-ww-karta-obrazek a:focus-visible { outline: none; } /* Užší oddíl (delší text, otázky) – obsah nejvýš 820 px */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-uzky > * { max-width: 820px; } /* Béžový rámeček */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-box { padding: 26px 28px; background: #F6EFE7; border: 1px solid rgba(188, 146, 106, .3); border-radius: 12px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-box > p.is-style-ww-maly { margin-top: 14px; } /* Řádek s ikonou (ikona vlevo, text vpravo) */ :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-radek, .is-style-ww-radek-tmavy) { display: flex; align-items: center; gap: 14px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek { margin: 0 0 20px; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-radek, .is-style-ww-radek-tmavy) > * { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-radek, .is-style-ww-radek-tmavy) > .wp-block-group { flex: 1; min-width: 0; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-radek, .is-style-ww-radek-tmavy) > .wp-block-group > * { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek > .wp-block-group > :is(h2, h3, h4) { font-size: 19px; line-height: 1.3; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek > .wp-block-group > p:first-child:not([class*="is-style-"]) { font-size: 16px; font-weight: 700; line-height: 1.3; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek > .wp-block-group > p + p:not([class*="is-style-"]) { font-size: 14px; line-height: 1.4; color: #4A4D54; } /* Tmavý řádek (zvýrazněný řádek s ikonou, např. ve schématu) */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek-tmavy { padding: 14px 16px; background: #1A1C20; border-radius: 12px; color: #E8E1D8; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek-tmavy > .wp-block-group > p:first-child { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-radek-tmavy > .wp-block-group > p + p { font-size: 14px; line-height: 1.4; color: #E8E1D8; } /* Schéma (krémový panel; uvnitř tmavý řádek, popisek šipky a větve) */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema { padding: 26px; background: #FBF8F4; border: 1px solid rgba(188, 146, 106, .25); border-radius: 12px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema > p.is-style-ww-nadtitulek { margin-bottom: 16px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema > .is-style-ww-radek-tmavy { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema > p.ww-mezi { margin: 0 0 0 41px; padding: 10px 0 10px 24px; border-left: 2px solid #D4B08C; font-size: 13px; font-style: italic; line-height: 1.4; color: #5C5F66; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema > .ww-vetve { margin: 0 0 0 41px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-vetve > .wp-block-group { position: relative; gap: 12px; margin: 0; padding: 8px 0 8px 24px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-vetve > .wp-block-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid #D4B08C; } :is(.ww-obsah, .editor-styles-wrapper) .ww-vetve > .wp-block-group:last-child::before, :is(.ww-obsah, .editor-styles-wrapper) .ww-vetve > .wp-block-group:nth-last-child(2):has(+ .block-list-appender)::before { bottom: 50%; } :is(.ww-obsah, .editor-styles-wrapper) .ww-vetve > .wp-block-group::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 2px solid #D4B08C; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema > p.ww-pozn { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #EEE6DC; font-size: 14px; line-height: 1.55; color: #4A4D54; } /* Tmavý pruh (výzva s tlačítky na konci stránky) */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 30px; padding: 32px 34px; background: #1A1C20; border-radius: 16px; color: #D9D2C8; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy > * { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy > .wp-block-group { flex: 1 1 300px; min-width: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy :is(h2, h3) { margin: 0 0 6px; font-size: 24px; line-height: 1.25; color: #fff; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #D9D2C8; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy a:not(.wp-block-button__link) { color: #D4B08C; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy a:not(.wp-block-button__link):hover { color: #fff; } /* ---------- 7. IKONA (blok Win-Win Ikona) ---------- */ :is(.ww-obsah, .editor-styles-wrapper) .wp-block-winwin-ikona { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: 0 0 16px; background: #F6EFE7; border-radius: 11px; color: #1A1C20; box-shadow: inset 0 0 0 3px #F6EFE7, inset 0 0 0 4px rgba(188, 146, 106, .45); } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-winwin-ikona.ww-blok-ikona--stredni { width: 52px; height: 52px; border-radius: 13px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-winwin-ikona.ww-blok-ikona--velka { width: 56px; height: 56px; border-radius: 14px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-winwin-ikona.ww-blok-ikona--tmava { background: #1A1C20; color: #BC926A; box-shadow: inset 0 0 0 3px #1A1C20, inset 0 0 0 4px rgba(188, 146, 106, .6); } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-winwin-ikona svg { display: block; width: 50%; height: 50%; } :is(.ww-obsah, .editor-styles-wrapper) :is(.is-style-ww-radek, .is-style-ww-radek-tmavy) > .wp-block-winwin-ikona { margin: 0; } /* ---------- 8. TLAČÍTKA ---------- */ :is(.ww-obsah, .editor-styles-wrapper) .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 16px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-buttons > .wp-block-button { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 13px 26px; border: 2px solid #BC926A; border-radius: 12px; background: #BC926A; color: #1A1C20; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-button__link:hover { background: #D4B08C; border-color: #D4B08C; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-button__link:focus-visible { outline: 3px solid #8A6440; outline-offset: 3px; } /* Obrys */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-obrys .wp-block-button__link { background: transparent; color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-obrys .wp-block-button__link:hover { background: #BC926A; border-color: #BC926A; color: #1A1C20; } /* Světlý obrys (na tmavém pozadí) */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-svetle .wp-block-button__link { background: transparent; border-color: rgba(243, 238, 231, .55); color: #F3EEE7; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-svetle .wp-block-button__link:hover { background: transparent; border-color: #BC926A; color: #D4B08C; } /* Odkaz se šipkou */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-odkaz .wp-block-button__link { padding: 0; border: 0; background: none; color: #8A6440; white-space: nowrap; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-odkaz .wp-block-button__link::after { content: "\2192"; margin-left: 6px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-odkaz .wp-block-button__link:hover { background: none; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy .is-style-ww-odkaz .wp-block-button__link { color: #D4B08C; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy .is-style-ww-odkaz .wp-block-button__link:hover { color: #fff; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy .wp-block-button__link:focus-visible { outline-color: #D4B08C; } /* ---------- 9. OTÁZKY A ODPOVĚDI (blok Podrobnosti) ---------- */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-otazky { padding: 4px 24px; background: #F8F9FA; border-radius: 12px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details { margin: 0 0 16px; border-bottom: 1px solid #DCDCDC; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-otazky > .wp-block-details { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-otazky > .wp-block-details:last-child, :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-otazky > .wp-block-details:nth-last-child(2):has(+ .block-list-appender) { border-bottom: 0; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > summary { position: relative; display: block; padding: 18px 36px 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.4; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > summary::-webkit-details-marker { display: none; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid #BC926A; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .3s ease; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details[open] > summary { color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > summary:focus-visible { outline: 2px solid #8A6440; outline-offset: 4px; border-radius: 4px; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > :not(summary) { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > :last-child:not(summary), :is(.ww-obsah, .editor-styles-wrapper) .wp-block-details > :nth-last-child(2):not(summary):has(+ .block-list-appender) { margin-bottom: 0; padding-bottom: 20px; } /* ---------- 9b. DOKUMENTY, VÝPIS ČLÁNKŮ, OBSAH PRO PŘIHLÁŠENÉ, FORMULÁŘ ---------- */ /* Seznam dokumentů (styl seznamu „Dokumenty“): každá položka je odkaz na soubor */ :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty { padding: 0; list-style: none; border-top: 1px solid #EEE6DC; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty > li { position: relative; margin: 0; padding: 14px 64px 14px 52px; border-bottom: 1px solid #EEE6DC; font-weight: 600; line-height: 1.45; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty > li::before { content: ""; position: absolute; left: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 10px; background: #F6EFE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5A1.5 1.5 0 0 0 6 5v14a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 18 19V7.5z' stroke='%231A1C20'/%3E%3Cpath d='M14 3.5v4h4' stroke='%231A1C20'/%3E%3Cpath d='M9 12.5h6M9 16h4' stroke='%23BC926A'/%3E%3C/svg%3E") center / 20px 20px no-repeat; box-shadow: inset 0 0 0 3px #F6EFE7, inset 0 0 0 4px rgba(188, 146, 106, .45); } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty > li::after { content: "PDF"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 2px 8px; background: #F6EFE7; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty a { color: #1A1C20; text-decoration: none; } .ww-obsah .is-style-ww-dokumenty a::before { content: ""; position: absolute; inset: 0; } .ww-obsah .is-style-ww-dokumenty > li:hover { background: #FBF8F4; } .ww-obsah .is-style-ww-dokumenty > li:hover a { color: #8A6440; } .ww-obsah .is-style-ww-dokumenty a:focus-visible { outline: none; } .ww-obsah .is-style-ww-dokumenty > li:focus-within { outline: 2px solid #8A6440; outline-offset: -2px; border-radius: 6px; } /* Výpis článků (blok Smyčka dotazu → Šablona příspěvku se stylem „Karty po 3“) */ :is(.ww-obsah, .editor-styles-wrapper) ul.wp-block-post-template { margin: 0 0 16px; padding: 0; list-style: none; } :is(.ww-obsah, .editor-styles-wrapper) ul.wp-block-post-template > li { margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) ul.wp-block-post-template > li > :is(.is-style-ww-karta, .is-style-ww-karta-obrazek) { height: 100%; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-post-title { margin: 0 0 6px; font-size: 19px; line-height: 1.3; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-post-title a { color: #1A1C20; text-decoration: none; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-post-date { margin: 0 0 16px; font-size: 14px; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-read-more { margin-top: auto; font-weight: 600; color: #8A6440; text-decoration: none; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-read-more::after { content: " \2192"; } .ww-obsah ul.wp-block-post-template > li > .is-style-ww-karta { position: relative; transition: transform .3s ease, box-shadow .3s ease; } .ww-obsah ul.wp-block-post-template > li > .is-style-ww-karta .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } .ww-obsah ul.wp-block-post-template > li > .is-style-ww-karta:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0, 0, 0, .08); } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-query-pagination { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin: 16px 0 0; font-weight: 600; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-query-no-results p { color: #4A4D54; } /* Obsah pro přihlášené – výzva k přihlášení (blok „Jen pro přihlášené“) */ :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno { margin: 0 0 16px; padding: 30px 28px; background: #FBF8F4; border: 1px solid rgba(188, 146, 106, .3); border-left: 4px solid #BC926A; border-radius: 12px; text-align: center; } :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno .wp-block-winwin-ikona { margin: 0 auto 14px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno :is(h2, h3) { margin: 0 0 8px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno h2 { font-size: 24px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno p { margin: 0 auto 18px; max-width: 560px; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .ww-zamceno .wp-block-buttons { justify-content: center; margin: 0; } .editor-styles-wrapper .wp-block-winwin-jen-prihlaseni { position: relative; padding: 34px 16px 16px; border: 2px dashed rgba(188, 146, 106, .55); border-radius: 12px; } .editor-styles-wrapper .wp-block-winwin-jen-prihlaseni::before { content: "Vidí jen přihlášení"; position: absolute; left: 12px; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A6440; } .editor-styles-wrapper .wp-block-winwin-jen-prihlaseni.ww-jen-clenove::before { content: "Vidí jen členové družstva"; } /* Kontaktní formulář (blok „Kontaktní formulář“) */ :is(.ww-obsah, .editor-styles-wrapper) .ww-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; padding: 26px 24px; background: #fff; border: 1px solid #EEE6DC; border-top: 4px solid #BC926A; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .04); } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-pole { display: flex; flex-direction: column; gap: 6px; margin: 0; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-pole--cela { grid-column: 1 / -1; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular label { font-size: 14px; font-weight: 700; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea) { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid #DCD3C8; border-radius: 10px; background: #fff; font: inherit; font-size: 16px; color: #1A1C20; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular textarea { min-height: 140px; resize: vertical; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular :is(input, textarea):focus { outline: 2px solid #8A6440; outline-offset: 1px; border-color: #8A6440; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-pozn { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.6; color: #4A4D54; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular .wp-block-button__link { cursor: pointer; font-family: inherit; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-odeslat { grid-column: 1 / -1; margin: 0; } /* QR platba v kartě Bankovní spojení (blok Kontakty) */ :is(.ww-obsah, .editor-styles-wrapper) .ww-kontakty-qr { margin: 18px 0 0; } :is(.ww-obsah, .editor-styles-wrapper) .ww-kontakty-qr svg { display: block; width: 148px; height: auto; border: 1px solid #EEE6DC; border-radius: 8px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-kontakty-qr figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #4A4D54; } .ww-formular-past { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-hlaska { margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; font-weight: 600; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-hlaska--ok { background: #EAF5EC; color: #1F6B33; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular-hlaska--chyba { background: #FBECEC; color: #A12A2C; } /* ---------- 10. MOBIL ---------- */ @container ww-obsah (max-width: 560px) { :is(.ww-obsah, .editor-styles-wrapper) h2 { font-size: 24px; } :is(.ww-obsah, .editor-styles-wrapper) p.is-style-ww-perex { font-size: 17px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-schema { padding: 18px 16px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-box { padding: 22px 18px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta { padding: 22px 18px 20px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-karta-obrazek > .wp-block-group { padding: 20px 18px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-otazky { padding: 0 16px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-tmavy { padding: 26px 20px; } :is(.ww-obsah, .editor-styles-wrapper) .ww-formular { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty > li { padding-right: 0; } :is(.ww-obsah, .editor-styles-wrapper) .is-style-ww-dokumenty > li::after { display: none; } :is(.ww-obsah, .editor-styles-wrapper) .wp-block-buttons > .wp-block-button:not(.is-style-ww-odkaz), :is(.ww-obsah, .editor-styles-wrapper) .wp-block-buttons > .wp-block-button:not(.is-style-ww-odkaz) .wp-block-button__link { width: 100%; } } @media (prefers-reduced-motion: reduce) { :is(.ww-obsah, .editor-styles-wrapper) :is(.wp-block-button__link, .wp-block-details > summary::after, .is-style-ww-karta-obrazek, .is-style-ww-karta-obrazek img, .is-style-ww-odkaz-sipka a::after) { transition: none; } .ww-obsah .is-style-ww-karta-obrazek:hover, .ww-obsah .is-style-ww-karta-obrazek:focus-within, .ww-obsah .is-style-ww-karta-obrazek:hover > .wp-block-image img { transform: none; } } /* ---------- 11. JEN V EDITORU ---------- */ .editor-styles-wrapper .editor-post-title, .editor-styles-wrapper .editor-post-title__input { margin: 0 auto 40px; font-size: 42px; font-weight: 700; line-height: 1.2; text-align: center; color: #1A1C20; } /* V editoru jsou všechny otázky rozbalené, aby šly psát odpovědi. */ .editor-styles-wrapper .wp-block-details > summary::after { display: none; }