@font-face{font-family:'Newsreader';src:url('../fonts/heading-newsreader.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/body-manrope.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* ==========================================================================
Cinematic Chapters — Vestry Rose Weddings
DS-02. Static CSS. No framework, no library, no CDN, no preprocessor.
The static state IS the product. Every rule below renders the finished
composition with no script running and with all motion removed. The one
TypeScript module that touches presentation (chapters.ts) only adds the
class `js-reveal` to and `is-on` to chapters, and every selector
that depends on those two classes is an enhancement of a state that is
already correct without them.
Order of this file:
1 tokens
2 reset and base
3 typography
4 shell, letterbox and chapter primitives
5 header overlay bar and the bottom-sheet navigation
6 hero chapter
7 interior chapter variants
8 components (actions, rails, cards, quotes, forms)
9 gallery reel
10 staff portraits
11 subscribe band and footer
12 responsive contract, width by width
13 reduced motion, forced colours, print
========================================================================== */
/* -------------------------------------------------------------------------
1 TOKENS — the single block. No page-specific near-duplicates.
------------------------------------------------------------------------- */
:root {
/* colour */
--bg: #f8f1f2;
--bg-lift: #ecdcda;
--bg-sheet: #f2e3e4;
--text: #251819;
--muted: #5a4445;
--action: #254b0c;
--accent: #6d1d21;
--hl: #b2f0c7;
/* The highlight where the sheet spends it as INK. Section 9 names the
highlight as a ground with a text colour on it; this sheet uses it
for labels and quiet links instead, which a light system cannot do
with a tint. Same role, a tone that reads. */
--hl-ink: #125e2c;
--rule: rgba(108, 55, 58, 0.28);
--rule-soft: rgba(37, 24, 25, 0.14);
--focus: #254b0c;
/* The colour section 9 names for text ON the action colour. Three of
the four DS-02 systems are light, where the page ground and the
action label are no longer the same near-black. */
--on-action: #ffffff;
/*
Section 17 names three values outright: a field, a chapter mark and a 1px rule.
This unit's are #ECDCDA, #6D1D21 and rgba(37,24,25,.18). They sit beside the
palette rather than replacing it -- #F8F1F2 stays the page ground, and the
field is the slightly lifted plane the chapter furniture is drawn on. The mark
is the accent, not a gold: on paper the ceremonial red is what reads as a mark.
*/
--field: #ecdcda;
--mark-gold: #6d1d21;
--hair: rgba(37, 24, 25, 0.18);
/* spacing scale — 4 8 12 16 24 32 48 64 96 128 */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 64px;
--s9: 96px;
--s10: 128px;
/* geometry */
--maxw: 1240px;
--measure: 68ch;
--measure-review: 52ch;
--radius: 24px;
--header-h: 56px;
--gutter: 16px;
--section: 72px;
--letterbox: 16px;
--control: 44px;
/* motion */
--t-std: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
--t-long: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Material catalogue correction: four cinematic acts. Supporting sections
share a scene instead of forming a generic vertical preview stack. */
@media (min-width: 1100px) {
.home-page main.page--hero {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"hero hero"
"services approach"
"gallery staff"
"reviews faq"
"closing closing";
background: #381e20;
}
.home-page main > .hero { grid-area: hero; min-height: 100svh; }
.home-page main > .filmband { grid-column: 1 / -1; grid-row: 1; align-self: end; z-index: 4; }
.home-page main > [aria-labelledby="svc-h"] { grid-area: services; min-height: 100svh; }
.home-page main > [aria-labelledby="how-h"] { grid-area: approach; min-height: 100svh; }
.home-page main > [aria-labelledby="gal-h"] { grid-area: gallery; min-height: 100svh; }
.home-page main > [aria-labelledby="ppl-h"] { grid-area: staff; min-height: 100svh; }
.home-page main > [aria-labelledby="rev-h"] { grid-area: reviews; min-height: 100svh; }
.home-page main > [aria-labelledby="faq-h"] { grid-area: faq; min-height: 100svh; }
.home-page main > .atmos { grid-area: closing; min-height: 100svh; }
.home-page main > .cta { grid-area: closing; align-self: end; z-index: 3; background: linear-gradient(transparent, #381e20 40%); }
.home-page main > [aria-labelledby="svc-h"],
.home-page main > [aria-labelledby="ppl-h"],
.home-page main > [aria-labelledby="rev-h"] { border-right: 1px solid rgba(108,55,58,.25); }
}
/* -------------------------------------------------------------------------
2 RESET AND BASE
------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
background: var(--bg);
-webkit-text-size-adjust: 100%;
scroll-behavior: auto;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family:var(--catalog-font-body);
font-size: 1rem;
line-height: 1.6;
font-synthesis-weight: none;
overflow-x: hidden;
}
/*
height: auto is load-bearing, not tidiness. Every ![]()
here carries width
and height attributes so the box is reserved before the bytes arrive, and
HTML maps those attributes to presentational width and height declarations.
max-width: 100% then shrinks the width while the height declaration stands,
so the hero poster rendered 320 x 1080 instead of 320 x 180: the correct
width against the full attribute height. height: auto lets the derived
aspect ratio govern, which is what keeps the reserved box honest and CLS
at zero.
*/
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--action);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
a:hover {
color: var(--text);
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 2px;
}
/* Browsers without :focus-visible still show a ring. */
:focus {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
.skip {
position: absolute;
left: var(--s4);
top: var(--s2);
z-index: 200;
transform: translateY(-160%);
background: var(--action);
color: var(--on-action);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 12px 20px;
border-radius: var(--radius);
text-decoration: none;
transition: transform var(--t-std);
}
.skip:focus {
transform: translateY(0);
color: var(--on-action);
}
.vh {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* -------------------------------------------------------------------------
3 TYPOGRAPHY — two self-hosted variable files, nothing else.
------------------------------------------------------------------------- */
h1,
h2,
h3,
.mark,
.quote__text,
.num {
font-family:var(--catalog-font-heading);
font-weight: 400;
margin: 0;
}
h1 {
font-size: clamp(2.25rem, 11vw, 3.75rem);
line-height: 0.98;
letter-spacing: -0.03em;
}
h2 {
font-size: clamp(2rem, 4vw, 4rem);
line-height: 1.02;
letter-spacing: -0.028em;
}
h3 {
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.15;
letter-spacing: -0.018em;
}
p {
margin: 0;
}
.lede {
font-size: 1.0625rem;
line-height: 1.55;
color: var(--text);
max-width: var(--measure);
}
.body {
color: var(--muted);
max-width: var(--measure);
}
.label {
font-size: 0.875rem;
line-height: 1.35;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hl-ink);
margin: 0;
}
.meta {
font-size: 0.8125rem;
line-height: 1.45;
letter-spacing: 0.05em;
color: var(--muted);
margin: 0;
}
.num {
font-size: 0.9375rem;
letter-spacing: 0.2em;
color: var(--action);
}
/* -------------------------------------------------------------------------
4 SHELL, LETTERBOX AND CHAPTER PRIMITIVES
------------------------------------------------------------------------- */
.shell {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding-inline: var(--gutter);
}
/*
A chapter is the unit of this design. It is a viewport layer: an absolutely
positioned media plane, a scrim plane above it, and a content plane above
that. The two black bands drawn by ::before and ::after are the cinematic
letterbox mask; they clip the media inside the frame at every width, which
is what stops a full-bleed photograph reading as a hero banner.
*/
.chapter {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--bg);
padding-block: var(--section);
}
.chapter::before,
.chapter::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: var(--letterbox);
background: var(--bg);
z-index: 4;
pointer-events: none;
}
.chapter::before {
top: 0;
box-shadow: 0 1px 0 0 var(--rule);
}
.chapter::after {
bottom: 0;
box-shadow: 0 -1px 0 0 var(--rule);
}
/* A full-viewport chapter. Used for the hero and for every priced service. */
.chapter--full {
min-height: 100vh;
display: grid;
align-content: center;
}
@supports (min-height: 100svh) {
.chapter--full {
min-height: 100svh;
}
}
/*
R2 allows one featured review a 70vh stage rather than the full viewport.
align-content: end is not decoration: it drops the caption plate to the
bottom of the frame, which is where .chapter__scrim is between .92 and .96
opaque, so the overlay text keeps its contrast on the brightest still.
*/
.chapter--lead {
min-height: 70vh;
align-content: end;
}
@supports (min-height: 100svh) {
.chapter--lead {
min-height: 70svh;
}
}
.chapter__media {
position: absolute;
inset: 0;
z-index: 0;
}
.chapter__media img,
.chapter__media video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*
The scrim is what makes overlay text legible on the brightest frame of a
photograph. It is opaque at the bottom, where the text sits, and clears
toward the top so the image is still visible as an image.
*/
.chapter__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
rgba(10, 12, 14, 0.96) 0%,
rgba(10, 12, 14, 0.92) 34%,
rgba(10, 12, 14, 0.66) 62%,
rgba(10, 12, 14, 0.3) 100%
);
}
.chapter__body {
position: relative;
z-index: 3;
}
/*
The scene's right-hand anchor: the chapter counter, a hairline and the
timestamp. Below 1024px .shell is not a grid, so this stacks under the
caption plate as a closing credit; the 1024px block turns it into the
4fr column and flushes it right.
*/
.chapter__aside {
display: grid;
gap: var(--s3);
align-content: end;
}
.chapter__aside .rule {
display: block;
width: 96px;
height: 1px;
background: var(--rule);
}
.chapter__inner {
display: grid;
/*
Stated explicitly for the same reason .hero states it. An implicit auto
column is sized from its items' max-content contribution, and .lede and
.body carry max-width: var(--measure) (68ch). Inside .chapter--open,
where this box is capped at 40ch/46ch, that made the track 623px wide in
a 493px box and the prose painted outside its own column at 1600px.
minmax(0, 1fr) pins the track to the box, so the narrower cap governs
and the 68ch measure is simply an upper bound that never binds here.
*/
grid-template-columns: minmax(0, 1fr);
gap: var(--s5);
max-width: var(--measure);
}
/* The chapter marker: an index number, a hairline and a category label. */
.chapter__mark {
display: flex;
align-items: center;
gap: var(--s3);
}
.chapter__mark .rule {
flex: 1 1 auto;
height: 1px;
background: var(--rule);
max-width: 96px;
}
/* -------------------------------------------------------------------------
5 HEADER OVERLAY BAR + BOTTOM-SHEET NAVIGATION
------------------------------------------------------------------------- */
.bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 80;
height: var(--header-h);
display: flex;
align-items: center;
gap: var(--s4);
padding-inline: var(--gutter);
background: linear-gradient(to bottom, rgba(10, 12, 14, 0.9) 0%, rgba(10, 12, 14, 0.55) 62%, rgba(10, 12, 14, 0) 100%);
}
.bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--rule-soft);
}
.mark {
font-size: 0.9375rem;
line-height: 1;
letter-spacing: 0.02em;
color: var(--text);
text-decoration: none;
white-space: nowrap;
margin-right: auto;
}
.mark:hover {
color: var(--action);
}
.mark em {
font-style: italic;
color: var(--action);
}
/*
The Book destination stays IN THE BAR at every width, 320px included. It is
not hidden below 768px and promoted into the sheet instead, for two reasons.
A Book action that exists only behind a disclosure is one extra tap away on
exactly the devices most visitors arrive on. And a control removed with
`display: none` cannot accept a focus ring, so a keyboard visitor tabbing
across the header would reach nothing at all where the primary action is.
Room is made by shortening two things rather than deleting one: the wordmark
drops its trailing word below 414px and the button takes compact padding
below 768px. At 320px that is 94px of wordmark, 58px of Book and 86px of
disclosure with two 16px gaps — 270px inside 288px of available width.
*/
.mark__tail {
display: none;
}
.bar .btn--book {
padding: 0 var(--s3);
font-size: 0.8125rem;
letter-spacing: 0.08em;
}
/* Desktop overlay links. Hidden below 1024px, where the sheet takes over. */
.bar__nav {
display: none;
}
.bar__nav ul {
display: flex;
align-items: center;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.bar__nav a {
display: block;
font-size: 0.8125rem;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
padding: 14px 2px;
white-space: nowrap;
transition: color var(--t-std);
}
.bar__nav a:hover {
color: var(--action);
}
.bar__nav a[aria-current="page"] {
color: var(--action);
box-shadow: inset 0 -1px 0 0 var(--action);
}
/* The disclosure. A native , so it works with no script at all. */
.drawer {
margin-left: auto;
}
.drawer > summary {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-width: var(--control);
min-height: var(--control);
padding: 0 var(--s3);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: rgba(10, 12, 14, 0.6);
color: var(--text);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
list-style: none;
}
.drawer > summary::-webkit-details-marker {
display: none;
}
.drawer > summary::after {
content: "";
width: 14px;
height: 9px;
background: currentColor;
clip-path: polygon(0 0, 100% 0, 100% 1px, 0 1px, 0 4px, 100% 4px, 100% 5px, 0 5px, 0 8px, 100% 8px, 100% 9px, 0 9px);
}
.drawer[open] > summary::after {
clip-path: polygon(0 4px, 100% 4px, 100% 5px, 0 5px);
}
.drawer > summary:hover {
border-color: var(--action);
color: var(--action);
}
/*
The panel is a bottom sheet: it enters from the foot of the viewport, which
is where a thumb already is. It is a fixed layer, not a dropdown, so a long
link list never pushes the page or falls off the top of the screen.
*/
.drawer__panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
max-height: 82vh;
overflow-y: auto;
padding: var(--s5) var(--gutter) var(--s6);
background: var(--bg-sheet);
border-top: 1px solid var(--rule);
box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
}
.drawer__panel ul {
list-style: none;
margin: 0 0 var(--s4);
padding: 0;
display: grid;
}
.drawer__panel li + li {
border-top: 1px solid var(--rule-soft);
}
.drawer__panel a {
display: flex;
align-items: center;
gap: var(--s3);
min-height: var(--control);
padding: 10px 2px;
font-size: 1.0625rem;
color: var(--text);
text-decoration: none;
}
.drawer__panel a:hover {
color: var(--action);
}
.drawer__panel a[aria-current="page"] {
color: var(--action);
}
.drawer__panel a .num {
font-size: 0.8125rem;
min-width: 2.4em;
}
.drawer__book {
display: block;
}
.sheet__foot {
display: grid;
gap: var(--s2);
border-top: 1px solid var(--rule-soft);
padding-top: var(--s4);
}
/* Keep the page clear of the fixed bar. */
.page {
padding-top: var(--header-h);
}
.page--hero {
padding-top: 0;
}
/* -------------------------------------------------------------------------
6 HERO CHAPTER
------------------------------------------------------------------------- */
/*
Below 768px the hero is two stacked planes: a media band with a fixed
aspect ratio, then the text. That is what gives the 4:5 crop the responsive
contract asks for at 320px while the chapter as a whole still fills the
viewport. From 768px the media becomes the background plane of the chapter
and the text sits over it.
The media box reserves its ratio in CSS and the ![]()
carries width and
height, so the poster cannot shift the page — and a real