/* calcofi.io brand — theme.css (v2)
Contract: https://calcofi.io/brand/v2/ (README.md beside this file)
The SIO look as tokens: the UC San Diego palette (navy text on white, UCSD blue links, one yellow
accent, Sand and navy bands), Source Sans 3 + Teko (fonts.css), the SIO-shaped one-bar header, the
button / text-link / card / band idiom — at two scales. LIGHT IS THE DEFAULT; dark is the same brand on
a navy ground, opted into by `:root[data-theme="dark"]`, which theme.js sets from
?theme= → cc_theme cookie (only when the visitor chose it) → localStorage → light.
Semantic token names are v1's, so a consumer's CSS keeps resolving after the one-URL swap.
v2 is frozen once adopted: additive changes only; anything else is v3. */
/* ── tokens: colour ────────────────────────────────────────────────────────── */
:root {
--bg: #ffffff;
--panel: #f5f5f5;
--panel-2: #ffffff;
--border: #dddddd;
--fg: #182b49; /* UCSD Navy — navy type on white is the most SIO thing on the page (14.2:1) */
--muted: #66686a; /* Cool Gray #747678 darkened for AA on the panel gray and the Sand band (brand value: 4.2:1 on #f5f5f5) */
--accent: #00629b; /* UCSD Blue — links, the active state (6.5:1 on white) */
--accent-d: #004663; /* hover */
--on-accent: #ffffff; /* text on an accent fill */
--warn: #8a6500; /* UCSD Gold darkened for AA as text (the brand's #C69214 is 2.8:1 on white) */
--band: #f5f0e6; /* Sand — the alternating page band */
--header-bg: #ffffff;
--cta-bg: #ffcd00; /* UCSD Yellow — the one CTA per view, navy text (9.5:1) */
--cta-fg: #182b49;
--cc-green: #457a1c; /* UCSD Green #6E963B darkened for AA on white (a "go" state) */
--cc-red: #b3261e; /* a "no-go" state; not a brand colour, chosen for AA on both grounds */
/* the UC San Diego palette by name, for a product's own use (a highlight, a chart annotation) */
--cc-navy: #182b49;
--cc-blue: #00629b;
--cc-yellow: #ffcd00;
--cc-gold: #c69214;
--cc-cyan: #00c6d7;
--cc-sand: #f5f0e6;
--cc-gray: #747678;
--cc-stone: #b6b1a9;
/* type, by role — fonts.css supplies the faces; edit that file (and this stack) if Brix Sans is licensed */
--sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
--display: "Teko", "Source Sans 3", Impact, "Arial Narrow", sans-serif; /* page h1 / h2 only; an app never uses it */
--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #0f1a2e; /* just below UCSD Navy, so navy panels read as panels */
--panel: #182b49; /* UCSD Navy — SIO's own dark band is the dark panel */
--panel-2: #21375c;
--border: #34486b;
--fg: #e9edf3;
--muted: #9fb0c8;
--accent: #4fb6e6; /* UCSD Blue lifted for the dark ground (7.6:1) */
--accent-d: #8ad0f0;
--on-accent: #0f1a2e; /* white on the lifted accent is 2.3:1, so dark uses navy */
--warn: #ffcd00; /* the yellow itself (11.6:1) */
--band: #182b49;
--header-bg: #182b49;
--cc-green: #8fbf4f;
--cc-red: #ff8080;
color-scheme: dark;
}
/* ── tokens: scale ─────────────────────────────────────────────────────────────
Two scales, one attribute. A page gets SIO's reading rhythm (18 px / 40 px bands / 1170 px); an app
declares (head.html's snippet copies it onto ) and gets the
same tokens at its own density. The whitespace does not transfer between them and is not meant to. */
:root {
--fs: 18px; /* body */
--lh: 1.44;
--fs-sm: 14px; /* captions, eyebrows, chips */
--nav-fs: 15px; /* header title + links */
--space: 8px; /* the spacing unit */
--band-pad: 40px; /* vertical padding of a .cc-band */
--header-h: 72px;
--lockup-h: 36px; /* the header lockup's height */
--container: 1170px;
--radius: 8px; /* buttons, inputs */
--radius-card: 12px;
}
:root[data-cc-scale="app"] {
--fs: 13px;
--lh: 1.35;
--fs-sm: 11.5px; /* Source Sans 3's x-height is smaller than system-ui's: 11 px labels want half a pixel */
--nav-fs: 13px;
--space: 4px;
--band-pad: 0px;
--header-h: 44px;
--lockup-h: 28px;
--container: 100%;
--radius: 4px;
--radius-card: 6px;
}
/* the brand does not set body type — a framework page (Bootstrap, Quarto) owns its root size. A plain
page applies the rhythm with one rule: body { font: var(--fs)/var(--lh) var(--sans); color: var(--fg); background: var(--bg); } */
/* ── header ───────────────────────────────────────────────────────────────────
Explorer Stationsrelease v2026.08.25
One bar, SIO-shaped: the horizontal lockup far left → calcofi.io, the product's title as an uppercase
nav item → its own root, the release chip, uppercase links, the toggle. White in light, navy in dark.
Self-contained (explicit font, colour, size) so it reads the same inside a Bootstrap page. */
.cc-header {
position: sticky; top: 0; z-index: 1020;
display: flex; align-items: center; gap: calc(var(--space) * 2.5);
box-sizing: border-box; min-height: var(--header-h); margin: 0;
padding: calc(var(--space) * 1) max(calc(var(--space) * 2), calc((100% - var(--container)) / 2));
background: var(--header-bg); color: var(--fg);
border-bottom: 1px solid var(--border);
font-family: var(--sans); font-size: var(--nav-fs); line-height: 1.2;
}
.cc-header .cc-home { display: inline-flex; align-items: center; height: var(--lockup-h); flex: none; text-decoration: none; }
.cc-header .cc-home img { height: var(--lockup-h); width: auto; display: block; }
:root[data-theme="dark"] .cc-logo-light { display: none; }
:root:not([data-theme="dark"]) .cc-logo-dark { display: none; }
/* the SIO nav idiom: bold, uppercase, tracked, navy; hover and the current item in the accent */
.cc-header .cc-title, .cc-header .cc-links a {
font-weight: 700; font-size: var(--nav-fs); letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg); text-decoration: none; white-space: nowrap;
}
.cc-header .cc-title { display: inline-flex; align-items: baseline; margin: 0; }
.cc-header .cc-title:hover, .cc-header .cc-links a:hover, .cc-header .cc-links a[aria-current] { color: var(--accent); text-decoration: none; }
.cc-header .cc-title small {
font-weight: 400; font-size: calc(var(--nav-fs) - 1px); letter-spacing: 0; text-transform: none;
color: var(--muted); margin-left: 0.6em; white-space: nowrap;
}
.cc-header .cc-spacer { flex: 1; }
.cc-header .cc-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 2.5); }
/* the integrated-database release everything on the page came from — right after the title, so it
survives a collapsed sidebar and travels with a screenshot. Not scoped to .cc-header: a framework-owned
bar puts it in its own brand slot. */
.cc-release {
display: inline-flex; align-items: baseline; gap: 0.35em;
font-family: var(--mono); font-size: 0.76rem; line-height: 1.2;
color: var(--muted); text-decoration: none; white-space: nowrap;
border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.6rem;
font-variant-numeric: tabular-nums;
}
.cc-release b { font-weight: 600; color: var(--fg); }
.cc-release:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cc-release:hover b { color: var(--accent); }
.navbar-brand .cc-release { margin-left: 0.5rem; vertical-align: middle; }
/* the theme toggle — the sun while the page is dark, the moon-in-sun while it is light: the icon is what
a click switches TO (Material Design Icons brightness-7 / brightness-4, Pictogrammers, Apache-2.0).
theme.js swaps the markup's 🌓 fallback for the two
Explorer Stations
release v2026.08.25