/** * Premium Football Analytics - Design System * Flashscore-inspired dark theme. Add .theme-light on for light mode. */ /* ========== DESIGN TOKENS ========== */ :root { /* Colors - Dark theme (default) */ --bg-primary: #0f1419; --bg-secondary: #1a2332; --bg-tertiary: #242f3d; --bg-elevated: #2d3a4d; --bg-hover: rgba(255, 255, 255, 0.06); --text-primary: #e8eaed; --text-secondary: #9aa0a6; --text-muted: #5f6368; --accent-primary: #4285f4; --accent-hover: #5a95f5; --accent-muted: rgba(66, 133, 244, 0.2); --success: #34a853; --success-bg: rgba(52, 168, 83, 0.15); --warning: #f9ab00; --warning-bg: rgba(249, 171, 0, 0.15); --danger: #ea4335; --danger-bg: rgba(234, 67, 53, 0.15); --info: #4285f4; --info-bg: rgba(66, 133, 244, 0.15); /* Form badges */ --form-w: #34a853; --form-d: #9aa0a6; --form-l: #ea4335; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; } /* Light theme */ html.theme-light { --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-tertiary: #e9ecef; --bg-elevated: #ffffff; --bg-hover: rgba(0, 0, 0, 0.05); --text-primary: #1a1a2e; --text-secondary: #495057; --text-muted: #6c757d; --accent-muted: rgba(66, 133, 244, 0.12); --success-bg: rgba(52, 168, 83, 0.12); --warning-bg: rgba(249, 171, 0, 0.12); --danger-bg: rgba(234, 67, 53, 0.12); --info-bg: rgba(66, 133, 244, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } /* ========== BASE RESET ========== */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } /* ========== UTILITY CLASSES (Tailwind-like) ========== */ .p-premium { padding: var(--space-4); } .p-premium-sm { padding: var(--space-2); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .transition { transition: all var(--transition-base); } /* ========== PREMIUM NAV ========== */ .premium-nav { background: var(--bg-secondary); border-bottom: 1px solid var(--bg-tertiary); padding: var(--space-2) 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .premium-nav .nav-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); max-width: 1400px; margin: 0 auto; padding: 0 var(--space-4); } .premium-nav .nav-left { display: flex; align-items: center; gap: var(--space-6); } .premium-nav .nav-center { display: flex; align-items: center; gap: var(--space-3); } .premium-nav .nav-right { display: flex; align-items: center; gap: var(--space-2); } .premium-nav .logo { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: var(--space-2); } .premium-nav .logo:hover { color: var(--text-primary); } .premium-nav .nav-link { color: var(--text-secondary); font-weight: var(--font-medium); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: all var(--transition-fast); } .premium-nav .nav-link:hover { color: var(--text-primary); background: var(--bg-hover); } .premium-nav .nav-link.active { color: var(--accent-primary); background: var(--accent-muted); } .premium-nav .nav-select { background: var(--bg-tertiary); border: 1px solid var(--bg-elevated); color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); min-width: 140px; cursor: pointer; transition: border-color var(--transition-fast); } .premium-nav .nav-select:hover, .premium-nav .nav-select:focus { border-color: var(--accent-primary); outline: none; } .premium-nav .dropdown-menu { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); } .premium-nav .dropdown-item { color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background var(--transition-fast); } .premium-nav .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } .premium-nav .dropdown-divider { border-color: var(--bg-tertiary); margin: var(--space-2) 0; } /* Bootstrap navbar overrides for premium nav */ .premium-nav.navbar .navbar-toggler { border-color: var(--bg-elevated); } .premium-nav.navbar .navbar-toggler-icon { filter: invert(1); opacity: 0.8; } .premium-nav .navbar-brand { color: var(--text-primary) !important; font-weight: var(--font-bold); font-size: var(--text-xl); } .premium-nav .dropdown-menu { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); } /* Mobile nav */ @media (max-width: 991px) { .premium-nav .nav-center, .premium-nav .nav-right { width: 100%; justify-content: flex-start; } .premium-nav .nav-container { flex-direction: column; align-items: stretch; } } /* ========== PREMIUM CARDS ========== */ .premium-card { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), border-color var(--transition-base); } .premium-card:hover { box-shadow: var(--shadow-md); border-color: var(--bg-elevated); } .premium-card-header { padding: var(--space-4); border-bottom: 1px solid var(--bg-tertiary); font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--text-primary); } .premium-card-body { padding: var(--space-4); } /* ========== STAT CARDS ========== */ .premium-stat-card { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; transition: all var(--transition-base); } .premium-stat-card:hover { border-color: var(--bg-elevated); transform: translateY(-2px); box-shadow: var(--shadow-md); } .premium-stat-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.2; } .premium-stat-label { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); } /* ========== MATCH ROWS ========== */ .premium-match-row { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bg-tertiary); text-decoration: none; color: var(--text-primary); transition: background var(--transition-fast); } .premium-match-row:last-child { border-bottom: none; } .premium-match-row:hover { background: var(--bg-hover); } .premium-match-row .team { flex: 1; font-weight: var(--font-medium); font-size: var(--text-sm); } .premium-match-row .team.text-end { text-align: right; } .premium-match-row .team.text-start { text-align: left; } .premium-match-row .score { font-weight: var(--font-bold); min-width: 3.5rem; text-align: center; font-size: var(--text-base); color: var(--text-primary); } .premium-match-row .score.text-muted { color: var(--text-muted); } .premium-match-row .date { font-size: var(--text-xs); color: var(--text-muted); min-width: 5rem; text-align: right; } .premium-match-row .badge-status { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: var(--font-medium); } /* ========== DAILY MATCHES (Match list page) ========== */ .daily-match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--bg-tertiary); text-decoration: none; color: var(--text-primary); transition: background var(--transition-base), box-shadow var(--transition-fast); cursor: pointer; min-width: 0; } .daily-match-row:last-child { border-bottom: none; } .daily-match-row:hover { background: var(--bg-hover); box-shadow: var(--shadow-sm); } .daily-match-row.daily-match-row--live { background: var(--danger-bg); } .daily-match-row.daily-match-row--live:hover { background: var(--danger-bg); filter: brightness(1.05); } .daily-match-row .daily-match-team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .daily-match-row .daily-match-team.daily-match-team--away { flex-direction: row; justify-content: flex-end; text-align: right; } .daily-match-row .daily-match-team.daily-match-team--away .team-name { order: -1; } .daily-match-row .daily-match-team .team-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .daily-match-row .daily-match-team .team-placeholder { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tertiary); font-size: var(--text-xs); flex-shrink: 0; color: var(--text-muted); } .daily-match-row .daily-match-team .team-name { font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .daily-match-row .daily-match-center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 6rem; } .daily-match-row .daily-match-center-main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; } .daily-match-row .daily-match-center-meta { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: center; } .daily-match-row .daily-match-center-meta:empty, .daily-match-row .daily-match-center-meta:not(:has(> *)) { display: none; } .daily-match-row .daily-match-score { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.2; } .daily-match-row .daily-match-time { font-size: var(--text-xs); color: var(--text-muted); } .daily-match-row .daily-match-round { font-size: var(--text-xs); color: var(--text-muted); } .daily-match-row .daily-match-minute { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-secondary); margin-left: 6px; } .daily-match-row .daily-match-events-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); } .daily-match-row .daily-match-goal-scorers { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .daily-match-row .daily-match-red-cards { color: var(--danger, #dc3545); font-weight: var(--font-medium); } /* Status badge: minimal, scoped to daily match list */ .daily-match-row .match-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--font-medium); padding: 2px 6px; border-radius: var(--radius-sm); letter-spacing: 0.02em; flex-shrink: 0; } .daily-match-row .match-status-badge--live { background: var(--danger); color: #fff; } .daily-match-row .match-status-badge--live .match-status-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: daily-live-pulse 1.2s ease-in-out infinite; } .daily-match-row .match-status-badge--ht { background: var(--warning); color: var(--bg-primary); } .daily-match-row .match-status-badge--ft { background: var(--bg-tertiary); color: var(--text-secondary); } .daily-match-row .match-status-badge--ns { background: transparent; color: var(--text-muted); border: 1px solid var(--bg-tertiary); } .daily-match-row .match-status-badge--postponed, .daily-match-row .match-status-badge--cancelled { background: var(--bg-tertiary); color: var(--text-muted); } @keyframes daily-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* Live Now section — above all leagues, distinct but clean */ .daily-live-now-section { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-md); border-left: 3px solid var(--danger, #dc3545); } .daily-live-now-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); } .daily-live-now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #dc3545); animation: daily-live-pulse 1.2s ease-in-out infinite; } .daily-live-now-title { letter-spacing: 0.02em; } .daily-live-now-count { color: var(--text-muted); font-weight: var(--font-medium); font-size: var(--text-xs); } .daily-live-now-matches { display: flex; flex-direction: column; gap: 0; } /* Sticky date nav */ .daily-date-nav { position: sticky; top: 0; z-index: 10; background: var(--bg-secondary); border-bottom: 1px solid var(--bg-tertiary); padding: var(--space-3) 0; margin: 0 calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); margin-bottom: var(--space-4); } .daily-date-nav-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .daily-date-nav-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); text-decoration: none; border: 1px solid transparent; transition: all var(--transition-fast); } .daily-date-nav-pill:hover { background: var(--bg-hover); color: var(--text-primary); } .daily-date-nav-pill.is-today { background: var(--accent-muted); color: var(--accent-primary); border-color: var(--accent-primary); } .daily-date-nav-pill .pill-count { font-size: var(--text-xs); color: var(--text-muted); } .daily-date-nav-pill.is-today .pill-count { color: var(--accent-primary); } .daily-date-nav-live { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--danger); margin-left: var(--space-2); } .daily-date-nav-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); animation: daily-live-pulse 1.2s ease-in-out infinite; } /* League section (collapsible) – minimal header, subtle separation */ .daily-league-section { margin-bottom: var(--space-4); } .daily-league-section + .daily-league-section { padding-top: 0; } .daily-league-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--bg-elevated); border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background var(--transition-fast), border-color var(--transition-fast); } .daily-league-header:hover { background: var(--bg-hover); border-left-color: var(--text-muted); } .daily-league-header .league-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; } .daily-league-header .league-name { font-weight: 500; font-size: var(--text-xs); color: var(--text-secondary); flex: 1; } .daily-league-header .league-count { font-size: var(--text-xs); color: var(--text-muted); } .daily-league-header .league-chevron { transition: transform var(--transition-base); color: var(--text-muted); font-size: 0.65rem; } .daily-league-section:not([open]) .daily-league-header .league-chevron { transform: rotate(-90deg); } .daily-league-section .daily-league-matches { border: 1px solid var(--bg-tertiary); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow: hidden; background: var(--bg-secondary); } .daily-league-section > .daily-league-header { list-style: none; } .daily-league-section > .daily-league-header::-webkit-details-marker { display: none; } html.theme-light .daily-league-header { background: rgba(0, 0, 0, 0.04); border-left-color: var(--bg-tertiary); } html.theme-light .daily-league-header:hover { background: var(--bg-hover); border-left-color: var(--text-muted); } /* ========== STANDINGS TABLE ========== */ .premium-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .premium-table thead { position: sticky; top: 0; background: var(--bg-tertiary); z-index: 1; } .premium-table th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--font-semibold); color: var(--text-secondary); border-bottom: 2px solid var(--bg-elevated); } .premium-table th.text-center { text-align: center; } .premium-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bg-tertiary); color: var(--text-primary); } .premium-table tbody tr { transition: background var(--transition-fast); } .premium-table tbody tr:hover { background: var(--bg-hover); } .premium-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .premium-table tbody tr:nth-child(even):hover { background: var(--bg-hover); } .premium-table-sm { font-size: var(--text-xs); } .premium-table-sm th, .premium-table-sm td { padding: var(--space-2) var(--space-3); } /* Zone highlighting */ .premium-table .zone-cl { background: var(--success-bg); } .premium-table .zone-relegation { background: var(--danger-bg); } .premium-table .highlight-row, .table .highlight-row { background: var(--accent-muted) !important; border-left: 4px solid var(--accent-primary); } .premium-table .highlight-row td, .table .highlight-row td { background: transparent !important; } /* Stronger highlight for better visibility */ html.theme-light .premium-table .highlight-row, html.theme-light .table .highlight-row { background: rgba(66, 133, 244, 0.2) !important; } /* Form badges in table */ .premium-form-badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-bold); } .premium-form-badge.w { background: var(--form-w); color: white; } .premium-form-badge.d { background: var(--form-d); color: white; } .premium-form-badge.l { background: var(--form-l); color: white; } /* ========== HERO ========== */ .premium-hero { padding: var(--space-4) 0; } .premium-hero-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); } /* ========== TEAM LOGO / INITIALS ========== */ .premium-team-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--bg-tertiary); overflow: hidden; flex-shrink: 0; } .premium-team-logo img { width: 100%; height: 100%; object-fit: contain; } .premium-team-logo span { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-secondary); } .premium-team-logo-sm { width: 20px; height: 20px; } .premium-team-logo-sm span { font-size: 0.6rem; } .premium-team-initials { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent-muted); color: var(--accent-primary); font-size: var(--text-xs); font-weight: var(--font-bold); display: inline-flex; align-items: center; justify-content: center; } /* ========== LEAGUE LOGO ========== */ .premium-league-logo { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-tertiary); overflow: hidden; flex-shrink: 0; } .premium-league-logo img { width: 100%; height: 100%; object-fit: contain; } .premium-league-logo-sm { width: 24px; height: 24px; } .premium-league-logo-lg { width: 56px; height: 56px; } .premium-league-logo-xl { width: 80px; height: 80px; } .premium-league-logo-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.25rem; font-weight: 700; color: var(--text-secondary); } .premium-league-logo-sm .premium-league-logo-placeholder { font-size: 0.6rem; } /* ========== BUTTONS ========== */ .premium-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); font-weight: var(--font-medium); font-size: var(--text-sm); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); } .premium-btn-primary { background: var(--accent-primary); color: white; border-color: var(--accent-primary); } .premium-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; } .premium-btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } .premium-btn-outline { background: transparent; color: var(--text-secondary); border-color: var(--bg-elevated); } .premium-btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--bg-elevated); } .premium-btn-outline.premium-btn-danger { color: #ef4444; border-color: #ef4444; } .premium-btn-outline.premium-btn-danger:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: #ef4444; } /* ========== MAIN CONTENT ========== */ .premium-main { min-height: calc(100vh - 120px); padding: var(--space-6) var(--space-4); max-width: 1400px; margin: 0 auto; } /* ========== FOOTER ========== */ .premium-footer { background: var(--bg-secondary); border-top: 1px solid var(--bg-tertiary); padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* ========== LEAGUE CARDS (Home) ========== */ .premium-league-card { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-base); height: 100%; } .premium-league-card:hover { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-muted); } .premium-league-card .card-header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bg-tertiary); display: flex; justify-content: space-between; align-items: center; font-weight: var(--font-semibold); } .premium-league-card .card-body { padding: var(--space-3); } /* ========== MATCH HEADER ========== */ .premium-match-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-bottom: 1px solid var(--bg-elevated); padding: var(--space-6) 0; margin-bottom: var(--space-6); } .premium-match-header .match-meta { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); } .premium-match-header .team-logo-header { max-width: 80px; height: auto; border-radius: var(--radius-md); } .premium-match-header .team-placeholder { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto var(--space-2); } .premium-match-header .score-display { font-size: 2.5rem; font-weight: var(--font-bold); color: var(--text-primary); margin: var(--space-4) 0; } /* ========== PREDICTION CARD ========== */ .premium-prediction-card { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-lg); padding: var(--space-5); } .premium-prediction-card .pred-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-1); } .premium-prediction-card .pred-value { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); } .premium-prediction-card .xg-value { font-weight: var(--font-semibold); color: var(--text-primary); } .premium-pred-bar-row { margin-bottom: var(--space-3); } .premium-pred-bar-row:last-child { margin-bottom: 0; } /* ========== PREDICTION BARS ========== */ .premium-pred-bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-tertiary); overflow: hidden; } .premium-pred-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-slow); } /* ========== TABS ========== */ .premium-tabs { display: flex; gap: var(--space-1); padding: var(--space-2); background: var(--bg-tertiary); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .premium-tab { padding: var(--space-2) var(--space-4); font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--text-secondary); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .premium-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .premium-tab.active { color: var(--text-primary); background: var(--bg-secondary); box-shadow: var(--shadow-sm); } /* Bootstrap nav-tabs premium override */ .premium-main .nav-tabs { border-color: var(--bg-tertiary); gap: var(--space-1); } .premium-main .nav-tabs .nav-link { color: var(--text-secondary); border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-weight: var(--font-medium); } .premium-main .nav-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--bg-elevated); background: var(--bg-hover); } .premium-main .nav-tabs .nav-link.active { color: var(--accent-primary); background: var(--accent-muted); border-color: var(--accent-primary); } /* ========== ALERT ========== */ .premium-alert { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid; } .premium-alert-info { background: var(--info-bg); border-color: var(--info); color: var(--text-primary); } /* ========== OVERRIDE BOOTSTRAP FOR DARK THEME ========== */ .premium-theme .form-control, .premium-theme .form-select { background: var(--bg-tertiary); border-color: var(--bg-elevated); color: var(--text-primary); } .premium-theme .form-control:focus, .premium-theme .form-select:focus { background: var(--bg-tertiary); border-color: var(--accent-primary); color: var(--text-primary); box-shadow: 0 0 0 3px var(--accent-muted); } .premium-theme .form-control::placeholder { color: var(--text-muted); } .premium-theme .table { color: var(--text-primary); } .premium-theme .table-light { background: var(--bg-tertiary); color: var(--text-primary); } .premium-main .table th { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--bg-elevated); } .premium-main .table td { border-color: var(--bg-tertiary); } .premium-main .card { background: var(--bg-secondary); border-color: var(--bg-tertiary); color: var(--text-primary); } .premium-main .card-header { background: var(--bg-tertiary); border-color: var(--bg-tertiary); color: var(--text-primary); } /* ========== CONSISTENT NAVIGATION LINKS ========== */ /* Team links: wrap logo + name in single or span with role="link" */ .lu-link-team { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; cursor: pointer; transition: color var(--transition-base), text-decoration-color var(--transition-base); } .lu-link-team:hover { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; } .lu-link-team:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Player links: entire badge/row clickable */ .lu-link-player { display: inline-flex; align-items: center; color: inherit; text-decoration: none; cursor: pointer; transition: transform var(--transition-fast), color var(--transition-base), text-decoration-color var(--transition-base); } .lu-link-player:hover { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; } .lu-link-player:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Competitions nav: nested dropdown (country → competitions) opens to the right */ .premium-nav .dropdown-menu .dropend .dropdown-menu { top: 0; left: 100%; margin-top: 0; margin-left: var(--space-1); } .premium-nav .dropdown .dropdown-menu { overflow: visible; } .premium-nav .dropdown-menu .dropend > .dropdown-toggle::after { margin-left: auto; }