/* * ═══════════════════════════════════════════════════════════════════════ * PAGE THEME: Hot Wheels Acceleracers * Injected into + body.theme-acceleracers applied when visiting /acceleracers. * Changes ONLY colors & visual styles — zero structural modifications. * * All selectors use `.theme-acceleracers` as prefix so they win over * Angular's encapsulated styles regardless of specificity order. * ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. CSS Variables ──────────────────────────────────────────────────── */ .theme-acceleracers { --primary-color: #c8001a; --primary-color-rgb: 200, 0, 26; --acc-bg: #07080f; --acc-surface: #0c0e1a; --acc-border: rgba(200, 0, 26, 0.3); --acc-text: rgba(255, 255, 255, 0.82); --acc-text-muted: rgba(255, 255, 255, 0.45); --acc-red: #c8001a; --acc-orange: #ff5a00; --acc-yellow: #ffd000; } /* Also expose to :root so child components that read --primary-color get it */ .theme-acceleracers, .theme-acceleracers * { --primary-color: #c8001a; --primary-color-rgb: 200, 0, 26; } /* ── 2. Body ────────────────────────────────────────────────────────────── */ .theme-acceleracers { background-color: var(--acc-surface) !important; } /* ── 3. Top header bar ──────────────────────────────────────────────────── */ .theme-acceleracers app-top-header { background-color: var(--acc-bg) !important; border-bottom-color: var(--acc-border) !important; } .theme-acceleracers app-top-header .contact-info, .theme-acceleracers app-top-header .contact-info a { color: var(--acc-text-muted) !important; } .theme-acceleracers app-top-header .contact-info a:hover { color: var(--acc-orange) !important; } .theme-acceleracers app-top-header .social-icon { color: var(--acc-text-muted) !important; } /* ── 4. Main navigation header ──────────────────────────────────────────── */ .theme-acceleracers app-main-header .content { background-color: var(--acc-surface) !important; border-bottom-color: var(--acc-border) !important; color: var(--acc-text) !important; } .theme-acceleracers app-main-header .content.sticky { box-shadow: 0 2px 20px rgba(200, 0, 26, 0.2) !important; } /* Decorative red-orange gradient on top of the nav bar */ .theme-acceleracers app-main-header .content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #c8001a 30%, #ff5a00 60%, transparent); pointer-events: none; } /* Logo text */ .theme-acceleracers app-main-header .logo span { color: var(--acc-text) !important; } /* Desktop menu links (base color) */ .theme-acceleracers app-main-header .desktop-menu a { color: var(--acc-text) !important; } /* Hamburger icon bars */ .theme-acceleracers app-main-header .hamburger-button span { background-color: var(--acc-text) !important; } .theme-acceleracers app-main-header .hamburger-button:hover span { background-color: var(--acc-orange) !important; } /* ── 5. Desktop submenu dropdown ────────────────────────────────────────── */ /* * Angular compiles `.submenu { background-color: #fff !important }` with an * attribute selector → specificity (0,0,2,0). * Using `.theme-acceleracers app-main-header .submenu` gives (0,0,2,1) which * wins outright even with equal !important weight. */ .theme-acceleracers app-main-header .submenu { background-color: #0f1222 !important; border-color: var(--acc-border) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(200, 0, 26, 0.25) !important; } .theme-acceleracers app-main-header .submenu li { border-top-color: rgba(200, 0, 26, 0.1) !important; } .theme-acceleracers app-main-header .submenu a { color: var(--acc-text) !important; } .theme-acceleracers app-main-header .submenu a:hover { background-color: rgba(200, 0, 26, 0.1) !important; color: var(--acc-orange) !important; border-left-color: var(--acc-red) !important; } .theme-acceleracers app-main-header .submenu a.active { background-color: rgba(200, 0, 26, 0.08) !important; color: var(--acc-orange) !important; border-left-color: var(--acc-red) !important; } /* ── 6. Mobile menu panel ───────────────────────────────────────────────── */ .theme-acceleracers app-main-header .mobile-menu { background-color: var(--acc-surface) !important; border-bottom-color: var(--acc-border) !important; } .theme-acceleracers app-main-header .mobile-menu a { color: var(--acc-text) !important; } .theme-acceleracers app-main-header .mobile-menu li.has-submenu .mobile-menu-item-row { color: var(--acc-text) !important; } .theme-acceleracers app-main-header .mobile-menu li { border-bottom-color: rgba(200, 0, 26, 0.12) !important; } .theme-acceleracers app-main-header .mobile-menu .submenu.mobile-submenu-panel li { border-top-color: rgba(200, 0, 26, 0.1) !important; } .theme-acceleracers app-main-header .mobile-menu a:hover { background-color: rgba(200, 0, 26, 0.08) !important; color: var(--acc-orange) !important; } .theme-acceleracers app-main-header .mobile-menu a.active { background-color: rgba(200, 0, 26, 0.1) !important; border-left-color: var(--acc-red) !important; color: var(--acc-orange) !important; } /* Mobile submenu items inside the mobile menu */ .theme-acceleracers app-main-header .mobile-menu .submenu { background-color: var(--acc-bg) !important; } .theme-acceleracers app-main-header .mobile-menu .submenu li { border-top-color: rgba(200, 0, 26, 0.1) !important; } .theme-acceleracers app-main-header .mobile-menu .submenu a { color: var(--acc-text-muted) !important; } /* ── 7. Footer ──────────────────────────────────────────────────────────── */ .theme-acceleracers app-footer { background-color: var(--acc-bg) !important; border-top: 1px solid var(--acc-border) !important; } .theme-acceleracers app-footer .container { color: var(--acc-text-muted) !important; } /* ── 8. Cart count badge (uses --primary-color, already set above ✓) ────── */