/* ============================================================
BRUMAL — colors_and_type.css
Core visual foundations: color tokens + type scale.
Import this file, or copy the :root block, into any artifact.
------------------------------------------------------------
Palette (from brand swatches):
Parchment #F7F5EE Walnut #3F352E
Pressed Ink #242321 Olive #7D755D
Fonts:
Marcellus → headings, buttons, UI (Google Fonts · single weight 400)
Lora → body text / long-form (Google Fonts)
Kalam → handwritten labels (Google Fonts)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Marcellus&display=swap');
:root {
/* ---------- COLOR · grounded, warm, wintry old-soul ---------- */
/* Brand swatches (raw) — 4-color system */
--parchment: #F7F5EE; /* Parchment — primary surface */
--pressed-ink:#242321; /* Pressed Ink — primary ink & dark panels */
--sage: #7D755D; /* Olive — primary accent */
--espresso: #3F352E; /* Walnut — deep accent & secondary ink */
/* legacy raw aliases (kept so older files keep working) */
--earth: var(--espresso);
--charcoal: var(--pressed-ink);
--meadow: var(--sage);
--slate: var(--sage);
/* Neutrals — paper to ink (derived, warm) */
--ink: #242321; /* pressed ink — primary text */
--ink-soft: #3F352E; /* espresso — secondary text */
--stone: #8A8270; /* muted warm grey — tertiary text, captions */
--stone-200: #C9BDA6; /* warm taupe — borders, dividers, rules */
--stone-100: #DDD3C0; /* hairline borders on paper */
--paper: #F7F5EE; /* parchment — primary background */
--vellum: #F3ECDD; /* lighter paper — raised surfaces */
--snow: #F8F3E9; /* warm white — cards, sheets */
/* Accent shades */
--earth-deep: #2A1F18; /* pressed / hover espresso */
--sage-deep: #67705B; /* deeper sage */
--slate-deep: #2E332A; /* deep sage-charcoal — dark feature bands */
--meadow-deep:#67705B; /* deeper sage (legacy alias) */
--panel-dark-c:#161210;/* darkest panel */
/* Legacy accent aliases (kept so older files keep working).
"clay" now maps to Walnut — the deep grounded accent. */
--clay: var(--espresso);
--clay-deep: var(--earth-deep);
/* Semantic surfaces */
--bg: var(--paper);
--surface: var(--snow);
--surface-alt: var(--vellum);
--panel-dark: var(--charcoal);
--border: var(--stone-200);
--border-hair: var(--stone-100);
/* Semantic text */
--fg1: var(--ink);
--fg2: var(--ink-soft);
--fg3: var(--stone);
--fg-on-dark: #F7F5EE;
--link: var(--earth);
--link-hover: var(--charcoal);
/* Status (muted, earthy) */
--positive: #6F7757;
--caution: #9A7B43;
--critical: #8C4A3A;
/* ---------- TYPE FAMILIES ---------- */
--font-serif: 'Marcellus', Georgia, 'Times New Roman', serif; /* headings, buttons, UI — single weight (400) */
--font-body: 'Lora', Georgia, 'Times New Roman', serif; /* body text, long-form */
--font-label: 'Kalam', 'Comic Sans MS', cursive; /* handwritten labels */
/* legacy alias: older files reference --font-mono for labels */
--font-mono: var(--font-label);
/* ---------- TYPE SCALE (editorial) ---------- */
--text-xs: 13px;
--text-sm: 15px;
--text-base: 18px;
--text-md: 21px;
--text-lg: 26px;
--text-xl: 33px;
--text-2xl: 46px;
--text-3xl: 62px;
--text-4xl: 86px;
--text-5xl: 118px;
/* ---------- SEMANTIC ROLE SCALE — Major Third (×1.250), base 13px ---------- */
--text-caption: 10.4px; /* 13 ÷ 1.250 — Marcellus, 400 */
--text-body: 13px; /* base — Lora, 400 */
--text-subheading: 16.25px; /* 13 × 1.250 — Marcellus, 400 */
--text-heading: 20.31px; /* 13 × 1.250² — Marcellus, 400 */
--leading-tight: 1.04;
--leading-snug: 1.18;
--leading-body: 1.55;
/* tracking */
--track-label: 0.04em; /* handwriting wants very little tracking */
--track-tight: -0.01em;
/* ---------- SPACING (4px base) ---------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ---------- SEMANTIC SPACING ---------- */
/* Vertical gap between a section heading and its following body content.
Applied via gap: or margin-bottom: on the heading element. */
--gap-heading-body: 36px;
/* ---------- RADII (architectural — square is the default) ---------- */
--radius-none: 0px; /* square — use everywhere by default */
--radius-md: 4px; /* small concession for tags, badges, inputs at small scale */
/* ---------- BORDERS ---------- */
--hair: 1px solid var(--border-hair);
--rule: 1px solid var(--border);
/* ---------- SHADOWS · stamp logic (no lift, no float) ----------
Elements sit on the page or press into it. Never above it.
---------------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(36,35,33,0.07); /* seated — surface definition only */
--shadow-press: inset 0 1px 4px rgba(36,35,33,0.10); /* approach — surface begins to yield */
--shadow-stamp: inset 0 2px 6px rgba(36,35,33,0.18); /* contact — stamp landing, ink bites */
/* ---------- MOTION · stamp logic --------------------------------
A stamp lands with weight, makes contact, and leaves a mark.
Press in with mass; lift cleanly. No bounce, float, or glow.
---------------------------------------------------------------- */
--ease-stamp-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
--ease-stamp-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
--dur-press: 90ms; /* @kind other */
--dur-lift: 140ms; /* @kind other */
--dur-draw: 180ms; /* @kind other */
--dur-reveal: 320ms; /* @kind other */
}
/* ============================================================
BACKGROUND PAIRING RULE
──────────────────────────────────────────────────────────
Every surface has EXACTLY ONE foreground color.
All content on that surface — text, logos, icons — must
use the same paired foreground. Never mix foreground colors
on a single background.
Surface BG hex FG hex
─────────────────── ────────── ──────────
Parchment #F7F5EE → #242321 (Pressed Ink)
Black #242321 → #F7F5EE (Parchment)
Green #7D755D → #F7F5EE (Parchment)
Brown #3F352E → #F7F5EE (Parchment)
============================================================ */
:root {
/* Canonical bg → fg pairs — reference these when building any surface */
--pair-parchment-bg: #F7F5EE; --pair-parchment-fg: #242321;
--pair-black-bg: #242321; --pair-black-fg: #F7F5EE;
--pair-green-bg: #7D755D; --pair-green-fg: #F7F5EE;
--pair-brown-bg: #3F352E; --pair-brown-fg: #F7F5EE;
}
/* ---------- SURFACE UTILITY CLASSES ---------- */
/* Each class sets the background AND the single foreground color
that must be used for ALL content on top. */
.paper-texture {
background-color: var(--pair-parchment-bg);
color: var(--pair-parchment-fg);
}
.paper-texture-black {
background-color: var(--pair-black-bg);
color: var(--pair-black-fg);
}
.paper-texture-green {
background-color: var(--pair-green-bg);
color: var(--pair-green-fg);
}
.paper-texture-brown {
background-color: var(--pair-brown-bg);
color: var(--pair-brown-fg);
}
/* ============================================================
SEMANTIC TYPE CLASSES
============================================================ */
.eyebrow {
font-family: var(--font-label);
font-size: var(--text-body);
font-weight: 400;
text-transform: uppercase;
letter-spacing: var(--track-label);
color: var(--earth);
}
.eyebrow.muted { color: var(--stone); }
.eyebrow.caption { font-size: var(--text-caption); }
h1, .h1 {
font-family: var(--font-serif);
font-size: var(--text-4xl);
font-weight: 400; /* Marcellus is single-weight — 400 renders correctly */
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: var(--leading-tight);
color: var(--fg1); margin: 0;
}
/* .heading — Marcellus, 21.875px (Major Third ×2 from base)
No active website use case yet; defined for completeness. */
.heading, h2.heading {
font-family: var(--font-serif);
font-size: var(--text-heading);
font-weight: 400; /* Marcellus is single-weight */
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: var(--leading-snug);
color: var(--fg1); margin: 0;
}
/* .subheading — Marcellus, 17.5px (Major Third ×1 from base)
Renamed from h2 / section-header. Legacy h2/.h2 aliased below. */
.subheading, h2, .h2, h3, .h3 {
font-family: var(--font-serif);
font-size: var(--text-subheading);
font-weight: 400; /* Marcellus is single-weight */
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: var(--leading-snug);
color: var(--fg1); margin: 0;
}
p, .body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
font-weight: 400; color: var(--fg2); margin: 0; text-wrap: pretty;
}
/* .caption — Marcellus, 11.2px (Major Third ÷1 from base) */
.caption {
font-family: var(--font-serif);
font-size: var(--text-caption);
font-weight: 400;
line-height: var(--leading-body);
color: var(--fg3); margin: 0;
}
.lead {
font-family: var(--font-body);
font-size: var(--text-md);
line-height: 1.5; font-weight: 400; color: var(--fg1);
}
.meta {
font-family: var(--font-label);
font-size: var(--text-caption);
text-transform: uppercase;
color: var(--fg3); letter-spacing: var(--track-label);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
/* ============================================================
EMBLEM CARD
Bordered content block with the studio emblem centred on the
top border — mirrors the nav's [rule][emblem][rule] motif.
Usage:
· Apply a surface class (paper-texture-*) directly on .emblem-card
so the cap can mask the border via background: inherit.
· Use brumal-emblem-cream.png on dark surfaces (black/brown/green).
· Use brumal-emblem.png on light surfaces (parchment).
============================================================ */
.emblem-card {
position: relative;
border: 1.5px solid currentColor;
padding: 0 44px 44px;
margin-top: 20px;
}
.emblem-card__cap {
position: absolute;
top: 0; left: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center;
padding: 0 14px;
background-color: inherit;
}
.emblem-card__mark {
display: block;
width: 24px; height: 24px;
}
.emblem-card__content {
padding-top: var(--gap-heading-body);
display: flex; flex-direction: column;
gap: var(--gap-heading-body);
color: inherit;
}
.emblem-card__content p { color: inherit; }
.emblem-card__content h2,
.emblem-card__content h3 { color: inherit; }
/* ═══════════════════════════════════════════════════════════════
BRAND BAR
Wordmark · hairline rule · emblem
Used in: site nav, business card front, email signature,
any header that needs a full-width brand anchor.
─────────────────────────────────────────────────────────────
Usage:
On dark surfaces swap in the *-cream.svg / *-cream.png variants.
═══════════════════════════════════════════════════════════════ */
.brand-bar {
display: flex;
align-items: center;
gap: 16px;
}
.brand-bar__logo { flex-shrink: 0; display: block; }
.brand-bar__emblem { flex-shrink: 0; display: block; }
.brand-bar__rule {
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.18;
}
/* ── Global resets (persistent — never swapped during SPA nav) ─
Duplicated from #page-style so there's always a fallback while
the per-page style block is being replaced.
──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; }
/* ── Paper grain overlay ──────────────────────────────────────
Permanent fixture — lives here so it never flickers during
SPA page transitions (page-style swaps; this never does).
─────────────────────────────────────────────────────── */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'256'%20height%3D'256'%3E%3Cfilter%20id%3D'p'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.45%200.75'%20numOctaves%3D'6'%20seed%3D'12'%20stitchTiles%3D'stitch'%20result%3D'n'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%20in%3D'n'%20result%3D'g'%2F%3E%3CfeComponentTransfer%20in%3D'g'%3E%3CfeFuncR%20type%3D'linear'%20slope%3D'0.55'%20intercept%3D'0.3'%2F%3E%3CfeFuncG%20type%3D'linear'%20slope%3D'0.55'%20intercept%3D'0.3'%2F%3E%3CfeFuncB%20type%3D'linear'%20slope%3D'0.55'%20intercept%3D'0.3'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'256'%20height%3D'256'%20filter%3D'url(%23p)'%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat;
background-size: 256px 256px;
opacity: 0.18;
pointer-events: none;
z-index: 9999;
}
/* ── Page transitions (View Transitions API) ───────────────── */
/* Applies to both SPA (document.startViewTransition) and
cross-document hard-nav (contact.html, direct URL loads) */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: vt-out 380ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
animation: vt-in 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vt-out {
to { opacity: 0; }
}
@keyframes vt-in {
from { opacity: 0; }
}
/* Keep the nav's core visual props here so #page-style swaps never affect them. */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: var(--paper);
}
