/* theme.css — de huisstijl van de tool: kleuren, typografie en de gedeelde * bouwstenen (knoppen, pillen, chips, badges). * * WAAROM APART: dashboard.css, slack.css, home.css, chef.css en styles.css * bouwden elk hun eigen kleurtabel op. Nu staat die tabel één keer hier, en * kunnen alle schermen — inclusief het tabel-dashboard — er hetzelfde uitzien. * * TWEE MODI. De tool draait op twee soorten schermen, en dat vraagt twee * paletten: * * dagmodus (standaard) licht, rustig, om zelf mee te werken; * nachtmodus donker, contrastrijk — 's avonds en op het scherm * in de redactie. * * De keuze staat op , wordt vóór het schilderen * gezet door theme.js (dus geen witte flits) en bewaard in localStorage. * * KLEUR PER TITEL. Kiest de gebruiker een titel, dan zetten de pagina's * --accent (en --total) op de huisstijlkleur daarvan: HLN-rood, Trouw-blauw. * Die kleur is niet altijd leesbaar als tekst — Humo-geel op wit — dus mengen * we hem met de inkt tot --accent-ink. Vuistregel: --total voor de totaal-lijn * in een grafiek, --accent-ink voor knoppen, koppen en tekst. */ :root { /* ---- merk ---- */ /* RI&G: het kubus-mark (goud, rood, magenta, paars) en het lint dat daaruit volgt. Smartocto: violet en cyaan, de kleuren van het woordmerk. */ --rig-gold: #E8A200; --rig-red: #D8322C; --rig-magenta: #C7247A; --rig-purple: #6B2E8F; --so-violet: #5B2BE0; --so-cyan: #2FC4DE; --ribbon: linear-gradient(100deg, #4A1E6B 0%, #7B2A8E 34%, #B32478 68%, #D8324E 100%); /* ---- typografie ---- */ --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --display: var(--sans); --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --serif: "Iowan Old Style", Palatino, Georgia, serif; /* ---- vlakken: dagmodus ---- */ --bg: #f1f1f7; --surface: #ffffff; /* Ondoorzichtige variant van --surface. In nachtmodus is --surface een waas van wit; alles wat ergens overheen ligt (het lint, een plakkende kop) heeft een dekkende ondergrond nodig, anders schuift de inhoud er zichtbaar doorheen. */ --surface-solid: #ffffff; --pop: #ffffff; /* menu's, modals, uitklaplijsten */ --sunk: #f5f5fa; /* invoervelden en balk-achtergronden */ --track: rgba(26, 23, 48, .09); --hover: rgba(107, 46, 143, .07); --line: #e3e3ee; /* rand van een kaart */ --line-soft: #ededf4; /* scheidingslijn ín een lijst */ --text: #1a1730; --muted: #6a6884; --ink-on-accent: #ffffff; /* tekst op een gevulde accentknop */ --shadow-sm: 0 1px 2px rgba(24, 12, 56, .06); --shadow: 0 2px 4px rgba(24, 12, 56, .05), 0 10px 28px rgba(24, 12, 56, .07); --shadow-pop: 0 16px 44px rgba(24, 12, 56, .18); /* ---- betekeniskleuren ---- */ --ok: #10795a; --bad: #c22b2b; --warn: #a8670a; --scrim: rgba(20, 12, 45, .45); /* waas achter een modal */ /* Publieksbehoeften in het AI-paneel: op wit moeten ze donkerder zijn dan de pasteltinten die op een donker scherm werken. */ --need-context: #1f66c4; --need-help: #0d7355; --need-raak: #b8355f; --need-verras: #8f6300; /* ---- gegevenslijnen (blijven in beide modi gelijk) ---- */ --total: #22a6bf; --app: #FE074E; --web: #8E36FF; /* ---- accent ---- Zonder gekozen titel is dat het paars van het lint; kiest de gebruiker een titel, dan zetten runtime-config.js / slack.js / chef.js hier de huisstijl- kleur van die titel. --total blijft de kleur van de TOTAAL-lijn in de grafieken; die twee waren eerder één variabele en dat gaf teal knoppen onder een paars lint. */ --accent: var(--rig-purple); --accent-ink: color-mix(in srgb, var(--accent) 72%, #14122b 28%); --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent); /* Oude namen, zodat bestaande regels blijven werken. */ --panel: var(--surface); --panel-bd: var(--line); --ribbon-h: 118px; /* hoogte van het lint; nav.js meet en herzet dit */ color-scheme: light; } [data-theme="nacht"] { --bg: #100d24; --surface: rgba(255, 255, 255, .055); --surface-solid: #1d1a30; /* exact wat rgba(255,255,255,.055) op --bg oplevert */ --pop: #1b1640; --sunk: rgba(0, 0, 0, .28); --track: rgba(255, 255, 255, .10); --hover: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .13); --line-soft: rgba(255, 255, 255, .08); --text: #eef0ff; --muted: rgba(238, 240, 255, .58); --shadow-sm: none; --shadow: none; --shadow-pop: 0 16px 44px rgba(0, 0, 0, .55); --ok: #46d39a; --bad: #ff7b7b; --warn: #f5c451; --scrim: rgba(0, 0, 0, .6); --need-context: #7fb6ff; --need-help: #5fd0a6; --need-raak: #f2969c; --need-verras: #f0c05a; /* Op donker moet de titelkleur juist lichter, niet donkerder. */ --accent-ink: color-mix(in srgb, var(--accent) 82%, #ffffff 18%); --accent-wash: color-mix(in srgb, var(--accent) 22%, transparent); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } ::selection { background: color-mix(in srgb, var(--rig-magenta) 30%, transparent); } /* ---- knoppen --------------------------------------------------------------- Pilvormig, zoals de bronnenknoppen in de nieuwsmonitor: een gevulde knop is de actie, een ghost-knop is een keuze of een sprong. */ .btn { border: 1px solid transparent; background: var(--accent-ink); color: var(--ink-on-accent); border-radius: 999px; padding: 7px 15px; font: 600 .85rem var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; } .btn:hover { background: color-mix(in srgb, var(--accent-ink) 85%, #000); } .btn.ghost { background: var(--surface); border-color: var(--line); color: var(--text); } .btn.ghost:hover { background: var(--hover); border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line)); } .btn:focus-visible, .chip:focus-visible, .pill:focus-visible { outline: 2px solid var(--rig-magenta); outline-offset: 2px; } /* Keuzelijst met dezelfde vorm als een ghost-knop. */ .topbar-select { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 12px; font: 600 .85rem var(--sans); cursor: pointer; max-width: 200px; } .topbar-select:hover { background: var(--hover); } .topbar-select option { background: var(--pop); color: var(--text); } /* ---- labels boven een rij knoppen (BRONNEN, SECTIE, DIT SCHERM…) ---- */ .eyebrow { color: var(--muted); font: 700 .68rem var(--sans); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; } /* ---- getal-badge, zoals de tellers in de nieuwsmonitor ---- */ .badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font: 700 .74rem var(--sans); background: var(--accent-wash); color: var(--accent-ink); white-space: nowrap; } [hidden] { display: none !important; }