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:T11956, {{couple_display_name}} | Wedding Invitation

WeddingInWhites

Wedding Invitation

{{#if invitation_note}}{{invitation_note}}{{else}}Together with our families, we joyfully invite you to share in our celebration.{{/if}}

{{event_name}} · {{venue_name}}

Discover

01 Forever

Until the celebration

Counting every moment until forever.

000 Days

00 Hours

00 Minutes

00 Seconds

Our story

A beautiful beginning, a lifetime ahead.

The celebration

Join us for our special day.

We would be honoured to celebrate this beautiful moment with the people we love most.

Wedding event

Wedding venue

Open location

Celebration

19:T6922,@import url('https://fonts.googleapis.com/css2?family=Cinzel:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@200;300;400;500&display=swap'); /* --- Core Configuration & Base Layout --- */ :root { --bg-primary: #0f1115; /* Deep elegant midnight/slate base */ --bg-glass: rgba(23, 27, 34, 0.65); /* Glazed base panel color */ --border-glass: rgba(255, 255, 255, 0.08); --text-primary: #f4f3f0; /* Soft luxury ivory */ --text-muted: #9da4b0; /* Muted clean gray */ --accent-gold: #dfcfb7; /* Timeless champagne gold */ --font-serif: 'Cinzel', serif; --font-sans: 'Montserrat', sans-serif; --transition-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* Accessibility Skip Link */ .wiw-iv-skip-link { position: absolute; top: -100px; left: 20px; background: var(--accent-gold); color: var(--bg-primary); padding: 10px 20px; z-index: 9999; font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: top 0.3s ease; } .wiw-iv-skip-link:focus { top: 20px; } /* Shell Container wrapper */ .wiw-iv-shell { max-width: 1200px; margin: 0 auto; padding: 100px 40px; } /* --- Sticky Glazed Header & Navigation --- */ .wiw-iv-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid var(--border-glass); background: rgba(15, 17, 21, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: var(--transition-smooth); } .wiw-iv-header.is-scrolled { background: rgba(15, 17, 21, 0.85); padding: 5px 0; } .wiw-iv-nav { max-width: 1400px; margin: 0 auto; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; } .wiw-iv-brand { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-primary); text-decoration: none; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; } .wiw-iv-brand i { font-weight: 300; color: var(--accent-gold); } .wiw-iv-brand-logo { max-height: 45px; width: auto; object-fit: contain; } .wiw-iv-navigation { display: flex; align-items: center; gap: 35px; } .wiw-iv-navigation a { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; font-weight: 400; } .wiw-iv-navigation a:hover { color: var(--accent-gold); } /* Glazed Dynamic RSVP Nav Button */ .wiw-iv-navigation .wiw-iv-nav-rsvp { border: 1px solid var(--accent-gold); padding: 8px 22px; border-radius: 40px; color: var(--accent-gold); background: rgba(223, 207, 183, 0.03); backdrop-filter: blur(5px); transition: var(--transition-smooth); } .wiw-iv-navigation .wiw-iv-nav-rsvp:hover { background: var(--accent-gold); color: var(--bg-primary); box-shadow: 0 8px 25px rgba(223, 207, 183, 0.2); } /* Menu Toggle for Mobile viewports */ .wiw-iv-menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 1100; } .wiw-iv-menu-toggle span { display: block; width: 24px; height: 1px; background-color: var(--text-primary); transition: 0.3s ease; } /* --- Premium Glazing Landing Section (Hero) --- */ .wiw-iv-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 100px 20px; } /* Cinematic Background Composites */ .wiw-iv-hero-media { position: absolute; inset: 0; z-index: -2; } .wiw-iv-hero-image { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1519225495810-7512c696505a?auto=format&fit=crop&w=2000&q=90'); /* Fallback luxury wedding backdrop */ background-size: cover; background-position: center; transform: scale(1.05); animation: slowPan 25s infinite alternate ease-in-out; } .wiw-iv-hero-blur { position: absolute; inset: 0; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1; } .wiw-iv-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,17,21,0.5), rgba(15,17,21,0.85)); z-index: 2; } .wiw-iv-hero-vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(15,17,21,0.9) 100%); z-index: 3; } /* Micro-grain Texture Layer */ .wiw-iv-hero-grain { position: absolute; inset: 0; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3 Atemplate%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/template%3E%3C/svg%3E"); z-index: 4; } /* Shifting ambient luxury spotlight */ .wiw-iv-hero-light { position: absolute; top: -10%; left: -10%; width: 140%; height: 140%; background: radial-gradient(circle at 30% 30%, rgba(223, 207, 183, 0.08) 0%, transparent 60%); z-index: 5; pointer-events: none; animation: ambientLight 15s infinite alternate ease-in-out; } /* Animated Editorial Outer Frame */ .wiw-iv-frame { position: absolute; inset: 40px; border: 1px solid rgba(255, 255, 255, 0.05); pointer-events: none; z-index: 10; } .wiw-iv-frame-line { position: absolute; background: rgba(223, 207, 183, 0.25); transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); } .wiw-iv-frame-top, .wiw-iv-frame-bottom { height: 1px; width: 100%; transform: scaleX(0); } .wiw-iv-frame-left, .wiw-iv-frame-right { width: 1px; height: 100%; transform: scaleY(0); } .wiw-iv-frame-top { top: 0; left: 0; transform-origin: left; } .wiw-iv-frame-right { right: 0; top: 0; transform-origin: top; } .wiw-iv-frame-bottom { bottom: 0; right: 0; transform-origin: right; } .wiw-iv-frame-left { left: 0; bottom: 0; transform-origin: bottom; } .wiw-iv-corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--accent-gold); opacity: 0; transition: opacity 1s ease 1s; } .wiw-iv-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; } .wiw-iv-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; } .wiw-iv-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; } .wiw-iv-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; } /* Loaded Activation Triggers for Outer Frame */ .wiw-iv-template.is-loaded .wiw-iv-frame-top, .wiw-iv-template.is-loaded .wiw-iv-frame-bottom { transform: scaleX(1); } .wiw-iv-template.is-loaded .wiw-iv-frame-left, .wiw-iv-template.is-loaded .wiw-iv-frame-right { transform: scaleY(1); } .wiw-iv-template.is-loaded .wiw-iv-corner { opacity: 1; } /* Elegant Floral SVG Stroke Animations */ .wiw-iv-hero-floral { position: absolute; height: 70%; width: auto; max-width: 25vw; opacity: 0.12; pointer-events: none; z-index: 6; } .wiw-iv-hero-floral-left { left: 60px; top: 50%; transform: translateY(-50%); } .wiw-iv-hero-floral-right { right: 60px; top: 50%; transform: translateY(-50%) scaleX(-1); } .wiw-iv-draw-path { stroke: var(--accent-gold); stroke-width: 1.5px; fill: none; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 3s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .wiw-iv-template.is-loaded .wiw-iv-draw-path { stroke-dashoffset: 0; } /* Floating Fine Petal Particles */ .wiw-iv-petals { position: absolute; inset: 0; pointer-events: none; z-index: 7; } .wiw-iv-petal { position: absolute; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%); width: 6px; height: 6px; border-radius: 50%; animation: floatPetal 12s infinite linear; } .wiw-iv-petal-one { left: 15%; top: -10%; animation-delay: 0s; width: 8px; height: 8px;} .wiw-iv-petal-two { left: 45%; top: -10%; animation-delay: 3s; animation-duration: 15s; } .wiw-iv-petal-three { left: 75%; top: -10%; animation-delay: 1.5s; } .wiw-iv-petal-four { left: 30%; top: -10%; animation-delay: 6s; animation-duration: 18s; } .wiw-iv-petal-five { left: 85%; top: -10%; animation-delay: 4.5s; } /* Editorial Structural Labels */ .wiw-iv-side-label { position: absolute; top: 50%; font-size: 9px; text-transform: uppercase; letter-spacing: 5px; color: rgba(255,255,255,0.25); transform: translateY(-50%) rotate(-90deg); font-family: var(--font-sans); z-index: 10; pointer-events: none; } .wiw-iv-side-label-left { left: -10px; transform-origin: left center; } .wiw-iv-side-label-right { right: -35px; transform-origin: right center; transform: translateY(-50%) rotate(90deg); } /* --- Premium Hero Content & Modern Typographic Reveals --- */ .wiw-iv-hero-content { position: relative; z-index: 20; text-align: center; max-width: 750px; background: var(--bg-glass); padding: 50px 60px; border-radius: 16px; border: 1px solid var(--border-glass); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(30px); transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .wiw-iv-template.is-loaded .wiw-iv-hero-content { opacity: 1; transform: translateY(0); } /* Linear Mask Structural Concept */ .wiw-iv-text-mask, .wiw-iv-name-mask { display: block; overflow: hidden; margin-bottom: 5px; } .wiw-iv-invitation-note { font-size: 11px; text-transform: uppercase; letter-spacing: 4px; color: var(--accent-gold); font-family: var(--font-sans); } .wiw-iv-hero-title { font-family: var(--font-serif); font-size: 3.8rem; font-weight: 400; line-height: 1.15; margin: 15px 0 25px; color: var(--text-primary); } .wiw-iv-name { display: inline-block; } .wiw-iv-ampersand { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--accent-gold); margin: 0 10px; display: inline-block; } /* Luxury Divider Section */ .wiw-iv-hero-divider { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 25px 0; } .wiw-iv-hero-divider span { height: 1px; width: 60px; background: linear-gradient(to right, transparent, rgba(223,207,183,0.4), transparent); } .wiw-iv-hero-divider svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-gold); stroke-width: 1px; opacity: 0.7; } .wiw-iv-hero-meta { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 35px; flex-wrap: wrap; } .wiw-iv-hero-date, .wiw-iv-hero-venue { font-size: 13px; letter-spacing: 1px; color: var(--text-muted); } .wiw-iv-meta-dot { width: 4px; height: 4px; background-color: var(--accent-gold); border-radius: 50%; opacity: 0.5; } /* Micro-interaction Button Layer */ .wiw-iv-hero-button { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--border-glass); background: rgba(255,255,255,0.02); padding: 14px 35px; border-radius: 50px; color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: all 0.5s ease; } .wiw-iv-hero-button i { font-style: normal; transition: transform 0.5s ease; color: var(--accent-gold); } .wiw-iv-hero-button:hover { border-color: var(--accent-gold); background: rgba(223, 207, 183, 0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .wiw-iv-hero-button:hover i { transform: translate(3px, 3px); } /* Hero Bottom Control Indicators */ .wiw-iv-hero-bottom { position: absolute; bottom: 40px; width: calc(100% - 160px); display: flex; justify-content: space-between; align-items: center; z-index: 10; } .wiw-iv-scroll-indicator { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; } .wiw-iv-scroll-indicator i { position: relative; width: 1px; height: 40px; background: rgba(255,255,255,0.1); display: inline-block; overflow: hidden; } .wiw-iv-scroll-indicator b { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: var(--accent-gold); animation: scrollLine 2s infinite ease-in-out; } .wiw-iv-hero-edition { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; } .wiw-iv-hero-edition span { width: 30px; height: 1px; background: rgba(255,255,255,0.1); } /* Staggered Content Entry Architecture */ .wiw-iv-hero-enter { opacity: 0; transform: translateY(20px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .wiw-iv-template.is-loaded .wiw-iv-hero-enter { opacity: 1; transform: translateY(0); } .wiw-iv-template.is-loaded .wiw-iv-invitation-note { transition-delay: 0.2s; } .wiw-iv-template.is-loaded .wiw-iv-hero-divider { transition-delay: 0.4s; } .wiw-iv-template.is-loaded .wiw-iv-hero-meta { transition-delay: 0.5s; } .wiw-iv-template.is-loaded .wiw-iv-hero-button { transition-delay: 0.6s; } /* --- Scroll Reveal Mechanism --- */ .wiw-iv-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .wiw-iv-reveal.is-visible { opacity: 1; transform: translateY(0); } /* --- Countdown Section Styling --- */ .wiw-iv-countdown { background-color: #13161c; text-align: center; } .wiw-iv-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--accent-gold); margin-bottom: 15px; } .wiw-iv-section-heading h2 { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 400; color: var(--text-primary); line-height: 1.2; } .wiw-iv-section-heading h2 em { font-style: italic; font-weight: 300; color: var(--text-muted); } .wiw-iv-countdown-date { margin-top: 10px; font-size: 14px; color: var(--text-muted); font-family: var(--font-serif); } .wiw-iv-countdown-grid { display: inline-flex; justify-content: center; align-items: center; gap: 30px; margin-top: 50px; background: var(--bg-glass); padding: 30px 50px; border-radius: 12px; border: 1px solid var(--border-glass); backdrop-filter: blur(10px); } .wiw-iv-countdown-unit { display: flex; flex-direction: column; width: 80px; } .wiw-iv-countdown-unit strong { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; color: var(--text-primary); } .wiw-iv-countdown-unit span { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-top: 5px; } .wiw-iv-countdown-separator { width: 1px; height: 40px; background: rgba(255,255,255,0.08); } /* --- Beautiful Story Layout Section --- */ .wiw-iv-story { background-color: var(--bg-primary); } .wiw-iv-story-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; } .wiw-iv-story-visual { position: relative; } .wiw-iv-story-photo { position: relative; width: 90%; } .wiw-iv-story-image-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-glass); aspect-ratio: 4 / 5; } .wiw-iv-story-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s ease; } .wiw-iv-story-photo:hover img { transform: scale(1.03); } .wiw-iv-story-photo figcaption { font-family: var(--font-serif); font-size: 12px; letter-spacing: 2px; color: var(--text-muted); margin-top: 15px; text-transform: uppercase; } /* Absolute Floating Badge Graphic */ .wiw-iv-story-badge { position: absolute; bottom: -25px; right: 0; background: rgba(23, 27, 34, 0.85); border: 1px solid var(--border-glass); padding: 25px; border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur(10px); text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); } .wiw-iv-story-badge small { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .wiw-iv-story-badge strong { font-family: var(--font-serif); font-size: 16px; color: var(--accent-gold); font-weight: 400; } .wiw-iv-story-floral { position: absolute; top: -40px; left: -40px; width: 120px; opacity: 0.15; fill: none; stroke: var(--accent-gold); stroke-width: 1px; } .wiw-iv-story-content h2 { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 400; line-height: 1.25; margin-bottom: 30px; } .wiw-iv-story-content h2 em { font-style: italic; font-weight: 300; color: var(--accent-gold); } .wiw-iv-story-copy p { font-size: 14px; line-height: 1.8; color: var(--text-muted); font-weight: 300; margin-bottom: 30px; } .wiw-iv-story-signature { font-family: var(--font-serif); font-size: 22px; color: var(--accent-gold); font-style: italic; } /* --- Event Details Architecture --- */ .wiw-iv-details { background-color: #13161c; } .wiw-iv-section-description { max-width: 550px; margin: 15px auto 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; } .wiw-iv-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 60px 0; } .wiw-iv-detail-card { background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 12px; padding: 50px 40px; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: var(--transition-smooth); } .wiw-iv-detail-card:hover { transform: translateY(-5px); border-color: rgba(223, 207, 183, 0.25); box-shadow: 0 20px 45px rgba(0,0,0,0.25); } .wiw-iv-card-number { position: absolute; top: 30px; right: 40px; font-family: var(--font-serif); font-size: 14px; color: rgba(255,255,255,0.05); letter-spacing: 1px; } .wiw-iv-detail-icon svg { width: 32px; height: 32px; fill: none; stroke: var(--accent-gold); stroke-width: 1px; margin-bottom: 25px; } .wiw-iv-detail-card h3 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; margin: 10px 0 15px; } .wiw-iv-detail-time, .wiw-iv-detail-date { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .wiw-iv-text-link { display: inline-block; margin-top: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold); text-decoration: none; } /* Luxury Card Banner Viewport */ .wiw-iv-venue-banner { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 14px; overflow: hidden; backdrop-filter: blur(10px); margin-top: 60px; } .wiw-iv-venue-image { background-image: url('https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1200&q=85'); /* Luxury room/hall placeholder */ background-size: cover; background-position: center; } .wiw-iv-venue-content { padding: 60px; } .wiw-iv-venue-content h3 { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; margin: 10px 0 15px; } .wiw-iv-venue-content p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 30px; font-weight: 300; } .wiw-iv-light-button { display: inline-flex; align-items: center; gap: 10px; background: var(--text-primary); color: var(--bg-primary); text-decoration: none; padding: 12px 28px; border-radius: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; transition: var(--transition-smooth); } .wiw-iv-light-button:hover { background: var(--accent-gold); transform: translateY(-2px); } /* --- Footer & Form RSVP Structure --- */ .wiw-iv-footer { background-color: var(--bg-primary); position: relative; padding: 120px 20px; overflow: hidden; border-top: 1px solid var(--border-glass); } .wiw-iv-footer-floral { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; opacity: 0.05; fill: none; stroke: var(--accent-gold); stroke-width: 1px; } .wiw-iv-footer-inner { max-width: 650px; margin: 0 auto; text-align: center; position: relative; z-index: 5; } .wiw-iv-footer-eyebrow { color: var(--text-muted); } #wiw-iv-footer-title { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 400; margin: 15px 0; } .wiw-iv-footer-date { font-size: 14px; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 60px; font-family: var(--font-serif); } /* RSVP Glazed Dynamic Block Interaction */ .wiw-iv-rsvp-panel { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-glass); padding: 50px 40px; border-radius: 14px; backdrop-filter: blur(15px); margin-bottom: 50px; } .wiw-iv-rsvp-heading h3 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; margin: 5px 0 10px; } .wiw-iv-rsvp-heading p { font-size: 13px; color: var(--text-muted); margin-bottom: 30px; } /* Elegant Form Universal Overrides */ .wiw-iv-rsvp-form form { display: flex; flex-direction: column; gap: 20px; text-align: left; } .wiw-iv-rsvp-form input, .wiw-iv-rsvp-form select, .wiw-iv-rsvp-form textarea { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border-glass); padding: 14px 18px; color: var(--text-primary); border-radius: 6px; font-family: var(--font-sans); font-size: 13px; transition: all 0.3s ease; } .wiw-iv-rsvp-form input:focus, .wiw-iv-rsvp-form select:focus, .wiw-iv-rsvp-form textarea:focus { outline: none; border-color: var(--accent-gold); background: rgba(255,255,255,0.06); } .wiw-iv-rsvp-form button[type="submit"] { background: var(--accent-gold); color: var(--bg-primary); border: none; padding: 15px; border-radius: 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-size: 11px; cursor: pointer; transition: var(--transition-smooth); } .wiw-iv-rsvp-form button[type="submit"]:hover { background: #f4f3f0; transform: translateY(-1px); } .wiw-iv-regards { font-size: 14px; font-family: var(--font-serif); color: var(--accent-gold); margin-bottom: 40px; letter-spacing: 1px; } .wiw-iv-footer-monogram { font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: 2px; color: rgba(255,255,255,0.15); margin-bottom: 40px; } .wiw-iv-footer-monogram i { font-style: italic; font-weight: 300; color: var(--accent-gold); } .wiw-iv-back-top { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; } .wiw-iv-back-top:hover { color: var(--accent-gold); } /* --- Responsive Layout Rules --- */ @media(max-width: 992px) { .wiw-iv-story-layout { grid-template-columns: 1fr; gap: 50px; } .wiw-iv-story-photo { width: 100%; } .wiw-iv-venue-banner { grid-template-columns: 1fr; } .wiw-iv-venue-image { min-height: 250px; } .wiw-iv-hero-title { font-size: 3rem; } } @media(max-width: 768px) { .wiw-iv-navigation { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background: rgba(15, 17, 21, 0.98); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; gap: 40px; transition: right 0.5s ease; border-left: 1px solid var(--border-glass); z-index: 1050; } .wiw-iv-navigation.is-active { right: 0; } .wiw-iv-menu-toggle { display: flex; } /* Menu Burger Transform States */ .wiw-iv-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .wiw-iv-menu-toggle.is-active span:nth-child(2) { transform: scaleX(0); } .wiw-iv-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .wiw-iv-hero-content { padding: 40px 25px; } .wiw-iv-hero-title { font-size: 2.3rem; } .wiw-iv-detail-grid { grid-template-columns: 1fr; } .wiw-iv-countdown-grid { padding: 20px 25px; gap: 15px; } .wiw-iv-countdown-unit { width: 60px; } .wiw-iv-countdown-unit strong { font-size: 1.8rem; } .wiw-iv-side-label, .wiw-iv-hero-bottom, .wiw-iv-hero-floral { display: none !important; } } /* --- Premium Keyframes Infrastructure --- */ @keyframes slowPan { 0% { transform: scale(1.03) translate(0, 0); } 100% { transform: scale(1.08) translate(-1%, -1%); } } @keyframes ambientLight { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5%, 5%) scale(1.1); } } @keyframes floatPetal { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.4; } 100% { transform: translateY(105vh) translateX(80px) rotate(360deg); opacity: 0; } } @keyframes scrollLine { 0% { top: -50%; } 100% { top: 100%; } } /* 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,#efe4d2,#dfcfb7);border:1px solid rgba(223,207,183,.6);color:#0f1115;opacity:1} .wiw-rsvp .wiw-rsvp-send:hover{opacity:1;filter:brightness(1.06)} /* 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:T19de,document.addEventListener("DOMContentLoaded", () => { const templateContainer = document.querySelector(".wiw-iv-template"); // Initialize Page Entry Layout Classes window.addEventListener("load", () => { setTimeout(() => { if (templateContainer) templateContainer.classList.add("is-loaded"); }, 200); }); /* --- In-page links scroll instead of navigating --- The invitation renders inside a sandboxed srcdoc iframe, where following a "#section" href navigates the frame to about:srcdoc#section, reloading it and leaving the preview blank. Scrolling to the target keeps every internal link — the menu, the scroll cue, "Back to top" — working in the preview and on the published site 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(); const top = target.getBoundingClientRect().top + window.scrollY; window.scrollTo({ top: top <= 1 ? 0 : top, behavior: "smooth" }); }); /* --- Navigation Controls & Menu Toggles --- */ const header = document.querySelector("[data-wiw-iv-header]"); /* The hamburger menu is bound by the template's own inline script, which also manages aria-label, the body scroll-lock class and close-on-select. A second binding here toggled "is-active" straight back off on the same click — the menu opened and shut instantly, so the icon looked dead. Header scroll state is handled inline as well. */ /* --- Advanced Live Countdown Engine --- */ const countdownSection = document.querySelector("[data-wiw-iv-countdown]"); if (countdownSection) { const rawTargetDate = countdownSection.getAttribute("data-wiw-iv-wedding-date"); /* The time the cards print, so the countdown reaches zero as the event begins rather than at midnight. Must be a 24-hour HH:mm. */ const rawEventTime = countdownSection.getAttribute("data-wiw-iv-event-time") || ""; const eventClock = /^([01]\d|2[0-3]):[0-5]\d$/.test(rawEventTime.trim()) ? rawEventTime.trim() : "00:00"; // Clean variable parsing logic to accommodate Handlebars fallback strings safely const isHandlebarsToken = rawTargetDate.includes("{{") || rawTargetDate.trim() === ""; const finalTargetDateString = isHandlebarsToken ? "2026-12-31T18:00:00" : /^\d{4}-\d{2}-\d{2}$/.test(rawTargetDate.trim()) ? rawTargetDate.trim() + "T" + eventClock + ":00" : rawTargetDate; const targetTimestamp = new Date(finalTargetDateString).getTime(); const domDays = countdownSection.querySelector("[data-wiw-iv-days]"); const domHours = countdownSection.querySelector("[data-wiw-iv-hours]"); const domMinutes = countdownSection.querySelector("[data-wiw-iv-minutes]"); const domSeconds = countdownSection.querySelector("[data-wiw-iv-seconds]"); const gridDisplay = countdownSection.querySelector("[data-wiw-iv-countdown-grid]"); const fallbackMessage = countdownSection.querySelector("[data-wiw-iv-countdown-fallback]"); function updateCountdown() { const now = new Date().getTime(); const difference = targetTimestamp - now; if (isNaN(targetTimestamp) || difference <= 0) { if (gridDisplay) gridDisplay.style.display = "none"; if (fallbackMessage) { fallbackMessage.removeAttribute("hidden"); fallbackMessage.style.display = "block"; } clearInterval(countdownInterval); return; } // Calculations for math segments const days = Math.floor(difference / (1000 * 60 * 60 * 24)); const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((difference % (1000 * 60)) / 1000); // Pad structural content variants if (domDays) domDays.textContent = String(days).padStart(3, "0"); if (domHours) domHours.textContent = String(hours).padStart(2, "0"); if (domMinutes) domMinutes.textContent = String(minutes).padStart(2, "0"); if (domSeconds) domSeconds.textContent = String(seconds).padStart(2, "0"); } const countdownInterval = setInterval(updateCountdown, 1000); updateCountdown(); // Execute immediately upon instantiation } /* --- Intersection Observer Scroll Reveals --- */ const revealElements = document.querySelectorAll(".wiw-iv-reveal"); const scrollObserverOptions = { root: null, threshold: 0.12, rootMargin: "0px 0px -40px 0px" }; const scrollObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("is-visible"); observer.unobserve(entry.target); // Optimize execution profile after intersection matches } }); }, scrollObserverOptions); revealElements.forEach(element => scrollObserver.observe(element)); /* --- 12-hour clock for the times the cards print --- The form stores a 24-hour HH:mm; guests read "12:00 PM", the same wording the calendar entry carries. Anything that is not HH:mm is left as typed. */ document.querySelectorAll(".wiw-iv-detail-time time").forEach((timeElement) => { const match = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(timeElement.textContent.trim()); if (!match) return; const hour = parseInt(match[1], 10); timeElement.textContent = (hour % 12 || 12) + ":" + match[2] + " " + (hour >= 12 ? "PM" : "AM"); }); /* --- Handlebars Localization Date Formatter Helper --- */ const displayDates = document.querySelectorAll("[data-wiw-iv-display-date]"); displayDates.forEach(dateElement => { const originalText = dateElement.textContent.trim(); // Verify valid text blocks bypass template tags if (originalText && !originalText.includes("{{")) { try { const parsedDate = new Date( /^\d{4}-\d{2}-\d{2}$/.test(originalText) ? originalText + "T00:00:00" : originalText ); if (!isNaN(parsedDate.getTime())) { const formattingOptions = { year: 'numeric', month: 'long', day: 'numeric' }; dateElement.textContent = parsedDate.toLocaleDateString('en-US', formattingOptions); } } catch (error) { console.warn("Date normalization aborted for item text element:", originalText); } } }); });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\":\"Metal\",\"item\":\"https://www.weddinginwhites.com/templates/4b6f3961-9907-4aa0-b6f9-c503015360cd\"}]}"}}],["$","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":"Metal"}],["$","$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":"","rsvp_form":"","bride_name":"Afrim","event_list":[{"name":"Nikkah","time":"12:00","venue":"The Palace Lawn"},{"name":"Reception","time":"19:30","venue":"The Grand Ballroom"}],"event_name":"Nikkah","event_time":"12:00","groom_name":"Anna","love_story":"Our journey began with a simple conversation that soon became a beautiful friendship. Through shared dreams, unforgettable memories and the love of our families, we found a home in each other. We are delighted to begin our next chapter together and would be honoured to celebrate it with you.","venue_name":"The Leela Palace, Jaipur","rsvp_enabled":true,"wedding_date":"2027-08-09","venue_location":"https://www.google.com/maps/search/?api=1&query=The+Leela+Palace+Jaipur","invitation_note":"Together with our families, we warmly invite you to share in the joy of our wedding celebration.","with_regards_from":"With love and warm regards from the families of Afrim and Anna.","couple_display_name":"Afrim & Anna"},"allowJs":true}]}]}],"$L1b"]}] 12:null 16:[["$","title","0",{"children":"Metal Wedding Invitation Design · WeddingInWhites"}],["$","meta","1",{"name":"description","content":"Metal is a premium Indian wedding invitation and website design — bleed metal. 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/4b6f3961-9907-4aa0-b6f9-c503015360cd"}],["$","meta","8",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","9",{"property":"og:title","content":"Metal Wedding Invitation Design · WeddingInWhites"}],["$","meta","10",{"property":"og:description","content":"Metal is a premium Indian wedding invitation and website design — bleed metal. Preview it, add your details and share it on WhatsApp."}],["$","meta","11",{"property":"og:url","content":"https://www.weddinginwhites.com/templates/4b6f3961-9907-4aa0-b6f9-c503015360cd"}],["$","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/4b6f3961-9907-4aa0-b6f9-c503015360cd/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":"Metal Wedding Invitation Design · WeddingInWhites"}],["$","meta","22",{"name":"twitter:description","content":"Metal is a premium Indian wedding invitation and website design — bleed metal. Preview it, add your details and share it on WhatsApp."}],["$","meta","23",{"name":"twitter:image","content":"https://www.weddinginwhites.com/templates/4b6f3961-9907-4aa0-b6f9-c503015360cd/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}} {{groom_name}}

Counting every moment until forever.

A beautiful beginning, a lifetime ahead.

Join us for our special day.

{{event_name}}

{{venue_name}}

{{name}}

{{venue_name}}

{{bride_name}} & {{groom_name}}

Counting every moment until forever.

A beautiful beginning, a lifetime ahead.

Join us for our special day.

{{event_name}}

{{venue_name}}

{{name}}

{{venue_name}}

{{bride_name}} {{groom_name}}