/* ============================================================ YOSHUA VISUALS: Liquid Glass design system Twee thema's, rood van toon. Donker is de standaard; licht komt via data-theme="light" op , gezet door yv-core.js. Hoe het schakelen werkt: Bijna alles loopt via de tokens hieronder. Wat daar niet in past (losse glasvullingen, randen en slagschaduwen door de hele stylesheet) gebruikt twee grondstoffen: rgba(var(--tint),X) opdruk op het oppervlak. Licht op donker in het donkere thema, donker op licht in het lichte. Zo blijft elke doorzichtigheid die al fijngeregeld was gewoon kloppen. rgba(var(--shadow-rgb),X) slagschaduw. In het lichte thema een warme grijstint in plaats van zwart, anders worden de kaarten loodzwaar. Sluiers over foto's (rgba(8,4,5,X) en verwanten) blijven in beide thema's donker: het bijschrift erop is altijd wit. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ color-scheme:dark; --tint:255,255,255; --shadow-rgb:0,0,0; /* --- palette: dark, deep red, bright red --- */ --ink:#080405; --ink-2:#0c0609; --red-deep:#4c0a15; --red:#b11226; --red-bright:#e11d35; --rose:#ff6b7d; --blush:#ffd9dd; --text-1:#fff7f7; --text-2:rgba(247,233,235,.74); /* .46 measured 4.06:1 on the page background, under the 4.5:1 WCAG AA floor for the small captions that use it (.ls, .lp small). .54 lands at ~5.2:1 and still reads as the quiet tone next to --text-2. */ --text-3:rgba(247,233,235,.54); --accent:var(--rose); --accent-strong:var(--red-bright); --page-base:#080405; --page-bg: radial-gradient(1200px 820px at 10% -10%,#2b0a13 0%,transparent 56%), radial-gradient(1000px 700px at 102% 4%,rgba(177,18,38,.30) 0%,transparent 52%), radial-gradient(1100px 900px at 84% 102%,#240710 0%,transparent 55%), linear-gradient(180deg,#0c0609 0%,#080405 100%); --page-dots:rgba(255,255,255,.045); --glass-bg:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.028)); --glass-border:rgba(255,255,255,.14); --glass-sheen:linear-gradient(140deg,rgba(255,255,255,.20) 0%,transparent 34%,transparent 70%,rgba(255,120,140,.07) 100%); --glass-shadow:0 34px 80px -34px rgba(0,0,0,.85); --glass-inset:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.3); --nav-bg:linear-gradient(150deg,rgba(28,10,15,.74),rgba(12,6,9,.58)); --nav-border:rgba(255,255,255,.13); --line:rgba(255,255,255,.1); --input-bg:rgba(255,255,255,.05); --input-border:rgba(255,255,255,.14); --radius:26px; --ease:cubic-bezier(.22,1,.36,1); --blur:saturate(170%) blur(22px); } /* ============================================================ LICHT THEMA Twee dingen bepalen of dit werkt: 1. De pagina is GEEN wit vel. Hij is warm lichtgrijs. Alleen dan kan een glaspaneel er met bijna-wit bovenuit komen; op wit papier verdwijnt wit glas en houd je een menubalk zonder rand over. 2. Het rood zit in de accenten, niet in het behang. Een rode gloed van 10% over bijna-wit levert babyroze op, en dat oogt goedkoop. De ondertoon is nu warm grijs met een spoor rood; de kleur komt terug in knoppen, cursieve accenten en lijnen. Het accent wordt --red in plaats van --rose: dat lichte roze haalt op wit maar 2,7:1 en is onleesbaar, --red haalt 7,0:1. ============================================================ */ :root[data-theme="light"]{ color-scheme:light; --tint:52,24,28; --shadow-rgb:104,74,78; --text-1:#1d1113; --text-2:rgba(29,17,19,.76); /* .58 kwam uit op 4,3:1 en zakte daarmee onder de 4,5:1 die kleine tekst nodig heeft. .64 haalt 5,2:1 op de pagina en 5,5:1 op een glaspaneel, en blijft nog steeds duidelijk de stille toon naast --text-2. */ --text-3:rgba(29,17,19,.64); --accent:var(--red); --accent-strong:var(--red); --blush:#7a0f1d; --page-base:#f3eeed; /* Geen rode radialen meer: elke rode gloed over bijna-wit wordt roze, hoe laag je hem ook zet. De diepte komt nu van een enkel warm verloop. */ --page-bg:linear-gradient(180deg,#f8f4f3 0%,#ece5e4 100%); --page-dots:rgba(52,24,28,.05); /* Panelen liggen licht op een grijzere pagina; dat verschil maakt het glas. */ --glass-bg:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.7)); --glass-border:rgba(52,24,28,.11); --glass-sheen:linear-gradient(140deg,rgba(255,255,255,.8) 0%,transparent 36%,transparent 70%,rgba(177,18,38,.04) 100%); --glass-shadow:0 22px 50px -30px rgba(70,38,42,.34); --glass-inset:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(52,24,28,.05); --nav-bg:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.74)); --nav-border:rgba(52,24,28,.12); --line:rgba(52,24,28,.12); --input-bg:rgba(255,255,255,.78); --input-border:rgba(52,24,28,.15); } /* Losse onderdelen die met een eigen donkere vulling waren getekend en dus niet vanzelf meedraaien met de tokens hierboven. */ :root[data-theme="light"] .rail-top::before, :root[data-theme="light"] .wa-float, :root[data-theme="light"] .nav-drop, :root[data-theme="light"] .date-pop{ background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.82)); border-color:rgba(52,24,28,.12); } /* Let op: de achtergrond van .nav-links hoort alleen bij het fullscreen menu op smalle schermen. Op desktop is .nav-links gewoon een rij links in de balk, en dan levert een vulling een grijs blok achter de menu-items op. Die regels staan daarom in het mobiele blok verderop, niet hier. */ /* De lezer blijft donker: je kijkt naar papier, dat komt beter uit tegen een gedempte achtergrond, net als in een fotoviewer. */ :root[data-theme="light"] .fb{ background:radial-gradient(80vw 60vh at 50% 40%,rgba(58,8,17,.5),rgba(20,8,11,.82)); } /* De cursor tekent zichzelf met een donkere vulling; op licht wordt dat wit. */ :root[data-theme="light"] .yv-cur-book b, :root[data-theme="light"] .yv-cur-book i{background:rgba(255,251,251,.9)} /* De slotoproep is een merkblok: vol rood met witte tekst. Op donker kwam die kleur uit een doorzichtig rood over de zwarte pagina, en dat verbleekte op licht papier tot roze met onleesbare donkere letters. Hier dus dekkend rood en tekst die wit blijft. */ :root[data-theme="light"] .cta{ background:linear-gradient(130deg,#b11226,#6d0f1e); } :root[data-theme="light"] .cta p, :root[data-theme="light"] .cta small, :root[data-theme="light"] .cta .eyebrow{color:rgba(255,247,247,.85)} :root[data-theme="light"] .cta .btn-glass{ color:#fff7f7;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28); } :root[data-theme="light"] .cta .btn-glass:hover{color:#fff} /* Het labeltje bij het scrollwiel zweeft over de pagina, niet over een foto. */ :root[data-theme="light"] .rail-label{ background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.82)); } /* De cameratekening is op donker een subtiele gloed, maar diezelfde felle rode lijn op licht papier springt eruit als een sticker. Donkerder en zwakker, zodat het weer achtergrond wordt. */ :root[data-theme="light"] .cam-scene{opacity:.13} :root[data-theme="light"] .cam-rig{color:var(--red-deep)} /* Vignetten op foto's die bedoeld waren om in de donkere pagina te vervloeien. */ /* Op donker mocht deze sluier ver doorlopen; alles eronder was toch donker. Op licht zie je de rand ervan als een naad dwars over de foto's, dus hier vervaagt alleen de buitenste linkerrand. */ :root[data-theme="light"] .hero-rails::after{ background:linear-gradient(90deg,rgba(243,238,237,.92) 0%,rgba(243,238,237,.3) 10%,transparent 26%); } :root[data-theme="light"] .rail-track figure::after{ background:linear-gradient(180deg,transparent 55%,rgba(40,12,18,.28)); } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:'Manrope',system-ui,sans-serif; color:var(--text-2); background:var(--page-base); /* 1rem in plaats van 16px, zodat de body meeschaalt met de basismaat die op telefoons kleiner wordt gezet (zie onderaan dit bestand). */ font-size:1rem;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .page-bg{position:fixed;inset:0;z-index:-2;background:var(--page-bg)} .page-bg::after{content:"";position:absolute;inset:0; background-image:radial-gradient(var(--page-dots) 1px,transparent 1px); background-size:32px 32px; mask:radial-gradient(1400px 900px at 50% 18%,#000,transparent 78%); -webkit-mask:radial-gradient(1400px 900px at 50% 18%,#000,transparent 78%)} /* height:auto is required now that every carries its intrinsic width and height. Those attributes let the browser reserve the right space before the file arrives (no reflow), but without height:auto the attribute height would stick while max-width shrinks the width, squashing the photo. Containers that set their own height (object-fit covers) use more specific selectors and still win over this. */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* Keyboard focus. Every interactive element was relying on the browser default, which is invisible against a dark background once buttons carry their own backgrounds. :focus-visible keeps it off for mouse clicks. */ :focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px} /* Skip link: first tab stop, so keyboard and screen reader users can jump past the nav instead of walking it on every page. */ .skip-link{position:absolute;left:1rem;top:1rem;z-index:2000;transform:translateY(-160%); padding:.7rem 1.2rem;border-radius:999px;font-size:.8rem;font-weight:700; /* Vast wit: de achtergrond is altijd het rode merkvlak, dus --text-1 zou in het lichte thema zwarte letters op rood geven (2,6:1). */ color:#fff;background:var(--red);border:1px solid rgba(255,255,255,.25); transition:transform .2s var(--ease)} .skip-link:focus{transform:translateY(0)} /* ---------- cinematic preloader ---------- */ body.has-preloader{overflow:hidden} .site-preloader{ position:fixed;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden; color:#fff;background: radial-gradient(760px 520px at 18% 80%,rgba(177,18,38,.34),transparent 60%), radial-gradient(620px 460px at 70% 36%,rgba(255,107,125,.13),transparent 62%), linear-gradient(135deg,#050305 0%,#151417 48%,#060304 100%); animation:preloader-fallback 6.1s var(--ease) forwards; transition:opacity .85s var(--ease),visibility .85s var(--ease),transform .85s var(--ease); } .site-preloader::before{ content:"";position:absolute;inset:-20%;opacity:.55; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; transform:perspective(900px) rotateX(58deg) translateY(18%); animation:preloader-grid 4s linear both; } .site-preloader::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 50%,transparent 0 22%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.68) 100%); pointer-events:none; } .site-preloader.is-done{ animation:none; opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.018); } .preloader-ambient{ position:absolute;width:min(56vw,620px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(225,29,53,.28),rgba(122,15,29,.08) 34%,transparent 66%); filter:blur(8px);animation:preloader-pulse 4.4s ease-in-out infinite; } .preloader-stage{ position:relative;z-index:1;display:grid;justify-items:center;gap:1.4rem; perspective:1000px;text-align:center; } .preloader-logo-3d{ position:relative;width:clamp(116px,13vw,172px);aspect-ratio:1; display:grid;place-items:center;transform-style:preserve-3d; animation:preloader-logo 4.75s cubic-bezier(.17,.84,.25,1) both; } .preloader-logo-3d img{ width:54%;height:54%;object-fit:contain;z-index:4; filter:drop-shadow(0 0 18px rgba(225,29,53,.8)) drop-shadow(0 22px 34px rgba(0,0,0,.58)); animation:preloader-core 3.8s var(--ease) both; } .preloader-ring, .preloader-blade{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d} .preloader-ring{ border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 0 28px rgba(225,29,53,.18),0 0 36px rgba(177,18,38,.2); } .ring-a{ background:conic-gradient(from 40deg,transparent 0 14%,rgba(225,29,53,.86) 15% 18%,transparent 19% 42%,rgba(255,255,255,.22) 43% 45%,transparent 46% 100%); mask:radial-gradient(circle,transparent 48%,#000 50% 56%,transparent 58%); -webkit-mask:radial-gradient(circle,transparent 48%,#000 50% 56%,transparent 58%); animation:preloader-spin-a 4.9s var(--ease) both; } .ring-b{ inset:10%;background:conic-gradient(from 180deg,rgba(122,15,29,.92),transparent 24%,rgba(255,255,255,.16),transparent 58%,rgba(225,29,53,.7)); mask:radial-gradient(circle,transparent 52%,#000 54% 62%,transparent 64%); -webkit-mask:radial-gradient(circle,transparent 52%,#000 54% 62%,transparent 64%); animation:preloader-spin-b 4.9s var(--ease) both; } .ring-c{ inset:20%;border-color:rgba(225,29,53,.36); background:radial-gradient(circle,rgba(177,18,38,.18),rgba(0,0,0,.44) 58%,transparent 61%); animation:preloader-ring-c 4.45s var(--ease) both; } .preloader-blade{ inset:17%;z-index:3; background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(8,4,5,.9) 36%,rgba(225,29,53,.42)); clip-path:polygon(50% 50%,93% 39%,88% 51%,55% 63%); opacity:.78;filter:drop-shadow(0 0 8px rgba(225,29,53,.22)); transform:rotate(var(--blade-rot)) translateZ(20px) scale(.55); animation:preloader-blades 4.2s var(--ease) both; } .blade-1{--blade-rot:0deg}.blade-2{--blade-rot:60deg}.blade-3{--blade-rot:120deg} .blade-4{--blade-rot:180deg}.blade-5{--blade-rot:240deg}.blade-6{--blade-rot:300deg} .preloader-copy strong{ display:block;font-size:.95rem;letter-spacing:.34em;text-transform:uppercase;color:#fff; text-shadow:0 0 22px rgba(225,29,53,.26); } .preloader-copy em{ font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic; color:#ff6b7d;letter-spacing:.08em;text-transform:none; } .preloader-copy span{ display:block;margin-top:.55rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(255,247,247,.58); } .preloader-bar{ width:min(300px,58vw);height:3px;overflow:hidden;background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 28px rgba(225,29,53,.14); } .preloader-bar i{ display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0); background:linear-gradient(90deg,#7a0f1d,#e11d35,#fff0f2); box-shadow:0 0 22px rgba(225,29,53,.72); animation:preloader-load 5.15s cubic-bezier(.2,.78,.25,1) both; } @keyframes preloader-fallback{0%,88%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}} @keyframes preloader-grid{from{transform:perspective(900px) rotateX(58deg) translateY(24%)}to{transform:perspective(900px) rotateX(58deg) translateY(8%)}} @keyframes preloader-pulse{0%,100%{transform:scale(.92);opacity:.62}50%{transform:scale(1.08);opacity:.95}} @keyframes preloader-logo{ 0%{opacity:0;transform:translateY(28px) rotateX(58deg) rotateZ(-18deg) scale(.78)} 45%{opacity:1;transform:translateY(0) rotateX(18deg) rotateZ(5deg) scale(1.03)} 78%,100%{opacity:1;transform:translateY(0) rotateX(0) rotateZ(0) scale(1)} } @keyframes preloader-core{0%,30%{opacity:0;transform:scale(.68) translateZ(44px)}70%,100%{opacity:1;transform:scale(1) translateZ(44px)}} @keyframes preloader-spin-a{0%{transform:rotateZ(-150deg) rotateY(70deg);opacity:0}62%{opacity:1}100%{transform:rotateZ(210deg) rotateY(0)}} @keyframes preloader-spin-b{0%{transform:rotateZ(190deg) rotateX(65deg);opacity:0}60%{opacity:1}100%{transform:rotateZ(-110deg) rotateX(0)}} @keyframes preloader-ring-c{0%{opacity:0;transform:scale(.5) translateZ(-30px)}72%,100%{opacity:1;transform:scale(1) translateZ(0)}} @keyframes preloader-blades{0%,20%{opacity:0;transform:rotate(var(--blade-rot)) translateZ(80px) scale(.2)}72%,100%{opacity:.78;transform:rotate(var(--blade-rot)) translateZ(20px) scale(.55)}} @keyframes preloader-load{0%{transform:scaleX(0)}82%,100%{transform:scaleX(1)}} .preloader-reveal-wipe{ position:fixed;inset:-10% -22%;z-index:4500;pointer-events:none; background: linear-gradient(112deg,transparent 0 34%,rgba(255,255,255,.18) 42%,transparent 49%), linear-gradient(112deg,rgba(5,3,4,0) 0%,rgba(122,15,29,.9) 35%,rgba(225,29,53,.82) 48%,rgba(5,3,4,.92) 58%,rgba(5,3,4,0) 74%); filter:blur(.2px) drop-shadow(0 0 34px rgba(225,29,53,.26)); transform:translateX(-120%) skewX(-10deg); animation:preloader-reveal-wipe 1.1s cubic-bezier(.22,1,.36,1) both; } .preloader-reveal .nav-shell{animation:preloader-nav-enter .9s var(--ease) both} .preloader-reveal #hero .hero-copy{animation:preloader-copy-enter 1.05s .08s var(--ease) both} .preloader-reveal #hero .hero-rails{animation:preloader-visual-enter 1.15s .1s var(--ease) both} @keyframes preloader-reveal-wipe{ 0%{opacity:.96;transform:translateX(-120%) skewX(-10deg)} 58%{opacity:.82} 100%{opacity:0;transform:translateX(118%) skewX(-10deg)} } @keyframes preloader-nav-enter{ 0%{opacity:0;transform:translateY(-18px) scale(.985);filter:blur(8px)} 100%{opacity:1;transform:none;filter:blur(0)} } @keyframes preloader-copy-enter{ 0%{opacity:0;transform:translateY(28px) scale(.985);filter:blur(12px)} 100%{opacity:1;transform:none;filter:blur(0)} } @keyframes preloader-visual-enter{ 0%{opacity:0;transform:translateX(34px) rotateY(-8deg) scale(.985);filter:blur(14px) brightness(.75)} 100%{opacity:1;transform:none;filter:blur(0) brightness(1)} } @media (prefers-reduced-motion:reduce){ body.has-preloader{overflow:auto} .site-preloader{animation:preloader-fallback 1.1s ease forwards} .site-preloader::before,.preloader-ambient,.preloader-logo-3d,.preloader-logo-3d img, .preloader-ring,.preloader-blade,.preloader-bar i{animation:none} .preloader-bar i{transform:scaleX(1)} .preloader-reveal-wipe{display:none} .preloader-reveal .nav-shell, .preloader-reveal #hero .hero-copy, .preloader-reveal #hero .hero-rails{animation:none} } /* ---------- type ---------- */ .serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400} .eyebrow{ display:inline-flex;align-items:center;gap:.65rem; font-size:.68rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase; color:var(--accent-strong);margin-bottom:1.1rem; } .eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.75} .h-display{ font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;line-height:1.04; letter-spacing:-.035em;color:var(--text-1); } .h-display em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400; color:var(--accent);letter-spacing:-.01em} .lead{color:var(--text-2);font-weight:300;line-height:1.8;max-width:34rem} .wrap{width:min(1200px,90%);margin-inline:auto} section{position:relative} .section-pad{padding:clamp(4.5rem,9vw,8rem) 0} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;margin-bottom:3rem;flex-wrap:wrap} .section-head .lead{margin-top:.4rem} @media (max-width:640px){.section-head{align-items:flex-start;flex-direction:column;gap:1rem}} /* ---------- glass ---------- */ .glass{ position:relative;isolation:isolate; background:var(--glass-bg); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--glass-inset),var(--glass-shadow); } .glass::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:var(--glass-sheen);opacity:.9; } /* ---------- buttons ---------- */ .btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.95rem 1.7rem;border-radius:999px;border:1px solid transparent; font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:#fff; background:linear-gradient(180deg,var(--red-bright),var(--red)); box-shadow: inset 0 1px 0 rgba(var(--tint),.34), 0 16px 34px -18px rgba(225,29,53,.82), 0 0 0 1px rgba(255,107,125,.08); transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .3s var(--ease); } .btn::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1; background:linear-gradient(115deg,transparent,rgba(var(--tint),.45),transparent); transform:skewX(-22deg);transition:transform .75s var(--ease)} .btn:hover{transform:translateY(-3px);box-shadow: inset 0 1px 0 rgba(var(--tint),.45), 0 24px 48px -18px rgba(225,29,53,.95), 0 0 32px -18px rgba(255,107,125,.9)} .btn:hover::after{transform:translateX(380%) skewX(-22deg)} .btn .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn-glass{ color:var(--text-1);background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); box-shadow:var(--glass-inset),0 12px 30px -16px rgba(var(--shadow-rgb),.6); } /* Bij het zweven werd de tekst hard wit. Dat werkte op donker, maar op het lichte glaspaneel verdween de knop dan volledig. --text-1 is in beide thema's de sterkste tekstkleur, dus dat klopt altijd. */ .btn-glass:hover{transform:translateY(-3px);border-color:rgba(255,107,125,.5);color:var(--text-1)} .btn-sm{padding:.68rem 1.35rem;font-size:.7rem} /* ============================================================ NAV: floating glass bar ============================================================ */ .nav-shell{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center; padding:1.1rem 4%;transition:padding .4s var(--ease)} .nav-shell.shrink{padding:.5rem 4%} .nav{ width:min(1180px,100%);display:flex;align-items:center;gap:1.2rem; padding:.5rem .55rem .5rem 1.5rem;border-radius:999px; border:1px solid var(--nav-border); box-shadow:inset 0 1px 0 rgba(var(--tint),.22),0 22px 54px -26px rgba(var(--shadow-rgb),.8); position:relative;isolation:isolate;z-index:1001; } /* Blur sits on a pseudo-element so .nav never becomes a containing block for its position:fixed descendant (.nav-links on mobile). */ .nav::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--nav-bg); -webkit-backdrop-filter:saturate(165%) blur(20px);backdrop-filter:saturate(165%) blur(20px); } /* One brand lockup, used in the header, the mobile menu and the footer, so the logo can never drift apart between them. */ .nav-logo, .foot-brand{ display:inline-flex;align-items:center;gap:.42rem; font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--text-1);white-space:nowrap;line-height:1; } .brand-word{display:inline-block} .brand-accent{ color:var(--accent);font-weight:300;font-family:'Instrument Serif',serif; font-style:italic;letter-spacing:.03em;text-transform:none;font-size:1.02rem; } .brand-mark{ width:1.75rem;height:1.75rem;display:block;object-fit:contain;flex:0 0 auto; filter:drop-shadow(0 0 10px rgba(177,18,38,.58)) drop-shadow(0 0 22px rgba(122,15,29,.28)); transform:translateY(-1px); transition:filter .28s var(--ease),transform .28s var(--ease); } .nav-logo:hover .brand-mark, .foot-brand:hover .brand-mark{ filter:drop-shadow(0 0 14px rgba(225,29,53,.72)) drop-shadow(0 0 30px rgba(122,15,29,.4)); transform:translateY(-1px) scale(1.04); } .nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto;list-style:none} .nav-links a{position:relative;padding:.56rem .78rem;font-size:.68rem;font-weight:600;letter-spacing:.105em; text-transform:uppercase;color:var(--text-2);border-radius:999px;transition:color .2s} /* Same box as .nav-drop-btn and .nav-cta, which are both inline-flex. As plain inline elements these links sat on the text baseline instead of being centred, which put them roughly 1.3px lower than the two buttons beside them. */ .nav-links > li > a{display:inline-flex;align-items:center} .nav-links a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.4rem;height:1.5px;border-radius:2px; background:var(--red-bright);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .nav-links a:hover{color:var(--text-1)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} .nav-links a.active{color:var(--text-1)} /* .nav-links a is specifieker dan .btn en overschreef daardoor de witte knoptekst met de gewone menukleur. Op donker viel dat niet op, op licht werd het zwarte letters op een rode knop. */ .nav-links a.nav-cta, .nav-links a.nav-cta:hover{color:#fff} .nav-cta{margin-left:.45rem;padding:.68rem 1.2rem !important;font-size:.66rem !important} .nav-toggle{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--nav-border); background:var(--input-bg);color:var(--text-1);margin-left:auto;align-items:center;justify-content:center; position:relative;z-index:1002} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px; border-radius:2px;background:currentColor;transition:.25s var(--ease)} .nav-toggle span{position:relative} .nav-toggle span::before{position:absolute;top:-6px} .nav-toggle span::after{position:absolute;top:6px} .nav-shell.open .nav-toggle span{background:transparent} .nav-shell.open .nav-toggle span::before{top:0;transform:rotate(45deg)} .nav-shell.open .nav-toggle span::after{top:0;transform:rotate(-45deg)} .nav-menu-foot{display:none} /* ---------- licht/donker schakelaar ---------- */ /* Alleen actief in de twee frames waarin het thema omgaat; zie yv-core.js. */ :root.thema-wissel, :root.thema-wissel *, :root.thema-wissel *::before, :root.thema-wissel *::after{ transition:none !important; } .thema-knop{ width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center; margin-left:.5rem; color:var(--text-2);background:rgba(var(--tint),.07); border:1px solid var(--nav-border); transition:color .25s var(--ease),background .25s var(--ease),transform .4s var(--ease); } .thema-knop:hover{color:var(--text-1);background:rgba(var(--tint),.14);transform:rotate(-18deg)} .thema-knop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* Eén icoon per thema: de maan als je in het licht zit, de zon als je in het donker zit. Je ziet dus waar je heen gaat, niet waar je bent. */ .thema-knop .zon{display:none} :root[data-theme="light"] .thema-knop .zon{display:block} :root[data-theme="light"] .thema-knop .maan{display:none} /* ---------- Diensten dropdown ---------- Built by yv-core.js so the four discipline pages are one hop from every page instead of a round trip through the homepage anchor. */ .nav-drop-wrap{position:relative} .nav-drop-btn{ display:inline-flex;align-items:center;gap:.42rem;position:relative; padding:.56rem .78rem;border-radius:999px; font-size:.68rem;font-weight:600;letter-spacing:.105em;text-transform:uppercase; color:var(--text-2);transition:color .2s; } .nav-drop-btn::after{ content:"";position:absolute;left:.78rem;right:1.6rem;bottom:.4rem;height:1.5px;border-radius:2px; background:var(--red-bright);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav-drop-btn.active,.nav-drop-wrap.open .nav-drop-btn{color:var(--text-1)} .nav-drop-btn.active::after,.nav-drop-wrap.open .nav-drop-btn::after{transform:scaleX(1)} .nav-drop-btn svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)} .nav-drop-wrap.open .nav-drop-btn svg{transform:rotate(180deg)} .nav-drop{ position:absolute;top:calc(100% + .75rem);left:50%; transform:translateX(-50%) translateY(-8px); min-width:13.5rem;padding:.45rem;list-style:none;border-radius:20px; background:linear-gradient(150deg,rgba(30,11,16,.96),rgba(12,6,9,.95)); -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%); border:1px solid rgba(var(--tint),.14); box-shadow:inset 0 1px 0 rgba(var(--tint),.16),0 26px 60px -28px rgba(var(--shadow-rgb),.95); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s; } /* Bridges the gap under the button so the panel does not close while the pointer travels to it. */ .nav-drop::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem} @media (hover:hover){ .nav-drop-wrap:hover .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)} .nav-drop-wrap:hover .nav-drop-btn{color:var(--text-1)} .nav-drop-wrap:hover .nav-drop-btn::after{transform:scaleX(1)} } .nav-drop-wrap:focus-within .nav-drop, .nav-drop-wrap.open .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)} .nav-links .nav-drop li{width:auto} .nav-links .nav-drop a{ display:flex;align-items:baseline;gap:.6rem;width:100%;padding:.6rem .85rem;border-radius:14px; font-size:.68rem;letter-spacing:.095em;text-transform:uppercase;color:var(--text-2); transition:color .2s,background .2s; } .nav-links .nav-drop a::after{display:none} .nav-links .nav-drop a:hover,.nav-links .nav-drop a.active{color:var(--text-1);background:rgba(var(--tint),.07)} .nav-drop i{font-style:normal;font-size:.58rem;font-weight:800;color:var(--accent);letter-spacing:.1em} @media (max-width:900px){ .nav-links{ position:fixed;inset:0;z-index:999;margin:0; flex-direction:column;align-items:center;justify-content:center;gap:.3rem; padding:4.5rem 8% 12rem;overflow-y:auto; background:linear-gradient(165deg,rgba(16,7,10,.97),rgba(8,4,5,.99)); -webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .45s var(--ease),visibility .45s; } .nav-links::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.55; background-image:radial-gradient(rgba(var(--tint),.06) 1px,transparent 1px);background-size:30px 30px; mask:radial-gradient(900px 700px at 50% 30%,#000,transparent 75%); -webkit-mask:radial-gradient(900px 700px at 50% 30%,#000,transparent 75%); } .nav-shell.open .nav-links{opacity:1;visibility:visible;pointer-events:auto} .nav-links li{width:100%;max-width:22rem;flex:none} /* Beats the .nav-links > li > a rule in the base styles, which would otherwise keep these inline-flex and stop them filling the menu. */ .nav-links a, .nav-links > li > a{ display:flex;align-items:center;justify-content:center;width:100%; padding:1rem 0;font-weight:700;font-size:clamp(1.05rem,4.4vw,1.3rem); letter-spacing:.1em;text-transform:uppercase;color:#fff7f7; opacity:0;transform:translateY(22px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s; } .nav-shell.open .nav-links a{opacity:1;transform:none} .nav-links li:nth-child(1) a{transition-delay:.05s} .nav-links li:nth-child(2) a{transition-delay:.1s} .nav-links li:nth-child(3) a{transition-delay:.15s} .nav-links li:nth-child(4) a{transition-delay:.2s} .nav-links li:nth-child(5) a{transition-delay:.25s} .nav-links li:nth-child(6) a{transition-delay:.3s} .nav-links a::after{display:none} .nav-links a:hover{color:var(--accent)} .nav-cta{ margin:1.3rem 0 0 !important;padding:1rem 2.2rem !important;font-size:.72rem !important; background:linear-gradient(180deg,var(--red-bright),var(--red)) !important; color:#fff !important; } .nav-toggle{display:inline-flex;order:2;margin-left:.5rem} /* Vanaf hier is .nav-links het fullscreen menu, dus hier mag hij wel een eigen vulling hebben. */ :root[data-theme="light"] .nav-links{ background:linear-gradient(165deg,rgba(247,243,242,.98),rgba(238,231,230,.99)); } :root[data-theme="light"] .nav-links .nav-menu-foot{ background:linear-gradient(0deg,rgba(243,238,237,.95) 30%,transparent); } :root[data-theme="light"] .nav-links a{color:var(--text-1)} :root[data-theme="light"] .nav-links a.nav-cta{color:#fff} /* Het menu is op deze breedte position:fixed en telt niet mee in de rij, dus de knoppen staan hier met volgorde in plaats van met DOM-positie: logo, dan het thema, dan de hamburger. */ /* Boven het fullscreen menu, net als de hamburger, anders is de knop wel zichtbaar maar niet aan te klikken zodra het menu openstaat. */ .thema-knop{order:1;margin-left:auto;position:relative;z-index:1002} /* In the fullscreen menu the dropdown becomes a plain accordion: no hover to rely on, and no floating panel that would sit off-screen. */ .nav-drop-wrap{width:100%;max-width:22rem} .nav-drop-btn{ justify-content:center;width:100%;padding:1rem 0; font-size:clamp(1.05rem,4.4vw,1.3rem);font-weight:700;letter-spacing:.1em;color:var(--text-1); opacity:0;transform:translateY(22px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s; } .nav-shell.open .nav-drop-btn{opacity:1;transform:none;transition-delay:.05s} .nav-drop-btn::after{display:none} .nav-drop-btn svg{width:10px;height:10px} /* The open-state rules above are three classes deep, so the reset has to match them or the panel keeps its translateX(-50%) and slides half off the screen. Media queries add no specificity of their own. */ .nav-drop, .nav-drop-wrap.open .nav-drop, .nav-drop-wrap:focus-within .nav-drop{ position:static;left:auto;transform:none; min-width:0;padding:0 0 .6rem;border:none;box-shadow:none;background:none; -webkit-backdrop-filter:none;backdrop-filter:none; opacity:1;visibility:visible;pointer-events:auto; } .nav-drop{display:none} .nav-drop::before{display:none} .nav-drop-wrap.open .nav-drop{display:block} .nav-links .nav-drop a{ justify-content:center;padding:.72rem 0;font-size:.95rem;font-weight:600; letter-spacing:.09em;color:var(--text-2);opacity:1;transform:none;background:none; } .nav-links .nav-drop a:hover,.nav-links .nav-drop a.active{color:var(--accent);background:none} .nav-links .nav-menu-foot{ display:flex;position:absolute;left:0;right:0;bottom:0;width:auto;max-width:none; flex-direction:column;align-items:center;gap:.5rem;text-align:center; padding:1.4rem 8% calc(1.4rem + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(var(--tint),.1); background:linear-gradient(0deg,rgba(8,4,5,.9) 30%,transparent); } .nav-links .nav-menu-foot a{padding:0;letter-spacing:.02em;width:auto} .nav-menu-address{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .9rem} .nav-menu-address span,.nav-links .nav-menu-address a{font-size:.7rem;font-weight:400; letter-spacing:.02em;color:var(--text-3);width:auto;text-transform:none} .nav-links .nav-menu-address a:hover{color:var(--accent)} } /* ============================================================ REVEAL + 3D DEPTH ============================================================ */ [data-reveal]{opacity:0;transform:translateY(38px) rotateX(8deg);transform-origin:center bottom; transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].in{opacity:1;transform:none} [data-reveal].d1{transition-delay:.08s} [data-reveal].d2{transition-delay:.16s} [data-reveal].d3{transition-delay:.24s} [data-reveal].d4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none} } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference) and (min-width:900px){ .depth{animation:depth-in linear both;animation-timeline:view();animation-range:entry 0% cover 34%} @keyframes depth-in{ from{opacity:0;transform:perspective(1400px) translateY(72px) translateZ(-170px) rotateX(10deg)} to{opacity:1;transform:none} } } } /* ============================================================ SCROLL CAMERA A wireframe mirrorless body (Canon EOS R6 silhouette) sitting far behind the content, turning a full 360° as the page scrolls. Real CSS 3D geometry, so every angle is genuinely correct rather than a flat image being squashed. Injected by yv-core.js and purely decorative. Sizing is em-based: change font-size on .cam-scene and the whole rig rescales. Note that opacity and filter must stay OFF .cam-rig, either property forces transform-style back to flat and collapses the 3D, so the fade lives on the .cam-scene wrapper instead. ============================================================ */ .cam-scene{ position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1; pointer-events:none;overflow:hidden; perspective:120em; font-size:10px; opacity:.24; } .cam-rig{ /* Anchored to the left edge of the content column rather than to a plain percentage, so roughly a quarter stays tucked behind the content on every screen width instead of drifting with the viewport. `.wrap` is min(1200px, 90%) centred, so its left edge is 50% - min(600px, 45vw). */ position:absolute;left:max(17em, calc(50% - min(600px, 45vw) - 8em));top:52%;width:0;height:0; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(0deg); will-change:transform; color:var(--red-bright); /* Proportions follow a real EOS R6 (138 x 98 x 88 mm body, RF zoom on the front), scaled so 1em is roughly 4.5mm. X+ is right seen from the front, Y+ is down, Z+ points towards the viewer. */ --cw:30em;--ch:20em;--cd:11em; /* body */ --gw:7em;--gd:17em;--gx:-11.5em;--gz:3em;--gzf:11.5em; /* hand grip */ --vw:9em;--vh:3.2em;--vd:6.6em;--vy:-11.6em;--vz:-1em; /* EVF hump */ --ew:6.6em;--eh:4.4em;--ed:2.6em;--ey:-9.4em;--ezc:-6.8em;--ezb:-8.1em; /* eyecup */ --lens:15em; /* lens diameter */ } .cam-rig span{position:absolute;left:0;top:0;border:1px solid currentColor;background:none} /* Parts are nudged back so the rig spins around the camera's own mass rather than around the sensor plane, which keeps the lens from swinging wide. */ .cam-parts{position:absolute;left:0;top:0;width:0;height:0; transform-style:preserve-3d;transform:translateZ(-5em)} /* ---- body ---- */ .c-front{width:var(--cw);height:var(--ch);border-radius:1.2em;transform:translate(-50%,-50%) translateZ(calc(var(--cd)/2))} .c-back {width:var(--cw);height:var(--ch);border-radius:1.2em;transform:translate(-50%,-50%) translateZ(calc(var(--cd)/-2))} .c-right{width:var(--cd);height:var(--ch);transform:translate(-50%,-50%) translateX(calc(var(--cw)/2)) rotateY(90deg)} .c-left {width:var(--cd);height:var(--ch);transform:translate(-50%,-50%) translateX(calc(var(--cw)/-2)) rotateY(90deg)} .c-top {width:var(--cw);height:var(--cd);transform:translate(-50%,-50%) translateY(calc(var(--ch)/-2)) rotateX(90deg)} .c-bot {width:var(--cw);height:var(--cd);transform:translate(-50%,-50%) translateY(calc(var(--ch)/2)) rotateX(90deg)} /* rear screen */ .c-lcd {width:14em;height:9em;border-radius:.4em;transform:translate(-50%,-50%) translate3d(0,1em,calc(var(--cd)/-2 - .15em))} /* ---- hand grip: deep, rounded, sits left of the mount seen from the front ---- */ .g-front{width:var(--gw);height:var(--ch);border-radius:.8em 2.6em 2.6em .8em; transform:translate(-50%,-50%) translate3d(var(--gx),0,var(--gzf))} .g-left {width:var(--gd);height:var(--ch); transform:translate(-50%,-50%) translate3d(calc(var(--gx) - var(--gw)/2),0,var(--gz)) rotateY(90deg)} .g-right{width:var(--gd);height:var(--ch); transform:translate(-50%,-50%) translate3d(calc(var(--gx) + var(--gw)/2),0,var(--gz)) rotateY(90deg)} .g-top {width:var(--gw);height:var(--gd); transform:translate(-50%,-50%) translate3d(var(--gx),calc(var(--ch)/-2),var(--gz)) rotateX(90deg)} .g-bot {width:var(--gw);height:var(--gd); transform:translate(-50%,-50%) translate3d(var(--gx),calc(var(--ch)/2),var(--gz)) rotateX(90deg)} /* ---- viewfinder hump ---- */ .v-front{width:var(--vw);height:var(--vh);transform:translate(-50%,-50%) translate3d(0,var(--vy),calc(var(--vz) + var(--vd)/2))} .v-back {width:var(--vw);height:var(--vh);transform:translate(-50%,-50%) translate3d(0,var(--vy),calc(var(--vz) - var(--vd)/2))} .v-left {width:var(--vd);height:var(--vh);transform:translate(-50%,-50%) translate3d(calc(var(--vw)/-2),var(--vy),var(--vz)) rotateY(90deg)} .v-right{width:var(--vd);height:var(--vh);transform:translate(-50%,-50%) translate3d(calc(var(--vw)/2),var(--vy),var(--vz)) rotateY(90deg)} .v-top {width:var(--vw);height:var(--vd);transform:translate(-50%,-50%) translate3d(0,calc(var(--vy) - var(--vh)/2),var(--vz)) rotateX(90deg)} /* ---- eyecup, protruding out of the back ---- */ .e-back {width:var(--ew);height:var(--eh);border-radius:1.6em;transform:translate(-50%,-50%) translate3d(0,var(--ey),var(--ezb))} .e-top {width:var(--ew);height:var(--ed);transform:translate(-50%,-50%) translate3d(0,calc(var(--ey) - var(--eh)/2),var(--ezc)) rotateX(90deg)} .e-bot {width:var(--ew);height:var(--ed);transform:translate(-50%,-50%) translate3d(0,calc(var(--ey) + var(--eh)/2),var(--ezc)) rotateX(90deg)} /* ---- hot shoe ---- */ .h-top {width:4.4em;height:3.3em;transform:translate(-50%,-50%) translate3d(0,-14.2em,var(--vz)) rotateX(90deg)} .h-front{width:4.4em;height:1em;transform:translate(-50%,-50%) translate3d(0,-13.7em,calc(var(--vz) + 1.65em))} /* ---- top-plate dials and shutter button (flat discs, vertical axis) ---- */ .c-disc{border-radius:50%;width:var(--dw);height:var(--dw); transform:translate(-50%,-50%) translate3d(var(--dx),var(--dy),var(--dz)) rotateX(90deg)} /* ---- lens barrel: stacked rings read as a lens from every angle ---- */ .c-ring{ border-radius:50%; width:calc(var(--lens) * var(--m,1));height:calc(var(--lens) * var(--m,1)); transform:translate(-50%,-50%) translateZ(calc(var(--cd)/2 + var(--z,0em))); } /* the red L-series ring, the one marking every Canon pro lens */ .c-ring.lseries{border-width:2px;color:#ff8f9c} /* Rings alone collapse to flat lines when the rig turns side-on, so four lengthwise bars run along the barrel to keep its silhouette readable from every angle. Each is placed at an angle around the lens axis, pushed out to the barrel radius, then swung to lie parallel to that axis. */ .cam-rig .c-bar{ border:0;background:currentColor;height:1px;width:var(--bl); transform:translate(-50%,-50%) translateZ(var(--bz)) rotateZ(var(--ba)) translateY(calc(var(--br) * -1)) rotateY(90deg); } @keyframes yv-cam-spin{ from{transform:rotateX(-14deg) rotateY(0deg)} to {transform:rotateX(-14deg) rotateY(360deg)} } @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ /* Longhands on purpose: the `animation` shorthand would reset animation-duration to 0s, and a scroll-driven animation needs it to stay `auto` so it stretches across the whole scroll range. */ .cam-rig{ animation-name:yv-cam-spin; animation-timing-function:linear; animation-fill-mode:both; animation-timeline:scroll(root block); } } } /* Narrower viewports leave less room beside the content column, so the rig shrinks to keep the same share of it visible in the margin. */ @media (max-width:1600px){.cam-scene{font-size:6.5px}} @media (max-width:1100px){ /* Below this the column is 90% wide and there is no usable margin left, so the rig moves back behind the centre of the content. */ .cam-scene{font-size:7px;opacity:.16} .cam-rig{left:50%;top:48%} } @media (max-width:760px){ /* Phone layouts run full-bleed, so the rig always sits behind body copy. Kept faint enough that it reads as texture and never fights the text. */ .cam-scene{font-size:6px;opacity:.1} .cam-rig{left:50%;top:44%} } /* ---------- tweede camera, rechtsonder in de hoek ---------- Dezelfde geometrie, kleiner en juist wél opvallend. Deze staat boven de inhoud in plaats van erachter, dus hij mag niet in de weg zitten: geen muisgebeurtenissen, en hij duikt weg zodra het scherm smal wordt, want daar botst hij met de WhatsApp-knop en het scrollwiel. */ .cam-scene.hoek{ left:auto;top:auto;right:0;bottom:0; /* Vaste px in plaats van em: het vlak moet even groot blijven wat de basismaat ook doet, anders schuift hij de hoek uit. */ width:300px;height:250px; z-index:1; font-size:8.4px; opacity:.62; } /* Iets uit het midden, zodat de body van de camera in de hoek zit en de lens naar het scherm wijst in plaats van eruit te lopen. */ .cam-scene.hoek .cam-rig{left:56%;top:50%} :root[data-theme="light"] .cam-scene.hoek{opacity:.5} @media (max-width:1600px){.cam-scene.hoek{font-size:7.6px}} @media (max-width:1100px){.cam-scene.hoek{width:250px;height:210px;font-size:6.6px}} @media (max-width:900px){.cam-scene.hoek{display:none}} /* ============================================================ FOOTER ============================================================ */ footer{padding:3rem 0 2.2rem;border-top:1px solid var(--line);margin-top:2rem} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:2.6rem} /* .foot-brand shares the lockup defined with .nav-logo above; only the slightly larger footer sizing is set here. */ .foot-brand{font-size:.86rem} .foot-top p{margin-top:.9rem;color:var(--text-3);font-size:.86rem;font-weight:300;line-height:1.75;max-width:22rem} .foot-col h4{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--text-1);margin-bottom:1rem} .foot-col ul{list-style:none;display:grid;gap:.55rem} .foot-col a,.foot-col li{color:var(--text-3);font-size:.86rem;font-weight:300;transition:color .2s} .foot-col a:hover{color:var(--accent)} .foot-bot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap; padding-top:1.6rem;border-top:1px solid var(--line);color:var(--text-3);font-size:.78rem} .foot-legal{display:flex;gap:1.2rem;flex-wrap:wrap} .foot-legal a:hover{color:var(--accent)} @media (max-width:860px){ .foot-top{grid-template-columns:1fr 1fr;gap:2rem} } @media (max-width:560px){ .foot-top{grid-template-columns:1fr} } /* ============================================================ PAGE HERO: compact hero for sub-pages ============================================================ */ .page-hero{padding:9.5rem 0 3.5rem;position:relative} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(760px 480px at 12% 22%,rgba(177,18,38,.24),transparent 68%)} .ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center} .ph-copy{max-width:35rem;min-width:0} .ph-copy h1{font-size:clamp(2.5rem,5.2vw,4.1rem);font-weight:800;line-height:1.02; letter-spacing:-.04em;color:var(--text-1)} .ph-copy h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400; color:var(--accent);letter-spacing:-.01em} .ph-copy > p{margin-top:1.3rem;font-size:1rem;color:var(--text-2);font-weight:300;line-height:1.8;max-width:31rem} .ph-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .page-hero.center{text-align:center} .page-hero.center .ph-copy{max-width:44rem;margin-inline:auto} .page-hero.center .ph-copy > p{margin-inline:auto} .page-hero.center .ph-actions{justify-content:center} .page-hero.center .eyebrow::before{display:none} /* stacked photo composition */ .ph-stack{position:relative;min-height:27rem} .ph-stack figure{position:absolute;border-radius:26px;overflow:hidden; border:1px solid rgba(var(--tint),.12);box-shadow:0 40px 80px -34px rgba(var(--shadow-rgb),.95)} .ph-stack img{width:100%;height:100%;object-fit:cover} .ph-main{inset:0 5.5rem 4rem 0} .ph-side{width:13rem;aspect-ratio:3/4;right:0;bottom:0} @media (max-width:960px){ .ph-grid{grid-template-columns:1fr;gap:2.4rem} .ph-stack{min-height:20rem} .ph-main{inset:0 4rem 3rem 0} .ph-side{width:9.5rem} } @media (max-width:640px){ .page-hero{padding:7.5rem 0 2.5rem} .ph-stack{min-height:15rem} .ph-side{width:7rem} } /* Portrait-shaped hero photos. The default slot is landscape, which crops a 2:3 picture down to its middle and cuts off heads; here the frame follows the photo instead. Declared after the breakpoints above so it wins. */ .ph-stack.portrait{min-height:36rem} .ph-stack.portrait .ph-main{inset:0 auto 3.5rem 0;width:min(64%,21rem)} .ph-stack.portrait .ph-side{width:11.5rem;aspect-ratio:2/3} @media (max-width:960px){ .ph-stack.portrait{min-height:27rem} .ph-stack.portrait .ph-main{width:min(62%,16rem)} .ph-stack.portrait .ph-side{width:9rem} } @media (max-width:640px){ .ph-stack.portrait{min-height:21rem} .ph-stack.portrait .ph-main{width:60%} .ph-stack.portrait .ph-side{width:7rem} } /* ---------- chips ---------- */ .chip-row{display:flex;flex-wrap:wrap;gap:.55rem} .chip{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:999px; font-size:.74rem;font-weight:600;color:var(--text-2); background:rgba(var(--tint),.06);border:1px solid rgba(var(--tint),.14); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); transition:transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .chip:hover{transform:translateY(-2px);color:var(--text-1);border-color:rgba(255,107,125,.45)} /* ============================================================ CONTENT BLOCKS ============================================================ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} @media (max-width:820px){.split{grid-template-columns:1fr}} .info-card{padding:2rem 1.9rem;border-radius:24px} .info-card h2{font-size:1.25rem;font-weight:700;color:var(--text-1);margin-bottom:.9rem;letter-spacing:-.02em} .info-card p{color:var(--text-2);font-weight:300;line-height:1.78;font-size:.93rem} .info-card p+p{margin-top:.7rem} .check{list-style:none;display:grid;gap:.7rem} .check li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-2); font-weight:300;font-size:.92rem;line-height:1.6} .check li::before{content:"✓";color:var(--accent-strong);font-weight:800;flex:none;font-size:.85rem;margin-top:.15rem} /* feature grid */ .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .feat{padding:1.8rem 1.6rem;border-radius:22px} .feat .fn{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.5rem; color:var(--accent);display:block;margin-bottom:.6rem} .feat h3{font-size:1.05rem;font-weight:700;color:var(--text-1);margin-bottom:.45rem} .feat p{color:var(--text-3);font-weight:300;font-size:.88rem;line-height:1.68} @media (max-width:860px){.feature-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.feature-grid{grid-template-columns:1fr}} /* ============================================================ PRICING ============================================================ */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch} .price-grid.four{grid-template-columns:repeat(4,1fr)} .price{padding:2.1rem 1.9rem;border-radius:26px;display:flex;flex-direction:column} .price.featured{border-color:rgba(255,107,125,.42); box-shadow:inset 0 1px 0 rgba(var(--tint),.28),0 40px 80px -30px rgba(225,29,53,.45)} .price .pop{align-self:flex-start;margin-bottom:.9rem;padding:.32rem .8rem;border-radius:999px; background:linear-gradient(180deg,var(--red-bright),var(--red));color:#fff; font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .price h3{font-size:1.25rem;font-weight:700;color:var(--text-1);margin-bottom:.7rem;letter-spacing:-.02em} .price .amt{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;color:var(--text-1);line-height:1} .price .amt small{font-size:.42em;font-weight:600;color:var(--text-3);letter-spacing:0; display:block;margin-bottom:.25rem} .price .rule{height:1px;background:var(--line);margin:1.5rem 0} .price ul{list-style:none;display:grid;gap:.65rem;margin-bottom:1.7rem} .price li{display:flex;gap:.65rem;align-items:flex-start;color:var(--text-2); font-weight:300;font-size:.88rem;line-height:1.55} .price li::before{content:"✓";color:var(--accent-strong);font-weight:800;flex:none;font-size:.82rem;margin-top:.1rem} .price .btn{width:100%;margin-top:auto} .price:not(.featured) .btn{background:var(--glass-bg);color:var(--text-1); border:1px solid var(--glass-border);box-shadow:none} .price:not(.featured) .btn:hover{border-color:rgba(255,107,125,.5)} @media (max-width:1000px){.price-grid.four{grid-template-columns:repeat(2,1fr)}} @media (max-width:900px){.price-grid{grid-template-columns:1fr}} @media (max-width:560px){.price-grid.four{grid-template-columns:1fr}} .price-note{margin-top:1.8rem;color:var(--text-3);font-size:.85rem;font-weight:300;text-align:center} /* Who pays what. Consumer packages are quoted as a round all-in price, while a business booking has 21% btw added on top. Spelling both out beside each other is clearer than a footnote either group has to interpret. */ .vat-split{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:2rem} .vat-split span{ display:inline-flex;align-items:baseline;gap:.6rem; padding:.6rem 1.1rem;border-radius:999px; font-size:.83rem;font-weight:300;color:var(--text-2); background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--glass-border); } /* --rose is op licht papier maar 2,7:1; --accent volgt het thema en haalt 6,1:1. */ .vat-split b{flex:none;font-size:.64rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--accent)} @media (max-width:600px){ .vat-split{flex-direction:column;align-items:stretch} .vat-split span{justify-content:flex-start} } /* ============================================================ RATE LIST Long tariff lists (package combinations, individual services, surcharges). A row layout rather than a table so it stays readable on a phone without horizontal scrolling. ============================================================ */ .rate-group{display:grid;gap:.55rem} .rate-group + .rate-head{margin-top:3rem} .rate-head{margin-bottom:1.2rem} .rate-head h3{font-size:1.15rem;font-weight:700;color:var(--text-1);letter-spacing:-.02em} .rate-head p{margin-top:.4rem;color:var(--text-3);font-size:.88rem;font-weight:300;max-width:44rem} .rate-row{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:1.1rem;padding:1rem 1.3rem;border-radius:18px; } .rate-code{ flex:none;min-width:3.4rem;text-align:center; padding:.32rem .6rem;border-radius:8px; font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--accent); background:rgba(225,29,53,.16);border:1px solid rgba(255,107,125,.28); } .rate-title{display:block;font-size:.95rem;font-weight:700;color:var(--text-1);letter-spacing:-.01em} .rate-desc{display:block;margin-top:.15rem;font-size:.82rem;font-weight:300;color:var(--text-3);line-height:1.5} .rate-price{flex:none;text-align:right;font-size:1.05rem;font-weight:800; color:var(--text-1);letter-spacing:-.02em;white-space:nowrap} .rate-price small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--text-3);margin-top:.1rem} /* the four packages Yoshua recommends get a red edge */ .rate-row.pick{border-color:rgba(255,107,125,.4); box-shadow:inset 0 1px 0 rgba(var(--tint),.22),0 18px 44px -26px rgba(225,29,53,.6)} .rate-row.pick .rate-code{background:linear-gradient(180deg,var(--red-bright),var(--red)); color:#fff;border-color:transparent} @media (max-width:640px){ .rate-row{grid-template-columns:1fr auto;gap:.5rem .9rem;padding:.9rem 1rem} .rate-code{grid-column:1;justify-self:start;min-width:0} .rate-price{grid-column:2;grid-row:1;align-self:start} .rate-row > .rate-main{grid-column:1 / -1} } /* delivery terms */ /* Links in de lijst erven anders de kleur van de lopende tekst en zijn dan niet als link te herkennen. */ .rate-terms a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em; text-decoration-color:rgba(255,107,125,.45);transition:text-decoration-color .25s var(--ease)} .rate-terms a:hover{text-decoration-color:var(--accent)} .rate-terms{display:grid;gap:.7rem;list-style:none;margin-top:.4rem} .rate-terms li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-2); font-weight:300;font-size:.9rem;line-height:1.6} .rate-terms li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%; margin-top:.55rem;background:var(--red-bright)} /* ============================================================ FAQ ============================================================ */ .faq-list{display:grid;gap:.7rem} .faq{border-radius:18px;overflow:hidden} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:1.2rem;padding:1.2rem 1.5rem} .faq summary::-webkit-details-marker{display:none} .faq .q{font-size:.96rem;font-weight:600;color:var(--text-1)} .faq .t{color:var(--accent);font-size:1.35rem;line-height:1;transition:transform .3s var(--ease);flex:none} .faq[open] .t{transform:rotate(45deg)} .faq .a{padding:0 1.5rem 1.3rem;color:var(--text-2);font-weight:300;font-size:.9rem;line-height:1.75} /* ============================================================ GALLERY (portfolio + category pages) ============================================================ */ .filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem} .filter-btn{padding:.6rem 1.2rem;border-radius:999px;font-size:.74rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--text-3); background:rgba(var(--tint),.05);border:1px solid rgba(var(--tint),.12); transition:.3s var(--ease)} .filter-btn:hover{color:var(--text-1);border-color:rgba(255,107,125,.4)} .filter-btn.on{color:#fff;background:linear-gradient(180deg,var(--red-bright),var(--red)); border-color:transparent;box-shadow:0 14px 30px -12px rgba(225,29,53,.7)} .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .gal-item{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5; border:1px solid rgba(var(--tint),.09);box-shadow:0 26px 56px -30px rgba(var(--shadow-rgb),.9)} .gal-item.tall{aspect-ratio:3/5} .gal-item.wide{aspect-ratio:3/2;grid-column:span 2} .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .gal-item:hover img{transform:scale(1.07)} .gal-item::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,4,5,.88));opacity:.8;transition:opacity .4s var(--ease)} .gal-item:hover::after{opacity:1} .gal-item figcaption{position:absolute;left:1rem;right:1rem;bottom:.95rem;z-index:2; transform:translateY(8px);opacity:.85;transition:.45s var(--ease)} .gal-item:hover figcaption{transform:none;opacity:1} .gal-item .cat{display:block;font-size:.6rem;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);margin-bottom:.22rem} .gal-item .ttl{font-size:.9rem;font-weight:700;color:#fff;letter-spacing:-.01em} .gal-item[hidden]{display:none} @media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.gal{grid-template-columns:1fr;gap:.8rem}.gal-item.wide{grid-column:span 1;aspect-ratio:4/5}} /* ============================================================ FORM ============================================================ */ .form{padding:2rem;border-radius:26px;display:grid;gap:1rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fg{display:grid;gap:.4rem} .fg label{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-strong)} .fg input,.fg select,.fg textarea{background:var(--input-bg);border:1px solid var(--input-border); border-radius:14px;padding:.85rem 1rem;color:var(--text-1);font-family:inherit;font-size:.92rem; font-weight:300;outline:none;transition:.2s;width:100%} .fg input::placeholder,.fg textarea::placeholder{color:var(--text-3)} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent)} .fg select option{background:#160a0e;color:#fff} .fg textarea{resize:vertical;min-height:120px} /* ---------- custom date picker (brand-matched, not the native OS one) ---------- */ .date-field{position:relative} .date-input{display:flex;align-items:center;justify-content:space-between;gap:.6rem; background:var(--input-bg);border:1px solid var(--input-border);border-radius:14px; padding:.85rem 1rem;color:var(--text-1);font-family:inherit;font-size:.92rem;font-weight:300; width:100%;text-align:left;cursor:pointer;transition:border-color .2s,background .2s} .date-input[data-empty="true"]{color:var(--text-3)} .date-input:hover{border-color:rgba(255,107,125,.35)} .date-input.is-open{border-color:var(--accent);background:rgba(var(--tint),.07)} .date-input-icon{width:18px;height:18px;flex:none;color:var(--accent-strong); fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .date-pop{position:absolute;top:calc(100% + .6rem);left:0;z-index:40;width:min(300px,100%); padding:1rem;border-radius:20px; background:linear-gradient(150deg,rgba(28,10,15,.96),rgba(12,6,9,.96)); -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%); border:1px solid rgba(var(--tint),.14); box-shadow:0 30px 70px -24px rgba(var(--shadow-rgb),.85),inset 0 1px 0 rgba(var(--tint),.12); animation:date-pop-in .2s var(--ease)} .date-pop[hidden]{display:none} @keyframes date-pop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}} .date-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem} .date-pop-title{font-size:.8rem;font-weight:700;color:var(--text-1);letter-spacing:.02em;text-transform:capitalize} .date-nav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none; color:var(--text-2);border:1px solid var(--line);background:rgba(var(--tint),.04); font-size:1rem;line-height:1;transition:.2s var(--ease)} .date-nav:hover{color:var(--text-1);border-color:rgba(255,107,125,.5);background:rgba(225,29,53,.22)} .date-pop-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.25rem} .date-pop-week span{text-align:center;font-size:.6rem;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--text-3)} .date-pop-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem} .date-day{aspect-ratio:1;display:grid;place-items:center;border-radius:10px; font-size:.8rem;font-weight:500;color:var(--text-2);transition:.18s var(--ease);background:none} .date-day:not(:disabled):hover{background:rgba(var(--tint),.09);color:var(--text-1)} .date-day:disabled{color:rgba(var(--tint),.3);cursor:not-allowed} .date-day.is-empty{visibility:hidden;cursor:default} .date-day.is-today{color:var(--accent);font-weight:800} .date-day.is-selected{background:linear-gradient(180deg,var(--red-bright),var(--red)); color:#fff !important;font-weight:800;box-shadow:0 10px 22px -10px rgba(225,29,53,.85)} .form .btn{justify-content:center;margin-top:.4rem} .form-note{font-size:.78rem;line-height:1.65;color:var(--text-3);border-left:2px solid var(--red-bright); padding-left:1rem;margin:.2rem 0 .4rem;font-weight:400} @media (max-width:760px){.form-row{grid-template-columns:1fr}} .contact-rows{display:grid;gap:.75rem;margin-top:1.8rem} .crow{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;border-radius:18px} .crow .ci{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; font-size:1.15rem;color:var(--accent);background:rgba(var(--tint),.06); border:1px solid rgba(var(--tint),.14);font-style:normal} .crow .cl{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--accent-strong);margin-bottom:.2rem} .crow .cv{color:var(--text-2);font-weight:300;font-size:.93rem;line-height:1.5} .crow a.cv:hover{color:var(--accent)} /* ============================================================ CTA STRIP ============================================================ */ .cta{position:relative;overflow:hidden;border-radius:32px;padding:clamp(2.2rem,5vw,3.8rem); display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap; background:linear-gradient(130deg,rgba(177,18,38,.4),rgba(76,10,21,.35))} .cta::after{content:"";position:absolute;right:-6%;top:-55%;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(225,29,53,.45),transparent 66%);pointer-events:none} .cta > *{position:relative;z-index:1} .cta h2{font-size:clamp(1.6rem,3.1vw,2.5rem);font-weight:800;letter-spacing:-.03em; color:#fff;line-height:1.12;max-width:20ch} .cta h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--blush)} .cta p{margin-top:.9rem;color:rgba(255,247,247,.8);font-weight:300;font-size:.94rem;max-width:34rem} .cta-act{display:flex;flex-direction:column;gap:.7rem;flex:none} .cta-act small{color:rgba(255,247,247,.6);font-size:.75rem;text-align:center} /* ============================================================ LEGAL / PROSE ============================================================ */ .legal{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:3rem;align-items:start} .legal-nav{position:sticky;top:7.5rem;display:grid;gap:.35rem} .legal-nav a{padding:.6rem .9rem;border-radius:12px;font-size:.85rem;font-weight:500; color:var(--text-3);transition:.25s var(--ease)} .legal-nav a:hover{color:var(--text-1);background:rgba(var(--tint),.05)} .legal-body{display:grid;gap:1rem} .legal-body article{padding:1.8rem;border-radius:22px;scroll-margin-top:7.5rem} .legal-body h2{font-size:1.1rem;font-weight:700;color:var(--text-1);margin-bottom:.7rem;letter-spacing:-.01em} .legal-body p{color:var(--text-2);font-weight:300;font-size:.92rem;line-height:1.8} .legal-body p + p{margin-top:.75rem} .legal-body ul{display:grid;gap:.55rem;margin:1rem 0 0;padding-left:1.1rem;color:var(--text-2)} .legal-body li{font-size:.9rem;line-height:1.75;font-weight:300;padding-left:.15rem} .legal-body li::marker{color:var(--accent-strong)} .legal-body strong{color:var(--text-1);font-weight:700} .legal-intro{border-color:rgba(225,29,53,.26)} @media (max-width:860px){ .legal{grid-template-columns:1fr;gap:1.6rem} .legal-nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content; overflow-x:auto;padding-bottom:.4rem} } /* ============================================================ SCROLL RAIL Fixed right-hand navigator, built by yv-core.js on every page. A progress ring doubles as the back-to-top button, and the dots below it map the sections of the page so you can see and jump to the content. Labels stay hidden until the rail is hovered so it reads as a quiet marker strip the rest of the time. ============================================================ */ .scroll-rail{ position:fixed;right:1.1rem;top:50%;transform:translateY(-50%);z-index:880; display:flex;flex-direction:column;align-items:flex-end;gap:.85rem; } /* progress ring + back to top */ .rail-top{ --p:0; position:relative;width:46px;height:46px;border-radius:50%;flex:none; display:grid;place-items:center; background:conic-gradient(var(--red-bright) calc(var(--p) * 1%), rgba(var(--tint),.13) 0); transition:transform .3s var(--ease); } .rail-top::before{ content:"";position:absolute;inset:3px;border-radius:50%; background:linear-gradient(150deg,rgba(30,11,16,.95),rgba(12,6,9,.9)); -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border:1px solid rgba(var(--tint),.1); } .rail-top svg{ position:relative;width:15px;height:15px;color:var(--text-2); fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; transition:color .25s var(--ease),transform .25s var(--ease); } .rail-top:hover{transform:translateY(-2px)} .rail-top:hover svg{color:var(--text-1);transform:translateY(-1px)} /* section markers: a tick per section, its length showing how long that section runs, so the strip doubles as a small map of the page */ .rail-list{ list-style:none;position:relative;display:flex;flex-direction:column; align-items:flex-end;gap:7px;padding:.55rem 0; } .rail-btn{ position:relative;display:flex;align-items:center;justify-content:flex-end; padding:2px 0; } /* Absolutely positioned so the hidden labels add no width to the rail; a wide invisible strip here would sit over the content and swallow clicks. */ .rail-label{ position:absolute;right:calc(100% + .55rem);top:50%; font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--text-3);white-space:nowrap; padding:.28rem .65rem;border-radius:999px; background:linear-gradient(150deg,rgba(30,11,16,.92),rgba(12,6,9,.86)); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(var(--tint),.1); opacity:0;transform:translateY(-50%) translateX(8px);pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease); } .rail-dot{ /* --w (0-1) is set per section by yv-core.js from its share of the page */ height:2px;border-radius:2px;flex:none;border:0; width:calc(14px + var(--w, .3) * 18px); /* Was bijna-wit: onzichtbaar zodra de pagina licht is. Via --tint draait de streep mee, dus licht op donker en donker op licht. */ background:rgba(var(--tint),.38); transform-origin:right center; transition:background .28s var(--ease),height .28s var(--ease), transform .28s var(--ease),box-shadow .28s var(--ease); } /* Only ever one label at a time: the section you are in (briefly, via .is-hint) or the tick you are pointing at. Showing them all at once stacked them on top of each other and became unreadable. */ .rail-btn:hover .rail-dot{background:var(--rose);transform:scaleX(1.18)} .rail-btn:hover .rail-label{opacity:1;transform:translateY(-50%);color:var(--text-1)} .rail-item.is-hint .rail-label{opacity:1;transform:translateY(-50%);color:var(--text-1); border-color:rgba(255,107,125,.42)} /* sections already scrolled past stay tinted, so the strip reads as progress */ .rail-item.is-past .rail-dot{background:rgba(225,29,53,.55)} .rail-item.is-on .rail-dot{ background:var(--red-bright);height:3px;transform:scaleX(1.3); box-shadow:0 0 10px rgba(225,29,53,.9); } @media (max-width:900px){ .scroll-rail{right:.65rem;gap:.65rem} .rail-label{display:none} } @media (max-width:600px){ /* No room for a marker strip beside the content; the progress ring stays because back-to-top is the part that matters most on a phone. */ .scroll-rail{top:auto;bottom:5.2rem;transform:none} .rail-list{display:none} .rail-top{width:40px;height:40px} } @media (prefers-reduced-motion:reduce){ .rail-top,.rail-top svg,.rail-dot,.rail-label{transition:none} } /* ============================================================ GRATIS GIDS: downloadblok Glazen paneel met de omslag als eyecatcher ernaast, zodat je ziet wat je downloadt in plaats van alleen een link te lezen. ============================================================ */ .gids{ display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); /* Ruime tussenruimte: de omslag staat schuin, dus met weinig lucht ertussen lijkt de tekst tegen de hoek van het boekje aan te lopen. */ gap:clamp(2.2rem,6vw,5.5rem);align-items:center; padding:clamp(1.8rem,3.5vw,3rem);border-radius:var(--radius); background:var(--glass-bg); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 rgba(var(--tint),.16),0 40px 90px -44px rgba(var(--shadow-rgb),.95); } .gids-beeld{ position:relative;display:block;flex:none; /* De omslag is A4, dus staand. Gekapt zodat hij naast de tekst een blikvanger blijft en er niet overheen torent. */ width:min(17rem,34vw);aspect-ratio:636/900;border-radius:14px;overflow:hidden; border:1px solid rgba(var(--tint),.16); box-shadow:0 34px 70px -30px rgba(var(--shadow-rgb),.95); transform:rotate(-2deg);transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .gids-beeld img{width:100%;height:100%;object-fit:cover} .gids-beeld:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 44px 84px -30px rgba(var(--shadow-rgb),.98)} .gids-pil{ position:absolute;left:.7rem;bottom:.7rem;padding:.34rem .7rem;border-radius:999px; font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--text-1);background:rgba(12,5,8,.72); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(var(--tint),.2); } .gids-tekst h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em; color:var(--text-1);margin:.3rem 0 .8rem} .gids-tekst h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic; font-weight:400;color:var(--accent)} .gids-tekst > p{color:var(--text-2);font-weight:300;line-height:1.75;font-size:.95rem; max-width:38rem} .gids-punten{list-style:none;display:grid;gap:.5rem;margin:1.3rem 0 0} .gids-punten li{display:flex;gap:.7rem;align-items:baseline; font-size:.9rem;font-weight:300;color:var(--text-2)} .gids-punten li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%; background:var(--rose);transform:translateY(-2px)} .gids-klein{display:block;margin-top:1rem;font-size:.76rem;color:var(--text-3)} @media (max-width:820px){ .gids{grid-template-columns:1fr;justify-items:center;text-align:center} .gids-beeld{width:min(14rem,52vw);transform:none} .gids-tekst > p{margin-inline:auto} /* De opsomming blijft links uitgelijnd. Gecentreerde regels met een bolletje ervoor lopen rafelig zodra een punt over twee regels valt. */ .gids-punten{text-align:left;width:fit-content;margin-inline:auto} .gids .chip-row{justify-content:center} } /* ============================================================ BLADERBARE GIDS Overlay met de negen pagina's als stapel. Bladeren draait het bovenste vel om zijn rug naar links weg, zoals in een echt boekje. ============================================================ */ .fb{ position:fixed;inset:0;z-index:2500;display:none; align-items:center;justify-content:center;flex-direction:column;gap:1.1rem; padding:clamp(1rem,4vh,2.5rem) 1rem; background:radial-gradient(80vw 60vh at 50% 40%,rgba(58,8,17,.72),rgba(6,2,4,.93)); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); opacity:0;transition:opacity .3s var(--ease); } .fb.is-open{display:flex} .fb.is-zichtbaar{opacity:1} .fb-stage{ position:relative;flex:none; /* Breedte volgt uit de hoogte, zodat een A4 nooit uitgerekt wordt. */ width:min(92vw,calc(78vh * 0.7056));aspect-ratio:635/900; perspective:2200px; } .fb-page{ position:absolute;inset:0;transform-origin:left center; transform-style:preserve-3d; transition:transform .78s cubic-bezier(.62,.03,.3,1); border-radius:4px; } @media (prefers-reduced-motion:reduce){ .fb-page{transition:none} } .fb-page.om{transform:rotateY(-180deg)} .fb-page img, .fb-rug{ position:absolute;inset:0;width:100%;height:100%;border-radius:4px; -webkit-backface-visibility:hidden;backface-visibility:hidden; box-shadow:0 30px 70px -26px rgba(var(--shadow-rgb),.9); } .fb-page img{object-fit:contain;background:#fffbfb} /* De achterkant van het vel. Zonder dit zie je tijdens het omslaan de voorkant gespiegeld, en dat verraadt meteen dat het geen papier is. */ .fb-rug{ transform:rotateY(180deg); background:linear-gradient(255deg,#fbf1f2 0%,#f3e2e4 46%,#fdf8f8 100%); border:1px solid rgba(177,18,38,.12); } /* Klikvlakken: linkerhelft terug, rechterhelft verder. */ .fb-klik{position:absolute;inset:0;display:flex;z-index:60} .fb-klik button{flex:1;background:none;border:0;cursor:pointer} .fb-klik button:first-child{cursor:w-resize} .fb-klik button:last-child{cursor:e-resize} body.has-cursor .fb-klik button{cursor:none} .fb-bar{ display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;justify-content:center; padding:.5rem .5rem .5rem 1.1rem;border-radius:999px; background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid rgba(255,255,255,.15);color:#fff7f7; } .fb-bar .fb-nr{font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text-2);min-width:5.2rem;text-align:center} .fb-rond{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none; color:var(--text-1);background:rgba(var(--tint),.08); border:1px solid rgba(var(--tint),.16);transition:background .2s,opacity .2s; } .fb-rond:hover:not(:disabled){background:rgba(225,29,53,.4)} .fb-rond:disabled{opacity:.3;cursor:default} .fb-rond svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .fb-sluit{position:absolute;top:clamp(.8rem,3vh,1.6rem);right:clamp(.8rem,3vw,1.6rem);z-index:70} @media (max-width:640px){ .fb-stage{width:min(94vw,calc(66vh * 0.7056))} .fb-bar{width:100%;justify-content:space-between;padding:.45rem} .fb-bar .fb-dl{order:3;width:100%;justify-content:center} } /* ============================================================ CURSOR: camera focus point A hard dot on the exact pointer position plus a trailing ring that snaps into autofocus brackets over anything clickable. Only mounted for a real mouse (see yv-core.js), so touch keeps its own behaviour. ============================================================ */ [data-drag-scroll].is-draggable{cursor:grab} [data-drag-scroll].is-grabbing{cursor:grabbing} @media (hover:hover) and (pointer:fine){ /* .has-cursor is set from JS, so without JS the normal pointer stays. */ body.has-cursor, body.has-cursor *{cursor:none} /* Text entry keeps the native caret: an I-beam says "you can type here" and nothing custom communicates that as well. */ body.has-cursor input, body.has-cursor textarea{cursor:auto} .yv-cur-dot, .yv-cur-ring{ position:fixed;top:0;left:0;z-index:3000;pointer-events:none; opacity:0;transition:opacity .25s var(--ease); } body.has-cursor.cur-on .yv-cur-dot, body.has-cursor.cur-on .yv-cur-ring{opacity:1} /* Over a text field the native caret takes over, so the custom one steps aside rather than doubling up. Needs the same three classes as the rule above, or the .cur-on rule outranks it and both cursors show at once. */ body.has-cursor.cur-text .yv-cur-dot, body.has-cursor.cur-text .yv-cur-ring{opacity:0} .yv-cur-dot{ width:6px;height:6px;border-radius:50%; background:var(--red-bright); box-shadow:0 0 10px rgba(225,29,53,.9),0 0 22px rgba(225,29,53,.35); } .yv-cur-ring{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(var(--tint),.5); transition:width .3s var(--ease),height .3s var(--ease), border-color .3s var(--ease),border-radius .3s var(--ease), opacity .25s var(--ease); } /* The four autofocus brackets, hidden until the ring is over a target. */ .yv-cur-ring i{ position:absolute;width:8px;height:8px; border:1.5px solid var(--rose);opacity:0; transition:opacity .25s var(--ease),inset .3s var(--ease); } .yv-cur-ring i:nth-child(1){inset:-1px auto auto -1px;border-right:0;border-bottom:0} .yv-cur-ring i:nth-child(2){inset:-1px -1px auto auto;border-left:0;border-bottom:0} .yv-cur-ring i:nth-child(3){inset:auto auto -1px -1px;border-right:0;border-top:0} .yv-cur-ring i:nth-child(4){inset:auto -1px -1px auto;border-left:0;border-top:0} /* Over something clickable: the circle squares off into a focus frame. */ body.cur-target .yv-cur-ring{ width:46px;height:46px;border-radius:10px;border-color:transparent; } body.cur-target .yv-cur-ring i{opacity:1} /* Over a photo the frame opens up, like framing a shot. */ body.cur-media .yv-cur-ring{width:62px;height:62px;border-radius:12px;border-color:transparent} body.cur-media .yv-cur-ring i{opacity:1;width:11px;height:11px} /* Pressing down fires the shutter: everything pulls in for a moment. */ body.cur-down .yv-cur-ring{width:26px;height:26px;border-color:var(--accent)} body.cur-down .yv-cur-dot{background:var(--rose)} /* Over de gids: geen scherpstelkader maar een boekje dat blijft bladeren, zodat je ziet dat je erin kunt kijken in plaats van hem te downloaden. */ .yv-cur-book{ position:fixed;top:0;left:0;z-index:3001;pointer-events:none; width:34px;height:24px;perspective:150px; opacity:0;transition:opacity .25s var(--ease); } body.has-cursor.cur-on.cur-book .yv-cur-book{opacity:1} /* Drie klassen diep, net als de cur-on regel hierboven, anders wint die en staan het boekje, de ring en de stip alle drie tegelijk op het scherm. */ body.has-cursor.cur-book .yv-cur-ring, body.has-cursor.cur-book .yv-cur-dot{opacity:0} .yv-cur-book b, .yv-cur-book i{ position:absolute;top:0;bottom:0;width:16px; border:1.5px solid var(--rose);background:rgba(14,5,8,.72); box-shadow:0 0 8px rgba(225,29,53,.45); } .yv-cur-book b:first-child{left:0;border-right:0;border-radius:3px 0 0 3px} .yv-cur-book b:nth-child(2){right:0;border-left:0;border-radius:0 3px 3px 0} /* De omslaande bladzijde. Hij draait om de rug van het boekje, verdwijnt aan het eind van de slag en komt onzichtbaar terug, zodat het blijft doorlopen. */ .yv-cur-book i{ right:0;border-left:0;border-radius:0 3px 3px 0; background:rgba(24,8,12,.95);transform-origin:left center; animation:yv-blader 1.9s var(--ease) infinite; } @keyframes yv-blader{ 0% {transform:rotateY(0deg); opacity:1} 42% {transform:rotateY(-166deg); opacity:1} 52% {transform:rotateY(-166deg); opacity:0} 53% {transform:rotateY(0deg); opacity:0} 66% {transform:rotateY(0deg); opacity:1} 100% {transform:rotateY(0deg); opacity:1} } @media (prefers-reduced-motion:reduce){ .yv-cur-book i{animation:none} } @media (prefers-reduced-motion:reduce){ .yv-cur-ring,.yv-cur-ring i{transition:opacity .2s linear} } } /* ---------- floating WhatsApp ---------- */ .wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900; display:inline-flex;align-items:center;gap:.65rem;padding:.7rem 1.15rem .7rem .7rem; border-radius:999px;color:var(--text-1);font-size:.8rem;font-weight:700; background:linear-gradient(150deg,rgba(28,10,15,.86),rgba(12,6,9,.78)); -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(var(--tint),.15); box-shadow:inset 0 1px 0 rgba(var(--tint),.2),0 18px 40px -18px rgba(var(--shadow-rgb),.9); transition:transform .3s var(--ease),border-color .3s var(--ease)} .wa-float:hover{transform:translateY(-3px);border-color:rgba(255,107,125,.45)} .wa-float i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none; background:linear-gradient(180deg,var(--red-bright),var(--red));font-style:normal} .wa-float i svg{width:16px;height:16px;fill:#fff} @media (max-width:560px){ .wa-float{padding:.6rem;border-radius:50%} .wa-float b{display:none} } /* ============================================================ TELEFOON: alles een slag rustiger De site rekent grotendeels in rem, dus door de basismaat te verlagen krimpt alles in verhouding mee: tekst, tussenruimtes, knoppen en afrondingen. Dat is rustiger dan losse regels per onderdeel, en het houdt de verhoudingen intact. 16px -> 15px op tablet, -> 14.5px op telefoon, oftewel zo'n 6 en 9 procent kleiner. Onder de 14px wordt lopende tekst te klein om comfortabel te lezen, dus daar gaan we niet onder. ============================================================ */ @media (max-width:900px){ html{font-size:15px} } @media (max-width:560px){ html{font-size:14.5px} /* Knoppen hebben naar verhouding meer lucht dan tekst, dus die krijgen er nog een kleine correctie bovenop. */ .btn{padding:.85rem 1.45rem;font-size:.72rem;letter-spacing:.1em} .btn-sm{padding:.62rem 1.2rem;font-size:.68rem} .chip{padding:.5rem .9rem;font-size:.68rem} /* De ronde knoppen staan in vaste pixels en krompen dus niet mee; daardoor werden ze juist dominanter toen de rest kleiner werd. Ze blijven wel ruim boven de 40px aanraakvlak waar een vinger om vraagt. */ .nav-toggle{width:40px;height:40px} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{width:16px} .thema-knop{width:34px;height:34px} .thema-knop svg{width:15px;height:15px} .rail-top{width:36px;height:36px} .wa-float i{width:26px;height:26px} .wa-float i svg{width:14px;height:14px} }