/* ========================================================================= RIVOT Motors — Light theme overrides Activated when . Dark stays the default (no attr or data-theme="dark"). Scoped so the existing dark stylesheet is untouched. Brand accent (orange #CE6723 / #ff830e) is intentionally preserved. ========================================================================= */ /* Theme-flipping variable for inline "!important" colors that CSS can't otherwise override (used in the model pages' .model-description). Dark keeps white; light switches to readable ink. */ html { --dyn-text: #ffffff; } html[data-theme="light"] { --dyn-text: #1b1d21; } :root { --lt-bg: #f4f5f7; /* page background */ --lt-surface: #ffffff; /* cards / panels */ --lt-surface-2: #eceef2; /* secondary surface */ --lt-surface-3: #e2e5ea; /* insets / hovers */ --lt-text: #1b1d21; /* primary text */ --lt-text-soft: #4b4f57; /* secondary text */ --lt-text-mut: #6b7078; /* muted / captions */ --lt-border: #d5d9e0; /* hairlines */ --lt-accent: #CE6723; /* brand orange — buttons/borders */ --lt-accent-ink:#a8460f; /* darker orange for TEXT (readable on light) */ } /* ---- Page canvas -------------------------------------------------------- */ /* background-attachment:fixed pins the gradient to the viewport so it does NOT shift as the (very tall) page scrolls. */ html[data-theme="light"], html[data-theme="light"] body { background: linear-gradient(120deg, #f7f8fa 0%, #eef0f4 55%, #e7eaef 100%) !important; background-attachment: fixed !important; color: var(--lt-text); } /* Broad text flip: dark ink for the common content elements. Buttons / accent chips are re-whitened further down. */ html[data-theme="light"] body, html[data-theme="light"] p, html[data-theme="light"] li, html[data-theme="light"] span, html[data-theme="light"] label, html[data-theme="light"] td, html[data-theme="light"] th, html[data-theme="light"] dd, html[data-theme="light"] dt, html[data-theme="light"] blockquote, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: var(--lt-text); } html[data-theme="light"] small, html[data-theme="light"] .text-muted, html[data-theme="light"] figcaption { color: var(--lt-text-mut); } html[data-theme="light"] a { color: var(--lt-text); } html[data-theme="light"] a:hover { color: var(--lt-accent); } /* ---- Logo: white mark -> solid black in light mode --------------------- */ /* Skipped on .hero-dark-top pages (header overlays a dark hero), UNLESS the page also opts back in with .logo-dark (white menu + black logo combo). */ html[data-theme="light"] body:not(.hero-dark-top) .logo img, html[data-theme="light"] body.logo-dark .logo img { filter: brightness(0) !important; } /* ---- 360° rotation icon: white -> black in light mode ------------------ */ html[data-theme="light"] .rotation-icon img { filter: brightness(0); } /* Desktop-only dark header: pages flagged .desk-dark-head keep the white (hero-dark-top) header on mobile, but switch to BLACK menu text + BLACK logo on desktop (>=992px, where the full menu shows). */ @media (min-width: 992px) { html[data-theme="light"] body.desk-dark-head .main-menu nav ul li a, html[data-theme="light"] body.desk-dark-head .navbar-collapse > li > a { color: var(--lt-text) !important; } html[data-theme="light"] body.desk-dark-head .main-menu nav ul li a:hover, html[data-theme="light"] body.desk-dark-head .navbar-collapse > li > a:hover { color: var(--lt-accent-ink) !important; } html[data-theme="light"] body.desk-dark-head .logo img { filter: brightness(0) !important; } } /* ---- Header / navigation ------------------------------------------------ */ /* Transparent header, same as the dark version (menu just overlays the page). */ html[data-theme="light"] .header-menu, html[data-theme="light"] #header-sticky, html[data-theme="light"] .main-menu-area, html[data-theme="light"] .topheader { background: transparent !important; box-shadow: none !important; } /* Default light-mode menu = dark text. Pages whose header sits over a dark hero opt out via body.hero-dark-top (keeps the white, dark-version menu). */ html[data-theme="light"] body:not(.hero-dark-top) .main-menu nav ul li a, html[data-theme="light"] body:not(.hero-dark-top) .navbar-collapse > li > a, html[data-theme="light"] body:not(.hero-dark-top) .nav-menu2 > li > a, html[data-theme="light"] body:not(.hero-dark-top) .nav-menu2 > li > span { color: var(--lt-text) !important; } html[data-theme="light"] body:not(.hero-dark-top) .main-menu nav ul li a:hover, html[data-theme="light"] body:not(.hero-dark-top) .navbar-collapse > li > a:hover { color: var(--lt-accent-ink) !important; } /* Dropdown submenus (light panel — fine on every page). */ html[data-theme="light"] .submenu, html[data-theme="light"] .submenu2 { background: var(--lt-surface) !important; border: none !important; box-shadow: none !important; } html[data-theme="light"] .submenu li a, html[data-theme="light"] .submenu2 li a { color: var(--lt-text) !important; } html[data-theme="light"] .submenu li a:hover, html[data-theme="light"] .submenu2 li a:hover { color: var(--lt-accent-ink) !important; background: var(--lt-surface-2) !important; } /* Mobile off-canvas nav */ html[data-theme="light"] .nav-menu2, html[data-theme="light"] .mean-nav, html[data-theme="light"] .mobile-menu { background: var(--lt-surface) !important; } /* Hamburger: dark on normal light pages, but WHITE on hero-dark-top pages (community/story) where it overlays a dark hero — matching their menu/logo. */ html[data-theme="light"] body:not(.hero-dark-top) .menu-toggle2, html[data-theme="light"] .submenu-toggle, html[data-theme="light"] .mean-bar, html[data-theme="light"] .meanmenu-reveal { color: var(--lt-text) !important; } /* ---- Generic dark surfaces --------------------------------------------- */ /* Map the recurring dark fills (#000/#111/#222/#333) to light surfaces. */ html[data-theme="light"] .section, html[data-theme="light"] section, html[data-theme="light"] .card, html[data-theme="light"] .box, html[data-theme="light"] .panel, html[data-theme="light"] .content-box, html[data-theme="light"] .feature-box, html[data-theme="light"] .info-box, html[data-theme="light"] .spec-box, html[data-theme="light"] .price-box, html[data-theme="light"] .modal-content { background-color: transparent; } /* Anything that is explicitly a dark card in the dark theme. */ html[data-theme="light"] [class*="dark"], html[data-theme="light"] .bg-black, html[data-theme="light"] .bg-dark { background-color: var(--lt-surface) !important; color: var(--lt-text) !important; } /* ---- Forms -------------------------------------------------------------- */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .form-group input, html[data-theme="light"] .form-control { background: var(--lt-surface) !important; color: var(--lt-text) !important; border: 1px solid var(--lt-border) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--lt-text-mut) !important; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { border-color: var(--lt-accent-ink) !important; box-shadow: 0 0 0 2px rgba(206, 103, 35, 0.18) !important; } /* ---- Buttons ------------------------------------------------------------ */ /* Keep accent buttons orange with white text; give plain/outline buttons a readable light treatment. */ html[data-theme="light"] .btn, html[data-theme="light"] button.accent, html[data-theme="light"] .btn-primary, html[data-theme="light"] .buy-btn, html[data-theme="light"] .cta, html[data-theme="light"] .cta-btn { color: #fff !important; } html[data-theme="light"] .btn-outline, html[data-theme="light"] .btn-light { background: var(--lt-surface) !important; color: var(--lt-text) !important; border: 1px solid var(--lt-border) !important; } /* ---- Footer ------------------------------------------------------------- */ html[data-theme="light"] footer { background-color: var(--lt-surface) !important; color: var(--lt-text) !important; border-top: 1px solid var(--lt-border) !important; } html[data-theme="light"] .footer-links a, html[data-theme="light"] .contact-info, html[data-theme="light"] .social-icons a { color: var(--lt-text-soft) !important; } html[data-theme="light"] .footer-links a:hover, html[data-theme="light"] .social-icons a:hover { color: var(--lt-accent-ink) !important; } html[data-theme="light"] .footer-bottom { color: var(--lt-text-mut) !important; border-top: 1px solid var(--lt-border) !important; } html[data-theme="light"] .footer-heading { color: var(--lt-accent-ink) !important; } /* ---- Overlays / translucent dark layers -------------------------------- */ html[data-theme="light"] .overlay, html[data-theme="light"] .modal-backdrop, html[data-theme="light"] .story-overlay { background: rgba(0, 0, 0, 0.45) !important; /* dim over media stays dark */ } html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .popover, html[data-theme="light"] .tooltip-inner { background: var(--lt-surface) !important; color: var(--lt-text) !important; border: 1px solid var(--lt-border) !important; } /* Horizontal rules / borders that were dark on dark. */ html[data-theme="light"] hr, html[data-theme="light"] .divider { border-color: var(--lt-border) !important; } /* ---- Inline-style overrides -------------------------------------------- */ /* Inline styles beat selectors, so these need attribute matching + !important to flip hard-coded white text / black fills embedded in the HTML. */ html[data-theme="light"] [style*="color:#fff"], html[data-theme="light"] [style*="color: #fff"], html[data-theme="light"] [style*="color:#FFF"], html[data-theme="light"] [style*="color:#ffffff"], html[data-theme="light"] [style*="color: #ffffff"], html[data-theme="light"] [style*="color:white"], html[data-theme="light"] [style*="color: white"] { color: var(--lt-text) !important; } html[data-theme="light"] [style*="background:#000"], html[data-theme="light"] [style*="background: #000"], html[data-theme="light"] [style*="background-color:#000"], html[data-theme="light"] [style*="background-color: #000"], html[data-theme="light"] [style*="background:#111"], html[data-theme="light"] [style*="background:#222"], html[data-theme="light"] [style*="background-color:#222"], html[data-theme="light"] [style*="background:#333"], html[data-theme="light"] [style*="background-color:#333"] { background-color: var(--lt-surface) !important; } /* Preserve white text where it sits on the orange accent (readability). */ html[data-theme="light"] [style*="background:#CE6723"] [style*="color"], html[data-theme="light"] [style*="background:#ce6723"], html[data-theme="light"] .footer-heading, html[data-theme="light"] [class*="btn"][style*="color:#fff"] { color: inherit !important; } html[data-theme="light"] .accent, html[data-theme="light"] .highlight, html[data-theme="light"] .price { color: var(--lt-accent-ink) !important; } /* ========================================================================= products.html (and similar model-grid pages) — page has its own embedded dark