/* ============================================================ ASCENT — Colors & Type Cyberpunk arcade / crypto-chart aesthetic. Import this for any ASCENT-branded artifact. Fonts are Google Fonts (pixel/CRT family) — link in : ============================================================ */ :root { /* ── CORE PALETTE ───────────────────────────────────────── */ --bg-void: #000000; /* the abyss — default backdrop */ --bg-deep: #050505; /* near-black panel base */ --neon: #16e0a3; /* SIGNATURE green — primary brand */ --neon-bright:#22ffaa; /* hotter green, hover / lit edges */ --red: #ff4d6d; /* sell / danger / down */ --gold: #ffcf5c; /* reward / surge / profit */ --gold-bright:#ffdd88; /* gold glow */ --cyan: #5cc8ff; /* data / cool / links */ --magenta: #ff66bb; /* high-tier accent (BREACH) */ --violet: #c8a0ff; /* high-tier accent (STORM) */ --ember: #ff8844; /* high-tier accent (NOVA) */ /* ── TEXT ───────────────────────────────────────────────── */ --fg1: #bfeede; /* primary text — soft mint */ --fg2: #6f948a; /* muted / secondary — grey-green (AA-ish on black) */ --fg3: #ffffff; /* pure white — scores, hot specular */ --on-neon: #030303;/* text on a neon fill (buttons active) */ /* ── SURFACES & LINES ───────────────────────────────────── */ --panel: rgba(4, 10, 8, .72); /* glass HUD panel */ --panel-solid:rgba(2, 4, 4, .92); /* overlay cards */ --line: rgba(22, 224, 163, .18);/* hairline divider */ --line-strong:rgba(22, 224, 163, .40);/* active border */ /* ── GLOW / SHADOW SYSTEM ───────────────────────────────── */ /* Glow = text-shadow / box-shadow in the element's own hue. */ --glow-sm: 0 0 6px; --glow-md: 0 0 12px; --glow-lg: 0 0 22px; --glow-xl: 0 0 50px; /* CRT vignette + scanline overlay opacity range 0.18–0.36 */ /* ── RADII (mostly hard edges — arcade/CRT) ─────────────── */ --r-0: 0px; /* default: sharp corners */ --r-1: 2px; /* bars, chips */ --r-2: 3px; /* energy bar */ /* ── SPACING (8px-ish arcade grid) ──────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px; /* ── TYPE FAMILIES ──────────────────────────────────────── */ --font-display: "Press Start 2P", monospace; /* titles, big arcade headers */ --font-ui: "Silkscreen", monospace; /* labels, body, HUD chrome */ --font-numeric: "VT323", monospace; /* scores, prices, big digits */ /* ── TYPE SCALE (semantic) ──────────────────────────────── */ --t-display: 30px; /* H1 — game title (Press Start 2P) */ --t-h2: 16px; /* H2 — overlay headings */ --t-score: 38px; /* big numeric readouts (VT323) */ --t-price: 28px; /* price tickers (VT323) */ --t-body: 9px; /* body copy (Silkscreen) */ --t-label: 8px; /* HUD labels (Silkscreen) */ --t-micro: 7px; /* kickers, hints (Silkscreen) */ } /* ── SEMANTIC TYPE CLASSES ─────────────────────────────────── Reusable across ASCENT artifacts. All uppercase, wide tracking. */ .asc-h1 { font-family: var(--font-display); font-size: var(--t-display); color: var(--fg3); text-shadow: var(--glow-lg) currentColor; letter-spacing: .02em; margin: 0; } .asc-h2 { font-family: var(--font-display); font-size: var(--t-h2); color: var(--fg1); letter-spacing: .04em; margin: 0; } .asc-score { font-family: var(--font-numeric); font-size: var(--t-score); line-height: .85; color: var(--fg3); text-shadow: var(--glow-md) currentColor; } .asc-price { font-family: var(--font-numeric); font-size: var(--t-price); line-height: .9; color: var(--neon); text-shadow: var(--glow-md) currentColor; } .asc-body { font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.9; letter-spacing: .04em; color: var(--fg2); } .asc-label { font-family: var(--font-ui); font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase; color: var(--fg2); } .asc-kicker { font-family: var(--font-ui); font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--neon); opacity: .7; }