/* ==========================================================================
ASMI.AI — asmi.live design system
Built to docs/cowork-runs/asmi-live-content-spec-2026-08-27.md §10.
Dark only. No framework. No third-party requests (CSP stays 'self').
HOW TO USE THIS FILE
Every component below carries a MARKUP CONTRACT comment. Copy the markup
exactly; do not invent classes. Nine components exist and nine only:
1 nav · 2 hero · 3 stat · 4 card · 5 render · 6 rail · 7 loop · 8 pill
9 form + footer
Plus page scaffolding (.wrap .section .eyebrow .lede .measure .btn .mono).
THE THREE RULES THAT DO NOT BEND (§10)
i. Every number is mono, dated, and carries a claims reference.
Write the reference as an HTML COMMENT beside the number —
Before 7 AM
so the build gate can grep it and no reader ever sees it.
ii. Display face (Marcellus) for h1/h2 only. Inter for everything else.
No bold serif anywhere. No serif below 20px.
iii. One accent per screen. If cyan appears more than five times above
the fold, delete until it does not. The five it is allowed above
the fold on Home: lockup period + flag pole, nav button, eyebrow
pill, one word in the h1, the primary button. That is the budget —
which is why section eyebrows and stat numerals are NOT cyan.
COLOUR RATIO TARGET: 90% navy/slate · 9% cyan · 1% vermilion.
--cyan = links, one h1 word, the Act node, chips, the primary button.
--verm = the flag pennant, plus at most ONE focal accent per page.
--bg-2 = a card surface and nothing else.
status colours are never decoration.
MOTION BUDGET — four items, total, sitewide:
nav background/blur on scroll · card border-colour on hover ·
the pulse dot (gated) · 120ms button press.
No scroll-triggered fades. No translateY on hover.
========================================================================== */
/* --------------------------------------------------------------------------
0. FONTS — self-hosted, subset, woff2. Google is not a processor here.
marcellus-400 9.4 KB display: h1, h2, the wordmark
inter-var 21.7 KB body, variable wght 400-600
jetbrains-mono-var 22.9 KB every number, date, chip and command
Preload Inter only (spec §12); the other two are discovered from here.
NOTE: Marcellus carries no glyph for the rupee sign or the rightwards
arrow — per-glyph fallback covers both, and neither belongs in a
headline. JetBrains Mono has no rupee sign either; set that in Inter.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Marcellus';
src: url('fonts/marcellus-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('fonts/inter-var.woff2') format('woff2');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
font-weight: 400 500;
font-style: normal;
font-display: swap;
}
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root {
/* --- surfaces --------------------------------------------------------- */
--bg: #0A1628; /* the page */
--bg-tint: #0C1A2E; /* alternating section tint. Never two in a row,
and never adjacent to a render. */
--bg-2: #0F1F38; /* a CARD. Nothing else. */
--border: #1F2D49; /* card + hairline edges (decorative) */
--border-hover: rgba(0, 212, 255, 0.34);
--border-input: #526C96; /* form controls — 3.41:1 on --bg, WCAG 1.4.11 */
/* --- ink -------------------------------------------------------------- */
--text: #E2E8F0; /* 14.7:1 on --bg */
--text-strong: #FFFFFF; /* 17.6:1 on --bg */
--muted: #94A3B8; /* 7.1:1 on --bg — all secondary text */
--dim: #6F819A; /* 4.6:1 on --bg — fine print, claim meta */
/* --- accent ----------------------------------------------------------- */
--cyan: #00D4FF; /* 10.2:1 on --bg */
--cyan-ink: #0A1628; /* text ON cyan — 10.2:1 */
--cyan-soft: rgba(0, 212, 255, 0.07);
--cyan-line: rgba(0, 212, 255, 0.28);
--verm: #F97316; /* 6.5:1 on --bg — the pennant, one accent/page */
/* --- status (never decorative) ---------------------------------------- */
--live: #34D399;
/* --- type ------------------------------------------------------------- */
--font-display: 'Marcellus', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* FIVE SIZES. There is no sixth. Do not add one.
1 h1 38 -> 60px
2 h2, stat value 27 -> 38px
3 lede, h3, card + rail title 19px
4 body 16px
5 eyebrow, caption, chip, mono meta, footer,
form label 13px */
--fs-1: clamp(2.375rem, 1.55rem + 3.4vw, 3.75rem);
--fs-2: clamp(1.6875rem, 1.28rem + 1.7vw, 2.375rem);
--fs-3: 1.1875rem;
--fs-4: 1rem;
--fs-5: 0.8125rem;
--lh-display: 1.06; /* h1 + h2, fixed by §10 */
--lh-title: 1.3;
--lh-body: 1.6;
--ls-display: -0.01em; /* h1 + h2, fixed by §10 */
--ls-eyebrow: 0.1em;
--ls-tagline: 0.22em;
/* --- space (8px base) -------------------------------------------------- */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 40px; --s6: 56px; --s7: 72px; --s8: 96px;
--pad-card: 28px; /* card padding, fixed by §10 */
--wrap: 1100px; /* page max width, fixed by §10 */
--measure: 640px; /* text measure ceiling, fixed by §10 */
--nav-h: 72px;
--radius: 10px;
--radius-sm: 6px;
--dur: 120ms; /* the single duration used sitewide */
color-scheme: dark;
}
/* --------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-4);
font-weight: 400;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* Anchored sections land clear of the sticky nav (72px + breathing room). */
[id] { scroll-margin-top: 88px; }
h1, h2 {
font-family: var(--font-display);
font-weight: 400; /* Marcellus has one weight. Never bold. */
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--text-strong);
margin: 0 0 var(--s3);
text-wrap: balance;
}
h1 { font-size: var(--fs-1); max-width: 920px; }
h2 { font-size: var(--fs-2); max-width: 740px; }
/* The single cyan word in an h1 or h2. Never twice in one heading. */
h1 em, h2 em { color: var(--cyan); font-style: normal; }
h3 {
font-family: var(--font-body);
font-size: var(--fs-3);
font-weight: 600;
line-height: var(--lh-title);
letter-spacing: -0.005em;
color: var(--text-strong);
margin: 0 0 var(--s1);
}
p { margin: 0 0 var(--s2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong { font-weight: 600; color: var(--text-strong); }
em { font-style: italic; }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.25em; }
li { margin-bottom: var(--s1); max-width: var(--measure); }
img, svg, picture, video { max-width: 100%; }
img { height: auto; border: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }
::selection { background: var(--cyan); color: var(--cyan-ink); }
/* Keyboard focus — visible on every interactive element, on every surface. */
:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Visually hidden, still announced. */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* --------------------------------------------------------------------------
3. SCAFFOLDING
page gutter, 1100 max
96 / 56 vertical rhythm
the faint alternate ground
eyebrow + h2 + optional lede