Spaces:
Running
Running
| /* =========================================================================== | |
| NBA ML Predictor - Professional Design System | |
| Sleek, Modern, Sports-Premium Aesthetic | |
| =========================================================================== */ | |
| /* CSS Reset & Box Sizing */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* ========================================================================= | |
| Design Tokens | |
| ========================================================================= */ | |
| :root { | |
| /* Colors - Deep Dark Theme */ | |
| --bg-primary: #000000; | |
| --bg-secondary: #0d0d0d; | |
| --bg-tertiary: #141414; | |
| --bg-card: #0a0a0a; | |
| --bg-card-hover: #111111; | |
| --bg-elevated: #1a1a1a; | |
| /* Text Hierarchy */ | |
| --text-primary: #ffffff; | |
| --text-secondary: #b3b3b3; | |
| --text-muted: #666666; | |
| --text-dim: #444444; | |
| /* Accent Colors - Sophisticated */ | |
| --accent-primary: #00c8ff; | |
| --accent-secondary: #ff6b35; | |
| --accent-success: #00d26a; | |
| --accent-warning: #ffb800; | |
| --accent-danger: #ff3b3b; | |
| /* Subtle Gradients */ | |
| --gradient-primary: linear-gradient(135deg, #00c8ff 0%, #0099cc 100%); | |
| --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #cc5529 100%); | |
| --gradient-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); | |
| /* Borders & Surfaces */ | |
| --border-subtle: 1px solid rgba(255, 255, 255, 0.06); | |
| --border-medium: 1px solid rgba(255, 255, 255, 0.1); | |
| --border-focus: 1px solid var(--accent-primary); | |
| /* Shadows */ | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 20px rgba(0, 200, 255, 0.15); | |
| /* Border Radius */ | |
| --radius-xs: 4px; | |
| --radius-sm: 6px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| /* Spacing Scale */ | |
| --space-1: 4px; | |
| --space-2: 8px; | |
| --space-3: 12px; | |
| --space-4: 16px; | |
| --space-5: 20px; | |
| --space-6: 24px; | |
| --space-8: 32px; | |
| --space-10: 40px; | |
| --space-12: 48px; | |
| /* Typography */ | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| /* Transitions */ | |
| --transition-fast: 100ms ease; | |
| --transition-base: 200ms ease; | |
| --transition-slow: 300ms ease; | |
| } | |
| /* ========================================================================= | |
| Base Styles | |
| ========================================================================= */ | |
| html { | |
| font-size: 14px; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| #root { | |
| min-height: 100vh; | |
| } | |
| /* ========================================================================= | |
| Typography | |
| ========================================================================= */ | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-weight: 600; | |
| line-height: 1.25; | |
| letter-spacing: -0.025em; | |
| color: var(--text-primary); | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| } | |
| h3 { | |
| font-size: 1.125rem; | |
| } | |
| h4 { | |
| font-size: 1rem; | |
| } | |
| .text-gradient { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-muted { | |
| color: var(--text-muted); | |
| } | |
| .text-secondary { | |
| color: var(--text-secondary); | |
| } | |
| /* ========================================================================= | |
| Layout | |
| ========================================================================= */ | |
| .app-layout { | |
| display: flex; | |
| min-height: 100vh; | |
| transition: all var(--transition-slow); | |
| } | |
| .app-layout.sidebar-collapsed .main-content { | |
| margin-left: 72px; | |
| } | |
| /* Sidebar - Collapsible with Hover Expand */ | |
| .sidebar { | |
| width: 240px; | |
| background: var(--bg-secondary); | |
| border-right: var(--border-subtle); | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| z-index: 100; | |
| display: flex; | |
| flex-direction: column; | |
| padding: var(--space-5); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| overflow: hidden; | |
| } | |
| /* Collapsed Sidebar */ | |
| .sidebar.collapsed { | |
| width: 72px; | |
| padding: var(--space-4) var(--space-3); | |
| } | |
| /* Hover Expansion with Glass Effect */ | |
| .sidebar.collapsed.hovered { | |
| width: 240px; | |
| padding: var(--space-5); | |
| background: rgba(13, 13, 13, 0.95); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), | |
| 0 0 0 1px rgba(255, 255, 255, 0.08); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .sidebar-header { | |
| padding-bottom: var(--space-6); | |
| border-bottom: var(--border-subtle); | |
| margin-bottom: var(--space-4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-2); | |
| } | |
| .sidebar-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .sidebar-logo-icon { | |
| width: 32px; | |
| height: 32px; | |
| min-width: 32px; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .sidebar:hover .sidebar-logo-icon { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 20px rgba(0, 200, 255, 0.3); | |
| } | |
| .sidebar-logo-text { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| white-space: nowrap; | |
| opacity: 1; | |
| transition: opacity 0.2s ease 0.1s, transform 0.2s ease; | |
| } | |
| .sidebar.collapsed .sidebar-logo-text { | |
| opacity: 0; | |
| transform: translateX(-10px); | |
| transition: opacity 0.1s ease, transform 0.1s ease; | |
| } | |
| .sidebar.collapsed.hovered .sidebar-logo-text { | |
| opacity: 1; | |
| transform: translateX(0); | |
| transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s; | |
| } | |
| /* Sidebar Toggle Button */ | |
| .sidebar-toggle { | |
| width: 28px; | |
| height: 28px; | |
| min-width: 28px; | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-tertiary); | |
| border: var(--border-subtle); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| .sidebar:hover .sidebar-toggle { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .sidebar-toggle:hover { | |
| background: var(--bg-elevated); | |
| color: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 12px rgba(0, 200, 255, 0.2); | |
| } | |
| .sidebar-toggle svg { | |
| width: 16px; | |
| height: 16px; | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar-toggle:hover svg { | |
| transform: scale(1.1); | |
| } | |
| .sidebar-nav { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| .nav-section { | |
| margin-bottom: var(--space-4); | |
| } | |
| .nav-section-title { | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-dim); | |
| padding: var(--space-2) var(--space-3); | |
| margin-bottom: var(--space-1); | |
| white-space: nowrap; | |
| opacity: 1; | |
| transition: opacity 0.2s ease; | |
| } | |
| .sidebar.collapsed .nav-section-title { | |
| opacity: 0; | |
| height: 0; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .sidebar.collapsed.hovered .nav-section-title { | |
| opacity: 1; | |
| height: auto; | |
| padding: var(--space-2) var(--space-3); | |
| margin-bottom: var(--space-1); | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Hover glow effect */ | |
| .nav-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at left center, rgba(0, 200, 255, 0.1) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .nav-item:hover::before { | |
| opacity: 1; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| transform: translateX(4px); | |
| } | |
| .nav-item.active { | |
| background: rgba(0, 200, 255, 0.12); | |
| color: var(--accent-primary); | |
| } | |
| .nav-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 20px; | |
| background: var(--accent-primary); | |
| border-radius: 0 2px 2px 0; | |
| box-shadow: 0 0 10px rgba(0, 200, 255, 0.5); | |
| } | |
| .nav-icon { | |
| width: 20px; | |
| height: 20px; | |
| min-width: 20px; | |
| opacity: 0.7; | |
| transition: all 0.2s ease; | |
| } | |
| .nav-item:hover .nav-icon, | |
| .nav-item.active .nav-icon { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| .nav-item.active .nav-icon { | |
| filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.5)); | |
| } | |
| .nav-text { | |
| white-space: nowrap; | |
| opacity: 1; | |
| transition: opacity 0.2s ease 0.1s; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| opacity: 0; | |
| width: 0; | |
| overflow: hidden; | |
| transition: opacity 0.1s ease; | |
| } | |
| .sidebar.collapsed.hovered .nav-text { | |
| opacity: 1; | |
| width: auto; | |
| transition: opacity 0.2s ease 0.15s; | |
| } | |
| /* Center icons when collapsed */ | |
| .sidebar.collapsed .nav-item { | |
| justify-content: center; | |
| padding: var(--space-3); | |
| } | |
| .sidebar.collapsed.hovered .nav-item { | |
| justify-content: flex-start; | |
| } | |
| /* Sidebar Footer */ | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding-top: var(--space-4); | |
| border-top: var(--border-subtle); | |
| } | |
| .sidebar-footer .btn { | |
| justify-content: flex-start; | |
| } | |
| .sidebar.collapsed .sidebar-footer .btn { | |
| justify-content: center; | |
| padding: var(--space-3); | |
| } | |
| .sidebar.collapsed.hovered .sidebar-footer .btn { | |
| justify-content: flex-start; | |
| padding: var(--space-3) var(--space-5); | |
| } | |
| .sidebar-version { | |
| margin-top: var(--space-3); | |
| font-size: 0.6875rem; | |
| color: var(--text-dim); | |
| text-align: center; | |
| opacity: 1; | |
| transition: opacity 0.2s ease; | |
| } | |
| .sidebar.collapsed .sidebar-version { | |
| opacity: 0; | |
| } | |
| .sidebar.collapsed.hovered .sidebar-version { | |
| opacity: 1; | |
| } | |
| /* Spinning animation for refresh */ | |
| @keyframes spin { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .spinning { | |
| animation: spin 1s linear infinite; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| margin-left: 240px; | |
| padding: var(--space-8); | |
| min-height: 100vh; | |
| background: var(--bg-primary); | |
| transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .sidebar-collapsed .main-content { | |
| margin-left: 72px; | |
| } | |
| /* ========================================================================= | |
| Cards | |
| ========================================================================= */ | |
| .card { | |
| background: var(--bg-card); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-5); | |
| transition: all var(--transition-base); | |
| } | |
| .card:hover { | |
| background: var(--bg-card-hover); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-4); | |
| } | |
| .card-title { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| /* ========================================================================= | |
| Team Logo | |
| ========================================================================= */ | |
| .team-logo { | |
| width: 48px; | |
| height: 48px; | |
| object-fit: contain; | |
| } | |
| .team-logo-sm { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .team-logo-lg { | |
| width: 64px; | |
| height: 64px; | |
| } | |
| .team-logo-xl { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| /* ========================================================================= | |
| Game Card - Professional Style | |
| ========================================================================= */ | |
| .game-card { | |
| background: var(--bg-card); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-5); | |
| margin-bottom: var(--space-4); | |
| transition: all var(--transition-base); | |
| } | |
| .game-card:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .game-card.live { | |
| border-color: var(--accent-danger); | |
| box-shadow: 0 0 0 1px var(--accent-danger); | |
| } | |
| .game-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-4); | |
| padding-bottom: var(--space-3); | |
| border-bottom: var(--border-subtle); | |
| } | |
| .game-status { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .game-status.live { | |
| color: var(--accent-danger); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .live-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--accent-danger); | |
| border-radius: 50%; | |
| animation: pulse-dot 2s infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: scale(0.8); | |
| } | |
| } | |
| .game-time { | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| } | |
| .game-matchup { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| align-items: center; | |
| gap: var(--space-6); | |
| } | |
| .team-block { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .team-block.away { | |
| align-items: flex-start; | |
| text-align: left; | |
| } | |
| .team-block.home { | |
| align-items: flex-end; | |
| text-align: right; | |
| } | |
| .team-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .team-block.home .team-info { | |
| flex-direction: row-reverse; | |
| } | |
| .team-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .team-name { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .team-record { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .team-score { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-top: var(--space-2); | |
| } | |
| .team-probability { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| margin-top: var(--space-2); | |
| } | |
| /* Score/Prediction Divider */ | |
| .game-center { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .vs-divider { | |
| font-size: 0.875rem; | |
| color: var(--text-dim); | |
| font-weight: 500; | |
| } | |
| .prediction-indicator { | |
| background: var(--bg-elevated); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-3) var(--space-4); | |
| text-align: center; | |
| } | |
| .prediction-label { | |
| font-size: 0.625rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-1); | |
| } | |
| .prediction-pick { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| } | |
| /* Confidence Meter */ | |
| .confidence-meter-container { | |
| margin-top: var(--space-2); | |
| } | |
| .confidence-meter { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .confidence-meter svg { | |
| display: block; | |
| } | |
| .confidence-value { | |
| position: absolute; | |
| top: 28px; | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| text-shadow: 0 0 10px currentColor; | |
| } | |
| .confidence-label { | |
| font-size: 0.625rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-top: -4px; | |
| } | |
| /* Stats Comparison (Head to Head) */ | |
| .stats-comparison { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .stat-comparison-row { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| gap: var(--space-3); | |
| align-items: center; | |
| } | |
| .stat-bar-container { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| height: 24px; | |
| } | |
| .stat-bar-container.right { | |
| justify-content: flex-end; | |
| } | |
| .stat-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| .stat-bar.left { | |
| margin-left: auto; | |
| } | |
| .stat-value-label { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| min-width: 40px; | |
| } | |
| .stat-value-label.left { | |
| text-align: right; | |
| } | |
| .stat-value-label.right { | |
| text-align: left; | |
| } | |
| .stat-label-center { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| min-width: 70px; | |
| text-align: center; | |
| } | |
| /* Recent Form */ | |
| .recent-form { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .form-badges { | |
| display: flex; | |
| gap: var(--space-1); | |
| } | |
| .form-badge { | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.625rem; | |
| font-weight: 700; | |
| border-radius: 4px; | |
| } | |
| .form-badge.win { | |
| background: rgba(0, 210, 106, 0.15); | |
| color: var(--accent-success); | |
| } | |
| .form-badge.loss { | |
| background: rgba(255, 59, 59, 0.15); | |
| color: var(--accent-danger); | |
| } | |
| /* ========================================================================= | |
| Stats Grid | |
| ========================================================================= */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-5); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-2); | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| line-height: 1; | |
| } | |
| .stat-value.accent { | |
| color: var(--accent-primary); | |
| } | |
| .stat-change { | |
| font-size: 0.75rem; | |
| margin-top: var(--space-2); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .stat-change.positive { | |
| color: var(--accent-success); | |
| } | |
| .stat-change.negative { | |
| color: var(--accent-danger); | |
| } | |
| /* ========================================================================= | |
| Form Controls | |
| ========================================================================= */ | |
| .form-group { | |
| margin-bottom: var(--space-4); | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-2); | |
| } | |
| .form-select { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--bg-elevated); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right var(--space-3) center; | |
| transition: all var(--transition-fast); | |
| } | |
| .form-select:hover { | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .form-select:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.1); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--bg-elevated); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.1); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-dim); | |
| } | |
| /* ========================================================================= | |
| Buttons | |
| ========================================================================= */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| border-radius: var(--radius-md); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: #000; | |
| } | |
| .btn-primary:hover { | |
| opacity: 0.9; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-elevated); | |
| border: var(--border-subtle); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-tertiary); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| } | |
| .btn-ghost:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .btn-icon { | |
| width: 36px; | |
| height: 36px; | |
| padding: 0; | |
| border-radius: var(--radius-md); | |
| } | |
| .btn-lg { | |
| padding: var(--space-4) var(--space-6); | |
| font-size: 1rem; | |
| } | |
| .btn-block { | |
| width: 100%; | |
| } | |
| /* ========================================================================= | |
| Badges & Tags | |
| ========================================================================= */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-xs); | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .badge-success { | |
| background: rgba(0, 210, 106, 0.15); | |
| color: var(--accent-success); | |
| } | |
| .badge-warning { | |
| background: rgba(255, 184, 0, 0.15); | |
| color: var(--accent-warning); | |
| } | |
| .badge-danger { | |
| background: rgba(255, 59, 59, 0.15); | |
| color: var(--accent-danger); | |
| } | |
| .badge-neutral { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-secondary); | |
| } | |
| .confidence-high { | |
| background: rgba(0, 210, 106, 0.15); | |
| color: var(--accent-success); | |
| } | |
| .confidence-medium { | |
| background: rgba(255, 184, 0, 0.15); | |
| color: var(--accent-warning); | |
| } | |
| .confidence-low { | |
| background: rgba(255, 59, 59, 0.15); | |
| color: var(--accent-danger); | |
| } | |
| /* ========================================================================= | |
| Tables | |
| ========================================================================= */ | |
| .table-container { | |
| background: var(--bg-card); | |
| border: var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .data-table th { | |
| padding: var(--space-3) var(--space-4); | |
| text-align: left; | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| background: var(--bg-secondary); | |
| border-bottom: var(--border-subtle); | |
| } | |
| .data-table td { | |
| padding: var(--space-4); | |
| border-bottom: var(--border-subtle); | |
| font-size: 0.875rem; | |
| } | |
| .data-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .data-table tr:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .table-team { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| /* ========================================================================= | |
| Loading States | |
| ========================================================================= */ | |
| .loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-12); | |
| } | |
| .spinner { | |
| width: 32px; | |
| height: 32px; | |
| border: 2px solid var(--bg-tertiary); | |
| border-top-color: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .loading-text { | |
| margin-top: var(--space-4); | |
| color: var(--text-muted); | |
| font-size: 0.875rem; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Skeleton */ | |
| .skeleton { | |
| background: linear-gradient(90deg, | |
| var(--bg-tertiary) 25%, | |
| var(--bg-elevated) 50%, | |
| var(--bg-tertiary) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: var(--radius-sm); | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| /* ========================================================================= | |
| Empty States | |
| ========================================================================= */ | |
| .empty-state { | |
| text-align: center; | |
| padding: var(--space-12); | |
| color: var(--text-muted); | |
| } | |
| .empty-state-icon { | |
| width: 48px; | |
| height: 48px; | |
| margin: 0 auto var(--space-4); | |
| opacity: 0.3; | |
| } | |
| .empty-state-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .empty-state-text { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========================================================================= | |
| Page Header | |
| ========================================================================= */ | |
| .page-header { | |
| margin-bottom: var(--space-8); | |
| } | |
| .page-title { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: var(--space-2); | |
| } | |
| .page-description { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| /* ========================================================================= | |
| Probability Bar | |
| ========================================================================= */ | |
| .probability-bar-container { | |
| margin-top: var(--space-4); | |
| } | |
| .probability-bar { | |
| height: 4px; | |
| background: var(--bg-tertiary); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| display: flex; | |
| } | |
| .probability-fill-away { | |
| height: 100%; | |
| background: var(--accent-secondary); | |
| transition: width var(--transition-slow); | |
| } | |
| .probability-fill-home { | |
| height: 100%; | |
| background: var(--accent-primary); | |
| transition: width var(--transition-slow); | |
| } | |
| .probability-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: var(--space-2); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========================================================================= | |
| Section Dividers | |
| ========================================================================= */ | |
| .section { | |
| margin-bottom: var(--space-8); | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-4); | |
| } | |
| .section-title { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-secondary); | |
| } | |
| /* ========================================================================= | |
| Animations | |
| ========================================================================= */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .animate-slideUp { | |
| animation: slideUp 0.3s ease; | |
| } | |
| /* Staggered animations */ | |
| .stagger>*:nth-child(1) { | |
| animation-delay: 0.05s; | |
| } | |
| .stagger>*:nth-child(2) { | |
| animation-delay: 0.1s; | |
| } | |
| .stagger>*:nth-child(3) { | |
| animation-delay: 0.15s; | |
| } | |
| .stagger>*:nth-child(4) { | |
| animation-delay: 0.2s; | |
| } | |
| .stagger>*:nth-child(5) { | |
| animation-delay: 0.25s; | |
| } | |
| /* ========================================================================= | |
| Responsive | |
| ========================================================================= */ | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| width: 64px; | |
| padding: var(--space-3); | |
| } | |
| .sidebar-logo-text, | |
| .nav-section-title, | |
| .nav-item span:not(.nav-icon) { | |
| display: none; | |
| } | |
| .main-content { | |
| margin-left: 64px; | |
| padding: var(--space-5); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| bottom: 0; | |
| top: auto; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 64px; | |
| flex-direction: row; | |
| padding: var(--space-2); | |
| border-right: none; | |
| border-top: var(--border-subtle); | |
| } | |
| .sidebar-header { | |
| display: none; | |
| } | |
| .sidebar-nav { | |
| flex-direction: row; | |
| justify-content: space-around; | |
| gap: 0; | |
| width: 100%; | |
| } | |
| .nav-section { | |
| display: flex; | |
| margin: 0; | |
| } | |
| .nav-section-title { | |
| display: none; | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| margin-bottom: 64px; | |
| padding: var(--space-4); | |
| } | |
| .game-matchup { | |
| grid-template-columns: 1fr; | |
| gap: var(--space-4); | |
| } | |
| .team-block.away, | |
| .team-block.home { | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .team-block.home .team-info { | |
| flex-direction: row; | |
| } | |
| } | |
| /* ========================================================================= | |
| Scrollbar | |
| ========================================================================= */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--bg-tertiary); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-dim); | |
| } | |
| /* ========================================================================= | |
| Utility Classes | |
| ========================================================================= */ | |
| .flex { | |
| display: flex; | |
| } | |
| .flex-col { | |
| flex-direction: column; | |
| } | |
| .items-center { | |
| align-items: center; | |
| } | |
| .justify-between { | |
| justify-content: space-between; | |
| } | |
| .gap-2 { | |
| gap: var(--space-2); | |
| } | |
| .gap-3 { | |
| gap: var(--space-3); | |
| } | |
| .gap-4 { | |
| gap: var(--space-4); | |
| } | |
| .mt-4 { | |
| margin-top: var(--space-4); | |
| } | |
| .mb-4 { | |
| margin-bottom: var(--space-4); | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .font-mono { | |
| font-family: var(--font-mono); | |
| } | |
| .truncate { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } |