Spaces:
Running
Running
| CSS = """ | |
| /* ── Sora font ─────────────────────────────────────────────────────── */ | |
| @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap'); | |
| /* ── USA-flag palette ──────────────────────────────────────────────── */ | |
| :root { | |
| --navy: #fbfdff; | |
| --navy-deep: #f2f7fd; | |
| --blue: #1f4e8c; | |
| --blue-royal: #1e4391; | |
| --red: #b22234; | |
| --red-bright: #d12b3f; | |
| --white: #ffffff; | |
| --silver: #6b7280; | |
| --slate: #7c8795; | |
| --slate-light: #445366; | |
| --ink: #102033; | |
| --ink-soft: #465366; | |
| --glass-bg: rgba(255, 255, 255, 0.94); | |
| --glass-border: rgba(16, 32, 51, 0.08); | |
| --glass-hover: rgba(255, 255, 255, 0.98); | |
| --glow-red: rgba(178, 34, 52, 0.25); | |
| --glow-blue: rgba(30, 67, 145, 0.25); | |
| --glow-white: rgba(255, 255, 255, 0.06); | |
| --pastel-blue: #aecbfa; | |
| --pastel-red: #f9c0cb; | |
| --radius-lg: 20px; | |
| --radius-md: 14px; | |
| --radius-sm: 10px; | |
| } | |
| /* ── Global type ───────────────────────────────────────────────────── */ | |
| * { | |
| font-family: 'Sora', Inter, system-ui, -apple-system, sans-serif !important; | |
| } | |
| html, body { | |
| background: #f7fbff !important; | |
| } | |
| .gradio-container { | |
| background: | |
| radial-gradient(ellipse at 20% 0%, rgba(178, 34, 52, 0.05), transparent 45%), | |
| radial-gradient(ellipse at 80% 0%, rgba(30, 67, 145, 0.06), transparent 40%), | |
| radial-gradient(ellipse at 50% 100%, rgba(178, 34, 52, 0.03), transparent 50%), | |
| linear-gradient(180deg, #fbfdff 0%, #eef5fc 100%); | |
| color: var(--ink); | |
| min-height: 100vh; | |
| } | |
| body, .gradio-container { | |
| color-scheme: light !important; | |
| background: #f7fbff; | |
| } | |
| .gradio-container, | |
| .gradio-container .gradio-container, | |
| .gradio-container .main, | |
| .gradio-container .app, | |
| .gradio-container .container { | |
| background-color: transparent !important; | |
| } | |
| .gradio-container .block, | |
| .gradio-container .form, | |
| .gradio-container .panel { | |
| color: var(--ink); | |
| } | |
| footer { display: none !important; } | |
| /* ── Layout ────────────────────────────────────────────────────────── */ | |
| .main-wrap { max-width: 1200px; margin: 0 auto; } | |
| /* ── Hero ──────────────────────────────────────────────────────────── */ | |
| .hero { | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| padding: 32px 36px; | |
| background: | |
| linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)), | |
| linear-gradient(135deg, rgba(30,67,145,0.08), rgba(178,34,52,0.05)); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| box-shadow: | |
| 0 10px 36px rgba(16,32,51,.08), | |
| inset 0 1px 0 rgba(255,255,255,.76); | |
| margin-bottom: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--red), var(--blue-royal), var(--white), var(--red)); | |
| opacity: 0.8; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| top: -60px; right: -40px; | |
| width: 200px; height: 200px; | |
| background: radial-gradient(circle, rgba(178,34,52,0.15), transparent 70%); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .eyebrow { | |
| color: var(--silver); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: .20em; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 { | |
| margin: 8px 0 6px; | |
| font-size: clamp(32px, 6vw, 56px); | |
| line-height: 1.05; | |
| font-weight: 800; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero p { | |
| color: var(--slate-light); | |
| max-width: 720px; | |
| font-size: 16px; | |
| font-weight: 400; | |
| line-height: 1.55; | |
| } | |
| .metric-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } | |
| .metric-pill { | |
| border: 1px solid var(--glass-border); | |
| border-radius: 999px; | |
| padding: 7px 14px; | |
| color: var(--ink-soft); | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(8px); | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .metric-pill strong { | |
| color: var(--ink); | |
| font-weight: 700; | |
| } | |
| /* ── Cards ─────────────────────────────────────────────────────────── */ | |
| .match-card, .forecast-card, .factor-card, .reveal-card, .lab-card { | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| padding: 20px 22px; | |
| margin-bottom: 14px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| box-shadow: 0 8px 28px rgba(16,32,51,.08); | |
| transition: box-shadow .2s ease, border-color .2s ease; | |
| } | |
| .match-card:last-child, .forecast-card:last-child, .factor-card:last-child, | |
| .reveal-card:last-child, .lab-card:last-child { | |
| margin-bottom: 0; | |
| } | |
| .match-card:hover, .forecast-card:hover { | |
| border-color: rgba(255,255,255,.18); | |
| box-shadow: 0 12px 30px rgba(16,32,51,.10), 0 0 0 1px rgba(255,255,255,.04); | |
| } | |
| .match-meta { | |
| color: var(--silver); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: .10em; | |
| font-weight: 600; | |
| } | |
| .teams { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| align-items: center; | |
| margin: 14px 0; | |
| } | |
| .team { | |
| font-size: clamp(22px, 4vw, 36px); | |
| font-weight: 800; | |
| letter-spacing: -0.01em; | |
| color: var(--ink); | |
| } | |
| .versus { | |
| color: var(--red); | |
| font-size: 12px; | |
| font-weight: 900; | |
| background: rgba(178,34,52,.15); | |
| border-radius: 999px; | |
| padding: 4px 14px; | |
| } | |
| .context { | |
| color: var(--slate-light); | |
| line-height: 1.55; | |
| font-size: 14px; | |
| } | |
| /* ── Probability bars ──────────────────────────────────────────────── */ | |
| .prob-row { | |
| display: grid; | |
| grid-template-columns: 110px 1fr 64px; | |
| gap: 12px; | |
| align-items: center; | |
| margin: 10px 0; | |
| } | |
| .prob-label { | |
| font-weight: 700; | |
| font-size: 14px; | |
| color: var(--ink); | |
| } | |
| .prob-track { | |
| height: 12px; | |
| background: rgba(255,255,255,.08); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .prob-fill { height: 100%; border-radius: inherit; transition: width .5s ease; } | |
| .home-fill { background: linear-gradient(90deg, var(--red), #e84555); } | |
| .draw-fill { background: linear-gradient(90deg, var(--slate), var(--silver)); } | |
| .away-fill { background: linear-gradient(90deg, var(--blue-royal), #4a7aeb); } | |
| .prob-value { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| font-weight: 700; | |
| font-size: 14px; | |
| } | |
| .forecast-note { | |
| color: var(--slate); | |
| font-size: 13px; | |
| margin-top: 14px; | |
| font-weight: 400; | |
| } | |
| .pick-card { | |
| border-color: rgba(178,34,52,.28) !important; | |
| box-shadow: | |
| 0 8px 22px rgba(16,32,51,.06), | |
| 0 0 0 1px rgba(255,255,255,.20), | |
| 0 0 24px rgba(178,34,52,.06); | |
| } | |
| .pick-summary { | |
| min-width: 160px; | |
| text-align: right; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--glass-border); | |
| background: | |
| linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.92)); | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,.85), | |
| 0 8px 18px rgba(16,32,51,.06); | |
| } | |
| .pick-pill { | |
| border-radius: 18px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--glass-border); | |
| min-width: 150px; | |
| text-align: right; | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,.90), | |
| 0 8px 18px rgba(16,32,51,.05); | |
| } | |
| .pick-pill.home { | |
| background: linear-gradient(180deg, rgba(178,34,52,.12), rgba(255,255,255,.98)); | |
| } | |
| .pick-pill.draw { | |
| background: linear-gradient(180deg, rgba(192,197,206,.12), rgba(255,255,255,.98)); | |
| } | |
| .pick-pill.away { | |
| background: linear-gradient(180deg, rgba(30,67,145,.12), rgba(255,255,255,.98)); | |
| } | |
| .pick-label { | |
| color: var(--silver); | |
| font-size: 11px; | |
| font-weight: 800; | |
| letter-spacing: .12em; | |
| text-transform: uppercase; | |
| } | |
| .pick-result { | |
| color: var(--ink); | |
| font-size: 22px; | |
| font-weight: 800; | |
| margin-top: 4px; | |
| } | |
| .pick-confidence, | |
| .signal-detail { | |
| color: var(--slate-light); | |
| font-size: 12px; | |
| font-weight: 600; | |
| margin-top: 4px; | |
| } | |
| /* ── Factor chips ──────────────────────────────────────────────────── */ | |
| .factor-grid { display: grid; gap: 10px; } | |
| .factor-chip { | |
| border-left: 3px solid var(--blue-royal); | |
| background: rgba(30,67,145,.08); | |
| padding: 11px 13px; | |
| border-radius: 8px; | |
| } | |
| .factor-chip.dropped { | |
| border-color: var(--slate); | |
| background: rgba(107,114,128,.08); | |
| } | |
| .factor-title { font-weight: 700; color: var(--ink); } | |
| .factor-detail { color: var(--slate-light); font-size: 13px; margin-top: 4px; } | |
| .warning { color: var(--silver); font-size: 13px; } | |
| /* ── Score grid ────────────────────────────────────────────────────── */ | |
| .score-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 10px; | |
| margin-top: 14px; | |
| } | |
| .score-box { | |
| background: var(--glass-bg); | |
| border-radius: var(--radius-sm); | |
| padding: 14px 16px; | |
| border: 1px solid var(--glass-border); | |
| backdrop-filter: blur(8px); | |
| } | |
| .score-box strong { | |
| display: block; | |
| font-size: 26px; | |
| color: var(--red-bright); | |
| font-weight: 800; | |
| } | |
| .score-box span { | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| } | |
| .score-box.warn strong { color: var(--silver); } | |
| .result { | |
| font-size: 32px; | |
| font-weight: 900; | |
| margin: 10px 0; | |
| color: var(--ink); | |
| } | |
| .small { | |
| color: var(--slate); | |
| font-size: 12px; | |
| font-weight: 400; | |
| } | |
| /* ── Tables ────────────────────────────────────────────────────────── */ | |
| .table-scroll { overflow-x: auto; margin-top: 16px; } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-variant-numeric: tabular-nums; | |
| font-size: 13px; | |
| } | |
| th, td { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--glass-border); | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| th { | |
| color: var(--slate); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: .08em; | |
| font-weight: 700; | |
| } | |
| td { color: var(--white); } | |
| td { color: var(--ink); } | |
| tbody tr:hover { background: var(--glass-hover); } | |
| .probability-table { max-height: 560px; overflow-y: auto; } | |
| /* ── FIFA-style player award cards ────────────────────────────────── */ | |
| .player-card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .player-card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-sm); | |
| padding: 14px 16px; | |
| backdrop-filter: blur(8px); | |
| } | |
| .player-card-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .player-photo { | |
| box-sizing: border-box !important; | |
| width: 56px !important; | |
| height: 56px !important; | |
| border-radius: var(--radius-sm); | |
| object-fit: cover; | |
| object-position: 50% 20%; | |
| flex-shrink: 0; | |
| border: 2px solid var(--glass-border); | |
| box-shadow: 0 4px 12px rgba(16,32,51,.12); | |
| background: var(--glass-bg); | |
| } | |
| .player-photo-fallback { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--slate-light); | |
| font-size: 15px; | |
| font-weight: 800; | |
| letter-spacing: .04em; | |
| } | |
| .ovr-badge { | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 56px; | |
| height: 56px; | |
| border-radius: var(--radius-sm); | |
| background: var(--glass-bg); | |
| border: 2px solid var(--glass-border); | |
| box-shadow: 0 4px 12px rgba(16,32,51,.12); | |
| color: var(--ink); | |
| flex-shrink: 0; | |
| } | |
| .ovr-value { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--red-bright); } | |
| .ovr-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--slate); opacity: 1; } | |
| .player-card-meta { min-width: 0; } | |
| .player-rank { | |
| color: var(--silver); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: .06em; | |
| } | |
| .player-name { | |
| font-size: 15px; | |
| font-weight: 800; | |
| color: var(--ink); | |
| margin-top: 2px; | |
| } | |
| .player-team { | |
| color: var(--slate-light); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .player-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px 12px; | |
| } | |
| .stat-cell { min-width: 0; } | |
| .stat-top { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--slate-light); | |
| margin-bottom: 3px; | |
| } | |
| .stat-value { color: var(--ink); font-variant-numeric: tabular-nums; } | |
| .stat-track { | |
| height: 6px; | |
| background: rgba(16,32,51,.08); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .stat-fill { | |
| height: 100%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, var(--pastel-blue), var(--pastel-red)); | |
| } | |
| /* ── World Cup summary ─────────────────────────────────────────────── */ | |
| .world-cup-summary h2, .lab-card h2 { margin: 8px 0; font-weight: 800; } | |
| /* ── Buttons ───────────────────────────────────────────────────────── */ | |
| .primary-button { | |
| background: var(--red-bright) !important; | |
| color: #ffffff !important; | |
| border: 0 !important; | |
| border-radius: 999px !important; | |
| font-weight: 700 !important; | |
| letter-spacing: .02em !important; | |
| transition: all .2s ease !important; | |
| box-shadow: 0 2px 12px var(--glow-red); | |
| } | |
| .primary-button:hover { | |
| background: #e84250 !important; | |
| box-shadow: 0 4px 20px var(--glow-red); | |
| transform: translateY(-1px); | |
| } | |
| .secondary-button { | |
| border-color: var(--glass-border) !important; | |
| color: var(--ink-soft) !important; | |
| border-radius: 999px !important; | |
| } | |
| /* ── Gradio tab overrides ──────────────────────────────────────────── */ | |
| .tabs { | |
| border-bottom: 1px solid var(--glass-border) !important; | |
| } | |
| .tab-nav button, .tab-nav span { | |
| color: var(--ink-soft) !important; | |
| font-weight: 600 !important; | |
| font-size: 14px !important; | |
| border-bottom: 2px solid transparent !important; | |
| transition: all .2s ease !important; | |
| } | |
| .tab-nav button.selected, .tab-nav span.selected { | |
| color: var(--ink) !important; | |
| border-bottom-color: var(--red-bright) !important; | |
| } | |
| /* ── Input overrides ───────────────────────────────────────────────── */ | |
| input, textarea, select, .svelte-1gfkn6j { | |
| background: var(--glass-bg) !important; | |
| border: 1px solid var(--glass-border) !important; | |
| color: var(--ink) !important; | |
| border-radius: var(--radius-sm) !important; | |
| } | |
| input::placeholder, textarea::placeholder { | |
| color: var(--slate) !important; | |
| } | |
| /* ── Dropdown / slider overrides ─────────────────────────────────── */ | |
| .wrap.svelte-1gfkn6j { | |
| background: var(--glass-bg) !important; | |
| border-color: var(--glass-border) !important; | |
| color: var(--ink) !important; | |
| } | |
| /* ── Markdown content ──────────────────────────────────────────────── */ | |
| .prose, .markdown, .md { | |
| color: var(--slate-light); | |
| line-height: 1.6; | |
| } | |
| .prose h2, .prose h3, .markdown h2, .markdown h3 { | |
| color: var(--ink); | |
| } | |
| /* ── Upcoming matches accent ───────────────────────────────────────── */ | |
| .fixture-row { | |
| display: grid; | |
| grid-template-columns: 90px 1fr 80px 1fr 60px; | |
| gap: 16px; | |
| align-items: center; | |
| padding: 14px 20px; | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 8px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(8px); | |
| } | |
| .fixture-row:hover { | |
| border-color: rgba(255,255,255,.18); | |
| background: var(--glass-hover); | |
| } | |
| .fixture-date { | |
| font-weight: 700; | |
| font-size: 13px; | |
| color: var(--silver); | |
| } | |
| .fixture-team { | |
| font-weight: 700; | |
| font-size: 15px; | |
| color: var(--ink); | |
| } | |
| .fixture-team.away { text-align: right; } | |
| .fixture-probs { | |
| display: flex; | |
| gap: 6px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .fixture-probs .p-home { color: var(--red-bright); } | |
| .fixture-probs .p-draw { color: var(--silver); } | |
| .fixture-probs .p-away { color: #4a7aeb; } | |
| /* ── Flags ─────────────────────────────────────────────────────────── */ | |
| .flag { | |
| display: inline-block; | |
| margin-right: 0.4em; | |
| font-size: 0.85em; | |
| filter: drop-shadow(0 1px 1px rgba(16,32,51,.12)); | |
| } | |
| td .flag, .player-team .flag, .stat-top .flag { | |
| font-size: 0.95em; | |
| } | |
| /* ── Cutoff badge ──────────────────────────────────────────────────── */ | |
| .cutoff-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(178,34,52,.10); | |
| border: 1px solid rgba(178,34,52,.22); | |
| border-radius: 999px; | |
| padding: 6px 16px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--ink-soft); | |
| margin-bottom: 16px; | |
| } | |
| .cutoff-badge::before { | |
| content: ''; | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--red-bright); | |
| box-shadow: 0 0 8px var(--glow-red); | |
| } | |
| @media (max-width: 640px) { | |
| .match-card, .forecast-card, .factor-card, .reveal-card, .lab-card { | |
| padding: 16px; | |
| } | |
| .teams { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); | |
| gap: 8px; | |
| width: 100%; | |
| } | |
| .team { | |
| min-width: 0; | |
| font-size: 16px; | |
| line-height: 1.1; | |
| overflow-wrap: normal; | |
| word-break: normal; | |
| } | |
| .team:last-child { | |
| text-align: right; | |
| } | |
| .versus { | |
| padding: 4px 9px; | |
| } | |
| .prob-row { | |
| grid-template-columns: minmax(68px, 0.8fr) minmax(36px, 1fr) 42px; | |
| gap: 7px; | |
| } | |
| .prob-label, .prob-value { | |
| font-size: 12px; | |
| } | |
| } | |
| """ | |