.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ct-div-block,
.oxy-post-content,
.ct-text-block,
.ct-headline,
.oxy-rich-text,
.ct-link-text { max-width: 100%; }
img { flex-shrink: 0; }
body * { min-height: 1px; }
} .oxy-testimonial {
flex-direction: row;
align-items: center;
}
.oxy-testimonial .oxy-testimonial-photo-wrap {
order: 1;
}
.oxy-testimonial .oxy-testimonial-photo {
width: 125px; height: 125px; margin-right: 20px;
}
.oxy-testimonial .oxy-testimonial-photo-wrap,
.oxy-testimonial .oxy-testimonial-author-wrap,
.oxy-testimonial .oxy-testimonial-content-wrap {
align-items: flex-start; text-align: left; }
.oxy-testimonial .oxy-testimonial-text {
margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-testimonial .oxy-testimonial-author {
font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-testimonial .oxy-testimonial-author-info {
font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-icon-box {
text-align: left; flex-direction: column; }
.oxy-icon-box .oxy-icon-box-icon {
margin-bottom: 12px;
align-self: flex-start; }
.oxy-icon-box .oxy-icon-box-heading {
font-size: 21px;
margin-bottom: 12px; }
.oxy-icon-box .oxy-icon-box-text {
font-size: 16px;
margin-bottom: 12px;align-self: flex-start; }
.oxy-icon-box .oxy-icon-box-link {
margin-top: 20px; }
/* GLOBALS */
.oxy-pricing-box .oxy-pricing-box-section {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center; }
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
justify-content: center; }
/* IMAGE */
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
justify-content: center; }
/* TITLE */
.oxy-pricing-box .oxy-pricing-box-title-title {
font-size: 48px;
}
.oxy-pricing-box .oxy-pricing-box-title-subtitle {
font-size: 24px;
}
/* PRICE */
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
flex-direction: row; }
.oxy-pricing-box .oxy-pricing-box-currency {
font-size: 28px;
}
.oxy-pricing-box .oxy-pricing-box-amount-main {
font-size: 80px;
line-height: 0.7;
}
.oxy-pricing-box .oxy-pricing-box-amount-decimal {
font-size: 13px;
}
.oxy-pricing-box .oxy-pricing-box-term {
font-size: 16px;
}
.oxy-pricing-box .oxy-pricing-box-sale-price {
font-size: 12px;
color: rgba(0,0,0,0.5);
margin-bottom: 20px; }
/* CONTENT */
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
font-size: 16px;
color: rgba(0,0,0,0.5);
}
/* CTA */
.oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
justify-content: center; }
.oxy-progress-bar .oxy-progress-bar-background {
background-color: #000000; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent); animation: none 0s paused; }
.oxy-progress-bar .oxy-progress-bar-progress-wrap {
width: 85%; }
.oxy-progress-bar .oxy-progress-bar-progress {
background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused; background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);
}
.oxy-progress-bar .oxy-progress-bar-overlay-text {
font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
}
.oxy-progress-bar .oxy-progress-bar-overlay-percent {
font-size: 12px;
}
.ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
padding: 0px; }
.oxy-superbox .oxy-superbox-secondary,
.oxy-superbox .oxy-superbox-primary {
transition-duration: 0.5s; }
.oxy-shape-divider {
width: 0px;
height: 0px;
}
.oxy_shape_divider svg {
width: 100%;
}
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}
.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}
.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}
.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
flex-direction: row;
}
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
text-align: left;
justify-content: flex-start;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
align-items: flex-start;
}
.oxy-pro-menu .oxy-pro-menu-off-canvas-container{
top: 0;
bottom: 0;
right: auto;
left: 0;
}
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
text-align: left;
justify-content: flex-start;
}
.oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}
.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}
.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
--oxynav-animation-name: none;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){
background-color: var(--oxynav-brand-color);
transition: var(--oxynav-transition-duration);
margin-left: var(--oxynav-other-spacing);
border: none;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){
background: transparent;
border: 1px solid currentColor;
transition: var(--oxynav-transition-duration);
margin-left: var(--oxynav-other-spacing);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
filter: invert(0) !important;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
background-color: var(--oxynav-activehover-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
color: var(--oxynav-neutral-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
color: var(--oxynav-neutral-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
color: var(--oxynav-brand-color);
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
display: none;
}
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
display: none;
}
.ct-section-inner-wrap, .oxy-header-container{
max-width: 1350px;
}
body {font-family: 'Bricolage Grotesque';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Atkinson Hyperlegible Next';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
.ct-columns-inner-wrap {
display: block !important;
}
.ct-columns-inner-wrap:after {
display: table;
clear: both;
content: "";
}
.ct-column {
width: 100% !important;
margin: 0 !important;
}
.ct-columns-inner-wrap {
margin: 0 !important;
}
}
/* ==========================================================================
ROOT – watiseenvpn.nl
Alle design-variabelen op één plek. Pas hier aan, dan verandert het overal.
Let op: html staat op font-size 62.5%, dus 1rem = 10px.
========================================================================== */
/* --------------------------------------------------------------------------
BREAKPOINTS (ter referentie – CSS-variabelen werken NIET in media queries)
Page width : 1350px
Tablet : @media (max-width: 992px)
Landscape : @media (max-width: 768px)
Portrait : @media (max-width: 480px)
-------------------------------------------------------------------------- */
:root {
/* ------------------------------------------------------------------
KLEUREN – Primary (Malachite)
------------------------------------------------------------------ */
--primary-50: #f0fdf2;
--primary-100: #dcfce3;
--primary-200: #baf8c8;
--primary-300: #85f09e;
--primary-400: #37dd5e;
--primary-500: #20c748;
--primary-600: #14a537;
--primary-700: #14812f;
--primary-800: #156629;
--primary-900: #135424;
--primary-950: #042f10;
/* ------------------------------------------------------------------
KLEUREN – Neutral (licht groen getint, past bij de primary)
------------------------------------------------------------------ */
--neutral-0: #ffffff;
--neutral-50: #f7f9f8;
--neutral-100: #eef2f0;
--neutral-200: #dde4e0;
--neutral-300: #c2ccc6;
--neutral-400: #9aa8a0;
--neutral-500: #75847c;
--neutral-600: #5a6861;
--neutral-700: #46524c;
--neutral-800: #2f3833;
--neutral-900: #1c2420;
--neutral-950: #0f1512;
/* ------------------------------------------------------------------
KLEUREN – Status
------------------------------------------------------------------ */
--clr-success: var(--primary-700);
--clr-warning: #b45309;
--clr-error: #c81e1e;
--clr-info: #1d4ed8;
--clr-success-bg: var(--primary-50);
--clr-warning-bg: #fffbeb;
--clr-error-bg: #fef2f2;
--clr-info-bg: #eff6ff;
/* ------------------------------------------------------------------
KLEUREN – Semantisch (gebruik DEZE in componenten)
------------------------------------------------------------------ */
--clr-primary: var(--primary-400); /* #37dd5e – hoofdkleur, vlakken & accenten */
--clr-primary-hover: var(--primary-500);
--clr-on-primary: var(--primary-950); /* tekst OP de primary kleur */
--clr-primary-light: var(--primary-100); /* zachte achtergronden */
--clr-primary-dark: var(--primary-700); /* groene tekst op wit (leesbaar) */
--clr-primary-deep: var(--primary-950); /* donkere secties */
--clr-bg: var(--neutral-0);
--clr-bg-alt: var(--neutral-50);
--clr-bg-dark: var(--primary-950);
--clr-surface: var(--neutral-0); /* kaarten, blokken */
--clr-text: var(--neutral-900);
--clr-text-muted: var(--neutral-600);
--clr-text-invert: var(--neutral-0);
--clr-heading: var(--neutral-950);
--clr-link: var(--primary-700);
--clr-link-hover: var(--primary-800);
--clr-border: var(--neutral-200);
--clr-border-strong: var(--neutral-300);
/* CTA richting hallovpn.com: fel groen met donkere tekst (goed contrast) */
--clr-cta-bg: var(--clr-primary);
--clr-cta-bg-hover: var(--clr-primary-hover);
--clr-cta-text: var(--clr-on-primary);
--clr-btn-bg: var(--clr-primary);
--clr-btn-bg-hover: var(--clr-primary-hover);
--clr-btn-text: var(--clr-on-primary);
--clr-focus: var(--primary-500);
/* ------------------------------------------------------------------
FONTS
Koppen: Bricolage Grotesque – eigenwijs maar vriendelijk
Tekst: Atkinson Hyperlegible Next – gemaakt voor maximale leesbaarheid
------------------------------------------------------------------ */
--font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-body: 1.65;
/* ------------------------------------------------------------------
FONT SIZES – vloeiend tussen 480px en 1350px schermbreedte
(waarden in comment = min → max in px)
------------------------------------------------------------------ */
--h1: clamp(3.8rem, 2.366rem + 2.989vw, 6.4rem); /* 38 → 64 */
--h2-groot: clamp(3.4rem, 2.186rem + 2.529vw, 5.6rem); /* 34 → 56 */
--h2: clamp(3.0rem, 2.228rem + 1.609vw, 4.4rem); /* 30 → 44 */
--h3: clamp(2.4rem, 1.959rem + 0.920vw, 3.2rem); /* 24 → 32 */
--h4: clamp(2.0rem, 1.669rem + 0.690vw, 2.6rem); /* 20 → 26 */
--h5: clamp(1.8rem, 1.579rem + 0.460vw, 2.2rem); /* 18 → 22 */
--h6: clamp(1.6rem, 1.490rem + 0.230vw, 1.8rem); /* 16 → 18 */
--text-xl: clamp(2.0rem, 1.779rem + 0.460vw, 2.4rem); /* 20 → 24 intro */
--text-l: clamp(1.8rem, 1.690rem + 0.230vw, 2.0rem); /* 18 → 20 */
--text-m: clamp(1.6rem, 1.490rem + 0.230vw, 1.8rem); /* 16 → 18 body */
--text-s: clamp(1.4rem, 1.345rem + 0.115vw, 1.5rem); /* 14 → 15 */
--text-xs: clamp(1.2rem, 1.145rem + 0.115vw, 1.3rem); /* 12 → 13 */
/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------ */
--page-width: 135rem; /* 1350px, gelijk aan Oxygen */
--content-width: 72rem; /* ideale breedte voor blogtekst */
--narrow-width: 56rem;
--section-pad-y: 7.5rem; /* gelijk aan Oxygen section padding */
--section-pad-x: 2rem;
--column-pad: 2rem;
/* ------------------------------------------------------------------
SPACING (vaste stappen, 1rem = 10px)
------------------------------------------------------------------ */
--space-3xs: 0.4rem;
--space-2xs: 0.8rem;
--space-xs: 1.2rem;
--space-s: 1.6rem;
--space-m: 2.4rem;
--space-l: 3.2rem;
--space-xl: 4.8rem;
--space-2xl: 6.4rem;
--space-3xl: 9.6rem;
--gap: clamp(1.6rem, 1.049rem + 1.149vw, 2.6rem); /* 16 → 26 */
--gap-l: clamp(2.4rem, 1.407rem + 2.069vw, 4.2rem); /* 24 → 42 */
/* ------------------------------------------------------------------
VORM
------------------------------------------------------------------ */
--radius-s: 0.6rem;
--radius: 1.2rem;
--radius-l: 2rem;
--radius-full: 999px;
--cut: 26px; /* schuine hoek, zoals .section-image-wrapper */
--cut-s: 12px;
--border-width: 1px;
/* ------------------------------------------------------------------
SCHADUWEN (groen getint i.p.v. grijs)
------------------------------------------------------------------ */
--shadow-s: 0 1px 2px rgba(4, 47, 16, 0.06), 0 1px 3px rgba(4, 47, 16, 0.08);
--shadow-m: 0 4px 12px rgba(4, 47, 16, 0.08), 0 2px 4px rgba(4, 47, 16, 0.05);
--shadow-l: 0 16px 40px rgba(4, 47, 16, 0.12), 0 4px 10px rgba(4, 47, 16, 0.06);
--focus-ring: 0 0 0 3px var(--clr-bg), 0 0 0 5px var(--clr-focus);
/* ------------------------------------------------------------------
ANIMATIE
------------------------------------------------------------------ */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur-fast: 150ms;
--dur: 250ms;
--dur-slow: 450ms;
--transition: all var(--dur) var(--ease);
/* ------------------------------------------------------------------
Z-INDEX
------------------------------------------------------------------ */
--z-base: 1;
--z-sticky: 100;
--z-header: 500;
--z-overlay: 900;
--z-modal: 1000;
}
/* Minder beweging voor wie dat heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur: 0ms;
--dur-slow: 0ms;
}
}html {
width:100%;
font-size: 62.5%;
box-sizing: border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
* {
text-wrap: pretty;
}
body {
width:100%;
overflow-x: hidden;
letter-spacing:.015em;
}
body.fixed {
overflow: hidden;
}
main {
position: relative;
width: 100%;
overflow-x:clip;
}
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
letter-spacing: -.035em;
/* text-transform: uppercase; */
line-height: 1.1;
}
h1>span,h2>span,h3>span,h4>span,h5>span,h6>span {
text-wrap: balance;
letter-spacing: -.035em;
/* text-transform: uppercase; */
line-height: 1.1;
}
p {
margin: 0 0 1.2em;
}
picture {
display: flex;
width: 100%;
height: 100%;
}
.ct-inner-content figure {
margin: 0;
}
p>a,span>a,span>p>a {
font-weight: 600;
text-decoration: underline;
}
a{
/* font-weight: 900; */
}
.oxy-rich-text a{
color:color(6);
}
img {
max-width: 100%;
height: auto;
}
.section-title{
margin-bottom: .3em;
font-size:var(--h2-groot);
/* font-size:var(--h2); */
max-width: 24ch;
/* line-height: 0.8; */
}
.section-text{
text-align: left;
margin-bottom: 1.5em;
}
.section-image-wrapper{
width: 100%;
object-fit: cover;
object-position:center;
aspect-ratio: 16/9;
--cut: 26px;
--radius: 12px;
display:block;
/* padding:4px; */
background:var(--clr-primary);
text-decoration:none;
/* border-radius:calc(var(--radius) + 4px); */
clip-path:polygon(
calc(var(--cut) + 4px) 0, 100% 0,
100% calc(100% - var(--cut) - 4px), calc(100% - var(--cut) - 4px) 100%,
0 100%, 0 calc(var(--cut) + 4px)
);
}
.section-image-wrapper img{
height: 100%;
width: 100%;
object-fit: cover;
object-position:center;
aspect-ratio: 16/9;
}
.section-image-wrapper-2{
width: 100%;
object-fit: cover;
object-position:center;
aspect-ratio: 4 / 3;
}
.section-image-wrapper-2 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position:center;
aspect-ratio: 4 / 3;
}
.label-container{
position:absolute;
top:0;
left:0;
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, .65);
}
.breadcrumbs {
font-size: 14px;
color: #555;
/* margin-bottom: 15px; */
}
.breadcrumbs a {
/* color: #0073aa; */
color: var(--clr-primary);
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs .breadcrumb_last {
font-weight: bold;
}
.label{
text-transform: uppercase;
letter-spacing: .035em;
color: var(--clr-primary);
font-weight: 500;
font-size: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 0.7356)), 1.4rem);
margin-bottom: 0.1em;
margin: 0 0 8px;
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
background: var(--clr-bg-alt);
border-top: var(--border-width) solid var(--clr-border);
color: var(--clr-text);
font-family: var(--font-body);
}
.site-footer__inner {
max-width: var(--page-width);
margin-inline: auto;
padding: var(--section-pad-y) var(--section-pad-x) var(--space-l);
}
/* ---------- Bovenste deel ---------- */
.site-footer__top {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: var(--gap-l);
padding-bottom: var(--space-xl);
}
.site-footer__logo {
display: inline-block;
margin-bottom: var(--space-m);
border-radius: var(--radius-s);
}
.site-footer__logo img {
display: block;
width: auto;
height: 4rem;
}
.site-footer__intro {
max-width: 38ch;
margin: 0;
color: var(--clr-text-muted);
font-size: var(--text-m);
line-height: var(--lh-body);
}
.site-footer__title {
margin: 0 0 var(--space-s);
color: var(--clr-heading);
font-family: var(--font-heading);
font-size: var(--text-m);
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
}
.site-footer__list,
.site-footer__legal {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__list li + li {
margin-top: var(--space-2xs);
}
.site-footer__list a,
.site-footer__legal a {
color: var(--clr-text-muted);
font-size: var(--text-s);
font-weight: var(--fw-regular);
text-decoration: none;
border-radius: 2px;
transition: color var(--dur-fast) var(--ease);
}
.site-footer__list a:hover,
.site-footer__legal a:hover {
color: var(--clr-primary-dark);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-footer a:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ---------- Onderste balk ---------- */
.site-footer__bottom {
padding-top: var(--space-m);
border-top: var(--border-width) solid var(--clr-border);
}
.site-footer__disclosure {
margin: 0 0 var(--space-s);
color: var(--clr-text-muted);
font-size: var(--text-xs);
}
.site-footer__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-xs) var(--space-m);
}
.site-footer__copy {
margin: 0;
color: var(--clr-text-muted);
font-size: var(--text-xs);
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
}
.site-footer__legal a {
font-size: var(--text-xs);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 992px) {
.site-footer__top {
grid-template-columns: repeat(3, 1fr);
}
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.site-footer__top {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.site-footer__top {
grid-template-columns: 1fr;
gap: var(--space-l);
}
.site-footer__meta {
flex-direction: column;
align-items: flex-start;
}
.site-footer__list a {
display: inline-block;
padding-block: 0.4rem;
}
}/* ==========================================================================
HEADER
========================================================================== */
/* Het Oxygen code block zelf sticky maken */
.ct-code-block:has(> .site-header) {
position: sticky;
top: 0;
z-index: var(--z-header);
width: 100%;
}
/* Ruimte voor de WordPress adminbalk als je bent ingelogd */
body.admin-bar .ct-code-block:has(> .site-header) { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .ct-code-block:has(> .site-header) { top: 46px; }
}
@media (max-width: 600px) {
body.admin-bar .ct-code-block:has(> .site-header) { top: 0; }
}
.site-header {
background: var(--clr-bg);
border-bottom: var(--border-width) solid var(--clr-border);
font-family: var(--font-body);
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
border-bottom-color: transparent;
box-shadow: var(--shadow-m);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
max-width: var(--page-width);
height: 7.6rem;
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
/* ---------- Logo ---------- */
.site-header__logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-radius: var(--radius-s);
}
.site-header__logo img {
display: block;
width: auto;
height: 4rem;
}
/* ---------- Navigatie (desktop) ---------- */
.site-nav {
display: flex;
align-items: center;
gap: var(--space-l);
}
.site-nav__list {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list a {
position: relative;
display: block;
padding: 1rem 1.4rem;
border-radius: var(--radius-s);
color: var(--clr-text);
font-size: var(--text-s);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
/* De lijn onder de link */
.site-nav__list a::after {
content: "";
position: absolute;
left: 1.4rem;
right: 1.4rem;
bottom: 0.4rem;
height: 3px;
border-radius: 3px;
background: var(--clr-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
color: var(--clr-heading);
}
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---------- CTA naar HalloVPN ---------- */
.site-header__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.2rem 2rem;
border-radius: var(--radius-s);
background: var(--clr-cta-bg);
color: var(--clr-cta-text);
font-size: var(--text-s);
font-weight: var(--fw-bold);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease);
}
.site-header__cta:hover {
background: var(--clr-cta-bg-hover);
}
/* ---------- Focus ---------- */
.site-header a:focus-visible,
.site-header__toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ---------- Hamburger ---------- */
.site-header__toggle {
display: none;
place-content: center;
gap: 5px;
width: 4.4rem;
height: 4.4rem;
padding: 0;
border: var(--border-width) solid var(--clr-border);
border-radius: var(--radius-s);
background: transparent;
cursor: pointer;
}
.site-header__toggle span {
display: block;
width: 2rem;
height: 2px;
background: var(--clr-heading);
border-radius: 2px;
transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ==========================================================================
TABLET EN KLEINER (992px)
========================================================================== */
@media (max-width: 992px) {
.site-header__toggle {
display: grid;
}
.site-nav {
position: fixed;
inset: var(--header-offset, 7.6rem) 0 0 0;
flex-direction: column;
align-items: stretch;
gap: var(--space-l);
padding: var(--space-m) var(--section-pad-x) var(--space-xl);
background: var(--clr-bg);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-0.8rem);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.site-nav.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.site-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.site-nav__list a {
padding: 1.6rem 0.4rem;
border-bottom: var(--border-width) solid var(--clr-border);
border-radius: 0;
font-family: var(--font-heading);
font-size: var(--h4);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
}
.site-nav__list a::after {
display: none;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
color: var(--clr-primary-dark);
}
.site-header__cta {
padding: 1.6rem 2rem;
font-size: var(--text-m);
}
}
@media (max-width: 480px) {
.site-header__inner {
height: 6.8rem;
}
.site-header__logo img {
height: 3.4rem;
}
}/* ==========================================================================
BUTTONS – globaal, gebruik in elke sectie
of
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1.4rem 2.4rem;
border: 2px solid transparent;
border-radius: var(--radius-s);
font-family: var(--font-body);
font-size: var(--text-m);
font-weight: var(--fw-bold);
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Primary: groen vlak, donkere tekst */
.btn--primary {
background: var(--clr-btn-bg);
color: var(--clr-btn-text);
}
.btn--primary:hover {
background: var(--clr-btn-bg-hover);
}
/* Secondary: rand, geen vlak */
.btn--secondary {
background: transparent;
border-color: var(--clr-border-strong);
color: var(--clr-heading);
}
.btn--secondary:hover {
border-color: var(--clr-heading);
}