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:T95e6,

Together with their families

A&L

request the pleasure of your company at the celebration of their marriage

The wedding day

We're getting married

{{bride_name}} & {{groom_name}}

Saturday

The wedding day

00Days

00Hours

00Minutes

00Seconds

The order of the day

Celebrations

{{#if time}}
{{time}}
{{/if}}
{{name}}
{{#if venue}}
{{venue}}
{{/if}}

Where we'll celebrate

The Venue

{{/if}} {{#if venue_map_url}}View Directions{{/if}}

Kindly respond

Will you join us?

A single tap is all it takes.

Don't miss a moment

Add to Calendar

Google Calendar Apple Calendar

With all our love

Your presence is the greatest gift of all. We look forward to sharing this day, and every day after, surrounded by the people we love.

With love, {{bride_name}} & {{groom_name}}

18:Td277,@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=EB+Garamond:ital,wght@0,400..700;1,400..500&family=Pinyon+Script&display=swap'); /* ============================================================================= tokens.css — Design tokens for the "Everwhite" wedding template Single deliberate visual world: an Ivory Garden. One theme, executed with care (like a letterpress invitation — a committed single-theme choice, not an omission). Every color, size, rhythm and easing in the template resolves back to a token here. ========================================================================== */ :root { /* ---- Palette ------------------------------------------------------------- Sage-green is the dominant brand hue; antique gold is the metallic accent. Neutrals are warmed slightly toward green so nothing reads as default grey. */ --ivory: #F1ECE0; /* page ground */ --porcelain: #FAF7F0; /* cards, lightest surfaces */ --linen: #E7DFCE; /* subtle raised panels */ --sage: #7C8A55; /* primary brand olive */ --sage-deep: #5E6B3F; /* pressed / emphasis */ --fern: #37432B; /* deep forest — footer, dark blocks */ --gold: #A5904F; /* antique gold — line art, hairlines, monogram */ --gold-soft: #C4B486; /* lifted gold for fine strokes on dark */ --ink: #2B2E24; /* primary text (green-black) */ --ink-soft: #5B5F4E; /* secondary text */ --rose: #B45C43; /* rare accent — the butterfly only */ /* Translucent washes (built on the palette, used for depth/lighting) */ --veil-ivory: rgba(241, 236, 224, 0.72); --veil-white: rgba(255, 253, 248, 0.55); --shadow-soft: rgba(55, 67, 43, 0.10); --shadow-med: rgba(43, 46, 36, 0.16); /* ---- Typography ---------------------------------------------------------- */ --f-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --f-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --f-script: 'Pinyon Script', 'Snell Roundhand', cursive; /* Fluid type scale (mobile-first; clamps so it never overwhelms a phone) */ --t-eyebrow: clamp(0.68rem, 2.4vw, 0.78rem); /* tracked caps labels */ --t-body: clamp(1rem, 3.6vw, 1.12rem); --t-lead: clamp(1.12rem, 4vw, 1.3rem); --t-h3: clamp(1.5rem, 6vw, 1.9rem); --t-h2: clamp(2rem, 8.5vw, 2.9rem); --t-display: clamp(2.6rem, 12vw, 4rem); /* the couple's names */ --t-script: clamp(2.2rem, 10vw, 3.2rem); --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.62; --ls-caps: 0.28em; /* letter-spacing for uppercase labels */ --ls-wide: 0.14em; /* ---- Spacing & layout ---------------------------------------------------- */ --space-2xs: 0.375rem; --space-xs: 0.625rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 2.75rem; --space-xl: 4.5rem; --space-2xl: 7rem; --frame-max: 30rem; /* content column cap ~480px (phone-scale on desktop) */ --gutter: clamp(1.25rem, 6vw, 2.25rem); --nav-h: 4.5rem; /* fixed bottom tab-bar height */ /* ---- Radii & lines ------------------------------------------------------- */ --r-sm: 0.75rem; --r-md: 1.25rem; --r-lg: 2rem; --r-pill: 999px; --hair: 1px; /* ---- Motion -------------------------------------------------------------- */ /* Slow, floaty, graceful — matched to the romantic tone. Transform/opacity only. */ --e-soft: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out, for reveals */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* smooth in-out */ --e-gentle: cubic-bezier(0.4, 0, 0.2, 1); --e-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo — the climax */ --d-fast: 0.45s; --d-med: 0.7s; --d-slow: 1.1s; --z-nav: 60; --z-audio: 65; --z-intro: 90; } /* ============================================================================= base.css — Reset, document defaults, typography base, layout primitives ========================================================================== */ /* ---- Reset (targeted, not scorched-earth) --------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--ivory); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Room for the fixed bottom tab-bar so content never hides behind it. */ padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } /* Respect users who ask for less motion: keep reveals instant, drop ambient loops. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---- Typography base ------------------------------------------------------ */ h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: var(--lh-tight); text-wrap: balance; color: var(--ink); } /* Reusable type roles ------------------------------------------------------- */ .eyebrow { font-family: var(--f-body); font-size: var(--t-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sage-deep); font-weight: 500; } .script { font-family: var(--f-script); font-weight: 400; color: var(--sage); line-height: 1; } .lead { font-size: var(--t-lead); color: var(--ink-soft); line-height: var(--lh-body); } .names { font-family: var(--f-display); font-size: var(--t-display); font-weight: 500; letter-spacing: 0.01em; line-height: 0.98; } /* ---- Layout primitives ---------------------------------------------------- */ /* A centered, capped content column — the phone-scale measure the whole template composes within. On desktop it stays centered with garden margins. */ .frame { width: 100%; max-width: var(--frame-max); margin-inline: auto; padding-inline: var(--gutter); } /* Vertical rhythm helper: stacks children with a consistent gap (no margin math). */ .stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); } /* The landing is a single, self-contained page: until the invitation is opened the story content simply does not exist, so there is nothing to scroll to. Everything below reveals only after "Open Invitation" (.app.is-open). */ .app:not(.is-open) #main { display: none; } /* Drifting butterflies belong to the opened invitation, not the clean cover. */ .app:not(.is-open) .butterflies { display: none; } /* Full-viewport section used by cover / intro / countdown. */ .screen { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; } /* Accessible visually-hidden text (labels for icon-only controls). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Visible focus ring for keyboard users (touch taps never trigger it). */ :focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px; } /* Thin gold hairline divider with a slow travelling highlight. */ .rule { width: 3.5rem; height: var(--hair); background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 220% 100%; border: 0; animation: rule-shimmer 6.5s var(--e-inout) infinite; } /* ============================================================================= components.css — Reusable UI: buttons, arch frames, monogram, botanicals, bottom navigation, music toggle. Every piece is composable across sections. ========================================================================== */ /* ---- Buttons -------------------------------------------------------------- */ /* Primary pill — the one CTA style used everywhere (touch target ≥ 48px). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3rem; padding: 0.85em 1.9em; border-radius: var(--r-pill); font-family: var(--f-body); font-size: 0.82rem; font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--porcelain); background: var(--sage); box-shadow: 0 6px 18px -8px rgba(94, 107, 63, 0.6); transition: transform var(--d-fast) var(--e-soft), background-color var(--d-fast) var(--e-gentle), box-shadow var(--d-fast) var(--e-gentle); will-change: transform; } .btn:active { transform: scale(0.965); background: var(--sage-deep); } .btn .btn__icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; } /* Ghost / outline variant on light grounds. */ .btn--ghost { color: var(--sage-deep); background: transparent; border: var(--hair) solid var(--sage); box-shadow: none; } .btn--ghost:active { background: rgba(124, 138, 85, 0.12); } /* Full-width block button (RSVP / calendar rows). */ .btn--block { width: 100%; } /* ---- Circular icon button (social, scroll cue) --------------------------- */ .icon-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--fern); color: var(--porcelain); transition: transform var(--d-fast) var(--e-soft); } .icon-btn:active { transform: scale(0.9); } .icon-btn svg { width: 1.25rem; height: 1.25rem; } /* ============================================================================= Arch frame — the signature motif. A composable container whose top is a semicircle (a garden gate). Used for photos, event cards, the monogram. ========================================================================== */ .arch { position: relative; border-radius: 999px 999px var(--r-md) var(--r-md); overflow: hidden; background: var(--porcelain); box-shadow: 0 24px 60px -30px var(--shadow-med); } /* Fine gold inner outline that traces the arch. */ .arch::after { content: ''; position: absolute; inset: 0.5rem; border: var(--hair) solid rgba(165, 144, 79, 0.55); border-radius: inherit; pointer-events: none; } /* A slimmer oval variant (fully rounded top+bottom) for portraits. */ .arch--oval { border-radius: 999px; } /* Media inside an arch fills and crops gracefully. */ .arch__media { width: 100%; height: 100%; object-fit: cover; } /* ============================================================================= Botanical corner sprays — original fine-line vector art (defined as SVG symbols in the markup). Positioned symmetrically; mirrored via transforms so all four corners derive from ONE drawing (perfectly balanced by construction). ========================================================================== */ .botanical { position: absolute; width: clamp(7rem, 34vw, 11rem); color: var(--sage); opacity: 0.9; pointer-events: none; z-index: 1; } .botanical svg { width: 100%; height: auto; } .botanical--tl { top: 0; left: 0; } .botanical--tr { top: 0; right: 0; transform: scaleX(-1); } .botanical--bl { bottom: 0; left: 0; transform: scaleY(-1); } .botanical--br { bottom: 0; right: 0; transform: scale(-1, -1); } /* A gentle, always-on breeze. The mirror flip lives on the span, so the sway animates the inner svg — the two never fight. Anchored at each corner, and offset so no two sway in unison. */ .botanical svg { animation: leaf-sway 7s var(--e-inout) infinite; transform-origin: 50% 0; } .botanical--tl svg { transform-origin: 8% 8%; animation-delay: 0s; } .botanical--tr svg { transform-origin: 8% 8%; animation-delay: -1.8s; } .botanical--bl svg { transform-origin: 8% 8%; animation-delay: -3.4s; } .botanical--br svg { transform-origin: 8% 8%; animation-delay: -5.1s; } /* ============================================================================= Monogram — original A & L emblem inside a gold oval cartouche. Built from type + CSS (crisp at any DPI, fully theme-controlled, original). ========================================================================== */ .monogram { position: relative; display: grid; place-items: center; width: clamp(6.5rem, 30vw, 8.5rem); aspect-ratio: 0.82; /* upright oval */ color: var(--gold); } /* Double gold oval cartouche. */ .monogram::before, .monogram::after { content: ''; position: absolute; inset: 0; border: var(--hair) solid currentColor; border-radius: 50%; } .monogram::after { inset: 6px; opacity: 0.55; } .monogram__mark { display: flex; align-items: baseline; gap: 0.02em; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.1rem, 10vw, 2.9rem); letter-spacing: -0.04em; color: currentColor; line-height: 1; } .monogram__amp { font-family: var(--f-script); font-size: 1.15em; letter-spacing: 0; transform: translateY(0.06em); margin-inline: -0.02em; } /* Small decorative tick above/below, echoing the reference's dotted oval. */ .monogram__tick { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; left: 50%; translate: -50% 0; } .monogram__tick--t { top: 9px; } .monogram__tick--b { bottom: 9px; } /* ============================================================================= Bottom tab-bar — fixed, touch-first section navigation. ========================================================================== */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: var(--veil-ivory); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-top: var(--hair) solid rgba(165, 144, 79, 0.3); /* Hidden until the invitation is "opened", then floats up. */ transform: translateY(120%); transition: transform var(--d-med) var(--e-soft); } .is-open .tabbar { transform: translateY(0); } .tab { display: grid; justify-items: center; gap: 0.25rem; padding: 0.4rem 0; color: var(--ink-soft); transition: color var(--d-fast) var(--e-gentle); } .tab svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: stroke var(--d-fast); } .tab__label { font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; } .tab.is-active { color: var(--sage-deep); } .tab.is-active svg { stroke-width: 1.8; } /* ============================================================================= Music toggle — fixed floating control (top-right, clear of the thumb-zone nav) ========================================================================== */ .music { position: fixed; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; z-index: var(--z-audio); width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 50%; color: var(--porcelain); background: var(--sage); box-shadow: 0 6px 16px -6px rgba(55, 67, 43, 0.5); opacity: 0; transform: scale(0.6); transition: opacity var(--d-med) var(--e-soft), transform var(--d-med) var(--e-soft); } .is-open .music { opacity: 1; transform: scale(1); } /* Three-bar equaliser that animates only while playing. */ .music__eq { display: flex; align-items: center; gap: 2px; height: 1rem; } .music__eq span { width: 2px; height: 40%; background: currentColor; border-radius: 2px; transform-origin: bottom; } .music.is-playing .music__eq span { animation: eq 0.9s var(--e-inout) infinite; } .music.is-playing .music__eq span:nth-child(2) { animation-delay: 0.15s; } .music.is-playing .music__eq span:nth-child(3) { animation-delay: 0.3s; } .music.is-playing .music__eq span:nth-child(4) { animation-delay: 0.45s; } @keyframes eq { 0%, 100% { height: 30%; } 50% { height: 95%; } } /* ============================================================================= ambient.css — A living, breathing backdrop behind the invitation. Soft dappled garden light drifts and breathes; a few pale petals float up slowly. It sits behind all content (transparent sections let it through) and is deliberately faint — atmosphere, never distraction. All transform/opacity, GPU-composited, and stilled under prefers-reduced-motion. ========================================================================== */ .ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Content scrolls above the ambient layer. */ .stage { position: relative; z-index: 1; } /* ---- Dappled light — slow drifting, breathing radial glows --------------- */ .ambient__blob { position: absolute; border-radius: 50%; filter: blur(46px); will-change: transform; } .ambient__blob--1 { width: 78%; aspect-ratio: 1; left: -22%; top: 4%; background: radial-gradient(circle, rgba(124, 138, 85, 0.20), transparent 68%); animation: amb-drift-1 30s var(--e-inout) infinite alternate; } .ambient__blob--2 { width: 86%; aspect-ratio: 1; right: -28%; top: 34%; background: radial-gradient(circle, rgba(197, 176, 120, 0.18), transparent 68%); animation: amb-drift-2 38s var(--e-inout) infinite alternate; } .ambient__blob--3 { width: 70%; aspect-ratio: 1; left: 6%; bottom: -18%; background: radial-gradient(circle, rgba(250, 247, 240, 0.55), transparent 66%); animation: amb-drift-3 34s var(--e-inout) infinite alternate; } @keyframes amb-drift-1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9%, 6%, 0) scale(1.18); } } @keyframes amb-drift-2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-8%, -5%, 0) scale(1); } } @keyframes amb-drift-3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, -7%, 0) scale(1.15); } } /* ---- Drifting petals — pale, slow, with a gentle sway -------------------- */ .ambient__petal { position: absolute; bottom: -6%; width: 15px; height: 15px; border-radius: 60% 60% 62% 62% / 70% 70% 58% 58%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc, #e8ddcb)); opacity: 0; will-change: transform, opacity; animation: amb-float var(--dur, 22s) linear var(--del, 0s) infinite; } @keyframes amb-float { 0% { opacity: 0; transform: translate3d(0, 2vh, 0) rotate(0deg) scale(0.65); } 8% { opacity: var(--op, 0.55); } 30% { transform: translate3d(var(--sway, 4vw), -28vh, 0) rotate(80deg) scale(0.9); } 55% { transform: translate3d(calc(var(--sway, 4vw) * -1), -56vh, 0) rotate(180deg) scale(1); } 80% { opacity: var(--op, 0.55); transform: translate3d(var(--sway, 4vw), -84vh, 0) rotate(280deg) scale(1); } 100% { opacity: 0; transform: translate3d(0, -114vh, 0) rotate(340deg) scale(1.05); } } /* ---- Twinkling gold motes — tiny points of light ------------------------- */ .ambient__mote { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--gold) 65%, transparent 100%); box-shadow: 0 0 6px 1px rgba(197, 176, 120, 0.55); opacity: 0; will-change: transform, opacity; animation: mote-twinkle var(--dur, 6s) var(--e-inout) var(--del, 0s) infinite; } /* ---- Gold butterflies drifting through, now and then --------------------- */ /* Their own layer ABOVE the content (but below the nav) so they're visible fluttering across, yet never block a tap. */ .butterflies { position: fixed; inset: 0; z-index: 55; overflow: hidden; pointer-events: none; } .ambient__butterfly { position: absolute; left: 0; width: 42px; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 4px 7px rgba(120, 90, 30, 0.32)); } .ambient__butterfly svg { width: 100%; height: auto; transform-origin: 50% 50%; animation: flutter 0.18s linear infinite alternate; } .ambient__butterfly--1 { top: 22%; animation: bfly-cross-1 26s var(--e-inout) 2.5s infinite; } .ambient__butterfly--2 { top: 58%; width: 34px; animation: bfly-cross-2 30s var(--e-inout) 14s infinite; } @keyframes bfly-cross-1 { 0% { transform: translate3d(-18vw, 0, 0) scale(0.85); opacity: 0; } 7% { opacity: 0.7; } 20% { transform: translate3d(30vw, -8vh, 0) scale(1); } 34% { transform: translate3d(72vw, 4vh, 0) scale(0.95); opacity: 0.7; } 46% { transform: translate3d(122vw, -4vh, 0) scale(0.9); opacity: 0; } 100% { transform: translate3d(122vw, 0, 0); opacity: 0; } } @keyframes bfly-cross-2 { 0% { transform: translate3d(120vw, 0, 0) scaleX(-1) scale(0.85); opacity: 0; } 7% { opacity: 0.62; } 24% { transform: translate3d(58vw, -10vh, 0) scaleX(-1) scale(1); } 42% { transform: translate3d(-20vw, 5vh, 0) scaleX(-1) scale(0.85); opacity: 0; } 100% { transform: translate3d(-20vw, 0, 0) scaleX(-1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ambient__blob, .ambient__petal, .ambient__mote, .ambient__butterfly, .ambient__butterfly svg { animation: none !important; } .ambient__petal, .ambient__mote, .butterflies { display: none; } } /* ============================================================================= intro.css — The cinematic "Through the Garden Gate" intro. A true 3D perspective tunnel: recycled marble gates fly past a JS-driven camera. Everything here is transform/opacity (GPU-composited) so it holds 60fps on mobile. Values marked /*tune*\/ were dialed in against renders. ========================================================================== */ .intro { position: fixed; inset: 0; z-index: var(--z-intro); overflow: hidden; background: var(--ivory); opacity: 0; visibility: hidden; /* Fade the tunnel in fast — it's already rushing as it appears. */ transition: opacity 0.35s var(--e-gentle); /* Progress + light values are written by intro.js each frame. */ --dawn: 0.15; /* central light intensity 0..1 */ --bloom: 0; /* final white-out 0..1 */ } .intro.is-playing { opacity: 1; visibility: visible; } /* ---- Depth layer 1 · sky / ambient light ---------------------------------- */ .intro__sky { position: absolute; inset: -10%; background: radial-gradient(60% 45% at 50% 44%, rgba(255,255,255,0.96), rgba(244,240,231,0.5) 45%, transparent 72%), linear-gradient(180deg, #cdd7cf 0%, #e7e6d8 42%, #f2eee2 100%); } /* ---- Depth layer 2 · the 3D colonnade ------------------------------------- */ .intro__scene { position: absolute; inset: 0; perspective: 500px; /* stronger depth foreshortening */ perspective-origin: 50% 45%; /* vanishing point slightly high */ transform-style: preserve-3d; } .intro__world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } /* A single gate plane (arch + side greenery + base orchids). */ .gate { position: absolute; left: 50%; top: 50%; width: 760px; /* tune: base plane size */ height: 1160px; margin: 0; transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; } .gate svg { width: 100%; height: 100%; display: block; } /* Atmospheric perspective: distant gates wash toward the fog colour. JS sets --haze per gate from its depth, so the corridor fades convincingly. */ .gate::after { content: ''; position: absolute; inset: 0; background: radial-gradient(62% 60% at 50% 42%, rgba(245, 243, 236, 0.95), rgba(226, 230, 222, 0.55)); opacity: var(--haze, 0); pointer-events: none; } /* True-3D motes (leaves/petals) that rush past the camera for visceral depth. */ .mote { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 60% 60% 62% 62% / 70% 70% 58% 58%; background: radial-gradient(circle at 38% 34%, #fff, var(--mc, #e7d7c9)); opacity: 0; will-change: transform, opacity; pointer-events: none; } .gate__arch { position: absolute; left: 50%; top: 50%; width: 47%; aspect-ratio: 400 / 640; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 26px rgba(55, 67, 43, 0.16)); } .gate__hedge { position: absolute; bottom: 0; width: 30%; height: 100%; } .gate__hedge--l { left: -3%; } .gate__hedge--r { right: -3%; transform: scaleX(-1); } .gate__orchids { position: absolute; bottom: 3%; width: 33%; aspect-ratio: 200 / 170; } .gate__orchids--l { left: 12%; } .gate__orchids--r { right: 12%; transform: scaleX(-1); } /* ---- Depth layer 3 · volumetric god-rays ---------------------------------- */ .intro__rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,0.5) 0deg 3deg, transparent 3deg 11deg); -webkit-mask-image: radial-gradient(40% 40% at 50% 45%, #000, transparent 70%); mask-image: radial-gradient(40% 40% at 50% 45%, #000, transparent 70%); mix-blend-mode: screen; opacity: calc(var(--dawn) * 0.5); will-change: opacity, transform; animation: rays-turn 60s linear infinite; } @keyframes rays-turn { to { transform: rotate(360deg); } } /* ---- Depth layer 4 · haze / fog at the vanishing point -------------------- */ .intro__fog { position: absolute; inset: 0; background: radial-gradient(46% 40% at 50% 45%, rgba(255,255,255,0.92), rgba(255,255,255,0.35) 40%, transparent 68%); opacity: calc(0.35 + var(--dawn) * 0.65); } /* ---- Depth layer 5 · drifting petals & motes ------------------------------ */ .intro__particles { position: absolute; inset: 0; pointer-events: none; } .petal { position: absolute; top: 100%; width: var(--s, 12px); height: var(--s, 12px); border-radius: 60% 60% 62% 62% / 70% 70% 58% 58%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc, #e9d9ce)); opacity: 0; will-change: transform, opacity; animation: petal-rise var(--dur, 7s) var(--e-inout) var(--del, 0s) infinite; filter: blur(var(--blur, 0px)); } @keyframes petal-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); } 12% { opacity: var(--op, 0.9); } 100% { opacity: 0; transform: translate3d(var(--dx, 30px), -112vh, 0) rotate(320deg) scale(1.1); } } /* ---- Depth layer 6 · butterfly -------------------------------------------- */ /* The gold butterfly leads the camera THROUGH the pillars: it starts near (large), flutters forward into the corridor (receding, small at the vanishing point), then rushes back and opens wide into the light as the invitation opens. Timed to the ~2s flight (see FLIGHT in intro.js). */ .intro__butterfly { position: absolute; left: 0; top: 0; width: 70px; margin: -35px 0 0 -35px; /* centre the sprite on its translate point */ will-change: transform, opacity; filter: drop-shadow(0 4px 9px rgba(120, 90, 30, 0.4)); animation: bfly-lead 2s var(--e-inout) 0s both; z-index: 12; } .intro__butterfly svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; animation: flutter 0.16s linear infinite alternate; } @keyframes bfly-lead { 0% { transform: translate3d(50vw, 88vh, 0) scale(1.3); opacity: 0; } 10% { opacity: 1; } 30% { transform: translate3d(58vw, 60vh, 0) scale(0.82); opacity: 1; } 50% { transform: translate3d(43vw, 49vh, 0) scale(0.55); opacity: 1; } 68% { transform: translate3d(51vw, 45vh, 0) scale(0.34); opacity: 1; } /* deep among the pillars */ 84% { transform: translate3d(50vw, 45vh, 0) scale(1.0); opacity: 1; } /* rushes back, opening */ 100% { transform: translate3d(50vw, 45vh, 0) scale(1.9); opacity: 0; } /* opens into the light */ } /* Gold light-burst that flares as the butterfly reaches the light. */ .intro__goldburst { position: absolute; inset: 0; z-index: 13; pointer-events: none; background: radial-gradient(40% 36% at 50% 45%, rgba(233, 206, 128, 0.95), rgba(226, 196, 120, 0.4) 42%, transparent 72%); opacity: 0; will-change: opacity; animation: goldburst 2s var(--e-inout) 0s both; } @keyframes goldburst { 0%, 60% { opacity: 0; } 82% { opacity: 0.9; } 100% { opacity: 0; } } /* ---- Depth layer 7 · foreground botanical frame (nearest) ----------------- */ .intro__frame { position: absolute; inset: 0; pointer-events: none; z-index: 9; } .intro__frame span { position: absolute; opacity: 0.96; } .intro__frame svg { width: 100%; height: auto; } .fg-orchid { width: clamp(9rem, 42vw, 15rem); } .fg-orchid--bl { bottom: -2%; left: -6%; animation: fg-drift-l 12s var(--e-inout) infinite alternate; } .fg-orchid--br { bottom: -2%; right: -6%; transform: scaleX(-1); animation: fg-drift-r 13s var(--e-inout) infinite alternate; } .fg-hedge { width: clamp(6rem, 26vw, 10rem); height: 60%; top: -4%; } .fg-hedge--tl { left: -5%; transform: scaleY(-1); } .fg-hedge--tr { right: -5%; transform: scale(-1, -1); } @keyframes fg-drift-l { to { transform: translate3d(10px, -6px, 0) rotate(1.5deg); } } @keyframes fg-drift-r { to { transform: scaleX(-1) translate3d(10px, -6px, 0) rotate(1.5deg); } } /* ---- Depth layer 8 · light bloom / white-out ------------------------------ */ .intro__bloom { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, #fff, #fdfbf6 55%, #f6f2e9); opacity: var(--bloom); will-change: opacity; pointer-events: none; z-index: 15; } /* ---- Dissolve: the overlay fades directly into the main invitation -------- */ .intro.is-done { opacity: 0; transition: opacity 0.8s var(--e-gentle); } /* ---- Reduced motion: no flight, just a graceful cross-fade ----------------- */ @media (prefers-reduced-motion: reduce) { .intro__world, .intro__rays, .petal, .intro__butterfly, .intro__goldburst, .intro__frame span { animation: none !important; } .intro__butterfly { display: none; } .intro__goldburst { opacity: 0.5; } } /* ============================================================================= sections.css — Per-section layout. Each section is a self-contained block; shared look comes from components. Added to section by section. ========================================================================== */ /* --------------------------------------------------------------------------- Section: Cover / "The Envelope" (#cover) A perfectly symmetric, vertically-centered composition inside the arch frame, framed by four mirrored botanical sprays. ------------------------------------------------------------------------- */ .cover { background: radial-gradient(120% 80% at 50% 12%, var(--porcelain), transparent 60%), var(--ivory); } /* Soft breathing halo behind the composition (pure light, GPU-cheap). */ .cover::before { content: ''; position: absolute; width: 78%; aspect-ratio: 1; top: 34%; left: 50%; translate: -50% -50%; background: radial-gradient(circle, var(--veil-white), transparent 62%); animation: breathe 9s var(--e-inout) infinite; z-index: 0; } .cover__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); padding-block: var(--space-2xl); } .cover__eyebrow { color: var(--sage-deep); } /* Monogram seal breathes a soft gold glow. */ .cover__seal { margin-block: var(--space-xs); animation: seal-glow 5.5s var(--e-inout) infinite; } /* The primary CTA gently breathes to invite the tap. */ .cover .btn { animation: cta-pulse 3.2s var(--e-inout) infinite; } .cover__invite { max-width: 20rem; font-style: italic; color: var(--ink-soft); } .cover__amp { color: var(--gold); font-weight: 400; font-style: italic; } .cover__date { font-size: var(--t-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-soft); } .cover__meta { display: flex; align-items: center; gap: var(--space-sm); } .cover__meta .rule { width: 2rem; } /* As the invitation opens, the cover recedes "into" the camera — quick, so the flythrough begins immediately. */ .cover.is-entering { transition: transform 0.6s var(--e-expo), opacity 0.45s var(--e-gentle); transform: scale(1.22); opacity: 0; pointer-events: none; } /* ============================================================================= couple.css — Section 1 · The Invitation (Bride & Groom + Details + Countdown) One elegant, symmetric composition: the NAMES are the focal point; paired portraits support them; the date, live countdown and venue are woven in beneath — no separate cards. Also defines the shared .section scaffold reused by every later section. Animation identity: ELEGANT FADE + GENTLE SCALE (restrained). ========================================================================== */ /* ---- Shared section scaffold ---------------------------------------------- */ .section { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-2xl); padding-inline: var(--gutter); overflow: hidden; } /* Soft light at the top edge → dissolves the seam from the previous section. */ .section::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 150%; height: 42%; background: radial-gradient(58% 100% at 50% 0, var(--porcelain), transparent 72%); pointer-events: none; z-index: 0; } .section > * { position: relative; z-index: 1; } .section__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: var(--frame-max); margin-bottom: var(--space-lg); } .section__ornament { width: 4.5rem; color: var(--gold); } .section__ornament svg { width: 100%; height: auto; } .section__title { font-size: var(--t-h2); color: var(--ink); } .section__title .cover__amp { color: var(--gold); } /* Head entrance: the ornament draws in, the label lifts. */ .section__ornament { opacity: 0; transform: scale(0.72); transition: opacity 0.9s var(--e-soft), transform 1s var(--e-expo); } .section__head .eyebrow, .section__title { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--e-soft), transform 1s var(--e-soft); } .section__head.is-visible .section__ornament { opacity: 1; transform: none; } .section__head.is-visible .eyebrow { opacity: 1; transform: none; transition-delay: 0.18s; } .section__head.is-visible .section__title { opacity: 1; transform: none; transition-delay: 0.3s; } /* ---- The invitation composition ------------------------------------------- */ .couple { gap: var(--space-lg); } /* Names — the visual focal point. */ .couple__intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .couple__names { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.9rem, 15vw, 4.6rem); line-height: 1.0; color: var(--ink); letter-spacing: 0.005em; } .couple__names .cover__amp { color: var(--gold); font-style: italic; } .couple__parents { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.7; } /* Paired portraits — supporting, symmetric. */ .couple__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); width: 100%; max-width: 23rem; } .portrait { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .portrait__media { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px var(--r-md) var(--r-md); overflow: hidden; background: linear-gradient(168deg, var(--porcelain), var(--linen)); box-shadow: 0 26px 50px -28px var(--shadow-med); } .portrait__media::after { content: ''; position: absolute; inset: 7px; border: var(--hair) solid rgba(165, 144, 79, 0.5); border-radius: inherit; pointer-events: none; z-index: 2; } .portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .portrait__img:not([src]) { display: none; } .portrait__media:has(img[src]) .portrait__initial { display: none; } .portrait__initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 3.4rem; color: var(--gold); opacity: 0.24; } .portrait__cap { font-size: var(--t-script); color: var(--sage); line-height: 1; } /* Save the date + countdown + venue — woven, not carded. */ .couple__save { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 26rem; width: 100%; } .couple__day { font-size: var(--t-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sage-deep); } .couple__bigdate { font-family: var(--f-display); font-size: var(--t-h3); color: var(--ink); } .couple__time { font-style: italic; color: var(--ink-soft); } .countdown { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-sm); margin-block: var(--space-sm); } .countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 3.1rem; } .countdown__num { font-family: var(--f-display); font-size: clamp(1.7rem, 7.5vw, 2.2rem); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; } .countdown__lbl { font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .countdown__sep { align-self: center; width: 1px; height: 1.5rem; background: linear-gradient(var(--gold), transparent); opacity: 0.45; margin-top: 0.1rem; } .couple__venue { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--f-display); font-size: var(--t-lead); color: var(--ink); margin-top: var(--space-2xs); } .couple__pin { width: 1.05rem; height: 1.05rem; } .couple__pin svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.5; } .couple__venuesub { font-size: var(--t-body); color: var(--ink-soft); } /* ---- Animation identity: elegant fade + gentle scale ---------------------- */ .couple__intro, .couple__save { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 1s var(--e-soft), transform 1.2s var(--e-expo); } .couple__intro.is-visible, .couple__save.is-visible { opacity: 1; transform: none; } .couple__pair .portrait { opacity: 0; transform: scale(0.95) translateY(14px); transition: opacity 1s var(--e-soft), transform 1.2s var(--e-expo); } .couple__pair.is-visible .portrait:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; } .couple__pair.is-visible .portrait:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.24s; } /* A whisper of Ken-Burns settles the photo within its frame. */ .couple__pair .portrait__media img[src] { transform: scale(1.12); transition: transform 3s var(--e-expo); } .couple__pair.is-visible .portrait__media img[src] { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .couple__intro, .couple__save, .couple__pair .portrait, .portrait__media img, .section__ornament, .section__head .eyebrow, .section__title { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================================= timeline.css — Section 2 · Wedding Events A centred vertical timeline. Each event reveals individually as it scrolls in: the connector line grows, the node blooms, then the details rise — so the timeline appears to grow with the scroll. Built from config.events. Animation identity: SEQUENTIAL GROWTH (line → node → details). ========================================================================== */ .tl { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 27rem; display: flex; flex-direction: column; align-items: center; } .tl__item { display: grid; justify-items: center; width: 100%; } /* Connector line from the previous event down to this node. */ .tl__connector { width: 1px; height: var(--space-xl); background: linear-gradient(var(--gold), rgba(165, 144, 79, 0.25)); transform: scaleY(0); transform-origin: top center; } /* Gold node on the line. */ .tl__node { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--porcelain); position: relative; } .tl__node::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--sage); } .tl__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; max-width: 22rem; padding-block: var(--space-sm) var(--space-md); } .tl__time { font-size: var(--t-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--sage-deep); } .tl__title { font-family: var(--f-display); font-size: var(--t-h3); color: var(--ink); } .tl__loc { color: var(--ink); } .tl__desc { font-style: italic; color: var(--ink-soft); max-width: 21rem; } /* ---- Sequential reveal ---------------------------------------------------- */ .tl__connector { transition: transform 0.55s var(--e-soft); } .tl__item.is-visible .tl__connector { transform: scaleY(1); } .tl__node { opacity: 0; transform: scale(0); transition: opacity 0.4s var(--e-soft) 0.32s, transform 0.55s var(--e-expo) 0.32s; } .tl__item.is-visible .tl__node { opacity: 1; transform: scale(1); } .tl__body > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--e-soft), transform 0.8s var(--e-soft); } .tl__item.is-visible .tl__body > * { opacity: 1; transform: none; } .tl__item.is-visible .tl__body > *:nth-child(1) { transition-delay: 0.46s; } .tl__item.is-visible .tl__body > *:nth-child(2) { transition-delay: 0.54s; } .tl__item.is-visible .tl__body > *:nth-child(3) { transition-delay: 0.62s; } .tl__item.is-visible .tl__body > *:nth-child(4) { transition-delay: 0.70s; } .tl__item.is-visible .tl__body > *:nth-child(5) { transition-delay: 0.78s; } @media (prefers-reduced-motion: reduce) { .tl__connector, .tl__node, .tl__body > * { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================================= venue.css — Section 3 · The Venue A large premium map (original stylised art; the live Google map fades in over it in production) with a gold pin, venue details and one-tap directions. Animation identity: MAP UNVEILS VIA MASKING (a cinematic band opens). ========================================================================== */ .venue__card { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; } .venue__map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: var(--hair) solid rgba(165, 144, 79, 0.4); box-shadow: 0 34px 64px -32px var(--shadow-med); } .venue__art, .venue__iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .venue__iframe { border: 0; opacity: 0; transition: opacity 0.8s var(--e-soft); } .venue__iframe.is-loaded { opacity: 1; } /* Gold pin with a soft pulsing ring. */ .venue__pin { position: absolute; left: 50%; top: 46%; translate: -50% -100%; width: 2.4rem; height: 2.4rem; z-index: 3; filter: drop-shadow(0 5px 7px rgba(43, 46, 36, 0.3)); } .venue__pin svg { width: 100%; height: 100%; } .venue__pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; width: 1.6rem; height: 0.5rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(43,46,36,0.28), transparent); } /* Pulse ring lives on the map so it doesn't distort the pin. */ .venue__map::after { content: ''; position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; z-index: 2; animation: venue-pulse 2.8s var(--e-inout) infinite; } @keyframes venue-pulse { 0% { transform: scale(0.5); opacity: 0.6; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } .venue__info { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; } .venue__name { font-family: var(--f-display); font-size: var(--t-h3); color: var(--ink); } .venue__addr { color: var(--ink-soft); max-width: 20rem; } .venue__dir { margin-top: var(--space-xs); } /* ---- Mask reveal ---------------------------------------------------------- */ .venue__map { clip-path: inset(48% 0 48% 0 round var(--r-lg)); opacity: 0; transition: clip-path 1.1s var(--e-expo), opacity 0.5s var(--e-soft); } .venue__card.is-visible .venue__map { clip-path: inset(0 0 0 0 round var(--r-lg)); opacity: 1; } .venue__art { transform: scale(1.16); transition: transform 1.8s var(--e-expo); } .venue__card.is-visible .venue__art { transform: scale(1); } .venue__info > * { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--e-soft), transform 0.9s var(--e-soft); } .venue__card.is-visible .venue__info > * { opacity: 1; transform: none; } .venue__card.is-visible .venue__info > *:nth-child(1) { transition-delay: 0.5s; } .venue__card.is-visible .venue__info > *:nth-child(2) { transition-delay: 0.6s; } .venue__card.is-visible .venue__info > *:nth-child(3) { transition-delay: 0.72s; } @media (prefers-reduced-motion: reduce) { .venue__map { clip-path: none !important; opacity: 1 !important; } .venue__art, .venue__info > * { transition: none !important; transform: none !important; opacity: 1 !important; } .venue__map::after { animation: none; } } /* ============================================================================= rsvp.css — Section 4 · RSVP No forms, no fields — two premium buttons that each open WhatsApp with a pre-filled message (built from config in rsvp.js). Animation identity: BUTTONS SOFTLY RISE into place. ========================================================================== */ .rsvp__lead { max-width: 24rem; color: var(--ink-soft); margin-bottom: var(--space-xl); } .rsvp__actions { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 22rem; } .rsvp__yes, .rsvp__no { width: 100%; min-height: 3.5rem; font-size: 0.82rem; } .rsvp__no { color: var(--sage-deep); } /* Rise-into-place. */ .rsvp__lead { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--e-soft), transform 1s var(--e-soft); } .rsvp__lead.is-visible { opacity: 1; transform: none; } .rsvp__actions .btn { opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.8s var(--e-expo), transform 0.9s var(--e-expo); } .rsvp__actions.is-visible .btn { opacity: 1; transform: none; } .rsvp__actions.is-visible .rsvp__yes { transition-delay: 0.12s; } .rsvp__actions.is-visible .rsvp__no { transition-delay: 0.26s; } @media (prefers-reduced-motion: reduce) { .rsvp__lead, .rsvp__actions .btn { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================================= calendar.css — Section 5 · Add to Calendar One elegant card offering Google Calendar and Apple Calendar (built from config.calendar in calendar.js). Animation identity: CARD LIFTS, then options POP in sequence. ========================================================================== */ .cal__card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--porcelain), var(--ivory)); border: var(--hair) solid rgba(165, 144, 79, 0.28); box-shadow: 0 30px 60px -34px var(--shadow-med); } .cal__date { font-family: var(--f-display); font-size: var(--t-lead); color: var(--ink); } .cal__venue { font-size: var(--t-body); color: var(--ink-soft); } .cal__options { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; margin-top: var(--space-2xs); } .cal__opt { display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 3rem; padding: 0 1.1rem; border-radius: var(--r-pill); border: var(--hair) solid rgba(94, 107, 63, 0.28); background: var(--porcelain); color: var(--ink); font-family: var(--f-body); font-size: 0.92rem; letter-spacing: 0.01em; transition: transform var(--d-fast) var(--e-soft), background-color var(--d-fast) var(--e-gentle), border-color var(--d-fast); } .cal__opt:active { transform: scale(0.98); background: var(--linen); } .cal__opt-ic { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--sage-deep); flex: none; } .cal__opt-ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; } /* ---- Card lift + option pop ----------------------------------------------- */ .cal__card { opacity: 0; transform: translateY(22px) scale(0.98); transition: opacity 0.9s var(--e-expo), transform 1s var(--e-expo); } .cal__card.is-visible { opacity: 1; transform: none; } .cal__opt { opacity: 0; transform: scale(0.92); } .cal__card.is-visible .cal__opt { opacity: 1; transform: none; transition: opacity 0.5s var(--e-soft), transform 0.6s var(--e-expo), background-color var(--d-fast), border-color var(--d-fast); } .cal__card.is-visible .cal__opt:nth-child(1) { transition-delay: 0.35s; } .cal__card.is-visible .cal__opt:nth-child(2) { transition-delay: 0.45s; } .cal__card.is-visible .cal__opt:nth-child(3) { transition-delay: 0.55s; } .cal__card.is-visible .cal__opt:nth-child(4) { transition-delay: 0.65s; } @media (prefers-reduced-motion: reduce) { .cal__card, .cal__opt { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================================= closing.css — Section 6 · Closing Minimal, emotional, warm. One thank-you message. A soft golden light breathes behind the words. Ends with the couple's hashtag and a quiet credit. Animation identity: FADE INTO WARMTH (a soft light rises with the words). ========================================================================== */ .closing { padding-block: var(--space-2xl) var(--space-xl); background: radial-gradient(120% 70% at 50% 30%, #f6efe0, transparent 62%), var(--ivory); } /* Warm light that breathes behind the message. */ .closing__glow { position: absolute; left: 50%; top: 38%; translate: -50% -50%; width: 82%; aspect-ratio: 1; background: radial-gradient(circle, rgba(197,176,120,0.28), rgba(246,239,224,0.14) 44%, transparent 68%); opacity: 0; z-index: 0; transition: opacity 1.8s var(--e-soft); } .closing__glow.is-visible { opacity: 1; } .closing .botanical { opacity: 0.55; } .closing__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 30rem; } .closing__inner .section__ornament { opacity: 0; transform: scale(0.72); } .closing__msg { font-family: var(--f-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.4; color: var(--ink); text-wrap: balance; } .closing__sign { font-family: var(--f-script); font-size: var(--t-script); color: var(--sage); margin-top: var(--space-xs); } .closing__tag { font-size: var(--t-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold); margin-top: var(--space-xs); } .closing__credit { position: relative; z-index: 1; margin-top: var(--space-2xl); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; } /* ---- Fade into warmth ------------------------------------------------------ */ .closing__inner > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--e-soft), transform 1.2s var(--e-expo); } .closing__inner.is-visible .section__ornament { opacity: 1; transform: scale(1); transition: opacity 1s var(--e-soft), transform 1.1s var(--e-expo); } .closing__inner.is-visible > * { opacity: 1; transform: none; } .closing__inner.is-visible > *:nth-child(2) { transition-delay: 0.2s; } .closing__inner.is-visible > *:nth-child(3) { transition-delay: 0.36s; } .closing__inner.is-visible > *:nth-child(4) { transition-delay: 0.6s; } .closing__inner.is-visible > *:nth-child(5) { transition-delay: 0.78s; } @media (prefers-reduced-motion: reduce) { .closing__inner > *, .closing__glow { transition: none !important; transform: none !important; opacity: 1 !important; } } /* 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,#5E6B3F,#4A5531);border:1px solid rgba(94,107,63,.6);color:#FAF8F1;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} 19:T4fe7,/* init.js */ /* init — derive the monogram initials from the couple's names and format the ISO wedding date/time into elegant, readable text (client-side, per platform convention). Runs before the other modules read the DOM. */ (function () { 'use strict'; var app = document.getElementById('app'); // Monogram initials from the baked names. var bride = (app && app.getAttribute('data-bride') || '').trim(); var groom = (app && app.getAttribute('data-groom') || '').trim(); document.querySelectorAll('[data-initial]').forEach(function (el) { var who = el.getAttribute('data-initial'); var name = who === 'groom' ? groom : bride; if (name) el.textContent = name.charAt(0).toUpperCase(); }); // Date / time formatting. var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; function fmtDate(v, withDay) { var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v || ''); if (!m) return v || ''; var d = new Date(+m[1], +m[2] - 1, +m[3]); var core = (+m[3]) + ' ' + months[d.getMonth()] + ' ' + m[1]; return withDay ? days[d.getDay()] + ' · ' + core : core; } function fmtDay(v) { var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v || ''); if (!m) return ''; return days[new Date(+m[1], +m[2] - 1, +m[3]).getDay()]; } function fmtTime(v) { var m = /^(\d{1,2}):(\d{2})/.exec(v || ''); if (!m) return v || ''; var h = +m[1], ap = h >= 12 ? 'pm' : 'am'; h = h % 12 || 12; return h + ':' + m[2] + ' ' + ap; } document.querySelectorAll('[data-fmt="date"]').forEach(function (el) { el.textContent = fmtDate(el.getAttribute('data-date'), el.getAttribute('data-day') === '1'); }); document.querySelectorAll('[data-fmt="day"]').forEach(function (el) { el.textContent = fmtDay(el.getAttribute('data-date')); }); document.querySelectorAll('[data-fmt="time"]').forEach(function (el) { el.textContent = fmtTime(el.getAttribute('data-time')); }); })(); /* reveal.js */ /* ============================================================================= reveal.js — Scroll-driven reveal animations via IntersectionObserver. No scroll-event math on the main thread → no jank. Elements marked with [data-reveal] or [data-stagger] get `.is-visible` when they enter the viewport, which triggers the CSS transitions in animations.css. ========================================================================== */ (function () { 'use strict'; var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // [data-reveal]/[data-stagger] carry built-in animations (animations.css); // [data-inview] is a pure hook — it only toggles .is-visible so a section can // define its own bespoke reveal in its own stylesheet. var SEL = '[data-reveal], [data-stagger], [data-inview]'; var targets = document.querySelectorAll(SEL); function revealAll() { targets.forEach(function (el) { el.classList.add('is-visible', 'is-settled'); }); } // Reduced motion (or no IO support): show everything immediately. if (reduce || !('IntersectionObserver' in window)) { revealAll(); return; } // In the framed preview the scroller is `.stage`; on a normally-served page // the document itself scrolls (root: null). var previewRoot = document.documentElement.classList.contains('is-preview') ? document.getElementById('stage') : null; // Failsafe: if the observer is ever throttled/absent (embedded frames, some // headless engines), reveal anything currently on-screen so content can't get // stuck invisible. Queries the DOM fresh so it also covers nodes added after // load (e.g. the timeline built from config). Runs a few times to catch late // layout, then stops — below-fold items still get their normal scroll-reveal. var sweeps = 0; var failsafe = window.setInterval(function revealInView() { var vh = previewRoot ? previewRoot.clientHeight : window.innerHeight; var top = previewRoot ? previewRoot.getBoundingClientRect().top : 0; document.querySelectorAll(SEL).forEach(function (el) { if (el.classList.contains('is-visible')) return; var r = el.getBoundingClientRect(); if (r.bottom > top + 4 && r.top < top + vh - 4) el.classList.add('is-visible'); }); if (++sweeps >= 6) window.clearInterval(failsafe); }, 500); var io = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (!entry.isIntersecting) return; var el = entry.target; el.classList.add('is-visible'); // Release will-change once the longest child transition has finished. window.setTimeout(function () { el.classList.add('is-settled'); }, 1400); io.unobserve(el); }); }, { root: previewRoot, // Fire a touch before fully in view so content is settled as it arrives. rootMargin: '0px 0px -12% 0px', threshold: 0.15 }); targets.forEach(function (el) { io.observe(el); }); // Expose a hook so dynamically-added sections can register later. window.Everwhite = window.Everwhite || {}; window.Everwhite.observeReveals = function (root) { (root || document).querySelectorAll(SEL).forEach(function (el) { if (!el.classList.contains('is-visible')) io.observe(el); }); }; })(); /* nav.js */ /* ============================================================================= nav.js — Bottom tab-bar: smooth section jumps + active-state syncing. Active tab is derived from which section is in view (IntersectionObserver), so the indicator always reflects scroll position without scroll listeners. ========================================================================== */ (function () { 'use strict'; var tabs = Array.prototype.slice.call(document.querySelectorAll('.tab[data-target]')); if (!tabs.length) return; // Tap a tab → smooth-scroll its section into view. tabs.forEach(function (tab) { tab.addEventListener('click', function () { var el = document.getElementById(tab.dataset.target); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); }); function activate(id) { tabs.forEach(function (t) { t.classList.toggle('is-active', t.dataset.target === id); }); } // Track section visibility to light the matching tab. Sections register the // id they represent via a `data-section` attribute (added as they're built). var previewRoot = document.documentElement.classList.contains('is-preview') ? document.getElementById('stage') : null; if ('IntersectionObserver' in window) { var spy = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting && e.target.id) activate(nearestTab(e.target.id)); }); }, { root: previewRoot, rootMargin: '-45% 0px -45% 0px', threshold: 0 }); // Observe the cover plus any element carrying a nav id. document.querySelectorAll('[data-section], #cover').forEach(function (el) { spy.observe(el); }); window.Everwhite = window.Everwhite || {}; window.Everwhite.observeSection = function (el) { if (el) spy.observe(el); }; } // Map an in-view section id to the closest tab target (they may share ids). function nearestTab(id) { var known = tabs.map(function (t) { return t.dataset.target; }); return known.indexOf(id) !== -1 ? id : known[0]; } })(); /* intro.js */ /* ============================================================================= intro.js — The cinematic "Through the Garden Gate" sequence. A short, text-free flythrough (~2.5s): a JS-driven camera flies forward through a recycled 3D marble colonnade on an ease-in-out-quint curve while light builds to a soft bloom, then the overlay DISSOLVES DIRECTLY INTO the main invitation below — no second landing, no repeated names/monogram. The flight builds anticipation; the arrival is the invitation itself. Exposes window.Everwhite.playIntro(). main.js calls it from "Open Invitation". ========================================================================== */ (function () { 'use strict'; var GATES = 11; // gates in the recycled colonnade var SPACING = 500; // Z distance between gates (px) var SPAN = GATES * SPACING; var NEAR = 260; // Z past which a gate is behind the camera → recycle var TRAVEL = 5400; // camera dolly (px) across the flight var FLIGHT = 2000; // flight duration (ms) — deliberately brief & punchy var MOTES = 12; var MOTE_SPAN = 3200; var intro = document.getElementById('intro'); var world = document.getElementById('introWorld'); var app = document.getElementById('app'); if (!intro || !world) return; var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var gates = []; var motes = []; var raf = 0; var started = 0; var finishing = false; function clamp(v, a, b) { return v < a ? a : v > b ? b : v; } function smoothstep(a, b, x) { var t = clamp((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); } // Ease-in-out-quint: gentle acceleration, especially smooth settle into the light. function easeInOutQuint(t) { return t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2; } /* ---- Build the recycled scene ------------------------------------------- */ function buildGates() { var frag = document.createDocumentFragment(); for (var i = 0; i < GATES; i++) { var g = document.createElement('div'); g.className = 'gate'; g.innerHTML = '' + '' + '' + '' + ''; gates.push({ el: g, base: -SPACING * (i + 1), recycle: 0, jx: Math.sin(i * 2.3) * 7, jr: Math.sin(i * 1.7) * 0.5 }); frag.appendChild(g); } world.appendChild(frag); } function buildMotes() { var frag = document.createDocumentFragment(); var colours = ['#e7cfc4', '#ece1d2', '#cfd8c2']; // rose, cream, sage for (var i = 0; i < MOTES; i++) { var m = document.createElement('span'); m.className = 'mote'; var s = 14 + (i % 4) * 8; m.style.width = m.style.height = s + 'px'; m.style.margin = (-s / 2) + 'px 0 0 ' + (-s / 2) + 'px'; m.style.setProperty('--mc', colours[i % 3]); if (i % 3 === 0) m.style.filter = 'blur(1.5px)'; motes.push({ el: m, base: -((i * 271) % MOTE_SPAN), recycle: 0, x: ((i * 137) % 900) - 450, y: ((i * 211) % 700) - 350 }); frag.appendChild(m); } world.appendChild(frag); } /* ---- Per-frame placement ------------------------------------------------ */ function placeGate(gate, camZ) { var z = gate.base + camZ + gate.recycle; if (z > NEAR) { gate.recycle -= SPAN; z -= SPAN; } var op = 1; if (z > -240) op = clamp((NEAR - z) / (NEAR + 240), 0, 1); if (z < -2800) op *= clamp((z + SPAN) / 2200, 0, 1); var haze = clamp((-z - 900) / 2600, 0, 0.85); // atmospheric perspective gate.el.style.opacity = op.toFixed(3); gate.el.style.setProperty('--haze', haze.toFixed(3)); gate.el.style.transform = 'translate(-50%,-50%) translateZ(' + z.toFixed(1) + 'px) translateX(' + gate.jx + 'px) rotateZ(' + gate.jr + 'deg)'; } function placeMote(m, camZ) { var z = m.base + camZ + m.recycle; if (z > NEAR) { m.recycle -= MOTE_SPAN; z -= MOTE_SPAN; } var op = 0.9; if (z > -160) op = clamp((NEAR - z) / (NEAR + 160), 0, 0.9); if (z < -1800) op *= clamp((z + MOTE_SPAN) / 1400, 0, 1); m.el.style.opacity = op.toFixed(3); m.el.style.transform = 'translate3d(' + m.x + 'px,' + m.y + 'px,' + z.toFixed(1) + 'px)'; } function sway(ms) { var s = ms / 1000; world.style.transform = 'translate3d(' + (Math.sin(s * 0.9) * 10).toFixed(2) + 'px,' + (Math.cos(s * 0.6) * 6).toFixed(2) + 'px,0) rotateZ(' + (Math.sin(s * 0.5) * 0.5).toFixed(3) + 'deg)'; } /* ---- The loop: fly → bloom → dissolve into the invitation ---------------- */ function frame(t) { if (!started) started = t; var p = clamp((t - started) / FLIGHT, 0, 1); var camZ = easeInOutQuint(p) * TRAVEL; intro.style.setProperty('--dawn', (0.15 + smoothstep(0, 0.85, p) * 0.85).toFixed(3)); intro.style.setProperty('--bloom', smoothstep(0.42, 1.0, p).toFixed(3)); // → soft white-out at arrival sway(t - started); for (var i = 0; i < gates.length; i++) placeGate(gates[i], camZ); for (var j = 0; j < motes.length; j++) placeMote(motes[j], camZ); if (p < 1) raf = requestAnimationFrame(frame); else dissolve(); } /* Bloom is at full white here, so retiring the camera is invisible; the overlay simply fades to reveal the main invitation, which animates itself in — one continuous motion, no pause, no restart. */ function dissolve() { if (finishing) return; finishing = true; cancelAnimationFrame(raf); app.classList.add('is-open'); // reveal the persistent chrome var cover = document.getElementById('cover'); if (cover) cover.style.display = 'none'; // retire the single landing var target = document.getElementById('couple'); if (target) target.scrollIntoView({ block: 'start' }); intro.classList.add('is-done'); // fade the overlay into the invitation window.setTimeout(function () { intro.style.visibility = 'hidden'; intro.classList.remove('is-playing'); world.style.willChange = 'auto'; gates.forEach(function (g) { g.el.style.willChange = 'auto'; }); motes.forEach(function (m) { m.el.style.willChange = 'auto'; }); }, 850); } /* ---- Entry -------------------------------------------------------------- */ function play() { var cover = document.getElementById('cover'); if (cover) cover.classList.add('is-entering'); intro.classList.add('is-playing'); if (reduce) { // reduced motion → immediate graceful dissolve intro.style.setProperty('--bloom', '1'); window.setTimeout(dissolve, 250); return; } buildGates(); buildMotes(); raf = requestAnimationFrame(frame); // camera starts on the very next frame } window.Everwhite = window.Everwhite || {}; window.Everwhite.playIntro = play; /* Debug/QA: render one static flight frame at progress q (0..1). Harmless. */ window.Everwhite.__seekIntro = function (q) { if (!gates.length) { buildGates(); buildMotes(); } intro.classList.add('is-playing'); var camZ = easeInOutQuint(q) * TRAVEL; intro.style.setProperty('--dawn', (0.15 + smoothstep(0, 0.85, q) * 0.85).toFixed(3)); intro.style.setProperty('--bloom', smoothstep(0.42, 1.0, q).toFixed(3)); sway(800); for (var i = 0; i < gates.length; i++) placeGate(gates[i], camZ); for (var j = 0; j < motes.length; j++) placeMote(motes[j], camZ); }; })(); /* countdown.js */ /* countdown — live countdown built from the baked wedding date/time (data-*). */ (function () { 'use strict'; var root = document.getElementById('countdown'); if (!root) return; var date = (root.getAttribute('data-date') || '').trim(); var time = (root.getAttribute('data-time') || '').trim(); var d = /^(\d{4})-(\d{2})-(\d{2})/.exec(date); if (!d) return; var tm = /^(\d{1,2}):(\d{2})/.exec(time) || [null, '0', '0']; var target = new Date(+d[1], +d[2] - 1, +d[3], +tm[1], +tm[2], 0).getTime(); var els = { days: root.querySelector('[data-cd="days"]'), hours: root.querySelector('[data-cd="hours"]'), minutes: root.querySelector('[data-cd="minutes"]'), seconds: root.querySelector('[data-cd="seconds"]') }; var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; function pad(n) { return (n < 10 ? '0' : '') + n; } function set(el, n) { if (!el) return; var s = pad(n); if (el.textContent === s) return; el.textContent = s; if (!reduce && el.animate) { el.animate( [{ transform: 'translateY(-3px) scale(1.06)', opacity: 0.55 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(0.16,1,0.3,1)' } ); } } function tick() { var diff = target - Date.now(); if (diff <= 0) { set(els.days, 0); set(els.hours, 0); set(els.minutes, 0); set(els.seconds, 0); window.clearInterval(timer); return; } var sec = Math.floor(diff / 1000); set(els.days, Math.floor(sec / 86400)); set(els.hours, Math.floor((sec % 86400) / 3600)); set(els.minutes, Math.floor((sec % 3600) / 60)); set(els.seconds, sec % 60); } tick(); var timer = window.setInterval(tick, 1000); })(); /* calendar.js */ /* calendar — Google Calendar + Apple (.ics) links, built from baked details. */ (function () { 'use strict'; var card = document.getElementById('calCard'); if (!card) return; var date = (card.getAttribute('data-date') || '').trim(); // YYYY-MM-DD var time = (card.getAttribute('data-time') || '16:00').trim(); // HH:MM var title = card.getAttribute('data-title') || 'Our Wedding'; var location = card.getAttribute('data-venue') || ''; var details = card.getAttribute('data-details') || ''; var d = /^(\d{4})-(\d{2})-(\d{2})/.exec(date); if (!d) return; var tm = /^(\d{1,2}):(\d{2})/.exec(time) || [null, '16', '00']; var pad = function (n) { return (n < 10 ? '0' : '') + n; }; var startH = +tm[1], endH = (startH + 5) % 24; // ~5h celebration var stamp = d[1] + d[2] + d[3] + 'T' + pad(startH) + tm[2] + '00'; var stampEnd = d[1] + d[2] + d[3] + 'T' + pad(endH) + tm[2] + '00'; var enc = encodeURIComponent; var g = document.getElementById('calGoogle'); if (g) { g.href = 'https://calendar.google.com/calendar/render?action=TEMPLATE' + '&text=' + enc(title) + '&dates=' + stamp + '/' + stampEnd + '&details=' + enc(details) + '&location=' + enc(location); } function fold(s) { return String(s || '').replace(/\\/g, '\\\\').replace(/,/g, '\\,').replace(/;/g, '\\;').replace(/\n/g, '\\n'); } var ics = [ 'BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//WeddingInWhites//Everwhite//EN', 'CALSCALE:GREGORIAN', 'BEGIN:VEVENT', 'UID:' + stamp + '-everwhite@weddinginwhites', 'DTSTAMP:' + stamp, 'DTSTART:' + stamp, 'DTEND:' + stampEnd, 'SUMMARY:' + fold(title), 'DESCRIPTION:' + fold(details), 'LOCATION:' + fold(location), 'END:VEVENT', 'END:VCALENDAR' ].join('\r\n'); var apple = document.getElementById('calApple'); if (apple) apple.href = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(ics); })(); /* main.js */ /* ============================================================================= main.js — App orchestration. Boots the experience and wires the cover's "Open Invitation" action. Individual concerns live in their own modules (reveal / nav / audio / intro / countdown / rsvp / calendar). ========================================================================== */ (function () { 'use strict'; var app = document.getElementById('app'); var openBtn = document.getElementById('openInvitation'); window.Everwhite = window.Everwhite || {}; /** * Reveal the persistent chrome (tab-bar + music toggle) and hand off to the * cinematic intro if it's mounted, otherwise simply scroll into the story. */ function openInvitation() { if (app.classList.contains('is-open')) return; app.classList.add('is-open'); if (typeof window.Everwhite.playIntro === 'function') { window.Everwhite.playIntro(); } else { var main = document.getElementById('main'); if (main) main.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } if (openBtn) openBtn.addEventListener('click', openInvitation); window.Everwhite.openInvitation = openInvitation; })(); 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":"Everwhite"}],["$","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":{"hashtag":"#AvaAndLiam","bride_name":"Ava","event_list":[{"name":"Mehndi","time":"18:00"},{"name":"Ceremony","time":"16:30"},{"name":"Reception","time":"20:00"}],"groom_name":"Liam","hero_image":"","venue_name":"The Rosewood Estate","event1_name":"Engagement","event1_time":"Friday · 6:00 in the evening","event2_name":"Wedding Ceremony","event2_time":"Saturday · 4:30 in the afternoon","event3_name":"Reception","event3_time":"Saturday · 7:00 in the evening","rsvp_handle":"ava-liam","story_image":"","event1_venue":"The Orangery, Rosewood Estate","event2_venue":"The Arbour, Rosewood Estate","event3_venue":"Grand Hall, Rosewood Estate","family_bride":"Beloved daughter of Mr. & Mrs. Whitmore","family_groom":"Beloved son of Mr. & Mrs. Bexley","rsvp_enabled":true,"wedding_date":"2027-08-09","wedding_time":"16:30","venue_address":"Silverado Trail, Napa Valley, California","venue_map_url":"https://maps.google.com","couple_display_name":"Ava & Liam"},"allowJs":true}]}]}],"$L1a"]}] 11:null 15:[["$","title","0",{"children":"Everwhite — 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",{}]]

{{bride_name}} & {{groom_name}}

{{name}}

{{venue_name}}