/* SS Advisory — design tokens
Extracted faithfully from the Claude Designer build so the brand system
survives the move from the (React) Designer export to a clean static site.
Fonts load via Google Fonts (see the note at the foot) rather than
base64 embedding, to keep pages light. */
:root {
/* ---------- Colour ---------- */
/* Navy ground */
--navy-900: #050d18; /* deepest — vignette / footer */
--navy-800: #09172b; /* canonical brand navy */
--navy-700: #102540; /* raised surface */
--navy-600: #163052; /* hover / inset */
--navy-500: #1e3c63; /* focal glow field */
/* Gold */
--gold-200: #f2e3bc; /* champagne — lightest ink */
--gold-300: #ead7a0; /* pale gold — display ink */
--gold-400: #c6a46b; /* antique gold — canonical accent / name / rule */
--gold-500: #b08d4a; /* muted gold — borders */
--gold-600: #8a6c38; /* deep gold — hairlines on navy */
--gold-glow: #f4ea99; /* warm highlight */
/* Neutrals */
--cream: #f4f1ea; /* warm ivory — editorial ground */
--cream-deep: #ece7da;
--ink: #09172b; /* navy ink on cream */
/* ---------- Semantic aliases ---------- */
/* Navy surfaces (hero, brand moments, closing) */
--bg-navy: var(--navy-800);
--bg-navy-deep: var(--navy-900);
--on-navy-display: var(--gold-300); /* serif headline on navy */
--on-navy-body: #cdd4df; /* running text on navy */
--on-navy-muted: #8c97a8;
--on-navy-accent: var(--gold-400);
/* Cream surfaces (the prose pages: Who, The Work) */
--bg-paper: var(--cream);
--on-paper-display: var(--ink); /* serif headline on cream */
--on-paper-body: #2b3340; /* prose on cream */
--on-paper-soft: #4a5566;
--on-paper-accent: var(--gold-600); /* gold reads darker on cream */
/* Lines */
--line-gold: rgba(200,164,92,0.28);
--line-navy: rgba(9,23,43,0.14);
--line-cool: rgba(205,212,223,0.12);
/* ---------- Type ---------- */
--font-display: "Cormorant Garamond", Georgia, serif; /* hero, act names */
--font-serif: "EB Garamond", Georgia, "Times New Roman", serif; /* long prose — confirm */
--font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* labels, nav, caps */
/* Editorial type scale (rem on 16px root) */
--fs-display-xl: 5.5rem; /* hero */
--fs-display-l: 4rem;
--fs-display-m: 3rem;
--fs-display-s: 2.25rem;
--fs-title: 1.625rem;
--fs-body-l: 1.25rem;
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-eyebrow: 0.8125rem;
--fs-micro: 0.6875rem;
--lh-tight: 1.08;
--lh-snug: 1.2;
--lh-body: 1.6;
--lh-relaxed: 1.75;
--tracking-display: -0.01em;
--tracking-eyebrow: 0.34em; /* wide caps labels */
--tracking-name: 0.28em;
--weight-display: 500;
--weight-body: 400;
--weight-sans: 300;
--weight-sans-md: 500;
/* ---------- Space / measure ---------- */
--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; --space-11: 160px;
--margin-page: clamp(24px, 7vw, 120px); /* wide negative space is the brand */
--measure-prose: 60ch; /* Who / The Work long-form */
--measure-display: 18ch; /* hero statement wrap */
--radius-1: 2px; /* nearly square; luxury restraint */
/* ---------- Motion — quiet, slow, no bounce ---------- */
--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms;
}
/* The short gold rule that marks the hero and section starts */
.ss-rule { width: 48px; height: 1px; border: 0; background: var(--gold-500); }
.ss-eyebrow {
font-family: var(--font-sans); font-weight: var(--weight-sans);
font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase; color: var(--on-navy-accent);
}
::selection { background: var(--gold-400); color: var(--navy-900); }
:focus-visible { outline: 2px solid var(--gold-glow); outline-offset: 3px; }
/* ---------- Base + layout ----------
The fix for the "everything in a left column, right side empty" problem:
content lives in a CENTRED container with generous gutters, and prose uses a
readable measure — never pinned to the viewport's left edge. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
font-family: var(--font-serif);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Centred page frame — use on every page section. Balanced margins left and right. */
.ss-page {
max-width: 1180px;
margin-inline: auto;
padding-inline: var(--margin-page);
}
/* Reading column for the prose pages (Who, The Work).
Left-aligned text, comfortable width (~62ch, not 38ch), sitting inside .ss-page. */
.ss-prose { max-width: 62ch; }
.ss-prose p { max-width: none; margin: 0 0 var(--space-5); text-wrap: pretty; }
/* Hero statement — left-aligned within the centred frame, not against the edge. */
.ss-hero { max-width: var(--measure-display); }
/* Section grounds */
.ss-navy { background: var(--bg-navy); color: var(--on-navy-body); }
.ss-paper { background: var(--bg-paper); color: var(--on-paper-body); }
/* Headlines */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: var(--weight-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
margin: 0;
text-wrap: balance;
}
.ss-navy h1, .ss-navy h2, .ss-navy h3 { color: var(--on-navy-display); }
.ss-paper h1, .ss-paper h2, .ss-paper h3 { color: var(--on-paper-display); }
/* Fonts (replace the Designer's base64 embedding with this link in ):
*/