/* ── Blade Runner — Neon Noir Terminal Theme ────────────────────────────── Applied when . All colour and font vars consumed by base.css are defined here. Two signature touches only: magenta title glow, cyan roll button glow. Everything else is clean, dark, readable. */ /* ── Custom properties ────────────────────────────────────────────────── */ body.mode-blade-runner { /* Colours */ --color-bg: #0a0e14; --color-text: #c8d4d8; --color-accent: #00e5ff; /* cyan — roll button, focus rings */ --color-border: #1e2d3a; --color-label: #4a6a7a; --color-input-bg: #0d1520; --color-btn-bg: #0a0e14; --color-btn-text: #c8d4d8; --color-btn-active-bg: #ff2e88; /* magenta — active mode tab */ --color-btn-active-text: #0a0e14; --color-roll-bg: #0a0e14; /* dark/outlined, not filled */ --color-roll-text: #00e5ff; /* Typography — monospace throughout */ --font-body: 'Space Mono', 'Courier New', monospace; --font-ui: 'Space Mono', 'Courier New', monospace; --font-size-base: 0.875rem; /* Space Mono is wide; scale down slightly */ --font-size-result: 0.875rem; /* Shape — sharp corners, terminal aesthetic */ --radius-btn: 0; --radius-input: 0; /* Dropdown chevron in cyan */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300e5ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── Background + scanline overlay ───────────────────────────────────── */ body.mode-blade-runner { background-color: var(--color-bg); } /* Scanlines: a repeating CSS gradient — no image, cheap on mobile GPU. pointer-events: none so it doesn't block taps. */ body.mode-blade-runner::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.09) 3px, rgba(0, 0, 0, 0.09) 4px ); z-index: 9999; } /* ── App title ────────────────────────────────────────────────────────── */ body.mode-blade-runner .app-title { font-family: 'Space Mono', monospace; font-size: 0.85rem; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.2em; color: #ff2e88; text-align: center; text-shadow: 0 0 14px rgba(255, 46, 136, 0.55); line-height: 1.3; } /* ── Header / mode nav ────────────────────────────────────────────────── */ body.mode-blade-runner .app-header { border-bottom: 1px solid rgba(0, 229, 255, 0.15); padding-bottom: 1rem; } body.mode-blade-runner .mode-btn { font-style: normal; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; border-color: var(--color-border); } body.mode-blade-runner .mode-btn.is-active { background-color: #ff2e88; color: #0a0e14; border-color: #ff2e88; } /* ── Controls ─────────────────────────────────────────────────────────── */ /* base.css already applies uppercase + tracking to labels, which is exactly right for the terminal aesthetic — no overrides needed. */ body.mode-blade-runner .control-group label { color: var(--color-label); } body.mode-blade-runner select, body.mode-blade-runner input[type="number"], body.mode-blade-runner input[type="date"] { background-color: var(--color-input-bg); border-color: var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 0.875rem; } body.mode-blade-runner select:focus, body.mode-blade-runner input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } /* ── Roll button ──────────────────────────────────────────────────────── */ body.mode-blade-runner .roll-btn { font-style: normal; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; border-color: var(--color-accent); transition: text-shadow 0.15s, box-shadow 0.15s, opacity 0.15s; } body.mode-blade-runner .roll-btn:hover { text-shadow: 0 0 10px rgba(0, 229, 255, 0.7); box-shadow: 0 0 18px rgba(0, 229, 255, 0.12); } body.mode-blade-runner .roll-btn:active { opacity: 0.75; } /* ── Result ───────────────────────────────────────────────────────────── */ /* Thin cyan left-border frames the readout as a terminal panel */ body.mode-blade-runner .result { border-left: 2px solid rgba(0, 229, 255, 0.25); padding-left: 1rem; } /* result-meta is hidden for Blade Runner (set via el.hidden in app.js). No style needed here. */ /* Atmospheric readout text — monospaced, line-height for scannability */ body.mode-blade-runner .result-label { font-family: 'Space Mono', monospace; font-size: 0.875rem; line-height: 1.75; color: var(--color-text); letter-spacing: 0.01em; } /* ── Tab bar ──────────────────────────────────────────────────────────── */ body.mode-blade-runner .tab-bar { border-top-color: rgba(0, 229, 255, 0.15); } body.mode-blade-runner .tab-btn { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; } body.mode-blade-runner .tab-btn.is-active { color: var(--color-accent); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); } /* ── Reset button ─────────────────────────────────────────────────────── */ body.mode-blade-runner .reset-btn { font-style: normal; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-label); border-color: var(--color-border); transition: color 0.15s, border-color 0.15s, text-shadow 0.15s; } body.mode-blade-runner .reset-btn:hover { color: var(--color-accent); border-color: var(--color-accent); text-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }