/* * DEL MONACO V215 — HOME-ONLY RESPONSIVE HERO FIX * ------------------------------------------------ * Regression guard: * Products reuses the live homepage , so every stylesheet linked * from public_html/index.php also appears on /products/. * * This file therefore applies NOTHING unless the homepage-only V213 JS has * added body.dm213-ready. /products/ never receives that class because the * V213 script exits immediately outside pathname "/". * * Result: * - preserves the accepted V214 hero behavior on the real homepage * - fixes 768–1024px/tablet/iPhone-landscape half-width stage * - keeps title/supporting copy readable through 1024px * - has zero layout selectors active on .dm200-products-page */ @media (max-width: 1024px) { body.dm213-ready:not(.dm200-products-page) { max-width: 100% !important; overflow-x: clip !important; } body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero { width: 100% !important; min-width: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy { position: relative !important; width: 100% !important; min-width: 100% !important; max-width: none !important; flex: 0 0 100% !important; flex-basis: 100% !important; grid-column: 1 / -1 !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; z-index: 2 !important; } /* Preserve the accepted V214 composition on HOME only. */ body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm213-mobile-hero-visual { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; } body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1, body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 *, body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1::before, body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1::after, body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 *::before, body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 *::after { color: #fff8e8 !important; -webkit-text-fill-color: #fff8e8 !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .34) !important; } body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy p { color: rgba(255, 248, 232, .96) !important; -webkit-text-fill-color: rgba(255, 248, 232, .96) !important; text-shadow: 0 1px 5px rgba(0, 0, 0, .30) !important; } } /* Explicit tablet / iPhone landscape root-cause correction. * V213 used max-width:52vw on .dm213-hero-copy; on this build that class is * the whole .dm189-stage, so at ~946px the stage became ~492px wide. */ @media (min-width: 768px) and (max-width: 1024px) { body.dm213-ready:not(.dm200-products-page) #top.dm189-home-hero .dm189-stage.dm213-hero-copy { width: 100% !important; min-width: 100% !important; max-width: none !important; flex: 0 0 100% !important; } }