/* Theorieplatform — design tokens (Swiss-calm). Bron: docs/architecture_and_design/01-design-system.md */ :root{ --brand:37 99 235; --brand-strong:29 78 216; --on-brand:255 255 255; --bg:226 232 240; --surface:255 255 255; --text:15 23 42; --muted:71 85 105; --border:203 213 225; --good:21 128 61; --bad:185 28 28; --radius:12px; --text-scale:1; --field:255 255 255; --field-border:203 213 225; --hover:15 23 42; /* Blauw als TEKST/KADER (los van --brand, dat voor gevulde vlakken blijft). In dark mode lichter zodat tekst/randen leesbaar blijven op donker canvas. */ --accent:37 99 235; /* Gemarkeerd-vlag: vol rood, leesbaar met witte tekst in beide modi (los van --bad, dat in cb-modus oranje wordt — markeren is geen goed/fout-signaal). */ --mark:220 38 38; } /* Dark mode (SET-05) */ [data-theme="dark"]{ --brand:37 99 235; --brand-strong:59 130 246; --on-brand:255 255 255; --bg:13 20 36; --surface:30 41 59; --text:226 232 240; --muted:148 163 184; --border:51 65 85; --good:74 222 128; --bad:248 113 113; --field:17 26 45; --field-border:71 85 105; --hover:226 232 240; --accent:96 165 250; } /* Kleurenblind-modus: feedback wordt blauw/oranje i.p.v. groen/rood (SET-04) */ [data-palette="cb"]{ --good:37 99 235; --bad:217 119 6; } /* De paginakleur staat op , niet alleen op : het paginafond hieronder ligt op z-index -1 en zou anders achter de body-achtergrond verdwijnen. */ html{font-size:calc(16px * var(--text-scale));background:rgb(var(--bg));} body{background:rgb(var(--bg));color:rgb(var(--text));font-family:'Source Sans 3',system-ui,sans-serif;margin:0;} /* Paginafond: hetzelfde beeld als de login, vast achter de content (zie _fond.html). `position:fixed` houdt het beeld staan bij het scrollen — meeschalen zou het op een lange pagina uitrekken. z-index -1 zet het onder alle content; body wordt daarvoor doorzichtig, de paginakleur komt dan van hierboven. */ body.heeft-fond{background:transparent;} .paginafond{position:fixed;inset:0;z-index:-1;pointer-events:none;} .paginafond img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;} /* Waas in de paginakleur: het beeld blijft herkenbaar, de tekst erop leesbaar. In dark mode is de illustratie licht en het canvas donker — daar mag de waas steviger, anders straalt het beeld door de kaarten heen. */ .paginafond::after{content:"";position:absolute;inset:0;background:rgb(var(--bg) / .45);} [data-theme="dark"] .paginafond::after{background:rgb(var(--bg) / .80);} /* Een partnerbeeld is meestal een foto: drukker dan onze illustratie en dus een onrustiger ondergrond. Dichtere waas houdt de kaarten daar rustig. */ .paginafond-partner::after{background:rgb(var(--bg) / .74);} [data-theme="dark"] .paginafond-partner::after{background:rgb(var(--bg) / .86);} h1,h2,h3,h4,.font-head,.nav,.btn{font-family:'Lexend',system-ui,sans-serif;} /* Dyslexie-modus (SET-03): font + ruimere spatiëring */ [data-font="dyslexic"] body, [data-font="dyslexic"] h1,[data-font="dyslexic"] h2,[data-font="dyslexic"] h3,[data-font="dyslexic"] h4, [data-font="dyslexic"] .font-head,[data-font="dyslexic"] .nav,[data-font="dyslexic"] .btn{ font-family:'Atkinson Hyperlegible','Source Sans 3',system-ui,sans-serif; letter-spacing:.03em; word-spacing:.08em; line-height:1.85; } .tnum{font-variant-numeric:tabular-nums;} .card{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--radius);} /* Zachte verhoging voor split-cards (zelfde zachtheid als de overlay-schaduw 0 8px 24px) */ .card-elevated{box-shadow:0 4px 16px rgb(15 23 42 / .08);} /* Knoppen. Vuistregel: een knop krijgt NOOIT `--surface` als vulling — dat is de kaartkleur zelf, waardoor de knop op een card onzichtbaar wordt en alleen de rand hem nog verraadt. Elke variant heeft een vulling die zowel van de kaart (wit) als van het paginafond (lichtgrijs) afwijkt. Rolverdeling: btn-primary — dé actie van de pagina (gevuld merk) btn-soft — dé actie van een kaart (zachte merktint, vult zich bij hover) btn-secondary — neutrale actie: annuleren, sluiten, vorige, paginatie btn-ghost — bijrol naast een zwaardere knop (lezen, annuleren in een form) */ /* `min-height` in plaats van een vaste hoogte: een lang label in een smalle kolom ("Naar de proefexamens" in de resultaat-aside) brak over twee regels en liep dan buiten het kader. Knoppen die op één regel passen zien er ongewijzigd uit; alleen langere labels groeien nu mee. */ .btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1rem;border-radius:10px;font-weight:600;font-size:.95rem;line-height:1.25;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease,color .12s ease;} /* Het icoon blijft op zijn plek staan als de tekst afbreekt. */ .btn > i,.btn > svg{flex:none;} .btn-primary{background:rgb(var(--brand));color:rgb(var(--on-brand));} .btn-primary:hover{background:rgb(var(--brand-strong));transform:translateY(-1px);box-shadow:0 6px 18px rgb(var(--brand) / .35);} /* Kaart-actie: zachte merkvulling in dezelfde beeldtaal als het nummerbadge op de kaart (brand/.1 + accent-tekst). Tekst in --brand-strong i.p.v. --brand: op deze lichte tint haalt dat ~6:1 contrast, --brand zelf blijft met ~4.6:1 net aan. */ .btn-soft{background:rgb(var(--brand) / .09);color:rgb(var(--brand-strong));border:1px solid rgb(var(--brand) / .22);} .btn-soft:hover{background:rgb(var(--brand));color:rgb(var(--on-brand));border-color:rgb(var(--brand));transform:translateY(-1px);box-shadow:0 6px 18px rgb(var(--brand) / .30);} [data-theme="dark"] .btn-soft{background:rgb(var(--brand) / .22);color:rgb(var(--accent));border-color:rgb(var(--brand) / .5);} [data-theme="dark"] .btn-soft:hover{color:rgb(var(--on-brand));} /* Neutraal grijs uit --text: die variabele kantelt zelf mee met de modus (donker in light, licht in dark), dus één formule geeft in beide modi een vlak dat van de ondergrond afsteekt. */ .btn-secondary{background:rgb(var(--text) / .06);color:rgb(var(--text));border:1px solid rgb(var(--border));} .btn-secondary:hover{background:rgb(var(--text) / .10);border-color:rgb(var(--accent));color:rgb(var(--accent));transform:translateY(-1px);box-shadow:0 4px 12px rgb(15 23 42 / .10);} [data-theme="dark"] .btn-secondary{background:rgb(var(--text) / .10);} [data-theme="dark"] .btn-secondary:hover{background:rgb(var(--text) / .16);box-shadow:0 4px 12px rgb(0 0 0 / .45);} /* Afgerond/voldoende-geoefend (groen) — zelfde gedrag als btn-primary */ .btn-success{background:rgb(var(--good));color:#fff;border:1px solid rgb(var(--good));} .btn-success:hover{filter:brightness(.94);transform:translateY(-1px);box-shadow:0 6px 18px rgb(var(--good) / .35);} .btn:active{transform:translateY(0);} /* Ghost = een knop zónder eigen vlak. Die leest alléén als knop doordat er een zwaardere knop naast staat: die buur levert de affordance. Zet een ghost dus nooit alleen, gecentreerd of over de volle breedte neer — dan leest hij als bijschrift, niet als iets klikbaars. In dat geval hoort btn-secondary. */ .btn-ghost{background:transparent;color:rgb(var(--muted));font-weight:500;} .btn-ghost:hover{background:rgb(var(--brand) / .08);color:rgb(var(--brand-strong));} /* Gekleurde ghosts (admin: verwijderen/deactiveren) houden hun signaalkleur vast — expliciet, want de hover hierboven zou die anders overschrijven. */ .btn-ghost.text-bad:hover{background:rgb(var(--bad) / .08);color:rgb(var(--bad));} .btn-ghost.text-good:hover{background:rgb(var(--good) / .08);color:rgb(var(--good));} /* Uitgeschakeld: zonder deze regel is een `disabled` knop niet van een actieve te onderscheiden (bv. "Vorige" bij de eerste vraag). pointer-events houdt ook de hover-lift en -gloed tegen. */ .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none;} /* Ingedrukte toggle (student_gapmatch.js zet aria-pressed) — die stond tot nu toe alleen in de toegankelijkheidsboom, zonder zichtbaar verschil. */ .btn[aria-pressed="true"]{background:rgb(var(--brand));color:rgb(var(--on-brand));border-color:rgb(var(--brand));} .focusable:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;} /* Kaart die als geheel één actie draagt: de hele kaart is het doelwit, dus de hover zit op de kaart en de knop erin licht mee op — ook als de muis nog niet op de knop staat. De laatste regel geeft de knop zelf een hogere specificiteit terug, anders zou `.card-actie:hover .btn-soft` (0,3,0) de hover van de knop (0,2,0) opslokken. */ .card-actie{transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;} .card-actie:hover{border-color:rgb(var(--brand) / .35);box-shadow:0 8px 24px rgb(15 23 42 / .10);transform:translateY(-2px);} [data-theme="dark"] .card-actie:hover{box-shadow:0 8px 24px rgb(0 0 0 / .45);} .card-actie:hover .btn-soft{background:rgb(var(--brand) / .18);border-color:rgb(var(--brand) / .4);} .card-actie:hover .btn-primary{box-shadow:0 6px 18px rgb(var(--brand) / .35);} .card-actie .btn-soft:hover{background:rgb(var(--brand));color:rgb(var(--on-brand));border-color:rgb(var(--brand));} /* Bewegingsvoorkeur (WCAG 2.3.3): alle knop- en kaart-lifts uit, kleur blijft. */ @media (prefers-reduced-motion:reduce){ .btn,.card-actie{transition:none;} .btn:hover,.card-actie:hover{transform:none;} } .progress{height:8px;background:rgb(var(--border));border-radius:999px;overflow:hidden;} .progress>span{display:block;height:100%;background:rgb(var(--brand));} /* Invoervelden & pulldowns — verdiepte vlakken, los van cards (SET-05) */ input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.field{ background:rgb(var(--field));border:1px solid rgb(var(--field-border)); color:rgb(var(--text));border-radius:10px; } input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus,.field:focus{ outline:none;border-color:rgb(var(--accent));box-shadow:0 0 0 3px rgb(var(--accent) / .25); } select option{background:rgb(var(--surface));color:rgb(var(--text));} ::placeholder{color:rgb(var(--muted));opacity:1;} /* Zachte hover voor nav/menu-items (licht oplichten i.p.v. verdonkeren) */ .hover-soft:hover{background:rgb(var(--hover) / .08);} /* Antwoordopties */ .opt{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.9rem 1rem;border:1px solid rgb(var(--border));border-radius:10px;background:rgb(var(--surface));color:rgb(var(--text));cursor:pointer;font-size:1rem;} .opt:hover{border-color:rgb(var(--accent));} /* Letter A/B/C met dunne verticale scheidslijn naar de antwoordtekst (CBR-stijl) */ .opt-letter{flex:none;width:1.25rem;text-align:center;font-family:'Lexend',system-ui,sans-serif;font-weight:600;color:rgb(var(--muted));border-right:1px solid rgb(var(--border));padding-right:.75rem;margin-right:.25rem;} /* Gevulde merkkleur-balk bij geselecteerde optie (zonder JS, via :has()) */ .opt:has(input:checked){background:rgb(var(--brand));border-color:rgb(var(--brand));color:rgb(var(--on-brand));} .opt:has(input:checked) .opt-letter{color:rgb(var(--on-brand));border-color:rgb(var(--on-brand) / .4);} .opt-selected{border-color:rgb(var(--accent));box-shadow:inset 0 0 0 1px rgb(var(--accent));} .opt-correct{border-color:rgb(var(--good));background:rgb(var(--good) / .12);color:rgb(var(--good));font-weight:600;} .opt-wrong{border-color:rgb(var(--bad));background:rgb(var(--bad) / .08);color:rgb(var(--bad));} .icon-toolbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:rgb(var(--muted));cursor:pointer;background:transparent;border:0;} .icon-toolbtn:hover{background:rgb(var(--hover) / .08);color:rgb(var(--text));} /* Actieve-staat voor de audio-voorleesknop (student_audio.js) — subtiele merkkleur i.p.v. een iconwissel-herrender, twee classes = hogere specificiteit dan :hover. */ .icon-toolbtn.is-playing{background:rgb(var(--brand) / .14);color:rgb(var(--brand));} /* Sleepgreep + drag-state voor de volgorde-vraag (student_volgorde.js). Progressive enhancement naast de ▲▼-knoppen — die blijven het WCAG 2.5.7-alternatief (toetsenbord/screenreader). touch-action:none voorkomt dat slepen op touch ook de pagina laat meescrollen. */ .drag-handle{cursor:grab;touch-action:none;} .drag-handle:active{cursor:grabbing;} [data-volgorde-lijst] .opt.is-dragging{position:relative;z-index:10;user-select:none;cursor:grabbing;box-shadow:0 8px 20px rgb(15 23 42 / .18);opacity:.85;} /* Menu's (profielmenu / mobiel menu): verborgen tot .open via header.js */ [data-menu]{display:none;} [data-menu].open{display:block;} /* Leerstof-weergave: typografie + NTC-blokken (begrip/voorbeeld/belangrijk). Content is bij de sync met nh3 gesaneerd tot deze tags/classes. */ .leerstof-prose{line-height:1.6;} .leerstof-prose p{margin:0 0 .75rem;} .leerstof-prose h2,.leerstof-prose h3,.leerstof-prose h4{font-family:'Lexend',system-ui,sans-serif;font-weight:600;margin:1rem 0 .5rem;line-height:1.3;} .leerstof-prose ul,.leerstof-prose ol{margin:0 0 .75rem 1.25rem;} .leerstof-prose li{margin:.25rem 0;} .leerstof-prose cite{font-style:italic;color:rgb(var(--muted));} .leerstof-prose table{border-collapse:collapse;width:100%;margin:.75rem 0;display:block;overflow-x:auto;} .leerstof-prose th,.leerstof-prose td{border:1px solid rgb(var(--border));padding:.5rem .75rem;text-align:left;} .leerstof-prose th{background:rgb(var(--brand) / .06);} .leerstof-prose .begrip,.leerstof-prose .voorbeeld,.leerstof-prose .belangrijk{border-radius:10px;padding:.85rem 1rem;margin:.75rem 0;border-left:4px solid;} .leerstof-prose .begrip>:last-child,.leerstof-prose .voorbeeld>:last-child,.leerstof-prose .belangrijk>:last-child{margin-bottom:0;} .leerstof-prose .belangrijk{background:rgb(var(--bad) / .07);border-color:rgb(var(--bad));} .leerstof-prose .begrip{background:rgb(var(--accent) / .07);border-color:rgb(var(--accent));} .leerstof-prose .voorbeeld{background:rgb(var(--good) / .07);border-color:rgb(var(--good));} .leerstof-prose .borden-strook{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;} .leerstof-prose .borden-strook-titel{font-weight:600;width:100%;} /* Voorkeuren-formulier (settings/_prefs_form.html): segmented control, toggle-switch, rij-indeling, icoon-badge en opslaan-statuskleuren. Herbruikt op de instellingenpagina én in de examen-instellingen-modal. */ .seg{display:inline-flex;border:1px solid rgb(var(--border));border-radius:10px;overflow:hidden;} .seg label{position:relative;cursor:pointer;font-family:'Lexend';} .seg input{position:absolute;opacity:0;width:0;height:0;} .seg span{display:block;padding:.5rem .9rem;font-size:.875rem;color:rgb(var(--muted));} .seg input:checked + span{background:rgb(var(--brand));color:#fff;} /* Link-variant: de taalkiezer op het loginscherm is geen formulierveld maar een rij links (nog geen sessie om in op te slaan). Zelfde container, zelfde maten. */ .seg a{display:block;padding:.4rem .7rem;font-size:.8125rem;color:rgb(var(--muted));font-family:'Lexend';text-decoration:none;} .seg a:hover{background:rgb(var(--brand) / .1);color:rgb(var(--brand));} .seg a[aria-current="true"]{background:rgb(var(--brand));color:#fff;} .row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgb(var(--border));} .row:last-child{border-bottom:0;} .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:rgb(var(--accent) / .14);color:rgb(var(--accent));flex-shrink:0;} .switch{position:relative;display:inline-block;} .switch input{position:absolute;opacity:0;width:0;height:0;} .switch span{width:46px;height:26px;border-radius:999px;background:rgb(var(--border));position:relative;display:inline-block;cursor:pointer;transition:.15s;} .switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:#fff;transition:.15s;} .switch input:checked + span{background:rgb(var(--brand));} .switch input:checked + span::after{left:23px;} #prefs-status[data-state="saved"]{color:rgb(var(--good));} #prefs-status[data-state="error"]{color:rgb(var(--bad));} /* ══════════════════════════════════════════════════════════════════════════════ CAS — de nieuwe CBR-examenschil (EXAMEN_LAYOUT=cas) De runner bootst de examenomgeving na: een kandidaat die op de examenlocatie een ander scherm aantreft dan waarop hij geoefend heeft, raakt gestrest. De kleuren hieronder zijn gesampled uit de CBR-instructieanimaties; de bron is fotomateriaal van een monitor, dus ze zijn afgerond naar nette waarden. Specificatie + referentiebeelden: docs/architecture_and_design/10-examenlayout-cbr.md Alles hangt aan `body[data-runner="cas"]`, zodat de schil alleen in de runner geldt en de rest van het platform de eigen huisstijl houdt. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --cas-balk:74 133 232; /* de blauwe boven- en onderbalk */ --cas-actie:47 56 158; /* de donkere pil-knoppen VORIGE / VOLGENDE */ --cas-selectie:61 130 232; /* een gekozen antwoordrij */ --cas-vlak:255 255 255; /* het witte werkvlak */ --cas-lijn:214 220 228; /* de dunne scheidingslijnen */ --cas-token:224 156 47; /* de goudkleurige sleep-tokens */ } /* Dark mode bestaat niet op de CBR-examenlocatie, maar wél bij ons (SET-01). De herkenning zit in de indeling, de woorden en de posities — niet in de exacte helderheid. We dempen daarom alleen: de balken blijven blauw, het werkvlak volgt het thema, en tekst blijft leesbaar. */ [data-theme="dark"]{ --cas-balk:47 92 175; --cas-actie:36 44 130; --cas-selectie:40 100 190; --cas-vlak:22 30 45; --cas-lijn:52 64 84; } /* ── Balken ── */ .cas-balk{background:rgb(var(--cas-balk));color:#fff;} .cas-balk .icon-toolbtn{color:#fff;} .cas-balk .icon-toolbtn:hover{background:rgb(255 255 255 / .16);color:#fff;} /* De "Vraag N"-tab hangt aan de onderkant van de bovenbalk en loopt er half in. */ .cas-tab{background:rgb(var(--cas-vlak));color:rgb(var(--text));border-radius:6px 6px 0 0;padding:.25rem 1rem;font-weight:600;display:inline-block;} /* Het werkvlak is bewust vlak wit: op de examenlocatie ligt er geen kaart-op-kaart. */ body[data-runner="cas"]{background:rgb(var(--cas-vlak));} body[data-runner="cas"] .cas-vlak{background:rgb(var(--cas-vlak));} body[data-runner="cas"] .cas-scheiding{border-left:1px solid rgb(var(--cas-lijn));} /* ── Pil-knoppen VORIGE / VOLGENDE / INLEVEREN ── */ .cas-pil{background:rgb(var(--cas-actie));color:#fff;border-radius:999px;height:34px;padding:0 1.25rem; display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;border:0;cursor:pointer;transition:filter .12s ease;} .cas-pil:hover{filter:brightness(1.15);} .cas-pil:disabled,.cas-pil[aria-disabled="true"]{opacity:.4;pointer-events:none;} /* De teller hangt als klein vaantje onder de onderbalk. */ .cas-teller{background:rgb(var(--cas-actie));color:#fff;font-size:.7rem;font-weight:700;padding:.1rem .6rem;border-radius:0 0 4px 4px;} /* ── Antwoordopties: rijen met een dunne onderrand; gekozen = volle blauwe balk ── Deze regels overschrijven de platform-`.opt` met hogere specificiteit (body[data-runner] .opt = 0,2,1 tegen .opt = 0,1,0) — geen !important nodig. */ body[data-runner="cas"] .opt{border:0;border-bottom:1px solid rgb(var(--cas-lijn));border-radius:4px; background:transparent;padding:.85rem 1rem;gap:1rem;} body[data-runner="cas"] .opt:hover{background:rgb(var(--cas-selectie) / .07);border-color:rgb(var(--cas-lijn));} body[data-runner="cas"] .opt-letter{border-right:0;color:rgb(var(--muted));font-size:.8rem;width:1rem;padding-right:0;margin-right:.25rem;} body[data-runner="cas"] .opt:has(input:checked){background:rgb(var(--cas-selectie));color:#fff;border-color:transparent;} body[data-runner="cas"] .opt:has(input:checked) .opt-letter{color:#fff;} /* Bij oefenen blijft de nakijk-kleur leidend: goed/fout moet zwaarder wegen dan de blauwe selectie, anders leest een fout antwoord alsnog als "gekozen". */ body[data-runner="cas"] .opt-correct{background:rgb(var(--good) / .12);color:rgb(var(--good));border-color:rgb(var(--good));} body[data-runner="cas"] .opt-wrong{background:rgb(var(--bad) / .08);color:rgb(var(--bad));border-color:rgb(var(--bad));} /* ── Vraaglade: uitschuivende strip met genummerde vakjes ── */ .cas-lade{background:rgb(var(--cas-actie));} .cas-ladevak{min-width:36px;height:30px;display:grid;place-items:center;border-radius:4px; background:rgb(255 255 255 / .12);color:#fff;font-size:.75rem;font-weight:600;border:0;cursor:pointer;} .cas-ladevak:hover{background:rgb(255 255 255 / .28);} .cas-ladevak[data-huidig]{background:#fff;color:rgb(var(--cas-actie));} /* ── Roostervakjes in de overzichtsmodal ── Vier statussen, in de volgorde en met de woorden van het CBR: Geselecteerd (de vraag waar je nu bent) · Onbeantwoord · Beantwoord · Bladwijzer. */ .cas-vak{position:relative;height:34px;display:grid;place-items:center;border-radius:4px;font-size:.78rem; font-weight:600;border:1px solid rgb(var(--cas-lijn));background:rgb(var(--cas-vlak));color:rgb(var(--muted));cursor:pointer;} .cas-vak[data-status="beantwoord"]{background:rgb(var(--cas-balk) / .55);border-color:transparent;color:#fff;} .cas-vak[data-status="geselecteerd"]{background:rgb(var(--cas-actie));border-color:transparent;color:#fff;} .cas-vak[data-bladwijzer]::after{content:"";position:absolute;top:2px;right:3px;width:6px;height:9px; background:rgb(var(--cas-actie));clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);} .cas-vak[data-status="geselecteerd"][data-bladwijzer]::after, .cas-vak[data-status="beantwoord"][data-bladwijzer]::after{background:#fff;} /* ── CAS-werkvlak: vlak, niet kaart-op-kaart ────────────────────────────────── Op de examenlocatie ligt de vraag rechtstreeks op het witte scherm. Onze runner-macro's zetten `card card-elevated` (dat is de eigen huisstijl en de klassieke schil); in CAS strippen we dat weg. Specificiteit via het id (#examenform .card = 1,1,1) is ruim genoeg — geen !important nodig. */ body[data-runner="cas"] #examenform .card, body[data-runner="cas"] #oefenform .card, body[data-runner="cas"] .runner-grid .card{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0;} /* Het werkvlak begint links op ~30% van de breedte en heeft rechts een dunne scheidingslijn — ook als er geen tweede kolom is (zie referentie cas-11/12). */ body[data-runner="cas"] .runner-grid{max-width:none;margin-left:0;margin-right:0; padding-left:clamp(0rem, 22vw, 16rem);border-right:1px solid rgb(var(--cas-lijn));padding-right:1.5rem;} @media (max-width:1023px){ /* Telefoon en kleine tablet: geen inspringing en geen scheidingslijn — daar stapelen we (zie 10-examenlayout-cbr.md §Mobiel). De woorden, de volgorde en het gedrag blijven gelijk; alleen de kolommen niet. */ body[data-runner="cas"] .runner-grid{padding-left:0;padding-right:0;border-right:0;} } /* Met beeld: de scheiding loopt tussen de twee kolommen door. */ body[data-runner="cas"] .runner-grid.lg\:grid-cols-2{padding-left:0;} @media (min-width:1024px){ body[data-runner="cas"] .runner-grid.lg\:grid-cols-2 > :first-child{border-right:1px solid rgb(var(--cas-lijn));padding-right:2rem;} } /* ── CAS op de telefoon ─────────────────────────────────────────────────────── Het CBR-examen draait op een vast breedbeeld-touchscreen; wij oefenen ook op een telefoon. De woorden, de volgorde en het gedrag blijven identiek — alleen de maatvoering krimpt, zodat de hele onderbalk past en niets wegvalt. Zie 10-examenlayout-cbr.md §Mobiel. */ @media (max-width:480px){ .cas-pil{padding:0 .7rem;font-size:.62rem;height:30px;gap:.25rem;letter-spacing:.04em;} .cas-pil i{width:.85rem;height:.85rem;} } /* ── Sleep-tokens (gap_match) ───────────────────────────────────────────────── student_gapmatch.js zet de vulling inline; de kleur komt daarom uit deze variabele. Klassiek gebruikt de merkkleur, CAS het goud van het CBR. */ :root{--sleep-token:var(--brand);} body[data-runner="cas"]{--sleep-token:var(--cas-token);} /* De tokens liggen bij het CBR in een lade ónder het beeld — een eigen strookje, zodat duidelijk is dat je ze daaruit oppakt. */ body[data-runner="cas"] [data-gapmatch-cirkels]:not(:empty){ background:rgb(var(--cas-lijn) / .35);border-radius:8px;padding:.6rem .75rem;} /* ── Aangewezen plek (aanwijs / hotspot) ────────────────────────────────────── Het CBR kleurt in CAS de aangeklikte zone op. Wij kúnnen dat niet exact nabootsen: ons antwoordmodel kent alleen de JUISTE zones (nakijk_service. _juiste_zones), geen neutrale klikgebieden — die inkleuren zou het antwoord verklappen. Daarom een gevulde selectievlek in de CAS-kleur op de klikplek: dezelfde beeldtaal ("hier heb ik gekozen"), zonder iets weg te geven. AFGELEID — zie 10-examenlayout-cbr.md §Afgeleide schermen. */ body[data-runner="cas"] [data-beeld-marker], body[data-runner="cas"] [data-beeld-markers] [data-m]{ width:2.25rem;height:2.25rem;border-radius:6px; background:rgb(var(--cas-selectie) / .45);box-shadow:0 0 0 2px rgb(var(--cas-selectie));} /* ── Rangschikvraag in CAS: twee panelen ────────────────────────────────────── Links de bron, rechts genummerde doelvakjes (referentie-cbr/cas-09). Een leeg vakje toont zijn nummer; zodra er een item in ligt verdwijnt dat nummer naar de zijkant, zodat de volgorde afleesbaar blijft. */ .vc-item{touch-action:none;display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:6px; background:rgb(var(--cas-vlak));border:1px solid rgb(var(--cas-lijn));color:rgb(var(--text)); font-size:.95rem;cursor:grab;user-select:none;} .vc-item:hover{border-color:rgb(var(--cas-selectie));} /* Tijdens het slepen volgt het item de cursor (JS zet position/left/top). Het blijft volledig zichtbaar — half doorzichtig maakte juist onduidelijk wat je vasthebt. */ .vc-item.is-dragging{cursor:grabbing;box-shadow:0 8px 24px rgb(15 23 42 / .25); border-color:rgb(var(--cas-selectie));} .vc-slot{position:relative;min-height:2.9rem;display:flex;align-items:center;border-radius:6px; border:1px dashed rgb(var(--cas-lijn));background:rgb(var(--cas-lijn) / .18);} .vc-slot.vc-over,[data-vc-bron].vc-over{border-color:rgb(var(--cas-selectie));background:rgb(var(--cas-selectie) / .12);} .vc-slot > .vc-item{flex:1;margin:0;border-style:solid;} .vc-nr{position:absolute;left:.85rem;color:rgb(var(--muted));font-weight:600;pointer-events:none;} /* Zodra het vakje gevuld is, schuift het nummer naar de linkerrand van het item. */ .vc-slot:has(.vc-item) .vc-nr{position:static;padding:0 .5rem 0 .25rem;color:rgb(var(--cas-actie));} .vc-slot:has(.vc-item){border-style:solid;background:transparent;} @media (prefers-reduced-motion:reduce){.vc-item{transition:none;}} /* ══════════════════════════════════════════════════════════════════════════════ KLASSIEK — de vertrouwde examenlayout (EXAMEN_LAYOUT=klassiek) Nagebouwd naar examentheorie.nl, de omgeving die de vórige CBR-look aanhoudt. Kleuren gesampled uit de screenshots in `Examenthorie.pptx` (schone screenshots, geen fotomateriaal — dus exact overgenomen). Specificatie: docs/architecture_and_design/10-examenlayout-cbr.md §Klassiek Alles hangt aan `body[data-runner="klassiek"]`; buiten de runner houdt het platform zijn eigen huisstijl. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --lens-balk:42 99 141; /* de blauwe boven- en onderbalk */ --lens-balk-licht:66 139 202; /* de icoon- en navigatievakken */ --lens-balk-hover:106 163 213; /* diezelfde vakken onder de muis */ --lens-tijdbalk:85 137 197; /* de voortgangsbalk onder de bovenbalk */ --lens-vlak:240 240 240; /* tekstballon en antwoordkaarten */ --lens-canvas:252 252 252; /* het werkvlak */ --lens-goed:143 169 129; /* juist antwoord */ --lens-fout:204 86 63; /* gegeven-maar-fout antwoord */ --lens-token:242 169 59; /* de oranje sleepcirkels */ --lens-markering:210 184 147; /* de gemarkeerde vraagtekst in de feedback */ } [data-theme="dark"]{ --lens-vlak:38 48 66; --lens-canvas:22 30 45; } /* ── Balken ── */ .lens-balk{background:rgb(var(--lens-balk));color:#fff;} .lens-tijd{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;} .lens-tijd strong{font-size:1.35rem;font-weight:600;text-transform:none;letter-spacing:0;} /* De gereedschapsknoppen zitten in vakken die de volle balkhoogte vullen, met een dunne scheiding ertussen — geen losse ronde knoppen. */ .lens-vak{width:64px;align-self:stretch;display:grid;place-items:center;color:#fff; background:rgb(var(--lens-balk-licht));border-left:1px solid rgb(var(--lens-balk) / .55); border:0;border-left:1px solid rgb(255 255 255 / .18);cursor:pointer;} .lens-vak:hover{background:rgb(var(--lens-balk-hover));} /* Een gemarkeerde vraag: alléén het vlag-icoon kleurt oranje, het vak zelf blijft blauw (geverifieerd op examentheorie.nl). Het icoon is daar massief gevuld; lucide levert lijn-iconen, dus `fill` erbij — CSS wint van het `fill="none"` attribuut op de SVG. */ .lens-vak[data-gemarkeerd] i, .lens-vak[data-gemarkeerd] svg{color:rgb(var(--lens-token));fill:rgb(var(--lens-token));} /* Vorige/Volgende zijn eveneens vakken, maar met tekst. */ .lens-nav{align-self:stretch;display:inline-flex;align-items:center;gap:.5rem;padding:0 1.5rem; background:rgb(var(--lens-balk-licht));color:#fff;font-size:.95rem;border:0;cursor:pointer;} .lens-nav:hover{background:rgb(var(--lens-balk-hover));} .lens-nav:disabled{opacity:.45;pointer-events:none;} /* ── Werkvlak ── */ body[data-runner="klassiek"]{background:rgb(var(--lens-canvas));} /* Geen kaarten: de vraag ligt rechtstreeks op het vlak, net als op examentheorie.nl. */ body[data-runner="klassiek"] #examenform .card, body[data-runner="klassiek"] #oefenform .card, body[data-runner="klassiek"] .runner-grid .card{background:transparent;border:0;box-shadow:none;padding:0;} /* ── Vraagtekst als tekstballon met tuit ── De kop is bij ons een

; hier krijgt hij het grijze ballonvlak en het pijltje linksonder dat examentheorie.nl gebruikt. / body[data-runner="klassiek"] .runner-grid h1{ position:relative;background:rgb(var(--lens-vlak));border:1px solid rgb(var(--lens-vlak)); border-radius:6px;padding:1rem 1.25rem;font-family:inherit;font-weight:400;font-size:1.05rem; color:rgb(var(--text));} body[data-runner="klassiek"] .runner-grid h1::after{ content:"";position:absolute;left:1.75rem;top:100%;width:0;height:0; border-left:10px solid transparent;border-right:10px solid transparent; border-top:12px solid rgb(var(--lens-vlak));} / ── Antwoordopties: grijze kaarten, keuzerondje ERBUITEN ── / body[data-runner="klassiek"] .opt{background:rgb(var(--lens-vlak));border:1px solid rgb(var(--lens-vlak)); border-radius:6px;padding:.85rem 1.1rem;gap:.75rem;} body[data-runner="klassiek"] .opt:hover{border-color:rgb(var(--lens-balk-licht));} / Het rondje staat links buiten de kaart; de letter tonen we niet — die kent examentheorie.nl niet. / / Het keuzerondje staat links búiten de kaart, met ruimte ertussen — het plakte tegen de kaartrand aan. / body[data-runner="klassiek"] .opt input{margin-left:-2.6rem;position:absolute;} body[data-runner="klassiek"] .opt{position:relative;} / Alleen inspringen als er ook echt een keuzerondje links staat — een volgorde-rij of een feedbackkaart heeft er geen, en zou anders zonder reden verspringen ten opzichte van de vraag erboven. / body[data-runner="klassiek"] .opt:has(input){margin-left:2.6rem;} body[data-runner="klassiek"] .opt-letter{display:none;} body[data-runner="klassiek"] .opt:has(input:checked){background:rgb(var(--lens-markering) / .45); border-color:rgb(var(--lens-markering));color:rgb(var(--text));} body[data-runner="klassiek"] .opt-correct{background:rgb(var(--lens-goed));border-color:rgb(var(--lens-goed));color:#fff;font-weight:600;} body[data-runner="klassiek"] .opt-wrong{background:rgb(var(--lens-fout));border-color:rgb(var(--lens-fout));color:#fff;} / ── Instructieregel boven een beeldinteractie: cursief, niet gedempt ── / body[data-runner="klassiek"] .runner-instructie{font-style:italic;color:rgb(var(--text)); font-size:1rem;margin-bottom:.6rem;} / ── Sleepcirkels in de klassieke schil zijn oranje ── / body[data-runner="klassiek"]{--sleep-token:var(--lens-token);} / ── Klassiek: hokjes in het vraagoverzicht ── Vier statussen met de woorden van examentheorie.nl: onbeantwoord, beantwoord, niet oproepbaar (de informatieschermen) en gemarkeerd (oranje ster). / .lens-hokje{position:relative;height:44px;display:grid;place-items:center;border-radius:4px; border:1px solid rgb(var(--border));background:rgb(var(--lens-canvas));color:rgb(var(--muted)); font-size:.95rem;cursor:pointer;} .lens-hokje[data-status="beantwoord"]{background:rgb(var(--lens-balk));border-color:transparent;color:#fff;} .lens-hokje[data-status="huidig"]{border-color:rgb(var(--lens-balk-licht));box-shadow:inset 0 0 0 2px rgb(var(--lens-balk-licht));color:rgb(var(--text));} .lens-hokje[data-status="niet-oproepbaar"]{background:rgb(var(--lens-vlak));color:rgb(var(--muted));cursor:default;} .lens-hokje[data-gemarkeerd]::after{content:"★";position:absolute;top:-6px;right:-2px; color:rgb(var(--lens-token));font-size:1rem;line-height:1;} / ── Klassiek: de Ja/Nee-knoppen in de "Pas op!"-vensters ── Op examentheorie.nl is "Nee" de nadrukkelijke knop: doorgaan met de toets is de veilige keuze, afbreken de uitzondering. Die nadruk nemen we over. / .lens-keuze{height:52px;display:inline-flex;align-items:center;justify-content:center; background:rgb(var(--lens-vlak));color:rgb(var(--text));border:0;border-radius:4px; font-size:1.05rem;cursor:pointer;} .lens-keuze:hover{filter:brightness(.96);} .lens-keuze-nadruk{background:rgb(var(--lens-token));color:#fff;} / Klassiek lijnt links uit: op examentheorie.nl begint de vraag aan de linkerkant van het werkvlak, niet in het midden. / body[data-runner="klassiek"] .runner-grid{max-width:none;margin-left:0;margin-right:0;} body[data-runner="klassiek"] .runner-grid:not(.lg\:grid-cols-2){max-width:46rem;} / De navigatieknoppen staan er in hoofdletters. / .lens-nav span{text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;} / Klassiek: een beeld-INTERACTIE staat in één kolom — vraag, dan de cursieve instructie, dan het beeld (zie referentie-cbr/klassiek-). Een passieve afbeelding houdt wél twee kolommen, net als op examentheorie.nl. De DOM-volgorde zet het beeld eerst (die draagt de hidden coord-input binnen het form), dus hier draaien we de weergave om in plaats van de markup. / /* Geldt op élk formaat: ook op de telefoon staat de vraag boven het beeld. `align-items:stretch` overschrijft de `items-start` uit de grid-klasse — in een kolom zou die de tekstballon op zijn inhoudsbreedte laten staan, terwijl examentheorie.nl hem over de volle kolombreedte trekt. / body[data-runner="klassiek"] .runner-grid--interactie{display:flex;flex-direction:column; align-items:stretch;max-width:46rem;} body[data-runner="klassiek"] .runner-grid--interactie > :first-child{order:2;} body[data-runner="klassiek"] .runner-grid--interactie > :last-child{order:1;} / ── Geen tekstselectie in de runner ────────────────────────────────────────── Het CBR-examen draait op een TOUCHSCREEN, en daar is dit geen detail: zonder deze regel selecteer je tekst zodra je op een antwoord tikt of een sleepvraag doet — een blauwe vlek over je vraagtekst, midden in een examen. examentheorie doet exact hetzelfde (`.itec {user-select:none}` met een uitzondering voor invoervelden), en dat is de reden om het over te nemen. Dat het meteen het overtypen van vragen lastiger maakt is meegenomen, maar geen serieuze bescherming: wie de content wil hebben, gebruikt geen muis. De echte rem daarop hoort op de server (zie docs). Invoervelden HOUDEN selectie — anders kun je je eigen invulantwoord niet meer corrigeren. `.selectable` is de ontsnapping voor content die je wél moet kunnen kopiëren. / body[data-runner]{-webkit-user-select:none;user-select:none;} body[data-runner] input, body[data-runner] textarea, body[data-runner] select, body[data-runner] .selectable{-webkit-user-select:text;user-select:text;} /* iOS: lang indrukken op een foto opent "Afbeelding bewaren". Dat is de mobiele rechtermuisknop, en het onderbreekt bovendien een sleepvraag. / body[data-runner] img{-webkit-touch-callout:none;-webkit-user-drag:none;} / ── Beeldgrens: een visual nooit boven zijn logische maat opschalen ────────── Het CBR-afnamesysteem zet `max-width` op de logische breedte van de visual en schaalt hem daarboven niet op — een beeld staat er dus bij iedereen even groot, ongeacht schermbreedte. Wij deden dat niet: het beeld vulde altijd de kolom, waardoor het op een breed scherm groter werd dan op de examenlocatie. `--beeld-breedte` wordt per vraag gezet (zie `beeldgrens()` in runner/_interacties.html) uit `afbeelding_breedte`, de logische maat uit de content-API. Ontbreekt die (oude snapshot, bestand zonder Media-rij), dan valt `max-width` terug op 100% en is het gedrag exact als voorheen. `width:fit-content` houdt de figure om de afbeelding heen sluiten, zodat de rand en de absoluut geplaatste hotspot-markers op het beeld blijven vallen en niet op lege ruimte ernaast. / / `content-box`: de grens slaat op de AFBEELDING, niet op de rand eromheen. Met de globale `border-box` zou onze 1px-rand van een 700px-beeld 698px maken — klein, maar de hele grens bestaat juist om de maat exact gelijk te houden. / / Bewust GEEN `margin-inline:auto`: de uitlijning van het beeld is een keuze van de schil (klassiek lijnt links uit, zie `.runner-grid` hierboven) en die verandert hier niet mee. Deze regel begrenst alleen de maat. / .runner-beeld{display:block;box-sizing:content-box;width:fit-content; max-width:var(--beeld-breedte, 100%);} .runner-beeld img{display:block;max-width:100%;} / ── Feedbackbanner (alleen bij oefenen) ────────────────────────────────────── Onze eigen stijl kleurt het hele paneel groen of rood. Dat is de standaard; `runner-feedback--goed/--fout` zetten de kleur. / / De informatieve variant (een vraagtype dat we nog niet nakijken) gebruikt neutrale kleuren — géén `--brand`/`--accent`. Die twee overschrijft een partnerskin, en de runner moet er bij elke partner hetzelfde uitzien. / .runner-feedback{background:rgb(var(--text) / .05);border:1px solid rgb(var(--border));} .runner-feedback--info .runner-feedback-kop{color:rgb(var(--text));} .runner-feedback--goed{background:rgb(var(--good) / .1);border-color:rgb(var(--good) / .35);} .runner-feedback--fout{background:rgb(var(--bad) / .1);border-color:rgb(var(--bad) / .35);} .runner-feedback--goed .runner-feedback-kop{color:rgb(var(--good));} .runner-feedback--fout .runner-feedback-kop{color:rgb(var(--bad));} / examentheorie.nl doet het anders: een neutraal grijs paneel, alleen de kop in kleur (met een duim-icoon), en de uitlegtekst met een oranje markering eroverheen — alsof iemand er met een markeerstift langs is gegaan. / body[data-runner="klassiek"] .runner-feedback{background:rgb(var(--lens-vlak));border:0;border-radius:6px;} body[data-runner="klassiek"] .runner-feedback--goed .runner-feedback-kop{color:rgb(var(--lens-goed));} body[data-runner="klassiek"] .runner-feedback--fout .runner-feedback-kop{color:rgb(var(--lens-fout));} body[data-runner="klassiek"] .runner-feedback-kop{font-size:1.4rem;font-weight:400;} / De duim is bij examentheorie.nl een massief blok, geen lijntekening. / body[data-runner="klassiek"] .runner-feedback-kop i, body[data-runner="klassiek"] .runner-feedback-kop svg{fill:currentColor;stroke-width:1;width:1.75rem;height:1.75rem;} body[data-runner="klassiek"] .runner-feedback-uitleg{background:rgb(var(--lens-markering) / .6); box-decoration-break:clone;-webkit-box-decoration-break:clone;display:inline;line-height:1.8;} / ── Invulvraag in de klassieke schil ── Eén breed vlak over de kolombreedte: het antwoord links, de eenheid rechts uitgelijnd (bv. "1,20 meter"). / .invulveld{display:flex;align-items:center;gap:1rem;width:100%; background:rgb(var(--lens-vlak, var(--surface)));border:1px solid rgb(var(--lens-vlak, var(--border))); border-radius:6px;padding:.9rem 1.1rem;cursor:text;} / De globale invoerstijl (regel ~132) is specifieker dan een losse klasse, dus herhalen we die selector hier om hem te overschrijven — geen !important. / input.invulveld-invoer:not([type=checkbox]):not([type=radio]){flex:1;min-width:0; background:transparent;border:0;outline:0;box-shadow:none;padding:0; font-size:1.05rem;color:rgb(var(--text));} input.invulveld-invoer:focus{background:transparent;border:0;box-shadow:none;} .invulveld-eenheid{color:rgb(var(--muted));font-size:1.05rem;} / ── Tabs boven de beeldfeedback: "gegeven antwoord" / "juiste antwoord" ── Standaard onze neutrale knopstijl met een gekleurd icoon; in de klassieke schil de volgekleurde tabs van examentheorie.nl. / .antwoordtab{display:inline-flex;align-items:center;gap:.4rem;height:2rem;padding:0 .75rem; border-radius:6px;font-size:.85rem;cursor:pointer; background:rgb(var(--text) / .06);color:rgb(var(--text));border:1px solid rgb(var(--border));} .antwoordtab:hover{background:rgb(var(--text) / .10);} .antwoordtab--fout i{color:rgb(var(--bad));} .antwoordtab--goed i{color:rgb(var(--good));} body[data-runner="klassiek"] .antwoordtab{border:0;border-radius:4px 4px 0 0;color:#fff; text-transform:uppercase;font-size:.75rem;letter-spacing:.04em;height:1.9rem;} body[data-runner="klassiek"] .antwoordtab i{color:#fff;} body[data-runner="klassiek"] .antwoordtab--fout{background:rgb(var(--lens-fout));} body[data-runner="klassiek"] .antwoordtab--goed{background:rgb(var(--lens-goed));} body[data-runner="klassiek"] .antwoordtab:hover{filter:brightness(1.08);} / ── Klassiek op de telefoon ────────────────────────────────────────────────── Uit de mobiele opnames van examentheorie.nl: de tijd staat links in plaats van gecentreerd, de teller wordt kort ("1 / 50" i.p.v. "VRAAG 1 VAN 50") en het beeld loopt van rand tot rand. / @media (max-width:640px){ body[data-runner="klassiek"] .lens-tijd{position:static;} .lens-balk .lens-tijd-plaats{justify-items:start;padding-left:1rem;} / Op de telefoon valt het label weg; er blijft "30 MINUTEN" staan, precies zoals in de mobiele opnames van examentheorie.nl. / .lens-tijd-label{display:none;} .lens-vak{width:48px;} .lens-nav{padding:0 .7rem;} .lens-nav span{font-size:.7rem;letter-spacing:0;} / Het beeld tot aan de schermrand, zoals in de mobiele opnames. / body[data-runner="klassiek"] .runner-grid figure{margin-left:-1rem;margin-right:-1rem;border-radius:0;border-left:0;border-right:0;} body[data-runner="klassiek"] .runner-grid figure img{width:100%;} } / De volledige teller ("VRAAG 1 VAN 50") op ruime schermen, de korte ("1 / 50") op de telefoon — zoals examentheorie.nl het doet. / .lens-teller-streep{display:none;} @media (max-width:640px){ .lens-teller-woord{display:none;} .lens-teller-streep{display:inline;} } / ── Uitslagscherm (direct na het inleveren) ────────────────────────────────── / / examentheorie.nl gebruikt een massief gevulde duim; lucide levert lijn-iconen. `fill` in CSS wint van het `fill="none"`-attribuut op de SVG. / i.uitslag-duim,svg.uitslag-duim{width:7rem;height:7rem;fill:currentColor;stroke-width:1;} .uitslag-duim--goed{color:rgb(var(--good));} .uitslag-duim--fout{color:rgb(var(--bad));} body[data-runner="klassiek"] .uitslag-duim--goed{color:rgb(var(--lens-goed));} body[data-runner="klassiek"] .uitslag-duim--fout{color:rgb(var(--lens-fout));} / Eén brede knop; examentheorie.nl gebruikt daar een zwarte balk voor, CAS de donkere pil uit zijn eigen balken. / .uitslag-knop{display:block;width:100%;padding:1rem;border-radius:8px;font-weight:600; background:rgb(var(--brand));color:rgb(var(--on-brand));} .uitslag-knop:hover{background:rgb(var(--brand-strong));} body[data-runner="klassiek"] .uitslag-knop{background:#212529;color:#fff;border-radius:2px; text-transform:uppercase;letter-spacing:.03em;} body[data-runner="klassiek"] .uitslag-knop:hover{background:#000;} body[data-runner="cas"] .uitslag-knop{background:rgb(var(--cas-actie));border-radius:999px; text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;} / ── Tijdbalk onder de bovenbalk (klassiek) ─────────────────────────────────── Loopt van links naar rechts mee met de VERSTREKEN examentijd. Gemeten op examentheorie.nl: 6,9% gevuld bij 6,7% verstreken — dus verstreken tijd, niet resterende. Het instructiescherm verwijst er letterlijk naar ("zolang de tijdbalk loopt, kun je tussen de opgaven bladeren"). / .lens-tijdbalk{height:7px;background:rgb(var(--lens-balk));} .lens-tijdbalk > span{display:block;height:100%;background:rgb(var(--lens-tijdbalk)); transition:width 1s linear;} @media (prefers-reduced-motion:reduce){.lens-tijdbalk > span{transition:none;}} / ── Feedback-antwoorden: teken buiten de kaart ─────────────────────────────── Tijdens het beantwoorden staat er links een keuzerondje; in de feedback komt op diezelfde plek het vinkje of kruisje. `.opt-rij` houdt die twee naast elkaar, zodat de kaarten uitgelijnd blijven met de vraag-state. / .opt-rij{display:flex;align-items:center;gap:.85rem;} .opt-rij > .opt{flex:1;min-width:0;margin-left:0;} .opt-teken{width:1.35rem;height:1.35rem;flex:none;stroke-width:3;} .opt-teken--juist{color:rgb(var(--good));} .opt-teken--fout{color:rgb(var(--bad));} .opt-bol{width:.95rem;height:.95rem;flex:none;border-radius:999px;display:inline-block;} .opt-bol--juist{background:rgb(var(--good));} .opt-bol--fout{background:rgb(var(--bad));} body[data-runner="klassiek"] .opt-teken--juist{color:rgb(var(--lens-goed));} body[data-runner="klassiek"] .opt-teken--fout{color:rgb(var(--lens-fout));} body[data-runner="klassiek"] .opt-bol--juist{background:rgb(var(--lens-goed));} body[data-runner="klassiek"] .opt-bol--fout{background:rgb(var(--lens-fout));} / De gekleurde kaarten dragen witte tekst — ook het nummer of de letter ervoor. / body[data-runner="klassiek"] .opt-correct, body[data-runner="klassiek"] .opt-wrong{color:#fff;font-weight:600;} / Géén A/B/C in de feedback: die letters kent examentheorie.nl niet. Bij de volgorde-vraag staat er wél een nummer — dat is de positie, geen letter. / body[data-runner="klassiek"] .opt-correct .opt-letter, body[data-runner="klassiek"] .opt-wrong .opt-letter{display:none;} body[data-runner="klassiek"] .opt-correct .opt-letter.tnum, body[data-runner="klassiek"] .opt-wrong .opt-letter.tnum{display:inline;color:#fff;border:0;} / ── Informatiescherm ───────────────────────────────────────────────────────── Bij examentheorie.nl staat de kop in hoofdletters met een scheidingslijn eronder, links uitgelijnd, en de doorloopknop als brede zwarte balk. / .infoscherm-knop{display:block;width:100%;margin-top:2rem;padding:.9rem;text-align:center; border:0;border-radius:8px;font-weight:600;cursor:pointer; background:rgb(var(--brand));color:rgb(var(--on-brand));} .infoscherm-knop:hover{background:rgb(var(--brand-strong));} body[data-runner="klassiek"] .infoscherm{max-width:46rem;margin-left:0;text-align:left;} body[data-runner="klassiek"] .infoscherm-kop{text-transform:uppercase;font-weight:700; letter-spacing:.01em;padding-bottom:1rem;margin-bottom:1.5rem; border-bottom:1px solid rgb(var(--border));} body[data-runner="klassiek"] .infoscherm-knop{background:#212529;color:#fff;border-radius:2px; text-transform:uppercase;letter-spacing:.03em;} body[data-runner="klassiek"] .infoscherm-knop:hover{background:#000;} / De doorloopknop op een informatiescherm volgt de schil: in CAS de donkere pil uit de balken, in de klassieke schil de zwarte balk van examentheorie.nl. */ body[data-runner="cas"] .infoscherm-knop{background:rgb(var(--cas-actie));border-radius:999px; text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;} body[data-runner="cas"] .infoscherm-knop:hover{filter:brightness(1.15);background:rgb(var(--cas-actie));}