/* ===================== */ /* EFFICIALLY: SHARED CSS */ /* ===================== */ /* Fonts are loaded from each page's with preconnect, which starts the request earlier than an @import here would. */ :root { --cream: #f5f1e8; --cream-warm: #efe9dc; --dark: #262624; --dark-deep: #1e1e1c; --dark-mid: #34322f; --terracotta: #d4573a; --terracotta-d: #b8492f; --terracotta-x: #9c3d26; /* Lichtere tint van dezelfde terracotta. Kleine labels op een donkere ondergrond halen met #d4573a maar 4.15:1; hiermee 5.07:1. */ --terracotta-l: #e06b4d; --white: #ffffff; --text-sub: #5b5952; --border: rgba(38,36,34,0.10); --font-display: 'Fraunces', 'Iowan Old Style', serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;} body{ font-family:'Outfit',sans-serif; background:var(--cream); color:var(--dark); overflow-x:hidden;max-width:100%;width:100%; -webkit-font-smoothing:antialiased; } body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.018; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:128px; } a{text-decoration:none;color:inherit;} /* ── GRADIENT ACCENTS ── */ .grad-text{ background:linear-gradient(100deg,var(--terracotta) 0%,var(--terracotta-d) 55%,var(--dark) 130%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .grad-text.on-dark{ background:linear-gradient(100deg,#f2b39f 0%,var(--terracotta) 55%,var(--terracotta-d) 130%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } /* ── NAV (floating glass pill) ── Two tones: light glass over cream sections, dark glass while the bar floats over a dark one. site.js toggles .on-dark from [data-nav-dark]. */ #nav{ position:fixed;top:14px;left:14px;right:14px;z-index:1000; /* Same measure and side padding as .section, so the logo lines up with the page content below it. Centring the row instead would drift the logo hundreds of pixels inward on an ultrawide display. */ max-width:1400px;margin:0 auto; height:62px;padding:0 clamp(18px,4vw,80px); display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,48px); border-radius:100px; background:rgba(245,241,232,0.52); backdrop-filter:blur(20px) saturate(190%); -webkit-backdrop-filter:blur(20px) saturate(190%); border:1px solid rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(38,36,34,0.04), 0 6px 24px rgba(38,36,34,0.09); transition:background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, height 0.35s ease; } #nav.scrolled{ height:56px; background:rgba(245,241,232,0.74); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 34px rgba(38,36,34,0.13); } #nav.on-dark{ background:rgba(30,30,28,0.38); border-color:rgba(245,241,232,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 30px rgba(0,0,0,0.30); } #nav.on-dark.scrolled{background:rgba(30,30,28,0.6);} .nav-logo{display:flex;align-items:center;} .wordmark{font-family:var(--font-display);font-weight:600;letter-spacing:2px;line-height:1;white-space:nowrap;} .wordmark .wm-e{color:var(--terracotta-d);} .nav-logo .wordmark{font-size:17px;color:var(--dark);transition:color 0.45s ease;} #nav.on-dark .nav-logo .wordmark{color:var(--cream);} #nav.on-dark .nav-logo .wm-e{color:var(--terracotta);} .nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);list-style:none;} .nav-links a{ font-size:14px;font-weight:500;letter-spacing:0.4px; color:var(--dark);opacity:0.62;transition:opacity 0.25s, color 0.45s ease;position:relative; } /* Underline groeit via scaleX, niet via width: transform draait op de compositor, width forceert bij elke frame een layoutpass. */ .nav-links a::after{ content:'';position:absolute;bottom:-4px;left:0;width:100%;height:1.5px; background:var(--terracotta); transform:scaleX(0);transform-origin:left center; transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); } .nav-links a:hover{opacity:1;} .nav-links a:hover::after{transform:scaleX(1);} .nav-links a.active{opacity:1;} .nav-links a.active::after{transform:scaleX(1);} #nav.on-dark .nav-links a{color:var(--cream);opacity:0.7;} #nav.on-dark .nav-links a:hover,#nav.on-dark .nav-links a.active{opacity:1;} .nav-cta{ padding:10px 22px!important;background:var(--terracotta-d);color:var(--cream)!important; opacity:1!important;font-size:13px!important;font-weight:600!important; letter-spacing:1px!important;text-transform:uppercase;border-radius:100px; transition:all 0.3s cubic-bezier(0.22,1,0.36,1); } .nav-cta::after{display:none!important;} .nav-cta:hover{background:var(--terracotta-x)!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,87,58,0.28);} /* Ook op donker blijft dit terracotta-d. De lichtere --terracotta gaf crème op 3.57:1, onder de 4.5 die deze tekstgrootte nodig heeft. */ #nav.on-dark .nav-cta{background:var(--terracotta-d)!important;} #nav.on-dark .nav-cta:hover{background:var(--terracotta-x)!important;} /* ── NAV DROPDOWN ── */ .nav-dropdown{position:relative;} .nav-dropdown-trigger{ display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer; font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.4px; color:var(--dark);opacity:0.6;transition:opacity 0.25s;padding:0; } .nav-dropdown-trigger:hover,.nav-dropdown.open .nav-dropdown-trigger{opacity:1;} /* The trigger is a button, so the .nav-links a rules below never reached it: without this it stayed dark-on-dark and read as invisible. */ #nav.on-dark .nav-dropdown-trigger{color:var(--cream);opacity:0.7;} #nav.on-dark .nav-dropdown-trigger:hover, #nav.on-dark .nav-dropdown.open .nav-dropdown-trigger, #nav.on-dark .nav-dropdown-trigger.active-section{opacity:1;} .nav-dropdown-trigger .chev{width:9px;height:9px;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);} .nav-dropdown.open .nav-dropdown-trigger .chev{transform:rotate(180deg);} .nav-dropdown-panel{ position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-8px); width:520px;max-width:90vw; background:rgba(245,241,232,0.92);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5); border:1px solid rgba(255,255,255,0.5);border-radius:20px; box-shadow:0 24px 64px rgba(38,36,34,0.16); padding:22px;display:grid;grid-template-columns:1fr;gap:4px; opacity:0;visibility:hidden;pointer-events:none; transition:all 0.28s cubic-bezier(0.22,1,0.36,1); } .nav-dropdown.open .nav-dropdown-panel{opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0);} .ndp-label{font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--terracotta-d);padding:6px 12px 10px;} .ndp-col{display:grid;grid-template-columns:1fr 1fr;gap:2px;} .ndp-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;transition:background 0.2s;} .ndp-item:hover{background:rgba(212,87,58,0.08);} .ndp-item .t{font-size:13.5px;font-weight:600;color:var(--dark);} .ndp-item .d{font-size:11.5px;color:var(--text-sub);line-height:1.4;} .ndp-note{margin-top:8px;padding:14px 12px 4px;border-top:1px solid var(--border);} .ndp-note-label{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint,var(--text-sub));opacity:0.7;margin-bottom:5px;} .ndp-note p{font-size:12px;line-height:1.6;color:var(--text-sub);} .ndp-viewall{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--terracotta-d);} .nav-dropdown-trigger.active-section{opacity:1;} /* ── SHARED BUTTONS ── */ .btn-primary{ display:inline-flex;align-items:center;gap:10px; padding:16px 36px;background:var(--terracotta-d);color:var(--cream); font-family:'Outfit',sans-serif;font-size:14px;font-weight:600; letter-spacing:1.5px;text-transform:uppercase; border:none;border-radius:2px;cursor:pointer; transition:all 0.35s cubic-bezier(0.22,1,0.36,1); } .btn-primary:hover{background:var(--terracotta-x);transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,87,58,0.28);} .btn-primary .arr{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);} .btn-primary:hover .arr{transform:translateX(5px);} .btn-dark{ display:inline-flex;align-items:center;gap:10px; padding:16px 36px;background:var(--dark);color:var(--cream); font-family:'Outfit',sans-serif;font-size:14px;font-weight:600; letter-spacing:1.5px;text-transform:uppercase; border:none;border-radius:2px;cursor:pointer; transition:all 0.35s cubic-bezier(0.22,1,0.36,1); } .btn-dark:hover{background:var(--dark-mid);transform:translateY(-2px);box-shadow:0 8px 32px rgba(38,36,34,0.25);} .btn-dark .arr{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);} .btn-dark:hover .arr{transform:translateX(5px);} .btn-outline{ display:inline-flex;align-items:center;gap:10px; padding:16px 36px;background:transparent;color:var(--cream); font-family:'Outfit',sans-serif;font-size:14px;font-weight:600; letter-spacing:1.5px;text-transform:uppercase; border:1.5px solid rgba(245,241,232,0.35);border-radius:2px;cursor:pointer; transition:all 0.35s cubic-bezier(0.22,1,0.36,1); } .btn-outline:hover{border-color:rgba(245,241,232,0.7);transform:translateY(-2px);} .btn-outline .arr{transition:transform 0.3s;} .btn-outline:hover .arr{transform:translateX(5px);} /* ── SHARED SECTION ── */ .s-label{font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--terracotta-x);margin-bottom:16px;} /* Op donkere secties moet dezelfde tekst juist lichter worden. `.art-next` hoort hier niet bij: dat blok staat op cream-warm, dus daar geldt de donkere tint hierboven. */ [data-nav-dark] .s-label{color:var(--terracotta-l);} .s-title{font-family:var(--font-display);font-weight:560;font-size:clamp(34px,4.4vw,54px);line-height:1.05;letter-spacing:-0.5px;color:var(--dark);margin-bottom:20px;} .s-desc{font-size:16px;line-height:1.72;color:var(--text-sub);max-width:500px;font-weight:300;} /* ── FOOTER ── */ footer{background:var(--dark-deep);border-top:1px solid rgba(212,87,58,0.10);} .footer-inner{max-width:1400px;margin:0 auto;padding:72px clamp(24px,4vw,80px) 40px;} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:56px;border-bottom:1px solid rgba(245,241,232,0.08);} .footer-logo{display:flex;align-items:center;margin-bottom:16px;} .footer-logo .wordmark{font-size:16px;color:var(--cream);} .footer-logo .wm-e{color:var(--terracotta);} .footer-brand-desc{font-size:14px;line-height:1.72;color:rgba(245,241,232,0.52);font-weight:300;max-width:300px;margin-bottom:28px;} .footer-direct-card{max-width:280px;border:1px solid rgba(212,87,58,0.16);border-radius:12px;padding:20px;background:rgba(212,87,58,0.05);} .fdc-label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--terracotta-l);margin-bottom:10px;} .fdc-phone{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-0.2px;color:var(--cream);margin-bottom:14px;transition:color 0.2s;} .fdc-phone:hover{color:var(--terracotta);} .fdc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .fdc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px; border-radius:100px;font-size:12.5px;font-weight:600; background:rgba(245,241,232,0.08);border:1px solid rgba(245,241,232,0.14);color:var(--cream); transition:all 0.25s; } .fdc-btn:hover{background:rgba(245,241,232,0.14);} .fdc-btn.whatsapp{background:#25D366;border-color:#25D366;color:#0b3d1e;} .fdc-btn.whatsapp:hover{background:#1fb959;} .fdc-btn svg{width:14px;height:14px;} .f-col-title{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(245,241,232,0.62);margin-bottom:22px;} .f-col a{display:block;font-size:14px;color:rgba(245,241,232,0.52);margin-bottom:13px;transition:color 0.3s;font-weight:300;} .f-col a:hover{color:var(--cream);} /* Vaste bedrijfsgegevens in de contactkolom. Zelfde ritme als de links ernaast, maar iets gedempter zodat het niet als klikbaar leest. */ .f-col-meta{ display:block;font-size:13px;font-weight:300;line-height:1.6; color:rgba(245,241,232,0.52);margin-top:20px;padding-top:16px; border-top:1px solid rgba(245,241,232,0.08); } .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;gap:16px;flex-wrap:wrap;} .footer-legal{display:flex;gap:20px;align-items:center;} /* The booking button is fixed to the bottom right of the viewport, which lands straight on top of these legal links at the end of the page. Reserve room for it, but only on pages that carry the button. */ body:has(.book-fab) .footer-inner{padding-bottom:120px;} @media(max-width:640px){ body:has(.book-fab) .footer-inner{padding-bottom:150px;} } /* ── FLOATING BOOKING BUTTON ── Cal.com's own bubble renders inside a shadow root with no ::part() hooks, so it cannot take the site's styling. This button opens the same Cal modal through their element-click trigger, which lets it use the same frosted glass as the nav. Dark glass rather than terracotta glass: translucent terracotta under cream text drops below the 4.5:1 contrast floor, while this holds roughly 8:1. */ .book-fab{ position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:1200; display:inline-flex;align-items:center;gap:10px; min-height:52px;padding:0 26px; font-family:'Outfit',sans-serif;font-size:13px;font-weight:600; letter-spacing:1px;text-transform:uppercase;color:var(--cream); background:rgba(30,30,28,0.80); backdrop-filter:blur(20px) saturate(190%); -webkit-backdrop-filter:blur(20px) saturate(190%); border:1px solid rgba(245,241,232,0.18);border-radius:100px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 32px rgba(0,0,0,0.28); cursor:pointer; transition:background 0.3s ease,transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease,border-color 0.3s ease; } .book-fab:hover{ background:rgba(30,30,28,0.9); border-color:rgba(212,87,58,0.55); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 14px 38px rgba(0,0,0,0.34); } /* Inverts over dark sections, the same way the nav does, so the button never sinks into the background it happens to be floating over. */ .book-fab.on-dark{ background:rgba(245,241,232,0.82); color:var(--dark); border-color:rgba(255,255,255,0.55); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 32px rgba(0,0,0,0.30); } .book-fab.on-dark:hover{ background:rgba(245,241,232,0.94); border-color:rgba(212,87,58,0.5); } .book-fab-dot{ width:7px;height:7px;border-radius:50%;background:var(--terracotta);flex-shrink:0; box-shadow:0 0 0 4px rgba(212,87,58,0.20); animation:blink 2.4s ease-in-out infinite; } .book-fab.on-dark .book-fab-dot{background:var(--terracotta-d);} @media(max-width:520px){ .book-fab{left:14px;right:14px;justify-content:center;padding:0 20px;} } .footer-copy{font-size:12px;color:rgba(245,241,232,0.52);letter-spacing:0.5px;} .footer-privacy{font-size:12px;color:rgba(245,241,232,0.52);letter-spacing:0.5px;transition:color 0.3s;} .footer-privacy:hover{color:rgba(245,241,232,0.7);} /* ── PRIVACY CONSENT ── */ .consent-group{margin-top:16px;margin-bottom:4px;display:flex;align-items:center;gap:10px;} .consent-check{ -webkit-appearance:none;appearance:none; width:16px;height:16px;min-width:16px;flex-shrink:0; border:1.5px solid rgba(38,36,34,0.28);border-radius:3px; background:transparent;cursor:pointer; transition:all 0.2s cubic-bezier(0.22,1,0.36,1); } .consent-check:checked{ background:var(--terracotta);border-color:var(--terracotta); background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8.5 6.5 12 13 4.5' stroke='%23f5f1e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:11px; } .consent-label{font-size:12px;font-weight:300;color:rgba(38,36,34,0.55);letter-spacing:0;text-transform:none;opacity:1!important;cursor:pointer;line-height:1.5;margin:0!important;} .consent-label a{color:var(--dark);text-decoration:underline;text-underline-offset:2px;} .submit-btn:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;box-shadow:none!important;} /* ── CTA BANNER FIX ── */ .cta-banner .btn-primary,.cta-banner .btn-dark{position:relative;} /* ── FOCUS ── De browserstandaardring is een dunne donkere lijn. Die verdwijnt volledig op de donkere secties en op de glazen navigatiebalk zodra die .on-dark is. Daarom een eigen ring die van toon wisselt met de ondergrond. :focus-visible en niet :focus, zodat een muisklik geen ring achterlaat maar toetsenbordnavigatie wel altijd zichtbaar blijft. */ :focus-visible{ outline:2px solid var(--terracotta-d); outline-offset:3px; } /* Op donkere secties wint terracotta het niet van #262624 (2.2:1), dus daar crème. Het geldt ook voor de voettekst en elke CTA banner. */ [data-nav-dark] :focus-visible, .footer :focus-visible, #nav.on-dark :focus-visible, .book-fab.on-dark:focus-visible{ outline-color:var(--cream); } /* De navigatie zit onder de bovenrand geklemd; zonder krappere offset loopt de ring op het eerste item buiten de pil. */ #nav :focus-visible{outline-offset:2px;} /* De formuliervelden hebben hun eigen focusbehandeling in contact.html, omdat de veldstijlen daar staan en niet hier. */ /* ── ANIMATIONS ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}} @keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}} /* Alleen opacity en transform, nooit `all`: dat pakt ook layout properties mee die per ongeluk op een .reveal element staan. 0.5s en 20px lezen als een fade, niet als een schuif. */ .reveal{ opacity:0;transform:translateY(20px); transition:opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); } .reveal.visible{opacity:1;transform:translateY(0);} .d1{transition-delay:0.1s;}.d2{transition-delay:0.2s;}.d3{transition-delay:0.3s;}.d4{transition-delay:0.4s;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;} .reveal{opacity:1;transform:none;} } /* ── RESPONSIVE ── */ @media(max-width:640px){ .footer-top{grid-template-columns:1fr;gap:36px;} .footer-bottom{flex-direction:column;gap:16px;} } /* ── HAMBURGER ── */ .nav-hamburger{ display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0; } .nav-hamburger span{ display:block;width:22px;height:2px;background:var(--dark);border-radius:2px; transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),opacity 0.3s,background-color 0.45s ease; transform-origin:center; } #nav.on-dark .nav-hamburger span{background:var(--cream);} .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ── MOBILE MENU ── */ .mobile-menu{ display:none;position:fixed;top:84px;left:14px;right:14px; max-height:calc(100vh - 100px);z-index:999; background:rgba(245,241,232,0.86); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,0.55);border-radius:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 20px 50px rgba(38,36,34,0.18); flex-direction:column;padding:14px; opacity:0;transform:translateY(-10px) scale(0.985); transition:opacity 0.32s cubic-bezier(0.22,1,0.36,1),transform 0.32s cubic-bezier(0.22,1,0.36,1); pointer-events:none;overflow-y:auto;-webkit-overflow-scrolling:touch; } .mobile-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;} .mobile-menu > a{ font-family:'Outfit',sans-serif;font-size:17px;font-weight:500;letter-spacing:0.2px; color:var(--dark);opacity:0.72;min-height:52px;display:flex;align-items:center; padding:0 14px;border-radius:12px;transition:background 0.2s,opacity 0.2s; } .mobile-menu > a:hover,.mobile-menu > a.active{opacity:1;background:rgba(212,87,58,0.07);} .mobile-group{display:flex;flex-direction:column;} .mobile-group-toggle{ display:flex;align-items:center;justify-content:space-between;width:100%; font-family:'Outfit',sans-serif;font-size:17px;font-weight:500;letter-spacing:0.2px; color:var(--dark);opacity:0.72;min-height:52px;padding:0 14px; background:none;border:none;border-radius:12px;cursor:pointer;text-align:left; transition:background 0.2s,opacity 0.2s; } .mobile-group-toggle:hover,.mobile-group.open .mobile-group-toggle{opacity:1;background:rgba(212,87,58,0.07);} .mobile-group-toggle .chev{width:11px;height:11px;flex-shrink:0;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);} .mobile-group.open .mobile-group-toggle .chev{transform:rotate(180deg);} .mobile-sub{ display:grid;grid-template-rows:0fr; transition:grid-template-rows 0.32s cubic-bezier(0.22,1,0.36,1); } .mobile-group.open .mobile-sub{grid-template-rows:1fr;} .mobile-sub-inner{overflow:hidden;display:flex;flex-direction:column;padding-left:14px;} .mobile-sub a{ font-size:15px;font-weight:400;color:var(--text-sub); min-height:46px;display:flex;align-items:center;padding:0 14px; border-left:1px solid var(--border);transition:color 0.2s,border-color 0.2s; } .mobile-sub a:hover{color:var(--dark);border-left-color:var(--terracotta);} .mobile-sub a.all{color:var(--terracotta-d);font-weight:600;} .mobile-cta-wrap{margin-top:10px;padding:4px;} .mobile-cta-wrap a{ display:flex!important;align-items:center;justify-content:center;gap:10px; min-height:52px;background:var(--terracotta-d)!important;color:var(--cream)!important; font-family:'Outfit',sans-serif!important;font-size:14px!important;font-weight:600!important; letter-spacing:1.5px!important;text-transform:uppercase;border-radius:100px; opacity:1!important; } @media(max-width:768px){ .nav-links{display:none!important;} .nav-hamburger{display:flex!important;} .mobile-menu{display:flex;} .footer-top{grid-template-columns:1fr!important;gap:36px!important;} .footer-bottom{flex-direction:column!important;gap:16px!important;} .hero-grid.v{display:none!important;} } @media(max-width:768px){ html,body{overflow-x:hidden;max-width:100%;width:100%;} .hero-grid.v{display:none!important;} .hero-content{grid-template-columns:1fr!important;} .hero-right{flex-direction:column!important;gap:0!important;} .hero-stat{padding:20px 0!important;border-right:none!important;border-top:1px solid rgba(212,87,58,0.15)!important;} .paths-grid,.story-grid,.svc-intro{grid-template-columns:1fr!important;gap:40px!important;} .services-grid,.values-grid,.hub-grid,.svc-includes-grid,.svc-forwho-grid{grid-template-columns:1fr!important;} .process-track,.svc-cross-grid{grid-template-columns:1fr!important;} .contact-layout{grid-template-columns:1fr!important;} .contact-left{padding:120px 24px 48px!important;} .contact-right{padding:48px 24px 80px!important;} .footer-top{grid-template-columns:1fr!important;gap:36px!important;} .footer-bottom{flex-direction:column!important;gap:16px!important;} .hero-actions{flex-direction:column!important;align-items:flex-start!important;} .services-header{flex-direction:column!important;align-items:flex-start!important;} .form-row{grid-template-columns:1fr!important;} } /* ── BOOK CALL OPTION ── */ .contact-book-options{display:flex;flex-direction:column;gap:12px;margin-top:28px;} .contact-book-label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--terracotta);margin-bottom:12px;} /* ── COOKIE BANNER ── */ /* Above the Cal.com floating button, which ships a very high z-index of its own, so the consent choice is never covered on a first visit. */ #cookie-banner{ position:fixed;left:0;right:0;bottom:0;z-index:2147483000; padding:0 clamp(16px,3vw,24px) clamp(16px,3vw,24px); transform:translateY(140%);opacity:0; transition:all 0.45s cubic-bezier(0.22,1,0.36,1); pointer-events:none; } #cookie-banner.show{transform:translateY(0);opacity:1;pointer-events:all;} .cookie-banner-inner{ max-width:900px;margin:0 auto; background:var(--dark-deep);border:1px solid rgba(212,87,58,0.18);border-radius:2px; padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap; box-shadow:0 20px 60px rgba(0,0,0,0.25); } .cookie-banner-text{flex:1 1 320px;font-size:13.5px;line-height:1.65;color:rgba(245,241,232,0.65);font-weight:300;} .cookie-banner-text a{color:var(--cream);text-decoration:underline;text-underline-offset:2px;} .cookie-banner-actions{display:flex;gap:10px;flex-shrink:0;} .cookie-btn{ padding:11px 22px;border-radius:2px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600; letter-spacing:0.8px;text-transform:uppercase;cursor:pointer;transition:all 0.25s cubic-bezier(0.22,1,0.36,1); } .cookie-btn-reject{background:transparent;border:1px solid rgba(245,241,232,0.25);color:rgba(245,241,232,0.7);} .cookie-btn-reject:hover{border-color:rgba(245,241,232,0.5);color:var(--cream);} .cookie-btn-accept{background:var(--terracotta-d);border:1px solid var(--terracotta-d);color:var(--cream);} .cookie-btn-accept:hover{background:var(--terracotta-x);border-color:var(--terracotta-x);} .cookie-settings-link{background:none;border:none;cursor:pointer;padding:0;font:inherit;} @media(max-width:640px){ .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:left;padding:18px 20px;gap:16px;} /* The row layout's flex-basis becomes a height once the axis flips, which padded the text out to 320px tall. Reset it here. */ .cookie-banner-text{flex:0 0 auto;font-size:13px;line-height:1.55;} .cookie-banner-actions{width:100%;} .cookie-btn{flex:1;min-height:44px;} } /* ── CTA BANNER OVERRIDES ── Higher specificity than the per-page .cta-banner rules, so one definition governs the banner on every page. */ section.cta-section{padding-bottom:clamp(64px,7vw,104px);} section.cta-section .cta-banner{ padding:clamp(44px,5vw,68px) clamp(28px,4vw,56px); border-radius:14px; } section.cta-section .cta-banner .s-title{ font-size:clamp(26px,3vw,36px);line-height:1.15;margin-bottom:12px; } section.cta-section .cta-banner .s-desc{ font-size:15px;max-width:46ch;margin:0 auto 30px; } .cta-single{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;} /* ── SERVICE PAGE TEMPLATE ── */ .section{padding:clamp(80px,10vw,140px) clamp(24px,4vw,80px);max-width:1400px;margin:0 auto;} .page-tag{font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--terracotta-l);margin-bottom:20px;} .svc-hero{background:var(--dark-deep);padding:150px clamp(24px,4vw,80px) 90px;position:relative;overflow:hidden;} .svc-hero::before{content:'';position:absolute;top:-200px;right:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(212,87,58,0.10) 0%,transparent 70%);} /* Same 1400px measure as .section, so the left edge runs in one unbroken line from the hero down through every section below. */ .svc-hero-inner{max-width:1400px;margin:0 auto;position:relative;z-index:1;} .svc-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(42px,5.6vw,66px);line-height:1.08;letter-spacing:-1px;color:var(--cream);max-width:800px;} .svc-hero-desc{font-size:17px;line-height:1.75;color:rgba(245,241,232,0.5);font-weight:300;max-width:600px;margin-top:24px;} .svc-hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;} .svc-hero-meta-item{font-size:12.5px;color:rgba(245,241,232,0.45);padding-left:16px;position:relative;} .svc-hero-meta-item::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--terracotta);} .svc-intro{display:grid;grid-template-columns:0.8fr 1.2fr;gap:70px;align-items:start;} .svc-intro-body p{font-size:16.5px;line-height:1.85;color:var(--text-sub);font-weight:300;margin-bottom:22px;} .svc-intro-body p:last-child{margin-bottom:0;} .svc-intro-body strong{color:var(--dark);font-weight:600;} .svc-includes-header{margin-bottom:48px;max-width:640px;} .svc-includes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);} .svc-inc-card{background:var(--cream-warm);padding:36px 30px;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);} .svc-inc-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);} .svc-inc-card:hover::before{transform:scaleX(1);} .svc-inc-card:hover{background:var(--white);} .svc-inc-card h4{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-0.2px;color:var(--dark);margin-bottom:10px;} .svc-inc-card p{font-size:13.5px;line-height:1.68;color:var(--text-sub);font-weight:300;} .svc-approach{background:var(--dark-deep);position:relative;overflow:hidden;} .svc-approach::before{content:'';position:absolute;bottom:-200px;left:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(212,87,58,0.06) 0%,transparent 70%);} .svc-approach-inner{max-width:1400px;margin:0 auto;padding:clamp(80px,10vw,140px) clamp(24px,4vw,80px);position:relative;z-index:1;} .svc-approach-inner .s-title{color:var(--cream);} .svc-steps{display:flex;flex-direction:column;gap:0;margin-top:56px;} .svc-step{display:grid;grid-template-columns:60px 1fr;gap:28px;padding:32px 0;border-bottom:1px solid rgba(245,241,232,0.08);} .svc-step:first-child{border-top:1px solid rgba(245,241,232,0.08);} .svc-step-num{font-family:var(--font-display);font-style:italic;font-size:30px;color:var(--terracotta);line-height:1.2;} .svc-step h4{font-size:17px;font-weight:600;color:var(--cream);margin-bottom:8px;} .svc-step p{font-size:14px;line-height:1.75;color:rgba(245,241,232,0.46);font-weight:300;max-width:74ch;} .svc-step p + p{margin-top:12px;} .svc-step-deliver{ margin-top:16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap; padding-top:14px;border-top:1px solid rgba(245,241,232,0.07); } .svc-step-deliver .k{ font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase; color:var(--terracotta);flex-shrink:0; } .svc-step-deliver .v{font-size:13px;color:rgba(245,241,232,0.62);font-weight:300;} .svc-forwho-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .svc-forwho-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:30px 28px;} .svc-forwho-card h4{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--dark);margin-bottom:8px;} .svc-forwho-card p{font-size:13.5px;line-height:1.7;color:var(--text-sub);font-weight:300;} .svc-faq{max-width:820px;} .svc-faq details{border-bottom:1px solid var(--border);} .svc-faq details:first-child{border-top:1px solid var(--border);} /* Padding sits on the summary, not the details, so the whole row is a comfortable tap target rather than just the line of text. */ .svc-faq summary{ font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.35;color:var(--dark); cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:20px 0;min-height:64px; } .svc-faq summary::-webkit-details-marker{display:none;} .svc-faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--terracotta-d);flex-shrink:0;transition:transform 0.25s;font-family:'Outfit',sans-serif;} .svc-faq details[open] summary::after{transform:rotate(45deg);} .svc-faq details p{font-size:14.5px;line-height:1.75;color:var(--text-sub);font-weight:300;margin-top:0;padding-bottom:22px;max-width:70ch;} /* Pointer from a page's short FAQ block to the full list */ .faq-more{margin-top:26px;font-size:14px;color:var(--text-sub);font-weight:300;} .faq-more a{color:var(--terracotta-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;} .faq-pointer{background:var(--cream);border-top:1px solid var(--border);} .faq-pointer-inner{max-width:1400px;margin:0 auto;padding:28px clamp(24px,4vw,80px);text-align:center;} .faq-pointer .faq-more{margin-top:0;} .svc-cross{background:var(--cream-warm);} .svc-cross-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px;} .svc-cross-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px 18px;transition:all 0.3s;} .svc-cross-card:hover{border-color:rgba(212,87,58,0.3);transform:translateY(-3px);} .svc-cross-card .t{font-size:13.5px;font-weight:600;color:var(--dark);margin-bottom:4px;} .svc-cross-card .d{font-size:11.5px;color:var(--text-sub);line-height:1.4;} .cta-section{max-width:1400px;margin:0 auto;padding:0 clamp(24px,4vw,80px) clamp(80px,10vw,140px);} .cta-banner{background:var(--dark-deep);border-radius:2px;padding:clamp(60px,8vw,100px) clamp(40px,6vw,80px);text-align:center;position:relative;overflow:hidden;} .cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(212,87,58,0.10) 0%,transparent 70%);} .cta-banner .s-title{color:var(--cream);margin-bottom:16px;position:relative;} .cta-banner .s-desc{color:rgba(245,241,232,0.45);margin:0 auto 40px;text-align:center;position:relative;} @media(max-width:1024px){ .svc-intro{grid-template-columns:1fr;gap:36px;} .svc-includes-grid{grid-template-columns:1fr;} .svc-forwho-grid{grid-template-columns:1fr;} .svc-cross-grid{grid-template-columns:repeat(2,1fr);} } /* ── KENNISBANK: OVERZICHT ── */ .kb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:56px;} .kb-card{ display:flex;flex-direction:column; background:var(--white);border:1px solid var(--border); padding:38px 34px 32px; transition:border-color 0.35s cubic-bezier(0.22,1,0.36,1), transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1); } .kb-card:hover{ border-color:rgba(212,87,58,0.32); transform:translateY(-4px); box-shadow:0 14px 40px rgba(38,36,34,0.08); } .kb-card-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px;} .kb-card-topic{ font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:var(--terracotta-d); } .kb-card-read{font-size:11px;color:var(--text-sub);opacity:0.7;letter-spacing:0.4px;} .kb-card h3{ font-family:var(--font-display);font-weight:560; font-size:clamp(21px,2.1vw,26px);line-height:1.22;letter-spacing:-0.3px; color:var(--dark);margin-bottom:14px; } .kb-card p{font-size:14.5px;line-height:1.75;color:var(--text-sub);font-weight:300;margin-bottom:24px;} .kb-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;} .kb-card-link{ font-size:13px;font-weight:600;letter-spacing:0.4px;color:var(--terracotta-d); display:inline-flex;align-items:center;gap:8px; } .kb-card-link .arr{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);} .kb-card:hover .kb-card-link .arr{transform:translateX(5px);} .kb-card-svc{font-size:11px;color:var(--text-sub);opacity:0.6;} /* ── KENNISBANK: ARTIKEL ── */ .art-hero{background:var(--dark-deep);padding:150px clamp(24px,4vw,80px) 80px;position:relative;overflow:hidden;} .art-hero::before{ content:'';position:absolute;top:-200px;right:-180px;width:560px;height:560px; border-radius:50%;background:radial-gradient(circle,rgba(212,87,58,0.10) 0%,transparent 70%); } /* Zelfde 1400px maat als .section, zodat de linkerrand van de titel doorloopt in de linkerrand van de lopende tekst eronder. */ .art-hero-inner{max-width:1400px;margin:0 auto;position:relative;z-index:1;} .art-crumb{font-size:12px;letter-spacing:0.5px;margin-bottom:22px;color:rgba(245,241,232,0.62);} .art-crumb a{color:rgba(245,241,232,0.78);text-decoration:underline;text-underline-offset:3px;} .art-crumb a:hover{color:var(--cream);} .art-hero h1{ font-family:var(--font-display);font-weight:600; font-size:clamp(34px,4.8vw,60px);line-height:1.1;letter-spacing:-1px; color:var(--cream);max-width:19ch; animation:fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both; } .art-standfirst{ font-size:18px;line-height:1.72;color:rgba(245,241,232,0.5);font-weight:300; max-width:60ch;margin-top:26px; animation:fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.4s both; } .art-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:34px; padding-top:22px;border-top:1px solid rgba(245,241,232,0.10); font-size:12px;color:rgba(245,241,232,0.62);letter-spacing:0.4px; } .art-meta .sep{opacity:0.35;} /* De tekstkolom is bewust smal. Rond de 70 tekens per regel leest het prettigst; over de volle 1400px wordt lopende tekst onleesbaar. */ .art-wrap{max-width:1400px;margin:0 auto;padding:clamp(64px,7vw,96px) clamp(24px,4vw,80px) 0;} .art-body{max-width:72ch;} .art-body h2{ font-family:var(--font-display);font-weight:560; font-size:clamp(25px,2.8vw,34px);line-height:1.2;letter-spacing:-0.4px; color:var(--dark);margin:56px 0 20px; } .art-body h2:first-child{margin-top:0;} .art-body h3{ font-size:17px;font-weight:600;letter-spacing:0.1px; color:var(--dark);margin:36px 0 12px; } .art-body p{font-size:16.5px;line-height:1.85;color:var(--text-sub);font-weight:300;margin-bottom:22px;} .art-body strong{color:var(--dark);font-weight:500;} .art-body a{color:var(--terracotta-d);text-decoration:underline;text-underline-offset:3px;} .art-body a:hover{color:var(--terracotta-x);} /* Een knop is geen lopende-tekstlink. Zonder deze uitzondering wint de regel hierboven op specificiteit (0,1,1 tegen 0,1,0) van .btn-primary en wordt de tekst terracotta op terracotta, dus onleesbaar. */ .art-body .btn-primary, .art-body .btn-dark, .art-body .btn-outline{color:var(--cream);text-decoration:none;} .art-body .btn-primary:hover, .art-body .btn-dark:hover, .art-body .btn-outline:hover{color:var(--cream);} .art-body ul,.art-body ol{margin:0 0 24px 0;padding-left:22px;} .art-body li{ font-size:16.5px;line-height:1.8;color:var(--text-sub);font-weight:300; margin-bottom:11px;padding-left:6px; } .art-body li::marker{color:var(--terracotta);} .art-body li strong{color:var(--dark);font-weight:500;} /* Kernpunt: het antwoord in één blok, zodat een taalmodel dat losse fragment kan citeren zonder de rest van de pagina nodig te hebben. */ .art-key{ border-left:2px solid var(--terracotta); background:var(--cream-warm); padding:26px 30px;margin:32px 0 34px; } .art-key-label{ font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:var(--terracotta-x);margin-bottom:10px; } .art-key p{font-size:16px;line-height:1.8;color:var(--dark);font-weight:400;margin:0;} .art-quote{ font-family:var(--font-display);font-style:italic;font-weight:400; font-size:clamp(21px,2.4vw,27px);line-height:1.42;letter-spacing:-0.2px; color:var(--dark);margin:40px 0;padding-left:26px; border-left:2px solid rgba(212,87,58,0.35); } .art-quote cite{ display:block;margin-top:14px;font-family:'Outfit',sans-serif;font-style:normal; font-size:12.5px;font-weight:400;letter-spacing:0.4px;color:var(--text-sub); } .art-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 30px;} .art-table{width:100%;border-collapse:collapse;min-width:460px;} .art-table th,.art-table td{ text-align:left;padding:14px 16px;border-bottom:1px solid var(--border); font-size:14.5px;line-height:1.6;font-weight:300;color:var(--text-sub); } .art-table th{ font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase; color:var(--dark);border-bottom:1px solid rgba(38,36,34,0.22); } .art-table td strong{color:var(--dark);font-weight:500;} /* Doorverwijzing naar de dienst waar dit artikel bij hoort. */ .art-svc{ display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:var(--dark-deep);padding:32px 34px;margin:48px 0 8px; } .art-svc-text .l{ font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:var(--terracotta-l);margin-bottom:8px; } .art-svc-text .t{font-family:var(--font-display);font-size:22px;font-weight:560;color:var(--cream);margin-bottom:6px;} .art-svc-text p{font-size:14px;line-height:1.7;color:rgba(245,241,232,0.58);font-weight:300;margin:0;max-width:52ch;} .art-sources{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--border);} .art-sources-label{ font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:var(--dark);opacity:0.5;margin-bottom:16px; } .art-sources ol{padding-left:20px;margin:0;} .art-sources li{font-size:13px;line-height:1.7;color:var(--text-sub);margin-bottom:9px;} .art-sources a{color:var(--terracotta-d);text-decoration:underline;text-underline-offset:2px;word-break:break-word;} .art-next{background:var(--cream-warm);border-top:1px solid var(--border);margin-top:clamp(64px,7vw,96px);} .art-next-inner{max-width:1400px;margin:0 auto;padding:clamp(56px,6vw,80px) clamp(24px,4vw,80px);} .art-next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:36px;} @media(max-width:900px){ .kb-grid{grid-template-columns:1fr;} .art-next-grid{grid-template-columns:1fr;} .art-svc{flex-direction:column;align-items:flex-start;gap:20px;} .art-svc .btn-primary{width:100%;justify-content:center;} } /* ── DIENSTPAGINA: VERWIJZING NAAR HET EIGEN ARTIKEL ── Sluit de lus. Elk artikel wijst onderaan naar zijn dienst; dit blok wijst vanaf de dienst terug naar het artikel. */ .svc-reading{background:var(--cream);border-top:1px solid var(--border);} .svc-reading-inner{max-width:1400px;margin:0 auto;padding:clamp(52px,6vw,76px) clamp(24px,4vw,80px);} .svc-reading-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:32px;}