/* ============================================================
JaxonAI — infrastructure restraint system.
Black / off-white only. Monospace authority (JetBrains Mono
for the hero + every button/CTA), Inter for reading. One flat
near-black surface: no gradients, no grain, no Three.js, no
teal, no shadows. Sharp corners, crisp hairlines. Hover dims
rather than brightens.
Order: tokens → reset → utilities → nav → hero → sections →
footer → subpages → motion → responsive.
============================================================ */
:root {
--bg: #08090B; /* flat near-black surface */
--ink: #F3F3F0; /* warm off-white voice */
--ink-rgb: 243, 243, 240; /* token for rgba() calls */
--bg-rgb: 8, 9, 11;
--muted: rgba(var(--ink-rgb), 0.60); /* secondary text */
--dim: rgba(var(--ink-rgb), 0.45); /* hover-dim target */
--line: rgba(var(--ink-rgb), 0.10); /* default hairline */
--line-2: rgba(var(--ink-rgb), 0.20); /* emphasised hairline */
/* Per-component sweeps + glows; themeable */
--shine-peak: #ffffff; /* capability headline sweep peak */
--hero-glow-a: rgba(150, 178, 228, 0.16); /* hero light-field fallback wash */
--hero-glow-b: rgba(120, 150, 210, 0.05);
--sig-filter: brightness(0) invert(1); /* footer signature → white on dark */
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
/* 8px base — sparse, deliberate jumps */
--mx: clamp(24px, 6vw, 120px);
--sy: clamp(112px, 17vh, 200px);
--maxw: 1200px;
/* -----------------------------------------------------------
v6.13 — design tokens (added on top of the existing system
so prior rules keep rendering). Anything new + the design
pass refactors below consume these.
----------------------------------------------------------- */
/* Containers */
--container-wide: 1200px; /* full layouts (=maxw) */
--container-text: 760px; /* centered prose */
--container-narrow: 540px; /* lead phrase / form */
/* Section vertical rhythm */
--section-y: clamp(96px, 14vh, 180px); /* default */
--section-y-tight: clamp(56px, 8vh, 96px); /* compact */
/* Type — Inter sans scale */
--type-h1: clamp(56px, 8.5vw, 112px);
--type-h2: clamp(32px, 4.4vw, 60px);
--type-h3: clamp(22px, 2.6vw, 32px);
--type-lead: clamp(18px, 1.6vw, 22px);
--type-body: clamp(15px, 1.15vw, 17px);
--type-fine: clamp(13px, 0.95vw, 14.5px);
/* Mono utility scale */
--type-eyebrow: 11px;
--eyebrow-track: 0.18em;
/* Within-section rhythm */
--rhythm-eyebrow: clamp(20px, 2.6vh, 32px); /* eyebrow → headline */
--rhythm-headline: clamp(28px, 4vh, 44px); /* headline → body */
--rhythm-body: clamp(24px, 3.4vh, 40px); /* body → CTA / next */
--rhythm-para: clamp(16px, 2vh, 24px); /* para → para */
}
/* ============================================================
LIGHT THEME — experimental (v6.12).
Activated by via the boot script in
the head + a nav toggle that persists to localStorage.
Palette is aligned to openai.com / x.ai 2026:
· Pure white surface (#FFFFFF) — same as both reference sites
· Soft near-black ink (#0D0D0D) — OpenAI's body is close to pure
black; we sit 1 step warmer so it doesn't vibrate against white
· Slightly stronger hairlines (0.12 vs 0.10) — on white, 10% is
almost invisible; 12% gives the same perceptual weight as 10%
on near-black
Structural rules (sharp corners, mono utility type, no shadows,
hover dims) all stay the same. This is a paint job, not a redesign.
============================================================ */
[data-theme="light"] {
--bg: #FFFFFF;
--ink: #0D0D0D;
--ink-rgb: 13, 13, 13;
--bg-rgb: 255, 255, 255;
--muted: rgba(var(--ink-rgb), 0.62);
--dim: rgba(var(--ink-rgb), 0.42);
--line: rgba(var(--ink-rgb), 0.12);
--line-2: rgba(var(--ink-rgb), 0.22);
/* Shiny capability headline: on dark the peak is pure white (a
flash), on light the peak must be a darker tint of ink (a wash).
0.18 ink-alpha gives a perceptible band without going harsh. */
--shine-peak: rgba(var(--ink-rgb), 0.18);
/* Hero light-field fallback: the dark blue radial wash becomes a
barely-there cool tint on white — present but unintrusive. */
/* v6.12.26 — bumped 4× so weak-device CSS fallback shows a visible
wash even if hero-smoke.js bails (cores<4 || mem<3 check). */
--hero-glow-a: rgba(20, 50, 130, 0.20);
--hero-glow-b: rgba(20, 50, 130, 0.06);
/* Footer signature: the source PNG is white-pixels-on-transparent
(designed for dark surfaces). brightness(0) collapses any non-
transparent pixel to black while keeping alpha intact — exactly
what we want for a black signature on a white footer. */
--sig-filter: brightness(0);
color-scheme: light;
}
/* ---------- i18n — v6.14 bilingual support (EN / 中文) ----------
Translatable elements wrap both languages as sibling spans:
English text
中文文本
These rules show only the active language; the language is
picked synchronously by the boot script before first paint.
On Chinese, slightly bump line-height + letter-spacing to suit
CJK metrics — Inter handles Han via the system fallback. */
[data-lang="en"] [data-zh] { display: none !important; }
[data-lang="zh"] [data-en] { display: none !important; }
[data-lang="zh"] body {
font-feature-settings: "tnum" 1;
}
[data-lang="zh"] h1, [data-lang="zh"] h2, [data-lang="zh"] h3,
[data-lang="zh"] .hero__title, [data-lang="zh"] .chat__h,
[data-lang="zh"] .capabilities__headline, [data-lang="zh"] .demo__title,
[data-lang="zh"] .toolbox__custom-h {
letter-spacing: 0 !important; /* CJK doesn't want negative tracking */
}
/* Footer language picker — sits right of the © line, mirrors OpenAI */
.lang-picker {
display: inline-flex; align-items: center; gap: 6px;
appearance: none; cursor: pointer;
border: 1px solid var(--line-2);
background: transparent;
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--ink);
transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.lang-picker:hover { background: rgba(var(--ink-rgb), 0.05); border-color: var(--ink); }
.lang-picker .lang-globe {
width: 12px; height: 12px;
border-radius: 50%; border: 1.4px solid currentColor;
position: relative; flex-shrink: 0;
}
.lang-picker .lang-globe::before,
.lang-picker .lang-globe::after {
content: ""; position: absolute; inset: 0;
border: 1.4px solid currentColor; border-color: transparent currentColor;
border-radius: 50%;
}
.lang-picker .lang-globe::after {
border-color: currentColor transparent;
transform: scaleX(0.45);
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
/* Zoom resilience: a 100vw full-bleed canvas must never create a
horizontal scrollbar at any zoom level. */
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--bg); /* flat — no image, no gradient, no grain */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid rgba(var(--ink-rgb), 0.6); outline-offset: 3px; }
/* ---------- Utilities ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
left: 16px; top: 16px; z-index: 100;
background: var(--bg); color: var(--ink);
padding: 10px 14px; border: 1px solid var(--line-2);
}
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kit-frame { max-width: var(--maxw); margin: 0 auto; padding-left: var(--mx); padding-right: var(--mx); }
/* Progressive reveal — only hides/animates with JS present. */
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.in {
opacity: 1; transform: none;
transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.js .hero__sub.reveal { transition-delay: 80ms; }
.js .hero .cta.reveal { transition-delay: 150ms; }
/* Hero headline — per-word blur-in (react-bits BlurText, ported to
vanilla). script.js splits .hero__line into nodes
with --word-i index; each word fades in with a 90ms stagger, going
from blurred + slightly above to crisp at the resting baseline. The
parent's default .reveal opacity/transform is overridden so the
animation is per-word, not whole-block. */
.js .hero__title.reveal { opacity: 1; transform: none; }
.js .hero__title.reveal .word {
display: inline-block;
opacity: 0;
filter: blur(14px);
transform: translateY(-12px);
will-change: filter, transform, opacity;
}
.js .hero__title.reveal.in .word {
animation: hero-word-blur 950ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
animation-delay: calc(var(--word-i, 0) * 90ms);
}
@keyframes hero-word-blur {
0% { opacity: 0; filter: blur(14px); transform: translateY(-12px); }
60% { opacity: 0.7; filter: blur(4px); transform: translateY(2px); }
100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.js .hero__title.reveal .word {
opacity: 1; filter: none; transform: none; animation: none;
}
}
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: nowrap;
gap: clamp(12px, 2.5vw, 24px);
padding: clamp(14px, 2vh, 22px) var(--mx);
max-width: 100%;
border-bottom: 1px solid transparent;
transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.nav__brand, .nav__links { min-width: 0; }
.nav--scrolled { background: var(--bg); border-bottom-color: var(--line); }
.nav__brand { display: inline-flex; align-items: center; padding: 6px 0; }
/* Brand — spaced typographic wordmark only (no mark) */
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand__type {
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(13px, 1.35vw, 16px);
letter-spacing: 0.30em; text-transform: uppercase;
color: var(--ink); white-space: nowrap;
opacity: 1; /* visible by default (no-JS safe) */
}
/* Signal stabilization — the wordmark resolves online like a system
coming up: faint → blurred + wide tracking → sharpens → locks.
Pure CSS, auto-runs once on load (no JS, no FOUC). `backwards`
(not `forwards`): after it plays the element reverts to its
visible base style, so it is safe with motion disabled / JS off
and can never get stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
.brand__type { animation: brand-type 1750ms var(--ease) backwards; }
}
@keyframes brand-type {
0% { opacity: 0; filter: blur(5px); letter-spacing: 0.66em; transform: translateX(-3px); }
34% { opacity: 0.4; filter: blur(2.6px); letter-spacing: 0.50em; }
70% { opacity: 0.94; filter: blur(0.5px); letter-spacing: 0.35em; transform: translateX(0); }
100% { opacity: 1; filter: blur(0); letter-spacing: 0.30em; }
}
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); flex-shrink: 1; }
.nav__links a {
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(11px, 1.05vw, 13px); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink); padding: 8px 0; white-space: nowrap;
transition: opacity 220ms var(--ease);
}
.nav__links a:hover { opacity: 0.5; } /* dim, not brighten */
/* Theme toggle — sun/moon glyph button living inside .nav__links.
Sized to match a nav link, sharp-cornered to match the brand,
hover-dims rather than brightens. The two glyphs swap by CSS
based on [data-theme]; both are inline SVG inside the button. */
.theme-toggle {
appearance: none; cursor: pointer;
background: transparent; border: 0; padding: 8px;
color: var(--ink); line-height: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
transition: opacity 220ms var(--ease);
}
.theme-toggle:hover { opacity: 0.55; }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
/* ---------- Hero — monospace authority ---------- */
.hero {
position: relative;
isolation: isolate;
overflow: visible;
/* Full-width — same viewport reference as the nav (var(--mx)).
No centered max-width column: that was collapsing the hero
into the middle at browser zoom-out. */
width: 100%; max-width: none; margin: 0;
min-height: 100vh; /* fallback */
min-height: 100svh; /* zoom / mobile-UI stable */
display: flex; flex-direction: column; justify-content: center;
gap: clamp(40px, 8vh, 120px);
padding: clamp(120px, 22vh, 240px) var(--mx) clamp(64px, 10vh, 130px);
}
/* Hero light field — full-bleed behind the hero only. The canvas
carries the WebGL light; this CSS gradient is the identical-feel
fallback when WebGL/JS is unavailable. Never intercepts pointer
events, never sits over the headline column. */
.hero-smoke {
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 100vw;
width: 100dvw; /* dynamic-viewport stable; vw is the fallback above */
max-width: 100vw;
transform: translateX(-50%);
z-index: 0;
display: block;
pointer-events: none;
background:
radial-gradient(58% 80% at 82% 44%,
var(--hero-glow-a),
var(--hero-glow-b) 42%,
transparent 70%);
}
.hero > :not(.hero-smoke):not(.hero-clouds) { position: relative; z-index: 1; }
/* Eyebrow + headline travel together, tightly */
.hero__head { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 34px); }
.hero__eyebrow {
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(11px, 1vw, 13px);
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--muted); margin: 0;
}
/* Headline — quietly powerful neo-grotesk; the identity moment.
Zoom-safe large floor so it never collapses when zoomed out. */
.hero__title {
font-family: var(--font-sans); font-weight: 500;
font-size: clamp(56px, 7vw, 124px);
line-height: 1.03; letter-spacing: -0.03em;
color: var(--ink);
max-width: 16ch;
overflow-wrap: normal;
}
.hero__line { display: block; }
.hero__foot { display: flex; flex-direction: column; gap: 32px; }
.hero__ticker {
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(11px, 1vw, 12.5px);
letter-spacing: 0.16em; color: var(--dim);
margin: clamp(6px, 1.4vh, 14px) 0 0;
}
.js .hero__ticker.reveal { transition-delay: 320ms; }
.hero__sub {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6; color: var(--muted);
max-width: 46ch;
}
/* ---------- CTA — uppercase mono, sharp, dims on hover ---------- */
.cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--font-mono); font-weight: 400;
font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink);
border: 1px solid var(--line-2);
padding: 15px 24px;
transition: opacity 220ms var(--ease);
}
.cta:hover { opacity: 0.55; }
.cta__arr { transition: transform 240ms var(--ease); }
.cta:hover .cta__arr { transform: translateX(4px); }
.cta--lg { padding: 17px 28px; font-size: 14px; }
/* Hero CTA row — primary CTA + optional soft secondary link. */
.hero__ctas {
display: flex; align-items: center;
gap: clamp(20px, 3vw, 36px);
flex-wrap: wrap;
align-self: flex-start;
}
.cta-soft {
font-family: var(--font-mono); font-weight: 400;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); padding: 8px 0;
transition: color 220ms var(--ease);
}
.cta-soft:hover { color: var(--ink); }
/* ---------- Process — 4-step row inside Approach ---------- */
.process {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 4vw, 56px);
margin: 0;
padding-top: clamp(28px, 4vh, 44px);
border-top: 1px solid var(--line);
}
.process li { display: flex; flex-direction: column; gap: 12px; }
.process__idx {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; color: var(--muted);
}
.process__nm {
font-family: var(--font-sans); font-weight: 500;
font-size: clamp(17px, 1.6vw, 22px);
line-height: 1.2; letter-spacing: -0.005em;
color: var(--ink);
}
.process__d {
font-size: clamp(13px, 0.95vw, 15px);
line-height: 1.5; color: var(--muted);
max-width: 28ch;
}
/* ---------- Integrated with your stack — auto-scrolling marquee ----------
Full-bleed track so names appear to flow from off-screen to off-screen.
Two identical tracks loop on a single CSS animation; the second is the
seamless tail of the first. Pauses on hover. Reduced-motion stops it. */
.integrations {
width: 100%; margin: 0;
padding: clamp(48px, 7vh, 88px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.integrations__eyebrow {
max-width: var(--container-wide); margin: 0 auto var(--rhythm-eyebrow);
padding: 0 var(--mx);
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted);
text-align: center;
}
.integrations__lead {
max-width: var(--container-text); margin: 0 auto var(--rhythm-body);
padding: 0 var(--mx);
font-family: var(--font-sans);
font-size: var(--type-lead);
line-height: 1.55;
color: var(--ink);
text-align: center;
}
.marquee {
display: flex; gap: 0;
width: 100%; overflow: hidden;
/* Wider edge-fade (12% each side) makes the soft cut-off obvious
instead of the names hard-clipping at the viewport edge. */
mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.marquee__track {
display: flex; flex-shrink: 0; align-items: center;
gap: clamp(20px, 2.5vw, 40px);
padding-right: clamp(20px, 2.5vw, 40px);
white-space: nowrap;
animation: marquee-scroll 60s linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(14px, 1.2vw, 18px);
letter-spacing: 0.08em;
color: var(--ink);
}
.marquee__dot {
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(14px, 1.2vw, 18px);
color: var(--muted);
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* ---------- Approach — now: the 4-step process only.
The philosophy statement has moved up to frame the live demo. ---------- */
.approach { max-width: var(--maxw); margin: 0 auto; padding: var(--sy) var(--mx); }
.approach__eyebrow {
font-family: var(--font-mono); font-weight: 400;
font-size: var(--type-eyebrow); letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--rhythm-eyebrow);
}
.approach__statement {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(24px, 3.4vw, 46px);
line-height: 1.22; letter-spacing: -0.01em;
color: var(--ink); max-width: 900px;
}
/* ---------- Demo anatomy link — inline mono link directly under
the demo lightbox trigger; replaces the v5 bordered teaser card. ---------- */
.demo__anatomy {
display: inline-block; margin-top: clamp(20px, 2.6vh, 32px);
font-family: var(--font-mono); font-weight: 400;
font-size: clamp(11px, 1vw, 13px);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); padding: 6px 0;
border-bottom: 1px solid var(--line);
transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.demo__anatomy:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* ---------- For your operation — single-statement section, the
homepage's emotional payload (tribal-knowledge differentiator).
The hairline-rows .cap* rules below are kept for now; they will be
pruned in a follow-up cleanup commit once we confirm nothing else
references them. ---------- */
.capabilities {
max-width: var(--maxw); margin: 0 auto;
padding: clamp(80px, 12vh, 200px) var(--mx);
}
.capabilities__eyebrow {
font-family: var(--font-mono); font-weight: 400;
font-size: var(--type-eyebrow); letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--rhythm-eyebrow);
}
.capabilities__headline {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--type-h2);
line-height: 1.1; letter-spacing: -0.02em;
color: var(--ink); margin: 0 0 var(--rhythm-headline);
max-width: 22ch;
text-wrap: balance;
/* ShinyText (react-bits, ported to vanilla): a brighter band crosses
the text once when it scrolls into view. Both ends of the gradient
are --ink and background-repeat defaults to `repeat`; out-of-view
pixels are seamlessly filled by the next tile so the headline always
reads as solid --ink before, between, and after the shine pass.
v6.9: wider band (30→70%, 40% of the gradient) and a flat 5% white
plateau makes the sweep clearly perceptible — earlier 35–50–65 was
too narrow to register at the animation speed. */
background-image: linear-gradient(110deg,
var(--ink) 0%, var(--ink) 28%,
var(--shine-peak) 47%, var(--shine-peak) 53%,
var(--ink) 72%, var(--ink) 100%);
background-size: 220% 100%;
background-position: 165% center;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.js .capabilities__headline.reveal.in {
animation: capabilities-shine 1900ms cubic-bezier(0.2, 0.6, 0.2, 1) 300ms 1 forwards;
}
@keyframes capabilities-shine {
from { background-position: 165% center; }
to { background-position: -65% center; }
}
@media (prefers-reduced-motion: reduce) {
.js .capabilities__headline.reveal.in {
animation: none; background-position: -65% center;
}
}
.capabilities__body {
font-family: var(--font-sans); font-weight: 400;
font-size: var(--type-lead);
line-height: 1.55; letter-spacing: -0.005em;
color: var(--muted); margin: 0 0 var(--rhythm-para);
max-width: 62ch;
text-wrap: pretty;
}
.capabilities__close {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--type-h3);
line-height: 1.3; letter-spacing: -0.01em;
color: var(--ink); margin: var(--rhythm-body) 0 0;
max-width: 36ch;
text-wrap: balance;
}
/* (.beat removed in v6 — the line moved to the chat module's headline) */
/* ---------- Also offered — quiet hairline card for segment 1 ---------- */
.also-offered { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--mx); }
.also-offered__row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) auto;
gap: clamp(24px, 4vw, 56px);
align-items: center;
padding: clamp(28px, 4vw, 44px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: var(--ink); text-decoration: none;
transition: opacity 220ms var(--ease);
}
.also-offered__row:hover { opacity: 0.7; }
.also-offered__eyebrow {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 10px;
}
.also-offered__body {
font-family: var(--font-sans); font-weight: 400;
font-size: var(--type-body);
line-height: 1.55; color: var(--muted); margin: 0;
max-width: 58ch;
}
.also-offered__cta {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink); white-space: nowrap;
}
.also-offered__arr { transition: transform 240ms var(--ease); }
.also-offered__row:hover .also-offered__arr { transform: translateX(4px); }
@media (max-width: 720px) {
.also-offered__row {
grid-template-columns: 1fr;
gap: 16px;
padding: clamp(24px, 5vw, 36px) 0;
}
}
/* ---------- Chat — soft conversion. Big input, send-arrow button,
suggestion pills. Stub UI for now; submit hands off the message via
URL parameter to /contact.html for human follow-up. Later, OpenAI
integration replaces the form action with a fetch + 3 suggestions. */
.chat {
max-width: var(--container-wide); margin: 0 auto;
padding: var(--section-y) var(--mx) var(--section-y-tight);
text-align: center;
}
.chat__eyebrow {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--rhythm-eyebrow);
}
.chat__h {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--type-h2);
line-height: 1.1; letter-spacing: -0.02em;
color: var(--ink); margin: 0 auto var(--rhythm-headline);
max-width: 22ch;
text-wrap: balance;
}
.chat__d {
font-family: var(--font-sans); font-weight: 400;
font-size: var(--type-lead);
line-height: 1.55; color: var(--muted);
margin: 0 auto var(--rhythm-body);
max-width: 56ch;
text-wrap: pretty;
}
.chat__form {
position: relative;
display: flex; align-items: center;
max-width: 720px; margin: 0 auto clamp(20px, 2.4vh, 28px);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 4px 4px 4px 24px;
background: rgba(var(--ink-rgb), 0.04);
transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.chat__form:focus-within {
border-color: var(--ink);
background: rgba(var(--ink-rgb), 0.07);
}
.chat__input {
flex: 1; border: 0; outline: 0; background: transparent;
color: var(--ink); padding: 14px 8px 14px 0;
font-family: var(--font-sans); font-size: clamp(14px, 1.15vw, 16px);
line-height: 1.4;
min-width: 0;
}
/* Scoped to 0.55 alpha (vs --dim's 0.45) — bumps contrast over
--bg to 4.92:1, clearing WCAG AA (need 4.5). --dim itself stays
at 0.45 for hover-dim usage elsewhere. */
.chat__input::placeholder { color: rgba(var(--ink-rgb), 0.55); }
.chat__send {
flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 50%;
border: 0; background: var(--ink); color: var(--bg);
display: grid; place-items: center; cursor: pointer;
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.chat__send:hover { opacity: 0.85; transform: scale(1.04); }
.chat__send svg { width: 18px; height: 18px; }
.chat__suggestions {
list-style: none; margin: 0 auto clamp(28px, 4vh, 44px);
padding: 0;
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center;
max-width: 720px;
}
.chat__pill {
appearance: none; cursor: pointer;
border: 1px solid var(--line-2);
background: transparent;
border-radius: 999px;
padding: 13px 18px; /* 44px tap target (WCAG 2.5.5) */
min-height: 44px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted);
transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.chat__pill:hover {
color: var(--ink); border-color: var(--ink);
background: rgba(var(--ink-rgb), 0.04);
}
.chat__note {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted); margin: 0;
}
.chat__note a {
color: var(--ink);
border-bottom: 1px solid var(--line-2);
padding-bottom: 1px;
transition: border-color 220ms var(--ease);
}
.chat__note a:hover { border-bottom-color: var(--ink); }
@media (max-width: 720px) {
.chat__form { padding: 4px 4px 4px 18px; }
.chat__input { padding: 12px 6px 12px 0; }
}
/* ---------- Toolbox builder — industry + size + process → SaaS picks
(replaces the simple chat input; OpenAI-backed.) ---------- */
.toolbox {
max-width: var(--container-text); margin: 0 auto var(--rhythm-body);
text-align: left;
display: flex; flex-direction: column;
gap: clamp(26px, 3.6vh, 38px);
}
.toolbox__field { border: 0; padding: 0; margin: 0; }
.toolbox__label {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin-bottom: 14px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.toolbox__idx {
display: inline-block; padding: 3px 8px; border-radius: 4px;
background: rgba(var(--ink-rgb), 0.06); color: var(--ink);
font-weight: 700; letter-spacing: 0.10em;
}
.toolbox__opt {
font-size: 10px; letter-spacing: 0.16em;
color: rgba(var(--ink-rgb), 0.42);
margin-left: auto;
}
.toolbox__chips {
display: flex; flex-wrap: wrap; gap: 10px;
}
.toolbox__chip {
appearance: none; cursor: pointer;
border: 1px solid var(--line-2);
background: transparent;
border-radius: 999px;
padding: 11px 18px; min-height: 44px;
font-family: var(--font-sans); font-size: 14px;
color: var(--ink);
transition: color 200ms var(--ease), border-color 200ms var(--ease),
background 200ms var(--ease), transform 180ms var(--ease);
}
.toolbox__chip:hover {
border-color: var(--ink);
background: rgba(var(--ink-rgb), 0.04);
transform: translateY(-1px);
}
.toolbox__chip.is-on {
background: var(--ink); color: var(--bg);
border-color: var(--ink);
transform: translateY(0);
}
.toolbox__other {
margin-top: 12px; width: 100%;
border: 0; border-bottom: 1px solid var(--line-2);
background: transparent; padding: 10px 0;
font-family: var(--font-sans); font-size: 15px;
color: var(--ink); outline: 0;
transition: border-color 220ms var(--ease);
}
.toolbox__other:focus { border-bottom-color: var(--ink); }
.toolbox__textarea {
width: 100%; resize: vertical; min-height: 88px;
border: 1px solid var(--line-2); border-radius: 14px;
background: rgba(var(--ink-rgb), 0.04);
padding: 14px 16px;
font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
color: var(--ink); outline: 0;
transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.toolbox__textarea:focus {
border-color: var(--ink);
background: rgba(var(--ink-rgb), 0.07);
}
.toolbox__textarea::placeholder { color: rgba(var(--ink-rgb), 0.5); }
.toolbox__row {
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap; margin-top: 4px;
}
.toolbox__submit {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 26px;
border: 0; border-radius: 999px;
background: var(--ink); color: var(--bg);
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toolbox__submit:hover { opacity: 0.88; transform: translateY(-1px); }
.toolbox__submit[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.toolbox__submit.is-loading .toolbox__submit-l::after {
content: ""; display: inline-block; margin-left: 10px;
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: toolbox-spin .8s linear infinite;
vertical-align: -2px;
}
@keyframes toolbox-spin { to { transform: rotate(360deg); } }
.toolbox__submit-a { font-size: 16px; line-height: 1; }
.toolbox__hint {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); margin: 0;
flex: 1; min-width: 240px;
}
/* Results pane — populated by JS after the API returns. */
.toolbox__results {
max-width: var(--container-text); margin: 0 auto var(--rhythm-body);
text-align: left;
}
.toolbox__results[hidden] { display: none; }
.toolbox__results-h {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 20px;
}
.toolbox__results-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin-bottom: 22px;
}
.toolbox__card {
border: 1px solid var(--line-2); border-radius: 16px;
padding: 20px 22px; background: rgba(var(--ink-rgb), 0.02);
display: flex; flex-direction: column; gap: 10px;
transition: border-color 220ms var(--ease), transform 200ms var(--ease),
background 220ms var(--ease);
}
.toolbox__card:hover {
border-color: var(--ink);
background: rgba(var(--ink-rgb), 0.04);
transform: translateY(-2px);
}
.toolbox__card-cat {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted);
}
.toolbox__card-h {
font-family: var(--font-sans); font-weight: 600;
font-size: 19px; letter-spacing: -0.005em;
color: var(--ink); margin: 0;
}
.toolbox__card-why {
font-family: var(--font-sans); font-size: 14px;
line-height: 1.5; color: var(--muted); margin: 0;
}
.toolbox__card-link {
margin-top: auto;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--line-2); padding-bottom: 1px;
align-self: flex-start;
transition: border-color 220ms var(--ease);
}
.toolbox__card-link:hover { border-bottom-color: var(--ink); }
.toolbox__gaps {
border-left: 2px solid var(--ink); padding: 4px 0 4px 16px;
font-family: var(--font-sans); font-size: 15px;
line-height: 1.55; color: var(--ink);
margin: 0 0 6px;
}
.toolbox__gaps b { font-weight: 600; }
.toolbox__error {
border: 1px solid var(--line-2); border-radius: 12px;
padding: 14px 18px; font-size: 14px; color: var(--muted);
background: rgba(var(--ink-rgb), 0.03);
}
/* Compare-mode chrome — cards get a checkbox toggle + 'compare these' button */
.toolbox__compare-bar {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap; margin: -6px 0 18px;
}
.toolbox__compare-toggle {
appearance: none; cursor: pointer;
border: 1px solid var(--line-2);
background: transparent;
border-radius: 999px; padding: 9px 16px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink);
transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.toolbox__compare-toggle:hover { background: rgba(var(--ink-rgb), 0.04); }
.toolbox__compare-toggle.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toolbox__compare-count {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.toolbox__card.is-comparing { padding-top: 50px; position: relative; }
.toolbox__card-check {
position: absolute; top: 14px; right: 14px;
width: 22px; height: 22px; border-radius: 6px;
border: 1.5px solid var(--line-2);
background: transparent;
cursor: pointer;
display: none; align-items: center; justify-content: center;
transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.toolbox__card.is-comparing .toolbox__card-check { display: inline-flex; }
.toolbox__card-check.is-on { background: var(--ink); border-color: var(--ink); }
.toolbox__card-check.is-on::after {
content: ""; width: 10px; height: 5px;
border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
transform: rotate(-45deg) translate(1px, -1px);
}
/* Compare side-by-side panel */
.toolbox__compare-panel {
max-width: 880px; margin: 0 auto clamp(28px, 4vh, 44px);
border: 1px solid var(--line-2); border-radius: 16px;
padding: 20px 22px;
background: rgba(var(--ink-rgb), 0.02);
}
.toolbox__compare-panel[hidden] { display: none; }
.toolbox__compare-h {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin: 0 0 16px;
}
.toolbox__compare-grid {
display: grid; gap: 0;
grid-template-columns: 1.1fr repeat(var(--tb-n, 2), 1fr);
align-items: stretch;
}
.toolbox__compare-row {
display: contents;
}
.toolbox__compare-cell, .toolbox__compare-key {
padding: 12px 14px;
border-bottom: 1px solid var(--line-2);
font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
color: var(--ink);
}
.toolbox__compare-key {
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
vertical-align: top;
}
.toolbox__compare-head {
font-family: var(--font-sans); font-weight: 600;
font-size: 16px; letter-spacing: -0.005em;
color: var(--ink);
padding-bottom: 8px;
}
.toolbox__compare-head .cat {
display: block;
font-family: var(--font-mono); font-weight: 400; font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); margin-bottom: 4px;
}
.toolbox__compare-yesno { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.toolbox__compare-yesno.yes { color: var(--ink); }
.toolbox__compare-yesno.no { color: var(--muted); }
/* Email-me form (post-results) */
.toolbox__email {
max-width: 720px; margin: 0 auto clamp(28px, 4vh, 44px);
padding: 22px 24px;
border: 1px solid var(--line-2); border-radius: 18px;
background: rgba(var(--ink-rgb), 0.03);
display: flex; flex-direction: column; gap: 14px;
}
.toolbox__email[hidden] { display: none; }
.toolbox__email-head { display: flex; flex-direction: column; gap: 6px; }
.toolbox__email-eyebrow {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin: 0;
}
.toolbox__email-d {
font-family: var(--font-sans); font-size: 14.5px;
line-height: 1.5; color: var(--ink); margin: 0;
}
.toolbox__email-fields {
display: grid; gap: 10px;
grid-template-columns: 1fr 1.4fr auto;
align-items: stretch;
}
.toolbox__email-name, .toolbox__email-input {
border: 1px solid var(--line-2);
background: rgba(var(--ink-rgb), 0.04);
border-radius: 12px;
padding: 13px 16px;
font-family: var(--font-sans); font-size: 14.5px;
color: var(--ink); outline: 0;
transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.toolbox__email-name:focus, .toolbox__email-input:focus {
border-color: var(--ink); background: rgba(var(--ink-rgb), 0.07);
}
.toolbox__email-submit {
appearance: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
border: 0; border-radius: 12px;
background: var(--ink); color: var(--bg);
font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
transition: opacity 200ms var(--ease);
}
.toolbox__email-submit:hover { opacity: 0.88; }
.toolbox__email-submit[disabled] { opacity: 0.45; cursor: not-allowed; }
.toolbox__email-status {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted); margin: 0; min-height: 16px;
}
.toolbox__email-status.is-ok { color: var(--ink); }
.toolbox__email-status.is-error { color: #b91c1c; }
@media (max-width: 720px) {
.toolbox__email-fields { grid-template-columns: 1fr; }
.toolbox__email-submit { width: 100%; justify-content: center; }
.toolbox__compare-grid { grid-template-columns: 1fr; gap: 0; }
.toolbox__compare-key { padding: 14px 6px 4px; border-bottom: 0; }
.toolbox__compare-cell { padding: 0 6px 14px; border-bottom: 1px solid var(--line-2); }
}
/* Custom-build pitch — always visible below the form/results. */
.toolbox__custom {
max-width: var(--container-text); margin: 0 auto var(--rhythm-body);
text-align: center;
padding: var(--section-y-tight) clamp(22px, 3vw, 34px) 0;
border-top: 1px solid var(--line-2);
}
.toolbox__custom-eyebrow {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--rhythm-eyebrow);
}
.toolbox__custom-h {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--type-h3);
line-height: 1.2; letter-spacing: -0.01em;
color: var(--ink); margin: 0 auto var(--rhythm-headline);
/* No max-width — short sentence sits on one line on desktop,
wraps naturally only on narrow viewports. */
text-wrap: balance;
}
.toolbox__custom-h em { font-style: italic; color: var(--ink); }
.toolbox__custom-d {
font-family: var(--font-sans); font-size: var(--type-body);
line-height: 1.65; color: var(--muted); margin: 0 auto var(--rhythm-body);
max-width: 56ch;
/* Balance line lengths so the orphan-fragment ('rules.' alone on
its own line) doesn't dangle — modern Chrome/Safari/FF wrap the
paragraph so every line ends at roughly the same column. */
text-wrap: pretty;
}
.toolbox__custom-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 24px;
border: 1px solid var(--ink); border-radius: 999px;
font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
color: var(--ink);
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.toolbox__custom-cta:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 720px) {
.toolbox { gap: 22px; }
.toolbox__chips { gap: 8px; }
.toolbox__chip { padding: 10px 14px; font-size: 13px; }
.toolbox__row { gap: 14px; }
.toolbox__submit { width: 100%; justify-content: center; }
.toolbox__hint { text-align: center; }
}
/* ---------- Final conversion CTA (near the bottom) ---------- */
.final-cta {
max-width: var(--maxw); margin: 0 auto;
padding: var(--sy) var(--mx);
display: flex; flex-direction: column; gap: 34px;
}
.final-cta__line {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(22px, 3vw, 40px);
line-height: 1.25; letter-spacing: -0.01em;
color: var(--ink); max-width: 20ch;
}
/* ---------- Disconnected tools → one operating system
(Three.js + GSAP ScrollTrigger). Tall scroll track; the stage
is pinned (pinSpacing:false) while progress scrubs 0→1. The
`--static` modifier (set by JS when motion/gsap/webgl is off)
collapses it to a normal block showing the assembled frame. */
/* Pin scroll length — 220vh keeps the four scrubbed beats from feeling
draggy. Was 320vh (≈ three viewport heights of pinned scrub above
the 100vh stage) which read as a long static stretch on full-page
captures and felt slow on mobile. 220vh gives the stage 120vh of
scrub — about 30vh per beat, enough for the fade-through without
dwelling. */
.machine { position: relative; height: 220vh; overflow: hidden; }
.machine__stage {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.machine__canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
pointer-events: none;
z-index: 0;
}
/* Projected system glyphs — crisp DOM type, never blurry. */
.machine__labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* A system: a monochrome line glyph + caption, embedded in space. */
.machine__sys {
position: absolute; top: 0; left: 0;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: rgba(232, 240, 250, 0.96);
white-space: nowrap;
will-change: transform, opacity;
}
.machine__sys svg {
width: clamp(26px, 2.5vw, 38px); height: clamp(26px, 2.5vw, 38px);
display: block; stroke: currentColor; fill: none;
}
.machine__sys b {
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(10px, 0.82vw, 13px);
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(228, 236, 248, 0.86);
}
/* Five narrative beats (Fragmented → Recognition → Routing →
Synchronisation → Engine). All share the protected copy zone and
crossfade — JS scrubs opacity per scroll section. Start hidden. */
.machine__copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.machine__beat {
position: absolute;
left: var(--mx); max-width: min(32ch, 34vw);
top: 50%; transform: translateY(-50%);
opacity: 0; will-change: opacity;
}
.machine__beat[data-beat="0"] { top: clamp(92px, 15vh, 190px); transform: none; }
.machine__kicker {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--muted); margin: 0 0 clamp(14px, 2vh, 22px);
}
.machine__lede {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(22px, 2.9vw, 38px);
line-height: 1.26; letter-spacing: -0.012em; color: var(--ink); margin: 0;
}
.machine__lede .dim { color: var(--muted); }
.machine__title {
font-family: var(--font-sans); font-weight: 500;
font-size: clamp(28px, 3.6vw, 54px);
line-height: 1.14; letter-spacing: -0.012em; color: var(--ink); margin: 0;
}
.machine__sub {
margin: clamp(18px, 2.4vh, 30px) 0 0;
font-size: clamp(14px, 1.05vw, 17px);
line-height: 1.6; color: var(--muted); max-width: 44ch;
}
/* No motion / no gsap / no WebGL → graceful fallback: hide the canvas,
stack all four beats vertically as plain copy. The section is never
left blank, regardless of why the cinematic couldn't boot. */
.machine--static { height: auto; }
.machine--static .machine__stage {
height: auto; min-height: clamp(560px, 70vh, 820px);
padding: clamp(80px, 12vh, 160px) 0 clamp(64px, 10vh, 120px);
}
.machine--static .machine__canvas,
.machine--static .machine__labels { display: none; }
.machine--static .machine__copy {
position: relative; inset: auto; z-index: 1;
display: flex; flex-direction: column;
gap: clamp(40px, 5vh, 64px);
max-width: 56ch;
margin: 0 auto 0 var(--mx);
padding-right: var(--mx);
}
.machine--static .machine__beat,
.machine--static .machine__beat[data-beat="0"] {
position: relative; top: auto; left: auto; right: auto;
transform: none; opacity: 1 !important; max-width: none;
}
@media (prefers-reduced-motion: reduce) {
.machine { height: auto; }
.machine__stage {
height: auto; min-height: clamp(560px, 70vh, 820px);
padding: clamp(80px, 12vh, 160px) 0 clamp(64px, 10vh, 120px);
}
.machine__canvas, .machine__labels { display: none; }
.machine__copy {
position: relative; inset: auto; z-index: 1;
display: flex; flex-direction: column;
gap: clamp(40px, 5vh, 64px);
max-width: 56ch;
margin: 0 auto 0 var(--mx);
padding-right: var(--mx);
}
.machine__beat, .machine__beat[data-beat="0"] {
position: relative; top: auto; left: auto; right: auto;
transform: none; opacity: 1 !important; max-width: none;
}
}
@media (max-width: 860px) {
.machine { height: 300vh; }
/* Mobile = copy on top, visual below. Every beat pins to the top
band; the field is mapped to the lower area in JS. */
.machine__beat,
.machine__beat[data-beat="0"] {
left: var(--mx); right: var(--mx); max-width: none;
top: clamp(56px, 9vh, 104px); transform: none;
}
}
/* ---------- Demo / product showcase (reserved next module) ---------- */
.demo { max-width: var(--maxw); margin: 0 auto; padding: var(--sy) var(--mx); }
.demo__eyebrow {
font-family: var(--font-mono); font-size: var(--type-eyebrow);
letter-spacing: var(--eyebrow-track); text-transform: uppercase;
color: var(--muted); margin: 0 0 var(--rhythm-eyebrow);
}
.demo__title {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--type-h2);
line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0;
max-width: 22ch;
text-wrap: balance;
}
.demo__sub {
margin: var(--rhythm-headline) 0 var(--rhythm-body);
font-family: var(--font-sans);
font-size: var(--type-lead); line-height: 1.55;
color: var(--muted); max-width: 56ch;
text-wrap: pretty;
}
/* Teaser → /demo. A restrained architectural still (not a faked
dashboard) with a quiet play affordance. Hover dims; the glyph
nudges right — the site's CTA convention, never a glow. */
.demo__frame {
position: relative; display: block;
aspect-ratio: 16 / 9;
border: 1px solid var(--line);
overflow: hidden;
transition: border-color 300ms var(--ease);
}
.demo__frame:hover { border-color: var(--line-2); }
.demo__still {
position: absolute; inset: 0; display: flex;
opacity: 0.5; transition: opacity 300ms var(--ease);
}
.demo__frame:hover .demo__still { opacity: 0.36; }
.demo__still-rail {
width: 16%; border-right: 1px solid var(--line);
}
.demo__still-body {
flex: 1; padding: clamp(20px, 4vw, 48px);
display: flex; flex-direction: column; justify-content: center;
gap: clamp(14px, 2.4vw, 26px);
}
.demo__still-row { height: 1px; background: var(--line); }
.demo__still-row:nth-child(1) { width: 64%; }
.demo__still-row:nth-child(2) { width: 88%; }
.demo__still-row:nth-child(3) { width: 47%; }
.demo__play {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 16px;
}
.demo__play-ic {
font-size: clamp(22px, 2.6vw, 32px); color: var(--ink); line-height: 1;
transition: transform 260ms var(--ease);
}
.demo__frame:hover .demo__play-ic { transform: translateX(4px); }
.demo__cap {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
/* ---------- Footer ---------- */
.footer {
max-width: var(--maxw); margin: 0 auto;
padding: clamp(48px, 6vw, 80px) var(--mx);
border-top: 1px solid var(--line);
display: block;
}
/* Top row: brand block (signature stacked over studio statement) · nav
links — 2 columns, aligned to top so the signature anchors the
left side and the nav anchors the right. */
.footer__top {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(32px, 5vw, 80px);
align-items: stretch;
padding-bottom: clamp(28px, 3.5vw, 44px);
border-bottom: 1px solid var(--line);
margin-bottom: clamp(20px, 2.5vw, 32px);
}
/* The brand block: signature sits over the studio statement like a
letterhead — the signature is the mark, the mono line is the legend.
`justify-content: flex-end` drops the whole block to the bottom of
the grid row so the tagline baseline aligns with the last footer
nav link on the right. */
.footer__brand {
display: flex; flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: clamp(18px, 2vw, 26px);
}
/* Signature — bigger, more present. The source PNG is black ink;
invert(1) flips it to light, then opacity dials the prominence
down to "signed off, not shouting". */
.footer__sig {
width: clamp(240px, 22vw, 340px);
height: auto;
opacity: 0.88;
/* Force every non-transparent pixel of the signature PNG to the
ink colour of the active theme:
dark mode → brightness(0) invert(1) → white on dark
light mode → none → black on white
Transparent areas stay transparent in both. */
filter: var(--sig-filter);
}
.footer__where {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); line-height: 1.75;
}
.footer__nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.footer__nav a {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--ink); padding: 10px 0; /* ≥44px tap target on mobile */
transition: opacity 220ms var(--ease);
}
.footer__nav a:hover { opacity: 0.55; }
.footer__row {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.footer__mail {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted); padding: 6px 0;
transition: opacity 220ms var(--ease);
}
.footer__mail:hover { opacity: 0.55; }
.footer__legal {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
}
/* ============================================================
SUBPAGES — case-study.html, contact.html.
Same monochrome system. Mono utility metadata only.
============================================================ */
.kit-shead { margin-bottom: clamp(40px, 5vw, 64px); }
.kit-shead .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.kit-shead .title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(26px, 3.2vw, 46px); color: var(--ink); margin: 12px 0; letter-spacing: -0.01em; }
.kit-shead .blurb { font-size: 15px; color: var(--muted); max-width: 60ch; }
.it { font-style: italic; }
em { font-style: normal; color: var(--ink); }
/* Contact */
.ct-hero { padding: 22vh 0 7vh; }
.ct-hero .eyebrow-row {
display: flex; flex-wrap: wrap; gap: 24px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 40px;
}
.ct-hero h1 {
font-family: var(--font-mono); font-weight: 300;
font-size: clamp(32px, 5.2vw, 60px); line-height: 1.12;
letter-spacing: -0.02em; color: var(--ink); max-width: 18ch;
}
.ct-hero .sub { margin-top: 22px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.ct-grid { display: grid; grid-template-columns: 1.45fr 0.85fr; gap: clamp(40px, 6vw, 88px); padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 9vw, 110px); }
.ct-form .field { margin-bottom: 34px; }
.ct-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ct-form label {
display: flex; justify-content: space-between; gap: 16px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
margin-bottom: 12px;
}
.ct-form .req { color: var(--muted); opacity: 0.7; }
.ct-form input,
.ct-form textarea {
width: 100%; background: transparent; border: 0;
border-bottom: 1px solid var(--line-2); color: var(--ink);
padding: 12px 0; font-size: 16px; transition: border-color 220ms var(--ease);
}
.ct-form input::placeholder,
.ct-form textarea::placeholder { color: var(--dim); }
.ct-form input:focus,
.ct-form textarea:focus { outline: 0; border-bottom-color: var(--ink); }
.ct-form textarea { resize: vertical; min-height: 120px; }
.ct-form .options { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-form .opt {
border: 1px solid var(--line-2); border-radius: 0;
padding: 9px 16px; font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
cursor: pointer; user-select: none;
transition: opacity 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.ct-form .opt:hover { opacity: 0.6; }
.ct-form .opt.on { color: var(--bg); background: var(--ink); border-color: var(--ink); opacity: 1; }
.ct-form .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.ct-form .note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ct-form .submit {
appearance: none; cursor: pointer;
background: var(--ink); color: var(--bg); border: 0; border-radius: 0;
padding: 15px 26px;
font-family: var(--font-mono); font-size: 13px; font-weight: 400;
letter-spacing: 0.14em; text-transform: uppercase;
transition: opacity 200ms var(--ease);
}
.ct-form .submit:hover { opacity: 0.85; }
.ct-aside .block { padding: 28px 0; border-top: 1px solid var(--line); }
.ct-aside .block:first-child { padding-top: 0; border-top: 0; }
.ct-aside .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ct-aside .ttl { font-family: var(--font-sans); font-weight: 500; font-size: clamp(19px, 2.1vw, 26px); color: var(--ink); margin: 10px 0; }
.ct-aside p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.ct-aside .email { color: var(--ink); }
.ct-aside .email:hover { opacity: 0.55; }
.ct-fyi { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px); padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
.ct-fyi .q { font-family: var(--font-sans); font-weight: 500; font-size: 19px; color: var(--ink); margin-bottom: 10px; }
.ct-fyi .a { font-size: 14px; color: var(--muted); line-height: 1.6; }
.ct-fyi .a a { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color 220ms var(--ease); }
.ct-fyi .a a:hover { border-bottom-color: var(--ink); }
/* Case study */
.cs-hero { padding: 22vh 0 5vh; }
.cs-hero .meta-row,
.cs-next .label,
.cs-narr .label,
.cs-quote-block .credit,
figcaption {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.cs-hero .meta-row { display: flex; flex-wrap: wrap; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.cs-hero h1 { font-family: var(--font-mono); font-weight: 300; font-size: clamp(34px, 5.6vw, 66px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.cs-hero .summary { display: flex; gap: 24px; margin-top: 32px; max-width: 760px; }
.cs-hero .summary .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 4px; }
.cs-hero .lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--ink); }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.cs-meta .k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cs-meta .v { font-size: 14px; color: var(--ink); }
.cs-cover { position: relative; aspect-ratio: 16 / 7; overflow: hidden; border: 1px solid var(--line); margin: clamp(40px, 6vw, 64px) 0; }
.cs-cover .fill, .cs-grid .fill { position: absolute; inset: 0; }
.bg-1, .bg-2, .bg-3, .bg-4 { background: rgba(var(--ink-rgb), 0.03); }
.cs-cover .stamp, .cs-cover .credit { position: absolute; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cs-cover .stamp { top: 16px; left: 16px; }
.cs-cover .credit { bottom: 16px; right: 16px; }
.cs-narr { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 72px) 0; }
.cs-narr .label { display: block; margin-bottom: 24px; }
.cs-narr .body p { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; color: var(--muted); margin-bottom: 18px; }
.cs-narr .first { color: var(--ink); }
.cs-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; }
.cs-grid figure { margin: 0; }
.cs-grid .frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); }
.cs-grid figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.cs-quote-block { max-width: 900px; margin: 0 auto; padding: clamp(64px, 10vw, 120px) 0; }
.cs-quote-block .text { font-family: var(--font-sans); font-weight: 400; font-size: clamp(24px, 3vw, 40px); line-height: 1.28; color: var(--ink); letter-spacing: -0.01em; }
.cs-quote-block .credit { display: flex; gap: 16px; margin-top: 32px; }
.cs-deliverables { padding: clamp(56px, 8vw, 88px) 0; border-top: 1px solid var(--line); }
.cs-deliverables ul { list-style: none; }
.cs-deliverables li { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
.cs-deliverables li .idx { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cs-deliverables li .ttl { font-family: var(--font-sans); font-weight: 500; font-size: clamp(18px, 2vw, 25px); color: var(--ink); }
.cs-deliverables li .qty { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cs-next { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(64px, 9vw, 110px) 0; border-top: 1px solid var(--line); }
.cs-next .label { display: block; }
.cs-next__note { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 32ch; }
.cs-next .title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(22px, 3vw, 40px); color: var(--ink); letter-spacing: -0.01em; }
.cs-next .arr { color: var(--ink); }
.cs-next__note a { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color 220ms var(--ease); }
.cs-next__note a:hover { border-bottom-color: var(--ink); }
/* ============================================================
LIGHT-THEME COMPONENT OVERRIDES — v6.12 experimental.
For surfaces whose dark-mode treatment cannot just be tokenised:
· Hero light-field WebGL canvas — tuned for dark; we hide it
in light mode and let the .hero-smoke CSS fallback (themed)
carry the surface. hero-smoke.js also bails early to avoid
WebGL allocation.
· Machine cinematic canvas — same treatment; the static-fallback
layout (.machine--static) is forced via JS in light mode.
· Demo lightbox interior — left untouched on purpose. The demo
embed has its own dark x.ai chrome that we want to preserve;
opening the lightbox from a white site feels like watching
a film in a cinema (intentional contrast).
============================================================ */
/* Hero light-mode — Three.js shader runs in both themes.
hero-smoke.js sets `u_themeLight = 1.0` when
and the fragment shader branches its colour ramp: white sky base,
blue-gray cloud body, ink shadow core. Full mouse trail / pulse /
breathing logic shared. No CSS override needed here. */
/* The cinematic stays — we just flip its colour identity for light
mode. `filter: invert(1) hue-rotate(180deg)` on the WebGL canvas
inverts every drawn pixel (white glowing signals → dark ink
signals) and rotates the hue 180° back so warm/cool intent is
preserved (instead of cool→warm swap that pure invert causes).
Cost: zero — single CSS rule. Shader code is unchanged.
Result: the same 4-beat cinematic, now reading as ink on paper
instead of light on void. */
/* v6.12.20 — canvas filter removed. Machine cinematic now handles
theme natively in its WebGL shaders (bg + gear ink + line colours
all set via window.__lightMode). This unlocks direct gold colour
without the invert+hue-rotate pre-image gymnastics. */
/* The DOM-side system labels (projected glyphs + captions) carry
hard-coded off-white colours from the dark composition; theme
them for light. */
[data-theme="light"] .machine .machine__sys {
color: rgba(13, 13, 13, 0.86);
}
[data-theme="light"] .machine .machine__sys b {
color: rgba(13, 13, 13, 0.72);
}
/* Demo preview frame — on light, the empty interior of the frame
is the page background; the "still" hairline rows are themed via
--line so they auto-flip; nothing extra needed. */
/* ============================================================
MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.js .reveal { opacity: 1 !important; transform: none !important; }
}
/* ============================================================
RESPONSIVE — mobile is designed, not compressed
============================================================ */
@media (max-width: 860px) {
:root { --mx: 24px; --sy: clamp(84px, 13vh, 112px); }
.nav { padding: 14px 24px; }
.nav__links { gap: 20px; }
.nav__links a { padding: 15px 0; } /* ≥44px touch target */
.hero {
min-height: 100vh;
min-height: 100svh;
padding-top: clamp(104px, 22vh, 220px);
padding-bottom: clamp(56px, 10vh, 120px);
gap: clamp(28px, 8vh, 72px);
}
/* Width-responsive: stays large at 150% zoom (~853px → ~85px)
yet fits real tablets/large phones down to ~481px. */
.hero__title { font-size: clamp(40px, 10vw, 96px); }
.hero__sub { max-width: none; }
.ct-grid { grid-template-columns: 1fr; }
.ct-fyi { grid-template-columns: 1fr; gap: 32px; }
.ct-form .field-row { grid-template-columns: 1fr; gap: 0; }
.cs-meta { grid-template-columns: 1fr 1fr; }
.cs-grid.two { grid-template-columns: 1fr; }
.cs-hero .summary { flex-direction: column; gap: 12px; }
.cs-next { flex-direction: column; align-items: flex-start; }
.process { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer__top { grid-template-columns: 1fr; gap: 24px; }
.footer__nav { align-items: flex-start; }
.footer__row { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 480px) {
.process { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
/* Tighter brand + link spacing AND hide the long 'For your operation'
link (18 chars) so the nav fits one line down to ~360px without
overlap. Capabilities is still reachable from the Approach
section + the page scroll. */
.nav { padding: 12px 14px; gap: 10px; }
.nav__links { gap: 14px; }
.nav__links a { font-size: 10.5px; letter-spacing: 0.05em; padding: 12px 0; }
.nav__links a[href*="capabilities"] { display: none; }
.brand__type { font-size: 11.5px; letter-spacing: 0.16em; }
.hero__title { font-size: clamp(34px, 9vw, 52px); letter-spacing: -0.025em; }
.footer__sig { width: 200px; }
}
/* < 380px: nav still overflows. Tighten brand + links and let them
wrap if the row genuinely can't fit, instead of clipping CONTACT. */
@media (max-width: 380px) {
/* <360px: even tighter — hide the longer 'For your operation' link
in favour of single-line layout. Approach + Demo + Contact still
reach the same anchors. */
.nav { padding: 10px 12px; gap: 8px; }
.brand__type { font-size: 11px; letter-spacing: 0.12em; }
.nav__links { gap: 10px; }
.nav__links a { font-size: 10px; letter-spacing: 0.04em; padding: 12px 0; }
.nav__links a[href*="capabilities"],
.nav__links a[href*="#capabilities"] { display: none; }
}