/* ============================================================ ExamenFlix — huisstijl Productlijn ExamenFlix. Eén heldenkleur (ExamenFlix Rood), veel wit, sterk typografisch contrast tussen een zware kop en een rustige body. Terughoudendheid is de stijl: geen regenboog. DIT BESTAND IS GEDEELD EN IDENTIEK IN ELKE TRAINER. Niet met de hand aanpassen — het wordt gesynchroniseerd vanuit de skill examenflix-huisstijl en gecontroleerd met controleer-huisstijl.js. Wijzig je iets, wijzig het dan in de skill en synchroniseer opnieuw. Vakspecifieke kleuren (domeinaccenten) horen NIET hier maar in het per-project bestand styles/brand-vak.css. Bevat uitsluitend variabelen en basistypografie. Alle componenten in main.css, nav.css, motion.css en admin.css lezen deze namen; nergens in die bestanden hoort een letterlijke kleurwaarde te staan. Afkomstig van outsmart-huisstijl (productlijn OutSmart your Exam, huisstijl Extern.pro): zelfde systeem, andere merknaam en een andere heldenkleur. Structuur en namen zijn bewust gelijk gehouden — alleen het rood is nieuw. ============================================================ */ :root { /* ---------- ExamenFlix-palet ---------- */ --examenflix-rood: #F02226; /* heldenkleur: uit het logo, focus en actie */ --diep-rood: #C4141A; /* hover en actieve staten */ --bos-rood: #7A1015; /* diepte, donkerste accent */ /* De heldenkleur haalt tegen wit 4,2:1. Genoeg voor grote tekst en voor vlakken, niet ruim boven de 4,5:1 die kleine tekst nodig heeft — en de merkstijl eist AA expliciet. Daarom één regel: vlakken, randen en koppen krijgen de heldenkleur, kleine tekst en witte knoplabels de diepere tint (6,1:1). Het merkbeeld blijft rood; alleen tekst die je moet kunnen lezen wordt een stap donkerder. */ --rood-tekst: var(--diep-rood); --blos: #FCEAEA; /* zachte sectieachtergrond */ --mint: var(--blos); /* compat-naam uit de vorige (groene) huisstijl */ /* ---------- Neutralen ---------- */ --inktzwart: #1A1A1A; /* koppen en bodytekst */ --steengrijs: #6E6E6E; /* secundaire tekst */ --mistgrijs: #F4F4F4; /* pagina-achtergrond */ --border-gray: #E4E4E4; --white: #FFFFFF; /* Paneelkleur als eigen naam naast --white. Componenten die een kaart of paneel vullen horen --paneel te gebruiken: dat is de enige haak waarmee een donkere modus ooit kan werken. --white blijft bestaan voor wat écht wit moet zijn (tekst op een rode knop). */ --paneel: var(--white); /* ---------- Rolgebaseerde compat-namen ---------- VEROUDERD. Deze namen komen uit een eerdere huisstijl en staan hier alleen zodat bestaande componentregels blijven werken. Nieuwe CSS gebruikt de rolnamen hieronder. Verwijderen zodra dit in alle trainers nul oplevert: grep -c 'sky-pulse\|tangerine\|royal-indigo\|emerald-drive' styles/*.css */ --sky-pulse: var(--rood-tekst); /* links en kleine accenttekst */ --tangerine-heat: var(--rood-tekst); /* primaire knoppen (witte tekst erop) */ --tangerine-dark: var(--bos-rood); /* knop-hover */ --emerald-drive: var(--examenflix-rood); /* geslaagd, goed */ --royal-indigo: var(--bos-rood); /* open vragen, XP */ --solar-gold: #E6A100; /* waarschuwing — spaarzaam */ --crimson-flame: #C0392B; /* fout — spaarzaam, bewust ánders rood dan de heldenkleur */ --pure-noir: var(--inktzwart); --ash-stone: var(--steengrijs); --light-gray: var(--mistgrijs); /* ---------- Feedback ---------- */ --feedback-good: var(--examenflix-rood); --feedback-good-bg: var(--blos); --feedback-bad: #C0392B; --feedback-bad-bg: #FBEAE7; /* ---------- Semantische statussen ---------- Deze stonden ooit als losse hex-waarden in de componenten. Dat werkt tot de dag dat de huisstijl wisselt: dan volgt alles behalve die waarden, en zie je twee statussen die op elkaar gaan lijken. Elke status heeft een tekstvariant, want de vlakkleur is te licht om tekst op te zetten en de volle kleur te licht om tekst ván te maken. Let op: --goed valt hier samen met de heldenkleur, net als bij groen hiervoor. --fout blijft een ánder, doffer rood (--crimson-flame) zodat "goed" en "fout" nooit dezelfde kleur worden, ook al zijn het nu allebei tinten rood. */ --goed: var(--examenflix-rood); --goed-bg: var(--blos); --goed-tekst: #7A0D11; --waarschuwing: #E6A100; --waarschuwing-bg: #FDF4DE; --waarschuwing-tekst: #7A5200; --fout: #C0392B; --fout-bg: #FBEAE7; --fout-tekst: #8E2B20; --info: #2C7BE5; --info-bg: #EAF2FD; --info-tekst: #1A4E96; /* Rood dat leesbaar is op een donker vlak. Nodig voor de enkele componenten die altijd donker zijn (de XP-toast), los van de donkere modus. Op inktzwart haalt dit 6,9:1; --examenflix-rood haalt daar 3,3:1. */ --rood-op-donker: #FF7A70; /* Markering in het examen: moet zichtbaar ánders zijn dan "beantwoord", anders lijken twee toestanden op elkaar. Daarom amber en niet nóg een rood. */ --markering: var(--waarschuwing); --markering-bg: var(--waarschuwing-bg); --markering-tekst: var(--waarschuwing-tekst); /* Melding van een student: het enige signaal in de reviewlijst dat van een mens komt, dus inktzwart — maximaal contrast, zonder een zesde kleur. */ --melding: var(--inktzwart); --melding-bg: #EDEDED; /* Neutrale vlakken binnen kaarten (invoerblokken, uitwerkingen). */ --vlak: #F7F7F7; --vlak-rand: #E4E4E4; /* Engelse aliassen — verkeer's main.css gebruikt deze namen. */ --warning: var(--waarschuwing); --warning-bg: var(--waarschuwing-bg); --error: var(--fout); --error-bg: var(--fout-bg); /* ---------- Spelpalet ---------- UITSLUITEND voor de motiverende laag: streaks, badges, niveaus, de sprint en de ranglijst. Examen, oefenen en de uitslagpagina blijven rood/grijs. Die twee registers uit elkaar houden is de hele bedoeling — gebruik deze kleuren dus nooit in een vraagscherm. Het spelpalet staat NAAST de hoofdtokens, het vervangt ze nooit. Schermen die het mogen gebruiken krijgen class="register-spel" op body. */ --vlam: #FF6B2C; --vlam-diep: #E04E12; --vlam-bg: #FFF1E8; --goud: #F5B301; --goud-diep: #C98F00; --goud-bg: #FFF8E1; --level-paars: #6C4BD6; --level-diep: #4E33A8; --level-bg: #F0ECFC; --verloop-vlam: linear-gradient(135deg, #FF8A3D, #E04E12); --verloop-goud: linear-gradient(135deg, #FFD34D, #C98F00); --verloop-level: linear-gradient(135deg, #8A6BE8, #4E33A8); /* ---------- Domeinaccenten ---------- Een generieke schaal van licht naar donker, niet zes willekeurige tinten. Een schaal op hélderheid is voor kleurenblinde gebruikers béter te onderscheiden dan losse tinten, en kleur is hier hoe dan ook de tweede aanwijzing: elk domein heeft ook een icoon en een naam. Alleen gebruiken waar géén tekst op staat (accentbalken, stippen, voortgangsbalken). Witte tekst op de heldenkleur haalt AA niet. De koppeling van vakcodes aan deze schaal staat per project in styles/brand-vak.css: --domein-OKI: var(--domein-3); Meer domeinen dan zes? Laat de schaal rondlopen. */ --domein-1: #E8969A; --domein-2: var(--examenflix-rood); --domein-3: var(--diep-rood); --domein-4: var(--bos-rood); --domein-5: #4A0C10; --domein-6: #2E0709; /* ---------- Typografie ---------- Het contrast tussen een zware kop en een rustige body is het onderdeel dat moet blijven staan: Montserrat ExtraBold/Black tegen Open Sans. */ --font-header: 'Montserrat', 'Helvetica Neue', sans-serif; --font-body: 'Open Sans', sans-serif; /* ---------- Vorm ---------- */ --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); --card-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.10); --radius: 10px; --radius-sm: 6px; --nav-hoogte: 80px; --max-breedte: 1100px; /* ---------- Sjabloonnamen ---------- Het sjabloon uit examentrainer-frontend gebruikt een eigen, kortere woordenlijst. Die staat hier vertaald, zodat dit bestand een drop-in is voor een verse trainer uit het sjabloon: main.css blijft werken zonder één regel te veranderen. Nieuwe CSS gebruikt de rolnamen hierboven; deze zijn er voor de componenten die er al zijn. */ --hoofdkleur: var(--examenflix-rood); --hoofdkleur-diep: var(--diep-rood); --hoofdkleur-licht: var(--blos); --inkt: var(--inktzwart); --grijs: var(--steengrijs); --lijn: var(--border-gray); --achtergrond: var(--mistgrijs); --font-kop: var(--font-header); --font-tekst: var(--font-body); --kop-gewicht: 800; --radius-s: var(--radius-sm); --schaduw: var(--card-shadow); } /* ---------- Donkere modus ---------- Bewust OPT-IN, niet op prefers-color-scheme alleen. Reden: de componenten vullen panelen nu nog met --white in plaats van --paneel. Zolang dat zo is levert een automatische donkere modus halfdonkere pagina's op. Aanzetten per project met zodra grep -c 'var(--white)' styles/main.css nul is en alles via --paneel loopt. Met data-thema="donker" forceer je hem. Het spelpalet moet mee: --vlam-bg, --goud-bg en --level-bg zijn bijna wit en gloeien op een donker paneel als je ze laat staan. */ :root[data-thema="donker"], :root[data-thema="auto"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-thema="auto"] { --inktzwart: #F2F4F5; --steengrijs: #A8B3B5; --mistgrijs: #14191A; --border-gray: #2C3436; --paneel: #1D2426; --vlak: #232B2D; --vlak-rand: #2C3436; --blos: #331515; --goed-bg: #331515; --goed-tekst: #FF9D97; --fout-bg: #3A1D19; --fout-tekst: #F0A79C; --waarschuwing-bg: #332A14; --waarschuwing-tekst: #E8C173; --info-bg: #14243A; --info-tekst: #8FBDF0; --melding-bg: #262B2C; --feedback-good-bg: #331515; --feedback-bad-bg: #3A1D19; --vlam-bg: #34211A; --goud-bg: #332C14; --level-bg: #241E3A; /* Op donker mag de heldenkleur zelf tekst zijn: contrast keert om. */ --rood-tekst: #FF7A70; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --card-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.5); } } /* ---------- Basis ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--inktzwart); background: var(--mistgrijs); -webkit-font-smoothing: antialiased; } /* Koppen zwaar en met krappe tracking: dat is het handschrift van dit merk. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-header); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: var(--inktzwart); } h1 { font-size: 44px; font-weight: 900; line-height: 1.05; } h2 { font-size: 34px; } h3 { font-size: 26px; } h4 { font-size: 20px; } /* Kleine labels in klein kapitaal, zoals de merkstijl voorschrijft. */ .label-klein { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steengrijs); font-weight: 600; } a { color: var(--rood-tekst); text-decoration: none; } a:hover { color: var(--bos-rood); } /* Eén woord in de kop rood: de techniek uit de merkstijl, afgeleid van het woordmerk (Examen wit + Flix rood). */ .rood-accent { color: var(--examenflix-rood); } @media (max-width: 768px) { h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 21px; } body { font-size: 14px; } }