/* * versus-brand.css * Versus Sports Simulator — Global Stylesheet * Based on Brand Kit v1.0 · April 2026 * * This file replaces bootstrap-overrides.css + main.css. * Load AFTER Bootstrap 5. No other global CSS file needed. * * Google Fonts import: Inter (all weights used) * @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); * Add that import to your or uncomment the line below: */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ============================================================ 1. DESIGN TOKENS — CSS Custom Properties ============================================================ */ :root { /* --- Brand Colors --- */ --navy: #082944; /* Authority · structure · headings · UI text · backgrounds */ --orange: #F07316; /* CTAs · winners · highlights */ --blue-accent: #1B5FAD; /* Rankings · stats · datapoints (was #0ca1d2) */ /* --- Neutrals --- */ --full-white: #FFFFFF; --blue-tint: #F0F8FC; /* Tint */ --frost: #E3E9ED; /* Frost */ --slate-gray: #80919B; /* Slate */ --slate-gray-darker: #6b7a85; --off-white: #F0F8FC; /* alias → Tint (replaces old #f2f7fb) */ /* --- Functional (win/loss only) --- */ --green-win: #16A34A; /* Win · Positive · Success states */ --red-loss: #DC2626; /* Loss · Negative · Error states */ /* --- Legacy aliases (kept for backward compatibility) --- */ --gray-light: #E3E9ED; /* → frost */ --gray-dark: #082944; /* → navy */ --yellow-tint: #fff4b8; /* kept as-is; not in brand palette */ /* --- Orange tints & shades --- */ --orange-10: #fef3e9; --orange-25: #fbd9b8; --orange-50: #f7b97b; --orange-75: #f3963e; --orange-110: #d8671a; --orange-125: #b85614; --orange-150: #88400e; --orange-175: #582a09; /* --- Blue tints & shades --- */ --blue-10: #eaf1f9; --blue-25: #c2d6ef; --blue-50: #8daed8; --blue-75: #5886c2; --blue-110: #175398; --blue-125: #134680; --blue-150: #0e3460; --blue-175: #092240; /* --- Bootstrap semantic mappings --- */ --bs-primary: var(--navy); --bs-primary-hover: #061f32; --bs-secondary: var(--slate-gray); --bs-secondary-hover: var(--slate-gray-darker); --bs-dark: var(--navy); --bs-light: var(--frost); --bs-info: var(--blue-accent); --bs-info-hover: var(--blue-110); --bs-success: var(--green-win); --bs-success-hover: #148a3e; --bs-danger: var(--red-loss); --bs-danger-hover: #b91c1c; --bs-warning: var(--orange); --bs-warning-hover: var(--orange-110); /* --- Typography --- */ --font-base: 'Inter', system-ui, -apple-system, sans-serif; /* Type scale (brand guide §03) */ --text-display-xl: 3.5rem; /* 56px / weight 900 / tracking -1.6 */ --text-display-lg: 2.25rem; /* 36px / weight 800 / tracking -1.0 */ --text-heading-md: 1.5rem; /* 24px / weight 800 / tracking -0.6 */ --text-heading-sm: 1.0625rem; /* 17px / weight 800 / tracking -0.3 */ --text-body-lg: 0.875rem; /* 14px / weight 500 */ --text-body-md: 0.75rem; /* 12px / weight 500 */ --text-label-cap: 0.65625rem;/* 10.5px / weight 800 / tracking +1.4 */ /* --- Spacing (4px grid) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* --- Corner Radii --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* --- Elevation / Shadows --- */ --shadow-card: 0 1px 3px rgba(8, 41, 68, 0.06); --shadow-cta: 0 2px 6px rgba(240, 115, 22, 0.40); --shadow-sheet: 0 8px 32px rgba(8, 41, 68, 0.18); } /* ============================================================ 2. GLOBAL RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--full-white); color: var(--navy); font-family: var(--font-base); font-weight: 400; font-size: 1rem; line-height: 1.6; } input, textarea, select, button { font-family: inherit; font-size: inherit; } a { color: var(--blue-accent); text-decoration: none; } a:hover { color: var(--orange); text-decoration: underline; } /* ============================================================ 3. TYPOGRAPHY — Inter type scale ============================================================ */ /* Display XL — 56px / Black 900 / −1.6 tracking */ .display-xl { font-family: var(--font-base); font-size: var(--text-display-xl); font-weight: 900; letter-spacing: -0.1em; /* −1.6 at 56px ≈ −0.029em; adjusted to taste */ line-height: 1.1; color: var(--navy); } /* Display LG — 36px / ExtraBold 800 / −1.0 tracking */ .display-lg { font-family: var(--font-base); font-size: var(--text-display-lg); font-weight: 800; letter-spacing: -0.028em; line-height: 1.15; color: var(--navy); } /* Label / Caps — 10.5px / ExtraBold 800 / +1.4 tracking */ .label-cap { font-family: var(--font-base); font-size: var(--text-label-cap); font-weight: 800; letter-spacing: 0.133em; text-transform: uppercase; color: var(--slate-gray); } /* Tabular numbers (always for scores & stats) */ .tabular-nums, .score, .stat-value { font-variant-numeric: tabular-nums; } /* --- Semantic headings --- */ h1 { font-family: var(--font-base); font-weight: 800; /* heading/md weight per brand guide */ font-size: var(--text-heading-md); /* 24px maps to heading/md */ letter-spacing: -0.025em; color: var(--navy); padding-bottom: 0.25rem; margin-top: 1.25rem; margin-bottom: 1rem; line-height: 1.2; text-transform: none; /* removed Oswald all-caps convention */ } /* Orange underline accent */ h1::after { content: ""; display: block; width: 60px; height: 4px; background-color: var(--orange); margin-top: 0.5rem; margin-left: 0; } /* Responsive h1 */ @media (max-width: 767.98px) { h1 { font-size: 1.5rem; margin-top: 1rem; } h1::after { margin-left: auto; margin-right: auto; } } /* Center-aligned h1 */ h1.text-center::after, .text-center h1::after { margin-left: auto; margin-right: auto; } h2 { font-family: var(--font-base); font-weight: 800; font-size: 1.5rem; /* display/lg feel at smaller scale */ letter-spacing: -0.02em; color: var(--blue-accent); padding-bottom: 0.2rem; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; } @media (max-width: 767.98px) { h2 { font-size: 1.2rem; } } h3 { font-family: var(--font-base); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--navy) !important; margin-top: 0.5rem; margin-bottom: 0.5rem; line-height: 1.3; } @media (max-width: 767.98px) { h3 { font-size: 1rem; } } h3 a, h3 .link-primary { color: var(--navy) !important; } h4 { font-family: var(--font-base); font-weight: 600; font-size: 1rem; color: var(--slate-gray); margin-top: 0.75rem; margin-bottom: 0.5rem; line-height: 1.4; } @media (max-width: 767.98px) { h4 { font-size: 0.95rem; } } h5 { font-family: var(--font-base); font-weight: 600; font-size: 0.9375rem; color: var(--navy); margin-top: 0.5rem; margin-bottom: 0.25rem; line-height: 1.4; } @media (max-width: 767.98px) { h5 { font-size: 0.875rem; } } /* ============================================================ 4. BOOTSTRAP UTILITY OVERRIDES ============================================================ */ /* Text colors */ .text-primary { color: var(--bs-primary) !important; } .text-secondary { color: var(--bs-secondary) !important; } .text-info { color: var(--bs-info) !important; } .text-success { color: var(--bs-success) !important; } .text-danger { color: var(--bs-danger) !important; } .text-warning { color: var(--bs-warning) !important; } .text-dark { color: var(--bs-dark) !important; } .text-light { color: var(--bs-light) !important; } /* Brand-specific text helpers */ .text-blue-accent { color: var(--blue-accent) !important; } .color-orange { color: var(--orange) !important; } /* Background colors */ .bg-primary { background-color: var(--bs-primary) !important; } .bg-secondary { background-color: var(--bs-secondary) !important; } .bg-info { background-color: var(--bs-info) !important; } .bg-success { background-color: var(--bs-success) !important; } .bg-danger { background-color: var(--bs-danger) !important; } .bg-warning { background-color: var(--bs-warning) !important; } .bg-dark { background-color: var(--bs-dark) !important; } .bg-light { background-color: var(--bs-light) !important; } .bg-blue-tint { background-color: var(--blue-tint) !important; } /* Border colors */ .border-primary { border-color: var(--bs-primary) !important; } .border-secondary { border-color: var(--bs-secondary) !important; } .border-info { border-color: var(--bs-info) !important; } .border-success { border-color: var(--bs-success) !important; } .border-danger { border-color: var(--bs-danger) !important; } .border-warning { border-color: var(--bs-warning) !important; } .border-dark { border-color: var(--bs-dark) !important; } .border-light { border-color: var(--bs-light) !important; } /* Checkbox accent */ input[type="checkbox"]:checked { accent-color: var(--bs-primary, #082944); } /* ============================================================ 5. BUTTONS Brand guide button hierarchy: Primary Action → Orange fill / white text / shadow-cta (.btn-action / .btn-warning) Secondary → White fill / navy stroke (.btn-outline-primary) Data/Nav → Blue fill / white text (.btn-info) Legacy primary → Navy fill / white text (.btn-primary) ============================================================ */ /* Base */ .btn { font-family: var(--font-base); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none !important; border-radius: var(--radius-md); padding: 0.5rem 1.25rem; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .btn:hover { text-decoration: none !important; } /* Primary CTA — Orange (brand "Primary · Action") */ .btn-action, .btn-warning { background-color: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; box-shadow: var(--shadow-cta); } .btn-action:hover, .btn-action:focus, .btn-action:active, .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.dropdown-toggle.show { background-color: var(--orange-110) !important; border-color: var(--orange-110) !important; color: #fff !important; box-shadow: var(--shadow-cta); } /* Legacy Primary — Navy */ .btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.dropdown-toggle.show { background-color: var(--bs-primary-hover) !important; border-color: var(--bs-primary-hover) !important; color: #fff !important; } /* Secondary — White + Navy stroke (brand "Secondary · Confirm") */ .btn-secondary { background-color: var(--full-white) !important; border: 2px solid var(--navy) !important; color: var(--navy) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .btn-secondary.dropdown-toggle.show { background-color: var(--blue-tint) !important; border-color: var(--navy) !important; color: var(--navy) !important; } /* Info / Data — Blue (brand "data-led navigation") */ .btn-info { background-color: var(--bs-info) !important; border-color: var(--bs-info) !important; color: #fff !important; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.dropdown-toggle.show { background-color: var(--bs-info-hover) !important; border-color: var(--bs-info-hover) !important; color: #fff !important; } /* Danger */ .btn-danger { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: #fff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.dropdown-toggle.show { background-color: var(--bs-danger-hover) !important; border-color: var(--bs-danger-hover) !important; color: #fff !important; } /* Success */ .btn-success { background-color: var(--bs-success) !important; border-color: var(--bs-success) !important; color: #fff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.dropdown-toggle.show { background-color: var(--bs-success-hover) !important; border-color: var(--bs-success-hover) !important; color: #fff !important; } /* Ghost / Tertiary — inline low-emphasis */ .btn-ghost { background-color: transparent !important; border: none !important; color: var(--slate-gray) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .btn-ghost:hover { color: var(--navy) !important; } /* Rankings button on Team Summary pages */ .btn-rankings { background-color: var(--blue-tint) !important; color: var(--navy) !important; border: 2px solid var(--navy) !important; font-family: var(--font-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.4rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.95rem; transition: background 0.15s, color 0.12s; } .btn-rankings:hover, .btn-rankings:focus { background-color: var(--orange) !important; color: #fff !important; border-color: var(--orange) !important; text-decoration: none; } /* ============================================================ 6. PILLS & CHIPS (brand guide §04) ============================================================ */ /* Sport tabs */ .pill-sport { display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); font-family: var(--font-base); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; background-color: var(--frost); color: var(--navy); border: none; cursor: pointer; transition: background-color 0.15s, color 0.15s; text-decoration: none; } .pill-sport:hover, .pill-sport.active { background-color: var(--navy); color: var(--full-white); text-decoration: none; } /* Filter chips */ .chip-filter { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-family: var(--font-base); font-weight: 600; font-size: 0.8125rem; background-color: var(--blue-tint); color: var(--navy); border: 1px solid var(--frost); cursor: pointer; transition: background-color 0.15s, color 0.15s; } .chip-filter:hover, .chip-filter.active { background-color: var(--navy); color: var(--full-white); } /* Status chips — Adjusted (hollow accent) */ .chip-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-family: var(--font-base); font-weight: 700; font-size: 0.8rem; border: 1.5px solid var(--orange); color: var(--orange); background: transparent; } /* Win / Loss chips */ .chip-win { background-color: var(--green-win); color: #fff; border-radius: var(--radius-pill); padding: 0.2rem 0.6rem; font-weight: 700; font-size: 0.8rem; } .chip-loss { background-color: var(--red-loss); color: #fff; border-radius: var(--radius-pill); padding: 0.2rem 0.6rem; font-weight: 700; font-size: 0.8rem; } /* ============================================================ 7. ALERTS & BADGES ============================================================ */ .alert-primary { background-color: var(--bs-primary); color: #fff; } .alert-secondary { background-color: var(--bs-secondary); color: #fff; } .alert-info { background-color: var(--bs-info); color: #fff; } .alert-success { background-color: var(--bs-success); color: #fff; } .alert-danger { background-color: var(--bs-danger); color: #fff; } .alert-warning { background-color: var(--bs-warning); color: #000; } .alert-dark { background-color: var(--bs-dark); color: #fff; } .alert-light { background-color: var(--bs-light); color: #000; } .badge-primary { background-color: var(--bs-primary); } .badge-secondary { background-color: var(--bs-secondary); } .badge-info { background-color: var(--bs-info); } .badge-success { background-color: var(--bs-success); } .badge-danger { background-color: var(--bs-danger); } .badge-warning { background-color: var(--bs-warning); color: #000; } .badge-dark { background-color: var(--bs-dark); } .badge-light { background-color: var(--bs-light); color: #000; } /* ============================================================ 8. TABLE CONTEXTUAL CLASSES ============================================================ */ .table-primary { --bs-table-bg: var(--bs-primary); --bs-table-color: #fff; } .table-secondary { --bs-table-bg: var(--bs-secondary); --bs-table-color: #fff; } .table-info { --bs-table-bg: var(--blue-tint); --bs-table-color: #000; } .table-success { --bs-table-bg: var(--bs-success); --bs-table-color: #fff; } .table-warning { --bs-table-bg: var(--bs-warning); --bs-table-color: #000; } .table-danger { --bs-table-bg: var(--bs-danger); --bs-table-color: #fff; } .table-dark { --bs-table-bg: var(--bs-dark); --bs-table-color: #fff; } .table-light { --bs-table-bg: var(--frost); --bs-table-color: #000; } .table-no-border td, .table-no-border th { border: none !important; } /* ============================================================ 9. NAVBAR ============================================================ */ .navbar { background-color: var(--navy); } .navbar-brand, .navbar-nav .nav-link { color: #fff !important; } .navbar-versus { font-family: var(--font-base); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .navbar-versus .nav-link { color: #ffffff !important; padding: 0.5rem 1rem; transition: color 0.2s ease-in-out; } .navbar-versus .nav-link:hover, .navbar-versus .nav-link:focus { color: var(--orange) !important; text-decoration: none !important; } .navbar-toggler { background-color: transparent; border: none; } .navbar-toggler-icon { background-image: url("data:image/svg+xml;utf8,"); } .navbar-versus .dropdown-menu .dropdown-item:active { background-color: var(--bs-primary) !important; color: #fff !important; } @media (max-width: 991.98px) { .navbar-versus { font-size: 0.75rem; } } .navbar-versus a, .navbar-versus a:hover, .navbar-versus a:focus { text-decoration: none !important; } /* ============================================================ 10. FOOTER ============================================================ */ .footer { background-color: var(--navy); color: #fff; padding: 1rem 0; text-align: center; font-size: 0.9rem; } /* ============================================================ 11. CARDS (brand guide §04 — radius-md, shadow/card) ============================================================ */ .btn, .card-header { font-family: var(--font-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .card { border-radius: var(--radius-md); border: 0px solid var(--frost); background-color: var(--full-white); box-shadow: var(--shadow-card); margin-bottom: 1.5rem; } .card-header { font-weight: 700; font-size: 1.05rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--frost); background-color: var(--blue-accent) !important; color: var(--full-white); border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { color: var(--full-white) !important; } .card-body { padding: 1rem; background-color: var(--full-white); color: var(--navy); } .card-footer { padding: 0.75rem 1rem; background-color: var(--off-white); border-top: 1px solid var(--frost); font-size: 0.9rem; color: var(--slate-gray); border-bottom-left-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; } .card-title { margin: 0; font-size: 1.15rem; } /* Card variants */ .card-primary { border-color: var(--bs-primary); } .card-primary > .card-header { background-color: var(--bs-primary); color: var(--full-white); } .card-info { border-color: var(--bs-info); } .card-info > .card-header { background-color: var(--bs-info); color: var(--full-white); } .card-success { border-color: var(--bs-success); } .card-success > .card-header { background-color: var(--bs-success); color: var(--full-white); } .card-warning { border-color: var(--bs-warning); } .card-warning > .card-header { background-color: var(--bs-warning); color: var(--full-white); } .card-danger { border-color: var(--bs-danger); } .card-danger > .card-header { background-color: var(--bs-danger); color: var(--full-white); } /* ============================================================ 12. LIST GROUP ============================================================ */ .list-group { border: none; } .list-group-item { border: none; background-color: transparent; padding: 0.75rem 1.25rem; font-size: 0.95rem; color: var(--navy); transition: background-color 0.15s ease-in-out; } .list-group-item:hover { background-color: var(--yellow-tint); color: var(--bs-primary); cursor: pointer; } .list-group-item strong { display: block; margin-bottom: 0.1rem; font-weight: 600; color: var(--navy); } .list-group-item small { color: var(--bs-secondary); font-size: 0.85rem; } .list-group-item .link-text { line-height: 1.2; } .link-subtext { display: block; font-size: 0.85rem; color: var(--bs-secondary); line-height: 1.1; margin-top: 0; } /* ============================================================ 13. RANKINGS TABLE ============================================================ */ .rankings-table td, .rankings-table th { color: var(--navy) !important; } .rankings-table { --bs-table-striped-bg: var(--blue-tint); border-top: 3px solid var(--blue-accent); background-color: var(--full-white); color: var(--navy); font-size: 0.95rem; font-variant-numeric: tabular-nums; } .rankings-table thead th { background-color: var(--navy); color: var(--full-white) !important; font-weight: 700; font-size: var(--text-label-cap); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--frost); padding: 0.75rem 0.5rem; white-space: nowrap; } /* Used on Rankings pages */ @media (min-width: 992px) { .pt-lg-6 { padding-top: 5rem; } } /* ============================================================ 14. TEAM SUMMARY TABLES ============================================================ */ /* Key-Value Table */ .team-summary-key-value-table { width: 100%; margin-bottom: 1.5rem; background-color: var(--full-white); color: var(--navy); font-size: 0.95rem; border-collapse: collapse; border-left: 3px solid var(--blue-accent); } .team-summary-key-value-table tbody tr:nth-child(even) { background-color: var(--blue-tint); } .team-summary-key-value-table th[scope="row"], .team-summary-key-value-table td:first-child { font-weight: 600; color: var(--navy); width: 50%; white-space: nowrap; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--frost); background-color: var(--blue-tint); } .team-summary-key-value-table td:last-child { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--frost); } /* Grid Table */ .team-summary-grid-table td, .team-summary-grid-table th { color: var(--navy) !important; } .team-summary-grid-table { --bs-table-striped-bg: var(--blue-tint); border-top: 0; background-color: var(--full-white); color: var(--navy); font-size: 0.95rem; font-variant-numeric: tabular-nums; } .team-summary-grid-table thead th { background-color: var(--navy); color: var(--full-white) !important; font-weight: 700; font-size: var(--text-label-cap); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--frost); padding: 0.75rem 0.5rem; white-space: nowrap; } /* Highlight rows (e.g., ranked team) */ tr.highlight-row td { font-weight: 700; position: relative; } tr.highlight-row td:last-child::after { content: "\f0d9"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--orange); font-size: 1.75rem; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } /* ============================================================ 15. CENTER-LABEL COMPARISON TABLE (Simulator) ============================================================ */ .center-label-comparison-table { width: 100%; margin-bottom: 1.5rem; background-color: var(--full-white); color: var(--navy); font-size: 0.95rem; border-collapse: collapse; border-left: 3px solid var(--blue-accent); font-variant-numeric: tabular-nums; } .center-label-comparison-table tbody tr:nth-child(even) { background-color: var(--blue-tint); } .center-label-comparison-table thead th { background-color: var(--blue-accent); color: white; font-weight: 700; font-size: var(--text-label-cap); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem; border-bottom: 2px solid var(--frost); text-align: center; } .center-label-comparison-table td, .center-label-comparison-table th { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--frost); text-align: center; vertical-align: middle; word-wrap: break-word; } .center-label-comparison-table .center-label { font-weight: 600; color: var(--navy); background-color: var(--blue-tint); text-align: center; } .center-label-comparison-table:has(tr td:nth-child(3):last-child) { table-layout: fixed; } .center-label-comparison-table:has(tr td:nth-child(3):last-child) td, .center-label-comparison-table:has(tr td:nth-child(3):last-child) th { width: 33.33%; } .center-label-comparison-table tr td:nth-child(4):nth-last-child(3) { font-weight: 600; color: var(--navy); background-color: var(--blue-tint); width: 35%; } .center-label-comparison-table td:nth-child(-n+3), .center-label-comparison-table td:nth-child(n+5) { color: var(--navy); } /* ============================================================ 16. GRADE BOXES & CIRCLES ============================================================ */ .stacked-grade-box { width: 50px; height: 50px; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; box-shadow: var(--shadow-card); } .grade-square { width: 64px; height: 64px; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: bold; } .grade-letter { font-size: 20px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; } .grade-number { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; } .bigCircle { width: 120px; height: 120px; border-radius: 50%; font-size: 60px; color: #fff; line-height: 120px; text-align: center; background: var(--slate-gray); display: inline-block; font-weight: 900; font-variant-numeric: tabular-nums; } .grade-ovr-label { color: var(--navy); font-size: 0.82rem; font-family: var(--font-base); font-weight: 700; letter-spacing: 0.1em; margin-top: 34px; text-transform: uppercase; text-align: center; } /* ============================================================ 17. TEAM NAME DISPLAY STYLES ============================================================ */ /* Style 2 */ .team-name-2 { font-family: var(--font-base); font-weight: 900; font-size: 2.25rem; line-height: 1.4; color: var(--navy); letter-spacing: -0.02em; } .team-nickname-2 { font-family: var(--font-base); font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: var(--slate-gray); text-transform: uppercase; letter-spacing: 0.05em; } /* Style 3 */ .team-name-3 { font-family: var(--font-base); font-weight: 700; font-size: 1.75rem; color: var(--slate-gray); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 0; } .team-nickname-3 { font-family: var(--font-base); font-weight: 900; font-size: 2.0rem; color: var(--navy); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.3; margin-top: -2px; } /* Fighter name */ .fighter-name { color: var(--navy); font-family: var(--font-base); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.02em; display: block; position: relative; margin-bottom: 0.4rem; } .fighter-name::after { content: ""; display: block; width: 60px; height: 4px; background-color: var(--orange); margin-top: 0.5rem; margin-left: 0; } @media (max-width: 767.98px) { .fighter-name::after { margin-left: auto; margin-right: auto; } } .fighterRanking { color: var(--slate-gray); font-size: 0.8em; } /* ============================================================ 18. PREDICTIONS PAGE ============================================================ */ .predictions-page .card { margin-bottom: 20px !important; padding-bottom: 0 !important; } .predictions-page .table { margin-bottom: 0 !important; padding-bottom: 0 !important; } .info-box { background-color: var(--bs-light); border-left: 5px solid var(--bs-secondary); color: var(--navy); border-left-color: var(--bs-info); } .info-bestbets { border-left-color: var(--bs-success) !important; } .info-sliders { border-left-color: var(--bs-secondary) !important; } .win-indicator { color: var(--orange) !important; font-size: 1.6em; margin-right: 5px; vertical-align: middle; line-height: 1; } .scale-button { color: var(--full-white); font-size: 1.4em; vertical-align: middle; } .vegasLineParagraph { margin-left: 20px; } .plus-ev-bet { border: 0px solid var(--bs-success); border-radius: var(--radius-sm); color: var(--bs-success); } .plain-bet { border: 0px solid var(--bs-success); border-radius: var(--radius-sm); } /* ============================================================ 19. RANGE SLIDERS ============================================================ */ .slider { width: 200px; margin: 100px auto; } input[type="range"] { appearance: none; width: 100%; height: 10px; padding: 0; border-radius: var(--radius-pill); background: var(--navy); box-shadow: inset 0 1px 0 var(--navy), inset 0 -1px 0 var(--slate-gray); outline: none; } input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: var(--blue-accent); cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.2); transition: background-color 0.2s ease; } input[type="range"]:hover::-webkit-slider-thumb { background-color: var(--blue-110); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background-color: var(--blue-accent); cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.2); transition: background-color 0.2s ease; } input[type="range"]:hover::-moz-range-thumb { background-color: var(--blue-110); } input[type="range"]::-ms-thumb { width: 20px; height: 20px; border-radius: 50%; background-color: var(--blue-accent); cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.2); transition: background-color 0.2s ease; } input[type="range"]::-moz-range-track, input[type="range"]::-ms-track { background: transparent; border: none; } input[type="range"]::-ms-tooltip { display: none; } /* ============================================================ 20. DIVISION NAV ============================================================ */ .division-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; margin-bottom: 1.5rem; } .division-link { padding: 0.5rem 1rem; background-color: var(--off-white); border: 1px solid var(--navy); color: var(--navy); text-decoration: none; border-radius: var(--radius-sm); font-weight: 700; transition: all 0.2s ease; } .division-link:hover, .division-link:focus { background-color: var(--blue-accent); color: white; } .division-link.active { background-color: var(--navy); color: white; pointer-events: none; } /* ============================================================ 21. PROMO CTA CARDS & SIMULATOR CTA ============================================================ */ .promo-cta-card { background: var(--off-white); border-radius: var(--radius-md); font-size: 0.9rem; } .promo-cta-card .card-title { font-weight: 700; } .promo-cta-card ul li i { margin-top: 2px; } .promo-cta-card i.fa-check-circle { font-size: 1.1rem; line-height: 1; margin-top: 2px; } .simulator-cta { background-color: var(--off-white); padding: 1rem; margin-top: 2rem; border: none !important; border-top: none !important; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } /* Mobile sticky CTA bar */ .sticky-mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background-color: var(--full-white); padding: 0.75rem 1rem; border-top: 1px solid var(--frost); box-shadow: 0 -1px 6px rgba(8, 41, 68, 0.10); } /* ============================================================ 22. SIDEBARS ============================================================ */ .sidebar-left { background-color: #ffffff; border-right: 1px solid var(--frost); padding: 1rem; } .sidebar-right { background-color: #ffffff; padding: 1rem; border-left: 1px solid var(--frost); } /* ============================================================ 23. NEWS & ARTICLES ============================================================ */ .news-item { display: flex; align-items: center; margin-bottom: 20px; } .news-item-image { max-width: 100px; height: auto; margin-right: 15px; } .news-item-text { flex-grow: 1; } .news-item-title { font-size: 14px; margin: 0; } .news-item-meta { margin: 0; text-align: left; font-size: 12px; color: var(--slate-gray); } .news-item-date { font-size: 12px; } /* Article items */ .article-item { display: flex; flex-direction: column; margin-bottom: 20px; border-bottom: 1px solid var(--frost); padding-bottom: 10px; } .article-title { font-size: 16px; margin: 0 0 5px 0; font-weight: bold; } .article-title a { text-decoration: none; } .article-title a:hover { text-decoration: underline; } .article-meta { font-size: 12px; color: var(--slate-gray); margin: 0; margin-bottom: 30px; } .author-name { font-weight: bold; } .article-date { font-style: italic; } .article-intro-text { font-size: 1.2em; font-weight: bold; } .view-more { text-align: center; margin-top: 10px; } .view-more a { display: inline-block; padding: 8px 12px; background-color: var(--blue-accent); color: #fff; text-decoration: none; font-size: 14px; border-radius: var(--radius-sm); transition: background-color 0.3s ease; } .view-more a:hover { background-color: var(--navy); } /* Author bio */ .author-bio { border-top: 1px solid var(--frost); padding: 20px 0; overflow: auto; } .author-bio img { float: left; margin-right: 20px; border-radius: 50%; width: 100px; height: 100px; } .author-bio p { margin: 0; } .article-update { border-left: 5px solid var(--orange); background-color: var(--blue-tint); padding: 15px; margin: 20px 0; } .article-update h3 { font-size: 20px; margin-bottom: 10px; color: var(--orange) !important; } .article-update h3 span { font-weight: normal; color: var(--navy); } .article-update p { font-size: 16px; color: var(--navy); line-height: 1.5; } /* ============================================================ 24. ACCORDION ============================================================ */ .accordion-button { background-color: var(--blue-tint); color: var(--navy); font-weight: 700; border: none; box-shadow: none; } .accordion-button:not(.collapsed) { background-color: var(--blue-accent); color: var(--full-white); } .accordion-body { background-color: var(--off-white); color: var(--navy); border-top: 1px solid var(--frost); } .accordion-body ul { padding-left: 1.2rem; margin-bottom: 0; } .accordion-body li { margin-bottom: 0.5rem; } /* ============================================================ 25. TESTIMONIAL CARDS ============================================================ */ .testimonial-card { background-color: var(--full-white); border-color: var(--bs-info); transition: box-shadow 0.2s; border-width: 0px; border-style: solid; border-radius: var(--radius-md); } .testimonial-card:hover { box-shadow: var(--shadow-sheet); } .testimonial-card .card-body { background-color: var(--blue-tint); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 1.25rem; padding-bottom: 1rem; } .testimonial-card .card-body p { font-size: 0.95rem; color: var(--navy); margin-bottom: 0; } .testimonial-card .card-footer { background-color: var(--frost); border-top: 1px solid var(--frost); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); padding: 0.75rem 1.25rem; } .bg-testimonial-footer { background-color: var(--frost); } .testimonial-card img { border: 2px solid var(--bs-info); } .testimonial-initials { width: 60px; height: 60px; font-weight: 700; font-size: 1.5rem; font-family: var(--font-base); border: 2px solid var(--bs-info); letter-spacing: 0.05em; user-select: none; } .testimonials-title { color: var(--bs-primary); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } /* ============================================================ 26. LOGIN FORM ============================================================ */ .loginForm { background-color: var(--blue-tint); color: var(--navy); padding: 2rem; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .loginForm .form-group { margin-bottom: 1rem; } .loginForm .form-control { background-color: var(--full-white); border: 1px solid var(--frost); border-radius: var(--radius-sm); color: var(--navy); } .loginForm .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(8, 41, 68, 0.15); } .loginForm label, .loginForm .form-check-label { color: var(--slate-gray); } .loginForm .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; font-weight: 700; } .loginForm .btn-primary:hover { background-color: var(--bs-primary-hover); border-color: var(--bs-primary-hover); } .loginForm .form-group:last-of-type { margin-top: 1rem; } /* ============================================================ 27. MISC UTILITIES ============================================================ */ .checkbox input[type="checkbox"] { margin-right: 8px; } .disclaimer-box { background-color: var(--bs-secondary); color: #fff; border: none; padding: 0 15px; margin-top: 50px; font-size: 14px; text-align: center; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; min-height: 60px; } .disclaimer-box p { margin: 0; } .equation { text-indent: 20px; font-family: "JetBrains Mono", "Courier New", monospace; /* brand spec: mono for technical */ font-size: 16px; font-weight: bold; text-align: center; margin: 10px; padding: 5px; background-color: var(--blue-tint); border: 1px solid var(--frost); line-height: 1.5; } .swing-row { position: relative; } .swing-row::after { content: "⬌"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 1.6rem; pointer-events: none; }