/* ════════════════════════════════════════════════════════════════════════ 10-intro.css — VOALA textová sekce (nadpis + odstavec na střed) Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE - 15:946 „Grafické studio, které Vás učí vnímat papír" (desktop 13:644) - 15:947 odstavec pod ním - 13:397 / 13:407 = tytéž prvky v mobilním framu (13:395) - 15:1003 / 13:408 = odstavcová varianta bez nadpisu (nad „Naše práce") Sekce nemá vlastní markup ani zkratku — skládá se přímo v Divi (Section + Row + TEXT modul), tenhle soubor jí jen dává vzhled. TŘÍDY .vo-intro-section Divi Section (odsazení sekce, pozadí, kontejner) .vo-intro-section--plain varianta pro samostatný odstavec bez nadpisu .vo-intro Divi TEXT modul uvnitř (typografie nadpisu a textu) ROZMĚRY Z FIGMY (optické, měřeno od verzálek / účaří) 390 1440 nadpis 28 48 (Inter 500, 130 %) odstavec 18 20 (Inter 500, 150 %) verzálky nadpisu od konce hero 50 100 účaří nadpisu → verzálky odstavce 50 50 účaří odstavce → další sekce 50 149 šířka odstavce 358 972 CSS hodnoty níž jsou o půlproklad menší než optické (u Inter ~8 px u nadpisu, ~9 px u odstavce) — proto padding-top 41,8/85,3 a ne 50/100. Všechny mezery jsou doměřené v renderu (Playwright, cap-to-cap) a na 390 i 1440 sedí na Figmu na desetinu pixelu. Když budeš měnit velikost písma nebo proklad, mezery se musí přeměřit znovu. ════════════════════════════════════════════════════════════════════════ */ /* ── Fluidní hodnoty ───────────────────────────────────────────────────── Lineární interpolace 390 → 1440 (stejný vzorec jako v 09-hero.css). ──────────────────────────────────────────────────────────────────────── */ .vo-intro-section { --vo-intro-pad-top: clamp(41.8px, calc(25.64px + 4.143vw), 85.3px); --vo-intro-pad-bottom: clamp(46px, calc(9.6px + 9.333vw), 144px); --vo-intro-gap: clamp(27.3px, calc(36.21px - 0.619vw), 33.8px); --vo-intro-title: clamp(28px, calc(20.57px + 1.905vw), 48px); --vo-intro-text: clamp(18px, calc(17.26px + 0.19vw), 20px); --vo-intro-text-width: 972px; --vo-intro-width: 700px; /* šířka odstavce v sekci s nadpisem */ } /* Varianta bez nadpisu (Figma 15:1003 / 13:408) — nahoře i dole stejná optická mezera 100 → 150 a text přes celou šířku z designu (972). Platí automaticky pro každou sekci, ve které není nadpis, takže se na třídu --plain nedá zapomenout; ta zůstává pro případ, kdy je potřeba vynutit ji ručně (např. nadpis schovaný v jiném modulu). ──────────────────────────────────────────────────────────────────────── */ .vo-intro-section--plain, .vo-intro-section:not(:has(h1, h2, h3, .vo-intro__title)) { --vo-intro-pad-top: clamp(91px, calc(72.8px + 4.667vw), 140px); --vo-intro-pad-bottom: clamp(96px, calc(77.8px + 4.667vw), 145px); --vo-intro-width: var(--vo-intro-text-width); } /* ── Divi sekce — reset ──────────────────────────────────────────────── */ .vo-intro-section.et_pb_section { padding: var(--vo-intro-pad-top) 0 var(--vo-intro-pad-bottom) !important; background: var(--white-voala) !important; gap: 0 !important; position: relative; z-index: 1; /* pod sticky headerem */ } /* Řádek se zarovná na tělo stránky (1222 px), jako header, footer i hero. */ .vo-intro-section > .et_pb_row { width: 100% !important; max-width: calc(var(--container) + 48px) !important; margin: 0 auto !important; padding: 0 24px !important; } /* Divi dává modulům spodní mezeru — tady si rytmus řídíme sami. */ .vo-intro-section .et_pb_module, .vo-intro-section .et_pb_column, .vo-intro-section .et_pb_row { margin-bottom: 0 !important; } /* Divi 5 dává mezi moduly ve sloupci row-gap 30 px — mezery si tady řídíme sami, takže gap pryč (viz komentář v 10-section.css). */ .vo-intro-section > .et_pb_row { row-gap: 0 !important; } .vo-intro-section .et_pb_column { gap: 0 !important; } /* ── Textový modul ───────────────────────────────────────────────────── */ .vo-intro, .vo-intro .et_pb_text_inner { font-family: var(--font-base); color: var(--black-voala); text-align: center; } /* Moduly jdou přes celou šířku těla stránky — zúžený je až samotný odstavec (viz níž). Nadpis tak zůstane na jednom řádku, jak má design. */ .vo-intro-section .vo-intro, .vo-intro-section .et_pb_module { max-width: 100%; margin-left: auto; margin-right: auto; } /* ── Nadpis ────────────────────────────────────────────────────────────── Klient ho píše v TEXT modulu jako Nadpis 2 (na domácí stránce je H1 v hlavním banneru). Podporujeme i H1 (podstránky s fotkou v hero — např. „Print LAB", kde je tohle hlavní nadpis stránky), H3 a explicitní třídu. ──────────────────────────────────────────────────────────────────────── */ .vo-intro-section h1, .vo-intro-section h2, .vo-intro-section h3, .vo-intro-section .vo-intro__title { margin: 0; padding: 0; font-family: var(--font-base); font-size: var(--vo-intro-title); font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--black-voala); text-align: center; } /* ── Odstavec ──────────────────────────────────────────────────────────── Ve Figmě je zalomený natvrdo; v šabloně se láme sám, jen mu držíme maximální šířku, ať řádky nejsou přes celé tělo stránky. ──────────────────────────────────────────────────────────────────────── */ /* Zúžený je jen odstavec, ne nadpis. V sekci s nadpisem 700, v sekci bez nadpisu (odstavec nad „Naše práce") 972 podle designu. */ .vo-intro-section p, .vo-intro-section .vo-intro__text { max-width: var(--vo-intro-width); margin: 0 auto; padding: 0; font-size: var(--vo-intro-text); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--black-voala); text-align: center; } /* Mezera nadpis → odstavec i mezi odstavci navzájem. Platí uvnitř jednoho modulu i mezi dvěma sousedními moduly — v Divi jde nadpis a text napsat obojím způsobem a rytmus musí vyjít stejně. */ .vo-intro-section h1 + p, .vo-intro-section h2 + p, .vo-intro-section h3 + p, .vo-intro-section .vo-intro__title + .vo-intro__text, .vo-intro-section p + p { margin-top: var(--vo-intro-gap); } .vo-intro-section .et_pb_module + .et_pb_module { margin-top: var(--vo-intro-gap) !important; } /* Zvýrazněná první věta (Figma 15:1003 má první řádek tučně) */ .vo-intro-section strong, .vo-intro-section b { font-weight: 700; } /* Odkaz v textu — brand červená, podtržení až na hover */ .vo-intro-section a { color: var(--red-voala); text-decoration: none; transition: color var(--t-fast); } .vo-intro-section a:hover { color: var(--red-voala-dark); text-decoration: underline; } /* ── Modifikátory pro další použití sekce ────────────────────────────── */ /* Text zarovnaný doleva (pro podstránky, homepage má vše na střed) */ .vo-intro-section--left .vo-intro, .vo-intro-section--left .et_pb_module, .vo-intro-section--left h1, .vo-intro-section--left h2, .vo-intro-section--left h3, .vo-intro-section--left p { text-align: left; margin-left: 0; } /* Sekce na šedém podkladu (VOALA_DARK_GRAY) */ .vo-intro-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-intro-section > .et_pb_row { padding: 0 16px !important; } }