/* Dark Mode Overrides — applied when */
/* Base backgrounds */
html.dark body,
html.dark main {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
/* Text colors */
html.dark .text-n100 { color: #f0f0f0 !important; }
html.dark .text-n50 { color: #b0b0b0 !important; }
html.dark .text-n30 { color: #999999 !important; }
html.dark .text-n20 { color: #888888 !important; }
html.dark .text-black { color: #f0f0f0 !important; }
html.dark p { color: #ccc; }
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 { color: #f0f0f0; }
/* Backgrounds */
html.dark .bg-n0 { background: #1a1a1a !important; }
html.dark .bg-n10 { background: #1e1e1e !important; }
html.dark .bg-n20 { background: #222222 !important; }
html.dark .bg-n0-5 { background: rgba(255, 255, 255, 0.03) !important; }
/* Cards, sections, containers */
html.dark .card,
html.dark .card-body {
background-color: #1e1e1e !important;
border-color: #333 !important;
color: #e0e0e0 !important;
}
html.dark section:not(.footer-section) {
background-color: #121212;
}
html.dark .bg-secondary {
background: #2a2518 !important;
}
/* Header — transparent by default, matching light mode */
html.dark .header-section {
background-color: transparent !important;
}
/* Only add dark bg when scrolled */
html.dark .header-section.scroll-header {
background-color: rgba(13, 13, 13, 0.9) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
html.dark .header-section .bg-n100 {
background: #0a0a0a !important;
}
html.dark .search-bar form,
html.dark .header-search-form {
background-color: #2a2a2a !important;
border-color: #444 !important;
}
html.dark .search-bar input,
html.dark .header-search-form input {
color: #e0e0e0 !important;
}
html.dark .search-bar input::placeholder,
html.dark .header-search-form input::placeholder {
color: #888 !important;
}
/* Navigation — match exact template specificity + override */
html.dark .navbar-area .nav-menu-items .menu-item button,
html.dark .navbar-area .nav-menu-items .menu-link a,
html.dark .navbar-area .nav-menu-items .menu-item button a,
html.dark .navbar-area .nav-menu-items a,
html.dark .navbar-area a,
html.dark .navbar-area button {
color: #f0f0f0 !important;
}
/* Splitting.js — the .char is transparent, visible text comes from ::after.
Override the entire chain: force .char color so ::after inherits it */
html.dark .navbar-area .slide-vertical .char,
html.dark .navbar-area .slide-horizontal .char,
html.dark .slide-vertical .char,
html.dark .slide-horizontal .char {
color: #f0f0f0 !important;
-webkit-text-fill-color: #f0f0f0 !important;
}
html.dark .navbar-area .slide-vertical .char::before,
html.dark .navbar-area .slide-vertical .char::after,
html.dark .navbar-area .slide-horizontal .char::before,
html.dark .navbar-area .slide-horizontal .char::after,
html.dark .slide-vertical .char::before,
html.dark .slide-vertical .char::after,
html.dark .slide-horizontal .char::before,
html.dark .slide-horizontal .char::after {
color: #f0f0f0 !important;
-webkit-text-fill-color: #f0f0f0 !important;
}
/* Dropdown / sub-menu */
html.dark .sub-menu {
background-color: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .sub-menu li a,
html.dark .navbar-area .sub-menu a,
html.dark .navbar-area .nav-menu-items .sub-menu a {
color: #ccc !important;
}
html.dark .sub-menu a:hover,
html.dark .sub-menu li a:hover {
color: #bcd800 !important;
}
/* Active page box — invert for dark mode */
html.dark .navbar-area .nav-menu-items .menu-link a.active,
html.dark .navbar-area .nav-menu-items .menu-item button.active,
html.dark .navbar-area .nav-menu-items .menu-item.active button {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* Menu icon carets */
html.dark .menu-icon,
html.dark .menu-icon i {
color: #f0f0f0 !important;
}
/* Nav buttons (cart, user, search, toggle icons) */
html.dark .nav-btns .text-n100,
html.dark .nav-btns a,
html.dark .nav-btns button,
html.dark .cart-btn,
html.dark .user-btn,
html.dark .toggle-search-btn,
html.dark .menu-toggle-btn {
color: #f0f0f0 !important;
}
/* "Featured" link in hero */
html.dark .hover-text-secondary2,
html.dark a.fw-medium {
color: #ccc !important;
}
/* Hero section */
html.dark .hero-section,
html.dark .hero-section-2,
html.dark [class*="hero"] {
background-color: #121212 !important;
}
html.dark .bg-secondary.card-tilt {
background: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .border-n0 {
border-color: #333 !important;
}
/* "RAD" background decorative text — z-index:-1 hides it behind dark bg, raise it */
html.dark .bg-text,
html.dark .bg-text.style-2,
html.dark .bg-text.style-3 {
z-index: 0 !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 85%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
pointer-events: none !important;
}
/* "Ride All Day." gradient — flip for dark bg (green to white) */
html.dark .hero-2-content h2 > span:first-child {
background: linear-gradient(0deg, #bcd800 0%, #ffffff 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* "Stay Comfortable!" text */
html.dark .hero-2-content h2 > span:nth-child(2) {
color: #e0e0e0 !important;
-webkit-text-fill-color: #e0e0e0 !important;
}
/* Shop Now button — light version in dark mode */
html.dark .btn-secondary,
html.dark a.btn-secondary {
background: #ffffff !important;
border-color: #ffffff !important;
color: #1a1a1a !important;
}
html.dark .btn-secondary:hover,
html.dark a.btn-secondary:hover {
background: #bcd800 !important;
border-color: #bcd800 !important;
color: #1a1a1a !important;
}
/* Product section wrapper */
html.dark .product-section {
background-color: #121212 !important;
}
/* Product cards — light: white bg + subtle shadow → dark: elevated dark bg + subtle border */
html.dark .product-card {
background: #1e1e1e !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
border-color: #333 !important;
}
/* Divider line inside product card */
html.dark .product-card .bg-n100-1 {
background: rgba(255, 255, 255, 0.1) !important;
}
html.dark .border-10 {
border-color: #333 !important;
}
/* Buttons — keep brand buttons, darken outlines */
html.dark .outline-btn {
border-color: #f0f0f0 !important;
color: #f0f0f0 !important;
}
html.dark .outline-btn:hover {
color: #ffffff !important;
}
/* Forms */
html.dark input,
html.dark select,
html.dark textarea {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
/* Inputs inside styled wrappers — transparent so they match the wrapper bg */
html.dark input.border-0,
html.dark textarea.border-0 {
background-color: transparent !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #777 !important;
}
/* Tables */
html.dark table,
html.dark .table {
color: #e0e0e0 !important;
}
html.dark .table td,
html.dark .table th {
border-color: #333 !important;
color: #e0e0e0 !important;
}
html.dark .table-striped tbody tr:nth-of-type(odd) {
background-color: #1e1e1e !important;
}
/* Cart sidebar */
html.dark .cart-content-wrapper {
background-color: #1a1a1a !important;
}
html.dark .cart-box-top {
border-color: #333 !important;
}
html.dark .checkout-wrapper {
background-color: #222 !important;
}
html.dark .cart-item {
border-color: #333 !important;
}
/* Inner hero / breadcrumb — text over background image, keep dark for contrast */
html.dark .inner-hero-section .text-n100,
html.dark .inner-hero-section .text-h1 {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
html.dark .inner-hero-section .breadcrumb a,
html.dark .inner-hero-section .breadcrumb-item,
html.dark .inner-hero-section .breadcrumb-item.active a {
color: #333 !important;
}
/* Also fix the splitting chars in inner hero */
html.dark .inner-hero-section .slide-vertical .char,
html.dark .inner-hero-section .char {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
html.dark .inner-hero-section .slide-vertical .char::before,
html.dark .inner-hero-section .slide-vertical .char::after {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
/* Breadcrumb / page titles */
html.dark .breadcrumb-section,
html.dark .page-title-area {
background-color: #0d0d0d !important;
}
/* Accordions / FAQ */
html.dark .accordion-item,
html.dark .accordion-button {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
border-color: #333 !important;
}
html.dark .accordion-body {
background-color: #1a1a1a !important;
color: #ccc !important;
}
/* Blog cards */
html.dark .blog-card,
html.dark .blog-section {
background-color: #121212 !important;
}
/* Review section */
html.dark .review-card {
background-color: #1e1e1e !important;
border-color: #333 !important;
}
/* Misc borders */
html.dark .border-n100-1 { border-color: rgba(255,255,255,0.1) !important; }
html.dark .border-n100-5 { border-color: rgba(255,255,255,0.08) !important; }
html.dark .border-n100-6 { border-color: rgba(255,255,255,0.15) !important; }
html.dark .border-bottom { border-color: #333 !important; }
html.dark hr { border-color: #333 !important; }
/* Swiper arrows — flip to white bg with dark arrows */
html.dark .swiper-btns button,
html.dark .hero-2-swiper-next,
html.dark .hero-2-swiper-prev {
background: #ffffff !important;
color: #1a1a1a !important;
}
/* Swiper / slider — keep images full quality */
html.dark .swiper-slide {
background-color: #121212 !important;
}
/* Slider images — full brightness, no crop */
html.dark .slider__image,
html.dark .swiper img {
opacity: 1 !important;
}
/* Back to top button */
html.dark .back-to-top {
background-color: #2a2a2a !important;
color: #f0f0f0 !important;
}
/* Offer badge — flip to white bg in dark mode */
html.dark .offer-badge {
background: #ffffff !important;
box-shadow: 0 4px 20px rgba(255,255,255,0.15) !important;
}
html.dark .offer-badge svg text {
fill: #1a1a1a !important;
}
html.dark .offer-badge div span:first-child {
color: #1a1a1a !important;
}
/* Scrollbar */
html.dark ::-webkit-scrollbar-track {
background: #1a1a1a;
}
html.dark ::-webkit-scrollbar-thumb {
background: #444;
}
/* Hide vanilla-tilt glare in dark mode — white shine on dark bg looks grey */
html.dark .js-tilt-glare {
display: none !important;
}
/* Logo in dark mode — keep full brightness */
html.dark .logo img,
html.dark .footer-logo img {
filter: brightness(1.1);
}
/* Dark mode toggle */
#themeToggleBtn:hover { opacity: 0.7; }
html.dark #themeToggleBtn { color: #f0f0f0 !important; }
/* ========= About Us — Featured section icons ========= */
html.dark .feature-item .icon-70px img {
filter: invert(1) !important;
}
/* Featured section divider lines */
html.dark .feature-item .bg-n100-1 {
background: rgba(255, 255, 255, 0.1) !important;
}
/* ========= About Us — Core Values section ========= */
html.dark .core-values {
background-color: #1a1a1a !important;
}
html.dark .feature-card {
background-color: #1e1e1e !important;
}
/* Core Values icons — invert black PNGs to white */
html.dark .feature-card .icon-60px img {
filter: invert(1) !important;
}
/* On hover (green bg), keep text dark so it's readable on #E9FFA4 */
html.dark .box-style.box-primary:hover h4,
html.dark .box-style.box-primary:hover .char,
html.dark .box-style.box-primary:hover .char::before,
html.dark .box-style.box-primary:hover .char::after {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
html.dark .box-style.box-primary:hover p {
color: #333 !important;
}
/* On hover, flip icon back to black (it's already inverted to white) */
html.dark .box-style.box-primary:hover .icon-60px img {
filter: invert(0) !important;
}
/* ========= Contact Us page ========= */
/* Contact cards — dark bg + border */
html.dark .contact-card {
background-color: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .contact-card .icon {
color: #ffffff !important;
background: #2a2a2a !important;
}
html.dark .contact-card:hover .icon {
color: #ffffff !important;
background: #EB453B !important;
}
/* box-n20 hover — use brand green tint instead of near-white #F5F9F3 */
html.dark .box-style.box-n20::before {
background: rgba(188, 216, 0, 0.25) !important;
}
/* Contact form — wrapper divs get dark bg, inputs stay transparent */
html.dark .contact-form-section .border-n100-1 {
background-color: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .contact-form-section input,
html.dark .contact-form-section textarea {
background-color: transparent !important;
border-color: transparent !important;
}
html.dark .contact-form-section .text-xl i {
color: #999 !important;
}
/* Contact section background */
html.dark .contact-section {
background-color: #121212 !important;
}
html.dark .contact-form-section {
background-color: #121212 !important;
}
/* FAQ section */
html.dark .faqs-section {
background-color: #121212 !important;
}
/* ===== Product Detail Page (view.php) ===== */
/* Description section background */
html.dark .product-description-section {
background-color: #121212 !important;
}
/* Section title & sub-titles */
html.dark .section-title {
color: #f0f0f0 !important;
border-bottom-color: #333 !important;
}
html.dark .sub-title { color: #e0e0e0 !important; }
/* Description text, feature/material lists */
html.dark .product-description { color: #ccc !important; }
html.dark .feature-list li,
html.dark .material-list li { color: #bbb !important; }
/* Manufacturer box */
html.dark .manufacturer-box {
background: #1e1e1e !important;
border-left-color: #667eea !important;
}
html.dark .manufacturer-box p,
html.dark .manufacturer-box strong {
color: #e0e0e0 !important;
}
/* Key Highlights table */
html.dark .product-table th {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
html.dark .product-table td {
background-color: #121212 !important;
color: #ccc !important;
}
html.dark .product-table,
html.dark .product-table th,
html.dark .product-table td {
border-color: #333 !important;
}
/* Customer Reviews Section */
html.dark .customer-reviews-section {
background: #121212 !important;
}
/* Review summary box */
html.dark .review-summary-box {
background: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .review-avg-rating { color: #f0f0f0 !important; }
html.dark .review-total-count { color: #999 !important; }
html.dark .review-bar-label { color: #999 !important; }
html.dark .review-bar-track { background: #333 !important; }
html.dark .review-bar-count { color: #999 !important; }
/* Sort bar */
html.dark .review-sort-bar { color: #999 !important; }
html.dark .review-sort-link { color: #999 !important; }
html.dark .review-sort-link:hover,
html.dark .review-sort-link.active {
background: #667eea !important;
color: #fff !important;
}
/* Review items */
html.dark .review-item {
background: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .review-author-name { color: #f0f0f0 !important; }
html.dark .review-item-date { color: #888 !important; }
html.dark .review-item-text { color: #ccc !important; }
html.dark .review-helpful-btn {
color: #999 !important;
border-color: #444 !important;
}
html.dark .review-helpful-btn:hover {
background: #2a2a2a !important;
border-color: #666 !important;
}
/* Empty reviews */
html.dark .review-empty {
background: #1e1e1e !important;
border-color: #444 !important;
color: #888 !important;
}
html.dark .review-empty p { color: #888 !important; }
/* Review form */
html.dark .review-form-section {
background: #1e1e1e !important;
border-color: #333 !important;
}
html.dark .review-form-title { color: #f0f0f0 !important; }
html.dark .review-form-message { color: #999 !important; }
html.dark .review-form-label { color: #ccc !important; }
html.dark .review-form textarea {
background: #121212 !important;
border-color: #444 !important;
color: #e0e0e0 !important;
}
html.dark .review-form textarea:focus {
border-color: #667eea !important;
}
/* Review alerts */
html.dark .review-alert-success {
background: #064e3b !important;
color: #a7f3d0 !important;
border-color: #065f46 !important;
}
html.dark .review-alert-info {
background: #1e3a5f !important;
color: #93c5fd !important;
border-color: #1e40af !important;
}
html.dark .review-alert-warning {
background: #78350f !important;
color: #fcd34d !important;
border-color: #92400e !important;
}