/* ============================================================ HOVERTRON — neon-tron racing design system ============================================================ */ /* Fonts are loaded via preconnect + in neo_header() (parallel, non-blocking) instead of a render-blocking @import. */ :root { /* surfaces */ --bg-0: #07060f; --bg-1: #0c0a1c; --bg-2: #110d26; --panel: #15102e; --panel-2: #1b1540; --panel-3: #221a4d; /* lines */ --line: rgba(124,108,196,0.16); --line-2: rgba(124,108,196,0.30); /* text */ --text: #efebff; --text-dim: #a9a0d2; --text-faint: #6f6796; /* neon */ --cyan: #00e5ff; --cyan-deep: #0098c9; --magenta: #ff2bd6; --amber: #ffc24b; --lime: #74ffb0; /* the accent is tweakable */ --accent: var(--cyan); --accent-2: var(--magenta); /* zone colors */ --z-dunes: #f0b24a; --z-steel: #6fb7e8; --z-sky: #5fdcff; --z-earth: #ff5d3c; --z-stars: #b88bff; --z-none: #8a83b0; --row-h: 1; /* density multiplier, tweakable */ --maxw: 1280px; --font: 'Oxanium', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --cond: 'Orbitron', 'Oxanium', sans-serif; --brand: 'Jaro', 'Orbitron', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg-0); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ambient backdrop: one contained accent glow over a deep vertical gradient. restraint — a single light source instead of competing washes. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 50% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%), linear-gradient(180deg, #0a0818 0%, #07060f 58%, #050409 100%); } /* faint scanlines — pulled back so they read as texture, not a filter */ body::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.13) 2px 3px); mix-blend-mode: multiply; opacity: .32; } a { color: inherit; text-decoration: none; } img { display: block; } /* ---------- layout ---------- */ .wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; } .section { padding: 64px 0; } /* ---------- top nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, rgba(8,7,18,0.92), rgba(8,7,18,0.72)); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { font-weight: 700; letter-spacing: .26em; font-size: 17px; display: flex; align-items: center; gap: 10px; padding-right: 6px; } .brand .glyph { width: 22px; height: 22px; position: relative; display: inline-block; background: conic-gradient(from 210deg, var(--cyan), var(--magenta), var(--cyan)); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); box-shadow: 0 0 14px rgba(0,229,255,.5); } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links a { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 9px 14px; border-radius: 7px; position: relative; transition: color .15s, background .15s; } .nav-links a:hover { color: var(--text); background: rgba(124,108,196,.10); } .nav-links a.active { color: #06121a; } .nav-links a.active { background: linear-gradient(180deg, var(--accent), var(--cyan-deep)); box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 28%, transparent); } /* ---------- buttons ---------- */ .btn { --c: var(--accent); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; padding: 13px 22px; cursor: pointer; border: 0; white-space: nowrap; color: #06121a; background: linear-gradient(180deg, color-mix(in oklab, var(--c) 92%, #fff), var(--c)); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: transform .12s, box-shadow .18s, filter .15s; } .btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 8px 26px color-mix(in oklab, var(--c) 38%, transparent); } .btn:active { transform: translateY(0); } .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } .btn.ghost:hover { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); } .btn.magenta { --c: var(--magenta); color: #fff; } /* ---------- chips / filters ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chip { font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer; padding: 8px 14px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: color .15s, border-color .15s, background .15s, box-shadow .15s; } .chip:hover { color: var(--text); border-color: var(--line-2); } .chip.on { color: #06121a; background: var(--accent); border-color: transparent; } .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .filter-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); min-width: 64px; } /* ---------- panels ---------- */ .panel { background: linear-gradient(180deg, var(--panel), var(--bg-1)); border: 1px solid var(--line); position: relative; } .panel.angled { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } /* corner ticks */ .tick { position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent); opacity: .8; } .tick.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .tick.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .tick.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .tick.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } /* ---------- eyebrow / headings ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 500; padding: 6px 12px 6px 11px; border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); background: color-mix(in oklab, var(--accent) 7%, transparent); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .h-display { font-family: var(--cond); font-weight: 700; line-height: .98; letter-spacing: -.01em; margin: 0; } .page-title { font-family: var(--cond); font-size: clamp(38px, 5.4vw, 70px); font-weight: 800; margin: 0; line-height: .98; letter-spacing: .005em; } .lede { color: var(--text-dim); font-size: 16px; line-height: 1.6; max-width: 60ch; } /* ---------- stat counters ---------- */ .stats { display: flex; flex-wrap: wrap; gap: 14px; } .stat { flex: 1 1 0; min-width: 150px; padding: 22px 22px 20px; position: relative; background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 70%, transparent), transparent); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .stat .num { font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: .9; color: var(--text); letter-spacing: .005em; font-variant-numeric: tabular-nums; } .stat .lab { margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint); } .stat::after { content:''; position:absolute; left:0; top:0; width:38px; height:2px; background: var(--accent); } /* ---------- data table ---------- */ .board { border: 1px solid var(--line); background: rgba(12,10,28,0.6); } .board-head, .lrow { display: grid; align-items: center; padding: calc(14px * var(--row-h)) 20px; gap: 16px; } .board-head { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--line-2); position: sticky; top: 64px; background: rgba(10,8,22,0.96); backdrop-filter: blur(8px); z-index: 5; } .board-head .sortable { cursor: pointer; user-select: none; transition: color .15s; } .board-head .sortable:hover { color: var(--text); } .board-head .sortable.act { color: var(--accent); } .lrow { border-bottom: 1px solid var(--line); transition: background .14s, box-shadow .14s; position: relative; } .lrow:hover { background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 9%, transparent), transparent 40%); } .lrow:hover::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); box-shadow:0 0 12px var(--accent); } .lrow:last-child { border-bottom: 0; } .lname { font-weight: 600; font-size: 16px; color: var(--text); } .lname .lsub { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; } .time { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; } .time .ms { color: var(--text-faint); font-weight: 500; } /* zone tag */ .zone { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; letter-spacing: .04em; color: var(--text-dim); } .zone .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } /* board/vehicle pill */ .vpill { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--text-dim); border: 1px solid var(--line-2); padding: 4px 9px; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); white-space: nowrap; } /* player cell */ .player { display: flex; align-items: center; gap: 11px; min-width: 0; } .player img, .ava { width: 30px; height: 30px; object-fit: cover; flex: none; border: 1px solid var(--line-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); background: var(--panel-2); } .player .pname { font-weight: 600; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player a.pname:hover { color: var(--accent); } .muted { color: var(--text-faint); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* small helper */ .divider { height:1px; background: var(--line); border:0; margin: 0; } /* footer */ .footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--text-faint); } .footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--panel-3); border: 2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } @media (max-width: 820px) { .nav-links .hide-sm { display: none; } .board-head { display: none; } }