/* === tokens.css === */
/* ==========================================================================
SYNAPSE — Design tokens
Visive.ai theme, aligned to the Design Arena mock (ink / bone / signal lime).
Layer order: tokens -> base -> layout -> components -> effects -> utilities
Cyan primitives are kept for kiosk.css which references them directly.
========================================================================== */
:root {
/* ---------- Palette primitives ------------------------------------ */
--ink-1000: #040508;
--ink-950: #06070a;
--ink-900: #0a0c11;
--ink-850: #0f1218;
--ink-800: #151a23;
--ink-750: #1b212c;
--ink-700: #232a38;
--ink-600: #2e3648;
--ink-500: #3d4658;
--paper-000: #FFFFFF;
--paper-050: #F4F6F4;
--paper-100: #E9EFE9;
--paper-200: #D5DCD5;
--paper-300: #C0C8C0;
/* Arena roles */
--color-ink: #06070a;
--color-ink2: #0a0c11;
--color-panel: #0f1218;
--color-panel2: #151a23;
--color-hair: #e9f0ec17;
--color-hair2: #e9f0ec2e;
--color-bone: #e9efe9;
--color-mist: #97a1a8;
--color-signal: #c9f75b;
--color-mint: #6fe7d2;
--color-amber: #ffb45c;
/* Signal cyan — retained for kiosk CSS */
--cyan-100: #D2FFF9;
--cyan-300: #7BF2E4;
--cyan-400: #3FE3D0;
--cyan-500: #14CDBA;
--cyan-600: #06A896;
--cyan-700: #0A7F73;
--violet-200: #DDD5FF;
--violet-300: #BBA9FF;
--violet-400: #9B84FF;
--violet-500: #7C5CFF;
--violet-600: #6340E0;
--violet-700: #4A2CB0;
--amber-300: #FFD9A0;
--amber-400: #ffb45c;
--amber-500: #F5A524;
--rose-400: #FF6B8A;
--rose-500: #ED4C6A;
--lime-400: #c9f75b;
--sky-400: #59B6FF;
/* ---------- Semantic roles (dark theme = default) ---------------- */
--bg: var(--color-ink);
--bg-sunken: var(--color-ink2);
--bg-raised: var(--color-panel);
--bg-panel: color-mix(in oklab, var(--color-panel) 88%, transparent);
--bg-panel-hover: var(--color-panel2);
--bg-inset: rgba(6 7 10 / 0.55);
--bg-scrim: rgba(6 7 10 / 0.85);
--border: var(--color-hair);
--border-strong: var(--color-hair2);
--border-faint: var(--color-hair);
--text: var(--color-bone);
--text-muted: var(--color-mist);
--text-faint: color-mix(in oklab, var(--color-mist) 72%, var(--color-ink));
--text-inverse: var(--color-ink);
--primary: var(--color-signal);
--primary-strong: #d4ff78;
--primary-soft: rgba(201 247 91 / 0.12);
--primary-ring: rgba(201 247 91 / 0.38);
--primary-text: var(--color-signal);
--signal-text: var(--color-signal);
--on-primary: var(--color-ink);
--brand-ring: var(--color-signal);
--brand-iris: var(--color-mint);
--secondary: var(--color-mint);
--secondary-text: var(--color-mint);
--secondary-soft: rgba(111 231 210 / 0.14);
--accent: var(--color-amber);
--accent-soft: rgba(255 180 92 / 0.14);
--danger: var(--rose-400);
--success: var(--color-signal);
--info: var(--color-mint);
--link: var(--color-mint);
--focus: var(--color-signal);
/* ---------- Gradients & meshes ------------------------------------ */
--grad-signal: linear-gradient(100deg, var(--color-signal) 0%, var(--color-mint) 100%);
--grad-signal-soft: linear-gradient(120deg, rgba(201 247 91 / 0.14), rgba(111 231 210 / 0.1));
--grad-vision: linear-gradient(120deg, var(--color-mint) 0%, var(--color-amber) 100%);
--grad-text: linear-gradient(100deg, var(--color-signal) 0%, var(--color-mint) 60%, var(--color-mint) 100%);
--grad-panel: linear-gradient(160deg, rgba(233 240 236 / 0.06), rgba(233 240 236 / 0.015));
--grad-fade-b: linear-gradient(180deg, transparent, var(--bg));
/* ---------- Typography -------------------------------------------- */
--font-display: "Space Grotesk", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
--font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--fs-micro: clamp(0.688rem, 0.67rem + 0.08vw, 0.75rem);
--fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem);
--fs-sm: clamp(0.875rem, 0.86rem + 0.1vw, 0.938rem);
--fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.063rem);
--fs-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
--fs-lg: clamp(1.313rem, 1.22rem + 0.42vw, 1.563rem);
--fs-xl: clamp(1.563rem, 1.4rem + 0.75vw, 2rem);
--fs-2xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.75rem);
--fs-3xl: clamp(2.25rem, 1.78rem + 2.1vw, 3.75rem);
--fs-4xl: clamp(2.75rem, 1.9rem + 3.6vw, 5.25rem);
--fs-5xl: clamp(2.85rem, 1.6rem + 3.2vw, 4.5rem);
--lh-tight: 1.02;
--lh-snug: 1.14;
--lh-heading: 1.2;
--lh-body: 1.62;
--lh-loose: 1.75;
--tracking-tight: -0.03em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-caps: 0.22em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--measure: 68ch;
--measure-tight: 54ch;
--measure-wide: 82ch;
/* ---------- Space scale (4px base) -------------------------------- */
--s-0: 0;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-8: 2rem;
--s-10: 2.5rem;
--s-12: 3rem;
--s-16: 4rem;
--s-20: 5rem;
--s-24: 6rem;
--s-32: 8rem;
--s-40: 10rem;
--band-sm: clamp(3rem, 5vw, 4.5rem);
--band: clamp(4.5rem, 8vw, 7.5rem);
--band-lg: clamp(6rem, 11vw, 10.5rem);
--gutter: clamp(1.25rem, 4vw, 2rem);
/* ---------- Radii -------------------------------------------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 24px;
--r-pill: 999px;
/* ---------- Elevation & glow -------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0 0 0 / 0.4);
--shadow-md: 0 8px 24px -8px rgba(0 0 0 / 0.55);
--shadow-lg: 0 28px 60px -24px rgba(0 0 0 / 0.72);
--shadow-xl: 0 40px 120px -40px rgba(0 0 0 / 0.9);
--glow-primary: 0 0 34px -8px rgba(201 247 91 / 0.65);
--glow-secondary: 0 0 34px -8px rgba(111 231 210 / 0.45);
--inner-hairline: inset 0 1px 0 rgba(233 240 236 / 0.06);
/* ---------- Motion ------------------------------------------------- */
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 300ms;
--dur-4: 520ms;
--dur-5: 800ms;
--dur-6: 1200ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ---------- Layout ------------------------------------------------- */
--container: 72rem;
--container-wide: 1440px;
--container-narrow: 880px;
--container-prose: 720px;
--header-h: 68px;
--z-base: 1;
--z-sticky: 60;
--z-header: 80;
--z-drawer: 90;
--z-modal: 100;
--z-toast: 110;
/* ---------- Backdrop ---------------------------------------------- */
--blur-sm: blur(8px);
--blur-md: blur(14px);
--blur-lg: blur(24px);
--grain-opacity: 0.05;
--scrollbar-thumb: var(--ink-700);
}
/* ==========================================================================
Light theme — lime system counterpart, not a cyan invert.
Paper field + ink type; signal lime stays the heat color (fill + dark label).
========================================================================== */
[data-theme="light"] {
--bg: #f3f4f0;
--bg-sunken: #e8ebe4;
--bg-raised: #fbfcf9;
--bg-panel: #ffffff;
--bg-panel-hover: #f4f6f1;
--bg-inset: #eef0ea;
--bg-scrim: rgba(243 244 240 / 0.88);
--border: rgba(10 12 17 / 0.1);
--border-strong: rgba(10 12 17 / 0.18);
--border-faint: rgba(10 12 17 / 0.06);
--text: var(--color-ink);
--text-muted: #4a5560;
--text-faint: #6b767e;
--text-inverse: var(--paper-000);
--primary: var(--color-signal);
--primary-strong: #d4ff78;
--primary-soft: rgba(201 247 91 / 0.28);
--primary-ring: rgba(201 247 91 / 0.55);
--primary-text: #3a6509;
--signal-text: var(--primary-text);
--on-primary: var(--color-ink);
/* Lime fill stays #c9f75b. Ring darkens to leaf. Iris stays teal, deepened for paper. */
--brand-ring: #6f9a12;
--brand-iris: #0a7f73;
--secondary: var(--color-mint);
--secondary-text: #0f6b5f;
--secondary-soft: rgba(111 231 210 / 0.16);
--accent: var(--color-amber);
--accent-soft: rgba(255 180 92 / 0.16);
--danger: var(--rose-500);
--link: #1a7a6e;
--focus: var(--color-signal);
--grad-text: linear-gradient(100deg, #3a6509 0%, #5c8f14 38%, #1a8f7f 100%);
--grad-signal: linear-gradient(100deg, var(--color-signal) 0%, var(--color-mint) 100%);
--grad-signal-soft: linear-gradient(120deg, rgba(201 247 91 / 0.22), rgba(111 231 210 / 0.12));
--grad-panel: linear-gradient(160deg, rgba(255 255 255 / 0.96), rgba(243 244 240 / 0.7));
--shadow-sm: 0 1px 2px rgba(10 12 17 / 0.06);
--shadow-md: 0 8px 24px -10px rgba(10 12 17 / 0.12);
--shadow-lg: 0 24px 48px -24px rgba(10 12 17 / 0.16);
--shadow-xl: 0 40px 80px -40px rgba(10 12 17 / 0.2);
--glow-primary: 0 0 28px -10px rgba(201 247 91 / 0.55);
--inner-hairline: inset 0 1px 0 rgba(255 255 255 / 0.9);
--grain-opacity: 0.028;
--scrollbar-thumb: #c5cbc3;
}
[data-surface="dark"] {
color-scheme: dark;
--bg: var(--color-ink);
--bg-sunken: var(--color-ink2);
--bg-raised: var(--color-panel);
--bg-panel: color-mix(in oklab, var(--color-panel) 88%, transparent);
--bg-panel-hover: var(--color-panel2);
--border: var(--color-hair);
--border-strong: var(--color-hair2);
--border-faint: var(--color-hair);
--text: var(--color-bone);
--text-muted: var(--color-mist);
--text-faint: color-mix(in oklab, var(--color-mist) 72%, var(--color-ink));
--primary: var(--color-signal);
--primary-text: var(--color-signal);
--on-primary: var(--color-ink);
--secondary: var(--color-mint);
--link: var(--color-mint);
}
/* === base.css === */
/* ==========================================================================
SYNAPSE — Base: reset, elements, typography defaults, accessibility
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--s-6));
color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }
body {
min-height: 100svh;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-body);
font-weight: var(--weight-regular);
letter-spacing: var(--tracking-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
font-feature-settings: "cv11", "ss01";
}
body.is-locked { overflow: hidden; }
img,
svg,
video,
canvas,
picture {
display: block;
max-width: 100%;
height: auto;
}
svg { fill: currentColor; }
/* ---------- Headings ------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-snug);
text-wrap: balance;
color: var(--text);
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 {
font-size: var(--fs-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
}
p { text-wrap: pretty; }
p, ul, ol, dl, figure, blockquote, pre, table { max-width: var(--measure); }
/* ---------- Links ---------------------------------------------------- */
a {
color: var(--link);
text-decoration: underline;
text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
text-underline-offset: 0.22em;
text-decoration-thickness: 1px;
transition: color var(--dur-2) var(--ease-out),
text-decoration-color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--text); text-decoration-color: currentColor; }
/* Component surfaces that are links must never inherit body underlines */
a.card,
a.btn,
a.brand,
a.chip,
a.nav__link,
a.mega__link,
a.link-arrow {
text-decoration: none;
text-decoration-line: none;
}
/* ---------- Lists --------------------------------------------------- */
ul, ol { padding-inline-start: 1.15em; }
li + li { margin-top: var(--s-2); }
li::marker { color: var(--primary); }
[data-theme="light"] li::marker { color: var(--primary-text); }
/* ---------- Forms --------------------------------------------------- */
input, textarea, select, button {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }
textarea { resize: vertical; }
::placeholder { color: var(--text-faint); opacity: 1; }
/* ---------- Code ---------------------------------------------------- */
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
font-feature-settings: "zero", "ss02";
}
:not(pre) > code {
padding: 0.15em 0.42em;
border: 1px solid var(--border);
border-radius: var(--r-xs);
background: var(--bg-inset);
color: var(--primary-text);
white-space: nowrap;
}
pre { overflow-x: auto; }
/* ---------- Tables -------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
th { text-align: start; font-weight: var(--weight-semibold); }
/* ---------- Quotes, rules, marks ----------------------------------- */
blockquote { margin: 0; }
hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}
mark {
background: var(--primary-soft);
color: var(--text);
padding: 0.05em 0.25em;
border-radius: var(--r-xs);
}
strong { font-weight: var(--weight-semibold); color: var(--text); }
small { font-size: var(--fs-xs); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
/* ---------- Selection & scrollbar ---------------------------------- */
::selection {
background: color-mix(in oklab, var(--primary) 32%, transparent);
color: var(--text);
}
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-sunken); }
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--r-pill);
border: 3px solid var(--bg-sunken);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
}
* { scrollbar-color: var(--scrollbar-thumb) var(--bg-sunken); scrollbar-width: thin; }
/* ---------- Focus --------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* ---------- Skip link ----------------------------------------------- */
.skip-link {
position: fixed;
inset-block-start: var(--s-3);
inset-inline-start: var(--s-3);
z-index: var(--z-toast);
padding: var(--s-3) var(--s-5);
background: var(--primary);
color: var(--on-primary);
font-weight: var(--weight-semibold);
font-size: var(--fs-sm);
border-radius: var(--r-sm);
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }
/* ---------- Screen-reader only ------------------------------------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* ---------- Print --------------------------------------------------- */
@media print {
:root { --bg: #fff; --text: #000; --text-muted: #333; }
.site-header, .site-footer, .cta-band, .cookie-bar, .to-top { display: none !important; }
a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}
/* === layout.css === */
/* ==========================================================================
SYNAPSE — Layout primitives: containers, bands, grids, stacks, splits
These are content-agnostic. Compose sections from them.
========================================================================== */
/* ---------- Containers ---------------------------------------------- */
.shell {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--container-wide); }
.shell--narrow { max-width: var(--container-narrow); }
.shell--prose { max-width: var(--container-prose); }
.shell--bleed { max-width: none; padding-inline: 0; }
/* ---------- Bands (vertical rhythm) --------------------------------- */
.band { padding-block: var(--band); position: relative; }
.band--sm { padding-block: var(--band-sm); }
.band--lg { padding-block: var(--band-lg); }
.band--flush-top { padding-block-start: 0; }
.band--flush-bottom { padding-block-end: 0; }
.band--sunken { background: var(--bg-sunken); }
.band--raised { background: var(--bg-raised); }
.band--panel { background: var(--bg-panel); }
.band--hairline { border-block-start: 1px solid var(--border-faint); }
.band--tint {
background:
radial-gradient(90% 120% at 12% 0%, rgba(201 247 91 / 0.06), transparent 60%),
radial-gradient(70% 110% at 92% 20%, rgba(111 231 210 / 0.06), transparent 62%),
var(--bg);
}
.band--inverse {
background: var(--ink-1000);
--bg: var(--ink-1000);
--text: var(--color-bone);
--text-muted: var(--color-mist);
--text-faint: color-mix(in oklab, var(--color-mist) 72%, var(--color-ink));
--border: var(--color-hair);
color: var(--text);
}
/* ---------- Stack (owl selector, token-driven gap) ------------------ */
.stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); }
.stack--xs { --stack-gap: var(--s-2); }
.stack--sm { --stack-gap: var(--s-3); }
.stack--md { --stack-gap: var(--s-6); }
.stack--lg { --stack-gap: var(--s-10); }
.stack--xl { --stack-gap: var(--s-16); }
/* ---------- Cluster (inline wrap) ----------------------------------- */
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--s-3));
}
.cluster--sm { --cluster-gap: var(--s-2); }
.cluster--lg { --cluster-gap: var(--s-6); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.cluster--end { justify-content: flex-end; }
.cluster--top { align-items: flex-start; }
/* ---------- Grid ---------------------------------------------------- */
.grid {
display: grid;
gap: var(--grid-gap, var(--s-6));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--tight { --grid-gap: var(--s-3); }
.grid--loose { --grid-gap: var(--s-10); }
/* Auto-fit grid: set --min for the smallest acceptable track */
.grid--auto {
grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}
@media (max-width: 1080px) {
.grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.grid--3, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Split (asymmetric two-column) --------------------------- */
.split {
display: grid;
gap: var(--split-gap, clamp(2rem, 5vw, 5rem));
align-items: var(--split-align, center);
grid-template-columns: var(--split-cols, 1fr 1fr);
}
.split--6-5 { --split-cols: 6fr 5fr; }
.split--5-6 { --split-cols: 5fr 6fr; }
.split--5-7 { --split-cols: 5fr 7fr; }
.split--7-5 { --split-cols: 7fr 5fr; }
.split--4-8 { --split-cols: 4fr 8fr; }
.split--8-4 { --split-cols: 8fr 4fr; }
.split--top { --split-align: start; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr); }
.split--reverse > :first-child { order: 0; }
}
/* ---------- Sidebar layout (docs, article TOC) ---------------------- */
.with-sidebar {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
grid-template-columns: minmax(0, 1fr) var(--sidebar-w, 250px);
align-items: start;
}
.with-sidebar--left { grid-template-columns: var(--sidebar-w, 250px) minmax(0, 1fr); }
.sticky-rail {
position: sticky;
top: calc(var(--header-h) + var(--s-6));
max-height: calc(100svh - var(--header-h) - var(--s-12));
overflow-y: auto;
overscroll-behavior: contain;
}
@media (max-width: 980px) {
.with-sidebar,
.with-sidebar--left { grid-template-columns: minmax(0, 1fr); }
.with-sidebar--left > :first-child { order: 2; }
.sticky-rail { position: static; max-height: none; }
}
/* ---------- Bento (editorial mosaic) -------------------------------- */
.bento {
display: grid;
gap: var(--s-4);
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: minmax(150px, auto);
}
.bento > .b-2 { grid-column: span 2; }
.bento > .b-3 { grid-column: span 3; }
.bento > .b-4 { grid-column: span 4; }
.bento > .b-6 { grid-column: span 6; }
.bento > .b-tall { grid-row: span 2; }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento > .b-2, .bento > .b-3, .bento > .b-4, .bento > .b-6 { grid-column: span 2; }
.bento > .b-tall { grid-row: auto; }
}
/* ---------- Masonry-ish column flow --------------------------------- */
.columns {
columns: var(--cols, 3) 260px;
column-gap: var(--s-6);
}
.columns > * { break-inside: avoid; margin-block-end: var(--s-6); }
/* ---------- Frame ratios -------------------------------------------- */
.ratio { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--square { aspect-ratio: 1; }
.ratio--4-3 { aspect-ratio: 4 / 3; }
.ratio--3-2 { aspect-ratio: 3 / 2; }
.ratio--16-9 { aspect-ratio: 16 / 9; }
.ratio--21-9 { aspect-ratio: 21 / 9; }
.ratio--portrait { aspect-ratio: 4 / 5; }
/* ---------- Section head -------------------------------------------- */
.section-head {
display: grid;
gap: var(--s-4);
max-width: 62ch;
margin-block-end: clamp(2rem, 4vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--wide { max-width: 78ch; }
.section-head--split {
max-width: none;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
align-items: end;
gap: clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 820px) {
.section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
.section-head p { color: var(--text-muted); font-size: var(--fs-md); }
.section-head--compact { margin-block-end: var(--s-6); gap: var(--s-2); }
.page-platform .section-head:not(.section-head--compact) { margin-block-end: clamp(1.25rem, 3vw, 2rem); }
/* ---------- Scroll snap rail ---------------------------------------- */
.rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--rail-item, minmax(280px, 32%));
gap: var(--s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block-end: var(--s-4);
scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (max-width: 700px) { .rail { --rail-item: minmax(78%, 78%); } }
/* ---------- Sticky scroll scene ------------------------------------- */
.scene { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr 1fr; }
.scene__pin { position: sticky; top: calc(var(--header-h) + var(--s-10)); align-self: start; }
.scene__steps { display: grid; gap: var(--band-sm); }
@media (max-width: 900px) {
.scene { grid-template-columns: minmax(0, 1fr); }
.scene__pin { position: static; }
}
/* === components.css === */
/* ==========================================================================
SYNAPSE — Components
1 Buttons 8 Tabs 15 Forms
2 Badges & pills 9 Accordion 16 Steps & timeline
3 Eyebrow/kicker 10 Tables 17 Metrics & counters
4 Cards 11 Code blocks 18 Testimonials & quotes
5 Header & nav 12 Filter toolbar 19 Pricing
6 Footer 13 Modal & lightbox 20 Article & prose
7 Hero furniture 14 Toast & bars 21 Misc (pagination, avatars…)
========================================================================== */
/* ==========================================================================
1 — Buttons
========================================================================== */
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-border: var(--border-strong);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 0.72em 1.35em;
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
line-height: 1.15;
text-decoration: none;
white-space: nowrap;
border: 1px solid var(--btn-border);
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
isolation: isolate;
overflow: hidden;
transition: transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-3) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn[aria-disabled="true"],
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn__icon { flex: none; width: 1.05em; height: 1.05em; }
.btn:hover .btn__icon--shift { transform: translateX(3px); }
.btn__icon--shift { transition: transform var(--dur-2) var(--ease-out); }
/* Primary — solid signal lime pill */
.btn--primary {
--btn-fg: var(--on-primary);
--btn-border: transparent;
background: var(--primary);
box-shadow: none;
}
.btn--primary:hover {
background: var(--secondary);
box-shadow: var(--glow-primary);
color: var(--on-primary);
}
.btn--primary::after { display: none; }
.btn--secondary {
--btn-fg: var(--text);
--btn-border: var(--border-strong);
background: transparent;
}
.btn--secondary:hover {
--btn-border: var(--primary);
--btn-fg: var(--primary-text);
background: transparent;
}
.btn--ghost { --btn-border: transparent; padding-inline: 0.6em; }
.btn--ghost:hover { --btn-fg: var(--primary-text); }
.btn--outline-primary {
--btn-fg: var(--primary-text);
--btn-border: var(--primary-ring);
background: var(--primary-soft);
}
.btn--outline-primary:hover { box-shadow: var(--glow-primary); }
.btn--solid {
--btn-fg: var(--bg);
--btn-border: transparent;
background: var(--text);
}
.btn--sm { padding: 0.55em 1.05em; font-size: var(--fs-xs); }
.btn--lg { padding: 0.9em 1.75em; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn--square { padding: 0.6em; aspect-ratio: 1; }
/* Text link with animated underline */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--weight-semibold);
color: var(--primary-text);
text-decoration: none;
}
.link-arrow::after {
content: "→";
transition: transform var(--dur-2) var(--ease-out);
}
.link-arrow:hover { color: var(--text); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-underline {
position: relative;
text-decoration: none;
color: var(--text);
}
.link-underline::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-3) var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }
/* ==========================================================================
2 — Badges, pills, chips
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.32em 0.75em;
font-family: var(--font-mono);
font-size: var(--fs-micro);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--bg-panel);
color: var(--text-muted);
white-space: nowrap;
}
.badge--primary { border-color: var(--primary-ring); background: var(--primary-soft); color: var(--primary-text); }
.badge--secondary { border-color: color-mix(in oklab, var(--secondary) 40%, transparent); background: var(--secondary-soft); color: var(--secondary-text); }
.badge--accent { border-color: color-mix(in oklab, var(--accent) 40%, transparent); background: var(--accent-soft); color: var(--accent); }
.badge--live { border-color: var(--primary-ring); background: var(--primary-soft); color: var(--primary-text); }
.badge--live .dot { animation: pulse-dot 1.6s var(--ease-in-out) infinite; }
.dot {
width: 6px;
height: 6px;
border-radius: var(--r-pill);
background: currentColor;
flex: none;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.42em 0.9em;
font-size: var(--fs-xs);
font-weight: var(--weight-medium);
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all var(--dur-2) var(--ease-out);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"],
.chip.is-active {
border-color: var(--primary-ring);
background: var(--primary-soft);
color: var(--primary-text);
}
.chip__count { font-family: var(--font-mono); font-size: var(--fs-micro); opacity: 0.7; }
/* ==========================================================================
3 — Eyebrow / kicker / section index
========================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-muted);
}
.eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--r-pill);
background: var(--primary);
opacity: 1;
animation: live-pulse 2.4s ease-out infinite;
flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--text-faint); }
.section-index {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
}
.lead {
font-size: var(--fs-md);
line-height: var(--lh-loose);
color: var(--text-muted);
max-width: var(--measure);
}
.lead--lg { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-muted); }
/* ==========================================================================
4 — Cards
========================================================================== */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-4);
padding: var(--card-pad, clamp(1.25rem, 2.4vw, 1.85rem));
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-panel);
box-shadow: var(--inner-hairline);
overflow: hidden;
transition: border-color var(--dur-3) var(--ease-out),
transform var(--dur-3) var(--ease-out),
box-shadow var(--dur-3) var(--ease-out),
background-color var(--dur-3) var(--ease-out);
}
.card--glass { background: var(--grad-panel); backdrop-filter: var(--blur-md); }
.card--flat { background: transparent; }
.card--sunken { background: var(--bg-inset); }
.card--pad-lg { --card-pad: clamp(1.75rem, 3.4vw, 2.75rem); }
.card--pad-sm { --card-pad: var(--s-4); }
.card--center { text-align: center; align-items: center; }
.card--hover:hover {
transform: translateY(-4px);
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
background: var(--bg-panel-hover);
box-shadow: var(--shadow-lg), var(--inner-hairline);
}
/* Whole-card link target — beat base `a` / UA underlines on all states */
a.card,
a.card:link,
a.card:visited,
a.card:hover,
a.card:active,
a.card:focus,
.card--link,
.card--link:link,
.card--link:visited,
.card--link:hover,
.card--link:active,
.card--link:focus {
cursor: pointer;
text-decoration: none;
text-decoration-line: none;
color: inherit;
}
a.card .link-arrow,
a.card--link .link-arrow {
text-decoration: none;
text-decoration-line: none;
}
.card__hit {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.card__hit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.card__media {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--r-md);
margin-block-end: var(--space-4, 1rem);
border: 1px solid var(--border-faint);
background: var(--surface-2, var(--bg-inset));
}
/* Gradient top edge that reveals on hover */
.card--edge::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 2px;
background: var(--grad-signal);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-4) var(--ease-out);
}
.card--edge:hover::before { transform: scaleX(1); }
.card__title { font-size: var(--fs-lg); }
.card__title--sm { font-size: var(--fs-md); }
.card__body { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); margin: 0; }
.card__foot { margin-block-start: auto; padding-block-start: var(--s-2); }
.card__meta {
display: flex;
gap: var(--s-3);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-faint);
}
/* Icon tile */
.icon-tile {
display: grid;
place-items: center;
width: 46px;
height: 46px;
flex: none;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-inset);
color: var(--primary);
transition: color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--lg { width: 58px; height: 58px; border-radius: var(--r-lg); }
.icon-tile--lg svg { width: 28px; height: 28px; }
.icon-tile--violet { color: var(--secondary); }
.icon-tile--amber { color: var(--accent); }
.icon-tile--fill { background: var(--grad-signal); color: var(--on-primary); border-color: transparent; }
.card--hover:hover .icon-tile { border-color: var(--primary-ring); }
/* Numbered card */
.card__num {
font-family: var(--font-mono);
font-size: var(--fs-2xl);
font-weight: var(--weight-medium);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px var(--border-strong);
}
.card--hover:hover .card__num { -webkit-text-stroke-color: var(--primary); }
/* Media card */
.card--media { padding: 0; gap: 0; }
.card--media .card__media { position: relative; overflow: hidden; }
.card--media .card__media img,
.card--media .card__media svg { transition: transform var(--dur-6) var(--ease-out); width: 100%; }
.card--media:hover .card__media img,
.card--media:hover .card__media svg { transform: scale(1.05); }
.card--media .card__inner { display: grid; gap: var(--s-3); padding: clamp(1.1rem, 2.2vw, 1.6rem); }
/* Feature list inside cards */
.tick-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.tick-list li {
position: relative;
padding-inline-start: calc(18px + var(--s-3));
margin: 0;
font-size: var(--fs-sm);
color: var(--text-muted);
line-height: var(--lh-body);
}
.tick-list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0.16em;
width: 18px;
height: 18px;
border-radius: var(--r-pill);
background: var(--primary-soft);
border: 1px solid var(--primary-ring);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FE3D0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
}
.tick-list--cross li::before {
border-color: color-mix(in oklab, var(--danger) 40%, transparent);
background-color: color-mix(in oklab, var(--danger) 12%, transparent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B8A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* Definition rows (spec pairs) */
.spec-rows { display: grid; gap: 0; border-block-start: 1px solid var(--border-faint); }
.spec-rows > div {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: var(--s-4);
padding-block: var(--s-3);
border-block-end: 1px solid var(--border-faint);
font-size: var(--fs-sm);
}
.spec-rows dt { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.spec-rows dd { margin: 0; color: var(--text); }
/* ==========================================================================
5 — Header & navigation
========================================================================== */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: var(--z-header);
overflow: visible;
border-block-end: 1px solid transparent;
}
.header-progress {
position: absolute;
inset-inline: 0;
inset-block-start: 0;
height: 2px;
transform-origin: left;
transform: scaleX(0);
background: var(--grad-signal);
z-index: 2;
pointer-events: none;
}
.header-glass {
overflow: visible;
border-block-end: 1px solid var(--border);
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: var(--blur-lg) saturate(160%);
}
[data-theme="light"] .header-glass {
background: color-mix(in oklab, var(--bg-raised) 78%, transparent);
}
.site-header.is-stuck .header-glass {
background: color-mix(in oklab, var(--bg) 88%, transparent);
}
[data-theme="light"] .site-header.is-stuck .header-glass {
background: color-mix(in oklab, var(--bg-raised) 88%, transparent);
}
.site-header.is-hidden { transform: none; }
.site-header { transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: calc(var(--s-3) / 2);
font-size: 1.125rem;
text-decoration: none;
color: var(--text);
flex: none;
}
.brand__logo {
height: 30px;
width: auto;
max-width: 160px;
display: block;
flex: none;
object-fit: contain;
}
.brand__logo--footer {
height: 32px;
max-width: 180px;
}
[data-theme="light"] .brand__logo {
filter: brightness(0.48);
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark-box {
display: flex;
align-items: center;
justify-content: center;
flex: none;
line-height: 0;
/* Nudge eye to VI x-height (ignore i-dot) */
transform: translateY(0.04em);
}
.brand__mark-box svg {
display: block;
fill: none;
width: 1.125rem;
height: 1.125rem;
}
.site-header .brand__mark-box svg,
.drawer__head .brand__mark-box svg {
width: 2.25rem;
height: 2.25rem;
}
.site-header .brand__mark-box,
.drawer__head .brand__mark-box {
transform: translateY(0.065em);
}
.brand__mark-box .brand-iris {
fill: var(--brand-iris);
stroke: none;
}
.brand__word {
font-family: var(--font-display);
font-size: 1em;
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-tight);
color: var(--text);
line-height: 1;
}
.brand__word span { color: var(--primary); }
[data-theme="light"] .brand__word span { color: var(--primary-text); }
.brand__mark-box svg circle:not(.brand-iris),
.brand__mark-box svg path[stroke] {
stroke: var(--brand-ring);
}
.site-header .brand,
.drawer__head .brand {
font-size: 2.25rem;
}
.site-header .brand__word,
.drawer__head .brand__word {
letter-spacing: -0.04em;
}
.brand__sub {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
padding-inline-start: var(--s-3);
border-inline-start: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 1.75rem; overflow: visible; }
.nav__item { position: relative; }
/* Hover bridge: the mega is absolutely positioned, so this fills the
visual gap between the trigger and the panel. Without it, mouseleave
fires on the way down and the menu closes before a click. */
.nav__item::after {
content: "";
position: absolute;
inset-inline: -1.25rem;
inset-block-start: 100%;
height: 0.75rem;
}
.nav__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: var(--s-2) 0;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--weight-regular);
color: var(--text-muted);
text-decoration: none;
border-radius: 0;
background: transparent;
transition: color var(--dur-2) var(--ease-out);
}
.nav__link:hover,
.nav__item.is-open > .nav__link { color: var(--text); background: transparent; }
.nav__link[aria-current="page"] { color: var(--primary-text); }
.nav__caret { width: 12px; height: 12px; opacity: 0.6; transition: transform var(--dur-2) var(--ease-out); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
/* Mega panel — flush to the item; transparent padding-top is the visual
gap AND the hit area. Critical CSS sets pointer-events:none; restore it
whenever the panel is shown. */
.mega {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 100%;
translate: -50% 0;
z-index: 2;
isolation: isolate;
width: min(var(--mega-w, 540px), calc(100vw - 2 * var(--gutter)));
padding: 0.5rem var(--s-2) var(--s-2);
border: 0;
border-radius: var(--r-2xl);
background: transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px) scale(0.985);
transform-origin: top center;
transition: opacity var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out),
visibility var(--dur-2);
}
.mega::before {
content: "";
position: absolute;
inset: 0.5rem 0 0;
z-index: -1;
border: 1px solid var(--border);
border-radius: var(--r-2xl);
background: color-mix(in oklab, var(--bg-raised) 94%, transparent);
backdrop-filter: var(--blur-lg) saturate(160%);
box-shadow: var(--shadow-xl);
pointer-events: none;
}
.nav__item.is-open > .mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
.nav__item:hover > .mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
}
.mega--wide { --mega-w: 540px; }
.mega--list { --mega-w: 420px; }
.mega--solutions {
--mega-w: 920px;
inset-inline-start: 0;
translate: 0 0;
}
.mega--solutions .mega__cols {
display: grid;
gap: var(--s-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: var(--s-3) var(--s-2) var(--s-2);
}
.mega--solutions .mega__footer {
border-block-start: 1px solid var(--border-faint);
padding: var(--s-2);
margin-inline: var(--s-2);
}
@media (max-width: 1100px) {
.mega--solutions { --mega-w: min(720px, calc(100vw - 2 * var(--gutter))); }
.mega--solutions .mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mega__grid { display: grid; gap: 2px; grid-template-columns: repeat(var(--mega-cols, 2), minmax(0, 1fr)); }
.mega__col { display: grid; gap: 2px; align-content: start; }
.mega__label {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
padding: 0.5rem 0.875rem 0.25rem;
margin: 0;
}
.drawer__cat {
list-style: none;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
padding: 0.75rem 0 0.25rem;
pointer-events: none;
}
.mega__link {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: var(--s-3);
padding: var(--s-2);
margin-inline: calc(var(--s-2) * -1);
border-radius: var(--r-md);
text-decoration: none;
color: var(--text);
transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.mega__link:hover { background: var(--bg-panel); }
.mega__link .icon-tile { width: 34px; height: 34px; border-radius: var(--r-sm); }
.mega__link .icon-tile svg { width: 17px; height: 17px; }
.mega__link strong { display: block; font-size: var(--fs-sm); font-weight: var(--weight-medium); color: var(--text); }
.mega__link:hover strong { color: var(--primary-text); }
.mega__link span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.mega__link--plain {
grid-template-columns: minmax(0, 1fr);
padding: 0.75rem 0.875rem;
margin: 0;
border-radius: 12px;
}
.mega__feature {
display: grid;
gap: var(--s-3);
align-content: start;
padding: var(--s-5);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--grad-signal-soft);
}
/* Mobile drawer */
.nav-toggle { display: none; }
.drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
display: grid;
grid-template-rows: auto 1fr;
background: var(--bg);
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition: transform var(--dur-4) var(--ease-out-expo), visibility var(--dur-4);
overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-block-end: 1px solid var(--border-faint); }
.drawer__body { padding-block: var(--s-6) var(--s-16); display: grid; gap: var(--s-2); align-content: start; }
.drawer__group > summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-4) 0;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--weight-semibold);
cursor: pointer;
list-style: none;
border-block-end: 1px solid var(--border-faint);
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group[open] > summary { color: var(--primary-text); }
.drawer__group ul { list-style: none; padding: var(--s-4) 0 var(--s-5); display: grid; gap: var(--s-4); }
.drawer__group li { margin: 0; }
.drawer__group a { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
.drawer__group a:hover { color: var(--text); }
@media (max-width: 1080px) {
.nav,
.header-actions .btn--primary,
.header-actions .btn--secondary:not(.nav-toggle):not(.theme-toggle) { display: none; }
.header-actions .nav-toggle,
.header-actions .theme-toggle { display: inline-flex; }
}
/* Theme switch */
.theme-toggle { position: relative; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle {
--btn-border: var(--border-strong);
--btn-fg: var(--text);
}
/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-faint); }
.crumbs ol { display: contents; list-style: none; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--primary-text); }
.crumbs [aria-current] { color: var(--text-muted); }
/* ==========================================================================
6 — Footer
========================================================================== */
.site-footer {
position: relative;
border-block-start: 1px solid var(--border-faint);
background: var(--bg-sunken);
padding-block: var(--band-sm) var(--s-8);
overflow: hidden;
}
.footer-grid {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
}
.footer-grid--arena { align-items: start; }
.footer-cols {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1080px) {
.footer-grid,
.footer-grid--arena { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-col h3 {
font-family: var(--font-mono);
font-size: var(--fs-micro);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
margin-block-end: var(--s-4);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer-col li { margin: 0; }
.footer-col a { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--primary-text); }
.footer-brand { display: grid; gap: var(--s-4); max-width: 34ch; }
.footer-bar {
margin-block-start: var(--band-sm);
padding-block-start: var(--s-6);
border-block-start: 1px solid var(--border-faint);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
font-size: var(--fs-xs);
color: var(--text-faint);
}
.footer-bar a { color: var(--text-faint); text-decoration: none; }
.footer-bar a:hover { color: var(--text); }
.footer-word {
font-family: var(--font-display);
font-size: clamp(4rem, 18vw, 15rem);
font-weight: var(--weight-bold);
letter-spacing: -0.05em;
line-height: 0.8;
color: color-mix(in oklab, var(--text) 4.5%, transparent);
-webkit-text-stroke: 0;
user-select: none;
margin-block-start: var(--s-8);
text-align: center;
pointer-events: none;
}
.social { display: flex; gap: var(--s-2); }
.social a {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--text-muted);
transition: all var(--dur-2) var(--ease-out);
}
.social a:hover { border-color: var(--primary-ring); color: var(--primary-text); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; }
/* ==========================================================================
7 — Hero furniture
========================================================================== */
.hero {
position: relative;
padding-block: clamp(3.5rem, 9vw, 8rem) var(--band);
overflow: hidden;
isolation: isolate;
}
.hero--tall { padding-block: clamp(5rem, 10vw, 10rem) var(--band-lg); min-height: min(88svh, 860px); display: grid; align-items: center; }
.hero--compact { padding-block: clamp(4rem, 8vw, 6.5rem) var(--band-sm); }
.hero__title { font-size: var(--fs-4xl); letter-spacing: var(--tracking-tight); }
.hero__title--mega { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.1rem); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.hero__sub { font-size: var(--fs-md); color: var(--text-muted); max-width: 48ch; line-height: var(--lh-loose); }
.h-stress,
.text-signal-gradient {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
background: var(--grad-text);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.page-hero {
position: relative;
isolation: isolate;
overflow: hidden;
border-block-end: 1px solid var(--border);
}
.page-hero .fx-grid,
.page-hero::before {
pointer-events: none;
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(90deg, var(--border-faint) 1px, transparent 1px),
linear-gradient(var(--border-faint) 1px, transparent 1px);
background-size: 76px 76px;
mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
-webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
}
.page-hero .hero__title { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); line-height: 1.05; max-width: 16ch; }
.page-hero .shell { position: relative; z-index: 1; }
.page-hero .fx-tilt img {
display: block;
width: 100%;
height: auto;
}
.page-hero .proof-rail dd {
line-height: 1.35;
font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.35rem);
}
.page-head {
position: relative;
padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
border-block-end: 1px solid var(--border-faint);
overflow: hidden;
}
/* Proof rail under hero */
.proof-rail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--border-faint);
overflow: hidden;
}
.proof-rail > div {
padding: var(--s-5);
background: color-mix(in oklab, var(--bg-raised) 90%, transparent);
backdrop-filter: var(--blur-sm);
display: grid;
gap: var(--s-1);
}
.proof-rail dt { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); }
.proof-rail dd {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
}
/* ==========================================================================
8 — Tabs
========================================================================== */
.tabs { display: grid; gap: var(--s-8); }
.tablist {
display: flex;
flex-wrap: wrap;
gap: var(--s-1);
padding: var(--s-1);
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--bg-inset);
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
.tablist--stretch { width: 100%; }
.tab {
padding: 0.6em 1.15em;
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--weight-medium);
color: var(--text-muted);
border-radius: var(--r-pill);
white-space: nowrap;
transition: all var(--dur-2) var(--ease-out);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
background: var(--bg-panel-hover);
color: var(--text);
box-shadow: var(--inner-hairline);
}
.tab[aria-selected="true"]::before { content: ""; }
.tabpanel[hidden] { display: none; }
/* Vertical tabs (feature showcase) */
.tabs--vertical { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.tabs--vertical .tablist {
flex-direction: column;
width: 100%;
border: 0;
background: none;
padding: 0;
gap: var(--s-2);
}
.tabs--vertical .tab {
text-align: start;
padding: var(--s-4) var(--s-5);
border-radius: var(--r-md);
border-inline-start: 2px solid var(--border);
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.tabs--vertical .tab[aria-selected="true"] { border-inline-start-color: var(--primary); background: var(--bg-panel); }
.tabs--vertical .tab small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-faint); margin-block-start: 0.2em; }
@media (max-width: 900px) { .tabs--vertical { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================================
9 — Accordion / FAQ
========================================================================== */
.accordion { display: grid; gap: var(--s-3); }
.acc {
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-panel);
overflow: hidden;
transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.acc[open] { border-color: var(--border-strong); background: var(--bg-panel-hover); }
.acc > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-5);
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: var(--weight-medium);
cursor: pointer;
list-style: none;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
content: "";
flex: none;
width: 20px;
height: 20px;
border-radius: var(--r-pill);
border: 1px solid var(--border-strong);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA9C0' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
background-size: 11px;
background-position: center;
background-repeat: no-repeat;
transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.acc[open] > summary::after { transform: rotate(135deg); border-color: var(--primary); }
.acc__body { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.acc__body > * { max-width: 74ch; }
/* ==========================================================================
10 — Tables
========================================================================== */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-panel);
}
.table { font-size: var(--fs-sm); min-width: 620px; max-width: none; }
.table th,
.table td { padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--border-faint); vertical-align: top; }
.table thead th {
position: sticky;
inset-block-start: 0;
background: var(--bg-raised);
font-family: var(--font-mono);
font-size: var(--fs-micro);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-faint);
white-space: nowrap;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr { transition: background-color var(--dur-2) var(--ease-out); }
.table tbody tr:hover { background: var(--bg-panel-hover); }
.table td:first-child { color: var(--text); font-weight: var(--weight-medium); }
.table--compare td:not(:first-child) { text-align: center; }
.table--compare th:not(:first-child) { text-align: center; }
.table .yes { color: var(--success); }
.table .no { color: var(--text-faint); }
.table caption {
caption-side: bottom;
padding: var(--s-4) var(--s-5);
font-size: var(--fs-xs);
color: var(--text-faint);
text-align: start;
}
.col-featured { background: var(--primary-soft); }
/* ==========================================================================
11 — Code blocks
========================================================================== */
.code {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--ink-1000);
overflow: hidden;
max-width: none;
}
[data-theme="light"] .code { background: var(--ink-950); }
.code__bar {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
border-block-end: 1px solid rgba(255 255 255 / 0.08);
background: rgba(255 255 255 / 0.02);
}
.code__dots { display: flex; gap: 6px; margin-inline-end: var(--s-3); }
.code__dots i { width: 9px; height: 9px; border-radius: var(--r-pill); background: rgba(255 255 255 / 0.16); }
.code__name { font-family: var(--font-mono); font-size: var(--fs-micro); color: #7C8CA6; margin-inline-end: auto; }
.code__copy {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: #7C8CA6;
padding: 0.3em 0.6em;
border: 1px solid rgba(255 255 255 / 0.1);
border-radius: var(--r-xs);
transition: all var(--dur-2) var(--ease-out);
}
.code__copy:hover { color: var(--cyan-300); border-color: var(--primary-ring); }
.code pre { padding: var(--s-5); margin: 0; font-size: var(--fs-xs); line-height: 1.72; color: #C9D6E8; }
.code .t-key { color: var(--violet-300); }
.code .t-str { color: var(--cyan-300); }
.code .t-num { color: var(--amber-300); }
.code .t-com { color: #5A6B85; font-style: italic; }
.code .t-fn { color: #8FC7FF; }
.code .t-punc { color: #7C8CA6; }
/* Terminal variant */
.code--term pre { color: #A8B8CE; }
.code--term .t-prompt { color: var(--cyan-400); }
.code--term .t-ok { color: var(--success); }
/* ==========================================================================
12 — Filter toolbar & search
========================================================================== */
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
padding: var(--s-4);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-panel);
position: sticky;
top: calc(var(--header-h) + var(--s-3));
z-index: var(--z-sticky);
backdrop-filter: var(--blur-md);
}
.toolbar__group { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.toolbar__count { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 220px;
max-width: 320px;
}
.search svg { position: absolute; inset-inline-start: var(--s-3); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.search input {
width: 100%;
padding: 0.6em 0.9em 0.6em 2.35em;
font-size: var(--fs-sm);
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--bg-inset);
color: var(--text);
}
.search input:focus-visible { border-color: var(--primary-ring); }
.empty-state {
display: grid;
place-items: center;
gap: var(--s-3);
padding: var(--band-sm);
text-align: center;
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
color: var(--text-muted);
}
/* ==========================================================================
13 — Modal & lightbox
========================================================================== */
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--gutter);
background: rgba(3 5 10 / 0.82);
backdrop-filter: var(--blur-md);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
position: relative;
width: min(100%, var(--modal-w, 560px));
max-height: calc(100svh - 2 * var(--gutter));
overflow-y: auto;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--border-strong);
border-radius: var(--r-xl);
background: var(--bg-raised);
box-shadow: var(--shadow-xl);
transform: translateY(16px) scale(0.98);
transition: transform var(--dur-4) var(--ease-out-expo);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal--wide { --modal-w: 960px; }
.modal--media .modal__panel { padding: var(--s-3); }
.modal__close {
position: absolute;
inset-block-start: var(--s-4);
inset-inline-end: var(--s-4);
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--text-muted);
background: var(--bg-panel);
z-index: 3;
}
.modal__close:hover { color: var(--text); border-color: var(--border-strong); }
.modal__close svg { width: 15px; height: 15px; }
/* ==========================================================================
14 — Toast, cookie bar, progress, to-top
========================================================================== */
.toast-stack {
position: fixed;
inset-block-end: var(--s-6);
inset-inline-end: var(--s-6);
z-index: var(--z-toast);
display: grid;
gap: var(--s-3);
width: min(340px, calc(100vw - 2 * var(--gutter)));
pointer-events: none;
}
.toast {
display: flex;
gap: var(--s-3);
align-items: flex-start;
padding: var(--s-4);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--bg-raised);
box-shadow: var(--shadow-lg);
font-size: var(--fs-sm);
pointer-events: auto;
animation: toast-in var(--dur-4) var(--ease-out-expo);
}
.toast--ok { border-inline-start: 2px solid var(--success); }
.toast--err { border-inline-start: 2px solid var(--danger); }
.toast.is-out { animation: toast-out var(--dur-3) var(--ease-out) forwards; }
.cookie-bar {
position: fixed;
inset-block-end: var(--s-4);
inset-inline: var(--gutter);
z-index: var(--z-toast);
margin-inline: auto;
max-width: 720px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--bg-raised) 94%, transparent);
backdrop-filter: var(--blur-lg);
box-shadow: var(--shadow-xl);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 260px; margin: 0; }
.read-progress {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
height: 2px;
z-index: calc(var(--z-header) + 1);
background: var(--grad-signal);
transform-origin: left;
transform: scaleX(0);
}
.to-top {
position: fixed;
inset-block-end: var(--s-6);
inset-inline-start: var(--s-6);
z-index: var(--z-sticky);
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--bg-scrim);
backdrop-filter: var(--blur-md);
color: var(--text-muted);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--primary-text); transform: translateY(-3px); }
.to-top svg { width: 16px; height: 16px; }
/* Sub-navigation (in-page anchors) */
.subnav {
position: sticky;
top: var(--header-h);
z-index: var(--z-sticky);
border-block-end: 1px solid var(--border-faint);
background: var(--bg-scrim);
backdrop-filter: var(--blur-lg);
}
.subnav ul {
display: flex;
gap: var(--s-1);
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
scrollbar-width: none;
max-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { margin: 0; }
.subnav a {
display: block;
padding: var(--s-4) var(--s-4);
font-size: var(--fs-sm);
color: var(--text-muted);
text-decoration: none;
white-space: nowrap;
border-block-end: 2px solid transparent;
}
.subnav a:hover { color: var(--text); }
.subnav a.is-active { color: var(--primary-text); border-block-end-color: var(--primary); }
/* ==========================================================================
15 — Forms
========================================================================== */
.field { display: grid; gap: var(--s-2); }
.field > label,
.legend {
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: var(--weight-medium);
color: var(--text);
}
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }
.req { color: var(--primary); }
.input,
.select,
.textarea {
width: 100%;
padding: 0.78em 1em;
font-size: var(--fs-sm);
color: var(--text);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
outline: none;
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.select {
appearance: none;
padding-inline-end: 2.4em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA9C0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9em center;
background-size: 15px;
}
.textarea { min-height: 7.5em; line-height: var(--lh-body); }
/* Choice cards (radio/checkbox as tiles) */
.choices { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice__box {
display: grid;
gap: var(--s-1);
height: 100%;
padding: var(--s-4);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-panel);
font-size: var(--fs-sm);
transition: all var(--dur-2) var(--ease-out);
}
.choice__box strong { font-weight: var(--weight-semibold); }
.choice__box span { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
.choice:hover .choice__box { border-color: var(--border-strong); }
.choice input:checked + .choice__box {
border-color: var(--primary);
background: var(--primary-soft);
box-shadow: 0 0 0 1px var(--primary-ring);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--fs-sm); }
.switch input { position: absolute; opacity: 0; }
.switch__track {
width: 44px;
height: 24px;
padding: 3px;
border-radius: var(--r-pill);
background: var(--bg-inset);
border: 1px solid var(--border-strong);
transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.switch__track::after {
content: "";
display: block;
width: 16px;
height: 16px;
border-radius: var(--r-pill);
background: var(--text-muted);
transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--primary-soft); border-color: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--primary); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Range */
.range { width: 100%; appearance: none; background: transparent; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: var(--bg-inset); border: 1px solid var(--border); }
.range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
margin-block-start: -8px;
border-radius: var(--r-pill);
background: var(--primary);
box-shadow: var(--glow-primary);
cursor: grab;
}
.range::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--bg-inset); }
.range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: var(--r-pill); background: var(--primary); }
/* Multi-step */
.steps-bar { display: flex; gap: var(--s-2); }
.steps-bar li {
flex: 1;
margin: 0;
list-style: none;
padding-block-start: var(--s-3);
border-block-start: 2px solid var(--border);
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-faint);
transition: color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.steps-bar li.is-done { border-block-start-color: var(--primary-ring); color: var(--text-muted); }
.steps-bar li.is-current { border-block-start-color: var(--primary); color: var(--primary-text); }
.fieldset { display: grid; gap: var(--s-5); border: 0; padding: 0; margin: 0; }
.fieldset[hidden] { display: none; }
/* ==========================================================================
16 — Steps, process, timeline
========================================================================== */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.steps--flow { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.step {
counter-increment: step;
position: relative;
display: grid;
gap: var(--s-3);
padding-block-start: var(--s-8);
border-block-start: 1px solid var(--border);
}
.step::before {
content: counter(step, decimal-leading-zero);
position: absolute;
inset-block-start: var(--s-4);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--primary-text);
letter-spacing: var(--tracking-wide);
}
.step::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: 0;
width: 28px;
height: 3px;
background: var(--grad-signal);
}
.step h3 { font-size: var(--fs-md); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
/* Vertical timeline */
.timeline { position: relative; display: grid; gap: var(--s-10); padding-inline-start: var(--s-8); }
.timeline::before {
content: "";
position: absolute;
inset-block: 6px 0;
inset-inline-start: 5px;
width: 1px;
background: linear-gradient(180deg, var(--primary), var(--secondary) 50%, transparent);
}
.tl-item { position: relative; display: grid; gap: var(--s-2); }
.tl-item::before {
content: "";
position: absolute;
inset-block-start: 7px;
inset-inline-start: calc(var(--s-8) * -1);
width: 11px;
height: 11px;
border-radius: var(--r-pill);
background: var(--bg);
border: 2px solid var(--primary);
}
.tl-item__year { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-text); letter-spacing: var(--tracking-wide); }
.tl-item h3 { font-size: var(--fs-md); }
.tl-item p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
/* Horizontal flow with connectors */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-4); }
.flow__node {
position: relative;
display: grid;
gap: var(--s-3);
padding: var(--s-5);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-panel);
}
.flow__node:not(:last-child)::after {
content: "";
position: absolute;
inset-inline-end: calc(var(--s-4) * -1);
inset-block-start: 50%;
width: var(--s-4);
height: 1px;
background: var(--border-strong);
}
@media (max-width: 720px) { .flow__node:not(:last-child)::after { display: none; } }
/* ==========================================================================
17 — Metrics & counters
========================================================================== */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--s-8) var(--s-6); }
.metric { display: grid; gap: var(--s-2); }
.metric__value {
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: var(--weight-semibold);
line-height: 1;
letter-spacing: var(--tracking-tight);
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
}
.metric__label { font-size: var(--fs-sm); color: var(--text-muted); }
.metric__note { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
/* KPI delta */
.delta { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--font-mono); font-size: var(--fs-xs); }
.delta--up { color: var(--success); }
.delta--down { color: var(--danger); }
/* Live gauge (latency meter) */
.gauge { display: grid; gap: var(--s-2); }
.gauge__bar { height: 6px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; border: 1px solid var(--border); }
.gauge__fill { height: 100%; border-radius: inherit; background: var(--grad-signal); width: var(--val, 50%); transition: width var(--dur-5) var(--ease-out); }
.gauge__row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
/* ==========================================================================
18 — Testimonials, quotes, logos
========================================================================== */
.quote {
display: grid;
gap: var(--s-6);
padding: clamp(1.5rem, 3.5vw, 3rem);
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--grad-panel);
}
.quote blockquote {
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--weight-medium);
line-height: 1.45;
letter-spacing: var(--tracking-snug);
text-wrap: balance;
max-width: 46ch;
}
.quote--hero blockquote { font-size: var(--fs-2xl); max-width: 34ch; }
.quote__mark { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 0.6; color: var(--primary); }
.byline { display: flex; align-items: center; gap: var(--s-3); }
.byline__avatar {
width: 42px;
height: 42px;
flex: none;
border-radius: var(--r-pill);
border: 1px solid var(--border-strong);
background: var(--grad-signal-soft);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--primary-text);
}
.byline strong { display: block; font-size: var(--fs-sm); }
.byline span { display: block; font-size: var(--fs-xs); color: var(--text-faint); }
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-10); }
.logo-strip span {
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-snug);
color: var(--text-faint);
opacity: 0.75;
transition: opacity var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.logo-strip span:hover { opacity: 1; color: var(--text); }
.logo-strip img {
height: 2rem;
width: auto;
max-width: 10rem;
object-fit: contain;
opacity: 0.85;
transition: opacity var(--dur-3) var(--ease-out);
}
.logo-strip img:hover { opacity: 1; }
/* ==========================================================================
19 — Pricing
========================================================================== */
.price-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; }
.plan { position: relative; display: grid; gap: var(--s-5); padding: clamp(1.5rem, 2.8vw, 2.25rem); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-panel); }
.plan--featured {
border-color: var(--primary-ring);
background:
radial-gradient(120% 100% at 50% 0%, var(--primary-soft), transparent 60%),
var(--bg-panel-hover);
box-shadow: var(--glow-primary);
}
.plan__flag {
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
translate: -50% -50%;
}
.plan__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); }
.plan__price b {
font-family: var(--font-display);
font-size: var(--fs-2xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.plan__price span { font-size: var(--fs-xs); color: var(--text-faint); }
.plan__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
/* ==========================================================================
20 — Article & prose
========================================================================== */
.prose { max-width: var(--container-prose); }
.prose > * + * { margin-block-start: var(--s-6); }
.prose h2 { font-size: var(--fs-xl); margin-block-start: var(--s-12); }
.prose h3 { font-size: var(--fs-lg); margin-block-start: var(--s-10); }
.prose p, .prose li { color: var(--text-muted); line-height: var(--lh-loose); }
.prose strong { color: var(--text); }
.prose figure { display: grid; gap: var(--s-3); }
.prose figcaption { font-size: var(--fs-xs); color: var(--text-faint); }
.prose blockquote {
padding-inline-start: var(--s-6);
border-inline-start: 2px solid var(--primary);
font-family: var(--font-display);
font-size: var(--fs-md);
color: var(--text);
font-style: normal;
}
.prose hr { margin-block: var(--s-10); }
.prose > .code, .prose > .callout, .prose > .table-wrap { max-width: none; }
.callout {
display: grid;
grid-template-columns: 22px 1fr;
gap: var(--s-4);
padding: var(--s-5);
border: 1px solid var(--border);
border-inline-start: 2px solid var(--primary);
border-radius: var(--r-md);
background: var(--bg-panel);
font-size: var(--fs-sm);
}
.callout--warn { border-inline-start-color: var(--accent); }
.callout--danger { border-inline-start-color: var(--danger); }
.callout svg { width: 20px; height: 20px; color: var(--primary); margin-block-start: 0.15em; }
.callout--warn svg { color: var(--accent); }
.callout--danger svg { color: var(--danger); }
.callout p { color: var(--text-muted); margin: 0; }
.callout strong { display: block; color: var(--text); margin-block-end: 0.25em; }
.toc { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.toc ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); border-inline-start: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a {
display: block;
padding-inline-start: var(--s-4);
margin-inline-start: -1px;
border-inline-start: 1px solid transparent;
color: var(--text-faint);
text-decoration: none;
line-height: 1.4;
}
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--primary-text); border-inline-start-color: var(--primary); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); }
/* ==========================================================================
21 — Misc
========================================================================== */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }
.pagination a, .pagination span {
display: grid;
place-items: center;
min-width: 38px;
height: 38px;
padding-inline: var(--s-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-muted);
text-decoration: none;
}
.pagination a:hover { border-color: var(--border-strong); color: var(--text); }
.pagination [aria-current="page"] { background: var(--primary-soft); border-color: var(--primary-ring); color: var(--primary-text); }
.avatars { display: flex; }
.avatars > * { margin-inline-start: -10px; border: 2px solid var(--bg); }
.avatars > :first-child { margin-inline-start: 0; }
.kv-list { display: grid; gap: var(--s-3); }
.kv-list > div { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); padding-block-end: var(--s-3); border-block-end: 1px dashed var(--border-faint); }
.kv-list dt { color: var(--text-faint); }
.kv-list dd { margin: 0; font-family: var(--font-mono); }
.stat-inline { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-10); }
.stat-inline > div { display: grid; gap: var(--s-1); }
.stat-inline b { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
.stat-inline span { font-size: var(--fs-xs); color: var(--text-faint); }
/* CTA band */
.cta-band {
position: relative;
overflow: hidden;
border-radius: var(--r-2xl);
border: 1px solid var(--border-strong);
padding: clamp(2rem, 5vw, 4.5rem);
color: var(--color-bone);
--text: var(--color-bone);
--text-muted: var(--color-mist);
--text-faint: color-mix(in oklab, var(--color-mist) 72%, var(--color-ink));
--border: var(--color-hair2);
--bg: var(--color-panel);
--primary: var(--color-signal);
--primary-text: var(--color-signal);
--on-primary: var(--color-ink);
--link: var(--color-mint);
background:
radial-gradient(120% 140% at 10% 0%, rgba(201 247 91 / 0.12), transparent 55%),
radial-gradient(110% 130% at 92% 100%, rgba(111 231 210 / 0.1), transparent 55%),
var(--color-panel);
}
.cta-band h2,
.cta-band .lead,
.cta-band p { color: var(--text); }
.cta-band .lead,
.cta-band p { color: var(--text-muted); }
.cta-band__inner { position: relative; z-index: 2; display: grid; gap: var(--s-6); max-width: 58ch; }
/* Job / list rows */
.row-list { display: grid; }
.row-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s-4);
align-items: center;
padding-block: var(--s-5);
border-block-end: 1px solid var(--border-faint);
text-decoration: none;
color: inherit;
transition: padding-inline var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.row-item:first-child { border-block-start: 1px solid var(--border-faint); }
.row-item:hover { padding-inline: var(--s-4); background: var(--bg-panel); }
.row-item h3 { font-size: var(--fs-md); }
.row-item .card__meta { margin-block-start: var(--s-2); }
/* Office card */
.office { display: grid; gap: var(--s-3); }
.office address { font-style: normal; font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }
/* Before / after slider */
.compare-slider { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); cursor: ew-resize; user-select: none; }
.compare-slider > .cs-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-slider > .cs-after > * { width: 100%; height: 100%; object-fit: cover; }
.compare-slider__handle {
position: absolute;
inset-block: 0;
inset-inline-start: var(--pos, 50%);
width: 2px;
background: var(--primary);
pointer-events: none;
}
.compare-slider__handle::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
width: 36px;
height: 36px;
border-radius: var(--r-pill);
border: 2px solid var(--primary);
background: var(--bg-scrim);
backdrop-filter: var(--blur-sm);
}
.cs-label {
position: absolute;
inset-block-end: var(--s-4);
padding: 0.3em 0.7em;
font-family: var(--font-mono);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
border-radius: var(--r-pill);
background: var(--bg-scrim);
border: 1px solid var(--border);
backdrop-filter: var(--blur-sm);
}
.cs-label--l { inset-inline-start: var(--s-4); }
.cs-label--r { inset-inline-end: var(--s-4); }
/* YouTube / media embed — large, near full shell width (matches old Google Sites prominence) */
.video-embed {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
min-height: min(56vw, 420px);
overflow: hidden;
border-radius: var(--r-lg);
border: 1px solid var(--border);
background: var(--bg-inset);
box-shadow: var(--shadow-md), var(--inner-hairline);
}
/* Full-band demos: match old Google Sites large player */
.video-embed--feature {
min-height: min(62vw, 520px);
}
/* Slightly smaller player — exact 16:9, no min-height stretch (avoids letterbox) */
.video-embed--compact {
max-width: 760px;
margin-inline: auto;
min-height: 0;
aspect-ratio: 16 / 9;
}
@media (min-width: 900px) {
.video-embed {
min-height: 480px;
}
.video-embed--feature {
min-height: 560px;
}
.video-embed--compact {
min-height: 0;
}
/* Split companions: size from column width (16:9). Prefer split--5-7
so the media column is wider than copy — do not reimpose the 480px
full-band floor (that letterboxes inside a narrow column). */
.split > .video-embed,
.split .video-embed {
min-height: 0;
}
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.video-embed__player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
background: #06070a;
object-fit: cover;
}
/* Click-to-play facade — poster + play only (no YouTube title/channel chrome at rest) */
.video-embed__facade {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
color: inherit;
background: #06070a;
-webkit-tap-highlight-color: transparent;
}
.video-embed__facade:focus-visible {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
.video-embed__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.video-embed__play {
position: relative;
z-index: 1;
width: 4.25rem;
height: 4.25rem;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--primary);
background: color-mix(in oklab, var(--color-ink) 62%, transparent);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform var(--dur-2) var(--ease-out),
background var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out);
}
.video-embed__play::before {
content: "";
width: 0;
height: 0;
margin-inline-start: 0.2rem;
border-style: solid;
border-width: 0.52rem 0 0.52rem 0.9rem;
border-color: transparent transparent transparent currentColor;
}
.video-embed__facade:hover .video-embed__play,
.video-embed__facade:focus-visible .video-embed__play {
transform: scale(1.06);
color: var(--on-primary);
background: var(--primary);
border-color: transparent;
box-shadow: var(--glow-primary);
}
.video-embed.is-playing .video-embed__facade {
display: none;
}
.video-embed__caption {
margin-block-start: var(--s-3);
font-size: var(--fs-sm);
color: var(--text-muted);
text-align: center;
}
/* Single featured video band — slightly tighter vertical rhythm under section head */
.section-head + .video-embed,
.section-head + .video-embed-grid {
margin-block-start: var(--s-6);
}
.video-embed-grid {
display: grid;
gap: var(--s-8);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
/* Two-up when exactly two; otherwise stack large one-per-row for prominence */
.video-embed-grid:has(> :nth-child(2):last-child) {
grid-template-columns: 1fr 1fr;
}
.video-embed-grid:has(> :nth-child(3)) {
grid-template-columns: 1fr;
}
.video-embed-grid:has(> :nth-child(3)) .video-embed {
min-height: 520px;
}
}
/* ---------- Arena chrome extras ------------------------------------ */
.footer-contact a {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: var(--fs-sm);
color: var(--text-muted);
text-decoration: none;
}
.footer-contact a:hover { color: var(--primary-text); }
.footer-contact svg { flex: none; }
.footer-social {
display: flex;
align-items: center;
gap: 0.5rem;
margin-block-start: var(--s-4);
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--r-md, 0.5rem);
color: var(--text-muted);
text-decoration: none;
}
.footer-social a:hover { color: var(--primary-text); }
.footer-social svg { flex: none; }
.home-hero {
position: relative;
isolation: isolate;
overflow: hidden;
border-block-end: 1px solid var(--border);
min-height: 0;
/* Header is sticky and in-flow — do not add a second header-h clear.
Keep a small 20px gap under the bar at every desktop width (not a vw clamp that caps at ~44px). */
padding-block: 1.25rem clamp(4rem, 8vw, 6rem);
}
.home-hero .split {
--split-align: start;
align-items: start;
}
.home-hero [data-reveal="up"] { --reveal-y: 10px; }
.home-hero__scene {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.home-hero__scene picture {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
}
.home-hero__scene img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
opacity: 0.45;
}
.home-hero__veil {
position: absolute;
inset: 0;
background:
linear-gradient(to right, var(--color-ink) 0%, color-mix(in oklab, var(--color-ink) 92%, transparent) 42%, color-mix(in oklab, var(--color-ink) 25%, transparent) 100%),
linear-gradient(to top, var(--color-ink) 0%, transparent 42%, color-mix(in oklab, var(--color-ink) 70%, transparent) 100%);
}
[data-theme="light"] .home-hero__scene img { opacity: 0.42; }
[data-theme="light"] .home-hero__veil {
background:
linear-gradient(to right, var(--bg) 0%, color-mix(in oklab, var(--bg) 94%, transparent) 44%, color-mix(in oklab, var(--bg) 20%, transparent) 100%),
linear-gradient(to top, var(--bg) 0%, transparent 46%, color-mix(in oklab, var(--bg) 55%, transparent) 100%);
}
[data-theme="light"] .home-hero__grid { opacity: 0.45; }
.home-hero__grid {
position: absolute;
inset: 0;
opacity: 0.8;
}
.home-hero__copy,
.home-hero__evidence { position: relative; z-index: 1; }
.home-hero .shell { position: relative; z-index: 1; }
.session-card {
width: 100%;
overflow: hidden;
border-radius: var(--r-2xl);
border: 1px solid var(--color-hair2);
background: color-mix(in oklab, var(--color-ink2) 92%, transparent);
box-shadow: var(--shadow-xl);
backdrop-filter: var(--blur-lg);
color: var(--color-bone);
--text: var(--color-bone);
--text-muted: var(--color-mist);
--text-faint: color-mix(in oklab, var(--color-mist) 72%, var(--color-ink));
--border: var(--color-hair);
--primary: var(--color-signal);
--primary-text: var(--color-signal);
}
.session-card__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-block-end: 1px solid var(--border);
}
.session-card__live {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-muted);
}
.session-card__ms {
display: flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-mono);
font-size: 11px;
color: var(--primary);
}
.session-card__wave {
display: flex;
align-items: flex-end;
gap: 3px;
height: 3.5rem;
padding: 0.5rem 1rem 0.75rem;
}
.session-card__wave .wave-bar {
flex: 1;
height: 100%;
border-radius: 2px;
}
.session-card__rows { display: grid; }
.session-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: baseline;
padding: 0.7rem 1rem;
border-block-start: 1px solid var(--border);
font-size: var(--fs-sm);
}
.session-row dt { color: var(--text-muted); font-weight: 500; }
.session-row dd {
margin: 0;
color: var(--primary);
text-align: end;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.session-card__foot {
padding: 0.7rem 1rem;
border-block-start: 1px solid var(--border);
font-size: var(--fs-xs);
color: var(--text-faint);
}
.trust-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
}
.trust-pills span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.trust-pills span::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in oklab, var(--primary) 70%, transparent);
}
.launch-grid {
display: grid;
gap: var(--s-4);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.launch-grid { grid-template-columns: minmax(0, 1fr); }
}
.launch-card__art {
overflow: hidden;
margin: -1.25rem -1.2rem 0.35rem;
border-block-end: 1px solid var(--border-faint);
aspect-ratio: 5 / 3;
background: #0b1210;
}
.launch-card__art img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out);
}
.launch-card:hover .launch-card__art img {
transform: scale(1.04);
opacity: 0.95;
}
.launch-card {
position: relative;
display: grid;
align-content: start;
gap: 0.45rem;
min-height: 100%;
padding: 1.25rem 1.2rem 1.15rem;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--bg-raised);
text-decoration: none;
color: inherit;
transition: transform var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out);
}
.launch-card::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 1.2rem;
width: 1.75rem;
height: 3px;
background: var(--grad-signal);
}
.launch-card:hover {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--color-signal) 42%, var(--border));
}
.launch-card__lane {
margin-block-start: 0.35rem;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--signal-text);
}
.launch-card h3 {
margin: 0;
font-size: var(--fs-md);
letter-spacing: var(--tracking-tight);
}
.launch-card p {
margin: 0;
font-size: var(--fs-sm);
color: var(--text-muted);
line-height: 1.45;
}
.launch-card .link-arrow {
margin-block-start: 0.35rem;
font-size: var(--fs-xs);
}
.product-bento {
display: grid;
gap: var(--s-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-bento > .span-2 { grid-column: span 2; }
@media (max-width: 900px) {
.product-bento { grid-template-columns: 1fr 1fr; }
.product-bento > .span-2 { grid-column: span 2; }
}
@media (max-width: 620px) {
.product-bento,
.product-bento > .span-2 { grid-template-columns: minmax(0, 1fr); }
.product-bento > .span-2 { grid-column: auto; }
}
.product-tile {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--r-2xl);
border: 1px solid var(--border);
background: var(--bg-raised);
text-decoration: none;
color: inherit;
min-height: 100%;
transition: transform var(--dur-4) var(--ease-out), border-color var(--dur-4) var(--ease-out);
}
.product-tile:hover {
transform: translateY(-4px);
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
color: inherit;
}
.product-tile--compact .product-tile__media { height: 10.5rem; }
.product-tile--compact .product-tile__media img {
opacity: 0.94;
object-fit: cover;
object-position: center;
}
.product-tile--compact .product-tile__media::after {
background: linear-gradient(to top, var(--bg-raised) 0%, color-mix(in oklab, var(--bg-raised) 22%, transparent) 42%, transparent 72%);
}
.product-tile__media {
position: relative;
overflow: hidden;
height: 11rem;
background: #0b1210;
}
.product-tile.span-2 .product-tile__media { height: 16rem; }
.product-tile__media picture {
display: block;
width: 100%;
height: 100%;
}
.product-tile__media img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
opacity: 0.72;
transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
.product-tile:hover .product-tile__media img { transform: scale(1.05); opacity: 0.92; }
.product-tile__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--bg-raised), color-mix(in oklab, var(--bg-raised) 30%, transparent), transparent);
}
[data-theme="light"] .product-tile__media img { opacity: 0.9; }
[data-theme="light"] .product-tile:hover .product-tile__media img { opacity: 1; }
.product-tile__badge {
position: absolute;
z-index: 1;
inset-block-start: 1rem;
inset-inline-start: 1rem;
}
.product-tile__body {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.5rem;
flex: 1;
}
.product-tile__body h3 { font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); }
.product-tile__body p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); margin: 0; flex: 1; }
.layer-card { position: relative; }
.layer-card__idx {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primary-text);
}
.industry-card .chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-block-start: auto;
padding-block-start: var(--s-4);
}
.industry-card .chip-row span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 0.25em 0.65em;
}
/* Home page — outcome cards & benefit chips */
.home-outcome-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.home-outcome-card__head {
display: flex;
align-items: flex-start;
gap: var(--s-4);
margin-block-end: var(--s-3);
}
.home-outcome-card__head .card__title {
margin: 0;
font-size: var(--fs-lg);
padding-block-start: 0.35rem;
}
.benefit-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-block-start: auto;
padding-block-start: var(--s-4);
}
.benefit-chips span {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 0.25em 0.65em;
}
.benefit-chips--section {
margin-block-start: 0;
padding-block-start: 0;
}
.product-tile__body .benefit-chips,
.launch-card .benefit-chips {
margin-block-start: 0;
padding-block-start: var(--s-3);
}
.section-head .benefit-chips--section {
margin-block-start: var(--s-3);
}
/* Platform page */
.platform-stats {
padding-block: var(--band-sm);
border-block-end: 1px solid var(--border-faint);
background: color-mix(in oklab, var(--bg-raised) 55%, transparent);
}
.stats-icons {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--border-faint);
overflow: hidden;
}
.stats-icons__item {
display: grid;
gap: var(--s-3);
padding: var(--s-5) var(--s-4);
background: color-mix(in oklab, var(--bg-raised) 92%, transparent);
min-width: 0;
align-content: start;
}
.stats-icons__body {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.stats-icons__value {
font-family: var(--font-display);
font-size: clamp(1rem, 0.88rem + 0.35vw, 1.2rem);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
line-height: 1.3;
font-variant-numeric: tabular-nums;
text-wrap: balance;
}
.stats-icons__label {
font-family: var(--font-mono);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--text-faint);
}
@media (max-width: 1080px) {
.stats-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.stats-icons { grid-template-columns: minmax(0, 1fr); }
}
.platform-flow .step { padding-block-end: var(--s-2); }
.platform-pipe {
overflow: hidden;
border-radius: var(--r-xl);
border: 1px solid var(--border);
background: color-mix(in oklab, var(--bg-raised) 88%, transparent);
aspect-ratio: 880 / 220;
}
.platform-pipe--tall { aspect-ratio: 880 / 260; }
.platform-pipe img {
display: block;
width: 100%;
height: auto;
vertical-align: top;
}
.platform-pipe__caption {
margin: 0;
padding: var(--s-4) var(--s-5);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text-muted);
text-wrap: balance;
text-align: center;
border-block-start: 1px solid var(--border-faint);
background: color-mix(in oklab, var(--bg-raised) 75%, transparent);
}
.platform-panel {
padding: var(--s-8);
background: color-mix(in oklab, var(--bg-raised) 92%, transparent);
}
.platform-stack {
display: grid;
gap: var(--s-4);
}
.platform-stack li {
display: grid;
gap: 0.2rem;
padding-block: var(--s-3);
border-block-end: 1px solid var(--border);
}
.platform-stack li:last-child { border-block-end: 0; padding-block-end: 0; }
.platform-stack strong {
font-family: var(--font-display);
font-size: var(--fs-md);
letter-spacing: var(--tracking-tight);
}
.platform-stack span {
font-size: var(--fs-sm);
color: var(--text-muted);
}
.platform-map {
display: grid;
gap: var(--s-4);
padding: var(--s-6);
border-block-start: 2px solid var(--primary);
background: color-mix(in oklab, var(--bg-raised) 70%, transparent);
}
.platform-map__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
}
.platform-map__list a {
color: var(--text);
text-decoration: none;
font-size: var(--fs-sm);
font-weight: 500;
}
.platform-map__list a:hover { color: var(--primary-text); }
/* Industry: de-emphasized legacy / secondary links */
.industry-also {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 1.1rem;
margin: 0;
padding: 0;
list-style: none;
}
.industry-also a {
font-size: var(--fs-sm);
color: var(--text-muted);
text-decoration: none;
border-block-end: 1px solid transparent;
}
.industry-also a:hover {
color: var(--text);
border-block-end-color: var(--border-strong, var(--border));
}
/* === effects.css === */
/* ==========================================================================
SYNAPSE — Effects
The brand's visual language: perception motifs (gaze, bounding box, scan),
real-time motifs (waveform, pulse, ticker) and ambient depth (mesh, grain).
========================================================================== */
/* ==========================================================================
Ambient backdrops
========================================================================== */
/* Aurora mesh — slow drifting colour field. Put inside a positioned parent. */
.fx-aurora {
position: absolute;
inset: -20% -10%;
z-index: -1;
pointer-events: none;
filter: blur(70px) saturate(140%);
opacity: var(--aurora-opacity, 0.65);
}
.fx-aurora i {
position: absolute;
display: block;
border-radius: 50%;
mix-blend-mode: screen;
animation: drift var(--dur, 26s) var(--ease-in-out) infinite alternate;
}
.fx-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -6%; top: -12%; background: rgba(201 247 91 / 0.28); --dur: 24s; }
.fx-aurora i:nth-child(2) { width: 38vw; height: 38vw; right: 2%; top: 4%; background: rgba(111 231 210 / 0.32); --dur: 31s; animation-delay: -6s; }
.fx-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 34%; bottom: -14%; background: rgba(255 180 92 / 0.18); --dur: 38s; animation-delay: -14s; }
[data-theme="light"] .fx-aurora { opacity: 0.28; filter: blur(90px) saturate(110%); }
[data-theme="light"] .fx-aurora i { mix-blend-mode: multiply; }
@keyframes drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(6%, -5%, 0) scale(1.14); }
100% { transform: translate3d(-5%, 7%, 0) scale(0.94); }
}
/* Grain — film texture over everything, keeps flat gradients from banding */
.fx-grain::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
[data-theme="light"] .fx-grain::after { mix-blend-mode: multiply; }
/* Technical grid — the "instrument panel" floor */
.fx-grid {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--border-faint) 1px, transparent 1px),
linear-gradient(to bottom, var(--border-faint) 1px, transparent 1px);
background-size: var(--grid-size, 68px) var(--grid-size, 68px);
mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.fx-grid--dots {
background-image: radial-gradient(var(--border) 1px, transparent 1px);
background-size: 26px 26px;
}
/* Radial spotlight glow */
.fx-glow {
position: absolute;
z-index: -1;
pointer-events: none;
width: var(--glow-size, 620px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--glow-color, rgba(63 227 208 / 0.22)), transparent 68%);
filter: blur(20px);
}
.fx-glow--violet { --glow-color: rgba(155 132 255 / 0.24); }
.fx-glow--amber { --glow-color: rgba(255 190 92 / 0.18); }
/* Top/bottom fades to blend bands */
.fx-fade-top::before,
.fx-fade-bottom::after {
content: "";
position: absolute;
inset-inline: 0;
height: 140px;
pointer-events: none;
z-index: 1;
}
.fx-fade-top::before { inset-block-start: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.fx-fade-bottom::after { inset-block-end: 0; background: linear-gradient(0deg, var(--bg), transparent); }
/* ==========================================================================
Perception motifs
========================================================================== */
/* Bounding box with a label — the computer-vision signature.
Wrap any media: …
*/
.bbox { position: relative; }
.bbox::before {
content: "";
position: absolute;
inset: var(--bbox-inset, 8%);
border: 1.5px solid var(--bbox-color, var(--primary));
border-radius: 3px;
box-shadow: 0 0 24px -6px var(--bbox-color, var(--primary));
pointer-events: none;
animation: bbox-lock var(--dur-5) var(--ease-out-expo) both;
}
.bbox::after {
content: attr(data-label);
position: absolute;
inset-block-start: calc(var(--bbox-inset, 8%) - 1.55em);
inset-inline-start: var(--bbox-inset, 8%);
padding: 0.16em 0.45em;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-primary);
background: var(--bbox-color, var(--primary));
border-radius: 3px 3px 0 0;
pointer-events: none;
white-space: nowrap;
}
.bbox--violet { --bbox-color: var(--secondary); }
.bbox--amber { --bbox-color: var(--accent); }
@keyframes bbox-lock {
0% { opacity: 0; clip-path: inset(46% 46% 46% 46%); }
100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
/* Corner brackets — capture frame */
.frame { position: relative; }
.frame::before,
.frame::after {
content: "";
position: absolute;
width: 26px;
height: 26px;
border: 1.5px solid var(--primary);
pointer-events: none;
}
.frame::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 6px; }
.frame::after { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; border-end-end-radius: 6px; }
/* Scanline sweep — "processing" state over media */
.fx-scan { position: relative; overflow: hidden; }
.fx-scan::after {
content: "";
position: absolute;
inset-inline: 0;
height: 34%;
background: linear-gradient(180deg, transparent, rgba(63 227 208 / 0.16) 62%, rgba(63 227 208 / 0.5));
border-block-end: 1px solid var(--primary);
animation: scan 3.4s var(--ease-in-out) infinite;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes scan {
0%, 100% { transform: translateY(-110%); }
50% { transform: translateY(320%); }
}
/* Gaze rings — concentric pulses, used behind avatars/kiosks */
.fx-rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center; }
.fx-rings i {
position: absolute;
width: 100%;
aspect-ratio: 1;
border: 1px solid var(--primary-ring);
border-radius: 50%;
animation: ring-out 3.6s var(--ease-out) infinite;
}
.fx-rings i:nth-child(2) { animation-delay: 1.2s; }
.fx-rings i:nth-child(3) { animation-delay: 2.4s; }
@keyframes ring-out {
0% { transform: scale(0.35); opacity: 0; }
25% { opacity: 0.9; }
100% { transform: scale(1.35); opacity: 0; }
}
/* ==========================================================================
Real-time motifs
========================================================================== */
/* Waveform — live audio. 18 bars, staggered via nth-child. */
.waveform { display: flex; align-items: center; gap: 3px; height: var(--wave-h, 26px); }
.waveform i {
width: 3px;
flex: none;
border-radius: var(--r-pill);
background: var(--primary);
animation: wave 1.05s var(--ease-in-out) infinite alternate;
transform-origin: center;
}
.waveform i:nth-child(3n) { background: var(--secondary); }
.waveform i:nth-child(1) { animation-delay: -0.9s; height: 32%; }
.waveform i:nth-child(2) { animation-delay: -0.1s; height: 62%; }
.waveform i:nth-child(3) { animation-delay: -0.5s; height: 100%; }
.waveform i:nth-child(4) { animation-delay: -0.7s; height: 46%; }
.waveform i:nth-child(5) { animation-delay: -0.3s; height: 78%; }
.waveform i:nth-child(6) { animation-delay: -0.8s; height: 38%; }
.waveform i:nth-child(7) { animation-delay: -0.2s; height: 92%; }
.waveform i:nth-child(8) { animation-delay: -0.6s; height: 54%; }
.waveform i:nth-child(9) { animation-delay: -0.4s; height: 70%; }
.waveform i:nth-child(10) { animation-delay: -1s; height: 30%; }
.waveform i:nth-child(11) { animation-delay: -0.15s; height: 86%; }
.waveform i:nth-child(12) { animation-delay: -0.55s; height: 44%; }
.waveform i:nth-child(13) { animation-delay: -0.35s; height: 66%; }
.waveform i:nth-child(14) { animation-delay: -0.75s; height: 36%; }
.waveform i:nth-child(15) { animation-delay: -0.25s; height: 96%; }
.waveform i:nth-child(16) { animation-delay: -0.65s; height: 50%; }
.waveform i:nth-child(17) { animation-delay: -0.45s; height: 74%; }
.waveform i:nth-child(18) { animation-delay: -0.85s; height: 34%; }
@keyframes wave { from { transform: scaleY(0.28); } to { transform: scaleY(1); } }
.waveform--muted i { background: var(--text-faint); animation-play-state: paused; transform: scaleY(0.4); }
/* Pulse dot (live indicator) */
@keyframes pulse-dot {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
50% { opacity: 0.55; box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent); }
}
/* Marquee ticker */
.marquee {
position: relative;
display: flex;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
user-select: none;
}
.marquee__track {
display: flex;
flex: none;
gap: var(--marquee-gap, var(--s-10));
padding-inline-end: var(--marquee-gap, var(--s-10));
animation: marquee var(--marquee-dur, 38s) linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee__item {
display: inline-flex;
align-items: center;
gap: var(--s-3);
white-space: nowrap;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-snug);
color: var(--text-faint);
}
.marquee__item svg { width: 14px; height: 14px; color: var(--primary); }
/* Typing caret */
.caret::after {
content: "";
display: inline-block;
width: 0.55em;
height: 1.05em;
margin-inline-start: 0.12em;
vertical-align: -0.16em;
background: var(--primary);
animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
/* Ping / packet trail along a line */
.fx-packet { position: relative; overflow: hidden; }
.fx-packet::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
animation: packet 2.6s var(--ease-in-out) infinite;
}
@keyframes packet {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
/* ==========================================================================
Reveal on scroll — driven by IntersectionObserver adding .is-in
========================================================================== */
/* Progressive enhancement: only hide until JS marks .
Without JS, content stays visible (no blank heroes). */
html.js [data-reveal] {
opacity: 0;
transform: translateY(var(--reveal-y, 22px)) scale(var(--reveal-s, 1));
transition:
opacity var(--dur-5) var(--ease-out-expo) var(--reveal-delay, 0ms),
transform var(--dur-5) var(--ease-out-expo) var(--reveal-delay, 0ms),
filter var(--dur-5) var(--ease-out-expo) var(--reveal-delay, 0ms);
filter: blur(var(--reveal-blur, 0));
will-change: opacity, transform;
}
[data-reveal].is-in,
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }
[data-reveal="fade"] { --reveal-y: 0; }
[data-reveal="up"] { --reveal-y: 34px; }
[data-reveal="zoom"] { --reveal-y: 0; --reveal-s: 0.965; }
[data-reveal="blur"] { --reveal-blur: 10px; --reveal-y: 12px; }
[data-reveal="left"] { --reveal-y: 0; transform: translateX(-28px); }
[data-reveal="right"] { --reveal-y: 0; transform: translateX(28px); }
/* Word-by-word headline reveal (JS wraps words in ).
Activate when the element OR an ancestor gets .is-in — heroes put
reveal-words on the H1 inside a data-reveal parent. */
html.js .reveal-words .word { display: inline-block; overflow: hidden; vertical-align: top; }
html.js .reveal-words .word > span {
display: inline-block;
transform: translateY(110%);
transition: transform var(--dur-5) var(--ease-out-expo);
transition-delay: calc(var(--i, 0) * 42ms);
}
.reveal-words.is-in .word > span,
.is-in .reveal-words .word > span,
html.js .reveal-words.is-in .word > span,
html.js .is-in .reveal-words .word > span { transform: translateY(0); }
/* Staggered children: set on a container */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * var(--stagger, 70ms)); }
/* ==========================================================================
Interactive surfaces
========================================================================== */
/* Cursor spotlight — JS sets --mx/--my on the element */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(
var(--spot-size, 340px) circle at var(--mx, 50%) var(--my, 0%),
var(--spot-color, rgba(63 227 208 / 0.14)),
transparent 62%
);
opacity: 0;
transition: opacity var(--dur-3) var(--ease-out);
pointer-events: none;
}
.fx-spot:hover::before { opacity: 1; }
.fx-spot > * { position: relative; z-index: 1; }
/* 3D tilt — JS sets --rx/--ry */
.fx-tilt {
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
transition: transform var(--dur-3) var(--ease-out);
}
.fx-tilt__lift { transform: translateZ(38px); }
/* Magnetic button — JS sets --tx/--ty */
.fx-magnet { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
/* Gradient text */
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.grad-text--vision { background: var(--grad-vision); -webkit-background-clip: text; background-clip: text; }
/* Outline (stroke) text */
.stroke-text {
color: transparent;
-webkit-text-stroke: 1px var(--border-strong);
}
/* Animated gradient border */
.fx-border {
position: relative;
background: var(--bg-raised);
border: 0;
}
.fx-border::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: conic-gradient(from var(--angle, 0deg), transparent 55%, var(--primary), var(--secondary), transparent 90%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: spin-angle 6s linear infinite;
pointer-events: none;
}
@property --angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@keyframes spin-angle { to { --angle: 360deg; } }
/* Float / bob */
.fx-float { animation: float 7s var(--ease-in-out) infinite alternate; }
.fx-float--slow { animation-duration: 11s; }
@keyframes float { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
/* Toast animations */
@keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px) scale(0.97); } }
/* Shimmer skeleton */
.skeleton {
border-radius: var(--r-sm);
background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-panel-hover) 50%, var(--bg-inset) 75%);
background-size: 220% 100%;
animation: shimmer 1.5s linear infinite;
color: transparent;
}
@keyframes shimmer { to { background-position: -120% 0; } }
/* Counting number lock-in */
.counting { font-variant-numeric: tabular-nums; }
/* View-transition friendly page fade */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
/* Arena motion: live-dot, scan, wave */
.live-dot {
width: 6px;
height: 6px;
border-radius: var(--r-pill);
background: var(--primary);
flex: none;
animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201 247 91 / 0.5); }
60% { box-shadow: 0 0 0 8px rgba(201 247 91 / 0); }
}
.grid-bg {
background-image:
linear-gradient(90deg, var(--border-faint) 1px, transparent 1px),
linear-gradient(var(--border-faint) 1px, transparent 1px);
background-size: 76px 76px;
}
.grid-fade {
-webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
mask-image: radial-gradient(90% 70% at 50% 30%, #000 20%, transparent 100%);
}
.scan-sweep {
animation: scan-sweep 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes scan-sweep {
0% { opacity: 0; transform: translateY(-10%); }
12% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; transform: translateY(110%); }
}
.wave-bar {
transform-origin: 50% 100%;
animation: wave 1.1s ease-in-out infinite;
background: linear-gradient(to top, rgba(201 247 91 / 0.15), rgba(111 231 210 / 0.7));
}
@keyframes wave {
0%, 100% { transform: scaleY(0.22); }
50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.live-dot, .scan-sweep, .wave-bar, .eyebrow::before { animation: none !important; }
}
/* === kiosk.css === */
/* ==========================================================================
Smart Kiosk / Concierge AI — visual components
Animated conversation UI + hardware stage (CSS motion > GIF for this site)
========================================================================== */
.kiosk-stage {
position: relative;
display: grid;
place-items: center;
min-height: 28rem;
padding: 1.25rem 1rem 1.5rem;
border-radius: var(--r-xl);
background:
radial-gradient(ellipse 70% 50% at 50% 20%, rgba(63 227 208 / 0.12), transparent 60%),
linear-gradient(180deg, var(--ink-850), var(--ink-950));
border: 1px solid var(--border);
overflow: hidden;
}
.kiosk-stage__floor {
position: absolute;
inset: auto 0 0;
height: 32%;
background: linear-gradient(180deg, transparent, rgba(3 5 10 / 0.7));
pointer-events: none;
}
.kiosk-stage__unit {
position: relative;
z-index: 1;
width: min(280px, 70%);
max-height: 26rem;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 24px 40px rgba(0 0 0 / 0.55));
margin: 0 auto;
display: block;
}
.kiosk-graphic-hero {
width: 100%;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid rgba(63 227 208 / 0.28);
box-shadow:
0 24px 56px rgba(0 0 0 / 0.45),
0 0 48px rgba(63 227 208 / 0.1);
background: var(--ink-900);
line-height: 0;
}
.kiosk-graphic-hero img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.kiosk-hero-screen {
width: 100%;
min-height: 100%;
}
.kiosk-hero-screen .kiosk-screen {
min-height: 20rem;
}
@media (max-width: 900px) {
.kiosk-hero-screen .kiosk-screen {
min-height: 18rem;
}
}
/* Conversation preview — standalone card, not overlaid on hardware */
.kiosk-stage--split {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 1rem;
align-items: center;
place-items: stretch;
padding: 1.25rem;
}
.kiosk-stage--split .kiosk-stage__unit {
width: min(240px, 100%);
max-height: 22rem;
}
.kiosk-stage--split .kiosk-stage__screen {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
}
.kiosk-stage__screen {
position: relative;
z-index: 2;
width: 100%;
border-radius: 14px;
border: 1px solid rgba(63 227 208 / 0.35);
background: rgba(8 11 20 / 0.92);
box-shadow:
0 0 0 1px rgba(255 255 255 / 0.04),
0 20px 50px rgba(0 0 0 / 0.45),
0 0 40px rgba(63 227 208 / 0.12);
overflow: hidden;
}
.kiosk-product {
display: grid;
place-items: center;
min-height: 26rem;
padding: 1.75rem 1.25rem;
border-radius: var(--r-xl);
border: 1px solid var(--border);
background:
radial-gradient(circle at 50% 28%, rgba(63 227 208 / 0.1), transparent 55%),
var(--ink-900);
overflow: hidden;
}
.kiosk-product img {
width: auto;
max-width: min(100%, 320px);
max-height: 480px;
height: auto;
object-fit: contain;
object-position: center center;
display: block;
margin: 0 auto;
filter: drop-shadow(0 18px 36px rgba(0 0 0 / 0.45));
}
.kiosk-inquiry .field {
font-size: var(--fs-sm);
color: var(--text-muted);
}
.kiosk-inquiry .input,
.kiosk-inquiry .textarea {
width: 100%;
}
.kiosk-inquiry .mb-0 { margin-bottom: 0; }
@media (max-width: 900px) {
.kiosk-stage--split {
grid-template-columns: 1fr;
justify-items: center;
}
.kiosk-stage--split .kiosk-stage__unit {
max-height: 18rem;
}
.kiosk-walkup-grid {
grid-template-columns: 1fr;
width: 100%;
}
.kiosk-storyboard {
width: 100%;
}
}
.kiosk-demo {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 1.25rem;
align-items: stretch;
}
.kiosk-demo__screen {
border-radius: var(--r-xl);
border: 1px solid rgba(63 227 208 / 0.35);
background: rgba(8 11 20 / 0.92);
box-shadow: 0 20px 50px rgba(0 0 0 / 0.35);
overflow: hidden;
min-height: 100%;
}
.kiosk-demo__steps {
display: grid;
gap: 0.75rem;
align-content: start;
}
.kiosk-demo__steps--row {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: 1rem;
}
.kiosk-demo__step {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
padding: 0.85rem 1rem;
border-radius: var(--r-lg);
border: 1px solid var(--border);
background: var(--bg-panel);
}
.kiosk-demo__num {
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.85rem;
color: var(--on-primary);
background: var(--cyan-400);
}
.kiosk-demo__step h3 {
margin: 0 0 0.2rem;
font-size: var(--fs-sm);
font-family: var(--font-display);
}
.kiosk-demo__step p {
margin: 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
@media (max-width: 900px) {
.kiosk-demo { grid-template-columns: 1fr; }
}
.kiosk-screen {
display: grid;
gap: 0.75rem;
padding: 1rem 1.1rem 1.15rem;
font-family: var(--font-sans);
}
.kiosk-screen__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.kiosk-screen__live {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--cyan-300);
font-weight: 600;
}
.kiosk-screen__live::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: var(--cyan-400);
box-shadow: 0 0 0 0 rgba(63 227 208 / 0.55);
animation: kiosk-pulse 1.8s ease-out infinite;
}
.kiosk-screen__gaze {
position: relative;
width: 3.25rem;
height: 3.25rem;
margin: 0.15rem auto 0.25rem;
border-radius: 999px;
border: 1px solid rgba(63 227 208 / 0.45);
background:
radial-gradient(circle at 50% 42%, rgba(63 227 208 / 0.25), transparent 55%),
rgba(255 255 255 / 0.03);
}
.kiosk-screen__gaze::before,
.kiosk-screen__gaze::after {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
border: 1px solid rgba(63 227 208 / 0.25);
animation: kiosk-ring 2.4s ease-out infinite;
}
.kiosk-screen__gaze::after {
inset: -14px;
animation-delay: 0.7s;
opacity: 0.55;
}
.kiosk-screen__title {
margin: 0;
text-align: center;
font-family: var(--font-display);
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.kiosk-screen__sub {
margin: 0;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
}
.kiosk-chat {
display: grid;
gap: 0.55rem;
min-height: 5.5rem;
}
.kiosk-chat__bubble {
max-width: 88%;
padding: 0.55rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
line-height: 1.35;
opacity: 0;
transform: translateY(8px);
animation: kiosk-bubble 4.8s ease-in-out infinite;
}
.kiosk-chat__bubble--ai {
justify-self: start;
background: rgba(63 227 208 / 0.12);
border: 1px solid rgba(63 227 208 / 0.22);
color: var(--text);
animation-delay: 0.2s;
}
.kiosk-chat__bubble--user {
justify-self: end;
background: rgba(155 132 255 / 0.14);
border: 1px solid rgba(155 132 255 / 0.28);
color: var(--text);
animation-delay: 1.4s;
}
.kiosk-chat__bubble--ai-2 {
justify-self: start;
background: rgba(63 227 208 / 0.12);
border: 1px solid rgba(63 227 208 / 0.22);
color: var(--text);
animation-delay: 2.6s;
}
.kiosk-screen__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
}
.kiosk-screen__chip {
padding: 0.28rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: rgba(255 255 255 / 0.03);
color: var(--text-muted);
font-size: 0.72rem;
}
.kiosk-wave {
display: flex;
align-items: end;
justify-content: center;
gap: 3px;
height: 1.35rem;
margin-top: 0.15rem;
}
.kiosk-wave i {
width: 3px;
border-radius: 2px;
background: var(--cyan-400);
animation: kiosk-bar 1.1s ease-in-out infinite;
}
.kiosk-wave i:nth-child(1) { height: 28%; animation-delay: 0s; }
.kiosk-wave i:nth-child(2) { height: 55%; animation-delay: 0.1s; }
.kiosk-wave i:nth-child(3) { height: 80%; animation-delay: 0.2s; }
.kiosk-wave i:nth-child(4) { height: 42%; animation-delay: 0.3s; }
.kiosk-wave i:nth-child(5) { height: 68%; animation-delay: 0.15s; }
.kiosk-wave i:nth-child(6) { height: 35%; animation-delay: 0.25s; }
.kiosk-wave i:nth-child(7) { height: 90%; animation-delay: 0.05s; }
.kiosk-wave i:nth-child(8) { height: 50%; animation-delay: 0.35s; }
.kiosk-agents {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
.kiosk-agent {
position: relative;
padding: 1rem;
border-radius: var(--r-lg);
border: 1px solid var(--border);
background: var(--bg-panel);
overflow: hidden;
}
.kiosk-agent::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
transform: translateX(-100%);
animation: kiosk-scan 3.2s linear infinite;
}
.kiosk-agent:nth-child(2)::after { animation-delay: 0.6s; background: linear-gradient(90deg, transparent, var(--violet-400), transparent); }
.kiosk-agent:nth-child(3)::after { animation-delay: 1.2s; background: linear-gradient(90deg, transparent, var(--amber-400), transparent); }
.kiosk-agent:nth-child(4)::after { animation-delay: 1.8s; }
.kiosk-usecase-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
a.card.kiosk-usecase-card,
.card.kiosk-usecase-card {
display: grid;
gap: 0.75rem;
padding: 0;
overflow: hidden;
border-top: 3px solid var(--kiosk-card-accent, var(--cyan-400));
}
.kiosk-usecase-card__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--ink-850);
isolation: isolate;
}
.kiosk-usecase-card__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.28;
mix-blend-mode: multiply;
background: var(--kiosk-card-wash, linear-gradient(145deg, rgba(63 227 208 / 0.35), transparent 65%));
}
.kiosk-usecase-card__media img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: var(--kiosk-card-focus, center);
display: block;
transition: transform var(--dur-6) var(--ease-out);
}
.kiosk-usecase-card:hover .kiosk-usecase-card__media img {
transform: scale(1.04);
}
a.kiosk-usecase-card .kiosk-usecase-card__icon,
.kiosk-usecase-card__icon {
position: absolute;
z-index: 2;
right: 0.65rem;
bottom: 0.65rem;
top: auto;
left: auto;
width: 2.25rem;
height: 2.25rem;
display: grid;
place-items: center;
border-radius: var(--r-md);
border: 1px solid color-mix(in oklab, var(--kiosk-card-accent, var(--cyan-400)) 55%, transparent);
background: rgba(8 11 20 / 0.82);
color: var(--kiosk-card-accent, var(--cyan-400));
box-shadow: 0 4px 16px rgba(0 0 0 / 0.4);
backdrop-filter: blur(8px);
pointer-events: none;
}
a.kiosk-usecase-card .kiosk-usecase-card__icon svg,
.kiosk-usecase-card__icon svg {
width: 1.15rem !important;
height: 1.15rem !important;
max-width: 1.15rem !important;
max-height: 1.15rem !important;
fill: none !important;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
a.kiosk-usecase-card .kiosk-usecase-card__icon svg *,
.kiosk-usecase-card__icon svg * {
fill: none !important;
stroke: inherit;
}
.kiosk-usecase-card--hospitality {
--kiosk-card-accent: var(--amber-400);
--kiosk-card-wash: linear-gradient(160deg, rgba(251 191 36 / 0.55) 0%, rgba(120 53 15 / 0.15) 55%, transparent 100%);
--kiosk-card-focus: 55% 40%;
}
.kiosk-usecase-card--workplace {
--kiosk-card-accent: var(--cyan-400);
--kiosk-card-wash: linear-gradient(155deg, rgba(63 227 208 / 0.45) 0%, rgba(15 23 42 / 0.2) 60%, transparent 100%);
--kiosk-card-focus: 40% center;
}
.kiosk-usecase-card--security {
--kiosk-card-accent: var(--violet-400);
--kiosk-card-wash: linear-gradient(150deg, rgba(167 139 250 / 0.5) 0%, rgba(49 46 129 / 0.25) 55%, transparent 100%);
--kiosk-card-focus: 65% center;
}
.kiosk-usecase-card--campus {
--kiosk-card-accent: #6ee7b7;
--kiosk-card-wash: linear-gradient(145deg, rgba(110 231 183 / 0.48) 0%, rgba(6 78 59 / 0.18) 58%, transparent 100%);
--kiosk-card-focus: 50% 35%;
}
.kiosk-usecase-card--transit {
--kiosk-card-accent: #60a5fa;
--kiosk-card-wash: linear-gradient(150deg, rgba(96 165 250 / 0.5) 0%, rgba(30 58 138 / 0.2) 55%, transparent 100%);
--kiosk-card-focus: 45% 30%;
}
.kiosk-usecase-card--retail {
--kiosk-card-accent: #f472b6;
--kiosk-card-wash: linear-gradient(155deg, rgba(244 114 182 / 0.52) 0%, rgba(131 24 67 / 0.22) 55%, transparent 100%);
--kiosk-card-focus: 35% center;
}
.kiosk-usecase-card--healthcare {
--kiosk-card-accent: #34d399;
--kiosk-card-wash: linear-gradient(150deg, rgba(52 211 153 / 0.48) 0%, rgba(6 95 70 / 0.2) 55%, transparent 100%);
--kiosk-card-focus: 60% 45%;
}
.kiosk-usecase-card--bfsi {
--kiosk-card-accent: var(--amber-300);
--kiosk-card-wash: linear-gradient(155deg, rgba(252 211 77 / 0.45) 0%, rgba(92 64 20 / 0.25) 55%, transparent 100%);
--kiosk-card-focus: 50% center;
}
.kiosk-usecase-card--education {
--kiosk-card-accent: #a78bfa;
--kiosk-card-wash: linear-gradient(150deg, rgba(167 139 250 / 0.48) 0%, rgba(76 29 149 / 0.22) 55%, transparent 100%);
--kiosk-card-focus: 42% 38%;
}
.kiosk-usecase-card__badge {
width: fit-content;
justify-self: start;
}
.kiosk-usecase-card .card__body,
.kiosk-usecase-card .card__title,
.kiosk-usecase-card .kiosk-usecase-card__badge,
.kiosk-usecase-card .link-arrow {
margin-left: 1rem;
margin-right: 1rem;
}
.kiosk-usecase-card .link-arrow {
margin-bottom: 1rem;
}
.kiosk-storyboard {
background: #080b14;
min-height: 100%;
}
.kiosk-storyboard img {
width: 100%;
height: auto;
display: block;
}
.kiosk-walkup-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
align-content: start;
margin: 0;
padding: 0;
}
.kiosk-walkup-step {
display: grid;
gap: 0.35rem;
padding: 0.85rem 0.95rem;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--bg-panel);
}
.kiosk-walkup-step__num {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
color: var(--cyan-400);
line-height: 1;
}
.kiosk-walkup-step__title {
margin: 0;
font-size: var(--fs-sm);
font-weight: var(--weight-semibold);
line-height: 1.35;
color: var(--text);
}
.kiosk-walkup-step__body {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.45;
color: var(--text-muted);
}
.kiosk-claim {
display: grid;
gap: 0.35rem;
padding: 0.85rem 1rem;
border-left: 3px solid var(--cyan-400);
background: rgba(63 227 208 / 0.06);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.kiosk-claim--soft {
border-left-color: var(--violet-400);
background: rgba(155 132 255 / 0.06);
}
.kiosk-claim strong {
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.kiosk-claim p {
margin: 0;
color: var(--text);
font-size: 0.92rem;
}
.kiosk-hardware {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 1.5rem;
align-items: center;
}
.kiosk-hardware__shot {
border-radius: var(--r-xl);
border: 1px solid var(--border);
background:
radial-gradient(circle at 50% 30%, rgba(63 227 208 / 0.12), transparent 55%),
var(--ink-900);
padding: 1.5rem;
display: grid;
place-items: center;
min-height: 20rem;
}
.kiosk-hardware__shot img {
max-height: 420px;
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
object-position: center;
display: block;
margin: 0 auto;
}
@media (max-width: 900px) {
.kiosk-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kiosk-hardware { grid-template-columns: 1fr; }
.kiosk-stage { min-height: 22rem; }
}
@media (max-width: 560px) {
.kiosk-agents { grid-template-columns: 1fr; }
}
@keyframes kiosk-pulse {
0% { box-shadow: 0 0 0 0 rgba(63 227 208 / 0.5); }
70% { box-shadow: 0 0 0 10px rgba(63 227 208 / 0); }
100% { box-shadow: 0 0 0 0 rgba(63 227 208 / 0); }
}
@keyframes kiosk-ring {
0% { transform: scale(0.85); opacity: 0.7; }
100% { transform: scale(1.25); opacity: 0; }
}
@keyframes kiosk-bubble {
0%, 8% { opacity: 0; transform: translateY(8px); }
14%, 88% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes kiosk-bar {
0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
50% { transform: scaleY(1); opacity: 1; }
}
@keyframes kiosk-scan {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.kiosk-screen__live::before,
.kiosk-screen__gaze::before,
.kiosk-screen__gaze::after,
.kiosk-chat__bubble,
.kiosk-wave i,
.kiosk-agent::after {
animation: none !important;
}
.kiosk-chat__bubble { opacity: 1; transform: none; }
}
/* === utilities.css === */
/* ==========================================================================
SYNAPSE — Utilities (last layer, may override components)
Deliberately small: reach for a component or layout primitive first.
========================================================================== */
/* Text */
.t-display { font-family: var(--font-display); }
.t-mono { font-family: var(--font-mono); }
.t-micro { font-size: var(--fs-micro); }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
.t-2xl { font-size: var(--fs-2xl); }
.t-3xl { font-size: var(--fs-3xl); }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-primary { color: var(--primary); }
.t-secondary { color: var(--secondary); }
.t-accent { color: var(--accent); }
.t-danger { color: var(--danger); }
.t-success { color: var(--success); }
.t-base { color: var(--text); }
.t-medium { font-weight: var(--weight-medium); }
.t-semibold { font-weight: var(--weight-semibold); }
.t-bold { font-weight: var(--weight-bold); }
.t-caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.t-center { text-align: center; }
.t-start { text-align: start; }
.t-end { text-align: end; }
.t-nowrap { white-space: nowrap; }
.t-balance { text-wrap: balance; }
.t-tabular { font-variant-numeric: tabular-nums; }
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }
.measure-wide { max-width: var(--measure-wide); }
.measure-none { max-width: none; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Media roles — match Google Sites display sizes (not full-bleed by default)
Rules: AR >= ~3 or small square marks → logo/banner; large photos → media--fill */
.media--fill {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.media--contain {
width: auto;
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.img--logo {
height: 2.5rem;
width: auto;
max-width: 12rem;
display: block;
object-fit: contain;
}
.img--logo-lg {
height: 5rem;
width: auto;
max-width: 16rem;
display: block;
object-fit: contain;
margin-inline: auto;
}
.img--badge {
width: 100%;
max-width: 14rem;
height: auto;
display: block;
object-fit: contain;
}
.img--icon {
width: auto;
max-width: min(100%, 32.6875rem); /* ~523px — native isometric icon cap */
height: auto;
display: block;
object-fit: contain;
margin-inline: auto;
}
.img--banner {
width: 100%;
max-width: min(100%, 36rem);
height: auto;
display: block;
margin-inline: auto;
object-fit: contain;
}
.media-frame--contain {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
overflow: visible;
}
.logo-strip img {
height: 2rem;
width: auto;
max-width: 10rem;
object-fit: contain;
opacity: 0.85;
}
/* Spacing */
.mt-0 { margin-block-start: 0; }
.mt-2 { margin-block-start: var(--s-2); }
.mt-3 { margin-block-start: var(--s-3); }
.mt-4 { margin-block-start: var(--s-4); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-8 { margin-block-start: var(--s-8); }
.mt-10 { margin-block-start: var(--s-10); }
.mt-12 { margin-block-start: var(--s-12); }
.mt-16 { margin-block-start: var(--s-16); }
.mb-0 { margin-block-end: 0; }
.mb-4 { margin-block-end: var(--s-4); }
.mb-6 { margin-block-end: var(--s-6); }
.mb-8 { margin-block-end: var(--s-8); }
.mb-12 { margin-block-end: var(--s-12); }
.mi-auto { margin-inline: auto; }
.p-0 { padding: 0; }
.p-4 { padding: var(--s-4); }
.p-6 { padding: var(--s-6); }
.p-8 { padding: var(--s-8); }
/* Display & flex helpers */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid-d { display: grid; }
.hidden { display: none; }
.contents { display: contents; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0; }
.flex-none { flex: none; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.gap-10 { gap: var(--s-10); }
.self-start { align-self: start; }
.self-end { align-self: end; }
.order-first { order: -1; }
.order-last { order: 9; }
/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-none { max-width: none; }
.fit { width: fit-content; }
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.overflow-hidden { overflow: hidden; }
.isolate { isolation: isolate; }
/* Surface */
.bg-panel { background: var(--bg-panel); }
.bg-inset { background: var(--bg-inset); }
.bg-raised { background: var(--bg-raised); }
.bg-none { background: none; }
.border-a { border: 1px solid var(--border); }
.border-t { border-block-start: 1px solid var(--border); }
.border-b { border-block-end: 1px solid var(--border); }
.border-s { border-inline-start: 1px solid var(--border); }
.border-hairline { border-color: var(--border-faint); }
.r-sm { border-radius: var(--r-sm); }
.r-md { border-radius: var(--r-md); }
.r-lg { border-radius: var(--r-lg); }
.r-xl { border-radius: var(--r-xl); }
.r-2xl { border-radius: var(--r-2xl); }
.r-pill { border-radius: var(--r-pill); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.glow { box-shadow: var(--glow-primary); }
.glow-violet { box-shadow: var(--glow-secondary); }
/* List reset */
.list-none { list-style: none; padding: 0; }
.list-none > li { margin: 0; }
/* Responsive visibility */
@media (max-width: 900px) { .hide-md { display: none !important; } }
@media (min-width: 901px) { .show-md { display: none !important; } }
@media (max-width: 620px) { .hide-sm { display: none !important; } }