/* ============================================================
brandon-tokens.css — Survey Theme
Token set for brandon-tools.net — a separate visual identity
from datum-tokens.css (Datum Planning brand).
Survey theme: pure white, zero border-radius, no shadows.
Cards use a brass left-rule instead of a full border.
Topbar is white with a heavy ink bottom border.
HOW TO USE:
1. Add the font link and this file to each page's :
Or from a subfolder:
2. Reference --bt-* variables in your CSS.
============================================================ */
:root {
/* ---- CORE PALETTE ---------------------------------------- */
--bt-ink: #14233A; /* primary text */
--bt-ink-soft: #1C3050; /* headings, emphasis */
--bt-slate: #5A6B7E; /* secondary text, captions */
--bt-paper: #FFFFFF; /* page background — pure white */
--bt-mist: #F8F8F8; /* input backgrounds, alt surfaces */
--bt-brass: #A8844A; /* accent — left rules, hover states */
--bt-brass-bright: #C0A063; /* accent on dark surfaces */
/* ---- FUNCTIONAL ------------------------------------------ */
--bt-alert: #B23A2E; /* warnings, tax impact */
--bt-positive: #357A5E; /* gains, favorable figures */
--bt-positive-soft: #9FD6B8;
--bt-charcoal: #2A3540; /* dense body text in tools */
--bt-muted: #6B7480; /* hints, captions, placeholders */
/* ---- LINES -----------------------------------------------
Survey uses ink-weight lines for structural dividers.
Interior table/panel lines stay subtle (--bt-line-inner). */
--bt-line: rgba(20,35,58,.10);
--bt-line-strong: #14233A; /* section dividers — ink weight, 2px */
--bt-line-inner: #DCDFE3; /* table rows, panel borders */
--bt-line-rev: rgba(255,255,255,.16);
/* ---- TYPE ------------------------------------------------ */
--bt-serif: 'Fraunces', Georgia, serif; /* display / headlines */
--bt-sans: 'Archivo', system-ui, sans-serif; /* body / UI */
--bt-mono: 'IBM Plex Mono', monospace; /* data / labels */
/* ---- SHAPE -----------------------------------------------
Flat everywhere. Zero radius, no shadows.
--bt-radius-inner is for subtle grouping only (inputs,
badges) — never for cards or panels. */
--bt-radius: 0px;
--bt-radius-inner: 3px;
--bt-shadow: none;
/* ---- TOPBAR ----------------------------------------------
White topbar with brass top-accent + heavy ink bottom border.
Opposite of the Datum dark topbar. */
--bt-topbar-bg: #FFFFFF;
--bt-topbar-border: #14233A; /* bottom border, 3px */
--bt-topbar-accent: #A8844A; /* top accent strip, 2px */
--bt-topbar-text: #14233A;
--bt-topbar-muted: rgba(20,35,58,.4);
}
/* ============================================================
SHARED CHROME
Optional wrapper classes for consistent nav across pages.
============================================================ */
/* Topbar */
.bt-topbar {
background: var(--bt-topbar-bg);
border-top: 2px solid var(--bt-topbar-accent);
border-bottom: 3px solid var(--bt-topbar-border);
padding: 13px 0;
}
.bt-topbar a.back {
font-family: var(--bt-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bt-brass);
text-decoration: none;
}
/* Footer */
.bt-footer {
border-top: 2px solid var(--bt-line-strong);
padding-top: 1.5rem;
font-family: var(--bt-mono);
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bt-muted);
}
/* Disclaimer */
.bt-disclaimer {
font-family: var(--bt-sans);
font-size: 11px;
color: var(--bt-muted);
line-height: 1.7;
max-width: 90ch;
}
/* ============================================================
CARD PATTERN — Survey left-rule
Copy these rules for any navigation or tool card.
Tool Name
Short description.
§code · §code
============================================================ */
.bt-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--bt-paper);
border: none;
border-left: 3px solid var(--bt-ink);
padding: 1rem 0.75rem 1rem 1.25rem;
text-decoration: none;
color: inherit;
transition: border-left-color .15s;
}
.bt-card:hover {
border-left-color: var(--bt-brass);
}
.bt-card:hover .bt-card-name {
color: var(--bt-brass);
}
.bt-card-body { flex: 1; min-width: 0; }
.bt-card-name {
font-family: var(--bt-sans);
font-size: 14px;
font-weight: 600;
color: var(--bt-ink);
line-height: 1.3;
transition: color .15s;
}
.bt-card-desc {
font-size: 12.5px;
color: var(--bt-slate);
margin-top: 3px;
line-height: 1.55;
}
.bt-card-meta {
font-family: var(--bt-mono);
font-size: 9.5px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--bt-brass);
margin-top: 6px;
}
/* ============================================================
SECTION LABEL
Mono eyebrow with a 2px ink rule extending to the right.
Section Name
============================================================ */
.bt-section-label {
font-family: var(--bt-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bt-muted);
display: flex;
align-items: center;
gap: 10px;
margin: 2.25rem 0 .85rem;
}
.bt-section-label::after {
content: '';
flex: 1;
height: 2px;
background: var(--bt-line-strong);
}
/* ============================================================
BADGE (coming soon, status labels)
Soon
============================================================ */
.bt-badge {
display: inline-block;
font-family: var(--bt-mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bt-muted);
border: 1px solid var(--bt-line-inner);
border-radius: var(--bt-radius-inner);
padding: 1px 6px;
margin-left: 7px;
vertical-align: middle;
}