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

A celebration of love

You Are Invited

To celebrate the wedding of

An invitation created with love

Together with their families

Joyfully invite you to celebrate their wedding

When {{wedding_date}} {{#if wedding_time}} {{wedding_time}} {{/if}}

Where {{venue_name}} {{#if venue_address}} {{venue_address}} {{/if}}

Kindly RSVP Discover Our Story

Begin the journey

Counting every beautiful moment

Until We Say “I Do”

Our most treasured chapter begins on {{wedding_date}} .

Two hearts One beautiful story

How it all began

Our Love Story

The celebration awaits

Wedding Events

Join us for heartfelt vows, joyful moments and memories we will cherish forever.

Our wedding venue

Date {{wedding_date}}

Time {{wedding_time}}

Dress code {{dress_code}}

{{#if venue_map_url}} View Location {{/if}}

Celebration

Time {{time}}

Venue {{venue}}

Memories held close

Our Gallery

A collection of little moments that brought us to this beautiful beginning.

With the blessings of

Our Families

Two families, now joined by love, joy and a lifetime of shared celebrations.

The bride’s family

The groom’s family

18:Td9e0,:root { --wiwlg-white: #ffffff; --wiwlg-soft-white: #f8fcff; --wiwlg-baby-blue: #cbe9f7; --wiwlg-powder-blue: #a9d8ed; --wiwlg-sky-blue: #74b9d8; --wiwlg-deep-blue: #315e73; --wiwlg-ink: #173442; --wiwlg-muted: #5d7785; --wiwlg-gold: #c8ae69; --wiwlg-section-width: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { margin: 0; overflow-x: hidden; background: var(--wiwlg-soft-white); color: var(--wiwlg-ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.wiwlg-entry-locked { overflow: hidden; } button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; } .wiwlg-experience { position: relative; min-height: 100svh; } /* ========================================================= SHARED TYPOGRAPHY AND LAYOUT ========================================================= */ .wiwlg-section { position: relative; padding: clamp(88px, 11vw, 150px) 24px; overflow: hidden; isolation: isolate; } .wiwlg-section-inner { position: relative; z-index: 2; width: min(var(--wiwlg-section-width), 100%); margin: 0 auto; } .wiwlg-section-heading { width: min(720px, 100%); margin: 0 auto clamp(44px, 7vw, 76px); text-align: center; } .wiwlg-kicker, .wiwlg-card-kicker { margin: 0 0 14px; color: #4d839a; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; } .wiwlg-section-heading h2, .wiwlg-story-card h2, .wiwlg-rsvp-heading h2 { margin: 0; color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 6vw, 5.6rem); font-weight: 400; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; } .wiwlg-section-heading > p:last-child, .wiwlg-rsvp-heading > p:last-child { width: min(620px, 100%); margin: 24px auto 0; color: var(--wiwlg-muted); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.8; } .wiwlg-section-orb, .wiwlg-footer-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(10px); } .wiwlg-section-orb--left { top: 10%; left: -160px; width: 430px; height: 430px; background: rgba(107, 199, 238, 0.26); } .wiwlg-section-orb--right { right: -180px; bottom: 8%; width: 480px; height: 480px; background: rgba(103, 190, 229, 0.24); } /* ========================================================= SHARED 99% VISUAL-INTENSITY LIQUID GLASS ========================================================= */ .wiwlg-entry-card, .wiwlg-nav, .wiwlg-hero-card, .wiwlg-countdown-card, .wiwlg-story-card, .wiwlg-venue-card, .wiwlg-event-card, .wiwlg-family-card, .wiwlg-rsvp-form, .wiwlg-music-toggle { border: 1px solid rgba(255, 255, 255, 0.94); background: radial-gradient( ellipse at 9% -14%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.13) 30%, transparent 53% ), radial-gradient( ellipse at 103% 112%, rgba(67, 181, 229, 0.21), rgba(105, 202, 240, 0.04) 30%, transparent 50% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.034) 46%, rgba(80, 181, 225, 0.06) ); box-shadow: 0 38px 105px rgba(22, 70, 94, 0.22), 0 13px 36px rgba(42, 107, 138, 0.13), inset 0 2px 0 rgba(255, 255, 255, 1), inset 2px 0 0 rgba(255, 255, 255, 0.66), inset -2px 0 0 rgba(67, 164, 205, 0.15), inset 0 -2px 0 rgba(62, 158, 200, 0.22), inset 0 0 54px rgba(255, 255, 255, 0.07); backdrop-filter: blur(24px) saturate(225%) contrast(114%) brightness(1.07); -webkit-backdrop-filter: blur(24px) saturate(225%) contrast(114%) brightness(1.07); } /* ========================================================= OPENING INVITATION ========================================================= */ .wiwlg-entry { position: fixed; inset: 0; z-index: 2000; min-height: 100svh; padding: 28px 20px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 8% 30%, rgba(99, 194, 234, 0.62), rgba(182, 229, 248, 0.27) 28%, transparent 52% ), radial-gradient( circle at 92% 72%, rgba(103, 195, 234, 0.58), rgba(196, 232, 247, 0.26) 28%, transparent 51% ), linear-gradient( 145deg, #f8fdff, #cdebf7 48%, #fafdff ); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), visibility 900ms ease, transform 1050ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms ease; } .wiwlg-entry[hidden] { display: none; } .wiwlg-entry-image { position: absolute; inset: -4%; z-index: -6; background: linear-gradient( 135deg, rgba(192, 231, 247, 0.15), rgba(255, 255, 255, 0.04) ), var(--wiwlg-entry-image), linear-gradient(145deg, #ccebf7, #ffffff); background-position: center; background-size: cover; opacity: 0.44; filter: saturate(0.86) brightness(1.06); transform: scale(1.05); } .wiwlg-entry-overlay { position: absolute; inset: 0; z-index: -5; background: linear-gradient( 90deg, rgba(244, 252, 255, 0.54), rgba(225, 244, 252, 0.13), rgba(244, 252, 255, 0.54) ), radial-gradient( circle at center, transparent, rgba(238, 249, 253, 0.34) ); } .wiwlg-entry-card { position: relative; z-index: 4; width: min(640px, 100%); padding: clamp(46px, 7vw, 78px) clamp(24px, 7vw, 74px); display: flex; flex-direction: column; align-items: center; overflow: hidden; isolation: isolate; border-radius: clamp(36px, 6vw, 64px); text-align: center; animation: wiwlg-entry-arrive 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; } .wiwlg-entry-card::before, .wiwlg-hero-card::before { content: ""; position: absolute; z-index: 1; top: -55%; left: -35%; width: 170%; height: 126%; border-radius: 46%; background: radial-gradient( ellipse at 18% 27%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.3) 15%, rgba(255, 255, 255, 0.06) 30%, transparent 48% ), radial-gradient( ellipse at 74% 65%, rgba(68, 183, 230, 0.28), rgba(109, 204, 242, 0.07) 27%, transparent 49% ); filter: blur(8px); mix-blend-mode: screen; animation: wiwlg-liquid-reflection 9s ease-in-out infinite alternate; pointer-events: none; } .wiwlg-entry-card::after, .wiwlg-hero-card::after { content: ""; position: absolute; z-index: 2; inset: 2px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: inherit; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.24), transparent 23%, transparent 70%, rgba(63, 170, 215, 0.08) ); box-shadow: inset 0 13px 34px rgba(255, 255, 255, 0.05), inset 0 -13px 30px rgba(63, 170, 215, 0.04); pointer-events: none; } .wiwlg-entry-card > *, .wiwlg-hero-card > * { position: relative; z-index: 4; } .wiwlg-entry-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 8vw, 6.8rem); font-weight: 400; line-height: 0.94; letter-spacing: -0.05em; text-wrap: balance; background: linear-gradient( 110deg, #153543 3%, #5a99b5 33%, #173947 53%, #77b8d1 72%, #153543 94% ); background-size: 230% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: wiwlg-name-sheen 7s linear infinite; } .wiwlg-divider { width: min(240px, 72%); margin: 28px auto 23px; display: flex; align-items: center; gap: 12px; } .wiwlg-divider span { height: 1px; flex: 1; background: linear-gradient( 90deg, transparent, rgba(57, 141, 177, 0.66) ); } .wiwlg-divider span:last-child { transform: rotate(180deg); } .wiwlg-divider i { width: 8px; height: 8px; border: 1px solid rgba(49, 130, 165, 0.58); background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 12px rgba(38, 105, 135, 0.16); transform: rotate(45deg); } .wiwlg-entry-intro { margin: 0 0 8px; color: var(--wiwlg-muted); font-family: Georgia, "Times New Roman", serif; font-style: italic; } .wiwlg-entry-couple { margin: 0 0 34px; color: var(--wiwlg-deep-blue); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.35; } .wiwlg-entry-status { min-height: 1.4em; margin: 14px 0 0; color: var(--wiwlg-deep-blue); font-size: 0.78rem; } .wiwlg-entry-footer { position: absolute; z-index: 21; right: 20px; bottom: 18px; left: 20px; margin: 0; color: rgba(49, 94, 115, 0.66); font-family: Georgia, "Times New Roman", serif; font-size: 0.76rem; font-style: italic; text-align: center; } /* Long-press control */ .wiwlg-hold-button { --wiwlg-hold-scale: 1; width: min(250px, 100%); padding: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--wiwlg-ink); cursor: pointer; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transform: scale(var(--wiwlg-hold-scale)); transition: transform 240ms ease, opacity 240ms ease; } .wiwlg-hold-button:hover { --wiwlg-hold-scale: 1.025; } .wiwlg-hold-button:active, .wiwlg-hold-button.wiwlg-is-holding { --wiwlg-hold-scale: 0.98; } .wiwlg-hold-control { position: relative; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; filter: drop-shadow(0 18px 34px rgba(35, 98, 128, 0.22)); } .wiwlg-hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); } .wiwlg-hold-track, .wiwlg-hold-progress { fill: none; stroke-width: 3; } .wiwlg-hold-track { stroke: rgba(72, 151, 184, 0.18); } .wiwlg-hold-progress { stroke: rgba(47, 130, 166, 0.94); stroke-linecap: round; stroke-dasharray: 301.593; stroke-dashoffset: 301.593; filter: drop-shadow(0 0 6px rgba(85, 181, 220, 0.5)); } .wiwlg-hold-core { position: relative; width: 88px; height: 88px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 50%; background: radial-gradient( circle at 30% 18%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 38%, transparent 57% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.15), rgba(91, 188, 228, 0.08) ); box-shadow: 0 18px 38px rgba(35, 94, 120, 0.2), inset 0 2px 0 rgba(255, 255, 255, 1), inset 2px 0 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(65, 164, 207, 0.23); backdrop-filter: blur(20px) saturate(225%); -webkit-backdrop-filter: blur(20px) saturate(225%); } .wiwlg-hold-core::before { content: ""; position: absolute; top: -28%; left: -68%; width: 75%; height: 160%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.76), transparent ); transform: rotate(24deg); animation: wiwlg-hold-shimmer 4.5s ease-in-out infinite; } .wiwlg-hold-icon { position: relative; z-index: 2; width: 27px; height: 27px; border-right: 2px solid var(--wiwlg-deep-blue); border-bottom: 2px solid var(--wiwlg-deep-blue); transform: rotate(45deg) translate(-4px, -4px); transition: width 300ms ease, height 300ms ease, transform 300ms ease; } .wiwlg-hold-button.wiwlg-is-holding .wiwlg-hold-core { box-shadow: 0 20px 44px rgba(30, 91, 119, 0.27), 0 0 0 8px rgba(255, 255, 255, 0.08), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 rgba(64, 162, 204, 0.27); } .wiwlg-hold-button.wiwlg-is-complete .wiwlg-hold-icon { width: 24px; height: 13px; transform: rotate(45deg) translate(-2px, -2px); } .wiwlg-hold-label { color: var(--wiwlg-deep-blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .wiwlg-hold-instruction { color: var(--wiwlg-muted); font-size: 0.76rem; line-height: 1.5; } /* ========================================================= LILIES ========================================================= */ .wiwlg-lily { position: absolute; z-index: -1; aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 28px 46px rgba(54, 124, 155, 0.2)); } .wiwlg-lily--entry-left, .wiwlg-lily--entry-right { width: clamp(230px, 30vw, 470px); opacity: 0.7; } .wiwlg-lily--entry-left { left: clamp(-170px, -9vw, -65px); bottom: clamp(-140px, -8vw, -60px); transform: rotate(-22deg); animation: wiwlg-lily-left 8s ease-in-out infinite alternate; } .wiwlg-lily--entry-right { top: clamp(-130px, -6vw, -30px); right: clamp(-180px, -10vw, -70px); transform: rotate(155deg); animation: wiwlg-lily-right 9s ease-in-out infinite alternate; } .wiwlg-lily--hero-left, .wiwlg-lily--hero-right { width: clamp(190px, 25vw, 370px); opacity: 0.76; } .wiwlg-lily--hero-left { left: clamp(-115px, -7vw, -40px); bottom: clamp(-90px, -6vw, -35px); transform: rotate(-18deg); } .wiwlg-lily--hero-right { top: 10%; right: clamp(-120px, -8vw, -45px); transform: rotate(158deg); } .wiwlg-lily-petal { position: absolute; top: 22%; left: 40%; width: 22%; height: 48%; border: 1px solid rgba(99, 182, 217, 0.44); border-radius: 100% 16% 100% 20%; background: linear-gradient( 150deg, rgba(255, 255, 255, 1), rgba(208, 239, 251, 0.88) 57%, rgba(130, 199, 229, 0.46) ); box-shadow: inset 12px 5px 22px rgba(255, 255, 255, 0.98), inset -7px -9px 20px rgba(77, 163, 199, 0.2); transform-origin: 50% 82%; } .wiwlg-lily-petal--one { transform: rotate(0deg) translateY(-20%); } .wiwlg-lily-petal--two { transform: rotate(72deg) translateY(-20%); } .wiwlg-lily-petal--three { transform: rotate(144deg) translateY(-20%); } .wiwlg-lily-petal--four { transform: rotate(216deg) translateY(-20%); } .wiwlg-lily-petal--five { transform: rotate(288deg) translateY(-20%); } .wiwlg-lily-center { position: absolute; top: 43%; left: 45%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, #fff9dd, #d7bb70 62%, #9d8244 ); box-shadow: 0 0 24px rgba(235, 215, 148, 0.58); } .wiwlg-entry-orb { position: absolute; z-index: -2; border-radius: 50%; background: radial-gradient( circle at 30% 25%, rgba(255, 255, 255, 0.95), rgba(120, 205, 240, 0.4) 42%, transparent 74% ); filter: blur(7px); pointer-events: none; } .wiwlg-entry-orb--one { top: -11%; left: -7%; width: clamp(300px, 42vw, 720px); aspect-ratio: 1; animation: wiwlg-orb-float 12s ease-in-out infinite alternate; } .wiwlg-entry-orb--two { right: -12%; bottom: -17%; width: clamp(330px, 46vw, 760px); aspect-ratio: 1; animation: wiwlg-orb-float-reverse 14s ease-in-out infinite alternate; } /* ========================================================= SITE OPENING ========================================================= */ .wiwlg-site { min-height: 100svh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1000ms ease, visibility 1000ms ease; } .wiwlg-site-main { opacity: 0; transform: scale(1.025); filter: blur(9px); transition: opacity 1100ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1100ms ease; } .wiwlg-experience.wiwlg-is-open .wiwlg-entry { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.06); filter: blur(12px); } .wiwlg-experience.wiwlg-is-open .wiwlg-site { opacity: 1; visibility: visible; pointer-events: auto; } .wiwlg-experience.wiwlg-is-open .wiwlg-site-main { opacity: 1; transform: scale(1); filter: blur(0); } /* ========================================================= FIXED LIQUID-GLASS NAVIGATION ========================================================= */ .wiwlg-header { position: fixed; top: 0; right: 0; left: 0; z-index: 1000; width: 100%; padding: 18px clamp(18px, 4vw, 64px); pointer-events: none; } .wiwlg-nav { position: relative; width: min(1180px, 100%); min-height: 66px; margin: 0 auto; padding: 10px 12px 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; isolation: isolate; border-radius: 999px; pointer-events: auto; transition: width 350ms ease, min-height 350ms ease, background 350ms ease, box-shadow 350ms ease, backdrop-filter 350ms ease, -webkit-backdrop-filter 350ms ease; } .wiwlg-nav::before { content: ""; position: absolute; z-index: 1; top: -170%; left: -38%; width: 46%; height: 450%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent ); filter: blur(3px); mix-blend-mode: screen; transform: rotate(20deg); animation: wiwlg-nav-shimmer 8.5s ease-in-out infinite; pointer-events: none; } .wiwlg-nav::after { content: ""; position: absolute; z-index: 2; inset: 2px; border: 1px solid rgba(255, 255, 255, 0.52); border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.18), transparent 34%, transparent 68%, rgba(67, 170, 214, 0.07) ); pointer-events: none; } .wiwlg-header.wiwlg-is-scrolled .wiwlg-nav { width: min(1080px, 100%); min-height: 60px; background: radial-gradient( ellipse at 12% -40%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.16) 32%, transparent 56% ), radial-gradient( ellipse at 94% 150%, rgba(65, 177, 225, 0.28), transparent 50% ), linear-gradient( 135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.055) 48%, rgba(79, 181, 224, 0.09) ); box-shadow: 0 28px 78px rgba(20, 66, 89, 0.3), 0 10px 28px rgba(34, 96, 126, 0.17), inset 0 2px 0 rgba(255, 255, 255, 1), inset 2px 0 0 rgba(255, 255, 255, 0.76), inset 0 -2px 0 rgba(62, 158, 200, 0.28); backdrop-filter: blur(32px) saturate(240%) contrast(117%) brightness(1.08); -webkit-backdrop-filter: blur(32px) saturate(240%) contrast(117%) brightness(1.08); } .wiwlg-brand { position: relative; z-index: 4; min-width: 0; display: inline-flex; align-items: center; gap: 11px; color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; } .wiwlg-brand-name { min-width: 0; } .wiwlg-brand-flower, .wiwlg-family-flower { position: relative; width: 28px; height: 28px; flex: 0 0 auto; } .wiwlg-brand-flower span, .wiwlg-family-flower span { position: absolute; width: 12px; height: 19px; border: 1px solid rgba(87, 158, 190, 0.45); border-radius: 100% 10% 100% 10%; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(171, 222, 244, 0.76) ); box-shadow: inset 2px 2px 7px rgba(255, 255, 255, 1), inset -2px -2px 6px rgba(87, 168, 203, 0.16); } .wiwlg-brand-flower span:nth-child(1), .wiwlg-family-flower span:nth-child(1) { top: 0; left: 8px; } .wiwlg-brand-flower span:nth-child(2), .wiwlg-family-flower span:nth-child(2) { top: 7px; left: 1px; transform: rotate(-55deg); } .wiwlg-brand-flower span:nth-child(3), .wiwlg-family-flower span:nth-child(3) { top: 7px; right: 1px; transform: rotate(55deg); } .wiwlg-nav-links { position: relative; z-index: 4; display: flex; align-items: center; gap: clamp(14px, 2.5vw, 34px); } .wiwlg-nav-links a { color: var(--wiwlg-deep-blue); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: color 220ms ease, transform 220ms ease; } .wiwlg-nav-links a:hover { color: var(--wiwlg-ink); transform: translateY(-2px); } .wiwlg-nav-rsvp { padding: 11px 20px; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 999px; background: radial-gradient( ellipse at 20% -20%, rgba(255, 255, 255, 0.7), transparent 56% ), rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 10px 25px rgba(34, 94, 122, 0.13); } /* ========================================================= HERO ========================================================= */ .wiwlg-hero { --wiwlg-pointer-x: 0px; --wiwlg-pointer-y: 0px; position: relative; min-height: 100svh; padding: 132px 24px 48px; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 4% 38%, rgba(63, 175, 224, 0.76), rgba(123, 205, 239, 0.43) 19%, transparent 45% ), radial-gradient( circle at 95% 73%, rgba(69, 177, 225, 0.7), rgba(144, 213, 241, 0.4) 24%, transparent 52% ), linear-gradient( 145deg, #e5f6fd, #add9ed 44%, #f8fdff ); } .wiwlg-hero-image { position: absolute; inset: -3%; z-index: -5; background: linear-gradient( 135deg, rgba(147, 209, 237, 0.04), rgba(255, 255, 255, 0.015) ), var(--wiwlg-hero-image), linear-gradient(145deg, #c7e9f7, #ffffff); background-position: center; background-size: cover; opacity: 0.9; filter: saturate(1.06) contrast(1.1) brightness(1.01); transform: scale(1.06); } .wiwlg-hero-overlay { position: absolute; inset: 0; z-index: -4; background: linear-gradient( 90deg, rgba(245, 252, 255, 0.12), rgba(225, 244, 252, 0.02), rgba(245, 252, 255, 0.14) ), linear-gradient( 180deg, rgba(255, 255, 255, 0.05), rgba(89, 178, 218, 0.09) ); } .wiwlg-hero-content { width: min(960px, 100%); display: grid; justify-items: center; gap: 26px; } .wiwlg-hero-card { position: relative; width: min(820px, 100%); padding: clamp(42px, 6vw, 76px) clamp(24px, 7vw, 84px); overflow: hidden; isolation: isolate; border-radius: clamp(30px, 5vw, 54px); text-align: center; } .wiwlg-name-wrap { position: relative; isolation: isolate; } .wiwlg-name-glow { position: absolute; inset: 10% 3%; z-index: -1; border-radius: 50%; background: radial-gradient( circle, rgba(87, 190, 233, 0.5), rgba(132, 211, 243, 0.15) 52%, transparent 76% ); filter: blur(46px); animation: wiwlg-name-glow 4.8s ease-in-out infinite alternate; } .wiwlg-couple-name { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(8px, 2vw, 24px); font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 8.5vw, 7.4rem); font-weight: 400; line-height: 0.88; letter-spacing: -0.055em; text-wrap: balance; } .wiwlg-person-name { display: inline-block; background: linear-gradient( 112deg, #112c39 3%, #397993 27%, #123542 47%, #78b7d0 68%, #173744 92% ); background-size: 240% auto; background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 13px 25px rgba(30, 78, 100, 0.22)); animation: wiwlg-name-sheen 6.2s linear infinite; } .wiwlg-ampersand { color: #5798b4; font-family: Georgia, "Times New Roman", serif; font-size: 0.48em; font-style: italic; text-shadow: 0 8px 22px rgba(50, 121, 153, 0.25); } .wiwlg-hero-intro { margin: 0 auto 30px; color: var(--wiwlg-muted); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 2vw, 1.22rem); font-style: italic; line-height: 1.65; } .wiwlg-hero-details { margin: 0 auto 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(18px, 4vw, 38px); } .wiwlg-hero-detail { min-width: 0; padding: 13px 15px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 22px; background: radial-gradient( ellipse at 20% -15%, rgba(255, 255, 255, 0.64), transparent 55% ), rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 30px rgba(37, 99, 127, 0.08); backdrop-filter: blur(18px) saturate(210%); -webkit-backdrop-filter: blur(18px) saturate(210%); } .wiwlg-detail-label { color: #4f8096; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .wiwlg-detail-value { color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 2.5vw, 1.45rem); line-height: 1.35; } .wiwlg-detail-subtext { color: var(--wiwlg-muted); font-size: 0.84rem; line-height: 1.5; } .wiwlg-detail-separator { width: 1px; background: linear-gradient( transparent, rgba(49, 131, 166, 0.5), transparent ); } .wiwlg-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; } .wiwlg-button { min-height: 50px; padding: 13px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid transparent; border-radius: 999px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease; } .wiwlg-button:hover { transform: translateY(-3px); } .wiwlg-button--primary { color: #ffffff; border-color: rgba(255, 255, 255, 0.38); background: radial-gradient( ellipse at 28% -20%, rgba(255, 255, 255, 0.3), transparent 48% ), linear-gradient( 135deg, #28566b, #579bb8 ); box-shadow: 0 18px 42px rgba(32, 79, 101, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.44); } .wiwlg-button--glass { color: var(--wiwlg-deep-blue); border-color: rgba(255, 255, 255, 0.84); background: radial-gradient( ellipse at 20% -20%, rgba(255, 255, 255, 0.68), transparent 60% ), rgba(255, 255, 255, 0.08); box-shadow: 0 15px 34px rgba(28, 83, 109, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px) saturate(220%); -webkit-backdrop-filter: blur(18px) saturate(220%); } .wiwlg-hashtag { margin: 25px 0 0; color: #457d95; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; } .wiwlg-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--wiwlg-deep-blue); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-decoration: none; text-transform: uppercase; } .wiwlg-scroll-line { position: relative; width: 1px; height: 42px; overflow: hidden; background: rgba(47, 119, 151, 0.3); } .wiwlg-scroll-line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 70%; background: var(--wiwlg-deep-blue); animation: wiwlg-scroll-drop 2.2s ease-in-out infinite; } .wiwlg-hero-orb { position: absolute; z-index: -2; border-radius: 50%; background: radial-gradient( circle at 28% 24%, rgba(255, 255, 255, 0.98), rgba(121, 206, 242, 0.48) 35%, rgba(54, 154, 198, 0.17) 65%, transparent 75% ); filter: blur(7px); opacity: 0.84; pointer-events: none; will-change: transform; } .wiwlg-hero-orb--one { top: 12%; left: 7%; width: clamp(220px, 31vw, 520px); aspect-ratio: 1; transform: translate( calc(var(--wiwlg-pointer-x) * -0.3), calc(var(--wiwlg-pointer-y) * -0.3) ); } .wiwlg-hero-orb--two { right: -8%; bottom: -10%; width: clamp(300px, 42vw, 700px); aspect-ratio: 1; transform: translate( calc(var(--wiwlg-pointer-x) * 0.42), calc(var(--wiwlg-pointer-y) * 0.42) ); } .wiwlg-hero-orb--three { top: 22%; right: 18%; width: clamp(120px, 16vw, 260px); aspect-ratio: 1; opacity: 0.6; transform: translate( calc(var(--wiwlg-pointer-x) * 0.2), calc(var(--wiwlg-pointer-y) * 0.2) ); } .wiwlg-floating-petal { position: absolute; z-index: -1; width: 18px; height: 30px; border: 1px solid rgba(109, 189, 224, 0.42); border-radius: 90% 10% 90% 20%; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.97), rgba(151, 211, 238, 0.7) ); box-shadow: inset 0 0 9px rgba(255, 255, 255, 1), 0 8px 21px rgba(47, 116, 147, 0.15); opacity: 0; } .wiwlg-floating-petal--one { left: 12%; animation: wiwlg-petal-drift 12s linear 0s infinite; } .wiwlg-floating-petal--two { left: 29%; animation: wiwlg-petal-drift 15s linear 2.5s infinite; } .wiwlg-floating-petal--three { left: 54%; animation: wiwlg-petal-drift 13s linear 5s infinite; } .wiwlg-floating-petal--four { left: 74%; animation: wiwlg-petal-drift 16s linear 1s infinite; } .wiwlg-floating-petal--five { left: 88%; animation: wiwlg-petal-drift 14s linear 7s infinite; } /* ========================================================= COUNTDOWN ========================================================= */ .wiwlg-countdown-section { background: radial-gradient( circle at 85% 20%, rgba(132, 210, 242, 0.3), transparent 34% ), linear-gradient( 145deg, #f9fdff, #e0f3fb 52%, #f9fdff ); } .wiwlg-countdown-card { position: relative; width: min(950px, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 46px); overflow: hidden; border-radius: 42px; } .wiwlg-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .wiwlg-countdown-grid[hidden] { display: none; } .wiwlg-countdown-unit { padding: clamp(24px, 4vw, 40px) 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 28px; background: radial-gradient( ellipse at 22% -15%, rgba(255, 255, 255, 0.68), transparent 56% ), rgba(255, 255, 255, 0.07); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 34px rgba(44, 111, 142, 0.09); backdrop-filter: blur(18px) saturate(210%); -webkit-backdrop-filter: blur(18px) saturate(210%); } .wiwlg-countdown-unit strong { display: block; color: var(--wiwlg-deep-blue); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 400; line-height: 1; } .wiwlg-countdown-unit span { display: block; margin-top: 12px; color: var(--wiwlg-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .wiwlg-countdown-fallback, .wiwlg-countdown-message { margin: 0; color: var(--wiwlg-deep-blue); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; text-align: center; } .wiwlg-countdown-message:not(:empty) { margin-top: 24px; } /* ========================================================= STORY ========================================================= */ .wiwlg-story-section { background: linear-gradient( 135deg, rgba(242, 251, 255, 0.96), rgba(203, 233, 247, 0.75) ); } .wiwlg-story-pattern { position: absolute; inset: 0; z-index: -2; opacity: 0.35; background: repeating-linear-gradient( 120deg, transparent 0, transparent 110px, rgba(255, 255, 255, 0.35) 111px, transparent 113px ); } .wiwlg-story-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 7vw, 90px); } .wiwlg-story-photo { position: relative; min-height: clamp(500px, 65vw, 720px); overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: clamp(34px, 6vw, 70px) 34px clamp(34px, 6vw, 70px) 34px; background: linear-gradient( 145deg, rgba(183, 226, 245, 0.34), rgba(255, 255, 255, 0.1) ), var(--wiwlg-story-image), linear-gradient(145deg, #badff0, #ffffff); background-position: center; background-size: cover; box-shadow: 0 40px 100px rgba(24, 79, 105, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.85); } .wiwlg-story-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, transparent 45%, rgba(15, 52, 69, 0.65) ); } .wiwlg-story-photo-shine { position: absolute; z-index: 2; top: -70%; left: -40%; width: 60%; height: 220%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent ); transform: rotate(18deg); animation: wiwlg-photo-shine 9s ease-in-out infinite; } .wiwlg-story-photo-caption { position: absolute; z-index: 3; right: 30px; bottom: 30px; left: 30px; color: #ffffff; } .wiwlg-story-photo-caption span { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .wiwlg-story-photo-caption strong { display: block; margin-top: 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 400; } .wiwlg-story-card { position: relative; padding: clamp(38px, 6vw, 70px); overflow: hidden; border-radius: clamp(34px, 5vw, 56px); } .wiwlg-story-card h2 { margin-bottom: 30px; } .wiwlg-story-copy { color: var(--wiwlg-muted); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.95; white-space: pre-line; } .wiwlg-story-signature { margin: 30px 0 0; color: #4f8299; font-size: 0.8rem; font-weight: 750; letter-spacing: 0.08em; } /* ========================================================= EVENTS ========================================================= */ .wiwlg-events-section { background: radial-gradient( circle at 8% 20%, rgba(100, 194, 234, 0.3), transparent 34% ), linear-gradient( 145deg, #f8fdff, #d8eff9 48%, #f9fdff ); } .wiwlg-venue-card { position: relative; margin-bottom: 28px; padding: clamp(30px, 5vw, 52px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr) auto; align-items: center; gap: 30px; border-radius: 38px; } .wiwlg-venue-main h3, .wiwlg-event-card h3, .wiwlg-family-card h3 { margin: 0; color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.1; } .wiwlg-venue-main > p:last-child { margin: 14px 0 0; color: var(--wiwlg-muted); line-height: 1.7; } .wiwlg-venue-meta { display: grid; gap: 14px; } .wiwlg-venue-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; } .wiwlg-venue-meta span, .wiwlg-event-information span { color: #54849a; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .wiwlg-venue-meta strong { color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .wiwlg-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .wiwlg-event-card { position: relative; min-height: 340px; padding: 36px; display: flex; flex-direction: column; overflow: hidden; border-radius: 34px; } .wiwlg-event-number { position: absolute; top: 18px; right: 24px; color: rgba(66, 143, 177, 0.14); font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; } .wiwlg-event-card h3 { position: relative; z-index: 1; margin-top: 10px; } .wiwlg-event-information { margin-top: auto; padding-top: 34px; display: grid; gap: 16px; } .wiwlg-event-information p { margin: 0; padding-top: 15px; display: grid; gap: 7px; border-top: 1px solid rgba(66, 143, 177, 0.18); } .wiwlg-event-information strong { color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 400; } /* ========================================================= GALLERY ========================================================= */ .wiwlg-gallery-section { background: linear-gradient( 145deg, #f9fdff, #e6f5fb 48%, #f9fdff ); } .wiwlg-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 320px; gap: 20px; } .wiwlg-gallery-item { position: relative; min-height: 280px; margin: 0; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 34px; background: linear-gradient( 145deg, rgba(167, 219, 242, 0.18), rgba(255, 255, 255, 0.04) ), var(--wiwlg-gallery-image), linear-gradient(145deg, #c4e6f5, #ffffff); background-position: center; background-size: cover; box-shadow: 0 24px 65px rgba(30, 85, 111, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.8); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 450ms ease; } .wiwlg-gallery-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, transparent 48%, rgba(13, 49, 67, 0.7) ); } .wiwlg-gallery-item::after { content: ""; position: absolute; z-index: 2; top: -70%; left: -45%; width: 45%; height: 240%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent ); transform: rotate(18deg); transition: left 700ms ease; } .wiwlg-gallery-item:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 34px 90px rgba(30, 85, 111, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.9); } .wiwlg-gallery-item:hover::after { left: 125%; } .wiwlg-gallery-item span { position: absolute; z-index: 3; right: 24px; bottom: 22px; left: 24px; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; } .wiwlg-gallery-item--large { grid-row: span 2; } .wiwlg-gallery-item--wide { grid-column: span 2; } /* ========================================================= FAMILY ========================================================= */ .wiwlg-family-section { background: radial-gradient( circle at 85% 20%, rgba(120, 204, 239, 0.28), transparent 35% ), linear-gradient( 145deg, #f9fdff, #dceff8 50%, #f9fdff ); } .wiwlg-family-grid { width: min(950px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .wiwlg-family-card { padding: clamp(36px, 6vw, 64px); border-radius: 40px; text-align: center; } .wiwlg-family-flower { margin: 0 auto 24px; transform: scale(1.5); } .wiwlg-family-card h3 { margin-top: 8px; } .wiwlg-family-card > p:last-child { margin: 22px 0 0; color: var(--wiwlg-muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.04rem; line-height: 1.8; white-space: pre-line; } /* ========================================================= RSVP FOOTER ========================================================= */ .wiwlg-footer { position: relative; padding: clamp(90px, 12vw, 160px) 24px 30px; overflow: hidden; isolation: isolate; background: radial-gradient( circle at 10% 25%, rgba(73, 177, 223, 0.52), transparent 38% ), radial-gradient( circle at 90% 70%, rgba(100, 194, 234, 0.46), transparent 40% ), linear-gradient( 145deg, #d2edf8, #eff9fd 48%, #cce9f6 ); } .wiwlg-footer-orb--one { top: -180px; left: -180px; width: 520px; height: 520px; background: rgba(255, 255, 255, 0.5); } .wiwlg-footer-orb--two { right: -200px; bottom: -180px; width: 570px; height: 570px; background: rgba(91, 189, 230, 0.25); } .wiwlg-footer-inner { position: relative; z-index: 2; width: min(900px, 100%); margin: 0 auto; } .wiwlg-rsvp-heading { margin-bottom: 42px; text-align: center; } .wiwlg-rsvp-form { padding: clamp(28px, 5vw, 54px); overflow: hidden; border-radius: 42px; } /* Platform-injected RSVP form styling */ .wiwlg-rsvp-form :where(form) { margin: 0; } .wiwlg-rsvp-form :where(label) { display: block; margin-bottom: 8px; color: var(--wiwlg-deep-blue); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; } .wiwlg-rsvp-form :where(input, select, textarea) { width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.84); border-radius: 16px; background: radial-gradient( ellipse at 18% -20%, rgba(255, 255, 255, 0.65), transparent 60% ), rgba(255, 255, 255, 0.1); color: var(--wiwlg-ink); font: inherit; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(37, 99, 127, 0.07); backdrop-filter: blur(16px) saturate(200%); -webkit-backdrop-filter: blur(16px) saturate(200%); } .wiwlg-rsvp-form :where(textarea) { min-height: 110px; resize: vertical; } .wiwlg-rsvp-form :where(input, select, textarea):focus { border-color: rgba(48, 129, 163, 0.65); box-shadow: 0 0 0 3px rgba(74, 164, 202, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95); } .wiwlg-rsvp-form :where(button) { min-height: 50px; padding: 13px 24px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: radial-gradient( ellipse at 28% -20%, rgba(255, 255, 255, 0.3), transparent 48% ), linear-gradient( 135deg, #28566b, #579bb8 ); color: #ffffff; font: inherit; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 18px 42px rgba(32, 79, 101, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.35); } .wiwlg-footer-signature { margin-top: 58px; text-align: center; } .wiwlg-footer-names { margin: 0; color: var(--wiwlg-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -0.04em; } .wiwlg-footer-names span { color: #5798b4; font-size: 0.6em; font-style: italic; } .wiwlg-footer-signature > p:last-child { margin: 18px 0 0; color: #4a8097; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; } .wiwlg-footer-bottom { margin-top: 80px; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(66, 143, 177, 0.2); color: rgba(48, 89, 108, 0.7); font-size: 0.68rem; } .wiwlg-footer-bottom p { margin: 0; } .wiwlg-footer-bottom a { color: inherit; text-decoration: none; } /* ========================================================= MUSIC CONTROL ========================================================= */ .wiwlg-music-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 1100; min-height: 48px; padding: 8px 15px 8px 9px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; color: var(--wiwlg-deep-blue); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; cursor: pointer; } .wiwlg-music-toggle[hidden] { display: none; } .wiwlg-music-toggle.wiwlg-music-unavailable { opacity: 0.72; } .wiwlg-music-disc { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; background: linear-gradient( 145deg, #315e73, #72b5d0 ); color: #ffffff; box-shadow: 0 7px 17px rgba(36, 93, 119, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .wiwlg-music-toggle.wiwlg-is-playing .wiwlg-music-disc { animation: wiwlg-disc-spin 8s linear infinite; } .wiwlg-music-bars { height: 17px; display: flex; align-items: flex-end; gap: 2px; } .wiwlg-music-bars i { width: 2px; height: 6px; display: block; border-radius: 999px; background: var(--wiwlg-deep-blue); } .wiwlg-music-toggle.wiwlg-is-playing .wiwlg-music-bars i { animation: wiwlg-music-bar 900ms ease-in-out infinite alternate; } .wiwlg-music-toggle.wiwlg-is-playing .wiwlg-music-bars i:nth-child(2) { animation-delay: 180ms; } .wiwlg-music-toggle.wiwlg-is-playing .wiwlg-music-bars i:nth-child(3) { animation-delay: 360ms; } /* ========================================================= REVEAL AND ACCESSIBILITY ========================================================= */ .wiwlg-js .wiwlg-reveal { opacity: 0; transform: translateY(34px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .wiwlg-js .wiwlg-reveal.wiwlg-is-visible { opacity: 1; transform: translateY(0); } .wiwlg-hold-button:focus-visible, .wiwlg-nav a:focus-visible, .wiwlg-button:focus-visible, .wiwlg-music-toggle:focus-visible, .wiwlg-footer-bottom a:focus-visible { outline: 3px solid rgba(35, 113, 148, 0.68); outline-offset: 4px; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes wiwlg-entry-arrive { from { opacity: 0; transform: translateY(34px) scale(0.97); filter: blur(10px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes wiwlg-liquid-reflection { from { transform: translate3d(-6%, -3%, 0) rotate(-10deg) scale(1); } to { transform: translate3d(14%, -3%, 0) rotate(7deg) scale(1.05); } } @keyframes wiwlg-name-sheen { to { background-position: 240% center; } } @keyframes wiwlg-name-glow { from { opacity: 0.38; transform: scale(0.88); } to { opacity: 0.88; transform: scale(1.1); } } @keyframes wiwlg-hold-shimmer { 0%, 54% { left: -78%; opacity: 0; } 65% { opacity: 0.7; } 86%, 100% { left: 128%; opacity: 0; } } @keyframes wiwlg-nav-shimmer { 0%, 62% { left: -42%; opacity: 0; } 68% { opacity: 0.78; } 85%, 100% { left: 124%; opacity: 0; } } @keyframes wiwlg-orb-float { from { transform: translate3d(-20px, -10px, 0); } to { transform: translate3d(45px, 35px, 0); } } @keyframes wiwlg-orb-float-reverse { from { transform: translate3d(10px, 10px, 0); } to { transform: translate3d(-40px, -35px, 0); } } @keyframes wiwlg-lily-left { from { margin-left: -10px; margin-bottom: -5px; } to { margin-left: 18px; margin-bottom: 20px; } } @keyframes wiwlg-lily-right { from { margin-top: -10px; margin-right: -8px; } to { margin-top: 20px; margin-right: 15px; } } @keyframes wiwlg-petal-drift { 0% { top: -8%; opacity: 0; transform: translateX(0) rotate(0deg) scale(0.7); } 12% { opacity: 0.78; } 45% { transform: translateX(70px) rotate(160deg) scale(1); } 78% { opacity: 0.52; } 100% { top: 108%; opacity: 0; transform: translateX(-38px) rotate(350deg) scale(0.78); } } @keyframes wiwlg-scroll-drop { 0% { top: -75%; } 55%, 100% { top: 105%; } } @keyframes wiwlg-photo-shine { 0%, 62% { left: -45%; opacity: 0; } 70% { opacity: 0.65; } 88%, 100% { left: 125%; opacity: 0; } } @keyframes wiwlg-disc-spin { to { transform: rotate(360deg); } } @keyframes wiwlg-music-bar { from { height: 5px; } to { height: 16px; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1040px) { .wiwlg-nav-links { gap: 18px; } .wiwlg-nav-links a { font-size: 0.72rem; } .wiwlg-story-layout { grid-template-columns: 1fr; } .wiwlg-story-photo { min-height: 620px; } .wiwlg-venue-card { grid-template-columns: 1fr; } .wiwlg-venue-card .wiwlg-button { width: max-content; } .wiwlg-event-grid { grid-template-columns: 1fr; } .wiwlg-event-card { min-height: 280px; } .wiwlg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wiwlg-gallery-item--large { grid-row: span 1; } } @media (max-width: 760px) { html { scroll-padding-top: 90px; } .wiwlg-section { padding: 80px 14px; } .wiwlg-entry { padding: 16px 14px 44px; } .wiwlg-entry-card { padding: 44px 18px 38px; border-radius: 38px; } .wiwlg-entry-title { font-size: clamp(3rem, 16vw, 5.2rem); } .wiwlg-lily--entry-left, .wiwlg-lily--entry-right { width: 260px; opacity: 0.5; } .wiwlg-lily--entry-left { left: -150px; bottom: -90px; } .wiwlg-lily--entry-right { top: -105px; right: -155px; } .wiwlg-header { padding: 12px; } .wiwlg-nav { min-height: 58px; padding: 8px 9px 8px 16px; } .wiwlg-header.wiwlg-is-scrolled .wiwlg-nav { min-height: 54px; } .wiwlg-brand { max-width: 58%; font-size: 0.84rem; } .wiwlg-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wiwlg-nav-links a:not(.wiwlg-nav-rsvp) { display: none; } .wiwlg-nav-rsvp { padding: 10px 16px; } .wiwlg-hero { padding: 102px 14px 30px; } .wiwlg-hero-card { padding: 42px 18px 38px; border-radius: 34px; } .wiwlg-couple-name { flex-direction: column; gap: 7px; font-size: clamp(3rem, 16vw, 5rem); line-height: 0.92; } .wiwlg-ampersand { font-size: 0.42em; } .wiwlg-hero-details { grid-template-columns: 1fr; gap: 17px; } .wiwlg-detail-separator { width: 62%; height: 1px; margin: 0 auto; background: linear-gradient( 90deg, transparent, rgba(49, 131, 166, 0.5), transparent ); } .wiwlg-hero-actions { flex-direction: column; } .wiwlg-button { width: 100%; } .wiwlg-scroll-cue { display: none; } .wiwlg-countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wiwlg-story-photo { min-height: 480px; } .wiwlg-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 360px; } .wiwlg-gallery-item--wide { grid-column: span 1; } .wiwlg-family-grid { grid-template-columns: 1fr; } .wiwlg-footer-bottom { flex-direction: column; align-items: center; text-align: center; } .wiwlg-music-toggle { right: 13px; bottom: 13px; } } @media (max-width: 420px) { .wiwlg-hold-control { width: 104px; height: 104px; } .wiwlg-hold-core { width: 82px; height: 82px; } .wiwlg-countdown-grid { gap: 10px; } .wiwlg-countdown-unit { border-radius: 22px; } .wiwlg-story-photo { min-height: 420px; } .wiwlg-gallery-grid { grid-auto-rows: 300px; } .wiwlg-footer-names { display: flex; flex-direction: column; gap: 8px; } } /* ========================================================= FALLBACK ========================================================= */ @supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { .wiwlg-entry-card, .wiwlg-nav, .wiwlg-hero-card, .wiwlg-countdown-card, .wiwlg-story-card, .wiwlg-venue-card, .wiwlg-event-card, .wiwlg-family-card, .wiwlg-rsvp-form, .wiwlg-music-toggle { background: linear-gradient( 145deg, rgba(239, 249, 253, 0.94), rgba(208, 237, 249, 0.88) ); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wiwlg-entry-card, .wiwlg-entry-card::before, .wiwlg-entry-orb, .wiwlg-lily, .wiwlg-hold-core::before, .wiwlg-nav::before, .wiwlg-hero-card::before, .wiwlg-name-glow, .wiwlg-person-name, .wiwlg-floating-petal, .wiwlg-story-photo-shine, .wiwlg-gallery-item::after, .wiwlg-scroll-line::after, .wiwlg-music-disc, .wiwlg-music-bars i { animation: none !important; } .wiwlg-js .wiwlg-reveal { opacity: 1; transform: none; } .wiwlg-entry, .wiwlg-site, .wiwlg-site-main, .wiwlg-nav, .wiwlg-button, .wiwlg-gallery-item { transition-duration: 1ms; } } /* The decorative orbs and lilies are absolutely positioned beyond the page edge by design. body already hides the overflow, but with html left visible the viewport never fully clips it, leaving a few pixels of sideways scroll on narrow screens. Clipping at the root as well settles it. */ html { overflow-x: hidden; } /* 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,#3f7690,#2b5364);border:1px solid rgba(49,94,115,.6);color:#ffffff;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} /* Preview polish: this design drew a 3px outline on focus and the browser drew its own blue ring on a clicked field, so elements looked boxed and selected rather than like the invitation. Focus still moves and everything stays clickable and typable — it just isn't painted as a box. The RSVP field keeps the soft blue hairline this design already gives it. */ *:focus,*:focus-visible{outline:none} .wiwlg-hold-button:focus-visible, .wiwlg-nav a:focus-visible, .wiwlg-button:focus-visible, .wiwlg-music-toggle:focus-visible, .wiwlg-footer-bottom a:focus-visible{outline:none;outline-offset:0} a,button,input,select,textarea{-webkit-tap-highlight-color:transparent} 19:T6404,(function () { "use strict"; document.documentElement.classList.add("wiwlg-js"); var HOLD_DURATION = 1500; var CIRCLE_LENGTH = 301.593; var TARGET_VOLUME = 0.24; var ENTRY_TRANSITION_DURATION = 1050; var experience = document.querySelector( "[data-wiwlg-experience]" ); var entryScreen = document.querySelector( "[data-wiwlg-entry]" ); var site = document.querySelector( "[data-wiwlg-main]" ); var holdButton = document.querySelector( "[data-wiwlg-hold]" ); var progressCircle = document.querySelector( "[data-wiwlg-hold-progress]" ); var holdLabel = document.querySelector( "[data-wiwlg-hold-label]" ); var entryStatus = document.querySelector( "[data-wiwlg-entry-status]" ); var heroTitle = document.querySelector( "#wiwlg-hero-title" ); var hero = document.querySelector( ".wiwlg-hero" ); var header = document.querySelector( ".wiwlg-header" ); var audio = document.querySelector( "[data-wiwlg-audio]" ); var musicToggle = document.querySelector( "[data-wiwlg-music-toggle]" ); var musicLabel = document.querySelector( "[data-wiwlg-music-label]" ); var holdStartTime = 0; var holdFrame = 0; var holdTimer = 0; var volumeFrame = 0; var scrollFrameRequested = false; var activePointerId = null; var isHolding = false; var isOpened = false; var audioPrimed = false; var audioAvailable = true; /* ======================================================= LONG-PRESS PROGRESS ======================================================= */ function setProgress(value) { if (!progressCircle) { return; } var safeValue = Math.max( 0, Math.min(1, value) ); var offset = CIRCLE_LENGTH * (1 - safeValue); progressCircle.style.strokeDasharray = String(CIRCLE_LENGTH); progressCircle.style.strokeDashoffset = String(offset); } function updateHoldProgress(timestamp) { if (!isHolding || isOpened) { return; } var elapsed = timestamp - holdStartTime; var progress = elapsed / HOLD_DURATION; setProgress(progress); if (progress >= 1) { completeHold(); return; } holdFrame = window.requestAnimationFrame( updateHoldProgress ); } function primeAudio() { if ( !audio || audioPrimed || !audioAvailable ) { return; } audioPrimed = true; audio.volume = 0; try { var playPromise = audio.play(); if ( playPromise && typeof playPromise.then === "function" ) { playPromise.catch(function () { audioPrimed = false; }); } } catch (error) { audioPrimed = false; } } function beginHold(event) { if ( isOpened || isHolding || !holdButton ) { return; } if ( event && event.type === "pointerdown" && typeof event.button === "number" && event.button !== 0 ) { return; } if (event) { event.preventDefault(); } isHolding = true; holdStartTime = performance.now(); holdButton.classList.add( "wiwlg-is-holding" ); holdButton.classList.remove( "wiwlg-is-complete" ); if (holdLabel) { holdLabel.textContent = "Keep holding"; } if (entryStatus) { entryStatus.textContent = "Opening your invitation…"; } setProgress(0); primeAudio(); if ( event && event.type === "pointerdown" && typeof holdButton.setPointerCapture === "function" ) { activePointerId = event.pointerId; try { holdButton.setPointerCapture( activePointerId ); } catch (error) { activePointerId = null; } } window.cancelAnimationFrame( holdFrame ); window.clearTimeout( holdTimer ); holdFrame = window.requestAnimationFrame( updateHoldProgress ); /* * Timer fallback for mobile browsers or iframe previews * that delay requestAnimationFrame. */ holdTimer = window.setTimeout( function () { if ( isHolding && !isOpened ) { completeHold(); } }, HOLD_DURATION + 60 ); } function completeHold() { if ( !isHolding || isOpened ) { return; } isHolding = false; window.cancelAnimationFrame( holdFrame ); window.clearTimeout( holdTimer ); setProgress(1); if (holdButton) { holdButton.classList.remove( "wiwlg-is-holding" ); holdButton.classList.add( "wiwlg-is-complete" ); } if (holdLabel) { holdLabel.textContent = "Welcome"; } if (entryStatus) { entryStatus.textContent = "Opening your invitation"; } if ( typeof navigator.vibrate === "function" && !window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches ) { navigator.vibrate(35); } openInvitation(); } function cancelHold(event) { if ( !isHolding || isOpened ) { return; } if ( event && activePointerId !== null && typeof event.pointerId === "number" && event.pointerId !== activePointerId ) { return; } isHolding = false; activePointerId = null; window.cancelAnimationFrame( holdFrame ); window.clearTimeout( holdTimer ); if (holdButton) { holdButton.classList.remove( "wiwlg-is-holding", "wiwlg-is-complete" ); } if (holdLabel) { holdLabel.textContent = "Press and hold"; } if (entryStatus) { entryStatus.textContent = ""; } setProgress(0); if ( audio && !audio.paused && !isOpened ) { audio.pause(); try { audio.currentTime = 0; } catch (error) { /* * Metadata may not have loaded yet. */ } audioPrimed = false; } } function handleHoldKeyDown(event) { if ( event.key !== "Enter" && event.key !== " " ) { return; } event.preventDefault(); if (!event.repeat) { beginHold(event); } } function handleHoldKeyUp(event) { if ( event.key !== "Enter" && event.key !== " " ) { return; } event.preventDefault(); if ( !isOpened && isHolding ) { cancelHold(event); } } function registerHoldEvents() { if (!holdButton) { return; } if ("PointerEvent" in window) { holdButton.addEventListener( "pointerdown", beginHold ); holdButton.addEventListener( "pointerup", cancelHold ); holdButton.addEventListener( "pointercancel", cancelHold ); holdButton.addEventListener( "lostpointercapture", function () { if ( isHolding && !isOpened ) { cancelHold(); } } ); } else { holdButton.addEventListener( "touchstart", beginHold, { passive: false } ); holdButton.addEventListener( "touchend", cancelHold, { passive: false } ); holdButton.addEventListener( "touchcancel", cancelHold, { passive: false } ); holdButton.addEventListener( "mousedown", beginHold ); window.addEventListener( "mouseup", cancelHold ); } holdButton.addEventListener( "keydown", handleHoldKeyDown ); holdButton.addEventListener( "keyup", handleHoldKeyUp ); holdButton.addEventListener( "contextmenu", function (event) { event.preventDefault(); } ); holdButton.addEventListener( "dragstart", function (event) { event.preventDefault(); } ); } /* ======================================================= MUSIC ======================================================= */ function fadeAudioTo( targetVolume, duration ) { if ( !audio || !audioAvailable ) { return; } window.cancelAnimationFrame( volumeFrame ); var startingVolume = Number.isFinite(audio.volume) ? audio.volume : 0; var startTime = performance.now(); function animateVolume(timestamp) { var elapsed = timestamp - startTime; var progress = Math.min( 1, elapsed / duration ); var eased = 1 - Math.pow(1 - progress, 3); audio.volume = startingVolume + ( targetVolume - startingVolume ) * eased; if (progress < 1) { volumeFrame = window.requestAnimationFrame( animateVolume ); } else { updateMusicControl(); } } volumeFrame = window.requestAnimationFrame( animateVolume ); } function startOrResumeMusic() { if ( !audio || !audioAvailable ) { updateMusicControl(); return; } if (!audio.paused) { fadeAudioTo( TARGET_VOLUME, 1600 ); updateMusicControl(); return; } audio.volume = 0; try { var playPromise = audio.play(); if ( playPromise && typeof playPromise.then === "function" ) { playPromise .then(function () { audioPrimed = true; fadeAudioTo( TARGET_VOLUME, 1600 ); updateMusicControl(); }) .catch(function () { updateMusicControl(); }); } } catch (error) { updateMusicControl(); } } function updateMusicControl() { if ( !musicToggle || !musicLabel ) { return; } if ( !audio || !audioAvailable ) { musicToggle.classList.remove( "wiwlg-is-playing" ); musicToggle.classList.add( "wiwlg-music-unavailable" ); musicToggle.setAttribute( "aria-label", "Background music is unavailable" ); musicLabel.textContent = "Music unavailable"; return; } var isPlaying = !audio.paused && !audio.ended && audio.volume > 0.01; musicToggle.classList.toggle( "wiwlg-is-playing", isPlaying ); musicToggle.classList.remove( "wiwlg-music-unavailable" ); musicToggle.setAttribute( "aria-label", isPlaying ? "Pause background music" : "Play background music" ); musicLabel.textContent = isPlaying ? "Music on" : "Music off"; } function toggleMusic() { if ( !audio || !audioAvailable ) { return; } if ( audio.paused || audio.volume <= 0.01 ) { startOrResumeMusic(); return; } fadeAudioTo(0, 400); window.setTimeout( function () { audio.pause(); updateMusicControl(); }, 430 ); } function initialiseMusic() { if (musicToggle) { musicToggle.addEventListener( "click", toggleMusic ); } if (!audio) { return; } audio.addEventListener( "play", updateMusicControl ); audio.addEventListener( "pause", updateMusicControl ); audio.addEventListener( "volumechange", updateMusicControl ); audio.addEventListener( "ended", updateMusicControl ); audio.addEventListener( "error", function () { audioAvailable = false; updateMusicControl(); } ); } /* ======================================================= OPENING TRANSITION ======================================================= */ function openInvitation() { if ( isOpened || !experience || !site ) { return; } isOpened = true; isHolding = false; window.cancelAnimationFrame( holdFrame ); window.clearTimeout( holdTimer ); experience.classList.add( "wiwlg-is-open" ); site.setAttribute( "aria-hidden", "false" ); document.body.classList.remove( "wiwlg-entry-locked" ); if (musicToggle) { musicToggle.hidden = false; } /* * Audio failure never prevents the page from opening. */ startOrResumeMusic(); window.setTimeout( function () { if (entryScreen) { entryScreen.hidden = true; } updateFixedNavigation(); if (heroTitle) { try { heroTitle.focus({ preventScroll: true }); } catch (error) { heroTitle.focus(); } } }, ENTRY_TRANSITION_DURATION ); } /* ======================================================= FIXED NAVIGATION ======================================================= */ function updateFixedNavigation() { if (!header) { scrollFrameRequested = false; return; } header.classList.toggle( "wiwlg-is-scrolled", window.scrollY > 24 ); scrollFrameRequested = false; } function initialiseFixedNavigation() { if (!header) { return; } updateFixedNavigation(); window.addEventListener( "scroll", function () { if (scrollFrameRequested) { return; } scrollFrameRequested = true; window.requestAnimationFrame( updateFixedNavigation ); }, { passive: true } ); } /* ======================================================= DATE FORMATTING ======================================================= */ function formatWeddingDates() { var dateElements = document.querySelectorAll( "[data-wiwlg-format-date]" ); dateElements.forEach( function (element) { var isoDate = element.getAttribute( "data-wiwlg-format-date" ); if (!isoDate) { return; } /* * Required date parsing format. */ var parsedDate = new Date( isoDate + "T00:00:00" ); if ( Number.isNaN( parsedDate.getTime() ) ) { /* * Leave the raw value visible. */ return; } try { element.textContent = new Intl.DateTimeFormat( "en", { weekday: "long", day: "numeric", month: "long", year: "numeric" } ).format(parsedDate); } catch (error) { /* * Leave the raw value visible. */ } } ); } function formatWeddingTimes() { var timeElements = document.querySelectorAll( "[data-wiwlg-format-time]" ); timeElements.forEach( function (element) { var rawTime = element.getAttribute( "data-wiwlg-format-time" ); if (!rawTime) { return; } var match = rawTime.match( /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/ ); if (!match) { return; } var hours = Number(match[1]); var minutes = Number(match[2]); var period = hours >= 12 ? "PM" : "AM"; var displayHours = hours % 12 || 12; element.textContent = displayHours + ":" + String(minutes).padStart(2, "0") + " " + period; } ); } /* ======================================================= COUNTDOWN ======================================================= */ function initialiseCountdown() { var countdown = document.querySelector( "[data-wiwlg-countdown]" ); if (!countdown) { return; } var isoDate = countdown.getAttribute( "data-wiwlg-countdown-date" ); var fallback = countdown.querySelector( "[data-wiwlg-countdown-fallback]" ); var grid = countdown.querySelector( "[data-wiwlg-countdown-grid]" ); var message = countdown.querySelector( "[data-wiwlg-countdown-message]" ); var daysElement = countdown.querySelector( "[data-wiwlg-days]" ); var hoursElement = countdown.querySelector( "[data-wiwlg-hours]" ); var minutesElement = countdown.querySelector( "[data-wiwlg-minutes]" ); var secondsElement = countdown.querySelector( "[data-wiwlg-seconds]" ); if (!isoDate) { return; } /* * Required date parsing format. */ var weddingDate = new Date( isoDate + "T00:00:00" ); if ( Number.isNaN( weddingDate.getTime() ) ) { /* * Leave raw text visible. */ return; } if (fallback) { fallback.hidden = true; } if (grid) { grid.hidden = false; } function pad(value) { return String( Math.max(0, value) ).padStart(2, "0"); } function updateCountdown() { var difference = weddingDate.getTime() - Date.now(); if (difference <= 0) { if (daysElement) { daysElement.textContent = "00"; } if (hoursElement) { hoursElement.textContent = "00"; } if (minutesElement) { minutesElement.textContent = "00"; } if (secondsElement) { secondsElement.textContent = "00"; } if (message) { message.textContent = "The celebration has arrived."; } return false; } var days = Math.floor( difference / 86400000 ); var hours = Math.floor( ( difference % 86400000 ) / 3600000 ); var minutes = Math.floor( ( difference % 3600000 ) / 60000 ); var seconds = Math.floor( ( difference % 60000 ) / 1000 ); if (daysElement) { daysElement.textContent = pad(days); } if (hoursElement) { hoursElement.textContent = pad(hours); } if (minutesElement) { minutesElement.textContent = pad(minutes); } if (secondsElement) { secondsElement.textContent = pad(seconds); } return true; } var shouldContinue = updateCountdown(); if (!shouldContinue) { return; } var countdownInterval = window.setInterval( function () { var continueRunning = updateCountdown(); if (!continueRunning) { window.clearInterval( countdownInterval ); } }, 1000 ); } /* ======================================================= SCROLL REVEAL ======================================================= */ function initialiseReveal() { var revealElements = document.querySelectorAll( ".wiwlg-reveal" ); if (!revealElements.length) { return; } if ( window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches || !("IntersectionObserver" in window) ) { revealElements.forEach( function (element) { element.classList.add( "wiwlg-is-visible" ); } ); return; } var observer = new IntersectionObserver( function (entries) { entries.forEach( function (entry) { if (!entry.isIntersecting) { return; } entry.target.classList.add( "wiwlg-is-visible" ); observer.unobserve( entry.target ); } ); }, { threshold: 0.14, rootMargin: "0px 0px -8% 0px" } ); revealElements.forEach( function (element) { observer.observe(element); } ); } /* ======================================================= LIQUID PARALLAX ======================================================= */ function initialiseLiquidParallax() { if ( !hero || window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches ) { return; } var frameRequested = false; var pointerX = 0; var pointerY = 0; function updatePosition() { var bounds = hero.getBoundingClientRect(); var centerX = bounds.left + bounds.width / 2; var centerY = bounds.top + bounds.height / 2; var horizontalRange = Math.max( bounds.width / 2, 1 ); var verticalRange = Math.max( bounds.height / 2, 1 ); var offsetX = Math.max( -1, Math.min( 1, ( pointerX - centerX ) / horizontalRange ) ); var offsetY = Math.max( -1, Math.min( 1, ( pointerY - centerY ) / verticalRange ) ); hero.style.setProperty( "--wiwlg-pointer-x", ( offsetX * 30 ).toFixed(2) + "px" ); hero.style.setProperty( "--wiwlg-pointer-y", ( offsetY * 30 ).toFixed(2) + "px" ); frameRequested = false; } hero.addEventListener( "pointermove", function (event) { pointerX = event.clientX; pointerY = event.clientY; if (!frameRequested) { frameRequested = true; window.requestAnimationFrame( updatePosition ); } } ); hero.addEventListener( "pointerleave", function () { hero.style.setProperty( "--wiwlg-pointer-x", "0px" ); hero.style.setProperty( "--wiwlg-pointer-y", "0px" ); } ); } /* ======================================================= IN-PAGE LINKS ======================================================= */ /* * Every navigation link, the brand mark, the hero buttons and the scroll cue * point at a "#section" on this page. The invitation renders inside a * sandboxed srcdoc iframe, where following such an href navigates the frame * to about:srcdoc#section, reloading it and leaving the preview blank. * Scrolling to the target instead keeps them working in the preview and on * the published site, and clears the fixed header so a section never opens * underneath it. */ function initialiseInPageLinks() { document.addEventListener("click", function (event) { var link = event.target.closest('a[href^="#"]'); if (!link) { return; } var id = link.getAttribute("href").slice(1); if (!id) { return; } var target = document.getElementById(id); if (!target) { return; } event.preventDefault(); var headerOffset = header ? header.getBoundingClientRect().height : 0; var top = target.getBoundingClientRect().top + window.scrollY - headerOffset; window.scrollTo({ top: top <= 1 ? 0 : top, behavior: "smooth" }); }); } /* ======================================================= INITIALISATION ======================================================= */ if ( !experience || !entryScreen || !site || !holdButton || !progressCircle ) { return; } document.body.classList.add( "wiwlg-entry-locked" ); setProgress(0); registerHoldEvents(); initialiseMusic(); initialiseFixedNavigation(); initialiseInPageLinks(); formatWeddingDates(); formatWeddingTimes(); initialiseCountdown(); initialiseReveal(); initialiseLiquidParallax(); document.addEventListener( "visibilitychange", function () { if ( document.hidden && isHolding && !isOpened ) { cancelHold(); } } ); })();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":"Baby Blue"}],["$","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":"#AmeliaAndNoah","gallery_1":"https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1400&q=85","gallery_2":"https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=1200&q=85","gallery_3":"https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1200&q=85","gallery_4":"https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1200&q=85","gallery_5":"https://images.unsplash.com/photo-1544078751-58fee2d8a03b?auto=format&fit=crop&w=1200&q=85","gallery_6":"https://images.unsplash.com/photo-1507504031003-b417219a0fde?auto=format&fit=crop&w=1600&q=85","rsvp_form":"[Platform-injected RSVP form]","rsvp_note":"Please respond by May 10, 2027. Your presence would make our celebration complete.","bride_name":"Amelia","dress_code":"Garden Formal in soft, elegant tones","event_list":[{"name":"Welcome Garden Gathering","time":"15:00"},{"name":"Wedding Ceremony","time":"16:30"},{"name":"Dinner & Dancing","time":"18:30"}],"groom_name":"Noah","hero_image":"https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=90","love_story":"We met on a quiet spring afternoon, when a shared table at a small café became the beginning of something extraordinary.\n\nWhat started with long conversations and spontaneous weekend drives grew into a partnership filled with laughter, patience and countless small acts of love.\n\nNow, surrounded by the people who shaped our lives, we are ready to begin our greatest adventure together.","venue_name":"The Azure Garden Estate","story_image":"https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1400&q=85","family_bride":"With love and blessings from the Bennett family, who have filled Amelia’s life with kindness, courage and joy.","family_groom":"With love and blessings from the Carter family, whose warmth, guidance and laughter have shaped Noah’s journey.","rsvp_enabled":true,"wedding_date":"2027-08-09","wedding_time":"16:30","venue_address":"18 Willow Lane, Santa Barbara, California","venue_map_url":"https://www.google.com/maps/search/?api=1&query=Santa+Barbara+California","couple_display_name":"Amelia & Noah"},"allowJs":true}]}]}],"$L1a"]}] 11:null 15:[["$","title","0",{"children":"Baby Blue — 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",{}]]

You Are Invited

{{bride_name}} {{groom_name}}

Until We Say “I Do”

Our Love Story

Wedding Events

{{venue_name}}

{{name}}

Our Gallery

Our Families

{{bride_name}}

{{groom_name}}