Spaces:
Running
Running
| /* ========================================================================== | |
| VANTAGE 2.0 — PREMIUM FOOTBALL EXPERIENCE | |
| Cinematic Dark · Multi-Page · Motion Graphics · 6 Themes | |
| ========================================================================== */ | |
| /* ─── 1. TOKENS ────────────────────────────────────────────── */ | |
| :root { | |
| --bg-primary: #05070d; | |
| --bg-secondary: #0a0f1c; | |
| --bg-tertiary: #111827; | |
| --bg-glass: rgba(8, 217, 115, 0.04); | |
| --bg-glass-hover: rgba(8, 217, 115, 0.1); | |
| --bg-glass-active: rgba(8, 217, 115, 0.12); | |
| --page-bg: | |
| radial-gradient(circle at 12% 16%, rgba(8, 217, 115, 0.18), transparent 26%), | |
| radial-gradient(circle at 84% 12%, rgba(20, 150, 255, 0.16), transparent 24%), | |
| radial-gradient(circle at 50% 92%, rgba(139, 92, 246, 0.12), transparent 30%), | |
| linear-gradient(160deg, #05070d 0%, #0a0f1c 52%, #050810 100%); | |
| --section-alt-bg: linear-gradient(135deg, rgba(8,217,115,0.07), rgba(20,150,255,0.06)); | |
| --nav-bg: rgba(5, 7, 13, 0.78); | |
| --nav-bg-solid: rgba(5, 7, 13, 0.94); | |
| --card-surface: linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(10, 15, 28, 0.78)); | |
| --card-surface-strong: var(--bg-tertiary); | |
| --text-primary: #f1fdf6; | |
| --text-secondary: #b6c2d0; | |
| --text-muted: #6b7a8c; | |
| --accent: #08d973; | |
| --accent-blue: #18b7ff; | |
| --accent-blue-glow: rgba(24, 183, 255, 0.28); | |
| --accent-green: #08d973; | |
| --accent-green-glow: rgba(8, 217, 115, 0.32); | |
| --accent-amber: #ffb020; | |
| --accent-red: #f43f5e; | |
| --accent-purple: #8b5cf6; | |
| --border-subtle: rgba(8, 217, 115, 0.14); | |
| --border-active: rgba(8, 217, 115, 0.32); | |
| --font-heading: 'Bebas Neue', 'Space Grotesk', sans-serif; | |
| --font-body: 'Montserrat', 'Inter', sans-serif; | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| --space-2xl: 48px; | |
| --space-3xl: 64px; | |
| --space-4xl: 96px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| --radius-full: 9999px; | |
| --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4); | |
| --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.6); | |
| --glow-blue: 0 0 40px var(--accent-blue-glow); | |
| --glow-green: 0 0 40px var(--accent-green-glow); | |
| --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --transition-fast: 150ms var(--ease-out-expo); | |
| --transition-base: 400ms var(--ease-out-expo); | |
| --transition-slow: 700ms var(--ease-out-expo); | |
| } | |
| /* ─── 2. RESET ─────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } | |
| body { | |
| width: 100%; | |
| background: var(--page-bg); | |
| background-attachment: fixed; | |
| color: var(--text-primary); | |
| font-family: var(--font-body); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; } | |
| button, input, select { font-family: inherit; font-size: inherit; color: inherit; } | |
| button { cursor: pointer; border: none; background: none; } | |
| a { color: inherit; text-decoration: none; } | |
| img { max-width: 100%; display: block; } | |
| .skip-link { | |
| position: absolute; top: -60px; left: 16px; | |
| background: var(--accent-blue); color: #fff; | |
| padding: 10px 16px; border-radius: var(--radius-sm); | |
| z-index: 9999; font-weight: 600; text-decoration: none; | |
| } | |
| .skip-link:focus { top: 16px; } | |
| /* ─── 3. GLOBAL NAVIGATION ─────────────────────────────────── */ | |
| .site-nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 64px; | |
| z-index: 1000; | |
| background: var(--nav-bg); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-subtle); | |
| display: flex; | |
| align-items: center; | |
| transition: background var(--transition-base); | |
| } | |
| .site-nav.scrolled { | |
| background: var(--nav-bg-solid); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .site-nav__container { | |
| width: 100%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 var(--space-xl); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .site-nav__logo { | |
| font-family: var(--font-heading); | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| letter-spacing: -0.02em; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| } | |
| .site-nav__logo-icon { | |
| font-size: 1.3rem; | |
| filter: drop-shadow(0 0 8px var(--accent-green-glow)); | |
| } | |
| .site-nav__logo-text { | |
| background: linear-gradient(135deg, var(--accent-green), #fff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .site-nav__links { | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .site-nav__link { | |
| font-family: var(--font-body); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| padding: 8px 16px; | |
| border-radius: var(--radius-full); | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .site-nav__link:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-glass-hover); | |
| } | |
| .site-nav__link--active { | |
| color: var(--accent-green); | |
| background: var(--bg-glass-active); | |
| } | |
| .site-nav__link--live::after { | |
| content: ''; | |
| position: absolute; | |
| top: 6px; | |
| right: 6px; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent-red); | |
| box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); | |
| animation: pulse 1.5s infinite; | |
| } | |
| .site-nav__actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .theme-switcher { | |
| display: flex; | |
| gap: 4px; | |
| padding: 4px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .theme-dot { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border: 2px solid transparent; | |
| } | |
| .theme-dot:hover { transform: scale(1.2); } | |
| .theme-dot--active { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.3); } | |
| .theme-dot--neon { background: #00FF66; } | |
| .theme-dot--cyber { background: #00F0FF; } | |
| .theme-dot--nightowl { background: #FF9900; } | |
| .theme-dot--rose { background: #FF3366; } | |
| .theme-dot--purple { background: #A855F7; } | |
| .theme-dot--light { background: #fff; } | |
| .nav-hamburger { | |
| display: none; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 8px; | |
| cursor: pointer; | |
| } | |
| .nav-hamburger span { | |
| width: 20px; | |
| height: 2px; | |
| background: var(--text-primary); | |
| border-radius: 2px; | |
| transition: all var(--transition-fast); | |
| } | |
| @media (max-width: 900px) { | |
| .site-nav__links { display: none; } | |
| .site-nav__links.open { | |
| display: flex; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 64px; | |
| left: 0; | |
| right: 0; | |
| background: rgba(255, 255, 255, 0.97); | |
| backdrop-filter: blur(20px); | |
| padding: var(--space-md); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .nav-hamburger { display: flex; } | |
| .theme-switcher { display: none; } | |
| } | |