/* ============================================================ Sport hub page (/sport// and /sport///) ------------------------------------------------------------ Theming rule: this page follows the site theme toggle, which sets [data-theme="dark"] on (see gioca_html/js/theme.js). Never use @media (prefers-color-scheme: dark) here: it ignores the user's explicit choice. Every colour goes through a --sl-* token so both themes are correct by construction. Before this file existed the page used inline hex colours (#1E3A8A headings, bg-opacity-10 badges) that either stayed unreadably dark in dark mode or were invisible outright: Bootstrap 5.0.2 (loaded in base.html) predates the bg-opacity-* utilities added in 5.1, so "bg-primary bg-opacity-10 text-primary" rendered as solid bg-primary text painted in the same primary colour. ============================================================ */ :root { --sl-surface: #ffffff; --sl-surface-muted: #f8fafc; --sl-surface-accent: #eff6ff; --sl-border: rgba(15, 23, 42, 0.08); --sl-text: #0f172a; --sl-text-secondary: #475569; --sl-text-muted: #64748b; --sl-accent: #3b82f6; --sl-accent-strong: #1e40af; --sl-accent-deep: #1e3a8a; --sl-badge-bg: rgba(30, 58, 138, 0.08); --sl-badge-text: #1e3a8a; --sl-badge-accent-bg: rgba(37, 99, 235, 0.12); --sl-badge-accent-text: #1d4ed8; } [data-theme="dark"] { /* Mirrors the site palette in gioca_html/css/theme.css so this page keeps the same layering as the rest of the app (page #0F172A, card #1E293B). */ --sl-surface: #1e293b; --sl-surface-muted: #172033; --sl-surface-accent: rgba(59, 130, 246, 0.14); --sl-border: rgba(255, 255, 255, 0.08); --sl-text: #f1f5f9; --sl-text-secondary: #cbd5e1; --sl-text-muted: #94a3b8; --sl-accent: #60a5fa; --sl-accent-strong: #93bbfc; --sl-accent-deep: #93bbfc; --sl-badge-bg: rgba(96, 165, 250, 0.16); --sl-badge-text: #93c5fd; --sl-badge-accent-bg: rgba(96, 165, 250, 0.22); --sl-badge-accent-text: #bfdbfe; } /* ── Section headings ── */ .sl-heading { color: var(--sl-accent-deep); } /* ============================================================ "Choose your city" cards (sport overview page) ============================================================ */ .sl-city-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .sl-city-name { color: var(--sl-text); } /* ============================================================ Result cards (sport + city page) ============================================================ */ .sl-card { background: var(--sl-surface); display: flex; flex-direction: column; } .sl-card-media { height: 152px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, var(--sl-surface-accent), var(--sl-surface-muted)); } .sl-card-media img { max-height: 110px; max-width: 80%; object-fit: contain; } .sl-card-placeholder i { font-size: 2.5rem; color: var(--sl-accent); opacity: 0.45; } .sl-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .sl-card-title { font-size: 1.05rem; margin: 0; } .sl-card-title a { color: var(--sl-accent-deep); text-decoration: none; } .sl-card-title a:hover { color: var(--sl-accent); } .sl-info-line { display: flex; align-items: flex-start; gap: 7px; color: var(--sl-text-secondary); font-size: 0.85rem; line-height: 1.35; margin: 0; } .sl-info-line i { flex-shrink: 0; margin-top: 2px; color: var(--sl-accent); } .sl-price { color: var(--sl-accent-deep); font-weight: 600; font-size: 0.9rem; margin: 0; } .sl-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; } /* Replaces the old "badge bg-primary bg-opacity-10 text-primary" combo, which Bootstrap 5.0.2 renders as solid bg-primary text painted in the same colour (invisible). */ .sl-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; background: var(--sl-badge-bg); color: var(--sl-badge-text); } .sl-badge-accent { background: var(--sl-badge-accent-bg); color: var(--sl-badge-accent-text); } .sl-card-footer { padding: 0 16px 16px; } /* ============================================================ Empty state (no centers found) ============================================================ */ .sl-empty { padding: 56px 16px; text-align: center; } .sl-empty i { font-size: 3rem; color: var(--sl-text-muted); opacity: 0.6; } .sl-empty p { color: var(--sl-text-muted); } /* ============================================================ Nearby cities pills ============================================================ */ .sl-badge-pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 20px; background: var(--sl-badge-bg); color: var(--sl-badge-text); font-size: 0.85rem; text-decoration: none; transition: background 0.2s ease-in-out; } .sl-badge-pill:hover { background: var(--sl-badge-accent-bg); color: var(--sl-badge-accent-text); }