/* ========================================================================== Milagrow homepage: Diwali 2026 ("Deepavali = a row of lamps") ON/OFF SWITCH: loaded by one identical line in each of the three includes (src/views/inc/docHead_seo.php, docHead.php, docHead_prod.php; search "Diwali theme"), active until 11 Nov 2026 00:00 IST. Delete those lines and the site is exactly as before. Site-wide: promo bar, cart count, Book Demo, contact strip, footer (shared header/footer). Homepage-only: everything rooted at a homepage section id (those ids exist on no other page). Rules: colour / background / box-shadow / outline / filter (leaf elements only) / opacity / animation, plus out-of-flow pseudo-elements with pointer-events:none and content:"". One approved layout exception: #heroContainer padding (section 3). Every selector is rooted at a section id so modals, drawer and dropdown stay untouched. Motion level: subtle. prefers-reduced-motion stops every CSS animation on the page. ========================================================================== */ /* ---------- Tokens ---------- */ body { --diya-flame: #ffb238; /* flame core, glows */ --diya-ember: #c2410c; /* flame base, icon accents (AA on ivory) */ --marigold: #f6a313; /* genda phool: garlands, hover rings */ --sindoor: #b3121f; /* badges, CTAs (white text 6.9:1) */ --milagrow-maroon: #810000; /* brand primary: promo bar band, deep end of red gradients */ --brass: #b8862b; /* frames, kolam ink on light */ --brass-light: #e2b866; /* edges on dark / on red */ --ivory-paper: #fff8ec; /* cards, testimonials */ --haldi-cream: #ffebc7; /* contact strip, cashback box */ --rice-flour: #fff3d6; /* text + pattern ink on dark bands */ --peacock-deep: #034a4a; /* tutorials + footer bands: deeper cut of brand teal #036666 (mgSuccess) */ --ink: #2a1e14; /* text on ivory */ --ink-soft: #5a4632; --price-muted: #4b5563; /* MRP/MOP, rating count: 7.2:1 on ivory */ --price-off: #15803d; /* "% off": 4.8:1 on ivory */ /* motifs: SVG data URIs, no extra requests */ --kolam-light: url("data:image/svg+xml,"); /* bandhani: tie-dye dot clusters, traditionally white on red. Two inks, staggered grid. */ --bandhani: url("data:image/svg+xml,"); --bandhani-soft: url("data:image/svg+xml,"); --toran: url("data:image/svg+xml,"); --lights: url("data:image/svg+xml,"); --lights-halo: url("data:image/svg+xml,"); --rangoli-corner-tl: url("data:image/svg+xml,"); --rangoli-corner-bl: url("data:image/svg+xml,"); --paisley-tl: url("data:image/svg+xml,"); --paisley-br: url("data:image/svg+xml,"); --garland-divider: url("data:image/svg+xml,"); /* five diyas per 220px tile: gentle flicker (default) and a static copy for reduced motion */ --diya-row-static: url("data:image/svg+xml,"); --diya-row-flicker: url("data:image/svg+xml,"); } /* ---------- 1. Announcement bar: brand maroon + bandhani + string of lights ---------- */ body #promoBar { background-color: var(--milagrow-maroon); background-image: var(--bandhani); background-size: 28px 28px; color: var(--rice-flour); } /* already position:relative z-10; lights hang 12px below its edge over the nav padding */ body #promoBar::before, body #promoBar::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 4px); height: 16px; pointer-events: none; background: var(--lights) repeat-x 0 0 / 72px 16px; } body #promoBar::after { background-image: var(--lights-halo); opacity: 0.6; } /* ---------- 2. Header: cart count glow (toran lives on the hero, see 3) ---------- */ body #navHeader a[href$="confirm-cart"] > div.bg-mgPrimary { background-color: var(--sindoor); box-shadow: 0 0 0 1.5px var(--brass-light), 0 0 10px 2px rgba(255, 178, 56, 0.65); } /* Book Demo (fixed, every page): keep its gradient animation, warm the colours */ body #bookDemoBtn { background-image: linear-gradient(to right, #810000, #b3121f 35%, #9a3412 55%, #810000); box-shadow: inset 0 0 0 1px var(--brass-light); } /* ---------- 3. Hero: toran, brass-framed banner, lamp-lit card ---------- */ /* #heroContainer is already position:relative; overflow-x:clip only, so the toran may hang down. z-index 5 = above the hero swiper (z-1), below promo bar (10), menu (30), sticky nav (29), modals (50). */ /* LAYOUT EXCEPTION, approved by client at review: py-4 (1rem) -> 3rem top and bottom. Everything below the hero moves down 64px while the theme is on. */ body #heroContainer { padding-top: 3rem; padding-bottom: 3rem; } body #heroContainer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 5; pointer-events: none; background: var(--toran) repeat-x center top / 48px 26px; } @media (max-width: 639px) { body #heroContainer::before { height: 21px; background-size: 39px 21px; } } body #staticSection { animation: dw-hero-glow 8s ease-in-out infinite; /* replaces the maroon `glow` pulse, same rhythm */ box-shadow: inset 0 0 0 2px var(--brass-light), 0 0 16px 5px rgba(232, 113, 10, 0.3); background-image: var(--rangoli-corner-tl), var(--rangoli-corner-bl); background-position: left top, left bottom; background-repeat: no-repeat; background-size: 48px 48px; } body #sliderSection { box-shadow: 0 0 0 2px var(--brass), 0 0 0 5px rgba(226, 184, 102, 0.3); } /* "lit lamp" CTA (SHOP NOW + Watch Now share .learn-more) */ body #heroContainer .learn-more .circle, body #howToSetUp .learn-more .circle { background: var(--sindoor); box-shadow: 0 0 0 2px var(--brass-light), 0 0 12px 3px rgba(255, 178, 56, 0.5); } body #heroContainer .learn-more:not(:hover) .button-text { color: var(--sindoor); } /* ---------- 3b. Feature cards: ivory + marigold frame ---------- */ /* images have no border, so the frame is two box-shadow rings (layout-free); shadow-lg kept underneath */ body #featureContainer img { box-shadow: 0 0 0 3px var(--ivory-paper), 0 0 0 5px var(--marigold), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* ---------- 4. Top deals ---------- */ /* Same ivory + marigold frame as the feature cards. The swiper clips anything outside the card top/bottom, so the rings are an inset overlay: 2px marigold at the edge, 3px ivory mat inside it. position:relative on the card is safe: its absolute children (badge, hover image, feature pill, "See detail", cashback ring) all anchor to their own .relative wrappers (audited). */ body #topDealsContainer .swiper-slide > a > .group { position: relative; } body #topDealsContainer .swiper-slide > a > .group::after { content: ""; position: absolute; inset: 0; z-index: 11; /* above the feature pill and cashback box (z-10), still inside the swiper (z-1) */ border-radius: inherit; box-shadow: inset 0 0 0 2px var(--marigold), inset 0 0 0 5px var(--ivory-paper); pointer-events: none; } body #topDealsContainer .group > .bg-slate-200 { background-color: var(--ivory-paper); } /* the swiper clips outer glows top/bottom, so the hover glow is drawn inside the card body */ body #topDealsContainer .group:hover > .bg-slate-200 { box-shadow: inset 0 -26px 34px -22px rgba(255, 178, 56, 0.6); } /* deal badge ("Top Deal" / insta title): sindoor with a gold edge and a flame dot in its right padding */ body #topDealsContainer .group > .relative > .bg-mgPrimary, body #topDealsContainer .group .bg-mgPrimary.rounded-tl-xl { background-image: linear-gradient(135deg, var(--sindoor), var(--milagrow-maroon)); box-shadow: inset 0 0 0 1px var(--brass-light); } body #topDealsContainer .group > .relative > .bg-mgPrimary::after { content: ""; position: absolute; right: 6px; top: calc(50% - 3.5px); width: 5px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, var(--diya-flame) 55%, var(--diya-ember)); box-shadow: 0 0 6px 1px rgba(255, 178, 56, 0.8); pointer-events: none; } body #topDealsContainer .group .bg-amber-500 { background-color: var(--marigold); box-shadow: inset 0 0 0 1px rgba(138, 90, 20, 0.45); } body #topDealsContainer .group .animate-\[spin_4s_linear_infinite\] { background-image: conic-gradient(from 90deg, var(--marigold), var(--sindoor), var(--brass-light), var(--marigold)); } body #topDealsContainer .group .bg-orange-300 { background-color: var(--haldi-cream); } /* prices: fixes the existing AA failures (2.67 and 3.92) */ body #topDealsContainer .group .text-gray-500 { color: var(--price-muted); } body #topDealsContainer .group .text-green-600 { color: var(--price-off); } /* ---------- 5. YouTube / video embeds (customer care + promo) ---------- */ body #customerCareContainer :is(iframe, video, img), body #promoContentContainer :is(iframe, video, img) { outline: 2px solid var(--brass); outline-offset: -2px; /* sections clip x, so the frame is drawn inside the edge */ } /* ---------- 6. Installation tutorials: peacock band ---------- */ body #howToSetUp { background-color: var(--peacock-deep); background-image: var(--bandhani-soft); background-size: 36px 36px; color: var(--rice-flour); } body #howToSetUp .learn-more:not(:hover) .button-text { color: var(--diya-flame); } /* section headings: brass underline instead of maroon */ body #topDealsContainer .containerHeading span::after, body #howToSetUp .containerHeading span::after, body #categoriesContainer .containerHeading span::after { background: var(--marigold); } /* ---------- 7. Categories: robot-path kolam behind the tiles ---------- */ body #categoriesContainer { background-image: var(--kolam-light); background-size: 80px 80px; } body #categoriesContainer .grid > a > .group { background-color: var(--ivory-paper); outline: 1px solid rgba(184, 134, 43, 0.4); outline-offset: -1px; } body #categoriesContainer .grid > a > .group:hover { outline: 2px solid var(--marigold); outline-offset: -2px; box-shadow: 0 0 16px 4px rgba(255, 178, 56, 0.45); } /* ---------- 8. Testimonials: ivory paper, gold quotes, paisley corners ---------- */ body #testimonies { background-color: var(--ivory-paper); background-image: var(--paisley-tl), var(--paisley-br); background-position: left 12px top 12px, right 12px bottom 12px; background-repeat: no-repeat; background-size: 90px 90px; } body #testimonies h2 { color: var(--milagrow-maroon); } body #testimonies .text-gray-100 { color: var(--ink-soft); } body #testimonies .content { color: var(--ink); } body #testimonies .content svg { color: var(--brass); } /* ---------- 9. Clientele: left alone, one marigold divider ---------- */ body #clients { background-image: var(--garland-divider); background-position: center 10px; background-repeat: no-repeat; background-size: 220px 12px; } /* ---------- 10. Contact strip (first section of the footer) ---------- */ body footer > section:first-child { background-color: var(--haldi-cream); } body footer > section:first-child a:not([href*="wa.me"]) ion-icon { color: var(--diya-ember); filter: drop-shadow(0 0 3px rgba(255, 178, 56, 0.9)); } /* ---------- 11. Footer: the row of lamps ---------- */ /* #footerContainer is static with no positioned descendants (audited), so position:relative is safe. The diyas sit inside its 48px top padding. */ body #footerContainer { position: relative; background-color: var(--peacock-deep); background-image: linear-gradient(to bottom, rgba(255, 178, 56, 0.12), transparent 110px), var(--bandhani-soft); background-size: auto, 44px 44px; } body #footerContainer::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 36px; pointer-events: none; background: var(--diya-row-flicker) repeat-x center top / 220px 36px; } body #footerContainer hr { background-color: rgba(226, 184, 102, 0.35); } /* ---------- Motion (subtle): lamps flicker, badge flames breathe, hero card glows warm ---------- */ @keyframes dw-flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.55; } 60% { opacity: 0.9; } } @keyframes dw-hero-glow { 0%, 100% { box-shadow: inset 0 0 0 2px var(--brass-light), 0 0 12px 3px rgba(232, 113, 10, 0.28); } 50% { box-shadow: inset 0 0 0 2px var(--brass-light), 0 0 22px 8px rgba(255, 178, 56, 0.5); } } body #topDealsContainer .group > .relative > .bg-mgPrimary::after { animation: dw-flicker 2.4s ease-in-out infinite; } /* Reduced motion: every animation on the homepage off, theme and existing ones (hero glow, Book Demo gradient, cashback spin, sticky-nav slide). Swiper autoplay and AOS are JS and can't be stopped from CSS. */ @media (prefers-reduced-motion: reduce) { body *, body *::before, body *::after { animation: none !important; } body #footerContainer::before { background-image: var(--diya-row-static) !important; } }