/* ===================================================================== */
/* Lettertype */
/* Montserrat staat hier zelf, niet bij Google Fonts. Anders gaat bij elk */
/* paginabezoek het IP-adres van de bezoeker naar Google, en dat spreekt */
/* de cookieverklaring van deze site tegen. */
/* */
/* Dit is de variabele versie: één bestand dekt 100-900, dus alle */
/* gewichten die de site gebruikt (400, 500, 600, 700 en 900 voor de */
/* display-koppen) zonder zeven losse bestanden. De unicode-range komt */
/* van Google zelf, zodat de browser latin-ext alleen ophaalt als een */
/* pagina die tekens nodig heeft. */
/* ===================================================================== */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('assets/fonts/montserrat-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('assets/fonts/montserrat-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
Axveco website — implementation of "Axveco Website Wireframe.dc.html"
Two directions are shipped side by side and switched with the wireframe bar:
Direction A — Cinematic (glass / photographic)
Direction B — Editorial (rules / typographic)
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* Brand */
--ax-a: #C8871A; /* gold */
--ax-a2: #E3B366; /* gold light */
--ax-a3: #32658F; /* steel blue — links, accents */
--ax-a4: #4F3308; /* deep gold — metrics */
--ax-aInk: #32658F;
--ax-arg: 200, 135, 26;
/* Surfaces */
--ax-bg: #F2F5F8; /* page */
--ax-bg-alt: #A2C9E8; /* banded sections (direction A) */
--ax-bg3: #083050; /* deep navy */
--ax-bg3rg: 0, 0, 0;
--ax-paper: #FFFFFF;
--ax-paper2: #E4E9EF;
--ax-panelrg: 255, 255, 255;
/* Ink */
--ax-ink: #083050;
--ax-inkrg: 8, 48, 80;
--ax-text: #083050;
--ax-textrg: 8, 48, 80;
--ax-light: #083050;
--ax-lightrg: 8, 48, 80;
/* Display type — set by the wireframe's headingFont prop, Montserrat Black default */
--ax-display: Montserrat;
--ax-display-weight: 900;
--ax-display-tracking: -.03em;
/* Motion */
--ax-ease: cubic-bezier(.2, .8, .2, 1);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
padding: 0;
background: var(--ax-bg);
color: var(--ax-text);
font-family: Montserrat, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ax-a); text-decoration: none; }
a:hover { color: var(--ax-a2); }
::selection { background: var(--ax-a); color: var(--ax-ink); }
button {
margin: 0;
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--ax-a);
outline-offset: 3px;
border-radius: 4px;
}
.ax-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Direction switching */
.ax-dir[hidden] { display: none; }
/* Language switching — only the hero headline is translated in the wireframe */
/* --------------------------------------------------------------------------
3. Shared primitives
-------------------------------------------------------------------------- */
.ax-shell { max-width: 1400px; margin: 0 auto; }
.ax-display {
font-family: var(--ax-display), Impact, sans-serif;
font-weight: var(--ax-display-weight);
line-height: .96;
letter-spacing: var(--ax-display-tracking);
overflow-wrap: anywhere;
text-wrap: pretty;
}
/* Small uppercase label used for kickers, eyebrows and column titles */
.ax-eyebrow {
font-family: Montserrat, sans-serif;
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
}
/* Reveal on scroll — neutral until app.js arms it */
.ax-reveal.is-armed {
opacity: 0;
transform: translateY(26px);
transition: opacity .8s var(--ax-ease), transform .8s var(--ax-ease);
}
.ax-reveal.is-armed.is-in { opacity: 1; transform: none; }
/* Dashed wireframe placeholder */
.ax-ph {
display: grid;
place-items: center;
font-family: Montserrat, sans-serif;
text-transform: uppercase;
text-align: center;
}
/* Buttons ------------------------------------------------------------------ */
.ax-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
}
/* Direction A: glass pills */
.ax-btn--gold {
padding: 18px 36px;
border-radius: 999px;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
background: linear-gradient(155deg, rgba(200, 135, 26, .92), rgba(200, 135, 26, .6));
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255, 255, 255, .55);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .7),
inset 0 -10px 22px -10px rgba(255, 255, 255, .45),
inset 0 0 0 1px rgba(255, 255, 255, .14),
0 20px 42px -18px rgba(200, 135, 26, .65);
transition: transform .3s var(--ax-ease), filter .3s ease;
}
.ax-btn--gold:hover { color: #FFFFFF; filter: brightness(1.08); transform: translateY(-2px); }
.ax-btn--glass {
padding: 18px 36px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
color: var(--ax-text);
background: linear-gradient(155deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .24));
backdrop-filter: blur(28px) saturate(210%);
-webkit-backdrop-filter: blur(28px) saturate(210%);
border: 1px solid rgba(255, 255, 255, .75);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .9),
inset 0 -12px 24px -12px rgba(255, 255, 255, .6),
0 18px 38px -20px rgba(8, 48, 80, .3);
transition: background .3s ease, transform .3s var(--ax-ease);
}
.ax-btn--glass:hover {
color: var(--ax-text);
background: linear-gradient(155deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .45));
transform: translateY(-2px);
}
.ax-btn--sm { padding: 12px 22px; font-size: 14px; }
.ax-btn--md { padding: 16px 32px; font-size: 15px; }
.ax-btn--lg { padding: 20px 42px; font-size: 17px; }
/* Direction A: frosted panel */
.ax-panel {
background: linear-gradient(140deg, rgba(var(--ax-panelrg), .78), rgba(var(--ax-panelrg), .52));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(var(--ax-textrg), .15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .26),
0 30px 70px -34px rgba(0, 0, 0, .1);
}
.ax-link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
color: var(--ax-a3);
cursor: pointer;
}
.ax-link-arrow:hover { color: var(--ax-ink); }
/* ==========================================================================
5. Direction A — Cinematic
========================================================================== */
.dir-a { position: relative; background: var(--ax-bg); color: var(--ax-text); }
/* Nav ---------------------------------------------------------------------- */
.a-navwrap { position: sticky; top: 14px; z-index: 110; margin: 14px 24px 0; }
.a-nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 14px 22px;
border-radius: 22px;
background: linear-gradient(150deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .42));
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255, 255, 255, .72);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .95),
inset 0 -14px 28px -14px rgba(255, 255, 255, .65),
inset 0 0 0 1px rgba(255, 255, 255, .2),
0 22px 48px -26px rgba(8, 48, 80, .4);
}
.a-nav__logo { display: flex; align-items: center; flex: none; }
.a-nav__logo img { height: 24px; width: auto; }
.a-nav__links {
display: flex;
align-items: center;
min-width: 0;
flex: 0 1 auto;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
color: rgba(var(--ax-textrg), .78);
}
.a-nav__link {
padding: 9px 11px;
border-radius: 999px;
flex: none;
font-size: 14px;
font-weight: 500;
color: inherit;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
/* The pill marks three things with one look: the link under the cursor, the
link whose mega panel is open, and the page you are actually on. The last
one is set server-side with aria-current="page" (see nav() in
tools/build_pages.py), so it survives with JavaScript off and tells a
screen reader the same thing the pill tells the eye. */
.a-nav__link:hover,
.a-nav__link[aria-expanded="true"],
.a-nav__link[aria-current="page"] {
background: rgba(8, 48, 80, .9);
color: #FFFFFF;
box-shadow: 0 8px 20px -10px rgba(8, 48, 80, .75);
}
.a-nav__actions { display: flex; align-items: center; gap: 16px; flex: none; }
/* Language switch: the same glass as the bar it sits in, one shade deeper so
it reads as a control rather than a link. Two real links to two real
documents — see lang_switch() in tools/build_pages.py. */
.a-lang {
display: flex;
align-items: center;
gap: 2px;
flex: none;
padding: 3px;
border-radius: 999px;
background: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18));
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255, 255, 255, .7);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .9),
inset 0 -8px 16px -10px rgba(255, 255, 255, .6),
0 10px 22px -14px rgba(8, 48, 80, .35);
}
.a-lang__btn {
padding: 7px 13px;
border-radius: 999px;
font-family: Montserrat, sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
color: rgba(var(--ax-textrg), .72);
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.a-lang__btn:hover { color: var(--ax-text); background: rgba(255, 255, 255, .55); }
.a-lang__btn[aria-current="true"] {
color: #FFFFFF;
background: rgba(8, 48, 80, .9);
box-shadow: 0 8px 20px -10px rgba(8, 48, 80, .75);
}
/* Full names while there is room, the two-letter codes once there is not. The
accessible name is on the link itself, so shortening never costs meaning. */
.a-lang__short { display: none; }
/* Mega menu ---------------------------------------------------------------- */
.a-mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-top: 10px;
z-index: 5;
display: flex;
justify-content: center;
}
.a-mega[hidden] { display: none; }
.a-mega__panel {
width: max-content;
max-width: 680px;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 26px 24px;
border-radius: 22px;
background-image: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
background-size: 1px calc(100% - 52px);
background-position: 50% 26px;
background-repeat: no-repeat;
background-color: rgba(8, 48, 80, .9);
backdrop-filter: blur(56px) saturate(140%) brightness(.85);
-webkit-backdrop-filter: blur(56px) saturate(140%) brightness(.85);
border: 1px solid rgba(255, 255, 255, .22);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .28),
inset 0 -20px 40px -20px rgba(255, 255, 255, .16),
0 40px 90px -40px rgba(8, 48, 80, .75);
color: #FFFFFF;
white-space: normal;
}
.a-mega__col { display: grid; gap: 18px; align-content: start; padding: 0 22px; }
.a-mega__title {
font-family: Montserrat, sans-serif;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
.a-mega__item {
display: grid;
gap: 2px;
padding: 6px 10px;
margin: -6px -10px;
border-radius: 10px;
color: #FFFFFF;
transition: background .16s ease;
}
.a-mega__item:hover { background: rgba(255, 255, 255, .09); color: #FFFFFF; }
.a-mega__name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.a-mega__desc { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .6); }
/* Hero --------------------------------------------------------------------- */
.a-hero {
position: relative;
z-index: 1;
min-height: 96vh;
margin-top: -106px;
display: grid;
align-items: end;
padding: 400px 48px 84px;
overflow: hidden;
color: #083050;
}
/* The photograph sits behind two washes of brand sky-blue. The gradient in the
shorthand is the fallback if the photo is unavailable. */
.a-hero__bg {
position: absolute;
inset: -14% 0 0 0;
/* Brand-blue ground shows if the photograph is still loading or unavailable */
background-color: #7FA2BE;
background-image: url('assets/highlands-hero.jpg');
background-image: -webkit-image-set(
url('assets/highlands-hero.webp') type('image/webp'),
url('assets/highlands-hero.jpg') type('image/jpeg'));
background-image: image-set(
url('assets/highlands-hero.webp') type('image/webp'),
url('assets/highlands-hero.jpg') type('image/jpeg'));
background-size: cover;
background-position: center 62%;
background-repeat: no-repeat;
will-change: transform;
}
/* Half-width file for phones and tablets */
@media (max-width: 900px) {
.a-hero__bg {
background-image: url('assets/highlands-hero-1200.jpg');
background-image: -webkit-image-set(
url('assets/highlands-hero-1200.webp') type('image/webp'),
url('assets/highlands-hero-1200.jpg') type('image/jpeg'));
background-image: image-set(
url('assets/highlands-hero-1200.webp') type('image/webp'),
url('assets/highlands-hero-1200.jpg') type('image/jpeg'));
}
}
.a-hero__wash-v,
.a-hero__wash-h { position: absolute; inset: 0; }
.a-hero__wash-v {
background: linear-gradient(180deg, rgba(162, 201, 232, .22) 0%, rgba(162, 201, 232, .6) 48%, rgba(162, 201, 232, .9) 100%);
}
.a-hero__wash-h {
background: linear-gradient(95deg, rgba(162, 201, 232, .82) 0%, rgba(162, 201, 232, .34) 52%, rgba(162, 201, 232, 0) 82%);
}
.a-hero__inner { position: relative; max-width: 1180px; display: grid; gap: 34px; }
.a-hero__title { font-size: clamp(38px, 6.2vw, 88px); letter-spacing: -.02em; max-width: 21ch; }
.a-hero__lead {
max-width: 62ch;
font-size: clamp(18px, 1.8vw, 21px);
line-height: 1.6;
color: rgba(var(--ax-textrg), .74);
}
.a-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Client logos ------------------------------------------------------------- */
.a-logos { position: relative; padding: 46px 48px; background: var(--ax-bg); }
.a-logos__inner { display: grid; gap: 26px; }
.a-logos__label {
font-size: 10px;
letter-spacing: .2em;
color: rgba(var(--ax-lightrg), .78);
}
/* De klantenstrip rolt van rechts naar links en herhaalt zich zonder gaten.
Dat werkt zo: de rij staat twee keer in de HTML (zie client_logos() in
tools/build_pages.py) en de animatie schuift de baan precies de helft van
zijn eigen breedte op. Op het moment dat hij terugspringt staat de kopie
exact waar het origineel begon, dus je ziet de sprong niet.
Die "helft" klopt alleen als beide rijen even breed zijn en de ruimte bij de
naad even groot is als tussen de logo's onderling. Vandaar de padding-right
op de rij, even groot als de gap: die telt mee in de breedte van de rij, dus
blijft de baan exact twee gelijke helften. Zet je de ruimte tussen de rijen
met een gap op de baan zelf, dan is 50% niet meer precies één rij en gaat de
lus schokken. */
.a-logos__marquee {
overflow: hidden;
/* Uitfaden aan beide kanten, anders knippen de logo's er hard af */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.a-logos__track {
display: flex;
width: max-content;
animation: a-logos-roll 64s linear infinite;
will-change: transform;
}
/* Stilzetten om een logo te kunnen bekijken. Op een touchscreen gebeurt dit
nooit, en dat hoeft ook niet: daar scroll je gewoon door. */
.a-logos__marquee:hover .a-logos__track,
.a-logos__marquee:focus-within .a-logos__track { animation-play-state: paused; }
.a-logos__row {
display: flex;
align-items: center;
gap: 56px;
padding: 0 56px 0 0;
margin: 0;
list-style: none;
}
/* De hoogte staat vast en hangt niet af van de plaatjes. Dat moet ook: de
logo's laden lazy, en een nog niet geladen ![]()
met height:auto is nul pixels
hoog. Dan is de strip zelf nul hoog, komt hij nooit in beeld, en laadt de
browser de logo's dus nooit — een slot waar hij zichzelf niet uit krijgt.
Met een vaste hoogte staat de ruimte er meteen, laden ze gewoon, en verschuift
er niets als ze binnenkomen. */
.a-logos__item {
flex: none;
width: 150px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
/* De bestanden hebben allemaal hun eigen verhouding — een wapenschild is
vierkant, een woordmerk is 5:1 — dus begrenzen we ze in beide richtingen en
laten we ze zelf hun plek in het vak van 150px vinden. */
.a-logos__logo {
max-width: 100%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
}
@keyframes a-logos-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Lenses ------------------------------------------------------------------- */
.a-lenses { position: relative; padding: 150px 48px; background: var(--ax-bg-alt); }
.a-lenses__inner {
display: grid;
grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
gap: 90px;
align-items: start;
}
.a-lenses__intro {
position: sticky;
top: 120px;
align-self: start;
height: fit-content;
display: grid;
gap: 26px;
padding-bottom: 40px;
}
.a-lenses__title { font-size: clamp(36px, 4.2vw, 62px); letter-spacing: -.015em; }
.a-lenses__lead {
font-size: 18px;
line-height: 1.65;
color: rgba(var(--ax-textrg), .85);
max-width: 44ch;
}
.a-lenses__list { display: grid; gap: 20px; }
.a-lens {
position: relative;
padding: 30px;
border-radius: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
align-items: stretch;
overflow: hidden;
transition: transform .5s var(--ax-ease), border-color .4s ease, background .4s ease;
}
.a-lens:hover {
border-color: rgba(var(--ax-arg), .55);
background: linear-gradient(140deg, rgba(var(--ax-panelrg), .92), rgba(var(--ax-arg), .14));
transform: translateY(-6px);
}
.a-lens__sheen {
position: absolute;
top: 0; left: 0; right: 0;
height: 44%;
background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent);
pointer-events: none;
}
.a-lens__body { position: relative; min-width: 0; display: grid; gap: 12px; align-content: center; }
.a-lens__name {
font-family: Montserrat, sans-serif;
font-size: clamp(22px, 1.9vw, 30px);
font-weight: 600;
letter-spacing: -.02em;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.a-lens__text {
font-size: 15px;
line-height: 1.55;
color: rgba(var(--ax-textrg), .72);
max-width: 34ch;
}
.a-lens__ph {
position: relative;
min-width: 0;
min-height: 130px;
padding: 14px;
border: 1px dashed rgba(var(--ax-textrg), .2);
border-radius: 18px;
font-size: 10px;
letter-spacing: .08em;
color: rgba(var(--ax-textrg), .45);
line-height: 2;
overflow-wrap: anywhere;
}
/* Pillars (Academy · Consulting · Solutions) -------------------------------- */
.a-pillars { position: relative; padding: 150px 48px 160px; background: var(--ax-bg); }
.a-pillars__head { display: grid; gap: 20px; max-width: 760px; margin-bottom: 70px; }
.a-pillars__title { font-size: clamp(36px, 4.2vw, 62px); }
.a-pillars__lead { font-size: 18px; line-height: 1.65; color: rgba(var(--ax-textrg), .68); }
.a-pillars__list { display: grid; gap: 24px; }
/* Each card sticks in turn, so they stack as you scroll */
.a-pillar-stick { position: sticky; top: 120px; }
.a-pillar {
position: relative;
display: grid;
grid-template-columns: 1fr .9fr;
border-radius: 30px;
overflow: hidden;
}
.a-pillar__body { padding: 60px; display: grid; gap: 26px; align-content: center; }
.a-pillar__name {
font-family: var(--ax-display), Impact, sans-serif;
font-weight: var(--ax-display-weight);
letter-spacing: var(--ax-display-tracking);
font-size: clamp(32px, 3.6vw, 52px);
line-height: .98;
overflow-wrap: anywhere;
}
.a-pillar__text { font-size: 18px; line-height: 1.62; color: rgba(var(--ax-textrg), .7); max-width: 42ch; }
.a-pillar__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.a-pillar__items li {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: rgba(var(--ax-textrg), .82);
}
.a-pillar__items li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ax-a3);
}
.a-pillar__cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 8px;
font-size: 15px;
font-weight: 700;
color: var(--ax-a3);
}
.a-pillar__media {
position: relative;
min-height: 460px;
padding: 30px;
border-left: 1px dashed rgba(var(--ax-textrg), .18);
background: linear-gradient(140deg, rgba(var(--ax-textrg), .09), rgba(var(--ax-bg3rg), .3));
font-size: 10px;
letter-spacing: .16em;
color: rgba(var(--ax-lightrg), .62);
line-height: 1.9;
}
/* Cases -------------------------------------------------------------------- */
.a-cases { position: relative; padding: 130px 48px; background: var(--ax-bg-alt); }
.a-cases__inner { display: grid; gap: 60px; }
.a-cases__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.a-cases__title { font-size: clamp(34px, 4vw, 58px); max-width: 620px; }
.a-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.a-case {
display: grid;
border-radius: 26px;
overflow: hidden;
background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(var(--ax-textrg), .15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 30px 70px -34px rgba(0, 0, 0, .1);
transition: transform .4s var(--ax-ease), border-color .4s ease;
}
.a-case:hover { border-color: rgba(var(--ax-arg), .5); transform: translateY(-6px); }
.a-case__media {
height: 190px;
border-bottom: 1px dashed rgba(var(--ax-textrg), .18);
font-size: 10px;
letter-spacing: .14em;
color: rgba(var(--ax-lightrg), .55);
}
.a-case__body { padding: 34px; display: grid; gap: 16px; }
.a-case__sector { font-size: 10px; letter-spacing: .18em; color: rgba(var(--ax-lightrg), .6); }
.a-case__metric {
font-family: Montserrat, sans-serif;
font-size: clamp(38px, 4vw, 54px);
font-weight: 700;
line-height: 1;
letter-spacing: -.03em;
color: var(--ax-a4);
}
.a-case__claim { font-size: 17px; font-weight: 600; line-height: 1.4; }
.a-case__text { font-size: 15px; line-height: 1.6; color: rgba(var(--ax-textrg), .6); }
/* Academy ------------------------------------------------------------------ */
.a-academy { position: relative; padding: 140px 48px; background: var(--ax-bg); }
.a-academy__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.a-academy__intro { display: grid; gap: 28px; }
.a-academy__title { font-size: clamp(34px, 4vw, 58px); }
.a-academy__lead { font-size: 18px; line-height: 1.65; color: rgba(var(--ax-textrg), .68); max-width: 46ch; }
.a-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 30px 0;
border-top: 1px solid rgba(var(--ax-lightrg), .18);
border-bottom: 1px solid rgba(var(--ax-lightrg), .18);
}
.a-stat { display: grid; gap: 8px; }
.a-stat__value {
font-family: Montserrat, sans-serif;
font-size: clamp(30px, 3vw, 40px);
font-weight: 700;
letter-spacing: -.03em;
}
.a-stat__label { font-size: 13px; line-height: 1.4; color: rgba(var(--ax-textrg), .6); }
.a-academy__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.a-courses { display: grid; gap: 14px; }
.a-course {
display: flex;
align-items: center;
gap: 22px;
padding: 22px 26px;
border-radius: 20px;
color: inherit;
transition: transform .35s var(--ax-ease), border-color .35s ease;
}
.a-course:hover { border-color: rgba(var(--ax-arg), .5); transform: translateX(6px); color: inherit; }
.a-course__thumb {
width: 76px;
height: 60px;
flex: none;
border: 1px dashed rgba(var(--ax-textrg), .22);
border-radius: 9px;
font-size: 9px;
color: rgba(var(--ax-lightrg), .5);
}
.a-course__title { flex: 1; font-size: 17px; font-weight: 700; }
.a-course__arrow { font-size: 20px; color: var(--ax-a3); }
/* Team --------------------------------------------------------------------- */
.a-team { position: relative; padding: 150px 48px; background: var(--ax-bg-alt); }
.a-team__inner { display: grid; gap: 60px; }
.a-team__head { display: grid; gap: 18px; max-width: 640px; }
.a-team__title { font-size: clamp(34px, 4vw, 58px); }
/* De kolommen hebben een bovengrens, geen 1fr. Met 1fr rekt een portret mee met
de schermbreedte: op een breed scherm werd een pasfoto dan een halve meter
hoog. 180px is de maat waarop een gezicht herkenbaar is zonder de sectie over
te nemen; de rij pakt links aan en laat de rest wit.
auto-fit in plaats van een vast aantal kolommen: er zakt vanzelf een portret
naar de volgende rij zodra er geen ruimte meer is. Komt er een zesde teamlid
bij, dan hoeft hier niets te veranderen. */
.a-team__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
justify-content: start;
gap: 24px 28px;
}
/* align-content: start, anders verdeelt de grid de extra hoogte van het
langste kaartje over de rijen en staat de naam onder een portret met een
tweeregelige rol een paar pixels hoger dan de rest. */
.a-member { display: grid; align-content: start; gap: 14px; }
/* Het kader heeft dezelfde verhouding als de bestanden: alle vijf de portretten
zijn vierkant, dus 1:1. Zo snijdt object-fit niets weg en wordt er niets
uitgerekt, wat je in een 3:4-kader wel zou zien. Een nieuw portret gaat langs
dezelfde bewerking (midden vierkant bijgesneden, zie CLAUDE.md), dus kader en
bestand blijven gelijk. */
.a-member__portrait {
display: block;
aspect-ratio: 1 / 1;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(140deg, rgba(var(--ax-panelrg), .62), rgba(var(--ax-panelrg), .36));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
.a-member__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-member__meta { display: grid; gap: 6px; }
.a-member__name { font-size: 17px; font-weight: 700; }
.a-member__role { font-size: 14px; color: rgba(var(--ax-textrg), .82); }
.a-member__cred { font-size: 10px; letter-spacing: .12em; color: var(--ax-ink); }
/* De teamfoto onder de rij portretten. De bovengrens is precies zo breed als
die rij op een breed scherm: vijf kolommen van 180px plus vier tussenruimtes
van 28px. Zo lopen de rechterrand van de foto en die van het laatste portret
gelijk in plaats van net langs elkaar. Smaller dan dat vult de foto gewoon
de breedte die er is. */
.a-team__photo {
margin: 0;
max-width: 1012px;
border-radius: 22px;
overflow: hidden;
background: rgba(var(--ax-panelrg), .4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
.a-team__photo img { display: block; width: 100%; height: auto; }
/* FAQ ---------------------------------------------------------------------- */
.a-faq { position: relative; padding: 140px 48px; background: var(--ax-bg); }
.a-faq__inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 50px; }
.a-faq__title { font-size: clamp(32px, 3.8vw, 54px); }
.a-faq__list { display: grid; border-top: 1px solid rgba(var(--ax-lightrg), .2); }
.a-faq__row { border-bottom: 1px solid rgba(var(--ax-lightrg), .2); }
.a-faq__row > summary::-webkit-details-marker { display: none; }
.a-faq__q {
width: 100%;
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 30px 4px;
text-align: left;
transition: color .2s ease;
}
.a-faq__q:hover { color: var(--ax-a); }
.a-faq__qtext {
font-family: Montserrat, sans-serif;
font-size: clamp(19px, 2vw, 23px);
font-weight: 500;
letter-spacing: -.01em;
}
.a-faq__sign {
flex: none;
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, .75);
border-radius: 50%;
background: linear-gradient(155deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3));
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), 0 10px 22px -14px rgba(8, 48, 80, .35);
display: grid;
place-items: center;
font-size: 18px;
color: var(--ax-a3);
}
.a-faq__sign::before { content: "+"; }
.a-faq__row[open] .a-faq__sign::before { content: "\2212"; }
.a-faq__a p {
padding: 0 90px 32px 4px;
font-size: 17px;
line-height: 1.7;
color: rgba(var(--ax-textrg), .68);
}
/* Closing CTA -------------------------------------------------------------- */
.a-cta { position: relative; padding: 160px 48px; background: var(--ax-bg-alt); }
.a-cta__inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
display: grid;
gap: 36px;
justify-items: center;
text-align: center;
}
.a-cta__title { font-size: clamp(36px, 6vw, 88px); max-width: 20ch; }
.a-cta__lead { max-width: 56ch; font-size: 19px; line-height: 1.6; color: rgba(var(--ax-inkrg), .78); }
.a-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* Footer ------------------------------------------------------------------- */
.a-footer { position: relative; padding: 90px 48px 40px; background: var(--ax-bg); }
.a-footer__inner { display: grid; gap: 60px; }
.a-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 50px; }
.a-footer__brand { display: grid; gap: 18px; align-content: start; }
.a-footer__brand img { height: 24px; width: auto; }
.a-footer__blurb { max-width: 34ch; font-size: 15px; line-height: 1.6; color: rgba(var(--ax-textrg), .8); }
.a-footer__col { display: grid; gap: 14px; align-content: start; }
.a-footer__coltitle { font-size: 10px; letter-spacing: .18em; color: var(--ax-ink); }
.a-footer__link { font-size: 15px; color: rgba(var(--ax-textrg), .85); }
.a-footer__link:hover { color: var(--ax-text); }
.a-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 26px;
border-top: 1px solid rgba(var(--ax-lightrg), .14);
font-size: 13px;
color: rgba(var(--ax-textrg), .75);
}
.a-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.a-footer__legal a { color: inherit; }
.a-footer__legal a:hover { color: var(--ax-text); }
/* ==========================================================================
6. Direction B — Editorial
========================================================================== */
.dir-b { background: var(--ax-paper); color: var(--ax-ink); }
/* Sections on navy invert the ink tokens */
.b-dark {
--ax-ink: #FFFFFF;
--ax-inkrg: 255, 255, 255;
--ax-lightrg: 255, 255, 255;
--ax-textrg: 255, 255, 255;
background: var(--ax-bg3);
color: #FFFFFF;
}
.b-index {
font-family: Montserrat, sans-serif;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ax-aInk);
}
.b-dark .b-index { color: var(--ax-a); }
.b-h2 {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(32px, 4.6vw, 56px);
line-height: 1.04;
letter-spacing: -.03em;
overflow-wrap: anywhere;
text-wrap: pretty;
}
.b-rule { border-bottom: 1px solid rgba(var(--ax-inkrg), .12); }
/* Buttons ------------------------------------------------------------------ */
.b-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; }
.b-btn--gold {
padding: 17px 32px;
background: var(--ax-a);
color: #083050;
font-size: 16px;
font-weight: 700;
transition: background .2s ease, color .2s ease;
}
.b-btn--gold:hover { background: var(--ax-ink); color: var(--ax-paper); }
.b-dark .b-btn--gold:hover { background: var(--ax-a2); color: #083050; }
.b-btn--ink {
padding: 12px 22px;
background: var(--ax-ink);
color: var(--ax-paper);
font-size: 14px;
font-weight: 700;
transition: background .2s ease, color .2s ease;
}
.b-btn--ink:hover { background: var(--ax-a); color: var(--ax-ink); }
.b-btn--outline {
padding: 17px 32px;
border: 1px solid rgba(var(--ax-inkrg), .25);
font-size: 16px;
font-weight: 600;
color: var(--ax-ink);
transition: border-color .2s ease;
}
.b-btn--outline:hover { border-color: var(--ax-ink); color: var(--ax-ink); }
.b-dark .b-btn--outline { border-color: rgba(255, 255, 255, .4); }
/* Nav ---------------------------------------------------------------------- */
.b-nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 18px 44px;
background: rgba(242, 245, 248, .86);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(var(--ax-inkrg), .12);
}
.b-brand { display: flex; align-items: center; gap: 11px; color: var(--ax-ink); }
.b-brand__mark { width: 24px; height: 24px; flex: none; background: var(--ax-ink); }
.b-brand__word {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: .2em;
text-transform: uppercase;
}
.b-nav__links {
display: flex;
align-items: center;
gap: 30px;
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(var(--ax-inkrg), .7);
}
.b-nav__links a { color: inherit; }
.b-nav__links a:hover { color: var(--ax-aInk); }
.b-nav__actions { display: flex; align-items: center; gap: 14px; }
.b-lang { font-family: Montserrat, sans-serif; font-size: 11px; color: rgba(var(--ax-inkrg), .6); }
.b-lang b { color: var(--ax-ink); font-weight: 500; }
/* Header ------------------------------------------------------------------- */
.b-header { padding: 90px 44px 70px; border-bottom: 1px solid rgba(var(--ax-inkrg), .12); }
.b-header__inner { display: grid; gap: 56px; }
.b-header__top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: end; }
.b-header__left { display: grid; gap: 28px; }
.b-header__title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(38px, 8.5vw, 92px);
line-height: .94;
letter-spacing: -.035em;
text-wrap: pretty;
}
.b-header__title em { font-style: normal; color: var(--ax-aInk); }
.b-header__right { display: grid; gap: 26px; padding-bottom: 14px; }
.b-header__lead { font-size: 19px; line-height: 1.65; color: rgba(var(--ax-inkrg), .72); }
.b-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.b-header__video {
position: relative;
aspect-ratio: 21 / 9;
border: 1px dashed rgba(var(--ax-inkrg), .3);
border-radius: 6px;
background: linear-gradient(120deg, rgba(var(--ax-lightrg), .22), rgba(var(--ax-inkrg), .08));
font-size: 11px;
letter-spacing: .16em;
color: rgba(var(--ax-inkrg), .55);
line-height: 2;
}
/* Client logos ------------------------------------------------------------- */
.b-logos {
padding: 34px 44px;
background: var(--ax-paper2);
border-bottom: 1px solid rgba(var(--ax-inkrg), .12);
}
.b-logos__inner { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.b-logos__label { font-size: 10px; letter-spacing: .18em; color: rgba(var(--ax-inkrg), .5); }
.b-logos__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.b-logos__item {
height: 46px;
border: 1px dashed rgba(var(--ax-inkrg), .22);
border-radius: 4px;
font-size: 10px;
letter-spacing: .12em;
color: rgba(var(--ax-inkrg), .45);
}
/* Pillars ------------------------------------------------------------------ */
.b-section { padding: 120px 44px; }
.b-section__inner { display: grid; gap: 60px; }
.b-splithead { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
.b-splithead .b-index { position: sticky; top: 110px; }
.b-splithead__body { display: grid; gap: 22px; }
.b-splithead p { max-width: 58ch; font-size: 18px; line-height: 1.65; color: rgba(var(--ax-inkrg), .7); }
/* Hairline grid: 1px gap over a rule-coloured background */
.b-hairgrid {
display: grid;
gap: 1px;
background: rgba(var(--ax-inkrg), .14);
border: 1px solid rgba(var(--ax-inkrg), .14);
}
.b-hairgrid--3 { grid-template-columns: repeat(3, 1fr); }
.b-pillar {
background: var(--ax-paper);
padding: 44px 38px 38px;
display: grid;
gap: 24px;
align-content: start;
transition: background .35s ease;
}
.b-pillar:hover { background: var(--ax-paper2); }
.b-pillar__num {
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .16em;
color: var(--ax-aInk);
}
.b-pillar__media {
aspect-ratio: 4 / 3;
padding: 16px;
border: 1px dashed rgba(var(--ax-inkrg), .25);
border-radius: 4px;
background: rgba(var(--ax-lightrg), .14);
font-size: 10px;
letter-spacing: .14em;
color: rgba(var(--ax-inkrg), .45);
}
.b-pillar__name {
font-family: Montserrat, sans-serif;
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 700;
letter-spacing: -.02em;
}
.b-pillar__text { font-size: 16px; line-height: 1.62; color: rgba(var(--ax-inkrg), .7); }
.b-pillar__items {
display: grid;
gap: 9px;
margin: 0;
padding: 6px 0 0;
list-style: none;
border-top: 1px solid rgba(var(--ax-inkrg), .12);
}
.b-pillar__items li { padding-top: 3px; font-size: 15px; color: rgba(var(--ax-inkrg), .78); }
.b-pillar__cta { font-size: 15px; font-weight: 700; color: var(--ax-aInk); }
/* Lenses (navy) ------------------------------------------------------------ */
.b-lenses__inner { display: grid; gap: 56px; }
.b-lenses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.b-lens {
display: grid;
gap: 16px;
align-content: start;
padding-top: 22px;
border-top: 2px solid var(--ax-a);
}
.b-lens__num { font-family: Montserrat, sans-serif; font-size: 11px; color: rgba(255, 255, 255, .65); }
.b-lens__name {
font-family: Montserrat, sans-serif;
font-size: clamp(22px, 2vw, 26px);
font-weight: 600;
letter-spacing: -.01em;
}
.b-lens__text { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
/* Cases -------------------------------------------------------------------- */
.b-cases__inner { display: grid; gap: 50px; }
.b-flexhead {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.b-flexhead__body { display: grid; gap: 16px; }
.b-morelink { font-size: 15px; font-weight: 700; color: var(--ax-aInk); }
.b-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.b-case { display: grid; gap: 20px; align-content: start; }
.b-case__media {
aspect-ratio: 16 / 10;
border: 1px dashed rgba(var(--ax-inkrg), .25);
border-radius: 4px;
background: rgba(var(--ax-lightrg), .14);
font-size: 10px;
letter-spacing: .14em;
color: rgba(var(--ax-inkrg), .45);
}
.b-case__metric {
font-family: Montserrat, sans-serif;
font-size: clamp(40px, 4.4vw, 58px);
font-weight: 700;
line-height: 1;
letter-spacing: -.04em;
color: var(--ax-ink);
}
.b-case__claim { font-size: 18px; font-weight: 700; line-height: 1.35; }
.b-case__text { font-size: 15px; line-height: 1.6; color: rgba(var(--ax-inkrg), .66); }
.b-case__sector { font-size: 10px; letter-spacing: .16em; color: rgba(var(--ax-inkrg), .45); }
/* Academy ------------------------------------------------------------------ */
.b-academy { background: var(--ax-paper2); }
.b-academy__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: start;
}
.b-academy__intro { display: grid; gap: 26px; position: sticky; top: 110px; }
.b-academy__intro .b-index { color: var(--ax-ink); }
.b-academy__title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(30px, 4vw, 50px);
line-height: 1.05;
letter-spacing: -.03em;
}
.b-academy__lead { max-width: 44ch; font-size: 18px; line-height: 1.65; color: rgba(var(--ax-inkrg), .7); }
.b-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding-top: 26px;
border-top: 1px solid rgba(var(--ax-inkrg), .16);
}
.b-stat { display: grid; gap: 6px; }
.b-stat__value {
font-family: Montserrat, sans-serif;
font-size: clamp(28px, 2.6vw, 36px);
font-weight: 700;
letter-spacing: -.03em;
color: var(--ax-ink);
}
.b-stat__label { font-size: 13px; line-height: 1.4; color: rgba(var(--ax-inkrg), .62); }
.b-course {
background: var(--ax-paper);
display: flex;
align-items: center;
gap: 20px;
padding: 24px 26px;
color: var(--ax-ink);
}
.b-course:hover { color: var(--ax-ink); background: #FFFFFF; }
.b-course__thumb {
width: 66px;
height: 52px;
flex: none;
border: 1px dashed rgba(var(--ax-inkrg), .25);
border-radius: 3px;
font-size: 9px;
color: rgba(var(--ax-inkrg), .4);
}
.b-course__body { display: grid; gap: 5px; flex: 1; }
.b-course__title { font-size: 17px; font-weight: 700; }
.b-course__meta { font-size: 10px; letter-spacing: .12em; color: rgba(var(--ax-inkrg), .5); }
.b-course__arrow { font-size: 18px; color: var(--ax-ink); }
/* Team --------------------------------------------------------------------- */
.b-team__inner { display: grid; gap: 50px; }
.b-team__head { display: grid; gap: 16px; }
.b-team__title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(30px, 4vw, 50px);
line-height: 1.05;
letter-spacing: -.03em;
}
.b-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.b-member { display: grid; gap: 14px; }
.b-member__portrait {
aspect-ratio: 3 / 4;
padding: 16px;
border: 1px dashed rgba(var(--ax-inkrg), .25);
border-radius: 4px;
background: rgba(var(--ax-lightrg), .14);
place-items: end start;
font-size: 10px;
letter-spacing: .12em;
color: rgba(var(--ax-inkrg), .45);
}
.b-member__meta { display: grid; gap: 5px; }
.b-member__name { font-size: 17px; font-weight: 700; }
.b-member__role { font-size: 14px; color: rgba(var(--ax-inkrg), .62); }
.b-member__cred { font-size: 10px; letter-spacing: .12em; color: var(--ax-aInk); }
/* FAQ ---------------------------------------------------------------------- */
.b-faq__inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 44px; }
.b-faq__head { display: grid; gap: 16px; }
.b-faq__title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(28px, 3.8vw, 48px);
line-height: 1.06;
letter-spacing: -.03em;
}
.b-faq__list { display: grid; border-top: 1px solid rgba(var(--ax-inkrg), .16); }
.b-faq__row { border-bottom: 1px solid rgba(var(--ax-inkrg), .16); }
.b-faq__row > summary::-webkit-details-marker { display: none; }
.b-faq__q {
width: 100%;
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 26px 2px;
text-align: left;
transition: color .2s ease;
}
.b-faq__q:hover { color: var(--ax-aInk); }
.b-faq__qtext {
font-family: Montserrat, sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
font-weight: 600;
letter-spacing: -.01em;
}
.b-faq__sign { flex: none; font-size: 20px; color: var(--ax-aInk); }
.b-faq__sign::before { content: "+"; }
.b-faq__row[open] .b-faq__sign::before { content: "\2212"; }
.b-faq__a p {
padding: 0 80px 28px 2px;
font-size: 17px;
line-height: 1.7;
color: rgba(var(--ax-inkrg), .7);
}
/* Closing CTA (navy) ------------------------------------------------------- */
.b-cta { padding: 130px 44px; }
.b-cta__inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 70px;
align-items: center;
}
.b-cta__left { display: grid; gap: 28px; }
.b-cta__title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: clamp(40px, 4.6vw, 62px);
line-height: 1;
letter-spacing: -.035em;
}
.b-cta__lead { max-width: 50ch; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.b-form {
border: 1px dashed rgba(255, 255, 255, .35);
border-radius: 6px;
padding: 34px;
display: grid;
gap: 16px;
background: rgba(255, 255, 255, .07);
}
.b-form__label {
font-family: Montserrat, sans-serif;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.b-field { display: grid; gap: 7px; }
.b-field > span {
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.b-field input,
.b-field textarea {
height: 44px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 3px;
background: rgba(var(--ax-bg3rg), .35);
color: #FFFFFF;
font: inherit;
font-size: 15px;
}
.b-field input::placeholder { color: rgba(255, 255, 255, .35); }
.b-form__submit {
margin-top: 6px;
padding: 15px;
text-align: center;
background: var(--ax-a);
color: #083050;
border-radius: 3px;
font-size: 15px;
font-weight: 700;
transition: background .2s ease;
}
.b-form__submit:hover { background: var(--ax-a2); }
/* Footer ------------------------------------------------------------------- */
.b-footer {
padding: 80px 44px 36px;
background: var(--ax-paper2);
border-top: 1px solid rgba(var(--ax-inkrg), .12);
}
.b-footer__inner { display: grid; gap: 54px; }
.b-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 46px; }
.b-footer__brand { display: grid; gap: 16px; align-content: start; }
.b-footer__brand .b-brand__mark { width: 22px; height: 22px; }
.b-footer__brand .b-brand__word { font-size: 16px; }
.b-footer__blurb { max-width: 34ch; font-size: 15px; line-height: 1.6; color: rgba(var(--ax-inkrg), .62); }
.b-footer__col { display: grid; gap: 12px; align-content: start; }
.b-footer__coltitle { font-size: 10px; letter-spacing: .18em; color: var(--ax-ink); }
.b-footer__link { font-size: 15px; color: rgba(var(--ax-inkrg), .68); }
.b-footer__link:hover { color: var(--ax-ink); }
.b-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 24px;
border-top: 1px solid rgba(var(--ax-inkrg), .14);
font-size: 13px;
color: rgba(var(--ax-inkrg), .5);
}
.b-footer__legal { display: flex; gap: 24px; }
.b-footer__legal a { color: inherit; }
.b-footer__legal a:hover { color: var(--ax-ink); }
/* ==========================================================================
7. Responsive
The wireframe is authored at desktop width; these breakpoints collapse the
fixed grids without changing the composition on large screens.
========================================================================== */
@media (max-width: 1180px) {
.a-lenses__inner { gap: 56px; }
.a-academy__inner { gap: 56px; }
.b-header__top { gap: 48px; }
.b-splithead { grid-template-columns: 220px 1fr; gap: 40px; }
}
@media (max-width: 1024px) {
/* Direction A */
.a-nav { flex-wrap: wrap; }
.a-lang__long { display: none; }
.a-lang__short { display: inline; }
.a-lang__btn { padding: 7px 11px; }
.a-nav__links {
order: 3;
flex: 1 0 100%;
overflow-x: auto;
scrollbar-width: none;
}
.a-nav__links::-webkit-scrollbar { display: none; }
.a-mega__panel { max-width: 100%; }
.a-hero { padding: 300px 32px 64px; }
.a-logos, .a-lenses, .a-pillars, .a-cases, .a-academy, .a-team, .a-faq, .a-cta, .a-footer { padding-left: 32px; padding-right: 32px; }
.a-lenses__inner { grid-template-columns: 1fr; }
.a-lenses__intro { position: static; padding-bottom: 0; }
.a-pillars { padding-top: 110px; padding-bottom: 110px; }
.a-pillar-stick { position: static; }
.a-pillar { grid-template-columns: 1fr; }
.a-pillar__body { padding: 44px 36px; }
.a-pillar__media { min-height: 280px; border-left: 0; border-top: 1px dashed rgba(var(--ax-textrg), .18); }
.a-cases__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.a-team__grid { grid-template-columns: repeat(auto-fit, minmax(130px, 160px)); }
.a-academy__inner { grid-template-columns: 1fr; }
.a-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; }
/* Direction B */
.b-nav { flex-wrap: wrap; gap: 18px; padding: 16px 32px; }
.b-nav__links { order: 3; flex: 1 0 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.b-nav__links::-webkit-scrollbar { display: none; }
.b-header, .b-section, .b-logos, .b-cta, .b-footer { padding-left: 32px; padding-right: 32px; }
.b-header__top { grid-template-columns: 1fr; align-items: start; }
.b-header__right { padding-bottom: 0; }
.b-logos__inner { grid-template-columns: 1fr; gap: 20px; }
.b-logos__grid { grid-template-columns: repeat(3, 1fr); }
.b-splithead { grid-template-columns: 1fr; gap: 22px; }
.b-splithead .b-index { position: static; }
.b-hairgrid--3, .b-cases__grid, .b-lenses__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.b-academy__inner { grid-template-columns: 1fr; }
.b-academy__intro { position: static; }
.b-team__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.b-cta__inner { grid-template-columns: 1fr; }
.b-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 720px) {
/* Direction A */
.a-navwrap { top: 10px; margin: 10px 12px 0; }
.a-nav { padding: 12px 14px; border-radius: 18px; }
.a-nav__actions { gap: 10px; }
.a-hero { min-height: 88vh; padding: 240px 20px 56px; }
.a-logos, .a-lenses, .a-pillars, .a-cases, .a-academy, .a-team, .a-faq, .a-cta, .a-footer { padding-left: 20px; padding-right: 20px; }
.a-logos { padding-top: 36px; padding-bottom: 36px; }
.a-lenses, .a-cases, .a-academy, .a-team, .a-faq { padding-top: 90px; padding-bottom: 90px; }
.a-pillars { padding-top: 90px; padding-bottom: 90px; }
.a-cta { padding-top: 110px; padding-bottom: 110px; }
.a-stats, .b-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.a-logos__row { gap: 36px; padding-right: 36px; }
.a-logos__item { width: 108px; height: 42px; }
.a-logos__logo { max-height: 42px; }
.a-lens { padding: 24px; }
.a-pillar__body { padding: 34px 24px; }
.a-case__body { padding: 26px; }
/* Op de smalste telefoon past 140px twee keer naast elkaar; onder de
bovengrens mogen ze de resterende ruimte verdelen zodat de rij niet
scheef uitloopt. */
.a-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.a-faq__q { padding: 24px 2px; gap: 16px; }
.a-faq__a p { padding: 0 0 26px; }
.a-footer__cols { grid-template-columns: 1fr; }
.a-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
/* Direction B */
.b-nav { padding: 14px 20px; }
.b-header, .b-section, .b-logos, .b-cta, .b-footer { padding-left: 20px; padding-right: 20px; }
.b-header { padding-top: 60px; padding-bottom: 50px; }
.b-section, .b-cta { padding-top: 90px; padding-bottom: 90px; }
.b-pillar { padding: 32px 24px; }
.b-faq__q { padding: 22px 2px; gap: 16px; }
.b-faq__a p { padding: 0 0 24px; }
.b-form { padding: 26px; }
.b-footer__cols { grid-template-columns: 1fr; }
.b-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
/* Nav links wrap rather than clip on phones. The wrapped bar is tall, so it
scrolls away instead of pinning a quarter of the viewport. Relative, not
static: the heroes pull up under the bar with a negative margin and carry
z-index 1, so the bar needs to keep its own z-index to stay on top. A
static element ignores z-index entirely, which let the photo paint straight
over the wrapped links row. */
.a-navwrap { position: relative; }
.a-nav__links, .b-nav__links { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
.a-nav__links { font-size: 13px; }
.a-nav__link { padding: 7px 9px; font-size: 13px; }
.b-nav__links { gap: 16px; }
/* Wireframe bar */
}
/* --------------------------------------------------------------------------
8. Motion preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ax-reveal.is-armed { opacity: 1; transform: none; transition: none; }
.a-hero__bg { transform: none !important; }
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
/* De klantenstrip rolt hier niet. Alleen de regel hierboven is niet genoeg:
die zet de animatie op .001ms, waarna de baan meteen op zijn eindstand
staat — de kopie in beeld, het origineel eruit geschoven. Dus zetten we de
animatie echt uit, verbergen we de kopie en laten we de rij afbreken. Dan
staan alle achttien logo's stil en zichtbaar, in plaats van half weggeknipt.
Het !important is nodig om van de * hierboven te winnen. */
.a-logos__track { animation: none !important; transform: none !important; width: auto; }
.a-logos__row { flex-wrap: wrap; justify-content: center; row-gap: 30px; padding-right: 0; }
.a-logos__row[aria-hidden="true"] { display: none; }
.a-logos__marquee { -webkit-mask-image: none; mask-image: none; }
.pg-hero__medialink:hover { transform: none; }
}
/* ==========================================================================
9. Subpages
Same vocabulary as the homepage — glass panels, gold pills, sky-blue bands —
with a compact hero so the content starts high on the page.
========================================================================== */
/* Page hero ---------------------------------------------------------------- */
.pg-hero {
position: relative;
z-index: 1;
margin-top: -106px;
padding: 200px 48px 84px;
overflow: hidden;
color: var(--ax-ink);
}
.pg-hero__bg {
/* The subpage band is short and sits under a heavy wash, so the 1200px file is
plenty here — no reason to make every subpage pay for the full-size photo. */
position: absolute;
inset: 0;
background-color: #7FA2BE;
background-image: url('assets/highlands-hero-1200.jpg');
background-image: -webkit-image-set(
url('assets/highlands-hero-1200.webp') type('image/webp'),
url('assets/highlands-hero-1200.jpg') type('image/jpeg'));
background-image: image-set(
url('assets/highlands-hero-1200.webp') type('image/webp'),
url('assets/highlands-hero-1200.jpg') type('image/jpeg'));
background-size: cover;
background-position: center 58%;
}
.pg-hero__wash {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(162, 201, 232, .58) 0%, rgba(162, 201, 232, .88) 62%, rgba(162, 201, 232, .99) 100%),
linear-gradient(95deg, rgba(162, 201, 232, .9) 0%, rgba(162, 201, 232, .55) 55%, rgba(162, 201, 232, .2) 85%);
}
.pg-hero__inner { position: relative; max-width: 1000px; display: grid; gap: 26px; }
.pg-hero__eyebrow { font-size: 10px; letter-spacing: .2em; color: rgba(var(--ax-inkrg), .7); }
.pg-hero__title { font-size: clamp(38px, 5.4vw, 76px); max-width: 22ch; }
.pg-hero__lead {
max-width: 60ch;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.6;
color: rgba(var(--ax-inkrg), .78);
}
.pg-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Split hero: copy on the left half, a picture of the real thing on the right.
Only the Academy page uses this; the other subpages keep the single column.
The copy column is narrower than the full band, so the title and the lead
get their own line lengths here — 22ch of a 76px display would run to five
lines in half the width. */
.pg-hero__inner--split {
max-width: 1280px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.pg-hero__copy { display: grid; gap: 26px; align-content: start; }
.pg-hero__inner--split .pg-hero__title { font-size: clamp(36px, 3.6vw, 58px); max-width: 18ch; }
.pg-hero__inner--split .pg-hero__lead { max-width: 46ch; }
.pg-hero__media picture { display: block; }
/* De schermafdruk is zelf een link naar het platform (zie media_href in
page_hero()). Hij ziet er al uit als iets waar je op klikt, dus dat moet ook
kunnen — hij komt bij aanwijzen iets omhoog en de schaduw wordt dieper, zodat
duidelijk is dat het geen plaatje maar een knop is. */
.pg-hero__medialink {
display: block;
border-radius: 22px;
transition: transform .22s ease, box-shadow .22s ease;
}
.pg-hero__medialink:hover { transform: translateY(-4px); }
.pg-hero__medialink:hover img { box-shadow: 0 44px 88px -26px rgba(8, 48, 80, .62); }
/* De focusring hoort om de hele afbeelding, niet om de inline box eromheen. */
.pg-hero__medialink:focus-visible { outline: 3px solid var(--ax-ink); outline-offset: 4px; }
.pg-hero__media img {
display: block;
width: 100%;
height: auto;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, .6);
box-shadow: 0 34px 74px -26px rgba(8, 48, 80, .55);
}
/* Accreditatiebadges op /about/#ervaring. De hoogte staat vast en de breedte
volgt: de EXIN-badges zijn schilden en de NL AIC-badge is een cirkel, dus met
een vaste breedte zou de een uitgerekt en de ander gedrongen staan. Een vaste
hoogte zet ze optisch op één lijn.
Die hoogte staat er ook om een tweede reden: de badges laden lazy, en een nog
niet geladen ![]()
zonder hoogte is nul pixels hoog. Dan schuift de pagina
als ze binnenkomen, en in een blok dat zelf nul hoog blijft laden ze zelfs
nooit — hetzelfde slot als bij de klantenstrip. */
.pg-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 28px;
margin: 30px 0 34px;
padding: 0;
list-style: none;
}
.pg-badges__item { flex: none; }
.pg-badges__img { display: block; height: 110px; width: auto; }
/* Section rhythm ----------------------------------------------------------- */
.pg-section { position: relative; padding: 120px 48px; background: var(--ax-bg); }
.pg-section--band { background: var(--ax-bg-alt); }
.pg-section--tight { padding: 80px 48px; }
.pg-section__inner { display: grid; gap: 50px; }
.pg-head { display: grid; gap: 18px; max-width: 62ch; }
.pg-head--wide { max-width: 78ch; }
.pg-title { font-size: clamp(30px, 3.4vw, 50px); }
.pg-lead { font-size: 18px; line-height: 1.7; color: rgba(var(--ax-textrg), .78); }
.pg-body { display: grid; gap: 20px; max-width: 68ch; }
.pg-body p { font-size: 17px; line-height: 1.75; color: rgba(var(--ax-textrg), .78); }
.pg-body p strong { color: var(--ax-text); font-weight: 600; }
.pg-body__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* A short pull-quote line, used for the "Dat is waar wij voor zijn." beats */
.pg-pull {
font-family: var(--ax-display), Impact, sans-serif;
font-weight: var(--ax-display-weight);
letter-spacing: var(--ax-display-tracking);
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.15;
max-width: 34ch;
color: var(--ax-ink);
}
/* Split: sticky heading beside flowing copy -------------------------------- */
.pg-split {
display: grid;
grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
gap: 80px;
align-items: start;
}
.pg-split__aside { position: sticky; top: 120px; display: grid; gap: 20px; }
/* Card trio ---------------------------------------------------------------- */
.pg-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-card {
position: relative;
padding: 34px;
border-radius: 24px;
display: grid;
gap: 14px;
align-content: start;
overflow: hidden;
transition: transform .45s var(--ax-ease), border-color .4s ease, background .4s ease;
}
.pg-card:hover {
border-color: rgba(var(--ax-arg), .55);
background: linear-gradient(140deg, rgba(var(--ax-panelrg), .94), rgba(var(--ax-arg), .12));
transform: translateY(-6px);
}
.pg-card__num { font-size: 10px; letter-spacing: .2em; color: var(--ax-a3); }
.pg-card__title {
font-family: Montserrat, sans-serif;
font-size: clamp(20px, 1.8vw, 26px);
font-weight: 600;
letter-spacing: -.02em;
}
.pg-card__text { font-size: 15px; line-height: 1.65; color: rgba(var(--ax-textrg), .74); }
/* Linked cards (homepage pillars, Academy routes) -------------------------- */
.pg-linkcard {
display: grid;
gap: 16px;
align-content: start;
padding: 40px;
border-radius: 26px;
color: inherit;
transition: transform .45s var(--ax-ease), border-color .4s ease, background .4s ease;
}
.pg-linkcard:hover {
color: inherit;
border-color: rgba(var(--ax-arg), .55);
background: linear-gradient(140deg, rgba(var(--ax-panelrg), .94), rgba(var(--ax-arg), .12));
transform: translateY(-6px);
}
.pg-linkcard__title {
font-family: var(--ax-display), Impact, sans-serif;
font-weight: var(--ax-display-weight);
letter-spacing: var(--ax-display-tracking);
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1;
}
.pg-linkcard__text { font-size: 16px; line-height: 1.65; color: rgba(var(--ax-textrg), .76); }
.pg-linkcard__cta {
margin-top: 4px;
font-size: 15px;
font-weight: 700;
color: var(--ax-a3);
}
.pg-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Service blocks (Solutions) ----------------------------------------------- */
.pg-services { display: grid; gap: 20px; }
.pg-service {
display: grid;
grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
gap: 40px;
padding: 40px;
border-radius: 24px;
align-items: start;
}
.pg-service__label { display: grid; gap: 10px; align-content: start; }
.pg-service__kicker { font-size: 10px; letter-spacing: .2em; color: var(--ax-a3); }
.pg-service__title {
font-family: Montserrat, sans-serif;
font-size: clamp(21px, 2vw, 28px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
}
.pg-service__body { display: grid; gap: 16px; }
.pg-service__body p { font-size: 16px; line-height: 1.7; color: rgba(var(--ax-textrg), .76); }
/* Course cards (Academy) --------------------------------------------------- */
.pg-catgroup { display: grid; gap: 26px; }
.pg-cathead { display: grid; gap: 10px; max-width: 60ch; }
.pg-cathead__title { font-size: clamp(26px, 2.6vw, 38px); }
.pg-cathead__text { font-size: 16px; line-height: 1.6; color: rgba(var(--ax-textrg), .74); }
.pg-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-course {
display: grid;
gap: 12px;
align-content: start;
padding: 28px;
border-radius: 20px;
transition: transform .35s var(--ax-ease), border-color .35s ease;
}
.pg-course:hover { border-color: rgba(var(--ax-arg), .5); transform: translateY(-4px); }
.pg-course__title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.pg-course__text { font-size: 15px; line-height: 1.6; color: rgba(var(--ax-textrg), .72); }
.pg-course__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(var(--ax-textrg), .14);
font-family: Montserrat, sans-serif;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(var(--ax-lightrg), .7);
}
.pg-course__price { color: var(--ax-a4); font-weight: 700; letter-spacing: .04em; }
/* Bullet list -------------------------------------------------------------- */
.pg-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-list li {
display: flex;
gap: 14px;
font-size: 16px;
line-height: 1.6;
color: rgba(var(--ax-textrg), .8);
}
.pg-list li::before {
content: "";
flex: none;
margin-top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ax-a);
}
/* Legal pages -------------------------------------------------------------- */
/* Long statutory text: one readable column, headings that step down clearly. */
.pg-legal { max-width: 74ch; display: grid; gap: 18px; }
.pg-legal__h2 { margin-top: 26px; font-size: clamp(22px, 2.4vw, 30px); }
.pg-legal__h2:first-child { margin-top: 0; }
.pg-legal__h3 {
margin-top: 10px;
font-size: 17px;
font-weight: 700;
color: var(--ax-text);
}
.pg-legal p { font-size: 17px; line-height: 1.75; color: rgba(var(--ax-textrg), .78); }
.pg-legal a { color: var(--ax-a); text-decoration: underline; }
.pg-legal__date {
margin-top: 20px;
font-style: italic;
color: rgba(var(--ax-textrg), .6);
}
.pg-list--sub { margin-top: 10px; margin-left: 4px; }
/* CTA band ----------------------------------------------------------------- */
.pg-cta { position: relative; padding: 130px 48px; background: var(--ax-bg-alt); }
.pg-cta__inner {
max-width: 900px;
margin: 0 auto;
display: grid;
gap: 28px;
justify-items: center;
text-align: center;
}
.pg-cta__title { font-size: clamp(32px, 4.4vw, 62px); max-width: 24ch; }
.pg-cta__lead { max-width: 54ch; font-size: 18px; line-height: 1.65; color: rgba(var(--ax-inkrg), .8); }
.pg-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* Note strip: flags copy or assets the team still has to deliver ----------- */
.pg-note {
display: flex;
gap: 14px;
align-items: flex-start;
/* .ax-ph centreert en kapitaliseert zijn inhoud; een notitie is een zin, dus
die twee weer uit. Staat alleen op de pagina met SHOW_NOTES aan, zie
note() in het buildscript. */
text-align: left;
text-transform: none;
padding: 18px 22px;
border-radius: 16px;
border: 1px dashed rgba(var(--ax-arg), .5);
background: rgba(var(--ax-arg), .07);
font-size: 14px;
line-height: 1.55;
color: rgba(var(--ax-textrg), .78);
}
.pg-note__label {
flex: none;
font-family: Montserrat, sans-serif;
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ax-a4);
padding-top: 2px;
}
/* Contact form ------------------------------------------------------------- */
.pg-contactline {
margin-bottom: 34px;
font-style: normal;
font-size: 16px;
line-height: 1.8;
color: rgba(var(--ax-textrg), .8);
}
.pg-contactline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pg-contactline a:hover { color: var(--ax-text); }
.ax-dot { margin: 0 10px; opacity: .45; }
.pg-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 70px; align-items: start; }
.pg-form { display: grid; gap: 18px; padding: 40px; border-radius: 26px; }
.pg-field { display: grid; gap: 8px; }
.pg-field > span { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(var(--ax-textrg), .82); }
.pg-field input,
.pg-field select,
.pg-field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid rgba(var(--ax-textrg), .22);
border-radius: 12px;
background: rgba(255, 255, 255, .82);
color: var(--ax-text);
font: inherit;
font-size: 16px;
}
.pg-field textarea { min-height: 140px; resize: vertical; }
.pg-field input:focus-visible,
.pg-field select:focus-visible,
.pg-field textarea:focus-visible { outline: 2px solid var(--ax-a); outline-offset: 1px; }
.pg-form__submit { justify-self: start; border: 0; }
.pg-form__note { font-size: 13px; line-height: 1.5; color: rgba(var(--ax-textrg), .6); }
.pg-aside { display: grid; gap: 26px; }
.pg-aside__block { display: grid; gap: 10px; }
.pg-aside__label { font-size: 10px; letter-spacing: .18em; color: var(--ax-a3); }
.pg-aside__text { font-size: 17px; line-height: 1.6; color: rgba(var(--ax-textrg), .8); }
/* FAQ groups (contact page) ------------------------------------------------ */
.pg-faqgroups { display: grid; gap: 60px; }
.pg-faqgroup { display: grid; gap: 20px; }
.pg-faqgroup__title { font-size: clamp(22px, 2.2vw, 30px); }
/* Insights: overzicht en artikelpagina ------------------------------------- */
/* Het overzicht toont alleen koppen. De tekst staat op de artikelpagina, zodat
/insights/ kort blijft en elk artikel een eigen adres heeft. */
.pg-posts { display: grid; gap: 0; max-width: 74ch; }
.pg-post {
position: relative;
display: grid;
gap: 10px;
padding: 30px 0;
border-top: 1px solid rgba(var(--ax-textrg), .14);
}
.pg-post:last-child { border-bottom: 1px solid rgba(var(--ax-textrg), .14); }
.pg-post__meta {
font-size: 12px;
letter-spacing: .04em;
color: rgba(var(--ax-textrg), .58);
}
.pg-post__title { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; font-weight: 700; }
.pg-post__link { color: var(--ax-text); text-decoration: none; }
/* De hele kaart klikbaar zonder een tweede link: dit vlak ligt over de kaart
heen en hoort bij dezelfde , dus een schermlezer hoort er één. */
.pg-post__link::after { content: ""; position: absolute; inset: 0; }
.pg-post:hover .pg-post__link { color: var(--ax-a); }
.pg-post__excerpt { font-size: 16px; line-height: 1.7; color: rgba(var(--ax-textrg), .74); }
.pg-post__more { font-size: 13px; font-weight: 700; color: var(--ax-a); }
.pg-post__more::after { content: " \2192"; }
.pg-post:hover .pg-post__more { text-decoration: underline; }
/* De artikeltekst zelf: één leeskolom, zelfde maat als de juridische pagina's. */
.pg-article { max-width: 68ch; display: grid; gap: 18px; }
.pg-article__h2 { margin-top: 26px; font-size: clamp(21px, 2.2vw, 28px); }
.pg-article__h2:first-child { margin-top: 0; }
.pg-article p { font-size: 17px; line-height: 1.8; color: rgba(var(--ax-textrg), .82); }
.pg-article .pg-list { gap: 12px; }
/* Een genummerde opsomming: hetzelfde bolletje als .pg-list, maar met het
nummer erin, zodat "1." en "2." uit het artikel niet verloren gaan. */
.pg-list--ol { counter-reset: pg-ol; }
.pg-list--ol > li::before {
counter-increment: pg-ol;
content: counter(pg-ol);
flex: none;
display: grid;
place-items: center;
margin-top: 1px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(var(--ax-arg), .18);
color: var(--ax-a4);
font-size: 11px;
font-weight: 700;
}
.pg-article__source,
.pg-article__back { max-width: 68ch; font-size: 14px; color: rgba(var(--ax-textrg), .62); }
.pg-article__source a,
.pg-article__back a { color: var(--ax-a); text-decoration: underline; }
.pg-article__back a::before { content: "\2190 "; }
@media (max-width: 720px) {
.pg-post { padding: 22px 0; }
.pg-article p { font-size: 16px; }
}
/* Anchor offset so sticky nav never covers a jumped-to heading ------------- */
[id] { scroll-margin-top: 130px; }
/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
.pg-hero { padding: 170px 32px 64px; }
.pg-hero__inner--split { grid-template-columns: 1fr; gap: 40px; }
.pg-hero__inner--split .pg-hero__title { max-width: 22ch; }
.pg-hero__inner--split .pg-hero__lead { max-width: 60ch; }
.pg-section, .pg-cta { padding-left: 32px; padding-right: 32px; }
.pg-split { grid-template-columns: 1fr; gap: 34px; }
.pg-split__aside { position: static; }
.pg-trio, .pg-courses { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-duo { grid-template-columns: 1fr; }
.pg-service { grid-template-columns: 1fr; gap: 22px; padding: 32px; }
.pg-contact { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 720px) {
.pg-hero { padding: 150px 20px 56px; }
/* Hoort hier en niet bij de andere 720px-regels hierboven: die staan vóór
.pg-badges in het bestand, en bij gelijke specificiteit wint de regel die
later staat. Een media query verandert daar niets aan. */
.pg-badges { gap: 18px; }
.pg-badges__img { height: 78px; }
.pg-section { padding: 80px 20px; }
.pg-section--tight { padding: 60px 20px; }
.pg-cta { padding: 90px 20px; }
.pg-card, .pg-linkcard, .pg-form { padding: 26px; }
.pg-service { padding: 26px; }
.pg-course { padding: 22px; }
.pg-faqgroups { gap: 44px; }
[id] { scroll-margin-top: 110px; }
}
/* ==========================================================================
10. Cookie consent
Nothing that is not strictly necessary may be stored before a visitor
chooses, so the banner is the gate: app.js writes the two functional keys
only after consent. Accept and refuse are the same size and weight — under
the AVG refusing has to be as easy as accepting.
========================================================================== */
.ck {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 300;
padding: 18px;
display: flex;
justify-content: center;
}
.ck[hidden] { display: none; }
.ck__panel {
width: 100%;
max-width: 760px;
display: grid;
gap: 18px;
padding: 28px 30px;
border-radius: 24px;
background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74));
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255, 255, 255, .8);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, .95),
0 30px 70px -24px rgba(8, 48, 80, .45);
color: var(--ax-ink);
}
.ck__title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -.01em;
}
.ck__text { font-size: 15px; line-height: 1.6; color: rgba(var(--ax-inkrg), .82); }
.ck__text a { color: var(--ax-a3); text-decoration: underline; }
.ck__text a:hover { color: var(--ax-ink); }
.ck__options {
display: grid;
gap: 14px;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid rgba(var(--ax-inkrg), .16);
background: rgba(255, 255, 255, .5);
}
.ck__options[hidden] { display: none; }
.ck__opt { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.ck__opt input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--ax-a); }
.ck__opt strong { font-weight: 700; }
.ck__opt span { color: rgba(var(--ax-inkrg), .78); }
.ck__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ck__btn {
padding: 14px 26px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
border: 1px solid transparent;
cursor: pointer;
transition: filter .2s ease, background .2s ease, border-color .2s ease;
}
/* Accept and refuse: same padding, same font size, same weight. */
.ck__btn--accept { background: var(--ax-a); color: #FFFFFF; }
.ck__btn--accept:hover { filter: brightness(1.08); }
.ck__btn--refuse {
background: rgba(255, 255, 255, .6);
border-color: rgba(var(--ax-inkrg), .3);
color: var(--ax-ink);
}
.ck__btn--refuse:hover { border-color: var(--ax-ink); background: rgba(255, 255, 255, .85); }
.ck__btn--quiet {
padding: 14px 10px;
background: none;
color: var(--ax-a3);
font-weight: 600;
text-decoration: underline;
}
.ck__btn--quiet:hover { color: var(--ax-ink); }
.ck__btn[hidden] { display: none; }
/* The footer link that reopens the banner — withdrawing has to be as easy as consenting */
.a-footer__legal button {
padding: 0;
font: inherit;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
.a-footer__legal button:hover { color: var(--ax-text); }
/* Storage table on the cookieverklaring page ------------------------------- */
.pg-tablewrap { overflow-x: auto; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.pg-table th,
.pg-table td {
padding: 14px 16px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid rgba(var(--ax-textrg), .16);
line-height: 1.55;
}
.pg-table th {
font-family: Montserrat, sans-serif;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(var(--ax-lightrg), .75);
border-bottom-color: rgba(var(--ax-textrg), .28);
}
.pg-table td code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(var(--ax-inkrg), .07);
}
@media (max-width: 720px) {
.ck { padding: 10px; }
.ck__panel { padding: 22px; border-radius: 20px; gap: 14px; }
.ck__actions { gap: 10px; }
.ck__btn { flex: 1 1 100%; text-align: center; }
.ck__btn--quiet { flex: 1 1 100%; }
}
/* ==========================================================================
11. Headline rotator (homepage)
The four headlines differ in length, so app.js reserves the height of the
tallest one and the text sits at the bottom of that box: the lead paragraph
and buttons below never move when the headline changes.
========================================================================== */
.a-hero__headline { display: grid; gap: 22px; justify-items: start; }
.a-hero__title {
display: flex;
align-items: flex-end; /* text hugs the pills when a short headline shows */
/* Quick crossfade: long enough to read as a change, short enough that the
headline is never blank when someone's eye lands on it. */
transition: opacity .22s ease;
}
.a-hero__headline[data-swapping="true"] .a-hero__title { opacity: 0; }
.a-hero__pills { display: flex; align-items: center; gap: 8px; }
/* Pills: a 4px bar inside a 24px target, so tapping is comfortable */
.hl-pill {
position: relative;
width: 26px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.hl-pill::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 4px;
border-radius: 999px;
background: rgba(var(--ax-inkrg), .32);
transition: background .3s ease, width .3s var(--ax-ease);
}
.hl-pill:hover::before { background: rgba(var(--ax-inkrg), .55); }
.hl-pill[aria-current="true"] { width: 40px; }
.hl-pill[aria-current="true"]::before { width: 32px; background: var(--ax-a); }
.hl-pause {
display: grid;
place-items: center;
width: 26px;
height: 24px;
margin-left: 4px;
padding: 0;
border: 0;
background: none;
color: rgba(var(--ax-inkrg), .5);
cursor: pointer;
transition: color .25s ease;
}
.hl-pause:hover { color: var(--ax-ink); }
.hl-pause__icon { width: 12px; height: 12px; fill: currentColor; }
.hl-pause__go { display: none; }
.hl-pause[data-paused="true"] .hl-pause__stop { display: none; }
.hl-pause[data-paused="true"] .hl-pause__go { display: block; }
@media (max-width: 720px) {
.a-hero__headline { gap: 18px; }
}
/* No automatic movement when the visitor asked for less motion; the pills and
the play button still work, so they can step through by hand. */
@media (prefers-reduced-motion: reduce) {
.a-hero__title { transition: none; }
}
/* Honeypot: buiten beeld in plaats van display:none, omdat een deel van de bots
verborgen velden juist overslaat. Mag nooit focus of ruimte krijgen. */
.pg-form__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Statusregel onder het contactformulier. */
.pg-form__pending[data-state="error"] { color: var(--ax-error, #b3261e); }
.pg-form__pending[data-state="ok"] { font-weight: 600; }