/* KobiVoice - gedeelde basis. * * Letterlijk dezelfde tokens en componenten als de bestaande pagina's, maar één * keer in plaats van in elke pagina opnieuw. De 28 bestaande pagina's blijven * ongemoeid; dit bestand is voor alles wat er vanaf nu bij komt, te beginnen * met de documentatie- en integratiepagina's. * * Waarom apart: bij 28 pagina's is 460 regels dupliceren te doen. Bij een * documentatieplatform dat naar tientallen integraties groeit, is dat precies * de reden dat zoiets over een jaar niet meer klopt. */ :root{ --ink:#08201D; --ink2:#0C2A26; --petrol:#0F5F5B; --petrol-d:#0A423F; --petrol-l:#16847C; --teal:#2FD4BE; --teal-2:#8CEAD9; --signal:#37C08F; --danger:#F0836E; --paper:#FBFBF8; --paper2:#F1F2EC; --paper3:#E7E9E1; --text:#182521; --soft:#556360; --faint:#8A9793; --line:#E4E7E0; --line2:#D6DAD1; --app-bg:#08201D; --app-bg2:#0E2C28; --app-line:#1C3A35; --app-ink:#EAF5F1; --app-soft:#8FB0AA; --app-accent:#3FD8C1; --app-green:#37C08F; --app-red:#F0836E; --fh:'Bricolage Grotesque',-apple-system,system-ui,sans-serif; --fb:'Instrument Sans',-apple-system,system-ui,sans-serif; --maxw:1320px; --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--fb);color:var(--text);background:var(--paper); -webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;overflow-x:hidden} /* overflow-x:hidden hierboven staat er bewust, gelijk aan de rest van de site. Niet omzetten naar `clip`: op of geeft de wortel zijn overflow door aan het kijkvenster, en `clip` trekt dan ook de verticale as dicht - de pagina scrollt dan niet meer. Met `hidden` wordt de verticale as `auto` en blijft alles werken. Hier twee keer op misgegaan. */ a{color:inherit;text-decoration:none} img,svg{display:block} h1,h2,h3,h4{margin:0;font-family:var(--fh);font-weight:700;letter-spacing:-.02em; line-height:1.04;color:var(--ink)} p{margin:0} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:26px} /* Bovenbalk */ .util{background:var(--ink);color:#A9C6C0} .util-in{display:flex;align-items:center;justify-content:space-between;height:40px; font-size:13px;font-weight:500;gap:16px} .util .u-l{display:inline-flex;align-items:center;gap:9px} .util .u-r{display:inline-flex;align-items:center;gap:20px} .util .u-r a:hover{color:#fff} .util .u-phone{display:inline-flex;align-items:center;gap:7px} .util .u-phone svg{width:14px;height:14px;color:var(--teal)} @media(max-width:760px){.util .u-l{display:none}.util-in{justify-content:flex-end}} /* Navigatie */ .nav{position:sticky;top:0;z-index:60;background:rgba(251,251,248,.82); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent; transition:border-color .25s,box-shadow .25s,background .25s} .nav.scrolled{border-color:var(--line);box-shadow:0 8px 30px -22px rgba(8,32,29,.5)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px} .nav-links{display:flex;gap:6px;align-items:center;font-size:15px;color:var(--text);font-weight:500} .nav-links a{padding:8px 14px;border-radius:100px;transition:background .16s,color .16s} .nav-links a:hover{color:var(--petrol);background:rgba(15,95,91,.07)} .nav-links a[aria-current="page"]{color:var(--petrol);background:rgba(15,95,91,.07)} .nav-right{display:flex;align-items:center;gap:14px} .login{font-weight:600;font-size:15px;color:var(--ink)} .login:hover{color:var(--petrol)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--fh);font-weight:750; font-size:20px;letter-spacing:-.03em;color:var(--ink)} .mk{width:36px;height:36px;flex:none} @media(max-width:940px){.nav-links{display:none}} @media(max-width:560px){.nav-right .btn{display:none}.nav-in{height:64px}} /* Knoppen */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-weight:600; font-size:15.5px;padding:14px 26px;border-radius:6px;border:1px solid transparent; white-space:nowrap; cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s, color .18s,box-shadow .18s} .btn svg{width:17px;height:17px} .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px -12px rgba(8,32,29,.7)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(8,32,29,.75)} .btn-teal{background:var(--teal);color:#06231F;box-shadow:0 10px 26px -12px rgba(47,212,190,.7)} .btn-teal:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(47,212,190,.8)} .btn-out{background:transparent;color:var(--ink);border-color:var(--line2)} .btn-out:hover{transform:translateY(-2px);border-color:var(--petrol);color:var(--petrol)} /* Sectiekop */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-size:11.5px; font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--petrol); background:none;border:0;padding:0} .eyebrow.on-dark{color:var(--teal-2);background:none;border:0} .shead{max-width:46rem} .shead.center{margin-inline:auto;text-align:center} .shead h2{font-size:clamp(30px,3.9vw,46px);margin-top:18px;font-weight:750} .shead p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--soft)} .tp-note{font-size:13.5px;color:var(--faint);margin-top:18px;line-height:1.6} /* Voettekst */ footer{background:var(--ink);color:#8BADA7;padding:58px 0 34px;font-size:14.5px} .foot-in{display:grid;grid-template-columns:minmax(250px,300px) 1fr;gap:64px;align-items:start} .foot-brand{color:#fff;font-family:var(--fh);font-weight:750;font-size:18px;display:flex; align-items:center;gap:10px;letter-spacing:-.02em} .foot-brand .mk{width:30px;height:30px} .foot-tag{margin-top:12px;font-size:14px;line-height:1.55;color:#7FA39D;max-width:34ch} .foot-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(200px,1.2fr);gap:26px 28px} .foot-col h4{font-family:var(--fb);color:#fff;font-size:12.5px;letter-spacing:.06em; text-transform:uppercase;margin:0 0 15px;font-weight:700} .foot-col a{display:block;color:#8BADA7;padding:5px 0} .foot-col a:hover{color:#fff} .foot-contact{margin-top:26px;max-width:270px} .foot-col-contact .foot-contact{margin-top:0;max-width:none} .foot-contact h4{font-family:var(--fb);color:#fff;font-size:12.5px;letter-spacing:.06em; text-transform:uppercase;margin:0 0 12px;font-weight:700} .foot-contact .fc-uren{font-size:13.5px;line-height:1.6;color:#8BADA7;margin:0 0 16px} .fc{display:flex;align-items:center;gap:10px;padding:6px 0;color:#8BADA7} .fc:hover{color:#fff} .fc-ic{width:26px;height:26px;border-radius:8px;background:#12332E;display:grid;place-items:center;flex:none} .fc-ic svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .foot-bot{border-top:1px solid #1C3A35;margin-top:44px;padding-top:22px;display:flex; flex-wrap:wrap;align-items:center;color:#6C8B85;font-size:13px;row-gap:10px} .foot-bot > *{padding:0 15px;line-height:1.4;border-left:1px solid #23433D} .foot-bot > *:first-child{padding-left:0;border-left:0} .foot-bot a{color:#6C8B85;text-decoration:underline;text-underline-offset:3px} .foot-bot a:hover{color:#fff} @media(max-width:1080px){.foot-links{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.foot-in{grid-template-columns:1fr;gap:36px}} @media(max-width:700px){.foot-bot{row-gap:8px}.foot-bot > *{padding:0 11px}} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} }