/* ============================================================
FULL STACK FOUNDERS - design-system foundation (tokens.css)
"Build it. Own it."
World: technical engineering blueprint. Near-monochrome.
Calm, in control, tactical, warm-rugged competence. The
anti-hype opposite of a glowing neon AI dashboard. No glow,
no neon, no fill gradients. ONE restrained console-green
accent, reserved for live / interactive / active only.
This file is THE CONTRACT every page links. Extracted verbatim
from the proven coded hero (bledsoe/brand/fsf-hero-coded.html):
every token, every computed AA-ratio comment, and every reusable
component is preserved here so the page builders stay consistent.
--------------------------------------------------------------
FONT LOADING (per-page , no build step)
Each page keeps its own Google Fonts in so the
file renders correctly opened via file:// . Paste this exact
block into every page (before this stylesheet):
Type identity: Archivo (headline / wordmark, 800-900) +
JetBrains Mono (data / captions / CTAs) + Inter (body fallback
companion). Then link this sheet:
(Relative path; adjust depth as ../styles/tokens.css for nested pages.)
============================================================ */
/* ============================================================
1 . DESIGN TOKENS
============================================================ */
:root{
/* Tell the UA this is a dark surface: native scrollbars, form controls,
spinner buttons, and autofill render dark instead of flashing white. */
color-scheme: dark;
/* --- Base + elevations (near-pure monochrome) --- */
--bg: #0a0b0b; /* near-black base */
--card: #141618; /* graphite card elevation */
/* --- Hairline borders / blueprint lines (decorative, non-text) --- */
--line: rgba(255,255,255,0.09);
--line-2: rgba(255,255,255,0.05);
--line-3: rgba(255,255,255,0.14);
--grid-fine: rgba(255,255,255,0.022); /* 2-unit sub-grid: barely-there vellum subdivision */
--edge: rgba(255,255,255,0.20); /* isometric depth edges: brighter than --line-3 so the 3D read holds (non-text stroke) */
/* --- Chip-board detail strokes (non-text, isometric circuit-board faces) ---
The trace grid + SMD edges sat on --line-3 (0.14) and --edge (0.20) and the
prior review found them too faint to read at hero scale. These dedicated
chip tokens are one notch brighter so the detail registers at arm's length
while staying calm, monochrome, hairline (still no glow, no neon):
--chip-trace : the fine trace grid ruled across the top face
--chip-smd : the mounted SMD component depth edges (the 3D box sides)
Kept as named tokens so the chip-board's "sharpness" is a single dial. */
--chip-trace: rgba(255,255,255,0.20); /* trace grid (was --line-3 0.14) */
--chip-smd: rgba(255,255,255,0.32); /* SMD depth-face edges (was --edge 0.20) */
/* --- Text tokens (all computed AA-passing on their surfaces) ---
Caption hierarchy is a deliberate TWO-step ramp, not two interchangeable
greys: --data is the PRIMARY caption (panel/diagram titles, kv values,
the live spec-readout) and --dim-text is the QUIETER annotation a notch
below it (part numbers, leader text, ref/datum stamps, the spec-tag).
Picking by role, not by eye, is what keeps the mono layer reading as a
ranked instrument legend instead of arbitrary greys. */
--text: #e9eaec; /* primary - 16.37:1 on bg, 15.07:1 on card */
--text-2: #8b9096; /* secondary - 6.13:1 on bg, 5.64:1 on card */
--data: #808690; /* PRIMARY caption (mono) - 5.38:1 bg, 4.95:1 card (AA body) */
--dim: #6b7177; /* NON-TEXT strokes ONLY: dimension ticks, circle/line strokes - 3.99:1 bg (>=3:1 large/UI) */
--dim-text: #868c93; /* QUIETER annotation (mono) - ~5.81:1 on bg, ~5.34:1 on card (AA body) */
/* --- The ONE accent: muted console/signal green (anti-neon) --- */
--green: #5cb37d; /* primary signal - 7.69:1 on bg, 7.08:1 on card */
--green-2: #4ea66f; /* secondary signal - 6.58:1 on bg */
--green-line:rgba(92,179,125,0.45);
--green-soft:rgba(92,179,125,0.12);
/* --- Type scale ---
Headline = Archivo 900, fluid clamp; body = Inter; data/caption = JetBrains
Mono. The mono caption ladder below is the instrument legend (11px is the
baseline caption size on --data; the eyebrow earns 13px on --text-2). These
are the literal sizes used across the hero, named so pages stay in scale. */
--fs-h1: clamp(3rem, 8vw, 5.5rem); /* headline; line-height 0.94, tracking -0.03em */
--fs-h1-sm: clamp(2.5rem, 13vw, 3.2rem);/* headline at <=600px */
--fs-lead: clamp(1rem, 1.6vw, 1.18rem);/* subhead / lead paragraph */
--fs-body: 16px; /* base body */
--fs-cta: 16px; /* terminal CTA label (mono) */
--fs-kv-k: 13.5px;/* data-panel key */
--fs-kv-v: 13px; /* data-panel value (mono) */
--fs-nav: 14px; /* nav link */
--fs-eyebrow: 13px; /* eyebrow: primary mono annotation, brighter than captions */
--fs-cta-sm: 13px; /* nav join button (mono) */
--fs-caption: 11px; /* baseline mono caption (panel/diagram titles, ref, datum) */
--fs-micro: 10.5px;/* figure label + leader (smallest mono) */
/* --- Spacing: 8pt module. The page grid, panels, and diagram all key to
8 units (64px) with a 2-unit (16px) sub-grid, so spacing reads as a real
drafting grid. Use these steps; do not invent off-grid gaps. --- */
--s-1: 4px; /* 0.5 unit */
--s-2: 8px; /* 1 unit (module base) */
--s-3: 12px; /* 1.5 unit */
--s-4: 16px; /* 2 units (sub-grid) */
--s-5: 24px; /* 3 units */
--s-6: 32px; /* 4 units */
--s-7: 40px; /* 5 units */
--s-8: 64px; /* 8 units (grid module) */
--gutter: 28px;/* .wrap horizontal padding (18px at <=600px) */
/* --- Geometry scale: corner radii as a named 3-step ramp keyed to the
same 8pt module. --r is the canonical UI radius; the two sub-values are
the only sanctioned exceptions (inner photo frame, focus-ring inset). --- */
--r: 4px; /* canonical: buttons, panels, frames, nav items */
--r-inner: 2px; /* one step tighter: the photo frame inside .figure */
--r-focus: 3px; /* focus-visible ring inset */
/* --- Motion: ONE named micro-state scale. Every interactive surface
(nav, buttons, panels, figure, diagram frame, layer paint, focus
bracket) transitions on these two steps and nothing in between, so the
whole sheet shares one tempo instead of three near-identical durations.
All gated globally by prefers-reduced-motion (snaps to instant). --- */
--t-fast: .12s; /* focus brackets / smallest state flips */
--t-ui: .16s; /* every hover/active micro-state on a surface */
--maxw: 1280px;
}
/* ============================================================
2 . VISUAL MODES (Performance vs Infrastructure)
The brand has two visual modes. The blueprint world above is
Infrastructure Mode by default. A page (or a section) opts into
a mode with a class on a wrapping element; tokens below are read
by components that choose to honor mode (glow/texture surfaces).
- Infrastructure Mode (DEFAULT): strict flat. No glow, no facets.
Course covers, reports, framework diagrams, the hero blueprint.
- Performance Mode: atmospheric. Podcast covers, hero images,
announcements. Permits a SOFT radial glow in accent colors and
subtle polygonal facets as faint texture. Still no neon; green
stays reserved for live/active.
============================================================ */
:root,
.mode-infra{
--mode-glow: none; /* flat: no atmospheric glow */
--mode-facet-opacity: 0; /* flat: no polygonal facet texture */
}
.mode-performance{
/* soft, restrained: a faint radial in the accent, never neon-bright */
--mode-glow: radial-gradient(60% 60% at 50% 0%, var(--green-soft), transparent 70%);
--mode-facet-opacity: 0.04; /* faint vellum-facet texture, if a surface opts in */
}
/* ============================================================
3 . BASE / RESET
============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:"Inter","Archivo",system-ui,sans-serif;
font-weight:400;
font-size:var(--fs-body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
/* Blueprint grid keyed to the 8pt system the whole sheet is built on:
64px = 8 base units. One coordinate system for the page, the panels,
and the diagram, so the texture reads as a real drafting grid rather
than an arbitrary screen. A fainter 16px sub-grid (2 units) gives the
paper a second order of subdivision like real engineering vellum. */
background-image:
linear-gradient(var(--line-2) 1px, transparent 1px),
linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
linear-gradient(var(--grid-fine) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
background-position:-1px -1px;
}
h1,h2,h3,h4,p,ul,figure,figcaption{margin:0;}
img,svg{max-width:100%;}
/* Monochrome text selection: the default UA blue highlight breaks the blueprint.
Selection is an active user interaction, so it earns the faintest green tint;
the text stays --text so it never drops legibility. */
::selection{background:var(--green-soft);color:var(--text);}
/* Mono type is the instrument legend: tabular figures so indices, prices, and
readouts (01/05, $49, dates) align in a column like a real gauge. */
.mono{
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
font-variant-numeric:tabular-nums;
}
/* every mono component inherits tabular figures without re-declaring the family */
.byline,.spec-tag,.eyebrow,.diagram-head .ttl,.diagram-head .ref,.diagram-head .datum,
.cta-terminal,.cta-note,.dim-line,.figure .label,.figure .leader,.spec-readout .idx,
.spec-readout .body,.panel h2,.panel h3,.kv .v,.foot .fm,.btn-join,.nav-toggle,
.diagram-proof,.layer-stamp,.feed .feed-head,.feed .standby,.feed .feed-row .rk,
.feed .feed-row .rm,.kit .kit-label,.room-note,.triad .cell .k,.triad-note,
.spec-block .bk,.ladder .col .price,.foot-legal a,.form-field label{
font-variant-numeric:tabular-nums;
}
/* Autofill: keep Chrome/Safari from painting inputs pale-yellow. The box-shadow
trick repaints the field surface; text stays --text. Dark-mode-aware already
via color-scheme, this pins it exactly to the blueprint field. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--text);
-webkit-box-shadow:0 0 0 1000px var(--bg) inset;
caret-color:var(--text);
transition:background-color 9999s ease-out 0s;
}
/* --- Focus: green :focus-visible ring everywhere, keyboard reachable --- */
a,button{color:inherit;}
:focus-visible{
outline:2px solid var(--green);
outline-offset:3px;
border-radius:var(--r-focus);
}
a.wordmark{text-decoration:none;}
/* --- Skip link: first tab stop on every page, jumps to .
Off-screen until focused, then it slides into the top-left. Neutral border;
the green :focus-visible ring above supplies the active-state signal. --- */
.skip-link{
position:absolute;left:8px;top:-56px;z-index:100;
display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
background:var(--card);border:1px solid var(--line-3);border-radius:var(--r);
color:var(--text);font-family:"JetBrains Mono",monospace;font-size:13px;
letter-spacing:0.02em;text-decoration:none;
transition:top var(--t-ui) ease;
}
.skip-link:focus{top:8px;}
/* In-page anchor jumps (the skip link -> #main, the offer page's
"See what's inside" -> #whats-inside) should glide, not teleport, so the
move reads as intentional. Gated: reduced-motion users still get an instant
jump. And every anchor target clears the 68px sticky header when landed on,
so the jumped-to content is never hidden under the nav. */
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior:smooth;}
}
[id]{scroll-margin-top:84px;}
/* layout container: max width + responsive gutter */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
/* ============================================================
4 . BLUEPRINT GRID UTILITY
The body carries the page-level drafting grid (above). This
utility paints the same vellum grid onto any standalone
surface that needs the texture independent of the page (e.g.
a section band or a framed canvas). Keyed to the same 8pt /
2-unit modules so it lines up with the page grid.
============================================================ */
.blueprint-grid{
background-image:
linear-gradient(var(--line-2) 1px, transparent 1px),
linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
linear-gradient(var(--grid-fine) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
background-position:-1px -1px;
}
/* ============================================================
5 . HEADER / NAV (shared across pages)
IA nav: Writing, Show, Full Stack Founders, About.
All "Join free" -> /full-stack-founders/.
============================================================ */
header.site{
position:sticky;top:0;z-index:40;
background:rgba(10,11,11,0.82);
backdrop-filter:saturate(120%) blur(8px);
border-bottom:1px solid var(--line);
}
.nav{
display:flex;align-items:center;justify-content:space-between;
gap:24px;height:68px;
}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0;}
.wordmark{
font-family:"Archivo",sans-serif;font-weight:900;
letter-spacing:0.13em;font-size:15px;
text-transform:uppercase;white-space:nowrap;color:var(--text);
}
.byline{
font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.04em;color:var(--data);white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.nav-links a{
display:inline-flex;align-items:center;min-height:44px;
padding:0 14px;text-decoration:none;
font-size:14px;color:var(--text-2);
letter-spacing:0.01em;border-radius:var(--r);
transition:color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.nav-links a:hover{color:var(--text);background:var(--line-2);}
.nav-right{display:flex;align-items:center;gap:8px;}
.btn-join{
display:inline-flex;align-items:center;gap:8px;min-height:44px;
padding:0 18px;border-radius:var(--r);
font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;
letter-spacing:0.02em;text-decoration:none;
/* ghost treatment: green reserved as a signal; only the hero CTA fills */
color:var(--green);background:transparent;
border:1px solid var(--green);
transition:background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.btn-join:hover{background:var(--green-soft);border-color:var(--green-2);}
.btn-join .br{opacity:0.85;}
/* mobile nav: collapse links, keep wordmark + join */
.nav-toggle{
display:none; /* hidden on desktop; shown < 760px */
align-items:center;justify-content:center;
min-height:44px;min-width:44px;padding:0 12px;
background:transparent;border:1px solid var(--line-3);
border-radius:var(--r);color:var(--text-2);cursor:pointer;
font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.04em;
transition:color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.nav-toggle:hover{color:var(--text);border-color:var(--green-line);}
/* ============================================================
6 . SPEC-TAG + EYEBROW (blueprint annotations)
============================================================ */
/* part-number rail label (decorative blueprint texture) */
.spec-tag{
font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.16em;text-transform:uppercase;color:var(--dim-text);
}
/* on a layer page, the readout links back to the master stack: "the whole stack
is a click away" made literal. Subtle, inherits the mono grey, underlines on
hover so it reads as a live route without shouting. */
.spec-tag a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t-ui) ease;}
.spec-tag a:hover{border-color:var(--dim-text);}
/* The eyebrow is the sheet's PRIMARY annotation: it earns a hair more
presence (size + brighter --text-2, slightly tighter tracking) than the
secondary mono captions, which all stay at 11px/--data. This breaks the
uniform grey hum without adding a 2nd headline. */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:"JetBrains Mono",monospace;font-size:13px;
letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);
margin-bottom:32px;
}
.eyebrow .dot{
width:8px;height:8px;border-radius:50%;
background:var(--text-2);
/* monochrome: green stays reserved for the hero CTA + true active signals */
}
/* ============================================================
7 . HEADLINE + SUBHEAD
============================================================ */
h1.headline{
font-family:"Archivo",sans-serif;font-weight:900;
font-size:var(--fs-h1);
line-height:0.94;letter-spacing:-0.03em;
margin:0 0 24px;color:var(--text);
}
.subhead{
max-width:30ch;font-size:var(--fs-lead);
color:var(--text-2);margin:0 0 32px;line-height:1.55;
}
/* ============================================================
8 . TERMINAL CTA (.cta-terminal) - the ONE green fill
The single surface where the green accent FILLS rather than
outlines. Reserved for the primary action. Ghost variants
(.btn-join) outline only.
============================================================ */
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cta-terminal{
display:inline-flex;align-items:center;gap:10px;
min-height:52px;padding:0 24px;border-radius:var(--r);
font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:500;
letter-spacing:0.01em;text-decoration:none;
color:var(--bg);background:var(--green);border:1px solid var(--green);
transition:background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.cta-terminal:hover{background:var(--green-2);border-color:var(--green-2);}
.cta-terminal .prompt{opacity:0.8;}
.cursor{
display:inline-block;width:9px;height:1em;
/* sit the block cursor optically on the mono baseline rather than nudging it
with a magic translate: -0.12em lines its bottom to the type baseline */
vertical-align:-0.12em;
background:var(--bg);margin-left:2px;
animation:blink 1.1s steps(1) infinite;
}
.cta-note{
font-family:"JetBrains Mono",monospace;font-size:12px;
color:var(--data);letter-spacing:0.02em;
}
/* dimension line accent under the CTA (blueprint texture) */
.dim-line{
margin-top:48px;display:flex;align-items:center;gap:0;
/* the .label text inherits this color; ticks/bars set their own --line strokes */
color:var(--dim-text);font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.08em;
}
.dim-line .tick{width:1px;height:10px;background:var(--line-3);}
.dim-line .bar{flex:1;height:1px;background:var(--line);}
.dim-line .label{padding:0 10px;white-space:nowrap;}
/* ============================================================
9 . DIAGRAM FRAME + LIVING-SPEC LAYER (the exploded stack)
The center module: a framed SVG canvas with an instrument-panel
head, a datum readout, and operable .layer controls. The SVG's
own paint rules are lifted here so a page that embeds the
diagram links ONE stylesheet (the cascade stays unambiguous).
============================================================ */
.diagram-head{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:14px;
}
.diagram-head .ttl{
font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.14em;text-transform:uppercase;color:var(--data);
}
.diagram-head .ref{
font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.1em;color:var(--dim-text);
}
/* instrument-panel datum readout in the diagram head: live layer index 0X/05 */
.diagram-head .datum{
font-family:"JetBrains Mono",monospace;font-size:11px;
letter-spacing:0.1em;color:var(--dim-text);
}
.diagram-head .datum b{color:var(--green);font-weight:700;}
.diagram-frame{
border:1px solid var(--line);border-radius:var(--r);
background:linear-gradient(180deg,var(--card),#101214);
padding:18px 14px 10px;
/* same border micro-state as the figure + panels: the modules on the
sheet share ONE hover vocabulary AND one tempo (--t-ui), so nothing on the
surface moves on its own clock */
transition:border-color var(--t-ui) ease;
}
.diagram-frame:hover{border-color:var(--line-3);}
.diagram-frame svg{display:block;width:100%;height:auto;}
/* --- Living spec: each slab is an operable control. Hover/focus relocates the
ONE green accent to that layer and writes its line into the readout below.
The green never multiplies, it MOVES: exactly one lit layer at a time. The
default (no JS) keeps the first layer lit. All state is a discrete class
swap, so there is nothing to gate for reduced motion beyond the fade. --- */
.layer{cursor:pointer;}
.layer:focus{outline:none;} /* ring drawn on the slab via .focus-bracket (SVG style) */
/* SVG diagram paint (lifted out of the inline