/* ==========================================================================
Fonts (self-hosted, see assets/fonts/)
Poppins for headings and buttons, DM Sans for running text.
========================================================================== */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/poppins-800-latin.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/dm-sans-italic-latin.woff2") format("woff2");
}
/* ==========================================================================
Design tokens
Change colours, fonts and spacing here only; everything else uses these.
========================================================================== */
:root {
color-scheme: light;
/* Brand blue, taken from the logo and the approved page designs */
--color-brand: #24baf7;
--color-brand-dark: #0f9fdc;
--color-brand-fg: #ffffff;
--color-brand-5: #f0fafe; /* very light tint, for soft backgrounds */
--color-brand-10: #e0f4fd; /* light tint, for hover states */
--color-brand-20: rgba(36, 186, 247, .2); /* translucent brand, for thin lines */
--color-brand-35: rgba(36, 186, 247, .35);
--color-brand-45: rgba(36, 186, 247, .45); /* translucent brand, for card borders */
--color-focus: #075b80; /* focus ring: at least 3:1 against white and against the brand blue (WCAG 1.4.11) */
--color-link: #0079ad; /* links and text in brand blue on white or light blue (4.5:1; the brand blue itself is 2.2:1) */
--color-brand-ink: #075b80; /* dark brand blue for small text on light blue */
--color-error: #b42318; /* form errors only */
--color-ink: #1d1f22; /* headings and dark surfaces */
--color-text: #1d1f22;
--color-muted: #5d6f88; /* at least 4.5:1 on white, the surface and brand-5/10 */
--color-bg: #ffffff;
--color-surface: #f0faff; /* light blue section background */
--color-border: #e2e8f0;
--color-footer-bg: #f9fafc; /* lichtgrijs, footer komt los van witte en lichtblauwe secties */
--color-footer-border: #dde4ec;
--color-footer-text: #4d6079; /* 5,7:1 op de footer-achtergrond */
/* Kept for older markup; map onto the brand colours */
--color-primary: var(--color-brand);
--color-primary-dark: var(--color-brand-dark);
--color-accent: var(--color-brand);
--color-bg-alt: var(--color-surface);
--font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--space-xs: 0.5rem;
--space-s: 1rem;
--space-m: 2rem;
--space-l: 4rem;
--space-xl: 6rem;
--container: 80rem;
--radius: 0.375rem;
--header-height: 5rem;
}
/* Base ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-s); color: var(--color-ink); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-s); }
a { color: var(--color-brand-dark); }
a:hover { color: var(--color-brand); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip-link {
position: absolute;
left: var(--space-s);
top: -100%;
padding: var(--space-xs) var(--space-s);
background: var(--color-bg);
z-index: 100;
}
.skip-link:focus { top: var(--space-s); }
/* Layout -------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--space-s), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-l); }
.section--alt { background: var(--color-surface); }
/* Components ---------------------------------------------------------------- */
/* Filled button (design 1, also used by the jobs site, which loads this file): Poppins 600 16px,
15/24 padding, 12px corners, 2px brand border, no shadow, white text. Hover only darkens the
colours (no movement, no shadow). Keyboard focus shows the ring; a mouse click leaves nothing
behind. An svg inside is the 16px chevron, 2px below the text baseline.
The class is written twice (.button.button) so page rules such as ".page-dv a { color: inherit }"
cannot override it, while ".site-header .button" and other page rules that come later still can. */
.button.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 24px;
border: 2px solid var(--color-brand);
border-radius: 12px;
background: var(--color-brand);
color: var(--color-brand-fg);
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
line-height: 1.3;
text-decoration: none;
box-shadow: none;
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
.button.button:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-brand-fg); }
.button.button:focus { outline: none; }
.button.button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.button.button svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Sending (form buttons, set by main.js): darker, not clickable, a white spinner 24px from the left
and the text moves right to make room. */
.button.button[aria-busy="true"] { padding-left: 48px; background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-brand-fg); cursor: progress; pointer-events: none; }
.button.button[aria-busy="true"]::before { content: ""; position: absolute; left: 24px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.button[aria-busy="true"]::before { animation-duration: 1.5s; } }
/* Submit buttons in forms fill the width on phones */
@media (max-width: 559.98px) { form .button.button[type="submit"] { width: 100%; } }
/* Design 2, dark outline: the same box as the filled button, a 2px ink border, ink text; fills with ink on hover. */
.button--ink.button--ink { border-color: var(--color-ink); background: transparent; color: var(--color-ink); }
.button--ink.button--ink:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
/* Design 3, blue outline: the same box, 2px border and text in the dark link blue (4.5:1 on white),
transparent background; fills with that blue and white text on hover. */
.button--outline.button--outline { background: transparent; border-color: var(--color-link); color: var(--color-link); }
.button--outline.button--outline:hover { background: var(--color-link); border-color: var(--color-link); color: var(--color-brand-fg); }
/* Design 4, white outline on a blue surface: the same box,
2px white border, transparent background, white text; fills white with dark blue text on hover. */
.button--white.button--white { background: transparent; border-color: #fff; color: #fff; }
.button--white.button--white:hover { background: #fff; border-color: #fff; color: var(--color-brand-ink); }
/* Design 5, text link with chevron: Poppins 600 16px in the dark
link blue, no underline, 16px chevron 8px to the right and 2px lower; hover only darkens the colour. */
.textlink.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--color-link); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none; transition: color .15s; }
.textlink.textlink:hover { color: var(--color-brand-ink); }
.textlink.textlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
/* Clickable card (design: the hub cards on /freelancers/): a brand border and the light brand-10
background on hover, no movement and no shadow; a .textlink inside turns dark. The rules live
with each page (.o5-c, .hp-route, .bpf-hubcard, .door, .more a) and kennisbank.css (a.card.art). */
.textlink.textlink svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: none; transform: none; opacity: 1; }
/* Breadcrumb: the same design as on jobs.bright-professionals.nl (vacatures.css, section
Breadcrumbs), so both sites look like one. Body font 14px, links in link blue and semibold,
the current page (a span) in muted, 12px chevrons as separators. Pages use .crumb or a page
prefix (.ct-crumb, .pv-crumb, ...); the page sections below only add position (margin, centring).
The "#_" in :is() gives these rules the weight of an id, so page rules such as ".page-cp .hero p"
or ".page-dv a { color: inherit }" cannot change the breadcrumb. */
:is(#_, .crumb, .ct-crumb, .pv-crumb, .ob-crumb, .wb-crumb, .os-crumb) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
max-width: none;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
text-transform: none;
color: var(--color-muted);
}
:is(#_, .crumb, .ct-crumb, .pv-crumb, .ob-crumb, .wb-crumb, .os-crumb) a { color: var(--color-link); font-weight: 600; text-decoration: none; }
:is(#_, .crumb, .ct-crumb, .pv-crumb, .ob-crumb, .wb-crumb, .os-crumb) a:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
:is(#_, .crumb, .ct-crumb, .pv-crumb, .ob-crumb, .wb-crumb, .os-crumb) span { color: var(--color-muted); font-weight: 400; }
:is(#_, .crumb, .ct-crumb, .pv-crumb, .ob-crumb, .wb-crumb, .os-crumb) svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--color-muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Grid: columns of equal cards, one column on phones */
.grid { display: grid; gap: var(--space-m); }
@media (min-width: 48rem) {
.grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
/* Header -------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
.site-header a { color: inherit; text-decoration: none; }
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
min-height: var(--header-height);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 8.5rem; height: auto; }
/* Header buttons: the normal .button and .button--outline (dark blue outline), but compact: 6 px rounding, 14 px text */
.site-header .button.button { padding: 0.625rem 1.25rem; border-radius: 6px; font-size: 0.875rem; }
/* Menu button, only on small screens and only when JS is running */
.nav-toggle {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border: 2px solid var(--color-brand);
border-radius: 6px;
background: transparent;
color: var(--color-ink);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.js .nav-toggle { display: inline-flex; }
/* Navigation: full-width panel on phones, one row on wide screens */
.site-nav { flex-basis: 100%; border-top: 1px solid var(--color-border); }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; } /* scrolls on short phones */
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li + li { border-top: 1px solid var(--color-border); }
.site-nav a { display: block; padding: 0.875rem 0; font-size: 1rem; font-weight: 500; }
.site-nav a:hover { color: var(--color-brand-dark); }
.site-nav a[aria-current="page"], .site-nav .is-active > a { color: var(--color-brand-dark); }
/* Submenus (Voor Overheden, Over Bright): indented list on phones, dropdown on desktop */
.has-sub > a { display: flex; align-items: center; gap: 0.375rem; }
.has-sub > a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.site-nav__sub { padding: 0 0 0.5rem 1rem; }
.site-nav__sub a { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 400; color: var(--color-muted); }
.site-nav__sub .ico { display: none; width: 26px; height: 26px; flex: none; margin-top: 0.125rem; fill: none; stroke: var(--color-brand-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-nav__sub b { font-weight: inherit; }
.site-nav__sub small { display: none; }
/* Buttons in the menu */
.site-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding-block: var(--space-s) 1.25rem; }
.site-nav__actions .button.button { display: flex; padding: 0.75rem 1rem; font-size: 0.9375rem; }
@media (min-width: 72rem) {
.js .nav-toggle, .nav-toggle { display: none; }
.site-nav, .js .site-nav { display: flex; align-items: center; gap: 1.75rem; flex-basis: auto; border-top: 0; }
.site-nav > ul { display: flex; align-items: center; gap: 1.75rem; }
.site-nav > ul > li + li { border-top: 0; }
.site-nav > ul > li { position: relative; display: flex; align-items: center; height: var(--header-height); }
.site-nav a { padding: 0; font-size: 0.9375rem; }
.has-sub:hover > a svg, .has-sub:focus-within > a svg { transform: rotate(180deg); }
.site-nav__sub {
position: absolute;
top: 100%;
left: -1.25rem;
width: 24rem;
margin: 0;
padding: 0.625rem;
background: var(--color-bg);
box-shadow: 0 18px 44px rgba(20, 40, 70, .16);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s, transform .15s, visibility .15s;
}
.site-nav__sub--small { width: 20rem; }
.has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
.site-nav__sub a { padding: 0.75rem 1rem; color: var(--color-ink); }
.site-nav__sub a:hover { background: var(--color-brand-5); color: var(--color-ink); }
.site-nav__sub .ico { display: block; }
.site-nav__sub b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.site-nav__sub small { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: var(--color-muted); }
.site-nav__actions { display: flex; gap: 0.75rem; margin-left: 0.5rem; padding-block: 0; }
.site-nav__actions .button.button { display: inline-flex; padding: 0.625rem 1.25rem; font-size: 0.875rem; }
}
/* Footer -------------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--color-footer-border);
background: var(--color-footer-bg);
color: var(--color-footer-text);
font-size: 0.9375rem;
}
.site-footer__grid { display: grid; gap: var(--space-m); padding-block: var(--space-l) var(--space-m); }
@media (min-width: 40rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer__logo img { width: 8.5rem; height: auto; }
.site-footer__about { margin-top: var(--space-s); max-width: 22rem; }
.site-footer h2 { font-size: 1rem; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-brand-dark); text-decoration: underline; }
.site-footer address { font-style: normal; }
/* Keurmerkenstrook */
.site-footer__keur { border-top: 1px solid var(--color-footer-border); }
.site-footer__keur .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.5rem; padding-block: 1.125rem; }
.site-footer__keur b { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--color-ink); }
.site-footer__keur span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-ink); }
.site-footer__keur img { width: 18px; height: auto; flex: none; }
.site-footer__bottom { border-top: 1px solid var(--color-footer-border); font-size: 0.875rem; }
.site-footer__bottom .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-xs) var(--space-m);
padding-block: var(--space-s);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.site-footer__bottom p { margin: 0; }
.site-footer__pipe { margin-inline: 10px; color: #b4c0cf; }
/* ==========================================================================
Page: Home (/)
Taken over from the approved design (homepage_v55); scoped to .page-home
so it cannot clash with the shared styles above.
========================================================================== */
.page-home {
--hp-brand-dark: #0094ce;
--hp-brand-5: color-mix(in oklab, var(--color-brand) 9%, white);
--hp-link: #0079ad;
font-size: 1rem;
line-height: 1.6;
}
.page-home h1, .page-home h2, .page-home h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.page-home p { margin: 0; }
.page-home ul { margin: 0; padding: 0; list-style: none; }
.page-home a { color: inherit; text-decoration: none; }
.page-home .wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.page-home .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-home .ico { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--hp-brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-home .chev { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; transition: transform .18s, opacity .18s; }
.page-home .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 32px; }
.page-home a:focus-visible, .page-home input:focus-visible, .page-home select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Secties, gedeeld */
.page-home .hp-sec { padding-block: 52px; }
.page-home .hp-licht { background: var(--color-surface); }
.page-home .hp-h2 { margin-top: 10px; font: 600 1.75rem/1.2 var(--font-heading); letter-spacing: -0.01em; }
.page-home .hp-lead { margin-top: 14px; max-width: 42rem; font-size: 1.08rem; color: var(--color-muted); }
/* "Ik zoek een professional" is .textlink (Components) */
/* Illustratie als achtergrond van een sectie */
.page-home .hp-mk, .page-home .hp-ovh { position: relative; overflow: hidden; isolation: isolate; }
.page-home .hp-mk > svg, .page-home .hp-ovh > svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.page-home .hp-ovh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(240, 250, 255, .8); }
/* Hero */
.page-home .hero { --fade: #f0faff; --mfade: rgba(240, 250, 255, .82); position: relative; isolation: isolate; background: var(--color-bg); }
.page-home .hero-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #f0faff; }
.page-home .hero-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.page-home .hero-art::after { content: ""; position: absolute; inset: 0; background: var(--mfade); }
.page-home .hero-in { padding-block: 56px 48px; }
.page-home .hero h1 { font-size: 2.3rem; line-height: 1.14; }
.page-home .hero h1 span { color: var(--color-brand); }
.page-home .br-d { display: none; }
.page-home .sub2 { max-width: 560px; margin-top: 18px; font-size: 1.08rem; line-height: 1.55; color: var(--color-ink); opacity: .84; }
.page-home .hero .btns { margin-top: 26px; gap: 12px 20px; }
/* Zoekbalk naar de vacaturebank (/jobs) */
.page-home .searchbar { display: grid; gap: 0; margin-top: 40px; padding: 8px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 22px; background: rgba(255, 255, 255, .5); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 20px 50px rgba(0, 110, 165, .18); }
.page-home .searchbar label { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .95); }
.page-home .searchbar input, .page-home .searchbar select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 1rem var(--font-body); color: var(--color-ink); }
.page-home .searchbar input::placeholder { color: #5b6b80; }
.page-home .searchbar label:focus-within { outline: 1px solid var(--color-focus); outline-offset: -1px; border-radius: 14px; }
.page-home .searchbar .si { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--hp-brand-dark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.page-home .searchbar .button { min-height: 60px; margin-top: 8px; padding-inline: 34px; white-space: nowrap; }
.page-home .searchbar .button .si { stroke: currentColor; }
/* Waarom Bright */
.page-home .hp-feiten { display: grid; gap: 28px; margin-top: 34px; }
.page-home .hp-feit { display: flex; align-items: flex-start; gap: 16px; }
.page-home .hp-feit b { display: block; font: 600 1.08rem/1.3 var(--font-heading); }
.page-home .hp-feit p { margin-top: 5px; color: var(--color-muted); }
/* Maak kennis */
.page-home .hp-maak { display: grid; align-items: center; gap: 28px; }
.page-home .hp-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 24px; background: linear-gradient(150deg, #d9f1fe, #b4e4fb); box-shadow: 0 18px 44px rgba(0, 110, 165, .14); }
.page-home .hp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .hp-maak .hp-lead + .hp-lead { margin-top: 12px; }
/* Bright in cijfers */
.page-home .hp-cy-rij { display: grid; gap: 20px; margin-top: 30px; }
.page-home .hp-cij { padding: 26px 28px 30px; border: 1px solid var(--color-brand-45); border-radius: 24px; background: var(--hp-brand-5); }
.page-home .hp-cij .ico { margin-bottom: 23px; } /* the design has the icon inline, which adds 7px */
.page-home .hp-cij b { display: block; font: 600 2.6rem/1.05 var(--font-heading); letter-spacing: -0.02em; color: var(--hp-link); white-space: nowrap; }
.page-home .hp-cij b i { margin-left: 0.04em; font-style: normal; }
.page-home .hp-cij span { display: block; margin-top: 10px; font-size: 1.05rem; font-weight: 500; color: var(--color-ink); }
/* Voor overheden */
.page-home .o5 { display: grid; gap: 28px; }
.page-home .o5 .hp-h2 { margin-top: 8px; }
.page-home .o5-sub { margin: 0 0 16px 4px; font: 600 1rem/1.3 var(--font-heading); color: var(--hp-link); }
.page-home .o5-r { display: grid; gap: 20px; }
.page-home .o5-c { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--color-brand-45); border-radius: 24px; background: var(--hp-brand-5); color: var(--color-ink); transition: border-color .15s, background-color .15s; }
.page-home .o5-c > div { flex: 1; }
.page-home .o5-c b { display: block; font: 600 1.15rem/1.3 var(--font-heading); }
.page-home .o5-c span { display: block; margin-top: 2px; color: var(--color-muted); }
.page-home .o5-c .chev { stroke: var(--hp-link); }
.page-home .o5-c:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
/* Freelancer of in dienst */
.page-home .hp-grid2 { display: grid; gap: 20px; margin-top: 32px; }
.page-home .hp-route { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px; border: 1px solid var(--color-brand-45); border-radius: 24px; background: var(--hp-brand-5); color: var(--color-ink); transition: border-color .15s, background-color .15s; }
.page-home .hp-route:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
.page-home .hp-route h3 { margin-top: 16px; font: 600 1.45rem/1.25 var(--font-heading); }
.page-home .hp-route p { margin: 8px 0 22px; color: var(--color-muted); }
.page-home .hp-rl { align-self: stretch; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-brand-45); } /* + .textlink */
.page-home .hp-route:hover .hp-rl { color: var(--color-brand-ink); }
/* Partners (logostrook, schuift met main.js) */
.page-home .hp-logos { text-align: center; }
.page-home .hp-logos .hp-h2 { font-size: 1.125rem; }
.page-home .hp-marq { margin-top: 84px; overflow: hidden; background: var(--color-surface); cursor: grab; touch-action: pan-y; user-select: none; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.page-home .hp-marq.pakt { cursor: grabbing; }
.page-home .hp-track { display: flex; align-items: center; width: max-content; will-change: transform; mix-blend-mode: multiply; }
.page-home .hp-track span { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 108px; margin-right: 96px; }
.page-home .hp-track img { width: auto; height: auto; max-width: 240px; max-height: 96px; object-fit: contain; opacity: .8; filter: grayscale(1); pointer-events: none; }
/* Without JS the strip does not move, so let it wrap instead of running off screen */
html:not(.js) .page-home .hp-track { flex-wrap: wrap; justify-content: center; width: auto; }
@media (min-width: 900px) {
.page-home .hp-sec { padding-block: 72px; }
.page-home .hp-h2 { font-size: 2.25rem; }
.page-home .hero-art::after { background: linear-gradient(90deg, var(--fade) 0%, var(--fade) 30%, transparent 58%); }
.page-home .hero-in { padding-block: 78px 64px; }
.page-home .hero h1 { font-size: 3.4rem; }
.page-home .br-d { display: inline; }
.page-home .sub2 { margin-top: 22px; font-size: 1.22rem; }
.page-home .hero .btns { margin-top: 32px; }
.page-home .searchbar { grid-template-columns: 1.3fr 1.15fr auto auto; max-width: 900px; margin: 60px auto 0; }
.page-home .searchbar label { min-height: 62px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .95); }
.page-home .searchbar label.sel { padding-right: 12px; border-right: 0; }
.page-home .searchbar .button { min-height: 62px; margin-top: 0; }
.page-home .hp-feiten { grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 44px; }
.page-home .hp-feit { flex-direction: column; gap: 14px; }
.page-home .hp-maak { grid-template-columns: 1fr 1.05fr; gap: 64px; }
.page-home .hp-cy-rij { grid-template-columns: repeat(3, 1fr); gap: 0 24px; margin-top: 40px; }
.page-home .hp-cij b { font-size: 3rem; }
.page-home .o5 { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 72px; }
.page-home .hp-ovh::after { background: linear-gradient(90deg, #f0faff 0%, #f0faff 40%, rgba(240, 250, 255, 0) 68%); }
.page-home .hp-grid2 { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.page-home .hp-route { padding: 36px; }
}
.page-home .nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.page-home * { transition: none !important; }
}
/* ==========================================================================
Page: Contact (/contact/)
From design 12-contact v15. Everything is scoped to .page-contact.
========================================================================== */
/* Resets weigh as one class, so they beat the base h1-h3 and p rules and later page classes win */
.page-contact :where(h1, h2, h3) { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-contact :where(p) { margin: 0; }
.page-contact :where(ul) { list-style: none; margin: 0; padding: 0; }
.ct-wrap { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.ct-section { padding-block: 72px; }
.ct-kicker { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-brand); }
.ct-h2 { margin-top: 12px; font-size: 1.75rem; }
.ct-muted { color: var(--color-muted); }
.ct-lead { margin-top: 16px; max-width: 46rem; font-size: 1.05rem; color: var(--color-muted); }
/* Buttons: .button and .button--outline from the Components section */
/* Text links: .textlink from the Components section */
/* Hero, with the Bright logo as a large faded watermark on wide screens */
.ct-hero { position: relative; overflow: hidden; background: var(--color-surface); }
.ct-hero__mark { display: none; }
.ct-hero__grid { padding-block: 64px; }
.ct-crumb { margin-bottom: 18px; } /* look: see Components, breadcrumb */
.ct-hero h1 { max-width: 36rem; font-size: 2.25rem; line-height: 1.1; }
.ct-hero h1 span { color: var(--color-brand); }
.ct-sub { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; color: var(--color-muted); }
.ct-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 32px; }
/* Form and "Wat je van ons kunt verwachten" */
.ct-form-grid { display: grid; gap: 28px; align-items: start; }
.ct-fcard { padding: 28px 20px; border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: #fff; }
.ct-fcard__intro { margin-top: 10px; }
.ct-form { display: grid; gap: 16px; margin-top: 28px; }
.ct-form label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; }
.ct-form input,
.ct-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 0; background: #fff; color: var(--color-ink); font: inherit; font-size: .95rem; }
.ct-form input:focus,
.ct-form textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-20); }
.ct-form textarea { min-height: 140px; resize: vertical; }
.ct-form__priv { font-size: .82rem; color: var(--color-muted); }
.ct-form__priv a { color: var(--color-brand-dark); text-decoration: underline; }
.ct-form__notice { padding: 12px 16px; border-left: 4px solid var(--color-brand); background: var(--color-brand-5); font-size: .92rem; }
.ct-form__notice[data-type="success"] { border-left-color: #1a7f37; background: #effaf2; }
.ct-form__notice[data-type="error"] { border-left-color: #b42318; background: #fef3f2; }
.ct-form__notice:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ct-form__error { margin: 6px 0 0; color: #b42318; font-size: .85rem; }
.ct-form [aria-invalid="true"] { border-color: #b42318; }
.ct-form button[disabled] { opacity: .6; cursor: progress; }
.ct-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* spam trap */
.ct-form .cf-turnstile { min-height: 65px; }
.ct-expect { padding: 32px; border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.ct-expect h2 { font-size: 1.2rem; }
.ct-gl { display: grid; gap: 12px; margin-top: 18px; }
.ct-gl li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; }
.ct-gl img { width: 16px; height: 16px; flex: none; margin-top: 5px; }
/* Office: map and address */
.ct-office { background: var(--color-surface); }
.ct-office__grid { display: grid; gap: 48px; align-items: center; }
.ct-map { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 24px; background: var(--color-brand-10) radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px) 0 0 / 22px 22px; }
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.ct-map__pin { position: absolute; z-index: 1; left: 50%; top: 50%; width: 40px; height: 40px; display: none; transform: translate(-50%, -100%); pointer-events: none; fill: var(--color-brand); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.ct-map.is-loaded .ct-map__pin { display: block; }
.ct-map__consent { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 10px 20px; padding: 16px 20px; text-align: center; font-size: .85rem; color: var(--color-muted); }
.ct-map__consent p { flex-basis: 100%; max-width: 26rem; }
.ct-map.is-loaded .ct-map__consent { display: none; }
.ct-address { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 0; font-style: normal; font-weight: 600; }
.ct-address svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--color-brand-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-hours { margin-top: 12px; font-size: .95rem; }
.ct-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--color-brand-20); }
.ct-route { margin-top: 24px; }
@media (min-width: 40rem) {
.ct-hero h1 { font-size: 3rem; }
.ct-fcard { padding: 40px; }
.ct-form { grid-template-columns: 1fr 1fr; }
.ct-form__full { grid-column: 1 / -1; }
}
@media (min-width: 56.25rem) {
.ct-hero__mark { position: absolute; z-index: 0; display: block; top: 50%; right: -470px; width: 900px; max-width: none; height: auto; opacity: .14; transform: translateY(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ct-h2--large { font-size: 2.25rem; }
.ct-form-grid { grid-template-columns: 1.15fr .85fr; gap: 48px; }
.ct-office__grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
Page: Detachering (/detachering/)
Taken over from the approved design; scoped to .page-dt so it cannot
clash with the shared styles above. Shared components come later.
========================================================================== */
.page-dt { font-size: 16px; }
.page-dt h1, .page-dt h2, .page-dt h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.page-dt p { margin: 0; }
.page-dt a { color: inherit; text-decoration: none; }
.page-dt .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.page-dt .wrap-md { max-width: 1100px; }
.page-dt .wrap-sm { max-width: 900px; }
.page-dt .section { padding-block: 64px; }
@media (min-width: 768px) {
.page-dt .section { padding-block: 96px; }
}
.page-dt .bg-surface { background: var(--color-surface); }
.page-dt .bg-white { background: var(--color-bg); }
.page-dt .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-dt .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-dt .h2 { font-size: 2.25rem; }
}
.page-dt .muted { color: var(--color-muted); }
.page-dt a:focus-visible, .page-dt summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.page-dt .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.page-dt .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.page-dt .icon-badge { display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-10); color: var(--color-brand); border-radius: 12px; }
.page-dt .icon-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-dt .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.page-dt .hero-dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px);
background-size: 22px 22px; }
.page-dt .hero-grid { position: relative; display: grid; gap: 32px; align-items: center; padding-block: 56px; }
@media (min-width: 768px) {
.page-dt .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; min-height: 520px; }
}
.page-dt .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
.page-dt .hero h1 { font-size: 3.75rem; }
}
.page-dt .hero h1 span { color: var(--color-brand); }
.page-dt .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.page-dt .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-dt .hero-illu { width: 100%; max-width: 440px; margin-inline: auto; display: block; height: auto; }
.page-dt .intro-cols { display: grid; gap: 24px; margin-top: 16px; }
@media (min-width: 768px) {
.page-dt .intro-cols { grid-template-columns: 1fr 1fr; }
}
.page-dt .steps { display: grid; gap: 48px 28px; margin-top: 52px; }
@media (min-width: 1024px) {
.page-dt .steps { grid-template-columns: repeat(6, 1fr); }
.page-dt .step { grid-column: span 2; }
}
.page-dt .step { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 34px 22px 22px; }
.page-dt .step-num { position: absolute; left: 24px; top: 0; transform: translateY(-50%);
display: flex; width: 38px; height: 38px; align-items: center; justify-content: center;
border-radius: 999px; background: var(--color-brand); color: #fff; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.page-dt .step .icon-badge { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 10px; }
.page-dt .step .icon-badge svg { width: 22px; height: 22px; }
.page-dt .step h3 { margin-top: 16px; font-size: 1.05rem; white-space: nowrap; }
.page-dt .step p { margin-top: 10px; font-size: 0.85rem; }
.page-dt .benefit-grid { display: grid; gap: 24px; margin-top: 40px; }
.page-dt .benefit-list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-brand-20); display: grid; gap: 7px; font-size: 0.875rem; color: var(--color-ink); }
.page-dt .benefit-list li { position: relative; padding-left: 26px; line-height: 1.4; }
.page-dt .benefit-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: var(--color-brand); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.page-dt .benefit-icon { width: 44px; height: 44px; }
.page-dt .benefit-icon svg { width: 22px; height: 22px; }
@media (min-width: 768px) {
.page-dt .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-dt .benefit { padding: 28px; display: flex; flex-direction: column; }
.page-dt .benefit .benefit-list { margin-top: auto; padding-top: 14px; }
.page-dt .benefit p { margin-bottom: 16px; }
.page-dt .benefit b { display: block; margin-top: 16px; font-family: var(--font-heading); font-weight: 600; }
.page-dt .benefit p { margin-top: 6px; font-size: 0.875rem; }
.page-dt .grid-2 { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 640px) {
.page-dt .grid-2 { grid-template-columns: 1fr 1fr; }
}
.page-dt .service { padding: 32px; }
.page-dt .service svg { width: 28px; height: 28px; fill: none; stroke: var(--color-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-dt .service h3 { margin-top: 20px; font-size: 1.125rem; }
.page-dt .service p { margin-top: 8px; font-size: 0.875rem; }
.page-dt .quotes { display: grid; gap: 48px; margin-top: 48px; }
@media (min-width: 768px) {
.page-dt .quotes { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.page-dt .quote { text-align: center; margin: 0; }
.page-dt .quote-line { width: 130px; height: 1px; margin-inline: auto; background: var(--color-border); }
.page-dt .quote p { margin-top: 28px; font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--color-brand); }
.page-dt .quote footer { margin-top: 20px; font-size: 0.875rem; font-style: italic; color: var(--color-muted); }
.page-dt .quote footer span { display: block; }
.page-dt table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
.page-dt th, .page-dt td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.page-dt tr:last-child td { border-bottom: 0; }
.page-dt th { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; background: var(--color-brand-5); }
.page-dt th:first-child, .page-dt td:first-child { font-weight: 600; width: 22%; }
.page-dt td { color: var(--color-muted); }
.page-dt td:first-child { color: var(--color-ink); }
.page-dt .faq { margin-top: 40px; }
.page-dt details { border-bottom: 1px solid var(--color-border); }
.page-dt summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.page-dt summary::-webkit-details-marker { display: none; }
.page-dt summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-muted); stroke-width: 2; transition: transform .2s; }
.page-dt details[open] summary svg { transform: rotate(180deg); }
.page-dt details p { padding: 0 0 16px; font-size: 0.875rem; max-width: 65ch; }
.page-dt .cta { max-width: 820px; margin-inline: auto; padding: 48px 24px; text-align: center; }
@media (min-width: 768px) {
.page-dt .cta { padding: 56px; }
}
.page-dt .cta p { margin: 16px auto 0; max-width: 42rem; }
.page-dt .cta-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 32px; font-size: 0.875rem; font-weight: 500; }
.page-dt .cta-contact a { display: inline-flex; align-items: center; gap: 8px; }
.page-dt .cta-contact a:hover { color: var(--color-brand); }
.page-dt .cta-contact svg { width: 16px; height: 16px; fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
.page-dt details summary svg { transition: none; }
}
.page-dt .card.tint-blue { background: color-mix(in oklab, var(--color-brand) 24%, white); border: 0; }
.page-dt .card.tint-blue .icon-badge { background: transparent; padding: 0; width: auto; height: auto; justify-content: flex-start; color: var(--color-brand-dark); }
.page-dt .card.tint-blue .icon-badge svg { width: 26px; height: 26px; }
.page-dt .card.tint-blue .benefit-list { border-top-color: rgba(0,148,206,.2); }
.page-dt .ik-ic { display:inline-flex; width:28px; height:28px; color: var(--color-brand-dark); flex:none; }
.page-dt .ik-ic svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.page-dt .ik8 { display:grid; gap:24px; margin-top:40px; }
@media (min-width:900px) {
.page-dt .ik8 { grid-template-columns:repeat(4,1fr); }
}
.page-dt .ik8 .opt { border-top: 3px solid var(--color-brand); padding-top:18px; }
.page-dt .ik8 b { display:block; margin-top:12px; font-family:var(--font-heading); font-weight:600; font-size:1rem; }
.page-dt .ik8 p { margin-top:6px; font-size:.86rem; }
.page-dt .du-ic { display:inline-flex; width:30px; height:30px; color: var(--color-brand-dark); flex:none; }
.page-dt .du-ic svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.page-dt .du-link { margin-top:auto; padding-top:24px; } /* + .textlink */
.page-dt .dx { display:grid; gap:20px; margin-top:36px; }
@media (min-width:768px) {
.page-dt .dx { grid-template-columns:1fr 1fr; }
}
.page-dt .dx .card { padding:28px; display:flex; gap:20px; align-items:flex-start; }
.page-dt .dx h3 { font-size:1.15rem; }
.page-dt .dx p { margin-top:6px; font-size:.92rem; }
.page-dt .dx .du-link { padding-top:14px; }
/* The whole card is the link (shared clickable-card hover, see Components): these tinted cards have no border, so the brand ring is a box-shadow. */
.page-dt .dx a.du-card { color: var(--color-ink); text-decoration: none; transition: box-shadow .15s, background-color .15s; }
.page-dt .dx a.du-card:hover { box-shadow: 0 0 0 1.5px var(--color-brand); color: var(--color-ink); }
.page-dt .dx a.du-card:hover .du-link { color: var(--color-brand-ink); }
.page-dt .cta.tint-blue { border:0; }
.page-dt .cta-actions-l { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.page-dt .ctab { margin-top: 36px !important; }
.page-dt .kill { display:grid; gap:24px; align-items:center; text-align:left; }
@media (min-width:900px) {
.page-dt .kill { grid-template-columns: 240px 1fr; gap:48px; }
}
.page-dt .kill svg.ill { width:220px; height:auto; }
.page-dt .cta-contact-lg { font-size: 1rem; font-weight: 600; gap: 12px 28px; }
.page-dt .cta-contact-lg svg { width: 18px; height: 18px; }
.page-dt .step .icon-badge { background:transparent; border:0; box-shadow:none; color:var(--color-brand-dark); }
.page-dt .step .icon-badge svg { width:24px; height:24px; stroke:var(--color-brand-dark); }
.page-dt .faq-grp { margin:36px 0 6px; font-family:var(--font-heading); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-brand-dark); }
.page-dt .faq-grp:first-child { margin-top:24px; }
/* ==========================================================================
Page: Freelancers (/freelancers/)
Taken over from the approved design (freelancers_v13); scoped to
.page-freelancers so it cannot clash with the shared styles above.
Shared components come later.
========================================================================== */
.page-freelancers { font-size: 1rem; line-height: 1.5; }
.page-freelancers h1, .page-freelancers h2, .page-freelancers h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: normal; }
.page-freelancers p, .page-freelancers ul, .page-freelancers blockquote { margin: 0; padding: 0; }
.page-freelancers a { text-decoration: none; }
.page-freelancers section { padding: 80px 32px; }
.page-freelancers .bpf-inner { max-width: 1136px; margin: 0 auto; }
.page-freelancers .bpf-kick { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-brand); }
.page-freelancers .bpf-h2 { margin-top: 10px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
/* Buttons: .button and .button--ink from main.css */
/* Hero */
.page-freelancers .bpf-hero { position: relative; overflow: hidden; padding: 0; background: var(--color-bg); }
.page-freelancers .bpf-dots { position: absolute; top: -30px; right: -20px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(var(--color-brand-35) 2px, transparent 2px); background-size: 22px 22px; }
.page-freelancers .bpf-grid { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 64px 32px 72px; }
.page-freelancers .bpf-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); letter-spacing: -0.01em; line-height: 1.12; }
.page-freelancers .bpf-hero h1 em { font-style: normal; color: var(--color-brand); }
.page-freelancers .bpf-sub { margin-top: 16px; max-width: 460px; font-size: 1.02rem; line-height: 1.65; color: var(--color-muted); }
.page-freelancers .bpf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-freelancers .bpf-illus { width: 100%; max-width: 430px; height: auto; margin: 0 auto; }
@media (max-width: 820px) {
.page-freelancers .bpf-grid { grid-template-columns: 1fr; padding: 44px 24px 52px; }
}
/* Intro */
.page-freelancers .bpf-intro { background: var(--color-surface); }
.page-freelancers .bpf-intro .bpf-inner { max-width: 900px; }
.page-freelancers .bpf-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.page-freelancers .bpf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.page-freelancers .bpf-intro p { font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
@media (max-width: 820px) {
.page-freelancers .bpf-cols { grid-template-columns: 1fr; gap: 18px; }
}
/* Hoe het werkt */
.page-freelancers .bpf-steps { background: var(--color-bg); }
.page-freelancers .bpf-rows { display: flex; flex-direction: column; gap: 48px; margin-top: 52px; }
.page-freelancers .bpf-srow { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; }
.page-freelancers .bpf-step { position: relative; width: 360px; max-width: 100%; padding: 36px 24px 24px; background: var(--color-brand-5); border: 1.5px solid var(--color-brand-45); border-radius: 24px; }
.page-freelancers .bpf-badge { position: absolute; top: -19px; left: 24px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
background: var(--color-brand); color: var(--color-brand-fg); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; box-shadow: 0 4px 12px rgba(36, 186, 247, .4); }
.page-freelancers .bpf-icon { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.page-freelancers .bpf-icon svg { width: 22px; height: 22px; stroke: var(--color-brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-freelancers .bpf-step h3 { margin-top: 6px; padding-right: 44px; font-size: 1.05rem; }
.page-freelancers .bpf-step p { margin-top: 10px; font-size: 0.85rem; line-height: 1.6; color: var(--color-muted); }
/* Freelancers over Bright */
.page-freelancers .bpf-quotes { background: var(--color-surface); }
.page-freelancers .bpf-quotes .bpf-kick, .page-freelancers .bpf-quotes .bpf-h2 { text-align: center; }
.page-freelancers .bpf-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; margin-top: 48px; }
.page-freelancers .bpf-quote { text-align: center; }
.page-freelancers .bpf-line { width: 130px; height: 1px; margin: 0 auto 30px; background: rgba(98, 116, 142, .45); }
.page-freelancers .bpf-quote p { font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; line-height: 1.75; color: var(--color-brand); }
.page-freelancers .bpf-quote footer { margin-top: 20px; font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--color-muted); }
@media (max-width: 820px) {
.page-freelancers .bpf-qgrid { grid-template-columns: 1fr; gap: 56px; }
}
/* Wat Bright voor je regelt */
.page-freelancers .bpf-serv { background: var(--color-bg); }
.page-freelancers .bpf-servgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.page-freelancers .bpf-servcard { padding: 32px; background: var(--color-brand-5); border: 1.5px solid var(--color-brand-45); border-radius: 24px; }
.page-freelancers .bpf-servcard > svg { width: 28px; height: 28px; stroke: var(--color-brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-freelancers .bpf-servcard h3 { margin-top: 18px; font-size: 1.05rem; }
.page-freelancers .bpf-servcard p { margin-top: 8px; font-size: 0.88rem; line-height: 1.6; color: var(--color-muted); }
@media (max-width: 820px) {
.page-freelancers .bpf-servgrid { grid-template-columns: 1fr; }
}
/* OndernemersCheck */
.page-freelancers .bpf-check { background: var(--color-surface); }
.page-freelancers .bpf-check .bpf-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.page-freelancers .bpf-story { margin-top: 16px; max-width: 600px; font-size: 0.98rem; line-height: 1.7; color: var(--color-muted); }
.page-freelancers .bpf-story + .bpf-story { margin-top: 12px; }
.page-freelancers .bpf-check .button { margin-top: 26px; }
.page-freelancers .bpf-checklist { list-style: none; display: grid; gap: 0; }
.page-freelancers .bpf-checklist li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--color-brand-20); }
.page-freelancers .bpf-checklist li:last-child { border-bottom: 1px solid var(--color-brand-20); }
.page-freelancers .bpf-checklist img { width: 28px; height: 28px; flex: none; }
.page-freelancers .bpf-checklist b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.page-freelancers .bpf-checklist span { display: block; font-size: 0.85rem; color: var(--color-muted); }
@media (max-width: 820px) {
.page-freelancers .bpf-check .bpf-inner { grid-template-columns: 1fr; }
}
/* Contactpersonen en kennisbank (whole card is clickable) */
.page-freelancers .bpf-hub { background: var(--color-bg); }
.page-freelancers .bpf-hubgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.page-freelancers .bpf-hubcard { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: var(--color-brand-5); border: 1.5px solid var(--color-brand-45); border-radius: 24px;
color: var(--color-ink); transition: border-color .15s, background-color .15s; }
.page-freelancers .bpf-hubcard:hover { border-color: var(--color-brand); background: var(--color-brand-10); color: var(--color-ink); }
.page-freelancers .bpf-hubic { display: inline-flex; width: 30px; height: 30px; flex: none; }
.page-freelancers .bpf-hubic svg { width: 28px; height: 28px; stroke: var(--color-brand-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-freelancers .bpf-hubtxt { display: block; }
.page-freelancers .bpf-hubtitle { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.page-freelancers .bpf-hubtext { display: block; margin-top: 6px; font-size: 0.92rem; line-height: 1.6; color: var(--color-muted); }
.page-freelancers .bpf-link { margin-top: 14px; } /* + .textlink */
.page-freelancers .bpf-hubcard:hover .bpf-link { color: var(--color-brand-ink); }
@media (max-width: 820px) {
.page-freelancers .bpf-hubgrid { grid-template-columns: 1fr; }
}
/* FAQ (details/summary, works without JS) */
.page-freelancers .bpf-faq { background: var(--color-surface); }
.page-freelancers .bpf-faq .bpf-inner { max-width: 900px; }
.page-freelancers .bpf-faq-grp { margin: 36px 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.page-freelancers .bpf-faq-grp:first-child { margin-top: 0; }
.page-freelancers .bpf-faqlist { margin-top: 36px; }
.page-freelancers .bpf-faq-item { padding: 6px 4px; border-bottom: 1px solid var(--color-border); }
.page-freelancers .bpf-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none;
font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.page-freelancers .bpf-faq-item summary::-webkit-details-marker { display: none; }
.page-freelancers .bpf-chev { flex: none; width: 12px; height: 12px; margin-top: -4px; border-right: 2.4px solid var(--color-brand); border-bottom: 2.4px solid var(--color-brand); transform: rotate(45deg); transition: transform .2s; }
.page-freelancers .bpf-faq-item[open] .bpf-chev { margin-top: 4px; transform: rotate(225deg); }
.page-freelancers .bpf-faq-item > p { padding: 0 40px 18px 0; font-size: 0.92rem; line-height: 1.7; color: var(--color-muted); }
.page-freelancers .bpf-faq-item > p a { color: var(--color-brand-dark); text-decoration: underline; }
/* Slot-CTA */
.page-freelancers .bpf-cta { background: var(--color-bg); }
.page-freelancers .bpf-ctacard { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; margin-top: 36px; padding: 44px 48px; background: var(--color-brand-5); border: 1.5px solid var(--color-brand-45); border-radius: 24px; }
.page-freelancers .bpf-ctaill { width: 220px; height: auto; }
.page-freelancers .bpf-ctatext { font-size: 0.98rem; line-height: 1.7; color: var(--color-muted); }
.page-freelancers .bpf-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-freelancers .bpf-contact { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.page-freelancers .bpf-contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--color-ink); }
.page-freelancers .bpf-contact a:hover { color: var(--color-brand-dark); }
.page-freelancers .bpf-contact svg { width: 18px; height: 18px; stroke: var(--color-brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
.page-freelancers .bpf-ctacard { grid-template-columns: 1fr; padding: 32px 24px; }
.page-freelancers .bpf-ctaill { margin: 0 auto; }
}
/* Freelancers: maten gelijk aan Detachering (breedte, hero, knoppen, titels, sectieruimte) */
/* 1. Zelfde paginabreedte en zijmarge als Detachering (1200px, 20px) */
.page-freelancers section { padding: 64px 20px; }
.page-freelancers .bpf-inner { max-width: 1160px; }
.page-freelancers .bpf-grid { max-width: 1200px; padding: 56px 20px; gap: 32px; }
/* 2. Hero: zelfde hoogte, kopgrootte en introtekst */
.page-freelancers .bpf-hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
.page-freelancers .bpf-sub { max-width: 32rem; font-size: 1.125rem; line-height: 1.6; }
.page-freelancers .bpf-illus { max-width: 440px; }
/* 4. Sectietitels en labels overal even groot */
.page-freelancers .bpf-h2,
.page-freelancers .bpf-intro h2 { margin-top: 12px; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; }
.page-freelancers .bpf-intro h2 { margin-top: 0; } /* geen label erboven, dus geen extra ruimte */
.page-freelancers .bpf-kick { font-size: 0.8rem; }
@media (min-width: 768px) {
.page-freelancers section { padding: 96px 20px; }
.page-freelancers .bpf-grid { gap: 40px; padding: 80px 20px; min-height: 520px; }
.page-freelancers .bpf-hero h1 { font-size: 3.75rem; }
.page-freelancers .bpf-h2,
.page-freelancers .bpf-intro h2 { font-size: 2.25rem; }
}
/* ==========================================================================
Page: Privacybeleid (/privacybeleid/)
From design privacybeleid v2. Everything is scoped to .page-privacy.
========================================================================== */
/* Resets weigh as one class, so they beat the base h1-h3 and p rules and later page classes win */
.page-privacy { font-size: 1rem; }
.page-privacy :where(h1, h2, h3) { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.page-privacy :where(p) { margin: 0; }
.page-privacy :where(a) { color: inherit; text-decoration: none; }
.pv-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.pv-wrap--md { max-width: 1100px; }
.page-privacy [id] { scroll-margin-top: calc(var(--header-height) + 24px); }
/* Hero: light blue */
.pv-hero { padding: 56px 0 48px; background: var(--color-surface); }
.pv-hero h1 { margin-top: 18px; font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.08; }
.pv-hero h1 span { color: var(--color-brand); }
.pv-lead { max-width: 40rem; margin-top: 20px; font-size: 1.1rem; line-height: 1.65; color: var(--color-muted); }
.pv-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: .9rem; color: var(--color-muted); }
.pv-meta b { font-weight: 600; color: var(--color-ink); }
/* Body: white, table of contents on the left, text on the right */
.pv-body { padding: 56px 0 72px; background: #fff; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.pv-toc { padding: 22px 24px; border: 1.5px solid var(--color-brand-45); border-radius: 20px; background: var(--color-brand-5); font-size: .9rem; }
.pv-toc__title { display: block; margin-bottom: 10px; font-family: var(--font-heading); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-dark); }
.pv-toc a { display: inline-block; position: relative; margin-right: 14px; padding: 6px 0; line-height: 1.4; color: var(--color-muted); }
.pv-toc a:hover { color: var(--color-ink); }
.pv-toc a.is-on { font-weight: 600; color: var(--color-ink); }
.pv-prose > p, .pv-prose ul, .pv-prose .pv-tbl { margin-top: 14px; }
.pv-prose p { font-size: 1.02rem; line-height: 1.7; }
.pv-prose h2 { margin-top: 48px; padding-top: 6px; font-size: 1.45rem; }
.pv-prose h2:first-child { margin-top: 0; }
.pv-n { margin-right: 10px; color: var(--color-brand); }
.pv-prose h3 { margin-top: 28px; font-size: 1.1rem; }
.pv-prose a { font-weight: 600; color: var(--color-brand-dark); }
.pv-prose a:hover { text-decoration: underline; }
/* Lists with a small brand dot */
.pv-prose ul { display: grid; gap: 8px; margin-bottom: 0; padding: 0; list-style: none; }
.pv-prose li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.6; }
.pv-prose li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 11px; border-radius: 999px; background: var(--color-brand); }
.pv-prose li b { font-weight: 600; }
/* Tables, scroll sideways on phones */
.pv-tbl { max-width: 100%; overflow-x: auto; }
.pv-prose .pv-tbl { margin-top: 18px; overflow-x: auto; border: 1px solid var(--color-border); border-radius: 16px; }
.pv-tbl table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .92rem; }
.pv-tbl th, .pv-tbl td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; line-height: 1.5; }
.pv-tbl tr:last-child td { border-bottom: 0; }
.pv-tbl th { background: var(--color-brand-5); font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--color-ink); }
.pv-tbl td { color: var(--color-muted); }
.pv-tbl td:first-child { font-weight: 500; color: var(--color-ink); }
.pv-tbl--2 th:first-child, .pv-tbl--2 td:first-child { width: 42%; }
.pv-tbl--3 th:first-child, .pv-tbl--3 td:first-child { width: 34%; }
/* Contact block in the text */
.pv-contact { display: grid; gap: 4px; margin-top: 14px; padding: 22px 26px; border: 1.5px solid var(--color-brand-45); border-radius: 20px; background: var(--color-brand-5); }
.pv-contact b { font-family: var(--font-heading); font-weight: 600; }
.pv-contact span { color: var(--color-muted); }
/* Closing block: light blue */
.pv-cta { padding: 56px 0; background: var(--color-surface); }
.pv-cta__grid { display: grid; gap: 28px; align-items: center; }
.pv-cta h2 { font-size: 1.6rem; }
.pv-muted { max-width: 34rem; margin-top: 12px; color: var(--color-muted); }
.pv-cta__rows { display: grid; }
.pv-cta__rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-brand-20); font-weight: 600; }
.pv-cta__rows a:first-child { border-top: 1px solid var(--color-brand-20); }
.pv-cta__rows a:hover { color: var(--color-brand-dark); }
.pv-cta__rows svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) {
.pv-hero { padding: 72px 0 64px; }
.pv-cta { padding: 72px 0; }
.pv-cta h2 { font-size: 1.9rem; }
}
@media (min-width: 900px) {
.pv-cta__grid { grid-template-columns: 1.2fr .8fr; gap: 64px; }
}
@media (min-width: 1000px) {
.pv-grid { grid-template-columns: 250px minmax(0, 46rem); gap: 72px; align-items: start; }
.pv-toc { position: sticky; top: calc(var(--header-height) + 24px); }
.pv-toc a { display: block; margin-right: 0; padding-left: 16px; }
.pv-toc a.is-on::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 999px; background: var(--color-brand); }
}
/* Algemene voorwaarden (/algemene-voorwaarden/): reuses the privacybeleid layout, plus numbered clauses
and a longer table of contents (parts on mobile, every article on desktop). */
.page-voorwaarden .pv-prose h2 { margin-top: 64px; padding-top: 24px; border-top: 2px solid var(--color-brand-20); }
.page-voorwaarden .pv-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-voorwaarden .pv-prose h3 .pv-n { color: var(--color-brand-dark); }
.page-voorwaarden .pv-intro { color: var(--color-muted); }
.pv-art { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.pv-prose .pv-art li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0; }
.pv-prose .pv-art li::before { content: attr(data-n); width: auto; height: auto; margin-top: 0; border-radius: 0; background: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-brand-dark); }
.pv-toc__art { display: none !important; }
.pv-toc a.pv-toc__part { font-weight: 600; }
@media (min-width: 1000px) {
.page-voorwaarden .pv-toc { max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; }
.pv-toc a.pv-toc__part { margin-top: 10px; padding-left: 0; color: var(--color-ink); }
.pv-toc a.pv-toc__part:first-of-type { margin-top: 0; }
.pv-toc__art { display: block !important; padding-block: 4px !important; }
.pv-toc a.pv-toc__part.is-on::before { display: none; }
}
/* ==========================================================================
Page: Over Bright, Maak kennis met Bright (/over-bright/)
From design over-bright-maak-kennis v36. Everything is scoped to .page-over-bright.
========================================================================== */
/* Resets weigh as one class, so they beat the base h1-h3 and p rules and later page classes win */
.page-over-bright :where(h1, h2, h3) { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-over-bright :where(p) { margin: 0; }
.page-over-bright :where(ul) { list-style: none; margin: 0; padding: 0; }
.ob-wrap { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.ob-section { padding-block: 72px; }
.ob-kicker { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-brand); }
.ob-h2 { margin-top: 12px; font-size: 1.875rem; }
.ob-lead { margin-top: 16px; max-width: 46rem; font-size: 1.05rem; color: var(--color-muted); }
/* Hero, with the "Werken bij Bright?" card hanging into the next section on wide screens */
.ob-hero { position: relative; overflow-x: clip; background: var(--color-bg); }
.ob-hero__dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none; background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px); background-size: 22px 22px; }
.ob-hero__grid { display: grid; gap: 24px; padding-block: 64px 48px; }
.ob-hero__text { position: relative; z-index: 1; }
.ob-crumb { margin-bottom: 18px; } /* look: see Components, breadcrumb */
.ob-hero h1 { max-width: 36rem; font-size: 2.25rem; line-height: 1.1; }
.ob-hero h1 span { color: var(--color-brand); }
.ob-sub { margin-top: 16px; max-width: 30rem; font-size: 1.125rem; color: var(--color-muted); }
.ob-hero__aside { position: relative; }
.ob-star { display: none; }
.ob-jobcard-wrap { position: relative; }
.ob-globe { position: absolute; z-index: 1; right: -90px; top: -90px; width: 220px; height: auto; opacity: .5; pointer-events: none; }
.ob-jobcard { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; max-width: 400px; padding: 40px; border-radius: 28px; color: #fff; background: linear-gradient(rgba(36, 186, 247, .9), rgba(36, 186, 247, .9)), url("/assets/img/haarlem-spaarne.webp") center 60% / cover; }
.ob-jobcard h2 { margin-top: 6px; font-size: 1.75rem; color: #fff; }
.ob-jobcard p { margin-top: 10px; font-size: .98rem; opacity: .95; }
.ob-jobcard .button { align-self: flex-start; margin-top: 22px; } /* .button--white from the Components section */
/* Kernwaarden */
.ob-values { background: var(--color-surface); }
.ob-values__head { max-width: 640px; }
.ob-intro { margin-top: 18px; font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
.ob-values__grid { display: grid; gap: 24px; margin-top: 40px; }
.ob-value { padding: 32px; border-left: 5px solid var(--color-brand); border-radius: 12px 24px 24px 12px; background: color-mix(in oklab, var(--color-brand) 24%, white); }
.ob-value svg { display: block; width: 72px; height: 72px; }
.ob-value h3 { margin-top: 22px; font-size: 1.4rem; color: var(--color-brand); }
.ob-value h3::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--color-brand); }
.ob-value p { margin-top: 14px; font-size: .95rem; color: var(--color-muted); }
/* Team */
.ob-team__grid { display: grid; gap: 24px; margin-top: 48px; }
.ob-member { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; text-align: center; background: linear-gradient(160deg, color-mix(in oklab, var(--color-brand) 55%, white), var(--color-brand)); }
.ob-member > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ob-member__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 24px 22px; color: #fff; background: linear-gradient(transparent, rgba(29, 31, 34, .78)); }
.ob-member__name { margin-top: 14px; font-size: 1.25rem; color: #fff; }
.ob-member__role { font-size: .9rem; font-weight: 500; }
.ob-member__links { display: flex; gap: 8px; margin-top: 12px; }
.ob-member__links a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .2); transition: background .15s; }
.ob-member__links a:hover,
.ob-member__links a:focus-visible { background: #fff; color: var(--color-brand-dark); }
.ob-member__links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-member__links a.ob-li svg { fill: currentColor; stroke: none; }
/* Tooltip above the icon with the phone number, e-mail address or "LinkedIn-profiel" */
.ob-member__links a::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 10px); padding: 7px 12px; border-radius: 8px; white-space: nowrap; background: #fff; color: var(--color-ink); font-size: .82rem; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s; }
.ob-member__links a::before { content: ""; position: absolute; left: 14px; bottom: calc(100% + 4px); border: 6px solid transparent; border-top-color: #fff; opacity: 0; transition: opacity .15s; }
.ob-member__links a:hover::after,
.ob-member__links a:focus-visible::after,
.ob-member__links a:hover::before,
.ob-member__links a:focus-visible::before { opacity: 1; transform: none; }
@media (min-width: 40rem) {
.ob-h2 { font-size: 2.25rem; }
.ob-hero h1 { font-size: 3rem; }
.ob-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56.25rem) {
.ob-hero__grid { grid-template-columns: minmax(0, 1.15fr) 400px; gap: 56px; align-items: end; padding-block: 64px 0; }
.ob-hero__text { align-self: start; padding-bottom: 48px; }
.ob-hero__aside { margin-bottom: -226px; }
.ob-hero__spacer { height: 150px; }
.ob-star { position: absolute; z-index: 0; display: block; left: 50%; top: 7px; width: 1200px; max-width: none; height: auto; aspect-ratio: 1; opacity: .12; transform: translate(-50%, -50%); pointer-events: none; }
.ob-jobcard { width: 400px; }
.ob-values__head { min-height: 270px; }
.ob-values__grid,
.ob-team__grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
Page: Over Bright, Werken bij Bright (/over-bright/werken-bij-bright/)
From design 13-werken-bij-bright v23. Everything is scoped to .page-werken-bij.
========================================================================== */
.page-werken-bij { font-size: 1rem; }
.page-werken-bij :where(h1, h2, h3) { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-werken-bij :where(p) { margin: 0; }
.page-werken-bij :where(ul) { list-style: none; margin: 0; padding: 0; }
.page-werken-bij :where(a) { color: inherit; text-decoration: none; }
.wb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wb-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.wb-section { padding-block: 72px; }
.wb-surface { background: var(--color-surface); }
.wb-kicker { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-brand); }
.wb-h2 { margin-top: 12px; font-size: 1.8rem; }
.wb-lead { margin-top: 16px; max-width: 46rem; font-size: 1.05rem; color: var(--color-muted); }
/* Buttons and text link */
/* "Of stuur een open sollicitatie" is .textlink (Components) */
/* Cards: light blue with a border on white, a stronger blue without border on light blue */
.wb-card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.wb-surface .wb-card { border: 0; background: color-mix(in oklab, var(--color-brand) 24%, white); }
/* Hero */
.wb-hero { overflow: hidden; background: var(--color-bg); }
.wb-hero__grid { display: grid; gap: 48px; align-items: center; padding-block: 64px 56px; }
.wb-crumb { margin-bottom: 18px; } /* look: see Components, breadcrumb */
.wb-hero h1 { max-width: 34rem; font-size: 2.4rem; line-height: 1.08; }
.wb-hero h1 span { color: var(--color-brand); }
.wb-sub { margin-top: 18px; max-width: 32rem; font-size: 1.125rem; color: var(--color-muted); }
.wb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
.wb-illu { width: 100%; max-width: 520px; margin-inline: auto; }
/* Dit is Bright: four reasons */
.wb-reasons { display: grid; gap: 20px; margin-top: 40px; }
.wb-reason { padding: 28px 26px; }
.wb-reason::before { content: ""; display: block; width: 34px; height: 34px; background: url("/assets/img/wereldbol-decoratie.svg") center / contain no-repeat; }
.wb-reason h3 { margin-top: 16px; font-size: 1.15rem; }
.wb-reason p { margin-top: 8px; font-size: .9rem; color: var(--color-muted); }
/* Vacatures */
.wb-vacs { display: grid; gap: 24px; margin-top: 40px; }
.wb-vac { display: flex; flex-direction: column; padding: 30px 32px; }
.wb-vac h3 { font-size: 1.35rem; }
.wb-vac p { margin-top: 10px; font-size: .95rem; color: var(--color-muted); }
.wb-vac .button { align-self: flex-start; margin-top: auto; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px 22px; }
.wb-vac .wb-meta { margin-top: 16px; }
.wb-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--color-brand-10); font-size: .82rem; font-weight: 600; color: var(--color-brand-dark); }
.wb-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-vac--open { background: #fff; }
.wb-vac--open p { margin-bottom: 22px; color: var(--color-text); }
/* Wat we bieden */
.wb-benefits { display: grid; gap: 18px 40px; margin-top: 36px; }
.wb-benefits li { display: flex; align-items: flex-start; gap: 14px; font-size: .98rem; }
.wb-benefits li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 5px; background: url("/assets/img/wereldbol-decoratie.svg") center / contain no-repeat; }
.wb-benefits b { display: block; font-family: var(--font-heading); font-weight: 600; }
.wb-benefits small { display: block; font-size: .9rem; color: var(--color-muted); }
/* Afsluiter */
.wb-close { display: grid; gap: 48px; align-items: center; }
.wb-contact { padding: 36px 40px; }
.wb-contact h3 { font-size: 1.35rem; }
.wb-rows { display: grid; margin-top: 18px; }
.wb-rows a { display: flex; align-items: center; gap: 14px; padding: 13px 0; font-weight: 600; }
.wb-rows a:hover { color: var(--color-brand-dark); }
.wb-rows a + a { border-top: 1px solid var(--color-brand-20); }
.wb-chk { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-10); color: var(--color-brand-dark); }
.wb-chk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 56.25rem) {
.wb-h2 { font-size: 2.25rem; }
.wb-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.wb-hero h1 { font-size: 3.2rem; }
.wb-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-vacs { grid-template-columns: repeat(2, 1fr); }
.wb-benefits { grid-template-columns: repeat(3, 1fr); }
.wb-close { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
/* ==========================================================================
Page: Werken bij Bright, Open sollicitatie (/over-bright/werken-bij-bright/open-sollicitatie/)
From design 14-open-sollicitatie v5. Everything is scoped to .page-open-sollicitatie.
========================================================================== */
.page-open-sollicitatie { font-size: 1rem; }
.page-open-sollicitatie :where(h1) { margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-open-sollicitatie :where(p) { margin: 0; }
.page-open-sollicitatie :where(a) { color: inherit; text-decoration: none; }
.os-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.os-wrap--form { max-width: 720px; }
.os-section { padding-block: 72px; }
/* Hero */
.os-hero { background: var(--color-surface); text-align: center; }
.os-hero .os-wrap { padding-block: 56px; }
.os-crumb { justify-content: center; margin-bottom: 18px; } /* look: see Components, breadcrumb */
.os-hero h1 { max-width: 34rem; margin-inline: auto; font-size: 2.3rem; line-height: 1.1; }
.os-sub { max-width: 34rem; margin: 16px auto 0; font-size: 1.125rem; color: var(--color-muted); }
/* Form */
.os-form { display: grid; gap: 18px; }
.os-row2 { display: grid; gap: 18px; }
.os-fld { display: grid; gap: 6px; }
.os-fld label { font-family: var(--font-heading); font-size: .88rem; font-weight: 600; }
.os-fld label small { font-family: var(--font-body); font-weight: 400; color: var(--color-muted); }
.os-fld input,
.os-fld select,
.os-fld textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 12px; background: #fff; font: inherit; font-size: .95rem; color: var(--color-ink); }
.os-fld input:focus,
.os-fld select:focus,
.os-fld textarea:focus { border-color: var(--color-brand); }
.os-fld textarea { min-height: 140px; resize: vertical; }
.os-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--color-brand-45); border-radius: 12px; background: #fff; font-size: .92rem; }
.os-upload span { color: var(--color-muted); }
.os-fld .os-upload input { width: auto; max-width: 100%; padding: 0; border: 0; border-radius: 0; font-size: .85rem; }
.os-upload input::file-selector-button { margin-right: 12px; padding: 9px 16px; border: 2px solid var(--color-brand); border-radius: 12px; background: transparent; font-family: var(--font-heading); font-size: .85rem; font-weight: 600; color: var(--color-brand-dark); cursor: pointer; }
.os-upload input::file-selector-button:hover { background: var(--color-brand-5); }
.os-chk { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--color-muted); }
.os-chk input { margin-top: 5px; accent-color: var(--color-brand); }
.page-open-sollicitatie .os-chk a,
.page-open-sollicitatie .os-form__notice a { font-weight: 600; color: var(--color-brand-dark); }
.os-form__notice { padding: 14px 16px; border-radius: 12px; background: var(--color-brand-5); font-size: .92rem; }
/* Direct contact */
.os-direct { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--color-border); color: var(--color-muted); }
.os-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 10px; font-size: .95rem; }
.page-open-sollicitatie .os-contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-brand-dark); overflow-wrap: anywhere; }
.os-contact svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 56.25rem) {
.os-hero h1 { font-size: 3rem; }
.os-row2 { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
Page: Voor overheden (/voor-overheden/)
Taken over from the approved design; scoped to .page-vo so it cannot
clash with the shared styles above. Shared components come later.
========================================================================== */
.page-vo { font-size: 16px; }
.page-vo h1, .page-vo h2, .page-vo h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.page-vo p { margin: 0; }
.page-vo a { color: inherit; text-decoration: none; }
.page-vo .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.page-vo .wrap-md { max-width: 1100px; }
.page-vo .section { padding-block: 52px; }
@media (min-width: 768px) {
.page-vo .section { padding-block: 72px; }
}
.page-vo .bg-surface { background: var(--color-surface); }
.page-vo .bg-white { background: var(--color-bg); }
.page-vo .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-vo .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-vo .h2 { font-size: 2.25rem; }
}
.page-vo .muted { color: var(--color-muted); }
.page-vo .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.page-vo .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.page-vo .card-white { background: var(--color-bg); }
.page-vo .icon-badge { display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-10); color: var(--color-brand); border-radius: 12px; }
.page-vo .icon-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Hero */
.page-vo .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.page-vo .hero-dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px);
background-size: 22px 22px; }
.page-vo .hero-grid { position: relative; display: grid; gap: 32px; align-items: center; padding-block: 56px; }
@media (min-width: 768px) {
.page-vo .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; min-height: 520px; }
}
.page-vo .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
.page-vo .hero h1 { font-size: 3.75rem; }
}
.page-vo .hero h1 span { color: var(--color-brand); }
.page-vo .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.page-vo .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-vo .hero-illu { width: 100%; max-width: 440px; margin-inline: auto; display: block; height: auto; }
.page-vo .check { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center;
border-radius: 999px; background: var(--color-brand-10); color: var(--color-brand); }
.page-vo .check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-vo .trust { background: var(--color-surface); color: var(--color-ink); border-top: 1px solid var(--color-brand-20); border-bottom: 1px solid var(--color-brand-20); }
.page-vo .trust ul { list-style: none; margin: 0; padding: 22px 0; display: grid; gap: 14px 32px; font-size: 0.9rem; font-weight: 500; }
@media (min-width: 640px) {
.page-vo .trust ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.page-vo .trust ul { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}
.page-vo .trust li { display: flex; align-items: center; gap: 10px; }
.page-vo .trust-mark { flex: none; display: flex; align-items: center; justify-content: center; }
.page-vo .trust-mark img { width: 26px; height: 26px; display: block; }
.page-vo .lead-one { margin-top: 20px; font-size: 1.0625rem; max-width: 46rem; }
.page-vo .doors { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 640px) {
.page-vo .doors { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
.page-vo .doors { grid-template-columns: repeat(4, 1fr); }
}
.page-vo .door { display: flex; flex-direction: column; padding: 28px 26px 26px; transition: border-color .15s, background-color .15s; }
.page-vo .door:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
.page-vo .door .icon-badge { width: 48px; height: 48px; }
.page-vo .door .icon-badge svg { width: 24px; height: 24px; }
.page-vo .door h3 { margin-top: 22px; font-size: 1.2rem; }
.page-vo .door p { margin-top: 10px; font-size: 0.9rem; }
.page-vo .door-more { margin-top: auto; padding-top: 24px; } /* + .textlink */
.page-vo .door:hover .door-more { color: var(--color-brand-ink); }
.page-vo .close-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
.page-vo .close-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
.page-vo .close-grid .button { margin-top: 28px; }
.page-vo .contact-card { padding: 32px; }
.page-vo .close-grid .card-white { background: var(--color-brand-5); }
@media (min-width: 768px) {
.page-vo .contact-card { padding: 40px; }
}
.page-vo .contact-card h3 { font-size: 1.35rem; }
.page-vo .contact-card > p { margin-top: 10px; font-size: 0.95rem; }
.page-vo .contact-rows { margin-top: 20px; display: grid; }
.page-vo .contact-rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-weight: 600; }
.page-vo .contact-rows a + a { border-top: 1px solid var(--color-brand-20); }
.page-vo .contact-rows a:hover { color: var(--color-brand-dark); }
.page-vo .contact-rows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-vo .klist { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.page-vo .klist li { display:flex; gap:12px; align-items:flex-start; font-size:.98rem; }
.page-vo .klist .ci { flex:none; width:22px; height:22px; margin-top:1px; color:var(--color-brand-dark); }
.page-vo .klist .ci svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.page-vo .twocol { display:grid; gap:32px; }
@media (min-width:960px) {
.page-vo .twocol { grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
}
.page-vo .orows > div { display:grid; grid-template-columns:110px 1fr; gap:24px; align-items:center; padding:18px 0; border-top:1px solid var(--color-brand-45); }
.page-vo .orows > div:last-child { border-bottom:1px solid var(--color-brand-45); }
.page-vo .orows .lg { display:flex; align-items:center; justify-content:center; }
.page-vo .orows b { display:block; font-family:var(--font-heading); font-weight:600; font-size:1rem; }
.page-vo .orows p { font-size:.88rem; margin-top:4px; }
.page-vo .orows.nolines > div { border:0; padding:12px 0; }
.page-vo .orows.nolines > div:last-child { border:0; }
.page-vo .twocol.al { align-items:stretch; }
.page-vo .rcol { display:flex; flex-direction:column; }
.page-vo .rcol .orows { flex:1; margin-top:12px; display:flex; flex-direction:column; justify-content:space-between; }
.page-vo .rcol .orows.nolines > div { padding:0; }
.page-vo .rcol .orows .lg { align-self:start; }
@media (max-width:959px) {
.page-vo .rcol > .kicker { display:none; }
.page-vo .rcol .orows { margin-top:0; gap:22px; }
}
/* .lk-globe links are .textlink */
.page-vo .lk-globe img { width:18px; height:18px; }
/* ==========================================================================
Page: Dienstverlening voor overheden (/voor-overheden/dienstverlening/)
Taken over from the approved design; scoped to .page-dv so it cannot
clash with the shared styles above. Shared components come later.
========================================================================== */
.page-dv { font-size: 16px; }
.page-dv h1, .page-dv h2, .page-dv h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.page-dv p { margin: 0; }
.page-dv a { color: inherit; text-decoration: none; }
.page-dv .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.page-dv .wrap-md { max-width: 1100px; }
.page-dv .wrap-sm { max-width: 900px; }
.page-dv .section { padding-block: 52px; }
@media (min-width: 768px) {
.page-dv .section { padding-block: 72px; }
}
.page-dv .bg-surface { background: var(--color-surface); }
.page-dv .bg-white { background: var(--color-bg); }
.page-dv .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-dv .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-dv .h2 { font-size: 2.25rem; }
}
.page-dv .muted { color: var(--color-muted); }
.page-dv a:focus-visible, .page-dv summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.page-dv .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.page-dv .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.page-dv .card-white { background: var(--color-bg); }
.page-dv .icon-badge { display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-10); color: var(--color-brand); border-radius: 12px; }
.page-dv .icon-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-dv .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.page-dv .hero-dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px);
background-size: 22px 22px; }
.page-dv .hero-grid { position: relative; display: grid; gap: 32px; align-items: center; padding-block: 56px; }
@media (min-width: 768px) {
.page-dv .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; min-height: 520px; }
}
.page-dv .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
.page-dv .hero h1 { font-size: 3.75rem; }
}
.page-dv .hero h1 span { color: var(--color-brand); }
.page-dv .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.page-dv .hero-illu { width: 100%; max-width: 440px; margin-inline: auto; display: block; height: auto; }
.page-dv .intro-cols { display: grid; gap: 24px; margin-top: 16px; }
@media (min-width: 768px) {
.page-dv .intro-cols { grid-template-columns: 1fr 1fr; }
}
.page-dv .check { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center;
border-radius: 999px; background: var(--color-brand-10); color: var(--color-brand); }
.page-dv .check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-dv .faq { margin-top: 40px; }
.page-dv details { border-bottom: 1px solid var(--color-border); }
.page-dv summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.page-dv summary::-webkit-details-marker { display: none; }
.page-dv summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-muted); stroke-width: 2; transition: transform .2s; }
.page-dv details[open] summary svg { transform: rotate(180deg); }
.page-dv details p { padding: 0 0 16px; font-size: 0.875rem; max-width: 65ch; }
@media (prefers-reduced-motion: reduce) {
.page-dv details summary svg { transition: none; }
}
.page-dv .door-more { margin-top: auto; padding-top: 24px; } /* + .textlink */
.page-dv .close-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
.page-dv .close-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
.page-dv .close-grid .button { margin-top: 28px; }
.page-dv .contact-card { padding: 32px; }
@media (min-width: 768px) {
.page-dv .contact-card { padding: 40px; }
}
.page-dv .contact-card h3 { font-size: 1.35rem; }
.page-dv .contact-card > p { margin-top: 10px; font-size: 0.95rem; }
.page-dv .contact-rows { margin-top: 20px; display: grid; }
.page-dv .contact-rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-weight: 600; }
.page-dv .contact-rows a + a { border-top: 1px solid var(--color-brand-20); }
.page-dv .contact-rows a:hover { color: var(--color-brand-dark); }
.page-dv .contact-rows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-dv .hero p.crumb, .page-dv .crumb { margin: 0 0 18px; } /* look: see Components, breadcrumb */
.page-dv .hero-sm .hero-grid { padding-block: 48px; min-height: 0; }
@media (min-width: 768px) {
.page-dv .hero-sm .hero-grid { padding-block: 64px; }
}
.page-dv .hero-sm h1 { font-size: 2.25rem; }
@media (min-width: 768px) {
.page-dv .hero-sm h1 { font-size: 3rem; }
}
.page-dv .hero-sm .hero-illu { max-width: 380px; }
.page-dv .anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-dv .anchor-nav a { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; padding: 8px 16px 8px 12px; border-radius: 999px; color: var(--color-brand-dark); background: #fff; box-shadow: 0 1px 0 rgba(29,31,34,.06), 0 0 0 1px var(--color-border); }
.page-dv .anchor-nav a:hover { box-shadow: 0 0 0 1.5px var(--color-brand-45); }
.page-dv .anchor-nav i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--color-brand); flex: none; }
.page-dv .more { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) {
.page-dv .more { grid-template-columns: repeat(3, 1fr); }
}
.page-dv .more a { display: flex; flex-direction: column; padding: 24px; background: var(--color-surface); transition: border-color .15s, background-color .15s; }
.page-dv .more a:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
.page-dv .more b { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
.page-dv .more p { margin-top: 6px; font-size: 0.88rem; }
.page-dv .more .door-more { padding-top: 18px; }
.page-dv .close-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
.page-dv .close-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}
.page-dv .close-grid .button { margin-top: 28px; }
.page-dv .contact-card { padding: 32px; background: var(--color-brand-5); }
@media (min-width: 768px) {
.page-dv .contact-card { padding: 40px; }
}
.page-dv .contact-card h3 { font-size: 1.35rem; }
.page-dv .contact-card > p { margin-top: 10px; font-size: 0.95rem; }
.page-dv .contact-rows { margin-top: 20px; display: grid; }
.page-dv .contact-rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-weight: 600; }
.page-dv .contact-rows a + a { border-top: 1px solid var(--color-brand-20); }
.page-dv .contact-rows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-dv .vorm1 .icon-badge { width: 52px; height: 52px; }
.page-dv .vorm1 .icon-badge svg { width: 26px; height: 26px; }
.page-dv .vorm1 h2 { margin-top: 22px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-dv .vorm1 h2 { font-size: 2.125rem; }
}
.page-dv .vorm1 .lead { margin-top: 14px; font-size: 1.05rem; max-width: 46rem; }
.page-dv .vorm1 .sits { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 768px) {
.page-dv .vorm1 .sits { grid-template-columns: repeat(3, 1fr); }
}
.page-dv .vorm1 .sit { padding: 24px; }
.page-dv .vorm1 .sit .icon-badge { width: 42px; height: 42px; border-radius: 10px; }
.page-dv .vorm1 .sit .icon-badge svg { width: 22px; height: 22px; }
.page-dv .vorm1 .sit b { display: block; margin-top: 16px; font-family: var(--font-heading); font-weight: 600; }
.page-dv .vorm1 .sit p { margin-top: 6px; font-size: 0.88rem; }
.page-dv .vorm1 .prose { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 900px) {
.page-dv .vorm1 .prose { grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.page-dv .vorm1 .prose > div:first-child { padding-right: 40px; }
}
.page-dv .vorm1 .prose h3 { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand); }
.page-dv .vorm1 .prose p { margin-top: 10px; }
.page-dv .vorm1 .button { margin-top: 32px; }
.page-dv .vorm1 .mini-illu { width: 100%; max-width: 160px; height: auto; display: block; margin: 4px auto 0; }
.page-dv .vorm1 .mini-illu-sm { max-width: 128px; margin-top: 28px; }
.page-dv .dh .icon-badge { width: 52px; height: 52px; }
.page-dv .dh .icon-badge svg { width: 26px; height: 26px; }
.page-dv .dh h2 { margin-top: 22px; font-size: 2rem; }
.page-dv .dh .lead { margin-top: 14px; font-size: 1.05rem; }
.page-dv .d5 .flow { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 900px) {
.page-dv .d5 .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
}
.page-dv .d5 .st { padding: 28px; display: flex; flex-direction: column; }
.page-dv .d5 .st b { display: block; margin-top: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; }
.page-dv .d5 .st p { margin-top: 10px; font-size: 0.92rem; }
.page-dv .d5 .adv4 { display: grid; gap: 22px 32px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--color-brand-20); }
@media (min-width: 640px) {
.page-dv .d5 .adv4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.page-dv .d5 .adv4 { grid-template-columns: repeat(4, 1fr); }
}
.page-dv .d5 .adv4 > div { display: flex; gap: 14px; align-items: flex-start; }
.page-dv .d5 .adv4 .icon-badge { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.page-dv .d5 .adv4 .icon-badge svg { width: 20px; height: 20px; }
.page-dv .d5 .adv4 b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.98rem; }
.page-dv .d5 .adv4 p { margin-top: 4px; font-size: 0.88rem; }
.page-dv .d5 .st.tint { padding: 30px 28px; border: 0; }
.page-dv .d5 .f5 { border-radius: 24px; overflow: hidden; }
@media (min-width: 900px) {
.page-dv .d5 .f5 { grid-template-columns: repeat(3, 1fr); gap: 0; }
}
.page-dv .d5 .t0 { background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand) 16%, white), color-mix(in oklab, var(--color-brand) 28%, white)); }
.page-dv .d5 .t1 { background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand) 34%, white), color-mix(in oklab, var(--color-brand) 46%, white)); }
.page-dv .d5 .t2 { background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand) 52%, white), color-mix(in oklab, var(--color-brand) 64%, white)); }
.page-dv .d5 .tint b { font-size: 1.3rem; margin-top: 0; color: color-mix(in oklab, var(--color-brand-dark) 45%, var(--color-ink)); }
.page-dv .d5 .tint p { color: var(--color-ink); opacity: .75; }
.page-dv .wsf .icon-badge { width: 52px; height: 52px; }
.page-dv .wsf .icon-badge svg { width: 26px; height: 26px; }
.page-dv .wsf h2 { margin-top: 22px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-dv .wsf h2 { font-size: 2.125rem; }
}
.page-dv .wsf .lead { margin-top: 14px; font-size: 1.05rem; }
.page-dv .wsf .funnel { margin-top: 40px; display: grid; gap: 22px; }
.page-dv .wsf .frow { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: center; }
@media (min-width: 900px) {
.page-dv .wsf .frow { grid-template-columns: 32px 1fr 372px; gap: 14px 40px; }
}
.page-dv .wsf .fnum { width: 32px; height: 32px; border-radius: 999px; background: var(--color-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; }
.page-dv .wsf .frow p { font-size: 1rem; }
.page-dv .wsf .ftiles { display: none; width: 372px; height: 38px; }
@media (min-width: 900px) {
.page-dv .wsf .ftiles { display: block; }
}
.page-dv .wsf .button { margin-top: 36px; }
.page-dv .lead { margin-top: 16px; }
.page-dv .ib { display: inline-flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.75); color: var(--color-brand-dark); }
.page-dv .ib svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-dv .grp { margin-top: 36px; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.page-dv .ladder-wrap { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 900px) {
.page-dv .ladder-wrap { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
}
.page-dv .ladder { display: grid; gap: 8px; }
.page-dv .rung { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 16px; }
.page-dv .rung b { display: block; font-family: var(--font-heading); font-weight: 600; color: color-mix(in oklab, var(--color-brand-dark) 45%, var(--color-ink)); }
.page-dv .rung span { font-size: 0.85rem; color: var(--color-ink); opacity: .75; }
.page-dv .r0 { background: color-mix(in oklab, var(--color-brand) 16%, white); }
.page-dv .r1 { background: color-mix(in oklab, var(--color-brand) 28%, white); margin-left: 6%; }
.page-dv .r2 { background: color-mix(in oklab, var(--color-brand) 42%, white); margin-left: 12%; }
.page-dv .r3 { background: color-mix(in oklab, var(--color-brand) 58%, white); margin-left: 18%; }
.page-dv .around { display: grid; gap: 14px; }
.page-dv .ar { display: flex; gap: 14px; align-items: center; }
.page-dv .ar .icon-badge { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #fff; }
.page-dv .ar .icon-badge svg { width: 22px; height: 22px; }
.page-dv .ar b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
.page-dv .ar span { font-size: 0.85rem; }
.page-dv .faq-grp { margin: 36px 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.page-dv .faq-grp:first-child { margin-top: 24px; }
.page-dv .vorm-num { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:999px; background:var(--color-brand); color:#fff; font-family:var(--font-heading); font-weight:600; font-size:1.15rem; }
.page-dv .vh { display:flex; align-items:center; gap:16px; }
.page-dv .vh h2 { margin:0 !important; }
.page-dv .vh-sm .vorm-num { width:36px; height:36px; font-size:1rem; }
.page-dv .wsf .fnum { background:var(--color-brand-10); color:var(--color-brand-dark); }
.page-dv .wsf .funnel { max-width: 1060px; }
.page-dv .wsf .frow { grid-template-columns: 32px 1fr; gap: 12px; }
@media (min-width:900px) {
.page-dv .wsf .frow { grid-template-columns: 32px 1fr 372px; gap: 12px 24px; }
}
@media (min-width: 768px) {
.page-dv .more-2 { grid-template-columns: 1fr 1fr; max-width: 760px; }
}
/* ==========================================================================
Page: Werkwijze (/voor-overheden/werkwijze/)
Taken over from the approved design; scoped to .page-wk so it cannot
clash with the shared styles above. Shared components come later.
========================================================================== */
.page-wk { font-size: 16px; }
.page-wk h1, .page-wk h2, .page-wk h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.page-wk p { margin: 0; }
.page-wk a { color: inherit; text-decoration: none; }
.page-wk .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.page-wk .wrap-md { max-width: 1100px; }
.page-wk .wrap-sm { max-width: 900px; }
.page-wk .section { padding-block: 52px; }
@media (min-width: 768px) {
.page-wk .section { padding-block: 72px; }
}
.page-wk .bg-surface { background: var(--color-surface); }
.page-wk .bg-white { background: var(--color-bg); }
.page-wk .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-wk .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-wk .h2 { font-size: 2.25rem; }
}
.page-wk .muted { color: var(--color-muted); }
.page-wk .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.page-wk .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.page-wk .card-white { background: var(--color-bg); }
.page-wk .icon-badge { display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-10); color: var(--color-brand); border-radius: 12px; }
.page-wk .icon-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-wk .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.page-wk .hero-dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px);
background-size: 22px 22px; }
.page-wk .hero-grid { position: relative; display: grid; gap: 32px; align-items: center; padding-block: 56px; }
@media (min-width: 768px) {
.page-wk .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; min-height: 520px; }
}
.page-wk .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
.page-wk .hero h1 { font-size: 3.75rem; }
}
.page-wk .hero h1 span { color: var(--color-brand); }
.page-wk .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.page-wk .hero-illu { width: 100%; max-width: 440px; margin-inline: auto; display: block; height: auto; }
.page-wk .check { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center;
border-radius: 999px; background: var(--color-brand-10); color: var(--color-brand); }
.page-wk .check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-wk table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
.page-wk th, .page-wk td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.page-wk tr:last-child td { border-bottom: 0; }
.page-wk th { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; background: var(--color-brand-5); }
.page-wk th:first-child, .page-wk td:first-child { font-weight: 600; width: 22%; }
.page-wk td { color: var(--color-muted); }
.page-wk td:first-child { color: var(--color-ink); }
.page-wk .faq { margin-top: 40px; }
.page-wk details { border-bottom: 1px solid var(--color-border); }
.page-wk summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.page-wk summary::-webkit-details-marker { display: none; }
.page-wk summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-muted); stroke-width: 2; transition: transform .2s; }
.page-wk details[open] summary svg { transform: rotate(180deg); }
.page-wk details p { padding: 0 0 16px; font-size: 0.875rem; max-width: 65ch; }
@media (prefers-reduced-motion: reduce) {
.page-wk details summary svg { transition: none; }
}
.page-wk .door-more { margin-top: auto; padding-top: 24px; } /* + .textlink */
.page-wk .hero p.crumb, .page-wk .crumb { margin: 0 0 18px; } /* look: see Components, breadcrumb */
.page-wk .hero-sm .hero-grid { padding-block: 48px; min-height: 0; }
@media (min-width: 768px) {
.page-wk .hero-sm .hero-grid { padding-block: 64px; }
}
.page-wk .hero-sm h1 { font-size: 2.25rem; }
@media (min-width: 768px) {
.page-wk .hero-sm h1 { font-size: 3rem; }
}
.page-wk .hero-sm .hero-illu { max-width: 380px; }
.page-wk .more { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) {
.page-wk .more { grid-template-columns: repeat(3, 1fr); }
}
.page-wk .more a { display: flex; flex-direction: column; padding: 24px; background: var(--color-surface); transition: border-color .15s, background-color .15s; }
.page-wk .more a:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
.page-wk .more b { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
.page-wk .more p { margin-top: 6px; font-size: 0.88rem; }
.page-wk .more .door-more { padding-top: 18px; }
.page-wk .faq-grp { margin: 36px 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.page-wk .faq-grp:first-child { margin-top: 24px; }
.page-wk .hero-sm .hero-illu { max-width: 400px; }
.page-wk .cc { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
.page-wk .cc { grid-template-columns: 1.2fr .8fr; gap: 64px; }
}
.page-wk .cc .h2 { font-size: 1.6rem; }
@media (min-width: 768px) {
.page-wk .cc .h2 { font-size: 1.9rem; }
}
.page-wk .cc .muted { margin-top: 12px; max-width: 34rem; }
.page-wk .cc-rows { display: grid; }
.page-wk .cc-rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-weight: 600; border-bottom: 1px solid var(--color-brand-20); }
.page-wk .cc-rows a:first-child { border-top: 1px solid var(--color-brand-20); }
.page-wk .hero-sm .hero-illu { max-width: 400px; }
@media (min-width: 768px) {
.page-wk .more-2 { grid-template-columns: 1fr 1fr; max-width: 760px; }
}
.page-wk .wsteps { margin-top: 44px; display: grid; max-width: 48rem; }
.page-wk .ws { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 0 22px; padding-bottom: 36px; }
.page-wk .ws:last-child { padding-bottom: 0; }
.page-wk .ws::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--color-brand-20); }
.page-wk .ws:last-child::before { display: none; }
.page-wk .ws-num { width: 48px; height: 48px; border-radius: 999px; background: var(--color-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; box-shadow: 0 0 0 6px #fff; }
.page-wk .ws h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; line-height: 1.25; margin-top: 10px; }
.page-wk .ws p { margin-top: 8px; font-size: 0.95rem; }
.page-wk .ws-link { margin-top: 12px; } /* + .textlink */
.page-wk .routes { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 640px) {
.page-wk .routes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
.page-wk .routes { grid-template-columns: repeat(4, 1fr); }
}
.page-wk .routes .card { padding: 26px 24px; }
.page-wk .routes .card b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; margin-top: 16px; }
.page-wk .routes .card p { margin-top: 6px; font-size: 0.88rem; }
.page-wk .routes .icon-badge { width: 44px; height: 44px; border-radius: 12px; }
.page-wk .routes .icon-badge svg { width: 22px; height: 22px; }
.page-wk .wk-facts { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 720px) {
.page-wk .wk-facts { grid-template-columns: repeat(3, 1fr); }
}
.page-wk .wk-open { gap: 28px; }
@media (min-width:720px) {
.page-wk .wk-open { grid-template-columns: repeat(3, max-content); justify-content: space-between; column-gap: 32px; }
}
.page-wk .wk-open > div { display:flex; gap:14px; align-items:flex-start; }
.page-wk .wk-open > div > div { max-width: 17rem; }
.page-wk .wk-open > div:nth-child(2) > div { max-width: 14.5rem; }
.page-wk .wk-open b { display:block; font-family:var(--font-heading); font-weight:600; font-size:1.15rem; line-height:1.25; color:var(--color-ink); white-space:nowrap; }
.page-wk .wk-open span { display:block; margin-top:6px; font-size:.9rem; color:var(--color-muted); }
.page-wk .wk-globe { width:36px; height:36px; flex:none; object-fit:contain; }
.page-wk .ws .lk-globe svg { display:none; }
.page-wk .ws .lk-globe img { width:16px; height:16px; }
.page-wk .routes .route-tint { background: color-mix(in oklab, var(--color-brand) 24%, white); border: 0; }
.page-wk .routes .route-tint .icon-badge { background: transparent; width: auto; height: auto; border-radius: 0; justify-content: flex-start; color: var(--color-brand-dark); }
.page-wk .routes .route-tint .icon-badge svg { width: 26px; height: 26px; }
.page-wk .bx { margin-top:36px; }
.page-wk .bx b.t { font-family:var(--font-heading); font-weight:600; font-size:1rem; display:block; }
.page-wk .b8 { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); border-radius:24px; padding:36px 40px; display:grid; gap:24px; align-items:center; }
@media (min-width:900px) {
.page-wk .b8 { grid-template-columns:200px 1fr; gap:44px; }
}
.page-wk .b8 ul { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px 32px; }
@media (min-width:700px) {
.page-wk .b8 ul { grid-template-columns:1fr 1fr; }
}
.page-wk .b8 li { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; }
.page-wk .b8 li img { width:16px; height:16px; margin-top:4px; flex:none; }
.page-wk .wk-open { margin-top:36px; padding-top:32px; border-top:1px solid var(--color-brand-20); }
/* ==========================================================================
Page: Compliance en certificeringen (/voor-overheden/compliance/)
Taken over from the approved design; scoped to .page-cp so it cannot
clash with the shared styles above. Shared components come later.
========================================================================== */
.page-cp { font-size: 16px; }
.page-cp h1, .page-cp h2, .page-cp h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.page-cp p { margin: 0; }
.page-cp a { color: inherit; text-decoration: none; }
.page-cp .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.page-cp .wrap-md { max-width: 1100px; }
.page-cp .wrap-sm { max-width: 900px; }
.page-cp .section { padding-block: 52px; }
@media (min-width: 768px) {
.page-cp .section { padding-block: 72px; }
}
.page-cp .bg-surface { background: var(--color-surface); }
.page-cp .bg-white { background: var(--color-bg); }
.page-cp .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.page-cp .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
.page-cp .h2 { font-size: 2.25rem; }
}
.page-cp .muted { color: var(--color-muted); }
.page-cp a:focus-visible, .page-cp summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.page-cp .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.page-cp .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.page-cp .card-white { background: var(--color-bg); }
.page-cp .icon-badge { display: inline-flex; align-items: center; justify-content: center;
background: var(--color-brand-10); color: var(--color-brand); border-radius: 12px; }
.page-cp .icon-badge svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-cp .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.page-cp .hero-dots { position: absolute; right: -64px; top: -40px; width: 340px; height: 280px; pointer-events: none;
background-image: radial-gradient(circle, var(--color-brand-35) 1px, transparent 1px);
background-size: 22px 22px; }
.page-cp .hero-grid { position: relative; display: grid; gap: 32px; align-items: center; padding-block: 56px; }
@media (min-width: 768px) {
.page-cp .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; min-height: 520px; }
}
.page-cp .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
.page-cp .hero h1 { font-size: 3.75rem; }
}
.page-cp .hero h1 span { color: var(--color-brand); }
.page-cp .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.page-cp .hero-illu { width: 100%; max-width: 440px; margin-inline: auto; display: block; height: auto; }
.page-cp .check { flex: none; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center;
border-radius: 999px; background: var(--color-brand-10); color: var(--color-brand); }
.page-cp .check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-cp table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
.page-cp th, .page-cp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.page-cp tr:last-child td { border-bottom: 0; }
.page-cp th { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; background: var(--color-brand-5); }
.page-cp th:first-child, .page-cp td:first-child { font-weight: 600; width: 22%; }
.page-cp td { color: var(--color-muted); }
.page-cp td:first-child { color: var(--color-ink); }
.page-cp .faq { margin-top: 40px; }
.page-cp details { border-bottom: 1px solid var(--color-border); }
.page-cp summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.page-cp summary::-webkit-details-marker { display: none; }
.page-cp summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-muted); stroke-width: 2; transition: transform .2s; }
.page-cp details[open] summary svg { transform: rotate(180deg); }
.page-cp details p { padding: 0 0 16px; font-size: 0.875rem; max-width: 65ch; }
@media (prefers-reduced-motion: reduce) {
.page-cp details summary svg { transition: none; }
}
.page-cp .door-more { margin-top: auto; padding-top: 24px; } /* + .textlink */
.page-cp .hero p.crumb, .page-cp .crumb { margin: 0 0 18px; } /* look: see Components, breadcrumb */
.page-cp .hero-sm .hero-grid { padding-block: 48px; min-height: 0; }
@media (min-width: 768px) {
.page-cp .hero-sm .hero-grid { padding-block: 64px; }
}
.page-cp .hero-sm h1 { font-size: 2.25rem; }
@media (min-width: 768px) {
.page-cp .hero-sm h1 { font-size: 3rem; }
}
.page-cp .hero-sm .hero-illu { max-width: 380px; }
.page-cp .more { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) {
.page-cp .more { grid-template-columns: repeat(3, 1fr); }
}
.page-cp .more a { display: flex; flex-direction: column; padding: 24px; background: var(--color-surface); transition: border-color .15s, background-color .15s; }
.page-cp .more a:hover { border-color: var(--color-brand); background: var(--color-brand-10); }
.page-cp .more b { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; }
.page-cp .more p { margin-top: 6px; font-size: 0.88rem; }
.page-cp .more .door-more { padding-top: 18px; }
.page-cp .faq-grp { margin: 36px 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); }
.page-cp .faq-grp:first-child { margin-top: 24px; }
.page-cp .hero-sm .hero-illu { max-width: 400px; }
@media (min-width: 1024px) {
.page-cp .cert-sub { align-self: start; padding-bottom: 16px; }
.page-cp .cert-means { align-self: start; }
}
.page-cp .cert-logo { height: 84px; display: flex; align-items: center; margin-bottom: 20px; align-self: start; }
.page-cp .cert-logo img { display: block; max-width: 100%; }
.page-cp .cert-sub { margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--color-brand-dark); }
.page-cp .cert-means { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-border); font-size: 0.88rem; color: var(--color-ink); }
.page-cp .cert-means b { font-family: var(--font-heading); font-weight: 600; color: var(--color-brand-dark); }
.page-cp .wtta { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
.page-cp .wtta { grid-template-columns: 1.1fr .9fr; gap: 56px; }
}
.page-cp .tl { list-style: none; margin: 0; padding: 0; position: relative; }
.page-cp .tl::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--color-brand-20); }
.page-cp .tl li { position: relative; padding: 0 0 22px 36px; }
.page-cp .tl li:last-child { padding-bottom: 0; }
.page-cp .tl li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 12px; border-radius: 3px; background: var(--color-brand); }
.page-cp .tl li:last-child::before { background: var(--color-brand-dark); }
.page-cp .tl b { display: block; font-family: var(--font-heading); font-weight: 600; }
.page-cp .tl span { font-size: 0.9rem; color: var(--color-muted); }
.page-cp .faq-body { padding-bottom: 16px; font-size: 0.875rem; max-width: 65ch; }
.page-cp .faq-body p { padding: 0; }
.page-cp .faq-body ul { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.page-cp .faq-body ul:last-child { margin-bottom: 0; }
.page-cp .faq-body li::marker { color: var(--color-brand); }
.page-cp .cc { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
.page-cp .cc { grid-template-columns: 1.2fr .8fr; gap: 64px; }
}
.page-cp .cc .h2 { font-size: 1.6rem; }
@media (min-width: 768px) {
.page-cp .cc .h2 { font-size: 1.9rem; }
}
.page-cp .cc .muted { margin-top: 12px; max-width: 34rem; }
.page-cp .cc-rows { display: grid; }
.page-cp .cc-rows a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-weight: 600; border-bottom: 1px solid var(--color-brand-20); }
.page-cp .cc-rows a:first-child { border-top: 1px solid var(--color-brand-20); }
.page-cp .hero-sm .hero-illu { max-width: 400px; }
.page-cp .dos { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1024px) {
.page-cp .dos { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}
@media (min-width: 1024px) {
.page-cp .cert-sub { align-self: start; padding-bottom: 16px; }
.page-cp .cert-means { align-self: start; }
}
.page-cp .cert-logo { height: 84px; display: flex; align-items: center; margin-bottom: 20px; align-self: start; }
.page-cp .cert-logo img { display: block; max-width: 100%; }
.page-cp .cert-sub { margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--color-brand-dark); }
.page-cp .cert-means { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-border); font-size: 0.88rem; color: var(--color-ink); }
.page-cp .cert-means b { font-family: var(--font-heading); font-weight: 600; color: var(--color-brand-dark); }
.page-cp .wtta { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
.page-cp .wtta { grid-template-columns: 1.1fr .9fr; gap: 56px; }
}
.page-cp .tl { list-style: none; margin: 0; padding: 0; position: relative; }
.page-cp .tl::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--color-brand-20); }
.page-cp .tl li { position: relative; padding: 0 0 22px 36px; }
.page-cp .tl li:last-child { padding-bottom: 0; }
.page-cp .tl li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 12px; border-radius: 3px; background: var(--color-brand); }
.page-cp .tl li:last-child::before { background: var(--color-brand-dark); }
.page-cp .tl b { display: block; font-family: var(--font-heading); font-weight: 600; }
.page-cp .tl span { font-size: 0.9rem; color: var(--color-muted); }
@media (min-width: 768px) {
.page-cp .more-2 { grid-template-columns: 1fr 1fr; max-width: 760px; }
}
.page-cp .sep-ic { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; }
.page-cp .sep-ic svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
.page-cp .sep-ic { margin: 4px 0 0; }
}
.page-cp .arch .two { display: grid; gap: 24px; margin-top: 36px; }
@media (min-width: 900px) {
.page-cp .arch .two { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.page-cp .arch .two > * { min-width: 0; }
.page-cp .tc-lists > div { min-width: 0; }
.page-cp .arch-grp { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; }
.page-cp .tc { padding: 28px; border-radius: 24px; border: 1.5px solid var(--color-brand-45); background: #fff; }
.page-cp .tc.plain { padding: 0; border: 0; background: transparent; }
.page-cp .tc-head { display: flex; align-items: center; gap: 12px; }
.page-cp .tc-head .kicker { margin: 0; }
.page-cp .tc .sep-ic { margin: 0; width: 36px; height: 36px; }
.page-cp .tc .sep-ic svg { width: 18px; height: 18px; }
.page-cp .tc h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; margin-top: 14px; line-height: 1.25; }
.page-cp .tc > .muted { margin-top: 10px; font-size: 0.92rem; }
.page-cp .tc-lists { display: grid; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.page-cp .tc-lists b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand-dark); margin-bottom: 8px; }
.page-cp .tc-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.86rem; }
.page-cp .tc-lists li { padding-left: 16px; position: relative; }
.page-cp .tc-lists li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--color-brand); }
.page-cp .bg-surface .tc.plain .sep-ic, .page-cp .bg-surface .tc .sep-ic { background: #fff; }
.page-cp .bg-surface .tc-lists { border-top-color: var(--color-brand-20); }
.page-cp .arch .tint { padding: 32px; border-radius: 24px; }
.page-cp .arch .t0 { background: color-mix(in oklab, var(--color-brand) 12%, white); }
.page-cp .arch .t1 { background: color-mix(in oklab, var(--color-brand) 24%, white); }
.page-cp .arch .tint .sep-ic { background: #fff; }
.page-cp .arch .tint .tc-lists { border-top-color: rgba(0,148,206,.2); }
@media (min-width: 900px) {
.page-cp #vorm .two { grid-template-rows: auto auto auto auto auto; }
.page-cp #vorm .tint { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; }
.page-cp #vorm .tint .tc, .page-cp #vorm .tint .tc-lists { display: contents; }
.page-cp #vorm .tint .arch-grp { margin-top: 14px; margin-bottom: 0; }
.page-cp #vorm .tint .tc h3 { margin-top: 14px; }
.page-cp #vorm .tint .tc > .muted { margin-top: 14px; padding-bottom: 16px; }
.page-cp #vorm .tint .tc-lists > div:first-child { border-top: 1px solid rgba(0,148,206,.2); padding-top: 16px; padding-bottom: 16px; }
}
.page-cp .tc-lists b { position: relative; display: inline-flex !important; align-items: center; padding-left: 16px; padding-bottom: 6px; margin-bottom: 10px !important; background: linear-gradient(var(--color-brand), var(--color-brand)) no-repeat left 16px bottom / calc(100% - 16px) 2px; }
.page-cp .lb-ic { position: absolute; left: -3px; top: calc(50% - 3px); transform: translateY(-50%); width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.page-cp img.lb-ic { object-fit: contain; }
.page-cp .lb-gov svg { width: 12px; height: 12px; fill: none; stroke: var(--color-brand-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-cp .tc-lists { border-top: 0; padding-top: 8px; gap: 28px; }
.page-cp #vorm .tint .tc-lists > div:first-child { border-top: 0; padding-top: 8px; padding-bottom: 28px; }
.page-cp #altijd .two { margin-top: 36px; }
.page-cp #vorm .tint .tc-head .sep-ic, .page-cp #altijd .tint .tc-head .sep-ic { background: transparent; width: 20px; height: 20px; border-radius: 0; margin: 0; padding: 0; }
.page-cp #vorm .tint .tc-head .sep-ic svg, .page-cp #altijd .tint .tc-head .sep-ic svg { width: 20px; height: 20px; }
.page-cp #vorm .tint .tc-head, .page-cp #altijd .tint .tc-head { gap: 10px; }
.page-cp .dos-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; margin: 0 0 16px; color: color-mix(in oklab, var(--color-brand-dark) 45%, var(--color-ink)); }
.page-cp .gl { list-style: none; margin: 0; padding: 0; }
.page-cp .gl li { display: flex; gap: 12px; align-items: center; }
.page-cp .gb { width: 16px; height: 16px; flex: none; object-fit: contain; }
.page-cp .gl b { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
.page-cp .gl3 { display: grid; gap: 14px 28px; }
@media (min-width: 640px) {
.page-cp .gl3 { grid-template-columns: 1fr 1fr; }
}
.page-cp .dos { align-items: center; }
.page-cp .sheet { position: relative; background: color-mix(in oklab, var(--color-brand) 20%, white); border-radius: 6px 24px 6px 6px; padding: 28px 32px; }
.page-cp .sheet::before { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--color-surface) 50%, color-mix(in oklab, var(--color-brand) 40%, white) 50%); border-radius: 0 24px 0 6px; }
.page-cp .crows { margin-top: 36px; display: grid; }
.page-cp .crow { display: grid; gap: 16px 32px; padding: 28px 0; border-top: 1px solid var(--color-brand-20); }
.page-cp .crow:first-child { border-top: 0; padding-top: 8px; }
.page-cp .crow:last-child { padding-bottom: 0; }
@media (min-width: 1024px) {
.page-cp .crow { grid-template-columns: 180px 1.3fr 1fr; align-items: start; }
.page-cp .crow .cert-means { align-self: center; display: grid; align-content: center; min-height: 168px; }
.page-cp .crow .cert-logo { align-self: center; }
}
.page-cp .crow .cert-logo { height: auto; margin: 0; display: flex; align-items: center; }
.page-cp .crow .cert-logo img { display: block; max-width: 100%; }
.page-cp .crow h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; margin: 0; }
.page-cp .crow .cert-sub { margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--color-brand-dark); }
.page-cp .crow .muted { margin-top: 12px; font-size: 0.92rem; }
.page-cp .crow .cert-means { margin: 0; padding: 18px 20px; border: 0; border-radius: 16px; background: var(--color-surface); font-size: 0.88rem; color: var(--color-ink); }
.page-cp .crow .cert-means b { font-family: var(--font-heading); font-weight: 600; color: var(--color-brand-dark); }
.page-cp .cert-hd { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) {
.page-cp .cert-hd { grid-template-columns: 1fr 200px; gap: 48px; }
}
.page-cp .cert-illu { width: 170px; height: 170px; margin-inline: auto; display: block; }
.page-cp .bg-white.arch .tint.t0 { background: var(--color-brand-5); border: 1.5px solid var(--color-brand-45); }
.page-cp .bg-white.arch .tint.t0 .sep-ic { background: transparent; width: 20px; height: 20px; border-radius: 0; color: var(--color-brand); display:inline-flex; align-items:center; justify-content:center; }
.page-cp .bg-white.arch .tint.t0 .sep-ic svg { width: 20px; height: 20px; stroke-width: 2; }
.page-cp .bg-white.arch .tint.t0 .tc-head { align-items: center; gap: 10px; }
.page-cp .bg-white.arch .tint.t0 .tc-head .kicker { line-height: 1; padding-top: 1px; }
/* Open sollicitatie without a form: the contact block comes first */
.os-wrap--form > .os-direct:first-child { margin-top: 0; padding-top: 0; border-top: 0; color: var(--color-text); }