/* Circle — the willperlak.com theme. * * The house style from WORKSPACE.md, spoken in this app's markup: near-black * starfield, Comic Sans, ridged purple frames, a cyan double border, a yellow * accent, square corners. There is no shared stylesheet across the apps and * there is not meant to be one — what they share is a vocabulary, and * static/home/index.html in willperlak.com is its source of truth. * * Every rule is scoped under [data-theme="retro"] because clean.css is linked * at the same time: an unscoped rule would leak onto the other theme the * moment somebody switched back. base.css owns layout; this file only sets * what base.css deferred — colour, border texture, the font, one animation. */ /* Comic Sans MS ships with Windows and macOS but not with iOS, Android or most Linux boxes. The stack must not end in the generic script face: on iOS Safari that resolves to Snell Roundhand, a formal copperplate, which is the wrong joke entirely. Comic Relief is a metrically equivalent libre clone (SIL OFL), so it stands in without reflowing a line. Self-hosted, never a CDN: the CSP is `default-src 'none'` with `font-src 'self'`, and a CDN would mean punching a hole in it for every app in the workspace. @font-face cannot be scoped to a theme, but only --font-body names the family and clean.css never does, so a visitor on Clean never downloads the file — and neither does a machine that has the real thing, because Comic Relief is listed second. Served by the edge (willperlak.com's /fonts/, WORKSPACE.md), not this app: there is no public/fonts/ here any more. Locally (a bare `npm start`, with no edge in front) these 404 and the stack falls back to the next name; the vendored tokens above still load. */ @font-face { font-family: "Comic Relief"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Comic Relief"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2"); } /* The house colour tokens, radii, font stack and the toast aliases all come from css/kit/retro-tokens.css now; only the app-local tokens (bucket-*, mark-*, hue-*) still live here, restated per variant as they always were. */ :root[data-theme="retro"] { /* Saturated and legible. This theme is a period pastiche, not an excuse for the low-contrast grey-on-black that period actually shipped. */ --bucket-green-bg: #33ff33; --bucket-green-fg: #003300; --bucket-yellow-bg: #ffee00; --bucket-yellow-fg: #3d3300; --bucket-orange-bg: #ff9900; --bucket-orange-fg: #331400; --bucket-red-bg: #b30000; --bucket-red-fg: #ffeeee; --bucket-none-bg: #2a0033; --bucket-none-fg: #e6ccff; /* What a day is carrying: a firm plan, somebody's idea, or a clash with the viewer's own availability. */ --mark-event-bg: #00ccff; --mark-event-fg: #001018; --mark-interest-bg: #ffee00; --mark-interest-fg: #332b00; --mark-busy-bg: #9a86c8; --mark-busy-fg: #0d0018; /* Avatar colours, picked by id modulo ten. Bright fills with near-black initials: ten hues that stay apart from each other on a dark page. */ --hue-0-bg: #ff66cc; --hue-0-fg: #2b0018; --hue-1-bg: #66ccff; --hue-1-fg: #001a2b; --hue-2-bg: #66ff99; --hue-2-fg: #00291a; --hue-3-bg: #ffcc66; --hue-3-fg: #2b1a00; --hue-4-bg: #cc99ff; --hue-4-fg: #1a0033; --hue-5-bg: #ff9966; --hue-5-fg: #2b0d00; --hue-6-bg: #66ffe0; --hue-6-fg: #002b26; --hue-7-bg: #ffee66; --hue-7-fg: #2b2600; --hue-8-bg: #99ff66; --hue-8-fg: #1a2b00; --hue-9-bg: #ff8888; --hue-9-fg: #2b0000; } /* The starfield, drawn entirely in CSS so the page never fetches an image — the two woff2 files are the only thing this theme ever requests. Copied in spirit from static/home/index.html, which is the canonical version. */ @keyframes circle-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } [data-theme="retro"] body { background-color: var(--bg); background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 25% 65%, #fff, transparent), radial-gradient(2px 2px at 35% 15%, #fff, transparent), radial-gradient(1px 1px at 45% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 35%, #fff, transparent), radial-gradient(2px 2px at 65% 55%, #fff, transparent), radial-gradient(1px 1px at 75% 10%, #fff, transparent), radial-gradient(1px 1px at 85% 75%, #fff, transparent), radial-gradient(2px 2px at 95% 40%, #fff, transparent), radial-gradient(1px 1px at 5% 90%, #fff, transparent), radial-gradient(1px 1px at 15% 45%, #fff, transparent), radial-gradient(1px 1px at 30% 95%, #fff, transparent), radial-gradient(2px 2px at 50% 5%, #fff, transparent), radial-gradient(1px 1px at 70% 85%, #fff, transparent), radial-gradient(120px 120px at 80% 25%, rgba(200, 120, 255, 0.28), transparent 70%), radial-gradient(160px 160px at 15% 70%, rgba(80, 160, 255, 0.24), transparent 70%); background-attachment: fixed; color: var(--text); } /* The twinkle is confined to a decorative layer that sits behind everything readable — "restrained" means the animation never touches type. It hangs off body rather than off #app, and at z-index -1 rather than 0, because raising #app's own children above it means setting `position` on them, and that quietly beat the `position: fixed` the bottom tab bar depends on. */ [data-theme="retro"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 12%, #fff, transparent), radial-gradient(1px 1px at 88% 62%, #fff, transparent), radial-gradient(1px 1px at 42% 88%, #fff, transparent); animation: circle-twinkle 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { [data-theme="retro"] body::after { animation: none; } } /* ============================== Controls ================================= * This comes first on purpose: it is the fallback every