/* ───────────────────────────────────────────────────────────────────────────── capy-polish.css — visual refinement layer Loaded last in on every page. Upgrades visual quality only — never overrides layout, spacing, or semantic structure. ───────────────────────────────────────────────────────────────────────────── */ /* ── EASING + SHADOW TOKENS ──────────────────────────────────────────────────── */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --dur-fast: 0.14s; --dur: 0.20s; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.10); --shadow-card-green: 0 2px 8px rgba(22, 163, 74, 0.12), 0 6px 24px rgba(22, 163, 74, 0.08); } /* ── FONT SMOOTHING ──────────────────────────────────────────────────────────── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── TABULAR NUMBERS for all monospace data ──────────────────────────────────── */ .stat-value, .gc-col-odds, .hstat-value, .pick-ev-num, .odds-cell, .gc-book-price, .longshot-payout-num, .parlay-payout-num, [class*="mono"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── SCROLLBARS ──────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.24); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); } /* ── FOCUS RING ──────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--green, #16A34A); outline-offset: 2px; border-radius: 4px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* ── BODY — subtle background depth ─────────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 65% 45% at 10% 25%, rgba(22, 163, 74, 0.028) 0%, transparent 100%), radial-gradient(ellipse 55% 35% at 90% 75%, rgba(186, 117, 23, 0.022) 0%, transparent 100%); pointer-events: none; z-index: -1; } [data-theme="dark"] body::before { background: radial-gradient(ellipse 65% 45% at 10% 25%, rgba(34, 197, 94, 0.04) 0%, transparent 100%), radial-gradient(ellipse 55% 35% at 90% 75%, rgba(234, 179, 8, 0.03) 0%, transparent 100%); } /* ── NAV — glass effect ──────────────────────────────────────────────────────── */ nav { backdrop-filter: blur(14px) saturate(1.5) !important; -webkit-backdrop-filter: blur(14px) saturate(1.5) !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important; } [data-theme="dark"] nav { background: rgba(15, 17, 23, 0.93) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* ── LOGO MARK ───────────────────────────────────────────────────────────────── */ .logo-mark { background: linear-gradient(145deg, #fdf3e3 0%, #efd498 100%) !important; box-shadow: 0 1px 3px rgba(186, 117, 23, 0.20), inset 0 1px 0 rgba(255,255,255,0.55) !important; } /* ── LIVE DOT — richer pulse ─────────────────────────────────────────────────── */ .live-dot { width: 6px !important; height: 6px !important; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); animation: live-pulse 2.2s ease-in-out infinite !important; } @keyframes live-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); } 50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(22,163,74,0.04); } } /* ── PRIMARY BUTTON (Go Sharp / nav) ─────────────────────────────────────────── */ .btn-small { background: linear-gradient(175deg, #1cbf5a 0%, #14a048 100%) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease !important; } .btn-small:hover { opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32), 0 1px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.14) !important; } .btn-small:active { transform: translateY(0px) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.15), inset 0 2px 4px rgba(0,0,0,0.15) !important; } /* ── HERO BUTTON (index.html amber CTA) ──────────────────────────────────────── */ .btn-hero { background: linear-gradient(175deg, #cc8c22 0%, #b4711a 100%) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 4px 18px rgba(186,117,23,0.24), inset 0 1px 0 rgba(255,255,255,0.12) !important; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) !important; } .btn-hero:hover { opacity: 1 !important; transform: translateY(-2px); box-shadow: 0 6px 28px rgba(186,117,23,0.38), 0 1px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.12) !important; } .btn-hero:active { transform: translateY(0) !important; } /* ── MOBILE MENU GO PRO BUTTON ───────────────────────────────────────────────── */ .mobile-menu-gopro { background: linear-gradient(175deg, #1cbf5a 0%, #14a048 100%) !important; box-shadow: 0 2px 10px rgba(22,163,74,0.24) !important; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease !important; } .mobile-menu-gopro:hover { opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(22,163,74,0.32) !important; } /* ── GAME CARDS ──────────────────────────────────────────────────────────────── */ .game-card { box-shadow: var(--shadow-card) !important; border-color: rgba(0, 0, 0, 0.07) !important; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out) !important; } .game-card:hover { box-shadow: var(--shadow-card-hover) !important; border-color: var(--green, #16A34A) !important; transform: translateY(-2px) !important; } .game-card.best-value { box-shadow: var(--shadow-card-green) !important; border-color: var(--green, #16A34A) !important; } .game-card.best-value:hover { box-shadow: 0 4px 12px rgba(22,163,74,0.18), 0 12px 32px rgba(22,163,74,0.12) !important; } /* dark mode cards */ [data-theme="dark"] .game-card { border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.32) !important; } [data-theme="dark"] .game-card:hover { border-color: #22C55E !important; box-shadow: 0 3px 8px rgba(0,0,0,0.55), 0 12px 32px rgba(0,0,0,0.40) !important; } /* ── STATS ROW (odds.html top bar) ───────────────────────────────────────────── */ .stats-row { box-shadow: var(--shadow-card) !important; border-color: rgba(0,0,0,0.07) !important; } [data-theme="dark"] .stats-row { border-color: rgba(255,255,255,0.07) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.32) !important; } /* ── HSTAT CARDS (record.html) ───────────────────────────────────────────────── */ .hstat { box-shadow: var(--shadow-card) !important; border-color: rgba(0,0,0,0.06) !important; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; } .hstat:hover { box-shadow: var(--shadow-card-hover) !important; border-color: rgba(0,0,0,0.12) !important; } /* ── FILTER BUTTONS ──────────────────────────────────────────────────────────── */ .filter-btn { transition: all var(--dur-fast) var(--ease-out) !important; } .filter-btn:hover { transform: translateY(-0.5px); } .filter-btn.active { box-shadow: 0 1px 4px rgba(22, 163, 74, 0.22) !important; } /* ── GC BET BUTTON ───────────────────────────────────────────────────────────── */ .gc-bet-btn { background: linear-gradient(175deg, #1cbf5a 0%, #14a048 100%) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) !important; } .gc-bet-btn:hover { opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(22,163,74,0.30), inset 0 1px 0 rgba(255,255,255,0.12) !important; } [data-theme="dark"] .gc-bet-btn { background: linear-gradient(175deg, #22C55E 0%, #16a34a 100%) !important; color: #052E16 !important; } /* ── ODDS CELL BEST — gradient tint ─────────────────────────────────────────── */ .odds-cell { transition: all var(--dur-fast) var(--ease-out) !important; } .odds-cell.best { background: linear-gradient(135deg, #f0fdf4 0%, #d8f5e4 100%) !important; } [data-theme="dark"] .odds-cell.best { background: linear-gradient(135deg, rgba(34,197,94,0.14) 0%, rgba(34,197,94,0.22) 100%) !important; } /* ── EV BADGES ───────────────────────────────────────────────────────────────── */ .ev-strong, .ev-pos { box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18); } /* ── PARLAY CARDS ────────────────────────────────────────────────────────────── */ .parlay-card { box-shadow: var(--shadow-card) !important; border-color: rgba(0,0,0,0.07) !important; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; } .parlay-card--value { box-shadow: var(--shadow-card-green) !important; } /* ── NAV PRIMARY PILL (odds.html — Live Odds / Props) ────────────────────────── */ .nav-link--primary { transition: all var(--dur-fast) var(--ease-out) !important; } .nav-link--primary:hover { transform: translateY(-0.5px); box-shadow: 0 2px 8px rgba(0,0,0,0.09); } /* ── SPORT TAGS — sharper ────────────────────────────────────────────────────── */ .sport-tag { font-weight: 600; letter-spacing: 0.04em; } /* ── GC SECTION BORDERS — softer ────────────────────────────────────────────── */ .gc-header, .gc-summary, .gc-allbooks, .gc-actions { border-color: rgba(0,0,0,0.06) !important; } [data-theme="dark"] .gc-header, [data-theme="dark"] .gc-summary, [data-theme="dark"] .gc-allbooks, [data-theme="dark"] .gc-actions { border-color: rgba(255,255,255,0.05) !important; } /* ── PARLAY TOAST ─────────────────────────────────────────────────────────────── */ .parlay-toast { border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.20) !important; } /* ── PAGINATION BUTTONS (odds.html) ──────────────────────────────────────────── */ .pag-btn { transition: all var(--dur-fast) var(--ease-out) !important; } .pag-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important; } /* ── RECORD PAGE — pick cards ────────────────────────────────────────────────── */ .pick-card { box-shadow: var(--shadow-card) !important; border-color: rgba(0,0,0,0.07) !important; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; } .pick-card:hover { box-shadow: var(--shadow-card-hover) !important; } /* ── PROPS PAGE — prop cards ─────────────────────────────────────────────────── */ .prop-card, .prop-group { box-shadow: var(--shadow-card) !important; border-color: rgba(0,0,0,0.07) !important; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; } .prop-card:hover { box-shadow: var(--shadow-card-hover) !important; border-color: rgba(0,0,0,0.13) !important; } /* ── SORT TOGGLE BUTTONS ─────────────────────────────────────────────────────── */ .sort-toggle-btn { transition: all var(--dur-fast) var(--ease-out) !important; } /* ── MOBILE MENU LINKS ───────────────────────────────────────────────────────── */ .mobile-menu-link { transition: background var(--dur-fast) var(--ease-out) !important; } /* ── THEME TOGGLE ────────────────────────────────────────────────────────────── */ .theme-toggle-btn { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out) !important; } .theme-toggle-btn:hover { opacity: 1 !important; transform: rotate(12deg) scale(1.05); } /* ── SELECTION HIGHLIGHT ─────────────────────────────────────────────────────── */ ::selection { background: rgba(22, 163, 74, 0.18); color: inherit; }