/* ============================================================ MargeMaster — design tokens & thema's 8px base grid. Schibsted Grotesk (display) + Hanken Grotesk (text) Kleuren werken via SEMANTISCHE tokens die per thema wisselen. - Light thema = :root (standaard) - Dark thema = [data-theme="dark"] op Pas een restyle (merkkleur/logo) hier centraal aan; componenten verwijzen uitsluitend naar deze tokens. ============================================================ */ :root{ /* ---- merk (theme-agnostisch) ---- */ --teal:#0D9488; --teal-mid:#00A99D; --teal-bright:#08D4C1; --brand-ink:#222325; --canvas:#070B16; --navy:#191A2E; --surface-dark:#0F1626; --surface-dark-2:#161F33; --mist:#F1F5F9; --slate:#64748B; --steel:#8F95A3; --white:#FFFFFF; /* ---- accent (gelijk in beide thema's) ---- */ --accent:var(--teal); --accent-strong:var(--teal-mid); --accent-bright:var(--teal-bright); --accent-press:#0A7E71; /* dieper teal voor hover/pressed */ --on-accent:#04201D; /* donkere tekst/iconen op teal (badges, content-panelen) */ --accent-fg:#FFFFFF; /* tekst op teal KNOPPEN, lichtkrant en actieve tabs */ --accent-soft:rgba(13,148,136,.12); /* ---- statussen ---- */ --green:#0E9F6E; --green-soft:#E3F5EE; --amber:#C9881A; --amber-soft:#F7ECD6; --red:#DC4F38; --red-soft:#F8E3DE; /* felle varianten op donkere panelen */ --red-bright:#FF9B86; --green-bright:#5FD3A8; --amber-bright:#F5C462; --verdict-low-bg:rgba(201,136,26,.18); --verdict-ok-bg:rgba(14,159,110,.20); /* spacing — 8px grid */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:128px; /* radius — strakker/zakelijker (B2B) */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px; /* type */ --font-display:"Schibsted Grotesk",system-ui,sans-serif; --font-text:"Hanken Grotesk",system-ui,sans-serif; --maxw:1224px; /* ================= LIGHT THEMA ================= */ --bg:var(--mist); --bg-2:#E7ECF2; --surface:#FFFFFF; --surface-2:#EEF2F7; --text:var(--brand-ink); --text-muted:#5C6A7D; /* ≈4,7:1 op --bg (WCAG AA) */ --text-faint:#6E7A8C; /* ≈3,3:1 — alleen decoratief/labels */ --accent-ink:#0A6E62; /* kleine teal-tekst op licht, ≈6:1 op wit */ --border:rgba(20,28,46,.10); --border-2:rgba(20,28,46,.18); --nav-bg:rgba(241,245,249,.82); /* feature-panelen (de altijd-donkere eilanden) */ --feature-bg:var(--navy); --feature-inset:#202442; --feature-text:#FFFFFF; --feature-muted:#A9B0C0; --feature-faint:#7E869B; --feature-border:rgba(255,255,255,.10); --feature-border-2:rgba(255,255,255,.16); --ghost:#15172A; --gauge-track:#2A2D45; /* logo-bronnen */ --logo:url("assets/logo-on-light.png"); --logo-mark:url("assets/mark-on-light.png"); --shadow-soft:rgba(20,28,46,.05); --shadow-card:0 1px 2px rgba(20,28,46,.04), 0 5px 18px rgba(20,28,46,.05); --shadow-pop:0 10px 32px rgba(7,11,22,.09); } /* ================= DARK THEMA ================= */ [data-theme="dark"]{ --bg:var(--canvas); --bg-2:#0B1120; --surface:var(--surface-dark); --surface-2:var(--surface-dark-2); --text:var(--mist); --text-muted:var(--steel); --text-faint:#6B7384; --accent-ink:var(--accent-bright); /* op donker is bright leesbaar */ --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16); --nav-bg:rgba(7,11,22,.82); --feature-bg:#111A2E; --feature-inset:#1A2440; --feature-text:#FFFFFF; --feature-muted:#9AA3B5; --feature-faint:#6B7384; --feature-border:rgba(255,255,255,.08); --feature-border-2:rgba(255,255,255,.14); --ghost:#0C1322; --gauge-track:#27304A; --logo:url("assets/logo-on-dark.png"); --logo-mark:url("assets/mark-on-dark.png"); --shadow-soft:rgba(0,0,0,.35); --shadow-card:0 1px 2px rgba(0,0,0,.25), 0 5px 18px rgba(0,0,0,.32); --shadow-pop:0 10px 32px rgba(0,0,0,.42); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} /* geen horizontale scroll door decoratieve elementen */ body{ font-family:var(--font-text); background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","cv01"; transition:background .3s ease,color .3s ease; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input{font-family:inherit} ::selection{background:var(--accent);color:var(--on-accent)} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--s4)} .section{padding-block:var(--s10)} @media(max-width:860px){.section{padding-block:var(--s8)}} /* ---------- type ---------- */ .display{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,6.2vw,76px); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; } h2.title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,48px); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; } h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em} .lede{font-size:clamp(15px,1.1vw,17px);color:var(--text-muted);max-width:56ch;line-height:1.6} .tnum{font-variant-numeric:tabular-nums} /* speels accent-lijntje onder uitgelichte woorden in titels. Vorm via mask, kleur via --accent (volgt het thema/merk). */ .hl{position:relative;display:inline-block;white-space:nowrap} .hl::after{ content:"";position:absolute;left:-2%;right:-2%;bottom:-.14em;height:.3em; background:var(--accent); --sq:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2016'%20preserveAspectRatio='none'%3E%3Cpath%20d='M4%2011%20C40%204%2070%2014%20110%208%20C140%203%20170%2012%20196%207'%20fill='none'%20stroke='black'%20stroke-width='4'%20stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask:var(--sq) center/100% 100% no-repeat; mask:var(--sq) center/100% 100% no-repeat; pointer-events:none; } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:var(--s2); padding:12px 20px;border-radius:var(--r-pill); font-weight:600;font-size:15px;line-height:1; transition:transform .2s cubic-bezier(.34,1.4,.64,1),background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease; white-space:nowrap; transform:translateZ(0); /* eigen compositing-laag → scherpe schaalanimatie */ will-change:transform; backface-visibility:hidden; } .btn svg{width:18px;height:18px;flex:none;will-change:transform;transition:transform .2s cubic-bezier(.34,1.4,.64,1)} /* hover: knop heel licht vergroten (3D), geen "lift" meer */ .btn:hover{transform:scale3d(1.025,1.025,1)} .btn:active{transform:scale3d(.97,.97,1)} /* primaire CTA — teal */ .btn-dark,.btn-lime{background:var(--accent);color:var(--accent-fg)} .btn-dark:hover,.btn-lime:hover{background:var(--accent-press);box-shadow:0 8px 20px rgba(13,148,136,.28)} /* secundair — outline */ .btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border-2)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* pijl-icoon schuift naar rechts bij hover */ .btn-arrow:hover svg{transform:translate3d(4px,0,0)} @media(prefers-reduced-motion:reduce){ .btn,.btn svg{transition:none} .btn:hover,.btn:active{transform:translateZ(0)} .btn-arrow:hover svg{transform:none} } /* zichtbare focus voor toetsenbordgebruikers (WCAG 2.4.7) */ a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} .linkarrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--accent)} .linkarrow svg{width:16px;height:16px;transition:transform .18s ease} .linkarrow:hover svg{transform:translateX(3px)} /* ---------- card ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card)} /* ---------- badges ---------- */ .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);font-size:14px;font-weight:600;background:var(--surface);border:1px solid var(--border)} .tag{display:inline-flex;align-items:center;padding:8px 15px;border-radius:var(--r-pill);font-size:15px;font-weight:500;background:var(--surface);border:1px solid var(--border-2);color:var(--text)} .status{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);font-size:13px;font-weight:600} .status::before{content:"";width:7px;height:7px;border-radius:50%} .status.good{background:var(--green-soft);color:var(--green)} .status.good::before{background:var(--green)} .status.low{background:var(--amber-soft);color:var(--amber)} .status.low::before{background:var(--amber)} .status.check{background:var(--surface-2);color:var(--text-muted)} .status.check::before{background:var(--text-faint)} /* utility */ .dark{background:var(--feature-bg);color:var(--feature-text)} .dark .lede{color:var(--feature-muted)} .center{text-align:center} .mx-auto{margin-inline:auto} /* ---------- scroll reveal ---------- Subtiele, zakelijke in-animaties. De .reveal-klasse wordt door app.js toegevoegd (progressive enhancement): zonder JS blijft alles zichtbaar. */ @media(prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .6s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} }