/* theme.css — canonical design tokens for jdbb studio ("Terminal Folio").
*
* This file is the ONE source of truth for color/type tokens. Pages link it
* ahead of their page CSS; the legacy :root blocks in style.css / admin.html /
* landing.html were removed in favor of this file.
*
* System rules (see docs/DESIGN-SYSTEM.md):
* - cardless ledger: hairline rules + whitespace + aligned columns, no boxes
* - zero border-radius, zero shadows, zero gradients
* - one filled accent button per page; all other actions are underlined links
* - tags are plain bracketed mono text, never pills
*/
:root {
/* Process palette — light */
--bg: #FFFFFF; /* white page, Jenna's pick 2026-09-19 pm (0.11; via #FFFEF6,
#FBFAF4, cool #FCFDFD). Warmth comes from the wells, tints
and type, not the ground. Neutrals below follow it. */
--surface: #FFFFFF; /* modals + overlays only, not section cards */
--border: #E6E4DC; /* warm hairline on white */
--border-strong: #0E1116; /* 1px strong section rules */
--text: #0E1116;
--text-secondary: #5D6B76;
--text-muted: #8A97A1;
--accent: #007699; /* process cyan, contrast-safe as text on --bg */
--accent-fill: #00A8E0; /* the ONE filled button per page */
--accent-fill-hover: #0090C4;
--accent-fill-active: #007FAD;
--fill-text: #0E1116; /* text on --accent-fill */
--green: #2F7D4F;
--red: #B3261E;
--yellow: #8A6A00;
--orange: #A45A00;
--blue: var(--accent);
/* Legacy vars kept so existing page CSS keeps working; recalibrated. */
--badge-green-bg: transparent;
--badge-red-bg: transparent;
--badge-yellow-bg: transparent;
--badge-dim-bg: #F3F1E8; /* progress tracks etc. (warm, was #EDF1F4) */
--progress-bg: #F3F1E8;
--toggle-bg: #F3F1E8;
--well-bg: #F5F3EC; /* form-field wells: warm-neutral against the white page (0.11/0.12) */
--hover-tint: rgba(0, 150, 199, 0.05);
--modal-backdrop: rgba(14, 17, 22, 0.35);
--theme-bg: var(--bg);
/* Decorative layers from the old design: retired. */
--noise-opacity: 0;
--grid-color: transparent;
--gradient-wash: none;
--radius: 0;
/* Type. The header selector switches both aliases via html[data-font]. */
--mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
--body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-size-adjust: none;
/* Page-width contract (docs/PAGE-DESIGN-HOSTING-VISIBILITY-2026-09-11.md).
One outer shell for every studio surface; running copy takes its own
reading measure inside it. The deck is the only documented exception. */
--shell-max: 1240px;
--shell-gutter: 24px;
--prose-measure: 68ch;
}
html.dark {
--bg: #0C0E12;
--surface: #12151B;
--border: #232833;
--border-strong: #3A404D;
--text: #E8E6E1;
--text-secondary: #8B909A;
--text-muted: #6A707B;
--accent: #3BC3F2;
--accent-fill: #00A8E0;
--accent-fill-hover: #26B7E8;
--accent-fill-active: #0090C4;
--fill-text: #0C0E12;
--green: #6BBF73;
--red: #E5484D;
--yellow: #D5A021;
--orange: #D07830;
--badge-dim-bg: #1A1E26;
--progress-bg: #1A1E26;
--toggle-bg: #1A1E26;
--well-bg: #1C1A16;
--hover-tint: rgba(59, 195, 242, 0.06);
--modal-backdrop: rgba(0, 0, 0, 0.6);
--theme-bg: var(--bg);
}
/* ---- Site font choices (the header selector switches these) ---- */
html[data-font="jetbrains"] { --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; --body: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }
html[data-font="martian"] { --mono: "Martian Mono", "SFMono-Regular", Menlo, monospace; --body: "Martian Mono", "SFMono-Regular", Menlo, monospace; --font-size-adjust: 0.52; }
html[data-font="plex"] { --mono: "IBM Plex Sans", -apple-system, sans-serif; --body: "IBM Plex Sans", -apple-system, sans-serif; }
html[data-font="geist"] { --mono: "Geist", -apple-system, sans-serif; --body: "Geist", -apple-system, sans-serif; }
html[data-font="literata"] { --mono: "Literata", Georgia, serif; --body: "Literata", Georgia, serif; }
html[data-font="ibm-serif"] { --mono: "IBM Plex Serif", Georgia, serif; --body: "IBM Plex Serif", Georgia, serif; }
html[data-font="source-serif"] { --mono: "Source Serif 4", Georgia, serif; --body: "Source Serif 4", Georgia, serif; }
html[data-font="newsreader"] { --mono: "Newsreader", Georgia, serif; --body: "Newsreader", Georgia, serif; }
/* ---- Base ---- */
html { background: var(--bg); font-size-adjust: var(--font-size-adjust); }
/* ---- Page shell (the width contract) ----
.jdbb-shell standard outer shell, 1240px + responsive gutters
.jdbb-prose reading measure for running copy, applied to the copy block
(or to individual paragraphs) inside the shell
Legacy page wrappers (.page, .wrap, .content) may alias these vars until
they are migrated; new pages use the classes directly. */
.jdbb-shell {
box-sizing: border-box;
width: 100%; max-width: var(--shell-max);
margin: 0 auto; padding: 0 var(--shell-gutter);
}
.jdbb-prose, .jdbb-prose > p, .jdbb-prose > ul, .jdbb-prose > ol, .jdbb-prose > blockquote {
max-width: var(--prose-measure);
}
@media (max-width: 768px) { :root { --shell-gutter: 18px; } }
@media (max-width: 480px) { :root { --shell-gutter: 14px; } }
/* Old decorative layers, neutralized wherever pages still carry the markup. */
.grid-lines { display: none !important; }
body::before, body::after { display: none !important; }
/* ---- Shared masthead (header bar used on every surface) ---- */
.jdbb-masthead {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 18px 0 14px;
border-bottom: 1px solid var(--border);
font-family: var(--mono);
}
/* Canonical wordmark. ONE markup, used in masthead and footer alike:
[jdbb]studio
(omit .studio in the footer). It wears the selected face via --mono so the
whole studio commits to one voice; the per-font rules below are the ONLY
kerning patches allowed — never add page-local ones. */
.jdbb-wordmark {
font-family: var(--mono); font-size: 15px; font-weight: 700;
letter-spacing: 0.02em; color: var(--text); text-decoration: none;
white-space: nowrap;
}
.jdbb-wordmark .bracket { color: var(--accent); font-weight: 700; }
/* The tight kern on the leading "j" only suits the monospace faces (equal-
width glyphs leave a gap after the bracket). Proportional sans and serif
faces collide j/d with it, so they keep neutral spacing (the default). */
.jdbb-wordmark .kj { letter-spacing: 0; }
html[data-font="jetbrains"] .jdbb-wordmark .kj,
html[data-font="martian"] .jdbb-wordmark .kj { letter-spacing: -0.06em; }
/* Serif faces get a hair more overall tracking so "[jdbb]" breathes. */
html[data-font="literata"] .jdbb-wordmark,
html[data-font="ibm-serif"] .jdbb-wordmark,
html[data-font="source-serif"] .jdbb-wordmark,
html[data-font="newsreader"] .jdbb-wordmark { letter-spacing: 0.04em; }
.jdbb-wordmark .studio { color: var(--text-secondary); font-weight: 400; margin-left: 0.45em; }
.jdbb-wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.jdbb-masthead nav { display: flex; align-items: center; gap: 1.4rem; }
.jdbb-masthead nav a {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-secondary); text-decoration: none;
}
.jdbb-masthead nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.jdbb-masthead nav a[aria-current] { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.jdbb-masthead nav[data-admin-nav], .jdbb-masthead nav[data-client-nav] { gap: 1.1rem; }
.jdbb-masthead nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Help links (8.6): the masthead "?" and inline "learn more" (theme.js helpLinks). */
.jdbb-masthead nav a.jdbb-help-q { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border: 1px solid var(--border-strong); border-radius: 50%; font: 700 12px/1 var(--mono); text-decoration: none; color: var(--text-secondary); }
.jdbb-masthead nav a.jdbb-help-q:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
a.jdbb-learn { font: 12px var(--mono); color: var(--text-secondary); margin-left: .8em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a.jdbb-learn[hidden] { display: none; }
/* Report a nit (8.7): theme.js nitLinks/openNit. */
dialog.jdbb-nit { border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); padding: 22px 24px; width: min(520px, calc(100vw - 32px)); font: 14px/1.5 var(--body); }
dialog.jdbb-nit::backdrop { background: var(--modal-backdrop); }
.jdbb-nit .kicker { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.jdbb-nit-lede { color: var(--text-secondary); margin: 6px 0 12px; }
.jdbb-nit-sel { margin: 0 0 12px; padding: 6px 10px; border-left: 3px solid var(--accent); font-size: 13px; max-height: 6.5em; overflow: auto; }
.jdbb-nit label { display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin: 10px 0 0; }
.jdbb-nit label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.jdbb-nit textarea, .jdbb-nit input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: 14px var(--body); padding: 7px 9px; border: 1px solid var(--border-strong); background: var(--well-bg); color: var(--text); }
.jdbb-nit .jdbb-nit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jdbb-nit-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.jdbb-nit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.jdbb-nit-actions button { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--text); cursor: pointer; background: var(--text); color: var(--bg); }
.jdbb-nit-actions .jdbb-nit-cancel { background: transparent; color: var(--text); border-color: var(--border-strong); }
@media (max-width: 640px) {
.jdbb-masthead { flex-wrap: wrap; row-gap: 10px; }
.jdbb-masthead nav { flex-wrap: wrap; gap: 0.9rem 1.1rem; width: 100%; }
}
/* ---- Canonical footer ----
Minimum payload: wordmark · context links · © line. Page types may add
a row above it (e.g. the homepage resources strip) but not replace it.
*/
.jdbb-footer {
display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.6rem;
flex-wrap: wrap; padding: 22px 0 32px; margin-top: 48px;
border-top: 1px solid var(--border);
font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
}
.jdbb-footer .jdbb-wordmark { font-size: 13px; }
.jdbb-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.jdbb-footer a { color: var(--text-secondary); text-decoration: none; }
.jdbb-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.jdbb-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.jdbb-footer .copy { white-space: nowrap; }
/* Phones: long © lines (e.g. /field-guide) wrap instead of widening the page (2026-09-21). */
@media (max-width: 640px) { .jdbb-footer .copy { white-space: normal; } }
@media print { .jdbb-footer, .theme-bar, .jdbb-statusline { display: none !important; } }
/* Status strip under the masthead */
.jdbb-statusline {
display: flex; justify-content: space-between; gap: 1rem;
padding: 8px 0; border-bottom: 1px solid var(--border);
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-muted);
}
.jdbb-statusline .ok { color: var(--green); }
/* ---- Theme bar (font selector + dark toggle), plain text controls ---- */
.theme-bar {
position: relative;
display: flex; align-items: center; gap: 0.65rem;
font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
background: none; border: none; border-radius: 0; box-shadow: none; padding: 0;
}
.theme-bar .font-name {
width: 146px; min-width: 146px;
border: none; background: none; border-radius: 0; box-shadow: none;
padding: 0; color: var(--text-secondary); cursor: pointer;
font-family: var(--mono); font-size: 12px; text-align: right; white-space: nowrap;
}
.theme-bar .font-name:hover { color: var(--text); }
.theme-bar .font-name::before { content: "Aa "; color: var(--text-muted); }
.theme-bar .font-name::after { content: " \25BE"; color: var(--text-muted); }
.theme-bar .font-options {
display: none;
position: absolute; top: calc(100% + 9px); right: 18px; z-index: 80;
box-sizing: border-box;
width: 330px; padding: 14px 16px;
background: var(--surface);
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.theme-bar.expanded .font-options { display: block; }
.theme-bar.expanded .font-name::after { content: " \25B4"; }
.theme-opt-group + .theme-opt-group {
margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.theme-opt-label {
padding: 0 0 8px;
font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-muted);
}
.theme-opt {
--opt-name-size: 16px;
--opt-sample-size: 17px;
display: block; width: 100%;
border: none; background: none; padding: 7px 0; border-radius: 0; box-shadow: none;
color: var(--text-secondary); cursor: pointer; text-align: left;
}
.theme-opt-main {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
font-family: var(--mono); font-size: var(--opt-name-size); white-space: nowrap;
}
.theme-current { color: var(--accent); font-size: 12px; }
.theme-sample {
display: block; margin-top: 2px;
font-size: var(--opt-sample-size); line-height: 1.22; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.theme-opt[data-font="jetbrains"] { --opt-name-size: 14px; --opt-sample-size: 14px; }
.theme-opt[data-font="martian"] { --opt-name-size: 13px; --opt-sample-size: 13px; }
.theme-opt[data-font="plex"] { --opt-name-size: 16px; --opt-sample-size: 17px; }
.theme-opt[data-font="geist"] { --opt-name-size: 16px; --opt-sample-size: 17px; }
.theme-opt[data-font="literata"] { --opt-name-size: 16px; --opt-sample-size: 17px; }
.theme-opt[data-font="ibm-serif"] { --opt-name-size: 16px; --opt-sample-size: 17px; }
.theme-opt[data-font="source-serif"] { --opt-name-size: 16.5px; --opt-sample-size: 17.5px; }
.theme-opt[data-font="newsreader"] { --opt-name-size: 17px; --opt-sample-size: 18px; }
.theme-opt[data-font="jetbrains"] .theme-sample { font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }
.theme-opt[data-font="martian"] .theme-sample { font-family: "Martian Mono", "SFMono-Regular", Menlo, monospace; }
.theme-opt[data-font="plex"] .theme-sample { font-family: "IBM Plex Sans", -apple-system, sans-serif; }
.theme-opt[data-font="geist"] .theme-sample { font-family: "Geist", -apple-system, sans-serif; }
.theme-opt[data-font="literata"] .theme-sample { font-family: "Literata", Georgia, serif; }
.theme-opt[data-font="ibm-serif"] .theme-sample { font-family: "IBM Plex Serif", Georgia, serif; }
.theme-opt[data-font="source-serif"] .theme-sample { font-family: "Source Serif 4", Georgia, serif; }
.theme-opt[data-font="newsreader"] .theme-sample { font-family: "Newsreader", Georgia, serif; }
.theme-opt[data-font="jetbrains"] .theme-opt-name { font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; }
.theme-opt[data-font="martian"] .theme-opt-name { font-family: "Martian Mono", "SFMono-Regular", Menlo, monospace; }
.theme-opt[data-font="plex"] .theme-opt-name { font-family: "IBM Plex Sans", -apple-system, sans-serif; }
.theme-opt[data-font="geist"] .theme-opt-name { font-family: "Geist", -apple-system, sans-serif; }
.theme-opt[data-font="literata"] .theme-opt-name { font-family: "Literata", Georgia, serif; }
.theme-opt[data-font="ibm-serif"] .theme-opt-name { font-family: "IBM Plex Serif", Georgia, serif; }
.theme-opt[data-font="source-serif"] .theme-opt-name { font-family: "Source Serif 4", Georgia, serif; }
.theme-opt[data-font="newsreader"] .theme-opt-name { font-family: "Newsreader", Georgia, serif; }
.theme-opt:hover .theme-opt-name { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.theme-opt.active { color: var(--accent); }
.theme-opt.active .theme-sample { color: var(--text-secondary); }
.theme-sep { width: 1px; height: 14px; background: var(--border); }
.dark-btn {
border: none; background: none; padding: 0; border-radius: 0;
font-size: 14px; color: var(--text-secondary); cursor: pointer;
}
.dark-btn:hover { color: var(--text); }
/* On phones the theme bar wraps to its own masthead row and aligns left like
the nav links; the desktop .font-name is right-aligned in a fixed 146px
slot, which left a strange floating indent (Jenna, 2026-09-21). The open
font list hugs the left edge and never exceeds the viewport. */
@media (max-width: 640px) {
.theme-bar .font-name { width: auto; min-width: 0; text-align: left; }
.theme-bar .font-options { left: 0; right: auto; width: min(330px, calc(100vw - 2 * var(--shell-gutter))); }
}
/* ---- Ledger primitives ---- */
.kicker {
font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.kicker::before { content: "// "; }
.tag {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
color: var(--text-secondary); white-space: nowrap;
background: none; border: none; border-radius: 0; padding: 0;
}
.tag.ok { color: var(--green); }
.tag.warn { color: var(--accent); }
.tag.err { color: var(--red); }
hr.rule { border: none; border-top: 1px solid var(--border); margin: 0; }
hr.rule-strong { border: none; border-top: 1px solid var(--border-strong); margin: 0; }
/* The one filled button per page */
.btn-fill {
font-family: var(--mono); font-size: 12px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
background: var(--accent-fill); color: var(--fill-text);
border: none; border-radius: 0; padding: 12px 24px; cursor: pointer;
white-space: nowrap;
}
.btn-fill:hover { background: var(--accent-fill-hover); }
.btn-fill:active { background: var(--accent-fill-active); }
/* Text-link action (everything that is not the one filled button) */
.link-action {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
color: var(--text); background: none; border: none; border-radius: 0;
padding: 0; cursor: pointer; text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: var(--text-muted);
}
.link-action:hover { text-decoration-color: var(--text); }
.link-action.accent { color: var(--accent); }
.link-action.danger { color: var(--red); }
/* Step strip 1–5 (factory page + transmittal; step 1 lives on the transmittal) */
.fx-steps {
display: flex; flex-wrap: wrap; gap: 4px 22px;
padding: 14px 0;
}
.fx-step {
display: inline-flex; align-items: baseline; gap: 7px;
text-decoration: none; color: var(--text-muted);
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
text-transform: uppercase; white-space: nowrap;
padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.fx-step:hover { color: var(--text); }
.fx-step-how { margin-left: auto; color: var(--accent); }
.fx-step .fx-step-n { font-weight: 600; }
.fx-step.done { color: var(--green); }
.fx-step.done .fx-step-n::after { content: " \2713"; }
.fx-step.current {
color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}
/* Bare inputs: bottom rule only */
.input-bare {
font-family: var(--mono); font-size: 14px; color: var(--text);
background: none; border: none; border-bottom: 1px solid var(--border-strong);
border-radius: 0; padding: 8px 2px; outline: none; width: 100%;
}
.input-bare::placeholder { color: var(--text-muted); }
.input-bare:focus { border-bottom-color: var(--accent); }
/* Bare progress line */
.progress-line { position: relative; height: 2px; background: var(--border); }
.progress-line > span { position: absolute; inset: 0 auto 0 0; background: var(--accent-fill); }