/* Alpine.js - hide elements with x-cloak until Alpine initializes */
[x-cloak] {
display: none !important;
}
/* ---------------- CSS Custom Properties ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
:root {
/* ═══════════════════════════════════════════════════════════════════
BRAND COLOR CONTROL — SINGLE SOURCE OF TRUTH
───────────────────────────────────────────────────────────────────
To re-theme the ENTIRE UI, change ONLY the values in this block.
Every accent, gradient, border, glow, focus ring and Shadcn token
further down derives from these primitives.
Rules when editing:
• Keep each --brand-*-rgb triplet in sync with its hex (rgb powers
the rgba() glows/borders).
• Keep --brand-h / --brand-s / --brand-l in sync with --brand-primary
(they power the Shadcn HSL bridge).
• The html[data-theme="light"] block overrides these with deeper
shades for contrast on white — edit both to fully re-skin.
See docs/THEMING.md for the full recipe.
═══════════════════════════════════════════════════════════════════ */
/* Primary ramp — the main accent color (battlefy coral) */
--brand-primary: #F04A38; /* battlefy coral */
--brand-primary-light: #ff6552; /* coral light */
--brand-primary-dark: #cf3626; /* coral dark */
--brand-primary-deep: #a32a1e; /* coral deep (gradient anchor) */
--brand-primary-rgb: 240, 74, 56;
/* Secondary ramp — cool structural highlight (battlefy indigo) */
--brand-secondary: #6C5CE7; /* indigo */
--brand-secondary-light: #8a7bff; /* indigo light */
--brand-secondary-dark: #4e3fbf; /* indigo dark */
--brand-secondary-rgb: 108, 92, 231;
/* Primary expressed as H S L — powers the Shadcn design-token bridge */
--brand-h: 6;
--brand-s: 86%;
--brand-l: 58%;
/* Backgrounds — dark surface ramp (cool navy, pairs with coral) */
--bg-primary: #030712;
/* deepest near-black navy */
--bg-secondary: #0a0e1a;
/* panel background */
--bg-card: #121826;
/* card surfaces */
--bg-card-hover: #1a2130;
/* card hover */
--bg-elevated: #232c3d;
/* elevated panels/headers */
--bg-inset: #01030a;
/* recessed areas */
/* Borders (cool slate, pairs with navy) */
--border-subtle: rgba(148, 163, 184, 0.1);
--border-default: rgba(148, 163, 184, 0.2);
--border-bright: rgba(var(--brand-primary-rgb), 0.45);
--border-glow: rgba(var(--brand-primary-rgb), 0.6);
/* Accent --- PRIMARY (brand). Legacy name "blue" kept for compatibility. */
--accent-blue: var(--brand-primary);
--accent-blue-light: var(--brand-primary-light);
--accent-blue-dark: var(--brand-primary-dark);
--accent-blue-glow: rgba(var(--brand-primary-rgb), 0.25);
/* Accent --- SECONDARY (brand). Legacy name "violet" kept for compatibility. */
--accent-violet: var(--brand-secondary);
--accent-violet-light: var(--brand-secondary-light);
--accent-violet-dark: var(--brand-secondary-dark);
--accent-violet-glow: rgba(var(--brand-secondary-rgb), 0.2);
/* Accent --- TERTIARY highlight (follows secondary). Legacy name "cyan-pure". */
--accent-cyan-pure: var(--brand-secondary);
--accent-cyan-pure-lt: var(--brand-secondary-light);
--accent-cyan-pure-dk: var(--brand-secondary-dark);
--accent-cyan-glow: rgba(var(--brand-secondary-rgb), 0.2);
/* Accent --- Orange energy (aligned to brand primary) */
--accent-orange: var(--brand-primary);
--accent-orange-light: var(--brand-primary-light);
--accent-orange-dark: var(--brand-primary-dark);
--accent-orange-glow: rgba(var(--brand-primary-rgb), 0.2);
/* Backward Compatibility Remapping (Keep old names pointing to new values) */
--accent-purple: var(--accent-blue);
--accent-purple-light: var(--accent-blue-light);
--accent-purple-dark: var(--accent-blue-dark);
--accent-cyan: var(--accent-violet);
--accent-cyan-light: var(--accent-violet-light);
--accent-gold: var(--brand-secondary);
/* ═══════════════════════════════════════════════════════════════════
FORWARD SEMANTIC ACCENTS — truthful names. PREFER THESE IN NEW CODE.
───────────────────────────────────────────────────────────────────
The legacy aliases above (--accent-blue = primary, --accent-violet /
--accent-cyan = secondary, --accent-purple = primary) are misnamed and
kept only for backward compatibility. These forward names say what they
are. They resolve to the exact same values — adding them changes nothing
visually; it just lets new code stop lying. Migrate legacy → forward
incrementally, then retire the aliases.
═══════════════════════════════════════════════════════════════════ */
--accent-primary: var(--brand-primary); /* the single hot accent (orange) */
--accent-primary-light: var(--brand-primary-light);
--accent-primary-dark: var(--brand-primary-dark);
--accent-primary-glow: rgba(var(--brand-primary-rgb), 0.25);
--accent-secondary: var(--brand-secondary); /* amber — reserve for live/ongoing */
--accent-secondary-light: var(--brand-secondary-light);
--accent-secondary-dark: var(--brand-secondary-dark);
/* Cool structural anchor — desaturated steel. Adopt for info states and
secondary surfaces so orange stays the ONLY thing that pops (Phase 1).
Defined here but not yet consumed anywhere, so it has no visual effect
until intentionally applied. */
--accent-steel: #6b8ba3;
--accent-steel-light: #8fa9bd;
--accent-steel-dark: #4f6f88;
--accent-steel-rgb: 107, 139, 163;
--accent-steel-glow: rgba(107, 139, 163, 0.22);
/* Text (dark theme) — secondary/muted bumped one slate step LIGHTER for better
readability on the dark navy surfaces (was slate-400/500). */
--text-primary: #ffffff;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-accent: var(--brand-primary-light);
/* Status */
--status-live: #22c55e;
--status-upcoming: #1863dc; /* battlefy blue */
--status-open: #06b6d4;
--status-ended: #64748b;
--status-cancelled: #e11d48; /* rose — distinct from coral brand */
--status-checkin: #f59e0b;
--status-disputed: #f59e0b; /* amber — was orange, which is now the brand */
--status-draft: #475569;
--status-pending: #94a3b8;
/* Legacy status mappings for compat */
--status-registration: var(--status-open);
--status-ongoing: var(--status-live);
--status-completed: var(--status-ended);
/* Spacing & Shapes */
--radius-xs: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-pill: 0px;
--clip-corner: polygon(
0 0,
calc(100% - 12px) 0,
100% 12px,
100% 100%,
0 100%
);
/* ═══════════════════════════════════════════════════════════════════
SPACING SCALE — 4px base. Use for section/padding rhythm so vertical
spacing stops being ad-hoc. Additive; adopt incrementally.
═══════════════════════════════════════════════════════════════════ */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--section-y: clamp(3rem, 6vw, 5.5rem); /* default vertical section padding */
/* ═══════════════════════════════════════════════════════════════════
TYPE SCALE — ~1.25 ratio, fluid at the top end. Additive.
═══════════════════════════════════════════════════════════════════ */
--fs-xs: 0.75rem; /* 12 */
--fs-sm: 0.875rem; /* 14 */
--fs-base: 1rem; /* 16 */
--fs-md: 1.125rem; /* 18 */
--fs-lg: 1.375rem; /* 22 */
--fs-xl: 1.75rem; /* 28 */
--fs-2xl: clamp(2rem, 3.5vw, 2.75rem);
--fs-3xl: clamp(2.5rem, 5vw, 3.75rem);
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-body: 1.6;
--tracking-tight: -0.02em;
--tracking-wide: 0.02em;
--tracking-label: 0.18em;
/* ═══════════════════════════════════════════════════════════════════
NEUTRAL RAMP — theme-invariant grayscale (Tailwind slate-equivalent).
Same literal values in light & dark; token CHOICE (which step reads as
bg vs text) is what changes per theme, not the ramp itself. Prefer
--text-* / --bg-* / --border-* semantic tokens where one fits; use these
directly for one-off neutrals that aren't clearly text/surface/border.
═══════════════════════════════════════════════════════════════════ */
--neutral-0: #ffffff;
--neutral-0: rgb(var(--neutral-0-rgb)); /* defense-in-depth: the plain #ffffff literal above was observed resolving to guaranteed-invalid at runtime in some builds (breaking every `var(--neutral-0)` text/bg site-wide, e.g. light-theme cards going transparent); redefining via the known-good rgb triplet guarantees it resolves to white */
--neutral-50: #f8fafc;
--neutral-100: #f1f5f9;
--neutral-200: #e2e8f0;
--neutral-300: #cbd5e1;
--neutral-400: #94a3b8;
--neutral-500: #64748b;
--neutral-600: #475569;
--neutral-700: #334155;
--neutral-800: #1e293b;
--neutral-900: #0f172a;
--neutral-950: #020617;
/* Shadow color triplet — pairs with rgba(var(--shadow-color), α) so each
shadow keeps its own bespoke offset/blur/alpha (zero visual change)
while the color component itself is tokenized. */
--shadow-color: 0, 0, 0;
/* ═══════════════════════════════════════════════════════════════════
EXTENDED / LEGACY SWATCHES — additive, theme-invariant.
These are colors that appear repeatedly in hand-authored CSS/views
but sit outside the semantic brand/status/neutral families above
(mostly pre-battlefy remnants or one-off accents). Named so every
color resolves to a token; NOT wired to re-theme with brand changes.
═══════════════════════════════════════════════════════════════════ */
--legacy-gray-900: #111827;
--legacy-gray-700: #374151;
--legacy-red-400: #f87171;
--legacy-red-500: #ef4444;
--legacy-red-600: #dc2626;
--legacy-red-700: #b91c1c;
--legacy-red-300: #fca5a5;
--legacy-red-200: #fecaca;
--legacy-red-100: #fee2e2;
--legacy-red-pure: #ff0000;
--legacy-cyan-300: #67e8f9;
--legacy-sky-400: #38bdf8;
--legacy-cyan-600: #0891b2;
--legacy-emerald-500: #10b981;
--legacy-emerald-400: #34d399;
--legacy-emerald-600: #059669;
--legacy-green-700: #15803d;
--legacy-violet-300: #c4b5fd;
--legacy-violet-300-alt: #a68ff2;
--legacy-purple-400: #c084fc;
--legacy-purple-200: #d8b4fe;
--legacy-indigo-400: #818cf8;
--legacy-indigo-800: #3f339c;
--legacy-orange-400: #fb923c;
--legacy-orange-500: #f97316;
--legacy-yellow-400: #facc15;
--legacy-yellow-500: #eab308;
--legacy-amber-200: #fde68a;
--legacy-gray-500: #6b7280;
--legacy-gray-800: #1f2937;
--legacy-gray-300: #d1d5db;
--legacy-gray-200: #e5e7eb;
--legacy-maroon-deep: #6b1c14;
--legacy-maroon-deepest: #3d0f0b;
--legacy-salmon-tint: #f89a8a;
--legacy-teal-muted: #65b7a7;
--legacy-teal-deep: #447d7b;
/* RGB triplets for use inside rgba(var(--x-rgb), alpha) */
--neutral-500-rgb: 148, 163, 184;
--text-muted-rgb: 100, 116, 139;
--st-success-rgb: 34, 197, 94;
--st-warning-rgb: 245, 158, 11;
--st-error-rgb: 225, 29, 72;
--legacy-scrim-rgb: 28, 23, 18;
--neutral-0-rgb: 255, 255, 255;
--legacy-red-500-rgb: 239, 68, 68;
--bd-amber-rgb: 251, 191, 36;
--bd-green-rgb: 74, 222, 128;
--legacy-red-400-rgb: 248, 113, 113;
--legacy-emerald-500-rgb: 16, 185, 129;
--legacy-cyan-400-rgb: 34, 211, 238;
--legacy-purple-500-rgb: 168, 85, 247;
--legacy-violet-600-rgb: 124, 58, 237;
--legacy-violet-300-rgb: 167, 139, 250;
--legacy-teal-200-rgb: 94, 234, 212;
--neutral-800-rgb: 30, 41, 59;
--neutral-950-rgb: 2, 6, 23;
--legacy-yellow-500-rgb: 234, 179, 8;
--legacy-teal-muted-rgb: 101, 183, 167;
--legacy-emerald-400-rgb: 52, 211, 153;
--legacy-sky-400-rgb: 56, 189, 248;
--legacy-blue-500-rgb: 59, 130, 246;
/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--brand-primary-deep), var(--brand-primary), var(--brand-primary-light));
--gradient-secondary: linear-gradient(135deg, var(--brand-secondary-dark), var(--brand-secondary), var(--brand-secondary-light));
--gradient-cta: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary), var(--brand-primary-light));
--gradient-hero: linear-gradient(135deg, #030712, #0a1120, #141a2e, #030712);
--gradient-card: linear-gradient(
145deg,
rgba(18, 24, 38, 0.9),
rgba(10, 14, 26, 0.95)
);
--gradient-text: linear-gradient(120deg, var(--brand-primary-light), var(--brand-primary), var(--brand-primary-deep)); /* red-only ramp (was fading into --brand-secondary indigo, which read as a weird pink/purple on the wordmark) */
/* Glassmorphism */
--glass-bg: rgba(6, 10, 20, 0.75);
--glass-border: rgba(var(--brand-primary-rgb), 0.18);
--glass-blur: blur(16px) saturate(1.8);
/* Dialogs & overlays */
--overlay-backdrop: rgba(2, 4, 10, 0.78);
--overlay-panel-bg: rgba(18, 24, 38, 0.96);
--overlay-panel-border: rgba(148, 163, 184, 0.26);
--overlay-panel-shadow: 0 28px 70px rgba(1, 2, 6, 0.62);
/* Modal & Form Elements */
--modal-bg: var(--bg-secondary);
--modal-border: var(--border-default);
--modal-header-bg: var(--gradient-primary);
--form-input-bg: var(--bg-inset);
--form-input-border: var(--border-subtle);
--form-input-focus-border: var(--accent-blue);
--form-label-color: var(--text-secondary);
--button-fab-bg: var(--gradient-primary);
--button-fab-shadow: 0 10px 25px var(--accent-blue-glow);
/* ------ Legacy Derived tokens (remapped to new accent blue) ------ */
--teal-glow-xs: rgba(var(--brand-primary-rgb), 0.05);
--teal-glow-sm: rgba(var(--brand-primary-rgb), 0.08);
--teal-glow-md: rgba(var(--brand-primary-rgb), 0.14);
--teal-glow-lg: rgba(var(--brand-primary-rgb), 0.2);
--teal-glow-xl: rgba(var(--brand-primary-rgb), 0.25);
--teal-border-sm: rgba(var(--brand-primary-rgb), 0.3);
--teal-border-md: rgba(var(--brand-primary-rgb), 0.45);
--teal-border-lg: rgba(var(--brand-primary-rgb), 0.6);
--teal-border-xl: rgba(var(--brand-primary-rgb), 0.75);
--teal-border-solid: rgba(var(--brand-primary-rgb), 0.9);
/* ------ Status semantic tokens --------------------------------------------------------------------------------------------- */
--st-success: #22c55e;
--st-success-dark: #16a34a;
--st-success-bg: rgba(34, 197, 94, 0.1);
--st-success-brd: rgba(34, 197, 94, 0.35);
/* Error uses rose (not red) so it stays distinct from the coral brand accent */
--st-error: #e11d48;
--st-error-dark: #be123c;
--st-error-bg: rgba(225, 29, 72, 0.1);
--st-error-brd: rgba(225, 29, 72, 0.35);
--st-warning: #f59e0b;
--st-warning-dark: #b45309;
--st-warning-bg: rgba(245, 158, 11, 0.1);
--st-warning-brd: rgba(245, 158, 11, 0.35);
--st-info: #1863dc;
--st-info-dark: #1d4ed8;
--st-info-bg: rgba(24, 99, 220, 0.1);
--st-info-brd: rgba(24, 99, 220, 0.35);
/* ------ Badge color tokens (Legacy compat) --------------------------------------------------------- */
--bd-purple: var(--brand-primary-light);
--bd-purple-bg: rgba(var(--brand-primary-rgb), 0.2);
--bd-purple-brd: rgba(var(--brand-primary-rgb), 0.4);
--bd-cyan: var(--brand-secondary-light);
--bd-cyan-bg: rgba(var(--brand-secondary-rgb), 0.15);
--bd-cyan-brd: rgba(var(--brand-secondary-rgb), 0.3);
--bd-green: #4ade80;
--bd-green-bg: rgba(34, 197, 94, 0.15);
--bd-green-brd: rgba(34, 197, 94, 0.3);
--bd-red: #fb7185;
--bd-red-bg: rgba(225, 29, 72, 0.15);
--bd-red-brd: rgba(225, 29, 72, 0.3);
--bd-amber: #fbbf24;
--bd-amber-bg: rgba(245, 158, 11, 0.15);
--bd-amber-brd: rgba(245, 158, 11, 0.3);
--bd-slate: #94a3b8;
--bd-slate-bg: rgba(100, 116, 139, 0.2);
--bd-slate-brd: rgba(100, 116, 139, 0.3);
/* ------ Shadcn UI Design Token Bridge (HSL) ---------------------------------------- */
/* Maps our palette to Shadcn standard names so Tailwind bg-background etc. work */
--background: 222 71% 4%; /* #030712 navy */
--foreground: 210 40% 95%; /* #f1f5f9 */
--card: 222 36% 11%; /* #121826 */
--card-foreground: 210 40% 95%;
--popover: 222 44% 7%;
--popover-foreground: 210 40% 95%;
--primary: var(--brand-h) var(--brand-s) var(--brand-l); /* brand primary (coral) */
--primary-foreground: 0 0% 100%;
--secondary: 222 36% 11%; /* #121826 */
--secondary-foreground: 210 40% 95%;
--muted: 219 27% 19%; /* #232c3d */
--muted-foreground: 217 12% 62%;
--accent: var(--brand-h) var(--brand-s) var(--brand-l); /* brand primary (coral) */
--accent-foreground: 0 0% 100%;
--destructive: 347 77% 45%; /* rose */
--destructive-foreground: 210 40% 98%;
--border: 217 30% 18%; /* cool slate border */
--input: 222 33% 11%;
--ring: var(--brand-h) var(--brand-s) var(--brand-l);
--sidebar-bg: 222 44% 7%;
--sidebar-border: 217 30% 18%;
--sidebar-foreground: 215 20% 65%;
--sidebar-active-bg: var(--brand-h) var(--brand-s) var(--brand-l) / 0.18;
--sidebar-hover-bg: var(--brand-h) var(--brand-s) var(--brand-l) / 0.1;
--radius-shadcn: 0px;
}
html[data-theme="light"] {
/* ── BRAND CONTROL — light theme (deeper coral for contrast on white) ── */
--brand-primary: #d93a2b; /* coral, deepened for AA on white */
--brand-primary-light: #f04a38; /* coral-500 */
--brand-primary-dark: #b32e1f; /* coral-700 */
--brand-primary-deep: #8f2417; /* coral-800 */
--brand-primary-rgb: 217, 58, 43;
--brand-secondary: #5847c9; /* indigo, deepened */
--brand-secondary-light: #6c5ce7; /* indigo-500 */
--brand-secondary-dark: #43349e; /* indigo-700 */
--brand-secondary-rgb: 88, 71, 201;
--brand-h: 6;
--brand-s: 68%;
--brand-l: 51%;
/* Cool structural anchor — deeper steel for contrast on light grounds */
--accent-steel: #3f627c;
--accent-steel-light: #5b7f99;
--accent-steel-dark: #2c4a60;
--accent-steel-rgb: 63, 98, 124;
--accent-steel-glow: rgba(63, 98, 124, 0.16);
--bg-primary: #f5f7fb;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-card-hover: #eef1f7;
--bg-elevated: #e4e8f0;
--bg-inset: #eef1f7;
/* Text (light theme) — secondary/muted bumped one slate step DARKER for better
readability on white/near-white surfaces (muted was slate-400 ≈ 2.6:1, washed out). */
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
--text-accent: var(--brand-primary-dark);
/* Accents (derived from light brand ramp) */
--accent-blue: var(--brand-primary);
--accent-blue-light: var(--brand-primary-light);
--accent-blue-dark: var(--brand-primary-dark);
--accent-blue-glow: rgba(var(--brand-primary-rgb), 0.15);
--accent-violet: var(--brand-secondary);
--accent-violet-light: var(--brand-secondary-light);
--accent-cyan-pure: var(--brand-secondary-dark);
--accent-orange: var(--brand-primary);
/* Backward Compatibility Remapping for Light Theme */
--accent-purple: var(--accent-blue);
--accent-purple-light: var(--accent-blue-light);
--accent-purple-dark: var(--accent-blue-dark);
--accent-cyan: var(--accent-violet);
--accent-cyan-light: var(--accent-violet-light);
--accent-gold: var(--brand-secondary-dark);
/* Brand text gradient — darker stops for readability on light backgrounds */
--gradient-text: linear-gradient(120deg, var(--brand-primary), var(--brand-primary-dark), var(--brand-primary-deep)); /* red-only ramp for light theme (deeper reds for contrast on white; was ending in --brand-secondary-dark indigo) */
/* Borders */
--border-subtle: rgba(30, 41, 59, 0.08);
--border-default: rgba(var(--brand-primary-rgb), 0.15);
--border-bright: rgba(var(--brand-primary-rgb), 0.35);
--border-glow: rgba(var(--brand-primary-rgb), 0.5);
/* Status light overrides */
--status-ended: #64748b;
--status-live: #15803d;
--status-upcoming: #1d4ed8;
--status-open: #0891b2;
--status-cancelled: #be123c; /* rose — distinct from coral brand */
--status-disputed: #b45309; /* amber (was orange, now the brand) */
--glass-bg: rgba(255, 255, 255, 0.88);
--glass-border: rgba(var(--brand-primary-rgb), 0.16);
--overlay-backdrop: rgba(15, 23, 42, 0.2);
--overlay-panel-bg: rgba(255, 255, 255, 0.97);
--overlay-panel-border: rgba(30, 41, 59, 0.12);
--overlay-panel-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
/* Modal & Form Elements - Light Mode */
--modal-bg: #ffffff;
--modal-border: rgba(30, 41, 59, 0.1);
--modal-header-bg: var(--gradient-primary);
--form-input-bg: #f1f5f9;
--form-input-border: rgba(30, 41, 59, 0.15);
--form-input-focus-border: var(--accent-blue);
--form-label-color: #334155;
--button-fab-bg: var(--gradient-primary);
--button-fab-shadow: 0 10px 25px rgba(var(--brand-primary-rgb), 0.2);
/* ------ Status semantic tokens --- light overrides ------------------------------------ */
--st-success: #15803d;
--st-success-dark: #15803d;
--st-success-bg: rgba(22, 163, 74, 0.1);
--st-success-brd: rgba(22, 163, 74, 0.4);
--st-error: #be123c;
--st-error-dark: #9f1239;
--st-error-bg: rgba(190, 18, 60, 0.08);
--st-error-brd: rgba(190, 18, 60, 0.38);
--st-warning: #92400e;
--st-warning-dark: #b45309;
--st-warning-bg: rgba(180, 83, 9, 0.08);
--st-warning-brd: rgba(180, 83, 9, 0.38);
--st-info: #1e40af;
--st-info-dark: #1e3a8a;
--st-info-bg: rgba(30, 64, 175, 0.08);
--st-info-brd: rgba(30, 64, 175, 0.3);
/* ------ Badge color tokens --- light overrides --------------------------------------------- */
--bd-purple: var(--brand-primary-dark);
--bd-purple-bg: rgba(var(--brand-primary-rgb), 0.14);
--bd-purple-brd: rgba(var(--brand-primary-rgb), 0.3);
--bd-cyan: var(--brand-secondary-dark);
--bd-cyan-bg: rgba(var(--brand-secondary-rgb), 0.12);
--bd-cyan-brd: rgba(var(--brand-secondary-rgb), 0.3);
--bd-green: #14532d;
--bd-green-bg: rgba(22, 163, 74, 0.14);
--bd-green-brd: rgba(22, 163, 74, 0.3);
--bd-red: #9f1239;
--bd-red-bg: rgba(190, 18, 60, 0.12);
--bd-red-brd: rgba(190, 18, 60, 0.3);
--bd-amber: #78350f;
--bd-amber-bg: rgba(180, 83, 9, 0.12);
--bd-amber-brd: rgba(180, 83, 9, 0.3);
--bd-slate: #334155;
--bd-slate-bg: rgba(100, 116, 139, 0.1);
--bd-slate-brd: rgba(100, 116, 139, 0.22);
/* ------ Flash message overrides for light theme ------------------------------------ */
/* ------ Shadcn UI Design Token Bridge (HSL) — Light Mode -------------------------- */
--background: 222 43% 97%; /* #f5f7fb */
--foreground: 222 47% 11%; /* #0f172a */
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--primary: var(--brand-h) var(--brand-s) var(--brand-l); /* brand primary (light) */
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222 47% 11%;
--muted: 210 40% 96%;
--muted-foreground: 215 16% 47%; /* #64748b */
--accent: 210 40% 96%;
--accent-foreground: 222 47% 11%;
--destructive: 347 77% 50%; /* rose */
--destructive-foreground: 210 40% 98%;
--border: 214 32% 91%; /* #e2e8f0 */
--input: 214 32% 91%;
--ring: var(--brand-h) var(--brand-s) var(--brand-l);
--sidebar-bg: 0 0% 100%;
--sidebar-border: 214 32% 91%;
--sidebar-foreground: 215 16% 47%;
--sidebar-active-bg: var(--brand-h) var(--brand-s) var(--brand-l) / 0.1;
--sidebar-hover-bg: var(--brand-h) var(--brand-s) var(--brand-l) / 0.06;
}
@media (forced-colors: active) {
*:focus-visible {
outline: 2px solid CanvasText !important;
outline-offset: 2px !important;
}
}
/* ────────────────────────────────────────────────────────────────────────────
Skeleton / Shimmer Animations
Usage: class="skeleton" (pulse fade, default)
class="skeleton skeleton-shimmer" (directional sweep)
───────────────────────────────────────────────────────────────────────────── */
@keyframes skeleton-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes skeleton-shimmer {
100% {
transform: translateX(100%);
}
}
.skeleton {
border-radius: 0.375rem;
background: rgba(var(--neutral-500-rgb), 0.1);
animation: skeleton-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
html[data-theme="light"] .skeleton {
background: rgba(var(--legacy-scrim-rgb), 0.08);
}
.skeleton-shimmer {
position: relative;
overflow: hidden;
animation: none;
}
.skeleton-shimmer::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--neutral-0-rgb), 0.06) 40%,
rgba(var(--neutral-0-rgb), 0.12) 60%,
transparent 100%
);
animation: skeleton-shimmer 1.8s ease infinite;
}
html[data-theme="light"] .skeleton-shimmer::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--shadow-color), 0.03) 40%,
rgba(var(--shadow-color), 0.06) 60%,
transparent 100%
);
}
html[data-theme="light"] .flash-success {
background: var(--st-success-bg);
border-bottom-color: var(--st-success-brd);
color: var(--st-success);
}
html[data-theme="light"] .flash-error {
background: var(--st-error-bg);
border-bottom-color: var(--st-error-brd);
color: var(--st-error);
}
html[data-theme="light"] .flash-info {
background: var(--st-info-bg);
border-bottom-color: var(--st-info-brd);
color: var(--st-info);
}
/* ---------------- Reset & Base ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: "Plus Jakarta Sans", "Manrope", "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(
ellipse 80% 50% at 20% -10%,
rgba(var(--brand-primary-rgb), 0.18) 0%,
transparent 60%
),
radial-gradient(
ellipse 60% 40% at 80% 110%,
rgba(var(--brand-secondary-rgb), 0.12) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
}
/* Theme switch cinematic ripple and full-page transition state */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0;
}
html.theme-switching body::after {
background: radial-gradient(
circle at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%),
rgba(var(--brand-primary-rgb), 0.3) 0%,
rgba(var(--brand-primary-rgb), 0.12) 24%,
rgba(var(--brand-secondary-rgb), 0.08) 42%,
transparent 62%
);
animation: theme-ripple-arc 560ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
html.theme-switching,
html.theme-switching body,
html.theme-switching #mainNav,
html.theme-switching #mobileMenu,
html.theme-switching #topbar,
html.theme-switching #sidebar,
html.theme-switching .card-border,
html.theme-switching .angular-card,
html.theme-switching .db-card,
html.theme-switching .esports-btn,
html.theme-switching .sidebar-link,
html.theme-switching .topbar-btn,
html.theme-switching .theme-toggle,
html.theme-switching .notif-item,
html.theme-switching .challenge-card,
html.theme-switching .application-card,
html.theme-switching .stat-card {
transition:
background-color 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
color 280ms ease,
border-color 320ms ease,
box-shadow 360ms ease,
fill 280ms ease,
stroke 280ms ease;
}
.theme-toggle.theme-animating {
animation: theme-toggle-bounce 560ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes theme-ripple-arc {
0% {
opacity: 0;
transform: scale(0.85);
filter: saturate(115%);
}
35% {
opacity: 0.95;
}
100% {
opacity: 0;
transform: scale(1.2);
filter: saturate(100%);
}
}
@keyframes theme-toggle-bounce {
0% {
transform: scale(1);
}
30% {
transform: scale(0.9) rotate(-12deg);
}
65% {
transform: scale(1.08) rotate(10deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
html[data-theme="light"] body::before {
background:
radial-gradient(
ellipse 85% 58% at 12% -8%,
rgba(15, 118, 110, 0.12) 0%,
transparent 62%
),
radial-gradient(
ellipse 70% 45% at 88% 108%,
rgba(234, 88, 12, 0.1) 0%,
transparent 62%
);
}
main.page-content {
flex: 1;
position: relative;
z-index: 1;
}
h1,
h2,
h3,
h4,
h5 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
}
a {
color: var(--accent-purple-light);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--accent-purple);
}
img {
display: block;
max-width: 100%;
}
code {
font-family: "Courier New", monospace;
background: var(--bg-elevated);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--accent-purple-dark);
border-radius: 3px;
}
/* ---------------- Typography Utilities -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.text-gradient {
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-accent-cyan {
color: var(--accent-violet);
}
.text-accent-purple {
color: var(--accent-blue);
}
.text-muted {
color: var(--text-secondary);
font-size: 0.875rem;
}
.text-warning {
color: var(--accent-gold);
}
.text-danger {
color: var(--status-cancelled);
}
.required {
color: var(--status-cancelled);
}
/* Glow effects */
.glow-cyan {
color: var(--accent-cyan);
text-shadow: 0 0 12px rgba(var(--brand-primary-rgb), 0.6);
}
.glow-purple {
color: var(--accent-purple);
text-shadow: 0 0 12px rgba(var(--brand-primary-rgb), 0.6);
}
.glow-gold {
color: var(--accent-gold);
text-shadow: 0 0 12px rgba(var(--st-warning-rgb), 0.6);
}
/* ------ Timezone picker --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.timezone-picker {
display: none;
position: relative;
}
.js-enabled .timezone-picker {
display: block !important;
}
.js-enabled .timezone-select-hidden {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.timezone-picker-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
text-align: left;
width: 100%;
}
.timezone-picker-value {
display: flex;
gap: 0.45rem;
align-items: center;
flex-wrap: wrap;
}
.timezone-pill-offset,
.timezone-pill-name,
.timezone-option-offset,
.timezone-option-name {
display: inline-flex;
align-items: center;
border-radius: 999px;
font-weight: 600;
line-height: 1.2;
}
.timezone-pill-offset {
padding: 0.12rem 0.42rem;
background: rgba(14, 165, 233, 0.16);
color: #0ea5e9;
}
.timezone-pill-name {
padding: 0.12rem 0.42rem;
background: rgba(var(--legacy-purple-500-rgb), 0.16);
color: #a855f7;
}
.timezone-dropdown-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.35rem);
z-index: 30;
max-height: 16rem;
overflow: auto;
border: 1px solid rgba(var(--text-muted-rgb), 0.45);
border-radius: 0.6rem;
background: rgba(var(--legacy-scrim-rgb), 0.98);
box-shadow: 0 12px 28px rgba(var(--neutral-950-rgb), 0.45);
padding: 0.35rem;
}
.timezone-option-row {
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.5rem;
border-radius: 0.45rem;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
transition:
background-color 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
}
.timezone-option-offset {
padding: 0.1rem 0.38rem;
background: rgba(14, 165, 233, 0.16);
color: var(--brand-secondary-light);
font-size: 0.78rem;
}
.timezone-option-name {
color: var(--legacy-violet-300);
font-size: 0.82rem;
}
.timezone-option-row:hover {
background: rgba(var(--neutral-800-rgb), 0.98);
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(var(--legacy-sky-400-rgb), 0.18);
}
.timezone-option-row.is-selected {
background: rgba(15, 118, 110, 0.22);
box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.34);
}
.timezone-option-row.is-selected .timezone-option-name {
color: #e9d5ff;
}
html[data-theme="light"] .timezone-dropdown-menu {
background: rgba(var(--neutral-0-rgb), 0.98);
border-color: rgba(var(--legacy-scrim-rgb), 0.12);
box-shadow: 0 14px 30px rgba(var(--legacy-scrim-rgb), 0.12);
}
html[data-theme="light"] .timezone-option-row:hover {
background: rgba(226, 232, 240, 0.92);
box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.2);
}
html[data-theme="light"] .timezone-pill-offset,
html[data-theme="light"] .timezone-option-offset {
background: rgba(13, 148, 136, 0.12);
color: #0d9488;
}
html[data-theme="light"] .timezone-pill-name,
html[data-theme="light"] .timezone-option-name {
background: rgba(234, 88, 12, 0.12);
color: #c2410c;
}
/* ---------------- NAVBAR ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
height: 64px;
}
.navbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
height: 100%;
display: flex;
align-items: center;
gap: 2rem;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--text-primary);
text-decoration: none;
flex-shrink: 0;
}
.brand-icon {
font-size: 1.4rem;
}
.brand-accent {
color: var(--accent-cyan);
}
.navbar-links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
flex: 1;
}
.nav-link {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
padding: 0.4rem 0.75rem;
border-radius: var(--radius-sm);
transition:
color 0.2s,
background 0.2s;
}
.nav-link:hover {
color: var(--text-primary);
background: rgba(var(--neutral-0-rgb), 0.06);
}
.nav-link-admin {
color: var(--accent-purple-light);
}
.navbar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
}
/* Notification Bell */
.notif-bell {
position: relative;
color: var(--text-secondary);
padding: 0.4rem;
border-radius: var(--radius-sm);
transition: color 0.2s;
}
.notif-bell:hover {
color: var(--text-primary);
}
.notif-badge {
position: absolute;
top: -2px;
right: -2px;
background: var(--accent-purple);
color: var(--neutral-0);
font-size: 0.6rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
/* Avatar Dropdown */
.nav-dropdown {
position: relative;
}
.nav-avatar-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 0.3rem 0.75rem 0.3rem 0.4rem;
cursor: pointer;
color: var(--text-primary);
font-size: 0.9rem;
transition:
border-color 0.2s,
background 0.2s;
}
.nav-avatar-btn:hover {
border-color: var(--accent-purple);
background: var(--teal-glow-sm);
}
.nav-avatar-img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.nav-avatar-init {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-purple);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
color: var(--neutral-0);
}
.nav-username {
font-weight: 500;
}
.caret {
transition: transform 0.2s;
}
.nav-avatar-btn[aria-expanded="true"] .caret {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 180px;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: 0 20px 60px rgba(var(--shadow-color), 0.5);
padding: 0.4rem;
display: none;
z-index: 200;
}
.nav-dropdown-menu.show {
display: block;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.875rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition:
color 0.15s,
background 0.15s;
}
.dropdown-item:hover {
color: var(--text-primary);
background: rgba(var(--neutral-0-rgb), 0.06);
}
.dropdown-item-danger {
color: var(--status-cancelled);
}
.dropdown-item-danger:hover {
background: rgba(var(--legacy-red-500-rgb), 0.12);
}
.dropdown-divider {
height: 1px;
background: var(--border-subtle);
margin: 0.4rem 0;
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.4rem;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text-secondary);
border-radius: 2px;
transition: 0.3s;
}
/* ---------------- FLASH MESSAGES -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.flash {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
font-size: 0.9rem;
font-weight: 500;
position: relative;
z-index: 50;
}
.flash-success {
background: var(--st-success-bg);
border-bottom: 1px solid var(--st-success-brd);
color: var(--st-success);
}
.flash-error {
background: var(--st-error-bg);
border-bottom: 1px solid var(--st-error-brd);
color: var(--st-error);
}
.flash-info {
background: var(--st-info-bg);
border-bottom: 1px solid var(--st-info-brd);
color: var(--st-info);
}
.flash-close {
margin-left: auto;
background: none;
border: none;
color: inherit;
font-size: 1.25rem;
cursor: pointer;
opacity: 0.7;
line-height: 1;
}
.flash-close:hover {
opacity: 1;
}
/* ---------------- BUTTONS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.esports-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1.25rem;
border-radius: var(--radius-sm);
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
border: 1px solid rgba(var(--neutral-0-rgb), 0.14);
transition: all 0.2s;
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
background: linear-gradient(
135deg,
var(--accent-purple-dark),
var(--accent-purple)
);
color: var(--neutral-0);
box-shadow: 0 8px 22px rgba(15, 118, 110, 0.24);
}
.esports-btn:hover {
background: linear-gradient(
135deg,
var(--accent-purple),
var(--accent-purple-light)
);
color: var(--neutral-0);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(15, 118, 110, 0.28);
}
.esports-btn-primary {
background: linear-gradient(
135deg,
var(--accent-purple-dark),
var(--accent-purple)
);
color: var(--neutral-0);
border-color: rgba(var(--neutral-0-rgb), 0.14);
}
.esports-btn-primary:hover {
background: linear-gradient(
135deg,
var(--accent-purple),
var(--accent-purple-light)
);
color: var(--neutral-0);
}
.esports-btn-secondary,
.esports-btn-cyan {
background: linear-gradient(
135deg,
var(--accent-cyan),
var(--accent-cyan-light)
);
color: var(--neutral-0);
border-color: rgba(var(--neutral-0-rgb), 0.14);
box-shadow: 0 8px 22px rgba(234, 88, 12, 0.24);
}
.esports-btn-secondary:hover,
.esports-btn-cyan:hover {
background: linear-gradient(135deg, var(--accent-cyan-light), #fed7aa);
color: var(--neutral-0);
transform: translateY(-1px);
}
.esports-btn-ghost,
.esports-btn-outline {
background: transparent;
color: var(--text-primary);
border-color: var(--border-default);
clip-path: none;
}
.esports-btn-ghost:hover,
.esports-btn-outline:hover {
color: var(--text-primary);
border-color: var(--border-bright);
background: rgba(var(--neutral-500-rgb), 0.08);
}
.esports-btn-danger {
background: var(--st-error-bg);
color: var(--st-error);
border-color: var(--st-error-brd);
}
.esports-btn-danger:hover {
background: rgba(var(--legacy-red-500-rgb), 0.25);
border-color: rgba(var(--legacy-red-500-rgb), 0.7);
color: var(--neutral-0);
}
.esports-btn-warning {
background: var(--st-warning-bg);
color: var(--st-warning);
border-color: var(--st-warning-brd);
}
.esports-btn-warning:hover {
background: rgba(var(--st-warning-rgb), 0.25);
border-color: var(--accent-gold);
}
.esports-btn:disabled,
.esports-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.btn-sm,
.esports-btn-sm {
padding: 0.35rem 0.9rem;
font-size: 0.85rem;
}
.btn-lg {
padding: 0.75rem 2rem;
font-size: 1.1rem;
}
.btn-xs {
padding: 0.2rem 0.6rem;
font-size: 0.78rem;
}
.btn-block {
width: 100%;
justify-content: center;
}
.btn-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* ---------------- CARDS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.esports-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--text-primary);
text-decoration: none;
transition:
border-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
}
.esports-card-hover:hover {
border-color: var(--accent-purple);
transform: translateY(-3px);
box-shadow: 0 12px 40px var(--teal-glow-lg);
background: var(--bg-card-hover);
}
.card-banner {
height: 140px;
background: var(--bg-elevated);
background-size: cover;
background-position: center;
position: relative;
}
.card-banner-placeholder {
background: linear-gradient(
135deg,
var(--accent-purple-dark),
var(--bg-elevated)
);
}
.card-body {
padding: 1.1rem;
flex: 1;
}
.card-badges {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.card-title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.card-meta {
display: flex;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--text-secondary);
flex-wrap: wrap;
}
.card-date {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 0.4rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
}
/* Card Panel (internal sections) */
.card-panel {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.panel-title {
font-size: 1.1rem;
margin-bottom: 1.25rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
}
/* ---------------- BADGES -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.badge-status,
.badge-format,
.badge-role,
.badge-region,
.badge-count,
.badge-sev {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 99px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* Shared badge utilities used across match views */
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
}
.badge-purple {
background: var(--bd-purple-bg);
color: var(--bd-purple);
border-color: var(--bd-purple-brd);
}
.badge-cyan {
background: var(--bd-cyan-bg);
color: var(--bd-cyan);
border-color: var(--bd-cyan-brd);
}
.badge-green {
background: var(--bd-green-bg);
color: var(--bd-green);
border-color: var(--bd-green-brd);
}
.badge-red {
background: var(--bd-red-bg);
color: var(--bd-red);
border-color: var(--bd-red-brd);
}
.badge-amber {
background: var(--bd-amber-bg);
color: var(--bd-amber);
border-color: var(--bd-amber-brd);
}
.badge-slate {
background: var(--bd-slate-bg);
color: var(--bd-slate);
border-color: var(--bd-slate-brd);
}
/* Status badges */
.badge-status-draft {
background: rgba(71, 85, 105, 0.2);
color: var(--text-secondary);
border: 1px solid rgba(71, 85, 105, 0.4);
}
.badge-status-visible {
background: rgba(99, 102, 241, 0.15);
color: var(--legacy-indigo-400);
border: 1px solid rgba(99, 102, 241, 0.4);
}
.badge-status-registration {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-md);
}
.badge-status-checkin {
background: rgba(var(--st-warning-rgb), 0.15);
color: var(--accent-gold);
border: 1px solid rgba(var(--st-warning-rgb), 0.4);
}
.badge-status-ongoing {
background: rgba(var(--st-success-rgb), 0.15);
color: var(--bd-green);
border: 1px solid rgba(var(--st-success-rgb), 0.4);
}
.badge-status-completed {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-md);
}
.badge-status-cancelled {
background: rgba(var(--legacy-red-500-rgb), 0.15);
color: var(--legacy-red-300);
border: 1px solid rgba(var(--legacy-red-500-rgb), 0.4);
}
.badge-status-disputed {
background: rgba(var(--st-warning-rgb), 0.15);
color: var(--accent-gold);
border: 1px solid rgba(var(--st-warning-rgb), 0.4);
}
.badge-status-pending {
background: rgba(var(--neutral-500-rgb), 0.1);
color: var(--text-secondary);
border: 1px solid var(--border-default);
}
.badge-status-registration_requested {
background: var(--teal-glow-sm);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-sm);
}
.badge-status-confirmed {
background: rgba(var(--st-success-rgb), 0.15);
color: var(--bd-green);
border: 1px solid rgba(var(--st-success-rgb), 0.4);
}
.badge-status-rejected {
background: rgba(var(--legacy-red-500-rgb), 0.15);
color: var(--legacy-red-300);
border: 1px solid rgba(var(--legacy-red-500-rgb), 0.4);
}
.badge-status-approved {
background: rgba(var(--st-success-rgb), 0.15);
color: var(--bd-green);
border: 1px solid rgba(var(--st-success-rgb), 0.4);
}
.badge-status-paid {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-md);
}
.badge-status-open {
background: rgba(24, 99, 220, 0.15);
color: #60a5fa;
border: 1px solid rgba(24, 99, 220, 0.35);
}
.badge-status-triaged {
background: rgba(var(--st-warning-rgb), 0.15);
color: var(--accent-gold);
border: 1px solid rgba(var(--st-warning-rgb), 0.35);
}
.badge-status-in_progress {
background: var(--teal-glow-sm);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-sm);
}
.badge-status-resolved {
background: rgba(var(--st-success-rgb), 0.12);
color: var(--bd-green);
border: 1px solid rgba(var(--st-success-rgb), 0.3);
}
.badge-status-wont_fix {
background: rgba(71, 85, 105, 0.2);
color: var(--text-muted);
border: 1px solid rgba(71, 85, 105, 0.3);
}
/* ------ Light theme badge-status overrides (bright dark-mode colours --- dark readable) ------ */
html[data-theme="light"] .badge-status-ongoing,
html[data-theme="light"] .badge-status-confirmed,
html[data-theme="light"] .badge-status-approved,
html[data-theme="light"] .badge-status-resolved {
color: #14532d;
background: rgba(22, 163, 74, 0.12);
border-color: rgba(22, 163, 74, 0.4);
}
html[data-theme="light"] .badge-status-cancelled,
html[data-theme="light"] .badge-status-rejected {
color: #7f1d1d;
background: rgba(220, 38, 38, 0.1);
border-color: rgba(220, 38, 38, 0.4);
}
html[data-theme="light"] .badge-status-disputed,
html[data-theme="light"] .badge-status-open {
color: #7c2d12;
background: rgba(194, 65, 12, 0.1);
border-color: rgba(194, 65, 12, 0.4);
}
html[data-theme="light"] .badge-status-registration_requested {
color: #0d5e5c;
background: rgba(13, 148, 136, 0.1);
border-color: rgba(13, 148, 136, 0.4);
}
html[data-theme="light"] .badge-sev-critical {
color: #7f1d1d;
background: rgba(220, 38, 38, 0.1);
border-color: rgba(220, 38, 38, 0.5);
}
html[data-theme="light"] .badge-sev-low {
color: #14532d;
background: rgba(22, 163, 74, 0.1);
border-color: rgba(22, 163, 74, 0.4);
}
html[data-theme="light"] .badge-sev-high {
color: #7c2d12;
background: rgba(194, 65, 12, 0.1);
border-color: rgba(194, 65, 12, 0.4);
}
html[data-theme="light"] .news-cat-announcements {
color: #14532d;
background: rgba(22, 163, 74, 0.1);
}
html[data-theme="light"] .badge-format-swiss {
color: #14532d;
background: rgba(22, 163, 74, 0.1);
border-color: rgba(22, 163, 74, 0.3);
}
html[data-theme="light"] .badge-role {
color: var(--accent-purple-dark);
background: rgba(13, 148, 136, 0.1);
border-color: rgba(13, 148, 136, 0.35);
}
/* Format badges */
.badge-format {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-sm);
}
.badge-format-se {
background: rgba(var(--brand-secondary-rgb), 0.12);
color: var(--accent-cyan);
border-color: rgba(var(--brand-secondary-rgb), 0.3);
}
.badge-format-de {
background: rgba(var(--st-warning-rgb), 0.12);
color: var(--accent-gold);
border-color: rgba(var(--st-warning-rgb), 0.3);
}
.badge-format-rrplayoffs,
.badge-format-rr_playoffs {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border-color: var(--teal-border-sm);
}
.badge-format-swiss {
background: rgba(var(--st-success-rgb), 0.12);
color: var(--bd-green);
border-color: rgba(var(--st-success-rgb), 0.3);
}
.badge-format-bo1 {
background: rgba(var(--neutral-500-rgb), 0.1);
color: var(--text-secondary);
border-color: var(--border-default);
}
.badge-format-bo3 {
background: rgba(var(--brand-secondary-rgb), 0.12);
color: var(--accent-cyan);
border-color: rgba(var(--brand-secondary-rgb), 0.3);
}
.badge-format-bo5 {
background: rgba(var(--st-warning-rgb), 0.12);
color: var(--accent-gold);
border-color: rgba(var(--st-warning-rgb), 0.3);
}
/* Role badge */
.badge-role {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
border: 1px solid var(--teal-border-sm);
text-transform: capitalize;
}
/* Badge count */
.badge-count {
background: var(--accent-purple);
color: var(--neutral-0);
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 0.65rem;
}
/* Severity */
.badge-sev-low {
background: rgba(var(--st-success-rgb), 0.12);
color: var(--bd-green);
border: 1px solid rgba(var(--st-success-rgb), 0.3);
}
.badge-sev-medium {
background: rgba(var(--st-warning-rgb), 0.15);
color: var(--accent-gold);
border: 1px solid rgba(var(--st-warning-rgb), 0.4);
}
.badge-sev-high {
background: rgba(251, 146, 60, 0.15);
color: var(--legacy-orange-400);
border: 1px solid rgba(251, 146, 60, 0.4);
}
.badge-sev-critical {
background: rgba(var(--legacy-red-500-rgb), 0.2);
color: var(--legacy-red-300);
border: 1px solid rgba(var(--legacy-red-500-rgb), 0.5);
}
/* ---------------- FORMS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 1;
}
.form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.form-label {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.form-hint {
font-size: 0.75rem;
color: var(--text-muted);
}
.form-section-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--accent-purple);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 1.5rem 0 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border-subtle);
}
.form-section-title:first-child {
margin-top: 0;
}
.form-details {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
margin: 0.5rem 0;
}
.form-details summary {
cursor: pointer;
color: var(--text-secondary);
font-size: 0.85rem;
user-select: none;
}
.form-control {
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 0.55rem 0.9rem;
font-size: 0.9rem;
font-family: "Plus Jakarta Sans", sans-serif;
width: 100%;
transition:
border-color 0.2s,
box-shadow 0.2s;
appearance: none;
-webkit-appearance: none;
}
.form-control:focus {
outline: none;
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px var(--teal-glow-lg);
}
.form-control:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.form-control::placeholder {
color: var(--text-muted);
}
.form-control-xs {
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.2rem;
}
textarea.form-control {
resize: vertical;
line-height: 1.5;
}
.input-with-toggle {
position: relative;
}
.input-with-toggle .form-control {
padding-right: 2.5rem;
}
.input-toggle-btn {
position: absolute;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 1rem;
padding: 0;
line-height: 1;
}
/* Game IGN input with auto-fetch button */
.game-ign-input.form-control {
padding-right: 2.5rem;
}
.auto-fetch-btn {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
transition: all 0.2s;
}
.radio-group {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.radio-label {
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
color: var(--text-secondary);
font-size: 0.9rem;
}
.radio-label input[type="radio"] {
accent-color: var(--accent-purple);
width: 16px;
height: 16px;
}
.form-inline {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ---------------- TABLES -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.esports-table-wrap {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
}
.esports-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.esports-table thead {
background: var(--bg-elevated);
}
.esports-table th {
padding: 0.75rem 1rem;
text-align: left;
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.esports-table td {
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-secondary);
vertical-align: middle;
}
.esports-table tbody tr:last-child td {
border-bottom: none;
}
.esports-table tbody tr:hover td {
background: rgba(var(--neutral-0-rgb), 0.02);
}
.table-row-link {
cursor: pointer;
}
.table-row-link:hover td {
background: var(--teal-glow-xs);
}
.vs-cell {
color: var(--text-muted);
text-align: center;
font-weight: 700;
padding: 0 0.25rem;
}
.team-cell {
font-weight: 600;
color: var(--text-primary);
}
.team-winner {
color: var(--accent-cyan) !important;
}
/* ---------------- PAGE LAYOUT ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.page-container {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-container-narrow {
max-width: 720px;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.page-title {
font-size: 2rem;
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
}
.page-sub {
font-size: 0.95rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.section-block {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.section-title {
font-size: 1.5rem;
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
}
.section-link {
font-size: 0.85rem;
color: var(--accent-purple-light);
}
/* ---------------- HERO ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.hero {
position: relative;
padding: 6rem 1.5rem 5rem;
text-align: center;
overflow: hidden;
}
.hero-bg-glow {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 70% 60% at 50% 0%,
var(--teal-glow-lg) 0%,
transparent 70%
);
pointer-events: none;
}
.hero-content {
position: relative;
max-width: 760px;
margin: 0 auto;
}
.hero-eyebrow {
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-cyan);
font-weight: 600;
margin-bottom: 0.75rem;
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.1;
margin-bottom: 1.25rem;
}
.hero-sub {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 580px;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ---------------- STATS STRIP ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.stats-strip {
background: var(--bg-card);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.stats-strip-inner {
max-width: 1280px;
margin: 0 auto;
padding: 1.5rem;
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.stat-num {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 2rem;
font-weight: 700;
color: var(--accent-cyan);
}
.stat-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
/* ---------------- LEADERBOARD ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.leaderboard-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.leaderboard-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
transition:
border-color 0.2s,
background 0.2s;
text-decoration: none;
color: var(--text-primary);
}
.leaderboard-row:hover {
border-color: var(--accent-purple);
background: var(--bg-card-hover);
}
.lb-rank {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 1rem;
color: var(--text-muted);
width: 2.5rem;
flex-shrink: 0;
}
.lb-rank-top {
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(var(--st-warning-rgb), 0.5);
}
.lb-logo {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.lb-logo-init {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent-purple-dark);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--neutral-0);
font-size: 0.9rem;
}
.lb-name {
font-weight: 600;
flex: 1;
font-size: 0.95rem;
}
.lb-tag {
color: var(--text-muted);
font-size: 0.8rem;
}
.lb-elo {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 1rem;
}
.lb-record {
color: var(--text-secondary);
font-size: 0.82rem;
white-space: nowrap;
}
/* ---------------- NEWS GRID -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.news-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
border-color 0.2s,
transform 0.2s;
text-decoration: none;
color: var(--text-primary);
}
.news-card:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
.news-card-thumb {
height: 160px;
background: var(--bg-elevated);
background-size: cover;
background-position: center;
}
.news-thumb-placeholder {
background: linear-gradient(
135deg,
var(--bg-elevated),
var(--accent-purple-dark)
);
}
.news-card-body {
padding: 1rem;
flex: 1;
}
.news-cat {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 4px;
}
.news-cat-news {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
}
.news-cat-patch_notes {
background: rgba(var(--st-warning-rgb), 0.15);
color: var(--accent-gold);
}
.news-cat-highlights {
background: var(--teal-glow-md);
color: var(--accent-purple-light);
}
.news-cat-announcements {
background: rgba(var(--st-success-rgb), 0.12);
color: var(--bd-green);
}
.news-card-title {
font-size: 1rem;
font-weight: 700;
margin: 0.5rem 0 0.4rem;
line-height: 1.3;
}
.news-card-excerpt {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-meta {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.75rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
/* News categories for show page */
.news-cat-news.large,
.news-cat-patch_notes.large,
.news-cat-highlights.large,
.news-cat-announcements.large {
font-size: 0.78rem;
padding: 0.25rem 0.75rem;
}
/* ---------------- ARTICLE PAGE -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.article-layout {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.article-hero {
height: 360px;
background: var(--bg-elevated);
background-size: cover;
background-position: center;
border-radius: var(--radius-lg);
margin-bottom: 2rem;
}
.article-header {
margin-bottom: 2rem;
}
.article-title {
font-size: 2.2rem;
line-height: 1.2;
margin: 0.75rem 0 0.5rem;
}
.article-meta {
color: var(--text-muted);
font-size: 0.82rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.article-body {
color: var(--text-secondary);
line-height: 1.8;
font-size: 0.95rem;
}
.article-body h2,
.article-body h3 {
margin: 1.5rem 0 0.5rem;
color: var(--text-primary);
}
.article-body p {
margin-bottom: 1rem;
}
.article-body ul,
.article-body ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.article-body li {
margin-bottom: 0.4rem;
}
.article-body img {
max-width: 100%;
border-radius: var(--radius-md);
margin: 1rem 0;
}
.article-editor {
font-family: "Courier New", monospace;
font-size: 0.875rem;
}
/* Rich story typography (news detail redesign) */
.news-story-prose {
color: var(--text-secondary);
line-height: 1.85;
font-size: 0.98rem;
}
.news-story-prose > :first-child {
margin-top: 0;
}
.news-story-prose h2,
.news-story-prose h3,
.news-story-prose h4 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
color: var(--text-primary);
margin-top: 2rem;
margin-bottom: 0.6rem;
line-height: 1.2;
}
.news-story-prose h2 {
font-size: 1.7rem;
border-left: 3px solid var(--teal-border-solid);
padding-left: 0.7rem;
}
.news-story-prose h3 {
font-size: 1.35rem;
color: var(--legacy-purple-200);
}
.news-story-prose p {
margin-bottom: 1.05rem;
}
.news-story-prose a {
color: var(--legacy-cyan-300);
text-decoration: underline;
text-underline-offset: 2px;
}
.news-story-prose a:hover {
color: #a5f3fc;
}
.news-story-prose blockquote {
margin: 1.2rem 0;
padding: 0.9rem 1rem;
border-left: 4px solid var(--accent-purple);
background: var(--teal-glow-sm);
color: var(--text-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.news-story-prose pre,
.news-story-prose code {
font-family: Consolas, "Courier New", monospace;
}
.news-story-prose pre {
background: #0a1020;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.9rem 1rem;
overflow: auto;
margin: 1rem 0;
}
.news-story-prose code {
background: rgba(var(--legacy-scrim-rgb), 0.9);
border: 1px solid rgba(var(--neutral-500-rgb), 0.2);
border-radius: 5px;
padding: 0.08rem 0.35rem;
font-size: 0.9em;
}
.news-story-prose table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.92rem;
}
.news-story-prose th,
.news-story-prose td {
border: 1px solid var(--border-subtle);
padding: 0.55rem 0.65rem;
text-align: left;
}
.news-story-prose th {
background: var(--teal-glow-md);
color: var(--text-primary);
}
/* Body editor feature classes */
.news-story-prose u {
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.news-story-prose .lead {
font-size: 1.1rem;
color: #dbe7ff;
}
.news-story-prose .callout {
border-left: 4px solid rgba(var(--legacy-cyan-400-rgb), 0.75);
background: rgba(var(--legacy-cyan-400-rgb), 0.08);
padding: 0.75rem 0.9rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.news-story-prose .text-red {
color: var(--legacy-red-400);
}
.news-story-prose .text-orange {
color: var(--legacy-orange-400);
}
.news-story-prose .text-amber {
color: var(--st-warning);
}
.news-story-prose .text-yellow {
color: var(--legacy-yellow-400);
}
.news-story-prose .text-green {
color: var(--bd-green);
}
.news-story-prose .text-cyan {
color: var(--brand-secondary-light);
}
.news-story-prose .text-blue {
color: var(--brand-primary-light);
}
.news-story-prose .text-purple {
color: var(--legacy-purple-400);
}
.news-story-prose .text-pink {
color: #f472b6;
}
.news-story-prose .text-slate {
color: var(--neutral-300);
}
.news-story-prose .text-white {
color: var(--neutral-0);
}
.news-story-prose .text-muted {
color: var(--text-secondary);
}
.news-story-prose figure {
margin: 1rem 0;
}
.news-story-prose figure img,
.news-story-prose img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.news-story-prose figcaption {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 0.45rem;
text-align: center;
}
.news-story-prose figure.img-left,
.news-story-prose img.img-left {
float: left;
width: min(46%, 320px);
margin: 0.35rem 1rem 0.8rem 0;
}
.news-story-prose figure.img-right,
.news-story-prose img.img-right {
float: right;
width: min(46%, 320px);
margin: 0.35rem 0 0.8rem 1rem;
}
.news-story-prose figure.img-center,
.news-story-prose img.img-center {
display: block;
margin: 1rem auto;
float: none;
}
.news-story-prose figure.img-wide,
.news-story-prose img.img-wide {
width: 100%;
float: none;
margin: 1rem 0;
}
.news-story-prose figure.img-small,
.news-story-prose img.img-small {
width: min(34%, 240px);
}
.news-story-prose::after {
content: "";
display: block;
clear: both;
}
/* ---------------- RICH LEGACY EDITOR -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.rte-wrap {
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-elevated);
display: flex;
flex-direction: column;
}
.rte-wrap:focus-within {
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px var(--teal-glow-lg);
}
/* Toolbar */
.rte-toolbar {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 6px 8px;
background: var(--bg-card);
border-bottom: 1px solid var(--border-subtle);
align-items: center;
row-gap: 4px;
}
.rte-sep {
width: 1px;
height: 20px;
background: var(--border-subtle);
margin: 0 4px;
flex-shrink: 0;
}
.rte-btn {
background: none;
border: 1px solid transparent;
border-radius: 4px;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
min-width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
white-space: nowrap;
}
.rte-btn:hover {
background: rgba(var(--neutral-0-rgb), 0.07);
color: var(--text-primary);
border-color: var(--border-default);
}
.rte-btn.active {
background: var(--teal-glow-xl);
color: var(--accent-purple-light);
border-color: var(--teal-border-lg);
}
.rte-select {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 4px;
color: var(--text-secondary);
font-size: 0.78rem;
height: 26px;
padding: 0 6px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
max-width: 120px;
}
.rte-select:focus {
outline: none;
border-color: var(--accent-purple);
color: var(--text-primary);
}
/* Color swatch group */
.rte-color-group {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
}
.rte-color-swatch {
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(var(--neutral-0-rgb), 0.15);
cursor: pointer;
transition:
transform 0.1s,
border-color 0.1s;
flex-shrink: 0;
}
.rte-color-swatch:hover {
transform: scale(1.25);
border-color: var(--neutral-0);
}
/* Line numbers wrapper */
.rte-editor-wrap {
display: flex;
flex: 1;
min-height: 340px;
max-height: 700px;
overflow: hidden;
}
.rte-line-numbers {
min-width: 38px;
padding: 10px 6px 10px 8px;
background: var(--bg-card);
border-right: 1px solid var(--border-subtle);
text-align: right;
font-family: Consolas, "Courier New", monospace;
font-size: 0.78rem;
color: var(--neutral-600);
user-select: none;
line-height: 1.65;
overflow: hidden;
flex-shrink: 0;
}
.rte-line-numbers span {
display: block;
line-height: inherit;
}
/* The editable area */
.rte-content {
flex: 1;
padding: 10px 14px;
font-size: 0.93rem;
font-family: "Plus Jakarta Sans", sans-serif;
line-height: 1.65;
color: var(--text-primary);
overflow-y: auto;
max-height: 700px;
outline: none;
}
.rte-content:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
display: block;
}
/* styling inside the editor */
.rte-content h2 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 1.45rem;
color: var(--legacy-purple-200);
margin-top: 1rem;
margin-bottom: 0.3rem;
}
.rte-content h3 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 1.2rem;
color: #a5f3fc;
margin-top: 0.8rem;
margin-bottom: 0.25rem;
}
.rte-content h4 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 1.05rem;
margin-top: 0.7rem;
margin-bottom: 0.2rem;
}
.rte-content blockquote {
border-left: 3px solid var(--accent-purple);
padding-left: 0.75rem;
margin: 0.6rem 0;
color: var(--neutral-300);
}
.rte-content figure {
margin: 0.8rem 0;
}
.rte-content figure img,
.rte-content img {
max-width: 100%;
border-radius: 6px;
}
.rte-content figcaption {
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
margin-top: 0.3rem;
}
.rte-content code {
font-family: Consolas, monospace;
background: rgba(var(--legacy-scrim-rgb), 0.9);
padding: 0.05rem 0.3rem;
border-radius: 4px;
font-size: 0.88em;
}
/* Status bar */
.rte-statusbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 10px;
background: var(--bg-card);
border-top: 1px solid var(--border-subtle);
font-size: 0.72rem;
color: var(--neutral-600);
gap: 1rem;
}
.rte-statusbar-left {
display: flex;
gap: 0.75rem;
}
/* Image dialog */
.rte-img-dialog {
display: none;
position: absolute;
z-index: 300;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 1rem;
min-width: 300px;
box-shadow: 0 16px 48px rgba(var(--shadow-color), 0.5);
}
.rte-img-dialog.show {
display: block;
}
.rte-img-dialog-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 299;
}
.rte-img-dialog-backdrop.show {
display: block;
}
/* ---------------- AUTH PAGES ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.auth-container {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: calc(100vh - 128px);
padding: 3rem 1rem;
}
.auth-card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 2.5rem;
width: 100%;
max-width: 420px;
}
.auth-card-wide {
max-width: 620px;
}
.auth-header {
text-align: center;
margin-bottom: 2rem;
}
.auth-icon {
font-size: 2.5rem;
display: block;
margin-bottom: 0.75rem;
}
.auth-title {
font-size: 1.75rem;
}
.auth-sub {
color: var(--text-secondary);
font-size: 0.9rem;
margin-top: 0.4rem;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.auth-footer-links {
margin-top: 1.5rem;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
}
.auth-footer-links p {
margin: 0.4rem 0;
}
/* ---------------- DEMO CREDENTIALS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.auth-container {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.demo-credentials {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: 2rem;
width: 100%;
max-width: 760px;
}
.demo-creds-title {
font-size: 1rem;
margin-bottom: 1.2rem;
color: var(--text-primary);
}
.demo-creds-pw code {
background: var(--bg-elevated);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
color: var(--accent-gold);
}
.demo-creds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.8rem;
}
.demo-cred-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1rem;
cursor: pointer;
transition:
border-color 0.15s,
transform 0.1s;
display: flex;
flex-direction: column;
gap: 0.3rem;
text-align: left;
font-family: inherit;
color: var(--text-primary);
width: 100%;
text-decoration: none;
}
.demo-cred-card:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
.demo-cred-card strong {
font-size: 0.95rem;
}
.demo-cred-card small {
color: var(--text-muted);
font-size: 0.75rem;
}
.demo-cred-hint {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.2rem;
}
.demo-creds-note {
margin-top: 1rem;
font-size: 0.8rem;
color: var(--text-muted);
text-align: center;
}
.demo-cred-role {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.role-badge-admin {
background: var(--accent-purple);
color: var(--neutral-0);
}
.role-badge-staff {
background: var(--legacy-cyan-600);
color: var(--neutral-0);
}
.role-badge-organizer {
background: var(--legacy-emerald-600);
color: var(--neutral-0);
}
.role-badge-referee {
background: #d97706;
color: var(--neutral-0);
}
.role-badge-leader {
background: var(--legacy-red-600);
color: var(--neutral-0);
}
.role-badge-player {
background: var(--neutral-600);
color: var(--neutral-0);
}
/* ---------------- PROFILE / ACCOUNT ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.profile-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
align-items: start;
}
.profile-sidebar {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
text-align: center;
}
.profile-avatar-wrap {
margin-bottom: 1rem;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
border: 3px solid var(--accent-purple);
}
.profile-avatar img {
border-radius: 50%;
object-fit: cover;
}
.profile-avatar-placeholder {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--accent-purple-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-0);
margin: 0 auto;
border: 3px solid var(--accent-purple);
}
.profile-name {
font-size: 1.3rem;
margin-bottom: 0.25rem;
}
.profile-username {
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.profile-meta {
margin-top: 1rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.profile-main {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Info list */
.info-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border-subtle);
gap: 1rem;
}
.info-row:last-child {
border-bottom: none;
}
.info-key {
color: var(--text-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.info-val {
color: var(--text-primary);
font-size: 0.9rem;
text-align: right;
}
/* ---------------- TEAMS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.team-banner {
background: var(--bg-elevated);
background-size: cover;
background-position: center;
min-height: 220px;
position: relative;
}
.team-banner-overlay {
background: linear-gradient(
to top,
rgba(10, 10, 15, 0.95) 30%,
rgba(10, 10, 15, 0.4)
);
padding: 2rem 3rem 2rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
min-height: 220px;
}
.team-identity {
display: flex;
align-items: flex-end;
gap: 1.5rem;
}
.team-logo-lg {
width: 80px;
height: 80px;
border-radius: 12px;
object-fit: cover;
border: 2px solid var(--accent-purple);
}
.team-logo-placeholder-lg {
width: 80px;
height: 80px;
border-radius: 12px;
background: var(--accent-purple-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: var(--neutral-0);
}
.team-name {
font-size: 2rem;
line-height: 1.1;
}
.team-tag {
color: var(--accent-cyan);
}
.team-elo {
font-size: 0.9rem;
margin-top: 0.4rem;
}
.team-region {
font-size: 0.82rem;
color: var(--text-secondary);
}
.team-description {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.team-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
/* Lineup */
.lineup-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.lineup-player {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
}
.lineup-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.lineup-role {
font-size: 0.65rem;
flex-shrink: 0;
}
.lineup-name {
font-weight: 600;
flex: 1;
}
.lineup-ign {
font-size: 0.78rem;
}
.lineup-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lineup-slot {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.lineup-slot-label {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 0.9rem;
color: var(--accent-cyan);
}
.lineup-slot-list {
display: grid;
gap: 1.25rem;
}
.lineup-slot-card {
min-width: 0;
}
.lineup-lookup-row {
display: flex;
gap: 0.5rem;
align-items: flex-end;
}
.lineup-lookup-row .form-control {
flex: 1;
min-width: 0;
}
.lineup-refresh-btn {
white-space: nowrap;
flex-shrink: 0;
}
.lineup-page-header {
align-items: center;
}
/* Match history */
.match-history-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.match-history-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
font-size: 0.85rem;
text-decoration: none;
color: var(--text-secondary);
transition: background 0.2s;
}
.match-history-row:hover {
background: var(--bg-card-hover);
}
.match-win .match-result {
color: var(--bd-green);
font-weight: 700;
}
.match-loss .match-result {
color: var(--legacy-red-300);
font-weight: 700;
}
.match-pending .match-result {
color: var(--text-muted);
}
.match-vs {
flex: 1;
font-weight: 600;
}
.match-date {
font-size: 0.75rem;
color: var(--text-muted);
}
/* ---------------- H2H -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.h2h-header {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 3rem 1.5rem;
flex-wrap: wrap;
}
.h2h-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
}
.h2h-logo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.h2h-logo-init {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--accent-purple-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: var(--neutral-0);
}
.h2h-score {
display: flex;
align-items: center;
gap: 1.5rem;
}
.h2h-score-num {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 3rem;
font-weight: 700;
min-width: 3rem;
text-align: center;
}
.h2h-vs {
color: var(--text-muted);
font-size: 1.25rem;
font-weight: 700;
}
/* ---------------- MATCHES ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.page-header-match {
padding: 2rem 1.5rem;
max-width: 1280px;
margin: 0 auto;
}
.match-page-teams {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.match-page-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
max-width: 300px;
text-align: center;
}
.match-team-logo {
width: 70px;
height: 70px;
border-radius: 12px;
object-fit: cover;
}
.match-team-logo-init {
width: 70px;
height: 70px;
border-radius: 12px;
background: var(--accent-purple-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
color: var(--neutral-0);
}
.match-winner h2 {
color: var(--accent-cyan);
}
.match-page-score {
display: flex;
align-items: center;
gap: 1rem;
}
.score-num {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 3.5rem;
font-weight: 700;
min-width: 2.5rem;
text-align: center;
}
.score-sep {
color: var(--text-muted);
font-size: 2rem;
}
.match-page-badges {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.match-page-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.match-detail-grid {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.games-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.game-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0.75rem;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
}
.game-num {
font-size: 0.78rem;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
}
.game-winner {
font-weight: 700;
flex: 1;
}
/* ---------------- ROOM ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.room-body {
background: var(--bg-primary);
}
.room-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
height: 56px;
background: var(--glass-bg);
border-bottom: 1px solid var(--glass-border);
backdrop-filter: blur(16px);
gap: 1rem;
}
.room-brand {
font-size: 1.1rem;
}
.room-match-label {
color: var(--text-secondary);
font-size: 0.85rem;
flex: 1;
text-align: center;
}
.room-layout {
display: flex;
flex-direction: column;
height: calc(100vh - 56px);
overflow: hidden;
}
.room-score-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 1.5rem;
background: var(--bg-card);
border-bottom: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.room-team {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
justify-content: flex-end;
}
.room-team:last-child {
flex-direction: row-reverse;
justify-content: flex-end;
}
.room-team-logo {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
}
.room-team-name {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 1.1rem;
}
.room-team-winner .room-team-name {
color: var(--accent-cyan);
}
.room-score {
display: flex;
align-items: center;
gap: 1rem;
}
.room-score-num {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 2.5rem;
font-weight: 700;
min-width: 2rem;
text-align: center;
transition: color 0.3s;
}
.room-score-sep {
color: var(--text-muted);
font-size: 1.5rem;
}
.room-meta-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1.5rem;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.room-code {
font-size: 0.85rem;
font-family: "Oxanium", "Space Grotesk", sans-serif;
letter-spacing: 0.08em;
}
.room-main {
display: flex;
flex: 1;
overflow: hidden;
gap: 0;
}
.room-panel {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
}
.room-judge-panel {
border-right: 1px solid var(--border-subtle);
}
.room-panel-title {
font-size: 1rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-subtle);
}
.room-feed {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feed-event {
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.82rem;
background: var(--bg-elevated);
border-left: 3px solid var(--border-default);
}
.feed-ts {
font-size: 0.72rem;
color: var(--text-muted);
display: block;
margin-bottom: 0.15rem;
}
.feed-msg {
color: var(--text-secondary);
}
.feed-event-game_submitted {
border-color: var(--accent-cyan);
}
.feed-event-dispute_raised {
border-color: var(--status-disputed);
}
.feed-event-match_complete {
border-color: var(--bd-green);
}
.ended-banner {
text-align: center;
padding: 2rem;
color: var(--text-secondary);
}
/* ---------------- CHALLENGES ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.challenges-sections {
max-width: 720px;
margin: 0 auto;
}
.challenge-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.challenge-incoming {
border-color: var(--teal-border-sm);
}
.challenge-outgoing {
border-color: var(--border-subtle);
}
.challenge-teams {
display: flex;
align-items: center;
gap: 1rem;
font-weight: 600;
font-size: 1rem;
}
.challenge-from {
color: var(--text-primary);
}
.challenge-to {
color: var(--accent-cyan);
}
.challenge-arrow {
color: var(--text-muted);
}
.challenge-meta {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
.challenge-msg {
font-style: italic;
color: var(--text-muted);
}
.challenge-actions {
display: flex;
gap: 0.5rem;
}
/* ---------------- TOURNAMENTS PAGE ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.tournament-banner {
background: var(--bg-elevated);
background-size: cover;
background-position: center;
min-height: 260px;
position: relative;
}
.tournament-banner-overlay {
background: linear-gradient(
to top,
rgba(10, 10, 15, 0.96) 35%,
rgba(10, 10, 15, 0.3)
);
padding: 2rem 3rem 2rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
min-height: 260px;
}
.tournament-identity {
display: flex;
align-items: flex-end;
gap: 1.5rem;
}
.tournament-logo {
width: 90px;
height: 90px;
border-radius: 14px;
object-fit: cover;
border: 2px solid var(--accent-purple);
}
.tournament-name {
font-size: 2.2rem;
line-height: 1.1;
}
.tournament-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.tournament-banner-actions {
display: flex;
gap: 0.75rem;
}
.tournament-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
padding: 2rem 0;
}
.ruleset-body {
white-space: pre-wrap;
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.6;
background: var(--bg-elevated);
padding: 1rem;
border-radius: var(--radius-md);
max-height: 300px;
overflow-y: auto;
}
/* Teams list in tournament */
.teams-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.teams-list-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem;
font-size: 0.88rem;
}
/* ---------------- BRACKETS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.bracket-preview {
overflow-x: auto;
padding: 1rem 0;
font-size: 0.8rem;
color: var(--text-secondary);
}
/* ---------------- NOTIFICATIONS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.notif-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.notif-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.15rem;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
transform 0.15s,
box-shadow 0.2s;
position: relative;
overflow: hidden;
}
.notif-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
transition: background 0.2s;
}
.notif-item:hover {
border-color: var(--teal-border-sm);
background: var(--bg-elevated);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(var(--shadow-color), 0.08);
}
.notif-unread {
border-color: var(--teal-border-sm);
background: var(--teal-glow-xs);
}
.notif-unread::before {
background: var(--accent-purple);
}
.notif-type-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.9rem;
background: rgba(var(--neutral-500-rgb), 0.08);
color: var(--type-color, var(--text-secondary));
border: 1px solid rgba(var(--neutral-500-rgb), 0.12);
margin-top: 1px;
}
.notif-empty-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--bg-elevated);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle);
font-size: 1.6rem;
color: var(--text-muted);
}
.notif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
flex-shrink: 0;
margin-top: 6px;
}
.notif-unread .notif-dot {
background: var(--accent-purple);
box-shadow: 0 0 6px var(--accent-purple);
}
.notif-body {
flex: 1;
min-width: 0;
}
.notif-title {
font-weight: 600;
font-size: 0.92rem;
color: var(--text-primary);
line-height: 1.35;
}
.notif-msg {
font-size: 0.83rem;
color: var(--text-secondary);
margin-top: 0.25rem;
line-height: 1.45;
}
.notif-time {
font-size: 0.72rem;
color: var(--text-muted);
margin-top: 0.4rem;
display: block;
}
.notif-action {
font-size: 0.8rem;
color: var(--accent-purple-light);
white-space: nowrap;
align-self: center;
opacity: 0.6;
transition:
opacity 0.2s,
transform 0.2s;
}
.notif-item:hover .notif-action {
opacity: 1;
transform: translateX(2px);
}
.notif-dismiss {
background: none;
border: none;
color: var(--legacy-gray-500);
font-size: 0.9rem;
cursor: pointer;
padding: 0.3rem;
line-height: 1;
border-radius: var(--radius-sm);
transition:
color 0.2s,
background 0.2s;
align-self: center;
}
.notif-dismiss:hover {
color: var(--legacy-red-500);
background: rgba(var(--legacy-red-500-rgb), 0.08);
}
@media (max-width: 640px) {
.notif-item {
gap: 0.7rem;
padding: 0.9rem 1rem;
}
.notif-action {
display: none;
}
.notif-body {
width: 100%;
min-width: 0;
}
.notif-msg {
white-space: normal;
line-height: 1.45;
}
.notif-item form {
align-self: flex-end;
}
}
/* Notification preferences */
.pref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.7rem;
}
.pref-item {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
padding: 0.65rem 0.85rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--bg-card);
transition:
background 0.2s,
border-color 0.2s;
}
.pref-item:hover {
border-color: var(--teal-border-sm);
background: var(--bg-elevated);
}
.pref-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
background: rgba(var(--neutral-500-rgb), 0.08);
color: var(--accent-purple-light);
flex-shrink: 0;
}
.pref-label {
font-size: 0.85rem;
color: var(--text-secondary);
}
.pref-item input[type="checkbox"] {
accent-color: var(--accent-purple);
width: 16px;
height: 16px;
}
/* ---------------- FILTER BAR ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.filter-bar {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
align-items: center;
}
.filter-search {
max-width: 320px;
}
/* ---------------- PAGINATION ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
padding: 1rem;
}
.page-btn {
color: var(--accent-purple-light);
font-size: 0.875rem;
font-weight: 500;
padding: 0.4rem 0.85rem;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.page-btn:hover {
border-color: var(--accent-purple);
background: var(--teal-glow-sm);
color: var(--text-primary);
}
.page-info {
color: var(--text-muted);
font-size: 0.85rem;
}
/* ---------------- EMPTY STATE ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.empty-state {
text-align: center;
padding: 4rem 1.5rem;
color: var(--text-muted);
}
.empty-state p {
font-size: 1rem;
}
.empty-state p a {
color: var(--accent-purple-light);
}
/* ---------------- INFO BANNER ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.info-banner {
background: var(--teal-glow-sm);
border: 1px solid var(--teal-border-sm);
border-radius: var(--radius-md);
padding: 0.875rem 1.25rem;
font-size: 0.875rem;
color: var(--text-secondary);
}
/* ---------------- MANAGE TABS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.manage-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.tab-btn {
padding: 0.55rem 1.1rem;
font-size: 0.875rem;
font-weight: 500;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
cursor: pointer;
transition:
color 0.2s,
border-color 0.2s;
margin-bottom: -1px;
}
.tab-btn.active {
color: var(--accent-purple-light);
border-bottom-color: var(--accent-purple);
}
.tab-btn:hover {
color: var(--text-primary);
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
/* ---------------- ADMIN / DISPUTE CARDS -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.dispute-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.1rem 1.25rem;
margin-bottom: 0.75rem;
}
.dispute-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.dispute-reason {
background: rgba(var(--st-warning-rgb), 0.08);
border: 1px solid rgba(var(--st-warning-rgb), 0.2);
border-radius: var(--radius-sm);
padding: 0.6rem 0.9rem;
font-size: 0.85rem;
color: var(--accent-gold);
}
.dispute-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
/* Applications */
.applications-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.application-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
}
.application-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.application-body {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
}
.application-body p {
margin-bottom: 0.4rem;
}
.application-actions {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
flex-wrap: wrap;
}
/* ---------------- STATS GRID (Admin) -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
text-align: center;
}
.stat-card-warn {
border-color: rgba(var(--st-warning-rgb), 0.4);
background: rgba(var(--st-warning-rgb), 0.05);
}
.stat-card-num {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
}
.stat-card-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
}
.admin-nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.admin-nav-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--text-secondary);
transition:
border-color 0.2s,
color 0.2s,
background 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.admin-nav-card:hover {
border-color: var(--accent-purple);
color: var(--text-primary);
background: var(--bg-card-hover);
}
/* ---------------- ERROR PAGES ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* -- MODERN ERROR PAGES ---------------------------------------- */
/* Wrapper */
.error-page-modern {
position: relative;
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 5rem 1.5rem 4rem;
overflow: hidden;
}
.error-page-500 {
padding-top: 4.5rem;
}
/* Animated background orbs */
.error-bg-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(90px);
opacity: 0.16;
animation: none;
}
.error-bg-orb-500 {
opacity: 0.14;
animation: recoveryOrbFloat 22s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.error-bg-orb-left {
width: 420px;
height: 420px;
background: rgba(var(--brand-primary-rgb), 0.35);
top: -130px;
left: -110px;
}
.error-bg-orb-right {
width: 320px;
height: 320px;
background: rgba(var(--brand-secondary-rgb), 0.34);
bottom: -110px;
right: -90px;
animation-delay: -5s;
}
.error-card-500 {
padding-top: 2rem;
}
.error-recovery-visual {
position: relative;
z-index: 2;
width: min(100%, 440px);
margin: 0 auto 1.5rem;
}
.recovery-status-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.2rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
background: rgba(var(--legacy-scrim-rgb), 0.55);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.recovery-status-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--brand-primary-light);
box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0.45);
animation: recoveryPulse 1.9s ease-out infinite;
}
.recovery-scene {
position: relative;
width: min(100%, 440px);
aspect-ratio: 16 / 11;
margin: 0 auto;
border-radius: 28px;
border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
background:
radial-gradient(circle at 50% 30%, rgba(var(--brand-primary-rgb), 0.14), transparent 38%),
linear-gradient(180deg, rgba(8, 16, 32, 0.88), rgba(7, 13, 24, 0.96));
box-shadow:
inset 0 1px 0 rgba(var(--neutral-0-rgb), 0.04),
0 24px 60px rgba(var(--shadow-color), 0.35);
overflow: hidden;
}
.recovery-scene::before {
content: '';
position: absolute;
inset: 10px;
border-radius: 22px;
border: 1px solid rgba(var(--neutral-500-rgb), 0.08);
pointer-events: none;
}
.recovery-scene::after {
content: '';
position: absolute;
inset: auto 18px 16px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.45), transparent);
opacity: 0.7;
}
.recovery-monitor {
position: absolute;
top: 18px;
left: 50%;
width: min(72%, 290px);
transform: translateX(-50%);
animation: recoveryLift 5.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.recovery-monitor-top {
width: 44%;
height: 10px;
margin: 0 auto;
border-radius: 999px 999px 4px 4px;
background: linear-gradient(180deg, rgba(226, 232, 240, 0.86), rgba(var(--neutral-500-rgb), 0.62));
}
.recovery-screen {
position: relative;
width: 100%;
height: 164px;
margin-top: 10px;
border-radius: 18px;
border: 1px solid rgba(var(--brand-primary-rgb), 0.28);
background:
radial-gradient(circle at 50% 20%, rgba(var(--brand-primary-rgb), 0.22), transparent 45%),
linear-gradient(180deg, rgba(var(--legacy-scrim-rgb), 0.98), rgba(2, 8, 23, 0.98));
overflow: hidden;
box-shadow: 0 0 34px rgba(var(--brand-primary-rgb), 0.16);
}
.recovery-screen-lines {
position: absolute;
inset: 30px 20px 34px;
display: grid;
gap: 12px;
}
.recovery-screen-lines span {
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0.15), rgba(var(--brand-primary-rgb), 0.95), rgba(var(--legacy-cyan-400-rgb), 0.55));
transform-origin: left center;
animation: recoveryCodeFill 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.recovery-screen-lines span:nth-child(2) {
width: 78%;
animation-delay: -0.5s;
}
.recovery-screen-lines span:nth-child(3) {
width: 54%;
animation-delay: -0.9s;
}
.recovery-cursor {
position: absolute;
left: 20px;
bottom: 22px;
width: 12px;
height: 22px;
border-radius: 4px;
background: rgba(191, 219, 254, 0.92);
animation: recoveryBlink 1.1s steps(2, end) infinite;
}
.recovery-monitor-base {
width: 44%;
height: 18px;
margin: 10px auto 0;
border-radius: 0 0 14px 14px;
background: linear-gradient(180deg, rgba(var(--text-muted-rgb), 0.82), rgba(var(--legacy-scrim-rgb), 0.9));
box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.25);
}
.recovery-developer {
position: absolute;
left: 50%;
bottom: 20px;
width: 220px;
height: 120px;
transform: translateX(-50%);
animation: recoveryBob 4.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.recovery-head,
.recovery-torso,
.recovery-arm,
.recovery-shoulder,
.recovery-keyboard,
.recovery-mouse,
.recovery-tools,
.recovery-pulse {
position: absolute;
}
.recovery-head {
left: 86px;
top: 2px;
width: 52px;
height: 52px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--legacy-amber-200) 0 16%, var(--st-warning) 16% 100%);
box-shadow: 0 0 0 6px rgba(var(--bd-amber-rgb), 0.08);
}
.recovery-helm {
position: absolute;
inset: -7px -6px auto;
height: 20px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.95), rgba(var(--brand-primary-rgb), 0.9));
}
.recovery-face {
position: absolute;
left: 11px;
top: 23px;
width: 30px;
height: 12px;
border-radius: 999px;
background:
radial-gradient(circle at 28% 50%, var(--neutral-800) 0 2px, transparent 3px),
radial-gradient(circle at 72% 50%, var(--neutral-800) 0 2px, transparent 3px),
linear-gradient(90deg, transparent 0 40%, var(--neutral-800) 40% 60%, transparent 60% 100%);
}
.recovery-torso {
left: 78px;
top: 46px;
width: 72px;
height: 54px;
border-radius: 18px 18px 20px 20px;
background: linear-gradient(180deg, rgba(var(--legacy-violet-600-rgb), 0.9), rgba(var(--neutral-800-rgb), 0.96));
box-shadow: inset 0 1px 0 rgba(var(--neutral-0-rgb), 0.08);
}
.recovery-shoulder {
top: 42px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(var(--neutral-500-rgb), 0.16);
border: 1px solid rgba(var(--neutral-500-rgb), 0.18);
}
.recovery-shoulder-left {
left: 68px;
}
.recovery-arm {
width: 54px;
height: 14px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(var(--bd-amber-rgb), 0.85), rgba(249, 115, 22, 0.78));
transform-origin: left center;
}
.recovery-arm-left {
left: 48px;
top: 58px;
transform: rotate(28deg);
}
.recovery-arm-right {
left: 132px;
top: 62px;
width: 58px;
transform: rotate(-20deg);
}
.recovery-keyboard {
left: 58px;
bottom: 2px;
width: 106px;
height: 24px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(51, 65, 85, 0.95), rgba(var(--legacy-scrim-rgb), 0.98));
border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
box-shadow: 0 12px 24px rgba(var(--shadow-color), 0.22);
}
.recovery-keyboard::before {
content: '';
position: absolute;
inset: 5px 9px;
border-radius: 6px;
background:
linear-gradient(90deg, rgba(var(--neutral-500-rgb), 0.12) 50%, transparent 0) 0 0 / 16px 100%,
linear-gradient(rgba(var(--neutral-500-rgb), 0.12) 50%, transparent 0) 0 0 / 100% 6px;
opacity: 0.85;
}
.recovery-mouse {
right: 54px;
bottom: 3px;
width: 24px;
height: 18px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(71, 85, 105, 0.94), rgba(var(--legacy-scrim-rgb), 0.98));
border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
}
.recovery-tools {
width: 28px;
height: 28px;
top: 34px;
border-radius: 50%;
border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
background:
linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.7), rgba(var(--brand-secondary-rgb), 0.8));
box-shadow: 0 0 28px rgba(var(--brand-primary-rgb), 0.14);
animation: recoveryOrbit 6.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.recovery-tools::before,
.recovery-tools::after {
content: '';
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
background: rgba(var(--neutral-0-rgb), 0.92);
border-radius: 999px;
}
.recovery-tools::before {
width: 12px;
height: 3px;
}
.recovery-tools::after {
width: 3px;
height: 12px;
}
.recovery-tools-left {
left: 34px;
}
.recovery-tools-right {
right: 34px;
animation-delay: -2.4s;
}
.recovery-pulse {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
background: rgba(var(--brand-primary-rgb), 0.18);
animation: recoveryPulse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.recovery-pulse-one {
left: 18px;
bottom: 46px;
}
.recovery-pulse-two {
right: 16px;
top: 28px;
animation-delay: -1.8s;
}
.recovery-progress {
width: min(100%, 300px);
height: 10px;
margin: 1.15rem auto 0.55rem;
border-radius: 999px;
background: rgba(var(--legacy-scrim-rgb), 0.9);
border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
overflow: hidden;
}
.recovery-progress span {
display: block;
width: 48%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
animation: recoveryProgress 3.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.recovery-progress-label {
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.01em;
}
.error-code-modern-500 {
margin-top: 0.65rem;
}
@keyframes recoveryOrbFloat {
0% { transform: translate3d(-20px, 20px, 0) scale(0.95); opacity: 0.08; }
25% { transform: translate3d(10px, -10px, 0) scale(1.02); opacity: 0.16; }
50% { transform: translate3d(-5px, 15px, 0) scale(1.05); opacity: 0.14; }
75% { transform: translate3d(15px, -5px, 0) scale(1.01); opacity: 0.15; }
100% { transform: translate3d(-20px, 20px, 0) scale(0.95); opacity: 0.08; }
}
@keyframes recoveryLift {
0%, 100% { transform: translateX(-50%) translateY(0) rotateZ(0deg); }
25% { transform: translateX(-50%) translateY(-8px) rotateZ(-1deg); }
50% { transform: translateX(-50%) translateY(-12px) rotateZ(0deg); }
75% { transform: translateX(-50%) translateY(-6px) rotateZ(1deg); }
}
@keyframes recoveryCodeFill {
0% { transform: scaleX(0.4) scaleY(0.8); opacity: 0.35; filter: blur(1px); }
35% { transform: scaleX(0.85) scaleY(1); opacity: 0.75; filter: blur(0.5px); }
50% { transform: scaleX(1) scaleY(1.08); opacity: 1; filter: blur(0); }
65% { transform: scaleX(0.95) scaleY(1.04); opacity: 0.95; filter: blur(0); }
100% { transform: scaleX(0.4) scaleY(0.8); opacity: 0.35; filter: blur(1px); }
}
@keyframes recoveryBlink {
0%, 48% { opacity: 1; box-shadow: inset 0 0 3px rgba(var(--brand-primary-rgb), 0.5); }
50%, 100% { opacity: 0.1; box-shadow: inset 0 0 8px rgba(var(--brand-primary-rgb), 0.2); }
}
@keyframes recoveryBob {
0%, 100% { transform: translateX(-50%) translateY(0) rotateZ(0deg); }
25% { transform: translateX(-50%) translateY(-8px) rotateZ(-2deg); }
50% { transform: translateX(-50%) translateY(-14px) rotateZ(0deg); }
75% { transform: translateX(-50%) translateY(-6px) rotateZ(2deg); }
}
@keyframes recoveryOrbit {
0% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
25% { transform: translateY(-12px) translateX(8px) rotate(8deg) scale(1.05); }
50% { transform: translateY(-16px) translateX(0) rotate(16deg) scale(1.08); }
75% { transform: translateY(-8px) translateX(-8px) rotate(24deg) scale(1.04); }
100% { transform: translateY(0) translateX(0) rotate(32deg) scale(1); }
}
@keyframes recoveryPulse {
0% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0.7); transform: scale(1); opacity: 1; }
40% { box-shadow: 0 0 0 12px rgba(var(--brand-primary-rgb), 0.3); transform: scale(1.1); opacity: 0.9; }
70% { box-shadow: 0 0 0 24px rgba(var(--brand-primary-rgb), 0); transform: scale(1.15); opacity: 0.4; }
100% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0); transform: scale(1); opacity: 0; }
}
@keyframes recoveryProgress {
0% { transform: translateX(-130%); }
30% { transform: translateX(-40%); }
60% { transform: translateX(45%); }
100% { transform: translateX(140%); }
}
/* Giant gradient error code */
.error-code-modern {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: clamp(5.5rem, 18vw, 9.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(
135deg,
var(--accent-purple) 0%,
var(--accent-purple-light) 55%,
var(--accent-cyan) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 30px rgba(var(--brand-primary-rgb), 0.35));
margin-bottom: 1.75rem;
position: relative;
z-index: 2;
animation: none;
}
/* Icon badge */
.error-icon-badge {
width: 72px;
height: 72px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
font-size: 1.75rem;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.error-icon-teal {
background: rgba(var(--brand-primary-rgb), 0.12);
border: 1px solid rgba(var(--brand-primary-rgb), 0.32);
color: var(--accent-purple);
box-shadow: 0 0 28px rgba(var(--brand-primary-rgb), 0.18);
}
.error-icon-orange {
background: rgba(var(--brand-secondary-rgb), 0.12);
border: 1px solid rgba(var(--brand-secondary-rgb), 0.32);
color: var(--accent-cyan);
box-shadow: 0 0 28px rgba(var(--brand-secondary-rgb), 0.18);
}
.error-icon-red {
background: rgba(var(--legacy-red-500-rgb), 0.12);
border: 1px solid rgba(var(--legacy-red-500-rgb), 0.3);
color: var(--legacy-red-400);
box-shadow: 0 0 28px rgba(var(--legacy-red-500-rgb), 0.18);
}
/* Glassmorphism content card */
.error-card {
position: relative;
z-index: 2;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 2.5rem 2.75rem;
max-width: 520px;
width: 100%;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 28px 70px rgba(var(--shadow-color), 0.38),
inset 0 1px 0 rgba(var(--neutral-0-rgb), 0.06);
animation: none;
}
/* Typography */
.error-h1 {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 1.65rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.6rem;
}
.error-desc {
color: var(--text-secondary);
font-size: 0.935rem;
line-height: 1.7;
margin-bottom: 1.75rem;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
/* Primary action row */
.error-actions {
display: flex;
gap: 0.65rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
/* Login prompt (403 unauthenticated) */
.error-login-box {
background: rgba(var(--brand-primary-rgb), 0.07);
border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
border-radius: 12px;
padding: 1.1rem 1.25rem;
margin-bottom: 1.5rem;
}
.error-login-box p {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 0.85rem;
}
.error-login-box .error-actions {
margin-bottom: 0;
}
/* Quick links bar */
.error-quick-bar {
border-top: 1px solid var(--border-subtle);
padding-top: 1.1rem;
margin-top: 0.75rem;
}
.error-quick-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-muted);
margin-bottom: 0.7rem;
}
.error-quick-links {
display: flex;
gap: 0.45rem;
justify-content: center;
flex-wrap: wrap;
}
.error-quick-link {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.32rem 0.8rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
text-decoration: none;
background: none;
cursor: pointer;
transition:
color 0.18s,
border-color 0.18s,
background 0.18s;
}
.error-quick-link:hover {
color: var(--accent-purple);
border-color: var(--accent-purple);
background: rgba(var(--brand-primary-rgb), 0.08);
}
/* Dev error stack */
.error-stack-box {
background: rgba(var(--legacy-scrim-rgb), 0.85);
border: 1px solid rgba(var(--legacy-red-500-rgb), 0.25);
border-radius: 10px;
padding: 0.9rem 1.1rem;
font-size: 0.75rem;
color: var(--legacy-red-400);
text-align: left;
overflow: auto;
max-height: 220px;
white-space: pre-wrap;
font-family: Consolas, "Courier New", monospace;
margin-top: 1rem;
}
/* Responsive */
@media (max-width: 600px) {
.error-page-500 {
padding-top: 3.5rem;
}
.error-card {
padding: 1.75rem 1.1rem;
}
.error-card-500 {
padding-top: 1.5rem;
}
.error-recovery-visual {
margin-bottom: 1.1rem;
}
.recovery-status-chip {
margin-bottom: 0.9rem;
}
.recovery-scene {
border-radius: 22px;
}
.recovery-monitor {
width: min(78%, 256px);
}
.recovery-screen {
height: 144px;
}
.recovery-developer {
width: 194px;
height: 108px;
}
.recovery-head {
left: 78px;
width: 46px;
height: 46px;
}
.recovery-torso {
left: 72px;
width: 62px;
height: 48px;
}
.recovery-arm-left {
left: 46px;
}
.recovery-arm-right {
left: 118px;
width: 52px;
}
.recovery-keyboard {
left: 50px;
width: 94px;
}
.recovery-mouse {
right: 46px;
}
.recovery-tools-left {
left: 18px;
}
.recovery-tools-right {
right: 18px;
}
.recovery-progress {
width: min(100%, 260px);
}
.error-code-modern {
margin-bottom: 1.1rem;
}
.error-actions {
flex-direction: column;
align-items: stretch;
}
.error-actions .esports-btn {
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.error-bg-orb,
.recovery-status-dot,
.recovery-monitor,
.recovery-screen-lines span,
.recovery-cursor,
.recovery-developer,
.recovery-tools,
.recovery-pulse,
.recovery-progress span,
.error-code-modern {
animation: none !important;
}
.recovery-progress span {
transform: translateX(0);
width: 62%;
}
}
/* Legacy classes kept for backward compatibility */
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 3rem 1rem;
gap: 1rem;
}
.error-code {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 8rem;
font-weight: 700;
line-height: 1;
}
.error-title {
font-size: 2rem;
}
.error-sub {
color: var(--text-secondary);
max-width: 380px;
}
.error-stack {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
padding: 1rem;
border-radius: var(--radius-md);
font-size: 0.78rem;
color: var(--text-secondary);
max-width: 600px;
text-align: left;
overflow: auto;
white-space: pre-wrap;
}
/* ---------------- FOOTER -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.site-footer {
background: var(--bg-card);
border-top: 1px solid var(--border-subtle);
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 3rem 1.5rem;
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 2.5rem;
}
.footer-brand .brand-icon {
font-size: 1.3rem;
}
.footer-brand strong {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-size: 1.3rem;
}
.footer-tagline {
font-size: 0.82rem;
color: var(--text-muted);
margin-top: 0.5rem;
line-height: 1.6;
max-width: 32rem;
}
.footer-social {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.1rem;
}
.footer-social a {
color: var(--text-muted);
font-size: 1.15rem;
transition: color 0.2s;
}
.footer-social a:hover {
color: var(--brand-primary-light);
}
.footer-links-group h4 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.footer-links-group ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.footer-links-group a,
.footer-links-group button {
font-size: 0.875rem;
color: var(--text-secondary);
transition: color 0.2s;
background: none;
border: none;
padding: 0;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.footer-links-group a:hover,
.footer-links-group button:hover {
color: var(--brand-primary-light);
}
.footer-bottom {
border-top: 1px solid var(--border-subtle);
padding: 1.25rem 1.5rem;
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--text-muted);
}
.footer-credit a {
color: var(--text-secondary);
font-weight: 600;
transition: color 0.2s;
}
.footer-credit a:hover {
color: var(--brand-primary-light);
}
@media (max-width: 640px) {
.footer-bottom {
justify-content: center;
text-align: center;
}
}
/* ---------------- HERO FLOATING GAME ICONS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.hero-floating-layer {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: hidden;
perspective: 1000px;
transform-style: preserve-3d;
}
@keyframes hero-icon-float {
0%,
100% {
transform: translate3d(0, 0, 0) rotateX(var(--rot-x, -10deg))
rotateY(var(--rot-y, 30deg)) rotateZ(var(--rot-z, 58deg));
}
50% {
transform: translate3d(0, calc(var(--float-bob, 16px) * -1), 0)
rotateX(var(--rot-x, -10deg)) rotateY(var(--rot-y, 30deg))
rotateZ(var(--rot-z, 58deg));
}
}
.hero-floating-icon {
position: absolute;
width: var(--icon-size, 88px);
height: var(--icon-size, 88px);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color, var(--brand-secondary));
background:
linear-gradient(
155deg,
rgba(var(--neutral-0-rgb), 0.1),
rgba(var(--neutral-0-rgb), 0.02)
),
rgba(var(--icon-rgb, 124, 58, 237), 0.08);
border: 1px solid rgba(var(--icon-rgb, 124, 58, 237), 0.45);
box-shadow:
0 0 0 1px rgba(var(--icon-rgb, 124, 58, 237), 0.18) inset,
0 10px 28px rgba(var(--shadow-color), 0.45),
0 0 28px rgba(var(--icon-rgb, 124, 58, 237), 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform-origin: center;
transform-style: preserve-3d;
animation: hero-icon-float var(--float-duration, 6.5s) ease-in-out infinite;
animation-delay: var(--float-delay, 0s);
will-change: transform;
opacity: 0.56;
}
.hero-floating-icon::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
border: 1px solid rgba(var(--icon-rgb, 124, 58, 237), 0.48);
filter: blur(5px);
opacity: 0.45;
}
.hero-floating-icon::after {
content: "";
position: absolute;
inset: 10%;
border-radius: 13px;
background: radial-gradient(
circle at 26% 20%,
rgba(var(--neutral-0-rgb), 0.18),
transparent 65%
);
opacity: 0.7;
}
.hero-floating-img {
position: relative;
z-index: 1;
width: 74%;
height: 74%;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(var(--shadow-color), 0.45));
transform: translateZ(10px);
}
.hero-floating-fallback {
display: none;
position: relative;
z-index: 1;
font-size: clamp(1.6rem, 1.25rem + 1vw, 2.4rem);
line-height: 1;
filter: drop-shadow(0 0 14px rgba(var(--icon-rgb, 59, 130, 246), 0.7));
transform: translateZ(8px);
}
/* ---------------- GAME BADGE INLINE (used on tournament/team pages) ---------------- */
.game-badge-inline {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.22rem 0.7rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
background: rgba(var(--gc-rgb), 0.12);
border: 1px solid rgba(var(--gc-rgb), 0.4);
color: var(--gc, var(--accent-purple));
transition:
background 0.2s,
border-color 0.2s;
}
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MODERN AUTH FORMS (LOGIN & REGISTER) - REDESIGNED
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Background & Layout */
.auth-page-bg {
background: linear-gradient(135deg, #070f1a 0%, #0f1f33 50%, #1d2644 100%);
position: relative;
overflow: hidden;
}
.auth-page-bg::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(
circle at 20% 10%,
rgba(var(--brand-primary-rgb), 0.15) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 100%,
rgba(var(--brand-secondary-rgb), 0.1) 0%,
transparent 50%
);
pointer-events: none;
z-index: -1;
}
/* Floating animations */
@keyframes float-slow {
0%,
100% {
transform: translateY(0px) translateX(0px);
}
33% {
transform: translateY(-24px) translateX(12px);
}
66% {
transform: translateY(-12px) translateX(-8px);
}
}
@keyframes float-slower {
0%,
100% {
transform: translateY(0px) translateX(0px);
}
33% {
transform: translateY(-18px) translateX(-16px);
}
66% {
transform: translateY(-8px) translateX(20px);
}
}
.animate-float-slow {
animation: float-slow 8s ease-in-out infinite;
}
.animate-float-slower {
animation: float-slower 10s ease-in-out infinite;
}
/* Modern Auth Card */
.auth-card-modern {
background: rgba(8, 15, 26, 0.65);
backdrop-filter: blur(20px);
border: 1px solid rgba(45, 212, 191, 0.22);
border-radius: 16px;
padding: 2rem;
box-shadow:
0 8px 32px rgba(var(--shadow-color), 0.3),
inset 0 1px 1px rgba(var(--neutral-0-rgb), 0.1);
}
.auth-card-modern:hover {
border-color: rgba(45, 212, 191, 0.35);
box-shadow:
0 16px 48px rgba(var(--shadow-color), 0.4),
inset 0 1px 1px rgba(var(--neutral-0-rgb), 0.12);
}
/* Demo Card Variant */
.auth-card-demo {
background: rgba(var(--legacy-scrim-rgb), 0.55);
border: 1px solid rgba(94, 173, 212, 0.18);
}
/* Form Group & Label */
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label-modern {
font-size: 0.85rem;
font-weight: 600;
color: var(--neutral-200);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
}
/* Modern Input Style */
.input-modern {
background: rgba(var(--neutral-800-rgb), 0.6);
border: 1px solid rgba(71, 85, 105, 0.4);
border-radius: 10px;
padding: 0.75rem 1rem;
color: var(--text-primary);
font-size: 0.95rem;
outline: none;
transition:
background-color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
position: relative;
font-family: inherit;
}
.input-modern::placeholder {
color: transparent;
}
.input-modern:focus {
background: rgba(var(--neutral-800-rgb), 0.8);
border-color: rgba(var(--brand-primary-rgb), 0.6);
box-shadow:
0 0 0 3px rgba(var(--brand-primary-rgb), 0.15),
inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.2);
}
.input-modern:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Floating Placeholder */
.placeholder-modern {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.92rem;
color: var(--text-secondary);
pointer-events: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.input-modern:focus ~ .placeholder-modern,
.input-modern:not(:placeholder-shown) ~ .placeholder-modern {
font-size: 0.75rem;
top: 0.4rem;
color: var(--brand-secondary-light);
opacity: 0.8;
}
/* Primary Button */
.btn-modern-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
background: linear-gradient(135deg, var(--brand-secondary-dark) 0%, var(--brand-secondary) 100%);
color: var(--neutral-0);
border: 1px solid rgba(var(--legacy-violet-600-rgb), 0.5);
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.03em;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
width: 100%;
box-shadow: 0 8px 16px rgba(var(--legacy-violet-600-rgb), 0.3);
}
.btn-modern-primary:hover {
background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-light) 100%);
box-shadow: 0 12px 24px rgba(var(--legacy-violet-600-rgb), 0.4);
transform: translateY(-2px);
}
.btn-modern-primary:active {
transform: translateY(0);
}
/* Secondary Button */
.btn-modern-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(71, 85, 105, 0.3);
color: var(--neutral-200);
border: 1px solid rgba(var(--text-muted-rgb), 0.5);
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
outline: none;
transition: all 0.2s ease;
text-decoration: none;
width: 100%;
}
.btn-modern-secondary:hover {
background: rgba(71, 85, 105, 0.5);
border-color: rgba(var(--text-muted-rgb), 0.8);
color: var(--neutral-0);
}
/* Demo Buttons */
.demo-btn-modern {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.75rem;
background: rgba(var(--neutral-800-rgb), 0.6);
border: 1px solid rgba(71, 85, 105, 0.3);
border-radius: 8px;
color: var(--text-secondary);
text-decoration: none;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.2s ease;
white-space: nowrap;
}
.demo-btn-modern:hover {
background: var(--teal-glow-md);
border-color: var(--teal-border-md);
color: var(--accent-purple-light);
}
/* Role Option */
.role-option-modern input[type="radio"] {
display: none;
}
.role-option-modern {
cursor: pointer;
}
/* Error Message */
.error-message {
color: var(--legacy-red-400);
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.4rem;
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-4px);
}
}
.game-badge-inline:hover {
background: rgba(var(--gc-rgb), 0.22);
border-color: rgba(var(--gc-rgb), 0.65);
}
.game-badge-inline img,
.game-badge-inline .gi-wrap img {
width: 14px;
height: 14px;
object-fit: contain;
border-radius: 2px;
}
/* gi-wrap inside badge: keep it inline */
.game-badge-inline .gi-wrap {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Large variant: used in cards/info panels */
.game-badge-lg {
font-size: 0.85rem;
padding: 0.35rem 1rem;
gap: 0.5rem;
}
.game-badge-lg img,
.game-badge-lg .gi-wrap img {
width: 22px;
height: 22px;
}
.game-badge-lg .gi-wrap {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* ---------------- GAME SHOWCASE CARDS (3-D float + blur glow) ------------------------ */
@keyframes game-float {
0%,
100% {
transform: translateY(0) rotateX(4deg);
}
50% {
transform: translateY(-14px) rotateX(-4deg);
}
}
.games-scroll {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding: 0.5rem 0.5rem 1.75rem;
scrollbar-width: thin;
scrollbar-color: rgba(var(--brand-primary-rgb), 0.3) transparent;
justify-content: center;
flex-wrap: wrap;
}
.games-scroll::-webkit-scrollbar {
height: 4px;
}
.games-scroll::-webkit-scrollbar-track {
background: transparent;
}
.games-scroll::-webkit-scrollbar-thumb {
background: rgba(var(--brand-primary-rgb), 0.4);
border-radius: 2px;
}
.game-card {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding: 1.75rem 1.25rem 1.5rem;
width: 148px;
border-radius: var(--radius-lg);
text-decoration: none;
cursor: pointer;
/* Per-card accent colour injected via --gc / --gc-rgb inline style */
background: rgba(var(--gc-rgb), 0.07);
border: 1px solid rgba(var(--gc-rgb), 0.45);
box-shadow:
0 0 16px 4px rgba(var(--gc-rgb), 0.28),
0 0 42px 10px rgba(var(--gc-rgb), 0.1),
inset 0 0 24px rgba(var(--gc-rgb), 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
/* 3-D continuous float */
perspective: 600px;
transform-style: preserve-3d;
animation: game-float 3.5s ease-in-out infinite;
transition:
box-shadow 0.3s,
border-color 0.3s;
will-change: transform;
}
.game-card:hover {
animation-play-state: paused;
border-color: rgba(var(--gc-rgb), 0.85);
box-shadow:
0 0 28px 8px rgba(var(--gc-rgb), 0.55),
0 0 72px 20px rgba(var(--gc-rgb), 0.2),
inset 0 0 32px rgba(var(--gc-rgb), 0.1);
}
.game-card__logo {
width: 72px;
height: 72px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(var(--gc-rgb), 0.6));
pointer-events: none;
}
.game-card__icon {
font-size: 2.6rem;
color: rgba(var(--gc-rgb), 1);
filter: drop-shadow(0 0 10px rgba(var(--gc-rgb), 0.7));
line-height: 1;
}
.game-card__name {
font-family: "Oxanium", "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 0.8rem;
text-align: center;
color: var(--text-primary);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.game-card {
animation: none;
}
}
/* ---------------- PLATFORM FEATURES GRID ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
transition:
border-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
}
.feature-card:hover {
border-color: rgba(var(--legacy-violet-600-rgb), 0.4);
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(var(--legacy-violet-600-rgb), 0.12);
}
.feature-icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.3rem;
}
/* ---------------- GAME FILTER TABS ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.game-filter-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.game-tab {
padding: 0.35rem 0.95rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid var(--border-default);
color: var(--text-muted);
background: var(--bg-elevated);
cursor: pointer;
transition:
border-color 0.2s,
color 0.2s,
background 0.2s;
}
.game-tab:hover,
.game-tab.active {
border-color: var(--accent-purple);
color: var(--accent-purple-light);
background: var(--teal-glow-md);
}
/* ---------------- LIGHT MODE BRIDGING FOR TAILWIND UTILITIES ------------------------ */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/40,
html[data-theme="light"] .bg-slate-800 {
background-color: var(--bg-secondary) !important;
}
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800\/40,
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] .bg-slate-700\/60,
html[data-theme="light"] .bg-slate-700\/40 {
background-color: var(--bg-card) !important;
}
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 {
color: var(--text-primary) !important;
}
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500 {
color: var(--text-secondary) !important;
}
/* Preserve high-contrast auth hero copy in light mode */
html[data-theme="light"] .auth-hero-text-white {
color: var(--neutral-0) !important;
}
/* Some marketing/hero panels are intentionally dark-only (literal slate-950/900
gradients that never flip light) so their light/white body copy must NOT be
caught by the blanket ".text-white -> dark" rule above, or it goes dark-on-dark
and disappears. Mark the panel with .always-dark-panel to reassert the
original Tailwind color inside it, regardless of page theme. */
html[data-theme="light"] .always-dark-panel .text-white {
color: #fff !important;
}
html[data-theme="light"] .always-dark-panel .text-slate-100 {
color: #f1f5f9 !important;
}
html[data-theme="light"] .always-dark-panel .text-slate-200 {
color: #e2e8f0 !important;
}
html[data-theme="light"] .always-dark-panel .text-slate-300 {
color: #cbd5e1 !important;
}
html[data-theme="light"] .always-dark-panel .text-slate-400 {
color: #94a3b8 !important;
}
html[data-theme="light"] .always-dark-panel .text-slate-500 {
color: #64748b !important;
}
/* Light theme: KEEP white text/icons on colored (brand-filled) controls.
The blanket ".text-white -> dark" rule above is for body copy on light
grounds; it must NOT darken white text sitting on a colored button, badge,
avatar, gradient chip, or solid modal header. These exceptions re-assert
white on those surfaces (gradient/brand fills are dark enough for white).
Ghost/outline/danger buttons are excluded — they are transparent/light. */
html[data-theme="light"] .esports-btn:not(.esports-btn-ghost):not(.esports-btn-outline):not(.esports-btn-danger),
html[data-theme="light"] .esports-btn:not(.esports-btn-ghost):not(.esports-btn-outline):not(.esports-btn-danger) .text-white,
html[data-theme="light"] .esports-btn:not(.esports-btn-ghost):not(.esports-btn-outline):not(.esports-btn-danger) i,
html[data-theme="light"] .esports-btn-cyan,
html[data-theme="light"] .esports-btn-cyan .text-white,
html[data-theme="light"] .esports-btn-cyan i,
/* Gradient-filled CTAs and avatars/chips (the .text-white is ON the filled
element, or inside a link/button) — scoped to a/button/self so it can NOT
reach heading copy inside gradient hero SECTIONS that the blanket rule is
meant to darken in light mode. */
html[data-theme="light"] a[class*="bg-gradient-to"].text-white,
html[data-theme="light"] button[class*="bg-gradient-to"].text-white,
html[data-theme="light"] div[class*="bg-gradient-to"].text-white,
html[data-theme="light"] a[class*="bg-gradient-to"] .text-white,
html[data-theme="light"] button[class*="bg-gradient-to"] .text-white,
html[data-theme="light"] a[class*="bg-gradient-to"] > i,
html[data-theme="light"] button[class*="bg-gradient-to"] > i,
html[data-theme="light"] #feedbackModal .text-white,
html[data-theme="light"] #feedbackModal .text-white i,
html[data-theme="light"] #bugReportModal .text-white,
html[data-theme="light"] #bugReportModal .text-white i {
color: var(--neutral-0) !important;
}
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-purple-900\/30,
html[data-theme="light"] .border-purple-900\/20,
html[data-theme="light"] .border-purple-900\/10 {
border-color: rgba(var(--legacy-scrim-rgb), 0.14) !important;
}
html[data-theme="light"] .from-purple-900\/60 {
--tw-gradient-from: rgba(15, 118, 110, 0.22) var(--tw-gradient-from-position) !important;
--tw-gradient-to: rgba(15, 118, 110, 0) var(--tw-gradient-to-position) !important;
}
html[data-theme="light"] .to-slate-900,
html[data-theme="light"] .to-slate-900\/60 {
--tw-gradient-to: rgba(226, 232, 240, 0.55) var(--tw-gradient-to-position) !important;
}
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-2xl {
--tw-shadow-color: rgba(var(--legacy-scrim-rgb), 0.18) !important;
}
/* ---------------- POPUP/MODAL THEME BRIDGING -------------------------------------------------------------------------------------------------------------------------------------------------------- */
#sidebar-overlay {
background: var(--overlay-backdrop) !important;
backdrop-filter: blur(3px) !important;
}
#regModalBackdrop,
#openRegBackdrop,
.rte-img-dialog-backdrop {
background: var(--overlay-backdrop) !important;
backdrop-filter: blur(5px);
}
#regModalPanel,
#openRegPanel,
.rte-img-dialog {
background: var(--overlay-panel-bg) !important;
border-color: var(--overlay-panel-border) !important;
box-shadow: var(--overlay-panel-shadow) !important;
color: var(--text-primary);
}
#regModalClose,
#openRegClose {
color: var(--text-muted) !important;
}
#regModalClose:hover,
#openRegClose:hover {
color: var(--text-primary) !important;
background: rgba(var(--neutral-500-rgb), 0.14) !important;
}
.rte-img-dialog {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
width: min(92vw, 420px);
max-height: calc(100vh - 3rem);
overflow-y: auto;
}
html[data-theme="light"] #regModalPanel > div:first-child,
html[data-theme="light"] #openRegPanel .open-reg-header {
border-bottom-color: rgba(var(--legacy-scrim-rgb), 0.14) !important;
background: linear-gradient(
180deg,
rgba(var(--neutral-500-rgb), 0.28),
rgba(var(--neutral-500-rgb), 0.1)
) !important;
}
html[data-theme="light"] #regModalPanel .reg-team-option {
border-color: rgba(var(--legacy-scrim-rgb), 0.16) !important;
background: linear-gradient(
135deg,
rgba(226, 232, 240, 0.98),
rgba(241, 245, 249, 0.96)
) !important;
}
html[data-theme="light"] #regModalPanel .reg-team-option:hover {
border-color: rgba(15, 118, 110, 0.42) !important;
background: linear-gradient(
135deg,
rgba(220, 252, 231, 0.96),
rgba(226, 232, 240, 0.96)
) !important;
}
html[data-theme="light"] #regModalPanel .reg-team-option.is-selected {
border-color: rgba(5, 150, 105, 0.45) !important;
background: linear-gradient(
135deg,
rgba(187, 247, 208, 0.96),
rgba(220, 252, 231, 0.94)
) !important;
}
html[data-theme="light"] #regModalPanel #regSelectStep,
html[data-theme="light"] #regModalPanel #regDetailToolbar,
html[data-theme="light"] #regModalPanel .reg-team-details-panel,
html[data-theme="light"] #regModalPanel .reg-team-details-actions,
html[data-theme="light"] #regModalPanel .reg-team-details-scroll {
background: rgba(226, 232, 240, 0.92) !important;
border-color: rgba(var(--legacy-scrim-rgb), 0.14) !important;
}
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-0)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--text-primary)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-200)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-300)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-0"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-100"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-200"],
html[data-theme="light"] #regModalPanel [style*="color:var(--neutral-300"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-0)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--text-primary)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-200)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-300)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-0"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-100"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-200"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-300"] {
color: var(--text-primary) !important;
}
html[data-theme="light"] #regModalPanel [style*="color:var(--text-muted)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--text-secondary)"],
html[data-theme="light"] #regModalPanel [style*="color:var(--text-muted"],
html[data-theme="light"] #regModalPanel [style*="color:var(--text-secondary"],
html[data-theme="light"] #regModalSubtitle,
html[data-theme="light"] #openRegPanel .open-reg-header-sub,
html[data-theme="light"] #openRegPanel [style*="color:var(--text-muted)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--text-secondary)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-600)"],
html[data-theme="light"] #openRegPanel [style*="color:var(--text-muted"],
html[data-theme="light"] #openRegPanel [style*="color:var(--text-secondary"],
html[data-theme="light"] #openRegPanel [style*="color:var(--neutral-600"] {
color: var(--text-secondary) !important;
}
html[data-theme="light"] #openRegPanel .open-reg-header-title {
color: var(--text-primary) !important;
}
html[data-theme="light"]
#openRegPanel
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
[type="button"]
),
html[data-theme="light"] #openRegPanel select,
html[data-theme="light"] #openRegPanel textarea {
background: var(--neutral-0) !important;
color: var(--text-primary) !important;
border-color: rgba(var(--legacy-scrim-rgb), 0.2) !important;
}
html[data-theme="light"] #openRegPanel input::placeholder,
html[data-theme="light"] #openRegPanel textarea::placeholder {
color: var(--text-muted) !important;
}
html[data-theme="light"] #openRegPanel .open-reg-roster-row {
border-top-color: rgba(var(--legacy-scrim-rgb), 0.09) !important;
background: rgba(241, 245, 249, 0.74) !important;
}
html[data-theme="light"] #openRegPanel .open-reg-roster-table thead tr {
background: rgba(15, 118, 110, 0.12) !important;
}
html[data-theme="light"] input[style*="background:var(--neutral-800)"],
html[data-theme="light"] input[style*="background: var(--neutral-800)"],
html[data-theme="light"] input[style*="background:var(--neutral-900)"],
html[data-theme="light"] input[style*="background: var(--neutral-900)"],
html[data-theme="light"] input[style*="background:rgba(15,23,42"],
html[data-theme="light"] input[style*="background: rgba(15,23,42"],
html[data-theme="light"] input[style*="background:var(--neutral-800"],
html[data-theme="light"] input[style*="background: var(--neutral-800"],
html[data-theme="light"] input[style*="background:var(--neutral-900"],
html[data-theme="light"] input[style*="background: var(--neutral-900"],
html[data-theme="light"] textarea[style*="background:var(--neutral-800)"],
html[data-theme="light"] textarea[style*="background: var(--neutral-800)"],
html[data-theme="light"] textarea[style*="background:var(--neutral-900)"],
html[data-theme="light"] textarea[style*="background: var(--neutral-900)"],
html[data-theme="light"] textarea[style*="background:rgba(15,23,42"],
html[data-theme="light"] textarea[style*="background: rgba(15,23,42"],
html[data-theme="light"] textarea[style*="background:var(--neutral-800"],
html[data-theme="light"] textarea[style*="background: var(--neutral-800"],
html[data-theme="light"] textarea[style*="background:var(--neutral-900"],
html[data-theme="light"] textarea[style*="background: var(--neutral-900"],
html[data-theme="light"] select[style*="background:var(--neutral-800)"],
html[data-theme="light"] select[style*="background: var(--neutral-800)"],
html[data-theme="light"] select[style*="background:var(--neutral-900)"],
html[data-theme="light"] select[style*="background: var(--neutral-900)"],
html[data-theme="light"] select[style*="background:rgba(15,23,42"],
html[data-theme="light"] select[style*="background: rgba(15,23,42"],
html[data-theme="light"] select[style*="background:var(--neutral-800"],
html[data-theme="light"] select[style*="background: var(--neutral-800"],
html[data-theme="light"] select[style*="background:var(--neutral-900"],
html[data-theme="light"] select[style*="background: var(--neutral-900"] {
background: var(--neutral-0) !important;
color: var(--text-primary) !important;
border-color: rgba(var(--legacy-scrim-rgb), 0.2) !important;
}
html[data-theme="light"] input[style*="background:var(--neutral-800)"]::placeholder,
html[data-theme="light"] input[style*="background: var(--neutral-800)"]::placeholder,
html[data-theme="light"] input[style*="background:var(--neutral-900)"]::placeholder,
html[data-theme="light"] input[style*="background: var(--neutral-900)"]::placeholder,
html[data-theme="light"] input[style*="background:rgba(15,23,42"]::placeholder,
html[data-theme="light"] input[style*="background: rgba(15,23,42"]::placeholder,
html[data-theme="light"] input[style*="background:var(--neutral-800"]::placeholder,
html[data-theme="light"] input[style*="background: var(--neutral-800"]::placeholder,
html[data-theme="light"] input[style*="background:var(--neutral-900"]::placeholder,
html[data-theme="light"] input[style*="background: var(--neutral-900"]::placeholder,
html[data-theme="light"] textarea[style*="background:var(--neutral-800)"]::placeholder,
html[data-theme="light"] textarea[style*="background: var(--neutral-800)"]::placeholder,
html[data-theme="light"] textarea[style*="background:var(--neutral-900)"]::placeholder,
html[data-theme="light"] textarea[style*="background: var(--neutral-900)"]::placeholder,
html[data-theme="light"]
textarea[style*="background:rgba(15,23,42"]::placeholder,
html[data-theme="light"]
textarea[style*="background: rgba(15,23,42"]::placeholder,
html[data-theme="light"]
textarea[style*="background:var(--neutral-800"]::placeholder,
html[data-theme="light"]
textarea[style*="background: var(--neutral-800"]::placeholder,
html[data-theme="light"]
textarea[style*="background:var(--neutral-900"]::placeholder,
html[data-theme="light"]
textarea[style*="background: var(--neutral-900"]::placeholder {
color: var(--text-muted) !important;
}
/* ---------------- RESPONSIVE ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
.team-detail-grid,
.match-detail-grid,
.tournament-detail-grid,
.profile-grid {
grid-template-columns: 1fr;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.hero-floating-icon {
opacity: 0.45;
}
.hero-floating-icon:nth-child(n + 7) {
display: none;
}
}
@media (max-width: 768px) {
.navbar-links {
display: none;
flex-direction: column;
position: fixed;
top: 64px;
left: 0;
right: 0;
background: var(--bg-card);
border-bottom: 1px solid var(--border-subtle);
padding: 1rem;
z-index: 99;
gap: 0.25rem;
}
.navbar-links.open {
display: flex;
}
.hamburger {
display: flex;
}
.hero {
padding: 4rem 1rem 3rem;
}
.team-banner-overlay,
.tournament-banner-overlay {
padding: 1.5rem;
flex-direction: column;
align-items: flex-start;
}
.room-main {
flex-direction: column;
}
.room-judge-panel {
border-right: none;
border-bottom: 1px solid var(--border-subtle);
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.h2h-header {
flex-direction: column;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-floating-layer {
inset: 0 0 8% 0;
}
.hero-floating-icon {
width: calc(var(--icon-size, 88px) * 0.78);
height: calc(var(--icon-size, 88px) * 0.78);
border-radius: 14px;
opacity: 0.36;
}
.hero-floating-fallback {
font-size: 1.4rem;
}
.hero-floating-icon:nth-child(n + 5) {
display: none;
}
.lineup-page-header {
flex-direction: column;
align-items: stretch;
}
.lineup-back-btn,
.lineup-save-btn {
width: 100%;
justify-content: center;
}
.lineup-slot-row {
flex-direction: column;
}
.lineup-lookup-row {
flex-direction: column;
align-items: stretch;
}
.lineup-refresh-btn {
width: 100%;
justify-content: center;
}
.lineup-help-banner {
padding: 0.9rem 1rem;
}
.lineup-slot-card {
padding: 0.875rem !important;
}
}
@media (max-width: 480px) {
.page-container,
.section-block {
padding: 1.5rem 1rem;
}
.page-title {
font-size: 1.5rem;
}
.auth-card {
padding: 1.75rem 1.25rem;
}
.footer-inner {
grid-template-columns: 1fr;
}
.card-grid,
.news-grid,
.stats-grid,
.admin-nav-grid {
grid-template-columns: 1fr;
}
.form-row {
flex-direction: column;
}
.features-grid {
grid-template-columns: 1fr;
}
.hero-floating-icon:nth-child(n + 4) {
display: none;
}
.hero-floating-icon {
opacity: 0.3;
}
.lineup-page-header {
gap: 0.75rem;
}
.lineup-help-banner {
padding: 0.8rem 0.9rem;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-floating-icon {
animation: none;
transform: rotateX(var(--rot-x, -10deg)) rotateY(var(--rot-y, 30deg))
rotateZ(var(--rot-z, 58deg));
}
}
/* ------ ALTCHA CAPTCHA WIDGET --------------------------------------------------------------------------------------------------------- */
/*
* Correct altcha v3 CSS custom property names (from source):
* --altcha-color-base --- widget background
* --altcha-color-base-content --- text on base background (THE text color)
* --altcha-color-neutral --- border / neutral elements
* --altcha-color-neutral-content --- text on neutral
* --altcha-color-primary --- checkbox accent / primary
* --altcha-color-primary-content --- text on primary
* --altcha-color-error --- error state
* --altcha-border-color --- border (defaults to --altcha-color-neutral)
* --altcha-border-radius --- corner radius
* --altcha-max-width --- widget max-width
*/
/* Dark theme --- explicit hex values override the light-dark() defaults */
altcha-widget {
color-scheme: dark;
--altcha-color-base: var(--legacy-gray-900);
--altcha-color-base-content: var(--neutral-50);
--altcha-color-neutral: rgba(var(--brand-secondary-rgb), 0.5);
--altcha-color-neutral-content: var(--neutral-50);
--altcha-color-primary: var(--brand-secondary);
--altcha-color-primary-content: var(--neutral-0);
--altcha-color-error: var(--legacy-red-500);
--altcha-color-error-content: var(--neutral-0);
--altcha-color-success: var(--status-live);
--altcha-color-success-content: var(--neutral-0);
--altcha-border-radius: 10px;
--altcha-max-width: 340px;
--altcha-shadow: drop-shadow(0 8px 24px rgba(var(--shadow-color), 0.55));
}
.altcha-widget-container {
/* Positioned via JavaScript above submit button */
box-shadow: 0 12px 32px rgba(var(--shadow-color), 0.45);
border-radius: 12px;
animation: altcha-slide-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
max-width: calc(100vw - 24px);
}
@keyframes altcha-slide-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Hide "Protected by ALTCHA" footer/branding completely */
altcha-widget::part(footer),
altcha-widget [part="footer"],
altcha-widget .altcha-footer,
altcha-widget footer {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Floating widget --- slide-up + fade entrance animation */
@keyframes altcha-slide-up {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
altcha-widget[data-state="verifying"],
altcha-widget[data-state="verified"],
altcha-widget[data-state="error"],
altcha-widget[data-state="unverified"] {
animation: altcha-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Mobile: keep floating popup inside viewport */
@media (max-width: 640px) {
altcha-widget {
--altcha-max-width: calc(100vw - 32px);
}
}
/* Light theme --- restore light palette when toggled */
html[data-theme="light"] altcha-widget {
color-scheme: light;
--altcha-color-base: var(--neutral-0);
--altcha-color-base-content: var(--neutral-900);
--altcha-color-neutral: rgba(109, 40, 217, 0.35);
--altcha-color-neutral-content: var(--neutral-800);
--altcha-color-primary: var(--brand-secondary-dark);
--altcha-color-primary-content: var(--neutral-0);
--altcha-shadow: drop-shadow(0 4px 16px rgba(var(--shadow-color), 0.15));
}
@media (prefers-reduced-motion: reduce) {
altcha-widget[data-state] {
animation: none;
}
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
GAME ICON SHIMMER (.gi-wrap / .gi-shimmer)
Applied automatically by gameIconHtml() helper.
Dark theme default; light theme overrides below.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
@keyframes gi-shimmer-slide {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.gi-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* inherits sizing from children --- no explicit width/height */
}
.gi-shimmer {
position: absolute;
inset: 0;
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(var(--neutral-800-rgb), 0) 0%,
rgba(51, 65, 85, 0.55) 38%,
rgba(var(--text-muted-rgb), 0.3) 52%,
rgba(var(--neutral-800-rgb), 0) 100%
);
background-size: 200% 100%;
animation: gi-shimmer-slide 1.6s ease-in-out infinite;
pointer-events: none;
}
/* Once the image has loaded, remove the shimmer */
.gi-wrap.gi-loaded .gi-shimmer {
display: none;
}
/* Light theme variant */
html[data-theme="light"] .gi-shimmer {
background: linear-gradient(
90deg,
rgba(241, 245, 249, 0) 0%,
rgba(209, 213, 219, 0.65) 38%,
rgba(226, 232, 240, 0.45) 52%,
rgba(241, 245, 249, 0) 100%
);
background-size: 200% 100%;
animation: gi-shimmer-slide 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.gi-shimmer {
animation: none;
}
}
/* ------ Game filter chip button (templates page & similar filter forms) ------ */
.tour-chip-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border-radius: 999px;
border: 1px solid rgba(var(--text-muted-rgb), 0.25);
background: rgba(var(--legacy-scrim-rgb), 0.55);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
padding: 0.34rem 0.76rem;
cursor: pointer;
transition:
border-color 0.2s,
color 0.2s,
background 0.2s,
transform 0.18s;
white-space: nowrap;
font-family: inherit;
}
.tour-chip-btn:hover {
transform: translateY(-1px);
color: var(--neutral-200);
border-color: rgba(var(--brand-secondary-rgb), 0.5);
}
.tour-chip-btn.tg-active {
color: var(--neutral-200);
border-color: rgba(var(--brand-secondary-rgb), 0.7);
background: rgba(var(--brand-secondary-rgb), 0.18);
box-shadow: 0 0 0 1px rgba(var(--brand-secondary-rgb), 0.22);
}
html[data-theme="light"] .tour-chip-btn {
background: rgba(241, 245, 249, 0.9);
color: var(--neutral-600);
border-color: rgba(var(--text-muted-rgb), 0.3);
}
html[data-theme="light"] .tour-chip-btn:hover {
color: var(--neutral-800);
border-color: rgba(var(--brand-secondary-rgb), 0.5);
}
html[data-theme="light"] .tour-chip-btn.tg-active {
color: var(--brand-secondary-dark);
background: rgba(var(--brand-secondary-rgb), 0.1);
border-color: rgba(var(--brand-secondary-rgb), 0.6);
}
/* -- Lazy-load pulse skeleton ----------------------------------------------- */
.ui-img-wrap {
display: inline-block;
position: relative;
overflow: hidden;
background: #1e2640;
}
.ui-img-wrap::before {
content: "";
position: absolute;
inset: 0;
background: #1e2640;
animation: ui-pulse 1.4s ease-in-out infinite;
z-index: 1;
transition: opacity 0.25s;
}
.ui-img-wrap.ui-loaded::before {
opacity: 0;
pointer-events: none;
}
@keyframes ui-pulse {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
.ui-img-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2;
}
/* CSS-only fallback --- shown when image is missing or fails to load.
Uses an inline SVG photo icon; no external PNG required. */
.ui-img-wrap.ui-error {
background: #1a2035;
}
.ui-img-wrap.ui-error::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: #1a2035
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374163' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E")
center/40% no-repeat;
}
.ui-img-wrap.ui-error::before {
opacity: 0;
pointer-events: none;
}
/* ------ Scroll-triggered Animations ------------------------------------------------------------------------------------------------------------------------------------ */
/* Base: elements start hidden, transition to visible when .is-visible added */
[data-reveal] {
opacity: 0;
transition:
opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
[data-reveal="fade"] {
opacity: 0;
}
[data-reveal="up"] {
transform: translateY(28px);
opacity: 0;
}
[data-reveal="down"] {
transform: translateY(-20px);
opacity: 0;
}
[data-reveal="left"] {
transform: translateX(-28px);
opacity: 0;
}
[data-reveal="right"] {
transform: translateX(28px);
opacity: 0;
}
[data-reveal="scale"] {
transform: scale(0.93);
opacity: 0;
}
[data-reveal="zoom"] {
transform: scale(0.88) translateY(16px);
opacity: 0;
}
[data-reveal].is-visible {
opacity: 1 !important;
transform: none !important;
}
/* Stagger children --- parent gets [data-reveal-stagger], each child delays */
[data-reveal-stagger] > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal-stagger].is-visible > * {
opacity: 1;
transform: none;
}
[data-reveal-stagger].is-visible > *:nth-child(1) {
transition-delay: 0ms;
}
[data-reveal-stagger].is-visible > *:nth-child(2) {
transition-delay: 60ms;
}
[data-reveal-stagger].is-visible > *:nth-child(3) {
transition-delay: 120ms;
}
[data-reveal-stagger].is-visible > *:nth-child(4) {
transition-delay: 180ms;
}
[data-reveal-stagger].is-visible > *:nth-child(5) {
transition-delay: 240ms;
}
[data-reveal-stagger].is-visible > *:nth-child(6) {
transition-delay: 300ms;
}
[data-reveal-stagger].is-visible > *:nth-child(7) {
transition-delay: 360ms;
}
[data-reveal-stagger].is-visible > *:nth-child(8) {
transition-delay: 420ms;
}
[data-reveal-stagger].is-visible > *:nth-child(n + 9) {
transition-delay: 480ms;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal-stagger] > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ------ Counter animation (number count-up) ------------------------------------------------------------------------------------------------------------ */
.count-up {
display: inline-block;
}
/* ------ Parallax shimmer on hero sections ------------------------------------------------------------------------------------------------------------------ */
.hero-shimmer {
position: relative;
overflow: hidden;
}
.hero-shimmer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(var(--legacy-teal-200-rgb), 0.06) 50%,
transparent 60%
);
animation: hero-shimmer-move 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes hero-shimmer-move {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
/* ------ Pulse ring on live indicators --------------------------------------------------------------------------------------------------------------------------- */
.pulse-ring {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand-secondary-light);
position: relative;
}
.pulse-ring::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--brand-secondary-light);
animation: pulse-ring-anim 1.6s ease-out infinite;
opacity: 0;
}
@keyframes pulse-ring-anim {
0% {
transform: scale(0.8);
opacity: 0.8;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
/* ------ Adaptive logo theme styles (black to white) May 30, 2026 ----------------------------- */
.logo-adaptive-fill {
fill: #000000;
transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dynamic swap when parent theme toggled to dark, or OS prefers dark mode */
html[data-theme='dark'] .logo-adaptive-fill {
fill: var(--neutral-0) !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .logo-adaptive-fill {
fill: var(--neutral-0);
}
}
/* Stroke-based variant for the "eS" monogram (uses currentColor on strokes) */
.logo-adaptive-stroke {
color: #0b0b0f;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-theme='dark'] .logo-adaptive-stroke {
color: var(--neutral-0) !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .logo-adaptive-stroke {
color: var(--neutral-0);
}
}
/* ------ Uploaded site logos: theme-based visibility (mirrors .logo-adaptive-fill) --
Staff/admin can upload a dark-theme and a light-theme logo. When only one is
uploaded it carries the .site-logo-both class and is always visible. When both
exist, we render both ![]()
s and show the one matching the active theme. */
.site-logo-img { object-fit: contain; }
/* Default = light theme: show the light logo, hide the dark one. */
.site-logo-light { display: inline-block; }
.site-logo-dark { display: none; }
/* Explicit dark theme: swap. */
html[data-theme='dark'] .site-logo-dark { display: inline-block !important; }
html[data-theme='dark'] .site-logo-light { display: none !important; }
/* OS dark preference when the user hasn't forced a theme. */
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) .site-logo-dark { display: inline-block; }
html:not([data-theme='light']) .site-logo-light { display: none; }
}
/* ==========================================================================
SHARP EDGES GLOBAL OVERRIDE
Replaces all rounded corners with sharp corners across the entire platform
========================================================================== */
/* 1. Global reset for all elements containing tailwind rounded classes */
[class*="rounded"] {
border-radius: 0px !important;
}
/* 2. Specific semantic element overrides to cover all components, buttons, forms, and cards */
button,
input,
select,
textarea,
img,
pre,
code,
iframe,
.esports-btn,
.angular-card,
.db-card,
.card,
.btn,
.form-input,
.form-select,
.form-textarea,
.badge,
.modal,
.dialog,
.toast,
.dropdown,
.tooltip,
.avatar,
.avatar img,
.skeleton {
border-radius: 0px !important;
}
/* 3. Redefine border-radius CSS variables to be safe */
:root,
html,
body,
html[data-theme="light"] {
--radius-xs: 0px !important;
--radius-sm: 0px !important;
--radius-md: 0px !important;
--radius-lg: 0px !important;
--radius-xl: 0px !important;
--radius-pill: 0px !important;
--radius-shadcn: 0px !important;
}
/* ============================================================
ICON SELECT (partials/game-picker, country-picker + icon-select.js)
Progressive-enhancement dropdown with an icon/flag left of each row.
Native