/* ── Moto, Moto Light Theme ── Dark is the default brand look. Adding .light to flips the variable-driven surfaces to a light palette. Hardcoded dark hero banners / accent cards intentionally stay dark (treated as imagery). */ #mm-theme-toggle { position: fixed; bottom: 22px; right: 22px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: #FF4500; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease; padding: 0; } #mm-theme-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); } html.light #mm-theme-toggle { border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } /* ── Core palette flip ── */ html.light { --black: #F6F5F2; --dark: #EFEEE9; --mid: #ECEAE4; --card: #FFFFFF; --border: #DCDAD2; --text: #22211E; --muted: #6B6963; --white: #141311; --accent-glow: rgba(0, 0, 0, 0.06); } html.light body { background: #F6F5F2; color: #22211E; } /* Header / nav */ html.light header { background: #FFFFFF; } html.light nav a { color: #6B6963; } html.light nav a:hover, html.light nav a.active { color: #FF4500; } html.light .site-name { color: #141311; } @media (max-width: 768px) { html.light nav { background: #FFFFFF !important; } html.light nav a { color: #555 !important; border-bottom-color: #E5E3DC !important; } html.light .nav-toggle span { background: #141311 !important; } html.light .nav-submenu-toggle { color: #555 !important; } html.light .nav-submenu-items { background: #F4F2EC !important; } html.light .nav-submenu-items a { color: #777 !important; } } html.light .nav-submenu-items { background: #FFFFFF; border-color: #DCDAD2; } html.light .nav-submenu-items a { color: #6B6963 !important; } html.light .nav-submenu-toggle { color: #6B6963; } /* Hub hero banners: keep them dark-on-light as banner imagery is fine, but soften the page-fade so it blends into the light background. */ html.light .hero::after { background: linear-gradient(to bottom, transparent, #F6F5F2) !important; } /* Article template */ html.light .article-body { color: #33322E; } html.light .article-deck { color: #504E48; } html.light .hero-sub { color: #504E48; } html.light .featured-deck { color: #504E48; } html.light .featured-article { background: #FFFFFF; } html.light .featured-title { color: #141311; } html.light .article-row .article-deck, html.light .recap-summary { color: #5A5852; } html.light .story-text { color: #504E48; } html.light .video-desc { color: #504E48; } /* Cards & rows that hardcode near-black text/scenery */ html.light .rider-number { color: rgba(0, 0, 0, 0.08); } html.light .search-input { background: #FFFFFF; color: #22211E; } html.light .filter-btn { background: #FFFFFF; color: #444; } html.light .filter-btn.active { background: #FF4500; color: #FFF; } /* Sticky footer strip */ html.light footer { background: #ECEAE4; } html.light footer .logo { color: #141311; } /* Ticker: orange band — dark text reads better on light theme too */ html.light .ticker-item { color: #1A1A1A; } /* Buttons */ html.light .btn-secondary { color: #141311; border-color: rgba(0, 0, 0, 0.35); } html.light .btn-secondary:hover { color: #FF4500; border-color: #FF4500; } /* Pull quotes / results boxes inherit vars; sharpen borders slightly */ html.light .pull-quote { background: #EFEEE9; } html.light .results-box { background: #FFFFFF; } /* Tables/standings rows hover */ html.light .standings-row { border-bottom-color: rgba(0, 0, 0, 0.06); } html.light .result-row { border-bottom-color: rgba(0, 0, 0, 0.06); } /* Inline-styled dark cards flip to white; gradient "photo" banners stay dark (they don't match these selectors — treated as imagery). */ html.light [style*="background:#1E1E1E"], html.light [style*="background: #1E1E1E"], html.light [style*="background:#1A1A1A"], html.light [style*="background:#161616"], html.light [style*="background:#141414"], html.light [style*="background:#191919"], html.light [style*="background:#181818"], html.light [style*="background:#1C1C1C"], html.light [style*="background:#131313"], html.light [style*="background:#121212"], html.light [style*="background:#101010"], html.light [style*="background:#202020"], html.light [style*="background:#222"], html.light [style*="background:#111"] { background: #FFFFFF !important; border-color: #DCDAD2 !important; } html.light [style*="background:#0F0F0F"], html.light [style*="background:#0D0D0D"], html.light [style*="background:#0C0C0C"], html.light [style*="background:#0A0A0A"], html.light [style*="background:#080808"], html.light [style*="background:#000000"] { background: #F6F5F2 !important; } html.light .rider-num { color: rgba(0, 0, 0, 0.08) !important; } html.light .result-pos.gold { color: #A8860B; } html.light .result-pos.silver { color: #8A8A8A; } html.light .result-pos.bronze { color: #9C5A22; } /* Inline white/near-white text on those cards */ html.light [style*="color:#FFF"], html.light [style*="color:#FFFFFF"], html.light [style*="color:#EEE"], html.light [style*="color:#E8E8E8"] { color: #141311 !important; } /* ── Light-mode accent darkening: pale accent text unreadable on white ── */ html.light [style*="color:#44DD88"] { color: #14804A !important; } html.light [style*="color:#AA78FF"] { color: #6A2FD0 !important; } html.light [style*="color:#FFD700"], html.light [style*="color:#FFD100"] { color: #9A7B00 !important; } html.light [style*="color:#55BB55"] { color: #2E7D32 !important; } html.light [style*="color:#FF6A00"] { color: #D14A00 !important; } html.light [style*="color:#CCC"], html.light [style*="color:#CCCCCC"] { color: #555 !important; } html.light [style*="color:#BBB"], html.light [style*="color:#BBBBBB"] { color: #504E48 !important; } html.light [style*="color:#AAA"] { color: #5A5852 !important; } html.light [style*="color:#DDD"], html.light [style*="color:#D0D0D0"] { color: #444 !important; } html.light .featured-label { filter: saturate(1.1); } html.light .tag-recap { color: #14804A; } html.light .tag-preview { color: #9A7B00; } html.light .story-tag, html.light .countdown-label { color: #2E7D32; } html.light .eyebrow { } /* Round-2 audit fixes */ html.light { --gold: #9A7B00; } html.light .recap-podium span { background: #ECEAE4; color: #444; } html.light .recap-podium .p1 { background: rgba(154, 123, 0, 0.12); color: #9A7B00; } html.light .pool-num { color: rgba(0, 0, 0, 0.08) !important; } html.light [style*="color:var(--gold)"] { color: #9A7B00 !important; } html.light .hero-badge { color: #141311; } /* ── Light-mode heroes: white background, black text (Jon 2026-08-03) ── */ html.light .hero { background: #FFFFFF !important; } html.light .hero h1, html.light .hero-content h1 { color: #141311 !important; } html.light .hero-deck { color: #3A3934 !important; } html.light .hero-meta { color: #504E48 !important; } html.light .hero-meta .dot { color: #9B988F !important; } html.light .hero-badge { background: #F1EFE9 !important; color: #141311 !important; border-color: #DCDAD2 !important; } html.light .hero-eyebrow, html.light .eyebrow { } html.light .sponsor-strip { background: #FFFFFF !important; border-color: #DCDAD2 !important; } html.light .sponsor-name, html.light .sponsor-detail strong { color: #141311 !important; } html.light .sponsor-detail, html.light .sponsor-tagline { color: #504E48 !important; } html.light .number-badge .num { color: #141311 !important; } html.light .number-badge .label { color: #504E48 !important; } html.light .hero-bg-text, html.light .hero-bg { opacity: 0.55; } /* Chips with accent-colored backgrounds keep white text in light mode */ html.light .hero .tag { color: #FFFFFF !important; } html.light [style*="background:var(--accent)"] { color: #FFFFFF !important; } html.light .thumb-badge { background: rgba(255, 255, 255, 0.92) !important; } html.light .sponsor-callout-label { color: #504E48 !important; } html.light .sponsor-banner, html.light .sponsor-banner-text, html.light .sponsor-banner-link { color: #FFFFFF !important; }