/* ───────────────────────────────────────────────────────────────── Predixsport Design System — v1 (May 2026) Single source of truth for tokens, typography, and base layout. Loaded AFTER Bootstrap 5.3 in ; overrides Bootstrap CSS vars via :root so all .btn / .card / .dropdown-menu classes inherit the dark-refined palette without template churn. Page-specific overrides live in: css/components.css — .ds-* reusable components css/landing.css — landing page (Phase B) css/predictions.css — predictions hubs (Phase C) ───────────────────────────────────────────────────────────────── */ /* ── 1. Web fonts (CSP already allows fonts.googleapis.com) ────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── 2. Design tokens ─────────────────────────────────────────── */ :root { /* Surface scale (deep → elevated) */ --surface-0: #0B0D12; /* page bg */ --surface-1: #11141B; /* card bg */ --surface-2: #181C25; /* elevated card / hover */ --surface-3: #232836; /* input / well / table-hover */ /* Borders */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); /* Text */ --text-primary: #F2F4F8; --text-secondary: #B4BAC6; --text-muted: #7C8499; /* Brand */ --accent: #FF9F1C; --accent-hover: #FFB347; --accent-soft: rgba(255,159,28,0.08); --accent-soft-strong: rgba(255,159,28,0.18); --accent-on: #1A1206; /* text on solid accent */ --accent-rgb: 255, 159, 28; /* Sport accents — derived; live on dark */ --sport-nba: #4F8DFF; --sport-nba-soft: rgba(79,141,255,0.10); --sport-football: #43C18A; --sport-football-soft: rgba(67,193,138,0.10); --sport-tennis: #F2784B; --sport-tennis-soft:rgba(242,120,75,0.10); /* Semantic */ --positive: #38D49A; --negative: #F35E5E; --info: #5BB3FF; --warning: #FFB347; /* Typography */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: clamp(2rem, 4.5vw, 3.25rem); --fs-h1: clamp(1.6rem, 2.8vw, 2.2rem); --fs-h2: 1.4rem; --fs-h3: 1.15rem; --fs-body: 1rem; --fs-meta: 0.85rem; --fs-micro: 0.75rem; /* Spacing — 8 pt scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Shadow */ --shadow-1: 0 1px 2px rgba(0,0,0,0.35); --shadow-2: 0 4px 16px rgba(0,0,0,0.45); --shadow-3: 0 12px 36px rgba(0,0,0,0.55); --shadow-pop:0 8px 32px rgba(255,159,28,0.18); /* Motion */ --t-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Bootstrap 5.3 variable overrides ────────────────────── */ --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-primary); --bs-body-font-family: var(--font-ui); --bs-body-font-size: var(--fs-body); --bs-body-line-height: 1.6; --bs-body-color-rgb: 242, 244, 248; --bs-body-bg-rgb: 11, 13, 18; --bs-emphasis-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-muted); --bs-tertiary-bg: var(--surface-2); --bs-tertiary-bg-rgb: 24, 28, 37; --bs-secondary-bg: var(--surface-2); --bs-border-color: var(--border-default); --bs-border-color-translucent: var(--border-subtle); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent-hover); --bs-link-hover-color-rgb: 255, 179, 71; --bs-card-bg: var(--surface-1); --bs-card-color: var(--text-primary); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: var(--surface-2); --bs-card-cap-color: var(--text-primary); --bs-dropdown-bg: var(--surface-2); --bs-dropdown-color: var(--text-primary); --bs-dropdown-border-color: var(--border-default); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-bg: var(--surface-3); --bs-dropdown-link-hover-color: var(--accent); --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-link-active-color: var(--accent-on); --bs-dropdown-header-color: var(--text-muted); --bs-dropdown-divider-bg: var(--border-subtle); --bs-modal-bg: var(--surface-1); --bs-modal-color: var(--text-primary); --bs-modal-border-color: var(--border-default); --bs-modal-header-border-color: var(--border-subtle); --bs-modal-footer-border-color: var(--border-subtle); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-subtle); --bs-table-striped-bg: rgba(255,255,255,0.025); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--surface-3); --bs-table-hover-color: var(--text-primary); --bs-nav-link-color: var(--text-secondary); --bs-nav-link-hover-color: var(--accent); --bs-nav-tabs-border-color: var(--border-subtle); --bs-nav-tabs-link-active-bg: var(--surface-2); --bs-nav-tabs-link-active-color: var(--accent); --bs-form-control-bg: var(--surface-3); --bs-form-control-color: var(--text-primary); --bs-form-control-border-color: var(--border-default); --bs-form-control-placeholder-color: var(--text-muted); --bs-breadcrumb-divider-color: var(--text-muted); --bs-breadcrumb-item-active-color: var(--text-muted); --bs-heading-color: var(--text-primary); } /* ── 3. Base reset + typography ───────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-ui); color: var(--text-primary); background-color: var(--surface-0); background-image: radial-gradient(ellipse at 0% 0%, rgba(79,141,255,0.04) 0%, transparent 40%), radial-gradient(ellipse at 100% 100%, rgba(255,159,28,0.04) 0%, transparent 40%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; padding-top: 76px; /* navbar offset — unchanged */ } @media (max-width: 991.98px) { body { padding-top: 62px; } } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-ui); color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; } p { color: var(--text-primary); line-height: 1.7; } small, .small, .text-muted { color: var(--text-muted) !important; } /* Tabular numerals — use mono for numeric data */ .font-mono, .num, code, kbd, pre, samp { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } ::selection { background: var(--accent-soft-strong); color: var(--text-primary); } /* Bootstrap text-* utility re-mapping for the dark theme */ .text-dark { color: var(--text-primary) !important; } .text-body { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-white-50, .text-muted { color: var(--text-muted) !important; } .bg-white { background-color: var(--surface-1) !important; color: var(--text-primary); } .bg-light { background-color: var(--surface-2) !important; color: var(--text-primary); } .bg-dark { background-color: var(--surface-0) !important; } .border { border-color: var(--border-default) !important; } /* Drop the default page-background overlay everywhere */ .page-background { display: none !important; } /* ── 4. Links ─────────────────────────────────────────────────── */ a { color: var(--accent); text-decoration: none; transition: color var(--t-quick); } a:hover { color: var(--accent-hover); } /* ── 5. Buttons — restyle Bootstrap variants ─────────────────── */ .btn { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-md); padding: 0.55rem 1.25rem; border-width: 1.5px; transition: transform var(--t-quick), background-color var(--t-quick), color var(--t-quick), border-color var(--t-quick), box-shadow var(--t-quick); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; } .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--accent-on); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-on) !important; transform: translateY(-1px); box-shadow: var(--shadow-pop); } .btn-outline-light { background-color: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active { background-color: var(--surface-2); border-color: var(--text-primary); color: var(--text-primary); } .btn-outline-warning { background-color: transparent; border-color: var(--accent); color: var(--accent); } .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-on); transform: translateY(-1px); } .btn-outline-info { background-color: transparent; border-color: var(--sport-nba); color: var(--sport-nba); } .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active { background-color: var(--sport-nba); border-color: var(--sport-nba); color: var(--surface-0); transform: translateY(-1px); } .btn-outline-success { background-color: transparent; border-color: var(--positive); color: var(--positive); } .btn-outline-success:hover { background-color: var(--positive); border-color: var(--positive); color: var(--surface-0); } .btn-outline-secondary { background-color: transparent; border-color: var(--border-strong); color: var(--text-secondary); } .btn-outline-secondary:hover { background-color: var(--surface-2); color: var(--text-primary); } .btn-link { color: var(--accent); } .btn-link:hover { color: var(--accent-hover); } /* ── 6. Cards (Bootstrap) ────────────────────────────────────── */ .card { background-color: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-primary); box-shadow: var(--shadow-1); } .card-header, .card-footer { background-color: var(--surface-2); border-color: var(--border-subtle); color: var(--text-primary); } /* ── 7. Tables ───────────────────────────────────────────────── */ .table { color: var(--text-primary); border-color: var(--border-subtle); } .table > thead { background-color: var(--surface-2); } .table > thead th { color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.06em; border-bottom: 1px solid var(--border-default); } .table > tbody tr { border-color: var(--border-subtle); } .table > tbody td { color: var(--text-primary); border-color: var(--border-subtle); vertical-align: middle; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.018); color: var(--text-primary); } .table-hover > tbody > tr:hover > * { background-color: var(--surface-3); color: var(--text-primary); } /* ── 8. Forms ────────────────────────────────────────────────── */ .form-control, .form-select { background-color: var(--surface-3); color: var(--text-primary); border-color: var(--border-default); border-radius: var(--radius-md); } .form-control:focus, .form-select:focus { background-color: var(--surface-3); color: var(--text-primary); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-control::placeholder { color: var(--text-muted); } .form-label, .form-check-label { color: var(--text-secondary); } /* ── 9. Alerts ───────────────────────────────────────────────── */ .alert { border-radius: var(--radius-md); border-width: 1px; border-style: solid; } .alert-success { background-color: rgba(56, 212, 154, 0.10); border-color: rgba(56, 212, 154, 0.30); color: var(--positive); } .alert-info { background-color: rgba(91, 179, 255, 0.10); border-color: rgba(91, 179, 255, 0.30); color: var(--info); } .alert-warning { background-color: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.30); color: var(--warning); } .alert-danger { background-color: rgba(243, 94, 94, 0.10); border-color: rgba(243, 94, 94, 0.30); color: var(--negative); } /* ── 10. Badges ──────────────────────────────────────────────── */ .badge { font-weight: 600; letter-spacing: 0.02em; border-radius: var(--radius-sm); padding: 0.35em 0.6em; } .badge.bg-primary { background-color: var(--accent) !important; color: var(--accent-on); } .badge.bg-secondary { background-color: var(--surface-3) !important; color: var(--text-secondary); } /* ── 11. Breadcrumb ──────────────────────────────────────────── */ .breadcrumb-nav { background-color: transparent; border-bottom: 1px solid var(--border-subtle); margin-bottom: 2rem; padding: 0.75rem 0; } .breadcrumb { background: transparent; font-size: var(--fs-meta); margin-bottom: 0; padding: 0; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0 0.5rem; } .breadcrumb-item a { color: var(--accent); } .breadcrumb-item a:hover { color: var(--accent-hover); text-decoration: underline; } .breadcrumb-item.active { color: var(--text-muted); } /* ── 12. Modals ──────────────────────────────────────────────── */ .modal-content { background-color: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); } .modal-header { border-bottom-color: var(--border-subtle); } .modal-footer { border-top-color: var(--border-subtle); } .btn-close { filter: invert(1) grayscale(100%) brightness(180%); opacity: 0.7; } .btn-close:hover { opacity: 1; } /* ── 13. Dropdowns ───────────────────────────────────────────── */ .dropdown-menu { background-color: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--s-2); } .dropdown-menu-dark { background-color: var(--surface-2); border-color: var(--border-default); } .dropdown-item { color: var(--text-primary); border-radius: var(--radius-sm); padding: 0.45rem 0.75rem; font-size: var(--fs-meta); transition: background-color var(--t-quick), color var(--t-quick); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-3); color: var(--accent); } .dropdown-item.active, .dropdown-item:active { background-color: var(--accent); color: var(--accent-on); } .dropdown-header { color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; padding-top: 0.6rem; } .dropdown-divider { border-color: var(--border-subtle); } /* ── 14. Navbar (consolidates the 750-line inline mess) ──────── */ .custom-navbar { position: fixed; top: 0; width: 100%; z-index: 1030; background: rgba(11, 13, 18, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-subtle); padding: 0.7rem 0; transition: background-color var(--t-base), padding var(--t-base), box-shadow var(--t-base); } .custom-navbar.navbar-scrolled { background: rgba(11, 13, 18, 0.96); padding-top: 0.45rem; padding-bottom: 0.45rem; box-shadow: 0 1px 0 var(--border-default), var(--shadow-1); } .navbar-brand { color: var(--text-primary) !important; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.5px; padding: 0; margin: 0; display: flex; align-items: center; text-shadow: none; } .navbar-brand:hover { color: var(--text-primary) !important; } .navbar-logo { height: 35px; width: auto; min-width: 120px; transition: opacity var(--t-quick); } .navbar-brand:hover .navbar-logo { opacity: 0.92; } @media (max-width: 768px) { .navbar-logo { height: 28px; min-width: 100px; } .navbar-brand { font-size: 1.2rem; } } @media (min-width: 1200px) { .navbar-logo { height: 40px; min-width: 140px; } } .navbar .nav-link { color: var(--text-secondary) !important; font-weight: 500; padding: 0.5rem 0.9rem !important; margin: 0 0.1rem; border-radius: var(--radius-sm); font-size: 0.95rem; transition: color var(--t-quick), background-color var(--t-quick); } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--text-primary) !important; background-color: var(--surface-2); } .navbar .nav-link.active { color: var(--accent) !important; background-color: var(--accent-soft); } .navbar-toggler { border-color: var(--border-subtle); padding: 0.4rem 0.55rem; } .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-soft); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28242, 244, 248, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } @media (max-width: 991.98px) { .navbar-collapse { position: fixed; top: 62px; left: 0; right: 0; background: rgba(11, 13, 18, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-default); padding: 1rem; max-height: calc(100vh - 62px); overflow-y: auto; } .navbar .nav-link { padding: 0.7rem 0.9rem !important; } } /* Auth section (logged-in chip + sign-in button) */ .auth-section { display: flex; align-items: center; margin-left: 1rem; } .auth-user-name { color: var(--text-secondary); margin-left: 0.5rem; font-size: 0.9rem; font-weight: 500; } .auth-signin-btn { white-space: nowrap; font-size: 0.85rem; padding: 0.4rem 0.85rem; } @media (max-width: 991.98px) { .auth-section { margin: 0.75rem 1rem 0; padding: 0; } .auth-section .dropdown { width: 100%; } .auth-section .dropdown .dropdown-menu { position: static !important; width: 100%; transform: none !important; inset: auto !important; margin-top: 0.25rem; margin-bottom: 1rem; } .auth-signin-btn { width: 100%; justify-content: center; padding: 0.5rem 1rem; } } @media (max-width: 575.98px) { .auth-user-name { display: none; } } /* ── 15. Footer ──────────────────────────────────────────────── */ .footer { background-color: var(--surface-0); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 1.5rem 0; margin-top: 3rem; } .footer a { color: var(--text-secondary); text-decoration: none; transition: color var(--t-quick); } .footer a:hover { color: var(--accent); text-decoration: none; } /* Footer site-map grid (added with the landing redesign). 3-column layout on desktop + a brand column; collapses to 2-up on tablet, single column on mobile. Each column has a small uppercase title and a vertical list of links. */ .footer-grid .footer-col__title { color: var(--text-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.85rem; } .footer-grid .footer-list { margin: 0; } .footer-grid .footer-list li { margin-bottom: 0.45rem; line-height: 1.4; } .footer-grid .footer-list a { color: var(--text-secondary); font-size: 0.9rem; } .footer-grid .footer-list a:hover { color: var(--accent); } .footer-brand__name { color: var(--text-primary); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; } .footer-tagline { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0; max-width: 240px; line-height: 1.45; } .footer-legal a { font-size: 0.88rem; } @media (max-width: 575.98px) { .footer-grid .footer-col { margin-bottom: 0.5rem; } .footer-tagline { max-width: none; } .footer-legal { text-align: left !important; } } .social-link { display: inline-flex; align-items: center; margin-right: 1rem; color: var(--text-secondary); } .social-link:hover { color: var(--text-primary); } .x-logo { width: 20px; height: 20px; fill: currentColor; transition: transform var(--t-quick); } .x-logo:hover { transform: scale(1.1); } @media (max-width: 768px) { .x-logo { width: 18px; height: 18px; } } /* ── 16. Disclaimer block (was a stark white panel) ──────────── */ .disclaimer-container { background-color: var(--surface-0); border-top: 1px solid var(--border-subtle); } .disclaimer-header { cursor: pointer; padding: 0.5rem 0; position: relative; } .disclaimer-title { font-weight: 600; color: var(--text-muted); font-size: 0.95rem; } .disclaimer-icon { margin-left: 0.5rem; transition: transform var(--t-base); color: var(--text-muted); } [aria-expanded="true"] .disclaimer-icon { transform: rotate(-180deg); } .disclaimer-body { padding: 1.1rem 1.25rem; font-size: 0.9rem; color: var(--text-secondary); background-color: var(--surface-1); border-radius: var(--radius-md); border-left: 3px solid var(--accent); margin-bottom: 1rem; } .disclaimer-body p:first-of-type { font-weight: 600; color: var(--text-primary); } .disclaimer-body ul { margin-left: 1.5rem; margin-bottom: 1rem; } .disclaimer-body a { color: var(--accent); text-decoration: underline; } .disclaimer-body a:hover { color: var(--accent-hover); } @media (max-width: 768px) { .disclaimer-body { padding: 0.9rem 1rem; font-size: 0.85rem; } } /* ── 17. Cookie banner ───────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(11, 13, 18, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border-default); color: var(--text-primary); padding: 1rem; z-index: 1000; } .cookie-banner a { color: var(--accent); text-decoration: underline; } .cookie-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .cookie-buttons { display: flex; gap: 0.75rem; } .cookie-banner .btn-primary { padding: 0.45rem 1.1rem; font-size: 0.9rem; } .cookie-banner .btn-secondary { background-color: transparent; border: 1.5px solid var(--border-strong); color: var(--text-secondary); padding: 0.45rem 1.1rem; font-size: 0.9rem; } .cookie-banner .btn-secondary:hover { background-color: var(--surface-2); color: var(--text-primary); } @media (max-width: 768px) { .cookie-content { flex-direction: column; text-align: center; gap: 0.85rem; } } /* ── 18. Section helpers ─────────────────────────────────────── */ .ds-section { padding: var(--s-7) 0; } .ds-section--tight { padding: var(--s-6) 0; } .ds-section--hero { padding: var(--s-8) 0 var(--s-7); } .ds-eyebrow { display: inline-block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-soft-strong); padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); } .ds-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-default), transparent); border: 0; margin: var(--s-6) 0; } /* ── 19. Print ───────────────────────────────────────────────── */ @media print { body { background: #fff; color: #000; } .custom-navbar, .footer, .cookie-banner, .disclaimer-container { display: none; } }