/* =========================================================
FlexHero — Randstad-style uitzendbureau site
Brand: Deep green + Lime + Cream · Poppins + Open Sans
========================================================= */
:root {
--green: #88D932;
--green-bright: #9CFF36;
--green-deep: #0C261B;
--green-darker: #061410;
--green-mid: #143426;
--green-ink: #6FB827;
/* A11y: WCAG-conform accent voor groen op cream (4.6:1) — gebruik in plaats
van --green / --green-ink wanneer tekst op licht (cream/white) staat */
--green-text: #3F7A0E;
--cream: #FCF7F2;
--cream-2: #F4ECE1;
--rule: #E5DCCD;
--paper: #FFFFFF;
--ink: #1D1D1B;
--ink-2: #2A2A28;
/* A11y: was #6B6B66 (4.9:1 op cream). Iets donkerder voor 5.7:1 marge. */
--muted: #5F5F5B;
--f-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
--f-sans: "Open Sans", "Helvetica Neue", Arial, sans-serif;
--container: 1280px;
--gutter: clamp(20px, 4vw, 48px);
/* ============================================================
DESIGN-TOKEN SYSTEM (S-tier foundation)
Use these everywhere — geen hardcoded magic-numbers meer.
============================================================ */
/* SPACING SCALE (8-point grid, fluid op key-stops) */
--space-3xs: 2px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-4xl: 64px;
--space-5xl: 96px;
--space-6xl: 128px;
--space-7xl: 192px;
/* Section padding presets (fluid op viewport) */
--pad-section-sm: clamp(48px, 6vw, 72px);
--pad-section-md: clamp(72px, 9vw, 112px);
--pad-section-lg: clamp(96px, 12vw, 160px);
--pad-section-xl: clamp(120px, 16vw, 200px);
/* RADIUS SCALE */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-base: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-3xl: 36px;
--radius-pill: 999px;
--radius: var(--radius-sm); /* legacy fallback */
/* SHADOW SCALE (semantic, no random rgba) */
--shadow-xs: 0 1px 2px rgba(8, 24, 17, 0.06);
--shadow-sm: 0 2px 6px rgba(8, 24, 17, 0.07), 0 1px 2px rgba(8, 24, 17, 0.04);
--shadow-md: 0 8px 22px -4px rgba(8, 24, 17, 0.10), 0 3px 8px -2px rgba(8, 24, 17, 0.06);
--shadow-lg: 0 18px 40px -8px rgba(8, 24, 17, 0.16), 0 6px 14px -3px rgba(8, 24, 17, 0.08);
--shadow-xl: 0 28px 60px -12px rgba(8, 24, 17, 0.22), 0 10px 22px -5px rgba(8, 24, 17, 0.12);
--shadow-2xl: 0 40px 80px -16px rgba(8, 24, 17, 0.28), 0 14px 28px -8px rgba(8, 24, 17, 0.14);
/* Special shadows */
--shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.50);
--shadow-inner-dark: inset 0 -1px 0 rgba(12, 38, 27, 0.05);
--shadow-glow-green: 0 8px 28px rgba(136, 217, 50, 0.32), 0 2px 8px rgba(136, 217, 50, 0.20);
--shadow-glow-green-lg:0 16px 48px rgba(136, 217, 50, 0.42), 0 6px 16px rgba(136, 217, 50, 0.28);
--shadow-ring-green: 0 0 0 4px rgba(136, 217, 50, 0.20);
--shadow-ring-ink: 0 0 0 4px rgba(8, 24, 17, 0.12);
/* EASING / TIMING (premium motion curves) */
--ease-out: cubic-bezier(.2, .78, .2, 1); /* standard out — exit/landing */
--ease-out-fast: cubic-bezier(.34, .82, .34, 1); /* snappier exits */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* button-press overshoot */
--ease-spring-soft:cubic-bezier(.16, 1.11, .34, 1); /* subtle spring */
--ease-in-out: cubic-bezier(.4, 0, .2, 1); /* reveals & transforms */
--ease-magnetic: cubic-bezier(.16, .84, .34, 1); /* cursor-follow */
--ease-decel: cubic-bezier(0, 0, .2, 1); /* deceleration only */
/* DURATIONS */
--dur-instant: 0ms;
--dur-micro: 80ms;
--dur-fast: 150ms;
--dur-base: 220ms;
--dur-slow: 360ms;
--dur-slower: 550ms;
--dur-cinema: 800ms;
--dur-reveal: 1100ms; /* hero/section reveal */
/* Z-INDEX SCALE */
--z-behind: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-overlay: 400;
--z-modal: 500;
--z-popover: 600;
--z-toast: 700;
--z-tooltip: 800;
--z-max: 9999;
/* TYPOGRAPHY — type-scale fluid */
--text-xs: 12px;
--text-sm: 13.5px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 19px;
--text-xl: clamp(20px, 1.4vw, 22px);
--text-2xl: clamp(24px, 1.8vw, 28px);
--text-3xl: clamp(28px, 2.4vw, 36px);
--text-4xl: clamp(36px, 3.5vw, 48px);
--text-5xl: clamp(44px, 5vw, 64px);
--text-6xl: clamp(56px, 7vw, 88px);
--text-7xl: clamp(64px, 9vw, 112px);
--text-8xl: clamp(80px, 11vw, 144px);
/* LINE-HEIGHTS (semantic) */
--lh-tight: 0.96;
--lh-snug: 1.05;
--lh-base: 1.5;
--lh-relaxed: 1.65;
/* LETTER-SPACING optical */
--tracking-tightest: -0.045em;
--tracking-tighter: -0.035em;
--tracking-tight: -0.025em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.14em;
/* SEMANTIC COLOR ALIASES (use these in components) */
--fg: var(--ink);
--fg-muted: var(--ink-2);
--fg-subtle: var(--muted);
--fg-inverse: var(--cream);
--bg: var(--cream);
--bg-elevated: var(--paper);
--bg-recessed: var(--cream-2);
--bg-inverse: var(--green-deep);
--border: var(--rule);
--border-strong: rgba(8, 24, 17, 0.16);
--border-on-dark: rgba(252, 247, 242, 0.16);
--accent: var(--green);
--accent-hover: var(--green-bright);
--accent-text: var(--green-deep);
--accent-soft: rgba(136, 217, 50, 0.10);
--accent-glow: rgba(136, 217, 50, 0.32);
}
/* ============================================================
ICON UTILITY — consistent sizes via .ico modifier classes
------------------------------------------------------------
Use:
============================================================ */
.ico {
display: inline-block;
width: 20px;
height: 20px;
flex-shrink: 0;
vertical-align: middle;
color: currentColor;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.ico-xs { width: 14px; height: 14px; }
.ico-sm { width: 16px; height: 16px; }
.ico-md { width: 22px; height: 22px; }
.ico-lg { width: 28px; height: 28px; }
.ico-xl { width: 36px; height: 36px; }
.ico-2xl { width: 48px; height: 48px; }
.ico-3xl { width: 64px; height: 64px; }
/* For inline-text icons that need to scale with font-size */
.ico-em { width: 1em; height: 1em; vertical-align: -0.15em; }
/* When icon is inside an action that hover-translates */
[class*="-link"]:hover .ico,
button:hover .ico { transition-duration: var(--dur-base); }
/* Icon-box (square gradient-bg container voor highlight-icons) */
.ico-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(136, 217, 50, 0.18), rgba(136, 217, 50, 0.42));
color: var(--accent-text);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.ico-box.is-lg {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
}
.ico-box.is-circle { border-radius: var(--radius-pill); }
.ico-box.is-soft {
background: var(--accent-soft);
box-shadow: none;
}
.ico-box.is-ink {
background: var(--bg-inverse);
color: var(--accent);
}
.ico-box .ico { width: 20px; height: 20px; }
.ico-box.is-lg .ico { width: 26px; height: 26px; }
/* ============================================================
MOTION UTILITIES — pair met motion.js
------------------------------------------------------------
Activeer per element met data-attribuut. CSS hieronder geeft
start-state, JS triggert `.is-revealed` bij intersect.
============================================================ */
/* 1 · REVEALS — translate-up + fade-in */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition:
opacity var(--dur-cinema, 800ms) var(--ease-out, cubic-bezier(.2,.78,.2,1)),
transform var(--dur-cinema, 800ms) var(--ease-out, cubic-bezier(.2,.78,.2,1));
will-change: opacity, transform;
}
[data-reveal].is-revealed {
opacity: 1;
transform: none;
}
/* Variants */
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-revealed { transform: none; }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-revealed { transform: none; }
[data-reveal="up"] { transform: translateY(40px); }
[data-reveal="up"].is-revealed { transform: none; }
[data-reveal="fade"] { transform: none; }
/* Stagger via data-reveal-delay (in motion.js handles delay attr) */
/* Respect prefers-reduced-motion — motion.js already skipt, dit is fallback */
.motion-reduced [data-reveal],
.motion-reduced [data-reveal].is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* 2 · MAGNETIC — transition voor het release (mouseleave) */
[data-magnetic] {
transition: transform var(--dur-slow, 360ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
/* 4 · PARALLAX — base style */
[data-parallax] {
will-change: transform;
transition: transform 0s linear; /* instant op scroll, geen jitter */
}
/* 5 · SCROLL-PROGRESS BAR */
[data-progress] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent, #88D932), var(--green-bright, #9CFF36));
transform-origin: 0 50%;
transform: scaleX(0);
z-index: var(--z-fixed, 300);
pointer-events: none;
box-shadow: 0 1px 4px rgba(136, 217, 50, 0.42);
}
/* 6 · TILT — base CSS */
[data-tilt] {
transition: transform var(--dur-base, 220ms) var(--ease-spring-soft, cubic-bezier(.16,1.11,.34,1));
transform-style: preserve-3d;
}
/* ============================================================
UTILITY: HOVER-LIFT — for interactive cards
============================================================ */
.hover-lift {
transition:
transform var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.2,.78,.2,1)),
box-shadow var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.2,.78,.2,1));
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.hover-lift-sm:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hover-lift-lg:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
/* ============================================================
UTILITY: SCROLL-MARGIN voor anchor-jumps onder sticky-nav
============================================================ */
[id]:target { scroll-margin-top: 100px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip clips the off-canvas mobile nav drawer (position:fixed) so it
can't leak into the document scrollWidth and create a phantom horizontal scroll
on mobile. `clip` (vs `hidden`) does NOT create a scroll container, so the sticky
.nav keeps working. Fallback to hidden for older Safari (<16). */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; color-scheme: light; }
/* ============================================================
POLISH: accessibility + motion + focus (Update 10)
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Skip-to-content link voor toetsenbord-navigatie (verschijnt bij Tab) */
.skip-link {
position: absolute; top: -50px; left: 16px; z-index: 99999;
background: var(--green-deep, #0C261B); color: var(--green, #88D932);
padding: 10px 18px; border-radius: 8px;
font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
text-decoration: none;
transition: top 0.15s ease;
box-shadow: 0 8px 22px rgba(12,38,27,0.30);
}
.skip-link:focus { top: 12px; outline: 3px solid var(--green, #88D932); outline-offset: 2px; }
/* Focus-visible: legacy block — definitive rules zijn onderaan styles.css
in de A11Y PASS-sectie (Update 11). Hier alleen de bare minimum default. */
:focus-visible {
outline: 3px solid var(--green-bright, #9FE94B);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* Trust-badge tooltip op hover/focus (cert-banner) */
.cert-banner .cert-banner-mark[data-info] { position: relative; cursor: help; }
.cert-banner .cert-banner-mark[data-info]::after {
content: attr(data-info);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--green-deep, #0C261B);
color: var(--cream, #FCF7F2);
padding: 8px 12px;
border-radius: 8px;
font-size: 11px;
line-height: 1.45;
white-space: normal;
width: max-content;
max-width: 240px;
text-align: left;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
pointer-events: none;
z-index: 100;
box-shadow: 0 8px 24px rgba(12,38,27,0.20);
}
.cert-banner .cert-banner-mark[data-info]::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--green-deep, #0C261B);
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
z-index: 101;
}
.cert-banner .cert-banner-mark[data-info]:hover::after,
.cert-banner .cert-banner-mark[data-info]:focus-within::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); }
.cert-banner .cert-banner-mark[data-info]:hover::before,
.cert-banner .cert-banner-mark[data-info]:focus-within::before { opacity: 1; }
body {
background: var(--cream);
color: var(--ink);
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* fallback oudere Safari (<16) */
overflow-x: clip; /* clip i.p.v. hidden: geen scroll-container, zodat de sticky .nav blijft plakken */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--green); color: var(--green-deep); }
.wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--green-deep);
line-height: 1.1;
}
/* ============================================
TOP UTILITY BAR
============================================ */
.utility {
background: var(--green-deep);
color: var(--cream);
font-size: 13px;
padding: 9px 0;
position: relative;
z-index: 60;
}
.utility .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.utility-left {
display: flex;
align-items: center;
gap: 22px;
font-weight: 500;
}
.utility-left .live-dot {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--green);
}
.utility-left .live-dot::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(136,217,50,.6);
animation: dotPulse 1.8s infinite cubic-bezier(0,0,.2,1);
}
@keyframes dotPulse {
0% { box-shadow: 0 0 0 0 rgba(136,217,50,.55); }
70% { box-shadow: 0 0 0 10px rgba(136,217,50,0); }
100% { box-shadow: 0 0 0 0 rgba(136,217,50,0); }
}
.utility-right { display: flex; gap: 22px; opacity: 0.85; }
.utility-right a:hover { opacity: 1; color: var(--green); }
@media (max-width: 880px) {
.utility-right { display: none; }
}
/* ============================================
MAIN NAV
============================================ */
.nav {
background: var(--paper);
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
z-index: 50;
transition: box-shadow .2s ease;
}
.nav.scrolled { box-shadow: 0 4px 20px rgba(12,38,27,0.06); }
/* Header krijgt ruimere container (rest van site blijft 1280px) */
.nav > .wrap { max-width: 1440px; }
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: center;
height: 80px;
}
.logo {
display: inline-flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
min-width: 160px;
}
.logo img {
height: 36px;
width: auto;
max-width: 100%;
display: block;
}
.nav-links {
display: flex;
gap: 2px;
font-size: 14px;
font-weight: 600;
color: var(--ink);
font-family: var(--f-display);
justify-content: center;
}
.nav-links > .item {
position: relative;
}
.nav-links > .item > a {
padding: 9px 13px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background .15s ease;
}
/* Pijltjes alleen op items met mega-menu */
.nav-links > .item.has-mega > a::after {
content: "▾";
font-size: 9px;
opacity: 0.5;
margin-top: 1px;
}
.nav-links > .item:hover > a { background: var(--cream-2); }
.nav-links > .item.active > a { color: var(--green-text); }
/* Mega menu */
.mega {
position: absolute;
top: calc(100% + 8px);
left: -20px;
width: 720px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: 0 24px 60px rgba(12,38,27,0.12);
display: none;
grid-template-columns: 1fr 1fr;
gap: 32px;
font-size: 14px;
font-weight: 400;
}
.mega.mega-3col {
width: 920px;
grid-template-columns: 1fr 1fr 1fr;
gap: 28px;
}
.nav-links > .item:hover .mega { display: grid; }
/* Hover-brug over de 8px-gap: een onzichtbaar ::before vult de ruimte tussen
trigger en paneel. Het is een descendant van .item, dus de muis erover houdt
.item:hover actief → het mega-menu sluit niet bij het naar beneden bewegen. */
.mega::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
.mega .col-label, .mega h3, .mega h5 {
display: block;
font-family: var(--f-display);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
font-weight: 700;
}
.mega-col {
display: flex;
flex-direction: column;
gap: 4px;
}
.mega-col a {
padding: 9px 12px;
margin: 0 -12px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink);
transition: background .15s ease, color .15s ease;
font-weight: 500;
}
.mega-col a:hover {
background: var(--cream-2);
color: var(--green-deep);
}
.mega-col a .arr { opacity: 0.4; transition: transform .2s ease; }
.mega-col a:hover .arr { opacity: 0.9; transform: translateX(2px); }
.nav-cta-group {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
/* Taalwisselaar — uitklapbare dropdown (build_langswitch.py).
Ingeklapt: alleen de vlag (+ caret). Uitgeklapt: vlag + afkorting per taal. */
.lang-switch {
position: relative;
display: inline-flex;
margin-right: 2px;
font-family: var(--f-display);
}
.lang-switch > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--rule);
border-radius: 999px;
padding: 5px 8px 5px 9px;
line-height: 1;
transition: background .15s ease, border-color .15s ease;
-webkit-tap-highlight-color: transparent;
}
.lang-switch > summary::-webkit-details-marker,
.lang-switch > summary::marker { display: none; content: ""; }
.lang-switch > summary:hover,
.lang-switch[open] > summary { background: var(--cream-2); border-color: var(--green); }
.lang-switch .lang-flag { font-size: 15px; line-height: 1; }
.lang-switch .lang-caret { color: var(--muted); transition: transform .18s ease; flex-shrink: 0; }
.lang-switch[open] > summary .lang-caret { transform: rotate(180deg); }
.lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
margin: 0;
padding: 4px;
list-style: none;
min-width: 96px;
background: var(--paper, #fff);
border: 1px solid var(--rule);
border-radius: 12px;
box-shadow: 0 10px 28px rgba(20, 30, 24, .12);
animation: lang-menu-in .14s ease;
}
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.lang-menu a {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 11px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
color: var(--ink-2, var(--muted));
line-height: 1;
transition: background .12s ease, color .12s ease;
}
.lang-menu a:hover { background: var(--cream-2); color: var(--green-deep); }
.lang-menu a[aria-current] { background: var(--green-deep); color: var(--cream); }
@media (max-width: 980px) {
/* in de header verbergen op mobiel; mobile-nav.js kloont 'm in de drawer */
.nav-cta-group > .lang-switch { display: none; }
/* drawer-variant: menu in-flow i.p.v. absoluut (geen overflow) */
.drawer-lang .lang-menu {
position: static; box-shadow: none; border: 0; padding: 4px 0 0;
min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; animation: none;
}
}
/* kloon in de mobiele drawer */
.drawer-lang { margin: 4px 0 18px; }
.drawer-lang .lang-switch { border-color: rgba(244,236,225,.22); }
.drawer-lang .lang-switch a { color: var(--cream); opacity: .8; }
.drawer-lang .lang-switch a[aria-current] { background: var(--green); color: var(--green-deep); opacity: 1; }
.nav-cta-group .icon-btn {
width: 40px; height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule);
color: var(--green-deep);
transition: all .15s ease;
}
.nav-cta-group .icon-btn:hover {
background: var(--green-deep);
color: var(--cream);
border-color: var(--green-deep);
}
.nav-cta-group .nav-cta {
background: var(--green);
color: var(--green-deep);
padding: 0 20px;
height: 40px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: var(--f-display);
transition: all .2s ease;
box-sizing: border-box;
}
.nav-cta-group .nav-cta:hover {
background: var(--green-bright);
transform: translateY(-1px);
}
@media (max-width: 980px) {
.nav-links { display: none; }
.nav-inner { grid-template-columns: auto 1fr; }
}
/* ============================================
HERO
============================================ */
.hero {
/* Donkergroen + lichte diagonale schaduw van links-onder naar rechts-boven */
background:
/* Lichte glow in de rechter-bovenhoek */
radial-gradient(ellipse 900px 700px at 95% 5%, rgba(136, 217, 50, 0.14), transparent 60%),
/* Diepere schaduw in de linker-onderhoek */
radial-gradient(ellipse 800px 600px at 5% 95%, rgba(0, 0, 0, 0.35), transparent 65%),
/* Diagonale lichte wash van linksonder naar rechtsboven */
linear-gradient(45deg, #06180E 0%, var(--green-deep) 45%, #143A28 100%);
color: var(--cream);
position: relative;
overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }
.hero-grain {
position: absolute;
inset: 0;
opacity: 0.45;
pointer-events: none;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.13 0 0 0 0 0.09 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 56px;
align-items: center;
padding: 64px 0 32px;
position: relative;
}
.hero-inner > * { min-width: 0; }
@media (max-width: 980px) {
.hero-inner { grid-template-columns: minmax(0, 1fr); padding: 44px 0 24px; }
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 28px;
color: var(--green);
font-family: var(--f-display);
}
.hero-eyebrow::before {
content: "";
width: 24px; height: 2px;
background: var(--green);
}
.hero h1 {
font-size: clamp(42px, 5.6vw, 80px);
color: var(--cream);
letter-spacing: -0.035em;
line-height: 1.02;
margin-bottom: 24px;
}
.hero h1 .accent {
position: relative;
display: inline-block;
color: var(--green);
}
.hero p.lead {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.5;
max-width: 60ch;
opacity: 0.88;
color: var(--cream);
margin-bottom: 12px;
}
.hero .lead-claims {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.4;
color: var(--green);
max-width: 60ch;
margin: 0 0 36px 0;
}
.hero .lead-claims em {
font-style: italic;
font-weight: 400;
}
/* Job-search box (Randstad style) */
.search-box {
background: var(--cream);
border-radius: var(--radius-lg);
padding: 8px;
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 4px;
box-shadow: 0 24px 60px rgba(0,0,0,0.18);
max-width: 640px;
}
.search-field {
position: relative;
background: var(--paper);
border-radius: 10px;
padding: 12px 16px 10px 48px;
border: 1px solid transparent;
transition: border-color .2s ease;
}
.search-field:focus-within { border-color: var(--green); }
.search-field .ic {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
color: var(--green-text);
}
.search-field label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-family: var(--f-display);
margin-bottom: 2px;
}
.search-field input {
width: 100%;
border: 0;
outline: none;
background: transparent;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--ink);
font-family: var(--f-sans);
}
.search-field input::placeholder { color: var(--muted); font-weight: 500; }
.search-submit {
background: var(--green-deep);
color: var(--cream);
border-radius: 10px;
padding: 0 28px;
font-family: var(--f-display);
font-weight: 700;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background .2s ease;
}
.search-submit:hover { background: var(--green-darker); color: var(--green); }
.search-submit svg { width: 18px; height: 18px; }
@media (max-width: 660px) {
.search-box { grid-template-columns: 1fr; }
.search-submit { padding: 16px; justify-content: center; }
}
.search-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 24px;
font-size: 14px;
flex-wrap: wrap;
}
.search-meta .pop {
opacity: 0.7;
font-size: 13px;
margin-right: 8px;
}
.search-meta .chip {
background: rgba(244,236,225,0.08);
border: 1px solid rgba(244,236,225,0.18);
color: var(--cream);
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
transition: all .15s ease;
}
.search-meta .chip:hover {
background: var(--green);
color: var(--green-deep);
border-color: var(--green);
}
/* Hero side card */
.hero-side {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 480px;
background: var(--green-mid);
}
.hero-side .img {
position: absolute;
inset: 0;
}
.hero-side .img img {
width: 100%; height: 100%;
object-fit: cover;
}
.hero-side .img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(12,38,27,0.2) 0%, rgba(12,38,27,0.85) 100%);
}
.hero-side .badge {
position: absolute;
top: 24px; left: 24px;
background: var(--cream);
color: var(--green-deep);
padding: 8px 14px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.hero-side .badge::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-ink);
box-shadow: 0 0 0 0 rgba(111, 184, 39, .55);
animation: heroLivePulse 1.8s ease-out infinite;
}
@keyframes heroLivePulse {
0% { box-shadow: 0 0 0 0 rgba(111, 184, 39, .55); }
70% { box-shadow: 0 0 0 10px rgba(111, 184, 39, 0); }
100% { box-shadow: 0 0 0 0 rgba(111, 184, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-side .badge::before { animation: none; }
}
/* Suffix-tekst naast hero-stat getal (bv. "Google", "u") */
.hero-stats-charts .num .num-suf {
font-family: var(--f-sans);
font-size: 13px;
font-weight: 600;
opacity: .72;
margin-left: 4px;
letter-spacing: 0;
}
.hero-side .panel {
position: absolute;
bottom: 24px; left: 24px; right: 24px;
background: var(--cream);
border-radius: 12px;
padding: 24px;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 16px;
z-index: 2;
}
.hero-side .panel .stat-num {
font-family: var(--f-display);
font-size: 56px;
line-height: 0.9;
font-weight: 800;
color: var(--green-deep);
letter-spacing: -0.04em;
}
.hero-side .panel .stat-num em { font-style: normal; color: var(--green-text); }
.hero-side .panel .stat-lbl {
font-size: 13px;
font-weight: 600;
color: var(--muted);
margin-top: 4px;
font-family: var(--f-display);
}
.hero-side .panel .arrow-btn {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--green);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
transition: all .2s ease;
}
.hero-side .panel .arrow-btn:hover { background: var(--green-deep); color: var(--green); }
/* Trust-strip — sociale proof boven de stats-row, voor diepte in hero */
.hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 0 26px;
border-top: 1px solid rgba(244, 236, 225, 0.10);
border-bottom: 1px solid rgba(244, 236, 225, 0.10);
margin-top: 32px;
}
.hero-trust .ht-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(252, 247, 242, 0.78);
font-family: var(--f-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.hero-trust .ht-ico {
font-size: 14px;
line-height: 1;
}
.hero-trust .ht-sep {
width: 3px;
height: 3px;
background: rgba(244, 236, 225, 0.25);
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 760px) {
.hero-trust { gap: 10px; font-size: 11px; padding: 18px 0 20px; }
.hero-trust .ht-sep { display: none; }
}
.hero-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 28px 0 48px;
margin-top: 0;
border-top: none;
}
/* ============================================================
HERO STATS · MINI-CHARTS (chart bovenop, dan cijfer + label)
============================================================ */
.hero-stats-charts .item {
display: flex;
flex-direction: column;
gap: 16px;
}
.hero-stats-charts .chart {
height: 50px;
display: flex;
align-items: flex-end;
opacity: 0.95;
}
.hero-stats-charts .chart svg {
width: 100%;
height: 100%;
display: block;
}
/* 1 · Bars: staafjes "groeien" sequentieel */
.hero-stats-charts .chart-bars rect {
transform-origin: bottom;
animation: bar-grow .8s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero-stats-charts .chart-bars rect:nth-child(1) { animation-delay: 0.05s; }
.hero-stats-charts .chart-bars rect:nth-child(2) { animation-delay: 0.10s; }
.hero-stats-charts .chart-bars rect:nth-child(3) { animation-delay: 0.15s; }
.hero-stats-charts .chart-bars rect:nth-child(4) { animation-delay: 0.20s; }
.hero-stats-charts .chart-bars rect:nth-child(5) { animation-delay: 0.25s; }
.hero-stats-charts .chart-bars rect:nth-child(6) { animation-delay: 0.30s; }
.hero-stats-charts .chart-bars rect:nth-child(7) { animation-delay: 0.35s; }
.hero-stats-charts .chart-bars rect:nth-child(8) { animation-delay: 0.40s; }
.hero-stats-charts .chart-bars rect:nth-child(9) { animation-delay: 0.45s; }
.hero-stats-charts .chart-bars rect:nth-child(10) { animation-delay: 0.50s; }
.hero-stats-charts .chart-bars rect:nth-child(11) { animation-delay: 0.55s; }
.hero-stats-charts .chart-bars rect:nth-child(12) { animation-delay: 0.60s; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* 2 · Donut: 92% tekent zich */
.hero-stats-charts .chart-donut svg { width: 50px; height: 50px; }
.hero-stats-charts .chart-donut circle:last-child {
stroke-dasharray: 163.36;
stroke-dashoffset: 163.36;
animation: donut-fill 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
@keyframes donut-fill { to { stroke-dashoffset: 13.07; } }
/* 3 · Grid: 35 dots blijven zichtbaar, met continue golf van glow erover */
.hero-stats-charts .chart-grid svg { width: 90px; height: 40px; }
.hero-stats-charts .chart-grid circle {
opacity: 0.35;
animation: dot-wave 4s ease-in-out infinite;
transform-origin: center;
}
@keyframes dot-wave {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; transform: scale(1.15); }
}
.hero-stats-charts .chart-grid circle:nth-child(n) { animation-delay: calc(0.25s + (var(--i, 0) * 0.025s)); }
/* Kunnen geen var per circle in pure CSS doen — sequencing per nth-child: */
.hero-stats-charts .chart-grid circle:nth-child(1) { animation-delay: 0.30s; }
.hero-stats-charts .chart-grid circle:nth-child(2) { animation-delay: 0.32s; }
.hero-stats-charts .chart-grid circle:nth-child(3) { animation-delay: 0.34s; }
.hero-stats-charts .chart-grid circle:nth-child(4) { animation-delay: 0.36s; }
.hero-stats-charts .chart-grid circle:nth-child(5) { animation-delay: 0.38s; }
.hero-stats-charts .chart-grid circle:nth-child(6) { animation-delay: 0.40s; }
.hero-stats-charts .chart-grid circle:nth-child(7) { animation-delay: 0.42s; }
.hero-stats-charts .chart-grid circle:nth-child(8) { animation-delay: 0.44s; }
.hero-stats-charts .chart-grid circle:nth-child(9) { animation-delay: 0.46s; }
.hero-stats-charts .chart-grid circle:nth-child(10) { animation-delay: 0.48s; }
.hero-stats-charts .chart-grid circle:nth-child(11) { animation-delay: 0.50s; }
.hero-stats-charts .chart-grid circle:nth-child(12) { animation-delay: 0.52s; }
.hero-stats-charts .chart-grid circle:nth-child(13) { animation-delay: 0.54s; }
.hero-stats-charts .chart-grid circle:nth-child(14) { animation-delay: 0.56s; }
.hero-stats-charts .chart-grid circle:nth-child(15) { animation-delay: 0.58s; }
.hero-stats-charts .chart-grid circle:nth-child(16) { animation-delay: 0.60s; }
.hero-stats-charts .chart-grid circle:nth-child(17) { animation-delay: 0.62s; }
.hero-stats-charts .chart-grid circle:nth-child(18) { animation-delay: 0.64s; }
.hero-stats-charts .chart-grid circle:nth-child(19) { animation-delay: 0.66s; }
.hero-stats-charts .chart-grid circle:nth-child(20) { animation-delay: 0.68s; }
.hero-stats-charts .chart-grid circle:nth-child(21) { animation-delay: 0.70s; }
.hero-stats-charts .chart-grid circle:nth-child(22) { animation-delay: 0.72s; }
.hero-stats-charts .chart-grid circle:nth-child(23) { animation-delay: 0.74s; }
.hero-stats-charts .chart-grid circle:nth-child(24) { animation-delay: 0.76s; }
.hero-stats-charts .chart-grid circle:nth-child(25) { animation-delay: 0.78s; }
.hero-stats-charts .chart-grid circle:nth-child(26) { animation-delay: 0.80s; }
.hero-stats-charts .chart-grid circle:nth-child(27) { animation-delay: 0.82s; }
.hero-stats-charts .chart-grid circle:nth-child(28) { animation-delay: 0.84s; }
.hero-stats-charts .chart-grid circle:nth-child(29) { animation-delay: 0.86s; }
.hero-stats-charts .chart-grid circle:nth-child(30) { animation-delay: 0.88s; }
.hero-stats-charts .chart-grid circle:nth-child(31) { animation-delay: 0.90s; }
.hero-stats-charts .chart-grid circle:nth-child(32) { animation-delay: 0.92s; }
.hero-stats-charts .chart-grid circle:nth-child(33) { animation-delay: 0.94s; }
.hero-stats-charts .chart-grid circle:nth-child(34) { animation-delay: 0.96s; }
.hero-stats-charts .chart-grid circle:nth-child(35) { animation-delay: 0.98s; }
@keyframes dot-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
/* 4 · ECG-pulslijn — landelijke dekking als continu hartslagsignaal */
.hero-stats-charts .chart-pulse svg { width: 100%; height: 44px; }
.hero-stats-charts .chart-pulse .ecg-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: ecg-draw 3s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(136, 217, 50, 0.5));
}
.hero-stats-charts .chart-pulse .ecg-dot {
animation: ecg-dot-move 3s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(136, 217, 50, 0.8));
}
@keyframes ecg-draw {
0% { stroke-dashoffset: 1000; }
60% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1000; }
}
@keyframes ecg-dot-move {
0% { cx: 0; r: 2.4; opacity: 1; }
20% { cx: 30; r: 3.5; }
40% { cx: 70; r: 3.5; }
60% { cx: 110; r: 3.5; }
80% { cx: 140; r: 2.4; opacity: 0; }
100% { cx: 0; r: 2.4; opacity: 0; }
}
@media (max-width: 880px) {
.hero-stats-charts .chart { height: 36px; }
.hero-stats-charts .chart-donut svg,
.hero-stats-charts .chart-map svg,
.hero-stats-charts .chart-radar svg { width: 40px; height: 40px; }
}
@media (max-width: 880px) { .hero-stats-row { grid-template-columns: repeat(2, 1fr); gap: 24px; padding-top: 24px; } }
.hero-stats-row .item {
padding: 0 24px;
border-left: 1px solid rgba(244,236,225,0.12);
}
.hero-stats-row .item:first-child { padding-left: 0; border-left: 0; }
.hero-stats-row .num {
font-family: var(--f-display);
font-size: 36px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--cream);
}
.hero-stats-row .num em { font-style: normal; color: var(--green); }
.hero-stats-row .lbl {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cream);
opacity: 0.6;
margin-top: 8px;
font-weight: 600;
font-family: var(--f-display);
}
/* ============================================
LOGO STRIP (klanten)
============================================ */
.logos {
background: var(--paper);
border-bottom: 1px solid var(--rule);
padding: 32px 0;
}
.logos-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.logos-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-family: var(--f-display);
white-space: nowrap;
}
.logos-list {
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.logos-list .l {
font-family: var(--f-display);
font-weight: 800;
font-size: 20px;
color: var(--ink);
opacity: 0.5;
letter-spacing: -0.02em;
transition: opacity .2s ease;
font-style: italic;
}
.logos-list .l:hover { opacity: 1; color: var(--green-deep); }
/* Client logo's (PNG/SVG) — vervangt italic tekst-versie */
.logos-list .client-logo {
display: inline-flex; align-items: center;
padding: 0; opacity: 0.6;
transition: opacity .2s ease, transform .2s ease, filter .2s ease;
filter: grayscale(40%);
}
.logos-list .client-logo:hover { opacity: 1; transform: translateY(-2px); filter: grayscale(0%); }
.logos-list .client-logo img {
height: 44px; width: auto;
max-width: 160px; object-fit: contain;
display: block;
}
@media (max-width: 760px) {
.logos-list .client-logo img { height: 36px; }
}
/* ============================================
SPECIALISATIES (4 cards)
============================================ */
.specs {
padding: 96px 0;
background: var(--cream);
}
.specs-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 48px;
}
.specs-head .copy h2 {
font-size: clamp(32px, 4vw, 48px);
margin-bottom: 12px;
}
.specs-head .copy p {
font-size: 17px;
color: var(--muted);
max-width: 50ch;
}
.specs-head .nav-arrows {
display: flex;
gap: 8px;
}
.specs-head .nav-arrows button {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--rule);
color: var(--green-deep);
background: var(--paper);
transition: all .15s ease;
}
.specs-head .nav-arrows button:hover { background: var(--green-deep); color: var(--cream); border-color: var(--green-deep); }
@media (max-width: 720px) { .specs-head { flex-direction: column; align-items: flex-start; } }
.specs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 980px) { .specs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .specs-grid { grid-template-columns: 1fr; } }
.spec-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
transition: all .25s ease;
display: flex;
flex-direction: column;
position: relative;
}
.spec-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(12,38,27,0.10);
border-color: var(--green-deep);
}
.spec-card .img {
height: 180px;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
position: relative;
overflow: hidden;
}
.spec-card .img.maak { background: linear-gradient(135deg, #243a2c 0%, #0c261b 100%); }
.spec-card .img.log { background: linear-gradient(135deg, #1f4d35 0%, #0c261b 100%); }
.spec-card .img.tech { background: linear-gradient(135deg, #88D932 0%, #0c261b 100%); }
.spec-card .img.food { background: linear-gradient(135deg, #f4ece1 0%, #88D932 100%); }
.spec-card .img-icon {
position: absolute;
bottom: 18px; right: 18px;
width: 56px; height: 56px;
background: var(--cream);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.spec-card .img-icon svg { width: 28px; height: 28px; color: var(--green-deep); }
.spec-card .body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.spec-card .tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-text);
font-family: var(--f-display);
margin-bottom: 10px;
}
.spec-card h3 {
font-size: 22px;
margin-bottom: 8px;
}
.spec-card p {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 20px;
flex: 1;
}
.spec-card .meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--rule);
font-size: 13px;
}
.spec-card .meta .open {
color: var(--green-deep);
font-weight: 700;
font-family: var(--f-display);
}
.spec-card .meta .open em { font-style: normal; color: var(--green-text); }
.spec-card .meta .arr {
color: var(--green-deep);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap .2s ease;
font-family: var(--f-display);
}
.spec-card:hover .meta .arr { gap: 12px; }
/* ============================================
VACATURES FEED
============================================ */
.jobs {
padding: 96px 0;
background: var(--paper);
border-top: 1px solid var(--rule);
}
.jobs-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.jobs-head h2 {
font-size: clamp(32px, 4vw, 48px);
}
.jobs-head .filter-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-chip {
display: inline-flex;
align-items: center;
min-height: 44px; /* WCAG 2.5.5 / Apple HIG touch target */
padding: 9px 18px;
border-radius: 999px;
border: 1px solid var(--rule);
background: var(--paper);
font-size: 13px;
font-weight: 600;
font-family: var(--f-display);
color: var(--ink);
transition: all .15s ease;
}
.filter-chip:hover { border-color: var(--green-deep); }
.filter-chip.active {
background: var(--green-deep);
color: var(--cream);
border-color: var(--green-deep);
}
.jobs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
@media (max-width: 980px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jobs-grid { grid-template-columns: 1fr; } }
.job-card {
background: var(--cream);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 24px;
transition: all .2s ease;
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
}
.job-card:hover {
background: var(--paper);
border-color: var(--green-deep);
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(12,38,27,0.08);
}
.job-card .top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.job-card .badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.job-card .badge {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
font-family: var(--f-display);
}
.job-card .badge.new { background: var(--green); color: var(--green-deep); }
.job-card .badge.urgent { background: #FFE5C2; color: #8C4A00; }
.job-card .badge.fulltime { background: rgba(12,38,27,0.08); color: var(--green-deep); }
.job-card .save-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--rule);
color: var(--green-deep);
background: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .15s ease;
}
.job-card .save-btn:hover { background: var(--green); border-color: var(--green); }
.job-card .save-btn.saved { background: var(--green-deep); color: var(--green); border-color: var(--green-deep); }
.job-card .save-btn svg { width: 16px; height: 16px; }
.job-card h3 {
font-size: 19px;
line-height: 1.25;
}
.job-card .company {
font-size: 14px;
color: var(--muted);
margin-top: -4px;
}
.job-card .meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
font-size: 13px;
color: var(--ink-2);
}
.job-card .meta .row {
display: inline-flex;
align-items: center;
gap: 6px;
}
.job-card .meta .row svg { width: 14px; height: 14px; color: var(--green-text); flex-shrink: 0; }
.job-card .foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--rule);
margin-top: auto;
}
.job-card .salary {
font-family: var(--f-display);
font-weight: 700;
font-size: 15px;
color: var(--green-deep);
}
.job-card .salary span { font-size: 12px; font-weight: 500; color: var(--muted); }
.job-card .apply {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
color: var(--green-deep);
font-family: var(--f-display);
}
.job-card:hover .apply { color: var(--green-text); }
.jobs-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: 999px;
border: 1.5px solid var(--green-deep);
font-family: var(--f-display);
font-weight: 700;
font-size: 14px;
color: var(--green-deep);
transition: all .2s ease;
}
.btn-outline:hover { background: var(--green-deep); color: var(--cream); }
/* ============================================
AUDIENCE SPLIT (werkgever / vakkracht)
============================================ */
.audience {
padding: 96px 0;
background: var(--cream-2);
}
.audience-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; } }
/* Single-card variant: full-width standalone (gebruikt in opgesplitste audience-secties) */
.audience-grid-single { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.audience.audience-pros { background: var(--green-deep); }
.audience-pros .aud-card.dark { background: transparent; box-shadow: none; border: 1px solid rgba(244,236,225,0.12); }
.audience.audience-single .aud-card { padding: 56px 48px; }
@media (max-width: 760px) {
.audience.audience-single .aud-card { padding: 36px 28px; }
}
.aud-card {
background: var(--paper);
border-radius: var(--radius-lg);
padding: 48px;
position: relative;
overflow: hidden;
transition: all .25s ease;
border: 1px solid var(--rule);
}
.aud-card.dark {
background: var(--green-deep);
color: var(--cream);
border-color: transparent;
}
.aud-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(12,38,27,0.14);
}
.aud-card .pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
margin-bottom: 28px;
}
.aud-card.light .pill { background: var(--cream-2); color: var(--green-deep); }
.aud-card.dark .pill { background: var(--green); color: var(--green-deep); }
.aud-card h2 {
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1;
margin-bottom: 16px;
max-width: 22ch;
text-wrap: balance;
}
.aud-card.dark h2 { color: var(--cream); }
.aud-card.dark h2 .accent { color: var(--green); }
.aud-card.light h2 .accent { color: var(--green-text); }
.aud-card p.lead {
font-size: 16px;
line-height: 1.55;
margin-bottom: 32px;
max-width: 42ch;
}
.aud-card.light p.lead { color: var(--muted); }
.aud-card.dark p.lead { opacity: 0.85; }
.aud-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 36px;
font-size: 14px;
}
.aud-card li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.aud-card li::before {
content: "✓";
width: 22px; height: 22px;
border-radius: 50%;
background: var(--green);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.aud-card .cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.aud-card .btn-primary {
background: var(--green);
color: var(--green-deep);
padding: 14px 24px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
font-family: var(--f-display);
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .2s ease;
}
.aud-card .btn-primary:hover { background: var(--green-bright); transform: translateY(-1px); }
.aud-card .btn-secondary {
padding: 14px 24px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
font-family: var(--f-display);
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .15s ease;
}
.aud-card.light .btn-secondary { color: var(--green-deep); border: 1.5px solid var(--green-deep); }
.aud-card.light .btn-secondary:hover { background: var(--green-deep); color: var(--cream); }
.aud-card.dark .btn-secondary { color: var(--cream); border: 1.5px solid rgba(244,236,225,0.25); }
.aud-card.dark .btn-secondary:hover { border-color: var(--cream); background: rgba(244,236,225,0.08); }
.aud-card .figure {
position: absolute;
top: -40px;
right: -40px;
width: 220px; height: 220px;
border-radius: 50%;
opacity: 0.7;
pointer-events: none;
}
.aud-card.dark .figure { background: radial-gradient(circle at 30% 30%, var(--green) 0%, transparent 70%); opacity: 0.25; }
.aud-card.light .figure { background: radial-gradient(circle at 30% 30%, var(--cream-2) 0%, transparent 70%); }
/* ============================================
WERKWIJZE
============================================ */
.process {
padding: 96px 0;
background: var(--paper);
}
.process-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.process-head h2 { font-size: clamp(32px, 4vw, 48px); max-width: 14ch; }
.process-head p { color: var(--muted); max-width: 44ch; font-size: 17px; }
.process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--rule);
}
@media (max-width: 980px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
padding: 32px 24px 32px 0;
border-right: 1px solid var(--rule);
position: relative;
}
.process-step:last-child { border-right: 0; }
.process-step .num {
font-family: var(--f-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--green-text);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.process-step .num .dot {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--green);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
}
.process-step h3 {
font-size: 19px;
margin-bottom: 12px;
line-height: 1.2;
}
.process-step p {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* ============================================
APP / NEWSLETTER
============================================ */
.app {
padding: 96px 0;
background: var(--green-deep);
color: var(--cream);
position: relative;
overflow: hidden;
}
.app-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
position: relative;
}
@media (max-width: 880px) { .app-grid { grid-template-columns: 1fr; } }
.app h2 {
color: var(--cream);
font-size: clamp(32px, 4vw, 48px);
margin-bottom: 20px;
line-height: 1.05;
}
.app h2 .accent { color: var(--green); }
.app p {
font-size: 17px;
opacity: 0.85;
margin-bottom: 32px;
max-width: 44ch;
}
.app-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.store-btn {
background: var(--cream);
color: var(--green-deep);
padding: 12px 22px;
border-radius: 12px;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all .2s ease;
font-family: var(--f-display);
}
.store-btn:hover { background: var(--green); }
.store-btn .icon { width: 28px; height: 28px; flex-shrink: 0; }
.store-btn .lbl { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .lbl span { font-size: 11px; font-weight: 500; opacity: 0.7; }
.store-btn .lbl strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.phone-mock {
position: relative;
margin: 0 auto;
max-width: 360px;
aspect-ratio: 9 / 18;
background: linear-gradient(180deg, var(--green-mid), var(--green-darker));
border-radius: 38px;
border: 12px solid #061410;
box-shadow: 0 40px 100px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.04);
overflow: hidden;
padding: 18px 14px;
}
.phone-mock .notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 110px; height: 24px;
background: #061410;
border-radius: 0 0 14px 14px;
}
.phone-mock .top-bar {
display: flex;
justify-content: space-between;
font-size: 11px;
font-family: var(--f-display);
font-weight: 700;
margin-bottom: 22px;
padding: 0 8px;
color: var(--cream);
}
.phone-mock h4 {
color: var(--cream);
font-size: 18px;
margin-bottom: 16px;
padding: 0 8px;
}
.phone-mock .pjob {
background: rgba(244,236,225,0.06);
border: 1px solid rgba(244,236,225,0.12);
border-radius: 12px;
padding: 14px;
margin-bottom: 10px;
}
.phone-mock .pjob .pj-head {
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: var(--f-display);
margin-bottom: 8px;
color: var(--green);
}
.phone-mock .pjob .pj-head .new { background: var(--green); color: var(--green-deep); padding: 2px 6px; border-radius: 4px; font-size: 9px; }
.phone-mock .pjob .pj-title {
color: var(--cream);
font-size: 13px;
font-weight: 700;
font-family: var(--f-display);
margin-bottom: 4px;
}
.phone-mock .pjob .pj-meta {
font-size: 11px;
color: var(--cream);
opacity: 0.6;
}
/* ============================================
FOOTER
============================================ */
footer {
background: var(--green-darker);
color: var(--cream);
padding: 72px 0 32px;
}
.foot-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(244,236,225,0.1);
}
@media (max-width: 980px) {
.foot-top { grid-template-columns: 1fr 1fr; }
}
.foot-brand .big {
font-family: var(--f-display);
font-weight: 800;
font-size: 32px;
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.foot-brand .big .accent {
position: relative;
display: inline-block;
color: var(--cream);
}
.foot-brand .big .accent::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0.05em;
height: 0.3em; background: var(--green); z-index: -1;
}
.foot-brand p { font-size: 13px; opacity: 0.7; max-width: 30ch; line-height: 1.5; }
.foot-brand .foot-parent {
font-size: 12px;
opacity: 0.55;
margin-top: 14px;
letter-spacing: 0.02em;
}
.foot-brand .foot-parent strong { color: var(--green); font-weight: 700; opacity: 1; }
/* Social media row */
.social-row {
display: flex; gap: 10px;
margin-top: 22px;
}
.social-row a {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.65);
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.social-row a:hover {
background: var(--green);
color: var(--green-deep);
transform: translateY(-2px);
}
.social-row svg { width: 16px; height: 16px; }
.foot-bot .foot-legal-info {
font-size: 12px;
letter-spacing: 0.02em;
}
.foot-col .col-label, .foot-col h3, .foot-col h5 {
display: block;
font-family: var(--f-display);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 18px;
font-weight: 700;
}
.foot-col a, .foot-col p {
display: block;
font-size: 14px;
margin-bottom: 10px;
opacity: 0.8;
transition: opacity .15s ease, color .15s ease;
}
.foot-col a:hover { opacity: 1; color: var(--green); }
.foot-bot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32px;
font-size: 12px;
opacity: 0.55;
flex-wrap: wrap;
gap: 16px;
}
.foot-bot .certs { display: flex; gap: 18px; font-weight: 700; letter-spacing: 0.08em; font-family: var(--f-display); }
/* Cert-row uit footer verwijderd (legacy CSS, kan terug indien gewenst) */
/* Cert-banner: grote versie voor key pages */
.cert-banner {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 18px;
padding: 32px 36px;
display: flex; flex-wrap: wrap; gap: 18px;
align-items: center;
margin: 32px 0;
box-shadow: 0 4px 18px rgba(12, 38, 27, 0.05);
}
.cert-banner .cert-banner-text {
flex: 1; min-width: 240px;
}
.cert-banner h3 {
font-family: var(--f-display);
font-size: 18px;
margin: 0 0 6px;
color: var(--ink);
letter-spacing: -0.01em;
}
.cert-banner h3 em {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 300;
color: var(--green-text);
}
.cert-banner p {
font-size: 14px;
color: var(--ink-2);
margin: 0;
line-height: 1.5;
}
.cert-banner .cert-banner-marks {
display: flex; gap: 14px; flex-wrap: wrap;
}
.cert-banner .cert-banner-mark {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
background: var(--cream-2);
border-radius: 12px;
}
.cert-banner .cert-banner-mark .cert-mark { width: 44px; height: 44px; }
.cert-banner .cert-banner-mark strong {
font-family: var(--f-display);
font-size: 13px;
color: var(--ink);
letter-spacing: 0.02em;
}
.cert-banner .cert-banner-mark small {
font-size: 11px;
color: var(--ink-2);
display: block;
margin-top: 2px;
}
@media (max-width: 760px) {
.cert-badges { flex-direction: column; gap: 8px; }
.cert-banner { padding: 24px 22px; }
}
.foot-bot a { transition: opacity .15s; }
.foot-bot a:hover { opacity: 1; color: var(--green); }
.foot-legal { display: flex; gap: 18px; }
/* ============================================
CONTINU-STYLE: DIRECT NAAR (dual entry tiles)
============================================ */
.direct {
padding: 56px 0 0;
background: var(--cream);
}
.direct-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 760px) { .direct-grid { grid-template-columns: 1fr; } }
.direct-tile {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 240px;
display: flex;
align-items: flex-end;
padding: 36px;
color: var(--cream);
text-decoration: none;
isolation: isolate;
transition: transform .3s ease;
}
.direct-tile:hover { transform: translateY(-3px); }
.direct-tile img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.direct-tile:hover img { transform: scale(1.05); }
.direct-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(12,38,27,0.1) 0%, rgba(12,38,27,0.85) 70%);
z-index: -1;
}
.direct-tile h3 {
color: var(--cream);
font-size: 24px;
margin-bottom: 8px;
max-width: 22ch;
}
.direct-tile p {
font-size: 14px;
opacity: 0.85;
max-width: 38ch;
line-height: 1.5;
margin-bottom: 16px;
}
.direct-tile .arrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--green);
font-family: var(--f-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
}
.direct-tile .arrow .ic {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--green);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: transform .2s ease;
}
.direct-tile:hover .arrow .ic { transform: translateX(4px); }
/* ============================================
CONTINU-STYLE: ADVISEURS (mensen achter het bureau)
============================================ */
.advisors {
padding: 96px 0;
background: var(--cream);
}
.advisors-head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 56px;
}
@media (max-width: 880px) { .advisors-head { grid-template-columns: 1fr; gap: 24px; } }
.advisors-head .lead-copy {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-text);
margin-bottom: 16px;
font-family: var(--f-display);
}
.advisors-head h2 { font-size: clamp(32px, 4vw, 48px); max-width: 16ch; }
.advisors-head .right p { font-size: 17px; color: var(--muted); max-width: 44ch; }
.advisors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 880px) { .advisors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .advisors-grid { grid-template-columns: 1fr; } }
.advisor {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all .25s ease;
}
.advisor:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(12,38,27,0.10);
border-color: var(--green-deep);
}
.advisor .photo {
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
position: relative;
overflow: hidden;
}
.advisor .photo img {
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(0.9);
}
.advisor .photo .badge {
position: absolute;
top: 14px; left: 14px;
background: var(--cream);
color: var(--green-deep);
padding: 5px 11px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
}
.advisor .body {
padding: 20px 22px 24px;
}
.advisor h4 {
font-size: 18px;
margin-bottom: 4px;
}
.advisor .role {
font-size: 13px;
color: var(--muted);
margin-bottom: 14px;
}
.advisor .links {
display: flex;
gap: 12px;
font-size: 13px;
font-weight: 600;
font-family: var(--f-display);
}
.advisor .links a {
color: var(--green-deep);
display: inline-flex;
align-items: center;
gap: 4px;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: border-color .15s ease;
}
.advisor .links a:hover { border-color: var(--green-deep); }
.advisor .links svg { width: 13px; height: 13px; }
/* Initiaal-avatar fallback (tot er echte portretten zijn) */
.advisor .photo.is-initials { display: grid; place-items: center; }
.advisor .photo .initials {
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(34px, 5vw, 46px);
letter-spacing: 0.02em;
color: var(--cream);
opacity: 0.96;
text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
/* ============================================
CONTINU-STYLE: BLADER VACATURES (alphabetic chip cloud)
============================================ */
.browse {
padding: 80px 0 96px;
background: var(--paper);
border-top: 1px solid var(--rule);
}
.browse h2 {
font-size: clamp(28px, 3vw, 36px);
margin-bottom: 8px;
}
.browse > .wrap > p {
font-size: 15px;
color: var(--muted);
margin-bottom: 32px;
max-width: 50ch;
}
.browse-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.browse-cloud a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 14px;
border-radius: 999px;
background: var(--cream);
border: 1px solid var(--rule);
color: var(--ink);
font-size: 14px;
font-weight: 500;
transition: all .15s ease;
}
.browse-cloud a:hover {
background: var(--green-deep);
border-color: var(--green-deep);
color: var(--cream);
transform: translateY(-1px);
}
.browse-cloud a .count {
font-size: 11px;
color: var(--muted);
font-family: var(--f-display);
font-weight: 700;
}
.browse-cloud a:hover .count { color: var(--green); }
/* ============================================
CONTINU-STYLE: TESTIMONIALS (grote quote + portret)
============================================ */
.testimonials {
padding: 96px 0;
background: var(--cream);
border-top: 1px solid var(--rule);
}
.testimonials-head {
max-width: 56ch;
margin-bottom: 48px;
}
.testimonials-head .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-text);
margin-bottom: 16px;
font-family: var(--f-display);
}
.testimonials-head h2 {
font-size: clamp(32px, 4vw, 44px);
line-height: 1.1;
margin-bottom: 16px;
}
.testimonials-head p {
font-size: 17px;
color: var(--muted);
line-height: 1.5;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 980px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial {
background: var(--paper);
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
padding: 36px 32px;
display: flex;
flex-direction: column;
position: relative;
transition: all .25s ease;
}
.testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(12,38,27,0.08);
}
.testimonial .quote-mark {
font-family: var(--f-display);
font-size: 88px;
line-height: 0.7;
color: var(--green);
margin-bottom: 12px;
font-weight: 800;
letter-spacing: -0.04em;
}
.testimonial .quote {
font-family: var(--f-display);
font-size: 18px;
line-height: 1.45;
font-weight: 500;
color: var(--green-deep);
margin-bottom: 28px;
letter-spacing: -0.01em;
flex: 1;
}
.testimonial .person {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--rule);
}
.testimonial .avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green), var(--green-ink));
flex-shrink: 0;
overflow: hidden;
border: 2px solid var(--cream);
box-shadow: 0 0 0 1px var(--rule);
}
.testimonial .avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial .who { display: flex; flex-direction: column; line-height: 1.3; }
.testimonial .who .name {
font-family: var(--f-display);
font-weight: 700;
font-size: 15px;
color: var(--green-deep);
}
.testimonial .who .role {
font-size: 13px;
color: var(--muted);
}
.testimonial .rating {
position: absolute;
top: 32px; right: 32px;
display: inline-flex;
align-items: center;
gap: 3px;
color: #FFC107; /* amber-yellow voor sterren */
}
.testimonial .rating .ico {
width: 16px;
height: 16px;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}
/* FlexHero shield-badge — gebruikt op medewerker-testimonials i.p.v. fotos */
.fh-shield {
width: 44px;
height: 44px;
display: block;
flex-shrink: 0;
object-fit: contain;
filter: drop-shadow(0 2px 5px rgba(12,38,27,0.18));
}
/* Maak het avatar-cirkel-frame transparant in de testimonials-pros sectie zodat alleen het schild zichtbaar is */
.testimonials-pros .avatar {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
width: 44px !important;
height: 44px !important;
display: flex;
align-items: center;
justify-content: center;
}
/* In de quotes-strip (voor-professionals.html etc.) zit het schild rechtstreeks naast .who-meta */
.qs-card .who .fh-shield {
width: 48px;
height: 48px;
}
/* ============================================
CONTINU-STYLE: COMMUNITY / PADEL-LIKE PARTNERSHIP
============================================ */
.community {
padding: 96px 0;
background: var(--cream);
}
.community h2 .academy-link {
color: inherit;
text-decoration: none;
transition: opacity .15s ease;
}
.community h2 .academy-link:hover { opacity: 0.82; }
.community h2 .academy-link:focus-visible {
outline: 2px solid var(--green);
outline-offset: 4px;
border-radius: 4px;
}
.community-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 880px) { .community-grid { grid-template-columns: 1fr; gap: 32px; } }
.community .img-side {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
background: var(--green-deep);
}
.community .img-side img {
width: 100%; height: 100%;
object-fit: cover;
}
.community .img-side .overlay {
position: absolute;
bottom: 24px; left: 24px;
background: var(--cream);
padding: 14px 20px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 13px;
color: var(--green-deep);
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 10px;
}
.community .img-side .overlay::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-ink);
}
.community .copy .eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-text);
margin-bottom: 18px;
font-family: var(--f-display);
display: inline-flex;
align-items: center;
gap: 12px;
}
.community .copy .eyebrow::before {
content: "";
width: 24px; height: 2px;
background: var(--green-ink);
}
.community .copy h2 {
font-size: clamp(32px, 4vw, 48px);
line-height: 1.05;
margin-bottom: 20px;
max-width: 18ch;
}
.community .copy h2 .accent {
position: relative;
display: inline-block;
}
.community .copy h2 .accent::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em;
height: 0.32em; background: var(--green); z-index: -1;
}
.community .copy p {
font-size: 16px;
line-height: 1.55;
color: var(--ink-2);
margin-bottom: 16px;
max-width: 46ch;
}
.community .stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--rule);
}
.community .stats-row .num {
font-family: var(--f-display);
font-size: 32px;
font-weight: 800;
color: var(--green-deep);
letter-spacing: -0.03em;
line-height: 1;
}
.community .stats-row .lbl {
font-size: 12px;
color: var(--muted);
font-weight: 600;
margin-top: 6px;
}
/* ============================================
VIND JOUW BAAN — ZOEK-CTA onder de hero
Wit vlak (matcht het site-brede patroon: donkere hero -> licht eronder
zoals .city-intro, .feature-grid, .story op alle andere pagina's).
Donkergroene titel met bright green accent op het sleutelwoord.
============================================ */
.vind-baan {
background: var(--paper);
padding: 96px 0 104px;
color: var(--ink);
}
.vind-baan-title {
text-align: center;
font-family: var(--f-display);
font-weight: 800;
font-size: clamp(40px, 6vw, 72px);
letter-spacing: -0.02em;
line-height: 1.04;
color: var(--green-deep);
margin: 0 0 44px;
}
.vind-baan-title em {
color: var(--green);
font-style: normal;
}
.vind-baan-form {
display: grid;
grid-template-columns: 1fr 1fr 96px;
gap: 12px;
max-width: 1040px;
margin: 0 auto;
}
.vind-baan-field { display: block; position: relative; }
.vind-baan-field input {
width: 100%;
height: 68px;
padding: 0 24px;
border: 1px solid var(--rule, #ece6da);
border-radius: 12px;
background: #fff;
color: var(--ink);
font: 16px/1.2 inherit;
outline: none;
box-shadow: 0 2px 8px rgba(12,38,27,0.04);
transition: border-color .15s ease, box-shadow .15s ease;
}
.vind-baan-field input::placeholder { color: var(--muted, #5F5F5B); opacity: 0.7; }
.vind-baan-field input:hover { border-color: #cdd6c6; }
.vind-baan-field input:focus-visible {
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(136,217,50,0.25);
}
.vind-baan-submit {
height: 68px;
border: 0;
border-radius: 12px;
background: var(--green);
color: var(--green-deep);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 18px rgba(136,217,50,0.30);
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vind-baan-submit svg { width: 26px; height: 26px; }
.vind-baan-submit:hover {
background: #9eee44;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(136,217,50,0.40);
}
.vind-baan-submit:active { transform: translateY(0); }
/* Mobiel: het zoek-knopje wordt full-width — toon dan een label i.p.v. een
kale pijl (anders oogt het als een lege groene balk). */
@media (max-width: 720px) {
.vind-baan-submit::before {
content: "Zoek vacatures";
font-family: var(--f-display);
font-weight: 700;
font-size: 16px;
margin-right: 10px;
color: var(--green-deep);
}
}
@media (max-width: 720px) {
.vind-baan { padding: 64px 0 72px; }
.vind-baan-title { margin-bottom: 28px; }
.vind-baan-form { grid-template-columns: 1fr; gap: 10px; }
.vind-baan-field input,
.vind-baan-submit { height: 58px; }
.vind-baan-submit { width: 100%; }
}
/* ============================================
CONTINU-STYLE: KLANTEN GRID (logos as cards)
============================================ */
.clients {
padding: 80px 0;
background: var(--green-deep);
color: var(--cream);
}
.clients h2 {
color: var(--cream);
font-size: clamp(28px, 3vw, 36px);
text-align: center;
margin-bottom: 12px;
}
.clients > .wrap > p {
color: var(--cream);
opacity: 0.7;
text-align: center;
margin-bottom: 48px;
font-size: 15px;
}
/* === Klanten-marquee (oneindige langzame scroll) === */
.clients-marquee {
position: relative;
overflow: hidden;
margin-top: 48px;
padding: 12px 0;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.clients-marquee-track {
display: flex;
gap: 0;
width: max-content;
animation: clientsMarquee 60s linear infinite;
will-change: transform;
}
.clients-marquee:hover .clients-marquee-track {
animation-play-state: paused;
}
@keyframes clientsMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.clients-marquee .client-cell {
flex-shrink: 0;
font-size: 16px; /* basis voor logo-grootte; één waarde schaalt alles op mobiel */
width: 13em; /* 208px — alle witte blokjes identiek breed */
height: 6.25em; /* 100px */
margin: 0 .625em; /* 10px */
padding: 0 1.5em; /* 0 24px */
background: #fff;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.14);
opacity: 0.92;
transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.clients-marquee .client-cell img {
width: auto;
height: 3.125em; /* fallback ~50px */
max-width: 10em; /* 160px — binnen de cel-breedte minus padding */
object-fit: contain;
display: block;
}
/* Optische normalisatie: gelijke oppervlakte per logo (hoogte ~ 1/√verhouding,
gemeten na het wegsnijden van witruimte) zodat alle logo's even groot ogen */
.clients-marquee img[src*="geelen-beton.png"] { height: 2.375em; } /* 38px */
.clients-marquee img[src*="znd.png"] { height: 2.375em; } /* 38px */
.clients-marquee img[src*="csb.png"] { height: 2.6875em; } /* 43px */
.clients-marquee img[src*="van-oorschot"] { height: 2.75em; } /* 44px */
.clients-marquee img[src*="wilting.png"] { height: 2.8125em; } /* 45px */
.clients-marquee img[src*="saris.png"] { height: 2.9375em; } /* 47px */
.clients-marquee img[src*="inno-metal.png"] { height: 3.125em; } /* 50px */
.clients-marquee img[src*="kusters-goumans.png"] { height: 3.375em; } /* 54px */
.clients-marquee img[src*="vdl.png"] { height: 3.375em; } /* 54px */
.clients-marquee img[src*="endevoets.png"] { height: 4em; } /* 64px */
.clients-marquee img[src*="blitta.png"] { height: 4.125em; } /* 66px */
.clients-marquee img[src*="luro.png"] { height: 4.125em; } /* 66px */
.clients-marquee img[src*="nts.jpeg"] { height: 4.125em; } /* 66px */
.clients-marquee .client-cell:hover {
opacity: 1;
transform: scale(1.05);
box-shadow: 0 10px 26px rgba(0,0,0,0.2);
}
/* Reduced motion: stop animation */
@media (prefers-reduced-motion: reduce) {
.clients-marquee-track { animation: none; }
}
@media (max-width: 760px) {
.clients-marquee .client-cell { font-size: 11.5px; margin: 0 .5em; } /* schaalt alle logo's mee naar ~72% */
.clients-marquee-track { animation-duration: 45s; }
}
/* ============================================
CONTINU-STYLE: CONTACT CTA (gesprek aangaan)
============================================ */
.contact-cta {
padding: 96px 0;
background: var(--cream);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
background: var(--paper);
border-radius: var(--radius-lg);
padding: 56px;
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
@media (max-width: 880px) {
.contact-grid { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
}
.contact-grid::before {
content: "";
position: absolute;
bottom: -80px;
right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, var(--green) 0%, transparent 70%);
opacity: 0.18;
pointer-events: none;
}
.contact-grid h2 {
font-size: clamp(32px, 4vw, 44px);
margin-bottom: 16px;
line-height: 1.05;
max-width: 16ch;
}
.contact-grid h2 .accent {
color: var(--green-text);
}
.contact-grid p {
color: var(--muted);
font-size: 16px;
margin-bottom: 28px;
max-width: 42ch;
line-height: 1.55;
}
.contact-grid .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-grid .btn-primary {
background: var(--green-deep);
color: var(--cream);
padding: 14px 26px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .2s ease;
}
.contact-grid .btn-primary:hover { background: var(--green-darker); color: var(--green); }
.contact-grid .btn-secondary {
border: 1.5px solid var(--green-deep);
color: var(--green-deep);
padding: 14px 26px;
border-radius: 999px;
font-family: var(--f-display);
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .15s ease;
}
.contact-grid .btn-secondary:hover { background: var(--green-deep); color: var(--cream); }
.contact-grid .visual {
position: relative;
aspect-ratio: 4/3;
border-radius: 12px;
overflow: hidden;
background: var(--green-deep);
}
.contact-grid .visual img { width: 100%; height: 100%; object-fit: cover; }
/* ============================================
PAGE HERO (compact, used on sub-pages)
============================================ */
.page-hero {
position: relative;
background: var(--green-deep);
color: var(--cream);
padding: 140px 0 96px;
overflow: hidden;
isolation: isolate;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(1200px 600px at 90% 0%, rgba(140,229,90,0.18), transparent 60%),
radial-gradient(900px 500px at 0% 100%, rgba(140,229,90,0.08), transparent 60%);
z-index: -1;
}
/* Opt-in hero-afbeelding op subpagina's: met
![]()