/* =============================================================================
The Farm — site stylesheet (single source of truth)
-----------------------------------------------------------------------------
Architecture
1. Reset + base (lines ~30 – 90)
2. Design tokens (themed) (lines ~90 – 200)
3. Typography (one rule per element) (lines ~200 – 290)
4. Layout primitives (lines ~290 – 340)
5. Header / menu / footer (lines ~340 – 540)
6. Hero variants (lines ~540 – 700)
7. Section primitives (lines ~700 – 980)
8. Components (carousel, lightbox,
accordion, mini-faq, curtains) (lines ~980 – 1280)
9. Reveal + page transitions (lines ~1280 – 1340)
10. Accessibility helpers (lines ~1340 – 1380)
11. Reduced motion (lines ~1380 – end)
Theme system
- The dark burgundy palette is the default. To switch a page to the light
dusty-rose palette, set data-theme="light" on .
- Tokens are semantic (--surface, --text, --line) so components are
theme-agnostic. Brand-fixed colours (cream, burgundy) stay in --brand-*.
Maintainers: every typography rule lives in section 3. Don't redefine
font-size, font-family, weight or letter-spacing inside section/component
blocks. Use the tokens or composition classes (.eyebrow, .lede, .body-lg).
========================================================================== */
/* ============================================================ 1. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.menu-open,
html.menu-open body,
html.lightbox-open,
html.lightbox-open body { overflow: hidden; height: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-weight: 400;
line-height: 1.6;
background: var(--surface);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
/* Default focus ring — quietly visible against either palette */
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
/* ============================================================ 2. Tokens */
:root {
/* ---- Brand palette (constant; do not theme) ---- */
--brand-burgundy: #2a0f18;
--brand-burgundy-soft: #38161f;
--brand-burgundy-deep: #1f0a12;
--brand-cream: #e5ded5;
--brand-rose: #c6b1ac;
--brand-rose-soft: #d1bcb7;
--brand-bone: #ddd9d2;
--brand-bone-soft: #e3dfd8;
/* Cream alpha steps (stable for use on burgundy surfaces) */
--cream-strong: rgba(229, 222, 213, 0.92);
--cream-muted: rgba(229, 222, 213, 0.72);
--cream-dim: rgba(229, 222, 213, 0.55);
--cream-line: rgba(229, 222, 213, 0.18);
/* Burgundy alpha steps (stable for use on rose surfaces) */
--ink-strong: rgba(42, 15, 24, 0.92);
--ink-muted: rgba(42, 15, 24, 0.72);
--ink-dim: rgba(42, 15, 24, 0.55);
--ink-line: rgba(42, 15, 24, 0.22);
/* ---- Typography ---- */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Syne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* One source of truth for type scale. Composed via .eyebrow/.lede/etc. */
--fs-display: clamp(52px, 8vw, 118px); /* hero h1 (.display) */
--fs-h1: clamp(44px, 6.5vw, 92px);
--fs-h2: clamp(34px, 4.5vw, 62px);
--fs-h3: clamp(28px, 3.2vw, 44px);
--fs-h4: clamp(22px, 2.4vw, 32px);
--fs-lede-lg: clamp(22px, 2.5vw, 36px);
--fs-lede: clamp(18px, 1.6vw, 26px);
--fs-body-lg: clamp(17px, 1.4vw, 20px);
--fs-body: clamp(15px, 1.1vw, 17px);
--fs-body-sm: 14px;
--fs-caption: 13px;
--fs-eyebrow: 13px;
--fs-eyebrow-sm:10.5px;
/* ---- Layout ---- */
--maxw: 1480px;
--pad: clamp(20px, 4vw, 64px);
--section-y: clamp(60px, 9vw, 130px);
/* ---- Sitewide image tone (subtle sepia + slight desaturate + slight fade) ---- */
--img-tone: sepia(0.2) saturate(0.95) opacity(0.9);
/* ---- Motion ---- */
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-firm: cubic-bezier(0.65, 0, 0.35, 1);
--ease-curtain: cubic-bezier(0.77, 0, 0.175, 1);
/* ---- Default theme: dark burgundy (homepage, venue) ---- */
--surface: var(--brand-burgundy);
--surface-soft: var(--brand-burgundy-soft);
--surface-deep: var(--brand-burgundy-deep);
--text: var(--brand-cream);
--text-strong: var(--cream-strong);
--text-muted: var(--cream-muted);
--text-dim: var(--cream-dim);
--line: var(--cream-line);
--header-bg: rgba(42, 15, 24, 0.88);
--tile-fallback: #3c1b25;
}
/* ---- Light theme: dusty rose (weddings, location, quarters, beach-house) ---- */
[data-theme="light"] {
--surface: var(--brand-rose);
--surface-soft: var(--brand-rose-soft);
--surface-deep: var(--brand-burgundy-deep); /* footer + menu still burgundy */
--text: var(--brand-burgundy);
--text-strong: var(--ink-strong);
--text-muted: var(--ink-muted);
--text-dim: var(--ink-dim);
--line: var(--ink-line);
--header-bg: rgba(198, 177, 172, 0.92);
--tile-fallback: #a8918c;
}
/* ---- Oat theme: warm oat (enquiries) ---- */
[data-theme="oat"] {
--brand-oat: #d7ceba;
--brand-oat-soft: #ddd5c3;
--surface: var(--brand-oat);
--surface-soft: var(--brand-oat-soft);
--surface-deep: var(--brand-burgundy-deep); /* footer + menu still burgundy */
--text: var(--brand-burgundy);
--text-strong: var(--ink-strong);
--text-muted: var(--ink-muted);
--text-dim: var(--ink-dim);
--line: var(--ink-line);
--header-bg: rgba(215, 206, 186, 0.92);
--tile-fallback: #bdb198;
}
/* ---- Bone theme: warm bone white (weddings) ---- */
[data-theme="bone"] {
--surface: var(--brand-bone);
--surface-soft: var(--brand-bone-soft);
--surface-deep: var(--brand-burgundy-deep); /* footer + menu still burgundy */
--text: var(--brand-burgundy);
--text-strong: var(--ink-strong);
--text-muted: var(--ink-muted);
--text-dim: var(--ink-dim);
--line: var(--ink-line);
--header-bg: rgba(239, 231, 214, 0.92);
--tile-fallback: #c9bda4;
}
/* ---- Stone theme: cool grey-blue (beach house) ---- */
[data-theme="stone"] {
--brand-stone: #b9b9b9;
--brand-stone-soft: #c1c1c1;
--surface: var(--brand-stone);
--surface-soft: var(--brand-stone-soft);
--surface-deep: var(--brand-burgundy-deep);
--text: var(--brand-burgundy);
--text-strong: var(--ink-strong);
--text-muted: var(--ink-muted);
--text-dim: var(--ink-dim);
--line: var(--ink-line);
--header-bg: rgba(185, 185, 185, 0.92);
--tile-fallback: #a8a8a8;
}
/* ---- Gold theme: dusty gold (location) ---- */
[data-theme="gold"] {
--brand-gold: #c4a274;
--brand-gold-soft: #cdac82;
--surface: var(--brand-gold);
--surface-soft: var(--brand-gold-soft);
--surface-deep: var(--brand-burgundy-deep);
--text: var(--brand-burgundy);
--text-strong: var(--ink-strong);
--text-muted: var(--ink-muted);
--text-dim: var(--ink-dim);
--line: var(--ink-line);
--header-bg: rgba(196, 162, 116, 0.92);
--tile-fallback: #a8895f;
}
/* ---- Slate theme: muted blue-grey (backdrops) ---- */
[data-theme="slate"] {
--brand-slate: #502e2e;
--brand-slate-soft: #898c95;
--surface: var(--brand-slate);
--surface-soft: var(--brand-slate-soft);
--surface-deep: var(--brand-burgundy-deep);
--text: var(--brand-cream);
--text-strong: var(--cream-strong);
--text-muted: var(--cream-muted);
--text-dim: var(--cream-dim);
--line: var(--cream-line);
--header-bg: rgba(125, 128, 137, 0.92);
--tile-fallback: #6c6f78;
}
/* ============================================================ 3. Typography */
/* ONE rule per heading / element. Pages should not redefine these. */
h1, h2, h3, h4, p { margin: 0; }
h1 {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-h1);
line-height: 0.98;
letter-spacing: -1px;
color: var(--text);
}
/* Display variant for full-bleed page heroes */
.h-display, h1.display {
font-size: var(--fs-display);
}
h2 {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-h2);
line-height: 1;
letter-spacing: -0.5px;
color: var(--text);
}
h3 {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-h3);
line-height: 1.05;
letter-spacing: -0.4px;
color: var(--text);
}
h4 {
font-family: var(--sans);
font-weight: 500;
font-size: var(--fs-eyebrow-sm);
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--text);
}
p {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--text);
}
/* Composition classes — use these instead of bespoke per-section type rules */
.eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
.lede {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-lede);
line-height: 1.45;
letter-spacing: -0.2px;
color: var(--text);
max-width: 540px;
margin: 0;
}
.lede--lg {
font-size: var(--fs-lede-lg);
line-height: 1.35;
}
.body-lg {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-body-lg);
line-height: 1.55;
color: var(--text);
}
.body {
font-family: var(--serif);
font-weight: 300;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--text-muted);
}
.body em, .body b, .body strong { color: var(--text); font-weight: 400; font-style: italic; }
.caption {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-caption);
color: var(--text-dim);
}
/* ============================================================ 4. Layout */
.container { max-width: var(--maxw); margin: 0 auto; }
section { padding: var(--section-y) var(--pad); }
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 120px);
align-items: start;
}
.grid-2--asym {
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 6vw, 100px);
}
.grid-2--asym-lead {
grid-template-columns: 1.6fr 1fr;
gap: clamp(36px, 8vw, 140px);
}
@media (max-width: 760px) {
.grid-2,
.grid-2--asym,
.grid-2--asym-lead { grid-template-columns: 1fr; gap: 28px; }
}
.justify-end { justify-self: end; }
/* ============================================================ 5. Chrome */
/* Header, full-screen menu, footer — identical across every page. */
/* ---------- Skip-link ---------- */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--brand-burgundy);
color: var(--brand-cream);
padding: 12px 18px;
font-family: var(--sans);
font-size: var(--fs-eyebrow-sm);
letter-spacing: 2px;
text-transform: uppercase;
z-index: 200;
}
.skip-link:focus-visible { left: 16px; top: 16px; }
/* ---------- Header ---------- */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 24px var(--pad);
display: flex; align-items: center; justify-content: space-between;
color: var(--text);
background: transparent;
backdrop-filter: none;
will-change: transform;
transition:
transform 0.35s ease,
color 0.35s ease,
padding 0.3s ease;
}
/* Surface-coloured fill that fades out at the bottom — only shown once the
user has scrolled past the top (i.e. when the scroll-up reveal kicks in). */
.site-header::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: calc(100% + 110px);
background: linear-gradient(
to bottom,
var(--header-fill, var(--surface)) 0%,
var(--header-fill, var(--surface)) 28%,
transparent 100%
);
opacity: 0;
transition: opacity 0s ease; /* instant fade-out (default state) */
pointer-events: none;
z-index: -1;
}
/* Only show the gradient when the header is revealed (i.e. scrolled up).
The fade-in transition is scoped here so scroll-down hides instantly. */
.site-header.is-scrolled:not(.is-hidden)::before {
opacity: 1;
transition: opacity 0.35s ease;
}
.site-header.is-scrolled {
padding-top: 14px; padding-bottom: 14px;
}
.site-header.is-hidden {
transform: translateY(-100%);
}
/* When the header sits over a dark hero on light-theme pages, force cream on
it until it scrolls onto the rose surface. Add data-header="over-dark" on
the body. */
[data-header="over-dark"] .site-header { color: var(--brand-cream); }
[data-header="over-dark"] .site-header.is-scrolled { color: var(--text); }
.site-header .logo { display: inline-flex; align-items: center; line-height: 0; color: inherit; }
.site-header .logo svg { width: 40px; height: auto; fill: currentColor; display: block; }
.site-header .actions { display: flex; align-items: center; gap: 14px; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans);
font-weight: 500;
font-size: var(--fs-eyebrow-sm);
letter-spacing: 2.4px;
text-transform: uppercase;
padding: 10px 20px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--text); color: var(--surface); border-color: var(--text); }
[data-header="over-dark"] .site-header:not(.is-scrolled) .btn {
border-color: rgba(229, 222, 213, 0.55);
}
[data-header="over-dark"] .site-header:not(.is-scrolled) .btn:hover {
background: var(--brand-cream); color: var(--brand-burgundy); border-color: var(--brand-cream);
}
.icon-btn {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
color: inherit;
}
.icon-btn svg { width: 30px; height: 30px; }
/* ---------- Full-screen menu (always burgundy / cream) ---------- */
.menu {
position: fixed; inset: 0; z-index: 110;
background: var(--brand-burgundy);
color: var(--brand-cream);
transform: translateY(-100%);
transition: transform 0.55s var(--ease-firm), visibility 0s linear 0.55s;
will-change: transform;
display: flex; flex-direction: column;
visibility: hidden;
}
.menu.is-open {
transform: translateY(0);
visibility: visible;
transition: transform 0.55s var(--ease-firm), visibility 0s linear 0s;
}
.menu-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 24px var(--pad);
}
.menu-bar .logo { color: var(--brand-cream); line-height: 0; display: inline-flex; }
.menu-bar .logo svg { width: 40px; fill: currentColor; display: block; }
.menu-body {
flex: 1;
padding: clamp(20px, 4vw, 64px) var(--pad) clamp(40px, 5vw, 72px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
overflow-y: auto;
}
.menu-list { display: flex; flex-direction: column; gap: clamp(22px, 3.4vw, 44px); }
.menu-list > li > a,
.menu-list > li > button {
font-family: var(--serif);
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.1;
color: var(--brand-cream);
font-weight: 300;
letter-spacing: -0.4px;
display: inline-block;
padding: 0;
text-align: left;
transition: opacity 0.25s ease, color 0.25s ease;
}
.menu-list > li > a:hover,
.menu-list > li > button:hover { opacity: 0.7; }
.menu-list > li.is-expanded > button { color: var(--cream-dim); }
.submenu {
display: flex; flex-direction: column;
gap: clamp(22px, 3.4vw, 44px);
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease;
}
.submenu.is-open { opacity: 1; pointer-events: auto; }
.submenu li a {
font-family: var(--serif);
font-size: clamp(30px, 4.4vw, 60px);
font-style: italic;
line-height: 1.1;
color: var(--brand-cream);
font-weight: 300;
letter-spacing: -0.4px;
transition: opacity 0.2s ease;
}
.submenu li a:hover { opacity: 0.7; }
/* Entrance stagger */
.menu .menu-list > li,
.menu .submenu li {
opacity: 0; transform: translateY(18px);
transition: opacity 0.45s ease, transform 0.55s var(--ease-firm);
}
.menu.is-open .menu-list > li {
opacity: 1; transform: translateY(0);
transition-delay: calc(0.12s + var(--i, 0) * 0.08s);
}
.menu.is-open .submenu.is-open li {
opacity: 1; transform: translateY(0);
transition-delay: calc(0.08s + var(--i, 0) * 0.07s);
}
@media (max-width: 760px) {
.menu-body { grid-template-columns: 1fr; }
.submenu { padding-left: 18px; }
.submenu li a { font-size: clamp(22px, 6vw, 30px); }
}
/* ---------- Footer (always burgundy / cream) ---------- */
.site-footer {
padding: clamp(60px, 7vw, 110px) var(--pad) clamp(40px, 5vw, 70px);
border-top: 1px solid var(--cream-line);
background: var(--surface-deep);
color: var(--brand-cream);
position: relative; z-index: 2;
}
.site-footer .grid {
display: grid;
grid-template-columns: 1fr 250px 250px;
gap: 40px;
max-width: var(--maxw); margin: 0 auto;
align-items: start;
}
.site-footer .brand {
align-self: stretch;
display: flex;
flex-direction: column;
}
.site-footer .brand .logo {
color: var(--brand-cream);
display: block;
line-height: 0;
align-self: flex-start;
position: relative;
top: -50px;
}
.site-footer .brand .logo svg {
display: block;
width: 40px;
height: auto;
fill: currentColor;
}
.site-footer .brand .tagline {
font-family: var(--sans);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: 2.4px;
text-transform: uppercase;
font-style: normal;
line-height: 1.5;
color: var(--cream-muted);
margin: 0;
margin-top: auto;
text-align: left;
}
.site-footer h4 {
color: var(--brand-cream);
margin: 0 0 18px;
line-height: 1;
}
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer a,
.site-footer li {
font-family: var(--sans);
font-size: var(--fs-body-sm);
letter-spacing: 0.3px;
color: var(--cream-muted);
}
.site-footer a:hover { color: var(--brand-cream); }
.site-footer .colophon {
max-width: var(--maxw); margin: 50px auto 0;
display: flex; justify-content: space-between;
font-size: var(--fs-eyebrow);
color: var(--cream-dim);
border-top: 1px solid rgba(229, 222, 213, 0.1);
padding-top: 24px;
letter-spacing: 0.3px;
}
/* Design credit (colophon) — slightly dimmer than the rest */
.site-footer .colophon .design-credit,
.site-footer .colophon .design-credit a { color: inherit; opacity: 0.65; }
.site-footer .colophon .design-credit a:hover { opacity: 1; }
@media (max-width: 760px) {
/* Stack footer columns: brand, then navigation, then enquiries */
.site-footer .grid { grid-template-columns: 1fr; gap: 30px; }
.site-footer .brand { grid-column: 1 / -1; margin-bottom: 22px; }
.site-footer .colophon { flex-direction: column; gap: 10px; }
}
/* ============================================================ 6. Heroes */
/* Three hero shapes the site uses, all sharing one set of typography vars. */
/* ---------- Full-bleed media hero (homepage) ---------- */
.hero {
position: relative;
height: calc(100vh - clamp(12px, 1.4vw, 24px));
min-height: calc(620px - 12px);
margin: clamp(6px, 0.7vw, 12px);
border-radius: 3px;
overflow: hidden;
overflow: hidden;
background-color: #5d4530;
z-index: 0;
}
.hero-media {
position: absolute; inset: 0;
background-size: cover;
background-position: center 40%;
will-change: transform;
}
.hero-title {
position: absolute;
left: var(--pad); right: var(--pad);
bottom: clamp(16px, 3vh, 44px);
line-height: 0;
color: var(--brand-cream);
pointer-events: none; user-select: none;
will-change: transform;
}
.hero-title svg { width: 100%; height: auto; display: block; fill: currentColor; }
.hero-title img.hero-title__img { width: 100%; height: auto; display: block; }
/* Two wordmark variants: inline (single line) for desktop, stacked (two
lines) for mobile. Selectors below carry the same specificity as
`.hero-title svg` above so the display rules in the mobile media query
reliably win the cascade. */
.hero-title svg.hero-title__stacked { display: none; }
/* ---------- Display media hero (weddings, beach-house, quarters) ---------- */
/* All padding lives on the section itself (shorthand fully overrides the */
/* global `section` rule). The inner is a flex item that fills the */
/* section's content area, so title aligns horizontally with content */
/* in the sections below and the foot reliably pins to the bottom. */
.hero-display {
position: relative;
height: 100vh;
min-height: 640px;
overflow: hidden;
padding: clamp(200px, 19vw, 260px) var(--pad) clamp(56px, 7vh, 100px);
display: flex;
flex-direction: column;
background-color: #15100e;
color: var(--brand-cream);
z-index: 0;
}
.hero-display .hero-media {
position: absolute; inset: 0; z-index: 0;
background-color: #15100e;
}
.hero-display .hero-media--bw { filter: var(--img-tone) grayscale(100%) contrast(1.05); }
.hero-display .hero-inner {
position: relative; z-index: 1;
flex: 1; width: 100%;
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-direction: column;
}
.hero-display h1 {
font-size: clamp(32px, 4.2vw, 60px);
letter-spacing: -0.5px;
color: var(--brand-cream);
max-width: 14ch;
}
.hero-display .hero-foot {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 80px);
align-items: end;
}
.hero-display .lede,
.hero-display .lede--lg {
color: var(--brand-cream);
justify-self: end;
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
max-width: 46ch;
}
/* Useful links column on hero */
.useful-links { width: 100%; }
.useful-links .eyebrow { color: var(--text); margin-bottom: 18px; }
.useful-links ul { display: flex; flex-direction: column; gap: 8px; }
.useful-links a {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(16px, 1.2vw, 19px);
color: inherit;
transition: opacity 0.2s ease;
}
.useful-links a:hover { opacity: 0.7; }
@media (max-width: 760px) {
.hero-display { min-height: 100svh; }
.hero-display h1 { font-size: clamp(40px, 11vw, 70px); max-width: 100%; }
.hero-display .hero-foot { grid-template-columns: 1fr; gap: 32px; }
.hero-display .lede,
.hero-display .lede--lg { justify-self: start; max-width: 100%; }
}
/* Bone / Stone themes: inset the hero so the page surface shows as a border around it */
[data-theme="bone"] .hero-display,
[data-theme="stone"] .hero-display {
margin: clamp(6px, 0.7vw, 12px);
height: calc(100vh - clamp(12px, 1.4vw, 24px));
min-height: calc(640px - 12px);
border-radius: 3px;
}
/* Bone theme: hero text matches the page surface (#ddd9d2) instead of cream */
[data-theme="bone"] .hero-display,
[data-theme="bone"] .hero-display h1,
[data-theme="bone"] .hero-display .lede,
[data-theme="bone"] .hero-display .lede--lg,
[data-theme="bone"] .hero-display .useful-links a,
[data-theme="bone"] .hero-display .useful-links .eyebrow { color: var(--brand-bone); }
[data-theme="bone"] [data-header="over-dark"] .site-header { color: var(--brand-bone); }
[data-theme="bone"] [data-header="over-dark"] .site-header.is-scrolled { color: var(--text); }
/* ---------- Solid display hero (location, venue) ---------- */
/* Mirrors the .hero-display structure exactly so the title / useful-links */
/* / intro paragraph sit in the same place across every page using either */
/* hero, and align horizontally with content in the sections below. */
.hero-solid {
position: relative;
height: 100vh;
min-height: 640px;
overflow: hidden;
padding: clamp(200px, 19vw, 260px) var(--pad) clamp(56px, 7vh, 100px);
display: flex;
flex-direction: column;
}
.hero-solid .container {
flex: 1; width: 100%;
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-direction: column;
}
.hero-solid h1 {
font-size: clamp(32px, 4.2vw, 60px);
letter-spacing: -0.5px;
max-width: 14ch;
}
.hero-solid .top-row {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(30px, 5vw, 90px);
align-items: start;
}
.hero-solid .bottom-row {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 80px);
align-items: end;
}
.hero-solid .useful-links a { color: var(--text); }
.hero-solid .useful-links .eyebrow { color: var(--text); }
.hero-solid .lede,
.hero-solid .lede--lg {
justify-self: end;
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
max-width: 46ch;
}
@media (max-width: 760px) {
.hero-solid { height: auto; min-height: 100svh; }
.hero-solid .top-row,
.hero-solid .bottom-row { grid-template-columns: 1fr; gap: 32px; }
.hero-solid .lede,
.hero-solid .lede--lg { justify-self: start; max-width: 100%; }
}
/* Reusable sketch illustration container */
.sketch {
width: 100%; max-width: 760px;
aspect-ratio: 5 / 3;
margin-left: auto;
margin-top: clamp(-80px, -7vw, -30px);
opacity: 0.95;
}
img.sketch {
aspect-ratio: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 760px) {
.sketch { max-width: 100%; margin-left: 0; margin-top: 0; }
}
/* Location page — split hero (heading + useful links left, large sketch right) */
.hero-solid--split .container { flex: 1; }
.hero-split {
flex: 1;
display: grid;
grid-template-columns: 1fr 1.8fr;
gap: clamp(30px, 5vw, 80px);
align-items: stretch;
width: 100%;
}
.hero-split__text {
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 80px);
}
.hero-split__text .useful-links { margin-top: auto; }
.hero-split__sketch {
aspect-ratio: auto;
width: 100%;
height: 100%;
max-height: 65vh;
max-width: 100%;
margin: 0 0 0 auto;
object-fit: contain;
object-position: right bottom;
}
.hero-solid--split {
padding-bottom: clamp(80px, 10vh, 140px);
}
@media (max-width: 760px) {
.hero-split { grid-template-columns: 1fr; gap: 32px; }
.hero-split__sketch { height: auto; object-position: center; aspect-ratio: 5 / 3; }
}
/* Below-hero content block that lifts up over the parallaxing hero. Used by
the homepage and the display-hero pages. */
.below-hero {
position: relative;
z-index: 2;
background: var(--surface);
padding-top: clamp(60px, 8vw, 100px);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* ============================================================ 7. Sections */
/* ---------- Welcome (homepage) ---------- */
.welcome { padding-top: clamp(90px, 12vw, 160px); }
/* ---------- Pitch row (image grid + copy below) ---------- */
.pitch { border-top: 2px solid var(--line); }
.pitch .images {
display: grid;
grid-template-columns: minmax(0, 1fr) 540px;
gap: clamp(18px, 3vw, 40px);
max-width: var(--maxw);
margin: clamp(60px, 8vw, 120px) auto 0;
align-items: start;
}
.pitch--reverse .images { grid-template-columns: 540px minmax(0, 1fr); }
.pitch .copy-row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 6vw, 90px);
align-items: start;
max-width: var(--maxw);
margin: 0 auto;
}
.pitch .copy { justify-self: end; max-width: 540px; }
.pitch .copy-side .useful-links { margin-top: clamp(28px, 3vw, 44px); }
.pitch .copy-side .useful-links .eyebrow { color: var(--text-dim); margin-bottom: 18px; }
.pitch .copy-side .useful-links a { color: var(--text); }
.tile {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover; background-position: center;
background-color: var(--tile-fallback);
filter: var(--img-tone);
}
img { filter: var(--img-tone); }
.hero-media,
.poster .shadow { filter: var(--img-tone); }
.trio-img,
.pair-img { filter: sepia(0.1) saturate(0.95) opacity(0.9) !important; }
.venue-preview__layer { filter: opacity(0.9); }
.tile.is-bw { filter: var(--img-tone) grayscale(1) contrast(1.05); }
.tile.is-blurred { filter: var(--img-tone) grayscale(1) blur(1px); }
.tile.is-wide { aspect-ratio: 16 / 10; }
.tile.is-portrait{ aspect-ratio: 3 / 4; }
/* Weddings pitch — left tile scaled to half size (proportionally less wide) */
#weddings .images > .tile:first-child { width: 65%; }
@media (max-width: 1100px) {
.pitch .images { grid-template-columns: 1.6fr 1fr; }
.pitch--reverse .images { grid-template-columns: 1fr 1.6fr; }
}
@media (max-width: 760px) {
.pitch .images { grid-template-columns: 1fr; }
.pitch .copy-row { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- Accommodation cards (two equal images flush to margins) ---------- */
.accommodation .acc-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
max-width: var(--maxw);
margin: clamp(60px, 8vw, 120px) auto 0;
align-items: start;
}
.acc-card {
display: block;
width: 100%;
}
.acc-card--left { justify-self: start; }
.acc-card--right { justify-self: end; }
.acc-card__media {
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
}
.acc-card .tile {
width: 100%;
aspect-ratio: 4 / 3;
filter: var(--img-tone);
transition: filter 0.7s var(--ease-soft, ease), transform 0.9s var(--ease-soft, ease);
}
@media (hover: hover) {
.acc-card__media:hover .tile,
.acc-card__media:focus-visible .tile {
filter: var(--img-tone) grayscale(0) contrast(1);
transform: scale(1.02);
}
}
.acc-meta {
margin-top: clamp(26px, 3vw, 42px);
}
.acc-meta h3 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.15;
margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.acc-meta p {
font-family: var(--sans);
font-size: clamp(14px, 1.05vw, 17px);
letter-spacing: 0.04em;
color: var(--text);
opacity: 1;
margin: 0 0 clamp(6px, 0.7vw, 10px);
line-height: 1.6;
}
.acc-meta p:last-of-type { margin-bottom: 0; }
.acc-meta .btn-text { margin-top: clamp(20px, 2.2vw, 30px); }
@media (max-width: 760px) {
.accommodation .acc-cards { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 60px); }
}
/* "Read more" underline link */
.btn-text {
display: inline-block;
font-family: var(--sans);
font-size: var(--fs-eyebrow-sm);
letter-spacing: 2.4px;
text-transform: uppercase;
font-weight: 500;
color: var(--text);
padding: 4px 0;
margin-top: clamp(28px, 3vw, 44px);
position: relative;
}
.btn-text::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor;
transform-origin: left center;
transition: transform 0.25s ease;
}
.btn-text:hover::after { transform: scaleX(0.6); }
/* Inline row of btn-text links */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 3vw, 36px);
align-items: center;
margin-top: clamp(28px, 3vw, 44px);
}
.btn-row .btn-text { margin-top: 0; }
/* ---------- Numbered venue list (homepage) ---------- */
.venues { padding-top: clamp(8px, 1.2vw, 20px); }
.welcome { padding-bottom: clamp(20px, 3vw, 50px); }
.venues-intro {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 6vw, 90px);
align-items: start;
margin-bottom: clamp(48px, 6vw, 90px);
}
.venues-intro .copy { justify-self: end; max-width: 540px; }
@media (max-width: 760px) {
.venues-intro .copy { justify-self: stretch; max-width: none; }
}
.venues .layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 120px);
align-items: stretch;
}
.venue-list {
display: grid;
grid-template-columns: 50px 1fr;
column-gap: clamp(24px, 4vw, 54px);
row-gap: clamp(22px, 3.5vw, 46px);
align-content: center;
}
.venue-list .idx {
font-family: var(--serif);
font-style: italic;
font-size: clamp(15px, 1.2vw, 18px);
color: var(--text-muted);
padding-top: 8px;
}
.venue-list .name {
font-family: var(--serif);
font-size: clamp(28px, 2.8vw, 42px);
line-height: 1.15;
color: var(--text);
font-weight: 300;
letter-spacing: -0.4px;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
}
html.has-js .venue-list.reveal-children.is-visible > .name:hover { opacity: 0.5; }
#venuePreviewLink {
display: block;
width: 100%;
justify-self: stretch;
align-self: start;
position: relative;
}
.venue-preview-wrap {
position: relative;
}
.venue-preview {
position: relative;
width: 100%;
aspect-ratio: 5 / 4;
background-color: transparent;
overflow: hidden;
}
.venue-preview__caption {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: clamp(-44px, -3vw, -16px);
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(24px, 4vw, 54px);
font-family: var(--sans, inherit);
font-size: clamp(14px, 1.05vw, 17px);
line-height: 1.5;
color: var(--text);
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.venue-preview__caption-meta {
display: flex;
flex-direction: column;
padding-left: clamp(16px, 2vw, 32px);
}
.venue-preview__caption-name,
.venue-preview__caption-sub {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
}
.venue-preview__caption.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.venue-preview__caption { display: none; }
}
.venue-preview__layer {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.6s ease-in-out;
will-change: opacity;
}
.venue-preview__layer.is-active { opacity: 1; }
/* When a sketch (mostly white) is shown, blend it with the page background
colour so white drops out — multiply effect. The background-color is set
inline by JS so it always matches the actual body background. */
.venue-preview__layer.is-blend-multiply {
background-blend-mode: multiply;
background-size: contain;
background-position: center;
}
@media (max-width: 900px) {
.venues .layout { grid-template-columns: 1fr; }
.venue-preview { order: -1; height: auto; aspect-ratio: 16/10; min-height: 0; }
.venues-intro { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- Quote band (homepage) ---------- */
.quote { padding: clamp(30px, 5vw, 70px) var(--pad) clamp(20px, 4vw, 60px); }
.quote p {
font-family: var(--serif);
font-size: clamp(22px, 2.6vw, 38px);
line-height: 1.45;
color: var(--text);
/* ---------- max-width: 24ch; ---------- */
margin: 0 auto;
font-weight: 300;
letter-spacing: 0.1px;
}
@media (max-width: 600px) { .quote p { max-width: none; } }
/* ---------- Two-column section (weddings, accommodation pages) ---------- */
.section { padding: clamp(50px, 7vw, 100px) var(--pad); }
.section + .section { border-top: 1px solid var(--line); }
.section .grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 120px);
align-items: start;
}
.section .body-display {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(22px, 2.3vw, 34px);
line-height: 1.32;
color: var(--text);
margin: 0;
max-width: 22ch;
letter-spacing: -0.3px;
}
.section .grid-2 .eyebrow { margin-bottom: clamp(24px, 2vw, 34px); }
@media (max-width: 760px) {
.section .grid { grid-template-columns: 1fr; gap: 36px; }
.section .body-display { max-width: 100%; font-size: 22px; }
}
/* ---------- Image band ---------- */
.image-band { padding: clamp(30px, 5vw, 70px) var(--pad); }
.image-band .media {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover; background-position: center;
background-color: var(--tile-fallback);
}
/* ---------- Intro / two-up lede + side links (quarters, beach-house) ---------- */
.intro-section {
padding: clamp(60px, 8vw, 110px) var(--pad) clamp(36px, 5vw, 70px);
}
.intro-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: clamp(36px, 8vw, 140px);
align-items: start;
}
.intro-lede {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(22px, 2.4vw, 36px);
line-height: 1.32;
letter-spacing: -0.3px;
color: var(--text);
max-width: 26ch;
margin: 0;
}
.intro-links {
display: flex; flex-direction: column;
gap: 6px;
text-align: right;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(15px, 1.15vw, 18px);
color: var(--text-muted);
}
.intro-links li.spacer { height: 12px; }
.intro-links a { color: var(--text-muted); transition: color 0.2s ease; }
.intro-links a:hover { color: var(--text); }
@media (max-width: 760px) {
.intro-grid { grid-template-columns: 1fr; gap: 28px; }
.intro-links { text-align: left; }
}
/* ---------- Gallery / carousel section wrapper ---------- */
.gallery-section { padding: clamp(20px, 3vw, 40px) var(--pad) clamp(40px, 6vw, 80px); }
/* ---------- Info section (quote text + accordion) ---------- */
.info-section {
padding: clamp(50px, 7vw, 100px) var(--pad);
border-top: 1px solid var(--line);
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 8vw, 140px);
align-items: start;
}
.quote-text {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(20px, 1.7vw, 26px);
line-height: 1.4;
letter-spacing: -0.2px;
color: var(--text);
max-width: 32ch;
margin: 0;
}
@media (max-width: 760px) {
.info-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* ---------- Poster (peeling clip-path) ---------- */
.poster { padding-top: clamp(50px, 7vw, 100px); padding-bottom: clamp(30px, 4vw, 60px); }
.poster-frame,
.poster .shadow {
width: 100%;
height: clamp(520px, 80vh, 820px);
background-size: cover; background-position: center;
background-color: var(--tile-fallback);
clip-path: inset(0 50% 0 50%);
will-change: clip-path;
}
.poster .shadow {
position: relative;
}
.poster .shadow::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.05));
pointer-events: none;
}
@keyframes openPoster {
from { clip-path: inset(0 50% 0 50%); }
to { clip-path: inset(0 0 0 0); }
}
@supports (animation-timeline: view()) {
.poster .shadow,
.poster-frame {
animation: openPoster linear both;
animation-timeline: view();
animation-range: entry 10% cover 55%;
}
}
.poster-section { padding: clamp(40px, 5vw, 80px) 0 0; }
/* ---------- Solid hero "v-hero" content layout (venue page) ---------- */
.about .grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: clamp(24px, 6vw, 100px);
align-items: start;
}
.about p { max-width: 540px; justify-self: end; color: var(--text-muted); }
.about p b, .about p strong { color: var(--text); font-weight: 400; font-style: italic; }
@media (max-width: 760px) {
.about .grid { grid-template-columns: 1fr; gap: 18px; }
}
/* Image row used by the venue page */
.image-row { padding: clamp(40px, 6vw, 90px) var(--pad); }
.image-row .grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(16px, 3vw, 40px);
}
.image-row .tile { aspect-ratio: 3 / 4; }
.image-row .tile.is-wide { aspect-ratio: 16 / 10; }
@media (max-width: 760px) {
.image-row .grid { grid-template-columns: 1fr; }
.image-row .tile,
.image-row .tile.is-wide { aspect-ratio: 4 / 3; }
}
/* ---------- Farm-row + map (location page) ---------- */
.farm-row {
padding-top: clamp(60px, 8vw, 120px);
padding-bottom: clamp(28px, 4vw, 56px);
border-top: 0;
border-bottom: 0;
}
.farm-row .grid {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: clamp(30px, 5vw, 90px);
align-items: start;
}
.farm-row__lead { display: flex; flex-direction: column; }
.farm-row__lead h3 { margin-bottom: clamp(64px, 8vw, 120px); }
.farm-row ul {
display: flex; flex-direction: column; gap: 6px;
max-width: 42ch;
}
.farm-row li, .farm-row a {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(15px, 1.1vw, 17px);
color: var(--text-muted);
}
.farm-row a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Mobile-only duplicate of the farm copy (sits below the map image) */
.farm-row--mobile-copy { display: none; }
@media (max-width: 760px) {
.farm-row .grid { grid-template-columns: 1fr; }
.farm-row ul { max-width: 100%; }
/* Swap copy and landscape image on mobile: hide the paragraph in the
grid, show the duplicate section below the map instead. */
.farm-row .grid .farm-row__copy { display: none; }
.farm-row--mobile-copy { display: block; padding-top: 0; }
}
.map-section { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 80px); }
.map-wrap {
position: relative; width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--tile-fallback);
}
.map-wrap img {
width: 100%; height: 100%;
object-fit: cover;
user-select: none; -webkit-user-drag: none;
}
.marker {
position: absolute;
transform: translate(-50%, -50%);
width: clamp(18px, 1.6vw, 24px);
height: clamp(18px, 1.6vw, 24px);
border-radius: 50%;
background: rgba(229, 222, 213, 0.9);
border: 1px solid rgba(42, 15, 24, 0.35);
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand-burgundy);
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
z-index: 2;
backdrop-filter: blur(2px);
}
.marker::before {
content: "+";
font-family: var(--serif);
font-weight: 300;
font-size: clamp(13px, 1.2vw, 17px);
line-height: 1;
}
.marker:hover, .marker:focus-visible, .marker.is-active {
transform: translate(-50%, -50%) scale(1.25);
background: var(--brand-cream);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
outline: none;
}
.tip {
position: absolute;
top: 50%;
left: calc(100% + 14px);
transform: translateY(-50%);
min-width: 220px; max-width: 260px;
padding: 14px 18px 16px;
background: rgba(42, 15, 24, 0.95);
color: var(--brand-cream);
text-align: left;
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 3;
}
.marker[data-side="left"] .tip { left: auto; right: calc(100% + 14px); }
.tip .tip-title {
font-family: var(--serif);
font-weight: 300;
font-size: 20px;
line-height: 1.15;
color: var(--brand-cream);
display: block; margin-bottom: 6px;
}
.tip .tip-desc {
font-family: var(--serif);
font-weight: 300;
font-size: 13px;
line-height: 1.5;
color: rgba(229, 222, 213, 0.78);
display: block;
}
.marker:hover .tip,
.marker:focus-visible .tip,
.marker.is-active .tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 760px) {
.tip {
left: 50% !important; right: auto !important;
top: calc(100% + 12px);
transform: translate(-50%, 0);
min-width: 180px;
}
.marker:hover .tip,
.marker:focus-visible .tip,
.marker.is-active .tip { transform: translate(-50%, 0); }
}
/* ---------- Te Mata O Rongokako (location page) ---------- */
.rongokako { padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(40px, 6vw, 90px); }
.legend { padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(40px, 6vw, 90px); }
.legend-row {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: clamp(32px, 5vw, 90px);
align-items: center;
}
.legend-copy {
justify-self: start;
max-width: 46ch;
}
/* When image precedes copy (image-left layout) */
.legend-img + .legend-copy {
justify-self: stretch;
max-width: 100%;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.55;
color: var(--text-muted);
}
.legend-copy p { margin: 0 0 20px; }
.legend-copy p:last-child { margin-bottom: 0; }
.legend-img {
width: 100%;
display: block;
aspect-ratio: 4/3;
object-fit: cover;
}
/* Portrait image when image is on the left */
.legend-row > .legend-img:first-child {
aspect-ratio: 3/4;
width: 55%;
}
@media (max-width: 760px) {
.legend-row { grid-template-columns: 1fr; }
.legend-img { order: -1; }
}
.rongokako-row {
display: grid;
grid-template-columns: 1fr 0.75fr;
gap: clamp(24px, 4vw, 80px);
align-items: start;
}
.rongokako h2 { margin: 0; }
.rongokako-copy {
justify-self: stretch;
max-width: 100%;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
color: var(--text-muted);
}
.rongokako-copy p { margin: 0 0 18px; }
.rongokako-copy p:last-child { margin-bottom: 0; }
.rongokako-copy em { font-style: italic; color: var(--text); }
@media (max-width: 760px) {
.rongokako-row { grid-template-columns: 1fr; gap: 24px; }
.rongokako-copy { justify-self: start; max-width: 100%; }
}
/* ---------- Numbered location items (location page) ---------- */
.locations { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--line); }
.locations-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 120px);
align-items: start;
padding-bottom: clamp(48px, 6vw, 90px);
}
.locations-intro h2 { margin: 0; }
.locations-intro .copy {
justify-self: end;
max-width: 46ch;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.6;
color: var(--text-muted);
}
.locations-intro .copy p { margin: 0; }
@media (max-width: 760px) {
.locations-intro { grid-template-columns: 1fr; gap: 24px; }
.locations-intro .copy { justify-self: start; max-width: 100%; }
}
.loc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 48px);
padding-bottom: clamp(36px, 5vw, 72px);
}
.loc-grid-heading {
font-size:30px;
}
.loc-item {
display: flex;
flex-direction: column;
gap: clamp(36px, 4.5vw, 64px);
padding: 0;
border: 0;
align-items: stretch;
}
.loc-item:last-child { border-bottom: 0; }
.loc-item .info { display: flex; flex-direction: column; padding: 0 clamp(4px, 1vw, 14px); }
.loc-item .idx {
font-family: var(--serif);
font-style: italic;
font-size: clamp(18px, 1.4vw, 22px);
color: var(--text-dim);
margin-right: 12px;
}
.loc-item h3 { display: inline; }
.loc-item .type {
margin: clamp(22px, 2.4vw, 34px) 0 clamp(26px, 2.8vw, 38px);
font-family: var(--sans);
font-size: var(--fs-eyebrow);
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--text);
font-weight: 500;
}
.loc-item .desc {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--text-muted);
margin: 0 0 clamp(28px, 3vw, 40px);
max-width: none;
}
.loc-item .desc b { color: var(--text); font-weight: 400; font-style: italic; }
.loc-item .meta {
font-family: var(--serif);
font-weight: 300;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.6;
color: var(--text-muted);
}
.loc-item .media {
order: -1;
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover; background-position: center;
background-color: var(--tile-fallback);
}
.loc-item .media.is-tiles {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(8px, 1vw, 14px);
aspect-ratio: auto;
background: transparent;
}
/* Sketch images blended with page background — knocks out white via multiply. */
.loc-item .media.is-blend-multiply {
background-color: var(--surface);
background-blend-mode: multiply;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.loc-item .media.is-tiles > div {
aspect-ratio: 3 / 4;
background-size: cover; background-position: center;
background-color: var(--tile-fallback);
}
@media (max-width: 900px) {
.loc-grid {
grid-template-columns: 1fr;
gap: clamp(36px, 5vw, 72px);
}
}
/* Stacked rows — info on the left, image on the right, one per row */
.loc-rows {
grid-template-columns: 1fr;
gap: clamp(48px, 7vw, 100px);
}
.loc-rows .loc-item {
display: grid;
grid-template-columns: 1fr 0.25fr 1fr;
gap: clamp(36px, 5vw, 90px);
align-items: center;
}
.loc-rows .loc-item .media { order: 0; grid-column: 3; }
@media (max-width: 760px) {
.loc-rows .loc-item { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
.loc-rows .loc-item .media { order: -1; grid-column: auto; }
}
/* Text column flush to the page margin — no inset padding */
.loc-rows .info { padding-left: 0; }
/* Link sits at its natural width so the underline matches the text */
.loc-rows .info .btn-text { align-self: start; }
/* No inset divider beneath the planners grid */
#approved-planners .loc-grid { border-bottom: 0; padding-bottom: 0; }
/* Divider between each planner/vendor row — full viewport width */
#approved-planners .loc-rows .loc-item { position: relative; padding-bottom: clamp(48px, 7vw, 100px); }
#approved-planners .loc-rows .loc-item::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 1px;
background: var(--line);
}
#approved-planners .loc-rows .loc-item:last-child { padding-bottom: 0; }
#approved-planners .loc-rows .loc-item:last-child::after { display: none; }
/* Planner body copy matches the intro copy size */
#approved-planners .loc-item .desc { font-size: clamp(16px, 1.25vw, 19px); }
/* Intro copy shares the column edge of the images below it */
#suggested-vendors .locations-intro {
grid-template-columns: 1fr 0.25fr 1fr;
gap: clamp(36px, 5vw, 90px);
}
#suggested-vendors .locations-intro .copy { grid-column: 3; justify-self: stretch; max-width: none; }
@media (max-width: 760px) {
#suggested-vendors .locations-intro { grid-template-columns: 1fr; }
#suggested-vendors .locations-intro .copy { grid-column: auto; }
}
/* Venues carousel (location page) */
.loc-carousel {
padding-bottom: clamp(36px, 5vw, 72px);
}
.loc-carousel .carousel-slide { cursor: default; }
.loc-carousel .carousel-slide .loc-item { height: 100%; }
/* Weddings venues (Wetlands / Woolshed): two columns side by side on
desktop (controls hidden, both slides visible), 1-per-view slider with
arrows beneath on mobile. */
.venues-carousel { padding-bottom: clamp(36px, 5vw, 72px); }
/* Weddings planning section: on mobile the FAQ list stacks below the
planners & vendors link — give the link breathing room beneath it. */
@media (max-width: 760px) {
.btn-text.planning-link {
display: inline-block;
margin-bottom: clamp(36px, 10vw, 64px);
}
}
.venues-carousel .carousel-slide { cursor: default; }
.venues-carousel .carousel-slide .loc-item { height: 100%; }
@media (min-width: 761px) {
.venues-carousel .carousel-slide {
flex-basis: calc((100% - clamp(14px, 1.8vw, 28px)) / 2);
}
.venues-carousel .carousel-controls { display: none; }
}
/* ============================================================ 8. Components */
/* ---------- FAQ list (location, venue) ---------- */
.faq {
padding-top: clamp(40px, 6vw, 80px);
padding-bottom: clamp(60px, 9vw, 120px);
}
.faq h2 { margin: 0 0 clamp(30px, 5vw, 60px); }
.faq-list details {
display: grid;
grid-template-columns: 60px 1fr 30px;
gap: 40px;
align-items: start;
padding: 24px 0;
border-bottom: 1px solid var(--line);
cursor: pointer;
}
.faq-list details:first-of-type { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; display: contents; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .num {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--text-dim);
padding-top: 10px;
font-weight: 300;
}
.faq-list .q {
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.25;
color: var(--text);
font-weight: 300;
}
.faq-list .toggle {
font-family: var(--serif);
font-size: 28px;
line-height: 1;
color: var(--text);
text-align: right;
transition: transform 0.45s var(--ease-soft);
padding-top: 8px;
font-weight: 300;
}
.faq-list details.is-open .toggle { transform: rotate(45deg); }
.faq-list .answer {
grid-column: 2;
font-family: var(--serif);
font-weight: 300;
font-size: 16px;
line-height: 1.65;
color: var(--text-muted);
overflow: hidden;
max-width: 58ch;
}
.faq-list details.is-open .answer {
margin-top: 16px;
}
@media (max-width: 700px) {
.faq-list details { grid-template-columns: 36px 1fr 22px; gap: 18px; }
}
/* ---------- Mini-FAQ / accordion (weddings, quarters, beach-house) ---------- */
.accordion details,
.mini-faq details { border-bottom: 1px solid var(--line); }
.accordion details:first-of-type,
.mini-faq details:first-of-type { border-top: 1px solid var(--line); }
.accordion summary,
.mini-faq summary {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 2px; cursor: pointer;
list-style: none; gap: 20px;
}
.accordion summary::-webkit-details-marker,
.mini-faq summary::-webkit-details-marker { display: none; }
.accordion .acc-q,
.mini-faq .mini-q {
font-family: var(--sans);
font-size: var(--fs-eyebrow);
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--text);
font-weight: 500;
}
.accordion .acc-toggle,
.mini-faq .mini-toggle {
font-family: var(--serif);
font-size: 24px;
line-height: 1;
color: var(--text);
font-weight: 300;
transition: transform 0.45s var(--ease-soft);
}
.accordion details.is-open .acc-toggle,
.mini-faq details.is-open .mini-toggle { transform: rotate(45deg); }
.accordion .acc-answer,
.mini-faq .mini-answer {
overflow: hidden;
font-family: var(--serif);
font-weight: 300;
font-size: 18px;
line-height: 1.65;
color: var(--text-muted);
max-width: 58ch;
}
.accordion details.is-open .acc-answer,
.mini-faq details.is-open .mini-answer {
padding: 0 2px 22px;
}
/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
display: flex;
gap: clamp(14px, 1.8vw, 28px);
transition: transform 0.6s var(--ease-firm);
will-change: transform;
}
.carousel-slide {
flex: 0 0 calc((100% - clamp(14px, 1.8vw, 28px) * 2) / 3);
display: block; cursor: pointer;
background: transparent;
text-align: left;
font-family: inherit;
color: inherit;
}
.carousel-slide .thumb {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: rgba(42, 15, 24, 0.10);
transition: opacity 0.3s ease, transform 0.6s var(--ease-soft);
}
.carousel-slide:hover .thumb { opacity: 0.92; }
.carousel-slide .label {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: var(--fs-eyebrow-sm);
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--text);
font-weight: 500;
}
.carousel-controls {
display: flex; justify-content: flex-end;
gap: 12px;
margin-top: clamp(20px, 2.5vw, 30px);
}
.carousel-btn {
width: 46px; height: 46px;
border: 1px solid var(--line);
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.carousel-btn:hover:not([disabled]) {
background: var(--text); color: var(--surface); border-color: var(--text);
}
.carousel-btn[disabled] { opacity: 0.32; cursor: not-allowed; }
.carousel-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
@media (max-width: 760px) { .carousel-slide { flex-basis: 100%; } }
@media (min-width: 761px) and (max-width: 1100px) {
.carousel-slide { flex-basis: calc((100% - clamp(14px, 1.8vw, 28px)) / 2); }
}
/* Accommodation galleries: no arrows, so wrap on tablet */
@media (min-width: 761px) and (max-width: 1100px) {
.gallery-section .carousel-track { flex-wrap: wrap; transform: none !important; }
}
/* Accommodation galleries: stack vertically on mobile (no arrows) */
@media (max-width: 760px) {
.gallery-section .carousel-track {
flex-direction: column;
transform: none !important;
gap: clamp(20px, 4vw, 28px);
}
.gallery-section .carousel-slide { flex-basis: auto; }
}
/* ---------- Lightbox ---------- */
.lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(229, 222, 213, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: none;
align-items: center; justify-content: center;
padding: clamp(20px, 4vw, 60px);
opacity: 0;
transition: opacity 0.35s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox-stage {
position: relative;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.lightbox-image {
display: block;
width: auto; height: auto;
max-width: calc(100% - clamp(120px, 18vw, 200px));
max-height: calc(100% - clamp(210px, 26vh, 290px));
object-fit: contain;
background: transparent;
opacity: 1;
transition: opacity 0.45s var(--ease-soft);
}
.lightbox-caption-area {
transition: opacity 0.35s ease;
}
.lightbox.is-fading .lightbox-image,
.lightbox.is-fading .lightbox-caption-area { opacity: 0; }
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--brand-burgundy);
border: 1px solid rgba(42, 15, 24, 0.45);
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
cursor: pointer;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: var(--brand-burgundy);
color: var(--brand-cream);
border-color: var(--brand-burgundy);
}
.lightbox-close { top: clamp(8px, 2vw, 24px); right: clamp(8px, 2vw, 24px); }
.lightbox-prev { left: clamp(8px, 1.5vw, 24px); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(8px, 1.5vw, 24px); top: 50%; transform: translateY(-50%); }
.lightbox-caption-area {
position: absolute;
bottom: clamp(20px, 3vw, 40px); left: 50%;
transform: translateX(-50%);
text-align: center;
max-width: min(80%, 720px);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.lightbox-counter {
font-family: var(--sans);
font-size: var(--fs-eyebrow);
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--brand-burgundy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.lightbox-credit {
font-family: var(--serif);
font-style: italic;
font-size: var(--fs-body-sm);
color: var(--brand-burgundy);
opacity: 0.8;
}
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg {
width: 22px; height: 22px; stroke: currentColor; fill: none;
}
@media (max-width: 760px) {
.lightbox { padding: clamp(12px, 3vw, 24px); }
.lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
.lightbox-image {
max-width: calc(100% - 96px);
max-height: calc(100% - 210px);
}
}
/* ---------- Curtains intro animation (homepage) ---------- */
.curtains {
position: fixed; inset: 0; z-index: 120;
pointer-events: none;
display: flex;
}
.curtain {
flex: 1;
background: var(--brand-burgundy);
position: relative;
overflow: hidden;
transition: transform 1.6s var(--ease-curtain);
}
.curtains.is-open .curtain.left { transform: translateX(-101%); }
.curtains.is-open .curtain.right { transform: translateX( 101%); }
.curtain .brand-mark {
position: absolute;
top: 50%;
width: min(220px, 28vw);
aspect-ratio: 1 / 1;
height: auto;
color: var(--brand-cream);
fill: currentColor;
opacity: 0;
animation: brand-mark-in 1.4s 0.4s ease forwards;
}
.curtain .brand-mark > * { fill: currentColor; }
.curtain.left .brand-mark { right: 0; transform: translate( 50%, -50%); }
.curtain.right .brand-mark { left: 0; transform: translate(-50%, -50%); }
@keyframes brand-mark-in { to { opacity: 1; } }
/* ============================================================ 9. Animations */
/* Reveal on scroll (elements fade up once when entering the viewport).
--reveal-stagger is set per-element by JS for batched entries so sibling
blocks cascade rather than fire simultaneously. */
.reveal {
transition:
opacity 1.6s var(--ease-soft),
transform 1.6s var(--ease-soft);
transition-delay: calc(var(--reveal-stagger, 0) * 0.18s);
will-change: opacity, transform;
}
html.has-js .reveal { opacity: 0; transform: translateY(34px); }
html.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Children stagger reveals */
html.has-js .reveal-children > * {
opacity: 0; transform: translateY(28px);
transition:
opacity 1.1s var(--ease-soft),
transform 1.1s var(--ease-soft);
transition-delay: calc(var(--d, 0) * 0.09s);
}
html.has-js .reveal-children.is-visible > * {
opacity: 1; transform: translateY(0);
}
/* Page transitions */
@keyframes pageEnter {
from { transform: translateY(48px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pageLeave {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-32px); opacity: 0; }
}
.page-enter { animation: pageEnter 0.8s var(--ease-soft) both; }
.page-leave {
animation: pageLeave 0.45s cubic-bezier(0.7, 0, 0.84, 0) both;
pointer-events: none;
}
/* ============================================================ 10. A11y */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ============================================================ Page title */
/* Compact page header for pages that go straight into content (used by */
/* backdrops.html). Sits below the fixed header. */
.page-title {
position: relative;
height: 100vh;
min-height: 640px;
overflow: hidden;
padding: clamp(200px, 19vw, 260px) var(--pad) clamp(56px, 7vh, 100px);
display: flex;
flex-direction: column;
}
.page-title .container {
flex: 1; width: 100%;
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-direction: column;
}
.page-title__inner {
flex: 1;
display: flex;
flex-direction: column;
}
.page-title h1 {
font-size: clamp(32px, 4.2vw, 60px);
letter-spacing: -0.5px;
max-width: 14ch;
margin: 0;
}
.page-title__foot {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 6vw, 90px);
align-items: end;
}
.page-title__foot .useful-links .eyebrow { color: var(--text-dim); }
.page-title__foot .useful-links a { color: var(--text); }
.page-title__copy {
justify-self: end;
max-width: 540px;
}
.page-title__copy .lede {
color: var(--text-muted);
margin: 0;
}
.page-title__copy .btn-text { margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 760px) {
.page-title { min-height: 100svh; }
.page-title__foot { grid-template-columns: 1fr; gap: 32px; align-items: start; }
.page-title__copy { justify-self: start; max-width: 100%; }
}
/* ============================================================ Contact */
/* Two-column form section: heading/lede on the left, form on the right. */
.contact { padding: clamp(180px, 16vw, 240px) var(--pad) clamp(70px, 10vw, 140px); }
.contact-copy .useful-links a {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
color: inherit;
}
.contact-grid {
max-width: var(--maxw); margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(40px, 6vw, 120px);
align-items: start;
}
.contact-copy { max-width: 480px; }
.contact-copy .eyebrow { display: block; margin-bottom: clamp(18px, 2vw, 28px); }
.contact-copy h1 { margin-bottom: clamp(20px, 3vw, 36px); }
.contact-copy p { color: var(--text-muted); }
@media (max-width: 760px) {
.contact-grid { grid-template-columns: 1fr; gap: 44px; align-items: start; }
.contact-copy { max-width: 100%; }
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 40px);
}
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form label {
font-family: var(--sans); font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: 2.4px; text-transform: uppercase;
color: var(--text-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
font-family: var(--serif); font-weight: 300;
font-size: clamp(16px, 1.2vw, 19px);
line-height: 1.5;
color: var(--text);
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
padding: 8px 0 12px;
outline: none;
transition: border-color 0.25s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-dim); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-bottom-color: var(--text); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 24px;
cursor: pointer;
}
.contact-form select option {
background-color: var(--surface);
color: var(--brand-burgundy);
font-family: var(--serif);
font-weight: 300;
}
.contact-form select option:checked,
.contact-form select option:hover {
background-color: var(--surface-soft);
color: var(--brand-burgundy);
}
/* Custom select — replaces the native control so we can style options
(native