/* Brand colors alias the shared tokens in css/design-system.css (linked in ) so there's one source of truth. Values with no exact match there (--br, --brown, --temple, --worange, --gold2, --cream2) stay as local one-offs rather than invented mappings that would silently shift color. */ :root{--or:var(--c-saffron);--saff:var(--c-saffron-light);--gold:var(--c-gold);--gilt:var(--c-gold-light);--ink:var(--c-ivory-900);--cream:var(--c-cream);--warm:var(--c-warm);--lbr:var(--c-maroon-400);--green:var(--c-success);--br:#6b3010;--maroon:var(--c-maroon-700);--dmaroon:var(--c-maroon-800);--navy:var(--c-water-800); --brown:#2a1408;--temple:#3b2417;--worange:#e67e00;--gold2:#ffc44d;--cream2:#fff2df} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Matches .h-scene's own background so a real mobile browser's dynamic address-bar collapse or rubber-band overscroll — which briefly exposes whatever is BEHIND the page — never flashes white at the hero seam. DevTools mobile emulation doesn't reproduce this; only real phones do. */ html{scroll-behavior:smooth;background:var(--brown)} body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased} /* ── NAV (injected by js/nav-component.js) — homepage only: fixed, transparent dark-brown glass so the hero scene runs beneath it ── */ nav.psots-nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,rgba(42,20,8,.62),rgba(24,9,2,.55));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,196,77,.18);box-shadow:none;transition:opacity .35s,transform .35s} /* Scrolled into the journey: the bar steps aside and a constant logo pin holds the top-right corner; back at the top the full nav returns. (js/index.js toggles .nav-pinned on ) */ .nav-pinned nav.psots-nav{opacity:0;pointer-events:none;transform:translateY(-12px)} #heroLogoPin{position:fixed;top:12px;right:14px;z-index:401;display:flex;align-items:center;gap:.45rem;padding:.36rem .85rem .36rem .5rem;border-radius:50px;background:linear-gradient(135deg,rgba(42,20,8,.72),rgba(24,9,2,.66));backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,196,77,.4);text-decoration:none;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .35s,transform .35s;box-shadow:0 4px 18px rgba(0,0,0,.25)} #heroLogoPin img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(255,160,40,.4))} #heroLogoPin span{font-family:'Yatra One',serif;font-size:.8rem;color:var(--gold2);letter-spacing:.04em;line-height:1} .nav-pinned #heroLogoPin{opacity:1;pointer-events:auto;transform:translateY(0)} /* ══════ CINEMATIC HERO — sticky scene inside a tall scroll journey ══════ js/index.js drives --sunset (0 sunrise → 1 dusk) from scroll progress and fades the .hp text phases in/out. All motion is transform/opacity only. */ /* dvh (dynamic viewport height) is the real fix for the mobile gap: svh is pinned to the SMALLEST possible viewport (address bar fully shown), so when a real phone's address bar auto-collapses mid-scroll — giving MORE visible screen than svh accounted for — .h-scene stopped covering the bottom of the screen, exposing the shore/dashboard peeking up underneath (reported July 2026, screenshotted on a real device; this never reproduces in desktop DevTools mobile emulation). dvh live- tracks the actual current viewport instead of a fixed worst case. Kept as a third tier — vh/svh still apply on browsers without dvh. */ .hero{height:330vh;height:330svh;height:330dvh;position:relative;z-index:1;--sunset:0;--sunrise:0;--sunx:41%} .h-scene{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden;background:var(--brown)} /* Sky — deep temple brown melting into molten gold at the waterline (70%) */ .h-sky{position:absolute;inset:0;background:linear-gradient(180deg,#190b03 0%,#2a1408 12%,#48200a 26%,#7a2f05 38%,#b54a02 48%,#e67e00 57%,#ffab33 63%,#ffd27a 68%,#ffe3a3 70.5%,#8a4d2a 76%,#1a3a6e 90%,#0d2244 100%)} /* Dusk veil — deepens as the visitor scrolls; scrolling back up is sunrise */ .h-dusk{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#241040 0%,#4a1420 46%,#0d2244 100%);opacity:calc(var(--sunset)*.58)} /* Ambient glows fade in together with the sunrise (see .h-sun) so the opening frame reads as a quiet pre-dawn river, not a fully-lit scene with a half-submerged sun. */ .h-rays{position:absolute;bottom:22%;left:var(--sunx);transform:translateX(-50%);width:min(760px,130vw);height:min(760px,130vw);border-radius:50%;background:repeating-conic-gradient(rgba(255,210,60,.09) 0deg 2.5deg,transparent 2.5deg 12deg);animation:rspin 60s linear infinite;pointer-events:none;z-index:3;opacity:calc((.07 - var(--sunset)*.04) * var(--sunrise))} @keyframes rspin{to{transform:translateX(-50%) rotate(360deg)}} /* Sun — a full rise → hold → set arc driven by scroll, not by page-load time. --sunrise (0→1, early scroll) lifts a small sun up out of the water to its resting height; --sunset (0→1, late scroll) later sinks it back down. Both windows are set in js/index.js and never overlap, so the two contributions to translateY/scale simply add. sunFloat animates the separate `translate` property so the idle bob COMPOSES with the scroll-driven position instead of overriding it. */ @keyframes sunFloat{0%,100%{translate:0 0;filter:blur(.6px) brightness(1)}50%{translate:0 -14px;filter:blur(.6px) brightness(1.14)}} .h-sun{position:absolute;left:var(--sunx);bottom:23.5%;width:min(215px,46vw);height:min(215px,46vw);border-radius:50%;z-index:4;filter:blur(.6px);background:radial-gradient(circle,#fffbe6 0%,#ffe58a 20%,#ffb733 46%,rgba(255,110,10,.34) 68%,transparent 82%);transform:translateX(-50%) translateY(calc((1 - var(--sunrise))*15svh + var(--sunset)*17svh)) scale(calc(.5 + var(--sunrise)*.5 - var(--sunset)*.12));animation:sunFloat 11s ease-in-out infinite} .h-sun-glow{position:absolute;left:var(--sunx);bottom:4%;transform:translateX(-50%);width:min(720px,150vw);height:min(720px,150vw);border-radius:50%;z-index:3;pointer-events:none;opacity:var(--sunrise);background:radial-gradient(circle,rgba(255,180,60,calc(.32 - var(--sunset)*.12)) 0%,rgba(255,120,20,.12) 44%,transparent 70%)} /* Water — an endless river mirroring the molten sky: bronze at the horizon melting into deep indigo near the viewer. No side banks. */ .h-water{position:absolute;bottom:0;left:0;right:0;height:30%;z-index:6;background:linear-gradient(180deg,#c07030 0%,#8a5030 9%,#5c4148 22%,#3a3658 38%,#232c50 62%,#131a33 100%)} .h-water::before{content:'';position:absolute;inset:0;background:#071b38;opacity:calc(var(--sunset)*.42)} /* NOTE: the shared waterShimmer keyframes animate translateX(±30%) which would OVERRIDE the -50% centering and shove this column right of the sun — use centered keyframes (sway ±6% around -50%) instead. */ .h-water::after{content:'';position:absolute;top:0;left:var(--sunx);width:150px;height:100%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,210,80,.42) 0%,transparent 100%);filter:blur(14px);animation:shimmerCentered 9s ease-in-out infinite} @keyframes shimmerCentered{0%,100%{opacity:.55;transform:translateX(-56%)}50%{opacity:.9;transform:translateX(-44%)}} /* Flowing river — canvas ripples + sun glitter (drawn by js/index.js). width/height are explicit: canvas is a replaced element, so left+right alone would NOT stretch it past its intrinsic bitmap size. */ .h-river{position:absolute;bottom:0;left:0;width:100%;height:30%;z-index:6;pointer-events:none} /* The sun's golden path down the river */ .h-reflect{position:absolute;left:var(--sunx);top:70%;height:30%;width:clamp(76px,15vw,160px);transform:translateX(-50%);z-index:7;pointer-events:none;opacity:var(--sunrise);filter:blur(9px);background:linear-gradient(180deg,rgba(255,186,66,calc(.62 - var(--sunset)*.12)) 0%,rgba(255,146,40,.3) 50%,rgba(255,130,30,.08) 82%,transparent 96%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)} /* Horizon haze — the far shore fades into infinity (full-width band + brighter bloom around the sun so no hard horizon line survives) */ .h-haze{position:absolute;left:-6%;right:-6%;top:66%;height:10%;z-index:7;pointer-events:none;opacity:var(--sunrise);filter:blur(16px);background: linear-gradient(180deg,transparent 0%,rgba(255,178,90,.22) 42%,rgba(255,160,70,.18) 58%,transparent 100%), radial-gradient(62% 100% at var(--sunx) 52%,rgba(255,205,120,.46),rgba(255,150,60,.14) 55%,transparent 82%)} /* Petals + diyas + stars canvas — front of scene */ .h-canvas{position:absolute;inset:0;z-index:9;pointer-events:none} /* ── The Vrati — right side, waist-deep, facing the sun. Full-body cutout: --ladyh sizes her, and bottom is derived so the waterline always crosses her at 60% of the image (hip) at every breakpoint — the mask below and js/index.js's hand-poured water stream both rely on that constant. NO entrance animation and no per-frame filter on the masked img: both made Chrome intermittently stop painting her (scroll during/right after the animation, or var()-filter recalc on the masked element). ── */ /* NO filter and NO entrance animation anywhere in this subtree — any var()-driven filter here made Chrome freeze an empty raster of her on fast scrolls (filter/transform updates are composite-only, so the bad raster never got repainted). Transform-only updates are safe. Dusk dimming of the Vrati is intentionally dropped for paint stability. */ .h-lady{--ladyh:clamp(340px,58svh,660px);position:absolute;right:clamp(-10px,2.5vw,64px);bottom:calc(30svh - var(--ladyh)*.4);z-index:8;pointer-events:none;transform:translateY(calc(var(--sunset)*2.2svh))} .h-lady-glow{position:absolute;left:14%;top:24%;transform:translate(-50%,-50%);width:80%;aspect-ratio:1;border-radius:50%;filter:blur(14px);background:radial-gradient(circle,rgba(255,180,80,.13),rgba(255,140,30,.05) 46%,transparent 70%)} /* No filter here — only the static waterline mask (see .h-lady note). A drop-shadow would also ghost her masked-away legs as a box in the water (filters render before masks), so none is used. */ .h-lady-img{display:block;height:var(--ladyh);width:auto; -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 61%,transparent 68%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 61%,transparent 68%)} /* (no .h-lady-mirror — see the note in index.html: it broke her paint) */ /* An entrance veil was tried here (fade an unmasked overlay to reveal her) and reverted the same day — it showed as a visible rectangular box since it didn't share .h-lady-img's mask, exactly the same class of problem the drop-shadow note above already warned about. Leave this subtree exactly as-is; see the paint-stability note above. */ /* ── Text phases — js/index.js sets opacity/translate from scroll ── */ @keyframes fup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .hp{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;pointer-events:none;opacity:0} .hp-0{opacity:1;align-items:flex-start;justify-content:flex-start;padding:calc(60px + 6svh) 6vw 0} .hp0-text{position:relative;max-width:min(62vw,620px);text-align:left} /* Soft scrim behind the title so text reads over the bright sky */ .hp0-text::before{content:'';position:absolute;inset:-14% -24% -18% -32%;z-index:-1;border-radius:50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(24,8,1,.5),rgba(24,8,1,.24) 55%,transparent 78%)} .h-badge{display:inline-block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#ffdf9e;background:rgba(64,22,4,.5);border:1px solid rgba(255,196,77,.4);border-radius:50px;padding:.34rem 1rem;margin-bottom:1.05rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fup 1s .3s both} .h-hindi{font-family:'Yatra One',serif;font-weight:400;font-size:clamp(1.25rem,4.4vw,2.5rem);color:#fff3dc;text-shadow:0 2px 22px rgba(200,60,0,.55);margin:0 0 .1rem;animation:fup 1s .45s both} .h-eng{font-family:'Playfair Display',serif;font-size:clamp(2.7rem,10vw,6.6rem);font-weight:900;font-style:italic;line-height:.98;background:linear-gradient(180deg,#fff 0%,#ffe9b0 30%,var(--gold2) 60%,#f08300 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 30px rgba(255,130,0,.5));margin-bottom:.55rem;animation:fup 1s .58s both} .h-sub{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,224,150,.9);margin-bottom:.5rem;animation:fup 1s .7s both} .h-sacred{font-family:'Yatra One',serif;font-size:clamp(.9rem,2.6vw,1.15rem);color:var(--gold2);text-shadow:0 0 18px rgba(255,180,40,.55);margin-bottom:.85rem;animation:fup 1s .78s both} .h-dates{font-size:clamp(.78rem,2.4vw,.95rem);font-weight:700;letter-spacing:.14em;color:#fff0d4;text-shadow:0 1px 10px rgba(0,0,0,.5);animation:fup 1s .86s both} .h-scroll-hint{position:absolute;left:50%;bottom:3.6svh;transform:translateX(-50%);color:rgba(255,220,120,.85);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.25rem;animation:fup 1s 1.5s both} .scroll-arrow{animation:sfade 3.5s ease-in-out infinite;font-size:1rem} @keyframes sfade{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.95;transform:translateY(4px)}} /* Shared phase eyebrow */ .hp-ey{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,222,140,.95);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.65);display:flex;align-items:center;gap:.65rem} .hp-ey::before,.hp-ey::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,196,77,.55),transparent)} /* Phase 1 — Event Timings: ONE golden inscription panel riding high in the sky (moved off the water July 4 2026 — it read poorly straddling the bright waterline). Same top-anchored placement as Phase 2 so the two share a consistent "written in the sky" language. Three items in event order: Kharna → Sandhya Arghya → Usha Arghya. */ .hp-1{align-items:center;justify-content:flex-start;padding:calc(60px + 6svh) 1.1rem 0} .arghya-panel{display:flex;align-items:stretch;position:relative;padding:1.5rem 1.8rem;border-radius:28px;background:linear-gradient(160deg,rgba(46,19,6,.74),rgba(24,9,3,.64));backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,196,77,.55);box-shadow:0 18px 60px rgba(8,3,0,.45),inset 0 1px 0 rgba(255,235,180,.16),0 0 44px rgba(255,170,50,.12);animation:apFloat 7s ease-in-out infinite} @keyframes apFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* golden hairline crest + soft glow beneath the panel */ .arghya-panel::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,120,.85),transparent)} .arghya-panel::after{content:'';position:absolute;left:8%;right:8%;bottom:-26px;height:26px;border-radius:50%;filter:blur(12px);background:radial-gradient(50% 100% at 50% 0,rgba(255,170,60,.3),transparent 75%)} .ap-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.3rem;gap:.15rem} .ap-ico{font-size:2rem;filter:drop-shadow(0 3px 10px rgba(255,140,0,.55));margin-bottom:.15rem} .ap-label{font-family:'Yatra One',serif;font-size:1.1rem;color:#ffe098} .ap-sub{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,224,160,.75)} /* DM Sans, not italic Playfair — same legibility reasoning as .hs-num */ .ap-time{font-family:'DM Sans',sans-serif;font-style:normal;font-weight:900;font-size:clamp(1.5rem,4.6vw,2rem);color:var(--gold2);line-height:1.05;text-shadow:0 0 26px rgba(255,196,60,.75),0 2px 6px rgba(40,10,0,.5);margin-top:.35rem;white-space:nowrap} .ap-date{font-size:.76rem;letter-spacing:.05em;color:rgba(255,244,225,.95);margin-top:.3rem;font-weight:600} .ap-div{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,196,77,.55),transparent);position:relative} .ap-div span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.15rem;filter:drop-shadow(0 2px 8px rgba(255,140,0,.6))} /* Phase 2 — sacred numbers written across the sky, one line, clear of the sun (which tops out around mid-frame) */ .hp-2{align-items:center;justify-content:flex-start;padding:calc(60px + 6svh) 1.1rem 0} .hp-anchor{display:flex;flex-direction:column;align-items:center;gap:1.05rem} .h-stats{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:clamp(.9rem,3.5vw,2.4rem)} .hs-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start} /* DM Sans, not the italic Playfair serif — legible for senior citizens reading a number at a glance beats decorative calligraphy (Jul 4 2026) */ .hs-num{font-family:'DM Sans',sans-serif;font-weight:900;font-style:normal;font-size:clamp(1.9rem,6.5vw,3.4rem);line-height:1;color:var(--gold2);text-shadow:0 0 14px rgba(255,196,60,.55),0 0 44px rgba(255,150,20,.4),0 2px 6px rgba(40,10,0,.6)} .hs-lbl{font-size:clamp(.56rem,1.6vw,.7rem);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,240,214,.94);margin-top:.35rem;text-shadow:0 1px 8px rgba(0,0,0,.6);text-align:center;max-width:9em} .hs-line{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,196,77,.6),transparent)} .h-legacy-ft{font-family:'Yatra One',serif;font-size:clamp(.68rem,2vw,.8rem);color:rgba(255,238,205,.92);text-shadow:0 1px 8px rgba(0,0,0,.5)} /* Phase 3 — countdown: one strong line, no boxes. Anchored at the exact same top offset as Phase 1/2 (padding:calc(60px + 6svh) ...) so the countdown sits at the same height as the legacy-stats text instead of drifting to its own position — requested July 2026. */ .hp-3{align-items:center;justify-content:flex-start;padding:calc(60px + 6svh) 1.2rem 0;text-align:center} .h-cd{display:flex;flex-direction:column;align-items:center;gap:.35rem} /* DM Sans, not italic Playfair — same legibility reasoning as .hs-num */ .cd-line{font-family:'DM Sans',sans-serif;font-style:normal;font-weight:900;font-size:clamp(1.9rem,7vw,3.4rem);color:#fff3da;text-shadow:0 2px 24px rgba(200,70,0,.55);line-height:1.1;font-variant-numeric:tabular-nums} .cd-days{color:var(--gold2);font-size:1.22em;text-shadow:0 0 24px rgba(255,196,60,.6)} /* Sentence case, not all-caps (changed July 2026) — the wide .3em tracking was tuned for uppercase; dropped to .05em since it reads as gappy on lowercase text at this size. */ .cd-until{font-size:clamp(.64rem,2.2vw,.8rem);letter-spacing:.05em;color:rgba(255,226,160,.9)} /* tabular-nums keeps digit width steady as seconds tick; the slow ambient pulse is a self-contained loop (not synced to the JS tick) so this stays "one quiet line" rather than flashing on every second update. */ .cd-hms{font-family:'DM Sans',sans-serif;font-weight:600;font-size:clamp(.86rem,2.8vw,1.05rem);letter-spacing:.08em;color:rgba(255,244,222,.95);margin-top:.55rem;text-shadow:0 1px 10px rgba(0,0,0,.5);font-variant-numeric:tabular-nums;animation:cdPulse 3.2s ease-in-out infinite} @keyframes cdPulse{0%,100%{opacity:.95}50%{opacity:.65}} @media(prefers-reduced-motion:reduce){.cd-hms{animation:none}} /* ── River → cream shore: the golden glow becomes the page background ── */ /* 0% is pinned to .h-water's own bottom stop (#131a33) so the two elements' DOM seam is a color-exact match, not just close — a real mobile browser's address-bar collapse can expose a hairline gap at this join that a "close enough" color made look like a visible line. Extra stops between 10-38% widen the navy→brown hue crossing so it reads as a smooth melt instead of a banded joint. */ .h-shore{position:relative;z-index:2;height:clamp(130px,22svh,230px);margin-top:-2px;overflow:hidden;background:linear-gradient(180deg,#131a33 0%,#232c50 10%,#2f2a3c 20%,#3a2a22 30%,var(--temple) 38%,#6b3010 55%,#b06a24 72%,#eab06a 85%,var(--warm) 100%)} .h-shore-glow{position:absolute;left:50%;top:-32%;transform:translateX(-50%);width:130vw;height:90%;filter:blur(18px);background:radial-gradient(50% 100% at 50% 0,rgba(255,196,77,.34),rgba(255,150,40,.1) 55%,transparent 78%)} .h-shore-wave{position:absolute;bottom:-1px;left:0;width:100%} /* ── Reduced motion — a beautiful still tableau, all content visible ── */ @media (prefers-reduced-motion: reduce){ .hero{height:auto;--sunset:.3;--sunrise:1} .h-scene{position:relative;height:auto;min-height:100svh;padding:calc(60px + 4svh) 0 26svh} .h-sun,.h-sun-glow,.h-rays,.h-lady,.scroll-arrow,.h-water::after{animation:none} .hp{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto;padding-top:0;padding-bottom:0;margin:0 0 6svh} .hp-1,.hp-2{padding-bottom:0} .h-scroll-hint{display:none} .hp *{animation:none!important} } /* ══════ DASHBOARD ══════ */ .dashboard{background:linear-gradient(180deg,var(--warm) 0%,#fef0d8 30%,#fdeaca 60%,var(--warm) 100%);padding:3.5rem 1.2rem 4.5rem;position:relative} /* Marigold petals drifting over the section header + CTA cards, fading out below */ .dash-petals{position:absolute;top:0;left:0;width:100%;height:680px;pointer-events:none;opacity:.5;z-index:0; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)} .dash-hd,.tgrid{position:relative;z-index:1} .dashboard::before{content:'';position:absolute;top:0;left:0;right:0;height:250px;background:linear-gradient(180deg,rgba(232,92,0,.05),transparent);pointer-events:none} .dash-hd{text-align:center;margin-bottom:2.8rem;position:relative} .dash-ey{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or);font-weight:700;display:inline-block;margin-bottom:.55rem;background:rgba(232,92,0,.08);padding:.32rem 1rem;border-radius:50px;border:1px solid rgba(232,92,0,.15)} .dash-title{font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(1.55rem,4.2vw,2.3rem);color:var(--ink);line-height:1.15} .dash-sub{font-size:.82rem;color:#6b3a18;margin-top:.45rem;opacity:.8} /* 3-column base (was 4) — Schedule spans the full row, Prasad/Pay/Profile share an even row below it since My Profile joined the grid July 4 2026 (replacing the separate hub section removed the same day) */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;max-width:1200px;margin:0 auto} .tile{border-radius:24px;overflow:hidden;cursor:pointer;text-decoration:none;display:block;color:inherit;position:relative;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s} .tile:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 28px 70px rgba(160,50,0,.22)} .tile:active{transform:translateY(-2px) scale(1.005)} .tile.reveal.in:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 28px 70px rgba(160,50,0,.22)} .tile.reveal.in:active{transform:translateY(-2px) scale(1.005)} .t-sched {grid-column:span 3} .t-prasad {grid-column:span 1} .t-pay {grid-column:span 1} .t-profile{grid-column:span 1} @media(max-width:680px){ .tgrid{grid-template-columns:repeat(2,1fr);gap:.7rem} .t-sched{grid-column:span 2} /* Prasad + Pay sit 2-across; Profile spans full width as the closing CTA */ .t-prasad,.t-pay{grid-column:span 1} .t-profile{grid-column:span 2} } /* ── Global keyframes ── */ @keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,92,0,.4)}50%{box-shadow:0 0 0 10px rgba(232,92,0,0)}} @keyframes borderGlow{0%,100%{border-color:rgba(255,194,0,.25)}50%{border-color:rgba(255,194,0,.6)}} @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes counterUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ── MOBILE HERO — its own placement pass, not scaled-down desktop: lady keeps the right, timings ride the sky (same top anchor as the legacy line), countdown nudges toward open water ── */ @media(max-width:680px){ .hero{--sunx:37%} .hp-0{padding:calc(60px + 4svh) 5vw 0} .hp0-text{max-width:70vw} .h-lady{--ladyh:clamp(260px,46svh,430px);right:-4vw} .hp-1{padding-top:calc(60px + 4svh)} /* Panel stacks Kharna / Sandhya / Usha vertically, dividers rotated to horizontal rules between rows — bigger than the old 2-item strip */ .arghya-panel{flex-direction:column;width:min(84vw,340px);padding:1.1rem 1.3rem 1.25rem;gap:.3rem} .ap-item{padding:.5rem 0} .ap-ico{font-size:1.7rem} .ap-time{font-size:1.6rem} .ap-div{width:auto;height:1px;align-self:stretch;background:linear-gradient(90deg,transparent,rgba(255,196,77,.55),transparent)} .hp-2{padding-top:calc(60px + 4svh)} .hs-lbl{max-width:7em} .hp-3{padding-top:calc(60px + 4svh)} /* Nudge the countdown toward the open water, clear of the Vrati */ .hp-3 .h-cd{transform:translateX(-6vw)} } @media(max-width:360px){ .arghya-panel{padding:.9rem 1rem 1.05rem;width:min(88vw,300px)} .ap-time{font-size:1.4rem} .ap-ico{font-size:1.5rem} .ap-label{font-size:.95rem} .h-badge{font-size:.56rem;letter-spacing:.16em} } /* ══════ PAY TILE ══════ */ .t-pay{background:linear-gradient(135deg,#c94000 0%,#e85c00 38%,#ff8c00 68%,#ffc200 100%);background-size:200% 200%;animation:gradientShift 6s ease-in-out infinite;box-shadow:0 12px 50px rgba(201,64,0,.4);min-height:300px;position:relative;overflow:hidden} .t-pay::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,.07) 10%,transparent 20%);animation:rspin 8s linear infinite;pointer-events:none} .pi{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.9rem 1.6rem;gap:.55rem;height:100%;position:relative;z-index:2} .pi-ey{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:.38rem} .cta-ico{font-size:2.6rem;line-height:1;filter:drop-shadow(0 4px 14px rgba(80,20,0,.35))} .pi-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.35rem,3vw,1.8rem);font-weight:900;font-style:italic;color:#fff;line-height:1.12;text-shadow:0 2px 14px rgba(120,30,0,.35)} .pi-sub{font-size:.78rem;color:rgba(255,255,255,.82);line-height:1.55;max-width:340px} .pi-cta{background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.35),rgba(255,255,255,.2));background-size:200% 100%;animation:shimmer 2.5s ease-in-out infinite;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.55);color:#fff;border-radius:50px;padding:.72rem 2rem;font-family:'DM Sans',sans-serif;font-weight:700;font-style:italic;font-size:.98rem;white-space:nowrap;transition:transform .25s,box-shadow .25s;display:flex;align-items:center;gap:.45rem;box-shadow:0 6px 24px rgba(100,25,0,.2);margin-top:.45rem} .pi-cta:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(100,25,0,.3)} .pi-dl{font-size:.7rem;color:rgba(255,255,255,.88);text-align:center;font-weight:500} .live{position:absolute;top:1rem;right:1.2rem;width:10px;height:10px;background:#fff;border-radius:50%;z-index:3} .live::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:pr 2s ease-out infinite} @keyframes pr{0%{transform:scale(1);opacity:1}100%{transform:scale(2.8);opacity:0}} /* ══════ SCHEDULE TILE — carousel ══════ */ .t-sched{background:linear-gradient(145deg,#fff8f0,#fff5eb);border:none;box-shadow:0 16px 60px rgba(160,50,0,.16);overflow:hidden;position:relative} .sh{background:linear-gradient(135deg,#6b1a00 0%,#c94000 55%,#e85c00 100%);padding:1.15rem 1.6rem;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden} .sh::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none} .sh-ey{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:.2rem} .sh-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.05rem,2.5vw,1.4rem);font-weight:900;color:#fff;display:flex;align-items:center;gap:.45rem;text-shadow:0 2px 12px rgba(80,20,0,.4)} .sh-right{display:flex;align-items:center;gap:.65rem} .sh-ico{font-size:2rem;filter:drop-shadow(0 2px 10px rgba(255,100,0,.5))} .sh-nav{display:flex;gap:.45rem} .sh-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;backdrop-filter:blur(4px)} .sh-btn:hover{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.5)} .sc-wrap{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff8f0,#fff5eb);padding:.8rem 0 0} .sc-track{display:flex;gap:.8rem;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 6% 0;cursor:grab;user-select:none} .sc-track::-webkit-scrollbar{display:none} .sc-track.dragging{cursor:grabbing} /* Carousel: desktop shows 2 cards + peek of 3rd; mobile shows 1 card + peek of next. Redesigned July 2026: date/time/title moved off the photo into .sc-panel below it — a clean, unobstructed photo instead of text-on-image. Width is a single clamp() (not stepped breakpoints) so the card size scales continuously with viewport width instead of jumping at fixed widths — there used to be two separate max-width:680px blocks in this file disagreeing with each other (70% vs 90%), plus an actual gap between 680px and 768px where neither override applied and the base 47% silently kicked back in. clamp() removes both problems at once. */ .sc-card{scroll-snap-align:center;flex-shrink:0;width:clamp(280px,82vw,460px);border-radius:16px;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s,opacity .4s,filter .4s;transform:scale(.84) translateZ(0);box-shadow:0 4px 16px rgba(93,30,0,.15);opacity:.5;filter:saturate(.5) brightness(.88);will-change:transform,opacity,filter} .sc-card.sc-active{transform:scale(1) translateZ(0);box-shadow:0 22px 65px rgba(180,50,0,.28),0 0 0 2.5px rgba(232,92,0,.5);opacity:1;filter:saturate(1) brightness(1)} /* background-position is right-aligned, not center: all 4 source photos (chhath-day1..4-*.webp) compose the Vrati in the right third of a wide landscape frame with empty sky/water on the left. A center crop on this near-square aspect ratio landed the crop window in that empty zone, leaving her almost entirely cropped out. Right-aligning the crop keeps her (and the offering basket she's holding) in frame at every size. */ .sc-photo{position:relative;background-size:cover;background-position:right center;aspect-ratio:4/4} .sc-prog{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.25);z-index:10;overflow:hidden;border-radius:0 0 3px 3px} /* transform:scaleX, not width — width would force a layout recalc every frame for the full 4s duration on every card; scaleX runs on the compositor thread only (GPU), same visual fill, no reflow cost. */ .sc-prog-bar{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ffc200,#e85c00);border-radius:3px;transition:transform .1s linear} .sc-card.sc-active .sc-prog-bar{animation:scProg var(--sc-dur,4s) linear forwards} @keyframes scProg{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Info panel — solid card below the photo, not text-on-photo */ .sc-panel{padding:.7rem .9rem .8rem;text-align:center;background:linear-gradient(145deg,#fff9f0,#fff4e6)} .sc-nm{font-family:'DM Sans',sans-serif;font-size:clamp(.85rem,2vw,1.1rem);font-weight:700;line-height:1.1;color:var(--ink);margin-bottom:.08rem} .sc-hi{font-family:'Yatra One',serif;font-size:clamp(.65rem,1.3vw,.8rem);color:var(--or);margin-bottom:.45rem} .sc-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .6rem} .sc-tm{display:inline-flex;align-items:center;gap:.3rem;font-family:'DM Sans',sans-serif;font-size:clamp(.76rem,1.8vw,.88rem);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--or),#c93800);border-radius:50px;padding:.28rem .8rem;letter-spacing:.01em} .sc-tm.sc-hi-time{background:linear-gradient(135deg,#c94000,#8b2800);box-shadow:0 0 14px rgba(232,92,0,.4)} /* Venue — added July 4 2026 so the schedule cards match the hero's Event Timings panel, which already distinguishes Amphitheater from Banquet Hall (Kharna prasad only) */ .sc-venue{font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;color:var(--lbr)} .sc-dots{display:flex;justify-content:center;align-items:center;gap:.55rem;padding:.9rem 0 .95rem;background:linear-gradient(145deg,#fff8f0,#fff5eb)} .sc-dot{height:6px;border-radius:3px;background:rgba(200,80,0,.2);transition:width .35s cubic-bezier(.34,1.56,.64,1),background .3s;cursor:pointer;width:6px} .sc-dot.sc-active{background:linear-gradient(90deg,#ffc200,#e85c00);width:30px;box-shadow:0 0 10px rgba(255,194,0,.5)} .ta{display:block;text-align:center;padding:.8rem;font-size:.72rem;font-weight:700;color:#c94000;background:linear-gradient(145deg,#fff8f0,#fff5eb);border-top:1px solid rgba(200,80,0,.12);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:all .25s} .ta:hover{background:#ffe8d0;color:#e85c00} @media(max-width:680px){ /* .sc-card width comes from the base clamp() now, not a stepped override — see the base rule's comment. */ .sc-panel{padding:.75rem .9rem .85rem} } /* ══════ CONTRIBUTORS TILE ══════ */ .t-contrib{background:linear-gradient(145deg,#fff,var(--warm));border:1px solid rgba(200,100,0,.12);box-shadow:0 8px 32px rgba(93,30,0,.1);position:relative;overflow:hidden} .t-contrib::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--or),var(--gold),var(--or));background-size:200% 100%;animation:shimmer 3s linear infinite} .ch{background:linear-gradient(135deg,#ff8c00,#e85c00,#c94000);background-size:200% 100%;animation:gradientShift 5s ease-in-out infinite;padding:1.1rem 1.35rem;display:flex;align-items:center;justify-content:space-between} .ch-title{font-family:'DM Sans',sans-serif;font-size:1.02rem;font-weight:800;color:#fff;text-shadow:0 1px 8px rgba(80,20,0,.3)} .ch-badge{background:rgba(255,255,255,.3);color:#fff;border-radius:50px;padding:.2rem .7rem;font-size:.72rem;font-weight:800;backdrop-filter:blur(4px)} .cl{padding:.85rem 1rem} .cr{display:flex;align-items:center;gap:.65rem;padding:.48rem .65rem;border-radius:12px;background:linear-gradient(135deg,var(--warm),#fff);margin-bottom:.4rem;border:1px solid rgba(200,100,0,.07);transition:transform .22s,box-shadow .22s} .cr:hover{transform:translateX(4px);box-shadow:0 4px 14px rgba(160,50,0,.1)} .crk{font-size:.72rem;color:rgba(107,58,24,.65);font-weight:800;width:18px;text-align:center;flex-shrink:0} .crn{flex:1;font-size:.78rem;font-weight:600;color:var(--ink)} .crf{font-size:.66rem;color:var(--lbr)} .cra{font-family:'DM Sans',sans-serif;font-weight:800;font-size:.84rem;color:var(--or)} .crd{width:8px;height:8px;border-radius:50%;background:#4caf50;flex-shrink:0;box-shadow:0 0 8px rgba(76,175,80,.55)} .crl{text-align:center;padding:.95rem;font-size:.8rem;color:var(--lbr)} /* ══════ MY PROFILE TILE ══════ (adaptive: sign-in prompt pre-login, personalized greeting post-login — js/index.js swaps the text/icon. Replaces the old cream "Account Card" hub section, July 4 2026 — now a full peer of Prasad/Pay in the main grid, navy/gold to read as its own thing rather than a fourth fire-toned action tile.) */ .t-profile{background:linear-gradient(135deg,#0d2244 0%,#16305e 50%,#2e5a9e 100%);color:#fff;border:2px solid rgba(255,194,0,.4);box-shadow:0 14px 42px rgba(13,34,68,.4);overflow:hidden;min-height:300px;display:flex;position:relative} .t-profile::before{content:'🙏';position:absolute;right:-.6rem;bottom:-1.6rem;font-size:7rem;opacity:.1;transform:rotate(-8deg)} .t-profile-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;width:100%;padding:1.9rem 1.6rem} .tp-ico{font-size:2.6rem;line-height:1;display:block;animation:float 3s ease-in-out infinite} .tp-ico img{border-radius:50%} .tp-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.2rem,2.8vw,1.5rem);font-weight:900;color:#fff;line-height:1.15} .tp-sub{font-size:.82rem;color:rgba(255,255,255,.82);line-height:1.5} .tp-btn{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,var(--gold),var(--or));color:#2d0800;border-radius:50px;padding:.65rem 1.6rem;font-size:.88rem;font-weight:900;text-decoration:none;box-shadow:0 6px 20px rgba(255,194,0,.35);margin-top:.35rem;transition:transform .25s,box-shadow .25s} .tile:hover .t-profile .tp-btn{transform:translateY(-3px);box-shadow:0 10px 28px rgba(255,194,0,.5)} /* ══════ WA TILE ══════ */ .t-wa{background:linear-gradient(145deg,#054d44,#0a7a6a,#075e54);background-size:200% 200%;animation:gradientShift 5s ease-in-out infinite;box-shadow:0 10px 36px rgba(7,94,84,.4);padding:1.45rem;display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;min-height:182px;position:relative;overflow:hidden} .t-wa::after{content:'';position:absolute;bottom:-20px;right:-20px;width:90px;height:90px;background:radial-gradient(circle,rgba(37,211,102,.22),transparent 60%);pointer-events:none;animation:float 3.5s ease-in-out infinite} .wt-top{display:flex;align-items:flex-start;justify-content:space-between} .wt-ico{font-size:2.5rem;animation:float 3s ease-in-out infinite} .wt-tag{background:rgba(255,255,255,.24);color:#fff;border-radius:7px;font-size:.66rem;padding:.16rem .55rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-weight:700;backdrop-filter:blur(4px)} .wt-title{font-family:'DM Sans',sans-serif;font-size:1.06rem;font-weight:800;color:#fff;margin-bottom:.28rem} .wt-sub{font-size:.76rem;color:rgba(255,255,255,.88);line-height:1.55} .wt-btn{display:inline-flex;align-items:center;gap:.4rem;background:#25d366;color:#fff;border-radius:50px;padding:.58rem 1.25rem;font-size:.78rem;font-weight:700;text-decoration:none;transition:all .25s;width:fit-content;box-shadow:0 5px 18px rgba(37,211,102,.35)} .wt-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.5)} /* ── LIVE STATUS BANNER ── */ .live-banner{display:none;background:linear-gradient(135deg,#c94000,#ff8c00);padding:.85rem 1.2rem;text-align:center;position:relative;z-index:30} /* margin-top clears the fixed glass nav (homepage only) */ .live-banner.active{display:block;margin-top:60px;animation:bannerPulse 3s ease-in-out infinite} @keyframes bannerPulse{0%,100%{opacity:1}50%{opacity:.92}} .lb-text{font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;color:#fff} .lb-sub{font-size:.74rem;color:rgba(255,255,255,.88);margin-top:.22rem} .lb-dot{display:inline-block;width:8px;height:8px;background:#fff;border-radius:50%;margin-right:.4rem;animation:blink 1.5s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} /* ══════ VOLUNTEER TILE ══════ (deep maroon) */ .t-vol{background:linear-gradient(145deg,#2d0e00,#501e00,#401800);border:1px solid rgba(255,194,0,.18);box-shadow:0 8px 30px rgba(93,30,0,.25);position:relative;overflow:hidden} .t-vol::before{content:'';position:absolute;top:-30px;left:-30px;width:100px;height:100px;background:radial-gradient(circle,rgba(255,194,0,.1),transparent 60%);pointer-events:none;animation:float 5s ease-in-out infinite} .t-prasad{background:linear-gradient(125deg,#7a1800 0%,#c94700 48%,#f58a00 100%);color:#fff;padding:1.9rem 1.6rem;border:2px solid rgba(255,224,117,.7);box-shadow:0 14px 42px rgba(201,71,0,.35);overflow:hidden;min-height:300px;display:flex} .t-prasad::before{content:'🙏';position:absolute;right:-.6rem;bottom:-1.6rem;font-size:7rem;opacity:.08;transform:rotate(-8deg)} .t-prasad-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.55rem;width:100%} .cta-ey{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)} .t-prasad-title{font-family:'DM Sans',sans-serif;font-size:clamp(1.35rem,3vw,1.8rem);font-weight:900;color:#fff;line-height:1.12} .t-prasad-sub{font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.9);max-width:340px} @keyframes prasadGlow{0%,100%{box-shadow:0 8px 24px rgba(80,20,0,.25)}50%{box-shadow:0 8px 30px rgba(255,224,117,.55)}} .t-prasad-btn{background:#fff;color:#a93800;border-radius:50px;padding:.72rem 2rem;font-size:.92rem;font-weight:900;box-shadow:0 8px 24px rgba(80,20,0,.25);white-space:nowrap;margin-top:.45rem;transition:transform .25s,box-shadow .25s;animation:prasadGlow 4.5s ease-in-out infinite} .tile:hover .t-prasad-btn{transform:translateY(-3px);box-shadow:0 12px 32px rgba(80,20,0,.35)} /* ── MOBILE COMPACTION (less scrolling) ── */ @media(max-width:680px){ .dashboard{padding:2.2rem .9rem 3rem} .dash-hd{margin-bottom:1.6rem} .dash-sub{display:none} .dash-ey{font-size:.62rem;padding:.26rem .8rem;margin-bottom:.4rem} /* Event box: tighter header, track, dots and link */ .sh{padding:.85rem 1.1rem} .sh-ico{font-size:1.5rem} .sc-wrap{padding:.85rem 0 0} .sc-dots{padding:.6rem 0 .65rem} .ta{padding:.6rem} /* CTA pair: compact vertical cards side by side */ .t-prasad,.t-pay{min-height:200px;padding:0} .t-prasad{padding:1.1rem .8rem} .t-prasad-inner,.pi{gap:.4rem} .pi{padding:1.1rem .8rem} .cta-ico{font-size:1.9rem} .cta-ey,.pi-ey{font-size:.56rem;letter-spacing:.1em} .t-prasad-title,.pi-title{font-size:.98rem} .t-prasad-sub,.pi-sub{display:none} .t-prasad-btn,.pi-cta{padding:.55rem 1.1rem;font-size:.76rem;margin-top:.3rem} .pi-dl{font-size:.6rem} /* My Profile: full-width closing CTA, same compact treatment as its Prasad/Pay siblings above */ .t-profile{min-height:0;padding:0} .t-profile-inner{padding:1.3rem .8rem;gap:.3rem} .tp-ico{font-size:2rem} .tp-title{font-size:1.05rem} .tp-btn{padding:.55rem 1.3rem;font-size:.8rem} } /* ══════ GALLERY TILE ══════ */ .t-gallery{background:linear-gradient(140deg,#fff8f0,#fff0e0);border:1px solid rgba(200,100,0,.14);box-shadow:0 8px 30px rgba(93,30,0,.1);position:relative;overflow:hidden} .t-gallery::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--or),var(--gold),transparent);opacity:.5} /* ══════ FAQ TILE ══════ */ .t-faq-s{background:linear-gradient(140deg,#fff8f0,#fff2e4);border:1px solid rgba(200,100,0,.14);box-shadow:0 8px 28px rgba(93,30,0,.1);padding:1.45rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .t-faq-s::before{content:'❓';position:absolute;top:-8px;right:-8px;font-size:3.5rem;opacity:.06;pointer-events:none} /* Footer styling lives in js/footer-component.js (injected on every page). The legacy element rules here were stacking 2.8–4rem of extra padding on top of the component's own — removed July 3 2026. */ /* ══════════════════════════════════════════════════ DESKTOP ENHANCEMENTS — tablet 768px, desktop 1024px ══════════════════════════════════════════════════ */ /* ── HERO — tablet ── */ @media(min-width:768px){ .hp-0{padding:calc(60px + 9svh) 8vw 0} .hp0-text{max-width:560px} .ap-item{padding:0 2rem} .ap-ico{font-size:2.4rem} .ap-time{font-size:clamp(1.9rem,3.2vw,2.3rem)} .ap-label{font-size:1.1rem} .h-lady{--ladyh:clamp(430px,62svh,700px);right:clamp(20px,5vw,90px)} .h-scroll-hint{font-size:.74rem;letter-spacing:.24em} .dashboard{padding:5rem 2rem 6rem} .dash-hd{margin-bottom:3.5rem} .tgrid{gap:1.4rem} } /* ── HERO — desktop ── */ @media(min-width:1024px){ .hero{--sunx:42%} .hp-0{padding-left:9vw} .hp0-text{max-width:620px} .arghya-panel{padding:1.8rem 2.4rem} .ap-item{padding:0 2.3rem} .ap-ico{font-size:2.8rem} .ap-time{font-size:2.6rem} .ap-label{font-size:1.2rem} .dashboard{padding:6rem 3rem 7.5rem} .tgrid{gap:1.6rem} } /* ── HERO — wide ── */ @media(min-width:1280px){ .arghya-panel{padding:2rem 2.8rem} .ap-item{padding:0 2.6rem} .ap-ico{font-size:3rem} .ap-time{font-size:2.8rem} .dashboard{padding:6.5rem 4rem 8rem} } /* ── SCHEDULE CAROUSEL — desktop ── */ /* .sc-card width comes from the base clamp() at every size now; only the photo's aspect ratio (wider as the card gets more room) and the track's edge padding still step at these breakpoints. */ @media(min-width:768px){ .sc-photo{aspect-ratio:16/10} .sc-track{padding:0 6%} } @media(min-width:1024px){ .sc-photo{aspect-ratio:16/9} .sc-track{padding:0 5%} .sh{padding:1.4rem 2rem} } /* ── PAY TILE — desktop ── */ @media(min-width:768px){ .pi{padding:2.2rem 2.8rem;gap:2rem} .pi-title{font-size:clamp(1.6rem,3.5vw,2.4rem)} .pi-sub{font-size:.88rem} .pi-cta{font-size:1.05rem;padding:.85rem 2.5rem} } /* ── FOOTER — desktop ── */ @media(min-width:768px){ footer{padding:4rem 3rem 3.5rem} .ft-t{font-size:1.2rem;margin-bottom:.6rem} footer p{font-size:.84rem} }