/* ============================================================================
AMANDA & MATTIA — WEDDING WEBSITE
Design system: essentially monochromatic — warm ivory/cream backgrounds
with a single deep burgundy carried through at different tonal values
(dark, primary, muted, light, pale, whisper). No sage, no gold, no peach.
Editorial, romantic, minimal. Mobile-first.
============================================================================ */
/* ---------- Fonts ----------------------------------------------------------
Loaded via tags in the of templates/page.js (faster than an
@import here, since the browser can start fetching the font CSS before it
finishes downloading this stylesheet). See index.html for the URL.
---------------------------------------------------------------------- */
/* ---------- Design tokens -------------------------------------------------
Retuned to match the couple's printed wedding stationery (invitation,
details card, save-the-date): a warmer blush-ivory paper tone, a slightly
deeper "antique ink" burgundy, and a formal calligraphic script for
headline moments in place of the earlier, more casual script.
---------------------------------------------------------------------- */
:root {
/* One burgundy, six tonal steps — every accent, border, and secondary
background on the site derives from this single hue rather than an
independent color choice (no sage, no gold, no peach/tan/blush). */
--color-burgundy-dark: #40121a; /* darkest — solid backgrounds, hover/active fills */
--color-burgundy-text: #7b4a57; /* softer wine burgundy — headings & body text on cream */
--color-burgundy: #6a1c28; /* primary — buttons, kickers, links */
--color-burgundy-mid: #8a3444; /* medium muted — secondary/italic labels */
--color-burgundy-light: #a9707a; /* light — dividers, accents on dark bg */
--color-burgundy-pale: #e9d6c8; /* pale — alternate section backgrounds */
--color-burgundy-whisper: #f2e8df; /* barely-there — subtle washes/hovers */
--color-ivory: #f6ece2;
--color-cream: #f0e0d0;
--color-ink: #2a2018;
--color-ink-soft: #55463c;
--color-line: rgba(64, 18, 26, 0.16);
--color-white: #fffdf9;
--font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
--font-body: "Cormorant Garamond", Georgia, serif;
--font-script: "Mrs Saint Delafield", "Parisienne", cursive;
--container-max: 1120px;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 6rem;
--radius: 2px;
--shadow-card: 0 12px 32px -18px rgba(42, 20, 24, 0.35);
--transition: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
/* The fixed nav's tallest (non-scrolled) rendered height — used as the
`top` offset for the scroll-stack sections further down, so a sticky
section/cover settles just beneath the nav instead of tucking its top
edge underneath it (the nav's own scrolled/"solid" state is a few
pixels shorter, so this is deliberately the larger of the two). */
--header-height: 78px;
}
/* ---------- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
margin: 0;
background: var(--color-ivory);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 21px;
line-height: 1.7;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.5rem;
}
@media (min-width: 640px) {
.container { padding: 0 2.5rem; }
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 1rem; top: -60px;
background: var(--color-burgundy); color: var(--color-white);
padding: 0.75rem 1.25rem; z-index: 200; transition: top var(--transition);
font-family: var(--font-body); letter-spacing: 0.04em;
}
.skip-link:focus { top: 1rem; }
/* ---------- Photo framing ---------------------------------------------------
Every photograph on the site gets the same thin, quiet burgundy hairline
— `--photo-frame` — so photos read as deliberately presented (like a
mounted print) rather than floating loose against the cream page. Always
this one value: 1px, always this tone. Never thicker, never doubled,
never ornamented — the photo stays the focus, this just gives it an
edge. Applied per-component below (search "--photo-frame" or
"var(--photo-frame)") rather than a blanket `img` selector, since a few
images (the hero backdrop, the monogram) are deliberately borderless. */
:root { --photo-frame: 1px solid var(--color-burgundy-light); }
/* ---------- Typography ----------------------------------------------------- */
.kicker {
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-burgundy);
margin-bottom: 0.9rem;
}
.section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2rem, 4.5vw, 2.9rem);
color: var(--color-burgundy-text);
letter-spacing: 0.01em;
}
.script-accent {
font-family: var(--font-script);
font-weight: 400;
color: var(--color-burgundy);
line-height: 1;
}
.section-intro {
font-size: 1.2rem;
color: var(--color-ink-soft);
max-width: 46em;
margin-top: 1rem;
}
.section-head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-4);
}
.divider {
width: 64px;
height: 1px;
background: var(--color-burgundy-light);
margin: 1.5rem auto;
border: none;
}
.divider--left { margin-left: 0; }
/* Flourish divider (line–dot–diamond–dot–line), echoing the ornament under
"Details" on the invitation suite. Used sparingly, under major headings. */
.flourish-divider {
width: 170px;
margin: 1.4rem auto;
color: var(--color-burgundy);
}
.flourish-divider svg { width: 100%; height: auto; display: block; }
.section--dark .flourish-divider { color: var(--color-burgundy-light); }
/* ---------- Buttons ---------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.95rem 2.1rem;
min-height: 48px;
border: 1px solid var(--color-burgundy);
background: transparent;
color: var(--color-burgundy-text);
font-family: var(--font-body);
font-size: 1.05rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--radius);
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover, .btn:focus-visible { background: var(--color-burgundy); color: var(--color-white); }
.btn--solid {
background: var(--color-burgundy);
color: var(--color-white);
}
.btn--solid:hover, .btn--solid:focus-visible {
background: var(--color-burgundy-dark);
border-color: var(--color-burgundy-dark);
}
.btn--ghost {
border-color: rgba(250, 246, 238, 0.6);
color: var(--color-white);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
background: var(--color-white);
color: var(--color-burgundy-text);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Quiet, text-only variant — used where a full outlined button would feel
too prominent (e.g. "Add to Calendar" tucked under the Events intro). */
.btn--text {
border: none;
background: none;
padding: 0.4rem 0.2rem;
min-height: auto;
color: var(--color-burgundy);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: rgba(106, 28, 40, 0.4);
margin-top: 1.5rem;
}
.btn--text:hover, .btn--text:focus-visible {
background: none;
color: var(--color-burgundy-text);
text-decoration-color: currentColor;
}
/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
outline: 2px solid var(--color-burgundy);
outline-offset: 3px;
}
/* ---------- Header / Nav ------------------------------------------------ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 1.1rem 0;
transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
/* The nav needs more breathing room than a reading-width content column
(nine links, some long in Italian — "Le Nostre Famiglie", "Il Corteo
Nuziale"), so the header alone is allowed a wider container. */
max-width: 1400px;
}
.site-header.is-solid {
/* Solid (not blurred) on purpose: backdrop-filter on this element would
create a CSS containing block for the fixed-position .site-nav overlay
inside it, breaking its full-viewport sizing. Keep filter/backdrop-filter
off .site-header, or move .site-nav outside it, if revisiting this. */
background: rgba(250, 246, 238, 0.97);
box-shadow: 0 1px 0 var(--color-line);
padding: 0.7rem 0;
}
.brand {
font-family: var(--font-script);
font-size: 1.6rem;
color: var(--color-burgundy-text);
transition: color var(--transition);
white-space: nowrap;
}
.nav-toggle {
display: inline-flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 10px;
margin: -10px;
z-index: 110;
}
.nav-toggle span {
width: 24px; height: 1.5px;
background: var(--color-burgundy-dark);
transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.site-nav {
position: fixed;
inset: 0;
background: var(--color-ivory);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateY(-100%);
transition: transform var(--transition);
z-index: 105;
}
.site-header.nav-open .site-nav { transform: translateY(0); }
.site-nav__links {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
}
.site-nav__links a {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--color-burgundy-text);
position: relative;
}
.site-nav__links a::after {
content: "";
position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
background: var(--color-burgundy-mid);
transition: width var(--transition);
}
.site-nav__links a:hover::after, .site-nav__links a:focus-visible::after { width: 100%; }
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 1.05rem;
letter-spacing: 0.06em;
}
.lang-toggle a {
padding: 0.3rem 0.55rem;
color: var(--color-burgundy-text);
opacity: 0.75;
transition: opacity var(--transition), color var(--transition);
}
.lang-toggle a[aria-current="true"] { opacity: 1; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lang-toggle a:not([aria-current="true"]):hover { opacity: 1; }
.lang-toggle span { color: var(--color-line); }
.header-right { display: flex; align-items: center; gap: 1.25rem; }
.lang-toggle--mobile { margin-top: 0.5rem; }
.lang-toggle--mobile a { color: var(--color-burgundy-text) !important; font-size: 1.15rem; }
.lang-toggle--mobile span { color: var(--color-line) !important; }
/* The guest-facing nav now carries nine links (Home, Our Story, Our
Families, Wedding Party, Events, Stay, Travel, RSVP, FAQ) plus the
EN·IT switch. Rather than compress that onto one crowded line at a
modest width, the elegant full-screen mobile menu is kept all the way
up to 1100px, and the inline row only appears once there is genuinely
room for it to breathe. */
@media (min-width: 1100px) {
.lang-toggle--mobile { display: none; }
.nav-toggle { display: none; }
.site-nav {
position: static;
inset: auto;
background: none;
transform: none;
flex-direction: row;
gap: 0;
}
.site-nav__links {
flex-direction: row;
flex-wrap: nowrap;
gap: 0.85rem;
}
.site-nav__links a { font-size: 0.76rem; font-family: var(--font-body); letter-spacing: 0.015em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; }
}
@media (min-width: 1500px) {
.site-nav__links { gap: 1.4rem; }
.site-nav__links a { font-size: 0.9rem; letter-spacing: 0.03em; }
}
/* ---------- Hero --------------------------------------------------------- */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-ink);
overflow: hidden;
/* Luminous, light fallback in case the SVG art doesn't render — no
burgundy wash, burgundy is reserved for the type and UI on top. */
background: linear-gradient(180deg, #cdd8d8 0%, #e4d9ca 40%, #f2e7d7 72%, #f7ede0 100%);
}
.hero__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* The couple's own commissioned Lake Como watercolor — used exactly as
supplied, never recolored or reinterpreted. object-fit:cover only ever
changes which *window* into the artwork is visible at a given screen
size (via object-position below); the image file itself is untouched.
Art-directed per breakpoint rather than one center-crop for every size:
mobile keeps the villa + a slice of lake in frame (a portrait viewport
would otherwise crop it out entirely), tablet eases toward center, and
desktop shows most of the full composition — villa, lake, mountains,
and the town across the water. */
.hero__art-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 34% 42%;
display: block;
}
@media (min-width: 640px) {
.hero__art-img { object-position: 28% 40%; }
}
@media (min-width: 1024px) {
.hero__art-img { object-position: 50% 38%; }
}
.hero__scrim {
/* A soft, warm cream glow behind the type for legibility over the light
watercolor — not a dark overlay, so the artwork's own colors show
through undimmed everywhere except immediately behind the type. */
position: absolute;
inset: 0;
background: radial-gradient(ellipse 62% 48% at 50% 42%, rgba(255,251,244,0.82) 0%, rgba(255,251,244,0.5) 42%, rgba(255,251,244,0) 74%);
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
padding: 7rem 1.5rem 4rem;
max-width: 760px;
}
.hero__eyebrow {
font-family: var(--font-body);
font-weight: 600;
font-style: normal;
letter-spacing: 0.24em;
text-transform: uppercase;
font-size: 0.92rem;
color: var(--color-burgundy);
margin-bottom: 1.25rem;
}
.hero__names {
font-family: var(--font-script);
font-size: clamp(3.4rem, 13vw, 6.5rem);
line-height: 1.05;
color: var(--color-burgundy-text);
margin-bottom: 1.25rem;
text-shadow: 0 2px 28px rgba(255,253,249,0.5);
}
.hero__meta {
font-family: var(--font-display);
font-size: clamp(1.05rem, 2.4vw, 1.4rem);
letter-spacing: 0.06em;
color: var(--color-ink);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hero__meta .sep { display: block; }
/* ---------- Sections ------------------------------------------------------ */
.section { padding: var(--space-6) 0; position: relative; }
.section--tint { background: var(--color-cream); }
.section--pale { background: var(--color-burgundy-pale); }
.section--dark {
/* A dark charcoal-ink night, not a burgundy wash — burgundy stays an
accent rather than a dominant field color, even for this one darker
section (Wedding Transportation). */
background: var(--color-ink);
color: var(--color-ivory);
}
.section--dark .section-title { color: var(--color-white); }
.section--dark .kicker { color: var(--color-burgundy-light); }
.section--dark .section-intro { color: rgba(250,246,238,0.82); }
/* ---------- Scroll-stack effect (desktop, motion-safe only) ---------------
Applied to four "chapter" sections — Our Families, Accommodations,
Travel, RSVP — so each one feels like a page of an elegant wedding
book: it holds in place as the next chapter's page rises and settles
over it, rather than simply scrolling away underneath. Built with plain
`position: sticky` + ascending `z-index` — no JS, no scroll-jacking.
Each of these sections is short enough (well under ~1.5 screens) that
making the entire section sticky and letting the *next* section's page
slide up over it reads as a clean page-turn with no stuck-feeling pause.
Applied to the section's own `.container` rather than the ``
element itself — a sticky element's release point is bounded by its
*parent's* box, and `.container`'s parent is that one ``
alone, so it releases exactly at that section's own end rather than
reaching toward the end of the whole page. The section's own vertical
padding is transferred onto the sticky element too, so the solid "page"
includes that breathing room instead of leaving a gap that lets the
next layer show through early.
Wedding Party and Events deliberately sit outside the stack (along with
Welcome and Wedding Transportation) — both run to several screens of
photos and portraits, and stacking them was found to feel like too long
a pause, so they were reverted to plain scrolling. Our Story sits
outside it too (redesigned 2026-08-27 into a centered kicker/title +
the full, uncropped original photograph + a "Read Our Story" link that
opens the complete narrative in its own full-screen overlay — see
.our-story__photo and .story-overlay in this file): a viewport-height
sticky container is exactly the kind of constraint that risks visually
clipping "the entire photograph, uncropped," so this section stays
plain, ordinary scrolling on principle, not just because of its height.
The z-index ladder below is intentionally non-contiguous (2, 5, 6, 7)
as a result — it only needs to stay ascending in document order, not
consecutive.
Gated behind `prefers-reduced-motion: no-preference` and a desktop-width
check — this style of movement is skipped entirely (falling back to
normal document scrolling) on touch/narrow viewports and for anyone who
has asked their OS for less motion. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
#our-families > .container,
#stay > .container,
#travel > .container,
#rsvp > .container {
position: sticky;
top: var(--header-height);
}
#our-families > .container {
z-index: 2;
background: var(--color-cream);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
#stay > .container {
z-index: 5;
background: var(--color-burgundy-pale);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
#travel > .container {
z-index: 6;
background: var(--color-ivory);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
#rsvp > .container {
z-index: 7;
background: var(--color-cream);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
/* The section's own padding is now redundant with the padding just added
to its sticky `.container` above — dropped here so spacing isn't
doubled. */
#our-families,
#stay,
#travel,
#rsvp {
padding-top: 0;
padding-bottom: 0;
}
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 900ms ease, transform 900ms ease;
}
/* `transform: none` rather than `translateY(0)` once revealed — an active
transform value (even a zero one) makes an ancestor a new containing
block, which silently breaks `position: sticky` on any descendant. Any
of the major sections below can be `position: sticky` (see the
scroll-stack rules further down), so this matters sitewide, not just
locally. Transitions between translateY(24px) and none interpolate
exactly the same as translateY(0) in every browser. */
.reveal.is-visible { opacity: 1; transform: none; }
/* ---------- Welcome ------------------------------------------------------- */
.welcome { text-align: center; max-width: 720px; margin: 0 auto; }
.welcome p { font-size: 1.45rem; margin-bottom: 1.4rem; color: var(--color-ink-soft); }
.welcome .signature {
font-family: var(--font-script);
font-size: 2.4rem;
color: var(--color-burgundy);
margin-top: 1.5rem;
}
/* ---------- Events: photography-led venue features -------------------------
Replaces the old white "information card" pattern. Each moment (Welcome
Dinner, Ceremony, Reception) is real venue photography plus an oversized
venue name and restrained typographic facts underneath — the photograph
is part of the page composition, not something placed inside a box. */
.events-groups { display: flex; flex-direction: column; gap: var(--space-6); }
/* Each event day is its own "chapter," led by an oversized date rather
than a small italic label — the two dates are meant to carry visual
weight, not read as a generic "weekend" banner. */
.event-chapter__head { text-align: center; margin-bottom: var(--space-4); }
.event-chapter__day {
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: 1.05rem;
color: var(--color-burgundy);
margin-bottom: 0.5rem;
}
.event-chapter__date {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 6vw, 3.6rem);
color: var(--color-burgundy-text);
letter-spacing: 0.02em;
}
.event-chapter__date-sep {
display: inline-block;
margin: 0 0.3em;
color: var(--color-burgundy-light);
font-size: 0.55em;
vertical-align: middle;
}
/* The event's own title ("The Welcome Dinner" / "Wedding Day") — a step
below the oversized date above it, but a clear "medium" tier of its
own: serif display type (matching venue names/section titles rather
than a small italic caption), not the sitewide small-caps `.kicker`
treatment used for sub-labels like "The Ceremony"/"The Reception". */
.event-chapter__title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.7rem, 3.4vw, 2.15rem);
color: var(--color-burgundy-text);
letter-spacing: 0.005em;
margin-top: 0.7rem;
}
.event-chapter__followedby {
text-align: center;
font-family: var(--font-body);
font-style: italic;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 1rem;
color: var(--color-burgundy-mid);
margin: var(--space-4) 0;
}
.event-chapter__followedby span { position: relative; display: inline-block; padding: 0 1.1rem; }
.event-chapter__followedby span::before,
.event-chapter__followedby span::after {
content: "";
position: absolute;
top: 50%;
width: 26px;
height: 1px;
background: var(--color-line);
}
.event-chapter__followedby span::before { right: 100%; }
.event-chapter__followedby span::after { left: 100%; }
/* The venue name and details always introduce the photograph — content
block first, photograph(s) beneath — rather than photos with text
layered on or beside them. Every venue feature shares this shape;
`--large` widens it, `--full` (Villa Erba) lets the photograph itself
run nearly the full content width for one dramatic, cinematic moment
while the text above stays at a comfortable reading width. */
.venue-feature {
max-width: 620px;
margin: 0 auto;
text-align: center;
}
.venue-feature--large { max-width: 760px; }
.venue-feature--full { max-width: none; }
/* 700px rather than the standard 640px section-head width — at 640px the
Welcome Dinner's description ("...as we welcome everyone to Lake
Como.") wrapped its last word ("Como.") onto its own orphaned line;
700px lets it sit on one full line instead, with no font-size change.
Applies to all three venueFeature--full instances (Welcome Dinner,
Ceremony, Reception) for consistency — the Ceremony/Reception
descriptions already fit comfortably at this width too. */
.venue-feature--full .venue-feature__content { max-width: 700px; margin-left: auto; margin-right: auto; }
.venue-feature__content { margin-bottom: var(--space-4); }
.venue-feature__venue {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.9rem, 4vw, 2.6rem);
color: var(--color-burgundy-text);
margin: 0.4rem 0 0.2rem;
letter-spacing: 0.005em;
}
.venue-feature--large .venue-feature__venue { font-size: clamp(2.2rem, 5vw, 3.1rem); }
.venue-feature__location { font-family: var(--font-body); font-style: italic; font-size: 1.35rem; color: var(--color-ink-soft); margin-bottom: 0.9rem; }
.venue-feature__facts {
display: grid;
gap: 0.55rem;
max-width: 420px;
margin: 0 auto 1.1rem;
border-top: 1px solid var(--color-line);
padding-top: 1rem;
text-align: left;
}
.venue-feature__fact { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.25rem; }
.venue-feature__fact span:first-child { color: var(--color-burgundy-mid); font-style: italic; }
.venue-feature__fact span:last-child { text-align: right; }
/* For a fact whose value is a full descriptive line rather than a short
stat (e.g. "Men: Suits & Ties · Women: Long Dresses") — label above,
value below, both left-aligned, instead of squeezing both onto one
cramped two-column row. */
.venue-feature__fact--stacked { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.venue-feature__fact--stacked span:last-child { text-align: left; color: var(--color-ink); }
/* A short italic caveat directly beneath the facts row (e.g. "tuxedos
should not be worn" under the Attire — Formal fact) — same small
italic/burgundy-mid treatment used for callout notes elsewhere on the
site (e.g. .info-card__note), pulled up close to the facts it clarifies
rather than reading as a new, separate paragraph. */
.venue-feature__facts-note {
max-width: 360px;
margin: -0.6rem auto 1.1rem;
font-size: 1.2rem;
font-style: italic;
color: var(--color-burgundy-mid);
text-align: left;
}
.venue-feature__desc { color: var(--color-ink-soft); font-size: 1.35rem; }
.venue-feature__schedule-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-burgundy);
margin: 1rem 0 0.6rem;
}
.schedule-list { border-top: 1px solid var(--color-line); margin: 0.4rem auto 0; padding-top: 0.9rem; display: grid; gap: 0.6rem; max-width: 420px; text-align: left; }
.schedule-list__row { display: flex; justify-content: space-between; font-size: 1.25rem; }
.schedule-list__row span:first-child { color: var(--color-burgundy-mid); font-style: italic; }
/* Photographs: full width, own natural aspect ratio (never force-cropped —
a vertical photo like the church exterior stays vertical), stacked with
generous space between when there's more than one. No overlap, no inset,
no collage treatment. */
.venue-feature__photos {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
}
.venue-feature__img { width: 100%; height: auto; display: block; border: var(--photo-frame); }
/* A second photograph (e.g. Villa Erba at dusk) is deliberately given a
different, narrower size than the primary photo — its own quiet moment
below the large dramatic one, not a matching pair, and never touching
or overlapping it. */
.venue-feature__img--secondary { max-width: 640px; }
/* Villa Erba's photo series: the landscape frames are all cropped to the
exact same width, height and aspect ratio as the first (facade) photo —
nothing is displayed smaller than another. object-fit: cover crops each
photo to that shared frame without ever stretching it; object-position
is set per-photo (see content/en.js / content/it.js) so the important
architectural detail in each stays visible. The ratio itself never
changes across breakpoints, so mobile gets the same considered crop as
desktop rather than a fresh, awkward one. Each frame keeps its own
separate space — never inset, stacked, or overlapping another. */
.villa-gallery { gap: var(--space-5); }
.villa-gallery__frame {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
border: var(--photo-frame);
}
/* The staircase hall's vertical columns, arches and steps get their own
narrower, taller frame instead of being squeezed into the same 3:2
landscape shape — an intentional portrait "detail shot" that still
reads as a large, considered photograph, not an afterthought. */
.villa-gallery__frame--portrait {
width: 100%;
max-width: 620px;
aspect-ratio: 3 / 4;
margin: 0 auto;
}
.villa-gallery__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.venue-feature__placeholder {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(160deg, var(--color-cream), var(--color-burgundy-pale));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
padding: 1.5rem;
}
.venue-feature__placeholder .sprig { width: 30%; color: var(--color-burgundy-mid); opacity: 0.75; }
.venue-feature__placeholder .sprig svg { width: 100%; height: auto; display: block; }
.venue-feature__placeholder span {
font-family: var(--font-body);
font-style: italic;
font-size: 1.25rem;
color: var(--color-ink-soft);
}
/* ---------- Ceremony: info above, exterior + interior side by side --------
The ceremony details (kicker, venue name, location, time) always read
first, as a normal centered section header — never beside or over the
photography (the `full: true, skipPhotos: true` venueFeature call above
renders just that text block). The two church photographs then sit
directly beneath as one matched pair, not a photo-led editorial split:
same displayed width and height, side by side on desktop, cleanly
aligned with consistent spacing, never overlapping or staggered. Each
is cropped (object-fit: cover, never stretched) into the shared 3:4
frame — close to the exterior's own native proportions, so it needs
almost no crop, while the square interior shot is trimmed evenly from
both sides to the same frame, keeping the altar and nave centered.
Stacks into one column on narrow screens, each photo still large. */
.ceremony-photos {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 460px;
margin: var(--space-5) auto 0;
}
@media (min-width: 640px) {
.ceremony-photos { grid-template-columns: 1fr 1fr; max-width: none; gap: 1.75rem; }
}
.ceremony-photos__frame {
aspect-ratio: 3 / 4;
overflow: hidden;
border: var(--photo-frame);
}
.ceremony-photos__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Hotel / stay cards --------------------------------------------- */
/* The Accommodations intro sentence ("These are our recommended places to
stay... Tap or hover on a hotel for details.") wraps to two lines at the
shared .section-head width (640px, used sitewide) even though there's
comfortably enough room on desktop for it to sit on one — widening just
this section's .section-head (same technique as #travel above) lets it
settle onto a single line with no font-size change. Scoped to #stay
only; gated to ≥900px so mobile keeps wrapping naturally exactly as
before (this is a taller threshold than #travel's since this sentence
is longer and needs more room to go from two lines to one). */
@media (min-width: 900px) {
#stay .section-head { max-width: 900px; }
}
/* Three coordinated, identically-proportioned photographic cards rather than
alternating rows. One row of three on desktop; stacked on mobile. Each
card shows the hotel name overlaid on the photo (bottom, on a dark
gradient scrim so it reads on any image); the address/distance/room-block
details live in a burgundy info panel that reveals on hover (desktop) or
tap (mobile/keyboard — see the click/keydown handling in main.js, since
hover alone is unreliable on touch). Any field the couple hasn't supplied
yet is simply omitted from the panel rather than padded with invented
placeholder-shaped data. */
.hotel-cards {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
/* Two tiers rather than one jump straight to three columns: a mid-width
two-column step gives each card meaningfully more width (and, via its
aspect-ratio, more height) right where a cramped three-column row would
otherwise force the larger supporting type in the hover/tap panel below
to scroll internally more than necessary. Three columns only once the
viewport is wide enough for that extra card width to comfortably fit
the panel's content without scrolling on typical laptop screens. */
@media (min-width: 640px) {
.hotel-cards { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (min-width: 1150px) {
.hotel-cards { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
.hotel-card {
position: relative;
border: var(--photo-frame);
background: var(--color-burgundy-dark);
}
.hotel-card__photo {
position: relative;
/* Slightly taller than the original 3/4 — the hover/tap info panel
below is an absolutely-positioned overlay sized to match this same
box (see .hotel-card__panel, `inset: 0`), so this ratio sets its
available height too. Increasing it gives the panel meaningfully
more room for the larger supporting type sizes below without
cropping the photo any more aggressively than a normal portrait
frame — object-fit: cover on the photo still shows it uncropped
left-to-right, just a touch more of it top-to-bottom. Any panel
content that still doesn't fit at very narrow card widths falls back
to .hotel-card__panel's existing internal scroll rather than
overflowing the card. */
aspect-ratio: 3 / 4.65;
overflow: hidden;
cursor: pointer;
display: block;
outline-offset: -3px;
}
.hotel-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 900ms ease;
}
.hotel-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, var(--color-burgundy-pale), var(--color-cream));
}
.hotel-card__placeholder .sprig { width: 34%; color: var(--color-burgundy-mid); opacity: 0.75; }
.hotel-card__photo:hover img { transform: scale(1.045); }
/* Bottom scrim + name, always visible so the card reads elegantly at rest —
the info panel is an additional reveal, not a replacement for this. */
.hotel-card__name-bar {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 2.5rem 1.25rem 1.15rem;
background: linear-gradient(to top, rgba(42, 15, 20, 0.82) 0%, rgba(42, 15, 20, 0.35) 60%, transparent 100%);
text-align: center;
}
.hotel-card__name {
font-family: var(--font-display);
font-size: 1.35rem;
color: var(--color-white);
letter-spacing: 0.01em;
}
.hotel-card__hint {
display: block;
margin-top: 0.3rem;
font-family: var(--font-body);
font-style: italic;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--color-burgundy-pale);
opacity: 0.9;
}
/* The info panel: an understated dark-burgundy overlay (never gray/black),
revealed on hover, on keyboard focus, or via the .is-open class that
main.js toggles on tap. Fades and lifts slightly rather than sliding or
flipping, to stay in the site's quiet, editorial register. */
.hotel-card__panel {
position: absolute;
inset: 0;
padding: 1.4rem 1.3rem 1.2rem;
display: flex;
flex-direction: column;
background: rgba(64, 18, 26, 0.94);
opacity: 0;
transform: translateY(8px);
transition: opacity 350ms ease, transform 350ms ease;
pointer-events: none;
text-align: left;
overflow-y: auto;
}
/* Triggered off the whole card (:hover/:focus-within), not just the photo
sibling — the panel exactly overlaps the photo, so a photo-only trigger
would flicker the instant pointer-events switches to `auto`: the cursor
"arrives" on the photo, the panel (now interactive but still fading in)
sits above it in stacking order, and the browser's hover target jumps to
the panel mid-transition. Keeping the trigger on the shared ancestor means
moving from the photo onto the panel (e.g. to reach the Reserve button)
never leaves `:hover`, so nothing flickers. */
.hotel-card:hover .hotel-card__panel,
.hotel-card:focus-within .hotel-card__panel,
.hotel-card.is-open .hotel-card__panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hotel-card__panel-name {
font-family: var(--font-display);
font-size: 1.22rem;
color: var(--color-white);
margin-bottom: 0.4rem;
}
.hotel-card__desc {
font-size: 1.2rem;
font-style: italic;
color: var(--color-burgundy-pale);
margin-bottom: 0.5rem;
}
.hotel-card__facts { font-size: 1rem; }
.hotel-card__facts > div { border-top: 1px solid rgba(233, 214, 200, 0.25); padding: 0.4rem 0; }
.hotel-card__facts > div:first-child { border-top: none; padding-top: 0; }
.hotel-card__facts dt {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-burgundy-pale);
opacity: 0.85;
margin-bottom: 0.1rem;
}
.hotel-card__facts dd { color: var(--color-white); margin: 0; }
/* Up to two calls to action — "Visit Hotel Website" (always, every hotel
has an official page) and "Reserve" (only once there's a real
room-block link) — stacked with a small gap rather than crowded onto
one row, so both stay easy to tap on mobile. */
.hotel-card__ctas {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
margin-top: 0.7rem;
flex-shrink: 0;
}
.hotel-card__cta {
align-self: stretch;
justify-content: space-between;
flex-shrink: 0;
padding: 0.6rem 1.25rem;
min-height: 40px;
font-size: 1.05rem;
}
.hotel-card__cta-arrow { display: inline-block; transition: transform var(--transition); }
.hotel-card__cta:hover .hotel-card__cta-arrow,
.hotel-card__cta:focus-visible .hotel-card__cta-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.hotel-card__photo img,
.hotel-card__panel { transition: none; }
}
/* A quiet titled callout explaining the hotels double as the wedding-
shuttle pickup points — sits below the hotel cards. */
.stay-transport-note {
max-width: 640px;
margin: var(--space-4) auto 0;
text-align: center;
padding: 1.5rem 2rem;
border: 1px solid var(--color-burgundy-light);
background: var(--color-burgundy-pale);
}
.stay-transport-note__title {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-burgundy-text);
margin-bottom: 0.5rem;
}
.stay-transport-note__body {
font-style: italic;
color: var(--color-burgundy-mid);
}
/* Travel section's "A Note on Transportation" reuses .stay-transport-note
wholesale but needs a bit more breathing room — at the shared 640px/
2rem-padding width, its longer paragraph left a lone "fare" orphaned
on its own last line. Widening just this variant (via the `.travel-
note` marker class added alongside .stay-transport-note in
templates/page.js) settles the paragraph into a clean three lines
without touching the Stay section's identical-looking box or shrinking
the type. */
.stay-transport-note.travel-note {
max-width: 760px;
padding: 1.5rem 1.75rem;
}
/* A booking-urgency note, shown ABOVE the hotel cards (right after the
section intro). Deliberately NOT the one-sided-burgundy-accent
treatment used for other callouts on the site — a soft, all-around
blush wash with no heavy border reads as noticeable-but-elegant
rather than a warning banner. */
.stay-booking-note {
max-width: 720px;
margin: 0 auto var(--space-4);
text-align: center;
padding: 1.5rem 2rem;
background: var(--color-burgundy-pale);
border-radius: var(--radius);
}
.stay-booking-note__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
letter-spacing: 0.02em;
color: var(--color-burgundy-text);
margin-bottom: 0.5rem;
}
.stay-booking-note__body {
font-size: 1.17rem;
color: var(--color-ink-soft);
}
/* ---------- Travel / info grid ---------------------------------------------- */
/* The Travel intro sentence is long enough that, at the shared
.section-head width (640px, used sitewide for every section's kicker/
title/intro), its last few words wrap onto their own short trailing
line no matter the viewport ("under normal traffic conditions." / the
Italian "condizioni di traffico normali." each ending up alone on the
final line — an orphaned-looking fragment rather than a natural wrap).
Widening just this section's .section-head lets the sentence settle
into three more even lines instead of four, with no wording change and
no font-size change (.section-intro's own size is untouched — only the
box it wraps inside gets wider). Scoped to #travel only — every other
section's kicker/title/intro keeps the standard 640px width. Gated to
≥700px; below that the narrower viewport itself already governs the
wrap and mobile's own comfortable margins are untouched. */
@media (min-width: 700px) {
#travel .section-head { max-width: 800px; }
}
/* Same fix, same reasoning, for two more section intros discovered during
a final pass for orphaned last words: Wedding Transportation's intro
("...Wedding Ceremony, and Reception.") and Discover Milan's new
second intro paragraph ("...countless moments together."), both of
which left a single word alone on the final line at the standard
640px .section-head width. */
@media (min-width: 700px) {
#transportation .section-head { max-width: 850px; }
}
@media (min-width: 700px) {
/* 720px settled the second intro paragraph's orphan; the third
paragraph ("...the city they have come to know and love.") needed a
little more room still — widened further so "and love." rejoins the
line above it, no font-size change. */
#discover-milan .section-head { max-width: 800px; }
}
.info-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
margin-top: var(--space-3);
}
@media (min-width: 700px) {
.info-grid { grid-template-columns: repeat(2, 1fr); }
}
.info-card {
padding: 1.75rem;
border-left: 2px solid var(--color-burgundy-light);
background: rgba(255,255,255,0.5);
}
.info-card__title {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--color-burgundy-text);
margin-bottom: 0.5rem;
}
.info-card__body { color: var(--color-ink-soft); }
.info-card__body + .info-card__body { margin-top: 0.9rem; }
.info-card__facts {
display: grid;
gap: 0.5rem;
margin: 1rem 0 0;
padding-top: 0.9rem;
border-top: 1px solid var(--color-line);
}
.info-card__fact { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.98rem; }
.info-card__fact dt { color: var(--color-burgundy-mid); font-style: italic; }
.info-card__fact dd { margin: 0; text-align: right; color: var(--color-ink); }
.info-card__subsection { margin-top: 1.1rem; }
.info-card__subsection:first-of-type {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-line);
}
.info-card__subsection-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-burgundy-text);
margin-bottom: 0.4rem;
}
.info-card__note {
margin-top: 0.9rem;
font-size: 1.07rem;
font-style: italic;
color: var(--color-burgundy-mid);
}
.info-card__cta { margin-top: 1.25rem; }
/* A titled callout at the top of the (dark) Transportation section,
naming the three designated shuttle pickup hotels — lighter-on-dark
version of the .discover-callout / .stay-transport-note treatment. */
.transport-callout {
max-width: 640px;
margin: var(--space-4) auto 0;
padding: 1.3rem 1.5rem;
border: 1px solid rgba(250, 246, 238, 0.25);
background: rgba(250, 246, 238, 0.06);
text-align: center;
}
.transport-callout__title {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-burgundy-light);
margin-bottom: 0.6rem;
}
.transport-callout__intro { color: rgba(250, 246, 238, 0.85); margin-bottom: 0.5rem; }
.transport-callout__list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--color-white);
}
.transport-callout__list li { margin-bottom: 0.2rem; }
.transport-callout__body { color: rgba(250, 246, 238, 0.75); font-size: 1.1rem; font-style: italic; }
/* The no-parking-at-Villa-Erba note is a hard constraint, not a nice-
to-know — set apart with a top rule and non-italic weight so it
doesn't read as just another aside. */
.transport-callout__parking {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(250, 246, 238, 0.2);
color: rgba(250, 246, 238, 0.9);
font-size: 1.1rem;
font-style: normal;
}
/* ---------- Transportation timeline ----------------------------------------- */
.timeline {
margin-top: var(--space-4);
position: relative;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.timeline::before {
content: "";
position: absolute;
left: 11px;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--color-burgundy-light);
}
@media (min-width: 640px) {
.timeline::before { left: 50%; transform: translateX(-50%); }
}
.timeline__item {
position: relative;
padding-left: 2.5rem;
padding-bottom: 2.25rem;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
content: "";
position: absolute;
left: 4px; top: 6px;
width: 15px; height: 15px;
border-radius: 50%;
background: var(--color-ivory);
border: 2px solid var(--color-burgundy);
}
/* This timeline only ever appears inside .section--dark (Wedding
Transportation), so its type is tuned for legibility on that dark ink
background rather than the light card colors used elsewhere. */
.timeline__label { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-burgundy-light); margin-bottom: 0.2rem; }
.timeline__time { font-style: italic; color: rgba(250,246,238,0.78); margin-bottom: 0.2rem; }
.timeline__detail { color: rgba(250,246,238,0.62); font-size: 1.17rem; }
@media (min-width: 640px) {
.timeline__item { width: 50%; padding-left: 0; }
.timeline__item:nth-child(odd) { padding-right: 3rem; text-align: right; }
.timeline__item:nth-child(even) { margin-left: 50%; padding-left: 3rem; }
.timeline__item::before { left: auto; }
.timeline__item:nth-child(odd)::before { right: -8px; left: auto; }
.timeline__item:nth-child(even)::before { left: -8px; }
}
.transport-note {
max-width: 640px;
margin: var(--space-4) auto 0;
text-align: center;
font-style: italic;
color: rgba(250,246,238,0.85);
}
/* ---------- Attire --------------------------------------------------------- */
.attire-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 720px;
margin: 0 auto;
}
@media (min-width: 600px) {
.attire-grid { grid-template-columns: 1fr 1fr; }
}
.attire-card {
text-align: center;
padding: 2.25rem 1.5rem;
border: 1px solid var(--color-line);
background: var(--color-white);
}
.attire-card__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-burgundy-text); margin-bottom: 0.6rem; }
.attire-card__value { font-style: italic; color: var(--color-ink-soft); font-size: 1.25rem; }
/* The richer breakdown (currently Wedding Day only) — a prominent
dress-code word, then a couple of short men's/women's lines, then a
small italic caveat. `.attire-card__value` above stays exactly as-is
for a card that just needs one simple line (Welcome Dinner). */
.attire-card__dresscode {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.15rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-burgundy);
margin-bottom: 0.7rem;
}
.attire-card__details { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 1.25rem; font-style: italic; }
.attire-card__details li { color: var(--color-ink-soft); }
.attire-card__note { font-size: 1.2rem; font-style: italic; color: var(--color-burgundy-mid); }
/* Native "Color Inspiration" swatch palette (Welcome Dinner's Semi-Formal
colors) — genuine rectangular color blocks built with plain CSS, not a
small inserted image, so they render crisp and true at any size. Sits
below the two attire cards but is intentionally NOT confined to
.attire-grid's narrow 720px reading column — it uses most of the
section's own standard 1120px container so eleven swatches have real
room to breathe on desktop, per "large, elegant, appropriately scaled
to the width of the website." A top divider echoes the same treatment
used elsewhere on the site (e.g. .venue-feature__facts) to separate it
visually from the two cards above. */
.color-palette {
max-width: 1040px;
margin: var(--space-6) auto 0;
padding-top: var(--space-5);
border-top: 1px solid var(--color-line);
text-align: center;
}
/* Above ~1000px, all 11 swatches are required to sit on one single
horizontal line — never wrapping to a second row on desktop. That
needs more width than the standard 1120px .container leaves for an
11-across row plus labels, so #attire's own container (this section
only — no other section is affected) widens the same way
#wedding-party's did for its wide story text, and .color-palette
grows to fill it. Below 1000px this reverts to the original
flex-wrap behavior (see .color-palette__row below) so the palette
still wraps elegantly on tablet/mobile instead of forcing swatches
down to an unreadable size. */
@media (min-width: 1000px) {
#attire .container { max-width: min(1700px, 94vw); }
.color-palette { max-width: 100%; }
}
.color-palette__heading {
font-family: var(--font-body);
font-weight: 600;
font-size: 1.05rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-burgundy);
margin-bottom: 0.6rem;
}
.color-palette__note {
font-style: italic;
font-size: 1.2rem;
color: var(--color-ink-soft);
max-width: 520px;
margin: 0 auto 2.25rem;
}
/* flex + flex-wrap (not a fixed 11-column grid) so the row wraps into
extra lines as room runs out — on tablets/phones the swatches keep
their full size and simply flow onto more rows, rather than every
swatch and its label being squeezed down to an unreadable size. */
.color-palette__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.75rem 1.35rem;
}
.color-palette__swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.65rem;
width: 92px;
}
.color-palette__block {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
border: 1px solid rgba(30, 16, 12, 0.14);
box-shadow: 0 1px 3px rgba(64, 18, 26, 0.12);
}
.color-palette__name {
font-family: var(--font-body);
font-size: 0.98rem;
color: var(--color-ink);
line-height: 1.3;
}
@media (min-width: 700px) {
.color-palette__swatch { width: 104px; }
}
/* ≥1000px: switch from wrapping flex to a strict 11-column grid so every
swatch sits on one line, no matter the viewport within this range —
grid columns (not flex-basis) are what guarantees exactly 11 tracks
and never an 11th item overflowing onto its own row. Swatches give up
their fixed pixel width here and simply fill their column, shrinking
only as much as the available width forces and no more. */
@media (min-width: 1000px) {
.color-palette__row {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 0.9rem 0.65rem;
}
.color-palette__swatch { width: 100%; gap: 0.5rem; }
.color-palette__name { font-size: clamp(0.72rem, 0.85vw, 0.95rem); }
}
/* ---------- RSVP ------------------------------------------------------------
Rebuilt as elegant, sentence-style prompts ("I, [name], [attend ▾] the
celebration.") rather than a boxy questionnaire — see .rsvp-sentence and
friends below. The panel itself is correspondingly quieter: a thin
burgundy hairline instead of a drop-shadowed card. */
.rsvp-deadline {
text-align: center;
font-style: italic;
color: var(--color-burgundy-mid);
margin-top: 0.5rem;
}
.rsvp-panel {
max-width: 680px;
margin: var(--space-4) auto 0;
background: var(--color-white);
border: var(--photo-frame);
padding: 2.25rem 1.75rem;
}
@media (min-width: 640px) { .rsvp-panel { padding: 3rem; } }
.field { margin-bottom: 1.5rem; }
.field label {
display: block;
font-family: var(--font-display);
font-size: 0.95rem;
letter-spacing: 0.03em;
color: var(--color-burgundy-text);
margin-bottom: 0.5rem;
}
/* Quiet underline fields rather than boxed inputs — a bottom hairline that
deepens to solid burgundy on focus, echoing the sentence-style fields
below without literally turning every field into a fill-in-the-blank. */
.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field textarea {
width: 100%;
padding: 0.7rem 0.1rem;
font-family: var(--font-body);
font-size: 1.1rem;
border: none;
border-bottom: 1px solid var(--color-burgundy-light);
background: transparent;
border-radius: 0;
color: var(--color-ink);
transition: border-color var(--transition), background var(--transition);
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="search"]:focus,
.field textarea:focus {
outline: none;
border-bottom-color: var(--color-burgundy);
background: var(--color-burgundy-whisper);
}
.field textarea { min-height: 90px; resize: vertical; padding-top: 0.7rem; }
.field-help { font-size: 0.95rem; color: var(--color-ink-soft); margin-top: 0.4rem; }
.search-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.search-row .field { flex: 1 1 220px; margin-bottom: 0; }
.search-row .btn { flex: 0 0 auto; }
.rsvp-message { text-align: center; padding: 1.5rem 0; }
.rsvp-message__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-burgundy-text); margin-bottom: 0.5rem; }
.rsvp-found-intro { text-align: center; font-style: italic; color: var(--color-ink-soft); margin-bottom: 2rem; }
/* ---- Sentence-style guest response --------------------------------------- */
.party-list { display: flex; flex-direction: column; margin-bottom: 2rem; }
.rsvp-guest {
padding: 1.9rem 0;
border-top: 1px solid var(--color-line);
}
.rsvp-guest:first-child { border-top: none; padding-top: 0; }
.rsvp-sentence {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 2.1;
color: var(--color-ink);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem;
margin: 0;
}
/* The `hidden` attribute's default `display: none` has the same specificity
as the class rule above, so without this override an author stylesheet
loaded after the UA sheet wins and a "hidden" sentence (e.g. the entrée
line before the reception is checked) would incorrectly stay visible. */
.rsvp-sentence[hidden] { display: none; }
.rsvp-sentence + .rsvp-sentence { margin-top: 0.6rem; }
.rsvp-sentence__text { white-space: pre-wrap; }
.rsvp-guest__name { color: var(--color-burgundy-text); font-weight: 600; }
@media (max-width: 480px) {
.rsvp-sentence { font-size: 1.08rem; line-height: 1.9; }
}
/* Inline burgundy/cream dropdown — deliberately not the browser-default
gray/black treatment. The closed control reads like an underlined phrase
filled in by hand; the option list uses the same palette everywhere it's
supported (native OS chrome may override the popover itself on some
platforms, which is an acceptable, well-known limit of styling