/* ============================================================ SKIN TOKEN DEFINITIONS Three skins share one markup, set via data-skin on : paper - modern warm workstation (default) night - modern dark crt - the original neon-on-black All colors are static per skin; the palette picker only changes the drawing pen (see js/themes.js). The terminal follows the active skin via --term-*, and the arcade games (TypeRacer, Breakout) via --arcade-*. ============================================================ */ :root { --font-mono: 'Fira Code', monospace; /* Accent tints derived from the skin accent */ --accent-soft-bg: rgba(var(--accent-rgb), 0.1); --accent-mid-bg: rgba(var(--accent-rgb), 0.15); --accent-strong-bg: rgba(var(--accent-rgb), 0.2); --accent-active-bg: rgba(var(--accent-rgb), 0.3); --accent-shadow: rgba(var(--accent-rgb), 0.2); --accent-glow-soft: rgba(var(--accent-rgb), 0.1); } /* ------------------------------------------------------------ PAPER (default): warm workstation. Neutral ink text, flat chrome with hard offset shadows, deep green accent. ------------------------------------------------------------ */ :root, [data-skin="paper"] { --bg-color: #eceadf; --win-bg: #faf8f1; --surface-alt: #dedbcd; /* taskbar, toolbars */ --surface-deep: #fffdf6; /* icon tiles, buttons, menus */ --text-color: #26251f; /* "ink" -- primary text */ --text-dim: #6e6b60; --text-highlight: #14130f; --text-body: #3c3a32; --text-muted: #6e6b60; --text-faint: #b3afa1; --border-color: #26251f; --border-soft: #cbc6b5; --header-bg: #0f7a3e; /* green title bars */ --header-text: #fdfcf5; --on-accent: #fdfcf5; --invert-text: #faf8f1; /* text on top of --text-color fills */ --selection-bg: rgba(15, 122, 62, 0.18); --accent-rgb: 15, 122, 62; /* Terminal on paper: ink on paper, green prompt */ --term-bg: #f5f2e7; --term-bg-alt: #f0ede1; --term-color: #26251f; --term-dim: #6e6b60; --term-highlight: #0f7a3e; --term-faint: #b3afa1; /* Arcade on paper: deep green game pieces on warm cream */ --arcade-bg: #f5f2e7; --arcade-bg-alt: #efecdf; --arcade-color: #0f7a3e; --arcade-dim: #8f8b7d; --arcade-rgb: 15, 122, 62; --arcade-highlight: #14130f; --arcade-faint: #b3afa1; --arcade-on: #fdfcf5; /* text on arcade-color fills */ --arcade-overlay: rgba(245, 242, 231, 0.88); --error-color: #b3122f; --controls-bg: rgba(250, 248, 241, 0.92); --chip-border: rgba(38, 37, 31, 0.25); --chip-border-active: #26251f; --chip-green: #0f7a3e; --chip-blue: #1b55c8; --chip-red: #c22047; --chip-yellow: #b47607; --trophy-gold: #96700a; --glow-strength: 0px; --win-shadow: 6px 6px 0 rgba(28, 27, 24, 0.18); --tile-shadow: 2px 2px 0 var(--border-soft); --btn-shadow: 2px 2px 0 rgba(28, 27, 24, 0.3); --label-shadow: none; --font-display: 'Fira Code', monospace; } /* ------------------------------------------------------------ NIGHT: modern dark. Slate surfaces, soft gray text, steel blue accent, layered shadows instead of glow. ------------------------------------------------------------ */ [data-skin="night"] { --bg-color: #15171c; --win-bg: #1d2026; --surface-alt: #22252c; --surface-deep: #14161a; --text-color: #d7dae1; --text-dim: #878e9b; --text-highlight: #f4f6fa; --text-body: #b6bbc6; --text-muted: #878e9b; --text-faint: #4a4f5a; --border-color: #565d6b; --border-soft: #2e323b; --header-bg: #3d5f8a; /* steel blue title bars */ --header-text: #f4f6fa; --on-accent: #f4f6fa; --invert-text: #15171c; --selection-bg: rgba(93, 138, 196, 0.25); --accent-rgb: 93, 138, 196; /* Terminal on night: matches the skin's dark surfaces */ --term-bg: #101216; --term-bg-alt: #0c0e11; --term-color: #d7dae1; --term-dim: #878e9b; --term-highlight: #7fa7d9; --term-faint: #4a4f5a; /* Arcade on night: bright blue game pieces on slate */ --arcade-bg: #14161a; --arcade-bg-alt: #101216; --arcade-color: #55a1ff; --arcade-dim: #3d5f8a; --arcade-rgb: 85, 161, 255; --arcade-highlight: #f4f6fa; --arcade-faint: #4a4f5a; --arcade-on: #10121a; --arcade-overlay: rgba(16, 18, 22, 0.88); --error-color: #ff5c6a; --controls-bg: rgba(29, 32, 38, 0.9); --chip-border: rgba(255, 255, 255, 0.18); --chip-border-active: #fff; --chip-green: #3ddc84; --chip-blue: #55a1ff; --chip-red: #ff5c7a; --chip-yellow: #ffd23e; --trophy-gold: #ffd700; --glow-strength: 0px; --win-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); --tile-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); --label-shadow: none; --font-display: 'Fira Code', monospace; } /* ------------------------------------------------------------ CRT: the original neon terminal aesthetic, preserved intact. ------------------------------------------------------------ */ [data-skin="crt"] { --bg-color: #0d0d0d; --win-bg: #0a0a0a; --surface-alt: #111; --surface-deep: #000; --text-color: #00ff41; --text-dim: #008f11; --text-highlight: #e0e0e0; --text-body: #ccc; --text-muted: #888; --text-faint: #444; --border-color: #00ff41; --border-soft: #333; --header-bg: #003b00; --header-text: #e0e0e0; --on-accent: #000; --invert-text: #000; --selection-bg: rgba(0, 255, 65, 0.2); --accent-rgb: 0, 255, 65; /* Terminal on CRT: the classic green phosphor */ --term-bg: #000; --term-bg-alt: #050505; --term-color: #00ff41; --term-dim: #008f11; --term-highlight: #e0e0e0; --term-faint: #444; /* Arcade on CRT: the original green-on-black cabinet */ --arcade-bg: #000; --arcade-bg-alt: #050505; --arcade-color: #00ff41; --arcade-dim: #008f11; --arcade-rgb: 0, 255, 65; --arcade-highlight: #e0e0e0; --arcade-faint: #444; --arcade-on: #000; --arcade-overlay: rgba(0, 0, 0, 0.85); --error-color: #ff3333; --controls-bg: rgba(0, 0, 0, 0.8); --chip-border: rgba(255, 255, 255, 0.2); --chip-border-active: #fff; --chip-green: #00ff41; --chip-blue: #00a6ff; --chip-red: #ff0055; --chip-yellow: #ffe600; --trophy-gold: #ffd700; --glow-strength: 2px; --win-shadow: 0 0 15px var(--accent-shadow); --tile-shadow: 0 0 5px var(--text-color); --btn-shadow: 0 0 5px var(--text-color); --label-shadow: 0 0 2px #000; --font-display: 'Orbitron', sans-serif; } /* Screen effects only exist on the CRT skin */ .scanlines, .screen-overlay { display: none; } [data-skin="crt"] .scanlines, [data-skin="crt"] .screen-overlay { display: block; } /* Pen swatches take their color from the active skin's palette */ .color-btn[data-theme="green"] { background: var(--chip-green); } .color-btn[data-theme="blue"] { background: var(--chip-blue); } .color-btn[data-theme="red"] { background: var(--chip-red); } .color-btn[data-theme="yellow"] { background: var(--chip-yellow); } /* On paper, the ink outline marks the active swatch; no glow needed */ [data-skin="paper"] .color-btn.active { box-shadow: none; } /* ------------------------------------------------------------ Skin cycle button (lives in #bg-controls) ------------------------------------------------------------ */ #skin-toggle { background: transparent; border: 1px solid var(--text-dim); color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; cursor: pointer; padding: 5px 10px; text-transform: uppercase; font-weight: bold; transition: all 0.2s; } #skin-toggle:hover { background: var(--text-dim); color: var(--on-accent); } /* ------------------------------------------------------------ Skin-switch: CRT power-down / power-up sequence Phase 1 (html.powering-down): the whole picture (#screen) squashes vertically into the center while brightening, and the retrace line takes over as it reaches line-thinness, then collapses to a dot. The skin swaps while collapsed. Phase 2 (html.powering-up): the dot stretches back into a line, and the picture expands out of it. The dot stays lit through the swap (fill modes hold both end states) so there's no dead-black gap. JS orchestrates the phases; see themes.js. ------------------------------------------------------------ */ #skin-flash { /* The "glass" in front of the screen; hosts the retrace line */ position: fixed; inset: 0; z-index: 20000; pointer-events: none; } #skin-flash::after { /* The phosphor retrace line. Its size is animated via width (not scaleX) so the glow shrinks with it -- transforms would squash the box but leave the shadow's vertical spread. */ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 3px; background: #fff; border-radius: 3px; box-shadow: 0 0 18px 3px rgba(255, 255, 255, 0.85), 0 0 60px 12px rgba(255, 255, 255, 0.35); opacity: 0; } html.powering-down #screen { animation: crt-screen-collapse 370ms forwards; } html.powering-down #skin-flash::after { animation: crt-line-collapse 370ms forwards; } html.powering-up #screen { animation: crt-screen-expand 300ms both; } html.powering-up #skin-flash::after { /* No line re-expansion on power-on: the glow dot just winks out and the picture opens on its own */ animation: crt-dot-out 90ms ease-out forwards; } html.powering-down #screen, html.powering-up #screen { will-change: transform, filter; } /* The picture collapses vertically into a line (0-55%), then the picture-line and the glow line shrink horizontally TOGETHER into the dot (55-100%) -- same segment timing on both, so the glow never leaves an un-glowing wake behind it. */ @keyframes crt-screen-collapse { 0% { transform: scale(1, 1); filter: brightness(1); animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.5); } 55% { transform: scale(1, 0.004); filter: brightness(2.2); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 1); } 100% { transform: scale(0.003, 0.004); filter: brightness(2.2); } } @keyframes crt-line-collapse { 0% { opacity: 0; width: 100%; } 40% { opacity: 0; width: 100%; } /* picture still collapsing */ 55% { opacity: 1; width: 100%; /* glow ignites on the line */ animation-timing-function: cubic-bezier(0.6, 0, 0.9, 1); } 100% { opacity: 1; width: 6px; } /* hold the dot */ } /* Reverse: no retrace line on the way in. The glow dot winks out, and the picture itself stretches from the dot into a sliver (0-35%), then opens vertically (35-100%). */ @keyframes crt-screen-expand { 0% { transform: scale(0.003, 0.004); filter: brightness(2.2); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); } 35% { transform: scale(1, 0.004); filter: brightness(2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); } 100% { transform: scale(1, 1); filter: brightness(1); } } @keyframes crt-dot-out { from { opacity: 1; width: 6px; } to { opacity: 0; width: 6px; } } /* ------------------------------------------------------------ Draw hint: shown when the active skin's canvas is empty, fades out on the first pen stroke (see js/background-draw.js) ------------------------------------------------------------ */ #draw-hint { position: fixed; right: 26px; bottom: 118px; /* Floats just above #bg-controls */ z-index: 4; /* Under windows and the controls */ font-family: var(--font-mono); font-size: 15px; color: var(--text-dim); transform: rotate(-4deg); opacity: 0; pointer-events: none; user-select: none; transition: opacity 0.3s ease; } #draw-hint.visible { opacity: 1; /* Ease in lazily so the desktop settles first */ transition: opacity 0.8s ease 1.2s; } [data-skin="crt"] #draw-hint { text-shadow: 0 0 6px var(--accent-glow-soft); } /* Align with the tightened palette controls on small screens */ @media (max-width: 768px) { #draw-hint { right: 12px; bottom: 112px; font-size: 0.85rem; } }