@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../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;
}
@font-face {
font-family: "Google Sans Flex";
font-style: normal;
font-weight: 400 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/google-sans-flex-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 Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 500;
size-adjust: 114.62%;
ascent-override: 84.45%;
descent-override: 21.90%;
line-gap-override: 0%;
}
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
font-weight: 600;
size-adjust: 108.90%;
ascent-override: 88.89%;
descent-override: 23.05%;
line-gap-override: 0%;
}
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
font-weight: 700;
size-adjust: 110.85%;
ascent-override: 87.33%;
descent-override: 22.64%;
line-gap-override: 0%;
}
@font-face {
font-family: "Google Sans Flex Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 400;
size-adjust: 100.45%;
ascent-override: 96.16%;
descent-override: 28.47%;
line-gap-override: 0%;
}
@font-face {
font-family: "Google Sans Flex Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 500;
size-adjust: 103.38%;
ascent-override: 93.44%;
descent-override: 27.67%;
line-gap-override: 0%;
}
:root {
--olijf-50:  #F4F5EC;
--olijf-100: #E6E9D3;
--olijf-200: #CDD3A9;
--olijf-300: #AEB87A;
--olijf-400: #869352;
--olijf-500: #606C38;
--olijf-600: #4E5A2C;
--olijf-700: #3E4823;
--bosgroen:  #283618;
--linnen:       #F5EBE0;
--linnen-donker:#E7D7C4;
--wit: #FFFFFF;
--neutraal-50:  #F7F7F3;
--neutraal-100: #EDEEE7;
--neutraal-200: #DCDED3;
--neutraal-300: #C3C6B8;
--neutraal-400: #9DA192;
--neutraal-500: #767A6B;
--neutraal-600: #5A5E50;
--neutraal-700: #43463B;
--neutraal-800: #2D3027;
--neutraal-900: #1A1C16;
--succes-600: #276B2B;  --succes-50: #E8F3E8;
--waarschuwing-600: #8A5A00; --waarschuwing-400: #E0A526; --waarschuwing-50: #FFF4DC;
--fout-600: #B3261E;    --fout-50: #FCEBEA;
--info-600: #1F5F8B;    --info-50: #E7F1F8;
--label-a4: #004B24;
--label-a3: #005C2C;
--label-a2: #006E35;
--label-a1: #00813D;
--label-a:  #00A94F;
--label-b:  #51B848;
--label-c:  #BDD630;
--label-d:  #FFF200;
--label-e:  #FDB913;
--label-f:  #F37021;
--label-g:  #E2231A;
--font-heading: "Montserrat", "Montserrat Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Google Sans Flex", "Google Sans Flex Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heading: 600;
--font-weight-button: 600;
--text-display-1: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem);
--text-display-2: clamp(2.375rem, 1.911rem + 1.905vw, 3.625rem);
--text-h1: clamp(2.125rem, 1.846rem + 1.143vw, 2.875rem);
--text-h2: clamp(1.75rem, 1.564rem + 0.762vw, 2.25rem);
--text-h3: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);
--text-h4: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem);
--text-body-lg: 1.125rem;
--text-body: 1rem;
--text-body-sm: 0.875rem;
--text-caption: 0.75rem;
--leading-tight: 1.08;
--leading-snug: 1.2;
--leading-body-lg: 1.65;
--leading-body: 1.5;
--tracking-display-1: -0.03em;
--tracking-display: -0.018em;
--tracking-heading: -0.01em;
--tracking-eyebrow: 0.08em;
--measure: 68ch;
--measure-narrow: 48ch;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3rem;
--space-9: 4rem;
--space-10: 5rem;
--space-11: 7rem;
--space-12: 10rem;
--container: 80rem;
--container-narrow: 48rem;
--page-padding: clamp(1.25rem, 0.229rem + 4.19vw, 4rem);
--section-padding: clamp(4rem, 2.886rem + 4.571vw, 7rem);
--section-padding-sm: clamp(3rem, 2.443rem + 2.286vw, 4.5rem);
--gap-split: clamp(2.5rem, 1.571rem + 3.81vw, 5rem);
--gap-grid: clamp(1rem, 0.629rem + 1.524vw, 2rem);
--aside-min: 20rem;
--aside: 26rem;
--radius: 0;
--radius-pill: 0;
--radius-circle: 50%;
--border-width: 1px;
--border-width-strong: 2px;
--shadow-raised: 0 1px 2px rgb(26 28 22 / 0.06), 0 8px 24px rgb(26 28 22 / 0.08);
--opacity-disabled: 0.45;
--tap-target: 2.75rem;
--icon-size: 1.5rem;
--icon-size-sm: 1.25rem;
--duration-fast: 150ms;
--duration: 200ms;
--ease: cubic-bezier(0.2, 0, 0, 1);
--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--reveal-stap: calc(var(--duration-fast) / 5);
--reveal-volgorde: var(--duration-fast);
--reveal-uitkomst: calc(var(--duration) * 1.5);
--reveal-foto: calc(var(--duration) * 3);
--reveal-scan: calc(var(--duration) * 5);
--reveal-afstand: var(--space-3);
--color-bg: var(--wit);
--color-bg-subtle: var(--neutraal-50);
--color-surface-warm: var(--linnen);
--color-surface-brand: var(--olijf-500);
--color-surface-dark: var(--bosgroen);
--color-text: var(--neutraal-900);
--color-text-muted: var(--neutraal-600);
--color-heading: var(--neutraal-900);
--color-eyebrow: var(--olijf-500);
--color-link: var(--olijf-600);
--color-link-hover: var(--bosgroen);
--color-action: var(--olijf-500);
--color-action-hover: var(--olijf-600);
--color-action-text: var(--wit);
--color-action-secondary: var(--neutraal-900);
--color-border: var(--neutraal-200);
--color-border-strong: var(--neutraal-500);
--color-focus: var(--bosgroen);
--color-placeholder-bg: var(--neutraal-100);
--color-placeholder-fg: var(--neutraal-600);
}
.surface-white {
background-color: var(--wit);
color: var(--color-text);
--color-bg: var(--wit);
--color-text: var(--neutraal-900);
--color-text-muted: var(--neutraal-600);
--color-heading: var(--neutraal-900);
--color-eyebrow: var(--olijf-500);
--color-link: var(--olijf-600);
--color-link-hover: var(--bosgroen);
--color-action: var(--olijf-500);
--color-action-hover: var(--olijf-600);
--color-action-text: var(--wit);
--color-action-secondary: var(--neutraal-900);
--color-border: var(--neutraal-200);
--color-border-strong: var(--neutraal-500);
--color-focus: var(--bosgroen);
--color-placeholder-bg: var(--neutraal-100);
--color-placeholder-fg: var(--neutraal-600);
}
.surface-warm {
background-color: var(--linnen);
color: var(--color-text);
--color-bg: var(--linnen);
--color-border: var(--linnen-donker);
--color-placeholder-bg: var(--linnen-donker);
--color-placeholder-fg: var(--neutraal-700);
}
.surface-brand {
background-color: var(--olijf-500);
color: var(--color-text);
--color-bg: var(--olijf-500);
--color-text: var(--wit);
--color-text-muted: var(--wit);
--color-heading: var(--wit);
--color-eyebrow: var(--wit);
--color-link: var(--wit);
--color-link-hover: var(--wit);
--color-action: var(--wit);
--color-action-hover: var(--neutraal-100);
--color-action-text: var(--neutraal-900);
--color-action-secondary: var(--wit);
--color-border: rgb(255 255 255 / 0.28);
--color-border-strong: var(--wit);
--color-focus: var(--wit);
--color-placeholder-bg: var(--olijf-600);
--color-placeholder-fg: var(--wit);
}
.surface-dark {
background-color: var(--bosgroen);
color: var(--color-text);
--color-bg: var(--bosgroen);
--color-text: var(--wit);
--color-text-muted: var(--neutraal-200);
--color-heading: var(--wit);
--color-eyebrow: var(--wit);
--color-link: var(--wit);
--color-link-hover: var(--wit);
--color-action: var(--wit);
--color-action-hover: var(--neutraal-100);
--color-action-text: var(--neutraal-900);
--color-action-secondary: var(--wit);
--color-border: rgb(255 255 255 / 0.2);
--color-border-strong: var(--olijf-300);
--color-focus: var(--wit);
--color-placeholder-bg: var(--olijf-700);
--color-placeholder-fg: var(--wit);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
font-weight: var(--font-weight-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
}
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
padding: 0;
}
table {
border-collapse: collapse;
}
@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;
}
}
:focus-visible {
outline: var(--border-width-strong) solid var(--color-focus);
outline-offset: 3px;
}
h1,
h2,
h3,
h4,
.type-display-1,
.type-display-2,
.type-h1,
.type-h2,
.type-h3,
.type-h4 {
font-family: var(--font-heading);
font-weight: var(--font-weight-heading);
color: var(--color-heading);
text-wrap: balance;
}
h1,
.type-h1 {
font-size: var(--text-h1);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
h2,
.type-h2 {
font-size: var(--text-h2);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-heading);
}
h3,
.type-h3 {
font-size: var(--text-h3);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-heading);
}
h4,
.type-h4 {
font-size: var(--text-h4);
line-height: var(--leading-snug);
}
.type-display-1 {
font-size: var(--text-display-1);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display-1);
}
.type-display-2 {
font-size: var(--text-display-2);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
p,
li {
text-wrap: pretty;
}
.type-body-lg {
font-family: var(--font-body);
font-size: var(--text-body-lg);
line-height: var(--leading-body-lg);
}
.type-body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
}
.type-body-sm {
font-family: var(--font-body);
font-size: var(--text-body-sm);
line-height: var(--leading-body);
}
.type-eyebrow {
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-body);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-eyebrow);
}
.type-label {
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-body);
}
.type-caption {
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-body);
color: var(--color-text-muted);
}
.text-muted {
color: var(--color-text-muted);
}
.measure {
max-width: var(--measure);
}
.measure-narrow {
max-width: var(--measure-narrow);
}
.tabular {
font-variant-numeric: tabular-nums;
}
a {
color: var(--color-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--duration-fast) var(--ease);
}
a:hover {
color: var(--color-link-hover);
text-decoration-thickness: 2px;
}
strong,
b {
font-weight: var(--font-weight-semibold);
}
.prose {
max-width: var(--measure);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.prose ul,
.prose ol {
padding-left: 1.25em;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--page-padding));
margin-inline: auto;
padding-inline: var(--page-padding);
}
.container--narrow {
max-width: calc(var(--container-narrow) + 2 * var(--page-padding));
}
.section {
padding-block: var(--section-padding);
}
.section--sm {
padding-block: var(--section-padding-sm);
}
.stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, var(--space-5));
}
.stack--xs { --stack-gap: var(--space-2); }
.stack--sm { --stack-gap: var(--space-4); }
.stack--lg { --stack-gap: var(--space-6); }
.stack--xl { --stack-gap: var(--space-9); }
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-4));
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-split);
align-items: center;
}
.split--top {
align-items: start;
}
@media (min-width: 64rem) and (min-height: 48rem) {
.split--sticky-media > .media {
position: sticky;
top: calc(var(--header-height, var(--space-10)) + var(--space-5));
}
}
@media (min-width: 48rem) {
.split {
grid-template-columns: 1fr 1fr;
}
}
.grid {
display: grid;
gap: var(--gap-grid);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
}
.grid--2 { --grid-min: 24rem; }
.grid--4 { --grid-min: 14rem; }
@media (min-width: 64rem) {
.grid--3-fixed {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2-fixed {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.section-head {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--measure);
margin-bottom: var(--space-9);
}
.section-head--flush {
margin-bottom: 0;
}
.section-head--center {
margin-inline: auto;
text-align: center;
align-items: center;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.nowrap {
white-space: nowrap;
}
.skip-link {
position: absolute;
left: var(--space-4);
top: -100px;
z-index: 100;
padding: var(--space-3) var(--space-5);
background: var(--bosgroen);
color: var(--wit);
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
}
.skip-link:focus {
top: var(--space-4);
color: var(--wit);
}
.icon {
width: var(--icon-size);
height: var(--icon-size);
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--sm {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
.icon--lg {
width: 2rem;
height: 2rem;
}
.icon-tile,
.card__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 3rem;
height: 3rem;
background: var(--color-surface-warm);
color: var(--olijf-600);
}
.icon-tile--lg {
width: var(--space-9);
height: var(--space-9);
}
.icon-tile--brand {
background: var(--color-surface-brand);
color: var(--wit);
}
.surface-warm .icon-tile {
background: var(--color-surface-brand);
color: var(--wit);
}
.surface-brand .icon-tile,
.surface-dark .icon-tile {
width: auto;
height: auto;
min-height: calc(var(--text-h4) * var(--leading-snug));
background: transparent;
border: 0;
box-shadow: none;
outline: 0;
color: var(--wit);
}
.logo {
display: inline-flex;
align-items: center;
min-height: var(--tap-target);
}
.logo__img {
display: block;
height: 2rem;
width: auto;
}
@media (min-width: 64rem) {
.site-header .logo__img {
height: 3rem;
}
}
.site-footer .logo__img {
width: 22rem;
max-width: 100%;
height: auto;
aspect-ratio: 1551 / 354;
}
.site-footer--compact .logo__img {
width: 16rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 3rem;
padding: var(--space-3) var(--space-5);
border: var(--border-width) solid var(--color-action);
border-radius: var(--radius);
background-color: var(--color-action);
color: var(--color-action-text);
font-family: var(--font-heading);
font-size: var(--text-body);
font-weight: var(--font-weight-button);
line-height: var(--leading-body);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease);
}
.btn:hover {
background-color: var(--color-action-hover);
border-color: var(--color-action-hover);
color: var(--color-action-text);
text-decoration: none;
}
.btn:active {
transform: translateY(1px);
}
.btn--secondary {
background-color: transparent;
border-color: var(--color-action-secondary);
color: var(--color-action-secondary);
}
.btn--secondary:hover {
background-color: var(--color-action-secondary);
border-color: var(--color-action-secondary);
color: var(--wit);
}
.btn--text {
min-height: var(--tap-target);
padding-inline: 0;
border-color: transparent;
background-color: transparent;
color: var(--color-link);
}
.btn--text:hover {
background-color: transparent;
border-color: transparent;
color: var(--color-link-hover);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.btn--text .icon {
transition: transform var(--duration) var(--ease);
}
.btn--text:hover .icon {
transform: translateX(3px);
}
.btn--dark {
background-color: var(--neutraal-900);
border-color: var(--neutraal-900);
color: var(--wit);
}
.btn--dark:hover {
background-color: var(--neutraal-800);
border-color: var(--neutraal-800);
color: var(--wit);
}
.surface-dark .btn--dark,
.surface-dark .btn--dark:hover {
background-color: var(--color-action);
border-color: var(--color-action);
color: var(--color-action-text);
}
.surface-dark .surface-brand .btn--dark {
background-color: var(--neutraal-900);
border-color: var(--neutraal-900);
color: var(--wit);
}
.surface-dark .surface-brand .btn--dark:hover {
background-color: var(--neutraal-800);
border-color: var(--neutraal-800);
color: var(--wit);
}
.surface-brand .btn--secondary,
.surface-dark .btn--secondary,
.surface-brand .btn--text,
.surface-dark .btn--text {
min-height: var(--tap-target);
padding-inline: 0;
border-color: transparent;
background-color: transparent;
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.surface-brand .btn--secondary:hover,
.surface-dark .btn--secondary:hover,
.surface-brand .btn--text:hover,
.surface-dark .btn--text:hover {
border-color: transparent;
background-color: transparent;
color: var(--color-link-hover);
text-decoration-thickness: 2px;
}
.btn--lg {
min-height: 3.5rem;
padding: var(--space-4) var(--space-6);
font-size: var(--text-body-lg);
}
.btn--block {
width: 100%;
white-space: normal;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: var(--opacity-disabled);
cursor: not-allowed;
pointer-events: none;
}
.btn .icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
background: var(--olijf-100);
color: var(--olijf-700);
font-family: var(--font-heading);
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
line-height: 1.5;
}
.badge--neutraal { background: var(--neutraal-100); color: var(--neutraal-700); }
.badge--succes { background: var(--succes-50); color: var(--succes-600); }
.badge--waarschuwing { background: var(--waarschuwing-50); color: var(--waarschuwing-600); }
.badge--fout { background: var(--fout-50); color: var(--fout-600); }
.placeholder {
padding: 0 0.25em;
background: var(--waarschuwing-50);
color: var(--waarschuwing-600);
outline: 1px dashed var(--waarschuwing-400);
font-weight: var(--font-weight-semibold);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.alert .placeholder {
white-space: nowrap;
}
.energy-label {
--label-bg: var(--label-a);
--label-fg: var(--neutraal-900);
display: inline-flex;
align-items: center;
height: 2.25rem;
min-width: 4.5rem;
padding-left: var(--space-3);
padding-right: 1.5rem;
background: var(--label-bg);
color: var(--label-fg);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-size: 1.125rem;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
}
.energy-label--lg {
height: 3.5rem;
min-width: 7rem;
padding-left: var(--space-4);
padding-right: 2.25rem;
font-size: 1.75rem;
clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%);
}
.energy-label--a4 { --label-bg: var(--label-a4); --label-fg: var(--wit); }
.energy-label--a3 { --label-bg: var(--label-a3); --label-fg: var(--wit); }
.energy-label--a2 { --label-bg: var(--label-a2); --label-fg: var(--wit); }
.energy-label--a1 { --label-bg: var(--label-a1); --label-fg: var(--wit); }
.energy-label--a  { --label-bg: var(--label-a); }
.energy-label--b  { --label-bg: var(--label-b); }
.energy-label--c  { --label-bg: var(--label-c); }
.energy-label--d  { --label-bg: var(--label-d); }
.energy-label--e  { --label-bg: var(--label-e); }
.energy-label--f  { --label-bg: var(--label-f); }
.energy-label--g  { --label-bg: var(--label-g); --label-fg: var(--wit); }
.energy-scale {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-width: 26rem;
padding: 0;
list-style: none;
}
.energy-scale li {
display: flex;
align-items: center;
gap: var(--space-3);
}
.energy-scale .energy-label {
width: calc(4.5rem + var(--step, 0) * clamp(0.75rem, 3vw, 1.5rem));
height: 1.875rem;
font-size: 0.9375rem;
}
.energy-scale__current {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-heading);
}
.energy-scale__current::before {
content: "";
width: 0.75rem;
height: 1.875rem;
background: var(--color-heading);
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-row {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field__label {
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-body);
color: var(--color-heading);
}
.field__optional {
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
}
.field__hint {
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.field__error {
display: none;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
color: var(--fout-600);
}
.field--error .field__error {
display: flex;
}
.input,
.select,
.textarea {
width: 100%;
min-height: 3rem;
padding: var(--space-3) var(--space-4);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius);
background-color: var(--wit);
color: var(--neutraal-900);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder {
color: var(--neutraal-500);
}
.input:hover,
.select:hover,
.textarea:hover {
border-color: var(--neutraal-700);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
outline: none;
border-color: var(--bosgroen);
box-shadow: 0 0 0 1px var(--bosgroen), 0 0 0 4px var(--olijf-200);
}
.field--error .input,
.field--error .select,
.field--error .textarea {
border-color: var(--fout-600);
box-shadow: 0 0 0 1px var(--fout-600);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
background-color: var(--neutraal-100);
color: var(--neutraal-500);
cursor: not-allowed;
}
.textarea {
min-height: 7.5rem;
resize: vertical;
}
.select {
appearance: none;
padding-right: var(--space-8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1C16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
background-size: 1.25rem;
}
.choice-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0;
border: 0;
}
.choice-group legend {
margin-bottom: var(--space-2);
}
.choice {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: var(--tap-target);
padding-block: var(--space-2);
cursor: pointer;
}
.choice input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
flex-shrink: 0;
accent-color: var(--olijf-500);
cursor: pointer;
}
.quick-start {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
width: 100%;
max-width: 42rem;
}
.quick-start__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: end;
gap: var(--space-4) var(--space-3);
width: 100%;
text-align: left;
}
.quick-start__submit {
grid-column: 1 / -1;
}
@media (min-width: 48rem) {
.quick-start__form {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) auto;
}
.quick-start__submit {
grid-column: auto;
}
}
.quick-start--panel {
gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius);
}
@media (min-width: 48rem) {
.quick-start--panel {
padding: var(--space-7);
}
}
.order__form {
display: flex;
flex-direction: column;
}
.order__steps {
--order-step-gap: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--order-step-gap);
min-width: 0;
}
.order__step {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: var(--space-5);
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.order__step-head {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.order__step-number {
display: grid;
place-items: center;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
background: var(--color-action);
color: var(--color-action-text);
}
.order__step-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.order__step-body {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
}
@media (min-width: 48rem) {
.order__step {
grid-template-columns: 2.5rem minmax(0, 1fr);
column-gap: var(--space-5);
}
.order__step-head {
display: contents;
}
.order__step-body {
grid-column: 2;
}
.order__step::before {
content: "";
position: absolute;
top: calc(2.5rem + var(--space-3));
bottom: calc(var(--space-3) - var(--order-step-gap));
left: calc(1.25rem - var(--border-width) / 2);
width: var(--border-width);
background: var(--color-border);
}
.order__step:last-child::before {
content: none;
}
}
.order__step--locked .order__step-body {
opacity: var(--opacity-disabled);
}
.order__step--locked .order__step-number {
background: var(--color-border);
color: var(--color-text-muted);
}
.order__step--locked .order__step-text > :first-child {
color: var(--color-text-muted);
}
.order__lock {
display: none;
align-items: flex-start;
gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.order__lock .icon {
margin-top: 0.0625rem;
}
.order__step--locked .order__lock {
display: flex;
}
.order__next-row {
display: flex;
flex-direction: column;
align-items: stretch;
}
.order__next {
margin-top: var(--space-2);
}
@media (min-width: 30rem) {
.order__next-row {
align-items: flex-start;
}
}
.order__remembered {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--space-3);
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.order__remembered .btn--text {
min-height: var(--tap-target);
font-size: var(--text-body-sm);
}
.order__address {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--space-5) var(--space-3);
}
.order__lookup {
margin-top: calc(var(--text-body-sm) * var(--leading-body) + var(--space-2));
}
.order__area {
grid-column: 1 / -1;
}
@media (48rem <= width < 64rem), (min-width: 90rem) {
.order__address {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) auto;
}
.order__area {
grid-column: 1 / 3;
}
}
@media (64rem <= width < 90rem) {
.order__area {
grid-column: 1;
}
}
.order__status {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.order__status .icon {
margin-top: 0.0625rem;
}
.order__status--found {
color: var(--succes-600);
}
.order__status--error {
color: var(--fout-600);
}
.order__options {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.order__note {
margin-top: var(--space-5);
}
.order__send {
display: none;
}
@media (min-width: 64rem) {
.order__send {
display: flex;
margin-top: var(--space-5);
}
}
.order__contact {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 30rem) {
.order__contact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.order__form .input,
.option-card__check {
scroll-margin-top: var(--space-6);
scroll-margin-bottom: calc(var(--order-bar-height, 0rem) + var(--space-5));
}
.order__step {
scroll-margin-top: var(--space-6);
}
.order__actions {
display: flex;
flex-direction: column;
}
.order__feedback:not(:empty) {
margin-top: var(--space-3);
}
.order__actions > p {
margin-top: var(--space-4);
}
.order__feedback .alert:focus {
outline: none;
}
@media (min-width: 64rem) {
.order__form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(22rem, 31%);
align-items: start;
gap: var(--space-9) var(--gap-split);
}
.order__steps {
--order-step-gap: var(--space-9);
display: contents;
}
.order__step--contact {
grid-column: 1;
grid-row: 1;
}
.order__step--address {
grid-column: 1;
grid-row: 2;
}
.order__step--options {
grid-column: 1;
grid-row: 3;
}
}
.order__form > .order-summary {
margin-top: var(--space-8);
}
.order__form > .order-summary .order-summary__head > :first-child {
scroll-margin-top: calc(var(--space-7) + var(--space-4));
}
@media (min-width: 48rem) {
.order__form > .order-summary {
margin-inline-start: calc(2.5rem + var(--space-5));
}
}
@media (min-width: 64rem) {
.order__form > .order-summary {
grid-column: 2;
grid-row: 1 / span 3;
position: sticky;
top: min(
calc(var(--header-height, var(--space-10)) + var(--space-5)),
calc(100% - var(--order-summary-height, 0rem) - var(--space-5))
);
margin-top: 0;
margin-inline-start: 0;
}
}
.order__form > .order-summary__bar {
position: sticky;
bottom: var(--toestemming-ruimte, 0rem);
z-index: 10;
margin-top: calc(-1 * var(--order-bar-height, 0rem));
margin-inline: calc(-1 * var(--page-padding));
padding-inline: var(--page-padding);
}
@media (min-width: 64rem) {
.order__form > .order-summary__bar {
display: none;
}
}
.option-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-3) var(--space-4);
padding: var(--space-4);
border: var(--border-width) solid var(--color-border);
background: var(--color-bg);
transition:
border-color var(--duration) var(--ease),
background-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
}
.option-card:hover {
border-color: var(--color-border-strong);
}
.option-card__icon {
width: var(--tap-target);
height: var(--tap-target);
transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.option-card__body {
grid-column: 2;
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.option-card__title {
cursor: pointer;
}
.option-card__title::after {
content: "";
position: absolute;
inset: 0;
}
.option-card__price {
grid-column: 2 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
}
.option-card__check {
position: relative;
z-index: 1;
grid-column: 3;
grid-row: 1;
display: grid;
place-content: center;
width: 1.5rem;
height: 1.5rem;
margin: 0.625rem 0 0;
border: var(--border-width-strong) solid var(--color-border-strong);
border-radius: var(--radius);
background: var(--wit);
appearance: none;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.option-card__check::before {
content: "";
width: 1rem;
height: 1rem;
background-color: var(--wit);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
transform: scale(0);
transition: transform var(--duration-fast) var(--ease);
}
.option-card__check:checked {
border-color: var(--color-action);
background: var(--color-action);
}
.option-card__check:checked::before {
transform: scale(1);
}
.option-card:has(.option-card__check:checked) {
border-color: var(--color-action);
box-shadow: inset 0 0 0 var(--border-width) var(--color-action);
background: var(--olijf-50);
}
.option-card:has(.option-card__check:checked) .option-card__icon {
background: var(--color-action);
color: var(--color-action-text);
}
.option-card:has(.option-card__check:focus-visible) {
outline: var(--border-width-strong) solid var(--color-focus);
outline-offset: 0.1875rem;
}
.option-card:has(.option-card__check:focus-visible) .option-card__check {
outline: none;
}
.option-card:has(.option-card__check[aria-disabled="true"]) .option-card__title,
.option-card__check[aria-disabled="true"] {
cursor: default;
}
.option-card__included {
font-weight: var(--font-weight-medium);
color: var(--color-heading);
}
.field--error .option-card {
border-color: var(--fout-600);
}
@media (48rem <= width < 64rem), (min-width: 90rem) {
.option-card {
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
column-gap: var(--space-5);
padding: var(--space-5);
}
.option-card__icon {
align-self: start;
width: 3rem;
height: 3rem;
}
.option-card__price {
grid-column: 3;
grid-row: 1;
flex-direction: column;
align-items: flex-end;
min-width: 5rem;
text-align: right;
}
.option-card__check {
grid-column: 4;
margin-top: 0;
}
}
.order-summary {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding: var(--space-7) var(--space-5);
}
.order-summary__head {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.order-summary__facts {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
}
.order-summary__fact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-4);
}
.order-summary__fact dd {
margin: 0;
text-align: right;
}
.order-summary__calc {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.order-summary .order-summary__lines,
.order-summary__total {
padding-top: var(--space-5);
border-top: var(--border-width) solid var(--color-border);
}
.order-summary__lines {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding-inline: 0;
padding-bottom: 0;
list-style: none;
}
.order-summary__line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 var(--space-4);
}
.order-summary__formula {
grid-column: 1;
}
.order-summary__amount {
grid-column: 2;
grid-row: 1;
text-align: right;
}
.order-summary__total {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.order-summary__total-label {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.order-summary__sum {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.order-summary__foot {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-2);
}
@media (min-width: 48rem) {
.order-summary {
padding: var(--space-7);
}
}
.order-summary__bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-3);
padding-inline: var(--space-5);
transition:
transform var(--duration) var(--ease),
visibility 0s linear 0s;
}
.order-summary__bar-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.order-summary__bar-total {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
}
.order-summary__bar-link .icon {
transition: transform var(--duration) var(--ease);
}
.order-summary__bar-link:hover .icon {
transform: translateY(0.125rem);
}
.order-summary__bar--hidden {
visibility: hidden;
transform: translateY(100%);
transition:
transform var(--duration) var(--ease),
visibility 0s linear var(--duration);
}
.media {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
background: var(--color-placeholder-bg);
}
.media img,
.media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6);
color: var(--color-placeholder-fg);
text-align: center;
font-size: var(--text-body-sm);
}
.media--placeholder .icon {
width: 2.5rem;
height: 2.5rem;
}
.media--placeholder p {
max-width: 28ch;
}
.photo-strip {
--strip-overhang: var(--space-6);
--strip-height: 20rem;
margin-top: calc(var(--gap-split) + var(--space-2) - var(--strip-overhang));
timeline-scope: --photo-strip;
}
.photo-strip .photo-strip__list {
display: flex;
gap: var(--space-3);
margin: 0;
padding: var(--strip-overhang) var(--page-padding);
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--page-padding);
scrollbar-width: none;
scroll-timeline: --photo-strip inline;
}
.photo-strip__list::-webkit-scrollbar {
display: none;
}
.photo-strip .photo-strip__list:focus-visible {
outline-offset: calc(-1 * var(--border-width-strong));
}
.photo-strip__item {
position: relative;
flex: 0 0 auto;
width: 15rem;
scroll-snap-align: start;
}
.photo-strip__item--square {
width: clamp(11rem, 100% - 8.5rem, 16rem);
}
.photo-strip__item--wide {
width: 18rem;
}
.photo-strip__item--narrow {
width: 12rem;
}
.photo-strip__media {
height: var(--strip-height);
}
.photo-strip__media--focus-end img {
object-position: 65% 50%;
}
.photo-strip__card {
position: absolute;
z-index: 1;
left: var(--space-3);
max-width: calc(100% - 2 * var(--space-3));
}
.photo-strip__card--top {
top: calc(var(--space-2) - var(--strip-overhang));
}
.photo-strip__card--bottom {
bottom: calc(var(--space-2) - var(--strip-overhang));
}
.photo-strip__card--end {
left: auto;
right: var(--space-3);
}
.photo-strip__card--peek {
left: var(--space-3);
right: auto;
}
.photo-strip__progress {
position: relative;
height: var(--border-width-strong);
margin: var(--space-3) var(--page-padding) 0;
background: var(--color-border);
overflow: hidden;
}
.photo-strip__progress-bar {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 30%;
background: var(--color-heading);
}
@supports (animation-timeline: scroll()) {
.photo-strip__progress-bar {
animation: photo-strip-voortgang linear both;
animation-timeline: --photo-strip;
}
}
@keyframes photo-strip-voortgang {
to {
transform: translateX(calc(700% / 3));
}
}
@media (min-width: 48rem) {
.photo-strip {
--strip-height: 25rem;
margin-top: calc(var(--gap-split) - var(--strip-overhang));
}
.photo-strip__item {
width: 19rem;
}
.photo-strip__item--square {
width: 21rem;
}
.photo-strip__item--wide {
width: 25rem;
}
.photo-strip__item--narrow {
width: 15rem;
}
.photo-strip__card {
left: var(--space-5);
max-width: calc(100% - 2 * var(--space-5));
}
.photo-strip__card--end {
left: auto;
right: var(--space-5);
}
.photo-strip__card--peek {
left: var(--space-5);
right: auto;
}
}
@media (min-width: 64rem) {
.photo-strip {
--strip-height: clamp(24rem, 10rem + 22vw, 34rem);
}
.photo-strip .photo-strip__list {
gap: var(--space-4);
padding-inline: 0;
overflow: visible;
}
.photo-strip__progress {
display: none;
}
.photo-strip__item {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.photo-strip__item--square {
flex-grow: 1.25;
}
.photo-strip__item--wide {
flex-grow: 1.45;
}
.photo-strip__item--narrow {
flex-grow: 0.75;
}
.photo-strip__card {
left: var(--space-4);
max-width: calc(100% - 2 * var(--space-4));
}
.photo-strip__card--end {
left: auto;
right: var(--space-4);
}
.photo-strip__card--top {
top: calc(-1 * var(--space-6));
}
.photo-strip__card--bottom {
bottom: calc(-1 * var(--space-6));
}
}
.float-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: max-content;
padding: var(--space-2) var(--space-3);
box-shadow: var(--shadow-raised);
}
.float-card__head {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--space-1);
}
.float-card__head .badge {
flex-shrink: 0;
}
.float-card__row {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.float-card__value {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.float-card .float-card__checks {
display: flex;
flex-direction: column;
gap: var(--space-1);
color: var(--color-heading);
}
.float-card__checks li {
display: flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
}
.float-card__check {
display: grid;
place-items: center;
flex-shrink: 0;
width: var(--icon-size-sm);
height: var(--icon-size-sm);
background: var(--color-action);
color: var(--color-action-text);
}
.float-card__check .icon {
width: 0.875rem;
height: 0.875rem;
stroke-width: 3;
}
@media (min-width: 48rem) {
.float-card {
gap: var(--space-3);
padding: var(--space-4);
}
.float-card .float-card__checks {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
}
.float-card__head {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
}
.float-card__row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
}
}
.float-card--lg {
gap: var(--space-4);
padding: var(--space-5);
}
.float-card--lg .float-card__head {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.float-card--lg .float-card__row {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-4);
}
.float-card--lg .float-card__row p {
max-width: 14ch;
}
@media (min-width: 48rem) {
.float-card--lg {
padding: var(--space-6);
}
}
.float-card__scale {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
align-items: end;
gap: var(--space-1);
height: var(--space-4);
}
.float-card__step {
height: var(--space-2);
}
.float-card__step:nth-child(1)  { background: var(--label-a4); }
.float-card__step:nth-child(2)  { background: var(--label-a3); }
.float-card__step:nth-child(3)  { background: var(--label-a2); }
.float-card__step:nth-child(4)  { background: var(--label-a1); }
.float-card__step:nth-child(5)  { background: var(--label-a); }
.float-card__step:nth-child(6)  { background: var(--label-b); }
.float-card__step:nth-child(7)  { background: var(--label-c); }
.float-card__step:nth-child(8)  { background: var(--label-d); }
.float-card__step:nth-child(9)  { background: var(--label-e); }
.float-card__step:nth-child(10) { background: var(--label-f); }
.float-card__step:nth-child(11) { background: var(--label-g); }
.float-card__step--current {
height: 100%;
}
.float-card__facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--color-border);
}
.float-card__facts dd {
color: var(--color-heading);
}
.media-overlay {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
.media-overlay__media {
margin-top: var(--space-9);
}
.media-overlay__quote {
margin-top: var(--space-7);
}
.media-overlay__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.media-overlay__media {
position: relative;
max-width: 100%;
}
.media-overlay__image {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: 50% 45%;
background: var(--color-placeholder-bg);
}
.media-overlay__card {
position: relative;
width: auto;
margin: calc(-1 * var(--space-10)) var(--space-4) 0;
}
@media (min-width: 48rem) {
.media-overlay__image {
aspect-ratio: 5 / 4;
object-position: 50% 40%;
}
.media-overlay__card {
position: absolute;
top: 50%;
inset-inline: 0;
width: min(26rem, calc(100% - 2 * var(--space-7)));
margin: 0 auto;
transform: translateY(-50%);
}
}
@media (min-width: 64rem) {
.media-overlay {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 1fr auto auto 1fr;
column-gap: var(--gap-split);
}
.media-overlay__media {
grid-column: 1;
grid-row: 1 / -1;
margin-top: 0;
}
.media-overlay__content {
grid-column: 2;
grid-row: 2;
}
.media-overlay__quote {
grid-column: 2;
grid-row: 3;
}
.media-overlay__image {
aspect-ratio: 1 / 1;
object-position: 50% 15%;
}
}
@media (min-width: 90rem) {
.media-overlay {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.media-overlay__image {
aspect-ratio: 5 / 4;
object-position: 50% 40%;
}
}
.text-media {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: var(--space-9) var(--gap-split);
}
.text-media__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-7);
min-width: 0;
}
.text-media__body {
container: text-media / inline-size;
}
.text-media__facts {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
margin: 0;
}
.text-media__fact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-4);
padding-block: var(--space-3);
border-top: var(--border-width) solid var(--color-border);
}
.text-media__fact dd {
margin: 0;
}
@container text-media (min-width: 36rem) {
.text-media__facts {
grid-template-columns: repeat(3, auto);
column-gap: var(--space-5);
}
.text-media__fact {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding-block: var(--space-4) 0;
}
.text-media__fact dd {
font-size: var(--text-body-lg);
}
}
.text-media__media {
aspect-ratio: 4 / 5;
max-width: 32rem;
}
.text-media__media img {
object-position: 50% 60%;
}
@media (min-width: 64rem) {
.text-media {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.text-media__media {
max-width: none;
}
}
.collage {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.collage__col {
display: contents;
}
.collage__photo {
aspect-ratio: 4 / 5;
}
.collage__photo--main {
grid-column: 1 / -1;
aspect-ratio: 3 / 2;
}
.collage__photo--main img {
object-position: 52% 50%;
}
.collage__photo--small img {
object-position: 35% 25%;
}
.collage__photo--side img {
object-position: 75% 50%;
}
.collage__cta {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-6);
}
.collage__action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
@media (min-width: 90rem) {
.collage--breakout {
margin-inline-start: calc(-1 * var(--space-9));
}
.collage__col {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-10);
}
.collage__col--offset {
margin-top: var(--space-10);
margin-bottom: 0;
}
.collage__photo {
flex: 2 1 0;
min-height: 0;
aspect-ratio: auto;
}
.collage__photo--main {
flex-grow: 3;
}
.collage__photo--side {
flex: none;
aspect-ratio: 4 / 5;
}
.collage__cta {
flex: none;
}
}
.hero {
padding-block: var(--section-padding);
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-split);
align-items: center;
}
.hero__media {
order: 2;
}
@media (min-width: 48rem) {
.hero__inner {
grid-template-columns: 1fr 1fr;
}
.hero__media {
order: 0;
}
.hero--media-right .hero__media {
order: 2;
}
}
.hero__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.hero__text {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.hero__title {
font-size: var(--text-display-2);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
.hero__lead {
font-size: var(--text-body-lg);
line-height: var(--leading-body-lg);
max-width: 34rem;
text-wrap: balance;
}
.hero--center {
padding-bottom: var(--section-padding-sm);
}
.hero--center .hero__content {
align-items: center;
max-width: 52rem;
margin-inline: auto;
text-align: center;
gap: var(--space-6);
}
.hero--center .hero__text {
align-items: center;
}
.hero--center .hero__title {
max-width: 22ch;
}
@media (min-width: 48rem) {
.hero--center .hero__content {
gap: var(--space-7);
}
}
@media (min-width: 64rem) {
.hero--center {
padding-top: calc(var(--section-padding) - var(--space-4));
}
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card__title {
font-size: var(--text-h4);
}
.card__footer {
margin-top: auto;
padding-top: var(--space-2);
}
.card--link:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-raised);
}
.card--link .card__title a {
color: inherit;
text-decoration: none;
}
.card--link .card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.card--link:focus-within {
outline: var(--border-width-strong) solid var(--color-focus);
outline-offset: 3px;
}
.card--link .card__title a:focus-visible {
outline: none;
}
.card__action::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.card__action:focus-visible {
outline: none;
}
.card__action:active {
transform: none;
}
.card--link:hover .card__action {
color: var(--color-link-hover);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.card--link:hover .card__action .icon {
transform: translateX(var(--space-1));
}
.card--media__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.section-head:has(+ .card--media__list) > .type-body-lg {
margin-top: var(--space-4);
}
@media (min-width: 48rem) {
.card--media__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-grid);
}
.section-head + .card--media__list {
padding-top: var(--space-5);
}
}
@media (min-width: 90rem) {
.card--media__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
}
.card--media {
height: 100%;
gap: var(--space-3);
padding: var(--space-5) var(--space-5) var(--space-4);
}
.card--media .card__media {
width: auto;
max-width: none;
margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
aspect-ratio: 12 / 5;
}
.card--media .card__media img {
transition: transform var(--duration) var(--ease);
}
.card--media:hover .card__media img {
transform: scale(1.04);
}
.card__media--focus-onder img {
object-position: 45% 70%;
}
.card__media--focus-rechts img {
object-position: 62% 50%;
}
.card--media .card__title {
margin-top: var(--space-3);
}
.card--media .card__footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
margin-top: auto;
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--color-border);
}
.card--media > .text-muted {
margin-bottom: var(--space-2);
}
@media (min-width: 48rem) {
.card--media .card__media {
aspect-ratio: 3 / 2;
}
}
@media (64rem <= width < 90rem) {
.card--media {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
grid-template-rows: auto auto 1fr;
column-gap: var(--space-6);
row-gap: var(--space-3);
}
.card--media > * {
grid-column: 2;
}
.card--media .card__media {
grid-column: 1;
grid-row: 1 / -1;
margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-5));
aspect-ratio: auto;
}
.card--media .card__title {
margin-top: var(--space-2);
}
.card--media .card__footer {
align-self: end;
}
}
@media (prefers-reduced-motion: reduce) {
.card--media:hover .card__media img,
.card--link:hover .card__action .icon {
transform: none;
}
}
.help-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
padding-top: var(--space-7);
border-top: var(--border-width) solid var(--color-border);
text-align: center;
}
* + .help-bar {
margin-top: var(--space-8);
}
.help-bar__text,
.help-bar__action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
.help-bar__action {
gap: var(--space-3);
}
.help-bar p {
text-wrap: balance;
}
.help-bar__contact {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 var(--space-6);
margin-top: var(--space-1);
}
.help-bar__contact li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-target);
}
.help-bar__contact li > .icon {
color: var(--color-eyebrow);
}
.help-bar__contact .btn--text:hover .icon {
transform: none;
}
@media (min-width: 48rem) {
.help-bar {
padding-top: var(--space-8);
}
* + .help-bar {
margin-top: var(--space-9);
}
}
@media (min-width: 64rem) {
.help-bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: left;
}
.help-bar__text {
align-items: flex-start;
}
.help-bar__contact {
justify-content: flex-start;
}
.help-bar__action {
flex-direction: row;
gap: var(--space-5);
}
}
.price-card {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7) var(--space-6);
border: var(--border-width) solid var(--color-border);
background: var(--color-bg);
}
.price-card__price {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: var(--font-weight-semibold);
line-height: 1;
letter-spacing: var(--tracking-display);
font-variant-numeric: lining-nums proportional-nums;
color: var(--color-heading);
}
.price-card__unit {
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-regular);
letter-spacing: 0;
color: var(--color-text-muted);
}
.price-card__tiers {
display: flex;
flex-direction: column;
margin: 0;
}
.price-card__tier {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-3);
border-top: var(--border-width) solid var(--color-border);
}
.price-card__tier:last-child {
border-bottom: var(--border-width) solid var(--color-border);
}
.price-card__tier dt {
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.price-card__tier dd {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-h4);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-snug);
font-variant-numeric: lining-nums proportional-nums;
text-align: right;
color: var(--color-heading);
}
.price-card .usp-list {
flex-grow: 1;
}
.price-old {
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-regular);
letter-spacing: 0;
color: var(--color-text-muted);
text-decoration-line: line-through;
text-decoration-thickness: var(--border-width);
white-space: nowrap;
}
.legal {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.toc {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: var(--border-width) solid var(--color-border);
background: var(--color-bg-subtle);
}
.toc__list {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.toc__list a {
display: block;
padding-block: var(--space-1);
font-size: var(--text-body-sm);
color: var(--color-text);
text-decoration: none;
}
.toc__list a:hover {
color: var(--color-link-hover);
text-decoration: underline;
}
.toc__list a[aria-current="true"] {
font-weight: var(--font-weight-semibold);
}
.legal .prose h2 {
scroll-margin-top: var(--space-5);
}
.legal .prose h2:not(:first-child) {
margin-top: var(--space-5);
}
@media (min-width: 64rem) {
.legal {
grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
gap: var(--space-10);
align-items: start;
}
.toc {
position: sticky;
top: calc(var(--header-height, var(--space-10)) + var(--space-5));
max-height: calc(100vh - var(--header-height, var(--space-10)) - var(--space-7));
overflow-y: auto;
}
}
.usp-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 0;
list-style: none;
}
.usp-list li {
position: relative;
padding-left: calc(1.25rem + var(--space-3));
}
.usp-list li::before {
content: "";
position: absolute;
top: 0.125rem;
left: 0;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-eyebrow);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.steps {
display: grid;
gap: var(--gap-grid);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
padding: 0;
list-style: none;
counter-reset: step;
}
.steps__item {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: var(--border-width-strong) solid var(--color-heading);
counter-increment: step;
}
.steps__item::before {
content: counter(step);
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
margin-bottom: var(--space-2);
background: var(--color-action);
color: var(--color-action-text);
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums;
}
.steps__title {
font-size: var(--text-h4);
}
.feature-list {
display: flex;
flex-direction: column;
max-width: 34rem;
padding: 0;
list-style: none;
}
.feature-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-5);
padding-block: var(--space-5);
border-top: var(--border-width) solid var(--color-border);
}
.feature-list__item:first-child {
padding-top: 0;
border-top: 0;
}
.feature-list__item:last-child {
padding-bottom: 0;
}
.feature-list__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-width: var(--measure);
}
.fact-row {
container: fact-row / inline-size;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
}
.fact-row__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
padding: 0;
list-style: none;
}
.fact-row__item {
--fact-row-space-top: var(--space-5);
--fact-row-space-bottom: var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--fact-row-space-top) var(--space-2) var(--fact-row-space-bottom);
}
.fact-row__item:nth-child(-n + 2) {
--fact-row-space-top: 0;
}
.fact-row__item:last-child,
.fact-row__item:nth-last-child(2):nth-child(odd) {
--fact-row-space-bottom: 0;
}
.fact-row__item:nth-child(even) {
border-left: var(--border-width) solid var(--color-border);
}
.fact-row__item:nth-child(n + 3) {
border-top: var(--border-width) solid var(--color-border);
}
.fact-row__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.fact-row__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.fact-row__body > * {
text-wrap: balance;
}
@media (min-width: 48rem) {
.fact-row__list {
grid-template-columns: none;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
.fact-row__item {
--fact-row-space-top: 0;
--fact-row-space-bottom: 0;
padding-inline: var(--space-2);
}
.fact-row__item:last-child:nth-child(odd) {
grid-column: auto;
}
.fact-row__item:nth-child(n + 3) {
border-top: 0;
}
.fact-row__item + .fact-row__item {
border-left: var(--border-width) solid var(--color-border);
}
.fact-row--6 .fact-row__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: row;
}
.fact-row--6 .fact-row__item:nth-child(-n + 3) {
--fact-row-space-bottom: var(--space-5);
}
.fact-row--6 .fact-row__item:nth-child(n + 4) {
--fact-row-space-top: var(--space-5);
border-top: var(--border-width) solid var(--color-border);
}
.fact-row--6 .fact-row__item:nth-child(3n + 1) {
border-left: 0;
}
}
@media (min-width: 64rem) {
.fact-row {
gap: var(--space-8);
}
.fact-row__item {
padding-inline: var(--space-4);
}
}
@container fact-row (min-width: 64rem) {
.fact-row__item {
flex-direction: row;
justify-content: center;
text-align: start;
}
.fact-row--6 .fact-row__item {
flex-direction: column;
justify-content: flex-start;
text-align: center;
}
}
.site-header {
position: relative;
z-index: 50;
border-bottom: var(--border-width) solid var(--color-border);
background: var(--color-bg);
}
.site-header--sticky {
position: sticky;
top: 0;
}
html:has(.site-header--sticky) {
scroll-padding-top: var(--header-height, var(--space-10));
}
.site-header.surface-brand,
.site-header.surface-dark {
border-bottom-color: transparent;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: 4.5rem;
}
.site-nav {
display: none;
}
.site-nav__list {
display: flex;
align-items: center;
gap: var(--space-6);
padding: 0;
list-style: none;
}
.site-nav__link {
display: inline-flex;
align-items: center;
min-height: var(--tap-target);
font-family: var(--font-heading);
font-size: var(--text-body);
font-weight: var(--font-weight-medium);
color: var(--color-heading);
text-decoration: none;
white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
color: var(--color-heading);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
}
.site-header__cta {
display: none;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tap-target);
height: var(--tap-target);
margin-inline-end: calc((var(--icon-size) - var(--tap-target)) / 2);
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
color: var(--color-heading);
-webkit-tap-highlight-color: transparent;
}
.surface-brand .nav-toggle:focus-visible,
.surface-dark .surface-brand .nav-toggle:focus-visible {
outline: 0;
background-color: var(--neutraal-900);
color: var(--wit);
}
.surface-dark .nav-toggle:focus-visible {
outline: 0;
background-color: var(--wit);
color: var(--neutraal-900);
}
.nav-toggle__box {
position: relative;
display: block;
width: var(--icon-size);
height: var(--icon-size);
}
.nav-toggle__inner,
.nav-toggle__inner::before,
.nav-toggle__inner::after {
position: absolute;
display: block;
width: calc(var(--icon-size) * 2 / 3);
height: calc(var(--icon-size) / 16);
border-radius: calc(var(--icon-size) / 32);
background-color: currentColor;
}
.nav-toggle__inner {
top: 50%;
left: calc(var(--icon-size) / 6);
margin-top: calc(var(--icon-size) / -32);
}
.nav-toggle__inner::before,
.nav-toggle__inner::after {
content: "";
left: 0;
}
.nav-toggle__inner::before {
top: calc(var(--icon-size) * -7 / 24);
}
.nav-toggle__inner::after {
bottom: calc(var(--icon-size) * -7 / 24);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner {
transform: rotate(225deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner::before {
top: 0;
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner::after {
bottom: 0;
transform: rotate(-90deg);
}
@media (prefers-reduced-motion: no-preference) {
.nav-toggle__inner {
transition: transform var(--duration) var(--ease-in);
}
.nav-toggle__inner::before {
transition:
top calc(var(--duration) / 2) var(--ease-in) calc(var(--duration) * 1.25),
opacity calc(var(--duration) / 2) var(--ease-in);
}
.nav-toggle__inner::after {
transition:
bottom calc(var(--duration) / 2) var(--ease-in) calc(var(--duration) * 1.25),
transform var(--duration) var(--ease-in);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner {
transition: transform var(--duration) var(--ease) calc(var(--duration) / 2);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner::before {
transition:
top calc(var(--duration) / 2) var(--ease),
opacity calc(var(--duration) / 2) var(--ease) calc(var(--duration) / 2);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__inner::after {
transition:
bottom calc(var(--duration) / 2) var(--ease),
transform var(--duration) var(--ease) calc(var(--duration) / 2);
}
}
.mobile-nav {
background: var(--color-bg);
padding-block: var(--space-4) var(--space-6);
}
@media (width < 64rem) {
.site-header:has(.mobile-nav:not([hidden])) {
position: fixed;
inset: 0;
overflow-y: auto;
overscroll-behavior: contain;
border-bottom-color: transparent;
}
html:has(.site-header .mobile-nav:not([hidden])) {
overflow: hidden;
}
}
.mobile-nav__list {
display: flex;
flex-direction: column;
padding: 0;
margin-bottom: var(--space-5);
list-style: none;
}
.mobile-nav__list a {
display: flex;
align-items: center;
min-height: 3.25rem;
font-family: var(--font-heading);
font-size: var(--text-body-lg);
font-weight: var(--font-weight-medium);
color: var(--color-heading);
text-decoration: none;
}
.mobile-nav__list a[aria-current="page"] {
text-decoration: underline;
text-decoration-thickness: var(--border-width-strong);
text-underline-offset: 0.4em;
}
@media (min-width: 64rem) {
.site-nav,
.site-header__cta {
display: flex;
}
.nav-toggle,
.mobile-nav {
display: none !important;
}
.site-header__inner > .logo {
flex-shrink: 0;
}
.site-header__inner {
gap: var(--space-4);
}
.site-nav__list {
gap: var(--space-3);
}
}
@media (min-width: 72rem) {
.site-nav__list {
gap: var(--space-5);
}
}
@media (min-width: 80rem) {
.site-header__inner {
gap: var(--space-6);
}
.site-nav__list {
gap: var(--space-6);
}
}
.site-header__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-target);
font-family: var(--font-heading);
font-size: var(--text-body);
font-weight: var(--font-weight-medium);
color: var(--color-heading);
text-decoration: none;
}
.site-header__back:hover {
color: var(--color-heading);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.4em;
}
.site-header__back .icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
.site-footer {
padding-block: var(--space-10) var(--space-6);
}
.site-footer__grid {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
padding-bottom: var(--space-8);
border-bottom: var(--border-width) solid var(--color-border);
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 22rem;
}
.site-footer__title {
margin-bottom: var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-eyebrow);
}
.site-footer__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0;
list-style: none;
}
.site-footer__list a {
color: var(--color-link);
text-decoration: none;
}
.site-footer__list a:hover {
color: var(--color-link-hover);
text-decoration: underline;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4);
padding-top: var(--space-5);
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.site-footer--compact {
padding-block: var(--space-7);
}
.site-footer--compact .site-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding-top: 0;
}
@media (min-width: 48rem) {
.site-footer--compact .site-footer__bottom {
flex-direction: row;
align-items: center;
gap: var(--space-6);
}
.site-footer--compact .site-footer__bottom > :first-child {
margin-inline-end: auto;
}
}
.site-footer--cta {
padding-block: var(--section-padding) var(--section-padding-sm);
}
.site-footer__cta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
padding-bottom: var(--section-padding);
}
.site-footer__cta p {
text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
.site-footer__cta .btn .icon {
transition: transform var(--duration) var(--ease);
}
.site-footer__cta .btn:hover .icon {
transform: translateX(var(--space-1));
}
}
.site-footer--cta .site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8) var(--space-5);
padding-block: var(--section-padding-sm);
border-top: var(--border-width) solid var(--color-border);
}
.site-footer--cta .site-footer__brand,
.site-footer--cta .site-footer__grid > :last-child {
grid-column: 1 / -1;
}
.site-footer--cta .site-footer__brand p {
text-wrap: balance;
}
.site-footer--cta .site-footer__title {
margin-bottom: var(--space-2);
}
.site-footer--cta .site-footer__list {
gap: 0;
}
.site-footer--cta .site-footer__list > li,
.site-footer--cta .site-footer__list a {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--tap-target);
}
.site-footer--cta .site-footer__list a {
display: inline-flex;
}
.site-footer--cta .site-footer__list > li:has(> .icon) {
align-items: flex-start;
padding-block: calc((var(--tap-target) - var(--leading-body) * 1em) / 2);
}
.site-footer--cta .site-footer__list .icon {
margin-block-start: calc((var(--leading-body) * 1em - var(--icon-size-sm)) / 2);
color: var(--color-link);
}
.site-footer--cta .site-footer__list a .icon {
margin-block-start: 0;
}
.site-footer--cta .site-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
@media (min-width: 48rem) {
.site-footer--cta .site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(15rem, 1fr);
}
.site-footer--cta .site-footer__grid > :last-child {
grid-column: auto;
}
.site-footer--cta .site-footer__bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
}
@media (min-width: 64rem) {
.site-footer__cta,
.site-footer--cta .site-footer__grid {
grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)) minmax(15rem, 1fr);
column-gap: var(--space-6);
}
.site-footer__cta {
align-items: start;
}
.site-footer__cta > :first-child {
grid-column: 1 / 3;
}
.site-footer__cta > :last-child {
grid-column: 3 / -1;
}
.site-footer--cta .site-footer__brand {
grid-column: auto;
}
}
.cta-block {
display: grid;
gap: var(--space-6);
align-items: end;
}
@media (min-width: 64rem) {
.cta-block {
grid-template-columns: 1.4fr 1fr;
gap: var(--gap-split);
}
.cta-block .actions {
justify-content: flex-end;
}
}
.cta-block__text {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: var(--measure);
}
.quote {
display: flex;
flex-direction: column;
gap: var(--space-5);
max-width: 48rem;
}
.quote__icon {
width: 2rem;
height: 2rem;
color: var(--color-eyebrow);
}
.quote__text {
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: var(--font-weight-medium);
line-height: 1.35;
letter-spacing: var(--tracking-heading);
color: var(--color-heading);
text-wrap: pretty;
}
.quote__author {
display: flex;
flex-direction: column;
font-style: normal;
}
.quote__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
color: var(--color-heading);
}
.quote__role {
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.quote--compact .quote__name:not(:last-child)::after,
.quote--card .quote__name:not(:last-child)::after {
content: ",";
}
.quote--compact {
position: relative;
display: block;
max-width: none;
padding-top: var(--space-5);
padding-inline-start: calc(var(--icon-size-sm) + var(--space-3));
border-top: var(--border-width) solid var(--color-border);
font-family: var(--font-body);
font-size: var(--text-body-sm);
line-height: var(--leading-body);
}
.quote--compact .quote__icon {
position: absolute;
top: var(--space-5);
inset-inline-start: 0;
width: var(--icon-size-sm);
height: var(--icon-size-sm);
color: var(--color-heading);
}
.quote--compact blockquote,
.quote--compact .quote__text,
.quote--compact .quote__author {
display: inline;
}
.quote--compact .quote__text {
font: inherit;
letter-spacing: normal;
}
.quote--compact .quote__author {
margin-inline-start: var(--space-2);
}
.quote--compact .quote__role {
font-size: inherit;
}
.quote--card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr auto;
align-items: start;
gap: var(--space-5) var(--space-4);
width: 100%;
max-width: none;
padding: var(--space-5);
}
.quote--card > * {
grid-column: 1 / -1;
}
.quote--card .quote__icon {
grid-column: 1;
width: var(--space-8);
height: var(--space-8);
padding: var(--space-3);
background-color: var(--color-action);
color: var(--color-action-text);
}
.quote--card .badge {
grid-column: 2;
align-self: center;
}
.quote--card .quote__text {
font-family: var(--font-body);
font-size: var(--text-body-lg);
font-weight: var(--font-weight-regular);
line-height: var(--leading-body-lg);
letter-spacing: normal;
}
.quote--card .quote__author {
display: block;
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--color-border);
font-size: var(--text-body-sm);
}
@media (min-width: 64rem) {
.quote--card {
padding: var(--space-7);
}
}
.review-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-grid);
padding: 0;
list-style: none;
}
.review-grid > li {
display: flex;
}
@media (min-width: 48rem) {
.review-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-split);
}
}
@media (width < 48rem) {
.review-grid.review-grid--scroll {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: min(calc(100% - var(--space-7)), 24rem);
margin-inline: calc(-1 * var(--page-padding));
padding-inline: var(--page-padding);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--page-padding);
}
.review-grid--scroll > li {
scroll-snap-align: start;
}
.review-grid--scroll:focus-visible {
outline-offset: calc(-1 * var(--border-width-strong));
}
}
.review-grid--faq {
row-gap: var(--space-9);
}
.review-grid + .review-grid--faq {
margin-top: var(--space-10);
}
@media (min-width: 48rem) {
.review-grid--faq {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 64rem) {
.review-grid--faq {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-grid + .review-grid--faq {
margin-top: var(--space-11);
}
.review-grid--faq > .review-grid__aside {
grid-column: 1;
grid-row: 1;
}
.review-grid--faq > .review-grid__body {
grid-column: 2;
grid-row: 1;
}
}
.review-grid__aside {
display: flex;
flex-direction: column;
min-width: 0;
}
.review-grid__media {
display: none;
}
.review-grid__media img {
object-position: 50% 35%;
}
@media (width < 64rem) {
.float-card.review-grid__quote {
width: auto;
max-width: 52rem;
}
.review-grid--faq > .review-grid__aside:has(> .review-grid__quote[hidden]) {
display: none;
}
}
@media (min-width: 64rem) {
.review-grid__media {
display: block;
flex: 1 1 auto;
min-height: 24rem;
}
.review-grid__quote {
position: relative;
width: auto;
margin: calc(-1 * var(--space-11)) var(--space-7) 0;
}
}
.review-grid__body > .section-head {
margin-bottom: var(--space-5);
}
.review-grid__body > .cluster {
--cluster-gap: var(--space-4) var(--space-6);
}
.faq {
border-top: var(--border-width) solid var(--color-border);
max-width: 52rem;
}
.faq__item {
border-bottom: var(--border-width) solid var(--color-border);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 4rem;
padding-block: var(--space-4);
font-family: var(--font-heading);
font-size: var(--text-body-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-snug);
color: var(--color-heading);
cursor: pointer;
list-style: none;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::after {
content: "";
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--duration) var(--ease);
}
.faq__item[open] .faq__question::after {
transform: rotate(180deg);
}
.faq__answer {
padding-bottom: var(--space-5);
max-width: var(--measure);
color: var(--color-text);
}
.faq-nav {
--faq-nav-card: var(--color-surface-warm);
--faq-nav-border: var(--color-surface-warm);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-grid);
padding: 0;
list-style: none;
}
.surface-warm .faq-nav {
--faq-nav-card: var(--wit);
--faq-nav-border: var(--color-border);
}
.faq-nav > li {
display: flex;
}
.faq-nav__card {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
min-height: 100%;
padding: var(--space-4);
border: var(--border-width) solid var(--faq-nav-border);
border-radius: var(--radius);
background: var(--faq-nav-card);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.faq-nav__icon {
margin-bottom: var(--space-2);
color: var(--olijf-600);
}
.faq-nav__title {
overflow-wrap: break-word;
}
.faq-nav__count {
margin-top: auto;
}
.faq-nav__card:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-raised);
}
.faq-nav__card:hover .faq-nav__title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.faq-nav__card:focus-visible {
outline: var(--border-width-strong) solid var(--color-focus);
outline-offset: 0.1875rem;
}
@media (min-width: 48rem) {
.faq-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.faq-nav__card {
padding: var(--space-5);
}
}
@media (min-width: 64rem) {
.faq-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.table-wrap {
position: relative;
width: 100%;
overflow-x: auto;
border: var(--border-width) solid var(--color-border);
}
.table {
width: 100%;
min-width: 36rem;
font-size: var(--text-body);
}
.table caption {
padding: var(--space-4) var(--space-5);
text-align: left;
font-size: var(--text-body-sm);
color: var(--color-text-muted);
caption-side: bottom;
border-top: var(--border-width) solid var(--color-border);
}
.table th,
.table td {
padding: var(--space-4) var(--space-5);
text-align: left;
vertical-align: top;
border-bottom: var(--border-width) solid var(--color-border);
}
.table thead th {
background: var(--color-surface-warm);
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
color: var(--neutraal-900);
}
.surface-warm .table thead th {
background: var(--color-surface-brand);
color: var(--wit);
}
.surface-warm .table tbody {
background: var(--wit);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td {
border-bottom: 0;
}
.table tbody th {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
}
.table__sub {
display: block;
margin-top: var(--space-1);
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
}
.table .num {
text-align: right;
white-space: nowrap;
}
.table td.num {
font-variant-numeric: tabular-nums;
}
.table th.num {
font-variant-numeric: lining-nums proportional-nums;
}
@media (max-width: 63.99rem) {
.table:not(.table--invoer) th,
.table:not(.table--invoer) td,
.table:not(.table--invoer) caption {
padding-left: var(--space-3);
padding-right: var(--space-3);
}
}
.table--invoer {
min-width: 56rem;
}
.table--invoer th,
.table--invoer td {
padding: var(--space-3) var(--space-4);
vertical-align: middle;
}
.table--invoer .num .input {
min-width: 6.5rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.table--invoer .select {
min-width: 11.5rem;
}
.table--invoer .field__error {
white-space: normal;
text-align: left;
}
.table--invoer .choice {
padding-block: 0;
align-items: center;
}
.table--invoer tbody th .type-body-sm {
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
}
.alert {
--alert-fg: var(--info-600);
--alert-bg: var(--info-50);
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-4) var(--space-5);
border: var(--border-width) solid var(--alert-fg);
background: var(--alert-bg);
color: var(--neutraal-900);
}
.alert .icon {
color: var(--alert-fg);
}
.alert__title {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
color: var(--alert-fg);
}
.alert--succes { --alert-fg: var(--succes-600); --alert-bg: var(--succes-50); }
.alert--waarschuwing { --alert-fg: var(--waarschuwing-600); --alert-bg: var(--waarschuwing-50); }
.alert--fout { --alert-fg: var(--fout-600); --alert-bg: var(--fout-50); }
.toestemming {
display: grid;
gap: var(--space-5);
width: fit-content;
max-width: 100%;
padding: var(--space-4);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-raised);
}
.toestemming:focus {
outline: none;
}
body > .toestemming {
position: fixed;
left: var(--space-4);
bottom: var(--space-4);
z-index: 40;
max-width: calc(100% - 2 * var(--space-4));
max-height: calc(100dvh - var(--header-height, var(--space-10)) - var(--space-6));
overflow-y: auto;
overscroll-behavior: contain;
}
html:has(> body > .toestemming:not([hidden])) {
scroll-padding-bottom: calc(var(--toestemming-ruimte, 0rem) + var(--space-4));
}
.site-footer::after {
content: "";
display: block;
height: var(--toestemming-ruimte, 0rem);
}
.toestemming__text {
contain: inline-size;
}
.toestemming__actions {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
justify-content: start;
gap: var(--space-3);
}
.toestemming__actions .btn {
white-space: normal;
}
.toestemming .btn--secondary {
padding-inline: var(--space-5);
border-width: var(--border-width-strong);
border-color: var(--wit);
background-color: transparent;
color: var(--wit);
text-decoration: none;
}
.toestemming .btn--secondary:hover {
border-color: var(--wit);
background-color: var(--wit);
color: var(--neutraal-900);
text-decoration: none;
}
@media (min-width: 48rem) {
body > .toestemming {
left: var(--page-padding);
bottom: var(--space-5);
max-width: calc(100% - 2 * var(--page-padding));
}
}
.scan-viewer {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.scan-viewer__frame {
position: relative;
aspect-ratio: 16 / 9;
max-width: 100%;
overflow: hidden;
background: var(--bosgroen);
color: var(--wit);
}
.scan-viewer__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.scan-viewer__poster {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-5);
text-align: center;
background-image:
linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
background-size: 2rem 2rem;
}
.scan-viewer__poster > .icon {
width: 3rem;
height: 3rem;
color: var(--olijf-300);
}
.scan-viewer__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
font-size: var(--text-body-sm);
color: var(--color-text-muted);
}
.scan-viewer__meta span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.scan-viewer--photo {
gap: var(--space-6);
}
.scan-viewer--photo .scan-viewer__frame {
display: grid;
aspect-ratio: auto;
}
.scan-viewer__image {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--color-placeholder-bg);
}
.scan-viewer__image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 84%;
}
.scan-viewer__image::after {
content: "";
position: absolute;
inset: var(--space-4);
pointer-events: none;
background-image:
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg)),
linear-gradient(var(--color-bg), var(--color-bg));
background-position:
left top, left top,
right top, right top,
right bottom, right bottom,
left bottom, left bottom;
background-size:
var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5);
background-repeat: no-repeat;
}
.scan-viewer__slides {
position: absolute;
inset: 0;
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.scan-viewer__slides::-webkit-scrollbar {
display: none;
}
.scan-viewer__slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: start;
}
@media (prefers-reduced-motion: no-preference) {
.scan-viewer__slides {
scroll-behavior: smooth;
}
}
.scan-viewer__controls {
--tour-inset: calc(var(--space-4) + var(--space-3));
position: absolute;
z-index: 2;
right: var(--tour-inset);
bottom: var(--tour-inset);
left: var(--tour-inset);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.scan-viewer__tour {
display: inline-flex;
margin-left: auto;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-target);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
background-color: var(--wit);
color: var(--bosgroen);
font-family: var(--font-heading);
font-size: var(--text-body);
font-weight: var(--font-weight-button);
line-height: var(--leading-body);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--duration-fast) var(--ease);
}
.scan-viewer__tour:hover {
background-color: var(--olijf-50);
color: var(--bosgroen);
text-decoration: none;
}
.scan-viewer__tour:active {
transform: translateY(1px);
}
.scan-viewer__nav {
display: none;
align-items: center;
gap: var(--space-1);
}
[data-scan-slider="klaar"] .scan-viewer__nav {
display: flex;
}
.scan-viewer__count {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.scan-viewer__arrow {
display: grid;
place-items: center;
width: var(--tap-target);
height: var(--tap-target);
padding: var(--space-1);
border: 0;
border-radius: var(--radius-circle);
background-color: var(--olijf-500);
background-clip: content-box;
color: var(--wit);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease);
}
.scan-viewer__arrow:hover {
background-color: var(--olijf-600);
}
.scan-viewer__arrow .icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
.scan-viewer__tour:focus-visible,
.scan-viewer__arrow:focus-visible {
outline-color: var(--bosgroen);
outline-offset: var(--space-1);
box-shadow: 0 0 0 var(--space-1) var(--wit);
}
.scan-viewer--photo .scan-viewer__poster {
position: relative;
inset: auto;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-5);
padding: var(--space-6) 0;
background: var(--bosgroen);
text-align: start;
}
.surface-brand .scan-viewer--photo .scan-viewer__frame,
.surface-brand .scan-viewer--photo .scan-viewer__poster {
background: var(--color-bg);
}
.scan-viewer--photo .scan-viewer__meta {
gap: var(--space-4) var(--gap-grid);
}
.scan-viewer--photo .scan-viewer__meta li {
display: grid;
flex: 1 1 100%;
grid-template-columns: auto minmax(0, 1fr);
align-content: start;
gap: var(--space-1) var(--space-4);
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--color-border);
}
.scan-viewer--photo .scan-viewer__meta .icon {
grid-row: span 2;
color: var(--color-eyebrow);
}
@media (min-width: 48rem) {
.scan-viewer--photo {
gap: var(--space-7);
}
.scan-viewer__image {
aspect-ratio: 4 / 3;
}
.scan-viewer__image img {
object-position: 50% 62%;
}
.scan-viewer__image::after {
inset: var(--space-5);
}
.scan-viewer__controls {
--tour-inset: calc(var(--space-5) + var(--space-3));
}
.scan-viewer__tour {
padding-inline: var(--space-4);
}
.scan-viewer--photo .scan-viewer__poster {
padding: var(--space-7);
}
.scan-viewer--photo .scan-viewer__meta li {
padding-top: var(--space-5);
}
}
@media (min-width: 64rem) {
.scan-viewer--photo {
gap: var(--space-8);
}
.scan-viewer--photo .scan-viewer__frame {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap-grid);
}
.scan-viewer__image {
grid-area: 1 / 5 / 2 / -1;
align-self: stretch;
}
.scan-viewer__image img {
object-position: 50% 60%;
}
.scan-viewer__image::after {
inset: var(--space-6);
background-size:
var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6);
}
.scan-viewer__controls {
--tour-inset: calc(var(--space-6) + var(--space-3));
}
[data-scan-slider="klaar"] .scan-viewer__nav {
display: none;
}
.scan-viewer__tour {
min-height: var(--space-8);
}
.scan-viewer--photo .scan-viewer__poster {
grid-area: 1 / 1 / 2 / 7;
align-self: center;
margin-block: var(--space-9);
padding: var(--space-6);
}
.scan-viewer--photo .scan-viewer__meta li {
flex-basis: 0;
min-width: 0;
}
}
@media (min-width: 90rem) {
.scan-viewer--photo .scan-viewer__poster {
padding: var(--space-7);
}
}
.process {
--process-gap: var(--space-9);
--process-arrow: var(--space-7);
--process-card: var(--color-surface-warm);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--process-gap);
padding: 0;
list-style: none;
}
.surface-warm .process {
--process-card: var(--wit);
}
.process__item {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius);
background-color: var(--process-card);
color: var(--neutraal-900);
}
.process__number {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: var(--font-weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
font-variant-numeric: lining-nums proportional-nums;
color: var(--olijf-500);
}
.process__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.process__body .type-h4 {
color: var(--neutraal-900);
}
.process__body p {
color: var(--neutraal-700);
}
.process__arrow {
position: absolute;
z-index: 1;
left: 50%;
bottom: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
display: grid;
place-items: center;
width: var(--process-arrow);
height: var(--process-arrow);
margin-left: calc(-0.5 * var(--process-arrow));
border-radius: var(--radius-circle);
background-color: var(--olijf-500);
color: var(--wit);
}
.process__arrow .icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
rotate: 90deg;
}
.process__item:last-child .process__arrow {
display: none;
}
:has(> .process) {
container-type: inline-size;
}
@container (min-width: 36rem) and (max-width: 55.999rem) {
.process:not(:has(> .process__item:nth-child(4))) {
--process-gap: var(--space-8);
--process-arrow: var(--space-6);
}
.process:not(:has(> .process__item:nth-child(4))) .process__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0 var(--space-5);
}
.process:not(:has(> .process__item:nth-child(4))) .process__body {
align-self: stretch;
justify-content: center;
}
}
@container (min-width: 36rem) and (max-width: 61.999rem) {
.process:has(> .process__item:nth-child(4)) {
--process-gap: var(--space-8);
--process-arrow: var(--space-6);
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, auto) var(--process-gap) repeat(3, auto);
gap: 0 var(--process-gap);
}
.process:has(> .process__item:nth-child(4)) .process__item {
display: grid;
grid-row: 1 / span 3;
grid-template-rows: subgrid;
row-gap: var(--space-4);
}
.process:has(> .process__item:nth-child(4)) .process__item:nth-child(n + 3) {
grid-row: 5 / span 3;
}
.process:has(> .process__item:nth-child(4)) .process__body {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
row-gap: var(--space-2);
}
.process:has(> .process__item:nth-child(4)) .process__arrow {
left: auto;
bottom: auto;
top: 50%;
right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
margin-left: 0;
margin-top: calc(-0.5 * var(--process-arrow));
}
.process:has(> .process__item:nth-child(4)) .process__arrow .icon {
rotate: none;
}
.process:has(> .process__item:nth-child(4)) .process__item:nth-child(2) .process__arrow {
display: none;
}
}
@container (min-width: 56rem) {
.process:not(:has(> .process__item:nth-child(4))) {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: none;
grid-template-rows: repeat(3, auto);
row-gap: 0;
}
.process:not(:has(> .process__item:nth-child(4))) .process__item {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: var(--space-4);
}
.process:not(:has(> .process__item:nth-child(4))) .process__body {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
row-gap: var(--space-2);
}
.process:not(:has(> .process__item:nth-child(4))) .process__arrow {
left: auto;
bottom: auto;
top: 50%;
right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
margin-left: 0;
margin-top: calc(-0.5 * var(--process-arrow));
}
.process:not(:has(> .process__item:nth-child(4))) .process__arrow .icon {
rotate: none;
}
}
@container (min-width: 62rem) {
.process:has(> .process__item:nth-child(4)) {
--process-gap: var(--space-8);
--process-arrow: var(--space-6);
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: none;
grid-template-rows: repeat(3, auto);
row-gap: 0;
}
.process:has(> .process__item:nth-child(4)) .process__item {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
row-gap: var(--space-4);
}
.process:has(> .process__item:nth-child(4)) .process__body {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
row-gap: var(--space-2);
}
.process:has(> .process__item:nth-child(4)) .process__arrow {
left: auto;
bottom: auto;
top: 50%;
right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
margin-left: 0;
margin-top: calc(-0.5 * var(--process-arrow));
}
.process:has(> .process__item:nth-child(4)) .process__arrow .icon {
rotate: none;
}
}
.seo-split {
display: grid;
grid-template-columns: minmax(0, max-content);
gap: 0;
}
.seo-split__text > :is(h2, h3) {
contain: inline-size;
}
.seo-split__text {
display: contents;
}
.seo-split__text > * + * {
margin-top: var(--space-4);
}
.seo-split__text > h2:first-child + * {
margin-top: var(--space-5);
}
.seo-split__text h2:not(:first-child) {
margin-top: var(--space-5);
}
.seo-split__text h3 {
font-size: var(--text-h4);
line-height: var(--leading-snug);
letter-spacing: normal;
}
.seo-split__text h3:not(:first-child) {
margin-top: var(--space-7);
}
.seo-split__text > p,
.seo-split__text > ul,
.seo-split__text > ol {
max-width: var(--measure);
}
.prose .usp-list {
padding-left: 0;
}
.seo-split__aside {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-self: start;
}
.seo-split__aside > .media {
display: none;
}
@container (max-width: 56.999rem) {
.seo-split__text > * {
order: 1;
}
.seo-split__text > h2:first-child,
.seo-split__text > h2:first-child + * {
order: 0;
}
.seo-split__aside {
order: 0;
margin-top: var(--space-6);
}
.seo-split__text > h2:first-child + * + * {
margin-top: var(--space-7);
}
}
.seo-split__card {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6);
border-radius: var(--radius);
}
.seo-split__text h2 {
text-wrap: pretty;
}
.seo-split__text > h2 {
font-size: var(--text-h1);
overflow-wrap: break-word;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
.seo-split__text > h2 + p {
font-size: var(--text-body-lg);
line-height: var(--leading-body-lg);
}
.seo-split__card .type-h3 {
text-wrap: pretty;
}
.seo-split__card .quick-start {
align-items: stretch;
max-width: none;
}
.seo-split__card .quick-start__form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.seo-split__card .quick-start__submit {
grid-column: 1 / -1;
white-space: normal;
}
:has(> .seo-split) {
container-type: inline-size;
}
@container (min-width: 57rem) {
.seo-split {
grid-template-columns: minmax(0, max-content) minmax(var(--aside-min), var(--aside));
justify-content: space-between;
gap: 0 var(--space-9);
align-items: start;
}
.seo-split__text > * {
grid-column: 1;
}
.seo-split__aside {
grid-column: 2;
grid-row: 1 / span 40;
margin-top: 0;
position: sticky;
top: calc(var(--header-height, var(--space-10)) + var(--space-5));
}
.seo-split__aside > .media {
display: block;
}
@media (max-height: 47.99rem) {
.seo-split__aside {
position: static;
}
.seo-split__aside > .media {
display: none;
}
}
}
.review-wall {
display: flex;
flex-direction: column;
gap: var(--gap-grid);
width: 100%;
}
.review-wall__col {
display: flex;
flex-direction: column;
gap: var(--gap-grid);
min-width: 0;
}
:has(> .review-wall) {
container-type: inline-size;
}
@container (min-width: 36rem) and (max-width: 57.999rem) {
.review-wall {
display: block;
columns: 2;
column-gap: var(--gap-grid);
}
.review-wall__col {
display: contents;
}
.review-wall .review-card {
break-inside: avoid;
margin-bottom: var(--gap-grid);
}
.review-wall__col:last-child > .review-card:last-child {
margin-bottom: 0;
}
}
@container (min-width: 58rem) {
.review-wall {
flex-direction: row;
align-items: stretch;
}
.review-wall__col {
flex: 1;
}
.review-wall__col > .review-card {
flex-grow: 1;
}
.review-wall__col--offset {
padding-top: var(--space-10);
}
}
.review-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
background-color: var(--wit);
color: var(--neutraal-900);
}
.review-card__stars {
display: flex;
gap: var(--space-1);
color: var(--olijf-500);
}
.review-card__stars .icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
fill: currentColor;
}
.review-card__google {
position: absolute;
top: var(--space-6);
right: var(--space-6);
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
.review-card__heading {
color: var(--neutraal-900);
}
.review-card__quote p {
color: var(--neutraal-700);
}
.review-card:not(:has(.review-card__heading)) .review-card__quote p {
font-size: var(--text-body-lg);
line-height: var(--leading-body-lg);
color: var(--neutraal-900);
}
.review-wall__col:first-child > .review-card:first-child .review-card__quote p {
font-family: var(--font-heading);
font-size: var(--text-h4);
font-weight: var(--font-weight-medium);
line-height: 1.4;
letter-spacing: var(--tracking-heading);
text-wrap: pretty;
}
.review-wall + .cluster {
justify-content: center;
margin-top: var(--space-8);
}
.review-card__person {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--neutraal-200);
}
.review-card__avatar {
display: grid;
flex: none;
place-items: center;
width: var(--space-8);
height: var(--space-8);
border-radius: var(--radius);
background-color: var(--olijf-500);
color: var(--wit);
font-family: var(--font-heading);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-semibold);
}
.review-card__meta {
display: flex;
flex-direction: column;
font-size: var(--text-body-sm);
line-height: var(--leading-body);
}
.review-card__name {
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
color: var(--neutraal-900);
}
.review-card__role {
color: var(--neutraal-600);
}
@container ((min-width: 44rem) and (max-width: 57.999rem)) or (min-width: 64rem) {
.review-card {
padding: var(--space-7);
}
.review-card__google {
top: var(--space-7);
right: var(--space-7);
}
}
.form-panel {
padding: var(--space-5);
border-radius: var(--radius);
}
.form-panel .form {
max-width: var(--measure);
}
.form-panel .form-row {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
@media (min-width: 48rem) {
.form-panel {
padding: var(--space-7);
}
}
:has(> .split > .form-panel) {
container-type: inline-size;
}
.split:has(> .form-panel) {
grid-template-columns: minmax(0, 1fr);
}
.split:has(> .form-panel) > .stack > .media {
display: none;
}
.split:has(> .form-panel) > .stack > h2 {
font-size: var(--text-display-2);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
@container (min-width: 60rem) {
.split:has(> .form-panel) {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.split:has(> .form-panel) > .stack > .media {
display: block;
margin-top: var(--space-4);
}
.split:has(> .form-panel) > .stack {
position: sticky;
top: calc(var(--header-height, var(--space-10)) + var(--space-5));
}
.split > .form-panel .form {
gap: var(--space-4);
}
}
.form__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.form__actions .btn {
max-width: 100%;
white-space: normal;
}
@media (max-width: 47.99rem) {
.form__actions .btn {
width: 100%;
padding-inline: var(--space-2);
}
}
.form__feedback {
align-self: stretch;
}
.form__feedback:not(:empty) {
margin-top: var(--space-4);
}
.form__feedback .alert:focus {
outline: none;
}
@media (max-width: 47.99rem) {
.form-panel .form__feedback .alert {
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
}
}
.feature-list__item:nth-child(2),
.process__item:nth-child(2) { --reveal-i: 1; }
.feature-list__item:nth-child(3),
.process__item:nth-child(3) { --reveal-i: 2; }
.feature-list__item:nth-child(4),
.process__item:nth-child(4) { --reveal-i: 3; }
.feature-list__item:nth-child(5) { --reveal-i: 4; }
@media (prefers-reduced-motion: no-preference) {
.feature-list[data-reveal="wacht"] .icon-tile {
opacity: 0;
}
.feature-list[data-reveal="wacht"] .feature-list__body {
opacity: 0;
}
.feature-list[data-reveal="speel"] .icon-tile {
animation: reveal-icoon var(--duration) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--reveal-volgorde));
}
.feature-list[data-reveal="speel"] .feature-list__body {
animation: reveal-van-links var(--reveal-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--reveal-volgorde) + var(--reveal-stap) * 2);
}
.process[data-reveal="wacht"] .process__item,
.process[data-reveal="wacht"] .process__arrow {
opacity: 0;
}
.process[data-reveal="speel"] .process__item {
animation: reveal-van-onder var(--reveal-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--reveal-uitkomst));
}
.process[data-reveal="speel"] .process__arrow {
animation: reveal-icoon var(--duration-fast) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--reveal-uitkomst) + var(--reveal-volgorde));
}
.process__item[data-reveal-kaart="wacht"] {
opacity: 0;
}
.process__item[data-reveal-kaart="speel"] {
animation: reveal-van-onder var(--reveal-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-volgorde));
}
.process__item[data-reveal-kaart="speel"] {
animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-uitkomst));
}
.process__item:has(+ .process__item[data-reveal-kaart="wacht"]) .process__arrow {
opacity: 0;
}
.process__item:has(+ .process__item[data-reveal-kaart="speel"]) .process__arrow {
animation: reveal-icoon var(--duration-fast) var(--ease) backwards;
animation-delay: calc(var(--reveal-pijl-i, 0) * var(--reveal-uitkomst));
}
.process__item + .process__item[data-reveal-kaart="speel"] {
animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-uitkomst) + var(--reveal-volgorde));
}
.collage__photo--side { --reveal-i: 1; }
.collage__photo--small { --reveal-i: 2; }
.collage[data-reveal="wacht"] .collage__photo {
clip-path: inset(100% 0 0 0);
}
.collage[data-reveal="speel"] .collage__photo {
animation: reveal-foto-open var(--reveal-foto) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--duration-fast));
}
.collage[data-reveal="speel"] .collage__photo img {
animation: reveal-foto-zakt var(--reveal-foto) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--duration-fast));
}
.media-overlay__card[data-reveal] .float-card__step {
transform-origin: bottom;
}
.media-overlay__card .float-card__step:nth-child(2)  { --reveal-i: 1; }
.media-overlay__card .float-card__step:nth-child(3)  { --reveal-i: 2; }
.media-overlay__card .float-card__step:nth-child(4)  { --reveal-i: 3; }
.media-overlay__card .float-card__step:nth-child(5)  { --reveal-i: 4; }
.media-overlay__card .float-card__step:nth-child(6)  { --reveal-i: 5; }
.media-overlay__card .float-card__step:nth-child(7)  { --reveal-i: 6; }
.media-overlay__card .float-card__step:nth-child(8)  { --reveal-i: 7; }
.media-overlay__card .float-card__step:nth-child(9)  { --reveal-i: 8; }
.media-overlay__card .float-card__step:nth-child(10) { --reveal-i: 9; }
.media-overlay__card .float-card__step:nth-child(11) { --reveal-i: 10; }
.media-overlay__card[data-reveal="wacht"] .float-card__step {
scale: 1 0;
}
.media-overlay__card[data-reveal="wacht"] .energy-label {
clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
}
.media-overlay__card[data-reveal="speel"] .float-card__step {
animation: reveal-klasse var(--duration) var(--ease) backwards;
animation-delay: calc(var(--reveal-i, 0) * var(--reveal-stap));
}
.media-overlay__card[data-reveal="speel"] .float-card__step--current {
animation-duration: var(--reveal-uitkomst);
animation-delay: calc(10 * var(--reveal-stap) + var(--duration-fast));
}
.media-overlay__card[data-reveal="speel"] .energy-label {
animation: reveal-label-pijl var(--reveal-uitkomst) var(--ease) backwards;
animation-delay: calc(10 * var(--reveal-stap) + var(--duration));
}
.scan-viewer__frame[data-reveal="wacht"] .scan-viewer__image::before,
.scan-viewer__frame[data-reveal="speel"] .scan-viewer__image::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to right,
transparent calc(100% - var(--space-10)),
color-mix(in srgb, var(--olijf-300) 35%, transparent) calc(100% - var(--border-width-strong) - var(--border-width)),
var(--bosgroen) calc(100% - var(--border-width-strong) - var(--border-width)),
var(--bosgroen) calc(100% - var(--border-width-strong)),
var(--wit) calc(100% - var(--border-width-strong))
);
translate: -100% 0;
}
.scan-viewer__frame[data-reveal="wacht"] .scan-viewer__poster {
opacity: 0;
}
.scan-viewer__frame[data-reveal="speel"] .scan-viewer__image::before {
animation: reveal-scan-lijn var(--reveal-scan) linear backwards;
}
.scan-viewer__frame[data-reveal="speel"] .scan-viewer__poster {
animation: reveal-van-links var(--reveal-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--duration) * 2);
}
}
@keyframes reveal-van-onder {
from {
opacity: 0;
translate: 0 var(--reveal-afstand);
}
}
@keyframes reveal-van-links {
from {
opacity: 0;
translate: calc(-1 * var(--reveal-afstand)) 0;
}
}
@keyframes reveal-icoon {
from {
opacity: 0;
scale: 0.6;
}
}
@keyframes reveal-foto-open {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes reveal-foto-zakt {
from {
scale: 1.06;
}
}
@keyframes reveal-klasse {
from {
scale: 1 0;
}
}
@keyframes reveal-label-pijl {
from {
clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
}
}
@keyframes reveal-scan-lijn {
from {
translate: -100% 0;
opacity: 1;
}
85% {
translate: 0 0;
opacity: 1;
}
to {
translate: 0 0;
opacity: 0;
}
}