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

Together with their families

{{bride_name}} and {{groom_name}}

View the celebration RSVP

Save our wedding day

Discover our story

The night awaits

Counting down to forever

Wedding date: {{wedding_date}}

00 Days

00 Hours

00 Minutes

00 Seconds

Written in the stars

Our story

“In all the world, there is no heart for me like yours.”

Save the date

Celebration beneath the stars

Two beautiful moments, one unforgettable beginning.

The celebration

Time {{time}}

Venue {{venue}}

In a garden touched by moonlight,
we begin our forever.

{{bride_name}} & {{groom_name}}

Fragments of forever

Our gallery

A few moments from the journey that brought us here.

{{couple_display_name}} wedding gallery photograph — 01 **Vows**

18:T96f2,:root { --mbw-midnight: #030510; --mbw-midnight-soft: #080a20; --mbw-lavender: #ddd8ff; --mbw-moonlight: #faf8ff; --mbw-muted: #bbb8d2; --mbw-gold: #d8bc7b; --mbw-gold-soft: #efdcaa; --mbw-glass: rgba(15, 18, 52, 0.1); --mbw-glass-strong: rgba(8, 11, 35, 0.15); --mbw-rainbow-blue: rgba(177, 226, 255, 0.5); --mbw-rainbow-violet: rgba(210, 184, 255, 0.42); --mbw-rainbow-rose: rgba(255, 200, 226, 0.27); --mbw-rainbow-gold: rgba(246, 218, 157, 0.35); --mbw-rainbow-mint: rgba(190, 255, 235, 0.23); /* Premium high-contrast wedding typography. No external fonts are used. Casual handwriting fonts are intentionally excluded. */ --mbw-name-font: "Bodoni 72", Didot, "Didot LT STD", "Bodoni MT", "Baskerville Old Face", Baskerville, Georgia, "Times New Roman", serif; --mbw-editorial: "Bodoni 72", Didot, "Bodoni MT", Baskerville, "Baskerville Old Face", "Palatino Linotype", Georgia, "Times New Roman", serif; --mbw-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* ========================================================= BASE ========================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 105px; } body { margin: 0; background: var(--mbw-midnight); } .mbw-site, .mbw-site *, .mbw-site *::before, .mbw-site *::after { box-sizing: border-box; } .mbw-site { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; color: var(--mbw-moonlight); background: var(--mbw-midnight); font-family: var(--mbw-editorial); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mbw-site img { display: block; max-width: 100%; } .mbw-site a { color: inherit; } .mbw-site button, .mbw-site input, .mbw-site select, .mbw-site textarea { font: inherit; } .mbw-site :focus-visible { outline: 2px solid var(--mbw-gold-soft); outline-offset: 4px; } .mbw-skip-link { position: fixed; top: 12px; left: 12px; z-index: 999; padding: 0.75rem 1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: var(--mbw-moonlight); background: rgba(8, 10, 30, 0.94); transform: translateY(-150%); transition: transform 180ms ease; } .mbw-skip-link:focus { transform: translateY(0); } /* ========================================================= CONTINUOUS WEBP BACKGROUND ========================================================= */ .mbw-background { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; background: var(--mbw-midnight); } .mbw-background-fallback, .mbw-background-image, .mbw-background-overlay, .mbw-background-vignette { position: absolute; inset: 0; width: 100%; height: 100%; } .mbw-background-fallback { background: radial-gradient( circle at 20% 5%, rgba(92, 74, 205, 0.38), transparent 36% ), radial-gradient( circle at 82% 24%, rgba(74, 73, 173, 0.2), transparent 36% ), linear-gradient( 180deg, #080919 0%, #050717 50%, #02030a 100% ); } .mbw-background-image { inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center top; opacity: 1; filter: saturate(1.12) contrast(1.05) brightness(0.8); transform: scale(1.01); } .mbw-background-image.mbw-background-failed { display: none; } .mbw-background-overlay { background: linear-gradient( 180deg, rgba(3, 4, 15, 0.08) 0%, rgba(4, 6, 19, 0.22) 38%, rgba(2, 3, 11, 0.6) 100% ), radial-gradient( ellipse at center, transparent 25%, rgba(0, 1, 8, 0.3) 100% ); } .mbw-background-vignette { box-shadow: inset 0 0 180px rgba(0, 0, 9, 0.46), inset 0 -180px 190px rgba(0, 0, 9, 0.38); } /* ========================================================= LIQUID GLASS ========================================================= */ .mbw-glass { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(237, 233, 255, 0.19); background: radial-gradient( circle at 13% 3%, rgba(255, 255, 255, 0.105), transparent 31% ), radial-gradient( circle at 88% 100%, rgba(174, 221, 255, 0.05), transparent 40% ), linear-gradient( 138deg, rgba(245, 242, 255, 0.075), rgba(98, 94, 165, 0.04) 38%, rgba(7, 9, 31, 0.105) ), var(--mbw-glass); box-shadow: 0 32px 90px rgba(0, 0, 18, 0.3), 0 12px 36px rgba(0, 0, 18, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 1px 0 0 rgba(205, 235, 255, 0.075), inset -1px 0 0 rgba(220, 194, 255, 0.05), inset 0 -1px 0 rgba(143, 169, 255, 0.075); -webkit-backdrop-filter: blur(34px) saturate(1.48) contrast(1.035); backdrop-filter: blur(34px) saturate(1.48) contrast(1.035); } .mbw-glass::before { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient( 112deg, rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.04) 13%, transparent 29%, transparent 68%, rgba(184, 220, 255, 0.04) 86%, rgba(255, 255, 255, 0.07) ), radial-gradient( ellipse at 38% 0%, rgba(255, 255, 255, 0.12), transparent 42% ); content: ""; pointer-events: none; } .mbw-glass::after { position: absolute; inset: 0; z-index: 8; padding: 1px; border-radius: inherit; background: linear-gradient( 118deg, rgba(255, 255, 255, 0.55), var(--mbw-rainbow-blue) 17%, var(--mbw-rainbow-violet) 34%, var(--mbw-rainbow-rose) 49%, var(--mbw-rainbow-gold) 67%, var(--mbw-rainbow-mint) 83%, rgba(255, 255, 255, 0.38) ); background-size: 220% 220%; content: ""; opacity: 0.53; pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: mbw-edge-spectrum 10s ease-in-out infinite; } .mbw-glass > * { position: relative; z-index: 2; } /* ========================================================= 3D LIQUID CARDS ========================================================= */ .mbw-liquid-card { --mbw-card-rx: 0deg; --mbw-card-ry: 0deg; --mbw-card-z: 0px; --mbw-card-scale: 1; --mbw-card-reveal-y: 0px; --mbw-card-light-x: 50%; --mbw-card-light-y: 22%; --mbw-card-shadow-x: 0px; --mbw-card-shadow-y: 30px; --mbw-card-shadow-opacity: 0.34; transform: perspective(1300px) translate3d( 0, var(--mbw-card-reveal-y), var(--mbw-card-z) ) rotateX(var(--mbw-card-rx)) rotateY(var(--mbw-card-ry)) scale3d( var(--mbw-card-scale), var(--mbw-card-scale), 1 ); transform-style: preserve-3d; transform-origin: var(--mbw-card-light-x) var(--mbw-card-light-y); backface-visibility: hidden; will-change: transform, box-shadow; box-shadow: var(--mbw-card-shadow-x) var(--mbw-card-shadow-y) 86px rgba( 0, 0, 22, var(--mbw-card-shadow-opacity) ), 0 16px 42px rgba(0, 0, 18, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.28), inset 1px 0 0 rgba(197, 231, 255, 0.09), inset -1px 0 0 rgba(231, 199, 255, 0.07), inset 0 -1px 0 rgba(143, 169, 255, 0.09); transition: transform 170ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 230ms ease, border-color 230ms ease; } .mbw-liquid-card:hover { --mbw-card-z: 17px; --mbw-card-scale: 1.008; border-color: rgba(244, 239, 255, 0.31); } .mbw-liquid-card.mbw-liquid-returning { transition: transform 780ms cubic-bezier(0.16, 1.55, 0.3, 1), box-shadow 620ms ease, border-color 420ms ease; } .mbw-liquid-card:active, .mbw-liquid-card.mbw-is-touching { --mbw-card-z: 5px; --mbw-card-scale: 0.97; transition: transform 75ms ease-out, box-shadow 100ms ease-out; } .mbw-liquid-sheen { position: absolute !important; inset: -35% !important; z-index: 5 !important; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient( circle at var(--mbw-card-light-x) var(--mbw-card-light-y), rgba(255, 255, 255, 0.3), rgba(203, 232, 255, 0.14) 14%, rgba(215, 188, 255, 0.095) 26%, rgba(255, 209, 228, 0.045) 37%, transparent 55% ), linear-gradient( 116deg, transparent 27%, rgba(255, 255, 255, 0.035) 39%, rgba(221, 238, 255, 0.19) 48%, rgba(226, 199, 255, 0.09) 55%, transparent 68% ); mix-blend-mode: screen; filter: blur(3px) saturate(1.28); transform: translateZ(44px) rotate(-7deg); transition: opacity 260ms ease; } .mbw-liquid-card:hover .mbw-liquid-sheen, .mbw-liquid-card.mbw-liquid-active .mbw-liquid-sheen { opacity: 0.92; } .mbw-liquid-lens { position: absolute !important; top: var(--mbw-card-light-y) !important; left: var(--mbw-card-light-x) !important; z-index: 4 !important; width: clamp(130px, 24vw, 290px); aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient( circle, rgba(210, 238, 255, 0.12), rgba(205, 185, 255, 0.075) 29%, rgba(255, 214, 230, 0.04) 49%, transparent 73% ); filter: blur(14px); transform: translate3d(-50%, -50%, 32px) scale(0.72); transition: opacity 280ms ease, transform 420ms cubic-bezier(0.16, 1.35, 0.3, 1); } .mbw-liquid-card:hover .mbw-liquid-lens, .mbw-liquid-card.mbw-liquid-active .mbw-liquid-lens { opacity: 1; transform: translate3d(-50%, -50%, 32px) scale(1); } .mbw-liquid-ripple { position: absolute !important; top: var(--mbw-card-light-y) !important; left: var(--mbw-card-light-x) !important; z-index: 6 !important; width: 32px; height: 32px; border: 1px solid rgba(227, 237, 255, 0.32); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate3d(-50%, -50%, 48px) scale(0.2); } .mbw-liquid-card.mbw-liquid-rippling .mbw-liquid-ripple { animation: mbw-liquid-ripple 720ms ease-out forwards; } /* ========================================================= NAVIGATION ========================================================= */ .mbw-header { position: fixed; top: clamp(0.8rem, 2vw, 1.5rem); right: 0; left: 0; z-index: 100; display: flex; justify-content: center; padding: 0 1rem; pointer-events: none; } .mbw-nav-shell { position: relative; display: flex; width: min(1120px, 100%); min-height: 66px; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem 0.55rem 1rem; border: 1px solid rgba(235, 231, 255, 0.2); border-radius: 999px; background: radial-gradient( circle at 14% 0%, rgba(255, 255, 255, 0.115), transparent 31% ), linear-gradient( 145deg, rgba(241, 239, 255, 0.075), rgba(10, 13, 40, 0.1) ); box-shadow: 0 20px 68px rgba(0, 0, 17, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(34px) saturate(1.48); backdrop-filter: blur(34px) saturate(1.48); pointer-events: auto; } .mbw-header.mbw-is-scrolled .mbw-nav-shell { border-color: rgba(241, 237, 255, 0.28); background: rgba(6, 8, 29, 0.28); } .mbw-brand { display: inline-flex; min-width: 0; align-items: center; gap: 0.75rem; text-decoration: none; } .mbw-brand-logo { width: auto; max-width: 170px; height: 42px; object-fit: contain; } .mbw-brand-monogram { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(233, 214, 167, 0.46); border-radius: 50%; color: var(--mbw-gold-soft); background: rgba(17, 18, 48, 0.1); } .mbw-brand-names { overflow: hidden; max-width: 310px; color: var(--mbw-lavender); font-size: 0.78rem; font-style: italic; letter-spacing: 0.07em; text-overflow: ellipsis; white-space: nowrap; } .mbw-brand-names em { margin: 0 0.3rem; color: var(--mbw-gold); } .mbw-nav-links { display: flex; align-items: center; gap: 0.15rem; } .mbw-nav-links a { padding: 0.75rem 0.92rem; border-radius: 999px; color: rgba(239, 237, 255, 0.78); font-family: var(--mbw-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; } .mbw-nav-links a:hover, .mbw-nav-links a.mbw-is-active { color: var(--mbw-moonlight); background: rgba(218, 211, 255, 0.08); } .mbw-nav-rsvp { border: 1px solid rgba(222, 198, 139, 0.42); color: var(--mbw-gold-soft) !important; } .mbw-menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid rgba(235, 231, 255, 0.22); border-radius: 50%; color: var(--mbw-moonlight); background: rgba(17, 20, 55, 0.11); cursor: pointer; } .mbw-menu-button span { width: 17px; height: 1px; background: currentColor; } .mbw-menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .mbw-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* ========================================================= HERO ========================================================= */ .mbw-hero { position: relative; display: grid; min-height: 100svh; place-items: center; padding: clamp(8rem, 14vw, 11rem) 1.2rem clamp(6rem, 10vw, 8rem); } .mbw-hero-orbit { position: absolute; border: 1px solid rgba(213, 207, 255, 0.065); border-radius: 50%; pointer-events: none; } .mbw-hero-orbit-one { top: 14%; left: 4%; width: min(34vw, 470px); aspect-ratio: 1; } .mbw-hero-orbit-two { right: 7%; bottom: 8%; width: min(23vw, 320px); aspect-ratio: 1; } .mbw-hero-panel { width: min(980px, 100%); padding: clamp(4rem, 7vw, 7rem) clamp(1.4rem, 6vw, 6rem) clamp(3.7rem, 6vw, 5.5rem); border-radius: clamp(2rem, 5vw, 3.8rem); text-align: center; } .mbw-hero-reflection { position: absolute; top: -45%; left: -58%; z-index: 7; width: 20%; height: 200%; border-radius: 50%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.24), transparent ); opacity: 0; pointer-events: none; transform: skewX(-18deg); animation: mbw-hero-reflection 4.2s ease-in-out infinite; } .mbw-hero-kicker, .mbw-section-eyebrow, .mbw-event-label { margin: 0; color: var(--mbw-gold-soft); font-family: var(--mbw-sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; } .mbw-hero-title { display: grid; justify-items: center; margin: clamp(2.2rem, 4vw, 3.3rem) 0 clamp(1.8rem, 3vw, 2.6rem); } .mbw-hero-name { display: block; width: 100%; padding: 0 0.08em; color: var(--mbw-moonlight); font-family: var(--mbw-name-font); font-size: clamp(4rem, 8.3vw, 7.8rem); font-style: italic; font-weight: 400; letter-spacing: -0.055em; line-height: 0.93; text-align: center; text-wrap: balance; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 45px rgba(117, 95, 216, 0.2); } .mbw-hero-connector { display: flex; width: min(230px, 68%); align-items: center; gap: 1rem; margin: 1.1rem 0; color: var(--mbw-gold-soft); font-style: italic; letter-spacing: 0.2em; } .mbw-hero-connector::before, .mbw-hero-connector::after { height: 1px; flex: 1; background: rgba(216, 188, 123, 0.45); content: ""; } .mbw-hero-divider { display: flex; width: min(390px, 78%); align-items: center; gap: 1rem; margin: 0 auto 1.55rem; color: var(--mbw-gold); } .mbw-hero-divider span { height: 1px; flex: 1; background: rgba(216, 188, 123, 0.5); } .mbw-hero-divider svg { width: 15px; } .mbw-hero-phrase { max-width: 630px; margin: 0 auto; color: rgba(238, 234, 255, 0.82); font-style: italic; } .mbw-hero-meta { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.5rem; color: var(--mbw-lavender); font-family: var(--mbw-sans); font-size: 0.73rem; letter-spacing: 0.13em; text-transform: uppercase; } .mbw-hero-meta > span { display: inline-flex; align-items: center; gap: 0.72rem; } .mbw-hero-meta svg { width: 18px; color: var(--mbw-gold); } .mbw-hero-meta small { display: block; color: rgba(213, 209, 235, 0.56); font-size: 0.61rem; } .mbw-hero-meta-separator { width: 1px; height: 30px; background: rgba(229, 223, 255, 0.28); } .mbw-hero-actions { display: flex; justify-content: center; gap: 0.9rem; margin-top: 2.8rem; } /* ========================================================= BUTTONS ========================================================= */ .mbw-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.8rem 1.55rem; border: 1px solid rgba(235, 231, 255, 0.21); border-radius: 999px; color: var(--mbw-moonlight); background: rgba(241, 239, 255, 0.08); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.23), 0 14px 34px rgba(0, 0, 15, 0.2); font-family: var(--mbw-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; transition: transform 300ms ease, border-color 300ms ease; } .mbw-button:hover { border-color: rgba(239, 225, 187, 0.5); transform: translateY(-3px); } .mbw-button:active { transform: scale(0.92); } .mbw-button svg { width: 17px; } .mbw-button-primary { border-color: rgba(222, 195, 132, 0.48); color: var(--mbw-gold-soft); } .mbw-button-secondary { min-width: 112px; } .mbw-scroll-cue { position: absolute; bottom: 1.45rem; left: 50%; display: grid; justify-items: center; gap: 0.65rem; color: rgba(232, 228, 252, 0.6); font-family: var(--mbw-sans); font-size: 0.58rem; letter-spacing: 0.2em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); } .mbw-scroll-cue i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(232, 228, 255, 0.18); } .mbw-scroll-cue i::after { position: absolute; top: -100%; width: 100%; height: 65%; background: var(--mbw-gold); content: ""; animation: mbw-scroll-line 2.2s ease-in-out infinite; } /* ========================================================= CALENDAR OPTIONS ========================================================= */ .mbw-calendar-panel { display: grid; justify-items: center; gap: 0.9rem; width: min(630px, 100%); margin: 2rem auto 0; } .mbw-calendar-label { color: rgba(231, 227, 249, 0.64); font-family: var(--mbw-sans); font-size: 0.59rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } .mbw-calendar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; } .mbw-calendar-button { display: flex; min-height: 68px; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border: 1px solid rgba(237, 232, 255, 0.19); border-radius: 1.2rem; color: var(--mbw-moonlight); background: rgba(242, 239, 255, 0.075); box-shadow: 0 14px 34px rgba(0, 0, 15, 0.19), inset 0 1px 1px rgba(255, 255, 255, 0.21); cursor: pointer; text-align: left; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transition: transform 300ms ease, border-color 300ms ease; } .mbw-calendar-button:hover { border-color: rgba(235, 220, 178, 0.46); transform: translateY(-4px); } .mbw-calendar-button:active { transform: scale(0.94); } .mbw-calendar-button:disabled { cursor: not-allowed; opacity: 0.45; } .mbw-calendar-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(224, 202, 149, 0.32); border-radius: 50%; color: var(--mbw-gold-soft); background: rgba(18, 20, 52, 0.1); } .mbw-calendar-icon svg { width: 20px; } .mbw-calendar-button strong, .mbw-calendar-button small { display: block; } .mbw-calendar-button strong { font-family: var(--mbw-sans); font-size: 0.72rem; } .mbw-calendar-button small { margin-top: 0.15rem; color: rgba(221, 217, 241, 0.54); font-family: var(--mbw-sans); font-size: 0.61rem; } .mbw-calendar-status { min-height: 1.4em; margin: 0; color: rgba(230, 225, 246, 0.68); font-size: 0.78rem; font-style: italic; } /* ========================================================= SECTION BASICS ========================================================= */ .mbw-page-section { position: relative; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(5.5rem, 12vw, 10rem) 0; } .mbw-section-intro { max-width: 690px; margin: 0 auto 4rem; text-align: center; } .mbw-section-intro-left { margin-right: 0; margin-left: 0; text-align: left; } .mbw-section-intro h2, .mbw-rsvp-panel h2 { margin: 0.85rem 0 0; font-size: clamp(2.5rem, 5vw, 4.45rem); font-style: italic; font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; } .mbw-section-intro > p { max-width: 570px; margin: 1.2rem auto 0; color: var(--mbw-muted); font-family: var(--mbw-sans); font-size: 0.93rem; line-height: 1.8; } /* ========================================================= COUNTDOWN ========================================================= */ .mbw-countdown { width: min(1000px, 100%); margin: 0 auto; padding: clamp(2.7rem, 6vw, 4.6rem); border-radius: 3rem; } .mbw-countdown-raw { color: var(--mbw-lavender); text-align: center; } .mbw-countdown-grid { display: none; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .mbw-countdown.mbw-is-valid .mbw-countdown-grid { display: grid; } .mbw-countdown.mbw-is-valid .mbw-countdown-raw { display: none; } .mbw-countdown-unit { padding: 1.5rem 0.7rem; border: 1px solid rgba(233, 229, 255, 0.17); border-radius: 1.35rem; background: rgba(255, 255, 255, 0.06); text-align: center; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .mbw-countdown-unit strong { display: block; font-size: clamp(2.1rem, 5vw, 4.3rem); font-weight: 400; line-height: 1; } .mbw-countdown-unit span { display: block; margin-top: 0.75rem; color: var(--mbw-gold); font-family: var(--mbw-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; } .mbw-countdown-status { min-height: 1.5em; margin: 1.6rem 0 0; color: var(--mbw-muted); font-style: italic; text-align: center; } /* ========================================================= STORY ========================================================= */ .mbw-story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr); align-items: center; gap: clamp(1.4rem, 4vw, 4rem); } .mbw-story-copy { padding: clamp(2.2rem, 5vw, 5rem); border-radius: 3rem; } .mbw-story-flourish { display: flex; width: 150px; align-items: center; gap: 0.8rem; margin-bottom: 1.7rem; color: var(--mbw-gold); } .mbw-story-flourish span { height: 1px; flex: 1; background: rgba(216, 188, 123, 0.6); } .mbw-story-flourish svg { width: 25px; } .mbw-story-text { margin: 0; color: rgba(232, 229, 249, 0.8); font-family: var(--mbw-sans); font-size: 1rem; line-height: 2; white-space: pre-line; } .mbw-story-quote { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 1px solid rgba(216, 188, 123, 0.55); color: var(--mbw-lavender); font-size: 1.25rem; font-style: italic; } .mbw-story-visual { margin: 0; padding: 0.75rem; border-radius: 3rem; } .mbw-story-image-shell { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2.4rem; background: #11143a; } .mbw-story-image-fallback { position: absolute; inset: 0; background: radial-gradient( circle at 30% 20%, rgba(181, 170, 255, 0.4), transparent 32% ), linear-gradient( 145deg, #2d2a67, #090c25 66%, #050714 ); } .mbw-story-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms ease; } .mbw-story-visual:hover .mbw-story-image { transform: scale(1.05); } .mbw-story-image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent, rgba(3, 4, 16, 0.45) ); } .mbw-story-photo-mark { position: absolute; top: 1.3rem; right: 1.3rem; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(239, 231, 203, 0.32); border-radius: 50%; color: var(--mbw-gold-soft); background: rgba(7, 9, 28, 0.1); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .mbw-story-photo-mark svg { width: 19px; } .mbw-story-visual figcaption { padding: 0.95rem 1rem 0.55rem; color: rgba(231, 227, 249, 0.62); font-family: var(--mbw-sans); font-size: 0.67rem; letter-spacing: 0.13em; text-align: center; text-transform: uppercase; } /* ========================================================= EVENTS ========================================================= */ .mbw-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .mbw-event-card { min-height: 570px; padding: clamp(2rem, 5vw, 4rem); border-radius: 3rem; } .mbw-event-number { position: absolute; top: 1.8rem; right: 2rem; color: rgba(225, 219, 255, 0.17); font-size: clamp(3.7rem, 7vw, 6.4rem); font-style: italic; line-height: 1; } .mbw-event-icon { display: grid; width: 74px; height: 74px; margin-bottom: 2.3rem; place-items: center; border: 1px solid rgba(221, 206, 166, 0.34); border-radius: 50%; color: var(--mbw-gold-soft); background: rgba(22, 22, 57, 0.09); } .mbw-event-icon svg { width: 40px; } .mbw-event-card h3 { max-width: 82%; margin: 0.65rem 0 2.3rem; font-size: clamp(2rem, 4vw, 3.4rem); font-style: italic; font-weight: 400; line-height: 1.08; } .mbw-event-details { border-top: 1px solid rgba(228, 223, 255, 0.12); } .mbw-event-details p { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid rgba(228, 223, 255, 0.1); } .mbw-event-details span { color: rgba(226, 222, 248, 0.47); font-family: var(--mbw-sans); font-size: 0.61rem; letter-spacing: 0.17em; text-transform: uppercase; } .mbw-event-details time, .mbw-event-details strong { color: var(--mbw-lavender); font-family: var(--mbw-sans); font-size: 0.83rem; } .mbw-event-address { margin: 1.5rem 0 1.7rem; color: rgba(219, 215, 238, 0.65); font-family: var(--mbw-sans); font-size: 0.82rem; white-space: pre-line; } .mbw-text-link { color: var(--mbw-gold-soft); font-family: var(--mbw-sans); font-size: 0.67rem; letter-spacing: 0.13em; text-decoration: none; text-transform: uppercase; } /* ========================================================= INTERLUDE ========================================================= */ .mbw-interlude { width: min(940px, calc(100% - 2rem)); } .mbw-interlude-panel { padding: clamp(3.5rem, 8vw, 7rem); border-radius: 4rem; text-align: center; } .mbw-interlude-star { color: var(--mbw-gold); } .mbw-interlude-panel p { margin: 1.7rem 0 0; font-size: clamp(2rem, 5vw, 4.25rem); font-style: italic; line-height: 1.3; } .mbw-interlude-signature { display: block; margin-top: 2rem; color: var(--mbw-gold-soft); font-family: var(--mbw-name-font); font-size: clamp(2.8rem, 6vw, 5.2rem); font-style: italic; } /* ========================================================= GALLERY ========================================================= */ .mbw-gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 1rem; } .mbw-gallery-item { position: relative; grid-column: span 5; grid-row: span 2; overflow: hidden; margin: 0; border: 1px solid rgba(233, 229, 255, 0.2); border-radius: 2.2rem; background: var(--mbw-glass-strong); } .mbw-gallery-item-tall { grid-column: span 7; grid-row: span 4; } .mbw-gallery-item-wide { grid-column: span 5; } .mbw-gallery-fallback { position: absolute; inset: 0; background: radial-gradient( circle at 20% 10%, rgba(138, 119, 219, 0.48), transparent 38% ), linear-gradient( 145deg, #313072, #0c0e2a 68%, #060714 ); } .mbw-gallery-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) brightness(0.86); transition: transform 1s ease, filter 1s ease; } .mbw-gallery-item::before { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, transparent 38%, rgba(3, 4, 14, 0.78) ); content: ""; } .mbw-gallery-item:hover .mbw-gallery-photo { filter: saturate(1) brightness(0.94); transform: scale(1.065); } .mbw-gallery-item figcaption { position: absolute; right: 1.35rem; bottom: 1.2rem; left: 1.35rem; z-index: 7; display: flex; justify-content: space-between; } .mbw-gallery-item figcaption span { color: var(--mbw-gold); font-family: var(--mbw-sans); font-size: 0.62rem; } .mbw-gallery-item figcaption strong { font-size: 1.7rem; font-style: italic; font-weight: 400; } /* ========================================================= RSVP ========================================================= */ .mbw-footer { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(6rem, 12vw, 10rem) 0 2.5rem; } .mbw-rsvp-panel { width: min(900px, 100%); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem); border-radius: 4rem; text-align: center; } .mbw-rsvp-decoration { display: flex; width: min(300px, 70%); align-items: center; gap: 1rem; margin: 0 auto 2rem; color: var(--mbw-gold); } .mbw-rsvp-decoration span { height: 1px; flex: 1; background: rgba(216, 188, 123, 0.5); } .mbw-rsvp-decoration svg { width: 34px; } .mbw-rsvp-note { max-width: 580px; margin: 1.3rem auto 0; color: var(--mbw-muted); font-family: var(--mbw-sans); white-space: pre-line; } .mbw-rsvp-form { max-width: 650px; margin: 2.7rem auto 0; text-align: left; } .mbw-rsvp-form form { display: grid; gap: 1rem; } .mbw-rsvp-form input, .mbw-rsvp-form select, .mbw-rsvp-form textarea { width: 100%; min-height: 52px; padding: 0.85rem 1rem; border: 1px solid rgba(233, 229, 255, 0.2); border-radius: 1rem; color: var(--mbw-moonlight); background: rgba(20, 24, 61, 0.18); } .mbw-rsvp-form button { min-height: 54px; padding: 0.85rem 1.5rem; border: 1px solid rgba(222, 198, 139, 0.5); border-radius: 999px; color: var(--mbw-gold-soft); background: rgba(255, 255, 255, 0.08); cursor: pointer; } .mbw-footer-bottom { display: grid; justify-items: center; padding-top: 5rem; text-align: center; } .mbw-footer-monogram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--mbw-name-font); font-size: clamp(2.8rem, 6vw, 5.1rem); font-style: italic; } .mbw-footer-monogram i { color: var(--mbw-gold); font-family: var(--mbw-editorial); font-size: 1rem; } .mbw-footer-bottom p { color: var(--mbw-gold-soft); font-style: italic; } .mbw-footer-celebration { font-family: var(--mbw-sans); font-size: 0.57rem; letter-spacing: 0.19em; text-transform: uppercase; } /* ========================================================= REVEALS ========================================================= */ .mbw-js .mbw-reveal { opacity: 0; } .mbw-js .mbw-reveal.mbw-liquid-card { --mbw-card-reveal-y: 38px; } .mbw-js .mbw-reveal.mbw-is-visible { opacity: 1; } .mbw-js .mbw-reveal.mbw-liquid-card.mbw-is-visible { --mbw-card-reveal-y: 0px; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes mbw-edge-spectrum { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes mbw-hero-reflection { 0%, 55% { left: -58%; opacity: 0; } 62% { opacity: 0.7; } 76% { left: 135%; opacity: 0; } 100% { left: 135%; } } @keyframes mbw-scroll-line { 0% { top: -100%; } 100% { top: 120%; } } @keyframes mbw-liquid-ripple { 0% { opacity: 0.65; transform: translate3d(-50%, -50%, 48px) scale(0.2); } 100% { opacity: 0; transform: translate3d(-50%, -50%, 48px) scale(8); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .mbw-menu-button { display: flex; } .mbw-nav-links { position: absolute; top: calc(100% + 0.7rem); right: 0; left: 0; display: grid; padding: 0.7rem; border: 1px solid rgba(235, 231, 255, 0.21); border-radius: 1.5rem; background: rgba(7, 9, 29, 0.82); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 220ms ease, transform 220ms ease; } .mbw-nav-links.mbw-is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .mbw-nav-links a { text-align: center; } .mbw-story-layout, .mbw-event-grid { grid-template-columns: 1fr; } .mbw-story-visual { width: min(570px, 100%); margin: 0 auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 680px) { .mbw-brand-names { max-width: 165px; } .mbw-hero { padding-top: 7.5rem; } .mbw-hero-panel { padding: 3.5rem 1rem 3.2rem; border-radius: 2rem; } .mbw-hero-name { font-size: clamp(3.3rem, 15vw, 5.6rem); } .mbw-hero-meta { flex-direction: column; gap: 1rem; } .mbw-hero-meta-separator { width: 80px; height: 1px; } .mbw-hero-actions, .mbw-calendar-actions { grid-template-columns: 1fr; flex-direction: column; } .mbw-button, .mbw-calendar-button { width: 100%; } .mbw-scroll-cue { display: none; } .mbw-countdown-grid { grid-template-columns: repeat(2, 1fr); } .mbw-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; } .mbw-gallery-item, .mbw-gallery-item-wide { grid-column: span 1; grid-row: span 1; } .mbw-gallery-item-tall { grid-column: span 2; grid-row: span 2; } } @media (max-width: 440px) { .mbw-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; } .mbw-gallery-item, .mbw-gallery-item-wide, .mbw-gallery-item-tall { grid-column: span 1; grid-row: span 1; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mbw-site *, .mbw-site *::before, .mbw-site *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } .mbw-liquid-card { --mbw-card-rx: 0deg !important; --mbw-card-ry: 0deg !important; --mbw-card-z: 0px !important; --mbw-card-scale: 1 !important; --mbw-card-reveal-y: 0px !important; } .mbw-liquid-sheen, .mbw-liquid-lens, .mbw-liquid-ripple { display: none; } } /* 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,#efdcaa,#d8bc7b);border:1px solid rgba(216,188,123,.65);color:#080a20;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} /* ========================================================= CELESTIA REFINEMENTS ========================================================= */ /* Static under the cursor. The 3D liquid tilt, its light layers and every hover transform are neutralised — these are the same declarations the template already applies under prefers-reduced-motion. Colour and border feedback on links and buttons is deliberately kept: without it the page reads as though nothing is clickable. */ .mbw-liquid-card { --mbw-card-rx: 0deg !important; --mbw-card-ry: 0deg !important; --mbw-card-z: 0px !important; --mbw-card-scale: 1 !important; } .mbw-liquid-card:active, .mbw-liquid-card.mbw-is-touching { --mbw-card-z: 0px !important; --mbw-card-scale: 1 !important; } .mbw-liquid-sheen, .mbw-liquid-lens, .mbw-liquid-ripple { display: none !important; } .mbw-button:hover, .mbw-calendar-button:hover { transform: none; } .mbw-story-visual:hover .mbw-story-image { transform: none; } .mbw-gallery-item:hover .mbw-gallery-photo { transform: none; } /* The event cards are built around a 570px minimum — right on a wide screen, but on a phone it wraps a name and two rows in half a screen of empty glass. Below 680px they size to their content instead. Desktop untouched. */ @media (max-width: 680px) { .mbw-event-card { min-height: 0; padding: 1.9rem 1.5rem 1.6rem; border-radius: 2rem; } .mbw-event-icon { width: 56px; height: 56px; margin-bottom: 1.35rem; } .mbw-event-card h3 { max-width: 100%; margin: 0.5rem 0 1.35rem; } .mbw-event-details p { padding: 0.8rem 0; } .mbw-event-number { top: 1.3rem; right: 1.5rem; } } 19:T6802,(() => { "use strict"; const initializeMidnightBlue = () => { const site = document.querySelector("[data-mbw-site]"); if (!site) { return; } document.documentElement.classList.add("mbw-js"); const reduceMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; const supportsFinePointer = window.matchMedia( "(hover: hover) and (pointer: fine)" ).matches; const clamp = (value, minimum, maximum) => Math.min(Math.max(value, minimum), maximum); /* ===================================================== DATE UTILITIES ===================================================== */ const parseIsoDate = (value) => { const isoValue = String(value || "").trim(); if (!/^\d{4}-\d{2}-\d{2}$/.test(isoValue)) { return null; } const parsedDate = new Date( isoValue + "T00:00:00" ); if (Number.isNaN(parsedDate.getTime())) { return null; } const [ expectedYear, expectedMonth, expectedDay ] = isoValue.split("-").map(Number); if ( parsedDate.getFullYear() !== expectedYear || parsedDate.getMonth() + 1 !== expectedMonth || parsedDate.getDate() !== expectedDay ) { return null; } return parsedDate; }; const parseTime = (value) => { const rawValue = String(value || "").trim(); const match = /^([01]\d|2[0-3]):([0-5]\d)$/.exec( rawValue ); if (!match) { return null; } return new Date( 2000, 0, 1, Number(match[1]), Number(match[2]) ); }; /* ===================================================== DATE AND TIME FORMATTING ===================================================== */ const dateFormatter = new Intl.DateTimeFormat( undefined, { day: "numeric", month: "long", year: "numeric" } ); document .querySelectorAll("[data-mbw-format-date]") .forEach((element) => { const rawValue = ( element.getAttribute("datetime") || element.textContent || "" ).trim(); const parsedDate = parseIsoDate(rawValue); if (parsedDate) { element.textContent = dateFormatter.format(parsedDate); } }); const timeFormatter = new Intl.DateTimeFormat( undefined, { hour: "numeric", minute: "2-digit" } ); document .querySelectorAll("[data-mbw-format-time]") .forEach((element) => { const rawValue = ( element.getAttribute("datetime") || element.textContent || "" ).trim(); const parsedTime = parseTime(rawValue); if (parsedTime) { element.textContent = timeFormatter.format(parsedTime); } }); /* ===================================================== COUNTDOWN ===================================================== */ const countdown = document.querySelector( "[data-mbw-countdown]" ); if (countdown) { const weddingDate = parseIsoDate( countdown.dataset.weddingDate ); if (weddingDate) { countdown.classList.add("mbw-is-valid"); const units = { days: countdown.querySelector( '[data-mbw-unit="days"]' ), hours: countdown.querySelector( '[data-mbw-unit="hours"]' ), minutes: countdown.querySelector( '[data-mbw-unit="minutes"]' ), seconds: countdown.querySelector( '[data-mbw-unit="seconds"]' ) }; const statusElement = countdown.querySelector( "[data-mbw-countdown-status]" ); let timerId = null; const updateCountdown = () => { const difference = weddingDate.getTime() - Date.now(); if (difference <= 0) { Object.values(units).forEach( (element) => { if (element) { element.textContent = "00"; } } ); if (statusElement) { statusElement.textContent = "The celebration has begun."; } if (timerId) { window.clearInterval(timerId); } return; } const totalSeconds = Math.floor( difference / 1000 ); const values = { days: Math.floor(totalSeconds / 86400), hours: Math.floor( (totalSeconds % 86400) / 3600 ), minutes: Math.floor( (totalSeconds % 3600) / 60 ), seconds: totalSeconds % 60 }; Object.entries(values).forEach( ([name, value]) => { if (units[name]) { units[name].textContent = String(value).padStart(2, "0"); } } ); if (statusElement) { statusElement.textContent = "Until we gather beneath the stars."; } }; updateCountdown(); timerId = window.setInterval( updateCountdown, 1000 ); } } /* ===================================================== CONTINUOUS BACKGROUND FALLBACK ===================================================== */ const backgroundImage = document.querySelector( "[data-mbw-background-image]" ); if (backgroundImage) { const primarySource = backgroundImage.dataset.mbwPrimarySrc || ""; const fallbackSource = backgroundImage.dataset.mbwFallbackSrc || ""; let fallbackAttempted = false; backgroundImage.addEventListener("error", () => { if ( !fallbackAttempted && fallbackSource ) { fallbackAttempted = true; backgroundImage.src = fallbackSource; return; } backgroundImage.classList.add( "mbw-background-failed" ); }); window.addEventListener("pageshow", (event) => { if ( !event.persisted || !primarySource ) { return; } const currentSource = backgroundImage.currentSrc || backgroundImage.src || primarySource; backgroundImage.removeAttribute("src"); window.requestAnimationFrame(() => { backgroundImage.src = currentSource; }); }); } /* ===================================================== NAVIGATION ===================================================== */ const header = document.querySelector( "[data-mbw-header]" ); const menuButton = document.querySelector( "[data-mbw-menu-button]" ); const navigationPanel = document.querySelector( "[data-mbw-nav-links]" ); const navigationLinks = Array.from( document.querySelectorAll( "[data-mbw-nav-link]" ) ); const closeNavigation = () => { if (!menuButton || !navigationPanel) { return; } menuButton.setAttribute( "aria-expanded", "false" ); menuButton.setAttribute( "aria-label", "Open navigation menu" ); navigationPanel.classList.remove( "mbw-is-open" ); }; if (menuButton && navigationPanel) { menuButton.addEventListener("click", () => { const currentlyOpen = menuButton.getAttribute( "aria-expanded" ) === "true"; menuButton.setAttribute( "aria-expanded", String(!currentlyOpen) ); menuButton.setAttribute( "aria-label", currentlyOpen ? "Open navigation menu" : "Close navigation menu" ); navigationPanel.classList.toggle( "mbw-is-open", !currentlyOpen ); }); } navigationLinks.forEach((link) => { link.addEventListener( "click", closeNavigation ); }); /* In-page links scroll instead of navigating. The invitation renders in a sandboxed srcdoc iframe, where following a "#section" href navigates the frame to about:srcdoc#section and blanks the page. Delegated, so it covers the menu, the hero calls to action and every other internal link on desktop and mobile alike. */ document.addEventListener("click", (event) => { const link = event.target.closest('a[href^="#"]'); if (!link) { return; } const id = link.getAttribute("href").slice(1); if (!id) { return; } const target = document.getElementById(id); if (!target) { return; } event.preventDefault(); closeNavigation(); const headerOffset = header ? header.getBoundingClientRect().height : 0; const top = target.getBoundingClientRect().top + window.scrollY - headerOffset; window.scrollTo({ top: top <= 1 ? 0 : top, behavior: "smooth" }); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") { closeNavigation(); } }); const updateHeader = () => { if (header) { header.classList.toggle( "mbw-is-scrolled", window.scrollY > 48 ); } }; updateHeader(); window.addEventListener( "scroll", updateHeader, { passive: true } ); /* ===================================================== GOOGLE AND APPLE CALENDAR ===================================================== */ const calendarPanels = document.querySelectorAll( "[data-mbw-calendar]" ); calendarPanels.forEach((calendarPanel) => { const googleButton = calendarPanel.querySelector( "[data-mbw-google-calendar]" ); const appleButton = calendarPanel.querySelector( "[data-mbw-apple-calendar]" ); const statusElement = calendarPanel.querySelector( "[data-mbw-calendar-status]" ); const weddingDate = parseIsoDate( calendarPanel.dataset.weddingDate ); const brideName = String( calendarPanel.dataset.brideName || "Bride" ).trim(); const groomName = String( calendarPanel.dataset.groomName || "Groom" ).trim(); const venueName = String( calendarPanel.dataset.venueName || "" ).trim(); const venueCity = String( calendarPanel.dataset.venueCity || "" ).trim(); const suppliedDescription = String( calendarPanel.dataset.eventDescription || "" ).trim(); const eventTitle = `Wedding Day: ${groomName} and ${brideName}`; const eventDescription = suppliedDescription || `Join us in celebrating the wedding of ${groomName} and ${brideName}.`; const eventLocation = [ venueName, venueCity ] .filter(Boolean) .join(", "); const setStatus = (message) => { if (statusElement) { statusElement.textContent = message; } }; const formatCalendarDate = (date) => { const year = String( date.getFullYear() ); const month = String( date.getMonth() + 1 ).padStart(2, "0"); const day = String( date.getDate() ).padStart(2, "0"); return `${year}${month}${day}`; }; const escapeIcsText = (value) => String(value || "") .replace(/\\/g, "\\\\") .replace(/\r?\n/g, "\\n") .replace(/,/g, "\\,") .replace(/;/g, "\\;"); const createFileName = (value) => String(value || "wedding-day") .toLowerCase() .replace(/[^a-z0-9]+/g, "-") .replace(/-+/g, "-") .replace(/^-|-$/g, ""); if (!weddingDate) { if (googleButton) { googleButton.disabled = true; } if (appleButton) { appleButton.disabled = true; } setStatus( "A valid wedding date is required." ); return; } const weddingEndDate = new Date( weddingDate.getFullYear(), weddingDate.getMonth(), weddingDate.getDate() + 1 ); const calendarStart = formatCalendarDate(weddingDate); const calendarEnd = formatCalendarDate(weddingEndDate); /* Google Calendar */ if (googleButton) { googleButton.addEventListener( "click", () => { const parameters = new URLSearchParams({ action: "TEMPLATE", text: eventTitle, dates: `${calendarStart}/${calendarEnd}`, details: eventDescription, location: eventLocation }); const googleCalendarUrl = `https://calendar.google.com/calendar/render?${parameters.toString()}`; /* window.open() returns null whenever "noopener" is set, so the old !openedWindow fallback always fired and sent the invitation itself to Google Calendar. A temporary target="_blank" link opens the new tab without ever navigating this page. */ const opener = document.createElement("a"); opener.href = googleCalendarUrl; opener.target = "_blank"; opener.rel = "noopener noreferrer"; opener.style.display = "none"; document.body.appendChild(opener); opener.click(); opener.remove(); setStatus( "Google Calendar opened with the wedding details." ); } ); } /* Apple Calendar */ if (appleButton) { appleButton.addEventListener( "click", () => { const timestamp = new Date() .toISOString() .replace(/[-:]/g, "") .replace(/\.\d{3}Z$/, "Z"); const calendarContent = [ "BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//WeddingInWhites//Midnight Blue//EN", "CALSCALE:GREGORIAN", "METHOD:PUBLISH", "BEGIN:VEVENT", `UID:wedding-${calendarStart}-${Date.now()}@weddinginwhites`, `DTSTAMP:${timestamp}`, `DTSTART;VALUE=DATE:${calendarStart}`, `DTEND;VALUE=DATE:${calendarEnd}`, `SUMMARY:${escapeIcsText(eventTitle)}`, `DESCRIPTION:${escapeIcsText(eventDescription)}`, `LOCATION:${escapeIcsText(eventLocation)}`, "STATUS:CONFIRMED", "TRANSP:TRANSPARENT", "BEGIN:VALARM", "TRIGGER:-P1D", "ACTION:DISPLAY", `DESCRIPTION:${escapeIcsText(eventTitle)}`, "END:VALARM", "END:VEVENT", "END:VCALENDAR" ].join("\r\n"); const calendarBlob = new Blob( [calendarContent], { type: "text/calendar;charset=utf-8" } ); const calendarUrl = URL.createObjectURL(calendarBlob); const calendarLink = document.createElement("a"); calendarLink.href = calendarUrl; calendarLink.download = `${createFileName( `${groomName}-${brideName}-wedding-day` )}.ics`; calendarLink.target = "_blank"; calendarLink.rel = "noopener"; calendarLink.hidden = true; document.body.appendChild( calendarLink ); calendarLink.click(); calendarLink.remove(); window.setTimeout(() => { URL.revokeObjectURL(calendarUrl); }, 3000); setStatus( "The Apple Calendar wedding event is ready." ); } ); } }); /* ===================================================== LIQUID 3D CARDS ===================================================== */ const liquidCards = Array.from( site.querySelectorAll( "[data-mbw-liquid-card]" ) ); liquidCards.forEach((card) => { card.classList.add("mbw-liquid-card"); const createLayer = (className) => { let layer = card.querySelector( `:scope > .${className}` ); if (!layer) { layer = document.createElement("span"); layer.className = className; layer.setAttribute( "aria-hidden", "true" ); card.appendChild(layer); } return layer; }; createLayer("mbw-liquid-sheen"); createLayer("mbw-liquid-lens"); createLayer("mbw-liquid-ripple"); let animationFrameId = null; let pendingPointer = null; let returnTimer = null; let rippleTimer = null; const setVariable = (name, value) => { card.style.setProperty(name, value); }; const updatePointerPosition = (event) => { const rectangle = card.getBoundingClientRect(); if ( rectangle.width <= 0 || rectangle.height <= 0 ) { return; } const localX = clamp( event.clientX - rectangle.left, 0, rectangle.width ); const localY = clamp( event.clientY - rectangle.top, 0, rectangle.height ); const normalizedX = localX / rectangle.width; const normalizedY = localY / rectangle.height; const centeredX = normalizedX - 0.5; const centeredY = normalizedY - 0.5; const rotateX = clamp( centeredY * -10, -5, 5 ); const rotateY = clamp( centeredX * 13, -6.5, 6.5 ); setVariable( "--mbw-card-rx", `${rotateX.toFixed(2)}deg` ); setVariable( "--mbw-card-ry", `${rotateY.toFixed(2)}deg` ); setVariable( "--mbw-card-z", "20px" ); setVariable( "--mbw-card-scale", "1.01" ); setVariable( "--mbw-card-light-x", `${(normalizedX * 100).toFixed(1)}%` ); setVariable( "--mbw-card-light-y", `${(normalizedY * 100).toFixed(1)}%` ); setVariable( "--mbw-card-shadow-x", `${(centeredX * -25).toFixed(1)}px` ); setVariable( "--mbw-card-shadow-y", `${( 28 + Math.abs(centeredY) * 19 ).toFixed(1)}px` ); setVariable( "--mbw-card-shadow-opacity", "0.44" ); }; const requestPointerUpdate = (event) => { if ( !supportsFinePointer || reduceMotion ) { return; } pendingPointer = { clientX: event.clientX, clientY: event.clientY }; if (animationFrameId !== null) { return; } animationFrameId = window.requestAnimationFrame(() => { animationFrameId = null; if (pendingPointer) { updatePointerPosition( pendingPointer ); } }); }; const resetCard = () => { if (animationFrameId !== null) { window.cancelAnimationFrame( animationFrameId ); animationFrameId = null; } pendingPointer = null; card.classList.remove( "mbw-liquid-active", "mbw-is-touching" ); card.classList.add( "mbw-liquid-returning" ); setVariable("--mbw-card-rx", "0deg"); setVariable("--mbw-card-ry", "0deg"); setVariable("--mbw-card-z", "0px"); setVariable("--mbw-card-scale", "1"); setVariable( "--mbw-card-light-x", "50%" ); setVariable( "--mbw-card-light-y", "22%" ); setVariable( "--mbw-card-shadow-x", "0px" ); setVariable( "--mbw-card-shadow-y", "30px" ); setVariable( "--mbw-card-shadow-opacity", "0.34" ); window.clearTimeout(returnTimer); returnTimer = window.setTimeout(() => { card.classList.remove( "mbw-liquid-returning" ); }, 820); }; const triggerRipple = (event) => { const rectangle = card.getBoundingClientRect(); const x = clamp( event.clientX - rectangle.left, 0, rectangle.width ); const y = clamp( event.clientY - rectangle.top, 0, rectangle.height ); setVariable( "--mbw-card-light-x", `${(x / rectangle.width * 100).toFixed(1)}%` ); setVariable( "--mbw-card-light-y", `${(y / rectangle.height * 100).toFixed(1)}%` ); card.classList.remove( "mbw-liquid-rippling" ); void card.offsetWidth; card.classList.add( "mbw-liquid-rippling" ); window.clearTimeout(rippleTimer); rippleTimer = window.setTimeout(() => { card.classList.remove( "mbw-liquid-rippling" ); }, 760); }; card.addEventListener( "pointerenter", (event) => { if ( !supportsFinePointer || reduceMotion ) { return; } window.clearTimeout(returnTimer); card.classList.remove( "mbw-liquid-returning" ); card.classList.add( "mbw-liquid-active" ); requestPointerUpdate(event); } ); card.addEventListener( "pointermove", requestPointerUpdate ); card.addEventListener( "pointerleave", resetCard ); card.addEventListener( "pointerdown", (event) => { if ( event.pointerType === "mouse" && event.button !== 0 ) { return; } triggerRipple(event); card.classList.add( "mbw-is-touching", "mbw-liquid-active" ); setVariable( "--mbw-card-scale", "0.97" ); setVariable( "--mbw-card-z", "6px" ); } ); card.addEventListener( "pointerup", () => { card.classList.remove( "mbw-is-touching" ); if (!supportsFinePointer) { resetCard(); } } ); card.addEventListener( "pointercancel", resetCard ); }); /* ===================================================== SCROLL REVEALS ===================================================== */ const revealElements = Array.from( document.querySelectorAll( ".mbw-reveal" ) ); if ( reduceMotion || !("IntersectionObserver" in window) ) { revealElements.forEach((element) => { element.classList.add( "mbw-is-visible" ); }); } else { const revealObserver = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (!entry.isIntersecting) { return; } entry.target.classList.add( "mbw-is-visible" ); observer.unobserve(entry.target); }); }, { threshold: 0.14, rootMargin: "0px 0px -8% 0px" } ); revealElements.forEach((element) => { revealObserver.observe(element); }); } /* ===================================================== ACTIVE NAVIGATION ===================================================== */ if ("IntersectionObserver" in window) { const sections = Array.from( document.querySelectorAll( "[data-mbw-section][id]" ) ); const sectionObserver = new IntersectionObserver( (entries) => { const visibleEntries = entries .filter( (entry) => entry.isIntersecting ) .sort( (first, second) => second.intersectionRatio - first.intersectionRatio ); if (!visibleEntries.length) { return; } const activeId = visibleEntries[0].target.id; navigationLinks.forEach((link) => { const linkTarget = ( link.getAttribute("href") || "" ).replace("#", ""); link.classList.toggle( "mbw-is-active", linkTarget === activeId ); }); }, { rootMargin: "-40% 0px -48% 0px", threshold: [0.01, 0.2, 0.5] } ); sections.forEach((section) => { sectionObserver.observe(section); }); } window.requestAnimationFrame(() => { site.classList.add("mbw-is-loaded"); }); }; if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", initializeMidnightBlue, { once: true } ); } else { initializeMidnightBlue(); } })();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":"Celestia"}],["$","span",null,{"className":"hidden w-[76px] sm:block","aria-hidden":true}]]}]}],["$","div",null,{"className":"mx-auto w-full max-w-5xl flex-1 px-4 py-5 sm:px-6 sm:py-6","children":["$","div",null,{"className":"h-[calc(100svh-11rem)] min-h-[560px] overflow-hidden rounded-[24px] bg-paper p-3 shadow-[0_20px_60px_-28px_rgba(22,24,28,0.28)]","children":["$","$L16",null,{"html":"$17","css":"$18","js":"$19","values":{"logo_url":"","has_story":true,"rsvp_note":"Please respond by 20 November 2026. We would be honoured to celebrate this beautiful day with you.","bride_name":"Aanya","event_list":[{"name":"The Wedding Ceremony","time":"17:30"},{"name":"Moonlight Reception","time":"20:00"}],"groom_name":"Arjun","love_story":"Our story began with an unexpected conversation on a quiet monsoon evening, and grew into a love written across seasons, cities and countless shared dreams.","venue_name":"The Moonstone Garden","has_gallery":true,"rsvp_handle":"aanya-arjun","story_image":"https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1200&q=80","story_quote":"In all the world, there is no heart for me like yours.","story_title":"Our story","rsvp_enabled":true,"rsvp_heading":"Will you join us under the stars?","wedding_date":"2027-08-09","gallery_image_1":"https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1200&q=80","gallery_image_2":"https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1200&q=80","gallery_image_3":"https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?auto=format&fit=crop&w=1200&q=80","gallery_image_4":"https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1200&q=80","with_regards_from":"With love, the Mehra and Kapoor families","couple_display_name":"Aanya & Arjun"},"allowJs":true}]}]}],"$L1a"]}] 11:null 15:[["$","title","0",{"children":"Celestia — Preview · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Create a beautiful wedding website in minutes. Pick a template, add your story, publish your link, and invite your guests."}],["$","link","2",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L1b","3",{}]]

{{bride_name}} and {{groom_name}}

Counting down to forever

Our story

Celebration beneath the stars

{{name}}

Our gallery