/* occasion.html page-scoped styles. Linked ONLY on occasion.html, after
styles.css + pages.css, so no other page can be affected. Same vocabulary:
Editors Note caps, Sloop Script accents, Work Sans labels,
cream/brown/ink/rose, 1px keylines. Prefix: oc-. */
/* ---------- Hero (centered monument recomposition of .hero: one column on a
dead vertical axis; the radial layer dims the photo behind the lockup) ---------- */
.oc-hero {
/* NOT pinned, unlike every other hero on this site (owner, 2026-08-02).
The base .hero in styles.css is position:sticky with `main > :not(.hero)`
carrying z-index 1, so the next section slides up OVER a parked hero. On
this page that read as the section below being stuck to the screen, so the
hero scrolls away with the page like an ordinary section and the photo is
a FIXED backdrop instead. position:relative (not static) keeps the hero
its own positioned box for the ::before layer below. */
position: relative;
top: auto;
z-index: auto;
text-align: center;
gap: 0;
/* extra bottom padding re-centers the lockup in the VISIBLE hero area at
load (the hero starts one sticky-header height below the viewport top) */
padding: 5.5rem clamp(1.5rem, 6vw, 5.5rem) 9.6rem;
background: #000;
/* clips the fixed backdrop below to this section. Same idiom as
.testimonials in styles.css, and for the same reason: it holds on iOS,
where background-attachment: fixed silently falls back to scroll. */
clip-path: inset(0);
}
/* The fixed photo layer. Viewport-sized and viewport-anchored, so the lockup
and the sections after it travel across a still image. z-index -1 keeps it
behind the hero's own content but in front of the #000 ground above; the
clip-path on the parent already makes this a contained stacking context, so
nothing on the page can paint between the two. */
.oc-hero::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 58% 52% at 50% 46%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 72%),
linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.78) 100%),
url("images/gallery-04.webp") center 55% / cover no-repeat #000;
}
.oc-hero-main { display: grid; justify-items: center; gap: 1.2rem; max-width: 960px; }
.oc-hero-eyebrow { color: #cbb6ae; letter-spacing: 0.24em; }
/* .oc-hero prefix beats the base .hero h1 rule (styles.css), which otherwise
wins on specificity and shrinks the monument lockup */
.oc-hero .oc-h1 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(3rem, 6.6vw, 5.4rem);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.02;
}
.oc-h1 span { display: block; }
/* the script sign-off sits tight under the caps, one word only */
.oc-hero-script {
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
line-height: 0.9;
color: #fff;
margin-top: -0.25em;
}
.oc-hero .pg-hero-actions { margin-top: 0.6rem; }
/* staggered load rise: replace the generic .hero > * choreography with one
tuned to this hero's single-column structure (keyframes live in styles.css) */
@media (prefers-reduced-motion: no-preference) {
.oc-hero > * { animation: none; }
.oc-hero-main > * { animation: hero-in 1s ease both; }
.oc-hero-main > :nth-child(2) { animation-delay: 0.12s; }
.oc-hero-main > :nth-child(3) { animation-delay: 0.24s; }
.oc-hero-main > :nth-child(4) { animation-delay: 0.36s; }
.oc-hero-main > :nth-child(5) { animation-delay: 0.48s; }
.oc-hero-main > :nth-child(6) { animation-delay: 0.6s; }
}
/* ---------- The run of show (numeral stage walker) ---------- */
/* Relayout 2026-08-02, ported from the reference wedding page's version of this
same kit section, which the owner sent as the reference. Three columns now:
the moments on a left rail, the live one's copy in the centre under a big
chapter NUMERAL, and the photo in a column of its own. The card that used to
overlap the photo is gone, so nothing sits on top of the picture.
Class names are unchanged on purpose: occasion.js drives this by class, so
the swap needed no JS. .oc-stage-note is now a BLOCK holding numeral +
moment + label + copy, not a bare paragraph, and .oc-stage-card is retired
with the old layout.
Two deliberate departures from the reference (owner, 2026-08-02):
1. This page keeps its CREAM ground. the reference copy of this section runs navy
with gold; here the request was the structure only.
2. This page keeps its CLOCK TIMES, which the reference version dropped. The
heading is "Your day, Hour by hour" and the times are the content it
promises, so they ride the left rail in the same label type as the moment
rather than in the serif they used to use. That also means the rail's
live state is colour and keyline ONLY, never a letter-spacing bump: the
rail is an auto-width grid column, and widening the live row would resize
the column and shove the whole section sideways every 6 seconds. */
.oc-night-grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.14fr);
gap: clamp(1.6rem, 3.4vw, 3.2rem);
align-items: start;
}
/* left rail: the five moments and their times, the live one pulled out on a
short keyline */
.oc-stops { display: grid; align-content: start; border-left: 1px solid rgba(58, 53, 49, 0.22); padding-top: 0.4rem; }
.oc-stop {
position: relative;
display: grid;
grid-template-columns: minmax(3.1em, auto) 1fr;
align-items: baseline;
gap: 0.9rem;
width: 100%;
text-align: left;
background: none;
border: 0;
font-family: var(--label);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(20, 20, 20, 0.42);
padding: 0.85rem 0 0.85rem 1.15rem;
cursor: pointer;
white-space: nowrap;
transition: color 0.35s;
}
.oc-stop::before {
content: "";
position: absolute;
left: -1px;
top: 50%;
width: 0;
height: 1px;
background: var(--rose);
transform: translateY(-50%);
transition: width 0.45s ease;
}
.oc-stop b { font-weight: 500; color: inherit; }
.oc-stop:hover { color: var(--brown); }
.oc-stop.is-live { color: var(--rose); }
.oc-stop.is-live::before { width: 0.7rem; }
/* centre stage: only the live block is in flow, so the column does not jump */
.oc-stage { position: relative; padding-top: 0.2rem; }
.oc-stage-note { display: none; }
.oc-stage-note.is-live { display: block; }
@media (prefers-reduced-motion: no-preference) {
.oc-stage-note.is-live { animation: quote-in 0.5s ease; }
}
.oc-num {
display: block;
font-family: var(--serif);
font-weight: 300;
line-height: 0.82;
font-size: clamp(4.6rem, 11vw, 9.4rem);
letter-spacing: -0.01em;
color: var(--rose);
}
.oc-moment {
display: block;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.35rem, 2.4vw, 1.9rem);
letter-spacing: 0.06em;
line-height: 1.15;
text-transform: uppercase;
color: var(--ink);
margin: 0.9rem 0 1.5rem;
}
.oc-rule { border: 0; border-top: 1px solid rgba(58, 53, 49, 0.24); margin-bottom: 1.5rem; }
.oc-stage-label {
font-family: var(--label);
font-size: 0.6875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 0.75rem;
}
/* min-height sized to the LONGEST note so the button does not walk up and down
the page as the walker auto-advances. 5.6em is MEASURED, not inherited: her
notes are shorter than the ones on the page this came from, whose 7.2em left
two blank lines of cream under every note here. Worst case is three lines
(5.38em, the wander note between 980 and 1300px); re-measure if the copy
grows. */
.oc-note-body { font-family: 'Raleway', var(--body); font-size: 1rem; line-height: 1.8; max-width: 42ch; min-height: 5.6em; }
.oc-stage .btn { margin-top: 0.6rem; }
/* right plate: rides up beside the head block, otherwise it starts below the
whole lockup and leaves a shelf of empty cream across the top right of the
section. The pull is deeper than the reference page's because this head
carries a lede paragraph under the headline and that one does not. It only
ever crosses the head's empty right half: .pg-head--left caps its own text
measure well short of this column. */
.oc-stage-media { display: grid; margin-top: -10rem; }
.oc-stage-media img, .oc-stage-media video {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
opacity: 0;
transition: opacity 0.7s ease;
}
.oc-stage-media img.is-live { opacity: 1; }
/* ---------- The run of show on the DARK GREEN ground ----------
Owner request 2026-08-02. The ground is .pg-band--brown, the site's existing
dark band (--brown #383626), so this is the same green as the morning-after
band further down the page rather than a new colour.
Everything above is tuned for cream (ink headings, --rose marks, 20/58-based
hairlines), so each one is restated here rather than retinted globally: this
block is scoped to .oc-night and nothing else in the build changes.
--oc-gold is her logo gold LIFTED, and the lift is measured, not taste.
--rose #a59754 on #383626 is 4.15:1, which carries the numeral and the
moment (both large type) but FAILS AA on the 11px uppercase labels: the rail
rows and "What I am capturing". #b0a25e is 4.74:1 and reads as the same
colour at a glance. For the same reason the dormant rail rows are white at
0.65, not the 0.5 that would sit at 4.31:1. Re-measure both if the ground
ever moves. */
.oc-night {
--oc-gold: #b0a25e;
color: #fff;
}
.oc-night .pg-head .eyebrow { color: var(--oc-gold); }
.oc-night .pg-head h2 { color: #fff; }
.oc-night .pg-head p { color: rgba(255, 255, 255, 0.85); }
.oc-night .oc-stops { border-left-color: rgba(255, 255, 255, 0.28); }
.oc-night .oc-stop { color: rgba(255, 255, 255, 0.65); }
.oc-night .oc-stop:hover { color: #fff; }
.oc-night .oc-stop.is-live { color: var(--oc-gold); }
.oc-night .oc-stop::before { background: var(--oc-gold); }
.oc-night .oc-num { color: var(--oc-gold); }
.oc-night .oc-moment { color: #fff; }
.oc-night .oc-rule { border-top-color: rgba(255, 255, 255, 0.28); }
.oc-night .oc-stage-label { color: var(--oc-gold); }
.oc-night .oc-note-body { color: rgba(255, 255, 255, 0.9); }
/* .btn borders in currentColor, so the colour carries the outline too */
.oc-night .btn-outline-dark { color: #fff; }
.oc-night .btn-outline-dark:hover { background: #fff; color: var(--brown); }
/* 980: the photo drops under the two copy columns rather than squeezing them */
@media (max-width: 980px) {
.oc-night-grid { grid-template-columns: auto minmax(0, 1fr); }
/* under the copy now, so the pull-up has nothing left to close and would
just drag the photo into the notes */
.oc-stage-media { grid-column: 1 / -1; order: 3; max-width: 460px; margin-top: 0; }
}
/* ---------- The case for the booth (numbered points + layered collage) ---------- */
.oc-points { list-style: none; margin: 2rem 0 2.4rem; }
.oc-points li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1.4rem;
align-items: baseline;
border-bottom: 1px solid rgba(58, 53, 49, 0.2);
padding: 1.15rem 0.1rem 1.25rem;
}
.oc-points li:first-child { border-top: 1px solid rgba(58, 53, 49, 0.2); }
.oc-point-num { font-family: var(--label); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.oc-points h3 {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.oc-points p { grid-column: 2; font-family: 'Raleway', var(--body); font-size: 0.95rem; line-height: 1.65; opacity: 0.85; }
/* the three points reveal in sequence once the list scrolls into view */
html.js .oc-points li:nth-child(2).reveal { transition-delay: 0.14s; }
html.js .oc-points li:nth-child(3).reveal { transition-delay: 0.28s; }
.oc-collage { position: relative; justify-self: end; width: min(100%, 440px); margin: 0; }
/* small grayscale detail hangs off the frame, like the index package photos */
.oc-collage-detail {
position: absolute;
left: -12%;
bottom: 10%; /* stays clear of the figcaption below the frame */
width: 40%;
aspect-ratio: 1 / 1;
object-fit: cover;
filter: grayscale(1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.oc-collage figcaption {
margin-top: 0.9rem;
text-align: center;
font-family: var(--label);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rose);
}
/* ---------- The morning after (the logo-green band) ----------
Owner request 2026-08-02: this band runs the LIGHT GREEN FROM HER LOGO with
every word on it white. The green is --rose #a59754, sampled straight out of
assets-src/logo.png (the mark is a single flat colour, so there is nothing to
choose between), and it is already the palette's accent, not a new value.
The markup still carries .pg-band--brown, the DARK ground, so every rule
below is out-tinting that modifier rather than replacing it: same specificity
both ways, and occasion.css loads after pages.css, so the later file wins.
That is why the modifier's own tints (a cream body colour, a blush eyebrow)
are each restated here instead of just the background. It is a load-order
win, not a specificity one, so keep this block in occasion.css; moving it
into pages.css above .pg-band--brown would silently return the band to dark.
Removing the now-inaccurate modifier from the markup would be tidier, but it
is an HTML change and this is the file that was asked for.
CONTRAST, MEASURED: white on #a59754 is 2.94:1, which is under AA for body
copy (4.5:1) and just under the large-text floor (3:1). The band is a
deliberate brand look, so it ships as asked, but the two things that soften
white further are undone rather than left to stack on top of it: .pg-stat
span's 0.8 opacity, and the cream (not white) text link. If this ever needs
to CLEAR AA rather than look like the logo, darkening the ground to about
#7d7240 carries white body copy at 4.5:1 and keeps the same hue. */
.oc-book { background: var(--rose); color: #fff; }
.oc-book .pg-head .eyebrow { color: #fff; }
.oc-book .pg-head h2 { color: #fff; }
.oc-book .pg-head p { color: #fff; }
.oc-book .pg-stat b { color: #fff; }
/* the label ships at 0.8 opacity for a dark ground; on this one that is the
difference between quiet and unreadable */
.oc-book .pg-stat span { color: #fff; opacity: 1; }
.oc-book .text-link { color: #fff; }
/* ---------- Booths that fit (the register: ledger rows + preview frame) ---------- */
.oc-reg-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.oc-reg-row {
display: block;
color: inherit;
text-decoration: none;
border-top: 1px solid var(--pk-hairline);
padding: clamp(1.4rem, 3.4vw, 2.4rem) 0;
position: relative;
}
.oc-reg-row:last-of-type { border-bottom: 1px solid var(--pk-hairline); }
.oc-reg-num {
font-family: var(--label);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose);
}
.oc-reg-row h3 {
font-family: var(--serif);
font-weight: 300;
text-transform: uppercase;
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: 1.02;
letter-spacing: 0.02em;
margin-top: 0.35rem;
color: rgba(20, 20, 20, 0.42);
transition: color 0.5s ease, transform 0.6s cubic-bezier(0.33, 1, 0.4, 1);
}
.oc-reg-row.is-live h3 { color: var(--ink); transform: translateX(10px); }
/* the description unfolds via the 0fr -> 1fr grid-row trick */
.oc-reg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.33, 1, 0.4, 1); }
.oc-reg-body > div { overflow: hidden; }
/* keep blurb text out of the floating arrow's lane: at 400-440px widths the
first line grew long enough to run under the arrow shaft (layout-audit,
2026-08-01) */
.oc-reg-body p { padding-right: 2.4rem; }
.oc-reg-row.is-live .oc-reg-body { grid-template-rows: 1fr; }
.oc-reg-body p { font-family: 'Raleway', var(--body); font-size: 0.98rem; line-height: 1.7; max-width: 52ch; padding-top: 0.9rem; }
.oc-reg-link {
display: inline-block;
margin: 0.8rem 0 0.2rem;
font-family: var(--label);
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
border-bottom: 1px solid var(--ink);
padding-bottom: 0.25em;
}
.oc-reg-arrow {
position: absolute;
right: 0.4rem;
top: 50%;
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 300;
transform: translate(-14px, -50%);
opacity: 0;
transition: opacity 0.45s ease, transform 0.55s ease;
}
.oc-reg-row.is-live .oc-reg-arrow { opacity: 1; transform: translate(0, -50%); }
.oc-reg-frame { position: relative; margin: 0; }
.oc-reg-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; }
.oc-reg-media img, .oc-reg-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.05);
transition: opacity 0.75s ease, transform 1.3s ease;
}
.oc-reg-media img.is-live { opacity: 1; transform: scale(1); }
/* rose keyline offset behind the frame, echoing the collage frames */
.oc-reg-frame::after {
content: "";
position: absolute;
inset: 1.1rem -1.1rem -1.1rem 1.1rem;
border: 1px solid var(--rose);
z-index: -1;
}
.oc-reg-caption {
position: absolute;
left: 1.2rem;
bottom: 1.1rem;
z-index: 2;
background: var(--cream);
padding: 0.55em 1.1em;
font-family: var(--script);
font-size: 1.35rem;
color: var(--ink);
}
/* ---------- FAQ open animation (page-scoped garnish) ---------- */
@media (prefers-reduced-motion: no-preference) {
.faq details[open] p { animation: oc-faq-in 0.45s ease; }
}
@keyframes oc-faq-in {
from { opacity: 0; translate: 0 8px; }
to { opacity: 1; translate: 0 0; }
}
/* ---------- Small screens ---------- */
@media (max-width: 800px) {
.oc-hero { padding: 4.5rem 1.25rem 2.5rem; }
.oc-hero .oc-h1 { font-family: 'Made Mirage', var(--serif); font-size: 11vw; letter-spacing: normal; line-height: 1; }
.oc-hero-script { font-size: 8.4vw; }
/* the rail has no room to stand beside the stage on a phone, so it becomes a
wrapped row of moments above it, hung off a top keyline instead of a left one */
.oc-night-grid { grid-template-columns: 1fr; gap: 1.8rem; }
.oc-stops { display: flex; flex-wrap: wrap; gap: 0 1.1rem; border-left: 0; border-top: 1px solid rgba(58, 53, 49, 0.22); padding-top: 0.6rem; }
/* the rail's keyline moves from the left edge to the top here, so the dark
ground's version of it has to move with it */
.oc-night .oc-stops { border-top-color: rgba(255, 255, 255, 0.28); }
.oc-stop { display: flex; gap: 0.55rem; width: auto; padding: 0.5rem 0; }
.oc-stop::before { display: none; }
/* stacked, the notes are the only thing in their column, so the reserved
height just opens a gap under the shortest one */
.oc-note-body { min-height: 0; }
.oc-stage-media { max-width: 100%; }
.oc-collage { justify-self: center; }
.oc-collage-detail { display: none; }
.oc-reg-grid { grid-template-columns: 1fr; }
.oc-reg-frame { display: none; }
.oc-reg-row h3 { color: var(--ink); }
.oc-reg-body { grid-template-rows: 1fr; }
}
/* ---------- Reduced motion: every page-scoped animation off ---------- */
@media (prefers-reduced-motion: reduce) {
.oc-stop, .oc-stop::before { transition: none; }
.oc-stage-media img { transition: none; }
.oc-reg-row h3, .oc-reg-body, .oc-reg-media img, .oc-reg-arrow { transition: none; }
}
/* celebration stop shows package-1 at 3:2: anchor the bottom-fifth couple */
.oc-stage-media img:last-child { object-position: 50% 100%; }
/* Reconciled register rows number themselves (rows can be added or removed
by the price-list sync, so no hardcoded No. 0N) */
.oc-reg-list { counter-reset: regrow; }
.oc-reg-list .oc-reg-row { counter-increment: regrow; }
.oc-reg-num::before { content: "No. " counter(regrow, decimal-leading-zero); }