/* =============================================================== LAKEFRONT SPORTS — ARTICLE STYLESHEET v1 --------------------------------------------------------------- Self-contained stylesheet for all 197 articles across all five teams. Supports light + dark themes. Team accents controlled by the [data-team="..."] attribute on . Architecture: 1. Fonts + reset 2. CSS variables (theme + team accents) 3. App shell layout 4. Sidebar (chrome) 5. Mobile drawer (chrome) 6. Breaking news bar 7. Mobile header 8. Desktop topbar 9. Today's games widget 10. Article layout 11. Article header (featured image, tags, title, excerpt, meta) 12. Social share (top inline) 13. Article content typography 14. Tables (linescore, stats, standings) 15. Embeds (video, twitter) 16. Decorative backgrounds 17. Editorial highlights (pink, yellow) 18. Author box (NEW standardized) 19. Social engagement (NEW standardized bottom) 20. Mobile related articles 21. Article right-rail (renamed from .sidebar) 22. Footer newsletter promo 23. Site footer 24. Team accent variants via [data-team] 25. Responsive breakpoints =============================================================== */ /* =============================================================== 1. FONTS =============================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;600;700;800;900&display=swap'); /* =============================================================== 2. CSS VARIABLES — THEME + TEAM ACCENTS =============================================================== */ :root { --navy: #081b2e; --navy-2: #0c243b; --red: #e5392d; --red-glow: rgba(229, 57, 45, 0.3); --orange: #c83803; --sidebar-w: 260px; --topbar-h: 52px; --radius: 12px; /* Team accent palette — used by [data-team] selectors throughout */ --bears-primary: #0b162a; --bears-accent: #c83803; --bears-border: #e5392d; --blackhawks-primary: #000000; --blackhawks-accent: #cf0a2c; --blackhawks-border: #caa75c; --bulls-primary: #000000; --bulls-accent: #ce1141; --bulls-border: #ce1141; --cubs-primary: #0e3386; --cubs-accent: #c8102e; --cubs-border: #c8102e; --whitesox-primary: #27251f; --whitesox-accent: #c4ced4; --whitesox-border: #c4ced4; } [data-theme="light"] { --bg: #f5f5f3; --text: #0d1b2a; --card: #ffffff; --muted: #6b7c8f; --card-border: rgba(0, 0, 0, 0.06); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); } [data-theme="dark"] { --bg: #0a0a0f; --text: #e8e8e8; --card: #151520; --muted: #7a8899; --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Default to dark theme during paint — prevents flash of unstyled content if the JS theme initializer hasn't run yet. */ :root:not([data-theme]) { --bg: #0a0a0f; --text: #e8e8e8; --card: #151520; --muted: #7a8899; --card-border: rgba(255, 255, 255, 0.06); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Per-team accent shortcut — read by [data-team] block at end of file. Other selectors should use var(--team-accent) instead of hard-coding. --team-link is a separate variable used for article body link color, tuned for legibility on both light and dark backgrounds. */ [data-team="bears"] { --team-accent: var(--bears-accent); --team-border: var(--bears-border); --team-primary: var(--bears-primary); --team-link: var(--bears-accent); } [data-team="blackhawks"] { --team-accent: var(--blackhawks-accent); --team-border: var(--blackhawks-border); --team-primary: var(--blackhawks-primary); --team-link: var(--blackhawks-accent); } [data-team="bulls"] { --team-accent: var(--bulls-accent); --team-border: var(--bulls-border); --team-primary: var(--bulls-primary); --team-link: var(--bulls-accent); } [data-team="cubs"] { --team-accent: var(--cubs-accent); --team-border: var(--cubs-border); --team-primary: var(--cubs-primary); --team-link: var(--cubs-accent); } /* White Sox is the exception — silver is unreadable as a link color on white, and indistinguishable from white text on dark backgrounds. Use their primary near-black on light mode, and a brighter silver on dark mode. */ [data-team="whitesox"] { --team-accent: var(--whitesox-accent); --team-border: var(--whitesox-border); --team-primary: var(--whitesox-primary); --team-link: var(--whitesox-primary); } [data-theme="dark"][data-team="whitesox"] { --team-link: #d8e0e6; } /* =============================================================== 3. RESET + BASE =============================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: clip; min-height: 100vh; width: 100%; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .app-shell { display: flex; min-height: 100vh; width: 100%; } /* =============================================================== 4. SIDEBAR — Desktop navigation chrome =============================================================== */ .sidebar { width: var(--sidebar-w); position: fixed; top: 0; left: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; background: linear-gradient(135deg, var(--navy) 0%, #030a14 100%); border-right: 4px solid var(--red); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3); } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; } /* Team-themed sidebar variants (locked per-article) */ .sidebar.sidebar-bears { background: linear-gradient(135deg, #0b162a 0%, #030a14 100%); border-right-color: #e5392d; } .sidebar.sidebar-blackhawks { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-right-color: #caa75c; } .sidebar.sidebar-bulls { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-right-color: #ce1141; } .sidebar.sidebar-cubs { background: linear-gradient(90deg, #0e3386 0%, #0a1d5e 100%); border-right-color: #c8102e; } .sidebar.sidebar-whitesox { background: linear-gradient(135deg, #27251f 0%, #000 100%); border-right-color: #c4ced4; } .sidebar-brand { padding: 14px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .sidebar-logo { height: 44px; width: auto; transition: transform 0.3s ease; } .sidebar-logo:hover { transform: scale(1.03); } .sidebar-theme { padding: 7px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .theme-toggle-btn { width: 100%; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); font: 600 10px 'Manrope', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all 0.2s; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sidebar-nav { flex: 1; padding: 4px 0; } .nav-section-label { padding: 7px 16px 2px; font-size: 8px; font-weight: 800; letter-spacing: 0.13em; color: rgba(255, 255, 255, 0.18); text-transform: uppercase; } .sidebar-nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px; color: rgba(255, 255, 255, 0.48); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.12s; text-decoration: none; border-left: 3px solid transparent; } .sidebar-nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.03); } .sidebar-nav-item.active { color: #fff; background: rgba(255, 255, 255, 0.05); border-left-color: var(--team-accent, var(--red)); } .sidebar-nav-item .nav-icon { font-size: 13px; width: 16px; text-align: center; } .sidebar-nav-item .nav-chevron { margin-left: auto; font-size: 7px; color: rgba(255, 255, 255, 0.15); transition: transform 0.2s; } .sidebar-nav-item .nav-chevron.open { transform: rotate(90deg); } .sidebar-nav-item .nav-badge { margin-left: auto; font-size: 7px; font-weight: 800; background: rgba(138, 43, 226, 0.5); color: #fff; padding: 1px 5px; border-radius: 2px; } .subnav { overflow: hidden; transition: max-height 0.25s ease; max-height: 0; background: rgba(0, 0, 0, 0.18); } .subnav a { display: block; padding: 4px 16px 4px 44px; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.28); text-decoration: none; transition: all 0.1s; } .subnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.03); } .subnav .zone-link { color: rgba(255, 255, 255, 0.5); font-weight: 700; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 5px; margin-top: 2px; } .sidebar-social { padding: 9px 16px; border-top: 1px solid rgba(255, 255, 255, 0.04); display: flex; gap: 12px; justify-content: center; } .sidebar-social a { color: rgba(255, 255, 255, 0.22); display: flex; transition: color 0.2s; } .sidebar-social a:hover { color: #fff; } /* =============================================================== 5. MOBILE DRAWER =============================================================== */ .mobile-drawer { position: fixed; inset: 0; z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease; background: linear-gradient(135deg, var(--navy) 0%, #030a14 100%); display: flex; flex-direction: column; overflow-y: auto; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mobile-drawer-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; } .mobile-drawer-body { flex: 1; padding: 6px 0; overflow-y: auto; } /* =============================================================== 6. BREAKING NEWS BAR --------------------------------------------------------------- Hidden by default. script_article.js fetches /breaking-news.json and reveals the bar only when there's active, unexpired news. =============================================================== */ .breaking-bar { background: linear-gradient(90deg, var(--red) 0%, #ff4d4d 100%); color: #fff; padding: 8px 20px; display: none; /* hidden by default — revealed by JS when JSON is active */ align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 600; z-index: 110; width: 100%; max-width: 100%; overflow: hidden; } .breaking-bar.active { display: flex; } .breaking-bar.hidden { display: none !important; } .breaking-bar a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.5); transition: border-color 0.2s; } .breaking-bar a:hover { border-bottom-color: #fff; } .breaking-label { background: #fff; color: var(--red); padding: 2px 8px; border-radius: 3px; font-weight: 800; font-size: 9px; letter-spacing: 0.08em; animation: pulse-label 1.5s ease-in-out infinite; } @keyframes pulse-label { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .breaking-text { flex: 1; text-align: center; } .breaking-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; opacity: 0.7; padding: 0 6px; } .breaking-close:hover { opacity: 1; } /* =============================================================== 7. MOBILE HEADER =============================================================== */ .mobile-header { display: none; position: sticky; top: 0; z-index: 100; flex-direction: column; background: linear-gradient(135deg, var(--navy) 0%, #030a14 100%); border-bottom: 3px solid var(--red); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); width: 100%; max-width: 100vw; overflow: hidden; transition: background 0.4s, border-color 0.4s; } .mobile-header-top { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; min-height: 44px; } .mobile-logo { height: 33px; width: auto; } .mobile-btn { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 3px; } /* Team-themed mobile header variants */ .mobile-header-bears { background: linear-gradient(135deg, #0b162a 0%, #030a14 100%); border-bottom-color: #c83803; } .mobile-header-blackhawks { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-bottom-color: #caa75c; } .mobile-header-bulls { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-bottom-color: #ce1141; } .mobile-header-cubs { background: linear-gradient(90deg, #0e3386 0%, #1a2a5e 100%); border-bottom-color: #c8102e; } .mobile-header-whitesox { background: linear-gradient(135deg, #27251f 0%, #000 100%); border-bottom-color: #c4ced4; } /* =============================================================== 8. DESKTOP TOPBAR — team-colored background regardless of theme --------------------------------------------------------------- Topbar always uses the team's primary color gradient. This is a major visual anchor — sets the page's identity at first glance instead of leaving chrome generic. =============================================================== */ .topbar-desk { height: var(--topbar-h); position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; gap: 12px; transition: all 0.35s; border-bottom: 4px solid var(--team-accent, var(--red)); backdrop-filter: blur(10px); color: #fff; } /* Per-team topbar gradients — same in light + dark mode */ .topbar-desk.topbar-bears { background: linear-gradient(135deg, #0b162a 0%, #030a14 100%); border-bottom-color: var(--bears-accent); } .topbar-desk.topbar-blackhawks { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-bottom-color: var(--blackhawks-border); } .topbar-desk.topbar-bulls { background: linear-gradient(135deg, #000 0%, #1a0000 100%); border-bottom-color: var(--bulls-accent); } .topbar-desk.topbar-cubs { background: linear-gradient(90deg, #0e3386 0%, #0a1d5e 100%); border-bottom-color: var(--cubs-accent); } .topbar-desk.topbar-whitesox { background: linear-gradient(135deg, #27251f 0%, #000 100%); border-bottom-color: var(--whitesox-accent); } /* Search input — semi-transparent on team-colored background */ .topbar-search { padding: 6px 12px; border-radius: 6px; font: 400 11px 'Manrope', sans-serif; border: 1px solid rgba(255, 255, 255, 0.1); width: 240px; background: rgba(255, 255, 255, 0.08); color: #fff; transition: all 0.2s; } .topbar-search:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); } .topbar-search::placeholder { color: rgba(255, 255, 255, 0.4); } .topbar-actions { display: flex; align-items: center; gap: 6px; } .topbar-btn { padding: 5px 10px; border-radius: 6px; font: 700 9px 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .topbar-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); } .topbar-btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.05); } .topbar-btn-primary { background: var(--team-primary, #000); color: #fff; border: 1px solid var(--team-accent, var(--red)); } .topbar-btn-primary:hover { background: var(--team-accent, var(--red)); border-color: var(--team-accent, var(--red)); transform: translateY(-1px); } /* =============================================================== 9. TODAY'S GAMES WIDGET =============================================================== */ .todays-games { padding: 9px 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .todays-games-title { font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.5px; margin-bottom: 5px; } .game-row { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); font-size: 9px; color: rgba(255, 255, 255, 0.4); } .game-row:last-child { border: none; } .game-teams { font-weight: 700; color: rgba(255, 255, 255, 0.65); } .game-status { font-size: 8px; margin-top: 1px; color: rgba(255,255,255,0.82); } .game-live { color: #4ade80; font-weight: 800; } /* =============================================================== MAIN CONTENT AREA — wraps everything to right of sidebar =============================================================== */ .main-content { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } /* Constrain inner width like the homepage does */ .article-layout, .promo-banner, .site-footer { max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; } /* =============================================================== 10. ARTICLE LAYOUT =============================================================== */ .article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; padding: 40px 22px 60px; animation: article-fade-in 0.4s ease-out; } @keyframes article-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .article-main { min-width: 0; /* Prevents grid blowout from long URLs / wide tables */ } /* =============================================================== 11. ARTICLE HEADER — featured image, tags, title, excerpt, meta =============================================================== */ .article-header { margin-bottom: 32px; } .featured-image-wrapper { position: relative; margin-bottom: 24px; } .featured-image { width: 100%; height: auto; max-height: 600px; object-fit: contain; /* Show full image, no cropping */ object-position: center; border-radius: var(--radius); box-shadow: var(--card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 4px solid var(--team-primary, var(--navy)); /* Background fills the Google News 1200x630 slot when image doesn't. Uses team-primary so portrait photos sit in a team-colored frame. */ background: var(--team-primary, var(--navy)); aspect-ratio: 1200 / 630; } .featured-image:hover { box-shadow: var(--card-shadow-hover); } .image-credit { font-size: 10px; color: var(--muted); margin-top: 6px; font-style: italic; text-align: right; padding-right: 4px; } .article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tag { padding: 5px 12px; background: var(--team-primary, var(--navy)); border: 1px solid var(--team-primary, var(--navy)); border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; text-decoration: none; transition: all 0.2s ease; letter-spacing: 0.05em; text-transform: uppercase; } .tag:hover { background: var(--team-accent, var(--red)); color: #fff; border-color: var(--team-accent, var(--red)); transform: translateY(-1px); } .article-title { font-size: 42px; font-weight: 900; line-height: 1.15; margin-bottom: 16px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.01em; color: var(--text); } .article-subtitle, .article-excerpt { font-size: 17px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; } .article-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .author { display: flex; align-items: center; gap: 8px; } .author a { color: var(--text); font-weight: 600; transition: color 0.2s; } .author a:hover { color: var(--team-accent, var(--red)); } .author-avatar { background-image: url('../assets/drew_carroll_profile.png'); background-size: cover; background-position: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--team-accent, var(--red)); flex-shrink: 0; } .meta-divider { color: var(--card-border); font-size: 10px; } .article-meta time { font-weight: 600; } /* =============================================================== 12. SOCIAL SHARE — top inline row =============================================================== */ .social-share { display: flex; gap: 10px; padding: 18px 0; border-top: 1px solid var(--card-border); border-bottom: 2px solid var(--team-accent, var(--red)); margin-bottom: 28px; } .share-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--card-border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 14px; font-weight: 600; box-shadow: var(--card-shadow); } .share-btn:hover { background: var(--team-accent, var(--red)); border-color: var(--team-accent, var(--red)); color: #fff; transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .share-btn[data-share="copy"].copied { background: #4ade80; border-color: #4ade80; color: #fff; } /* =============================================================== 13. ARTICLE CONTENT — typography =============================================================== */ .article-content { font-size: 17px; line-height: 1.8; color: var(--text); } .article-content > p { margin-bottom: 22px; } .article-content h2 { font-size: 28px; font-weight: 800; margin: 44px 0 16px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; position: relative; padding-bottom: 10px; color: var(--team-accent, var(--text)); } .article-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--team-accent, var(--red)); } .article-content h3 { font-size: 22px; font-weight: 700; margin: 32px 0 14px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; color: var(--team-accent, var(--text)); } .article-content h4 { font-size: 18px; font-weight: 700; margin: 24px 0 12px; color: var(--text); } .article-content ul, .article-content ol { margin: 18px 0 22px 0; padding-left: 24px; } .article-content li { margin-bottom: 8px; padding-left: 6px; } .article-content ul li::marker { color: var(--team-accent, var(--red)); } .article-content blockquote { border-left: 4px solid var(--team-accent, var(--red)); padding: 16px 22px; margin: 28px 0; font-style: italic; font-size: 18px; color: var(--muted); background: var(--card); border-radius: 0 8px 8px 0; box-shadow: var(--card-shadow); } .article-content code { background: var(--card); padding: 2px 7px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 14px; border: 1px solid var(--card-border); } .article-content a { color: var(--team-link, var(--red)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; transition: color 0.2s, text-decoration-thickness 0.2s; } .article-content a:hover { color: var(--team-accent, var(--red)); text-decoration-thickness: 3px; } .article-content strong { color: var(--text); font-weight: 700; } .article-content em { font-style: italic; } /* Editor's notes / callouts using inline styles in article body */ .article-content p[style*="border-left"] { background: var(--card) !important; color: var(--text) !important; } /* Editor's note banner — emitted by the dashboard article generator above the article body when frontmatter.editorNote is set. */ .editor-note { background: rgba(229, 57, 45, 0.08); border-left: 4px solid var(--red, #e5392d); padding: 14px 18px; margin: 0 0 24px; border-radius: 4px; font-size: 0.94em; line-height: 1.55; color: var(--text, inherit); } .editor-note strong { color: var(--red, #e5392d); margin-right: 4px; } /* =============================================================== 14. TABLES — linescore (baseball), stats, standings =============================================================== */ .table-wrapper, .linescore-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; } .article-content table, .stats-table, .standings-table, .linescore-table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); font-size: 14px; background: var(--card); } .stats-container, .standings-section { margin: 32px 0; } .stats-title { font-size: 20px; font-weight: 800; color: var(--team-accent, var(--text)); margin-bottom: 16px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; } /* Stats / standings tables — team-primary header band with accent stripe. Naked elements in article body (e.g. Three Stars) also get this treatment, so they look themed even without a stats-table class. The :not() exclusions prevent it bleeding into linescore tables which have their own treatment. */ .stats-table thead, .standings-table thead, .article-content table:not(.linescore-table) thead { background: var(--team-primary, var(--navy)); color: #fff; border-bottom: 3px solid var(--team-accent, var(--red)); } .stats-table thead th, .standings-table thead th, .article-content table:not(.linescore-table) thead th { color: #fff; } .stats-table th, .standings-table th, .article-content table th { padding: 13px 16px; text-align: left; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; } .stats-table td, .standings-table td, .article-content table td { padding: 11px 16px; border-bottom: 1px solid var(--card-border); color: var(--text); } .stats-table tbody tr, .standings-table tbody tr, .article-content table tbody tr { background: var(--card); transition: background 0.2s ease; } .stats-table tbody tr:hover, .standings-table tbody tr:hover, .article-content table tbody tr:hover { background: var(--bg); } .stats-table th:first-child, .stats-table td:first-child, .standings-table th:first-child, .standings-table td:first-child { min-width: 140px; } .stats-table th:not(:first-child), .stats-table td:not(:first-child), .standings-table th:not(:first-child), .standings-table td:not(:first-child) { text-align: center; min-width: 60px; } /* Linescore table — baseball box score */ .linescore-table { font-size: 14px; } .linescore-table thead tr { background: var(--team-primary, var(--navy)); color: #fff; border-bottom: 3px solid var(--team-accent, var(--red)); } .linescore-table thead th { color: #fff; font-weight: 700; } .linescore-table tbody tr:first-child { border-bottom: 1px solid var(--card-border); } .linescore-table th, .linescore-table td { padding: 8px; text-align: center; color: var(--text); } .linescore-table th:first-child, .linescore-table td.team-name { text-align: left; font-weight: 700; } /* Body totals — R/H/E values use the team accent (red on white card, fine) */ .linescore-table tbody .totals { font-weight: 700; color: var(--team-accent, var(--text)); } /* Header totals — R/H/E letters in the header row stay white against the team-primary background. Otherwise the accent color (red) renders on blue/dark backgrounds with poor contrast. */ .linescore-table thead .totals, .linescore-table thead th.totals { color: #fff; } /* =============================================================== 15. EMBEDS — video, twitter =============================================================== */ .video-wrapper, .video-container { margin: 28px 0; border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); position: relative; aspect-ratio: 16 / 9; } .video-wrapper iframe, .video-container iframe { width: 100%; height: 100%; border: none; position: absolute; inset: 0; } .social-embed, .twitter-tweet { margin: 24px auto !important; max-width: 550px !important; } .article-content blockquote.twitter-tweet { background: transparent; border-left: none; box-shadow: none; padding: 0; font-style: normal; border-radius: 0; font-size: inherit; color: inherit; } /* =============================================================== 16. DECORATIVE BACKGROUNDS — bg-decoration variants =============================================================== */ .bg-decoration { position: absolute; pointer-events: none; z-index: 0; opacity: 0.5; } .bg-decoration.bears-theme { background: radial-gradient(circle, rgba(200, 56, 3, 0.08) 0%, transparent 70%); } .bg-decoration.blackhawks-theme{ background: radial-gradient(circle, rgba(207, 10, 44, 0.08) 0%, transparent 70%); } .bg-decoration.bulls-theme { background: radial-gradient(circle, rgba(206, 17, 65, 0.08) 0%, transparent 70%); } .bg-decoration.cubs-theme { background: radial-gradient(circle, rgba(14, 51, 134, 0.08) 0%, transparent 70%); } .bg-decoration.whitesox-theme { background: radial-gradient(circle, rgba(192, 192, 192, 0.10) 0%, transparent 70%); } .bg-diagonal { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%); pointer-events: none; z-index: 0; } .bears-col, .blackhawks-col, .bulls-col, .cubs-col, .whitesox-col { position: relative; z-index: 1; } /* =============================================================== 17. READING PROGRESS BAR =============================================================== */ #reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--team-accent, var(--red)); z-index: 300; transition: width 0.1s linear; pointer-events: none; border-radius: 0 2px 2px 0; } /* Subtle glow on the leading edge */ #reading-progress::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 100%; background: radial-gradient(ellipse at right, var(--team-accent, var(--red)), transparent 70%); opacity: 0.6; } /* =============================================================== 18. EDITORIAL HIGHLIGHTS — internal review markers, NOT user-facing --------------------------------------------------------------- These spans flag content for editorial review (pink = edits made, yellow = needs review, green = approved). They should never reach readers as visual styling — the spans are stripped by the publishing flow, but if any slip through, they render as plain text so the article is never disrupted by review markers. =============================================================== */ .pink-highlight, .yellow-highlight, .green-highlight { background: transparent; padding: 0; border-radius: 0; /* Inherit all other text properties — render identically to surrounding prose */ } /* =============================================================== 19. AUTHOR BOX — standardized on every article =============================================================== */ .author-box { display: flex; gap: 18px; align-items: flex-start; margin: 40px 0 0; padding: 22px; background: var(--card); border: 1px solid var(--card-border); border-top: 6px solid var(--team-accent, var(--red)); border-radius: var(--radius); box-shadow: var(--card-shadow); } /* Cubs is the exception — primary blue reads better than red on the white card */ [data-team="cubs"] .author-box { border-top-color: var(--cubs-primary); } .author-box-avatar { background-image: url('../assets/drew_carroll_profile.png'); background-size: cover; background-position: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--team-accent, var(--red)); flex-shrink: 0; } .author-box-info { flex: 1; min-width: 0; } .author-box-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; } .author-box-name a { color: var(--text); transition: color 0.2s; } .author-box-name a:hover { color: var(--team-accent, var(--red)); } .author-box-bio { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 12px; } .author-box-socials { display: flex; gap: 8px; } .author-social-link { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); transition: all 0.2s; } .author-social-link:hover { background: var(--team-accent, var(--red)); border-color: var(--team-accent, var(--red)); color: #fff; transform: translateY(-1px); } /* =============================================================== 20. SOCIAL ENGAGEMENT — bottom standardized "follow brand" block =============================================================== */ .social-engagement { margin: 32px 0 0; padding: 28px 24px; background: var(--team-primary, var(--navy)); border-top: 4px solid var(--team-accent, var(--red)); border-bottom: 4px solid var(--team-accent, var(--red)); border-radius: var(--radius); text-align: center; color: #fff; } .social-engagement-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.05em; margin-bottom: 16px; color: #fff; } .social-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .social-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.2s; } .social-button:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); } .social-button .social-icon { font-size: 14px; font-weight: 800; } .social-button.social-x:hover { background: #000; border-color: #000; } .social-button.social-facebook:hover { background: #1877f2; border-color: #1877f2; } .social-button.social-instagram:hover{ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #dc2743; } /* =============================================================== 21. MOBILE RELATED ARTICLES — only renders <1024px =============================================================== */ .mobile-related { display: none; margin: 32px 0 0; padding: 22px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); } .mobile-related-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.04em; color: var(--team-accent, var(--text)); margin-bottom: 12px; } /* =============================================================== 22. ARTICLE RIGHT-RAIL (renamed from .sidebar) =============================================================== */ .article-rail { position: sticky; top: calc(var(--topbar-h) + 14px); align-self: flex-start; height: fit-content; z-index: 10; } .rail-section { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 0; margin-bottom: 18px; border-top: 8px solid var(--team-primary, var(--navy)); overflow: hidden; transition: box-shadow 0.3s ease; } .rail-section:hover { box-shadow: var(--card-shadow-hover); } .rail-section > * { padding-left: 20px; padding-right: 20px; } .rail-title { font-size: 16px; font-weight: 800; margin: 0; padding: 16px 20px 12px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; color: #fff; text-transform: uppercase; background: var(--team-primary, var(--navy)); border-bottom: 3px solid var(--team-accent, var(--red)); } .related-article { padding: 12px 20px; border-bottom: 1px solid var(--card-border); transition: padding 0.2s ease; } .related-article:hover { padding-left: 26px; } .related-article:last-child { border-bottom: none; padding-bottom: 16px; } .related-article:first-of-type { padding-top: 14px; } .related-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: var(--text); text-decoration: none; display: block; transition: color 0.2s ease; line-height: 1.4; } .related-title:hover { color: var(--team-accent, var(--red)); } .related-date { font-size: 11px; color: var(--muted); font-weight: 600; } /* =============================================================== 23. FOOTER NEWSLETTER PROMO =============================================================== */ .promo-banner { border-radius: 12px; padding: 18px 22px; margin: 0 auto 14px; display: flex; align-items: flex-start; gap: 14px; position: relative; overflow: hidden; width: calc(100% - 44px); } .promo-newsletter { background: linear-gradient(135deg, var(--team-primary, var(--navy)) 0%, color-mix(in srgb, var(--team-primary, var(--navy)) 70%, #000) 100%); border: 1px solid var(--team-accent, var(--red)); color: #fff; } .promo-icon { font-size: 26px; flex-shrink: 0; } .promo-body { flex: 1; } .promo-text-box { margin-bottom: 8px; } .promo-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.5px; margin-bottom: 2px; } .promo-desc { font-size: 12px; opacity: 0.8; line-height: 1.5; } .promo-input-row { display: flex; gap: 5px; margin-top: 7px; } .promo-input { flex: 1; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #fff; font: 400 10px 'Manrope', sans-serif; } .promo-input::placeholder { color: rgba(255, 255, 255, 0.25); } .promo-input:focus { outline: none; border-color: var(--red); } .promo-btn { padding: 7px 12px; border-radius: 6px; border: none; font: 700 10px 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .promo-btn-red { background: var(--red); color: #fff; } .promo-btn-red:hover { background: #ff4444; } /* Hide Zoho's hidden inputs from layout */ .newsletter-form input[type="hidden"] { display: none !important; } /* =============================================================== 24. SITE FOOTER — team primary background, full team identity =============================================================== */ .site-footer { margin-top: 24px; padding: 30px 22px 20px; background: var(--team-primary, var(--navy)); border-top: 4px solid var(--team-accent, var(--red)); color: #fff; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 22px; max-width: 900px; margin: 0 auto; } .footer-tagline { font-size: 10px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } .footer-col-title { font-size: 8px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 6px; text-transform: uppercase; color: #fff; } .footer-link { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.55); padding: 2px 0; text-decoration: none; transition: color 0.2s; } .footer-link:hover { color: #fff; } .footer-bottom { margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .footer-copy { font-size: 9px; color: rgba(255, 255, 255, 0.6); } .footer-disclaimer { font-size: 8px; color: rgba(255, 255, 255, 0.4); margin-top: 3px; line-height: 1.3; max-width: 600px; margin-left: auto; margin-right: auto; } /* =============================================================== 25. TEAM ACCENT VARIANTS — additional [data-team] hooks --------------------------------------------------------------- Most team theming above already uses var(--team-accent) so it responds to [data-team]. This section adds any team-specific overrides that need different shades of the same color. =============================================================== */ /* White Sox is silver/grey — needs darker text on light backgrounds for legibility. Their "primary" silver doesn't work as a structural background color, so for structural elements (footer, tables, social engagement) we use the deeper #27251f near-black they pair with silver. */ [data-team="whitesox"] { --team-primary: var(--whitesox-primary); /* #27251f — already dark, good as background */ --team-accent: var(--whitesox-accent); /* silver — used as accent stripe */ } [data-team="whitesox"] .article-content h2, [data-team="whitesox"] .article-content h3 { color: var(--whitesox-primary); } [data-team="whitesox"] .article-content h2::after { background: var(--whitesox-accent); } [data-theme="dark"][data-team="whitesox"] .article-content h2, [data-theme="dark"][data-team="whitesox"] .article-content h3 { color: var(--whitesox-accent); } /* =============================================================== 26. RESPONSIVE BREAKPOINTS =============================================================== */ /* Desktop sidebar size overrides — matches the homepage / team page sidebar typography on screens 1025px+. The base sizes (set above) are tighter for mobile-drawer use; desktop bumps everything up so the article sidebar reads identically to the team-page sidebar. */ @media (min-width: 1025px) { .sidebar .nav-section-label { font-size: 10px; } .sidebar .sidebar-nav-item { font-size: 13px; } .sidebar .sidebar-nav-item .nav-icon { font-size: 15px; } .sidebar .sidebar-nav-item .nav-chevron { font-size: 9px; } .sidebar .sidebar-nav-item .nav-badge { font-size: 9px; } .sidebar .subnav a { font-size: 11px; } .sidebar .todays-games-title { font-size: 15px; } .sidebar .game-row { font-size: 11px; } .sidebar .game-status { font-size: 10px; } } /* Tablet & mobile: hide desktop sidebar/topbar, show mobile chrome */ @media (max-width: 1024px) { .sidebar { display: none; } .main-content { margin-left: 0; max-width: 100vw; overflow-x: clip; } .mobile-header { display: flex; } .topbar-desk { display: none; } .article-layout { grid-template-columns: 1fr; gap: 32px; padding: 24px 16px 40px; } .article-rail { display: none; } .mobile-related { display: block; } .article-title { font-size: 32px; } .article-subtitle, .article-excerpt { font-size: 16px; } .article-content { font-size: 16px; } .article-content h2 { font-size: 24px; margin-top: 32px; } .article-content h3 { font-size: 20px; } .promo-banner { margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 14px; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: calc(100% - 16px); width: calc(100% - 16px); } .promo-input-row { flex-direction: column; width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; justify-items: center; } .footer-grid > div { display: flex; flex-direction: column; align-items: center; width: 100%; } .site-footer { padding: 24px 16px 18px; max-width: 100%; text-align: center; } .footer-tagline { max-width: 360px; } .author-box { flex-direction: column; align-items: center; text-align: center; } .author-box-socials { justify-content: center; } .social-buttons { flex-direction: column; align-items: stretch; } .social-button { justify-content: center; } } /* Phone — tighter layout, smaller type */ @media (max-width: 640px) { .article-layout { padding: 16px 12px 32px; } .article-title { font-size: 26px; } .article-subtitle, .article-excerpt { font-size: 15px; } .article-content { font-size: 15px; line-height: 1.7; } .article-content h2 { font-size: 22px; } .article-content h3 { font-size: 18px; } .article-content blockquote { font-size: 15px; padding: 12px 16px; } .article-meta { font-size: 11px; gap: 8px; } .author-avatar { width: 28px; height: 28px; } .featured-image { aspect-ratio: 16 / 10; } .stats-table, .standings-table, .article-content table { font-size: 12px; } .stats-table th, .standings-table th, .article-content table th { padding: 10px 8px; font-size: 10px; } .stats-table td, .standings-table td, .article-content table td { padding: 8px; } .stats-table th:first-child, .standings-table th:first-child, .article-content table:not(.linescore-table) th:first-child { min-width: 100px; position: sticky; left: 0; background: var(--team-primary, var(--navy)); z-index: 1; } .stats-table td:first-child, .standings-table td:first-child, .article-content table:not(.linescore-table) td:first-child { min-width: 100px; position: sticky; left: 0; background: var(--card); z-index: 1; } .linescore-table { font-size: 12px; } .linescore-table th, .linescore-table td { padding: 6px 4px; } .video-wrapper, .video-container { aspect-ratio: 16 / 9; } .author-box { padding: 18px 14px; } .author-box-avatar { width: 56px; height: 56px; } .social-engagement { padding: 22px 14px; } .social-engagement-title { font-size: 18px; } .share-btn { width: 34px; height: 34px; font-size: 13px; } .promo-banner { padding: 12px; } .promo-title { font-size: 16px; } } /* Very small screens — handle edge cases */ @media (max-width: 380px) { .article-title { font-size: 22px; } } /* Print — strip chrome, keep article body readable */ @media print { .sidebar, .mobile-drawer, .breaking-bar, .mobile-header, .topbar-desk, .social-share, .social-engagement, .mobile-related, .article-rail, .promo-banner, .site-footer, .todays-games { display: none !important; } .main-content { margin-left: 0 !important; } .article-layout { grid-template-columns: 1fr !important; padding: 0 !important; } body { background: #fff !important; color: #000 !important; } .article-content a { color: #000 !important; text-decoration: underline; } } /* =============================================================== END — Lakefront Sports article stylesheet v1 =============================================================== */