/* ============================================================ Sportsblogs Theme — CSS custom properties + semantic classes Fonts: Barlow Condensed (display) + DM Sans (body) Dark mode triggered by [data-theme="dark"] on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap'); /* ── Variables ─────────────────────────────────────────────── */ :root { --sb-bg: #f2f2ee; --sb-surface: #ffffff; --sb-surface-2: #f8f8f5; --sb-border: #e0e0d8; --sb-text: #1a1a24; --sb-text-muted: #6b7280; --sb-accent: #f97316; --sb-accent-hi: #ea6c0a; --sb-link: #1a1a24; --sb-link-hi: #f97316; /* sport accent stripe colors */ --sport-nfl: #3b82f6; --sport-nba: #ef4444; --sport-mlb: #22c55e; --sport-nhl: #06b6d4; --sport-college-football: #a855f7; --sport-college-basketball: #f59e0b; --sport-default: #f97316; } [data-theme="dark"] { --sb-bg: #0f0f13; --sb-surface: #1a1a24; --sb-surface-2: #1e1e2c; --sb-border: #2a2a3a; --sb-text: #e8e8ef; --sb-text-muted: #9ca3af; --sb-accent: #f97316; --sb-accent-hi: #fb923c; --sb-link: #e8e8ef; --sb-link-hi: #f97316; } /* ── Base ──────────────────────────────────────────────────── */ body { background-color: var(--sb-bg); color: var(--sb-text); font-family: 'DM Sans', sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } /* ── Site Header ───────────────────────────────────────────── */ /* Header is always dark regardless of theme — it's a design anchor */ .sb-header { background-color: #0f0f13; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sb-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 1.5rem; letter-spacing: -0.02em; color: #ffffff; transition: color 0.15s; } .sb-logo:hover { color: var(--sb-accent); } .sb-logo span { color: var(--sb-accent); } .sb-nav-link { font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); transition: color 0.15s; } .sb-nav-link:hover { color: #ffffff; } .sb-theme-toggle { background: none; border: none; cursor: pointer; padding: 0.375rem; color: rgba(255, 255, 255, 0.4); transition: color 0.15s; display: flex; align-items: center; justify-content: center; } .sb-theme-toggle:hover { color: rgba(255, 255, 255, 0.9); } /* ── Page headings ─────────────────────────────────────────── */ .sb-page-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--sb-text); } .sb-page-subtitle { color: var(--sb-text-muted); font-size: 0.9375rem; } /* ── Entry cards ───────────────────────────────────────────── */ .sb-card { background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-left: 3px solid var(--sb-accent); border-radius: 6px; transition: background-color 0.15s ease; } .sb-card:hover { background-color: var(--sb-surface-2); } /* Sport-specific left border stripe */ .sb-card[data-sport="nfl"] { border-left-color: var(--sport-nfl); } .sb-card[data-sport="nba"] { border-left-color: var(--sport-nba); } .sb-card[data-sport="mlb"] { border-left-color: var(--sport-mlb); } .sb-card[data-sport="nhl"] { border-left-color: var(--sport-nhl); } .sb-card[data-sport="college-football"] { border-left-color: var(--sport-college-football); } .sb-card[data-sport="college-basketball"] { border-left-color: var(--sport-college-basketball); } .sb-entry-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--sb-link); transition: color 0.15s; } .sb-entry-title:hover { color: var(--sb-link-hi); } .sb-entry-summary { color: var(--sb-text-muted); font-size: 0.875rem; line-height: 1.55; } .sb-entry-meta { color: var(--sb-text-muted); font-size: 0.8125rem; } .sb-source-link { color: var(--sb-accent); font-weight: 600; transition: color 0.15s; } .sb-source-link:hover { color: var(--sb-accent-hi); } .sb-reads { color: var(--sb-accent); font-weight: 600; } /* ── Tags ──────────────────────────────────────────────────── */ .sb-tag-sport { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; background-color: #1a1a24; color: #ffffff; padding: 2px 7px; border-radius: 3px; transition: opacity 0.15s; } [data-theme="dark"] .sb-tag-sport { background-color: rgba(255, 255, 255, 0.12); color: #e8e8ef; } .sb-tag-sport:hover { opacity: 0.78; } /* Sport-specific tag fill colors */ .sb-tag-sport[data-sport="nfl"] { background-color: var(--sport-nfl); } .sb-tag-sport[data-sport="nba"] { background-color: var(--sport-nba); } .sb-tag-sport[data-sport="mlb"] { background-color: var(--sport-mlb); } .sb-tag-sport[data-sport="nhl"] { background-color: var(--sport-nhl); } .sb-tag-sport[data-sport="college-football"] { background-color: var(--sport-college-football); } .sb-tag-sport[data-sport="college-basketball"] { background-color: var(--sport-college-basketball); } /* Keep white text readable on all sport colors */ .sb-tag-sport[data-sport] { color: #ffffff; } [data-theme="dark"] .sb-tag-sport[data-sport] { color: #ffffff; } .sb-tag-team { font-size: 0.75rem; color: var(--sb-text-muted); background-color: transparent; border: 1px solid var(--sb-border); padding: 2px 7px; border-radius: 3px; transition: color 0.15s, border-color 0.15s; } .sb-tag-team:hover { color: var(--sb-text); border-color: var(--sb-text-muted); } /* ── Sort toggle ───────────────────────────────────────────── */ .sb-sort-wrap { display: inline-flex; border: 1px solid var(--sb-border); border-radius: 6px; overflow: hidden; } .sb-sort-btn { background-color: var(--sb-surface); color: var(--sb-text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 500; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 0.375rem; transition: background-color 0.15s, color 0.15s; } .sb-sort-btn + .sb-sort-btn { border-left: 1px solid var(--sb-border); } .sb-sort-btn:hover { background-color: var(--sb-surface-2); color: var(--sb-text); } .sb-sort-btn.sb-active, .sb-sort-btn[aria-current="true"] { background-color: var(--sb-accent); color: #ffffff; } /* ── Section container (team filter, etc.) ─────────────────── */ .sb-section { background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 6px; } /* ── Sports index cards ────────────────────────────────────── */ .sb-sport-card { background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-top: 3px solid var(--sb-accent); border-radius: 6px; transition: background-color 0.15s, transform 0.15s; } .sb-sport-card:hover { background-color: var(--sb-surface-2); transform: translateY(-2px); } .sb-sport-card[data-sport="nfl"] { border-top-color: var(--sport-nfl); } .sb-sport-card[data-sport="nba"] { border-top-color: var(--sport-nba); } .sb-sport-card[data-sport="mlb"] { border-top-color: var(--sport-mlb); } .sb-sport-card[data-sport="nhl"] { border-top-color: var(--sport-nhl); } .sb-sport-card[data-sport="college-football"] { border-top-color: var(--sport-college-football); } .sb-sport-card[data-sport="college-basketball"] { border-top-color: var(--sport-college-basketball); } .sb-sport-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--sb-text); transition: color 0.15s; } .sb-sport-name:hover { color: var(--sb-accent); } /* ── Breadcrumb ────────────────────────────────────────────── */ .sb-breadcrumb-link { font-size: 0.8125rem; color: var(--sb-text-muted); transition: color 0.15s; } .sb-breadcrumb-link:hover { color: var(--sb-accent); } /* ── RSS button ────────────────────────────────────────────── */ .sb-rss-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 600; background-color: var(--sb-accent); color: #ffffff; border-radius: 4px; transition: background-color 0.15s; } .sb-rss-btn:hover { background-color: var(--sb-accent-hi); } /* ── Footer ────────────────────────────────────────────────── */ /* Footer also always dark — bookends the dark header */ .sb-footer { background-color: #0a0a0d; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* ── Alert banners ─────────────────────────────────────────── */ .sb-alert-error { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: var(--sb-text); border-radius: 6px; } .sb-alert-success { background-color: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); color: var(--sb-text); border-radius: 6px; } /* ── Trending empty state ──────────────────────────────────── */ .sb-empty-state { background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 6px; } /* ── Form inputs ───────────────────────────────────────────── */ .sb-input, .sb-select, .sb-textarea { background-color: var(--sb-surface); border: 1px solid var(--sb-border); color: var(--sb-text); border-radius: 5px; width: 100%; padding: 0.5rem 0.875rem; font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; transition: border-color 0.15s, box-shadow 0.15s; appearance: auto; } .sb-input::placeholder, .sb-textarea::placeholder { color: var(--sb-text-muted); opacity: 0.7; } .sb-input:focus, .sb-select:focus, .sb-textarea:focus { outline: none; border-color: var(--sb-accent); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); } .sb-input:disabled, .sb-select:disabled { opacity: 0.45; cursor: not-allowed; } .sb-label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-text-muted); margin-bottom: 0.375rem; } .sb-hint { font-size: 0.8125rem; color: var(--sb-text-muted); margin-top: 0.3rem; } /* ── Buttons ───────────────────────────────────────────────── */ .sb-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.5rem; background-color: var(--sb-accent); color: #ffffff; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.15s; min-height: 44px; } .sb-btn-primary:hover { background-color: var(--sb-accent-hi); } .sb-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.5rem; background-color: var(--sb-surface-2); color: var(--sb-text-muted); font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; border-radius: 5px; border: 1px solid var(--sb-border); cursor: pointer; transition: background-color 0.15s, color 0.15s; min-height: 44px; } .sb-btn-secondary:hover { background-color: var(--sb-border); color: var(--sb-text); } /* ── Info box (criteria, next-steps panels) ────────────────── */ .sb-info-box { background-color: rgba(249, 115, 22, 0.07); border: 1px solid rgba(249, 115, 22, 0.2); border-left: 3px solid var(--sb-accent); border-radius: 5px; padding: 1rem 1.25rem; } .sb-info-box-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-accent); margin-bottom: 0.5rem; } /* ── Pagination ────────────────────────────────────────────── */ .sb-pagination { background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 6px; } .sb-pagination .info { color: var(--sb-text-muted); font-size: 0.875rem; } /* ── Search highlight ──────────────────────────────────────── */ mark { background-color: rgba(249, 115, 22, 0.25); color: inherit; border-radius: 2px; padding: 0 2px; } /* ── Misc ──────────────────────────────────────────────────── */ .sb-divider { border-color: var(--sb-border); } .sb-text-muted { color: var(--sb-text-muted); }