/*
* GOOGLE FONTS - kopieer deze tags naar de van elke HTML-pagina,
* voor de styles.css link:
*
*
*
*
*
* Koppen: Bitter (slab-serif, warm en stevig, past bij 50 jaar vakmanschap)
* Body: Hanken Grotesk (vriendelijke grotesk, goed leesbaar)
* Merkwoorden: robuust, vakkundig, toegankelijk
*
* NB: Bitter italic 700 is nodig voor de gele -woorden in koppen en
* Hanken Grotesk 700 voor labels/tags; zonder die weights rendert de
* browser nep-vet/nep-cursief (faux bold/italic).
*/
/* ============================================================
TOKENS
============================================================ */
:root {
--color-navy: #001428;
--color-yellow: #fff200;
--color-blue: #6495ed;
--color-navy-80: #1a2d3f;
--color-navy-60: #334d63;
--color-yellow-dark: #c8bc00;
--color-yellow-pale: #fffbe6;
--color-surface: #f5f7fa;
--color-white: #ffffff;
--color-text: #0d1f2d;
--color-text-muted:#4a5f72;
--font-heading: 'Bitter', Georgia, serif;
--font-body: 'Hanken Grotesk', Helvetica, sans-serif;
--step-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--step-sm: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
--step-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--step-md: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
--step-lg: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
--step-xl: clamp(1.75rem, 1.2rem + 2.75vw, 3rem);
--step-2xl: clamp(2.25rem, 1.4rem + 4.25vw, 4.25rem);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--shadow-sm: 0 2px 8px rgba(0,20,40,0.10);
--shadow-md: 0 6px 24px rgba(0,20,40,0.14);
--shadow-lg: 0 16px 48px rgba(0,20,40,0.18);
--transition-base: 0.25s ease;
--max-w: 1160px;
--nav-h: 72px;
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--nav-h); }
/* Voorkomt horizontaal scrollen door de translateX van
.reveal-left/.reveal-right in hun beginstand. */
html, body { overflow-x: clip; }
body {
font-family: var(--font-body);
font-size: var(--step-base);
line-height: 1.65;
color: var(--color-text);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.2;
text-wrap: balance;
color: var(--color-navy);
}
p { max-width: 68ch; text-wrap: pretty; }
/* Skip-link: onzichtbaar tot hij focus krijgt (toetsenbord/screenreader) */
.skip-link {
position: absolute;
top: -100px;
left: var(--space-4);
z-index: 200;
background: var(--color-yellow);
color: var(--color-navy);
font-weight: 700;
font-size: var(--step-sm);
padding: var(--space-3) var(--space-5);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
transition: top var(--transition-base);
}
.skip-link:focus-visible { top: 0; outline: none; }
/* ============================================================
LAYOUT HELPERS
============================================================ */
.container {
width: min(100%, var(--max-w));
margin-inline: auto;
padding-inline: var(--space-6);
}
.section { padding-block: var(--space-20); }
.section--lg { padding-block: var(--space-32); }
.section--sm { padding-block: var(--space-12); }
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--space-6); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ============================================================
SECTION LABELS (eyebrow - beperkt gebruik)
============================================================ */
.label {
display: inline-block;
font-family: var(--font-body);
font-size: var(--step-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-navy-60);
margin-bottom: var(--space-3);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 14px var(--space-8);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--step-sm);
font-weight: 600;
line-height: 1;
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
white-space: nowrap;
}
.btn:focus-visible {
outline: 3px solid var(--color-yellow);
outline-offset: 3px;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn--primary {
background: var(--color-yellow);
color: var(--color-navy);
}
.btn--primary:hover {
background: var(--color-yellow-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--dark {
background: var(--color-navy);
color: var(--color-white);
}
.btn--dark:hover {
background: var(--color-navy-80);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--ghost {
background: transparent;
color: var(--color-navy);
border: 2px solid var(--color-navy);
}
.btn--ghost:hover {
background: var(--color-navy);
color: var(--color-white);
transform: translateY(-2px);
}
/* Ghost-variant voor donkere achtergronden (hero, navy-secties) */
.btn--ghost-light {
background: transparent;
color: var(--color-white);
border: 2px solid rgba(255,255,255,0.45);
}
.btn--ghost-light:hover {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-navy);
transform: translateY(-2px);
}
/* ============================================================
NAVIGATION / HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-navy);
height: var(--nav-h);
display: flex;
align-items: center;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
width: 100%;
}
.nav-logo {
flex-shrink: 0;
font-family: var(--font-heading);
font-size: var(--step-md);
font-weight: 700;
color: var(--color-yellow);
letter-spacing: -0.01em;
}
.nav-links {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav-links a {
font-size: var(--step-sm);
font-weight: 500;
color: rgba(255,255,255,0.85);
position: relative;
padding-bottom: 3px;
transition: color var(--transition-base);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--color-yellow);
border-radius: 2px;
transition: width 0.3s cubic-bezier(0.25,0,0,1);
}
.nav-links a:hover { color: var(--color-white); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--color-white); }
/* De CTA-knop in de nav is een .btn, geen tekstlink:
geen underline-effect en navy tekst op geel (leesbaar contrast). */
.nav-links a.btn { padding-bottom: 14px; }
.nav-links a.btn::after { content: none; }
.nav-links a.btn--primary,
.nav-links a.btn--primary:hover { color: var(--color-navy); }
.nav-cta { margin-left: var(--space-4); }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: var(--space-2);
background: none;
border: none;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 26px;
height: 2px;
background: var(--color-white);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.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); }
@media (max-width: 768px) {
.nav-toggle { display: flex; }
.nav-links {
display: none;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
position: absolute;
top: var(--nav-h);
left: 0;
right: 0;
background: var(--color-navy);
padding: var(--space-6);
box-shadow: var(--shadow-lg);
z-index: 99;
}
.nav-links.is-open { display: flex; }
.nav-links a { font-size: var(--step-base); }
/* Belangrijkste conversieknop NIET verstoppen op mobiel:
toon hem als volle-breedte-knop onderin het uitklapmenu. */
.nav-cta {
margin-left: 0;
width: 100%;
padding-top: var(--space-2);
}
.nav-cta .btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: clamp(480px, 80vh, 760px);
display: flex;
align-items: center;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(0,20,40,0.88) 0%,
rgba(0,20,40,0.62) 55%,
rgba(0,20,40,0.30) 100%
);
}
.hero__content {
position: relative;
z-index: 1;
padding-block: var(--space-20);
max-width: 640px;
}
.hero__tag {
display: inline-block;
background: var(--color-yellow);
color: var(--color-navy);
font-size: var(--step-xs);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 6px var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-5);
}
.hero__title {
font-size: var(--step-2xl);
font-weight: 700;
color: var(--color-white);
line-height: 1.1;
margin-bottom: var(--space-5);
letter-spacing: -0.02em;
}
.hero__title em {
font-style: italic;
color: var(--color-yellow);
}
.hero__desc {
font-size: var(--step-md);
color: rgba(255,255,255,0.85);
line-height: 1.6;
margin-bottom: var(--space-8);
max-width: 52ch;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
}
/* Direct bellen vanuit de hero: laagdrempeligste conversie voor
lokale klanten, zeker op mobiel. */
.hero__phone {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-6);
font-size: var(--step-sm);
font-weight: 600;
color: rgba(255,255,255,0.85);
transition: color var(--transition-base);
}
.hero__phone:hover { color: var(--color-yellow); }
.hero__phone:focus-visible {
outline: 2px solid var(--color-yellow);
outline-offset: 3px;
border-radius: 2px;
}
.hero__phone strong { color: var(--color-white); font-weight: 700; }
.hero__phone:hover strong { color: var(--color-yellow); }
/* ============================================================
USP STRIP
============================================================ */
.usp-strip {
background: var(--color-yellow);
padding-block: var(--space-5);
}
.usp-strip__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-6) var(--space-10);
align-items: center;
justify-content: center;
}
.usp-strip__item {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--step-sm);
font-weight: 600;
color: var(--color-navy);
}
.usp-strip__item svg { flex-shrink: 0; }
/* ============================================================
SECTION INTRO
============================================================ */
.section-intro { margin-bottom: var(--space-10); }
.section-intro--center { text-align: center; }
.section-intro--center p { margin-inline: auto; }
.section-intro h2 {
font-size: var(--step-xl);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
}
.section-intro p {
font-size: var(--step-md);
color: var(--color-text-muted);
line-height: 1.65;
}
/* ============================================================
SERVICE CARDS
============================================================ */
.service-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-base), box-shadow var(--transition-base);
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.service-card__img {
aspect-ratio: 4/3;
overflow: hidden;
}
.service-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25,0,0,1);
}
.service-card:hover .service-card__img img { transform: scale(1.05); }
.service-card__body {
padding: var(--space-6);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.service-card__tag {
display: inline-block;
width: fit-content;
font-size: var(--step-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-navy);
background: var(--color-yellow);
padding: 4px var(--space-3);
border-radius: var(--radius-sm);
}
.service-card__title {
font-size: var(--step-lg);
font-weight: 700;
color: var(--color-navy);
}
.service-card__text {
font-size: var(--step-sm);
color: var(--color-text-muted);
line-height: 1.65;
flex: 1;
}
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step-sm);
font-weight: 600;
color: var(--color-navy);
margin-top: var(--space-2);
transition: gap var(--transition-base), color var(--transition-base);
}
.service-card__link:hover { gap: var(--space-3); color: var(--color-blue); }
/* ============================================================
ACCORDION (diensten detail)
============================================================ */
.accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.accordion__item {
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
text-align: left;
font-family: var(--font-heading);
font-size: var(--step-md);
font-weight: 600;
color: var(--color-navy);
background: none;
border: none;
cursor: pointer;
transition: background var(--transition-base);
}
.accordion__trigger:hover { background: var(--color-surface); }
.accordion__trigger:focus-visible {
outline: 3px solid var(--color-yellow);
outline-offset: -3px;
}
.accordion__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-yellow);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-base);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.25,0,0,1);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner {
overflow: hidden;
padding: 0 var(--space-6) 0;
transition: padding var(--transition-base);
}
.accordion__item.is-open .accordion__inner {
padding: 0 var(--space-6) var(--space-6);
}
.accordion__inner p {
font-size: var(--step-sm);
color: var(--color-text-muted);
line-height: 1.7;
}
.accordion__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
margin-top: var(--space-4);
}
.accordion__meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step-xs);
font-weight: 600;
color: var(--color-navy);
background: var(--color-yellow-pale);
padding: 6px var(--space-4);
border-radius: var(--radius-sm);
}
/* ============================================================
CONTACT BLOCK (signatuurmoment)
============================================================ */
.contact-block {
background: var(--color-navy);
border-radius: var(--radius-xl);
padding: var(--space-12) var(--space-10);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
}
@media (max-width: 768px) {
.contact-block {
grid-template-columns: 1fr;
padding: var(--space-8) var(--space-6);
}
}
.contact-block__heading {
font-size: var(--step-xl);
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--space-4);
}
.contact-block__heading em {
font-style: italic;
color: var(--color-yellow);
}
.contact-block__desc {
font-size: var(--step-sm);
color: rgba(255,255,255,0.75);
margin-bottom: var(--space-6);
max-width: 48ch;
}
.contact-block__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.contact-block__info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-block__item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: rgba(255,255,255,0.07);
border-radius: var(--radius-md);
}
.contact-block__item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--color-yellow);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.contact-block__item-text strong {
display: block;
font-size: var(--step-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: rgba(255,255,255,0.55);
margin-bottom: 2px;
}
.contact-block__item-text span {
font-size: var(--step-sm);
font-weight: 500;
color: var(--color-white);
}
.contact-block__item-text a {
color: var(--color-yellow);
transition: color var(--transition-base);
}
.contact-block__item-text a:hover { color: var(--color-yellow-dark); }
/* ============================================================
REVIEWS
============================================================ */
.reviews-section { background: var(--color-surface); }
.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.review-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.review-card__stars {
display: flex;
gap: 3px;
}
.review-card__stars svg { flex-shrink: 0; }
.review-card__text {
font-family: var(--font-heading);
font-style: italic;
font-size: var(--step-md);
color: var(--color-navy);
line-height: 1.5;
flex: 1;
}
.review-card__author {
font-size: var(--step-sm);
font-weight: 600;
color: var(--color-text-muted);
}
.review-card__source {
font-size: var(--step-xs);
font-weight: 500;
color: var(--color-text-muted);
opacity: 0.75;
}
/* ============================================================
PANEL (kaart op donkere achtergrond; vervangt inline styles)
============================================================ */
.panel-dark {
background: rgba(255,255,255,0.05);
border-radius: var(--radius-xl);
padding: var(--space-10);
height: 100%;
}
@media (max-width: 600px) {
.panel-dark { padding: var(--space-8) var(--space-6); }
}
/* ============================================================
OPENINGSTIJDEN
============================================================ */
.hours-block {
background: var(--color-navy);
border-radius: var(--radius-xl);
padding: var(--space-10);
color: var(--color-white);
}
.hours-block__title {
font-size: var(--step-lg);
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--space-6);
}
.hours-list { display: flex; flex-direction: column; gap: var(--space-3); }
.hours-list__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--step-sm);
}
.hours-list__row:nth-child(odd) { background: rgba(255,255,255,0.07); }
.hours-list__day { font-weight: 500; color: rgba(255,255,255,0.75); }
.hours-list__time { font-weight: 700; color: var(--color-yellow); }
.hours-list__closed { font-weight: 600; color: rgba(255,255,255,0.40); }
/* ============================================================
WERKGEBIED
============================================================ */
.werkgebied-block {
display: flex;
align-items: center;
gap: var(--space-4);
background: var(--color-yellow-pale);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
max-width: 480px;
}
.werkgebied-block svg { flex-shrink: 0; }
.werkgebied-block__text strong {
display: block;
font-size: var(--step-sm);
font-weight: 700;
color: var(--color-navy);
}
.werkgebied-block__text span {
font-size: var(--step-sm);
color: var(--color-text-muted);
}
/* ============================================================
ABOUT / INTRO TEKST SECTIE
============================================================ */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
@media (max-width: 768px) {
.about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.about-img {
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/3;
box-shadow: var(--shadow-lg);
}
.about-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-text h2 {
font-size: var(--step-xl);
margin-bottom: var(--space-5);
}
.about-text p {
color: var(--color-text-muted);
margin-bottom: var(--space-4);
line-height: 1.7;
}
.about-text p:last-of-type { margin-bottom: var(--space-8); }
/* stat-strip onder about */
.stat-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
margin-top: var(--space-8);
}
.stat-item strong {
display: block;
font-family: var(--font-heading);
font-size: var(--step-xl);
font-weight: 700;
color: var(--color-navy);
line-height: 1;
}
.stat-item span {
font-size: var(--step-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================
GALLERY STRIP
============================================================ */
.gallery-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
@media (max-width: 768px) { .gallery-strip { grid-template-columns: repeat(2, 1fr); } }
.gallery-strip__item {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 1;
}
.gallery-strip__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25,0,0,1);
}
.gallery-strip__item:hover img { transform: scale(1.07); }
/* ============================================================
CONTACT FORM
============================================================ */
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group label {
font-size: var(--step-sm);
font-weight: 600;
color: var(--color-navy);
}
.form-group input,
.form-group textarea {
font-family: var(--font-body);
font-size: var(--step-sm);
color: var(--color-text);
background: var(--color-surface);
border: 2px solid transparent;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
width: 100%;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
line-height: 1.5;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-muted);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-yellow);
box-shadow: 0 0 0 3px rgba(255,242,0,0.25);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-honeypot { display: none !important; visibility: hidden; }
.form-status {
display: none;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--step-sm);
font-weight: 600;
}
.form-status.is-success {
display: block;
background: #e6f9ed;
color: #1a6b35;
}
.form-status.is-error {
display: block;
background: #fdecea;
color: #8b1a14;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--color-navy);
color: rgba(255,255,255,0.75);
padding-block: var(--space-12) var(--space-8);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.4fr 1fr;
gap: var(--space-10);
margin-bottom: var(--space-10);
}
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
.footer-brand__wordmark {
font-family: var(--font-heading);
font-size: var(--step-lg);
font-weight: 700;
color: var(--color-yellow);
margin-bottom: var(--space-4);
display: block;
}
.footer-brand p {
font-size: var(--step-sm);
line-height: 1.65;
max-width: 36ch;
color: rgba(255,255,255,0.65);
}
/* Contactgegevens in de footer: NAP-data (naam, adres, telefoon)
op iedere pagina is goed voor lokale vindbaarheid en conversie. */
.footer-contact {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-contact li {
font-size: var(--step-sm);
color: rgba(255,255,255,0.65);
line-height: 1.5;
}
.footer-contact a {
color: rgba(255,255,255,0.85);
transition: color var(--transition-base);
}
.footer-contact a:hover { color: var(--color-yellow); }
.footer-contact a:focus-visible {
outline: 2px solid var(--color-yellow);
outline-offset: 2px;
border-radius: 2px;
}
.footer-col h3 {
font-family: var(--font-body);
font-size: var(--step-sm);
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col ul li a {
font-size: var(--step-sm);
color: rgba(255,255,255,0.65);
transition: color var(--transition-base);
}
.footer-col ul li a:hover { color: var(--color-yellow); }
.footer-col ul li a:focus-visible {
outline: 2px solid var(--color-yellow);
outline-offset: 2px;
border-radius: 2px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: var(--space-6);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
font-size: var(--step-xs);
color: rgba(255,255,255,0.40);
}
.footer-bottom a {
color: rgba(255,255,255,0.55);
transition: color var(--transition-base);
}
.footer-bottom a:hover { color: var(--color-yellow); }
.footer-credit a { color: rgba(255,255,255,0.50); }
.footer-credit a:hover { color: var(--color-yellow); }
/* ============================================================
PAGE HERO (interne pagina's)
============================================================ */
.page-hero {
background: var(--color-navy);
padding-block: var(--space-16) var(--space-12);
}
.page-hero__label {
font-size: var(--step-xs);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-yellow);
margin-bottom: var(--space-3);
}
.page-hero__title {
font-size: var(--step-xl);
font-weight: 700;
color: var(--color-white);
max-width: 22ch;
}
.page-hero__desc {
font-size: var(--step-md);
color: rgba(255,255,255,0.75);
margin-top: var(--space-4);
max-width: 52ch;
}
/* ============================================================
RICH TEXT (privacy, disclaimer, cookies)
============================================================ */
.rich-text { max-width: 72ch; }
.rich-text h2 {
font-size: var(--step-lg);
margin-top: var(--space-10);
margin-bottom: var(--space-4);
}
.rich-text h3 {
font-size: var(--step-md);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
}
.rich-text p { color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; }
.rich-text a { color: var(--color-blue); text-decoration: underline; }
.rich-text ul {
list-style: disc;
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
color: var(--color-text-muted);
font-size: var(--step-sm);
}
/* ============================================================
SCROLL REVEALS - progressive enhancement
============================================================ */
html.anim .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,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.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
html.anim .reveal-left.is-revealed {
opacity: 1;
transform: none;
}
html.anim .reveal-right {
opacity: 0;
transform: translateX(32px);
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
html.anim .reveal-right.is-revealed {
opacity: 1;
transform: none;
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html.anim .reveal,
html.anim .reveal-left,
html.anim .reveal-right {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.service-card,
.service-card__img img,
.gallery-strip__item img,
.btn,
.accordion__panel,
.nav-links a::after {
transition: none !important;
}
}
/* ============================================================
UTILITIES
============================================================ */
.text-center { text-align: center; }
.text-yellow { color: var(--color-yellow); }
.text-navy { color: var(--color-navy); }
.text-muted { color: var(--color-text-muted); }
.bg-surface { background: var(--color-surface); }
.bg-navy { background: var(--color-navy); }
.mt-auto { margin-top: auto; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}