/* assets/avakata-motion.css */
/* ============================================================
AVAKATA MOTION — cursor, theme switcher, wipe + 6 swappable themes.
Pairs with avakata-motion.js. All UI is gated behind .av-motion / fine
pointers, so without JS or on touch the site is unchanged.
============================================================ */
/* ---- word-trailing custom cursor ---- */
@media (pointer: fine) {
.av-cursor-on, .av-cursor-on a, .av-cursor-on button, .av-cursor-on [data-magnetic], .av-cursor-on .btn { cursor: auto; }
.av-cursor-on input, .av-cursor-on textarea, .av-cursor-on select { cursor: auto; }
}
.av-cursor {
position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999;
mix-blend-mode: difference; will-change: transform, width, height;
transition: width .25s var(--ease, ease), height .25s var(--ease, ease), background .25s, border-color .25s;
}
.av-cursor.is-hover { width: 56px; height: 56px; background: color-mix(in oklab, var(--accent) 16%, transparent); }
.av-cursor__dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 99999; will-change: transform; }
.av-word {
position: fixed; transform: translate(-50%, -50%); font-family: var(--f-mono); font-size: 11px;
letter-spacing: .06em; color: var(--accent); pointer-events: none; z-index: 99998; white-space: nowrap;
text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent);
}
/* ---- theme switcher button ---- */
.av-switch { position: fixed; right: 18px; bottom: 18px; z-index: 99990; }
.av-switch__btn {
display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: var(--r-pill, 999px);
background: color-mix(in oklab, var(--bg) 64%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--line)); color: var(--text);
font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
box-shadow: 0 14px 40px -18px rgba(0,0,0,.7); transition: transform .25s var(--ease, ease), border-color .25s;
}
.av-switch__btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.av-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.av-switch__chev { opacity: .6; }
@media (max-width: 560px) { .av-switch { right: 12px; bottom: 12px; } .av-switch__btn { padding: 8px 12px; font-size: 10px; letter-spacing: .1em; } }
/* ---- full-screen wipe used during theme change ---- */
.av-wipe { position: fixed; inset: 0; background: var(--accent); z-index: 99980; transform: scaleY(0); pointer-events: none; will-change: transform; }
/* lines created by SplitText (keep masked reveal clean) */
.av-line { overflow: hidden; }
/* smooth the palette change on the big surfaces */
.av-motion body { transition: background-color .55s var(--ease, ease), color .55s var(--ease, ease); }
/* ============================================================
THE 6 THEMES — each is a COMPLETE visual redesign, not a recolor.
Every block: (1) keep the palette tokens, (2) re-skin the real
site-wide selectors — typography, shape, borders, surfaces, depth.
"signal" is the default refined design (small signature block below).
Local stylesheet font stacks are defined per-theme as --tf-* so the
override reaches every element that reads --f-serif / --f-sans / --f-mono.
============================================================ */
/* ------------------------------------------------------------------ *
* SIGNAL — refined dark serif + lime (the house style). *
* Default design; just a couple of signature reinforcements. *
* ------------------------------------------------------------------ */
html[data-theme="signal"] h1 em,
html[data-theme="signal"] h2 em,
html[data-theme="signal"] .hero__title em { font-style: italic; }
html[data-theme="signal"] .nav { border-radius: var(--r-pill); }
/* ================================================================== *
* AURORA — soft glassy, light-weight, airy. Frosted glass on every *
* surface, big soft radii, hairline borders, wide airy tracking, *
* thin grotesk body + delicate serif heads, cyan aurora glow. *
* ================================================================== */
html[data-theme="aurora"] {
/* --text-dim was #5d6e92 — 3.74:1 against --bg, failing the 4.5:1 AA
minimum for text. It's the color behind ~100 small labels site-wide
(timestamps, mono captions, eyebrows, stat labels), so that one value
alone was the "silver, can't read it" complaint. Brightened to 6.00:1,
comfortably legible, while staying visibly dimmer than --text-mute
(#b9c7e6, 11.25:1) and --text (16.73:1) so the hierarchy still reads. */
--bg: #0a0f1e; --bg-elev: #111a32; --text: #eaf0ff; --text-mute: #b9c7e6; --text-dim: #8291ad;
--line: rgba(150,200,255,0.16); --line-strong: rgba(150,200,255,0.30); --accent: #5ad1ff; --accent-ink: #04121b;
--bg-glass: rgba(30,46,86,0.42);
color-scheme: dark;
/* airy, light-weight stacks */
--f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--f-sans: ui-rounded, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
--f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
--r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-xl: 40px;
}
/* aurora ribbon painted softly behind everything */
html[data-theme="aurora"] body {
background:
radial-gradient(ellipse 95% 60% at 12% -8%, rgba(90,209,255,0.20), transparent 58%),
radial-gradient(ellipse 80% 60% at 90% 6%, rgba(150,120,255,0.16), transparent 58%),
radial-gradient(ellipse 90% 70% at 50% 110%, rgba(90,209,255,0.10), transparent 60%),
var(--bg);
background-attachment: fixed;
font-weight: 300;
letter-spacing: 0.005em;
}
html[data-theme="aurora"] h1, html[data-theme="aurora"] h2,
html[data-theme="aurora"] h3, html[data-theme="aurora"] h4,
html[data-theme="aurora"] .display, html[data-theme="aurora"] .hero__title,
html[data-theme="aurora"] .sandbox__title, html[data-theme="aurora"] .how-title {
font-weight: 400; letter-spacing: -0.01em;
}
html[data-theme="aurora"] .lede, html[data-theme="aurora"] .hero__sub { font-weight: 300; }
html[data-theme="aurora"] .eyebrow, html[data-theme="aurora"] .label,
html[data-theme="aurora"] .pill, html[data-theme="aurora"] .tag {
letter-spacing: 0.26em; font-weight: 400;
}
/* one glass treatment for ALL the card-like surfaces */
html[data-theme="aurora"] .card,
html[data-theme="aurora"] .console,
html[data-theme="aurora"] .sandbox,
html[data-theme="aurora"] .metric,
html[data-theme="aurora"] .flow__box,
html[data-theme="aurora"] .service,
html[data-theme="aurora"] .net-node,
html[data-theme="aurora"] .post-card,
html[data-theme="aurora"] .case-card,
html[data-theme="aurora"] .q-card,
html[data-theme="aurora"] .showcase__card,
html[data-theme="aurora"] .home-note,
html[data-theme="aurora"] .featured-study,
html[data-theme="aurora"] .feature-post,
html[data-theme="aurora"] .product-card,
html[data-theme="aurora"] .spark-card,
html[data-theme="aurora"] .signals,
html[data-theme="aurora"] .how__step,
html[data-theme="aurora"] .engage {
background: linear-gradient(160deg, rgba(150,200,255,0.10), rgba(150,200,255,0.02));
-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px -34px rgba(0,12,40,0.7), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="aurora"] .nav {
background: rgba(20,32,64,0.45);
-webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
box-shadow: 0 18px 50px -22px rgba(0,12,40,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
}
html[data-theme="aurora"] .btn { border-radius: var(--r-pill); font-weight: 400; letter-spacing: 0.02em; }
html[data-theme="aurora"] .btn--primary {
background: linear-gradient(120deg, #8ee6ff, #5ad1ff 50%, #8aa8ff);
color: var(--accent-ink); box-shadow: 0 18px 50px -18px rgba(90,209,255,0.7);
}
html[data-theme="aurora"] .btn--ghost {
background: rgba(150,200,255,0.06); border-color: var(--line-strong);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="aurora"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="aurora"] .field input,
html[data-theme="aurora"] .field textarea {
background: rgba(150,200,255,0.06); border: 1px solid var(--line-strong);
border-radius: var(--r-md); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* ================================================================== *
* NOIR — brutalist. Tight UPPERCASE grotesk, ZERO radius, heavy mono *
* borders, hard offset shadows (no blur), monochrome, dense. *
* ================================================================== */
html[data-theme="noir"] {
--bg: #060606; --bg-elev: #131313; --text: #f3f3f3; --text-mute: #a9a9a9; --text-dim: #6b6b6b;
--line: #2a2a2a; --line-strong: #4a4a4a; --accent: #f5f5f5; --accent-ink: #000;
--bg-glass: rgba(12,12,12,0.85);
color-scheme: dark;
/* industrial grotesk everywhere; headings lose the serif entirely */
--f-serif: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-mono: 'Courier New', ui-monospace, monospace;
--r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 0px;
--pad-section: clamp(48px, 6vw, 96px); --pad-card: 22px; --pad-card-lg: 30px;
}
html[data-theme="noir"] body { background: #060606; letter-spacing: -0.005em; }
/* hard brutalist headings: massive, tight, uppercase */
html[data-theme="noir"] h1, html[data-theme="noir"] h2,
html[data-theme="noir"] h3, html[data-theme="noir"] h4,
html[data-theme="noir"] .display, html[data-theme="noir"] .hero__title,
html[data-theme="noir"] .sandbox__title, html[data-theme="noir"] .how-title,
html[data-theme="noir"] .flow__title, html[data-theme="noir"] .footer__brand-mark {
font-family: var(--f-serif);
font-weight: 800; font-style: normal !important;
text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
}
html[data-theme="noir"] h1 em, html[data-theme="noir"] h2 em,
html[data-theme="noir"] h3 em, html[data-theme="noir"] .hero__title em,
html[data-theme="noir"] .metric__num em, html[data-theme="noir"] .sandbox__title em {
/* No highlighter block here: it painted over adjacent lines at headline
line-heights and fought the split-safe shimmer. Mono emphasis instead. */
font-style: normal;
}
html[data-theme="noir"] .footer__brand-mark { font-style: normal; }
html[data-theme="noir"] .lede, html[data-theme="noir"] .hero__sub { color: var(--text-mute); font-weight: 400; }
html[data-theme="noir"] .eyebrow, html[data-theme="noir"] .label,
html[data-theme="noir"] .pill, html[data-theme="noir"] .tag,
html[data-theme="noir"] .nav__brand {
letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
/* one brutalist surface for every card: flat, heavy border, hard drop shadow */
html[data-theme="noir"] .card,
html[data-theme="noir"] .console,
html[data-theme="noir"] .sandbox,
html[data-theme="noir"] .metric,
html[data-theme="noir"] .flow__box,
html[data-theme="noir"] .service,
html[data-theme="noir"] .net-node,
html[data-theme="noir"] .post-card,
html[data-theme="noir"] .case-card,
html[data-theme="noir"] .q-card,
html[data-theme="noir"] .showcase__card,
html[data-theme="noir"] .home-note,
html[data-theme="noir"] .featured-study,
html[data-theme="noir"] .feature-post,
html[data-theme="noir"] .product-card,
html[data-theme="noir"] .spark-card,
html[data-theme="noir"] .signals,
html[data-theme="noir"] .alert,
html[data-theme="noir"] .how__step,
html[data-theme="noir"] .engage {
background: var(--bg-elev);
border: 2px solid var(--text);
border-radius: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 8px 8px 0 0 var(--text);
}
html[data-theme="noir"] .card--glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="noir"] .nav {
background: #0c0c0c; border: 2px solid var(--text); border-radius: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 6px 6px 0 0 var(--text);
}
html[data-theme="noir"] .nav__cta {
background: var(--text); color: #000; border-radius: 0;
box-shadow: none; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
html[data-theme="noir"] .nav__cta::after { display: none; }
html[data-theme="noir"] .btn {
border-radius: 0; border: 2px solid var(--text); font-weight: 800;
text-transform: uppercase; letter-spacing: 0.04em;
}
html[data-theme="noir"] .btn--primary {
background: var(--text); color: #000; box-shadow: 5px 5px 0 0 rgba(245,245,245,0.35);
}
html[data-theme="noir"] .btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 rgba(245,245,245,0.45); }
html[data-theme="noir"] .btn--ghost { background: transparent; color: var(--text); }
html[data-theme="noir"] .pill, html[data-theme="noir"] .tag, html[data-theme="noir"] .tabs {
border: 2px solid var(--text); border-radius: 0; background: transparent;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="noir"] .field input,
html[data-theme="noir"] .field textarea {
background: #0c0c0c; border: 2px solid var(--text); border-radius: 0; color: var(--text);
}
html[data-theme="noir"] .divider { height: 2px; background: var(--text); }
html[data-theme="noir"] .footer { border-top: 2px solid var(--text); }
html[data-theme="noir"] .section-head { text-align: left; justify-items: start; }
/* ================================================================== *
* SOLAR — warm LIGHT editorial. Classic book serif everywhere, ink *
* on cream, blood-orange accent, fine warm rules, soft paper depth. *
* ================================================================== */
html[data-theme="solar"] {
--bg: #f2ece0; --bg-soft: #ece4d4; --bg-elev: #fbf7ef; --text: #17120c; --text-mute: #4e463a; --text-dim: #8a7c68;
--line: #d9cdb6; --line-strong: #c4b393; --accent: #d8431a; --accent-ink: #fff;
--bg-glass: rgba(251,247,239,0.78);
--signal-cyan: #1f6f8b; --signal-green: #3f7d3a;
color-scheme: light;
/* editorial serif body + classic small-caps mono labels */
--f-serif: 'Georgia', 'Times New Roman', 'Iowan Old Style', serif;
--f-sans: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
--f-mono: 'Courier New', ui-monospace, monospace;
--r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;
--pad-card: 32px; --pad-card-lg: 44px;
}
html[data-theme="solar"] body {
background:
radial-gradient(ellipse 120% 80% at 50% -20%, #fbf7ef, transparent 60%),
var(--bg);
color: var(--text);
line-height: 1.6;
}
/* paper grain reads wrong on cream — soften it */
html[data-theme="solar"] body::before { opacity: 0.05; mix-blend-mode: multiply; }
html[data-theme="solar"] h1, html[data-theme="solar"] h2,
html[data-theme="solar"] h3, html[data-theme="solar"] h4,
html[data-theme="solar"] .display, html[data-theme="solar"] .hero__title,
html[data-theme="solar"] .sandbox__title, html[data-theme="solar"] .how-title {
font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.012em;
}
html[data-theme="solar"] h1 em, html[data-theme="solar"] h2 em,
html[data-theme="solar"] h3 em, html[data-theme="solar"] .hero__title em,
html[data-theme="solar"] .metric__num em { font-style: italic; color: var(--accent); }
html[data-theme="solar"] .lede, html[data-theme="solar"] .hero__sub {
font-family: var(--f-serif); color: var(--text-mute); font-style: italic;
}
html[data-theme="solar"] .eyebrow, html[data-theme="solar"] .label,
html[data-theme="solar"] .footer__col h5, html[data-theme="solar"] .nav__brand {
font-family: var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim);
}
/* warm, lightly-shadowed paper cards for every surface */
html[data-theme="solar"] .card,
html[data-theme="solar"] .console,
html[data-theme="solar"] .sandbox,
html[data-theme="solar"] .metric,
html[data-theme="solar"] .flow__box,
html[data-theme="solar"] .service,
html[data-theme="solar"] .net-node,
html[data-theme="solar"] .post-card,
html[data-theme="solar"] .case-card,
html[data-theme="solar"] .q-card,
html[data-theme="solar"] .showcase__card,
html[data-theme="solar"] .home-note,
html[data-theme="solar"] .featured-study,
html[data-theme="solar"] .feature-post,
html[data-theme="solar"] .product-card,
html[data-theme="solar"] .spark-card,
html[data-theme="solar"] .signals,
html[data-theme="solar"] .how__step,
html[data-theme="solar"] .engage {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--r-lg);
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 18px 40px -28px rgba(60,40,20,0.45);
}
html[data-theme="solar"] .nav {
background: var(--bg-glass);
-webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
box-shadow: 0 12px 30px -18px rgba(60,40,20,0.4);
}
html[data-theme="solar"] .btn { border-radius: var(--r-pill); font-family: var(--f-sans); font-weight: 600; }
html[data-theme="solar"] .btn--primary {
background: var(--accent); color: #fff; box-shadow: 0 16px 36px -18px rgba(216,67,26,0.6);
}
html[data-theme="solar"] .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
html[data-theme="solar"] .nav__cta { background: var(--accent); color: #fff; box-shadow: 0 4px 0 -1px #9c2d10; }
html[data-theme="solar"] .nav__cta::after { display: none; }
html[data-theme="solar"] .pill, html[data-theme="solar"] .tag {
background: rgba(216,67,26,0.06); border-color: var(--line-strong); color: var(--text-mute);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="solar"] .field input,
html[data-theme="solar"] .field textarea {
background: #fff; border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
}
html[data-theme="solar"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="solar"] ::selection { background: var(--accent); color: #fff; }
/* light-mode contrast fix: client logo chips were near-white on cream */
html[data-theme="solar"] .client-chip { border-color: var(--line-strong); }
/* light-mode contrast fix: site.css hardcodes light text on these — re-ink for cream */
html[data-theme="solar"] .log-line__text { color: var(--text); }
html[data-theme="solar"] .log-line__time { color: var(--text-dim); }
html[data-theme="solar"] .feature-post p,
html[data-theme="solar"] .featured-study__body p,
html[data-theme="solar"] .case-card__title,
html[data-theme="solar"] .post-card__excerpt,
html[data-theme="solar"] .work-hero .lede,
html[data-theme="solar"] .services-hero .lede,
html[data-theme="solar"] .news-hero .lede,
html[data-theme="solar"] .t-hero .lede,
html[data-theme="solar"] .demo-hero .lede { color: var(--text-mute); }
html[data-theme="solar"] .lede:hover,
html[data-theme="solar"] .feature-post:hover p,
html[data-theme="solar"] .featured-study__body p:hover { color: var(--text); text-shadow: none; }
/* ================================================================== *
* VAPOR — synthwave neon. Wide-tracked uppercase grotesk + italic *
* serif flashes, hot-magenta neon glow, gradient surfaces, scanline. *
* ================================================================== */
html[data-theme="vapor"] {
--bg: #140a24; --bg-soft: #1a0d30; --bg-elev: #1f1038; --text: #ffeaff; --text-mute: #c79bd6; --text-dim: #7d5a93;
--line: rgba(255,61,240,0.22); --line-strong: rgba(255,61,240,0.45); --accent: #ff3df0; --accent-ink: #1a0418;
--bg-glass: rgba(31,16,56,0.55);
--signal-cyan: #4df0ff;
color-scheme: dark;
--f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-mono: ui-monospace, 'JetBrains Mono', monospace;
--r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
}
/* synthwave horizon + violet wash, fixed behind the page */
html[data-theme="vapor"] body {
background:
linear-gradient(180deg, transparent 0%, transparent 62%, rgba(255,61,240,0.10) 75%, rgba(77,240,255,0.08) 100%),
radial-gradient(ellipse 100% 60% at 50% 120%, rgba(255,61,240,0.28), transparent 60%),
radial-gradient(ellipse 80% 50% at 80% -10%, rgba(77,240,255,0.16), transparent 55%),
var(--bg);
background-attachment: fixed;
}
/* moving scanlines over the whole page — pure synthwave CRT */
html[data-theme="vapor"] body::after {
content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(255,61,240,0.05) 3px, rgba(0,0,0,0) 4px);
mix-blend-mode: screen; opacity: 0.6;
}
html[data-theme="vapor"] h1, html[data-theme="vapor"] h2,
html[data-theme="vapor"] h3, html[data-theme="vapor"] h4,
html[data-theme="vapor"] .display, html[data-theme="vapor"] .hero__title,
html[data-theme="vapor"] .sandbox__title, html[data-theme="vapor"] .how-title {
font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
text-shadow: 0 0 18px rgba(255,61,240,0.55), 0 0 2px rgba(255,255,255,0.7);
}
html[data-theme="vapor"] h1 em, html[data-theme="vapor"] h2 em,
html[data-theme="vapor"] h3 em, html[data-theme="vapor"] .hero__title em,
html[data-theme="vapor"] .metric__num em, html[data-theme="vapor"] .sandbox__title em {
font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -0.01em;
color: var(--signal-cyan); text-shadow: 0 0 22px rgba(77,240,255,0.7);
}
html[data-theme="vapor"] .lede, html[data-theme="vapor"] .hero__sub { color: var(--text-mute); }
html[data-theme="vapor"] .eyebrow, html[data-theme="vapor"] .label,
html[data-theme="vapor"] .pill, html[data-theme="vapor"] .tag,
html[data-theme="vapor"] .nav__brand {
letter-spacing: 0.34em; text-transform: uppercase;
text-shadow: 0 0 12px rgba(255,61,240,0.5);
}
/* neon-bordered gradient panels for every card */
html[data-theme="vapor"] .card,
html[data-theme="vapor"] .console,
html[data-theme="vapor"] .sandbox,
html[data-theme="vapor"] .metric,
html[data-theme="vapor"] .flow__box,
html[data-theme="vapor"] .service,
html[data-theme="vapor"] .net-node,
html[data-theme="vapor"] .post-card,
html[data-theme="vapor"] .case-card,
html[data-theme="vapor"] .q-card,
html[data-theme="vapor"] .showcase__card,
html[data-theme="vapor"] .home-note,
html[data-theme="vapor"] .featured-study,
html[data-theme="vapor"] .feature-post,
html[data-theme="vapor"] .product-card,
html[data-theme="vapor"] .spark-card,
html[data-theme="vapor"] .signals,
html[data-theme="vapor"] .how__step,
html[data-theme="vapor"] .engage {
background: linear-gradient(160deg, rgba(255,61,240,0.10), rgba(77,240,255,0.05) 60%, rgba(31,16,56,0.6));
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
box-shadow: 0 0 0 1px rgba(255,61,240,0.18) inset, 0 0 34px -10px rgba(255,61,240,0.45), 0 26px 60px -30px rgba(0,0,0,0.8);
}
html[data-theme="vapor"] .nav {
background: rgba(31,16,56,0.6);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
box-shadow: 0 0 28px -8px rgba(255,61,240,0.5), inset 0 0 0 1px rgba(255,61,240,0.18);
}
html[data-theme="vapor"] .btn { border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
html[data-theme="vapor"] .btn--primary {
background: linear-gradient(120deg, #ff3df0, #ff7df5 50%, #4df0ff);
color: var(--accent-ink); box-shadow: 0 0 30px -6px rgba(255,61,240,0.8), 0 14px 40px -16px rgba(77,240,255,0.6);
}
html[data-theme="vapor"] .btn--ghost {
background: rgba(255,61,240,0.05); border-color: var(--line-strong); color: var(--text);
box-shadow: 0 0 18px -8px rgba(255,61,240,0.5);
}
html[data-theme="vapor"] .pill, html[data-theme="vapor"] .tag {
border-color: var(--line-strong); background: rgba(255,61,240,0.06);
}
html[data-theme="vapor"] .field input,
html[data-theme="vapor"] .field textarea {
background: rgba(255,61,240,0.05); border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
}
html[data-theme="vapor"] .divider { background: linear-gradient(90deg, transparent, var(--accent), var(--signal-cyan), transparent); height: 1px; }
html[data-theme="vapor"] .footer { border-top: 1px solid var(--line-strong); }
/* ================================================================== *
* MATRIX — terminal. Monospace EVERYTHING, phosphor green on black, *
* square 2px corners, green glow, CRT scanlines, boxy hard borders. *
* ================================================================== */
html[data-theme="matrix"] {
--bg: #04080a; --bg-soft: #061009; --bg-elev: #07140d; --text: #d6ffe6; --text-mute: #62c98a; --text-dim: #2f6f4a;
--line: #15402b; --line-strong: #1f5e3e; --accent: #39ff14; --accent-ink: #021006;
--bg-glass: rgba(7,20,13,0.8);
--signal-cyan: #2fffd0; --signal-green: #39ff14; --signal-amber: #b6ff3d;
color-scheme: dark;
/* one monospace stack for the WHOLE site */
--f-serif: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
--f-sans: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
--f-mono: ui-monospace, 'JetBrains Mono', 'Courier New', monospace;
--r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px; --r-pill: 2px;
}
html[data-theme="matrix"] body {
background: var(--bg);
font-family: var(--f-mono);
letter-spacing: 0.01em;
}
/* CRT scanline veil over everything */
html[data-theme="matrix"] body::after {
content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(57,255,20,0.045) 3px, rgba(0,0,0,0) 4px);
opacity: 0.7;
}
html[data-theme="matrix"] h1, html[data-theme="matrix"] h2,
html[data-theme="matrix"] h3, html[data-theme="matrix"] h4,
html[data-theme="matrix"] .display, html[data-theme="matrix"] .hero__title,
html[data-theme="matrix"] .sandbox__title, html[data-theme="matrix"] .how-title,
html[data-theme="matrix"] .flow__title, html[data-theme="matrix"] .footer__brand-mark {
font-family: var(--f-mono); font-weight: 700; font-style: normal !important;
text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05;
text-shadow: 0 0 12px rgba(57,255,20,0.55);
}
html[data-theme="matrix"] h1 em, html[data-theme="matrix"] h2 em,
html[data-theme="matrix"] h3 em, html[data-theme="matrix"] .hero__title em,
html[data-theme="matrix"] .metric__num em, html[data-theme="matrix"] .sandbox__title em {
font-style: normal; color: var(--accent); text-shadow: 0 0 16px rgba(57,255,20,0.8);
}
/* keep the wide monospace display type from overflowing / colliding */
html[data-theme="matrix"] h1, html[data-theme="matrix"] .hero__title, html[data-theme="matrix"] .display,
html[data-theme="matrix"] .sandbox__title, html[data-theme="matrix"] .how-title {
font-size: clamp(26px, 4.4vw, 56px) !important; letter-spacing: -0.01em;
overflow-wrap: anywhere; word-break: normal; line-height: 1.08;
}
html[data-theme="matrix"] h2 { font-size: clamp(22px, 3.2vw, 40px) !important; overflow-wrap: anywhere; }
/* prefix headings like a shell prompt */
html[data-theme="matrix"] h1::before, html[data-theme="matrix"] h2::before {
content: '> '; color: var(--accent); opacity: 0.8;
}
html[data-theme="matrix"] .lede, html[data-theme="matrix"] .hero__sub { color: var(--text-mute); }
html[data-theme="matrix"] .eyebrow, html[data-theme="matrix"] .label,
html[data-theme="matrix"] .pill, html[data-theme="matrix"] .tag,
html[data-theme="matrix"] .nav__brand { letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
/* boxy terminal panels with green inner glow for every surface */
html[data-theme="matrix"] .card,
html[data-theme="matrix"] .console,
html[data-theme="matrix"] .sandbox,
html[data-theme="matrix"] .metric,
html[data-theme="matrix"] .flow__box,
html[data-theme="matrix"] .service,
html[data-theme="matrix"] .net-node,
html[data-theme="matrix"] .post-card,
html[data-theme="matrix"] .case-card,
html[data-theme="matrix"] .q-card,
html[data-theme="matrix"] .showcase__card,
html[data-theme="matrix"] .home-note,
html[data-theme="matrix"] .featured-study,
html[data-theme="matrix"] .feature-post,
html[data-theme="matrix"] .product-card,
html[data-theme="matrix"] .spark-card,
html[data-theme="matrix"] .signals,
html[data-theme="matrix"] .how__step,
html[data-theme="matrix"] .engage {
background: var(--bg-elev);
border: 1px solid var(--line-strong);
border-radius: 2px;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 0 0 1px rgba(57,255,20,0.10) inset, 0 0 26px -14px rgba(57,255,20,0.5);
}
html[data-theme="matrix"] .nav {
background: rgba(4,8,10,0.85);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid var(--line-strong); border-radius: 2px;
box-shadow: 0 0 24px -10px rgba(57,255,20,0.5), inset 0 0 0 1px rgba(57,255,20,0.12);
}
html[data-theme="matrix"] .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--f-mono); font-weight: 600; }
html[data-theme="matrix"] .btn--primary {
background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 26px -6px rgba(57,255,20,0.8);
}
html[data-theme="matrix"] .btn--ghost {
background: transparent; border-color: var(--line-strong); color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(57,255,20,0.18);
}
html[data-theme="matrix"] .nav__cta { background: var(--accent); color: var(--accent-ink); border-radius: 2px; box-shadow: 0 0 18px -4px rgba(57,255,20,0.7); }
html[data-theme="matrix"] .nav__cta::after { display: none; }
html[data-theme="matrix"] .pill, html[data-theme="matrix"] .tag, html[data-theme="matrix"] .tabs {
border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(57,255,20,0.05);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="matrix"] .field input,
html[data-theme="matrix"] .field textarea {
background: #061009; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--accent); font-family: var(--f-mono);
}
html[data-theme="matrix"] .divider { background: var(--line-strong); }
html[data-theme="matrix"] .footer { border-top: 1px solid var(--line-strong); }
html[data-theme="matrix"] ::selection { background: var(--accent); color: var(--accent-ink); }
/* ================================================================== *
* GALLERY — Apple-store light. Pure white ground, ink type set in *
* the blocky noir grotesk (Arial Black), electric blue + green from *
* the house signal palette, and 4-D depth: layered soft shadows, *
* floating white cards, frosted glass nav, faint blue/green auras. *
* ================================================================== */
html[data-theme="gallery"] {
--bg: #ffffff; --bg-soft: #f4f7fb; --bg-elev: #ffffff; --text: #0b1220; --text-mute: #3f4c63; --text-dim: #5b6a84;
--line: rgba(11,18,32,0.10); --line-strong: rgba(11,18,32,0.18); --accent: #0071e3; --accent-ink: #ffffff;
--bg-glass: rgba(255,255,255,0.72);
--signal-cyan: #0071e3; --signal-green: #0b7a4b; --signal-amber: #b06a00; --signal-warm: #c2410c; --signal-red: #d13415;
color-scheme: light;
/* the blocky noir grotesk, everywhere it matters */
--f-serif: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
--r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;
}
/* white ground with faint blue/green auras drifting behind everything */
html[data-theme="gallery"] body {
background:
radial-gradient(ellipse 80% 55% at 12% -6%, rgba(0,113,227,0.10), transparent 58%),
radial-gradient(ellipse 70% 55% at 92% 4%, rgba(0,190,130,0.09), transparent 56%),
radial-gradient(ellipse 90% 60% at 50% 112%, rgba(0,113,227,0.06), transparent 62%),
#ffffff;
background-attachment: fixed;
color: var(--text);
}
/* film grain reads as dirt on white — nearly off */
html[data-theme="gallery"] body::before { opacity: 0.035; mix-blend-mode: multiply; }
/* blocky headline voice: heavy, uppercase, tight — the noir cut, in ink */
html[data-theme="gallery"] h1, html[data-theme="gallery"] h2,
html[data-theme="gallery"] h3, html[data-theme="gallery"] h4,
html[data-theme="gallery"] .display, html[data-theme="gallery"] .hero__title,
html[data-theme="gallery"] .sandbox__title, html[data-theme="gallery"] .how-title,
html[data-theme="gallery"] .flow__title, html[data-theme="gallery"] .footer__brand-mark {
font-family: var(--f-serif);
font-weight: 900; font-style: normal !important;
text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96;
}
html[data-theme="gallery"] h1 em, html[data-theme="gallery"] h2 em,
html[data-theme="gallery"] h3 em, html[data-theme="gallery"] .hero__title em,
html[data-theme="gallery"] .metric__num em, html[data-theme="gallery"] .sandbox__title em {
font-style: normal; color: var(--accent);
text-shadow: none;
}
html[data-theme="gallery"] .lede, html[data-theme="gallery"] .hero__sub { color: var(--text-mute); font-weight: 400; }
html[data-theme="gallery"] .eyebrow, html[data-theme="gallery"] .label,
html[data-theme="gallery"] .pill, html[data-theme="gallery"] .tag,
html[data-theme="gallery"] .nav__brand {
letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--signal-green);
}
/* one floating-white-card treatment for every surface — the 4-D depth:
a contact shadow + a deep colored ambient shadow, and a lift on hover */
html[data-theme="gallery"] .card,
html[data-theme="gallery"] .console,
html[data-theme="gallery"] .sandbox,
html[data-theme="gallery"] .metric,
html[data-theme="gallery"] .flow__box,
html[data-theme="gallery"] .service,
html[data-theme="gallery"] .net-node,
html[data-theme="gallery"] .post-card,
html[data-theme="gallery"] .case-card,
html[data-theme="gallery"] .q-card,
html[data-theme="gallery"] .showcase__card,
html[data-theme="gallery"] .home-note,
html[data-theme="gallery"] .featured-study,
html[data-theme="gallery"] .feature-post,
html[data-theme="gallery"] .product-card,
html[data-theme="gallery"] .spark-card,
html[data-theme="gallery"] .signals,
html[data-theme="gallery"] .how__step,
html[data-theme="gallery"] .grade-card,
html[data-theme="gallery"] .heal-step,
html[data-theme="gallery"] .agcard,
html[data-theme="gallery"] .engage {
background: #ffffff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 2px 6px rgba(10,20,50,0.06), 0 28px 70px -30px rgba(0,90,220,0.18);
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="gallery"] .card:hover,
html[data-theme="gallery"] .service:hover,
html[data-theme="gallery"] .post-card:hover,
html[data-theme="gallery"] .case-card:hover,
html[data-theme="gallery"] .product-card:hover,
html[data-theme="gallery"] .agcard:hover {
transform: translateY(-6px);
box-shadow: 0 4px 10px rgba(10,20,50,0.07), 0 46px 110px -34px rgba(0,90,220,0.30);
}
html[data-theme="gallery"] .nav {
background: rgba(255,255,255,0.78);
-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
border: 1px solid var(--line); border-radius: var(--r-pill);
box-shadow: 0 2px 6px rgba(10,20,50,0.05), 0 22px 60px -28px rgba(0,90,220,0.22);
}
html[data-theme="gallery"] .nav__links { color: var(--text-mute); }
html[data-theme="gallery"] .nav.is-scrolled { background: rgba(255,255,255,0.82); border-color: var(--line); }
html[data-theme="gallery"] .btn { border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.02em; }
html[data-theme="gallery"] .btn--primary {
background: linear-gradient(120deg, #0071e3, #0086f0);
color: #fff; box-shadow: 0 12px 34px -12px rgba(0,113,227,0.55);
}
html[data-theme="gallery"] .btn--ghost {
background: #ffffff; border-color: var(--line-strong); color: var(--text);
box-shadow: 0 2px 6px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .nav__cta { background: linear-gradient(120deg, #0071e3, #00a06a); color: #fff; box-shadow: 0 10px 26px -10px rgba(0,113,227,0.5); }
html[data-theme="gallery"] .nav__cta::after { display: none; }
html[data-theme="gallery"] .pill, html[data-theme="gallery"] .tag, html[data-theme="gallery"] .tabs {
background: rgba(0,113,227,0.06); border-color: rgba(0,113,227,0.22); color: var(--text-mute);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="gallery"] .field input,
html[data-theme="gallery"] .field textarea {
background: #ffffff; border: 1px solid var(--line-strong); color: var(--text); border-radius: var(--r-md);
box-shadow: inset 0 1px 3px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .divider { background: var(--line); }
html[data-theme="gallery"] .footer { border-top: 1px solid var(--line); }
html[data-theme="gallery"] ::selection { background: var(--accent); color: #fff; }
/* live.js pins data-accent="cyan"/data-bg="midnight" on , and those
:root[data-*] token rules (0,2,0) out-rank a bare theme selector (0,1,1).
Re-assert the gallery tokens at (0,2,1) so white always wins the war. */
html[data-theme="gallery"][data-accent], html[data-theme="gallery"][data-bg] {
--accent: #0071e3; --accent-ink: #ffffff;
--bg: #ffffff; --bg-soft: #f4f7fb; --bg-elev: #ffffff; --bg-glass: rgba(255,255,255,0.72);
--line: rgba(11,18,32,0.10); --line-strong: rgba(11,18,32,0.18);
}
/* the self-rewriting hero word inherits a cyan glow from the dark themes */
html[data-theme="gallery"] .hero__rewrite-text { text-shadow: none; }
html[data-theme="gallery"] .hero__title em { text-shadow: none; }
/* dark-literal set pieces re-staged for white: the Pulse product stage and
the hero demo console keep their forward-pop depth, lose the dark glass
and the darkening vignettes (a black fog makes no sense on a white page). */
html[data-theme="gallery"] .pulse-feature__stage {
background: #ffffff;
border: 1px solid var(--line);
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 44px 110px -36px rgba(0,90,220,0.28);
}
html[data-theme="gallery"] #pulse.pulse-feature::after { display: none; }
html[data-theme="gallery"] .console-stage::before { display: none; }
html[data-theme="gallery"] .console {
background: #ffffff;
border-color: var(--line);
box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 40px 100px -36px rgba(0,90,220,0.26);
}
/* dark-glass composites from the onboarding + portal pages, re-staged white */
html[data-theme="gallery"] .st-stage,
html[data-theme="gallery"] .pt-card {
background: #ffffff;
border: 1px solid var(--line);
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: 0 2px 8px rgba(10,20,50,0.06), 0 44px 110px -36px rgba(0,90,220,0.26);
}
html[data-theme="gallery"] .st-google { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(10,20,50,0.08), 0 14px 36px -16px rgba(0,90,220,0.25); }
html[data-theme="gallery"] .st-snip code {
background: #f4f7fb; border-color: var(--line-strong); color: #0b5cad;
box-shadow: inset 0 1px 3px rgba(10,20,50,0.05);
}
html[data-theme="gallery"] .st-console { color: var(--text-mute); }
html[data-theme="gallery"] .cx__snip code { background: #f4f7fb; border-color: var(--line-strong); color: #0b5cad; }
/* light-mode re-inks for surfaces site.css hardcodes light (same fix solar needs) */
html[data-theme="gallery"] .client-chip { border-color: var(--line-strong); }
html[data-theme="gallery"] .log-line__text { color: var(--text); }
html[data-theme="gallery"] .log-line__time { color: var(--text-dim); }
html[data-theme="gallery"] .feature-post p,
html[data-theme="gallery"] .featured-study__body p,
html[data-theme="gallery"] .case-card__title,
html[data-theme="gallery"] .post-card__excerpt,
html[data-theme="gallery"] .work-hero .lede,
html[data-theme="gallery"] .services-hero .lede,
html[data-theme="gallery"] .news-hero .lede,
html[data-theme="gallery"] .t-hero .lede,
html[data-theme="gallery"] .demo-hero .lede { color: var(--text-mute); }
html[data-theme="gallery"] .lede:hover,
html[data-theme="gallery"] .feature-post:hover p,
html[data-theme="gallery"] .featured-study__body p:hover { color: var(--text); text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
.av-cursor, .av-cursor__dot, .av-word { display: none !important; }
@media (pointer: fine) { .av-cursor-on, .av-cursor-on a, .av-cursor-on button { cursor: auto; } }
.av-wipe { transition: none; }
}
/* assets/blog-readability-2026-09-21.css */
/* ============================================================
BLOG ARTICLE READABILITY — 2026-09-21
------------------------------------------------------------
Measured inside .post-article on a 1920px viewport before this
file existed:
h1 60px / line-height 0.96
h2 90px / line-height 0.96 <-- BIGGER THAN THE H1
h3 18px
p 16px / 24px
column 640px max-width
The scale ran 90 -> 60 -> 18 -> 16, so section headings were half
again larger than the article title. A hero heading style was
leaking into article bodies. At 90px in a 640px column that is
three or four words per line, which is why "WHAT THIS MEANS FOR
YOUR ONE-PERSON BUSINESS" filled most of a screen.
The narrow column made it worse: the two faults compound, and
widening alone would not have fixed the inverted hierarchy.
Fixed here rather than in the template because it has to reach
all 132 posts at once, and the same scale should apply to any
post published later.
============================================================ */
/* ── Column ───────────────────────────────────────────────────
640px is a comfortable measure at 16px, but the body is going
to 18px, and Ryan reads this on a wide display. 78ch at 18px
lands near 800px — a real measure without becoming a wall. */
.post-article,
[class*="post-article"] {
max-width: min(800px, 92vw) !important;
font-size: 18px;
line-height: 1.75;
}
/* ── Type scale ───────────────────────────────────────────────
One consistent ramp, largest to smallest, so the hierarchy
actually reads as a hierarchy. clamp() keeps it sane from
phone to ultrawide without a media query per step. */
.post-article h1,
[class*="post-article"] h1 {
font-size: clamp(32px, 3.2vw, 50px) !important;
line-height: 1.08 !important;
max-width: none !important;
letter-spacing: -0.02em;
margin: 0 0 .5em;
text-wrap: balance;
}
.post-article h2,
[class*="post-article"] h2 {
font-size: clamp(24px, 2.1vw, 32px) !important;
line-height: 1.22 !important;
letter-spacing: -0.01em;
margin: 2.1em 0 .55em;
text-wrap: balance;
}
.post-article h3,
[class*="post-article"] h3 {
font-size: clamp(19px, 1.5vw, 23px) !important;
line-height: 1.32 !important;
margin: 1.7em 0 .45em;
}
.post-article h4,
[class*="post-article"] h4 {
font-size: 18px !important;
line-height: 1.4 !important;
margin: 1.5em 0 .4em;
}
/* "Key takeaways" rendered as a 12px h2 — SMALLER than body text,
and the only h2 on the page that was not 90px. Two competing h2
treatments in one article. Give it the same rank as its peers. */
.post-article h2:first-of-type,
[class*="post-article"] h2:first-of-type {
font-size: clamp(24px, 2.1vw, 32px) !important;
line-height: 1.22 !important;
margin-top: 1.2em;
}
/* ── Body copy ────────────────────────────────────────────────
18px/1.75 is the readable default; the byline stays small. */
.post-article p,
[class*="post-article"] p {
font-size: 18px;
line-height: 1.75;
margin: 0 0 1.15em;
}
.post-article li,
[class*="post-article"] li { font-size: 18px; line-height: 1.7; margin-bottom: .5em; }
.post-article ul,
.post-article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
/* byline / meta line — deliberately the one small thing */
.post-article p:first-of-type:has(+ figure),
.post-article .post-meta,
[class*="post-article"] [class*="post-meta"] {
font-size: 13px;
line-height: 1.5;
opacity: .72;
}
/* ── Media ────────────────────────────────────────────────────
Let the hero and in-article figures use the full column and
carry a consistent frame. */
.post-article img,
.post-article figure,
[class*="post-article"] img {
max-width: 100%;
height: auto;
border-radius: 14px;
}
.post-article figure { margin: 1.8em 0; }
.post-article figcaption { font-size: 14px; opacity: .7; margin-top: .6em; }
/* ── Phones ───────────────────────────────────────────────────
17px keeps the measure sensible at 390px without shrinking the
line count dramatically. */
@media (max-width: 700px) {
.post-article, [class*="post-article"] { font-size: 17px; }
.post-article p, .post-article li { font-size: 17px; }
.post-article h2 { margin-top: 1.7em; }
}
/* assets/mobile-overflow-fix.css */
/* ============================================================
MOBILE OVERFLOW — the "-2" duplicate variants · 2026-09-19
------------------------------------------------------------
Measured at a 375px viewport: several blocks render wider than
the screen and get clipped by html{overflow-x:clip}, so their
right-hand content is simply cut off rather than wrapped:
.alert-2 right edge 392px (17px over)
.film-embed-2 right edge 409px (34px over)
.film-embed__frame right edge 395px (20px over)
.unit right edge 417px (42px over)
site.css already has a small-screen block that constrains the
ORIGINAL component names (.marquee, .clients, .film-embed ...).
Instatic's visual editor duplicated several of these nodes and
suffixed the class — .alert-2, .film-embed-2 — so none of those
existing mobile rules match them any more. Same "-N suffix"
drift behind the homepage hero break, the .console-stage-2
vignette and the .cyl-host cylinder.
Rather than chase each one, constrain the duplicates the same
way their originals already are.
============================================================ */
@media (max-width: 700px) {
.alert-2,
.film-embed-2,
.film-embed__frame,
.unit,
.console-2,
.feature-post-2,
.post-card-2 {
max-width: 100%;
box-sizing: border-box;
}
/* Media frames must scale, not crop. */
.film-embed-2,
.film-embed__frame {
width: 100% !important;
max-width: 100vw;
overflow: hidden;
}
/* Anything measured in a fixed unit inside these blocks wraps
instead of pushing the row wider than the screen. */
.alert-2,
.unit {
flex-wrap: wrap;
word-break: normal;
overflow-wrap: anywhere;
}
}
/* assets/site.css */
/* ============================================================
AVAKATA — shared visual system
============================================================ */
/* (the Google Fonts @import sat after other rules once bundled, so it was invalid and dropped; the CSP has no font-src either) */
/* ============================================================
SMOOTH PALETTE CROSSFADE (site-wide, every page)
live.js flips [data-bg]/[data-accent]; var(--bg) etc. resolve to
new colours and these transitions fade the RESOLVED colour on the
real surfaces. Broad but scoped to colour props so it can't break
transform/opacity interactions elsewhere.
============================================================ */
html { transition: background-color 450ms cubic-bezier(.4,0,.2,1); }
body,
.nav, .footer, .console, .sandbox, .card, .metric, .flow__box, .service,
.net-node, .brain-node, .post-card, .featured-study, .marquee, .pill,
.proof, .engage, .how__step, .cta-band, .orb, .product-card,
section, [class$="-hero"], [class*="hero__"] {
transition:
background-color 450ms cubic-bezier(.4,0,.2,1),
border-color 450ms cubic-bezier(.4,0,.2,1),
color 450ms cubic-bezier(.4,0,.2,1),
box-shadow 450ms cubic-bezier(.4,0,.2,1);
}
/* 2026-10-27: no colour crossfade during the first paint; av-lava.js marks the root settled after its palette is on. */
html:not([data-av-settled]), html:not([data-av-settled]) body, html:not([data-av-settled]) .nav, html:not([data-av-settled]) section,
html:not([data-av-settled]) .card, html:not([data-av-settled]) .post-card, html:not([data-av-settled]) .footer, html:not([data-av-settled]) .console,
html:not([data-av-settled]) [class$="-hero"], html:not([data-av-settled]) [class*="hero__"] { transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
html, body, .nav, .footer, .console, .sandbox, .card, .metric, .flow__box, .service,
.net-node, .brain-node, .post-card, .featured-study, .marquee, .pill,
.proof, .engage, .how__step, .cta-band, .orb, .product-card,
section, [class$="-hero"], [class*="hero__"] { transition: none; }
}
:root {
/* — palette — */
--bg: #0a0b0d;
--bg-soft: #101216;
--bg-elev: #14171c;
--bg-glass: rgba(20, 23, 28, 0.55);
--line: rgba(232, 234, 237, 0.08);
--line-strong: rgba(232, 234, 237, 0.16);
/* readability pass: mute 0.62→0.78 and dim 0.38→0.55 — body copy and small
labels were consistently reported as too faint to read on the dark ground. */
--text: #e8eaed;
--text-mute: rgba(232, 234, 237, 0.78);
--text-dim: rgba(232, 234, 237, 0.55);
--accent: #c4ff3d; /* lime — primary */
--accent-ink: #0a0b0d;
--signal-cyan: #3dd9ff;
--signal-amber: #ffb43d;
--signal-warm: #ff6b3d;
--signal-red: #ff4566;
--signal-green: #4dffaa;
/* — type — */
--f-serif: 'Instrument Serif', 'Times New Roman', serif;
--f-sans: 'Space Grotesk', system-ui, sans-serif;
--f-mono: 'JetBrains Mono', ui-monospace, monospace;
/* — geometry — */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
--maxw: 1320px;
--gutter: clamp(20px, 4vw, 56px);
/* — density (tweakable) — */
--pad-section: clamp(80px, 11vw, 160px);
--pad-card: 28px;
--pad-card-lg: 40px;
/* — motion — */
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* density variants set via [data-density] */
:root[data-density="compact"] { --pad-section: clamp(56px, 7vw, 96px); --pad-card: 20px; --pad-card-lg: 28px; }
:root[data-density="comfy"] { --pad-section: clamp(120px, 14vw, 200px); --pad-card: 36px; --pad-card-lg: 52px; }
/* dark / darker */
:root[data-shade="darker"] { --bg: #060709; --bg-soft: #0b0d10; --bg-elev: #101317; }
/* accent swaps */
:root[data-accent="cyan"] { --accent: #3dd9ff; --accent-ink: #001019; }
:root[data-accent="orange"] { --accent: #ff6b3d; --accent-ink: #1a0700; }
:root[data-accent="amber"] { --accent: #ffd23d; --accent-ink: #1a1200; }
/* font swaps via [data-fontset] */
:root[data-fontset="geist"] { --f-serif: 'Fraunces', serif; --f-sans: 'Geist', system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, monospace; }
:root[data-fontset="fraunces"] { --f-serif: 'Fraunces', serif; --f-sans: 'Space Grotesk', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; }
/* ============================================================
BACKGROUND PALETTES — [data-bg] (must follow :root base)
Each swaps the near-black surfaces; accent stays independent.
============================================================ */
:root[data-bg="ink"] { --bg: #0a0b0d; --bg-soft: #101216; --bg-elev: #14171c; --bg-glass: rgba(20,23,28,0.55); }
:root[data-bg="darker"] { --bg: #050608; --bg-soft: #0a0c0f; --bg-elev: #0e1116; --bg-glass: rgba(14,17,22,0.55); }
:root[data-bg="midnight"] { --bg: #070b16; --bg-soft: #0c1322; --bg-elev: #111b30; --bg-glass: rgba(17,27,48,0.55);
--line: rgba(180,205,255,0.09); --line-strong: rgba(180,205,255,0.18); }
:root[data-bg="forest"] { --bg: #060f0b; --bg-soft: #0a1812; --bg-elev: #0f2319; --bg-glass: rgba(15,35,25,0.55);
--line: rgba(180,255,215,0.08); --line-strong: rgba(180,255,215,0.16); }
:root[data-bg="plum"] { --bg: #0c0712; --bg-soft: #150c1f; --bg-elev: #1d122b; --bg-glass: rgba(29,18,43,0.55);
--line: rgba(225,190,255,0.09); --line-strong: rgba(225,190,255,0.18); }
:root[data-bg="ember"] { --bg: #100806; --bg-soft: #1a0e0a; --bg-elev: #241410; --bg-glass: rgba(36,20,16,0.55);
--line: rgba(255,210,180,0.09); --line-strong: rgba(255,210,180,0.17); }
:root[data-bg="slate"] { --bg: #0b0e12; --bg-soft: #12161d; --bg-elev: #181d26; --bg-glass: rgba(24,29,38,0.55);
--line: rgba(200,214,232,0.08); --line-strong: rgba(200,214,232,0.16); }
:root[data-bg="ocean"] { --bg: #04111a; --bg-soft: #08202e; --bg-elev: #0c2c3e; --bg-glass: rgba(12,44,62,0.55);
--line: rgba(160,225,255,0.09); --line-strong: rgba(160,225,255,0.18); }
:root[data-bg="wine"] { --bg: #120608; --bg-soft: #1d0c10; --bg-elev: #281319; --bg-glass: rgba(40,19,25,0.55);
--line: rgba(255,190,205,0.09); --line-strong: rgba(255,190,205,0.17); }
:root[data-bg="indigo"] { --bg: #08081a; --bg-soft: #0e0f26; --bg-elev: #151635; --bg-glass: rgba(21,22,53,0.55);
--line: rgba(190,195,255,0.09); --line-strong: rgba(190,195,255,0.18); }
:root[data-bg="moss"] { --bg: #07120a; --bg-soft: #0c1d12; --bg-elev: #11281a; --bg-glass: rgba(17,40,26,0.55);
--line: rgba(190,255,200,0.08); --line-strong: rgba(190,255,200,0.16); }
/* Gradient palettes — keep --bg dark for components, paint a fixed gradient on */
:root[data-bg="aurora"] { --bg: #060a0d; --bg-soft: #0c1318; --bg-elev: #111a20; --bg-glass: rgba(17,26,32,0.5);
--line: rgba(180,235,225,0.09); --line-strong: rgba(180,235,225,0.18); }
:root[data-bg="aurora"] body { background: radial-gradient(ellipse 90% 70% at 15% -10%, rgba(61,217,255,0.16), transparent 55%), radial-gradient(ellipse 80% 70% at 90% 10%, rgba(196,255,61,0.12), transparent 55%), #060a0d; background-attachment: fixed; }
:root[data-bg="nebula"] { --bg: #07061a; --bg-soft: #0d0c24; --bg-elev: #141334; --bg-glass: rgba(20,19,52,0.5);
--line: rgba(200,190,255,0.10); --line-strong: rgba(200,190,255,0.2); }
:root[data-bg="nebula"] body { background: radial-gradient(ellipse 90% 70% at 10% 0%, rgba(124,92,255,0.22), transparent 55%), radial-gradient(ellipse 80% 70% at 95% 15%, rgba(61,170,255,0.16), transparent 55%), #07061a; background-attachment: fixed; }
:root[data-bg="dusk"] { --bg: #100711; --bg-soft: #1a0d1c; --bg-elev: #241327; --bg-glass: rgba(36,19,39,0.5);
--line: rgba(255,200,220,0.10); --line-strong: rgba(255,200,220,0.2); }
:root[data-bg="dusk"] body { background: radial-gradient(ellipse 95% 70% at 12% -5%, rgba(255,107,61,0.20), transparent 52%), radial-gradient(ellipse 85% 70% at 92% 12%, rgba(180,61,255,0.18), transparent 55%), #100711; background-attachment: fixed; }
:root[data-bg="abyss"] { --bg: #03070f; --bg-soft: #071423; --bg-elev: #0b1d33; --bg-glass: rgba(11,29,51,0.5);
--line: rgba(150,200,255,0.09); --line-strong: rgba(150,200,255,0.18); }
:root[data-bg="abyss"] body { background: linear-gradient(180deg, #0a1f38 0%, #051120 45%, #03070f 100%); background-attachment: fixed; }
/* ============================================================
MOTION INTENSITY — [data-motion]
JS reads this to pace the live console; CSS toggles ambient motion.
============================================================ */
:root { --motion-glow: 1; }
:root[data-motion="calm"] { --motion-glow: 0; }
:root[data-motion="max"] { --motion-glow: 1.8; }
/* ============================================================
INTERIOR HERO DEPTH · the house cyan-glass language everywhere
A soft cyan aura blooms behind each interior page's headline so every
page opens with the same lit, dimensional feel as the home's product
hero. Purely decorative (pseudo-element, z-index:-1) — it never touches
layout or a heading's own entrance animation. brief already owns its
::before, so it gets the aura on ::after.
============================================================ */
.about-hero, .services-hero, .work-hero, .news-hero, .t-hero, .contact-stage { position: relative; }
.about-hero::before, .services-hero::before, .work-hero::before,
.news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after {
content: ''; position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: clamp(70px, 13vh, 190px); transform: translateX(-50%);
width: min(760px, 86vw); height: min(340px, 42vh);
background:
radial-gradient(ellipse 60% 60% at 50% 42%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 66%),
radial-gradient(ellipse 92% 52% at 50% 62%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%);
filter: blur(58px); opacity: 0.7;
animation: io-aura 9s ease-in-out infinite;
}
@keyframes io-aura {
0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}
@media (max-width: 640px) {
.about-hero::before, .services-hero::before, .work-hero::before,
.news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after { filter: blur(44px); opacity: 0.58; }
}
:root[data-motion="calm"] .about-hero::before, :root[data-motion="calm"] .services-hero::before,
:root[data-motion="calm"] .work-hero::before, :root[data-motion="calm"] .news-hero::before,
:root[data-motion="calm"] .t-hero::before, :root[data-motion="calm"] .contact-stage::before,
:root[data-motion="calm"] .brf-hero::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
.about-hero::before, .services-hero::before, .work-hero::before,
.news-hero::before, .t-hero::before, .contact-stage::before, .brf-hero::after { animation: none; }
}
/* ============================================================
RESET + BASE
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--f-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
/* Mobile hardening: guarantee no sideways scroll (clip, not hidden, so sticky
never breaks) and keep wide CTAs/cards inside the frame on small screens.
Decorative bleed (glows, marquee) stays clipped as intended. */
html { overflow-x: clip; }
@media (max-width: 560px) {
.btn { max-width: 100%; }
.hero__cta-row, .brain-cta, .svc-cta, .cta-band__actions { flex-wrap: wrap; }
.marquee, .clients, .svc-banner__streams, .film-embed { max-width: 100vw; overflow: hidden; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
/* ============================================================
GLOBAL TEXTURE — grain + grid + glows
============================================================ */
body::before {
/* film grain */
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1000;
opacity: 0.18;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: grain 2.4s steps(4) infinite;
}
@keyframes grain {
0%, 100% { transform: translate(0,0); }
25% { transform: translate(-3%, 2%); }
50% { transform: translate(2%, -2%); }
75% { transform: translate(-2%, -3%); }
}
:root[data-grain="off"] body::before { display: none; }
.bg-grid {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
opacity: 0.7;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.bg-glow {
position: fixed;
pointer-events: none;
z-index: 0;
border-radius: 50%;
filter: blur(80px);
opacity: 0.35;
will-change: transform, opacity;
}
.bg-glow--lime { width: 540px; height: 540px; background: var(--accent); top: -240px; left: -200px; opacity: 0.10; animation: glow-drift-a calc(20s / (var(--motion-glow) + 0.0001)) ease-in-out infinite; }
.bg-glow--cyan { width: 460px; height: 460px; background: var(--signal-cyan); top: -160px; right: -220px; opacity: 0.07; animation: glow-drift-b calc(26s / (var(--motion-glow) + 0.0001)) ease-in-out infinite; }
:root[data-motion="calm"] .bg-glow { animation: none !important; }
@keyframes glow-drift-a {
0%, 100% { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1); opacity: 0.08; }
50% { transform: translate(calc(60px + var(--gx, 0px)), calc(50px + var(--gy, 0px))) scale(1.12); opacity: 0.14; }
}
@keyframes glow-drift-b {
0%, 100% { transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1); opacity: 0.05; }
50% { transform: translate(calc(-50px + var(--gx, 0px)), calc(60px + var(--gy, 0px))) scale(1.14); opacity: 0.10; }
}
/* full-viewport scan sweep — a lime line slowly travelling down, "the engine reading the page" */
.bg-scan {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bg-scan::before {
content: '';
position: absolute;
left: 0; right: 0; top: -20%;
height: 220px;
background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--accent) 12%, transparent) 55%, color-mix(in oklch, var(--accent) 24%, transparent) 70%, transparent);
filter: blur(2px);
animation: scan-down 7s linear infinite;
opacity: 0.5;
}
.bg-scan::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
top: -20%;
background: color-mix(in oklch, var(--accent) 60%, transparent);
box-shadow: 0 0 12px var(--accent);
animation: scan-down 7s linear infinite;
opacity: 0.6;
}
@keyframes scan-down {
0% { transform: translateY(-10vh); }
100% { transform: translateY(120vh); }
}
:root[data-motion="calm"] .bg-scan { display: none; }
@media (prefers-reduced-motion: reduce) { .bg-scan { display: none; } }
/* ---- Pointer FX: magnetic CTAs + card tilt (transforms set in site.js) ---- */
.fx-magnetic { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.fx-tilt { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
@media (prefers-reduced-motion: reduce) {
.fx-magnetic, .fx-tilt { transition: none !important; transform: none !important; }
}
/* ---- Accent-word shimmer in headlines (only when motion is welcome).
The motion engine splits headlines into per-letter nodes, and
background-clip:text paints a solid block (with invisible text) when the
clipped element contains transformed children. So the gradient is clipped
on LEAF nodes only: the itself while it still holds plain text, or
each split char/word node inside it after a split — a transform on the
clipped node itself is safe; only descendant transforms break the clip. ---- */
@media (prefers-reduced-motion: no-preference) {
@keyframes accent-shimmer { to { background-position: 200% center; } }
:root:not([data-motion="calm"]) :is(h1, h2, .hero__title) em:not(:has(div, span)),
:root:not([data-motion="calm"]) :is(h1, h2, .hero__title) em :is(div, span):not(:has(div, span)) {
background-image: linear-gradient(100deg, var(--accent), var(--signal-cyan) 35%, var(--accent) 60%, var(--signal-cyan) 85%, var(--accent));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: accent-shimmer 7s linear infinite;
}
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 500;
}
.display {
font-family: var(--f-serif);
font-weight: 400;
font-size: clamp(56px, 9.5vw, 148px);
line-height: 0.95;
letter-spacing: -0.02em;
margin: 0;
}
.display em, .display .italic { font-style: italic; color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.015em; margin: 0; line-height: 1.02; }
h1 { font-size: clamp(52px, 7.5vw, 106px); }
h2 { font-size: clamp(44px, 6.2vw, 90px); }
h3 { font-size: clamp(28px, 3.2vw, 44px); }
h4 { font-size: clamp(22px, 2.2vw, 30px); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
p { margin: 0; }
.lede {
font-family: var(--f-sans);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.5;
color: var(--text-mute);
max-width: 60ch;
text-wrap: pretty;
}
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
.label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
/* ============================================================
LAYOUT
============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
section { position: relative; padding: var(--pad-section) 0; }
.divider { height: 1px; background: var(--line); margin: 0; border: 0; }
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
flex-wrap: nowrap; /* one row, always */
align-items: center;
gap: 28px;
padding: 8px 8px 8px 22px;
background: var(--bg-glass);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
box-shadow: 0 14px 40px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
font-family: var(--f-sans);
font-size: 14px;
max-width: calc(100vw - 32px);
}
.nav__brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.nav__links {
display: flex;
gap: 22px;
align-items: center;
font-size: 13px;
color: var(--text-mute);
}
.nav__links a { transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a.active { color: var(--text); }
.nav__links a.active::after {
content: '';
display: block;
height: 3px;
width: 3px;
border-radius: 50%;
background: var(--accent);
margin: 2px auto 0;
box-shadow: 0 0 8px var(--accent);
}
.nav__cta {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap; /* a long CTA label must never wrap the pill taller */
flex: 0 0 auto;
padding: 10px 16px;
background: var(--accent);
color: var(--accent-ink);
border-radius: var(--r-pill);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.01em;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--accent); }
/* orb */
.orb {
width: 22px;
height: 22px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--accent), var(--signal-cyan), var(--signal-warm), var(--accent));
filter: blur(0.5px);
animation: orb-spin 8s linear infinite;
box-shadow: 0 0 18px -2px var(--accent);
position: relative;
}
.orb::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--bg);
}
.orb--lg { width: 28px; height: 28px; }
.orb--sm { width: 14px; height: 14px; }
.orb--sm::after { inset: 2px; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
.nav { gap: 16px; }
.nav__links { gap: 14px; overflow: hidden; }
}
@media (max-width: 880px) {
.nav__links { display: none; }
}
/* ============================================================
BUTTONS / CHIPS / PILLS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.005em;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
cursor: pointer;
white-space: nowrap;
border: 1px solid transparent;
}
.btn--primary {
background: var(--accent);
color: var(--accent-ink);
box-shadow: 0 14px 40px -16px var(--accent);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -14px var(--accent); }
.btn--ghost {
border-color: var(--line-strong);
color: var(--text);
background: transparent;
}
.btn--ghost:hover { border-color: var(--text); background: rgba(232,234,237,0.04); }
.btn--lg { padding: 20px 30px; font-size: 16px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }
.pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
background: var(--bg-glass);
backdrop-filter: blur(12px);
}
.pill__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--signal-green);
position: relative;
box-shadow: 0 0 8px var(--signal-green);
}
.pill__dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--signal-green);
animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
0% { opacity: 0.8; transform: scale(0.6); }
100% { opacity: 0; transform: scale(2.2); }
}
.tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border: 1px solid var(--line-strong);
border-radius: 4px;
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.tag--accent { color: var(--accent); border-color: rgba(196,255,61,0.3); background: rgba(196,255,61,0.06); }
.tag--cyan { color: var(--signal-cyan); border-color: rgba(61,217,255,0.3); background: rgba(61,217,255,0.06); }
/* ============================================================
CARDS / GLASS
============================================================ */
.card {
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--pad-card);
position: relative;
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover {
transform: translateY(-4px);
border-color: var(--line-strong);
box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}
.card--glass {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
backdrop-filter: blur(14px);
border-color: var(--line-strong);
}
.card--accent {
border-color: rgba(196,255,61,0.35);
box-shadow: 0 0 0 1px rgba(196,255,61,0.15) inset, 0 30px 80px -40px var(--accent);
}
/* ============================================================
FOOTER
============================================================ */
.footer {
position: relative;
padding: 80px 0 56px;
border-top: 1px solid var(--line);
margin-top: 80px;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 56px;
align-items: start;
}
.footer__brand-mark {
font-family: var(--f-serif);
font-size: 72px;
font-style: italic;
line-height: 0.9;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.footer__col h5 {
font-family: var(--f-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 18px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; color: var(--text-mute); }
.footer__col a:hover { color: var(--accent); }
.footer__status {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: 12px;
color: var(--text-mute);
margin-bottom: 20px;
}
.footer__legacy {
font-family: var(--f-serif);
font-style: italic;
font-size: 18px;
color: var(--text-mute);
max-width: 28ch;
line-height: 1.35;
}
.footer__base {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-dim);
text-transform: uppercase;
}
@media (max-width: 880px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__brand-mark { font-size: 56px; }
}
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
/* Reveal: content is visible by default. JS arms the hidden state (.is-armed)
then unarms each element with .is-in. We avoid animations/transitions on
these because hidden iframes throttle them and content can get stranded. */
.reveal { opacity: 1; transform: none; }
/* Static hidden state on arm — no transition here, so arming never flashes. */
.reveal.is-armed:not(.is-in) { opacity: 0; }
/* The reveal itself: a randomized entrance animation (variant set in site.js)
with a small per-element stagger. Fill `both` holds the hidden start until it
plays; the 5s failsafe removes .is-armed if a hidden iframe ever throttles it. */
.reveal.is-armed.is-in {
animation: reveal-up 0.72s var(--ease-out) both;
animation-delay: var(--reveal-delay, 0s);
}
.reveal--up.is-armed.is-in { animation-name: reveal-up; }
.reveal--scale.is-armed.is-in { animation-name: reveal-scale; }
.reveal--blur.is-armed.is-in { animation-name: reveal-blur; }
.reveal--rise.is-armed.is-in { animation-name: reveal-rise; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes reveal-blur { from { opacity: 0; filter: blur(16px); } to { opacity: 1; filter: blur(0); } }
@keyframes reveal-rise { from { opacity: 0; transform: perspective(900px) rotateX(13deg) translateY(26px); } to { opacity: 1; transform: none; } }
/* Calm motion preset → gentler, uniform fade-up. */
:root[data-motion="calm"] .reveal.is-armed.is-in { animation-name: reveal-up; animation-duration: 0.5s; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal.is-armed { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
.orb, body::before, .pill__dot::after { animation: none; }
}
/* ============================================================
SECTION HEADER (shared)
============================================================ */
.section-head {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
margin-bottom: 56px;
text-align: center;
justify-items: center;
}
.section-head > * { max-width: 760px; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.section-head__tag {
width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
}
/* ============================================================
PAGE-LOAD SPLASH (staggered reveal)
============================================================ */
.page-load {
position: fixed;
inset: 0;
z-index: 200;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
animation: page-load 1.6s var(--ease-out) forwards;
animation-delay: 0.2s;
}
.page-load__mark {
font-family: var(--f-mono);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.4em;
opacity: 0;
animation: mark-in 0.6s var(--ease-out) forwards;
}
@keyframes mark-in { 0% { opacity: 0; transform: translateY(8px); } 60% { opacity: 1; transform: none; } }
@keyframes page-load {
0%, 30% { opacity: 1; }
100% { opacity: 0; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); }
}
/* ============================================================
CTA BAND (shared)
============================================================ */
.cta-band {
position: relative;
padding: clamp(80px, 12vw, 160px) 0;
text-align: center;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 50% 50%, rgba(196,255,61,0.18), transparent 60%),
radial-gradient(ellipse 30% 40% at 20% 80%, rgba(61,217,255,0.12), transparent 70%);
pointer-events: none;
}
.cta-band h2 { max-width: 16ch; margin: 0 auto 32px; }
.cta-band__sub { color: var(--text-mute); max-width: 50ch; margin: 0 auto 40px; }
/* ============================================================
SIGNAL BARS / SPARKLINES
============================================================ */
.bar {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.bar__label { flex: 0 0 130px; color: var(--text-mute); }
.bar__track { flex: 1; height: 6px; background: rgba(232,234,237,0.06); border-radius: 999px; overflow: hidden; position: relative; }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 1.2s var(--ease-out); }
.bar__fill--green { background: var(--signal-green); box-shadow: 0 0 12px var(--signal-green); }
.bar__fill--amber { background: var(--signal-amber); box-shadow: 0 0 12px var(--signal-amber); }
.bar__fill--red { background: var(--signal-red); box-shadow: 0 0 12px var(--signal-red); }
.bar__value { flex: 0 0 60px; text-align: right; color: var(--text); }
/* ============================================================
UTILITIES
============================================================ */
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.accent { color: var(--accent); }
.italic { font-style: italic; }
.center { text-align: center; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.grid { display: grid; }
.mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; }
/* ============================================================
NAV — AV logo + upgraded liquid CTA (cc-5 / cc-6)
============================================================ */
.nav__brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 9px rgba(61,217,255,0.45)); }
.nav__brand .tld { color: var(--accent); opacity: 0.92; }
.nav__cta {
position: relative; overflow: hidden; padding: 11px 20px; font-weight: 700;
background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--signal-cyan) 55%, var(--accent)));
color: var(--accent-ink);
box-shadow: 0 6px 22px -6px var(--accent), inset 0 1px 0 rgba(255,255,255,0.45);
}
.nav__cta::after {
content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-20deg); animation: cta-sheen 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes cta-sheen { 0%, 100% { left: -60%; } 55% { left: 130%; } }
:root[data-motion="calm"] .nav__cta::after { animation: none; }
.nav__cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.5); }
/* ============================================================
FX2 — showpiece animation styles
============================================================ */
/* #4 warp menu trigger (in nav) */
.nav__menu {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; gap: 5px;
border: 1px solid var(--line-strong); background: transparent; cursor: pointer; flex: 0 0 auto;
transition: border-color .25s, background .25s;
}
.nav__menu span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform .3s; }
.nav__menu:hover { border-color: var(--accent); background: rgba(196,255,61,0.06); }
.nav__menu:hover span:first-child { transform: translateY(1px); }
/* #4 warp overlay */
.warp {
position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
overflow-y: auto; padding: 56px 24px;
background: rgba(5,6,9,0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.warp.is-open { opacity: 1; pointer-events: auto; }
.warp.is-warping { animation: warp-out .62s var(--ease-out) forwards; }
@keyframes warp-out { to { opacity: 0; transform: scale(1.5); filter: blur(20px); } }
.warp__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp__close {
position: absolute; top: 28px; right: 32px; width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--line-strong); color: var(--text-mute); background: var(--bg-glass); cursor: pointer; font-size: 18px;
transition: color .25s, border-color .25s; z-index: 2;
}
.warp__close:hover { color: var(--accent); border-color: var(--accent); }
.warp__links { position: relative; z-index: 2; display: grid; gap: clamp(4px, 1vw, 12px); text-align: center; }
.warp__links a {
display: inline-flex; align-items: baseline; gap: 18px; justify-content: center;
font-family: var(--f-serif); font-size: clamp(20px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.02em;
color: var(--text); transition: color .3s; opacity: 0; transform: translateY(20px);
}
.warp.is-open .warp__links a { animation: warp-in .6s var(--ease-out) forwards; }
.warp__links a:nth-child(1) { animation-delay: .06s; } .warp__links a:nth-child(2) { animation-delay: .1s; }
.warp__links a:nth-child(3) { animation-delay: .14s; } .warp__links a:nth-child(4) { animation-delay: .18s; }
.warp__links a:nth-child(5) { animation-delay: .22s; } .warp__links a:nth-child(6) { animation-delay: .26s; }
.warp__links a:nth-child(7) { animation-delay: .3s; } .warp__links a:nth-child(8) { animation-delay: .34s; }
.warp__links a:nth-child(9) { animation-delay: .38s; } .warp__links a:nth-child(10) { animation-delay: .42s; }
@keyframes warp-in { to { opacity: 1; transform: none; } }
/* Pricing stands out in the warp menu too: accent + breathing glow */
.warp__links a[data-pm-open] { color: var(--accent); }
.warp__links a[data-pm-open] .warp__t { animation: warp-pricing-breathe 2.8s ease-in-out infinite; }
@keyframes warp-pricing-breathe {
0%, 100% { text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent); }
50% { text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .warp__links a[data-pm-open] .warp__t { animation: none; } }
.warp__links a em { font-family: var(--f-mono); font-style: normal; font-size: 13px; color: var(--accent); opacity: 0.7; }
.warp__links a .warp__t span { display: inline-block; transition: transform .3s var(--ease); }
.warp__links a:hover { color: var(--accent); }
.warp__links a:hover .warp__t span { transform: translateY(-6px) scale(1.08); }
/* #9/#10 portrait holographic overlay */
.portrait { will-change: transform; transition: transform .4s var(--ease); }
.portrait__holo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; transition: transform .3s var(--ease); z-index: 2; }
.portrait__initials { position: relative; z-index: 3; transition: transform .4s var(--ease); }
.portrait.is-revealed { box-shadow: 0 0 60px -10px var(--accent); }
/* #7 liquid reading-progress bar */
.liquid-bar { position: fixed; top: 0; left: 0; width: 100%; height: 8px; z-index: 1050; pointer-events: none; }
/* #8 tag cloud */
[data-tagcloud] { position: relative; width: 100%; min-height: 320px; display: block; }
[data-tagcloud] a {
font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text); white-space: nowrap; text-decoration: none; padding: 3px 8px;
transition: color .2s;
}
[data-tagcloud] a:hover { color: var(--accent); }
/* ambient orbit sprinkle — reusable background tag-cloud (orbit.js) */
.orbit-ambient {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.4;
-webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 28%, transparent 80%);
mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 28%, transparent 80%);
}
.orbit-ambient a {
font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in oklab, var(--accent) 72%, var(--text)); white-space: nowrap; text-decoration: none;
text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 26%, transparent);
}
.orbit-ambient a:nth-child(2n) { color: color-mix(in oklab, var(--signal-cyan) 72%, var(--text)); text-shadow: 0 0 12px color-mix(in oklab, var(--signal-cyan) 26%, transparent); }
.orbit-ambient a:nth-child(5n) { color: color-mix(in oklab, var(--signal-warm) 64%, var(--text)); }
:root[data-motion="calm"] .orbit-ambient { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) { .orbit-ambient { display: none; } }
/* ============================================================
CLEAT GALLERY — auto-rotating product photos (CSS crossfade)
============================================================ */
.cleat-gallery { position: absolute; inset: 0; overflow: hidden; background: #f6f7f9; border-radius: 12px; }
.dz-art { position: absolute; inset: 0; display: grid; place-items: center; }
.dz-art svg { width: 100%; height: 100%; display: block; }
.cleat-gallery img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; object-position: center;
padding: 3%;
opacity: 0;
animation: cleat-cycle 21s infinite;
will-change: opacity;
}
.cleat-gallery img:nth-child(1) { animation-delay: 0s; }
.cleat-gallery img:nth-child(2) { animation-delay: 3.5s; }
.cleat-gallery img:nth-child(3) { animation-delay: 7s; }
.cleat-gallery img:nth-child(4) { animation-delay: 10.5s; }
.cleat-gallery img:nth-child(5) { animation-delay: 14s; }
.cleat-gallery img:nth-child(6) { animation-delay: 17.5s; }
/* first photo is a permanent visible base (never black, even if anims are throttled);
the rest crossfade over it */
.cleat-gallery img:first-child { opacity: 1; animation: none; }
@keyframes cleat-cycle {
0% { opacity: 0; }
1.5% { opacity: 1; }
16.5% { opacity: 1; }
19.5% { opacity: 0; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cleat-gallery img { animation: none; opacity: 0; }
.cleat-gallery img:first-child { opacity: 1; }
}
/* industry photo galleries (legal / saas / local) — crossfade like the cleats but fill the frame */
.dz-photos { position: absolute; inset: 0; overflow: hidden; background: #0a0b0d; border-radius: 12px; }
.dz-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation: dz-photo-cycle 20s infinite; }
.dz-photos img:nth-child(1) { animation-delay: 0s; }
.dz-photos img:nth-child(2) { animation-delay: 4s; }
.dz-photos img:nth-child(3) { animation-delay: 8s; }
.dz-photos img:nth-child(4) { animation-delay: 12s; }
.dz-photos img:nth-child(5) { animation-delay: 16s; }
.dz-photos img:first-child { opacity: 1; animation: none; }
@keyframes dz-photo-cycle { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.dz-photos img { animation: none; opacity: 0; }
.dz-photos img:first-child { opacity: 1; }
}
/* ============================================================
ENGINE NODE NETWORK (worknetwork.js) — shared component
core hub + orbiting nodes wired by animated tentacles
============================================================ */
.net { position: relative; width: 100%; height: clamp(700px, 78vw, 900px); margin: 4px 0 8px; }
.net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.net-node {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: clamp(206px, 22vw, 268px);
background: linear-gradient(180deg, color-mix(in oklab, var(--node) 9%, var(--bg-elev)), var(--bg-elev));
border: 1px solid color-mix(in oklab, var(--node) 36%, var(--line));
border-radius: var(--r-lg);
padding: 18px 20px;
display: grid; gap: 8px; z-index: 2;
box-shadow: 0 20px 46px -26px rgba(0,0,0,0.82);
cursor: pointer; will-change: transform;
transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.net-node:hover { z-index: 7; border-color: var(--node); box-shadow: 0 0 44px -10px var(--node), 0 28px 58px -24px rgba(0,0,0,0.9); }
.net-node.is-pulse { border-color: var(--node); box-shadow: 0 0 40px -8px var(--node); }
.net-node__tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.net-node__result { font-family: var(--f-serif); font-style: italic; font-size: 44px; line-height: 0.9; color: var(--node); letter-spacing: -0.02em; text-shadow: 0 0 28px color-mix(in oklab, var(--node) 45%, transparent); }
.net-node__result .u { font-size: 0.4em; font-style: normal; margin-left: 4px; color: var(--text-mute); vertical-align: 0.5em; }
.net-node__client { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--node); }
.net-node__title { font-family: var(--f-serif); font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; text-wrap: pretty; }
.net-node__arrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); display: flex; gap: 6px; align-items: center; }
.net-node.is-dim { opacity: 0.14; pointer-events: none; }
/* core hub */
.net-node--core {
width: clamp(188px, 17vw, 224px);
text-align: center; justify-items: center; cursor: default; gap: 7px;
background: radial-gradient(circle at 50% 32%, rgba(196,255,61,0.16), var(--bg-elev) 72%);
border-color: rgba(196,255,61,0.5);
box-shadow: 0 0 64px -16px var(--accent), 0 24px 56px -26px rgba(0,0,0,0.9);
z-index: 5;
}
.net-core-orb { width: 46px; height: 46px; margin-bottom: 2px; }
.net-node--core h4 { font-family: var(--f-serif); font-size: 25px; line-height: 1; }
.net-node--core .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.net-node--core .live { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 7px; align-items: center; }
.net-node--core .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* compact variant — for the homepage teaser */
.net--mini { height: clamp(540px, 58vw, 680px); }
.net--mini .net-node { width: clamp(166px, 17vw, 210px); padding: 14px 16px; border-radius: var(--r-md); gap: 6px; }
.net--mini .net-node__result { font-size: 34px; }
.net--mini .net-node__title { font-size: 15px; }
.net--mini .net-node--core { width: clamp(150px, 14vw, 182px); }
.net--mini .net-core-orb { width: 38px; height: 38px; }
.net--mini .net-node--core h4 { font-size: 21px; }
/* readable grid fallback — narrow + reduced-motion */
.net.is-grid { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .net.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .net.is-grid { grid-template-columns: 1fr; } }
.net.is-grid .net-node { position: static; transform: none !important; width: auto; }
.net.is-grid .net-node--core { grid-column: 1 / -1; }
.net.is-grid .net-canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
.net { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.net .net-node { position: static; transform: none !important; width: auto; }
.net .net-node--core { grid-column: 1 / -1; }
.net .net-canvas { display: none; }
}
/* #6 news cylinder */
.cyl { position: relative; height: 460px; perspective: 1100px; overflow: visible; touch-action: pan-y; }
.cyl__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.cyl > .post-card, .cyl .post-card { width: min(320px, 78vw); }
.cyl .post-card { cursor: grab; }
.cyl .post-card:active { cursor: grabbing; }
/* #1 chroma hero canvas */
.hero__canvas-wrap canvas[data-hero-chroma] { display: none; }
:root[data-hero="chroma"] .hero__canvas-wrap canvas[data-hero-mesh] { display: none; }
:root[data-hero="chroma"] .hero__canvas-wrap canvas[data-hero-chroma] { display: block; }
:root[data-hero="chroma"] .hero__orb-wrap { display: none; }
/* sonar hero background mode */
/* sonar hero background mode */
.hero__canvas-wrap canvas[data-hero-ripple] { display: none; }
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-mesh],
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-chroma] { display: none; }
:root[data-hero="ripple"] .hero__canvas-wrap canvas[data-hero-ripple] { display: block; }
:root[data-hero="ripple"] .hero__orb-wrap, :root[data-hero="ripple"] .hero__sonar { display: none; }
.hero__sonar { position: absolute; inset: 0; display: none; overflow: hidden; }
:root[data-hero="sonar"] .hero__canvas-wrap canvas { display: none; }
:root[data-hero="sonar"] .hero__sonar { display: block; }
:root[data-hero="sonar"] .hero__orb-wrap { display: none; }
.hero__sonar .ring {
position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
transform: translate(-50%, -50%); animation: sonar-ping 4.4s ease-out infinite;
}
.hero__sonar .sweep {
position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 22%);
animation: sonar-sweep 6s linear infinite; opacity: 0.5;
}
@keyframes sonar-ping { 0% { width: 0; height: 0; opacity: 0.75; } 100% { width: 130vmax; height: 130vmax; opacity: 0; } }
@keyframes sonar-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
:root[data-motion="calm"] .hero__sonar .sweep, :root[data-motion="calm"] .hero__sonar .ring { animation: none; }
/* ============================================================
CLIENT LOGO WALL — animated marquee
============================================================ */
.clients { overflow: hidden; }
.marquee { overflow: hidden; margin-top: 44px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
:root[data-motion="calm"] .marquee__track { animation: none; }
.client-chip {
flex: 0 0 auto; height: 100px; width: 208px; display: grid; place-items: center; padding: 18px 26px;
background: linear-gradient(180deg, #f6f7f9, #e9ebee); border-radius: 16px; border: 1px solid var(--line-strong);
box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.client-chip:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.85); }
.client-chip img { max-height: 58px; max-width: 156px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.82; transition: filter .3s, opacity .3s; }
.client-chip:hover img { filter: none; opacity: 1; }
.client-chip--text { font-family: var(--f-sans); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; color: #0a1a3a; }
.client-chip--pbs { background: #111; }
/* self-rewriting copy callout */
.rw-flag {
position: absolute; z-index: 80; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 11px;
border-radius: 999px; box-shadow: 0 10px 28px -8px var(--accent); opacity: 0; transform: translateY(8px);
transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; white-space: nowrap; font-weight: 600;
}
.rw-flag.is-on { opacity: 1; transform: none; }
.rw-flag__arrow { margin-right: 5px; }
.rw-just { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* ============================================================
Nav transparent-on-scroll (cc-2) + centered interior heroes (cc-1)
============================================================ */
/* Readability first: the old scrolled state went fully transparent and
dropped the links to 50% opacity until hovered — which read as a broken,
illegible nav floating over page art. The nav now KEEPS its glass and its
links at full strength at all times; scrolling just softens the shadow. */
.nav { transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease); }
.nav.is-scrolled { background: var(--bg-glass); border-color: var(--line-strong); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5); }
.nav.is-scrolled:hover { box-shadow: 0 14px 40px -20px rgba(0,0,0,0.6); }
/* Center the intro of interior index pages */
.work-hero, .services-hero, .news-hero, .t-hero, .demo-hero { text-align: center; }
.work-hero h1, .services-hero h1, .news-hero h1, .t-hero h1, .demo-hero h1,
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede {
margin-left: auto; margin-right: auto;
}
.work-hero .eyebrow, .services-hero .eyebrow, .news-hero .eyebrow, .t-hero .eyebrow, .demo-hero .eyebrow { justify-content: center; }
.t-hero .proof-row { text-align: left; }
@media (prefers-reduced-motion: reduce) {
.warp.is-warping { animation: none; }
.warp__links a { opacity: 1; transform: none; animation: none !important; }
}
/* ---- comment batch: spacing, eyebrow glow, CTA ---- */
.clients { padding-top: clamp(36px,5vw,72px); padding-bottom: clamp(16px,2.5vw,36px); }
.clients .section-head { margin-bottom: 18px; }
.marquee { margin-top: 22px; }
.how-eyebrow { margin-left: clamp(0px,4vw,72px); box-shadow: 0 0 22px -4px var(--accent); animation: how-glow 2.6s ease-in-out infinite; }
.how-sub { margin-left: clamp(0px,4vw,72px); }
@keyframes how-glow { 50% { box-shadow: 0 0 42px 0 var(--accent); border-color: var(--accent); } }
:root[data-motion="calm"] .how-eyebrow { animation: none; }
.cta-band h2 { max-width: 32ch; font-size: clamp(34px,4.6vw,62px); }
.cta-band .btn--primary { position: relative; overflow: hidden; animation: cta-pulse 2.6s var(--ease) infinite; }
@keyframes cta-pulse { 0%,100% { box-shadow: 0 14px 40px -16px var(--accent); } 50% { box-shadow: 0 22px 62px -8px var(--accent); transform: translateY(-3px); } }
.cta-band .btn--primary::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent); transform:skewX(-20deg); animation:cta-sheen 3s ease-in-out infinite; pointer-events:none; }
:root[data-motion="calm"] .cta-band .btn--primary, :root[data-motion="calm"] .cta-band .btn--primary::after { animation: none; }
/* ============================================================
GLOW · 3D DEPTH · EMPHASIS batch
============================================================ */
:root { --pad-section: clamp(58px, 7.5vw, 112px); } /* tighten vertical space */
/* live demo area — glowing animated border so it reads as LIVE */
.sandbox { position: relative; }
.sandbox::before {
content: ''; position: absolute; inset: -2px; border-radius: 30px; z-index: -1; pointer-events: none;
background: linear-gradient(120deg, var(--accent), var(--signal-cyan), var(--signal-warm), var(--accent));
background-size: 300% 300%; filter: blur(9px); opacity: 0.45; animation: demo-border 6s linear infinite;
}
@keyframes demo-border { to { background-position: 300% 0; } }
:root[data-motion="calm"] .sandbox::before { animation: none; }
.sandbox__head .how-eyebrow { box-shadow: 0 0 24px -4px var(--accent); animation: how-glow 2.4s ease-in-out infinite; }
/* glowing accent numbers + 3D pop */
.metric__num em, .spark-card__num, .statcube__num, .stat-cell__num,
.hero__outcome .accent-num, .results-row .num, .proof__num, .metric__num {
text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent), 0 2px 0 rgba(0,0,0,0.35);
}
.signals .bar__value, .signals .bar__label { text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 35%, transparent); }
.section-head .eyebrow, .metric__delta { text-shadow: 0 0 16px color-mix(in oklab, var(--accent) 30%, transparent); }
/* self-heal alert — way more emphasis */
.alert { box-shadow: 0 0 42px -10px var(--accent), 0 0 0 1px rgba(196,255,61,0.22) inset; animation: alert-glow 2.6s ease-in-out infinite; }
@keyframes alert-glow { 50% { box-shadow: 0 0 64px -6px var(--accent), 0 0 0 1px rgba(196,255,61,0.45) inset; } }
:root[data-motion="calm"] .alert { animation: none; }
/* +186/193% spark — glow + bigger */
.spark-card { box-shadow: 0 0 40px -16px var(--accent); }
.spark-card__num { font-size: 48px; text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 60%, transparent); }
/* showcase + metric cards — real 3D depth */
.showcase__card { box-shadow: 0 44px 84px -40px rgba(0,0,0,0.82), 0 0 0 1px rgba(255,255,255,0.03) inset; }
.showcase__card:hover { box-shadow: 0 54px 96px -30px rgba(0,0,0,0.9), 0 0 56px -20px var(--accent); }
.metric { box-shadow: 0 22px 54px -30px rgba(0,0,0,0.8); }
/* ---- console readability + uptime glow + hero button flair ---- */
.log-line { font-size: 13px; }
.log-line__text { color: #eaf2ff; }
.log-line__text b { font-weight: 600; }
.log-line.is-fading { opacity: 0.72; }
.log-line.is-faded { opacity: 0.44; }
.log-line__time { color: rgba(232,234,237,0.55); }
.console__head-r { color: var(--accent); text-shadow: 0 0 14px var(--accent); }
.console__head-l { text-shadow: 0 0 14px var(--accent); }
.hero__cta-row .btn--primary { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--signal-cyan) 55%, var(--accent))); animation: cta-pulse 2.6s var(--ease) infinite; }
.hero__cta-row .btn--primary::after { content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); transform:skewX(-20deg); animation:cta-sheen 3s ease-in-out infinite; pointer-events:none; }
.hero__cta-row .btn--ghost { position: relative; border-color: color-mix(in oklab, var(--accent) 45%, transparent); animation: ghost-glow 3s ease-in-out infinite; }
@keyframes ghost-glow { 50% { border-color: var(--accent); box-shadow: 0 0 30px -8px var(--accent); } }
:root[data-motion="calm"] .hero__cta-row .btn--primary, :root[data-motion="calm"] .hero__cta-row .btn--primary::after, :root[data-motion="calm"] .hero__cta-row .btn--ghost { animation: none; }
/* ---- nav CTA smaller+3D · CTA band conic ring · warp depth ---- */
.nav__cta { padding: 9px 16px; font-size: 12.5px; box-shadow: 0 5px 0 -2px color-mix(in oklab, var(--accent) 55%, #000), 0 12px 26px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,0.5); }
.nav__cta:hover { transform: translateY(-2px) scale(1.03); }
.cta-band::after { content:''; position:absolute; left:50%; top:50%; width:560px; height:560px; transform:translate(-50%,-50%); border-radius:50%; background: conic-gradient(from 0deg, transparent, color-mix(in oklab, var(--accent) 34%, transparent), transparent 42%); animation: cta-ring 9s linear infinite; pointer-events:none; z-index:0; filter: blur(34px); opacity:0.45; }
@keyframes cta-ring { to { transform: translate(-50%,-50%) rotate(360deg); } }
:root[data-motion="calm"] .cta-band::after { animation:none; }
.warp { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,10,14,0.72), rgba(5,6,9,0.94)); }
.warp__links { perspective: 900px; }
.warp__links a { text-shadow: 0 0 32px color-mix(in oklab, var(--accent) 28%, transparent); }
/* ---- testimonials: spinning glowing orbs + bigger glowing featured quotes ---- */
.q-avatar { animation: orb-gentle-spin 16s linear infinite; box-shadow: 0 0 26px -6px var(--accent); }
@keyframes orb-gentle-spin { to { transform: rotate(360deg); } }
:root[data-motion="calm"] .q-avatar { animation: none; }
.q-card blockquote { font-size: clamp(24px, 2.7vw, 38px); text-shadow: 0 0 30px color-mix(in oklab, var(--accent) 22%, transparent); }
.q-card { box-shadow: 0 32px 72px -36px rgba(0,0,0,0.82); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.q-card--accent { box-shadow: 0 0 56px -18px var(--accent), 0 32px 72px -36px rgba(0,0,0,0.82); }
.q-card:hover { box-shadow: 0 0 60px -20px var(--accent), 0 40px 84px -30px rgba(0,0,0,0.9); }
.compact-quote { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.compact-quote:hover { box-shadow: 0 0 42px -16px var(--accent); }
.compact-quote .q-avatar { width: 44px; height: 44px; }
.cta-band h2 em { display: inline; }
/* ---- scan line: only sweep a few times then stop · proof-row animation ---- */
.bg-scan::before, .bg-scan::after { animation-iteration-count: 4; }
.proof { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.proof:hover { transform: translateY(-5px); box-shadow: 0 0 38px -14px var(--accent); }
.proof__num { text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 55%, transparent); }
.endorsement-strip { box-shadow: 0 0 50px -22px var(--accent); }
/* ---- interior brightness + hover glow + flatten CTA + random CTA anims ---- */
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede,
.feature-post p, .featured-study__body p, .case-card__title, .post-card__excerpt { color: #d8dee7; }
.lede, .feature-post p, .featured-study__body p { transition: color .3s, text-shadow .3s; }
.lede:hover, .feature-post:hover p, .featured-study__body p:hover { color: #fff; text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 30%, transparent); }
.case-card:hover, .post-card:hover, .feature-post:hover, .featured-study:hover { box-shadow: 0 0 52px -18px var(--accent), 0 30px 62px -30px rgba(0,0,0,0.72); }
.cta-band h2 { max-width: 40ch; font-size: clamp(32px, 4.2vw, 56px); }
.btn--primary.fx-a { animation: cta-pulse 2.6s var(--ease) infinite; }
.btn--primary.fx-b { animation: ghost-glow 2.4s ease-in-out infinite; }
.btn--primary.fx-c { animation: cta-pulse 3.4s var(--ease) infinite reverse; }
:root[data-motion="calm"] .btn--primary.fx-a, :root[data-motion="calm"] .btn--primary.fx-b, :root[data-motion="calm"] .btn--primary.fx-c { animation: none; }
/* ---- tighten wasted space + float animation on step/engage cards ---- */
:root { --pad-section: clamp(46px, 6vw, 94px); }
.cta-band { padding: clamp(54px,7.5vw,104px) 0; }
.how__step, .engage { animation: card-float 6s ease-in-out infinite; }
.how__step:nth-child(2), .engage:nth-child(2) { animation-delay: -2s; }
.how__step:nth-child(3), .engage:nth-child(3) { animation-delay: -4s; }
@keyframes card-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
:root[data-motion="calm"] .how__step, :root[data-motion="calm"] .engage { animation: none; }
/* ---- animate the featured services graph (draw-on loop) ---- */
.service__featured-vis path[stroke="#c4ff3d"], .service__featured-vis path[stroke] { stroke-dasharray: 620; animation: graph-draw 5s ease-in-out infinite; }
@keyframes graph-draw { 0%{stroke-dashoffset:620;} 55%,100%{stroke-dashoffset:0;} }
:root[data-motion="calm"] .service__featured-vis path { animation: none; }
/* ---- services cards: kill the empty gap, pack content ---- */
.service { grid-template-rows: auto auto auto auto auto; }
.service--featured { min-height: 0; }
.service__featured-vis { margin-top: 10px; }
/* ---- interior hero heads: compact + full-width so they don't eat the whole fold ---- */
.work-hero, .services-hero, .news-hero, .t-hero, .demo-hero { padding-top: 116px !important; padding-bottom: 14px !important; }
.work-hero h1, .services-hero h1, .news-hero h1, .t-hero h1, .demo-hero h1 {
font-size: clamp(32px, 4.2vw, 60px) !important;
line-height: 1.0 !important;
max-width: 30ch !important;
}
.work-hero .lede, .services-hero .lede, .news-hero .lede, .t-hero .lede, .demo-hero .lede {
font-size: clamp(15px, 1.15vw, 17px) !important;
margin-top: 16px !important;
max-width: 78ch !important;
}
.about-hero { padding-top: 120px !important; }
.about-hero h1 { font-size: clamp(34px, 4.6vw, 66px) !important; max-width: 22ch !important; }
.contact-title { font-size: clamp(34px, 4.4vw, 62px) !important; }
/* --- avakata: stacked wordmark (was overlapping the nav links) --- */
.nav__brand > span { display: inline-flex; flex-direction: column; line-height: 1.05; }
.nav__brand .tld { font-size: 0.8em; letter-spacing: 0.18em; }
@media (max-width: 560px) { .nav__cta { display: none; } } /* it lives in the warp menu on phones */
/* --- avakata: clip decorative full-bleed layers (mobile h-scroll) --- */
/* bg glows, living-bg canvas, bg-grid and the 3D news cylinder are meant to
bleed past the viewport; clip (not hidden) stops mobile sideways-scroll
without creating a scroll container or breaking position:sticky. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* motion/motion-vt.css */
/* motion-vt.css: page-to-page transitions (native cross-document View
Transitions). Injected into every page's by deploy step 3.9, after
Instatic's stylesheet, so these rules win over the older "curtain lift" in
Instatic's motion-site.css. It has to be a render-blocking sheet: the new
page's transition starts at its first render, before any script runs.
The old page keeps animating until the next page is ready (no exit curtain
holding the click), then recedes softly while the new page rises in. The
nav is its own transition group, so it stays put instead of flashing. The
new page's entrance animations wait out the fade (motion-boot.js holds them
~300ms on an arrival), so headline motion plays in full view.
Browsers without cross-document View Transitions (Firefox today) and
reduced-motion visitors get a plain page load.
The opt-in that actually counts is the inline