:root { --red: #FD3A4A; --navy: #003a79; --navy2: #002348; --off: #F4F4F2; --mid: #e8e8e4; --text: #1A1A1A; --muted: #6B6B6B; /* Hoogte vaste navigatie — gebruikt voor hero nav-clearance zodat de nav nooit in de hero-tekst valt (m.n. tabletband 783–1023px). */ --navh: 88px; /* Verticaal sectie-ritme — homepage-schaal als referentie. */ --sec-y: 120px; /* standaard sectie (desktop) */ --sec-y-md: 80px; /* ≤1024 / compacte secties */ --sec-y-sm: 56px; /* ≤640 */ } *, *::before, *::after { box-sizing: border-box; } /* De achtergrond van is wat iOS/macOS schildert in de overscroll-zone (de rubberband voorbij de boven- en onderkant van de pagina). Stond die op de standaard wit, dan zag je onder de navy footer een wit vlak zodra je doorscrolde. `body` houdt zijn eigen wit, dus binnen de pagina verandert er niets — alleen de zone buiten de body krijgt de merkkleur. */ html { scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--navy2); } body { font-family: 'Manrope', sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Vangnet tegen horizontaal scrollen. Als één element ook maar een pixel te breed is, kan de héle pagina zijwaarts schuiven. De fixed nav schuift dan niet mee, dus die lijkt uit te steken en er valt een lege strook naast de content — dat was precies de klacht. De echte oorzaken zijn los gefixt (carousel-bleed, knoptekst, regio-grid); dit vangt alleen restjes af zoals de letter-spacing achter het laatste teken of een lange klantentekst uit de admin. Bewust `clip` en niet `hidden`: `hidden` maakt een scroll-container van het element, wat position:sticky binnen de pagina zou breken. `clip` niet. */ html, body { overflow-x: clip; } /* ── Type defaults ── */ h1, h2, h3, h4 { letter-spacing: -0.03em; color: var(--navy); } h1 { letter-spacing: -0.04em; font-weight: 800; } h2 { font-weight: 800; } h3 { font-weight: 700; } p { line-height: 1.7; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--red); display: inline-block; } .eyebrow.on-dark { color: #ff8c95; } .eyebrow.on-dark::before { background: #ff8c95; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Op smalle telefoons kan een lange knoptekst door white-space:nowrap niet krimpen; een knop als "Bekijk volledig woningaanbod →" duwde de hele pagina breder dan het scherm, waardoor je horizontaal kon scrollen en de fixed nav leek uit te steken. Daar mag de tekst afbreken. */ @media (max-width: 420px) { .btn { white-space: normal; max-width: 100%; padding-left: 20px; padding-right: 20px; text-align: center; } } .btn-primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 20px rgba(253,58,74,0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(253,58,74,0.42); } .btn-secondary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 4px 20px rgba(0,58,120,0.22); } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,58,120,0.32); background: var(--navy2); border-color: var(--navy2); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-ghost:hover { background: var(--navy); color: #fff; transform: translateY(-2px); } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); } .btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); } /* ── Sticky nav ── */ /* Ingelogd met WP admin bar: die duwt de pagina 32/46px omlaag maar de fixed nav niet — zonder deze offset gaapt er een (navy) strook tussen nav en hero. Bezoekers (uitgelogd) merken hier niets van. */ body.admin-bar .nav-wrap { top: 32px; } @media (max-width: 782px) { body.admin-bar .nav-wrap { top: 46px; } } /* WordPress Studio preview (*.wp.build) injecteert deze notice bovenin ; die duwt de hele pagina omlaag (mobiel ±78px) terwijl de fixed nav hem afdekt — resultaat: een navhoogte extra gat boven elke hero. De notice is toch onzichtbaar achter de nav, dus verbergen zodat de preview identiek rendert aan lokaal/productie. */ #studio-companion-notice { display: none !important; } .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease; background: rgba(0,35,72,0); border-bottom: 1px solid transparent; } /* Announcement bar — only when scrolled */ .announce-bar { background: var(--navy2); color: rgba(255,255,255,0.85); max-height: 0; overflow: hidden; opacity: 0; /* visibility hoort hierbij: zonder dit blijven het telefoonnummer en de move.nl-link focusbaar terwijl de balk dichtgeklapt is — een onzichtbare tabstop. Eerder was dat "opgelost" met aria-hidden="true" op de balk, maar dat verbergt hem juist vóór schermlezers terwijl hij focusbaar blijft: het slechtste van twee werelden. */ visibility: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s; border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-wrap.announce-visible .announce-bar { max-height: 44px; opacity: 1; visibility: visible; transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s; } .announce-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 0; font-size: 12.5px; } .announce-left { display: flex; align-items: center; gap: 22px; } .announce-left a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.78); transition: color 0.15s ease; } .announce-left a:hover { color: #fff; } .announce-left a svg { opacity: 0.7; } .announce-socials { display: flex; align-items: center; gap: 14px; } .announce-socials a { color: rgba(255,255,255,0.65); display: inline-flex; transition: color 0.15s ease, transform 0.15s ease; } .announce-socials a:hover { color: #fff; transform: translateY(-1px); } .announce-socials .a-funda { align-items: center; } .announce-socials .a-funda img { display: block; height: 17px; width: auto; } .announce-socials .a-funda:hover { transform: translateY(-1px); } .nav-main > .container-w { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; } .nav-wrap.scrolled { background: rgba(255,255,255,0.96); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: var(--mid); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .nav-wrap.scrolled .nav-link { color: var(--navy); } .nav-logo-link { height: 52px; } .nav-logo { height: 52px; width: auto; filter: brightness(0) invert(1); transition: filter 0.25s ease; } @media (max-width: 768px) { .nav-logo-link, .nav-logo { height: 36px; } } .nav-wrap.scrolled .nav-logo { filter: none; } .nav-nvm-badge { height: 28px; width: auto; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.22); filter: brightness(0) invert(1); opacity: 0.85; transition: filter 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; object-fit: contain; } .nav-wrap.scrolled .nav-nvm-badge { filter: none; opacity: 1; border-left-color: rgba(0,58,120,0.18); } @media (max-width: 768px) { .nav-nvm-badge { height: 22px; margin-left: 10px; padding-left: 10px; } } .nav-wrap.scrolled .nav-cta { color: var(--navy); border-color: var(--navy); } .nav-wrap.scrolled .nav-cta:hover { background: var(--navy); color: #fff; } /* Primary red CTA in nav */ .nav-cta-primary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: var(--red); border: 1.5px solid var(--red); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 4px 16px rgba(253,58,74,0.32); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .nav-cta-primary:hover { background: #e02c3c; border-color: #e02c3c; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(253,58,74,0.42); } /* Dropdown submenus */ .nav-item { position: relative; } .nav-item.has-sub > .nav-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nav-chev { opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-item.has-sub:hover > .nav-link .nav-chev, .nav-item.has-sub:focus-within > .nav-link .nav-chev { transform: rotate(180deg); opacity: 1; } .nav-sub { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 230px; background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04); padding: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 50; } .nav-sub::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } .nav-sub::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-radius: 2px; } .nav-item.has-sub:hover > .nav-sub, .nav-item.has-sub:focus-within > .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-sub a { display: block; padding: 11px 16px; color: var(--navy); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .nav-sub a:hover { background: var(--off); color: var(--red); } .nav-link { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; padding: 8px 2px; position: relative; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--red); transition: right 0.25s ease; } .nav-link:hover::after { right: 0; } .nav-link:hover { color: var(--red); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .nav-cta:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-1px); } /* Mobile burger (circle button) */ .nav-burger { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; position: relative; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .nav-burger .ic-open, .nav-burger .ic-close { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.25s ease; } .nav-burger .ic-close { opacity: 0; transform: scale(0.6) rotate(-90deg); } .nav-burger.open .ic-open { opacity: 0; transform: scale(0.6) rotate(90deg); } .nav-burger.open .ic-close { opacity: 1; transform: scale(1) rotate(0); } .nav-phone-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; display: none; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nav-phone-circle:hover { transform: translateY(-1px); } /* Light nav-bar treatment when menu open (or scrolled) */ .nav-wrap.menu-open { background: rgba(255,255,255,0.98); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: var(--mid); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .nav-wrap.menu-open .nav-logo { filter: none; } .nav-wrap.menu-open .nav-link { color: var(--navy); } .nav-wrap.menu-open .nav-cta { color: var(--navy); border-color: var(--navy); } .nav-wrap.scrolled .nav-burger, .nav-wrap.scrolled .nav-phone-circle, .nav-wrap.menu-open .nav-burger, .nav-wrap.menu-open .nav-phone-circle { background: #fff; border-color: var(--mid); color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* Sub-menu accordion in mobile drawer */ .m-item { display: flex; flex-direction: column; } .m-item .m-link { border-bottom: 1px solid var(--mid); } .m-item.has-sub .m-link { cursor: pointer; } .m-item.has-sub .m-link .m-arrow { transition: transform 0.25s ease; } .m-item.open.has-sub .m-link .m-arrow { transform: rotate(90deg); color: var(--red); } .m-item.open.has-sub > .m-link { border-bottom-color: transparent; } .m-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 42px; border-bottom: 1px solid transparent; } .m-item.open .m-sub { max-height: 360px; border-bottom-color: var(--mid); padding-bottom: 8px; } .m-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--muted); font-weight: 500; transition: color 0.15s ease; } .m-sub a:hover { color: var(--red); } /* Mobile drawer — floating white card */ .mobile-drawer { position: fixed; top: 80px; left: 20px; right: 20px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04); z-index: 55; padding: 8px 22px 22px; display: none; flex-direction: column; opacity: 0; transform: translateY(-12px); transition: opacity 0.25s ease, transform 0.25s ease; } .mobile-drawer.open { display: flex; opacity: 1; transform: translateY(0); } /* Caret pointing to the close button */ .mobile-drawer::before { content: ''; position: absolute; top: -7px; right: 28px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px 0 0 0; box-shadow: -1px -1px 0 0 rgba(0,0,0,0.03); } .m-link { display: flex; align-items: center; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--mid); color: var(--navy); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; transition: color 0.15s ease; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; } .m-link .m-ic { flex-shrink: 0; color: var(--navy); display: flex; align-items: center; justify-content: center; width: 24px; } .m-link .m-label { flex: 1; } .m-link .m-arrow { color: var(--navy); opacity: 0.35; transition: opacity 0.15s ease, transform 0.15s ease; } .m-link:hover { color: var(--red); } .m-link:hover .m-arrow { opacity: 0.8; transform: translateX(2px); color: var(--red); } .m-cta { margin-top: 18px; background: var(--red); color: #fff; padding: 18px 22px; border-radius: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-align: center; display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 8px 24px rgba(253,58,74,0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .m-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(253,58,74,0.38); } .m-login { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--muted); padding: 4px 0 16px; border-bottom: 1px solid var(--mid); transition: color 0.15s ease; } .m-login:hover { color: var(--navy); } .m-socials { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; } .m-socials a { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--mid); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--navy); transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .m-socials a:hover { border-color: var(--navy); color: var(--red); transform: translateY(-2px); } .m-socials .m-funda { width: 64px; border-radius: 22px; } .m-socials .m-funda img { display: block; height: 17px; width: auto; } /* Mobile drawer (legacy block — keep scrim only) */ .scrim { position: fixed; inset: 0; background: rgba(15,20,35,0.42); opacity: 0; pointer-events: none; z-index: 50; transition: opacity 0.25s ease; } .scrim.open { opacity: 1; pointer-events: auto; } /* ── Hero ── */ .hero { position: relative; overflow: hidden; background: var(--navy2); color: #fff; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px 0 80px; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 12% 20%, rgba(253,58,74,0.18) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 92% 88%, rgba(0,58,120,0.55) 0%, transparent 70%), radial-gradient(ellipse 45% 35% at 78% 18%, rgba(0,58,120,0.35) 0%, transparent 70%); pointer-events: none; } .hero::after { content: 'SPALAND'; position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%); font-size: 22vw; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,0.028); white-space: nowrap; pointer-events: none; user-select: none; line-height: 1; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); pointer-events: none; } .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: #fff; } .hero h1 .accent { color: var(--red); } .hero h1 .underline-mark { position: relative; white-space: nowrap; } .hero h1 .underline-mark::after { display: none; } .hero .sub { font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,0.62); max-width: 540px; line-height: 1.6; font-weight: 400; } .hero .ribbon-tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.78); padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .ribbon-tag .pill { background: var(--red); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; } /* Hero card (Funda score) */ .hero-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 32px; backdrop-filter: blur(8px); overflow: hidden; } .hero-card::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); } .score-num { font-size: clamp(4.5rem, 8vw, 7rem); font-weight: 800; color: #fff; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .score-num .small { color: rgba(255,255,255,0.4); font-size: 0.45em; font-weight: 600; } .stars { display: inline-flex; gap: 3px; color: var(--red); font-size: 16px; letter-spacing: 0.05em; } /* Trust bar */ .trust-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0; color: rgba(255,255,255,0.68); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .trust-bar .item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px 10px 0; } .trust-bar .item + .item { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.16); } .trust-bar .item strong { color: #fff; font-weight: 700; } .trust-bar .badge-mini { background: rgba(253,58,74,0.14); color: #fff; padding: 4px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; } /* ── Sections ── */ .sec { padding: 120px 0; position: relative; } .sec.compact { padding: 80px 0; } .sec.off { background: var(--off); } .sec.navy { background: var(--navy); color: #fff; } .sec.deep { background: var(--navy2); color: #fff; } .sec.navy h2, .sec.deep h2 { color: #fff; } .container-w { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .sec-title { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; margin-top: 16px; margin-bottom: 18px; text-wrap: pretty; } .sec-sub { font-size: 17px; color: var(--muted); max-width: 600px; line-height: 1.65; } .sec.navy .sec-sub, .sec.deep .sec-sub { color: rgba(255,255,255,0.6); } /* ── Helper section (verkopen / kopen) — compact routing ── */ .helper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .helper-card { position: relative; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,35,72,0.08); box-shadow: 0 2px 14px rgba(0,35,72,0.04); padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 18px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .helper-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--navy); transform-origin: left; transform: scaleX(0.18); transition: transform 0.4s cubic-bezier(.2,.8,.2,1); } .helper-card.seller::before { background: var(--red); } .helper-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -22px rgba(0,35,72,0.22); border-color: rgba(0,35,72,0.14); } .helper-card:hover::before { transform: scaleX(1); } .helper-num { position: absolute; top: 22px; right: 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: rgba(0,35,72,0.22); font-variant-numeric: tabular-nums; line-height: 1; } .helper-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .helper-card.buyer .helper-label { color: var(--navy); } .helper-label::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; display: inline-block; } .helper-card h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1.18; margin: -2px 0 0; } .helper-card p.lead { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 480px; margin: 0; } .helper-bullets { list-style: none; padding: 22px 0 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--mid); } .helper-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--text); font-weight: 500; line-height: 1.5; } .helper-bullets li .check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; } .helper-card.seller .helper-bullets li .check { background: rgba(253,58,74,0.12); color: var(--red); } .helper-card.buyer .helper-bullets li .check { background: rgba(0,58,120,0.10); color: var(--navy); } .helper-bullets li b { color: var(--navy); font-weight: 700; margin-right: 4px; } .helper-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .helper-trust { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--mid); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); font-weight: 500; } .helper-trust strong { color: var(--navy); font-weight: 700; } .helper-trust .star { color: var(--red); font-weight: 800; letter-spacing: 0.04em; } .helper-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,35,72,0.25); display: inline-block; } @media (max-width: 1024px) { .helper-grid { grid-template-columns: 1fr; gap: 18px; } .helper-card { padding: 32px 28px 28px; } } /* ── Audience split (legacy, unused) ── */ .audience { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } .aud-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 56px 56px; color: #fff; text-decoration: none; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); } .aud-tile .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); z-index: 0; } .aud-tile .scrim-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,35,72,0.25) 0%, rgba(0,35,72,0.85) 100%); transition: background 0.4s ease; z-index: 1; } .aud-tile:hover .bg { transform: scale(1.06); } .aud-tile:hover .scrim-overlay { background: linear-gradient(180deg, rgba(0,35,72,0.45) 0%, rgba(0,35,72,0.92) 100%); } .aud-tile > * { position: relative; z-index: 2; } .aud-tile .e { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; margin-bottom: 16px; } .aud-tile h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; margin-bottom: 14px; max-width: 380px; } .aud-tile p { color: rgba(255,255,255,0.78); max-width: 420px; font-size: 15px; margin-bottom: 28px; } .aud-tile .corner-num { position: absolute; top: 32px; right: 40px; font-size: 80px; font-weight: 800; color: rgba(255,255,255,0.07); line-height: 1; letter-spacing: -0.04em; } /* ── Cards / Lead capture ── */ .lead-card { background: #fff; border-radius: 12px; padding: 40px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 18px; } .lead-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--red); } .lead-card.navy::before { background: var(--navy); } .lead-card:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,0.10); } .lead-card .lc-label { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--red); } .lead-card.navy .lc-label { color: var(--navy); } .lead-card .lc-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .lead-card .lc-body { color: var(--muted); font-size: 15px; } .lead-card .lc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(253,58,74,0.10); color: var(--red); } .lead-card.navy .lc-icon { background: rgba(0,58,120,0.10); color: var(--navy); } .lead-card .micro { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; } .lead-card .micro span { display: inline-flex; align-items: center; gap: 6px; } .lead-card .micro svg { color: #22a06b; } /* ── Listing cards ── */ .listing { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.04); } .listing:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.12); } /* Verkocht-archief: object zonder eigen detailpagina → geen hover-affordance */ .listing--geen-link { cursor: default; } .listing--geen-link:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .listing .img { aspect-ratio: 16/10; position: relative; background: var(--off); overflow: hidden; } .listing .img img { width: 100%; height: 100%; object-fit: cover; display: block; } .listing .img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0,58,120,0.45); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-size: 11px; letter-spacing: 0.06em; background: repeating-linear-gradient(45deg, rgba(0,58,120,0.04) 0 8px, rgba(0,58,120,0.07) 8px 16px), linear-gradient(135deg, rgba(0,58,120,0.05), rgba(253,58,74,0.04)); } .listing .badge { position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; padding: 5px 10px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(253,58,74,0.4); } .listing .badge.navy { background: var(--navy); box-shadow: 0 4px 14px rgba(0,58,120,0.32); } .listing .badge.sold { background: var(--red); } .listing .badge.badge-openhuis { background: var(--red); box-shadow: 0 4px 14px rgba(253,58,74,0.4); } .listing .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; } .listing .addr { font-weight: 700; color: var(--navy); font-size: 16px; letter-spacing: -0.015em; } .listing .city { color: var(--muted); font-size: 13px; } .listing .listing-openhuis { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 700; margin-top: 2px; } .listing .listing-openhuis svg { flex-shrink: 0; } .listing .price { color: var(--navy); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; } .listing .meta { display: flex; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--mid); padding-top: 12px; } .listing .meta span { display: inline-flex; align-items: center; gap: 5px; } .listing .meta-icon { height: 13px; width: auto; object-fit: contain; filter: brightness(0); opacity: 0.55; flex-shrink: 0; } /* Energy label badge — officiële NL pijlvorm (puntig links) en kleurcodering */ .energy-label { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; padding: 3px 13px 3px 8px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; min-width: 28px; font-family: inherit; clip-path: polygon(0% 0%, calc(100% - 9px) 0%, 100% 50%, calc(100% - 9px) 100%, 0% 100%); } .energy-label[data-class="A+++++"], .energy-label[data-class="A++++"], .energy-label[data-class="A+++"], .energy-label[data-class="A++"] { background: #005a30; } .energy-label[data-class="A+"] { background: #00843d; } .energy-label[data-class="A"] { background: #4dab37; } .energy-label[data-class="B"] { background: #8dc641; } .energy-label[data-class="C"] { background: #bdd630; } .energy-label[data-class="D"] { background: #e8c600; } .energy-label[data-class="E"] { background: #f5a800; } .energy-label[data-class="F"] { background: #ee5200; } .energy-label[data-class="G"] { background: #dc0714; } /* ── Process ── */ .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; } .process::before { content: ''; position: absolute; top: 28px; left: 28px; right: 28px; height: 1px; background: repeating-linear-gradient(90deg, var(--mid) 0 6px, transparent 6px 12px); z-index: 0; } .step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; } .step .num { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--mid); display: flex; align-items: center; justify-content: center; color: var(--navy); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; position: relative; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .step .num::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid transparent; transition: border-color 0.2s ease; } .step:hover .num { background: var(--red); color: #fff; border-color: var(--red); transform: scale(1.05); } .step:hover .num::after { border-color: rgba(253,58,74,0.25); } .step h4 { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.3; } .step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; } .step .icon { width: 36px; height: 36px; color: var(--red); display: flex; align-items: center; justify-content: center; } /* ── Diensten cards ── */ .dienst { background: rgba(255,255,255,0.055); border: 1px solid rgba(253,58,74,0.13); border-radius: 12px; padding: 40px 36px; position: relative; overflow: hidden; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; gap: 14px; } .dienst::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0.2); transition: transform 0.3s ease; } .dienst:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); box-shadow: 0 18px 48px rgba(0,0,0,0.25); } .dienst:hover::before { transform: scaleX(1); } .dienst-icon { width: 52px; height: 52px; border-radius: 10px; background: rgba(253,58,74,0.74); box-shadow: 0 6px 18px rgba(253,58,74,0.25); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .dienst h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .dienst p { color: rgba(255,255,255,0.6); font-size: 14.5px; } .dienst .link { color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; transition: gap 0.2s ease; } .dienst:hover .link { gap: 14px; } /* ── Stats ── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--mid); border-bottom: 1px solid var(--mid); margin-bottom: 56px; } .stat { padding: 36px 24px; border-right: 1px solid var(--mid); display: flex; flex-direction: column; gap: 6px; } .stat:last-child { border-right: 0; } .stat .n { font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .stat .n .accent { color: var(--red); } .stat .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; } /* ── Sub-scores ── */ .subscore { background: #fff; border-radius: 12px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .subscore::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); } .subscore:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); } .subscore .n { font-size: 56px; font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .subscore .lbl { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; margin-top: 8px; } /* ── Testimonials ── */ .testimonial { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 18px; border: 1px solid rgba(0,0,0,0.04); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .testimonial:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); } .testimonial .top { display: flex; justify-content: space-between; align-items: center; } .score-pill { background: var(--navy); color: #fff; padding: 6px 12px; border-radius: 3px; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .testimonial blockquote { font-size: 16px; line-height: 1.6; color: var(--text); font-weight: 500; letter-spacing: -0.01em; flex: 1; } .testimonial blockquote::before { content: '“'; font-size: 48px; line-height: 0; color: var(--red); font-weight: 800; vertical-align: -10px; margin-right: 4px; font-family: Georgia, serif; } .testimonial .who { font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 16px; border-top: 1px solid var(--mid); } /* ── Reviews v1 split layout ── */ #reviews .v1-layout { display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: start; } #reviews .v1-score-col { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 28px; } #reviews .v1-anchor { padding: 28px 24px 24px; background: #003a79; border-radius: 12px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; } #reviews .v1a-logo { display: block; width: auto; height: 36px; object-fit: contain; margin-bottom: 20px; } #reviews .v1-big-score { font-size: 72px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; margin-bottom: 6px; } #reviews .v1-score-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; } #reviews .v1-score-basis { font-size: 0.8125rem; color: rgba(255,255,255,0.4); line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; width: 100%; text-align: center; } #reviews .v1-subscores { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); } #reviews .v1-ss-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #F4F4F2; } #reviews .v1-ss-row:last-child { border-bottom: none; } #reviews .v1-ss-row span { font-size: 0.875rem; color: #6B6B6B; font-weight: 400; } #reviews .v1-ss-row strong { font-size: 1rem; font-weight: 800; color: #003a79; letter-spacing: -0.02em; } #reviews .v1-testi-col { display: flex; flex-direction: column; gap: 36px; } #reviews .v1-head { display: flex; flex-direction: column; gap: 16px; } #reviews .v1-testis { display: flex; flex-direction: column; gap: 20px; } #reviews .v1-testi { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } #reviews .v1-testi:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,0.10); } #reviews .v1-testi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } #reviews .v1-testi blockquote { font-size: 1rem; line-height: 1.7; color: #1A1A1A; margin: 0 0 12px 0; font-style: normal; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #reviews .v1-testi.expanded blockquote { -webkit-line-clamp: unset; overflow: visible; } #reviews .v1-readmore { display: block; background: none; border: none; padding: 0; margin: 0 0 12px 0; font-size: 0.8125rem; font-weight: 700; color: var(--red); cursor: pointer; } #reviews .v1-readmore:hover { text-decoration: underline; } #reviews .v1-testi .who { font-size: 0.8125rem; color: #6B6B6B; font-weight: 500; } @media (max-width: 800px) { #reviews .v1-layout { display: flex; flex-direction: column; gap: 40px; align-items: stretch; } #reviews .v1-testi-col { order: -1; } #reviews .v1-score-col { position: static; } #reviews .v1-testi { transition: none; } #reviews .v1-testi:hover { transform: none; } } /* ── Team ── */ .team-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0,0,0,0.04); display: flex; flex-direction: column; } .team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); } .team-card .ph { aspect-ratio: 1/1; width: 100%; background-size: cover; background-position: center top; background-color: var(--off); position: relative; transition: transform 0.4s ease; } .team-card:hover .ph { transform: scale(1.02); } .team-card .info { padding: 22px 24px 24px; } .team-card-img-link { display: block; overflow: hidden; } .team-card-img-link:hover .ph { transform: scale(1.02); } .team-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0; } /* h3 én h4: de teamkaart staat in een sectie met een h2, dus de naam hoort een h3 te zijn (front-page.php gebruikte h4 en sloeg daarmee een niveau over — Lighthouse "kopelementen niet in aflopende volgorde"). Beide selectors blijven staan zodat de weergave identiek is waar nog h4 staat. */ .team-name-row h3, .team-name-row h4 { margin: 0; } .team-card h3, .team-card h4 { font-size: 18px; color: var(--navy); font-weight: 700; letter-spacing: -0.02em; } .team-card .role { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; } .team-card .contact { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mid); display: flex; flex-direction: column; gap: 8px; } .team-card .contact a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--navy); text-decoration: none; transition: color 0.15s ease; } .team-card .contact a:hover { color: var(--red); } .team-card .contact svg { flex-shrink: 0; opacity: 0.55; } /* ── Contact bar ── */ .contact-bar { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 20px; align-items: center; } .contact-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 4px; background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.18); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.01em; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .contact-btn .ic { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.36); transform: translateY(-2px); } .contact-btn.primary { background: var(--red); border-color: var(--red); box-shadow: 0 4px 20px rgba(253,58,74,0.32); } .contact-btn.primary .ic { background: rgba(255,255,255,0.18); } .contact-btn.primary:hover { background: var(--red); border-color: var(--red); box-shadow: 0 10px 32px rgba(253,58,74,0.42); } .contact-btn .sub { display: block; font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; } .contact-btn.primary .sub { color: rgba(255,255,255,0.7); } /* ── Instagram grid ── */ .ig-card { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .ig-card:hover { transform: scale(1.02); box-shadow: 0 14px 36px rgba(0,0,0,0.16); } .ig-card .img { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,58,120,0.06), rgba(253,58,74,0.04)); display: flex; align-items: center; justify-content: center; color: rgba(0,58,120,0.5); font-size: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; } .ig-card .img.alt-1 { background: radial-gradient(circle at 30% 30%, rgba(253,58,74,0.16), transparent 60%), linear-gradient(135deg, #fff, var(--off)); } .ig-card .img.alt-2 { background: linear-gradient(45deg, rgba(0,58,120,0.12), rgba(253,58,74,0.06)), repeating-linear-gradient(90deg, rgba(0,58,120,0.04) 0 4px, transparent 4px 8px); } .ig-card .img.alt-3 { background: radial-gradient(circle at 70% 70%, rgba(0,58,120,0.18), transparent 55%), linear-gradient(160deg, var(--off), #fff); } .ig-card .img.alt-4 { background: conic-gradient(from 210deg at 60% 40%, rgba(253,58,74,0.10), rgba(0,58,120,0.10), rgba(253,58,74,0.10)); } .ig-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,35,72,0.85) 100%); opacity: 0; transition: opacity 0.25s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; } .ig-card:hover .overlay { opacity: 1; } .ig-card .ig-meta { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--navy); } .ig-card .caption { font-size: 12px; line-height: 1.4; font-weight: 600; } .ig-card .likes { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 6px; display: flex; gap: 12px; } /* ── FAQ ── */ .faq-item { border-bottom: 1px solid var(--mid); } .faq-item:first-child { border-top: 1px solid var(--mid); } .faq-q { display: flex; width: 100%; text-align: left; background: transparent; border: 0; padding: 26px 0; cursor: pointer; align-items: center; justify-content: space-between; gap: 24px; font-family: inherit; color: var(--navy); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; transition: color 0.2s ease; } .faq-q:hover { color: var(--red); } .faq-q .chev { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--off); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease; color: var(--navy); } .faq-item.open .faq-q .chev { transform: rotate(45deg); background: var(--red); color: #fff; } .faq-item.open .faq-q { color: var(--red); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(.2,.8,.2,1); } .faq-a-inner { padding: 0 64px 28px 0; color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 760px; } /* ── Footer ── */ footer.site { background: var(--navy2); color: rgba(255,255,255,0.6); padding: 88px 0 32px; } /* h3 én h5: de footerkoppen volgen op een h2 in de content, dus h5 sloeg twee niveaus over. Beide selectors zodat de weergave niet verschuift. */ footer.site h3, footer.site h5 { color: #fff; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; } footer.site a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; } footer.site a:hover { color: var(--red); } footer.site ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.08); } /* Social-bolletjes in de footer — zelfde vorm als .m-socials (mobile menu), maar outline-stijl op de donkere achtergrond */ .foot-socials { display: flex; align-items: center; gap: 10px; margin-top: 22px; } .foot-socials a { width: 33px; height: 33px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; color: #fff !important; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .foot-socials a svg { width: 14px; height: 14px; } .foot-socials a:hover { border-color: var(--red); color: var(--red) !important; transform: translateY(-2px); } .foot-socials .m-funda { width: auto; height: auto; background: none; border: none; } .foot-socials .m-funda img { display: block; height: 24px; width: auto; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 12px; color: rgba(255,255,255,0.4); } .foot-bottom .cert-row { gap: 8px; } .foot-bottom .cert-img { height: 26px; padding: 3px 7px; } .foot-bottom .cert-img[style*="height:38px"] { height: 30px !important; } .cert-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .cert-badge { border: 1px solid rgba(255,255,255,0.18); padding: 6px 12px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255,255,255,0.75); } .cert-img { height: 32px; width: auto; object-fit: contain; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09); border-radius: 5px; padding: 4px 8px; display: block; } .cert-img--invert { filter: brightness(0) invert(1); } .trust-badge-img { height: 20px; width: auto; object-fit: contain; background: rgba(255,255,255,0.9); border-radius: 3px; padding: 2px 6px; display: block; } .review-logo { height: 16px; width: auto; object-fit: contain; background: rgba(255,255,255,0.9); border-radius: 3px; padding: 2px 5px; display: inline-block; vertical-align: middle; margin-right: 4px; } /* ── Carousel ── */ .carousel { position: relative; } .carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; /* GEEN scroll-behavior: smooth hier. In combinatie met scroll-snap doet Chrome bij het laden een gladde snap-correctie op deze container, en daardoor registreert de pagina HELEMAAL GEEN Largest Contentful Paint — gemeten: 0 LCP-kandidaten op de homepage, waardoor PageSpeed Insights geen performance-score kan berekenen. Het vloeiende scrollen komt uit spaland.js (`track.scrollTo({ behavior: 'smooth' })`) en werkt zonder deze regel identiek. Niet terugzetten. */ scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; margin: 0 -32px; padding-left: 32px; padding-right: 32px; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track > * { flex: 0 0 calc((100% - 32px - 48px) / 3); scroll-snap-align: start; min-width: 0; } .carousel-controls { display: flex; align-items: center; gap: 12px; } .carousel-btn { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1.5px solid var(--mid); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .carousel-btn:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,58,120,0.22); } .carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; } .carousel-dots { display: flex; gap: 6px; margin-left: 8px; } .carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--mid); transition: background-color 0.2s ease, width 0.2s ease; } .carousel-dots span.active { background: var(--red); width: 22px; border-radius: 3px; } @media (max-width: 1024px) { .carousel-track > * { flex-basis: calc((100% - 24px - 64px) / 2); } } @media (max-width: 640px) { .carousel-track { margin: 0 -24px; padding-left: 24px; padding-right: 24px; gap: 16px; } .carousel-track > * { flex-basis: calc(100% - 56px); } } /* ── Process scrolljack ── */ .sec-proces { background: var(--off); position: relative; } .proces-pin { position: relative; height: 600vh; } .proces-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; } .proces-bg-num { position: absolute; right: -4%; bottom: -10%; font-size: 48vh; font-weight: 800; color: rgba(0,58,120,0.04); line-height: 0.8; letter-spacing: -0.06em; pointer-events: none; user-select: none; font-variant-numeric: tabular-nums; transition: opacity 0.4s ease; } .proces-frame { width: 100%; max-width: 1240px; margin: 0 auto; padding: 110px 32px 60px; display: grid; grid-template-columns: minmax(320px, 1fr) 1.5fr; gap: 64px; align-items: center; position: relative; z-index: 1; height: 100%; } .proces-left { display: flex; flex-direction: column; gap: 16px; align-self: center; } .proces-left .sec-title { margin-top: 14px; margin-bottom: 8px; } .proces-progress { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(0,58,120,0.12); } .proces-progress-track { width: 100%; height: 3px; background: rgba(0,58,120,0.10); border-radius: 2px; overflow: hidden; } .proces-progress-fill { height: 100%; background: var(--red); width: 20%; box-shadow: 0 0 12px rgba(253,58,74,0.55); transition: width 0.35s cubic-bezier(.2,.8,.2,1); } .proces-progress-meta { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px; gap: 16px; } .proces-progress-label { font-size: 12px; color: var(--navy); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .proces-progress-num { font-size: 48px; font-weight: 800; color: var(--navy); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 1; flex-shrink: 0; } .proces-progress-num em { font-style: normal; color: var(--red); } .proces-progress-num small { color: rgba(0,58,120,0.35); font-size: 0.55em; font-weight: 700; } .proces-right { height: 100%; display: flex; align-items: center; min-width: 0; } .proces-stage { width: 100%; overflow: hidden; } .proces-track { display: flex; will-change: transform; align-items: stretch; } .proces-panel { flex: 0 0 100%; min-width: 0; padding-right: 56px; display: flex; flex-direction: column; justify-content: center; } .proces-panel-icon { width: 64px; height: 64px; border-radius: 14px; background: rgba(253,58,74,0.10); color: var(--red); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 28px; } .proces-panel-title { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 22px; max-width: 640px; text-wrap: pretty; } .proces-panel-body { font-size: clamp(15px, 1.25vw, 18px); color: var(--muted); line-height: 1.65; max-width: 560px; margin-bottom: 32px; } .proces-panel-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 40px; font-size: 14px; color: var(--text); align-items: flex-start; margin-top: 8px; } .proces-panel-meta strong { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; } .proces-panel-meta b { color: var(--navy); font-weight: 700; } .proces-panel.cta-panel { align-items: flex-start; } .proces-panel.cta-panel .check-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .proces-panel.cta-panel .micro-cta { font-size: 12px; color: var(--muted); margin-top: 18px; letter-spacing: 0.04em; } .proces-panel.cta-panel .micro-cta strong { color: var(--navy); font-weight: 700; } @media (max-width: 1024px) { /* Mobile scrolljack — sticky viewport + 600vh scroll ruimte */ .proces-pin { height: 600vh; } .proces-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; align-items: flex-start; } .proces-bg-num { display: none; } .proces-frame { display: flex; flex-direction: column; grid-template-columns: unset; height: 100%; padding: 64px 20px 16px; gap: 0; max-width: 100%; margin: 0; } .proces-left { flex-shrink: 0; gap: 4px; padding-bottom: 0; } .proces-left .sec-title { font-size: 1.35rem; margin-top: 4px; margin-bottom: 0; line-height: 1.15; } .proces-left .sec-sub { font-size: 13px; line-height: 1.4; } .proces-progress { display: block; margin-top: 10px; padding-top: 10px; } .proces-progress-num { font-size: 26px; } .proces-right { flex: 1; min-height: 0; display: block; overflow: hidden; width: 100%; } .proces-stage { display: block; overflow: hidden; width: 100%; height: 100%; } .proces-track { display: flex; flex-direction: row; width: 100%; gap: 0; height: 100%; align-items: flex-start; } .proces-panel { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; padding-right: 0; padding-top: 12px; border-top: none; overflow-y: hidden; height: 100%; box-sizing: border-box; } .proces-panel:first-child { border-top: none; padding-top: 12px; } .proces-panel-icon { width: 46px; height: 46px; border-radius: 10px; margin-bottom: 12px; } .proces-panel-title { font-size: clamp(1.2rem, 4.5vw, 1.55rem); max-width: 100%; margin-bottom: 10px; } .proces-panel-body { font-size: 14px; line-height: 1.55; max-width: 100%; margin-bottom: 14px; } .proces-panel-meta { gap: 12px; font-size: 13px; grid-template-columns: repeat(3, 1fr); } .proces-panel.cta-panel { padding-bottom: 16px; } .proces-scroll-hint { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 14px; opacity: 1; transition: opacity 0.8s ease; } .proces-scroll-hint.is-hidden { opacity: 0; pointer-events: none; } } @media (min-width: 1025px) { .proces-scroll-hint { display: none; } } .carousel-btn.light { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; } .carousel-btn.light:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(253,58,74,0.35); } .carousel-dots.light span { background: rgba(255,255,255,0.2); } .carousel-dots.light span.active { background: var(--red); } /* ── Sold layout (auto-loop carousel + CTA) ── */ .sold-layout { display: grid; grid-template-columns: 1fr minmax(320px, 380px); gap: 40px; align-items: stretch; } /* Carousel-kolom als flex-column zodat de "alle verkochte woningen"-knop met margin-top:auto onderaan uitlijnt met de onderkant van de navy CTA. */ .sold-carousel-col { display: flex; flex-direction: column; min-width: 0; } .sold-all-btn { align-self: flex-start; margin-top: auto; } .sold-cta { background: var(--navy); color: #fff; border-radius: 14px; padding: 44px 40px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; isolation: isolate; } .sold-cta::before { content: ''; position: absolute; top: -1px; left: 40px; width: 64px; height: 3px; background: var(--red); z-index: 1; } .sold-cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 100% 100%, rgba(253,58,74,0.16) 0%, transparent 65%), radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255,255,255,0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; } .sold-cta > * { position: relative; z-index: 2; } .sold-cta .eyebrow { color: #ff8c95; } .sold-cta .eyebrow::before { background: #ff8c95; } .sold-cta h3 { color: #fff; font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-top: 4px; } .sold-cta p { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.65; margin-bottom: 8px; } .sold-cta .sold-cta-btn { align-self: flex-start; margin-top: 4px; } .sold-cta-meta { margin-top: auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; align-items: center; gap: 14px; font-size: 12px; color: rgba(255,255,255,0.55); } .sold-cta-meta strong { color: #fff; font-weight: 700; } .sold-cta-meta .star { color: var(--red); font-weight: 800; } /* Carousel */ .sold-carousel { min-width: 0; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%); display: flex; /* flex-start i.p.v. stretch: cards houden hun natuurlijke hoogte (foto + adres) en rekken niet mee met de hogere navy CTA-kaart ernaast — anders krijg je een grote lege witte card-body sinds de verkoopprijs eruit is. */ align-items: flex-start; } .sold-loop { display: flex; gap: 20px; width: max-content; animation: soldScroll 72s linear infinite; } @media (hover: hover) { .sold-carousel:hover .sold-loop { animation-play-state: paused; } } @keyframes soldScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .sold-loop > .listing { flex: 0 0 360px; margin: 0; } .sold-loop .listing .img { aspect-ratio: 4 / 3; } .sold-loop .listing .body { padding: 8px 12px 10px; gap: 1px; } .sold-loop .listing .addr { font-size: 15px; } .sold-loop .listing .city { font-size: 12px; } .sold-loop .listing .price-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } .sold-loop .listing .price-row { display: flex; align-items: center; gap: 6px; } .sold-loop .listing .price { font-size: 19px; margin-top: 0; } .sold-tag { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(253,58,74,0.09); color: var(--red); padding: 2px 5px; border-radius: 2px; white-space: nowrap; } @media (max-width: 1280px) { .sold-loop > .listing { flex-basis: 340px; } } @media (max-width: 1024px) { .sold-layout { grid-template-columns: 1fr; gap: 28px; } .sold-cta { padding: 36px 32px; } .sold-loop > .listing { flex-basis: calc((100vw - 96px) / 3); min-width: 220px; } .sold-all-btn { margin-top: 20px; align-self: center; } } @media (max-width: 768px) { .sold-loop > .listing { flex-basis: calc((100vw - 72px) / 2); min-width: 200px; } } @media (max-width: 540px) { .sold-loop > .listing { flex-basis: 78vw; min-width: 0; } }/* placeholder image patterns for various uses */ .ph-house { background: linear-gradient(135deg, rgba(0,58,120,0.85), rgba(0,35,72,0.95)), repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px); background-blend-mode: normal; position: relative; } .ph-house::after { content: 'EXTERIOR · MAASSLUIS'; position: absolute; bottom: 18px; left: 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.14em; } .ph-street { background: linear-gradient(135deg, rgba(0,35,72,0.85), rgba(0,58,120,0.95)), repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px); position: relative; } .ph-street::after { content: 'STREET · SCHIEDAM'; position: absolute; bottom: 18px; left: 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.14em; } /* ── Responsive ── */ @media (max-width: 1024px) { .container-w { padding: 0 24px; } /* De carousel bloedt met een negatieve marge door de containerpadding heen. Die twee moeten gelijk blijven: hierboven gaat de padding naar 24px, dus de bleed ook. Stond hij op -32px, dan stak de track 8px buiten het scherm en kon de hele pagina horizontaal meescrollen (fixed nav bleef staan → witte rand rechts). Gold voor 641–1024px; onder 640px was het al goed. */ .carousel-track { margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .process { grid-template-columns: repeat(2, 1fr); } .process::before { display: none; } .audience { grid-template-columns: 1fr; } .contact-bar { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .nav-links { display: none !important; } .announce-bar { display: none !important; } .nav-cta-primary.desk-only { display: none !important; } .nav-burger, .nav-phone-circle { display: inline-flex; } } @media (max-width: 768px) { .sec { padding: 80px 0; } /* Footer mobiel: logo-blok en contact gecentreerd over de volle breedte, daaronder Diensten en Uw makelaar in als twee kolommen naast elkaar */ .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .foot-grid > div:nth-child(1) { grid-column: 1 / -1; order: 1; text-align: center; } .foot-grid > div:nth-child(4) { grid-column: 1 / -1; order: 2; text-align: center; } .foot-grid > div:nth-child(2) { order: 3; } .foot-grid > div:nth-child(3) { order: 4; } .foot-grid > div:nth-child(1) p { margin-left: auto; margin-right: auto; } /* img staat op display:block (Tailwind preflight) — centreren via auto-margins. Iets groter dan desktop (42px inline) voor balans in het gecentreerde blok. */ /* Alleen het logo: > img pakt het directe kind. Zonder die combinator raakte deze regel ook de Funda-badge in .foot-socials, die daardoor op 46px hoog (106px breed) naast de social-cirkels van 33px kwam te staan. */ .foot-grid > div:nth-child(1) > img { margin-left: auto; margin-right: auto; height: 46px !important; } .foot-socials { justify-content: center; } .foot-bottom { justify-content: center; text-align: center; } .foot-bottom .cert-row { justify-content: center; width: 100%; } /* "Website door launchyoursite.nl" op eigen regel, zonder losse middot */ .foot-bottom .foot-dot { display: none; } .foot-bottom .foot-credit { display: block; margin-top: 8px; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--mid); } .hero { padding: 120px 0 60px; min-height: auto; } .trust-bar .item { padding-left: 0; border-left: 0 !important; padding-right: 16px; } } @media (max-width: 540px) { .helper-cta-row { flex-direction: column; align-items: stretch; } .helper-cta-row .btn { width: 100%; justify-content: center; } .lead-card, .testimonial { padding: 28px 24px; } .process { grid-template-columns: 1fr; } .aud-tile { padding: 40px 28px; } } @media (max-width: 380px) { /* Footer heel smal scherm: alles onder elkaar, gecentreerd. Op gangbare telefoons (390/430px) passen Diensten en Uw makelaar in prima naast elkaar — pas daaronder stapelen. */ .foot-grid { grid-template-columns: 1fr; } .foot-grid > div { grid-column: auto; text-align: center; } } /* ── Reveal animation ── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } /* utility */ .arrow { display: inline-block; transition: transform 0.2s ease; } .btn:hover .arrow, a.link-r:hover .arrow { transform: translateX(4px); } .link-r { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s ease; text-decoration: none; } .link-r:hover { color: var(--red); } /* Section header layout */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; } .sec-head .left { max-width: 640px; } .sec-head .left p { color: var(--muted); font-size: 17px; line-height: 1.65; } .sec.navy .sec-head .left p, .sec.deep .sec-head .left p { color: rgba(255,255,255,0.6); } /* ── Hero media card (premium, single image + floating overlays) ── */ .hero-media-wrap { position: relative; padding: 0 18px; } .hero-media { position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.04); box-shadow: 0 40px 90px -28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); } .hero-media-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.4s ease; } .hero-media:hover .hero-media-img { transform: scale(1.03); } .hero-media-img.tone-warm { filter: saturate(1.1) contrast(1.03) brightness(1.0); } .hero-media-img.tone-neutral { filter: none; } .hero-media-img.tone-cool { filter: saturate(0.92) hue-rotate(-6deg) brightness(0.95); } .hero-media-grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,35,72,0) 35%, rgba(0,35,72,0.55) 100%), linear-gradient(190deg, rgba(0,35,72,0.18) 0%, transparent 30%); pointer-events: none; } /* Floating Funda card */ .hero-funda-card { position: absolute; z-index: 3; background: #fff; color: var(--navy); border-radius: 14px; padding: 18px 22px 16px; display: flex; align-items: center; gap: 16px; min-width: 230px; box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.6); } .hero-funda-card::before { content: ''; position: absolute; top: 0; left: 20px; width: 44px; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; } .hero-funda-card.pos-bl { bottom: 28px; left: -22px; } .hero-funda-card.pos-br { bottom: 28px; right: -22px; } .hero-funda-card.pos-tr { top: 28px; right: -22px; } .hero-funda-num { font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; } .hero-funda-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hero-funda-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .hero-funda-stars { color: var(--red); font-size: 13px; letter-spacing: 0.06em; } .hero-funda-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; } /* Small floating verkoopadvies badge */ .hero-badge { position: absolute; z-index: 3; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: #fff; padding: 9px 16px 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 14px 34px -10px rgba(253,58,74,0.6); } .hero-badge-dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); animation: heroDot 1.8s ease-in-out infinite; flex-shrink: 0; } @keyframes heroDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.25); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } } @media (max-width: 1280px) { .hero-media-wrap { padding: 0 6px; } .hero-funda-card.pos-bl { left: 14px; } .hero-funda-card.pos-br { right: 14px; } .hero-funda-card.pos-tr { right: 14px; } } @media (max-width: 1024px) { .hero-media { aspect-ratio: 16 / 11; } .hero-media-wrap { display: none; } } /* ═════════════════════════════════════════════════════════════ HERO V2 — "Lokaal" variant Premium, rustige split-layout. Desktop: navy links, foto rechts met fade-overloop. Mobiel: andere volgorde + glassy Funda-badge. ═════════════════════════════════════════════════════════════ */ .hero-v2 { position: relative; min-height: 100vh; background: var(--navy2); color: #fff; display: flex; flex-direction: column; padding-top: 110px; overflow: hidden; } .hero-v2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 5% 50%, rgba(0,58,120,0.55) 0%, transparent 65%), radial-gradient(ellipse 35% 40% at 0% 10%, rgba(253,58,74,0.10) 0%, transparent 70%); pointer-events: none; } .v2-shell { flex: 1; display: flex; align-items: stretch; position: relative; z-index: 2; } .v2-grid { width: 100%; max-width: 1480px; margin: 0 auto; padding: 56px 32px 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; } .v2-left { display: flex; flex-direction: column; gap: 28px; max-width: 560px; } .v2-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); text-transform: none; align-self: flex-start; padding: 8px 16px 8px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.04); } .v2-eyebrow-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 4px rgba(253,58,74,0.18); flex-shrink: 0; } .v2-head { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.038em; color: #fff; text-wrap: balance; margin: 0; } .v2-head .accent { display: inline-block; position: relative; color: #fff; } .v2-head .accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 6%; height: 12%; background: rgba(253,58,74,0.32); z-index: -1; border-radius: 2px; } .v2-sub { font-size: clamp(15.5px, 1.25vw, 18px); color: rgba(255,255,255,0.66); line-height: 1.65; max-width: 520px; font-weight: 400; } .v2-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .v2-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .v2-btn-primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 8px 26px rgba(253,58,74,0.36); } .v2-btn-primary:hover { background: #e02c3c; border-color: #e02c3c; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(253,58,74,0.46); } .v2-btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .v2-btn-secondary:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); } .v2-micro { margin-top: 16px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.42); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .v2-micro .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); display: inline-block; } /* Right column — premium property image w/ fade-overlap to navy */ .v2-media { position: relative; width: 100%; aspect-ratio: 5/4; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); } .v2-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.8,.2,1), filter 0.4s ease; } .v2-media:hover .v2-media-img { transform: scale(1.02); } .v2-media-img.tone-warm { filter: saturate(1.08) contrast(1.03); } .v2-media-img.tone-neutral { filter: none; } .v2-media-img.tone-cool { filter: saturate(0.92) hue-rotate(-6deg) brightness(0.95); } /* fade-overlap to navy on left edge */ .v2-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,35,72,0.55) 0%, rgba(0,35,72,0) 28%), linear-gradient(180deg, rgba(0,35,72,0) 60%, rgba(0,35,72,0.35) 100%); pointer-events: none; } /* Glassy Funda badge — only on the media on MOBILE. On desktop, it's hidden because trust lives in the bar below. */ .v2-funda-glass { position: absolute; z-index: 3; left: 18px; bottom: 18px; display: none; align-items: center; gap: 14px; padding: 12px 16px 12px 14px; background: rgba(255,255,255,0.14); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.22); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.28); } .v2-funda-glass .f-logo { background: #fff; color: var(--navy); font-weight: 800; font-size: 11px; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; } .v2-funda-glass .f-num { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .v2-funda-glass .f-meta { display: flex; flex-direction: column; gap: 2px; } .v2-funda-glass .f-stars { color: var(--red); font-size: 11px; letter-spacing: 0.05em; line-height: 1; } .v2-funda-glass .f-sub { font-size: 10.5px; color: rgba(255,255,255,0.78); font-weight: 500; letter-spacing: 0.01em; } .v2-funda-glass .f-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.2); } /* ── Full-width white trustbar (desktop only) ── */ .v2-trustbar { position: relative; z-index: 2; background: #fff; color: var(--navy); } .v2-trustbar-inner { max-width: 1480px; margin: 0 auto; padding: 36px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .v2-trust-item { padding: 8px 32px; border-right: 1px solid var(--mid); display: flex; flex-direction: column; gap: 6px; position: relative; } .v2-trust-item:first-child { padding-left: 0; } .v2-trust-item:last-child { padding-right: 0; border-right: 0; } .v2-trust-item .top { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); line-height: 1.15; display: flex; align-items: baseline; gap: 10px; } .v2-trust-item .top .accent-num { color: var(--red); font-variant-numeric: tabular-nums; } .v2-trust-item .bot { font-size: 13px; color: var(--muted); line-height: 1.4; font-weight: 500; } /* ── Responsive ── */ @media (max-width: 1100px) { .v2-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 60px; } .v2-left { display: contents; } .v2-eyebrow { order: 1; margin-top: 8px; } .v2-head { order: 2; } .v2-media { order: 3; aspect-ratio: 16/11; } .v2-sub { order: 4; } .v2-ctas { order: 5; } .v2-micro { order: 6; display: none; } /* show glassy funda on the image */ .v2-funda-glass { display: inline-flex; } .v2-media::after { background: linear-gradient(180deg, rgba(0,35,72,0) 50%, rgba(0,35,72,0.45) 100%); } .v2-trustbar { display: none; } } @media (max-width: 640px) { .hero-v2 { padding-top: 90px; } .v2-grid { padding: 24px 20px 48px; gap: 22px; } .v2-head { font-size: clamp(2rem, 8vw, 2.7rem); } .v2-sub { font-size: 15.5px; } .v2-ctas { flex-direction: column; align-items: stretch; gap: 10px; } .v2-btn { justify-content: center; padding: 16px 22px; } .v2-eyebrow { font-size: 11px; padding: 7px 14px 7px 10px; } } /* ══════════════════════════════════════ HERO v2 — VIDEO BACKGROUND ══════════════════════════════════════ */ .hero { background: #002348; position: relative; overflow: hidden; min-height: 540px; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; padding-top: 160px; padding-bottom: 80px; } .hero::before { display: none; } .hero::after { display: none; } .hero-video-wrap { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 1; } .hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero-video-wrap::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient( to right, #002348 0%, rgba(0,35,72,0.92) 12%, rgba(0,35,72,0.55) 35%, rgba(0,35,72,0.12) 62%, transparent 100% ); pointer-events: none; } .hero-video-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 2; background: linear-gradient(to top, rgba(0,35,72,0.7) 0%, transparent 100%); pointer-events: none; } .hero-inner { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 32px; position: relative; z-index: 3; } .hero-left { max-width: 620px; display: flex; flex-direction: column; justify-content: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 25px; margin-bottom: 20px; } .hero-eyebrow::before { display: none; } .hero-eyebrow .s-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; } .hero-eyebrow span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FD3A4A; } .hero-h1 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 800; line-height: 1.15 !important; letter-spacing: -0.035em; color: #fff; margin-bottom: 24px; } .hero-h1 em { font-style: normal; color: #FD3A4A; } .hero-mark { position: relative; white-space: nowrap; } .hero-mark::after { display: none; } .hero-sub { font-size: 16px; font-weight: 400; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 40px; max-width: 440px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; } .hero-funda { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); border-radius: 10px; padding: 14px 20px; max-width: fit-content; } .funda-badge-img { height: 52px; width: auto; object-fit: contain; display: block; } .hero-funda .funda-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.15); flex-shrink: 0; } .funda-score-big { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1; } .funda-score-label { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 4px; } .funda-stars { color: #FD3A4A; font-size: 13px; letter-spacing: 2px; } .funda-count { font-size: 11px; color: rgba(255,255,255,0.5); } /* ── Stats bar marquee ── */ .stats-bar { background: #002348; border-top: 1px solid rgba(255,255,255,0.06); overflow: hidden; position: relative; } .stats-bar::before, .stats-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .stats-bar::before { left: 0; background: linear-gradient(to right, #002348, transparent); } .stats-bar::after { right: 0; background: linear-gradient(to left, #002348, transparent); } .stats-track { display: flex; width: max-content; animation: marquee 22s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .stat-block { padding: 28px 40px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.07); } .stat-icon { width: 44px; height: 44px; background: rgba(253,58,74,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FD3A4A; } .stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; } .stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1.1; } .stat-sub { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.5); margin-top: 2px; } /* ── Benefits section ── */ .benefits-sec { background: var(--off); padding: 80px 0; } .benefits-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .benefits-header { text-align: center; margin-bottom: 56px; } .eyebrow-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; } .benefits-header h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--navy2); line-height: 1.2; } .benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .benefit-card { background: #fff; border-radius: 12px; padding: 36px 28px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); } .benefit-card:hover::before { transform: scaleX(1); } .benefit-icon { width: 52px; height: 52px; background: var(--off); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--navy); transition: background 0.2s ease, color 0.2s ease; } .benefit-card:hover .benefit-icon { background: rgba(253,58,74,0.08); color: var(--red); } .benefit-num { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; } .benefit-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy2); margin-bottom: 12px; line-height: 1.3; } .benefit-desc { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-bottom: 24px; } .benefit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; } .benefit-link:hover { gap: 10px; color: var(--red); } /* ── Hero / benefits responsive ── */ @media (max-width: 1024px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hero { padding-top: 100px; padding-bottom: 60px; } .hero-video-wrap { width: 100%; left: 0; } .hero-video-wrap::before { background: linear-gradient( to right, rgba(0,35,72,0.92) 0%, rgba(0,35,72,0.88) 50%, rgba(0,35,72,0.45) 75%, rgba(0,35,72,0.05) 100% ); } .hero-video-wrap::after { display: none; } .hero-inner { padding: 0 24px; } .hero-left { max-width: 100%; } .hero-badge-float { top: 16px; right: 16px; } .stat-block { padding: 22px 28px; } .benefits-sec { padding: 56px 0; } } @media (max-width: 640px) { .benefits-grid { grid-template-columns: 1fr; } .hero-funda { flex-wrap: nowrap; padding: 12px 16px; gap: 10px; } .funda-badge-img { height: 40px; } .funda-score-big { font-size: 22px; } .hero-funda > *:nth-last-child(1), .hero-funda > *:nth-last-child(2) { display: none; } } /* ═══════════════════════════════════════ NIEUWS & BLOGS ═══════════════════════════════════════ */ /* ── Nieuws hero ── */ .news-hero { position: relative; background-image: url('../images/maassluis-haven-banner.webp'); background-size: cover; background-position: center 60%; background-repeat: no-repeat; padding: 148px 0 72px; text-align: center; isolation: isolate; } .news-hero .container-w { position: relative; z-index: 1; } .news-hero .news-hero-text { display: inline-block; background: rgba(0,20,50,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 32px 48px 36px; max-width: 680px; } .news-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 12px; } .news-hero p { color: rgba(255,255,255,0.82); font-size: 17px; max-width: 560px; margin: 0 auto; line-height: 1.65; } /* ── Categorie filter ── */ .news-cats { background: #fff; border-bottom: 1px solid var(--mid); position: sticky; top: 88px; z-index: 40; } .news-cats .container-w { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 14px; padding-bottom: 14px; } .news-cats .container-w::-webkit-scrollbar { display: none; } .news-cat-pill { flex-shrink: 0; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; border: 1.5px solid var(--mid); color: var(--muted); text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap; } .news-cat-pill:hover { border-color: var(--navy); color: var(--navy); } .news-cat-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; } /* ── Blog grid ── */ .news-grid-section { padding: var(--sec-y-md) 0; background: var(--off); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } } /* ── Blog card ── */ .news-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,35,72,0.07); display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease; } .news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,35,72,0.13); } .news-card-img-wrap { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--navy); } .news-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .news-card:hover .news-card-img { transform: scale(1.04); } .news-card-img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy2), var(--navy)); } .news-card-badge { position: absolute; top: 14px; right: 14px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; } .news-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .news-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .news-card-title { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 10px; } .news-card-title a { color: inherit; text-decoration: none; } .news-card-title a:hover { color: var(--red); } .news-card-excerpt { font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; margin: 0 0 16px; } .news-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; transition: gap 0.15s ease; } .news-card-cta:hover { gap: 10px; } /* ── Paginering ── */ .news-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; } .news-pagination a, .news-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--mid); color: var(--navy); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .news-pagination a:hover { background: var(--navy); border-color: var(--navy); color: #fff; } .news-pagination .current { background: var(--red); border-color: var(--red); color: #fff; } /* ── Leeg state ── */ .news-empty { text-align: center; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .news-empty p { color: var(--muted); font-size: 16px; } /* ── CTA blok onderaan archive ── */ .news-cta-block { background: var(--navy); padding: var(--sec-y-md) 0; } .news-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .news-cta-inner h2 { color: #fff; margin: 10px 0 12px; font-size: clamp(1.4rem, 2.5vw, 2rem); } .news-cta-inner p { color: rgba(255,255,255,0.65); max-width: 440px; } .news-cta-inner .eyebrow { color: #ff8c95; } .news-cta-inner .eyebrow::before { background: #ff8c95; } .news-cta-actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; } @media (max-width: 768px) { .news-cta-inner { flex-direction: column; text-align: center; } .news-cta-inner p { max-width: 100%; } .news-cta-actions { justify-content: center; } } /* ═══════════════════════════════════════ SINGLE NIEUWS ═══════════════════════════════════════ */ /* ── Breadcrumb ── */ .single-news-breadcrumb { background: var(--navy); padding-top: 124px; } .single-news-breadcrumb .container-w { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 16px; padding-bottom: 16px; font-size: 13px; color: rgba(255,255,255,0.6); } .single-news-breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; } .single-news-breadcrumb a:hover { color: #fff; } .single-news-breadcrumb svg { opacity: 0.45; flex-shrink: 0; } .single-news-breadcrumb span { color: rgba(255,255,255,0.55); } /* ── Artikel header (split: copy links, beeld rechts) ── */ .single-news-header { background: linear-gradient(165deg, var(--navy) 0%, var(--navy2) 100%); padding: 52px 0 64px; } .single-news-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .single-news-header.has-thumb .single-news-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; } .single-news-header-content { max-width: 600px; } .single-news-cat { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 13px; border-radius: 5px; text-decoration: none; margin-bottom: 18px; transition: background 0.15s; } .single-news-cat:hover { background: #e5283a; } .single-news-header-content h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 22px; } .single-news-meta { display: flex; align-items: center; gap: 20px; color: rgba(255,255,255,0.7); font-size: 14px; flex-wrap: wrap; } .single-news-meta > * { display: inline-flex; align-items: center; gap: 7px; } .single-news-hero-media { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 24px 60px rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.1); } .single-news-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .single-news-hero-media:hover img { transform: scale(1.04); } @media (max-width: 880px) { .single-news-header { padding: 40px 0 48px; } .single-news-header.has-thumb .single-news-hero { grid-template-columns: 1fr; gap: 30px; } .single-news-header-content { max-width: none; } .single-news-hero-media { aspect-ratio: 16 / 10; } } @media (prefers-reduced-motion: reduce) { .single-news-hero-media img { transition: none; } .single-news-hero-media:hover img { transform: none; } } /* ── Layout ── */ .single-news-layout { padding: var(--sec-y-md) 0; background: var(--off); } .single-news-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; } .single-news-body { max-width: 720px; } @media (max-width: 1024px) { .single-news-columns { grid-template-columns: 1fr; gap: 48px; } .single-news-body { max-width: none; } } /* ── Artikel body ── */ .single-news-lead { font-size: 19px; line-height: 1.65; color: var(--navy); font-weight: 500; border-left: 3px solid var(--red); padding-left: 22px; margin: 0 0 36px; } .single-news-content { font-size: 17px; line-height: 1.8; color: #2c333b; } .single-news-content > *:first-child { margin-top: 0; } .single-news-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.25; margin: 48px 0 16px; color: var(--navy); scroll-margin-top: 110px; } .single-news-content h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); line-height: 1.3; margin: 36px 0 12px; color: var(--navy); scroll-margin-top: 110px; } .single-news-content p { margin: 0 0 22px; } .single-news-content ul { margin: 0 0 24px; padding-left: 24px; list-style: disc; } .single-news-content ol { margin: 0 0 24px; padding-left: 24px; list-style: decimal; } .single-news-content li { display: list-item; margin-bottom: 10px; padding-left: 4px; } .single-news-content li::marker { color: var(--red); font-weight: 700; } .single-news-content li strong { color: var(--navy); } .single-news-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .single-news-content a:hover { color: var(--navy); } .single-news-content blockquote { border-left: 3px solid var(--red); padding: 18px 24px; margin: 32px 0; background: rgba(0,58,120,0.04); border-radius: 0 8px 8px 0; font-size: 17px; font-style: italic; color: var(--navy); } .single-news-content blockquote p { margin: 0; } .single-news-content blockquote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); } .single-news-content blockquote cite::before { content: "— "; } .single-news-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; } /* ── Tags ── */ .single-news-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--mid); font-size: 13px; color: var(--muted); } .single-news-tag { display: inline-flex; padding: 5px 12px; background: var(--off); border: 1.5px solid var(--mid); border-radius: 22px; font-size: 12px; font-weight: 600; color: var(--navy); text-decoration: none; transition: background 0.15s, border-color 0.15s; } .single-news-tag:hover { background: var(--navy); border-color: var(--navy); color: #fff; } /* ── Share knoppen ── */ .single-news-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; font-size: 13px; color: var(--muted); font-weight: 600; } .share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; color: #fff; } .share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); } .share-btn--linkedin { background: #0A66C2; } .share-btn--facebook { background: #1877F2; } .share-btn--whatsapp { background: #25D366; } /* ── Vorig/Volgend ── */ .single-news-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--mid); } .single-news-nav-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; padding: 16px 20px; background: #fff; border: 1.5px solid var(--mid); border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; } .single-news-nav-item:hover { border-color: var(--navy); box-shadow: 0 4px 14px rgba(0,35,72,0.1); } .single-news-nav-next { text-align: right; } .single-news-nav-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .single-news-nav-title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.4; } @media (max-width: 640px) { .single-news-nav { grid-template-columns: 1fr; } } /* ── Sidebar ── */ .single-news-sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,35,72,0.06); } .sidebar-logo { height: 36px; width: auto; margin-bottom: 14px; display: block; } .sidebar-card > p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; } .sidebar-tel { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; margin-top: 12px; } .sidebar-tel:hover { color: var(--red); } .sidebar-title { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 16px; letter-spacing: -0.01em; } .sidebar-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .sidebar-recent li { display: flex; gap: 12px; align-items: flex-start; } .sidebar-recent-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; display: block; } .sidebar-recent-thumb img { width: 100%; height: 100%; object-fit: cover; } .sidebar-recent-title { font-size: 13.5px; font-weight: 600; color: var(--navy); text-decoration: none; line-height: 1.4; display: block; margin-bottom: 4px; } .sidebar-recent-title:hover { color: var(--red); } .sidebar-recent-date { font-size: 12px; color: var(--muted); } .sidebar-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sidebar-cats li a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mid); font-size: 14px; color: var(--navy); text-decoration: none; transition: color 0.15s; } .sidebar-cats li:last-child a { border-bottom: none; } .sidebar-cats li a:hover { color: var(--red); } .sidebar-cats li a span { font-size: 12px; color: var(--muted); background: var(--off); padding: 2px 8px; border-radius: 22px; } /* ── Over Spaland wordmark ── */ .sidebar-about-brand { display: flex; flex-direction: column; line-height: 1.1; margin-bottom: 14px; } .sidebar-about-name { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; } .sidebar-about-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-top: 3px; } /* ── E-book CTA ── */ .ebook-card { display: block; text-align: center; text-decoration: none; padding: 24px 24px 26px; background: linear-gradient(165deg, var(--navy) 0%, var(--navy2) 100%); overflow: hidden; } .ebook-card-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--red); padding: 4px 12px; border-radius: 4px; margin-bottom: 14px; } .ebook-card-title { font-size: 20px; font-weight: 700; line-height: 1.25; color: #fff; margin: 0 0 18px; letter-spacing: -0.01em; } .ebook-card-cover { max-width: 168px; margin: 0 auto 22px; transition: transform 0.3s ease; } .ebook-card-cover img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.5)); } .ebook-card:hover .ebook-card-cover { transform: translateY(-4px); } .ebook-card-points { list-style: none; margin: 0 auto 22px; padding: 0; display: inline-flex; flex-direction: column; gap: 9px; text-align: left; } .ebook-card-points li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); } .ebook-card-points li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } .ebook-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; border-radius: 8px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .ebook-card:hover .ebook-card-btn { background: #e5283a; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(253,58,74,0.4); } /* ── Gerelateerde berichten ── */ .single-news-related { padding: 64px 0 80px; background: #fff; } .single-news-related .eyebrow { margin-bottom: 8px; } .single-news-related h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 36px; } .single-news-related .news-grid { margin-top: 0; } /* ════════════ BINNENKORT VERWACHT ════════════ */ .verwacht-hero { position: relative; background-image: url('../images/maassluis-haven-banner.webp'); background-size: cover; background-position: center 60%; background-repeat: no-repeat; padding: 148px 0 72px; text-align: center; isolation: isolate; } .verwacht-hero .container-w { position: relative; z-index: 1; } .verwacht-hero-inner { display: inline-block; background: rgba(0,20,50,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 16px; padding: 32px 48px 36px; max-width: 680px; } .verwacht-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 12px; } .verwacht-hero p { color: rgba(255,255,255,0.82); font-size: 17px; max-width: 560px; margin: 0 auto; line-height: 1.65; } .verwacht-grid-section { padding: var(--sec-y-md) 0; background: var(--off); } .verwacht-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 1024px) { .verwacht-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .verwacht-grid { grid-template-columns: 1fr; } } .verwacht-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,35,72,0.07); display: flex; flex-direction: column; transition: transform 0.22s ease, box-shadow 0.22s ease; } .verwacht-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,35,72,0.13); } .verwacht-card-img-wrap { position: relative; display: block; overflow: hidden; aspect-ratio: 4/3; background: var(--navy); } .verwacht-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .verwacht-card:hover .verwacht-card-img { transform: scale(1.04); } .verwacht-card-img--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy2), var(--navy)); width: 100%; height: 100%; } .verwacht-badge { position: absolute; top: 14px; left: 14px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); } .verwacht-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; gap: 10px; align-items: center; text-align: center; } .verwacht-card-adres strong { display: block; font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; } .verwacht-card-adres span { font-size: 13px; color: var(--muted); } .verwacht-card-omschrijving { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0; } .verwacht-card-prijs { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; padding-top: 4px; border-top: 1px solid rgba(0,35,72,0.08); } .verwacht-card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--muted); font-weight: 600; justify-content: center; } .verwacht-card-meta span { display: flex; align-items: center; gap: 5px; } .verwacht-card-meta .meta-icon { height: 13px; width: auto; object-fit: contain; filter: brightness(0); opacity: 0.55; flex-shrink: 0; } .verwacht-card-btn { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 20px; } /* ═══════════════════════════════════════════════════════ SECTIE 2 — HELPER BENTO (sh- prefix) ═══════════════════════════════════════════════════════ */ .sh { --sh-red: #fd3a4a; --sh-navy: #003a78; --sh-ndk: #002348; --sh-off: #f4f4f2; --sh-muted: #6b6b6b; --sh-amber: #b85c00; --sh-sand: #f7ebdc; --sh-bdr: #e8e8e8; width: 100%; background: #f4f4f2; padding: 80px 0; font-family: 'Manrope', sans-serif; } .sh *, .sh *::before, .sh *::after { box-sizing: border-box; } .sh a { text-decoration: none; } .sh img { display: block; } .sh ul { list-style: none; } .sh-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* Header */ .sh-head { max-width: 580px; margin-bottom: 28px; } .sh-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sh-label__dash { width: 24px; height: 1px; background: var(--sh-red); flex-shrink: 0; } .sh-label__text { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sh-red); } .sh-h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; margin-bottom: 18px; text-wrap: pretty; } .sh-sub { max-width: 560px; font-size: 1.0625rem; font-weight: 400; line-height: 1.65; color: var(--sh-muted); } /* Bento grid */ .sh-bento { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr); grid-template-rows: minmax(280px, auto) minmax(180px, auto); gap: 16px; align-items: stretch; } /* Base card */ .sh-card { background: #fff; border: 1px solid rgba(0,35,72,0.055); border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 22px 58px rgba(0,35,72,0.08), 0 2px 10px rgba(0,35,72,0.035); } /* Card 1 — Voor verkopers */ .sh-v { grid-column: 1; grid-row: 1 / 3; min-height: 560px; } .sh-v-inner { min-height: 560px; height: 100%; position: relative; } .sh-v-left { width: min(440px, 62%); min-height: 560px; padding: 28px 20px 26px 28px; display: flex; flex-direction: column; position: relative; z-index: 3; } .sh-v-right { position: absolute; inset: 0 0 0 auto; width: 75%; height: 100%; overflow: hidden; pointer-events: none; z-index: 2; } .sh-v-right img { position: absolute; right: -18px; top: 0; height: 100%; width: auto; max-width: none; object-fit: contain; } .sh-wm-v { position: absolute; left: 43%; bottom: 18px; width: 265px; opacity: 0; pointer-events: none; z-index: 3; } /* Icon circle */ .sh-icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(0,35,72,0.06); } .sh-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .sh-card-head .sh-icon { margin-bottom: 0; } .sh-title-stack { min-width: 0; } .sh-icon--red { border-color: rgba(253,58,74,0.24); background: rgba(253,58,74,0.035); } .sh-icon--navy { border-color: rgba(0,58,120,0.16); background: rgba(0,58,120,0.045); } .sh-icon--amber { border-color: rgba(184,92,0,0.10); background: #f7ebdc; } .sh-icon img { width: 44%; height: 44%; object-fit: contain; } .sh-icon--red img { width: 58%; height: 58%; } /* Eyebrow */ .sh-ew { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px; } .sh-ew--red { color: var(--sh-red); } .sh-ew--navy { color: var(--sh-navy); } .sh-ew--amber { color: var(--sh-amber); } /* Headings */ .sh-h3 { font-family: 'Manrope', sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--sh-navy); margin: 0; } .sh-v .sh-h3 { font-size: 1.5rem; } .sh-t .sh-h3 { font-size: 1.2rem; } /* Body */ .sh-body { font-size: 0.875rem; line-height: 1.7; color: #595f6a; margin: 0 0 20px; } /* Bullets */ .sh-bullets { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; } .sh-bullets li { display: flex; gap: 12px; align-items: flex-start; } .sh-chk { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .sh-chk--red { background: rgba(253,58,74,0.10); color: var(--sh-red); } .sh-chk--navy { background: rgba(0,58,120,0.10); color: var(--sh-navy); } .sh-bl { display: flex; flex-direction: column; gap: 2px; } .sh-bl strong { font-size: 0.875rem; font-weight: 800; color: var(--sh-navy); line-height: 1.35; } .sh-bl span { font-size: 0.8rem; font-weight: 400; color: var(--sh-muted); line-height: 1.4; } /* CTA button */ .sh-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 14px 22px; border-radius: 7px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; transition: filter 0.18s ease, transform 0.15s ease; border: none; box-shadow: 0 8px 20px rgba(253,58,74,0.22); } .sh-btn:hover { filter: brightness(0.88); transform: translateY(-1px); } .sh-btn--red { background: var(--sh-red); color: #fff; } .sh-btn--navy { background: var(--sh-navy); color: #fff; box-shadow: 0 8px 20px rgba(0,58,120,0.20); } /* Text link */ .sh-tlink { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sh-ndk); display: inline-flex; align-items: center; gap: 7px; transition: color 0.15s; } .sh-tlink:hover { color: var(--sh-navy); } /* Flex spacer: pushes trust bar to card bottom */ .sh-v-space { flex: 1; min-height: 16px; max-height: 60px; } /* Trust bar */ .sh-trust { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--sh-bdr); } .sh-trust__score { font-size: 0.96rem; font-weight: 800; color: var(--sh-red); white-space: nowrap; flex-shrink: 0; } .sh-trust__funda { font-size: 0.86rem; color: var(--sh-muted); white-space: nowrap; } .sh-trust__funda strong { color: var(--sh-navy); font-weight: 800; } .sh-trust__dot { width: 3px; height: 3px; border-radius: 50%; background: #c0c0c0; flex-shrink: 0; } .sh-trust__nvm { font-size: 0.72rem; font-weight: 500; color: var(--sh-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; } .sh-trust__nvm img { height: 24px; width: auto; display: block; } /* Card 2 — Voor kopers */ .sh-k { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 300px; } .sh-k-inner { padding: 18px 22px; display: flex; flex-direction: column; flex: 1; } .sh-k .sh-icon { width: 46px; height: 46px; } .sh-k .sh-icon img { width: 56%; height: 56%; } .sh-k .sh-card-head { margin-bottom: 12px; } .sh-k .sh-h3 { font-size: 1.2rem; } .sh-k .sh-body { font-size: 0.875rem; margin-bottom: 14px; } .sh-k .sh-bullets { gap: 8px; margin-bottom: 14px; } .sh-k .sh-bullets li { gap: 10px; align-items: center; } .sh-k .sh-bl { display: block; font-size: 0.8rem; color: var(--sh-muted); line-height: 1.35; } .sh-k .sh-bl strong, .sh-k .sh-bl span { display: inline; font-size: inherit; line-height: inherit; } .sh-k .sh-bl strong { margin-right: 5px; } .sh-k .sh-bl span::before { content: "·"; margin-right: 5px; color: #9aa0a9; } .sh-k .sh-btn { margin-top: auto; width: 100%; min-width: 0; } /* Card 3 — Taxeren */ .sh-t { grid-column: 2; grid-row: 2; min-height: 180px; } .sh-t-inner { padding: 20px 26px; display: flex; flex-direction: column; position: relative; z-index: 2; } .sh-wm-t { position: absolute; right: 0; bottom: 0; width: 54%; opacity: 0.95; pointer-events: none; z-index: 1; } .sh-t .sh-icon { width: 46px; height: 46px; box-shadow: none; } .sh-t .sh-icon img { width: 56%; height: 56%; } .sh-t .sh-ew { color: #c57422; } .sh-t .sh-body { max-width: 280px; margin-bottom: 14px; } /* Responsive — tablet */ @media (max-width: 1024px) { .sh { padding: 60px 0 72px; } .sh-wrap { padding: 0 28px; } .sh-head { margin-bottom: 32px; } .sh-bento { grid-template-columns: 1fr; grid-template-rows: auto; gap: 14px; } .sh-v { grid-column: 1; grid-row: auto; min-height: 560px; } .sh-k { grid-column: 1; grid-row: auto; } .sh-t { grid-column: 1; grid-row: auto; } .sh-v-inner { min-height: 560px; } .sh-v-left { width: min(460px, 58%); min-height: 560px; padding: 32px 24px 32px 28px; } .sh-btn { width: 100%; min-width: 0; } .sh-k .sh-btn { min-width: 0; } .sh-v-space { display: none; } .sh-trust { margin-top: 32px; } } /* Responsive — mobile */ @media (max-width: 768px) { .sh { padding: 48px 0 60px; } .sh-wrap { padding: 0 20px; } .sh-head { margin-bottom: 24px; } .sh-bento { gap: 12px; grid-template-columns: 1fr; } .sh-v, .sh-v-inner, .sh-v-left { min-height: auto; } .sh-v-left { width: 100%; padding: 28px 22px 32px; } .sh-card.sh-v { background: var(--sh-ndk); } .sh-v-right { display: block; width: 100%; z-index: 1; } /* Dit is geen achtergrondfoto maar een uitgeknipt beeld: de linkerkant van het bestand is transparant, alleen rechtsboven zit de woning achter een curve. De desktopregel schaalt op hoogte (height:100%, width:auto), en in een kaart van ~750px hoog wordt het beeld dan ~1000px breed — waarvan op een telefoon alleen een strook rechts past. Je ziet dan bijna niets dan navy. Daarom hier op bréédte schalen en het beeld rechtsboven verankeren, zodat de woning zelf in beeld valt. Cover-croppen mag hier niet: dat snijdt door de curve heen en maakt er een rechthoekige foto van. */ .sh-v-right { inset: 0 0 auto auto; height: auto; } .sh-v-right img { position: relative; top: auto; right: auto; width: 165%; max-width: none; height: auto; margin-left: -65%; display: block; } /* De gradient ligt over de foto én onder alle tekst van de kaart. Nu de foto werkelijk zichtbaar is, bepaalt de lichtste plek in het beeld de leesbaarheid van de witte tekst — vandaar dat de middenstop omhoog moet. Niet verder verlagen zonder het contrast opnieuw te meten. */ .sh-v-inner::before { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,35,72,0.72) 0%, rgba(0,35,72,0.62) 45%, rgba(0,35,72,0.78) 100%); pointer-events: none; } .sh-v .sh-h3 { color: #fff; } .sh-v .sh-body { color: rgba(255,255,255,0.88); } .sh-v .sh-bl strong { color: #fff; } .sh-v .sh-bl span { color: rgba(255,255,255,0.88); } .sh-v .sh-icon--red { background: #fff; border-color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.25); } .sh-v .sh-trust { border-top-color: rgba(255,255,255,0.28); } .sh-v .sh-trust__funda { color: rgba(255,255,255,0.8); } .sh-v .sh-trust__funda strong { color: #fff; } .sh-v .sh-trust__nvm { color: rgba(255,255,255,0.88); } /* De badge is donkerblauw op wit en valt weg op de navy kaart. Zelfde invert-truc als `.cert-img--invert` in de footer en de trust bar op de woningpagina. Alleen binnen deze media query: op desktop staat de kaart wit en moet het logo zijn eigen kleur houden. */ .sh-v .sh-trust__nvm img { filter: brightness(0) invert(1); } .sh-v .sh-h3, .sh-k .sh-h3, .sh-t .sh-h3 { font-size: 1.35rem; } .sh-icon, .sh-k .sh-icon, .sh-t .sh-icon { width: 50px; height: 50px; } .sh-card-head { gap: 14px; } .sh-trust { margin-top: 24px; } .sh-btn { width: 100%; min-width: 0; } .sh-k-inner { padding: 26px 22px; } .sh-t-inner { padding: 22px; } .sh-t .sh-body { max-width: 80%; } .sh-wm-t { width: 50%; opacity: 0.85; } } @media (max-width: 480px) { .sh-wrap { padding: 0 16px; } .sh-btn { font-size: 0.76rem; padding: 15px 16px; } .sh-k .sh-btn { min-width: 0; } .sh-t .sh-body { max-width: none; } .sh-wm-t { width: 58%; opacity: 0.22; } .sh-trust__bron { display: none; } /* Op 320px past deze regel niet in één lijn: de inhoud vraagt ~281px in een rij van 242px, waardoor "gecertificeerd" door de overflow:hidden van de kaart werd afgekapt. Onder 400px mag hij daarom afbreken. */ .sh-trust { gap: 6px; flex-wrap: wrap; row-gap: 10px; } .sh-trust__nvm { gap: 4px; } .sh-trust__dot { display: none; } } /* ══════════════════════════════════════════════════════════════ REGIO PAGINA (rg-) — page-regio-maassluis.php Headings erven font-weight/color/letter-spacing van globale h-regels. ══════════════════════════════════════════════════════════════ */ /* Hero extras (bovenop .aanbod-hero uit spaland-woning.css) */ .rg-hero .aanbod-hero-inner { max-width: 760px; } /* Maasland-variant: dorpskern met kerk en vliet als achtergrond. Dubbele class nodig: spaland-woning.css laadt later en zet op .aanbod-hero de Maassluis-havenfoto — die wint anders op cascade-volgorde. */ .aanbod-hero.rg-hero--maasland { background-image: url('../images/maasland-dorp-banner.webp'); background-size: cover; /* 88px offset: foto begint onder de fixed nav zodat de bovenkant (boomkruin/kerktoren) zichtbaar is. Strook erboven zit achter de nav, navy backstop vangt de scroll-overgang op. */ background-position: center 88px; background-color: var(--navy2); background-repeat: no-repeat; padding: 110px 0 100px; padding-top: calc(110px + 88px); } /* Schiedam-variant: historische haven (Lange Haven) — zelfde 88px-offset als Maasland */ .aanbod-hero.rg-hero--schiedam { background-image: url('../images/schiedam-banner.webp'); background-size: cover; background-position: center 88px; background-color: var(--navy2); background-repeat: no-repeat; padding: 110px 0 100px; padding-top: calc(110px + 88px); } /* Vlaardingen-variant: Oude Haven met Grote Kerk — zelfde 88px-offset */ .aanbod-hero.rg-hero--vlaardingen { background-image: url('../images/vlaardingen-banner.webp'); background-size: cover; background-position: center 88px; background-color: var(--navy2); background-repeat: no-repeat; padding: 110px 0 100px; padding-top: calc(110px + 88px); } /* Westland-variant: luchtfoto Glazen Stad. Geen nav-offset zoals de andere regio's: de kust/horizon zit bovenin de foto en de kassen onderin — 65% houdt de onderkant (kassen) volledig in beeld; de nav verbergt alleen lucht. */ .aanbod-hero.rg-hero--westland { background-image: url('../images/westland-banner.webp'); background-size: cover; background-position: center 65%; background-color: var(--navy2); background-repeat: no-repeat; padding: 110px 0 100px; padding-top: calc(110px + 88px); } /* Mobiel/tablet: nav is lager dan 88px → kleinere offset, anders blijft een navy balk zichtbaar tussen nav en foto */ @media (max-width: 1180px) { .aanbod-hero.rg-hero--maasland, .aanbod-hero.rg-hero--schiedam, .aanbod-hero.rg-hero--vlaardingen { background-position: center 56px; } /* Maasland: foto wordt op mobiel op hoogte geschaald (smalle uitsnede) — 68% houdt de kerktoren rechts van het midden in beeld i.p.v. de linkerkant */ .aanbod-hero.rg-hero--maasland { background-position: 68% 56px; } } .rg-breadcrumb { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 18px; } .rg-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; } .rg-breadcrumb a:hover { color: #fff; } .rg-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .rg-hero .rg-hero-actions a { text-decoration: none; } .rg-hero-badges { display: flex; gap: 14px; align-items: center; margin-top: 30px; } .rg-hero-badges img { height: 44px; width: auto; border-radius: 10px; background: #fff; padding: 7px 12px; } /* Marktcijfers band */ .rg-markt { background: var(--navy2); padding: 38px 0 30px; } .rg-markt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .rg-markt-cel { border-left: 2px solid rgba(255,255,255,0.14); padding-left: 20px; } /* Ondergrens 20px i.p.v. 24px: op 320px-schermen paste "€ 485.000" niet in een halve kolom en duwde de hele pagina 9px breed. */ .rg-markt-waarde { display: block; font-size: clamp(20px, 2.6vw, 34px); font-weight: 800; color: #fff; letter-spacing: -0.02em; } .rg-markt-label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; } .rg-markt-sub { display: block; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; } .rg-markt-bron { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 24px; margin-bottom: 0; } /* Off-white sectie variant */ .rg-sec-off { background: var(--off); } /* Two-column: prose + aside */ .rg-twocol { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; } .rg-prose .sec-title { margin-top: 14px; margin-bottom: 20px; } .rg-prose p { font-size: 16.5px; line-height: 1.75; color: var(--muted); margin-bottom: 18px; } .rg-prose p:last-of-type { margin-bottom: 0; } .rg-feiten { background: var(--off); border: 1px solid var(--mid); border-radius: 18px; padding: 32px; } .rg-feiten-titel { font-size: 18px; margin-bottom: 18px; } .rg-feiten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .rg-feiten li { font-size: 14.5px; line-height: 1.65; color: var(--muted); padding-left: 26px; position: relative; } .rg-feiten li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } .rg-feiten li strong { color: var(--navy); } /* Wijken grid */ .rg-wijken-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .rg-wijk-card { background: #fff; border: 1px solid var(--mid); border-radius: 18px; padding: 30px 28px; transition: transform .25s ease, box-shadow .25s ease; } .rg-wijk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,35,72,0.10); } .rg-wijk-naam { font-size: 19px; margin-bottom: 10px; } .rg-wijk-card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; } .rg-wijk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .rg-wijk-tags span { font-size: 11.5px; font-weight: 700; color: var(--navy); background: rgba(0,58,120,0.07); border-radius: 14px; padding: 4px 12px; letter-spacing: 0.02em; } /* Diensten cards (navy sectie) */ .rg-diensten-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .rg-dienst-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 28px 24px; text-decoration: none; transition: background .25s ease, transform .25s ease; } .rg-dienst-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-4px); } .rg-dienst-card h3 { font-size: 17px; color: #fff; margin-bottom: 10px; } .rg-dienst-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.65); flex-grow: 1; margin: 0; } .rg-dienst-link { margin-top: 18px; font-size: 13.5px; font-weight: 700; color: #ff8c95; } /* Team foto */ .rg-team-foto { border-radius: 18px; overflow: hidden; margin: 0; align-self: stretch; } .rg-team-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Responsive */ @media (max-width: 1024px) { .rg-markt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .rg-twocol { grid-template-columns: 1fr; gap: 40px; } .rg-wijken-grid { grid-template-columns: repeat(2, 1fr); } .rg-diensten-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .rg-markt { padding: 28px 0 22px; } .rg-markt-grid { gap: 18px; } .rg-markt-cel { padding-left: 14px; } .rg-wijken-grid { grid-template-columns: 1fr; margin-top: 32px; } .rg-diensten-grid { grid-template-columns: 1fr; margin-top: 32px; } .rg-hero-actions { width: 100%; flex-direction: column; } .rg-hero-actions .btn { width: 100%; justify-content: center; } .rg-hero-badges img { height: 38px; } .rg-feiten { padding: 24px; } } /* ═══════════════════════════════════════════════════════════════════ DIENSTEN-FUNNEL (hv-) — gedeeld door /diensten/huis-verkopen én /diensten/huis-kopen (en volgende funnels). Eerder inline per template gedupliceerd; sinds 2026-08-02 één bron hier. Prefix hv- = generieke funnel-hooks (niet specifiek "huis verkopen"). ═══════════════════════════════════════════════════════════════════ */ /* Hero-bewijsregel */ .hv-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); } .hv-hero-stat { display: flex; align-items: baseline; gap: 8px; } .hv-hero-stat strong { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .hv-hero-stat span { font-size: 13px; color: rgba(255,255,255,0.65); } /* Waarom Spaland */ .hv-usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; } .hv-usp { background: #fff; border: 1px solid var(--mid); border-radius: 14px; padding: 30px 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .hv-usp .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0,58,120,0.07); color: var(--navy); margin-bottom: 18px; } .hv-usp h3 { font-size: 18px; margin-bottom: 10px; } .hv-usp p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; } /* Proces — verticale tijdlijn */ .hv-proces-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 64px; align-items: start; } .hv-proces-kopblok { position: sticky; top: 140px; } .hv-proces-kopblok .sec-sub { margin-top: 14px; } .hv-stappen { display: flex; flex-direction: column; } .hv-stap { position: relative; display: flex; gap: 22px; padding: 0 0 34px 0; } .hv-stap:last-child { padding-bottom: 0; } .hv-stap-nr { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-size: 15px; font-weight: 800; position: relative; z-index: 1; } .hv-stappen { position: relative; --hv-progress: 0px; } .hv-proces-track, .hv-proces-fill { content: ""; position: absolute; left: 21px; width: 2px; border-radius: 2px; top: var(--hv-line-top, 22px); } .hv-proces-track { bottom: var(--hv-line-bottom, 40px); background: var(--mid); z-index: 0; } .hv-proces-fill { height: var(--hv-progress); background: linear-gradient(180deg, var(--navy), var(--red)); z-index: 0; } .hv-stap-nr { transition: background-color .35s ease, color .35s ease, transform .3s ease, box-shadow .35s ease; } .hv-proces.is-anim .hv-stap-nr { background: var(--mid); color: var(--muted); } .hv-proces.is-anim .hv-stap.is-active .hv-stap-nr { background: var(--navy); color: #fff; } .hv-proces.is-anim .hv-stap.is-current .hv-stap-nr { background: var(--red); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(253,58,74,0.14); } .hv-proces.is-anim .hv-stap { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .hv-proces.is-anim .hv-stap.is-in { opacity: 1; transform: none; } .hv-proces-teller { margin-top: 32px; display: flex; align-items: baseline; gap: 9px; color: var(--navy); } .hv-proces-teller-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .hv-proces-teller-tot { font-size: 14px; color: var(--muted); font-weight: 600; } .hv-proces-teller-bar { margin-top: 12px; max-width: 220px; height: 4px; border-radius: 4px; background: var(--mid); overflow: hidden; } .hv-proces-teller-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), var(--red)); border-radius: 4px; transition: width .35s ease; } @media (prefers-reduced-motion: reduce) { .hv-proces.is-anim .hv-stap { opacity: 1; transform: none; transition: none; } .hv-stap-nr, .hv-proces-fill, .hv-proces-teller-bar span { transition: none; } } .hv-proces-mbar { display: none; } .hv-stap-body { padding-top: 8px; } .hv-stap-body h3 { font-size: 18px; margin-bottom: 8px; } .hv-stap-body p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0; } .hv-stap-gratis { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(253,58,74,0.1); color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } /* Waarde-band (navy) */ .hv-band { background: var(--navy2, #002348); padding: 72px 0; } .hv-band-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; } .hv-band h2 { color: #fff; } .hv-band p { font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,0.75); margin: 14px 0 0; } .hv-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } @media (min-width: 641px) { .hv-band-actions { align-items: flex-end; } } /* FAQ → form brug-regel */ .hv-faq-bridge { margin-top: 22px; padding: 18px 22px; border-radius: 12px; background: rgba(0,58,120,0.05); border: 1px solid var(--mid); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; color: var(--navy); } .hv-faq-bridge-link { color: var(--red); font-weight: 700; text-decoration: none; } .hv-faq-bridge-link:hover { text-decoration: underline; } .hv-faq-bridge-sep { color: var(--muted); } /* Formulier-sectie */ .hv-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } .hv-form-punten { display: flex; flex-direction: column; gap: 0; margin-top: 26px; } .hv-punt { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--mid); } .hv-punt:last-of-type { border-bottom: 1px solid var(--mid); } .hv-punt .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(0,58,120,0.07); color: var(--navy); margin-top: 2px; } .hv-punt-body strong { display: block; font-size: 15.5px; color: var(--navy); } .hv-punt-body span { font-size: 14px; color: var(--muted); } .hv-form-card { background: #fff; border: 1px solid var(--mid); border-radius: 16px; padding: 32px 30px; box-shadow: 0 14px 40px rgba(0,35,72,0.07); } .hv-form-card h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 6px; } .hv-form-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; } .hv-form-bel { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 15px 18px; background: var(--navy); color: #fff; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,35,72,0.14); transition: transform .2s ease, box-shadow .2s ease; } .hv-form-bel:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,35,72,0.20); } .hv-form-bel-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); } .hv-form-bel-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; } .hv-form-bel-txt strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .hv-form-bel-txt span { font-size: 13px; color: rgba(255,255,255,0.7); } .hv-form-bel-arrow { flex: 0 0 auto; font-size: 18px; font-weight: 800; color: var(--red); transition: transform .2s ease; } .hv-form-bel:hover .hv-form-bel-arrow { transform: translateX(3px); } /* Form-anker scroll-offset (per funnel-pagina een eigen anker-id) */ #waardebepaling, #kennismaking, #taxatie-aanvragen, #waardebepaling-aanvragen, #zoekopdracht-plaatsen { scroll-margin-top: 130px; } /* Zoekopdracht-formulier (zo-) — rijk zoekprofiel op /diensten/zoekopdracht-plaatsen */ .zo-form-card h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .zo-label { display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); } .zo-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--off); border: 1px solid var(--mid); border-radius: 12px; } .zo-seg-opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--muted); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } .zo-seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .zo-seg-opt.active { background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(0,35,72,0.18); } .zo-select { width: 100%; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003A78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .zo-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .zo-plaatsen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } .zo-plaats { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink, #1a1a1a); cursor: pointer; } .zo-plaats input { width: 17px; height: 17px; accent-color: var(--red); flex: 0 0 auto; cursor: pointer; } .zo-divider { border: 0; border-top: 1px solid var(--mid); margin: 22px 0 18px; } .zo-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 13px; line-height: 1.55; color: var(--muted); } .zo-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--red); flex: 0 0 auto; cursor: pointer; } @media (max-width: 480px) { .zo-plaatsen { grid-template-columns: 1fr; } } /* RealWorks Waardecheck-widget mount (widget rendert eigen UI hierin) */ .dienst-waardecheck { margin-top: 34px; min-height: 120px; background: #fff; border: 1px solid var(--mid); border-radius: 16px; padding: 12px; box-shadow: 0 6px 24px rgba(0,35,72,0.06); } .dienst-waardecheck:empty { display: none; } .dienst-waardecheck-fallback { margin-top: 18px; font-size: 14.5px; color: var(--muted); } .dienst-waardecheck-fallback a { color: var(--red); font-weight: 600; } /* Criteria-checklist (taxatie: "Wat wij beoordelen") */ .dienst-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 36px; } .dienst-check { display: flex; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--mid); font-size: 15.5px; font-weight: 600; color: var(--navy); } .dienst-check .ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(253,58,74,0.1); color: var(--red); } @media (max-width: 700px) { .dienst-check-grid { grid-template-columns: 1fr; } } /* Sticky mobiele conversiebalk */ .hv-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--mid); box-shadow: 0 -6px 24px rgba(0,35,72,0.12); transform: translateY(110%); transition: transform 0.25s ease; } .hv-sticky.zichtbaar { transform: translateY(0); } .hv-sticky .btn { flex: 1; justify-content: center; text-align: center; padding: 13px 10px; font-size: 12px; } /* Responsive */ @media (max-width: 1024px) { .hv-proces-grid { grid-template-columns: 1fr; gap: 36px; } .hv-proces-kopblok { position: static; } } @media (max-width: 900px) { .hv-usp-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .hv-band-inner { grid-template-columns: 1fr; gap: 28px; } .hv-band-actions { flex-direction: row; flex-wrap: wrap; } .hv-form-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .hv-sticky { display: flex; } .hv-stap { gap: 16px; } .hv-stap-nr { width: 38px; height: 38px; font-size: 13.5px; } .hv-proces-track, .hv-proces-fill { left: 18px; } .hv-proces-teller, .hv-proces-teller-bar { display: none; } .hv-proces-mbar { display: block; position: sticky; top: 72px; z-index: 30; margin: 0 0 24px; padding: 11px 15px; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border: 1px solid var(--mid); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,35,72,0.09); } .hv-proces-mbar-top { display: flex; align-items: center; gap: 11px; } .hv-proces-mbar-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; } .hv-proces-mbar-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-proces-mbar-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .hv-proces-mbar-bar { margin-top: 9px; height: 3px; border-radius: 3px; background: var(--mid); overflow: hidden; } .hv-proces-mbar-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), var(--red)); border-radius: 3px; transition: width .3s ease; } } /* ═══════════════════════════════════════════════════════════════════ TAILWIND-VERVANGING (2026-07-10) — CDN verwijderd uit setup.php. Blok 1: preflight-subset — de reset waar het design op steunt (de CDN injecteerde dit ná spaland.css; daarom staat dit blok aan het EIND van dit bestand, zelfde cascade-positie). Blok 2: de 17 utility-classes die de templates daadwerkelijk gebruiken. Geïnventariseerd over alle frontend-templates + JS. ═══════════════════════════════════════════════════════════════════ */ /* ── Blok 1: preflight-subset ── */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: 'Manrope', sans-serif; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1em; } small { font-size: 80%; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* !important: repliceert de oude cascade — de CDN injecteerde dit ná álle stylesheets (ook spaland-woning.css), dus [hidden] won altijd. Zonder !important zou bv. .aanbod-geen-filter{display:flex} het hidden-attribuut overrulen en staat de "geen resultaten"-melding permanent in beeld. */ [hidden] { display: none !important; } /* ── Blok 2: gebruikte utilities ── */ .grid { display: grid; } .flex { display: flex; } .hidden { display: none; } .flex-col { flex-direction: column; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-6 { gap: 1.5rem; } .gap-16 { gap: 4rem; } @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:inline-flex { display: inline-flex; } .md\:flex-row { flex-direction: row; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; } } /* ── 404 & zoekresultaten ─────────────────────────────────── */ .btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55) !important; } .btn-outline-light:hover { background: rgba(255,255,255,.12); } .nf-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .nf-search { display: flex; gap: 10px; margin-top: 22px; max-width: 520px; } .nf-search input[type="search"] { flex: 1; min-width: 0; padding: 12px 16px; font: inherit; font-size: 15px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.95); color: var(--text); } .nf-aanbod-kop { margin-bottom: 26px; } .sr-lijst { display: flex; flex-direction: column; gap: 12px; max-width: 860px; } .sr-item { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: #fff; border: 1px solid var(--mid); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .15s ease, transform .15s ease; } .sr-item:hover { border-color: var(--navy); transform: translateX(4px); } .sr-type { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); background: rgba(253,58,74,.08); padding: 4px 10px; border-radius: 99px; } .sr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sr-titel { font-weight: 700; color: var(--navy); } .sr-excerpt { font-size: 14px; color: var(--muted); } .sr-pijl { margin-left: auto; color: var(--red); font-weight: 700; } @media (max-width: 640px) { .nf-search { flex-direction: column; } .sr-item { flex-wrap: wrap; gap: 10px; } .sr-pijl { display: none; } } /* ── PAGE HERO (page.php — generieke pagina's) ────────────────── Eigen lichte variant van .aanbod-hero: die zit in spaland-woning.css en laadt niet op gewone pagina's. Navy vlak, geen foto-dependency. */ .page-hero { background: linear-gradient(120deg, var(--navy2) 0%, var(--navy) 100%); padding: 64px 0 52px; padding-top: calc(64px + var(--navh)); } .page-hero-inner { max-width: 760px; } .page-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin: 8px 0 0; } .page-content-section { padding: var(--sec-y-md) 0; background: var(--off); } .page-content { max-width: 760px; } /* ───────────────────────────────────────────────────────────── COOKIEMELDING (includes/consent.php) Verschijnt alleen als er daadwerkelijk een pixel-ID is ingevuld. Staat standaard verborgen in de HTML en wordt client-side getoond, zodat er één cache-variant blijft (LiteSpeed op Hostinger). ───────────────────────────────────────────────────────────── */ .spaland-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 520px; margin-inline: auto; padding: 18px 20px; background: #fff; border: 1px solid rgba(0, 35, 72, 0.12); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 35, 72, 0.18); font-size: 14px; line-height: 1.55; color: var(--navy-dark, #002348); } /* Zonder deze regel wint de display van het hidden-attribuut. */ .spaland-consent[hidden] { display: none; } .spaland-consent__titel { margin: 0 0 6px; font-weight: 700; font-size: 15px; color: var(--navy-dark, #002348); } .spaland-consent__tekst { margin: 0 0 14px; color: #4a5568; } .spaland-consent__tekst a { color: var(--navy, #003a78); text-decoration: underline; } .spaland-consent__acties { display: flex; gap: 10px; flex-wrap: wrap; } .spaland-consent__btn { flex: 1 1 auto; min-width: 130px; padding: 11px 18px; border-radius: 9px; border: 1px solid rgba(0, 35, 72, 0.18); background: #fff; color: var(--navy-dark, #002348); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .spaland-consent__btn:hover { background: #f4f4f2; } /* Accepteren en weigeren zijn bewust even groot: dat is een harde eis. */ .spaland-consent__btn--ja { background: var(--navy, #003a78); border-color: var(--navy, #003a78); color: #fff; } .spaland-consent__btn--ja:hover { background: var(--navy-dark, #002348); } /* Desktop: linksonder. Rechtsonder is gereserveerd voor de info/contact-widget — die twee mogen elkaar niet overlappen. Op mobiel blijft hij gecentreerd over de volle breedte (daar is voor twee elementen sowieso geen ruimte). */ @media (min-width: 640px) { .spaland-consent { left: 24px; right: auto; bottom: 24px; margin-inline: 0; } }