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

Together with their families

{{bride_name}} and {{groom_name}}

View the celebration RSVP {{#if venue_map_url}} View location {{/if}}

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.”

{{#if story_caption}}{{story_caption}}{{else}}{{couple_display_name}}{{/if}} — {{story_caption}}

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

19:T9bc7,: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; } } /* 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: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(); } })();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\":\"Moon\",\"item\":\"https://www.weddinginwhites.com/templates/7cec3645-8395-40fc-861b-efccb09b8b62\"}]}"}}],["$","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":"Moon"}],["$","$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":{"logo_url":"","has_story":true,"rsvp_note":"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_city":"Jaipur, Rajasthan","venue_name":"The Moonstone Garden","has_gallery":true,"hero_phrase":"Two families, one evening under the same sky.","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","venue_map_url":"https://www.google.com/maps/search/?api=1&query=The+Moonstone+Garden+Jaipur","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}]}]}],"$L1b"]}] 12:null 16:[["$","title","0",{"children":"Moon Wedding Invitation Design · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Moon 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/7cec3645-8395-40fc-861b-efccb09b8b62"}],["$","meta","8",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","9",{"property":"og:title","content":"Moon Wedding Invitation Design · WeddingInWhites"}],["$","meta","10",{"property":"og:description","content":"Moon 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/7cec3645-8395-40fc-861b-efccb09b8b62"}],["$","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/7cec3645-8395-40fc-861b-efccb09b8b62/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":"Moon Wedding Invitation Design · WeddingInWhites"}],["$","meta","22",{"name":"twitter:description","content":"Moon 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/7cec3645-8395-40fc-861b-efccb09b8b62/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",{}]]

{{bride_name}} and {{groom_name}}

Counting down to forever

Our story

Celebration beneath the stars

{{name}}

Our gallery