/* ============================================= RESET ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Lenis manages scroll smoothing; native smooth-scroll would conflict */ } /* Block height — each snap-locked section uses this. Tweakable. */ :root { --block-h: 100vh; } body { font-family: var(--primitive-typography-family-body); background: var(--page-bg); color: var(--text-secondary); line-height: var(--primitive-typography-line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background 0.35s ease, color 0.35s ease; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } /* ============================================= PALETTE — ergonomic aliases over DS semantic tokens. DS provides [data-theme="dark"] and [data-theme="light"] so these auto-flip with the theme attribute on . ============================================= */ :root { /* Clamped viewport units for glow positioning: - Ceiling at 13.6px/12px (= 1360px / 1200px design frame) so glow offsets stop scaling outward on wide viewports. - Floor at 4px/6px (= 400px / 600px) so on narrow phones positions stay spread out — otherwise a -27vw offset collapses near the center and side-glows lose their left/right anchoring. */ --vw: clamp(4px, 1vw, 13.6px); --vh: clamp(6px, 1vh, 12px); /* Page surfaces */ --page-bg: var(--semantic-color-surface-neutral-bold); --page-bg-elevated: var(--semantic-color-surface-neutral-subtle); /* Text */ --text-primary: var(--semantic-color-text-neutral-bold); --text-secondary: var(--semantic-color-text-neutral-default); --text-tertiary: var(--semantic-color-text-neutral-subtle); --text-inverse: var(--semantic-color-text-neutral-contrast); /* Borders */ --border-subtle: var(--semantic-color-border-neutral-subtle); --border-hover: var(--semantic-color-border-neutral-default); /* Brand accents (text/accent use — auto-darken in light) */ --brand-yellow: var(--semantic-color-text-accent-default); --brand-blue: var(--semantic-color-text-primary-default); --brand-red: var(--semantic-color-text-secondary-default); --brand-yellow-soft: var(--semantic-color-text-accent-subtle); --brand-blue-soft: var(--semantic-color-text-primary-default); --brand-red-soft: var(--semantic-color-text-secondary-default); /* Brand fills (for glows / saturated gradients — always use the 500 shade) */ --brand-yellow-fill: var(--primitive-color-brand-accent-500); --brand-blue-fill: var(--primitive-color-brand-primary-500); --brand-red-fill: var(--primitive-color-brand-secondary-500); /* Panel surface (chrome / elevated overlays) */ --panel-bg: var(--primitive-color-neutral-gray-800); /* Syntax highlighting (code windows) — mapped to brand/feedback primitives */ --syntax-key: var(--primitive-color-brand-primary-300); --syntax-str: var(--primitive-color-feedback-success-400); --syntax-num: var(--primitive-color-brand-accent-300); --syntax-col: var(--primitive-color-brand-secondary-400); --syntax-punct: color-mix(in srgb, var(--semantic-color-text-neutral-bold) 22%, transparent); --syntax-colon: color-mix(in srgb, var(--semantic-color-text-neutral-bold) 28%, transparent); /* Traffic-light dots for code windows */ --dot-red: color-mix(in srgb, var(--primitive-color-feedback-error-500) 70%, transparent); --dot-yellow: color-mix(in srgb, var(--primitive-color-feedback-warning-500) 70%, transparent); --dot-green: color-mix(in srgb, var(--primitive-color-feedback-success-500) 70%, transparent); } /* Light-theme tweaks the DS doesn't express */ [data-theme="light"] { --panel-bg: var(--primitive-color-neutral-gray-white); } /* ============================================= TYPE STYLES — utility classes derived from DS semantic typography. Use these (or the per-component selectors below which apply the same) to keep all typography aligned with the design system. ============================================= */ .type-display-lg, .type-display-md, .type-display-sm, .type-heading-h1, .type-heading-h2, .type-heading-h3, .type-heading-h4, .type-heading-h5, .type-heading-h6, .type-body-lg, .type-body-md, .type-body-sm, .type-body-xs, .type-body-lg-bold, .type-body-md-bold, .type-body-sm-bold, .type-overline-md, .type-overline-sm, .type-label-lg, .type-label-md, .type-label-sm, .type-label-xs, .type-label-uppercase, .type-caption-md, .type-caption-sm, .type-code-block, .type-code-inline { /* All type styles set the same 6 props from the matching DS tokens. */ } .type-display-lg { font-family: var(--semantic-typography-display-lg-font-family); font-size: var(--semantic-typography-display-lg-font-size); font-weight: var(--semantic-typography-display-lg-font-weight); line-height: var(--semantic-typography-display-lg-line-height); letter-spacing: var(--semantic-typography-display-lg-letter-spacing); text-transform: var(--semantic-typography-display-lg-text-transform); } .type-display-md { font-family: var(--semantic-typography-display-md-font-family); font-size: var(--semantic-typography-display-md-font-size); font-weight: var(--semantic-typography-display-md-font-weight); line-height: var(--semantic-typography-display-md-line-height); letter-spacing: var(--semantic-typography-display-md-letter-spacing); text-transform: var(--semantic-typography-display-md-text-transform); } .type-display-sm { font-family: var(--semantic-typography-display-sm-font-family); font-size: var(--semantic-typography-display-sm-font-size); font-weight: var(--semantic-typography-display-sm-font-weight); line-height: var(--semantic-typography-display-sm-line-height); letter-spacing: var(--semantic-typography-display-sm-letter-spacing); text-transform: var(--semantic-typography-display-sm-text-transform); } .type-heading-h1 { font-family: var(--semantic-typography-heading-h1-font-family); font-size: var(--semantic-typography-heading-h1-font-size); font-weight: var(--semantic-typography-heading-h1-font-weight); line-height: var(--semantic-typography-heading-h1-line-height); letter-spacing: var(--semantic-typography-heading-h1-letter-spacing); text-transform: var(--semantic-typography-heading-h1-text-transform); } .type-heading-h2 { font-family: var(--semantic-typography-heading-h2-font-family); font-size: var(--semantic-typography-heading-h2-font-size); font-weight: var(--semantic-typography-heading-h2-font-weight); line-height: var(--semantic-typography-heading-h2-line-height); letter-spacing: var(--semantic-typography-heading-h2-letter-spacing); text-transform: var(--semantic-typography-heading-h2-text-transform); } .type-heading-h3 { font-family: var(--semantic-typography-heading-h3-font-family); font-size: var(--semantic-typography-heading-h3-font-size); font-weight: var(--semantic-typography-heading-h3-font-weight); line-height: var(--semantic-typography-heading-h3-line-height); letter-spacing: var(--semantic-typography-heading-h3-letter-spacing); text-transform: var(--semantic-typography-heading-h3-text-transform); } .type-heading-h4 { font-family: var(--semantic-typography-heading-h4-font-family); font-size: var(--semantic-typography-heading-h4-font-size); font-weight: var(--semantic-typography-heading-h4-font-weight); line-height: var(--semantic-typography-heading-h4-line-height); letter-spacing: var(--semantic-typography-heading-h4-letter-spacing); text-transform: var(--semantic-typography-heading-h4-text-transform); } .type-heading-h5 { font-family: var(--semantic-typography-heading-h5-font-family); font-size: var(--semantic-typography-heading-h5-font-size); font-weight: var(--semantic-typography-heading-h5-font-weight); line-height: var(--semantic-typography-heading-h5-line-height); letter-spacing: var(--semantic-typography-heading-h5-letter-spacing); text-transform: var(--semantic-typography-heading-h5-text-transform); } .type-heading-h6 { font-family: var(--semantic-typography-heading-h6-font-family); font-size: var(--semantic-typography-heading-h6-font-size); font-weight: var(--semantic-typography-heading-h6-font-weight); line-height: var(--semantic-typography-heading-h6-line-height); letter-spacing: var(--semantic-typography-heading-h6-letter-spacing); text-transform: var(--semantic-typography-heading-h6-text-transform); } .type-body-lg { font-family: var(--semantic-typography-body-lg-font-family); font-size: var(--semantic-typography-body-lg-font-size); font-weight: var(--semantic-typography-body-lg-font-weight); line-height: var(--semantic-typography-body-lg-line-height); letter-spacing: var(--semantic-typography-body-lg-letter-spacing); text-transform: var(--semantic-typography-body-lg-text-transform); } .type-body-md { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); text-transform: var(--semantic-typography-body-md-text-transform); } .type-body-sm { font-family: var(--semantic-typography-body-sm-font-family); font-size: var(--semantic-typography-body-sm-font-size); font-weight: var(--semantic-typography-body-sm-font-weight); line-height: var(--semantic-typography-body-sm-line-height); letter-spacing: var(--semantic-typography-body-sm-letter-spacing); text-transform: var(--semantic-typography-body-sm-text-transform); } .type-body-xs { font-family: var(--semantic-typography-body-xs-font-family); font-size: var(--semantic-typography-body-xs-font-size); font-weight: var(--semantic-typography-body-xs-font-weight); line-height: var(--semantic-typography-body-xs-line-height); letter-spacing: var(--semantic-typography-body-xs-letter-spacing); text-transform: var(--semantic-typography-body-xs-text-transform); } .type-body-lg-bold{ font-family: var(--semantic-typography-body-lg-bold-font-family);font-size: var(--semantic-typography-body-lg-bold-font-size);font-weight: var(--semantic-typography-body-lg-bold-font-weight);line-height: var(--semantic-typography-body-lg-bold-line-height);letter-spacing: var(--semantic-typography-body-lg-bold-letter-spacing);text-transform: var(--semantic-typography-body-lg-bold-text-transform); } .type-body-md-bold{ font-family: var(--semantic-typography-body-md-bold-font-family);font-size: var(--semantic-typography-body-md-bold-font-size);font-weight: var(--semantic-typography-body-md-bold-font-weight);line-height: var(--semantic-typography-body-md-bold-line-height);letter-spacing: var(--semantic-typography-body-md-bold-letter-spacing);text-transform: var(--semantic-typography-body-md-bold-text-transform); } .type-body-sm-bold{ font-family: var(--semantic-typography-body-sm-bold-font-family);font-size: var(--semantic-typography-body-sm-bold-font-size);font-weight: var(--semantic-typography-body-sm-bold-font-weight);line-height: var(--semantic-typography-body-sm-bold-line-height);letter-spacing: var(--semantic-typography-body-sm-bold-letter-spacing);text-transform: var(--semantic-typography-body-sm-bold-text-transform); } .type-overline-md { font-family: var(--semantic-typography-overline-md-font-family); font-size: var(--semantic-typography-overline-md-font-size); font-weight: var(--semantic-typography-overline-md-font-weight); line-height: var(--semantic-typography-overline-md-line-height); letter-spacing: var(--semantic-typography-overline-md-letter-spacing); text-transform: var(--semantic-typography-overline-md-text-transform); } .type-overline-sm { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); } .type-label-lg { font-family: var(--semantic-typography-label-lg-font-family); font-size: var(--semantic-typography-label-lg-font-size); font-weight: var(--semantic-typography-label-lg-font-weight); line-height: var(--semantic-typography-label-lg-line-height); letter-spacing: var(--semantic-typography-label-lg-letter-spacing); text-transform: var(--semantic-typography-label-lg-text-transform); } .type-label-md { font-family: var(--semantic-typography-label-md-font-family); font-size: var(--semantic-typography-label-md-font-size); font-weight: var(--semantic-typography-label-md-font-weight); line-height: var(--semantic-typography-label-md-line-height); letter-spacing: var(--semantic-typography-label-md-letter-spacing); text-transform: var(--semantic-typography-label-md-text-transform); } .type-label-sm { font-family: var(--semantic-typography-label-sm-font-family); font-size: var(--semantic-typography-label-sm-font-size); font-weight: var(--semantic-typography-label-sm-font-weight); line-height: var(--semantic-typography-label-sm-line-height); letter-spacing: var(--semantic-typography-label-sm-letter-spacing); text-transform: var(--semantic-typography-label-sm-text-transform); } .type-label-xs { font-family: var(--semantic-typography-label-xs-font-family); font-size: var(--semantic-typography-label-xs-font-size); font-weight: var(--semantic-typography-label-xs-font-weight); line-height: var(--semantic-typography-label-xs-line-height); letter-spacing: var(--semantic-typography-label-xs-letter-spacing); text-transform: var(--semantic-typography-label-xs-text-transform); } .type-label-uppercase { font-family: var(--semantic-typography-label-uppercase-font-family); font-size: var(--semantic-typography-label-uppercase-font-size); font-weight: var(--semantic-typography-label-uppercase-font-weight); line-height: var(--semantic-typography-label-uppercase-line-height); letter-spacing: var(--semantic-typography-label-uppercase-letter-spacing); text-transform: var(--semantic-typography-label-uppercase-text-transform); } .type-caption-md { font-family: var(--semantic-typography-caption-md-font-family); font-size: var(--semantic-typography-caption-md-font-size); font-weight: var(--semantic-typography-caption-md-font-weight); line-height: var(--semantic-typography-caption-md-line-height); letter-spacing: var(--semantic-typography-caption-md-letter-spacing); text-transform: var(--semantic-typography-caption-md-text-transform); } .type-caption-sm { font-family: var(--semantic-typography-caption-sm-font-family); font-size: var(--semantic-typography-caption-sm-font-size); font-weight: var(--semantic-typography-caption-sm-font-weight); line-height: var(--semantic-typography-caption-sm-line-height); letter-spacing: var(--semantic-typography-caption-sm-letter-spacing); text-transform: var(--semantic-typography-caption-sm-text-transform); } .type-code-inline { font-family: var(--semantic-typography-code-inline-font-family); font-size: var(--semantic-typography-code-inline-font-size); font-weight: var(--semantic-typography-code-inline-font-weight); line-height: var(--semantic-typography-code-inline-line-height); letter-spacing: var(--semantic-typography-code-inline-letter-spacing); text-transform: var(--semantic-typography-code-inline-text-transform); } .type-code-block { font-family: var(--semantic-typography-code-block-font-family); font-size: var(--semantic-typography-code-block-font-size); font-weight: var(--semantic-typography-code-block-font-weight); line-height: var(--semantic-typography-code-block-line-height); letter-spacing: var(--semantic-typography-code-block-letter-spacing); text-transform: var(--semantic-typography-code-block-text-transform); } /* ============================================= LAYOUT ============================================= */ .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--primitive-spacing-4xl); } .wrap--narrow { max-width: 760px; } .wrap--wide { max-width: 1360px; } /* ============================================= NAV ============================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--primitive-spacing-4xl) var(--primitive-spacing-4xl) var(--primitive-spacing-xl); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--semantic-spacing-inline-xl); /* wrap--wide is 1360 with 32px L padding — content starts 32px in. nav__inner uses 16px L padding, so its box must be 16px narrower on each side (16px + 16px = 32px total) to put the logo at the same x. */ max-width: 1328px; margin: 0 auto; padding: var(--semantic-spacing-inset-sm); padding-left: var(--semantic-spacing-inset-md); border-radius: var(--primitive-radius-full); /* Sit above the mobile menu overlay */ position: relative; z-index: 2; isolation: isolate; box-shadow: var(--primitive-shadow-elevation-4); } /* Backdrop blur lives on a ::before pseudo rather than .nav__inner itself, because backdrop-filter on an element creates a containing block that traps position:fixed descendants — which would break the mobile overlay. */ .nav__inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: color-mix(in srgb, var(--page-bg) 15%, transparent); backdrop-filter: blur(12px) brightness(1.1); -webkit-backdrop-filter: blur(12px) brightness(1.1); pointer-events: none; z-index: -2; } .nav__logo { display: block; /* Logomark aspect ratio 139:29 — keep width proportional to height */ height: 37px; width: calc(37px * 139 / 29); background-color: var(--semantic-color-contrast-dark); mask: url(assets/logomark_wht.svg) center / contain no-repeat; -webkit-mask: url(assets/logomark_wht.svg) center / contain no-repeat; opacity: 0.9; transition: opacity var(--primitive-duration-fast), background-color var(--primitive-duration-fast); } .nav__logo:hover { opacity: 1; } .nav__links { display: flex; align-items: center; gap: var(--semantic-spacing-inline-xl); list-style: none; } .nav__link { font-family: var(--semantic-typography-label-md-font-family); font-size: var(--semantic-typography-label-md-font-size); font-weight: var(--semantic-typography-label-md-font-weight); line-height: var(--semantic-typography-label-md-line-height); letter-spacing: var(--semantic-typography-label-md-letter-spacing); text-transform: var(--semantic-typography-label-md-text-transform); color: var(--text-secondary); transition: color var(--primitive-duration-fast); } .nav__link:hover { color: var(--text-primary); } .nav__signin { font-size: var(--primitive-typography-size-sm); font-weight: var(--primitive-typography-weight-medium); color: var(--page-bg); background: var(--text-primary); border: none; padding: 6px 18px; border-radius: var(--primitive-radius-md); transition: background var(--primitive-duration-fast), transform var(--primitive-duration-fast); } .nav__signin:hover { background: var(--primitive-color-neutral-gray-white); transform: translateY(-1px); } /* Mobile toggle — hamburger made of 3 spans so we can morph to X */ .nav__burger { display: none; align-items: center; justify-content: center; background: none; border: none; color: var(--text-primary); padding: 4px; } .nav__burger-icon { position: relative; display: block; width: 24px; height: 24px; } .nav__burger-line { position: absolute; left: 4px; width: 16px; height: 2px; background: currentColor; border-radius: 999px; transform-origin: center; transition: transform 0.3s var(--primitive-easing-standard), opacity 0.15s var(--primitive-easing-standard); } .nav__burger-line:nth-child(1) { top: 7px; } .nav__burger-line:nth-child(2) { top: 11px; } .nav__burger-line:nth-child(3) { top: 15px; } .nav.is-open .nav__burger-line:nth-child(1) { transform: translateY(4px) rotate(45deg); } .nav.is-open .nav__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav.is-open .nav__burger-line:nth-child(3) { transform: translateY(-4px) rotate(-45deg); } /* ============================================= HERO ============================================= */ .hero { position: relative; min-height: 75vh; display: flex; align-items: center; overflow: hidden; padding-top: 80px; } /* ============================================= BACKGROUND LAYER (fixed, state-driven) Sections declare data-bg-state; JS syncs it to #bg. ============================================= */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* State CSS sets background-color here for token resolution. The .bg__color layers render the actual visible color via crossfade — they sit on top and hide any flash from .bg itself. */ background: var(--page-bg); } /* Double-buffered color layers — crossfade via opacity instead of transitioning background-color, which can flash during race conditions. */ .bg__color { position: absolute; inset: 0; z-index: 0; transition: opacity var(--primitive-duration-slower) var(--primitive-easing-ease); } .bg__color--a { opacity: 1; } .bg__color--b { opacity: 0; } .bg__grid, .bg__glow, .bg__vignette { position: absolute; pointer-events: none; opacity: 0; /* hidden by default — fades in once bg state is set */ /* Opacity + transform both at duration-slower for a uniform, steady crossfade between states. width/height snap (they're the root of Safari's -50% centering drift bug — see earlier commits). */ transition: opacity var(--primitive-duration-slower) var(--primitive-easing-ease), transform var(--primitive-duration-slower) var(--primitive-easing-ease); } /* On first reveal, skip transform/size transitions so glows only fade in (no sliding / resizing). Subsequent state changes animate normally. */ .bg.bg--initial .bg__grid, .bg.bg--initial .bg__glow, .bg.bg--initial .bg__vignette { transition: opacity var(--primitive-duration-slower) var(--primitive-easing-ease) !important; } /* Stack: glows (1) → grid (2) → vignette (3) */ .bg__glow { z-index: 1; border-radius: 50%; /* Anchor all glows at viewport center; state CSS offsets via translate */ top: 50%; left: 50%; transform: translate(-50%, -50%); } .bg__grid { z-index: 2; } .bg__vignette { z-index: 3; } .bg__grid { inset: 0; opacity: 0.22; background-image: radial-gradient(circle, var(--semantic-color-text-neutral-bold) 1px, transparent 1px); background-size: 32px 32px; background-position: center center; mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 35%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 35%, transparent 80%); } .bg__glow--a { width: 900px; height: 900px; background: radial-gradient(circle, color-mix(in srgb, var(--brand-red-fill) 13%, transparent) 0%, transparent 65%); } .bg__glow--b { width: 1100px; height: 1000px; background: radial-gradient(circle, color-mix(in srgb, var(--brand-blue-fill) 14%, transparent) 0%, transparent 60%); } .bg__glow--c { width: 800px; height: 800px; background: radial-gradient(circle, color-mix(in srgb, var(--brand-yellow-fill) 8%, transparent) 0%, transparent 60%); } /* Subtle GPU-only breathing on the glows. Uses the individual `scale` property so it composes with the per-state `transform: translate(...)` without conflict. */ @keyframes bg-glow-pulse { 0%, 100% { scale: 0.97; filter: opacity(0.5); } 50% { scale: 1.05; filter: opacity(1); } } .bg__glow--a, .bg__glow--b, .bg__glow--c { scale: 1; will-change: scale; } .bg__glow--a { animation: bg-glow-pulse 6s ease-in-out infinite; } .bg__glow--b { animation: bg-glow-pulse 9s ease-in-out -4.5s infinite; } .bg__glow--c { animation: bg-glow-pulse 13s ease-in-out -9s infinite; } @media (prefers-reduced-motion: reduce) { .bg__glow--a, .bg__glow--b, .bg__glow--c { animation: none; } } /* Mobile: stop the pulse. Continuous `scale` animation on 1800px radial gradients causes repaint tearing on iOS Safari during scroll-driven bg-state transitions, and the pulse overrides our mobile scale clamp. */ @media (max-width: 1024px) { .bg__glow--a, .bg__glow--b, .bg__glow--c { animation: none; } } .bg__vignette { inset: 0; /* defaults to page bg; per-state CSS can override with its own token */ background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, var(--page-bg) 100%); } /* ---- STATES ---- All state composition is driven by playground-generated files in bg-states/. No per-state rules live in this file. */ /* Sections sit above the fixed bg layer, transparent so bg shows through */ .hero, .section, .footer { position: relative; z-index: 1; background: transparent; } /* Each features subsection is a fixed-height block. Lenis drives smooth scrolling across the page. */ [data-bg-state^="features-"] { display: flex; flex-direction: column; justify-content: center; } /* Use padding (inside border-box) instead of margin (outside) so the section's bounding rect covers the full spacing — prevents a "no section active" gap between sibling feature sections on tall viewports. */ .features[data-bg-state="features-head"] { padding-top: 11vh; padding-bottom: var(--primitive-spacing-6xl); position: relative; } .features[data-bg-state="features-define"] { position: relative; } .features[data-bg-state="features-export"] { padding-top: calc(var(--primitive-spacing-6xl) * 2); position: relative; } .features[data-bg-state="features-build"] { padding-top: var(--primitive-spacing-6xl); padding-bottom: 11vh; position: relative; } /* Animated top divider on features-head — draws in from center when section becomes active. */ [data-bg-state="features-head"]::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: var(--semantic-color-border-neutral-default); transition: width 1s var(--primitive-easing-ease); top: 0; } [data-bg-state="features-head"].is-active::before { width: min(calc(100% - var(--primitive-spacing-4xl) * 2), calc(1360px - var(--primitive-spacing-4xl) * 2)); } #features { scroll-margin-top: 100px; } [data-bg-state="how"] { padding: clamp(40px, 10vw, 40px) 0; } /* features-head uses heading-h3 for its title (not display-sm) */ [data-bg-state="features-head"] .section__h2 { font-family: var(--semantic-typography-heading-h3-font-family); font-size: var(--semantic-typography-heading-h3-font-size); font-weight: var(--semantic-typography-heading-h3-font-weight); line-height: var(--semantic-typography-heading-h3-line-height); letter-spacing: var(--semantic-typography-heading-h3-letter-spacing); text-transform: var(--semantic-typography-heading-h3-text-transform); } [data-bg-state="faq"] .section__label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--primitive-spacing-md); color: var(--brand-red); margin-bottom: var(--primitive-spacing-4xl); } [data-bg-state="faq"] .section__label::after { content: ''; width: 24px; height: 1.5px; background: var(--brand-red); flex-shrink: 0; } /* ---------- LOGO CAROUSEL ---------- */ .logo-carousel { margin-top: var(--primitive-spacing-5xl); padding: var(--primitive-spacing-5xl) 0; overflow: hidden; /* Fade the left and right edges so logos slide gracefully in/out */ -webkit-mask-image: linear-gradient(to right, transparent 0, black 25vw, black calc(100% - 25vw), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 25vw, black calc(100% - 25vw), transparent 100%); } .logo-carousel__track { display: flex; width: max-content; animation: logo-carousel-scroll 40s linear infinite; will-change: transform; backface-visibility: hidden; } .logo-carousel__slot { flex: 0 0 auto; width: 102px; height: 102px; margin-right: var(--primitive-spacing-6xl); border-radius: var(--primitive-radius-lg); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } .logo-carousel__slot img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; filter: brightness(0) invert(1); transition: filter 0.3s ease, opacity 0.3s ease; } .logo-carousel__slot--contain { overflow: visible; background-color: transparent; border-color: transparent; } .logo-carousel__slot--contain img { object-fit: contain; width: auto; height: 100%; } .logo-carousel__slot:hover img { filter: none; opacity: 1; } .logo-carousel__slot--inline svg { width: 100%; height: 100%; opacity: 0.7; transition: opacity 0.3s ease; } .logo-carousel__slot--inline .logo-fill { fill: #fff !important; transition: fill 0.3s ease; } .logo-carousel__slot--inline:hover svg { opacity: 1; } [data-logo="svelte"]:hover .logo-fill { fill: #ff3e00 !important; } [data-logo="vue"] .logo-inner { fill: rgba(255,255,255,0.5) !important; transition: fill 0.3s ease; } [data-logo="vue"]:hover .logo-fill { fill: #41B883 !important; } [data-logo="vue"]:hover .logo-inner { fill: #34495E !important; } /* Translate by -50% so the duplicate set lines up with the original for seamless loop */ @keyframes logo-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logo-carousel__track { animation: none; } } [data-bg-state="features-define"] { min-height: auto; } /* ---------- FEATURES ITEM (shared across all features variants) ---------- Icon colour is themed per-section via --features-accent. Works in both .features__grid and .features__list layouts. */ [data-bg-state="features-define"] { --features-accent: var(--brand-yellow); } [data-bg-state="features-export"] { --features-accent: var(--brand-blue-soft); } [data-bg-state="features-build"] { --features-accent: var(--brand-red-soft); } .features__item { display: flex; flex-direction: column; gap: var(--primitive-spacing-md); padding: var(--primitive-spacing-xl); border-radius: var(--primitive-radius-lg); background-color: color-mix(in srgb, var(--semantic-color-surface-neutral-subtle) 30%, transparent); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--semantic-color-text-neutral-bold) 8%, transparent); } .features__item-icon { width: 32px; height: 32px; color: var(--features-accent, var(--brand-yellow)); margin-bottom: var(--primitive-spacing-sm); } .features__item-title { font-family: var(--semantic-typography-heading-h3-font-family); font-size: var(--semantic-typography-heading-h3-font-size); font-weight: var(--semantic-typography-heading-h3-font-weight); line-height: var(--semantic-typography-heading-h3-line-height); letter-spacing: var(--semantic-typography-heading-h3-letter-spacing); text-transform: var(--semantic-typography-heading-h3-text-transform); color: var(--semantic-color-text-neutral-bold); } .features__item-body { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); color: var(--primitive-color-neutral-gray-white); } /* Define-section title + body tinted with brand-accent shades */ [data-bg-state="features-define"] .card__icon { color: var(--semantic-color-text-accent-default); } [data-bg-state="features-export"] .card__icon { color: var(--semantic-color-text-primary-default); } [data-bg-state="features-build"] .card__icon { color: var(--semantic-color-text-secondary-default); } [data-bg-state^="features-"] .card__icon, [data-bg-state^="features-"] .features__bullet-icon { stroke-width: var(--primitive-icon-stroke-thin); } [data-bg-state="features-define"] .features__item-title { color: var(--primitive-color-brand-accent-900); } [data-bg-state="features-define"] .features__item-body { color: var(--primitive-color-brand-accent-700); } /* Staggered entry for cards/steps inside features-define. Hidden until the section becomes .is-active (bg state switches to it); then each item fades up with increasing delay. */ [data-bg-state="features-define"].is-active .card:nth-child(5), [data-bg-state="features-define"].is-active .features__item:nth-child(5) { transition-delay: 0.75s; } [data-bg-state="features-export"] { height: auto; } [data-bg-state="features-build"] { height: auto; } .hero__inner { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; } /* Hero content */ .hero__content { position: relative; display: flex; flex-direction: column; gap: var(--semantic-spacing-stack-xl); padding: var(--primitive-spacing-6xl) 0; } .hero__content > * { opacity: 0; transform: translateY(20px); animation: revealUp 0.7s var(--primitive-easing-decelerate) forwards; } .hero__content > *:nth-child(1) { animation-delay: 0.1s; } .hero__content > *:nth-child(2) { animation-delay: 0.2s; } .hero__content > *:nth-child(3) { animation-delay: 0.35s; } .hero__content > *:nth-child(4) { animation-delay: 0.45s; } .hero__overline { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--primitive-spacing-md); font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); color: var(--brand-yellow); } .hero__overline::after { content: ''; width: 24px; height: 1.5px; background: var(--brand-yellow); flex-shrink: 0; } .hero__h1 { font-family: var(--semantic-typography-display-md-font-family); font-size: var(--semantic-typography-display-md-font-size); font-weight: var(--semantic-typography-display-md-font-weight); line-height: var(--semantic-typography-display-md-line-height); letter-spacing: var(--semantic-typography-display-md-letter-spacing); text-transform: var(--semantic-typography-display-md-text-transform); color: var(--text-primary); padding-top: var(--semantic-spacing-stack-md); padding-bottom: var(--semantic-spacing-stack-md); } /* Accent underlines — sit BEHIND the text using primary-500 brand values */ .hero__accent { position: relative; z-index: 0; } .hero__accent::after { content: ''; position: absolute; bottom: 0.06em; left: 0; right: 0; height: 0.09em; transform: scaleX(0); transform-origin: left; z-index: -1; } .hero__accent--yellow::after { background: var(--brand-yellow-fill); animation: scaleIn 0.5s 1s var(--primitive-easing-decelerate) forwards; } .hero__accent--blue::after { background: var(--brand-blue-fill); animation: scaleIn 0.5s 1.15s var(--primitive-easing-decelerate) forwards; } .hero__accent--red::after { background: var(--brand-red-fill); animation: scaleIn 0.5s 1.3s var(--primitive-easing-decelerate) forwards; } .hero__sub { font-family: var(--semantic-typography-body-lg-font-family); font-size: var(--semantic-typography-body-lg-font-size); font-weight: var(--semantic-typography-body-lg-font-weight); line-height: var(--semantic-typography-body-lg-line-height); letter-spacing: var(--semantic-typography-body-lg-letter-spacing); text-transform: var(--semantic-typography-body-lg-text-transform); color: var(--text-secondary); max-width: 42ch; } .hero__actions { display: flex; align-items: center; gap: var(--primitive-spacing-2xl); padding-top: var(--primitive-spacing-lg); } /* CTA button */ .btn { display: inline-flex; align-items: center; gap: var(--primitive-spacing-md); font-weight: var(--primitive-typography-weight-medium); border-radius: var(--primitive-radius-md); transition: all var(--primitive-duration-fast) var(--primitive-easing-standard); border: 1px solid transparent; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn--solid { font-size: var(--primitive-typography-size-base); padding: 12px 28px; background: var(--text-primary); color: var(--page-bg); border-color: var(--text-primary); } .btn--solid:hover { background: var(--primitive-color-neutral-gray-white); border-color: var(--primitive-color-neutral-gray-white); box-shadow: 0 0 32px color-mix(in srgb, var(--text-primary) 12%, transparent); transform: translateY(-1px); } .btn--ghost { font-size: var(--primitive-typography-size-sm); padding: 10px 20px; background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); } .btn--ghost:hover { color: var(--text-primary); border-color: var(--border-hover); } /* Hero code viz */ .hero__viz { display: flex; flex-direction: column; gap: var(--primitive-spacing-2xl); opacity: 0; transform: translateY(24px); animation: revealUp 0.9s 0.5s var(--primitive-easing-decelerate) forwards; } /* Code windows */ .codewin { border-radius: var(--primitive-radius-xl); border: 1px solid color-mix(in srgb, var(--semantic-color-text-neutral-bold) 8%, transparent); background: transparent; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); overflow: hidden; position: relative; } .codewin--primary { box-shadow: 0 16px 48px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 45%, transparent), 0 4px 16px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 30%, transparent); } .codewin--secondary { box-shadow: 0 8px 32px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 35%, transparent); opacity: 0.9; } .codewin__bar { display: flex; align-items: center; gap: var(--primitive-spacing-xl); padding: var(--primitive-spacing-xl) var(--primitive-spacing-2xl); border-bottom: 1px solid var(--border-subtle); } .codewin__dots { display: flex; gap: 6px; } .codewin__dot { width: 10px; height: 10px; border-radius: 50%; } .codewin__dot:nth-child(1) { background: var(--dot-red); } .codewin__dot:nth-child(2) { background: var(--dot-yellow); } .codewin__dot:nth-child(3) { background: var(--dot-green); } .codewin__file { font-family: var(--primitive-typography-family-mono); font-size: var(--primitive-typography-size-xs); color: var(--text-secondary); opacity: 0.6; } .codewin__badge { position: absolute; top: 10px; right: 12px; font-family: var(--primitive-typography-family-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); opacity: 0.5; padding: 2px 8px; border-radius: var(--primitive-radius-xs); border: 1px solid color-mix(in srgb, var(--semantic-color-text-neutral-bold) 15%, transparent); } .codewin__body { padding: var(--primitive-spacing-2xl); font-family: var(--primitive-typography-family-mono); font-size: var(--primitive-typography-size-xs); line-height: 2.1; overflow: hidden; } .codewin--secondary .codewin__body { padding: var(--primitive-spacing-xl) var(--primitive-spacing-2xl); line-height: 2; } .cl { opacity: 0; transform: translateY(6px); white-space: nowrap; } .cl.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.35s ease, transform 0.35s ease; } .s-key { color: var(--syntax-key); } .s-str { color: var(--syntax-str); } .s-num { color: var(--syntax-num); } .s-col { color: var(--syntax-col); } .s-p { color: var(--syntax-punct); } .s-c { color: var(--syntax-colon); } .s-prop { color: var(--syntax-key); } .cursor { display: inline-block; width: 7px; height: 14px; background: var(--brand-red-fill); vertical-align: text-bottom; margin-left: 2px; animation: blink 1s step-end infinite; opacity: 0; } .cursor.is-on { opacity: 1; } /* ============================================= SECTION BASE ============================================= */ .section { padding: clamp(80px, 10vw, 80px) 0; position: relative; } .section + .section { border-top: 1px solid var(--border-subtle); } .features { padding: var(--primitive-spacing-3xl) 0; } .section__label { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); color: var(--brand-yellow); margin-bottom: var(--primitive-spacing-2xl); } .section__h2 { font-family: var(--semantic-typography-display-sm-font-family); font-size: var(--semantic-typography-display-sm-font-size); font-weight: var(--semantic-typography-display-sm-font-weight); line-height: var(--semantic-typography-display-sm-line-height); letter-spacing: var(--semantic-typography-display-sm-letter-spacing); text-transform: var(--semantic-typography-display-sm-text-transform); color: var(--text-primary); margin-bottom: var(--primitive-spacing-3xl); } .section__intro { font-family: var(--semantic-typography-body-lg-font-family); font-size: var(--semantic-typography-body-lg-font-size); font-weight: var(--semantic-typography-body-lg-font-weight); line-height: var(--semantic-typography-body-lg-line-height); letter-spacing: var(--semantic-typography-body-lg-letter-spacing); text-transform: none; color: var(--text-secondary); max-width: 41ch; margin-left: auto; margin-right: auto; text-align: center; } /* ============================================= VIDEO / HOW IT WORKS ============================================= */ /* .how background now owned by #bg state layer */ .how__player { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--primitive-radius-2xl); overflow: hidden; border: 1px solid var(--border-subtle); background: transparent; /* Elevation-5 shape, white-tinted for glow against dark sections. */ box-shadow: 0px 2px 24px 0px rgba(255, 255, 255, 0.5), 0px 0px 12px -13px rgba(255, 255, 255, 0.1); transition: border-color var(--primitive-duration-base); } /* Reveal animation — flicker-proofed with permanent GPU promotion, translateZ to stabilise subpixels, and hysteresis on the observer. */ .how__player { /* translateZ promotes the element onto its own compositor layer permanently (prevents layer churn). scale3d + translateZ keeps the animation GPU-only. */ transform: scale3d(0.88, 0.88, 1) translateZ(0); transform-origin: center center; transition: transform var(--primitive-duration-slow) var(--primitive-easing-decelerate); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .how__player.is-revealed { transform: scale3d(1, 1, 1) translateZ(0); } .how__player::after { content: ''; position: absolute; inset: 0; /* Solid black — dim amount driven by opacity (composite-only, no repaints) */ background-color: var(--primitive-color-neutral-gray-black); opacity: 0.65; border-radius: inherit; pointer-events: none; z-index: 1; transition: opacity var(--primitive-duration-slow) var(--primitive-easing-decelerate); will-change: opacity; backface-visibility: hidden; } .how__player.is-revealed::after { opacity: 0.35; } .how__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .how__player-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primitive-spacing-4xl); /* Inner only receives clicks on its button — let the rest pass through so the mux-player below can handle its own pointer events. */ pointer-events: none; } .how__player-inner > * { pointer-events: auto; } /* Video panel play states. Base layout: - .how__teaser (background, always looping) - ::after (scrim, dims reveal → playing) - .how__player-inner (CTA overlay, z:2) - .how__demo (full video, z:3, hidden until .is-playing) - .how__replay (end-state overlay, z:4, hidden until .is-ended) */ .how__player .dp-button--primary { box-shadow: var(--primitive-shadow-elevation-6); } .how__demo { position: absolute; inset: 0; width: 100%; height: 100%; /* `contain` preserves aspect in fullscreen — `cover` crops sides on non-16:9 screens (e.g. 16:10 laptops). */ object-fit: contain; background: var(--primitive-color-neutral-gray-black); border-radius: inherit; /* Parent's `overflow: hidden` should clip rounded corners, but mux-player's shadow DOM inner elements can leak past them — force a local clip. */ overflow: hidden; z-index: 3; opacity: 0; /* Visibility + pointer-events both hidden pre-play — mux-player's shadow DOM sets pointer-events: auto on its internal controls which bypasses host `pointer-events: none`, so visibility is the reliable gate. */ visibility: hidden; pointer-events: none; transition: opacity var(--primitive-duration-base) var(--primitive-easing-standard), visibility 0s linear var(--primitive-duration-base); } /* Inset Mux Player controls from the panel's rounded corners. Parts verified via shadow DOM inspection — media-control-bar has parts `control-bar bottom`, and the scrubber (media-time-range) has parts `bottom time range`. */ .how__demo::part(control-bar) { padding: 6px 24px 12px; } .how__demo::part(time range) { padding-inline: 24px; } .how__player.is-playing .how__demo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--primitive-duration-base) var(--primitive-easing-standard); } .how__player.is-playing::after { opacity: 0; } .how__player.is-playing .how__player-inner { opacity: 0; pointer-events: none; } .how__player.is-playing .how__teaser { opacity: 0; } .how__player-inner, .how__teaser { transition: opacity var(--primitive-duration-base) var(--primitive-easing-standard); } .how__replay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--primitive-color-neutral-gray-black) 50%, transparent); transition: opacity var(--primitive-duration-base) var(--primitive-easing-standard); } .how__player.is-ended .how__replay { opacity: 1; pointer-events: auto; } /* 3-step summary */ .how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--primitive-spacing-6xl); margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); } .step { display: flex; flex-direction: column; gap: var(--primitive-spacing-lg); } .step__num { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); } .step--a .step__num { color: var(--brand-yellow); } .step--b .step__num { color: var(--brand-blue-soft); } .step--c .step__num { color: var(--brand-red-soft); } .step__title { font-family: var(--semantic-typography-heading-h4-font-family); font-size: var(--semantic-typography-heading-h4-font-size); font-weight: var(--semantic-typography-heading-h4-font-weight); line-height: var(--semantic-typography-heading-h4-line-height); letter-spacing: var(--semantic-typography-heading-h4-letter-spacing); text-transform: var(--semantic-typography-heading-h4-text-transform); color: var(--text-primary); } .step__body { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); text-transform: var(--semantic-typography-body-md-text-transform); color: var(--text-secondary); } /* ============================================= FEATURES ============================================= */ /* .features background now owned by #bg state layer */ .features__group { margin-bottom: clamp(48px, 5vw, 72px); } .features__group:last-child { margin-bottom: 0; } .features__group-label { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); margin-bottom: var(--primitive-spacing-3xl); display: flex; align-items: center; gap: var(--primitive-spacing-xl); } .features__group-label::after { content: ''; flex: 1; height: 1px; background: var(--semantic-color-border-accent-subtle); max-width: 0; transition: max-width 1s var(--primitive-easing-ease) 1s; } .is-visible .features__group-label::after { max-width: 100%; } .features__group-label--define { color: var(--brand-yellow); } .features__group-label--export { color: var(--brand-blue-soft); } .features__group-label--export::after { background: var(--semantic-color-border-primary-subtle); } .features__group-label--build { color: var(--brand-red-soft); } .features__group-label--build::after { background: var(--semantic-color-border-secondary-subtle); } .features__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--primitive-spacing-2xl); } .card { padding: var(--primitive-spacing-4xl) var(--primitive-spacing-3xl); border-radius: var(--primitive-radius-2xl); border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--primitive-color-neutral-gray-white) 35%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transform: translateY(16px); transition: border-color var(--primitive-duration-base), background var(--primitive-duration-base), transform var(--primitive-duration-base), opacity var(--primitive-duration-base); } @keyframes card-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .is-visible .card { animation: card-reveal 0.6s var(--primitive-easing-decelerate) 0.5s forwards; } .is-visible .card:nth-child(2) { animation-delay: 0.65s; } .is-visible .card:nth-child(3) { animation-delay: 0.8s; } .is-visible .card:nth-child(4) { animation-delay: 0.95s; } /* Feature panels (define/export/build): cards stagger in when the section becomes active (centered in viewport), not when it first enters view. Matches the scroll rhythm — cards appear as you land on each panel. */ [data-bg-state="features-define"] .is-visible .card, [data-bg-state="features-export"] .is-visible .card, [data-bg-state="features-build"] .is-visible .card { animation: none; } /* Animation fires once when section is first activated (.has-revealed-cards is added in JS and never removed). Gating on a persistent class — instead of .is-active which toggles off on scroll-away — means the animation can't be interrupted mid-flight. forwards fill-mode locks the end state. */ [data-bg-state="features-define"].has-revealed-cards .card:not(.is-revealed), [data-bg-state="features-export"].has-revealed-cards .card:not(.is-revealed), [data-bg-state="features-build"].has-revealed-cards .card:not(.is-revealed) { animation: card-reveal 0.6s var(--primitive-easing-decelerate) 0.3s forwards; } /* features-define: wait for the top divider line (1s) before fading in */ [data-bg-state="features-define"].has-revealed-cards .card { animation-delay: 1.1s; } [data-bg-state="features-define"].has-revealed-cards .card:nth-child(2) { animation-delay: 1.25s; } [data-bg-state="features-define"].has-revealed-cards .card:nth-child(3) { animation-delay: 1.4s; } [data-bg-state="features-define"].has-revealed-cards .card:nth-child(4) { animation-delay: 1.55s; } /* features-export, features-build: no divider — default 0.3s start, stagger by 0.15s */ [data-bg-state="features-export"].has-revealed-cards .card:nth-child(2), [data-bg-state="features-build"].has-revealed-cards .card:nth-child(2) { animation-delay: 0.45s; } [data-bg-state="features-export"].has-revealed-cards .card:nth-child(3), [data-bg-state="features-build"].has-revealed-cards .card:nth-child(3) { animation-delay: 0.6s; } [data-bg-state="features-export"].has-revealed-cards .card:nth-child(4), [data-bg-state="features-build"].has-revealed-cards .card:nth-child(4) { animation-delay: 0.75s; } .card.is-revealed { opacity: 1; transform: translateY(0); animation: none; } .card.is-revealed:hover { background: color-mix(in srgb, var(--semantic-color-contrast-light) 70%, transparent); transform: translateY(-2px); box-shadow: var(--primitive-shadow-elevation-1); } .card__icon { width: 32px; height: 32px; margin-bottom: var(--primitive-spacing-2xl); color: var(--text-secondary); opacity: 0.6; } .card__title { font-family: var(--semantic-typography-heading-h5-font-family); font-size: var(--semantic-typography-heading-h5-font-size); font-weight: var(--semantic-typography-heading-h5-font-weight); line-height: var(--semantic-typography-heading-h5-line-height); letter-spacing: var(--semantic-typography-heading-h5-letter-spacing); text-transform: var(--semantic-typography-heading-h5-text-transform); color: var(--text-primary); margin-bottom: var(--primitive-spacing-lg); } .card__body { font-family: var(--semantic-typography-body-sm-font-family); font-size: var(--semantic-typography-body-sm-font-size); font-weight: var(--semantic-typography-body-sm-font-weight); line-height: var(--semantic-typography-body-sm-line-height); letter-spacing: var(--semantic-typography-body-sm-letter-spacing); text-transform: var(--semantic-typography-body-sm-text-transform); color: var(--text-secondary); } .card__body a { color: var(--brand-blue-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand-blue-soft) 40%, transparent); transition: text-decoration-color var(--primitive-duration-fast); } .card__body a:hover { text-decoration-color: var(--brand-blue-soft); } /* ============================================= THE ARC ============================================= */ /* .arc background now owned by #bg state layer */ .arc__inner { max-width: 660px; margin: 0 auto; } .arc__h2 { font-family: var(--semantic-typography-display-sm-font-family); font-size: var(--semantic-typography-display-sm-font-size); font-weight: var(--semantic-typography-display-sm-font-weight); line-height: var(--semantic-typography-display-sm-line-height); letter-spacing: var(--semantic-typography-display-sm-letter-spacing); text-transform: var(--semantic-typography-display-sm-text-transform); color: var(--text-primary); margin-bottom: var(--primitive-spacing-5xl); } .arc__p { font-family: var(--semantic-typography-body-lg-font-family); font-size: var(--semantic-typography-body-lg-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); text-transform: var(--semantic-typography-body-md-text-transform); color: var(--text-secondary); margin-bottom: var(--primitive-spacing-3xl); } .arc__p:last-child { margin-bottom: 0; } .arc__p strong { color: var(--text-primary); font-weight: var(--primitive-typography-weight-medium); } .arc__p em { font-style: normal; color: var(--brand-yellow-soft); } .arc__rule { width: 40px; height: 1px; background: var(--border-hover); margin: var(--primitive-spacing-5xl) 0; border: none; } /* ============================================= FAQ ============================================= */ /* .faq background now owned by #bg state layer */ .faq__list { max-width: 100%; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--primitive-color-neutral-gray-200); } .faq__item:first-child { border-top: 1px solid var(--primitive-color-neutral-gray-200); } .faq__q { width: 100%; padding: var(--primitive-spacing-3xl) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--primitive-spacing-2xl); background: none; border: none; text-align: left; font-family: var(--semantic-typography-body-md-bold-font-family); font-size: var(--semantic-typography-body-md-bold-font-size); font-weight: var(--semantic-typography-body-md-bold-font-weight); line-height: var(--semantic-typography-body-md-bold-line-height); letter-spacing: var(--semantic-typography-body-md-bold-letter-spacing); text-transform: var(--semantic-typography-body-md-bold-text-transform); color: var(--semantic-color-text-neutral-default); transition: color var(--primitive-duration-fast); } .faq__q:hover { color: var(--semantic-color-text-neutral-bold); } .faq__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--primitive-duration-base) var(--primitive-easing-standard), color var(--primitive-duration-fast); } .faq__item.is-open .faq__icon { transform: rotate(45deg); color: var(--text-secondary); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primitive-duration-base) var(--primitive-easing-standard); } .faq__item.is-open .faq__a { grid-template-rows: 1fr; } .faq__a-inner { overflow: hidden; } .faq__a-inner > div { padding-bottom: var(--primitive-spacing-3xl); } .faq__a p { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); text-transform: var(--semantic-typography-body-md-text-transform); color: var(--text-secondary); } .faq__a p + p { margin-top: var(--primitive-spacing-xl); } .faq__a a { color: var(--brand-blue-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand-blue-soft) 40%, transparent); } .faq__a a:hover { text-decoration-color: var(--brand-blue-soft); } /* ============================================= FOOTER CTA ============================================= */ .cta { text-align: center; padding: clamp(100px, 12vw, 180px) 0; } .cta__h2 { font-family: var(--semantic-typography-display-md-font-family); font-size: var(--semantic-typography-display-md-font-size); font-weight: var(--semantic-typography-display-md-font-weight); line-height: var(--semantic-typography-display-md-line-height); letter-spacing: var(--semantic-typography-display-md-letter-spacing); text-transform: var(--semantic-typography-display-md-text-transform); color: var(--text-primary); margin: 0 auto var(--primitive-spacing-3xl); } .cta .section__intro { max-width: 49ch; margin: 0 auto var(--semantic-spacing-stack-xl); } .cta .dp-button { margin-top: var(--primitive-spacing-lg); } .cta__sub { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); font-weight: var(--semantic-typography-body-md-font-weight); line-height: var(--semantic-typography-body-md-line-height); letter-spacing: var(--semantic-typography-body-md-letter-spacing); text-transform: var(--semantic-typography-body-md-text-transform); color: var(--text-secondary); margin-bottom: var(--primitive-spacing-4xl); } /* ============================================= FOOTER ============================================= */ /* ============================================= LEGAL PAGES (privacy, terms) ============================================= */ .legal { padding: var(--primitive-spacing-5xl) 0 var(--primitive-spacing-6xl); } body:has(.legal) { background-color: var(--semantic-color-surface-neutral-subtle); } .legal__inner { margin: 0 auto; } /* Logo-only header for legal pages */ .legal__header { padding: var(--primitive-spacing-3xl) 0; } .legal__logo { display: block; /* Match nav logo: aspect ratio 139:29 */ height: 32px; width: calc(32px * 139 / 29); background-color: var(--primitive-color-neutral-gray-900); mask: url(assets/logomark_wht.svg) center / contain no-repeat; -webkit-mask: url(assets/logomark_wht.svg) center / contain no-repeat; opacity: 0.9; transition: opacity var(--primitive-duration-fast); } .legal__logo:hover { opacity: 1; } /* Termly-sourced doc: re-tokenize to brand fonts/colors */ .legal__doc { font-family: var(--semantic-typography-body-sm-font-family); font-size: var(--semantic-typography-body-sm-font-size); font-weight: var(--semantic-typography-body-sm-font-weight); line-height: var(--semantic-typography-body-sm-line-height); letter-spacing: var(--semantic-typography-body-sm-letter-spacing); color: var(--text-secondary); } .legal__doc h1 { font-family: var(--semantic-typography-heading-h2-font-family); font-size: var(--semantic-typography-heading-h2-font-size); font-weight: var(--semantic-typography-heading-h2-font-weight); line-height: var(--semantic-typography-heading-h2-line-height); letter-spacing: var(--semantic-typography-heading-h2-letter-spacing); color: var(--text-primary); margin: 0 0 var(--primitive-spacing-md); } .legal__doc h2 { font-family: var(--semantic-typography-heading-h4-font-family); font-size: var(--semantic-typography-heading-h4-font-size); font-weight: var(--semantic-typography-heading-h4-font-weight); line-height: var(--semantic-typography-heading-h4-line-height); letter-spacing: var(--semantic-typography-heading-h4-letter-spacing); color: var(--text-primary); margin: var(--primitive-spacing-6xl) 0 var(--primitive-spacing-xl); } .legal__doc h3 { font-family: var(--semantic-typography-heading-h5-font-family); font-size: var(--semantic-typography-heading-h5-font-size); font-weight: var(--semantic-typography-heading-h5-font-weight); line-height: var(--semantic-typography-heading-h5-line-height); letter-spacing: var(--semantic-typography-heading-h5-letter-spacing); color: var(--text-primary); margin: var(--primitive-spacing-3xl) 0 var(--primitive-spacing-2xl); text-decoration: underline; } .legal__doc p, .legal__doc div, .legal__doc span, .legal__doc li { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; } .legal__doc p { margin: 0 0 var(--primitive-spacing-3xl); } .legal__doc hr { margin: var(--primitive-spacing-5xl) 0 var(--primitive-spacing-3xl); border: none; border-top: 1px solid var(--semantic-color-border-neutral-default); } .legal__doc ul { padding-left: 0; margin: var(--primitive-spacing-md) 0; list-style: none; } .legal__doc ul > li { margin-bottom: var(--primitive-spacing-sm); } .legal__doc a, .legal__doc a span { color: var(--brand-blue-soft); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; } .legal__doc table { width: 100%; border-collapse: collapse; margin: var(--primitive-spacing-xl) 0; font-size: var(--semantic-typography-body-sm-font-size); } .legal__doc table th, .legal__doc table td { border: 1px solid var(--primitive-color-neutral-gray-200) !important; padding: var(--primitive-spacing-md); vertical-align: top; text-align: left; } .legal__doc table th { background: var(--primitive-color-neutral-gray-50); color: var(--text-primary); } .legal__doc [data-custom-class="subtitle"] { color: var(--text-tertiary); } .legal__h1 { font-family: var(--semantic-typography-display-sm-font-family); font-size: var(--semantic-typography-display-sm-font-size); font-weight: var(--semantic-typography-display-sm-font-weight); line-height: var(--semantic-typography-display-sm-line-height); letter-spacing: var(--semantic-typography-display-sm-letter-spacing); color: var(--text-primary); margin: 0 0 var(--primitive-spacing-md); } .legal__meta, .legal__doc .legal__meta { font-family: var(--semantic-typography-body-sm-font-family); font-size: var(--semantic-typography-body-sm-font-size); line-height: var(--semantic-typography-body-sm-line-height); color: var(--text-tertiary); margin: 0 0 var(--primitive-spacing-6xl); } .legal__section { margin-bottom: var(--primitive-spacing-5xl); } .legal__section h2 { font-family: var(--semantic-typography-heading-h4-font-family); font-size: var(--semantic-typography-heading-h4-font-size); font-weight: var(--semantic-typography-heading-h4-font-weight); line-height: var(--semantic-typography-heading-h4-line-height); color: var(--text-primary); margin: 0 0 var(--primitive-spacing-2xl); } .legal__section p { font-family: var(--semantic-typography-body-md-font-family); font-size: var(--semantic-typography-body-md-font-size); line-height: var(--semantic-typography-body-md-line-height); color: var(--text-secondary); margin: 0 0 var(--primitive-spacing-2xl); } .legal__section a { color: var(--brand-blue-soft); text-decoration: underline; text-underline-offset: 3px; } .footer { background-color: var(--semantic-color-surface-neutral-bold); border-top: 1px solid var(--border-subtle); padding: clamp(48px, 6vw, 48px) 0 var(--primitive-spacing-4xl); } .footer__grid { display: grid; grid-template-columns: 1.5fr 0.7fr 0.7fr 2.3fr; gap: var(--primitive-spacing-5xl); margin-bottom: clamp(48px, 6vw, 72px); } .footer__brand { display: flex; flex-direction: column; gap: var(--primitive-spacing-lg); } .footer__subscribe { display: flex; flex-direction: column; } .footer__subscribe-label { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); color: var(--text-tertiary); margin-bottom: var(--primitive-spacing-2xl); } .footer__subscribe-desc { margin: 0 0 var(--primitive-spacing-2xl); font-family: var(--semantic-typography-body-xs-font-family); font-size: var(--semantic-typography-body-xs-font-size); font-weight: var(--semantic-typography-body-xs-font-weight); line-height: var(--semantic-typography-body-xs-line-height); letter-spacing: var(--semantic-typography-body-xs-letter-spacing); color: var(--text-secondary); } .footer__subscribe-row { display: flex; gap: var(--primitive-spacing-lg); align-items: stretch; } .footer__subscribe-message { margin: var(--primitive-spacing-2xl) 0 0; min-height: calc(var(--semantic-typography-body-xs-font-size) * var(--semantic-typography-body-xs-line-height)); font-family: var(--semantic-typography-body-xs-font-family); font-size: var(--semantic-typography-body-xs-font-size); line-height: var(--semantic-typography-body-xs-line-height); color: var(--text-tertiary); } .footer__subscribe-message--error { color: var(--semantic-color-text-secondary-default); } .footer__subscribe-message--success { color: var(--semantic-color-text-primary-default); } .footer__subscribe-row .dp-input { flex: 1; min-width: 0; max-width: none; font-size: var(--semantic-typography-body-xs-font-size); } .footer__logo { display: block; height: 37px; width: calc(37px * 139 / 29); margin-top: -6px; } .footer__logo-wordmark path { fill: var(--primitive-color-neutral-gray-100); } .footer__logo-triangle { fill: var(--primitive-color-brand-accent-500); } .footer__logo-square { fill: var(--primitive-color-brand-primary-500); } .footer__logo-circle { fill: var(--primitive-color-brand-secondary-500); } .footer__logo-arrow { fill: var(--primitive-color-neutral-gray-100); } .footer__tagline { font-family: var(--semantic-typography-body-xs-font-family); font-size: var(--semantic-typography-body-xs-font-size); font-weight: var(--semantic-typography-body-xs-font-weight); line-height: var(--semantic-typography-body-xs-line-height); letter-spacing: var(--semantic-typography-body-xs-letter-spacing); text-transform: var(--semantic-typography-body-xs-text-transform); color: var(--text-tertiary); max-width: 260px; } .footer__col-title { font-family: var(--semantic-typography-overline-sm-font-family); font-size: var(--semantic-typography-overline-sm-font-size); font-weight: var(--semantic-typography-overline-sm-font-weight); line-height: var(--semantic-typography-overline-sm-line-height); letter-spacing: var(--semantic-typography-overline-sm-letter-spacing); text-transform: var(--semantic-typography-overline-sm-text-transform); color: var(--text-tertiary); margin-bottom: var(--primitive-spacing-2xl); } .footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--primitive-spacing-lg); } .footer__link { font-family: var(--semantic-typography-body-xs-font-family); font-size: var(--semantic-typography-body-xs-font-size); font-weight: var(--semantic-typography-body-xs-font-weight); line-height: var(--semantic-typography-body-xs-line-height); color: var(--text-secondary); transition: color var(--primitive-duration-fast); } .footer__link:hover { color: var(--text-primary); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--primitive-spacing-3xl); border-top: 1px solid var(--border-subtle); } .footer__copy { font-size: var(--primitive-typography-size-xs); color: var(--text-tertiary); } .footer__legal { list-style: none; display: flex; gap: var(--primitive-spacing-2xl); font-size: var(--primitive-typography-size-xs); } .footer__legal .footer__link { color: var(--text-tertiary); font-size: var(--primitive-typography-size-xs); } .footer__social { display: flex; gap: var(--primitive-spacing-xl); } .footer__social a { display: flex; color: var(--text-tertiary); transition: color var(--primitive-duration-fast); } .footer__social a:hover { color: var(--text-secondary); } .footer__social svg { width: 18px; height: 18px; } /* ============================================= LIGHT THEME — only overrides not auto-handled by DS semantics ============================================= */ /* Logo SVG is black — invert for dark theme only */ /* Logo color comes from var(--semantic-color-contrast-dark) — flips automatically per theme */ /* Adaptive nav scheme — invert logo + link colors when a section with data-nav-scheme is behind the nav. Glass wrapper bg stays as-is. */ .nav--on-light .nav__logo { background-color: var(--primitive-color-neutral-gray-900); } .nav--on-light .nav__link { color: var(--primitive-color-neutral-gray-800); } .nav--on-light .nav__link:hover { color: var(--primitive-color-neutral-gray-950); } .nav--on-light .dp-button--nav-link { color: var(--primitive-color-neutral-gray-800); } .nav--on-light .dp-button--nav-link:hover { color: var(--primitive-color-neutral-gray-950); } /* On a light surface, primary button must be dark to stay legible */ .nav--on-light .dp-button--primary { background-color: var(--primitive-color-neutral-gray-900); color: var(--primitive-color-neutral-gray-50); border-color: var(--primitive-color-neutral-gray-900); } .nav--on-light .dp-button--primary:hover:not(:disabled) { background-color: var(--primitive-color-neutral-gray-950); color: var(--primitive-color-neutral-gray-50); border-color: var(--primitive-color-neutral-gray-950); } .nav--on-dark .nav__logo { background-color: var(--primitive-color-neutral-gray-50); } .nav--on-dark .nav__link { color: var(--primitive-color-neutral-gray-200); } .nav--on-dark .nav__link:hover { color: var(--primitive-color-neutral-gray-50); } .nav--on-dark .dp-button--nav-link { color: var(--primitive-color-neutral-gray-200); } .nav--on-dark .dp-button--nav-link:hover { color: var(--primitive-color-neutral-gray-50); } /* On a dark surface, primary button must be light to stay legible */ .nav--on-dark .dp-button--primary { background-color: var(--primitive-color-neutral-gray-50); color: var(--primitive-color-neutral-gray-900); border-color: var(--primitive-color-neutral-gray-50); } .nav--on-dark .dp-button--primary:hover:not(:disabled) { background-color: var(--primitive-color-neutral-gray-white); color: var(--primitive-color-neutral-gray-900); border-color: var(--primitive-color-neutral-gray-white); } /* Glows lighter in light theme (too heavy otherwise) */ [data-theme="light"] .bg__glow--a { background: radial-gradient(circle, color-mix(in srgb, var(--brand-red-fill) 7%, transparent) 0%, transparent 65%); } [data-theme="light"] .bg__glow--b { background: radial-gradient(circle, color-mix(in srgb, var(--brand-blue-fill) 8%, transparent) 0%, transparent 60%); } [data-theme="light"] .bg__glow--c { background: radial-gradient(circle, color-mix(in srgb, var(--brand-yellow-fill) 6%, transparent) 0%, transparent 60%); } /* Code windows stay dark in light theme (classic editor look) */ [data-theme="light"] .codewin { background: var(--primitive-color-neutral-gray-900); backdrop-filter: none; border-color: color-mix(in srgb, var(--primitive-color-neutral-gray-black) 10%, transparent); } [data-theme="light"] .codewin--primary { box-shadow: 0 16px 48px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 8%, transparent); } [data-theme="light"] .codewin--secondary { box-shadow: 0 8px 32px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 10%, transparent); } [data-theme="light"] .codewin::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--primitive-color-neutral-gray-white) 12%, transparent) 0%, transparent 40%, transparent 60%, color-mix(in srgb, var(--primitive-color-neutral-gray-white) 4%, transparent) 100%); -webkit-mask: linear-gradient(var(--primitive-color-neutral-gray-white) 0 0) content-box, linear-gradient(var(--primitive-color-neutral-gray-white) 0 0); mask: linear-gradient(var(--primitive-color-neutral-gray-white) 0 0) content-box, linear-gradient(var(--primitive-color-neutral-gray-white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Cards get a subtle dark tint on hover in light mode (opposite of dark's bright tint) */ [data-theme="light"] .card.is-revealed:hover { background: color-mix(in srgb, var(--semantic-color-contrast-light) 70%, transparent); } /* Dev variant panel */ .devpanel { position: fixed; bottom: 56px; right: 16px; z-index: 201; min-width: 220px; font-family: var(--primitive-typography-family-mono); font-size: 11px; color: var(--text-secondary); background: var(--panel-bg); border: 1px solid var(--border-subtle); border-radius: var(--primitive-radius-md); padding: 10px 12px; box-shadow: 0 8px 32px color-mix(in srgb, var(--primitive-color-neutral-gray-black) 40%, transparent); } .devpanel__header { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); } .devpanel__hint { opacity: 0.6; } .devpanel__rows { display: flex; flex-direction: column; gap: 6px; } .devpanel__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .devpanel__name { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; } .devpanel__select { font-family: inherit; font-size: 11px; background: var(--page-bg); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 3px 6px; cursor: pointer; } .devpanel__select:hover { border-color: var(--border-hover); } .devpanel__select--bg { opacity: 0.6; } .devpanel__select--bg:hover { opacity: 1; } /* ============================================= SCROLL REVEAL ============================================= */ .sr { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--primitive-easing-decelerate), transform 0.65s var(--primitive-easing-decelerate); } .sr.is-visible { opacity: 1; transform: translateY(0); } .sr--d1 { transition-delay: 0.08s; } .sr--d2 { transition-delay: 0.16s; } .sr--d3 { transition-delay: 0.24s; } /* ============================================= KEYFRAMES ============================================= */ @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { to { transform: scaleX(1); } } @keyframes blink { 50% { opacity: 0; } } /* ============================================= REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__content > *, .hero__viz, .sr, .cl { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } .hero__accent::after { animation: none !important; transform: scaleX(1) !important; } .cursor { animation: none !important; opacity: 1 !important; } .faq__a { transition: none !important; } } /* ============================================= RESPONSIVE ============================================= */ /* Hero centered headline: display-lg + nowrap in the section's