/* ==========================================================================
Virginia Renovations — brand-tokens.css (brand standard v1.1, 2026-11-07)
Aligns the website with the company document brand (Daily Briefing,
proposals): Moss Slate #3e4a37 / Olive / Gold, Source Serif 4 + DM Sans.
v1.1 (2026-11-07): Forest replaced by Moss Slate at Heath's request (too bold).
The site's own token and class names (--forest, .forest) are kept so
site.css keeps working; only their values change.
Apply EITHER way (both work, the font paths are identical):
A) paste this whole block at the very END of assets/css/site.css, or
B) save as assets/css/brand-tokens.css and add, right AFTER the
site.css :
Fonts: upload the three .woff2 files to assets/fonts/ (self-hosted,
SIL Open Font License, latin subset — same approach as the current fonts).
Rollback: delete this block / the extra . Nothing else depends on it.
========================================================================== */
/* ---------- Fonts (self-hosted, latin subset, swap) ---------------------- */
@font-face {
font-family: 'Source Serif 4';
src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
font-weight: 600 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Serif 4';
src: url('../fonts/source-serif-4-latin-italic.woff2') format('woff2');
font-weight: 600 700;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Tokens: remap to the master palette --------------------------
Contrast (WCAG 2.x) measured on cream #f6f3ec / white / stone #e2ddd2:
ink #1f2317 14.5 / 16.0 / 11.8 body-muted #666a5e 5.0 / 5.5 / -
brass-ink #7a6830 4.9 / 5.5 / - (stone surfaces get darker values below)
olive #4e6b2a 5.5 / 6.1 (light backgrounds only, never on Moss Slate: 1.55)
cream on Moss Slate 8.5 light brass #d2b77c on Moss Slate 4.8
Moss Slate on Panel 8.3 ink on light brass 8.2
------------------------------------------------------------------------ */
:root {
--ink: #1f2317; /* brand Ink */
--forest: #3e4a37; /* brand Moss Slate (site token name kept): headings, dark bands, buttons */
--forest-2: #333d2d; /* Moss Slate hover / pressed (darker) */
--moss: #3e4a37; /* alias: brand Moss Slate */
--sage-mist: #e4e6dc; /* light bands for secondary sections, Moss Slate text */
--olive: #4e6b2a; /* brand Olive: secondary green, links on light. Never on Moss Slate */
--gold: #9c8440; /* brand Gold: rules, icons, LARGE numbers only (3.3:1 on cream) */
--brass: #d2b77c; /* brand Light Brass: gold on Moss Slate, primary button on dark (4.8:1; ink on it 8.2:1) */
--brass-lt: #c0a062; /* button hover / pressed: brand Brass, one step darker (ink on it 6.4:1) */
--brass-ink: #7a6830; /* brand Gold Deep: small gold text on light (4.9:1 on cream) */
--sage: #969f88; /* brand Sage: dividers, quiet fills (never text) */
--panel: #f1f1ea; /* brand Panel */
--cream: #f6f3ec; /* brand Cream */
--stone: #e2ddd2; /* kept: section bands need visible separation from cream */
--body: #1f2317; /* brand Ink for body copy */
--body-muted: #666a5e; /* brand Muted #6e7266 is 4.45:1 on cream (fails AA); web-tuned one step darker = 5.0:1 */
--on-dark: #f6f3ec;
--on-dark-muted: #d2cdc0; /* 6.0:1 on Moss Slate */
--line-dark: rgba(246, 243, 236, 0.16);
--line-light: rgba(31, 35, 23, 0.13);
--warning: #8f2d1f; /* brand Alert Red: 7.9:1 on cream */
--font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
/* Source Serif 4 has a much larger x-height and heavier colour than
Cormorant Garamond, so the display steps come down ~18-22%. */
--step-h3: clamp(1.25rem, 0.45vw + 1.15rem, 1.5rem);
--step-h2: clamp(1.75rem, 1.5vw + 1.3rem, 2.625rem);
--step-h1: clamp(2.125rem, 2.2vw + 1.5rem, 3.375rem);
--step-hero: clamp(2.125rem, 3.4vw + 1.3rem, 4.625rem);
}
/* Stone surfaces: Gold Deep and Muted drop below 4.5:1 on #e2ddd2,
so re-scope the two tokens one step darker inside those blocks. */
.stone, .forest, .credbar, .step, .needs-card, .process-list > li,
.assessment, .map-placeholder, .stone .area-card {
--brass-ink: #6b5a28; /* 5.0:1 on stone */
--body-muted: #575d54; /* 5.0:1 on stone */
}
/* ---------- Type: weights and spacing for Source Serif 4 / DM Sans ------ */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.14; }
.hero h1 { color: var(--forest); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
.hero--page h1 { max-width: 28ch; }
/* Home hero: solid cream wash behind the text column (left), photo stays
visible on the right. Text colours below measured against the rendered
pixels (worst case under each line) at >= 4.5:1. */
.hero--home .hero__scrim {
background:
linear-gradient(90deg, rgba(246, 243, 236, 0.94) 0%, rgba(246, 243, 236, 0.92) 42%, rgba(246, 243, 236, 0.7) 56%, rgba(246, 243, 236, 0.18) 74%, rgba(246, 243, 236, 0) 88%),
linear-gradient(180deg, rgba(246, 243, 236, 0) 70%, rgba(246, 243, 236, 0.55) 100%);
}
@media (max-width: 760px) { /* text spans the full width on phones */
.hero--home .hero__scrim {
background: linear-gradient(180deg, rgba(246, 243, 236, 0.8) 0%, rgba(246, 243, 236, 0.88) 100%);
}
}
.hero--home .kicker { color: #5e4f22; } /* Gold Deep, one step darker for photo backgrounds */
.hero--home .hero__sub { color: #3a3f33; }
.hero--home .hero__cue { color: #4a4f44; font-weight: 700; }
.hero--home .tlink { color: #5e4f22; }
.section-head { max-width: 56ch; } /* ch is narrower in DM Sans; keeps h2 to 2 lines */
.h2 + p, .h2 + .lead, .section-head .h2 + p { margin-top: 1.1rem; }
/* italic pivot: same weight as the heading so it reads as one line, Gold Deep on light */
.pivot { font-style: italic; font-weight: 600; letter-spacing: -0.005em; }
.quote { font-weight: 600; font-style: normal; line-height: 1.36; font-size: clamp(1.3rem, 2vw, 1.95rem); }
.brand__name { font-weight: 700; font-size: 1.3rem; letter-spacing: 0; color: var(--forest); }
.brand__sub { font-weight: 700; letter-spacing: 0.22em; color: var(--brass-ink); }
.credbar__n { font-weight: 700; font-size: clamp(2rem, 2.8vw, 2.75rem); }
.step__n { font-weight: 700; font-size: 1.9rem; }
.proj__title { font-weight: 600; font-size: 1.1875rem; }
.area-list a, .faq-item summary, .faq__q { font-weight: 600; }
.contact-row dd { font-weight: 600; font-size: 1.25rem; }
.map-placeholder strong { font-weight: 600; }
/* Eyebrow (brand: DM Sans 700, caps, .22em, gold) — small, so Gold Deep */
.kicker, .footer-title, .needs-card__title, .contact-row dt { font-weight: 700; letter-spacing: 0.22em; }
.kicker::before { background: var(--gold); opacity: 1; }
.cta-band .kicker::before, .hero--page .kicker::before { background: var(--brass); }
/* UI text: DM Sans 500/700 instead of Inter 600 */
.btn, .tlink, .svc__more, .header-tel, .dock__tel, .dock__cta, .skip-link { font-weight: 700; }
.nav a { font-weight: 500; }
/* ---------- Colour roles ------------------------------------------------ */
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: var(--forest-2); color: var(--cream); }
.cta-band .btn--primary, .hero--page .btn--primary { background: var(--brass); color: var(--ink); }
.cta-band .btn--primary:hover, .hero--page .btn--primary:hover { background: var(--brass-lt); color: var(--ink); }
.dock__cta { background: var(--forest); color: var(--cream); }
.dock__cta:hover { background: var(--forest-2); color: var(--cream); }
.btn--ghost:hover { border-color: var(--olive); color: var(--olive); }
.tlink:hover, .crumbs a:hover { color: var(--olive); }
.prose a, .faq__a a { color: var(--olive); }
:focus-visible { outline-color: var(--olive); }
.credbar__n, .step__n { color: var(--forest); }
.process-list > li { border-left-color: var(--forest); } /* brand Moss Slate left stripe */
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); }
/* Dark photo scrims: tint toward Moss Slate Dark #333d2d instead of near-black.
Moss Slate is lighter than Forest, so the scrim is a little more opaque. */
.cta-band::after {
background:
radial-gradient(ellipse 70% 90% at 50% 50%, rgba(51, 61, 45, 0.92) 0%, rgba(51, 61, 45, 0.78) 55%, rgba(51, 61, 45, 0.5) 100%),
linear-gradient(180deg, rgba(51, 61, 45, 0.36) 0%, rgba(51, 61, 45, 0.12) 30%, rgba(51, 61, 45, 0.12) 70%, rgba(51, 61, 45, 0.36) 100%);
}
/* Footer: gold hairline rule (brand signature) */
.site-footer { border-top: 1px solid var(--gold); }