16:I[93868,["/_next/static/immutable/chunks/2corl6wyj4669.js","/_next/static/immutable/chunks/2r9agnxfz0dgn.js","/_next/static/immutable/chunks/3vt9879i9o1qi.js","/_next/static/immutable/chunks/42cd-avugkamk.js"],"TemplatePreview"] 1b:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 17:Teb8d,

An exclusive invitation

{{groom_name}} & {{bride_name}}

Hold to open

Together with our families,
we invite you to celebrate our wedding.

Wedding Ceremony

The Celebration Awaits

Counting Down

—Days

—Hours

—Mins

—Secs

Save the Date Google Calendar & Apple Calendar

The Details

The Occasion

Date

Time

Nikah begins · {{wedding_time}}

Event

Nikah

followed by Lunch

Find Us

The Venue

${{venue_name}} venue exterior$

Venue

{{venue_address}}
Tap the button below for directions.
Doors open from 10:30 AM.

Open in Maps

Your Response

Kindly Respond

Your presence would mean a great deal to us as we celebrate this special occasion together.

We would be delighted to welcome you to our Wedding ceremony.

Will you be joining us?

With pleasure, I'll be there

Looking forward to celebrating with you

Regretfully, I'm unable to attend

Sharing in your joy from afar

How many guests should we look forward to welcoming?

Select the number in your party

Just Me

2 Guests

3 Guests

4 Guests

5+ Guests

Your Name (Optional)

Please select the number of guests to continue

Thank you for letting us know

We look forward to welcoming you on
{{wedding_date}}
at {{venue_name}}.

{{groom_name}} & {{bride_name}}

Thank you for letting us know

You will be in our thoughts and
prayers on this special day.

{{groom_name}} & {{bride_name}}

Programme

The Day Ahead

A Story Written in the Stars

${{groom_name}} and {{bride_name}}$

A Blessed Beginning {{love_story}}

With love & gratitude

جَعَلَ اللهُ مَا بَيْنَكُمَا أُلْفَةً وَخَيْرًا وَبَرَكَةً

"We would be honored by your presence as we begin this beautiful new chapter together."

{{groom_name}} & {{bride_name}}

18:T152c9,/* ================================================================ ROOT — DARK PALETTE ================================================================ */ :root { /* ── Ivory/Cream light palette ── */ --bg: #F5F0E8; --bg-2: #EDE6D8; --bg-3: #E6DDD0; --bg-card: #FAF6F0; --border: rgba(160,130,95,0.18); --border-md: rgba(160,130,95,0.32); --gold: #B8924A; --gold-lt: #D4AE6A; --gold-dim: rgba(184,146,74,0.35); --gold-shine: linear-gradient(135deg, #F0D080 0%, #C8960A 25%, #E8C060 45%, #A06E1A 65%, #D4AE6A 80%, #F0D080 100%); --sage: #7A9B6E; --sage-lt: #A8C49A; --text: #1C1510; --text-2: #3A2D20; --text-3: #5E4A36; --white: #FFFFFF; --env-paper: #EDE3D4; --env-paper-2: #E4D8C5; --wax: #8B4A3C; --wax-lt: #C4705A; --ff-h: 'Cormorant Garamond', serif; --ff-b: 'Inter', sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--ff-b); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Grain */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9998; mix-blend-mode: overlay; } /* ================================================================ PRELOADER ================================================================ */ #preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1s var(--ease), transform 1s var(--ease); } #preloader.exit { opacity: 0; transform: scale(1.015); pointer-events: none; } .pl-glow { position: absolute; border-radius: 50%; pointer-events: none; } .pl-glow-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(180,148,100,0.14) 0%, transparent 65%); top: -120px; right: -120px; animation: glowDrift 14s ease-in-out infinite; } .pl-glow-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(160,128,85,0.12) 0%, transparent 65%); bottom: -100px; left: -80px; animation: glowDrift 18s ease-in-out infinite reverse; } @keyframes glowDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(15px,-20px) scale(1.06); } } .pl-leaf { position: absolute; pointer-events: none; opacity: 0.12; } .pl-inner { position: relative; z-index: 2; text-align: center; padding: 0 1.5rem; } .pl-eyebrow { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C09040; margin-bottom: 2.2rem; opacity: 0; animation: fadeUp 1s var(--ease) 0.4s forwards; } .pl-names { font-family: var(--ff-h); font-size: clamp(2.8rem, 12vw, 5.5rem); font-weight: 300; font-style: italic; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.2rem; opacity: 0; animation: fadeUp 1.3s var(--ease) 0.65s forwards; /* Shiny gold gradient text */ background: linear-gradient(135deg, #6B4E08 0%, #B8840A 14%, #D4A830 26%, #7A5A0A 38%, #A87818 50%, #C89820 62%, #6B4E08 74%, #B8840A 86%, #8A6410 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: fadeUp 1.3s var(--ease) 0.65s forwards, goldShimmer 4s ease-in-out 2s infinite; } .pl-amp { display: block; font-style: normal; font-size: 0.32em; letter-spacing: 0.12em; color: #D4AE6A; margin: 0.08em 0; -webkit-text-fill-color: #D4AE6A; } .pl-rule { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 1.8rem auto 2.8rem; opacity: 0; animation: fadeIn 1s ease 1.1s forwards; } .hold-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; opacity: 0; animation: fadeUp 1s var(--ease) 1.3s forwards; } .hold-btn { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--bg-card); border: 1.5px solid var(--border-md); box-shadow: 0 4px 20px rgba(156,123,78,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform 0.2s ease, box-shadow 0.3s ease; } .hold-btn:hover { transform: scale(1.05); } .hold-btn.pressing { box-shadow: 0 0 0 8px rgba(156,123,78,0.1), 0 0 0 18px rgba(156,123,78,0.05); } .hold-btn svg.fp { width: 34px; height: 34px; opacity: 0.55; transition: opacity 0.3s; } .hold-btn.pressing svg.fp { opacity: 1; } .progress-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); } .progress-ring .track { fill: none; stroke: rgba(156,123,78,0.15); stroke-width: 1.5; } .progress-ring .fill { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 0.05s linear; } .hold-label { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } /* ================================================================ HERO ================================================================ */ #hero { position: relative; height: calc(var(--vh, 1vh) * 100); min-height: 580px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; /* Prevent blur from child GPU layers */ isolation: isolate; transform: translateZ(0); -webkit-transform: translateZ(0); } .hero-bg { position: absolute; inset: 0; /* Warm silk/ivory hero — light luxury */ background: radial-gradient(ellipse at 30% 40%, rgba(255,245,230,0.95) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(220,200,170,0.6) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(180,148,100,0.25) 0%, transparent 40%), radial-gradient(ellipse at 50% 0%, rgba(255,252,245,0.9) 0%, transparent 60%), linear-gradient(160deg, #F8F2E8 0%, #EFE5D2 40%, #E8DAC6 70%, #F0E6D6 100%); transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .hero-bg::before { content: ''; position: absolute; inset: 0; /* Subtle noise texture baked in */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; } .hero-bg::after { content: ''; position: absolute; inset: 0; /* Gold bloom behind names */ background: radial-gradient(ellipse at 50% 55%, rgba(156,123,78,0.07) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(120,90,55,0.12) 0%, transparent 45%); pointer-events: none; } .hero-blob { position: absolute; border-radius: 50%; pointer-events: none; animation: blobDrift ease-in-out infinite; } .hb1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(180,148,100,0.1) 0%, transparent 65%); top: -150px; left: -100px; animation-duration: 22s; } .hb2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(156,123,78,0.09) 0%, transparent 65%); bottom: -100px; right: -80px; animation-duration: 28s; animation-delay: -11s; } @keyframes blobDrift { 0%,100% { transform: translate(0,0); } 33% { transform: translate(18px,-24px); } 66% { transform: translate(-14px,14px); } } .hero-content { position: relative; z-index: 2; padding: 0 min(6vw, 2rem); width: 100%; max-width: 560px; margin: 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .hero-eyebrow { font-size: clamp(0.638rem, 2.42vw, 0.748rem); letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: clamp(0.9rem, 3vh, 1.4rem); opacity: 0; font-weight: 700; background: linear-gradient(135deg, #F0D080 0%, #C8960A 22%, #E8C060 42%, #A06E1A 62%, #D4AE6A 78%, #F0D080 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: goldShimmer 4s ease-in-out infinite; filter: drop-shadow(0 1px 6px rgba(200,150,10,0.35)); } .hero-tagline { font-family: var(--ff-h); font-style: italic; font-weight: 300; font-size: clamp(1.012rem, 3.52vw, 1.21rem); color: #5A4528; line-height: 1.7; max-width: 300px; margin: 0 auto clamp(0.5rem, 2vh, 0.8rem); opacity: 0; letter-spacing: 0.01em; } .hero-cta-wrap { opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: clamp(1rem, 3vh, 1.6rem); } .hero-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.78rem 2rem; border: 1px solid rgba(184,146,74,0.55); border-radius: 100px; background: transparent; font-family: var(--ff-b); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6410; cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease; min-height: 48px; text-decoration: none; } .hero-cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(184,146,74,0.08) 0%, rgba(212,174,106,0.14) 100%); opacity: 0; transition: opacity 0.35s ease; border-radius: inherit; } .hero-cta-btn:hover { border-color: rgba(184,146,74,0.88); color: #6B4E08; box-shadow: 0 4px 20px rgba(184,146,74,0.18), inset 0 0 0 0.5px rgba(184,146,74,0.25); transform: translateY(-1px); } .hero-cta-btn:hover::before { opacity: 1; } .hero-cta-btn:active { transform: scale(0.97); } .hero-cta-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; } .hero-cta-btn:hover svg { transform: translateY(2px); } @media(hover:none) { .hero-cta-btn:hover { transform: none; box-shadow: none; } .hero-cta-btn:active { transform: scale(0.97); border-color: rgba(184,146,74,0.88); } } .hero-swipe-hint { font-size: 0.6rem; letter-spacing: 0.16em; color: rgba(122,98,72,0.55); display: flex; align-items: center; gap: 0.45rem; animation: swipeFloat 3s ease-in-out infinite; } .hero-swipe-hint .swipe-arrow { display: inline-block; animation: swipeBounce 1.6s ease-in-out infinite; font-style: normal; } @keyframes swipeFloat { 0%,100% { opacity: 0.55; } 50% { opacity: 0.9; } } @keyframes swipeBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .hero-names { font-family: var(--ff-h); font-weight: 300; font-style: italic; line-height: 1.0; font-size: inherit; letter-spacing: -0.01em; opacity: 0; background: none; -webkit-text-fill-color: unset; margin: 0; padding: 0; } .hero-amp { display: block; font-style: normal; font-size: 0.33em; letter-spacing: 0.14em; color: #D4AE6A; margin: 0.08em 0; -webkit-text-fill-color: #D4AE6A; } .hero-rule { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: clamp(0.8rem, 2.5vh, 1.2rem) auto; opacity: 0; } .hero-meta { opacity: 0; display: flex; flex-direction: column; gap: clamp(0.25rem, 1vh, 0.4rem); margin-top: clamp(0.4rem, 1.5vh, 0.8rem); align-items: center; } .hero-event { font-size: clamp(0.66rem, 2.2vw, 0.77rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); } .hero-date { font-family: var(--ff-h); font-size: clamp(1.1rem, 3.85vw, 1.32rem); font-weight: 300; font-style: italic; color: #5A4830; letter-spacing: 0.06em; } .hero-venue { font-size: clamp(0.704rem, 2.2vw, 0.792rem); letter-spacing: 0.09em; color: #7A6248; margin-top: 0.1rem; text-align: center; } .scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: 0; animation: fadeIn 1s ease 0.8s forwards; } .scroll-hint span { font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); } .scroll-line { width: 1px; height: 42px; background: linear-gradient(to bottom, var(--gold), transparent); animation: lineBreath 2.4s ease-in-out infinite; } @keyframes lineBreath { 0%,100%{transform:scaleY(0.5);transform-origin:top;opacity:0.3} 60%{transform:scaleY(1);opacity:1} } /* ================================================================ SHARED SECTION ================================================================ */ .section { padding: 4rem 1.25rem; } .sec-label { display: block; text-align: center; font-size: 0.57rem; letter-spacing: 0.26em; text-transform: uppercase; color: #8A6410; margin-bottom: 0.9rem; letter-spacing: 0.28em; } .sec-title { font-family: var(--ff-h); font-size: clamp(1.9rem, 7.5vw, 3.5rem); font-weight: 300; font-style: italic; text-align: center; line-height: 1.12; color: #1C1408; margin-bottom: 2.5rem; text-shadow: 0 1px 0 rgba(255,220,120,0.15); } /* Scroll reveal */ .sr { opacity:0; transform:translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .sr.d1{transition-delay:.1s}.sr.d2{transition-delay:.22s}.sr.d3{transition-delay:.36s} .sr.d4{transition-delay:.5s}.sr.d5{transition-delay:.65s} .sr.in { opacity:1; transform:translateY(0); } /* ================================================================ COUNTDOWN ================================================================ */ #countdown { background: var(--bg-2); } .cd-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; max-width: 460px; margin: 0 auto; } .cd-card { background: rgba(255,252,244,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(156,123,78,0.10); border-radius: 14px; padding: 1.1rem 0.4rem 1rem; text-align: center; position: relative; overflow: hidden; box-shadow: 0 1px 8px rgba(156,123,78,0.08); transition: transform .35s var(--ease), border-color .35s ease; } .cd-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(201,169,110,0.35), transparent); } .cd-card:hover { transform: translateY(-4px); border-color: var(--border-md); } .cd-num { font-family: var(--ff-h); font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 300; color: var(--text); line-height: 1; display: block; } .cd-lbl { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: 0.4rem; display: block; } .cd-date-label { text-align: center; font-family: var(--ff-h); font-size: clamp(1rem, 3.5vw, 1.3rem); font-weight: 400; font-style: italic; letter-spacing: 0.08em; color: #8A6010; margin-top: 1.6rem; background: linear-gradient(135deg, #7A5208 0%, #B8840A 30%, #8A6010 55%, #C8960A 78%, #7A5208 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ================================================================ EVENT DETAILS — Full editorial redesign ================================================================ */ #details { background: var(--bg); } /* ── Outer grid — asymmetric layout ── */ .det-grid { display: grid; gap: 10px; grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; } /* ── Shared card base ── */ .det-card { border-radius: 20px; border: 1px solid rgba(156,123,78,0.16); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 20px rgba(156,123,78,0.07); position: relative; overflow: hidden; transition: border-color .4s ease, box-shadow .4s ease, transform .35s var(--ease); } .det-card:hover { border-color: rgba(201,169,110,0.28); box-shadow: 0 16px 48px rgba(0,0,0,0.5); transform: translateY(-2px); } /* Shared label */ .dc-lbl { font-size: 0.52rem; letter-spacing: 0.24em; text-transform: uppercase; color: #8A6410; display: block; margin-bottom: 0.5rem; } /* ══════════════════════════════════════════════════════ CARD 1 — DATE (hero card, full width) Left: editorial text Right: giant date digits bleed off ══════════════════════════════════════════════════════ */ .dc-date { padding: 2.2rem 1.6rem; min-height: 148px; display: flex; align-items: center; } /* gold left rule */ .dc-date::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 2.5px; border-radius: 2px; background: linear-gradient(to bottom, transparent, #B88820 30%, #B88820 70%, transparent); opacity: 0.7; /* rich gold accent */ content: 'ar(--gold) 70%, transparent); } .dc-date-content { position: relative; z-index: 2; flex: 1; min-width: 0; } .dc-date-day { font-family: var(--ff-h); font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 300; color: var(--text); line-height: 1; letter-spacing: -0.01em; } .dc-date-month { font-family: var(--ff-h); font-size: clamp(1rem, 4vw, 1.35rem); font-weight: 300; font-style: italic; color: var(--gold-lt); margin-top: 0.25rem; line-height: 1; } .dc-date-year { font-size: 0.68rem; letter-spacing: 0.18em; color: var(--text-3); margin-top: 0.5rem; display: block; text-transform: uppercase; } /* Giant date-of-month watermark */ .dc-date-wm { position: absolute; right: -0.08em; top: 50%; transform: translateY(-52%); font-family: var(--ff-h); font-size: clamp(7rem, 28vw, 11rem); font-weight: 300; font-style: italic; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,0.12); pointer-events: none; user-select: none; letter-spacing: -0.04em; } /* Glow behind the date-of-month watermark */ .dc-date-wm::after { content: '11'; position: absolute; inset: 0; color: rgba(201,169,110,0.055); -webkit-text-stroke: 0; filter: blur(18px); } /* ══════════════════════════════════════════════════════ CARDS 2+3 — two column row: TIME | EVENT ══════════════════════════════════════════════════════ */ .det-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── TIME card ── */ .dc-time { padding: 1.8rem 1.4rem 1.6rem; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; } .dc-time-main { font-family: var(--ff-h); font-size: clamp(2.2rem, 8.5vw, 3rem); font-weight: 300; color: var(--text); line-height: 1; letter-spacing: -0.02em; margin-top: 0.3rem; } .dc-time-sub { font-family: var(--ff-h); font-style: italic; font-size: clamp(0.8rem, 3.5vw, 1rem); font-weight: 300; color: var(--text-2); margin-top: auto; padding-top: 1rem; line-height: 1.4; } /* Oversized ceremony-time watermark */ .dc-time-wm { position: absolute; right: -0.1em; bottom: -0.3em; font-family: var(--ff-h); font-size: clamp(3.5rem, 14vw, 5.5rem); font-weight: 300; font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,0.1); pointer-events: none; user-select: none; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; } /* Animated thin gold arc (watch-inspired) */ .dc-time-arc { position: absolute; top: 0.8rem; right: 0.8rem; width: 44px; height: 44px; opacity: 0.35; } .dc-time-arc circle { fill: none; stroke: var(--gold); } .dc-time-arc .arc-sweep { stroke-dasharray: 100; stroke-dashoffset: 30; stroke-linecap: round; animation: arcSpin 8s linear infinite; } @keyframes arcSpin { from { stroke-dashoffset: 30; transform-origin: center; transform: rotate(0deg); } to { stroke-dashoffset: 30; transform-origin: center; transform: rotate(360deg); } } /* ── EVENT card ── */ .dc-event { padding: 1.8rem 1.4rem 1.6rem; min-height: 180px; display: flex; flex-direction: column; } /* Faint 8-pt star watermark */ .dc-event-star { position: absolute; right: -10px; bottom: -10px; width: 90px; height: 90px; opacity: 0.055; pointer-events: none; } .dc-event-title { font-family: var(--ff-h); font-size: clamp(1.5rem, 6.5vw, 2.1rem); font-weight: 300; color: var(--text); line-height: 1.1; letter-spacing: 0.01em; margin-top: 0.25rem; } /* Ceremonial divider */ .dc-event-divider { display: flex; align-items: center; gap: 8px; margin: 0.7rem 0; } .dc-event-divider-line { flex: 1; height: 1px; background: linear-gradient(to right, rgba(201,169,110,0.4), transparent); } .dc-event-divider-diamond { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; opacity: 0.6; } .dc-event-sub { font-family: var(--ff-h); font-size: clamp(0.8rem, 3.5vw, 1rem); font-style: italic; color: var(--text-2); line-height: 1.4; } .dc-event-tag { display: inline-block; margin-top: auto; padding-top: 0.8rem; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,169,110,0.5); } /* ══════════════════════════════════════════════════════ CARD 4 — VENUE (largest, most dramatic) Top: location visualization Bottom: text + CTA ══════════════════════════════════════════════════════ */ /* Coordinate grid */ /* Central glow */ 50% { transform:translate(-50%,-50%) scale(1.15); opacity:1; } } /* Road-style lines */ /* Ripple rings */ .dc-vmap-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(201,169,110,0.35); animation: vmapRing 3s ease-out infinite; } .dc-vmap-ring:nth-child(1) { animation-delay: 0s; } .dc-vmap-ring:nth-child(2) { animation-delay: 1s; } .dc-vmap-ring:nth-child(3) { animation-delay: 2s; } @keyframes vmapRing { 0% { width:12px; height:12px; opacity:.9; } 100% { width:140px; height:140px; opacity:0; } } /* Pin */ 50% { transform:translate(-50%,-78%) translateY(-5px); } } 50% {transform:translateX(-50%) scaleX(.7);opacity:.3} } /* Venue labels on map */ /* Gradient fade at bottom of map */ /* ── Maps CTA button ── */ .dc-maps-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Mobile overrides ── */ @media(max-width: 400px) { .det-row-2 { grid-template-columns: 1fr; } .dc-time, .dc-event { min-height: 140px; } .dc-date-wm { font-size: clamp(5.5rem, 28vw, 8rem); } } @media(hover:none) { .det-card:hover { transform: none !important; box-shadow: none !important; } } /* ================================================================ VENUE ================================================================ */ #venue { background: var(--bg-2); } .venue-card { max-width: 100%; margin: 0 auto; background: rgba(255,255,255,0.75); border: 1px solid rgba(156,123,78,0.18); border-radius: 24px; overflow: hidden; box-shadow: 0 8px 48px rgba(0,0,0,0.4); transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; } .venue-card:hover { transform: translateY(-6px); box-shadow: 0 24px 72px rgba(0,0,0,0.55); border-color: var(--border-md); } .map-wrap { position: relative; height: 240px; overflow: hidden; } .map-wrap iframe { width:100%; height:100%; border:none; display:block; } .map-fade { position: absolute; bottom:0; left:0; right:0; height:48px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.75)); pointer-events: none; } .venue-body { padding: 1.6rem 1.5rem 1.9rem; } .venue-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-lt); background: rgba(122,155,110,0.1); border-radius: 100px; padding: 0.28rem 0.75rem; margin-bottom: 0.75rem; } .venue-tag svg { width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .venue-name { font-family: var(--ff-h); font-size: 1.45rem; font-weight: 400; color: var(--text); margin-bottom: 0.4rem; } .venue-addr { font-size: 0.78rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.4rem; } .maps-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--bg); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.9rem 1.75rem; border-radius: 100px; min-height: 48px; transition: background .25s ease, transform .2s ease, box-shadow .3s ease; -webkit-tap-highlight-color: transparent; } .maps-btn:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201,169,110,0.3); } .maps-btn:active { transform: scale(0.97); } .maps-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ================================================================ TIMELINE ================================================================ */ #timeline { background: var(--bg); } .tl-list { max-width: 400px; margin: 0 auto; position: relative; padding-left: 0; } .tl-list::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--border-md) 12%, var(--border-md) 88%, transparent); } .tl-item { display: flex; gap: 1rem; padding-bottom: 2rem; align-items: flex-start; } .tl-item:last-child { padding-bottom: 0; } .tl-dot { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-md); box-shadow: 0 2px 12px rgba(156,123,78,0.08); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: border-color .4s ease, background .4s ease, box-shadow .4s ease; padding: 8px; } .tl-dot svg { width: 26px; height: 26px; flex-shrink: 0; } .tl-item:hover .tl-dot { border-color: var(--gold); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-2) 100%); box-shadow: 0 4px 18px rgba(156,123,78,0.2); } .tl-item:hover .tl-dot svg { stroke: #8A6410; } .tl-item:hover .tl-dot { background: var(--bg-2); border-color: var(--gold); } .tl-dot svg { width:15px; height:15px; stroke: var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .tl-body { padding-top: 0.4rem; } .tl-time { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8A6410; margin-bottom: 0.25rem; font-weight: 500; } .tl-title { font-family: var(--ff-h); font-size: clamp(1.35rem, 5vw, 1.65rem); font-weight: 400; color: var(--text); line-height: 1.2; letter-spacing: 0.01em; } .tl-desc { font-size: 0.76rem; color: var(--text-2); margin-top: 0.25rem; line-height: 1.6; } /* ================================================================ CLOSING ================================================================ */ #closing { background: var(--bg); text-align: center; padding: 4.5rem 1.25rem 5.5rem; position: relative; overflow: hidden; } #closing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 80%, rgba(156,123,78,0.08) 0%, transparent 55%); pointer-events: none; } .cl-tag { font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: #8A6410; margin-bottom: 2rem; display: block; } .cl-quote { font-family: var(--ff-h); font-size: clamp(1.2rem, 4.5vw, 1.7rem); font-weight: 300; font-style: italic; color: #3A2D20; line-height: 1.85; max-width: 380px; margin: 0 auto 3rem; } .cl-rule { width: 34px; height: 1px; background: var(--gold); margin: 0 auto 2.5rem; opacity: 0.5; } .cl-names { font-family: var(--ff-h); font-size: clamp(1.9rem, 7.5vw, 2.8rem); font-weight: 300; font-style: italic; line-height: 1.15; background: linear-gradient(135deg, #6B4E08 0%, #B8840A 14%, #D4A830 26%, #7A5A0A 38%, #A87818 50%, #C89820 62%, #6B4E08 74%, #B8840A 86%, #8A6410 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: goldShimmer 5s ease-in-out infinite; } .cl-names em { font-style: normal; display: block; font-size: 0.44em; color: var(--gold); letter-spacing: 0.1em; margin: 0.3em 0; } .cl-date { font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3); margin-top: 1.8rem; display: block; } /* ================================================================ KEYFRAMES ================================================================ */ @keyframes goldShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } /* ================================================================ DESKTOP ================================================================ */ @media(min-width:768px){ .section { padding:6rem 2rem; } .map-wrap { height:340px; } } @media(hover:none){ .det-card:hover { transform:none; box-shadow:none; } .det-card:hover::after { transform:scaleX(0); } } /* ================================================================ ROYAL ISLAMIC THEME — Geometric & Calligraphic Elements ================================================================ */ :root { --ff-arabic: 'Scheherazade New', serif; --arch-gold: rgba(201,169,110,0.18); } /* ── ISLAMIC GEOMETRIC TILE pattern (SVG inline, used as bg) ── */ .geo-pattern { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.055; } /* ── ARCH ORNAMENT above sections ── */ .arch-ornament { display: block; margin: 0 auto 2.5rem; width: 180px; height: auto; } /* ── BISMILLAH calligraphy line ── */ /* ── ENVELOPE ISLAMIC REBRAND ── */ .env-islamic-border { position: absolute; inset: 6px; pointer-events: none; z-index: 6; border: 1px solid rgba(201,169,110,0.2); border-radius: 2px; } .env-corner-gem { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 7; } /* ── Keyhole arch motif on envelope ── */ .env-arch-top { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); z-index: 7; pointer-events: none; opacity: 0.55; } /* ── Star of Islam (8-pt geometric) subtle bg ── */ .star-bg { position: absolute; pointer-events: none; opacity: 0.06; animation: slowSpin 80s linear infinite; } @keyframes slowSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } /* ── SECTION GEOMETRIC DIVIDER ── */ .geo-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 2.5rem; max-width: 280px; } /* ── LINE DRAW ANIMATION ── */ .geo-divider-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(156,123,78,0.55)); /* Draw from center: start at 0 width, expand to full */ transform-origin: right center; transform: scaleX(0); transition: transform 0s; /* default — overridden when .drawn */ } .geo-divider-line.rev { background: linear-gradient(to left, transparent, rgba(156,123,78,0.55)); transform-origin: left center; transform: scaleX(0); } /* When parent has .drawn class — lines animate out from center */ .geo-divider.drawn .geo-divider-line { transform: scaleX(1); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .geo-divider.drawn .geo-divider-line.rev { transform: scaleX(1); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; } /* Gem pulses in after lines finish */ .geo-divider-gem { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg) scale(0); flex-shrink: 0; transition: transform 0s; box-shadow: 0 0 6px rgba(200,160,60,0.4); } .geo-divider.drawn .geo-divider-gem { transform: rotate(45deg) scale(1); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s; } .geo-divider-sm { width: 4px; height: 4px; border: 1px solid var(--gold); transform: rotate(45deg) scale(0); flex-shrink: 0; transition: transform 0s; opacity: 0.6; } .geo-divider.drawn .geo-divider-sm { transform: rotate(45deg) scale(1); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s; } /* ── PRELOADER Islamic additions ── */ .pl-arch { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 1; opacity: 0.07; } .pl-geo-tl, .pl-geo-tr, .pl-geo-bl, .pl-geo-br { position: absolute; pointer-events: none; z-index: 1; } .pl-geo-tl { top: 0; left: 0; } .pl-geo-tr { top: 0; right: 0; transform: scaleX(-1); } .pl-geo-bl { bottom: 0; left: 0; transform: scaleY(-1); } .pl-geo-br { bottom: 0; right: 0; transform: scale(-1,-1); } /* ── Closing Dua line ── */ .closing-dua { font-family: var(--ff-arabic); font-size: clamp(1.2rem, 4vw, 1.6rem); color: #8A6410; display: block; text-align: center; margin-bottom: 2.5rem; line-height: 1.8; } /* ── Section arch top border ── */ .section-arch-border { width: 100%; text-align: center; margin-bottom: 2rem; display: block; } /* ── Hero Islamic overlay arch ── */ .hero-arch-frame { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; opacity: 0.08; } /* ================================================================ OUR STORY SECTION ================================================================ */ #story { background: var(--bg); padding: 4rem 1.25rem; position: relative; overflow: hidden; text-align: center; } .story-photo-wrap { position: relative; display: inline-block; margin: 0 auto 2.5rem; } /* Ornate gold frame around photo */ .story-photo-frame { position: relative; width: min(306px, 88vw); margin: 0 auto; } .story-photo-frame img { width: 100%; display: block; border-radius: 4px; position: relative; z-index: 2; filter: sepia(0.08) contrast(1.02); } /* Layered decorative border */ .story-photo-frame::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201,169,110,0.35); border-radius: 4px; z-index: 1; } .story-photo-frame::after { content: ''; position: absolute; inset: -18px; border: 1px solid rgba(201,169,110,0.15); border-radius: 4px; z-index: 0; } /* Corner gems on frame */ .frame-corner { position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none; } .frame-corner svg { width: 100%; height: 100%; } .story-caption { font-family: var(--ff-h); font-size: clamp(0.9rem, 3.5vw, 1.15rem); font-weight: 300; font-style: italic; color: var(--text-2); text-shadow: none; margin-top: 2rem; line-height: 1.6; max-width: 300px; margin-left: auto; margin-right: auto; } .story-caption em { font-style: normal; color: var(--gold); display: block; font-size: 0.75em; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; font-family: var(--ff-b); } /* Glow behind photo */ .story-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.07) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* ================================================================ RSVP — PREMIUM SECTION ================================================================ */ #rsvp { background: #2C2218; padding: 4.5rem 1.25rem 5rem; position: relative; overflow: hidden; } /* Gold hairline divider at top */ .rsvp-divider-top { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,169,107,0.0) 10%, rgba(200,169,107,0.6) 35%, rgba(200,169,107,0.9) 50%, rgba(200,169,107,0.6) 65%, rgba(200,169,107,0.0) 90%, transparent 100%); } .rsvp-divider-top::after { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; background: #C8A96B; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } /* Lantern glow orbs */ .rsvp-orb { position: absolute; border-radius: 50%; pointer-events: none; animation: rsvpOrbDrift ease-in-out infinite; } .rsvp-orb-1 { width: 560px; height: 560px; background: radial-gradient(circle, rgba(196,160,106,0.12) 0%, transparent 60%); top: -180px; left: -120px; animation-duration: 18s; } .rsvp-orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(200,169,107,0.05) 0%, transparent 60%); bottom: -100px; right: -80px; animation-duration: 22s; animation-delay: -9s; } .rsvp-orb-3 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(200,169,107,0.04) 0%, transparent 60%); top: 45%; left: 55%; animation-duration: 28s; animation-delay: -14s; } @keyframes rsvpOrbDrift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(16px,-20px) scale(1.04); } 66% { transform: translate(-12px,14px) scale(0.97); } } /* Faint geometric tile bg */ .rsvp-geo-tile { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.026; } /* Corner ornaments */ .rsvp-corner { position: absolute; pointer-events: none; z-index: 1; } .rsvp-corner.tl { top: 0; left: 0; } .rsvp-corner.tr { top: 0; right: 0; transform: scaleX(-1); } .rsvp-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); } .rsvp-corner.br { bottom: 0; right: 0; transform: scale(-1,-1); } /* Star particles */ #rsvp-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .r-star { position: absolute; border-radius: 50%; background: #F5F2EB; animation: rsvpStarBlink ease-in-out infinite; } @keyframes rsvpStarBlink { 0%,100% { opacity: 0.06; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.5); } } /* Inner wrapper */ .rsvp-inner { position: relative; z-index: 2; max-width: 540px; margin: 0 auto; text-align: center; } /* Heading */ .rsvp-eyebrow { display: block; font-size: 0.57rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C8A96B; margin-bottom: 0.9rem; } .rsvp-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 10vw, 4rem); font-weight: 300; font-style: italic; line-height: 1.05; margin-bottom: 1rem; background: linear-gradient(135deg, #C8960A 0%, #E8C440 18%, #F0D060 30%, #9A7010 44%, #C09020 56%, #E0B830 68%, #C8960A 82%, #9A7010 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: goldShimmer 5s ease-in-out infinite; } .rsvp-subtitle { font-size: 0.8rem; font-weight: 300; color: rgba(245,242,235,0.45); line-height: 1.75; max-width: 340px; margin: 0 auto 2rem; } /* ── Steps container ── */ .rsvp-steps-wrap { position: relative; min-height: 280px; } .rsvp-step { transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); } .rsvp-step.rsvp-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; position: absolute; top: 0; left: 0; right: 0; } .rsvp-step.rsvp-visible { opacity: 1; transform: translateY(0); pointer-events: all; position: relative; } /* Question text */ .rsvp-q { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.1rem, 4.2vw, 1.45rem); font-weight: 300; font-style: italic; color: rgba(245,242,235,0.88); line-height: 1.55; margin-bottom: 0.45rem; } .rsvp-q-hint { font-size: 0.7rem; color: rgba(245,242,235,0.35); display: block; margin-bottom: 1.8rem; letter-spacing: 0.06em; } /* ── Attendance cards ── */ .attend-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 0; } .attend-card { /* opacity set by rsvp-card-sr — starts hidden */ background: rgba(255,255,255,0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(200,169,107,0.18); border-radius: 20px; padding: 1.5rem 1.4rem; cursor: pointer; display: flex; align-items: center; gap: 1.1rem; text-align: left; position: relative; overflow: hidden; transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.4s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1); -webkit-tap-highlight-color: transparent; } .attend-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(200,169,107,0.07) 0%, transparent 55%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .attend-card:hover { border-color: rgba(200,169,107,0.65); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(200,169,107,0.22), 0 0 0 1px rgba(200,169,107,0.18); background: rgba(255,255,255,0.07); } .attend-card:hover::before { opacity: 1; } .attend-card.rsvp-selected { border-color: #C8A96B; background: rgba(200,169,107,0.10); box-shadow: 0 0 0 2px rgba(200,169,107,0.38), 0 8px 40px rgba(200,169,107,0.22); } .attend-card.rsvp-selected::before { opacity: 1; } /* Check circle */ .ac-circle { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(200,169,107,0.3); background: rgba(200,169,107,0.05); display: flex; align-items: center; justify-content: center; transition: background 0.35s ease, border-color 0.35s ease; } .attend-card.rsvp-selected .ac-circle { background: #C8A96B; border-color: #C8A96B; } .ac-circle svg { width: 19px; height: 19px; stroke: rgba(200,169,107,0.55); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; } .attend-card.rsvp-selected .ac-circle svg { stroke: #0A0A0A; animation: acPop 0.4s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes acPop { 0% { transform: scale(0) rotate(-15deg); } 65% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } .ac-text { flex: 1; } .ac-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1rem, 3.8vw, 1.25rem); font-weight: 400; color: #F5F2EB; line-height: 1.2; margin-bottom: 0.2rem; transition: color 0.3s; } .attend-card.rsvp-selected .ac-title { color: #E8D5B0; } .ac-sub { font-size: 0.68rem; color: rgba(245,242,235,0.38); line-height: 1.5; } /* Step divider */ .rsvp-step-rule { display: flex; align-items: center; gap: 10px; margin: 2.2rem 0; } .rsvp-step-rule-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(200,169,107,0.22)); } .rsvp-step-rule-line.r { background: linear-gradient(to left, transparent, rgba(200,169,107,0.22)); } .rsvp-step-rule-dot { width: 5px; height: 5px; background: rgba(200,169,107,0.45); border-radius: 50%; } /* ── Guest count pills ── */ .guest-pills { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; justify-content: center; flex-wrap: wrap; margin-bottom: 0; } .guest-pills::-webkit-scrollbar { display: none; } .g-pill { flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(200,169,107,0.22); border-radius: 100px; padding: 0.6rem 1.25rem; font-family: 'Cormorant Garamond', serif; font-size: clamp(0.95rem, 3.5vw, 1.05rem); font-weight: 400; color: rgba(245,242,235,0.65); cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .g-pill:hover { border-color: rgba(200,169,107,0.5); color: #F5F2EB; transform: translateY(-2px); } .g-pill.rsvp-selected { background: linear-gradient(135deg, #C8A96B 0%, #B08040 100%); border-color: transparent; color: #0A0A0A; font-weight: 500; box-shadow: 0 4px 20px rgba(200,169,107,0.28); transform: translateY(-2px); } /* Optional name input */ .rsvp-name-block { margin-top: 1.8rem; text-align: left; } .rsvp-name-lbl { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,169,107,0.65); margin-bottom: 0.55rem; } .rsvp-name-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(200,169,107,0.2); border-radius: 14px; padding: 0.9rem 1.1rem; font-family: 'Inter', sans-serif; font-size: 0.88rem; color: #F5F2EB; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; -webkit-appearance: none; } .rsvp-name-input::placeholder { color: rgba(245,242,235,0.22); } .rsvp-name-input:focus { border-color: rgba(200,169,107,0.5); box-shadow: 0 0 0 3px rgba(200,169,107,0.07); } /* Inline validation */ .rsvp-err { font-size: 0.7rem; color: rgba(220,100,80,0.8); margin-top: 0.8rem; display: none; text-align: center; } .rsvp-err.on { display: block; } /* ── Confirm button ── */ .rsvp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 2.2rem; background: linear-gradient(110deg, #C8A96B 0%, #A87C3A 50%, #C8A96B 100%); background-size: 220% 100%; color: #0A0A0A; border: none; border-radius: 100px; padding: 1.1rem 2rem; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background-position 0.5s ease, transform 0.25s ease, box-shadow 0.35s ease, opacity 0.3s ease; box-shadow: 0 4px 28px rgba(200,169,107,0.22); min-height: 54px; -webkit-tap-highlight-color: transparent; } .rsvp-btn:hover:not(:disabled) { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 10px 40px rgba(200,169,107,0.35); } .rsvp-btn:active:not(:disabled) { transform: scale(0.98); } .rsvp-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none !important; } /* Loading spinner inside button */ .rsvp-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(10,10,10,0.25); border-top-color: #0A0A0A; border-radius: 50%; animation: rsvpSpin 0.7s linear infinite; } @keyframes rsvpSpin { to { transform: rotate(360deg); } } /* ── Result panels ── */ .rsvp-result { display: none; text-align: center; padding: 1.5rem 0; } .rsvp-result.on { display: block; animation: rsvpResultIn 0.9s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes rsvpResultIn { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } } .result-ring { width: 76px; height: 76px; border-radius: 50%; background: rgba(200,169,107,0.08); border: 1px solid rgba(200,169,107,0.28); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; animation: resultRingIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both; } @keyframes resultRingIn { from { transform: scale(0.4); opacity:0; } to { transform: scale(1); opacity:1; } } .result-ring svg { width: 34px; height: 34px; stroke: #C8A96B; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .result-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 6vw, 2.3rem); font-weight: 300; font-style: italic; color: #F5F2EB; margin-bottom: 1.1rem; } .result-body { font-size: 0.82rem; font-weight: 300; color: rgba(245,242,235,0.5); line-height: 1.85; max-width: 310px; margin: 0 auto 1.5rem; } .result-body strong { color: #E8D5B0; font-weight: 400; } .result-names { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; font-weight: 300; color: #C8A96B; } @media(min-width:600px){ .attend-cards { grid-template-columns: 1fr 1fr; } } @media(min-width:768px){ #rsvp { padding: 7rem 2rem; } /* Desktop hero — scale up names and give more breathing room */ #hero { justify-content: center; padding-top: 0; } .hero-content { max-width: 600px; padding: 0 2rem; } .hero-name-single { font-size: clamp(3.2rem, 7vw, 5.8rem); } .hero-couple-amp-large { font-size: clamp(2.6rem, 5.5vw, 4.2rem); } .hero-parent-names { font-size: clamp(0.9rem, 1.8vw, 1.05rem); } .hero-tagline { font-size: clamp(1.1rem, 2.2vw, 1.265rem); max-width: 360px; } .hero-groom-block .hero-name-single { margin-top: 1rem; } .hero-bride-block .hero-name-single { margin-bottom: 1rem; } .hero-couple-divider { margin: 0.7rem 0; } } /* ================================================================ MOBILE-FIRST OVERRIDES — max-width: 480px ================================================================ */ @media(max-width:480px){ /* Tighter section padding on small phones */ .section { padding: 3.5rem 1.1rem; } #rsvp { padding: 3.5rem 1.1rem 4.5rem; } #closing { padding: 4rem 1.1rem 5rem; } #story { padding: 3.5rem 1.1rem; } /* ── HERO — mobile-first responsive tweaks ── */ #hero { justify-content: center; padding-top: 0; padding-bottom: 0; } .hero-content { padding: 0 4vw; } /* Eyebrow + tagline */ .hero-eyebrow { margin-bottom: clamp(0.7rem, 2vh, 1rem); } .hero-tagline { line-height: 1.75; font-size: clamp(0.95rem, 3.2vw, 1.08rem); margin-bottom: 0; } .hero-gold-rule { margin: clamp(0.6rem, 1.8vh, 1rem) auto; width: min(70px, 20vw); } /* Names — zoomed up to fill screen */ .hero-name-single { font-size: clamp(2.6rem, 11.5vw, 4rem); line-height: 1.02; } .hero-couple-amp-large { font-size: clamp(2.2rem, 9vw, 3.2rem); } .hero-parent-names { font-size: clamp(0.85rem, 2.8vw, 1rem); } /* Name spacing rhythm — tighter to keep centred without overflow */ .hero-groom-block .hero-name-single { margin-top: clamp(0.3rem, 1.2vh, 0.6rem); } .hero-couple-divider { margin: clamp(0.1rem, 0.8vh, 0.4rem) 0; } .hero-bride-block .hero-name-single { margin-bottom: clamp(0.3rem, 1.2vh, 0.6rem); } /* Meta */ .hero-meta { margin-top: clamp(0.3rem, 1vh, 0.5rem); } /* Section title smaller on 320px phones */ .sec-title { font-size: clamp(1.7rem, 8vw, 2.4rem); margin-bottom: 2rem; } /* Countdown — fit 4 in a row on 320px */ .cd-grid { gap: 6px; } .cd-card { padding: 0.9rem 0.3rem 0.8rem; border-radius: 12px; } .cd-num { font-size: clamp(1.4rem, 7.5vw, 2rem); } .cd-lbl { font-size: 0.5rem; letter-spacing: 0.08em; margin-top: 0.3rem; } /* Details cards — reduce date watermark */ .dc-date-wm { font-size: clamp(4.5rem, 20vw, 7rem); } .dc-event-amp{ font-size: clamp(3.5rem, 16vw, 6rem); } .dc-time-clock{ width: 60px; height: 60px; } .dc-venue-visual { height: 76px; } /* Timeline tighter */ .tl-list::before { left: 16px; } .tl-dot { width: 32px; height: 32px; } .tl-title{ font-size: 1.15rem; } .tl-item { gap: 0.85rem; padding-bottom: 1.75rem; } /* RSVP cards */ .attend-card { padding: 1.2rem 1rem; border-radius: 16px; } .ac-circle { width: 38px; height: 38px; } .rsvp-title { font-size: clamp(2rem, 10vw, 3rem); } .rsvp-subtitle{ font-size: 0.75rem; } .guest-pills { gap: 7px; } .g-pill { padding: 0.55rem 1rem; font-size: 0.9rem; } .rsvp-btn { padding: 1rem 1.5rem; font-size: 0.68rem; min-height: 50px; } /* Venue card */ .venue-body { padding: 1.2rem 1.1rem 1.5rem; } .venue-name { font-size: 1.15rem; } .maps-btn { padding: 0.85rem 1.4rem; font-size: 0.64rem; } /* Story photo */ .story-photo-frame { width: min(230px, 72vw); } .story-caption { font-size: 0.9rem; } /* Closing */ .cl-names { font-size: clamp(1.6rem, 7.5vw, 2.2rem); } .cl-quote { font-size: clamp(1.1rem, 4.5vw, 1.5rem); } /* RSVP corner ornaments smaller on tiny screens */ .rsvp-corner.tl, .rsvp-corner.tr { width: 100px !important; height: 100px !important; } .rsvp-corner.bl, .rsvp-corner.br { width: 85px !important; height: 85px !important; } /* Preloader */ .pl-names { font-size: clamp(2.4rem, 12vw, 4rem); } .pl-rule { margin: 1.2rem auto 2rem; } /* Geo divider */ .geo-divider { margin-bottom: 2rem; } } /* Very small phones 320–360px */ @media(max-width:360px){ .section { padding: 3rem 1rem; } .cd-num { font-size: clamp(1.25rem, 8vw, 1.8rem); } .pl-names{ font-size: 2.4rem; } .hero-name-single { font-size: clamp(1.85rem, 9.5vw, 2.3rem); } .hero-couple-amp-large { font-size: clamp(1.5rem, 7vw, 1.9rem); } .hero-parent-names { font-size: 0.75rem; } } /* Landscape mobile */ @media(max-height:500px) and (orientation:landscape){ #hero { height: auto; min-height: 100svh; padding: 3.5rem 0; } .hero-name-single { font-size: clamp(1.6rem, 4.5vh, 2.8rem); } .hero-couple-amp-large { font-size: clamp(1.4rem, 4vh, 2.2rem); } .scroll-hint { display: none; } .section { padding: 3rem 1.5rem; } } /* ================================================================ IVORY LUXURY THEME — Silk texture & warmth additions ================================================================ */ /* Subtle warm paper texture on body */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)' opacity='.018'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: multiply; } /* Section backgrounds alternate for rhythm */ #countdown { background: var(--bg-2); } #details { background: var(--bg); } #venue { background: var(--bg-2); } #timeline { background: var(--bg); } #story { background: var(--bg-2); } #closing { background: var(--bg); } /* Warm top edge for each alternating section */ .section-warm-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(156,123,78,0.2), transparent); } /* Sec labels — darker for legibility on light */ .sec-label { color: var(--gold); } /* Section titles — rich dark */ .sec-title { color: var(--text); } /* Countdown labels darker */ .cd-lbl { color: var(--text-3); } .cd-num { color: var(--text); } /* Timeline vertical line — warm tone */ .tl-list::before { background: linear-gradient(to bottom, transparent, rgba(156,123,78,0.3) 15%, rgba(156,123,78,0.3) 85%, transparent); } /* Story glow — warm */ .story-glow { background: radial-gradient(circle, rgba(156,123,78,0.08) 0%, transparent 65%); } /* Story photo frame border — warmer */ .story-photo-frame::before { border-color: rgba(156,123,78,0.3); } .story-photo-frame::after { border-color: rgba(156,123,78,0.14); } /* Geo divider gem matches new gold */ .geo-divider-gem { background: #C09040; box-shadow: 0 0 6px rgba(200,160,60,0.4); } .geo-divider-sm { border-color: var(--gold); } /* Closing rule */ .cl-rule { background: var(--gold); opacity: 0.45; } /* Hero rule */ .hero-rule { background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* Thin elegant gold divider lines within hero */ .hero-gold-rule { width: min(100px, 27.5vw); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(184,146,74,0.25) 15%, rgba(184,146,74,0.7) 50%, rgba(184,146,74,0.25) 85%, transparent 100%); margin: 0.65rem auto 0.9rem; display: block; opacity: 0; transform: scaleX(0); transform-origin: center; } .hero-gold-rule.animate-in { transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); opacity: 1; transform: scaleX(1); } /* Hero scroll line */ .scroll-down-line { background: linear-gradient(to bottom, var(--gold), transparent); } /* Section labels */ .rsvp-eyebrow { color: #8A6410 !important; } /* Closing tag */ .cl-tag { color: var(--gold); } .cl-names em { color: var(--gold); } /* Timeline time label */ .tl-time { color: var(--gold); } .tl-dot svg { stroke: var(--gold); } /* DC labels */ .dc-lbl { color: var(--gold); } .dc-date-year { color: var(--text-3); } .dc-date-month { color: var(--gold); } /* Time watermark — very faint on light */ .dc-time-wm { -webkit-text-stroke: 1px rgba(156,123,78,0.1); } /* Event star */ .dc-event-star polygon { fill: rgba(156,123,78,0.55); } /* Venue coord */ /* Date watermark on light bg */ .dc-date-wm { -webkit-text-stroke: 1.5px rgba(156,123,78,0.11); } .dc-date-wm::after { color: rgba(156,123,78,0.055); filter: blur(20px); } /* Venue map grid warmer strokes */ /* Ripples on light map */ .dc-vmap-ring { border-color: rgba(156,123,78,0.3); } /* RSVP section — keep warm dark for contrast */ .rsvp-title { color: #F5F0E8 !important; } .rsvp-subtitle { color: rgba(245,240,232,0.5) !important; } .rsvp-q { color: rgba(245,240,232,0.88) !important; } .rsvp-btn { background: linear-gradient(110deg, #C4A06A 0%, #9C7B4E 50%, #C4A06A 100%) !important; background-size: 220% 100% !important; } /* Result names on RSVP */ .result-names { color: #C4A06A !important; } .result-ring { border-color: rgba(196,160,106,0.3) !important; } .result-ring svg { stroke: #C4A06A !important; } /* RSVP confirm button keep gold */ .rsvp-confirm-btn, #rConfirmBtn { background: linear-gradient(110deg, #C4A06A 0%, #9C7B4E 50%, #C4A06A 100%); background-size: 220% 100%; } /* Hero — multiply blend to merge with bg */ /* ================================================================ SUBTLE LUXURY DETAILS — Premium finishes ================================================================ */ /* ── 1. Paper texture overlay ── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)' opacity='.028'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: multiply; } /* ── 2. Section gold hairline dividers ── */ .section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(156,123,78,0.12) 15%, rgba(196,160,106,0.25) 35%, rgba(196,160,106,0.22) 50%, rgba(196,160,106,0.25) 65%, rgba(156,123,78,0.12) 85%, transparent 100%); position: relative; } .section-divider::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 6px; height: 3px; background: rgba(196,160,106,0.25); border-radius: 50%; } /* ── 3. Embossed floral corner accents — very subtle ── */ .emboss-corner { position: absolute; pointer-events: none; z-index: 1; opacity: 0.04; overflow: hidden; } .ec-tl { top: 0; left: 0; } .ec-tr { top: 0; right: 0; transform: scaleX(-1); } .ec-bl { bottom: 0; left: 0; transform: scaleY(-1); } .ec-br { bottom: 0; right: 0; transform: scale(-1,-1); } .ec-sm { width: min(160px, 35vw); } .ec-md { width: min(200px, 42vw); } .ec-lg { width: min(240px, 50vw); } /* ── 4. Heading gold glow ── */ .heading-glow { position: relative; } .heading-glow::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120%; height: 200%; background: radial-gradient(ellipse at center, rgba(196,160,106,0.045) 0%, transparent 65%); pointer-events: none; z-index: -1; } /* ── 5. FH Monogram watermark on hero ── */ .hero-monogram { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: 0.022; width: min(280px, 65vw); user-select: none; mix-blend-mode: multiply; } /* ── 6. Islamic geometric bg pattern ── */ .geo-bg-pattern { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.018; overflow: hidden; } /* Parallax container */ .parallax-slow { will-change: transform; transition: transform 0.1s linear; } /* RSVP has dark bg */ 6% { opacity: 1; } 25% { transform: translateY(75vh) translateX(12px) rotate(60deg); opacity: 0.6; } 50% { transform: translateY(50vh) translateX(-8px) rotate(140deg); opacity: 0.9; } 75% { transform: translateY(25vh) translateX(16px) rotate(220deg); opacity: 0.8; } 94% { opacity: 0.7; } 100% { transform: translateY(-5vh) translateX(4px) rotate(300deg); opacity: 0; } } /* ================================================================ PREMIUM SCROLL REVEAL SYSTEM Luxury fade-in — opacity + tiny translateY only ================================================================ */ /* Base hidden state */ .sr { opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: transform, opacity; } /* Revealed state */ .sr.in { opacity: 1; transform: translateY(0); } /* Stagger delays */ .sr.d1 { transition-delay: 0.05s; } .sr.d2 { transition-delay: 0.13s; } .sr.d3 { transition-delay: 0.22s; } .sr.d4 { transition-delay: 0.32s; } .sr.d5 { transition-delay: 0.43s; } /* Countdown cards — 80ms stagger */ .cd-sr.cd-s1 { transition-delay: 0.00s; } .cd-sr.cd-s2 { transition-delay: 0.08s; } .cd-sr.cd-s3 { transition-delay: 0.16s; } .cd-sr.cd-s4 { transition-delay: 0.24s; } /* RSVP cards — 100ms stagger */ .rsvp-card-sr.rc-s1 { transition-delay: 0.00s; } .rsvp-card-sr.rc-s2 { transition-delay: 0.10s; } /* Gold ornament reveal — opacity only, no movement */ .ornament-sr { opacity: 0; transition: opacity 0.8s ease-out; } .ornament-sr.in { opacity: 1; } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .sr, .cd-sr, .rsvp-card-sr, .ornament-sr { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================================================================ LUXURY HANDCRAFTED REFINEMENTS Subtle texture, depth, warmth — no layout changes ================================================================ */ /* ── 1. Richer paper texture (3–4% opacity) ── */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23t)' opacity='.032'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: multiply; opacity: 1; } /* ── 2. Countdown cards — warmer, lifted, handmade paper surface ── */ .cd-card { background: linear-gradient(145deg, rgba(255,252,245,0.92) 0%, rgba(250,246,236,0.88) 100%) !important; border: 1px solid rgba(156,123,78,0.22) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(156,123,78,0.08), 0 4px 20px rgba(120,90,45,0.06), inset 0 1px 0 rgba(255,255,255,0.6) !important; } /* ── 3. Detail cards — tactile paper-like surface ── */ .det-card { background: linear-gradient(160deg, rgba(255,253,248,0.95) 0%, rgba(249,244,234,0.9) 100%) !important; border: 1px solid rgba(156,123,78,0.14) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.95), 0 2px 12px rgba(140,105,55,0.07), 0 6px 28px rgba(100,75,30,0.05), inset 0 1px 0 rgba(255,255,255,0.7) !important; } /* ── 4. Venue card — elevated, premium ── */ .venue-card { background: linear-gradient(160deg, rgba(255,253,248,0.97) 0%, rgba(249,244,234,0.95) 100%) !important; border: 1px solid rgba(156,123,78,0.18) !important; box-shadow: 0 2px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(140,105,55,0.10), 0 12px 48px rgba(100,75,30,0.07), inset 0 1px 0 rgba(255,255,255,0.8) !important; } /* ── 5. Preloader — warm vellum surface ── */ #preloader { background: linear-gradient(145deg, #FAF8F2 0%, #F5F0E6 50%, #F8F4EE 100%) !important; } /* ── 6. Story photo frame — deeper warmth ── */ .story-photo-frame { box-shadow: 0 0 0 1px rgba(156,123,78,0.15), 0 0 0 10px rgba(245,240,230,0.9), 0 0 0 11px rgba(156,123,78,0.12), 0 0 0 19px rgba(245,240,230,0.85), 0 0 0 20px rgba(156,123,78,0.08), 0 12px 40px rgba(100,75,30,0.12) !important; } /* ── 7. Timeline dots — warm lifted circles ── */ .tl-dot { background: linear-gradient(145deg, rgba(255,253,248,0.98) 0%, rgba(249,244,234,0.95) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(156,123,78,0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important; } /* ── 8. Preloader hold button — paper texture ── */ .hold-btn { background: linear-gradient(145deg, rgba(255,253,248,0.98) 0%, rgba(249,244,234,0.95) 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 3px 14px rgba(156,123,78,0.1), inset 0 1px 0 rgba(255,255,255,0.7) !important; } /* ── 9. Section backgrounds — alternating warm ivory ── */ #countdown { background: linear-gradient(180deg, #F0EAE0 0%, #EDE6D8 100%) !important; } #details { background: linear-gradient(180deg, #F5F0E8 0%, #F2EBE0 100%) !important; } #venue { background: linear-gradient(180deg, #EDE6D8 0%, #EAE2D4 100%) !important; } #timeline { background: linear-gradient(180deg, #F5F0E8 0%, #F0EAE0 100%) !important; } #story { background: linear-gradient(180deg, #EDE6D8 0%, #EAE2D4 100%) !important; } #closing { background: linear-gradient(180deg, #F5F0E8 0%, #F0EAE0 100%) !important; } /* ── 10. TINY botanical corner accents ── */ /* SVG data URIs as CSS backgrounds — corner positioning */ .section { position: relative; } /* Corner leaf accents using CSS pseudo-elements — very subtle */ #countdown::before, #timeline::before, #closing::before { content: ''; position: absolute; top: 0; right: 0; width: 72px; height: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M68 4 C56 8 44 16 38 26 C32 36 34 48 40 56 C46 64 56 68 68 68' stroke='%239C7B4E' stroke-width='0.7' opacity='0.25' stroke-linecap='round'/%3E%3Cpath d='M68 4 C60 6 50 14 48 22 C46 30 50 36 56 38' stroke='%239C7B4E' stroke-width='0.5' opacity='0.18' stroke-linecap='round'/%3E%3Cellipse cx='52' cy='32' rx='8' ry='5' transform='rotate(-30 52 32)' stroke='%239C7B4E' stroke-width='0.5' fill='rgba(156%2C123%2C78%2C0.04)' opacity='0.22'/%3E%3Cellipse cx='44' cy='50' rx='7' ry='4' transform='rotate(-50 44 50)' stroke='%239C7B4E' stroke-width='0.5' fill='rgba(156%2C123%2C78%2C0.04)' opacity='0.2'/%3E%3Ccircle cx='60' cy='20' r='1.5' fill='%239C7B4E' opacity='0.2'/%3E%3Ccircle cx='42' cy='42' r='1.2' fill='%239C7B4E' opacity='0.18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 1; } #countdown::after, #timeline::after, #closing::after { content: ''; position: absolute; bottom: 0; left: 0; width: 72px; height: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M4 68 C8 56 16 44 26 38 C36 32 48 34 56 40 C64 46 68 56 68 68' stroke='%239C7B4E' stroke-width='0.7' opacity='0.25' stroke-linecap='round'/%3E%3Cpath d='M4 68 C6 60 14 50 22 48 C30 46 36 50 38 56' stroke='%239C7B4E' stroke-width='0.5' opacity='0.18' stroke-linecap='round'/%3E%3Cellipse cx='20' cy='40' rx='8' ry='5' transform='rotate(30 20 40)' stroke='%239C7B4E' stroke-width='0.5' fill='rgba(156%2C123%2C78%2C0.04)' opacity='0.22'/%3E%3Ccircle cx='12' cy='52' r='1.5' fill='%239C7B4E' opacity='0.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 1; } /* ── 11. Closing section — rich warm vellum ── */ .cl-quote { text-shadow: 0 1px 2px rgba(245,240,232,0.8) !important; } /* ── 12. Gold rule in preloader — warmer ── */ .pl-rule { background: linear-gradient(90deg, transparent, rgba(180,140,60,0.6) 30%, rgba(200,160,80,0.8) 50%, rgba(180,140,60,0.6) 70%, transparent) !important; height: 1px; } /* ── 13. Section headings — subtle warm text shadow ── */ .sec-title { text-shadow: 0 1px 3px rgba(245,240,232,0.6) !important; } /* ── 14. Venue body background ── */ .venue-body { background: linear-gradient(180deg, rgba(255,252,245,0.5) 0%, rgba(249,244,234,0.3) 100%) !important; } /* ── 15. Story section photo caption ── */ .story-caption { text-shadow: 0 1px 2px rgba(245,240,232,0.7); } /* ── Override body::after grain — remove duplicate (already have body::before) ── */ /* Keep this one richer, remove the simpler one */ /* ================================================================ READABILITY REFINEMENTS — secondary text only Contrast +10–15%, slight weight increase where needed Major headings / couple names untouched ================================================================ */ /* ── Countdown labels ── */ .cd-lbl { font-size: 0.58rem !important; letter-spacing: 0.14em !important; color: #6B5040 !important; font-weight: 500 !important; margin-top: 0.45rem; } /* ── Countdown numbers — slightly warmer ── */ .cd-num { color: #2C2010 !important; } /* ── Detail card sub text ── */ .dc-sub { color: #4E3D2C !important; font-size: 0.75rem !important; } .dc-date-year { color: #6B5040 !important; font-weight: 500 !important; } .dc-time-sub { color: #4E3D2C !important; } .dc-event-sub { color: #4A3828 !important; } .dc-event-tag { color: #7A6248 !important; font-size: 0.58rem !important; font-weight: 500 !important; } /* ── Venue card text ── */ .venue-addr { color: #4E3D2C !important; font-size: 0.8rem !important; font-weight: 400 !important; line-height: 1.65 !important; } .venue-tag { color: #6B5040 !important; font-weight: 500 !important; } .dc-venue-sub { color: #4E3D2C !important; } /* ── Timeline descriptions ── */ .tl-desc { font-size: 0.8rem !important; color: #4E3D2C !important; font-weight: 400 !important; line-height: 1.65 !important; } .tl-time { color: #7A5A0A !important; font-weight: 600 !important; } /* ── Hero secondary text ── */ .hero-venue { color: #5A4530 !important; } .hero-date { color: #3C2E1E !important; } .hero-event { color: #5A4530 !important; } /* ── RSVP section (on dark bg) ── */ .rsvp-subtitle { color: rgba(245,242,235,0.65) !important; font-size: 0.82rem !important; font-weight: 400 !important; } .rsvp-q-hint { color: rgba(245,242,235,0.55) !important; font-size: 0.72rem !important; font-weight: 400 !important; } .ac-sub { color: rgba(245,242,235,0.6) !important; font-size: 0.7rem !important; font-weight: 400 !important; } .rsvp-q { color: rgba(245,242,235,0.92) !important; } .rsvp-name-lbl { color: rgba(200,169,107,0.9) !important; } .g-pill { color: rgba(245,242,235,0.8) !important; } .result-body { color: rgba(245,242,235,0.72) !important; font-size: 0.84rem !important; font-weight: 400 !important; } /* ── Story caption ── */ .story-caption { color: #4A3828 !important; font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important; } /* ── Closing section ── */ .cl-quote { color: #3C2E1E !important; } .closing-dua { color: #7A5A0A !important; } /* ── Preloader supporting text ── */ .pl-eyebrow { color: #8A6410 !important; } .hold-label { color: #5A4530 !important; font-size: 0.62rem !important; font-weight: 500 !important; } /* ── det-sub (event detail card subtitle) ── */ .det-sub { font-size: 0.75rem !important; color: #4E3D2C !important; font-weight: 400 !important; line-height: 1.6 !important; } /* ── Section eyebrow labels ── */ .sec-label { color: #7A5A0A !important; } /* ── Geo divider ── */ .geo-divider-line { background: linear-gradient(to right, transparent, rgba(122,90,10,0.45)) !important; } .geo-divider-line.rev { background: linear-gradient(to left, transparent, rgba(122,90,10,0.45)) !important; } /* ── Small Islamic corner text ── */ .closing-dua { font-size: clamp(1.1rem, 3.8vw, 1.5rem) !important; } /* ── Date card components ── */ .dc-date-month { color: #8A6410 !important; } .dc-date-day { color: #2C2010 !important; } /* ── Time card ── */ .dc-time-main { color: #2C2010 !important; } /* ── Event card ── */ .dc-event-title { color: #2C2010 !important; } .dc-event-divider-line { background: linear-gradient(to right, rgba(201,169,110,0.4), transparent) !important; } /* ── Venue name in detail ── */ .dc-venue-name { color: #2C2010 !important; } /* ── RSVP confirm button ── */ .rsvp-btn { font-size: 0.74rem !important; font-weight: 600 !important; letter-spacing: 0.16em !important; } /* Mobile boost — extra readability on small screens */ @media(max-width: 480px) { .tl-desc { font-size: 0.82rem !important; } .venue-addr { font-size: 0.82rem !important; } .det-sub { font-size: 0.77rem !important; } .rsvp-subtitle { font-size: 0.84rem !important; } .cd-lbl { font-size: 0.6rem !important; } } /* ================================================================ ADD TO CALENDAR SECTION ================================================================ */ #cal-section { background: linear-gradient(180deg, #F5F0E8 0%, #F2EBE0 100%); padding: 1.6rem 1.5rem; text-align: center; position: relative; } .cal-card { max-width: 380px; margin: 0 auto; background: linear-gradient(145deg, rgba(255,253,248,0.97) 0%, rgba(249,244,234,0.95) 100%); border: 1px solid rgba(156,123,78,0.22); border-radius: 20px; padding: 1.15rem 1.5rem 1.25rem; box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(140,105,55,0.08), inset 0 1px 0 rgba(255,255,255,0.7); } .cal-eyebrow { font-size: 0.57rem; letter-spacing: 0.28em; text-transform: uppercase; color: #7A5A0A; display: block; margin-bottom: 0.9rem; font-family: var(--ff-b); } .cal-date-display { font-family: var(--ff-h); font-size: clamp(1.1rem, 4vw, 1.35rem); font-weight: 300; color: #2C2010; margin-bottom: 1.6rem; line-height: 1.4; } .cal-date-display span { display: block; font-size: 0.7rem; font-family: var(--ff-b); letter-spacing: 0.12em; color: #7A6248; margin-top: 0.2rem; font-style: normal; } /* Main trigger button */ .cal-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; /* Softer, more muted gold — refined not loud */ background: linear-gradient(135deg, #B88820 0%, #967015 50%, #B88820 100%); background-size: 200% 100%; color: #FAF8F2; border: none; border-radius: 100px; /* 12% less vertical padding for compactness */ padding: 0.85rem 1.4rem; font-family: var(--ff-b); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; min-height: 46px; transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease; /* Softer shadow — less aggressive */ box-shadow: 0 2px 14px rgba(140,100,18,0.18); -webkit-tap-highlight-color: transparent; } .cal-btn:hover { background-position: 100% 0; box-shadow: 0 4px 20px rgba(140,100,18,0.26); transform: translateY(-1px); } .cal-btn:active { transform: scale(0.98); } .cal-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── Modal ── */ .cal-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(44,32,16,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 0 0 env(safe-area-inset-bottom, 0); } .cal-modal-overlay.open { opacity: 1; pointer-events: all; } .cal-modal { background: linear-gradient(160deg, #FAF8F2 0%, #F5F0E6 100%); border-radius: 24px 24px 0 0; padding: 1rem 1.5rem 2.5rem; width: 100%; max-width: 480px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 -8px 48px rgba(80,55,15,0.18); border-top: 1px solid rgba(156,123,78,0.2); } .cal-modal-overlay.open .cal-modal { transform: translateY(0); } /* Drag handle */ .cal-modal-handle { width: 36px; height: 4px; background: rgba(156,123,78,0.25); border-radius: 2px; margin: 0 auto 1.4rem; } .cal-modal-title { font-family: var(--ff-h); font-size: 1.15rem; font-weight: 300; font-style: italic; color: #2C2010; text-align: center; margin-bottom: 0.3rem; } .cal-modal-sub { font-size: 0.68rem; letter-spacing: 0.1em; color: #7A6248; text-align: center; margin-bottom: 1.6rem; } /* Individual calendar option buttons */ .cal-option { display: flex; align-items: center; gap: 14px; width: 100%; background: linear-gradient(145deg, rgba(255,253,248,0.95) 0%, rgba(249,244,234,0.9) 100%); border: 1px solid rgba(156,123,78,0.2); border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: 10px; font-family: var(--ff-b); cursor: pointer; text-align: left; min-height: 62px; box-shadow: 0 2px 10px rgba(140,105,55,0.06), inset 0 1px 0 rgba(255,255,255,0.8); transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease; -webkit-tap-highlight-color: transparent; text-decoration: none; color: inherit; } .cal-option:hover { border-color: rgba(156,123,78,0.4); box-shadow: 0 4px 18px rgba(140,105,55,0.12), inset 0 1px 0 rgba(255,255,255,0.9); transform: translateY(-1px); } .cal-option:active { transform: scale(0.98); } .cal-option-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cal-option-icon.google { background: linear-gradient(135deg, #4285F4, #34A853); } .cal-option-icon.apple { background: linear-gradient(135deg, #555, #1C1C1E); } .cal-option-icon svg { width: 22px; height: 22px; } .cal-option-text strong { display: block; font-size: 0.85rem; font-weight: 500; color: #2C2010; margin-bottom: 2px; } .cal-option-text span { font-size: 0.68rem; color: #7A6248; } .cal-modal-cancel { display: block; width: 100%; background: transparent; border: 1px solid rgba(156,123,78,0.2); border-radius: 100px; padding: 0.85rem; font-family: var(--ff-b); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #7A6248; cursor: pointer; margin-top: 6px; min-height: 48px; transition: border-color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .cal-modal-cancel:hover { border-color: rgba(156,123,78,0.4); background: rgba(156,123,78,0.04); } @media(min-width: 480px) { .cal-modal { border-radius: 24px; margin-bottom: 2rem; max-width: 420px; } .cal-modal-overlay { align-items: center; } } .cal-caption { font-size: 0.6rem; letter-spacing: 0.12em; color: #A08870; margin-top: 0.65rem; display: block; font-family: var(--ff-b); text-align: center; } /* Body text +1–2px mobile readability */ @media(max-width:768px){ .tl-desc { font-size: 0.85rem !important; } .venue-addr { font-size: 0.84rem !important; } .dc-sub { font-size: 0.78rem !important; } .det-sub { font-size: 0.8rem !important; } .ac-sub { font-size: 0.73rem !important; } .rsvp-subtitle { font-size: 0.85rem !important; } .cd-lbl { font-size: 0.62rem !important; } .story-caption { font-size: 1rem !important; } } /* Enhanced date left bar */ .dc-date::before { background: linear-gradient(to bottom, transparent, rgba(201,169,110,0.6) 25%, rgba(201,169,110,0.6) 75%, transparent) !important; } /* Watermark richness — card decorative elements */ .dc-date-wm, .dc-time-wm { /* Richer warm gold — intentional premium feel */ text-shadow: 0 0 40px rgba(201,169,110,0.06), 0 0 80px rgba(201,169,110,0.03); } /* ================================================================ IDENTITY BLOCK — couple name hierarchy (lineage label / parent name styles retained but unused by default) ================================================================ */ /* Wrapper for groom/bride identity blocks */ .hero-identity-block { text-align: center; position: relative; } /* Lineage/kinship label style (unused by default; available if a lineage line is added back) */ .hero-lineage-label { display: block; font-family: var(--ff-b); font-size: clamp(0.44rem, 1.6vw, 0.52rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); -webkit-text-fill-color: var(--gold); background: none; margin-bottom: 0.2rem; font-weight: 500; opacity: 0.9; } /* Parent names — subordinate serif */ .hero-parent-names { display: block; font-family: var(--ff-h); font-weight: 300; font-style: italic; font-size: clamp(0.82rem, 2.8vw, 0.98rem); color: var(--text-2); -webkit-text-fill-color: var(--text-2); background: none; line-height: 1.45; margin-bottom: 0; letter-spacing: 0.015em; } /* Fine gold rule */ .hero-lineage-rule { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,146,74,0.5), transparent); margin: 0.45rem auto 0; } /* Central "&" separator */ .hero-couple-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(0.3rem, 1.5vh, 0.8rem) 0; } .hero-couple-divider-line { flex: 1; max-width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,146,74,0.4), transparent); } .hero-couple-amp-large { font-family: var(--ff-h); font-size: clamp(2rem, 8vw, 4rem); font-weight: 300; font-style: italic; color: var(--gold-lt); -webkit-text-fill-color: var(--gold-lt); background: none; letter-spacing: 0.05em; line-height: 1; display: block; text-align: center; margin: 0; } /* ── Individual name (GROOM / BRIDE) — the hero star ── */ .hero-name-single { display: block; font-family: var(--ff-h); font-weight: 300; font-style: italic; /* Mobile-first: big enough to feel grand, safe on 360px */ font-size: clamp(2.4rem, 10.5vw, 5.8rem); line-height: 1.0; letter-spacing: -0.01em; background: linear-gradient(135deg, #6B4E08 0%, #B8840A 14%, #D4A830 26%, #7A5A0A 38%, #A87818 50%, #C89820 62%, #6B4E08 74%, #B8840A 86%, #8A6410 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: goldShimmer 5s ease-in-out infinite; /* Visual lift — subtle text shadow impossible with clip, use filter glow */ filter: drop-shadow(0 1px 8px rgba(184,146,74,0.22)); } /* Spacing */ .hero-groom-block { margin-bottom: 0; } .hero-groom-block .hero-name-single { margin-top: clamp(0.5rem, 2vh, 0.9rem); } .hero-bride-block { margin-top: 0; } .hero-bride-block .hero-name-single { margin-bottom: clamp(0.5rem, 2vh, 0.9rem); } /* ── Very small phones (≤ 360px) ── */ @media(max-width:360px) { .hero-lineage-label { font-size: 0.41rem; letter-spacing: 0.24em; } .hero-parent-names { font-size: 0.76rem; } .hero-name-single { font-size: clamp(2rem, 10vw, 2.6rem); } .hero-couple-amp-large { font-size: clamp(1.7rem, 7vw, 2.2rem); } } /* The shared RSVP form paints its send button with background:currentColor next to color:#fff on the same rule, so currentColor resolved to white and the button that completes a "Yes, I'll attend" reply rendered as a blank block. Dress it in this design's own colours. */ .wiw-rsvp .wiw-rsvp-send{background:linear-gradient(180deg,#D4AE6A,#B8924A);border:1px solid rgba(184,146,74,.65);color:#1C1510;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} 19:T64e7,/* ============================================================ WEDDING CONFIG — ✏️ Edit all content here ============================================================ */ const CFG = window.templateConfig || {}; const textOr = (value, fallback) => { value = String(value || "").trim(); return value && !/^\{\{.*\}\}$/.test(value) ? value : fallback; }; const compactDate = (iso) => String(iso || "").replace(/-/g, ""); const compactTime = (time) => "T" + String(time || "11:00").replace(":", "") + "00"; const dateObj = (iso) => { const value = textOr(iso, "2027-08-11"); const d = new Date(value + "T00:00:00"); return Number.isNaN(d.getTime()) ? new Date("2027-08-11T00:00:00") : d; }; const dateParts = (iso) => { const d = dateObj(iso); const day = String(d.getDate()); const weekday = d.toLocaleDateString("en-IN", { weekday: "long" }); const month = d.toLocaleDateString("en-IN", { month: "long" }); const year = String(d.getFullYear()); const suffix = day.endsWith("1") && day !== "11" ? "st" : day.endsWith("2") && day !== "12" ? "nd" : day.endsWith("3") && day !== "13" ? "rd" : "th"; return { day, weekday, month, year, monthDay: `${month} ${day}${suffix}`, long: `${day} ${month} ${year}`, label: `${weekday} · ${day} ${month} ${year}`, short: `${day} · ${month} · ${year}`, }; }; const timeParts = (time) => { const raw = textOr(time, "11:00"); const [hRaw, mRaw = "00"] = raw.split(":"); const h = Math.max(0, Math.min(23, parseInt(hRaw, 10) || 0)); const m = String(parseInt(mRaw, 10) || 0).padStart(2, "0"); const ampm = h >= 12 ? "PM" : "AM"; const hour12 = h % 12 || 12; return { raw, main: `${hour12}:${m}`, ampm, label: `${hour12}:${m} ${ampm}` }; }; const DATE = dateParts(CFG.weddingDate); const TIME = timeParts(CFG.weddingTime); const W = { groom: textOr(CFG.groomName, "Groom"), bride: textOr(CFG.brideName, "Bride"), date: textOr(CFG.weddingDate, "2027-08-11"), time: textOr(CFG.weddingTime, "11:00"), endTime: "14:30", venue: textOr(CFG.venueName, "Wedding Venue"), venueUrl: textOr(CFG.venueUrl, "#"), timeline: [ { time:"10:30 AM", title:"Guest Arrival", desc:"Guests are warmly welcomed and seated", svgIcon:"mosque" }, { time:TIME.label, title:"Nikah", desc:`The sacred union of ${textOr(CFG.groomName, "Groom")} & ${textOr(CFG.brideName, "Bride")}`, svgIcon:"rings" }, { time:"11:45 AM", title:"Blessings & Congratulations", desc:"A moment to greet and celebrate with the couple", svgIcon:"blessing" }, { time:"12:00 PM", title:"Lunch", desc:"Celebrate with food, joy and loved ones", svgIcon:"cutlery" }, ] }; (function fillDerivedTemplateText(){ document.querySelectorAll('[data-date-format]').forEach((el) => { const key = el.getAttribute('data-date-format'); el.textContent = DATE[key] || DATE.long; }); document.querySelectorAll('[data-time-format]').forEach((el) => { const key = el.getAttribute('data-time-format'); el.textContent = TIME[key] || TIME.label; }); })(); /* Elegant SVG icons for timeline — gold outline style */ const svgIcons = { /* Mosque / arrival */ mosque: ``, /* Wedding rings */ rings: ``, /* Floral blessing / hands */ blessing: ``, /* Elegant cutlery */ cutlery: ``, }; const iconPaths = { users: '', heart: '', star: '', hands: '', }; // Build timeline with individual scroll-reveal per item const tlList = document.getElementById('tlList'); W.timeline.forEach((item, i) => { const el = document.createElement('div'); // Each item gets its own IntersectionObserver — appears one by one el.className = 'tl-item tl-reveal'; el.style.cssText = 'opacity:0; transform:translateY(28px) translateX(-8px); transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);'; el.setAttribute('role','listitem'); el.innerHTML = `

${item.svgIcon && svgIcons[item.svgIcon] ? svgIcons[item.svgIcon] : ''}

${item.time}

${item.title}

${item.desc}

`; tlList.appendChild(el); }); // Staggered IntersectionObserver — each item fades in individually (function(){ const items = document.querySelectorAll('.tl-reveal'); const obs = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.isIntersecting) { // Small stagger delay based on position in list const idx = Array.from(items).indexOf(entry.target); setTimeout(() => { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0) translateX(0)'; }, idx * 180); obs.unobserve(entry.target); } }); }, { threshold: 0.2, rootMargin: '0px 0px -30px 0px' }); items.forEach(item => obs.observe(item)); })(); /* ============================================================ PRELOADER HOLD BUTTON ============================================================ */ (function(){ const btn = document.getElementById('holdBtn'); const ring = document.getElementById('progressCircle'); const pl = document.getElementById('preloader'); const main = document.getElementById('main-content'); const HOLD = 600; const C = 2 * Math.PI * 43; ring.style.strokeDasharray = C; ring.style.strokeDashoffset = C; /* The cover is a doorway: hold the page still until it is opened, so the invitation underneath cannot be scrolled past before "Hold to Open". Locked from JS rather than CSS so that if this script ever fails the page is left scrollable instead of permanently frozen. */ const root = document.documentElement; function lockScroll(){ window.scrollTo(0,0); root.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; } function unlockScroll(){ root.style.overflow = ''; document.body.style.overflow = ''; } lockScroll(); let t0=null, raf=null, done=false; const setP = p => { ring.style.strokeDashoffset = C*(1-p); }; function tick(ts){ if(!t0) t0=ts; const p = Math.min((ts-t0)/HOLD,1); setP(p); if(p<1){ raf=requestAnimationFrame(tick); } else if(!done){ done=true; complete(); } } function start(){ if(done)return; btn.classList.add('pressing'); t0=null; raf=requestAnimationFrame(tick); if(navigator.vibrate) navigator.vibrate([20]); } function cancel(){ if(done)return; btn.classList.remove('pressing'); cancelAnimationFrame(raf); let p = 1-(parseFloat(ring.style.strokeDashoffset||C)/C); const decay=()=>{ p-=0.05; if(p<=0){setP(0);return;} setP(p); requestAnimationFrame(decay); }; requestAnimationFrame(decay); t0=null; } function complete(){ if(navigator.vibrate) navigator.vibrate([25,35,55]); btn.style.background='rgba(156,123,78,0.15)'; setTimeout(()=>{ pl.classList.add('exit'); setTimeout(()=>{ pl.style.display='none'; unlockScroll(); main.classList.add('show'); animateHero(); initReveal(); startCountdown(); },900); },280); } btn.addEventListener('touchstart', e=>{e.preventDefault();start();},{passive:false}); btn.addEventListener('touchend', cancel); btn.addEventListener('touchcancel',cancel); btn.addEventListener('mousedown', start); btn.addEventListener('mouseup', cancel); btn.addEventListener('mouseleave', cancel); btn.addEventListener('keydown', e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();start();}}); btn.addEventListener('keyup', e=>{if(e.key==='Enter'||e.key===' ')cancel();}); })(); /* ============================================================ HERO ENTRANCE ============================================================ */ function animateHero(){ const eyebrow = document.getElementById('heroEyebrow'); const tagline = document.getElementById('heroTagline'); const names = document.getElementById('heroNames'); const meta = document.getElementById('heroMeta'); const cta = document.getElementById('heroCta'); const rules = document.querySelectorAll('.hero-gold-rule'); const rule1 = rules[0]; // below tagline const rule2 = rules[1]; // below bride parents [eyebrow,tagline,names,meta,cta].forEach(el=>{ if(el) el.style.transform='translateY(22px)'; }); // Text elements: fade + rise [[eyebrow,180],[tagline,320],[names,500],[meta,1060],[cta,1260]].forEach(([el,d])=>{ if(!el) return; setTimeout(()=>{ el.style.transition='opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1)'; el.style.opacity='1'; el.style.transform='translateY(0)'; },d); }); // Gold rules: center-out expansion, synced to adjacent text // rule1 appears just after tagline finishes animating (~320ms start + 1100ms duration = ~420ms felt) if(rule1) setTimeout(()=>{ rule1.classList.add('animate-in'); }, 680); // rule2 appears just after names block (bride parents) (~500ms start) if(rule2) setTimeout(()=>{ rule2.classList.add('animate-in'); }, 980); } /* ============================================================ SCROLL REVEAL ============================================================ */ function initReveal(){ /* Respect reduced motion */ const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if(reduced){ document.querySelectorAll('.sr,.cd-sr,.rsvp-card-sr,.ornament-sr').forEach(el=>{ el.classList.add('in'); }); return; } /* Single IntersectionObserver for all reveal elements */ const obsMain = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); obsMain.unobserve(e.target); } }); },{ threshold: 0.2, rootMargin: '0px 0px -20px 0px' }); /* Observe all animated elements */ document.querySelectorAll( '.sr, .cd-sr, .rsvp-card-sr, .ornament-sr' ).forEach(el => obsMain.observe(el)); /* RSVP cards — also trigger when RSVP section visible */ const rsvpSection = document.getElementById('rsvp'); if(rsvpSection){ const rsvpObs = new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(e.isIntersecting){ document.querySelectorAll('.rsvp-card-sr').forEach(card=>{ card.classList.add('in'); }); rsvpObs.disconnect(); } }); },{ threshold: 0.15 }); rsvpObs.observe(rsvpSection); } } /* ============================================================ COUNTDOWN ============================================================ */ function startCountdown(){ function tick(){ const target = new Date(`${W.date}T${W.time}:00+05:30`); const diff = target - new Date(); if(diff<=0){ ['days','hours','mins','secs'].forEach(k=>{ const el=document.getElementById('cd-'+k); if(el)el.textContent='0'; }); return; } const days = Math.floor(diff/86400000); const hours = Math.floor((diff%86400000)/3600000); const mins = Math.floor((diff%3600000)/60000); const secs = Math.floor((diff%60000)/1000); const set=(id,v,p=2)=>{ const el=document.getElementById('cd-'+id); if(el)el.textContent=String(v).padStart(p,'0'); }; set('days',days,days>=100?3:2); set('hours',hours); set('mins',mins); set('secs',secs); } tick(); setInterval(tick,1000); } /* ============================================================ PARALLAX BLOBS ============================================================ */ /* ============================================================ RSVP CONFIG — ✏️ Paste your Supabase credentials here ============================================================ */ const RSVP = { url: 'YOUR_PROJECT_URL', key: 'YOUR_SUPABASE_ANON_KEY', table: 'rsvp_responses', }; /* ── Star field ── */ (function(){ const box = document.getElementById('rsvp-stars'); if(!box) return; for(let i=0;i<60;i++){ const s = document.createElement('div'); s.className = 'r-star'; const sz = Math.random()*1.6+0.4; s.style.cssText = [ `width:${sz}px`, `height:${sz}px`, `top:${Math.random()*100}%`, `left:${Math.random()*100}%`, `animation-duration:${2.5+Math.random()*5}s`, `animation-delay:${-Math.random()*7}s`, ].join(';'); box.appendChild(s); } })(); /* ── RSVP interaction ── */ (function(){ let attending = null; let guestCount = null; let busy = false; const step1 = document.getElementById('rStep1'); const step2 = document.getElementById('rStep2'); const cardYes = document.getElementById('rCardYes'); const cardNo = document.getElementById('rCardNo'); const btn = document.getElementById('rConfirmBtn'); const errMsg = document.getElementById('rErr'); const success = document.getElementById('rSuccess'); const declined = document.getElementById('rDeclined'); const nameEl = document.getElementById('rName'); /* Show / hide steps */ function showStep(hide, show){ hide.classList.remove('rsvp-visible'); hide.classList.add('rsvp-hidden'); setTimeout(()=>{ show.classList.remove('rsvp-hidden'); show.classList.add('rsvp-visible'); }, 360); } /* Card selection */ function pickCard(chosen, other, isYes){ chosen.classList.add('rsvp-selected'); other.classList.remove('rsvp-selected'); chosen.setAttribute('aria-pressed','true'); other.setAttribute('aria-pressed','false'); attending = isYes; if(isYes){ setTimeout(()=> showStep(step1, step2), 420); } else { setTimeout(()=> submit(false, 0), 500); } } cardYes.addEventListener('click', ()=> pickCard(cardYes, cardNo, true)); cardNo.addEventListener('click', ()=> pickCard(cardNo, cardYes, false)); cardYes.addEventListener('keydown', e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); pickCard(cardYes,cardNo,true); }}); cardNo.addEventListener('keydown', e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); pickCard(cardNo,cardYes,false); }}); /* Pills */ document.querySelectorAll('.g-pill').forEach(p=>{ p.addEventListener('click', ()=>{ document.querySelectorAll('.g-pill').forEach(x=> x.classList.remove('rsvp-selected')); p.classList.add('rsvp-selected'); guestCount = parseInt(p.dataset.n); btn.disabled = false; errMsg.classList.remove('on'); }); p.addEventListener('keydown', e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); p.click(); }}); }); /* Confirm */ btn.addEventListener('click', ()=>{ if(busy) return; if(!guestCount){ errMsg.classList.add('on'); return; } submit(true, guestCount); }); /* Submit */ async function submit(isAttending, count){ if(busy) return; busy = true; if(isAttending){ btn.disabled = true; btn.innerHTML = 'Confirming…'; } const payload = { guest_name: (nameEl && nameEl.value.trim()) || null, attending: isAttending, guest_count: isAttending ? count : 0, submitted_at: new Date().toISOString(), }; /* Try Supabase */ const live = RSVP.url.includes('supabase.co') && !RSVP.url.includes('YOUR_PROJECT'); if(live){ try { const r = await fetch(`${RSVP.url}/rest/v1/${RSVP.table}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'apikey': RSVP.key, 'Authorization': 'Bearer ' + RSVP.key, 'Prefer': 'return=minimal', }, body: JSON.stringify(payload), }); if(!r.ok) console.warn('Supabase error', r.status); } catch(e){ console.warn('Network error:', e); } } else { await new Promise(res=> setTimeout(res, 700)); } /* Show result */ [step1, step2].forEach(s=>{ s.classList.remove('rsvp-visible'); s.classList.add('rsvp-hidden'); }); setTimeout(()=>{ (isAttending ? success : declined).classList.add('on'); }, 340); } })(); /* ============================================================ MOBILE SCROLL — iOS momentum + reduced motion respect ============================================================ */ (function(){ // Force momentum scrolling on all scrollable containers document.querySelectorAll('.guest-pills, .tbl-scroll').forEach(el => { el.style.webkitOverflowScrolling = 'touch'; el.style.overflowX = 'auto'; }); // Passive touch listeners to prevent scroll jank document.addEventListener('touchstart', function(){}, { passive: true }); document.addEventListener('touchmove', function(){}, { passive: true }); // Fix 100vh on mobile browsers (address bar shifts) function setVH() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } setVH(); window.addEventListener('resize', setVH, { passive: true }); window.addEventListener('orientationchange', () => setTimeout(setVH, 200), { passive: true }); })(); /* Subtle hero blob parallax */ if(!window.matchMedia('(prefers-reduced-motion:reduce)').matches){ const _blobs=document.querySelectorAll('.hero-blob'); const _mono=document.querySelector('.hero-monogram'); let _t=false; window.addEventListener('scroll',()=>{ if(!_t){ requestAnimationFrame(()=>{ const y=window.scrollY; if(_blobs[0])_blobs[0].style.transform=`translate(0,${y*.08}px)`; if(_blobs[1])_blobs[1].style.transform=`translate(0,${y*.05}px)`; if(_mono)_mono.style.transform=`translate(-50%,calc(-50% + ${y*.06}px))`; _t=false; }); _t=true; } },{passive:true}); } /* ============================================================ LINE DRAW ANIMATION — dividers draw in on scroll ============================================================ */ (function(){ const dividers = document.querySelectorAll('.geo-divider'); if(!dividers.length) return; const obs = new IntersectionObserver((entries) => { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add('drawn'); obs.unobserve(entry.target); } }); }, { threshold: 0.6 }); dividers.forEach(d => obs.observe(d)); })(); /* ============================================================ ADD TO CALENDAR ============================================================ */ (function(){ /* ── Event config — edit here ── */ const EVT = { title: `Nikah & Reception - ${W.groom} & ${W.bride}`, date: compactDate(W.date), timeStart: compactTime(W.time), timeEnd: compactTime(W.endTime), location: W.venue, details: `You are cordially invited to celebrate ${W.groom} & ${W.bride}.`, tz: 'Asia%2FKolkata', }; const overlay = document.getElementById('calModal'); const trigBtn = document.getElementById('calTriggerBtn'); const cancel = document.getElementById('calCancel'); const gBtn = document.getElementById('calGoogle'); const aBtn = document.getElementById('calApple'); function openModal() { overlay.classList.add('open'); overlay.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; } function closeModal() { overlay.classList.remove('open'); overlay.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; } if(trigBtn) trigBtn.addEventListener('click', openModal); if(cancel) cancel.addEventListener('click', closeModal); if(overlay) overlay.addEventListener('click', e => { if(e.target === overlay) closeModal(); }); document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); }); /* ── Google Calendar ── */ if(gBtn) gBtn.addEventListener('click', () => { const start = EVT.date + EVT.timeStart; const end = EVT.date + EVT.timeEnd; const url = [ 'https://calendar.google.com/calendar/render?action=TEMPLATE', `&text=${encodeURIComponent(EVT.title)}`, `&dates=${start}/${end}`, `&location=${encodeURIComponent(EVT.location)}`, `&details=${encodeURIComponent(EVT.details)}`, `&ctz=${EVT.tz}`, ].join(''); window.open(url, '_blank', 'noopener,noreferrer'); closeModal(); }); /* ── Apple Calendar (.ics download) ── */ if(aBtn) aBtn.addEventListener('click', () => { const uid = `${W.groom}-${W.bride}-${EVT.date}@wedding`.toLowerCase().replace(/[^a-z0-9@.]+/g,'-'); const now = new Date().toISOString().replace(/[-:.]/g,'').slice(0,15) + 'Z'; const ics = [ 'BEGIN:VCALENDAR', 'VERSION:2.0', `PRODID:-//${W.groom} & ${W.bride} Wedding//EN`, 'CALSCALE:GREGORIAN', 'METHOD:PUBLISH', 'BEGIN:VEVENT', `UID:${uid}`, `DTSTAMP:${now}`, `DTSTART;TZID=Asia/Kolkata:${EVT.date}${EVT.timeStart}`, `DTEND;TZID=Asia/Kolkata:${EVT.date}${EVT.timeEnd}`, `SUMMARY:${EVT.title}`, `LOCATION:${EVT.location}`, `DESCRIPTION:${EVT.details}`, 'STATUS:CONFIRMED', 'SEQUENCE:0', 'BEGIN:VALARM', 'TRIGGER:-PT60M', 'ACTION:DISPLAY', 'DESCRIPTION:Reminder', 'END:VALARM', 'END:VEVENT', 'END:VCALENDAR', ].join('\r\n'); const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${W.groom}-${W.bride}-Wedding.ics`.replace(/[^a-z0-9.-]+/gi,'-'); document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); closeModal(); }); })(); 8:["$","main",null,{"className":"flex min-h-screen flex-col bg-cream font-body text-espresso","children":[["$","header",null,{"className":"sticky top-0 z-20 border-b border-espresso/10 bg-cream/85 backdrop-blur-md","children":["$","div",null,{"className":"mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6","children":[["$","$L7",null,{"href":"/templates","className":"inline-flex items-center gap-2 font-body text-sm font-medium text-espresso/70 transition hover:text-espresso","children":[["$","$L2",null,{"ref":"$undefined","iconNode":[["path",{"d":"m12 19-7-7 7-7","key":"1l729n"}],["path",{"d":"M19 12H5","key":"x3x0zl"}]],"className":"lucide-arrow-left h-4 w-4"}]," All designs"]}],["$","span",null,{"className":"truncate font-body text-sm font-bold tracking-tight text-espresso","children":"Islamic"}],["$","span",null,{"className":"hidden w-[76px] sm:block","aria-hidden":true}]]}]}],["$","div",null,{"className":"mx-auto w-full max-w-5xl flex-1 px-4 py-5 sm:px-6 sm:py-6","children":["$","div",null,{"className":"h-[calc(100svh-11rem)] min-h-[560px] overflow-hidden rounded-[24px] bg-paper p-3 shadow-[0_20px_60px_-28px_rgba(22,24,28,0.28)]","children":["$","$L16",null,{"html":"$17","css":"$18","js":"$19","values":{"logo_url":"","bride_name":"Sana","groom_name":"Fahim","love_story":"Our journey began…","venue_name":"The Leela Palace, Jaipur","wedding_date":"2027-08-09","couple_display_name":"Fahim & Sana"},"allowJs":true}]}]}],"$L1a"]}] 11:null 15:[["$","title","0",{"children":"Islamic — Preview · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Create a beautiful wedding website in minutes. Pick a template, add your story, publish your link, and invite your guests."}],["$","link","2",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L1b","3",{}]]