/* =====================================================
STOOM Apeldoorn - CSS Stylesheet
Petrolblauw Kleurenpallet met Industrieel Design
===================================================== */
/* CSS Variables - Kleurenpallet */
:root {
/* Primair - STOOM Petrolblauw */
--primary-blue: #1B3D55;
--primary-blue-mid: #2A5470;
--primary-blue-light: #3D6E8A;
--primary-blue-tint: #E8F2F8;
/* Accent - Warme Amber */
--accent-amber: #E8A83C;
--accent-amber-dark: #C8881C;
--accent-amber-light: #F4C96B;
/* Neutrals */
--dark: #0D1F2D;
--grey-dark: #4A5568;
--grey-mid: #5C6472; /* was #6B7280 — dat haalde 4.33:1 op wit, WCAG AA vraagt 4.5:1 */
--grey-light: #D1D5DB;
--off-white: #F5F2EE;
--white: #FFFFFF;
/* Typography */
--font-display: 'Bebas Neue', sans-serif;
--font-body: 'Work Sans', sans-serif;
/* Spacing & Layout */
--navbar-height: 80px;
--container-max-width: 1200px;
--section-padding: 80px;
/* Animations */
--transition-base: all 0.3s ease;
--transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =====================================================
GLOBAL RESET & BASE STYLES
===================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* CRITICAL FIX: Add scroll padding to prevent content hiding behind navbar */
scroll-padding-top: var(--navbar-height);
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--grey-dark);
background-color: var(--white);
overflow-x: hidden;
}
/* =====================================================
TYPOGRAPHY
===================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.2;
color: var(--primary-blue);
letter-spacing: 0.02em;
}
h1 { font-size: 4.5rem; }
h2 { font-size: 3.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
p {
margin-bottom: 1rem;
}
.lead {
font-size: 1.25rem;
font-weight: 500;
color: var(--primary-blue);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-base);
}
/* De regel hierboven maakt elke link kleurloos en zonder onderstreping. Voor
navigatie, knoppen en klikbare kaarten is dat precies goed, maar een link
midden in een alinea was daardoor niet van gewone tekst te onderscheiden.
Lopende tekst krijgt daarom wel een zichtbare linkstijl. */
.intro-text p a,
.artikel-body a,
.faq-answer a,
.weekagenda-tip a,
.weekagenda-verwijzing a,
.voordeel-item p a {
color: var(--primary-blue);
font-weight: 600;
text-decoration: underline;
}
.intro-text p a:hover,
.artikel-body a:hover,
.faq-answer a:hover,
.weekagenda-tip a:hover,
.weekagenda-verwijzing a:hover,
.voordeel-item p a:hover,
.intro-text p a:focus-visible,
.artikel-body a:focus-visible,
.faq-answer a:focus-visible,
.weekagenda-tip a:focus-visible,
.weekagenda-verwijzing a:focus-visible,
.voordeel-item p a:focus-visible {
color: var(--primary-blue-mid);
}
/* =====================================================
LAYOUT UTILITIES
===================================================== */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 2rem;
}
section {
padding: var(--section-padding) 0;
position: relative;
/* CRITICAL FIX: Ensure sections don't overlap navbar with z-index */
z-index: 1;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
margin-bottom: 1rem;
text-transform: uppercase;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--grey-mid);
max-width: 600px;
margin: 0 auto;
}
/* =====================================================
NAVIGATION
===================================================== */
.navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
background: var(--primary-blue);
/* CRITICAL FIX: High z-index to ensure navbar stays on top */
z-index: 1000;
transition: var(--transition-smooth);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar.scrolled {
background: var(--primary-blue);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--navbar-height);
}
.logo {
display: flex;
align-items: center;
gap: 1rem;
transition: var(--transition-base);
}
.logo-image {
height: 65px;
width: auto;
transition: var(--transition-base);
}
.logo-text-wrapper {
display: flex;
flex-direction: column;
}
.logo-text {
font-family: var(--font-display);
font-size: 2.5rem;
color: var(--white);
letter-spacing: 0.05em;
line-height: 1;
}
.logo-subtitle {
font-size: 0.875rem;
color: var(--accent-amber);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: -5px;
}
/* Logo on scroll */
.navbar.scrolled .logo-image {
height: 50px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-link {
color: var(--white);
font-weight: 500;
padding: 0.5rem 0;
position: relative;
transition: var(--transition-base);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-amber);
transition: var(--transition-base);
}
.nav-link:hover {
color: var(--accent-amber);
}
.nav-link:hover::after {
width: 100%;
}
.nav-cta {
background: var(--accent-amber);
color: var(--primary-blue);
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: 600;
}
.nav-cta:hover {
background: var(--accent-amber-dark);
color: var(--white);
transform: translateY(-2px);
}
.nav-cta::after {
display: none;
}
.nav-offerte {
background: var(--white);
color: var(--primary-blue);
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: 600;
border: 2px solid var(--white);
}
.nav-offerte:hover {
background: transparent;
color: var(--white);
border-color: var(--white);
transform: translateY(-2px);
}
.nav-offerte::after {
display: none;
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background: var(--white);
border-radius: 2px;
transition: var(--transition-base);
}
/* Dropdown Menu */
.nav-dropdown {
position: relative;
}
.nav-dropdown .nav-link i {
font-size: 0.75rem;
margin-left: 0.5rem;
transition: var(--transition-base);
}
.nav-dropdown:hover .nav-link i,
.nav-dropdown.active .nav-link i {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
background: var(--white);
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition-smooth);
z-index: 100;
list-style: none;
padding: 0.5rem 0;
margin-top: 0.5rem;
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li {
padding: 0;
}
.dropdown-menu a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--primary-blue);
font-weight: 500;
transition: var(--transition-base);
}
.dropdown-menu a:hover {
background: var(--primary-blue-tint);
color: var(--accent-amber);
padding-left: 2rem;
}
/* =====================================================
HERO SECTION
===================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark) 100%);
background-image: url('/images/uploads/het-lab-2026.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
/* Hero doesn't need scroll offset, it's at the top */
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(27, 61, 85, 0.70) 0%, rgba(13, 31, 45, 0.60) 100%);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: var(--white);
}
.hero-title {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.hero-title-small {
font-size: 2rem;
color: var(--accent-amber);
letter-spacing: 0.15em;
text-transform: uppercase;
}
.hero-title-big {
font-size: 5rem;
color: var(--white);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--off-white);
max-width: 600px;
margin: 0 auto 2.5rem;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* Op telefoons een kleinere headerfoto: 116 KB i.p.v. 347 KB.
Scheelt seconden op 4G en is op een 390px-scherm niet te zien. */
@media (max-width: 900px) {
.hero {
background-image: url('/images/uploads/het-lab-2026-mobiel.jpg');
background-attachment: scroll;
}
}
.hero-scroll {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
.hero-scroll i {
color: var(--accent-amber);
font-size: 2rem;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
}
/* =====================================================
BUTTONS
===================================================== */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: var(--transition-base);
border: 2px solid transparent;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.95rem;
}
.btn-primary {
background: var(--accent-amber);
color: var(--primary-blue);
border-color: var(--accent-amber);
}
.btn-primary:hover {
background: var(--accent-amber-dark);
border-color: var(--accent-amber-dark);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(232, 168, 60, 0.3);
}
.btn-secondary {
background: transparent;
color: var(--white);
border-color: var(--white);
}
.btn-secondary:hover {
background: var(--white);
color: var(--primary-blue);
transform: translateY(-3px);
}
.btn-large {
padding: 1.25rem 3rem;
font-size: 1.125rem;
}
/* =====================================================
VERHAAL SECTION
===================================================== */
.verhaal-section {
background: var(--off-white);
/* CRITICAL FIX: Add scroll margin to prevent hiding behind navbar */
scroll-margin-top: var(--navbar-height);
}
.verhaal-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.verhaal-text p {
margin-bottom: 1.5rem;
}
.verhaal-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
}
.timeline-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.5rem;
background: var(--white);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
}
.timeline-item:hover {
transform: translateX(10px);
box-shadow: 0 6px 25px rgba(27, 61, 85, 0.15);
}
.timeline-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.timeline-icon i {
color: var(--accent-amber);
font-size: 1.5rem;
}
.timeline-content h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
color: var(--primary-blue);
}
.timeline-content p {
color: var(--grey-mid);
margin: 0;
}
/* =====================================================
RUIMTES SECTION
===================================================== */
.ruimtes-section {
background: var(--white);
/* CRITICAL FIX: Add scroll margin */
scroll-margin-top: var(--navbar-height);
}
.ruimtes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
}
.ruimte-card {
background: var(--off-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: var(--transition-smooth);
}
.ruimte-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(27, 61, 85, 0.2);
}
.ruimte-image {
position: relative;
height: 250px;
overflow: hidden;
}
.ruimte-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.ruimte-card:hover .ruimte-image img {
transform: scale(1.1);
}
.ruimte-capacity {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-amber);
color: var(--primary-blue);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ruimte-content {
padding: 2rem;
}
.ruimte-title {
margin-bottom: 1rem;
font-size: 2rem;
}
.ruimte-description {
margin-bottom: 1.5rem;
color: var(--grey-mid);
}
.ruimte-features {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--primary-blue);
font-weight: 500;
}
.feature-item i {
color: var(--accent-amber);
font-size: 1.125rem;
}
/* =====================================================
MOGELIJKHEDEN SECTION
===================================================== */
.mogelijkheden-section {
background: var(--primary-blue);
color: var(--white);
/* CRITICAL FIX: Add scroll margin */
scroll-margin-top: var(--navbar-height);
}
.mogelijkheden-section .section-title,
.mogelijkheden-section .section-subtitle {
color: var(--white);
}
.mogelijkheden-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
/* 3-op-rij op desktop → bij 5 items wordt het 3+2, laatste rij gecentreerd.
Bij 4 of 6 items wordt het 3+1 of 3+3 (respectievelijk). */
.mogelijkheden-grid > * {
flex: 0 1 calc(33.333% - 1.4rem);
min-width: 240px;
max-width: 340px;
}
@media (max-width: 900px) {
.mogelijkheden-grid > * {
flex-basis: calc(50% - 1rem);
}
}
@media (max-width: 600px) {
.mogelijkheden-grid > * {
flex-basis: 100%;
}
}
.mogelijkheid-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 2.5rem;
border-radius: 12px;
text-align: center;
transition: var(--transition-base);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mogelijkheid-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
border-color: var(--accent-amber);
}
.mogelijkheid-icon {
width: 80px;
height: 80px;
background: var(--accent-amber);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.mogelijkheid-icon i {
font-size: 2rem;
color: var(--primary-blue);
}
.mogelijkheid-card h3 {
color: var(--white);
margin-bottom: 1rem;
font-size: 1.5rem;
}
.mogelijkheid-card p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
/* =====================================================
VOORDELEN SECTION
===================================================== */
.voordelen-section {
background: var(--off-white);
}
.voordelen-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.voordeel-item {
text-align: center;
padding: 2rem;
background: var(--white);
border-radius: 8px;
transition: var(--transition-base);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}
.voordeel-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(27, 61, 85, 0.15);
}
.voordeel-item i {
font-size: 3rem;
color: var(--accent-amber);
margin-bottom: 1rem;
}
.voordeel-item h3,
.voordeel-item h4 {
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.voordeel-item p {
color: var(--grey-mid);
font-size: 0.95rem;
margin: 0;
}
/* =====================================================
REVIEWS SECTION
===================================================== */
.reviews-section {
background: var(--white);
/* CRITICAL FIX: Add scroll margin */
scroll-margin-top: var(--navbar-height);
}
/* --- Reviewstrook in Google-stijl: witte kaarten, horizontaal scrollbaar --- */
.reviews-carousel {
position: relative;
}
.reviews-grid {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* ruimte voor de schaduw van de kaarten, anders wordt die afgekapt */
padding: 0.5rem 0.25rem 1.25rem;
scrollbar-width: thin;
scrollbar-color: rgba(27, 61, 85, 0.25) transparent;
-webkit-overflow-scrolling: touch;
}
.reviews-grid::-webkit-scrollbar {
height: 6px;
}
.reviews-grid::-webkit-scrollbar-thumb {
background: rgba(27, 61, 85, 0.25);
border-radius: 3px;
}
.review-card {
flex: 0 0 320px;
max-width: 320px;
scroll-snap-align: start;
background: var(--white);
border: 1px solid rgba(27, 61, 85, 0.1);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease;
}
.review-card:hover {
box-shadow: 0 6px 18px rgba(27, 61, 85, 0.12);
}
.review-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.review-avatar {
position: relative;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
}
/* Het Google-logo rechtsonder de avatar: markeert de bron van de review. */
.review-source {
position: absolute;
right: -2px;
bottom: -2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
}
.review-source svg {
width: 12px;
height: 12px;
}
.review-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.review-name {
display: block;
margin: 0;
font-family: var(--font-body, inherit);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--grey-dark);
line-height: 1.3;
}
.review-date,
.review-company {
font-size: 0.8125rem;
font-style: normal;
color: var(--grey-mid);
line-height: 1.3;
}
.reviews-grid:focus-visible {
outline: 2px solid var(--primary-blue);
outline-offset: 4px;
border-radius: 8px;
}
.review-stars {
display: flex;
gap: 0.1rem;
margin-bottom: 0.75rem;
}
/* Sterren als inline SVG: geen afhankelijkheid van een icoonfont, en exact
het Google-goud. */
.review-star {
width: 17px;
height: 17px;
fill: #FBBC05;
flex: 0 0 auto;
}
.review-star-leeg {
fill: rgba(0, 0, 0, 0.15);
}
.review-text {
font-style: normal;
color: var(--grey-dark);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
/* Reviews bevatten regeleindes; die tonen we zoals ze op Google staan. */
white-space: pre-line;
}
.review-text-ingekort {
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-more {
align-self: flex-start;
margin-top: 0.5rem;
padding: 0;
background: none;
border: 0;
color: #1A73E8;
font-family: inherit;
font-size: 0.9rem;
cursor: pointer;
}
.review-more:hover,
.review-more:focus-visible {
text-decoration: underline;
}
/* Pijlen langs de strook; verbergen zichzelf aan het begin en einde. */
.reviews-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(27, 61, 85, 0.12);
background: var(--white);
color: var(--grey-dark);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-base);
}
.reviews-arrow:hover,
.reviews-arrow:focus-visible {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
/* display:flex wint van het hidden-attribuut, dus expliciet uitzetten. */
.reviews-arrow[hidden] {
display: none;
}
.reviews-arrow svg {
width: 18px;
height: 18px;
}
.reviews-arrow-vorige { left: -18px; }
.reviews-arrow-volgende { right: -18px; }
/* Op touchscreens swipe je; pijlen zijn daar alleen maar in de weg. */
@media (hover: none), (max-width: 768px) {
.reviews-arrow { display: none; }
}
/* Op mobiel loopt de strook door tot de schermrand, zodat de volgende kaart
half zichtbaar is. Zonder dat randje ziet niemand dat je kunt swipen. */
@media (max-width: 768px) {
.reviews-section .reviews-grid {
margin-left: -2rem;
margin-right: -2rem;
padding-left: 2rem;
padding-right: 2rem;
scroll-padding-left: 2rem;
}
.review-card {
flex-basis: 78vw;
max-width: 78vw;
}
}
@media (max-width: 480px) {
.reviews-section .reviews-grid {
margin-left: -1.5rem;
margin-right: -1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
scroll-padding-left: 1.5rem;
}
}
/* =====================================================
DAGFLOW — hoe een planningdag verloopt
(kwartaalplanning-pi-planning-apeldoorn.html)
===================================================== */
.planning-dag {
padding: 5rem 0;
background: var(--white);
}
.dagflow {
list-style: none;
counter-reset: none;
margin: 0 auto;
padding: 0;
max-width: 860px;
position: relative;
}
/* Verticale lijn die de stappen verbindt, zodat het als één dag leest
en niet als vier losse kaartjes. */
.dagflow::before {
content: "";
position: absolute;
left: 21px;
top: 12px;
bottom: 12px;
width: 2px;
background: rgba(232, 168, 60, 0.35);
}
.dagflow-stap {
position: relative;
display: flex;
gap: 1.5rem;
padding-bottom: 2.25rem;
}
.dagflow-stap:last-child { padding-bottom: 0; }
.dagflow-nummer {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary-blue);
color: var(--white);
font-family: var(--font-display);
font-size: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.dagflow-stap h3 {
margin: 0.35rem 0 0.25rem;
font-size: 1.375rem;
color: var(--primary-blue);
}
.dagflow-ruimte {
margin: 0 0 0.5rem;
font-size: 0.875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8C6109;
font-weight: 600;
}
.dagflow-stap p:last-child {
margin: 0;
color: var(--grey-dark);
line-height: 1.7;
}
.dagflow-noot {
max-width: 860px;
margin: 2.5rem auto 0;
padding: 1.25rem 1.5rem;
background: var(--off-white);
border-left: 4px solid var(--accent-amber);
border-radius: 8px;
color: var(--grey-dark);
line-height: 1.7;
}
.hero-cta {
margin-top: 2rem;
}
@media (max-width: 600px) {
.dagflow::before { left: 17px; }
.dagflow-nummer { flex-basis: 36px; width: 36px; height: 36px; font-size: 1.1rem; }
.dagflow-stap { gap: 1rem; }
}
/* =====================================================
OPSTELLINGSSCHEMA + FOTOSTROOK
(kwartaalplanning-pi-planning-apeldoorn.html)
===================================================== */
.opstelling-section {
padding: 5rem 0;
background: var(--off-white);
}
.opstelling-schema {
margin: 0 0 3rem;
background: var(--white);
border: 1px solid rgba(27, 61, 85, 0.1);
border-radius: 12px;
padding: 1.5rem;
}
.schema-svg {
display: block;
width: 100%;
height: auto;
}
/* Tekst in de SVG. Los gehouden van de rest zodat de schaal met de tekening
meeschaalt in plaats van met de pagina. */
.schema-zaal,
.schema-zaal-grijs {
font-family: var(--font-display);
font-size: 19px;
letter-spacing: 0.04em;
fill: var(--primary-blue);
}
/* Dit label is het langst van alle zaalnamen en liep uit zijn kader. */
.schema-zaal-grijs {
fill: #556575;
font-size: 15px;
letter-spacing: 0.02em;
}
.schema-zone {
font-family: var(--font-display);
font-size: 17px;
letter-spacing: 0.04em;
fill: var(--primary-blue);
}
.schema-meta {
font-family: "Work Sans", system-ui, sans-serif;
font-size: 12.5px;
fill: #556575;
}
.schema-label-licht {
font-family: "Work Sans", system-ui, sans-serif;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
fill: #FFFFFF;
}
.schema-label-donker {
font-family: "Work Sans", system-ui, sans-serif;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
fill: var(--primary-blue);
}
.schema-hint {
display: none;
}
.opstelling-schema figcaption,
.opstelling-fotos figcaption {
margin-top: 0.875rem;
font-size: 0.9rem;
line-height: 1.6;
color: var(--grey-mid);
}
.opstelling-fotos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.opstelling-fotos figure {
margin: 0;
}
.opstelling-fotos img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 10px;
display: block;
}
.opstelling-fotos figcaption {
margin-top: 0.625rem;
font-size: 0.875rem;
color: var(--grey-mid);
}
@media (max-width: 700px) {
.opstelling-section { padding: 3.5rem 0; }
.opstelling-schema { padding: 1rem; }
/* Het schema is breed; op een telefoon laten we het horizontaal scrollen
in plaats van het onleesbaar klein te maken. */
.opstelling-schema .schema-svg {
min-width: 620px;
}
.opstelling-schema {
overflow-x: auto;
}
/* Op een telefoon staat de rechterkolom buiten beeld; zonder deze regel
lijkt het schema te stoppen na Het Lab. */
.schema-hint {
display: block;
margin-top: 0.75rem;
font-size: 0.85rem;
font-style: italic;
color: var(--grey-mid);
}
}
/* =====================================================
WEEKAGENDA-BLOK (vergaderen.html)
Drie formats met de groepsgroottes uit de eigen agenda.
===================================================== */
.weekagenda-section {
padding: 5rem 0;
background: var(--off-white);
}
.weekagenda-lead {
max-width: 780px;
margin: 0 auto 3rem;
text-align: center;
font-size: 1.125rem;
line-height: 1.75;
color: var(--grey-dark);
}
.weekagenda-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.weekagenda-kaart {
background: var(--white);
border: 1px solid rgba(27, 61, 85, 0.1);
border-top: 3px solid var(--accent-amber);
border-radius: 10px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.weekagenda-kaart:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(27, 61, 85, 0.12);
}
/* Het getal is de kern van de kaart: één blik en je weet of je groep past. */
.weekagenda-aantal {
font-family: var(--font-display);
font-size: 2.75rem;
line-height: 1;
color: var(--primary-blue);
margin: 0 0 0.5rem;
letter-spacing: 0.01em;
}
.weekagenda-aantal span {
display: block;
font-family: var(--font-body, inherit);
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--grey-mid);
margin-top: 0.4rem;
}
.weekagenda-kaart h3 {
font-size: 1.375rem;
margin: 0.75rem 0 0.5rem;
color: var(--primary-blue);
}
.weekagenda-tekst {
color: var(--grey-mid);
font-size: 0.95rem;
line-height: 1.65;
margin-bottom: 1.25rem;
}
.weekagenda-ruimte {
margin-top: auto;
align-self: flex-start;
color: var(--primary-blue);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border-bottom: 2px solid var(--accent-amber);
padding-bottom: 2px;
transition: var(--transition-base);
}
.weekagenda-ruimte i {
font-size: 0.8rem;
margin-right: 0.35rem;
}
.weekagenda-ruimte:hover,
.weekagenda-ruimte:focus-visible {
color: var(--accent-amber-dark, #8C6109);
}
.weekagenda-tip {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-top: 2.5rem;
padding: 1.5rem 1.75rem;
background: var(--white);
border-left: 4px solid var(--accent-amber);
border-radius: 8px;
}
.weekagenda-tip i {
color: #8C6109;
font-size: 1.25rem;
margin-top: 0.15rem;
flex: 0 0 auto;
}
.weekagenda-tip p {
margin: 0;
color: var(--grey-dark);
line-height: 1.7;
}
/* De arrangementkaarten hebben standaard een off-white achtergrond. In dit blok
is de sectie zelf ook off-white, waardoor kaart 1 en 3 wegvielen tegen de
ondergrond en alleen de donkere middelste opviel. Wit met een amberrand
bovenaan, in dezelfde stijl als de kaarten hoger op de pagina. */
.weekagenda-section .arrangement-card:not(.featured) {
background: var(--white);
border-color: rgba(27, 61, 85, 0.1);
border-top: 3px solid var(--accent-amber);
box-shadow: 0 2px 12px rgba(27, 61, 85, 0.07);
}
.weekagenda-section .arrangement-card:not(.featured):hover {
border-color: var(--accent-amber);
box-shadow: 0 15px 40px rgba(27, 61, 85, 0.14);
}
.weekagenda-section .arrangement-card.featured {
box-shadow: 0 6px 24px rgba(27, 61, 85, 0.18);
}
.weekagenda-verwijzing {
max-width: 780px;
margin: 2rem auto 0;
text-align: center;
color: var(--grey-mid);
font-size: 0.95rem;
line-height: 1.7;
}
.weekagenda-verwijzing a {
color: var(--primary-blue);
font-weight: 600;
}
@media (max-width: 768px) {
.weekagenda-section { padding: 3.5rem 0; }
.weekagenda-lead { text-align: left; font-size: 1.05rem; }
.weekagenda-aantal { font-size: 2.25rem; }
.weekagenda-verwijzing { text-align: left; }
}
/* =====================================================
FAQ SECTION
===================================================== */
/* Sectie met aanpalende, terugkerende bijeenkomsten (community of practice,
intervisie, teamdagen, meetups). Hergebruikt .voordelen-grid / .voordeel-item;
alleen de sectieachtergrond wijkt af van de buren. */
.ritme-section {
padding: 5rem 0;
background: var(--off-white);
}
/* Vier kaarten: 2x2 in plaats van 3 + een weesje op de tweede rij. */
.ritme-section .voordelen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 768px) {
.ritme-section { padding: 3.5rem 0; }
.ritme-section .voordelen-grid { grid-template-columns: 1fr; }
}
/* =====================================================
OVERNACHTEN / HOTELPARTNERS
Voor meerdaagse sessies: STOOM is de werkplek,
de nacht loopt via twee hotels in Apeldoorn.
===================================================== */
.overnachten-section {
padding: 5rem 0;
background: var(--primary-blue-tint);
}
.hotel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
max-width: 920px;
margin: 0 auto;
}
.hotel-card {
background: var(--white);
border: 1px solid rgba(27, 61, 85, 0.1);
border-top: 3px solid var(--accent-amber);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 12px rgba(27, 61, 85, 0.07);
transition: var(--transition-base);
}
.hotel-card:hover {
border-color: var(--accent-amber);
box-shadow: 0 15px 40px rgba(27, 61, 85, 0.14);
}
.hotel-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary-blue);
background: var(--primary-blue-tint);
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 1rem;
}
.hotel-card h3 {
font-size: 1.6rem;
color: var(--primary-blue);
margin-bottom: 0.4rem;
}
.hotel-card h3 a {
color: inherit;
text-decoration: none;
}
.hotel-card h3 a:hover,
.hotel-card h3 a:focus-visible {
color: var(--primary-blue-mid);
text-decoration: underline;
}
.hotel-plaats {
font-size: 0.95rem;
font-weight: 600;
color: var(--grey-dark);
margin-bottom: 1rem;
}
.hotel-plaats i {
color: #8C6109;
margin-right: 0.4rem;
}
.hotel-card p {
color: var(--grey-dark);
line-height: 1.7;
}
.hotel-card p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.overnachten-section { padding: 3.5rem 0; }
.hotel-grid { grid-template-columns: 1fr; }
}
.faq-section {
background: var(--white);
padding: 5rem 0;
scroll-margin-top: var(--navbar-height);
}
.faq-list {
max-width: 820px;
margin: 0 auto;
}
.faq-item {
background: var(--off-white);
border: 1px solid rgba(27, 61, 85, 0.08);
border-radius: 10px;
margin-bottom: 1rem;
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-item[open] {
box-shadow: 0 6px 24px rgba(27, 61, 85, 0.08);
border-color: rgba(27, 61, 85, 0.18);
}
.faq-question {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
font-weight: 600;
color: var(--primary-blue);
font-size: 1.05rem;
user-select: none;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question:hover {
color: var(--accent-amber-dark);
}
.faq-icon {
color: var(--accent-amber);
transition: transform 0.25s ease;
flex-shrink: 0;
}
.faq-item[open] .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 1.5rem 1.5rem 1.5rem;
color: var(--dark);
line-height: 1.7;
}
.faq-answer p {
margin: 0 0 0.75rem 0;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer ul {
margin: 0 0 0.75rem 0;
padding-left: 1.25rem;
list-style: disc;
}
.faq-answer ul li {
margin-bottom: 0.4rem;
}
.faq-answer ul li:last-child {
margin-bottom: 0;
}
.faq-answer a {
color: var(--primary-blue);
font-weight: 600;
text-decoration: underline;
}
.faq-answer a:hover {
color: var(--accent-amber-dark);
}
@media (max-width: 768px) {
.faq-section {
padding: 3.5rem 0;
}
.faq-question {
font-size: 1rem;
padding: 1rem 1.25rem;
}
.faq-answer {
padding: 0 1.25rem 1.25rem 1.25rem;
}
}
/* =====================================================
CTA SECTION
===================================================== */
.cta-section {
background: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-amber-dark) 100%);
color: var(--primary-blue);
text-align: center;
padding: 5rem 0;
}
.cta-content h2 {
color: var(--primary-blue);
font-size: 3rem;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.25rem;
color: var(--dark);
margin-bottom: 2rem;
}
.cta-section .btn-primary {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
.cta-section .btn-primary:hover {
background: var(--dark);
border-color: var(--dark);
}
/* =====================================================
CONTACT SECTION
===================================================== */
.contact-section {
background: var(--off-white);
/* CRITICAL FIX: Add scroll margin */
scroll-margin-top: var(--navbar-height);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
}
.contact-info h3 {
margin-bottom: 2rem;
font-size: 2rem;
}
.contact-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
align-items: flex-start;
}
.contact-item i {
font-size: 1.5rem;
color: var(--accent-amber);
margin-top: 0.25rem;
flex-shrink: 0;
}
.contact-item a {
color: var(--primary-blue);
font-weight: 500;
}
.contact-item a:hover {
color: var(--accent-amber);
}
.contact-note {
background: var(--primary-blue-tint);
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid var(--accent-amber);
margin-top: 2rem;
}
.contact-note p {
color: var(--primary-blue);
font-size: 0.95rem;
margin: 0;
}
.contact-form {
background: var(--white);
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--grey-light);
border-radius: 4px;
font-family: var(--font-body);
font-size: 1rem;
transition: var(--transition-base);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-blue);
}
.form-group textarea {
resize: vertical;
}
/* =====================================================
FOOTER
===================================================== */
.footer {
background: var(--dark);
color: var(--off-white);
padding: 3rem 0 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
margin-bottom: 2rem;
}
.footer-col h4 {
color: var(--accent-amber);
margin-bottom: 1.5rem;
font-size: 1.25rem;
}
.footer-col p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 0.75rem;
}
.footer-col ul li a {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition-base);
}
.footer-col ul li a:hover {
color: var(--accent-amber);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-base);
}
.social-links a:hover {
background: var(--accent-amber);
transform: translateY(-3px);
}
.social-links i {
color: var(--white);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
margin: 0;
}
/* =====================================================
BACK TO TOP BUTTON
===================================================== */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: var(--accent-amber);
color: var(--primary-blue);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition-base);
/* Ensure button stays on top */
z-index: 999;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--accent-amber-dark);
transform: translateY(-5px);
}
/* Floating Offerte Button */
.floating-offerte {
position: fixed;
bottom: 2rem;
right: 6rem;
background: var(--accent-amber);
color: var(--primary-blue);
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 8px 25px rgba(232, 168, 60, 0.4);
transition: var(--transition-base);
z-index: 998;
animation: float-pulse 3s ease-in-out infinite;
}
.floating-offerte:hover {
background: var(--accent-amber-dark);
color: var(--white);
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(232, 168, 60, 0.6);
}
.floating-offerte i {
font-size: 1.25rem;
}
@keyframes float-pulse {
0%, 100% {
transform: translateY(0);
box-shadow: 0 8px 25px rgba(232, 168, 60, 0.4);
}
50% {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(232, 168, 60, 0.5);
}
}
/* =====================================================
ANIMATIONS
===================================================== */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* =====================================================
SUBPAGE STYLES
===================================================== */
/* Page Hero */
.page-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark) 100%);
background-image: url('/images/uploads/hero-home.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* Headerfoto Het Lab. Op telefoons de kleinere variant (116 KB i.p.v. 347 KB)
en geen vaste achtergrond, want background-attachment: fixed is op iOS traag. */
/* Headerfoto van de planningpagina: Het Lab plenair opgesteld. */
.page-hero-plenair {
background-image: url('/images/uploads/plenair-header.jpg');
}
@media (max-width: 900px) {
.page-hero-plenair {
background-image: url('/images/uploads/plenair-header-mobiel.jpg');
background-attachment: scroll;
}
}
/* Compacte hero zonder foto, voor juridische pagina's en de 404. Scheelt een
headerfoto van een paar honderd KB op pagina's die niemand om de sfeer bezoekt. */
.page-hero-compact {
min-height: 34vh;
background-image: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark) 100%);
background-attachment: scroll;
}
.page-hero-lab {
background-image: url('/images/uploads/lab-u-vorm-header.jpg');
}
@media (max-width: 900px) {
.page-hero-lab {
background-image: url('/images/uploads/lab-u-vorm-header-mobiel.jpg');
background-attachment: scroll;
}
}
.page-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(27, 61, 85, 0.70) 0%, rgba(13, 31, 45, 0.60) 100%);
}
.page-hero .hero-content {
position: relative;
z-index: 2;
text-align: center;
color: var(--white);
}
.breadcrumb {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb a {
color: var(--accent-amber);
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span {
color: rgba(255, 255, 255, 0.5);
}
.page-title {
font-size: 4rem;
color: var(--white);
margin-bottom: 1rem;
text-transform: uppercase;
/* Eén lang woord (bijv. "Vergaderlocatie") mag de pagina niet breder maken
dan het scherm; op smalle telefoons brak dat de layout. */
overflow-wrap: break-word;
hyphens: auto;
}
.page-subtitle {
font-size: 1.25rem;
color: var(--accent-amber);
letter-spacing: 0.05em;
}
/* Intro Section */
.intro-section {
padding: 5rem 0;
background: var(--white);
}
.intro-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.intro-text h2 {
margin-bottom: 1.5rem;
}
.intro-text p {
margin-bottom: 1.5rem;
}
.intro-image {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.intro-image img {
width: 100%;
height: auto;
display: block;
}
/* Vergader Ruimtes */
.vergader-ruimtes-section {
padding: 5rem 0;
background: var(--off-white);
}
.vergader-grid {
display: flex;
flex-direction: column;
gap: 3rem;
}
.vergader-card {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 3rem;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.vergader-card:nth-child(even) {
grid-template-columns: 1.5fr 1fr;
}
.vergader-card:nth-child(even) .vergader-image {
order: 2;
}
.vergader-image {
height: 100%;
min-height: 400px;
}
.vergader-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vergader-content {
padding: 3rem;
}
.vergader-content h3 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.capacity {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--accent-amber);
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 1.5rem;
}
.vergader-content h4 {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.opstelling-list,
.faciliteiten-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.opstelling-list li,
.faciliteiten-list li {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--grey-dark);
}
.opstelling-list i,
.faciliteiten-list i {
color: var(--accent-amber);
font-size: 1rem;
}
/* Arrangementen */
.arrangementen-section {
padding: 5rem 0;
background: var(--white);
}
.arrangementen-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.arrangement-card {
background: var(--off-white);
border-radius: 12px;
padding: 2.5rem;
text-align: center;
position: relative;
border: 2px solid transparent;
transition: var(--transition-base);
}
.arrangement-card:hover {
transform: translateY(-10px);
border-color: var(--accent-amber);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.arrangement-card.featured {
background: var(--primary-blue);
color: var(--white);
border-color: var(--accent-amber);
}
.featured-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-amber);
color: var(--primary-blue);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
}
.arrangement-icon {
width: 80px;
height: 80px;
background: var(--accent-amber);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.arrangement-icon i {
font-size: 2rem;
color: var(--primary-blue);
}
.arrangement-card h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.arrangement-card.featured h3 {
color: var(--white);
}
/* Grijze omschrijvingstekst op de donkerblauwe featured-kaart haalde 1,8:1.
Op die kaart moet de tekst licht zijn. */
.arrangement-card.featured .arrangement-description {
color: rgba(255, 255, 255, 0.9);
}
.arrangement-duration {
color: var(--accent-amber);
font-weight: 600;
margin-bottom: 1.5rem;
}
/* Amber op een lichte kaart haalt maar 1.86:1 contrast; dat is onleesbaar voor
wie slecht ziet en zakt door de WCAG-eis van 4.5:1. Op de donkere featured-kaart
mag het amber blijven staan (5.47:1). */
.arrangement-card:not(.featured) .arrangement-duration,
.boeket-card .arrangement-duration {
color: #8C6109;
}
/* Zelfde contrastprobleem als hierboven: amber op een lichte kaart haalt
1,86:1 en dat is onleesbaar. Op de donkere featured-kaart blijft amber. */
.arrangement-card:not(.featured) .arrangement-guests {
color: #8C6109;
}
.arrangement-includes {
list-style: none;
text-align: left;
margin: 2rem 0;
}
.arrangement-includes li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--grey-dark);
}
.arrangement-card.featured .arrangement-includes li {
color: rgba(255, 255, 255, 0.9);
}
.arrangement-includes i {
color: var(--accent-amber);
margin-top: 0.25rem;
}
/* Fix: btn-secondary op lichte arrangement-cards (Halve Dag / Op Maat) */
/* .btn-secondary is wit-op-transparant en hoort dus op een donkere ondergrond.
In het plattegrond-blok (lichte achtergrond) was hij daardoor onleesbaar:
contrast 1.06:1 — wit op bijna-wit. */
/* Ook de losse PDF-knop onder de plattegrond staat op een lichte ondergrond;
die was wit-op-bijna-wit (1.06:1) en dus onzichtbaar. */
.plattegrond-section .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.plattegrond-section .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
}
.plattegrond-cta .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.plattegrond-cta .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
}
.arrangement-card:not(.featured) .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.arrangement-card:not(.featured) .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
/* Reviews-sectie heeft een witte achtergrond: zelfde wit-op-wit fix. */
.reviews-section .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.reviews-section .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
/* Zelfde fix voor trouwen .boeket-card (lichte achtergrond) */
.boeket-card .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
}
.boeket-card .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
border-color: var(--primary-blue);
}
/* =====================================================
OFFERTE MODAL (Mice Operations widget)
===================================================== */
.offerte-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
background: rgba(27, 61, 85, 0.85);
backdrop-filter: blur(4px);
padding: 2rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.offerte-modal.active {
display: flex;
opacity: 1;
}
.offerte-modal-content {
background: var(--white);
border-radius: 12px;
width: 100%;
max-width: 1100px;
height: 90vh;
max-height: 900px;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(20px);
transition: transform 0.3s ease;
}
.offerte-modal.active .offerte-modal-content {
transform: translateY(0);
}
.offerte-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: var(--primary-blue);
color: var(--white);
font-size: 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-base);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.offerte-modal-close:hover {
background: var(--accent-amber);
transform: rotate(90deg);
}
.offerte-modal-iframe {
flex: 1;
width: 100%;
border: none;
display: block;
}
.offerte-modal-fallback {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
text-align: center;
flex: 1;
}
.offerte-modal-fallback.active {
display: flex;
}
.offerte-modal-fallback h3 {
color: var(--primary-blue);
margin-bottom: 1rem;
}
.offerte-modal-fallback p {
margin-bottom: 1.5rem;
color: #555;
max-width: 480px;
}
body.modal-open {
overflow: hidden;
}
@media (max-width: 768px) {
.offerte-modal {
padding: 0;
}
.offerte-modal-content {
height: 100vh;
max-height: none;
border-radius: 0;
}
}
/* =====================================================
BEDANKT-MODAL (na contactformulier-submit)
===================================================== */
.bedankt-modal {
position: fixed;
inset: 0;
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
background: rgba(27, 61, 85, 0.85);
backdrop-filter: blur(4px);
padding: 2rem;
opacity: 0;
transition: opacity 0.25s ease;
}
.bedankt-modal.active {
display: flex;
opacity: 1;
}
.bedankt-modal-content {
background: var(--white);
border-radius: 12px;
width: 100%;
max-width: 500px;
padding: 3rem 2.5rem 2.5rem;
text-align: center;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.bedankt-modal.active .bedankt-modal-content {
transform: translateY(0);
}
.bedankt-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: #999;
font-size: 1.1rem;
cursor: pointer;
transition: var(--transition-base);
}
.bedankt-modal-close:hover {
background: #f0f0f0;
color: var(--primary-blue);
}
.bedankt-icon {
font-size: 4rem;
color: var(--accent-amber);
margin-bottom: 1rem;
line-height: 1;
}
.bedankt-modal-content h3 {
color: var(--primary-blue);
font-size: 1.75rem;
margin-bottom: 1rem;
}
.bedankt-modal-content p {
color: #555;
line-height: 1.6;
margin-bottom: 1rem;
}
.bedankt-meta {
font-size: 0.95rem;
color: #777 !important;
margin-bottom: 2rem !important;
}
.bedankt-meta a {
color: var(--accent-amber);
text-decoration: none;
font-weight: 600;
}
.bedankt-meta a:hover {
text-decoration: underline;
}
.bedankt-modal-dismiss {
margin-top: 0.5rem;
}
/* Submit-state op het contactformulier */
.contact-form form button[type="submit"][disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.form-error {
color: #c0392b;
background: #fdecea;
padding: 0.75rem 1rem;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.9rem;
display: none;
}
.form-error.active {
display: block;
}
/* Voordelen Vergaderen */
.voordelen-vergaderen {
padding: 5rem 0;
background: var(--primary-blue);
color: var(--white);
text-align: center;
}
.voordelen-vergaderen h2 {
color: var(--white);
margin-bottom: 3rem;
}
/* Eenvoudige opsomming binnen een tekstblok (geen kaartjes, gewoon een lijst). */
.lijst-compact {
margin: 0 0 1rem 1.25rem;
padding: 0;
list-style: disc;
}
.lijst-compact li {
margin-bottom: 0.5rem;
line-height: 1.7;
color: var(--grey-dark);
}
.voordelen-vergaderen .lead,
.voordelen-vergaderen p {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.voordelen-vergaderen .cta-buttons {
margin-top: 2.5rem;
}
/* Activiteiten */
.activiteiten-section {
padding: 5rem 0;
background: var(--off-white);
}
.activiteit-category {
margin-bottom: 5rem;
}
.activiteit-category:last-child {
margin-bottom: 0;
}
.category-title {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2rem;
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--accent-amber);
}
.category-title i {
color: var(--accent-amber);
}
/* Toevoeging achter een categorietitel, bijv. '(door onze Zwitsal-partners)'. */
.category-title {
flex-wrap: wrap;
}
.category-partner {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--grey-mid);
}
.activiteiten-grid,
.eigen-activiteiten-grid,
.terrein-activiteiten-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.activiteit-card {
background: var(--white);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
position: relative;
}
.activiteit-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.activiteit-card.featured {
border: 2px solid var(--accent-amber);
}
.activiteit-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.activiteit-icon i {
font-size: 1.75rem;
color: var(--accent-amber);
}
.activiteit-card h4 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.activiteit-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
font-size: 0.9rem;
color: var(--grey-mid);
}
.activiteit-meta span {
display: flex;
align-items: center;
gap: 0.5rem;
}
.activiteit-meta i {
color: var(--accent-amber);
}
.activiteit-highlights {
list-style: none;
margin-top: 1.5rem;
}
.activiteit-highlights li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.5rem;
color: var(--grey-dark);
font-size: 0.95rem;
}
.activiteit-highlights i {
color: var(--accent-amber);
margin-top: 0.25rem;
}
/* Dagprogramma */
.dagprogramma-section {
padding: 5rem 0;
background: var(--white);
}
.dagprogramma-content {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 4rem;
align-items: start;
}
.dagprogramma-timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.dagprogramma-timeline .timeline-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
background: var(--off-white);
border-radius: 8px;
border-left: 4px solid var(--accent-amber);
}
.timeline-time {
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-amber);
min-width: 70px;
}
.timeline-content h4 {
margin-bottom: 0.5rem;
}
.timeline-content p {
color: var(--grey-mid);
margin: 0;
}
.dagprogramma-info {
background: var(--primary-blue);
color: var(--white);
padding: 2.5rem;
border-radius: 12px;
position: sticky;
top: calc(var(--navbar-height) + 2rem);
}
.dagprogramma-info h3 {
color: var(--white);
margin-bottom: 1rem;
}
.dagprogramma-info p {
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.9);
}
.dagprogramma-options {
list-style: none;
margin-bottom: 2rem;
}
.dagprogramma-options li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: rgba(255, 255, 255, 0.9);
}
.dagprogramma-options i {
color: var(--accent-amber);
}
/* Event Types */
.event-types-section {
padding: 5rem 0;
background: var(--off-white);
}
.event-types-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}
.event-type-card {
background: var(--white);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
}
.event-type-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.event-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.event-icon i {
font-size: 2rem;
color: var(--accent-amber);
}
.event-type-card h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.event-features {
list-style: none;
margin-top: 1.5rem;
}
.event-features li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--grey-dark);
}
.event-features i {
color: var(--accent-amber);
margin-top: 0.25rem;
}
/* Services & Capaciteiten */
.services-section,
.capaciteiten-section {
padding: 5rem 0;
}
.services-section {
background: var(--white);
}
.capaciteiten-section {
background: var(--off-white);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.service-card {
text-align: center;
padding: 2rem;
background: var(--off-white);
border-radius: 8px;
transition: var(--transition-base);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.service-card i {
font-size: 3rem;
color: var(--accent-amber);
margin-bottom: 1rem;
}
.service-card h4 {
margin-bottom: 0.75rem;
}
.service-card p {
color: var(--grey-mid);
font-size: 0.95rem;
margin: 0;
}
.capaciteiten-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.capaciteit-card {
background: var(--white);
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.capaciteit-card h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.capaciteit-card h3 i {
color: var(--accent-amber);
}
.capaciteit-card ul {
list-style: none;
}
.capaciteit-card ul li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--grey-light);
color: var(--grey-dark);
}
.capaciteit-card ul li:last-child {
border-bottom: none;
}
/* Trouwen */
.waarom-trouwen-section {
padding: 5rem 0;
background: var(--off-white);
}
.waarom-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.waarom-card {
background: var(--white);
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
}
.waarom-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.waarom-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.waarom-icon i {
font-size: 1.75rem;
color: var(--accent-amber);
}
.waarom-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.waarom-card p {
color: var(--grey-mid);
margin: 0;
}
.trouwdag-section {
padding: 5rem 0;
background: var(--white);
}
.trouwdag-timeline {
display: flex;
flex-direction: column;
gap: 3rem;
}
.trouwdag-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 2rem;
align-items: start;
}
.trouwdag-number {
width: 60px;
height: 60px;
background: var(--accent-amber);
color: var(--primary-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
flex-shrink: 0;
}
.trouwdag-content h3 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 2rem;
margin-bottom: 1rem;
}
.trouwdag-content h3 i {
color: var(--accent-amber);
}
.trouwdag-content ul {
list-style: none;
margin-top: 1rem;
}
.trouwdag-content ul li {
padding: 0.5rem 0;
color: var(--grey-dark);
}
.trouw-arrangementen {
padding: 5rem 0;
background: var(--off-white);
}
.arrangement-guests {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--accent-amber);
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 1rem;
}
.arrangement-description {
color: var(--grey-mid);
margin-bottom: 1.5rem;
}
.arrangement-note {
margin-top: 3rem;
padding: 1.5rem;
background: var(--primary-blue-tint);
border-left: 4px solid var(--accent-amber);
border-radius: 0 8px 8px 0;
}
.arrangement-note p {
color: var(--primary-blue);
margin: 0;
}
.catering-opties-section {
padding: 5rem 0;
background: var(--white);
}
.catering-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.catering-card {
background: var(--off-white);
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.catering-card h3 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
font-size: 1.75rem;
}
.catering-card h3 i {
color: var(--accent-amber);
}
.catering-card ul {
list-style: none;
}
.catering-card ul li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--grey-light);
color: var(--grey-dark);
}
.catering-card ul li:last-child {
border-bottom: none;
}
.praktisch-section {
padding: 5rem 0;
background: var(--primary-blue);
color: var(--white);
}
.praktisch-section h2 {
color: var(--white);
text-align: center;
margin-bottom: 3rem;
}
.praktisch-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.praktisch-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.praktisch-card h4 {
color: var(--white);
margin-bottom: 1rem;
font-size: 1.25rem;
}
.praktisch-card h4 i {
color: var(--accent-amber);
margin-right: 0.5rem;
}
.praktisch-card p {
color: rgba(255, 255, 255, 0.9);
margin: 0;
line-height: 1.6;
}
/* Links op de donkerblauwe kaart erven wit en zijn dan niet van gewone
tekst te onderscheiden. Amber plus onderstreping maakt ze zichtbaar. */
.praktisch-card a {
color: var(--accent-amber-light);
text-decoration: underline;
font-weight: 600;
}
.praktisch-card a:hover,
.praktisch-card a:focus-visible {
color: var(--white);
}
/* =====================================================
RESPONSIVE DESIGN
===================================================== */
@media (max-width: 968px) {
:root {
--section-padding: 60px;
--navbar-height: 70px;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
/* Logo responsive */
.logo-image {
height: 50px;
}
.logo-text {
font-size: 2rem;
}
.logo-subtitle {
font-size: 0.75rem;
}
.nav-menu {
position: fixed;
top: var(--navbar-height);
right: -100%;
width: 280px;
height: calc(100vh - var(--navbar-height));
background: var(--primary-blue);
flex-direction: column;
padding: 2rem;
gap: 1rem;
transition: var(--transition-smooth);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
}
.nav-menu.active {
right: 0;
}
.mobile-menu-toggle {
display: flex;
}
/* Dropdown in mobile */
.nav-dropdown {
width: 100%;
}
.nav-dropdown > .nav-link {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(255, 255, 255, 0.1);
margin: 0.5rem 0 0 0;
border-radius: 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0;
}
.nav-dropdown.active .dropdown-menu {
max-height: 400px;
padding: 0.5rem 0;
}
.dropdown-menu a {
color: rgba(255, 255, 255, 0.9);
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
.dropdown-menu a:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--accent-amber);
padding-left: 1.5rem;
}
.page-title {
font-size: 2.5rem;
}
.page-hero .container,
.page-hero .hero-content {
max-width: 100%;
}
.intro-content,
.dagprogramma-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.vergader-card,
.vergader-card:nth-child(even) {
grid-template-columns: 1fr;
}
.vergader-card:nth-child(even) .vergader-image {
order: 0;
}
.vergader-image {
min-height: 300px;
}
.vergader-content {
padding: 2rem;
}
.trouwdag-item {
grid-template-columns: 1fr;
gap: 1rem;
}
.trouwdag-number {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.dagprogramma-info {
position: static;
}
/* Floating offerte button - adjust for tablet */
.floating-offerte {
bottom: 1.5rem;
right: 5rem;
padding: 0.9rem 1.75rem;
font-size: 0.95rem;
}
.hero-title-big {
font-size: 3rem;
}
.verhaal-content,
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.ruimtes-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
:root {
--section-padding: 40px;
}
.container {
padding: 0 1.5rem;
}
h2 { font-size: 2rem; }
/* Logo smaller on small mobile */
.logo-image {
height: 45px;
}
.logo-text {
font-size: 1.75rem;
}
.logo-subtitle {
font-size: 0.7rem;
}
/* Floating offerte button - smaller on mobile */
.floating-offerte {
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.floating-offerte span {
display: none; /* Hide text, show only icon on very small screens */
}
.floating-offerte {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 0;
justify-content: center;
}
.floating-offerte i {
margin: 0;
}
/* Back to top smaller */
.back-to-top {
bottom: 1rem;
right: 1rem;
width: 45px;
height: 45px;
display: none; /* Hide back to top on small mobile to avoid clutter */
}
.hero-title-small {
font-size: 1.5rem;
}
.hero-title-big {
font-size: 2.25rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-buttons {
flex-direction: column;
}
.btn {
width: 100%;
text-align: center;
}
.mogelijkheden-grid,
.voordelen-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ============================================================
CMS CLOAK — voorkomt "flash of old content"
Verbergt hardcoded fallback in voordelen, ruimtes en timeline
tot content-loader.js de container .cms-loaded heeft gemaakt.
Failsafe: watchdog in verwijdert .cms-loading na 2s.
============================================================ */
/* De teksten in de header staan hardcoded in de HTML en worden hier
BEWUST niet verborgen. Ze verbergen tot het CMS geladen is maakte de
grootste tekst in beeld pas na seconden zichtbaar — Google mat daardoor
een LCP van bijna 19 seconden op mobiel. Een korte flits oude tekst na
een CMS-wijziging is een betere ruil dan een lege header bij elk bezoek. */
html.cms-loading .voordelen-grid > .voordeel-item,
html.cms-loading .ruimtes-grid > .ruimte-card,
html.cms-loading .verhaal-timeline > .timeline-item,
html.cms-loading .intro-section .intro-text > h2,
html.cms-loading .intro-section .intro-text > p,
html.cms-loading .activiteiten-grid > .activiteit-card,
html.cms-loading .arrangements-grid > .arrangement-card {
opacity: 0;
}
html.cms-loading .voordelen-grid.cms-loaded > .voordeel-item,
html.cms-loading .ruimtes-grid.cms-loaded > .ruimte-card,
html.cms-loading .verhaal-timeline.cms-loaded > .timeline-item,
html.cms-loading .hero-title-small.cms-loaded,
html.cms-loading .hero-title-big.cms-loaded,
html.cms-loading .hero-subtitle.cms-loaded,
html.cms-loading .page-hero .page-title.cms-loaded,
html.cms-loading .page-hero .page-subtitle.cms-loaded,
html.cms-loading .intro-section .intro-text.cms-loaded > h2,
html.cms-loading .intro-section .intro-text.cms-loaded > p,
html.cms-loading .activiteiten-grid.cms-loaded > .activiteit-card,
html.cms-loading .arrangements-grid.cms-loaded > .arrangement-card {
opacity: 1;
transition: opacity 0.15s ease-in;
}
/* ============================================================
RUIMTE-DETAIL PAGINA + GALERIJ + LIGHTBOX
============================================================ */
/* "Bekijk galerij" link — gebruikt .btn.btn-primary voor de gele tegel-stijl,
maar dan compacter. Bewust kleiner dan de primaire CTA's — dit is een
secundaire actie binnen de kaart. */
.ruimte-gallery-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
padding: 0.55rem 1.25rem;
font-size: 0.8rem;
letter-spacing: 0.04em;
}
.ruimte-gallery-link i {
font-size: 0.9em;
}
/* Feature-rij op detailpagina intro */
.intro-content-single {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.intro-content-single .lead {
font-size: 1.25rem;
color: var(--primary-blue);
margin-bottom: 24px;
line-height: 1.6;
}
.feature-row {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.feature-row .feature-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--primary-blue-tint);
border-radius: 20px;
font-size: 0.9rem;
color: var(--primary-blue);
}
.feature-row .feature-item i { color: var(--accent-amber); }
/* Galerij sectie */
.ruimte-gallery-section {
padding: var(--section-padding) 0;
background: var(--off-white);
}
.ruimte-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.ruimte-gallery-item {
margin: 0;
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: var(--transition-base);
}
.ruimte-gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.ruimte-gallery-item img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.ruimte-gallery-item:hover img { transform: scale(1.05); }
.ruimte-gallery-item figcaption {
padding: 12px 16px;
font-size: 0.9rem;
color: var(--grey-dark);
background: var(--white);
border-top: 1px solid var(--grey-light);
}
/* Body sectie (opstellingen, kenmerken uit markdown) */
.ruimte-body-section {
padding: var(--section-padding) 0;
background: var(--white);
}
/* Lopend artikel (zoals de pagina over de geschiedenis van het Zwitsalterrein).
Deelt de typografie met .ruimte-detail-body, maar NIET de kolommenlayout:
die zet elke in dezelfde grid-rij, wat bij een artikel met veel alinea's
alles over elkaar heen legt. */
.artikel-body {
max-width: 780px;
margin: 0 auto;
}
.artikel-body .lead {
font-size: 1.15rem;
line-height: 1.75;
color: var(--grey-dark);
margin-bottom: 2rem;
}
.artikel-body h2 {
margin-top: 3rem;
}
.ruimte-detail-body {
max-width: 1100px;
margin: 0 auto;
/* Kenmerken / Opstellingen / Ideaal voor naast elkaar in drie kolommen.
De loader levert:
intro, dan afwisselend
en .
Rij 1 = intro over de volle breedte, rij 2 = koppen, rij 3 = lijsten. */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
column-gap: 2.5rem;
align-items: start;
}
.ruimte-detail-body > p {
grid-column: 1 / -1;
grid-row: 1;
max-width: 800px;
}
.ruimte-detail-body > h2 { grid-row: 2; align-self: end; }
.ruimte-detail-body > ul { grid-row: 3; }
.ruimte-detail-body > h2:nth-of-type(1),
.ruimte-detail-body > ul:nth-of-type(1) { grid-column: 1; }
.ruimte-detail-body > h2:nth-of-type(2),
.ruimte-detail-body > ul:nth-of-type(2) { grid-column: 2; }
.ruimte-detail-body > h2:nth-of-type(3),
.ruimte-detail-body > ul:nth-of-type(3) { grid-column: 3; }
/* Een eventuele vierde sectie valt netjes onder kolom 1 in plaats van weg. */
.ruimte-detail-body > h2:nth-of-type(n+4) { grid-row: 4; grid-column: 1 / -1; }
.ruimte-detail-body > ul:nth-of-type(n+4) { grid-row: 5; grid-column: 1 / -1; }
/* Tablet en mobiel: gewoon onder elkaar */
@media (max-width: 900px) {
.ruimte-detail-body {
display: block;
max-width: 800px;
}
}
.ruimte-detail-body h1,
.ruimte-detail-body h2,
.artikel-body h1,
.artikel-body h2 {
font-family: var(--font-display);
color: var(--primary-blue);
letter-spacing: 0.02em;
margin: 2.5rem 0 1rem;
font-size: 1.6rem;
}
.ruimte-detail-body h3,
.artikel-body h3 {
font-family: var(--font-display);
color: var(--primary-blue);
letter-spacing: 0.02em;
margin: 1.5rem 0 0.75rem;
font-size: 1.5rem;
}
.ruimte-detail-body p,
.artikel-body p { margin-bottom: 1rem; line-height: 1.7; }
.ruimte-detail-body ul,
.artikel-body ul {
list-style: none;
padding: 0;
margin-bottom: 1rem;
}
.ruimte-detail-body ul li,
.artikel-body ul li {
padding: 6px 0 6px 28px;
position: relative;
}
.ruimte-detail-body ul li::before,
.artikel-body ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--accent-amber);
position: absolute;
left: 0;
top: 8px;
font-size: 0.85rem;
}
/* CTA sectie op detailpagina */
.cta-section {
padding: var(--section-padding) 0;
background: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-amber-dark) 100%);
color: var(--primary-blue);
text-align: center;
}
.cta-section h2 {
font-family: var(--font-display);
font-size: 2.5rem;
letter-spacing: 0.02em;
margin-bottom: 1rem;
color: var(--primary-blue);
}
.cta-section p { margin-bottom: 2rem; font-size: 1.1rem; }
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .btn-secondary {
color: var(--primary-blue);
border-color: var(--primary-blue);
background: transparent;
}
.cta-section .btn-secondary:hover {
background: var(--primary-blue);
color: var(--white);
}
/* Andere ruimtes sectie */
.andere-ruimtes-section {
padding: var(--section-padding) 0;
background: var(--off-white);
}
.andere-ruimtes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.andere-ruimte-card {
padding: 32px 24px;
background: var(--white);
border-radius: 8px;
text-decoration: none;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
text-align: center;
display: block;
}
.andere-ruimte-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.andere-ruimte-card h3 {
font-family: var(--font-display);
font-size: 1.75rem;
color: var(--primary-blue);
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.andere-ruimte-card p {
color: var(--grey-dark);
margin: 0;
font-size: 0.95rem;
}
/* Lightbox */
.gallery-lightbox {
position: fixed;
inset: 0;
background: rgba(13, 31, 45, 0.94);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.gallery-lightbox[hidden] { display: none; }
.lightbox-image {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
color: var(--off-white);
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 4px;
font-size: 0.95rem;
max-width: 80vw;
text-align: center;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.3);
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
transition: var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: var(--accent-amber);
color: var(--primary-blue);
border-color: var(--accent-amber);
}
.lightbox-close { top: 24px; right: 24px; font-size: 2rem; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
/* Mobile responsive */
@media (max-width: 768px) {
.ruimte-gallery-grid { grid-template-columns: 1fr; }
.ruimte-gallery-item img { height: 200px; }
.lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
.lightbox-prev { left: 8px; width: 40px; height: 40px; }
.lightbox-next { right: 8px; width: 40px; height: 40px; }
.lightbox-image { max-width: 95vw; max-height: 70vh; }
.cta-section h2 { font-size: 1.75rem; }
.cta-buttons { flex-direction: column; align-items: stretch; }
}
/* ============================================================
RUIMTE-MOGELIJKHEDEN SECTIE (op /ruimtes/*.html)
Toont per ruimte de activiteiten die daar mogelijk zijn.
============================================================ */
.ruimte-mogelijkheden-section {
padding: var(--section-padding) 0;
background: var(--white);
}
.ruimte-mogelijkheden-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
.ruimte-mogelijkheid-tile {
display: block;
padding: 28px 24px;
background: var(--off-white);
border-radius: 8px;
text-decoration: none;
transition: var(--transition-base);
border-top: 3px solid var(--accent-amber);
text-align: center;
}
.ruimte-mogelijkheid-tile:hover {
background: var(--white);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(27, 61, 85, 0.15);
}
.ruimte-mogelijkheid-tile i {
font-size: 2rem;
color: var(--accent-amber);
margin-bottom: 14px;
display: block;
}
.ruimte-mogelijkheid-tile h3 {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--primary-blue);
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.ruimte-mogelijkheid-tile p {
color: var(--grey-dark);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* ============================================================
FLOATING ABA-BADGE (Apeldoorn Business Awards)
Kleine thumbnail boven de Offerte-knop rechtsonder.
============================================================ */
.floating-aba {
position: fixed;
bottom: 6.5rem;
right: 6rem;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
transition: var(--transition-base);
z-index: 997;
}
.floating-aba img {
height: 110px;
width: auto;
display: block;
}
.floating-aba:hover {
transform: translateY(-4px) scale(1.05);
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}
@media (max-width: 640px) {
.floating-aba {
bottom: 5.5rem;
right: 1rem;
}
.floating-aba img {
height: 80px;
}
}
/* =====================================================
ALGEMENE VOORWAARDEN / PRIVACYVERKLARING
===================================================== */
.vw-inhoud {
background: var(--off-white);
border-left: 4px solid var(--accent-amber);
border-radius: 8px;
padding: 1.5rem 1.75rem;
margin-bottom: 1rem;
}
.vw-inhoud-kop {
font-family: var(--font-display);
font-size: 1.35rem;
letter-spacing: 0.04em;
color: var(--primary-blue);
margin: 0 0 0.75rem;
}
.vw-inhoud ol {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 2rem;
}
.vw-inhoud li {
margin-bottom: 0.35rem;
break-inside: avoid;
}
.vw-inhoud a {
color: var(--primary-blue);
font-weight: 600;
text-decoration: underline;
}
.artikel-body h2[id] {
scroll-margin-top: calc(var(--navbar-height) + 1rem);
}
.vw-lid {
padding-left: 3.25rem;
text-indent: -3.25rem;
margin-bottom: 0.9rem;
}
.vw-nr {
display: inline-block;
min-width: 3.25rem;
text-indent: 0;
font-weight: 600;
color: var(--primary-blue);
}
.vw-opsomming {
margin: 0 0 1rem 3.25rem;
}
.artikel-body ul {
margin: 0 0 1.25rem 1.25rem;
}
.artikel-body ul li {
margin-bottom: 0.4rem;
}
.artikel-body h3 {
margin: 1.75rem 0 0.6rem;
font-size: 1.35rem;
}
@media (max-width: 600px) {
.vw-inhoud ol { columns: 1; }
.vw-lid { padding-left: 0; text-indent: 0; }
.vw-nr { display: inline; min-width: 0; margin-right: 0.35rem; }
.vw-opsomming { margin-left: 1.25rem; }
}
/* Juridische links onderin de footer. Erven anders de kleur van de tekst
en zijn dan niet als link te herkennen. */
.footer-juridisch {
display: inline-block;
margin-left: 0.5rem;
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.85);
text-decoration: underline;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
color: var(--accent-amber);
}
/* 'Volg ons' onder de contactgegevens, op pagina's waar een vijfde kolom niet past. */
.footer-col .footer-volg {
margin-top: 1.75rem;
}