/* ========================================================================== Stravyx — website stylesheet (merk-laag) Versie: 1 | Datum: 2026-07-19 Gebaseerd op Stravyx_DESIGN.md (merk-laag) en het Stravyx brandbook v2. Warm cream editorial · MuseoModerno lowercase headlines · Inter body. Geen schaduwen, geen verlopen — diepte komt van vlak-op-vlak. ========================================================================== */ /* ----- Design tokens ----------------------------------------------------- */ :root { /* Colors */ --color-creme: #FBF3E4; --color-kaart: #FFFDF8; --color-paneel: #ECE2CF; --color-paneel-diep: #E6DCC8; --color-inkt: #1F1A18; --color-aubergine: #3B2138; --color-warmgrijs: #6B6557; --color-gedempt: #9A9282; --color-saffraan: #F4A613; --color-koraal: #FB5A4B; --color-vermiljoen: #E14A2B; /* Semantiek */ --surface-page: var(--color-creme); --surface-card: var(--color-kaart); --surface-band: var(--color-paneel); --surface-anker: var(--color-aubergine); --surface-anker-diep: var(--color-inkt); --text-heading: var(--color-inkt); --text-body: var(--color-warmgrijs); --text-muted: var(--color-gedempt); --border-default: var(--color-paneel-diep); --action: var(--color-inkt); --accent: var(--color-saffraan); --spark: var(--color-koraal); /* Fonts */ --font-display: 'MuseoModerno', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Layout */ --page-max-width: 1280px; --gutter: 32px; /* Radius */ --radius-input: 8px; --radius-sm: 12px; --radius-card: 20px; --radius-card-lg: 24px; --radius-pill: 9999px; /* Motion */ --motion-duur: 200ms; --motion-ease: ease; } /* ----- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; letter-spacing: 0.16px; background: var(--surface-page); color: var(--color-inkt); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ----- Headings (MuseoModerno) ------------------------------------------ Brandbook merk-laag: titels in kleine letters. */ h1, h2, h3, h4 { font-family: var(--font-display); text-transform: lowercase; color: var(--text-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; /* Nederlands en Frans hebben lange samenstellingen. Woorden als "verzekeringsmakelaars" en "verzekeringssystemen" zijn in displaygrootte breder dan een telefoonscherm en liepen zo buiten de pagina. `hyphens` breekt ze op de juiste plek, want staat per taal goed; `overflow-wrap` vangt op wat de browser niet kan afbreken. */ overflow-wrap: break-word; hyphens: auto; } /* ----- Layout helpers ---------------------------------------------------- */ .container { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 96px; } .section--tight { padding-block: 64px; } .stack > * + * { margin-top: 1rem; } .eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.28em; color: var(--text-muted); margin-bottom: 20px; } .lede { font-size: 20px; line-height: 1.5; color: var(--text-body); max-width: 58ch; } .muted { color: var(--text-body); } .spark { color: var(--spark); } .accent { color: var(--accent); } .center { text-align: center; } .center .lede { margin-inline: auto; } .section-head { max-width: 62ch; margin-bottom: 48px; } .section-head.center { margin-inline: auto; } .section-head h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.96px; } .section-head p { margin-top: 16px; } /* ----- Buttons (pill) ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1; padding: 13px 20px; border-radius: var(--radius-pill); transition: background var(--motion-duur) var(--motion-ease), color var(--motion-duur) var(--motion-ease), border-color var(--motion-duur) var(--motion-ease); border: 1px solid transparent; } .btn--primary { background: var(--action); color: var(--color-creme); } .btn--primary:hover { background: var(--color-aubergine); } .btn--ghost { background: transparent; color: var(--color-inkt); border-color: var(--border-default); } .btn--ghost:hover { background: var(--color-paneel); } .btn--on-dark { background: var(--color-creme); color: var(--color-inkt); } .btn--on-dark:hover { background: #fff; } .btn--ghost-dark { background: transparent; color: var(--color-creme); border-color: rgba(251,243,228,0.28); } .btn--ghost-dark:hover { background: rgba(251,243,228,0.08); } .btn .arrow { transition: transform var(--motion-duur) var(--motion-ease); } .btn:hover .arrow { transform: translateX(3px); } /* ----- Navigation (zwevende pill) ---------------------------------------- */ .nav-wrap { position: sticky; top: 0; z-index: 50; padding-top: 20px; } .nav { max-width: var(--page-max-width); margin-inline: auto; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 10px 12px 10px 20px; width: calc(100% - 2 * var(--gutter)); } .nav__brand { display: flex; align-items: center; gap: 10px; } .nav__brand svg, .nav__brand img { height: 26px; width: auto; } .nav__brand .wordmark { font-family: var(--font-display); font-size: 22px; text-transform: lowercase; font-weight: 600; letter-spacing: -0.02em; color: var(--color-inkt); } .nav__links { display: flex; align-items: center; gap: 2px; } .nav__links a { font-size: 14px; font-weight: 500; color: var(--color-inkt); padding: 8px 11px; border-radius: var(--radius-pill); transition: background var(--motion-duur) var(--motion-ease); } .nav__links a:hover { background: var(--color-paneel); } .nav__links a.is-active { background: var(--color-paneel); } /* De knop en de navigatielinks mogen niet inkrimpen. Deden ze dat wel, dan zette "planifier un rendez-vous" zijn tekst op twee regels en werd de hele balk hoger, terwijl er horizontaal nog plaats was. */ .nav__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav__cta .btn, .nav__links a { white-space: nowrap; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-paneel); border-radius: var(--radius-pill); } .lang-switch a { font-size: 12px; font-weight: 600; color: var(--color-warmgrijs); padding: 5px 9px; border-radius: var(--radius-pill); line-height: 1; transition: background var(--motion-duur) var(--motion-ease), color var(--motion-duur) var(--motion-ease); } .lang-switch a:hover { color: var(--color-inkt); } .lang-switch a.is-active { background: var(--color-inkt); color: var(--color-creme); } .nav__toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-pill); align-items: center; justify-content: center; } .nav__toggle svg { width: 22px; height: 22px; } /* ----- Hero -------------------------------------------------------------- */ .hero { padding-top: 80px; padding-bottom: 96px; } .hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; } .hero .lede { margin-top: 24px; font-size: clamp(18px, 2.2vw, 22px); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero__meta { margin-top: 20px; font-size: 13px; color: var(--text-muted); } /* ----- Cards ------------------------------------------------------------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* minmax(0, 1fr) in plaats van 1fr: een 1fr-kolom krimpt niet onder de breedte van haar langste woord, waardoor het raster buiten de pagina liep zodra vier kaarten naast elkaar stonden op een smal scherm. */ .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { background: var(--surface-band); border-radius: var(--radius-card); padding: 32px; } .card--white { background: var(--surface-card); border: 1px solid var(--border-default); } .card--link { transition: background var(--motion-duur) var(--motion-ease); } .card--link:hover { background: var(--color-paneel-diep); } .card__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-creme); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .card__icon svg { width: 22px; height: 22px; stroke: var(--color-inkt); } .card h3 { font-size: 24px; letter-spacing: -0.5px; margin-bottom: 10px; } .card p { font-size: 15px; color: var(--text-body); } .card__tag { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-body); background: var(--color-paneel-diep); border-radius: var(--radius-input); padding: 3px 8px; display: inline-block; margin-bottom: 14px; } /* Number list (how it works) */ .step { position: relative; padding-left: 0; } .step__num { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--color-saffraan); line-height: 1; margin-bottom: 16px; } .step h3 { font-size: 22px; margin-bottom: 8px; } .step p { font-size: 15px; color: var(--text-body); } /* ----- Statement band (donker anker) ------------------------------------ */ .band-dark { background: var(--surface-anker); color: var(--color-creme); } .band-ink { background: var(--surface-anker-diep); color: var(--color-creme); } .band-dark h2, .band-ink h2 { color: var(--color-creme); } .band-dark .lede, .band-ink .lede { color: rgba(251,243,228,0.78); } .band-dark .eyebrow, .band-ink .eyebrow { color: rgba(251,243,228,0.6); } /* ----- Stats ------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats .stat__label { max-width: 26ch; } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--color-saffraan); letter-spacing: -0.02em; } .stat__label { margin-top: 10px; font-size: 14px; color: var(--text-body); } .band-dark .stat__label, .band-ink .stat__label { color: rgba(251,243,228,0.72); } /* ----- Trustband --------------------------------------------------------- */ .trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; } .trust span { font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 22px; color: var(--color-gedempt); } /* ----- Split (text + panel) --------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split--wide { grid-template-columns: 1.1fr 0.9fr; } /* ----- Feature list ------------------------------------------------------ */ .feature-list { display: grid; gap: 20px; } .feature-list li { display: flex; gap: 14px; } .feature-list .tick { flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-paneel); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .feature-list .tick svg { width: 14px; height: 14px; stroke: var(--color-inkt); } .feature-list h4 { font-family: var(--font-body); text-transform: none; font-size: 16px; font-weight: 600; color: var(--color-inkt); margin-bottom: 2px; } .feature-list p { font-size: 14px; color: var(--text-body); } /* ----- CTA band ---------------------------------------------------------- */ .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(30px, 4.5vw, 52px); letter-spacing: -1px; } .cta-band .hero__cta { justify-content: center; margin-top: 28px; } /* ----- Forms ------------------------------------------------------------- */ .form { display: grid; gap: 16px; max-width: 560px; } .form label { font-size: 13px; font-weight: 600; color: var(--color-inkt); display: block; margin-bottom: 6px; } .form input, .form textarea, .form select { width: 100%; font-family: inherit; font-size: 15px; color: var(--color-inkt); background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-input); padding: 12px 14px; transition: border-color var(--motion-duur) var(--motion-ease); } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-inkt); } .form textarea { resize: vertical; min-height: 120px; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__note { font-size: 13px; color: var(--text-muted); } /* ----- Footer ------------------------------------------------------------ */ .footer { background: var(--color-inkt); color: rgba(251,243,228,0.72); padding-block: 72px 32px; } .footer h4 { font-family: var(--font-body); text-transform: uppercase; font-size: 11px; letter-spacing: 0.18em; color: rgba(251,243,228,0.5); font-weight: 600; margin-bottom: 16px; } .footer a { color: rgba(251,243,228,0.72); font-size: 14px; transition: color var(--motion-duur) var(--motion-ease); } .footer a:hover { color: var(--color-creme); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer__brand .wordmark { font-family: var(--font-display); text-transform: lowercase; font-size: 28px; font-weight: 600; color: var(--color-creme); letter-spacing: -0.02em; } .footer__brand .baseline { font-size: 13px; color: rgba(251,243,228,0.55); margin-top: 8px; } .footer__brand p { font-size: 14px; margin-top: 20px; max-width: 34ch; line-height: 1.6; } .footer__col ul { display: grid; gap: 10px; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(251,243,228,0.14); font-size: 13px; color: rgba(251,243,228,0.5); } /* ----- Page hero (subpages) ---------------------------------------------- */ .page-hero { padding-top: 64px; padding-bottom: 24px; } .page-hero h1 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.03em; max-width: 18ch; } .page-hero .lede { margin-top: 20px; } /* ----- Pill tags --------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: 13px; font-weight: 500; color: var(--color-inkt); background: var(--color-paneel); border-radius: var(--radius-pill); padding: 6px 14px; } /* ----- Legal / privacy prose --------------------------------------------- */ .legal { max-width: 760px; } .legal h2 { font-size: 24px; letter-spacing: -0.4px; margin: 40px 0 12px; } .legal h2:first-child { margin-top: 0; } .legal p { font-size: 16px; line-height: 1.65; color: var(--text-body); margin-bottom: 12px; } .legal ul { margin: 8px 0 16px; padding-left: 0; display: grid; gap: 10px; } .legal li { font-size: 15px; line-height: 1.6; color: var(--text-body); padding-left: 20px; position: relative; } .legal li::before { content: "—"; position: absolute; left: 0; color: var(--color-saffraan); } .legal a { color: var(--color-inkt); text-decoration: underline; } .legal b { color: var(--color-inkt); font-weight: 600; } .legal__note { margin-top: 36px; padding: 16px 20px; background: var(--color-paneel); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-muted); } /* ----- Divider ----------------------------------------------------------- */ .divider { border: none; border-top: 1px solid var(--border-default); } /* ----- Responsive -------------------------------------------------------- */ @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .split, .split--wide { grid-template-columns: minmax(0, 1fr); gap: 40px; } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* De navigatie klapt in bij 1260px, niet pas bij 720px. Met zes items, de taalkeuze en de knop past ze daaronder niet meer op één regel, en in het Frans zijn de labels langer dan in het Nederlands. Een nav die over twee regels breekt, ziet er stuk uit; een hamburger niet. */ @media (max-width: 1260px) { .nav__links { display: none; } .nav__toggle { display: flex; } .nav[data-open="true"] { flex-wrap: wrap; border-radius: 24px; } .nav[data-open="true"] .nav__links { display: grid; width: 100%; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-default); } .nav[data-open="true"] .nav__links a { padding: 12px 14px; } } @media (max-width: 720px) { :root { --gutter: 20px; } .section { padding-block: 64px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .stats--3 { grid-template-columns: minmax(0, 1fr); } .form .row { grid-template-columns: minmax(0, 1fr); } .nav__cta .btn--ghost { display: none; } /* Met nowrap past "planifier un rendez-vous" niet meer naast de hamburger op een telefoon. De knop staat op elke pagina ook in de hero en de voettekst. */ .nav__cta .btn--primary { display: none; } } @media (max-width: 480px) { /* De ondergrens van de clamp (36px) is te groot voor een woord als "verzekeringsmakelaars" op een telefoon. Bij 27px past het op één regel en hoeft de browser het niet af te breken, wat er zonder afbreekwoordenboek lelijk uitziet. */ .page-hero h1 { font-size: 27px; } .footer__grid { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* `.stats` en `.stats--3` zijn even specifiek, dus wint de laatste regel in het bestand. Zonder deze regel kreeg de driecijferbalk hier alsnog twee kolommen, en die liepen buiten de pagina. */ .stats--3 { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Interactieve x-flow (lopende band — voor leken te volgen) ========================================================================== */ .xf__intro { background: var(--color-paneel); border-radius: var(--radius-card); padding: 22px 26px; margin-bottom: 28px; } .xf__intro b { color: var(--color-inkt); font-weight: 600; } .xf__intro p { font-size: 16px; color: var(--text-body); line-height: 1.55; max-width: 74ch; } .xf__context { margin-top: 12px; font-size: 14.5px; color: var(--color-inkt); font-weight: 500; } .xf__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .xf__tab { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--color-kaart); color: var(--color-inkt); cursor: pointer; transition: background var(--motion-duur) var(--motion-ease), color var(--motion-duur) var(--motion-ease), border-color var(--motion-duur) var(--motion-ease); } .xf__tab:hover { background: var(--color-paneel); } .xf__tab.is-active { background: var(--color-inkt); color: var(--color-creme); border-color: var(--color-inkt); } .xf__caption { display: grid; grid-template-columns: 1fr auto; gap: 20px 28px; align-items: center; background: var(--color-kaart); border: 1px solid var(--border-default); border-left: 4px solid var(--color-saffraan); border-radius: var(--radius-sm); padding: 18px 22px; margin-bottom: 26px; transition: border-color var(--motion-duur) var(--motion-ease), background var(--motion-duur) var(--motion-ease); } .xf__caption.is-done { border-left-color: #2E7D4F; background: #F1F6F2; } .xf__cap-phase { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--color-koraal); margin-bottom: 6px; } .xf__cap-txt { font-size: 17px; color: var(--color-inkt); line-height: 1.5; } .xf__controls { display: flex; gap: 8px; align-items: center; } .xf__btn-icon { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--color-kaart); font-size: 16px; color: var(--color-inkt); transition: background var(--motion-duur) var(--motion-ease); } .xf__btn-icon:hover { background: var(--color-paneel); } .xf__counter { font-size: 13px; color: var(--text-muted); min-width: 46px; text-align: center; } .xf__pipe-outer { overflow-x: auto; padding: 4px 2px 8px; } .xf__pipe { position: relative; display: flex; min-width: 940px; } .xf__track { position: absolute; left: 10%; right: 10%; top: 35px; height: 3px; background: var(--border-default); z-index: 0; border-radius: 2px; } .xf__station { position: relative; z-index: 1; flex: 1 1 0; padding: 0 10px; text-align: center; opacity: .45; transition: opacity .35s var(--motion-ease); } .xf__station.is-active { opacity: 1; } .xf__station.is-past { opacity: .8; } .xf__badge { width: 56px; height: 56px; border-radius: 50%; margin: 8px auto 16px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-muted); background: var(--color-kaart); border: 2px solid var(--border-default); transition: background var(--motion-duur) var(--motion-ease), border-color var(--motion-duur) var(--motion-ease), color var(--motion-duur) var(--motion-ease); } .xf__station.is-active .xf__badge { background: var(--color-saffraan); border-color: var(--color-saffraan); color: var(--color-inkt); } .xf__station.is-past .xf__badge { background: #2E7D4F; border-color: #2E7D4F; color: #fff; } .xf__station.is-final.is-active .xf__badge { background: #2E7D4F; border-color: #2E7D4F; color: #fff; } .xf__card { background: var(--color-paneel); border-radius: var(--radius-sm); padding: 16px 15px; min-height: 168px; text-align: left; border: 2px solid transparent; transition: border-color var(--motion-duur) var(--motion-ease), background var(--motion-duur) var(--motion-ease); } .xf__station.is-active .xf__card { background: var(--color-kaart); border-color: var(--color-saffraan); } .xf__title { font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 17px; color: var(--color-inkt); margin-bottom: 7px; } .xf__desc { font-size: 13.5px; color: var(--text-body); line-height: 1.5; } .xf__how { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-default); font-size: 11.5px; color: var(--text-muted); line-height: 1.45; } .xf__how b { color: var(--color-inkt); font-weight: 600; } .xf__dot { position: absolute; width: 22px; height: 22px; border-radius: 50%; top: 35px; margin-top: -11px; background: var(--color-koraal); border: 3px solid var(--color-kaart); box-shadow: 0 0 0 3px var(--color-koraal); z-index: 3; opacity: 0; pointer-events: none; transition: left .6s var(--motion-ease), background .3s ease, box-shadow .3s ease, opacity .3s ease; } .xf__dot.is-on { opacity: 1; } .xf__dot.is-done { background: #2E7D4F; box-shadow: 0 0 0 3px #2E7D4F; } .xf__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; animation: flowPuls 1.4s ease-out infinite; } @keyframes flowPuls { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } } @media (max-width: 860px) { .xf__caption { grid-template-columns: 1fr; } .xf__pipe { min-width: 720px; } } /* ========================================================================== Webhook-strip (zelflopende animatie) ========================================================================== */ .wh { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; padding-bottom: 44px; } .wh::before { content: ""; position: absolute; left: 3%; right: 3%; top: 42px; height: 2px; background: var(--border-default); z-index: 0; } .wh__box { position: relative; z-index: 1; background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 16px; animation: whFlash 7.5s ease infinite; animation-delay: var(--d); } .wh__box b { display: block; font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 16px; margin-bottom: 4px; color: var(--color-inkt); } .wh__box span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } @keyframes whFlash { 0%, 4% { box-shadow: 0 0 0 0 rgba(244,166,19,0); } 8% { box-shadow: 0 0 0 4px var(--color-saffraan); } 22%, 100% { box-shadow: 0 0 0 0 rgba(244,166,19,0); } } .wh__dot { position: absolute; top: 42px; left: 3%; width: 16px; height: 16px; border-radius: 50%; background: var(--color-koraal); margin-top: -8px; z-index: 2; animation: whTravel 7.5s ease-in-out infinite; } @keyframes whTravel { 0% { left: 3%; } 20% { left: 25%; } 40% { left: 48%; } 60% { left: 71%; } 80%, 94% { left: 94%; } 100% { left: 94%; opacity: 0; } } .wh__time { position: absolute; bottom: 6px; left: 0; font-size: 13px; color: var(--text-muted); font-weight: 600; } @media (max-width: 860px) { .wh { grid-template-columns: 1fr; } .wh::before, .wh__dot { display: none; } } /* ========================================================================== Video-inbedding + in/uit-datawarehouse visual ========================================================================== */ .videoframe { border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--color-inkt); } .videoframe video { display: block; width: 100%; height: auto; } .videocap { font-size: 13.5px; color: var(--text-body); margin-top: 12px; line-height: 1.5; } .videocap b { color: var(--color-inkt); font-weight: 600; } .io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; } .io__col { background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 26px; } .io__col.in { border-top: 4px solid var(--color-saffraan); } .io__col.out { border-top: 4px solid var(--color-koraal); } .io__tag { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; } .io__col h3 { font-size: 24px; margin-bottom: 12px; } .io__col p { font-size: 14.5px; color: var(--text-body); line-height: 1.55; } .io__col ul { margin-top: 14px; display: grid; gap: 10px; } .io__col li { display: flex; gap: 10px; font-size: 14px; color: var(--text-body); } .io__col li::before { content: "→"; color: var(--color-saffraan); font-weight: 700; } .io__col.out li::before { content: "←"; color: var(--color-koraal); } .io__hub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 128px; text-align: center; } .io__hub .disk { width: 72px; height: 72px; border-radius: 50%; background: var(--color-aubergine); color: var(--color-creme); display: flex; align-items: center; justify-content: center; } .io__hub .disk svg { width: 34px; height: 34px; stroke: var(--color-creme); } .io__hub span { font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 15px; color: var(--color-inkt); } .io__hub small { font-size: 11px; color: var(--text-muted); } @media (max-width: 860px) { .io { grid-template-columns: 1fr; } .io__hub { flex-direction: row; min-width: 0; } } /* ========================================================================== Connecties — overzicht van insurtechs & partners ========================================================================== */ .conn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .conn__cat { background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 22px 22px; } .conn__cat h4 { font-family: var(--font-body); text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; color: var(--text-muted); font-weight: 600; margin-bottom: 14px; } .conn__names { display: flex; flex-wrap: wrap; gap: 6px 16px; } .conn__names span { font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--color-warmgrijs); } .conn__note { margin-top: 24px; font-size: 14px; color: var(--text-muted); text-align: center; } @media (max-width: 960px) { .conn { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .conn { grid-template-columns: 1fr; } } /* Ecosysteem / architectuur-overzicht */ .eco-outer { overflow-x: auto; padding-bottom: 4px; } .eco-svg { width: 100%; min-width: 640px; max-width: 980px; height: auto; display: block; margin: 0 auto; } .eco-spark { animation: ecoSpark 6s ease-in-out infinite; } @keyframes ecoSpark { 0%, 5% { transform: translateY(0); } 24% { transform: translateY(88px); } 46% { transform: translateY(172px); } 70% { transform: translateY(268px); } 92%, 100% { transform: translateY(360px); } } @media (prefers-reduced-motion: reduce) { .eco-spark { animation: none; } } /* Key-lock micro-illustratie (CSS-animatie) */ .keylock { width: 100%; max-width: 300px; height: auto; display: block; } .keylock-wrap { display: flex; justify-content: center; align-items: center; } .kl-key { animation: klKey 6s ease-in-out infinite; } .kl-shackle { animation: klShackle 6s ease-in-out infinite; } .kl-dot { opacity: 0; animation: klDot 6s ease-in-out infinite; } .kl-dot.d2 { animation-delay: 0.25s; } .kl-dot.d3 { animation-delay: 0.5s; } @keyframes klKey { 0%, 6% { transform: translateX(120px); } 26%, 80% { transform: translateX(0); } 100% { transform: translateX(120px); } } @keyframes klShackle { 0%, 30% { transform: translateY(0); } 44%, 85% { transform: translateY(-16px); } 100% { transform: translateY(0); } } @keyframes klDot { 0%, 46% { opacity: 0; transform: translate(0, 0); } 58% { opacity: 1; } 76% { opacity: 0; transform: translate(var(--kx, 0), -72px); } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kl-key, .kl-shackle, .kl-dot { animation: none; } .kl-dot { opacity: 1; } } /* Logo-wall */ .logowall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .logotile { background: var(--color-kaart); border: 1px solid var(--border-default); border-radius: var(--radius-sm); min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; text-align: center; transition: border-color var(--motion-duur) var(--motion-ease); } .logotile:hover { border-color: var(--color-gedempt); } .logotile img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter var(--motion-duur) var(--motion-ease), opacity var(--motion-duur) var(--motion-ease); } .logotile__name { font-size: 12px; color: var(--text-muted); font-family: var(--font-body); } .logotile:hover img { filter: none; opacity: 1; } .logotile__word { font-family: var(--font-display); text-transform: lowercase; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--color-gedempt); transition: color var(--motion-duur) var(--motion-ease); text-align: center; line-height: 1.1; } .logotile:hover .logotile__word { color: var(--color-warmgrijs); } @media (max-width: 860px) { .logowall { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 520px) { .logowall { grid-template-columns: repeat(2, 1fr); } } /* ----- Beeldhero (foto links, tekst rechts met zachte overgang) ---------- */ .hero--beeld { padding-top: 40px; padding-bottom: 64px; } .hero--beeld .hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .hero--beeld .hero__media { position: relative; border-radius: var(--radius-card-lg, 24px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-paneel); } .hero--beeld .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero--beeld .hero__body { max-width: 52ch; } .hero--beeld h1 { font-size: clamp(34px, 3.6vw, 52px); } .hero--beeld .lede { font-size: 18px; max-width: 46ch; } /* ----- Fotokaart (beeld boven, tekst eronder, geen paneel) --------------- */ .photo-card__media { border-radius: var(--radius-card, 20px); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 20px; background: var(--color-paneel); } .photo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-card .step__num { font-size: 22px; margin-bottom: 10px; } .photo-card h3 { font-size: 24px; letter-spacing: -0.5px; margin-bottom: 10px; } .photo-card p { font-size: 15px; color: var(--text-body); } @media (max-width: 900px) { .hero--beeld .hero__grid { grid-template-columns: 1fr; gap: 28px; } .hero--beeld .hero__body { max-width: none; } } /* ----- Filmblok ---------------------------------------------------------- */ .film { margin: 0; } .film__speler { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card, 20px); background: var(--color-aubergine); display: block; } .film__bijschrift { margin-top: 20px; } .film__bijschrift h3 { font-size: 24px; letter-spacing: -0.5px; margin-bottom: 8px; } .film__bijschrift p { font-size: 16px; color: var(--text-body); max-width: 62ch; } .film__transcriptie { margin-top: 16px; border-top: 1px solid var(--border-default); padding-top: 16px; } .film__transcriptie summary { font-size: 14px; font-weight: 500; cursor: pointer; color: var(--color-inkt); list-style: none; } .film__transcriptie summary::-webkit-details-marker { display: none; } .film__transcriptie summary::before { content: "+ "; color: var(--text-muted); } .film__transcriptie[open] summary::before { content: "– "; } .film__transcriptie > div { margin-top: 12px; display: grid; gap: 10px; } .film__transcriptie p { font-size: 15px; color: var(--text-body); max-width: 68ch; } /* ----- Film in de hero --------------------------------------------------- */ /* Specificiteit moet die van `.hero--beeld .hero__media` overtreffen, anders blijft de 4:3 van het vectorbeeld staan en krijgt de film balken. */ .hero--beeld .hero__media--film { aspect-ratio: 16 / 9; background: var(--color-aubergine); } .hero__film { width: 100%; height: 100%; display: block; border-radius: inherit; } .hero__filmlabel { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--text-body); max-width: 48ch; } .hero__filmlabel-icoon { flex: 0 0 auto; margin-top: 1px; color: var(--color-saffraan); } .hero__filmlabel-icoon svg { width: 20px; height: 20px; } /* ----- Flowkaart (klikbare kaart naar een procespagina) ------------------ */ .flowkaart { display: block; background: var(--surface-card); border: 1px solid var(--border-default); transition: border-color var(--motion-duur) var(--motion-ease); } .flowkaart:hover { border-color: var(--color-saffraan); } .flowkaart h3 { margin-bottom: 10px; } .flowkaart__meer { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--color-inkt); } .flowkaart:hover .arrow { transform: translateX(3px); }