/* ============================================================
AT STUDIO — PREMIUM WEDDING TEMPLATE
Main Stylesheet — style.css
© 2025 AT Studio. All Rights Reserved.
TABLE OF CONTENTS:
01 — CSS Variables (color theme — set by script.js)
02 — Reset & Base
03 — Typography Scale
04 — Reusable Utilities
05 — Page Loader
06 — Navigation
07 — Hero Section
08 — Countdown Section
09 — Save The Date Section
10 — Couple Note Section
11 — Our Story / Timeline Section
12 — Gallery Section
13 — Lightbox
14 — Wedding Party Section
15 — Event Schedule Section
16 — Dress Code Section
17 — Registry Section
18 — FAQs Section
19 — RSVP Section
20 — Footer
21 — Scroll Reveal Animations
22 — Responsive — Tablet (768px)
23 — Responsive — Desktop (1024px)
24 — Responsive — Large Desktop (1440px)
25 — Responsive — TV / Ultra Wide (1920px+)
26 — Responsive — Landscape Mobile
============================================================ */
/* ============================================================
01 — CSS VARIABLES
Color variables are set exclusively in theme.css (loaded before
this file). DO NOT define --primary, --secondary, --dark,
--muted, --white, --border, or --overlay here — doing so would
override theme.css since style.css loads second.
============================================================ */
:root {
/* Typography scale — fluid sizing for all screen sizes
Format: clamp(minimum, preferred, maximum)
Scales smoothly without needing media queries */
--text-hero: clamp(3rem, 10vw, 8rem); /* couple names in hero */
--text-h2: clamp(1.8rem, 4vw, 3rem); /* section titles */
--text-h3: clamp(1.2rem, 2.5vw, 1.8rem);
--text-body: clamp(0.9rem, 1.8vw, 1.05rem);
--text-label: clamp(0.6rem, 1.2vw, 0.72rem);
--text-countdown: clamp(2.5rem, 7vw, 5.5rem); /* countdown numbers */
/* Spacing scale */
--section-padding: clamp(60px, 10vw, 120px);
--container-max: 1200px;
--container-pad: clamp(20px, 5vw, 60px);
/* Animation timing */
--transition-fast: 0.25s ease;
--transition-med: 0.4s ease;
--transition-slow: 0.7s ease;
}
/* ============================================================
01b — SECTION BACKGROUND ALTERNATION CLASSES
Applied dynamically by script.js after section toggles run.
Ensures white → cream → white alternation only on VISIBLE sections.
bg-odd = var(--white) sections 1, 3, 5…
bg-even = var(--secondary) sections 2, 4, 6…
These override the static backgrounds on each section.
============================================================ */
.bg-odd { background: var(--white) !important; }
.bg-even { background: var(--secondary) !important; }
/* Also re-tint the timeline dot border to match its section background */
.bg-odd .timeline-dot { border-color: var(--white) !important; }
.bg-even .timeline-dot { border-color: var(--secondary) !important; }
/* ============================================================
02 — RESET & BASE STYLES
Removes default browser styles for consistent rendering.
============================================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth; /* smooth scrolling when nav links clicked */
font-size: 16px;
}
body {
font-family: 'Jost', sans-serif;
font-weight: 300;
color: var(--dark);
background-color: var(--secondary);
line-height: 1.7;
overflow-x: hidden; /* prevent horizontal scroll */
-webkit-font-smoothing: antialiased; /* smoother text on Mac/iOS */
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: 'Jost', sans-serif;
cursor: pointer;
border: none;
background: none;
}
ul {
list-style: none;
}
/* Disable right-click context menu (basic code protection) */
/* More protection applied in script.js */
/* ── CSS-level content protection ───────────────────────────
Prevents text highlighting, image long-press save on mobile,
and makes casual content copying much harder for guests.
Input/textarea elements are explicitly re-enabled below. */
body {
-webkit-user-select: none; /* Safari / Chrome iOS */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE / Edge legacy */
user-select: none;
}
/* Re-enable text selection only inside form fields */
input, textarea, select {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* Prevent iOS long-press "Save Image" / "Copy" context menu on all images */
img {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-drag: none; /* Chrome/Safari drag prevention */
user-drag: none;
pointer-events: none; /* disables right-click and drag on images */
}
/* Re-enable pointer events on gallery items and lightbox images
(need clicks to open the lightbox) */
.gallery-item {
pointer-events: auto;
}
.lightbox-img {
pointer-events: none; /* image itself still not draggable/right-clickable */
}
/* QR code must be clickable — override the global img { pointer-events: none } */
.registry-qr-img {
pointer-events: auto;
}
/* ============================================================
03 — TYPOGRAPHY SCALE
Global heading and text styles.
============================================================ */
/* All headings use Cormorant Garamond */
h1, h2, h3, h4 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
line-height: 1.1;
}
/* Section label — small spaced caps above every title */
.section-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(8px, 1.5vw, 14px);
display: block;
}
/* Section main title */
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: var(--text-h2);
font-weight: 300;
font-style: italic;
color: var(--dark);
margin-bottom: clamp(10px, 2vw, 16px);
}
/* Section subtitle — below the title */
.section-subtitle {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
margin-bottom: clamp(40px, 6vw, 70px);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
04 — REUSABLE UTILITIES
============================================================ */
/* Centered container for all section content */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
text-align: center;
}
/* Gold divider line with diamond center — used in multiple sections */
.gold-divider {
display: flex;
align-items: center;
gap: 14px;
margin: clamp(20px, 3vw, 32px) auto;
max-width: 300px;
}
.gold-divider::before,
.gold-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--primary);
opacity: 0.5;
}
.gold-divider-diamond {
color: var(--primary);
font-size: 0.45rem;
}
/* ============================================================
05 — PAGE LOADER
Full-screen loader shown while page assets load.
Fades out and is removed by script.js once ready.
============================================================ */
.page-loader {
position: fixed;
inset: 0;
background: var(--secondary);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
/* Hidden class — added by script.js to hide the loader */
.page-loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* Couple names shown in the loader */
.loader-couple {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 5vw, 3rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
animation: fadeInUp 0.8s ease forwards;
}
/* Animated loading bar */
.loader-bar {
width: clamp(80px, 20vw, 140px);
height: 1px;
background: var(--border);
overflow: hidden;
}
.loader-bar-fill {
height: 100%;
background: var(--primary);
width: 0%;
animation: loaderFill 1.5s ease forwards;
}
/* Loading dots */
.loader-dots {
display: flex;
gap: 6px;
}
.loader-dots span {
width: 5px;
height: 5px;
background: var(--primary);
border-radius: 50%;
animation: bounce 1.2s infinite ease-in-out;
}
.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
/* ============================================================
06 — NAVIGATION
Fixed top bar with couple brand on left, links on right.
Transparent until scrolled, then white with shadow.
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(14px, 2vw, 22px) var(--container-pad);
background: transparent;
transition: background var(--transition-med),
box-shadow var(--transition-med),
padding var(--transition-med);
}
/* Scrolled state — warm parchment background with shadow */
.nav.scrolled {
background: rgba(245, 237, 224, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--border);
padding-top: 12px;
padding-bottom: 12px;
}
/* Couple brand / initials in top left */
.nav-brand {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2.5vw, 1.3rem);
font-style: italic;
font-weight: 400;
color: var(--white); /* white on hero (transparent nav) */
letter-spacing: 0.08em;
transition: color var(--transition-fast);
cursor: default;
}
/* Nav brand becomes dark once nav has white background */
.nav.scrolled .nav-brand {
color: var(--dark);
}
/* Navigation links list */
.nav-links {
display: flex;
gap: clamp(16px, 3vw, 40px);
align-items: center;
}
/* Individual nav link */
.nav-link {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
transition: color var(--transition-fast);
position: relative;
padding-bottom: 3px;
}
/* Underline hover effect */
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background: var(--primary);
transition: width var(--transition-med);
}
.nav-link:hover::after {
width: 100%;
}
/* Nav links become dark once nav has white background */
.nav.scrolled .nav-link {
color: var(--muted);
}
.nav.scrolled .nav-link:hover {
color: var(--primary);
}
/* Hamburger button — only visible on mobile */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
cursor: pointer;
position: relative;
z-index: 1500; /* above nav-links overlay (1400) so X is always tappable */
}
.nav-hamburger span {
display: block;
width: 22px;
height: 1px;
background: var(--white);
transition: all var(--transition-fast);
}
.nav.scrolled .nav-hamburger span {
background: var(--dark);
}
/* Hamburger open state — X icon */
.nav-hamburger.open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* ============================================================
07 — HERO SECTION
Full screen. Background photo. Couple names. Parallax.
============================================================ */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Background photo container */
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05); /* slight scale for parallax effect */
transition: transform 0.1s linear;
}
/* Dark overlay for readability */
.hero-overlay {
position: absolute;
inset: 0;
background: var(--overlay);
}
/* Botanical corner decorations */
.hero-botanical {
position: absolute;
z-index: 2;
color: var(--primary);
opacity: 0.30;
pointer-events: none;
}
.hero-botanical--tl {
top: 0;
left: 0;
width: clamp(100px, 18vw, 200px);
}
.hero-botanical--br {
bottom: 0;
right: 0;
width: clamp(100px, 18vw, 200px);
transform: rotate(180deg);
}
/* Hero content — centered text block */
.hero-content {
position: relative;
z-index: 3;
text-align: center;
color: var(--white);
padding: 0 var(--container-pad);
/* Staggered fade-in animation */
animation: fadeInUp 1.2s ease forwards;
}
/* "Together with their families" label */
.hero-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
margin-bottom: clamp(16px, 3vw, 28px);
}
/* Groom's name */
.hero-groom,
.hero-bride {
font-family: 'Cormorant Garamond', serif;
font-size: var(--text-hero);
font-weight: 300;
line-height: 0.9;
color: var(--white);
letter-spacing: -0.01em;
}
/* Ampersand between names */
.hero-ampersand-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 3vw, 28px);
margin: clamp(6px, 1.5vw, 14px) 0;
}
.hero-line {
width: clamp(30px, 8vw, 80px);
height: 1px;
background: rgba(201, 169, 110, 0.5); /* semi-transparent gold */
}
.hero-ampersand {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.2rem, 3.5vw, 2.5rem);
font-style: italic;
color: var(--primary);
font-weight: 300;
}
/* Wedding date below names */
.hero-date {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-top: clamp(16px, 3vw, 28px);
margin-bottom: clamp(8px, 1.5vw, 14px);
}
/* Romantic tagline */
.hero-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2.5vw, 1.5rem);
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.6);
margin-bottom: clamp(10px, 2vw, 16px);
}
/* Personalized guest greeting — subtle, below tagline */
/* Only visible when guest name is known from gate session */
.hero-greeting {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: clamp(20px, 3vw, 32px);
}
/* RSVP call-to-action button in hero */
.hero-cta {
display: inline-block;
border: 1px solid var(--primary);
color: var(--primary);
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
padding: clamp(10px, 1.5vw, 14px) clamp(24px, 4vw, 40px);
transition: all var(--transition-med);
}
.hero-cta:hover {
background: var(--primary);
color: var(--white);
}
/* Scroll indicator at bottom of hero */
.hero-scroll {
position: absolute;
bottom: clamp(20px, 4vw, 40px);
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* Animated line that drops down */
.hero-scroll-line {
width: 1px;
height: clamp(30px, 5vw, 50px);
background: linear-gradient(to bottom, transparent, var(--primary));
animation: scrollLine 2s ease-in-out infinite;
}
.hero-scroll-text {
font-family: 'Jost', sans-serif;
font-size: 0.58rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
/* ============================================================
08 — COUNTDOWN SECTION
Live timer to the wedding date.
============================================================ */
.countdown {
padding: clamp(80px, 14vw, 140px) 0;
background: var(--white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
text-align: center;
min-height: 50vh;
display: flex;
align-items: center;
}
/* Center the inner container vertically when using flexbox */
.countdown .container {
width: 100%;
}
/* Botanical arc above the section label */
.countdown-botanical {
color: var(--primary);
opacity: 0.3;
margin: 0 auto clamp(16px, 2vw, 24px);
width: clamp(100px, 18vw, 160px);
}
/* Wedding date shown below the label, above the timer */
.countdown-date {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
font-style: italic;
font-weight: 300;
color: var(--muted);
letter-spacing: 0.04em;
margin-bottom: clamp(24px, 4vw, 40px);
margin-top: 6px;
}
/* Timer grid — 4 units side by side — CENTERED */
.countdown-timer {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 2vw, 24px);
margin-top: clamp(20px, 4vw, 40px);
flex-wrap: wrap; /* allow wrapping on very small screens */
width: 100%; /* take full width */
}
.countdown-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
/* ADD these three lines: */
border: 1px solid var(--border);
padding: clamp(16px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
min-width: clamp(70px, 12vw, 110px);
}
/* The number itself */
.countdown-number {
font-family: 'Cormorant Garamond', serif;
font-size: var(--text-countdown);
font-weight: 300;
color: var(--dark);
line-height: 1;
letter-spacing: -0.02em;
display: block;
min-width: 1ch; /* prevents layout shift as number changes */
}
/* "Days", "Hours", etc. labels */
.countdown-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
/* Colon separator between units */
.countdown-sep {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 300;
color: var(--primary);
line-height: 1;
margin-bottom: 20px; /* offset to align with numbers, not labels */
}
/* Stagger animation delays for countdown units */
.countdown-unit:nth-child(1) { animation-delay: 0s; }
.countdown-unit:nth-child(2) { animation-delay: 0.12s; }
.countdown-unit:nth-child(3) { animation-delay: 0.24s; }
.countdown-unit:nth-child(4) { animation-delay: 0.36s; }
/* "Today is the day!" message shown when countdown reaches zero */
.countdown-wedding-day {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-style: italic;
color: var(--primary);
margin-top: 20px;
}
/* ============================================================
09 — SAVE THE DATE SECTION
YouTube video embed.
============================================================ */
.save-the-date {
padding: var(--section-padding) 0;
background: var(--secondary);
text-align: center;
}
/* Botanical SVG above the save the date section */
.std-botanical {
color: var(--primary);
opacity: 0.35;
margin: 0 auto clamp(20px, 3vw, 32px);
width: clamp(80px, 15vw, 140px);
}
/* "Save the Date Film" label above the video */
.std-film-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: clamp(16px, 2.5vw, 24px);
display: block;
opacity: 0.7;
}
/* 16:9 video wrapper — maintains aspect ratio on all screens */
.video-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Gold-tinted frame around the video */
.video-frame-outer {
padding: 6px;
border: 1px solid rgba(201, 169, 110, 0.35);
background: transparent;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio formula */
height: 0;
overflow: hidden;
border: none;
}
/* YouTube iframe fills the container */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* ============================================================
10 — COUPLE NOTE SECTION
Pull quote style personal message.
============================================================ */
.couple-note {
padding: var(--section-padding) 0;
background: var(--white);
text-align: center;
}
/* Botanical SVG above the quote — gold tinted */
.couple-note-botanical {
color: var(--primary);
opacity: 0.35;
margin: 0 auto clamp(20px, 3vw, 32px);
width: clamp(80px, 15vw, 140px);
}
/* Large decorative opening quote mark */
.couple-note-quote-mark {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(4rem, 10vw, 8rem);
color: var(--primary);
opacity: 0.2;
line-height: 0.5;
margin-bottom: clamp(10px, 2vw, 20px);
font-style: italic;
}
/* The message text */
.couple-note-message {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
max-width: 680px;
margin: 0 auto;
line-height: 1.9;
}
/* Divider between message and signature */
.couple-note-divider {
display: flex;
align-items: center;
gap: 14px;
margin: clamp(24px, 4vw, 40px) auto;
max-width: 240px;
}
.couple-note-divider span:first-child,
.couple-note-divider span:last-child {
flex: 1;
height: 1px;
background: var(--primary);
opacity: 0.4;
display: block;
}
.couple-note-diamond {
color: var(--primary);
font-size: 0.4rem;
}
/* Signature below the message */
.couple-note-signature {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2vw, 1.3rem);
font-style: italic;
color: var(--muted);
font-weight: 300;
}
/* ── Lace frame wrapper ─────────────────────────────────────── */
.lace-frame-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: clamp(300px, 70vw, 620px);
margin: 0 auto;
}
/* The lace PNG — fills the wrapper */
.lace-frame-img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
user-select: none;
filter: sepia(0.1) brightness(0.96);
}
/* All text content — absolutely centered over the oval */
.lace-frame-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
/* oval spans ~83% of image height, safe inner area ~70% */
max-height: 70%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
overflow: visible;
}
/* Hide botanical — lace IS the decoration */
.lace-frame-content .couple-note-botanical {
display: none !important;
}
/* Section label */
.lace-frame-content .section-label {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: clamp(0.48rem, 0.9vw, 0.6rem) !important;
letter-spacing: 0.2em;
color: #7a5c3a !important;
margin: 0 0 4px 0 !important;
}
/* Quote mark — small, tight */
.lace-frame-content .couple-note-quote-mark {
font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
line-height: 0.8 !important;
margin: 0 0 8px 0 !important;
color: #7a5c3a !important;
opacity: 0.6;
}
/* Message body */
.lace-frame-content .couple-note-message {
font-size: clamp(0.6rem, 1.2vw, 0.85rem) !important;
line-height: 1.65 !important;
max-width: 100%;
margin: 0 0 0 0 !important;
color: #2a1a0e !important;
text-align: center !important;
}
/* Divider */
.lace-frame-content .couple-note-divider {
margin: clamp(6px, 1.2vw, 12px) auto !important;
max-width: 100px;
width: 100%;
}
.lace-frame-content .couple-note-divider span:first-child,
.lace-frame-content .couple-note-divider span:last-child {
background: #7a5c3a !important;
}
.lace-frame-content .couple-note-diamond {
color: #7a5c3a !important;
}
/* Signature */
.lace-frame-content .couple-note-signature {
font-size: clamp(0.6rem, 1.1vw, 0.82rem) !important;
color: #5a3e28 !important;
margin: 0 !important;
}
/* ============================================================
11 — OUR STORY / TIMELINE SECTION
Vertical timeline with alternating layout on desktop.
============================================================ */
.our-story {
padding: var(--section-padding) 0;
background: var(--secondary);
}
/* Timeline wrapper — vertical line runs through center on desktop */
.timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* The vertical gold line (visible on desktop only) */
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: linear-gradient(to bottom, transparent, var(--primary), transparent);
opacity: 0.4;
}
/* Individual milestone item */
.timeline-item {
display: flex;
gap: clamp(20px, 4vw, 50px);
margin-bottom: clamp(40px, 7vw, 80px);
align-items: center;
position: relative;
}
/* Alternating layout: even items flip to right on desktop */
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
/* Photo side */
.timeline-photo {
position: relative;
flex: 0 0 auto;
/* Padding creates the gap between photo edge and lace border */
padding: 13%;
max-width: 280px;
width: clamp(180px, 22vw, 280px);
box-sizing: border-box;
}
/* Lace border — covers the padded area around the photo */
.timeline-photo::after {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image: url('assets/images/lace_transparent.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
z-index: 2;
}
.timeline-photo img {
display: block;
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
object-position: center top;
border: none;
position: relative;
z-index: 1;
transition: transform var(--transition-slow);
}
.timeline-photo img:hover {
transform: scale(1.02);
}
/* Center dot on the timeline line */
.timeline-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: var(--primary);
border-radius: 50%;
border: 2px solid var(--secondary);
z-index: 1;
flex-shrink: 0;
}
/* Text side */
.timeline-text {
flex: 1;
text-align: left;
padding: clamp(16px, 2vw, 24px) 0;
}
/* Even items: text aligns right */
.timeline-item:nth-child(even) .timeline-text {
text-align: right;
}
/* Date label above the title */
.timeline-date {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 8px;
}
/* Milestone title */
.timeline-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
margin-bottom: 10px;
}
/* Description text */
.timeline-description {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
line-height: 1.8;
}
/* ============================================================
12 — GALLERY SECTION
Masonry-style photo grid.
============================================================ */
.gallery {
padding: var(--section-padding) 0;
background: var(--white);
}
/* CSS columns masonry grid */
.gallery-grid {
column-count: 2; /* 2 columns by default (mobile) */
column-gap: clamp(8px, 1.5vw, 16px);
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Individual gallery item */
.gallery-item {
break-inside: avoid; /* prevents photo from breaking across columns */
margin-bottom: clamp(8px, 1.5vw, 16px);
overflow: hidden;
cursor: pointer;
position: relative;
}
/* Photo itself — no border, editorial feel */
.gallery-item img {
width: 100%;
display: block;
transition: transform 0.6s ease;
border: none;
}
/* Hover: zoom in */
.gallery-item:hover img {
transform: scale(1.04);
}
/* Hover overlay with gold tint */
.gallery-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(201, 169, 110, 0.15);
opacity: 0;
transition: opacity var(--transition-med);
}
.gallery-item:hover::after {
opacity: 1;
}
/* ============================================================
13 — LIGHTBOX
Full-screen photo viewer. Opens when gallery photo is clicked.
NOTE: The lightbox div is a direct child of — NOT inside
the gallery section — to avoid CSS transform stacking context
issues that would prevent position:fixed from covering the viewport.
============================================================ */
.lightbox {
display: none; /* hidden by default */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(20, 18, 16, 0.96);
z-index: 2000;
align-items: center;
justify-content: center;
}
/* Active state — shown when photo is clicked */
.lightbox.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease forwards;
}
/* The photo container — centered within the lightbox overlay */
.lightbox-content {
position: absolute;
top: 56px; /* below close button */
left: 0;
right: 0;
bottom: 72px; /* above counter + some space */
display: flex;
align-items: center;
justify-content: center;
padding: 0 56px; /* horizontal room for prev/next arrows */
}
/* When music player is active, shrink bottom so image stays
centered in the visible area above the music bar */
body.has-music-player .lightbox-content {
bottom: 132px; /* 72px base + ~60px music player */
}
/* The photo itself */
.lightbox-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
object-position: center center;
border: 1px solid rgba(201, 169, 110, 0.2);
display: block;
}
/* Close button top right — large tap target */
.lightbox-close {
position: absolute;
top: 12px;
right: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 1.4rem;
cursor: pointer;
transition: color var(--transition-fast);
padding: 12px 16px;
line-height: 1;
background: rgba(0,0,0,0.3);
border: none;
border-radius: 4px;
z-index: 2010; /* above lightbox content */
}
.lightbox-close:hover {
color: var(--primary);
background: rgba(0,0,0,0.5);
}
/* Previous / Next buttons — vertically centered in the full lightbox */
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 1.5rem;
cursor: pointer;
padding: clamp(12px, 2vw, 20px);
transition: color var(--transition-fast);
background: rgba(0,0,0,0.2);
border: none;
line-height: 1;
border-radius: 4px;
z-index: 2010;
}
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-prev:hover,
.lightbox-next:hover {
color: var(--primary);
background: rgba(0,0,0,0.4);
}
/* "3 / 8" counter — sits just above the music bar */
.lightbox-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.5);
z-index: 2010;
}
/* When music player is active, push counter up above it */
body.has-music-player .lightbox-counter {
bottom: 76px; /* 60px music bar + 16px gap */
}
/* Hide nav while lightbox is active so controls are never blocked */
body.lightbox-open .nav {
display: none !important;
}
/* ============================================================
14 — WEDDING PARTY SECTION
On mobile: horizontal swipe tabs (categories) + vertical
scrollable name list within each panel.
On desktop: elegant 2-column program grid (full list visible).
============================================================ */
.wedding-party {
padding: var(--section-padding) 0;
background: var(--secondary);
}
/* ── DESKTOP LAYOUT: program-style 2-column grid ─────────── */
/* Groups container — 2-column grid on desktop */
.party-groups {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 52px);
max-width: 760px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
@media (min-width: 640px) {
.party-groups {
grid-template-columns: 1fr 1fr;
}
}
/* Individual group block */
.party-group {
text-align: center;
border-top: 1px solid var(--border);
padding-top: clamp(20px, 3vw, 28px);
}
/* Group heading */
.party-group-title {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(12px, 2vw, 18px);
font-style: normal;
line-height: 1.4;
}
/* Individual name */
.party-group-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2.2vw, 1.25rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
line-height: 1.8;
margin-bottom: 2px;
}
/* ── MOBILE CAROUSEL LAYOUT ──────────────────────────────── */
/* Hidden on desktop, shown on mobile by JS */
.party-carousel {
display: none;
flex-direction: column;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Tab row — horizontally scrollable category pills */
.party-tabs {
display: flex;
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
border-bottom: 1px solid var(--border);
margin-bottom: 0;
padding-bottom: 0;
}
.party-tabs::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.party-tab {
flex-shrink: 0;
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 14px 9px;
cursor: pointer;
border: none;
background: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* sit on top of container border */
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.party-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* Panel wrapper — clips to fixed height, one panel visible at a time */
.party-panels {
position: relative;
border: 1px solid var(--border);
border-top: none;
background: var(--white);
}
/* Individual panel */
.party-panel {
display: none;
flex-direction: column;
max-height: 280px; /* ~8-9 names visible; rest scrolls */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 20px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.party-panel::-webkit-scrollbar {
width: 3px;
}
.party-panel::-webkit-scrollbar-track {
background: transparent;
}
.party-panel::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.party-panel.active {
display: flex;
}
/* Name entry inside carousel panel */
.party-panel-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-style: italic;
font-weight: 300;
color: var(--dark);
line-height: 1.9;
text-align: center;
padding: 2px 0;
border-bottom: 1px solid rgba(232, 221, 208, 0.4);
}
.party-panel-name:last-child {
border-bottom: none;
}
/* Scroll hint — fades out when panel is scrolled fully */
.party-panel-hint {
text-align: center;
font-family: 'Jost', sans-serif;
font-size: 0.58rem;
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
opacity: 0.6;
padding: 8px 0 4px;
pointer-events: none;
}
/* Show carousel on mobile, hide desktop grid */
@media (max-width: 639px) {
.party-groups { display: none; }
.party-carousel { display: flex; }
}
/* ── Legacy fallback styles (kept for backward compat) ────── */
.party-principals {
display: flex;
justify-content: center;
gap: clamp(20px, 4vw, 50px);
margin-bottom: clamp(30px, 5vw, 60px);
flex-wrap: wrap;
}
.party-rows {
display: flex;
justify-content: center;
gap: clamp(30px, 6vw, 80px);
flex-wrap: wrap;
margin-bottom: clamp(20px, 4vw, 40px);
}
.party-column {
text-align: center;
min-width: 160px;
}
.party-column-title {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(16px, 3vw, 24px);
display: block;
}
.party-member {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: clamp(16px, 2.5vw, 24px);
}
.party-member-photo {
width: clamp(60px, 10vw, 90px);
height: clamp(60px, 10vw, 90px);
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
}
.party-member-initials {
width: clamp(60px, 10vw, 90px);
height: clamp(60px, 10vw, 90px);
border-radius: 50%;
background: var(--white);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-style: italic;
color: var(--primary);
font-weight: 300;
}
.party-member-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.95rem, 2vw, 1.2rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
}
.party-member-role {
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
.party-extras {
display: flex;
justify-content: center;
gap: clamp(20px, 4vw, 50px);
flex-wrap: wrap;
}
/* ============================================================
15 — EVENT SCHEDULE SECTION
Two cards: Ceremony and Reception.
Each has expandable Order of Events.
============================================================ */
.schedule {
padding: var(--section-padding) 0;
background: var(--white);
}
/* Cards container — side by side on tablet+ */
.schedule-cards {
display: flex;
flex-direction: column; /* stacked on mobile */
gap: clamp(20px, 4vw, 40px);
max-width: 900px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Individual event card */
.schedule-card {
background: var(--secondary);
border: 1px solid var(--border);
padding: clamp(28px, 4vw, 48px);
text-align: center;
flex: 1;
}
/* Card top row: label + icon */
.schedule-card-top {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: clamp(14px, 2vw, 20px);
}
/* "Ceremony" / "Reception" label */
.schedule-card-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--primary);
}
.schedule-card-icon {
color: var(--primary);
font-size: 0.6rem;
opacity: 0.6;
}
/* Venue name */
.schedule-card-venue {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.3rem, 2.5vw, 1.9rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
margin-bottom: 8px;
}
/* Address */
.schedule-card-address {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
margin-bottom: clamp(14px, 2vw, 20px);
}
/* Time */
.schedule-card-time {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 300;
color: var(--dark);
display: block;
margin-bottom: clamp(16px, 2.5vw, 24px);
}
/* Google Maps button */
.schedule-map-btn {
display: inline-block;
border: 1px solid var(--primary);
color: var(--primary);
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 10px 24px;
margin-bottom: clamp(20px, 3vw, 32px);
transition: all var(--transition-med);
}
.schedule-map-btn:hover {
background: var(--primary);
color: var(--white);
}
/* "Add to Calendar" ICS download button */
.schedule-ics-btn {
display: inline-block;
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 10px 24px;
margin-bottom: clamp(20px, 3vw, 32px);
margin-left: 10px;
cursor: pointer;
background: none;
transition: all var(--transition-med);
}
.schedule-ics-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
/* "Order of Events" toggle button */
.schedule-toggle {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border);
padding-top: clamp(14px, 2vw, 20px);
cursor: pointer;
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
transition: color var(--transition-fast);
}
.schedule-toggle:hover {
color: var(--primary);
}
/* +/- icon on the toggle */
.schedule-toggle-icon {
font-size: 1.1rem;
font-weight: 300;
color: var(--primary);
transition: transform var(--transition-fast);
}
/* Rotated when open */
.schedule-toggle-icon.open {
transform: rotate(45deg);
}
/* Expandable order of events list */
.order-of-events {
text-align: left;
padding-top: clamp(14px, 2vw, 20px);
border-top: 1px solid var(--border);
margin-top: clamp(14px, 2vw, 20px);
}
/* Individual timeline entry */
.order-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: clamp(8px, 1.5vw, 12px) 0;
border-bottom: 1px solid rgba(232, 221, 208, 0.5);
}
.order-item:last-child {
border-bottom: none;
}
/* Time on the left */
.order-item-time {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.1em;
color: var(--primary);
min-width: 60px;
padding-top: 2px;
}
/* Event name on the right */
.order-item-event {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.95rem, 2vw, 1.15rem);
font-style: italic;
color: var(--dark);
font-weight: 300;
}
/* ============================================================
16 — DRESS CODE SECTION
Visual color swatches + description text.
============================================================ */
.dresscode {
padding: var(--section-padding) 0;
background: var(--secondary);
text-align: center;
}
/* "Garden Formal" theme label */
.dresscode-theme {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.3rem, 3vw, 2rem);
font-style: italic;
font-weight: 300;
color: var(--primary);
margin-bottom: clamp(12px, 2vw, 20px);
}
/* Description text */
.dresscode-description {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
max-width: 560px;
margin: 0 auto clamp(30px, 5vw, 50px);
line-height: 1.8;
}
/* Color swatches row */
.dresscode-swatches {
display: flex;
justify-content: center;
gap: clamp(16px, 3vw, 32px);
flex-wrap: wrap;
}
/* Individual swatch */
.swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* The colored circle */
.swatch-circle {
width: clamp(50px, 8vw, 72px);
height: clamp(50px, 8vw, 72px);
border-radius: 50%;
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(44, 44, 44, 0.08);
transition: transform var(--transition-fast);
}
.swatch:hover .swatch-circle {
transform: scale(1.08);
}
/* Color name label below circle */
.swatch-label {
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
}
/* ── GROUPED DRESS CODE (3-column layout) ────────────────────── */
.dresscode-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 2vw, 24px);
max-width: 860px;
margin: 0 auto;
}
.dresscode-group {
background: var(--white);
border: 1px solid var(--border);
padding: clamp(20px, 3vw, 32px) clamp(14px, 2vw, 24px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(10px, 1.5vw, 16px);
}
.dresscode-group-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--primary);
text-align: center;
line-height: 1.5;
}
.dresscode-group-instruction {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.85rem, 1.6vw, 1rem);
font-style: italic;
font-weight: 300;
color: var(--muted);
text-align: center;
line-height: 1.6;
}
.dresscode-group-swatches {
display: flex;
gap: clamp(8px, 1.5vw, 14px);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.dresscode-groups {
grid-template-columns: 1fr;
max-width: 340px;
}
}
/* ============================================================
17 — REGISTRY SECTION
Bank + GCash + Maya cards — minimal, clean.
============================================================ */
.registry {
padding: var(--section-padding) 0;
background: var(--dark-section);
text-align: center;
}
/* Message above the cards - on dark section, use light color */
.registry-message {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-style: italic;
font-weight: 300;
color: var(--white);
max-width: 560px;
margin: 0 auto clamp(30px, 5vw, 50px);
line-height: 1.8;
}
/* Cards row — stacked on mobile, side by side on tablet+ */
.registry-cards {
display: flex;
flex-direction: column;
gap: clamp(16px, 2.5vw, 24px);
align-items: center;
justify-content: center;
max-width: 1080px;
width: 100%;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* When 2+ cards are visible — row layout on tablet+ */
@media (min-width: 640px) {
.registry-cards {
flex-direction: row;
align-items: stretch; /* equal height cards */
flex-wrap: nowrap; /* always single row on tablet+ */
}
/* Each card takes equal width — no max-width cap so 3 fit cleanly */
.registry-card {
flex: 1 1 0;
max-width: none;
min-width: 0;
}
}
/* Individual registry card — bank, GCash, or Maya */
.registry-card {
background: var(--white);
border: 1px solid var(--border);
padding: clamp(24px, 4vw, 40px);
width: 100%;
max-width: 380px;
text-align: center;
}
/* Card type label — "Bank Transfer", "GCash", "Maya" */
/* Tiny spaced caps — very subtle, minimal */
.registry-card-type {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(12px, 2vw, 18px);
opacity: 0.8;
}
/* Bank / platform name */
.registry-bank {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
/* Account holder name */
.registry-account-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
margin-bottom: clamp(14px, 2vw, 20px);
}
/* Account/mobile number row with copy button */
.registry-number-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: transparent;
border: 1px solid var(--border);
padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
overflow: hidden;
}
/* The number itself */
.registry-account-number {
font-family: 'Jost', sans-serif;
font-size: clamp(0.78rem, 1.4vw, 0.95rem);
font-weight: 400;
letter-spacing: 0.05em;
color: var(--dark);
white-space: nowrap;
}
/* Copy button */
.registry-copy-btn {
font-family: 'Jost', sans-serif;
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primary);
border: 1px solid var(--primary);
padding: 5px 12px;
cursor: pointer;
transition: all var(--transition-fast);
background: none;
flex-shrink: 0;
}
.registry-copy-btn:hover {
background: var(--primary);
color: var(--white);
}
/* QR Code registry card */
.registry-card--qr {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(12px, 2vw, 18px);
}
/* QR-only layout — center the single card */
.registry-cards--qr-only {
justify-content: center;
}
.registry-cards--qr-only .registry-card {
max-width: 300px;
}
.registry-qr-img {
width: clamp(140px, 22vw, 220px);
height: clamp(140px, 22vw, 220px);
object-fit: contain;
border: 1px solid var(--border);
padding: 10px;
background: var(--white);
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.registry-qr-img:hover {
transform: scale(1.03);
box-shadow: 0 8px 30px rgba(44, 44, 44, 0.12);
}
.registry-qr-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
}
/* Subtle "tap to enlarge" hint below label */
.registry-qr-hint {
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.65;
}
/* ── QR CODE LIGHTBOX ─────────────────────────────────────────
Full-screen overlay for enlarged QR scanning.
Tap outside the card or press × to close.
──────────────────────────────────────────────────────────── */
.qr-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(44, 30, 16, 0.82);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 5vw, 60px);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: qr-fade-in 0.22s ease;
}
@keyframes qr-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.qr-lightbox-close {
position: fixed;
top: clamp(16px, 3vw, 28px);
right: clamp(16px, 3vw, 28px);
width: 44px;
height: 44px;
background: var(--white);
border: 1px solid var(--border);
color: var(--dark);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast), color var(--transition-fast);
z-index: 2001;
}
.qr-lightbox-close:hover {
background: var(--dark);
color: var(--white);
}
.qr-lightbox-inner {
background: var(--white);
border: 1px solid var(--border);
padding: clamp(24px, 5vw, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 3vw, 28px);
max-width: 440px;
width: 100%;
animation: qr-slide-up 0.25s ease;
}
@keyframes qr-slide-up {
from { transform: translateY(12px); opacity: 0.6; }
to { transform: translateY(0); opacity: 1; }
}
.qr-lightbox-img {
width: min(80vw, 80vh, 340px);
height: min(80vw, 80vh, 340px);
object-fit: contain;
display: block;
}
.qr-lightbox-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
/* Confirmation text after copy */
.registry-copy-confirm {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 300;
letter-spacing: 0.1em;
color: var(--primary);
margin-top: 10px;
}
/* Optional online registry link button */
.registry-link-btn {
display: inline-block;
margin-top: clamp(20px, 3vw, 30px);
border: 1px solid var(--border);
color: var(--muted);
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
padding: 12px 28px;
transition: all var(--transition-med);
}
.registry-link-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
/* ============================================================
18 — FAQs SECTION
Expandable accordion items.
============================================================ */
.faqs {
padding: var(--section-padding) 0;
background: var(--secondary);
}
/* FAQ list container */
.faqs-list {
max-width: 700px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Individual FAQ item */
.faq-item {
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.faq-item:first-child {
border-top: 1px solid var(--border);
}
/* Question row — clickable */
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(16px, 2.5vw, 22px) 0;
cursor: pointer;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2.2vw, 1.25rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
transition: color var(--transition-fast);
text-align: left;
gap: 16px;
}
.faq-question:hover {
color: var(--primary);
}
/* +/- icon */
.faq-icon {
font-size: 1.1rem;
font-weight: 300;
color: var(--primary);
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.faq-icon.open {
transform: rotate(45deg);
}
/* Answer text — hidden by default */
.faq-answer {
display: none;
padding: 0 0 clamp(16px, 2.5vw, 22px) 0;
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
line-height: 1.8;
text-align: left;
}
.faq-answer.open {
display: block;
}
/* ============================================================
19 — RSVP SECTION
Full form. Submits to Google Sheets via Apps Script.
============================================================ */
.rsvp {
padding: var(--section-padding) 0;
background: var(--white);
position: relative;
}
/* Botanical decoration at top of RSVP section */
.rsvp-botanical {
color: var(--primary);
opacity: 0.2;
text-align: center;
margin-bottom: clamp(-10px, -2vw, -20px);
pointer-events: none;
}
.rsvp-botanical svg {
width: clamp(200px, 50vw, 400px);
margin: 0 auto;
}
/* RSVP deadline notice */
.rsvp-deadline {
font-family: 'Jost', sans-serif;
font-size: clamp(0.85rem, 1.6vw, 1rem);
font-weight: 300;
color: var(--white);
letter-spacing: 0.06em;
margin-bottom: clamp(30px, 5vw, 50px);
text-align: center;
opacity: 0.85;
}
.rsvp-deadline strong {
color: var(--primary);
font-weight: 500;
letter-spacing: 0.04em;
background: var(--white);
padding: 2px 10px;
}
/* ── RSVP Button Choice UI ──────────────────────────────── */
/* Outer wrapper replacing the old form */
.rsvp-choice {
max-width: 600px;
margin: 0 auto;
padding: 0 var(--container-pad);
text-align: center;
}
/* Step 1 — the two main choice buttons */
.rsvp-buttons {
animation: fadeInUp 0.6s ease forwards;
}
/* Prompt text above the buttons */
.rsvp-choice-prompt {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-style: italic;
font-weight: 300;
color: var(--muted);
margin-bottom: clamp(28px, 5vw, 44px);
letter-spacing: 0.03em;
}
/* Row that holds both buttons side-by-side */
.rsvp-btn-row {
display: flex;
gap: clamp(14px, 3vw, 24px);
justify-content: center;
flex-wrap: wrap;
}
/* Base card button */
.rsvp-choice-btn {
flex: 1;
min-width: 200px;
max-width: 260px;
padding: clamp(28px, 5vw, 44px) clamp(16px, 3vw, 28px);
background: var(--secondary);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.35s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
}
.rsvp-choice-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--primary);
transform: scaleX(0);
transition: transform 0.35s ease;
transform-origin: center;
}
.rsvp-choice-btn:hover::after,
.rsvp-choice-btn:focus::after {
transform: scaleX(1);
}
.rsvp-choice-btn:hover,
.rsvp-choice-btn:focus {
border-color: var(--primary);
background: var(--white);
outline: none;
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}
/* Visible focus ring for keyboard-only navigation */
.rsvp-choice-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
/* Icon inside each button */
.rsvp-choice-btn-icon {
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--primary);
line-height: 1;
transition: transform 0.35s ease;
}
.rsvp-choice-btn:hover .rsvp-choice-btn-icon {
transform: scale(1.15);
}
/* Label inside each button */
.rsvp-choice-btn-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--dark);
transition: color 0.35s ease;
}
.rsvp-choice-btn:hover .rsvp-choice-btn-label {
color: var(--primary);
}
/* Decline button — slightly muted by default */
.rsvp-choice-btn--decline .rsvp-choice-btn-icon {
color: var(--muted);
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.rsvp-choice-btn--decline .rsvp-choice-btn-label {
color: var(--muted);
}
.rsvp-choice-btn--decline:hover .rsvp-choice-btn-label,
.rsvp-choice-btn--decline:hover .rsvp-choice-btn-icon {
color: var(--dark);
}
.rsvp-choice-btn--decline::after {
background: var(--muted);
}
/* ── Step 2 — Meal Selection ────────────────────────────── */
.rsvp-step-2 {
animation: fadeInUp 0.5s ease forwards;
}
.rsvp-step-2-sub {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
margin-bottom: clamp(24px, 4vw, 40px);
letter-spacing: 0.05em;
}
/* Meal option pill buttons */
.rsvp-meal-options {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 380px;
margin: 0 auto clamp(24px, 4vw, 36px);
}
.rsvp-meal-btn {
width: 100%;
padding: clamp(14px, 2vw, 18px) clamp(20px, 3vw, 28px);
background: var(--secondary);
border: 1px solid var(--border);
color: var(--dark);
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.rsvp-meal-btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 2px;
background: var(--primary);
transform: scaleY(0);
transition: transform 0.3s ease;
transform-origin: center;
}
.rsvp-meal-btn:hover,
.rsvp-meal-btn:focus {
border-color: var(--primary);
background: var(--white);
color: var(--primary);
outline: none;
padding-left: clamp(26px, 4vw, 38px);
}
.rsvp-meal-btn:hover::before,
.rsvp-meal-btn:focus::before {
transform: scaleY(1);
}
/* Back link */
.rsvp-back-btn {
background: none;
border: none;
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.2em;
color: var(--muted);
cursor: pointer;
padding: 4px 0;
transition: color 0.25s ease;
text-transform: uppercase;
margin-top: 8px;
}
.rsvp-back-btn:hover {
color: var(--dark);
}
/* Success state — shown after form submission */
.rsvp-success {
text-align: center;
padding: clamp(40px, 7vw, 80px) var(--container-pad);
animation: fadeInUp 0.8s ease forwards;
}
.rsvp-success-icon {
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--primary);
margin-bottom: clamp(16px, 2.5vw, 24px);
}
.rsvp-success-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
margin-bottom: 12px;
}
.rsvp-success-message {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
line-height: 1.8;
}
/* ── Group summary shown on success screen ── */
.rsvp-group-summary {
margin-top: clamp(28px, 4vw, 40px);
text-align: left;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.rsvp-summary-label {
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--primary);
text-align: center;
margin-bottom: 16px;
}
.rsvp-summary-list {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.rsvp-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px;
gap: 12px;
border-bottom: 1px solid var(--border);
}
.rsvp-summary-row:last-child {
border-bottom: none;
}
.rsvp-summary-name {
font-family: 'Jost', sans-serif;
font-size: 0.85rem;
font-weight: 300;
color: var(--dark);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rsvp-summary-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.05em;
white-space: nowrap;
padding: 3px 10px;
border-radius: 20px;
flex-shrink: 0;
}
.rsvp-summary-attending {
background: rgba(201, 169, 110, 0.1);
color: var(--primary);
border: 1px solid rgba(201, 169, 110, 0.3);
}
.rsvp-summary-declined {
background: rgba(140, 123, 107, 0.08);
color: var(--muted);
border: 1px solid var(--border);
}
.rsvp-summary-pending {
background: transparent;
color: var(--muted);
border: 1px dashed var(--border);
opacity: 0.75;
}
.rsvp-summary-icon {
font-size: 0.65rem;
}
/* ============================================================
19b — RSVP COMPANION / CONFIRM STYLES
Companion rows, Yes/No buttons, confirm button, children
counter — all injected dynamically by script.js initRSVP().
============================================================ */
/* Selected state for the main JOYFULLY ACCEPTS / REGRETFULLY DECLINES cards */
.rsvp-choice-btn--selected {
border-color: var(--primary) !important;
background: rgba(201, 169, 110, 0.06) !important;
}
.rsvp-choice-btn--selected .rsvp-choice-btn-icon {
color: var(--primary);
}
/* "And for your group?" section */
.rsvp-companions {
margin-top: clamp(24px, 4vw, 36px);
animation: fadeInUp 0.4s ease forwards;
}
.rsvp-companions-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: clamp(12px, 2vw, 18px);
text-align: center;
}
/* One companion per row — name on left, Yes/No on right */
.rsvp-companion-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1.25rem;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--white);
margin-bottom: 0.5rem;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.rsvp-companion-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-weight: 300;
color: var(--dark);
flex: 1;
text-align: left;
}
.rsvp-companion-btns {
display: flex;
gap: 0.4rem;
flex-shrink: 0;
}
/* Compact Yes / No pill buttons for each companion */
.rsvp-companion-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.9rem;
border: 1px solid var(--border);
border-radius: 2px;
background: transparent;
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.rsvp-companion-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.rsvp-companion-btn-icon {
font-size: 0.55rem;
color: var(--primary);
}
/* Yes button selected */
.rsvp-companion-yes.rsvp-companion-btn--selected {
border-color: var(--primary);
background: rgba(201, 169, 110, 0.08);
color: var(--primary);
}
/* No button selected */
.rsvp-companion-no.rsvp-companion-btn--selected {
border-color: var(--muted);
background: rgba(140, 123, 107, 0.06);
color: var(--muted);
}
/* Read-only status badge (already-responded companions) */
.rsvp-status-badge {
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: 2px;
border: 1px solid var(--border);
flex-shrink: 0;
}
.rsvp-status-confirmed {
color: var(--primary);
border-color: var(--primary);
background: rgba(92, 16, 16, 0.06);
}
.rsvp-status-declined {
color: var(--muted);
border-color: var(--border);
background: transparent;
}
/* +1 and children wrapper reuse companion styles */
.rsvp-plusone-wrap,
.rsvp-children-wrap {
margin-top: clamp(16px, 2.5vw, 24px);
animation: fadeInUp 0.3s ease forwards;
}
/* Children counter — − 0 + */
.rsvp-children-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
.rsvp-counter-btn {
width: 2rem;
height: 2rem;
border: 1px solid var(--border);
border-radius: 50%;
background: transparent;
font-size: 1.1rem;
color: var(--primary);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.rsvp-counter-btn:hover {
border-color: var(--primary);
background: rgba(201, 169, 110, 0.08);
}
.rsvp-counter-val {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 300;
color: var(--dark);
min-width: 1.5rem;
text-align: center;
}
.rsvp-counter-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
margin-bottom: 0.5rem;
}
/* Confirm RSVP button */
.rsvp-confirm-wrap {
margin-top: clamp(24px, 4vw, 36px);
text-align: center;
animation: fadeInUp 0.3s ease forwards;
}
.rsvp-confirm-btn {
display: inline-block;
padding: 0.85rem 2.5rem;
border: 1px solid var(--primary);
border-radius: 2px;
background: transparent;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--primary);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.rsvp-confirm-btn:hover {
background: var(--primary);
color: var(--white);
}
/* ── at-img-wrap / at-img-overlay — JS-injected photo protection ──────
script.js wraps every
*/
.lace-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 700px;
overflow: hidden;
line-height: 0;
opacity: 0.35;
color: var(--primary);
}
.lace-divider svg {
width: 100%;
height: auto;
display: block;
}
/* Standalone lace block with spacing — drop between any two sections */
.lace-divider-section {
padding: 0;
margin: 0;
background: transparent;
position: relative;
z-index: 1;
pointer-events: none;
}
/* ── Gold divider → upgraded to burgundy wine rule ──────────── */
.gold-divider::before,
.gold-divider::after {
background: var(--primary);
opacity: 0.35;
}
/* ── Nav scrolled: warm parchment background ─────────────────── */
.nav.scrolled {
background: rgba(245, 237, 224, 0.97);
box-shadow: 0 1px 0 var(--border), 0 2px 16px rgba(44, 26, 26, 0.08);
}
/* ── Hero: burgundy vignette at bottom edge ─────────────────── */
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to top, rgba(44, 26, 26, 0.5), transparent);
z-index: 2;
pointer-events: none;
}
/* ── Hero botanical corners: burgundy tint ──────────────────── */
.hero-botanical {
color: var(--primary);
opacity: 0.22;
}
/* ── Hero ampersand line: warm burgundy ─────────────────────── */
.hero-line {
background: rgba(122, 28, 28, 0.45);
}
.hero-ampersand {
color: rgba(255, 253, 249, 0.75);
}
/* ── Hero CTA button: old money outlined style ──────────────── */
.hero-cta {
border: 1px solid rgba(255, 253, 249, 0.55);
color: rgba(255, 253, 249, 0.9);
letter-spacing: 0.4em;
padding: 14px 40px;
transition: all 0.45s ease;
}
.hero-cta:hover {
background: rgba(122, 28, 28, 0.75);
border-color: var(--primary);
color: var(--white);
}
/* ── Scroll line: burgundy gradient ─────────────────────────── */
.hero-scroll-line {
background: linear-gradient(to bottom, transparent, rgba(122, 28, 28, 0.7));
}
/* ── Countdown: subtle parchment borders ────────────────────── */
.countdown-unit {
border-color: var(--border);
background: transparent;
position: relative;
}
/* Thin burgundy top accent on countdown boxes */
.countdown-unit::before {
content: '';
position: absolute;
top: -1px;
left: 20%;
right: 20%;
height: 2px;
background: var(--primary);
opacity: 0.6;
}
.countdown-sep {
color: var(--primary);
opacity: 0.5;
}
/* ── Video frame: burgundy instead of gold ──────────────────── */
.video-frame-outer {
border-color: rgba(122, 28, 28, 0.30);
padding: 8px;
}
/* ── Cards: refined parchment with subtle left accent ───────── */
.schedule-card {
border-left: 3px solid var(--primary);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--secondary);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.schedule-card:hover {
box-shadow: 0 8px 40px rgba(44, 26, 26, 0.09);
transform: translateY(-2px);
}
/* ── Registry cards: same treatment ─────────────────────────── */
.registry-card {
border-left: 3px solid var(--primary);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--secondary);
}
/* ── Dress code groups: old money panel feel ─────────────────── */
.dresscode-group {
border-left: 3px solid var(--primary);
background: var(--secondary);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* ── FAQ items: elegant rule style ─────────────────────────── */
.faq-item {
border-color: var(--border);
}
.faq-question:hover {
color: var(--primary);
}
.faq-icon {
color: var(--primary);
}
/* ── Buttons: old money outlined style (no radius, clean lines) */
.schedule-map-btn,
.rsvp-confirm-btn,
.hero-cta {
border-radius: 0;
letter-spacing: 0.35em;
}
.schedule-map-btn:hover,
.rsvp-confirm-btn:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
/* Copy button */
.registry-copy-btn:hover {
background: var(--primary);
border-color: var(--primary);
}
/* ── RSVP choice buttons: parchment with burgundy accent ─────── */
.rsvp-choice-btn {
background: var(--secondary);
border: 1px solid var(--border);
border-radius: 0;
transition: all 0.4s ease;
}
.rsvp-choice-btn::after {
background: var(--primary);
height: 3px;
}
.rsvp-choice-btn:hover {
border-color: var(--primary);
background: var(--white);
box-shadow: 0 6px 24px rgba(44, 26, 26, 0.08);
}
/* Selected state */
.rsvp-choice-btn--selected {
border-color: var(--primary) !important;
background: rgba(122, 28, 28, 0.04) !important;
}
/* Attending badge: burgundy */
.rsvp-summary-attending {
background: rgba(122, 28, 28, 0.07);
color: var(--primary);
border: 1px solid rgba(122, 28, 28, 0.25);
}
/* ── Gallery: burgundy hover overlay ────────────────────────── */
.gallery-item::after {
background: rgba(122, 28, 28, 0.12);
}
/* ── Lightbox: dark burgundy-brown overlay ───────────────────── */
.lightbox {
background: rgba(30, 16, 16, 0.97);
}
.lightbox-img {
border-color: rgba(122, 28, 28, 0.2);
}
/* ── Timeline dot: burgundy ─────────────────────────────────── */
.timeline-dot {
background: var(--primary);
border-color: var(--secondary);
width: 12px;
height: 12px;
}
.timeline::before {
background: linear-gradient(to bottom, transparent, var(--primary), transparent);
opacity: 0.3;
}
/* ── Footer: very dark burgundy-brown base ───────────────────── */
.footer {
background-color: var(--dark-section);
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-footer);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.footer-botanical {
color: rgba(122, 28, 28, 0.3);
}
.footer-divider span:first-child,
.footer-divider span:last-child {
background: rgba(122, 28, 28, 0.4);
}
.footer-diamond {
color: var(--primary);
}
/* ── Music player: dark burgundy ────────────────────────────── */
.music-player {
background: rgba(26, 10, 10, 0.97);
border-top: 1px solid rgba(122, 28, 28, 0.3);
}
.music-play-btn {
border-color: rgba(122, 28, 28, 0.5);
}
.music-play-btn:hover {
background: rgba(122, 28, 28, 0.15);
border-color: var(--primary);
}
/* ── QR lightbox: dark burgundy ─────────────────────────────── */
.qr-lightbox {
background: rgba(44, 26, 26, 0.88);
}
/* ── Page loader: centered couple name on parchment ─────────── */
.page-loader {
background: var(--secondary);
}
.loader-bar-fill {
background: var(--primary);
}
.loader-dots span {
background: var(--primary);
}
/* ── Loader bar for old money: thicker and centered ─────────── */
.loader-bar {
height: 2px;
width: clamp(100px, 22vw, 160px);
}
/* ============================================================
SECTION ALTERNATION — OLD MONEY BURGUNDY
Light sections: warm parchment / off-white
Dark sections: deep wine burgundy (#3D0C0C)
============================================================ */
/* ── Light sections (odd) ───────────────────────────────────── */
.bg-odd { background: var(--white) !important; }
/* ── Dark sections (even) — FULL DEEP BURGUNDY ──────────────── */
.bg-even {
background: var(--dark-section) !important;
}
/* All text on dark sections flips to light */
.bg-even .section-label {
color: rgba(245, 237, 224, 0.65) !important;
}
.bg-even .section-title {
color: #F5EDE0 !important;
}
.bg-even .section-subtitle {
color: rgba(245, 237, 224, 0.70) !important;
}
.bg-even p,
.bg-even li,
.bg-even span:not(.gold-divider-diamond):not(.couple-note-diamond):not(.footer-diamond) {
color: rgba(245, 237, 224, 0.80) !important;
}
.bg-even h1,
.bg-even h2,
.bg-even h3,
.bg-even h4 {
color: #F5EDE0 !important;
}
/* Cards inside dark sections get a semi-transparent parchment feel */
.bg-even .schedule-card,
.bg-even .registry-card,
.bg-even .dresscode-group {
background: rgba(245, 237, 224, 0.08) !important;
border-color: rgba(245, 237, 224, 0.18) !important;
border-left-color: rgba(245, 237, 224, 0.40) !important;
}
.bg-even .schedule-card p,
.bg-even .schedule-card h3,
.bg-even .schedule-card span,
.bg-even .registry-card p,
.bg-even .registry-card h3,
.bg-even .registry-card span,
.bg-even .dresscode-group p,
.bg-even .dresscode-group h3 {
color: #F5EDE0 !important;
}
/* Buttons on dark sections */
.bg-even .schedule-map-btn,
.bg-even .schedule-ics-btn,
.bg-even .registry-copy-btn {
border-color: rgba(245, 237, 224, 0.45) !important;
color: #F5EDE0 !important;
background: transparent !important;
}
.bg-even .schedule-map-btn:hover,
.bg-even .schedule-ics-btn:hover,
.bg-even .registry-copy-btn:hover {
background: rgba(245, 237, 224, 0.15) !important;
}
/* Gold divider on dark sections */
.bg-even .gold-divider::before,
.bg-even .gold-divider::after {
background: rgba(245, 237, 224, 0.35) !important;
}
.bg-even .gold-divider-diamond {
color: rgba(245, 237, 224, 0.60) !important;
}
/* Couple note divider on dark sections */
.bg-even .couple-note-divider span:first-child,
.bg-even .couple-note-divider span:last-child {
background: rgba(245, 237, 224, 0.30) !important;
}
.bg-even .couple-note-diamond {
color: rgba(245, 237, 224, 0.55) !important;
}
/* Timeline vertical line on dark sections */
.bg-even .timeline::before {
background: linear-gradient(to bottom, transparent, rgba(245, 237, 224, 0.30), transparent) !important;
opacity: 1 !important;
}
.bg-even .timeline-dot {
background: #F5EDE0 !important;
border-color: var(--dark-section) !important;
}
.bg-even .timeline-date {
color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .timeline-photo img {
border-color: rgba(245, 237, 224, 0.20) !important;
}
/* FAQ accordion on dark sections */
.bg-even .faq-item {
border-color: rgba(245, 237, 224, 0.20) !important;
}
.bg-even .faq-question {
color: #F5EDE0 !important;
}
.bg-even .faq-question:hover {
color: rgba(245, 237, 224, 0.75) !important;
}
.bg-even .faq-icon {
color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .faq-answer {
color: rgba(245, 237, 224, 0.70) !important;
}
/* RSVP section on dark background */
.bg-even .rsvp-choice-btn {
background: rgba(245, 237, 224, 0.08) !important;
border-color: rgba(245, 237, 224, 0.35) !important;
color: #F5EDE0 !important;
}
.bg-even .rsvp-choice-btn:hover {
background: rgba(245, 237, 224, 0.15) !important;
}
.bg-even .rsvp-confirm-btn {
border-color: rgba(245, 237, 224, 0.55) !important;
color: #F5EDE0 !important;
}
.bg-even .rsvp-confirm-btn:hover {
background: rgba(245, 237, 224, 0.15) !important;
}
/* Companion rows + status elements on dark (wine) RSVP background */
.bg-even .rsvp-companions-label {
color: rgba(245, 237, 224, 0.55) !important;
}
.bg-even .rsvp-companion-row {
background: rgba(245, 237, 224, 0.05) !important;
border-color: rgba(245, 237, 224, 0.18) !important;
}
.bg-even .rsvp-companion-name {
color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-btn {
border-color: rgba(245, 237, 224, 0.28) !important;
color: rgba(245, 237, 224, 0.65) !important;
background: transparent !important;
}
.bg-even .rsvp-companion-btn:hover {
border-color: rgba(245, 237, 224, 0.65) !important;
color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-btn-icon {
color: rgba(245, 237, 224, 0.75) !important;
}
.bg-even .rsvp-companion-yes.rsvp-companion-btn--selected {
border-color: rgba(245, 237, 224, 0.80) !important;
background: rgba(245, 237, 224, 0.12) !important;
color: #F5EDE0 !important;
}
.bg-even .rsvp-companion-no.rsvp-companion-btn--selected {
border-color: rgba(245, 237, 224, 0.35) !important;
background: rgba(245, 237, 224, 0.06) !important;
color: rgba(245, 237, 224, 0.50) !important;
}
.bg-even .rsvp-status-badge {
border-color: rgba(245, 237, 224, 0.25) !important;
color: rgba(245, 237, 224, 0.60) !important;
background: transparent !important;
}
.bg-even .rsvp-status-confirmed {
border-color: rgba(245, 237, 224, 0.55) !important;
color: rgba(245, 237, 224, 0.90) !important;
background: rgba(245, 237, 224, 0.08) !important;
}
.bg-even .rsvp-status-declined {
border-color: rgba(245, 237, 224, 0.20) !important;
color: rgba(245, 237, 224, 0.40) !important;
}
/* Botanical SVGs on dark sections */
.bg-even .countdown-botanical,
.bg-even .std-botanical,
.bg-even .couple-note-botanical,
.bg-even .rsvp-botanical {
color: rgba(245, 237, 224, 0.22) !important;
}
/* Countdown units on dark sections */
.bg-even .countdown-unit {
border-color: rgba(245, 237, 224, 0.22) !important;
}
.bg-even .countdown-unit::before {
background: rgba(245, 237, 224, 0.40) !important;
}
.bg-even .countdown-number {
color: #F5EDE0 !important;
}
.bg-even .countdown-label {
color: rgba(245, 237, 224, 0.60) !important;
}
.bg-even .countdown-sep {
color: rgba(245, 237, 224, 0.45) !important;
opacity: 1 !important;
}
/* Video frame on dark sections */
.bg-even .video-frame-outer {
border-color: rgba(245, 237, 224, 0.22) !important;
}
/* ============================================================
LACE DIVIDER — Sits BETWEEN sections at the transition edge
Usage in main.html:
============================================================ */
.lace-divider-wrap {
position: relative;
z-index: 2;
pointer-events: none;
line-height: 0;
/* No height — it sits flush between two sections */
}
/* Full-width lace scallop strip — sits at top of dark section */
.lace-row {
display: block;
width: 100%;
overflow: hidden;
}
/* When lace sits on top of a DARK section (scallops face down into section) */
.lace-row--onto-dark {
color: var(--dark-section); /* lace color = dark section color */
background: var(--white); /* the light section color above it */
}
/* When lace sits on top of a LIGHT section (scallops face down into section) */
.lace-row--onto-light {
color: var(--white); /* lace = light section color */
background: var(--dark-section); /* dark section above it */
}
.lace-row svg {
display: block;
width: 100%;
height: clamp(28px, 4vw, 48px);
}
/* ============================================================
LACE BORDER DECORATIONS
Lace-edged card for photo/content blocks (like image 6)
============================================================ */
.lace-card {
position: relative;
background: var(--white);
border: 1px solid var(--border);
padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
max-width: 600px;
margin: 0 auto;
}
/* Lace overlay — drawn with repeating radial gradients (CSS-only, no image needed) */
.lace-card::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid var(--border);
pointer-events: none;
z-index: 0;
}
.lace-card > * {
position: relative;
z-index: 1;
}
/* ── Couple note: large opening quote in burgundy ───────────── */
.couple-note-quote-mark {
color: var(--primary);
opacity: 0.18;
}
/* ── Dresscode theme label: burgundy italic ─────────────────── */
.dresscode-theme {
color: var(--primary);
}
/* ── Mobile menu: very dark burgundy-brown overlay ───────────── */
@media (max-width: 767px) {
body.menu-open::before {
background: rgba(26, 10, 10, 0.98);
}
.nav-links.open,
body.menu-open #nav-links {
background: rgba(26, 10, 10, 0.98) !important;
}
}
/* ============================================================
LACE DIVIDER SVG DEFINITION
─────────────────────────────────────────────────────────────
How to use in HTML between any two sections:
─────────────────────────────────────────────────────────────
For an INVERTED lace (scallops pointing up — use on top edge
of dark sections like footer):
Add style="transform: rotate(180deg)" on the
============================================================ */
/* ============================================================
AT STUDIO — PREMIUM WEDDING TEMPLATE
style.css — Old Money Theme Extension
© 2025 AT Studio. All Rights Reserved.
============================================================ */
/* ============================================================
LACE SCALLOP TRANSITIONS — bg-even dark sections
Adds a scalloped lace edge at the top and bottom of every
dark (bg-even) section, biting into the adjacent light section.
Pure CSS — no HTML changes needed.
============================================================ */
.bg-even {
position: relative;
z-index: 2;
overflow: visible !important;
}
/* Top scallop — dark section bites UP into the light section above */
.bg-even::before {
content: '';
position: absolute;
top: -24px;
left: 0;
right: 0;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 40px 28px;
pointer-events: none;
z-index: 3;
}
/* Bottom scallop — dark section bites DOWN into the light section below */
.bg-even::after {
content: '';
position: absolute;
bottom: -24px;
left: 0;
right: 0;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 40px 28px;
pointer-events: none;
z-index: 3;
}
/* Light sections sit below dark sections */
.bg-odd {
position: relative;
z-index: 1;
}
/* Padding adjustment — give the lace scallops room to breathe */
.bg-even {
padding-top: calc(var(--section-padding) + 10px);
padding-bottom: calc(var(--section-padding) + 10px);
}
/* ============================================================
OLD MONEY TYPOGRAPHY ENHANCEMENTS
Matches the reference's calligraphic section titles and
editorial justified body text.
============================================================ */
/* ── Section titles: switch to calligraphic script ──────────── */
/* Pinyon Script is loaded via main.html Google Fonts link.
Falls back to Cormorant Garamond if not loaded. */
.section-title {
font-family: 'Pinyon Script', 'Cormorant Garamond', serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
letter-spacing: 0.01em;
line-height: 1.15 !important;
}
/* Section titles on dark sections stay cream */
.bg-even .section-title {
color: #EDE5D8 !important;
}
/* ── Hero names: keep Cormorant, but slightly heavier ────────── */
.hero-groom,
.hero-bride {
font-weight: 400;
letter-spacing: 0.01em;
}
/* ── Body text on light sections: justified editorial feel ───── */
.timeline-description,
.couple-note-message,
.dresscode-description,
.registry-message,
.faq-answer p,
.schedule-card-address,
.footer-thanks,
.footer-verse {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
/* Section subtitles stay centered */
.section-subtitle {
text-align: center;
}
/* ── Timeline title: calligraphic script ────────────────────── */
.timeline-title {
font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-style: normal;
}
/* ── Couple note message: larger, more editorial ────────────── */
.couple-note-message {
font-size: clamp(1rem, 2.2vw, 1.35rem);
line-height: 2;
}
/* ── Section label: slightly more spaced, refined ───────────── */
.section-label {
letter-spacing: 0.5em;
font-size: clamp(0.58rem, 1.1vw, 0.7rem);
}
/* ============================================================
TEXTURE SYSTEM — OLD MONEY LINEN & VELVET
Adds paper/fabric texture to both light and dark sections.
Pure CSS — no image files needed.
============================================================ */
/* ── CREAM SECTIONS: linen/paper grain texture ───────────────
Uses a repeating SVG noise pattern that creates fine vertical
grain lines, replicating the linen/handmade-paper feel in the
reference. Layered under the background color. */
.bg-odd {
background-image:
/* Fine vertical linen grain */
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(160, 130, 100, 0.03) 2px,
rgba(160, 130, 100, 0.03) 3px
),
/* Subtle horizontal weave cross-threads */
repeating-linear-gradient(
0deg,
transparent,
transparent 8px,
rgba(140, 110, 80, 0.02) 8px,
rgba(140, 110, 80, 0.02) 9px
) !important;
background-size: 3px 9px !important;
}
/* ── DARK SECTIONS: velvet/noise texture ─────────────────────
Uses layered radial gradients and noise to simulate the
aged velvet / leather look seen in the red reference sections. */
.bg-even {
background-image:
/* Subtle noise grain on top */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
/* Vignette: slightly darker at edges, lighter toward center */
radial-gradient(
ellipse at center,
rgba(80, 10, 10, 0.0) 0%,
rgba(20, 0, 0, 0.35) 100%
) !important;
background-size: 200px 200px, cover !important;
background-blend-mode: overlay, normal !important;
}
/* ── CURTAIN DRAPE EFFECT on dark sections ───────────────────
Replicates the velvet curtain panels visible in the reference.
Subtle vertical shadow columns that feel like draped fabric. */
.bg-even::before {
/* Override: keep the lace scallop but add curtain columns behind it */
background-image:
/* Lace scallop (kept) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3C/svg%3E"),
/* Curtain panel shadows */
repeating-linear-gradient(
90deg,
rgba(0,0,0,0.08) 0px,
transparent 30px,
transparent 90px,
rgba(0,0,0,0.08) 120px
) !important;
background-size: 40px 28px, 120px 100% !important;
background-repeat: repeat-x, repeat !important;
}
/* ============================================================
LACE DOILY CARD — registry/gifts section
Recreates the lace-bordered card from the reference (image 6).
Applied to the registry section cards on dark backgrounds.
============================================================ */
.bg-even .registry-card,
.bg-even .schedule-card {
position: relative;
/* Inner double border to simulate doily card frame */
outline: 1px solid rgba(245, 237, 224, 0.15);
outline-offset: -8px;
/* Corner roses using box-shadow layering */
box-shadow:
0 0 0 1px rgba(245, 237, 224, 0.12),
inset 0 0 0 1px rgba(245, 237, 224, 0.08),
0 8px 40px rgba(0, 0, 0, 0.25) !important;
}
/* ── Decorative corner dots on dark cards (lace corners) ──── */
.bg-even .registry-card::before,
.bg-even .schedule-card::before {
content: '✦';
position: absolute;
top: 10px;
left: 14px;
font-size: 0.5rem;
color: rgba(245, 237, 224, 0.25);
pointer-events: none;
}
/* ============================================================
PAPER GRAIN OVERLAY — global subtle noise
Applied to the whole page body for a unified aged-paper feel.
============================================================ */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.018;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 300px 300px;
mix-blend-mode: multiply;
}
/* ============================================================
REAL TEXTURE BACKGROUNDS — PHOTO-BASED
Replaces CSS-only noise with actual velvet + parchment images.
Files must be in the same folder as style.css:
velvet-bg2.webp — dark red curtain/velvet
bg1.webp — crumpled cream paper
bg2.webp — smooth grey-beige linen
============================================================ */
/* ── CREAM / LIGHT sections: crumpled aged paper ─────────────
bg1.webp is the primary warm cream texture (more aged/dramatic)
bg2.webp is layered beneath for added depth */
.bg-odd {
background-color: var(--white) !important;
background-image:
url('assets/images/bg22.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-blend-mode: multiply !important;
}
/* ── DARK / BURGUNDY sections: CSS variable defaults ─────────
script.js reads config.sectionBackgrounds and sets these
CSS variables at runtime. Fallback = velvet-bg2.webp.
Each section gets its own image from config.js. */
/* CSS variable defaults — overridden by script.js at runtime */
:root {
--bg-countdown: url('assets/images/velvet-bg2.webp');
--bg-save-date: url('assets/images/oldmoney1.webp');
--bg-couple-note: url('assets/images/velvet-bg2.webp');
--bg-our-story: url('assets/images/wine2.webp');
--bg-gallery: url('assets/images/oldmoney2.webp');
--bg-party: url('assets/images/wine2.webp');
--bg-schedule: url('assets/images/velvet-bg2.webp');
--bg-dresscode: url('assets/images/velvet-bg2.webp');
--bg-registry: url('assets/images/oldmoney2.webp');
--bg-faqs: url('assets/images/wine3.webp');
--bg-rsvp: url('assets/images/velvet-bg2.webp');
--bg-footer: url('assets/images/wine1.webp');
--overlay-dark: rgba(20, 4, 4, 0.65);
}
/* Base rule — fallback for any bg-even without a matching ID */
.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
url('assets/images/velvet-bg2.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Per-section backgrounds — each uses its own --bg-* variable */
#countdown.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-countdown) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#save-the-date.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-save-date) !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
#couple-note.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-couple-note) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#our-story.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-our-story) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#gallery.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-gallery) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#wedding-party.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-party) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#dresscode.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-dresscode) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#registry.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-registry) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#faqs.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-faqs) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#schedule.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-schedule) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#rsvp.bg-even {
background-color: var(--dark-section) !important;
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-rsvp) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* ── Page loader: smooth linen bg2 ─────────────────────────── */
.page-loader {
background-color: var(--secondary) !important;
background-image: url('assets/images/bg22.webp') !important;
background-size: cover !important;
background-position: center !important;
background-blend-mode: multiply !important;
}
/* ── Body base: smooth linen bg2 for non-alternating areas ─── */
body {
background-color: var(--secondary) !important;
background-image: url('assets/images/bg22.webp') !important;
background-size: 100% auto !important;
background-attachment: fixed !important;
background-blend-mode: multiply !important;
}
/* ============================================================
LACE DOILY — "The Details" badge + section accents
lace-doilly3-transparent.png (oval with bow — star pick)
lace-doilly1-transparent.png (simple round — for dividers)
============================================================ */
/* ── Lace doily badge — floats above dark/light transition ─── */
.lace-badge-wrap {
position: relative;
display: flex;
justify-content: center;
margin: 0 auto clamp(-20px, -2vw, -30px);
z-index: 10;
pointer-events: none;
}
.lace-badge-img {
width: clamp(90px, 14vw, 140px);
height: auto;
opacity: 0.82;
filter: drop-shadow(0 4px 16px rgba(44,26,26,0.22));
}
/* ── Round lace doily divider — between sections ─────────────
Centered decorative accent at section header */
.lace-doily-divider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto clamp(16px, 2vw, 24px);
position: relative;
z-index: 5;
pointer-events: none;
padding-top: clamp(24px, 3vw, 36px);
}
.lace-doily-divider img {
width: clamp(50px, 8vw, 80px);
height: auto;
opacity: 0.45;
filter: drop-shadow(0 2px 6px rgba(44,26,26,0.12));
display: block;
}
/* On dark sections, tint the doily cream */
.bg-even .lace-doily-divider img {
filter: brightness(0) invert(1) opacity(0.30)
drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
/* ============================================================
LACE FRAME — Registry / Gifts section card
lace-frame2-transparent.png (cream square lace frame)
Wraps the gift/registry card exactly like reference Image 6
============================================================ */
/* Container that holds the lace frame + content together */
.lace-frame-card {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: clamp(16px, 3vw, 28px);
}
/* The lace frame image — purely decorative border overlay */
.lace-frame-card .lace-frame-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
z-index: 2; /* above content so frame edge sits on top */
opacity: 0.55;
filter: drop-shadow(0 4px 24px rgba(44,26,26,0.15));
}
/* Content sits below the frame overlay */
.lace-frame-card .lace-frame-content {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
max-height: none !important;
z-index: 1;
padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
display: flex;
flex-direction: column;
align-items: center;
}
/* On dark sections, adjust frame brightness and add appropriate styling */
.registry .lace-frame-card .lace-frame-img {
opacity: 0.48;
filter: brightness(1.12) sepia(0.1) drop-shadow(0 6px 28px rgba(0,0,0,0.35));
}
/* ============================================================
LACE SECTION DIVIDERS — between cream and burgundy sections
Uses lace-doilly1-transparent.png as a centered ornament
sitting right at the section boundary
============================================================ */
.lace-section-ornament {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
margin: 0 auto;
padding: 0;
height: 0; /* takes no height — purely decorative overlay */
pointer-events: none;
}
.lace-section-ornament img {
position: absolute;
width: clamp(60px, 10vw, 100px);
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.40;
filter: drop-shadow(0 2px 6px rgba(44,26,26,0.20));
}
/* ============================================================
LACE TRIM STRIPS — horizontal lace edge between sections
Uses CSS scallop but now with the real lace frame image
clipped to just the top edge for a trim effect
============================================================ */
/* Top lace trim — sits at the very top of a section */
.lace-trim-top {
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
margin-bottom: clamp(20px, 3vw, 32px);
}
.lace-trim-top img,
.lace-trim-bottom img {
width: 100%;
max-width: 700px;
height: clamp(40px, 6vw, 70px);
object-fit: cover;
object-position: top center;
opacity: 0.35;
}
/* Bottom lace trim — flipped */
.lace-trim-bottom {
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
margin-top: clamp(20px, 3vw, 32px);
}
.lace-trim-bottom img {
transform: scaleY(-1); /* flip to face downward */
object-position: bottom center;
}
/* ============================================================
COMPREHENSIVE FIXES — Round 3
1. Timeline photo lace borders (like reference Image 1)
2. bg-odd text readability — darker text on parchment
3. Lace doily positioning fixes
4. Footer text alignment fix
5. RSVP subtitle box fix
============================================================ */
/* ── 1. TIMELINE PHOTOS: lace_transparent.png outer border frame ──
Photo stays portrait rectangle. Lace wraps around the outside.
Padding on .timeline-photo creates the gap the lace border fills. */
/* On dark sections — tint lace warm instead of inverting */
.bg-even .timeline-photo::after {
filter: brightness(1.1) sepia(0.1);
}
/* ── 2. TEXT READABILITY on bg-odd (parchment) sections ──────
bg2.webp is grey-beige which can wash out dark text.
Adding a subtle warm overlay and darkening text colors. */
/* Warm cream tint layer over the texture on light sections */
.bg-odd {
background-color: #D9CBBA !important; /* --secondary: warm parchment base */
}
/* Darken all body text on light sections */
.bg-odd .section-label { color: var(--primary) !important; opacity: 1 !important; }
.bg-odd .section-title { color: var(--dark) !important; }
.bg-odd .section-subtitle { color: var(--muted) !important; opacity: 1 !important; }
.bg-odd .timeline-date { color: var(--primary) !important; }
.bg-odd .timeline-title { color: var(--dark) !important; }
.bg-odd .timeline-description { color: #4A3030 !important; }
.bg-odd .party-group-title { color: var(--primary) !important; }
.bg-odd .party-group-name { color: var(--dark) !important; }
.bg-odd .couple-note-message { color: var(--dark) !important; }
.bg-odd .couple-note-signature { color: var(--muted) !important; }
.bg-odd .schedule-card-venue { color: var(--dark) !important; }
.bg-odd .schedule-card-address { color: var(--muted) !important; }
.bg-odd .schedule-card-time { color: var(--dark) !important; }
.bg-odd .faq-question { color: var(--dark) !important; }
.bg-odd .faq-answer { color: var(--muted) !important; }
.bg-odd .registry-message { color: var(--muted) !important; }
.bg-odd .countdown-number { color: var(--dark) !important; }
.bg-odd .countdown-label { color: var(--muted) !important; }
.bg-odd p, .bg-odd li { color: var(--dark) !important; }
.bg-odd h1, .bg-odd h2,
.bg-odd h3, .bg-odd h4 { color: var(--dark) !important; }
/* Cards on light sections: clean white with visible border */
.bg-odd .schedule-card,
.bg-odd .registry-card,
.bg-odd .dresscode-group {
background: rgba(255, 255, 255, 0.65) !important;
border-color: var(--border) !important;
}
/* ── 3. LACE DOILY DIVIDER — remove from countdown (dark section) ─
The doily on countdown was showing as a tiny dark square because
lace-doilly1 has no proper transparency on dark bg.
Replace with a simple CSS ornament instead. */
.bg-even .lace-doily-divider {
display: none !important;
}
/* Simple ornamental line for dark sections instead */
.bg-even .lace-ornament-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 auto clamp(16px, 2vw, 24px);
padding-top: clamp(20px, 3vw, 32px);
}
.bg-even .lace-ornament-line::before,
.bg-even .lace-ornament-line::after {
content: '';
flex: 1;
max-width: 80px;
height: 1px;
background: rgba(245, 237, 224, 0.25);
}
.bg-even .lace-ornament-line span {
color: rgba(245, 237, 224, 0.40);
font-size: 0.5rem;
letter-spacing: 0.3em;
}
/* Lace doily on light sections: show properly */
.bg-odd .lace-doily-divider img {
filter: none !important;
opacity: 0.50 !important;
}
/* ── 4. RSVP subtitle — remove box/border rendering ─────────
The green-circled box around "We have saved a seat just for you"
is from the rsvp-subtitle inside .rsvp-choice which inherits
a border from the card context. Clear it. */
.rsvp .section-subtitle,
.rsvp .rsvp-deadline,
#rsvp-subtitle {
background: none !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
}
/* ── 5. FOOTER text alignment — left-aligned text fix ────────
Image 5 shows footer-thanks floating to the left corner.
Ensure footer content is properly centered. */
.footer-content {
text-align: center !important;
}
.footer-thanks,
.footer-verse {
text-align: center !important;
hyphens: none !important;
-webkit-hyphens: none !important;
max-width: 480px;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── 6. LACE FRAME on registry cards — fix overlay issue ─────
The frame img was covering the card content.
Use it purely as a decorative corner/edge element with
pointer-events off and reduced opacity. */
.lace-frame-card {
overflow: visible !important;
}
.lace-frame-card .lace-frame-img {
opacity: 0.30 !important;
mix-blend-mode: luminosity;
pointer-events: none !important;
}
.bg-even .lace-frame-card .lace-frame-img {
filter: brightness(2) opacity(0.20) !important;
mix-blend-mode: screen;
}
/* ── 7. LACE BADGE (RSVP doily3) — tighter, more elegant ──── */
.lace-badge-wrap {
margin-bottom: 8px !important;
}
.lace-badge-img {
width: clamp(80px, 11vw, 115px) !important;
opacity: 0.88 !important;
}
/* ── 8. COUNTDOWN dark square fix — hide broken img safely ── */
.lace-doily-divider img[src="assets/images/lace-doilly1.png"] {
/* If file missing, show nothing instead of broken square */
min-width: 0 !important;
min-height: 0 !important;
}
.lace-doily-divider:has(img:not([complete])) {
display: none;
}
/* ============================================================
JOURNEY SECTION — OLD MONEY LACE FRAME
Append entire contents to the BOTTOM of style.css
Lace colour: antique cream #F5EDE0
Reads as embroidered fabric on BOTH section backgrounds:
bg-even (dark wine) → cream on burgundy = high contrast
bg-odd (light parchment) → tone-on-tone = delicate lace
============================================================ */
/* ============================================================
FINAL FIXES — last rules win the cascade
============================================================ */
/* ─────────────────────────────────────────────────────────────
FIX 1: COUNTDOWN — hide floating ornament (it is removed from
HTML too), ensure timer row is truly centered.
───────────────────────────────────────────────────────────── */
.lace-ornament-line {
display: none !important;
}
.countdown .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.countdown-timer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
gap: clamp(8px, 2vw, 24px) !important;
margin-top: clamp(20px, 4vw, 40px) !important;
}
/* ============================================================
FIXES — ROUND 3
============================================================ */
/* ── FIX 1: COUNTDOWN — center align + proper vh height ─────── */
.countdown {
min-height: 60vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.countdown .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
.countdown-timer {
justify-content: center !important;
align-items: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── FIX 1b: COUNTDOWN LACE SCALLOPS — restore for bg-even ──── */
/* My earlier fix wrongly suppressed ::before/::after on #countdown.
Countdown IS bg-even so it SHOULD have the scallop edges.
Re-enable them explicitly here (overrides the display:none). */
#countdown.bg-even::before {
display: block !important;
content: '' !important;
position: absolute !important;
top: -24px !important;
left: 0 !important;
right: 0 !important;
height: 28px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
background-repeat: repeat-x !important;
background-size: 40px 28px !important;
pointer-events: none !important;
z-index: 3 !important;
}
#countdown.bg-even::after {
display: block !important;
content: '' !important;
position: absolute !important;
bottom: -24px !important;
left: 0 !important;
right: 0 !important;
height: 28px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
background-repeat: repeat-x !important;
background-size: 40px 28px !important;
pointer-events: none !important;
z-index: 3 !important;
}
/* Also apply white-edge scallops to ALL other bg-even sections */
.bg-even::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,28 Q10,0 20,28 Q30,0 40,28' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
background-repeat: repeat-x !important;
background-size: 40px 28px !important;
}
.bg-even::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0 Z' fill='%233A0A0A'/%3E%3Cpath d='M0,0 Q10,28 20,0 Q30,28 40,0' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") !important;
background-repeat: repeat-x !important;
background-size: 40px 28px !important;
}
/* ── FIX 3: REGISTRY CARDS — tabular number alignment ───────── */
/* KEY: card uses align-items:stretch so number-row fills full width.
Text elements (label, name) are centered via their own text-align. */
.registry-card,
.bg-even .registry-card,
.bg-odd .registry-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important; /* children stretch to full card width */
}
/* Center the text-only elements individually */
.registry-card .registry-card-type,
.registry-card .registry-bank,
.registry-card .registry-account-name,
.bg-even .registry-card .registry-card-type,
.bg-even .registry-card .registry-bank,
.bg-even .registry-card .registry-account-name {
text-align: center !important;
width: 100% !important;
}
/* Number row: stretches full width naturally (align-items:stretch on parent) */
.registry-card .registry-number-row,
.bg-even .registry-card .registry-number-row,
.bg-odd .registry-card .registry-number-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 10px 14px !important;
gap: 10px !important;
overflow: hidden !important;
min-width: 0 !important;
margin-top: auto !important;
}
/* Number: takes all remaining space, left-aligned, never wraps */
.registry-card .registry-account-number,
.bg-even .registry-card .registry-account-number,
.bg-odd .registry-card .registry-account-number {
flex: 1 1 auto !important;
min-width: 0 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Copy button: right-pinned, never shrinks */
.registry-card .registry-copy-btn,
.bg-even .registry-card .registry-copy-btn,
.bg-odd .registry-card .registry-copy-btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
/* ==========================================================================
SCHEDULE CARD ILLUSTRATION
========================================================================== */
.schedule-card-illustration {
width: 100%;
margin-bottom: 20px;
border-radius: 4px;
overflow: hidden;
}
.schedule-card-illustration img {
width: 100%;
height: 180px;
object-fit: cover;
object-position: center top;
display: block;
border-radius: 4px;
}
/* ==========================================================================
DRESSCODE ILLUSTRATION
========================================================================== */
.dresscode-illustration {
margin: 24px auto 8px;
max-width: 480px;
text-align: center;
}
.dresscode-illustration img {
width: 100%;
height: auto;
display: block;
}
/* ============================================================
REGISTRY — PHOTO SHARING QR CODE SECTION
============================================================ */
.registry-photos-section {
margin-top: clamp(32px, 5vw, 50px);
text-align: center;
}
.registry-photos-divider {
display: flex;
align-items: center;
gap: 0;
margin: 0 auto clamp(24px, 4vw, 36px);
width: 100%;
max-width: 100%;
}
.registry-photos-divider-line {
flex: 1;
height: 1px;
background: var(--border);
opacity: 0.6;
display: block;
}
.registry-photos-divider-dot {
color: var(--primary);
font-size: 0.35rem;
opacity: 0.7;
padding: 0 14px;
flex-shrink: 0;
}
.registry-photos-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: clamp(8px, 1.5vw, 12px);
opacity: 0.9;
}
.registry-photos-sub {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(0.95rem, 2vw, 1.2rem);
font-style: italic;
font-weight: 300;
color: var(--muted);
margin-bottom: clamp(20px, 3vw, 30px);
}
.registry-qr-wrap {
display: inline-block;
cursor: pointer;
padding: 12px;
background: var(--white);
border: 1px solid var(--border);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.registry-qr-wrap:hover {
transform: scale(1.02);
box-shadow: 0 8px 32px rgba(44, 26, 26, 0.12);
}
.registry-qr-wrap .registry-qr-img {
width: clamp(140px, 22vw, 200px);
height: clamp(140px, 22vw, 200px);
object-fit: contain;
display: block;
pointer-events: auto;
}
.registry-qr-hint-text {
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.6;
margin-top: clamp(12px, 1.5vw, 16px);
}
/* ── Lace frame: force section-label visible regardless of bg-even/bg-odd theme ── */
.lace-frame-wrap .section-label,
.lace-frame-content .section-label {
display: block !important;
color: #7a5c3a !important;
opacity: 1 !important;
}
/* ============================================================
TIMELINE PHOTO — LACE OUTER BORDER FRAME
Photo stays portrait rectangle (no oval clip).
Padding on the wrapper creates space for the lace fringe.
lace_transparent.png overlays as the decorative outer border.
============================================================ */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd .timeline-photo {
position: relative !important;
flex: 0 0 auto !important;
width: clamp(280px, 38vw, 460px) !important;
max-width: 460px !important;
/* Padding = the gap between photo edge and lace fringe */
padding: 13% !important;
box-sizing: border-box !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
margin: 0 !important;
overflow: visible !important;
/* Force GPU compositing layer — makes ::after render reliably on iOS/Android */
isolation: isolate !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
will-change: transform !important;
}
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd .timeline-photo::before {
display: none !important;
content: none !important;
}
/* Lace PNG covers the full wrapper (photo + padding) as outer border */
.timeline-photo::after,
.bg-even .timeline-photo::after,
.bg-odd .timeline-photo::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('assets/images/lace_transparent.png') !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
background-position: center !important;
pointer-events: none !important;
z-index: 2 !important;
filter: none !important;
opacity: 1 !important;
/* Own compositing layer so lace never gets clipped or dropped on mobile */
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
will-change: opacity !important;
}
/* Photo — portrait rectangle, no clip-path, sits ON TOP of lace frame */
.timeline-photo img,
.bg-even .timeline-photo img,
.bg-odd .timeline-photo img {
display: block !important;
width: 100% !important;
aspect-ratio: 3/4 !important;
object-fit: cover !important;
object-position: center center !important;
border: none !important;
clip-path: none !important;
box-shadow: none !important;
position: relative !important;
z-index: 3 !important;
transition: transform 0.4s ease !important;
filter: none !important;
}
.timeline-photo img:hover,
.bg-even .timeline-photo img:hover,
.bg-odd .timeline-photo img:hover {
transform: scale(1.02) !important;
}
/* ── Mobile: explicit size so lace ::after has a defined box to paint ── */
@media (max-width: 767px) {
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd .timeline-photo {
width: clamp(220px, 72vw, 300px) !important;
max-width: clamp(220px, 72vw, 300px) !important; /* override earlier max-width:100% */
padding: 13% !important;
margin: 0 auto !important;
overflow: visible !important;
isolation: isolate !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
.timeline-item {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.timeline-item:nth-child(even) { flex-direction: column !important; }
.timeline-item:nth-child(even) .timeline-text,
.timeline-text { text-align: center !important; padding: 0 16px 16px !important; }
.timeline-dot { position: static !important; transform: none !important; margin: 8px auto !important; }
}