/* =========================================================
responsive.css — Premium tablet & mobile (DESKTOP UNCHANGED)
Vereist:
-
- direct NA
- nav.js togglet: .navbar--open op .navbar
- nav.js togglet: .nav-open op
========================================================= */
:root{
--brand: #0C5345;
--brand-dark: #0A3D34;
--accent: #00A86B;
--gold: #FFD65A;
--radius: 16px;
--radius-sm: 12px;
--shadow: 0 18px 55px rgba(0,0,0,.18);
--shadow-soft: 0 10px 30px rgba(0,0,0,.10);
}
/* =========================
Safety (tablet + mobiel)
========================= */
@media (max-width: 1024px){
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
}
/* =========================
TABLET (<= 1024px)
========================= */
@media (max-width: 1024px){
.navbar{ padding: 16px 20px; }
.hero{ padding: 84px 20px; }
.split{ padding: 64px 20px; }
.services{ padding: 56px 20px; }
.steps-section{ padding: 56px 20px; }
/* Services cards: 2 kolommen */
.cards{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 16px;
}
.cards a.card{
width: 100%;
height: auto;
min-height: 170px;
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(0,0,0,.08);
align-items: flex-start;
text-align: left;
}
/* Steps: 2 kolommen */
.steps{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 14px;
}
.step{ width: auto; }
}
/* =========================
NAV (<= 900px) — slide-in + echte backdrop
========================= */
@media (max-width: 900px){
/* Sticky header */
.navbar{
position: sticky;
top: 0;
z-index: 1000;
background: var(--brand);
padding: 14px 16px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
.navbar .logo{
display:flex;
align-items:center;
gap: 10px;
white-space: nowrap;
}
.navbar .logo img{ height: 34px; width: auto; }
/* Hamburger */
.nav-toggle{
appearance:none;
-webkit-appearance:none;
width: 44px;
height: 44px;
display:inline-flex;
flex-direction:column;
justify-content:center;
gap: 6px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
padding: 0;
margin-left: auto;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.nav-toggle__bar{
display:block;
width: 22px;
height: 2px;
border-radius: 2px;
background: #fff;
margin: 0 auto;
}
/* Off-canvas panel */
.navbar .nav-links{
position: fixed;
top: 0;
right: 0;
height: 100dvh;
width: min(86vw, 360px);
margin: 0;
padding: 18px 14px;
list-style: none;
background: rgba(255,255,255,.97);
border-left: 1px solid rgba(0,0,0,.10);
box-shadow: var(--shadow);
display:flex;
flex-direction: column;
gap: 8px;
transform: translateX(110%);
transition: transform .22s ease;
z-index: 2000;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.navbar.navbar--open .nav-links{
transform: translateX(0);
}
.navbar .nav-links a{
display:block;
padding: 14px 12px;
border-radius: 14px;
text-decoration: none;
font-weight: 700;
color: var(--brand);
background: rgba(12,83,69,.06);
touch-action: manipulation;
}
.navbar .nav-links a:hover{ background: rgba(12,83,69,.10); }
.navbar .nav-links a:active{ transform: translateY(1px); }
/* Backdrop DIV (geen body::before meer) */
.nav-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
z-index: 1500; /* onder menu (2000), boven pagina */
}
body.nav-open{
overflow: hidden; /* geen scroll achter menu */
}
body.nav-open .nav-backdrop{
opacity: 1;
pointer-events: auto;
}
}
/* =========================
MOBILE LAYOUT (<= 900px)
========================= */
@media (max-width: 900px){
.hero{
padding: 64px 16px 44px;
text-align: left;
}
.hero h1{
font-size: clamp(30px, 7.5vw, 44px);
line-height: 1.06;
letter-spacing: -0.02em;
margin-bottom: 14px;
max-width: 22ch;
}
.hero p{
font-size: 18px;
line-height: 1.45;
margin-bottom: 18px;
}
.btn{
width: 100%;
max-width: 520px;
display: inline-flex;
justify-content: center;
padding: 16px 18px;
border-radius: 14px;
}
.split{
display: flex;
flex-direction: column;
gap: 18px;
padding: 40px 16px;
}
.divider{ display:none; }
.left, .right{ width:100%; }
.intro-photo{
width: 100%;
height: auto;
border-radius: var(--radius);
margin-top: 14px;
}
.grey-box{ border-radius: var(--radius); }
.services{
padding: 44px 16px;
text-align: left;
}
.services h2{ text-align: left; }
.cards{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.cards a.card{
width: 100%;
height: auto;
min-height: 150px;
align-items: flex-start;
text-align: left;
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(0,0,0,.08);
}
.steps-section{ padding: 48px 16px; }
.steps{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
.step{
width: auto;
border-radius: 14px;
padding: 14px 12px;
}
/* Tooltips uit op mobiel (scheelt “rommel”) */
.step::before,
.step::after{
display:none !important;
content:none !important;
}
}
@media (max-width: 520px){
.hero h1{ max-width:none; }
.steps{ grid-template-columns: 1fr; }
}
/* ===== HARD FIX iPhone: menu altijd klikbaar ===== */
@media (max-width: 900px){
/* Backdrop alleen visueel, mag NOOIT clicks blokkeren */
.nav-backdrop{
z-index: 1 !important;
pointer-events: none !important;
}
/* Sticky navbar onder menu */
.navbar{
z-index: 99998 !important;
position: sticky !important;
top: 0 !important;
}
/* Menu paneel ALTIJD boven alles en klikbaar */
.navbar .nav-links{
position: fixed !important;
z-index: 99999 !important;
pointer-events: auto !important;
}
/* Links altijd tappable */
.navbar .nav-links a,
.navbar .nav-links li{
pointer-events: auto !important;
position: relative !important;
z-index: 100000 !important;
}
}
/* =========================================================
ABOUT PAGE — premium mobile/tablet polish (scoped)
Alleen actief op
========================================================= */
/* Tablet */
@media (max-width: 1024px){
body.about-page .about-hero{
padding: 84px 0 72px;
}
body.about-page .container{
width: min(980px, calc(100% - 40px));
margin: 0 auto;
}
body.about-page .about-section{
padding: 64px 0;
}
body.about-page .about-section-head h2{
font-size: clamp(28px, 3.6vw, 38px);
line-height: 1.12;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
body.about-page .about-kicker{
font-size: 16px;
line-height: 1.7;
opacity: .9;
}
body.about-page .about-card{
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
}
/* Mobile */
@media (max-width: 900px){
/* Content breedte + rustige margins */
body.about-page .container{
width: calc(100% - 32px);
margin: 0 auto;
}
/* Hero: Apple-ish typografie en ruimte */
body.about-page .about-hero{
padding: 78px 0 64px;
}
body.about-page .about-eyebrow{
font-size: 12px;
letter-spacing: .14em;
opacity: .9;
margin-bottom: 14px;
}
body.about-page .about-hero h1{
font-size: clamp(34px, 9vw, 52px);
line-height: 1.04;
letter-spacing: -0.03em;
margin: 0 0 10px;
}
body.about-page .about-hero p{
font-size: 17px;
line-height: 1.6;
max-width: 34ch;
margin: 0;
opacity: .95;
}
/* Secties: meer ritme, minder “blokkerig” */
body.about-page .about-section{
padding: 52px 0;
}
body.about-page .about-section-head{
margin-bottom: 18px;
}
body.about-page .about-section-head h2{
font-size: clamp(24px, 7.2vw, 34px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 8px;
}
body.about-page .about-kicker{
margin: 0;
font-size: 15.5px;
line-height: 1.7;
opacity: .88;
}
/* 2 kolommen -> 1 kolom met goede spacing */
body.about-page .about-two-col{
display: grid;
grid-template-columns: 1fr !important;
gap: 16px;
}
/* Tekst: premium leesbaarheid */
body.about-page .about-prose p{
font-size: 16px;
line-height: 1.9;
margin: 0 0 14px;
}
body.about-page .about-prose p:last-child{
margin-bottom: 0;
}
/* Highlight: meer “card” gevoel */
body.about-page .about-highlight{
margin-top: 16px;
border-radius: 18px;
padding: 16px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
body.about-page .about-highlight-title{
font-size: 14px;
opacity: .92;
margin-bottom: 10px;
}
body.about-page .about-highlight-items{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.about-page .about-highlight-items span{
font-size: 13px;
padding: 9px 10px;
border-radius: 999px;
}
/* Card sectie (missie/waarden) mooier op mobiel */
body.about-page .about-card{
border-radius: 18px;
padding: 18px;
box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
/* Mini cards: 1 kolom op mobiel */
body.about-page .about-mini-cards{
display: grid;
grid-template-columns: 1fr !important;
gap: 12px;
margin-top: 14px;
}
body.about-page .about-mini-card{
border-radius: 18px;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
body.about-page .about-mini-title{
font-size: 15px;
margin-bottom: 6px;
}
body.about-page .about-mini-text{
font-size: 14.5px;
line-height: 1.7;
}
/* Commitment pills: 1 kolom + netjes */
body.about-page .about-grid{
display: grid;
grid-template-columns: 1fr !important;
gap: 12px;
}
body.about-page .about-pill{
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
body.about-page .about-pill-title{
font-size: 15px;
margin-bottom: 6px;
}
body.about-page .about-pill-text{
font-size: 14.5px;
line-height: 1.75;
opacity: .92;
}
}
/* Klein mobiel */
@media (max-width: 520px){
body.about-page .container{
width: calc(100% - 28px);
}
body.about-page .about-hero p{
max-width: none;
}
}
/* =========================================================
DIENSTEN — premium mobile/tablet polish (scoped)
Alleen actief op
Desktop blijft unchanged
========================================================= */
/* Tablet */
@media (max-width: 1024px){
body.diensten-page .container{
width: min(980px, calc(100% - 40px));
margin: 0 auto;
}
}
/* Mobile + tablet */
@media (max-width: 900px){
body.diensten-page .container{
width: calc(100% - 32px);
margin: 0 auto;
}
/* Hero: typografie + spacing */
body.diensten-page .diensten-hero{
padding: 72px 16px 44px;
text-align: left;
}
body.diensten-page .diensten-hero .page-title{
font-size: clamp(34px, 9vw, 52px);
line-height: 1.04;
letter-spacing: -0.03em;
margin: 0 0 14px;
}
body.diensten-page .diensten-hero .subtitle{
font-size: 16px;
line-height: 1.9;
margin: 0;
max-width: 65ch;
opacity: .96;
}
/* Diensten cards: 1 kolom, meer premium */
body.diensten-page .diensten-blocks{
padding: 34px 0 10px;
}
body.diensten-page .diensten-blocks .cards{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
}
body.diensten-page .diensten-blocks a.card{
width: 100% !important;
height: auto !important;
min-height: 0 !important;
border-radius: 18px !important;
padding: 18px !important;
box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
border: 1px solid rgba(0,0,0,.08) !important;
align-items: flex-start !important;
text-align: left !important;
}
body.diensten-page .diensten-blocks a.card h3{
font-size: 18px;
margin: 0 0 8px;
}
body.diensten-page .diensten-blocks a.card p{
font-size: 14.5px;
line-height: 1.7;
margin: 0;
opacity: .95;
}
/* Intake: 2 kolom -> 1 kolom */
body.diensten-page .intake-section{
padding: 46px 0;
}
body.diensten-page .intake-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.diensten-page .intake-text h2{
font-size: clamp(22px, 6.5vw, 32px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 10px;
}
body.diensten-page .intake-text p,
body.diensten-page .intake-note{
font-size: 15.5px;
line-height: 1.8;
margin: 0 0 12px;
}
/* Form card: app-like */
body.diensten-page .intake-form-card{
border-radius: 18px !important;
padding: 18px !important;
box-shadow: 0 18px 40px rgba(0,0,0,.10) !important;
border: 1px solid rgba(0,0,0,.06) !important;
}
body.diensten-page .intake-form input,
body.diensten-page .intake-form textarea{
border-radius: 14px !important;
padding: 14px 14px !important;
}
body.diensten-page .btn.btn-submit{
width: 100% !important;
border-radius: 14px !important;
padding: 16px 18px !important;
}
/* Tarieven: betere leesbaarheid */
body.diensten-page .tarieven{
padding: 46px 0;
}
body.diensten-page .tarieven h2{
font-size: clamp(22px, 6.5vw, 32px);
letter-spacing: -0.02em;
margin: 0 0 12px;
}
body.diensten-page .tarieven p{
font-size: 15.5px;
line-height: 1.9;
margin: 0 0 14px;
}
}
/* Klein mobiel */
@media (max-width: 520px){
body.diensten-page .container{
width: calc(100% - 28px);
}
}
/* ===== DIENSTEN: tekst clipping fix (alleen mobiel/tablet) ===== */
@media (max-width: 900px){
/* Zorg dat alles netjes binnen de viewport blijft */
body.diensten-page *,
body.diensten-page *::before,
body.diensten-page *::after{
box-sizing: border-box;
max-width: 100%;
}
/* Extra veilige padding op de tekstkolom (dit is wat je screenshot laat zien) */
body.diensten-page .intake-text{
padding-right: 8px; /* voorkomt “afsnijden” rechts op iPhone */
}
/* Wrap/hyphenatie zodat regels nooit buiten beeld duwen */
body.diensten-page .intake-text p{
overflow-wrap: anywhere;
word-break: normal;
hyphens: auto;
}
}
/* =========================================================
WERKWIJZE (wk-page) — premium mobile/tablet ONLY
DESKTOP UNCHANGED
Vereist:
========================================================= */
/* Tablet */
@media (max-width: 1024px){
body.wk-page .wk-container{
width: min(980px, calc(100% - 40px));
margin: 0 auto;
}
body.wk-page .wk-hero{
padding: 56px 0;
}
body.wk-page .wk-hero-card{
width: min(360px, 92%);
}
}
/* Mobile + Tablet */
@media (max-width: 900px){
/* Safety */
body.wk-page *{ max-width: 100%; }
body.wk-page .wk-container{
width: calc(100% - 32px);
margin: 0 auto;
}
/* HERO: Apple-ish spacing + leesbaarheid */
body.wk-page .wk-hero{
padding: 44px 0 38px;
}
body.wk-page .wk-hero-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
}
body.wk-page .wk-hero h1{
font-size: clamp(34px, 9vw, 52px);
line-height: 1.03;
letter-spacing: -0.03em;
}
body.wk-page .wk-lead{
font-size: 16.5px;
line-height: 1.8;
}
body.wk-page .wk-hero-badges{
gap: 8px;
}
body.wk-page .wk-badge{
font-size: 13px;
padding: 8px 10px;
border-radius: 999px;
}
body.wk-page .wk-cta{
width: 100%;
justify-content: center;
padding: 14px 16px;
border-radius: 14px;
}
/* Hero image + floating card netjes op mobiel */
body.wk-page .wk-hero-image img{
height: 240px;
}
body.wk-page .wk-hero-card{
position: static; /* geen overlap op mobiel */
width: 100%;
margin-top: 12px;
border-radius: 16px;
}
/* SECTIONS: consistent padding */
body.wk-page .wk-section{
padding: 42px 0;
}
/* Steps: 2 kolommen op tablet, 1 op klein mobiel */
body.wk-page .wk-steps-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.wk-page .wk-step-card{
border-radius: 18px;
padding: 16px;
}
body.wk-page .wk-step-card p{
font-size: 14.8px;
line-height: 1.75;
}
/* Split (Wie doet het werk): stack + betere leesbaarheid */
body.wk-page .wk-split{
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.wk-page .wk-split-copy h2{
font-size: clamp(24px, 7vw, 34px);
letter-spacing: -0.02em;
line-height: 1.1;
}
body.wk-page .wk-split-copy p{
font-size: 15.5px;
line-height: 1.9;
}
body.wk-page .wk-photo img{
height: 280px;
}
/* Info grid: 1 kolom op mobiel */
body.wk-page .wk-info-grid{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
body.wk-page .wk-info-card{
border-radius: 18px;
padding: 16px;
}
body.wk-page .wk-info-card p{
font-size: 15.2px;
line-height: 1.9;
}
body.wk-page .wk-info-wide{
display: grid !important;
gap: 12px;
}
body.wk-page .wk-info-wide .wk-cta{
width: 100%;
}
}
/* Klein mobiel */
@media (max-width: 520px){
body.wk-page .wk-container{
width: calc(100% - 28px);
}
body.wk-page .wk-steps-grid{
grid-template-columns: 1fr !important;
}
body.wk-page .wk-hero-image img{
height: 220px;
}
body.wk-page .wk-photo img{
height: 240px;
}
}