/* ══════════════════════════════════════════════════════════════════ theme-stories.css — CASE FILES (light) Board directive, File 03: "every story is a declassified case file … Bureau paper, typewriter, rubber stamps." The one directive we cannot honour literally is the premise — File 03 made Stories light *because everything else was dark*. The theme toggle now carries that rhythm, so this file delivers the treatment and lets the switch decide when it appears. Redaction here is wallpaper, not censorship: a withheld document showing through from underneath. No word of a story is ever covered. ══════════════════════════════════════════════════════════════════ */ /* ── ELEMENTS THAT ONLY EXIST IN ONE THEME ──────────────────────── */ .cover-sheet, .bureau-head, .crt-readout, .lbl-bureau, .redaction-wash { display: none; } /* ── COVER SHEET WATERMARK ──────────────────────────────────────── The form the file would arrive in, printed under everything. */ html[data-theme="light"] .cover-sheet { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-1.5deg); z-index: 0; margin: 0; font-family: var(--font-mono); font-size: clamp(6px, 0.72vw, 11px); line-height: 1.5; white-space: pre; color: var(--accent); opacity: 0.34; pointer-events: none; user-select: none; } @media (max-width: 900px) { html[data-theme="light"] .cover-sheet { display: none; } } /* ══════════════════════════════════════════════════════════════════ THE ARCHIVE TERMINAL The index is not paper. It is the green-phosphor terminal the clerk reads it on — a CRT sitting on the Bureau's desk. The page around it stays paper; only the panel is a screen. Browsing happens on glass, the file itself is still printed. ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .board-table-wrap { --crt-bg: #060f08; --crt-dim: #1f7a3a; --crt: #35e06a; --crt-hot: #b6ffd0; position: relative; background: var(--crt-bg); border: 1px solid rgba(53, 224, 106, 0.35); border-radius: 6px; padding: 0.5rem 0 0.2rem; overflow: hidden; box-shadow: 0 0 0 6px #14170f, /* bezel */ 0 10px 30px rgba(59, 56, 51, 0.35), inset 0 0 70px rgba(53, 224, 106, 0.10); } /* phosphor scanlines + curvature falloff, inside the panel only */ html[data-theme="light"] .board-table-wrap::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 2px, rgba(0,0,0,0.28) 3px), radial-gradient(ellipse 92% 88% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%); } html[data-theme="light"] .board-table-wrap * { font-family: var(--font-mono); color: var(--crt); text-shadow: 0 0 4px rgba(53, 224, 106, 0.55); } /* ── READOUT ────────────────────────────────────────────────────── The system spill above the listing, as on any terminal that has been left running. Decorative and untranslated. */ html[data-theme="light"] .crt-readout { display: block; padding: 0.35rem 1.6rem 0.6rem; font-size: 0.56rem; line-height: 1.75; letter-spacing: 0.04em; color: var(--crt-dim); border-bottom: 1px solid rgba(53, 224, 106, 0.22); } html[data-theme="light"] .crt-readout span { display: block; color: var(--crt-dim); } /* ── COLUMN HEADS ───────────────────────────────────────────────── Bureau vocabulary replaces the transit vocabulary, column for column. Both sets live in the markup; the theme chooses. */ html[data-theme="light"] .board-col-headers > span:not(.bureau-head) { display: none; } html[data-theme="light"] .bureau-head { display: block; color: var(--crt-hot); font-size: 0.54rem; letter-spacing: 0.14em; } html[data-theme="light"] .board-col-headers { background: rgba(53, 224, 106, 0.07); border-bottom: 1px solid rgba(53, 224, 106, 0.30); } /* CLASSIFICATION LVL needs more room than DELAY did */ html[data-theme="light"] .board-table-wrap { --board-cols: 74px 58px 1fr 76px 132px 1fr; } /* ── ROWS ───────────────────────────────────────────────────────── Selection on a CRT is an inverted block, not a tint. */ html[data-theme="light"] .board-row { border-bottom: 1px solid rgba(53, 224, 106, 0.12); padding-top: 0.42rem; padding-bottom: 0.42rem; } html[data-theme="light"] .board-row:hover, html[data-theme="light"] .board-row:focus-within { background: var(--crt); } html[data-theme="light"] .board-row:hover *, html[data-theme="light"] .board-row:focus-within * { color: var(--crt-bg); text-shadow: none; } html[data-theme="light"] .dest-name { color: var(--crt-hot); } html[data-theme="light"] .info-val, html[data-theme="light"] .bd-val { color: var(--crt); } html[data-theme="light"] .delay-val { color: var(--crt-hot); } html[data-theme="light"] .board-row--delayed, html[data-theme="light"] .board-row--big-delay { background: none; } /* ── PANEL HEADER ─────────────────────────────────────────────────── */ html[data-theme="light"] .board-header { background: var(--chrome); border-bottom: 2px solid rgba(var(--accent-rgb), 0.55); } html[data-theme="light"] .board-station { color: var(--text-primary); } html[data-theme="light"] .board-time { color: var(--accent-bright); } /* ── THE FILE ITSELF ──────────────────────────────────────────────── */ html[data-theme="light"] .story-drawer { background: var(--chrome); border-top: 2px solid rgba(var(--accent-rgb), 0.55); box-shadow: 0 -12px 44px rgba(59, 56, 51, 0.28); } html[data-theme="light"] .story-backdrop { background: rgba(59, 56, 51, 0.45); } html[data-theme="light"] .story-drawer-header { border-bottom-color: rgba(var(--accent-rgb), 0.35); } html[data-theme="light"] .story-drawer-train { color: var(--accent-bright); } html[data-theme="light"] .story-drawer-quote { color: var(--text-card-desc); } /* stamped heading: double rule in stamp red, the board's "rubber stamp" */ html[data-theme="light"] .story-drawer-dest { color: var(--text-primary); border-top: 3px double var(--accent-bright); border-bottom: 3px double var(--accent-bright); padding: 0.5rem 0; } /* struck across the header, as a clerk would */ html[data-theme="light"] .story-drawer-title-wrap { position: relative; } html[data-theme="light"] .story-drawer-title-wrap::after { content: 'DECLASSIFIED'; position: absolute; top: -0.4rem; right: 0.5rem; transform: rotate(-11deg); font-family: var(--font-human); font-size: clamp(0.8rem, 2vw, 1.5rem); letter-spacing: 0.16em; color: rgba(var(--accent-bright-rgb), 0.55); border: 2px solid rgba(var(--accent-bright-rgb), 0.45); padding: 0.15em 0.5em; pointer-events: none; } /* ── BODY: typewriter on paper ────────────────────────────────────── */ html[data-theme="light"] .story-body-text { position: relative; font-family: var(--font-human); font-size: 0.92rem; line-height: 1.85; max-width: 62ch; color: var(--text-primary); } html[data-theme="light"] .story-body-text > p { position: relative; z-index: 1; } /* ── REDACTION WASH ─────────────────────────────────────────────── A tiled sheet of withheld lines behind the type. Decorative only: aria-hidden, pointer-events none, never overlapping a glyph's legibility. */ html[data-theme="light"] .redaction-wash { display: block; position: absolute; inset: -1rem -2rem; z-index: 0; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 760px 420px; } /* ── FOOTER, per the directive, verbatim ──────────────────────────── */ html[data-theme="light"] .story-body-scroll::after { content: 'FILED BY SIN-001 // STATION UNKNOWN // APPROVED FOR RELEASE'; display: block; margin: 2.5rem 0 1rem; padding-top: 0.8rem; border-top: 1px solid rgba(var(--accent-rgb), 0.35); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { html[data-theme="light"] .board-row { transition: none; } } /* the title band is the one sheet lying on top of the page */ html[data-theme="light"] .stories-header { background: var(--bg); border-bottom: 2px solid rgba(var(--accent-rgb), 0.55); } /* ══════════════════════════════════════════════════════════════════ TERMINAL FILLS THE FRAME The screen is the whole panel, not a strip at the top of it. ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .departures-wrap { display: flex; flex-direction: column; background: transparent; border-color: rgba(var(--accent-rgb), 0.45); } html[data-theme="light"] .departures-wrap::before { display: none; } html[data-theme="light"] .board-table-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 0; border: none; box-shadow: inset 0 0 70px rgba(53, 224, 106, 0.10); } html[data-theme="light"] .board-rows { flex: 1; overflow-y: auto; } /* ══════════════════════════════════════════════════════════════════ DRAWER — document vocabulary The transit labels stay in the markup for the dark board; the light theme swaps in the Bureau's. Neither set is translated, so the language system never sees this. ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .lbl-transit { display: none; } html[data-theme="light"] .lbl-bureau { display: inline; color: var(--text-muted); letter-spacing: 0.2em; margin-right: 0.35em; } /* the badge keeps its translated value in data-val and is relabelled here */ html[data-theme="light"] .story-drawer-delay { font-size: 0; background: rgba(var(--alarm-rgb), 0.12); border-color: rgba(var(--alarm-rgb), 0.45); color: var(--alarm); } html[data-theme="light"] .story-drawer-delay::before { content: 'CLASS. LVL ' attr(data-val); font-size: 0.55rem; letter-spacing: 0.16em; } /* ══════════════════════════════════════════════════════════════════ STORY BODY — readable ink on paper stories.css sets .story-body-text p to the board's pale grey, which is correct on a dark board and invisible on paper. ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .story-body-text p { font-family: var(--font-human); font-size: 0.95rem; line-height: 1.85; color: var(--text-primary); } html[data-theme="light"] .story-load-err { color: var(--alarm); } html[data-theme="light"] .story-loading { color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════════ STATUS COUNT — files, not trains ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] #status-train-count { font-size: 0; } html[data-theme="light"] #status-train-count::before { content: attr(data-count) ' FILES TO READ'; font-size: 0.65rem; letter-spacing: 0.18em; }