/* * White Scheme Preview — allied-equipment-2026 * Active only when . All rules are unlayered, so * they win over the theme's @layer'd Tailwind utilities without !important. * * Scheme mapping: * page gray #777 -> white * footer #383838 -> light gray * white text -> steel-800 (except on red / black elements, which stay) * brand reds #eb323a/b, gradients, black icon chips -> unchanged */ /* ========================================================================== UNSCOPED responsive hotfix — applies in BOTH schemes. Theme bug (pre-existing, not part of the white-scheme preview): the desktop nav appears at xl (1280px) but the primary menu needs ~1360px, so both header menus wrap in the 1280–1360px band. Compact the nav typography in that band so it fits. Port this into the allied-equipment-2026 theme before launch. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1420px) { .primary-menu a { font-size: 14px; letter-spacing: 0; padding-inline: 6px; } .top-menu a { font-size: 14px; padding-inline: 10px; } } /* second band: at 2xl (1536px) the theme jumps link padding 8px -> 16px, which wraps the primary menu until ~1550px — ease the jump in */ @media (min-width: 1536px) and (max-width: 1600px) { .primary-menu a { padding-inline: 9px; } } html[data-scheme="white"] body { background-color: #fff; color: #22262c; } /* --- section backgrounds --- */ html[data-scheme="white"] .bg-\[\#777\], html[data-scheme="white"] .bg-\[\#777777\] { background-color: #fff; } html[data-scheme="white"] .bg-\[\#383838\] { background-color: #f4f5f6; } html[data-scheme="white"] .bg-steel-900, html[data-scheme="white"] .bg-steel-800, html[data-scheme="white"] .bg-steel-700 { background-color: #f4f5f6; } /* mid-gray tiles (#777777 chips already covered above) */ html[data-scheme="white"] .bg-gray-100 { background-color: #f4f5f6; } /* --- text --- */ html[data-scheme="white"] .text-white { color: #15181c; } /* white borders would vanish on white */ html[data-scheme="white"] .border-white { border-color: #d6dade; } /* footer link color comes from the [&_a]:text-white arbitrary variant */ html[data-scheme="white"] .\[\&_a\]\:text-white a { color: #22262c; } /* --- exceptions: red + black brand elements keep their white text --- */ html[data-scheme="white"] :is( .bg-brand, .bg-brand-dark, .bg-\[\#eb323a\], .bg-\[\#eb323b\], .bg-black ):is(.text-white), html[data-scheme="white"] :is( .bg-brand, .bg-brand-dark, .bg-\[\#eb323a\], .bg-\[\#eb323b\], .bg-black ) .text-white, html[data-scheme="white"] .content-info, html[data-scheme="white"] .content-info .text-white, html[data-scheme="white"] .content-info a { color: #fff; } /* mobile slide-out drawer stays dark: its links inherit white from theme rules, not utility classes, so flipping its background would strand them */ html[data-scheme="white"] .fixed.bg-steel-900 { background-color: #0c0e11; } html[data-scheme="white"] .fixed.bg-steel-900 .text-white { color: #fff; } /* decorative flourish images (dot texture, dash/hatch bars, plus pattern) are solid rectangles baked on #777 with a lighter pattern. Invert first (pattern becomes darker than bg), then brighten so the bg clips to pure white; multiply blending erases the rectangle edge over any light backdrop, leaving just a subtle gray pattern. Source pixels are all 112-150, so invert can't produce black artifacts. */ html[data-scheme="white"] img[src*="hero-dots"], html[data-scheme="white"] img[src*="hero-dashes"], html[data-scheme="white"] img[src*="hero-bg-plus"] { filter: invert(1) brightness(1.9); mix-blend-mode: multiply; } /* carousel/rotator indicators: inactive dots are white in the theme — invisible on white. Gray them; active stays brand red (re-asserted because these unlayered rules would otherwise beat the theme's layered .active rules). */ html[data-scheme="white"] .hero-dot, html[data-scheme="white"] .service-dot { background-color: #a7acb3; } html[data-scheme="white"] .hero-dot.active, html[data-scheme="white"] .service-dot.active { background-color: #eb323a; } html[data-scheme="white"] .testimonial-dot .dot-inactive { color: #a7acb3; } /* Trusted Brands logos with white artwork: invert lightness, keep hue roughly intact (red starburst stays red, green mountain stays green) */ html[data-scheme="white"] img[alt="Hivac"], html[data-scheme="white"] img[alt="Northern"] { filter: invert(1) hue-rotate(180deg); } /* Keystone's red starburst washes out to pale pink without a saturation boost */ html[data-scheme="white"] img[alt="Keystone"] { filter: invert(1) hue-rotate(180deg) saturate(3); } /* primary + top nav links get white from theme rules — flip them dark */ html[data-scheme="white"] .primary-menu a, html[data-scheme="white"] .top-menu a { color: #15181c; } /* menu hover + current-page states are white in the theme — use brand red */ html[data-scheme="white"] .primary-menu a:hover, html[data-scheme="white"] .top-menu a:hover, html[data-scheme="white"] .primary-menu :is(.current-menu-item, .current_page_item, .active) > a, html[data-scheme="white"] .top-menu :is(.current-menu-item, .current_page_item, .active) > a { color: #eb323a; } /* the primary menu's animated underline is a white gradient */ html[data-scheme="white"] .primary-menu a { background-image: linear-gradient(90deg, #eb323a, #eb323a); } /* interior page copy: .prose-content (and its headings) hard-codes white */ html[data-scheme="white"] .prose-content { color: #22262c; } html[data-scheme="white"] .prose-content h2, html[data-scheme="white"] .prose-content h3 { color: #15181c; } /* brand-row headings on equipment pages hard-code white */ html[data-scheme="white"] .brand-row__heading-line { color: #15181c; } /* red gradient photo overlays keep white text on top of imagery */ html[data-scheme="white"] .bg-gradient-to-l.from-\[\#eb323a\] .text-white, html[data-scheme="white"] :has(> .bg-gradient-to-l.from-\[\#eb323a\]) > .text-white { color: #fff; }