/* ============================================================ EKKEBUS VISUALS - Liquid Glass design system Shared across all pages. Theme switch via [data-theme] on . data-theme="dark" -> navy/ink pages (immersive, photo-led) data-theme="light" -> cream/beige pages (editorial, text-led) ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root, [data-theme="dark"]{ --cream:#f4eee4; --beige:#e6d6bd; --sand:#c8a777; --warm:#b56f3f; --warm-2:#c9814a; --dark:#17334f; --dark-2:#0f2338; --ink:#0b1a2b; /* Blauwtinten van diep naar licht. Een trap in plaats van een enkele kleur, zodat de pagina onderweg van toon verandert. */ --blauw-1:#071523; --blauw-2:#0b1a2b; --blauw-3:#12293f; --blauw-4:#1b3d5c; --blauw-5:#2f6288; --blauw-6:#7fb0d6; --rand-glans:rgba(127,176,214,.34); --text-1:#fffdf9; --text-2:rgba(238,231,220,.78); --text-3:rgba(238,231,220,.55); --accent:var(--sand); --accent-strong:var(--warm-2); --page-base:#0b1a2b; --band-licht:#12304a; --band-diep:#0a1a2b; /* Deze baan loopt over de volle paginahoogte en scrollt mee, waardoor het blauw langzaam van toon wisselt terwijl je naar beneden gaat. */ --page-loop:linear-gradient(180deg, #0e2438 0%,#0a1a2b 12%,#14344e 27%,#0a1a2c 40%, #16405b 54%,#091827 66%,#123650 78%,#08151f 90%,#050f18 100%); /* Sfeer die blijft staan, eindigt doorzichtig zodat de baan zichtbaar blijft. */ --page-bg: radial-gradient(1200px 800px at 12% -8%,rgba(41,92,136,.4) 0%,transparent 55%), radial-gradient(1000px 700px at 100% 8%,rgba(181,111,63,.26) 0%,transparent 50%), radial-gradient(1100px 900px at 85% 100%,rgba(22,66,96,.34) 0%,transparent 55%), radial-gradient(760px 520px at 50% 46%,rgba(47,98,136,.12) 0%,transparent 62%); --page-dots:rgba(255,255,255,.05); --glass-bg:linear-gradient(150deg,rgba(139,190,229,.15),rgba(255,255,255,.035)); --glass-border:rgba(255,255,255,.16); --glass-sheen:linear-gradient(140deg,rgba(255,255,255,.22) 0%,transparent 34%,transparent 70%,rgba(255,255,255,.06) 100%); --glass-shadow:0 30px 70px -30px rgba(11,26,43,.5); --glass-inset:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.18); --nav-bg:linear-gradient(150deg,rgba(26,52,78,.74),rgba(10,22,36,.56)); --nav-border:rgba(255,255,255,.14); --line:rgba(127,176,214,.17); /* vlakken en randen die met het thema meegaan */ --vlak-zacht:rgba(255,255,255,.06); --vlak-mid:rgba(255,255,255,.10); --vlak-sterk:rgba(255,255,255,.16); --rand-zacht:rgba(255,255,255,.12); --rand-sterk:rgba(255,255,255,.22); /* goud dat op een foto ligt blijft altijd hetzelfde */ --goud-op-beeld:#c8a777; --cta-vlak:linear-gradient(135deg,rgba(181,111,63,.28),rgba(23,51,79,.4)); --hero-voet:var(--page-base); --hero-voet-stop:55%; --intro-waas:rgba(6,14,24,.82); --menu-vlak:linear-gradient(165deg,rgba(10,20,32,.97),rgba(8,16,27,.99)); --pijl-vlak:rgba(9,20,33,.5); --pijl-rand:rgba(255,255,255,.28); --pijl-tekst:#fffdf9; --glasknop-hover:linear-gradient(150deg,rgba(200,167,119,.24),rgba(181,111,63,.12)); --input-bg:rgba(255,255,255,.06); --input-border:rgba(255,255,255,.16); --input-border-focus:var(--sand); } [data-theme="light"]{ --cream:#ffffff; --beige:#efe9dd; --sand:#87642f; /* dieper goud, want op papier moet het leesbaar blijven */ --warm:#a75f31; --warm-2:#9e5a2a; --dark:#17334f; --dark-2:#0f2338; --ink:#0f2033; --blauw-1:#0f2338; --blauw-2:#17334f; --blauw-3:#22496b; --blauw-4:#2f6288; --blauw-5:#3f7ba5; --blauw-6:#7ba6c6; --rand-glans:rgba(31,74,110,.22); --text-1:#10233a; --text-2:#43566a; --text-3:#61738a; --accent:var(--sand); --accent-strong:var(--warm); --page-base:#f1efe9; --band-licht:#f7f5f0; --band-diep:#eae7df; --page-loop:linear-gradient(180deg, #f4f2ec 0%,#efece5 14%,#f8f6f1 30%,#edeae2 46%, #f6f4ef 62%,#eae7df 78%,#f1efe9 100%); --page-bg: radial-gradient(1200px 800px at 12% -8%,rgba(47,98,136,.10) 0%,transparent 55%), radial-gradient(1000px 700px at 100% 8%,rgba(181,111,63,.10) 0%,transparent 50%), radial-gradient(1100px 900px at 85% 100%,rgba(47,98,136,.07) 0%,transparent 55%); --page-dots:rgba(23,51,79,.05); --glass-bg:linear-gradient(150deg,rgba(255,255,255,.82),rgba(240,236,228,.66)); --glass-border:rgba(23,51,79,.1); --glass-sheen:linear-gradient(140deg,rgba(255,255,255,.85) 0%,transparent 42%,transparent 74%,rgba(255,255,255,.4) 100%); --glass-shadow:0 26px 60px -34px rgba(16,35,58,.22); --glass-inset:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(16,35,58,.05); --nav-bg:linear-gradient(150deg,rgba(252,251,248,.9),rgba(240,236,228,.78)); --nav-border:rgba(23,51,79,.1); --line:rgba(31,74,110,.14); --vlak-zacht:rgba(16,35,58,.04); --vlak-mid:rgba(16,35,58,.07); --vlak-sterk:rgba(16,35,58,.11); --rand-zacht:rgba(16,35,58,.1); --rand-sterk:rgba(16,35,58,.16); --goud-op-beeld:#c8a777; --cta-vlak:linear-gradient(135deg,rgba(181,111,63,.14),rgba(47,98,136,.12)); --hero-voet:var(--page-base); --hero-voet-stop:26%; --intro-waas:rgba(20,30,42,.72); --menu-vlak:linear-gradient(165deg,rgba(250,249,245,.97),rgba(240,237,230,.99)); --pijl-vlak:rgba(255,255,255,.82); --pijl-rand:rgba(16,35,58,.18); --pijl-tekst:#10233a; --glasknop-hover:linear-gradient(150deg,rgba(181,111,63,.16),rgba(200,167,119,.09)); --input-bg:rgba(255,255,255,.85); --input-border:rgba(16,35,58,.14); --input-border-focus:var(--warm); } :root{ /* Een systeem met vier hoeken en drie snelheden. Alles op de site gebruikt deze waarden, zodat het geheel als een hand oogt. */ --r-sm:14px; /* chips, invoervelden, kleine tegels */ --r-md:20px; /* kaarten en panelen */ --r-lg:28px; /* grote blokken en secties */ --r-pil:999px; /* knoppen en labels */ --radius:var(--r-lg); --t-snel:.2s; /* kleur, opacity, kleine dingen */ --t-mid:.35s; /* de standaard, hover en verplaatsing */ --t-traag:.6s; /* grote bewegingen en beeldschalen */ --ease:cubic-bezier(.22,1,.36,1); --blur:saturate(165%) blur(22px); } /* De basismaat bepaalt alles wat in rem staat. Kleiner betekent hier niet kleiner lezen maar meer lucht, want de witruimte staat ook in rem. */ html{font-size:15px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--page-base)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:'Inter',system-ui,sans-serif; color:var(--text-2); background-color:var(--page-base); background-image:var(--page-loop); background-repeat:no-repeat; background-size:100% 100%; font-size:1rem;line-height:1.6; -webkit-font-smoothing:antialiased; /* clip knipt horizontaal af zonder een scroll-container te maken, zodat position:sticky binnen de pagina blijft werken. hidden is de fallback. */ overflow-x:hidden; overflow-x:clip; } .page-bg{position:fixed;inset:0;z-index:-2;background:var(--page-bg)} .page-bg::after{content:"";position:absolute;inset:0;opacity:1; background-image:radial-gradient(var(--page-dots) 1px,transparent 1px); background-size:34px 34px;mask:radial-gradient(1400px 900px at 50% 20%,#000,transparent 80%)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ---------- shared type ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--accent-strong);margin-bottom:1.1rem; } .eyebrow::before{content:"";width:26px;height:1px;opacity:.85; background:linear-gradient(90deg,currentColor,var(--blauw-5))} .serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400} .h-display{ font-size:clamp(2.3rem,4.23vw,3.6rem);font-weight:800;line-height:1.03; letter-spacing:-.028em;color:var(--text-1); } .h-display em{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;color:var(--accent)} .lead{color:var(--text-2);font-weight:300;line-height:1.85;max-width:36rem} .wrap{width:min(1200px,90%);margin-inline:auto} section{position:relative} .section-pad{padding:clamp(5.8rem,10.6vw,9.6rem) 0} /* ---------- STROOK: om en om een vlakke band ---------- Zonder dit loopt de hele onderkant van de pagina als een egale blauwe vlakte door. Twee vlakke tinten die elkaar afwisselen, met een haarlijn op elke overgang. */ .strook{background-color:var(--band-licht);border-top:1px solid rgba(160,199,229,.15)} .strook-diep{background-color:var(--band-diep);border-top:1px solid rgba(160,199,229,.13)} .strook,.strook-diep{transition:background-color .5s var(--ease)} .section-head{display:flex;align-items:flex-end;justify-content:space-between; gap:2.8rem;margin-bottom:4rem;flex-wrap:wrap} .section-head .lead{margin-top:.4rem} @media (max-width:640px){.section-head{align-items:flex-start;flex-direction:column}} /* ---------- glass utilities ---------- */ .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:.85; } /* Always-dark glass, for panels that sit on photos regardless of page theme */ .glass-invert{ position:relative;isolation:isolate;color:#fffdf9; background:linear-gradient(150deg,rgba(18,34,52,.72),rgba(10,20,32,.6)); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 60px -26px rgba(0,0,0,.55); } .glass-invert::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.8; background:linear-gradient(140deg,rgba(255,255,255,.18) 0%,transparent 34%,transparent 70%,rgba(255,255,255,.05) 100%); } /* ---------- buttons ---------- */ .btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;gap:.6rem; padding:.92rem 1.6rem;border-radius:var(--r-pil);border:1px solid transparent; font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; cursor:pointer;color:#fff;background: linear-gradient(180deg,var(--rand-sterk),rgba(255,255,255,0)) padding-box, linear-gradient(180deg,var(--warm-2),var(--warm)) border-box; background-color:var(--warm); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 34px -12px rgba(181,111,63,.8); transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),filter .3s var(--ease); font-family:inherit; } .btn::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1; background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-22deg);transition:transform var(--t-traag) var(--ease)} .btn:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 44px -12px rgba(181,111,63,.9)} .btn:hover::after{transform:translateX(360%) skewX(-22deg)} .btn .arw{transition:transform var(--t-mid) 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);backdrop-filter:blur(14px); box-shadow:var(--glass-inset),0 10px 30px -14px rgba(0,0,0,.25); } .btn-glass:hover{transform:translateY(-3px); background:var(--glasknop-hover);border-color:var(--accent);color:var(--accent-strong)} .btn-ink{color:var(--dark);background:var(--cream);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 30px -14px rgba(0,0,0,.5)} .btn-ink:hover{background:#fff;transform:translateY(-3px)} .btn-sm{padding:.65rem 1.3rem;font-size:.72rem} /* pill chip links (hero anchors) */ .chip-row{display:flex;flex-wrap:wrap;gap:.6rem} .chip{ display:inline-flex;align-items:center;padding:.55rem 1.1rem;border-radius:var(--r-pil); font-size:.74rem;font-weight:600;letter-spacing:.05em; color:var(--text-1);background:var(--glass-bg);border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:var(--glass-inset);transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease); } .chip:hover{transform:translateY(-2px);color:var(--accent-strong)} /* ============================================================ NAV - floating liquid glass pill + fullscreen mobile overlay ============================================================ */ .nav-shell{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:1rem 4%; transition:padding var(--t-mid) var(--ease)} .nav-shell.shrink{padding:.55rem 4%} .nav{ width:min(1160px,100%);display:flex;align-items:center;gap:1.2rem; padding:.5rem .6rem .5rem 1.4rem;border-radius:var(--r-pil); border:1px solid var(--nav-border); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 20px 50px -24px rgba(0,0,0,.35); transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease); position:relative;isolation:isolate;z-index:1001; } /* Blur lives on a pseudo-element (not .nav itself) so .nav never becomes a containing block for its position:fixed descendant (.nav-links on mobile) - backdrop-filter on an ancestor traps fixed children to that ancestor's box. */ .nav::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--nav-bg); -webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px); } .nav-logo{font-size:.9rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-1);white-space:nowrap} .nav-logo span{color:var(--accent-strong);font-weight:300} .nav-links{display:flex;align-items:center;gap:.2rem;margin-left:auto;list-style:none} .nav-links a{position:relative;padding:.6rem .95rem;font-size:.78rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--text-2);border-radius:var(--r-pil);transition:color var(--t-snel),background var(--t-snel)} .nav-links a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.42rem;height:1.5px;border-radius:2px; background:var(--accent-strong);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) 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)} /* de koperen pil houdt lichte tekst, in beide thema's */ .nav-links a.nav-cta{margin-left:.5rem;padding:.46rem .95rem !important;font-size:.62rem !important;letter-spacing:.08em !important;color:#fff} .nav-links a.nav-cta:hover{color:#fff} .nav-toggle{display:none;width:44px;height:44px;flex:none;border-radius:var(--r-pil);border:1px solid var(--nav-border); background:var(--input-bg);color:var(--text-1);margin-left:auto;cursor:pointer;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:var(--t-snel) 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} .nav-home-fab{display:none} /* Fullscreen mobile menu */ @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:.35rem; padding:4.5rem 8% 13rem; overflow-y:auto; background:var(--menu-vlak); -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:.5; background-image:radial-gradient(var(--vlak-zacht) 1px,transparent 1px);background-size:30px 30px; 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;overflow:hidden;flex:none} .nav-links .nav-thema-li{width:auto;justify-content:center;overflow:visible} .nav-links a{ display:flex;align-items:center;justify-content:center;width:100%; padding:1rem 0;font-family:'Inter',sans-serif;font-style:normal;font-weight:700; font-size:clamp(1.05rem,4.05vw,1.3rem);letter-spacing:.08em;text-transform:uppercase;color:var(--text-1); opacity:0;transform:translateY(22px);transition:opacity var(--t-traag) var(--ease),transform var(--t-traag) 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(--sand)} /* zoeken op mobiel: de knop staat naast het hamburgermenu en het veld schuift als een nette balk onder de menubalk open */ .nav-shell .nav .nav-zoek-mob{display:inline-flex;margin-left:auto;width:38px;height:38px} .nav-shell .nav .nav-zoek-mob svg{width:15px;height:15px} .nav-links .nav-zoek-li,.nav-links .nav-zoek-breed{display:none} .nav-toggle{margin-left:.5rem} .nav .nav-zoekveld{ position:absolute;left:0;right:0;top:calc(100% + .55rem);transform:none; padding:.8rem 1.2rem;border-radius:var(--r-pil); background:var(--nav-bg);border:1px solid var(--nav-border); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:var(--glass-shadow)} /* kleiner logo, anders wordt de balk te vol */ .nav .nav-logo{font-size:.76rem;letter-spacing:.13em} .nav .nav-toggle{width:38px;height:38px} .nav .nav-toggle span,.nav .nav-toggle span::before,.nav .nav-toggle span::after{width:16px} /* drie ronde knoppen naast elkaar passen alleen als de rij strak staat */ .nav{gap:.45rem;padding:.4rem .5rem .4rem 1rem} .nav .nav-zoek-mob{margin-left:auto} .nav .nav-thema-mob{margin-left:0} .nav-toggle{margin-left:0} /* De licht/donkerknop zit in de balk zelf, links van het kruisje, zodat hij vanzelf op dezelfde hoogte staat als het huisje en het kruisje. */ .nav-links .nav-thema-li{display:none} .nav-shell .nav .nav-thema-mob{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;padding:0;border-radius:var(--r-pil);margin-left:0; background:var(--input-bg);border:1px solid var(--nav-border);color:var(--text-1); position:relative;z-index:1002} .nav .nav-thema-mob:hover{background:var(--vlak-sterk);color:var(--text-1)} .nav .nav-thema-mob svg{position:static;width:15px;height:15px} /* de balk komt eronder, dus het logo blijft gewoon staan. Extra specifiek, anders wint de algemene regel verderop. */ .nav-shell.zoekt .nav .nav-logo{opacity:1;pointer-events:auto} .nav-shell.zoekt .nav .nav-links{opacity:0;pointer-events:none} .nav .nav-zoek-uitslag{top:calc(100% + 4.6rem)} /* Boeken: klein en koperkleurig glas, niet de volle breedte */ .nav-links li:has(.nav-cta){width:auto;justify-content:center} .nav-links a.nav-cta{ width:auto !important; margin:1.4rem auto 0 !important;padding:.62rem 1.5rem !important;font-size:.68rem !important; font-family:'Inter',sans-serif !important;font-style:normal !important;letter-spacing:.1em !important; text-transform:uppercase !important; background:linear-gradient(150deg,rgba(214,144,86,.36),rgba(181,111,63,.2)) !important; border:1px solid rgba(214,152,101,.55) !important; box-shadow:inset 0 1px 0 rgba(255,225,196,.35),0 10px 26px -14px rgba(181,111,63,.75) !important; color:var(--sand) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(200,167,119,.15),0 20px 40px -20px rgba(0,0,0,.45) !important; -webkit-backdrop-filter:blur(16px) saturate(160%) !important;backdrop-filter:blur(16px) saturate(160%) !important; } .nav-cta:hover{background:linear-gradient(150deg,rgba(255,255,255,.36),rgba(224,197,153,.24)) !important} .nav-toggle{display:inline-flex} /* Home - round icon button, top-left, mirroring the close (×) on the right */ .nav-home-fab{ display:flex;align-items:center;justify-content:center; position:absolute;left:4%;top:50%;transform:translateY(-50%); width:38px;height:38px;border-radius:var(--r-pil);z-index:1003; background:var(--input-bg);border:1px solid var(--nav-border);color:var(--text-1); opacity:0;pointer-events:none; transition:opacity var(--t-mid) var(--ease),background var(--t-snel) var(--ease); } .nav-shell.open .nav-home-fab{opacity:1;pointer-events:auto} .nav-home-fab:hover{background:var(--vlak-sterk)} .nav-home-fab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Logo + address, pinned to the bottom of the menu */ .nav-links .nav-menu-foot{ position:absolute;left:0;right:0;bottom:0;width:auto;max-width:none;overflow:visible; display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center; padding:1.4rem 8% calc(1.4rem + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rand-zacht); background:linear-gradient(0deg,rgba(8,16,27,.85) 30%,transparent); } .nav-links .nav-menu-foot a{font-family:'Inter',sans-serif;font-style:normal;padding:0;letter-spacing:.02em} .nav-links .nav-menu-logo-text{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;width:auto} .nav-links .nav-menu-logo-text span{color:var(--sand);font-weight:300} .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:.68rem;font-weight:400;letter-spacing:.02em;color:var(--text-3);width:auto} .nav-links .nav-menu-address a:hover{color:var(--sand)} } /* ============================================================ REVEAL + 3D ============================================================ */ [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 32%} @keyframes depth-in{ from{opacity:0;transform:perspective(1400px) translateY(70px) translateZ(-160px) rotateX(10deg)} to{opacity:1;transform:none} } } } /* ============================================================ PAGE HERO (split copy/visual - used by diensten/tarieven) ============================================================ */ .page-hero{padding:9rem 0 3rem} .page-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center} .page-hero-copy{max-width:34rem;min-width:0} .page-hero-copy h1{font-size:clamp(2.6rem,4.78vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--text-1)} .page-hero-copy h1 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;color:var(--accent)} .page-hero-copy > p{margin-top:1.3rem;font-size:1.02rem;color:var(--text-2);font-weight:300;line-height:1.8;max-width:30rem} .page-hero-copy .chip-row{margin-top:1.6rem} .page-hero-note{margin-top:1.4rem;font-size:.86rem;color:var(--text-3)} .page-hero-note strong{color:var(--text-1)} .photo-stack{position:relative;min-height:26rem} .photo-stack-main{position:absolute;inset:0 3.2rem 3.2rem 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glass-shadow);border:1px solid var(--glass-border)} .photo-stack-main img{width:100%;height:100%;object-fit:cover} .photo-stack-side{position:absolute;right:0;bottom:0;width:11.5rem;display:grid;gap:.8rem} .photo-stack-side img{width:100%;height:8rem;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--glass-shadow);border:1px solid var(--glass-border)} @media (max-width:960px){ .page-hero-grid{grid-template-columns:1fr;gap:2.5rem} .photo-stack{min-height:20rem} } @media (max-width:640px){ .page-hero{padding:7.5rem 0 2rem} .photo-stack-main{inset:0 2.4rem 2.4rem 0} .photo-stack-side{width:8.5rem} .photo-stack-side img{height:6rem} } /* header stat row (used by portfolio page header) */ .stat-row{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.2rem} .stat-pill{text-align:left;min-width:7rem} .stat-pill .n{font-size:1.7rem;font-weight:800;color:var(--text-1);letter-spacing:-.02em;line-height:1} .stat-pill .l{margin-top:.3rem;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} /* ============================================================ SERVICE ROW (diensten.html pattern) ============================================================ */ .svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.2rem;align-items:center;padding:3.4rem 0;border-bottom:1px solid var(--line)} .svc-row:last-child{border-bottom:none} .svc-row.reverse .media{order:2} .svc-row.reverse .copy{order:1} .svc-row .media{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:24rem;box-shadow:var(--glass-shadow);border:1px solid var(--glass-border)} .svc-row .media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .svc-row .media:hover img{transform:scale(1.05)} .svc-row .copy .kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:.9rem} .svc-row .copy h2{font-size:clamp(1.7rem,2.76vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:var(--text-1);margin-bottom:1rem} .svc-row .copy p{color:var(--text-2);font-weight:300;line-height:1.75;font-size:.96rem} .svc-row .copy p+p{margin-top:.8rem} .svc-row .points{list-style:none;margin:1.4rem 0 1.7rem;display:grid;gap:.6rem} .svc-row .points li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text-2);font-weight:300;font-size:.9rem} .svc-row .points li::before{content:"→";color:var(--accent-strong);font-weight:700;flex:none} .svc-row .actions{display:flex;flex-wrap:wrap;gap:.8rem} @media (max-width:860px){ .svc-row,.svc-row.reverse{grid-template-columns:1fr} .svc-row .media{order:1 !important;min-height:16rem} .svc-row .copy{order:2 !important} } /* ============================================================ PRICING CARDS (packages - used on home + tarieven) ============================================================ */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch} .price{padding:2.2rem 2rem;border-radius:var(--r-lg);display:flex;flex-direction:column} .price.featured{transform:translateY(-14px);border-color:rgba(200,167,119,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 40px 80px -30px rgba(181,111,63,.4)} .price .tier{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-2)} .price .pop{align-self:flex-start;margin-bottom:1rem;padding:.32rem .8rem;border-radius:var(--r-pil);background:var(--warm);color:#fff; font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .price h3{font-size:1.4rem;font-weight:700;color:var(--text-1);margin:.5rem 0 1rem} .price .amt{font-size:3rem;font-weight:800;letter-spacing:-.03em;color:var(--text-1);line-height:1} .price .per{color:var(--text-3);font-size:.82rem;margin-top:.3rem} .price .rule{height:1px;background:var(--line);margin:1.6rem 0} .price ul{list-style:none;display:grid;gap:.7rem;margin-bottom:1.8rem} .price li{display:flex;gap:.7rem;align-items:flex-start;color:var(--text-2);font-weight:300;font-size:.9rem} .price li::before{content:"✓";color:var(--accent-strong);font-weight:700;flex:none} .price .btn{width:100%;justify-content:center;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{filter:brightness(1.05)} @media (max-width:900px){.price-grid{grid-template-columns:1fr}.price.featured{transform:none}} /* ============================================================ CTA STRIP (compact, used across pages) ============================================================ */ .cta-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:2.6rem clamp(1.6rem,4vw,3rem);border-radius:var(--r-lg); background:var(--cta-vlak);position:relative;overflow:hidden} .cta-strip::after{content:"";position:absolute;right:-8%;top:-45%;width:360px;height:360px;border-radius:50%; background:radial-gradient(circle,rgba(200,167,119,.4),transparent 65%);pointer-events:none} .cta-strip h2{font-size:clamp(1.5rem,2.39vw,2.1rem);color:var(--text-1);line-height:1.15;letter-spacing:-.02em;position:relative;z-index:1} .cta-strip h2 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;color:var(--sand)} .cta-strip p{color:var(--text-2);margin-top:.6rem;max-width:30rem;font-weight:300;font-size:.92rem;position:relative;z-index:1} .cta-strip .btn{position:relative;z-index:1;flex:none} /* ============================================================ FOOTER ============================================================ */ footer{padding:2.5rem 0;border-top:1px solid transparent; border-image:linear-gradient(90deg,transparent,var(--rand-glans) 32%,var(--rand-glans) 68%,transparent) 1} .foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .foot-logo{font-size:.9rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-1)} .foot-logo span{color:var(--accent-strong);font-weight:300} .foot-meta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;color:var(--text-3);font-size:.8rem} .foot-meta a{transition:color var(--t-snel)}.foot-meta a:hover{color:var(--accent-strong)} .foot-soc{display:flex;gap:.5rem} .foot-soc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700; color:var(--text-3);border:1px solid var(--line);transition:var(--t-snel)} .foot-soc a:hover{color:var(--accent-strong);border-color:var(--accent-strong)} /* ============================================================ FORM ============================================================ */ .form{padding:2rem;border-radius:var(--r-lg);display:grid;gap:1rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fg{display:grid;gap:.4rem} .fg label{font-size:.66rem;font-weight:700;letter-spacing:.14em;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:var(--r-sm); padding:.85rem 1rem;color:var(--text-1);font-family:inherit;font-size:.92rem;font-weight:300;outline:none;transition:var(--t-snel);width:100%} .fg input::placeholder,.fg textarea::placeholder{color:var(--text-3)} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--input-border-focus)} .fg select option{background:var(--dark-2);color:#fff} .fg textarea{resize:vertical;min-height:110px} .form .btn{justify-content:center;margin-top:.4rem} #formResult{margin-top:.4rem;font-weight:600;font-size:.9rem} @media (max-width:860px){.form-row{grid-template-columns:1fr}} /* Let the About portrait fill its card while keeping the experience badge visible. */ #about .about-img-side { position: relative; overflow: hidden; min-height: 390px; aspect-ratio: 4 / 5; background: transparent; } #about .about-img-side img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; } #about .about-img-side::before, #about .about-img-side::after { display: none; } #about .about-img-badge { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; } @media (max-width: 700px) { #about .about-img-side { min-height: 360px; aspect-ratio: 4 / 5; } } /* ============================================================ STICKY MOBILE CTA - floating "Boek een shoot", appears after the hero and follows scroll. Desktop already has the nav pill CTA. ============================================================ */ .sticky-cta{display:none} @media (max-width:900px){ .sticky-cta{ display:flex;justify-content:flex-end; position:fixed;left:0;right:0;bottom:0;z-index:900; padding:0 6% calc(1.3rem + env(safe-area-inset-bottom,0px)); opacity:0;transform:translateY(14px) scale(.92);pointer-events:none; transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease); } .sticky-cta.visible{opacity:1;transform:none;pointer-events:auto} .sticky-cta .btn{ width:58px;height:58px;padding:0;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; color:#fffdf9 !important; background:rgba(200,167,119,.32) !important; border:1px solid rgba(255,255,255,.45) !important; -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 16px 34px -14px rgba(0,0,0,.55) !important; } .sticky-cta .btn:hover{background:rgba(200,167,119,.48) !important;transform:none} .sticky-cta .btn::after{display:none} .sticky-cta .btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} } @media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}} /* ============================================================ DOWNLOADKAART - voor de voorbereidingsgids en het meetrapport ============================================================ */ .download{ display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap; padding:1.5rem 1.7rem;border-radius:var(--r-md);position:relative;overflow:hidden; border:1px solid rgba(200,167,119,.35); background:linear-gradient(150deg,rgba(200,167,119,.14),rgba(255,255,255,.03)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .download .dl-ico{ width:52px;height:52px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center; background:rgba(200,167,119,.2);border:1px solid rgba(200,167,119,.42);color:var(--accent-strong); } .download .dl-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .download .dl-tekst{flex:1 1 16rem;min-width:0} .download .dl-tekst h4{font-size:1.02rem;font-weight:700;color:var(--text-1);letter-spacing:-.01em} .download .dl-tekst p{margin-top:.3rem;font-size:.88rem;color:var(--text-2);font-weight:300;line-height:1.6} .download .dl-tekst .meta{margin-top:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text-3)} .download .btn{flex:none} @media (max-width:620px){ .download{padding:1.3rem 1.4rem;gap:1rem} .download .btn{width:100%;justify-content:center} } /* ============================================================ WISSELKNOP - klein glasknopje naar Ekkebus Studios Zit rechts naast de hoofdknop en pulseert zacht, zodat hij opvalt zonder met de call to action te concurreren. ============================================================ */ .nav-switch{ position:relative;flex:none;display:grid;place-items:center; width:42px;height:42px;border-radius:50%;margin-left:.35rem; color:var(--sand); background:linear-gradient(150deg,rgba(200,167,119,.24),rgba(200,167,119,.06)); border:1px solid rgba(200,167,119,.45); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),color .25s ease,background .3s ease; animation:switchGloed 3.6s ease-in-out infinite; } @keyframes switchGloed{ 0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 0 0 rgba(200,167,119,.45),0 6px 18px -8px rgba(200,167,119,.6)} 50% {box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 6px rgba(200,167,119,0), 0 9px 28px -8px rgba(200,167,119,.95)} } .nav-switch::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none; background:linear-gradient(140deg,rgba(255,255,255,.4) 0%,transparent 42%,transparent 72%,var(--rand-zacht) 100%); opacity:.85; } .nav-switch svg{position:relative;width:19px;height:19px;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nav-switch .vonk{fill:currentColor;stroke:none} .nav-switch:hover,.nav-switch:focus-visible{ transform:translateY(-2px) scale(1.07);color:var(--text-1);outline:none; background:linear-gradient(150deg,rgba(200,167,119,.45),rgba(201,129,74,.24)); border-color:rgba(200,167,119,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 32px -8px rgba(200,167,119,1); animation-play-state:paused; } .nav-switch .tip{ position:absolute;top:calc(100% + .7rem);right:0;white-space:nowrap; padding:.42rem .8rem;border-radius:9px; background:var(--dark-2);border:1px solid var(--line);color:var(--text-1); font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; opacity:0;transform:translateY(-5px);pointer-events:none; box-shadow:0 12px 28px -10px rgba(0,0,0,.75); transition:opacity var(--t-snel) var(--ease),transform var(--t-snel) var(--ease); } .nav-switch:hover .tip,.nav-switch:focus-visible .tip{opacity:1;transform:none} .nav-shell.open .nav-switch{opacity:0;pointer-events:none} /* Op mobiel verhuist de wisselknop naar het menu zelf, zie .nav-menu-switch */ @media (max-width:900px){ .nav-switch{display:none} } /* ---------- wisselknop binnen het mobiele menu ---------- */ .nav-menu-switch{display:none} @media (max-width:900px){ .nav-links .nav-menu-switch{display:block;width:100%;margin-top:1.5rem;text-align:center} .nav-links .nav-menu-switch a{ display:inline-flex;align-items:center;justify-content:center;gap:.7rem; width:auto;padding:.85rem 1.5rem;border-radius:var(--r-pil); font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--sand); background:linear-gradient(150deg,rgba(200,167,119,.2),rgba(200,167,119,.05)); border:1px solid rgba(200,167,119,.42); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%); animation:switchGloed 3.6s ease-in-out infinite; } .nav-links .nav-menu-switch a:hover{background:linear-gradient(150deg,rgba(200,167,119,.36),rgba(201,129,74,.2));color:var(--text-1)} .nav-menu-switch svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nav-menu-switch .vonk{fill:currentColor;stroke:none} } @media (prefers-reduced-motion:reduce){.nav-links .nav-menu-switch a{animation:none}} @media (prefers-reduced-motion:reduce){ .nav-switch{animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 6px 18px -8px rgba(200,167,119,.6)} .nav-switch:hover{transform:none} } /* ============================================================ COVERFLOW - uitgelicht werk in 3D Kaarten staan gewaaierd in perspectief. De actieve kaart staat recht en licht op, de rest kantelt weg. Bij muisbeweging kantelt het hele rek subtiel mee. ============================================================ */ .cf{position:relative;margin-top:3.5rem} .cf-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem; flex-wrap:wrap;margin-bottom:2rem} .cf-kop .tel{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--text-3);font-variant-numeric:tabular-nums} .cf-kop .tel b{color:var(--accent-strong)} .cf-stage{ /* breekt uit de contentbreedte en loopt over de volle pagina */ position:relative;width:100vw;margin-left:calc(50% - 50vw); height:clamp(440px,52vw,680px); perspective:2100px;perspective-origin:50% 50%; overflow:hidden; -webkit-user-select:none;user-select:none; } /* gloed achter de actieve kaart */ .cf-gloed{position:absolute;left:50%;top:50%;width:min(42%,640px);height:80%; transform:translate(-50%,-50%);pointer-events:none;z-index:0; background: radial-gradient(closest-side at 62% 42%,rgba(200,167,119,.4),rgba(181,111,63,.1) 55%,transparent 78%), radial-gradient(closest-side at 32% 62%,rgba(47,98,136,.42),transparent 72%); filter:blur(28px);opacity:.9; animation:cfPuls 5.5s ease-in-out infinite} @keyframes cfPuls{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}} /* fijne rasterlijnen voor de futuristische toets */ .cf-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.45; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:26px 26px; mask:radial-gradient(46% 62% at 50% 50%,#000,transparent 80%)} .cf-rek{position:absolute;inset:0;z-index:2;transform-style:preserve-3d; transition:transform var(--t-traag) var(--ease)} .cf-kaart{ position:absolute;left:50%;top:50%; width:clamp(230px,25vw,400px);aspect-ratio:3/4; margin-left:calc(clamp(230px,25vw,400px) / -2); margin-top:calc(clamp(230px,25vw,400px) * 4 / 3 / -2); border-radius:var(--r-md);overflow:hidden;cursor:pointer; transform-style:preserve-3d;will-change:transform,opacity; transition:transform var(--t-traag) var(--ease),opacity var(--t-traag) var(--ease),box-shadow .6s var(--ease); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px -30px rgba(0,0,0,.9); background:var(--dark-2); } .cf-kaart img{width:100%;height:100%;object-fit:cover;display:block; transition:filter var(--t-traag) var(--ease),transform 1.2s var(--ease)} .cf-kaart::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(9,20,33,.15) 0%,transparent 32%,rgba(9,20,33,.9) 100%); opacity:.9;transition:opacity var(--t-traag) var(--ease)} /* de actieve kaart */ .cf-kaart.actief{ z-index:6;cursor:default; border-color:rgba(200,167,119,.5); box-shadow:0 0 0 1px rgba(200,167,119,.28), 0 26px 60px -18px rgba(0,0,0,.9), 0 0 70px -6px rgba(200,167,119,.5); } .cf-kaart.actief img{filter:none;transform:scale(1.02)} .cf-kaart:not(.actief) img{filter:brightness(.5) saturate(.75)} .cf-kaart:not(.actief):hover img{filter:brightness(.72) saturate(.9)} .cf-kaart:not(.actief):hover{border-color:rgba(200,167,119,.4)} /* tekst op de actieve kaart */ .cf-tekst{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.6rem 1.5rem 1.8rem; text-align:center;opacity:0;transform:translateY(14px); transition:opacity var(--t-snel) var(--ease),transform var(--t-snel) var(--ease);pointer-events:none} .cf-kaart.actief .cf-tekst{transition:opacity var(--t-traag) var(--ease) .25s,transform var(--t-traag) var(--ease) .25s} .cf-kaart.actief .cf-tekst{opacity:1;transform:none} .cf-tekst h3{font-size:clamp(1.1rem,1.47vw,1.6rem);font-weight:800;line-height:1.12; letter-spacing:-.02em;color:#fffdf9;text-shadow:0 2px 18px rgba(0,0,0,.9)} .cf-tekst .streep{width:44px;height:1px;margin:.7rem auto .6rem; background:linear-gradient(90deg,transparent,var(--sand),transparent)} .cf-tekst p{font-size:.82rem;color:rgba(238,231,220,.82);letter-spacing:.02em; text-shadow:0 2px 12px rgba(0,0,0,.9)} .cf-chip{position:absolute;top:.9rem;right:.9rem;z-index:3; padding:.32rem .75rem;border-radius:var(--r-pil); font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#fffdf9;background:rgba(9,20,33,.55);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); opacity:0;transition:opacity .45s var(--ease) .1s} .cf-kaart.actief .cf-chip{opacity:1} /* pijlen */ .cf-pijl{position:absolute;top:50%;z-index:8;transform:translateY(-50%); width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer; color:var(--pijl-tekst);background:var(--pijl-vlak);border:1px solid var(--pijl-rand); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); transition:var(--t-mid) var(--ease)} .cf-pijl:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fffdf9; box-shadow:0 0 28px -4px rgba(200,167,119,.8)} .cf-pijl.vorige{left:clamp(1rem,5vw,4rem)} .cf-pijl.volgende{right:clamp(1rem,5vw,4rem)} .cf-pijl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* stippen */ .cf-stippen{display:flex;justify-content:center;gap:.45rem;margin-top:1.4rem} .cf-stip{width:26px;height:3px;border-radius:3px;border:none;padding:0;cursor:pointer; background:rgba(238,231,220,.22);transition:var(--t-mid) var(--ease)} .cf-stip:hover{background:rgba(238,231,220,.45)} .cf-stip.actief{width:44px;background:linear-gradient(90deg,var(--sand),var(--warm-2)); box-shadow:0 0 14px -2px rgba(200,167,119,.9)} @media (max-width:640px){ .cf-stage{height:clamp(370px,96vw,480px)} .cf-pijl{width:40px;height:40px} .cf-pijl.vorige{left:.5rem} .cf-pijl.volgende{right:.5rem} } @media (prefers-reduced-motion:reduce){ .cf-gloed{animation:none} .cf-kaart,.cf-rek,.cf-tekst{transition:none} } /* ============================================================ EIGEN CURSOR - koperen ring die reageert op wat eronder ligt Alleen op apparaten met een echte muis. De ring loopt zacht achter de stip aan, dat geeft het vloeiende gevoel. ============================================================ */ .cur-stip,.cur-ring{display:none} @media (hover:hover) and (pointer:fine){ .cur-aan,.cur-aan *{cursor:none !important} .cur-stip{ display:block;position:fixed;top:0;left:0;z-index:99999;pointer-events:none; width:6px;height:6px;border-radius:50%;background:var(--sand); transform:translate(-50%,-50%); box-shadow:0 0 12px 1px rgba(200,167,119,.9); transition:opacity var(--t-snel) linear; } .cur-ring{ display:grid;place-items:center; position:fixed;top:0;left:0;z-index:99998;pointer-events:none; width:38px;height:38px;border-radius:50%; border:1px solid rgba(200,167,119,.6); transform:translate(-50%,-50%); transition:width var(--t-mid) var(--ease),height var(--t-mid) var(--ease), background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease), opacity var(--t-snel) linear; } .cur-ring span{ font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);opacity:0;transform:scale(.7);white-space:nowrap; transition:opacity var(--t-snel) var(--ease),transform var(--t-mid) var(--ease); } /* boven beeld: de ring groeit en toont een label */ .cur-ring.op-beeld{width:82px;height:82px;background:rgba(200,167,119,.9); border-color:transparent;backdrop-filter:none} .cur-ring.op-beeld span{opacity:1;transform:none} .cur-stip.op-beeld{opacity:0} /* boven een knop of link: kleine groei, geen label */ .cur-ring.op-actie{width:56px;height:56px;background:rgba(200,167,119,.18); border-color:rgba(200,167,119,.9)} /* tijdens klikken even indrukken */ .cur-ring.klik{width:28px;height:28px} .cur-stip.uit,.cur-ring.uit{opacity:0} } @media (prefers-reduced-motion:reduce){ .cur-ring{transition:none} } /* ============================================================ TIJDELIJK UIT: Ekkebus Studios Studios staat nog niet online. Dit blok verbergt beide verwijzingen: het ronde knopje in de balk en de pil in het mobiele menu. De HTML blijft ongewijzigd staan. WEER AANZETTEN: verwijder dit hele blok, meer is niet nodig. ============================================================ */ .nav-switch, .nav-menu-switch{ display:none !important; } /* ============================================================ SCROLL RAIL - fixed left-side section navigator (desktop only) Small ticks per page section + a back-to-top button on top. ============================================================ */ [data-rail]{scroll-margin-top:6rem} .scroll-rail{display:none} /* Het wiel hoort in de linkermarge te blijven staan, nooit over de tekst. Daarom staat het label verticaal en links van de streepjes, en komt het pas tevoorschijn als er genoeg marge is. */ @media (min-width:1100px){ .scroll-rail{ display:flex;flex-direction:column;align-items:center;gap:1.1rem; position:fixed;left:1.2rem;top:50%;transform:translateY(-50%);z-index:850; } .rail-top{ width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center; background:rgba(200,167,119,.16);border:1px solid rgba(200,167,119,.5);color:var(--accent-strong); cursor:pointer;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),background .2s ease,color .2s ease; opacity:0;pointer-events:none;transform:translateY(-8px); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .rail-top.visible{opacity:1;pointer-events:auto;transform:none} .rail-top:hover{background:var(--accent-strong);color:var(--text-1)} .rail-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .rail-ticks{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start} .rail-tick{ position:relative;width:15px;height:2.5px;border-radius:2px;background:rgba(181,111,63,.4); cursor:pointer;transition:width var(--t-mid) var(--ease),background var(--t-mid) var(--ease); border:none;padding:0;display:block; } .rail-tick:hover{background:var(--accent)} .rail-tick.active{width:28px;background:var(--accent-strong)} .rail-tick .tip{display:none} } @media (min-width:1280px){ .scroll-rail{left:2.2rem} .rail-tick .tip{ display:block;position:absolute;right:calc(100% + .6rem);top:50%; transform:translateY(-50%) translateX(5px); padding:.55rem .3rem;border-radius:7px; background:var(--text-1);color:var(--page-base); border:1px solid var(--rail-tip-rand,transparent); opacity:0;pointer-events:none; box-shadow:0 10px 24px -12px rgba(0,0,0,.55); transition:opacity var(--t-snel) var(--ease),transform var(--t-snel) var(--ease); } .rail-tick .tip b{ display:block;writing-mode:vertical-rl;transform:rotate(180deg); font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; } .rail-tick:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)} .scroll-rail.is-scrolling .rail-tick.active .tip{opacity:1;transform:translateY(-50%) translateX(0)} } @media (prefers-reduced-motion:reduce){.rail-top,.rail-tick,.rail-tick .tip{transition:none}} /* ============================================================ HET LICHT VAN DE DAG De site kleurt mee met het tijdstip van de bezoeker. Een fotograaf verkoopt licht, dus verandert de pagina met het licht buiten: koel bij dageraad, helder overdag, warm bij schemer en diep in de nacht. Alleen de ondergrond schuift op, de tekst houdt overal hetzelfde contrast. ============================================================ */ html,body{transition:background-color .5s var(--ease),color .5s var(--ease)} /* dageraad, ongeveer vijf tot acht uur: koel en nevelig */ :root[data-theme="dark"][data-licht="dageraad"]{ --page-base:#0e1c33; --band-licht:#1a3357; --band-diep:#0d1a2f; --sand:#cbb08d; --warm-2:#c98a6a; --page-loop:linear-gradient(180deg, #16274a 0%,#101f38 14%,#1b3a5e 30%,#0e1c33 46%, #1d3f63 62%,#0d1a2f 78%,#0a1526 100%); --page-bg: radial-gradient(1200px 800px at 12% -8%,rgba(94,110,175,.4) 0%,transparent 55%), radial-gradient(1000px 700px at 100% 8%,rgba(196,132,120,.24) 0%,transparent 50%), radial-gradient(1100px 900px at 85% 100%,rgba(38,74,110,.34) 0%,transparent 55%); } /* dag, ongeveer acht tot zeventien uur: helder en rustig, de basis */ :root[data-theme="dark"][data-licht="dag"]{ --page-base:#0d2138; --band-licht:#15375a; --band-diep:#0c2036; } /* schemer, ongeveer zeventien tot eenentwintig uur: koper en goud */ :root[data-theme="dark"][data-licht="schemer"]{ --page-base:#101a28; --band-licht:#1d3348; --band-diep:#0d1622; --warm-2:#d98c4d; --page-loop:linear-gradient(180deg, #16283a 0%,#111c2a 14%,#1f3a4e 30%,#0f1926 46%, #24404f 62%,#0d1622 78%,#080f18 100%); --page-bg: radial-gradient(1200px 800px at 12% -8%,rgba(58,98,132,.34) 0%,transparent 55%), radial-gradient(1100px 760px at 100% 6%,rgba(214,132,66,.42) 0%,transparent 52%), radial-gradient(1100px 900px at 82% 100%,rgba(160,84,44,.26) 0%,transparent 55%); } /* nacht, ongeveer eenentwintig tot vijf uur: diep en stil */ :root[data-theme="dark"][data-licht="nacht"]{ --page-base:#060e18; --band-licht:#0d2136; --band-diep:#060e18; --page-loop:linear-gradient(180deg, #0a1727 0%,#070f19 14%,#0e2338 30%,#060e18 46%, #10283e 62%,#050c15 78%,#03080e 100%); --page-bg: radial-gradient(1200px 800px at 12% -8%,rgba(30,66,102,.3) 0%,transparent 55%), radial-gradient(1000px 700px at 100% 8%,rgba(140,86,48,.18) 0%,transparent 50%), radial-gradient(1100px 900px at 85% 100%,rgba(18,52,80,.28) 0%,transparent 55%); } /* dezelfde vier standen voor het lichte thema, veel subtieler: papier blijft papier, alleen de temperatuur schuift op */ :root[data-theme="light"][data-licht="dageraad"]{ --page-base:#eef0ee; --band-licht:#f5f6f4; --band-diep:#e6e9e8; --page-loop:linear-gradient(180deg, #f1f3f1 0%,#ecefee 16%,#f6f7f5 32%,#eaedec 48%, #f3f5f3 64%,#e7eae9 80%,#eef0ee 100%); } :root[data-theme="light"][data-licht="schemer"]{ --page-base:#f4efe5; --band-licht:#faf6ee; --band-diep:#ece5d8; --page-loop:linear-gradient(180deg, #f7f2e9 0%,#f2ece1 16%,#faf6ee 32%,#f0e9dd 48%, #f6f1e7 64%,#ebe4d7 80%,#f4efe5 100%); } :root[data-theme="light"][data-licht="nacht"]{ --page-base:#eceae6; --band-licht:#f3f1ed; --band-diep:#e2e0db; --page-loop:linear-gradient(180deg, #efedea 0%,#eae8e4 16%,#f4f2ee 32%,#e8e6e1 48%, #f0eeea 64%,#e4e2dd 80%,#eceae6 100%); } /* het regeltje in de voet dat vertelt wat er gebeurt */ .licht-melding{display:inline-flex;align-items:center;gap:.5rem} .licht-melding i{width:7px;height:7px;border-radius:50%;background:var(--accent-strong); box-shadow:0 0 10px var(--accent-strong);font-style:normal} @media (prefers-reduced-motion:reduce){ html,body,.strook,.strook-diep{transition:none} } /* ---------- GIDSSTROOK: de handleiding als echt boekje ---------- */ .gids{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2rem,4vw,3.4rem); border-radius:var(--r-lg);position:relative;overflow:hidden} .gids::after{content:"";position:absolute;inset:auto -10% -60% -25%;height:130%;z-index:-1; pointer-events:none;filter:blur(60px);opacity:.7; background:radial-gradient(closest-side,rgba(47,98,136,.6),transparent 72%)} .gids-omslag{position:relative;justify-self:center;width:min(100%,300px); transform:rotate(-3deg);transition:transform var(--t-traag) var(--ease)} .gids:hover .gids-omslag{transform:rotate(-1.5deg) translateY(-6px)} .gids-omslag img{width:100%;height:auto;display:block;border-radius:6px; box-shadow:0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(160,199,229,.16)} /* de zijkant van het boekje, zodat het een pak papier wordt in plaats van een plaatje */ .gids-omslag::before{content:"";position:absolute;left:-7px;top:2%;bottom:2%;width:8px; border-radius:3px 0 0 3px; background:linear-gradient(90deg,rgba(255,253,249,.5),rgba(255,253,249,.14) 45%,rgba(9,20,33,.5))} .gids-tekst .lead{margin-top:1rem} .gids-lijst{list-style:none;margin-top:1.6rem;display:grid;gap:.7rem} .gids-lijst li{position:relative;padding-left:1.5rem;font-size:.92rem;font-weight:300; line-height:1.6;color:var(--text-2)} .gids-lijst li::before{content:"";position:absolute;left:.15rem;top:.55rem;width:7px;height:7px; border-radius:50%;background:var(--warm-2);box-shadow:0 0 12px rgba(201,129,74,.7)} .gids-knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem} .gids-noot{margin-top:1rem;font-size:.8rem;font-weight:300;color:var(--text-3)} @media (max-width:820px){ .gids{grid-template-columns:1fr;gap:2.2rem} .gids-omslag{width:min(72%,240px);justify-self:start} } /* ---------- BLADERBOEK: de gids openslaan en doorbladeren ---------- */ .gids-omslag{cursor:pointer} .boek{position:fixed;inset:0;z-index:2000;display:grid;grid-template-rows:1fr auto; justify-items:center;align-items:center;gap:1.2rem;padding:clamp(1rem,3vw,2.4rem); background:rgba(5,12,20,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); opacity:0;transition:opacity var(--t-mid) var(--ease)} .boek.open{opacity:1} .boek[hidden]{display:none} .boek-vlak{display:flex;align-items:center;gap:clamp(.4rem,2vw,1.4rem);max-width:100%;min-height:0} .boek-blad{position:relative;height:min(78vh,940px);aspect-ratio:210/297;max-width:84vw; perspective:1900px;flex:none;border-radius:5px; box-shadow:0 50px 110px -35px rgba(0,0,0,.9)} .boek-blad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:5px;background:#0b1a2b} .boek-draai{position:absolute;inset:0;transform-origin:left center; backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform; border-radius:5px;overflow:hidden} .boek-draai.bezig{transition:transform .62s cubic-bezier(.42,0,.24,1)} /* schaduw langs de rug, zodat het een blad lijkt en geen plaatje */ .boek-draai::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:5px; background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.06) 9%,transparent 22%)} .boek-pijl{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center; cursor:pointer;font-size:1.3rem;color:var(--text-1); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)} .boek-pijl:hover{background:var(--accent-strong);color:#fffdf9;transform:scale(1.06)} .boek-pijl[disabled]{opacity:.3;cursor:default;transform:none;background:rgba(255,255,255,.05)} .boek-voet{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:center} .boek-teller{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)} .boek-teller b{color:var(--text-1)} .boek-sluit{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem); width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer; font-size:1.4rem;line-height:1;color:var(--text-1); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)} .boek-sluit:hover{background:var(--accent-strong);color:#fffdf9} @media (max-width:700px){ .boek-blad{height:min(64vh,640px);max-width:90vw} .boek-pijl{width:44px;height:44px} } @media (prefers-reduced-motion:reduce){.boek-draai.bezig{transition:none}} /* ---------- INTRO: het huis dat zichzelf bouwt ---------- Een draadmodel van een woning in echte 3D, opgebouwd uit vlakken met alleen randen. De muren komen omhoog, het dak zakt erop en het geheel blijft draaien tot de pagina klaar is. Alleen bij het eerste bezoek van een sessie, nooit bij 'beperk beweging', en zonder JavaScript verschijnt hij helemaal niet. */ .intro{display:none} html[data-intro="aan"] body{overflow:hidden} html[data-intro="aan"] .intro{ display:grid;position:fixed;inset:0;z-index:5000;pointer-events:none; place-items:center;align-content:center;gap:2.6rem; background:var(--page-base)} html[data-intro="aan"] .intro::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 44% at 50% 42%,rgba(47,98,136,.28),transparent 70%)} /* ---- het draadmodel ---- Elk vlak bestaat uit twee lagen: de buitenste zet hem op zijn plek in de ruimte, de binnenste doet de beweging. Zo bijten de transformaties elkaar niet. Maten: 96 breed, 74 diep, 60 hoog, dak 56. */ .huis3d{position:relative;width:180px;height:170px;perspective:640px;z-index:1; transition:transform .8s cubic-bezier(.6,0,.9,.4),opacity .6s var(--ease)} .huis3d-draai{position:absolute;inset:0;transform-style:preserve-3d; animation:huisDraai 12s linear infinite} @keyframes huisDraai{ from{transform:rotateX(-15deg) rotateY(0deg)} to{transform:rotateX(-15deg) rotateY(360deg)}} .huis3d .vlak{position:absolute;transform-style:preserve-3d} .huis3d .vlak > i{display:block;width:100%;height:100%; border:1px solid var(--accent-strong); background:linear-gradient(160deg,rgba(201,129,74,.10),transparent 72%); box-shadow:0 0 14px rgba(201,129,74,.16)} /* vier muren, die als eerste omhoog komen */ .huis3d .muur{width:96px;height:60px;left:42px;top:66px} .huis3d .muur > i{transform-origin:50% 100%;transform:scaleY(0); animation:muurOmhoog .8s cubic-bezier(.22,1,.36,1) forwards} .huis3d .m1{transform:translateZ(37px)} .huis3d .m2{transform:rotateY(180deg) translateZ(37px)} .huis3d .m3{width:74px;left:53px;transform:rotateY(-90deg) translateZ(48px)} .huis3d .m4{width:74px;left:53px;transform:rotateY(90deg) translateZ(48px)} .huis3d .m1 > i{animation-delay:.2s} .huis3d .m2 > i{animation-delay:.32s} .huis3d .m3 > i{animation-delay:.44s} .huis3d .m4 > i{animation-delay:.56s} @keyframes muurOmhoog{to{transform:scaleY(1)}} /* twee dakvlakken, nok over de breedte, die erop zakken */ .huis3d .dak{width:96px;height:56px;left:42px;top:10px;transform-origin:50% 100%} .huis3d .d1{transform:translateZ(37px) rotateX(41deg)} .huis3d .d2{transform:rotateY(180deg) translateZ(37px) rotateX(41deg)} .huis3d .dak > i{opacity:0;transform:translateY(-26px); animation:dakZakt .85s cubic-bezier(.22,1,.36,1) 1.1s forwards} .huis3d .d2 > i{animation-delay:1.2s} @keyframes dakZakt{to{opacity:1;transform:none}} /* de topgevels sluiten het huis */ .huis3d .gevel{width:74px;height:42px;left:53px;top:24px} .huis3d .g1{transform:rotateY(-90deg) translateZ(48px)} .huis3d .g2{transform:rotateY(90deg) translateZ(48px)} .huis3d .gevel > i{border:none;clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(180deg,rgba(201,129,74,.3),rgba(201,129,74,.06)); box-shadow:none;opacity:0;animation:gevelAan .7s var(--ease) 1.6s forwards} @keyframes gevelAan{to{opacity:1}} .intro-kern{display:grid;place-items:center;gap:1.3rem;position:relative;z-index:1; transition:opacity .5s var(--ease),transform .7s var(--ease)} .intro-merk{font-size:clamp(1.05rem,2.21vw,1.55rem);font-weight:800;letter-spacing:.3em; text-transform:uppercase;color:var(--text-1); opacity:0;transform:translateY(10px);animation:introMerk 1s var(--ease) 1.7s forwards} .intro-merk span{color:var(--accent-strong)} .intro-lijn{width:min(230px,38vw);height:1px;background:var(--line);overflow:hidden;border-radius:1px} .intro-lijn i{display:block;height:100%;width:0;border-radius:1px; background:linear-gradient(90deg,var(--warm),var(--sand)); animation:introLijn 1.8s var(--ease) 1.9s forwards} @keyframes introMerk{to{opacity:1;transform:none}} @keyframes introLijn{to{width:76%}} /* afronding: streep vol, huis zoomt naar je toe, alles lost op */ .intro.klaar .intro-lijn i{width:100% !important;transition:width .3s var(--ease);animation:none} .intro.klaar .huis3d-draai{animation-duration:2.2s} .intro.klaar .huis3d{transform:scale(1.55);opacity:0} .intro.klaar .intro-kern{opacity:0;transform:translateY(-6px)} .intro.klaar{opacity:0;transition:opacity .55s var(--ease) .35s} /* ---------- ZOEKEN: schuift open vanuit de menubalk ---------- Een klein vergrootglas naast de knoppen. Klik je erop, dan schuiven de links opzij en neemt het veld hun plek in. */ .nav-zoek-knop{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:33px;height:33px;border-radius:50%;cursor:pointer; background:var(--vlak-mid);border:1px solid var(--rand-zacht);color:var(--text-2); transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease)} .nav-zoek-knop:hover{border-color:var(--accent);color:var(--text-1)} .nav .nav-zoek-mob,.nav .nav-thema-mob{display:none} /* alleen op smalle schermen, naast het hamburgermenu */ /* koperen glasuitvoering, voor de knoppen die op mobiel opvallen mogen */ .koperglas{ background:linear-gradient(150deg,rgba(214,144,86,.34),rgba(181,111,63,.18)) !important; border:1px solid rgba(214,152,101,.55) !important; color:var(--sand) !important; -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,225,196,.35),0 10px 26px -14px rgba(181,111,63,.75) !important} .koperglas:hover{background:linear-gradient(150deg,rgba(214,144,86,.5),rgba(181,111,63,.3)) !important; color:#fffdf9 !important} .nav-zoek-knop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .nav-zoek-li{display:flex;align-items:center} .nav-zoekveld{ position:absolute;left:clamp(1.2rem,4vw,2.2rem);right:clamp(1.2rem,4vw,2.2rem);top:50%; transform:translateY(-50%);z-index:5;display:flex;align-items:center;gap:.7rem; opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--ease)} .nav-shell.zoekt .nav-zoekveld{opacity:1;pointer-events:auto} .nav-shell.zoekt .nav-links{opacity:0;pointer-events:none} .nav-shell.zoekt .nav-logo{opacity:0;pointer-events:none} .nav-links,.nav-logo{transition:opacity var(--t-mid) var(--ease)} .nav-zoekveld svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent-strong);stroke-width:2;stroke-linecap:round} .nav-zoekveld input{ flex:1;min-width:0;background:none;border:none;outline:none; font-family:inherit;font-size:.95rem;font-weight:300;color:var(--text-1)} .nav-zoekveld input::placeholder{color:var(--text-3)} .nav-zoek-sluit{ flex:none;width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center; background:var(--vlak-mid);border:1px solid var(--rand-zacht);color:var(--text-2);font-size:1rem;line-height:1} .nav-zoek-sluit:hover{background:var(--accent-strong);color:#fff} .nav-zoek-uitslag{ position:absolute;left:0;right:0;top:calc(100% + .6rem);z-index:1000; max-height:min(60vh,26rem);overflow-y:auto;border-radius:var(--r-lg);padding:.5rem; background:var(--nav-bg);border:1px solid var(--nav-border); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:var(--glass-shadow); opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)} .nav-zoek-uitslag.aan{opacity:1;transform:none;pointer-events:auto} .nav-zoek-uitslag a{display:block;padding:.7rem .9rem;border-radius:var(--r-sm);text-decoration:none} .nav-zoek-uitslag a:hover,.nav-zoek-uitslag a:focus-visible{background:var(--vlak-zacht);outline:none} .nav-zoek-uitslag .zt{font-size:.9rem;font-weight:600;color:var(--text-1)} .nav-zoek-uitslag .zp{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-strong);margin-left:.5rem} .nav-zoek-uitslag .zx{display:block;margin-top:.25rem;font-size:.8rem;font-weight:300;color:var(--text-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-zoek-uitslag .leeg{padding:1rem .9rem;font-size:.85rem;font-weight:300;color:var(--text-3)} @media (max-width:900px){ .nav-zoekveld{left:1rem;right:1rem} .nav-zoekveld input{font-size:1rem} } /* ---------- KNOP: licht of donker ---------- Staat naast Boek een shoot. De bol schuift, de zon en de maan wisselen mee. Op mobiel schuift hij mee in het menu. */ .nav-thema{ display:inline-flex;align-items:center;gap:.45rem;height:33px;padding:0 .95rem;flex:none; border-radius:var(--r-pil);cursor:pointer; background:var(--vlak-mid);border:1px solid var(--rand-zacht);color:var(--text-2); font-family:inherit;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease)} .nav-thema:hover{border-color:var(--accent);color:var(--text-1)} .nav-thema svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* in het donkere thema bied je licht aan, en andersom */ .nav-thema .zon{display:none} [data-theme="light"] .nav-thema .zon{display:none} [data-theme="light"] .nav-thema .maan{display:block} :root:not([data-theme="light"]) .nav-thema .maan{display:none} :root:not([data-theme="light"]) .nav-thema .zon{display:block} .nav-thema-li{display:flex;align-items:center} /* ---------- 360 VIEWER: rondkijken in een woning ---------- Slepen om te kijken, scrollen of knijpen om te zoomen. Er wordt niets opgeslagen en er kan niets gedownload worden. */ .pano{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem} .pano-vlak{position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:16/9;background:var(--band-diep); border:1px solid var(--line);box-shadow:var(--glass-shadow)} .pano-vlak canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:none} .pano-vlak canvas.sleept{cursor:grabbing} .pano-vlak canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-4px} .pano-vlak canvas.gl-mislukt{display:none} .pano-laden{position:absolute;inset:0;display:grid;place-items:center;gap:.9rem;align-content:center; background:var(--band-diep);color:var(--text-3); font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; transition:opacity var(--t-mid) var(--ease)} .pano-laden[hidden]{display:none} .pano-ring{width:34px;height:34px;border-radius:50%; border:2px solid var(--line);border-top-color:var(--accent-strong); animation:panoDraai .9s linear infinite} @keyframes panoDraai{to{transform:rotate(360deg)}} .pano-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:3; display:flex;align-items:center;gap:.5rem;pointer-events:none; padding:.5rem 1rem;border-radius:var(--r-pil);white-space:nowrap; background:rgba(9,20,33,.62);border:1px solid rgba(255,255,255,.18);color:#fffdf9; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; opacity:1;transition:opacity var(--t-traag) var(--ease)} .pano-hint.weg{opacity:0} .pano-knoppen{position:absolute;right:1rem;top:1rem;z-index:3;display:grid;gap:.5rem} .pano-knop{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer; background:rgba(9,20,33,.55);border:1px solid rgba(255,255,255,.22);color:#fffdf9; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)} .pano-knop:hover{background:var(--accent-strong);transform:scale(1.06)} .pano-knop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .pano-kiezer{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem} .pano-keuze{position:relative;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;padding:0; border:1px solid var(--line);background:none;aspect-ratio:16/10; transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)} .pano-keuze img{width:100%;height:100%;object-fit:cover;display:block; transition:transform var(--t-traag) var(--ease),filter var(--t-mid) var(--ease);filter:saturate(.85) brightness(.8)} .pano-keuze:hover{transform:translateY(-3px);border-color:var(--accent)} .pano-keuze:hover img{transform:scale(1.05)} .pano-keuze.actief{border-color:var(--accent-strong)} .pano-keuze.actief img{filter:none} .pano-keuze span{position:absolute;left:.6rem;bottom:.5rem;right:.6rem;z-index:2;text-align:left; font-size:.68rem;font-weight:700;color:#fffdf9;text-shadow:0 1px 8px rgba(0,0,0,.85)} .pano-keuze::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(9,20,33,.8))} .pano-melding{font-size:.85rem;font-weight:300;color:var(--text-3)} @media (max-width:640px){ .pano-vlak{aspect-ratio:4/3} .pano-knoppen{right:.6rem;top:.6rem} .pano-hint{font-size:.58rem;padding:.42rem .8rem} } /* ============================================================ MENUBALK: koper op glas De balk krijgt een dunne koperen rand die bij het zweven langzaam om de pil glijdt. Links lichten op in een zacht koperen vlak, de knoppen krijgen dezelfde glasrand. ============================================================ */ :root{ --koper-rand:linear-gradient(115deg,rgba(214,152,101,.14) 6%,rgba(214,152,101,.62) 26%, rgba(255,236,214,.9) 34%,rgba(214,152,101,.4) 46%,rgba(255,255,255,.14) 62%,rgba(214,152,101,.5) 88%); --koper-vlak:rgba(214,152,101,.13); --koper-lijn:rgba(214,152,101,.3); --koper-gloed:rgba(181,111,63,.45); --nav-knop-vlak:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03)); --nav-knop-rand:rgba(214,152,101,.3); --nav-knop-glans:rgba(255,255,255,.22); } [data-theme="light"]{ --koper-rand:linear-gradient(115deg,rgba(167,95,49,.1) 6%,rgba(167,95,49,.5) 26%, rgba(199,133,80,.75) 34%,rgba(167,95,49,.28) 46%,rgba(255,255,255,.6) 62%,rgba(167,95,49,.4) 88%); --koper-vlak:rgba(167,95,49,.09); --koper-lijn:rgba(167,95,49,.24); --koper-gloed:rgba(167,95,49,.26); --nav-knop-vlak:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.55)); --nav-knop-rand:rgba(167,95,49,.22); --nav-knop-glans:rgba(255,255,255,.85); } /* de koperen rand: een gradient die als rand wordt getekend, met het glas eroverheen in het midden. Geen maskers, dus overal hetzelfde. */ .nav-shell .nav{border:0} .nav-shell .nav::before{ border:1px solid transparent; background:var(--nav-bg) padding-box,var(--koper-rand) border-box; background-size:auto,240% 100%; background-position:0 0,0 0; transition:background-position 1.6s var(--ease)} .nav-shell .nav:hover::before{background-position:0 0,100% 0} .nav-shell.shrink .nav{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 18px 42px -20px rgba(0,0,0,.42)} /* Ekkebus VISUALS: het tweede woord loopt van goud naar koper */ .nav-shell .nav .nav-logo span{ background:linear-gradient(100deg,var(--accent),var(--accent-strong)); -webkit-background-clip:text;background-clip:text;color:transparent} @media (min-width:901px){ /* links krijgen een zacht koperen vlak in plaats van alleen kleur */ .nav-shell .nav .nav-links a:not(.nav-cta){ background-color:transparent;box-shadow:inset 0 0 0 1px transparent; transition:color var(--t-snel),background-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)} .nav-shell .nav .nav-links a:not(.nav-cta):hover, .nav-shell .nav .nav-links a.active:not(.nav-cta){ background-color:var(--koper-vlak);color:var(--text-1); box-shadow:inset 0 1px 0 var(--nav-knop-glans),inset 0 0 0 1px var(--koper-lijn)} /* de streep eronder wordt een kort glansje, alleen op de pagina waar je bent */ .nav-shell .nav .nav-links a::after{ left:50%;right:auto;width:14px;margin-left:-7px;bottom:.34rem;height:1.5px; transform-origin:center; background:linear-gradient(90deg,transparent,var(--accent-strong),transparent)} .nav-shell .nav .nav-links a:hover::after{transform:scaleX(0)} .nav-shell .nav .nav-links a.active::after{transform:scaleX(1)} } /* ronde knoppen naast het menu: zelfde glas, zelfde koperen randje */ .nav-shell .nav .nav-zoek-knop:not(.koperglas), .nav-shell .nav .nav-thema, .nav-shell .nav .nav-toggle{ background:var(--nav-knop-vlak);border:1px solid var(--nav-knop-rand); box-shadow:inset 0 1px 0 var(--nav-knop-glans); -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)} .nav-shell .nav .nav-zoek-knop:not(.koperglas):hover, .nav-shell .nav .nav-thema:hover, .nav-shell .nav .nav-toggle:hover{ background:var(--glasknop-hover);border-color:var(--accent);color:var(--text-1)} /* Boeken: dieper koperen schijnsel onder de pil */ .nav-shell .nav .nav-links a.nav-cta{ box-shadow:inset 0 1px 0 rgba(255,232,208,.5),0 10px 24px -12px var(--koper-gloed)} .nav-shell .nav .nav-links a.nav-cta:hover{ box-shadow:inset 0 1px 0 rgba(255,232,208,.7),0 16px 32px -12px var(--koper-gloed)} @media (prefers-reduced-motion:reduce){ .nav-shell .nav::before{transition:none} .nav-shell .nav:hover::before{background-position:0 0,0 0} }