/* ════════════════════════════════════════════════════════════════ gmux-phone v2 — THEME VARIABLE PACKS Switched via Each theme defines colours, radii, fonts, and decorative tokens. ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── THEME: default — dark navy + purple ────────────────────────────────────────────────────────────── */ html[data-theme="default"] { --bg: #060912; --bg-grad: radial-gradient(120% 80% at 50% -10%, #16204a 0%, #0a1024 35%, #060912 100%); --surface: #0d1426; --surface-2: #111a30; --card: #14203a; --card-2: #1a2a4a; --border: #233456; --border-2: #2c4170; --hairline: rgba(255,255,255,0.05); --text: #eef2ff; --text-2: #c2cce0; --muted: #6f7d99; --dim: #3a4663; --accent: #7c5cff; --accent-2: #a78bfa; --accent-glow: rgba(124,92,255,0.45); --selected-wash: rgba(124,92,255,0.16); --c-waiting: #ef4444; --c-permission: #f59e0b; --c-working: #22c55e; --c-done: #3b82f6; --c-error: #f43f5e; --c-idle: #475569; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 22px; --card-radius: var(--r-l); --font-sans: -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace; --font-display: var(--font-sans); --card-border-width: 1px; --card-bg: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); --decoration: none; /* no decorative pseudo elements */ } /* ────────────────────────────────────────────────────────────── THEME: nerv — Evangelion-style sci-fi terminal Black background, NERV amber, sharp corners, mono display font ────────────────────────────────────────────────────────────── */ html[data-theme="nerv"] { --bg: #000000; --bg-grad: linear-gradient(180deg, #000 0%, #050300 100%); --surface: #0a0700; --surface-2: #110c00; --card: #0a0700; --card-2: #0e0a02; --border: #5c3500; --border-2: #ff7a00; --hairline: rgba(255,122,0,0.10); --text: #ffb060; --text-2: #ff9430; --muted: #8a5510; --dim: #4a2f08; --accent: #ff7a00; /* NERV amber */ --accent-2: #ffaa44; --accent-glow: rgba(255,122,0,0.55); --selected-wash: rgba(255,122,0,0.22); /* whole card lights up */ /* State colours — high-contrast amber/green/red, not bubble-gum */ --c-waiting: #ff3030; --c-permission: #ffcc00; --c-working: #00ff66; --c-done: #00ccff; --c-error: #ff0040; --c-idle: #4a2f08; --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --card-radius: 0; --font-sans: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-display: 'JetBrains Mono', 'SF Mono', monospace; --card-border-width: 1px; --card-bg: #050300; --decoration: corner-brackets; } /* NERV theme decoration: amber corner brackets on every card */ html[data-theme="nerv"] .h-card, html[data-theme="nerv"] .session-row { position: relative; } html[data-theme="nerv"] .h-card::before, html[data-theme="nerv"] .h-card::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); pointer-events: none; } html[data-theme="nerv"] .h-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } html[data-theme="nerv"] .h-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } html[data-theme="nerv"] .h-card.selected::before, html[data-theme="nerv"] .h-card.selected::after { width: 18px; height: 18px; border-color: var(--accent-2); } /* Subtle scanline */ html[data-theme="nerv"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0, transparent 3px, rgba(255,122,0,0.02) 3px, rgba(255,122,0,0.02) 4px ); z-index: 1000; mix-blend-mode: screen; } /* NERV "TERMINAL" hairline above cards */ html[data-theme="nerv"] .card-stack { background-image: linear-gradient(90deg, transparent 0, var(--accent) 50%, transparent 100%); background-size: 100% 1px; background-position: top center; background-repeat: no-repeat; } /* ────────────────────────────────────────────────────────────── THEME: nerv-muted — softer amber, less saturation ────────────────────────────────────────────────────────────── */ html[data-theme="nerv-muted"] { --bg: #080604; --bg-grad: linear-gradient(180deg, #080604 0%, #0a0805 100%); --surface: #0d0a05; --surface-2: #110d07; --card: #0d0a05; --card-2: #100c07; --border: #4a3318; --border-2: #cc8030; --hairline: rgba(204,128,48,0.08); --text: #d0a070; --text-2: #b88858; --muted: #7a5530; --dim: #402f1a; --accent: #cc8030; --accent-2: #e6a050; --accent-glow: rgba(204,128,48,0.40); --selected-wash: rgba(204,128,48,0.16); --c-waiting: #d04848; --c-permission: #d4a44d; --c-working: #6ed0a0; --c-done: #5090c0; --c-error: #c84458; --c-idle: #402f1a; --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --card-radius: 0; --font-sans: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-display: 'JetBrains Mono', 'SF Mono', monospace; --card-border-width: 1px; --card-bg: #0a0805; } /* nerv-muted decoration: lighter corner brackets, less scanline */ html[data-theme="nerv-muted"] .h-card::before, html[data-theme="nerv-muted"] .h-card::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid rgba(204,128,48,0.5); pointer-events: none; } html[data-theme="nerv-muted"] .h-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } html[data-theme="nerv-muted"] .h-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; background: none; filter: none; opacity: 1; } /* ────────────────────────────────────────────────────────────── THEME: nerv-blue — Magi-system calm blue palette ────────────────────────────────────────────────────────────── */ html[data-theme="nerv-blue"] { --bg: #020410; --bg-grad: linear-gradient(180deg, #020410 0%, #03061a 100%); --surface: #04081c; --surface-2: #060c24; --card: #04081c; --card-2: #060c24; --border: #1a3055; --border-2: #4a90e2; --hairline: rgba(74,144,226,0.10); --text: #9ec5f0; --text-2: #7ba5d0; --muted: #4a6a90; --dim: #1a3055; --accent: #4a90e2; --accent-2: #7ab0f0; --accent-glow: rgba(74,144,226,0.45); --selected-wash: rgba(74,144,226,0.18); --c-waiting: #e2715a; --c-permission: #e2c050; --c-working: #6ed0a0; --c-done: #5090e0; --c-error: #e2455a; --c-idle: #1a3055; --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --card-radius: 0; --font-sans: 'JetBrains Mono', 'SF Mono', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-display: 'JetBrains Mono', monospace; --card-border-width: 1px; --card-bg: #04081c; } html[data-theme="nerv-blue"] .h-card::before, html[data-theme="nerv-blue"] .h-card::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); pointer-events: none; } html[data-theme="nerv-blue"] .h-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } html[data-theme="nerv-blue"] .h-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; background: none; filter: none; opacity: 1; } /* ────────────────────────────────────────────────────────────── THEME: terminal — pure CRT green-on-black ────────────────────────────────────────────────────────────── */ html[data-theme="terminal"] { --bg: #001100; --bg-grad: radial-gradient(120% 80% at 50% 50%, #002800 0%, #001500 50%, #000800 100%); --surface: #001800; --surface-2: #002400; --card: #001500; --card-2: #002000; --border: #00aa44; --border-2: #00ff66; --hairline: rgba(0,255,102,0.10); --text: #00ff66; --text-2: #00cc55; --muted: #008833; --dim: #003311; --accent: #00ff66; --accent-2: #88ff88; --accent-glow: rgba(0,255,102,0.45); --selected-wash: rgba(0,255,102,0.18); --c-waiting: #ff4444; --c-permission: #ffff00; --c-working: #00ff66; --c-done: #00ccff; --c-error: #ff0044; --c-idle: #225522; --r-s: 2px; --r-m: 2px; --r-l: 2px; --card-radius: 2px; --font-sans: 'JetBrains Mono', 'SF Mono', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-display: 'JetBrains Mono', monospace; --card-border-width: 1px; --card-bg: linear-gradient(180deg, var(--card), var(--card-2)); } /* CRT phosphor glow */ html[data-theme="terminal"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0,255,102,0.0) 0, rgba(0,255,102,0.0) 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px ); z-index: 1000; } html[data-theme="terminal"] .card-name, html[data-theme="terminal"] .h-card .h-output, html[data-theme="terminal"] .h-card .h-cwd { text-shadow: 0 0 8px var(--accent-glow); } /* ────────────────────────────────────────────────────────────── THEME: paper — light daytime mode ────────────────────────────────────────────────────────────── */ html[data-theme="paper"] { --bg: #f6f4ee; --bg-grad: linear-gradient(180deg, #fbf9f2 0%, #efece2 100%); --surface: #ffffff; --surface-2: #faf7f0; --card: #ffffff; --card-2: #fdfbf5; --border: #d8d2c2; --border-2: #b8b09a; --hairline: rgba(0,0,0,0.06); --text: #1f1d2e; --text-2: #3a3855; --muted: #7c7888; --dim: #c8c2b4; --accent: #3b3a55; --accent-2: #5e5c7e; --accent-glow: rgba(59,58,85,0.20); --selected-wash: rgba(59,58,85,0.10); --c-waiting: #d97757; --c-permission: #d4a44d; --c-working: #7c8e3a; --c-done: #5078a8; --c-error: #b04848; --c-idle: #a8a298; --r-s: 6px; --r-m: 10px; --r-l: 14px; --card-radius: 14px; --font-sans: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', monospace; --font-display: var(--font-sans); --card-border-width: 1px; --card-bg: var(--card); } html[data-theme="paper"] .h-card { box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04); } html[data-theme="paper"] .h-card.selected { box-shadow: 0 2px 6px rgba(59,58,85,0.15), 0 8px 24px rgba(59,58,85,0.12); } /* ════════════════════════════════════════════════════════════════ Theme picker swatches (in theme modal) ════════════════════════════════════════════════════════════════ */ .tt-swatch { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border); display: block; margin: 0 auto 6px; } .tt-default { background: linear-gradient(135deg, #16204a, #7c5cff); } .tt-nerv { background: #000; border: 1px solid #ff7a00; position: relative; } .tt-nerv::before { content: ''; position: absolute; inset: 4px; border: 1px solid #ff7a00; border-radius: 0; } .tt-nerv-muted { background: #0a0805; border: 1px solid #cc8030; position: relative; } .tt-nerv-muted::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(204,128,48,0.5); border-radius: 0; } .tt-nerv-blue { background: #04081c; border: 1px solid #4a90e2; position: relative; } .tt-nerv-blue::before { content: ''; position: absolute; inset: 4px; border: 1px solid #4a90e2; border-radius: 0; } .tt-terminal { background: radial-gradient(circle, #00ff66 0%, #001500 70%); } .tt-paper { background: #fbf9f2; border: 1px solid #d8d2c2; } /* ════════════════════════════════════════════════════════════════ v0.7 — STYLE × ACCENT system Two orthogonal axes: [data-style] — geometry/font/decoration (nerv | dark | crt | paper) [data-accent] — palette (amber | blue | green | red | purple | cyan | rose) The legacy [data-theme] system above keeps working as a one-shot map. When state.js sets `style` + `accent`, those override. STYLE = sharp/round, mono/sans, decorations on/off, dark/light surface ACCENT = accent / accent-2 / accent-glow / selected-wash ──────────────────────────────────────────────────────────────── */ /* ═══ STYLE: NERV ═══ */ html[data-style="nerv"] { --bg: #000000; --bg-grad: linear-gradient(180deg, #000 0%, #050300 100%); --surface: #0a0700; --surface-2: #110c00; --card: #0a0700; --card-2: #0e0a02; --hairline: rgba(255,255,255,0.05); --text: #f0e6c8; --text-2: #c8b890; --muted: #807058; --dim: #3a3020; --c-waiting: #ff3030; --c-permission: #ffcc00; --c-working: #00ff66; --c-done: #00ccff; --c-error: #ff0040; --c-idle: #4a2f08; --r-s: 0; --r-m: 0; --r-l: 0; --r-xl: 0; --card-radius: 0; --font-sans: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --font-display: 'JetBrains Mono', 'SF Mono', monospace; --card-border-width: 1px; --card-bg: #050300; --decoration: corner-brackets; } /* ═══ STYLE: DARK ═══ */ html[data-style="dark"] { --bg: #060912; --bg-grad: radial-gradient(120% 80% at 50% -10%, #16204a 0%, #0a1024 35%, #060912 100%); --surface: #0d1426; --surface-2: #111a30; --card: #14203a; --card-2: #1a2a4a; --hairline: rgba(255,255,255,0.05); --text: #eef2ff; --text-2: #c2cce0; --muted: #6f7d99; --dim: #3a4663; --c-waiting: #ef4444; --c-permission: #f59e0b; --c-working: #22c55e; --c-done: #3b82f6; --c-error: #f43f5e; --c-idle: #475569; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 22px; --card-radius: var(--r-l); --font-sans: -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace; --font-display: var(--font-sans); --card-border-width: 1px; --card-bg: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); --decoration: none; } /* ═══ STYLE: CRT ═══ */ html[data-style="crt"] { --bg: #001100; --bg-grad: radial-gradient(120% 80% at 50% 50%, #002800 0%, #001500 50%, #000800 100%); --surface: #001800; --surface-2: #002400; --card: #001500; --card-2: #002000; --hairline: rgba(255,255,255,0.06); --text: #d8ffd8; --text-2: #a8dca8; --muted: #6fa06f; --dim: #224422; --c-waiting: #ff4444; --c-permission: #ffff00; --c-working: #00ff66; --c-done: #00ccff; --c-error: #ff0044; --c-idle: #225522; --r-s: 2px; --r-m: 2px; --r-l: 2px; --card-radius: 2px; --font-sans: 'JetBrains Mono', 'SF Mono', monospace; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-display: 'JetBrains Mono', monospace; --card-border-width: 1px; --card-bg: linear-gradient(180deg, var(--card), var(--card-2)); --decoration: phosphor; } html[data-style="crt"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0,0,0,0.20) 2px, rgba(0,0,0,0.20) 3px ); z-index: 1000; } /* CRT phosphor: text + bg take the accent tint via overrides */ html[data-style="crt"] { --text: color-mix(in srgb, var(--accent, #00ff66) 75%, #d8ffd8); --text-2: color-mix(in srgb, var(--accent, #00ff66) 60%, #a8dca8); } /* v0.7.6: Paper outer-border tweak — keep subtle warm tint on the right/top/bottom, but DO NOT touch border-left so the state stripe shows its vivid colour. */ html[data-style="paper"] .h-card { border-top-color: rgba(60,40,0,0.12); border-right-color: rgba(60,40,0,0.12); border-bottom-color: rgba(60,40,0,0.12); /* border-left-color stays as the state stripe colour */ } /* ═══ STYLE: PAPER (light) — v0.7.4: yellow-tinted off-white, saturated states ═══ */ html[data-style="paper"] { /* Warm cream / yellow-tinted base instead of paper-white. Background slides from a slightly brighter top to a warmer bottom. */ --bg: #f0e9d2; --bg-grad: linear-gradient(180deg, #f5eedb 0%, #e8e0c3 100%); --surface: #faf3df; --surface-2: #f2ead0; --card: #fbf5e3; --card-2: #f6efd6; --hairline: rgba(60,40,0,0.10); --text: #1a1500; --text-2: #3d3015; --muted: #7a6840; --dim: #c4b48a; /* SATURATED state colours so they pop against the warm cream bg. The pre-v0.7.4 paper colours (#d97757, #d4a44d, etc.) were too muted on a light bg — they blurred into the cream. These are deeper / more saturated tones tuned for light backgrounds. */ --c-waiting: #e63b3b; /* warmer richer red */ --c-permission: #e0a000; /* gold rather than washed-out yellow */ --c-working: #0e8a3c; /* deeper forest green for contrast */ --c-done: #1c5cb8; /* deeper richer blue */ --c-error: #b71c1c; /* dark wine red */ --c-idle: #8a7c5c; /* warm muted brown */ --r-s: 6px; --r-m: 10px; --r-l: 14px; --card-radius: 14px; --font-sans: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', monospace; --font-display: var(--font-sans); --card-border-width: 1px; --card-bg: var(--card); --decoration: none; } html[data-style="paper"] .h-card { /* Slight tactile shadow + warm inner shadow for the parchment feel */ box-shadow: 0 1px 3px rgba(60,40,0,0.08), 0 4px 12px rgba(60,40,0,0.05), inset 0 0 0 1px rgba(60,40,0,0.03); } /* On paper, the state stripe needs to be vivid */ html[data-style="paper"] .h-card[data-state="waiting"] { --state-color: var(--c-waiting); } html[data-style="paper"] .h-card[data-state="permission"] { --state-color: var(--c-permission); } html[data-style="paper"] .h-card[data-state="working"] { --state-color: var(--c-working); } html[data-style="paper"] .h-card[data-state="done"] { --state-color: var(--c-done); } html[data-style="paper"] .h-card[data-state="error"] { --state-color: var(--c-error); } html[data-style="paper"] .h-card[data-state="idle"] { --state-color: var(--c-idle); } /* state-label chip on paper: dark text on tinted bg for legibility */ html[data-style="paper"] .h-state-label { background: rgba(60,40,0,0.06); color: var(--text); } /* ═══ ACCENT palettes (override accent/border/glow regardless of style) ═══ */ html[data-accent="amber"] { --accent: #ff7a00; --accent-2: #ffaa44; --accent-glow: rgba(255,122,0,0.55); --selected-wash: rgba(255,122,0,0.22); --border: #5c3500; --border-2: #ff7a00; } html[data-accent="amber-muted"] { --accent: #cc8030; --accent-2: #e6a050; --accent-glow: rgba(204,128,48,0.40); --selected-wash: rgba(204,128,48,0.16); --border: #4a3318; --border-2: #cc8030; } html[data-accent="blue"] { --accent: #4a90e2; --accent-2: #7ab0f0; --accent-glow: rgba(74,144,226,0.45); --selected-wash: rgba(74,144,226,0.18); --border: #1a3055; --border-2: #4a90e2; } html[data-accent="green"] { --accent: #00ff66; --accent-2: #88ff88; --accent-glow: rgba(0,255,102,0.45); --selected-wash: rgba(0,255,102,0.18); --border: #00aa44; --border-2: #00ff66; } html[data-accent="red"] { --accent: #ff3030; --accent-2: #ff7060; --accent-glow: rgba(255,48,48,0.45); --selected-wash: rgba(255,48,48,0.16); --border: #551515; --border-2: #ff3030; } html[data-accent="purple"] { --accent: #7c5cff; --accent-2: #a78bfa; --accent-glow: rgba(124,92,255,0.45); --selected-wash: rgba(124,92,255,0.16); --border: #233456; --border-2: #2c4170; } html[data-accent="cyan"] { --accent: #00d4d4; --accent-2: #66f0f0; --accent-glow: rgba(0,212,212,0.45); --selected-wash: rgba(0,212,212,0.16); --border: #0a4a4a; --border-2: #00d4d4; } html[data-accent="rose"] { --accent: #ff5e8c; --accent-2: #ff90b8; --accent-glow: rgba(255,94,140,0.45); --selected-wash: rgba(255,94,140,0.16); --border: #551530; --border-2: #ff5e8c; } /* ═══ Decorations that follow STYLE not accent ═══ */ /* NERV corner brackets — colour comes from --accent so they re-tint */ html[data-style="nerv"] .h-card, html[data-style="nerv"] .session-row { position: relative; } html[data-style="nerv"] .h-card::before, html[data-style="nerv"] .h-card::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); pointer-events: none; } html[data-style="nerv"] .h-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } html[data-style="nerv"] .h-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } html[data-style="nerv"] .h-card.selected::before, html[data-style="nerv"] .h-card.selected::after { width: 18px; height: 18px; border-color: var(--accent-2); } /* NERV scanline overlay — accent-tinted */ html[data-style="nerv"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0, transparent 3px, var(--accent-glow) 3px, var(--accent-glow) 4px ); opacity: 0.04; z-index: 1000; mix-blend-mode: screen; } /* CRT phosphor text glow uses accent */ html[data-style="crt"] .card-name, html[data-style="crt"] .h-card .h-output, html[data-style="crt"] .h-card .h-cwd { text-shadow: 0 0 8px var(--accent-glow); }