/* ============================================================ FDVS — Football Data Vision System Design language: football intelligence terminal. Dark (default) + Light theme via [data-theme] on . ============================================================ */ :root{ /* surfaces — dark (default), chocolate truffle palette */ --ink: #150E08; --pitch: #211609; --pitch-2: #2B1D0F; --pitch-line: #493018; --card: #231708; --card-hi: #2D1E0D; --grid-dot: rgba(150,100,50,0.10); --glow-1: rgba(150,100,50,0.13); --glow-2: rgba(90,60,30,0.10); --glow-3: rgba(253,251,212,0.05); /* signal colors — Chocolate truffle: cocoa / burnt orange / cream */ --signal: #C05800; --signal-dim: #713600; --data-cyan: #FDFBD4; --data-rose: #5C2E0E; /* text */ --text-hi: #FBF3E4; --text-mid: #C7AF93; --text-low: #8C6F52; /* type */ --f-display: 'Space Grotesk', sans-serif; --f-body: 'Inter', sans-serif; --f-mono: 'IBM Plex Mono', monospace; --radius: 3px; --maxw: 1180px; --shadow-card: 0 18px 40px rgba(20,10,4,0.5); } html[data-theme="light"]{ --ink: #FAF8EF; --pitch: #F3EFE0; --pitch-2: #ECE6D1; --pitch-line: #DED4B4; --card: #FDFCF6; --card-hi: #F3EFE0; --grid-dot: rgba(113,54,0,0.10); --glow-1: rgba(192,88,0,0.10); --glow-2: rgba(56,36,13,0.05); --glow-3: rgba(56,36,13,0.04); --signal: #B14E00; --signal-dim: #713600; --data-cyan: #38240D; --data-rose: #6E3410; --text-hi: #2A1A0A; --text-mid: #5C4A32; --text-low: #8A7856; --shadow-card: 0 18px 40px rgba(56,36,13,0.16); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } html, body{ max-width:100%; overflow-x:hidden; } body{ background-color:var(--ink); background-image: radial-gradient(ellipse 900px 520px at 8% -8%, var(--glow-1), transparent 60%), radial-gradient(ellipse 820px 520px at 94% 4%, var(--glow-2), transparent 60%), radial-gradient(ellipse 1100px 760px at 50% 118%, var(--glow-3), transparent 60%), radial-gradient(circle, var(--grid-dot) 1px, transparent 1.4px); background-repeat:no-repeat,no-repeat,no-repeat,repeat; background-size:auto,auto,auto,26px 26px; background-attachment:fixed,fixed,fixed,scroll; color:var(--text-hi); font-family:var(--f-body); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background-color .25s ease, color .25s ease; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ul{ list-style:none; } button{ font-family:inherit; } table{ max-width:100%; } p, h1, h2, h3, h4, span, li, td, th{ overflow-wrap:break-word; word-break:break-word; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; width:100%; } ::selection{ background:var(--signal); color:var(--ink); } :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; } /* ---------- eyebrow / mono labels ---------- */ .feed-tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--signal); display:inline-flex; align-items:center; gap:8px; } .feed-tag::before{ content:""; width:6px; height:6px; background:var(--signal); border-radius:50%; box-shadow:0 0 8px var(--signal); } /* ---------- header ---------- */ header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--pitch-line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; min-height:32px; } .nav-clock{ display:flex; align-items:baseline; gap:8px; font-family:var(--f-mono); font-size:12.5px; color:var(--text-mid); white-space:nowrap; overflow:hidden; flex-shrink:1; } .nav-clock-time{ color:var(--text-hi); font-weight:600; } .logo{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:0.02em; flex-shrink:0; } .logo-mark{ width:26px; height:26px; border:1.5px solid var(--signal); border-radius:50%; position:relative; flex-shrink:0; } .logo-mark::before{ content:""; position:absolute; inset:6px; border:1px solid var(--data-cyan); border-radius:50%; } .logo-mark::after{ content:""; position:absolute; top:50%; left:50%; width:50%; height:1.5px; background:var(--signal); transform-origin:left center; animation:sweep 4s linear infinite; } @keyframes sweep{ to{ transform:rotate(360deg); } } .logo small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:9.5px; letter-spacing:0.14em; color:var(--text-low); text-transform:uppercase; margin-top:2px; } .nav-actions{ display:flex; align-items:center; gap:14px; } .nav-actions .login-link{ font-size:14px; color:var(--text-mid); } .nav-actions .login-link:hover{ color:var(--text-hi); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--f-mono); font-size:13px; letter-spacing:0.04em; padding:10px 20px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .btn-primary{ background:var(--signal); color:var(--ink); font-weight:600; } .btn-primary:hover{ box-shadow:0 0 0 3px rgba(192,88,0,0.28); } .btn-ghost{ border-color:var(--pitch-line); color:var(--text-hi); } .btn-ghost:hover{ border-color:var(--data-cyan); color:var(--data-cyan); } .btn-sm{ padding:7px 14px; font-size:11.5px; } .btn-block{ width:100%; } /* theme toggle — sliding switch, left = dark, right = light */ .theme-switch{ --sw-w: 56px; --sw-h: 28px; --sw-pad: 3px; width:var(--sw-w); height:var(--sw-h); border-radius:99px; border:1px solid var(--pitch-line); background:var(--pitch-2); position:relative; cursor:pointer; flex-shrink:0; padding:0; transition:background .2s ease, border-color .2s ease; } .theme-switch:hover{ border-color:var(--signal-dim); } .theme-switch .switch-track{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 6px; font-size:11px; pointer-events:none; opacity:0.75; } .theme-switch .switch-knob{ position:absolute; top:var(--sw-pad); left:var(--sw-pad); width:calc(var(--sw-h) - (var(--sw-pad) * 2)); height:calc(var(--sw-h) - (var(--sw-pad) * 2)); border-radius:50%; background:var(--signal); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:12px; transition:transform .22s ease, background .2s ease; box-shadow:0 2px 6px rgba(0,0,0,0.35); } html[data-theme="light"] .theme-switch .switch-knob{ transform:translateX(calc(var(--sw-w) - var(--sw-h))); } .theme-switch .knob-moon{ display:block; } .theme-switch .knob-sun{ display:none; } html[data-theme="light"] .theme-switch .knob-moon{ display:none; } html[data-theme="light"] .theme-switch .knob-sun{ display:block; } .menu-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--pitch-line); border-radius:var(--radius); color:var(--text-hi); font-size:18px; cursor:pointer; flex-shrink:0; } /* ---------- mega nav (secondary bar, desktop) ---------- */ .mega-nav{ background:var(--pitch); border-bottom:1px solid var(--pitch-line); position:relative; z-index:40; } .mega-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding-top:4px; padding-bottom:4px; } .mega-item{ position:relative; flex-shrink:0; } .mega-trigger{ background:none; border:0; cursor:pointer; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); padding:13px 14px; white-space:nowrap; display:flex; align-items:center; gap:5px; transition:color .15s ease; } .mega-trigger::after{ content:"▾"; font-size:8px; opacity:.7; } .mega-item.plain .mega-trigger::after{ content:none; } .mega-item.plain a.mega-trigger{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); padding:13px 14px; display:block; } .mega-item.plain a.mega-trigger:hover{ color:var(--text-hi); } .mega-item:hover .mega-trigger, .mega-item.open .mega-trigger{ color:var(--text-hi); } .mega-item.premium .mega-trigger, .mega-item.premium a.mega-trigger{ color:var(--signal); } .mega-item.premium .mega-trigger:hover{ color:var(--signal); } .mega-panel{ display:none; position:absolute; top:100%; left:0; z-index:100; background:var(--card); border:1px solid var(--pitch-line); min-width:210px; padding:8px 0; box-shadow:var(--shadow-card); } .mega-item.open .mega-panel{ display:block; } .mega-panel a{ display:block; padding:10px 18px; font-size:13.5px; color:var(--text-mid); } .mega-panel a:hover{ color:var(--text-hi); background:var(--card-hi); } .mega-panel-wide{ min-width:380px; columns:2; column-gap:0; } .mega-panel-wide a{ break-inside:avoid; } /* keep the last couple of dropdowns from spilling past the right edge */ .mega-item:nth-last-child(-n+2) .mega-panel{ left:auto; right:0; } /* ---------- mobile drawer ---------- */ .drawer-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:80; backdrop-filter:blur(2px); } .drawer-backdrop.open{ display:block; } .mobile-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(360px, 88vw); background:var(--ink); border-left:1px solid var(--pitch-line); z-index:90; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; overflow-y:auto; } .mobile-drawer.open{ transform:translateX(0); } .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--pitch-line); } .drawer-head-actions{ display:flex; align-items:center; gap:12px; } .drawer-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--pitch-line); background:var(--card); color:var(--text-hi); font-size:16px; cursor:pointer; } .drawer-actions{ display:flex; gap:10px; padding:18px 20px; border-bottom:1px solid var(--pitch-line); } .drawer-actions .btn{ flex:1; } .drawer-quick{ padding:6px 20px; border-bottom:1px solid var(--pitch-line); } .drawer-quick a{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-family:var(--f-display); font-size:15px; color:var(--text-hi); border-top:1px solid var(--pitch-line); } .drawer-quick a:first-child{ border-top:0; } .drawer-quick a.gold{ color:var(--signal); } .drawer-groups{ padding:8px 20px 24px; } .drawer-group{ border-top:1px solid var(--pitch-line); } .drawer-group:first-child{ border-top:0; } .drawer-group-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; padding:15px 0; cursor:pointer; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mid); } .drawer-group.open .drawer-group-trigger{ color:var(--text-hi); } .drawer-group-trigger::after{ content:"+"; font-size:16px; color:var(--text-low); } .drawer-group.open .drawer-group-trigger::after{ content:"–"; } .drawer-group-panel{ display:none; padding-bottom:14px; } .drawer-group.open .drawer-group-panel{ display:block; } .drawer-group-panel a{ display:block; padding:9px 0 9px 4px; font-size:13.5px; color:var(--text-mid); } .drawer-group-panel a:hover{ color:var(--text-hi); } .drawer-foot{ margin-top:auto; padding:20px; font-family:var(--f-mono); font-size:11.5px; color:var(--text-low); border-top:1px solid var(--pitch-line); } /* ---------- categories strip (kept for small standalone use elsewhere on the site) ---------- */ .cat-pill{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-mid); border:1px solid var(--pitch-line); padding:7px 14px; border-radius:99px; transition:border-color .15s ease, color .15s ease, background .15s ease; } .cat-pill:hover{ border-color:var(--signal); color:var(--signal); } .cat-pill.gold{ border-color:var(--signal-dim); color:var(--signal); } /* ---------- fixtures + results pages: day tabs (pure CSS, no JS — radio+label technique) ---------- */ .tabs-css input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; } .tabs-css .tab-panel{ display:none; } #tab-today:checked ~ #panel-today, #tab-tomorrow:checked ~ #panel-tomorrow, #tab-weekend:checked ~ #panel-weekend, #rtab-today:checked ~ #rpanel-today, #rtab-yesterday:checked ~ #rpanel-yesterday, #rtab-week:checked ~ #rpanel-week{ display:block; } .fixtures-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--pitch-line); margin-bottom:32px; overflow-x:auto; } .fixtures-tabs label{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mid); padding:13px 20px; border-bottom:2px solid transparent; white-space:nowrap; flex-shrink:0; cursor:pointer; transition:color .15s ease, border-color .15s ease; } .fixtures-tabs label:hover{ color:var(--text-hi); } #tab-today:checked ~ .fixtures-tabs label[for="tab-today"], #tab-tomorrow:checked ~ .fixtures-tabs label[for="tab-tomorrow"], #tab-weekend:checked ~ .fixtures-tabs label[for="tab-weekend"], #rtab-today:checked ~ .fixtures-tabs label[for="rtab-today"], #rtab-yesterday:checked ~ .fixtures-tabs label[for="rtab-yesterday"], #rtab-week:checked ~ .fixtures-tabs label[for="rtab-week"]{ color:var(--signal); border-bottom-color:var(--signal); font-weight:600; } .fixtures-empty{ padding:48px 24px; text-align:center; color:var(--text-low); font-family:var(--f-mono); font-size:13px; border:1px dashed var(--pitch-line); border-radius:6px; } .fixtures-count{ font-family:var(--f-mono); font-size:12px; color:var(--text-low); margin-top:18px; } /* ---------- fixtures page: pagination — pure CSS (radio + label), one URL. All pages' content lives in this single document (good for SEO — one strong /fixtures page instead of several thin ones), CSS just controls which page is visible. Add page 3+ by adding another radio + .pg-page block + one more numbered