/* ============================================================ Diwali — viral WhatsApp greeting site Mobile-first. Shared by index.php and share.php. ============================================================ */ /* ---------- Design tokens ---------- */ :root { --saffron: #FF9F45; --saffron-soft: #FFCB9A; --crimson: #D64232; --crimson-dk: #99231F; --gold: #E8A020; --gold-soft: #FFD46B; --leaf: #4E9C6B; --cream: #FFF6E9; /* matches the illustration background exactly */ --ink: #4A2314; --ink-soft: #8C6248; --white: #FFFFFF; --wa-green: #25D366; --wa-green-dk: #12A150; --shell: 450px; --radius: 26px; --radius-sm: 18px; --shadow-sm: 0 4px 14px rgba(150, 58, 20, .08); --shadow-md: 0 10px 30px rgba(150, 58, 20, .12); --shadow-lg: 0 16px 40px rgba(150, 58, 20, .18); /* Side marquee sizing */ --mq-w: 44px; --mq-item: 18px; --mq-gap: 40px; --mq-speed: 40s; --mq-opacity: .85; --art-w: 74%; /* on-page size of the hero illustration */ --bar-h: 96px; /* space reserved under the fixed bottom bar */ --safe-b: env(safe-area-inset-bottom, 0px); --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, figure { margin: 0; } img { max-width: 100%; height: auto; display: block; } button, input { font: inherit; color: inherit; } html, body { overflow-x: hidden; } body { font-family: var(--font); color: var(--ink); background: #FFE9CC; /* Warm lamplit gradient, painted behind everything */ background-image: radial-gradient(120% 60% at 50% 0%, #FFF9EE 0%, rgba(255, 249, 238, 0) 60%), radial-gradient(90% 50% at 100% 100%, #FFD5A0 0%, rgba(255, 213, 160, 0) 70%), linear-gradient(180deg, #FFF7E6 0%, #FFE9CC 55%, #FFDCB2 100%); background-attachment: fixed; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---------- App shell: a phone-width column, centred on desktop ---------- */ .shell { position: relative; z-index: 1; width: 100%; max-width: var(--shell); margin-inline: auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 18px 18px 0; } /* Everything above the fixed bar lives here. */ .content { flex: 1 0 auto; padding-bottom: var(--bar-h); } /* share.php's bar holds the single WhatsApp button */ body.page-share { --bar-h: 104px; } /* ---------- Opening curtain ------------------------------------------------ Hidden by default. An inline script in adds .has-curtain to before first paint, so the curtain only ever appears when JS can open it — with scripting off the page renders normally. ---------------------------------------------------------------------------- */ .curtain { display: none; } .has-curtain .curtain { display: block; position: fixed; inset: 0; z-index: 50; cursor: pointer; perspective: 1500px; -webkit-tap-highlight-color: transparent; } /* Lock scrolling only while the curtain is still closed */ .has-curtain:not(.curtain-open) { overflow: hidden; } /* Hold every entrance animation until the card is opened, so the reveal actually plays for the visitor instead of finishing behind the curtain. */ .has-curtain:not(.curtain-open) .confetti span, .has-curtain:not(.curtain-open) .fw-shell, .has-curtain:not(.curtain-open) .fw-shell i, .has-curtain:not(.curtain-open) .title-top > span, .has-curtain:not(.curtain-open) .title-main > span, .has-curtain:not(.curtain-open) .quote p span, .has-curtain:not(.curtain-open) .sender, .has-curtain:not(.curtain-open) .dr-lamp, .has-curtain:not(.curtain-open) .art { animation-play-state: paused; } /* --- The two halves --- */ .curtain-panel { position: absolute; top: 0; bottom: 0; width: 50.4%; /* slight overlap so no hairline seam shows */ background: /* fine damask weave */ repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, rgba(255, 255, 255, 0) 2px 13px), /* fabric folds */ repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 2px, rgba(255, 255, 255, .04) 2px 5px, rgba(0, 0, 0, 0) 5px 30px), linear-gradient(160deg, #E05436 0%, #B92C25 45%, #6E1512 100%); box-shadow: inset 0 0 90px rgba(0, 0, 0, .28); transition: transform 1.05s cubic-bezier(.66, 0, .18, 1); will-change: transform; } /* Gold valance across the top, its lower edge scalloped by a repeating radial mask — one semicircular notch every 24px. */ .curtain-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 52px; background: linear-gradient(180deg, #FFDF9E 0%, #E8A020 55%, #B87615 100%); -webkit-mask: radial-gradient(circle 12px at 12px 100%, transparent 0 12px, #000 12.5px) 0 0 / 24px 100% repeat-x; mask: radial-gradient(circle 12px at 12px 100%, transparent 0 12px, #000 12.5px) 0 0 / 24px 100% repeat-x; } /* Beads hanging from each scallop peak */ .curtain-panel::after { content: ""; position: absolute; top: 50px; left: 0; right: 0; height: 16px; background: radial-gradient(circle 4px at 0 3px, #E8A020 0 4px, transparent 4.5px) 0 0 / 24px 16px repeat-x; } .curtain-left { left: 0; transform-origin: left center; } .curtain-right { right: 0; transform-origin: right center; } /* --- Centre knot: the lamp and the prompt --- */ .curtain-knot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: #FFF3DC; transition: opacity .4s ease, transform .5s ease; } /* Glowing medallion the lamp sits inside */ .curtain-medallion { position: relative; display: grid; place-items: center; padding: 26px; } /* Soft halo behind the lamp — the flame appears to light the drapery */ .curtain-medallion::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 212, 107, .38) 0%, rgba(255, 212, 107, .12) 45%, rgba(255, 212, 107, 0) 70%); animation: knot-halo 2.4s ease-in-out infinite; } .curtain-knot img { position: relative; z-index: 1; width: min(46vw, 190px); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .38)) drop-shadow(0 0 18px rgba(255, 190, 90, .45)); animation: knot-pulse 2.4s ease-in-out infinite; } /* --- Glints scattered over the drapery --- */ .curtain-spark { position: absolute; width: 14px; height: 14px; background: #FFE7B0; /* Four-point star */ clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); opacity: 0; animation: twinkle 3.8s ease-in-out infinite; pointer-events: none; } .cs1 { top: 18%; left: 12%; animation-delay: -0.2s; } .cs2 { top: 30%; right: 16%; animation-delay: -1.4s; width: 10px; height: 10px; } .cs3 { top: 58%; left: 20%; animation-delay: -2.6s; width: 11px; height: 11px; } .cs4 { top: 70%; right: 12%; animation-delay: -0.9s; } .cs5 { top: 84%; left: 34%; animation-delay: -3.1s; width: 9px; height: 9px; } .cs6 { top: 12%; right: 34%; animation-delay: -2.0s; width: 9px; height: 9px; } .curtain-cta { margin-top: 16px; font-family: "Baloo 2", var(--font); font-size: 1.28rem; font-weight: 800; letter-spacing: .01em; color: var(--gold-soft); text-shadow: 0 3px 12px rgba(0, 0, 0, .35); } /* --- Opening --- */ .curtain.is-open .curtain-left { transform: rotateY(-108deg); } .curtain.is-open .curtain-right { transform: rotateY(108deg); } .curtain.is-open .curtain-spark { opacity: 0; transition: opacity .3s ease; } .curtain.is-open .curtain-knot { opacity: 0; transform: scale(1.35); transition-duration: .35s; } .curtain.is-open { pointer-events: none; } @keyframes knot-pulse { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.07) rotate(2deg); } } @keyframes knot-halo { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.12); } } /* Opens instantly, without the swing */ @media (prefers-reduced-motion: reduce) { .curtain-panel, .curtain-knot { transition-duration: .01ms; } .curtain-knot img, .curtain-medallion::before { animation: none; } } /* ---------- Background music toggle ---------- */ .music-toggle { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 40; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); color: var(--crimson-dk); cursor: pointer; transition: transform .12s ease, background .2s ease; animation: pop-in .4s cubic-bezier(.2, .8, .3, 1.1) both; } .music-toggle[hidden] { display: none; } .music-toggle:active { transform: scale(.9); } .music-toggle svg { width: 22px; height: 22px; } /* Playing: show the sound waves, hide the cross */ .music-toggle .mt-slash { display: none; } /* Muted: swap them */ .music-toggle.is-muted .mt-wave { display: none; } .music-toggle.is-muted .mt-slash { display: block; } .music-toggle.is-muted { color: var(--ink-soft); } /* ---------- Fireworks ------------------------------------------------------- The signature Diwali flourish. Each .fw-shell is an anchor point in the sky; its children are the sparks, which fly outward along the angle PHP set in --a. rotate() aims the spark, translateX() throws it, and the separate `translate` property adds gravity — it applies in screen space, so the whole ring droops as it fades no matter which way each spark points. ---------------------------------------------------------------------------- */ .fw { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .fw-shell { position: absolute; width: 0; height: 0; color: var(--gold-soft); /* The flash at the moment of the burst */ animation: fw-flash 7s ease-out infinite; } /* The bright core, visible only for the instant the shell opens */ .fw-shell::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #FFF8E0 0%, currentColor 45%, transparent 72%); opacity: inherit; } .fw-shell i { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px 1px currentColor; opacity: 0; animation: fw-burst 7s cubic-bezier(.12, .7, .3, 1) infinite; /* Sparks and their shell must fire together; `inherit` copies the per-shell delay set on :nth-child below. */ animation-delay: inherit; } /* Launch points, palette and reach — staggered so a burst is always in view */ .fw-shell:nth-child(1) { top: 15%; left: 13%; --r: 62px; color: var(--gold-soft); animation-delay: -0.4s; } .fw-shell:nth-child(2) { top: 9%; left: 78%; --r: 52px; color: var(--saffron); animation-delay: -1.8s; } .fw-shell:nth-child(3) { top: 27%; left: 49%; --r: 72px; color: var(--gold); animation-delay: -3.2s; } .fw-shell:nth-child(4) { top: 44%; left: 9%; --r: 48px; color: var(--crimson); animation-delay: -4.6s; } .fw-shell:nth-child(5) { top: 36%; left: 88%; --r: 58px; color: var(--gold-soft); animation-delay: -6.0s; } @keyframes fw-burst { 0%, 1% { opacity: 0; transform: rotate(var(--a)) translateX(0); translate: 0 0; scale: .3; } 5% { opacity: 1; scale: 1; } 24% { opacity: .85; } 36% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 60px)); translate: 0 16px; scale: .25; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 60px)); translate: 0 16px; scale: .25; } } @keyframes fw-flash { 0%, 2% { opacity: 0; } 4% { opacity: .9; } 12% { opacity: 0; } 100% { opacity: 0; } } /* ---------- Side marquees: small festive images drifting past the content ---- Fixed strips at the left and right edges, behind the content column. The left strip scrolls top -> bottom, the right strip scrolls bottom -> top. Each strip holds its item list twice; translating the track by exactly -50% swaps in the duplicate, so the loop never shows a seam. ---------------------------------------------------------------------------- */ .mq { position: fixed; top: 0; bottom: 0; width: var(--mq-w); z-index: 0; overflow: hidden; pointer-events: none; /* Soften the ends so items fade in and out instead of popping */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); } .mq-left { left: 0; } .mq-right { right: 0; } .mq-track { display: flex; flex-direction: column; align-items: center; animation: mq-scroll var(--mq-speed) linear infinite; will-change: transform; } /* Reversed = the track travels downward, so items fall top -> bottom */ .mq-left .mq-track { animation-direction: reverse; } /* Offset + a different pace keeps the two sides out of lockstep */ .mq-right .mq-track { --mq-speed: 46s; animation-delay: -23s; } .mq img { /* Height is fixed in CSS so the track has its full height before the images load — that keeps the loop maths correct from the first frame. */ height: var(--mq-item); width: auto; flex: none; margin-bottom: var(--mq-gap); opacity: var(--mq-opacity); filter: drop-shadow(0 2px 5px rgba(150, 58, 20, .16)); } /* Gentle size + tilt variation so the strip does not look mechanical */ .mq img:nth-child(3n) { height: calc(var(--mq-item) * .8); transform: rotate(-8deg); } .mq img:nth-child(4n) { height: calc(var(--mq-item) * 1.1); transform: rotate(6deg); } .mq img:nth-child(5n+2) { opacity: calc(var(--mq-opacity) * .7); } @keyframes mq-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* ---------- Confetti: one celebratory burst on load ---------- */ .confetti { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 3; pointer-events: none; } .confetti span { position: absolute; top: -24px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; /* Runs once, then stays gone — no looping distraction */ animation: confetti-fall 2.9s ease-in forwards; } /* Spread the pieces across the width, staggered and in festive colours */ .confetti span:nth-child(6n+1) { left: 6%; background: var(--crimson); } .confetti span:nth-child(6n+2) { left: 20%; background: var(--gold-soft); } .confetti span:nth-child(6n+3) { left: 34%; background: var(--saffron); } .confetti span:nth-child(6n+4) { left: 52%; background: var(--leaf); } .confetti span:nth-child(6n+5) { left: 70%; background: var(--gold); } .confetti span:nth-child(6n) { left: 86%; background: var(--saffron-soft);} .confetti span:nth-child(n+7) { width: 7px; height: 7px; border-radius: 50%; } .confetti span:nth-child(n+13) { width: 11px; height: 6px; } .confetti span:nth-child(2n) { animation-delay: .18s; } .confetti span:nth-child(3n) { animation-delay: .36s; } .confetti span:nth-child(5n) { animation-delay: .52s; } .confetti span:nth-child(7n) { animation-delay: .70s; } .confetti span:nth-child(4n) { animation-duration: 3.4s; } .confetti span:nth-child(5n+1){ animation-duration: 2.5s; } @keyframes confetti-fall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(105vh) rotate(520deg); } } /* ---------- Sparkles around the illustration ---------- */ .sparkle { position: absolute; width: 16px; height: 16px; background: var(--gold-soft); /* Four-point star */ clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); opacity: 0; animation: twinkle 3.6s ease-in-out infinite; pointer-events: none; } .sp1 { top: 6%; left: -2%; animation-delay: 0s; } .sp2 { top: 14%; right: 0%; animation-delay: -1.2s; background: var(--saffron); } .sp3 { top: 62%; left: 2%; animation-delay: -2.4s; background: var(--crimson); width: 12px; height: 12px; } .sp4 { top: 78%; right: 4%; animation-delay: -0.6s; width: 12px; height: 12px; } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(90deg); } } /* ---------- Toran: a marigold-and-mango-leaf garland ---------- */ .toran { position: relative; display: flex; justify-content: space-between; align-items: flex-start; /* Ornaments hang via `translate`, which does NOT affect layout — the centre one sags 22px below this box. The bottom margin clears that drop and then adds the actual breathing room. */ margin: 0 -18px calc(22px + 26px); color: rgba(190, 80, 30, .55); /* the string colour (currentColor) */ } /* The sagging string, drawn as a quadratic curve */ .toran-string { position: absolute; top: 0; left: 0; width: 100%; height: 24px; overflow: visible; pointer-events: none; } /* Each hanger: a thread with an ornament on the end */ .toran .tb { --drop: 0px; position: relative; display: flex; flex-direction: column; align-items: center; /* Independent transform properties: the drop is static, the sway animates only `rotate`, so the curve holds even if the animation never runs. */ translate: 0 var(--drop); transform-origin: top center; animation: toran-sway 4.4s ease-in-out infinite; } /* The thread */ .toran .tb i { width: 2px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, rgba(214, 66, 50, .55), rgba(232, 160, 32, .7)); } .toran .tb img { filter: drop-shadow(0 3px 5px rgba(150, 58, 20, .24)); } /* Per-ornament sizing — each lands around 22px tall */ .tb-marigold img { width: 21px; } .tb-leaf img { width: 22px; } .tb-bell img { width: 15px; } /* Hand-strung variation: threads and blooms are not all identical */ .toran .tb:nth-child(3n) i { height: 18px; } .toran .tb:nth-child(4n) i { height: 8px; } .toran .tb:nth-child(5n) img { scale: .86; } /* --- Drop each ornament onto the curve + stagger its sway --- */ .toran .tb:nth-child(2) { --drop: 2.0px; animation-delay: -0.00s; } .toran .tb:nth-child(3) { --drop: 9.2px; animation-delay: -0.17s; } .toran .tb:nth-child(4) { --drop: 14.8px; animation-delay: -0.34s; } .toran .tb:nth-child(5) { --drop: 18.8px; animation-delay: -0.51s; } .toran .tb:nth-child(6) { --drop: 21.2px; animation-delay: -0.68s; } .toran .tb:nth-child(7) { --drop: 22.0px; animation-delay: -0.85s; } .toran .tb:nth-child(8) { --drop: 21.2px; animation-delay: -1.02s; } .toran .tb:nth-child(9) { --drop: 18.8px; animation-delay: -1.19s; } .toran .tb:nth-child(10) { --drop: 14.8px; animation-delay: -1.36s; } .toran .tb:nth-child(11) { --drop: 9.2px; animation-delay: -1.53s; } .toran .tb:nth-child(12) { --drop: 2.0px; animation-delay: -1.70s; } @keyframes toran-sway { 0%, 100% { rotate: -3.5deg; } 50% { rotate: 3.5deg; } } @keyframes sweep { 0%, 62% { transform: translateX(-120%); } 88%, 100%{ transform: translateX(120%); } } /* ---------- Sender banner (State B: arrived from a shared link) ---------- */ .sender { margin: 0 auto 10px; color: var(--crimson-dk); text-align: center; animation: pop-in .55s cubic-bezier(.2, .8, .3, 1.1) both; } /* Long / unicode names must wrap instead of blowing out the layout */ .sender-name { display: block; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } /* Name and verb each get their own line */ .sender-who, .sender-verb { display: block; } .sender-who { position: relative; display: inline-block; max-width: 100%; padding: 9px 24px; border-radius: 999px; /* Frosted glass, matching the brand pill */ background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); overflow: hidden; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; } /* Light sweeps across the glass, offset from the brand pill's sweep */ .sender-who::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); transform: translateX(-120%); animation: sweep 5.5s ease-in-out infinite; animation-delay: 1.4s; pointer-events: none; } /* The gradient text lives on its own element — background-clip: text cannot share an element with the pill's own background. */ .sender-shine { background: linear-gradient(100deg, var(--crimson-dk) 0%, var(--crimson) 40%, var(--gold) 55%, var(--crimson) 70%, var(--crimson-dk) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: name-shine 6s ease-in-out infinite; } /* "is wishing you" sits plainly below the pill */ .sender-verb { display: block; margin-top: 7px; font-size: .88rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); } /* ---------- Hero ---------- */ .hero { text-align: center; } .title { position: relative; font-family: "Baloo 2", var(--font); margin-bottom: 2px; } /* ---- "Happy" — gold eyebrow, letters cascade in ---- */ .title-top { display: flex; justify-content: center; font-size: clamp(.9rem, 4vw, 1.08rem); font-weight: 700; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--gold); } /* ---- "Diwali" — the headline ---- */ .title-main { display: flex; justify-content: center; /* nowrap is deliberate: every letter is its own flex item, so wrapping would break BETWEEN LETTERS and stack them vertically. The size below is set to fit on one line down to 320px. */ flex-wrap: nowrap; max-width: 100%; font-size: clamp(2.7rem, 15vw, 4.1rem); font-weight: 800; line-height: 1.06; letter-spacing: -.01em; } /* Every letter is its own box so it can move on its own */ .title-top > span, .title-main > span { display: inline-block; /* Entrance, then a slow drifting wave — both staggered off --i */ animation: letter-in .62s cubic-bezier(.2, .9, .32, 1.45) backwards, letter-wave 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 42ms), calc(900ms + var(--i, 0) * 95ms); } .title-main > span { /* Each letter carries the SAME gradient, offset so the sweep reads as one continuous ribbon across the whole word (see :nth-child below). */ background-image: linear-gradient(100deg, var(--crimson-dk) 0%, var(--crimson) 26%, var(--gold) 50%, var(--crimson) 74%, var(--crimson-dk) 100%); background-size: 600% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; /* Sits behind the transparent fill and gives the letters real depth */ text-shadow: 0 2px 0 rgba(150, 58, 20, .16), 0 10px 22px rgba(214, 66, 50, .28); } /* Word spacing, without animating an empty box */ .title-main > span.sp { width: .28em; animation: none; } /* --- Per-letter gradient slice + stagger index --- */ .title-main > span:nth-child(1) { --i: 0; background-position: 0% 50%; } .title-main > span:nth-child(2) { --i: 1; background-position: 20% 50%; } .title-main > span:nth-child(3) { --i: 2; background-position: 40% 50%; } .title-main > span:nth-child(4) { --i: 3; background-position: 60% 50%; } .title-main > span:nth-child(5) { --i: 4; background-position: 80% 50%; } .title-main > span:nth-child(6) { --i: 5; background-position: 100% 50%; } .title-top > span:nth-child(1) { --i: 0; } .title-top > span:nth-child(2) { --i: 1; } .title-top > span:nth-child(3) { --i: 2; } .title-top > span:nth-child(4) { --i: 3; } .title-top > span:nth-child(5) { --i: 4; } /* ---- Rule beneath: gold lines meeting a glowing lamp ---- */ .title-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; } .title-rule i { width: clamp(30px, 12vw, 52px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold-soft)); } .title-rule i:last-of-type { background: linear-gradient(90deg, var(--gold-soft), transparent); } .title-rule em { font-style: normal; font-size: 1.05rem; color: var(--saffron); filter: drop-shadow(0 0 7px rgba(255, 175, 60, .75)); animation: lamp-beat 2.6s ease-in-out infinite; } @keyframes letter-in { from { opacity: 0; transform: translateY(24px) scale(.72) rotate(-6deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } } @keyframes letter-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes name-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* A lamp does not beat like a heart — it breathes */ @keyframes lamp-beat { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 175, 60, .6)); } 45% { transform: scale(1.16); filter: drop-shadow(0 0 14px rgba(255, 195, 80, .95)); } } .subtitle { margin-top: 10px; font-size: .98rem; color: var(--ink-soft); animation: rise .6s .08s ease-out both; } /* Illustration sits directly on the page — the artwork has a transparent background, so only a soft warm glow separates it from the gradient behind. --art-w controls how much of the column the artwork takes up. */ .art { position: relative; width: var(--art-w); margin: 10px auto 2px; background: radial-gradient(58% 48% at 50% 46%, rgba(255, 244, 220, .85) 0%, rgba(255, 226, 175, 0) 70%); animation: rise .7s .12s ease-out both; } .art img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 10px 20px rgba(150, 58, 20, .18)); } /* ---------- A row of lit lamps at the foot of the artwork ------------------ The bowl and its flame are both in the image; the is a warm halo laid over the flame so it reads as actually burning. Each lamp's --i index offsets the flicker, so the row never pulses in unison. ---------------------------------------------------------------------------- */ .diya-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2.5vw, 16px); margin: -4px 0 6px; } .dr-lamp { position: relative; display: block; width: clamp(32px, 10vw, 50px); animation: rise .6s ease-out backwards; animation-delay: calc(300ms + var(--i, 0) * 90ms); } /* The two lamps at the ends sit a little lower, so the row reads as a curve */ .dr-lamp:first-child, .dr-lamp:last-child { margin-bottom: -5px; scale: .9; } .dr-lamp img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 5px 9px rgba(150, 58, 20, .26)); } /* The halo — sits over the top of the bowl, where the painted flame is */ .dr-glow { position: absolute; left: 50%; bottom: 48%; width: 170%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 180, .85) 0%, rgba(255, 185, 70, .40) 32%, rgba(255, 160, 50, 0) 68%); pointer-events: none; animation: lamp-glow 2.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -430ms); } @keyframes lamp-glow { 0%, 100% { opacity: .5; scale: .9; } 38% { opacity: 1; scale: 1.1; } 62% { opacity: .72; scale: .98; } } /* Golden ribbon divider */ .divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--gold); } .divider::before, .divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(232, 160, 32, .55), transparent); } .divider img { width: 46px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 185, 70, .55)); } /* ---------- Diwali verse (ornamented, no solid container) ---------- */ .quote { position: relative; margin: 8px 2px 0; padding: 26px 24px 22px; animation: rise .7s .18s ease-out both; } /* Faint lamp watermark behind the words */ .quote::before { content: ""; position: absolute; left: 50%; top: 52%; width: 190px; height: 107px; transform: translate(-50%, -50%); background: url("../images/lamp.webp") center / contain no-repeat; opacity: .07; pointer-events: none; } /* --- Four open corner brackets --- */ .q-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--gold-soft); pointer-events: none; animation: corner-glow 4.5s ease-in-out infinite; } /* Each corner keeps only the two borders that form its angle */ .q-corner:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; } .q-corner:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; animation-delay: -1.1s; } .q-corner:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; animation-delay: -2.2s; } .q-corner:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; animation-delay: -3.3s; } /* --- Gold rules with a diamond, above and below --- */ .q-rule { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 14px; } .q-rule:last-child { margin: 14px 0 0; } .q-rule i { width: clamp(26px, 10vw, 44px); height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold-soft)); } .q-rule i:last-of-type { background: linear-gradient(90deg, var(--gold-soft), transparent); } .q-rule em { font-style: normal; font-size: .8rem; color: var(--gold); } /* --- The verse itself --- */ .quote p { position: relative; font-size: 1rem; line-height: 1.85; font-weight: 500; color: var(--ink); text-align: center; /* Long words / unicode must never push the layout wide */ overflow-wrap: anywhere; } /* Each verse line gets its own row, but still wraps gracefully on 320px */ .quote p span { display: block; /* Lines arrive one after another, staggered off --i */ animation: line-in .75s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(320ms + var(--i, 0) * 130ms); } .quote p span:nth-child(1) { --i: 0; } .quote p span:nth-child(2) { --i: 1; } .quote p span:nth-child(3) { --i: 2; } .quote p span:nth-child(4) { --i: 3; } .quote p span:nth-child(5) { --i: 4; } /* The closing line is the payoff — larger, gold-shot, on the display face */ .quote p span:last-child { margin-top: 14px; font-family: "Baloo 2", var(--font); font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; background: linear-gradient(100deg, var(--crimson-dk) 0%, var(--crimson) 42%, var(--gold) 58%, var(--crimson) 74%, var(--crimson-dk) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: line-in .75s cubic-bezier(.2, .8, .3, 1) backwards, name-shine 6s ease-in-out infinite; animation-delay: calc(320ms + var(--i, 0) * 130ms), 1.2s; } @keyframes line-in { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes corner-glow { 0%, 100% { border-color: var(--gold-soft); box-shadow: none; } 50% { border-color: var(--gold); box-shadow: 0 0 12px -2px rgba(232, 160, 32, .75); } } /* ---------- Fixed bottom bar (shared by both pages) ---------- Pinned to the viewport so it stays visible while the page scrolls, and constrained to the same width as the phone column. --bar-h reserves the matching space at the end of .content so nothing hides underneath. */ .bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5; width: 100%; max-width: var(--shell); padding: 14px 18px calc(14px + var(--safe-b)); /* No backdrop — the pill/button floats directly over the page */ background: none; /* Smooth the shift when the mobile keyboard opens (see script.js) */ transition: transform .18s ease-out; } /* --- Name entry (index.php) --- */ .name-form { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 8px; background: var(--white); border-radius: 999px; box-shadow: var(--shadow-lg); border: 1px solid rgba(214, 66, 50, .12); } .name-form input { flex: 1 1 auto; min-width: 0; /* lets the input shrink on 320px screens */ height: 48px; padding: 0 8px 0 14px; border: 0; background: transparent; font-size: 1rem; /* >=16px stops iOS zooming on focus */ border-radius: 999px; outline: none; } .name-form input::placeholder { color: #C9AC93; } /* Lift and glow while the visitor is typing */ .name-form:focus-within { border-color: rgba(214, 66, 50, .38); box-shadow: 0 0 0 4px rgba(214, 66, 50, .14), var(--shadow-lg); } .go { flex: none; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--crimson) 0%, var(--saffron) 100%); color: var(--white); font-weight: 800; font-size: .95rem; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 16px rgba(214, 66, 50, .38); transition: transform .12s ease, box-shadow .2s ease; /* Rests for most of the cycle, then does a short double bounce */ animation: go-bounce 3s cubic-bezier(.28, .84, .42, 1) infinite; } /* Dropping the animation lets the press transform take effect */ .go:active { animation: none; transform: scale(.94); box-shadow: 0 3px 10px rgba(214, 66, 50, .3); } /* Light sweeps across the button between bounces */ .go { position: relative; overflow: hidden; } .go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); transform: translateX(-130%); animation: sweep 3s ease-in-out infinite; pointer-events: none; } @keyframes go-bounce { 0%, 58%, 100% { transform: translateY(0) scale(1) rotate(0deg); box-shadow: 0 6px 16px rgba(214, 66, 50, .38); } 65% { transform: translateY(-8px) scale(1.06) rotate(-3deg); box-shadow: 0 14px 26px rgba(214, 66, 50, .5); } 72% { transform: translateY(0) scale(.97) rotate(2deg); } 80% { transform: translateY(-4px) scale(1.03) rotate(-2deg); box-shadow: 0 10px 22px rgba(214, 66, 50, .45); } 88% { transform: translateY(0) scale(1) rotate(0deg); } } /* The arrow nudges forward in time with the bounce */ .go-arrow { display: inline-block; margin-left: 4px; animation: go-arrow 3s cubic-bezier(.28, .84, .42, 1) infinite; } @keyframes go-arrow { 0%, 58%, 100% { transform: translateX(0); } 68% { transform: translateX(5px); } 82% { transform: translateX(3px); } } /* Invalid-input shake */ .name-form.shake { animation: shake .4s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } } /* --- WhatsApp share button (share.php) --- */ .wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; padding: 0 18px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dk) 100%); color: var(--white); font-size: 1.05rem; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgba(18, 161, 80, .4); transition: transform .12s ease, box-shadow .2s ease; /* Glow pulses continuously; the shake rests, then fires periodically. Separate animations so one drives box-shadow and the other transform. */ animation: pulse-wa 2.6s ease-in-out infinite, wa-shake 3.4s ease-in-out infinite; } /* Dropping the animation lets the press transform take effect */ .wa:active { animation: none; transform: scale(.96); } .wa svg { width: 26px; height: 26px; flex: none; } @keyframes pulse-wa { 0%, 100% { box-shadow: 0 8px 22px rgba(18, 161, 80, .40); } 50% { box-shadow: 0 8px 30px rgba(18, 161, 80, .60); } } /* Sits still for most of the cycle, then gives a quick decaying wiggle */ @keyframes wa-shake { 0%, 62%, 100% { transform: translateX(0) rotate(0deg); } 66% { transform: translateX(-7px) rotate(-2.5deg); } 70% { transform: translateX(7px) rotate(2.5deg); } 74% { transform: translateX(-5px) rotate(-1.8deg); } 78% { transform: translateX(5px) rotate(1.8deg); } 82% { transform: translateX(-3px) rotate(-1deg); } 86% { transform: translateX(3px) rotate(1deg); } 90% { transform: translateX(0) rotate(0deg); } } /* ---------- Entrance animations ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ---------- Small phones (320px) ---------- */ @media (max-width: 359px) { :root { --mq-w: 36px; --mq-item: 15px; --mq-gap: 34px; --art-w: 70%; } .shell { padding-inline: 14px; } .mq { margin-inline: -14px; } .bar { padding-inline: 14px; } .go { padding: 0 15px; font-size: .9rem; } .name-form input { padding-left: 11px; } .wa { font-size: .98rem; height: 54px; } } /* ---------- Desktop: keep the phone framing, add a little depth ---------- */ @media (min-width: 620px) { :root { --mq-w: min(12vw, 120px); --mq-item: 23px; --mq-gap: 48px; } .shell { box-shadow: 0 24px 70px rgba(150, 58, 20, .14); background: rgba(255, 255, 255, .28); border-radius: 0; } } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* Purely ambient motion is dropped outright rather than snapped */ .mq-track, .toran .tb { animation: none; } .confetti, .fw, .sparkle { display: none; } /* The halo stays, it just stops breathing */ .dr-glow { animation: none; opacity: .8; } } :focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- The article beneath the verse ---------- Mirrors the shared _core version, mapped onto this page's own token names. */ .post { margin: clamp(30px, 6vw, 48px) 0 0; font-size: .98rem; line-height: 1.72; color: var(--ink-soft); text-align: left; } .post h2 { font-family: "Baloo 2", var(--font); font-weight: 800; font-size: clamp(1.12rem, 4.6vw, 1.32rem); line-height: 1.22; color: var(--crimson-dk); margin: clamp(24px, 5vw, 32px) 0 10px; } .post h2:first-child { margin-top: 0; } .post p { margin-bottom: 12px; } .post strong { color: var(--ink); } .post em { color: var(--ink); font-style: italic; } .post a { color: var(--crimson-dk); text-underline-offset: 2px; } .post .byline { margin: -2px 0 16px; font-size: .82rem; } .post .byline strong { color: var(--ink); } .post .answer { padding: 16px 18px; background: rgba(255, 255, 255, .55); border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; color: var(--ink); } .post .ticks, .post .steps { /* These stylesheets have no global list reset, so the browser's own marker would sit alongside the tick or the numbered circle drawn below. */ list-style: none; padding-left: 0; margin-left: 0; } .post .ticks { display: grid; gap: 10px; margin: 14px 0; } .post .ticks li { position: relative; padding-left: 26px; } .post .ticks li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 11px; height: 6px; border-left: 2.5px solid var(--crimson); border-bottom: 2.5px solid var(--crimson); transform: rotate(-45deg); } .post .steps { counter-reset: s; display: grid; gap: 12px; margin: 14px 0; } .post .steps li { counter-increment: s; position: relative; padding-left: 40px; } .post .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, var(--crimson), var(--saffron)); color: #FFFFFF; font-weight: 800; font-size: .84rem; } .post .cta { margin: 22px 0 6px; } .post .cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--crimson) 0%, var(--saffron) 100%); color: #FFFFFF; font-weight: 800; text-decoration: none; } .post .faq { margin: 14px 0 0; } .post .faq dt { font-family: "Baloo 2", var(--font); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-top: 18px; } .post .faq dd { margin: 5px 0 0; } .post .more { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(150, 58, 20, .16); font-size: .92rem; }