/* ════════════════════════════════════════════════════════════════════════ 10-section.css — VOALA sdílený vzor sekce: linka + nadpis na střed Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE. Sekce „Naše práce", „Klienti", „Ocenění" i „Eshop" mají shodnou hlavičku: - vodorovná linka přes celé tělo stránky (Line 1–4, x=109, šířka 1222) - pod ní nadpis Inter 500 48/130 % na střed (na mobilu 28) Rozměry (optické, od verzálek / účaří): 390 1440 linka → verzálky nadpisu 50 100 účaří nadpisu → obsah 50 100 konec obsahu → další sekce 50 150 TŘÍDY .vo-section Divi Section (odsazení, kontejner, bílé pozadí) .vo-line-top linka nad sekcí (samostatně, ať jde vypnout) .vo-section-title Divi TEXT modul s nadpisem (uvnitř H2) Mezery jsou doměřené v renderu (cap-to-cap), proto nejsou kulaté — viz komentář v 10-intro.css. ════════════════════════════════════════════════════════════════════════ */ .vo-section { --vo-section-gutter: 24px; --vo-section-pad-top: clamp(41.8px, calc(25.64px + 4.143vw), 85.3px); --vo-section-pad-bottom: clamp(50px, calc(12.86px + 9.524vw), 150px); --vo-section-gap-title: clamp(42.4px, calc(25.69px + 4.286vw), 87.4px); --vo-section-title-fs: clamp(28px, calc(20.57px + 1.905vw), 48px); --vo-section-line: rgba(42, 49, 51, .25); } /* ── Divi sekce — reset ──────────────────────────────────────────────── */ .vo-section.et_pb_section { padding: var(--vo-section-pad-top) 0 var(--vo-section-pad-bottom) !important; background: var(--white-voala) !important; gap: 0 !important; position: relative; z-index: 1; } .vo-section > .et_pb_row { width: 100% !important; max-width: calc(var(--container) + 2 * var(--vo-section-gutter)) !important; margin: 0 auto !important; padding: 0 var(--vo-section-gutter) !important; } .vo-section .et_pb_module, .vo-section .et_pb_column, .vo-section .et_pb_row { margin-bottom: 0 !important; } /* Divi 5 skládá moduly ve sloupci flexem a dává mezi ně row-gap 30 px. Ta se přičítala k mezerám z designu, takže nadpis a obsah od sebe byly o 30 px dál, než měly. Rytmus si řídíme margin-topem níž, gap tedy pryč. Sloupcová mezera v řádku zůstává — ta je na vícesloupcové rozvržení. */ .vo-section > .et_pb_row { row-gap: 0 !important; } .vo-section .et_pb_column { gap: 0 !important; } /* ── Linka nad sekcí ───────────────────────────────────────────────────── Kreslí se na sekci, ne do řádku, aby ji šlo vypnout odebráním třídy a aby seděla na tělo stránky i v sekci bez obsahu nahoře. ──────────────────────────────────────────────────────────────────────── */ .vo-line-top::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--vo-section-gutter), var(--container)); height: 1px; background: var(--vo-section-line); } /* ── Nadpis sekce ──────────────────────────────────────────────────────── Klient ho píše v TEXT modulu jako Nadpis 2 (H1 má hlavní banner). ──────────────────────────────────────────────────────────────────────── */ .vo-section .vo-section-title, .vo-section .vo-section-title .et_pb_text_inner { font-family: var(--font-base); color: var(--black-voala); text-align: center; } .vo-section .vo-section-title h2, .vo-section .vo-section-title h3 { margin: 0; padding: 0; font-family: var(--font-base); font-size: var(--vo-section-title-fs); font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--black-voala); text-align: center; } /* Obsah pod nadpisem — mezera se řídí odsud, ne z Divi nastavení modulu. Platí, ať je obsah dalším modulem ve stejném sloupci (Naše práce, Klienti), nebo samostatným řádkem pod nadpisem (Ocenění). */ .vo-section .vo-section-title + .et_pb_module, .vo-section .vo-section-title ~ .et_pb_module { margin-top: var(--vo-section-gap-title) !important; } .vo-section > .et_pb_row:has(.vo-section-title) + .et_pb_row { margin-top: var(--vo-section-gap-title) !important; } /* ── Textová sekce: nadpis + odstavce na střed ─────────────────────────── Print LAB (Figma 24:1323, verze 2. 9. 2026): „Architektonické soutěže – kapa desky" a „Studenti – diplomky, bakalářky a portfolia". Linka, nadpis 48 na střed, pod ním text Inter 500 20/150 % na střed v šířce 972 (x = 234), odstavce oddělené prázdným řádkem (30 px), tučné části, červené odkazy. Konec textu → další linka 88 / 130 px (design není jednotný) → 110. Divi: Section s třídami „vo-section vo-line-top vo-section--text", TEXT modul s třídou vo-section-title (Nadpis 2) a TEXT modul s třídou vo-text-center (odstavce). ──────────────────────────────────────────────────────────────────────── */ .vo-section--text { --vo-section-pad-bottom: clamp(50px, calc(27.71px + 5.714vw), 110px); /* Verzálky nadpisu → verzálky textu 123 (Figma 2842 → 2965); sdílená mezera je měřená k horní hraně obrázků, u textu se odečítá proklad nad verzálkami (~18 px) */ --vo-section-gap-title: clamp(33px, calc(19.5px + 3.467vw), 69.4px); --vo-section-text-fs: clamp(18px, calc(17.26px + 0.19vw), 20px); --vo-section-text-width: 972px; } .vo-section .vo-text-center, .vo-section .vo-text-center .et_pb_text_inner { font-family: var(--font-base); color: var(--black-voala); text-align: center; } .vo-section .et_pb_module.vo-text-center { max-width: var(--vo-section-text-width); margin-left: auto !important; margin-right: auto !important; } .vo-section .vo-text-center p { margin: 0; padding: 0; font-size: var(--vo-section-text-fs); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--black-voala); text-align: center; } .vo-section .vo-text-center p + p { margin-top: 1.5em; } /* prázdný řádek z designu */ .vo-section .vo-text-center strong, .vo-section .vo-text-center b { font-weight: 700; } .vo-section .vo-text-center a { color: var(--red-voala); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast); } .vo-section .vo-text-center a:hover { color: var(--red-voala-dark); } /* ── Sekce na šedém podkladu ─────────────────────────────────────────── */ .vo-section--gray.et_pb_section { background: var(--gray-voala) !important; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 720px) { /* Mobilní frame: boční okraje 16 px, obsah 358 */ .vo-section { --vo-section-gutter: 16px; } }