/* ============================================================ QueueUp.gg — design system Space Grotesk (display) · DM Sans (body) · Space Mono (data) Dark neon, Discord-adjacent. Theming via CSS vars on :root. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Mono:wght@400;700&display=swap'); :root { /* ink */ --bg: #08080d; --bg-2: #0c0c14; --surface: #13131d; --surface-2: #191926; --surface-3: #212131; --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.14); --text: #f1f1f7; --text-dim: #a2a2bb; --text-faint:#666684; /* accents — overridden per theme */ --a1: #8b5cf6; /* primary */ --a2: #22d3ee; /* secondary */ --a3: #f0abfc; /* tertiary */ --a1-rgb: 139,92,246; --a2-rgb: 34,211,238; --green: #34d399; --amber: #fbbf24; --glow: 0 0 0 1px rgba(var(--a1-rgb),.4), 0 8px 40px -8px rgba(var(--a1-rgb),.45); --radius: 16px; --radius-sm: 10px; --display: 'Space Grotesk', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --glow-strength: 1; } /* ---- theme variants (Tweaks) ---- */ :root[data-theme="twilight"] { --a1:#8b5cf6; --a2:#22d3ee; --a3:#f0abfc; --a1-rgb:139,92,246; --a2-rgb:34,211,238; } :root[data-theme="synthwave"] { --a1:#fb5b9b; --a2:#a855f7; --a3:#fbbf24; --a1-rgb:251,91,155; --a2-rgb:168,85,247; } :root[data-theme="acid"] { --a1:#5eea7e; --a2:#a3e635; --a3:#22d3ee; --a1-rgb:94,234,126; --a2-rgb:163,230,53; --green:#5eea7e; } :root[data-theme="ember"] { --a1:#fb7185; --a2:#fb923c; --a3:#f472b6; --a1-rgb:251,113,133; --a2-rgb:251,146,60; } :root[data-theme="mono"] { --a1:#c7c7d9; --a2:#8a8aa3; --a3:#e6e6f0; --a1-rgb:199,199,217; --a2-rgb:138,138,163; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(70% 55% at 78% -8%, rgba(var(--a1-rgb),.18), transparent 60%), radial-gradient(60% 50% at 12% 8%, rgba(var(--a2-rgb),.14), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; } ::selection { background: rgba(var(--a1-rgb),.35); } /* page atmosphere — transparent grid texture only (base color lives on ) */ .app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 30%, transparent 80%); mask-image: radial-gradient(100% 80% at 50% 0%, #000 30%, transparent 80%); } .shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ---------- top nav ---------- */ .nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(8,8,13,.85), rgba(8,8,13,.5)); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--a1), var(--a2)); box-shadow: 0 6px 22px -6px rgba(var(--a1-rgb),.7); position: relative; } .brand-mark span { font-family: var(--display); font-weight: 700; color: #0a0a12; font-size: 18px; line-height: 1; } .brand-name { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; } .brand-name b { color: var(--a2); } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-link { color: var(--text-dim); font-size: 14.5px; font-weight: 500; padding: 8px 13px; border-radius: 9px; background: none; border: none; } .nav-link:hover { color: var(--text); background: var(--surface-2); } /* ---------- buttons ---------- */ .btn { font-family: var(--display); font-weight: 600; font-size: 15px; border: 1px solid transparent; border-radius: 12px; padding: 12px 20px; display: inline-flex; align-items: center; gap: 9px; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { color: #08080d; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 10px 30px -10px rgba(var(--a1-rgb),calc(.7 * var(--glow-strength))); } .btn-primary:hover { box-shadow: 0 14px 38px -8px rgba(var(--a1-rgb),calc(.85 * var(--glow-strength))); transform: translateY(-1px); } .btn-lg { font-size: 17px; padding: 16px 28px; border-radius: 14px; } .btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-3); border-color: rgba(var(--a1-rgb),.5); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { border-color: rgba(var(--a1-rgb),.6); background: rgba(var(--a1-rgb),.06); } .btn:disabled { opacity: .4; pointer-events: none; } /* ---------- chips / pills ---------- */ .chip { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); white-space: nowrap; } .chip-a1 { color: var(--a1); background: rgba(var(--a1-rgb),.1); border-color: rgba(var(--a1-rgb),.3); } .chip-a2 { color: var(--a2); background: rgba(var(--a2-rgb),.1); border-color: rgba(var(--a2-rgb),.28); } .chip-free { color: var(--green); background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); } .tag { font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; } /* ---------- cards ---------- */ .card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); } /* ---------- generic ---------- */ .kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a2); } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } h1,h2,h3,h4 { font-family: var(--display); letter-spacing: -.02em; margin: 0; }