/* Two complete themes — HUD + Atelier. Pick by setting data-theme on . */ /* ── HUD: dark tactical, dense, monospace HUD chrome ───────────────────── */ [data-theme="hud"] { --bg: #07090e; --bg-2: #0c1018; --bg-3: #131826; --bg-4: #1b2233; --line: #1c2233; --line-2: #2a3147; --ink: #eef2fa; --ink-2: #9aa6c2; --ink-3: #5a6789; --ink-4: #2f3850; --accent: #4f9eff; --accent-2: #2a7de0; --hot: #ff5c3a; --warn: #f2c43d; --good: #4fd1a1; --paid: #ffd24a; --font-display: "Bebas Neue", "Oswald", sans-serif; --font-mono: "JetBrains Mono", "DM Mono", "SF Mono", ui-monospace, monospace; --font-body: "Inter", "DM Sans", system-ui, sans-serif; --r-sm: 2px; --r-md: 2px; --r-lg: 4px; --kicker-tracking: 0.22em; --kicker-size: 11px; --shadow: 0 0 0 0 transparent; } /* ── Atelier: bone background, ink, single rust accent, serif display ── */ [data-theme="atelier"] { --bg: #ece7df; --bg-2: #e1dbd0; --bg-3: #f5f1ea; --bg-4: #ffffff; --line: #c8bfaf; --line-2: #a89e8b; --ink: #14110d; --ink-2: #3b342a; --ink-3: #6e655a; --ink-4: #9c907f; --accent: #b34a2c; --accent-2: #842f17; --hot: #b34a2c; --warn: #b48a1f; --good: #4a6b3a; --paid: #1a1714; --font-display: "Fraunces", "GT Sectra", "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-body: "Söhne", "Inter", system-ui, sans-serif; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --kicker-tracking: 0.32em; --kicker-size: 10px; --shadow: 0 0 0 0 transparent; } /* ── Shared base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img, video { display: block; max-width: 100%; } .kicker { font-family: var(--font-mono); font-size: var(--kicker-size); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .kicker.accent { color: var(--accent); } [data-theme="hud"] .kicker::before { content: "// "; opacity: 0.55; } [data-theme="atelier"] .kicker::before { content: "§ "; opacity: 0.55; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: var(--r-md); transition: background 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); } .btn-ghost:hover { color: var(--ink); border-color: var(--accent); } .btn-sm { padding: 8px 14px; font-size: 10.5px; } [data-theme="atelier"] .btn-primary { background: var(--ink); color: var(--bg-3); border-color: var(--ink); } [data-theme="atelier"] .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-3); } /* Cards / surfaces */ .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); } /* Display type */ .display { font-family: var(--font-display); line-height: 0.92; letter-spacing: -0.01em; } [data-theme="hud"] .display { letter-spacing: 0.005em; line-height: 0.88; } [data-theme="atelier"] .display { font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; } /* Section dividers */ .rule { height: 1px; background: var(--line); width: 100%; } /* HUD-specific scanlines / grid bg */ [data-theme="hud"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(79,158,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(79,158,255,0.025) 1px, transparent 1px); background-size: 80px 80px; } /* Atelier paper grain via subtle noise */ [data-theme="atelier"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4; background-image: radial-gradient(rgba(20,17,13,0.05) 1px, transparent 1px); background-size: 3px 3px; } /* Thumbnail placeholder slot — used everywhere a real render would go */ .thumb-slot { position: relative; background: var(--bg-3); overflow: hidden; display: flex; align-items: center; justify-content: center; } .thumb-slot::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(135deg, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%); opacity: 0.6; } .thumb-slot .thumb-meta { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-3); padding: 6px 10px; border: 1px solid var(--line); } [data-theme="hud"] .thumb-slot .thumb-meta { color: var(--accent); border-color: var(--line-2); } [data-theme="atelier"] .thumb-slot { background: var(--bg-2); } [data-theme="atelier"] .thumb-slot::before { opacity: 0.35; } /* Form inputs */ .input { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-body); font-size: 14px; border-radius: var(--r-sm); transition: border-color 0.15s; } .input:focus { outline: none; border-color: var(--accent); } /* Animations */ @keyframes scan-line { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(900%); opacity: 0; } } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fade-in { animation: fade-in 0.5s ease both; } /* Scrollbar hide on inner panes */ .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }