/* ═══════════════════════════════════════════════════════════════════════════
OMMETOER · GEDEELDE MENUBALK + FOOTER (site-chrome)
─────────────────────────────────────────────────────────────────────────────
Eén bron voor de menubalk (wordmark · embleem · MENU + overlay) en de footer,
identiek aan de homepage. Gebruik op elke subpagina:
... of ...
data-nav="bar" → witte balk met bruine letters (pagina's met witte top:
privacy, voorwaarden). Balk schuift mee (sticky).
data-nav="overlay" → transparante balk met crème letters bovenop een foto-hero
(contact, club). Wordt een witte balk zodra je voorbij de
hero scrolt.
Maten in vw (proportioneel, exact zoals de homepage). Eigen klasse-prefix
"sc-" zodat dit niet botst met de bestaande pagina-CSS.
═══════════════════════════════════════════════════════════════════════════ */
:root{
--sc-cream:#FDF3C3;
--sc-brown:#260F0D;
--sc-blue:#cedde6;
--sc-pad:6.25vw;
--sc-ease:cubic-bezier(0.16,1,0.3,1);
--sc-font:'PP Mori','Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-SemiBold.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
/* Le Jardin du Bonheur — cursief accent in de footer ("mailbox"); hier geladen zodat het
óók op pagina's zonder eigen Le Jardin werkt (privacy, voorwaarden). */
@font-face{font-family:'Le Jardin';src:url('fonts/LeJardinduBonheur.woff2') format('woff2'),url('fonts/LeJardinduBonheur.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
/* ============ MENUBALK ============ */
.sc-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
padding:2.2vw var(--sc-pad);background:transparent;color:var(--sc-cream);
transition:color .4s var(--sc-ease),background-color .4s var(--sc-ease),border-color .4s var(--sc-ease),opacity .4s var(--sc-ease)}
.sc-nav a{color:inherit;text-decoration:none}
.sc-nav__left{flex:1;display:flex;align-items:center;justify-content:flex-start;color:inherit}
.sc-nav__center{flex:1;display:flex;align-items:center;justify-content:center;color:inherit}
.sc-nav__brand{display:block;line-height:0;color:inherit}
.sc-nav__wordmark{height:1.6vw;width:auto;display:block}
.sc-nav__emblem{height:3vw;width:auto;display:block}
.sc-nav__menu{flex:1;text-align:right;font-family:var(--sc-font);font-weight:600;text-transform:uppercase;font-size:1.25vw;
letter-spacing:0.04em;color:inherit;background:none;border:0;cursor:pointer;padding:0;line-height:1}
/* witte balk (bar-modus, of overlay na het scrollen) */
.sc-nav--solid{background:#fff;color:var(--sc-brown);box-shadow:0 0.4vw 1.4vw rgba(38,15,13,.06)}
body[data-nav="bar"] .sc-nav{position:sticky;background:#fff;color:var(--sc-brown);box-shadow:0 0.4vw 1.4vw rgba(38,15,13,.06)}
/* ============ OVERLAY-MENU ============ */
.sc-menu{position:fixed;inset:0;z-index:1000;background:var(--sc-brown);color:var(--sc-cream);display:flex;flex-direction:column;justify-content:center;
opacity:0;visibility:hidden;transition:opacity .5s var(--sc-ease),visibility .5s}
body.sc-menu-open .sc-menu{opacity:1;visibility:visible}
body.sc-menu-open{overflow:hidden}
.sc-menu__close{position:absolute;top:2.2vw;right:var(--sc-pad);font-family:var(--sc-font);font-weight:600;text-transform:uppercase;
font-size:1.25vw;letter-spacing:0.04em;color:var(--sc-cream);background:none;border:0;cursor:pointer}
.sc-menu__list{display:flex;flex-direction:column;gap:0.5vw;padding-left:var(--sc-pad)}
.sc-menu__list a{font-family:var(--sc-font);font-weight:600;text-transform:uppercase;font-size:7vw;line-height:1.12;letter-spacing:-0.02em;
color:var(--sc-cream);text-decoration:none;width:fit-content;opacity:0;transform:translateY(2vw);
transition:opacity .6s var(--sc-ease),transform .6s var(--sc-ease)}
body.sc-menu-open .sc-menu__list a{opacity:1;transform:none}
.sc-menu__list a:nth-child(1){transition-delay:.05s}
.sc-menu__list a:nth-child(2){transition-delay:.11s}
.sc-menu__list a:nth-child(3){transition-delay:.17s}
.sc-menu__list a:nth-child(4){transition-delay:.23s}
.sc-menu__list a:nth-child(5){transition-delay:.29s}
.sc-menu__list a:nth-child(6){transition-delay:.35s}
body.sc-menu-open .sc-menu__list a:hover{transform:translateX(0.8vw);opacity:.75}
/* ============ COWORK-KNOPPEN (voor de footer-CTA) ============ */
.otoer-btn{
--otoer-blauw:#cedde6; --otoer-bruin:#260f0d; --otoer-geel:#fdf3c3;
--otoer-fill:var(--otoer-blauw); --otoer-fill-rest:var(--otoer-fill); --otoer-outline:0;
--otoer-ink:var(--otoer-bruin); --otoer-ink-hover:var(--otoer-ink);
--otoer-h:4vw; --otoer-gap:0.7vw; --otoer-font-size:0.95vw; --otoer-pad:1.9vw; --otoer-speed:.45s;
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--otoer-gap);height:var(--otoer-h);
padding:0 var(--otoer-pad);border:0;background:none;text-decoration:none;cursor:pointer;
font-family:var(--sc-font);font-weight:600;font-size:var(--otoer-font-size);letter-spacing:.01em;
color:var(--otoer-ink);-webkit-tap-highlight-color:transparent}
.otoer-btn--geel-op-bruin{--otoer-fill:var(--otoer-geel);--otoer-ink:var(--otoer-geel);--otoer-ink-hover:var(--otoer-bruin);--otoer-fill-rest:transparent;--otoer-outline:0.16vw}
.otoer-btn--blauw-op-bruin{--otoer-fill:var(--otoer-blauw);--otoer-ink:var(--otoer-blauw);--otoer-ink-hover:var(--otoer-bruin);--otoer-fill-rest:transparent;--otoer-outline:0.16vw}
.otoer-btn--bruin-lijn{--otoer-fill:var(--otoer-bruin);--otoer-ink:var(--otoer-bruin);--otoer-ink-hover:var(--otoer-geel);--otoer-fill-rest:transparent;--otoer-outline:0.16vw}
.otoer-btn--geel-gevuld{--otoer-fill:var(--otoer-geel);--otoer-ink:var(--otoer-bruin);--otoer-ink-hover:var(--otoer-bruin);--otoer-fill-rest:var(--otoer-geel);--otoer-outline:0}
.otoer-btn--blauw-gevuld{--otoer-fill:var(--otoer-blauw);--otoer-ink:var(--otoer-bruin);--otoer-ink-hover:var(--otoer-bruin);--otoer-fill-rest:var(--otoer-blauw);--otoer-outline:0}
.otoer-btn--bruin-gevuld{--otoer-fill:var(--otoer-bruin);--otoer-ink:var(--otoer-geel);--otoer-ink-hover:var(--otoer-geel);--otoer-fill-rest:var(--otoer-bruin);--otoer-outline:0}
.otoer-btn--bruin-op-geel{--otoer-fill:var(--otoer-geel);--otoer-ink:var(--otoer-bruin);--otoer-ink-hover:var(--otoer-bruin);--otoer-fill-rest:transparent;--otoer-outline:0.16vw}
/* Volle pil in ruststand (homepage-stijl): outline-varianten tonen een omrande pil die
bij hover vult; gevulde varianten zijn altijd vol. Geen dot-swell meer. */
.otoer-btn::before{content:"";position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
background:var(--otoer-fill-rest);border:var(--otoer-outline) solid var(--otoer-fill);border-radius:999px;z-index:0;
transition:background-color var(--otoer-speed) ease,border-color var(--otoer-speed) ease}
.otoer-btn:hover::before,.otoer-btn:focus-visible::before{background:var(--otoer-fill)}
.otoer-btn--vol::before{background:var(--otoer-fill)}
.otoer-btn--vol:hover,.otoer-btn--vol:focus-visible{transform:translateY(-0.15vw)}
.otoer-btn:focus-visible{outline:0.16vw solid var(--otoer-ink);outline-offset:0.24vw}
/* label = centraal uitgelijnd, vult de knop (zodat bij gelijke groepsbreedte de pijlen uitlijnen) */
.otoer-btn__label{order:1;position:relative;z-index:1;flex:1 1 auto;text-align:center;white-space:nowrap;transition:color var(--otoer-speed) ease}
/* pijl = klein, rechts, schuift mee bij hover */
.otoer-btn__icon{order:2;position:relative;z-index:1;flex:0 0 auto;width:1.15vw;height:1.15vw;
display:grid;place-items:center;color:var(--otoer-ink);transition:color var(--otoer-speed) ease,transform .35s var(--sc-ease)}
.otoer-btn__icon svg{width:100%;height:auto;display:block;overflow:visible}
.otoer-btn:hover .otoer-btn__icon,.otoer-btn:focus-visible .otoer-btn__icon{transform:translateX(0.45vw)}
.otoer-btn:hover .otoer-btn__label,.otoer-btn:focus-visible .otoer-btn__label,
.otoer-btn:hover .otoer-btn__icon,.otoer-btn:focus-visible .otoer-btn__icon{color:var(--otoer-ink-hover)}
@media(prefers-reduced-motion:reduce){.otoer-btn::before{transition:none}.otoer-btn__icon{transition:color var(--otoer-speed) ease}}
/* mobiel: vw-knoppen schalen mee — bump naar leesbare maat (zoals homepage) */
@media(max-width:760px){
.otoer-btn{--otoer-h:12vw;--otoer-gap:2.2vw;--otoer-font-size:4vw;--otoer-pad:6vw}
.otoer-btn__icon{width:3.8vw;height:3.8vw}
}
/* ============ FOOTER (e-mail-opt-in + kolommen) ============ */
.sc-foot{background:var(--sc-brown);color:var(--sc-cream);padding:6.65vw var(--sc-pad) 2.45vw;font-family:var(--sc-font)}
.sc-foot__inner{max-width:90vw;margin:0 auto}
.sc-foot__cta{display:grid;grid-template-columns:1fr auto;gap:2.1vw;align-items:start}
.sc-optin-h{font-size:2.8vw;line-height:1.05;letter-spacing:-.01em;color:var(--sc-cream);max-width:15ch;margin:0;font-weight:600}
.sc-optin-h .sc-acc{font-family:'Le Jardin',cursive;font-weight:400;font-style:normal;font-size:1.34em;line-height:.7;letter-spacing:0}
.sc-optin-row{display:flex;align-items:center;justify-content:space-between;gap:2.4vw;margin-top:2.6vw}
.sc-optin-form{display:flex;align-items:center;gap:1.1vw;border-bottom:1.5px solid var(--sc-cream);padding-bottom:0.85vw;width:25.3vw}
.sc-optin-form input[type=email]{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--sc-cream);font-family:inherit;font-size:1.25vw;font-weight:600;letter-spacing:-.01em;line-height:1.1;padding:0}
.sc-optin-form input[type=email]::placeholder{color:rgba(253,243,195,.55)}
.sc-optin-go{flex-shrink:0;background:none;border:0;padding:0.3vw;color:var(--sc-cream);cursor:pointer;display:grid;place-items:center}
.sc-optin-go svg{width:2.2vw;height:auto;display:block;transition:transform .25s ease}
.sc-optin-go:hover svg,.sc-optin-go:focus-visible svg{transform:translateX(0.4vw)}
.sc-optin-cta{--otoer-h:3.2vw;--otoer-font-size:1vw;flex-shrink:0;transform:translateX(0.55vw)}
.sc-optin-cta .otoer-btn__label{padding:0 1.9vw}
.sc-optin-done{display:none;color:var(--sc-cream);font-size:1.2vw;margin-top:1.5vw}
.sc-foot__emblem{width:4.9vw;height:auto;justify-self:end}
.sc-foot__rule{border:none;border-top:1px solid rgba(253,243,195,.25);margin:4.6vw 0 3.2vw}
.sc-foot__grid{display:grid;grid-template-columns:2.1fr 1.3fr 1fr 1fr;gap:2.8vw;align-items:start}
.sc-foot__brand{display:flex;flex-direction:column;gap:1.5vw}
.sc-foot__grid .sc-wm{width:11vw;height:auto}
.sc-foot__addr{font-size:0.77vw;line-height:1.75;color:rgba(253,243,195,.85)}
.sc-foot__socials{display:flex;gap:1.1vw;margin-top:0.4vw}
.sc-foot__socials a{display:grid;place-items:center;color:var(--sc-cream);transition:opacity .35s ease}
.sc-foot__socials a:hover{opacity:.6}
.sc-foot__socials svg{width:1.7vw;height:1.7vw;display:block}
.sc-fg{display:flex;flex-direction:column;gap:0.6vw;font-size:0.77vw;color:rgba(253,243,195,.85)}
.sc-fg h5{font-size:0.74vw;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.35vw;opacity:.6;font-weight:600}
.sc-fg a{color:inherit;text-decoration:none}
.sc-fg a:hover{color:var(--sc-cream)}
.sc-foot__legal{margin-top:3.4vw;display:flex;flex-wrap:wrap;align-items:center;gap:1.4vw;font-size:0.77vw;color:rgba(253,243,195,.55)}
.sc-foot__legal a{color:inherit;text-decoration:none}
.sc-foot__legal a:hover{color:var(--sc-cream)}
/* ============ MOBIEL ============ */
@media(max-width:760px){
/* mobiel: geen wordmark — enkel embleem (home-link) in de linkerhoek, embleem + MENU groter */
.sc-nav{padding:5vw var(--sc-pad)}
.sc-nav__left{display:none}
.sc-nav__center{justify-content:flex-start}
.sc-nav__emblem{height:9vw}
.sc-nav__menu{font-size:4.2vw}
.sc-menu__close{font-size:4.2vw;top:5vw}
.sc-menu__list a{font-size:7vw}
}
@media(max-width:640px){
.sc-foot{padding:16vw var(--sc-pad) 11vw}
/* embleem weg (te druk); titel volle breedte, kleiner */
.sc-foot__cta{grid-template-columns:1fr;gap:5vw;align-items:start}
.sc-optin-h{font-size:6vw;max-width:none;margin:0}
.sc-foot__emblem{display:none}
.sc-optin-row{flex-direction:column;align-items:flex-start;gap:6vw;margin-top:9vw}
.sc-optin-form{max-width:86%;width:100%}
.sc-optin-form input[type=email]{font-size:4.4vw}
.sc-optin-go svg{width:7vw}
/* discovery-knop kleiner + subtieler */
.sc-optin-cta{--otoer-h:10.5vw;--otoer-font-size:3.6vw;align-self:flex-start;transform:none}
.sc-optin-cta .otoer-btn__label{padding:0 5.5vw}
.sc-optin-done{font-size:4.2vw}
.sc-foot__rule{margin:11vw 0 9vw}
/* brand + Let's talk naast elkaar (rij 1), Dive in + Get started naast elkaar (rij 2) */
.sc-foot__grid{grid-template-columns:1fr 1fr;gap:11vw 6vw;align-items:start}
.sc-foot__brand{gap:4vw}
.sc-foot__grid .sc-wm{width:34vw}
.sc-foot__addr{font-size:3.4vw;line-height:1.8}
.sc-foot__socials{gap:4.5vw;margin-top:1.5vw}
.sc-foot__socials svg{width:7vw;height:7vw}
.sc-fg{font-size:3.6vw;gap:2.2vw}
.sc-fg h5{font-size:3.2vw;margin-bottom:1.4vw}
/* juridische regel: 2 koll. kolomgewijs zodat het onderaan uitlijnt */
.sc-foot__legal{margin-top:13vw;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-auto-flow:column;justify-content:start;align-items:start;gap:3.6vw 9vw;font-size:3.2vw}
}