/* base.css — fundament: design-tokens (light + dark), reset, body, textuur, sheet, utilities. Swiss Industrial Print. Overgenomen uit ReadinesscheckOpties/_modulair en samengebracht tot één toggle-baar thema. Thema wisselen: js/theme.js zet data-theme="light" | "dark" op . Fallback: zonder attribuut geldt light (via :root). */ :root, :root[data-theme="light"] { --paper:#efe9e0; --paper2:#e4ddd1; --paper3:#d9d1c3; --panel:#151310; --ink:#151310; --ink-dim:#5c554b; --ink-faint:#8a8174; --hair:#c3b9a8; --hair-strong:#151310; --accent:#ff7722; --on-accent:#231a10; --sterk:#54a07a; --aandacht:#cf9a39; --risico:#d2624a; --is-aandacht-fg:#a9772a; /* semantische tokens (maken de dark-variant mogelijk) */ --block-bg:var(--ink); --block-fg:var(--paper); --meter-track:var(--paper); --thumb-bg:var(--paper); --thumb-filter:none; --field-bg:#fff; /* CRT-scanlines: kleur + sterkte per thema (subtiel, in lijn met de site-hero) */ --scanline:rgba(21,19,16,.05); --scan-op:.3; } /* Dark = default (de landingssite is donker). Kleur-tokens gelijkgetrokken met css/custom.css (--surface #151310, kaart #1a1613, tekst #e7e2db). */ :root[data-theme="dark"] { --paper:#151310; --paper2:#1a1613; --paper3:#211c17; --panel:#0e0b08; --ink:#e7e2db; --ink-dim:#a89f92; --ink-faint:#7c7365; --hair:#2e2a24; --hair-strong:#4a443a; --accent:#ff7722; --on-accent:#231a10; --sterk:#54a07a; --aandacht:#cf9a39; --risico:#d2624a; --is-aandacht-fg:var(--aandacht); --block-bg:var(--panel); --block-fg:var(--ink); --meter-track:var(--panel); --thumb-bg:transparent; --thumb-filter:invert(1) hue-rotate(180deg); --field-bg:#0e0b08; --scanline:rgba(0,0,0,.14); --scan-op:.32; } :root { /* Site-fonts (self-hosted via /css/fonts.css). Geen IBM Plex Mono meer: de "mono"-labels lenen Source Sans 3 (uppercase + letter-spacing), zoals de eyebrow-labels op de site; cijfers lijnen uit via tabular-nums op body. */ --mono:"Source Sans 3",system-ui,sans-serif; --sans:"Source Sans 3",system-ui,sans-serif; --display:"Lexend","Source Sans 3",system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; min-height:100vh; position:relative; overflow-x:hidden; font-variant-numeric:tabular-nums; } /* Zachte hoeken op de interactieve/pill-elementen (site-match); de editoriale grid-cellen blijven strak, zodat gedeelde randen netjes op elkaar aansluiten. */ .btn,.lead-input,.theme-toggle,.filetag,.stripe{border-radius:.5rem;} /* POST-PROCESSING: CRT-scanlines + film-grain (kleur/sterkte via tokens). */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 3px); mix-blend-mode:multiply; opacity:var(--scan-op); } body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9001; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);} .sheet{max-width:1180px;margin:0 auto;background:var(--paper); border-left:2px solid var(--hair-strong);border-right:2px solid var(--hair-strong);min-height:100vh;} .pad{padding:0 22px;} /* data-band utilities (semantisch: alleen voor scorezones) */ .bg-sterk{background:var(--sterk);} .bg-aandacht{background:var(--aandacht);} .bg-risico{background:var(--risico);} .bg-accent{background:var(--accent);color:var(--on-accent);} .is-sterk{color:var(--sterk);} .is-aandacht{color:var(--is-aandacht-fg);} .is-risico{color:var(--risico);} .tar{text-align:right;} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ===== THEME TOGGLE (in de runhead) ===== */ .theme-toggle{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:transparent;border:2px solid var(--hair-strong); color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;padding:5px 9px;line-height:1;transition:background .15s,color .15s; } .theme-toggle:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent);} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .theme-toggle .tt-icon{width:13px;height:13px;display:inline-block;} /* toon het juiste icoon-label per thema */ .theme-toggle .tt-dark{display:none;} .theme-toggle .tt-light{display:inline;} :root[data-theme="dark"] .theme-toggle .tt-dark{display:inline;} :root[data-theme="dark"] .theme-toggle .tt-light{display:none;}