/* LutLocker light/dark theme. `theme-dark` class on switches modes. */ /* Smooth scrolling for anchor links site-wide; wheel easing lives in theme.js (which drives its own scrolls with behavior: "instant" to bypass this). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html.theme-dark { color-scheme: dark; --background-primary: 16 16 16; --text-primary: 255 255 255; /* header + footer pull from their own vars (see .header/.footer in theme.css) */ --header-background: 18 18 18; --header-text: 255 255 255; --footer-background: 12 12 12; --footer-text: 255 255 255; --dialog-background: 24 24 24; } html.theme-dark body { background: rgb(16 16 16); color: #fff; } /* App blocks (benefit lists, spec tables…) hardcode dark ink; their color declarations were rewritten to use var(--ll-ink, ). */ html.theme-dark { --ll-ink: #fff; } /* SVG icons with baked-in dark fills */ html.theme-dark [id^="shopify-section-"] svg [fill="#1c1c1c"], html.theme-dark [id^="shopify-section-"] svg[fill="#1c1c1c"], html.theme-dark [id^="shopify-section-"] svg [fill="#1C1C1C"], html.theme-dark [id^="shopify-section-"] svg [fill="black"], html.theme-dark [id^="shopify-section-"] svg[fill="black"] { fill: #fff; } /* Flip sections and product cards. !important beats the per-element inline style="--background: ...; --text-color: ..." the theme uses. */ html.theme-dark [id^="shopify-section-"], html.theme-dark .shopify-section, html.theme-dark .bg-custom, html.theme-dark [style*="--background: 242 242 242"], html.theme-dark [style*="--background: 255 255 255"], html.theme-dark [style*="--background: 232 232 232"] { --background: 18 18 18 !important; --text-color: 255 255 255 !important; } /* Any element that pins dark text inline gets light text in dark mode. */ html.theme-dark [style*="--text-color: 28 28 28"], html.theme-dark [style*="--text-color: 0 0 0"] { --text-color: 255 255 255 !important; } /* Product pages include app blocks with hardcoded text and panel colors. */ html:not(.theme-dark) :is( .product, .product-info, .product-info__block-item, .product-info__liquid, .quick-buy-drawer, .shopify-app-block, table-flow, [class*="product-comparison"], [class*="video-text"], [class*="lazy-video-content"] ) { --text-color: 0 0 0 !important; --text-primary: 0 0 0 !important; --text-subdued: 0 0 0 !important; --ll-ink: #000 !important; color: #000 !important; } html.theme-dark :is( .product, .product-info, .product-info__block-item, .product-info__liquid, .quick-buy-drawer, .shopify-app-block, table-flow, [class*="product-comparison"], [class*="video-text"], [class*="lazy-video-content"] ) { --text-color: 255 255 255 !important; --text-primary: 255 255 255 !important; --text-subdued: 255 255 255 !important; --background: 18 18 18 !important; --background-primary: 18 18 18 !important; --dialog-background: 24 24 24 !important; --ll-ink: #fff !important; color: #fff !important; } html:not(.theme-dark) :is( .product, .product-info, .quick-buy-drawer, .shopify-app-block, table-flow, [class*="product-comparison"], [class*="video-text"], [class*="lazy-video-content"] ) :is(p, span, div, h1, h2, h3, h4, h5, h6, li, td, th, label) { color: #000 !important; -webkit-text-fill-color: #000 !important; } html.theme-dark :is( .product, .product-info, .quick-buy-drawer, .shopify-app-block, table-flow, [class*="product-comparison"], [class*="video-text"], [class*="lazy-video-content"] ) :is(p, span, div, h1, h2, h3, h4, h5, h6, li, td, th, label) { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-dark :is( [style*="color: #121212"], [style*="color:#121212"], [style*="color: #1c1c1c"], [style*="color:#1c1c1c"], [style*="color: #000000"], [style*="color:#000000"], [style*="color: black"], [style*="color:black"] ) { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-dark [style*="-webkit-text-fill-color: transparent"] { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #fff !important; color: #fff !important; } html.theme-dark :is( [style*="background-color:#f2f2f2"], [style*="background-color: #f2f2f2"], [style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background: #f2f2f2"], [style*="background:#f2f2f2"], [style*="background: #ffffff"], [style*="background:#ffffff"] ) { background: #121212 !important; background-color: #121212 !important; } html.theme-dark .text-subdued, html.theme-dark compare-at-price, html.theme-dark .product-info__price .line-through { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* The rule above has to force white so subdued text survives on a dark background, but a full-white struck-through price competes with the sale price next to it. Half strength reads as grey without fighting the !important. */ html.theme-dark :is(compare-at-price, .line-through) { opacity: 0.5; } html.theme-dark .section-product-comparison, html.theme-dark .section-product-comparison [class*="ss_comparison_table"], html.theme-dark .section-product-comparison .product-comparison { --gradient-start: #121212 !important; --gradient-end: #121212 !important; --primary-column-bg: #1c1c1c !important; --primary-column-gradient-start: #1c1c1c !important; --primary-column-gradient-end: #2a2a2a !important; --primary-column-text: #ffffff !important; --feature-text-color: #ffffff !important; --competitor-text-color: #ffffff !important; --divider-color: rgba(255, 255, 255, 0.22) !important; --check-color: #ffffff !important; --cross-color: #ffffff !important; background: #121212 !important; background-color: #121212 !important; color: #ffffff !important; } html.theme-dark .section-product-comparison .product-comparison__column--primary { background: #1c1c1c !important; background-color: #1c1c1c !important; } html.theme-dark .section-product-comparison .product-comparison__row .product-comparison__feature-label, html.theme-dark .section-product-comparison .product-comparison__row .product-comparison__column--competitor { border-color: rgba(255, 255, 255, 0.22) !important; } html.theme-dark .section-product-comparison .product-comparison__icon--cross svg [fill="#1c1c1c"], html.theme-dark .section-product-comparison .product-comparison__icon--cross svg [fill="#1C1C1C"] { fill: #ffffff !important; } /* Keep the red accent (announcement / promo) sections red. */ html.theme-dark [style*="--background: 242 71 71"] { --background: 242 71 71 !important; --text-color: 242 242 242 !important; } /* Logo: black artwork in light mode, inverted to white in dark mode. */ html.theme-dark img[src*="lutlocker/logo-black"] { filter: invert(1); } /* Hide the mobile search icon (left of the logo); on mobile the theme toggle sits alone on the right side of the header instead. */ header a[aria-controls="search-drawer"].sm\:hidden { display: none; } @media screen and (max-width: 999px) { .navigation-drawer .panel-footer__account-link { display: none !important; } } /* Slightly larger header logo on desktop (1150px is where the full desktop nav layout kicks in). `html` prefix outranks the section's inline