/* ========================================================================== RITHM · STAGE — Design tokens + base styles -------------------------------------------------------------------------- Drop-in alongside variables.css. Adds a --stage-* token namespace; legacy tokens (--primary, --bg-deep, etc.) can be re-pointed at these. See DESIGN-TOKENS.md for the full mapping. ========================================================================== */ :root { /* ── Chassis ─────────────────────────────────────────────────────────── */ --stage-black: #050507; --stage-chassis: #1A1A1C; --stage-panel-deep: #0A0A0C; --stage-panel-lo: #0E0E10; --stage-panel: #26262A; --stage-panel-hi: #33333A; --stage-rail: #454550; --stage-edge: #55555E; /* ── Accent (amber primary) ──────────────────────────────────────────── */ --stage-amber: #FFB020; --stage-amber-bright: #FFD66B; --stage-amber-dim: #7A4F0E; /* ── LEDs ────────────────────────────────────────────────────────────── */ --stage-led-green: #5CE08B; --stage-led-blue: #4A9EFF; --stage-led-red: #FF4D4D; /* ── Ink ─────────────────────────────────────────────────────────────── */ --stage-ink: #E8E8EE; --stage-ink-soft: #A8A8B0; --stage-mute: #7A7A82; --stage-mute-2: #5A5A62; /* ── Type ────────────────────────────────────────────────────────────── */ --stage-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --stage-font-mono-alt: 'IBM Plex Mono', 'JetBrains Mono', monospace; --stage-font-lcd: 'VT323', 'IBM Plex Mono', monospace; /* ── Radii (sharp; this is hardware) ─────────────────────────────────── */ --stage-radius-sharp: 1px; --stage-radius: 2px; --stage-radius-panel: 3px; /* ── Bevels (re-used via @extend-style classes below) ────────────────── */ --stage-bevel-up: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 70%, var(--stage-panel-lo) 100%); --stage-bevel-down: linear-gradient(180deg, var(--stage-panel-lo) 0%, var(--stage-panel) 50%, var(--stage-panel-hi) 100%); --stage-shadow-up: inset 0 1px 0 var(--stage-edge), inset 0 -1px 0 #000, 0 1px 2px rgba(0, 0, 0, 0.6); --stage-shadow-down: inset 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 -1px 0 var(--stage-panel-hi); /* ── Effects ─────────────────────────────────────────────────────────── */ --stage-glow-amber: 0 0 8px var(--stage-amber), 0 0 16px rgba(255, 176, 32, 0.4); --stage-glow-green: 0 0 8px var(--stage-led-green), 0 0 16px rgba(92, 224, 139, 0.4); --stage-glow-blue: 0 0 8px var(--stage-led-blue), 0 0 16px rgba(74, 158, 255, 0.4); } /* ── Repoint legacy tokens (optional during phased rollout) ───────────── Uncomment when ready to flip the whole site over. Until then, keep both palettes alive: pages that opt into stage classes use --stage-*, pages that still use --primary keep working unchanged. ─────────────────────────────────────────────────────────────────────── */ /* :root { --primary: var(--stage-amber); --primary-dark: var(--stage-amber-dim); --primary-light: var(--stage-amber-bright); --color-primary: var(--stage-amber); --color-success: var(--stage-led-green); --color-warning: var(--stage-amber); --color-danger: var(--stage-led-red); --color-info: var(--stage-led-blue); --success: var(--stage-led-green); --warning: var(--stage-amber); --danger: var(--stage-led-red); --bg-deep: var(--stage-black); --bg-base: var(--stage-chassis); --bg-elevated: var(--stage-panel); --bg-surface: var(--stage-panel-lo); --bg-primary: var(--stage-chassis); --bg-secondary: var(--stage-panel); --bg-card: var(--stage-panel); --text-primary: var(--stage-ink); --text-secondary: var(--stage-ink-soft); --text-muted: var(--stage-mute); --border-color: #000; --font-sans: var(--stage-font-mono); } */ /* ── Backgrounds ────────────────────────────────────────────────────────── */ .stage-chassis-bg { background: radial-gradient(circle at 1px 1px, var(--stage-panel) 1px, transparent 0), linear-gradient(180deg, #1F1F22 0%, #16161A 100%); background-size: 4px 4px, 100% 100%; } .stage-brushed-metal { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0, rgba(0, 0, 0, 0.06) 1px, rgba(255, 255, 255, 0.018) 2px), linear-gradient(180deg, #3A3A40 0%, var(--stage-panel) 100%); box-shadow: inset 0 -1px 0 #000, 0 1px 0 var(--stage-edge); } .stage-page-bg { background: radial-gradient(circle at 50% 0%, #1A1A20 0%, var(--stage-black) 60%); color: var(--stage-ink); font-family: var(--stage-font-mono); min-height: 100vh; overscroll-behavior: none; } /* ── Scrollbars styled to match chassis ─────────────────────────────────── */ .stage-scope ::-webkit-scrollbar { width: 10px; height: 10px; } .stage-scope ::-webkit-scrollbar-track { background: var(--stage-panel-lo); } .stage-scope ::-webkit-scrollbar-thumb { background: var(--stage-rail); border: 2px solid var(--stage-panel-lo); border-radius: 2px; } .stage-scope ::-webkit-scrollbar-thumb:hover { background: var(--stage-amber-dim); } /* ── Keyframes ──────────────────────────────────────────────────────────── */ @keyframes stage-pulse-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes stage-blink-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes stage-scan-needle { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ── Optional global CRT scanline overlay (apply to body) ───────────────── */ .stage-scanlines::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.10) 2px, rgba(0, 0, 0, 0.10) 3px ); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .stage-scanlines::after { display: none; } }