/* ULTRA — Football streaming 3 design directions, switchable via [data-theme] on : - stadium (high-energy stadium: black/lime/magenta, big type, diagonals) - stream (twitch-native: violet/orange, dense cards, neon) - tactical (brutalist sport: monochrome + amber, grid) */ /* ─── Reset ─────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-feature-settings:"ss01","tnum"} body{min-height:100vh;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} img,svg{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--accent-on)} /* ─── Token system ──────────────────────────────────────── */ /* DEFAULT = stadium */ :root, [data-theme="stadium"]{ --bg: #0A0A0A; --bg-2: #141414; --bg-3: #1E1E1E; --bg-card: #141414; --fg: #E8E6E0; --fg-muted: #8A8A8A; --line: #2A2A2A; --accent: #C6FF00; /* electric lime */ --accent-2: #FF1493; /* hot magenta */ --accent-on: #000000; --live: #FF1A1A; --win: #C6FF00; --lose: #FF1493; --font-display: "Druk Wide","Anton","Archivo Black",Impact,sans-serif; --font-body: "Inter",system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --shadow-glow: 0 0 0 1px var(--accent), 0 0 30px -8px var(--accent); } /* STREAM — purple/orange, neon glassy */ [data-theme="stream"]{ --bg: #0E0B1A; --bg-2: #181230; --bg-3: #221944; --bg-card: #181230; --fg: #ECE8FF; --fg-muted: #9A93BD; --line: #2A2150; --accent: #A259FF; /* violet */ --accent-2: #FF7A00; /* orange */ --accent-on: #FFFFFF; --live: #FF3366; --win: #00E5A8; --lose: #FF3366; --font-display: "Space Grotesk","Archivo",sans-serif; --font-body: "Inter",system-ui,sans-serif; --font-mono: "JetBrains Mono",ui-monospace,monospace; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --shadow-glow: 0 0 30px -4px var(--accent), 0 0 60px -10px var(--accent-2); } /* TACTICAL — brutalist mono+amber */ [data-theme="tactical"]{ --bg: #F2F0EA; --bg-2: #E5E2D8; --bg-3: #FFFFFF; --bg-card: #FFFFFF; --fg: #0A0A0A; --fg-muted: #5C5A52; --line: #0A0A0A; --accent: #FFC400; /* amber */ --accent-2: #0A0A0A; --accent-on: #0A0A0A; --live: #E63946; --win: #1A7A3E; --lose: #E63946; --font-display: "Archivo Black","Anton",Impact,sans-serif; --font-body: "JetBrains Mono",ui-monospace,monospace; --font-mono: "JetBrains Mono",ui-monospace,monospace; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --shadow-glow: 6px 6px 0 var(--fg); } /* ─── Layout shell ──────────────────────────────────────── */ .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh} .app__main{min-width:0;display:flex;flex-direction:column} .scroll-region{padding:32px 40px 80px;max-width:1600px} /* Sidebar */ .side{ background:var(--bg-2); border-right:1px solid var(--line); padding:24px 18px; display:flex;flex-direction:column;gap:24px; position:sticky;top:0;height:100vh;overflow-y:auto; } [data-theme="tactical"] .side{border-right:2px solid var(--line)} .brand{display:flex;align-items:center;gap:10px;padding:0 6px} .brand__mark{width:36px;height:36px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-on); display:grid;place-items:center;font-family:var(--font-display);font-size:18px;font-weight:900;letter-spacing:-.02em} [data-theme="stream"] .brand__mark{box-shadow:0 0 24px -4px var(--accent)} .brand__name{font-family:var(--font-display);font-size:20px;font-weight:900;letter-spacing:.02em;text-transform:uppercase} .brand__slogan{font-size:10px;color:var(--fg-muted);letter-spacing:.18em;text-transform:uppercase;margin-top:2px} .nav{display:flex;flex-direction:column;gap:2px} .nav__group-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);padding:14px 10px 6px} .nav__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);font-weight:600;font-size:14px;color:var(--fg-muted);transition:all .15s} .nav__item:hover{background:var(--bg-3);color:var(--fg)} .nav__item--active{background:var(--bg-3);color:var(--fg)} [data-theme="stadium"] .nav__item--active{box-shadow:inset 3px 0 0 var(--accent)} [data-theme="stream"] .nav__item--active{background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 22%, transparent),transparent);color:#fff} [data-theme="tactical"] .nav__item--active{background:var(--accent);color:var(--accent-on)} .nav__item .ico{width:18px;height:18px;flex-shrink:0} .nav__badge{margin-left:auto;font-size:10px;font-weight:700;padding:2px 6px;background:var(--live);color:#fff;border-radius:99px;letter-spacing:.06em} /* Topbar */ .topbar{ display:flex;align-items:center;gap:16px; padding:16px 40px; border-bottom:1px solid var(--line); background:color-mix(in oklab,var(--bg) 70%, transparent); backdrop-filter:blur(10px); position:sticky;top:0;z-index:20; } [data-theme="tactical"] .topbar{border-bottom:2px solid var(--line);background:var(--bg)} .topbar__search{ flex:1;max-width:520px;display:flex;align-items:center;gap:10px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px; color:var(--fg-muted);font-size:13px; } [data-theme="tactical"] .topbar__search{border:2px solid var(--line)} .topbar__search input{background:transparent;border:0;outline:0;color:var(--fg);font:inherit;width:100%} .topbar__search kbd{margin-left:auto;font:inherit;font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;color:var(--fg-muted)} .topbar__lang{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} [data-theme="tactical"] .topbar__lang{border:2px solid var(--line)} .topbar__lang button{padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--fg-muted)} .topbar__lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on)} .topbar__live{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--live);color:#fff;border-radius:var(--r-md);font-weight:800;font-size:12px;letter-spacing:.1em} .topbar__live::before{content:"";width:8px;height:8px;border-radius:99px;background:#fff;animation:pulse 1.4s infinite} .data-status{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--fg-muted)} .data-status__dot{width:6px;height:6px;border-radius:99px;background:var(--fg-muted)} .data-status__dot.is-live{background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.6);animation:pulse 2s ease-in-out infinite} .data-status__dot.is-demo{background:#F59E0B} .data-status__dot.is-loading{background:#888;animation:pulse 1s ease-in-out infinite} .topbar__avatar{width:36px;height:36px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-weight:800;color:var(--accent-on)} [data-theme="tactical"] .topbar__avatar{border-radius:0;border:2px solid var(--line)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ─── Generic ───────────────────────────────────────────── */ .h-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-muted);font-weight:700} .h-title{font-family:var(--font-display);font-size:48px;line-height:.95;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin:8px 0 0} [data-theme="stream"] .h-title{font-size:44px;letter-spacing:-.03em} [data-theme="tactical"] .h-title{font-size:40px;letter-spacing:-.01em} .section{margin-top:48px} .section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:14px} [data-theme="tactical"] .section__head{border-bottom:2px solid var(--line)} .section__title{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;margin:0} .section__more{font-size:12px;font-weight:700;color:var(--fg-muted);letter-spacing:.1em;text-transform:uppercase} .section__more:hover{color:var(--fg)} .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-md); font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase; background:var(--accent);color:var(--accent-on);transition:transform .15s, box-shadow .15s, filter .15s} .btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)} [data-theme="stream"] .btn{box-shadow:0 8px 30px -8px var(--accent)} [data-theme="tactical"] .btn{border:2px solid var(--line);box-shadow:4px 4px 0 var(--line)} [data-theme="tactical"] .btn:hover{box-shadow:2px 2px 0 var(--line);transform:translate(2px,2px)} .btn--ghost{background:transparent;color:var(--fg);border:1px solid var(--line)} [data-theme="tactical"] .btn--ghost{border-width:2px;box-shadow:4px 4px 0 var(--line);background:var(--bg-3)} .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px; font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--bg-3);color:var(--fg-muted)} [data-theme="tactical"] .chip{border-radius:0;border:1.5px solid var(--line);background:var(--bg-3);color:var(--fg)} .chip--live{background:var(--live);color:#fff} .chip--live::before{content:"";width:6px;height:6px;border-radius:99px;background:#fff;animation:pulse 1.4s infinite} .chip--accent{background:var(--accent);color:var(--accent-on)} /* Crest — text-based logo placeholder */ .crest{flex-shrink:0;display:grid;place-items:center;font-weight:900;font-family:var(--font-display); letter-spacing:-.02em;color:#fff;border-radius:8px;text-shadow:0 1px 0 rgba(0,0,0,.3)} .crest--sm{width:24px;height:24px;font-size:10px} .crest--md{width:36px;height:36px;font-size:11px} .crest--lg{width:64px;height:64px;font-size:18px;border-radius:12px} .crest--xl{width:88px;height:88px;font-size:22px;border-radius:14px} [data-theme="tactical"] .crest{border-radius:0;border:2px solid var(--line);text-shadow:none} /* League pill */ .league-pill{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)} .league-pill__dot{width:8px;height:8px;border-radius:2px} /* Tabs */ .tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px} [data-theme="tactical"] .tabs{border-bottom:2px solid var(--line)} .tab{padding:14px 20px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);position:relative} .tab:hover{color:var(--fg)} .tab--active{color:var(--fg)} .tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)} [data-theme="tactical"] .tab--active{background:var(--accent);color:var(--accent-on)} [data-theme="tactical"] .tab--active::after{display:none} /* Hidden helper */ .sr{position:absolute;left:-9999px}