@charset "utf-8"; /* ============================================================ EnjoyToCarry — demo 1 "Ademruimte" Palet, typografie en maten komen letterlijk uit design/tokens.md, richting 1. Niets hierin is geraden. ============================================================ */ /* ---------- lettertypen, zelf gehost ---------- Exact de woff2-bestanden die Google Fonts uitlevert, alleen niet meer van Google. Twee redenen: het IP van de bezoeker gaat niet langer naar een derde partij, en met de preload in de is het lettertype er voordat de eerste regel tekst wordt gezet. Dat laatste haalt de layout shift van de font-swap weg. Variabele bestanden, dus 400 en 600 delen één bestand. ---------------------------------------------- */ @font-face{ font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/fraunces-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap; src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap; src:url(/assets/fonts/fraunces-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Karla';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/karla-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Karla';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/karla-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Karla';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/karla-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Karla';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/karla-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Karla';font-style:normal;font-weight:700;font-display:swap; src:url(/assets/fonts/karla-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Karla';font-style:normal;font-weight:700;font-display:swap; src:url(/assets/fonts/karla-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ /* kleur */ --bg:#FBFAF7; --surface:#FFFFFF; --primary:#6DDB96; /* vlak, nooit tekst */ --primary-ink:#0F6B41; /* 6,29:1 op --bg */ --primary-wash:rgba(109,219,150,.13); --wash-solid:#E9F6EA; /* dezelfde was, ondoorzichtig, voor SVG-vullingen */ --accent:#E39B7B; /* vlak */ --accent-ink:#8A4A2C; /* 6,50:1 op --bg */ --text:#1F2A24; /* 14,22:1 op --bg */ --muted:#5C6B63; /* 5,38:1 op --bg */ --border:#E6E9E3; --veldrand:#7B8880; /* 3,70:1 op wit, WCAG 1.4.11 voor bedieningsranden */ --focus:#0F6B41; /* typografie */ --font-head:'Fraunces',Georgia,serif; --font-body:'Karla',system-ui,sans-serif; --h1:clamp(2.1rem,6vw,3.6rem); --h2:clamp(1.6rem,4vw,2.4rem); --h3:clamp(1.15rem,2.4vw,1.4rem); --body:1.0625rem; --small:.875rem; --lh-head:1.14; --lh-body:1.75; --ls-head:-.015em; /* ruimte en vorm */ --measure:68ch; --wrap:1080px; --section-y:clamp(72px,12vw,132px); --radius-card:28px; --radius-pill:999px; --radius-blob:42% 58% 46% 54% / 38% 34% 66% 62%; --radius-blob-2:54% 46% 58% 42% / 62% 66% 34% 38%; --header-h:68px; --shadow:0 2px 4px rgba(31,42,36,.04),0 12px 32px rgba(31,42,36,.06); --ease:cubic-bezier(.16,1,.3,1); --adem:cubic-bezier(.18,1.22,.34,1); /* komt op en zakt licht terug */ --snel:cubic-bezier(.2,.7,.3,1); /* antwoord binnen 100ms */ --fout:#9B2C1B; /* 7,26:1 op --bg, alleen foutmelding */ } /* ---------- grondslag ---------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--body); font-weight:400; line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} picture{display:block} /* picture is de wikkel om elke img: waar het vak de maat bepaalt, moet de wikkel dat vak ook echt vullen */ .hero__media picture, .tile__icon picture, .product-card__media picture, .mat picture{width:100%;height:100%} h1,h2,h3{ font-family:var(--font-head); font-variation-settings:'SOFT' 40,'WONK' 1; line-height:var(--lh-head); letter-spacing:var(--ls-head); margin:0 0 .6em; color:var(--text); text-wrap:balance; } h1{font-size:var(--h1);font-weight:600} h2{font-size:var(--h2);font-weight:600;line-height:1.18;letter-spacing:-.01em} h3{font-size:var(--h3);font-weight:400;line-height:1.3;letter-spacing:0} p{margin:0 0 1.15em;max-width:var(--measure)} p:last-child{margin-bottom:0} ul,ol{margin:0 0 1.15em;padding-left:1.25em} a{color:var(--primary-ink);text-decoration-thickness:1px;text-underline-offset:.18em} a:hover{text-decoration-thickness:2px} strong{font-weight:700} :focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; } .vh{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip{ position:absolute;left:12px;top:-64px;z-index:200; background:var(--primary-ink);color:#fff;padding:12px 18px; border-radius:0 0 14px 14px;font-weight:700;text-decoration:none; transition:top .2s var(--ease); } .skip:focus{top:0} /* ---------- ruimte ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5.2vw,32px);width:100%} .narrow{max-width:var(--measure)} .center{margin-inline:auto;text-align:center} .center p{margin-inline:auto} .band{padding-block:var(--section-y);position:relative} .band--bg{background:var(--bg)} .band--wash{background:var(--wash-solid)} .band--tight{padding-block:clamp(46px,8vw,84px)} .band-head{margin-bottom:clamp(28px,4vw,44px)} .band-head p{color:var(--muted)} .lead{font-size:1.1875rem;line-height:1.62;color:var(--text)} /* kleine ruimtehulpen, zodat er nergens style="" in de HTML staat */ .stack-l{margin-top:clamp(28px,4.5vw,46px)} .stack-m{margin-top:1.35em} .blogurl a{word-break:break-word} /* ---------- golfovergangen (de signatuur) ---------- */ .wave{line-height:0;overflow:hidden;position:relative;z-index:1} .wave svg{display:block;width:100%;height:clamp(38px,5.4vw,64px)} .wave--to-wash{background:var(--bg)} .wave--to-wash path{fill:var(--wash-solid)} .wave--to-bg{background:var(--wash-solid)} .wave--to-bg path{fill:var(--bg)} .wave--to-white{background:var(--bg)} .wave--to-white path{fill:var(--surface)} .wave--flip svg{transform:scaleX(-1)} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:80; height:var(--header-h); background:rgba(251,250,247,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:box-shadow .3s var(--ease); } .site-header.is-scrolled{box-shadow:0 6px 26px rgba(31,42,36,.08)} .site-header__in{ height:var(--header-h);display:flex;align-items:center;gap:16px; max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,5.2vw,32px); } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);margin-right:auto} .brand img{width:44px;height:44px;border-radius:50%} .brand span{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-weight:600;font-size:1.0625rem;letter-spacing:-.01em; } .nav{display:none} .nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .nav__item{position:relative} .nav__link{ display:inline-flex;align-items:center;min-height:44px;padding:0 12px; color:var(--text);text-decoration:none;font-weight:500;font-size:.9375rem; border-radius:var(--radius-pill);transition:background .22s var(--ease),color .22s var(--ease); } .nav__link:hover,.nav__link:focus-visible{background:var(--primary-wash);color:var(--primary-ink)} .nav__link[aria-current="page"]{color:var(--primary-ink);font-weight:700} .nav__link[aria-current="page"]::after{ content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px; background:var(--primary);border-radius:2px; } .nav__item--group{display:flex;align-items:center} .nav__chev{ display:inline-grid;place-items:center;width:32px;height:44px;margin-left:-8px; background:none;border:0;color:var(--muted);cursor:pointer;border-radius:var(--radius-pill); } .nav__chev svg{width:12px;height:12px;transition:transform .28s var(--ease)} .nav__item--group.is-open .nav__chev svg{transform:rotate(180deg)} .nav__sub{ position:absolute;top:calc(100% + 6px);left:0;min-width:268px; background:var(--surface);border:1px solid var(--border);border-radius:20px; box-shadow:var(--shadow);padding:10px;margin:0;list-style:none; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s; } .nav__item--group.is-open .nav__sub{opacity:1;visibility:visible;transform:none} /* Hover regelt zichzelf in CSS. Deed JS dat ook, dan sloot een klik op het chevron het menu terwijl de muis er nog boven stond. :focus-within staat hier bewust NIET: dan kan de knop het menu nooit sluiten zolang de focus er nog in staat. Het toetsenbord loopt via de knop. */ @media (hover:hover) and (pointer:fine){ .nav__item--group:hover .nav__sub{opacity:1;visibility:visible;transform:none} } .nav__sub a{ display:block;min-height:44px;padding:11px 14px;border-radius:14px; color:var(--text);text-decoration:none;font-size:.9375rem; } .nav__sub a:hover,.nav__sub a:focus-visible{background:var(--primary-wash);color:var(--primary-ink)} .nav__sub a[aria-current="page"]{color:var(--primary-ink);font-weight:700;background:var(--primary-wash)} .hamburger{ display:inline-grid;place-items:center;width:48px;height:48px; background:var(--surface);border:1px solid var(--border);border-radius:50%; cursor:pointer;color:var(--text); } .hamburger span{display:block;width:19px;height:1.8px;background:currentColor;border-radius:2px;margin:2.6px 0} /* ---------- mobiel paneel ---------- */ .mnav-backdrop{ position:fixed;inset:0;z-index:90;background:rgba(31,42,36,.34); opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility 0s .32s; } .mnav-backdrop.is-open{opacity:1;visibility:visible;transition-delay:0s,0s} .mnav{ position:fixed;inset:0;z-index:95;background:var(--bg); display:flex;flex-direction:column; transform:translateX(100%);visibility:hidden; /* visibility over .38s laat het paneel halverwege de schuif verdwijnen. Dat is precies het schokkerige gevoel; met 0s .36s blijft de schuif heel. */ transition:transform .36s var(--ease),visibility 0s .36s; overflow-y:auto;overscroll-behavior:contain; } .mnav.is-open{transform:none;visibility:visible;transition-delay:0s,0s} .mnav__top{ display:flex;align-items:center;justify-content:space-between;gap:12px; height:var(--header-h);padding-inline:clamp(16px,5.2vw,32px);flex:none; } .mnav__close{ width:48px;height:48px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--border);border-radius:50%; cursor:pointer;color:var(--text); } .mnav__close svg{width:17px;height:17px} .mnav__list{list-style:none;margin:0;padding:8px clamp(16px,5.2vw,32px) 0;flex:1 1 auto} .mnav__item{border-bottom:1px solid var(--border);padding:0} .mnav__row{display:flex;align-items:center;gap:8px} .mnav__link{ flex:1 1 auto;display:flex;align-items:center;min-height:56px; font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:1.5rem;font-weight:400;letter-spacing:-.01em;line-height:1.2; color:var(--text);text-decoration:none;padding:10px 0; } .mnav__link[aria-current="page"]{color:var(--primary-ink);font-weight:600} .mnav__chev{ flex:none;width:48px;height:48px;display:grid;place-items:center; background:var(--primary-wash);border:0;border-radius:50%;color:var(--primary-ink);cursor:pointer; } .mnav__chev svg{width:13px;height:13px;transition:transform .28s var(--ease)} .mnav__chev[aria-expanded="true"] svg{transform:rotate(180deg)} .mnav__sub{list-style:none;margin:0;padding:0 0 12px 6px} .mnav__sub[hidden]{display:none} .mnav__sub a{ display:flex;align-items:center;min-height:48px;padding:6px 0 6px 16px; border-left:2px solid var(--primary);color:var(--muted); text-decoration:none;font-size:1.0625rem; } .mnav__sub a[aria-current="page"]{color:var(--primary-ink);font-weight:700} .mnav__foot{flex:none;padding:20px clamp(16px,5.2vw,32px) 32px} .mnav__foot .btn{width:100%} /* ---------- knoppen ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 26px; background:var(--primary-ink);color:#fff; border:0;border-radius:var(--radius-pill); font-family:var(--font-body);font-size:1rem;font-weight:700;line-height:1.25; text-decoration:none;text-align:center;cursor:pointer; box-shadow:0 6px 18px rgba(15,107,65,.20); transition:transform .16s var(--snel),box-shadow .26s var(--ease),background .22s var(--ease); } .btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,107,65,.15)} /* Het antwoord op een tik hoort er binnen 100ms te zijn, dus korter dan de hover. */ .btn:active{transform:translateY(0) scale(.972);transition-duration:.09s} .btn--full{width:100%} .btn--ghost{ background:transparent;color:var(--primary-ink); box-shadow:inset 0 0 0 1.5px var(--primary-ink); } .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--primary-wash);box-shadow:inset 0 0 0 1.5px var(--primary-ink)} .header-cta{display:none} /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden;isolation:isolate; min-height:520px;display:flex;align-items:flex-end; padding-block:clamp(40px,9vw,72px); } .hero__media{position:absolute;inset:0;z-index:0} .hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%} .hero__wash{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(251,250,247,.30) 0%,rgba(251,250,247,.86) 40%,rgba(251,250,247,.97) 62%,var(--bg) 100%); } .hero__blobs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden} .hero__inner{position:relative;z-index:3} .hero__box{max-width:34ch} .hero__box .lead{color:var(--text)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;max-width:none} .blob{ position:absolute;display:block;border-radius:50%; /* tokens.md schrijft blur(72px) voor. Gemeten in de hero kost die straal per beeld een nieuwe rasterisatie, omdat .hero__blobs bij het scrollen van transform verandert: 26 van de 149 beelden vielen terug naar 30fps. Bij 32px is dat nul. Het verschil in beeld is 0,20 van 255 gemiddeld en hoogstens 11 van 255 op het donkerste punt, want de radial-gradient is zelf al zacht; de blur deed daar vrijwel niets meer bovenop. Zacht blijft zacht, alleen zonder de rekening. */ filter:blur(32px);opacity:.38;will-change:transform; } .blob--1{ width:30rem;height:30rem;top:-11rem;right:-9rem; background:radial-gradient(circle,var(--primary),transparent 68%); animation:drift1 19s ease-in-out infinite; } .blob--2{ width:22rem;height:22rem;bottom:-10rem;left:-7rem; background:radial-gradient(circle,var(--accent),transparent 70%); animation:drift2 24s ease-in-out infinite; } @keyframes drift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3.4rem,3rem,0) scale(1.15)} } @keyframes drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4rem,-2.4rem,0) scale(1.2)} } /* ---------- paginakop (binnenpagina's) ---------- */ .page-head{position:relative;overflow:hidden;padding-block:clamp(44px,8vw,86px) clamp(30px,5vw,54px)} .page-head__grid{display:grid;gap:clamp(28px,5vw,44px);align-items:center} .page-head__text{position:relative;z-index:3} .page-head__text p{color:var(--muted)} .page-head__text .lead{color:var(--text)} .page-head__media{position:relative;z-index:3} .page-head__media picture{overflow:hidden;border-radius:var(--radius-blob);box-shadow:var(--shadow)} .page-head__media img{width:100%;height:clamp(260px,52vw,380px);object-fit:cover} .page-head .blob{opacity:.30} .page-head .blob--1{width:24rem;height:24rem;top:-10rem;right:-8rem} .page-head .blob--2{width:17rem;height:17rem;bottom:-8rem;left:-6rem} /* ---------- dienst-tegels ---------- */ .services{ display:grid;gap:clamp(16px,3vw,24px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); list-style:none;margin:0;padding:0; } .tile{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card); box-shadow:var(--shadow);padding:26px 22px 24px; display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px; transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .tile:hover,.tile:focus-within{box-shadow:0 4px 8px rgba(31,42,36,.05),0 18px 40px rgba(31,42,36,.09)} .tile__icon{ display:block;width:88px;height:88px;flex:none;overflow:hidden; border-radius:50%;background:var(--primary-wash); transition:border-radius .9s var(--ease); } .tile:hover .tile__icon,.tile:focus-within .tile__icon{border-radius:var(--radius-blob)} .tile__icon img{width:100%;height:100%;object-fit:cover} .tile__link{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:var(--h3);font-weight:600;line-height:1.28;letter-spacing:-.01em; color:var(--text);text-decoration:none; } .tile__link::after{content:"";position:absolute;inset:0} .tile{position:relative} .tile__link:hover,.tile__link:focus-visible{color:var(--primary-ink)} .tile__arrow{ margin-top:auto;display:inline-grid;place-items:center;width:34px;height:34px; border-radius:50%;background:var(--primary-wash);color:var(--primary-ink); transition:transform .28s var(--ease); } .tile:hover .tile__arrow,.tile:focus-within .tile__arrow{transform:translate3d(0,3px,var(--z-pijl,0px))} .tile__arrow svg{width:14px;height:14px} /* ---------- tekstblok met beeld ---------- */ .prose{display:grid;gap:clamp(26px,5vw,52px);align-items:center} .prose__text{max-width:var(--measure)} .prose__text h2{margin-bottom:.4em} .prose__sub{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:1.1875rem;font-weight:400;color:var(--accent-ink); margin:0 0 1.1em;line-height:1.4; } /* Het masker zit op de wikkel, niet op de foto. Alleen zo kan de foto erbinnen meebewegen zonder dat de ronde vorm meeschuift. */ .prose__media picture{ overflow:hidden;border-radius:var(--radius-blob);box-shadow:var(--shadow); transition:border-radius .9s var(--ease); } .prose__media:hover picture,.prose__media:focus-within picture{border-radius:var(--radius-blob-2)} .prose__media img{width:100%;height:clamp(280px,58vw,440px);object-fit:cover} .prose--flip .prose__media{order:-1} .fig{margin:0} .fig picture{overflow:hidden;border-radius:140px 140px 24px 140px;box-shadow:var(--shadow)} .fig--blob picture{border-radius:var(--radius-blob)} .fig img{width:100%;object-fit:cover} /* ---------- lijsten ---------- */ .checklist{list-style:none;margin:0 0 1.15em;padding:0;max-width:var(--measure)} .checklist li{ display:flex;gap:.7rem;align-items:baseline; padding:.42rem 0;line-height:1.6; } .checklist li + li{border-top:1px solid var(--border)} .bul{color:var(--primary-ink);font-size:.72em;line-height:1.9;flex:none} .qlist{list-style:none;margin:0 0 1.3em;padding:0;max-width:var(--measure)} .qlist li{display:flex;gap:.7rem;align-items:flex-start;padding:.34rem 0;line-height:1.6} .qdash{ flex:none;display:inline-grid;place-items:center; width:1.7rem;height:1.7rem;border-radius:50%; background:var(--primary-wash);color:var(--primary-ink); font-weight:700;line-height:1;margin-top:.14em; } .rules{list-style:none;margin:0;padding:0;display:grid;gap:14px} .rules li{ background:var(--surface);border:1px solid var(--border); border-radius:20px 20px 20px 6px;padding:16px 20px; display:flex;gap:.8rem;align-items:flex-start;line-height:1.6; } .rules li::before{ content:"";flex:none;width:9px;height:9px;margin-top:.62em; border-radius:50%;background:var(--primary); } .benefits{list-style:none;margin:0;padding:0;display:grid;gap:16px} .benefits li{ background:var(--surface);border:1px solid var(--border); border-radius:24px 24px 24px 8px;padding:18px 22px;line-height:1.65; } /* ---------- kaarten ---------- */ .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-card);box-shadow:var(--shadow); padding:clamp(22px,4vw,34px); } .card h2{margin-bottom:.55em} .cards-2{display:grid;gap:clamp(18px,3vw,26px)} /* ---------- prijskaart ---------- */ .price-grid{display:grid;gap:clamp(18px,3vw,26px);align-items:stretch} .price-card{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-card);box-shadow:var(--shadow); padding:0; transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .price-card:hover,.price-card:focus-within{box-shadow:0 4px 8px rgba(31,42,36,.05),0 18px 40px rgba(31,42,36,.09)} .price-card__head{ background:var(--primary); /* De kaart klemt niets meer af, want overflow:hidden en preserve-3d gaan niet samen: de browser plat de lagen dan af. De boog rondt dus zelf. */ border-radius:27px 27px 60% 60%/27px 27px 42px 42px; min-height:96px;padding:22px 26px 30px; display:grid;place-items:center;text-align:center; } .price-card__head h3{ margin:0;color:var(--text);font-weight:600; font-size:var(--h3);letter-spacing:-.005em; /* vangnet: geen enkele kaarttitel mag buiten de boog vallen. De echte breekpunten staan als na de schuine streep. */ overflow-wrap:break-word;hyphens:auto; } .price-card__body{padding:24px clamp(20px,3vw,28px) 28px;display:flex;flex-direction:column;flex:1 1 auto} .price-card__price{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:clamp(2.2rem,5vw,2.9rem);font-weight:600;line-height:1.05; color:var(--primary-ink);margin:0;letter-spacing:-.02em; } .price-card__price--text{ font-size:1.25rem;font-weight:400;line-height:1.35;color:var(--primary-ink); } .price-card__price s{ font-size:.42em;font-weight:400;color:var(--muted); margin-right:.3em;text-decoration-thickness:2px; } .price-card__unit{ font-family:var(--font-body);font-size:var(--small);font-weight:500; letter-spacing:.01em;color:var(--muted);margin:.35em 0 0; } .price-card__note{ font-size:var(--small);color:var(--accent-ink);margin:.7em 0 0;line-height:1.5; } .price-card__desc{margin:1.1em 0 0;color:var(--text)} .price-card__list{list-style:none;margin:1.2em 0 0;padding:0} .price-card__list li{ display:flex;gap:.7rem;align-items:flex-start; padding:.44rem 0;font-size:.9375rem;line-height:1.55; } .price-card__list li + li{border-top:1px solid var(--border)} .price-card__list li::before{ content:"";flex:none;width:7px;height:7px;margin-top:.6em; border-radius:50%;background:var(--primary); } .price-card .btn{margin-top:auto} .price-card__btnwrap{margin-top:auto;padding-top:24px} .price-card--wide .price-card__list{ display:grid;grid-template-columns:1fr;gap:0; } /* ---------- productraster ---------- */ .product-grid{ display:grid;gap:clamp(14px,2.6vw,22px); grid-template-columns:repeat(2,1fr); list-style:none;margin:0;padding:0; } .product-card{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border); border-radius:22px;overflow:hidden;box-shadow:var(--shadow); } .product-card__media{ aspect-ratio:4/5;background:var(--primary-wash); display:grid;place-items:center;overflow:hidden; } .product-card__media img{width:100%;height:100%;object-fit:contain;padding:10px} .product-card__body{padding:16px 16px 20px;display:flex;flex-direction:column;flex:1 1 auto} .product-card__title{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0 0 .4em; } .product-card__price{ font-family:var(--font-head);font-variation-settings:'SOFT' 40,'WONK' 1; font-size:1.25rem;font-weight:600;color:var(--primary-ink);margin:0 0 .6em; } .product-card__desc{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:auto 0 0} .mat-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .mat{ aspect-ratio:4/5;background:var(--primary-wash);border-radius:22px; display:grid;place-items:center;overflow:hidden;border:1px solid var(--border); } .mat img{width:100%;height:100%;object-fit:contain;padding:12px} /* ---------- contactformulier ---------- */ .contact-grid{display:grid;gap:clamp(26px,5vw,48px);align-items:start} .contact-form{display:grid;gap:18px} .field{display:grid;gap:7px} .field label{font-size:var(--small);font-weight:700;color:var(--text)} .field .opt{font-weight:400;color:var(--muted)} .field input,.field textarea{ width:100%;min-height:48px;padding:13px 16px; font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text); background:var(--surface);border:1.5px solid var(--veldrand);border-radius:16px; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .field textarea{min-height:132px;resize:vertical} .field input:hover,.field textarea:hover{border-color:var(--muted)} .field input:focus,.field textarea:focus{ outline:none;border-color:var(--primary-ink); box-shadow:0 0 0 3px rgba(15,107,65,.16); } .form-note{ margin:0;padding:14px 18px;border-radius:16px; background:var(--primary-wash);color:var(--text);font-size:var(--small); } .form-note:empty{display:none} .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .contact-list a,.contact-list span{ display:flex;align-items:center;gap:12px;min-height:48px; padding:10px 16px;border-radius:18px;background:var(--surface); border:1px solid var(--border);color:var(--text);text-decoration:none; } .contact-list a:hover,.contact-list a:focus-visible{border-color:var(--primary-ink);color:var(--primary-ink)} .contact-list svg{width:19px;height:19px;flex:none;color:var(--primary-ink)} .contact-list--mid{max-width:420px;margin-inline:auto;text-align:left} /* ---------- juridische tekst ---------- */ .legal{display:grid;gap:clamp(18px,3vw,24px)} .legal .card h2{font-size:clamp(1.35rem,3vw,1.7rem)} .legal .card p{margin:0} /* ---------- footer ---------- */ .site-footer{background:var(--wash-solid);padding-block:clamp(48px,8vw,76px) 28px} .site-footer__grid{display:grid;gap:clamp(28px,5vw,44px)} .site-footer h2{font-size:1.25rem;margin-bottom:.7em} .footer-brand img{width:56px;height:56px;border-radius:50%;margin-bottom:14px} .footer-links{list-style:none;margin:0;padding:0;display:grid;gap:2px} .footer-links a{ display:inline-flex;align-items:center;min-height:44px; color:var(--text);text-decoration:none; } .footer-links a:hover,.footer-links a:focus-visible{color:var(--primary-ink);text-decoration:underline} .social{display:flex;gap:10px;margin-top:16px;padding:0;list-style:none} .social a{ display:grid;place-items:center;width:46px;height:46px; background:var(--surface);border:1px solid var(--border);border-radius:50%; color:var(--primary-ink); } .social a:hover,.social a:focus-visible{background:var(--primary-ink);color:#fff;border-color:var(--primary-ink)} .social svg{width:20px;height:20px} .site-footer__bottom{ margin-top:clamp(30px,5vw,48px);padding-top:22px;border-top:1px solid var(--border); display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between; font-size:var(--small);color:var(--muted); } .site-footer__bottom p{margin:0} .site-footer__bottom a{ color:var(--muted);display:inline-flex;align-items:center;min-height:44px; } /* ---------- scroll reveal ---------- */ /* De verplaatsing staat in een custom property, niet los in de transform. Zo kan een element met een eigen transform (een tegel die kantelt) die waarde meenemen zonder dat de twee regels elkaar overschrijven. */ [data-rv]{ --rv-y:26px;--rv-s:.994; opacity:0;transform:translateY(var(--rv-y)) scale(var(--rv-s)); transition:opacity .6s var(--ease),transform .82s var(--adem); } [data-rv].in{--rv-y:0px;--rv-s:1;opacity:1} .rm [data-rv]{--rv-y:0px!important;--rv-s:1!important;opacity:1!important;transform:none!important} /* ============================================================ Breekpunten ============================================================ */ @media (min-width:480px){ .mnav{left:auto;width:min(420px,88vw);box-shadow:-20px 0 60px rgba(31,42,36,.16)} .product-grid{gap:20px} } @media (min-width:768px){ .hero{min-height:640px;align-items:center} .hero__wash{ background:linear-gradient(90deg,rgba(251,250,247,.94) 0%,rgba(251,250,247,.72) 46%,rgba(251,250,247,0) 74%); } .hero__box{max-width:32ch} .page-head__grid{grid-template-columns:1.05fr .95fr} .prose{grid-template-columns:1fr 1fr} .prose--flip .prose__media{order:0} .prose--flip .prose__text{order:2} .product-grid{grid-template-columns:repeat(3,1fr)} .contact-grid{grid-template-columns:1.15fr .85fr} .price-grid--2{grid-template-columns:repeat(2,1fr)} .price-grid--3{grid-template-columns:repeat(2,1fr)} .price-card--wide .price-card__list{grid-template-columns:1fr 1fr;column-gap:30px} .price-card--wide .price-card__list li:nth-child(2){border-top:0} .cards-2{grid-template-columns:1fr 1fr} .site-footer__grid{grid-template-columns:1.2fr 1fr 1fr} .legal{grid-template-columns:1fr 1fr} } @media (min-width:1024px){ .nav{display:block} .header-cta{display:inline-flex;min-height:44px;padding:10px 22px} .hamburger{display:none} .price-grid--3{grid-template-columns:repeat(3,1fr)} .product-grid{grid-template-columns:repeat(4,1fr)} .page-head__media img{height:clamp(320px,32vw,430px)} } @media (min-width:1280px){ .hero{min-height:680px} } /* ============================================================ Beperkte beweging: alles stil, niets onzichtbaar ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } [data-rv]{opacity:1!important;transform:none!important} .blob{animation:none} } /* ============================================================ Interactielaag: "ademen" ============================================================ Alles wat hier beweegt is transform of opacity. Geen breedte, geen marge, geen filter: die dwingen de browser tot herberekenen en dat kost precies de frames die we willen houden. De waarden komen als custom properties uit script.js. Blijft dat script weg, dan staat elke property op nul en ziet de pagina er exact zo uit als zonder deze laag. ============================================================ */ /* Alleen wat op dit moment echt beweegt mag geheugen vasthouden. script.js hangt deze klasse eraan zodra het element in beeld komt en haalt hem er weer af zodra het eruit is. */ .gpu{will-change:transform} /* ---------- 1. hero: drie lagen op echte afstand ---------- */ /* De foto staat op 120px naar achteren, de blobs op 220px, de tekst op nul. Door de perspectiefdeling legt een laag die verder weg staat vanzelf minder schermafstand af bij dezelfde verplaatsing: dat is geen truc met snelheden maar echte diepte. De schaal compenseert het krimpen en houdt een marge over om in te schuiven. */ .hero{perspective:1200px;perspective-origin:50% 46%} .hero__media{transform:translate3d(0,var(--laag-y,0px),-120px) scale(1.18)} .hero__blobs{transform:translate3d(0,var(--laag-y,0px),-220px) scale(1.3)} .hero__inner{transform:translate3d(0,var(--laag-y,0px),0)} .page-head{perspective:1000px} /* ---------- 2. golfovergangen: de parallax tussen de secties ---------- */ /* De golf mag alleen naar beneden schuiven. Naar boven zou onderaan een strook in de kleur van de vorige sectie blootleggen, en dat is precies de harde rand die deze richting nergens heeft. */ .wave svg{ transform:translate3d(var(--golf-x,0%),var(--golf-y,0px),0) scaleX(1.1); transform-origin:50% 50%; } /* ---------- 3. foto's schuiven binnen hun masker ---------- */ .prose__media img,.fig img,.page-head__media img{ transform:translate3d(0,var(--foto-y,0px),0) scale(1.07); } /* ---------- 4. dienst-tegels: de eerste aanraking met de site ---------- */ .services{perspective:1000px;perspective-origin:50% 40%} .tile{ --rx:0deg;--ry:0deg;--lift:0px; transform-style:preserve-3d; transform:translate3d(0,calc(var(--rv-y,0px) + var(--lift)),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--rv-s,1)); transition:transform .5s var(--adem),box-shadow .34s var(--ease); } /* Zolang de muis erop staat volgt de kanteling bijna direct. Gaat de muis eraf, dan neemt de zachte veer het over en zakt de tegel terug. */ .tile.kantelt{transition:transform .11s linear,box-shadow .34s var(--ease);will-change:transform} .tile:hover,.tile:focus-within{--lift:-6px;--z-icoon:30px;--z-titel:16px;--z-pijl:24px} /* Aanraking kent geen muispositie: daar is het antwoord een indruk, geen kanteling. */ .tile:active{--lift:-1px;transition-duration:.09s} /* De schaduw is een eigen laag achter de tegel. Zo verschuift hij mee met de kanteling zonder dat er per beeld een nieuwe schaduw getekend wordt. */ .tile::before{ content:"";position:absolute;inset:8px 8px -4px; border-radius:var(--radius-card); box-shadow:0 22px 46px rgba(31,42,36,.17); opacity:0;pointer-events:none; transform:translate3d(var(--sx,0px),var(--sy,0px),-46px); transition:opacity .34s var(--ease),transform .5s var(--adem); } .tile:hover::before,.tile:focus-within::before{opacity:1} .tile.kantelt::before{transition:opacity .34s var(--ease),transform .11s linear} .tile__icon{transition:border-radius .9s var(--ease),transform .5s var(--adem)} .tile__icon{transform:translate3d(0,0,var(--z-icoon,0px))} .tile__link{ transform:translate3d(0,0,var(--z-titel,0px));transform-style:preserve-3d; transition:transform .5s var(--adem),color .22s var(--ease); } /* Het onzichtbare klikvlak hoort op de kaart te blijven liggen, niet mee naar voren te komen: anders wordt het raakvlak groter dan de tegel. */ .tile__link::after{transform:translate3d(0,0,calc(-1 * var(--z-titel,0px)))} .tile__arrow{transform:translate3d(0,0,var(--z-pijl,0px))} /* ---------- 5. prijskaart: het element dat verkoopt ---------- */ .price-grid{perspective:1300px;perspective-origin:50% 40%} .price-card{ --rx:0deg;--ry:0deg;--lift:0px; position:relative;transform-style:preserve-3d; transform:translate3d(0,calc(var(--rv-y,0px) + var(--lift)),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--rv-s,1)); transition:transform .5s var(--adem),box-shadow .34s var(--ease); } .price-card.kantelt{transition:transform .11s linear,box-shadow .34s var(--ease);will-change:transform} .price-card:hover,.price-card:focus-within{ --lift:-5px;--z-titel:14px;--z-prijs:28px;--z-knop:20px;--z-tekst:6px; } .price-card:active{--lift:-1px;transition-duration:.09s} .price-card::before{ content:"";position:absolute;inset:10px 10px -4px; border-radius:var(--radius-card); box-shadow:0 24px 50px rgba(31,42,36,.18); opacity:0;pointer-events:none; transform:translate3d(var(--sx,0px),var(--sy,0px),-50px); transition:opacity .34s var(--ease),transform .5s var(--adem); } .price-card:hover::before,.price-card:focus-within::before{opacity:1} .price-card.kantelt::before{transition:opacity .34s var(--ease),transform .11s linear} .price-card__head h3{transform:translate3d(0,0,var(--z-titel,0px))} .price-card__price{transform:translate3d(0,0,var(--z-prijs,0px))} .price-card__desc,.price-card__list{transform:translate3d(0,0,var(--z-tekst,0px))} .price-card__btnwrap{transform:translate3d(0,0,var(--z-knop,0px))} .price-card__head h3,.price-card__price,.price-card__desc, .price-card__list,.price-card__btnwrap{transition:transform .5s var(--adem)} /* ---------- 6. productkaarten (verhuur) ---------- */ /* Deze kaart klemt zijn foto af, en overflow:hidden plat 3D-lagen af. De kaart zelf kantelt daarom wel, de inhoud blijft plat. */ .product-grid{perspective:1400px} .product-card{ --rx:0deg;--ry:0deg;--lift:0px; transform:translate3d(0,calc(var(--rv-y,0px) + var(--lift)),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--rv-s,1)); transition:transform .5s var(--adem),box-shadow .34s var(--ease); } .product-card.kantelt{transition:transform .11s linear,box-shadow .34s var(--ease);will-change:transform} .product-card:hover,.product-card:focus-within{ --lift:-4px;box-shadow:0 4px 8px rgba(31,42,36,.05),0 18px 40px rgba(31,42,36,.09); } .product-card:active{--lift:0px;transition-duration:.09s} /* ---------- 7. contactformulier ---------- */ .field{position:relative} .field label{transition:color .2s var(--ease)} .field:focus-within label{color:var(--primary-ink)} /* Een groene streep onder een veld dat klopt. Geen tekst, geen vinkje: een bevestiging die je ziet zonder dat je hem hoeft te lezen. */ .field::after{ content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px; background:var(--primary);border-radius:2px;pointer-events:none; transform:scaleX(0);transform-origin:0 50%; transition:transform .3s var(--ease); } .field.is-goed::after{transform:scaleX(1)} .field.is-fout input,.field.is-fout textarea{border-color:var(--fout)} .field.is-fout input:focus,.field.is-fout textarea:focus{box-shadow:0 0 0 3px rgba(155,44,27,.18)} .veldfout{ margin:0;font-size:var(--small);line-height:1.45;color:var(--fout); animation:foutOp .22s var(--ease) both; } @keyframes foutOp{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* ---------- 8. mobiel paneel: regel voor regel binnen ---------- */ /* De verborgen stand hangt aan het gesloten paneel, niet aan de rij zelf. Zo is een rij die om welke reden dan ook nooit meedoet gewoon zichtbaar. */ .mnav__item,.mnav__foot{transition:opacity .28s var(--ease),transform .4s var(--adem)} .mnav:not(.is-open) .mnav__item, .mnav:not(.is-open) .mnav__foot{opacity:0;transform:translateY(-14px)} .mnav.is-open .mnav__item:nth-child(1){transition-delay:.05s} .mnav.is-open .mnav__item:nth-child(2){transition-delay:.08s} .mnav.is-open .mnav__item:nth-child(3){transition-delay:.11s} .mnav.is-open .mnav__item:nth-child(4){transition-delay:.14s} .mnav.is-open .mnav__item:nth-child(5){transition-delay:.17s} .mnav.is-open .mnav__item:nth-child(6){transition-delay:.2s} .mnav.is-open .mnav__item:nth-child(n+7){transition-delay:.23s} .mnav.is-open .mnav__foot{transition-delay:.26s} .mnav.schuift{will-change:transform} .hamburger,.mnav__close{transition:transform .14s var(--snel)} .hamburger:active,.mnav__close:active{transform:scale(.93)} /* ---------- 9. kleine antwoorden ---------- */ .contact-list a,.footer-links a,.social a,.nav__link,.nav__sub a{ transition:color .2s var(--ease),background-color .2s var(--ease), border-color .2s var(--ease),transform .16s var(--snel); } .contact-list a:active,.social a:active{transform:scale(.97)} .dienst-arrow{will-change:auto} /* ============================================================ Beperkte beweging: geen diepte, geen parallax, geen kanteling. De pagina staat dan stil en is compleet. ============================================================ */ @media (prefers-reduced-motion:reduce){ .hero__media,.hero__blobs,.hero__inner, .page-head__media img,.prose__media img,.fig img, .wave svg, .tile,.tile::before,.tile__icon,.tile__link,.tile__link::after,.tile__arrow, .tile:hover .tile__arrow,.tile:focus-within .tile__arrow, .price-card,.price-card::before,.price-card__head h3,.price-card__price, .price-card__desc,.price-card__list,.price-card__btnwrap, .product-card, .mnav__item,.mnav__foot, .hamburger:active,.mnav__close:active, .contact-list a:active,.social a:active{ transform:none!important; } .tile::before,.price-card::before{opacity:0!important} .mnav:not(.is-open) .mnav__item, .mnav:not(.is-open) .mnav__foot{opacity:0!important} .gpu,.kantelt,.mnav.schuift{will-change:auto!important} .veldfout{animation:none!important} }