/* =============================================================================
Personio Design System — Colors, Type & Foundations
Sourced from product-areas/design-system in Personio-Internal/personio-web.
============================================================================= */
/* ---------- Fonts ---------- */
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-RegularItalic.woff2') format('woff2');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-MediumItalic.woff2') format('woff2');
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-Semibold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'FT Regola Neue';
src: url('./fonts/FTRegolaNeue-SemiboldItalic.woff2') format('woff2');
font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-Italic.woff2') format('woff2');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-MediumItalic.woff2') format('woff2');
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-SemiBold.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('./fonts/Inter-SemiBoldItalic.woff2') format('woff2');
font-weight: 600; font-style: italic; font-display: swap;
}
:root {
/* ---------- Primitive color scales ---------- */
/* Brand accent — Personio uses a deep indigo/blurple as the product accent. */
--color-accent-1: #F2F0FF;
--color-accent-2: #E2DEFF;
--color-accent-3: #C5BCFF;
--color-accent-4: #9B8BFF;
--color-accent-5: #6E5BF1; /* primary brand accent */
--color-accent-6: #5847D6;
--color-accent-7: #4133AC;
--color-accent-8: #2D2380;
--color-accent-9: #1B1456;
/* Neutral grays */
--color-gray-0: #FFFFFF;
--color-gray-1: #F8F8FA;
--color-gray-2: #F1F1F4;
--color-gray-3: #E6E6EC;
--color-gray-4: #D1D1DA;
--color-gray-5: #B5B5C2;
--color-gray-6: #8C8C9C;
--color-gray-7: #6A6A7B;
--color-gray-8: #3D3D4E;
--color-gray-9: #14142B; /* brand near-black, "Personio Ink" */
/* Alpha grays (for borders over varied backgrounds) */
--color-gray-3-alpha: rgba(20, 20, 43, 0.06);
--color-gray-4-alpha: rgba(20, 20, 43, 0.10);
--color-gray-5-alpha: rgba(20, 20, 43, 0.14);
--color-gray-6-alpha: rgba(20, 20, 43, 0.22);
--color-gray-7-alpha: rgba(20, 20, 43, 0.32);
/* Semantic palettes */
--color-red-1: #FFF1F1;
--color-red-3: #FFC9C9;
--color-red-5: #E5484D;
--color-red-6: #C53030;
--color-red-7: #9B1C1C;
--color-red-5-alpha: rgba(229, 72, 77, 0.22);
--color-red-6-alpha: rgba(197, 48, 48, 0.30);
--color-green-1: #ECFAF2;
--color-green-3: #B6EBCF;
--color-green-5: #1F9D55;
--color-green-6: #167A41;
--color-yellow-1: #FFF8E1;
--color-yellow-3: #FFE08A;
--color-yellow-5: #E0A100;
--color-yellow-6: #B07E00;
--color-blue-1: #ECF4FF;
--color-blue-3: #B7D5FF;
--color-blue-5: #2E6BE6;
--color-blue-6: #1F4FB3;
/* ---------- Semantic surface tokens ---------- */
--color-surface: #FFFFFF;
--color-surface-raised: #FFFFFF;
--color-surface-sunken: var(--color-gray-1);
--color-surface-overlay: rgba(20, 20, 43, 0.48);
--color-surface-disabled: var(--color-gray-2);
/* Text */
--color-text-primary: var(--color-gray-9);
--color-text-secondary: var(--color-gray-7);
--color-text-tertiary: var(--color-gray-6);
--color-text-disabled: var(--color-gray-5);
--color-text-disabled-alpha: rgba(20, 20, 43, 0.36);
--color-text-on-accent: #FFFFFF;
--color-text-on-negative: #FFFFFF;
--color-text-link: var(--color-accent-6);
--color-text-negative: var(--color-red-6);
--color-text-positive: var(--color-green-6);
/* Borders */
--color-border-subtle: var(--color-gray-3);
--color-border-default: var(--color-gray-4);
--color-border-strong: var(--color-gray-6);
--color-border-focus: var(--color-accent-5);
/* Solid bg / fg pairs (mirrors `colors-solid-bg-*` from button.module.scss) */
--colors-solid-bg-neutral-weak-default: #FFFFFF;
--colors-solid-bg-neutral-weak-hover: var(--color-gray-1);
--colors-solid-bg-neutral-weak-active: var(--color-gray-2);
--colors-solid-bg-neutral-weak-disabled: var(--color-gray-1);
--colors-solid-fg-neutral-weak-primary: var(--color-text-primary);
--colors-solid-fg-neutral-weak-disabled: var(--color-text-disabled);
--color-solid-accent: var(--color-accent-5);
--colors-solid-bg-accent-default: var(--color-accent-5);
--colors-solid-bg-accent-hover: var(--color-accent-6);
--colors-solid-bg-accent-active: var(--color-accent-7);
--colors-solid-bg-accent-disabled: var(--color-accent-2);
--colors-solid-fg-accent-primary: #FFFFFF;
--colors-solid-fg-accent-disabled: #FFFFFFB3;
--colors-solid-bg-negative-strong-default: var(--color-red-5);
--colors-solid-bg-negative-strong-hover: var(--color-red-6);
--colors-solid-bg-negative-strong-active: var(--color-red-7);
--colors-solid-bg-negative-strong-disabled:var(--color-red-3);
--colors-solid-fg-negative-strong-primary: #FFFFFF;
--colors-solid-fg-negative-strong-disabled:#FFFFFFB3;
--colors-solid-bg-negative-weak-default: var(--color-red-1);
--colors-solid-bg-negative-weak-hover: #FFE3E3;
--colors-solid-bg-negative-weak-active: #FFD3D3;
--colors-solid-bg-negative-weak-disabled: #FFF6F6;
--colors-solid-fg-negative-weak-primary: var(--color-red-6);
--colors-ghost-bg-neutral-default: transparent;
--colors-ghost-bg-neutral-hover: rgba(20,20,43,0.06);
--colors-ghost-bg-neutral-active: rgba(20,20,43,0.10);
--colors-ghost-fg-neutral-primary: var(--color-text-secondary);
--colors-ghost-fg-neutral-disabled: var(--color-text-disabled);
--colors-ghost-bg-negative-default: transparent;
--colors-ghost-bg-negative-hover: rgba(229,72,77,0.08);
--colors-ghost-bg-negative-active: rgba(229,72,77,0.16);
--colors-ghost-fg-negative-secondary: var(--color-red-6);
--colors-ghost-fg-negative-disabled: rgba(229,72,77,0.45);
/* Decorative / status surfaces */
--color-bg-info-weak: var(--color-blue-1);
--color-bg-positive-weak: var(--color-green-1);
--color-bg-warning-weak: var(--color-yellow-1);
--color-bg-negative-weak: var(--color-red-1);
--color-bg-accent-weak: var(--color-accent-1);
/* ---------- Spacing primitives (4px grid) ---------- */
--primitive-spacing-0: 0;
--primitive-spacing-1: 2px;
--primitive-spacing-2: 4px;
--primitive-spacing-3: 8px;
--primitive-spacing-4: 12px;
--primitive-spacing-5: 16px;
--primitive-spacing-6: 24px;
--primitive-spacing-7: 32px;
--primitive-spacing-8: 48px;
--primitive-spacing-9: 64px;
--primitive-spacing-10: 96px;
/* Semantic spacing (mirrors $spacing-gap-*, $spacing-padding-* in the repo) */
--spacing-gap-xsmall: 4px;
--spacing-gap-small: 8px;
--spacing-gap-medium: 12px;
--spacing-gap-large: 16px;
--spacing-gap-xlarge: 24px;
--spacing-padding-vertical-small: 6px;
--spacing-padding-vertical-medium: 8px;
--spacing-padding-vertical-large: 12px;
--spacing-padding-horizontal-small: 10px;
--spacing-padding-horizontal-medium: 14px;
--spacing-padding-horizontal-large: 20px;
--spacing-section-small: 32px;
--spacing-section-medium: 48px;
--spacing-section-large: 64px;
--spacing-section-huge: 96px;
--component-accessory-size-small: 16px;
--component-accessory-size-medium: 20px;
--component-accessory-size-large: 24px;
/* ---------- Radii ---------- */
--radius-xsmall: 4px;
--radius-small: 6px;
--radius-medium: 8px;
--radius-large: 12px;
--radius-xlarge: 16px;
--radius-pill: 999px;
/* ---------- Shadows / elevation ---------- */
--shadow-1: 0 1px 2px rgba(20, 20, 43, 0.06),
0 0 0 1px var(--color-gray-3-alpha);
--shadow-2: 0 2px 3px rgba(20, 20, 43, 0.08),
0 0 0 1px var(--color-gray-5-alpha);
--shadow-3: 0 6px 16px rgba(20, 20, 43, 0.10),
0 0 0 1px var(--color-gray-4-alpha);
--shadow-4: 0 16px 40px rgba(20, 20, 43, 0.18),
0 0 0 1px var(--color-gray-5-alpha);
--shadow-focus: 0 0 0 3px rgba(110, 91, 241, 0.32);
/* ---------- Type ----------
Source: https://foundations.personio.design/api/typography/scss
Auto-generated — do not edit manually. Regenerate by hitting that endpoint.
Two font families, semantic split:
FT Regola Neue (600 semibold) → heading-* — structural hierarchy
FT Regola Neue (500 medium) → display-* — editorial / expressive
Inter (400 regular) → subheading-*, body-*, label-*, control-*
Three viewport tiers applied via media queries directly on :root.
All prototypes are responsive by default.
Breakpoints: <576px · ≥576px · ≥992px
*/
--font-family-heading: 'FT Regola Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-family-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-family-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
--font-weights-regular: 400;
--font-weights-medium: 500;
--font-weights-semibold: 600;
/* ── Mobile baseline (<576px) ────────────────────────────────────────────── */
/* heading — FT Regola Neue 600 */
--font-size-heading-huge: 2.75rem; --line-height-heading-huge: 3rem; --tracking-heading-huge: -0.0222em;
--font-size-heading-h1: 2rem; --line-height-heading-h1: 2.25rem; --tracking-heading-h1: -0.0216em;
--font-size-heading-h2: 1.75rem; --line-height-heading-h2: 2rem; --tracking-heading-h2: -0.0209em;
--font-size-heading-h3: 1.5rem; --line-height-heading-h3: 1.75rem; --tracking-heading-h3: -0.0195em;
--font-size-heading-h4: 1.375rem; --line-height-heading-h4: 1.5rem; --tracking-heading-h4: -0.0183em;
--font-size-heading-h5: 1.125rem; --line-height-heading-h5: 1.25rem; --tracking-heading-h5: -0.0143em;
/* display — FT Regola Neue 500 */
--font-size-display-xl: 2.25rem; --line-height-display-xl: 2.75rem; --tracking-display-xl: -0.022em;
--font-size-display-l: 2rem; --line-height-display-l: 2.5rem; --tracking-display-l: -0.0216em;
--font-size-display-m: 1.75rem; --line-height-display-m: 2rem; --tracking-display-m: -0.0209em;
--font-size-display-s: 1.5rem; --line-height-display-s: 1.75rem; --tracking-display-s: -0.0195em;
/* subheading — Inter 400 */
--font-size-subheading-l: 1.5rem; --line-height-subheading-l: 2rem; --tracking-subheading-l: -0.0195em;
--font-size-subheading-s: 1.375rem; --line-height-subheading-s: 1.75rem; --tracking-subheading-s: -0.0183em;
/* body — Inter 400 */
--font-size-body-l: 1.125rem; --line-height-body-l: 1.75rem; --tracking-body-l: -0.0143em;
--font-size-body-m: 1rem; --line-height-body-m: 1.5rem; --tracking-body-m: -0.011em;
/* label — Inter 400 */
--font-size-label-l: 1.125rem; --line-height-label-l: 1.5rem; --tracking-label-l: -0.0143em;
--font-size-label-m: 1rem; --line-height-label-m: 1.25rem; --tracking-label-m: -0.011em;
--font-size-label-s: 0.875rem; --line-height-label-s: 1rem; --tracking-label-s: -0.0062em;
/* control — Inter 400 */
--font-size-control-l: 1rem; --line-height-control-l: 1.5rem; --tracking-control-l: -0.0194em;
--font-size-control-m: 1rem; --line-height-control-m: 1.5rem; --tracking-control-m: -0.0194em;
--font-size-control-s: 0.875rem; --line-height-control-s: 1.25rem; --tracking-control-s: -0.0086em;
/* Easing & motion */
--easing-default: cubic-bezier(0.2, 0, 0, 1);
--easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 320ms;
}
/* =============================================================================
Responsive type overrides — applied globally (all prototypes are responsive)
============================================================================= */
/* ── ≥576px ──────────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
:root {
--font-size-heading-huge: 3.375rem; --line-height-heading-huge: 3.75rem; --tracking-heading-huge: -0.0223em;
--font-size-heading-h1: 2.25rem; --line-height-heading-h1: 2.5rem; --tracking-heading-h1: -0.022em;
--font-size-heading-h2: 1.875rem; --line-height-heading-h2: 2rem; --tracking-heading-h2: -0.0213em;
--font-size-heading-h3: 1.5rem; --line-height-heading-h3: 1.75rem; --tracking-heading-h3: -0.0195em;
--font-size-heading-h4: 1.25rem; --line-height-heading-h4: 1.5rem; --tracking-heading-h4: -0.0167em;
--font-size-heading-h5: 1rem; --line-height-heading-h5: 1.25rem; --tracking-heading-h5: -0.011em;
--font-size-display-xl: 2.625rem; --line-height-display-xl: 3.25rem; --tracking-display-xl: -0.0222em;
--font-size-display-l: 2.25rem; --line-height-display-l: 2.75rem; --tracking-display-l: -0.022em;
--font-size-display-m: 1.875rem; --line-height-display-m: 2.25rem; --tracking-display-m: -0.0213em;
--font-size-display-s: 1.5rem; --line-height-display-s: 1.75rem; --tracking-display-s: -0.0195em;
--font-size-subheading-l: 1.5rem; --line-height-subheading-l: 2rem; --tracking-subheading-l: -0.0195em;
--font-size-subheading-s: 1.25rem; --line-height-subheading-s: 1.75rem; --tracking-subheading-s: -0.0167em;
--font-size-body-l: 1rem; --line-height-body-l: 1.5rem; --tracking-body-l: -0.011em;
--font-size-body-m: 0.875rem; --line-height-body-m: 1.25rem; --tracking-body-m: -0.0062em;
--font-size-label-l: 1rem; --line-height-label-l: 1.25rem; --tracking-label-l: -0.011em;
--font-size-label-m: 0.875rem; --line-height-label-m: 1rem; --tracking-label-m: -0.0062em;
--font-size-label-s: 0.75rem; --line-height-label-s: 1rem; --tracking-label-s: +0.0005em;
--font-size-control-l: 1rem; --line-height-control-l: 1.5rem; --tracking-control-l: -0.0194em;
--font-size-control-m: 0.875rem; --line-height-control-m: 1.25rem; --tracking-control-m: -0.0086em;
--font-size-control-s: 0.75rem; --line-height-control-s: 1rem; --tracking-control-s: -0.005em;
}
}
/* ── ≥992px ──────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
:root {
--font-size-heading-huge: 4rem; --line-height-heading-huge: 4.5rem; --tracking-heading-huge: -0.0223em;
--font-size-heading-h1: 2.5rem; --line-height-heading-h1: 2.75rem; --tracking-heading-h1: -0.0221em;
--font-size-heading-h2: 2rem; --line-height-heading-h2: 2.25rem; --tracking-heading-h2: -0.0216em;
--font-size-heading-h3: 1.5rem; --line-height-heading-h3: 1.75rem; --tracking-heading-h3: -0.0195em;
--font-size-heading-h4: 1.25rem; --line-height-heading-h4: 1.5rem; --tracking-heading-h4: -0.0167em;
--font-size-heading-h5: 1rem; --line-height-heading-h5: 1.25rem; --tracking-heading-h5: -0.011em;
--font-size-display-xl: 3rem; --line-height-display-xl: 3.5rem; --tracking-display-xl: -0.0223em;
--font-size-display-l: 2.5rem; --line-height-display-l: 3rem; --tracking-display-l: -0.0221em;
--font-size-display-m: 2rem; --line-height-display-m: 2.5rem; --tracking-display-m: -0.0216em;
--font-size-display-s: 1.5rem; --line-height-display-s: 1.75rem; --tracking-display-s: -0.0195em;
--font-size-subheading-l: 1.5rem; --line-height-subheading-l: 2rem; --tracking-subheading-l: -0.0195em;
--font-size-subheading-s: 1.25rem; --line-height-subheading-s: 1.75rem; --tracking-subheading-s: -0.0167em;
--font-size-body-l: 1rem; --line-height-body-l: 1.5rem; --tracking-body-l: -0.011em;
--font-size-body-m: 0.875rem; --line-height-body-m: 1.25rem; --tracking-body-m: -0.0062em;
--font-size-label-l: 1rem; --line-height-label-l: 1.25rem; --tracking-label-l: -0.011em;
--font-size-label-m: 0.875rem; --line-height-label-m: 1rem; --tracking-label-m: -0.0062em;
--font-size-label-s: 0.75rem; --line-height-label-s: 1rem; --tracking-label-s: +0.0005em;
--font-size-control-l: 1rem; --line-height-control-l: 1.5rem; --tracking-control-l: -0.0194em;
--font-size-control-m: 0.875rem; --line-height-control-m: 1.25rem; --tracking-control-m: -0.0086em;
--font-size-control-s: 0.75rem; --line-height-control-s: 1rem; --tracking-control-s: -0.005em;
}
}
/* =============================================================================
Semantic element styles
============================================================================= */
html, body {
font-family: var(--font-family-sans);
color: var(--color-text-primary);
background: var(--color-surface-sunken);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ── Display — FT Regola Neue 500 ────────────────────────────────────────── */
.display-xl { font-family: var(--font-family-heading); font-weight: 500; font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); letter-spacing: var(--tracking-display-xl); }
.display-l { font-family: var(--font-family-heading); font-weight: 500; font-size: var(--font-size-display-l); line-height: var(--line-height-display-l); letter-spacing: var(--tracking-display-l); }
.display-m { font-family: var(--font-family-heading); font-weight: 500; font-size: var(--font-size-display-m); line-height: var(--line-height-display-m); letter-spacing: var(--tracking-display-m); }
.display-s { font-family: var(--font-family-heading); font-weight: 500; font-size: var(--font-size-display-s); line-height: var(--line-height-display-s); letter-spacing: var(--tracking-display-s); }
/* ── Headings — FT Regola Neue 600 ──────────────────────────────────────── */
.heading-huge { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-huge); line-height: var(--line-height-heading-huge); letter-spacing: var(--tracking-heading-huge); margin: 0; }
h1, .h1 { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-h1); line-height: var(--line-height-heading-h1); letter-spacing: var(--tracking-heading-h1); margin: 0; }
h2, .h2 { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-h2); line-height: var(--line-height-heading-h2); letter-spacing: var(--tracking-heading-h2); margin: 0; }
h3, .h3 { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-h3); line-height: var(--line-height-heading-h3); letter-spacing: var(--tracking-heading-h3); margin: 0; }
h4, .h4 { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-h4); line-height: var(--line-height-heading-h4); letter-spacing: var(--tracking-heading-h4); margin: 0; }
h5, .h5 { font-family: var(--font-family-heading); font-weight: 600; font-size: var(--font-size-heading-h5); line-height: var(--line-height-heading-h5); letter-spacing: var(--tracking-heading-h5); margin: 0; }
/* ── Subheadings — Inter 400 ────────────────────────────────────────────── */
.subheading-l { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-subheading-l); line-height: var(--line-height-subheading-l); letter-spacing: var(--tracking-subheading-l); }
.subheading-s { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-subheading-s); line-height: var(--line-height-subheading-s); letter-spacing: var(--tracking-subheading-s); }
/* ── Body — Inter 400 ───────────────────────────────────────────────────── */
p, .body-l { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-body-l); line-height: var(--line-height-body-l); letter-spacing: var(--tracking-body-l); margin: 0; }
.body-m { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-body-m); line-height: var(--line-height-body-m); letter-spacing: var(--tracking-body-m); }
/* ── Labels — Inter 400 ─────────────────────────────────────────────────── */
.label-l { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-label-l); line-height: var(--line-height-label-l); letter-spacing: var(--tracking-label-l); }
.label-m { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); letter-spacing: var(--tracking-label-m); }
.label-s { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-label-s); line-height: var(--line-height-label-s); letter-spacing: var(--tracking-label-s); }
/* ── Controls — Inter 400 ───────────────────────────────────────────────── */
.control-l { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-control-l); line-height: var(--line-height-control-l); letter-spacing: var(--tracking-control-l); }
.control-m { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-control-m); line-height: var(--line-height-control-m); letter-spacing: var(--tracking-control-m); }
.control-s { font-family: var(--font-family-sans); font-weight: 400; font-size: var(--font-size-control-s); line-height: var(--line-height-control-s); letter-spacing: var(--tracking-control-s); }
code, .mono { font-family: var(--font-family-mono); font-size: 0.8125rem; background: var(--color-gray-2); padding: 1px 6px; border-radius: var(--radius-xsmall); }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: none; }
/* Underline only inline anchors inside flowing prose, not buttons or styled CTAs */
p > a:hover,
.prose a:hover { text-decoration: underline; }
/* ============================================================================
Personio.ai — site styles (dark by default, light variant via .light)
Built on top of colors_and_type.css. Dark mode is NOT in the base system,
so it's defined here, mapping the same semantic tokens to dark equivalents.
============================================================================ */
:root {
/* ==========================================================================
PERSONIO BRAND PALETTE — sourced from foundations.personio.design
Primary brand accent is #6E5BF1 indigo/blurple. "Personio Ink" is #14142B.
========================================================================== */
--p-ink: #14142B; /* Personio Ink — brand near-black */
--p-ink-2: #3D3D4E;
--p-ink-3: #6A6A7B;
/* Indigo scale — primary brand */
--p-indigo-1: #F2F0FF;
--p-indigo-2: #E2DEFF;
--p-indigo-3: #C5BCFF;
--p-indigo-4: #9B8BFF;
--p-indigo-5: #6E5BF1; /* PRIMARY brand accent */
--p-indigo-6: #5847D6;
--p-indigo-7: #4133AC;
--p-indigo-8: #2D2380;
--p-indigo-9: #1B1456;
/* Editorial supporting palette */
--p-purple: #6E5BF1; /* alias to brand indigo */
--p-purple-2: #8779F5;
--p-purple-deep: #1B1456;
--p-violet: #9B8BFF;
/* Deep brand palette (sourced from Figma "Homepage Revamp H1 2026") */
--p-deep-purple: #6A2183; /* rgb(106,33,131) — primary deep brand */
--p-deep-magenta: #8821AB; /* rgb(136,33,171) */
--p-deep-blue: #0C3A97; /* rgb(12,58,151) — deep editorial blue */
--p-bright-purple: #A533CC; /* rgb(165,51,204) — accent flourish */
--p-deep-teal: #0E5957; /* deeper than --p-teal */
--p-deep-lavender: #4B3FA8; /* deep lavender bridge tone */
--p-pink: #FF7AB6; /* warm gradient lift */
--p-pink-soft: #FFE8F2;
--p-pink-warm: #FBE9F2;
--p-coral: #FF6B6B;
--p-orange: #FF8A3D;
--p-amber: #FFB800;
--p-mint: #6EE7C7; /* AI / data accent */
--p-teal: #0F766E;
--p-teal-glow: #14B8A6;
--p-cream: #FAF7F2;
--p-cream-2: #F2EDE5;
/* Accent system — lavender primary (the actual brand) */
--p-accent: #6E5BF1; /* primary lavender */
--p-accent-strong: #4B3FA8; /* deep lavender */
--p-accent-soft: #EFEBFF; /* tinted lavender wash */
--p-accent-glow: rgba(110, 91, 241, 0.32);
/* Surfaces */
--p-bg: #FBFAFF; /* barely-tinted lavender white */
--p-bg-2: #F4F2FB; /* warmer lavender wash */
--p-bg-3: #FFFFFF;
--p-bg-4: #ECE8FA;
--p-line: rgba(45, 35, 128, 0.10);
--p-line-strong: rgba(45, 35, 128, 0.18);
--p-text: #14142B;
--p-text-2: #3D3D4E;
--p-text-3: #6A6A7B;
--p-text-faint: #B5B5C2;
--p-radius-s: 8px;
--p-radius-m: 12px;
--p-radius-l: 16px;
--p-radius-xl: 24px;
--p-radius-2xl: 32px;
--p-radius-pill: 999px;
--p-shadow-card: 0 0.5px 2px rgba(20,20,43,0.06), 0 2px 16px -4px rgba(20,20,43,0.08);
--p-shadow-card-lg: 0 1px 3px rgba(20,20,43,0.05), 0 24px 48px -16px rgba(27,20,86,0.18);
--p-shadow-glow-indigo: 0 0 0 1px rgba(110,91,241,0.18), 0 24px 80px -16px rgba(110,91,241,0.40);
--p-shadow-glow-pink: 0 0 0 1px rgba(255,122,182,0.18), 0 24px 80px -16px rgba(255,122,182,0.40);
--p-shadow-btn: 0 6px 6px -6px rgba(0,0,0,0.2);
--p-shadow-glow: 0 0 0 1px rgba(106,33,131,0.18), 0 12px 60px -10px var(--p-accent-glow);
--p-easing: cubic-bezier(0.2, 0, 0, 1);
}
html, body {
background: var(--p-bg);
color: var(--p-text);
font-family: var(--font-family-sans);
margin: 0;
overflow-x: hidden;
font-feature-settings: 'ss03' 1;
}
/* Dark mode — brand-aligned indigo dark */
html.dark, html.dark body {
--p-bg: #0E0B2A;
--p-bg-2: #1A1742;
--p-bg-3: #221E52;
--p-bg-4: #2D2780;
--p-line: rgba(180, 165, 255, 0.10);
--p-line-strong: rgba(180, 165, 255, 0.22);
--p-text: #F5F4FF;
--p-text-2: #B5B3D0;
--p-text-3: #8A88A6;
--p-text-faint: #565470;
--p-accent: #C68FE0; /* lifted deep purple for dark mode legibility */
--p-accent-strong: #E2BCF1;
--p-accent-soft: #3B1B4A;
--p-accent-glow: rgba(180, 150, 255, 0.50);
--p-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px rgba(0,0,0,0.5);
--p-shadow-card-lg: 0 1px 0 rgba(255,255,255,0.06) inset, 0 32px 80px rgba(0,0,0,0.6);
--p-shadow-glow-indigo: 0 0 0 1px rgba(155,139,255,0.24), 0 24px 80px -16px rgba(155,139,255,0.55);
}
/* ---------- Page width + section rhythm ---------- */
.page-w { max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
.page-w-narrow { max-width: 880px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 720px) {
.page-w, .page-w-narrow { padding-inline: 20px; }
}
/* ---------- Type helpers (extending base) ---------- */
.eyebrow {
font-family: var(--font-family-sans);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow .dot {
width: 6px; height: 6px; border-radius: 999px;
background: var(--p-accent);
box-shadow: 0 0 12px var(--p-accent-glow);
}
.gradient-text {
background: linear-gradient(100deg, var(--p-text) 0%, var(--p-deep-blue) 30%, var(--p-deep-purple) 65%, var(--p-bright-purple) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-indigo {
background: linear-gradient(135deg, var(--p-deep-blue) 0%, var(--p-deep-purple) 50%, var(--p-bright-purple) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.muted { color: var(--p-text-2); }
.faint { color: var(--p-text-3); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 20px;
border-radius: var(--p-radius-s);
font-family: var(--font-family-sans);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.1px;
border: 1px solid transparent;
cursor: pointer;
transition: all 200ms var(--p-easing);
text-decoration: none;
white-space: nowrap;
position: relative;
overflow: hidden;
}
/* Primary CTA — true black, like the prototype.
The shimmer is achieved by an inset highlight ring (not a gradient bg). */
.btn-primary {
background: var(--p-ink);
color: #fff;
box-shadow:
inset 0 0 10px 0 rgba(255,255,255,0.20),
inset 0 1px 1px 0 rgba(255,255,255,0.25),
var(--p-shadow-btn);
}
html.dark .btn-primary {
background: var(--p-accent);
color: #fff;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-accent {
background: var(--p-accent);
color: #fff;
box-shadow: inset 0 0 10px 0 rgba(255,255,255,0.18), inset 0 1px 1px 0 rgba(255,255,255,0.22), var(--p-shadow-btn);
}
.btn-accent:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost {
background: transparent;
color: var(--p-text);
border-color: var(--p-line-strong);
}
.btn-ghost:hover { background: rgba(20,20,20,0.04); }
html.dark .btn-ghost:hover { background: rgba(255,255,255,0.06); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
/* ---------- Cards ---------- */
.card {
background: var(--p-bg-2);
border: 1px solid var(--p-line);
border-radius: var(--p-radius-l);
padding: 24px;
position: relative;
}
.card-raised {
background: var(--p-bg-3);
box-shadow: var(--p-shadow-card);
border-color: var(--p-line);
}
/* ---------- Pill (now soft-rect 6px — design system has no pill) ---------- */
.pill {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 12px;
border-radius: 6px;
border: 1px solid var(--p-line);
background: var(--p-bg-2);
font-size: 12px;
color: var(--p-text-2);
font-weight: 500;
}
.pill-accent {
border-color: var(--p-accent-soft);
background: var(--p-accent-soft);
color: var(--p-accent);
}
html.dark .pill-accent { color: var(--p-accent-strong); }
/* ---------- Section spacing ---------- */
.section { padding: 120px 0; position: relative; }
.section-sm { padding: 80px 0; }
@media (max-width: 720px) {
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
}
/* ---------- Generative ambient backdrop ---------- */
.aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.aurora::before, .aurora::after {
content: '';
position: absolute;
width: 900px; height: 900px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.30;
animation: drift 28s ease-in-out infinite alternate;
}
.aurora::before {
background: radial-gradient(circle, var(--p-accent) 0%, transparent 60%);
top: -300px; left: -200px;
}
.aurora::after {
background: radial-gradient(circle, var(--p-deep-purple) 0%, transparent 60%);
bottom: -300px; right: -200px;
animation-delay: -14s;
}
html.dark .aurora::before, html.dark .aurora::after { opacity: 0.55; }
@keyframes drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(80px, 40px) scale(1.1); }
100% { transform: translate(-40px, 60px) scale(0.95); }
}
.grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, var(--p-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--p-line) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
pointer-events: none;
z-index: 0;
}
/* ---------- Backdrop modes ---------- */
html[data-bg="grid"] .aurora { display: none; }
html[data-bg="clean"] .aurora,
html[data-bg="clean"] .grid-bg { display: none; }
/* ---------- Hero mark ---------- */
.hero-mark-wrap {
position: relative;
width: 160px; height: 160px;
display: flex; align-items: center; justify-content: center;
}
.hero-mark {
position: relative;
z-index: 2;
width: 140px; height: 140px;
border-radius: 16px;
background: linear-gradient(180deg, var(--p-accent) 0%, var(--p-accent-strong) 100%);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 24px 64px -18px color-mix(in oklab, var(--p-accent) 60%, transparent),
0 8px 24px -8px color-mix(in oklab, var(--p-accent-strong) 50%, transparent),
inset 0 1px 0 rgba(255,255,255,0.20);
animation: hero-mark-breathe 5s ease-in-out infinite;
}
.hero-mark-halo {
position: absolute;
/* Halo is 2.4x the wrap, centered on the logo */
width: 380px; height: 380px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
color-mix(in oklab, var(--p-accent) 55%, transparent) 0%,
color-mix(in oklab, var(--p-accent) 22%, transparent) 30%,
transparent 65%);
filter: blur(28px);
z-index: 1;
pointer-events: none;
animation: hero-mark-halo 5s ease-in-out infinite;
}
@keyframes hero-mark-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
@keyframes hero-mark-halo {
0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@media (max-width: 720px) {
.hero-mark-wrap { width: 128px; height: 128px; }
.hero-mark { width: 108px; height: 108px; border-radius: 14px; }
.hero-mark-halo { width: 280px; height: 280px; }
}
/* ---------- Reduced motion ---------- */
.no-motion *, .no-motion *::before, .no-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* ---------- Scroll fade-in ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--p-easing), transform 700ms var(--p-easing); }
.reveal.in { opacity: 1; transform: translateY(0); }
.no-motion .reveal { opacity: 1; transform: none; }
/* ---------- Marquee ---------- */
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-track {
display: flex; gap: 64px;
width: max-content;
animation: marquee 38s linear infinite;
}
.no-motion .marquee-track { animation: none; }
/* ---------- Cursor blink ---------- */
@keyframes blink { 50% { opacity: 0; } }
.cursor { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 2px; animation: blink 1s step-end infinite; }
/* ---------- Glow ring ---------- */
.glow-ring {
position: relative;
}
.glow-ring::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--p-accent) 0%, transparent 30%, transparent 70%, var(--p-deep-purple) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
}
/* ---------- Hairline divider ---------- */
.hr-faint { height: 1px; background: var(--p-line); border: 0; margin: 0; }
/* ---------- Subtle SVG icon defaults ---------- */
.lucide { width: 18px; height: 18px; stroke-width: 1.75; }
/* ---------- Code/prompt blocks ---------- */
.prompt-mono {
font-family: var(--font-family-mono);
font-size: 13px;
letter-spacing: 0;
color: var(--p-text-2);
}
/* ---------- Selection ---------- */
::selection { background: var(--p-accent); color: white; }
/* ---------- AI avatar mark — brand conic gradient ---------- */
.ai-avatar {
background: conic-gradient(from 220deg at 60% 40%, var(--p-deep-blue) 0%, var(--p-deep-purple) 30%, var(--p-bright-purple) 55%, var(--p-mint) 80%, var(--p-deep-blue) 100%);
border-radius: 999px;
flex-shrink: 0;
position: relative;
box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.ai-avatar::after {
content: '';
position: absolute;
inset: 22%;
background: rgba(255,255,255,0.85);
border-radius: 999px;
filter: blur(2px);
opacity: 0.55;
}
html.dark .ai-avatar::after { background: rgba(255,255,255,0.7); opacity: 0.4; }
/* ---------- Sidebar/floating chat avoidance ---------- */
.fixed-bottom-right { position: fixed; right: 24px; bottom: 24px; z-index: 60; }
/* ============================================================================
Narrative chapters — pin-and-scrub primitives & per-chapter visuals
============================================================================ */
/* ---------- Section anatomy ---------- */
/* Each chapter is a tall outer container that ScrollTrigger pins.
Inside, .ch-stage is a viewport-sized canvas where the choreography happens. */
.ch {
position: relative;
width: 100%;
}
.ch-stage {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ch-stage--bleed { padding: 0; }
.ch-frame {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
/* Chapter index plate — fixed position bottom-left, updated by JS */
.ch-meta {
position: fixed;
left: 32px;
bottom: 32px;
z-index: 40;
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
display: flex;
align-items: center;
gap: 12px;
pointer-events: none;
mix-blend-mode: difference;
color: rgba(245,245,245,0.85);
}
.ch-meta__num {
font-variant-numeric: tabular-nums;
color: rgba(245,245,245,0.95);
}
.ch-meta__rail {
width: 120px;
height: 1px;
background: rgba(245,245,245,0.2);
position: relative;
overflow: hidden;
}
.ch-meta__rail::after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: var(--progress, 0%);
background: rgba(245,245,245,0.85);
transition: width 100ms linear;
}
/* Section dot rail — one dot per chapter excluding the hero. */
.ch-meta__title {
white-space: nowrap;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
}
.ch-meta__dots {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 4px;
border-left: 1px solid var(--p-line, rgba(245,245,245,0.18));
margin-left: 4px;
padding-left: 12px;
}
.ch-meta__dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(245, 245, 245, 0.22);
transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.ch-meta__dot--past {
background: rgba(245, 245, 245, 0.55);
}
.ch-meta__dot--active {
background: var(--p-accent-strong, #E2BCF1);
transform: scale(1.5);
box-shadow: 0 0 10px var(--p-accent-glow, rgba(165, 51, 204, 0.55));
}
html.light .ch-meta__dot { background: rgba(20, 20, 43, 0.18); }
html.light .ch-meta__dot--past { background: rgba(20, 20, 43, 0.50); }
html.light .ch-meta__dot--active {
background: var(--p-accent, #6A2183);
box-shadow: 0 0 10px var(--p-accent-glow, rgba(106, 33, 131, 0.32));
}
/* ---------- Chapter 1: Cold open (pulse + mark) ---------- */
.ch1b-stage {
background:
radial-gradient(ellipse 80% 60% at 50% 50%, var(--p-bg-2) 0%, var(--p-bg) 70%);
box-sizing: border-box;
flex-direction: column;
gap: clamp(6px, 1.5vh, 18px);
isolation: isolate;
overflow: hidden;
position: relative;
padding-top: clamp(60px, 8vh, 88px); /* clear sticky nav */
padding-bottom: clamp(12px, 2vh, 32px);
}
html.dark .ch1b-stage {
background:
radial-gradient(ellipse 80% 60% at 50% 50%, #1B0F2E 0%, var(--p-bg) 75%);
}
/* --- Nebula blobs (slow drifting glow) --- */
.ch1b-nebula {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.ch1b-nebula__blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
mix-blend-mode: multiply;
animation: ch1b-drift 22s ease-in-out infinite alternate;
}
html.dark .ch1b-nebula__blob {
mix-blend-mode: screen;
opacity: 0.35;
}
.ch1b-nebula__blob--a {
width: 640px; height: 640px;
left: 10%; top: 8%;
background: var(--p-deep-purple);
animation-delay: 0s;
}
.ch1b-nebula__blob--b {
width: 580px; height: 580px;
right: 8%; top: 18%;
background: var(--p-deep-blue);
animation-delay: -8s;
}
.ch1b-nebula__blob--c {
width: 520px; height: 520px;
left: 38%; bottom: 6%;
background: var(--p-bright-purple);
animation-delay: -14s;
opacity: 0.32;
}
@keyframes ch1b-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,-30px) scale(1.1); }
100% { transform: translate(-30px,20px) scale(0.95); }
}
/* --- Mark + ambient glow (no chrome — just the glyph) --- */
.ch1b-mark-wrap {
position: relative;
width: clamp(140px, 24vh, 280px);
height: clamp(140px, 24vh, 280px);
display: grid; place-items: center;
z-index: 2;
flex-shrink: 0;
}
/* The glyph itself, oversized, no background */
.ch1b-mark {
position: relative;
width: clamp(84px, 14vh, 150px);
height: clamp(84px, 14vh, 150px);
display: grid; place-items: center;
z-index: 4;
filter: drop-shadow(0 12px 40px rgba(165, 51, 204, 0.65));
animation: ch1b-mark-heartbeat 3.6s ease-in-out 0.3s 3 both;
}
/* Heartbeat: slow grow-shrink with the glow swelling on each beat.
Plays 3 times then settles back to rest state. */
@keyframes ch1b-mark-heartbeat {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 12px 40px rgba(165, 51, 204, 0.55));
}
50% {
transform: scale(1.08);
filter: drop-shadow(0 12px 60px rgba(165, 51, 204, 1));
}
}
/* Outer ambient glow — soft, large, breathing */
.ch1b-mark__halo {
position: absolute;
width: clamp(200px, 34vh, 340px);
height: clamp(200px, 34vh, 340px);
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
circle at 50% 50%,
rgba(165, 51, 204, 0.55) 0%,
rgba(165, 51, 204, 0.30) 28%,
rgba(76, 71, 247, 0.18) 50%,
transparent 70%
);
filter: blur(36px);
z-index: 1;
animation: ch1b-halo-pulse 5.5s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes ch1b-halo-pulse {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}
/* Inner core glow — tighter, brighter pulse on the same beat (slight offset) */
.ch1b-mark-wrap::before {
content: '';
position: absolute;
width: clamp(130px, 22vh, 220px);
height: clamp(130px, 22vh, 220px);
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
circle at 50% 50%,
rgba(231, 76, 145, 0.55) 0%,
rgba(165, 51, 204, 0.35) 35%,
transparent 70%
);
filter: blur(20px);
z-index: 2;
animation: ch1b-core-pulse 5.5s ease-in-out infinite;
animation-delay: -0.4s; /* offset for layered breathing */
will-change: transform, opacity;
}
@keyframes ch1b-core-pulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.94); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.10); }
}
/* (radar pulse rings removed — replaced by layered glow pulse) */
/* --- Content --- */
.ch1b-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 760px;
padding-inline: 24px;
}
.ch1b-eyebrow {
display: inline-flex;
align-items: baseline;
gap: 14px;
font-family: var(--font-family-heading);
font-weight: 700;
font-size: 13px;
line-height: 1;
letter-spacing: 1.5px;
color: var(--p-text-2);
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
position: relative;
margin-bottom: clamp(10px, 2vh, 20px);
}
.ch1b-eyebrow::after {
content: none;
}
.ch1b-eyebrow__num {
font-variant-numeric: tabular-nums;
color: var(--p-text);
font-weight: 800;
}
.ch1b-eyebrow__sep {
color: var(--p-line);
font-weight: 400;
letter-spacing: 0;
}
.ch1b-eyebrow__loc {
color: var(--p-text-3);
font-weight: 600;
}
.ch1b-eyebrow__dot {
display: none;
}
.ch1b-headline {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, min(5.4vw, 8.5vh), 72px);
line-height: 1.04;
letter-spacing: -0.028em;
margin-bottom: clamp(10px, 2vh, 20px);
text-wrap: balance;
color: var(--p-text);
}
.ch1b-headline .ch1b-clause {
display: inline-block;
white-space: nowrap;
}
.ch1b-headline .ch1b-word {
display: inline-block;
}
/* Soften the second clause — colour only, no gradient or style shift */
.ch1b-headline .ch1b-clause:nth-child(2) .ch1b-word {
color: var(--p-text-2);
}
.ch1b-sub {
font-size: clamp(15px, 1.8vh, 17px);
line-height: 1.5;
color: var(--p-text-2);
max-width: 56ch;
margin: 0 auto clamp(12px, 2.5vh, 24px);
text-wrap: pretty;
}
.ch1b-meta {
display: inline-flex;
align-items: center;
gap: clamp(16px, 2.5vw, 28px);
padding: clamp(10px, 1.8vh, 18px) clamp(18px, 2.5vw, 28px);
border: 1px solid var(--p-line);
border-radius: 16px;
background: color-mix(in oklab, var(--p-bg) 75%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-family-sans);
font-size: clamp(11px, 1.3vh, 12px);
color: var(--p-text-3);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ch1b-meta__cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 1.4;
gap: 2px;
}
.ch1b-meta__num {
display: block;
font-family: var(--font-family-heading);
font-size: clamp(18px, 2.6vh, 22px);
font-weight: 600;
color: var(--p-text);
letter-spacing: -0.01em;
}
.ch1b-meta__label {
display: block;
font-family: var(--font-family-body);
font-size: clamp(11px, 1.3vh, 12px);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--p-text-3);
}
.ch1b-meta__sep {
width: 1px; height: 28px;
background: var(--p-line-strong);
}
/* --- Scroll cue --- */
.ch1b-cue {
position: absolute;
bottom: 32px; left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--font-family-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-text-3);
z-index: 3;
}
.ch1b-cue__line {
width: 1px; height: 36px;
background: linear-gradient(180deg, var(--p-text-3) 0%, transparent 100%);
animation: ch1b-cue-line 1.8s ease-in-out infinite;
}
@keyframes ch1b-cue-line {
0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
}
/* --- Hero logo ribbon — pinned to the bottom of the purple/indigo stage --- */
.ch1b-logos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 18px 0 18px 0;
border-top: 1px solid color-mix(in oklab, var(--p-text-3) 30%, transparent);
background: color-mix(in oklab, var(--p-bg) 30%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ch1b-logos .ch-logo-strip { width: 100%; max-width: none; }
.ch1b-logos .ch-logo-track { gap: 56px; }
.ch1b-logos .ch-logo-track .ch-logo-item { height: 22px; opacity: 0.55; }
.ch1b-logos .ch-logo-track span {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: color-mix(in oklab, var(--p-text-2) 70%, transparent);
text-transform: uppercase;
white-space: nowrap;
}
html.dark .ch1b-logos {
border-top-color: rgba(255, 255, 255, 0.10);
}
html.dark .ch1b-logos .ch-logo-track span {
color: rgba(255, 255, 255, 0.55);
}
/* Nudge the scroll cue above the ribbon */
.ch1b-cue {
bottom: 96px;
}
@media (max-width: 720px) {
.ch1b-mark-wrap { width: 340px; height: 340px; }
.ch1b-mark, .ch1b-pulse { width: 180px; height: 180px; border-radius: 50%; }
.ch1b-mark__halo { width: 320px; height: 320px; }
.ch1b-mark-wrap::before { width: 220px; height: 220px; }
.ch1b-meta { gap: 18px; padding: 14px 18px; flex-wrap: wrap; justify-content: center; }
.ch1b-meta__sep { display: none; }
}
/* ---------- Chapter 1.5: Manifesto interstitial ---------- */
.ch-manifesto {
/* Quiet beat between ch1 and ch2 — no pin, generous breathing room */
min-height: 92vh;
background: var(--p-bg);
}
.manifesto-stage {
background: var(--p-bg);
height: auto;
min-height: 92vh;
padding: clamp(80px, 14vh, 160px) 32px;
display: flex;
align-items: center;
justify-content: center;
}
.manifesto {
position: relative;
max-width: 760px;
width: 100%;
padding-left: 32px;
}
@media (max-width: 720px) {
.ch-manifesto { min-height: 0; }
.manifesto-stage {
min-height: 0;
padding: 96px 20px 80px;
}
.manifesto { padding-left: 20px; }
.manifesto__intro { margin-bottom: 36px; }
.manifesto__hero { margin-bottom: 36px; }
.manifesto__close { margin-bottom: 40px; }
}
/* Vertical accent rule on the left — draws as user scrolls */
.manifesto__accent {
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
var(--p-accent) 30%,
var(--p-accent) 70%,
transparent 100%);
transform-origin: top center;
box-shadow: 0 0 16px var(--p-accent-glow);
}
.manifesto__eyebrow {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
margin-bottom: 36px;
}
.manifesto__intro {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.4;
letter-spacing: -0.012em;
color: var(--p-text-2);
margin-bottom: 48px;
text-wrap: pretty;
}
.manifesto__intro em {
font-style: italic;
color: var(--p-text);
font-weight: 500;
}
.manifesto__hero {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(40px, 5.4vw, 68px);
line-height: 1.04;
letter-spacing: -0.024em;
color: var(--p-text);
margin: 0 0 48px;
text-wrap: balance;
}
.manifesto__hero-accent {
background: linear-gradient(135deg, #6a2183 0%, #a533cc 50%, #d97a5a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: italic;
position: relative;
}
.manifesto__close {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: clamp(18px, 1.9vw, 22px);
line-height: 1.5;
color: var(--p-text-2);
max-width: 620px;
margin-bottom: 56px;
text-wrap: pretty;
}
.manifesto__sig {
display: flex;
align-items: center;
gap: 14px;
}
.manifesto__sig-line {
height: 1px;
width: 48px;
background: var(--p-line-strong);
}
.manifesto__sig-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.manifesto__sig-name {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 14px;
color: var(--p-text);
letter-spacing: -0.005em;
}
.manifesto__sig-role {
font-family: var(--font-family-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p-text-3);
}
/* ---------- Chapter 2: The decade ---------- */
.ch2-stage {
background: var(--p-bg);
flex-direction: column;
align-items: stretch;
justify-content: center;
padding: 0;
isolation: isolate;
}
.ch2-head {
text-align: center;
padding: clamp(56px, 8vh, 96px) 32px 0;
margin-bottom: 56px;
position: relative;
z-index: 2;
}
.ch2-head h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.06;
letter-spacing: -0.022em;
margin-bottom: 16px;
}
/* The rail is the viewport for the horizontally-scrolling strip.
The strip is taller than the rail and contains the centered track + cards. */
.ch2-rail {
position: relative;
height: 520px;
width: 100%;
overflow: hidden;
}
.ch2-strip {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
align-items: stretch;
padding: 0 64px;
will-change: transform;
}
/* The horizontal track sits at exactly 50% of the strip's height. */
.ch2-track {
position: absolute;
top: 50%;
left: 0; right: 0;
height: 2px;
background: var(--p-line);
transform: translateY(-1px);
z-index: 1;
}
.ch2-track__filled {
position: absolute;
top: 0; left: 0; bottom: 0;
width: var(--progress, 0%);
background: linear-gradient(90deg, #0c3a97 0%, #6a2183 50%, #a533cc 100%);
box-shadow: 0 0 24px var(--p-accent-glow);
border-radius: 4px;
}
.ch2-milestone {
flex-shrink: 0;
width: 320px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 16px;
}
/* Card slot — top half for even items, bottom half for odd items.
Both slots are anchored to the centered track. */
.ch2-milestone__card {
position: absolute;
left: 16px; right: 16px;
padding: 18px 22px;
background: var(--p-bg-3);
border: 1px solid var(--p-line);
border-radius: 8px;
box-shadow: var(--p-shadow-card);
opacity: 0.55;
transform: translateY(8px);
transition: opacity 400ms var(--p-easing), transform 500ms var(--p-easing), border-color 400ms var(--p-easing), box-shadow 500ms var(--p-easing);
}
.ch2-milestone--top .ch2-milestone__card {
bottom: calc(50% + 32px);
}
.ch2-milestone--bottom .ch2-milestone__card {
top: calc(50% + 32px);
}
.ch2-milestone[data-active="true"] .ch2-milestone__card {
opacity: 1;
transform: translateY(0);
border-color: var(--p-indigo-3);
box-shadow: var(--p-shadow-card), 0 24px 60px -24px var(--p-accent-glow);
}
.ch2-milestone__year {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p-text-3);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
font-variant-numeric: tabular-nums;
}
.ch2-milestone__tag {
font-size: 9.5px;
padding: 3px 8px;
border-radius: 4px;
background: var(--p-indigo-1);
color: var(--p-indigo-7);
border: 1px solid var(--p-indigo-2);
letter-spacing: 0.14em;
}
.ch2-milestone__title {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 17px;
line-height: 1.25;
letter-spacing: -0.012em;
margin-bottom: 8px;
color: var(--p-text);
}
.ch2-milestone__body {
font-size: 13px;
line-height: 1.55;
color: var(--p-text-2);
}
/* Dot on the rail — every milestone gets one, centered on the track. */
.ch2-milestone__dot {
position: absolute;
top: 50%;
left: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-radius: 999px;
background: var(--p-bg);
border: 2px solid var(--p-indigo-3);
z-index: 3;
transition: all 400ms var(--p-easing);
}
.ch2-milestone[data-active="true"] .ch2-milestone__dot {
background: var(--p-indigo-5);
border-color: var(--p-bg);
box-shadow:
0 0 0 4px var(--p-bg),
0 0 0 6px var(--p-indigo-5),
0 0 24px var(--p-accent-glow);
}
/* Leader: thin line connecting dot to card */
.ch2-milestone__leader {
position: absolute;
left: 50%;
width: 1px;
background: var(--p-line-strong);
z-index: 2;
opacity: 0;
transition: opacity 400ms var(--p-easing);
}
.ch2-milestone[data-active="true"] .ch2-milestone__leader { opacity: 1; }
.ch2-milestone--top .ch2-milestone__leader {
bottom: 50%;
height: 32px;
}
.ch2-milestone--bottom .ch2-milestone__leader {
top: 50%;
height: 32px;
}
/* Highlight (Aurio acquisition / Profitability) — deeper brand color */
.ch2-milestone.is-highlight .ch2-milestone__card {
background:
linear-gradient(180deg, rgba(106, 33, 131, 0.22) 0%, rgba(12, 58, 151, 0.18) 100%),
var(--p-bg-3);
border-color: var(--p-indigo-3);
}
.ch2-milestone.is-highlight .ch2-milestone__tag {
background: linear-gradient(135deg, #0c3a97, #6a2183);
border-color: transparent;
color: white;
}
.ch2-milestone.is-highlight[data-active="true"] .ch2-milestone__dot {
background: #6a2183;
box-shadow: 0 0 0 4px var(--p-bg),
0 0 0 7px #6a2183,
0 0 32px rgba(106, 33, 131, 0.6);
}
/* ---------- Chapter 2: Era system — fast-track history, dwell on AI ---------- */
/* History-era milestones: smaller, dimmer, condensed — flash past during phase 1 */
.ch2-milestone--history { width: 200px; }
.ch2-milestone--history .ch2-milestone__card {
padding: 12px 16px;
background: color-mix(in oklab, var(--p-bg-3) 65%, transparent);
border-color: color-mix(in oklab, var(--p-line) 60%, transparent);
filter: saturate(0.7);
}
.ch2-milestone--history .ch2-milestone__title {
font-size: 13.5px;
margin-bottom: 4px;
}
.ch2-milestone--history .ch2-milestone__body {
font-size: 11.5px;
line-height: 1.45;
color: var(--p-text-3);
/* Truncate to 2 lines so history cards stay compact */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ch2-milestone--history .ch2-milestone__year { font-size: 10px; margin-bottom: 6px; }
.ch2-milestone--history .ch2-milestone__tag { font-size: 8.5px; }
.ch2-milestone--history .ch2-milestone__dot { width: 10px; height: 10px; }
.ch2-milestone--history[data-active="true"] .ch2-milestone__card {
/* Active history cards are visible but not loud */
opacity: 0.8;
transform: translateY(0);
}
/* AI-era milestones: full size, full saturation, breathing room */
.ch2-milestone--ai { width: 360px; }
.ch2-milestone--ai .ch2-milestone__card {
padding: 22px 26px;
}
.ch2-milestone--ai[data-active="true"] .ch2-milestone__card {
border-color: var(--p-accent);
box-shadow:
var(--p-shadow-card),
0 32px 80px -28px var(--p-accent-glow),
0 0 0 1px color-mix(in oklab, var(--p-accent) 30%, transparent);
}
/* Era divider — sits inline between last history card and first AI card */
.ch2-era-divider {
flex-shrink: 0;
width: 280px;
align-self: center;
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
position: relative;
z-index: 3;
opacity: 0.35;
transition: opacity 600ms var(--p-easing);
}
.ch2-era-divider[data-active="true"] { opacity: 1; }
.ch2-era-divider__line {
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--p-accent) 50%,
transparent 100%);
}
.ch2-era-divider__label {
font-family: var(--font-family-heading);
font-weight: 600;
font-style: italic;
font-size: 14px;
color: var(--p-accent-strong);
letter-spacing: -0.01em;
white-space: nowrap;
text-shadow: 0 0 24px var(--p-accent-glow);
}
/* Floating "AI era" banner — appears in the corner once we cross into the AI era */
.ch2-ai-banner {
position: absolute;
top: 24px;
right: 32px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 6px;
background: color-mix(in oklab, var(--p-accent) 18%, var(--p-bg-2));
border: 1px solid color-mix(in oklab, var(--p-accent) 40%, transparent);
font-family: var(--font-family-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p-accent-strong);
opacity: 0;
transform: translateY(-6px);
transition: opacity 400ms var(--p-easing), transform 400ms var(--p-easing);
}
.ch2-ai-banner[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.ch2-ai-banner__dot {
width: 6px; height: 6px; border-radius: 999px;
background: var(--p-accent);
box-shadow: 0 0 8px var(--p-accent-glow);
animation: ch2BannerPulse 1.6s ease-in-out infinite;
}
@keyframes ch2BannerPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ---------- Chapter 2.5: Lifecycle interstitial ---------- */
.ch-lifecycle {
background: var(--p-bg);
}
.lifecycle-stage {
background: var(--p-bg);
height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
/* === ARC LAYOUT (v5) === */
.lifecycle-stage--arc {
display: block;
position: relative;
}
/* === CH6-STYLE LAYOUT (v13) — scrollytelling reveal: header sits above the
ring/UI block inside column 1; shifter moves up so header clears and
the ring/UI center in the viewport === */
/* Stage = positioning context for the absolute-positioned shifter.
Stage is 100vh tall and acts as the viewport window. */
.lifecycle-stage--arc {
display: block;
position: relative;
overflow: hidden;
}
/* Shifter — taller than the stage so it has a "header zone" above the
"ring zone". GSAP shifts it up to swap which zone is visible. */
.lc-shifter {
position: absolute;
top: 0;
left: 0;
right: 0;
/* Stage height (100vh) + header zone height (220px) so the bottom 100vh
of the shifter contains just the ring/UI, perfectly centered when
translated up by 220px. */
height: calc(100vh + 220px);
display: block;
will-change: transform;
}
/* Header — lives INSIDE column 1 of the grid (stacked above .lc-left)
so it feels like part of the two-column layout, not a separate row
sitting above both columns. The dark right backdrop runs full-height
alongside it. */
.lc-header {
grid-column: 1;
grid-row: 1;
align-self: start;
/* Top padding clears the fixed nav (68px) — was 56px which let the eyebrow
hide behind the nav once the section pinned. */
padding: 96px 56px 32px 64px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 8px;
z-index: 5;
box-sizing: border-box;
}
.lc-header .eyebrow {
margin-bottom: 4px;
}
.lc-header .lifecycle-h2 {
font-size: clamp(32px, 4.2vw, 56px);
line-height: 1.06;
letter-spacing: -0.024em;
margin: 0;
text-wrap: balance;
max-width: 100%;
}
.lc-header .lifecycle-intro {
font-size: 15px;
line-height: 1.5;
color: var(--p-text-2);
margin: 8px 0 0 0;
max-width: 100%;
}
/* 2-column layout — fills the full shifter (header zone + 100vh content
zone). Column 1 stacks: header (auto height, ~220px) on top of .lc-left.
Column 2 spans both rows so the dark backdrop runs the full height,
making the header feel like it's sitting inside the left column of a
single unified two-column composition. */
.lc-layout {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 0.78fr 1.22fr;
grid-template-rows: auto 1fr;
width: 100%;
z-index: 1;
}
.lc-left {
grid-column: 1;
grid-row: 2;
position: relative;
padding: 0;
overflow: visible;
min-width: 0;
min-height: 0;
}
/* Right column — Ch6-style anchored backdrop (solid bg-2 + quiet purple glow).
Splits into a caption rail (left, hugs inside-left of the ring) + product-UI
stage (right, pushed further right for breathing space from the ring). */
.lc-right {
grid-column: 2;
grid-row: 1 / span 2;
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155, 139, 255, 0.16) 0%, transparent 70%),
var(--p-bg-2);
overflow: hidden;
isolation: isolate;
display: grid;
/* Wider rail (sits inside the right semicircle) + 1fr for product UI */
grid-template-columns: minmax(260px, 360px) 1fr;
align-items: stretch;
}
.lc-right-rail {
position: relative;
z-index: 2;
/* Padding nudges caption rightward off the divider so it sits inside the
right semicircle, hugging its inside-left curve. */
padding: 64px 32px 64px 80px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.lc-right-stage {
position: relative;
min-width: 0;
overflow: visible;
}
/* === Full-circle selector — anchored to the column divider (the boundary
between .lc-left and .lc-right), vertically centered on the stage.
Left half is active arc + dots/labels; right half is dashed watermark. */
.lc-ring {
position: absolute;
/* Centered exactly on the column divider (39%) and vertically centered in
the content row (now that the header strip is above it). */
left: 39%;
top: 50%;
transform: translate(-50%, -50%);
width: clamp(380px, 56vh, 540px);
height: clamp(380px, 56vh, 540px);
pointer-events: none;
z-index: 4;
overflow: visible;
}
.lc-ring__svg {
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 60px color-mix(in oklab, var(--p-purple) 30%, transparent));
}
.lc-arc__progress {
transition: stroke-dashoffset 500ms var(--p-easing);
}
/* Detail caption — sits inside the RIGHT semicircle, hugging its inside-left
curve. White text on the dark backdrop. */
.lc-arc-detail {
position: relative;
min-height: 200px;
max-width: 320px;
}
.lc-arc-detail__panel {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity 500ms var(--p-easing), transform 500ms var(--p-easing);
pointer-events: none;
}
.lc-arc-detail__panel[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.lc-arc-detail__eyebrow {
font-family: var(--font-family-heading);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 12px;
}
.lc-arc-detail__title {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(20px, 1.9vw, 26px);
letter-spacing: -0.015em;
line-height: 1.18;
color: #fff;
margin-bottom: 10px;
}
.lc-arc-detail__body {
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
max-width: 300px;
}
/* Product UI screens inside the right column STAGE — mirrors Ch6 cross-fade.
Pushed further right for breathing space from the ring. */
.lc-right-stage .lc-screen {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(20px) scale(0.985);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
display: flex;
align-items: center;
justify-content: center;
}
.lc-right-stage .lc-screen[data-active="true"] {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Glass frame — pushed further right so it doesn't clash with the ring. */
.lc-right-stage .lc-glass {
position: absolute;
/* ~10% smaller than the previous sizing; shrunk evenly toward the center. */
top: 18%;
bottom: 10%;
left: 17%;
right: 1%;
width: auto;
aspect-ratio: auto;
border-radius: 32px 0 0 32px;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
box-shadow:
0 2px 16px -4px rgba(0, 0, 0, 0.10),
0 0.5px 2px 0 rgba(0, 0, 0, 0.08),
inset 0 0 8px 2px rgba(255, 255, 255, 0.12),
inset 0 0.5px 0 0 rgba(255, 255, 255, 0.20);
overflow: hidden;
/* Inner padding creates a visible glass frame around the screenshot.
The screenshot lives inside .lc-glass__crop which clips the pan. */
padding: 16px 0 16px 16px;
isolation: isolate;
transform: translateX(20px);
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lc-right-stage .lc-screen[data-active="true"] .lc-glass {
transform: translateX(0);
}
/* Inner crop container — sits inside the glass's padding, has its own
rounded corners on the left, and clips the oversized screenshot as it
translates left. This is what makes the pan look like the screenshot
is scrolling *inside* the glass frame. */
.lc-right-stage .lc-glass__crop {
position: relative;
width: 100%;
height: 100%;
border-radius: 16px 0 0 16px;
overflow: hidden;
isolation: isolate;
}
.lc-right-stage .lc-glass__shot {
display: block;
/* Render the screenshot at its NATURAL aspect ratio inside the crop:
height fills the crop (so the FULL vertical extent of the UI shows
top to bottom — Ch6 mirror), width follows aspect (wider than the
crop). The crop's overflow:hidden clips the right overhang; the JS
pan translates this element left to scroll the hidden right side
into view. */
height: 100%;
width: auto;
max-width: none;
object-fit: fill;
object-position: 0 0;
border-radius: 0;
transform: translateX(0);
will-change: transform;
}
/* Crop hack removed — first three stage screenshots now use pre-cropped
source images (sidebar trimmed in the file itself). */
/* === DEPRECATED ARC LAYOUT REMNANTS — hidden, kept for cache safety === */
.lc-arc-header,
.lc-arc-right,
.lc-arc-stage-bg,
.lc-arc-screens,
.lc-arc-copy { display: none !important; }
.lifecycle-copy {
position: relative;
padding: 80px 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.lifecycle-h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.04;
letter-spacing: -0.024em;
color: var(--p-text);
text-wrap: balance;
transition: font-size 500ms var(--p-easing), opacity 500ms var(--p-easing), margin 500ms var(--p-easing);
}
.lifecycle-copy[data-compact="true"] .lifecycle-h2 {
font-size: clamp(28px, 2.8vw, 36px);
opacity: 0.7;
margin-bottom: 0;
}
.lifecycle-intro {
font-size: 17px;
line-height: 1.55;
color: var(--p-text-2);
max-width: 480px;
transition: opacity 400ms var(--p-easing), max-height 500ms var(--p-easing), margin 500ms var(--p-easing);
overflow: hidden;
}
.lifecycle-copy[data-compact="true"] .lifecycle-intro {
opacity: 0;
max-height: 0;
margin: 0;
}
.lifecycle-copy[data-compact="true"] .eyebrow {
opacity: 0.5;
transition: opacity 400ms var(--p-easing);
}
.lifecycle-detail {
position: relative;
margin-top: 16px;
min-height: 200px;
border-top: 1px solid var(--p-line);
padding-top: 28px;
}
.lifecycle-detail__panel {
position: absolute;
top: 28px;
left: 0;
right: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity 500ms var(--p-easing), transform 500ms var(--p-easing);
pointer-events: none;
}
.lifecycle-detail__panel[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.lifecycle-detail__word {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(36px, 4vw, 48px);
line-height: 1.05;
letter-spacing: -0.024em;
background: linear-gradient(135deg, #fff 0%, #d8c2f0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
}
.lifecycle-detail__body {
font-size: 15px;
line-height: 1.55;
color: var(--p-text-2);
max-width: 440px;
}
.lifecycle-detail__panel--idle {
position: absolute;
top: 28px;
opacity: 0;
}
.lifecycle-detail__panel--idle[data-active="true"] {
opacity: 0.6;
transform: translateY(0);
}
.lifecycle-detail__hint {
font-family: var(--font-family-mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--p-text-3);
}
.lifecycle-stepper {
display: flex;
gap: 8px;
margin-top: 32px;
}
.lifecycle-stepper__dot {
width: 32px;
height: 2px;
border-radius: 2px;
background: var(--p-line);
transition: background 400ms var(--p-easing), transform 400ms var(--p-easing);
}
.lifecycle-stepper__dot[data-passed="true"] {
background: color-mix(in oklab, var(--p-accent) 60%, var(--p-line));
}
.lifecycle-stepper__dot[data-active="true"] {
background: var(--p-accent);
transform: scaleY(2);
}
/* ---- Right column: glass-framed product UI swap ---- */
.lc-screens {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lc-screen {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(12px) scale(0.985);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
pointer-events: none;
}
.lc-screen[data-active="true"] {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Glass frame — borrows the Ch6 spec but bounded (not bleeding off the edge) */
.lc-glass {
width: min(100%, 760px);
aspect-ratio: 1792 / 1120;
border-radius: 24px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
box-shadow:
0 30px 80px -20px rgba(0,0,0,0.5),
0 2px 16px -4px rgba(0, 0, 0, 0.10),
inset 0 0 8px 2px rgba(255, 255, 255, 0.10),
inset 0 0.5px 0 0 rgba(255, 255, 255, 0.22),
0 60px 120px -40px color-mix(in oklab, var(--p-purple) 40%, transparent);
overflow: hidden;
position: relative;
padding: 14px;
isolation: isolate;
}
.lc-glass__shot {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
display: block;
border-radius: 12px;
}
.lc-screen[data-stage="pay"] .lc-glass__shot,
.lc-screen[data-stage="develop"] .lc-glass__shot {
object-position: -600px 0;
}
.lc-glass__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family-mono);
font-size: 13px;
letter-spacing: 0.06em;
color: var(--p-text-3);
text-transform: uppercase;
}
.lc-screen--idle .lc-glass {
background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 720px) {
.lifecycle-stage {
height: auto;
min-height: 100vh;
}
.lc-arc-copy {
position: static;
padding: 24px;
}
.lc-arc {
position: relative;
width: 100%;
height: 220px;
}
.lc-arc-screens {
position: relative;
top: auto;
right: auto;
transform: none;
width: calc(100% - 48px);
margin: 24px;
}
.lc-arc-detail {
position: relative;
bottom: auto;
right: auto;
width: calc(100% - 48px);
margin: 0 24px 24px;
}
.lc-glass { width: 100%; }
}
/* ---- Mobile lifecycle: stacked cards (replaces the desktop arc/pin) ---- */
.ch-lifecycle--mobile { background: var(--p-bg); }
.lifecycle-stage--mobile {
height: auto;
min-height: 0;
display: block;
padding: 96px 20px 64px;
background: var(--p-bg);
}
.lc-mobile {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.lc-mobile__head {
display: flex;
flex-direction: column;
gap: 14px;
}
.lc-mobile__head .lifecycle-h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(28px, 6.4vw, 36px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--p-text);
margin: 0;
text-wrap: balance;
}
.lc-mobile__head .lifecycle-intro {
font-size: 15px;
line-height: 1.55;
color: var(--p-text-2);
margin: 0;
max-width: 420px;
}
.lc-mobile__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
counter-reset: lc;
}
.lc-mobile__card {
position: relative;
border: 1px solid var(--p-line);
border-radius: 16px;
background: color-mix(in oklab, var(--p-bg) 92%, var(--p-text) 8%);
padding: 20px 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
transition: border-color 200ms var(--p-easing);
}
.lc-mobile__card:hover { border-color: var(--p-line-strong); }
.lc-mobile__index {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--p-accent-strong);
text-transform: uppercase;
}
.lc-mobile__copy {
display: flex;
flex-direction: column;
gap: 8px;
}
.lc-mobile__word {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 22px;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--p-text);
}
.lc-mobile__title {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 15px;
line-height: 1.35;
color: var(--p-accent-strong);
letter-spacing: -0.005em;
}
.lc-mobile__body {
font-size: 14.5px;
line-height: 1.55;
color: var(--p-text-2);
margin: 0;
}
.lc-mobile__shot {
margin: 4px -20px 0;
border-top: 1px solid var(--p-line);
background: rgba(255, 255, 255, 0.02);
}
.lc-mobile__shot img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: top center;
max-height: 280px;
}
/* ---- ch-2 mobile: vertical timeline, no pin/scrub ---- */
.ch-2--mobile { height: auto; }
.ch2-mobile-stage {
padding: clamp(80px, 12vh, 120px) 20px clamp(56px, 8vh, 80px);
background: var(--p-bg);
width: 100%;
box-sizing: border-box;
}
.ch2-mobile-stage .ch2-head {
padding: 0;
margin-bottom: 40px;
}
.ch2-mobile-list {
position: relative;
padding-left: 20px;
border-left: 2px solid var(--p-indigo-3);
display: flex;
flex-direction: column;
gap: 20px;
max-width: 540px;
margin: 0 auto;
}
.ch2-mobile-item { position: relative; }
.ch2-mobile-item__dot {
position: absolute;
left: -27px;
top: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--p-indigo-5);
border: 2px solid var(--p-bg);
}
.ch2-mobile-item--ai .ch2-mobile-item__dot {
background: var(--p-accent);
box-shadow: 0 0 8px var(--p-accent-glow);
}
.ch2-mobile-item__card {
padding: 16px 18px;
background: var(--p-bg-3);
border: 1px solid var(--p-line);
border-radius: 8px;
box-shadow: var(--p-shadow-card);
}
.ch2-mobile-item--ai .ch2-mobile-item__card {
border-color: color-mix(in oklab, var(--p-accent) 30%, var(--p-line));
}
.ch2-mobile-item.is-highlight .ch2-mobile-item__card {
background:
linear-gradient(180deg, rgba(106, 33, 131, 0.22) 0%, rgba(12, 58, 151, 0.18) 100%),
var(--p-bg-3);
border-color: var(--p-indigo-3);
}
/* ---------- Chapter 3: The shift ---------- */
.ch3-stage { background: var(--p-bg); position: relative; }
.ch3-grid, .ch3-particles {
position: absolute;
inset: 0;
pointer-events: none;
}
.ch3-grid {
background-image:
linear-gradient(to right, var(--p-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--p-line) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 75%);
}
.ch3-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1100px;
padding-inline: 24px;
margin: 0 auto;
}
.ch3-content h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(36px, 5.2vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: 24px;
color: var(--p-text);
}
.ch3-content h2 .ch3-word {
display: inline-block;
opacity: 1;
transform: translateY(0);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
}
.ch3-content h2 .ch3-word.in {
opacity: 1;
transform: translateY(0);
}
.ch3-content h2 .accent {
background: linear-gradient(100deg, var(--p-purple) 0%, var(--p-pink) 60%, var(--p-orange) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ch3-sub {
font-size: 17px;
line-height: 1.55;
color: var(--p-text-2);
max-width: 60ch;
margin: 0 auto;
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--p-easing) 600ms, transform 700ms var(--p-easing) 600ms;
}
.ch3-sub.in { opacity: 1; transform: translateY(0); }
/* ---------- Chapter 4: Meaningful AI ---------- */
/* Painterly background layer — scoped to the right column only, so the
left-hand copy stays on a clean editorial surface. Crossfades per
principle as user scrubs. */
.ch4-right { position: relative; }
.ch4-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.ch4-bg__layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ch4-bg__layer[data-active="true"] {
opacity: 1;
}
html.dark .ch4-bg__layer[data-active="true"] {
opacity: 1;
}
/* Scrim feathers from clean page-bg on the LEFT edge (toward the copy)
into full texture on the right, so the seam reads as a soft transition
rather than a hard column boundary. Pulled back so most of the right
side shows the image at full strength. */
.ch4-bg__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
var(--p-bg) 0%,
color-mix(in oklab, var(--p-bg) 45%, transparent) 12%,
color-mix(in oklab, var(--p-bg) 8%, transparent) 26%,
transparent 38%
);
}
/* Lift the actual product visuals above the bg (don't override position:absolute) */
.ch4-right > .ch4-visual { z-index: 1; }
.ch4-stage {
background: var(--p-bg);
align-items: stretch;
position: relative;
padding: 0;
}
.ch4-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
width: 100%;
height: 100%;
align-items: stretch;
}
.ch4-left {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 64px;
}
.ch4-right {
position: relative;
background: var(--p-bg-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.ch4-principle {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 64px;
opacity: 0;
transform: translateY(40px);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
}
.ch4-principle[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.ch4-principle__num {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-bright-purple, #b478ff);
margin-bottom: 16px;
}
.ch4-principle__h {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.06;
letter-spacing: -0.022em;
margin-bottom: 20px;
}
.ch4-principle__body {
font-size: 17px;
line-height: 1.55;
color: var(--p-text-2);
max-width: 38ch;
}
/* Commitments — concrete promises beneath the principle body. Subordinate
to the body copy: smaller, with an editorial bullet rule and a label /
body pair per item. Reads as "what this means in product." */
.ch4-principle__commitments {
list-style: none;
margin: 28px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--p-line);
display: flex;
flex-direction: column;
gap: 16px;
max-width: 42ch;
}
.ch4-commitment {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ch4-commitment__bullet {
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 9px;
border-radius: 999px;
background: var(--p-accent);
box-shadow: 0 0 8px var(--p-accent-glow);
}
.ch4-commitment__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.ch4-commitment__label {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
color: var(--p-text);
}
.ch4-commitment__body {
font-size: 14px;
line-height: 1.5;
color: var(--p-text-2);
text-wrap: pretty;
}
.ch4-visual {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
opacity: 0;
transform: scale(0.96);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
}
/* Direct img children of a visual fill the available width up to 78vh tall */
.ch4-visual > img {
width: 100%;
height: auto;
max-height: 78vh;
object-fit: contain;
}
.ch4-visual[data-active="true"] { opacity: 1; transform: scale(1); }
.ch4-progress {
position: absolute;
left: 64px; bottom: 48px;
display: flex; flex-direction: row; gap: 10px;
}
.ch4-progress__tick {
width: 28px;
height: 3px;
border-radius: 2px;
background: var(--p-line-strong);
transition: background 300ms var(--p-easing), width 300ms var(--p-easing);
}
.ch4-progress__tick[data-active="true"] {
background: var(--p-accent);
width: 44px;
}
/* ---------- Chapter 5: Built in Europe (sovereignty stack) ---------- */
.ch5-stage {
background: linear-gradient(180deg, var(--p-bg) 0%, var(--p-bg-2) 100%);
flex-direction: column;
gap: 64px;
padding: 80px 32px;
}
.ch5-head {
text-align: center;
max-width: 720px;
}
.ch5-head h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.06;
letter-spacing: -0.022em;
margin-bottom: 16px;
}
.ch5-stack {
position: relative;
width: min(720px, 90vw);
height: 540px;
perspective: 1400px;
perspective-origin: 50% 30%;
}
.ch5-layer {
position: absolute;
inset: 0;
border-radius: 12px;
border: 1px solid var(--p-line);
background: var(--p-bg-3);
box-shadow: var(--p-shadow-card);
display: grid;
place-items: center;
padding: 32px;
opacity: 0;
transform: translateY(60px) translateZ(0px) rotateX(40deg);
transform-style: preserve-3d;
transition: opacity 700ms var(--p-easing), transform 900ms var(--p-easing);
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--p-text);
text-align: center;
backface-visibility: hidden;
}
.ch5-layer[data-active="true"] {
opacity: 1;
}
.ch5-layer__caption {
display: block;
font-family: var(--font-family-sans);
font-weight: 400;
font-size: 13.5px;
line-height: 1.5;
color: var(--p-text-2);
margin-top: 10px;
letter-spacing: 0;
max-width: 36ch;
margin-inline: auto;
}
.ch5-layer__icon {
width: 36px; height: 36px;
display: inline-grid; place-items: center;
background: var(--p-accent-soft);
color: var(--p-accent-strong);
border-radius: 10px;
margin-bottom: 16px;
}
/* ---------- Chapter 6: Capabilities scrub ---------- */
.ch6-stage {
background: var(--p-bg);
align-items: stretch;
padding: 0;
}
.ch6-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
width: 100%;
height: 100%;
}
.ch6-left {
position: relative;
padding: 0 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ch6-eyebrow {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-accent);
margin-bottom: 24px;
}
.ch6-list {
display: flex;
flex-direction: column;
gap: 0;
max-width: 520px;
}
.ch6-item {
padding: 32px 0;
border-top: 1px solid var(--p-line);
cursor: default;
transition: padding-left 300ms var(--p-easing);
position: relative;
}
.ch6-item:last-child { border-bottom: 1px solid var(--p-line); }
.ch6-item__kicker {
font-family: var(--font-family-mono);
font-size: 10.5px;
color: var(--p-text-3);
margin-bottom: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: color 300ms var(--p-easing);
}
.ch6-item__title {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 26px;
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--p-text-2);
transition: color 300ms var(--p-easing);
text-wrap: pretty;
}
.ch6-item__body {
margin-top: 8px;
font-size: 15px;
line-height: 1.55;
color: var(--p-text-3);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 400ms var(--p-easing), opacity 300ms var(--p-easing), margin-top 300ms var(--p-easing);
text-wrap: pretty;
}
.ch6-item[data-active="true"] {
padding-left: 20px;
}
.ch6-item[data-active="true"]::before {
content: '';
position: absolute;
left: 0; top: 32px; bottom: 32px;
width: 2px;
background: var(--p-accent);
}
.ch6-item[data-active="true"] .ch6-item__kicker { color: var(--p-accent); }
.ch6-item[data-active="true"] .ch6-item__title { color: var(--p-text); }
.ch6-item[data-active="true"] .ch6-item__body {
max-height: 240px;
opacity: 1;
margin-top: 14px;
}
.ch6-right {
position: relative;
background: var(--p-bg-2);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ch6-screen {
position: absolute;
inset: 0;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
opacity: 0;
transform: translateY(40px) scale(0.98);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
overflow: hidden;
}
.ch6-screen[data-active="true"] {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---------- Chapter 7: (rebuilt as bento; styles in figma-dark.css) ---------- */
/* ---------- Chapter 8: The horizon ---------- */
.ch8-stage {
background: linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-bg) 60%);
flex-direction: column;
gap: 64px;
padding: 80px 32px;
}
.ch8-head { text-align: center; max-width: 720px; }
.ch8-head h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.06;
letter-spacing: -0.022em;
margin-bottom: 16px;
}
.ch8-roadmap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
width: 100%;
max-width: 1240px;
perspective: 1200px;
}
.ch8-col {
background: var(--p-bg-3);
border: 1px solid var(--p-line);
border-radius: 12px;
padding: 24px;
transform-style: preserve-3d;
transform: rotateX(8deg) translateZ(0px);
transition: transform 600ms var(--p-easing);
opacity: 0;
}
.ch8-col[data-active="true"] {
opacity: 1;
}
.ch8-col__when {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
margin-bottom: 16px;
}
.ch8-col[data-now="true"] {
background: linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-accent-soft) 100%);
border-color: var(--p-accent-glow);
box-shadow: 0 24px 60px -30px var(--p-accent-glow);
}
.ch8-col[data-now="true"] .ch8-col__when {
color: var(--p-accent-strong);
}
.ch8-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ch8-col li {
font-size: 13.5px;
line-height: 1.5;
color: var(--p-text);
padding: 8px 0;
border-top: 1px solid var(--p-line);
display: flex; gap: 8px; align-items: flex-start;
}
.ch8-col li:first-child { border-top: none; padding-top: 0; }
.ch8-close {
text-align: center;
max-width: 720px;
}
.ch8-close__h {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(32px, 4.6vw, 60px);
line-height: 1.04;
letter-spacing: -0.024em;
margin-bottom: 24px;
}
.ch8-close__sub {
font-size: 18px;
line-height: 1.55;
color: var(--p-text-2);
margin-bottom: 32px;
}
.ch8-close__cta {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* ---------- Logo marquee (used inside Ch.7) ---------- */
.ch-logo-strip {
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.ch-logo-track {
display: flex; gap: 64px;
align-items: center;
width: max-content;
animation: marquee 38s linear infinite;
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 22px;
color: var(--p-text-3);
letter-spacing: -0.01em;
white-space: nowrap;
}
.ch-logo-track .ch-logo-item {
display: inline-flex;
align-items: center;
height: 28px;
opacity: 0.6;
transition: opacity 200ms ease;
}
.ch-logo-track .ch-logo-item img {
height: 100%;
width: auto;
display: block;
/* logos already pre-rendered white-on-transparent */
}
.ch-logo-track .ch-logo-item:hover { opacity: 0.9; }
.no-motion .ch-logo-track { animation: none; }
/* ---------- Responsive collapses ---------- */
@media (max-width: 880px) {
.ch4-layout, .ch6-layout { grid-template-columns: 1fr; }
.ch4-right, .ch6-right { display: none; }
.ch8-roadmap { grid-template-columns: 1fr 1fr; }
.ch-meta { display: none; }
}
@media (max-width: 540px) {
.ch8-roadmap { grid-template-columns: 1fr; }
}
/* Reduced motion fallbacks */
.no-motion .ch1-headline__word,
.no-motion .ch3-content h2 .ch3-word,
.no-motion .ch3-sub,
.no-motion .ch4-principle,
.no-motion .ch4-visual,
.no-motion .ch5-layer,
.no-motion .ch6-screen,
.no-motion .ch8-col {
opacity: 1 !important;
transform: none !important;
}
/* ============================================================================
Figma Dark-Section Vocabulary
----------------------------------------------------------------------------
Direct port of the dark sections in the Personio Figma "V4-27-04" homepage:
- Deep purple section (Platform overview): linear-gradient(50,15,61 → 26,8,33)
- Deep blue section (Built for Europe): linear-gradient(10,46,118 → 3,19,38)
Glass cards & components reuse the canonical:
- Light glass: rgba(255,255,255,0.5) + blur(50–80px)
- Dark card: linear-gradient(rgb(83,26,102) → rgb(50,15,61))
- Signature shadow stack (inset highlight + outer drop)
- Border radius scale: 24 / 12 / 6
============================================================================ */
:root {
/* ---- Figma dark-section primitives (rgb verbatim from V42704.jsx) ---- */
--fig-dark-purple-25: rgb(50, 15, 61); /* Platform overview top */
--fig-dark-purple-100: rgb(26, 8, 33); /* Platform overview base */
--fig-card-purple-top: rgb(83, 26, 102); /* Solid purple card top */
--fig-card-purple-bot: rgb(50, 15, 61); /* Solid purple card base */
--fig-dark-blue-0: rgb(10, 46, 118); /* Built for Europe top */
--fig-dark-blue-100: rgb(3, 19, 38); /* Built for Europe base */
--fig-text-on-dark: rgb(255, 255, 255);
--fig-text-on-dark-muted: rgba(255, 255, 255, 0.7);
--fig-link-on-purple: rgb(136, 33, 171); /* magenta accent CTA */
--fig-link-on-blue: rgb(161, 188, 247); /* light-blue accent */
--fig-tag-purple: rgb(106, 33, 131); /* small icon chip bg */
/* Signature shadow used on every card / glass element */
--fig-card-shadow:
0px 2px 16px -4px rgba(0,0,0,0.10),
0px 0.5px 2px 0px rgba(0,0,0,0.08),
inset 0px 0px 8px 2px rgba(255,255,255,0.12),
inset 0px 0.5px 0px 0px rgba(255,255,255,0.20);
--fig-button-shadow:
inset 0px 1px 1px 0px rgba(255,255,255,0.25),
0px 6px 6px -6px rgba(0,0,0,0.20),
inset 0px 0px 10px 0px rgba(255,255,255,0.20);
}
/* ============================================================================
1. Section wrappers
============================================================================ */
.fig-dark {
background: linear-gradient(var(--fig-dark-purple-25) 25%, var(--fig-dark-purple-100) 100%);
color: var(--fig-text-on-dark);
}
.fig-dark--blue {
background: linear-gradient(var(--fig-dark-blue-0) 0%, var(--fig-dark-blue-100) 100%);
}
/* Subtle grain to keep gradient from looking like flat fill */
.fig-dark::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%),
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,0,0,0.40) 0%, transparent 60%);
z-index: 0;
}
.fig-dark > * { position: relative; z-index: 1; }
/* ============================================================================
2. Typography (Figma exact specs, FT Regola Neue throughout)
============================================================================ */
.fig-eyebrow {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: 14px;
line-height: 18px;
letter-spacing: 1.5px;
color: var(--fig-text-on-dark-muted);
text-transform: none; /* Figma already provides spacing */
display: inline-block;
}
.fig-h2 {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: clamp(36px, 4.2vw, 48px);
line-height: 1.083; /* 52/48 */
letter-spacing: -1.2px;
color: var(--fig-text-on-dark);
margin: 0;
}
.fig-h3 {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: 24px;
line-height: 28px;
letter-spacing: -0.4px;
color: var(--fig-text-on-dark);
margin: 0;
}
.fig-h3--small {
font-size: 20px;
line-height: 28px;
letter-spacing: 0;
}
.fig-body {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.1px;
color: var(--fig-text-on-dark-muted);
margin: 0;
}
.fig-stat-num {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: clamp(72px, 9vw, 116px);
line-height: 0.93; /* 108/116 */
letter-spacing: -0.02em;
color: var(--fig-text-on-dark);
font-variant-numeric: tabular-nums;
display: block;
}
/* ============================================================================
3. Glass card — light frosted on dark backdrop
============================================================================ */
.fig-glass {
background-color: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border-radius: 16px;
box-shadow: var(--fig-card-shadow);
padding: 32px;
position: relative;
overflow: hidden;
}
.fig-glass--strong {
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
}
.fig-glass--lite {
background-color: rgba(255, 255, 255, 0.04);
}
/* Solid purple card (e.g. "Launch with confidence" badge cell) */
.fig-card-purple {
background: linear-gradient(var(--fig-card-purple-top) 0%, var(--fig-card-purple-bot) 100%);
border-radius: 16px;
box-shadow: var(--fig-card-shadow);
padding: 32px;
color: var(--fig-text-on-dark);
position: relative;
overflow: hidden;
}
/* ============================================================================
4. Tag chip — 24×24 deep-purple square with icon (Figma signature dot)
============================================================================ */
.fig-chip {
width: 24px;
height: 24px;
border-radius: 6px;
background-color: var(--fig-tag-purple);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: white;
}
.fig-chip svg { width: 14px; height: 14px; }
/* Inline list item w/ chip — used for bullet-style copy in dark cards */
.fig-list { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
.fig-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.1px;
color: var(--fig-text-on-dark);
}
.fig-list li::before {
content: '';
width: 24px; height: 24px;
border-radius: 6px;
background: var(--fig-tag-purple);
flex-shrink: 0;
margin-top: 0;
background-image:
linear-gradient(135deg, transparent 47%, rgba(255,255,255,0.95) 47%, rgba(255,255,255,0.95) 53%, transparent 53%);
background-size: 8px 1.5px;
background-repeat: no-repeat;
background-position: 7px 11px;
/* Render a tiny check via a real svg if you need crisp — fallback shows a dot */
position: relative;
}
.fig-list li::before {
/* Override fallback with proper checkmark rendered via gradient slot */
background:
var(--fig-tag-purple)
url("data:image/svg+xml;utf8,")
no-repeat center / 14px 14px;
}
/* ============================================================================
5. Buttons — sit on dark
============================================================================ */
.fig-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 16px;
border-radius: 12px;
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.1px;
cursor: pointer;
border: none;
text-decoration: none;
transition: transform 180ms var(--p-easing, cubic-bezier(0.2,0,0,1)), filter 180ms;
}
.fig-btn--solid {
background: rgb(20, 20, 20);
color: white;
box-shadow: var(--fig-button-shadow);
}
.fig-btn--glass {
background: rgba(255, 255, 255, 0.10);
color: white;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.18),
inset 0 1px 0 rgba(255,255,255,0.20);
}
.fig-btn--white {
background: rgb(255,255,255);
color: rgb(20,20,20);
box-shadow:
0px 2px 16px -4px rgba(0,0,0,0.20),
inset 0px 0px 24px 0px rgba(255,255,255,0.15),
inset 0px -0.5px 1px 0px rgba(0,0,0,0.10);
}
.fig-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.fig-link {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.1px;
color: var(--fig-link-on-purple);
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
.fig-link::after {
content: '→';
transition: transform 200ms;
}
.fig-link:hover::after { transform: translateX(3px); }
.fig-dark--blue .fig-link { color: var(--fig-link-on-blue); }
/* ============================================================================
6. Glass-circle node (56px) — used in icon bands
============================================================================ */
.fig-node {
width: 56px;
height: 56px;
border-radius: 999px;
background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
border: 1px solid rgba(255,255,255,0.4);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
box-shadow:
0 1px 6px 0 rgba(0,0,0,0.07),
0 0.25px 2px 0 rgba(0,0,0,0.04),
inset 0 0 24px 2px rgba(255,255,255,0.15),
inset 0 1px 1px 0 rgba(255,255,255,0.40);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.fig-node svg { width: 26px; height: 26px; }
.fig-node-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.fig-node-row .fig-rule {
width: 14px;
height: 1px;
background: rgba(255,255,255,0.85);
}
/* ============================================================================
7. Stat tile (used in proof / "less time on HR admin")
============================================================================ */
.fig-stat-tile {
background: linear-gradient(var(--fig-card-purple-top) 0%, var(--fig-card-purple-bot) 100%);
border-radius: 16px;
box-shadow: var(--fig-card-shadow);
padding: 32px;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
position: relative;
overflow: hidden;
}
.fig-stat-tile--ghost {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
.fig-stat-tile__label {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 18px;
line-height: 26px;
letter-spacing: -0.2px;
color: rgba(255,255,255,0.7);
margin-top: 8px;
}
.fig-stat-tile__cite {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 13px;
line-height: 18px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 24px;
}
/* ============================================================================
8. Chapter overrides — Ch5 (Europe) & Ch7 (Proof) using Figma dark vocab
============================================================================ */
/* ---------- CHAPTER 5: Built in Europe ---------- */
.ch5-stage.fig-dark {
background: linear-gradient(var(--fig-dark-blue-0) 0%, var(--fig-dark-blue-100) 100%);
flex-direction: column;
/* Top padding matches centered-section convention (ch7-stage / aiass-header)
so the eyebrow lands at a consistent y-position across sections. */
padding: clamp(80px, 12vh, 140px) 32px clamp(16px, 3vh, 64px);
justify-content: center;
gap: clamp(10px, 2vh, 36px);
overflow: hidden;
height: 100vh;
max-height: 100vh;
box-sizing: border-box;
}
.ch5-stage .ch5-head { text-align: center; max-width: 900px; }
.ch5-stage .ch5-head .fig-h2 {
margin-top: 16px;
}
.ch5-stage .ch5-head .fig-body {
margin-top: 16px;
max-width: 720px;
margin-inline: auto;
}
/* Flag chips above the eyebrow — Figma trust section uses 24×24 EU + UK side-by-side */
.ch5-flag-row {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
width: max-content;
}
.ch5-flag {
width: 24px; height: 24px;
border-radius: 4px;
background: rgb(0, 82, 180);
position: relative;
flex-shrink: 0;
overflow: hidden;
display: inline-block;
}
/* EU: 12 yellow stars in a circle, simplified */
.ch5-flag--eu::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 1px at 50% 22%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 70% 30%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 78% 50%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 70% 70%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 50% 78%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 30% 70%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 22% 50%, rgb(255,204,0) 100%, transparent 100%),
radial-gradient(circle 1px at 30% 30%, rgb(255,204,0) 100%, transparent 100%);
}
/* UK: simplified Union Jack — diagonal + cross overlay on blue */
.ch5-flag--uk::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(45deg, transparent 44%, rgb(255,255,255) 44%, rgb(255,255,255) 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, rgb(255,255,255) 44%, rgb(255,255,255) 56%, transparent 56%);
}
.ch5-flag--uk::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(0deg, transparent 38%, rgb(207,20,43) 38%, rgb(207,20,43) 62%, transparent 62%),
linear-gradient(90deg, transparent 38%, rgb(207,20,43) 38%, rgb(207,20,43) 62%, transparent 62%),
linear-gradient(0deg, transparent 42%, rgb(255,255,255) 42%, rgb(255,255,255) 58%, transparent 58%),
linear-gradient(90deg, transparent 42%, rgb(255,255,255) 42%, rgb(255,255,255) 58%, transparent 58%);
background-blend-mode: normal;
}
/* Override the previous 3D stack — Figma uses cleaner glass tiles in a column */
.ch5-stack {
perspective: none;
width: min(820px, 92vw);
height: auto;
position: relative;
display: flex;
flex-direction: column;
gap: clamp(8px, 1.4vh, 16px);
}
.ch5-layer {
position: relative;
inset: auto;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border-radius: clamp(8px, 1.4vh, 16px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--fig-card-shadow);
padding: clamp(8px, 1.3vh, 18px) clamp(16px, 2.6vw, 26px);
display: block;
place-items: initial;
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.1px;
color: var(--fig-text-on-dark);
text-align: left;
opacity: 0;
transform: translateY(40px);
transition: opacity 600ms var(--p-easing), transform 700ms var(--p-easing);
}
.ch5-layer[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.ch5-layer__inner {
display: flex;
align-items: flex-start;
gap: 16px;
}
.ch5-layer__chip {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--fig-tag-purple);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.ch5-layer__chip svg { width: 16px; height: 16px; color: white; }
.ch5-layer__text { flex: 1; }
.ch5-layer__label {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: clamp(14px, 1.8vh, 18px);
line-height: 1.3;
letter-spacing: -0.2px;
color: var(--fig-text-on-dark);
margin-bottom: 2px;
}
.ch5-layer__caption {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: clamp(12px, 1.5vh, 15px);
line-height: 1.35;
letter-spacing: -0.1px;
color: rgba(255, 255, 255, 0.65);
margin: 0;
display: block;
max-width: none;
}
/* ---------- CHAPTER 7: Customer success bento ---------- */
/* Full-bleed stage matching Ch5/Ch8: no max-width, no duplicate base color.
The body already paints --p-bg; we just add a single subtle top-glow. */
.ch-7 { position: relative; }
.ch7-stage {
flex-direction: column !important;
gap: 64px;
align-items: center;
padding: clamp(80px, 12vh, 140px) clamp(32px, 6vw, 80px) !important;
width: 100%;
box-sizing: border-box;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(106, 33, 131, 0.28) 0%, transparent 70%) !important;
position: relative;
overflow: hidden;
}
/* Constrain the inner content, not the stage itself */
.ch7-stage > * {
width: 100%;
max-width: 1280px;
}
/* Header */
.ch7-header {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(32px, 6vw, 96px);
align-items: end;
}
.ch7-header--centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
max-width: 880px;
margin: 0 auto;
}
.ch7-header--centered .ch7-eyebrow { margin-bottom: 0; }
.ch7-header--centered .ch7-intro { max-width: 56ch; }
.ch7-header--centered .ch7-cta { align-self: center; margin-top: 4px; }
.ch7-eyebrow {
color: var(--p-bright-purple, #C8A0F0);
margin-bottom: 20px;
}
.ch7-h2 {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(40px, 4.6vw, 64px);
line-height: 1.04;
letter-spacing: -0.024em;
color: var(--p-text);
margin: 0;
text-wrap: pretty;
}
.ch7-header__right {
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: 12px;
}
.ch7-intro {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.55;
color: var(--p-text-2);
margin: 0;
max-width: 36ch;
text-wrap: pretty;
}
.ch7-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 15px;
color: var(--p-text);
text-decoration: none;
align-self: flex-start;
transition: gap 200ms ease, opacity 200ms ease;
}
.ch7-cta:hover {
gap: 12px;
opacity: 0.85;
text-decoration: none;
}
/* Bento grid */
.ch7-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(260px, auto);
gap: 16px;
}
.ch7-card--span2 { grid-column: span 2; }
.ch7-card--span3 { grid-column: span 3; }
.ch7-card--span4 { grid-column: span 4; }
.ch7-card {
position: relative;
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
isolation: isolate;
}
/* Quote card */
.ch7-card--quote {
background: linear-gradient(180deg, rgba(106, 33, 131, 0.32) 0%, rgba(74, 18, 95, 0.18) 100%);
border-color: rgba(200, 160, 240, 0.16);
}
.ch7-card__qmark {
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: 96px;
line-height: 0.8;
color: var(--p-bright-purple, #C8A0F0);
opacity: 0.6;
margin-bottom: 8px;
margin-left: -4px;
background: none;
border: none;
width: auto;
height: auto;
padding: 0;
}
.ch7-card__quote {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: clamp(17px, 1.25vw, 20px);
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--p-text);
margin: 0;
flex: 1;
text-wrap: pretty;
}
.ch7-card__cite {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.ch7-card__avatar {
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(135deg, #d97a5a 0%, #6a2183 100%);
flex-shrink: 0;
}
.ch7-card__avatar--alt { background: linear-gradient(135deg, #4B3FA8 0%, #A533CC 100%); }
.ch7-card__name {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 14px;
color: var(--p-text);
letter-spacing: -0.005em;
}
.ch7-card__role {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: 12.5px;
color: var(--p-text-3);
margin-top: 2px;
}
/* Stat card */
.ch7-card--stat {
background: linear-gradient(180deg, rgba(74, 30, 95, 0.20) 0%, rgba(40, 14, 60, 0.10) 100%);
border-color: rgba(200, 160, 240, 0.14);
justify-content: flex-end;
gap: 12px;
padding: 36px;
}
.ch7-card--stat-hero {
background: linear-gradient(160deg, rgba(165, 51, 204, 0.26) 0%, rgba(106, 33, 131, 0.14) 100%);
border-color: rgba(200, 160, 240, 0.24);
}
.ch7-card__stat-num {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(64px, 6.4vw, 92px);
line-height: 0.92;
letter-spacing: -0.035em;
color: var(--p-text);
display: flex;
align-items: baseline;
margin-bottom: 4px;
}
.ch7-card--stat-hero .ch7-card__stat-num {
background: linear-gradient(120deg, #ffffff 0%, #d8b8f0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ch7-card__stat-unit {
font-size: 0.55em;
font-weight: 500;
margin-left: 4px;
-webkit-text-fill-color: initial;
opacity: 0.75;
}
.ch7-card__stat-label {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: 15px;
color: var(--p-text-2);
line-height: 1.4;
text-wrap: pretty;
max-width: 30ch;
}
.ch7-card__stat-cite {
font-family: var(--font-family-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
margin-top: 8px;
opacity: 0.7;
}
/* Quiet logo strip */
.ch7-logos {
margin-top: 16px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ch7-logos__label {
font-family: var(--font-family-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-text-3);
margin-bottom: 24px;
text-align: center;
}
.ch7-stage .ch-logo-strip { width: 100%; max-width: none; }
.ch7-stage .ch-logo-track span {
color: rgba(255, 255, 255, 0.5) !important;
font-family: var(--font-family-heading);
font-weight: 500;
letter-spacing: -0.005em;
}
/* Responsive */
@media (max-width: 1024px) {
.ch7-header { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.ch7-header--centered { align-items: center; text-align: center; }
.ch7-card--span4 { grid-column: span 6; }
.ch7-card--span2 { grid-column: span 3; }
}
@media (max-width: 700px) {
.ch7-bento { grid-template-columns: 1fr; }
.ch7-card--span4, .ch7-card--span3, .ch7-card--span2 { grid-column: span 1; }
.ch7-card { min-height: 220px; }
}
/* ============================================================================
CHAPTER 8 — The horizon (re-skinned to Figma vocabulary)
Mirrors Ch5/Ch7: fig-dark stage, fig-glass cards, fig-eyebrow + fig-h2,
fig-chip bullets, deep-purple "now" lozenge — same content, cohesive shell.
============================================================================ */
.ch8-stage.fig-dark {
flex-direction: column;
gap: 72px;
padding: 160px 64px 180px;
align-items: center;
overflow: hidden;
box-sizing: border-box;
position: relative;
/* Atmospheric background — feathers into lavender page bg at top + bottom */
background:
/* top fade into page lavender */
linear-gradient(180deg, var(--p-bg) 0%, transparent 14%),
/* bottom fade into page lavender */
linear-gradient(0deg, var(--p-bg) 0%, transparent 14%),
/* atmospheric aurora glows */
radial-gradient(ellipse 60% 40% at 20% 25%, rgba(106, 33, 131, 0.45) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 85% 55%, rgba(168, 102, 220, 0.28) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 90%, rgba(83, 26, 102, 0.55) 0%, transparent 65%),
/* core dark gradient */
linear-gradient(180deg, var(--fig-dark-purple-25) 0%, var(--fig-dark-purple-100) 50%, var(--fig-dark-purple-100) 100%) !important;
}
/* Slow-drifting aurora layer */
.ch8-stage.fig-dark::before {
content: "";
position: absolute;
inset: 12% -10% 12% -10%;
pointer-events: none;
background-image:
radial-gradient(ellipse 50% 35% at 30% 30%, rgba(200, 160, 240, 0.18) 0%, transparent 60%),
radial-gradient(ellipse 45% 40% at 75% 75%, rgba(232, 184, 255, 0.10) 0%, transparent 60%);
filter: blur(40px);
animation: ch8AuroraDrift 28s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes ch8AuroraDrift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(2%, -2%) scale(1.05); }
}
.no-motion .ch8-stage.fig-dark::before { animation: none; }
.ch8-stage.fig-dark > * { position: relative; z-index: 1; }
.ch8-stage.fig-dark .ch8-head { text-align: center; max-width: 760px; margin: 0 auto; }
.ch8-stage.fig-dark .ch8-head .fig-h2 { margin-top: 8px; }
.ch8-stage.fig-dark .ch8-head .fig-body { margin: 16px auto 0; }
/* Roadmap: glass cards on dark, no perspective tilt — clean grid like Ch7 stats */
.ch8-stage.fig-dark .ch8-roadmap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
width: 100%;
max-width: 1240px;
perspective: none;
}
.ch8-stage.fig-dark .ch8-col {
/* fig-glass already provides bg/blur/radius/shadow/padding; reset legacy */
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--fig-card-shadow);
padding: 28px;
transform-style: flat;
transform: none;
min-height: 280px;
}
.ch8-stage.fig-dark .ch8-col[data-now="true"] {
/* "Now" card: solid deep-purple — matches fig-card-purple */
background: linear-gradient(var(--fig-card-purple-top) 0%, var(--fig-card-purple-bot) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ch8-stage.fig-dark .ch8-col__when {
font-family: var(--font-family-heading);
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.ch8-stage.fig-dark .ch8-col[data-now="true"] .ch8-col__when {
color: rgba(255, 255, 255, 0.85);
}
.ch8-col__live {
display: inline-block;
width: 8px; height: 8px;
border-radius: 999px;
background: rgb(120, 240, 170);
box-shadow: 0 0 10px rgb(120, 240, 170);
flex-shrink: 0;
}
.ch8-stage.fig-dark .ch8-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.ch8-stage.fig-dark .ch8-col li {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 15px;
line-height: 22px;
letter-spacing: -0.1px;
color: rgba(255, 255, 255, 0.78);
padding: 0;
border-top: none;
display: flex;
gap: 12px;
align-items: flex-start;
}
.ch8-stage.fig-dark .ch8-col[data-now="true"] li {
color: rgba(255, 255, 255, 0.92);
}
/* fig-chip styled bullet — 20×20 deep-purple square, matches Ch5/Ch6 chip */
.ch8-col__bullet {
width: 20px;
height: 20px;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.ch8-col__bullet.is-now {
background-color: var(--fig-tag-purple);
border-color: transparent;
}
.ch8-stage.fig-dark .ch8-col[data-now="true"] .ch8-col__bullet.is-now {
background-color: rgba(255, 255, 255, 0.18);
}
/* Close block — title, sub, CTAs, on dark */
.ch8-stage.fig-dark .ch8-close {
text-align: center;
max-width: 820px;
margin: 24px auto 0;
}
.ch8-stage.fig-dark .ch8-close__h {
margin: 0 0 20px;
letter-spacing: -1px;
/* Pure white for the lead line — max legibility on dark.
!important needed to beat polish.css `.ch8-close__h span` global gradient. */
color: rgb(255, 255, 255) !important;
background: none !important;
-webkit-text-fill-color: rgb(255, 255, 255) !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
/* Beat polish.css `.ch8-close__h span` (deep-blue→pink gradient) which catches
any wrapper spans (incl. editor injection) inside the headline. Force pure
white on every span EXCEPT the explicit accent line. */
.ch8-stage.fig-dark .ch8-close__h span:not(.ch8-close__accent) {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: rgb(255, 255, 255) !important;
-webkit-text-fill-color: rgb(255, 255, 255) !important;
}
/* The accent line — punchy gradient with strong contrast on dark.
!important to beat brand-overlay.css "Sunset Bloom" override. */
.ch8-stage.fig-dark .ch8-close__h .ch8-close__accent,
.ch8-stage.fig-dark .ch8-close__h span.ch8-close__accent {
background: linear-gradient(100deg,
rgb(255, 200, 230) 0%,
rgb(255, 240, 250) 45%,
rgb(220, 200, 255) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
filter: drop-shadow(0 2px 16px rgba(232, 184, 255, 0.4));
}
.ch8-stage.fig-dark .ch8-close__sub {
margin: 0 auto 32px;
max-width: 600px;
color: rgba(255, 255, 255, 0.68);
}
.ch8-stage.fig-dark .ch8-close__cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 920px) {
.ch8-stage.fig-dark { padding: 64px 24px; }
.ch8-stage.fig-dark .ch8-roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.ch8-stage.fig-dark .ch8-roadmap { grid-template-columns: 1fr; }
}
/* ============================================================================
POLISH LAYER — wow-factor visual effects on top of narrative.css
Adds: ambient glows, color washes, animated gradients, depth tricks.
Loaded LAST so it can override prior values.
============================================================================ */
/* ============================================================================
CHAPTER 1 — Cold open: indigo-tinted spreadsheet, glowing brand mark dissolve
============================================================================ */
.ch1-stage {
background: radial-gradient(ellipse 80% 60% at 50% 30%, var(--p-indigo-1) 0%, var(--p-bg) 70%);
isolation: isolate;
overflow: hidden;
}
html.dark .ch1-stage {
background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(45, 35, 128, 0.20) 0%, var(--p-bg) 70%);
}
.ch1-spreadsheet__grid {
background:
linear-gradient(to right, var(--p-line) 1px, transparent 1px) 0 0 / 80px 100%,
linear-gradient(to bottom, var(--p-line) 1px, transparent 1px) 0 0 / 100% 32px,
linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-indigo-1) 100%);
box-shadow: 0 24px 80px -24px var(--p-accent-glow), 0 1px 0 rgba(255,255,255,0.4) inset;
}
.ch1-headline { letter-spacing: -0.028em; }
.ch1-headline__word:nth-child(6) {
/* "spreadsheets." gets the editorial gradient */
background: linear-gradient(100deg, var(--p-text) 0%, var(--p-deep-purple) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ch1-mark {
filter: drop-shadow(0 24px 80px var(--p-accent-glow));
}
.ch1-mark::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--p-indigo-3) 0%, transparent 65%);
opacity: 0.4;
filter: blur(60px);
animation: ch1-pulse 4s ease-in-out infinite alternate;
}
@keyframes ch1-pulse {
from { transform: scale(0.95); opacity: 0.3; }
to { transform: scale(1.05); opacity: 0.55; }
}
.no-motion .ch1-mark::before { animation: none; }
/* ============================================================================
CHAPTER 2 — The decade: deep brand wash + active dot pulse
(rail, dots, cards now defined in narrative.css; this layer adds chrome)
============================================================================ */
.ch2-stage {
background: linear-gradient(180deg, var(--p-bg) 0%, var(--p-indigo-1) 50%, var(--p-bg) 100%);
}
html.dark .ch2-stage {
background: linear-gradient(180deg, var(--p-bg) 0%, rgba(12, 58, 151, 0.18) 50%, var(--p-bg) 100%);
}
.ch2-milestone[data-active="true"] .ch2-milestone__dot {
animation: ch2-pulse 1.8s ease-in-out infinite;
}
@keyframes ch2-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
.no-motion .ch2-milestone[data-active="true"] .ch2-milestone__dot { animation: none; }
/* ============================================================================
CHAPTER 3 — The shift: rich color burst, particles in indigo+pink
============================================================================ */
.ch-3 { isolation: isolate; }
.ch3-stage {
background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(110, 91, 241, 0.16) 0%, var(--p-bg) 60%);
position: relative;
isolation: isolate;
overflow: hidden;
}
html.dark .ch3-stage {
background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(155, 139, 255, 0.28) 0%, var(--p-bg) 60%);
}
.ch3-stage::before {
content: '';
position: absolute;
top: 20%; left: -10%;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(165, 51, 204, 0.6) 0%, transparent 70%);
filter: blur(120px);
opacity: 0.32;
pointer-events: none;
z-index: 0;
animation: ch3-drift-a 18s ease-in-out infinite alternate;
}
.ch3-stage::after {
content: '';
position: absolute;
bottom: 10%; right: -10%;
width: 560px; height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(12, 58, 151, 0.55) 0%, transparent 70%);
filter: blur(120px);
opacity: 0.32;
pointer-events: none;
z-index: 0;
animation: ch3-drift-b 22s ease-in-out infinite alternate;
}
@keyframes ch3-drift-a {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes ch3-drift-b {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-100px, -60px) scale(0.9); }
}
.no-motion .ch3-stage::before, .no-motion .ch3-stage::after { animation: none; }
.ch3-content h2 .accent {
background: linear-gradient(100deg, var(--p-deep-blue) 0%, var(--p-deep-purple) 35%, var(--p-bright-purple) 70%, var(--p-pink) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: ch3-shift 8s ease-in-out infinite alternate;
}
@keyframes ch3-shift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.no-motion .ch3-content h2 .accent { animation: none; }
/* ============================================================================
CHAPTER 4 — Meaningful AI: subtly tinted side, principle visuals lift
============================================================================ */
.ch4-right {
background:
radial-gradient(ellipse 60% 50% at 50% 30%, rgba(110, 91, 241, 0.18) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-indigo-1) 100%);
isolation: isolate;
overflow: hidden;
}
html.dark .ch4-right {
background:
radial-gradient(ellipse 60% 50% at 50% 30%, rgba(155, 139, 255, 0.30) 0%, transparent 70%),
var(--p-bg-2);
}
/* Eyebrow color is set in narrative.css with high-contrast bright purple. */
.ch4-progress__tick[data-active="true"] {
background: linear-gradient(90deg, var(--p-deep-blue), var(--p-deep-purple));
box-shadow: 0 0 12px var(--p-accent-glow);
}
/* Principle visual cards — no rim border, let the visual itself be the focus */
.ch4-visual > div {
position: relative;
}
/* ============================================================================
CHAPTER 5 — Built in Europe: each layer takes a brand color, sovereignty stack glows
============================================================================ */
.ch5-stage {
background:
radial-gradient(ellipse 70% 60% at 50% 40%, rgba(110, 91, 241, 0.18) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg) 0%, var(--p-indigo-1) 100%);
isolation: isolate;
overflow: hidden;
}
html.dark .ch5-stage {
background:
radial-gradient(ellipse 70% 60% at 50% 40%, rgba(155, 139, 255, 0.32) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg) 0%, var(--p-bg-2) 100%);
}
.ch5-layer:nth-child(1) .ch5-layer__icon { background: var(--p-mint); color: var(--p-teal); }
.ch5-layer:nth-child(2) .ch5-layer__icon { background: var(--p-pink-soft); color: var(--p-pink); }
.ch5-layer:nth-child(3) .ch5-layer__icon { background: var(--p-indigo-2); color: var(--p-indigo-7); }
.ch5-layer:nth-child(4) .ch5-layer__icon { background: var(--p-indigo-3); color: var(--p-indigo-8); }
.ch5-layer:nth-child(5) .ch5-layer__icon {
background: linear-gradient(135deg, var(--p-deep-blue), var(--p-deep-purple));
color: white;
}
.ch5-layer {
background: linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-bg-3) 60%, var(--p-indigo-1) 100%);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 24px 60px -20px var(--p-accent-glow),
0 0 0 1px var(--p-line);
}
html.dark .ch5-layer {
background: linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-bg-3) 60%, rgba(110,91,241,0.10) 100%);
}
/* ============================================================================
CHAPTER 6 — Capabilities: active item gets indigo bar + lift
============================================================================ */
.ch6-right {
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(110, 91, 241, 0.18) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-indigo-1) 100%);
position: relative;
overflow: hidden;
isolation: isolate;
}
html.dark .ch6-right {
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(155, 139, 255, 0.32) 0%, transparent 70%),
var(--p-bg-2);
}
.ch6-right::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, var(--p-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--p-line) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 80%);
opacity: 0.6;
pointer-events: none;
}
.ch6-eyebrow {
background: linear-gradient(90deg, var(--p-deep-blue), var(--p-deep-purple));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.ch6-item[data-active="true"]::before {
background: linear-gradient(180deg, var(--p-deep-blue), var(--p-deep-purple));
box-shadow: 0 0 12px var(--p-accent-glow);
}
.ch6-item__num {
font-variant-numeric: tabular-nums;
color: var(--p-deep-purple);
font-weight: 600;
}
.ch6-screen {
box-shadow:
var(--p-shadow-card-lg),
0 0 0 1px var(--p-line),
0 80px 120px -40px var(--p-accent-glow);
}
.ch6-screen[data-active="true"] {
animation: ch6-screen-in 700ms var(--p-easing);
}
@keyframes ch6-screen-in {
from { transform: translateY(40px) scale(0.96) rotateX(8deg); }
to { transform: translateY(0) scale(1) rotateX(0); }
}
/* ============================================================================
/* ============================================================================
CHAPTER 7 — (rebuilt as bento; styles live in figma-dark.css)
============================================================================ */
/* ============================================================================
CHAPTER 8 — Horizon: roadmap cards with brand-colored "now" lozenge
============================================================================ */
.ch8-stage {
background:
radial-gradient(ellipse 100% 80% at 50% 100%, rgba(106, 33, 131, 0.12) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-bg) 60%);
isolation: isolate;
overflow: hidden;
}
html.dark .ch8-stage {
background:
radial-gradient(ellipse 100% 80% at 50% 100%, rgba(110, 91, 241, 0.20) 0%, transparent 70%),
linear-gradient(180deg, var(--p-bg-2) 0%, var(--p-bg) 60%);
}
.ch8-col[data-now="true"] {
background: linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-indigo-1) 100%);
border: 1px solid var(--p-indigo-3);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 24px 60px -20px var(--p-accent-glow);
}
.ch8-col[data-now="true"] .ch8-col__when {
background: linear-gradient(90deg, var(--p-deep-blue), var(--p-deep-purple));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.ch8-close__h {
letter-spacing: -0.026em;
}
.ch8-close__h .gradient-text,
.ch8-close__h span {
background: linear-gradient(100deg, var(--p-deep-blue) 0%, var(--p-deep-purple) 40%, var(--p-bright-purple) 75%, var(--p-pink) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ============================================================================
CHAPTER PROGRESS PLATE — bottom-left, more visible
============================================================================ */
.ch-meta {
mix-blend-mode: normal;
color: var(--p-text-3);
background: color-mix(in oklab, var(--p-bg) 80%, transparent);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--p-line);
}
.ch-meta__num { color: var(--p-text-2); }
.ch-meta__rail { background: var(--p-line-strong); }
.ch-meta__rail::after {
background: linear-gradient(90deg, var(--p-deep-blue), var(--p-deep-purple));
box-shadow: 0 0 8px var(--p-accent-glow);
}
/* ============================================================================
GLOBAL — accent dot in eyebrows shimmers
============================================================================ */
.eyebrow .dot {
background: linear-gradient(135deg, var(--p-deep-blue), var(--p-deep-purple));
box-shadow: 0 0 12px var(--p-accent-glow), 0 0 24px var(--p-accent-glow);
animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes eyebrow-pulse {
0%, 100% { box-shadow: 0 0 12px var(--p-accent-glow), 0 0 24px var(--p-accent-glow); }
50% { box-shadow: 0 0 18px var(--p-accent-glow), 0 0 36px var(--p-accent-glow); }
}
.no-motion .eyebrow .dot { animation: none; }
/* ============================================================================
AI AVATAR — slow rotate for life
============================================================================ */
.ai-avatar {
animation: ai-avatar-spin 16s linear infinite;
position: relative;
}
@keyframes ai-avatar-spin {
from { background-position: 0% 50%; transform: rotate(0deg); }
to { background-position: 100% 50%; transform: rotate(360deg); }
}
.no-motion .ai-avatar { animation: none; }
/* ============================================================================
BUTTONS — primary gets soft brand glow
============================================================================ */
.btn-primary {
position: relative;
background: var(--p-ink);
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 6px 16px -6px rgba(20,20,43,0.4),
0 0 0 1px rgba(20,20,43,0.4);
transition: all 240ms var(--p-easing);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
0 12px 32px -8px var(--p-accent-glow),
0 0 0 1px var(--p-indigo-5);
}
html.dark .btn-primary {
background: linear-gradient(135deg, var(--p-indigo-5), var(--p-indigo-6));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.15),
0 12px 32px -8px var(--p-accent-glow);
}
/* Pill accents pop with subtle gradient */
.pill-accent {
background: linear-gradient(90deg, var(--p-indigo-1), var(--p-pink-soft));
border-color: var(--p-indigo-2);
color: var(--p-indigo-7);
}
html.dark .pill-accent {
background: linear-gradient(90deg, var(--p-indigo-8), var(--p-indigo-7));
border-color: var(--p-indigo-7);
color: var(--p-indigo-2);
}
/* ============================================================================
::SELECTION — brand
============================================================================ */
::selection { background: var(--p-indigo-5); color: white; }
/* =============================================================================
BRAND OVERLAY — Personio cohesion pass
Retokenizes site-wide variables to the official Personio brand:
- Lavender 50 (#A533CC) primary, demoting indigo to product-only
- Tinted light surfaces (Lavender 10 / Fog 10 alternation)
- Locks heading weights to 600 brand spec
- Brand-consistent eyebrows (drops monospace variant)
- Chapter rail → brand dot row
- Ch8 close gradient → Sunset Bloom
Loaded last so it wins specificity by source-order over earlier sheets.
============================================================================= */
/* ---------- 1. CORE PALETTE: Lavender primary ---------- */
:root {
/* Brand canonical colors */
--br-lavender-10: #EDD6F5;
--br-lavender-20: #DBADEB;
--br-lavender-30: #C885E0;
--br-lavender-40: #B85CD6;
--br-lavender-50: #A533CC; /* PRIMARY BRAND */
--br-lavender-60: #8821AB;
--br-lavender-70: #6A2183;
--br-lavender-80: #531A66;
--br-lavender-90: #320F3D;
--br-lavender-95: #1A0821;
--br-flame-50: #FF3700;
--br-flame-40: #FF5F33;
--br-flame-10: #FFD6CC;
--br-fog-10: #F0E8EC;
--br-fog-20: #DCD0D6;
--br-fog-50: #9C7889;
--br-fog-80: #35272D;
--br-water-10: #D5F4F6;
--br-water-50: #40CFD3;
--br-grey-95: #141414;
--br-grey-90: #262626;
/* Override the page's "p-accent" tokens so existing references
ripple to the brand color without touching components. */
--p-accent: var(--br-lavender-50);
--p-accent-strong: var(--br-lavender-60);
--p-accent-soft: var(--br-lavender-10);
--p-accent-glow: rgba(165, 51, 204, 0.32);
/* Demote indigo to "product-only" — keep variables alive for
in-product mocks but they should not appear in marketing chrome. */
--p-deep-blue: var(--br-lavender-90); /* was indigo; now deep brand */
--p-deep-purple: var(--br-lavender-50);
--p-bright-purple: var(--br-lavender-40);
--p-pink: #E64D9F; /* berry 50 */
/* Light-mode surface rhythm: tint variants for alternating sections */
--br-bg-white: #FFFFFF;
--br-bg-lavender: var(--br-lavender-10);
--br-bg-fog: var(--br-fog-10);
--br-bg-warm: #F5F5F4; /* design-system warm off-white */
/* Text on light */
--p-text: #141414;
--p-text-2: #404040;
--p-text-3: #737370;
--p-text-faint: #9E9E9C;
/* Borders that match warm neutrals rather than indigo */
--p-line: rgba(20, 8, 33, 0.08);
--p-line-strong: rgba(20, 8, 33, 0.16);
}
/* Dark mode — keep deep purple ground but anchor in brand */
html.dark, html.dark body {
--p-bg: var(--br-lavender-95);
--p-bg-2: var(--br-lavender-90);
--p-bg-3: var(--br-lavender-80);
--p-bg-4: var(--br-lavender-70);
--p-accent: var(--br-lavender-30); /* lifted for legibility */
--p-accent-strong: var(--br-lavender-20);
--p-accent-soft: rgba(165, 51, 204, 0.18);
--p-accent-glow: rgba(219, 173, 235, 0.45);
--p-line: rgba(237, 214, 245, 0.10);
--p-line-strong: rgba(237, 214, 245, 0.22);
--p-text: #FFFFFF;
--p-text-2: rgba(255, 255, 255, 0.78);
--p-text-3: rgba(255, 255, 255, 0.55);
--p-text-faint: rgba(255, 255, 255, 0.32);
}
/* Light-mode body background — warm off-white per brand */
html:not(.dark), html:not(.dark) body {
--p-bg: #FFFFFF;
--p-bg-2: var(--br-bg-warm);
--p-bg-3: #FFFFFF;
--p-bg-4: var(--br-bg-fog);
background: var(--p-bg);
}
/* ---------- 2. LIGHT-SECTION TINT RHYTHM ----------
Add brand-tinted backgrounds to light chapters so the page reads as
a coordinated set of "garden plots" instead of one long white wash. */
/* Chapter 2 (intelligent platform) — lavender wash */
html:not(.dark) .ch-2 .ch-stage:not(.fig-dark) {
background: linear-gradient(180deg, var(--br-bg-lavender) 0%, #FFFFFF 100%);
}
/* Chapter 3 (mockup) — warm off-white */
html:not(.dark) .ch-3 .ch-stage:not(.fig-dark) {
background: var(--br-bg-warm);
}
/* Chapter 4 (principles) — alternating fog tint per principle */
html:not(.dark) .ch-4 .ch-stage:not(.fig-dark) {
background: linear-gradient(180deg, #FFFFFF 0%, var(--br-bg-fog) 100%);
}
/* Chapter 6 — Water tint to break up the dark-light-dark rhythm */
html:not(.dark) .ch-6 .ch-stage:not(.fig-dark) {
background: linear-gradient(180deg, var(--br-water-10) 0%, #FFFFFF 100%);
}
/* ---------- 3. TYPOGRAPHY: lock to 600 brand weight ---------- */
.fig-h2,
.fig-h1,
h1.fig-h1,
h2.fig-h2,
h3.fig-h3 {
font-weight: 600 !important;
letter-spacing: -0.022em !important;
}
/* Display headings (hero) keep their visual weight but with brand tracking */
.ch1b-headline {
font-weight: 600 !important;
letter-spacing: -0.028em !important;
}
/* ---------- 4. EYEBROW TREATMENT — unify ----------
Brand spec: FT Regola Neue 500, uppercase, tracked.
Drops the monospace 'PRINCIPLE 01' variant and the all-caps mismatched ones. */
.fig-eyebrow,
.eyebrow,
.ch4-principle__num,
.ch1b-eyebrow {
font-family: var(--font-family-heading) !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--br-lavender-50) !important;
display: inline-flex;
align-items: center;
gap: 8px;
}
html.dark .fig-eyebrow,
html.dark .eyebrow,
html.dark .ch4-principle__num {
color: var(--br-lavender-30) !important;
}
/* Hero eyebrow (EST. 2015 / MADE IN MUNICH) — pill chip on lavender aurora */
.ch1b-eyebrow {
color: #FFFFFF !important;
background: rgba(83, 26, 102, 0.55);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 6px 14px !important;
border-radius: 6px !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 22px rgba(50, 15, 61, 0.28);
}
.ch1b-eyebrow__num,
.ch1b-eyebrow__loc {
color: #FFFFFF !important;
font-weight: 600 !important;
}
.ch1b-eyebrow__sep {
color: rgba(255, 255, 255, 0.45) !important;
opacity: 1;
}
/* Hero second clause — vertical "sunset" gradient. Going top→bottom means
every word gets identical color stops, so the line reads as one even
though words are individually animated `display: inline-block` spans. */
.ch1b-headline .ch1b-clause:nth-child(2) .ch1b-word {
background: linear-gradient(
180deg,
var(--br-lavender-20) 0%,
var(--br-lavender-30) 35%,
#FFB89A 75%,
var(--br-flame-40) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Hero stats — borderless, generous, readable on lavender ground */
.ch1b-meta {
background: transparent !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
box-shadow: none !important;
gap: clamp(28px, 4vw, 56px) !important;
margin-top: clamp(8px, 2vh, 24px) !important;
}
.ch1b-meta__cell { gap: 4px !important; }
.ch1b-meta__sep {
background: rgba(50, 15, 61, 0.22) !important;
height: 36px !important;
width: 1px !important;
}
.ch1b-meta__num {
color: var(--br-lavender-95) !important;
font-size: clamp(22px, 3vh, 28px) !important;
font-weight: 600 !important;
}
.ch1b-meta__label {
color: var(--br-lavender-70) !important;
font-size: clamp(11px, 1.3vh, 12px) !important;
letter-spacing: 0.08em !important;
opacity: 0.85;
}
/* Dark mode: lift everything off the deep plum ground */
html.dark .ch1b-meta__num {
color: #FFFFFF !important;
}
html.dark .ch1b-meta__label {
color: var(--br-lavender-20) !important;
opacity: 0.85;
}
html.dark .ch1b-meta__sep {
background: rgba(237, 214, 245, 0.22) !important;
}
/* Hero glyph — bigger, livelier glow movement (no extra rings) */
.ch1b-mark__halo {
animation-duration: 4s !important;
animation-name: ch1b-halo-pulse-strong !important;
}
.ch1b-mark-wrap::before {
animation-duration: 4s !important;
animation-name: ch1b-core-pulse-strong !important;
}
@keyframes ch1b-halo-pulse-strong {
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.82); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes ch1b-core-pulse-strong {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.85); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.20); }
}
/* Principle numbers ("01", "02", "03") in Ch3 list — narrow targeting */
.ch3-row__num,
.ch3-num,
.ch6-item__kicker,
.ch6-eyebrow {
color: var(--br-lavender-50) !important;
font-family: var(--font-family-heading) !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
/* ---------- 5. CHAPTER RAIL → BRAND DOT ROW ----------
Replace the monospace "01 / 08 · COLD OPEN" plate with a clean dot rail. */
.ch-meta {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid var(--p-line) !important;
border-radius: 6px !important;
padding: 10px 16px !important;
font-family: var(--font-family-heading) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
font-size: 11px !important;
color: var(--p-text-2) !important;
gap: 12px !important;
display: flex !important;
align-items: center;
box-shadow: 0 4px 24px -8px rgba(20, 8, 33, 0.12);
}
html.dark .ch-meta {
background: rgba(26, 8, 33, 0.7) !important;
border-color: rgba(237, 214, 245, 0.12) !important;
color: rgba(255,255,255,0.78) !important;
}
.ch-meta__num { color: var(--br-lavender-50) !important; }
html.dark .ch-meta__num { color: var(--br-lavender-30) !important; }
.ch-meta__rail::after {
background: var(--br-lavender-50) !important;
box-shadow: 0 0 12px var(--p-accent-glow) !important;
}
/* ---------- 6. BUTTONS — unify on brand purple ---------- */
.btn-primary {
background: var(--br-lavender-50) !important;
color: #FFFFFF !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 1px 2px rgba(20, 8, 33, 0.20),
0 8px 24px -10px rgba(165, 51, 204, 0.50) !important;
}
.btn-primary:hover {
background: var(--br-lavender-60) !important;
}
/* Floating "Try Personio AI" launcher — brand purple, no indigo gradient */
.chat-launcher,
[class*="chat-launcher"] {
background: var(--br-lavender-50) !important;
}
/* ---------- 7. CH8 CLOSE — Sunset Bloom (deep purple → flame) ----------
Replaces the multi-stop blue-purple-pink gradient with the brand's
official "Sunset Bloom" signature gradient. */
.ch8-close__h .ch8-close__accent,
.ch8-close__h span.ch8-close__accent {
background: linear-gradient(
100deg,
var(--br-lavender-30) 0%,
var(--br-lavender-20) 35%,
#FFB89A 75%,
var(--br-flame-40) 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Ch7 — bento cards live in figma-dark.css; legacy rule removed. */
/* Ch8 "now" lozenge gradient text on the WHEN label */
.ch8-stage.fig-dark .ch8-col[data-now="true"] .ch8-col__when {
color: rgba(255, 255, 255, 0.95) !important;
background: none !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
}
/* Ch8 "now" card — keep brand purple solid, no indigo mix */
.ch8-stage.fig-dark .ch8-col[data-now="true"] {
background: linear-gradient(
180deg,
var(--br-lavender-70) 0%,
var(--br-lavender-80) 100%
) !important;
border: 1px solid rgba(237, 214, 245, 0.18) !important;
}
/* ---------- 8. ICONOGRAPHY ---------- */
.lucide {
stroke-width: 1.6 !important;
}
/* ---------- 9. SELECTION ---------- */
::selection {
background: var(--br-lavender-50);
color: #FFFFFF;
}
/* ---------- 10. NAV — anchor to brand ---------- */
.nav .logo-mark,
.nav__logo {
color: var(--br-lavender-50);
}
.nav a:hover {
color: var(--br-lavender-50);
}
/* ---------- 11. CH5 / CH7 / CH8 dark stage tokens — anchor to brand ---------- */
:root {
--fig-dark-purple-25: var(--br-lavender-90);
--fig-dark-purple-100: var(--br-lavender-95);
--fig-card-purple-top: var(--br-lavender-70);
--fig-card-purple-bot: var(--br-lavender-80);
--fig-tag-purple: var(--br-lavender-50);
--fig-card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px rgba(20,8,33,0.5);
}
/* Ch5 deep blue stage → keep deep, but pull toward Sunset Bloom shoulder so
it feels like one family with Ch7/Ch8 instead of an outlier. */
:root {
--fig-dark-blue-0: var(--br-lavender-95);
--fig-dark-blue-100: var(--br-lavender-90);
}
/* ---------- 12. AURORA / AMBIENT GLOWS — brand purple only ---------- */
.aurora::before {
background: radial-gradient(
circle,
var(--br-lavender-50) 0%,
transparent 60%
) !important;
}
/* ---------- 13. SCROLL SECTION DIVIDERS — softer brand line ---------- */
.hr-faint {
background: var(--p-line) !important;
}
/* ============================================================================
CHAPTER 5 — Built in Europe (architectural blueprint)
Single hero plate. Hairlines, mono annotations, no glass tiles.
============================================================================ */
.ch5-stage.fig-dark.fig-dark--blue {
background:
radial-gradient(ellipse 110% 80% at 50% 50%, rgba(165, 51, 204, 0.10) 0%, transparent 65%),
linear-gradient(180deg, #1A0E3D 0%, #0B0518 100%);
flex-direction: column;
gap: clamp(20px, 3.5vh, 40px);
/* Match centered-section convention (aiass-header / ch7-stage): clears the
68px fixed nav and keeps the eyebrow at a consistent y across sections. */
padding: clamp(80px, 12vh, 140px) 32px clamp(20px, 3vh, 32px);
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Subtle drafting-paper grid behind the plate */
.ch5-stage.fig-dark.fig-dark--blue::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(219, 173, 235, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(219, 173, 235, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
background-position: center center;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
pointer-events: none;
}
.ch5-head {
text-align: center;
max-width: 760px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.ch5-head .fig-eyebrow { margin: 0; }
.ch5-head .fig-h2 {
font-size: clamp(28px, 3.4vw, 40px) !important;
margin: 0;
line-height: 1.15;
}
.ch5-head .fig-body {
font-size: 14px;
line-height: 1.5;
max-width: 600px;
margin: 0;
color: rgba(255, 255, 255, 0.62);
}
/* The blueprint plate ------------------------------------------------------ */
.ch5-blueprint {
position: relative;
width: 100%;
max-width: 1080px;
padding: 24px 48px 18px;
z-index: 2;
font-family: var(--font-family-mono, ui-monospace, 'SF Mono', Menlo, monospace);
}
/* Corner registration ticks */
.ch5-bp-tick {
position: absolute;
width: 16px;
height: 16px;
border: 1px solid rgba(219, 173, 235, 0.55);
}
.ch5-bp-tick--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ch5-bp-tick--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ch5-bp-tick--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ch5-bp-tick--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* Title block ------------------------------------------------------------- */
.ch5-bp-titleblock {
display: flex;
align-items: center;
gap: 14px;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(219, 173, 235, 0.28);
margin-bottom: 8px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 600ms var(--p-easing), transform 600ms var(--p-easing);
}
.ch5-bp-titleblock[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.ch5-bp-flags {
display: inline-flex;
gap: 8px;
align-items: center;
}
.ch5-bp-flags svg {
display: block;
border-radius: 2px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.25);
}
.ch5-bp-flag { width: 24px; height: 16px; }
.ch5-bp-tb-title {
flex: 1;
color: rgba(255, 255, 255, 0.86);
font-weight: 600;
letter-spacing: 0.20em;
}
.ch5-bp-tb-meta {
color: rgba(255, 255, 255, 0.40);
}
/* Vertical scale ruler ---------------------------------------------------- */
.ch5-bp-rule {
position: absolute;
left: 22px;
top: 60px;
bottom: 56px;
width: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.ch5-bp-rule::before {
content: '';
position: absolute;
top: 0; bottom: 0;
right: 0;
width: 1px;
background: rgba(219, 173, 235, 0.30);
}
.ch5-bp-rule__tick {
position: relative;
height: 1px;
background: rgba(219, 173, 235, 0.45);
width: 18px;
}
/* The strata frame --------------------------------------------------------- */
.ch5-bp-frame {
display: flex;
flex-direction: column;
}
.ch5-bp-stratum {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 220px;
gap: 20px;
align-items: baseline;
padding: 14px 0 14px 4px;
border-bottom: 1px dashed rgba(219, 173, 235, 0.20);
opacity: 0;
transform: translateX(-6px);
transition:
opacity 600ms var(--p-easing),
transform 600ms var(--p-easing);
position: relative;
}
.ch5-bp-stratum:last-child {
border-bottom: 1px solid rgba(219, 173, 235, 0.32);
}
.ch5-bp-stratum:first-child {
border-top: 1px solid rgba(219, 173, 235, 0.32);
}
.ch5-bp-stratum[data-active="true"] {
opacity: 1;
transform: translateX(0);
}
.ch5-bp-stratum__num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(219, 173, 235, 0.85);
align-self: center;
}
.ch5-bp-stratum__main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ch5-bp-stratum__label {
font-family: var(--font-family-heading);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.96);
line-height: 1.2;
}
.ch5-bp-stratum__caption {
font-family: var(--font-family-sans);
font-size: 12.5px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.55);
}
.ch5-bp-stratum__annot {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding-left: 28px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(219, 173, 235, 0.85);
text-transform: uppercase;
align-self: center;
white-space: nowrap;
text-align: right;
justify-content: flex-end;
}
.ch5-bp-stratum__leader {
position: absolute;
left: 0;
top: 50%;
width: 22px;
height: 1px;
background: rgba(219, 173, 235, 0.45);
}
.ch5-bp-stratum__leader::before {
content: '';
position: absolute;
left: -4px;
top: -2.5px;
width: 6px;
height: 6px;
border: 1px solid rgba(219, 173, 235, 0.55);
border-radius: 50%;
background: #1A0E3D;
}
/* Status strip ------------------------------------------------------------ */
.ch5-bp-status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
padding-top: 14px;
margin-top: 8px;
border-top: 1px dashed rgba(219, 173, 235, 0.28);
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.72);
text-transform: uppercase;
opacity: 0;
transform: translateY(4px);
transition: opacity 600ms var(--p-easing), transform 600ms var(--p-easing);
}
.ch5-bp-status[data-active="true"] {
opacity: 1;
transform: translateY(0);
}
.ch5-bp-status__item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ch5-bp-bullet {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #DBADEB;
box-shadow: 0 0 6px rgba(219, 173, 235, 0.65);
}
.ch5-bp-status__sep {
color: rgba(219, 173, 235, 0.30);
font-weight: 300;
}
/* Compact viewports ------------------------------------------------------- */
@media (max-width: 820px) {
.ch5-blueprint { padding: 22px 28px 18px; }
.ch5-bp-rule { display: none; }
.ch5-bp-stratum { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.ch5-bp-stratum__annot { display: none; }
.ch5-bp-stratum__label { font-size: 15px; }
.ch5-bp-stratum__caption { font-size: 12px; }
.ch5-bp-status { gap: 10px; }
}
@media (max-width: 720px) {
/* No GSAP pin on mobile — show all strata and status immediately */
.ch5-bp-stratum,
.ch5-bp-titleblock,
.ch5-bp-status { opacity: 1; transform: none; }
/* Let stage grow with content so tall text doesn't overflow above */
.ch5-stage.fig-dark {
height: auto;
max-height: none;
min-height: 100vh;
justify-content: flex-start;
}
}
/* ============================================================================
CHAPTER 8 — Timeline rail roadmap
Inspired by the Figma "Time to value" implementation pattern:
horizontal rail, 4 milestone nodes, 4 cards underneath where the
final destination card has a different fill (the "horizon").
============================================================================ */
.ch8-stage.fig-dark {
padding: 96px 64px 96px;
gap: 56px;
align-items: center;
text-align: center;
background:
radial-gradient(ellipse 70% 40% at 50% 100%, rgba(106, 33, 131, 0.32) 0%, transparent 70%),
var(--fig-dark-blue-0, #050019);
}
.ch8-stage .ch8-head {
max-width: 760px;
text-align: center;
}
/* Timeline rail ----------------------------------------------------------- */
.ch8-rail {
position: relative;
width: min(1080px, 100%);
height: 70px;
margin: 16px 0 8px;
}
.ch8-rail__track {
position: absolute;
top: 14px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
rgba(219, 173, 235, 0.0) 0%,
rgba(219, 173, 235, 0.32) 6%,
rgba(219, 173, 235, 0.32) 94%,
rgba(219, 173, 235, 0.0) 100%
);
overflow: visible;
}
.ch8-rail__track::before {
/* dashed segment beyond "now" */
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(90deg, rgba(219, 173, 235, 0.5) 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
opacity: 0.55;
pointer-events: none;
}
.ch8-rail__fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(
90deg,
var(--br-flame-50, #f47621) 0%,
var(--br-lavender-50, #6a2183) 60%,
rgba(106, 33, 131, 0.0) 100%
);
transform-origin: left center;
transform: scaleX(0);
box-shadow: 0 0 18px rgba(219, 173, 235, 0.45);
}
.ch8-rail__node {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 140px;
}
.ch8-rail__dot {
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--br-lavender-30, #C885E0);
border: 2px solid var(--fig-dark-blue-0, #050019);
box-shadow: 0 0 0 1px rgba(219, 173, 235, 0.5),
0 0 12px rgba(219, 173, 235, 0.55);
flex-shrink: 0;
}
.ch8-rail__node[data-now="true"] .ch8-rail__dot {
background: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7),
0 0 18px rgba(255, 255, 255, 0.85),
0 0 32px rgba(244, 118, 33, 0.5);
}
.ch8-rail__node[data-destination="true"] .ch8-rail__dot {
background: var(--br-flame-50, #f47621);
box-shadow: 0 0 0 1px rgba(244, 118, 33, 0.8),
0 0 18px rgba(244, 118, 33, 0.6);
}
.ch8-rail__pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.55);
animation: ch8RailPulse 2.4s ease-out infinite;
}
@keyframes ch8RailPulse {
0% { transform: scale(0.9); opacity: 0.9; }
100% { transform: scale(2.4); opacity: 0; }
}
.ch8-rail__tag {
font-family: var(--font-family-mono, ui-monospace, monospace);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
}
.ch8-rail__node[data-now="true"] .ch8-rail__tag {
color: #fff;
}
.ch8-rail__node[data-destination="true"] .ch8-rail__tag {
color: var(--br-flame-30, #FBB87E);
}
/* Roadmap cards ----------------------------------------------------------- */
.ch8-roadmap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
width: min(1240px, 100%);
margin: 0;
align-items: stretch;
}
.ch8-card {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 22px 22px 24px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
text-align: left;
overflow: hidden;
min-height: 320px;
}
.ch8-card[data-now="true"] {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.22);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 24px 48px -24px rgba(244, 118, 33, 0.35);
}
.ch8-card[data-destination="true"] {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(244, 118, 33, 0.35);
color: #fff;
}
.ch8-card__horizon { display: none; }
.ch8-card[data-destination="true"] .ch8-card__pill {
background: rgba(244, 118, 33, 0.18);
border-color: rgba(244, 118, 33, 0.45);
color: #FFC9A0;
}
.ch8-card[data-destination="true"] .ch8-card__items li {
color: rgba(255, 255, 255, 0.92);
}
.ch8-card > *:not(.ch8-card__horizon) { position: relative; z-index: 1; }
.ch8-card__head {
display: flex;
flex-direction: column;
gap: 10px;
}
.ch8-card__pill {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
padding: 4px 10px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
font-family: var(--font-family-mono, ui-monospace, monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.ch8-card[data-now="true"] .ch8-card__pill {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 1);
color: #1a0327;
}
.ch8-card[data-destination="true"] .ch8-card__pill {
background: rgba(244, 118, 33, 0.18);
border-color: rgba(244, 118, 33, 0.55);
color: var(--br-flame-30, #FBB87E);
}
.ch8-card__live {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--br-flame-50, #f47621);
box-shadow: 0 0 0 2px rgba(244, 118, 33, 0.25),
0 0 10px rgba(244, 118, 33, 0.7);
animation: ch8CardLive 1.8s ease-out infinite;
}
@keyframes ch8CardLive {
0%, 100% { box-shadow: 0 0 0 2px rgba(244, 118, 33, 0.25), 0 0 10px rgba(244, 118, 33, 0.7); }
50% { box-shadow: 0 0 0 4px rgba(244, 118, 33, 0.10), 0 0 16px rgba(244, 118, 33, 0.95); }
}
.ch8-card__when {
font-family: var(--font-family-heading);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.15;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
.ch8-card[data-destination="true"] .ch8-card__when {
color: #fff;
}
.ch8-card__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ch8-card__items li {
display: grid;
grid-template-columns: 16px 1fr;
gap: 10px;
align-items: flex-start;
font-family: var(--font-family-sans);
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.78);
}
.ch8-card[data-destination="true"] .ch8-card__items li {
color: rgba(255, 255, 255, 0.86);
}
.ch8-card__bullet {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.22);
margin-top: 3px;
flex-shrink: 0;
}
.ch8-card__bullet.is-now {
background: #fff;
border-color: #fff;
color: #1a0327;
}
.ch8-card__bullet.is-now .lucide { color: #1a0327; stroke: #1a0327; }
.ch8-card__bullet.is-destination {
background: var(--br-flame-50, #f47621);
border-color: var(--br-flame-50, #f47621);
color: #fff;
}
.ch8-card__bullet.is-destination .lucide { color: #fff; stroke: #fff; }
/* Closing chip ------------------------------------------------------------ */
.ch8-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 18px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--font-family-mono, ui-monospace, monospace);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ch8-chip__dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--br-flame-50, #f47621);
margin-right: 8px;
box-shadow: 0 0 8px rgba(244, 118, 33, 0.7);
}
/* Compact viewports ------------------------------------------------------- */
@media (max-width: 980px) {
.ch8-roadmap { grid-template-columns: repeat(2, 1fr); }
.ch8-rail { display: none; }
}
@media (max-width: 560px) {
.ch8-roadmap { grid-template-columns: 1fr; }
}
/* ============================================================================
SECTION BACKDROPS — landscape imagery as atmospheric backgrounds
Ch8: mountain at sunset (looking forward, the horizon)
CTA: stairway through wildflowers (the climb, the invitation)
============================================================================ */
/* ---------- Chapter 8 — mountain horizon at section base ---------- */
.ch8-stage.fig-dark {
position: relative;
isolation: isolate;
}
.ch8-stage.fig-dark::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%;
background:
/* Bottom edge: feather into the lavender page bg below */
linear-gradient(180deg,
rgba(20, 8, 38, 0.92) 0%,
rgba(20, 8, 38, 0.50) 22%,
rgba(20, 8, 38, 0.18) 55%,
rgba(60, 30, 90, 0.20) 80%,
var(--p-bg) 100%),
url('../app/assets/horizon-mountain.webp') 50% 30% / 110% auto no-repeat;
z-index: 0;
pointer-events: none;
}
/* ---------- CTA — stairway as right-side atmospheric panel ---------- */
#cta.section {
position: relative;
overflow: hidden;
isolation: isolate;
}
#cta.section::after {
content: "";
position: absolute;
inset: 0;
background:
/* Left-to-right fade from solid purple to revealed image */
linear-gradient(90deg,
rgba(20, 8, 38, 1) 0%,
rgba(20, 8, 38, 0.95) 35%,
rgba(20, 8, 38, 0.75) 55%,
rgba(20, 8, 38, 0.45) 80%,
rgba(20, 8, 38, 0.30) 100%),
url('../app/assets/horizon-stairway.webp') 100% 50% / cover no-repeat;
z-index: 0;
pointer-events: none;
}
#cta.section > * { position: relative; z-index: 1; }
/* ============================================================================
CHAPTER 6 — Clean dark plate behind product shots (each shot already
includes its own painterly horizon backdrop, so the section bg stays clean)
============================================================================ */
.ch6-right {
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155, 139, 255, 0.10) 0%, transparent 70%),
var(--p-bg) !important;
}
html.dark .ch6-right {
background:
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155, 139, 255, 0.16) 0%, transparent 70%),
var(--p-bg) !important;
}
/* Drop the grid mask entirely — the painterly bg in each shot is the texture */
.ch6-right::before {
background-image: none !important;
background: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
opacity: 0 !important;
}
/* Each ch6-screen is now a transparent stage — the PNG provides its own card */
.ch6-screen {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html.dark .ch6-screen {
background: transparent !important;
box-shadow: none !important;
}
/* ============================================================================
MANIFESTO — Painterly cumulus backdrop. Quiet, aspirational. The image
sits as a soft atmosphere; a vertical legibility scrim keeps text crisp on
the left where the copy lives. Right side fades into the image.
============================================================================ */
.ch-manifesto,
.manifesto-stage {
position: relative;
background: var(--p-bg) !important;
}
/* Painterly layer */
.manifesto-stage::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../app/assets/bg-clouds.webp');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
opacity: 0.92;
z-index: 0;
pointer-events: none;
}
/* Legibility scrim — strong on the left under the copy column,
feathering out to the right so the painterly atmosphere reads. */
.manifesto-stage::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(250, 247, 244, 0.94) 0%,
rgba(250, 247, 244, 0.86) 32%,
rgba(250, 247, 244, 0.55) 60%,
rgba(250, 247, 244, 0.18) 100%
),
linear-gradient(180deg, rgba(250, 247, 244, 0.22) 0%, transparent 30%, transparent 70%, rgba(250, 247, 244, 0.32) 100%);
z-index: 0;
pointer-events: none;
}
html.dark .manifesto-stage::before { opacity: 0.78; }
html.dark .manifesto-stage::after {
background:
linear-gradient(
90deg,
rgba(13, 9, 27, 0.92) 0%,
rgba(13, 9, 27, 0.82) 32%,
rgba(13, 9, 27, 0.5) 60%,
rgba(13, 9, 27, 0.18) 100%
),
linear-gradient(180deg, rgba(13, 9, 27, 0.2) 0%, transparent 30%, transparent 70%, rgba(13, 9, 27, 0.4) 100%);
}
/* Lift the manifesto content above the background layers */
.manifesto-stage > * {
position: relative;
z-index: 1;
}
/* ============================================================================
TYPE SYSTEM — final normalizer, loaded LAST.
Locks consistent scale across all chapters.
Tokens:
--t-eyebrow: 13px / 500 / +0.14em / uppercase / lavender
--t-h2-chapter: clamp(36px, 4.4vw, 56px) / 600 / -0.022em / 1.06
--t-h2-sub: clamp(28px, 3.2vw, 40px) / 600 / -0.018em / 1.08
--t-h3-card: 22px / 700 / -0.018em / 1.15
--t-stat-num: clamp(48px, 6vw, 72px) / 600 / -0.02em / 1
--t-body-lede: clamp(17px, 1.4vw, 19px) / 400 / 1.55
============================================================================ */
:root {
--t-eyebrow-size: 13px;
--t-eyebrow-weight: 500;
--t-eyebrow-track: 0.14em;
--t-eyebrow-color: var(--br-lavender-30, #C885E0);
--t-h2-size: clamp(36px, 4.4vw, 56px);
--t-h2-weight: 600;
--t-h2-lh: 1.06;
--t-h2-track: -0.022em;
}
/* ---------- 1. EYEBROW — single canonical style ---------------------------- */
/* Override all variations (ch6 was 11px, ch1b was 11px mono, fig was 14px).
Brand-overlay's rule already unifies size/family — we lock color + spacing here
and stomp the tiny ch6 / mono variants. */
.eyebrow,
.fig-eyebrow,
.ch6-eyebrow,
.ch7-eyebrow,
.manifesto__eyebrow {
font-family: var(--font-family-heading) !important;
font-weight: var(--t-eyebrow-weight) !important;
font-size: var(--t-eyebrow-size) !important;
line-height: 1.2 !important;
letter-spacing: var(--t-eyebrow-track) !important;
text-transform: uppercase !important;
color: var(--t-eyebrow-color) !important;
}
/* Ch6 was using a deeper purple gradient — bring it in line */
.ch6-eyebrow {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
}
/* Ch1b cold-open eyebrow keeps its pill chrome (white text inside chip) — exempt */
.ch1b-eyebrow,
.ch1b-eyebrow__num,
.ch1b-eyebrow__loc,
.ch1b-eyebrow__sep {
/* leave brand-overlay rules; just enforce size parity */
font-size: var(--t-eyebrow-size) !important;
letter-spacing: var(--t-eyebrow-track) !important;
}
/* ---------- 2. CHAPTER H2 — single canonical scale ------------------------- */
/* Targets every chapter section heading. Ch3 was 55px, Ch7 was 49px,
Ch6 was 36px, Ch8 was 47px — pull all to one ramp. */
.ch2-stage > h2,
.ch3-content h2,
.ch6-stage h2:not(.ch6-item__h),
.ch7-h2,
.ch8-stage .fig-h2,
.fig-h2 {
font-family: var(--font-family-heading) !important;
font-weight: var(--t-h2-weight) !important;
font-size: var(--t-h2-size) !important;
line-height: var(--t-h2-lh) !important;
letter-spacing: var(--t-h2-track) !important;
}
/* Ch1 hero stays larger — it's the headline, not an h2 */
/* Ch4 principle h3s are visual h2s — promote them to the same scale,
but slightly smaller since they repeat 3x and pair with copy */
.ch4-principle__h {
font-size: clamp(32px, 3.6vw, 44px) !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
}
/* Ch8 close ("This is the European AI platform...") is a true closing
headline, not a sub — keep larger */
.ch8-close__h {
font-size: clamp(40px, 4.8vw, 60px) !important;
line-height: 1.04 !important;
letter-spacing: -0.024em !important;
}
/* Ch5 head was clamped to 28-40 — bring up to canonical */
.ch5-head .fig-h2 {
font-size: var(--t-h2-size) !important;
line-height: var(--t-h2-lh) !important;
letter-spacing: var(--t-h2-track) !important;
}
/* AI Assistant headline — pull up to canonical h2 scale */
.aiass-headline {
font-family: var(--font-family-heading) !important;
font-weight: var(--t-h2-weight) !important;
font-size: var(--t-h2-size) !important;
line-height: var(--t-h2-lh) !important;
letter-spacing: var(--t-h2-track) !important;
}
/* AI Assistant eyebrow was 11px mono — pull to canonical eyebrow */
.aiass-header .eyebrow {
font-family: var(--font-family-heading) !important;
font-weight: var(--t-eyebrow-weight) !important;
font-size: var(--t-eyebrow-size) !important;
letter-spacing: var(--t-eyebrow-track) !important;
color: var(--t-eyebrow-color) !important;
}
/* ---------- 2b. SECTION INTRO/SUB — canonical body lede ------------------ */
/* Single rule for the centered paragraph that sits under a section H2.
Hero subhead, Ch2 head, Ch3 sub, AI Assistant sub, Ch5 fig-body, Ch7 intro
all collapse to one ramp: 17→19px / 1.55 / 56ch / pretty. */
.ch7-intro,
.ch7-header--centered .ch7-intro,
.aiass-sub,
.ch5-head .fig-body,
.ch8-head .fig-body,
.ch3-sub,
.ch1b-sub,
.lifecycle-intro,
.ch2-head .muted,
.ch2-head > p {
font-family: var(--font-family-base) !important;
font-weight: 400 !important;
font-size: clamp(17px, 1.4vw, 19px) !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
max-width: 56ch !important;
color: var(--p-text-2) !important;
text-wrap: pretty;
}
/* Ch2 + Ch3 subs are centered under their h2 — keep them centered when we set max-width */
.ch2-head .muted,
.ch2-head > p,
.ch3-sub {
margin-left: auto !important;
margin-right: auto !important;
}
/* Lifecycle intro sits in a narrow left column with the wheel arc curving
in from the right — cap tight so it never crosses into the wheel. */
.lifecycle-intro {
max-width: 320px !important;
}
/* ---------- 3. CARD H3 — when/timeline/principle subhead ------------------ */
.ch8-col__when,
.fig-h3 {
font-family: var(--font-family-heading) !important;
font-weight: 700 !important;
font-size: 22px !important;
line-height: 1.15 !important;
letter-spacing: -0.012em !important;
}
/* ---------- 4. STAT NUMBERS — unify across Ch7 & Ch2 ---------------------- */
.ch7-card__stat-num,
.fig-stat-num,
.ch7-stat__num {
font-family: var(--font-family-heading) !important;
font-weight: 600 !important;
font-size: clamp(52px, 5.6vw, 72px) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* ---------- 5. CHAPTER NUMBER PREFIX — strip from eyebrows --------------- */
/* Ch6 had "06 ·" and Ch8 had "08 ·" prefixes inside their eyebrows;
others didn't. We hide the numeric prefix span if present, but since
these are inline text, we instead defer to copy-level fix in JSX. */
/* ---------- 6. CH3 + CH4 newly-added eyebrows: positioning --------------- */
.ch3-content .eyebrow { display: inline-flex; }
.ch4-eyebrow-wrap {
position: absolute;
top: clamp(40px, 6vh, 64px);
left: 50%;
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
}
.ch4-stage { position: relative; }
.ch4-eyebrow-wrap .eyebrow { display: inline-flex; }
/* ---------- 7. CH4 — Manifesto layout (replaces the pinned scrub) ------- */
/* Override legacy ch4 layout styles when the manifesto class is present */
.ch4-stage--manifesto {
background: var(--p-bg);
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
height: 100vh !important;
min-height: 720px;
position: relative;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
}
.ch-4--manifesto { height: auto !important; }
/* Painterly texture, full-bleed but heavily scrimmed so copy reads cleanly */
.ch4m-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.55;
z-index: 0;
}
html.dark .ch4m-bg { opacity: 0.30; }
.ch4m-bg__scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, var(--p-bg) 90%),
linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--p-bg) 100%);
}
.ch4m-inner {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(32px, 5vh, 64px);
padding: clamp(80px, 10vh, 120px) clamp(48px, 6vw, 96px);
max-width: 1440px;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin: 0 auto;
}
.ch4m-head {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 720px;
}
.ch4m-lead {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--p-text);
margin: 0;
text-wrap: balance;
}
.ch4m-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 48px);
align-items: stretch;
width: 100%;
min-width: 0;
}
.ch4m-grid > * { min-width: 0; }
.ch4m-card {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 28px;
border-top: 1px solid var(--p-line);
position: relative;
}
.ch4m-card__num {
font-family: var(--font-family-mono);
font-size: 12px;
letter-spacing: 0.18em;
background: linear-gradient(90deg, var(--p-deep-blue), var(--p-deep-purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
}
.ch4m-card__h {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--p-text);
margin: 0;
}
.ch4m-card__body {
font-size: 15px;
line-height: 1.55;
color: var(--p-text-2);
margin: 0;
}
.ch4m-card__commitments {
list-style: none;
margin: 8px 0 0;
padding: 16px 0 0;
border-top: 1px dashed var(--p-line);
display: flex;
flex-direction: column;
gap: 12px;
}
.ch4m-commitment {
display: flex;
align-items: flex-start;
gap: 10px;
}
.ch4m-commitment__bullet {
flex-shrink: 0;
width: 5px;
height: 5px;
margin-top: 8px;
border-radius: 999px;
background: var(--p-accent);
box-shadow: 0 0 6px var(--p-accent-glow);
}
.ch4m-commitment__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.ch4m-commitment__label {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: 13px;
color: var(--p-text);
}
.ch4m-commitment__body {
font-size: 13px;
line-height: 1.5;
color: var(--p-text-3);
}
/* Responsive collapse */
@media (max-width: 880px) {
.ch4m-grid { grid-template-columns: 1fr; gap: 32px; }
.ch4-stage--manifesto { height: auto !important; min-height: 0; }
.ch4m-inner { padding: 80px 24px; gap: 40px; }
}
/* ---------- 8. CH6 — capabilities scrub: refined presentation ----------- */
/* Eyebrow needs breathing room from the chapter top */
.ch-stage.ch6-stage .ch6-left { padding-top: 64px; }
.ch6-stage .ch6-eyebrow { margin-bottom: 16px; }
/* Active-state vertical bar on accordion items — restored */
.ch6-stage .ch6-item {
padding-left: 20px;
position: relative;
}
.ch6-stage .ch6-item::before {
content: '';
position: absolute;
left: 0;
top: 32px;
bottom: 32px;
width: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.10);
transition: background 300ms var(--p-easing), box-shadow 300ms var(--p-easing);
}
.ch6-stage .ch6-item[data-active="true"]::before {
background: linear-gradient(180deg, var(--p-deep-blue), var(--p-deep-purple));
box-shadow: 0 0 12px var(--p-accent-glow);
}
/* ---- Right side: glass-framed product UI bleeding off the edge ---- */
.ch6-stage .ch6-right {
padding: 0 !important;
overflow: hidden !important;
position: relative;
}
.ch6-stage .ch6-screen {
position: absolute;
inset: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
display: block;
}
/* Painterly textured backdrop — fills the column behind the glass frame */
.ch6-stage .ch6-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.95);
}
.ch6-stage .ch6-bg::after {
content: '';
position: absolute;
inset: 0;
/* Soft vignette + brand wash so product UI reads cleanly */
background:
radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(20, 8, 38, 0.45) 100%),
linear-gradient(135deg, rgba(40, 20, 70, 0.20) 0%, transparent 50%);
}
/* Glass-framed product UI — matches Figma "Glass Frame" component spec */
.ch6-stage .ch6-glass {
position: absolute;
top: 10%;
bottom: 10%;
left: 8%;
right: -8%; /* bleed off the right edge */
border-radius: 32px 0 0 32px;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
box-shadow:
0 2px 16px -4px rgba(0, 0, 0, 0.10),
0 0.5px 2px 0 rgba(0, 0, 0, 0.08),
inset 0 0 8px 2px rgba(255, 255, 255, 0.12),
inset 0 0.5px 0 0 rgba(255, 255, 255, 0.20);
overflow: hidden;
padding: 16px 0 16px 16px;
isolation: isolate;
}
.ch6-stage .ch6-glass__shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
border-radius: 16px 0 0 16px;
}
/* Animated transition between active screens */
.ch6-stage .ch6-screen {
opacity: 0;
transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ch6-stage .ch6-screen[data-active="true"] {
opacity: 1;
}
.ch6-stage .ch6-screen .ch6-glass {
transform: translateX(20px);
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ch6-stage .ch6-screen[data-active="true"] .ch6-glass {
transform: translateX(0);
}
/* ---------- 9. CH8 — two-category roadmap layout ------------------------- */
.ch8-cats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
width: 100%;
max-width: 1100px;
margin: 8px auto 0;
position: relative;
padding-top: 92px;
}
/* Timeline rail — horizontal line spanning full width clearly above the cards */
.ch8-timeline {
position: absolute;
top: 32px;
left: 0;
right: 0;
height: 28px;
pointer-events: none;
}
.ch8-timeline__line {
position: absolute;
top: 50%;
left: 12.5%;
right: 12.5%;
height: 1px;
transform: translateY(-50%);
background: linear-gradient(90deg,
rgba(200, 160, 240, 0) 0%,
rgba(200, 160, 240, 0.55) 12%,
rgba(232, 184, 255, 0.85) 50%,
rgba(255, 220, 245, 0.95) 88%,
rgba(255, 220, 245, 0) 100%);
}
.ch8-timeline__pulse {
position: absolute;
top: 50%;
left: 12.5%;
width: 80px;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 220, 245, 0.9) 50%,
transparent 100%);
filter: blur(1px);
animation: ch8TimelineSweep 5s linear infinite;
}
@keyframes ch8TimelineSweep {
0% { left: 12.5%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: calc(87.5% - 80px); opacity: 0; }
}
.no-motion .ch8-timeline__pulse { animation: none; display: none; }
.ch8-timeline__node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ch8-timeline__node--soon { left: 25%; }
.ch8-timeline__node--future { left: 75%; }
.ch8-timeline__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(200, 160, 240);
box-shadow:
0 0 0 4px rgba(200, 160, 240, 0.18),
0 0 16px rgba(200, 160, 240, 0.6);
}
.ch8-timeline__dot--future {
background: rgb(255, 220, 245);
box-shadow:
0 0 0 4px rgba(255, 220, 245, 0.22),
0 0 20px rgba(255, 220, 245, 0.8);
}
.ch8-timeline__label {
font-family: var(--font-family-mono, ui-monospace, monospace);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
white-space: nowrap;
position: absolute;
bottom: 18px;
}
.ch8-cat {
position: relative;
padding: 40px 40px 44px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: 28px;
transition: border-color 300ms ease, background 300ms ease;
}
.ch8-cat[data-future="true"] {
background: linear-gradient(155deg, rgba(168, 102, 220, 0.18) 0%, rgba(83, 26, 102, 0.10) 100%);
border-color: rgba(200, 160, 240, 0.28);
}
.ch8-cat:hover {
border-color: rgba(255, 255, 255, 0.18);
}
.ch8-cat[data-future="true"]:hover {
border-color: rgba(200, 160, 240, 0.45);
}
.ch8-cat__head {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
text-align: center;
align-items: center;
}
.ch8-cat__kicker {
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--br-lavender-30, #C885E0);
}
.ch8-cat[data-future="true"] .ch8-cat__kicker {
color: rgb(232, 184, 255);
}
.ch8-cat__title {
font-family: var(--font-family-heading);
font-weight: 600;
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: -0.018em;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
.ch8-cat__items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
text-align: left;
}
.ch8-cat__item {
display: flex;
align-items: flex-start;
gap: 14px;
font-family: var(--font-family-heading);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
letter-spacing: -0.005em;
}
.ch8-cat__bullet {
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 11px;
border-radius: 999px;
background: rgba(200, 160, 240, 0.65);
}
.ch8-cat[data-future="true"] .ch8-cat__bullet {
background: rgb(232, 184, 255);
box-shadow: 0 0 10px rgba(232, 184, 255, 0.5);
}
@media (max-width: 880px) {
.ch8-cats { grid-template-columns: 1fr; gap: 20px; padding-top: 0; }
.ch8-cat { padding: 32px 28px 36px; }
.ch8-timeline { display: none; }
}
/* ============================================================================
8. TEXT WRAP — balance display copy, pretty wrap body copy.
`balance` makes short lines (headlines, eyebrows, card titles) break evenly.
`pretty` improves last-line widows on body copy without locking line counts.
============================================================================ */
/* Display copy — balance */
h1, h2, h3,
.fig-h1, .fig-h2, .fig-h3,
.ch1-headline, .ch1b-headline,
.ch7-h2, .ch5-head .fig-h2, .ch8-stage .fig-h2,
.aiass-headline, .ch8-close__h, .ch4-principle__h,
.ch7-card__h, .ch7-card__title,
.ch6-h, .ch6-h1, .ch3-h2,
.ch4m-lead,
.ch8-cat__title {
text-wrap: balance;
}
/* Eyebrows + small chip text — balance keeps two-word eyebrows on one line */
.eyebrow, .fig-eyebrow, .ch6-eyebrow, .ch7-eyebrow,
.manifesto__eyebrow, .ch1b-eyebrow {
text-wrap: balance;
}
/* Section intro / lede paragraphs — pretty (avoid orphan last word) */
.ch7-intro, .aiass-sub, .ch5-head .fig-body,
.fig-body, .ch6-item__body, .ch7-card__body,
.ch4m-card__body, p.lede, p.intro {
text-wrap: pretty;
}
/* ============================================================================
9. HERO subhead — share the same scale as section subs.
============================================================================ */
section#top p.reveal {
font-size: clamp(17px, 1.4vw, 19px) !important;
line-height: 1.55 !important;
color: var(--p-text-2) !important;
text-wrap: pretty;
}
/* ============================================================================
AI Assistant Section — full Figma "water theme" port.
Desktop frame: 1200×667 baseline · card 354×500 centered · rail at 77.29%.
Flow dots use real SVG path-tracing; featured prompt has BorderBeam.
============================================================================ */
/* Force border-box on all AIHV elements so width:100% + padding doesn't overflow */
.ch-assistant,
.ch-assistant *,
.ch-assistant *::before,
.ch-assistant *::after {
box-sizing: border-box;
}
.ch-assistant {
/* Grow to fit content so the chat card and "Try the demo" tag never bleed
into the next chapter on short viewports. Floor it to 100vh so the
visual still feels full-bleed on tall screens. */
min-height: 100vh;
height: auto;
}
.ch-assistant .ch-stage {
overflow: visible;
height: auto;
min-height: 100vh;
}
/* Override `.ch-stage` (which is display:flex centered upstream) to a CSS GRID
with two named rows: header (auto) + canvas (1fr). Grid does NOT shrink-wrap
like flex, so the canvas ALWAYS fills the section width regardless of what
children are inside it. This is the structural fix that prevents the
collapse-to-content bug we kept hitting. */
.ch-assistant .aiass-stage {
display: grid !important;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
justify-items: stretch;
padding: 0;
width: 100%;
overflow: visible;
background:
radial-gradient(ellipse 60% 75% at 50% 70%, rgba(122, 221, 225, 0.32) 0%, rgba(122, 221, 225, 0.05) 50%, transparent 80%),
linear-gradient(180deg,
#04060a 0%,
#062023 18%,
#083538 38%,
#0a4a4d 60%,
#062a2c 85%,
#04060a 100%);
}
/* ------- Section header (grid row 1) ------- */
.aiass-header {
width: 100%;
max-width: 880px;
/* Match centered-section header top padding (ch7-stage uses 80-140px to
clear the fixed 68px nav). Was 32-64 which let the eyebrow tuck under. */
padding: clamp(80px, 12vh, 140px) 32px 16px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.aiass-header .eyebrow {
font-family: var(--font-family-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.aiass-headline {
font-family: var(--font-family-heading);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
color: #fff;
text-wrap: balance;
}
.aiass-sub {
font-family: var(--font-family-base);
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 400;
line-height: 1.55;
color: rgba(255, 255, 255, 0.65);
margin: 0;
max-width: 540px;
text-wrap: pretty;
}
/* ------- Inner stage (grid row 2 — the AI canvas area) ------- */
.aiass-stage-inner {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 24px 80px;
overflow: visible;
}
/* ============================================================================
AIHV ROOT — desktop frame is 1200×667 absolute-positioning canvas
============================================================================ */
.aihv-root {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* ============================================================================
DESKTOP: 1200×667 absolute-positioning canvas
.aihv-desktop wraps everything and provides the 667px height.
Its width fills the available .aihv-root width (up to max 1320).
============================================================================ */
.aihv-desktop {
position: relative;
width: 100%;
height: 667px;
max-height: 100%;
}
.aihv-canvas {
position: relative;
z-index: 4;
width: 100%;
height: 100%;
}
/* ------- "Try the demo" tag (pinned to top) ------- */
.aihv-tag-wrap {
position: absolute;
top: 6px;
left: 50%;
z-index: 8;
transform: translateX(-50%);
}
.aihv-tag {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.aihv-tag__pill {
position: relative;
border-radius: 20px;
padding: 8px 16px;
box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08), 0 2px 16px rgba(0, 0, 0, 0.10);
}
.aihv-tag__pill-bg {
position: absolute;
inset: 0;
border-radius: 20px;
background: #000;
}
.aihv-tag__text {
position: relative;
margin: 0;
font-family: var(--font-family-base);
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: #fff;
font-feature-settings: 'ss03' 1;
}
.aihv-tag__pill-inner {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.20),
inset 0 0 8px rgba(255, 255, 255, 0.12);
}
.aihv-tag__caret-wrap {
position: relative;
display: flex;
justify-content: center;
width: 16px;
height: 12px;
margin-top: -1px;
}
.aihv-tag__caret {
width: 16px;
height: 12px;
display: block;
object-fit: contain;
}
.aihv-tag--bobbing { animation: aihv-tag-bob 1.6s ease-in-out infinite; }
@keyframes aihv-tag-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.aihv-tag--bobbing { animation: none; }
}
/* ------- Glass frame backdrop ------- */
.aihv-glass {
position: absolute;
z-index: 1;
overflow: hidden;
border-top-right-radius: 48px;
border-bottom-right-radius: 48px;
background-color: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08), 0 2px 16px -4px rgba(0, 0, 0, 0.10);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80.973%, rgba(0,0,0,1) 100%);
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80.973%, rgba(0,0,0,1) 100%);
}
.aihv-glass__inner-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.20),
inset 0 0 8px 2px rgba(255, 255, 255, 0.12);
}
/* ------- The Assistant card ------- */
.aihv-card-wrap {
position: absolute;
left: 50%;
top: 50%;
z-index: 6;
transform: translate(-50%, -50%);
}
.aihv-card {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
height: 500px;
width: 100%;
max-width: 354px;
overflow: hidden;
border-radius: 24px;
background: #fff;
padding: 24px;
box-shadow: 0 0 82.3px rgba(122, 221, 225, 0.95);
font-family: var(--font-family-base);
font-feature-settings: 'ss03' 1;
}
.aihv-card__head {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.aihv-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
display: block;
}
.aihv-title {
font-size: 20px;
font-weight: 600;
line-height: 28px;
background-image: linear-gradient(90deg, rgb(32, 137, 141) 0%, rgb(184, 92, 214) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0;
font-feature-settings: 'ss03' 1;
}
/* ------- Close button ------- */
.aihv-close {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
border: 0;
border-radius: 16px;
background: transparent;
cursor: pointer;
overflow: hidden;
box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08), 0 2px 16px rgba(0, 0, 0, 0.10);
}
.aihv-close__bg {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image: linear-gradient(-77deg, rgb(9, 40, 42) 0%, rgb(17, 73, 75) 100%);
backdrop-filter: blur(40px);
}
.aihv-close__icon {
position: relative;
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
}
.aihv-close__inner-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.20),
inset 0 0 8px rgba(255, 255, 255, 0.12);
}
/* ------- Conversation column ------- */
.aihv-convo {
position: relative;
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
justify-content: flex-end;
gap: 16px;
}
.aihv-prompt-intro {
width: 100%;
margin: 0 0 auto 0;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #141414;
opacity: 0.61;
letter-spacing: -0.1px;
font-feature-settings: 'ss03' 1;
}
.aihv-prompt-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.aihv-prompt-item { max-width: 100%; }
/* ------- Prompt buttons (the chat-style pills) ------- */
.aihv-prompt-btn {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 16px;
border: 0;
border-radius: 19px;
background: transparent;
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 22px;
cursor: pointer;
text-align: left;
font-family: inherit;
overflow: hidden;
font-feature-settings: 'ss03' 1;
box-shadow:
0 0.5px 2px rgba(0, 0, 0, 0.08),
0 2px 16px rgba(0, 0, 0, 0.10);
}
.aihv-prompt-btn--multi { align-items: flex-start; }
.aihv-prompt-btn__bg {
position: absolute;
inset: 0;
border-radius: 19px;
pointer-events: none;
background-image: linear-gradient(-77deg, rgb(9, 40, 42) 0%, rgb(17, 73, 75) 100%);
backdrop-filter: blur(40px);
}
.aihv-prompt-btn__label {
position: relative;
display: block;
white-space: nowrap;
}
.aihv-prompt-btn--multi .aihv-prompt-btn__label {
white-space: normal;
max-width: 240px;
}
.aihv-prompt-btn__inner-shadow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.20),
inset 0 0 8px rgba(255, 255, 255, 0.12);
}
/* Featured prompt — gets the cyan glow halo + scale pulse */
.aihv-prompt-btn--featured {
box-shadow:
0 0.5px 2px rgba(0, 0, 0, 0.08),
0 2px 16px rgba(0, 0, 0, 0.10),
0 0 20px rgba(122, 221, 225, 0.45),
0 0 42px rgba(122, 221, 225, 0.28);
}
/* ------- BorderBeam: rotating conic gradient ring around featured prompt ------- */
@property --aihv-beam-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.aihv-beam {
position: relative;
display: inline-block;
border-radius: 19px;
isolation: isolate;
}
.aihv-beam__ring {
position: absolute;
inset: -1px;
z-index: 0;
border-radius: inherit;
padding: 1.5px;
/* Colorful, dark-theme, duration 2.2s — match `colorVariant="colorful"` */
background: conic-gradient(
from var(--aihv-beam-angle),
rgba(122, 221, 225, 0) 0deg,
rgba(122, 221, 225, 0.95) 40deg,
rgba(184, 92, 214, 0.95) 100deg,
rgba(165, 51, 204, 0.65) 160deg,
rgba(122, 221, 225, 0) 200deg,
rgba(122, 221, 225, 0) 360deg
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: aihv-beam-spin 2.2s linear infinite;
pointer-events: none;
}
@keyframes aihv-beam-spin {
to { --aihv-beam-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.aihv-beam__ring { animation: none; }
}
/* The featured button itself uses a CSS scale pulse (matches GSAP yoyo) */
.aihv-prompt-btn--featured {
animation: aihv-prompt-pulse 1.6s ease-in-out infinite;
transform-origin: center;
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes aihv-prompt-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
.aihv-prompt-btn--featured:hover,
.aihv-prompt-btn--featured:focus-visible {
animation: none;
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.aihv-prompt-btn--featured { animation: none; }
.aihv-prompt-btn--featured:hover,
.aihv-prompt-btn--featured:focus-visible { transform: none; }
}
/* ------- Active demo (user bubble + answer + chart) ------- */
.aihv-answer-wrap {
display: flex;
width: 100%;
flex-direction: column;
gap: 12px;
}
.aihv-bubble-row { display: flex; width: 100%; }
.aihv-bubble-row--user { justify-content: flex-end; }
.aihv-bubble-user {
position: relative;
display: inline-flex;
align-items: center;
max-width: 95%;
padding: 8px 16px;
border-radius: 19px;
overflow: hidden;
box-shadow:
0 0.5px 2px rgba(0, 0, 0, 0.08),
0 2px 16px rgba(0, 0, 0, 0.10);
text-align: left;
font-family: inherit;
font-feature-settings: 'ss03' 1;
}
.aihv-bubble-user--multi { align-items: flex-start; }
.aihv-bubble-user--multi .aihv-prompt-btn__label {
white-space: normal;
max-width: 240px;
}
.aihv-bubble-user--comp {
width: 271px;
max-width: 271px;
}
.aihv-bubble-user .aihv-prompt-btn__label {
position: relative;
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: #fff;
}
.aihv-answer-row {
display: flex;
width: 100%;
justify-content: flex-start;
}
.aihv-answer__text {
margin: 0;
width: 100%;
padding-right: 16px;
font-size: 14px;
font-weight: 500;
line-height: 22px;
color: #141414;
opacity: 0.75;
font-feature-settings: 'ss03' 1;
word-break: break-word;
}
.aihv-answer__text--email { white-space: pre-wrap; }
/* `ai-answer-word-fade` is the shared global class; included here for completeness. */
.ai-answer-word-fade {
opacity: 0;
animation: ai-answer-word-fade-in 260ms ease-out forwards;
display: inline;
white-space: pre-wrap;
}
@keyframes ai-answer-word-fade-in {
from { opacity: 0; filter: blur(1px); }
to { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.ai-answer-word-fade { animation: none; opacity: 1; }
}
/* ------- Charts (inline) ------- */
.aihv-chart-wrap {
display: flex;
width: 100%;
overflow: hidden;
justify-content: flex-start;
animation: aihv-chart-wrap-in 0.46s ease-out both;
}
@keyframes aihv-chart-wrap-in {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 200px; }
}
.aihv-chart {
width: 100%;
max-width: 95%;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
padding: 16px 16px 12px;
box-shadow:
0 0.239px 0 rgba(0, 0, 0, 0.15),
0 0.479px 1.914px rgba(0, 0, 0, 0.15);
animation: aihv-chart-in 0.46s ease-out both;
}
@keyframes aihv-chart-in {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.aihv-chart--comp { max-width: 100%; }
.aihv-chart__title {
margin: 0 0 12px 0;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #141414;
}
.aihv-chart__plot {
position: relative;
height: 140px;
}
.aihv-chart__gridline {
position: absolute;
left: 0;
right: 0;
border-top: 1px solid #ececec;
pointer-events: none;
}
.aihv-chart__bars {
display: flex;
align-items: flex-end;
gap: 8px;
height: 100%;
}
.aihv-chart__bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.aihv-chart__bar {
width: 100%;
border-radius: 4px;
background: #8821ab;
transform-origin: bottom;
animation: aihv-bar-grow 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes aihv-bar-grow {
from { transform: scaleY(0); opacity: 0.7; }
to { transform: scaleY(1); opacity: 1; }
}
.aihv-chart__bar-col:nth-child(2) .aihv-chart__bar { animation-delay: 0.10s; }
.aihv-chart__bar-col:nth-child(3) .aihv-chart__bar { animation-delay: 0.20s; }
.aihv-chart__bar-col:nth-child(4) .aihv-chart__bar { animation-delay: 0.30s; }
.aihv-chart__bar-col:nth-child(5) .aihv-chart__bar { animation-delay: 0.40s; }
.aihv-chart__year {
font-size: 10px;
line-height: 12px;
color: #424242;
}
.aihv-chart__hbars {
display: flex;
flex-direction: column;
gap: 4px;
}
.aihv-chart__hbar-row {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 8px;
}
.aihv-chart__hbar-label,
.aihv-chart__hbar-value {
font-size: 10px;
font-weight: 500;
line-height: 12px;
color: rgba(5, 7, 11, 0.62);
}
.aihv-chart__hbar-track {
height: 32px;
border-radius: 4px;
overflow: hidden;
}
.aihv-chart__hbar-fill {
height: 100%;
border-radius: 4px;
transform-origin: left;
animation: aihv-bar-grow-x 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes aihv-bar-grow-x {
from { transform: scaleX(0); opacity: 0.7; }
to { transform: scaleX(1); opacity: 1; }
}
.aihv-chart__hbar-row:nth-child(2) .aihv-chart__hbar-fill { animation-delay: 0.10s; }
.aihv-chart__hbar-row:nth-child(3) .aihv-chart__hbar-fill { animation-delay: 0.20s; }
.aihv-chart__hbar-row:nth-child(4) .aihv-chart__hbar-fill { animation-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
.aihv-chart-wrap, .aihv-chart, .aihv-chart__bar, .aihv-chart__hbar-fill {
animation: none;
opacity: 1;
transform: none;
max-height: none;
}
}
/* ============================================================================
CONNECTORS
============================================================================ */
.aihv-connectors {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.aihv-line {
position: absolute;
display: block;
max-width: none;
}
.aihv-line--full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.aihv-line-dot {
position: absolute;
}
.aihv-flip-y {
width: 100%;
height: 100%;
position: relative;
transform: scaleY(-1);
}
.aihv-flowdot-svg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* ============================================================================
RIGHT-SIDE DATA RAIL — at left: 77.29% per Figma
============================================================================ */
.aihv-rail {
position: absolute;
left: 77.2917%;
top: 50%;
z-index: 6;
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.aihv-rail__item {
width: auto;
flex-shrink: 0;
}
.aihv-rail__label {
display: block;
border-left: 1px solid #93e3e6;
padding: 4px 0 4px 8px;
font-family: var(--font-family-base);
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #fff;
white-space: nowrap;
font-feature-settings: 'ss03' 1;
letter-spacing: -0.1px;
}
/* ============================================================================
MOBILE FALLBACK (<1100px)
============================================================================ */
.aihv-mobile {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
max-width: 520px;
margin: 0 auto;
padding: 0;
}
.aihv-mobile .aihv-card {
margin: 0 auto;
min-width: 0;
}
@media (max-width: 1099px) {
.aiass-stage-inner { min-height: 600px; padding: 40px 16px; }
}
@media (max-width: 640px) {
.aiass-header { padding: 60px 20px 24px; }
}