============================================================ */
/* ============================================================
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: var(--text-on-dark) !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,
.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(var(--text-on-dark-rgb), 0.15);
outline-offset: -8px;
/* Corner roses using box-shadow layering */
box-shadow:
0 0 0 1px rgba(var(--text-on-dark-rgb), 0.12),
inset 0 0 0 1px rgba(var(--text-on-dark-rgb), 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(var(--text-on-dark-rgb), 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');
/* Dark-section photo overlay — now follows the client's theme.
Pulls from --overlay in theme.css (edit the color there, not
here) so every preset (Dusty Blue, Sage, Lavender, etc.) tints
its dark sections to match instead of the old fixed red-black. */
--overlay-dark: var(--overlay);
}
/* 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 — round divider accents (used between sections)
lace-doilly1-transparent.png (simple round — for dividers)
============================================================ */
/* ── Round lace doily divider — between sections ─────────────
Centered decorative accent at section header */
/* ============================================================
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 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 */
/* Bottom lace trim — flipped */
/* ============================================================
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: hardcoded CSS picture frame ──
Photo stays portrait rectangle. A white mat + thin inset rule
wraps around the outside. Padding on .timeline-photo creates
the mat gap; .timeline-photo::after draws the inner border line. */
/* On dark sections — warm cream mat instead of white, softer border */
.bg-even .timeline-photo {
background: var(--secondary);
}
.bg-even .timeline-photo::after {
border-color: var(--border);
opacity: 0.7;
}
/* ── 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: var(--secondary) !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: var(--dark) !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;
}
/* 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(var(--text-on-dark-rgb), 0.25);
}
.bg-even .lace-ornament-line span {
color: rgba(var(--text-on-dark-rgb), 0.40);
font-size: 0.5rem;
letter-spacing: 0.3em;
}
/* ── 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;
}
/* ── 4b. RSVP subtitle emphasis — call out key policy phrases
(e.g. "strictly adults-only", "no plus-ones") without a harsh
all-caps or bright-red look. Wrap the phrase in the RSVP note
text with: strictly adults-only
Italic + the accent color + a thin underline reads as an elegant
aside rather than a warning label, matching the invitation's tone. */
.rsvp-emphasis {
font-style: italic;
color: var(--primary);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(122, 28, 28, 0.35);
text-underline-offset: 3px;
}
/* ── 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;
}
/* ============================================================
JOURNEY SECTION — OLD MONEY LACE FRAME
Append entire contents to the BOTTOM of style.css
Lace colour: antique cream var(--text-on-dark)
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 centering is fully handled by the equivalent,
more complete rule in the "FIXES — ROUND 3" section below (it also
adds justify-content), so it isn't repeated here. */
.countdown-timer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !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;
}
/* ============================================================
REGISTRY — PHOTO SHARING QR CODE SECTION
============================================================ */
/* ============================================================
TIMELINE PHOTO — HARDCODED CSS PICTURE FRAME
Photo stays portrait rectangle (no oval clip). Padding on the
wrapper creates a mat around the photo; ::after draws a thin
inset border line to finish the frame — no image dependency.
============================================================ */
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd .timeline-photo {
position: relative !important;
flex: 0 0 auto !important;
width: clamp(220px, 30vw, 320px) !important;
max-width: 320px !important;
/* Padding = the mat between the photo edge and the frame border */
padding: 14px !important;
box-sizing: border-box !important;
background: var(--white) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
border: none !important;
margin: 0 !important;
overflow: visible !important;
}
.bg-even .timeline-photo {
background: var(--secondary) !important;
}
.timeline-photo::before,
.bg-even .timeline-photo::before,
.bg-odd .timeline-photo::before {
display: none !important;
content: none !important;
}
/* Thin inset border line — the "frame" itself */
.timeline-photo::after,
.bg-odd .timeline-photo::after {
content: '' !important;
position: absolute !important;
inset: 6px !important;
border: 1px solid var(--primary) !important;
opacity: 0.55 !important;
pointer-events: none !important;
z-index: 2 !important;
background: none !important;
}
.bg-even .timeline-photo::after {
content: '' !important;
position: absolute !important;
inset: 6px !important;
border: 1px solid var(--border) !important;
opacity: 0.7 !important;
pointer-events: none !important;
z-index: 2 !important;
background: none !important;
}
/* Photo — portrait rectangle, no clip-path, sits ON TOP of the frame border */
.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: smaller frame, centered ── */
@media (max-width: 767px) {
.timeline-photo,
.bg-even .timeline-photo,
.bg-odd .timeline-photo {
width: clamp(200px, 70vw, 280px) !important;
max-width: clamp(200px, 70vw, 280px) !important;
padding: 12px !important;
margin: 0 auto !important;
overflow: visible !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; }
}
/* ============================================================
COUNTDOWN — MOBILE SINGLE ROW FIX (end of file, wins cascade)
============================================================ */
@media (max-width: 480px) {
.countdown-timer {
flex-wrap: nowrap !important;
gap: 3px !important;
}
.countdown-unit {
min-width: 0 !important;
flex: 0 0 auto !important;
padding: 10px 7px !important;
}
.countdown-number {
font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
min-width: 0 !important;
}
.countdown-label {
font-size: 0.52rem !important;
letter-spacing: 0.1em !important;
}
}
/* ============================================================
COUNTDOWN REDESIGN — CINEMATIC EDITORIAL
Overrides all previous countdown rules.
Inspo: large italic numerals, no boxes, spotlight bg.
============================================================ */
/* ── Strip ALL box chrome from countdown units ──────────────── */
.countdown-unit,
.bg-even .countdown-unit,
.bg-odd .countdown-unit {
border: none !important;
border-color: transparent !important;
padding: 0 !important;
min-width: 0 !important;
flex: 0 0 auto !important;
background: transparent !important;
}
.countdown-unit::before,
.bg-even .countdown-unit::before,
.countdown-unit::after,
.bg-even .countdown-unit::after {
display: none !important;
content: none !important;
}
/* ── Numbers: massive italic white ──────────────────────────── */
.countdown-number,
.bg-even .countdown-number,
.bg-odd .countdown-number {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
font-weight: 300 !important;
font-style: italic !important;
color: var(--white) !important;
line-height: 0.9 !important;
letter-spacing: -0.01em !important;
text-shadow: 0 2px 40px rgba(0,0,0,0.5) !important;
}
/* ── Labels: small spaced caps ──────────────────────────────── */
.countdown-label,
.bg-even .countdown-label,
.bg-odd .countdown-label {
font-family: 'Jost', sans-serif !important;
font-size: clamp(0.55rem, 1.2vw, 0.7rem) !important;
font-weight: 300 !important;
letter-spacing: 0.35em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.45) !important;
}
/* ── Timer row ───────────────────────────────────────────────── */
.countdown-timer {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: clamp(24px, 6vw, 72px) !important;
flex-wrap: nowrap !important;
margin-top: 0 !important;
width: 100% !important;
}
/* ── Eyebrow label ───────────────────────────────────────────── */
.countdown-eyebrow {
font-family: 'Jost', sans-serif;
font-size: clamp(0.6rem, 1.5vw, 0.75rem);
font-weight: 300;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: clamp(28px, 5vw, 56px);
margin-top: 0;
}
/* ── Section padding & centering ────────────────────────────── */
.countdown {
padding: clamp(100px, 18vw, 180px) 0 !important;
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;
}
/* ── Mobile: allow slight shrink but keep on one line ────────── */
@media (max-width: 480px) {
.countdown-number,
.bg-even .countdown-number {
font-size: clamp(2.8rem, 10vw, 4rem) !important;
}
.countdown-timer {
gap: clamp(12px, 4vw, 24px) !important;
}
.countdown-label,
.bg-even .countdown-label {
font-size: 0.5rem !important;
letter-spacing: 0.2em !important;
}
}
/* ============================================================
COUNTDOWN — STAGE REDESIGN v2
100vh, vignette overlay (not flat dark), cream numbers,
content nudged into the spotlight sweet spot.
============================================================ */
/* ── 1. Full viewport height ─────────────────────────────────── */
.countdown,
#countdown,
#countdown.bg-even {
min-height: 100vh !important;
height: 100vh !important;
padding: 0 !important;
}
/* ── 2. Override bg-even flat overlay → vignette only ──────────
Layer order (back to front):
1. The curtain photo
2. A radial vignette that darkens only the edges/corners
3. A very subtle dark film to slightly tone the centre */
#countdown.bg-even {
background-image:
radial-gradient(
ellipse 55% 60% at 50% 42%,
rgba(0,0,0,0.00) 0%,
rgba(0,0,0,0.10) 40%,
rgba(0,0,0,0.55) 75%,
rgba(0,0,0,0.80) 100%
),
var(--bg-countdown) !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
/* ── 3. Remove the CSS spotlight div (no longer needed) ─────── */
.countdown-spotlight {
display: none !important;
}
/* ── 4. Vertically position content — nudge up into spotlight ── */
.countdown .container {
padding-top: 0 !important;
padding-bottom: 0 !important;
/* Push content so numbers land at ~42% height (spotlight center) */
margin-top: -4vh !important;
}
/* ── 5. Numbers: warm cream instead of stark white ───────────── */
.countdown-number,
.bg-even .countdown-number {
color: var(--text-on-dark) !important;
text-shadow:
0 0 60px rgba(200, 60, 20, 0.3),
0 2px 20px rgba(0,0,0,0.4) !important;
}
/* ── 6. Eyebrow + labels: slightly warmer tone ───────────────── */
.countdown-eyebrow {
color: rgba(242, 230, 213, 0.5) !important;
margin-bottom: clamp(20px, 3vw, 36px) !important;
}
.countdown-label,
.bg-even .countdown-label {
color: rgba(242, 230, 213, 0.45) !important;
margin-top: clamp(8px, 1.2vw, 14px) !important;
}
/* ── 7. Mobile: reduce height to 80vh so it doesn't crush ────── */
@media (max-width: 600px) {
.countdown,
#countdown,
#countdown.bg-even {
min-height: 80vh !important;
height: 80vh !important;
}
.countdown .container {
margin-top: -6vh !important;
}
}
/* ============================================================
COUNTDOWN — IMAGE SWAP v3
Use pre-processed dark curtain (vignette baked in).
Remove all CSS overlay layers — image handles it all.
============================================================ */
:root {
--bg-countdown: url('assets/images/velvet-bg2.webp');
}
#countdown.bg-even {
background-image:
var(--bg-countdown) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Numbers: pure cream — warm against the deep red */
.countdown-number,
.bg-even .countdown-number {
color: var(--text-on-dark) !important;
text-shadow:
0 0 80px rgba(120, 0, 0, 0.4),
0 2px 12px rgba(0,0,0,0.6) !important;
}
.countdown-eyebrow {
color: rgba(239, 224, 204, 0.45) !important;
}
.countdown-label,
.bg-even .countdown-label {
color: rgba(239, 224, 204, 0.4) !important;
}
/* ============================================================
COUNTDOWN — FINAL POLISH
1. Playfair Display font (matches inspo)
2. True vertical centering
3. Updated curtain image centered
============================================================ */
/* ── Font swap to Playfair Display ──────────────────────────── */
.countdown-number,
.bg-even .countdown-number {
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
font-weight: 400 !important;
color: var(--text-on-dark) !important;
text-shadow:
0 0 80px rgba(120, 0, 0, 0.35),
0 2px 12px rgba(0,0,0,0.55) !important;
}
/* ── True vertical center — remove the upward nudge ─────────── */
.countdown .container {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ── Section: ensure flexbox centers content perfectly ──────── */
.countdown,
#countdown,
#countdown.bg-even {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Updated image: centered spotlight ──────────────────────── */
#countdown.bg-even {
background-position: center center !important;
}
/* ============================================================
COUNTDOWN — CENTERING FIX
Kill the padding that was fighting flexbox align-items center.
============================================================ */
.countdown,
#countdown,
#countdown.bg-even {
padding: 0 !important;
height: 100vh !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.countdown .container {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ============================================================
COUNTDOWN — RESPONSIVE SPOTLIGHT IMAGES
Desktop: wide horizontal spotlight (curtain-dark.webp)
Mobile: tall vertical spotlight (curtain-dark-mobile.webp)
============================================================ */
/* Desktop default — already set via --bg-countdown */
#countdown.bg-even {
background-image: url('assets/images/velvet-bg2.webp') !important;
background-size: cover !important;
background-position: center center !important;
}
/* Mobile: swap to portrait-optimized version */
@media (max-width: 768px) {
#countdown.bg-even {
background-image: url('assets/images/curtain-dark-mobile1.webp') !important;
background-size: cover !important;
background-position: center center !important;
}
}
/* ============================================================
MOBILE COUNTDOWN — Black overlay instead of red
Lets the natural wine-red curtain photo show through with
a dark vignette that matches desktop moodiness.
============================================================ */
@media (max-width: 768px) {
/* Replace red radial spotlight with a dark black vignette */
.countdown-spotlight {
display: block !important;
background: radial-gradient(
ellipse 80% 60% at 50% 45%,
rgba(0, 0, 0, 0.0) 0%,
rgba(0, 0, 0, 0.55) 70%,
rgba(0, 0, 0, 0.80) 100%
) !important;
}
/* Remove red glow from number text-shadow */
.countdown-number,
.bg-even .countdown-number {
text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}
/* Reset background blend mode so photo renders naturally */
#countdown.bg-even {
background-blend-mode: normal !important;
}
}
/* ============================================================
EVENT SCHEDULE — SOLID IVORY CARDS
Client request: remove the striped background from the
Ceremony / Reception cards and use a solid colour that suits
the Old Money Red theme.
The cards are now plain CSS (no image files needed):
- solid ivory panel (same cream as the illustrations, so the
line drawings blend in seamlessly)
- a fine double burgundy keyline drawn with ::before / ::after
(a nod to the double border of the old frame)
These now derive from theme.css — change the palette there and
these cards recolor automatically, no editing needed here.
============================================================ */
#schedule {
--sched-paper: var(--secondary); /* card colour */
--sched-ink: var(--dark); /* main text */
--sched-accent: var(--primary); /* label, icons, map button */
--sched-muted: var(--muted); /* address text */
--sched-line: rgba(var(--primary-rgb), 0.55); /* outer keyline */
--sched-line-soft: rgba(var(--primary-rgb), 0.35); /* inner keyline + illustration ring */
--sched-rule: rgba(var(--primary-rgb), 0.28); /* dividers */
--sched-rule-soft: rgba(var(--primary-rgb), 0.22);
}
/* Grid (not flex) so % padding on the card resolves against the
card's own width. One 420px column on mobile, two on tablet+. */
#schedule .schedule-cards {
display: grid;
grid-template-columns: minmax(0, 420px);
justify-content: center;
align-items: stretch;
gap: clamp(28px, 5vw, 56px);
max-width: 960px;
}
@media (min-width: 768px) {
#schedule .schedule-cards {
grid-template-columns: repeat(2, minmax(0, 420px));
}
}
/* Single combined ceremony + reception card — one column, centered,
slightly wider since it isn't sharing the row with a second card. */
#schedule .schedule-cards.schedule-cards-single {
grid-template-columns: minmax(0, 460px);
}
@media (min-width: 768px) {
#schedule .schedule-cards.schedule-cards-single {
grid-template-columns: minmax(0, 460px);
}
}
/* The card itself: solid colour, no background image */
#schedule .schedule-card {
position: relative;
isolation: isolate;
width: 100%;
padding: 11% 9% 9% !important; /* % of card width; clears the keylines */
border: none !important;
outline: none !important;
border-radius: 0;
background: var(--sched-paper) !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38) !important;
}
/* Double keyline inside the card (replaces the old image caps) */
#schedule .schedule-card::before,
#schedule .schedule-card::after {
content: '';
position: absolute;
top: auto; right: auto; bottom: auto; left: auto;
width: auto;
height: auto;
aspect-ratio: auto;
background: none;
font-size: 0;
pointer-events: none;
z-index: -1;
}
#schedule .schedule-card::before {
inset: 10px;
border: 1px solid var(--sched-line);
}
#schedule .schedule-card::after {
inset: 15px;
border: 1px solid var(--sched-line-soft);
}
/* Text colours (beats the older .bg-even / .bg-odd !important card colour rules) */
#schedule .schedule-card p,
#schedule .schedule-card h3,
#schedule .schedule-card span {
color: var(--sched-ink) !important;
}
#schedule .schedule-card .schedule-card-label,
#schedule .schedule-card .schedule-card-icon,
#schedule .schedule-card .schedule-toggle-icon {
color: var(--sched-accent) !important;
}
#schedule .schedule-card .schedule-card-address {
color: var(--sched-muted) !important;
}
/* Illustration: fine keyline ring */
#schedule .schedule-card-illustration {
border-radius: 2px;
overflow: visible;
box-shadow:
0 0 0 1px var(--sched-line),
0 0 0 4px var(--sched-paper),
0 0 0 5px var(--sched-line-soft);
}
#schedule .schedule-card-illustration img {
border-radius: 2px;
}
/* Venue photo fills the whole keyline frame.
script.js wraps the ![]()
in .at-img-wrap (inline-block), which shrink-wraps
and leaves cream gaps inside the ring. Force the wrapper to full width and
size the image by the photo's own ratio (1600x809) so nothing is cropped. */
#schedule .schedule-card-illustration .at-img-wrap {
display: block !important;
width: 100%;
height: 100%;
border-radius: 2px;
}
#schedule .schedule-card-illustration img {
width: 100%;
height: auto;
aspect-ratio: 1600 / 809;
object-fit: cover;
object-position: center;
display: block;
}
/* Map button */
#schedule .schedule-map-btn {
border-color: var(--sched-accent) !important;
color: var(--sched-accent) !important;
background: transparent !important;
}
#schedule .schedule-map-btn:hover {
background: var(--sched-accent) !important;
color: var(--sched-paper) !important;
border-color: var(--sched-accent) !important;
}
/* Order of Events label + expanded list */
#schedule .schedule-toggle {
border-top-color: var(--sched-rule) !important;
}
#schedule .order-of-events {
border-top-color: var(--sched-rule) !important;
color: var(--sched-ink);
}
#schedule .order-of-events *,
#schedule .schedule-card .order-of-events p,
#schedule .schedule-card .order-of-events span {
color: var(--sched-ink) !important;
border-color: var(--sched-rule-soft) !important;
}
/* Small phones: tighten side padding a touch so text has room */
@media (max-width: 380px) {
#schedule .schedule-card {
padding-left: 12% !important;
padding-right: 12% !important;
}
}
/* ============================================================
HERO NAMES — CALLIGRAPHY SCRIPT
Client request: fancier font for "Jason & Gwyn" in the hero.
Uses Pinyon Script (already loaded in main.html, same font as
the section titles). Script fonts run smaller and have tall
swashes, so size is bumped up and line-height opened slightly.
letter-spacing MUST stay 0 or the joined letters break apart.
To try another font: change the family below (e.g.
'Great Vibes' or 'Parisienne') and add it to the Google Fonts
in main.html.
============================================================ */
.hero-groom,
.hero-bride {
font-family: 'Pinyon Script', 'Cormorant Garamond', serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
line-height: 1.05;
font-size: calc(var(--text-hero) * 1.08);
}
/* Phones: script reads smaller than the old serif, so go a bit larger */
@media (max-width: 600px) {
.hero-groom,
.hero-bride {
font-size: calc(var(--text-hero) * 1.4);
}
}
@media (max-height: 500px) and (orientation: landscape) {
.hero-groom,
.hero-bride {
font-size: clamp(2.2rem, 9vh, 4.4rem);
}
}
/* ============================================================
COUNTDOWN — CLIENT REVISION (match reference screenshot)
Appended last on purpose so it wins the cascade over every
earlier "COUNTDOWN REDESIGN" block above without having to
touch/delete that history.
Changes from the previous (100vh) version:
1. Section height back down to ~58vh (measured from the
client's reference screenshot: the section was ~53% of
the viewport, not full-screen).
2. Background restored to the config-driven var(--bg-countdown)
/ var(--overlay-dark) pair (fed by config.js →
sectionBackgrounds.countdown), instead of a hardcoded file
name, so the client can keep tuning image + overlay from
config.js the way the file's own comments describe.
3. Timer units get a thin bordered box back, with a brighter
accent segment centered on the top edge — matches the
reference photo's boxes.
4. New colon separators (added as real elements in
main.html) are styled here.
============================================================ */
/* ── 1. Section: shorter height, config-driven bg + overlay ─── */
.countdown,
#countdown,
#countdown.bg-even {
height: auto !important;
min-height: 58vh !important;
padding: clamp(64px, 9vw, 120px) 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
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 center !important;
background-repeat: no-repeat !important;
}
@media (max-width: 600px) {
.countdown,
#countdown,
#countdown.bg-even {
min-height: 68vh !important;
}
}
/* Undo the old mobile image swap — client wants velvet-bg2.webp
(via config.js) on every breakpoint, not a separate mobile file. */
@media (max-width: 768px) {
#countdown.bg-even {
background-image:
linear-gradient(var(--overlay-dark), var(--overlay-dark)),
var(--bg-countdown) !important;
background-position: center center !important;
}
}
/* ── 2. Timer row: vertically center so colons align with the
numbers instead of hugging the top ───────────────────────── */
.countdown-timer {
align-items: center !important;
gap: clamp(10px, 2.4vw, 30px) !important;
}
/* ── 3. Bordered box around each unit, bright top accent ───────
Selectors are #countdown .countdown-unit (not just .countdown-unit)
on purpose: an earlier rule, ".bg-even .countdown-unit { border:
none !important }", has specificity (0,2,0) — higher than a lone
".countdown-unit" (0,1,0) — so it would win regardless of source
order. Prefixing with the #countdown ID (1,1,0) guarantees these
win over that and every other .bg-even/.bg-odd variant above. */
#countdown .countdown-unit {
position: relative !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
background: transparent !important;
padding: clamp(20px, 3vw, 32px) clamp(22px, 3.6vw, 36px) clamp(16px, 2.4vw, 22px) !important;
}
#countdown .countdown-unit::before {
display: block !important;
content: '' !important;
position: absolute !important;
top: -1px !important;
left: 25% !important;
right: 25% !important;
height: 2px !important;
background: rgba(255, 255, 255, 0.5) !important;
z-index: 1 !important;
}
#countdown .countdown-unit::after {
display: none !important;
content: none !important;
}
/* ── 4. Colon separators between boxes ───────────────────────── */
.countdown-separator {
align-self: center !important;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.6rem, 4.5vw, 3.2rem);
line-height: 1;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
user-select: none;
}
@media (max-width: 480px) {
.countdown-separator {
font-size: clamp(1.2rem, 6vw, 1.8rem);
}
}
/* ============================================================
HERO — LANDSCAPE PHOTO ON PHONES
Phones now reuse the landscape photo, so on a tall screen "cover"
crops the sides. --hero-pos-mobile (from config.hero.mobilePosition)
sets which part of the photo stays in frame.
============================================================ */
@media (max-width: 767px) {
.hero-bg {
background-position: var(--hero-pos-mobile, 50% 25%);
}
}
/* ============================================================
NOTE FROM US — PHOTO BACKGROUND (chandelier photo)
The image is bright, and the note text is light, so a flat overlay
would have to be very heavy to keep the text readable. Instead:
a soft even tint everywhere + an extra dark pool behind the text.
The edges stay lighter so the photo (couple on the left, chandeliers
on the right) actually shows.
Strength is still controlled by config.sectionBackgrounds.coupleNote
.overlayOpacity — raise it if text feels hard to read.
============================================================ */
#couple-note.bg-even {
/* Neutral warm-black scrim (no red), spread evenly over the WHOLE
section. Strength = config overlayOpacity via --overlay-alpha. */
background-image:
linear-gradient(rgba(16, 12, 10, var(--overlay-alpha, 0.45)),
rgba(16, 12, 10, var(--overlay-alpha, 0.45))),
var(--bg-couple-note) !important;
background-color: #1a1512 !important;
/* Cancel the velvet-texture 'overlay' blend from the generic .bg-even
rule — it was multiplying the scrim into the photo and crushing it. */
background-blend-mode: normal !important;
background-size: cover !important;
background-position: center 65% !important;
background-repeat: no-repeat !important;
}
@media (max-width: 767px) {
#couple-note.bg-even {
background-position: 8% 60% !important;
}
}
/* ============================================================
EVENT SCHEDULE — Ceremony/Reception spots + timeline extras
============================================================ */
/* "Ceremony | Reception" strip under the venue address */
.schedule-areas {
display: flex;
align-items: stretch;
justify-content: center;
gap: clamp(14px, 3vw, 28px);
margin: 0 auto clamp(14px, 2vw, 20px);
}
.schedule-area {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.schedule-area + .schedule-area {
border-left: 1px solid var(--sched-rule);
padding-left: clamp(14px, 3vw, 28px);
}
.schedule-area-label {
font-family: 'Jost', sans-serif;
font-size: var(--text-label);
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.schedule-area-place {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.1rem, 2.3vw, 1.4rem);
font-style: italic;
font-weight: 400;
line-height: 1.15;
}
.schedule-area-note {
font-family: 'Jost', sans-serif;
font-size: clamp(0.6rem, 1.1vw, 0.7rem);
font-weight: 300;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Colours — beat the "#schedule .schedule-card span" ink rule above */
#schedule .schedule-card .schedule-area-label { color: var(--sched-accent) !important; }
#schedule .schedule-card .schedule-area-note { color: var(--sched-muted) !important; }
/* Timeline: keep every event name starting at the same left edge
(times vary in width, e.g. "7:00 PM onwards"), and support
two-line entries + a small location tag under an event. */
#schedule .order-item-time {
min-width: 10em;
}
.order-item-line {
display: block;
}
.order-item-place {
display: block;
margin-top: 3px;
font-family: 'Jost', sans-serif;
font-size: clamp(0.56rem, 1.1vw, 0.66rem);
font-style: normal;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.order-item-place::before {
content: '◆';
font-size: 0.6em;
margin-right: 0.7em;
vertical-align: 0.1em;
}
#schedule .schedule-card .order-of-events .order-item-place {
color: var(--sched-accent) !important;
}
/* "Within the venue" caption above the Ceremony | Reception strip */
.schedule-areas-intro {
margin: 0 auto clamp(10px, 1.6vw, 14px);
font-family: 'Jost', sans-serif;
font-size: clamp(0.56rem, 1.1vw, 0.66rem);
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
text-align: center;
}
#schedule .schedule-card .schedule-areas-intro { color: var(--sched-muted) !important; }
/* Note text: soft shadow so it holds up on the bright photo */
#couple-note .couple-note-message,
#couple-note .couple-note-signature { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 2px 22px rgba(0, 0, 0, 0.55); }
/* Note from us: keep paragraph breaks from the message text */
#couple-note .couple-note-message { white-space: pre-line; }
/* ============================================================
RSVP CLOSED STATE
Shown by showRSVPClosed() in script.js once the deadline has
passed. The Yes/No form is grayed out and cannot be clicked.
============================================================ */
.rsvp-closed {
max-width: 560px;
margin: 0 auto clamp(24px, 4vw, 40px);
padding: clamp(28px, 5vw, 48px) var(--container-pad);
text-align: center;
border: 1px solid var(--primary);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
animation: fadeInUp 0.8s ease forwards;
}
.rsvp-closed-icon {
font-size: clamp(1.6rem, 4vw, 2.4rem);
color: var(--primary);
margin-bottom: clamp(12px, 2vw, 18px);
}
.rsvp-closed-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 3.6vw, 2.4rem);
font-style: italic;
font-weight: 300;
color: var(--dark);
margin-bottom: 12px;
}
.rsvp-closed-message {
font-family: 'Jost', sans-serif;
font-size: var(--text-body);
font-weight: 300;
color: var(--muted);
line-height: 1.8;
}
/* Grayed-out, non-clickable form */
.rsvp-choice.rsvp-is-closed {
opacity: 0.35;
filter: grayscale(1);
pointer-events: none;
user-select: none;
}
.rsvp-choice.rsvp-is-closed .rsvp-choice-btn {
cursor: not-allowed;
}
/* ============================================================
COUNTDOWN — PHONE SIZING (v7 — true 1:1 square boxes)
Client report: countdown looked too small on phones.
Cause: the section is a flex row, so .container shrink-wrapped
to its content (~55% of the screen) and the boxes were squeezed
into the middle. Fix: container is forced to full width, and the
boxes, numerals, labels and spacing all scale with vw so the row
fills the screen on every phone (320px -> 560px) without ever
overflowing. Days gets extra share because it has 3 digits.
Appended last; #countdown prefix beats every earlier override.
============================================================ */
@media (max-width: 560px) {
#countdown .container {
width: 100% !important;
max-width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}
#countdown .countdown-eyebrow {
margin-bottom: clamp(26px, 8vw, 40px) !important;
font-size: clamp(0.58rem, 2.8vw, 0.72rem) !important;
letter-spacing: 0.32em !important;
}
#countdown .countdown-timer {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
gap: 2px !important;
box-sizing: border-box !important;
}
#countdown .countdown-unit {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 0 2px !important;
gap: clamp(5px, 1.8vw, 9px) !important;
aspect-ratio: 1 / 1 !important; /* TRUE SQUARE: height always = width */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* All four boxes the same width -> square-ish boxes like the
client's reference. Days (3 digits) still fits comfortably. */
#countdown .countdown-unit:first-child {
flex-grow: 1 !important;
}
#countdown .countdown-number {
font-size: clamp(1.6rem, 10vw, 3rem) !important;
line-height: 1 !important;
min-width: 0 !important;
display: block !important;
}
/* Labels: smaller + tighter tracking so MINUTES / SECONDS keep
clear space from the box borders (client: words looked cramped).
text-indent offsets the trailing letter-spacing so the word
stays optically centered in the box. */
#countdown .countdown-label {
font-size: clamp(0.44rem, 2.3vw, 0.62rem) !important;
letter-spacing: 0.08em !important;
text-indent: 0.08em !important;
white-space: nowrap !important;
margin-top: 0 !important;
}
#countdown .countdown-separator {
flex: 0 0 auto !important;
width: 4px !important;
font-size: clamp(0.9rem, 4.2vw, 1.3rem) !important;
text-align: center !important;
}
}
/* ── Tablet / landscape / desktop: same true squares ───────────
Fixed equal size per box (not shrink-to-fit), so the boxes are
1:1 and no longer change width as the digits change. */
@media (min-width: 561px) {
#countdown .countdown-unit {
flex: 0 0 auto !important;
width: clamp(90px, 14vw, 190px) !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
#countdown .countdown-number {
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* ============================================================
COUNTDOWN — PHONE: ORIGINAL TALL-BOX LOOK, FITS SCREEN (end of file)
Same look as before (tall boxes, top accent line, colons between),
but every size is in vw so the whole row always stays inside the
screen edges. Phones up to 560px wide.
============================================================ */
@media (max-width: 560px) {
#countdown .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
overflow: visible !important;
}
#countdown .countdown-timer {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#countdown .countdown-unit {
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: 19.4vw !important;
min-width: 0 !important;
height: 22.6vw !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: 0 !important;
gap: 2.6vw !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
text-align: center !important;
}
#countdown .countdown-unit:first-child { flex: 0 0 auto !important; width: 19.6vw !important; }
#countdown .countdown-unit:nth-of-type(2) { width: 17.8vw !important; }
#countdown .countdown-unit:nth-of-type(3) { width: 19.2vw !important; }
#countdown .countdown-number {
font-size: 7.6vw !important;
line-height: 1 !important;
white-space: nowrap !important;
padding: 0 !important;
letter-spacing: 0 !important;
}
#countdown .countdown-label {
font-size: 1.85vw !important;
letter-spacing: 0.14em !important;
text-indent: 0.14em !important;
white-space: nowrap !important;
margin: 0 !important;
}
#countdown .countdown-separator {
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
width: 5.6vw !important;
font-size: 4.6vw !important;
line-height: 1 !important;
padding-bottom: 1vw !important;
}
}