/*
* Kool Loodgietersbedrijf - Ontwerpsysteem
*
* Merkwoorden: vakkundig, solide, ambachtelijk
* Kleurreferentie: donker marine-blauw als fundament, helder staalgrijs als neutraal,
* een scherp kopergeel accent - denk aan gereedschapsstaal en koperen leidingen
* Signatuurmoment: projectgalerij als masonry-raster met groot overlappend
* intro-vlak in de primaire kleur, plus een gedurfde displaykop die over
* de volle breedte breekt
*
* Google Fonts - voeg deze tags toe in de van elke pagina:
*
*
*
*
*
* --font-heading : 'Barlow Condensed' (gedurfd, condensed display)
* --font-body : 'Hanken Grotesk' (neutraal, goed leesbaar)
*/
/* ============================================================
RESET & BOX MODEL
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Merkkleuren - marine-blauw als primair */
--c-primary: #0d1f3c;
--c-primary-mid: #162d54;
--c-primary-light:#2250a0;
--c-accent: #c8862a;
--c-accent-dark: #a36820;
--c-accent-pale: #f5e8d4;
/* Neutralen */
--c-surface: #ffffff;
--c-surface-2: #f4f6f9;
--c-border: #dde2ea;
--c-text: #0d1f3c;
--c-text-mid: #3a4a62;
--c-text-muted: #5c6b82;
--c-invert: #ffffff;
/* Typografie */
--font-heading: 'Barlow Condensed', sans-serif;
--font-body: 'Hanken Grotesk', sans-serif;
/* Typeschaal (clamp) */
--fs-display: clamp(3.5rem, 10vw, 8rem);
--fs-h1: clamp(2.4rem, 6vw, 4.5rem);
--fs-h2: clamp(1.8rem, 3.5vw, 2.8rem);
--fs-h3: clamp(1.25rem, 2vw, 1.6rem);
--fs-lead: clamp(1rem, 1.5vw, 1.2rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
/* Spacing-schaal (basis 8px) */
--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 3rem;
--sp-6: 4rem;
--sp-7: 6rem;
--sp-8: 8rem;
/* Overige tokens */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 2px 8px rgba(13,31,60,.08);
--shadow-md: 0 6px 24px rgba(13,31,60,.14);
--shadow-lg: 0 16px 48px rgba(13,31,60,.2);
--transition: 0.25s ease;
--max-w: 1200px;
--max-w-text: 72ch;
}
/* ============================================================
BASE
============================================================ */
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--c-text);
background: var(--c-surface);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
text-wrap: balance;
}
p { max-width: var(--max-w-text); }
strong { font-weight: 600; }
/* ============================================================
LAYOUT HELPERS
============================================================ */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--sp-4);
}
.section {
padding-block: var(--sp-7);
}
.section--dark {
background: var(--c-primary);
color: var(--c-invert);
}
.section--tinted {
background: var(--c-surface-2);
}
.section--accent {
background: var(--c-accent);
color: var(--c-primary);
}
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
.display-kop {
font-family: var(--font-heading);
font-size: var(--fs-display);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
text-wrap: balance;
}
.sectie-kop {
font-family: var(--font-heading);
font-size: var(--fs-h2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
margin-bottom: var(--sp-3);
}
.sectie-kop--invert { color: var(--c-invert); }
.lead {
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--c-text-mid);
max-width: 60ch;
}
.lead--invert {
color: rgba(255,255,255,.8);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.85em 1.8em;
border-radius: var(--radius-sm);
transition: background var(--transition), color var(--transition),
transform var(--transition), box-shadow var(--transition);
position: relative;
overflow: hidden;
}
.btn:focus-visible {
outline: 3px solid var(--c-accent);
outline-offset: 3px;
}
.btn--primary {
background: var(--c-accent);
color: var(--c-primary);
}
.btn--primary:hover {
background: var(--c-accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--outline {
background: transparent;
color: var(--c-invert);
border: 2px solid var(--c-invert);
}
.btn--outline:hover {
background: var(--c-invert);
color: var(--c-primary);
transform: translateY(-2px);
}
.btn--outline-dark {
background: transparent;
color: var(--c-primary);
border: 2px solid var(--c-primary);
}
.btn--outline-dark:hover {
background: var(--c-primary);
color: var(--c-invert);
transform: translateY(-2px);
}
/* ============================================================
HEADER / NAV
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--c-primary);
box-shadow: 0 2px 0 rgba(200,134,42,.35);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
gap: var(--sp-4);
}
.wordmark {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.35rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--c-invert);
line-height: 1;
}
.wordmark span {
color: var(--c-accent);
}
.site-nav {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.site-nav a {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
padding: 0.4em 0.7em;
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
position: relative;
}
.site-nav a::after {
content: '';
position: absolute;
bottom: 2px;
left: 0.7em;
right: 0.7em;
height: 2px;
background: var(--c-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
color: var(--c-invert);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
transform: scaleX(1);
}
.site-nav a:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Hamburger */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 6px;
border-radius: var(--radius-sm);
transition: background var(--transition);
}
.nav-toggle:hover { background: rgba(255,255,255,.1); }
.nav-toggle:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.nav-toggle span {
display: block;
height: 2px;
background: var(--c-invert);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile nav */
.mobile-nav {
display: none;
flex-direction: column;
background: var(--c-primary-mid);
padding-block: var(--sp-2);
border-top: 1px solid rgba(255,255,255,.1);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid rgba(255,255,255,.06);
transition: color var(--transition), background var(--transition);
}
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
color: var(--c-accent);
background: rgba(255,255,255,.04);
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
background: var(--c-primary);
overflow: hidden;
min-height: clamp(500px, 80vh, 860px);
display: grid;
align-items: end;
}
.hero__bg {
position: absolute;
inset: 0;
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0.25;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(13,31,60,.4) 0%,
rgba(13,31,60,.85) 70%,
var(--c-primary) 100%
);
}
.hero__content {
position: relative;
z-index: 2;
padding-block: var(--sp-7) var(--sp-6);
}
.hero__kicker {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--sp-3);
display: block;
}
.hero__title {
font-family: var(--font-heading);
font-size: var(--fs-display);
font-weight: 800;
line-height: 0.93;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--c-invert);
text-wrap: balance;
margin-bottom: var(--sp-4);
}
.hero__title em {
font-style: normal;
color: var(--c-accent);
}
.hero__desc {
font-size: var(--fs-lead);
line-height: 1.6;
color: rgba(255,255,255,.75);
max-width: 52ch;
margin-bottom: var(--sp-5);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
align-items: center;
}
/* Signatuur: accent-balk onder hero */
.hero__accent-bar {
height: 6px;
background: var(--c-accent);
width: 100%;
}
/* ============================================================
USP-BALK
============================================================ */
.usp-balk {
background: var(--c-primary-mid);
padding-block: var(--sp-3);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.usp-balk__list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3) var(--sp-5);
align-items: center;
}
.usp-balk__item {
display: flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
}
.usp-balk__item svg {
flex-shrink: 0;
color: var(--c-accent);
}
/* ============================================================
INTRO / WELKOM
============================================================ */
.intro {
padding-block: var(--sp-7);
}
.intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
align-items: center;
}
.intro__heading {
font-size: var(--fs-h1);
font-weight: 800;
text-transform: uppercase;
line-height: 0.96;
margin-bottom: var(--sp-4);
}
.intro__heading em {
font-style: normal;
color: var(--c-accent);
}
.intro__body {
color: var(--c-text-mid);
line-height: 1.7;
margin-bottom: var(--sp-3);
}
.intro__img-wrap {
position: relative;
}
.intro__img-wrap::before {
content: '';
position: absolute;
top: -16px;
right: -16px;
width: 80px;
height: 80px;
background: var(--c-accent);
z-index: 0;
}
.intro__img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
/* ============================================================
DIENSTEN
============================================================ */
.diensten { padding-block: var(--sp-7); }
.diensten__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.diensten__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.dienst-kaart {
background: var(--c-surface-2);
border-radius: var(--radius-md);
padding: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-2);
transition: transform var(--transition), box-shadow var(--transition);
border-bottom: 3px solid transparent;
}
.dienst-kaart:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-bottom-color: var(--c-accent);
}
.dienst-kaart__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--c-primary);
border-radius: var(--radius-sm);
color: var(--c-accent);
flex-shrink: 0;
}
.dienst-kaart__naam {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
color: var(--c-text);
}
.dienst-kaart__omschrijving {
font-size: var(--fs-small);
color: var(--c-text-muted);
line-height: 1.6;
flex: 1;
}
/* Diensten op diensten.html (uitgebreide weergave) */
.diensten-uitgebreid { padding-block: var(--sp-7); }
.dienst-rij {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--sp-4) var(--sp-6);
align-items: start;
padding-block: var(--sp-5);
border-top: 1px solid var(--c-border);
}
.dienst-rij:last-child { border-bottom: 1px solid var(--c-border); }
.dienst-rij__naam {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: 700;
text-transform: uppercase;
color: var(--c-primary);
padding-top: 0.2em;
}
.dienst-rij__tekst {
color: var(--c-text-mid);
line-height: 1.7;
}
.dienst-rij__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--c-primary);
border-radius: var(--radius-sm);
color: var(--c-accent);
margin-bottom: var(--sp-2);
}
/* ============================================================
PROJECTGALERIJ (SIGNATUURMOMENT)
============================================================ */
.galerij {
padding-block: var(--sp-7);
background: var(--c-primary);
}
.galerij__header {
margin-bottom: var(--sp-5);
}
.galerij__heading {
color: var(--c-invert);
font-size: var(--fs-h2);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
.galerij__lead {
color: rgba(255,255,255,.65);
max-width: 52ch;
}
/* Masonry-achtig raster: twee rijen met wisselende groottes */
.galerij__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: var(--sp-2);
}
.galerij__item {
overflow: hidden;
border-radius: var(--radius-sm);
position: relative;
background: var(--c-primary-mid);
}
.galerij__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.galerij__item:hover img {
transform: scale(1.06);
}
/* Layout grote items */
.galerij__item:nth-child(1) {
grid-column: 1 / 6;
grid-row: 1;
aspect-ratio: 4 / 3;
}
.galerij__item:nth-child(2) {
grid-column: 6 / 9;
grid-row: 1;
aspect-ratio: 3 / 4;
}
.galerij__item:nth-child(3) {
grid-column: 9 / 13;
grid-row: 1;
aspect-ratio: 4 / 3;
}
.galerij__item:nth-child(4) {
grid-column: 1 / 5;
grid-row: 2;
aspect-ratio: 4 / 3;
}
.galerij__item:nth-child(5) {
grid-column: 5 / 9;
grid-row: 2;
aspect-ratio: 4 / 3;
}
.galerij__item:nth-child(6) {
grid-column: 9 / 13;
grid-row: 2;
aspect-ratio: 4 / 3;
}
/* ============================================================
WERKWIJZE (STAPPEN)
============================================================ */
.werkwijze { padding-block: var(--sp-7); }
.werkwijze__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
counter-reset: stap;
}
.stap {
counter-increment: stap;
position: relative;
padding-top: var(--sp-4);
}
.stap::before {
content: counter(stap, decimal-leading-zero);
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 800;
line-height: 1;
color: var(--c-accent);
opacity: 0.25;
display: block;
margin-bottom: var(--sp-2);
}
.stap__titel {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
color: var(--c-text);
margin-bottom: var(--sp-1);
}
.stap__tekst {
font-size: var(--fs-small);
color: var(--c-text-muted);
line-height: 1.6;
}
/* Verbindingslijn tussen stappen */
.werkwijze__grid .stap:not(:last-child)::after {
content: '';
position: absolute;
top: calc(var(--sp-4) + 1.75rem);
right: -50%;
width: 100%;
height: 1px;
background: var(--c-border);
z-index: 0;
}
/* ============================================================
STERKE PUNTEN / USP'S
============================================================ */
.sterke-punten {
padding-block: var(--sp-7);
background: var(--c-surface-2);
}
.sterke-punten__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
}
.sterk-punt {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4);
background: var(--c-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition);
}
.sterk-punt:hover { box-shadow: var(--shadow-md); }
.sterk-punt__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-primary);
border-radius: var(--radius-sm);
color: var(--c-accent);
}
.sterk-punt__tekst h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--c-text);
margin-bottom: 0.35em;
}
.sterk-punt__tekst p {
font-size: var(--fs-small);
color: var(--c-text-muted);
line-height: 1.6;
}
/* ============================================================
CTA-BALK (offerte / contact)
============================================================ */
.cta-balk {
padding-block: var(--sp-6);
background: var(--c-accent);
}
.cta-balk__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
}
.cta-balk__heading {
font-size: clamp(1.5rem, 3.5vw, 2.4rem);
font-weight: 800;
text-transform: uppercase;
color: var(--c-primary);
line-height: 1.05;
text-wrap: balance;
}
.cta-balk__sub {
color: var(--c-primary-mid);
margin-top: var(--sp-1);
font-size: var(--fs-lead);
}
/* ============================================================
CERTIFICATEN
============================================================ */
.certificaten { padding-block: var(--sp-7); }
.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-4);
}
.cert-kaart {
background: var(--c-surface-2);
border-radius: var(--radius-md);
padding: var(--sp-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
text-align: center;
box-shadow: var(--shadow-sm);
}
.cert-kaart img {
max-height: 120px;
width: auto;
object-fit: contain;
border-radius: var(--radius-sm);
}
.cert-kaart__naam {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--c-text);
}
/* ============================================================
FOTOS-PAGINA
============================================================ */
.fotos-pagina { padding-block: var(--sp-7); }
.fotos-pagina__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.fotos-pagina__item {
overflow: hidden;
border-radius: var(--radius-md);
aspect-ratio: 4 / 3;
background: var(--c-primary-mid);
}
.fotos-pagina__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
display: block;
}
.fotos-pagina__item:hover img {
transform: scale(1.07);
}
/* ============================================================
CONTACTFORMULIER
============================================================ */
.contact-sectie { padding-block: var(--sp-7); }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
align-items: start;
}
.contact-info__heading {
font-size: var(--fs-h2);
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.contact-info__tekst {
color: var(--c-text-mid);
line-height: 1.7;
margin-bottom: var(--sp-4);
}
.contact-detail {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 1rem;
color: var(--c-text-mid);
margin-bottom: var(--sp-2);
}
.contact-detail svg { color: var(--c-accent); flex-shrink: 0; }
.contact-detail a {
color: var(--c-primary-light);
font-weight: 500;
transition: color var(--transition);
}
.contact-detail a:hover { color: var(--c-accent); }
/* Formulier */
.form {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.form__field {
display: flex;
flex-direction: column;
gap: 0.4em;
}
.form__field label {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-text);
}
.form__field input,
.form__field textarea {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--c-text);
background: var(--c-surface-2);
border: 1.5px solid var(--c-border);
border-radius: var(--radius-sm);
padding: 0.7em 1em;
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
}
.form__field input::placeholder,
.form__field textarea::placeholder {
color: var(--c-text-muted);
}
.form__field input:focus,
.form__field textarea:focus {
outline: none;
border-color: var(--c-primary-light);
box-shadow: 0 0 0 3px rgba(34,80,160,.15);
}
.form__field textarea {
min-height: 160px;
resize: vertical;
}
/* Honeypot */
.form__honeypot {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Formulier status */
.form__status {
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--fs-small);
font-weight: 500;
display: none;
}
.form__status.succes {
display: block;
background: #e6f4ea;
color: #1a6130;
border: 1px solid #b7dfbf;
}
.form__status.fout {
display: block;
background: #fce8e8;
color: #8b1a1a;
border: 1px solid #f0b8b8;
}
/* ============================================================
PAGINA-HEADER (binnenste pagina's)
============================================================ */
.page-header {
background: var(--c-primary);
padding-block: var(--sp-6) var(--sp-5);
position: relative;
overflow: hidden;
}
.page-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: var(--c-accent);
}
.page-header__titel {
font-size: var(--fs-h1);
font-weight: 800;
text-transform: uppercase;
color: var(--c-invert);
line-height: 0.95;
}
.page-header__sub {
color: rgba(255,255,255,.65);
margin-top: var(--sp-2);
font-size: var(--fs-lead);
max-width: 52ch;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--c-primary);
color: rgba(255,255,255,.7);
padding-block: var(--sp-6) var(--sp-4);
border-top: 4px solid var(--c-accent);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sp-5);
margin-bottom: var(--sp-5);
}
.footer-brand__wordmark {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.4rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--c-invert);
margin-bottom: var(--sp-2);
}
.footer-brand__wordmark span { color: var(--c-accent); }
.footer-brand__tekst {
font-size: var(--fs-small);
line-height: 1.65;
max-width: 38ch;
}
.footer-col__heading {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-invert);
margin-bottom: var(--sp-2);
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.footer-col a {
font-size: var(--fs-small);
color: rgba(255,255,255,.6);
transition: color var(--transition);
}
.footer-col a:hover { color: var(--c-accent); }
.footer-col a:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
border-radius: 2px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: var(--sp-3);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-2);
font-size: var(--fs-small);
color: rgba(255,255,255,.4);
}
.footer-bottom a {
color: rgba(255,255,255,.55);
transition: color var(--transition);
}
.footer-bottom a:hover { color: var(--c-accent); }
/* ============================================================
SCROLL REVEALS (progressive enhancement)
============================================================ */
html.anim .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
html.anim .reveal.is-revealed {
opacity: 1;
transform: none;
}
html.anim .reveal-left {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
html.anim .reveal-left.is-revealed {
opacity: 1;
transform: none;
}
/* Stagger via CSS custom property */
html.anim .stagger > * {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
html.anim .stagger.is-revealed > *:nth-child(1) { transition-delay: 0s; }
html.anim .stagger.is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
html.anim .stagger.is-revealed > *:nth-child(3) { transition-delay: 0.16s; }
html.anim .stagger.is-revealed > *:nth-child(4) { transition-delay: 0.24s; }
html.anim .stagger.is-revealed > *:nth-child(5) { transition-delay: 0.32s; }
html.anim .stagger.is-revealed > *:nth-child(6) { transition-delay: 0.40s; }
html.anim .stagger.is-revealed > *:nth-child(7) { transition-delay: 0.48s; }
html.anim .stagger.is-revealed > *:nth-child(8) { transition-delay: 0.56s; }
html.anim .stagger.is-revealed > *:nth-child(9) { transition-delay: 0.64s; }
html.anim .stagger.is-revealed > * {
opacity: 1;
transform: none;
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html.anim .reveal,
html.anim .reveal-left,
html.anim .stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.galerij__item img,
.fotos-pagina__item img,
.btn,
.site-nav a::after {
transition: none !important;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.diensten__grid { grid-template-columns: repeat(2, 1fr); }
.werkwijze__grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.galerij__item:nth-child(1) { grid-column: 1 / 7; }
.galerij__item:nth-child(2) { grid-column: 7 / 13; }
.galerij__item:nth-child(3) { grid-column: 1 / 5; }
.galerij__item:nth-child(4) { grid-column: 5 / 9; }
.galerij__item:nth-child(5) { grid-column: 9 / 13; }
.galerij__item:nth-child(6) { grid-column: 1 / 7; }
.galerij__item:nth-child(1),
.galerij__item:nth-child(2) { grid-row: 1; }
.galerij__item:nth-child(3),
.galerij__item:nth-child(4),
.galerij__item:nth-child(5) { grid-row: 2; }
.galerij__item:nth-child(6) { grid-row: 3; }
.intro__grid { grid-template-columns: 1fr; }
.intro__img-wrap { max-width: 540px; }
}
@media (max-width: 768px) {
:root {
--sp-7: 4rem;
--sp-8: 5rem;
}
.site-nav { display: none; }
.nav-toggle { display: flex; }
.hero__title { letter-spacing: -0.015em; }
.diensten__grid { grid-template-columns: 1fr; }
.sterke-punten__grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.form__row { grid-template-columns: 1fr; }
.fotos-pagina__grid { grid-template-columns: repeat(2, 1fr); }
.dienst-rij { grid-template-columns: 1fr; }
.galerij__grid { grid-template-columns: 1fr 1fr; }
.galerij__item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
.werkwijze__grid {
grid-template-columns: 1fr;
}
.werkwijze__grid .stap::after { display: none; }
.cta-balk__inner { flex-direction: column; align-items: flex-start; }
.usp-balk__list { gap: var(--sp-2) var(--sp-3); }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.fotos-pagina__grid { grid-template-columns: 1fr; }
.galerij__grid { grid-template-columns: 1fr; }
.hero__actions { flex-direction: column; align-items: flex-start; }
.btn { width: 100%; justify-content: center; }
}