/* =============================================================================
kodo.css — THE SITE SHEET. One , and a page is in the system.
It is bench.css and editorial.css welded together: bench.css's three token
tiers and its components, carrying the editorial values rather than the
sketchbook ones. Nothing here is a retheme of anything — there is no second
sheet left to disagree with, which is what the split cost every time a page
forgot to load the second one, or loaded it in the wrong place.
Three tiers, and a rule for choosing between them:
PRIMITIVE a raw value with no opinion about use (--cream-300)
SEMANTIC a role in the UI (--surface-page, --text-muted)
DOMAIN a fact about the science (--atom-O, --energy-atp)
Pages and components reference the second two. Reach for a primitive only
when the thing genuinely has no role, which is rarer than it looks.
§6.5 is the part that is neither: the SITE SHELL — the wordmark, the gutter,
the masthead. A page that draws its own is a page whose logo is a different
size from the one next door, which is the state this section ended.
bench.css is what the benches still load. It is frozen: the sketchbook look,
kept because forty test pages are drawn in it and none of them is public.
New work links this file.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&display=swap');
/* THE CALLOUT, PULLED IN RATHER THAN COPIED. Almost every lesson annotates its
model, and components are growing their own notes for a generated page to
switch on, so a a page has to remember is a a page will forget
— and an unstyled callout on a generated page has no fallback to land on.
Importing keeps ONE copy of the rules and one file that owns them, which is
what the pages still on bench.css link directly. It resolves against this
file's own URL, so every path a page reaches kodo.css by works. */
@import url('annotate.css');
/* The values, shared with the front door, which cannot load this sheet. Every
colour below is a ROLE pointed at one of brand.css's names. brand.css */
@import url('brand.css');
/* -----------------------------------------------------------------------------
0. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
/* The components below set `display`, which is an author rule and therefore
beats the UA's `[hidden] { display: none }`. Without this a button a page
has honestly hidden stays on screen, and nothing in the JS looks wrong.
membrane-lab hit this three times and carried its own copy for each. */
.pill[hidden],
.btn[hidden],
.iconbtn[hidden],
.segmented[hidden],
.textbtn[hidden] { display: none }
html,
body {
margin: 0;
height: 100%;
color: var(--text-strong);
font-family: var(--font-ui);
}
/* A lesson in someone else's frame. lib/embed.js puts `bare` on when
the page is framed; each lesson marks its OWN title, because only the page
knows which element is its name and which is a control that has to survive.
Here rather than in a page: every lesson loads this file, and a lesson that
has not been restyled still gets embedded.
`!important` because the mark lands on whatever element IS the title, and
that is often an id with its own `display` — molecule-lab's #brand is a flex
row, and a class cannot outrank an id. A one-purpose hiding utility is the
place this is the honest fix rather than a shortcut. */
html.bare .chrome-title { display: none !important }
/* -----------------------------------------------------------------------------
1. PRIMITIVES
-------------------------------------------------------------------------- */
:root {
/* Warm neutrals. One ramp, cream through to ink, lifted off the values the
lessons had already converged on by hand. Every surface and every piece of
text on the paper comes from here. */
--cream-50: #fffdf7;
--cream-100: #fbf7ee;
--cream-200: #f1ece3;
--cream-300: #efe6d6;
--cream-400: #e2d8c6;
--cream-500: #d8cfbf;
--cream-600: #b9ae9d;
--clay-500: #8a8073;
--clay-600: #5a5346;
--clay-700: #4a4232;
--clay-800: #3a352f;
--clay-900: #2b2723;
--slate-700: #353f44;
/* Temperature, and the two ends of any hot/cold readout. */
--ember-500: #e5533a;
--azure-500: #4a90d9;
}
/* -----------------------------------------------------------------------------
2. SEMANTIC
-------------------------------------------------------------------------- */
:root {
--surface-page: var(--cream-200); /* the stage's paper */
--surface-rule: var(--cream-400); /* the dots printed on it */
--surface-raised: var(--cream-200); /* a card or panel lying on the paper */
--surface-card: var(--cream-50); /* a sticky note, brighter than the page */
/* THE GROUND A MOLECULE IS DRAWN ON. A step warmer than the paper, so a
framed viewer reads as a window cut into the page rather than as a border
drawn on it. The 3D canvas is alpha:true — this is the colour behind it,
and no renderer knows it exists. */
--surface-stage: var(--cream-200);
--border-hair: var(--cream-500);
--border-strong: var(--clay-900); /* the drawn 2px line round a button */
--text-strong: var(--clay-900);
--text-body: var(--clay-800);
--text-dim: var(--clay-600);
--text-muted: var(--clay-500);
--text-inverse: var(--cream-300); /* on an ink fill */
/* Button fills. Brighter and more saturated than the readout accents: a
primary pill has to carry white type and win the stage. The ion-dipole
amber is a BOND and stays palette.js's --bond-iondipole. */
--action-blue: #2f7ee0;
--action-amber: #ef8b17;
--accent-hot: var(--ember-500);
--accent-cold: var(--azure-500);
--sketch: var(--slate-700);
/* Focus is a system-level promise, not a per-page one. Half the featured
pages ship a focus ring today and half do not; components below all use
this so the answer stops depending on which lesson you are in. */
--focus-ring: 2px solid var(--clay-900);
--focus-offset: 3px;
}
/* -----------------------------------------------------------------------------
3. DOMAIN
Atoms and bonds are NOT written out here. They are generated from palette.js
at load (see tokens-from-palette.js) so a caption's coloured O and the sphere
it points at cannot drift, which is exactly what they had done: the old CSS
said #e6362f and the renderer drew #d6362e. Available as --atom-O, --atom-H,
--atom-Na ... and --bond-hbond, --bond-covalent, --bond-iondipole,
--bond-condense, --bond-lonepair.
Below are the domain colours a LESSON reads, and the bar for being here is
both of these:
1. NOTHING ELSE ALREADY PUBLISHES IT. A token that restates a generated one
is the oxygen bug rebuilt with new names. If the colour you want is an
element's or a bond's, say --atom-P or --bond-hbond and stop.
2. MORE THAN ONE PAGE READS IT. One page's colour lives on that page.
hemoglobin-lab's core and quaternary greens were here and went back:
a design system that carries a colour with one caller is a place to
lose it, not a place to share it.
Four duplicates and one single-page pair have already left by those two
rules. The block is meant to be small.
-------------------------------------------------------------------------- */
:root {
/* The two carriers, read by glycolysis-lab, krebs-lab and fermentation-lab.
The phosphate and the carbon are NOT here: they are --atom-P and --atom-C,
and naming them twice is how a re-tuned palette leaves a caption behind. */
--energy-nad: #2f7d5c;
--energy-atp: #c8452e;
/* The membrane's channel green. ONE PAGE READS IT, which is rule 2 above
unmet; it stays only until membrane-lab and the membrane component stop
being two copies of one physics, because the component will want it too. */
--membrane-channel: #2a7a6a;
}
/* -----------------------------------------------------------------------------
4. TYPE
Four families, named by the job they do rather than by what they look like,
because the job is what decides which one a new page should reach for.
-------------------------------------------------------------------------- */
:root {
/* UI: labels, buttons, controls, anything the student operates. */
--font-ui: 'Proxima Soft', 'Proxima Nova', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Editorial: headings, readouts, the claim a step is making. The workhorse.
glycolysis reaches for it more than everything else combined. */
--font-editorial: 'Zilla Slab', Georgia, serif;
/* Shout: a title, a sticky note, the one word a page raises its voice for.
Used four times on a busy page, never for a run of text. */
--font-shout: 'Permanent Marker', cursive;
/* Aside: annotation in the margin, in the student's own hand. */
--font-aside: 'Caveat', cursive;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* Scale. Twenty-six distinct sizes are in the featured pages today, nine of
them fractional. These ten steps cover every one of them, and every step is
an even number except --text-sm, which is the size the buttons wanted and
is worth an odd box for.
Nothing outside the buttons below is re-pointed at the scale by this file.
Migrating a page is its own pass, with the browser open, because rounding
12.5 up or down is a look and not a find-and-replace. */
--text-2xs: 10px; /* letterspaced uppercase micro-labels, axis ticks */
--text-xs: 12px; /* quiet chrome: dock buttons, tabs, undo */
--text-sm: 13px; /* buttons, dense readouts */
--text-base: 16px;
--text-md: 18px; /* the step's claim */
--text-lg: 20px;
--text-xl: 22px; /* page title */
--text-2xl: 26px;
--text-3xl: 34px;
--text-4xl: 46px;
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-body: 1.5;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--tracking-tight: -.01em;
--tracking-normal: 0;
--tracking-wide: .2px;
--tracking-caps: .06em; /* uppercase micro-labels need the air */
}
/* -----------------------------------------------------------------------------
5. SPACE, SHAPE, MOTION
-------------------------------------------------------------------------- */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 22px;
--space-6: 30px;
--space-7: 44px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-pill: 999px;
--shadow-raise: 0 2px 0 rgba(43, 39, 35, .18), 0 6px 16px -8px rgba(43, 39, 35, .6);
--shadow-panel: 0 6px 24px -12px rgba(43, 39, 35, .45);
--shadow-press: 0 1px 0 rgba(43, 39, 35, .18);
--ease-out: cubic-bezier(.2, .9, .3, 1);
--dur-fast: .12s;
--dur-base: .2s;
}
/* -----------------------------------------------------------------------------
6. LEGACY ALIASES
The names the featured lessons, pathways.css and water-tutor.css already
use, pointed at the tiers above. They are the migration's checklist: when
nothing greps for --ink any more, that line goes.
-------------------------------------------------------------------------- */
:root {
--paper: var(--surface-page);
--paper-line: var(--surface-rule);
--panel: var(--surface-raised);
--ink: var(--text-strong);
--muted: var(--text-muted);
--hair: var(--border-hair);
--radius: var(--radius-lg);
--hot: var(--accent-hot);
--cold: var(--accent-cold);
--font-sans: var(--font-ui);
--font-slab: var(--font-editorial);
--font-marker: var(--font-shout);
--font-hand: var(--font-aside);
}
/* -----------------------------------------------------------------------------
6.1 THE EDITORIAL VALUES
The tiers above keep their structure; these are the numbers the site is
actually drawn in. They come last so nothing has to reason about cascade
order, and they overwrite ROLES only — no primitive changes meaning here.
6.1a SEMANTIC — the paper, the ink and the two accents. The primitives above
keep their values; nothing outside a role changes.
-------------------------------------------------------------------------- */
:root {
--paper-white: var(--brand-paper);
--paper-card: var(--brand-card);
--rule-line: var(--brand-rule);
--ink-900: var(--brand-ink);
--ink-700: var(--brand-ink-2);
--ink-600: var(--brand-ink-3);
--ink-500: var(--brand-mute);
--green-700: var(--brand-green); /* accent */
--orange-500: var(--brand-orange); /* spark, the warm counterpoint */
--surface-page: var(--paper-white);
--surface-rule: transparent; /* this paper is flat; see §10.1 */
--surface-raised: var(--paper-white);
--surface-card: var(--paper-card);
/* Warmer than this paper on purpose. #faf8f4 behind a molecule on #faf8f4
paper is a frame with nothing in it. */
--surface-stage: var(--brand-paper-2);
--border-hair: var(--rule-line);
--border-strong: var(--ink-900);
--text-strong: var(--ink-900);
--text-body: var(--ink-700);
--text-dim: var(--ink-600);
--text-muted: var(--ink-500);
--text-inverse: var(--paper-white);
/* THE MICRO-CAP, the system's only heading device outside prose. Two steps:
-lg names a whole thing on screen (the lesson, the subject), -sm labels a
part of the chrome (a ledger, a control, a step). Same face, same tracking,
same weight, same colour — the SIZE is the whole hierarchy, so a page
cannot invent a third treatment by picking its own tracking. */
--cap-lg: 12px;
--cap-sm: 10px;
--cap-track: .22em;
--cap-weight: 600;
--accent: var(--green-700);
--spark: var(--orange-500);
/* The signature hues are brand.css's, unrenamed on purpose: they are a
categorical set and giving one a role name here would be the first step to
a second primary. A section picks one; --accent stays the button. */
--focus-ring: 2px solid var(--green-700);
}
/* -----------------------------------------------------------------------------
6.1b TYPE — Futura where the machine has it, Jost as the geometric stand-in.
The two hands die here: --font-shout and --font-aside are what the marker
headings and the margin scrawl resolve through, so pointing them at the
editorial pair converts every page that uses them without touching one.
-------------------------------------------------------------------------- */
:root {
/* Two sans faces, split by job. The geometric one is the site's voice and
it is a DISPLAY face: it sets a wordmark and a micro-cap beautifully and
a paragraph badly, and its 600 at 13px is a black bar. Body and UI text
therefore get the system face, which is what the reader's OS has already
hinted for prose at that size. */
--font-display: 'Futura', 'Futura PT', 'Jost', -apple-system, 'Segoe UI', sans-serif;
--font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-editorial: 'Literata', Georgia, serif;
--font-shout: var(--font-display);
--font-aside: var(--font-editorial);
--tracking-wide: .02em;
/* Even corners and a hairline edge. Every radius collapses toward the
homepage's 4px; the pill stays a pill. */
--radius-sm: 3px;
--radius-md: 4px;
--radius-lg: 4px;
--shadow-raise: 0 1px 2px rgba(20,22,26,.06), 0 10px 26px -12px rgba(20,22,26,.22);
--shadow-panel: 0 10px 26px -10px rgba(20,22,26,.16);
--shadow-press: 0 1px 1px rgba(20,22,26,.10);
}
/* A geometric sans sets tighter than Nunito at the same size, and the display
steps are where that reads as loose. Headings only; body text is untouched. */
:root {
--tracking-tight: -.03em;
}
/* =============================================================================
6.5 THE SITE SHELL
Every public page is the same three blocks in the same order, so that moving
between them feels like turning a page rather than opening another site:
gutter + measure, once
name of THIS page, and its deck
Myoglobin
...
...
THE WORDMARK IS ONE ELEMENT AND ONE SIZE. `.mark` sets 1.35rem everywhere;
the homepage is the single exception and says so out loud with `.mark.hero`,
which is a size change and not a second treatment — same letters, same green
`lab`, same spark full stop. Four pages each spelling the mark out in their
own