/* ──────────────────────────────────────────────────────────────
Whale Watcher — Design Tokens
Drop this in your site's global CSS, then use the variables.
Fonts are loaded from Google Fonts; see snippet at bottom.
────────────────────────────────────────────────────────────── */
:root{
/* ── Color: navy (foreground for dark surfaces / display type) ── */
--ww-navy-1:#0a1622; /* deepest — body text on paper */
--ww-navy-2:#0e2638; /* dark surface — lockbox bg, popup tab */
--ww-navy-3:#13314a; /* tertiary navy */
/* ── Color: brass (the brand accent) ── */
--ww-brass:#cfa75a; /* primary brass — dots, rules, accents */
--ww-brass-2:#a8843e; /* darker brass — hover/pressed */
--ww-brass-3:#d4a868; /* lighter brass — alt highlight */
--ww-amber:#ffb37a; /* warm highlight — sun, "crumbs" */
/* ── Color: paper (the cream substrate everything sits on) ── */
--ww-paper:#f3ecdb; /* primary background */
--ww-paper-2:#ebe2cc; /* recessed paper — cards, panels */
--ww-cream:#e0d4bc; /* warmer cream — secondary fills */
/* ── Color: ink ── */
--ww-ink:#0a0a0a; /* near-black text */
--ww-ink-2:#1a1a1a; /* secondary ink */
/* ── Color: signal ── */
--ww-green:#1f6e3f; /* positive delta (use #9fe88a on dark bg) */
--ww-green-light:#9fe88a;
--ww-red:#a83b2c; /* negative delta / alert */
--ww-red-2:#b04438;
/* ── Hairlines & shadows ── */
--ww-rule:rgba(10,22,34,.18);
--ww-rule-soft:rgba(10,22,34,.10);
--ww-shadow-card: 0 16px 40px rgba(10,22,34,.25), 0 4px 10px rgba(10,22,34,.12);
/* ── Typography: families ── */
--ww-font-display:'Fraunces', Georgia, serif; /* italic display headlines */
--ww-font-body:'Inter', system-ui, -apple-system, sans-serif;
--ww-font-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
/* ── Typography: type scale (clamp-friendly) ── */
--ww-text-xs: 9px; /* monospace tickers, edition labels */
--ww-text-sm: 11px; /* eyebrows, mono captions */
--ww-text-base: 14px; /* body */
--ww-text-md: 16px; /* lead body */
--ww-text-lg: 22px; /* subheads */
--ww-text-xl: 34px; /* section heads */
--ww-text-2xl: 58px; /* masthead / hero */
--ww-text-display: 96px; /* big italic display moments */
/* ── Typography: tracking (mono uppercase = wide; display = tight) ── */
--ww-track-tight:-0.02em;
--ww-track-normal:0;
--ww-track-wide:0.18em;
--ww-track-wider:0.24em;
--ww-track-widest:0.28em;
/* ── Spacing scale ── */
--ww-space-1: 4px;
--ww-space-2: 8px;
--ww-space-3: 12px;
--ww-space-4: 16px;
--ww-space-5: 24px;
--ww-space-6: 32px;
--ww-space-7: 48px;
--ww-space-8: 64px;
--ww-space-9: 96px;
/* ── Radii (parchment = small / sharp) ── */
--ww-radius-sm: 2px;
--ww-radius-md: 4px;
--ww-radius-lg: 8px;
--ww-radius-pill: 999px;
}
/* ──────────────────────────────────────────────────────────────
Page atmosphere — paste once on for the brand vibe
────────────────────────────────────────────────────────────── */
.ww-paper-bg{
background:
radial-gradient(1200px 700px at 20% -10%, rgba(207,167,90,.10), transparent 60%),
radial-gradient(900px 600px at 110% 110%, rgba(14,38,56,.06), transparent 60%),
var(--ww-paper);
color: var(--ww-ink);
font-family: var(--ww-font-body);
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Optional parchment grain — apply to body::before */
.ww-grain::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background-image:
radial-gradient(rgba(10,22,34,.05) 1px, transparent 1px),
radial-gradient(rgba(207,167,90,.05) 1px, transparent 1px);
background-size: 3px 3px, 7px 7px;
background-position: 0 0, 1px 2px;
mix-blend-mode: multiply;
opacity: .55;
}
/* ──────────────────────────────────────────────────────────────
Type primitives
────────────────────────────────────────────────────────────── */
.ww-display{
font-family: var(--ww-font-display);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
letter-spacing: var(--ww-track-tight);
line-height: 1;
text-wrap: balance;
}
.ww-eyebrow{
font-family: var(--ww-font-mono);
font-size: var(--ww-text-sm);
letter-spacing: var(--ww-track-wider);
text-transform: uppercase;
color: var(--ww-ink-2);
display: inline-flex; align-items: center; gap: 10px;
}
.ww-eyebrow::before{
content:""; width: 18px; height: 1.5px; background: var(--ww-brass);
}
.ww-mono{
font-family: var(--ww-font-mono);
letter-spacing: var(--ww-track-wide);
text-transform: uppercase;
}
/* Brass dot — the recurring sun/whale-spout glyph */
.ww-dot{
display:inline-block;
width: 5px; height: 5px; border-radius: 50%;
background: var(--ww-brass);
box-shadow: 0 0 0 3px rgba(207,167,90,.18);
vertical-align: middle;
}
/* Hairline brass rule — fades to the right */
.ww-rule{
height: 1px;
background: linear-gradient(90deg, var(--ww-brass), rgba(207,167,90,0));
}
/* ──────────────────────────────────────────────────────────────
Google Fonts — paste in
────────────────────────────────────────────────────────────── */
/*
*/