/* ============================================================================ * chalkboard.css — 📝 The Chalkboard (education topic pickers) * A slate board in a wooden frame; the topic is chalked in with a self-hosted * handwriting face ('Chalk Hand'). Per-page slate/frame/accent via CSS vars set * on . Serves debate/essay/quiz/science/history/presentation topic pickers. * ========================================================================== */ body[class*="-topic-picker"], body.page-debate-topic-picker { --cb-slate: #2f3d35; --cb-slate2: #26332c; --cb-frame: #6b4a2b; --cb-frame2: #4f3620; --cb-chalk: #f2efe4; --cb-chalk-dim: #c9d3c4; --cb-chalk-faint: #8fa090; /* the body copy inside a For/Against block — was a bare literal in the PNG export, which is why it is a variable now: one source of truth for both */ --cb-chalk-body: #dfe6da; --cb-for: #bfe3a8; --cb-against: #f0b6a0; /* ⚠️ PAGE FURNITURE, DELIBERATELY NOT THE CHALK PALETTE. The H1 and lead sit on the dark page background, not on the board, so they keep a fixed chalk-toned ink and do NOT follow the chalk-colour setting — otherwise choosing pink chalk would repaint the page title. */ --cb-ink: #f0ece1; --cb-ink-dim: #c2c8bd; } /* ── CHALK COLOUR (owner 2026-08-18) ───────────────────────────────────────── The chalk is now a FREE colour, chosen with the same picker classic-wheel uses for "Text colour", so there are no fixed palettes here: the page writes --cb-chalk and its three derived tones straight onto . Every chalked element already reads those variables — the motion, the underline, the chip, the kicker, the For/Against body copy and the topics textarea — so one write repaints the board coherently. ⚠️ --cb-for / --cb-against are NEVER derived from it: green/red there carry MEANING (for vs against), not decoration. */ /* ── THE PAGE HEADING WAS DARK-ON-DARK (fixed 2026-08-18) ──────────────────── Measured before the fix: h1 computed rgb(33,37,41) — the LIGHT-theme heading colour — over this file's dark brown body gradient, and the lead rgb(85,96,107). Both were effectively unreadable, and it was PRE-EXISTING: identical in the capture taken before the Phase 5 conversion (_mockup-chalkboard/cb-1-load.png). ⚠️ Needs !important and the [data-theme] twin, because themes.css carries `body[data-theme] h1 { color: var(--theme-accent) !important }` — the same trap that made the tool-intro subtitle turn blue site-wide. COLOUR ONLY. */ body[class*="-topic-picker"] .tool-intro h1, body[class*="-topic-picker"][data-theme] .tool-intro h1 { color: var(--cb-ink) !important; } body[class*="-topic-picker"] .tool-intro .tool-intro-lead, body[class*="-topic-picker"][data-theme] .tool-intro .tool-intro-lead, body[class*="-topic-picker"] .tool-intro h2.tool-intro-sub, body[class*="-topic-picker"][data-theme] .tool-intro h2.tool-intro-sub { color: var(--cb-ink-dim) !important; } body[class*="-topic-picker"] { background: radial-gradient(1000px 600px at 50% -10%, rgba(255, 240, 210, .05), transparent 60%), linear-gradient(160deg, #403b33, #332f29 60%, #2b2823) !important; min-height: 100vh; } /* ---- board ---------------------------------------------------------------- */ .cb-stage { position: relative; } /* (The zen stage reserve that used to sit here is gone: with the board at a constant height above, the stage cannot change size, so there is nothing to reserve. Owner: "only size change".) */ .cb-frame { border-radius: 14px; padding: 15px; background: repeating-linear-gradient(96deg, var(--cb-frame) 0 7px, var(--cb-frame2) 7px 15px); box-shadow: 0 22px 55px -22px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .08); } .cb-board { /* ⚠️ A FIXED BOARD. Owner 2026-08-23: "in real life boards size don't change right? so how about keep the size always fixed. So fix the size of the board to the size when the winner is chosen, i.e. the bigger one and keep it fixed... don't change anything else.. only size change." It used to be min-height:300px and grew as the topic, chip and detail were written on it — measured over 60 reveals across all six pages, revealed heights ran 300..447px depending on topic length, which is what moved the stage (debate 50px, presentation 37px, science 26px, history 13px). 460px sits above the tallest measured reveal, so the board is now the same size empty and full. Size only — nothing else here changed. */ position: relative; border-radius: 6px; padding: 26px 30px 30px; height: 460px; overflow: hidden; background: radial-gradient(120% 80% at 25% 0%, rgba(255, 255, 255, .05), transparent 60%), linear-gradient(160deg, var(--cb-slate), var(--cb-slate2)); box-shadow: inset 0 0 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .3); } .cb-board::before { content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .7) .5px, transparent .5px); background-size: 7px 7px; } .cb-kicker { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--cb-chalk-faint); text-align: center; margin: 0 0 12px; min-height: 15px; } .cb-motion { font-family: 'Chalk Hand', 'Segoe Print', 'Bradley Hand', cursive; color: var(--cb-chalk); text-align: center; font-size: clamp(27px, 4.6vw, 42px); line-height: 1.14; font-weight: 600; letter-spacing: .3px; margin: 0 auto; max-width: 17ch; text-shadow: 0 1px 0 rgba(255, 255, 255, .06); } .cb-motion-idle { color: var(--cb-chalk-faint); font-weight: 400; } .cb-motion { transition: opacity .3s ease; } .cb-uline { display: block; margin: 8px auto 14px; width: min(360px, 74%); height: 11px; } .cb-uline path { stroke: var(--cb-chalk); stroke-width: 2.6; fill: none; stroke-linecap: round; opacity: .82; stroke-dasharray: 380; stroke-dashoffset: 380; } .cb-stage.cb-revealed .cb-uline path { stroke-dashoffset: 0; transition: stroke-dashoffset .55s ease .1s; } .cb-chip { display: block; width: max-content; margin: 0 auto 20px; font-size: 12.5px; letter-spacing: .05em; color: var(--cb-chalk-dim); border: 1.5px solid rgba(226, 231, 220, .4); border-radius: 20px; padding: 5px 15px; } /* ---- detail --------------------------------------------------------------- */ .cb-detail { opacity: 0; transition: opacity .4s ease .18s; } .cb-stage.cb-revealed .cb-detail { opacity: 1; } .cb-detail-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 26px; } .cb-divider { background: repeating-linear-gradient(180deg, rgba(226, 231, 220, .5) 0 8px, transparent 8px 15px); } .cb-block { padding: 2px 4px; } .cb-block-h { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--cb-chalk-dim); margin-bottom: 6px; } .cb-block-t { font-family: 'Chalk Hand', 'Segoe Print', cursive; font-size: 18px; line-height: 1.34; color: var(--cb-chalk-dim); margin: 0; } .cb-tone-for .cb-block-h { color: var(--cb-for); } .cb-tone-for .cb-block-h::before { content: "✓ "; } .cb-tone-against .cb-block-h { color: var(--cb-against); } .cb-tone-against .cb-block-h::before { content: "✕ "; } .cb-detail:not(.cb-detail-split) .cb-block { max-width: 62ch; margin: 0 auto; text-align: center; } /* ---- controls ------------------------------------------------------------- */ .cb-revealbtn-wrap { display: flex; justify-content: center; margin-top: 18px; } .cb-revealbtn-main { border: none; border-radius: 10px; padding: 12px 26px; font-size: 16px; font-weight: 700; cursor: pointer; color: #2c2a24; background: linear-gradient(180deg, var(--cb-btn-a, #f4efe2), var(--cb-btn-b, #ddd3bd)); box-shadow: 0 6px 0 #b9ac90, 0 12px 20px -10px rgba(0, 0, 0, .6); transition: transform .1s ease, box-shadow .15s ease; } .cb-revealbtn-main:hover { transform: translateY(-1px); } .cb-revealbtn-main:active { transform: translateY(3px); box-shadow: 0 3px 0 #b9ac90, 0 6px 12px -8px rgba(0, 0, 0, .6); } .cb-effects { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 16px; color: var(--cb-chalk-faint); font-size: 14px; } .cb-effects label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .cb-items-ta { width: 100%; min-height: 150px; background: #1f2a24; color: var(--cb-chalk-dim); border: 1px solid rgba(226, 231, 220, .2); border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.5; resize: vertical; } .cb-items-ta:focus-visible { outline: 2px solid var(--cb-for); outline-offset: 2px; } @media (max-width: 560px) { .cb-detail-split { grid-template-columns: 1fr; gap: 14px; } .cb-divider { display: none; } .cb-board { padding: 22px 18px 24px; } } /* ---- SEO content ---------------------------------------------------------- */ .cb-content { color: #d7d2c4; } .cb-content .cb-inner { max-width: 860px; margin: 0 auto; } .cb-content .cb-kick { display: inline-block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #2c2a24; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #f4efe2, #ddd3bd); margin-bottom: 14px; } .cb-content .cb-lead { font-size: 1.2rem; line-height: 1.6; color: #eee9db; } .cb-content .cb-section { margin-top: 3rem; } .cb-content h2 { color: #f4f0e4; font-weight: 700; } .cb-content h3 { color: #e2ddd0; font-weight: 700; } .cb-content .table { color: #d7d2c4; } .cb-content .table thead th { color: var(--cb-for, #bfe3a8); border-color: rgba(226, 231, 220, .22); } .cb-content .table td, .cb-content .table th { border-color: rgba(226, 231, 220, .12); }