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:T82fa, {{bride_name}} & {{groom_name}} — Wedding Invitation

${{bride_name}} and {{groom_name}}$

Together with their families

{{bride_name}} & {{groom_name}}

View Wedding Details {{#if rsvp_enabled}} Kindly Respond {{/if}}

Our Story

A beautiful journey to forever

The Wedding

Celebrate with us

We would be honoured by your presence as we begin this beautiful new chapter together.

Wedding Ceremony

{{bride_name}} & {{groom_name}}

Date: {{wedding_date_time}}
Time: {{wedding_date_time}}
Venue: {{venue_name}}
Address: {{venue_address}}

Add to Google Calendar Save the wedding celebration {{#if venue_location_url}} View Location Open in Google Maps {{/if}}

18:T936f,.wwr-app { --wwr-burgundy: #681d2c; --wwr-burgundy-deep: #3d0d18; --wwr-burgundy-soft: #8a3445; --wwr-cream: #f6eedf; --wwr-ivory: #fffaf0; --wwr-paper: #efe2cd; --wwr-ink: #351f22; --wwr-muted: #786465; --wwr-gold: #b9934d; --wwr-gold-light: #d7ba78; --wwr-line: rgba(105, 29, 44, 0.2); --wwr-shadow: 0 24px 70px rgba(52, 12, 24, 0.2); min-height: 100vh; overflow: clip; color: var(--wwr-ink); background: var(--wwr-cream); font-family: Georgia, "Times New Roman", serif; line-height: 1.6; } .wwr-app, .wwr-app * { box-sizing: border-box; } .wwr-app a { color: inherit; } .wwr-app img { display: block; max-width: 100%; } body.wwr-lock { overflow: hidden; } .wwr-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Opening letter */ .wwr-opening { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 48px 24px 72px; overflow: hidden; background: radial-gradient( circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 34% ), linear-gradient(145deg, #eadcc6, #f8f0e2 48%, #e8d7bd); perspective: 1600px; transition: opacity 0.65s ease 1.05s, visibility 0s linear 1.7s; } .wwr-opening::before, .wwr-opening::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .wwr-opening::before { opacity: 0.22; background-image: repeating-linear-gradient( 7deg, rgba(75, 49, 35, 0.08) 0 1px, transparent 1px 7px ), repeating-linear-gradient( 93deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 9px ); mix-blend-mode: multiply; } .wwr-opening::after { box-shadow: inset 0 0 160px rgba(73, 34, 27, 0.18); } .wwr-opening-glow { position: absolute; width: min(72vw, 850px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 250, 240, 0.78); filter: blur(44px); } .wwr-envelope { position: relative; width: min(82vw, 680px); aspect-ratio: 1.55 / 1; padding: 0; border: 0; border-radius: 4px; color: var(--wwr-cream); background: transparent; appearance: none; cursor: pointer; transform-style: preserve-3d; filter: drop-shadow(0 34px 32px rgba(55, 13, 24, 0.28)); transition: transform 0.45s ease; } .wwr-envelope:hover { transform: translateY(-4px); } .wwr-envelope:focus-visible { outline: 3px solid var(--wwr-gold-light); outline-offset: 10px; } .wwr-envelope-shadow { position: absolute; left: 8%; right: 8%; bottom: -8%; height: 13%; border-radius: 50%; background: rgba(61, 13, 24, 0.28); filter: blur(18px); transform: translateZ(-20px); } .wwr-envelope-back, .wwr-envelope-front, .wwr-flap { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 4px; transform-style: preserve-3d; } .wwr-envelope-back { z-index: 1; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.025), transparent 35% ), linear-gradient( 145deg, var(--wwr-burgundy-soft), var(--wwr-burgundy) 42%, var(--wwr-burgundy-deep) ); box-shadow: inset 0 0 0 1px rgba(239, 214, 158, 0.35), inset 0 0 0 10px rgba(64, 11, 23, 0.18), inset 0 0 34px rgba(0, 0, 0, 0.18); } .wwr-envelope-grain { position: absolute; inset: 0; opacity: 0.3; background-image: repeating-linear-gradient( 18deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px ), repeating-linear-gradient( 101deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 11px ); mix-blend-mode: soft-light; } .wwr-envelope-border { position: absolute; inset: 20px; border: 1px solid rgba(213, 181, 112, 0.58); box-shadow: 0 0 0 4px rgba(213, 181, 112, 0.08), inset 0 0 0 1px rgba(44, 7, 17, 0.3); } .wwr-insert { position: absolute; z-index: 2; left: 7%; right: 7%; top: 8%; height: 78%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; color: var(--wwr-ink); background: linear-gradient( rgba(255, 250, 240, 0.93), rgba(246, 238, 223, 0.96) ), repeating-linear-gradient( 12deg, rgba(94, 61, 43, 0.05) 0 1px, transparent 1px 8px ); border: 1px solid rgba(185, 147, 77, 0.55); box-shadow: 0 18px 40px rgba(43, 8, 17, 0.24), inset 0 0 0 8px var(--wwr-ivory), inset 0 0 0 9px rgba(105, 29, 44, 0.32); transform: translateY(28%); transition: transform 1.05s cubic-bezier(0.2, 0.72, 0.2, 1) 0.42s; } .wwr-insert::before, .wwr-insert::after { content: ""; position: absolute; width: 72px; height: 72px; border-color: var(--wwr-gold); opacity: 0.72; } .wwr-insert::before { left: 20px; top: 20px; border-left: 1px solid; border-top: 1px solid; } .wwr-insert::after { right: 20px; bottom: 20px; border-right: 1px solid; border-bottom: 1px solid; } .wwr-insert-kicker { margin-bottom: 10px; color: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(0.56rem, 1.4vw, 0.72rem); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; } .wwr-insert-monogram { color: var(--wwr-gold); font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: clamp(2.7rem, 8vw, 5.3rem); line-height: 1; } .wwr-insert-names { margin-top: 8px; color: var(--wwr-burgundy-deep); font-size: clamp(1.05rem, 3vw, 1.8rem); letter-spacing: 0.04em; } .wwr-insert-date { margin-top: 8px; color: var(--wwr-muted); font-size: clamp(0.72rem, 1.7vw, 0.9rem); letter-spacing: 0.12em; text-transform: uppercase; } .wwr-envelope-front { z-index: 4; background: linear-gradient( 157deg, transparent 49.7%, rgba(42, 8, 17, 0.16) 50% 50.4%, transparent 50.6% ), linear-gradient( 23deg, transparent 49.7%, rgba(42, 8, 17, 0.16) 50% 50.4%, transparent 50.6% ), linear-gradient(145deg, #7a2838, var(--wwr-burgundy) 48%, #4a101e); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -24px 38px rgba(38, 5, 14, 0.2); } .wwr-flap { z-index: 5; height: 57%; border-radius: 4px 4px 0 0; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.05), transparent 42% ), linear-gradient(145deg, #7f2b3b, var(--wwr-burgundy) 58%, #4a101e); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; backface-visibility: visible; transition: transform 0.9s cubic-bezier(0.2, 0.72, 0.2, 1); } .wwr-flap::after { content: ""; position: absolute; inset: 16px 18px 0; clip-path: polygon(0 0, 100% 0, 50% 100%); border-top: 1px solid rgba(215, 186, 120, 0.55); background: linear-gradient( to bottom, rgba(213, 181, 112, 0.05), transparent 32% ); } .wwr-flap-line { position: absolute; left: 15%; right: 15%; top: 13%; height: 1px; background: linear-gradient( to right, transparent, rgba(215, 186, 120, 0.82), transparent ); } .wwr-cover-copy { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 18%; pointer-events: none; transition: opacity 0.35s ease, transform 0.55s ease; } .wwr-cover-eyebrow { position: absolute; top: 14%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(0.52rem, 1.3vw, 0.68rem); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.82; } .wwr-cover-names { position: absolute; bottom: 12%; max-width: 72%; font-size: clamp(0.78rem, 1.8vw, 1rem); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; } .wwr-wax-seal { position: relative; display: grid; place-items: center; width: clamp(76px, 14vw, 112px); aspect-ratio: 1; border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%; color: #5a1625; background: radial-gradient( circle at 34% 27%, rgba(255, 255, 255, 0.52), transparent 17% ), radial-gradient( circle at 50% 58%, #d7b46b 0 43%, #b78d43 62%, #795723 100% ); box-shadow: 0 12px 18px rgba(29, 4, 10, 0.34), inset 0 0 0 3px rgba(78, 49, 14, 0.2), inset 0 0 18px rgba(255, 242, 194, 0.28); transform: rotate(-4deg); } .wwr-wax-ring { position: absolute; inset: 14%; border: 1px solid rgba(91, 56, 17, 0.62); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 239, 183, 0.2); } .wwr-wax-monogram { position: relative; font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: clamp(2rem, 6vw, 3.45rem); line-height: 1; text-shadow: 0 1px 0 rgba(255, 240, 188, 0.5); } .wwr-vine { position: absolute; z-index: 6; top: 18%; width: 27%; height: 64%; fill: none; stroke: rgba(213, 181, 112, 0.58); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; } .wwr-vine ellipse { fill: rgba(213, 181, 112, 0.08); } .wwr-vine-left { left: 1%; } .wwr-vine-right { right: 1%; } .wwr-open-prompt { position: absolute; left: 0; right: 0; bottom: -52px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--wwr-burgundy-deep); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .wwr-open-icon { display: inline-block; font-size: 1rem; animation: wwr-float 1.8s ease-in-out infinite; } @keyframes wwr-float { 50% { transform: translateY(-5px); } } .wwr-opening.wwr-is-open .wwr-flap { z-index: 2; transform: rotateX(180deg); } .wwr-opening.wwr-is-open .wwr-insert { z-index: 6; transform: translateY(-46%) scale(1.02); } .wwr-opening.wwr-is-open .wwr-cover-copy, .wwr-opening.wwr-is-open .wwr-vine, .wwr-opening.wwr-is-open .wwr-open-prompt { opacity: 0; transform: translateY(8px); } .wwr-opening.wwr-is-open { opacity: 0; visibility: hidden; pointer-events: none; } /* Sticky navigation */ .wwr-nav-wrap { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(105, 29, 44, 0.12); background: rgba(255, 250, 240, 0.9); backdrop-filter: blur(14px); } .wwr-nav { width: min(1180px, calc(100% - 40px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .wwr-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--wwr-burgundy-deep); text-decoration: none; } .wwr-brand-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .wwr-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--wwr-gold); border-radius: 50%; color: var(--wwr-burgundy); font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 1.35rem; } .wwr-brand-text { overflow: hidden; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.15em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .wwr-nav-links { display: flex; align-items: center; gap: 30px; } .wwr-nav-links a { position: relative; color: var(--wwr-ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .wwr-nav-links a:not(.wwr-nav-rsvp)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--wwr-burgundy); transition: right 0.25s ease; } .wwr-nav-links a:hover::after, .wwr-nav-links a:focus-visible::after { right: 0; } .wwr-nav-rsvp { padding: 10px 18px; border: 1px solid var(--wwr-burgundy); border-radius: 999px; } .wwr-menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; } .wwr-menu-button span:not(.wwr-sr-only) { display: block; width: 100%; height: 1px; margin: 6px 0; background: var(--wwr-burgundy-deep); transition: transform 0.25s ease, opacity 0.25s ease; } /* Hero */ .wwr-hero { position: relative; min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(380px, 0.86fr); background: var(--wwr-ivory); } .wwr-hero-photo { min-height: 720px; background-color: var(--wwr-burgundy-deep); background-image: linear-gradient( 90deg, rgba(47, 8, 18, 0.05), rgba(47, 8, 18, 0.34) ), linear-gradient( 145deg, rgba(124, 49, 65, 0.2), rgba(60, 12, 24, 0.48) ), var(--wwr-hero-photo); background-position: center; background-size: cover; } .wwr-hero-photo-overlay { width: 100%; height: 100%; background: linear-gradient( to top, rgba(39, 7, 15, 0.28), transparent 35% ), linear-gradient( to right, transparent 70%, rgba(255, 250, 240, 0.18) ); } .wwr-hero-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(34px, 6vw, 92px) 180px; background: linear-gradient( rgba(255, 250, 240, 0.95), rgba(246, 238, 223, 0.97) ), repeating-linear-gradient( 15deg, rgba(76, 46, 35, 0.04) 0 1px, transparent 1px 8px ); } .wwr-hero-panel::before { content: ""; position: absolute; inset: 26px; border: 1px solid rgba(185, 147, 77, 0.36); pointer-events: none; } .wwr-eyebrow { margin: 0 0 14px; color: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.28em; text-transform: uppercase; } .wwr-hero-title { position: relative; margin: 0; color: var(--wwr-burgundy-deep); font-weight: 400; line-height: 0.88; } .wwr-hero-title span { display: block; font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: clamp(4.2rem, 7vw, 7.5rem); letter-spacing: -0.055em; } .wwr-hero-title em { display: block; margin: 8px 0 4px 22%; color: var(--wwr-gold); font-size: clamp(1.5rem, 2.6vw, 2.6rem); font-weight: 400; } .wwr-hero-message { max-width: 540px; margin: 32px 0 0; color: var(--wwr-muted); font-size: clamp(1rem, 1.25vw, 1.16rem); white-space: pre-line; } .wwr-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; color: var(--wwr-burgundy-deep); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .wwr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .wwr-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid transparent; border-radius: 2px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .wwr-button:hover { transform: translateY(-2px); } .wwr-button-primary { color: var(--wwr-ivory) !important; background: var(--wwr-burgundy); box-shadow: 0 12px 30px rgba(105, 29, 44, 0.18); } .wwr-button-quiet { border-color: rgba(105, 29, 44, 0.35); color: var(--wwr-burgundy); } .wwr-countdown { position: absolute; left: 50%; bottom: 0; z-index: 3; width: min(820px, calc(100% - 48px)); padding: 30px 42px; color: var(--wwr-ivory); background: linear-gradient( 145deg, rgba(124, 41, 57, 0.98), rgba(72, 13, 27, 0.99) ), repeating-linear-gradient( 15deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 8px ); border: 1px solid rgba(215, 186, 120, 0.45); box-shadow: var(--wwr-shadow); transform: translate(-50%, 24%); text-align: center; } .wwr-countdown::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(215, 186, 120, 0.24); pointer-events: none; } .wwr-countdown-kicker { margin: 0; color: var(--wwr-gold-light); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; } .wwr-countdown h2 { margin: 5px 0 18px; font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 400; } .wwr-countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .wwr-countdown-grid div { padding: 9px 6px; border-left: 1px solid rgba(215, 186, 120, 0.28); } .wwr-countdown-grid div:first-child { border-left: 0; } .wwr-countdown-grid strong, .wwr-countdown-grid span { display: block; } .wwr-countdown-grid strong { color: var(--wwr-gold-light); font-size: clamp(1.55rem, 3.5vw, 2.8rem); font-weight: 400; line-height: 1; } .wwr-countdown-grid span { margin-top: 5px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; } .wwr-countdown-date { margin: 16px 0 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Shared sections */ .wwr-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .wwr-story { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(54px, 8vw, 110px); align-items: center; padding-top: 190px; padding-bottom: 130px; } .wwr-story-copy h2, .wwr-section-heading h2, .wwr-rsvp h2 { margin: 0; color: var(--wwr-burgundy-deep); font-size: clamp(2.6rem, 5vw, 5.1rem); font-weight: 400; line-height: 1; letter-spacing: -0.035em; } .wwr-story-body { margin: 30px 0 0; color: var(--wwr-muted); font-size: 1.06rem; white-space: pre-line; } .wwr-story-signoff { margin: 28px 0 0; color: var(--wwr-burgundy); font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 2.05rem; } .wwr-story-visual { position: relative; min-height: 650px; } .wwr-story-photo { position: absolute; inset: 0 38px 44px 0; background-color: var(--wwr-burgundy); background-image: linear-gradient( to top, rgba(48, 8, 17, 0.22), transparent 42% ), linear-gradient( 145deg, rgba(138, 58, 73, 0.2), rgba(67, 16, 28, 0.45) ), var(--wwr-story-photo); background-position: center; background-size: cover; box-shadow: 0 28px 65px rgba(61, 13, 24, 0.18); } .wwr-story-frame { position: absolute; top: 34px; right: 0; bottom: 0; left: 40px; border: 1px solid var(--wwr-gold); pointer-events: none; } .wwr-story-caption { position: absolute; right: -18px; bottom: 54px; padding: 12px 18px; color: var(--wwr-cream); background: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); } .wwr-events { width: 100%; max-width: none; padding: 118px max(20px, calc((100vw - 1180px) / 2)) 130px; background: linear-gradient( rgba(61, 13, 24, 0.985), rgba(80, 16, 31, 0.99) ), repeating-linear-gradient( 12deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px ); } .wwr-section-heading { max-width: 700px; margin: 0 auto 56px; text-align: center; } .wwr-events .wwr-eyebrow, .wwr-events .wwr-section-heading h2 { color: var(--wwr-gold-light); } .wwr-events .wwr-section-heading > p:last-child { max-width: 620px; margin: 20px auto 0; color: rgba(255, 250, 240, 0.72); } .wwr-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .wwr-event-card { position: relative; padding: clamp(38px, 5vw, 66px); color: var(--wwr-ink); background: linear-gradient( rgba(255, 250, 240, 0.96), rgba(239, 226, 205, 0.98) ), repeating-linear-gradient( 15deg, rgba(72, 43, 31, 0.04) 0 1px, transparent 1px 8px ); border: 1px solid rgba(215, 186, 120, 0.52); box-shadow: 0 24px 60px rgba(23, 3, 8, 0.25); } .wwr-event-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(105, 29, 44, 0.18); pointer-events: none; } .wwr-event-card-featured { transform: translateY(26px); } .wwr-event-number { position: absolute; top: 24px; right: 30px; color: rgba(105, 29, 44, 0.11); font-size: clamp(4.4rem, 8vw, 7rem); line-height: 1; } .wwr-event-label { margin: 0 0 10px; color: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.24em; text-transform: uppercase; } .wwr-event-card h3 { position: relative; margin: 0 0 30px; color: var(--wwr-burgundy-deep); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1.05; } .wwr-event-card dl { position: relative; margin: 0; } .wwr-event-card dl div { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--wwr-line); } .wwr-event-card dt { color: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.65rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; } .wwr-event-card dd { margin: 0; color: var(--wwr-muted); white-space: pre-line; } .wwr-attire { max-width: 760px; margin: 82px auto 0; padding-top: 32px; border-top: 1px solid rgba(215, 186, 120, 0.35); color: var(--wwr-cream); text-align: center; } .wwr-attire span { display: block; color: var(--wwr-gold-light); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.23em; text-transform: uppercase; } .wwr-attire strong { display: block; margin-top: 8px; font-size: 1.5rem; font-weight: 400; } .wwr-attire p { margin: 8px 0 0; color: rgba(255, 250, 240, 0.68); } /* RSVP and footer */ .wwr-footer { padding: 100px max(20px, calc((100vw - 920px) / 2)) 28px; background: linear-gradient( rgba(246, 238, 223, 0.97), rgba(255, 250, 240, 0.98) ), repeating-linear-gradient( 12deg, rgba(82, 50, 34, 0.045) 0 1px, transparent 1px 9px ); } .wwr-footer-ornament { display: grid; grid-template-columns: minmax(40px, 160px) auto minmax(40px, 160px); gap: 18px; align-items: center; justify-content: center; margin-bottom: 50px; color: var(--wwr-gold); } .wwr-footer-ornament span { height: 1px; background: linear-gradient(to right, transparent, var(--wwr-gold)); } .wwr-footer-ornament span:last-child { background: linear-gradient(to left, transparent, var(--wwr-gold)); } .wwr-footer-ornament b { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 2.7rem; font-weight: 400; } .wwr-rsvp { text-align: center; } .wwr-rsvp-intro { max-width: 620px; margin: 20px auto 34px; color: var(--wwr-muted); } .wwr-rsvp-frame { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); text-align: left; background: rgba(255, 250, 240, 0.78); border: 1px solid rgba(185, 147, 77, 0.5); box-shadow: 0 24px 65px rgba(67, 21, 29, 0.1); } .wwr-rsvp-frame::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(105, 29, 44, 0.1); pointer-events: none; } .wwr-rsvp-frame :is(label, legend) { color: var(--wwr-burgundy-deep); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.76rem; font-weight: 700; } .wwr-rsvp-frame :is(input, select, textarea) { width: 100%; min-height: 46px; margin-top: 6px; padding: 10px 12px; border: 1px solid rgba(105, 29, 44, 0.25); border-radius: 0; color: var(--wwr-ink); background: var(--wwr-ivory); font: inherit; } .wwr-rsvp-frame input[type="radio"], .wwr-rsvp-frame input[type="checkbox"] { width: auto; min-height: auto; } .wwr-rsvp-frame button { min-height: 48px; padding: 12px 24px; border: 1px solid var(--wwr-burgundy); border-radius: 0; color: var(--wwr-ivory); background: var(--wwr-burgundy); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .wwr-rsvp-frame :is(input, select, textarea, button):focus-visible { outline: 3px solid rgba(185, 147, 77, 0.58); outline-offset: 2px; } .wwr-footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 84px; padding-top: 24px; border-top: 1px solid rgba(105, 29, 44, 0.14); color: var(--wwr-muted); font-size: 0.82rem; } .wwr-footer-bottom p { margin: 0; } .wwr-footer-bottom a { color: var(--wwr-burgundy); text-decoration: none; } /* Reveal motion */ .wwr-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; } .wwr-reveal.wwr-visible { opacity: 1; transform: none; } /* Tablet */ @media (max-width: 900px) { .wwr-nav { width: min(100% - 28px, 1180px); } .wwr-menu-button { display: block; } .wwr-nav-links { position: absolute; top: 76px; left: 0; right: 0; display: grid; gap: 0; padding: 10px 20px 20px; border-bottom: 1px solid rgba(105, 29, 44, 0.14); background: rgba(255, 250, 240, 0.98); box-shadow: 0 18px 38px rgba(61, 13, 24, 0.12); transform: scaleY(0); transform-origin: top; opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; } .wwr-nav-links.wwr-menu-open { transform: scaleY(1); opacity: 1; pointer-events: auto; } .wwr-nav-links a { padding: 14px 0; } .wwr-nav-rsvp { margin-top: 6px; text-align: center; } .wwr-menu-button[aria-expanded="true"] span:nth-last-child(3) { transform: translateY(7px) rotate(45deg); } .wwr-menu-button[aria-expanded="true"] span:nth-last-child(2) { opacity: 0; } .wwr-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); } .wwr-hero { grid-template-columns: 1fr; } .wwr-hero-photo { min-height: 58vh; } .wwr-hero-panel { min-height: 630px; padding: 82px 40px 190px; } .wwr-countdown { bottom: 0; transform: translate(-50%, 32%); } .wwr-story { grid-template-columns: 1fr; padding-top: 190px; padding-bottom: 100px; } .wwr-story-visual { min-height: 580px; } .wwr-event-grid { grid-template-columns: 1fr; } .wwr-event-card-featured { transform: none; } } /* Mobile */ @media (max-width: 620px) { .wwr-opening { padding: 30px 14px 68px; } .wwr-envelope { width: min(94vw, 520px); } .wwr-envelope-border { inset: 11px; } .wwr-cover-eyebrow { top: 11%; letter-spacing: 0.2em; } .wwr-cover-names { bottom: 9%; letter-spacing: 0.08em; } .wwr-vine { top: 17%; width: 29%; height: 66%; } .wwr-open-prompt { bottom: -48px; font-size: 0.62rem; letter-spacing: 0.12em; } .wwr-brand-text { max-width: 180px; font-size: 0.7rem; } .wwr-hero-photo { min-height: 52vh; } .wwr-hero-panel { min-height: 610px; padding: 66px 26px 190px; } .wwr-hero-panel::before { inset: 14px; } .wwr-hero-title span { font-size: clamp(3.6rem, 19vw, 5.6rem); } .wwr-countdown { width: calc(100% - 24px); padding: 26px 14px; } .wwr-countdown-grid { gap: 0; } .wwr-section { width: min(100% - 30px, 1180px); } .wwr-story { gap: 46px; } .wwr-story-visual { min-height: 430px; } .wwr-story-photo { right: 20px; bottom: 24px; } .wwr-story-frame { top: 20px; left: 20px; } .wwr-story-caption { right: -8px; bottom: 34px; } .wwr-events { padding: 92px 15px 100px; } .wwr-event-card { padding: 42px 30px; } .wwr-event-card dl div { grid-template-columns: 1fr; gap: 3px; } .wwr-footer { padding: 82px 15px 24px; } .wwr-footer-bottom { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .wwr-app *, .wwr-app *::before, .wwr-app *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .wwr-reveal { opacity: 1; transform: none; } } /* ========================================================================== Details actions & RSVP polish. .wwr-event-actions, the calendar/location buttons and their icon shells shipped with no rules at all, so both "buttons" rendered as bare runs of uppercase text with invisible icons. These rules give them real button anatomy in the template's own palette. The details list also gets a wider label column and baseline alignment so values stop looking indented at random. ========================================================================== */ .wwr-event-card dl { margin-bottom: 8px; } .wwr-event-card dl div { grid-template-columns: 118px 1fr; align-items: baseline; padding: 16px 0; } .wwr-event-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--wwr-line); } .wwr-event-actions .wwr-button { flex: 1 1 280px; justify-content: flex-start; gap: 16px; min-height: 76px; padding: 16px 22px; text-align: left; } .wwr-calendar-icon, .wwr-location-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; } .wwr-calendar-icon svg, .wwr-location-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .wwr-event-actions .wwr-button strong { display: block; font-size: 0.76rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; } .wwr-event-actions .wwr-button small { display: block; margin-top: 4px; font-size: 0.74rem; letter-spacing: 0.02em; } .wwr-calendar-button { color: var(--wwr-ivory); background: var(--wwr-burgundy); box-shadow: 0 12px 30px rgba(105, 29, 44, 0.18); } .wwr-calendar-button .wwr-calendar-icon { background: rgba(255, 250, 240, 0.14); } .wwr-calendar-button small { color: rgba(255, 250, 240, 0.76); } .wwr-location-button { border-color: rgba(105, 29, 44, 0.35); color: var(--wwr-burgundy-deep); background: rgba(255, 250, 240, 0.6); } .wwr-location-button .wwr-location-icon { color: var(--wwr-burgundy); background: rgba(105, 29, 44, 0.08); } .wwr-location-button small { color: var(--wwr-muted); } @media (max-width: 720px) { .wwr-event-card dl div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .wwr-event-actions { flex-direction: column; gap: 12px; } .wwr-event-actions .wwr-button { flex-basis: auto; width: 100%; } } /* The embedded RSVP form, restyled to the letterpress palette: square corners, burgundy actions, ivory fields — the frame's rules already anticipated form controls, these carry them onto the injected form. */ .wwr-rsvp { margin-bottom: 64px; } .wwr-rsvp-frame { max-width: 620px; } .wwr-rsvp-frame .wiw-rsvp-wrap { max-width: 520px; } .wwr-rsvp-frame .wiw-rsvp input { border-radius: 0; border: 1px solid rgba(105, 29, 44, 0.25); background: var(--wwr-ivory); color: var(--wwr-ink); } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-opt { min-height: 48px; border-radius: 0; border: 1px solid rgba(105, 29, 44, 0.3); color: var(--wwr-burgundy-deep); letter-spacing: 0.04em; } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-opt[aria-pressed="true"] { background: var(--wwr-burgundy); border-color: var(--wwr-burgundy); color: var(--wwr-ivory); font-weight: 700; } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-send { min-height: 50px; border-radius: 0; background: var(--wwr-burgundy); color: var(--wwr-ivory); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-label, .wwr-rsvp-frame .wiw-rsvp-feedback { color: var(--wwr-muted); } /* Contrast corrections: the action-button titles inherited a gold anchor colour and sat dimmer than their own subtitles, and the RSVP choice pills picked up the frame's filled-button background under their dark text. */ .wwr-calendar-button strong { color: var(--wwr-ivory); } .wwr-location-button strong { color: var(--wwr-burgundy-deep); } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-opt { background: var(--wwr-ivory); } .wwr-rsvp-frame .wiw-rsvp .wiw-rsvp-opt[aria-pressed="true"] { background: var(--wwr-burgundy); } /* The countdown centres itself with transform: translate(-50%, …), but it is also a .wwr-reveal, and the reveal states set their own transform — so both the pre-reveal slide and the revealed "transform: none" threw the box half its own width to the right of the content. These restate the centring at countdown specificity, folding the 28px reveal slide in, so it fades and slides exactly as before while staying centred over the main content. */ .wwr-countdown.wwr-reveal { transform: translate(-50%, calc(24% + 28px)); } .wwr-countdown.wwr-reveal.wwr-visible { transform: translate(-50%, 24%); } @media (max-width: 900px) { .wwr-countdown.wwr-reveal { transform: translate(-50%, calc(32% + 28px)); } .wwr-countdown.wwr-reveal.wwr-visible { transform: translate(-50%, 32%); } } /* Desktop layout corrections. 1. The hero photo's gradient overlay was left in normal flow (a static div with width/height 100%), so instead of sitting over the photograph it flowed below it and washed across the left edge of the Our Story text. It is now pinned over the photo, where it was always meant to be. 2. Post-reveal, the countdown band rose 28px and clipped the bottom of the "Kindly Respond" button. On desktop the hero panel reserves a little more room beneath the actions and the buttons sit a touch higher, so the band clears them with comfortable air. Mobile keeps its own paddings untouched. */ .wwr-hero-photo { position: relative; overflow: hidden; } .wwr-hero-photo-overlay { position: absolute; inset: 0; height: auto; } @media (min-width: 901px) { .wwr-hero-actions { margin-top: 26px; } .wwr-hero-panel { padding-bottom: 214px; } } /* Our Story photo column. The section's two-column grid always reserved this left column, but its only occupant was an unstyled 26px heart. When the couple uploads a story photo it now fills the column in a letterpress frame; without one, the ornament renders large and deliberate instead of vanishing. Nothing else in the section changes. */ .wwr-story-photo { position: relative; margin: 0; padding: 14px; background: linear-gradient( rgba(255, 250, 240, 0.96), rgba(246, 238, 223, 0.97) ); border: 1px solid rgba(185, 147, 77, 0.5); box-shadow: var(--wwr-shadow); } .wwr-story-photo::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(105, 29, 44, 0.14); pointer-events: none; } .wwr-story-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.92); } .wwr-story-decoration { display: grid; justify-items: center; gap: 20px; } .wwr-story-decoration span { color: rgba(185, 147, 77, 0.55); font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; } .wwr-story-decoration::before, .wwr-story-decoration::after { content: ""; width: 1px; height: clamp(64px, 12vw, 150px); background: linear-gradient( transparent, rgba(185, 147, 77, 0.5), transparent ); } @media (max-width: 900px) { .wwr-story-photo { width: 100%; max-width: 420px; margin: 0 auto; } } 19:T1a4c,(function () { "use strict"; var root = document.querySelector(".wwr-app"); if (!root) return; var reducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; var opening = root.querySelector("#wwr-opening"); var envelope = root.querySelector("#wwr-envelope"); var site = root.querySelector("#wwr-site"); var heroTitle = root.querySelector("#wwr-hero-title"); var menuButton = root.querySelector("#wwr-menu-button"); var menuLinks = root.querySelector("#wwr-nav-links"); var hasOpened = false; function openInvitation() { if (hasOpened || !opening || !envelope) return; hasOpened = true; opening.classList.add("wwr-is-open"); envelope.setAttribute("aria-expanded", "true"); document.body.classList.remove("wwr-lock"); window.setTimeout(function () { opening.setAttribute("aria-hidden", "true"); if (site) { site.removeAttribute("aria-hidden"); } if (heroTitle) { heroTitle.setAttribute("tabindex", "-1"); heroTitle.focus({ preventScroll: true }); } }, reducedMotion ? 20 : 1725); } if (opening && envelope) { document.body.classList.add("wwr-lock"); envelope.addEventListener("click", openInvitation); document.addEventListener("keydown", function (event) { if (event.key === "Escape" && !hasOpened) { openInvitation(); } }); } /* * The template's inline script also listens on this button, flipping * aria-expanded for an "is-open" class that no stylesheet defines. Reading * aria-expanded here therefore saw the other handler's write and the two * cancelled out — the menu opened and shut inside the same click. This * handler keeps its own state and asserts both the attribute and the class * the CSS actually styles. */ var menuOpen = false; function closeMenu() { if (!menuButton || !menuLinks) return; menuOpen = false; menuButton.setAttribute("aria-expanded", "false"); menuLinks.classList.remove("wwr-menu-open"); } if (menuButton && menuLinks) { menuButton.addEventListener("click", function () { menuOpen = !menuOpen; menuButton.setAttribute("aria-expanded", String(menuOpen)); menuLinks.classList.toggle("wwr-menu-open", menuOpen); }); } /* * In-page links scroll instead of navigating: inside the sandboxed srcdoc * preview iframe, following a "#section" href navigates the frame to * about:srcdoc#section and blanks the page. Delegated so it also covers the * RSVP pill and anything injected after load, and offset by the fixed * navigation bar so a section never opens underneath it. */ var navigation = document.getElementById("wwr-nav"); document.addEventListener("click", function (event) { var link = event.target.closest('a[href^="#"]'); if (!link) return; var id = link.getAttribute("href").slice(1); if (!id) return; var target = document.getElementById(id); if (!target) return; event.preventDefault(); closeMenu(); var offset = navigation ? navigation.getBoundingClientRect().height : 0; var top = target.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top: top <= 1 ? 0 : top, behavior: reducedMotion ? "auto" : "smooth" }); }); var countdown = root.querySelector("[data-countdown-date]"); var countdownTimer; function updateCountdown() { if (!countdown) return; var iso = (countdown.getAttribute("data-countdown-date") || "").trim(); var targetDate = new Date(iso + "T00:00:00"); if (!iso || Number.isNaN(targetDate.getTime())) { return; } var remaining = Math.max(0, targetDate.getTime() - Date.now()); var values = { days: Math.floor(remaining / 86400000), hours: Math.floor((remaining % 86400000) / 3600000), minutes: Math.floor((remaining % 3600000) / 60000), seconds: Math.floor((remaining % 60000) / 1000) }; Object.keys(values).forEach(function (unit) { var node = countdown.querySelector( '[data-countdown="' + unit + '"]' ); if (node) { node.textContent = String(values[unit]).padStart(2, "0"); } }); if (remaining === 0 && countdownTimer) { window.clearInterval(countdownTimer); } } if (countdown) { updateCountdown(); countdownTimer = window.setInterval(updateCountdown, 1000); } var revealItems = root.querySelectorAll(".wwr-reveal"); if (reducedMotion || !("IntersectionObserver" in window)) { revealItems.forEach(function (item) { item.classList.add("wwr-visible"); }); } else { var observer = new IntersectionObserver( function (entries, revealObserver) { entries.forEach(function (entry) { if (!entry.isIntersecting) return; entry.target.classList.add("wwr-visible"); revealObserver.unobserve(entry.target); }); }, { threshold: 0.14, rootMargin: "0px 0px -7% 0px" } ); revealItems.forEach(function (item) { observer.observe(item); }); } })(); /* --------------------------------------------------------------------------- Background music. The markup shipped a #wwr-music-toggle button and a #wwr-audio element that were never connected, so the control did nothing. The src now comes from the curated library (music_src); when the couple picked no track it resolves to "" and the button hides rather than sitting there dead. Starts PAUSED: browsers block autoplay, and an invitation should not make noise at a guest before they ask it to. --------------------------------------------------------------------------- */ (function () { var audio = document.getElementById('wwr-audio'); var btn = document.getElementById('wwr-music-toggle'); if (!audio || !btn) return; var src = (audio.getAttribute('src') || '').trim(); if (!src) { btn.hidden = true; return; } var on = false; function paint() { btn.setAttribute('aria-pressed', on ? 'true' : 'false'); btn.setAttribute('aria-label', on ? 'Pause wedding music' : 'Play wedding music'); btn.classList.toggle('is-playing', on); } paint(); btn.addEventListener('click', function () { if (on) { audio.pause(); on = false; paint(); return; } var p = audio.play(); if (p && p.then) { p.then(function () { on = true; paint(); }, function () { on = false; paint(); }); } else { on = true; paint(); } }); audio.addEventListener('pause', function () { on = false; paint(); }); audio.addEventListener('ended', function () { on = false; paint(); }); })(); 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":"Letter "}],["$","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":{"bride_name":"Priya","groom_name":"Rahul","hero_image":"https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1800&q=85","love_story":"Our story began with a simple conversation that soon became something extraordinary. Through laughter, long journeys, quiet moments and shared dreams, we found a home in one another. Now, surrounded by the people we love most, we are ready to begin our next chapter together.","venue_name":"The Leela Palace Jaipur","story_image":"https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1200&q=80","rsvp_enabled":true,"venue_address":"Jaipur–Delhi Highway, Kukas, Jaipur, Rajasthan","invitation_note":"With joyful hearts, we invite you to share in the beginning of our forever and celebrate the beautiful promise we make to one another.","wedding_date_time":"2027-08-09T17:30:00+05:30","with_regards_from":"With love, Priya & Rahul","venue_location_url":"https://maps.google.com/?q=The+Leela+Palace+Jaipur"},"allowJs":true}]}]}],"$L1a"]}] 11:null 15:[["$","title","0",{"children":"Letter — 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",{}]]