/* ============================================================ Polyvel / Polyarn / Polyvel Deutschland — gedeeld designsysteem Gebaseerd op Huisstijlhandboek v1.0 (augustus 2026) Eén stylesheet, drie merken. Merk wordt gezet via ============================================================ */ /* ---------- 1. Design tokens ---------- */ :root { /* Merkkleuren — huisstijlhandboek 04 */ --navy: #002E54; --navy-700: #013F71; --navy-900: #001C33; --slate: #7A99A2; --slate-700: #557682; --gold: #BB9D00; --gold-700: #8A7300; --magenta: #9F004B; --magenta-700: #7A0039; /* Neutralen — 60% wit/licht */ --white: #FFFFFF; --paper: #F6F8F9; --mist: #EDF1F3; --line: #DCE4E8; --ink: #16232E; --ink-60: #4A5C68; /* Dragende kleur — per merk overschreven in blok 1a hieronder. De waarden hier gelden voor de preview-startpagina. */ --pri: #002E54; --pri-700: #013F71; --pri-900: #001C33; --on-pri-soft: #C3D5E1; --on-pri-muted:#9FBACB; --veil-strong: rgba(0,28,51,.94); --veil-mid: rgba(0,28,51,.86); --veil-soft: rgba(0,28,51,.58); --shadow-tint: 0,46,84; /* Merkafhankelijk (default = Polyvel) */ --accent: var(--slate); --accent-deep: var(--slate-700); --accent-ink: var(--pri); /* leesbare tekstkleur van het accent */ --accent-soft: #EEF3F5; --accent-on-dark: #A2B8BE; /* --accent-ui is het accent voor grafische elementen op een lichte achtergrond (bullets, randen, onderstreping). Waar het merkaccent te weinig contrast geeft, wordt hier een verdiepte variant gebruikt die ≥ 3:1 haalt (WCAG 1.4.11). */ --accent-ui: var(--slate); /* Typografie */ --font-head: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif; /* Ruimte — schaal 8/16/24/40/64/96 */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --radius: 12px; --radius-sm: 8px; --content: 1200px; --measure: 720px; --shadow-sm: 0 1px 2px rgba(var(--shadow-tint),.06), 0 4px 12px rgba(var(--shadow-tint),.06); --shadow-md: 0 2px 6px rgba(var(--shadow-tint),.08), 0 16px 40px rgba(var(--shadow-tint),.10); --ease: cubic-bezier(.2,.7,.3,1); } /* ---------- 1a. Merkkleur als dragende kleur ---------- Elke site draait op zijn eigen merkkleur in plaats van diepblauw. De donkere variant (--pri) draagt koppen, header, footer, knoppen en de hero; de lichtere merkkleur blijft het accent. Alle waarden zijn getoetst op WCAG 2.1 AA — zie de tabel in OVERDRACHT.md. --pri dragende donkere merkkleur (vervangt diepblauw) --pri-700 hover-variant, iets lichter --pri-900 diepste variant voor hero-overlay --on-pri-* tekstkleuren op die donkere vlakken --veil-* hero-sluier in dezelfde kleurfamilie */ body.brand-polyvel { --pri: #2E4249; --pri-700: #3E5760; --pri-900: #1B282D; --on-pri-soft: #BACAD0; --on-pri-muted: #9DB2BA; --veil-strong: rgba(27,40,45,.94); --veil-mid: rgba(27,40,45,.86); --veil-soft: rgba(27,40,45,.58); --shadow-tint: 46,66,73; --accent: #557682; --accent-deep: #3F5C66; --accent-ink: #2E4249; --accent-soft: #EEF3F5; --accent-ui: #557682; --accent-on-dark: #A2B8BE; --paper: #F5F8F9; --mist: #E9EFF1; --line: #D8E2E6; --ink: #17262B; --ink-60: #4A5C63; } body.brand-polyarn { --pri: #4A3E00; --pri-700: #635310; --pri-900: #2B2400; --on-pri-soft: #D9CE9E; --on-pri-muted: #C0B37C; --veil-strong: rgba(43,36,0,.94); --veil-mid: rgba(43,36,0,.86); --veil-soft: rgba(43,36,0,.58); --shadow-tint: 74,62,0; --accent: #BB9D00; --accent-deep: #8A7300; --accent-ink: #4A3E00; --accent-soft: #FAF5DF; --accent-ui: #9A8000; --accent-on-dark: #CFBA4C; --paper: #FAF8F1; --mist: #F2EEDF; --line: #E4DDC4; --ink: #241F0C; --ink-60: #5C5330; } body.brand-polyvel-de { /* Kleurfamilie afgeleid van de door de klant aangeleverde #9F0C4C. */ --pri: #6F0835; --pri-700: #8C0B43; --pri-900: #4A0623; --on-pri-soft: #E2C1CF; --on-pri-muted: #D19EB4; --veil-strong: rgba(74,6,35,.94); --veil-mid: rgba(74,6,35,.86); --veil-soft: rgba(74,6,35,.58); --shadow-tint: 111,8,53; --accent: #9F0C4C; --accent-deep: #7B093B; --accent-ink: #6F0835; --accent-soft: #FAF0F4; --accent-ui: #9F0C4C; --accent-on-dark: #CF789E; --paper: #FAF7F8; --mist: #F4EBEF; --line: #E8D6DE; --ink: #28151D; --ink-60: #614250; } /* ---------- 1b. De drie merkkleuren (huisstijlhandboek 01 en 04) ---------- Deze zijn op ELKE site beschikbaar, maar worden uitsluitend gebruikt waar ze een merk aanduiden: merkwissel, merkfamilie-blokken en footer. Zo blijft de regel "één accentkleur per uiting" overeind — de kleur draagt hier merkbetekenis en is dus geen vrij decoratief accent. *-on-dark = lichtere variant voor gebruik op diepblauw (≥ 3:1, WCAG 1.4.11) *-ink = tekstkleur die op de volvlakke merkkleur voldoende contrast geeft *-soft = zeer lichte tint voor rustige vlakken */ :root { --bc-polyvel: #7A99A2; --bc-polyvel-on-dark: #A2B8BE; --bc-polyvel-ink: #1B282D; --bc-polyvel-soft: #EEF3F5; --bc-polyarn: #BB9D00; --bc-polyarn-on-dark: #CFBA4C; --bc-polyarn-ink: #2B2400; --bc-polyarn-soft: #FAF5DF; --bc-polyvel-de: #9F0C4C; --bc-polyvel-de-on-dark: #CF789E; --bc-polyvel-de-ink: #FFFFFF; --bc-polyvel-de-soft: #FAF0F4; } /* ---------- 2. Reset & basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--white); overflow-x: hidden; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; border: 0; } /* is van zichzelf inline; als blok voorkomt het een lege regelhoogte boven of onder de afbeelding (zichtbaar als dunne streep in kaarten). */ picture { display: block; font-size: 0; line-height: 0; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--pri); margin: 0 0 var(--s2); font-weight: 700; letter-spacing: -.01em; } h1 { font-size: clamp(2.125rem, 1.3rem + 3.3vw, 3.375rem); line-height: 1.1; } h2 { font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2rem); line-height: 1.2; font-weight: 600; } h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem); line-height: 1.3; font-weight: 600; } h4 { font-size: 1.0625rem; font-weight: 600; } p { margin: 0 0 var(--s2); max-width: var(--measure); } /* Kop krijgt lucht wanneer hij direct op eerdere inhoud volgt — anders plakt een tussenkop tegen de onderrand van een tabel, lijst of alinea erboven. De kicker hoort juist strak boven zijn kop te blijven staan. */ p + h2, ul + h2, ol + h2, dl + h2, address + h2, .table-scroll + h2, .grid + h2, p + h3, ul + h3, ol + h3, dl + h3, address + h3, .table-scroll + h3 { margin-top: var(--s4); } .kicker + h1, .kicker + h2, .kicker + h3 { margin-top: 0; } .card p + h3, .card__body p + h3, .co-card p + h3, .feature p + h3 { margin-top: 0; } a { color: var(--pri); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-deep); } strong { font-weight: 600; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; } small { font-size: .875rem; } :focus-visible { outline: 3px solid var(--pri); outline-offset: 3px; border-radius: 4px; } body.brand-polyarn :focus-visible, body.brand-polyvel-de :focus-visible { outline-color: var(--pri); } .skip-link { position: absolute; left: var(--s2); top: -100px; z-index: 999; background: var(--pri); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top .15s var(--ease); } .skip-link:focus { top: var(--s2); color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. Layout ---------- */ .wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--s3); } @media (min-width: 768px) { .wrap { padding-inline: var(--s4); } } .section { padding-block: var(--s5); } .section--tight { padding-block: var(--s4); } .section--paper { background: var(--paper); } .section--mist { background: var(--mist); } .section--navy { background: var(--pri); color: var(--on-pri-soft); } .section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; } .section--navy a:not(.btn) { color: #fff; } /* knoppen houden hun eigen kleuren */ @media (min-width: 900px) { .section { padding-block: var(--s6); } } .grid { display: grid; gap: var(--s3); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } @media (min-width: 620px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } .stack > * + * { margin-top: var(--s2); } .lead { font-size: 1.1875rem; color: var(--ink-60); max-width: var(--measure); } .section--navy .lead { color: var(--on-pri-soft); } .center { text-align: center; margin-inline: auto; } .center p, .center .lead { margin-inline: auto; } .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s2); } .kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ui); flex: none; } .section--navy .kicker { color: var(--on-pri-muted); } .section--navy .kicker::before { background: var(--accent-on-dark); } /* ---------- 4. Knoppen ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; font-family: var(--font-head); font-size: 1rem; font-weight: 600; line-height: 1.2; border: 2px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--pri); color: #fff; border-color: var(--pri); } .btn--primary:hover { background: var(--pri-700); border-color: var(--pri-700); color: #fff; } .btn--ghost { background: transparent; color: var(--pri); border-color: var(--pri); } .btn--ghost:hover { background: var(--pri); color: #fff; } .btn--accent { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); } .btn--accent:hover { background: var(--pri); border-color: var(--pri); color: #fff; } .btn--onnavy { background: #fff; color: var(--pri); border-color: #fff; } .btn--onnavy:hover { background: transparent; color: #fff; border-color: #fff; } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn--outline-light:hover { background: #fff; color: var(--pri); border-color: #fff; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); } .arrow::after { content: "→"; font-size: 1.05em; line-height: 1; transition: transform .18s var(--ease); } .btn:hover .arrow::after, a:hover > .arrow::after { transform: translateX(3px); } /* ---------- 5. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .header-bar { display: flex; align-items: center; gap: var(--s2); min-height: 72px; } @media (min-width: 1240px) { .header-bar { min-height: 88px; } } .brand-logo { display: inline-flex; align-items: center; flex: none; margin-right: auto; } .brand-logo img { height: 34px; width: auto; } @media (min-width: 1240px) { .brand-logo img { height: 42px; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-head); font-size: .9375rem; font-weight: 600; color: var(--pri); cursor: pointer; } .nav-toggle:hover { border-color: var(--pri); } .nav-toggle .bars { position: relative; width: 18px; height: 2px; background: var(--pri); display: block; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--pri); transition: transform .2s var(--ease), opacity .2s var(--ease); } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); } @media (min-width: 1240px) { .nav-toggle { display: none; } } .site-nav ul { list-style: none; margin: 0; padding: 0; } /* Alleen de echte menu-items stylen — niet de knop of de merkwissel ernaast. */ .site-nav ul a { display: block; padding: 14px 2px; font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--pri); text-decoration: none; border-bottom: 1px solid var(--line); } .site-nav ul a[aria-current="page"] { color: var(--accent-ink); } .site-nav ul a:hover { color: var(--accent-deep); } @media (max-width: 1239px) { .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: var(--s2) var(--s3) var(--s3); max-height: calc(100dvh - 72px); overflow-y: auto; } .site-nav.is-open { display: block; } .site-nav .nav-cta { margin-top: var(--s2); } .site-nav .nav-cta .btn { width: 100%; } } @media (min-width: 1240px) { .site-nav { display: flex; align-items: center; gap: var(--s3); } .site-nav ul { display: flex; align-items: center; gap: var(--s3); } .site-nav ul a { padding: 6px 0; border-bottom: 2px solid transparent; font-size: .9375rem; } .site-nav ul a[aria-current="page"] { border-bottom-color: var(--accent-ui); } .site-nav ul a:hover { border-bottom-color: var(--accent-ui); } } /* Utility-balk boven de header: contact links, merkwissel rechts. */ .topbar { background: var(--pri); color: var(--on-pri-soft); font-size: .8125rem; } .topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--s3); padding-block: 10px; } .topbar a:not(.btn) { color: #fff; text-decoration: none; font-weight: 600; } .topbar a:hover { text-decoration: underline; } .topbar .topbar-links { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } /* Merkwissel — zelfde vorm als de primaire knop, met per merk een eigen kleurstip zodat de drie huisstijlkleuren op elke site herkenbaar zijn. */ .brand-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .brand-switch a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius); font-family: var(--font-head); font-size: .8125rem; font-weight: 600; line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .brand-switch a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dot, #fff); } .brand-switch a:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; text-decoration: none; } .brand-switch a[aria-current="true"] { background: #fff; border-color: #fff; color: var(--pri); } .brand-switch a[aria-current="true"]:hover { background: #fff; color: var(--pri); } .brand-switch a[aria-current="true"]::before { background: var(--dot-on-light, var(--pri)); } .topbar :focus-visible { outline-color: #fff; } /* Merkstippen — op donkere ondergrond de lichtere variant, op wit de originele. */ .b-polyvel { --dot: var(--bc-polyvel-on-dark); --dot-on-light: var(--bc-polyvel); } /* Goud haalt op wit maar 2,65:1; voor de kleine stip de verdiepte variant. */ .b-polyarn { --dot: var(--bc-polyarn-on-dark); --dot-on-light: #9A8000; } .b-polyvel-de { --dot: var(--bc-polyvel-de-on-dark); --dot-on-light: var(--bc-polyvel-de); } /* ---------- Merkfamilie-kaart (huisstijlhandboek 01) ---------- */ .co-grid { display: grid; gap: var(--s3); } @media (min-width: 700px) { .co-grid { grid-template-columns: repeat(3, 1fr); } } .co-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--radius); overflow: clip; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .co-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--co-color, var(--line)), var(--shadow-md); } .co-card__bar { background: var(--co-color); color: var(--co-ink); padding: 14px var(--s3); font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; } .co-card__body { padding: var(--s3); display: flex; flex-direction: column; flex: 1; } .co-card__body h3 { margin-bottom: 8px; } .co-card__body p { color: var(--ink-60); font-size: 1rem; margin-bottom: var(--s2); } .co-card__body > :last-child { margin-top: auto; margin-bottom: 0; } .co-card__here { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--ink-60); display: inline-flex; align-items: center; gap: 8px; } .co-card__here::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--co-color); } .co-card__link { font-family: var(--font-head); font-weight: 600; text-decoration: none; color: var(--pri); display: inline-flex; gap: 8px; align-items: center; } .co-card__link:hover { color: var(--accent-deep); } .co-polyvel { --co-color: var(--bc-polyvel); --co-ink: var(--bc-polyvel-ink); } .co-polyarn { --co-color: var(--bc-polyarn); --co-ink: var(--bc-polyarn-ink); } .co-polyvel-de { --co-color: var(--bc-polyvel-de); --co-ink: var(--bc-polyvel-de-ink); } /* ---------- 6. Hero ---------- */ .hero { position: relative; background: var(--pri); color: #fff; overflow: hidden; } .hero__media { position: absolute; inset: 0; overflow: hidden; } .hero__media picture { display: block; width: 100%; height: 100%; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil-strong) 0%, var(--veil-mid) 55%, var(--veil-strong) 100%); } @media (min-width: 900px) { .hero__media::after { background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-mid) 46%, var(--veil-soft) 100%); } } .hero__inner { position: relative; padding-block: var(--s5); } @media (min-width: 900px) { .hero__inner { padding-block: 104px; max-width: 760px; } } .hero h1 { color: #fff; margin-bottom: var(--s2); } .hero .lead { color: var(--on-pri-soft); font-size: 1.1875rem; } .hero .kicker { color: var(--on-pri-muted); } .hero .btn-row { margin-top: var(--s3); } .hero__points { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px var(--s3); font-size: .9375rem; color: var(--on-pri-soft); } .hero__points li { display: flex; align-items: center; gap: 10px; } .hero__points li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-on-dark); flex: none; } .hero--compact .hero__inner { padding-block: var(--s4); } @media (min-width: 900px) { .hero--compact .hero__inner { padding-block: var(--s5); } } /* Breadcrumb */ .crumbs { font-size: .875rem; color: var(--on-pri-muted); margin-bottom: var(--s2); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; } .crumbs a { color: var(--on-pri-soft); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* ---------- 7. Cards ---------- */ .card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .card h3 { margin-bottom: 10px; } .card p { margin-bottom: var(--s2); color: var(--ink-60); font-size: 1rem; } .card > :last-child { margin-top: auto; margin-bottom: 0; } .card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-ui); } .card__tag { align-self: flex-start; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; } .card__link { font-family: var(--font-head); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; color: var(--pri); } .card__link:hover { color: var(--accent-deep); } /* Beeldkaart: rand als inset-schaduw i.p.v. border, zodat er geen naad ontstaat tussen kaartrand en afbeelding. */ .card--media { padding: 0; overflow: clip; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); } .card--media:hover { border-color: transparent; } .card--media.card--link:hover { box-shadow: inset 0 0 0 1px var(--accent-ui), var(--shadow-md); } .card--media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; display: block; } .card--media .card__body { padding: var(--s3); display: flex; flex-direction: column; flex: 1; } .card--media .card__body > :last-child { margin-top: auto; } .feature { display: flex; gap: var(--s2); align-items: flex-start; } .feature__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-ui); flex: none; margin-top: 7px; } .feature h3 { font-size: 1.0625rem; margin-bottom: 6px; } .feature p { margin: 0; color: var(--ink-60); font-size: 1rem; } /* Lijsten */ .ticks { list-style: none; margin: 0 0 var(--s2); padding: 0; max-width: var(--measure); } .ticks li { position: relative; padding-left: 30px; margin-bottom: 10px; } .ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-ui); } .section--navy .ticks li::before { background: var(--accent-on-dark); } .dl-specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .dl-specs > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); } @media (min-width: 620px) { .dl-specs > div { grid-template-columns: 250px 1fr; gap: var(--s2); align-items: baseline; } } .dl-specs dt { font-family: var(--font-head); font-weight: 600; color: var(--pri); font-size: .9375rem; } .dl-specs dd { margin: 0; color: var(--ink-60); } /* Tabel — scrollbaar op mobiel */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 520px; background: #fff; } table.data caption { text-align: left; padding: var(--s2) var(--s3) 0; color: var(--ink-60); font-size: .9375rem; } table.data th, table.data td { padding: 14px var(--s3); text-align: left; border-bottom: 1px solid var(--line); } table.data thead th { background: var(--pri); color: #fff; font-family: var(--font-head); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:nth-child(even) { background: var(--paper); } /* Downloadkaart */ .dl-card { display: flex; gap: var(--s2); align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); text-decoration: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .dl-card:hover { border-color: var(--accent-ui); box-shadow: var(--shadow-md); transform: translateY(-2px); } .dl-card__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-head); font-size: .75rem; font-weight: 700; } .dl-card__title { font-family: var(--font-head); font-weight: 600; color: var(--pri); margin: 0 0 4px; font-size: 1.0625rem; } .dl-card__meta { margin: 0; font-size: .875rem; color: var(--ink-60); } /* Certificaatbadge */ .badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 10px; font-family: var(--font-head); font-size: .875rem; font-weight: 600; color: var(--pri); } .badge::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-ui); } .section--navy .badge { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; } /* Statistiek */ .stat { text-align: left; } .stat__num { font-family: var(--font-head); font-size: clamp(2rem,1.4rem+2.2vw,2.75rem); font-weight: 700; color: var(--pri); line-height: 1; display: block; } .section--navy .stat__num { color: #fff; } .stat__label { color: var(--ink-60); font-size: .9375rem; margin-top: 8px; display: block; } .section--navy .stat__label { color: var(--on-pri-soft); } /* Split-blok met beeld */ .split { display: grid; gap: var(--s4); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s5); } .split--flip .split__media { order: 2; } } .split__media { border-radius: var(--radius); overflow: clip; line-height: 0; } .split__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } /* CTA-band */ .cta-band { background: var(--pri); color: #fff; border-radius: var(--radius); padding: var(--s4); } @media (min-width: 900px) { .cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); } } .cta-band h2 { color: #fff; margin-bottom: 8px; } .cta-band p { color: var(--on-pri-soft); margin: 0; } .cta-band .btn-row { margin-top: var(--s3); } @media (min-width: 900px) { .cta-band .btn-row { margin-top: 0; flex: none; } } /* Accordion */ .acc { border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); background: none; border: 0; padding: 20px 0; cursor: pointer; text-align: left; font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; color: var(--pri); min-height: 48px; } .acc__btn:hover { color: var(--accent-deep); } .acc__icon { flex: none; width: 24px; height: 24px; position: relative; } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 4px; top: 11px; width: 16px; height: 2px; background: currentColor; transition: transform .2s var(--ease); } .acc__icon::after { transform: rotate(90deg); } .acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0); } .acc__panel { padding: 0 0 var(--s3); } .acc__panel[hidden] { display: none; } /* ---------- 8. Formulieren ---------- */ .form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow-sm); } @media (min-width: 700px) { .form { padding: var(--s4); } } .field { margin-bottom: var(--s3); } .field label, .fieldset-legend { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--pri); margin-bottom: 8px; } .field .hint { display: block; font-size: .875rem; color: var(--ink-60); font-weight: 400; margin-top: -4px; margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--slate); border-radius: var(--radius-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .field textarea { min-height: 150px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pri); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(var(--shadow-tint),.18); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B3261E; } .field .error { display: none; margin-top: 6px; font-size: .875rem; color: #B3261E; font-weight: 600; } .field .error::before { content: "! "; } .field.has-error .error { display: block; } .grid-fields { display: grid; gap: 0 var(--s3); } @media (min-width: 620px) { .grid-fields { grid-template-columns: 1fr 1fr; } .grid-fields .span-2 { grid-column: 1 / -1; } } fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); } .choice-row { display: grid; gap: 12px; } @media (min-width: 620px) { .choice-row { grid-template-columns: 1fr 1fr; } } .choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .15s var(--ease), background-color .15s var(--ease); } .choice:hover { border-color: var(--pri); } .choice input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: #002E54; } .choice span { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--pri); } .choice small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--ink-60); margin-top: 2px; } .choice:has(input:checked) { border-color: var(--pri); background: #fff; box-shadow: 0 0 0 1px var(--pri) inset; } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--ink-60); } .consent input { width: 20px; height: 20px; min-height: 0; margin: 3px 0 0; flex: none; accent-color: #002E54; } .form-status { margin-top: var(--s3); padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-ui); color: var(--pri); font-weight: 600; } .form-status[hidden] { display: none; } .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ---------- 9. Footer ---------- */ .site-footer { background: var(--pri); color: var(--on-pri-soft); padding-block: var(--s5) var(--s3); margin-top: 0; } .site-footer h2, .site-footer h3 { color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s2); font-weight: 600; } .site-footer a:not(.btn) { color: var(--on-pri-soft); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; gap: var(--s4); } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 10px; } .site-footer address { font-style: normal; line-height: 1.7; } /* Wit logo op de diepblauwe footer — het kleurenlogo is daar onleesbaar. */ .footer-logo { display: block; margin-bottom: var(--s3); } .footer-logo img { height: 46px; width: auto; } .footer-legal { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s4); padding-top: var(--s3); display: flex; flex-wrap: wrap; gap: 10px var(--s3); justify-content: space-between; font-size: .875rem; } .footer-legal ul { display: flex; flex-wrap: wrap; gap: var(--s2); } .footer-legal li { margin: 0; } .family-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s2); } .family-links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-head); font-size: .8125rem; font-weight: 600; } .family-links a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dot, #fff); } .family-links a:hover { background: #fff; color: var(--pri); text-decoration: none; border-color: #fff; } .family-links a:hover::before { background: var(--dot-on-light, var(--pri)); } /* Op een lichte achtergrond (contactpagina) de originele merkkleuren tonen. */ .family-links--light a { border-color: var(--line); color: var(--pri); } .family-links--light a::before { background: var(--dot-on-light, var(--pri)); } .family-links--light a:hover { background: var(--paper); border-color: var(--pri); color: var(--pri); } /* ---------- 10. Utilities ---------- */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); } .muted { color: var(--ink-60); } .nowrap { white-space: nowrap; } .full { width: 100%; } /* Zachte inkomst — respecteert reduced motion via de globale regel */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- 11. Print ---------- */ @media print { .site-header, .topbar, .site-footer, .btn-row, .nav-toggle, .hero__media { display: none !important; } body { font-size: 11pt; color: #000; } .hero { background: #fff; color: #000; } .hero h1, .hero .lead { color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } }