17:I[93868,["/_next/static/immutable/chunks/0_wr-y4860vtq.js","/_next/static/immutable/chunks/2c7jxuab5_76i.js","/_next/static/immutable/chunks/2v5ypqmalxzvd.js","/_next/static/immutable/chunks/3vt9879i9o1qi.js"],"TemplatePreview"] 1c:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 18:T54bf,

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

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

19:Tf42c,: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} /* ========================================================= HOMEPAGE — editorial refinement The first screen is the invitation itself, so the photograph carries it: one scrim for legibility, the names as the single focus, and one slim glass rail for the essentials. The entry screen and every section below are untouched — everything here is scoped to .wiwlg-hero. ========================================================= */ /* Let the photograph read, and give the type a scrim to sit on. */ .wiwlg-hero { padding: clamp(104px, 22vh, 190px) 22px clamp(34px, 8vh, 64px); align-content: center; background: #0f2d3d; } .wiwlg-hero-image { inset: 0; opacity: 1; filter: saturate(1.04) contrast(1.02); } .wiwlg-hero-overlay { background: linear-gradient(180deg, rgba(14, 44, 62, 0.50) 0%, rgba(16, 52, 72, 0.14) 26%, rgba(14, 46, 66, 0.28) 56%, rgba(10, 34, 50, 0.70) 100%), linear-gradient(90deg, rgba(10, 34, 50, 0.24), transparent 30%, transparent 70%, rgba(10, 34, 50, 0.24)); } /* The card is gone: no panel, no border, no inner glow. */ .wiwlg-hero-card { width: min(680px, 100%); padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; /* The panel's frosting is what made the photograph a blurred rectangle. */ -webkit-backdrop-filter: none; backdrop-filter: none; } .wiwlg-hero-card::before, .wiwlg-hero-card::after { content: none; } /* Decoration stays, at a whisper. */ .wiwlg-hero-orb { opacity: 0.32; filter: blur(22px); } .wiwlg-hero-orb--three { opacity: 0.2; } .wiwlg-lily--hero-left, .wiwlg-lily--hero-right { opacity: 0.22; } .wiwlg-hero .wiwlg-name-glow { inset: 4% -6%; background: radial-gradient(circle, rgba(120, 190, 225, 0.30), rgba(140, 205, 235, 0.10) 55%, transparent 74%); filter: blur(54px); } .wiwlg-hero-content { gap: clamp(30px, 7vh, 58px); } /* One quiet line above the names. */ .wiwlg-hero .wiwlg-kicker { margin-bottom: clamp(20px, 4vh, 30px); color: rgba(255, 255, 255, 0.7); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(8, 28, 42, 0.5); } /* The couple, as the one thing you see first. */ .wiwlg-hero .wiwlg-couple-name { flex-direction: column; gap: clamp(2px, 1vh, 8px); font-size: clamp(3.5rem, 17vw, 6.2rem); line-height: 0.94; letter-spacing: -0.018em; } .wiwlg-hero .wiwlg-person-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fbfdff; filter: none; text-shadow: 0 2px 30px rgba(9, 32, 48, 0.55), 0 1px 3px rgba(9, 32, 48, 0.28); } .wiwlg-hero .wiwlg-ampersand { color: var(--wiwlg-gold); font-size: 0.38em; opacity: 0.92; text-shadow: 0 2px 18px rgba(9, 32, 48, 0.5); } /* A hairline, not a rule. */ .wiwlg-hero .wiwlg-divider { width: min(190px, 56%); margin: clamp(26px, 5vh, 40px) auto clamp(20px, 4vh, 30px); } .wiwlg-hero .wiwlg-divider span { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55)); } .wiwlg-hero .wiwlg-divider i { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.28); box-shadow: none; } .wiwlg-hero .wiwlg-hero-intro { max-width: 21ch; margin: 0 auto clamp(28px, 5vh, 44px); color: rgba(255, 255, 255, 0.8); font-size: clamp(0.95rem, 3.6vw, 1.1rem); line-height: 1.7; text-shadow: 0 1px 16px rgba(8, 28, 42, 0.5); } /* The essentials on one slim rail — the only glass left on this screen. */ .wiwlg-hero-meta { margin: 0 auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 13px 24px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 999px; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); color: rgba(255, 255, 255, 0.92); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; } .wiwlg-hero-meta time { font-variant-numeric: tabular-nums; } .wiwlg-hero-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--wiwlg-gold); opacity: 0.85; } .wiwlg-hero-venue { margin: clamp(14px, 2.6vh, 20px) 0 0; color: rgba(255, 255, 255, 0.82); font-family: Georgia, "Times New Roman", serif; font-size: clamp(0.95rem, 3.4vw, 1.08rem); letter-spacing: 0.02em; text-shadow: 0 1px 16px rgba(8, 28, 42, 0.55); } .wiwlg-hero .wiwlg-hashtag { margin-top: clamp(24px, 4vh, 34px); color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } /* The only way onward on this screen; the nav still carries RSVP. */ .wiwlg-hero .wiwlg-scroll-cue { display: flex; gap: 12px; color: rgba(255, 255, 255, 0.62); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.32em; } .wiwlg-hero .wiwlg-scroll-line { width: 1px; height: 46px; background: linear-gradient(rgba(255, 255, 255, 0.55), transparent); } /* Keep the rail to a single line on the narrowest handsets. */ @media (max-width: 400px) { .wiwlg-hero-meta { padding: 12px 18px; gap: 9px 10px; font-size: 0.56rem; letter-spacing: 0.15em; } } @media (min-width: 860px) { .wiwlg-hero .wiwlg-couple-name { font-size: clamp(4.6rem, 8vw, 6.6rem); } .wiwlg-hero .wiwlg-hero-intro { max-width: 30ch; } .wiwlg-hero-meta { font-size: 0.7rem; padding: 15px 30px; } } /* wiw: phone viewport fit -------------------------------------------------- On a phone the invitation could be dragged sideways. The usual causes are a design that scales something up as it opens (Garden's cover animates to 1.22x — 475px on a 390px screen) and decorative layers deliberately drawn larger than their box. Both are harmless on a laptop, where the viewport has room to spare, and both add a horizontal scrollbar on a phone. So on phone widths only, horizontal overflow is clipped at the document level. 'clip' is preferred over 'hidden' because it does not make the element a scroll container, which would break any position: sticky inside the design. Vertical scrolling, layout, colour and motion are untouched, and nothing here applies at 768px and up — iPad and laptop render exactly as they did. */ @media (max-width: 767px) { html, body { overflow-x: hidden; /* Belt and braces: nothing may make the page itself wider than the screen. */ max-width: 100%; } } @supports (overflow-x: clip) { @media (max-width: 767px) { html, body { overflow-x: clip; } } } /* wiw: end phone viewport fit -------------------------------------------- */ 1a:T6403,(function () { "use strict"; document.documentElement.classList.add("wiwlg-js"); var HOLD_DURATION = 500; 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(); } } ); })();9:["$","main",null,{"className":"flex min-h-screen flex-col bg-cream font-body text-espresso","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.weddinginwhites.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designs\",\"item\":\"https://www.weddinginwhites.com/templates\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sky\",\"item\":\"https://www.weddinginwhites.com/templates/a1047dd0-c062-4aee-984b-329e906b325b\"}]}"}}],["$","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":[["$","$L8",null,{"href":"/templates","className":"inline-flex items-center gap-2 font-body text-sm font-medium text-espresso/70 transition hover:text-espresso","children":[["$","$L3",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"]}],["$","h1",null,{"className":"truncate font-body text-sm font-bold tracking-tight text-espresso","children":"Sky"}],["$","$L8",null,{"href":"/","className":"inline-flex items-center gap-2.5 shrink-0","aria-label":"WeddingInWhites home","children":[["$","$L2",null,{"src":"/brand/weddinginwhites-logo.png","alt":"WeddingInWhites logo","width":512,"height":512,"sizes":"56px","priority":false,"className":"size-7 shrink-0 rounded-lg object-contain"}],false]}]]}]}],["$","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":["$","$L17",null,{"html":"$18","css":"$19","js":"$1a","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":"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}]}]}],"$L1b"]}] 12:null 16:[["$","title","0",{"children":"Sky Wedding Invitation Design · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Sky is a premium Indian wedding invitation and website design. Preview it, add your details and share it on WhatsApp."}],["$","meta","2",{"name":"application-name","content":"WeddingInWhites"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"creator","content":"WeddingInWhites"}],["$","meta","5",{"name":"publisher","content":"WeddingInWhites"}],["$","meta","6",{"name":"googlebot","content":"max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://www.weddinginwhites.com/templates/a1047dd0-c062-4aee-984b-329e906b325b"}],["$","meta","8",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","9",{"property":"og:title","content":"Sky Wedding Invitation Design · WeddingInWhites"}],["$","meta","10",{"property":"og:description","content":"Sky is a premium Indian wedding invitation and website design. Preview it, add your details and share it on WhatsApp."}],["$","meta","11",{"property":"og:url","content":"https://www.weddinginwhites.com/templates/a1047dd0-c062-4aee-984b-329e906b325b"}],["$","meta","12",{"property":"og:site_name","content":"WeddingInWhites"}],["$","meta","13",{"property":"og:locale","content":"en_IN"}],["$","meta","14",{"property":"og:image","content":"https://www.weddinginwhites.com/templates/a1047dd0-c062-4aee-984b-329e906b325b/opengraph-image?c63edb0f4b907600"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"Wedding invitation design — WeddingInWhites"}],["$","meta","19",{"property":"og:type","content":"website"}],["$","meta","20",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","21",{"name":"twitter:title","content":"Sky Wedding Invitation Design · WeddingInWhites"}],["$","meta","22",{"name":"twitter:description","content":"Sky is a premium Indian wedding invitation and website design. Preview it, add your details and share it on WhatsApp."}],["$","meta","23",{"name":"twitter:image","content":"https://www.weddinginwhites.com/templates/a1047dd0-c062-4aee-984b-329e906b325b/opengraph-image?c63edb0f4b907600"}],["$","meta","24",{"name":"twitter:image:alt","content":"Wedding invitation design — WeddingInWhites"}],["$","meta","25",{"name":"twitter:image:type","content":"image/png"}],["$","meta","26",{"name":"twitter:image:width","content":"1200"}],["$","meta","27",{"name":"twitter:image:height","content":"630"}],["$","link","28",{"rel":"icon","href":"/icon.png?icon.1bxw4kq1b3mug.png","sizes":"512x512","type":"image/png"}],["$","link","29",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.411eoek231z29.png","sizes":"180x180","type":"image/png"}],["$","$L1c","30",{}]]

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}}