/* Anchor scroll-offset: voorkomt dat hash-links (#sectie) verborgen raken achter de sticky navigatiebalk. Eén mechanisme (scroll-padding-top op de scroll-container) ter grootte van de nav (~98px) + wat lucht. LET OP: combineer dit NIET met scroll-margin-top op de targets, anders tellen beide offsets op en ontstaat een te grote gap. */ html, body { scroll-padding-top: 110px; scroll-behavior: smooth; } /* Per-anker fallback: scroll-margin-top is hier bewust 0 — de offset wordt volledig door scroll-padding-top hierboven geregeld. Een waarde hier zou bij de container-padding optellen en een dubbele gap geven. */ :target { scroll-margin-top: 0; } /* Artikel-headings (h2/h3 in WP-posts): geen eigen scroll-margin meer, zie toelichting hierboven — scroll-padding-top dekt de offset. */ .article-content h2, .article-content h3, [id]:not(body):not(html) { scroll-margin-top: 0; } :root { --navy: #1C1B4F; --navy-70: rgba(28, 27, 79, 0.7); --navy-50: rgba(28, 27, 79, 0.5); --navy-20: rgba(28, 27, 79, 0.2); --navy-10: rgba(28, 27, 79, 0.1); --navy-05: rgba(28, 27, 79, 0.05); --c-cyan: #29B8E5; --c-magenta: #E5197F; --c-orange: #F39B3A; --c-green: #8BC442; --c-yellow: #F5D16A; --c-purple: #6E4B9E; --c-pink: #F29AB8; --bg: #FAF8F3; --bg-alt: #F1EEE5; --card: #FFFFFF; --ink: #1C1B4F; --ink-soft: #4A4970; --line: rgba(28, 27, 79, 0.12); --radius: 18px; --radius-sm: 10px; --radius-lg: 28px; } /* ============================================================ MEDEDELINGSBALK — tijdelijke patiëntenstop e.d. JS-geïnjecteerd (zie shared.js) bovenaan , vóór de nav, zodat we de 100+ statische pagina's niet hoeven aan te raken. ============================================================ */ .notice-bar { background: var(--c-magenta); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.22); } .notice-bar-inner { max-width: 1240px; margin: 0 auto; padding: 13px 32px; display: flex; align-items: flex-start; gap: 14px; } .notice-ic { width: 23px; height: 23px; flex-shrink: 0; margin-top: 1px; stroke: #fff; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; } .notice-text { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; text-wrap: pretty; } .notice-text strong { font-weight: 600; } .notice-text a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; white-space: nowrap; } .notice-text a:hover { color: var(--navy); } .notice-close { flex-shrink: 0; margin-left: auto; align-self: center; width: 32px; height: 32px; border: none; border-radius: 9px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.18s ease; } .notice-close:hover { background: rgba(255, 255, 255, 0.3); } .notice-close:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; } @media (max-width: 700px) { .notice-bar-inner { padding: 11px 20px; gap: 11px; } .notice-text { font-size: 13.5px; } .notice-text a { white-space: normal; } .notice-ic { width: 20px; height: 20px; } .notice-close { width: 28px; height: 28px; font-size: 19px; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; font-weight: 400; color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 17px; overflow-x: hidden; } .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; } /* ============= NAV ============= */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(250, 248, 243, 0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; max-width: 1360px; margin: 0 auto; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo img { height: 40px; width: auto; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; transition: color 0.2s; } .nav-links a:hover { color: var(--c-magenta); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--c-magenta); transition: width 0.25s; } .nav-links a:hover::after { width: 100%; } /* Dropdown */ .nav-links li { position: relative; } .nav-links .has-submenu > a::before { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-right: 6px; margin-left: -2px; opacity: 0.6; transition: transform 0.2s; } .nav-links .has-submenu:hover > a::before { transform: rotate(45deg) translateY(0); opacity: 1; } .nav-submenu { position: absolute; top: 100%; left: -16px; margin-top: 6px; background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 240px; list-style: none; box-shadow: 0 16px 40px rgba(28,27,79,0.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 10; } .nav-links .has-submenu:hover .nav-submenu, .nav-links .has-submenu:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-submenu li { padding: 0; } .nav-submenu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); line-height: 1.35; } .nav-submenu a::after { display: none; } .nav-submenu a:hover { background: var(--bg-alt); color: var(--c-magenta); } .nav-submenu .submenu-eyebrow { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 14px 4px; font-weight: 500; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: white; padding: 10px 20px; border-radius: 100px; font-weight: 500; font-size: 14px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(28,27,79,0.25); } /* ============= HAMBURGER + MOBILE NAV ============= */ /* De hamburger zelf wordt door shared.js geïnjecteerd; op desktop verbergen we hem. */ .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 12px; margin-right: -12px; position: relative; width: 48px; height: 48px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; } body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-burger span:nth-child(2) { opacity: 0; } body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Slide-in paneel sluitknop — verborgen op desktop */ .nav-mobile-close { display: none; } /* Overlay (donkere laag) — alleen actief als nav-open */ .nav-overlay { position: fixed; inset: 0; background: rgba(28,27,79,0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; z-index: 199; } body.nav-open .nav-overlay { opacity: 1; visibility: visible; } /* ============= HERO ============= */ .hero { position: relative; padding: 80px 0 120px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 28px; } .hero-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--c-magenta); } .hero h1 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.025em; color: var(--navy); margin-bottom: 28px; } .hero h1 .accent { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; color: var(--c-magenta); } .hero p { font-size: 19px; color: var(--ink-soft); max-width: 520px; margin-bottom: 40px; line-height: 1.6; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: white; padding: 16px 28px; border-radius: 100px; font-weight: 500; font-size: 15px; text-decoration: none; transition: all 0.25s; border: none; cursor: pointer; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(28,27,79,0.25); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); padding: 16px 8px; font-weight: 500; font-size: 15px; text-decoration: none; transition: gap 0.2s; } .btn-ghost:hover { gap: 14px; color: var(--c-magenta); } .hero-stats { display: flex; gap: 48px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); } .stat-num { font-size: 32px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; display: block; margin-bottom: 4px; } .stat-label { font-size: 13px; color: var(--ink-soft); } /* Hero visual — abstract composition with brand colors */ .hero-visual { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #F1EEE5, #E6E0D0); } .hero-visual-inner { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; padding: 14px; } .hero-tile { border-radius: var(--radius); overflow: hidden; position: relative; display: flex; align-items: flex-end; padding: 20px; color: white; font-size: 13px; font-weight: 500; } .hero-tile-1 { background: var(--c-cyan); grid-column: 1; grid-row: 1; } .hero-tile-2 { background: var(--c-orange); grid-column: 2; grid-row: 1 / span 2; } .hero-tile-3 { background: var(--c-magenta); grid-column: 1; grid-row: 2; } .hero-tile-photo { background: var(--c-purple); overflow: hidden; } .hero-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-tile-photo::before { content: ''; display: none; position: absolute; top: 12px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.75; letter-spacing: 0.04em; } .hero-badge { position: absolute; background: white; padding: 14px 18px; border-radius: 100px; box-shadow: 0 12px 40px rgba(28,27,79,0.15); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--navy); } .hero-badge-1 { top: 24%; left: -30px; animation: float 6s ease-in-out infinite; } .hero-badge-2 { bottom: 18%; right: -20px; animation: float 6s ease-in-out infinite 3s; } .badge-dot { width: 10px; height: 10px; border-radius: 50%; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Confetti dots — playful brand accents */ .confetti { position: absolute; pointer-events: none; } .confetti-hero-1 { top: 40px; left: 10%; width: 18px; height: 18px; background: var(--c-yellow); border-radius: 50%; } .confetti-hero-2 { top: 60px; right: 45%; width: 12px; height: 12px; background: var(--c-green); border-radius: 50%; } .confetti-hero-3 { bottom: 60px; left: 42%; width: 14px; height: 14px; background: var(--c-magenta); border-radius: 50%; } /* ============= SECTION HEADER ============= */ .section { padding: 120px 0; position: relative; } .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; } .section-eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; } .section-title { font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 20px; max-width: 720px; } .section-title .accent { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; } .section-intro { font-size: 19px; color: var(--ink-soft); max-width: 640px; line-height: 1.6; } .section-header { margin-bottom: 64px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; } /* ============= AANPAK ============= */ .aanpak { background: var(--bg-alt); } .aanpak-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step { background: white; border-radius: var(--radius); padding: 32px 28px; border: 1px solid var(--line); position: relative; transition: transform 0.3s, box-shadow 0.3s; } .step:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(28,27,79,0.08); } .step-num { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: white; margin-bottom: 24px; font-variant-numeric: tabular-nums; } .step:nth-child(1) .step-num { background: var(--c-cyan); } .step:nth-child(2) .step-num { background: var(--c-magenta); } .step:nth-child(3) .step-num { background: var(--c-orange); } .step:nth-child(4) .step-num { background: var(--c-green); } .step h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; } .step p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; } /* ============= DIENSTEN ============= */ .diensten { background: var(--bg); } .diensten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .dienst { border-radius: var(--radius-lg); padding: 56px 48px; position: relative; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s; } .dienst:hover { transform: translateY(-4px); } .dienst-msr { background: var(--navy); color: white; } .dienst-sggz { background: var(--c-magenta); color: white; } .dienst-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); margin-bottom: 28px; align-self: flex-start; } .dienst h3 { font-size: 42px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 16px; } .dienst h3 .sub { display: block; font-size: 18px; font-weight: 400; opacity: 0.8; margin-top: 6px; font-family: 'Fraunces', serif; font-style: italic; } .dienst p { font-size: 16px; opacity: 0.85; max-width: 420px; margin-bottom: 32px; } .dienst-list { list-style: none; margin-bottom: 36px; } .dienst-list li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.2); font-size: 15px; display: flex; align-items: center; gap: 12px; } .dienst-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; } .dienst-link { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 500; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 4px; align-self: flex-start; transition: gap 0.2s; } .dienst-link:hover { gap: 14px; } .dienst-shape { position: absolute; pointer-events: none; } .dienst-msr .dienst-shape { right: -40px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--c-cyan), transparent 60%); opacity: 0.6; } .dienst-sggz .dienst-shape { right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); } /* ============= INTEGRALE ZORG ============= */ .integraal { background: var(--navy); color: white; padding: 140px 0; position: relative; overflow: hidden; } .integraal .section-title { color: white; } .integraal .section-eyebrow { color: rgba(255,255,255,0.6); } .integraal-quote { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -0.015em; max-width: 900px; margin-bottom: 48px; } .integraal-quote .hl { background: linear-gradient(120deg, transparent 0%, transparent 2%, var(--c-magenta) 2%, var(--c-magenta) 98%, transparent 98%); background-size: 100% 40%; background-position: 0 85%; background-repeat: no-repeat; color: white; padding: 0 4px; } .integraal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; } .integraal-col h4 { font-size: 22px; font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; } .integraal-col h4::before { content: ''; width: 14px; height: 14px; border-radius: 50%; } .integraal-col:nth-child(1) h4::before { background: var(--c-cyan); } .integraal-col:nth-child(2) h4::before { background: var(--c-magenta); } .integraal-col p { opacity: 0.8; font-size: 16px; line-height: 1.7; } /* Decorative diagonal */ .integraal-deco { position: absolute; right: -100px; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; opacity: 0.08; pointer-events: none; } /* ============= LOCATIES ============= */ .locaties { background: var(--bg-alt); } .locaties-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .locatie { background: white; border-radius: var(--radius); padding: 0; overflow: hidden; border: 1px solid var(--line); transition: transform 0.25s, box-shadow 0.25s; } .locatie:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(28,27,79,0.08); } .locatie-img { aspect-ratio: 16 / 10; position: relative; overflow: hidden; } .locatie-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .locatie-img-pl { aspect-ratio: 16 / 10; position: relative; overflow: hidden; } .locatie:nth-child(1) .locatie-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-cyan); } .locatie:nth-child(2) .locatie-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-orange); } .locatie:nth-child(3) .locatie-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-green); } .locatie:nth-child(4) .locatie-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-magenta); } .locatie-img::after { content: 'foto — locatie exterieur'; position: absolute; top: 14px; left: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.75); letter-spacing: 0.04em; } .locatie-img:has(img)::after, .locatie-img:has(image-slot)::after { display: none; } .locatie-body { padding: 24px 24px 28px; } .locatie-city { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .locatie-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; } .locatie-addr { font-size: 14px; color: var(--ink-soft); line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--line); } /* ============= ERVARINGEN ============= */ .ervaringen { background: var(--bg); } .ervaringen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .quote-card { background: white; border-radius: var(--radius); padding: 36px 32px; border: 1px solid var(--line); display: flex; flex-direction: column; position: relative; } .quote-card:nth-child(1) { border-top: 4px solid var(--c-cyan); } .quote-card:nth-child(2) { border-top: 4px solid var(--c-magenta); } .quote-card:nth-child(3) { border-top: 4px solid var(--c-orange); } .quote-mark { font-family: 'Fraunces', serif; font-size: 56px; line-height: 0.5; color: var(--navy-20); margin-bottom: 20px; } .quote-text { font-size: 17px; line-height: 1.55; color: var(--ink); margin-bottom: 28px; flex: 1; } .quote-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); } .quote-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-10); display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--navy); font-size: 14px; } .quote-meta { font-size: 14px; } .quote-meta strong { display: block; font-weight: 500; } .quote-meta span { color: var(--ink-soft); font-size: 13px; } /* Featured portrait — face highlighted, ringed by accent color */ .quote-portrait { position: relative; width: 124px; height: 124px; margin: 4px 0 24px; flex-shrink: 0; } .quote-portrait-img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--navy-10); } .quote-portrait-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } /* "Bijpassend figuur" — offset color disc behind the portrait */ .quote-portrait::before { content: ''; position: absolute; z-index: 1; inset: -6px -6px 10px 10px; border-radius: 50%; background: var(--accent, var(--c-cyan)); } /* Small accent dot for extra "confetti" character */ .quote-portrait::after { content: ''; position: absolute; z-index: 3; width: 14px; height: 14px; border-radius: 50%; top: 6px; right: -2px; background: var(--accent-2, var(--c-orange)); } .quote-portrait-cyan { --accent: var(--c-cyan); --accent-2: var(--c-magenta); } .quote-portrait-magenta { --accent: var(--c-magenta); --accent-2: var(--c-cyan); } /* Mini photo avatar for the author line */ .quote-avatar.has-photo { background: transparent; overflow: hidden; padding: 0; } .quote-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; border-radius: 50%; } /* ============= NIEUWS ============= */ .nieuws { background: var(--bg-alt); } .nieuws-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; } .nieuws-card { background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform 0.25s; text-decoration: none; color: inherit; } .nieuws-card:hover { transform: translateY(-3px); } .nieuws-img { aspect-ratio: 16 / 10; position: relative; } .nieuws-card:nth-child(1) .nieuws-img { background: var(--c-purple); aspect-ratio: 16 / 11; } .nieuws-card:nth-child(2) .nieuws-img { background: var(--c-cyan); } .nieuws-card:nth-child(3) .nieuws-img { background: var(--c-orange); } .nieuws-img::after { content: 'foto'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; text-transform: uppercase; } .nieuws-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; } .nieuws-meta { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; } .nieuws-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 14px; } .nieuws-card:nth-child(1) .nieuws-title { font-size: 26px; } .nieuws-excerpt { font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; } .nieuws-more { margin-top: 20px; font-size: 13px; font-weight: 500; color: var(--c-magenta); } /* ============= FAQ ============= */ .faq { background: var(--bg); } .faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: flex-start; } .faq-side { position: sticky; top: 100px; } .faq-side .section-title { margin-bottom: 20px; } .faq-item { border-top: 1px solid var(--line); padding: 24px 0; cursor: pointer; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 18px; font-weight: 500; color: var(--navy); line-height: 1.35; } .faq-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s, background 0.2s; font-size: 18px; line-height: 1; color: var(--navy); } .faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--c-magenta); color: white; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, margin 0.35s ease; font-size: 15px; color: var(--ink-soft); line-height: 1.6; } .faq-item.open .faq-a { max-height: 300px; margin-top: 16px; } /* ============= CONTACT ============= */ .contact { background: var(--navy); color: white; padding: 120px 0; position: relative; overflow: hidden; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; position: relative; z-index: 2; } .contact h2 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 24px; color: white; } .contact h2 .accent { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; color: var(--c-yellow); } .contact-intro { font-size: 18px; opacity: 0.8; margin-bottom: 40px; max-width: 440px; line-height: 1.6; } .contact-ways { display: flex; flex-direction: column; gap: 16px; } .contact-way { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; text-decoration: none; color: white; transition: background 0.2s, transform 0.2s; } .contact-way:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); } .contact-way-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-way:nth-child(1) .contact-way-icon { background: var(--c-cyan); } .contact-way:nth-child(2) .contact-way-icon { background: var(--c-magenta); } .contact-way:nth-child(3) .contact-way-icon { background: var(--c-orange); } .contact-way-text .label { font-size: 12px; opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 2px; } .contact-way-text .val { font-size: 16px; font-weight: 500; } .contact-form { background: white; color: var(--navy); padding: 40px 36px; border-radius: var(--radius-lg); } .contact-form h3 { font-size: 22px; font-weight: 600; margin-bottom: 6px; } .contact-form p { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .form-field { margin-bottom: 12px; } .form-field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--ink-soft); } .form-field input, .form-field select, .form-field textarea { width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--navy); transition: border-color 0.2s, background 0.2s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--c-magenta); background: white; } .form-field textarea { resize: vertical; min-height: 90px; } .form-submit { width: 100%; padding: 14px; background: var(--navy); color: white; border: none; border-radius: 100px; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: background 0.2s, transform 0.2s; } .form-submit:hover { background: var(--c-magenta); transform: translateY(-1px); } /* ============= FOOTER ============= */ .footer { background: #12113A; color: white; padding: 72px 0 32px; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 56px; } .footer-brand img { height: 72px; margin-bottom: 20px; background: white; padding: 10px 14px; border-radius: 10px; } .footer-brand p { font-size: 14px; opacity: 0.7; max-width: 300px; line-height: 1.6; } .footer-col h5 { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; margin-bottom: 20px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-col a { color: white; text-decoration: none; font-size: 15px; opacity: 0.85; transition: opacity 0.2s, color 0.2s; } .footer-col a:hover { opacity: 1; color: var(--c-yellow); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; opacity: 0.6; flex-wrap: wrap; gap: 12px; } /* ============= TWEAKS PANEL ============= */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; width: 300px; background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); border: 1px solid var(--line); z-index: 1000; padding: 20px; display: none; } .tweaks-panel.active { display: block; } .tweaks-panel h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; } .tweaks-panel h4 small { font-size: 11px; font-weight: 400; opacity: 0.5; font-variant-numeric: tabular-nums; } .tweaks-panel .hint { font-size: 12px; opacity: 0.6; margin-bottom: 16px; } .tweak-row { margin-bottom: 14px; } .tweak-row > label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; display: block; margin-bottom: 6px; } .tweak-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .tweak-variant { padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: white; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-align: center; transition: all 0.15s; color: var(--navy); } .tweak-variant:hover { border-color: var(--navy-50); } .tweak-variant.active { border-color: var(--navy); background: var(--navy); color: white; } .tweak-swatches { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; } .tweak-swatch { width: 10px; height: 10px; border-radius: 50%; } /* ======= VARIATION: EDITORIAL ======= */ body.variant-editorial { --bg: #FFFFFF; --bg-alt: #F5F4EE; } body.variant-editorial .step:nth-child(1) .step-num, body.variant-editorial .step:nth-child(2) .step-num, body.variant-editorial .step:nth-child(3) .step-num, body.variant-editorial .step:nth-child(4) .step-num { background: var(--navy); } body.variant-editorial .quote-card { border-top-color: var(--navy) !important; } body.variant-editorial .hero-tile-1 { background: var(--navy); } body.variant-editorial .hero-tile-2 { background: var(--c-magenta); } body.variant-editorial .hero-tile-3 { background: #D4CEC0; } body.variant-editorial .dienst-sggz { background: #2D2C5F; } body.variant-editorial .integraal-col:nth-child(1) h4::before { background: var(--c-magenta); } body.variant-editorial .integraal-col:nth-child(2) h4::before { background: var(--c-magenta); } body.variant-editorial .confetti { display: none; } body.variant-editorial .locatie:nth-child(1) .locatie-img, body.variant-editorial .locatie:nth-child(2) .locatie-img, body.variant-editorial .locatie:nth-child(3) .locatie-img { background: repeating-linear-gradient(135deg, rgba(28,27,79,0.05) 0 10px, transparent 10px 20px), #E8E3D6; } body.variant-editorial .locatie-img::after { color: var(--navy-50); } body.variant-editorial .nieuws-card:nth-child(1) .nieuws-img, body.variant-editorial .nieuws-card:nth-child(2) .nieuws-img, body.variant-editorial .nieuws-card:nth-child(3) .nieuws-img { background: var(--navy); } body.variant-editorial .contact-way:nth-child(1) .contact-way-icon, body.variant-editorial .contact-way:nth-child(2) .contact-way-icon, body.variant-editorial .contact-way:nth-child(3) .contact-way-icon { background: var(--c-magenta); } /* ======= VARIATION: WARM ======= */ body.variant-warm { --bg: #F8EFE3; --bg-alt: #F2E4D1; --navy: #3D2817; --ink: #3D2817; --ink-soft: #6B5541; --c-magenta: #D4612F; --c-cyan: #7BA896; --c-orange: #E8A04A; --c-green: #9FA862; --c-purple: #A07458; --c-yellow: #E8C85E; } body.variant-warm .dienst-msr { background: #3D2817; } body.variant-warm .dienst-sggz { background: #D4612F; } body.variant-warm .integraal { background: #3D2817; } /* ======= RESPONSIVE ======= */ @media (max-width: 1100px) { .locaties-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .hero-grid, .diensten-grid, .contact-grid, .integraal-pair, .faq-wrap { grid-template-columns: 1fr; gap: 48px; } .aanpak-steps { grid-template-columns: 1fr 1fr; } .locaties-grid, .ervaringen-grid, .nieuws-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; } .hero-stats { gap: 24px; flex-wrap: wrap; } .section { padding: 80px 0; } .faq-side { position: static; } /* ===== Hamburger menu actief vanaf 960px ===== */ .nav-burger { display: flex; touch-action: manipulation; margin-right: 0; } /* BELANGRIJK: backdrop-filter op .nav maakt 'm het containing block voor position:fixed kinderen (Chromium/Android). Daardoor zou het fixed schuifpaneel t.o.v. de navbalk i.p.v. het scherm geplaatst worden en niet in beeld schuiven. Op mobiel dus uitzetten — paneel wordt weer viewport-relatief. */ .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg, #FAF8F3); } /* BELANGRIJK: .nav heeft een eigen stacking-context (sticky + z-index:100). Het schuifpaneel zit dáárin, dus zijn z-index telt alleen t.o.v. de navbalk — niet t.o.v. de overlay die op -niveau hangt (z-index 199). Daardoor schilderde de overlay OVER het paneel heen → blauwe waas. Zodra het menu open is tillen we .nav boven de overlay uit. */ body.nav-open .nav { z-index: 300; } .nav-cta { /* Aanmeld-knop iets compacter zodat hij naast de hamburger past */ padding: 9px 16px; font-size: 13px; } .nav-inner { padding: 12px 22px; gap: 12px; } /* Nav-links wordt een slide-in paneel rechts */ .nav-links { display: flex !important; flex-direction: column; gap: 4px; position: fixed; top: 0; right: 0; width: min(360px, 88vw); height: 100dvh; background: #FAF8F3 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 80px 24px 32px; box-shadow: -20px 0 60px rgba(28,27,79,0.28); transform: translateX(100%); transition: transform 0.32s cubic-bezier(.2,.7,.2,1); z-index: 200; overflow-y: auto; list-style: none; align-items: stretch; } body.nav-open .nav-links { transform: translateX(0); } .nav-links > li { width: 100%; border-bottom: 1px solid var(--line); } .nav-links > li:last-child { border-bottom: 0; } .nav-links > li > a { display: flex; justify-content: space-between; align-items: center; padding: 16px 8px; font-size: 17px; font-weight: 500; color: var(--navy); width: 100%; } /* Onderstreping van de desktop-versie uit op mobile */ .nav-links a::after { display: none !important; } /* Pijltje voor submenu-items — wijst naar beneden */ .nav-links .has-submenu > a::before { content: ''; width: 8px; height: 8px; border: 0; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); /* order:1 zet het pijltje ACHTER de tekst in de flex-rij; samen met justify-content:space-between op de komt het netjes uiterst rechts. Zonder dit duwde de auto-marge op deze ::before (die vóór de tekst staat) het hele item naar rechts. */ order: 1; flex-shrink: 0; margin-left: 12px; opacity: 0.7; transition: transform 0.25s; } .nav-links .has-submenu.is-open > a::before { transform: rotate(-135deg); opacity: 1; border-color: var(--c-magenta); } /* Submenu's: niet als dropdown maar geïntegreerd in de lijst */ .nav-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 12px 8px; margin: 0; min-width: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-links .has-submenu.is-open .nav-submenu { max-height: 600px; } /* Op mobile: NIET op hover openen — alleen via .is-open (door JS gezet) */ .nav-links .has-submenu:hover .nav-submenu { max-height: 0; } .nav-links .has-submenu.is-open:hover .nav-submenu { max-height: 600px; } .nav-submenu a { padding: 10px 12px; font-size: 15px; } .nav-submenu .submenu-eyebrow { padding: 12px 12px 4px; font-size: 11px; } /* Sluit-X bovenin het slide-in paneel */ .nav-mobile-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; background: var(--bg-alt); color: var(--navy); border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; padding: 0; } /* Diverse layout-fixes voor mobile */ .nieuws-featured, .news-featured { grid-template-columns: 1fr; } .news-featured-img { aspect-ratio: 16 / 10; min-height: 0; } .article-hero-grid { grid-template-columns: 1fr; gap: 32px; } .article-grid { grid-template-columns: 1fr; gap: 32px; } .article-aside { position: static; } /* Buttons en knoppen tonen niet te krap */ .btn-primary, .btn-ghost, .nav-cta { min-height: 44px; } } @media (max-width: 640px) { .container, .container-narrow { padding: 0 20px; } .section { padding: 64px 0; } .aanpak-steps { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .news-filter { flex-wrap: wrap; gap: 8px; } .hero { padding: 48px 0 64px; } .hero-buttons { flex-direction: column; align-items: stretch; } .hero-buttons .btn-primary, .hero-buttons .btn-ghost { width: 100%; justify-content: center; } /* Tabellen en grids met veel data scrollen liever horizontaal */ .price-table, .contracts-table { display: block; overflow-x: auto; white-space: nowrap; } } @media (max-width: 420px) { .nav-logo img { width: 76px !important; height: auto !important; } .nav-cta { padding: 8px 14px; font-size: 12px; } } /* ============= PAGE HERO (subpages) ============= */ .page-hero { padding: 80px 0 60px; background: var(--bg-alt); border-bottom: 1px solid var(--line); } .page-hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: flex-end; } .page-hero h1 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 20px; } .page-hero h1 .accent { font-family: 'Fraunces', serif; font-weight: 400; font-style: italic; color: var(--c-magenta); } .page-hero p { font-size: 18px; color: var(--ink-soft); max-width: 520px; line-height: 1.6; } .breadcrumb { display: flex; gap: 10px; font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; align-items: center; letter-spacing: 0.04em; } .breadcrumb a { color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--c-magenta); } .breadcrumb span.sep { opacity: 0.4; } .breadcrumb span.current { color: var(--navy); font-weight: 500; } /* Generic content prose */ .prose { font-size: 17px; line-height: 1.7; color: var(--ink); } .prose p { margin-bottom: 20px; } .prose h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); margin: 48px 0 16px; line-height: 1.2; } .prose h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 32px 0 12px; } .prose ul, .prose ol { margin: 0 0 20px 20px; padding-left: 4px; } .prose li { margin-bottom: 8px; } .prose a { color: var(--c-magenta); text-decoration: none; border-bottom: 1px solid currentColor; } .prose strong { font-weight: 600; color: var(--navy); } .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: flex-start; } .sidecard { background: var(--bg-alt); padding: 32px 28px; border-radius: var(--radius); position: sticky; top: 100px; border-top: 4px solid var(--c-magenta); } .sidecard h4 { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; } .sidecard p { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; line-height: 1.55; } .sidecard-list { list-style: none; padding: 0; margin-bottom: 20px; } .sidecard-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; } .sidecard-list li:first-child { border-top: none; } .sidecard-list .label { color: var(--ink-soft); } .sidecard-list .val { font-weight: 500; } /* Route cards (voor verwijzer) */ .routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 48px; } .route-card { background: white; border-radius: var(--radius); padding: 28px 24px; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; } .route-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(28,27,79,0.08); } .route-card .route-num { font-family: 'Fraunces', serif; font-size: 44px; line-height: 1; font-style: italic; margin-bottom: 16px; letter-spacing: -0.02em; } .route-card:nth-child(1) .route-num { color: var(--c-cyan); } .route-card:nth-child(2) .route-num { color: var(--c-magenta); } .route-card:nth-child(3) .route-num { color: var(--c-orange); } .route-card h3 { font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; } .route-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; margin-bottom: 16px; } /* Team grid */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .team-card { --team-accent: var(--c-cyan); --team-accent-2: var(--c-magenta); background: white; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(28,27,79,0.04), 0 12px 28px -20px rgba(28,27,79,0.18); position: relative; padding: 28px 28px 24px; display: flex; flex-direction: column; align-items: flex-start; } .team-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--team-accent); } .team-card.is-magenta { --team-accent: var(--c-magenta); --team-accent-2: var(--c-cyan); } .team-card.is-cyan { --team-accent: var(--c-cyan); --team-accent-2: var(--c-magenta); } .team-card.is-orange { --team-accent: var(--c-orange); --team-accent-2: var(--c-cyan); } /* Circular portrait with offset accent disc + small dot */ .team-portrait { position: relative; width: 124px; height: 124px; margin: 8px 0 22px; } .team-portrait-img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(28,27,79,0.06) 0 10px, transparent 10px 20px), var(--bg-alt); } .team-portrait-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; border-radius: 50%; } .team-portrait-img::after { content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--navy-50); letter-spacing: 0.05em; } .team-portrait-img:has(img)::after { display: none; } /* Initials-fallback voor team-portretten zonder foto */ .team-portrait-img.has-initials { background: linear-gradient(135deg, var(--bg-alt) 0%, rgba(28,27,79,0.06) 100%); display: flex; align-items: center; justify-content: center; } .team-portrait-img.has-initials::after { display: none; } .team-initials { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 42px; letter-spacing: -0.02em; color: var(--navy); line-height: 1; user-select: none; } .team-card.is-magenta .team-initials { color: var(--c-magenta); } .team-card.is-cyan .team-initials { color: var(--navy); } .team-card.is-orange .team-initials { color: var(--c-orange); } .team-portrait::before { content: ''; position: absolute; z-index: 1; inset: -6px -6px 10px 10px; border-radius: 50%; background: var(--team-accent); } .team-portrait::after { content: ''; position: absolute; z-index: 3; width: 14px; height: 14px; border-radius: 50%; top: 6px; right: -2px; background: var(--team-accent-2); } /* Legacy .team-photo kept hidden in case anything still references it */ .team-photo { display: none; } .team-body { padding: 0; } .team-name { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 4px; line-height: 1.3; } .team-role { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; } .team-role .team-role-tag { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--team-accent); font-weight: 600; } /* Location page detail */ .location-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .location-detail-img { aspect-ratio: auto; position: relative; overflow: hidden; align-self: stretch; min-height: 280px; } .location-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .location-detail-img-pl { aspect-ratio: 4 / 3; position: relative; } .location-detail:nth-of-type(1) .location-detail-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-cyan); } .location-detail:nth-of-type(2) .location-detail-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-orange); } .location-detail:nth-of-type(3) .location-detail-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-green); } .location-detail:nth-of-type(4) .location-detail-img { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px), var(--c-magenta); } .location-detail-img::after { content: 'foto — locatie'; position: absolute; top: 16px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.8); letter-spacing: 0.04em; } .location-detail-body { padding: 36px 40px; } .location-detail-body .city { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .location-detail-body h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 20px; color: var(--navy); } .location-detail-body .info { display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; font-size: 14px; padding-top: 20px; border-top: 1px solid var(--line); } .location-detail-body .info .k { color: var(--ink-soft); } .location-detail-body .info .v { color: var(--navy); font-weight: 500; } @media (max-width: 820px) { .page-hero-inner, .two-col, .location-detail { grid-template-columns: 1fr; gap: 32px; } .sidecard { position: static; } .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .team-card { padding: 24px 22px 20px; } .team-portrait { width: 104px; height: 104px; } } @media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } } /* ======= MOBIELE FORMULIERSECTIES ======= Forceer JotForm-secties op mobiel naar één kolom + krap minder padding, zodat het formulier de volledige breedte gebruikt en niet als smalle kolom rechts blijft hangen. Inline styles in HTML worden hier met !important overschreven omdat ze in de bron staan. */ @media (max-width: 960px) { .form-section-grid { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 640px) { .form-section-grid { gap: 32px !important; } .jotform-wrapper { padding: 20px !important; min-height: 0 !important; border-radius: 16px !important; } .jotform-wrapper iframe { min-width: 100% !important; width: 100% !important; } /* Iets meer ademruimte rond de container op smartphones */ .form-section-grid + p, .form-section-grid .jotform-wrapper + p { font-size: 13px !important; } } @media (max-width: 480px) { .jotform-wrapper { padding: 14px !important; } } /* ========================================================================= GLOBALE MOBIELE HARDENING Vangt patronen af die op de 100+ statische pagina's met INLINE styles staan en daardoor niet door de class-based media-queries hierboven worden geraakt. Inline stijl wint normaal van de stylesheet, dus hier !important + attribuut- selectors. Iconen-met-tekst-layouts (bv. "48px 1fr") bevatten geen "1fr 1fr" of "repeat(" en blijven dus ongemoeid. ========================================================================= */ /* Nooit horizontaal scrollen op telefoons; media nooit breder dan het scherm. LET OP: overflow-x alleen op — niet op . overflow-x op het root-element kan op Android position:fixed-elementen (zoals het nav-paneel) breken. */ @media (max-width: 960px) { body { overflow-x: hidden; } img, svg, video, iframe, table { max-width: 100%; } } /* Tablet: grids van 3 of 4 kolommen terug naar 2 */ @media (max-width: 900px) { [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; } } /* Telefoon: alle meerkoloms inline grids naar één kolom. (auto-fit/auto-fill laten we met rust — die schalen zelf al mee.) We targeten op de EERSTE kolomwaarde: alle fractionele eerste kolommen die in de site voorkomen (1fr / 1.1 / 1.15 / 1.2 / 1.3 / 1.4 fr). Zo vangen we ook asymmetrische 2-koloms grids als "1.3fr 1fr" en "1.15fr 0.85fr". Icoon+tekst-layouts beginnen met een px-waarde ("48px 1fr") en blijven dus ongemoeid. */ @media (max-width: 600px) { [style*="grid-template-columns: 1fr"], [style*="grid-template-columns:1fr"], [style*="grid-template-columns: 1.1fr"], [style*="grid-template-columns: 1.15fr"], [style*="grid-template-columns: 1.2fr"], [style*="grid-template-columns: 1.3fr"], [style*="grid-template-columns: 1.4fr"], [style*="grid-template-columns: 2fr"], [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; } /* Grote inline display-koppen iets indammen zodat ze niet over de rand lopen */ h1[style*="font-size: 5"], h1[style*="font-size: 6"], h2[style*="font-size: 4"], h2[style*="font-size: 5"] { font-size: clamp(28px, 8vw, 40px) !important; } } /* ========================================================================= WACHTTIJDEN-TABEL — responsive Op desktop een 4-koloms tabel; op telefoon stapelen de rijen tot kaarten met labels vóór elke waarde (anders is onduidelijk welk getal wat is). ========================================================================= */ .wt-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: white; margin-bottom: 48px; } .wt-head, .wt-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 16px; } .wt-head { background: var(--bg-alt); padding: 16px 24px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .wt-row { padding: 20px 24px; border-top: 1px solid var(--line); align-items: center; } .wt-row .wt-loc { color: var(--navy); font-weight: 600; } .wt-cell .m-label { display: none; } .wt-cell.is-orange { color: var(--c-orange); font-weight: 500; } .wt-cell.is-magenta { color: var(--c-magenta); font-weight: 500; } .wt-cell.is-green { color: var(--c-green); font-weight: 500; } .wt-cell { color: var(--ink); } @media (max-width: 640px) { .wt-head { display: none; } .wt-table { border-radius: var(--radius); } .wt-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; } .wt-row .wt-loc { font-size: 16px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .wt-cell { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; } .wt-cell .m-label { display: inline; color: var(--ink-soft); font-weight: 400; } }