/* ============================================================ WC 2026 Tipping — style.css Font: Poppins (loaded in each page's ) Themes: dark (default) · light · system ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. TOKENS ══════════════════════════════════════════════════════════ */ /* Dark (default) */ :root, [data-theme="dark"] { --bg: #060c06; --surface: #1e1e1e; --surface-2: #2a2b2a; --border: rgba(240,242,240,0.09); --green: #54c750; --green-dim: #3d9e3a; --green-bg: rgba(84,199,80,0.12); --green-tint: rgba(84,199,80,0.12); /* alias */ --gold: #f5a623; --gold-bg: rgba(245,166,35,0.12); --red: #f87171; --red-bg: rgba(248,113,113,0.10); --fg: #f0f2f0; --fg-muted: #9a9c9a; --fg-dim: #5b5b5b; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --font: 'Poppins', system-ui, sans-serif; --font-display: 'Poppins', system-ui, sans-serif; --font-sans: 'Poppins', system-ui, sans-serif; --nav-h: 56px; --max-w: 1200px; } /* Light */ [data-theme="light"] { --bg: #f4f6f3; --surface: #ffffff; --surface-2: #eef1ed; --border: #d8ded6; --green: #3fae3b; --green-dim: #348f31; --green-bg: #dff3dd; --green-tint: #dff3dd; /* alias */ --gold: #b86e0a; --gold-bg: rgba(184,110,10,0.10); --red: #c0392b; --red-bg: rgba(192,57,43,0.10); --fg: #202420; --fg-muted: #4f574f; --fg-dim: #737b73; } /* System: follow OS dark preference */ @media (prefers-color-scheme: dark) { [data-theme="system"] { --bg: #060c06; --surface: #1e1e1e; --surface-2: #2a2b2a; --border: rgba(240,242,240,0.09); --green: #54c750; --green-dim: #3d9e3a; --green-bg: rgba(84,199,80,0.12); --green-tint: rgba(84,199,80,0.12); --gold: #f5a623; --gold-bg: rgba(245,166,35,0.12); --red: #f87171; --red-bg: rgba(248,113,113,0.10); --fg: #f0f2f0; --fg-muted: #9a9c9a; --fg-dim: #5b5b5b; } } /* System: follow OS light preference */ @media (prefers-color-scheme: light) { [data-theme="system"] { --bg: #f4f6f3; --surface: #ffffff; --surface-2: #eef1ed; --border: #d8ded6; --green: #3fae3b; --green-dim: #348f31; --green-bg: #dff3dd; --green-tint: #dff3dd; /* alias */ --gold: #b86e0a; --gold-bg: rgba(184,110,10,0.10); --red: #c0392b; --red-bg: rgba(192,57,43,0.10); --fg: #202420; --fg-muted: #4f574f; --fg-dim: #737b73; } } /* ══════════════════════════════════════════════════════════ 2. RESET & BASE ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--fg); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; } /* ── Background dim overlay (above background, below all content) ────────── */ html::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } [data-theme="dark"] html::before { background: rgba(8, 12, 20, 0.60); } [data-theme="light"] html::before { background: rgba(220, 235, 220, 0.50); } @media (prefers-color-scheme: dark) { [data-theme="system"] html::before { background: rgba(8, 12, 20, 0.60); } } @media (prefers-color-scheme: light) { [data-theme="system"] html::before { background: rgba(220, 235, 220, 0.50); } } /* ── Global stadium background ───────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; } body::after { content: ''; position: fixed; bottom: -10%; left: 50%; transform: translateX(-50%); width: 140vw; height: 65vh; z-index: -2; pointer-events: none; border-radius: 60% 60% 0 0 / 30% 30% 0 0; border-bottom: none; } /* Dark theme background */ [data-theme="dark"] body::before { background: radial-gradient(ellipse 80% 55% at 50% 0%, #0d2d1a 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 15% 100%, #0a1f3a 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 85% 100%, #1a0a2e 0%, transparent 55%), linear-gradient(160deg, #060d14 0%, #0d1f10 45%, #080d1a 100%); } [data-theme="dark"] body::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 8vw, transparent 8vw, transparent 16vw), linear-gradient(180deg, rgba(22,80,35,.45) 0%, rgba(10,40,20,.75) 100%); border: 1px solid rgba(255,255,255,.05); } /* Light theme background */ [data-theme="light"] body::before { background: radial-gradient(ellipse 80% 50% at 50% 0%, #b3d9f7 0%, transparent 65%), linear-gradient(180deg, #d0eaf8 0%, #c8e6c9 55%, #a5d6a7 100%); } [data-theme="light"] body::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0px, rgba(255,255,255,.09) 8vw, transparent 8vw, transparent 16vw), linear-gradient(180deg, rgba(76,153,76,.4) 0%, rgba(46,120,46,.7) 100%); border: 1px solid rgba(255,255,255,.25); } /* System theme — follow OS */ @media (prefers-color-scheme: dark) { [data-theme="system"] body::before { background: radial-gradient(ellipse 80% 55% at 50% 0%, #0d2d1a 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 15% 100%, #0a1f3a 0%, transparent 55%), linear-gradient(160deg, #060d14 0%, #0d1f10 45%, #080d1a 100%); } [data-theme="system"] body::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 8vw, transparent 8vw, transparent 16vw), linear-gradient(180deg, rgba(22,80,35,.45) 0%, rgba(10,40,20,.75) 100%); border: 1px solid rgba(255,255,255,.05); } } @media (prefers-color-scheme: light) { [data-theme="system"] body::before { background: radial-gradient(ellipse 80% 50% at 50% 0%, #b3d9f7 0%, transparent 65%), linear-gradient(180deg, #d0eaf8 0%, #c8e6c9 55%, #a5d6a7 100%); } [data-theme="system"] body::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0px, rgba(255,255,255,.09) 8vw, transparent 8vw, transparent 16vw), linear-gradient(180deg, rgba(76,153,76,.4) 0%, rgba(46,120,46,.7) 100%); border: 1px solid rgba(255,255,255,.25); } } a { color: var(--green); text-decoration: none; } a:hover { opacity: .8; } img { max-width: 100%; display: block; } /* Heroicons inline SVG */ .hi { display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; } ::selection { background: var(--green-bg); color: var(--green); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ══════════════════════════════════════════════════════════ 3. LAYOUT ══════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; } /* ══════════════════════════════════════════════════════════ 4. NAVIGATION ══════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="dark"] .nav, [data-theme="system"] .nav { background: rgba(26, 31, 46, 0.85); } [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.85); } @media (prefers-color-scheme: dark) { [data-theme="system"] .nav { background: rgba(26, 31, 46, 0.85); } } @media (prefers-color-scheme: light) { [data-theme="system"] .nav { background: rgba(255, 255, 255, 0.85); } } .nav-inner { max-width: var(--max-w); height: 100%; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; gap: .5rem; } .nav-brand { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; color: var(--fg); flex-shrink: 0; } .nav-brand:hover { opacity: 1; } .nav-logo { width: 24px; height: 24px; object-fit: contain; } .nav-links { display: flex; align-items: center; list-style: none; gap: .1rem; margin-left: .75rem; flex: 1; } .nav-link { display: flex; align-items: center; height: 32px; padding: 0 .75rem; border-radius: var(--radius-sm); font-size: .825rem; font-weight: 500; color: var(--fg-muted); transition: color .15s, background .15s; white-space: nowrap; } .nav-link:hover { color: var(--fg); background: var(--surface-2); opacity: 1; } .nav-link.active { color: var(--green); background: var(--green-bg); font-weight: 600; } .nav-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; } .nav-user { display: flex; align-items: center; gap: .4rem; } .nav-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--green-bg); border: 1.5px solid var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; color: var(--green); flex-shrink: 0; } .nav-avatar-photo { object-fit: cover; display: block; } .nav-name { font-size: .825rem; font-weight: 500; color: var(--fg-muted); } .nav-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 .75rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 500; color: var(--fg-dim); border: 1px solid var(--border); background: none; cursor: pointer; transition: all .15s; } .nav-btn:hover { color: var(--fg); border-color: var(--fg-dim); opacity: 1; } @media (max-width: 700px) { .nav-links { display: none; } .nav-name { display: none; } } /* ══════════════════════════════════════════════════════════ 5. PAGE HEADER ══════════════════════════════════════════════════════════ */ .hero { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; } .hero-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: .35rem; } .hero-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--fg); line-height: 1.1; letter-spacing: -.02em; } .hero-sub { font-size: .875rem; color: var(--fg-muted); margin-top: .4rem; font-weight: 400; } /* ══════════════════════════════════════════════════════════ 6. CARDS ══════════════════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] .card, [data-theme="system"] .card { background: rgba(26, 31, 46, 0.80); } [data-theme="light"] .card { background: rgba(255, 255, 255, 0.78); } @media (prefers-color-scheme: dark) { [data-theme="system"] .card { background: rgba(26, 31, 46, 0.80); } } @media (prefers-color-scheme: light) { [data-theme="system"] .card { background: rgba(255, 255, 255, 0.78); } } .card-title { font-size: 1rem; font-weight: 700; color: var(--fg); margin-bottom: .75rem; } /* ══════════════════════════════════════════════════════════ 7. STAT CARDS ══════════════════════════════════════════════════════════ */ .stat-card { display: flex; flex-direction: column; gap: .25rem; } .stat-num { font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--fg); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat-num .accent { color: var(--green); } .stat-num .gold { color: var(--gold); } .stat-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); } /* ══════════════════════════════════════════════════════════ 8. BUTTONS ══════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 1.125rem; border-radius: var(--radius); font-family: var(--font); font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .btn:hover { opacity: 1; } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn-primary { background: var(--green); color: #fff; border-color: var(--green); } .btn-primary:hover { background: var(--green-dim); border-color: var(--green-dim); } .btn-ghost { background: none; color: var(--fg-muted); border-color: var(--border); } .btn-ghost:hover { color: var(--fg); border-color: var(--fg-dim); background: var(--surface-2); } .btn-danger { background: none; color: var(--red); border-color: var(--border); } .btn-danger:hover { background: var(--red-bg); border-color: var(--red); } .btn-lg { height: 46px; padding: 0 1.5rem; font-size: .95rem; border-radius: var(--radius-lg); } .btn-sm { height: 30px; padding: 0 .7rem; font-size: .78rem; border-radius: var(--radius-sm); } /* ══════════════════════════════════════════════════════════ 9. TABS ══════════════════════════════════════════════════════════ */ .tabs, .admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .tab, .admin-tab { height: 38px; padding: 0 1rem; border: none; background: none; color: var(--fg-muted); font-family: var(--font); font-size: .85rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .tab:hover, .admin-tab:hover { color: var(--fg); } .tab.active, .admin-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; } /* ══════════════════════════════════════════════════════════ 10. FORM ELEMENTS ══════════════════════════════════════════════════════════ */ input[type="text"], input[type="number"], input[type="email"], input[type="datetime-local"], select, textarea { font-family: var(--font); font-size: .875rem; font-weight: 400; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .875rem; width: 100%; transition: border-color .15s, box-shadow .15s; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); } /* Score input */ .score-inp { width: 52px; height: 46px; padding: 0; text-align: center; font-size: 1.25rem; font-weight: 700; font-family: var(--font); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield; } .score-inp::-webkit-outer-spin-button, .score-inp::-webkit-inner-spin-button { -webkit-appearance: none; } .score-inp:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); outline: none; } .score-inp:not(:placeholder-shown) { border-color: var(--green); color: var(--green); font-weight: 700; } label { font-weight: 600; font-size: .875rem; color: var(--fg); } /* Admin result score inputs */ .res-score-inp { width: 46px; height: 38px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg); font-size: .95rem; font-weight: 700; font-family: var(--font); -moz-appearance: textfield; } .res-score-inp::-webkit-outer-spin-button, .res-score-inp::-webkit-inner-spin-button { -webkit-appearance: none; } .res-score-inp:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg); outline: none; } /* ══════════════════════════════════════════════════════════ 11. NOTICES ══════════════════════════════════════════════════════════ */ .notice { padding: .875rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 500; border: 1px solid; } .notice-info { background: var(--green-bg); color: var(--green); border-color: rgba(34,197,94,0.2); } .notice-warn { background: var(--gold-bg); color: var(--gold); border-color: rgba(245,158,11,0.2); } .notice-error { background: var(--red-bg); color: var(--red); border-color: rgba(248,113,113,0.2); } .notice-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border-color: rgba(59,130,246,0.25); } .notice-blue a { color: #93c5fd; } [data-theme="light"] .notice-blue, [data-theme="system"] .notice-blue { background: rgba(59,130,246,0.08); color: #2563eb; border-color: rgba(59,130,246,0.2); } [data-theme="light"] .notice-blue a, [data-theme="system"] .notice-blue a { color: #1d4ed8; } /* ══════════════════════════════════════════════════════════ 12. PROGRESS BAR ══════════════════════════════════════════════════════════ */ .prog { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .prog-bar { height: 100%; background: var(--green); border-radius: 2px; transition: width .6s ease; } /* ══════════════════════════════════════════════════════════ 13. MATCH ROW (tips & results) ══════════════════════════════════════════════════════════ */ .match-row { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: .75rem; padding: .875rem 0; border-bottom: 1px solid var(--border); } .match-row:last-child { border-bottom: none; } .match-team { display: flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .875rem; } .match-team.away { flex-direction: row-reverse; text-align: right; } .match-team img { width: 26px; height: 19px; object-fit: contain; border-radius: 2px; flex-shrink: 0; } .score-sep { font-weight: 600; font-size: .85rem; color: var(--fg-dim); text-align: center; min-width: 10px; } /* ══════════════════════════════════════════════════════════ 14. GROUP TABLE ══════════════════════════════════════════════════════════ */ .gtable { width: 100%; border-collapse: collapse; font-size: .82rem; } .gtable th { padding: .3rem .5rem; text-align: right; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); border-bottom: 1px solid var(--border); } .gtable th:first-child { text-align: left; } .gtable td { padding: .4rem .5rem; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .gtable td:first-child { text-align: left; font-weight: 500; } .gtable tbody tr:last-child td { border-bottom: none; } /* Position colouring */ .gtable tbody tr:nth-child(1) td { color: var(--green); } .gtable tbody tr:nth-child(3) td { color: var(--gold); } .pos-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: .65rem; font-weight: 700; background: var(--surface-2); color: var(--fg-dim); margin-right: .3rem; vertical-align: middle; flex-shrink: 0; } .gtable tbody tr:nth-child(1) .pos-badge { background: var(--green-bg); color: var(--green); } .gtable tbody tr:nth-child(2) .pos-badge { background: var(--border); color: var(--fg-muted); } .gtable tbody tr:nth-child(3) .pos-badge { background: var(--gold-bg); color: var(--gold); } /* ══════════════════════════════════════════════════════════ 15. SCOREBOARD ══════════════════════════════════════════════════════════ */ .sb-table { width: 100%; border-collapse: collapse; } .sb-table th { padding: .5rem .875rem; text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); border-bottom: 1px solid var(--border); } .sb-table th.num { text-align: right; } .sb-table td { padding: .7rem .875rem; border-bottom: 1px solid var(--border); } .sb-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: .875rem; } .sb-table tbody tr:last-child td { border-bottom: none; } .sb-table tbody tr:hover td { background: var(--surface-2); cursor: pointer; } .sb-table tbody tr.is-me td { background: var(--green-bg); } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; font-weight: 700; font-size: .8rem; background: var(--surface-2); color: var(--fg-dim); } .rank-1 { background: var(--gold-bg); color: var(--gold); } .rank-2 { background: rgba(148,163,184,0.1); color: #94a3b8; } .rank-3 { background: rgba(160,110,60,0.12); color: #b07840; } .sb-pts-big { font-size: 1.2rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } .you-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 .4em; border-radius: 4px; background: var(--green-bg); color: var(--green); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-left: .3rem; vertical-align: middle; border: 1px solid rgba(34,197,94,0.2); } .score-bar-wrap { display: flex; align-items: center; gap: .5rem; } .score-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; min-width: 60px; overflow: hidden; } .score-bar-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width .4s ease; } .score-pct { font-size: .72rem; color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Expandable breakdown row */ .sb-breakdown-row { display: none; } .sb-breakdown-row.open { display: table-row; } .sb-breakdown-row td { background: var(--surface-2) !important; padding: .875rem 1.5rem !important; cursor: default; } .breakdown-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; } .bd-item .bd-lbl { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: .15rem; } .bd-item .bd-val { font-size: 1.35rem; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; } .bd-item.total .bd-val { color: var(--gold); } /* ══════════════════════════════════════════════════════════ 16. KO ROUND SELECTOR ══════════════════════════════════════════════════════════ */ .ko-block { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .5rem; } .ko-block:last-child { margin-bottom: 0; } .ko-btn { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .55rem .875rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: none; color: var(--fg-muted); font-family: var(--font); font-size: .85rem; font-weight: 500; cursor: pointer; transition: all .15s; } .ko-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); } .ko-btn.selected { border-color: var(--green); background: var(--green-bg); color: var(--green); font-weight: 600; } .ko-btn img { width: 24px; height: 17px; object-fit: contain; border-radius: 2px; } .ko-vs { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--fg-dim); text-transform: uppercase; line-height: 1.5; } /* ══════════════════════════════════════════════════════════ 17. LANDING PAGE ══════════════════════════════════════════════════════════ */ .landing-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; } .landing-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.25rem 2rem 2rem; } .landing-emblem { display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; } .landing-emblem img { width: 72px; height: 72px; display: block; } .landing-title { font-size: 2rem; font-weight: 800; color: var(--fg); line-height: 1.1; letter-spacing: -.03em; margin-bottom: .35rem; text-align: center; } .landing-sub { font-size: .875rem; color: var(--fg-muted); margin-bottom: 1.75rem; text-align: center; } .landing-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } .landing-facts { display: flex; justify-content: center; gap: 0; } .landing-fact { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex: 1; padding: .6rem .5rem; } .landing-fact + .landing-fact { border-left: 1px solid var(--border); } .landing-fact strong { font-size: 1.4rem; font-weight: 800; color: var(--green); letter-spacing: -.02em; line-height: 1; } .landing-fact span { font-size: .7rem; font-weight: 500; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; } /* ── Alpha / pill filter buttons (scoreboard, admin) ── */ .alpha-btn { padding: .3rem .65rem; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: .78rem; font-weight: 500; cursor: pointer; font-family: var(--font); transition: background .12s, color .12s, border-color .12s; } .alpha-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg-dim); } .alpha-btn.active { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; } .alpha-count { opacity: .75; font-size: .72em; margin-left: .2em; } /* Dev mode banner */ .dev-banner { display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem; background: var(--gold-bg); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius); font-size: .8rem; font-weight: 500; color: var(--gold); margin-bottom: 1rem; } .dev-chip { display: inline-flex; align-items: center; height: 17px; padding: 0 .4em; background: var(--gold); color: #1a1000; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; flex-shrink: 0; } /* Theme switcher — used on landing page AND injected into nav */ .theme-row { display: flex; justify-content: center; gap: .35rem; margin-top: 1rem; } .theme-btn { height: 26px; padding: 0 .55rem; border-radius: 20px; font-size: .72rem; font-weight: 500; color: var(--fg-dim); border: 1px solid var(--border); background: none; cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap; } .theme-btn:hover { color: var(--fg); border-color: var(--fg-dim); } .theme-btn.active { border-color: var(--green); color: var(--green); background: var(--green-bg); } /* ══════════════════════════════════════════════════════════ 18. TIPS FORM ══════════════════════════════════════════════════════════ */ .steps { display: flex; align-items: center; margin-bottom: 1.75rem; } .step-item { display: flex; align-items: center; gap: .4rem; color: var(--fg-dim); font-size: .8rem; font-weight: 500; } .step-item.active { color: var(--green); font-weight: 600; } .step-item.done { color: var(--fg-muted); } .step-bullet { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; transition: all .15s; } .step-item.active .step-bullet { background: var(--green); color: #fff; border-color: var(--green); } .step-item.done .step-bullet { background: var(--surface-2); } .step-line { flex: 1; height: 1px; background: var(--border); margin: 0 .6rem; min-width: 20px; } /* Read-only mode: pill navigation bar */ .ro-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; } .ro-nav-btn { padding: .4rem .9rem; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: .8rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; font-family: var(--font); } .ro-nav-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg-dim); } .ro-nav-btn.active { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; } .ro-nav-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Group selector pill tabs */ .g-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; } .g-tab { height: 28px; padding: 0 .75rem; border-radius: 20px; border: 1px solid var(--border); background: none; color: var(--fg-muted); font-size: .78rem; font-weight: 500; cursor: pointer; font-family: var(--font); transition: all .15s; position: relative; } .g-tab:hover { border-color: var(--fg-dim); color: var(--fg); } .g-tab.active { border-color: var(--green); color: var(--green); background: var(--green-bg); font-weight: 600; } .g-tab.complete::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); } /* Sticky save footer */ .save-footer { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: .875rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; } .save-status { font-size: .8rem; font-weight: 500; color: var(--fg-dim); transition: color .2s; } .save-status.ok { color: var(--green); } .save-status.err { color: var(--red); } /* ══════════════════════════════════════════════════════════ 19. RESULTS PAGE ══════════════════════════════════════════════════════════ */ .result-score { font-size: 1.4rem; font-weight: 700; color: var(--fg); text-align: center; min-width: 70px; font-variant-numeric: tabular-nums; } .result-score.pending { font-size: .82rem; font-weight: 500; color: var(--fg-dim); } .match-num-lbl { font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); text-align: center; margin-bottom: .2rem; } /* ══════════════════════════════════════════════════════════ 20. ADMIN ══════════════════════════════════════════════════════════ */ code.token-display { display: block; word-break: break-all; font-size: .75rem; font-family: 'Courier New', monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; color: var(--green); letter-spacing: .04em; margin: .75rem 0; } /* ══════════════════════════════════════════════════════════ 21. SIGNAGE — kiosk dashboard ══════════════════════════════════════════════════════════ */ .signage-root { background: #080c0a; color: #e2f0e7; height: 100vh; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font); } .signage-header { height: 50px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.4); border-bottom: 1px solid rgba(34,197,94,0.1); flex-shrink: 0; } .signage-brand { font-size: 1rem; font-weight: 700; color: #22c55e; letter-spacing: -.01em; } .signage-meta { display: flex; align-items: center; gap: 1.25rem; font-size: .75rem; color: rgba(34,197,94,0.45); font-weight: 500; } .signage-clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; color: rgba(226,240,231,0.6); } .signage-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; } @keyframes signage-pulse { 0%,100% { box-shadow: 0 0 6px #22c55e; } 50% { box-shadow: 0 0 18px #22c55e; } } .signage-dot.pulse { animation: signage-pulse .7s ease; } .signage-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: rgba(34,197,94,0.05); overflow: hidden; } .signage-panel { background: #0a0f0c; display: flex; flex-direction: column; overflow: hidden; } .signage-panel-hdr { padding: .5rem 1.25rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(34,197,94,0.07); flex-shrink: 0; background: rgba(0,0,0,0.2); } .signage-panel-hdr h2 { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(34,197,94,0.45); margin: 0; } .signage-panel-hdr .panel-icon { font-size: .8rem; opacity: .5; } .signage-panel-body { flex: 1; overflow: hidden; padding: .65rem 1.25rem; } /* Scoreboard rows */ .sg-sb-row { display: grid; grid-template-columns: 26px 1fr 64px 44px; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .85rem; } .sg-sb-row:last-child { border-bottom: none; } .sg-rank { font-weight: 700; text-align: center; font-size: .75rem; color: rgba(100,116,139,0.5); } .sg-rank.gold { color: #f59e0b; font-size: .9rem; } .sg-rank.silver { color: #94a3b8; } .sg-rank.bronze { color: #a07850; } .sg-name { font-weight: 500; color: #e2f0e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; } .sg-pts { font-size: 1rem; font-weight: 700; color: #f59e0b; text-align: right; font-variant-numeric: tabular-nums; } .sg-bar { height: 2px; background: rgba(34,197,94,0.1); border-radius: 1px; overflow: hidden; } .sg-bar-fill { height: 100%; background: #22c55e; border-radius: 1px; } /* Result rows */ .sg-res-row { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .sg-res-row:last-child { border-bottom: none; } .sg-team { display: flex; align-items: center; gap: .3rem; color: #c8dece; font-weight: 400; font-size: .75rem; } .sg-team.r { flex-direction: row-reverse; text-align: right; justify-content: flex-start; } .sg-team img { width: 18px; height: 13px; object-fit: contain; border-radius: 1px; } .sg-score { font-size: .95rem; font-weight: 700; color: #f1f5f9; text-align: center; font-variant-numeric: tabular-nums; } .sg-score.pending { color: rgba(100,116,139,0.35); font-size: .7rem; font-weight: 500; } /* Stats / leader box */ .sg-leader-box { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.12); border-radius: 8px; padding: .75rem 1rem; margin-bottom: .6rem; } .sg-leader-label { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(34,197,94,0.4); margin-bottom: .1rem; } .sg-leader-name { font-size: 1.3rem; font-weight: 700; color: #f59e0b; } .sg-leader-sub { font-size: .7rem; color: rgba(100,116,139,0.6); margin-top: .1rem; font-weight: 500; } .sg-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; } .sg-stat-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 7px; padding: .6rem; text-align: center; } .sg-stat-num { font-size: 1.7rem; font-weight: 700; color: #22c55e; line-height: 1; font-variant-numeric: tabular-nums; } .sg-stat-lbl { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(34,197,94,0.3); margin-top: .2rem; } /* Upcoming */ .sg-upcoming-row { display: grid; grid-template-columns: 46px 1fr 18px 1fr; align-items: center; gap: .3rem; padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .75rem; } .sg-upcoming-row:last-child { border-bottom: none; } .sg-match-lbl { font-size: .6rem; color: rgba(34,197,94,0.3); font-variant-numeric: tabular-nums; font-weight: 600; } .sg-vs { text-align: center; color: rgba(100,116,139,0.3); font-size: .62rem; font-weight: 600; } /* Widescreen: 4-column strip */ @media (min-aspect-ratio: 16/10) and (min-width: 1400px) { .signage-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } } /* Mobile signage */ @media (max-width: 768px) { .signage-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); overflow-y: auto; height: auto; } .signage-panel { min-height: 240px; } } /* ══════════════════════════════════════════════════════════ 22. UTILITIES ══════════════════════════════════════════════════════════ */ .text-green { color: var(--green); } .text-gold { color: var(--gold); } .text-muted { color: var(--fg-muted); } .text-right { text-align: right; } .text-center { text-align: center; } .tabular { font-variant-numeric: tabular-nums; } .divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hide-mobile { display: block; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ══════════════════════════════════════════════════════════ 23. RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .hide-mobile { display: none !important; } .match-row { gap: .4rem; } .match-team { font-size: .8rem; } .match-team img { width: 20px; height: 15px; } .score-inp { width: 44px; height: 40px; font-size: 1.1rem; } .landing-card { padding: 1.75rem 1.25rem; } .landing-title { font-size: 1.65rem; } } /* ══════════════════════════════════════════════════════════ 24. ANIMATIONS ══════════════════════════════════════════════════════════ */ @keyframes fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fade-up .2s ease both; } .delay-1 { animation-delay: .04s; } .delay-2 { animation-delay: .08s; } .delay-3 { animation-delay: .12s; } .delay-4 { animation-delay: .16s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }