/* ============================================ THEME SYSTEM ============================================ This application uses CSS custom properties (variables) for easy theme switching. HOW TO SWITCH THEMES: --------------------- Add data-theme="dark" to the element to enable dark mode: Or use JavaScript: document.documentElement.setAttribute('data-theme', 'dark'); HOW TO ADD A NEW THEME: ------------------------ 1. Create a new [data-theme="theme-name"] block below 2. Override the variables you want to change 3. All variables are defined in :root (light theme) - override as needed BEST PRACTICES: --------------- - Always use CSS variables (var(--variable-name)) - never hardcode colors - Test your changes in both light and dark themes - Keep contrast ratios readable (WCAG AA minimum) - Use semantic variable names (--text-primary, not --color-black) See docs/THEMING.md for complete documentation. ============================================ */ /* Light Theme (Default) */ :root { /* ========== BACKGROUND COLORS ========== */ --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-light-gray: #f9fafb; --bg-very-light-gray: #f0f4f8; --bg-ultra-light-gray: #f0f0f0; --modal-bg-light: #f0f8ff; /* ========== TEXT COLORS ========== */ --text-primary: #1a202c; --text-secondary: #4a5568; --text-dark: #1a1a1a; /* ========== ACCENT COLORS (NFL Conferences) ========== */ --accent-afc: #d01f2d; --accent-afc-dark: #b01826; --accent-nfc: #004c97; --accent-nfc-dark: #003d7a; /* ========== STATUS COLORS ========== */ /* Success (Green) */ --success-color: #38a169; --success-bg: #d4edda; --success-text: #155724; --success-border: #c3e6cb; --success-bg-light: #f0fdf4; /* Warning (Orange) */ --warning-color: #dd6b20; --warning-bg: #fff3cd; --warning-text: #856404; --warning-border: #ffeaa7; --warning-bg-light: #ffe5cc; /* Danger (Red) */ --danger-color: #e53e3e; --danger-bg: #f8d7da; --danger-text: #721c24; --danger-border: #f5c6cb; --danger-bg-light: #fef2f2; --danger-bg-very-light: #fee; /* ========== BADGE COLORS ========== */ --badge-blue: #3b82f6; --badge-cyan: #0ea5e9; --badge-blue-text: #3b82f6; /* ========== TEAM HEADER BACKGROUNDS ========== */ --header-clinched: #d4edda; --header-playoff: #e0f2fe; --header-hunt: #ffe5cc; --header-eliminated: #f8d7da; /* ========== BUTTON COLORS ========== */ --btn-gray: #6b7280; --btn-gray-dark: #4b5563; /* ========== OPPONENT ITEM BACKGROUNDS ========== */ --opponent-ahead-bg: #fee; --opponent-behind-bg: #efe; --opponent-equal-bg: #f5f5f5; --opponent-hover-bg: rgba(0, 0, 0, 0.05); /* ========== MODAL/OVERLAY COLORS ========== */ --overlay-bg: rgba(0, 0, 0, 0.75); --overlay-bg-dark: rgba(0, 0, 0, 0.85); /* ========== BORDER & SHADOW ========== */ --border-color: #e2e8f0; --shadow-sm: rgba(0, 0, 0, 0.1); --shadow-md: rgba(0, 0, 0, 0.15); --shadow-lg: rgba(0, 0, 0, 0.3); --shadow-focus: rgba(0, 123, 255, 0.25); --shadow-inset-light: rgba(255, 255, 255, 0.2); --shadow-inset-dark: rgba(0, 0, 0, 0.5); /* ========== SPACING ========== */ --spacing-sm: 6px; --spacing-md: 12px; --spacing-lg: 18px; /* ========== OTHER ========== */ --border-radius: 6px; --scale-factor: 1.5; } /* Dark Theme */ [data-theme="dark"] { /* ========== BACKGROUND COLORS ========== */ --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --bg-card: #252525; --bg-light-gray: #333333; --bg-very-light-gray: #3a3a3a; --bg-ultra-light-gray: #404040; --modal-bg-light: #2a2a3a; /* ========== TEXT COLORS ========== */ --text-primary: #e5e5e5; --text-secondary: #b0b0b0; --text-dark: #ffffff; /* ========== ACCENT COLORS (NFL Conferences) ========== */ --accent-afc: #ff4757; --accent-afc-dark: #ee3344; --accent-nfc: #5f9fff; --accent-nfc-dark: #4a8fff; /* ========== STATUS COLORS ========== */ /* Success (Green) */ --success-color: #4ade80; --success-bg: #1e3a2e; --success-text: #86efac; --success-border: #2d5a3d; --success-bg-light: #0f2a1a; /* Warning (Orange) */ --warning-color: #fb923c; --warning-bg: #3a2510; --warning-text: #fdba74; --warning-border: #4a2f15; --warning-bg-light: #2a1a0a; /* Danger (Red) */ --danger-color: #f87171; --danger-bg: #3a1f1f; --danger-text: #fca5a5; --danger-border: #4a2525; --danger-bg-light: #2a1515; --danger-bg-very-light: #3a1f1f; /* ========== BADGE COLORS ========== */ --badge-blue: #60a5fa; --badge-cyan: #38bdf8; --badge-blue-text: #93c5fd; /* ========== TEAM HEADER BACKGROUNDS ========== */ --header-clinched: #1e3a2e; --header-playoff: #1e2a3a; --header-hunt: #3a2510; --header-eliminated: #3a1f1f; /* ========== BUTTON COLORS ========== */ --btn-gray: #9ca3af; --btn-gray-dark: #6b7280; /* ========== OPPONENT ITEM BACKGROUNDS ========== */ --opponent-ahead-bg: #3a1f1f; --opponent-behind-bg: #1f3a1f; --opponent-equal-bg: #2a2a2a; --opponent-hover-bg: rgba(255, 255, 255, 0.1); /* ========== MODAL/OVERLAY COLORS ========== */ --overlay-bg: rgba(0, 0, 0, 0.85); --overlay-bg-dark: rgba(0, 0, 0, 0.95); /* ========== BORDER & SHADOW ========== */ --border-color: #404040; --shadow-sm: rgba(0, 0, 0, 0.3); --shadow-md: rgba(0, 0, 0, 0.4); --shadow-lg: rgba(0, 0, 0, 0.6); --shadow-focus: rgba(95, 159, 255, 0.4); --shadow-inset-light: rgba(255, 255, 255, 0.1); --shadow-inset-dark: rgba(0, 0, 0, 0.7); } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; padding: 0; font-size: 1.5rem; } .container { max-width: 1350px; margin: 0 auto; padding: var(--spacing-md); } /* Header */ header { position: relative; text-align: center; margin-bottom: var(--spacing-md); padding: var(--spacing-md); background-color: transparent; border-radius: 0; } header h1 { font-size: 2.7rem; margin-bottom: var(--spacing-md); background: linear-gradient(135deg, var(--accent-afc), var(--accent-nfc)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Theme Toggle Button */ .theme-toggle-btn { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: var(--bg-light-gray); border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background-color 0.2s, transform 0.2s; z-index: 10; } .theme-toggle-btn:hover { background: var(--bg-very-light-gray); transform: scale(1.1); } .theme-toggle-btn:active { transform: scale(0.95); } /* Show/hide icons based on current theme */ .theme-icon-dark { display: none; } [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="dark"] .theme-icon-dark { display: inline; } /* Week Navigation */ .week-navigation { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); } .week-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-color); background-color: var(--bg-primary); color: var(--text-primary); font-size: 1.5rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; line-height: 1; } .week-nav-btn:hover:not(:disabled) { background-color: var(--bg-light-gray); border-color: var(--accent-afc); transform: scale(1.1); } .week-nav-btn:active:not(:disabled) { transform: scale(0.95); } .week-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } #current-week-display { font-size: 1.3rem; font-weight: 600; color: var(--text-primary); min-width: 100px; text-align: center; } /* Conference Toggle */ .conference-toggle { display: flex; justify-content: center; gap: 0; margin-top: var(--spacing-md); } .conference-toggle-btn { padding: 18px 48px; font-size: 1.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: 3px solid var(--border-color); background-color: var(--bg-primary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } .conference-toggle-btn:first-child { border-radius: 8px 0 0 8px; border-right: 1px solid var(--border-color); } .conference-toggle-btn:last-child { border-radius: 0 8px 8px 0; border-left: 1px solid var(--border-color); } .conference-toggle-btn[data-conference="afc"].active { background-color: var(--accent-afc); border-color: var(--accent-afc); color: white; } .conference-toggle-btn[data-conference="nfc"].active { background-color: var(--accent-nfc); border-color: var(--accent-nfc); color: white; } .conference-toggle-btn:hover:not(.active) { background-color: var(--border-color); } /* Hidden conference section */ .conference-section.hidden { display: none; } /* Header Controls Organization */ .header-controls { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; justify-content: center; align-items: center; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); max-width: 100%; } .control-group { display: flex; gap: var(--spacing-sm); justify-content: center; align-items: center; } .control-btn { padding: var(--spacing-sm) var(--spacing-md); border: none; border-radius: var(--border-radius); font-size: 1.425rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s; white-space: nowrap; } #retry-btn { background-color: var(--accent-afc); color: white; } #retry-btn:hover { background-color: var(--accent-afc-dark); } .rules-btn { background-color: var(--btn-gray); color: white; } .rules-btn:hover { background-color: var(--btn-gray-dark); } /* View Options Band */ .view-options-band { background-color: var(--bg-primary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: var(--spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); max-width: 100%; } .view-option-btn { padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--bg-primary); color: var(--text-primary); border: 1.5px solid var(--border-color); border-radius: var(--border-radius); font-size: 1.425rem; font-weight: 500; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: var(--spacing-sm); } .view-option-btn:hover { background-color: var(--border-color); border-color: var(--text-secondary); } .toggle-icon { font-size: 0.75rem; transition: transform 0.3s; display: inline-block; } .view-option-btn.expanded .toggle-icon { transform: rotate(180deg); } .view-option-btn.calc-prob-btn { background-color: var(--accent-nfc); color: white; border-color: var(--accent-nfc); } .view-option-btn.calc-prob-btn:hover { background-color: var(--accent-nfc-dark); border-color: var(--accent-nfc-dark); } .view-option-btn.calc-prob-btn:disabled { background-color: var(--text-secondary); border-color: var(--text-secondary); cursor: not-allowed; opacity: 0.6; } .prob-status { margin-top: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--bg-primary); border-radius: var(--border-radius); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); font-size: 1.275rem; color: var(--text-secondary); } #prob-source { font-weight: bold; } #prob-progress { color: var(--accent-nfc); font-weight: bold; } /* Loading State */ .loading { text-align: center; padding: var(--spacing-lg); } .spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--accent-afc); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto var(--spacing-md); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Error Message */ .error-message { text-align: center; padding: var(--spacing-lg); background-color: var(--bg-primary); border: 1px solid var(--danger-color); border-radius: var(--border-radius); margin-bottom: var(--spacing-lg); } .error-message p { color: var(--danger-color); margin-bottom: var(--spacing-md); } /* Playoff Container */ .playoff-container { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); max-width: 100%; margin-left: auto; margin-right: auto; } .conference-section { background-color: var(--bg-primary); padding: var(--spacing-md); border-radius: 0; max-width: 100%; margin: 0 auto; } /* Column Headers */ .column-headers { display: grid; grid-template-columns: 45px 48px minmax(180px, 270px) 120px 135px 112px 105px 75px; align-items: center; gap: 12px; padding: 6px 12px; background-color: var(--border-color); border-radius: var(--border-radius); margin-bottom: 12px; font-size: 1.05rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .column-headers > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .column-headers > div { white-space: nowrap; } .conference-title { font-size: 2.1rem; margin-bottom: var(--spacing-md); text-align: center; padding-bottom: var(--spacing-sm); border-bottom: 3px solid var(--border-color); } .conference-section:first-child .conference-title { color: var(--accent-afc); } .conference-section:last-child .conference-title { color: var(--accent-nfc); } /* Team Card */ .team-card { background-color: var(--bg-primary); border: 1.5px solid var(--border-color); border-radius: var(--border-radius); padding: 9px; margin-bottom: 6px; transition: transform 0.2s, box-shadow 0.2s; } .team-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-sm); } /* Increase spacing only when games are visible */ .upcoming-games.visible ~ .team-card, .team-card:has(.upcoming-games.visible) { margin-bottom: var(--spacing-md); } .team-header { display: grid; grid-template-columns: 45px 48px minmax(180px, 270px) 120px 135px 112px 105px 75px; align-items: center; gap: 12px; margin-bottom: 0; background-color: var(--header-playoff); padding: 9px 12px; border-radius: var(--border-radius); margin: -9px; margin-bottom: 0; } .team-header > * { min-width: 0; } .team-name { overflow: visible; } .team-header-clinched { background-color: var(--header-clinched); } .team-header-playoff { background-color: var(--header-playoff); } .team-header-hunt { background-color: var(--header-hunt); } .team-header-eliminated { background-color: var(--header-eliminated); } .team-logo { width: 42px; height: 42px; object-fit: contain; } .team-info { /* Team name column - takes available space */ display: flex; align-items: center; } .team-name { /* Stack city over nickname */ display: flex; flex-direction: column; line-height: 1.1; } .team-city { font-size: 0.975rem; font-weight: 500; color: var(--text-secondary); text-transform: capitalize; } .team-nickname { font-size: 1.425rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } .status-placeholder { /* Empty placeholder for teams without status badge */ display: inline-block; } .seed-number { /* Seed column */ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--border-color); border-radius: 50%; font-size: 1.35rem; font-weight: bold; } .team-record-wrapper { /* Record column */ display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; } .team-probability { /* Probability column */ display: flex; align-items: center; justify-content: center; min-width: 0; } .team-record { color: var(--text-primary); font-size: 1.425rem; font-weight: bold; transition: color 0.2s; } .team-record:hover { color: var(--accent-nfc); text-decoration: underline; } .playoff-probability { display: inline-flex; align-items: center; justify-content: center; min-width: 63px; padding: 3px 6px; border-radius: 4.5px; font-size: 1.05rem; font-weight: bold; white-space: nowrap; cursor: help; text-align: center; } .playoff-probability.prob-high { background-color: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); } .playoff-probability.prob-medium { background-color: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); } .playoff-probability.prob-low { background-color: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); } .team-division { /* Division standing column */ font-size: 1.2rem; text-align: center; } .division-link { font-size: 1.2rem; color: var(--accent-nfc); text-decoration: none; font-weight: 600; cursor: pointer; transition: color 0.2s; display: inline-block; line-height: 1.2; text-align: center; } .division-link:hover { color: var(--accent-afc); text-decoration: underline; } .division-link .division-name { text-decoration: underline; text-decoration-style: solid; text-underline-offset: 2px; } .clinched-badge { /* Status column */ display: inline-block; padding: 1.5px 1.5px; background-color: var(--success-color); color: white; border-radius: 4.5px; font-size: 0.75rem; font-weight: bold; text-align: center; white-space: nowrap; } .div-leader-badge { /* Status column */ display: inline-block; padding: 1.5px 1.5px; background-color: var(--badge-blue); color: white; border-radius: 4.5px; font-size: 0.75rem; font-weight: bold; text-align: center; white-space: nowrap; } .wildcard-badge { /* Status column */ display: inline-block; padding: 1.5px 1.5px; background-color: var(--badge-cyan); color: white; border-radius: 4.5px; font-size: 0.75rem; font-weight: bold; text-align: center; white-space: nowrap; } /* Section Headers - Side Label Style */ .section-wrapper { position: relative; padding-top: var(--spacing-sm); margin-top: var(--spacing-sm); border-top: 1px solid var(--border-color); } .section-wrapper.first-section { margin-top: 0; padding-top: 0; border-top: none; } /* When section has a caption, adjust spacing */ .section-wrapper:has(.section-caption) { padding-top: 0; margin-top: var(--spacing-md); } .section-wrapper.first-section:has(.section-caption) { margin-top: var(--spacing-md); } .section-header { position: absolute; left: -6px; top: var(--spacing-sm); font-size: 0.6rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; writing-mode: vertical-rl; text-orientation: mixed; padding: 4px 2px; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; z-index: 1; } /* Section captions - visible by default, hidden on desktop via media query */ /* Override vertical side label positioning when used as caption */ .section-header.section-caption, .section-caption.section-header { position: static !important; left: auto !important; top: auto !important; writing-mode: horizontal-tb !important; text-orientation: unset !important; margin: 12px auto; padding: 6px 12px; text-align: center; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: white; border-radius: 6px; width: fit-content; border: none; } /* Badge backgrounds for section captions - must override .section-header white background */ .section-header.section-caption.clinched-badge { background-color: var(--success-color); } .section-header.section-caption.div-leader-badge { background-color: var(--badge-blue); } .section-header.section-caption.wildcard-badge { background-color: var(--badge-cyan); } .section-header.section-caption.contender-badge { background-color: var(--warning-color); } .section-header.section-caption.eliminated-badge { background-color: var(--danger-color); } .section-caption { display: block; margin: 12px auto; padding: 6px 12px; text-align: center; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: white; border-radius: 6px; width: fit-content; } .section-content { margin-left: 0; } .eliminated-team { opacity: 0.6; } .eliminated-badge { /* Status column */ display: inline-block; padding: 1.5px 1.5px; background-color: var(--danger-color); color: white; border-radius: 4.5px; font-size: 0.75rem; font-weight: bold; text-align: center; white-space: nowrap; } .contender-badge { /* Status column */ display: inline-block; padding: 1.5px 1.5px; background-color: var(--warning-color); color: white; border-radius: 4.5px; font-size: 0.75rem; font-weight: bold; text-align: center; white-space: nowrap; } /* Conference Opponents Section */ .conference-opponents { display: none; /* Hidden by default */ } .conference-opponents.visible { padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: var(--spacing-sm); position: relative; margin-top: var(--spacing-sm); } .conference-opponents-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; font-weight: 600; } .opponents-list { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; } .conference-opponent-item { position: relative; cursor: pointer; transition: transform 0.2s; } .conference-opponent-item { cursor: pointer; } .conference-opponent-item:hover { transform: scale(1.15); z-index: 100; } .conference-opponent-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; border: 2px solid transparent; transition: border-color 0.2s; } /* Color coding based on rank */ .conference-opponent-item.opponent-ahead .conference-opponent-logo { border-color: var(--danger-color); background-color: var(--opponent-ahead-bg); } .conference-opponent-item.opponent-behind .conference-opponent-logo { border-color: var(--success-color); background-color: var(--opponent-behind-bg); } .conference-opponent-item.opponent-equal .conference-opponent-logo { border-color: var(--border-color); background-color: var(--opponent-equal-bg); } /* Comparison Overlay */ .comparison-overlay { background-color: var(--bg-primary); border-radius: 6px; padding: var(--spacing-md); width: 100%; max-height: 80vh; overflow-y: auto; } .comparison-title { font-size: 1.1rem; font-weight: bold; text-align: center; margin-bottom: 4px; } .comparison-rank-line, .comparison-record-line { text-align: center; font-size: 0.85rem; margin-bottom: 4px; color: var(--text-primary); } .rank-label, .record-label { color: var(--text-secondary); } .rank-value, .record-value { font-weight: bold; } .comparison-ruleset { text-align: center; padding: 8px; margin: 8px 0; background-color: var(--bg-very-light-gray); border-radius: 4px; border-left: 3px solid var(--accent-nfc); font-size: 0.85rem; } .comparison-ruleset em { color: var(--text-secondary); font-size: 0.75rem; } .comparison-section-header { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; padding-top: 4px; border-top: 1px solid var(--border-color); } .comparison-table { display: flex; flex-direction: column; gap: 2px; } .comparison-row { display: grid; grid-template-columns: 20px 1fr 70px 70px 24px; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.75rem; border-bottom: 1px solid var(--bg-ultra-light-gray); } .comparison-row:last-child { border-bottom: none; } .comparison-step { font-weight: bold; color: var(--text-secondary); font-size: 0.7rem; } .comparison-category { display: flex; flex-direction: column; text-align: left; } .comparison-category .cat-name { font-weight: 600; color: var(--text-primary); } .comparison-category .cat-desc { font-size: 0.65rem; color: var(--text-secondary); font-weight: normal; } .comparison-value { text-align: center; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.75rem; } .comparison-value.winner { background-color: var(--success-bg); color: var(--success-text); font-weight: bold; } .comparison-value.loser { background-color: var(--danger-bg); color: var(--danger-text); } .comparison-indicator { text-align: center; font-weight: bold; font-size: 0.9rem; } .comparison-indicator.better { color: var(--success-color); } .comparison-indicator.worse { color: var(--danger-color); } .comparison-indicator.equal { color: var(--text-secondary); } /* Upcoming Games - In Header Column */ .upcoming-games { display: flex; align-items: center; justify-content: center; } .next-games-link { font-size: 1.2rem; color: var(--accent-nfc); text-decoration: none; font-weight: 600; cursor: pointer; transition: color 0.2s; display: inline-block; line-height: 1.2; text-align: center; } .next-games-link:hover { color: var(--accent-afc); text-decoration: underline; } .next-games-message { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; white-space: nowrap; } .games-list { display: flex; flex-direction: row; gap: var(--spacing-sm); flex-wrap: wrap; } .game-item { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px; background-color: var(--bg-primary); border-radius: 4px; cursor: pointer; transition: background-color 0.2s; position: relative; } .game-win-prob-wrapper { display: flex; align-items: center; } .game-win-prob { font-size: 0.85rem; font-weight: 600; padding: 2px 6px; border-radius: 3px; white-space: nowrap; cursor: help; } .game-win-prob.prob-high { background-color: var(--success-bg); color: var(--success-text); } .game-win-prob.prob-medium { background-color: var(--warning-bg); color: var(--warning-text); } .game-win-prob.prob-low { background-color: var(--danger-bg); color: var(--danger-text); } .game-item:hover { background-color: var(--border-color); } .game-item-logo-wrapper { width: 28px; height: 28px; } .opponent-logo { width: 28px; height: 28px; object-fit: contain; } .divisional-indicator { position: absolute; bottom: 2px; right: 2px; font-size: 0.6rem; font-weight: bold; color: var(--text-secondary); background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 3px; padding: 1px 3px; line-height: 1; z-index: 2; } .opponent-record-wrapper { position: relative; display: flex; align-items: center; padding-top: 4px; /* Move record down more */ } .opponent-record { color: var(--text-secondary); font-size: 0.75rem; font-weight: bold; padding-right: 12px; /* Space for airplane icon */ } .game-location-icon { position: absolute; top: -6px; right: -8px; font-size: 10px; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px var(--shadow-sm); } .opponent-record.winning { color: var(--danger-color); } .opponent-record.even { color: var(--badge-blue-text); } .opponent-record.losing { color: var(--success-color); } /* Game Details Overlay */ .game-details-overlay { position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; background-color: var(--bg-primary); background: var(--bg-primary); border: 2px solid var(--text-primary); border-radius: 6px; padding: var(--spacing-md); min-width: 250px; box-shadow: 0 8px 24px var(--shadow-lg); z-index: 1000; display: none; pointer-events: none; } .game-item:hover .game-details-overlay { display: block; } .game-details-overlay .game-matchup { font-size: 1rem; font-weight: bold; margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); } .game-details-overlay .game-matchup img { width: 32px; height: 32px; } .game-details-overlay .game-info { font-size: 0.85rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; } .game-details-overlay .game-location { font-weight: bold; color: var(--text-primary); } /* Footer */ footer { text-align: center; padding: var(--spacing-lg); color: var(--text-secondary); font-size: 1.35rem; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); } .footer-btn { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--accent-nfc); color: white; border: none; border-radius: var(--border-radius); font-size: 1.2rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .footer-btn:hover { background-color: var(--accent-nfc-dark); } /* ELO Ratings Modal */ .elo-ratings-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-md); } .elo-ratings-table thead { background-color: var(--border-color); } .elo-ratings-table th { padding: var(--spacing-md); text-align: left; font-weight: 700; color: var(--text-primary); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; border-bottom: 2px solid var(--text-primary); } .elo-ratings-table th:first-child { text-align: center; width: 60px; } .elo-ratings-table th:nth-child(2) { width: auto; min-width: 200px; } .elo-ratings-table th:nth-child(3) { text-align: center; width: 120px; } .elo-ratings-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; } .elo-ratings-table tbody tr:hover { background-color: var(--bg-light-gray); } .elo-ratings-table td { padding: var(--spacing-md); vertical-align: middle; } .elo-rank-cell { text-align: center; font-weight: bold; font-size: 1.1rem; color: var(--accent-nfc); } .elo-team-cell { display: flex; align-items: center; gap: var(--spacing-sm); } .elo-table-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .elo-table-name { font-weight: 600; color: var(--text-primary); } .elo-rating-cell { text-align: center; font-family: monospace; font-weight: 600; font-size: 1.1rem; color: var(--text-primary); } /* Probability Scenarios Modal */ .probability-scenarios-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color); } .probability-scenarios-team-logo { width: 48px; height: 48px; object-fit: contain; } .probability-scenarios-team-name { font-size: 1.6rem; color: var(--text-primary); margin: 0; } .probability-scenarios-next-game { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background-color: var(--bg-light-gray); border-radius: var(--border-radius); border-left: 4px solid var(--accent-nfc); } .probability-scenarios-next-game-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-sm); } .probability-scenarios-opponent { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.2rem; } .probability-scenarios-opponent-logo { width: 32px; height: 32px; object-fit: contain; } .probability-scenarios-loading { text-align: center; padding: var(--spacing-lg); } .probability-scenarios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .probability-scenario-card { background-color: var(--bg-primary); border: 2px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-lg); text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .probability-scenario-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-sm); } .probability-scenario-card.win { border-color: var(--success-color); background-color: var(--success-bg-light); } .probability-scenario-card.current { border-color: var(--accent-nfc); background-color: var(--modal-bg-light); } .probability-scenario-card.lose { border-color: var(--danger-color); background-color: var(--danger-bg-light); } .probability-scenario-label { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: var(--spacing-sm); } .probability-scenario-value { font-size: 2.5rem; font-weight: bold; color: var(--text-primary); margin-bottom: var(--spacing-sm); } .probability-scenario-card.win .probability-scenario-value { color: var(--success-color); } .probability-scenario-card.lose .probability-scenario-value { color: var(--danger-color); } .probability-scenario-change { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; } /* Modal Overlay */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-bg); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing-md); overflow-y: auto; } /* Games flyout should appear above division flyout */ #games-flyout { z-index: 10000; } /* Nested modals (modals on top of other modals) */ .modal-nested { z-index: 10001 !important; background-color: var(--overlay-bg-dark) !important; } /* Make clickable cells in division table */ .division-team-cell, .division-record-cell, .division-winpercent-cell, .division-h2h-cell, .division-divrecord-cell, .division-confrecord-cell { cursor: pointer; transition: background-color 0.2s ease; } .division-team-cell:hover, .division-record-cell:hover, .division-winpercent-cell:hover, .division-h2h-cell:hover, .division-divrecord-cell:hover, .division-confrecord-cell:hover { background-color: var(--opponent-hover-bg); } /* Make clickable elements in game cards */ .flyout-game-card .flyout-info-line strong, .flyout-game-card .flyout-matchup { cursor: pointer; transition: color 0.2s ease; } .flyout-game-card .flyout-info-line strong:hover, .flyout-game-card .flyout-matchup:hover { color: var(--accent-afc); } .modal-content { background-color: var(--bg-secondary); border-radius: var(--border-radius); max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--spacing-lg); position: relative; box-shadow: 0 20px 60px var(--shadow-lg); } .modal-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: none; border: none; font-size: 2rem; color: var(--text-secondary); cursor: pointer; padding: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s, color 0.2s; z-index: 1000; /* Ensure button is above other content */ pointer-events: auto; /* Ensure button can receive clicks */ } #games-flyout-close-btn { position: absolute; top: var(--spacing-md); right: var(--spacing-md); z-index: 1001; } .modal-close:hover { background-color: var(--border-color); color: var(--text-primary); } .modal-content h2 { margin-top: 0; margin-bottom: var(--spacing-lg); color: var(--text-primary); font-size: 1.8rem; border-bottom: 2px solid var(--border-color); padding-bottom: var(--spacing-md); } .modal-content h3 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); color: var(--text-primary); font-size: 1.3rem; } .modal-content h4 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); color: var(--text-primary); font-size: 1.1rem; } .rules-section { margin-bottom: var(--spacing-lg); } .rules-section p { margin-bottom: var(--spacing-sm); line-height: 1.6; color: var(--text-primary); } .rules-section ul, .rules-section ol { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); line-height: 1.8; } .rules-section li { margin-bottom: var(--spacing-sm); color: var(--text-primary); } .rules-section strong { color: var(--text-primary); font-weight: 600; } .rules-definitions { margin-top: var(--spacing-md); } .rules-definitions dt { font-weight: bold; color: var(--text-primary); margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); } .rules-definitions dd { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); color: var(--text-secondary); line-height: 1.6; } .rules-disclaimer { background-color: var(--bg-primary); padding: var(--spacing-md); border-radius: var(--border-radius); border-left: 4px solid var(--accent-afc); } .rules-disclaimer p { font-size: 0.95rem; } .rules-source { font-size: 0.85rem; margin-top: var(--spacing-md); font-style: italic; } .modal-content a { color: var(--accent-nfc); text-decoration: none; font-weight: 500; } .modal-content a:hover { text-decoration: underline; } /* Games Flyout Modal */ .games-flyout-content { background-color: var(--bg-secondary); border-radius: 8px; max-width: 1000px; width: 95%; max-height: 95vh; display: flex; flex-direction: column; position: relative; box-shadow: 0 20px 60px var(--shadow-lg); } .games-flyout-header-section { padding: var(--spacing-lg); position: relative; flex-shrink: 0; } .games-flyout-tables { flex: 1; overflow-y: auto; overflow-x: auto; padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); width: 100%; } /* Division Flyout Modal */ .division-flyout-content { background-color: var(--bg-secondary); border-radius: 8px; max-width: fit-content; width: auto; min-width: 600px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: var(--spacing-lg); position: relative; box-shadow: 0 20px 60px var(--shadow-lg); margin: 0 auto; } .comparison-modal-content { background-color: var(--bg-secondary); border-radius: 8px; max-width: 600px; width: 95%; max-height: 90vh; overflow-y: auto; padding: var(--spacing-lg); position: relative; box-shadow: 0 20px 60px var(--shadow-lg); } .division-flyout-header { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color); } .division-flyout-header h2 { margin: 0; font-size: 1.6rem; color: var(--text-primary); text-align: center; } .division-flyout-standings { width: 100%; overflow-x: visible; } .division-standings-table { width: 100%; border-collapse: collapse; background-color: var(--bg-primary); font-size: 1.14rem; /* Increased by 20% from 0.95rem */ table-layout: auto; } .division-standings-table thead { background-color: var(--border-color); } .division-standings-table th { padding: var(--spacing-md); text-align: left; font-weight: 700; color: var(--text-primary); text-transform: uppercase; font-size: 0.96rem; /* Increased by 20% from 0.8rem */ letter-spacing: 0.5px; border-bottom: 2px solid var(--text-primary); } .division-standings-table th:first-child { text-align: center; width: 50px; } .division-standings-table th:nth-child(2) { width: auto; min-width: 120px; } .division-standings-table th:nth-child(n+3) { text-align: center; width: 120px; } .division-standings-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; } .division-standings-table tbody tr:hover { background-color: var(--bg-light-gray); } .division-standings-table tbody tr.current-team-row { background-color: var(--modal-bg-light); border-left: 4px solid var(--accent-nfc); font-weight: 600; } .division-standings-table td { padding: var(--spacing-md); vertical-align: middle; } .division-rank-cell { text-align: center; font-weight: bold; font-size: 1.1rem; color: var(--accent-nfc); } .division-team-cell { display: flex; align-items: center; gap: var(--spacing-sm); } .division-table-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .division-table-name { font-weight: 600; color: var(--text-primary); } .division-record-cell, .division-winpercent-cell, .division-divrecord-cell, .division-confrecord-cell, .division-h2h-cell, .division-seed-cell, .division-nextgames-cell { text-align: center; font-family: monospace; font-weight: 600; } .division-seed-cell { color: var(--accent-nfc); } .division-nextgames-link { color: var(--accent-nfc); text-decoration: none; cursor: pointer; transition: color 0.2s; font-weight: 600; } .division-nextgames-link:hover { color: var(--accent-afc); text-decoration: underline; } .games-flyout-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--border-color); position: relative; } .view-toggle { display: flex; gap: 0.25rem; margin-left: auto; } .view-toggle-btn { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .view-toggle-btn:hover { background: var(--bg-light-gray); border-color: var(--text-secondary); } .view-toggle-btn.active { background: var(--badge-blue); border-color: var(--badge-blue); color: white; } .flyout-team-logo, .flyout-team-logo-container { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .games-flyout-header h2 { margin: 0; font-size: 1.6rem; color: var(--text-primary); } /* Games Filter Styles */ .games-filters { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 0; margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .filter-group { display: flex; align-items: center; gap: 0.5rem; } .filter-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; white-space: nowrap; } .filter-dropdown { padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; font-size: 1.2rem; transition: all 0.2s; min-width: 120px; 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 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; } .filter-dropdown:hover { border-color: var(--text-secondary); background-color: var(--bg-light-gray); } .filter-dropdown:focus { outline: none; border-color: var(--badge-blue); box-shadow: 0 0 0 2px var(--shadow-focus); } .filter-dropdown:disabled { opacity: 0.5; cursor: not-allowed; } .games-flyout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); } /* Games Table View - additional styles for .games-flyout-tables */ /* Note: overflow-y, padding, flex, etc. are set in the main .games-flyout-tables rule above */ .games-table-wrapper { width: 100%; } .games-table-caption { font-size: 0.84rem; /* 40% of mobile size (2.1rem * 0.4) */ font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border-color); } .games-flyout-table, .games-flyout-tables table { width: 100%; overflow-x: auto; } .games-flyout-table table, .games-flyout-tables table { width: 100%; border-collapse: collapse; font-size: 1.12rem; /* 40% of mobile size (2.8rem * 0.4) */ } .games-flyout-table thead, .games-flyout-tables thead { background: var(--bg-light-gray); position: sticky; top: 0; z-index: 10; } .games-flyout-table th, .games-flyout-tables th { padding: var(--spacing-sm) var(--spacing-md); text-align: left !important; /* Force left aligned */ font-weight: 600; color: var(--text-primary); border-bottom: 2px solid var(--border-color); white-space: nowrap; font-size: 0.96rem; /* 40% of mobile size (2.4rem * 0.4) */ } .games-flyout-table td, .games-flyout-tables td { text-align: left !important; /* Force left aligned */ } .games-flyout-table td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); vertical-align: middle; } .games-flyout-table tbody tr, .games-flyout-tables tbody tr { transition: background-color 0.2s; } .games-flyout-table tbody tr:hover, .games-flyout-tables tbody tr:hover { background: var(--bg-light-gray); } .games-flyout-table .table-opponent, .games-flyout-tables .table-opponent { display: flex; align-items: center; gap: 0.5rem; } .games-flyout-table .table-opponent-logo, .games-flyout-tables .table-opponent-logo { width: 19.2px; /* 40% of mobile size (40px * 0.4) for desktop */ height: 19.2px; flex-shrink: 0; } .games-flyout-table .table-result, .games-flyout-tables .table-result { font-weight: 600; } .games-flyout-table .table-result.win, .games-flyout-tables .table-result.win { color: var(--success-color); } .games-flyout-table .table-result.loss, .games-flyout-tables .table-result.loss { color: var(--danger-color); } .games-flyout-table .table-result.tie, .games-flyout-tables .table-result.tie { color: var(--warning-color); } .games-flyout-table .table-probability, .games-flyout-tables .table-probability { font-weight: 500; } .games-flyout-table .table-probability.high, .games-flyout-tables .table-probability.high { color: var(--success-color); } .games-flyout-table .table-probability.medium, .games-flyout-tables .table-probability.medium { color: var(--text-secondary); } .games-flyout-table .table-probability.low, .games-flyout-tables .table-probability.low { color: var(--danger-color); } .flyout-game-card { background-color: var(--bg-primary); border: 2px solid var(--border-color); border-radius: 8px; padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); transition: transform 0.2s, box-shadow 0.2s; } .flyout-game-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow-md); border-color: var(--accent-nfc); } .flyout-opponent-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto; display: block; } .flyout-matchup { font-size: 1.5rem; font-weight: bold; text-align: center; color: var(--text-primary); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color); } .flyout-game-info { display: flex; flex-direction: column; gap: var(--spacing-sm); flex-grow: 1; } .flyout-info-line { font-size: 1.35rem; color: var(--text-primary); line-height: 1.6; } .flyout-info-line strong { color: var(--text-secondary); font-weight: 600; margin-right: 4px; } .flyout-divisional { color: var(--accent-afc); font-weight: bold; } .flyout-win-prob-section { margin-top: var(--spacing-sm); padding-top: var(--spacing-md); border-top: 2px solid var(--border-color); display: flex; flex-direction: column; gap: var(--spacing-sm); } .flyout-win-prob { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--spacing-md); border-radius: 6px; transition: background-color 0.2s; } .flyout-win-prob.prob-high { background-color: var(--success-bg); } .flyout-win-prob.prob-medium { background-color: var(--warning-bg); } .flyout-win-prob.prob-low { background-color: var(--danger-bg); } .flyout-prob-label { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); font-weight: 600; } .flyout-prob-value { font-size: 2.4rem; font-weight: bold; color: var(--text-primary); } .flyout-win-prob.prob-high .flyout-prob-value { color: var(--success-text); } .flyout-win-prob.prob-medium .flyout-prob-value { color: var(--warning-text); } .flyout-win-prob.prob-low .flyout-prob-value { color: var(--danger-text); } .flyout-prob-source { text-align: center; font-size: 1.05rem; color: var(--text-secondary); font-style: italic; } /* Completed game styling */ .flyout-game-card.completed-game { opacity: 0.9; } .flyout-matchup.game-win { color: var(--success-color); font-weight: bold; } .flyout-matchup.game-loss { color: var(--danger-color); font-weight: bold; } .flyout-matchup.game-tie { color: var(--text-secondary); font-weight: bold; } /* Responsive Design */ @media (max-width: 768px) { header h1 { font-size: 2.25rem; } .playoff-container { grid-template-columns: 1fr; } .view-options-band { flex-direction: column; gap: var(--spacing-sm); } /* Conference toggle mobile adjustments */ .conference-toggle-btn { padding: 21px 60px; font-size: 1.8rem; } /* Theme toggle position for mobile */ .theme-toggle-btn { top: var(--spacing-sm); right: var(--spacing-sm); width: 36px; height: 36px; font-size: 1rem; } /* Make team cards bigger on mobile */ .team-card { padding: 15px; margin-bottom: 12px; } /* Adjust grid for mobile - 5 columns: seed, logo, name, record, probability */ .team-header { grid-template-columns: 48px 60px 1fr 80px 65px; padding: 15px 18px; gap: 15px; margin: -15px; margin-bottom: 0; } .column-headers { grid-template-columns: 48px 60px 1fr 80px 65px; font-size: 1.125rem; padding: 9px 18px; } /* Hide next, division, and status columns on mobile */ .team-header > :nth-child(4), .team-header > :nth-child(5), .team-header > :nth-child(6), .column-headers > :nth-child(4), .column-headers > :nth-child(5), .column-headers > :nth-child(6) { display: none; } /* Make seed number bigger */ .seed-number { width: 42px; height: 42px; font-size: 1.5rem; } /* Make team logo bigger */ .team-logo { width: 54px; height: 54px; } /* Hide city name on mobile, show only nickname */ .team-city { display: none !important; } .team-nickname { font-size: 1.65rem; } /* Make record bigger */ .team-record { font-size: 1.5rem; } /* Make probability badge smaller for mobile */ .playoff-probability { min-width: 55px; padding: 2px 4px; font-size: 0.95rem; } .game-item { flex-wrap: wrap; font-size: 1.425rem; } .section-content { margin-left: 30px; } .section-header { font-size: 0.9rem; left: -7.5px; } .modal-content { padding: var(--spacing-md); max-height: 95vh; } .modal-content h2 { font-size: 1.95rem; padding-right: 60px; } .modal-content h3 { font-size: 1.65rem; } .rules-section ul, .rules-section ol { margin-left: var(--spacing-md); } .rules-definitions dd { margin-left: var(--spacing-md); } /* Flyout adjustments for mobile */ .games-flyout-content { width: 100%; max-width: 100%; padding: var(--spacing-sm); border-radius: 0; height: 100vh; max-height: 100vh; } .games-flyout-header h2 { font-size: 1.8rem; } .games-flyout-grid { grid-template-columns: 1fr; } .flyout-team-logo { width: 48px; height: 48px; } /* Make flyout game cards bigger on mobile */ .flyout-matchup { font-size: 1.8rem; } .flyout-info-line { font-size: 1.5rem; } .flyout-prob-label { font-size: 1.2rem; } .flyout-prob-value { font-size: 2.7rem; } .flyout-prob-source { font-size: 1.2rem; } .flyout-opponent-logo { width: 80px; height: 80px; } .division-flyout-content { width: 98%; padding: var(--spacing-md); } .division-flyout-header h2 { font-size: 1.2rem; } .comparison-modal-content { width: 98%; padding: var(--spacing-md); } .division-standings-table { font-size: 1.02rem; /* Increased by 20% from 0.85rem */ } .division-standings-table th, .division-standings-table td { padding: var(--spacing-sm); } .division-table-logo { width: 24px; height: 24px; } .division-table-name { font-size: 0.9rem; } /* Games table mobile styles */ .games-flyout-table table, .games-flyout-tables table { font-size: 2.8rem; } .games-flyout-table th, .games-flyout-tables th { padding: var(--spacing-sm); font-size: 2.4rem; text-align: left !important; } .games-flyout-table td, .games-flyout-tables td { text-align: left !important; } .games-flyout-table td, .games-flyout-tables td { padding: var(--spacing-sm); font-size: 2.8rem; } .games-flyout-table .table-opponent-logo, .games-flyout-tables .table-opponent-logo { width: 40px; /* Mobile size */ height: 40px; } .games-table-caption { font-size: 2.1rem; /* 40% larger for mobile (1.5rem * 1.4) */ font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border-color); } /* Compact filter bar on mobile */ .games-filters { gap: 0.5rem; padding: 0.5rem 0; } .filter-group { flex-wrap: nowrap; } .filter-label { display: none; /* Hide labels on mobile */ } .filter-dropdown { padding: 0.6rem 0.75rem; padding-right: 2.5rem; font-size: 1.35rem; /* Increased from 0.9rem (50% larger for mobile) */ min-width: 140px; } /* View toggle mobile adjustments */ .view-toggle-btn { padding: 0.75rem; } .view-toggle-btn svg { width: 20px; height: 20px; } } /* Desktop: hide section captions, show status column */ @media (min-width: 1201px) { .section-caption { display: none; } } /* Mobile: hide status column, show section captions */ @media (max-width: 1200px) { .team-city { display: none !important; } /* Hide status column (6th child) */ .column-headers > :nth-child(6), .team-header > :nth-child(6) { display: none; } /* Adjust grid to remove status column */ .column-headers, .team-header { grid-template-columns: 45px 48px minmax(180px, 270px) 120px 135px 105px 75px; } /* Hide vertical side labels, show horizontal captions */ .section-header:not(.section-caption) { display: none; } /* Ensure captions appear horizontally between sections */ .section-caption, .section-header.section-caption { display: block !important; position: static !important; margin: var(--spacing-md) auto !important; } } /* ===================================================== ABSTRACT TEAM GRAPHICS Replaces team logos with color-based geometric designs ===================================================== */ .team-graphic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 2px 4px var(--shadow-md), inset 0 1px 2px var(--shadow-inset-light); flex-shrink: 0; } /* Size variants */ .team-graphic.logo-xs { width: 24px; height: 24px; font-size: 0.5rem; } .team-graphic.logo-sm { width: 28px; height: 28px; font-size: 0.55rem; } .team-graphic.logo-md { width: 42px; height: 42px; font-size: 0.7rem; } .team-graphic.logo-lg { width: 64px; height: 64px; font-size: 0.9rem; } .team-graphic.logo-xl { width: 48px; height: 48px; font-size: 0.8rem; } /* Team abbreviation text */ .team-abbr { position: relative; z-index: 2; font-weight: 800; letter-spacing: -0.5px; color: white; text-shadow: 0 1px 2px var(--shadow-inset-dark); text-transform: uppercase; } /* Pattern: Diagonal Stripes */ .team-graphic.pattern-diagonal-stripes { background: repeating-linear-gradient( 45deg, var(--team-primary), var(--team-primary) 4px, var(--team-secondary) 4px, var(--team-secondary) 8px ); } .team-graphic.pattern-diagonal-stripes.logo-xs, .team-graphic.pattern-diagonal-stripes.logo-sm { background: repeating-linear-gradient( 45deg, var(--team-primary), var(--team-primary) 3px, var(--team-secondary) 3px, var(--team-secondary) 6px ); } /* Pattern: Chevron */ .team-graphic.pattern-chevron { background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-primary) 40%, var(--team-secondary) 40%, var(--team-secondary) 60%, var(--team-primary) 60%, var(--team-primary) 100% ); } /* Pattern: Split Vertical */ .team-graphic.pattern-split-vertical { background: linear-gradient(90deg, var(--team-primary) 0%, var(--team-primary) 50%, var(--team-secondary) 50%, var(--team-secondary) 100% ); } /* Pattern: Split Horizontal */ .team-graphic.pattern-split-horizontal { background: linear-gradient(180deg, var(--team-primary) 0%, var(--team-primary) 50%, var(--team-secondary) 50%, var(--team-secondary) 100% ); } /* Pattern: Split Diagonal */ .team-graphic.pattern-split-diagonal { background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-primary) 50%, var(--team-secondary) 50%, var(--team-secondary) 100% ); } /* Pattern: Radial Gradient */ .team-graphic.pattern-gradient-radial { background: radial-gradient(circle at 30% 30%, var(--team-secondary) 0%, var(--team-primary) 60%, var(--team-primary) 100% ); } /* Hover effect */ .team-graphic:hover { transform: scale(1.05); box-shadow: 0 4px 8px var(--shadow-md), inset 0 1px 2px var(--shadow-inset-light); } /* Ensure text contrast for light-colored teams */ .team-graphic[style*="--team-primary: #FFB612"], .team-graphic[style*="--team-primary: #D3BC8D"], .team-graphic[style*="--team-primary: #FFC20E"], .team-graphic[style*="--team-primary: #FFA300"] { color: var(--text-dark); } .team-graphic[style*="--team-primary: #FFB612"] .team-abbr, .team-graphic[style*="--team-primary: #D3BC8D"] .team-abbr, .team-graphic[style*="--team-primary: #FFC20E"] .team-abbr, .team-graphic[style*="--team-primary: #FFA300"] .team-abbr { color: var(--text-dark); text-shadow: 0 1px 1px var(--shadow-inset-light); } /* Conference opponent graphics */ .conference-opponent-item .team-graphic { transition: transform 0.2s; } .conference-opponent-item:hover .team-graphic { transform: scale(1.15); } /* Mobile adjustments */ @media (max-width: 768px) { .team-graphic.logo-md { width: 54px; height: 54px; font-size: 0.85rem; } .team-graphic.logo-lg { width: 80px; height: 80px; font-size: 1.1rem; } } /* Game Simulator Styles */ .game-simulator { max-width: 800px; margin: var(--spacing-lg) auto; padding: var(--spacing-lg); background-color: var(--bg-primary); border-radius: var(--border-radius); border: 2px solid var(--border-color); } .simulator-title { text-align: center; margin-bottom: var(--spacing-sm); font-size: 1.8rem; color: var(--text-primary); } .simulator-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: var(--spacing-lg); } .simulator-games { display: flex; flex-direction: column; gap: var(--spacing-md); } .simulator-game { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-md); background-color: var(--bg-light-gray); border-radius: var(--border-radius); } .simulator-team { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s; border: 2px solid transparent; width: 200px; } .simulator-team.home-team { flex-direction: row-reverse; justify-content: flex-start; } .simulator-team.away-team { flex-direction: row; justify-content: flex-start; } .simulator-team:hover { background-color: var(--bg-very-light-gray); } .simulator-team.selected { border-color: var(--success-border); background-color: var(--success-bg); } .simulator-team.loser { opacity: 0.5; } .simulator-vs { font-weight: bold; color: var(--text-secondary); width: 30px; text-align: center; flex-shrink: 0; } .simulator-reset-btn { display: block; margin: var(--spacing-lg) auto 0; padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); border-radius: var(--border-radius); cursor: pointer; font-size: 1rem; transition: background-color 0.2s; } .simulator-reset-btn:hover { background-color: var(--danger-color); color: white; }