/* ═══════════════════════════════════════════════════════════════════════════ * club.css — single-club favourite-team pages (manchester-united / liverpool / manchester-city) * ═══════════════════════════════════════════════════════════════════════════ * Structural sibling of rugby.css (the single-team page template): same design tokens, * same #site-nav / .tab-bar / .bottom-nav / .panel / .cal-panel / .tz-select furniture, * so a club page reads as the same site as rugby.html and index.html. * * What differs from rugby: a rugby page shows NATIONS (emoji flags, a fixed pool of * curated fixtures), a club page shows CLUBS across MANY competitions — so the * fixture row is crest-led (api-sports team logos) and carries a per-competition * badge whose colour comes from a CSS custom property set per competition. * * Per-club accent: --accent / --accent-soft / --accent-deep / --on-accent are overridden * per page via body[data-club="..."], so United red, Liverpool red and City sky blue all * ship from ONE stylesheet. --on-accent exists because City's light blue needs DARK text * where the reds need white; anything painting a background with --accent must pair it * with --on-accent rather than hardcoding #fff. * ═══════════════════════════════════════════════════════════════════════════ */ :root{--bg:#0a0a1a;--panel:#111122;--card:#111122;--line:#1e1e3a;--text:#e8eaf0;--muted:#93A0BD;--red:#c41e3a;--navy:#1a3a6b;--gold:#ffd700;--accent:#c41e3a;--accent-soft:rgba(196,30,58,.14);--accent-deep:#3d0812;--on-accent:#fff} *{box-sizing:border-box;margin:0;padding:0} /* V238: form controls do NOT inherit font-family from body. Without this the tab bar, bottom nav and theme button rendered in Arial on every page while everything around them was Archivo - the most visible chrome on the site was off-brand. Element selectors are the weakest, so any control that sets its own family still wins. */ button,select,input,textarea{font-family:inherit} html{scroll-behavior:smooth;overflow-x:clip} body{font-family:'Archivo','Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5} body[data-theme="light"]{--bg:#f5f5f5;--panel:#ffffff;--card:#ffffff;--line:#e0e0e0;--text:#1a1a2e;--muted:#666;--gold:#b8860b} /* Per-club accent (set on ) */ body[data-club="liverpool"]{--accent:#c8102e;--accent-soft:rgba(200,16,46,.14);--accent-deep:#3d0812;--on-accent:#fff} body[data-club="man-utd"]{--accent:#da291c;--accent-soft:rgba(218,41,28,.14);--accent-deep:#3d0812;--on-accent:#fff} /* City are sky blue — the one club whose accent is NOT a red, so the live hero card's gradient tail is overridden below to stay in the same hue family. */ body[data-club="man-city"]{--accent:#6CABDD;--accent-soft:rgba(108,171,221,.16);--accent-deep:#0a2740;--on-accent:#0a1a2b} /* Theme toggle */ .theme-btn{padding:6px 14px;font-size:12px;font-weight:700;border-radius:999px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:var(--text);cursor:pointer;transition:all .15s} body[data-theme="light"] .theme-btn{border-color:rgba(0,0,0,0.15);background:rgba(0,0,0,0.05)} /* ── Site nav bar (below hero) — identical furniture to index/f1/rugby ── */ #site-nav{width:100%;background:#1a1a2e;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid rgba(196,30,58,.45);box-sizing:border-box} .sport-pill{display:flex;gap:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px;flex-wrap:wrap} .sport-btn{padding:5px 13px;font-size:22px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.65);line-height:1;display:inline-flex;align-items:center;gap:5px;transition:background .15s} .sport-btn.active{background:rgba(196,30,58,.55);color:#fff} .sport-btn:hover:not(.active){background:rgba(255,255,255,.1);color:#fff} .sport-btn .f1-label{font-size:12px;font-weight:800;font-family:'Archivo','Inter',sans-serif;letter-spacing:.05em;line-height:1} .lang-sel{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;padding:7px 16px;font-size:13px;font-weight:600;font-family:'Archivo','Inter',sans-serif;cursor:pointer;outline:none;min-width:120px;-webkit-appearance:none} .lang-sel option{background:#1a1a2e;color:#fff} [data-theme=light] #site-nav{background:#1a3a6b;border-bottom:2px solid rgba(196,30,58,.55)} /* ── Football sub-nav (World Cup + the club pages) ────────────────────────── Second level of the nav hierarchy: the sport pill picks the SPORT, this picks which football page. Shown only on football pages (index + the club pages), so F1 and rugby are unaffected. Same rule set lives in index.css — keep the two in sync. */ #football-nav{width:100%;background:#141c33;border-bottom:1px solid rgba(255,255,255,.07);padding:7px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-sizing:border-box} .sub-pill-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);flex-shrink:0} .sub-pill{display:flex;flex-wrap:wrap;gap:3px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px} .sub-btn{padding:5px 13px;border-radius:999px;text-decoration:none;font-family:'Archivo','Inter',sans-serif;font-size:13px;font-weight:700;line-height:1.2;color:rgba(255,255,255,.7);transition:background .15s,color .15s;white-space:nowrap;display:inline-flex;align-items:center} .sub-btn:hover:not(.active){background:rgba(255,255,255,.1);color:#fff} .sub-btn.active{background:var(--accent);color:var(--on-accent)} body[data-theme="light"] #football-nav{background:#22406f} @media(max-width:520px){ .sub-pill-label{flex-basis:100%} .sub-btn{font-size:12px;padding:5px 10px} } /* ── Announcement strip (full width, above the two columns) ── */ #club-announce-slot{max-width:920px;margin:14px auto 0;padding:0 16px} #club-announce-slot:empty{display:none} .club-announce{display:flex;align-items:flex-start;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:14px;padding:12px 40px 12px 14px;position:relative;font-size:12.5px;line-height:1.5;color:var(--text)} .club-announce .ca-icon{color:var(--accent);flex-shrink:0;display:flex;padding-top:1px} .club-announce .ca-text strong{color:var(--accent-text)} /* V255: crimson as text needs the AA-safe variant */ .club-announce .ca-x{position:absolute;right:8px;top:8px;background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px} .club-announce .ca-x:hover{color:var(--text)} /* ── Competition filter ── */ .comp-filter{margin:0 0 12px} .cf-chips{display:flex;flex-wrap:wrap;gap:6px} .cf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-family:'Archivo','Inter',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap} .cf-chip:hover:not(.active):not(.cf-pending){border-color:var(--accent);color:var(--accent)} .cf-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .cf-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;opacity:.75} /* Pending = nothing to show yet, so it must not read as clickable. */ .cf-chip.cf-pending{cursor:default;opacity:.6;border-style:dashed;color:var(--muted);background:transparent} .cf-await{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)} .cf-await-head{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .cf-await-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:7px} /* ── Date filter ── */ .day-filter{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)} .day-empty{line-height:1.6} .day-empty strong{color:var(--accent)} /* ── Feedback ── */ /* Sits above the fixed bottom-nav on mobile so it never covers the tab bar. */ /* The bottom-nav on this page is fixed and visible at EVERY width (unlike index.css, which hides it on desktop), so the FAB must clear it universally - at 22px it sat on top of the last tab. */ .feedback-fab{position:fixed;bottom:calc(86px + env(safe-area-inset-bottom,0px));right:18px;z-index:1000;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-radius:50px;padding:12px 20px;font-family:Archivo,Inter,sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s} .feedback-fab:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,0,0,.55)} .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)} .modal-overlay.open{display:flex} .modal{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:500px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.5)} .modal h3{font-family:Archivo Expanded,Archivo,sans-serif;font-size:18px;font-weight:800;margin-bottom:8px;color:var(--text)} .modal p{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.5} .feedback-textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-family:Archivo,Inter,sans-serif;font-size:14px;resize:vertical;min-height:110px;outline:none;margin-bottom:14px;transition:border-color .2s} .feedback-textarea:focus{border-color:var(--accent)} .modal-btns{display:flex;gap:10px;justify-content:flex-end} .cal-btn-primary{background:var(--accent);color:var(--on-accent)} @media(max-width:768px){.feedback-fab{right:14px;padding:9px 15px;font-size:13px}} /* ── Club switcher (combined page only) ── */ .club-switch{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)} /* V255: the brand crimson is a fill colour. As text on --bg/--panel it measures 3.35:1, so .badge-pill and friends use this lifted variant (4.55:1 on #111122, 4.80:1 on #0a0a1a). */ :root{--accent-text:#d86b7d} .club-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-family:'Archivo','Inter',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap} .club-chip:hover:not(.active){border-color:var(--accent)} .club-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .club-chip-crest{width:18px;height:18px;object-fit:contain;flex-shrink:0} /* Multi-select: chips are toggles, so an unselected chip must not look disabled and a selected one must read as "on". The tick is the affordance that says these combine, rather than behaving like radio buttons. Width is reserved even when empty so chips do not jump around as they are toggled. */ .club-tick{display:inline-block;width:10px;text-align:center;font-size:11px;font-weight:700;line-height:1;color:var(--club-c-text,var(--accent-text));flex-shrink:0} .club-chip.active .club-tick{color:var(--club-c,var(--accent))} .club-chip.active{border-color:var(--club-c,var(--accent));background:color-mix(in srgb,var(--club-c,var(--accent)) 16%,transparent);color:var(--text)} .club-chip-all{font-weight:800} .club-chip-all .cf-n{opacity:.9} .club-chip-live{width:7px;height:7px;border-radius:50%;background:#2FBF71;flex-shrink:0;animation:clublivepulse 1.5s ease-in-out infinite} /* Per-club identity colours — used by the club tags, hero cards and summary rows so three simultaneous live matches are instantly tellable apart. */ /* V255 contrast: --club-c is the club's IDENTITY colour and is correct as a fill / border / gradient. As TEXT on our dark surfaces it fails WCAG AA: Liverpool #c8102e measured 3.17:1 on --panel #111122 (70 nodes on the page) and Man Utd #da291c measured 3.83:1 (another 70). --club-c-text is the same hue lifted toward white until it clears 4.5:1 on BOTH #111122 and #0a0a1a, so the club still reads as itself. Man City's #6CABDD is already 7.55:1 and is unchanged. Use --club-c-text wherever the colour carries words; keep --club-c for surfaces. */ [data-club="man-utd"]{--club-c:#da291c;--club-c-text:#df473c} /* 4.53:1 on #111122 */ [data-club="liverpool"]{--club-c:#c8102e;--club-c-text:#d64e64} /* 4.57:1 */ [data-club="man-city"]{--club-c:#6CABDD;--club-c-text:#6CABDD} /* 7.55:1 already */ /* ── Which club a fixture belongs to ── */ .fx-clubs{display:inline-flex;gap:4px;flex-shrink:0} .fx-club-tag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:4px;background:color-mix(in srgb,var(--club-c,var(--muted)) 20%,transparent);color:var(--club-c-text,var(--muted));border:1px solid color-mix(in srgb,var(--club-c,var(--muted)) 45%,transparent)} /* Neutral row separator (a fixture between two followed clubs) */ .fx-v{font-size:11px;color:var(--muted);font-weight:600;flex-shrink:0} /* ── Concurrent live matches ── */ /* One card per live match. Past a single match they tile, so three 15:00 kick-offs are all visible at once rather than stacked down the page. */ #club-live-card.live-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;text-align:left} #club-live-card.live-grid .club-hero-card{margin-bottom:0} #club-live-card .club-hero-card[data-club]{background:linear-gradient(135deg,var(--club-c) 0%,var(--accent-deep) 100%)} #club-live-card .club-hero-tag{margin-bottom:8px} #club-live-card .club-hero-tag .fx-club-tag{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.35)} #club-live-card .club-hero-tag .fx-clubs{margin-left:0} @media(max-width:680px){#club-live-card.live-grid{grid-template-columns:1fr}} /* ── Per-club summary rows (combined page) ── */ .pc-list{display:flex;flex-direction:column;gap:8px} .pc-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);border-left:3px solid var(--club-c,var(--accent))} .pc-crest{width:30px;height:30px;object-fit:contain;flex-shrink:0} .pc-body{flex:1;min-width:0} .pc-name{font-size:13.5px;font-weight:700;line-height:1.3} .pc-sub{font-size:11px;color:var(--muted);margin-top:2px} .pc-next{font-size:11px;color:var(--club-c-text,var(--accent-text));margin-top:3px;display:flex;align-items:center;gap:4px;font-weight:600} .pc-row-error{border-left-color:var(--gold);opacity:.9} .pc-err{color:var(--gold)} .pc-retry{padding:5px 12px;font-size:12px;flex-shrink:0} .pc-form{flex-shrink:0} .pc-form .form-row{flex-wrap:nowrap} .pc-form .panel-note{margin:0;font-size:10px} @media(max-width:400px){.pc-form{display:none}} /* ── Competitions tab: pending placeholder cards ── */ .comp-await-head{display:flex;align-items:center;gap:6px;font-family:'Archivo Expanded','Archivo',sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px dashed var(--line)} .comp-card-pending{border-style:dashed;opacity:.72;cursor:default} .comp-count-pending{font-size:10px;letter-spacing:.5px;color:var(--muted)} .comp-await-note{margin-top:8px;line-height:1.5} /* ── Club header ── */ .site-header{padding:26px 16px 0;text-align:center;max-width:920px;margin:0 auto} .club-crest{width:74px;height:74px;object-fit:contain;display:block;margin:0 auto 10px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))} .badge-pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:5px 16px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent-text);margin-bottom:10px;text-transform:uppercase} .site-title{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.01em} .site-sub{font-size:13px;color:var(--muted);margin-top:4px} .club-meta{font-size:12px;color:var(--muted);margin-top:6px;font-family:'JetBrains Mono',monospace} /* Combined-page header: the three crests together */ .club-crest-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px} .club-crest-sm{width:54px;height:54px;margin:0} @media(max-width:400px){.club-crest-sm{width:44px;height:44px}.club-crest-row{gap:10px}} /* ── Tabs ── */ .tab-bar{display:flex;overflow-x:auto;padding:16px 16px 0;max-width:920px;margin:0 auto;scrollbar-width:none} .tab-bar::-webkit-scrollbar{display:none} .tab-btn{flex:1;min-width:118px;padding:10px 12px;font-size:13px;font-weight:600;border:none;border-bottom:2px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap} .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)} /* T-10 (V199): route tab/nav clicks to the button, immune to the lucide icon swap. */ .tab-btn *,.bn-btn *{pointer-events:none} /* ── Layout ── */ .content-wrap{display:grid;grid-template-columns:340px 1fr;gap:16px;max-width:920px;margin:16px auto 90px;padding:0 16px} @media(max-width:680px){.content-wrap{grid-template-columns:1fr}} /* ── Panel ── */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px} .panel h2{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:15px;font-weight:800;letter-spacing:.3px;margin-bottom:14px;color:var(--text);display:flex;align-items:center;gap:7px} .panel-note{font-size:11px;color:var(--muted);margin:-8px 0 12px;line-height:1.45} /* ── Fixture row (crest-led, competition-badged) ── */ .fx-group{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.2px;color:var(--gold);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line);text-transform:uppercase} .fx-group:first-of-type{margin-top:2px} .fx-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);margin-bottom:7px;transition:all .15s} .fx-row.past{opacity:.72} .fx-row.next-up{border-color:var(--accent);background:var(--accent-soft)} .fx-row.is-live{border-color:var(--accent);background:var(--accent-soft)} .fx-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);min-width:56px;line-height:1.45;flex-shrink:0} .fx-body{flex:1;min-width:0} .fx-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:600} .fx-crest{width:20px;height:20px;object-fit:contain;flex-shrink:0;vertical-align:middle} .fx-team{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-shrink:1} /* The curated club is named on every row like any other side, then tinted and bolded so it still reads as "my club" at a glance — important in the all-clubs view where three clubs' fixtures are interleaved. Colour comes from --club-c via data-club. */ .fx-team-mine .fx-opp{color:var(--club-c-text,var(--accent-text));font-weight:700} .fx-away{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-shrink:1} .fx-opp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-venue{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:4px} .fx-right{flex-shrink:0;text-align:right;min-width:52px} .fx-score{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--gold)} .fx-score.win{color:#2FBF71} .fx-score.loss{color:#e05263} .fx-score.draw{color:var(--muted)} .fx-ko{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--muted)} .fx-badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;flex-shrink:0;letter-spacing:.4px} .fx-next{background:var(--accent);color:var(--on-accent)} .fx-live{background:var(--accent);color:var(--on-accent);animation:clublivepulse 1.5s ease-in-out infinite} .fx-pst{background:rgba(255,215,0,.16);color:var(--gold)} @keyframes clublivepulse{0%,100%{opacity:1}50%{opacity:.55}} /* ── Competition badge ── */ .comp-badge{font-size:9px;padding:2px 7px;border-radius:999px;font-weight:700;letter-spacing:.4px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;background:rgba(255,255,255,.07);color:#c3c9dd} .comp-badge[data-c="league"]{background:rgba(61,113,255,.18);color:#8ab0ff} .comp-badge[data-c="ucl"]{background:rgba(14,44,120,.55);color:#8fb4ff} .comp-badge[data-c="uel"]{background:rgba(255,140,0,.16);color:#ffab4d} .comp-badge[data-c="domcup"]{background:rgba(255,215,0,.15);color:var(--gold)} .comp-badge[data-c="lgcup"]{background:rgba(34,197,94,.16);color:#4ade80} .comp-badge[data-c="friendly"]{background:rgba(255,255,255,.05);color:var(--muted)} /* ── Live hero card (mirrors rugby's) ── */ #club-live-card .club-hero-card{border-radius:16px;padding:16px 20px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);border:1px solid rgba(255,255,255,.16);color:#fff;position:relative;overflow:hidden;margin-bottom:8px} #club-live-card .club-hero-card:last-child{margin-bottom:0} #club-live-card .club-hero-teams{display:flex;align-items:center;justify-content:space-between;gap:12px} #club-live-card .club-hero-team{display:flex;align-items:center;gap:8px;flex:1;min-width:0} #club-live-card .club-hero-team-right{flex-direction:row-reverse;text-align:right} #club-live-card .club-hero-crest{width:30px;height:30px;object-fit:contain;flex-shrink:0} #club-live-card .club-hero-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #club-live-card .club-hero-score{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:700;flex-shrink:0;color:#fff} #club-live-card .club-hero-center{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;padding:0 8px} #club-live-card .club-hero-live-badge{background:#fff;color:#c0392b;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;letter-spacing:.04em;animation:clublivepulse 1.5s ease-in-out infinite} #club-live-card .club-hero-status{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:rgba(255,255,255,.85)} #club-live-card .club-hero-ht{text-align:center;font-size:11px;color:rgba(255,255,255,.72);margin-top:5px;font-family:'JetBrains Mono',monospace} @media(max-width:680px){ #club-live-card .club-hero-teams{flex-direction:column;gap:8px} #club-live-card .club-hero-team-right{flex-direction:row;text-align:left} #club-live-card .club-hero-card{padding:14px 16px} } /* ── Next-fixture detail + countdown ── */ .match-detail{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:12px} .md-comp{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:700;margin-bottom:14px;text-transform:uppercase} .md-teams{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .md-team{text-align:center;flex:1;min-width:0} .md-crest{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto 6px} .md-name{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis} .md-vs{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:22px;color:var(--muted);flex-shrink:0} .cd-wrap{text-align:center;padding:18px 12px 6px} .cd-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:8px;font-weight:700} .cd-match{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:17px;font-weight:800;margin-bottom:14px} .cd-clock{display:flex;justify-content:center;gap:14px;margin-bottom:14px} .cd-unit{text-align:center} .cd-val{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;color:var(--gold);line-height:1} .cd-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;margin-top:3px} .cd-venue{font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:5px} /* ── Stat tiles ── */ .stat-grid{display:flex;gap:12px;flex-wrap:wrap} .stat-tile{flex:1;min-width:96px;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:14px} .stat-val{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;line-height:1} .stat-lbl{font-size:10px;color:var(--muted);margin-top:5px;letter-spacing:.6px;text-transform:uppercase} /* ── Form pills ── */ .form-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center} .form-pill{width:23px;height:23px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#fff} .form-w{background:#2FBF71} .form-d{background:#7a7a9a} .form-l{background:#e05263} /* ── Competitions tab ── */ .comp-card{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:12px;padding:12px 14px;margin-bottom:8px} .comp-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px} .comp-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0} .comp-name{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comp-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);font-weight:700;flex-shrink:0} .comp-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:8px 0 6px} .comp-bar-fill{height:100%;background:var(--accent);border-radius:999px} .comp-sub{font-size:11px;color:var(--muted);line-height:1.45} .comp-caveat{font-size:11px;color:var(--gold);line-height:1.45;margin-top:5px;display:flex;gap:5px;align-items:flex-start} /* ── Match extras (prediction + team news) ── */ .mx-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .mx-head{display:flex;align-items:center;gap:6px;font-family:Archivo Expanded,Archivo,sans-serif;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .mx-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.5px} .mx-bar-label{flex:0 0 34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .mx-bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;min-width:0} .mx-bar-fill{display:block;height:100%;border-radius:999px} .mx-home{background:var(--accent)}.mx-draw{background:var(--muted)}.mx-away{background:var(--gold)} .mx-bar-pct{flex:0 0 38px;text-align:right;font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:700;color:var(--text)} .mx-advice{font-size:12px;color:var(--text);margin-top:8px;line-height:1.5} .mx-advice strong{color:var(--accent-text)} /* V255: "Suggestion:" was --accent crimson at 3.19:1 */ /* The site is not a betting product; this label is not decorative. */ .mx-disclaimer{font-size:11px;color:var(--muted);margin-top:6px;font-style:italic;line-height:1.45} .mx-inj{display:flex;flex-direction:column;gap:6px} .mx-inj-row{display:flex;align-items:center;gap:8px;font-size:12.5px} .mx-inj-dot{width:7px;height:7px;border-radius:50%;background:#e05263;flex-shrink:0} .mx-inj-dot.mx-q{background:var(--gold)} .mx-inj-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mx-inj-team{color:var(--muted);font-size:11px} .mx-inj-type{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);flex-shrink:0} /* ── Squads tab ── */ .sq-count{margin-left:auto;font-family:JetBrains Mono,monospace;font-size:12px;color:var(--gold)} .sq-pos{font-family:Archivo Expanded,Archivo,sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)} .sq-pos:first-of-type{margin-top:0} .sq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .sq-player{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);min-width:0} .sq-photo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.06)} .sq-meta{min-width:0} .sq-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sq-sub{font-family:JetBrains Mono,monospace;font-size:10.5px;color:var(--muted);margin-top:1px} /* ── Venues tab ── */ .venue-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);margin-bottom:7px} .venue-item.home-venue{border-color:var(--accent);background:var(--accent-soft)} .venue-icon{font-size:20px;flex-shrink:0} .venue-info{flex:1;min-width:0} .venue-name{font-size:13px;font-weight:700;line-height:1.3} .venue-city{font-size:11px;color:var(--muted);margin-top:2px} .venue-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);font-weight:700;flex-shrink:0} /* ── Empty / status ── */ .detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;text-align:center;color:var(--muted);padding:40px 20px;background:var(--panel);border:1px solid var(--line);border-radius:16px} .de-icon{font-size:44px;margin-bottom:12px} #club-status{display:none;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;border:1px solid;font-size:11px;font-weight:700;margin-top:8px;font-family:'Archivo',sans-serif} /* ── Bottom nav ── */ .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);display:flex;z-index:999;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;max-width:100vw} .bn-btn{flex:1;min-width:0;padding:10px 4px 8px;text-align:center;font-size:10px;font-weight:600;color:var(--muted);border:none;background:transparent;cursor:pointer;transition:color .15s} .bn-btn.active{color:var(--accent-text)} /* V255: active nav label, crimson on --panel was 3.19:1 */ .bn-icon{display:block;font-size:18px;margin-bottom:2px} /* ── Timezone selector ── */ .tz-bar{width:100%;background:#1a1a2e;padding:6px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.07)} .tz-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:600;flex-shrink:0;display:inline-flex;align-items:center;gap:5px} .tz-note{flex-basis:100%;font-size:12px;color:#93A0BD;font-style:italic;padding:2px 0 4px;line-height:1.4} .tz-select{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;border-radius:999px;padding:6px 30px 6px 12px;font-family:'Archivo','Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s} .tz-select:hover{border-color:var(--accent)} .tz-select option{background:#1a1a2e;color:#e8eaf0} body[data-theme="light"] .tz-select{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.06);color:#1a1a2e;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center} body[data-theme="light"] .tz-select option{background:#fff;color:#1a1a2e} /* ── Calendar panel ── */ .cal-panel{background:var(--panel);border:1px dashed var(--accent);border-radius:16px;padding:16px 18px;margin:16px auto 0;max-width:920px} .cal-panel-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;-webkit-user-select:none;padding:2px 0 6px} .cal-panel h3{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:16px;font-weight:800;color:var(--accent);margin:0;display:flex;align-items:center;gap:7px} .cal-panel-body{display:none} .cal-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line)} .cal-row:first-of-type{border-top:none;padding-top:0} .cal-row-label{font-weight:700;font-size:13px;color:var(--text);min-width:170px;flex-shrink:0;display:flex;align-items:center;gap:6px} .cal-row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .cal-btn-pill{padding:7px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-family:'Archivo','Inter',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s} .cal-btn-pill:hover{background:var(--accent);color:var(--on-accent)} .cal-note{font-size:12px;color:var(--muted);flex-basis:100%;margin-top:2px;line-height:1.45} .cal-sel{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:var(--text);padding:6px 14px;font-size:13px;font-weight:600;font-family:'Archivo','Inter',sans-serif;cursor:pointer;outline:none} .cal-sel option{background:#1a1a2e;color:#fff} body[data-theme="light"] .cal-sel{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.2)} body[data-theme="light"] .cal-sel option{background:#fff;color:#1a1a2e} /* ── Mobile ── */ @media(max-width:768px){ .tz-bar{padding-left:10px;padding-right:10px;max-width:100%} .tz-label{min-width:0} .tz-select{max-width:100%;min-width:0} .cal-panel{margin-left:16px;margin-right:16px} .site-title{font-size:25px} } /* ═══════════════════════════════════════════════════════════════════════════ * LIGHT MODE — DECISION PENDING (V238). DO NOT DELETE WITHOUT ASKING GARTH. * Every [data-theme="light"] rule in this file is currently UNREACHABLE: the theme * toggle is hardcoded style="display:none" in the markup of all four pages and no * script ever un-hides it, so no visitor can switch themes. The CSS still ships to * every visitor on every page load. * Two options, Garth to choose: * (a) EXPOSE - remove the inline display:none and verify light mode across all * four pages (it has never been tested end to end), then keep these. * (b) REMOVE - delete the light rules and the dead toggle markup. * Left in place deliberately until that call is made. * ═══════════════════════════════════════════════════════════════════════════ */ /* V241 — CLS: reserve the icon box BEFORE lucide swaps for a sized