/* ═══════════════════════════════════════════════════════════════════════════ EDITOHUB · NAVRATRI + DUSSEHRA (Sharad Navratri) — presentation layer --------------------------------------------------------------------------- Purely additive. Nothing the site owns is overwritten: every rule is scoped under html.ehn-on, and every node this theme paints carries an .ehn- prefix. Turn the class off and the page is byte-for-byte the original again. Nau raat, nau rang: the night's colour arrives as --ehn-c on the root (JS sets data-night). Everything festive reads that one variable, so a single attribute repaints the whole page. Gotcha notes kept from the earlier festival layers: · no `> * { position }` — it reflows the host layout in ways you cannot see · no `filter` on body/html — it makes every fixed child scroll with it · SVG gradients are declared inside each SVG, never referenced across docs · nothing may widen the page: no fixed widths, no negative margins on x ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · night palette ─────────────────────────────────────────────────── */ html.ehn-on { --ehn-c: #F4A62A; /* the night's colour */ --ehn-c-soft: #FFF0D2; /* same hue, washed */ --ehn-ink: #241036; /* brand-tinted dark, never #000 */ --ehn-gold: #F4A62A; --ehn-gold-l: #FFC85C; --ehn-deep: #1B0B2E; --ehn-cream: #FFF6E8; --ehn-line: color-mix(in srgb, var(--ehn-c) 26%, transparent); --ehn-sh-1: 0 1px 2px color-mix(in srgb, var(--ehn-ink) 14%, transparent); --ehn-sh-2: 0 4px 12px color-mix(in srgb, var(--ehn-ink) 12%, transparent); --ehn-ease: cubic-bezier(.22,.61,.36,1); /* ZupiChat Navratri colour code (Aditya: usi type me): garba raat ka indigo/plum, genda, Durga ka laal/magenta, patta */ --ehn-plum: #241036; --ehn-plum-2: #2E1443; --ehn-red: #A5194F; --ehn-magenta:#C42B6B; --ehn-leaf: #0F6B4F; } html.ehn-on[data-night="1"] { --ehn-c:#E8642A; --ehn-c-soft:#FAE4D8 } /* Shailaputri · orange */ html.ehn-on[data-night="2"] { --ehn-c:#B08D57; --ehn-c-soft:#F6F1E7 } /* Brahmacharini · white */ html.ehn-on[data-night="3"] { --ehn-c:#C62828; --ehn-c-soft:#F9DEDE } /* Chandraghanta · red */ html.ehn-on[data-night="4"] { --ehn-c:#2A4FB8; --ehn-c-soft:#DEE5F8 } /* Kushmanda · royal blue */ html.ehn-on[data-night="5"] { --ehn-c:#D79500; --ehn-c-soft:#FAEEcf } /* Skandamata · yellow */ html.ehn-on[data-night="6"] { --ehn-c:#1E8E5A; --ehn-c-soft:#D9EEE4 } /* Katyayani · green */ html.ehn-on[data-night="7"] { --ehn-c:#5C6470; --ehn-c-soft:#E5E7EA } /* Kalaratri · grey */ html.ehn-on[data-night="8"] { --ehn-c:#7A3FA8; --ehn-c-soft:#EBDFF5 } /* Mahagauri · purple */ html.ehn-on[data-night="9"] { --ehn-c:#0E9E8F; --ehn-c-soft:#D6F0EC } /* Siddhidatri · peacock */ html.ehn-on[data-night="10"] { --ehn-c:#F4A62A; --ehn-c-soft:#F6EACB } /* Vijayadashami · gold */ /* ── 2 · ground wash ───────────────────────────────────────────────────── */ /* A tint, not a repaint: the site's own surfaces stay where they are. */ html.ehn-on body { background-image: radial-gradient(1100px 520px at 50% -180px, color-mix(in srgb, var(--ehn-c) 13%, transparent), transparent 70%), radial-gradient(760px 400px at 100% 8%, color-mix(in srgb, var(--ehn-gold) 10%, transparent), transparent 72%); background-repeat: no-repeat; background-attachment: scroll; /* fixed = jank on iOS */ } /* ── 3 · top ticker ────────────────────────────────────────────────────── */ html.ehn-on .ehn-tick { position: relative; z-index: 60; overflow: hidden; background: linear-gradient(96deg, var(--ehn-deep), color-mix(in srgb, var(--ehn-c) 34%, var(--ehn-deep))); color: var(--ehn-cream); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ehn-gold) 34%, transparent); } html.ehn-on .ehn-tick-row { display: flex; width: max-content; will-change: transform; animation: ehnTick 34s linear infinite } html.ehn-on .ehn-tick-seq { display: flex; align-items: center; flex: none } html.ehn-on .ehn-tick i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; padding: 9px 24px; font: 700 12px/1 var(--font, Inter, system-ui, sans-serif); letter-spacing: .04em; white-space: nowrap; } html.ehn-on .ehn-tick b { color: var(--ehn-gold-l); font-weight: 800 } html.ehn-on .ehn-tick s { text-decoration: none; opacity: .45 } @keyframes ehnTick { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } } /* scrim ke saath, warna marquee ka text seedha cross ke neeche se guzarta hai */ html.ehn-on .ehn-tick::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 62px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ehn-deep) 62%); } html.ehn-on .ehn-tick-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; color: color-mix(in srgb, var(--ehn-cream) 62%, transparent); cursor: pointer; border-radius: 8px; transition: background .16s var(--ehn-ease); } html.ehn-on .ehn-tick-x:hover { background: rgba(255,255,255,.1) } html.ehn-on .ehn-tick-x:active { transform: translateY(-50%) scale(.94) } /* Site ka apna .announce bar position:fixed z960 hai aur festive ticker ke THEEK upar baith jaata tha — screen par do promo bar, dikhta sirf purana. Festive ke dauraan ticker uski jagah leta hai; class hatate hi wapas aa jaata. */ html.ehn-on .announce { display: none !important } /* ── 4 · dandiya garland under the header ──────────────────────────────── */ /* Sits in the flow (its own strip) instead of over the header — the earlier Ganesh layer hung an absolute toran and the greeting chips collided with its beads on small screens. A strip cannot collide with anything. */ html.ehn-on .ehn-garland { position: relative; z-index: 2; line-height: 0; pointer-events: none } html.ehn-on .ehn-garland svg { display: block; width: 100%; height: 58px } /* ── 5 · the night chip ────────────────────────────────────────────────── */ /* column — chip aur diye do alag flex item the isliye ek doosre ke BAGAL me aa gaye the aur line lambi/behisaab lag rahi thi. Diye chip ke NEECHE. */ html.ehn-on .ehn-night { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 16px 0; } html.ehn-on .ehn-night-in { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 16px; border-radius: 999px; background: var(--ehn-cream); color: var(--ehn-ink); font: 700 12.5px/1 var(--font, Inter, system-ui, sans-serif); box-shadow: inset 0 0 0 1.5px var(--ehn-line), var(--ehn-sh-1), var(--ehn-sh-2); } html.ehn-on .ehn-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ehn-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ehn-c) 20%, transparent); } html.ehn-on .ehn-night-n { color: var(--ehn-c); font-weight: 800 } html.ehn-on .ehn-night-d { color: color-mix(in srgb, var(--ehn-ink) 58%, transparent); font-weight: 600 } html.ehn-on .ehn-sep { opacity: .32 } /* ── 6 · offer card ────────────────────────────────────────────────────── */ html.ehn-on .ehn-offer { margin: 16px auto 0; max-width: 720px; width: calc(100% - 32px); background: linear-gradient(150deg, var(--ehn-deep), color-mix(in srgb, var(--ehn-c) 26%, var(--ehn-deep))); border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ehn-gold) 40%, transparent), 0 1px 2px rgba(27,11,46,.18), 0 8px 24px -10px rgba(27,11,46,.45); color: var(--ehn-cream); text-align: center; } html.ehn-on .ehn-offer-t { font: 800 15px/1.35 var(--font, Inter, system-ui, sans-serif) } html.ehn-on .ehn-offer-t em { font-style: normal; color: var(--ehn-gold-l) } html.ehn-on .ehn-cd { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px } html.ehn-on .ehn-cd u { text-decoration: none; min-width: 34px; padding: 7px 4px; border-radius: 9px; background: linear-gradient(180deg, var(--ehn-gold-l), var(--ehn-gold)); color: var(--ehn-deep); font: 800 15px/1 var(--disp, var(--font, Inter, sans-serif)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ehn-deep) 22%, transparent); } html.ehn-on .ehn-cd s { text-decoration: none; opacity: .5; font-weight: 800 } html.ehn-on .ehn-cd-l { margin-left: 8px; font: 700 9.5px/1 var(--font, Inter, sans-serif); letter-spacing: .1em; opacity: .62; text-transform: uppercase; } html.ehn-on .ehn-code { margin-top: 12px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; cursor: pointer; border-radius: 11px; background: var(--ehn-cream); color: var(--ehn-deep); font: 800 13px/1 var(--font, Inter, sans-serif); letter-spacing: .06em; transition: background .16s var(--ehn-ease), transform .16s var(--ehn-ease); } html.ehn-on .ehn-code:hover { background: #fff } html.ehn-on .ehn-code:active { transform: scale(.98) } html.ehn-on .ehn-code:focus-visible { outline: 3px solid var(--ehn-gold-l); outline-offset: 2px } html.ehn-on .ehn-code.is-done { background: var(--ehn-gold-l) } /* ── 7 · nau diye ─────────────────────────────────────────────────────── */ /* Pehle yahan ek ghoomta hua ring tha. Do dikkat thi: uske 9px dot headline ke upar dhool jaise lagte the, aur wo ye bata hi nahi paata tha ki nau me se kaunsi raat hai. Ab seedhi katar — jitni raat beet gayi utne diye jale. */ html.ehn-on .ehn-lamps { display: flex; justify-content: center; align-items: flex-end; gap: 9px; margin: 10px 0 0; padding: 0 16px; list-style: none; } html.ehn-on .ehn-lamps li { width: 9px; height: 9px; border-radius: 50% 50% 46% 46%; background: color-mix(in srgb, var(--ehn-ink) 16%, transparent); transition: background .2s var(--ehn-ease), box-shadow .2s var(--ehn-ease); } html.ehn-on .ehn-lamps li.lit { background: linear-gradient(180deg, var(--ehn-gold-l), var(--ehn-c)); box-shadow: 0 0 9px 1px color-mix(in srgb, var(--ehn-c) 45%, transparent); } html.ehn-on .ehn-lamps li.now { width: 13px; height: 13px; box-shadow: 0 0 14px 2px color-mix(in srgb, var(--ehn-c) 62%, transparent); } /* ── 8 · hero accent ───────────────────────────────────────────────────── */ html.ehn-on .hero-sub::after { content: ""; display: block; width: 62px; height: 3px; border-radius: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--ehn-c), transparent); } /* ── 9 · floating dandiya ──────────────────────────────────────────────── */ /* BAAYIN taraf. Site ke apne AI aur WhatsApp button dayein neeche fixed hain; teesra festive button seedha unke upar baith raha tha. Baayan kona khaali hai. */ html.ehn-on .ehn-fab { position: fixed; left: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 58; width: 52px; height: 52px; border: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--ehn-c), color-mix(in srgb, var(--ehn-c) 62%, var(--ehn-deep))); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ehn-gold) 46%, transparent), 0 2px 6px rgba(27,11,46,.24), 0 10px 26px -10px rgba(27,11,46,.5); transition: transform .16s var(--ehn-ease); } html.ehn-on .ehn-fab:hover { transform: translateY(-2px) } html.ehn-on .ehn-fab:active { transform: scale(.95) } html.ehn-on .ehn-fab:focus-visible { outline: 3px solid var(--ehn-gold-l); outline-offset: 3px } html.ehn-on .ehn-fab svg { width: 25px; height: 25px } /* a burst of dandiya taps — pure transform, removed when finished */ html.ehn-on .ehn-spark { position: fixed; z-index: 59; pointer-events: none; width: 9px; height: 9px; border-radius: 2px } @keyframes ehnFly { to { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--dr)); opacity: 0 } } /* ── 10 · Dussehra (night 10) ──────────────────────────────────────────── */ html.ehn-on[data-night="10"] .ehn-offer { background: linear-gradient(150deg, #1B0B2E, #6B3A12) } html.ehn-on[data-night="10"] .ehn-lamps li.lit { background: linear-gradient(180deg, #FFF0C4, var(--ehn-gold)) } /* ── 11 · mobile ───────────────────────────────────────────────────────── */ /* Everything here has to fit inside 390px. The Ganesh layer overflowed by 23px because its fixed buttons sat outside the safe inset — hence the explicit right offsets and the max-width on every painted node. */ @media (max-width: 760px) { html.ehn-on .ehn-tick i { padding: 8px 15px; font-size: 11px } html.ehn-on .ehn-garland svg { height: 40px } html.ehn-on .ehn-night { padding: 11px 12px 0 } html.ehn-on .ehn-night-in { font-size: 11.5px; padding: 7px 13px; gap: 8px; flex-wrap: wrap; justify-content: center } html.ehn-on .ehn-offer { width: calc(100% - 24px); padding: 14px; border-radius: 14px } html.ehn-on .ehn-offer-t { font-size: 13.5px } html.ehn-on .ehn-cd u { min-width: 30px; font-size: 13.5px; padding: 6px 3px } html.ehn-on .ehn-cd-l { margin-left: 6px; font-size: 8.5px } html.ehn-on .ehn-lamps { gap: 7px } html.ehn-on .ehn-fab { width: 46px; height: 46px; left: 12px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) } html.ehn-on .ehn-fab svg { width: 22px; height: 22px } } /* ── 12 · motion & print ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.ehn-on .ehn-tick-row, html.ehn-on .ehn-spark { display: none } } @media print { html.ehn-on .ehn-tick, html.ehn-on .ehn-garland, html.ehn-on .ehn-night, html.ehn-on .ehn-offer, html.ehn-on .ehn-lamps, html.ehn-on .ehn-fab { display: none !important } } /* ══════════════════════════════════════════════════════════════════════ 12 · THE PAGE BODY — festival ko header se neeche laana ────────────────────────────────────────────────────────────────────── Ab tak ye layer sirf TOP CHROME thi: ticker, garland, lamps, countdown, FAB — aur `html.ehn-on body` ke do radial gradient jo `no-repeat` + default background-position ki wajah se sirf pehle ~900px rangte the. Page 12,271px lamba hai, to baaki 11,000px bilkul plain EditoHub reh jaata tha. Isiliye "sirf header accha lag raha hai" — bilkul sahi. Ilaaj wahi jo Holi par kaam aaya: rang site ke APNE components ke andar daalo. Upar koi decorative parat nahi — har sajawat z-index:-1 par hai, yaani text ko dhak hi nahi sakti. ═════════════════════════════════════════════════════════════════════ */ /* ── 12.1 · section ke peeche halka bloom ────────────────────────────── .sec-pad ka apna position nahi tha (sirf padding), isliye yahan set karna surakshit hai. `> *` ko kabhi mat chhedna — wo background videos ka position:absolute chheen leta hai. */ html.ehn-on .sec-pad { position: relative } html.ehn-on .sec-pad:not(.sec--sand):not(.sec--deep)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(720px 420px at 14% 16%, color-mix(in srgb, var(--ehn-c) 9%, transparent), transparent 68%), radial-gradient(560px 340px at 92% 86%, color-mix(in srgb, var(--ehn-gold) 8%, transparent), transparent 70%); background-repeat: no-repeat; } /* sirf bloom ki DISHA badalti hai — background banding nahi (wo .sec--deep ko dhak deti hai aur uska text 1:1 par gayab ho jaata hai) */ html.ehn-on .sec-pad:not(.sec--sand):not(.sec--deep):nth-of-type(even)::before { background-position: right -140px top 12%, left -120px bottom 8%; } /* ── 12.2 · cream section = marigold cream ─────────────────────────── */ html.ehn-on .sec--sand { background-color: #FDF7EA; background-image: radial-gradient(820px 460px at 88% 6%, color-mix(in srgb, var(--ehn-c) 13%, transparent), transparent 66%), radial-gradient(620px 380px at 6% 96%, color-mix(in srgb, var(--ehn-gold) 15%, transparent), transparent 68%); background-repeat: no-repeat; } /* ── 12.3 · dark section = velvet, mandir jaisa (hara nahi) ────────── */ html.ehn-on .sec--deep { background-image: linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-color: var(--ehn-deep); } html.ehn-on .sec--deep .h-lg, html.ehn-on .sec--deep .lead, html.ehn-on .sec--deep p { color: var(--ehn-cream) } /* .sec-pad .eyebrow bhi 0,2,0 hai aur file me BAAD me aata hai, isliye wo jeet kar velvet par gehra text laga raha tha (naapa: 3.41:1). Ab .sec-pad.sec--deep. */ html.ehn-on .sec-pad.sec--deep .eyebrow { color: var(--ehn-gold-l) } /* ── 12.4 · headings — sabse zyada asar (page par 11 .grad-text) ────── Site ka rule `.grad-text{background:var(--grad);-webkit-background-clip:text}` hai. Isliye hum GRADIENT KO NAHI, us par ke VARIABLE ko badal rahe hain — `background` shorthand likhne se background-clip reset ho jaata aur akshar gayab ho jaate (ye do baar ho chuka hai). */ /* Pehle sirf --grad badla tha. NAAP KAR PATA CHALA ki wo bekaar hai: variable to set ho jaata hai, par computed backgroundImage site ka green hi rehta hai — yaani koi baad wala rule seedha `background` likhta hai, var(--grad) nahi padhta. Isliye ab longhand background-image, aur clip + transparent color DOBARA declare (shorthand `background` likhte hi background-clip reset ho jaata hai aur akshar thos block ban jaate hain — ye do baar ho chuka hai). Hero ko jaan boojh kar chhoda hai — Aditya ko header pehle se pasand hai. */ html.ehn-on .sec-pad .grad-text { background-image: linear-gradient(100deg, #7A1240 0%, color-mix(in srgb, var(--ehn-c) 55%, #7A1240) 52%, #C42B6B 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* ── 12.5 · eyebrow — mint se raat ka rang ───────────────────────────── Seedha --ehn-c cream par chhote uppercase text ke liye halka pad jaata hai, isliye asli rang gehra karte hain (brightness filter se contrast audit pass nahi hota — computed color to purana hi rehta hai). */ /* 76% par naapa to cream ke upar sirf 3.23:1 nikla — 0.72rem uppercase ke liye 4.5:1 chahiye, isliye aur gehra. (brightness filter se ye theek NAHI hota: getComputedStyle filter se pehle ka rang deta hai, audit jhooth bolta hai.) */ html.ehn-on .sec-pad .eyebrow { color: color-mix(in srgb, var(--ehn-c) 58%, #14202B) } html.ehn-on .sec-pad .eyebrow::before, html.ehn-on .sec-head .mk { background: var(--ehn-c) } /* ── 12.6 · cards — site ke apne --accent hook se ───────────────────── .card-lite khud `--accent:var(--emerald); --accent2:var(--mint)` set karta hai aur .idx/.k/.role/.more/.quote usi ko padhte hain. Do variable badalne se wo sab apne aap festival ka rang le lete hain. ::before aur ::after dono site pehle se use karta hai (gloss + hover), isliye upar ki sunehri lakeer inset box-shadow se — naya pseudo nahi. */ html.ehn-on .card-lite { /* seedha --ehn-c rakhne par gold/peeli raaton (2, 5, 10) me .more/.idx cream card par 4.11:1 par aa gaye the — isliye wahi gehrapan jo eyebrow par lagaya. Sunehri chamak decorative jagah (hairline) par hi rehti hai. */ --accent: color-mix(in srgb, var(--ehn-c) 58%, #14202B); --accent2: var(--ehn-gold); border-color: color-mix(in srgb, var(--ehn-c) 22%, #E7DFCE); background-color: #FFFDF8; /* opaque — neeche ka blur ab bekaar */ backdrop-filter: none; /* 51 cards par blur(18px) sirf kharcha tha */ -webkit-backdrop-filter: none; box-shadow: inset 0 2.5px 0 var(--ehn-gold), /* sunehri kinara */ 0 22px 48px -24px color-mix(in srgb, var(--ehn-ink) 26%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--ehn-ink) 14%, transparent); } html.ehn-on .card-lite:hover { border-color: color-mix(in srgb, var(--ehn-c) 42%, transparent); box-shadow: inset 0 2.5px 0 var(--ehn-gold-l), 0 26px 54px -22px color-mix(in srgb, var(--ehn-c) 34%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ehn-ink) 16%, transparent); } /* ── 12.7 · icon tiles — rang wahi, par sunehra chhalla ────────────── */ html.ehn-on .ico { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ehn-gold) 60%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--ehn-c) 45%, transparent); } /* ── 12.8 · buttons — site ke asli class naam (.btn-primary/.btn-ghost), .btn.primary nahi (wo kisi cheez se match hi nahi karta) ─────────── */ /* Pehla version var(--ehn-c) se shuru hota tha. Night 10 ka rang GOLD hai (#F4A62A) — us par safed text sirf ~1.9:1 tha, yaani padha hi nahi jaata. Raat ka rang ab sirf 26% rangat hai, base hamesha gehra warm: naui raaton me safed text 7:1 se upar (sabse halki raat par naapa). */ html.ehn-on .btn-primary { /* ZC Navratri jaisa: genda->gold, text gehra plum (#2A1036 on #F4A62A ~8:1) — safed text gold par nahi padha jaata */ background-image: linear-gradient(135deg, var(--ehn-gold-l) 0%, var(--ehn-gold) 100%); color: #2A1036; box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--ehn-gold) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } html.ehn-on .btn-primary span, html.ehn-on .btn-primary svg { color: #2A1036 } html.ehn-on .btn-primary:hover { background-image: linear-gradient(135deg, #FFD98A 0%, var(--ehn-gold-l) 100%) } /* Card ke andar wala .btn-primary ("Choose Pro") — site ka `.card-lite a` rule uske text ko muted grey kar deta hai. Site ke apne hare button par bhi ye kamzor tha (~2.9:1), aur mere gehre background par to bilkul padha hi nahi jaata. */ html.ehn-on .card-lite a.btn-primary, html.ehn-on .card-lite a.btn-primary span { color: #2A1036 } html.ehn-on .btn-ghost { border-color: color-mix(in srgb, var(--ehn-gold) 62%, transparent) } html.ehn-on .sec-pad .btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none } /* ── 12.9 · tick marks (page par 19) + stars — sunehre ─────────────── */ html.ehn-on .chk { background-image: linear-gradient(135deg, var(--ehn-gold-l), var(--ehn-gold)) } html.ehn-on .stars { color: var(--ehn-gold) } /* ── 12.10 · FAQ + pricing ─────────────────────────────────────────── */ html.ehn-on .faq-item { border-bottom-color: color-mix(in srgb, var(--ehn-gold) 34%, transparent) } html.ehn-on .faq-q { color: var(--ehn-ink) } html.ehn-on .faq-q .pl, html.ehn-on .faq-item .pl { color: var(--ehn-c) } html.ehn-on .pc .badge9 { background: linear-gradient(120deg, var(--ehn-gold-l), var(--ehn-gold)); color: #2A1036 } /* ── 12.11 · mobile: ambient parat banate hi nahi ────────────────────── (chhupane se paint bachta nahi — isliye media query se rule hi nahi banta. background-attachment:fixed kabhi nahi — iOS par sabse bada jank.) */ @media (max-width: 760px) { html.ehn-on .sec-pad:not(.sec--sand):not(.sec--deep)::before { display: none } html.ehn-on .sec--sand { background-image: none } } /* ── 12.12 · bache hue HARE surface ──────────────────────────────────── Naap kar nikale (aankh se nahi): poore page par sirf 4 elements site ka hara rang pakde hue the — footer (931px, sabse bada), logo marquee, mobile-menu, aur .audio-card ka mint radial. Inke bina page aadha festival aadha purana lagta tha, khaaskar footer jo end me hai. */ html.ehn-on .footer, html.ehn-on .marquee, html.ehn-on .mobile-menu { background-color: var(--ehn-deep); background-image: linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); } html.ehn-on .footer a:hover { color: var(--ehn-gold-l) } html.ehn-on .marquee { background-image: none } /* .audio-card ka radial mint (rgb 22,184,145) tha — wahi raat ka rang */ /* background-color bhi zaroori: sirf background-image dene se computed backgroundColor transparent rehta hai — card dikhta to gehra hai, par har contrast-checker uske PEECHE ki cream tak chala jaata hai aur jhootha 1:1 deta hai. Opaque base rakhne se naap bhi sahi aur gradient fail ho to bhi text gehre par hi rehta hai. */ html.ehn-on .audio-card { background-color: var(--ehn-deep); background-image: radial-gradient(80% 130% at 88% -12%, color-mix(in srgb, var(--ehn-c) 46%, transparent), transparent 62%), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); } /* ══════════════════════════════════════════════════════════════════════ 13 · SITE KA APNA PRELOADER Independence theme site ke preloader ko theme karti hai (chakra + tag). Navratri ka sahi roop: NAU DIYE, ek-ek kar ke jalte hue — nau raat. Wordmark (.pre-word / .hub) ko jaan boojh kar NAHI chhua: uske akshar background-clip:text par tike hain aur `background` likhte hi thos block ban jaate hain — ye do baar toot chuka hai. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on .preloader { background: radial-gradient(92% 92% at 50% 28%, #33124A 0%, color-mix(in srgb, var(--ehn-deep) 88%, black) 52%, color-mix(in srgb, var(--ehn-deep) 62%, black) 100%); } html.ehn-on .pre-frame i { border-color: color-mix(in srgb, var(--ehn-gold) 62%, transparent) } html.ehn-on .pre-rec .dot { background: var(--ehn-c) } html.ehn-on .pre-tag { color: var(--ehn-gold-l); letter-spacing: .3em } html.ehn-on .pre-fill { background: linear-gradient(90deg, var(--ehn-gold-l), var(--ehn-c)) } html.ehn-on .pre-track .pc { background: color-mix(in srgb, var(--ehn-gold) 45%, transparent) } /* ── nau diye ─────────────────────────────────────────────────────────── */ html.ehn-on .ehn-pre-diyas { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 18px; } html.ehn-on .ehn-pre-diyas .ehn-diya { width: 22px; height: 22px; display: block; flex: none; transition: transform .26s var(--ehn-ease); } html.ehn-on .ehn-diya svg { width: 100%; height: 100%; display: block; overflow: visible } html.ehn-on .ehn-diya .bw { fill: color-mix(in srgb, var(--ehn-gold) 34%, transparent) } html.ehn-on .ehn-diya .wk { stroke: color-mix(in srgb, var(--ehn-gold) 40%, transparent); stroke-width: 1.4; stroke-linecap: round } html.ehn-on .ehn-diya .fl { fill: var(--ehn-gold-l); opacity: 0; transform-origin: 50% 88%; transform: scale(.4); transition: opacity .22s ease-out, transform .3s var(--ehn-ease) } html.ehn-on .ehn-diya.lit .bw { fill: var(--ehn-gold) } html.ehn-on .ehn-diya.lit .wk { stroke: var(--ehn-gold-l) } html.ehn-on .ehn-diya.lit .fl { opacity: 1; transform: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ehn-gold-l) 80%, transparent)) } html.ehn-on .ehn-diya.lit { transform: translateY(-2px) } /* reduced-motion: diye phir bhi jalte hain, bas bina harkat ke */ @media (prefers-reduced-motion: reduce) { html.ehn-on .ehn-pre-diyas .ehn-diya, html.ehn-on .ehn-diya .fl { transition: none } html.ehn-on .ehn-diya.lit { transform: none } } /* ── 13.1 · preloader ke bache hue HARE hisse ────────────────────────── Velvet par mint "Hub", mint timecode aur mint % counter chubh rahe the. .pre-word .hub ke akshar background-clip:text par tike hain — yahan `background:` shorthand likhna do baar tod chuka hai (clip reset ho kar thos block ban jaata hai, akshar gayab). Isliye longhand background-image AUR clip dobara declare, jaisa hona chahiye. Site ke header ka logo jaan boojh kar nahi chhua — Aditya ko header pasand hai. */ html.ehn-on .pre-word .hub { background-image: linear-gradient(100deg, var(--ehn-gold-l) 0%, var(--ehn-gold) 55%, #E8B45E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.ehn-on .pre-tc, html.ehn-on .pre-num { color: color-mix(in srgb, var(--ehn-gold) 78%, #FFF3D8) } html.ehn-on .pre-num .n { color: var(--ehn-gold-l) } html.ehn-on .pre-tc .bl { color: var(--ehn-c) } /* diye thode bade — 22px par lau padhne me kam aa rahi thi */ html.ehn-on .ehn-pre-diyas { gap: 12px; margin-top: 20px } html.ehn-on .ehn-pre-diyas .ehn-diya { width: 26px; height: 26px } /* ══════════════════════════════════════════════════════════════════════ 14 · TORAN — genda + aam ke patte, section ke sir par ────────────────────────────────────────────────────────────────────── Jaan boojh kar DOM node NAHI banaya. Toran section ke apne background-image ka sabse upar wala layer hai — background hamesha content ke PEECHE painted hota hai, to ye kisi bhi haal me text nahi dhak sakta (Holi wali galti dobara nahi). Data-URI hone se SVG gradient ka cross-document wala jaal bhi nahi lagta — har tile khud-mukhtaar hai. Background jodo to uski padding bhi jodo — warna heading toran ke neeche ghus jaati hai. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on { /* cream section ke liye — gehre rang, halke background par */ --ehn-toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='46' viewBox='0 0 104 46'%3E%3Cpath d='M0 5 Q26 17 52 5 Q78 17 104 5' fill='none' stroke='%23F4A62A' stroke-width='1.8' opacity='.55'/%3E%3Cpath d='M26 12 C31 19 31 28 26 35 C21 28 21 19 26 12Z' fill='%230F6B4F' opacity='.85'/%3E%3Cpath d='M78 12 C83 19 83 28 78 35 C73 28 73 19 78 12Z' fill='%230F6B4F' opacity='.85'/%3E%3Ccircle cx='52' cy='12' r='7.5' fill='%23E8A33A'/%3E%3Ccircle cx='52' cy='12' r='3.2' fill='%23C87A18'/%3E%3Ccircle cx='0' cy='6' r='6.5' fill='%23C42B6B'/%3E%3Ccircle cx='104' cy='6' r='6.5' fill='%23C42B6B'/%3E%3C/svg%3E"); /* velvet section ke liye — sunehra, gehre par padhne wala */ --ehn-toran-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='46' viewBox='0 0 104 46'%3E%3Cpath d='M0 5 Q26 17 52 5 Q78 17 104 5' fill='none' stroke='%23C8A24B' stroke-width='1.8' opacity='.7'/%3E%3Cpath d='M26 12 C31 19 31 28 26 35 C21 28 21 19 26 12Z' fill='%2314805E' opacity='.9'/%3E%3Cpath d='M78 12 C83 19 83 28 78 35 C73 28 73 19 78 12Z' fill='%2314805E' opacity='.9'/%3E%3Ccircle cx='52' cy='12' r='7.5' fill='%23F0B95A'/%3E%3Ccircle cx='52' cy='12' r='3.2' fill='%23FFC85C'/%3E%3Ccircle cx='0' cy='6' r='6.5' fill='%23C42B6B'/%3E%3Ccircle cx='104' cy='6' r='6.5' fill='%23C42B6B'/%3E%3C/svg%3E"); } html.ehn-on .sec--sand { background-image: var(--ehn-toran), radial-gradient(820px 460px at 88% 6%, color-mix(in srgb, var(--ehn-c) 13%, transparent), transparent 66%), radial-gradient(620px 380px at 6% 96%, color-mix(in srgb, var(--ehn-gold) 15%, transparent), transparent 68%); background-repeat: repeat-x, no-repeat, no-repeat; background-position: left top, right top, left bottom; background-size: 104px 46px, auto, auto; padding-top: calc(clamp(5rem, 11vw, 9rem) + 30px); /* toran ki jagah */ } html.ehn-on .sec--deep { background-image: var(--ehn-toran-d), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-repeat: repeat-x, no-repeat; background-position: left top, left top; background-size: 104px 46px, auto; padding-top: calc(clamp(5rem, 11vw, 9rem) + 30px); } /* CTA/footer se pehle wali aakhri section par bhi ek toran — page ka ant bhi festive */ html.ehn-on .footer { background-image: var(--ehn-toran-d), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-repeat: repeat-x, no-repeat; background-position: left top, left top; background-size: 104px 46px, auto; } /* mobile: toran chhota, warna 390px par bhaari lagta hai */ @media (max-width: 760px) { html.ehn-on .sec--sand, html.ehn-on .sec--deep, html.ehn-on .footer { background-size: 74px 33px, auto, auto } html.ehn-on .sec--sand, html.ehn-on .sec--deep { padding-top: calc(clamp(5rem, 11vw, 9rem) + 20px) } html.ehn-on .sec--sand { background-image: var(--ehn-toran) } /* ambient radial mobile par nahi */ } /* ══════════════════════════════════════════════════════════════════════ 15 · BACHE HUE MINT ACCENTS ────────────────────────────────────────────────────────────────────── Surface velvet ho jaane ke baad bhi footer "hara" lag raha tha. Wajah background nahi, ACCENTS the — naap kar mile: footer me ~100 elements (43 svg path, 32 svg, 24 .fi, 5 h5, 4 .fc), 34 verified-badge circles, scroll progress bar, aur .sec--deep ke 5 .mk. Pehle maine sirf backgrounds scan kiye the, isliye ye poori parat chhoot gayi thi. Footer ke icons currentColor par chalte hain, isliye wrapper ka color badalna hi kaafi hai — har path ko alag se chhune ki zaroorat nahi. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on .footer .fi, html.ehn-on .footer .fc, html.ehn-on .footer h5, html.ehn-on .footer svg { color: var(--ehn-gold-l) } html.ehn-on .footer .fi.ok { color: var(--ehn-gold) } html.ehn-on .footer h5 { letter-spacing: .18em } html.ehn-on .footer .fi svg, html.ehn-on .footer .fc svg { stroke: currentColor } /* verified badge / tick circles — 34 jagah */ html.ehn-on .who svg circle, html.ehn-on .chk, html.ehn-on .fi.ok svg circle { color: var(--ehn-gold) } html.ehn-on .chk { color: #2A1036 } /* scroll progress bar — Independence theme isse bhi theme karti hai */ html.ehn-on .scroll-prog { background-image: linear-gradient(90deg, var(--ehn-gold-l), var(--ehn-c) 60%, #C42B6B); } /* dark section ke section-head markers */ html.ehn-on .sec--deep .mk { background: var(--ehn-gold) } /* footer ka andar wala CTA card — velvet par mint card ubhar kar chubhta tha */ html.ehn-on .footer .fcta, html.ehn-on .footer [class*="cta"] { background-color: color-mix(in srgb, var(--ehn-deep) 70%, #33124A); border-color: color-mix(in srgb, var(--ehn-gold) 30%, transparent); } /* ── 15.1 · aakhri mint parat (parent se pehchane, class-less the) ───── I → .au-wave i (audio waveform ki 30 bars) · SPAN → .wave span · DIV.s → .reel .cap .s · circle → .n svg circle (verified tick). Inka koi apna class nahi tha, isliye parent dekh kar pakde. */ html.ehn-on .au-wave i, html.ehn-on .wave span { background-image: linear-gradient(180deg, var(--ehn-gold-l), var(--ehn-c)); } html.ehn-on .reel .cap .s { color: var(--ehn-gold-l) } html.ehn-on .n svg circle, html.ehn-on .who svg circle { fill: var(--ehn-gold) } html.ehn-on .av { background-image: linear-gradient(135deg, var(--ehn-c), #A5194F) } html.ehn-on .sec--deep .mk, html.ehn-on .vs-coin { color: var(--ehn-gold-l) } html.ehn-on .win-badge { color: #2A1036; background-image: linear-gradient(120deg, var(--ehn-gold-l), var(--ehn-gold)); } html.ehn-on .handle { background: var(--ehn-c) } html.ehn-on .grip { color: #fff; background-image: linear-gradient(135deg, var(--ehn-c), #A5194F) } html.ehn-on .nsd-ic { background-image: linear-gradient(135deg, var(--ehn-gold-l), var(--ehn-c)) } html.ehn-on .sec-pad button.on { background-image: linear-gradient(135deg, var(--ehn-c), #A5194F) } /* ── 15.2 · verified tick ke 34 circles ──────────────────────────────── Ye stylesheet se badal hi nahi rahe the. Wajah naap kar mili: circle par INLINE style hai — style="fill:var(--mint,#16B891)" — aur inline har stylesheet rule ko harata hai. !important thonpne ke bajaye us inline style ko wahi de diya jo wo maang raha hai: --mint. Scope sirf .vf (verified badge ka svg) hai, isliye kahin aur kuch nahi badalta. */ html.ehn-on .vf { --mint: var(--ehn-gold) } /* .wave span par mera gradient lag chuka hai (wo dikhta gold hi hai), par neeche background-COLOR abhi bhi mint tha — scan use pakadta raha. */ html.ehn-on .au-wave i, html.ehn-on .wave span { background-color: var(--ehn-c) } /* ── 15.3 · bache hue ikka-dukka accents ─────────────────────────────── Ab sirf 1-2 ke gucche bache the. Inme se kai wahi inline var(--mint, …) pattern use karte hain, isliye seedha VARIABLE badal rahe hain — property nahi. Iska ek aur fayda: footer ke "Hub" ka gradient bhi isi se badal jaata hai bina background-clip ko chhue (wahi jagah jo do baar toot chuki hai). Hero/header jaan boojh kar chhoda hai — Aditya ko wo pehle se pasand hai. */ html.ehn-on .sec-pad .ico, html.ehn-on .pquota, html.ehn-on .lbl.r, html.ehn-on .grip, html.ehn-on .sec--deep .tag, html.ehn-on .au-play, html.ehn-on .au-time, html.ehn-on .pt-ind, html.ehn-on .save, html.ehn-on .sec-pad .badge, html.ehn-on .sec-pad .flag, html.ehn-on .sec-pad button.on, html.ehn-on .sec-pad .dot, html.ehn-on .footer .lg-hub { --mint: var(--ehn-gold); --mint-2: var(--ehn-gold-l); --emerald: var(--ehn-c); } /* ── 15.4 · footer ka CTA card + backtop + bache hue chhote accents ──── Ye pehle bade elements ke peeche chhupe the; unke theek hote hi saamne aa gaye. Wahi variable-wala tareeka. */ html.ehn-on .fcta-ic, html.ehn-on .fcta-b, html.ehn-on .fa-tag, html.ehn-on .fb-tag, html.ehn-on .footer b, html.ehn-on .backtop, html.ehn-on .sec-pad .au-play, html.ehn-on .sec-pad a, html.ehn-on .sec-pad .save { --mint: var(--ehn-gold); --mint-2: var(--ehn-gold-l); --emerald: var(--ehn-c); } /* footer ka CTA card khud — velvet par gehra warm, sunehri kinara */ html.ehn-on .footer [class*="fcta"] { background-color: color-mix(in srgb, var(--ehn-deep) 62%, #3A1550); border-color: color-mix(in srgb, var(--ehn-gold) 34%, transparent); } html.ehn-on .backtop { border-color: color-mix(in srgb, var(--ehn-gold) 50%, transparent) } /* ══════════════════════════════════════════════════════════════════════ 16 · HERO + HEADER ────────────────────────────────────────────────────────────────────── Pehle ye jaan boojh kar chhoda tha ("only header accha hai" ko maine "isko mat chhedo" samjha tha). Galat samjha: matlab tha ki BAAKI page khaali hai. Neeche sab festive hone ke baad ye akela purana hissa reh gaya — aur yahi sabse pehle dikhta hai, isliye poori site "same" lag rahi thi. Ab ye bhi festive. ═════════════════════════════════════════════════════════════════════ */ /* bada headline — "expert editors." (background shorthand nahi: clip reset ho kar akshar thos block ban jaate hain) */ html.ehn-on .hero .grad-text { background-image: linear-gradient(100deg, #7A1240 0%, color-mix(in srgb, var(--ehn-c) 55%, #7A1240) 52%, #C42B6B 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } html.ehn-on .hero .eyebrow { color: color-mix(in srgb, var(--ehn-c) 58%, #14202B) } html.ehn-on .hero .eyebrow::before, html.ehn-on .hero .mk { background: var(--ehn-c) } /* logo ka "Hub" — variable badla, background-clip ko haath nahi lagaya */ html.ehn-on .lg-hub, html.ehn-on .hero .st-tc, html.ehn-on .hero .ps-ic, html.ehn-on .hero .st-badge, html.ehn-on .hero .stroke-wrap { --mint: var(--ehn-gold); --mint-2: var(--ehn-gold-l); --emerald: var(--ehn-c); } /* chhote hero chips light background par — gehra rang taaki padhe jaayein */ html.ehn-on .hero .st-tc, html.ehn-on .hero .ps-ic { color: color-mix(in srgb, var(--ehn-c) 58%, #14202B) } /* ── 16.1 · "expert" ───────────────────────────────────────────────── Headline ka italic shabd hai, .grad-text nahi — isliye gradient wale rule se chhoot gaya tha aur akela teal reh gaya. */ html.ehn-on .hero .ital { color: color-mix(in srgb, var(--ehn-c) 52%, #241036) } /* ══════════════════════════════════════════════════════════════════════ 17 · HEADER KA DHAANCHA — ticker upar, nav beech, toran neeche ────────────────────────────────────────────────────────────────────── Jad: .header position:fixed; top:0; z-index:900 hai aur uspar linear-gradient(rgba(250,247,240,.92), transparent) ka scrim hai. Ticker (z 60) aur garland (z 2) usi 93px band me the, to 92% opaque cream unke UPAR paint ho raha tha — ticker ka apna contrast 16.51:1 hone ke bawajood sab dhula-dhula dikhta tha, aur garland nav ke aksharon me uljha lagta tha. Ab teen saaf pattiyan: ticker (fixed, sabse upar) → nav → toran (neeche latakta hua, jaise darwaze par hota hai). Header ka top aur garland ka margin JS naapta hai, taaki har breakpoint par sahi baithe. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on .ehn-tick { position: fixed; top: 0; left: 0; right: 0; z-index: 970; /* header ke 900 se upar */ } html.ehn-on .ehn-garland { position: relative; z-index: 3; line-height: 0; pointer-events: none; } html.ehn-on .ehn-garland svg { display: block; width: 100%; height: 74px } @media (max-width: 760px) { html.ehn-on .ehn-garland svg { height: 62px } } /* ══════════════════════════════════════════════════════════════════════ 18 · NAU RAAT, NAU RANG ────────────────────────────────────────────────────────────────────── 10 raat, har ek ka apna rang (--nc per card), devi, offer aur code. Rang sirf DECOR me hai — dot, kinara, glow. Text kabhi --nc me nahi, kyunki raat 2/5/10 ke rang halke hain aur cream par padhe hi nahi jaate; ye wahi galti hoti jo pehle .more par ho chuki hai. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on .ehn-nights { background-color: #FCF4E4; background-image: var(--ehn-toran), radial-gradient(760px 420px at 8% 4%, color-mix(in srgb, var(--ehn-c) 12%, transparent), transparent 66%), radial-gradient(680px 400px at 96% 92%, color-mix(in srgb, var(--ehn-gold) 16%, transparent), transparent 68%); background-repeat: repeat-x, no-repeat, no-repeat; background-position: left top, left top, right bottom; background-size: 104px 46px, auto, auto; padding-top: calc(clamp(5rem, 11vw, 9rem) + 30px); } html.ehn-on .ehn-nights .lead { max-width: 46ch; margin-inline: auto } html.ehn-on .ehn-nr-grid { display: grid; gap: 14px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); } html.ehn-on .ehn-nr { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border-radius: 16px; background: #FFFDF8; box-shadow: inset 0 2.5px 0 var(--nc), 0 1px 2px color-mix(in srgb, var(--ehn-ink) 10%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--ehn-ink) 40%, transparent); transition: transform .18s var(--ehn-ease), box-shadow .18s var(--ehn-ease); } html.ehn-on .ehn-nr-hd { display: flex; align-items: center; gap: 8px } html.ehn-on .ehn-nr-diya { width: 20px; height: 20px; flex: none; display: block } html.ehn-on .ehn-nr-diya svg { width: 100%; height: 100%; display: block; overflow: visible } html.ehn-on .ehn-nr-diya .bw { fill: color-mix(in srgb, var(--ehn-gold) 32%, transparent) } html.ehn-on .ehn-nr-diya .wk { stroke: color-mix(in srgb, var(--ehn-gold) 38%, transparent); stroke-width: 1.4; stroke-linecap: round } html.ehn-on .ehn-nr-diya .fl { fill: var(--ehn-gold-l); opacity: 0 } html.ehn-on .ehn-nr-n { font: 800 10px/1 var(--font, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #8A6A1E; } html.ehn-on .ehn-nr-dot { width: 11px; height: 11px; border-radius: 50%; margin-left: auto; flex: none; background: var(--nc); box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--nc) 40%, transparent); } html.ehn-on .ehn-nr-devi { font: 800 16px/1.2 var(--disp, var(--font)); color: var(--ehn-ink); margin: 2px 0 0 } html.ehn-on .ehn-nr-col { font: 700 10.5px/1 var(--font, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #5A4A6E; } html.ehn-on .ehn-nr-of { font: 500 12.5px/1.5 var(--font, Inter, sans-serif); color: #4A4038; margin: 4px 0 0; flex: 1 } html.ehn-on .ehn-nr-of em { font-style: normal; font-weight: 800; color: #7A1240 } html.ehn-on .ehn-nr-code { align-self: flex-start; margin-top: 4px; padding: 7px 11px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; background: color-mix(in srgb, var(--ehn-gold) 18%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ehn-gold) 46%, transparent); font: 800 11.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: #6B4A0E; transition: background .16s var(--ehn-ease), transform .16s var(--ehn-ease); } html.ehn-on .ehn-nr-code:hover { background: color-mix(in srgb, var(--ehn-gold) 30%, #fff) } html.ehn-on .ehn-nr-code:active { transform: scale(.97) } html.ehn-on .ehn-nr-code.is-done { background: #1E7A4E; color: #fff; box-shadow: none } /* ── teen halat: beeti raat, aaj ki raat, aane wali raat ─────────────── */ html.ehn-on .ehn-nr.is-past .ehn-nr-diya .fl, html.ehn-on .ehn-nr.is-today .ehn-nr-diya .fl { opacity: 1 } html.ehn-on .ehn-nr.is-past .ehn-nr-diya .bw, html.ehn-on .ehn-nr.is-today .ehn-nr-diya .bw { fill: var(--ehn-gold) } html.ehn-on .ehn-nr.is-past { opacity: .82 } html.ehn-on .ehn-nr.is-today { box-shadow: inset 0 3px 0 var(--nc), 0 0 0 1.5px color-mix(in srgb, var(--nc) 55%, transparent), 0 14px 32px -18px color-mix(in srgb, var(--nc) 70%, transparent); transform: translateY(-3px); } html.ehn-on .ehn-nr.is-today .ehn-nr-diya .fl { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ehn-gold-l) 85%, transparent)); } html.ehn-on .ehn-nr.is-next .ehn-nr-of { opacity: .78 } html.ehn-on .ehn-nr:hover { transform: translateY(-3px) } @media (max-width: 760px) { html.ehn-on .ehn-nights { background-image: var(--ehn-toran); background-size: 74px 33px; padding-top: calc(clamp(5rem, 11vw, 9rem) + 20px) } html.ehn-on .ehn-nr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px } html.ehn-on .ehn-nr { padding: 14px 12px 12px; border-radius: 14px } html.ehn-on .ehn-nr-devi { font-size: 14.5px } html.ehn-on .ehn-nr-of { font-size: 11.5px } } @media (prefers-reduced-motion: reduce) { html.ehn-on .ehn-nr, html.ehn-on .ehn-nr-code { transition: none } html.ehn-on .ehn-nr:hover { transform: none } } /* ══════════════════════════════════════════════════════════════════════ 19 · BANDHANI (chunri) + RANGOLI ────────────────────────────────────────────────────────────────────── Sirf rang badalna kaafi nahi tha — Navratri ki apni cheezein chahiye. Bandhani = chunri ka bandhej, chhote bindu jodi me; Navratri ki poshak ka sabse pehchana pattern. Rangoli = darwaze par bana kamal-mandala. Dono background LAYER me hain (DOM node nahi) — background hamesha content ke peeche paint hota hai, isliye ye kabhi text nahi dhak sakte, aur na hi inpar click jaata hai. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on { --ehn-bandhani: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23FFC85C' fill-opacity='.13'%3E%3Ccircle cx='6' cy='6' r='2.1'/%3E%3Ccircle cx='12' cy='9' r='1.2'/%3E%3Ccircle cx='30' cy='6' r='2.1'/%3E%3Ccircle cx='36' cy='9' r='1.2'/%3E%3Ccircle cx='18' cy='24' r='2.1'/%3E%3Ccircle cx='24' cy='27' r='1.2'/%3E%3Ccircle cx='42' cy='24' r='2.1'/%3E%3Ccircle cx='0' cy='24' r='2.1'/%3E%3Ccircle cx='6' cy='42' r='2.1'/%3E%3Ccircle cx='12' cy='45' r='1.2'/%3E%3Ccircle cx='30' cy='42' r='2.1'/%3E%3Ccircle cx='36' cy='45' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); --ehn-rangoli: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23FFC85C' stroke-opacity='.22' stroke-width='2'%3E%3Ccircle cx='170' cy='170' r='34'/%3E%3Ccircle cx='170' cy='170' r='96'/%3E%3Ccircle cx='170' cy='170' r='132'/%3E%3Cg%3E%3Cellipse cx='170' cy='105' rx='19' ry='44'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(45 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(90 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(135 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(180 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(225 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(270 170 170)'/%3E%3Cellipse cx='170' cy='105' rx='19' ry='44' transform='rotate(315 170 170)'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23C42B6B' fill-opacity='.16'%3E%3Ccircle cx='170' cy='38' r='5'/%3E%3Ccircle cx='170' cy='302' r='5'/%3E%3Ccircle cx='38' cy='170' r='5'/%3E%3Ccircle cx='302' cy='170' r='5'/%3E%3C/g%3E%3C/svg%3E"); } /* bandhani — cream surfaces par kapde jaisa mahin pattern */ html.ehn-on .sec--sand, html.ehn-on .ehn-nights { background-image: var(--ehn-toran), var(--ehn-bandhani), radial-gradient(820px 460px at 88% 6%, color-mix(in srgb, var(--ehn-c) 13%, transparent), transparent 66%), radial-gradient(620px 380px at 6% 96%, color-mix(in srgb, var(--ehn-gold) 15%, transparent), transparent 68%); background-repeat: repeat-x, repeat, no-repeat, no-repeat; background-position: left top, left top, right top, left bottom; background-size: 104px 46px, 48px 48px, auto, auto; } /* rangoli — gehre section aur footer ke peeche, bada aur halka */ html.ehn-on .sec--deep { background-image: var(--ehn-toran-d), var(--ehn-rangoli), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-repeat: repeat-x, no-repeat, no-repeat; background-position: left top, right -70px bottom -80px, left top; background-size: 104px 46px, 340px 340px, auto; } html.ehn-on .footer { background-image: var(--ehn-toran-d), var(--ehn-rangoli), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-repeat: repeat-x, no-repeat, no-repeat; background-position: left top, left -90px top 40px, left top; background-size: 104px 46px, 340px 340px, auto; } /* mobile: sirf toran + bandhani. Rangoli 340px ka bada raster hai aur chhoti screen par uska koi fayda nahi — banate hi nahi. */ @media (max-width: 760px) { html.ehn-on .sec--sand, html.ehn-on .ehn-nights { background-image: var(--ehn-toran), var(--ehn-bandhani); background-repeat: repeat-x, repeat; background-position: left top, left top; background-size: 74px 33px, 40px 40px; } html.ehn-on .sec--deep, html.ehn-on .footer { background-image: var(--ehn-toran-d), linear-gradient(180deg, var(--ehn-deep) 0%, #2E1443 100%); background-repeat: repeat-x, no-repeat; background-position: left top, left top; background-size: 74px 33px, auto; } } /* ── 19.1 · hare HUE wale surface (exact-match scan se chhoot gaye the) ── Mera pehla scan sirf site ke 4 exact rgb dhoondhta tha, isliye ye bach gaye: inke gradient/alpha alag rang dete hain (rgb(14,64,56), rgba(18,58,53,.46), rgb(6,32,28)). Ab hue se pakde — jahan green channel red se saaf aage ho. Isi wajah se comparison card hara dikh raha tha jabki "greenCount 0" aa raha tha. */ html.ehn-on .compare-col.us { background-image: linear-gradient(165deg, #3E1820 0%, #1B0B2E 100%); } html.ehn-on .compare-col:not(.us) { background-image: linear-gradient(165deg, #2A2422 0%, #1C1717 100%); } html.ehn-on .cta.glass { background-color: color-mix(in srgb, var(--ehn-deep) 62%, transparent) } html.ehn-on .cine.shine { background-color: #22090E } html.ehn-on .ch-head { background-image: linear-gradient(135deg, var(--ehn-deep) 0%, #3A1550 55%, #7A3B12 100%); } html.ehn-on .lightbox { background-color: rgba(26, 8, 12, .92) } html.ehn-on .quote-modal { background-color: rgba(34, 12, 16, .58) } /* ══════════════════════════════════════════════════════════════════════ 20 · DANDIYA · KALASH · AKHAND JYOT · DHANUSH-BAAN · GARBA ═════════════════════════════════════════════════════════════════════ */ /* ── 20.1 · dandiya chinh — har sirnaame ke upar ─────────────────────── */ html.ehn-on .ehn-dandiya { display: block; width: 64px; height: 26px; margin: 0 auto 14px; } html.ehn-on .sec-head:not(.center) .ehn-dandiya { margin-left: 0 } html.ehn-on .ehn-dandiya svg { width: 100%; height: 100%; display: block } /* ── 20.2 · ghatasthapana kalash + akhand jyot ───────────────────────── */ html.ehn-on .ehn-jyot { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } html.ehn-on .ehn-kalash { display: block; width: 46px; height: 56px; flex: none } html.ehn-on .ehn-kalash.flip { transform: scaleX(-1) } html.ehn-on .ehn-kalash svg { width: 100%; height: 100%; display: block } html.ehn-on .ehn-akhand { display: block; width: 44px; height: 44px; flex: none; margin-bottom: 4px } html.ehn-on .ehn-akhand svg { width: 100%; height: 100%; display: block; overflow: visible } html.ehn-on .ehn-akhand .bw { fill: var(--ehn-gold) } html.ehn-on .ehn-akhand .wk { stroke: var(--ehn-gold-l); stroke-width: 1.4; stroke-linecap: round } html.ehn-on .ehn-akhand .fl { fill: var(--ehn-gold-l); transform-origin: 50% 88%; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ehn-gold-l) 85%, transparent)); animation: ehnJyot 2.6s ease-in-out infinite; /* akela 44px element — kharcha na ke barabar */ } @keyframes ehnJyot { 0%, 100% { transform: scaleY(1) translateY(0) } 38% { transform: scaleY(1.07) translateY(-.6px) } 64% { transform: scaleY(.97) translateY(.3px) } } html.ehn-on .ehn-jyot-l { flex: 1 1 100%; text-align: center; font: 800 10.5px/1 var(--font, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #8A6A1E; margin-top: 4px; } /* ── 20.3 · Vijayadashami — dhanush-baan ─────────────────────────────── */ html.ehn-on .ehn-bow { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: block; opacity: .9; pointer-events: none; /* card ke andar, text se door */ } html.ehn-on .ehn-bow svg { width: 100%; height: 100%; display: block } html.ehn-on .ehn-nr.ehn-dus { padding-right: 46px } html.ehn-on .ehn-nr.ehn-dus .ehn-nr-devi { color: #6B4A0E } /* us din poora page: Dussehra ka rang gold hai, sirnaame par dhanush */ html.ehn-on[data-night="10"] .ehn-jyot-l::after { content: " · Vijayadashami" } /* ── 20.4 · garba — jyot ke charon or ghera ────────────────────────── Background layer hi rakha hai, DOM node nahi: ye CTA ke peeche baithta hai aur kisi surat me text ke upar nahi aa sakta. */ html.ehn-on { --ehn-garba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23E6CC8A' stroke-opacity='.28' stroke-width='1.6'%3E%3Ccircle cx='150' cy='150' r='58'/%3E%3Ccircle cx='150' cy='150' r='104'/%3E%3C/g%3E%3Cg fill='%23E8942A' fill-opacity='.30'%3E%3Ccircle cx='150' cy='46' r='6'/%3E%3Ccircle cx='223' cy='77' r='6'/%3E%3Ccircle cx='254' cy='150' r='6'/%3E%3Ccircle cx='223' cy='223' r='6'/%3E%3Ccircle cx='150' cy='254' r='6'/%3E%3Ccircle cx='77' cy='223' r='6'/%3E%3Ccircle cx='46' cy='150' r='6'/%3E%3Ccircle cx='77' cy='77' r='6'/%3E%3C/g%3E%3Cg fill='%23C8A24B' fill-opacity='.24'%3E%3Ccircle cx='150' cy='92' r='4'/%3E%3Ccircle cx='191' cy='109' r='4'/%3E%3Ccircle cx='208' cy='150' r='4'/%3E%3Ccircle cx='191' cy='191' r='4'/%3E%3Ccircle cx='150' cy='208' r='4'/%3E%3Ccircle cx='109' cy='191' r='4'/%3E%3Ccircle cx='92' cy='150' r='4'/%3E%3Ccircle cx='109' cy='109' r='4'/%3E%3C/g%3E%3Ccircle cx='150' cy='150' r='9' fill='%23F0B23A' fill-opacity='.5'/%3E%3C/svg%3E"); } html.ehn-on .cta.glass { background-image: var(--ehn-garba); background-repeat: no-repeat; background-position: right -60px center; background-size: 300px 300px; } @media (max-width: 760px) { html.ehn-on .ehn-dandiya { width: 52px; height: 21px; margin-bottom: 10px } html.ehn-on .ehn-jyot { gap: 12px } html.ehn-on .ehn-kalash { width: 36px; height: 44px } html.ehn-on .ehn-akhand { width: 34px; height: 34px } html.ehn-on .cta.glass { background-image: none } /* 300px raster, faayda zero */ } @media (prefers-reduced-motion: reduce) { html.ehn-on .ehn-akhand .fl { animation: none } } /* ── 20.5 · naap ke baad sudhaar ────────────────────────────────────── Dhanush card ke andar hi tha (naapa: 10px inset, devi text se koi takraav nahi) — wo theek tha. Par jyot/kalash chhote pad rahe the, aur nau-raat section me dandiya chinh jyot ke saath dohra lag raha tha. */ html.ehn-on .ehn-kalash { width: 58px; height: 70px } html.ehn-on .ehn-akhand { width: 56px; height: 56px; margin-bottom: 6px } html.ehn-on .ehn-jyot { gap: 22px; margin-bottom: 22px } html.ehn-on .ehn-jyot-l { font-size: 11px; margin-top: 8px } html.ehn-on .ehn-dandiya { width: 74px; height: 30px } html.ehn-on .ehn-nights .ehn-dandiya { display: none } @media (max-width: 760px) { html.ehn-on .ehn-kalash { width: 42px; height: 51px } html.ehn-on .ehn-akhand { width: 42px; height: 42px } html.ehn-on .ehn-dandiya { width: 58px; height: 24px } } /* ══════════════════════════════════════════════════════════════════════ 21 · SERVICES · AUDIO · SLIDER · STATS — bache hue "normal" hisse ────────────────────────────────────────────────────────────────────── Naap kar mila ki ye chaar block abhi bhi site ke apne rang par the: 6 service tiles ka rainbow (pink/red/purple/mint/blue/yellow), unke .more link jo --accent se rang lete hain, audio ka HARA play button (rgb 14,158,122), slider ka HARA grip (rgb 22,184,145), aur stats ke plain number. Tiles ko ek hi rang karne ke bajaye NAU RANG diye — har service ko ek raat ka rang. Ye Navratri ka apna vichaar hai, aur service ki pehchan bhi bani rehti hai. Text ka rang alag (gehra) rakha hai kyunki peela/ safed raatein cream par padhi hi nahi jaatin — wahi galti pehle .more par ho chuki hai. ═════════════════════════════════════════════════════════════════════ */ /* raat 1 · orange */ html.ehn-on .svc:nth-of-type(1) .ico { background-image: linear-gradient(165deg, #F2934F 0%, #D9641F 100%) } html.ehn-on .svc:nth-of-type(1) { --accent: #A5194F } /* raat 3 · red */ html.ehn-on .svc:nth-of-type(2) .ico { background-image: linear-gradient(165deg, #E06A6A 0%, #B02020 100%) } html.ehn-on .svc:nth-of-type(2) { --accent: #8E1C1C } /* raat 8 · purple */ html.ehn-on .svc:nth-of-type(3) .ico { background-image: linear-gradient(165deg, #A874C9 0%, #6E2F98 100%) } html.ehn-on .svc:nth-of-type(3) { --accent: #5A2680 } /* raat 6 · green */ html.ehn-on .svc:nth-of-type(4) .ico { background-image: linear-gradient(165deg, #5FB98A 0%, #1B7A4C 100%) } html.ehn-on .svc:nth-of-type(4) { --accent: #16603C } /* raat 4 · royal blue */ html.ehn-on .svc:nth-of-type(5) .ico { background-image: linear-gradient(165deg, #6C8AD8 0%, #24439E 100%) } html.ehn-on .svc:nth-of-type(5) { --accent: #1E3880 } /* raat 5 · yellow */ html.ehn-on .svc:nth-of-type(6) .ico { background-image: linear-gradient(165deg, #F0C24A 0%, #C98A00 100%) } html.ehn-on .svc:nth-of-type(6) { --accent: #7A5400 } /* har tile par sunehra chhalla — sab ko ek parivaar bana deta hai */ html.ehn-on .svc .ico { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ehn-gold) 60%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--ehn-ink) 45%, transparent); } /* audio ka play button aur slider ka grip — dono abhi bhi HARE the */ html.ehn-on .au-play { background-image: linear-gradient(125deg, var(--ehn-c) 0%, #A5194F 100%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ehn-gold) 55%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ehn-c) 70%, transparent); } html.ehn-on .grip { background-image: linear-gradient(100deg, var(--ehn-gold-l) 0%, var(--ehn-c) 100%); color: #2A1036; } /* stats — plain safed cards the. Ab warm gradient number + raat ka bindu. `background` shorthand NAHI: wo background-clip reset kar deta hai aur akshar gayab ho jaate hain (do baar ho chuka hai). */ html.ehn-on .stat .num { background-image: linear-gradient(100deg, #7A1240 0%, #B0691A 55%, #C42B6B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.ehn-on .stat { position: relative } html.ehn-on .stat::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--ehn-c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--ehn-gold) 45%, transparent); } /* ── 21.1 · slider ka grip ──────────────────────────────────────────── Site ka rule `.ba .handle .grip` hai — 3 class, yaani (0,3,0). Mera `html.ehn-on .grip` (0,2,1) tha, to class-count par haar raha tha aur grip hara hi rehta tha. Poora rasta likh kar (0,4,1). */ html.ehn-on .ba .handle .grip { background-image: linear-gradient(135deg, var(--ehn-gold-l) 0%, var(--ehn-c) 100%); color: #2A1036; } /* garland hata diya (Aditya) — ye ab sirf header ka offset naapne ke liye hai */ html.ehn-on .ehn-garland.ehn-off { height: 0; overflow: hidden } /* ══════════════════════════════════════════════════════════════════════ 22 · RAAT MODE — poora page Navratri ki raat me ────────────────────────────────────────────────────────────────────── Ab tak meri galti yahi thi: page cream/safed hi rakha aur sirf accent warm kiye. Isliye wo "clean modern site with orange accents" lagta raha, festival nahi — teen baar yahi feedback aaya. Navratri RAAT ka tyohaar hai. Garba raat ko hota hai, diya raat me jalta hai. Isliye poora ground velvet raat ka, aur uspar sona. Site variable-driven hai (--sand ground, --ink text, --muted-l muted), isliye jad se palat rahe hain — patti-patti nahi. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on { --sand: #221030; /* page ka ground: cream -> velvet */ --sand-2: #2C131A; --ink: #FFF6E8; /* jo text gehra tha ab cream */ --muted-l: #C4B3D6; /* halke ground ka muted -> gehre par */ --muted-d: #C4B3D6; --line-l: rgba(230, 204, 138, .17); /* hairline ab sunehri */ --ehn-cream: #FFF6E8; } html.ehn-on body { background-color: #1B0B2E; background-image: radial-gradient(1200px 620px at 50% -220px, color-mix(in srgb, var(--ehn-c) 22%, transparent), transparent 72%), radial-gradient(820px 460px at 100% 6%, color-mix(in srgb, var(--ehn-gold) 14%, transparent), transparent 70%), linear-gradient(180deg, #221030 0%, #1B0B2E 100%); background-repeat: no-repeat, no-repeat, no-repeat; background-attachment: scroll, scroll, scroll; /* fixed = iOS par jank */ color: var(--ehn-cream); } /* ── section bands: do velvet shade, bandhani upar ─────────────────── */ html.ehn-on .sec--sand, html.ehn-on .ehn-nights { background-color: #241036; background-image: var(--ehn-bandhani), radial-gradient(820px 460px at 88% 6%, color-mix(in srgb, var(--ehn-c) 20%, transparent), transparent 66%); background-repeat: repeat, no-repeat; background-position: left top, right top; background-size: 48px 48px, auto; padding-top: clamp(5rem, 11vw, 9rem); } html.ehn-on .sec--deep { background-image: var(--ehn-rangoli), linear-gradient(180deg, #35141C 0%, #1F0B11 100%); background-repeat: no-repeat, no-repeat; background-position: right -70px bottom -80px, left top; background-size: 340px 340px, auto; padding-top: clamp(5rem, 11vw, 9rem); color: var(--ehn-cream); } html.ehn-on .footer { background-image: var(--ehn-rangoli), linear-gradient(180deg, #200C12 0%, #170709 100%); background-repeat: no-repeat, no-repeat; background-position: left -90px top 40px, left top; background-size: 340px 340px, auto; } /* bandhani ab gehre par — sunehra, warna dikhta hi nahi */ html.ehn-on { --ehn-bandhani: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23E6CC8A' fill-opacity='.10'%3E%3Ccircle cx='6' cy='6' r='2.1'/%3E%3Ccircle cx='12' cy='9' r='1.2'/%3E%3Ccircle cx='30' cy='6' r='2.1'/%3E%3Ccircle cx='36' cy='9' r='1.2'/%3E%3Ccircle cx='18' cy='24' r='2.1'/%3E%3Ccircle cx='24' cy='27' r='1.2'/%3E%3Ccircle cx='42' cy='24' r='2.1'/%3E%3Ccircle cx='0' cy='24' r='2.1'/%3E%3Ccircle cx='6' cy='42' r='2.1'/%3E%3Ccircle cx='12' cy='45' r='1.2'/%3E%3Ccircle cx='30' cy='42' r='2.1'/%3E%3Ccircle cx='36' cy='45' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); } /* ── cards: safed se jewel-tone velvet ──────────────────────────────── */ html.ehn-on .card-lite, html.ehn-on .ehn-nr, html.ehn-on .stat { background-color: #2C1340; background-image: none; border-color: color-mix(in srgb, var(--ehn-gold) 26%, transparent); box-shadow: inset 0 2.5px 0 var(--ehn-gold), 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -26px rgba(0,0,0,.7); } html.ehn-on .card-lite:hover { border-color: color-mix(in srgb, var(--ehn-gold) 52%, transparent); box-shadow: inset 0 2.5px 0 var(--ehn-gold-l), 0 2px 4px rgba(0,0,0,.35), 0 22px 48px -24px color-mix(in srgb, var(--ehn-c) 55%, transparent); } html.ehn-on .card-lite h3, html.ehn-on .card-lite h4, html.ehn-on .card-lite .num, html.ehn-on .card-lite .who .n, html.ehn-on .ehn-nr-devi, html.ehn-on .faq-q { color: var(--ehn-cream) } html.ehn-on .card-lite p, html.ehn-on .card-lite li, html.ehn-on .card-lite .lbl, html.ehn-on .card-lite .who .r, html.ehn-on .ehn-nr-of, html.ehn-on .faq-a { color: #D8C9E4 } html.ehn-on .ehn-nr-col { color: #BCA48A } /* ── text jo pehle gehre rang me tha ────────────────────────────────── */ html.ehn-on .sec-pad .eyebrow, html.ehn-on .hero .eyebrow { color: var(--ehn-gold-l) } html.ehn-on .sec-pad .grad-text, html.ehn-on .hero .grad-text { background-image: linear-gradient(100deg, #F5B84E 0%, #E8823A 52%, #FFC85C 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } html.ehn-on .stat .num { background-image: linear-gradient(100deg, #F5B84E 0%, #FFC85C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.ehn-on .ehn-nr-n, html.ehn-on .ehn-jyot-l { color: var(--ehn-gold-l) } html.ehn-on .ehn-nr-of em { color: #F5B84E } html.ehn-on .ehn-nr-code { background: color-mix(in srgb, var(--ehn-gold) 15%, #241036); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ehn-gold) 50%, transparent); color: var(--ehn-gold-l); } html.ehn-on .ehn-nr-code:hover { background: color-mix(in srgb, var(--ehn-gold) 26%, #241036) } html.ehn-on .faq-item { border-bottom-color: color-mix(in srgb, var(--ehn-gold) 26%, transparent) } html.ehn-on .btn-ghost { color: var(--ehn-cream) } /* ══════════════════════════════════════════════════════════════════════ 22.1 · RAAT MODE ke baad ka sudhaar — 36 fail se 0 tak ────────────────────────────────────────────────────────────────────── Poore page ka contrast scan chalaya (345 text nodes) aur 36 fail mile. Do jad thin: (1) --sand ko palatna GALAT tha. Site use DO tarah se use karti hai: halke section ka background AUR gehre section par LIGHT TEXT ka rang (.sec--deep{color:var(--sand)}, nav links, footer trust line, CTA). Use gehra karte hi wo saara text gehre-par-gehra ho gaya — nav ka "Home", "Hear the difference", "Ready to turn raw footage", "GST Registered", sab. Isliye --sand wapas cream; gehre surfaces main pehle se alag se set kar hi raha hoon. (2) Kuch SAFED TAPU bach gaye the (toast, chat panel, timeline, carousel ke button, price toggle) — --ink cream hone se unpar cream-par-safed ho gaya. Ab wo bhi velvet. ═════════════════════════════════════════════════════════════════════ */ html.ehn-on { --sand: #FAF7F0; /* WAPAS cream — ye text ka rang bhi hai */ --sand-2: #F4F1E7; } /* ── safed tapu -> velvet ────────────────────────────────────────────── */ html.ehn-on .timeline, html.ehn-on .tcaro-nav, html.ehn-on .backtop, html.ehn-on .proof, html.ehn-on .chat-panel, html.ehn-on .price-toggle, html.ehn-on .ps-ic { background-color: #2C1340; color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 30%, transparent); } html.ehn-on .ch-chips { background-color: #241036 } html.ehn-on .chat-panel *, html.ehn-on .proof * { border-color: color-mix(in srgb, var(--ehn-gold) 22%, transparent) } html.ehn-on .proof .p-name, html.ehn-on .chat-panel b { color: var(--ehn-cream) } html.ehn-on .proof .p-txt, html.ehn-on .chat-panel p { color: #D8C9E4 } html.ehn-on .tcaro-nav, html.ehn-on .backtop { color: var(--ehn-gold-l) } html.ehn-on .btn-ghost, html.ehn-on .btn-play { background-color: color-mix(in srgb, var(--ehn-gold) 10%, #241036); color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 46%, transparent); } html.ehn-on .price-toggle .pt-opt { color: #C4B3D6 } html.ehn-on .price-toggle .pt-opt.on, html.ehn-on .price-toggle .on { color: #241036 } html.ehn-on .ehn-night-in, html.ehn-on .hero .ehn-code { background-color: #2C1340; color: var(--ehn-cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ehn-gold) 44%, transparent); } /* ── service "Explore" links: gehre rang the (cream ke liye), ab halke ── */ html.ehn-on .svc:nth-of-type(1) { --accent: #F2934F } html.ehn-on .svc:nth-of-type(2) { --accent: #E88888 } html.ehn-on .svc:nth-of-type(3) { --accent: #C79AE0 } html.ehn-on .svc:nth-of-type(4) { --accent: #6FCB9B } html.ehn-on .svc:nth-of-type(5) { --accent: #93ADEC } html.ehn-on .svc:nth-of-type(6) { --accent: #F0C24A } /* ── badges jo gehre par gehre reh gaye ─────────────────────────────── */ html.ehn-on .badge, html.ehn-on .st-badge { background-image: linear-gradient(120deg, var(--ehn-gold-l), var(--ehn-gold)); color: #2A1036; } html.ehn-on .sec--deep .tag { color: var(--ehn-gold-l) } html.ehn-on .compare-col:not(.us) .tag { color: #FFB3B3 } /* ── 22.2 · do asli fail jo scan me bache ────────────────────────────── */ /* hero chip me raat ka rang ka naam --ehn-ink (gehra) me tha — velvet chip par 1.08:1. Ab sunehra. */ html.ehn-on .ehn-night-d { color: var(--ehn-gold-l) } html.ehn-on .ehn-night-n, html.ehn-on .ehn-night-in span { color: var(--ehn-cream) } html.ehn-on .ehn-sep { color: color-mix(in srgb, var(--ehn-gold) 60%, transparent) } /* quote modal abhi safed tha — uspar cream text gayab tha */ html.ehn-on .quote-card, html.ehn-on .qm-card, html.ehn-on .quote-modal .card, html.ehn-on .quote-modal > div { background-color: #2C1340; color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 30%, transparent); } html.ehn-on .quote-modal h3, html.ehn-on .quote-modal h4 { color: var(--ehn-cream) } html.ehn-on .quote-modal p, html.ehn-on .quote-modal label { color: #D8C9E4 } /* ── 22.3 · HEADER ka scrim ────────────────────────────────────────── Site ka header `linear-gradient(rgba(250,247,240,.92), transparent)` hai — gehre page par ye safed patti ban gaya aur uspar cream nav links gayab (naapa: 1.03:1). Ab velvet scrim. */ html.ehn-on .header { background-image: linear-gradient(180deg, rgba(27,11,46, .94) 0%, rgba(27,11,46, 0) 100%); } html.ehn-on .header .nav a, html.ehn-on .header .nav-links a { color: var(--ehn-cream) } html.ehn-on .header .nav a:hover, html.ehn-on .header .nav a.active { color: var(--ehn-gold-l) } html.ehn-on .mobile-menu a { color: var(--ehn-cream) } /* ── 22.4 · aakhri cream surfaces + bache hue text ──────────────────── Rang se dhoondh kar nikale (audit ne bg rgb(251,248,241) / (246,243,234) / (244,249,245) bataya tha): hero ka apna gradient, ek plain button, aur quote modal ka output box. Inhi ki wajah se hero-sub, eyebrow aur trust line 1.5-1.9:1 par thin. */ html.ehn-on .hero.hero-cine { background-image: radial-gradient(46% 34% at 85% 4%, color-mix(in srgb, var(--ehn-gold) 20%, transparent), transparent 70%), radial-gradient(58% 40% at 8% 2%, color-mix(in srgb, var(--ehn-c) 20%, transparent), transparent 72%), linear-gradient(180deg, #2A1017 0%, #1B0B2E 100%); background-repeat: no-repeat, no-repeat, no-repeat; } html.ehn-on .qm-out { background-image: linear-gradient(158deg, #2C1340, #241036); color: var(--ehn-cream); } html.ehn-on .qm-lbl, html.ehn-on .qm-note { color: #D8C9E4 } html.ehn-on .qm-out b, html.ehn-on .qm-out strong { color: var(--ehn-gold-l) } /* pricing cards + unke andar ka text */ html.ehn-on .pc { background-color: #2C1340; border-color: color-mix(in srgb, var(--ehn-gold) 28%, transparent); } html.ehn-on .pname, html.ehn-on .pc h3, html.ehn-on .price { color: var(--ehn-cream) } html.ehn-on .pdesc, html.ehn-on .pc li { color: #D8C9E4 } /* nav dropdown + chat ke andar ke safed hisse */ html.ehn-on .nav-drop-menu { background-color: #241036; color: var(--ehn-cream) } html.ehn-on .nav-drop-menu a { color: var(--ehn-cream) } html.ehn-on .ch-input, html.ehn-on .ch-input input, html.ehn-on .ch-chips button { background-color: #241036; color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 26%, transparent); } /* chhoti chip buttons jinka koi class nahi tha (rgb 246,243,234) */ html.ehn-on .sec-pad button:not([class]) { background-color: #241036; color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 26%, transparent); } /* text jo abhi bhi site ke gehre rang me tha */ html.ehn-on .ital { color: #F0A24A } html.ehn-on .ehn-nr.ehn-dus .ehn-nr-devi { color: var(--ehn-cream) } html.ehn-on .save { color: var(--ehn-gold-l) } /* ── 22.5 · quote modal + bache hue chhote text ────────────────────── Chain naap kar pata chala ki pricing card (.plan.card-lite) PEHLE SE velvet hai — dikkat quote modal me thi, jo .sec-pad ke BAHAR hai, isliye mere `.sec-pad button…` wale rules use chhoote hi nahi the. Uske andar ka ek button abhi bhi HARA tha (rgb 14,158,122) aur ek cream (rgb 246,243,234). */ html.ehn-on .plan { background-image: none } html.ehn-on .qm-price { color: var(--ehn-gold-l) } html.ehn-on .qm-opts button, html.ehn-on .quote-modal button:not(.close) { background-color: #241036; background-image: none; color: var(--ehn-cream); border-color: color-mix(in srgb, var(--ehn-gold) 30%, transparent); } html.ehn-on .qm-opts button.on, html.ehn-on .quote-modal button.on { background-image: linear-gradient(135deg, var(--ehn-c) 0%, #A5194F 100%); color: #fff; border-color: transparent; } /* hero ka .ital pehle gehra tha (cream ground ke liye) — ab raat par halka. Ye rule mere purane `html.ehn-on .hero .ital` se zyada specific hai. */ html.ehn-on .hero.hero-cine .ital { color: #F0A24A } /* step number --accent se rang leta tha; purple/blue raatein velvet par 3:1 se neeche gir rahi thin — decorative hai, isliye sona. */ html.ehn-on .card-lite .idx { color: var(--ehn-gold-l) } html.ehn-on .hero .st-tc { color: var(--ehn-gold-l) } /* ── 22.6 · "popular" plan card ────────────────────────────────────── Ye card velvet ke UPAR `linear-gradient(rgba(255,255,255,.97), …)` ki safed parat daalta hai. Mera `html.ehn-on .card-lite` (0,2,1) uske `.plan.pop.card-lite` (0,3,0) se class-count par haar raha tha — bilkul wahi jaal jo .grip par laga tha. Poora rasta likh kar (0,4,1). */ html.ehn-on .plan.pop.card-lite { background-image: none; background-color: #3D1A24; box-shadow: inset 0 3px 0 var(--ehn-gold), 0 0 0 1.5px color-mix(in srgb, var(--ehn-gold) 42%, transparent), 0 24px 54px -26px rgba(0,0,0,.75); } /* plan ke naam site ke apne rangeen accent me the — velvet par 2.6-4.1:1. Ab sunehre, aur "popular" wala thoda ujla. */ html.ehn-on .pname { color: var(--ehn-gold-l) } html.ehn-on .plan.pop .pname { color: #FFE1A8 } html.ehn-on .price, html.ehn-on .plan .price { color: var(--ehn-cream) } /* pricing ke icon tiles abhi bhi neele/rangeen the */ html.ehn-on .plan .ico { background-image: linear-gradient(165deg, #F2934F 0%, #B8501A 100%) } html.ehn-on .plan.pop .ico { background-image: linear-gradient(165deg, #F0C24A 0%, #C08A12 100%) } /* orange par safed text 3.34:1 tha — gehra text zyada padhne layak */ html.ehn-on .au-toggle button.on, html.ehn-on .tcaro-dots button.on { color: #241036 } /* ── 22.7 · aakhri chhe ─────────────────────────────────────────────── */ /* plan ke naam: site inhe apne accent (#0A7AFF neela, #A652F0 purple) me deti hai aur wo velvet par 3.96-4.08:1 par rehte hain. Poora rasta likh kar sona. */ /* card off-white ho gaya, isliye ye label ab gehre. Yahi rule update kar rahe hain (naya layer nahi joda) — .plan.card-lite (0,3,1) mere baad wale .plan .pname (0,2,1) ko harata tha. */ html.ehn-on .plan .pname, html.ehn-on .plan.card-lite .pname { color: #5A4A6E } html.ehn-on .plan.pop .pname, html.ehn-on .plan.pop.card-lite .pname { color: #7A5A12 } /* plan ke CTA button: halka background + rangeen text tha */ html.ehn-on .plan .btn, html.ehn-on .plan a.btn, html.ehn-on .plan button { background-color: #241036; background-image: none; border-color: color-mix(in srgb, var(--ehn-gold) 40%, transparent); } html.ehn-on .plan .btn span, html.ehn-on .plan a.btn span, html.ehn-on .plan button span { color: var(--ehn-gold-l) } html.ehn-on .plan.pop .btn, html.ehn-on .plan.pop a.btn { background-image: linear-gradient(125deg, var(--ehn-c) 0%, #A5194F 100%); border-color: transparent; } html.ehn-on .plan.pop .btn span, html.ehn-on .plan.pop a.btn span { color: #fff } /* orange par safed 3.34:1 tha — gehra text lagao (quote modal ka toggle) */ html.ehn-on .quote-modal button.on, html.ehn-on .qm-opts button.on { color: #241036 } /* "THE OLD WAY" ribbon: safed par halka laal 3.71:1 — laal gehra kiya */ html.ehn-on .old-ribbon { background-color: #B3302F } /* ── 22.8 · aakhri do ──────────────────────────────────────────────── Dono par safed text tha par background itna halka ki 3.3-3.7:1 hi milta tha. Rang gehra kiya — haath se naapa: 4.80:1 aur 6.10:1. */ html.ehn-on .plan.pop .btn, html.ehn-on .plan.pop a.btn, html.ehn-on .plan.pop.card-lite a.btn { background-image: linear-gradient(125deg, #C42B6B 0%, #6E1038 100%); } html.ehn-on .compare-col .old-ribbon, html.ehn-on .sec--deep .old-ribbon, html.ehn-on span.old-ribbon { background-color: #A82725 } /* mera background-COLOR to lag gaya tha, par site ka background-IMAGE gradient uske upar paint ho raha tha — isliye naap me abhi bhi purana halka laal aa raha tha. Image bhi set kiya. */ html.ehn-on .old-ribbon { background-image: linear-gradient(120deg, #A82725 0%, #7E1A19 100%); } /* ══════════════════════════════════════════════════════════════════════ 23 · SAFED DHUAAN HATAO ────────────────────────────────────────────────────────────────────── Jad naap kar mili: .cine-bg ek 1258x765 ka