/* assets/css/pages/about-us.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('about-us') in page-about-us.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ .hero-band { width: 100%; aspect-ratio: 2.32/1; max-height: 66vh; overflow: hidden; background: var(--c-grey-bg); } .hero-band img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 12%; } .hero-copy { max-width: var(--wrap); margin: 0 auto; padding: var(--sec) 24px; } .hero-lede { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .hero-copy h1 { font-family: var(--f-display); font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; font-weight: 400; margin: 0; } .hero-copy p { font: 400 18px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 20px; } .signature { margin: 28px 0 30px; padding-top: 22px; border-top: 1px solid var(--c-grey-line); } .signature b { font: 400 17px/1.2 var(--f-head); display: block; } .signature small { display: block; color: var(--c-label); font-size: 13.5px; margin-top: 4px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 860px) { .hero-lede { grid-template-columns: 1fr; gap: 26px; } .hero-band { aspect-ratio: 5/4; max-height: none; } /* de twee hero-knoppen (about-lede + #castle) onder elkaar over de volle breedte */ .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; } .hero-actions .btn { width: 100%; } } /* Eigen naam (niet .story) -- die klasse is al elders in gebruik (homepage-editorial, heel andere opbouw: foto + donker paneel). Verwarrend om te hergebruiken voor dit simpele gecentreerde tekstblok. */ .about-story { max-width: 70ch; margin: 0 auto; text-align: center; } .about-story h2 { margin-bottom: 26px; } .about-story p { font: 400 18px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 20px; } .about-story p.punch { font-family: var(--f-head); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--c-primary); margin-top: 34px; } /* .section-hd komt uit reve-pages.css (flex, kicker+titel+link naast elkaar -- de homepage- variant). Hier geen link, gewoon gecentreerd: override enkel op deze pagina i.p.v. de gedeelde regel aan te passen en de homepage te raken. */ .section-hd { display: block; text-align: center; } .proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; } .proof div { border-top: 1px solid #2c2c2c; padding-top: 26px; } .proof b { display: block; font-family: var(--f-display); font-size: clamp(34px, 4vw, 52px); line-height: 1; font-weight: 400; } .proof span { display: block; font: 400 14.5px/1.45 var(--f-body); color: #b9b7b2; margin-top: 12px; } @media (max-width: 760px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; } } /* ---------- Castle Diependael: video-met-poster, laadt pas na een klik ---------- */ .castle { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; } .castle-media { position: relative; background: var(--c-grey-bg); aspect-ratio: 16/9; overflow: hidden; } .castle-media video, .castle-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Zelfde correctie als .editorial-media op home -- de 16:9-uitsnede sneed Hervé's hoofd af (klantfeedback 2026-09-08). */ .castle-media img { object-position: center top; } .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 10, .22); border: 0; cursor: pointer; color: #fff; padding: 0; } .play span { display: flex; align-items: center; gap: 12px; background: rgba(10, 10, 10, .72); padding: 14px 24px; font: 600 13px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; } .play:hover span { background: #0A0A0A; } .castle-lead { font: 400 17px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 24px; } .addr { font: 400 16px/1.7 var(--f-body); color: #2b2b2b; margin: 0 0 8px; } .addr b { font-weight: 600; } .addr-visit { margin-bottom: 26px; } @media (max-width: 900px) { .castle { grid-template-columns: 1fr; gap: 34px; } } /* ---------- "What this means when you walk in" -- drie kolommen ---------- */ .you { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; } .you h3 { margin-bottom: 10px; } .you p { font: 400 15.5px/1.6 var(--f-body); color: #3a3a3a; margin: 0; } .you div { border-top: 1px solid var(--c-grey-line); padding-top: 24px; } @media (max-width: 860px) { .you { grid-template-columns: 1fr; gap: 26px; } } /* ---------- Four worlds -- hergebruikt .brandcard (reve-pages.css, homepage GR/Geodesis) ---------- */ .worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .worlds .brandcard { aspect-ratio: 16/10; } @media (max-width: 720px) { .worlds { grid-template-columns: 1fr; } } /* ---------- Afsluitende CTA ---------- */ .closing { text-align: center; } .closing h2 { max-width: 22ch; margin: 0 auto 18px; } .closing p { max-width: 56ch; margin: 0 auto 32px; color: #d8d6d1; } .closing .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- about-us: reveal-on-scroll per sectie ---------- */ /* Observer draait via footer.php. Elke
heeft zijn eigen sequentie. */ /* ---- generieke start-states voor alle secties op deze pagina ---- */ [data-reveal] .kick, [data-reveal] .section-hd h2, [data-reveal] .about-story h2, [data-reveal] .about-story > *:not(.kick):not(h2), [data-reveal] .closing h2, [data-reveal] .closing > .wrap > p, [data-reveal] .closing .btns, [data-reveal] .hero-lede > div, [data-reveal] .proof > *, [data-reveal] .you > *, [data-reveal] .worlds > *, [data-reveal] #castle > .wrap > div:last-child > * { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal] .hero-band img, [data-reveal] .castle-media { opacity: 0; transition: opacity 1.1s cubic-bezier(.2,.7,.15,1); } /* ---- hero-shell: foto fade + kick/h1 -> body/signature/actions ---- */ [data-reveal].revealed .hero-band img { opacity: 1; } [data-reveal].revealed .hero-lede > div:nth-child(1){ opacity: 1; transform: none; transition-delay: .3s; } [data-reveal].revealed .hero-lede > div:nth-child(2){ opacity: 1; transform: none; transition-delay: .65s; } /* ---- about-story (blk.grey met .about-story wrap): kick -> h2 -> body -> punch ---- */ [data-reveal] .about-story > .kick, [data-reveal] .about-story > h2, [data-reveal] .about-story > p, [data-reveal] .about-story > .punch { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); } [data-reveal].revealed .about-story > .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .about-story > h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .about-story > p { opacity: 1; transform: none; transition-delay: .5s; } [data-reveal].revealed .about-story > .punch { opacity: 1; transform: none; transition-delay: .8s; } /* ---- numbers: kick -> h2 -> 4 stat-blokken 0,3s tussen ---- */ [data-reveal].revealed .section-hd .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .section-hd h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .proof > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .proof > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .85s; } [data-reveal].revealed .proof > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.15s; } [data-reveal].revealed .proof > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.45s; } /* ---- castle: media fade links, tekst rechts sequenceel ---- */ [data-reveal].revealed .castle-media { opacity: 1; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(1){ opacity: 1; transform: none; transition-delay: .3s; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(2){ opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(3){ opacity: 1; transform: none; transition-delay: .8s; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(4){ opacity: 1; transform: none; transition-delay: 1.05s; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(5){ opacity: 1; transform: none; transition-delay: 1.3s; } [data-reveal].revealed #castle > .wrap > div:last-child > *:nth-child(6){ opacity: 1; transform: none; transition-delay: 1.55s; } /* ---- you: 3 item-blokken sequenceel ---- */ [data-reveal].revealed .you > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .you > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .9s; } [data-reveal].revealed .you > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.25s; } /* ---- worlds: 4 brandcards sequenceel ---- */ [data-reveal].revealed .worlds > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .worlds > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .95s; } [data-reveal].revealed .worlds > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.35s; } [data-reveal].revealed .worlds > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.75s; } /* ---- closing: kick -> h2 -> tekst -> btns ---- */ [data-reveal].revealed .closing .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .closing h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .closing > .wrap > p { opacity: 1; transform: none; transition-delay: .5s; } [data-reveal].revealed .closing .btns { opacity: 1; transform: none; transition-delay: .85s; } [data-reveal] .closing > .wrap > p { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); } /* ---- newsletter (via wrapper-div in page-about-us.php) ---- */ [data-reveal] .news h2, [data-reveal] .news h2 + p, [data-reveal] .news form { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); } [data-reveal].revealed .news .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .news h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .news h2 + p { opacity: 1; transform: none; transition-delay: .5s; } [data-reveal].revealed .news form { opacity: 1; transform: none; transition-delay: .85s; } @media (prefers-reduced-motion: reduce) { [data-reveal] .kick, [data-reveal] .section-hd h2, [data-reveal] .about-story > *, [data-reveal] .closing > .wrap > *, [data-reveal] .closing .btns, [data-reveal] .hero-lede > div, [data-reveal] .proof > *, [data-reveal] .you > *, [data-reveal] .worlds > *, [data-reveal] .hero-band img, [data-reveal] .castle-media, [data-reveal] #castle > .wrap > div:last-child > * { opacity: 1; transform: none; transition: none; } }