/* ─────────────────────────────────────────────────────────
Reset & Tokens
───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
/* min-height rather than height: the save-the-date is exactly one
screen, but an invitation scrolls, and a fixed height would clip
the background wash partway down the page.
No background-color here. The root paints the wash onto the canvas, and
a colour on would sit on top of it and hide it. */
min-height: 100dvh;
}
html {
/* The wash and the paper grain belong to the root, not to a layer laid
over the page, and that is a correctness decision rather than a tidiness
one. A background on the root element is propagated to the canvas, and
the canvas is painted across the whole window — behind the status bar,
behind the address bar, through the safe areas.
No fixed element can be made to do that. `inset: 0` reaches only the
space between a phone's chrome, and 100lvh plus the safe-area insets did
not reach it either; both left a paler band top and bottom where the
wash simply stopped. The canvas has no such edge to stop at. */
background-color: var(--ivory);
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 60% 50% at 12% 8%, rgba(244,184,154,0.22), transparent 60%),
radial-gradient(ellipse 55% 50% at 92% 18%, rgba(168,184,214,0.18), transparent 65%),
radial-gradient(ellipse 70% 55% at 88% 95%, rgba(192,174,212,0.20), transparent 65%),
radial-gradient(ellipse 60% 50% at 8% 92%, rgba(244,220,168,0.20), transparent 60%),
radial-gradient(ellipse 80% 30% at 50% 100%, rgba(244,200,168,0.18), transparent 75%);
/* The grain is the first layer, so it is the topmost, multiplied into the
wash beneath it. Its strength is baked into the SVG's alpha because a
background layer has no opacity of its own — 0.045 there is what 0.10
at opacity 0.45 used to come to. */
background-blend-mode: multiply, normal, normal, normal, normal, normal;
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 220px 220px, auto, auto, auto, auto, auto;
/* Anchored to the viewport, so the wash stays put as an invitation scrolls
rather than stretching over the whole document. */
background-attachment: fixed;
/* Only the root hides horizontal overflow, and deliberately only the
root. `overflow-x: hidden` forces the other axis to compute as
`overflow-y: auto`, so declaring it on as well made the body a
second scroll container — one with about forty pixels to travel. A wheel
or a touch lands on that inner scroller, moves those forty pixels and
stops, so an invitation could not be scrolled at all, in any browser, on
a phone or a desktop. */
overflow-x: hidden;
}
body {
-webkit-overflow-scrolling: touch;
}
:root {
/* Palette pulled from the bouquet — peach, periwinkle, lavender,
butter cream, blush, sage. Background is warm ivory. */
--ink: #2E2520;
--ink-soft: #5C4B3E;
--ink-quiet: #8A7464;
--ivory: #FBF6EC;
--ivory-2: #F6EFE2;
--cream: #F2E8D5;
--peach: #F4B89A;
--peach-deep: #E89370;
--blush: #F0C8C8;
--rose-pink: #E8A8B8;
--periwinkle: #A8B8D6;
--peri-deep: #7E94BC;
--lavender: #C0AED4;
--butter: #F4DCA8;
--butter-deep:#E8C078;
--sage: #B5C5A6;
--leaf: #7B9978;
--leaf-deep: #5A7A56;
--accent: #B8745E; /* burnt sienna for the link */
}
/* ─────────────────────────────────────────────────────────
Page foundation — ivory with a hand-painted wash + grain
───────────────────────────────────────────────────────── */
body {
min-height: 100dvh;
color: var(--ink);
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
overscroll-behavior: none;
position: relative;
}
/* ─────────────────────────────────────────────────────────
Petals
─────────────────────────────────────────────────────────
The one decorative layer still drawn as an element, because it has to be
a canvas. It is anchored to the viewport and stretched to the tallest the
viewport gets, plus the safe areas — a canvas is a replaced element, so
the width and height have to be said outright or it sits at its intrinsic
300x150.
A petal may still stop at the edge of that box where the wash no longer
does, and that is the trade for keeping it a canvas. It is a scattering
of small shapes rather than a field of colour, so an edge there does not
read as a seam. */
#petals {
position: fixed;
left: 0;
top: 0;
width: 100%; /* not 100vw, which counts a scrollbar the viewport has not */
height: 100vh; /* for anything too old for lvh */
height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
pointer-events: none;
z-index: 0;
}
/* ─────────────────────────────────────────────────────────
Layout — composed editorial page with asymmetric florals
───────────────────────────────────────────────────────── */
.stage {
position: relative;
z-index: 2;
min-height: 100dvh;
/* Contains the bouquets that hang past the frame. `clip` rather than
`hidden` so this never becomes a scroll container of its own — that is
the whole bug this page had. */
overflow-x: clip;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.invitation {
position: relative;
width: min(720px, 100%);
text-align: center;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
/* Hairline frame — barely-there ink rectangle that hints
at a stationery card without trapping the content. */
.invitation::before {
content: "";
position: absolute;
inset: clamp(0.5rem, 2vw, 1.5rem);
border: 1px solid rgba(46,37,32,0.18);
pointer-events: none;
}
.invitation::after {
content: "";
position: absolute;
inset: calc(clamp(0.5rem, 2vw, 1.5rem) + 6px);
border: 1px solid rgba(46,37,32,0.08);
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────
Overline — "save the date" in script
───────────────────────────────────────────────────────── */
.overline {
font-family: 'Great Vibes', cursive;
font-size: clamp(1.6rem, 4.5vw, 2.4rem);
color: var(--peach-deep);
line-height: 1;
font-weight: 400;
margin-bottom: 1.4rem;
}
.rule {
width: clamp(60px, 12vw, 110px);
height: 1px;
background: var(--ink-soft);
opacity: 0.6;
margin: 0 auto 1.6rem;
border: 0;
}
.established {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.75rem, 2vw, 0.95rem);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-bottom: 1.5rem;
}
/* ─────────────────────────────────────────────────────────
Names — Italiana display
───────────────────────────────────────────────────────── */
.names {
font-family: 'Italiana', serif;
font-weight: 400;
color: var(--ink);
line-height: 1.05;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.1rem, 0.6vw, 0.4rem);
margin-bottom: 1.8rem;
}
.names .first,
.names .last {
font-size: clamp(3.4rem, 13vw, 6.5rem);
letter-spacing: 0.03em;
}
.names .amp {
font-family: 'Great Vibes', cursive;
font-size: clamp(2.6rem, 9vw, 4.4rem);
color: var(--peach-deep);
line-height: 0.9;
font-weight: 400;
transform: translateY(-0.05em);
}
/* ─────────────────────────────────────────────────────────
Meta — date + venue
───────────────────────────────────────────────────────── */
.meta {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(0.8rem, 2.5vw, 1.5rem);
margin: 2rem auto 2.6rem;
max-width: 100%;
}
.meta-block {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.meta-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ink-quiet);
}
.meta-value {
font-family: 'Italiana', serif;
font-size: clamp(1.05rem, 2.8vw, 1.4rem);
letter-spacing: 0.04em;
color: var(--ink);
line-height: 1.25;
white-space: nowrap;
}
.ord {
font-size: 0.48em;
vertical-align: super;
line-height: 0;
letter-spacing: 0.02em;
margin: 0 0.06em 0 0.02em;
}
.meta-sub {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-quiet);
}
.meta-divider {
width: 1px;
height: 56px;
background: linear-gradient(180deg, transparent, var(--ink-soft) 30%, var(--ink-soft) 70%, transparent);
opacity: 0.45;
justify-self: center;
}
.venue-link {
color: var(--ink);
text-decoration: none;
background-image: linear-gradient(rgba(46,37,32,0.28), rgba(46,37,32,0.28));
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
padding-bottom: 2px;
transition: color 280ms ease, background-size 380ms ease;
}
.venue-link:hover,
.venue-link:focus-visible {
color: var(--peach-deep);
background-size: 100% 2px;
}
/* ─────────────────────────────────────────────────────────
Countdown — minimalist with thin separators
───────────────────────────────────────────────────────── */
.countdown-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-bottom: 1rem;
}
.countdown {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 480px;
margin: 0 auto 1.4rem;
position: relative;
}
.cd-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0 0.4rem;
position: relative;
}
.cd-cell + .cd-cell::before {
content: "";
position: absolute;
left: 0;
top: 12%;
bottom: 12%;
width: 1px;
background: rgba(46,37,32,0.22);
}
.cd-num {
font-family: 'Italiana', serif;
font-size: clamp(1.8rem, 5.5vw, 2.6rem);
color: var(--ink);
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
}
.cd-lbl {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: lowercase;
color: var(--ink-quiet);
}
/* ─────────────────────────────────────────────────────────
Footnote
───────────────────────────────────────────────────────── */
.footnote {
font-family: 'Great Vibes', cursive;
font-size: clamp(1.6rem, 4.5vw, 2.4rem);
color: var(--peach-deep);
line-height: 1;
}
/* ─────────────────────────────────────────────────────────
Botanical SVG arrangements — positioned at the edges
───────────────────────────────────────────────────────── */
.bouquet {
position: absolute;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 4px 10px rgba(46,37,32,0.05));
}
.content {
position: relative;
z-index: 2;
padding-top: max(1rem, env(safe-area-inset-top));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
.bouquet-tl {
top: -32px;
left: -32px;
width: clamp(110px, 19vw, 200px);
transform: rotate(-6deg);
}
.bouquet-br {
bottom: -70px;
right: -70px;
width: clamp(120px, 20vw, 210px);
transform: rotate(174deg);
}
.bouquet-tr {
top: 6%;
right: -42px;
width: clamp(70px, 11vw, 110px);
transform: rotate(28deg);
opacity: 0.75;
}
.bouquet-bl {
bottom: 8%;
left: -18px;
width: clamp(70px, 11vw, 110px);
transform: rotate(-200deg);
opacity: 0.75;
}
/* Subtle reveal on first paint */
@keyframes rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overline { animation: rise 1000ms 100ms both ease-out; }
.rule { animation: fadeIn 1200ms 250ms both ease-out; }
.established { animation: rise 1000ms 380ms both ease-out; }
.names .first { animation: rise 1100ms 520ms both ease-out; }
.names .amp { animation: rise 1100ms 700ms both ease-out; }
.names .last { animation: rise 1100ms 860ms both ease-out; }
.meta { animation: rise 1100ms 1080ms both ease-out; }
.countdown-label,.countdown { animation: fadeIn 1400ms 1300ms both ease-out; }
.rule-end { animation: fadeIn 1200ms 1450ms both ease-out; }
.footnote { animation: rise 1200ms 1600ms both ease-out; }
.bouquet { animation: fadeIn 1800ms 200ms both ease-out; }
/* ─────────────────────────────────────────────────────────
Responsive
───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.meta {
grid-template-columns: 1fr;
gap: 1.6rem;
}
.meta-divider {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ink-soft) 30%, var(--ink-soft) 70%, transparent);
justify-self: center;
}
.countdown { max-width: 340px; }
.cd-num { font-size: clamp(1.5rem, 7vw, 2rem); }
.bouquet-tr, .bouquet-bl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ─────────────────────────────────────────────────────────
INVITATION PAGES
Everything below is additive: the save-the-date uses none
of it. Long pages opt in with .
───────────────────────────────────────────────────────── */
/* The save-the-date is one screen tall, so its wash can live on the
body. An invitation scrolls, so its wash goes on a fixed layer that
stays viewport-sized however far down the page you are. */
/* The markup still emits
; the root's background replaced
what it used to paint. */
.wash { display: none; }
/* A long card sits at the top of the page rather than centred in it. */
body.page-long .stage { align-items: flex-start; }
body.page-long .invitation { width: min(760px, 100%); }
/* ── Addressed to ───────────────────────────────────────── */
.addressed {
font-family: 'Great Vibes', cursive;
font-size: clamp(1.8rem, 5.5vw, 2.9rem);
color: var(--peach-deep);
line-height: 1.15;
margin-bottom: 0.9rem;
}
.lead {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(0.78rem, 2vw, 0.95rem);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-bottom: 1.1rem;
}
.intro {
font-size: clamp(1rem, 2.6vw, 1.2rem);
font-weight: 300;
line-height: 1.75;
color: var(--ink-soft);
max-width: 46ch;
margin: 0 auto 1.6rem;
}
.section-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-bottom: 1.1rem;
}
/* ── Order of the day ───────────────────────────────────── */
.schedule { margin: 2.4rem 0 0.5rem; }
.schedule-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
/* Hugs its own content rather than filling 30rem, so a short order of the
day sits in the middle of the card with everything else instead of
hanging off to the left, and the rule under each row stops where the
row does rather than running on past it. */
width: fit-content;
max-width: min(30rem, 100%);
margin: 0 auto;
text-align: left;
}
.schedule-row {
display: grid;
/* A fixed time column, so every row breaks in the same place and the
labels line up; 1fr after it, so every row is as wide as the widest and
the rules beneath them all end together. The list itself is only as
wide as its widest row, and centred — see .schedule-list. */
grid-template-columns: 6.5rem 1fr;
gap: 0 1.2rem;
align-items: baseline;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(46,37,32,0.08);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-time {
font-family: 'Italiana', serif;
font-size: clamp(1.05rem, 3vw, 1.3rem);
color: var(--ink);
text-align: right;
letter-spacing: 0.02em;
}
.schedule-what { display: flex; flex-direction: column; gap: 0.15rem; }
.schedule-label {
font-size: clamp(1rem, 2.6vw, 1.12rem);
font-weight: 400;
color: var(--ink);
}
.schedule-note {
font-style: italic;
font-weight: 300;
font-size: 0.95rem;
color: var(--ink-quiet);
}
/* ── Notes (dress code, gifts, accommodation) ───────────── */
.notes {
display: grid;
gap: 1.4rem;
margin: 2.4rem auto 0;
max-width: 34rem;
}
.note-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-bottom: 0.3rem;
}
.note-text {
font-size: 1.02rem;
font-weight: 300;
line-height: 1.65;
color: var(--ink-soft);
}
/* Placeholder copy, so it can never quietly reach a guest. */
.tbc {
background: rgba(244,220,168,0.55);
border-bottom: 1px dashed var(--butter-deep);
padding: 0 0.25em;
border-radius: 2px;
font-style: italic;
}
/* ── RSVP ───────────────────────────────────────────────── */
.rsvp { margin-top: 2.8rem; }
.rsvp-blurb {
font-size: 1.02rem;
font-weight: 300;
color: var(--ink-soft);
margin-bottom: 1.8rem;
}
.already-replied {
font-style: italic;
font-weight: 300;
color: var(--leaf-deep);
background: rgba(181,197,166,0.18);
border: 1px solid rgba(123,153,120,0.28);
padding: 0.7rem 1rem;
margin-bottom: 1.6rem;
border-radius: 2px;
}
#rsvp-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 30rem;
margin: 0 auto;
text-align: left;
}
.guest {
border: 1px solid rgba(46,37,32,0.14);
padding: 1.15rem 1.25rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
background: rgba(251,246,236,0.55);
}
.guest-name {
font-family: 'Italiana', serif;
font-size: clamp(1.2rem, 3.4vw, 1.45rem);
color: var(--ink);
padding: 0 0.5rem;
margin-left: -0.5rem;
}
.plus-one-note {
font-style: italic;
font-weight: 300;
font-size: 0.95rem;
color: var(--ink-quiet);
margin-top: -0.3rem;
}
.choice { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice-option {
flex: 1 1 12rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.65rem 0.9rem;
border: 1px solid rgba(46,37,32,0.18);
background: var(--ivory);
cursor: pointer;
font-size: 1rem;
font-weight: 300;
color: var(--ink-soft);
transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.choice-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.choice-option:hover { border-color: var(--peach); }
.choice-option:has(input:checked) {
border-color: var(--peach-deep);
background: rgba(244,184,154,0.16);
color: var(--ink);
}
.choice-option:has(input:focus-visible) {
outline: 2px solid var(--peri-deep);
outline-offset: 2px;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-quiet);
}
.field input {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--ink);
background: transparent;
border: 0;
border-bottom: 1px solid rgba(46,37,32,0.28);
padding: 0.4rem 0.1rem;
transition: border-color 200ms ease;
}
.field input::placeholder { color: var(--ink-quiet); opacity: 0.65; font-style: italic; }
.field input:focus {
outline: none;
border-bottom-color: var(--peach-deep);
}
.field input:focus-visible {
outline: 2px solid var(--peri-deep);
outline-offset: 3px;
}
.submit {
font-family: 'Cormorant Garamond', serif;
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ivory);
background: var(--accent);
border: 0;
padding: 0.95rem 1.4rem;
cursor: pointer;
transition: background 220ms ease, transform 220ms ease;
}
.submit:hover { background: #A2634F; }
.submit:active { transform: translateY(1px); }
.submit:disabled { opacity: 0.55; cursor: default; transform: none; }
.submit:focus-visible { outline: 2px solid var(--peri-deep); outline-offset: 3px; }
.form-status {
font-style: italic;
font-weight: 300;
font-size: 1rem;
min-height: 1.4em;
text-align: center;
}
.form-status.is-error { color: #A8443C; }
.form-status.is-ok { color: var(--leaf-deep); }
/* A field the guest needs to fix. */
.guest.has-error, .field.has-error input { border-color: #A8443C; }
/* ── Thank-you state, swapped in after a successful reply ── */
.thankyou {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.thankyou-script {
font-family: 'Great Vibes', cursive;
font-size: clamp(2rem, 6vw, 3rem);
color: var(--peach-deep);
line-height: 1.1;
}
@media (prefers-reduced-motion: reduce) {
.submit, .choice-option, .field input { transition: none; }
}
/* ── Replies closed ──────────────────────────────────────
Shown in place of the form once the deadline has passed. The form is not
merely disabled: there is nothing to submit, and the server would refuse
it anyway.
───────────────────────────────────────────────────────── */
.rsvp-deadline-note {
margin: 0.5rem auto 0;
max-width: 28rem;
font-size: 0.92rem;
font-style: italic;
line-height: 1.6;
color: var(--ink-quiet);
}
.closed-reply {
margin: 1.6rem auto 0;
max-width: 26rem;
padding: 1.1rem 1.4rem;
border: 1px solid rgba(46, 37, 32, 0.14);
background: rgba(244, 220, 168, 0.12);
}
.closed-lead {
margin: 1.4rem 0 0;
font-size: 1rem;
color: var(--ink-soft);
}
.closed-reply .closed-lead { margin: 0 0 0.6rem; }
.closed-list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.closed-list li {
padding: 0.35rem 0;
border-bottom: 1px solid rgba(46, 37, 32, 0.08);
color: var(--ink);
}
.closed-list li:last-child { border-bottom: 0; }
.closed-note {
margin: 1.4rem auto 0;
max-width: 28rem;
font-size: 0.92rem;
font-style: italic;
line-height: 1.6;
color: var(--ink-quiet);
}