/* ============================================================ SHD Services — gedeelde stylesheet (designtaal: concept C v2) Gebruikt door alle pagina's. Zie /assets/TEMPLATE-GUIDE.md. ============================================================ */ /* ============ RESET & TOKENS ============ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --cream:#F8F7F4; --ink:#17181C; --ink-soft:#4B4C55; --blue:#6395ee; --blue-deep:#3560CF; --coral:#FF6B4A; --coral-deep:#E04B26; --yellow:#FFC93C; --yellow-deep:#C7860A; --mint:#4FC99B; --mint-deep:#1E9A6E; --lila:#A985EA; --lila-deep:#7A4FD0; --bg-blue:#E4EDFC; --bg-yellow:#FAF0D6; --bg-mint:#DFF3E7; --bg-lila:#ECE4F9; --bg-coral:#FCE4DC; --panel-blue:#D8E5FB; --panel-mint:#D6F0E2; --panel-yellow:#FFE9B3; --panel-lila:#E5D9F8; --panel-coral:#FFDFD4; --display:"Bricolage Grotesque","Inter",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,sans-serif; --radius:28px; } html{scroll-padding-top:104px;overflow-x:clip} @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } body{ font-family:var(--body); background:var(--cream); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--yellow);color:var(--ink)} img{max-width:100%;display:block} a{color:inherit} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} :focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;line-height:1.02} .container{width:min(1240px,92%);margin:0 auto} /* Sectie-achtergronden: fallback zonder JS / reduced motion. Met .motion op worden [data-bg]-secties transparant en animeert GSAP de body-kleur (kleurenreis). */ section{position:relative} .sec-bg-blue{background:var(--bg-blue)} .sec-bg-yellow{background:var(--bg-yellow)} .sec-bg-mint{background:var(--bg-mint)} .sec-bg-lila{background:var(--bg-lila)} .sec-bg-coral{background:var(--bg-coral)} .sec-bg-cream{background:var(--cream)} .motion section[data-bg]{background:transparent} /* ============ PROGRESS BAR ============ */ .progress{ position:fixed;top:0;left:0;right:0;height:4px;z-index:1200; background:linear-gradient(90deg,var(--blue),var(--coral),var(--yellow),var(--mint),var(--lila)); transform:scaleX(0);transform-origin:left center;pointer-events:none; } html:not(.motion) .progress{display:none} /* ============ NAV ============ */ .nav{ position:fixed;top:14px;left:0;right:0;z-index:1100; display:flex;justify-content:center;pointer-events:none; } .nav-inner{ pointer-events:auto; position:relative; width:min(1240px,94%); display:flex;align-items:center;justify-content:space-between;gap:1rem; background:rgba(248,247,244,.78); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(23,24,28,.08); border-radius:999px; padding:.6rem 1.1rem .6rem 1.25rem; transition:box-shadow .3s ease; } .nav.scrolled .nav-inner{box-shadow:0 10px 30px rgba(23,24,28,.10)} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none} .brand img{height:30px;width:auto} .nav-links{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:1.6rem; } .nav-links > a,.nav-dd > a{ text-decoration:none;font-size:.92rem;font-weight:600;color:var(--ink); position:relative; } .nav-links > a::after,.nav-dd > a::after{ content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px; background:var(--blue-deep);transition:right .25s ease; } .nav-links > a:hover::after,.nav-dd > a:hover::after, .nav-links > a[aria-current]::after,.nav-dd > a[aria-current]::after{right:0} .nav-cta{ text-decoration:none;font-size:.92rem;font-weight:600; background:var(--ink);color:var(--cream); padding:.55rem 1.2rem;border-radius:999px; white-space:nowrap; transition:background .25s ease,transform .25s ease; } .nav-cta:hover{background:var(--blue-deep);transform:translateY(-1px)} /* Dropdown (Diensten) */ .nav-dd{position:relative;display:flex;align-items:center} .nav-dd > a{display:inline-flex;align-items:center;gap:.35rem} .nav-dd .caret{transition:transform .25s ease;flex:none} .nav-dd.open .caret,.nav-dd:hover .caret,.nav-dd:focus-within .caret{transform:rotate(180deg)} .dd-menu{ position:absolute;top:100%;left:50%;transform:translateX(-50%); padding-top:.9rem; /* onzichtbare hover-brug tussen trigger en menu */ opacity:0;visibility:hidden; transition:opacity .22s ease,visibility .22s ease; } .dd-inner{ display:flex;flex-direction:column;min-width:220px; background:rgba(248,247,244,.96); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(23,24,28,.08); border-radius:20px;padding:.5rem; box-shadow:0 18px 44px -14px rgba(23,24,28,.25); } .nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu,.nav-dd.open .dd-menu{ opacity:1;visibility:visible; } .dd-inner a{ display:flex;align-items:center;gap:.6rem; text-decoration:none;font-size:.9rem;font-weight:600;color:var(--ink); padding:.55rem .9rem;border-radius:13px; transition:background .2s ease; } .dd-inner a:hover,.dd-inner a[aria-current]{background:rgba(23,24,28,.06)} .dd-inner a i{width:9px;height:9px;border-radius:50%;flex:none} .dd-inner a .d-blue{background:var(--blue)} .dd-inner a .d-coral{background:var(--coral)} .dd-inner a .d-mint{background:var(--mint)} .dd-inner a .d-lila{background:var(--lila)} /* Burger + mobiel menu */ .burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;align-items:center;border-radius:50%} .burger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .3s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} .menu-overlay{ position:fixed;inset:0;z-index:1050;background:var(--cream); display:flex;flex-direction:column;justify-content:center;padding:6rem 8% 3rem; overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease; } .menu-overlay.open{opacity:1;visibility:visible} .menu-overlay nav{display:flex;flex-direction:column;gap:.4rem} .menu-overlay .m-link{ font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,8vw,3rem); text-decoration:none;letter-spacing:-0.02em;line-height:1.25; display:flex;align-items:baseline;gap:1rem; } .menu-overlay .m-link small{font-family:var(--body);font-size:.85rem;font-weight:700;letter-spacing:.1em} .menu-overlay .m-link[aria-current]{color:var(--blue-deep)} .m-num-blue{color:var(--blue-deep)} .m-num-coral{color:var(--coral)} .m-num-yellow{color:var(--yellow-deep)} .m-num-mint{color:var(--mint-deep)} .m-num-lila{color:var(--lila-deep)} .m-dd-row{display:flex;align-items:center;justify-content:space-between;gap:1rem} .m-sub-toggle{ width:46px;height:46px;border-radius:50%;flex:none; border:2px solid rgba(23,24,28,.18); display:grid;place-items:center; } .m-sub-toggle svg{transition:transform .3s ease} .m-sub-toggle[aria-expanded="true"] svg{transform:rotate(45deg)} .m-sub{ display:flex;flex-direction:column;gap:.1rem; padding:.3rem 0 .6rem 2.4rem; } .m-sub[hidden]{display:none} .m-sub a{ font-family:var(--display);font-weight:700;font-size:1.25rem; text-decoration:none;color:var(--ink-soft);line-height:1.9; } .m-sub a[aria-current]{color:var(--blue-deep)} .menu-mail{margin-top:2.4rem;font-size:1rem;color:var(--ink-soft)} .menu-mail a{font-weight:700;color:var(--blue-deep)} @media (max-width:860px){ .nav-links,.nav-cta{display:none} .burger{display:flex} } @media (min-width:861px){ .menu-overlay{display:none} } /* ============ HERO (homepage) ============ */ .hero{ min-height:100svh; display:flex;align-items:center; padding:9rem 0 5rem; overflow:hidden; } .hero-inner{position:relative;z-index:2} .hero h1{ font-size:clamp(2.1rem,9.4vw,8.4rem); line-height:.98; letter-spacing:-0.035em; } .h-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .h-line-in{display:inline-block;will-change:transform} .h-accent{color:var(--blue-deep);position:relative;display:inline-block} .h-accent svg{ position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.22em;overflow:visible; } .h-accent svg path{stroke:var(--coral);stroke-width:8;fill:none;stroke-linecap:round} .hero-sub{ max-width:560px;margin-top:2.2rem; font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-soft); } .hero-sub strong{color:var(--ink)} .hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem} .hero-scrollhint{ position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.5rem; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-soft); z-index:2; } .hero-scrollhint .line{width:2px;height:44px;background:rgba(23,24,28,.18);position:relative;overflow:hidden;border-radius:2px} .hero-scrollhint .line::after{ content:"";position:absolute;left:0;top:-50%;width:100%;height:50%; background:var(--ink);border-radius:2px; } .motion .hero-scrollhint .line::after{animation:scrollhint 1.8s ease-in-out infinite} @keyframes scrollhint{0%{top:-50%}60%,100%{top:110%}} @media (max-width:640px){.hero-scrollhint{display:none}} /* Kleurshapes (hero + 404) */ .shape{position:absolute;z-index:1;pointer-events:none} .shape.s1{width:130px;height:130px;border-radius:50%;background:var(--blue);opacity:.9;top:16%;right:10%} .shape.s2{width:70px;height:70px;border-radius:22px;background:var(--coral);top:56%;right:24%;transform:rotate(18deg)} .shape.s3{width:150px;height:60px;border-radius:999px;background:var(--yellow);top:30%;right:26%;transform:rotate(-12deg)} .shape.s4{width:96px;height:96px;border-radius:50%;border:14px solid var(--mint);background:transparent;bottom:14%;right:6%} .shape.s5{width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--lila);top:70%;left:56%;transform:rotate(-14deg)} @media (max-width:900px){ .shape.s3,.shape.s5{display:none} .shape.s1{width:84px;height:84px;top:12%;right:4%} .shape.s2{width:48px;height:48px;top:20%;right:32%} .shape.s4{width:64px;height:64px;border-width:10px;bottom:8%;right:8%} } /* ============ SUBPAGINA-HERO ============ */ .page-hero{padding:11rem 0 5rem;overflow:hidden} .page-hero h1{ font-size:clamp(2.3rem,7vw,5.8rem); letter-spacing:-0.03em;line-height:1;max-width:16ch; } .page-hero .page-sub{ max-width:56ch;margin-top:1.6rem; font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink-soft); } .page-hero .page-sub strong{color:var(--ink)} .page-hero .hero-ctas{margin-top:2.2rem} /* ============ KNOPPEN & LINKS ============ */ .btn{ display:inline-flex;align-items:center;gap:.6rem; text-decoration:none;font-weight:700;font-size:1rem; padding:1rem 1.7rem;border-radius:999px; transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease; } .btn svg{transition:transform .25s ease} .btn:hover svg{transform:translateX(4px)} .btn-ink{background:var(--ink);color:var(--cream)} .btn-ink:hover{background:var(--blue-deep);transform:translateY(-2px)} .btn-ghost{border:2px solid rgba(23,24,28,.22);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} /* Inline tekstlink met pijl */ .arrow-link{ display:inline-flex;align-items:center;gap:.55rem; font-weight:700;text-decoration:none;color:var(--ink); border-bottom:2px solid var(--acc,var(--blue-deep)); padding-bottom:.15rem; } .arrow-link svg{transition:transform .25s ease;flex:none} .arrow-link:hover svg{transform:translateX(4px)} /* Stretched-link: maakt de hele kaart klikbaar. Ouder-element moet position:relative (svc-card en panel hebben dat). */ .card-cta{ display:inline-flex;align-items:center;gap:.55rem; font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink); margin-top:1.6rem; } .card-cta svg{transition:transform .25s ease;flex:none} .card-cta::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit} .svc-card:hover .card-cta svg,.panel:hover .card-cta svg{transform:translateX(5px)} /* Chips (algemeen herbruikbaar) */ .chip{ display:inline-flex;align-items:center;gap:.45rem; background:rgba(248,247,244,.7); padding:.5rem 1rem;border-radius:999px; font-size:.86rem;font-weight:600;white-space:nowrap; } /* ============ MARQUEE ============ */ .marquee{ background:var(--ink);color:var(--cream); overflow:hidden;padding:1.05rem 0; transform:rotate(-1deg) scale(1.02); position:relative;z-index:3; } .marquee-track{display:flex;width:max-content;gap:0} .motion .marquee-track{animation:marquee 28s linear infinite} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee-group{display:flex;align-items:center;flex:none} .marquee-group span{ font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.02em; white-space:nowrap;padding:0 1.3rem; } .marquee-group i{width:10px;height:10px;border-radius:50%;flex:none} .marquee-group i:nth-of-type(5n+1){background:var(--blue)} .marquee-group i:nth-of-type(5n+2){background:var(--coral)} .marquee-group i:nth-of-type(5n+3){background:var(--yellow)} .marquee-group i:nth-of-type(5n+4){background:var(--mint)} .marquee-group i:nth-of-type(5n+5){background:var(--lila)} /* ============ DIENSTEN (homepage, gestapelde pin-kaarten) ============ */ #diensten{padding:8rem 0 6rem} .manifest{ font-family:var(--display);font-weight:700;letter-spacing:-0.02em; font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.18; max-width:20ch;margin-bottom:5rem; } .svc-stage{position:relative} .svc-card{ position:relative; border-radius:var(--radius); padding:clamp(1.6rem,3.5vw,3.2rem); color:var(--ink); display:flex;flex-direction:column; margin-bottom:1.4rem; box-shadow:0 24px 60px -24px rgba(23,24,28,.28); } .svc-card.c-blue{background:var(--blue)} .svc-card.c-coral{background:var(--coral)} .svc-card.c-mint{background:var(--mint)} .svc-card.c-yellow{background:var(--yellow)} .svc-card.c-lila{background:var(--lila)} .svc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:auto} .svc-num{font-family:var(--display);font-weight:800;font-size:1.1rem;background:rgba(248,247,244,.6);padding:.35rem .9rem;border-radius:999px} .svc-card h3{font-size:clamp(2rem,4.6vw,4.2rem);letter-spacing:-0.03em;margin:2rem 0 1rem} .svc-card p{max-width:52ch;font-size:clamp(.98rem,1.3vw,1.12rem);font-weight:500} .svc-items{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;list-style:none} .svc-items li{ background:rgba(248,247,244,.66); padding:.5rem 1rem;border-radius:999px; font-size:.86rem;font-weight:600;white-space:nowrap; } /* Desktop + motion: gestapelde pin-kaarten, identiek in maat en positie; alleen accentkleur verschilt. Werkt met elk aantal kaarten (JS is generiek). */ @media (min-width:900px){ .motion .svc-stage{height:100vh} .motion .svc-card{ position:absolute;left:0;right:0;margin:0 auto; width:min(1240px,100%); height:min(72vh,620px); top:14vh; will-change:transform; } .motion .svc-card:nth-of-type(1){z-index:1} .motion .svc-card:nth-of-type(2){z-index:2} .motion .svc-card:nth-of-type(3){z-index:3} .motion .svc-card:nth-of-type(4){z-index:4} .motion .svc-card:nth-of-type(5){z-index:5} } /* ============ PROJECTEN (homepage: horizontale film) ============ */ #projecten{padding:7rem 0 6rem;overflow:hidden} .proj-stage{display:flex;flex-direction:column;gap:2.6rem} .proj-head{ width:min(1240px,92%);margin:0 auto; display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap; } .proj-head h2{font-size:clamp(2.2rem,5.4vw,4.6rem);letter-spacing:-0.03em;max-width:14ch} .proj-hint{ display:flex;align-items:center;gap:.7rem; font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft); padding-bottom:.6rem; } .proj-hint svg{width:34px;height:14px} .motion .proj-hint svg{animation:nudge 1.6s ease-in-out infinite} @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}} .proj-track{ display:flex;gap:clamp(1rem,2.5vw,2rem); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 6vw 1.6rem; scrollbar-width:thin;scrollbar-color:rgba(23,24,28,.25) transparent; } .panel{ flex:0 0 min(86vw,520px); scroll-snap-align:center; border-radius:var(--radius); position:relative;overflow:hidden; padding:clamp(1.6rem,3vw,3rem); display:flex;flex-direction:column;gap:1.6rem; min-height:540px; } .panel.p1{background:var(--panel-blue)} .panel.p2{background:var(--panel-mint)} .panel.p3{background:var(--panel-yellow)} .panel.p4{background:var(--panel-lila)} .panel.p5{background:var(--panel-coral)} .panel-num{ position:absolute;right:-.05em;bottom:-.22em;z-index:0; font-family:var(--display);font-weight:800;line-height:1; font-size:clamp(9rem,20vw,17rem); color:transparent; -webkit-text-stroke:2px var(--acc,var(--blue)); opacity:.55;pointer-events:none;user-select:none; } @supports not (-webkit-text-stroke:1px black){ .panel-num{color:var(--acc,var(--blue));opacity:.16} } .panel.p1{--acc:var(--blue-deep)} .panel.p2{--acc:var(--mint-deep)} .panel.p3{--acc:var(--yellow-deep)} .panel.p4{--acc:var(--lila-deep)} .panel.p5{--acc:var(--coral-deep)} .panel-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.9rem} .panel h3{font-size:clamp(2rem,3.6vw,3.4rem);letter-spacing:-0.03em} .panel p{max-width:46ch;font-size:1rem;color:var(--ink);font-weight:500} .panel-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none} .panel-chips li{ font-size:.8rem;font-weight:600; background:rgba(23,24,28,.08); padding:.35rem .85rem;border-radius:999px; } .panel-url{font-size:.88rem;font-weight:700;color:var(--acc)} .panel .card-cta{margin-top:.4rem} .panel-media{position:relative;z-index:1;margin-top:auto} .shot{ border-radius:18px;overflow:hidden; box-shadow:0 30px 60px -22px rgba(23,24,28,.4); transform:rotate(-1.5deg); background:#fff; } .shot img{width:100%;height:100%;object-fit:cover;object-position:top;will-change:transform} .motion .shot img.para{transform:scale(1.12)} /* Mock-venster (gestileerde browserweergave) */ .mock-window{ background:#fff;border-radius:18px;overflow:hidden; box-shadow:0 30px 60px -22px rgba(23,24,28,.35); transform:rotate(1.2deg); } .mock-bar{display:flex;gap:6px;padding:.7rem .9rem;border-bottom:1px solid rgba(23,24,28,.08)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(23,24,28,.16)} .mock-bar i:first-child{background:var(--coral)} .mock-bar i:nth-child(2){background:var(--yellow)} .mock-bar i:nth-child(3){background:var(--mint)} /* Mock: AircoPure */ .airco-body{display:flex;gap:1.1rem;padding:1.1rem;align-items:center} .airco-unit{flex:0 0 42%;background:var(--panel-mint);border-radius:14px;padding:1rem;display:flex;justify-content:center} .airco-box{ width:86px;height:112px;background:#fff;border-radius:12px;position:relative; box-shadow:inset 0 0 0 2px rgba(23,24,28,.12); } .airco-box::before{ content:"";position:absolute;left:12px;right:12px;top:14px;height:44px;border-radius:6px; background:repeating-linear-gradient(180deg,rgba(23,24,28,.22) 0 3px,transparent 3px 9px); } .airco-box::after{ content:"";position:absolute;left:16px;bottom:12px;width:26px;height:26px;border-radius:50%; border:5px solid var(--mint); } .airco-info{flex:1;display:flex;flex-direction:column;gap:.55rem} .skline{height:9px;border-radius:5px;background:rgba(23,24,28,.12)} .skline.w60{width:60%} .skline.w80{width:80%} .airco-price{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-top:.2rem} .ideal-btn{ align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem; background:#CC0066;color:#fff;font-size:.78rem;font-weight:700; padding:.42rem .85rem;border-radius:8px;letter-spacing:.02em; } .ideal-btn i{width:8px;height:8px;border-radius:50%;background:#fff;flex:none} /* Mock: kennisbank (Amazonadvies) */ .kb-body{padding:1.1rem;display:flex;flex-direction:column;gap:.8rem} .kb-search{ display:flex;align-items:center;gap:.6rem; border:2px solid rgba(23,24,28,.12);border-radius:999px;padding:.55rem 1rem; font-size:.85rem;color:var(--ink-soft);font-weight:600; } .kb-search i{width:12px;height:12px;border:2.5px solid var(--ink-soft);border-radius:50%;position:relative;flex:none} .kb-search i::after{content:"";position:absolute;width:6px;height:2.5px;background:var(--ink-soft);bottom:-3px;right:-4px;transform:rotate(45deg);border-radius:2px} .kb-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .2rem;border-bottom:1px solid rgba(23,24,28,.07)} .kb-row:last-child{border-bottom:none} .kb-dot{width:30px;height:30px;border-radius:9px;flex:none} .kb-row:nth-child(2) .kb-dot{background:var(--panel-coral)} .kb-row:nth-child(3) .kb-dot{background:var(--panel-yellow)} .kb-row:nth-child(4) .kb-dot{background:var(--panel-blue)} .kb-lines{flex:1;display:flex;flex-direction:column;gap:.4rem} .kb-tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep);flex:none} /* Stats / tellers (BakkerBoxen-patroon, herbruikbaar) */ .stats{display:flex;align-items:stretch;gap:1rem;margin-top:auto;position:relative;z-index:1;flex-wrap:wrap} .stat{ flex:1 1 150px;background:rgba(248,247,244,.8);border-radius:18px; padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem; } .stat-num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;letter-spacing:-0.03em} .stat-num.n-yellow{color:var(--yellow-deep)} .stat-num.n-blue{color:var(--blue-deep)} .stat-num.n-mint{color:var(--mint-deep)} .stat-num.n-coral{color:var(--coral-deep)} .stat-num.n-lila{color:var(--lila-deep)} .stat-label{font-size:.82rem;font-weight:600;color:var(--ink-soft);line-height:1.4} .stat-vs{ align-self:center;font-family:var(--display);font-weight:800;font-size:.9rem; background:var(--ink);color:var(--cream);border-radius:50%; width:46px;height:46px;display:grid;place-items:center;flex:none; } /* Desktop + motion: horizontale film. BELANGRIJK (laptop-hoogtefix uit C v2): de gepinde stage vult exact 100svh: eigen padding (i.p.v. sectie-padding), kop bovenaan, track vult de rest en de panelen passen daar altijd in. Geen vaste pixelhoogtes die op laptopschermen kunnen overflowen. */ @media (min-width:900px){ .motion #projecten{padding:0} .motion .proj-stage{ height:100svh; justify-content:flex-start; gap:clamp(1rem,2.6svh,2.6rem); padding-top:calc(84px + 2svh); padding-bottom:clamp(1rem,3.5svh,2.8rem); } .motion .proj-head h2{font-size:clamp(2rem,min(5.4vw,7.5svh),4.6rem)} .motion .proj-track{ flex:1 1 auto;min-height:0; align-items:center; overflow:visible;scroll-snap-type:none; width:max-content;padding:0 0 0 6vw; will-change:transform; } .motion .panel{ flex:0 0 auto; width:min(66vw,940px); height:min(100%,660px);min-height:0; padding:clamp(1.2rem,2.4svh,3rem) clamp(1.6rem,3vw,3rem); display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center; } .motion .panel h3{font-size:clamp(1.6rem,min(3.6vw,5svh),3.4rem)} .motion .panel .panel-media{margin-top:0;min-width:0} .motion .panel .shot img,.motion .panel .mock-window{max-height:min(52svh,440px)} .motion .panel .shot img{height:auto} .motion .panel.p3{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,2.6svh,2.2rem)} .motion .panel.p3 .stats{margin-top:0;max-width:640px} .motion .proj-track::after{content:"";flex:0 0 6vw} } /* ============ WERKWIJZE (homepage-sectie + herbruikbaar) ============ */ #werkwijze{padding:8rem 0} #werkwijze h2{font-size:clamp(2.4rem,5.6vw,4.8rem);letter-spacing:-0.03em;max-width:13ch} .lead{ max-width:58ch;margin-top:1.6rem;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft); } .lead strong{color:var(--ink)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.6rem} .step{ background:rgba(255,255,255,.72); border:1px solid rgba(23,24,28,.06); border-radius:22px;padding:1.8rem; display:flex;flex-direction:column;gap:.8rem; } .step-num{ font-family:var(--display);font-weight:800;font-size:.95rem; width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink); } .step:nth-child(3n+1) .step-num{background:var(--mint)} .step:nth-child(3n+2) .step-num{background:var(--yellow)} .step:nth-child(3n+3) .step-num{background:var(--blue)} .step h3{font-size:1.35rem;letter-spacing:-0.01em} .step p{font-size:.95rem;color:var(--ink-soft)} .werkwijze-note{ margin-top:2.6rem;display:inline-flex;align-items:center;gap:.8rem;flex-wrap:wrap; background:var(--ink);color:var(--cream); border-radius:999px;padding:.85rem 1.5rem; font-size:.92rem;font-weight:600; } .werkwijze-note b{color:var(--yellow);font-weight:700} .werkwijze-cta{margin-top:2.4rem} @media (max-width:860px){ .steps{grid-template-columns:1fr} .werkwijze-note{border-radius:22px} } /* ============ OVER (homepage-sectie + herbruikbaar) ============ */ #over{padding:8rem 0} .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .about-photo{ position:relative;border-radius:var(--radius);overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 70px -28px rgba(23,24,28,.45); } .about-photo img{ position:absolute;left:0;top:-9%;width:100%;height:118%; object-fit:cover;will-change:transform; } .about-photo .photo-badge{ position:absolute;left:1.1rem;bottom:1.1rem;z-index:2; background:rgba(248,247,244,.9);backdrop-filter:blur(6px); border-radius:999px;padding:.5rem 1.1rem; font-size:.82rem;font-weight:700; } .about-text h2{font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-0.03em;max-width:15ch} .about-text p{margin-top:1.4rem;max-width:56ch;color:var(--ink-soft);font-size:clamp(.98rem,1.3vw,1.12rem)} .about-text p strong{color:var(--ink)} .about-text .arrow-link{margin-top:2rem} .fact-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;list-style:none} .fact-chips li{ background:rgba(255,255,255,.75);border:1px solid rgba(23,24,28,.08); padding:.5rem 1rem;border-radius:999px;font-size:.85rem;font-weight:600; } @media (max-width:860px){ .about-grid{grid-template-columns:1fr} .about-photo{max-width:440px} } /* ============ CONTACT-CTA (elke pagina) ============ */ .contact-cta{padding:9rem 0 7rem;text-align:center;overflow:hidden} .contact-photo{ width:92px;height:92px;border-radius:50%;object-fit:cover; margin:0 auto 1.6rem;border:4px solid #fff; box-shadow:0 14px 30px -10px rgba(23,24,28,.3); } .contact-cta h2{font-size:clamp(2.6rem,7.5vw,6.4rem);letter-spacing:-0.035em;line-height:1} .contact-cta .contact-sub{max-width:44ch;margin:1.6rem auto 2.8rem;color:var(--ink-soft);font-size:1.05rem} .mail-btn{ display:inline-flex;align-items:center;gap:1rem; background:var(--ink);color:var(--cream);text-decoration:none; font-family:var(--display);font-weight:700;letter-spacing:-0.01em; font-size:clamp(1.1rem,3.4vw,2rem); padding:clamp(1rem,2vw,1.5rem) clamp(1.6rem,3.4vw,3rem); border-radius:999px; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; } .mail-btn svg{flex:none;transition:transform .3s ease} .mail-btn:hover{background:var(--blue-deep);transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(53,96,207,.55)} .mail-btn:hover svg{transform:translateX(6px) rotate(-45deg)} .contact-meta{margin-top:1.6rem;font-size:.9rem;color:var(--ink-soft);font-weight:600} /* ============ FLOW-DIAGRAM (automatisering-patroon) ============ Nodes als pillen, verbindingslijnen als SVG-paden met [data-draw]: main.js tekent alle paden in een svg[data-draw] zodra hij in beeld komt. */ .flow{position:relative} .flow-node{ display:inline-flex;align-items:center;gap:.55rem; background:#fff;border:2px solid var(--ink); border-radius:999px;padding:.6rem 1.2rem; font-weight:700;font-size:.92rem; box-shadow:4px 4px 0 var(--acc,var(--mint)); } .flow-node i{width:10px;height:10px;border-radius:50%;background:var(--acc,var(--mint));flex:none} svg[data-draw] .draw-path{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:none} /* ============ 404 ============ */ .err-hero{ min-height:100svh;display:flex;align-items:center;text-align:center; padding:9rem 0 5rem;overflow:hidden; } .err-inner{position:relative;z-index:2;margin:0 auto} .err-code{ font-family:var(--display);font-weight:800;line-height:1; font-size:clamp(6rem,22vw,15rem);letter-spacing:-0.04em; color:transparent;-webkit-text-stroke:3px var(--ink); } @supports not (-webkit-text-stroke:1px black){.err-code{color:var(--ink)}} .err-hero h1{font-size:clamp(1.8rem,5vw,3.4rem);margin-top:1rem} .err-hero p{max-width:44ch;margin:1.2rem auto 0;color:var(--ink-soft)} .err-hero .hero-ctas{justify-content:center;margin-top:2.4rem} /* ============ FOOTER ============ */ .footer{background:var(--ink);color:var(--cream);padding:2.6rem 0} .footer-inner{ width:min(1240px,92%);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap; } .footer-brand{font-family:var(--display);font-weight:800;font-size:1.15rem} .footer-links{display:flex;gap:1.4rem;flex-wrap:wrap} .footer-links a{font-size:.88rem;font-weight:600;text-decoration:none;opacity:.85} .footer-links a:hover{opacity:1;text-decoration:underline} .footer-legal{font-size:.82rem;opacity:.65} /* ============ REVEAL & SPLIT ============ */ [data-reveal]{will-change:transform,opacity} .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em} .wi{display:inline-block;will-change:transform} /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }