/* ─────────────────────────────────────────
CUSTOM FONTS
───────────────────────────────────────── */
@font-face {
font-family: 'The Roletta';
src: url('../fonts/the-roletta.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*
* Wed & Prosper — Base Design System
* ====================================
* Include this file on every page:
* (from sub-pages)
* (from root)
*
* TYPOGRAPHY SCALE
* ─────────────────────────────────────────
* Display / headings : Cormorant Garamond, weight 300 (italic variant available)
* Body / UI : Lato, weight 300–400
*
* .sz1 clamp(44px, 4.8vw, 76px) — hero / section hero headings
* .sz2 clamp(34px, 3.6vw, 58px) — section headings
* .sz3 clamp(24px, 2.6vw, 40px) — sub-headings
* .philo h2 / .cta h2 clamp(26px, 3.6vw, 50px) — editorial statements
* .body p / .sect-p 17px — primary body copy, section intros
* .card-body 16px — service/card/column body text
* .supp-body 15px — compact grid cells, supporting copy
* .eyebrow 11px — section labels (all-caps, tracked)
* .btn-d / .btn-l 10px — CTA buttons / text links
* .ft-email (footer) 13px
*
* SPACING TOKENS — GOSPEL, do not deviate
* ─────────────────────────────────────────
* Section vertical padding : 96–128px desktop
* Inner content padding : 5vw horizontal
* Rule line : .5px solid var(--rule)
* Blush accent rule : 32px × 1px, var(--blush)
*
* EYEBROW → RULE → HEADING PATTERN (canonical):
* eyebrow mb:28px → .rule-b or .philo-line (mt:0, mb:28px) → heading
* Secondary sections may use smaller eyebrow mb (12–18px); rule mb stays 28px
*
* COLOUR PALETTE
* ─────────────────────────────────────────
* --teal #205056 Deep Teal (primary brand, nav overlay, footer, headings)
* --teal-m #2D7A83 Mid Teal (eyebrows, interactive states)
* --blush #D4A89A Dusty Blush (accent rules, ornaments)
* --petal #F5E8E4 Petal (alternate section backgrounds)
* --cream #FAF8F5 Warm White (default page background)
* --ink #1A1A18 Near-black (primary text)
* --ink-m #4A4A46 Mid ink (body copy)
* --ink-l #8A8A84 Light ink (metadata, captions)
* --rule rgba(32,80,86,0.10) (divider lines)
*/
/* ─────────────────────────────────────────
DESIGN TOKENS
───────────────────────────────────────── */
:root {
--teal: #205056;
--teal-m: #2D7A83;
--blush: #D4A89A;
--petal: #F5E8E4;
--cream: #FAF8F5;
--ink: #1A1A18;
--ink-m: #4A4A46;
--ink-l: #8A8A84;
--rule: rgba(32,80,86,0.10);
}
/* ─────────────────────────────────────────
RESET & BASE
───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
img { height:auto } /* prevent HTML width/height attrs from stretching when CSS overrides only width — applies aspect-ratio from attrs without forcing literal pixel height */
body {
font-family:'Lato',sans-serif;
background:var(--cream);
color:var(--ink);
overflow-x:hidden
}
/* Grain texture overlay */
body::before {
content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px
}
/* ─────────────────────────────────────────
SCROLL REVEAL — progressive enhancement
JS adds .js to ; elements start
visible, fade-up only when JS runs.
───────────────────────────────────────── */
.js .r { opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease }
.js .r.in { opacity:1; transform:none }
.js .d1 { transition-delay:.1s } .js .d2 { transition-delay:.2s }
.js .d3 { transition-delay:.3s } .js .d4 { transition-delay:.4s }
/* ─────────────────────────────────────────
TYPOGRAPHY UTILITIES
───────────────────────────────────────── */
/* Eyebrow labels — "WELCOME", "OUR SERVICES" etc. */
.eyebrow {
display:block; font-size:11px; letter-spacing:.26em;
text-transform:uppercase; color:var(--teal-m)
}
/* ─────────────────────────────────────────
CANONICAL EYEBROW → RULE → HEADING PATTERN
Always: eyebrow (mb:28px) → rule (mt:0, mb:28px) → heading
For secondary contexts use smaller eyebrow mb (12–18px) — rule mb stays 28px
───────────────────────────────────────── */
/* Blush accent rules — draw in on scroll via IntersectionObserver (.in class) */
/* Base: visible at 32px. Page CSS sets width:0 as animation start state. */
.rule-b { display:block; width:32px; height:1px; background:var(--blush); margin:0 0 28px }
.philo-line { display:block; width:32px; height:1px; background:var(--blush); margin:0 0 28px }
/* Guarantee: nothing immediately following a rule line can add extra top space */
.rule-b + *, .philo-line + * { margin-top:0 }
/* Display headings — Cormorant Garamond */
.dh { font-family:'Cormorant Garamond',serif; font-weight:300; color:var(--teal); line-height:1.0; letter-spacing:-.01em }
.dh em { font-style:italic }
.sz1 { font-size:clamp(52px,4.8vw,76px) }
.sz2 { font-size:clamp(40px,3.6vw,58px) }
.sz3 { font-size:clamp(24px,2.6vw,40px) }
/* Body copy block */
.body { margin-top:28px }
.body p { font-size:17px; font-weight:300; color:var(--ink-m); line-height:1.9; margin-bottom:18px }
/* ─────────────────────────────────────────
SHARED BODY TEXT SCALE — use these on all inner pages
.sect-p : 17px — section intro paragraphs, primary editorial body
.card-body: 16px — service/card/column body text
.supp-body: 15px — compact grid cells, captions, supporting copy
───────────────────────────────────────── */
.sect-p { font-size:17px; font-weight:300; color:var(--ink-m); line-height:1.85 }
.card-body { font-size:16px; font-weight:300; color:var(--ink-m); line-height:1.85 }
.supp-body { font-size:15px; font-weight:300; color:var(--ink-m); line-height:1.8 }
/* CTA buttons */
.btn-d {
display:inline-block; background:var(--teal); color:#fff;
font-size:10px; letter-spacing:.2em; text-transform:uppercase;
padding:14px 30px; text-decoration:none; transition:background .2s
}
.btn-d:hover { background:var(--teal-m) }
.btn-l {
display:inline-block; color:var(--ink-l); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; text-decoration:none;
border-bottom:.5px solid currentColor; padding-bottom:2px; transition:color .2s
}
.btn-l:hover { color:var(--teal) }
.brow { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:32px }
/* ─────────────────────────────────────────
NAVIGATION
───────────────────────────────────────── */
#nav {
position:fixed; top:0; left:0; right:0; z-index:200;
padding:0 6px 0 5vw;
transition:background .5s ease, box-shadow .5s ease
}
#nav.s {
background:rgba(250,248,245,.96);
backdrop-filter:blur(12px);
box-shadow:0 1px 0 var(--rule)
}
#nav.mob-open {
background:transparent !important;
backdrop-filter:none !important;
box-shadow:none !important;
z-index:400
}
.ni {
display:flex; align-items:center; justify-content:flex-end;
height:72px; max-width:1400px; margin:0 auto
}
/* Nav scroll-state logo — appears only when nav goes cream */
.nav-logo-link {
margin-right:auto; margin-left:-73px;
display:flex; align-items:center;
opacity:0; visibility:hidden;
transform:translateY(-4px);
transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s
}
#nav.s .nav-logo-link {
opacity:1; visibility:visible;
transform:translateY(0);
transition:opacity .45s ease, transform .45s ease, visibility 0s linear 0s
}
.nav-logo { height:45px; width:auto; display:block }
/* Nav trigger — word "MENU" (replaces the 2 burger lines). Per-page colour
overrides live in each page's inline