/* ============================================================================
Andrea & Alex — March 27, 2027 — Austin, Texas
----------------------------------------------------------------------------
One stylesheet, no build step. The site is small enough that a bundler would
add more moving parts than it removes, and a wedding site should still work
in five years without anyone reinstalling a toolchain.
Palette: eucalyptus sage and warm cream, carried over from the template you
liked. Everything is a custom property, so changing the wedding's colours is
editing the block below and nothing else.
========================================================================= */
:root {
--cream: #fbf9f4;
--paper: #f4efe4;
--paper-deep: #ece5d6;
--sage: #8b9a7d;
--sage-deep: #58664f;
--sage-mist: #dfe5d8;
--ink: #3a3d34;
--ink-strong: #23261f;
--ink-muted: #66685e;
--rule: #ddd8c9;
--danger: #9c3b2e;
/* The heart in the hero's typed line. Decorative and aria-hidden, so WCAG
does not strictly govern it, but the original #b8695e sat at 3.82:1 on
cream and read washed out next to type that clears 10:1. This is the same
hue carried darker: 5.13:1 on --cream, 4.71:1 on --paper. */
--blush: #a35348;
--success: #4f6b4a;
/* Every ink/ground pairing above clears WCAG AA (4.5:1) for normal text —
--ink-muted and --sage-deep are darker than they look like they need to be
for exactly that reason. If you retune the palette, re-check the pairs:
muted text on --paper-deep and --sage-deep on --sage-mist are the two that
fail first. */
--display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--body: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
/* Only the hero's typed line uses this. A typewriter effect in a
proportional face looks like a bug — the text visibly reflows on every
character — so the one place we type needs a fixed advance width. */
/* Space Mono ships a single weight. Anything using --mono has to set
font-weight: 400 with it, or it inherits the body's 300, asks for a face
that does not exist, and leaves the stylesheet describing something the
browser was never going to render. */
--mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* A fourth face, used for exactly one line: "Save the date" over the
numerals. It earns its request because nothing already loaded can do the
job — Cormorant's italic is a slanted serif, not a hand, and setting a
script line in it would read as an accident. Pinyon Script ships one
weight and one style; there is no other cut to ask for.
Why this face and not one of the other scripts on Google Fonts: copperplate
stroke contrast. Great Vibes, Ephesis and Allura are close to monoline — an
even stroke the whole way round — which reads friendly rather than
engraved, and Great Vibes was tried here and rejected for exactly that.
Pinyon has the thick downstroke and hairline connector of a nib, which is
what an engraved save-the-date actually looks like.
The generic 'cursive' at the end of the stack is a real fallback here, not
boilerplate: if the webfont never arrives, the line should still look like
handwriting rather than dropping to Times. */
--script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
--shadow-soft: 0 1px 2px rgba(35, 38, 31, 0.04), 0 8px 24px rgba(35, 38, 31, 0.06);
--radius: 2px;
--nav-h: 4.25rem;
/* One measure for the page's side gutters, so every section lines up. */
--gutter: clamp(1.25rem, 5vw, 4rem);
--measure: 68rem;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Anchor targets stop below the sticky nav instead of underneath it. */
scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--body);
font-size: 1rem;
line-height: 1.65;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
/* `height: auto` is doing real work here, not tidying up. Every ![]()
carries
width/height attributes so the browser can reserve space before the file
arrives, and those attributes map to a presentational `height` that beats
`aspect-ratio` unless CSS overrides the height explicitly. Without this line
the gallery renders every photo at its literal pixel height. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
font-family: var(--display);
font-weight: 300;
color: var(--ink-strong);
letter-spacing: 0.01em;
margin: 0 0 0.5em;
}
h2 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.15; }
h3 { font-size: 1.35rem; line-height: 1.3; }
p { margin: 0 0 1.1rem; }
a { color: var(--sage-deep); text-underline-offset: 0.2em; }
a:hover { color: var(--ink-strong); }
:focus-visible {
outline: 2px solid var(--sage-deep);
outline-offset: 3px;
border-radius: 1px;
}
/* A word set in small letterspaced caps — used above every section heading. */
.eyebrow {
margin: 0 0 0.9rem;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sage-deep);
}
.script-accent {
font-family: var(--display);
font-style: italic;
font-size: 1.25rem;
color: var(--sage-deep);
margin: 0 0 0.35rem;
}
/* ---------------------------------------------------------------- nav ---- */
.nav {
position: sticky;
top: 0;
z-index: 50;
height: var(--nav-h);
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0 var(--gutter);
background: rgba(251, 249, 244, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease, background 0.3s ease;
}
/* Set by main.js once the hero has scrolled past, so the bar only grows a rule
when there is content behind it to separate from. */
.nav.is-stuck { border-bottom-color: var(--rule); }
.nav-mark {
/* Sized to a 44px target rather than to the two letters inside it. */
display: flex;
align-items: center;
min-height: 2.75rem;
font-family: var(--display);
font-size: 1.15rem;
letter-spacing: 0.06em;
color: var(--ink-strong);
text-decoration: none;
white-space: nowrap;
}
.nav-links {
display: flex;
gap: clamp(0.75rem, 2vw, 1.75rem);
list-style: none;
padding: 0;
margin: 0;
}
.nav-links a {
display: block;
padding: 0.25rem 0;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }
/* Set by the scroll spy in main.js. */
.nav-links a[aria-current='true'] { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }
.nav-toggle {
display: none;
margin-left: auto;
/* Buttons do not inherit font-family, so without this the glyph rendered in
the browser's default sans — Arial here — which was a fourth typeface on
the page nobody chose. */
font-family: var(--body);
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: transparent;
color: var(--ink-strong);
font-size: 1.1rem;
cursor: pointer;
}
/*
Centre the links on the bar rather than on whatever space the wordmark left
behind. Three columns whose outer two are equal fractions; that equality is
what does the centring, and it holds however wide "A & A" gets.
Desktop only, and deliberately so. Below this width the list becomes a fixed
full-width dropdown, and giving a fixed element a grid-column confines it to
that column's area — which collapsed the menu into a narrow panel against the
right edge. The bar has no centring to do once the links are a dropdown, so
the simplest fix is for the grid not to exist down there.
*/
@media (min-width: 56.0625rem) {
.nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.nav-mark { grid-column: 1; justify-self: start; }
.nav-links { grid-column: 2; margin-left: 0; }
}
@media (max-width: 56rem) {
.nav-toggle { display: block; }
.nav-links {
position: fixed;
inset: var(--nav-h) 0 auto 0;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0.5rem var(--gutter) 1.5rem;
background: var(--cream);
border-bottom: 1px solid var(--rule);
box-shadow: var(--shadow-soft);
}
.nav-links[hidden] { display: none; }
.nav-links a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); letter-spacing: 0.14em; }
}
/* -------------------------------------------------------------- layout --- */
/* No scroll-margin here on purpose. `html` already carries a scroll-padding-top
of the same nav height (see the top of this file), and the two do not pick a
winner — they add up, which was parking every jump-to link a second nav
height below the bar and leaving a strip of the previous section on screen.
The padding on the scroll container is the more general of the two: it covers
every scroll target, not only sections. */
.section {
padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
}
.section--paper { background: var(--paper); }
/* `hidden` has to actually win here. The UA sheet gives it display:none at the
lowest possible weight, and any later rule that sets a display — the section
rules below, a grid, a flex container — silently overrides it and the
"hidden" section renders. */
[hidden] { display: none !important; }
/*
The one dark band on the page. Details earns it: it is where the cue from the
hero lands, and a colour change is a stronger "you have arrived" than another
cream section with a different heading.
Contrast, measured against --sage-deep #58664f rather than eyeballed:
--cream #fbf9f4 5.82:1 headings, links
--sage-mist #dfe5d8 4.77:1 secondary text
Both clear AA for body text. The cards keep their cream ground, so everything
inside them is unchanged and still measures 5.4:1 or better — which is the
contrast the section is after: light tiles standing off a dark field, rather
than low-contrast text laid directly on the green.
*/
.section--forest {
background: var(--sage-deep);
color: var(--sage-mist);
/* A shade tighter at the top than the other sections. The date is a display
numeral with a lot of air built into its own line box, so the standard
section padding reads as a gap above it rather than as breathing room. */
padding-top: calc(clamp(4rem, 9vw, 7.5rem) - 1rem);
}
.section--forest h2 { color: var(--cream); }
.section--forest .eyebrow { color: var(--sage-mist); }
/* Links have to carry the underline here. On cream a link is told apart by its
green; on the green there is no hue left to change, so the underline is the
only thing distinguishing it from the sentence around it. */
.section--forest a {
color: var(--cream);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.section--forest a:hover { color: #fff; }
/*
The tiles here carry no fill. With no ground of their own the 32px radius
needs a visible edge or the shape does not exist at all, so they are outlined
in cream at low alpha — enough to draw the corner, not enough to box the text
in. Everything inside them therefore sits directly on the green and is
measured against it: --cream at 5.82:1, --sage-mist at 4.77:1.
*/
.section--forest .card {
border-color: rgba(251, 249, 244, 0.3);
color: var(--cream);
}
.section--forest .card h3,
.section--forest .card strong { color: var(--cream); }
.section--forest .card .meta { color: var(--sage-mist); }
/*
"Save the date", set as a hand above the numerals.
Two decisions worth keeping:
- It is --cream, not the --sage-mist used by the "Austin, TX area" line
beneath the date. Mist on this green measures 4.77:1, which passes AA, but
WCAG measures colour and this face is close to hairline in its thin
strokes — the one case where a ratio that only just passes visibly fails.
Cream buys 5.82:1. The hierarchy is carried by size and by the change of
face, which is more than enough separation from the numerals.
- Letter-spacing is left alone. A script is drawn to join up; tracking it out
breaks the joins and leaves the line looking like disconnected letters.
*/
.details-script {
margin: 0 0 0.1rem;
text-align: center;
font-family: var(--script);
font-weight: 400;
/* A script carries tall ascenders and deep descenders inside its own line
box, so a normal line-height opens a gap between this and the date that no
margin asked for. Tightening the box is what closes it — the glyphs
overflow the box rather than being clipped, which is what we want.
On size: Pinyon ships one weight — there is no thin cut to reach for — so
size is the only lever for making this sit under the date rather than
compete with it. It sets about 5.3x its own font-size wide, so the cap is
the number that matters: 2.8rem puts the line at ~240px beneath a 315px
date, where 3.4rem had it at 263px and reading as a second headline.
At the 1.6rem floor it is ~136px inside a 320px phone's 280px measure. */
font-size: clamp(1.6rem, 5.8vw, 2.8rem);
line-height: 1.05;
color: var(--cream);
}
/*
The date is the section's headline — the actual