/* =========================================================
AXION DESIGN SYSTEM - colors & type
Single source of truth for fonts, color tokens, and
semantic text styles. Import once at the top of any page:
The Axion brand reads as INSTITUTIONAL, FOUNDATIONAL, and
PHYSICS-ROOTED. The current direction is "GRAPHITE & BONE":
pure neutral on a deep graphite canvas, bone-white type,
and a single restrained brass accent for state. No color
identity to speak of - the system speaks. Reference points:
Bell Labs technical reports, Braun product catalogs, Dieter
Rams. Defaults are dark because that's the dominant brand
surface - patent labs, control rooms, machined housings.
Light surfaces exist for documents and patent-style
layouts; toggle with [data-theme="light"] on a parent.
========================================================= */
/* ---------- 1. Webfonts ---------- */
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Thin.otf") format("opentype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-UltraLight.otf") format("opentype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-RegularItalic.otf") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-BoldItalic.otf") format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "GT America";
src: url("/fonts/GT-America-Black.otf") format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* IBM Plex Sans - the user uploaded Plex Sans even though the brand
deck specifies Inter as secondary. Treating Plex Sans as a *valid
substitute* - it shares Plex Mono's family-feel and reads
institutional. Inter is loaded from Google as a fallback so the
semantic --font-body var still picks up the named family if present. */
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-Light.woff2") format("woff2"),
url("/fonts/IBMPlexSans-Light.woff") format("woff");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"),
url("/fonts/IBMPlexSans-Regular.woff") format("woff");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-Italic.woff2") format("woff2"),
url("/fonts/IBMPlexSans-Italic.woff") format("woff");
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"),
url("/fonts/IBMPlexSans-Medium.woff") format("woff");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"),
url("/fonts/IBMPlexSans-SemiBold.woff") format("woff");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("/fonts/IBMPlexSans-Bold.woff2") format("woff2"),
url("/fonts/IBMPlexSans-Bold.woff") format("woff");
font-weight: 700; font-style: normal; font-display: swap;
}
/* IBM Plex Mono + Inter are loaded via in Home Page.html.
The original @import here was silently dropped by every browser
because CSS spec requires @import to appear before any other
at-rules, including @font-face. Leaving this breadcrumb so the
next person doesn't re-introduce the bug. */
/* ---------- 2. Color tokens ---------- */
:root {
/* ---------- Graphite & Bone - pure neutral spine ----------
Six core swatches sampled directly from the Home page hero
and palette strip. The brand explicitly carries no color
identity - graphite canvas, bone-white type, brass accent
used SPARINGLY for state. */
--c-graphite: #15171A; /* primary canvas */
--c-graphite-surface: #2C3036; /* card / panel surface */
--c-steel: #6F7178; /* muted foreground */
--c-ash: #A8A8A2; /* secondary foreground */
--c-bone: #EDEAE2; /* primary foreground on dark */
--c-brass: #D4A24C; /* single accent - state, CTA */
/* Extended utility shades - derived to fill in gaps without
straying from the Graphite & Bone temperature (cool-neutral
graphite + warm-neutral bone). */
--c-graphite-900: #0F1114; /* deepest plate, beneath canvas */
--c-graphite-800: #15171A; /* canvas (alias of --c-graphite) */
--c-graphite-700: #1A1D21; /* between canvas and surface */
--c-graphite-600: #232629; /* hover-lift on canvas */
--c-graphite-500: #2C3036; /* surface */
--c-graphite-400: #363A41; /* elevated panel */
--c-graphite-300: #4A4D54; /* button rest, divider */
--c-steel-400: #6F7178; /* muted (alias of --c-steel) */
--c-steel-300: #8A8C90; /* still muted, slightly lifted */
--c-ash-300: #A8A8A2; /* secondary (alias of --c-ash) */
--c-ash-200: #C4C2BB; /* between ash and bone */
--c-bone-100: #EDEAE2; /* primary text (alias of --c-bone) */
--c-bone-50: #F4F2EC; /* light canvas / paper */
--c-bone-edge: #DDDAD2; /* paper edge / hairline on light */
/* Brass - the single accent. Used sparingly for state, the
primary CTA, active indicators, and the laser-cut spark.
Sub-shades exist for hover/press and for legibility on bone. */
--c-brass-700: #9A7530; /* press / on-light text */
--c-brass-600: #B98A3D; /* hover-press boundary */
--c-brass-500: #D4A24C; /* brand accent */
--c-brass-400: #DCB066; /* hover */
--c-brass-300: #E5C58A; /* soft on dark surface */
/* Status (engineering palette - additive, not part of brand
identity but required for telemetry semantics). Tuned to
sit quietly inside the Graphite & Bone surface. */
--c-amber: #C99544; /* caution - close to brass on purpose */
--c-cyan: #5B8E94; /* informational, sensor */
--c-green: #6E8F6B; /* nominal/operational */
--c-rust: #B05A3C; /* fail - desaturated, not a fire-engine red */
/* ---------- Semantic - DARK (default) ---------- */
--bg-canvas: var(--c-graphite);
--bg-surface: var(--c-graphite-500);
--bg-surface-2: var(--c-graphite-400);
--bg-elevated: var(--c-graphite-300);
--bg-overlay: rgba(15, 17, 20, 0.78);
--fg-primary: var(--c-bone);
--fg-secondary: var(--c-ash);
--fg-muted: var(--c-steel);
--fg-disabled: var(--c-graphite-300);
--fg-inverse: var(--c-graphite);
--border-hairline: rgba(237, 234, 226, 0.06); /* 1px engineered grid lines */
--border-default: rgba(237, 234, 226, 0.12);
--border-strong: rgba(237, 234, 226, 0.24);
--accent: var(--c-brass-500);
--accent-hover: var(--c-brass-400);
--accent-press: var(--c-brass-600);
--accent-on: #1A1612; /* text on brass - warm near-black */
--status-ok: var(--c-green);
--status-warn: var(--c-amber);
--status-info: var(--c-cyan);
--status-fail: var(--c-rust);
/* ---------- Type tokens ---------- */
--font-display: "GT America", "Inter", system-ui, sans-serif;
--font-body: "Inter", "IBM Plex Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Type scale - engineered, not modular-fancy.
Body anchor is 15px (denser than mainstream web) to feel
like spec sheets rather than marketing pages. */
--fs-12: 0.75rem; /* 12 - micro labels, mono caption */
--fs-13: 0.8125rem; /* 13 - table cell, dense data */
--fs-15: 0.9375rem; /* 15 - body */
--fs-17: 1.0625rem; /* 17 - body-lg */
--fs-20: 1.25rem; /* 20 - h5/section */
--fs-24: 1.5rem; /* 24 - h4 */
--fs-32: 2rem; /* 32 - h3 */
--fs-44: 2.75rem; /* 44 - h2 */
--fs-64: 4rem; /* 64 - h1 */
--fs-96: 6rem; /* 96 - hero */
--fs-144: 9rem; /* 144 - display / wordmark feature */
/* Line-heights kept tight - institutional, not airy */
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-normal: 1.4;
--lh-relaxed: 1.55;
/* Tracking - wide tracking on small caps + mono headers reads
like a patent header or a panel label. */
--tr-tight: -0.015em;
--tr-normal: 0em;
--tr-wide: 0.06em;
--tr-mono: 0.04em;
/* Spacing - 4px base, engineered grid */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* Radii - minimal. Axion is square-shouldered. */
--r-0: 0px;
--r-2: 2px;
--r-4: 4px;
--r-6: 6px;
--r-pill: 9999px;
/* Elevation - dark, low, real (no glow halos) */
--shadow-1: 0 1px 0 rgba(0,0,0,0.6), 0 0 0 1px var(--border-hairline) inset;
--shadow-2: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px var(--border-default) inset;
--shadow-3: 0 8px 28px rgba(0,0,0,0.6), 0 0 0 1px var(--border-default) inset;
--shadow-press: inset 0 1px 0 rgba(0,0,0,0.5);
/* Motion - Axion four-curve system. No bounce, no spring.
Each curve has a job; do not substitute. */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* content reveals */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* transforms / parallax */
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* swaps / state changes */
--ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1); /* micro-interactions */
/* Legacy aliases - map to the new system so older rules pick up
the right curve without per-rule edits. --ease-out maps to
ease-out-quart (the transform curve), --ease-in maps to the
symmetric in-out used for swaps. */
--ease-out: var(--ease-out-quart);
--ease-in: var(--ease-in-out-quart);
/* Duration scale - every motion on the site snaps to one of these
five values. Consistency is what makes the page feel orchestrated
rather than ad-hoc.
motion-instant 150ms hover state changes, focus rings, tooltips
motion-fast 300ms button hovers, small UI feedback, color transitions
motion-base 600ms default - content reveals, fade-ins, standard transitions
motion-slow 900ms hero text reveals, large image entrances, primary section transitions
motion-deliberate 1200ms the hero's first impression, key narrative moments
Default to motion-base. Step up only when the element has narrative
weight; step down only for direct user feedback. */
--motion-instant: 150ms;
--motion-fast: 300ms;
--motion-base: 600ms;
--motion-slow: 900ms;
--motion-deliberate: 1200ms;
/* ── Stagger scale ──
When multiple elements enter together, they should stagger - never
appear simultaneously.
stagger-tight 40ms letter-by-letter or word-by-word text reveals
stagger-base 80ms sibling elements (nav items, button groups, list items)
stagger-loose 160ms hierarchical content (eyebrow → H1 → subhead → CTA)
stagger-narrative 240ms major scene beats (hero text → hero image → telemetry)
Rule: tighter stagger for elements that read as a single unit (one
sentence, one button group). Looser stagger for elements that should
each register as their own beat. */
--stagger-tight: 40ms;
--stagger-base: 80ms;
--stagger-loose: 160ms;
--stagger-narrative: 240ms;
/* Legacy aliases - keep older rules pointing at the new scale so
nothing snaps off the rhythm. Mapped to the nearest tier. */
--dur-fast: var(--motion-instant);
--dur-mid: var(--motion-fast);
--dur-slow: var(--motion-base);
/* ---------- 2b. Fluid responsive tokens ----------
Per Axion Foundational Responsive System Brief.
Interpolates between 375px (mobile anchor) and 1440px
(desktop anchor). Below 375 and above 1440, values clamp.
Existing fixed --fs-* and --sp-* tokens remain valid; these
fluid companions are used for elements that should scale
between mobile and desktop. */
/* Fluid type scale */
--fs-fluid-body: clamp(0.875rem, 0.85rem + 0.09vw, 0.9375rem); /* 14 -> 15 */
--fs-fluid-body-lg: clamp(0.9375rem, 0.89rem + 0.19vw, 1.0625rem); /* 15 -> 17 */
--fs-fluid-h5: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 -> 20 */
--fs-fluid-h4: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* 20 -> 24 */
--fs-fluid-h3: clamp(1.5rem, 1.32rem + 0.75vw, 2rem); /* 24 -> 32 */
--fs-fluid-h2: clamp(2rem, 1.74rem + 1.13vw, 2.75rem); /* 32 -> 44 */
--fs-fluid-h1: clamp(2.5rem, 1.97rem + 2.25vw, 4rem); /* 40 -> 64 */
--fs-fluid-display: clamp(2rem, 0.59rem + 6.01vw, 6rem); /* 32 -> 96 */
--fs-fluid-xl: clamp(2.75rem, 1.16rem + 6.76vw, 9rem); /* 44 -> 144 */
/* Fluid spacing - section-level. Use these for outer section
padding and major component-to-component gaps. Fixed --sp-*
tokens still cover component-internal spacing. */
--sp-section-y: clamp(3rem, 1.42rem + 6.76vw, 7.5rem); /* 48 -> 120 */
--sp-section-x: clamp(1.25rem, -0.07rem + 5.63vw, 5rem); /* 20 -> 80 */
--sp-fluid-tight: clamp(0.75rem, 0.66rem + 0.38vw, 1rem); /* 12 -> 16 */
--sp-fluid-base: clamp(1rem, 0.82rem + 0.75vw, 1.5rem); /* 16 -> 24 */
--sp-fluid-loose: clamp(1.5rem, 1.15rem + 1.50vw, 2.5rem); /* 24 -> 40 */
--sp-fluid-xl: clamp(2rem, 1.30rem + 3.00vw, 4rem); /* 32 -> 64 */
/* Container */
--container-max: 1440px;
--container-pad: var(--sp-section-x);
}
/* ---------- 3. Light theme override ---------- */
[data-theme="light"] {
--bg-canvas: var(--c-bone-50);
--bg-surface: #FFFFFF;
--bg-surface-2: var(--c-bone);
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(244, 242, 236, 0.85);
--fg-primary: var(--c-graphite);
--fg-secondary: var(--c-graphite-300);
--fg-muted: var(--c-steel);
--fg-disabled: var(--c-ash-200);
--fg-inverse: var(--c-bone);
--border-hairline: rgba(21, 23, 26, 0.08);
--border-default: rgba(21, 23, 26, 0.14);
--border-strong: rgba(21, 23, 26, 0.32);
--accent: var(--c-brass-700); /* darker brass on light for contrast */
--accent-hover: var(--c-brass-600);
--accent-press: #7A5C25;
--accent-on: #FFFFFF;
--shadow-1: 0 1px 0 rgba(21,23,26,0.04), 0 0 0 1px var(--border-hairline) inset;
--shadow-2: 0 2px 8px rgba(21,23,26,0.06), 0 0 0 1px var(--border-default) inset;
--shadow-3: 0 8px 28px rgba(21,23,26,0.10), 0 0 0 1px var(--border-default) inset;
}
/* ---------- 4. Base elements ---------- */
html, body {
margin: 0;
background: var(--bg-canvas);
color: var(--fg-primary);
font-family: var(--font-body);
font-size: var(--fs-fluid-body);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Headings - GT America, tight tracking, low line-height. */
h1, h2, h3, h4, h5, h6, .ax-display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: var(--tr-tight);
line-height: var(--lh-tight);
margin: 0;
color: var(--fg-primary);
text-wrap: balance;
}
h1 { font-size: var(--fs-fluid-h1); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--fs-fluid-h2); font-weight: 700; }
h3 { font-size: var(--fs-fluid-h3); font-weight: 500; }
h4 { font-size: var(--fs-fluid-h4); font-weight: 500; }
h5 { font-size: var(--fs-fluid-h5); font-weight: 500; }
h6 { font-size: var(--fs-fluid-body); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; }
p { margin: 0 0 var(--sp-4); color: var(--fg-secondary); text-wrap: pretty; }
p.lead { font-size: var(--fs-fluid-body-lg); color: var(--fg-primary); }
a { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); }
a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }
code, kbd, pre, .ax-mono {
font-family: var(--font-mono);
font-feature-settings: "ss01", "ss02";
letter-spacing: var(--tr-mono);
}
hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--sp-8) 0; }
/* ---------- 5. Utility classes ---------- */
.ax-display-xl { font-family: var(--font-display); font-size: var(--fs-fluid-xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.ax-display-lg { font-family: var(--font-display); font-size: var(--fs-fluid-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ax-display-md { font-family: var(--font-display); font-size: var(--fs-fluid-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.ax-h1 { font-family: var(--font-display); font-size: var(--fs-fluid-h2); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.ax-h2 { font-family: var(--font-display); font-size: var(--fs-fluid-h3); font-weight: 500; line-height: 1.1; }
.ax-h3 { font-family: var(--font-display); font-size: var(--fs-fluid-h5); font-weight: 500; line-height: 1.2; }
.ax-body-lg { font-family: var(--font-body); font-size: var(--fs-fluid-body-lg); line-height: var(--lh-relaxed); color: var(--fg-primary); }
.ax-body { font-family: var(--font-body); font-size: var(--fs-fluid-body); line-height: var(--lh-relaxed); color: var(--fg-secondary); }
.ax-caption { font-family: var(--font-body); font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--fg-muted); }
/* ---------- 6. Container utility ----------
Per Axion Foundational Responsive System Brief §5. */
.ax-container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
/* ---------- 7. Safe-area handling (iOS notch / Dynamic Island) ----------
Per Axion Foundational Responsive System Brief §11. Components that
render full-bleed fixed chrome opt-in via these classes. */
.ax-safe-top { padding-top: max(env(safe-area-inset-top), 12px); }
.ax-safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 12px); }
.ax-safe-x {
padding-left: max(env(safe-area-inset-left), 0px);
padding-right: max(env(safe-area-inset-right), 0px);
}
/* ---------- 8. Reduced motion ----------
Per Axion Foundational Responsive System Brief §6. CSS-driven motion
is collapsed near-instantly; opacity/color transitions still read.
JS-driven motion (parallax, particles, Lenis) is gated separately
inside its own modules by querying the same media. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* The signature label style - wide-tracked uppercase mono, used
for section eyebrows, form labels, panel headers, deck eyebrows. */
.ax-eyebrow,
.ax-label {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-muted);
}
.ax-spec {
font-family: var(--font-mono);
font-size: var(--fs-13);
letter-spacing: var(--tr-mono);
color: var(--fg-secondary);
}
.ax-spec-key { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.ax-spec-val { color: var(--fg-primary); }
/* Color helpers */
.ax-fg-primary { color: var(--fg-primary); }
.ax-fg-secondary { color: var(--fg-secondary); }
.ax-fg-muted { color: var(--fg-muted); }
.ax-fg-accent { color: var(--accent); }
.ax-bg-canvas { background: var(--bg-canvas); }
.ax-bg-surface { background: var(--bg-surface); }
.ax-bg-elevated { background: var(--bg-elevated); }
/* Mobile simplifications */
@media (max-width: 768px) {
/* Hero - hide dispatch panel and telemetry footer */
.hero-dispatch-block,
.hero-telemetry-block {
display: none !important;
}
/* Plate captions - reduce to a faint design mark in the bottom-left */
.ax-plate-caption {
right: auto !important;
left: var(--sp-section-x) !important;
text-align: left !important;
font-size: 10px !important;
bottom: 32px !important;
}
section {
padding-bottom: 128px !important;
}
/* Faint - target parent AND inner divs (children carry their own inline colors) */
.ax-plate-caption,
.ax-plate-caption > div {
color: rgba(237, 234, 226, 0.30) !important;
}
/* Show only the PLATE number, hide the dispatch description line (works for both sections with 2 children and the hero with 1) */
.ax-plate-caption > div + div {
display: none !important;
}
/* Align nav padding with content (mobile only) - matches AXION wordmark to var(--sp-section-x) so it stacks with H1, subtext, CTA, and Plate I. */
.ax-nav,
.ax-nav.is-compact {
padding-left: var(--sp-section-x) !important;
padding-right: var(--sp-section-x) !important;
}
/* Make HeroDispatch's outer div fill .hero-stage so brackets, plate caption, and video sit at the bottom on mobile */
.hero-stage > div {
min-height: 100svh !important;
}
/* Remove top corner brackets on the hero */
.hero-bracket-top {
display: none !important;
}
/* Smaller AXION wordmark on mobile (14px vs 22px desktop) */
.ax-nav-mark img {
height: 14px !important;
}
/* Elegant darkening gradient at the bottom of the hero for content legibility */
.hero-stage > div::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 35%,
rgba(15, 17, 26, 0.15) 55%,
rgba(15, 17, 26, 0.55) 75%,
rgba(15, 17, 26, 0.85) 92%,
rgba(15, 17, 26, 0.95) 100%
);
pointer-events: none;
z-index: 3;
}
}