html{font-size:62.5%;}:root,:root.cf-theme-dark .theme-inverted,:root.cf-theme-dark .theme-always-light,:root.cf-theme-light .theme-inverted .theme-always-light{--min-screen-width:320px;--max-screen-width:1400px;--primary:#636951;--secondary:#CFD1B8;--tertiary:#FAFAE6;--pink:#F9E2DA;--yellow:#F2ECBC;--blue:#D4DCF0;--white:#FFFFFF;--grey:#333333;--text-body:#575756;--success:hsla(136,95%,56%,1);--error:hsla(351,95%,56%,1);--cookie-primary:#636951;--cookie-secondary:#CFD1B8;--cookie-text:#333333;--cookie-background:#FAFAE6;--space-4xs:clamp(0.52rem,calc(-0.03vw + 0.53rem),0.49rem);--space-3xs:clamp(0.66rem,calc(0.04vw + 0.64rem),0.7rem);--space-2xs:clamp(0.82rem,calc(0.16vw + 0.77rem),0.99rem);--space-xs:clamp(1.02rem,calc(0.35vw + 0.91rem),1.4rem);--space-s:clamp(1.28rem,calc(0.65vw + 1.07rem),1.98rem);--space-m:clamp(1.6rem,calc(1.11vw + 1.24rem),2.8rem);--space-l:clamp(2rem,calc(1.81vw + 1.42rem),3.96rem);--space-xl:clamp(2.5rem,calc(2.87vw + 1.58rem),5.6rem);--space-2xl:clamp(3.13rem,calc(4.44vw + 1.71rem),7.92rem);--space-3xl:clamp(3.91rem,calc(6.75vw + 1.75rem),11.19rem);--space-4xl:clamp(4.88rem,calc(10.13vw + 1.64rem),15.83rem);--text-xs:clamp(1.26rem,calc(0.05vw + 1.25rem),1.31rem);--text-s:clamp(1.45rem,calc(0.09vw + 1.42rem),1.55rem);--text-m:clamp(1.7rem,calc(0.05vw + 1.69rem),1.75rem);--text-l:clamp(1.8rem,calc(0.09vw + 1.77rem),1.9rem);--text-xl:clamp(2.42rem,calc(0.72vw + 2.2rem),3.2rem);--text-2xl:clamp(2.88rem,calc(1.28vw + 2.47rem),4.26rem);--text-3xl:clamp(3.56rem,calc(2.9vw + 2.63rem),6.7rem);--text-4xl:clamp(4.25rem,calc(3.29vw + 3.2rem),7.8rem);--hero-title-size:var(--text-4xl);--post-title-size:var(--text-2xl);--nav-link-size:var(--text-s);--radius-xs:clamp(0.4rem,calc(0vw + 0.4rem),0.4rem);--radius-s:clamp(0.6rem,calc(0.19vw + 0.54rem),0.8rem);--radius-m:clamp(1rem,calc(0.19vw + 0.94rem),1.2rem);--radius-l:clamp(1.6rem,calc(0.37vw + 1.48rem),2rem);--radius-xl:clamp(2.6rem,calc(0.56vw + 2.42rem),3.2rem);--radius-full:999rem;}.bg-primary{background-color:var(--primary);}/* Custom Stylesheets */ /* Equalizer Design - CF CUSTOM CSS */ /* --------------------------------------------- */ /* SECTION */ /* --------------------------------------------- */ html,body{overflow-x:hidden;}.section{padding-top:0;padding-bottom:0;}.section--header{top:0;padding-top:var(--space-s);padding-bottom:var(--space-s);z-index:100;}/* SECTION TOP SPACING */ .section--pt-0{padding-top:0;}.section--pt-3xs{padding-top:var(--space-3xs);}.section--pt-2xs{padding-top:var(--space-2xs);}.section--pt-xs{padding-top:var(--space-xs);}.section--pt-s{padding-top:var(--space-s);}.section--pt-m{padding-top:var(--space-m);}.section--pt-l{padding-top:var(--space-l);}.section--pt-xl{padding-top:var(--space-xl);}.section--pt-2xl{padding-top:var(--space-2xl);}.section--pt-3xl{padding-top:var(--space-3xl);}.section--pt-4xl{padding-top:var(--space-4xl);}/* SECTION BOTTOM SPACING */ .section--pb-0{padding-bottom:0;}.section--pb-3xs{padding-bottom:var(--space-3xs);}.section--pb-2xs{padding-bottom:var(--space-2xs);}.section--pb-xs{padding-bottom:var(--space-xs);}.section--pb-s{padding-bottom:var(--space-s);}.section--pb-m{padding-bottom:var(--space-m);}.section--pb-l{padding-bottom:var(--space-l);}.section--pb-xl{padding-bottom:var(--space-xl);}.section--pb-2xl{padding-bottom:var(--space-2xl);}.section--pb-3xl{padding-bottom:var(--space-3xl);}.section--pb-4xl{padding-bottom:var(--space-4xl);}/* --------------------------------------------- */ /* CONTAINER */ /* --------------------------------------------- */ .container{width:100%;margin-inline:auto;/* centreert de inhoud */ padding-inline:var(--space-m);/* horizontale “lucht” */ }/* eigen max-widths */ .container--s{max-width:1000px;}.container--m{max-width:1200px;}.container--l{max-width:1400px;}.container--xl{max-width:1600px;}/* --------------------------------------------- */ /* BLOCK */ /* --------------------------------------------- */ .block{position:relative;/* geen default padding of achtergrond */ }/* --------------------------------------------- */ /* GRID / FLEX > IN BRICKS!!! */ /* --------------------------------------------- */ /* --------------------------------------------- */ /* STACK (vertical spacing layout) */ /* --------------------------------------------- */ /* Default stack (medium spacing) */ .stack > * + *{margin-top:var(--space-m);}/* Small spacing */ .stack--s > * + *{margin-top:var(--space-s);}/* Medium spacing (explicit) */ .stack--m > * + *{margin-top:var(--space-m);}/* Large spacing */ .stack--l > * + *{margin-top:var(--space-l);}/* Extra large (optioneel,handig voor hero-secties) */ .stack--xl > * + *{margin-top:var(--space-xl);}/* --------------------------------------------- */ /* PADDING */ /* --------------------------------------------- */ /* Rondom */ .pad-s{padding:var(--space-s);}.pad-m{padding:var(--space-m);}.pad-l{padding:var(--space-l);}.pad-xl{padding:var(--space-xl);}/* Verticaal */ .pad-x-s{padding-left:var(--space-s);padding-right:var(--space-s);}.pad-x-m{padding-left:var(--space-m);padding-right:var(--space-m);}.pad-x-l{padding-left:var(--space-l);padding-right:var(--space-l);}.pad-x-xl{padding-left:var(--space-xl);padding-right:var(--space-xl);}/* Horizontaal */ .pad-y-s{padding-top:var(--space-s);padding-bottom:var(--space-s);}.pad-y-m{padding-top:var(--space-m);padding-bottom:var(--space-m);}.pad-y-l{padding-top:var(--space-l);padding-bottom:var(--space-l);}.pad-y-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl);}/* Directional */ .pad-t-s{padding-top:var(--space-s);}.pad-t-m{padding-top:var(--space-m);}.pad-t-l{padding-top:var(--space-l);}.pad-t-xl{padding-top:var(--space-xl);}.pad-b-s{padding-bottom:var(--space-s);}.pad-b-m{padding-bottom:var(--space-m);}.pad-b-l{padding-bottom:var(--space-l);}.pad-b-xl{padding-bottom:var(--space-xl);}/* Zero Padding*/ .pad-0{padding:0;}.pad-t-0{padding-top:0;}.pad-b-0{padding-bottom:0;}.pad-x-0{padding-left:0;padding-right:0;}.pad-y-0{padding-top:0;padding-bottom:0;}/* --------------------------------------------- */ /* RADIUS */ /* --------------------------------------------- */ /* radius utilities */ .radius-s{border-radius:var(--radius-s);}.radius-m{border-radius:var(--radius-m);}.radius-l{border-radius:var(--radius-l);}.radius-xl{border-radius:var(--radius-xl);}.radius-full{border-radius:999rem;}/* speciale huisstijlvorm */ .radius-hero{border-radius:var(--radius-xl) var(--radius-xl) 0 var(--radius-xl);overflow:hidden;}/* --------------------------------------------- */ /* BACKGROUND */ /* --------------------------------------------- */ .bg-gradient-primary-secondary{background:linear-gradient( 135deg,var(--primary),var(--secondary) );}/* Add your custom CSS here */ /* --------------------------------------------- */ /* GRID */ /* --------------------------------------------- .grid{display:grid;gap:var(--space-m);}/* symmetrisch */ .grid--100{grid-template-columns:1fr;}.grid--50-50{grid-template-columns:1fr 1fr;}.grid--33-33-33{grid-template-columns:repeat(3,1fr);}.grid--25-25-25-25{grid-template-columns:repeat(4,1fr);}.grid--20-20-20-20-20{grid-template-columns:repeat(5,1fr);}/* ratio */ .grid--75-25{grid-template-columns:3fr 1fr;}.grid--25-75{grid-template-columns:1fr 3fr;}.grid--66-33{grid-template-columns:2fr 1fr;}.grid--33-66{grid-template-columns:1fr 2fr;}.grid--60-40{grid-template-columns:3fr 2fr;}.grid--25-25-50{grid-template-columns:1fr 1fr 2fr;}.grid--50-25-25{grid-template-columns:2fr 1fr 1fr;}.grid{display:grid;gap:var(--space-m);}/* Symmetrische grids */ .grid--2{grid-template-columns:repeat(2,1fr);}.grid--3{grid-template-columns:repeat(3,1fr);}.grid--4{grid-template-columns:repeat(4,1fr);}/* Asymmetrische grids */ .grid--2-40-60{grid-template-columns:40% 60%;}.grid--2-60-40{grid-template-columns:60% 40%;}.grid--2-30-70{grid-template-columns:30% 70%;}.grid--2-70-30{grid-template-columns:70% 30%;}/* Responsive fallback */ @media (max-width:1024px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}@media (max-width:768px){.grid--2,.grid--3,.grid--4,.grid--2-40-60,.grid--2-60-40,.grid--2-30-70,.grid--2-70-30{grid-template-columns:1fr;}}*/ /* --------------------------------------------- */ /* FLEX HELPERS */ /* --------------------------------------------- */ .flex{display:flex;gap:var(--space-m);}/* let op:hier GEEN display:flex meer,zodat je combineert met .flex */ .flex-center{justify-content:center;align-items:center;}.flex-center-y-left{align-items:center;justify-content:flex-start;}.flex-center-y-right{align-items:center;justify-content:flex-end;}.flex-between{justify-content:space-between;align-items:center;}.flex-col{flex-direction:column;gap:var(--space-m);}/* --------------------------------------------- */ /* UTILITIES */ /* --------------------------------------------- */ .u-text-center{text-align:center;}.u-text-right{text-align:right;}.u-mb-s{margin-bottom:var(--space-s);}.u-mb-m{margin-bottom:var(--space-m);}.u-mb-l{margin-bottom:var(--space-l);}.u-hide{display:none !important;}/* --------------------------------------------- */ /* OPTIONAL CARD COMPONENT */ /* --------------------------------------------- */ .card{background-color:var(--bg-surface);padding:var(--space-m);border-radius:var(--radius-m);box-shadow:var(--shadow-m);}.card__title{font-size:var(--text-l);margin-bottom:var(--space-xs);}.card__text{font-size:var(--text-m);}.card--highlight{border:2px solid var(--primary);}/* --------------------------------------------- */ /* HERO GRID - TITLE AANPASSING */ /* --------------------------------------------- */ .hero-grid{grid-template-areas:"title image" "text image";}.hero-title{grid-area:title;}.hero-media{grid-area:image;position:relative;/* straks nodig voor overlay op mobiel */ }@media (max-width:992px){.hero-grid{grid-template-columns:1fr;grid-template-areas:"text" "image" ;}.hero-title{grid-area:image;/* zelfde area als de image */ position:absolute;left:var(--space-m);top:var(--space-m);z-index:2;}.hero-media{grid-area:image;position:relative;/* referentie voor absolute titel */ overflow:hidden;/* optioneel:titel netjes binnen beeld */ }}/* --------------------------------------------- */ /* IMAGE Overlay */ /* --------------------------------------------- */ .image-overlay{position:relative;overflow:hidden;}.image-overlay::after{content:"";position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;z-index:0;/* Standaard:overlay AAN (mobiel & tablet) */ background:linear-gradient( to bottom,rgba(0,10,40,0.65) 0%,rgba(0,10,40,0.45) 20%,rgba(0,10,40,0.25) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100% );}/* Vanaf 992px → overlay UIT */ @media (min-width:992px){.image-overlay::after{background:none;}}.image-overlay2{position:relative;overflow:hidden;}.image-overlay2::after{content:"";position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none;z-index:0;/* Standaard:overlay AAN (mobiel & tablet) */ background:linear-gradient( to bottom,rgba(0,10,40,0.75) 0%,rgba(0,10,40,0.55) 20%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100% );}/* Vanaf 992px → overlay UIT */ @media (min-width:768px){.image-overlay2::after{background:none;}}