/* ===== css/fonts.css ===== */
/* fonts.css — the three families, latin only, served from this site (no third-party font host).
Built by fetch-vendor.mjs from the same Google Fonts request the page used to make. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500 900;
font-stretch: 100% 125%;
font-display: swap;
src: url("../assets/fonts/archivo.woff2?v=20261014") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 600;
font-stretch: 90% 100%;
font-display: swap;
src: url("../assets/fonts/instrument-sans.woff2?v=20261014") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/jetbrains-mono.woff2?v=20261014") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../assets/fonts/jetbrains-mono.woff2?v=20261014") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== css/tokens.css ===== */
/* ============================================================================
MK — TOKENS · "Drawn first, built second"
----------------------------------------------------------------------------
The one file allowed to hold a literal colour, size, duration or curve.
Everything else reads these names. Zero !important anywhere.
THE IDEA THE TOKENS ENCODE
Mohamed designs every screen in Figma and only then builds it. The page
is split along that same line, and colour carries the meaning:
violet = the BUILT layer — the brand, filled buttons, the live site
teal = the TOOL layer — selection boxes, measurements, focus, "live"
paper = the DRAWING BOARD — the one light stretch of the page, where
the method and the process are shown, as if inside the file
Type: Archivo (a variable grotesque with a real width axis) set wide and
heavy for display, Instrument Sans for reading, JetBrains Mono only where
the content is a spec — a size, a file name, a year, a step.
========================================================================== */
:root {
/* ── 1. COLOUR ──────────────────────────────────────────────────────── */
/* The dark canvas — a violet-black, never neutral grey. */
--ink: #0B0912;
--surface-1: #100D18;
--surface-2: #15111F;
--surface-3: #1B1628;
--surface-4: #231D33;
/* Brand */
--violet-600: #7A22DB; /* fills: primary buttons, plates */
--violet-400: #A855F7; /* accent text on dark */
--violet-100: #EBDDFF;
--teal-400: #2DD4BF; /* the tool colour: selection, measure, focus */
--teal-600: #0F9E8C; /* teal that holds 4.5:1 on paper */
/* The drawing board (light) */
--paper: #EFECF5;
--paper-2: #E4DFEE;
--paper-3: #D8D1E6;
--paper-ink: #15111F; /* text on paper — 15.9:1 */
--paper-ink-2: #4A4360; /* secondary text on paper — 8.1:1 */
--paper-violet: #6419B8; /* violet that holds 7:1 on paper */
/* Triplets for rgba() */
--ink-rgb: 11, 9, 18;
--surface-1-rgb: 16, 13, 24;
--surface-2-rgb: 21, 17, 31;
--surface-3-rgb: 27, 22, 40;
--surface-4-rgb: 35, 29, 51;
--violet-600-rgb: 122, 34, 219;
--violet-400-rgb: 168, 85, 247;
--violet-100-rgb: 235, 221, 255;
--teal-400-rgb: 45, 212, 191;
--paper-rgb: 239, 236, 245;
--paper-ink-rgb: 21, 17, 31;
--white-rgb: 238, 234, 246;
/* Text on dark. --text-3 is for labels and meta only. */
--text-1: #EEEAF6; /* 16.4:1 on --ink */
--text-2: rgba(238, 234, 246, .72);
--text-3: rgba(238, 234, 246, .52);
--text-on-violet: #FFFFFF;
/* Pre-mixed alphas */
--violet-a08: rgba(122, 34, 219, .08);
--violet-a12: rgba(122, 34, 219, .12);
--violet-a20: rgba(122, 34, 219, .20);
--violet-a28: rgba(122, 34, 219, .28);
--violet-a45: rgba(122, 34, 219, .45);
--teal-a10: rgba(45, 212, 191, .10);
--teal-a18: rgba(45, 212, 191, .18);
--teal-a50: rgba(45, 212, 191, .50);
--white-a05: rgba(238, 234, 246, .05);
--white-a08: rgba(238, 234, 246, .08);
--white-a12: rgba(238, 234, 246, .12);
--white-a18: rgba(238, 234, 246, .18);
/* Hairlines */
--rule: rgba(238, 234, 246, .10);
--rule-soft: rgba(238, 234, 246, .06);
--rule-strong: rgba(238, 234, 246, .22);
--paper-rule: rgba(21, 17, 31, .12);
--paper-rule-strong: rgba(21, 17, 31, .28);
/* Gradients. The brand gradient exists for the logo and ONE accent per
view — it is not a text treatment for every heading. */
--grad-brand: linear-gradient(100deg, var(--violet-600) 0%, var(--teal-400) 100%);
--grad-brand-light: linear-gradient(100deg, var(--violet-400) 0%, var(--teal-400) 100%);
--grad-fade-x: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
/* The canvas grid — Figma's layout grid, drawn at 8px/64px. */
--grid-line: rgba(238, 234, 246, .045);
--grid-line-paper: rgba(21, 17, 31, .07);
--grid-major: 4rem;
/* ── 2. THE MK CUT — the logo's 21° slant ───────────────────────────── */
--mk-angle: 21deg;
--mk-angle-neg: -21deg;
--mk-tan: 0.38386;
--mk-cut: .7rem; /* the slanted corner on buttons and tags */
/* ── 3. TYPE ────────────────────────────────────────────────────────── */
--font-display: "Archivo", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
--font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Archivo's width axis. Display type is set WIDE — it is the voice. */
--wdth-display: 118%;
--wdth-heading: 110%;
--wdth-ui: 100%;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-heavy: 800;
/* Continuous ramps, 375 → 1440. */
--fs-h1: clamp(2.75rem, 1rem + 6vw, 6.4rem); /* 44 → 102 */
--fs-h2: clamp(2.1rem, 1.35rem + 3.2vw, 4.25rem); /* 34 → 68 */
--fs-h3: clamp(1.3rem, 1.16rem + .6vw, 1.7rem); /* 21 → 27 */
--fs-h4: clamp(1.1rem, 1.04rem + .28vw, 1.3rem); /* 18 → 21 */
--fs-h5: 1.0625rem;
--fs-h6: 1rem;
--fs-lede: clamp(1.125rem, .99rem + .56vw, 1.5rem); /* 18 → 24 */
--fs-body: clamp(1rem, .96rem + .19vw, 1.125rem); /* 16 → 18 */
--fs-sm: clamp(.9375rem, .91rem + .12vw, 1rem);
--fs-xs: .8125rem;
--fs-eyebrow: .75rem; /* mono labels */
--fs-stat: clamp(3.25rem, 1.9rem + 5.8vw, 7rem);
--fs-mega: clamp(4.5rem, 1rem + 15vw, 15rem); /* WORK, marquee */
--lh-tight: .92;
--lh-heading: 1.02;
--lh-snug: 1.3;
--lh-body: 1.62;
--lh-loose: 1.8;
--ls-tight: -.035em;
--ls-heading: -.022em;
--ls-snug: -.01em;
--ls-normal: 0;
--ls-wide: .08em;
--measure: 62ch;
--measure-narrow: 46ch;
/* ── 4. SPACE ───────────────────────────────────────────────────────── */
--space-2xs: .25rem;
--space-xs: .5rem;
--space-sm: .75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4.5rem;
--space-4xl: 7rem;
--sec-pad: clamp(5rem, 3rem + 8vw, 10rem);
--sec-pad-tight: clamp(3rem, 2rem + 4vw, 5.5rem);
--gap-grid: clamp(1rem, .8rem + .9vw, 1.75rem);
--gap-grid-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
--card-pad-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
--card-pad-inline: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
--container-max: 1360px;
--container-narrow: 60rem;
--container-wide: 1640px;
--container-pad: clamp(1.25rem, .6rem + 2.8vw, 3.5rem);
--nav-h: 4.25rem;
--scroll-progress-h: 2px;
/* ── 5. SHAPE ───────────────────────────────────────────────────────── */
/* Sharp, like a design file. Round only where a thing is a pill. */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-pill: 999px;
--border-w: 1px;
--border-w-thick: 2px;
--border: var(--border-w) solid var(--rule);
--border-strong: var(--border-w) solid var(--rule-strong);
--border-brand: var(--border-w) solid var(--violet-a45);
--border-live: var(--border-w) solid var(--teal-a50);
--shadow-card: 0 1px 0 var(--white-a05) inset, 0 24px 48px -28px rgba(0, 0, 0, .7);
--shadow-card-hover: 0 1px 0 var(--white-a08) inset, 0 32px 64px -28px rgba(0, 0, 0, .8);
--shadow-pop: 0 30px 80px -30px rgba(0, 0, 0, .85);
--shadow-btn: 0 10px 28px -12px rgba(122, 34, 219, .75);
--shadow-paper: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 50px -30px rgba(21, 17, 31, .35);
--ring-inner: inset 0 0 0 var(--border-w) var(--rule);
--shadow-inset-seam: inset 0 1px 0 var(--rule-soft);
--blur-sm: 8px;
--blur-md: 16px;
--blur-glow: 80px;
--mask-solid: #000;
/* ── 6. MOTION — tuned slow and deliberate ─────────────────────────── */
--dur-instant: .18s;
--dur-fast: .36s;
--dur-base: .72s;
--dur-slow: 1.05s;
--dur-hero: 1.4s;
--ease-out: cubic-bezier(.19, 1, .22, 1);
--ease-in-out: cubic-bezier(.87, 0, .13, 1);
--ease-in: cubic-bezier(.55, .085, .68, .53);
--lift: -3px;
--stagger: .055s;
--marquee-dur: 60s;
/* ── 7. LAYERS ──────────────────────────────────────────────────────── */
--z-below: -1;
--z-base: 0;
--z-raised: 2;
--z-sticky: 20;
--z-nav: 100;
--z-widget: 110;
--z-menu-overlay: 190;
--z-menu: 200;
--z-progress: 210;
--z-cursor: 300;
--z-preloader: 400;
/* ── 8. CONTROLS & SIZES ────────────────────────────────────────────── */
--focus-color: var(--teal-400);
--focus-w: 2px;
--focus-offset: 3px;
--focus-ring: 0 0 0 var(--focus-w) var(--focus-color);
--size-touch: 2.75rem;
--size-touch-lg: 3.25rem;
--size-icon: 1.25rem;
--size-icon-lg: 2.25rem;
--size-tile: 2.75rem;
--size-tile-lg: 3.5rem;
--size-avatar: 2.75rem;
--size-dot: .5rem;
--icon-stroke: 1.6;
--btn-pad-block: .85rem;
--btn-pad-inline: 1.35rem;
--btn-pad-block-lg: 1.05rem;
--btn-pad-inline-lg: 1.75rem;
--field-pad-block: .9rem;
--field-pad-inline: 1rem;
--field-radius: var(--radius-sm);
--chip-mark-h: .9rem;
--chip-stroke-w: 2px;
--chip-stroke-gap: 3px;
--rail-card-w: min(82vw, 30rem);
--marquee-gap: clamp(1.25rem, 3vw, 2.75rem);
--logo-h: 1.9rem;
--menu-w: min(100vw, 34rem);
--signature-logo-w: min(78vw, 36rem);
--hero-min-h: 100svh;
--hero-min-h-fallback: 100vh;
/* Selection box — the signature. Teal, 1px, square handles, a size readout. */
--select-line: var(--teal-400);
--select-handle: .5rem;
}
/* ── 9. GLOSS — the luminous layer (reference: a lit stage, glowing pills) ─
Added in the second pass. Violet light is the one ornament: it rims the
primary buttons, glows under the hero stage and sweeps across what arrives. */
:root {
--lilac: #C084FC;
--violet-glow: rgba(168, 85, 247, .55);
--violet-glow-soft: rgba(168, 85, 247, .22);
--grad-violet: linear-gradient(135deg, #7A22DB 0%, #A855F7 55%, #C084FC 100%);
--grad-violet-text: linear-gradient(180deg, #FFFFFF 0%, #E9D5FF 45%, #A855F7 100%);
--grad-border: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(168, 85, 247, .55) 45%, rgba(255, 255, 255, .06));
--glass: rgba(21, 17, 31, .62);
--glass-strong: rgba(21, 17, 31, .82);
--glass-line: rgba(238, 234, 246, .12);
--radius-stage: clamp(1.5rem, 1rem + 2vw, 2.75rem);
--radius-panel: 1.25rem;
--shadow-glow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 34px -8px var(--violet-glow), 0 0 0 5px rgba(168, 85, 247, .12);
--shadow-glow-hover: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 14px 44px -8px rgba(168, 85, 247, .8), 0 0 0 6px rgba(168, 85, 247, .18);
}
/* Title colours, readable anywhere a title appears (not only in .sec-head). */
:root {
--title-rgb: 238, 234, 246;
--accent-rgb: 192, 132, 252;
}
/* ===== css/base.css ===== */
/* ============================================================================
MK — BASE · reset, element defaults, accessibility, the flash guard.
Reads tokens.css only. No component styling lives here.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* NO scroll-behavior: smooth, on purpose. ScrollTrigger reads it once,
then after every refresh writes it back as an INLINE style — which
beats any stylesheet — and Lenis's per-frame scrollTo() calls each
became a native animated scroll: two smoothers fighting over one
position. Smooth anchor jumps are done in js/ui.js instead. */
scroll-padding-top: calc(var(--nav-h) + var(--space-lg));
color-scheme: dark;
/* clip, not hidden: never makes a scroll container. */
overflow-x: clip;
}
body {
min-block-size: 100vh;
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--text-1);
background-color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
/* The menu and the brief panel freeze the page. is the scroller (its
overflow-x: clip stops body's overflow reaching the viewport), so the
lock goes on ; a lock on body froze nothing. Lenis is stopped too. */
html.is-menu-open,
html.is-brief-open { overflow: hidden; }
/* ── Lenis (desktop smooth scroll, js/motion.js) — the rules lenis.css ships */
html.lenis,
html.lenis body { block-size: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: balance;
color: inherit;
}
h1 {
font-size: var(--fs-h1);
font-stretch: var(--wdth-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
h2 { font-size: var(--fs-h2); }
h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
font-stretch: var(--wdth-ui);
letter-spacing: var(--ls-snug);
line-height: var(--lh-snug);
}
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); font-stretch: var(--wdth-ui); letter-spacing: var(--ls-snug); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-bold); font-stretch: var(--wdth-ui); letter-spacing: 0; }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-bold); font-stretch: var(--wdth-ui); letter-spacing: 0; }
p { text-wrap: pretty; }
b, strong { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-sm); }
blockquote { quotes: none; }
hr {
block-size: 0;
border: 0;
border-block-start: var(--border);
}
a {
color: inherit;
text-decoration-color: var(--violet-400);
text-decoration-thickness: 1px;
text-underline-offset: .22em;
transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--teal-400); }
.link-plain { text-decoration: none; }
.link-plain:hover { color: var(--teal-400); }
ul, ol { padding: 0; }
.list-plain { list-style: none; }
img, svg, video, canvas, picture {
display: block;
max-inline-size: 100%;
}
img { block-size: auto; }
svg { fill: none; stroke: currentColor; }
figure { margin: 0; }
input, button, textarea, select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
::placeholder { color: var(--text-3); opacity: 1; }
table { border-collapse: collapse; }
/* ── Accessibility ────────────────────────────────────────────────────── */
:focus-visible {
outline: var(--focus-w) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }
/* Programmatic focus targets (a section reached by an anchor, the form's
success panel) are not controls: no ring around a whole block. */
[tabindex="-1"]:focus { outline: none; }
::selection {
background: var(--teal-400);
color: var(--ink);
}
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
inset-block-start: var(--space-sm);
inset-inline-start: var(--space-sm);
z-index: calc(var(--z-preloader) + 1);
padding: var(--space-sm) var(--space-md);
background: var(--teal-400);
color: var(--ink);
font-weight: var(--fw-semibold);
text-decoration: none;
transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
[hidden][hidden] { display: none; }
/* ── Flash guard ──────────────────────────────────────────────────────────
Scoped to `.js` on , set by one inline script in . With
scripting off the class never exists and everything paints normally.
js/motion.js removes the class once every from-state is inline. */
.js [data-anim] { visibility: hidden; }
/* ── Reduced motion — collapse the duration tokens, lift the guard ───── */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: .01ms;
--dur-fast: .01ms;
--dur-base: .01ms;
--dur-slow: .01ms;
--dur-hero: .01ms;
--lift: 0px;
--stagger: 0s;
}
.js [data-anim] { visibility: visible; }
*,
*::before,
*::after { animation-iteration-count: 1; }
}
/* The hero copy waits for its fonts (the class is set and cleared by the
inline script in the head, 2.5s at most). Hidden, not removed: it keeps
its place, and what is not painted cannot shift. */
.fonts-wait .hero__inner { visibility: hidden; }
/* ===== css/layout.css ===== */
/* ============================================================================
MK — LAYOUT · containers, sections, and the four layout primitives.
Mobile-first; breakpoints are 640 / 900 / 1200 and nothing else.
========================================================================== */
/* ── Containers ──────────────────────────────────────────────────────── */
.container {
inline-size: 100%;
max-inline-size: calc(var(--container-max) + var(--container-pad) * 2);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow { max-inline-size: calc(var(--container-narrow) + var(--container-pad) * 2); }
.container--wide { max-inline-size: calc(var(--container-wide) + var(--container-pad) * 2); }
.container--full { max-inline-size: none; }
/* ── Sections ────────────────────────────────────────────────────────────
Surfaces are named by what they are, not by a depth number:
ink (the canvas), board (a raised dark panel), paper (the drawing board). */
.section {
position: relative;
padding-block: var(--sec-pad);
background-color: var(--ink);
color: var(--text-1);
}
.section--tight { padding-block: var(--sec-pad-tight); }
.section--flush { padding-block: 0; }
.section--ink { background-color: var(--ink); }
.section--s1 { background-color: var(--surface-1); }
.section--s2 { background-color: var(--surface-2); }
.section--s3 { background-color: var(--surface-3); }
/* The drawing board. Text, rules and links all switch to their paper
values, so a component placed here needs no special variant. */
.section--paper {
--text-1: var(--paper-ink);
--text-2: var(--paper-ink-2);
--text-3: rgba(21, 17, 31, .58);
--rule: var(--paper-rule);
--rule-soft: rgba(21, 17, 31, .07);
--rule-strong: var(--paper-rule-strong);
--violet-400: var(--paper-violet);
--teal-400: var(--teal-600);
--grid-line: var(--grid-line-paper);
background-color: var(--paper);
color: var(--paper-ink);
color-scheme: light;
}
/* The layout grid, drawn — Figma's 8px/64px canvas. Put .canvas-grid on a
section to show it; it sits behind everything and never takes a click. */
.canvas-grid {
background-image:
linear-gradient(to right, var(--grid-line) var(--border-w), transparent var(--border-w)),
linear-gradient(to bottom, var(--grid-line) var(--border-w), transparent var(--border-w));
background-size: var(--grid-major) var(--grid-major);
background-position: calc(50% + var(--grid-major) / 2) 0;
}
.layer-behind {
position: absolute;
inset: 0;
z-index: var(--z-below);
overflow: clip;
pointer-events: none;
}
.layer-front { position: relative; z-index: var(--z-base); }
/* ── Stack: vertical rhythm ─────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack--xs { gap: var(--space-xs); }
.stack--sm { gap: var(--space-sm); }
.stack--md { gap: var(--space-md); }
.stack--lg { gap: var(--space-lg); }
.stack--xl { gap: var(--space-xl); }
.stack--2xl { gap: var(--space-2xl); }
.stack--3xl { gap: var(--space-3xl); }
.stack--center { align-items: center; text-align: center; }
/* ── Cluster: a wrapping row ────────────────────────────────────────── */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.cluster--md { gap: var(--space-md); }
.cluster--lg { gap: var(--space-lg); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
/* ── Grid ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap-grid); grid-template-columns: minmax(0, 1fr); }
/* ── Split: two columns from 900px ──────────────────────────────────── */
.split { display: grid; gap: var(--gap-grid-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* ── Helpers ────────────────────────────────────────────────────────── */
.measure { max-inline-size: var(--measure); }
.measure--narrow { max-inline-size: var(--measure-narrow); }
.text-center { text-align: center; }
@media (min-width: 640px) {
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--trail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}
/* A dark island on the paper board — a device screen, a browser window.
Resets the text and rule tokens to their dark values inside it. */
.on-dark {
--text-1: #EEEAF6;
--text-2: rgba(238, 234, 246, .72);
--text-3: rgba(238, 234, 246, .52);
--rule: rgba(238, 234, 246, .10);
--rule-soft: rgba(238, 234, 246, .06);
--rule-strong: rgba(238, 234, 246, .22);
--violet-400: #A855F7;
--teal-400: #2DD4BF;
color: var(--text-1);
color-scheme: dark;
}
/* ===== css/components.css ===== */
/* ============================================================================
MK — COMPONENTS
Every reusable piece. Section-specific layout lives in sections.css,
effect-specific styling in fx.css. Tokens only; no !important.
========================================================================== */
/* ══ 1. SECTION HEAD ═════════════════════════════════════════════════════
Centred, like the hero: a small label, the title in the hero's voice
(white, then violet with a glow), and a lede only where it adds a fact.
The title is built by js/motion.js (titleBuild): selected, drawn as an
outline, filled. --fill rests at 1, so with no script it is simply built. */
.sec-head {
--title-rgb: var(--white-rgb);
--accent-rgb: 192, 132, 252;
display: grid;
justify-items: center;
gap: var(--space-lg);
max-inline-size: 60rem;
margin-inline: auto;
margin-block-end: clamp(var(--space-2xl), 5vw, var(--space-4xl));
text-align: center;
}
.section--paper .sec-head { --title-rgb: var(--paper-ink-rgb); --accent-rgb: 100, 25, 184; }
.sec-head--start { justify-items: start; margin-inline: 0; text-align: start; }
.sec-label {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: .3rem .8rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: rgba(168, 85, 247, .08);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-2);
}
.section--paper .sec-label { border-color: var(--paper-rule); background: rgba(100, 25, 184, .06); }
/* the contact label looks like a pill, so people tap it (Clarity, 2026-10-14):
there it is a real link that takes them into the form's first step */
a.sec-label { text-decoration: none; transition: border-color var(--dur-fast, .2s) ease, color var(--dur-fast, .2s) ease; }
a.sec-label:hover, a.sec-label:focus-visible { border-color: var(--violet-400); color: #fff; }
.sec-label::before {
content: "";
inline-size: .45rem;
block-size: .45rem;
border-radius: var(--radius-pill);
background: var(--violet-400);
box-shadow: 0 0 10px 1px var(--violet-glow);
}
.sec-title {
--fill: 1;
max-inline-size: 20ch;
font-size: clamp(2.1rem, 1.3rem + 3.3vw, 4.4rem);
color: rgba(var(--title-rgb), var(--fill));
-webkit-text-stroke: 1px rgba(var(--teal-400-rgb), calc(1 - var(--fill)));
}
.sec-title__accent {
color: rgba(var(--accent-rgb), var(--fill));
text-shadow: 0 0 36px rgba(168, 85, 247, calc(var(--fill) * .5));
}
.section--paper .sec-title__accent { text-shadow: none; }
/* The selection box around a title — shown while it builds, then on hover. */
.sel--title {
justify-self: center;
inline-size: fit-content;
max-inline-size: 100%;
}
.sec-head--start .sel--title { justify-self: start; }
.sel--title .sel__frame,
.sel--title .sel__h,
.sel--title .sel__size { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
/* a section title has its lede right below it: the readout sits on the
frame's top-right corner instead, clear of the text */
.sel--title .sel__size {
inset-block: auto calc(100% + var(--space-sm) + var(--space-xs));
inset-inline: auto calc(var(--space-sm) * -1);
translate: none;
}
.sel--title.is-selected .sel__frame,
.sel--title.is-selected .sel__h,
.sel--title.is-selected .sel__size { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.sel--title.is-built:hover .sel__frame,
.sel--title.is-built:hover .sel__h,
.sel--title.is-built:hover .sel__size { opacity: 1; }
}
.sec-lede {
max-inline-size: 50ch;
font-size: var(--fs-lede);
line-height: var(--lh-snug);
color: var(--text-2);
}
/* ══ 2. BUTTONS ══════════════════════════════════════════════════════════
The primary button is the one "built" object in any view: a violet plate
whose trailing edge leans 21°, like the logo. The plate is a pseudo-
element so the clip-path never clips the focus ring on the button. */
.btn {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-block-size: var(--size-touch);
padding: var(--btn-pad-block) var(--btn-pad-inline);
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
color: var(--text-1);
cursor: pointer;
transition: color var(--dur-fast) var(--ease-out);
}
.btn--lg {
min-block-size: var(--size-touch-lg);
padding: var(--btn-pad-block-lg) var(--btn-pad-inline-lg);
font-size: var(--fs-body);
}
.btn--block { inline-size: 100%; }
.btn__arrow {
inline-size: 1em;
block-size: 1em;
stroke-width: 2;
transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
/* primary — a lit violet pill: gradient fill, a hairline of white on the
rim, and a soft violet halo that grows on hover. */
.btn--primary {
border-radius: var(--radius-pill);
background: var(--grad-violet);
color: var(--text-on-violet);
box-shadow: var(--shadow-glow);
transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn--primary:hover { box-shadow: var(--shadow-glow-hover); filter: brightness(1.08); }
/* the gloss — a highlight across the top half of the pill */
.btn--primary::before {
content: "";
position: absolute;
inset: 1px 1px 50% 1px;
z-index: -1;
border-radius: var(--radius-pill) var(--radius-pill) 40% 40% / var(--radius-pill) var(--radius-pill) 100% 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
pointer-events: none;
}
/* outline — glass pill with a gradient rim (two backgrounds: the fill on the
padding box, the gradient on the border box). */
.btn--outline {
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
color: var(--text-1);
transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--outline:hover { box-shadow: 0 8px 28px -10px var(--violet-glow); color: #fff; }
/* quiet — words and an arrow */
.btn--quiet {
min-block-size: auto;
padding: var(--space-2xs) 0;
color: var(--text-1);
border-block-end: var(--border-w) solid var(--rule-strong);
}
.btn--quiet:hover { border-block-end-color: var(--teal-400); }
/* ══ 3. SELECTION BOX — the signature ════════════════════════════════════
What an element looks like when it is selected in Figma: a 1px teal frame,
four handles (leaning 21°, the one liberty taken), and a size readout.
Wrap any element in .sel; the parts are spans so they can be animated.
…tr / bl / br
1184 × 236 */
.sel { position: relative; }
.sel__frame {
position: absolute;
inset: calc(var(--space-sm) * -1);
border: var(--border-w) solid var(--select-line);
pointer-events: none;
}
.sel__h {
position: absolute;
inline-size: var(--select-handle);
block-size: var(--select-handle);
background: var(--ink);
border: var(--border-w) solid var(--select-line);
transform: skewX(var(--mk-angle-neg));
pointer-events: none;
}
.section--paper .sel__h { background: var(--paper); }
.sel__h--tl { inset-block-start: calc(var(--space-sm) * -1 - var(--select-handle) / 2); inset-inline-start: calc(var(--space-sm) * -1 - var(--select-handle) / 2); }
.sel__h--tr { inset-block-start: calc(var(--space-sm) * -1 - var(--select-handle) / 2); inset-inline-end: calc(var(--space-sm) * -1 - var(--select-handle) / 2); }
.sel__h--bl { inset-block-end: calc(var(--space-sm) * -1 - var(--select-handle) / 2); inset-inline-start: calc(var(--space-sm) * -1 - var(--select-handle) / 2); }
.sel__h--br { inset-block-end: calc(var(--space-sm) * -1 - var(--select-handle) / 2); inset-inline-end: calc(var(--space-sm) * -1 - var(--select-handle) / 2); }
.sel__size {
position: absolute;
inset-block-start: calc(100% + var(--space-sm) + var(--space-xs));
inset-inline-start: 50%;
translate: -50% 0;
padding: .2rem .45rem;
border-radius: var(--radius-xs);
background: var(--select-line);
color: var(--ink);
font-family: var(--font-mono);
font-size: .6875rem;
font-weight: var(--fw-medium);
letter-spacing: .02em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
/* Frame name — the label Figma prints above a frame. */
.frame-tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: .02em;
color: var(--text-3);
}
.frame-tag__dot {
inline-size: .45rem;
block-size: .45rem;
border: var(--border-w) solid currentColor;
transform: skewX(var(--mk-angle-neg));
}
/* ══ 4. TAGS & BADGES ════════════════════════════════════════════════════ */
/* Same glass pill as .sec-label and the .fig tabs, so every small mono label
on the page speaks one language. */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: .3rem .8rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: rgba(168, 85, 247, .08);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: .02em;
color: var(--text-2);
white-space: nowrap;
}
.tag--live { border-color: var(--teal-a50); color: var(--text-1); }
.tag--live::before {
content: "";
inline-size: .4rem;
block-size: .4rem;
border-radius: var(--radius-pill);
background: var(--teal-400);
}
.tag--brand { border-color: var(--violet-a45); color: var(--text-1); }
/* ══ 5. NAVBAR ═══════════════════════════════════════════════════════════
Logo left; the section links in a glass capsule in the middle (desktop);
on the right the one call to action and the Menu button, which opens the
side panel at every width. Transparent over the hero, glass once the page
moves. */
.navbar {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--z-nav);
block-size: var(--nav-h);
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
border-block-end: var(--border-w) solid transparent;
}
/* dense enough that the big section titles passing under it no longer read
through and compete with the links (no backdrop blur: a fixed blur
repaints on every scroll frame) */
.navbar.scrolled {
background-color: rgba(var(--ink-rgb), .97);
border-block-end-color: var(--glass-line);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
block-size: 100%;
}
/* the logo is 30px tall; the link around it is a full thumb target */
.navbar__brand { display: inline-flex; align-items: center; flex: none; min-block-size: var(--size-touch, 2.75rem); }
.navbar__logo { block-size: var(--logo-h); inline-size: auto; }
.navbar__links { display: none; }
.navbar__link {
position: relative;
padding: .45rem .95rem;
border-radius: var(--radius-pill);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-2);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.navbar__link:hover { color: var(--text-1); }
.navbar__link.is-active {
color: var(--text-1);
background: rgba(238, 234, 246, .08);
box-shadow: 0 0 0 var(--border-w) var(--glass-line) inset;
}
.navbar__actions { display: flex; align-items: center; gap: var(--space-sm); }
.navbar__cta { display: none; }
/* Menu button: a glass pill, the word and two bars. */
.menu-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-block-size: var(--size-touch);
padding-inline: var(--space-md) var(--space-sm);
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-1);
transition: border-color var(--dur-fast) var(--ease-out);
}
.menu-trigger:hover { border-color: rgba(168, 85, 247, .6); }
.menu-trigger__bars {
display: grid;
place-content: center;
gap: 4px;
inline-size: 1.9rem;
block-size: 1.9rem;
border-radius: var(--radius-pill);
background: var(--grad-violet);
}
.menu-trigger__bar {
display: block;
inline-size: .8rem;
block-size: var(--border-w-thick);
border-radius: var(--radius-pill);
background: #fff;
}
@media (min-width: 640px) {
.navbar__cta { display: inline-flex; }
}
@media (min-width: 1200px) {
.navbar__links {
position: absolute;
inset-inline: 0;
inline-size: max-content;
margin-inline: auto;
display: flex;
gap: var(--space-2xs);
padding: .3rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
}
.navbar__inner { position: relative; }
}
/* ══ 6. SIDE PANEL MENU — opens from the right at every width ════════════ */
.premium-menu {
position: fixed;
inset: 0;
z-index: var(--z-menu);
visibility: hidden;
pointer-events: none;
transition: visibility 0s linear var(--dur-base);
}
.premium-menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.premium-menu-overlay {
position: absolute;
inset: 0;
z-index: var(--z-menu-overlay);
background: rgba(var(--ink-rgb), .66);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
.premium-menu.is-open .premium-menu-overlay { opacity: 1; }
.premium-menu-content {
position: absolute;
inset-block: var(--space-sm);
inset-inline-end: var(--space-sm);
z-index: var(--z-menu);
display: flex;
flex-direction: column;
gap: var(--space-2xl);
inline-size: min(calc(100vw - var(--space-sm) * 2), 30rem);
padding: calc(var(--nav-h) + var(--space-md)) var(--space-xl) var(--space-xl);
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-stage);
background:
radial-gradient(90% 60% at 100% 100%, rgba(168, 85, 247, .28), transparent 70%),
radial-gradient(70% 50% at 0% 100%, rgba(122, 34, 219, .22), transparent 70%),
var(--surface-1);
box-shadow: var(--shadow-pop);
overflow-y: auto;
transform: translateX(calc(100% + var(--space-lg)));
transition: transform var(--dur-base) var(--ease-out);
}
.premium-menu.is-open .premium-menu-content { transform: none; }
.premium-menu-close {
position: absolute;
inset-block-start: var(--space-lg);
inset-inline-end: var(--space-lg);
display: grid;
place-items: center;
inline-size: var(--size-touch);
block-size: var(--size-touch);
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
color: var(--text-1);
transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.premium-menu-close:hover { border-color: rgba(168, 85, 247, .6); transform: rotate(90deg); }
.premium-menu-close .icon { inline-size: 1.25rem; block-size: 1.25rem; stroke-width: 1.8; }
.premium-menu-nav { display: grid; }
.premium-menu-nav li {
opacity: 0;
transform: translateX(24px);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.premium-menu.is-open .premium-menu-nav li { opacity: 1; transform: none; }
.premium-menu.is-open .premium-menu-nav li:nth-child(2) { transition-delay: .04s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(3) { transition-delay: .08s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(4) { transition-delay: .12s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(5) { transition-delay: .16s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(6) { transition-delay: .2s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(7) { transition-delay: .24s; }
.premium-menu.is-open .premium-menu-nav li:nth-child(8) { transition-delay: .28s; }
.premium-menu-nav .premium-menu-link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md);
padding-block: var(--space-sm);
border-block-end: var(--border-w) solid var(--glass-line);
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
letter-spacing: var(--ls-heading);
line-height: 1.15;
color: var(--text-1);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
/* the current section is marked by colour alone; the nudge is for hover, or
the active name sat off the column */
.premium-menu-nav .premium-menu-link:hover { padding-inline-start: var(--space-xs); }
.premium-menu-nav .premium-menu-link:hover,
.premium-menu-nav .premium-menu-link.is-active { color: var(--violet-400); }
.menu-link__index {
order: 2;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-regular);
letter-spacing: 0;
color: var(--text-3);
}
.premium-menu-footer {
display: grid;
gap: var(--space-md);
margin-block-start: auto;
font-size: var(--fs-sm);
color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
.premium-menu-nav li { opacity: 1; transform: none; transition: none; }
}
/* ══ 7. READING PROGRESS · PRELOADER ═════════════════════════════════════ */
/* js/ui.js writes a scaleX transform — composited, never a width. */
.scroll-progress {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--z-progress);
block-size: var(--scroll-progress-h);
background: var(--teal-400);
transform: scaleX(0);
transform-origin: 0 50%;
will-change: transform;
}
/* The preloader IS the hero stage, before the headline is built: the same
panel, corner lights, grid, arch, rim light and tool tiles (it reuses the
hero's classes, so they can never drift apart), with the mark in the
middle. When it lifts, the real hero underneath is its continuation. */
.mk-preloader {
position: fixed;
inset: 0;
z-index: var(--z-preloader);
padding-inline: var(--space-xs);
background: var(--ink);
will-change: transform;
}
.mk-preloader__stage {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
block-size: 100%;
padding: var(--container-pad);
border-radius: 0 0 var(--radius-stage) var(--radius-stage);
background:
radial-gradient(55% 60% at 0% 100%, rgba(122, 34, 219, .8), transparent 62%),
radial-gradient(50% 58% at 100% 100%, rgba(192, 132, 252, .6), transparent 62%),
linear-gradient(180deg, var(--ink) 0%, #120B22 55%, #1D0F36 100%);
overflow: clip;
}
/* The opening scene: a render built on the same stage — rays switching on
from behind the arch, a ring of light around the mark, dust rising. It
settles from a slight zoom while the count runs. */
.mk-preloader__stage::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: url("../assets/bg/preloader-tall.webp") center / cover no-repeat;
animation: preloader-bg-in 2.8s cubic-bezier(.16, 1, .3, 1) both;
}
@media (orientation: landscape) {
.mk-preloader__stage::before { background-image: url("../assets/bg/preloader-wide.webp"); }
}
@keyframes preloader-bg-in {
from { opacity: 0; transform: scale(1.16); }
35% { opacity: 1; }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.mk-preloader__stage::before { animation: none; }
}
.mk-preloader__stage > .hero__grid,
.mk-preloader__stage > .hero__arch { z-index: -1; }
.mk-preloader__center {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: var(--space-xl);
}
@media (min-width: 900px) {
.mk-preloader { padding-inline: var(--space-sm); }
}
.mk-preloader__mark {
position: relative;
display: grid;
inline-size: min(70vw, 26rem);
overflow: hidden;
filter: drop-shadow(0 0 28px rgba(168, 85, 247, .45));
}
.mk-preloader__mark > * { grid-area: 1 / 1; }
.mk-preloader__mark img { display: block; inline-size: 100%; block-size: auto; }
.mk-preloader__ghost { opacity: .1; }
.mk-preloader__wipe { display: block; clip-path: inset(0 100% 0 0); }
/* The light that crosses the mark at 100: masked by the logo itself, so it
lights the letters only — a moving gradient box showed its hard edges
against the dark stage. js/motion.js slides the gradient (background-
position), not the box. */
.mk-preloader__sheen {
z-index: 1;
background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
-webkit-mask: url("../assets/images/logo-gradient.png") center / 100% 100% no-repeat;
mask: url("../assets/images/logo-gradient.png") center / 100% 100% no-repeat;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.mk-preloader__meta {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-lg);
inline-size: min(70vw, 26rem);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.mk-preloader-count {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-heavy);
letter-spacing: 0;
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
.mk-preloader-count::after { content: "%"; color: var(--lilac); }
.mk-preloader-bar {
position: relative;
inline-size: min(70vw, 26rem);
block-size: 2px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .08);
overflow: hidden;
}
.mk-preloader-bar i {
display: block;
block-size: 100%;
background: var(--grad-violet);
box-shadow: 0 0 14px var(--violet-glow);
transform: scaleX(0);
transform-origin: 0 50%;
}
/* ══ 8. FORM ═════════════════════════════════════════════════════════════ */
.field { display: grid; gap: var(--space-xs); }
.field__label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-1);
}
.field__required { color: var(--teal-400); }
.field__input {
inline-size: 100%;
min-block-size: var(--size-touch-lg);
padding: var(--field-pad-block) var(--field-pad-inline);
border: var(--border-w) solid var(--rule-strong);
border-radius: var(--field-radius);
background: var(--surface-2);
color: var(--text-1);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__input:hover { border-color: rgba(238, 234, 246, .36); }
.field__input:focus-visible {
outline: none;
border-color: var(--teal-400);
box-shadow: 0 0 0 var(--border-w) var(--teal-400);
}
.field__textarea { min-block-size: 8.5rem; line-height: var(--lh-body); }
.field__hint { font-size: var(--fs-xs); color: var(--text-3); }
.field__error { min-block-size: 1.2em; font-size: var(--fs-xs); color: #FF9CB5; }
.field.has-error .field__input { border-color: #FF9CB5; }
/* Option cards. Checked = SELECTED, in the tool's own language: a teal frame
and handles, the same as the hero's selection box. */
.option { position: relative; display: block; cursor: pointer; }
.option__input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.option__card {
position: relative;
display: flex;
align-items: center;
min-block-size: var(--size-touch-lg);
padding: var(--space-md) var(--space-lg);
border: var(--border-w) solid var(--rule-strong);
border-radius: var(--radius-xs);
background: var(--surface-2);
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--text-2);
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.option:hover .option__card { border-color: rgba(238, 234, 246, .4); color: var(--text-1); }
.option__input:checked + .option__card {
border-color: var(--teal-400);
background: var(--teal-a10);
color: var(--text-1);
}
/* two handles on the diagonal — enough to read as "selected" */
.option__input:checked + .option__card::before,
.option__input:checked + .option__card::after {
content: "";
position: absolute;
inline-size: var(--select-handle);
block-size: var(--select-handle);
background: var(--ink);
border: var(--border-w) solid var(--teal-400);
transform: skewX(var(--mk-angle-neg));
}
.option__input:checked + .option__card::before { inset-block-start: calc(var(--select-handle) / -2); inset-inline-start: calc(var(--select-handle) / -2); }
.option__input:checked + .option__card::after { inset-block-end: calc(var(--select-handle) / -2); inset-inline-end: calc(var(--select-handle) / -2); }
.option__input:focus-visible + .option__card { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
.form-progress {
display: flex;
gap: var(--space-lg);
margin-block-end: var(--space-xl);
padding-block-end: var(--space-md);
border-block-end: var(--border);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.progress-step { display: inline-flex; align-items: center; gap: var(--space-xs); }
.progress-step__num { color: var(--text-3); }
.progress-step.is-active { color: var(--text-1); }
.progress-step.is-active .progress-step__num { color: var(--teal-400); }
.form-step__legend {
margin-block-end: var(--space-md);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
letter-spacing: var(--ls-heading);
line-height: var(--lh-snug);
}
.form-actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-sm);
margin-block-start: var(--space-xl);
}
.form-success {
display: grid;
justify-items: start;
gap: var(--space-md);
}
.form-success__icon {
display: grid;
place-items: center;
inline-size: var(--size-tile);
block-size: var(--size-tile);
border: var(--border-w) solid var(--teal-400);
color: var(--teal-400);
}
.form-success__icon .icon { inline-size: 1.4rem; block-size: 1.4rem; stroke-width: 2; }
/* ══ 9. FAQ ACCORDION ════════════════════════════════════════════════════ */
.accordion { border-block-start: var(--border); }
.faq-item { border-block-end: var(--border); }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
inline-size: 100%;
padding-block: var(--space-lg);
text-align: start;
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
font-stretch: var(--wdth-heading);
letter-spacing: var(--ls-snug);
line-height: var(--lh-snug);
color: var(--text-1);
transition: color var(--dur-fast) var(--ease-out);
}
.faq-question:hover { color: var(--teal-400); }
.faq-question__icon {
flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
stroke-width: 1.8;
transition: transform var(--dur-base) var(--ease-out);
}
.faq-item.is-open .faq-question__icon { transform: rotate(45deg); }
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-content { overflow: hidden; }
.faq-answer__text {
max-inline-size: var(--measure);
padding-block-end: var(--space-lg);
color: var(--text-2);
}
/* ══ 10. DIALOG ══════════════════════════════════════════════════════════ */
.dialog {
position: fixed;
inset: 0;
z-index: var(--z-menu);
display: grid;
place-items: center;
padding: var(--container-pad);
background: rgba(var(--ink-rgb), .8);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}
.dialog.is-open { opacity: 1; visibility: visible; }
.dialog__panel {
position: relative;
display: grid;
gap: var(--space-lg);
justify-items: start;
inline-size: min(100%, 36rem);
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid var(--teal-400);
background: var(--surface-1);
box-shadow: var(--shadow-pop);
}
.dialog__close {
position: absolute;
inset-block-start: var(--space-sm);
inset-inline-end: var(--space-sm);
display: grid;
place-items: center;
inline-size: var(--size-touch);
block-size: var(--size-touch);
color: var(--text-2);
}
.dialog__close svg { stroke-width: 1.8; }
.dialog__title { padding-inline-end: var(--space-2xl); font-size: var(--fs-h3); }
.dialog__body { color: var(--text-2); }
/* ══ 11. WHATSAPP WIDGET · CURSOR · ICONS ════════════════════════════════ */
.interaction-widget {
position: fixed;
inset-block-end: var(--space-md);
inset-inline-end: var(--space-md);
z-index: var(--z-widget);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
inline-size: var(--size-touch-lg);
block-size: var(--size-touch-lg);
border: var(--border-w) solid var(--rule-strong);
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-1);
text-decoration: none;
box-shadow: var(--shadow-pop);
transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s;
}
.interaction-widget:hover { border-color: var(--teal-400); }
/* visible from the first screen (MK, 2026-10-15): the icon takes the tool
colour and a soft ring breathes out a few times, then the button rests */
.interaction-widget { color: var(--teal-400); border-color: rgba(var(--teal-400-rgb), .55); }
.interaction-widget__label { color: var(--text-1); }
.interaction-widget::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 2px solid var(--teal-400);
opacity: 0;
pointer-events: none;
animation: mk-wa-ring 2.6s var(--ease-out) 1.5s 4;
}
@keyframes mk-wa-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .interaction-widget::after { animation: none; } }
/* over the footer (js/ui.js): out of the way of its text */
.interaction-widget.is-tucked {
visibility: hidden;
opacity: 0;
transform: translateY(var(--space-md));
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
}
.interaction-widget .icon { inline-size: 1.35rem; block-size: 1.35rem; fill: currentColor; stroke: none; }
.interaction-widget__label {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.icon {
inline-size: var(--size-icon);
block-size: var(--size-icon);
stroke-width: var(--icon-stroke);
}
.icon--filled { fill: currentColor; stroke: none; }
/* motion.js no longer draws a cursor; FX 12 owns the only one. */
.mk-cursor,
.mk-cursor-ring { display: none; }
@media (min-width: 640px) {
.interaction-widget {
inline-size: auto;
padding-inline: var(--space-md) var(--space-lg);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
}
.interaction-widget__label {
position: static;
inline-size: auto;
block-size: auto;
overflow: visible;
clip-path: none;
}
}
/* ══ 12. TITLE LINES (FX 01, built by js/motion.js) ══════════════════════
One split line. The padding reaches under the descenders so the clip-path
(measured on this box) never shaves a g or a y; the negative margin gives
the space back. The blade is a 2px stroke at the logo's slant. */
.mk-line {
position: relative;
padding-block-end: .14em;
margin-block-end: -.14em;
}
.mk-line__blade {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: var(--border-w-thick);
background: linear-gradient(180deg, var(--teal-400), var(--violet-400));
transform-origin: 0 100%;
pointer-events: none;
}
/* ══ TICK LIST — short lists inside an answer (the payment methods) ═════ */
.tick-list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.tick-list__item { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-1); }
.tick-list__icon {
flex: none;
inline-size: 1.1rem;
block-size: 1.1rem;
fill: none;
stroke: var(--lilac);
stroke-width: 2.2;
}
/* ══ THE SCROLL CUE ═══════════════════════════════════════════════════════
One pill, fixed at the foot of the screen on every size. It is off until
js/fx/17-cue.js turns it on (.is-on): at the top of the page, and while a
pinned section still has something to show. Under the menu and the
preloader, beside the WhatsApp button, never in the way of a tap. */
.scroll-cue {
position: fixed;
inset-block-end: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
inset-inline: 0;
z-index: var(--z-widget);
display: flex;
align-items: center;
gap: var(--space-sm);
inline-size: max-content;
margin-inline: auto;
padding: .55rem 1rem .55rem .7rem;
border: var(--border-w) solid rgba(192, 132, 252, .45);
border-radius: var(--radius-pill);
background: rgba(var(--ink-rgb), .82);
box-shadow: 0 10px 34px -10px rgba(168, 85, 247, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: #fff;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.scroll-cue.is-on {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
/* the mouse with a wheel that keeps rolling */
.scroll-cue__mouse {
display: grid;
justify-items: center;
inline-size: 1.05rem;
block-size: 1.6rem;
padding-block-start: .28rem;
border: 1.5px solid var(--lilac);
border-radius: var(--radius-pill);
}
.scroll-cue__mouse i {
inline-size: 3px;
block-size: 6px;
border-radius: var(--radius-pill);
background: #fff;
animation: cue-wheel 1.5s var(--ease-in-out) infinite;
}
.scroll-cue__chev {
inline-size: 1rem;
block-size: 1rem;
fill: none;
stroke: var(--lilac);
stroke-width: 2.4;
animation: cue-nudge 1.5s var(--ease-in-out) infinite;
}
@keyframes cue-wheel {
0% { transform: translateY(0); opacity: 1; }
70%, 100% { transform: translateY(9px); opacity: 0; }
}
@keyframes cue-nudge {
0%, 100% { transform: translateY(-2px); }
50% { transform: translateY(3px); }
}
/* small phones: centred in the room left of the WhatsApp button */
@media (max-width: 479px) {
.scroll-cue { inset-inline-end: 4.25rem; padding-inline: .6rem .8rem; }
}
/* the menu and the brief panel take the whole screen: the cue steps out */
.is-brief-open .scroll-cue,
.menu-open .scroll-cue { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.scroll-cue { transition: none; }
.scroll-cue__mouse i, .scroll-cue__chev { animation: none; }
}
/* ══ NAVBAR additions — the Courses link and the YouTube button (2026-10-09) ══
Courses is the one link in the capsule that is not plain: a lit violet
pill with a play mark, because it leads somewhere the others do not. The
YouTube button sits beside the call to action at every width, the mark in
its own red on a glass disc, like the tool tiles in the hero. */
.navbar__link--courses {
display: inline-flex;
align-items: center;
gap: .4rem;
padding-inline: .75rem .95rem;
border: var(--border-w) solid transparent;
background:
linear-gradient(rgba(122, 34, 219, .34), rgba(122, 34, 219, .2)) padding-box,
linear-gradient(120deg, #C084FC, var(--teal-400)) border-box;
color: #fff;
box-shadow: 0 0 18px -6px var(--violet-glow);
}
.navbar__link--courses:hover { box-shadow: 0 0 24px -4px var(--violet-glow); }
/* on its own section it stays the lit pill, only brighter: the plain "current"
look of the other links would make it one of them */
.navbar__link--courses.is-active {
background:
linear-gradient(rgba(122, 34, 219, .62), rgba(122, 34, 219, .42)) padding-box,
linear-gradient(120deg, #E9D5FF, var(--teal-400)) border-box;
color: #fff;
box-shadow: 0 0 26px -4px var(--violet-glow);
}
.nav-courses__play {
inline-size: .8rem;
block-size: .8rem;
fill: var(--teal-400);
filter: drop-shadow(0 0 6px rgba(var(--teal-400-rgb), .7));
}
.navbar__yt {
flex: none;
display: grid;
place-items: center;
inline-size: var(--size-touch);
block-size: var(--size-touch);
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass-strong);
color: #FF0033;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.navbar__yt .icon { inline-size: 1.45rem; block-size: 1.45rem; }
.navbar__yt:hover {
border-color: rgba(255, 0, 51, .6);
box-shadow: 0 6px 22px -8px rgba(255, 0, 51, .7);
transform: translateY(-1px);
}
/* 1200–1439: with six links and the YouTube button the centred capsule ran
into the buttons on its right. Here it sits in the flow instead, in the
middle of the room between the logo and the buttons, a little tighter. */
@media (min-width: 1200px) and (max-width: 1439px) {
.navbar__links { position: static; margin-inline: 0; }
.navbar__link { padding-inline: .7rem; }
.navbar__link--courses { padding-inline: .6rem .75rem; }
}
/* the same link in the side panel: lit, with its own mark */
.premium-menu-nav .premium-menu-link--courses { color: #E9D5FF; }
.menu-link__index--courses {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .2rem .6rem;
border: var(--border-w) solid rgba(192, 132, 252, .5);
border-radius: var(--radius-pill);
background: rgba(122, 34, 219, .22);
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.navbar__yt { transition: none; }
}
/* ══ TWO LANGUAGES + THE BLOG (2026-10-12) ══════════════════════════════════
The site has two versions, English (/) and Arabic (/ar/), and each page
knows its twin. The switch sits in the header at every width and again in
the side panel. Moving between the two is a soft cross-fade of the page
while the header holds still (cross-document view transitions); browsers
without them simply load the page. */
.navbar__lang {
flex: none;
display: inline-grid;
place-items: center;
min-inline-size: var(--size-touch);
block-size: var(--size-touch);
padding-inline: .85rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
font-family: "Archivo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
font-size: var(--fs-sm);
font-weight: 700;
line-height: 1;
letter-spacing: 0;
color: var(--text-1);
text-decoration: none;
transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.navbar__lang:hover {
color: #fff;
box-shadow: 0 6px 22px -8px var(--violet-glow);
transform: translateY(-1px);
}
/* a phone is too narrow for logo + language + YouTube + "Menu": the word
goes, the two bars stay (the button keeps its name for screen readers) */
@media (max-width: 479px) {
.menu-trigger__word { display: none; }
.menu-trigger { padding-inline: var(--space-xs); }
.navbar__actions { gap: var(--space-xs); }
}
/* with a seventh link (Blog) and the language button, the centred capsule ran
under the buttons at 1440 too: from 1200 up it sits in the flow, between
the logo and the buttons, at every desktop width */
@media (min-width: 1200px) {
.navbar__links { position: static; margin-inline: 0; }
}
/* the same switch in the side panel */
.premium-menu-nav .premium-menu-link--lang { font-family: "IBM Plex Sans Arabic", "Archivo", "Segoe UI", Tahoma, system-ui, sans-serif; letter-spacing: 0; }
.menu-link__index--lang {
display: inline-flex;
align-items: center;
padding: .2rem .6rem;
border: var(--border-w) solid rgba(var(--teal-400-rgb), .5);
border-radius: var(--radius-pill);
background: rgba(var(--teal-400-rgb), .12);
font-family: "Archivo", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
font-weight: 700;
color: #fff;
}
/* page to page: the old page lets go, the new one settles in, the header and
the WhatsApp button stay where they are */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.navbar { view-transition-name: mk-nav; }
.interaction-widget { view-transition-name: mk-wa; }
::view-transition-old(root) { animation: mk-page-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: mk-page-in .5s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-group(mk-nav), ::view-transition-group(mk-wa) { animation-duration: .4s; }
}
@keyframes mk-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes mk-page-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
.navbar__lang { transition: none; }
}
/* ===== css/sections.css ===== */
/* ============================================================================
MK — SECTIONS · one block per section, in page order.
Effect-owned styling (anything an fx module animates) is in fx.css.
========================================================================== */
/* ══ 01 · HERO — the lit stage ═══════════════════════════════════════════ */
.hero {
position: relative;
padding-inline: var(--space-xs);
background: var(--ink);
}
/* The stage: a rounded panel lit from below. Two corner glows and an arch of
violet light — a dark ellipse whose rim throws the light upward. */
.hero__stage {
position: relative;
isolation: isolate;
display: grid;
align-items: center;
min-block-size: var(--hero-min-h-fallback);
/* phones and tablets: no arch and no dark band under the copy — the stage
simply ends below the proof line; the arch is a desktop-only piece */
padding-block: calc(var(--nav-h) + var(--space-2xl)) calc(var(--space-3xl) + var(--space-md));
border-radius: 0 0 var(--radius-stage) var(--radius-stage);
background:
radial-gradient(55% 60% at 0% 100%, rgba(122, 34, 219, .8), transparent 62%),
radial-gradient(50% 58% at 100% 100%, rgba(192, 132, 252, .6), transparent 62%),
linear-gradient(180deg, var(--ink) 0%, #120B22 55%, #1D0F36 100%);
overflow: clip;
}
@supports (min-height: 100svh) {
.hero__stage { min-block-size: var(--hero-min-h); }
}
.hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(238, 234, 246, .05) var(--border-w), transparent var(--border-w)),
linear-gradient(to bottom, rgba(238, 234, 246, .05) var(--border-w), transparent var(--border-w));
background-size: var(--grid-major) var(--grid-major);
background-position: calc(50% + var(--grid-major) / 2) 0;
-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.hero__arch {
display: none;
position: absolute;
inset-inline-start: -25%;
inline-size: 150%;
inset-block-start: 76%;
aspect-ratio: 2.1 / 1;
border-radius: 50%;
background: radial-gradient(closest-side, #07040E 93%, rgba(7, 4, 14, 0) 100%);
box-shadow:
0 -2px 0 0 rgba(233, 213, 255, .28),
0 -40px 110px -10px rgba(168, 85, 247, .62),
0 -12px 40px -8px rgba(192, 132, 252, .45);
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: var(--space-xl);
text-align: center;
}
/* ── the badge ─────────────────────────────────────────────────────────── */
/* desktop only (from 900px): on phones and tablets the headline leads */
.hero-badge {
display: none;
align-items: center;
gap: var(--space-sm);
max-inline-size: 100%;
padding: .3rem .9rem .3rem .3rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
font-size: var(--fs-xs);
color: var(--text-2);
text-decoration: none;
transition: box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 900px) {
.hero-badge { display: inline-flex; }
}
.hero-badge:hover { box-shadow: 0 6px 24px -8px var(--violet-glow); color: var(--text-1); }
.hero-badge__chip {
padding: .2rem .6rem;
border-radius: var(--radius-pill);
background: var(--grad-violet);
box-shadow: 0 0 16px -2px var(--violet-glow);
font-weight: var(--fw-semibold);
color: #fff;
}
/* phones: the line wraps rather than losing "since 2020" to an ellipsis */
.hero-badge__text { line-height: var(--lh-snug); text-align: start; }
@media (min-width: 640px) {
.hero-badge__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.hero-badge__arrow { flex: none; inline-size: .9rem; block-size: .9rem; stroke-width: 2; }
/* ── the headline, drawn then built ─────────────────────────────────────── */
.hero__head {
justify-self: center;
inline-size: fit-content;
max-inline-size: 100%;
}
.hero-title {
--fill: 1;
font-size: clamp(2.4rem, 1rem + 4.5vw, 5.25rem);
color: rgba(var(--white-rgb), var(--fill));
-webkit-text-stroke: 1px rgba(var(--teal-400-rgb), calc(1 - var(--fill)));
text-wrap: balance;
}
.hero-title__line { display: block; }
.hero-title__line--accent {
color: rgba(192, 132, 252, var(--fill));
text-shadow: 0 0 42px rgba(168, 85, 247, calc(var(--fill) * .55));
}
/* The selection shows while the headline is built, then on hover. */
.hero__head .sel__frame,
.hero__head .sel__h,
.hero__head .sel__size { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.hero__head.is-selected .sel__frame,
.hero__head.is-selected .sel__h,
.hero__head.is-selected .sel__size { opacity: 1; }
/* The readout sits ON the frame's bottom edge, not under it: under it, it
landed on the lede's first line (the lede is only --space-xl below). */
.hero__head .sel__size { inset-block-start: auto; inset-block-end: calc(var(--space-sm) * -1); translate: -50% 50%; }
@media (hover: hover) and (pointer: fine) {
.hero__head.is-built:hover .sel__frame,
.hero__head.is-built:hover .sel__h,
.hero__head.is-built:hover .sel__size { opacity: 1; }
}
.hero-description {
max-inline-size: 52ch;
font-size: var(--fs-lede);
line-height: var(--lh-snug);
color: var(--text-2);
}
/* phones: the pair stacks at one shared width instead of two ragged pills */
.hero-actions { display: grid; grid-template-columns: minmax(0, 17rem); justify-content: center; gap: var(--space-sm); }
@media (min-width: 640px) {
.hero-actions { display: flex; flex-wrap: wrap; }
}
/* ── the eleven tools, scattered around the heading ──────────────────── */
/* Three layers so nothing fights over transform: the li is placed and takes
GSAP's entrance, .brand__float sways on a CSS loop, .brand__tile carries
the tilt and the look. The tiles are white with a soft violet shade,
ringed by the site's turning light rim and violet glow (see SHINE), so
each logo shows in its own colour. */
.hero__brands { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.brand { position: absolute; }
/* The sway: 20px out along the tile's own direction (--sx/--sy) and back,
turning a few degrees as it goes. Every tile has its own direction, speed
and phase, so the group never moves in step. */
.brand__float {
display: block;
animation: brand-sway var(--sd, 6s) ease-in-out var(--sdelay, 0s) infinite;
}
@keyframes brand-sway {
0%, 100% { transform: translate(0, 0) rotate(calc(var(--sr, 6deg) * -1)); }
50% { transform: translate(var(--sx, 0px), var(--sy, -20px)) rotate(var(--sr, 6deg)); }
}
.brand__tile {
display: grid;
place-items: center;
inline-size: var(--brand-size, 3rem);
aspect-ratio: 1;
border: var(--border-w) solid transparent;
border-radius: 28%;
background:
radial-gradient(80% 70% at 50% 20%, #FFFFFF 40%, transparent 100%) padding-box,
linear-gradient(160deg, #FFFFFF 0%, #EFE6FD 100%) padding-box,
var(--grad-border) border-box;
box-shadow:
inset 0 -3px 8px rgba(122, 34, 219, .10),
0 18px 38px -14px rgba(0, 0, 0, .8),
0 0 32px -6px rgba(168, 85, 247, .6);
transform: rotate(var(--tilt, 0deg));
}
.brand__tile img {
inline-size: 50%;
block-size: 50%;
object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(40, 16, 80, .18));
}
.brand--woo .brand__tile img { inline-size: 64%; block-size: 64%; }
.brand--php .brand__tile img { inline-size: 62%; block-size: 62%; }
.brand--figma .brand__tile img { inline-size: 38%; block-size: 56%; }
/* Every tile sways straight up and down, 20px, with a small turn. Each row
moves as one line — the same speed, each tile a beat after its neighbour,
so a gentle wave runs along it and the grids stay straight while they
move. The top row dips away from the bar; the bottom row lifts away from
the proof line. */
.brand { --sd: 6s; }
.brand--figma, .brand--wordpress, .brand--html, .brand--code { --sy: 20px; }
.brand--pen, .brand--shopify, .brand--gsap, .brand--php { --sy: -20px; }
.brand--elementor, .brand--woo, .brand--css, .brand--javascript { --sy: -20px; }
.brand--figma, .brand--pen, .brand--elementor { --sdelay: 0s; --sr: 4deg; }
.brand--wordpress, .brand--shopify, .brand--woo { --sdelay: -0.35s; --sr: -4deg; }
.brand--html, .brand--gsap, .brand--css { --sdelay: -0.7s; --sr: 4deg; }
.brand--code, .brand--php, .brand--javascript { --sdelay: -1.05s; --sr: -4deg; }
/* Phones: no tiles — the hero is the heading, the lede and the buttons. */
.hero__brands { display: none; }
/* ── the scroll hint, centred at the foot of the stage ─────────────────── */
.scroll-indicator {
position: absolute;
inset-block-end: var(--space-xl);
inset-inline: 0;
inline-size: max-content;
margin-inline: auto;
display: none;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-2);
}
.scroll-indicator__line {
order: 2;
position: relative;
inline-size: var(--border-w);
block-size: 2.5rem;
background: rgba(238, 234, 246, .18);
overflow: hidden;
}
.scroll-indicator__line::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: 40%;
background: linear-gradient(180deg, transparent, var(--lilac));
animation: scroll-drop 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-drop {
0% { transform: translateY(-100%); }
100% { transform: translateY(260%); }
}
/* ── the showreel — real projects tipping up into place ────────────────── */
.hero-reel {
position: relative;
z-index: 1;
display: grid;
place-items: center;
margin-block-start: calc(var(--space-4xl) * -1.1);
padding-inline: var(--container-pad);
perspective: 1600px;
}
.reel-frame {
margin: 0;
overflow: hidden;
border: var(--border-w) solid transparent;
border-radius: var(--radius-panel);
background:
linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
var(--grad-border) border-box;
}
.reel-frame img { inline-size: 100%; block-size: auto; }
.reel-frame__bar {
display: flex;
align-items: center;
gap: 6px;
padding: .6rem .9rem;
border-block-end: var(--border-w) solid var(--glass-line);
}
.reel-frame__bar i {
inline-size: .55rem;
block-size: .55rem;
border-radius: var(--radius-pill);
background: rgba(238, 234, 246, .18);
}
.reel-frame__url {
margin-inline: auto;
padding: .2rem 1.2rem;
border-radius: var(--radius-pill);
background: rgba(238, 234, 246, .06);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--text-3);
}
.reel-frame--main {
position: relative;
z-index: 2;
inline-size: min(100%, 68rem);
box-shadow: 0 40px 120px -30px rgba(168, 85, 247, .55), 0 30px 60px -30px rgba(0, 0, 0, .9);
transform-origin: 50% 100%;
}
.reel-frame--side { display: none; }
/* Tablets: one row above the badge, three tiles each side of the middle
(the stage keeps room for it at the top). */
@media (min-width: 640px) {
.hero__stage { padding-block-start: calc(var(--nav-h) + var(--space-4xl)); }
.hero__brands { display: block; }
.brand { --brand-size: 3.3rem; }
.brand { display: none; inset-block-start: calc(var(--nav-h) + var(--space-md)); }
.brand--figma, .brand--wordpress, .brand--elementor,
.brand--code, .brand--html, .brand--javascript { display: block; }
.brand--figma { inset-inline-start: 6%; }
.brand--wordpress { inset-inline-start: 17%; }
.brand--elementor { inset-inline-start: 28%; }
.brand--code { inset-inline-end: 6%; }
.brand--html { inset-inline-end: 17%; }
.brand--javascript { inset-inline-end: 28%; }
}
/* The six come from both desktop rows, which sway in opposite directions:
here they are one row, so they dip together, a beat apart left to right. */
@media (min-width: 640px) and (max-width: 899px) {
.brand--figma, .brand--wordpress, .brand--elementor,
.brand--javascript, .brand--html, .brand--code { --sy: 20px; }
.brand--wordpress { --sdelay: -0.35s; }
.brand--elementor { --sdelay: -0.7s; }
.brand--javascript { --sdelay: -1.05s; }
.brand--html { --sdelay: -1.4s; }
.brand--code { --sdelay: -1.75s; }
}
@media (min-width: 900px) {
.hero { padding-inline: var(--space-sm); }
.hero__stage { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-4xl); }
/* a flatter, lower arch: its rim of light stays, the dark under it is a
thin band at the foot of the stage rather than a hill */
.hero__arch {
display: block;
inset-inline-start: -45%;
inline-size: 190%;
inset-block-start: 86%;
aspect-ratio: 4 / 1;
}
/* hung from the arch's rim (86%), not from the stage foot: on a short
screen the foot-anchored hint rose onto the bright rim. Under ~770px
tall its line shortens so it still ends above the fold (full length
from there up). */
/* the hint that hung here is the fixed scroll cue now (components.css),
on every screen size */
/* Desktop: two arcs, one each side of the copy, like a pair of brackets —
design, WordPress and stores on the left, code on the right. Each tile
has a place on its arc, --t from -1 (top) to 1 (bottom): the middle of
the arc sits out by the page edge (--ax), the ends curve in toward the
copy by --ad, and each tile leans along the curve. Height is measured
from the middle of the stage (--ay) and spans --ah up and down, so the
arcs stay beside the copy at any screen height and never reach the
arch. 900–1199: four tiles a side; all six from 1200. */
.brand {
--brand-size: 2.9rem; --ax: 2.5%; --ad: 5.5%; --ay: 44%; --ah: 30%;
display: block;
inset-block-start: calc(var(--ay) + var(--t) * var(--ah) - var(--brand-size) / 2);
--sy: -20px; --sd: 6.5s;
--sdelay: calc(var(--t) * -1.1s);
}
.brand--figma, .brand--pen, .brand--wordpress, .brand--elementor, .brand--woo, .brand--shopify {
inset-inline-start: calc(var(--ax) + var(--t) * var(--t) * var(--ad));
--tilt: calc(var(--t) * -11deg); --sr: 3deg;
}
.brand--html, .brand--css, .brand--javascript, .brand--code, .brand--php, .brand--gsap {
inset-inline-end: calc(var(--ax) + var(--t) * var(--t) * var(--ad));
--tilt: calc(var(--t) * 11deg); --sr: -3deg;
}
/* four a side */
.brand--pen, .brand--woo, .brand--css, .brand--php { display: none; }
.brand--figma, .brand--html { --t: -1; }
.brand--wordpress, .brand--javascript { --t: -.34; }
.brand--elementor, .brand--code { --t: .34; }
.brand--shopify, .brand--gsap { --t: 1; }
.reel-frame--side {
display: block;
position: absolute;
inset-block-start: 14%;
z-index: 1;
inline-size: min(40%, 30rem);
opacity: .6;
}
.reel-frame--left { inset-inline-start: calc(var(--container-pad) + 2%); transform: rotateY(18deg); transform-origin: 100% 50%; }
.reel-frame--right { inset-inline-end: calc(var(--container-pad) + 2%); transform: rotateY(-18deg); transform-origin: 0% 50%; }
}
/* 900–1023: the copy nearly fills the stage, so the arcs are shallow and
hug the edges. */
@media (min-width: 900px) and (max-width: 1023px) {
.brand { --brand-size: 2.5rem; --ax: 1%; --ad: 1.6%; }
}
/* From 1200 all six sit on each arc. */
@media (min-width: 1200px) {
.brand { --brand-size: 3rem; --ax: 3%; --ad: 7%; --ah: 32%; }
.brand--pen, .brand--woo, .brand--css, .brand--php { display: block; }
.brand--figma, .brand--html { --t: -1; }
.brand--pen, .brand--css { --t: -.6; }
.brand--wordpress, .brand--javascript { --t: -.2; }
.brand--elementor, .brand--code { --t: .2; }
.brand--woo, .brand--php { --t: .6; }
.brand--shopify, .brand--gsap { --t: 1; }
}
@media (min-width: 1440px) {
.brand { --brand-size: 3.5rem; --ax: 3.5%; --ad: 8%; }
}
@media (min-width: 1800px) {
.brand { --brand-size: 4rem; --ax: 5%; --ad: 9%; }
}
@media (prefers-reduced-motion: reduce) {
.brand__float,
.scroll-indicator__line::after { animation: none; }
}
/* ══ 02 · PROMISE STRIP (FX 13 styles live in fx.css) ════════════════════ */
.fx13 .sec-label { margin-block-end: var(--space-xs); }
/* ══ 03 · ABOUT ══════════════════════════════════════════════════════════ */
/* the portrait's halo reaches past a phone's edge: keep it inside the section */
.about { overflow-x: clip; }
.about-lit { margin-block-end: clamp(var(--space-3xl), 9vw, var(--space-4xl)); }
/* Centred and given room: the statement reads down the middle of the page,
not pressed against the left edge. */
.about-lit__pin { display: grid; justify-items: center; gap: var(--space-xl); text-align: center; }
/* The method paragraph, set as a statement. Heavy enough to read as type,
not so wide it stops reading as a sentence. */
.about-lit__para {
max-inline-size: 34ch;
font-family: var(--font-display);
/* phones: small enough to read in one look (about nine short lines), with
air between the lines; it grows into the big statement on wide screens */
font-size: clamp(1.2rem, .45rem + 3.2vw, 3.6rem);
font-weight: var(--fw-bold);
font-stretch: 104%;
line-height: 1.45;
letter-spacing: var(--ls-heading);
color: var(--text-1);
}
.fx02-key { color: var(--violet-400); }
.about-lit__rail {
inline-size: min(100%, 30rem);
block-size: var(--border-w);
background: var(--rule);
}
.about-lit__fill {
display: block;
block-size: 100%;
background: var(--teal-400);
transform-origin: 0 50%;
}
/* ── the card: one frame, the line on the left and the portrait on the right ──
Phones stack it (portrait on top, fading into the copy). From 900px it is
the wide frame: the copy sits on the dark side, the portrait fills the
right and dissolves toward the text. The backdrop is the hero's render. */
.about-card {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: var(--border-w) solid rgba(192, 132, 252, .24);
border-radius: var(--radius-stage);
background: var(--ink) url("../assets/bg/hero-wide.webp") center / cover no-repeat;
box-shadow: 0 40px 90px -45px rgba(168, 85, 247, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.about-card__photo {
order: -1;
margin: 0;
aspect-ratio: 5 / 4;
-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.about-card__photo img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 50% 12%;
}
/* the other frames of the shoot lie over the first, unseen until their turn */
.about-card__photo { position: relative; }
.about-card__photo img + img {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
}
.about-card__copy {
display: grid;
justify-items: start;
gap: var(--space-lg);
padding: 0 var(--space-lg) var(--space-xl);
margin-block-start: calc(var(--space-xl) * -1);
}
/* phones and tablets: the mark sits in the corner of the photo, as on the
share picture; from 900px it heads the copy */
.about-card__logo {
position: absolute;
inset-block-start: var(--space-lg);
inset-inline-start: var(--space-lg);
z-index: 1;
inline-size: clamp(6.5rem, 5rem + 8vw, 11rem);
block-size: auto;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
}
.about-card__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1rem + 3.4vw, 2.6rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1.04;
letter-spacing: var(--ls-snug);
color: #fff;
text-wrap: balance;
}
.about-card__title span { display: block; }
.about-card__accent { color: var(--lilac); text-shadow: 0 0 42px rgba(168, 85, 247, .55); }
.about-card__text { max-inline-size: 30ch; font-size: var(--fs-lede); color: var(--text-2); }
.about-card__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); inline-size: 100%; }
.about-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) var(--space-md);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-2);
}
.about-card__meta strong { font-weight: var(--fw-medium); color: #fff; }
.about-card__dot { inline-size: .3rem; block-size: .3rem; border-radius: 50%; background: var(--teal-400); }
/* narrow phones: the name and the figure sit on two lines, so no dot between */
@media (max-width: 479px) {
.about-card__dot { display: none; }
}
@media (min-width: 640px) {
.about-card__photo { aspect-ratio: 16 / 10; }
.about-card__copy { padding: 0 var(--space-2xl) var(--space-2xl); }
.about-card__actions { display: flex; flex-wrap: wrap; inline-size: auto; }
}
@media (min-width: 900px) {
.about-card { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-block-size: clamp(27rem, 43vw, 37rem); }
/* the dark side the copy sits on, dissolving toward the portrait */
.about-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, var(--ink) 0%, rgba(var(--ink-rgb), .92) 36%, rgba(var(--ink-rgb), 0) 64%);
}
.about-card__photo {
order: 0;
position: relative;
z-index: -2;
aspect-ratio: auto;
margin-inline-start: -22%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
mask-image: linear-gradient(90deg, transparent 0, #000 36%);
}
.about-card__photo img { position: absolute; inset: 0; }
/* sized by the screen so each half of the line stays on one row */
.about-card__title { font-size: clamp(1.75rem, 3.1vw, 3.1rem); }
.about-card__logo { position: static; inline-size: clamp(11rem, 8rem + 6vw, 15rem); filter: none; }
.about-card__copy {
align-content: center;
gap: var(--space-xl);
margin-block-start: 0;
padding: var(--space-3xl) 0 var(--space-3xl) clamp(var(--space-2xl), 5vw, var(--space-4xl));
}
}
/* ══ 04 · NUMBERS — four lit cards ═══════════════════════════════════════
Each figure on its own glass card; the cards sit at alternating heights
and alternate white / lilac, so the row has rhythm instead of four equal
boxes. The digits roll (js/fx/04-odometer.js) and a band of light sweeps
the figure once it lands. */
.numbers { position: relative; overflow: clip; isolation: isolate; }
.numbers__glow {
position: absolute;
inset: 20% 10%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(122, 34, 219, .45), transparent 70%);
pointer-events: none;
}
.numbers__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-grid);
}
.numbers__item {
position: relative;
display: grid;
gap: var(--space-sm);
justify-items: center;
padding: var(--space-xl) var(--space-md);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(90% 70% at 50% 0%, rgba(168, 85, 247, .2), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
text-align: center;
}
.numbers__fig {
position: relative;
display: inline-flex;
align-items: flex-start;
overflow: hidden;
font-family: var(--font-display);
font-size: clamp(2.8rem, 1.4rem + 3.7vw, 5.2rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1;
letter-spacing: var(--ls-tight);
font-variant-numeric: tabular-nums;
color: #F6F1FF;
/* drop-shadow, not text-shadow: it glows the finished shapes, where a
text-shadow would be clipped square by each digit's window. */
filter: drop-shadow(0 0 18px rgba(168, 85, 247, .55));
white-space: nowrap;
}
.numbers__item:nth-child(even) .numbers__fig { color: var(--lilac); filter: drop-shadow(0 0 22px rgba(168, 85, 247, .85)); }
/* one digit: a window one glyph tall, a strip of 30 glyphs inside */
.odo {
display: inline-block;
block-size: 1em;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.odo__strip { display: flex; flex-direction: column; }
.odo__strip span { display: block; block-size: 1em; line-height: 1; }
.odo__sign { display: inline-block; }
/* the sweep of light once the digits land */
.numbers__fig::after {
content: "";
position: absolute;
inset: -10% auto -10% -60%;
inline-size: 50%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
transform: skewX(var(--mk-angle-neg));
mix-blend-mode: overlay;
opacity: 0;
pointer-events: none;
}
.numbers__fig.is-lit::after { animation: fig-sweep 1.2s var(--ease-out) forwards; }
@keyframes fig-sweep {
0% { opacity: 1; inset-inline-start: -60%; }
100% { opacity: 0; inset-inline-start: 120%; }
}
.numbers__label {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-2);
}
.numbers__note {
margin-block-start: var(--space-xl);
text-align: center;
font-size: var(--fs-xs);
color: var(--text-3);
}
@media (min-width: 900px) {
.numbers__row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: var(--space-xl); }
.numbers__item:nth-child(even) { transform: translateY(var(--space-xl)); }
}
/* ══ 05 · SERVICES — the files (FX 08) ═══════════════════════════════════
The heading centred over the stack; every file full width, the words on
one side and the render on the other in a glossy frame. The pile itself is
CSS: block flow (a sticky item in a grid would have nowhere to go), each
file sticky one step lower than the last. */
.services__layout { display: block; }
.files { display: block; max-inline-size: 72rem; margin-inline: auto; }
.files__item {
position: sticky;
inset-block-start: calc(var(--nav-h) + var(--space-lg));
}
.files__item:nth-child(2) { inset-block-start: calc(var(--nav-h) + var(--space-lg) + 1rem); }
.files__item:nth-child(3) { inset-block-start: calc(var(--nav-h) + var(--space-lg) + 2rem); }
.files__item:nth-child(4) { inset-block-start: calc(var(--nav-h) + var(--space-lg) + 3rem); }
.files__item:nth-child(5) { inset-block-start: calc(var(--nav-h) + var(--space-lg) + 4rem); }
.files__item:nth-child(6) { inset-block-start: calc(var(--nav-h) + var(--space-lg) + 5rem); }
.files__item + .files__item { margin-block-start: var(--space-2xl); }
/* Opaque, so the file underneath never prints through the one on top. */
.file {
--fx08-shade: 0;
position: relative;
display: grid;
gap: var(--space-lg);
padding: var(--space-md);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(70% 90% at 100% 0%, rgba(168, 85, 247, .22), transparent 65%) padding-box,
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 60px -30px rgba(168, 85, 247, .5);
overflow: hidden;
transform-origin: 50% 0%;
}
.files__item:nth-child(even) .file {
background:
radial-gradient(70% 90% at 0% 0%, rgba(168, 85, 247, .22), transparent 65%) padding-box,
linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
var(--grad-border) border-box;
}
.files__item:not(:last-child) .file { will-change: transform; }
/* the dim layer — its colour, not its opacity, carries the shade */
.file::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(var(--ink-rgb), var(--fx08-shade));
pointer-events: none;
}
.file__media {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: calc(var(--radius-stage) - var(--space-md));
box-shadow: 0 0 0 var(--border-w) rgba(255, 255, 255, .08);
}
.file__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.file__media--flip img { transform: scaleX(-1); }
/* the gloss across the render */
.file__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(125deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 30%);
pointer-events: none;
}
.file__tab {
justify-self: start;
padding: .3rem .8rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: rgba(168, 85, 247, .08);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--text-2);
}
.file__body { display: grid; gap: var(--space-md); padding: 0 var(--space-sm) var(--space-md); }
.file__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
letter-spacing: var(--ls-heading);
line-height: var(--lh-heading);
}
.file__title a:hover { color: var(--lilac); }
.file__text { max-inline-size: 40ch; color: var(--text-2); }
@media (min-width: 900px) {
.file {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto 1fr;
column-gap: var(--space-2xl);
padding: var(--space-lg);
min-block-size: min(70vh, 34rem);
}
.file__tab { grid-column: 1; align-self: start; margin: var(--space-md) 0 0 var(--space-md); }
.file__body { grid-column: 1; align-self: end; padding: 0 0 var(--space-md) var(--space-md); }
.file__media { grid-column: 2; grid-row: 1 / 3; aspect-ratio: auto; block-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.files__item { position: static; }
}
/* ══ 06 · METHOD — the drawing board ═════════════════════════════════════ */
/* FX 11's band. Its resting state is the END state — paper, heading built —
so no script and reduced motion get it; js sets the dark start. */
.shift {
--shift-grid: 1;
position: relative;
block-size: 190vh;
background-color: var(--paper);
}
.shift::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, var(--grid-line) var(--border-w), transparent var(--border-w)),
linear-gradient(to bottom, var(--grid-line) var(--border-w), transparent var(--border-w));
background-size: var(--grid-major) var(--grid-major);
background-position: calc(50% + var(--grid-major) / 2) 0;
opacity: var(--shift-grid);
pointer-events: none;
}
.shift__stage {
position: sticky;
inset-block-start: 0;
display: grid;
align-items: center;
block-size: 100vh;
}
@supports (height: 100svh) {
.shift__stage { block-size: 100svh; }
}
.shift__inner { display: grid; gap: var(--space-xl); }
.shift__title {
--fill: 1;
--stroke: 0;
max-inline-size: 14ch;
font-size: clamp(3rem, 1rem + 8vw, 9rem);
font-stretch: var(--wdth-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: rgba(var(--paper-ink-rgb), var(--fill));
-webkit-text-stroke: 1.5px rgba(var(--teal-400-rgb), var(--stroke));
}
.shift__line { display: block; }
.shift__line + .shift__line { color: rgba(100, 25, 184, var(--fill)); }
.shift__lede {
max-inline-size: 44ch;
font-size: var(--fs-lede);
line-height: var(--lh-snug);
color: var(--text-2);
}
.method__canvas { padding-block: var(--space-2xl) var(--sec-pad); }
.method__stack { padding-block-end: var(--sec-pad); }
.method__stack-title {
margin-block-end: var(--space-xl);
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
}
/* The six tools as a spec sheet: name in the left column, the fact in the
right, one hairline per row. */
.spec { border-block-start: var(--border-w) solid var(--rule-strong); }
.spec__row {
display: grid;
gap: var(--space-xs);
padding-block: var(--space-lg);
border-block-end: var(--border);
}
.spec__row dt {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
font-stretch: var(--wdth-heading);
}
.spec__row dd { margin: 0; max-inline-size: var(--measure); color: var(--text-2); }
@media (min-width: 900px) {
.spec__row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-4xl); align-items: baseline; }
}
@media (max-width: 899px) {
.shift { block-size: 160vh; }
}
/* ══ 08 · COMPARISON ═════════════════════════════════════════════════════
Rises out of the paper board: rounded top corners over the light section
above, so the page returns to the dark canvas as a stage, not a hard cut. */
.compare-sec {
margin-block-start: calc(var(--radius-stage) * -1);
border-radius: var(--radius-stage) var(--radius-stage) 0 0;
background:
radial-gradient(60% 50% at 75% 45%, rgba(122, 34, 219, .28), transparent 70%),
var(--ink);
}
.compare {
display: grid;
gap: var(--gap-grid-lg);
max-inline-size: 70rem;
margin-inline: auto;
}
.compare__col {
position: relative;
display: grid;
align-content: start;
gap: var(--space-lg);
padding: var(--card-pad-block) var(--card-pad-inline);
border-radius: var(--radius-stage);
}
.compare__col--standard {
border: var(--border-w) solid var(--glass-line);
background: rgba(238, 234, 246, .025);
color: var(--text-2);
}
.compare__col--premium {
border: var(--border-w) solid transparent;
background:
radial-gradient(90% 60% at 50% 0%, rgba(168, 85, 247, .28), transparent 70%) padding-box,
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
linear-gradient(135deg, #C084FC, rgba(122, 34, 219, .6) 40%, rgba(45, 212, 191, .6)) border-box;
box-shadow: 0 40px 100px -40px rgba(168, 85, 247, .7);
}
.compare__tag {
justify-self: start;
padding: .3rem .8rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.compare__tag--lit { border-color: transparent; background: var(--grad-violet); color: #fff; box-shadow: 0 0 18px -4px var(--violet-glow); }
.compare__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
color: var(--text-1);
}
.compare__col--standard .compare__title { color: var(--text-2); }
.compare__list { display: grid; }
.compare__row {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-md);
align-items: start;
padding-block: var(--space-md);
border-block-start: var(--border-w) solid var(--glass-line);
font-size: var(--fs-sm);
line-height: var(--lh-body);
}
.compare__col--premium .compare__row { color: var(--text-1); }
/* ticks and crosses drawn in CSS — the tick in the tool colour */
.compare__mark {
position: relative;
inline-size: 1.4rem;
block-size: 1.4rem;
margin-block-start: .15rem;
border-radius: var(--radius-pill);
background: rgba(45, 212, 191, .14);
box-shadow: 0 0 0 var(--border-w) rgba(45, 212, 191, .5) inset;
}
.compare__mark::after {
content: "";
position: absolute;
inset-block-start: 30%;
inset-inline-start: 34%;
inline-size: 26%;
block-size: 42%;
border: solid var(--teal-400);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.compare__mark--no { background: rgba(238, 234, 246, .05); box-shadow: 0 0 0 var(--border-w) var(--glass-line) inset; }
.compare__mark--no::after,
.compare__mark--no::before {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 28%;
inline-size: 44%;
block-size: 2px;
border: 0;
background: rgba(238, 234, 246, .4);
transform: rotate(45deg);
}
.compare__mark--no::before { transform: rotate(-45deg); }
.compare__cta {
display: grid;
justify-items: center;
gap: var(--space-lg);
margin-block-start: var(--space-3xl);
text-align: center;
color: var(--text-2);
}
@media (min-width: 900px) {
.compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.compare__col--standard { transform: scale(.96); }
}
/* ══ 11 · TESTIMONIALS — lit glass cards ═════════════════════════════════ */
.voices__row {
display: flex;
gap: var(--gap-grid);
margin-inline: calc(var(--container-pad) * -1);
padding: var(--space-lg) var(--container-pad);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--container-pad);
scrollbar-width: none;
}
.voices__row::-webkit-scrollbar { display: none; }
.voice {
flex: none;
display: grid;
align-content: start;
gap: var(--space-lg);
inline-size: min(84vw, 26rem);
margin: 0;
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(90% 60% at 0% 0%, rgba(168, 85, 247, .14), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
scroll-snap-align: start;
}
.voices__carousel.is-carousel .voice.is-front {
background:
radial-gradient(90% 70% at 50% 0%, rgba(168, 85, 247, .32), transparent 70%) padding-box,
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
linear-gradient(135deg, #C084FC, rgba(122, 34, 219, .6) 45%, rgba(45, 212, 191, .55)) border-box;
box-shadow: 0 40px 100px -40px rgba(168, 85, 247, .7);
}
/* five stars drawn with one mask, filled with the brand gradient */
.voice__stars {
display: block;
inline-size: 6.2rem;
block-size: 1.05rem;
background: var(--grad-violet);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cg%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(25)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(50)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(75)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(100)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cg%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(25)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(50)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(75)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(100)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.voice__text {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
font-stretch: 102%;
line-height: 1.45;
letter-spacing: var(--ls-snug);
color: var(--text-1);
}
.voice__text::before { content: "\201C"; color: var(--lilac); }
.voice__text::after { content: "\201D"; color: var(--lilac); }
.voice__who {
display: flex;
align-items: center;
gap: var(--space-md);
padding-block-start: var(--space-md);
border-block-start: var(--border-w) solid var(--glass-line);
}
.voice__mono {
display: grid;
place-items: center;
inline-size: var(--size-avatar);
block-size: var(--size-avatar);
border-radius: var(--radius-pill);
background: var(--grad-violet);
box-shadow: 0 0 18px -4px var(--violet-glow);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: #fff;
}
.voice__id { display: grid; }
.voice__name { font-weight: var(--fw-semibold); color: var(--text-1); }
.voice__role { font-size: var(--fs-xs); color: var(--text-3); }
@media (min-width: 900px) {
.voices__row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
}
.voice { inline-size: auto; }
}
/* The carousel (js/fx/11-voices.js adds .is-carousel): the three share one
grid cell, so the tallest quote sets the height and nothing jumps; the
script places them by x/scale. The side cards reach past the container,
so the section clips sideways. */
.voices { overflow-x: clip; }
.voices__carousel.is-carousel .voices__row {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-items: stretch;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
scroll-snap-type: none;
touch-action: pan-y;
cursor: grab;
user-select: none;
}
/* The side cards run off the screen: at both viewport edges they fade into
the ink, so the cut reads as depth rather than as a crop. Above the slides
(script z-index 2–3), never in the way of a drag. */
.voices__carousel.is-carousel { position: relative; }
.voices__carousel.is-carousel::before,
.voices__carousel.is-carousel::after {
content: "";
position: absolute;
z-index: 4;
inset-block: 0;
inline-size: clamp(2rem, 12vw, 12rem);
background: linear-gradient(90deg, var(--ink), rgba(var(--ink-rgb), 0));
pointer-events: none;
}
.voices__carousel.is-carousel::before { inset-inline-start: calc(50% - 50vw); }
.voices__carousel.is-carousel::after { inset-inline-end: calc(50% - 50vw); transform: scaleX(-1); }
.voices__carousel.is-carousel .voices__row:active { cursor: grabbing; }
.voices__carousel.is-carousel .voices__row:focus-visible {
outline: var(--focus-w) solid var(--lilac);
outline-offset: var(--space-sm);
border-radius: var(--radius-stage);
}
.voices__carousel.is-carousel .voice {
grid-area: 1 / 1;
inline-size: min(100%, 40rem);
transform-origin: 50% 60%;
}
.voices__carousel.is-carousel .voice__text { font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); }
.voices__controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
margin-block-start: var(--space-xl);
}
.voices__controls[hidden] { display: none; }
.voices__arrow {
display: grid;
place-items: center;
inline-size: 3rem;
block-size: 3rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
color: var(--text-1);
cursor: pointer;
transition: box-shadow var(--dur-fast) ease;
}
.voices__arrow svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.voices__arrow:hover {
background: var(--grad-violet) padding-box, var(--grad-violet) border-box;
box-shadow: var(--shadow-glow);
}
.voices__arrow:focus-visible,
.voices__dot:focus-visible { outline: var(--focus-w) solid var(--lilac); outline-offset: 3px; }
.voices__dots { display: flex; gap: var(--space-xs); }
/* the dot is small; the place a thumb can land on it is not */
.voices__dot::after { content: ""; position: absolute; inset: -.95rem -.35rem; }
.voices__dot {
position: relative;
inline-size: .6rem;
block-size: .6rem;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--glass-line);
cursor: pointer;
transition: inline-size .4s var(--ease-out), background-color .4s ease;
}
.voices__dot.is-active {
inline-size: 1.8rem;
background: var(--grad-violet);
box-shadow: 0 0 12px -2px var(--violet-glow);
}
@media (prefers-reduced-motion: reduce) {
.voices__dot,
.voices__arrow { transition: none; }
}
/* ══ 12 · TIMELINE — the cards and years on the dark canvas ═════════════ */
.fx14-card {
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-panel);
background:
radial-gradient(90% 60% at 0% 0%, rgba(168, 85, 247, .14), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .9);
}
.fx14-card__title {
margin-block-end: var(--space-xs);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
font-stretch: var(--wdth-heading);
}
.fx14-card__text { font-size: var(--fs-sm); color: var(--text-2); }
.fx14-year {
font-family: var(--font-display);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
background: var(--grad-violet-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ══ 13 · CONTACT — the terms beside a lit form ══════════════════════════ */
.contact {
background:
radial-gradient(50% 45% at 70% 60%, rgba(122, 34, 219, .3), transparent 70%),
var(--ink);
}
/* minmax(0, 1fr): an auto column grew to its longest unbroken line (the email
button) and pushed both cards past the edge of a phone */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid-lg); max-inline-size: 72rem; margin-inline: auto; }
.contact__aside {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: var(--space-lg);
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
}
.contact__term { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block-end: var(--space-lg); border-block-end: var(--border-w) solid var(--glass-line); }
.contact__big {
font-family: var(--font-display);
font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1;
color: var(--lilac);
filter: drop-shadow(0 0 18px rgba(168, 85, 247, .6));
}
.contact__term-title { font-weight: var(--fw-semibold); color: var(--text-1); }
.contact__term-text { font-size: var(--fs-sm); color: var(--text-2); }
.contact__direct { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.contact__direct .btn { justify-content: flex-start; white-space: normal; }
.contact__addr { white-space: nowrap; } /* a narrow column wraps before the address, never at its hyphen */
.contact__direct-note { font-size: var(--fs-sm); color: var(--text-2); }
.contact__pay { font-size: var(--fs-xs); color: var(--text-3); }
/* The form stage: the lit card of the section. */
.contact__stage {
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(80% 50% at 50% 0%, rgba(168, 85, 247, .22), transparent 70%) padding-box,
linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
linear-gradient(135deg, #C084FC, rgba(122, 34, 219, .5) 45%, rgba(45, 212, 191, .5)) border-box;
box-shadow: 0 40px 100px -40px rgba(168, 85, 247, .6);
}
.contact__form .card__text { color: var(--text-2); font-size: var(--fs-sm); }
.contact__form .stack { display: flex; flex-direction: column; gap: var(--space-md); }
.contact__note {
display: flex;
gap: var(--space-sm);
align-items: flex-start;
margin-block-start: var(--space-lg);
font-size: var(--fs-xs);
color: var(--text-3);
}
.contact__note .icon { flex: none; stroke-width: 1.6; }
/* progress as three pills */
.contact .form-progress { border: 0; gap: var(--space-xs); }
.contact .progress-step {
padding: .35rem .8rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
}
.contact .progress-step.is-active { border-color: transparent; background: var(--grad-violet); color: #fff; box-shadow: 0 0 16px -4px var(--violet-glow); }
.contact .progress-step.is-active .progress-step__num { color: #fff; }
/* options: rounded glass, lit when picked. Each card fills its grid cell, so
a two-line option never leaves its neighbour short and the row gaps even. */
/* equal rows too: one two-line option no longer makes its row taller than
the rest, so the six read as one even set */
.contact .field > .grid--2 { grid-auto-rows: 1fr; }
.contact .option__card { block-size: 100%; border-radius: var(--radius-lg); border-color: var(--glass-line); background: var(--glass); }
.contact .option:hover .option__card { border-color: rgba(192, 132, 252, .45); background: rgba(168, 85, 247, .06); }
.contact .option__input:checked + .option__card { border-color: #C084FC; background: rgba(168, 85, 247, .14); box-shadow: 0 0 24px -8px var(--violet-glow); }
.contact .option__input:checked + .option__card::before,
.contact .option__input:checked + .option__card::after { border-color: #C084FC; }
.contact .field__input { border-radius: var(--radius-lg); border-color: var(--glass-line); background: rgba(11, 9, 18, .6); }
.contact .field__input:focus-visible { border-color: #C084FC; box-shadow: 0 0 0 var(--border-w) #C084FC, 0 0 24px -8px var(--violet-glow); }
@media (min-width: 900px) {
.contact__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}
/* ══ 14 · FAQ — the title held on the left, the answers on glass ═════════ */
.faq__grid { display: grid; gap: var(--gap-grid-lg); }
.faq__head { margin-block-end: 0; align-content: start; }
.faq__list {
padding: var(--space-sm) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(70% 40% at 100% 0%, rgba(168, 85, 247, .14), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
}
.faq__list .faq-item:last-child { border-block-end: 0; }
.faq__list.accordion { border-block-start: 0; }
.faq .faq-item.is-open .faq-question { color: var(--lilac); }
@media (min-width: 900px) {
.faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4xl); align-items: start; }
.faq__head { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-2xl)); }
}
/* ══ 16 · FOOTER — the stage again, lit from the top ═════════════════════ */
.site-footer {
margin-inline: var(--space-xs);
padding-block: var(--space-4xl) var(--space-xl);
border-radius: var(--radius-stage) var(--radius-stage) 0 0;
background:
radial-gradient(55% 50% at 0% 0%, rgba(122, 34, 219, .6), transparent 62%),
radial-gradient(50% 45% at 100% 0%, rgba(192, 132, 252, .45), transparent 62%),
linear-gradient(0deg, var(--ink) 0%, #120B22 60%, #1D0F36 100%);
overflow: clip;
}
.site-footer__glow {
position: absolute;
inset-inline-start: -25%;
inline-size: 150%;
inset-block-end: 60%;
aspect-ratio: 2.1 / 1;
border-radius: 50%;
background: radial-gradient(closest-side, #07040E 93%, rgba(7, 4, 14, 0) 100%);
box-shadow: 0 2px 0 0 rgba(233, 213, 255, .22), 0 40px 110px -10px rgba(168, 85, 247, .5);
}
.footer__cta {
display: grid;
justify-items: center;
gap: var(--space-xl);
margin-block-end: var(--space-4xl);
text-align: center;
}
.footer__cta-line {
max-inline-size: 22ch;
font-family: var(--font-display);
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
--fill: 1;
}
/* phones and tablets: the two link lists sit side by side under the brand,
contact spans below — half the scroll of four stacked columns */
.footer__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2xl) var(--space-lg);
padding-block-start: var(--space-2xl);
border-block-start: var(--border-w) solid var(--glass-line);
}
.footer__col { display: grid; align-content: start; gap: var(--space-md); }
.footer__col:first-child,
.footer__col:last-child { grid-column: 1 / -1; }
.footer__logo { inline-size: auto; block-size: 2.4rem; }
.footer__blurb { max-inline-size: 36ch; font-size: var(--fs-sm); color: var(--text-2); }
.footer__payments { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.footer__title {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--lilac);
}
.footer__list { display: grid; gap: var(--space-2xs); padding: 0; list-style: none; }
/* a taller hit area for thumbs; the list gap shrinks to keep the rhythm */
.footer__link {
display: inline-block;
padding-block: var(--space-2xs);
font-size: var(--fs-sm);
color: var(--text-2);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
.footer__link:hover { color: var(--text-1); }
.footer__contact-item { display: flex; align-items: center; gap: var(--space-sm); }
.footer__contact-item .icon-tile {
display: grid;
place-items: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: var(--radius-md);
background: var(--grad-violet);
box-shadow: 0 0 18px -4px var(--violet-glow);
color: #fff;
}
.footer__contact-item .icon-tile__glyph { inline-size: 1.2rem; block-size: 1.2rem; stroke-width: 1.8; }
.footer__contact-body { display: grid; }
.footer__contact-label { font-size: var(--fs-xs); color: var(--text-3); }
.footer__contact-value { font-weight: var(--fw-semibold); text-decoration: none; }
.footer__social {
display: grid;
place-items: center;
inline-size: 2.6rem;
block-size: 2.6rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
color: var(--text-1);
transition: border-color var(--dur-fast) var(--ease-out);
}
.footer__social:hover { border-color: #C084FC; }
.footer__bottom {
margin-block-start: var(--space-3xl);
padding-block-start: var(--space-lg);
border-block-start: var(--border-w) solid var(--glass-line);
font-size: var(--fs-xs);
color: var(--text-3);
text-align: center;
}
@media (min-width: 900px) {
.site-footer { margin-inline: var(--space-sm); }
.footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.footer__col:first-child,
.footer__col:last-child { grid-column: auto; }
}
/* ══ 12b · SIGNATURE — the pinned sentence that becomes the mark ═════════
js/signature.js scrubs the scene; this draws the stage and both resting
states. Below 900px (and with reduced motion or no script) it is a plain
section: the sentence above the mark. From 900px the script adds
.signature__frame--scene to drop both halves into one grid cell. */
.js .signature__veil { visibility: hidden; }
.signature {
overflow: hidden;
background:
radial-gradient(45% 40% at 50% 55%, rgba(122, 34, 219, .28), transparent 70%),
var(--ink);
}
.signature__frame {
display: grid;
justify-items: center;
align-items: center;
align-content: center;
gap: var(--space-2xl);
text-align: center;
}
.signature__frame--scene .signature__words,
.signature__frame--scene .signature__logo { grid-area: 1 / 1; }
.signature__words {
max-inline-size: var(--measure-narrow);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1.05;
letter-spacing: var(--ls-snug);
color: rgb(var(--title-rgb));
}
.signature__word { display: inline-block; }
.signature__logo {
position: relative;
display: block;
inline-size: var(--signature-logo-w);
max-inline-size: 100%;
}
.signature__glow {
position: absolute;
inset: 0;
background-image: var(--grad-brand);
filter: blur(var(--blur-glow));
opacity: 0;
will-change: opacity;
}
.signature__wipe { position: relative; display: block; }
.signature__mark { display: block; inline-size: 100%; block-size: auto; }
@media (min-width: 900px) {
.signature {
display: grid;
align-content: center;
min-block-size: var(--hero-min-h-fallback);
min-block-size: var(--hero-min-h);
padding-block: var(--sec-pad-tight);
}
}
@media (prefers-reduced-motion: reduce) {
.js .signature__veil { visibility: visible; }
}
/* ══ 03 · WORK — the live preview showcase (js/fx/07-showcase.js) ═════════
Default (no script, phones, reduced motion): one card per project, the
site inside a browser window. .wk.is-stage (desktop): the pinned stage —
names on the left, one big window on the right. */
.wk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.wk__filters {
display: flex;
gap: var(--space-xs);
margin-inline: calc(var(--container-pad) * -1);
padding: var(--space-2xs) var(--container-pad) var(--space-md);
margin-block-end: var(--space-lg); /* air between the chips and the first name */
overflow-x: auto;
scrollbar-width: none;
/* the row runs off the right edge on phones: fade it out there, so the cut
chip reads as "more to swipe" rather than as a clipped control */
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--container-pad) * 2.5), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - var(--container-pad) * 2.5), transparent);
}
.wk__filters::-webkit-scrollbar { display: none; }
.wk__filters .fx15-btn { flex: none; }
.wk__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.wk__item { min-inline-size: 0; }
.wk__item.is-out { display: none; }
.wk__name {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xs);
inline-size: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
text-align: start;
cursor: pointer;
}
.wk__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1.1;
color: var(--text-1);
}
.wk__sector {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--lilac);
}
.wk__soon { color: var(--teal-400); }
.wk__bar { display: none; }
.wk__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-block-start: var(--space-md); }
/* the browser window, shared by the cards and the stage */
.wk__frame {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
border: var(--border-w) solid transparent;
border-radius: var(--radius-panel);
background:
linear-gradient(#0E0A18, #0E0A18) padding-box,
var(--grad-border) border-box;
box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -30px var(--violet-glow);
overflow: hidden;
}
.wk__chrome {
display: flex;
align-items: center;
gap: .4rem;
padding: .6rem .9rem;
border-block-end: var(--border-w) solid var(--glass-line);
background: rgba(255, 255, 255, .03);
}
.wk__chrome > i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.wk__chrome > i:first-child { background: #FF5F57; }
.wk__chrome > i:nth-child(2) { background: #FEBC2E; }
.wk__chrome > i:nth-child(3) { background: #28C840; }
.wk__url {
flex: 1;
min-inline-size: 0;
margin-inline-start: var(--space-sm);
padding: .3rem .8rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .06);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk__live {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: #4ADE80;
}
.wk__live::before {
content: "";
inline-size: .45rem;
block-size: .45rem;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
animation: wk-pulse 1.6s ease-in-out infinite;
}
.wk__live.is-soon { color: var(--teal-400); }
@keyframes wk-pulse { 50% { opacity: .35; } }
.wk__viewport {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #fff;
}
/* a capture shorter than the window fills it from the top — no white band */
.wk__shot { display: block; inline-size: 100%; block-size: auto; min-block-size: 100%; object-fit: cover; object-position: top center; will-change: transform; }
.wk__desc { color: var(--text-2); }
.wk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.wk__link {
display: inline-flex;
gap: .4rem;
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--lilac);
text-decoration: none;
}
.wk__link:hover { color: #fff; }
.wk__open {
min-block-size: 2.4rem;
padding: 0 1.1rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
font-size: var(--fs-xs);
color: var(--text-1);
cursor: pointer;
}
.wk__open:hover { box-shadow: var(--shadow-glow); }
.wk__stage { display: none; }
.wk-brief[hidden] { display: none; }
/* ── the desktop stage ────────────────────────────────────────────────── */
@media (min-width: 900px) {
.wk.is-stage .wk__pin {
display: grid;
align-items: center;
block-size: 100vh;
/* the foot clears the floating WhatsApp button (its size + its offset),
so the caption and "Read the brief" are never under it */
padding-block: calc(var(--nav-h) + var(--space-lg)) calc(var(--size-touch-lg) + var(--space-md));
}
.wk.is-stage .wk__grid {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
align-items: center;
gap: clamp(2rem, 4vw, 4.5rem);
}
.wk.is-stage .wk__filters { flex-wrap: wrap; margin: 0 0 var(--space-lg); padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.wk.is-stage .wk__list { gap: 0; }
.wk.is-stage .wk__card { display: none; }
/* no rule of its own: the progress track below is the row divider, so each
row ends on one line instead of a border and a track 5px apart */
.wk.is-stage .wk__name { --wk-row-pad: clamp(.2rem, .6vh, .5rem); padding-block: var(--wk-row-pad) 0; }
.wk.is-stage .wk__title {
/* sized by the screen height too: nine names have to fit a laptop screen */
font-size: clamp(.95rem, min(.6rem + 1.25vw, 2.55vh), 1.6rem);
color: var(--text-3);
transition: color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wk.is-stage .wk__sector { color: var(--text-3); transition: color var(--dur-fast) var(--ease-out); }
.wk.is-stage .wk__name:hover .wk__title { color: var(--text-1); }
.wk.is-stage .wk__item.is-active .wk__title {
color: #fff;
text-shadow: 0 0 28px rgba(168, 85, 247, .7);
transform: translateX(.6rem);
}
.wk.is-stage .wk__item.is-active .wk__sector { color: var(--lilac); }
.wk.is-stage .wk__item.is-dim { opacity: .35; transition: opacity var(--dur-fast) var(--ease-out); }
/* a dimmed project the scroll has reached is lit like any other while it
is the one in the window — a glowing title at a third of its strength
read as broken */
.wk.is-stage .wk__item.is-dim.is-active { opacity: 1; }
.wk.is-stage .wk__bar {
display: block;
block-size: 2px;
margin-block-start: var(--wk-row-pad);
border-radius: var(--radius-pill);
background: var(--glass-line);
overflow: hidden;
}
.wk.is-stage .wk__bar i {
display: block;
block-size: 100%;
background: var(--grad-violet);
box-shadow: 0 0 10px var(--violet-glow);
transform: scaleX(0);
transform-origin: 0 50%;
}
.wk.is-stage .wk__stage {
position: relative;
display: grid;
gap: var(--space-lg);
}
.wk__glow {
position: absolute;
inset: 10% 5% -8%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(122, 34, 219, .55), transparent);
animation: wk-breathe 5s ease-in-out infinite;
pointer-events: none;
}
.wk__frame--stage { cursor: pointer; }
.wk__viewport--stage { block-size: min(62vh, 38vw); aspect-ratio: auto; }
.wk__screen { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #fff; }
/* a one-screen capture (no long page to scroll) is wider than the window:
it is shown whole, never cropped at the sides, and the strip left under
it is the same capture, blurred, so the page reads as carrying on */
/* (gen-work.js sets the capture as the screen's inline background-image,
so its path resolves against the page, not this sheet) */
.wk__screen--short { background-color: var(--ink); background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
.wk__screen--short::before {
content: "";
position: absolute;
inset: -8%;
background: inherit;
filter: blur(14px);
}
.wk__screen--short .wk__shot { position: relative; min-block-size: 0; }
.wk__meta {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-lg);
}
.wk__count {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-variant-numeric: tabular-nums;
color: var(--lilac);
}
.wk__count-of { margin-inline-start: .35rem; font-size: var(--fs-sm); color: var(--text-3); }
/* room for the longest description, so a wrap never moves the window;
a one-line description sits centred on the count and the button */
.wk__meta-desc { display: flex; align-items: center; min-block-size: calc(3em * var(--lh-body)); color: var(--text-2); }
}
@media (min-width: 1200px) {
.wk__meta-desc { min-block-size: calc(2em * var(--lh-body)); }
}
@keyframes wk-breathe { 50% { opacity: .55; transform: scale(.94); } }
@media (min-width: 640px) and (max-width: 899px) {
.wk__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-grid); }
}
/* ══ The brief panel — from the right, like the menu ═══════════════════ */
.brief {
position: fixed;
inset: 0;
z-index: var(--z-menu);
visibility: hidden;
transition: visibility 0s linear .5s;
}
.brief.is-open { visibility: visible; transition-delay: 0s; }
.brief__overlay {
position: absolute;
inset: 0;
background: rgba(5, 3, 10, .72);
opacity: 0;
transition: opacity .45s var(--ease-out);
}
.brief.is-open .brief__overlay { opacity: 1; }
.brief__panel {
position: absolute;
inset-block: var(--space-xs);
inset-inline-end: var(--space-xs);
display: flex;
flex-direction: column;
gap: var(--space-lg);
--brief-pad: clamp(1.25rem, 3vw, 2.5rem);
inline-size: min(36rem, calc(100% - var(--space-xs) * 2));
padding: var(--space-2xl) var(--brief-pad) var(--space-xl);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(90% 40% at 100% 0%, rgba(168, 85, 247, .28), transparent 70%) padding-box,
linear-gradient(#110C1D, #0B0814) padding-box,
var(--grad-border) border-box;
box-shadow: -30px 0 90px -30px rgba(122, 34, 219, .6);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(calc(100% + var(--space-xl)));
transition: transform .6s var(--ease-out);
}
.brief.is-open .brief__panel { transform: none; }
/* flex children never shrink: a long brief scrolls the panel instead */
.brief__panel > * { flex: none; }
/* sticky, not absolute: it stays at the panel's top-right however far the
brief is scrolled. A sticky offset counts from inside the panel's padding,
hence the negative inset; the negative margins put it where it always sat
(md from the corner) and hand its space back, so nothing below moves. */
.brief__close {
position: sticky;
inset-block-start: calc(var(--space-md) - var(--space-2xl));
z-index: 1;
align-self: flex-end;
margin-block: calc(var(--space-md) - var(--space-2xl)) calc(var(--space-2xl) - var(--space-md) - 2.75rem - var(--space-lg));
margin-inline-end: calc(var(--space-md) - var(--brief-pad));
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border: var(--border-w) solid var(--glass-line);
border-radius: 50%;
/* solid: the brief scrolls under it now */
background: var(--surface-2);
color: var(--text-1);
cursor: pointer;
}
.brief__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.brief__close:hover { background: var(--grad-violet); border-color: transparent; }
.brief__eyebrow {
align-self: flex-start;
padding: .3rem .8rem;
border-radius: var(--radius-pill);
background: rgba(168, 85, 247, .14);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--lilac);
}
.brief__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1.02;
color: #fff;
}
.brief__shot {
margin: 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-panel);
overflow: hidden;
background: #fff;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.brief__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.brief__body { display: grid; gap: var(--space-lg); }
.wk-brief__lede { font-size: var(--fs-lede); line-height: var(--lh-snug); color: var(--text-1); }
.wk-brief__text { color: var(--text-2); }
.wk-brief__facts { display: grid; margin: 0; border-block-start: var(--border-w) solid var(--glass-line); }
.wk-brief__row {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: var(--space-md);
padding-block: var(--space-sm);
border-block-end: var(--border-w) solid var(--glass-line);
}
.wk-brief__row dt {
padding-block-start: .2rem;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.wk-brief__row dd { margin: 0; color: var(--text-1); }
.wk-brief__row a { color: var(--lilac); }
.wk-brief__h {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.wk-brief__list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.wk-brief__list li { position: relative; padding-inline-start: 1.6rem; color: var(--text-2); }
.wk-brief__list li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .45em;
inline-size: .8rem;
block-size: .8rem;
border-radius: 50%;
background: var(--grad-violet);
box-shadow: 0 0 12px var(--violet-glow);
}
.brief__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-block-start: var(--space-sm); }
.brief__actions [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.brief, .brief__overlay, .brief__panel { transition: none; }
.wk__glow, .wk__live::before { animation: none; }
}
/* ══ 08 · STORY — the years sideways, ending on the mark (js/fx/14-timeline.js)
Default (no script / reduced motion): a sideways-scrolling row. .is-scene:
the pinned stage, one screen tall, cards alternating above and below the
line. */
.story { overflow-x: clip; }
.st__pin { overflow-x: auto; scrollbar-width: none; }
.st__pin::-webkit-scrollbar { display: none; }
.st__track {
position: relative;
display: flex;
align-items: center;
inline-size: max-content;
padding-inline: var(--container-pad) 0;
}
.st__list { display: flex; }
.st__item {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
justify-items: start;
inline-size: clamp(15rem, 76vw, 20rem);
min-block-size: 32rem;
padding-inline-end: var(--space-xl);
}
.st__node {
grid-row: 2;
position: relative;
z-index: 1;
inline-size: 1.1rem;
block-size: 1.1rem;
border: 2px solid rgba(255, 255, 255, .25);
border-radius: 50%;
background: var(--ink);
transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s var(--ease-out);
}
/* the year sits on the line: a soft-edged ink backing lets the line (and the
head's glow) fade into it and out again instead of striking the numerals */
.st__year {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 1.9rem;
translate: 0 -50%;
background-color: var(--ink);
box-shadow: 0 0 var(--space-xs) var(--space-2xs) var(--ink);
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
line-height: 1;
color: rgba(255, 255, 255, .22);
transition: color .5s var(--ease-out), text-shadow .5s var(--ease-out);
}
.st__card {
grid-row: 1;
align-self: end;
margin-block-end: var(--space-xl);
padding: var(--space-lg);
border: var(--border-w) solid transparent;
border-radius: var(--radius-panel);
background:
radial-gradient(90% 60% at 0% 0%, rgba(168, 85, 247, .16), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.st__item--low .st__card { grid-row: 3; align-self: start; margin-block: var(--space-xl) 0; }
.st__title {
margin-block-end: var(--space-xs);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-1);
}
.st__text { font-size: var(--fs-sm); color: var(--text-2); }
/* lit unless the scene runs (no script, or the module failed: nothing to wait for) */
.st__item.is-lit .st__node,
.st.is-static .st__node,
.st:not(.is-scene) .st__node {
border-color: #C084FC;
background: #C084FC;
box-shadow: 0 0 0 6px rgba(168, 85, 247, .18), 0 0 24px 4px rgba(168, 85, 247, .6);
}
.st__item.is-lit .st__year,
.st.is-static .st__year,
.st:not(.is-scene) .st__year { color: #fff; text-shadow: 0 0 30px rgba(168, 85, 247, .6); }
/* the line: laid under the nodes, measured by the script in the scene */
.st__line {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
inline-size: 100%;
block-size: 2px;
margin-block-start: -1px;
background: rgba(255, 255, 255, .08);
pointer-events: none;
}
.st__fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--violet-600, #7A22DB), #C084FC 70%, #E9D5FF);
box-shadow: 0 0 16px rgba(168, 85, 247, .8);
transform: scaleX(1);
transform-origin: 0 50%;
}
.st__head {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
inline-size: 1.1rem;
block-size: 1.1rem;
margin: -.55rem 0 0 -.55rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 5px rgba(192, 132, 252, .35), 0 0 30px 8px rgba(168, 85, 247, .9);
display: none;
}
.st.is-scene .st__head { display: block; }
.st.is-scene .st__fill { transform: scaleX(0); }
/* the finale: the mark, centred in the last screen */
.st__end {
display: grid;
justify-items: center;
align-content: center;
gap: var(--space-xl);
inline-size: 100vw;
padding-inline: var(--container-pad);
text-align: center;
}
.st__logo { position: relative; inline-size: min(78vw, 34rem); }
.st__glow {
position: absolute;
inset: -30% -15%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(168, 85, 247, .65), rgba(45, 212, 191, .18) 60%, transparent);
pointer-events: none;
}
.st__wipe { display: block; }
.st__wipe img { display: block; inline-size: 100%; block-size: auto; }
.st__sign {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-1);
}
@media (min-width: 900px) {
.st__item { inline-size: clamp(18rem, 26vw, 23rem); }
}
.st.is-scene .st__pin {
display: grid;
align-items: center;
block-size: 100vh;
padding-block-start: var(--nav-h);
overflow: hidden;
}
.st.is-scene .st__track { padding-inline-start: 50vw; }
/* the pinned scenes are a screen tall with their content centred, so their
own lower half already spaces them from the next section */
.story:has(.st.is-scene),
.work:has(.wk.is-stage) { padding-block-end: 0; }
/* the work stage pads its own top for the bar, so the heading above it needs
no margin of its own (it read as a dead band before the filters) */
.work:has(.wk.is-stage) .sec-head { margin-block-end: 0; }
/* phones: each card is centred on its year; the year sits just off the line,
on the side away from its card, so the travelling head never crosses it */
@media (max-width: 899px) {
.st__item { justify-items: center; padding-inline-end: 0; }
.st__year { inset-inline-start: 50%; translate: -50% calc(-50% + 2.4rem); }
.st__item--low .st__year { translate: -50% calc(-50% - 2.4rem); }
/* the first year starts under the head, its card centred from the outset */
.st.is-scene .st__track { padding-inline-start: calc(50vw - clamp(15rem, 76vw, 20rem) / 2); }
.st__card { inline-size: calc(100% - var(--space-lg)); }
}
.st.is-scene .st__item { min-block-size: min(72vh, 40rem); }
/* no script / reduced motion: no sideways scrolling to discover. The years
wrap into rows (node and year, then the card), the mark closes the list. */
.st:not(.is-scene) .st__pin { overflow: visible; }
.st:not(.is-scene) .st__track {
flex-direction: column;
align-items: stretch;
gap: var(--space-2xl);
inline-size: auto;
padding-inline: var(--container-pad);
}
.st:not(.is-scene) .st__line { display: none; }
.st:not(.is-scene) .st__list { flex-wrap: wrap; justify-content: center; row-gap: var(--space-xl); }
.st:not(.is-scene) .st__item {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-content: start;
align-items: center;
justify-items: start;
column-gap: var(--space-sm);
row-gap: var(--space-md);
min-block-size: 0;
}
.st:not(.is-scene) .st__node { grid-area: 1 / 1; }
.st:not(.is-scene) .st__year,
.st:not(.is-scene) .st__item--low .st__year { position: static; grid-area: 1 / 2; translate: none; }
.st:not(.is-scene) .st__card,
.st:not(.is-scene) .st__item--low .st__card { grid-area: 2 / 1 / 3 / -1; align-self: start; margin-block: 0; }
.st:not(.is-scene) .st__end { inline-size: auto; }
@media (prefers-reduced-motion: reduce) {
.st__node, .st__year { transition: none; }
}
/* ══ 13. SHINE ═════════════════════════════════════════════════════════
The owner dropped the turning "searchlight" rims (2026-10-01): every glass
edge is a still gradient again (--grad-border from tokens.css). What moves
now is quiet: the drifting blurred dots (AMBIENT, at the end of this
file), a light sweep across primary buttons and the hero tiles, and a
travelling sheen on title accents. Reduced motion: all of it rests. */
/* still used by the arch rim light in the hero */
@property --mk-spin {
syntax: "";
inherits: false;
initial-value: 0deg;
}
@keyframes mk-spin { to { --mk-spin: 360deg; } }
/* the navbar capsule and menu button use a hairline gradient rim */
.navbar__links,
.menu-trigger {
border-color: transparent;
background:
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
}
/* light sweeps */
@keyframes mk-sweep {
0%, 62% { transform: translateX(-130%) skewX(-18deg); }
100% { transform: translateX(230%) skewX(-18deg); }
}
.btn--primary { overflow: hidden; }
.btn--primary::after,
.brand__tile::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 45%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: translateX(-130%) skewX(-18deg);
animation: mk-sweep 4.2s cubic-bezier(.45, 0, .2, 1) infinite;
pointer-events: none;
}
.brand__tile { position: relative; overflow: hidden; }
.brand__tile::after { background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .28), transparent); animation-duration: 5s; }
.brand--gsap .brand__tile::after { animation-delay: -0.5s; }
.brand--wordpress .brand__tile::after { animation-delay: -1s; }
.brand--shopify .brand__tile::after { animation-delay: -1.5s; }
.brand--elementor .brand__tile::after { animation-delay: -2s; }
.brand--code .brand__tile::after { animation-delay: -2.5s; }
.brand--woo .brand__tile::after { animation-delay: -3s; }
.brand--javascript .brand__tile::after { animation-delay: -3.4s; }
.brand--html .brand__tile::after { animation-delay: -3.8s; }
.brand--css .brand__tile::after { animation-delay: -4.4s; }
.brand--php .brand__tile::after { animation-delay: -4.8s; }
/* the tiles violet glow breathes */
@keyframes mk-glow {
50% { box-shadow: inset 0 -3px 8px rgba(122, 34, 219, .12), 0 18px 38px -14px rgba(0, 0, 0, .8), 0 0 48px 0 rgba(168, 85, 247, .85); }
}
.brand__tile { animation: mk-glow 3.6s ease-in-out infinite; }
.brand--elementor .brand__tile, .brand--html .brand__tile, .brand--code .brand__tile { animation-delay: -1.2s; }
.brand--wordpress .brand__tile, .brand--css .brand__tile, .brand--shopify .brand__tile { animation-delay: -2.4s; }
.brand--gsap .brand__tile, .brand--php .brand__tile, .brand--javascript .brand__tile { animation-delay: -3s; }
/* travelling sheen on title accents, once built */
@keyframes mk-sheen { to { background-position: -250% 0; } }
.sel--title.is-built .sec-title__accent,
.hero__head.is-built .hero-title__line--accent,
.st__sign .sec-title__accent,
.footer__cta .sec-title__accent {
background: linear-gradient(100deg, #C084FC 0%, #C084FC 38%, #F7EEFF 50%, #C084FC 62%, #C084FC 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: mk-sheen 4.5s linear infinite;
}
/* the section label's dot pulses */
@keyframes mk-dot { 50% { box-shadow: 0 0 0 4px rgba(168, 85, 247, .18), 0 0 16px 3px var(--violet-glow); } }
.sec-label::before { animation: mk-dot 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.btn--outline, .hero-badge, .glass-card, .numbers__item, .file, .voice, .voices__arrow,
.contact__aside, .faq__list, .wk__frame, .wk__open, .brief__panel, .st__card, .navbar__links, .menu-trigger, .hero-proof,
.btn--primary::after, .brand__tile, .brand__tile::after, .sec-label::before,
.sel--title.is-built .sec-title__accent, .hero__head.is-built .hero-title__line--accent,
.st__sign .sec-title__accent, .footer__cta .sec-title__accent { animation: none; }
.btn--primary::after, .brand__tile::after { display: none; }
}
/* ══ 01 · HERO additions — the proof line and the travelling rim light ══ */
/* The proof: one glass card. Phones: the client rating across the top, the
two figures side by side below it, a hairline between each. From 640 the
card becomes a single capsule strip: rating | projects | support. The rim
is the same turning light as every glass edge (SHINE). */
.hero-proof {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
inline-size: min(100%, 22rem);
margin-block-start: var(--space-md);
border: var(--border-w) solid transparent;
border-radius: var(--radius-panel);
background:
radial-gradient(80% 90% at 50% 0%, rgba(168, 85, 247, .16), transparent 70%) padding-box,
linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
var(--grad-border) border-box;
box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9), 0 0 40px -22px var(--violet-glow);
}
.hero-proof__item {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-sm);
font-size: var(--fs-xs);
line-height: 1.35;
color: var(--text-2);
}
.hero-proof__item--rating { grid-column: 1 / -1; border-block-end: var(--border-w) solid var(--glass-line); }
.hero-proof__rating { display: grid; justify-items: start; gap: .3rem; text-align: start; }
.hero-proof__item--stat { flex-direction: column; gap: .2rem; text-align: center; }
.hero-proof__item--stat + .hero-proof__item--stat { border-inline-start: var(--border-w) solid var(--glass-line); }
.hero-proof__item strong {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem);
font-weight: var(--fw-heavy);
line-height: 1;
color: #fff;
text-shadow: 0 0 18px rgba(168, 85, 247, .6);
}
.hero-proof__item--stat .hero-proof__label { max-inline-size: 14ch; }
@media (min-width: 640px) {
.hero-proof {
display: flex;
inline-size: auto;
border-radius: var(--radius-pill);
}
.hero-proof__item { padding: var(--space-sm) var(--space-lg); }
.hero-proof__item--rating { border-block-end: 0; }
.hero-proof__item--stat { flex-direction: row; align-items: center; gap: var(--space-xs); text-align: start; }
.hero-proof__item + .hero-proof__item { border-inline-start: var(--border-w) solid var(--glass-line); }
.hero-proof__item strong { font-size: var(--fs-h4); }
.hero-proof__item--stat .hero-proof__label { max-inline-size: 11ch; }
}
.hero-proof__faces { display: inline-flex; }
.hero-proof__faces span {
display: grid;
place-items: center;
inline-size: 2rem;
block-size: 2rem;
margin-inline-start: -.5rem;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--grad-violet);
font-family: var(--font-mono);
font-size: .6rem;
color: #fff;
}
.hero-proof__faces span:first-child { margin-inline-start: 0; }
.hero-proof__stars {
display: block;
inline-size: 4.6rem;
block-size: .8rem;
background: linear-gradient(90deg, #FDE68A, #FBBF24);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cg%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(25)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(50)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(75)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(100)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3C/g%3E%3C/svg%3E") left / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cg%3E%3Cpath d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(25)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(50)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(75)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3Cpath transform='translate(100)' d='M10 1.5l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.8l-5.2 2.7 1-5.8L1.6 7.6l5.8-.8z'/%3E%3C/g%3E%3C/svg%3E") left / contain no-repeat;
}
/* The arch rim: a bright spot of light that travels along the edge of the
arch — a conic gradient masked down to a thin elliptical ring. */
.hero__rim {
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(from var(--mk-spin), transparent 0deg 300deg, rgba(233, 213, 255, .95) 330deg, transparent 355deg);
-webkit-mask: radial-gradient(closest-side, transparent 97.2%, #000 98.4%, #000 99.4%, transparent 100%);
mask: radial-gradient(closest-side, transparent 97.2%, #000 98.4%, #000 99.4%, transparent 100%);
filter: drop-shadow(0 0 10px rgba(192, 132, 252, .9));
animation: mk-spin 9s linear infinite;
}
/* the arch itself breathes */
@keyframes hero-arch-breathe {
50% {
box-shadow:
0 -2px 0 0 rgba(233, 213, 255, .4),
0 -56px 140px -10px rgba(168, 85, 247, .8),
0 -14px 50px -8px rgba(192, 132, 252, .6);
}
}
.hero__arch { animation: hero-arch-breathe 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.hero__rim, .hero__arch { animation: none; }
.hero__rim { display: none; }
}
/* ══ 09 · CONTACT — the form, second pass (2026-10-01) ═══════════════════
The owner's brief: the most important thing on the page, and it must be
simple. So: one question per step, said in plain words; where you are is
shown as three joined dots (done = tick, now = lit); every choice is one
large card with a radio mark at its end; the first step moves on by itself
when a card is picked; errors go away the moment they are answered; the
two cards of the section end at the same height. */
.qf__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
margin-block-end: var(--space-xl);
}
.qf__count {
white-space: nowrap;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.qf__count span { color: var(--lilac); }
.contact .form-progress {
display: flex;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
border: 0;
}
.contact .progress-step,
.contact .progress-step.is-active {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--text-3);
}
/* the line that joins a step to the one before it; violet once that one is done */
.contact .progress-step + .progress-step::before {
content: "";
inline-size: clamp(.6rem, 4vw, 2.5rem);
block-size: 2px;
margin-inline: var(--space-xs);
border-radius: var(--radius-pill);
background: var(--glass-line);
transition: background-color var(--dur-fast) var(--ease-out);
}
.contact .progress-step.is-done + .progress-step::before { background: #A855F7; }
.contact .progress-step__num,
.contact .progress-step.is-active .progress-step__num {
position: relative;
display: grid;
place-items: center;
flex: none;
inline-size: 1.9rem;
block-size: 1.9rem;
border: var(--border-w) solid var(--glass-line);
border-radius: 50%;
background: var(--glass);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-2);
transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.contact .progress-step.is-active { color: var(--text-1); }
.contact .progress-step.is-active .progress-step__num {
border-color: transparent;
background: var(--grad-violet);
color: #fff;
box-shadow: 0 0 18px -2px var(--violet-glow);
}
/* done: the number gives way to a tick */
.contact .progress-step.is-done .progress-step__num {
border-color: #C084FC;
background: rgba(168, 85, 247, .18);
color: transparent;
}
.contact .progress-step.is-done .progress-step__num::after {
content: "";
position: absolute;
inline-size: .32rem;
block-size: .62rem;
margin-block-start: -.12rem;
border: solid #E9D5FF;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.progress-step__name { display: none; }
.contact .progress-step.is-active .progress-step__name { display: inline; }
.qf__hint {
margin-block: calc(var(--space-xs) * -1) var(--space-lg);
font-size: var(--fs-sm);
color: var(--text-2);
}
/* ── the choices ──────────────────────────────────────────────────────── */
.qf__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.contact .option__card {
display: flex;
align-items: center;
gap: var(--space-md);
min-block-size: 3.75rem;
padding: var(--space-md) 3.25rem var(--space-md) var(--space-lg);
border-radius: var(--radius-panel);
font-size: var(--fs-body);
color: var(--text-1);
transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact .option:hover .option__card { transform: translateY(-1px); }
.option__icon {
flex: none;
inline-size: 1.5rem;
block-size: 1.5rem;
fill: none;
stroke: var(--lilac);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.option__text { display: grid; gap: .15rem; line-height: var(--lh-snug); }
.option__text strong { font-weight: var(--fw-semibold); }
.option__sub { font-size: var(--fs-sm); color: var(--text-2); }
/* the radio mark at the end of the card (replaces the old corner handles) */
.contact .option__card::after,
.contact .option__input:checked + .option__card::after {
content: "";
position: absolute;
inset-block: 50% auto;
inset-inline: auto var(--space-md);
inline-size: 1.25rem;
block-size: 1.25rem;
margin-block-start: -.625rem;
border: var(--border-w) solid rgba(238, 234, 246, .3);
border-radius: 50%;
background: none;
transform: none;
transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.contact .option__input:checked + .option__card::after {
border-color: #C084FC;
background: #C084FC;
box-shadow: inset 0 0 0 4px #1A1230, 0 0 14px -2px var(--violet-glow);
}
.contact .option__input:checked + .option__card::before { content: none; }
/* ── the fields ───────────────────────────────────────────────────────── */
.qf__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--gap-grid); }
.field__optional {
margin-inline-start: .4rem;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.contact .field__textarea { min-block-size: 6rem; }
/* ── the buttons ──────────────────────────────────────────────────────── */
.contact .form-actions { align-items: center; margin-block-start: var(--space-lg); }
.contact .form-actions .btn--primary { flex: 1 1 auto; }
.form-actions--end { justify-content: flex-end; }
.qf__send .icon { inline-size: 1.2rem; block-size: 1.2rem; }
/* one-step form (2026-10-15): the two optional fields sit right under the
choices, and the send button runs the full width with a quiet line below */
.contact .form-step > .qf__fields { margin-block-start: var(--space-md); }
.contact .qf__actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
.contact .qf__actions .qf__send { inline-size: 100%; justify-content: center; }
.qf__after { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
/* phones: the six choices become a two-column grid of short tiles (icon over
text, radio mark in the corner), so the send button is reached in one swipe */
@media (max-width: 639px) {
.contact .qf__options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.contact .qf__options--grid .option__card { flex-direction: column; justify-content: center; text-align: center; gap: .45rem; min-block-size: 5.75rem; padding: var(--space-md) var(--space-sm); font-size: var(--fs-sm); }
.contact .qf__options--grid .option__card::after,
.contact .qf__options--grid .option__input:checked + .option__card::after { inset-block: .55rem auto; inset-inline: auto .55rem; inline-size: .95rem; block-size: .95rem; margin-block-start: 0; }
}
/* ── the end state ────────────────────────────────────────────────────── */
.contact .form-success {
justify-items: center;
align-content: center;
gap: var(--space-md);
min-block-size: 100%;
padding-block: var(--space-2xl);
text-align: center;
}
.contact .form-success:focus,
.contact .form-success:focus-visible { outline: none; }
.contact .form-success__icon {
inline-size: 4rem;
block-size: 4rem;
border-color: #C084FC;
border-radius: 50%;
background: rgba(168, 85, 247, .14);
color: #E9D5FF;
box-shadow: 0 0 34px -6px var(--violet-glow);
}
.contact .form-success h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
}
@media (min-width: 640px) {
.progress-step__name { display: inline; }
.qf__options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.qf__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qf__fields-wide { grid-column: 1 / -1; }
.contact .form-actions .btn--primary { flex: 0 1 auto; }
}
@media (min-width: 900px) {
/* the terms card and the form card end on the same line */
.contact__grid { align-items: stretch; }
.contact__stage { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
.contact .option:hover .option__card { transform: none; }
}
@media (min-width: 900px) {
.about-lit__para { line-height: 1.14; }
}
/* Work stage on short laptop screens: the stage tightens so all nine names
and the caption row stay on screen while it is pinned — smaller chips,
the sector line only under the active name, a slightly shorter window. */
@media (min-width: 900px) and (max-height: 820px) {
.wk.is-stage .wk__pin { padding-block: calc(var(--nav-h) + var(--space-xs)) var(--space-sm); }
.wk.is-stage .wk__filters { gap: .3rem; margin-block-end: var(--space-sm); }
.wk.is-stage .wk__filters .fx15-btn { min-block-size: 1.85rem; padding: 0 .7rem; font-size: .72rem; }
.wk.is-stage .wk__item:not(.is-active) .wk__sector { display: none; }
.wk.is-stage .wk__name { --wk-row-pad: clamp(.2rem, .7vh, .4rem); }
.wk.is-stage .wk__title { font-size: clamp(.9rem, 2.5vh, 1.2rem); }
.wk.is-stage .wk__stage { gap: var(--space-sm); }
.wk__viewport--stage { block-size: min(52vh, 38vw); }
}
/* no stage on a wide screen (reduced motion, or no script): the project cards
sit three to a row instead of one screen-wide card each */
@media (min-width: 900px) {
.wk:not(.is-stage) .wk__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-grid); }
}
/* ══ 01 · HERO — the rendered backdrop and the dust (2026-10-08) ══════════
The stage keeps its gradients as the base (they paint at once); over them
sits a rendered version of the same scene — the same corner lights, with
beams, haze and dust in real depth. It breathes very slowly. The square
grid is part of the render now, so the CSS one is retired here and in the
preloader. Portrait screens get the tall render, landscape the wide one. */
.hero__stage::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: url("../assets/bg/hero-tall.webp") center bottom / cover no-repeat;
animation: hero-bg-drift 26s ease-in-out infinite alternate;
pointer-events: none;
}
@media (orientation: landscape) {
.hero__stage::before { background-image: url("../assets/bg/hero-wide.webp"); }
}
@keyframes hero-bg-drift {
from { transform: scale(1); }
to { transform: scale(1.07) translate3d(0, -1%, 0); }
}
.hero__grid { display: none; }
/* FX 16: the canvas the dust is drawn on — above the light, under the copy */
.hero__dust {
position: absolute;
inset: 0;
z-index: -1;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.hero__stage::before { animation: none; }
.hero__dust { display: none; }
}
/* ══ 05b · COURSES — what he teaches (2026-10-09) ═════════════════════════
Three cards. Phones: one column. From 900px the bundle is the wide card
on the left, spanning both rows, and the free course and the channel
share the column beside it. Each card is a glass panel with its render
on top; the render eases closer on hover. */
.courses { position: relative; }
.courses__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-grid);
}
.course {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
overflow: hidden;
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(90% 60% at 0% 0%, rgba(168, 85, 247, .14), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
var(--grad-border) border-box;
transition: box-shadow var(--dur-base) var(--ease-out);
}
.course:hover { box-shadow: 0 30px 70px -40px rgba(168, 85, 247, .8); }
.course__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--surface-2);
}
.course__media img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* he stands tall in these: when a slot is wider than the picture the crop
comes off the bottom, never off his head */
object-position: 50% 0%;
transition: transform 1.2s var(--ease-out);
}
.course:hover .course__media img { transform: scale(1.05); }
.course__body {
display: grid;
justify-items: start;
align-content: start;
gap: var(--space-md);
padding: var(--card-pad-block) var(--card-pad-inline);
}
.course__kicker {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--lilac);
}
.course__dot { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 10px 1px var(--violet-glow); }
.course__kicker--free { color: var(--teal-400); }
.course__kicker--free .course__dot { background: var(--teal-400); box-shadow: 0 0 10px 1px rgba(var(--teal-400-rgb), .6); }
.course__kicker--yt { color: var(--text-1); }
.course__yt { inline-size: 1.25rem; block-size: 1.25rem; fill: #FF0033; }
.course__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: 1.12;
letter-spacing: var(--ls-snug);
color: #fff;
text-wrap: balance;
}
.course__text { max-inline-size: 46ch; color: var(--text-2); }
.course__facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* the four courses of the bundle, in the order they are taken */
.course__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xs) var(--space-lg);
inline-size: 100%;
counter-reset: course;
padding-block: var(--space-sm);
border-block: var(--border-w) solid var(--glass-line);
}
.course__list li {
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding-block: .3rem;
counter-increment: course;
font-weight: var(--fw-medium);
color: var(--text-1);
}
.course__list li::before {
content: counter(course);
flex: none;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
color: var(--lilac);
}
.course__cta { margin-block-start: var(--space-xs); }
.course--lead .course__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
/* the bundle picture is 16:10: him beside all four covers */
.course--lead .course__media { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
.courses__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; }
.course--lead { grid-row: 1 / span 2; }
/* the two beside it keep the render on top, a little shallower, so the
whole picture shows and the pair stands as tall as the bundle */
.course:not(.course--lead) { grid-template-rows: auto minmax(0, 1fr); }
/* the words at the top, the button on the floor of the card: any spare
height falls between them, never under the button */
.course:not(.course--lead) .course__body { display: flex; flex-direction: column; align-items: flex-start; padding-block: var(--space-lg); gap: var(--space-sm); }
.course:not(.course--lead) .course__cta { margin-block-start: auto; }
/* the bundle card is as tall as the two beside it: its picture takes the
spare height (a little off the bottom at most) and the words
keep their own */
.course--lead { grid-template-rows: minmax(0, 1fr) auto; }
.course--lead .course__media { aspect-ratio: auto; min-block-size: 0; }
}
}
@media (prefers-reduced-motion: reduce) {
.course, .course__media img { transition: none; }
.course:hover .course__media img { transform: none; }
}
/* ── 05b · COURSES — badge, price and the closing ask (2026-10-09) ──────── */
/* on the picture, bottom-left: what kind of thing this is, at a glance */
.course__badge {
position: absolute;
inset-block-end: var(--space-sm);
inset-inline-start: var(--space-sm);
z-index: 1;
padding: .4rem .9rem;
border: var(--border-w) solid rgba(255, 255, 255, .55);
border-radius: var(--radius-pill);
background: var(--grad-violet);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8), 0 0 22px -4px var(--violet-glow);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: #fff;
}
.course__badge--free {
border-color: rgba(255, 255, 255, .7);
background: var(--teal-400);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8), 0 0 22px -4px rgba(var(--teal-400-rgb), .8);
color: var(--ink);
}
/* each course of the bundle with what it costs alone */
.course__name { flex: 1; min-inline-size: 0; }
.course__each {
flex: none;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-regular);
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.course__each--free { color: var(--teal-400); }
/* the price: the number first, the listed price struck beside it */
.course__buy { display: grid; justify-items: start; gap: var(--space-sm); inline-size: 100%; }
.course__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.course__now {
font-family: var(--font-display);
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: 1;
letter-spacing: var(--ls-snug);
color: #fff;
font-variant-numeric: tabular-nums;
}
.course__now--free { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); color: var(--teal-400); }
.course__was { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-2); text-decoration-thickness: 2px; }
.course__note { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-2); }
.course__sum { font-size: var(--fs-sm); color: var(--text-2); }
.course--lead .course__cta { margin-block-start: var(--space-xs); }
/* the closing ask: one glass band, the free course first */
.courses__band {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
align-items: center;
margin-block-start: var(--gap-grid);
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(70% 140% at 100% 50%, rgba(var(--teal-400-rgb), .12), transparent 70%) padding-box,
radial-gradient(70% 140% at 0% 50%, rgba(168, 85, 247, .2), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
linear-gradient(120deg, #C084FC, var(--teal-400)) border-box;
}
.courses__band-copy { display: grid; gap: var(--space-xs); }
.courses__band-title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: 1.15;
letter-spacing: var(--ls-snug);
color: #fff;
text-wrap: balance;
}
.courses__band-text { color: var(--text-2); }
.courses__band-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
@media (max-width: 639px) {
/* a thumb-wide button on a phone */
.course__cta { inline-size: 100%; }
}
@media (min-width: 640px) {
.courses__band-actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 900px) {
.courses__band { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); }
}
/* the Arabic landing pages, linked from the foot of the page */
.footer__ar { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block-start: var(--space-sm); font-family: "Segoe UI", Tahoma, system-ui, sans-serif; }
.footer__ar .footer__link { display: inline-flex; align-items: center; min-block-size: var(--size-touch); }
/* ══ BLOG (2026-10-12) ══════════════════════════════════════════════════════
The three newest articles on the home page, the blog index, and the article
page itself. The cards are the Courses cards (.course); only the grid and
the article column are new. Used by both languages. */
.blog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }
@media (min-width: 640px) { .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog__grid .course__media { aspect-ratio: 16 / 9; }
/* the index shows ten at a time: the rest are in the page and open ten by ten */
.blog__grid > [hidden] { display: none; }
.blog__more { gap: var(--space-sm); }
.blog__more .faq-question__icon, .blog__more svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.blog__more .btn { gap: var(--space-xs); }
.blog__count { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .blog__grid--list .course__title { font-size: var(--fs-h3); } }
.blog__grid .course__media img { object-position: 50% 50%; }
.blog__grid .course__title { font-size: var(--fs-h4); line-height: 1.3; }
.blog__grid .course__title a { color: inherit; text-decoration: none; }
.blog__grid .course__title a:hover { color: var(--lilac); }
.blog__grid .course__cta { margin-block-start: auto; }
/* one centred button under a grid: "all articles", "all the work" */
.sec-more { display: grid; justify-items: center; margin-block-start: var(--space-2xl); }
/* a page with no hero starts below the fixed header */
.post-top { padding-block-start: calc(var(--nav-h) + var(--space-3xl)); }
.post__head { display: grid; gap: var(--space-md); max-inline-size: 44rem; margin-inline: auto; }
.post__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--text-3); }
.post__crumbs a { display: inline-flex; align-items: center; min-block-size: var(--size-touch); color: var(--lilac); text-decoration: none; }
.post__crumbs a:hover { color: #fff; }
.post__title {
font-family: var(--font-display);
font-size: clamp(2rem, 1.2rem + 3.4vw, 3.8rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: 1.08;
letter-spacing: var(--ls-heading);
color: #fff;
text-wrap: balance;
}
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-size: var(--fs-sm); color: var(--text-2); }
.post__cover {
max-inline-size: 64rem;
margin: var(--space-2xl) auto;
overflow: hidden;
aspect-ratio: 16 / 9;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-stage);
background: var(--surface-2);
box-shadow: 0 50px 120px -60px rgba(168, 85, 247, .7);
}
.post__cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.post__body { display: grid; gap: var(--space-md); max-inline-size: 44rem; margin-inline: auto; font-size: var(--fs-lede); line-height: 1.7; color: var(--text-2); }
.post__body > p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.post__body > .post__intro { font-size: var(--fs-lede); color: var(--text-1); }
.post__body h2 {
margin-block-start: var(--space-xl);
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: 1.2;
letter-spacing: var(--ls-snug);
color: #fff;
}
.post .courses__band { max-inline-size: 64rem; margin: var(--space-3xl) auto 0; }
.post__body > .post__related { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: var(--border-w) solid var(--glass-line); font-size: var(--fs-sm); color: var(--text-3); }
.post__related a { color: var(--lilac); text-underline-offset: .2em; }
.post__related a:hover { color: #fff; }
.post__body > .post__follow { margin-block-start: var(--space-sm); font-size: var(--fs-sm); color: var(--text-3); }
.post__follow a { color: var(--lilac); text-underline-offset: .2em; }
.post__follow a:hover { color: #fff; }
.blog__grid + .courses__band { margin-block-start: var(--space-3xl); }
/* ══ THE ARTICLE IS ONE READING COLUMN + CALLS TO ACTION (2026-10-15) ══════
MK: the title, the words and the picture should sit on one line, at every
width. Head, cover, body and the closing band now share one column and its
two edges. Inside the article a short call to action follows the second
section (the first, in articles for readers close to deciding), and below
900px a bar with "Start a project" and WhatsApp stays within thumb reach
once the visitor is past the first screen (js/cta-bar.js). */
.post { --post-w: 46rem; }
.post__head, .post__body, .post__cover, .post .courses__band { max-inline-size: var(--post-w); }
.post__cta {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-lg);
padding: var(--space-lg);
border: var(--border-w) solid transparent;
border-radius: var(--radius-stage);
background:
radial-gradient(80% 140% at 0% 0%, rgba(168, 85, 247, .22), transparent 70%) padding-box,
linear-gradient(var(--glass), var(--glass)) padding-box,
linear-gradient(120deg, #C084FC, var(--teal-400)) border-box;
}
.post__cta-text { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); }
.post__cta-text strong { display: block; margin-block-end: .2rem; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: #fff; }
.post__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.post__cta-actions .btn { gap: .45rem; }
.post__cta-actions .icon { inline-size: 1.15rem; block-size: 1.15rem; fill: currentColor; }
@media (max-width: 639px) { .post__cta-actions .btn { flex: 1 1 100%; justify-content: center; } }
.cta-bar { display: none; }
@media (max-width: 899px) {
.cta-bar {
position: fixed;
z-index: calc(var(--z-widget) + 1);
inset-inline: var(--space-sm);
inset-block-end: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
display: flex;
align-items: center;
gap: var(--space-xs);
padding: .4rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-pill);
background:
linear-gradient(rgba(12, 10, 20, .9), rgba(12, 10, 20, .9)) padding-box,
linear-gradient(120deg, rgba(192, 132, 252, .75), rgba(45, 212, 191, .6)) border-box;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .85), 0 0 34px -14px var(--violet-glow);
opacity: 0;
visibility: hidden;
transform: translateY(calc(100% + 2rem));
transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, visibility 0s linear .45s;
}
.cta-bar.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.cta-bar__main { flex: 1 1 auto; justify-content: center; min-block-size: 3rem; }
.cta-bar__wa {
display: inline-flex;
align-items: center;
gap: .4rem;
min-block-size: 3rem;
padding-inline: 1rem;
border: var(--border-w) solid rgba(37, 211, 102, .5);
border-radius: var(--radius-pill);
background: rgba(37, 211, 102, .14);
font-weight: 700;
color: #fff;
text-decoration: none;
}
.cta-bar__wa .icon { inline-size: 1.25rem; block-size: 1.25rem; fill: #25D366; }
/* the bar carries WhatsApp: the separate bubble steps aside, the scroll cue lifts above it */
html.has-cta-bar .interaction-widget { opacity: 0; visibility: hidden; pointer-events: none; }
html.has-cta-bar .scroll-cue { inset-block-end: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 379px) { .cta-bar__wa span { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-bar, .cta-bar.is-on { transition: none; } }
/* «اقرأ كمان» و«قبل أن تقرر»: 3 كروت = 3 أعمدة على الكمبيوتر وعمود على الموبايل.
على التابلت (عمودين) الكارت التالت كان بيقعد لوحده في سطر، فبيستخبى هناك بس (اللينك لسه في الصفحة). */
@media (min-width: 640px) and (max-width: 999px) { .blog__grid--3 > li:nth-child(3):last-child { display: none; } }
/* ===== css/fx.css ===== */
/* ============================================================================
fx.css — styles for the fifteen MK Motion Lab effects (js/fx.js + js/fx/).
Loads last. Every selector is prefixed fxNN- or scoped to [data-fx]; every
value comes from tokens.css. Mobile-first: 640 / 900 / 1200. No !important.
========================================================================== */
/* ── flash guard ──────────────────────────────────────────────────────────
Same contract as base.css §12: only while carries `js`, which
motion.js removes once every from-state is inline. With scripting off the
class never exists; under reduced motion the guard lifts on its own. */
.js [data-fx-hide] { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.js [data-fx-hide] { visibility: visible; }
}
/* ══ FX 13 · VELOCITY MARQUEE — #promise-strip ══════════════════════════ */
.fx13 {
display: grid;
gap: clamp(1.75rem, 4vw, 2.75rem);
overflow: clip;
border-block: var(--border);
}
/* The rows fade out at both ends, so a line never stops dead at the edge. */
.fx13-rows {
display: grid;
gap: clamp(.15rem, .8vw, .6rem);
-webkit-mask-image: var(--grad-fade-x);
mask-image: var(--grad-fade-x);
}
.fx13-row { overflow: hidden; }
/* Two transform owners: the shear takes skewX from the velocity, the track
takes the x the ticker wraps. Neither reads what the other wrote. */
.fx13-shear { will-change: transform; }
.fx13-track {
display: flex;
inline-size: max-content;
will-change: transform;
}
.fx13-set {
display: flex;
align-items: center;
}
.fx13-item {
display: flex;
align-items: center;
gap: clamp(1.1rem, 2.6vw, 2.5rem);
padding-inline-end: clamp(1.1rem, 2.6vw, 2.5rem);
font-family: var(--font-display);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-display);
font-size: clamp(2.25rem, 1rem + 5vw, 6rem);
line-height: 1.2;
letter-spacing: var(--ls-heading);
white-space: nowrap;
color: var(--text-1);
}
/* The 21° cut between one promise and the next. */
.fx13-item::after {
content: "";
flex: none;
inline-size: .14em;
block-size: .74em;
background: var(--grad-brand-light);
transform: skewX(var(--mk-angle-neg));
}
/* Outlined words; without text-stroke support a quieter fill, never nothing. */
.fx13-item--out { color: var(--text-2); }
@supports (-webkit-text-stroke: 1px currentColor) {
.fx13-item--out {
color: transparent;
-webkit-text-stroke: 1.5px var(--text-1);
}
}
.fx13-pause {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-block-size: var(--size-touch);
padding-inline: var(--space-lg);
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-1);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* a glass pill like the other controls, lit the same way on hover */
.fx13-pause:hover { border-color: var(--teal-400); box-shadow: 0 0 22px -6px var(--violet-glow); }
.fx13-pause__glyph {
inline-size: .7rem;
block-size: .8rem;
background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}
.fx13-pause[aria-pressed="true"] { border-color: var(--teal-a50); color: var(--teal-400); }
.fx13-pause[aria-pressed="true"] .fx13-pause__glyph {
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* The stroke has to grow with the type or it disappears at display sizes. */
@media (min-width: 900px) {
@supports (-webkit-text-stroke: 1px currentColor) {
.fx13-item--out { -webkit-text-stroke: 2px var(--text-1); }
}
}
@media (min-width: 1200px) {
@supports (-webkit-text-stroke: 1px currentColor) {
.fx13-item--out { -webkit-text-stroke: 2.5px var(--text-1); }
}
}
/* ══ FX 04 · SLANTED CURTAIN — image plates ══════════════════════════════
The frame is the clipping box; the curtain is a violet plate wide enough
that its slanted edge sits outside the frame at both ends of the sweep. */
.fx04-frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--surface-2);
}
.fx04-frame::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 var(--border-w) var(--rule);
pointer-events: none;
}
.fx04-clip { position: absolute; inset: 0; }
.fx04-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 50% 20%;
}
.fx04-curtain {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 170%;
background: linear-gradient(100deg, var(--violet-600) 0%, var(--ink) 90%);
transform-origin: 0 100%;
transform: translateX(180%) skewX(var(--mk-angle-neg));
visibility: hidden;
will-change: transform;
}
/* the blade on the curtain's leading edge */
.fx04-curtain::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: var(--border-w-thick);
background: linear-gradient(180deg, var(--teal-400), var(--violet-400));
}
/* ══ FX 06 · WIREFRAME TO WEBSITE — the canvas (ported from Motion Lab) ══ */
.fx06-pin {
display: grid;
align-content: center;
min-block-size: 100vh;
padding-block: var(--space-lg);
}
@supports (height: 100svh) {
.fx06-pin { min-block-size: 100svh; }
}
.fx06-inner {
display: grid;
gap: var(--space-lg);
align-items: center;
}
/* ── the window ───────────────────────────────────────────── */
.fx06-frame {
margin: 0;
min-inline-size: 0;
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-lg);
background: var(--surface-1);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.fx06-chrome {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-block-end: var(--border-w) solid var(--rule-soft);
background: var(--surface-2);
}
.fx06-dots { display: flex; flex: none; gap: 5px; }
.fx06-dots i {
inline-size: 8px;
block-size: 8px;
border-radius: var(--radius-pill);
background: var(--white-a12);
}
.fx06-addr {
position: relative;
display: flex;
flex: 1 1 auto;
min-inline-size: 0;
align-items: center;
min-block-size: 1.6rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-pill);
background: var(--ink);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-2);
}
.fx06-addr__skel {
inline-size: 42%;
max-inline-size: 9rem;
block-size: 6px;
border-radius: var(--radius-pill);
background: var(--white-a08);
}
.fx06-addr__url {
position: absolute;
inset-inline-start: var(--space-sm);
white-space: nowrap;
}
.fx06-badge {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-2xs);
padding: 3px var(--space-sm);
border: var(--border-w) solid var(--teal-a50);
border-radius: var(--radius-pill);
background: var(--teal-a10);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--teal-400);
}
.fx06-badge__dot {
inline-size: var(--size-dot);
block-size: var(--size-dot);
border-radius: var(--radius-pill);
background: var(--teal-400);
}
/* The screen. The gradient under the canvas is the scripting-off state:
a twelve-column artboard, so an empty frame still reads as Figma. */
.fx06-screen {
position: relative;
aspect-ratio: 4 / 5;
background-color: var(--surface-1);
background-image:
repeating-linear-gradient(90deg, var(--violet-a08) 0 6.2%, transparent 6.2% 8.33%),
linear-gradient(180deg, var(--white-a05) 0 2%, transparent 2%);
}
.fx06-canvas {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
}
.fx06-cap {
padding: var(--space-sm) var(--space-md);
border-block-start: var(--border-w) solid var(--rule-soft);
background: var(--surface-2);
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--text-2);
}
/* ── the stage rail ───────────────────────────────────────── */
.fx06-rail {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2xs);
margin: 0;
padding: 0;
list-style: none;
}
.fx06-rail__item {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-2xs) var(--space-sm);
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-xs);
background: transparent;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-2);
white-space: nowrap;
transition:
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.fx06-rail__tick {
inline-size: 3px;
block-size: .85rem;
background: var(--rule-strong);
transform: skewX(var(--mk-angle-neg));
transition: background var(--dur-fast) var(--ease-out);
}
.fx06-rail__n {
font-size: var(--fs-eyebrow);
font-variant-numeric: tabular-nums;
color: var(--text-3);
}
.fx06-rail__item.is-done { border-color: var(--teal-a50); }
.fx06-rail__item.is-done .fx06-rail__tick { background: var(--teal-400); }
.fx06-rail__item.is-on {
border-color: var(--violet-400);
background: rgba(var(--violet-600-rgb), .08);
color: var(--text-1);
}
.fx06-rail__item.is-on .fx06-rail__tick { background: var(--grad-brand-light); }
.fx06-rail__item.is-on .fx06-rail__n { color: var(--violet-400); }
@media (prefers-reduced-motion: reduce) {
.fx06-rail__item,
.fx06-rail__tick { transition: none; }
}
/* ── from 900px: 16:10 window, rail as a column beside it ──── */
@media (min-width: 900px) {
.fx06-inner {
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-2xl);
max-inline-size: 72rem;
margin-inline: auto;
}
.fx06-frame {
justify-self: center;
inline-size: 100%;
max-inline-size: 56rem;
}
.fx06-screen { aspect-ratio: 16 / 10; }
.fx06-rail {
flex-direction: column;
align-items: stretch;
gap: var(--space-xs);
inline-size: 10.5rem;
}
.fx06-rail__item { padding: var(--space-xs) var(--space-sm); }
.fx06-rail__label { margin-inline-start: auto; }
}
/* ══ FX 09 · SITE BUILDS ITSELF — process (ported from Motion Lab) ══════ */
.fx09-grid {
display: grid;
gap: var(--space-xl);
}
/* ── the sticky column ────────────────────────────────────── */
/* Opaque, in the board's own colour: on a phone the steps scroll UNDER it.
Parked below the navbar, never behind it. */
.fx09-sticky {
position: sticky;
inset-block-start: var(--nav-h);
z-index: var(--z-raised);
display: grid;
align-content: center;
gap: var(--space-sm);
block-size: 44vh;
padding-block: var(--space-sm);
background: var(--paper);
}
@supports (height: 100svh) {
.fx09-sticky { block-size: 44svh; }
}
.fx09-mock {
margin: 0;
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-lg);
background: var(--surface-1);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.fx09-bar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-block-end: var(--border-w) solid var(--rule-soft);
background: var(--surface-2);
}
.fx09-dots { display: flex; flex: none; gap: 5px; }
.fx09-dots i {
inline-size: 8px;
block-size: 8px;
border-radius: var(--radius-pill);
background: var(--white-a12);
}
.fx09-addr {
position: relative;
display: flex;
flex: 1 1 auto;
min-inline-size: 0;
align-items: center;
min-block-size: 1.5rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-pill);
background: var(--ink);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-2);
}
.fx09-addr__skel {
inline-size: 40%;
max-inline-size: 8rem;
block-size: 6px;
border-radius: var(--radius-pill);
background: var(--white-a08);
}
.fx09-addr__url {
position: absolute;
inset-inline-start: var(--space-sm);
white-space: nowrap;
}
.fx09-badge {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-2xs);
padding: 3px var(--space-sm);
border: var(--border-w) solid var(--teal-a50);
border-radius: var(--radius-pill);
background: var(--teal-a10);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--teal-400);
}
.fx09-badge__dot {
inline-size: var(--size-dot);
block-size: var(--size-dot);
border-radius: var(--radius-pill);
background: var(--teal-400);
}
/* ── the screen: the container every scene is measured against ── */
.fx09-screen {
container-type: inline-size;
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--surface-1);
--fx09-pad: max(var(--space-sm), 4.4cqw);
--fx09-gap: max(var(--space-2xs), 2.2cqw);
--fx09-r: max(4px, 1.4cqw);
--fx09-fs-xs: max(var(--fs-eyebrow), 2cqw);
--fx09-fs-sm: max(var(--fs-xs), 2.8cqw);
--fx09-fs-md: max(var(--fs-sm), 4.4cqw);
}
/* Every scene is opaque and they stack in source order, so with scripting
off the last one — the finished site — is simply the one on top. Nothing
is hidden by CSS; the script opacity-fades them from here. */
.fx09-scene {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
padding: var(--fx09-pad);
background: var(--surface-1);
}
.fx09-scene__tag {
display: none;
font-family: var(--font-display);
font-size: var(--fx09-fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--violet-400);
}
/* the blade that crosses the screen between two scenes */
/* Parked off the left edge, so it is out of sight without being hidden. */
.fx09-sweep {
position: absolute;
inset-block: -14%;
inset-inline-start: -50%;
z-index: var(--z-raised);
inline-size: 45%;
background: linear-gradient(90deg, transparent, var(--violet-a45) 46%, var(--teal-a50) 64%, transparent);
transform: skewX(var(--mk-angle-neg));
pointer-events: none;
}
/* ── 01 Brief ─────────────────────────────────────────────── */
.fx09-doc {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
padding: var(--fx09-pad);
border: var(--border-w) solid var(--rule);
border-radius: var(--fx09-r);
background: var(--surface-2);
}
.fx09-doc__head { display: flex; align-items: center; gap: var(--fx09-gap); }
.fx09-doc__title {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fx09-fs-sm);
color: var(--text-1);
}
.fx09-doc__rule { flex: 1; block-size: 1px; background: var(--rule-strong); }
.fx09-checks {
flex: 1;
justify-content: center;
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
margin: 0;
padding: 0;
list-style: none;
}
.fx09-check { display: flex; align-items: center; gap: var(--fx09-gap); }
.fx09-check__box {
flex: none;
display: grid;
place-items: center;
inline-size: max(1rem, 4.8cqw);
block-size: max(1rem, 4.8cqw);
border: var(--border-w) solid var(--teal-a50);
border-radius: max(3px, 0.9cqw);
background: var(--teal-a10);
}
.fx09-check__tick { inline-size: 68%; block-size: 68%; }
.fx09-check__tick path {
stroke: var(--teal-400);
stroke-width: var(--border-w-thick);
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16;
}
.fx09-check__label { font-size: var(--fx09-fs-xs); color: var(--text-1); }
.fx09-check__bar {
flex: 1;
block-size: max(3px, 0.9cqw);
border-radius: var(--radius-pill);
background: var(--white-a08);
}
/* ── 02 Design ────────────────────────────────────────────── */
.fx09-fig {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--fx09-pad);
min-block-size: 0;
}
.fx09-fig__frame {
position: relative;
padding: var(--fx09-gap);
border: var(--border-w) solid var(--violet-a45);
border-radius: var(--fx09-r);
background: var(--surface-2);
}
.fx09-fig__name {
position: absolute;
inset-block-end: 100%;
inset-inline-start: 0;
padding-block-end: 2px;
font-family: var(--font-display);
font-size: var(--fx09-fs-xs);
color: var(--violet-400);
}
.fx09-fig__cols {
position: absolute;
z-index: var(--z-base);
inset: 0;
background: repeating-linear-gradient(90deg, var(--violet-a12) 0 6.2%, transparent 6.2% 12.5%);
}
.fx09-fig__body {
position: relative;
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
block-size: 100%;
}
.fx09-fig__b { border-radius: max(2px, 0.7cqw); background: var(--white-a12); }
.fx09-fig__b--nav { block-size: 13%; }
.fx09-fig__b--hero { flex: 1; background: var(--white-a18); }
.fx09-fig__b--row { display: flex; gap: var(--fx09-gap); block-size: 32%; background: none; }
.fx09-fig__b--row span { flex: 1; border-radius: max(2px, 0.7cqw); background: var(--white-a12); }
.fx09-fig__panel {
inline-size: max(5.5rem, 27cqw);
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
justify-content: center;
}
.fx09-fig__label {
font-family: var(--font-display);
font-size: var(--fx09-fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
.fx09-swatches { display: flex; gap: max(3px, 1cqw); }
.fx09-swatches i {
flex: 1;
block-size: max(1rem, 4.4cqw);
border-radius: max(2px, 0.7cqw);
background: var(--violet-600);
}
.fx09-swatches i:nth-child(2) { background: var(--violet-400); }
.fx09-swatches i:nth-child(3) { background: var(--teal-400); }
.fx09-swatches i:nth-child(4) { background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.fx09-spec { display: flex; align-items: center; gap: var(--fx09-gap); }
.fx09-spec__aa {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: max(1.5rem, 9cqw);
line-height: 1;
background: var(--grad-brand-light);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fx09-spec__names {
display: grid;
white-space: nowrap;
font-size: var(--fx09-fs-xs);
line-height: 1.5;
color: var(--text-2);
}
/* ── 03 Build · 04 Handover ───────────────────────────────── */
.fx09-brace {
position: absolute;
z-index: var(--z-base);
inset-block-start: 26%;
inset-inline-end: 5%;
font-family: var(--font-mono);
font-size: max(2.5rem, 17cqw);
line-height: 1;
color: var(--white-a08);
pointer-events: none;
}
.fx09-site {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--fx09-gap);
min-block-size: 0;
}
.fx09-site__nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fx09-gap);
padding: var(--fx09-gap) var(--fx09-pad);
border: var(--border-w) solid var(--rule);
border-radius: var(--fx09-r);
background: var(--surface-2);
}
.fx09-site__mark {
inline-size: max(6px, 1.7cqw);
block-size: max(0.9rem, 4cqw);
background: var(--grad-brand-light);
transform: skewX(var(--mk-angle-neg));
}
.fx09-site__links {
display: flex;
gap: var(--fx09-pad);
font-size: var(--fx09-fs-xs);
color: var(--text-2);
}
.fx09-site__hero {
position: relative;
flex: 1;
display: flex;
align-items: center;
padding: var(--fx09-pad);
border: var(--border-w) solid var(--rule);
border-radius: var(--fx09-r);
background: var(--surface-2);
}
.fx09-site__line {
max-inline-size: 20ch;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fx09-fs-md);
line-height: var(--lh-heading);
color: var(--text-1);
}
.fx09-site__cards { display: flex; gap: var(--fx09-gap); block-size: 30%; }
.fx09-site__card {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: max(3px, 1cqw);
padding: var(--fx09-gap);
border: var(--border-w) solid var(--rule);
border-radius: var(--fx09-r);
background: var(--surface-3);
}
.fx09-site__tile {
inline-size: max(5px, 1.5cqw);
block-size: max(0.7rem, 3.2cqw);
background: var(--grad-brand-light);
transform: skewX(var(--mk-angle-neg));
}
.fx09-site__ct {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fx09-fs-xs);
color: var(--text-1);
}
.fx09-site__bar {
inline-size: 78%;
block-size: max(3px, 0.8cqw);
border-radius: var(--radius-pill);
background: var(--white-a12);
}
.fx09-site__foot {
padding-block: var(--fx09-gap);
text-align: center;
font-size: var(--fx09-fs-xs);
color: var(--text-2);
}
.fx09-site--done .fx09-site__hero {
border-color: var(--violet-a45);
background: linear-gradient(100deg, var(--violet-600) 0%, var(--surface-3) 76%);
box-shadow: var(--ring-inner);
}
.fx09-site--done .fx09-site__line {
outline: var(--border-w) dashed var(--teal-a50);
outline-offset: max(4px, 1.4cqw);
}
.fx09-edit {
position: absolute;
inset-block-end: var(--fx09-gap);
inset-inline-end: var(--fx09-gap);
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding: 2px max(6px, 1.8cqw);
border: var(--border-w) solid var(--teal-a50);
border-radius: var(--radius-pill);
background: var(--ink);
font-family: var(--font-display);
font-size: var(--fx09-fs-xs);
color: var(--teal-400);
}
/* ── the 01 / 04 indicator ────────────────────────────────── */
.fx09-prog {
display: flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-display);
font-size: var(--fs-sm);
}
.fx09-prog__n {
font-weight: var(--fw-bold);
font-size: var(--fs-h4);
font-variant-numeric: tabular-nums;
background: var(--grad-brand-light);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fx09-prog__of { color: var(--text-3); }
.fx09-prog__ticks { display: flex; gap: 4px; margin-inline-start: auto; }
.fx09-prog__ticks i {
inline-size: 4px;
block-size: 1rem;
background: var(--white-a12);
transform: skewX(var(--mk-angle-neg));
transition: background var(--dur-base) var(--ease-out);
}
.fx09-prog__ticks i.is-on { background: var(--grad-brand-light); }
/* ── the four steps ───────────────────────────────────────── */
.fx09-steps {
display: grid;
gap: var(--space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.fx09-step { display: grid; align-content: center; min-block-size: 42vh; }
.fx09-step__inner {
position: relative;
display: grid;
gap: var(--space-xs);
padding: var(--card-pad-block) var(--card-pad-inline);
padding-inline-start: calc(var(--card-pad-inline) + var(--space-lg));
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .45);
transition:
background-color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
/* a short slanted rule beside the number — the logo cut, not a long line */
.fx09-step__edge {
position: absolute;
inset-block-start: calc(var(--card-pad-block) + 0.1rem);
inset-inline-start: var(--space-md);
inline-size: 3px;
block-size: 1.5rem;
background: var(--grad-brand-light);
transform: skewX(var(--mk-angle-neg)) scaleY(0.28);
transform-origin: 50% 0;
transition: transform var(--dur-slow) var(--ease-out);
}
.fx09-step.is-on .fx09-step__inner { background: var(--violet-a08); border-color: var(--violet-a28); }
.fx09-step.is-on .fx09-step__edge { transform: skewX(var(--mk-angle-neg)) scaleY(1); }
.fx09-step__n {
font-family: var(--font-mono);
font-weight: var(--fw-medium);
font-size: var(--fs-sm);
color: var(--text-3);
transition: color var(--dur-base) var(--ease-out);
}
.fx09-step.is-on .fx09-step__n { color: var(--violet-400); }
.fx09-step__title {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text-1);
}
.fx09-step__text {
max-inline-size: 46ch;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-2);
}
/* ── from 900px: two columns, the mock centred in the viewport ── */
@media (min-width: 900px) {
.fx09-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-3xl);
align-items: start;
}
.fx09-sticky {
block-size: calc(100vh - var(--nav-h));
padding-block: var(--space-lg);
gap: var(--space-lg);
}
.fx09-steps { padding-block: 9vh 14vh; gap: var(--space-xl); }
.fx09-step { min-block-size: 74vh; }
}
@supports (height: 100svh) {
@media (min-width: 900px) {
.fx09-sticky { block-size: calc(100svh - var(--nav-h)); }
}
}
/* ── reduced motion: no sticky, all four states as static cards ── */
@media (prefers-reduced-motion: reduce) {
.fx09-sticky {
position: static;
block-size: auto;
padding-block: 0;
}
.fx09-screen {
display: grid;
gap: var(--space-md);
padding: var(--space-md);
aspect-ratio: auto;
}
.fx09-scene {
position: relative;
inset: auto;
aspect-ratio: 16 / 10;
border: var(--border-w) solid var(--rule-soft);
border-radius: var(--radius-md);
opacity: 1;
}
.fx09-scene__tag { display: block; }
.fx09-sweep { display: none; }
.fx09-step { min-block-size: 0; }
.fx09-step__inner,
.fx09-step__edge,
.fx09-step__n,
.fx09-prog__ticks i { transition: none; }
}
/* ══ FX 05 · ZOOM-THROUGH TYPE (ported from Motion Lab) ═══════════════ */
.fx05-lead {
display: grid;
justify-items: start;
gap: var(--space-md);
padding-block-end: clamp(2rem, 6vh, 3.5rem);
}
/* The house cut, used as a scroll cue: a hairline leaning at 21°. */
.fx05-tick {
inline-size: 2px;
block-size: clamp(2.5rem, 6vh, 4rem);
background: linear-gradient(180deg, var(--violet-400), transparent);
transform: skewX(var(--mk-angle-neg));
}
/* The pinned stage. svh is the honest viewport height on a phone — 100vh
jumps by the height of the browser chrome the moment the visitor scrolls. */
.fx05-pin {
position: relative;
block-size: 100vh;
}
@supports (height: 100svh) {
.fx05-pin { block-size: 100svh; }
}
.fx05-scene {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--ink);
}
/* Paint order is DOM order — photo, scrim, veil, caption — so nothing here
needs a z-index of its own. */
.fx05-photo {
position: absolute;
inset: 0;
}
.fx05-img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
will-change: transform;
}
/* The caption has to sit on ink, not on a half-lit screenshot: violet on a
part-transparent scrim over a pale page would fall under 4.5:1 whatever
the alpha. So the gradient runs all the way to solid before the first
line of the caption starts, and the image keeps the top of the frame. */
.fx05-scrim {
position: absolute;
inset: 0;
opacity: 0;
background: linear-gradient(180deg,
rgba(var(--ink-rgb), .55) 0%,
rgba(var(--ink-rgb), .04) 15%,
rgba(var(--ink-rgb), .30) 38%,
var(--ink) 56%,
var(--ink) 100%);
}
.fx05-veil {
position: absolute;
inset: 0;
}
/* Luminance mask: the lit rect is what survives, the word is punched out of
it. #fff here is not a palette colour, it is the mask's "keep" value. */
.fx05-veil__lit { fill: #FFFFFF; }
.fx05-veil__fill { fill: var(--ink); }
.fx05-word,
.fx05-rim {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 27.5vw;
letter-spacing: var(--ls-tight);
}
.fx05-word { fill: var(--mask-solid); }
/* The rim traces the edge of the hole. non-scaling-stroke keeps it a
hairline however far the word is zoomed. */
.fx05-rim {
fill: none;
stroke: var(--violet-400);
stroke-width: 1.5;
opacity: .55;
}
/* ── caption ─────────────────────────────────────────────────── */
.fx05-cap {
position: absolute;
inset-inline: 0;
inset-block-end: clamp(2.5rem, 8vh, 5.5rem);
display: grid;
justify-items: start;
gap: var(--space-md);
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.fx05-cap__title {
max-inline-size: 16ch;
color: var(--text-1);
}
.fx05-cap__lede {
max-inline-size: 52ch;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-2);
}
@media (min-width: 900px) {
.fx05-scrim {
background: linear-gradient(180deg,
rgba(var(--ink-rgb), .55) 0%,
rgba(var(--ink-rgb), .04) 18%,
rgba(var(--ink-rgb), .30) 44%,
var(--ink) 64%,
var(--ink) 100%);
}
}
/* ══ FX 07 · HORIZONTAL GALLERY + FX 15 FILTERS (ported) ════════════════ */
/* ── the stage box ─────────────────────────────────────────── */
.fx07-pin {
position: relative;
display: grid;
gap: var(--space-lg);
padding-block: var(--space-lg) var(--space-xl);
background:
radial-gradient(70% 55% at 15% 0%, var(--violet-a12), transparent 70%),
radial-gradient(50% 45% at 95% 100%, var(--teal-a10), transparent 70%);
}
/* ── the HUD: kicker, counter, progress rail ───────────────── */
.fx07-hud {
display: grid;
gap: var(--space-md);
padding-inline: var(--container-pad);
}
.fx07-hud__lead { display: grid; gap: var(--space-xs); justify-items: start; }
.fx07-hud__title { max-inline-size: 22ch; color: var(--text-1); }
.fx07-hud__read {
display: flex;
align-items: baseline;
gap: var(--space-md);
flex-wrap: wrap;
}
.fx07-count {
display: flex;
align-items: baseline;
gap: .18em;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem);
line-height: 1;
letter-spacing: var(--ls-tight);
font-variant-numeric: tabular-nums;
}
.fx07-count__now { min-inline-size: 2ch; }
.fx07-count__slash {
color: var(--text-3);
font-size: .42em;
transform: skewX(var(--mk-angle-neg));
}
.fx07-count__all { color: var(--text-3); font-size: .42em; }
.fx07-now {
flex: 1 1 12ch;
min-block-size: 1.6em;
font-family: var(--font-display);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-2);
}
/* Thin rail: a hairline, eight slanted ticks over it, and a gradient fill
that grows from the start edge. The stage is LTR, so origin is left. */
.fx07-rail {
position: relative;
block-size: 2px;
background: var(--white-a08);
}
.fx07-rail__fill {
position: absolute;
inset: 0;
background: var(--grad-brand-light);
transform-origin: left center;
transform: scaleX(0);
}
.fx07-rail__ticks {
position: absolute;
inset-block: -5px;
inset-inline: 0;
display: flex;
justify-content: space-between;
}
.fx07-rail__ticks i {
inline-size: 2px;
background: var(--white-a18);
transform: skewX(var(--mk-angle-neg));
}
/* ── the track ─────────────────────────────────────────────── */
.fx07-track {
display: flex;
gap: var(--gap-grid);
margin: 0;
padding-inline: var(--container-pad);
padding-block-end: var(--space-sm);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--container-pad);
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.fx07-track::-webkit-scrollbar { display: none; }
.fx07-card {
flex: none;
inline-size: min(82vw, 26rem);
scroll-snap-align: start;
}
.fx07-inner {
display: grid;
gap: var(--space-md);
margin: 0;
}
/* The closing plate: narrower than a project, and the reason the eighth
project has somewhere to arrive rather than stopping at the edge. */
.fx07-card--end { inline-size: min(72vw, 22rem); }
.fx07-end {
align-content: center;
min-block-size: 100%;
padding: var(--card-pad-block) var(--card-pad-inline);
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-panel);
background: linear-gradient(155deg, var(--violet-a12), rgba(var(--surface-2-rgb), .6));
}
.fx07-end__body { display: grid; gap: var(--space-md); justify-items: start; }
.fx07-end__text {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
color: var(--text-1);
}
.fx07-end__meta {
padding-block-start: var(--space-sm);
border-block-start: var(--border-w) solid var(--rule);
inline-size: 100%;
font-family: var(--font-display);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--teal-400);
}
/* The frame carries the house cut: 28px run over 72px rise is exactly 21°. */
.fx07-frame {
position: relative;
overflow: hidden;
aspect-ratio: 1100 / 688;
border: var(--border-w) solid var(--rule);
border-radius: var(--radius-panel);
background: var(--surface-3);
}
/* The screenshot fills its frame edge to edge — no drift, no dimming. */
.fx07-img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
}
.fx07-tag {
position: absolute;
inset-block-start: var(--space-sm);
inset-inline-end: var(--space-sm);
padding: .2rem .55rem;
border-radius: var(--radius-xs);
background: rgba(var(--ink-rgb), .7);
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
color: var(--text-2);
transform: skewX(var(--mk-angle-neg));
}
/* ── the caption ───────────────────────────────────────────── */
.fx07-body {
display: grid;
gap: var(--space-2xs);
justify-items: start;
padding-inline-start: var(--space-md);
border-inline-start: 2px solid var(--violet-a45);
}
.fx07-sector {
font-family: var(--font-display);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--violet-400);
}
.fx07-name {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--text-1);
}
.fx07-desc {
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-2);
max-inline-size: 34ch;
}
.fx07-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-block-size: var(--size-touch);
font-family: var(--font-display);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--teal-400);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.fx07-link:hover { color: var(--violet-100); gap: var(--space-sm); }
.fx07-link__arrow {
inline-size: .9rem;
block-size: .7rem;
background: currentColor;
clip-path: polygon(0 40%, 62% 40%, 62% 12%, 100% 50%, 62% 88%, 62% 60%, 0 60%);
}
.fx07-soon {
display: inline-flex;
align-items: center;
min-block-size: var(--size-touch);
margin-block-start: var(--space-2xs);
font-family: var(--font-display);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
/* ── 640: a little more room for the card ──────────────────── */
@media (min-width: 640px) {
.fx07-card { inline-size: min(62vw, 28rem); }
}
/* ── 900+: the pinned stage ────────────────────────────────── */
@media (min-width: 900px) {
.fx07-pin {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(1.75rem, 4vh, 3.25rem);
block-size: 100vh;
padding-block: calc(var(--nav-h) + var(--space-lg)) var(--space-2xl);
overflow: clip;
}
.fx07-hud {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: var(--space-2xl);
padding-inline: clamp(3rem, 7vw, 8rem);
}
.fx07-hud__read { justify-content: end; text-align: end; }
.fx07-now { flex: 0 1 auto; }
.fx07-rail { grid-column: 1 / -1; }
.fx07-track {
inline-size: max-content;
padding-inline: clamp(3rem, 7vw, 8rem);
padding-block-end: 0;
gap: var(--gap-grid-lg);
overflow: visible;
scroll-snap-type: none;
will-change: transform;
}
.fx07-card { inline-size: clamp(22rem, 37vw, 32rem); }
.fx07-card--end { inline-size: clamp(16rem, 24vw, 22rem); }
.fx07-name { font-size: var(--fs-h3); }
}
@supports (height: 100svh) {
@media (min-width: 900px) {
.fx07-pin { block-size: 100svh; }
}
}
@media (min-width: 1200px) {
.fx07-desc { max-inline-size: 38ch; }
}
/* ── reduced motion: the native rail at every width ────────────
Last in the file, so it wins over the 900px block without a single
!important. Nothing here moves; the rail is scrolled by the visitor. */
@media (prefers-reduced-motion: reduce) {
.fx07-pin {
display: grid;
block-size: auto;
padding-block: var(--space-lg) var(--space-xl);
overflow: visible;
}
.fx07-hud {
grid-template-columns: minmax(0, 1fr);
padding-inline: var(--container-pad);
}
.fx07-hud__read { justify-content: start; text-align: start; }
.fx07-track {
inline-size: auto;
padding-inline: var(--container-pad);
padding-block-end: var(--space-sm);
overflow-x: auto;
scroll-snap-type: x mandatory;
will-change: auto;
}
.fx07-card { inline-size: min(82vw, 28rem); }
.fx07-card--end { inline-size: min(72vw, 22rem); }
.fx07-frame { block-size: clamp(9.5rem, 26vh, 17rem); }
.fx07-link { transition: none; }
}
/* ── site additions: filters in the pinned header, card actions ─────────── */
.fx07-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
}
.fx15-btn {
min-block-size: 2.4rem;
padding: 0 1rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
background: var(--glass);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--text-2);
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fx15-btn:hover { color: var(--text-1); border-color: rgba(168, 85, 247, .5); }
.fx15-btn.is-active {
border-color: transparent;
background: var(--grad-violet);
color: #fff;
box-shadow: 0 0 20px -4px var(--violet-glow);
}
.fx15-count {
margin-inline-start: var(--space-sm);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-3);
}
/* a card filtered out: gone from the flow, so the rest close up */
.fx07-card.is-out { display: none; }
.fx07-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.fx07-brief {
padding: .35rem .9rem;
border: var(--border-w) solid var(--glass-line);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
color: var(--text-2);
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fx07-brief:hover { border-color: rgba(168, 85, 247, .6); color: var(--text-1); }
.fx07-frame {
box-shadow: 0 0 0 var(--border-w) rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.fx07-count__now {
background: var(--grad-violet-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fx05-cap__title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.6rem);
font-weight: var(--fw-heavy);
font-stretch: var(--wdth-heading);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
/* ══ FX 12 · POINTER — the View disc and the glare ═══════════════════════ */
.fx12-disc {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--z-cursor);
display: grid;
place-items: center;
inline-size: 5.25rem;
block-size: 5.25rem;
border-radius: var(--radius-pill);
background: var(--grad-violet);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 12px 40px -8px var(--violet-glow);
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: #fff;
pointer-events: none;
}
[data-fx12-view] { position: relative; }
[data-fx12-view]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(40% 50% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 70%);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out);
pointer-events: none;
}
[data-fx12-view].is-hot { cursor: none; }
[data-fx12-view].is-hot::after { opacity: 1; }
/* ══ FX 14 · SELF-DRAWING TIMELINE (ported from Motion Lab) ═══════════ */
.fx14-track { position: relative; }
/* The spine sits under the entries: both are positioned, and the entries
come later in the document. */
.fx14-spine {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
}
.fx14-stop--start { stop-color: var(--violet-600); }
.fx14-stop--mid { stop-color: var(--violet-400); }
.fx14-stop--end { stop-color: var(--teal-400); }
.fx14-path {
fill: none;
stroke-linecap: round;
}
.fx14-path--line { stroke-width: 2; }
.fx14-path--glow { stroke-width: 9; opacity: .17; }
/* The one element that moves on every scroll frame. */
/* ── the seven entries ────────────────────────────────────── */
.fx14-list {
display: grid;
padding-block: 1.75rem 2rem;
gap: clamp(2rem, 5vw, 3rem);
margin: 0;
padding-inline: 0;
list-style: none;
}
.fx14-item {
position: relative;
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
column-gap: var(--space-sm);
row-gap: var(--space-xs);
align-items: start;
}
/* ── the dot ──────────────────────────────────────────────── */
.fx14-node {
position: relative;
grid-column: 1;
grid-row: 1 / span 2;
justify-self: center;
inline-size: 1.5rem;
block-size: 1.5rem;
margin-block-start: .35em;
}
.fx14-node__halo,
.fx14-node__ring,
.fx14-node__core {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
border-radius: var(--radius-pill);
}
.fx14-node__halo {
inline-size: 3.75rem;
block-size: 3.75rem;
background: radial-gradient(circle, var(--teal-a50), transparent 68%);
transform: scale(0);
}
.fx14-node__ring {
inline-size: 1.25rem;
block-size: 1.25rem;
border: var(--border-w) solid var(--rule-strong);
background: var(--surface-2);
}
.fx14-node__core {
inline-size: .75rem;
block-size: .75rem;
background: var(--grad-brand-light);
transform: scale(.36);
}
/* ── the year and the card ────────────────────────────────── */
.fx14-year {
grid-column: 2;
justify-self: start;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: 1.2;
letter-spacing: var(--ls-snug);
}
.fx14-card { grid-column: 2; }
.fx14-card__title { margin-block-end: var(--space-xs); }
.fx14-card__text { font-size: var(--fs-sm); }
@media (min-width: 900px) {
.fx14-list { gap: clamp(2.5rem, 4vw, 3.5rem); }
.fx14-item {
grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr);
column-gap: 0;
}
.fx14-node { grid-column: 2; margin-block-start: .1em; }
/* The gentle S: the dots step off the centre line, the same distance
either way, and the measured path follows them. */
.fx14-item:nth-child(odd) .fx14-node { translate: -2.1rem 0; }
.fx14-item:nth-child(even) .fx14-node { translate: 2.1rem 0; }
.fx14-item:nth-child(odd) .fx14-year,
.fx14-item:nth-child(odd) .fx14-card { grid-column: 1; justify-self: end; margin-inline-end: var(--space-md); }
.fx14-item:nth-child(even) .fx14-year,
.fx14-item:nth-child(even) .fx14-card { grid-column: 3; justify-self: start; margin-inline-start: var(--space-md); }
.fx14-year { font-size: var(--fs-h2); line-height: 1; }
.fx14-card { inline-size: 100%; max-inline-size: 30rem; }
.fx14-item:nth-child(odd) .fx14-year { text-align: end; }
}