/* ============================================================ HERO — varianten gestuurd door [data-hero] op Varianten: split — foto rechts 40%, tekst links 60% (default) duotone — full-bleed foto met cream veil vanaf links organic — foto in organic blob rechts editorial — geen foto, grote serif-titel links floating-pill — hero cream, search-bar als gecentreerde pill die half over de sectie eronder valt search-bar — full-bleed navy search-bar onder hero ============================================================ */ .hero-v2 { position: relative; background: var(--color-cream); isolation: isolate; overflow: hidden; } .hero-v2 .hero-inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--container-pad) clamp(48px, 6vw, 88px); } .hero-v2 .hero-copy { max-width: 620px; } .hero-v2 .eyebrow { display: inline-block; margin-bottom: var(--space-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .hero-v2 .hero-title { font-family: var(--font-serif); font-size: clamp(44px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.02em; font-weight: 400; margin: 0; max-width: 14ch; color: var(--color-navy); text-wrap: balance; } .hero-v2 .hero-title em { font-style: italic; color: var(--color-accent); } .hero-v2 .hero-lead { margin-top: var(--space-5); max-width: 48ch; font-size: var(--fs-lg); color: var(--color-text); opacity: 0.82; } .hero-v2 .hero-stats { display: flex; gap: var(--space-10); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgba(11, 26, 54, 0.12); max-width: 640px; flex-wrap: wrap; } .hero-v2 .hero-stats > div { display: flex; flex-direction: column; gap: 2px; } .hero-v2 .hero-stats strong { font-family: var(--font-serif); font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: var(--color-navy); letter-spacing: -0.01em; line-height: 1; } .hero-v2 .hero-stats span { font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: 0.02em; } /* Background layers — default absolute fullbleed, per variant overridden */ .hero-v2 .hero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero-v2 .hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-v2 .hero-bg-veil { position: absolute; inset: 0; } /* ============================================================ VARIANT A — Split (default): tekst 60% links, foto 40% rechts ============================================================ */ [data-hero="split"] .hero-v2 .hero-inner { display: grid; grid-template-columns: 60% 40%; gap: clamp(32px, 4vw, 64px); align-items: center; } [data-hero="split"] .hero-v2 .hero-bg { position: relative; inset: auto; grid-column: 2; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #e8dfd0 0%, #d6c5a8 100%); } [data-hero="split"] .hero-v2 .hero-bg-veil { display: none; } [data-hero="split"] .hero-v2 .hero-copy { max-width: 100%; grid-column: 1; grid-row: 1; } /* Zorg dat DOM-volgorde (hero-bg voor hero-inner) niet uitmaakt: wrapper pakt hero-bg ook op. In onze Homepage staat .hero-bg als sibling van .hero-inner. Voor split moeten we hem visueel in de grid krijgen. Truc: absolute-positionering binnen hero-v2, rechts 40%. */ [data-hero="split"] .hero-v2 > .hero-bg { position: absolute; left: auto; right: var(--container-pad); top: clamp(56px, 7vw, 96px); bottom: clamp(48px, 6vw, 88px); width: calc((100% - 2 * var(--container-pad)) * 0.40 - 16px); max-width: calc(var(--container-max) * 0.40); /* center within container */ right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))); aspect-ratio: auto; border-radius: 18px; } [data-hero="split"] .hero-v2 .hero-copy { max-width: 56%; } /* Undo the grid override — we use absolute for bg, copy is just constrained */ [data-hero="split"] .hero-v2 .hero-inner { display: block; } /* ============================================================ VARIANT B — Duotone overlay (full-bleed photo + cream veil) ============================================================ */ [data-hero="duotone"] .hero-v2 .hero-bg { inset: 0; } [data-hero="duotone"] .hero-v2 .hero-bg-image { filter: saturate(0.85) contrast(1.05); } [data-hero="duotone"] .hero-v2 .hero-bg-veil { background: linear-gradient(92deg, var(--color-cream) 0%, var(--color-cream) 24%, rgba(245, 239, 228, 0.85) 42%, rgba(245, 239, 228, 0.35) 62%, rgba(245, 239, 228, 0.05) 82%, transparent 100%), linear-gradient(180deg, rgba(11, 26, 54, 0.0) 0%, rgba(11, 26, 54, 0.25) 100%); } [data-hero="duotone"] .hero-v2 .hero-inner { padding-top: clamp(88px, 11vw, 148px); padding-bottom: clamp(88px, 11vw, 148px); } [data-hero="duotone"] .hero-v2 .hero-copy { max-width: 560px; } /* ============================================================ VARIANT C — Organic shape (blob rechts) ============================================================ */ [data-hero="organic"] .hero-v2 { padding-bottom: 48px; } [data-hero="organic"] .hero-v2 .hero-bg { top: 40px; right: -4%; bottom: 0; left: auto; width: 46%; border-radius: 48% 52% 42% 58% / 46% 40% 60% 54%; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(11, 26, 54, 0.35); transform: rotate(-3deg); } [data-hero="organic"] .hero-v2 .hero-bg-image { transform: rotate(3deg) scale(1.15); } [data-hero="organic"] .hero-v2 .hero-bg-veil { display: none; } [data-hero="organic"] .hero-v2 .hero-copy { max-width: 560px; } /* ============================================================ VARIANT D — Editorial stack (geen foto, megatitel) ============================================================ */ [data-hero="editorial"] .hero-v2 .hero-bg { display: none; } [data-hero="editorial"] .hero-v2 .hero-inner { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(48px, 6vw, 80px); } [data-hero="editorial"] .hero-v2 .hero-copy { max-width: 1000px; } [data-hero="editorial"] .hero-v2 .hero-title { font-size: clamp(64px, 9.5vw, 144px); max-width: 16ch; line-height: 0.95; } [data-hero="editorial"] .hero-v2 .hero-lead { font-size: var(--fs-xl); max-width: 60ch; } /* ============================================================ VARIANT E — Floating pill (search-bar drijft over volgende sectie) ============================================================ */ [data-hero="floating-pill"] .hero-v2 .hero-bg { display: none; } [data-hero="floating-pill"] .hero-v2 { overflow: visible; padding-bottom: 0; } [data-hero="floating-pill"] .hero-v2 .hero-inner { padding-bottom: clamp(56px, 7vw, 96px); } [data-hero="floating-pill"] .hero-v2 .hero-stats { display: none; } /* De aparte
wordt hier een drijvende pill */ body[data-hero="floating-pill"] .search-bar { background: transparent; padding: 0; margin-top: -44px; position: relative; z-index: 20; } body[data-hero="floating-pill"] .search-bar > .container { max-width: 960px; } body[data-hero="floating-pill"] .search-bar-form { display: flex; align-items: center; width: 100%; background: var(--color-navy); padding: 10px 10px 10px 22px; border-radius: 999px; box-shadow: 0 32px 60px -20px rgba(11, 26, 54, 0.45), 0 8px 20px -8px rgba(11, 26, 54, 0.20); gap: 8px; } body[data-hero="floating-pill"] .search-bar-form .search-field { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; border-radius: 999px; padding: 10px 12px; } body[data-hero="floating-pill"] .search-bar-form .search-field + .search-field { border-left: 1px solid rgba(255,255,255,0.14); } body[data-hero="floating-pill"] .search-bar-form .search-field input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; } body[data-hero="floating-pill"] .search-bar-form .search-field input { color: #fff; background: transparent; } body[data-hero="floating-pill"] .search-bar-form .search-field input::placeholder { color: rgba(255, 255, 255, 0.6); } body[data-hero="floating-pill"] .search-bar-form .search-field-icon { color: rgba(255, 255, 255, 0.7); } body[data-hero="floating-pill"] .search-bar-btn { flex: 0 0 auto; border-radius: 999px; padding: 14px 28px; background: var(--color-accent); color: #fff; border: 0; cursor: pointer; } body[data-hero="floating-pill"] .search-bar-btn:hover { background: #d34a22; } /* extra lucht onder de pill zodat hij niet tegen themes aan plakt */ body[data-hero="floating-pill"] .search-bar + section { padding-top: calc(var(--space-16) + 32px); } /* ============================================================ VARIANT F — Navy search-bar (full-bleed band) Default weergave; de
rendert al full-bleed. ============================================================ */ [data-hero="search-bar"] .hero-v2 .hero-bg { display: none; } [data-hero="search-bar"] .hero-v2 .hero-inner { padding-bottom: clamp(40px, 5vw, 64px); } [data-hero="search-bar"] .hero-v2 .hero-stats { display: none; } /* Toon de aparte search-bar alleen bij varianten die 'em nodig hebben (E + F) */ body:not([data-hero="search-bar"]):not([data-hero="floating-pill"]) .search-bar { display: none; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { [data-hero="split"] .hero-v2 > .hero-bg { position: relative; inset: auto; width: 100%; max-width: none; right: auto; top: auto; bottom: auto; aspect-ratio: 16 / 10; margin: 0 var(--container-pad) 0; } [data-hero="split"] .hero-v2 .hero-copy { max-width: 100%; } [data-hero="duotone"] .hero-v2 .hero-bg { display: none; } [data-hero="organic"] .hero-v2 .hero-bg { display: none; } body[data-hero="floating-pill"] .search-bar-form { flex-wrap: wrap; border-radius: 20px; padding: 10px; } body[data-hero="floating-pill"] .search-bar { margin-top: -24px; } }