/* ============================================================================ HIREED AI — LANDING PAGE Built entirely on the shared monochrome token system (foundation/tokens.css), so it matches the dashboard, header and footer in every theme. One ink accent carries the identity; it inverts automatically between light and dark. No brand gradients, no colored glows — depth comes from surfaces and hairlines. Signature: monospaced (Geist Mono) data treatment for stats, tags and the product preview, plus a faint hairline grid in the hero. Display headings use Archivo with tight negative tracking, set in sentence case for a precise, modern editorial voice consistent with the app shell. ========================================================================= */ /* ── Local layout tokens (reference shared semantic tokens only) ─────────── */ .landing { --lp-maxw: 1200px; --lp-gutter: clamp(16px, 4vw, 32px); /* Section rhythm — the doubling rule */ --lp-section-y: clamp(64px, 9vw, 112px); --lp-block-gap: clamp(32px, 5vw, 56px); /* Surfaces tuned for the landing (still token-derived) */ --lp-tint: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); --lp-grid-line: var(--color-border-soft); } /* ── Reset / base ───────────────────────────────────────────────────────── */ .landing *, .landing *::before, .landing *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* `clip` prevents horizontal scrollbars WITHOUT creating a scroll container. `hidden` here turns into a scroll container, which silently breaks `position: sticky` on the showcase media (it would no longer pin to the viewport). `clip` keeps sticky working. */ overflow-x: clip; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .landing img, .landing svg { display: block; max-width: 100%; } /* ── Containers ─────────────────────────────────────────────────────────── */ .lp-wrap { width: 100%; max-width: var(--lp-maxw); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-wrap--narrow { max-width: 760px; } /* ── Section scaffolding ────────────────────────────────────────────────── */ .lp-section { padding-block: var(--lp-section-y); } .lp-section--hairline { border-block: 1px solid var(--color-border); } .lp-head { max-width: 620px; margin-bottom: var(--lp-block-gap); } .lp-head--center { margin-inline: auto; text-align: center; } /* ── Typography utilities ───────────────────────────────────────────────── */ .lp-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-4); } .lp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent); } .lp-head--center .lp-eyebrow { justify-content: center; } .lp-display { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; color: var(--color-text); } .lp-h2 { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; color: var(--color-text); } .lp-h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text); } .lp-lead { margin: var(--space-5) 0 0; max-width: 56ch; color: var(--color-text-soft); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; } .lp-head--center .lp-lead { margin-inline: auto; } /* ── Buttons — six states, token-based, matches header ──────────────────── */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 46px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring), filter var(--duration-fast) var(--ease-out); -webkit-user-select: none; user-select: none; } .lp-btn svg { width: 17px; height: 17px; } .lp-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } .lp-btn--primary:hover { transform: translateY(-1px); filter: brightness(0.96); box-shadow: var(--shadow-md); } .lp-btn--primary:active { transform: scale(0.985) translateY(0); filter: brightness(0.9); box-shadow: none; } .lp-btn--ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .lp-btn--ghost:hover { transform: translateY(-1px); border-color: var(--color-border-strong, var(--color-border)); background: var(--color-surface-soft); } .lp-btn--ghost:active { transform: scale(0.985) translateY(0); background: var(--color-surface-soft); } .lp-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .lp-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .lp-btn--block { width: 100%; } /* ── Scroll-reveal motion (hooks consumed by landing.js) ────────────────── Entrance variants driven by `[data-motion]`. landing.js (initMotion) normalizes every `[data-motion]` value to one of the five supported variants and toggles `.in-view` once the element enters the viewport, so the start states key off `[data-motion="…"]` and the end states off `[data-motion="…"].in-view`. The base element carries the transition (opacity / transform / clip-path / filter only — never layout-triggering properties), 0.6–0.7s with `--ease-out`. No-JS / progressive enhancement (Req 10.1): the hidden start states live inside `@media (scripting: enabled)` so that when scripting is unavailable the elements never receive the hidden state and render fully visible. The `.in-view` end states stay outside the media query as the universal, visible baseline. ─────────────────────────────────────────────────────────────────────── */ [data-motion] { transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out), clip-path 0.65s var(--ease-out), filter 0.65s var(--ease-out); will-change: opacity, transform; } /* Hidden start states — applied only when scripting can drive the reveal. Without JS this block is inert and content stays visible. */ @media (scripting: enabled) { /* Bare `data-motion` (pre-normalization) defaults to fade-up. */ [data-motion] { opacity: 0; transform: translateY(22px); } [data-motion="fade-up"] { opacity: 0; transform: translateY(22px); } [data-motion="fade"] { opacity: 0; transform: none; } [data-motion="scale-in"] { opacity: 0; transform: scale(0.96); } [data-motion="blur-up"] { opacity: 0; transform: translateY(16px); filter: blur(6px); } [data-motion="mask-up"] { opacity: 0; transform: translateY(16px); clip-path: inset(100% 0 0 0); } } /* End (revealed) states — the visible baseline for every variant. */ [data-motion].in-view { opacity: 1; transform: none; filter: none; } /* mask-up animates clip-path inset → inset(0); `none` is not animatable. */ [data-motion="mask-up"].in-view { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } /* ── Scroll-link motion (hooks consumed by landing.js initScrollLink) ────── Curated scroll-progress effects driven by `[data-scroll]`. landing.js writes the driving values once per animation frame and never touches a layout property: • `parallax` / `scale` → JS writes an inline `transform` directly (translateY / scale). The CSS here only supplies a transform-origin so `scale` grows from the centre, plus the reduced-motion neutral state. • `progress` → JS writes a `--progress` custom property in the range 0 → 1; the CSS below turns that scalar into a GPU-only reveal: a `mask-up` clip-path + quick fade that completes on first entry, plus a few-pixel parallax lift that keeps drifting as the element pins. Only transform / opacity / clip-path / custom-property are used — never a layout-triggering property (Req 5.8). No `transition` is declared, so the effect tracks the scroll position frame-for-frame. No-JS / progressive enhancement (Req 5.9): `--progress` defaults to 1 (the fully-revealed, settled state), so when scripting is unavailable and nothing writes the property, every `[data-scroll]` element renders in its final, visible state. The masked starting point (`--progress: 0`) is scoped to `@media (scripting: enabled)` so only the JS-driven path begins hidden. ─────────────────────────────────────────────────────────────────────── */ [data-scroll] { transform-origin: center; } [data-scroll="progress"] { --progress: 1; /* no-JS safe default: fully revealed / settled */ /* Reveal (mask + fade) completes early — by ~40% of travel — so the panel is fully legible while pinned; parallax (below) keeps the later travel. */ --reveal: clamp(0, calc(var(--progress) * 2.5), 1); opacity: var(--reveal); clip-path: inset(calc((1 - var(--reveal)) * 100%) 0 0 0); /* Settle-in parallax: a few pixels of lift across the full progress range. */ transform: translateY(calc((1 - var(--progress)) * 8px)); } /* Masked starting point — only when scripting can drive `--progress`. Without JS this block is inert and the element stays fully visible. */ @media (scripting: enabled) { [data-scroll="progress"] { --progress: 0; } } /* ════════════════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════════════════ */ .lp-hero { position: relative; padding-top: clamp(40px, 6vw, 72px); padding-bottom: var(--lp-section-y); overflow: hidden; } /* Signature: faint hairline grid (1px lines — allowed fine-grained use) */ .lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--lp-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--lp-grid-line) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 75%); opacity: 0.6; } .lp-hero__inner { position: relative; z-index: 1; } /* Centered hero copy (reference layout) */ .lp-hero__copy { max-width: 820px; margin-inline: auto; text-align: center; } .lp-hero__title { margin: var(--space-5) 0 0; font-size: clamp(36px, 6vw, 68px); } /* Emphasis: accent underline on key words (fine-grained decorative line) */ .lp-hero__sub { margin: var(--space-6) auto 0; max-width: 56ch; color: var(--color-text-soft); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; } .lp-hero__actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .lp-hero__note { margin-top: var(--space-5); display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); } .lp-hero__note svg { width: 14px; height: 14px; color: var(--color-success); } /* ── Hero tag (mono pill) ───────────────────────────────────────────────── */ .lp-tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full, 999px); background: var(--color-surface); box-shadow: var(--shadow-sm); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--color-text-soft); } .lp-tag__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-success); } /* ── Big centered preview image ─────────────────────────────────────────── */ .lp-hero__preview { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-width: 960px; margin: var(--lp-block-gap) auto 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ── Floating job cards (exact dashboard job-card component) ─────────────── */ .lp-hero__floats { display: none; } @media (min-width: 1100px) { .lp-hero__floats { display: block; pointer-events: none; } .lp-float { position: absolute; z-index: 2; width: 290px; box-shadow: var(--shadow-lg); } .lp-float--a { top: 188px; left: -8px; transform: rotate(-5deg); animation: lp-floaty-a 7s var(--ease-in-out) infinite; } .lp-float--b { top: 150px; right: -8px; transform: rotate(5deg); animation: lp-floaty-b 8s var(--ease-in-out) infinite; } } @keyframes lp-floaty-a { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-14px); } } @keyframes lp-floaty-b { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-18px); } } /* ── Job card — replicated from the dashboard grid component ────────────── */ .job-card { background: var(--s1); border: 1px solid var(--b1); border-radius: var(--rl, var(--radius-md)); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .job-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; } .job-card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .job-card-title-row { display: flex; align-items: center; gap: 10px; } .job-card-title { font-weight: 600; font-size: 15px; color: var(--t1); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .job-card-company { font-size: 13px; color: var(--t2); font-weight: 500; } .job-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--t3); } .job-card-date { font-family: var(--font-mono); font-size: 11px; color: var(--t3); } .job-card-top-actions { display: flex; flex-shrink: 0; align-items: flex-start; } .card-save-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--b2); background: var(--s2); color: var(--t3); } .card-save-btn.active { background: var(--color-accent-bg); border-color: transparent; color: var(--t1); } .job-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--b1); flex-wrap: wrap; } .job-card-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .job-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pill-salary { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--color-accent-bg); color: var(--t1); white-space: nowrap; } .pill-seniority { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; background: var(--s3); color: var(--t2); white-space: nowrap; opacity: 0.8; } .apply-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-accent); border: 1px solid var(--color-accent); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm); } /* ════════════════════════════════════════════════════════════════════════ SOURCES STRIP ════════════════════════════════════════════════════════════════════════ */ /* The sources strip is a connector band: keep it tight under the hero so the logos sit close to their heading instead of floating in a large gap. */ #sources { padding-block: var(--space-8); } #sources .lp-head { margin-bottom: var(--space-7); } /* Infinite marquee — seamless leftward scroll, pauses on hover */ .lp-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .lp-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; padding-block: var(--space-1); animation: lp-marquee var(--lp-marquee-duration, 60s) linear infinite; will-change: transform; } .lp-marquee:hover .lp-marquee__track { animation-play-state: paused; } @keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Logo carousel items — logo + brand name, classic sponsor-wall style */ .lp-logo-item { display: inline-flex; align-items: center; gap: var(--space-4); flex-shrink: 0; height: 68px; margin-inline-end: clamp(44px, 5vw, 76px); opacity: 0.5; transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .lp-logo-item:hover { opacity: 1; transform: translateY(-2px); } .lp-logo { height: 38px; width: auto; flex-shrink: 0; } .lp-logo--inline { display: inline-flex; align-items: center; color: var(--color-text); } .lp-logo--inline svg { height: 34px; width: auto; display: block; fill: currentColor; } .lp-logo-name { font-family: var(--font-heading); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--color-text); } /* Monochrome logos adapt to dark mode (requested as black, inverted to white) */ :root[data-theme="dark"] .lp-logo--img { filter: invert(1); } /* ════════════════════════════════════════════════════════════════════════ CAPABILITY ILLUSTRATIONS — mini-visuals reused by the .wyg showcase (rendered as `.wyg__viz lp-bars` / `lp-pipe` / `lp-kv`) ════════════════════════════════════════════════════════════════════════ */ /* ── Mini visual: relevance bars ────────────────────────────────────────── */ .lp-bars { margin-top: var(--space-6); display: grid; gap: var(--space-4); } .lp-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px var(--space-3); } .lp-bar__label { font-size: var(--text-sm); color: var(--color-text-soft); } .lp-bar__val { font-family: var(--font-mono); font-size: 12px; font-feature-settings: "tnum"; color: var(--color-text); } .lp-bar__track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; } /* Fill width is carried by --bar so it can animate from 0 on reveal. Without JS (scripting disabled) the bar renders at its target width. */ .lp-bar__fill { display: block; width: var(--bar, 0); height: 100%; border-radius: 999px; background: var(--color-accent); } .lp-bar--muted .lp-bar__fill { background: var(--color-border-strong, var(--color-muted)); } /* Reveal end-state — the visible baseline, never gated by scripting. */ .wyg__item.in-view .lp-bar__fill { width: var(--bar, 0); } /* Hidden start-state + transition only when scripting can drive the reveal. */ @media (scripting: enabled) { .wyg__item .lp-bar__fill { width: 0; transition: width 1s var(--ease-out) var(--bar-delay, 0s); } } /* ── Mini visual: application pipeline ──────────────────────────────────── */ .lp-pipe { margin-top: var(--space-6); } .lp-pipe__track { position: relative; display: flex; align-items: center; } /* Accent fill that travels along the track from the first node toward the "Interview" node (~66%). Drawn by default; animates from 0 with JS. */ .lp-pipe__fill { position: absolute; inset-inline-start: 7px; top: 50%; height: 2px; width: calc(66% - 7px); margin-top: -1px; background: var(--color-accent); border-radius: 999px; } .lp-pipe__node { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface); flex-shrink: 0; } .lp-pipe__node--1 { background: var(--status-2); border-color: var(--status-2); } .lp-pipe__node--2 { background: var(--status-3); border-color: var(--status-3); } .lp-pipe__node--3 { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg); } .lp-pipe__seg { flex: 1; height: 2px; background: var(--color-border); } .lp-pipe__labels { display: flex; justify-content: space-between; margin-top: var(--space-3); } .lp-pipe__labels span { font-size: 11px; color: var(--color-muted); letter-spacing: 0.01em; } @media (scripting: enabled) { /* Hidden start-states only — nodes collapsed, fill empty — when scripting can drive the reveal. The visible revealed end-states live outside. */ .wyg__item .lp-pipe__node { opacity: 0; transform: scale(0.4); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring); } .wyg__item .lp-pipe__fill { width: 0; transition: width 0.9s var(--ease-out) 0.15s; } } /* Reveal end-states — visible baseline, never gated by scripting. */ .wyg__item.in-view .lp-pipe__node { opacity: 1; transform: scale(1); } .wyg__item.in-view .lp-pipe__node--1 { transition-delay: 0.05s; } .wyg__item.in-view .lp-pipe__node--2 { transition-delay: 0.18s; } .wyg__item.in-view .lp-pipe__node--3 { transition-delay: 0.31s; } .wyg__item.in-view .lp-pipe__fill { width: calc(66% - 7px); } /* ── Mini visual: key/value spec rows ───────────────────────────────────── */ .lp-kv { margin-top: var(--space-6); display: grid; gap: var(--space-2); } .lp-kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 9px 12px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); background: var(--color-bg); } .lp-kv__k { font-size: var(--text-sm); color: var(--color-text-soft); } .lp-kv__v { font-family: var(--font-mono); font-size: 12px; font-feature-settings: "tnum"; color: var(--color-text); white-space: nowrap; } /* ════════════════════════════════════════════════════════════════════════ HOW IT WORKS — numbered sequence (order is meaningful) ════════════════════════════════════════════════════════════════════════ */ .lp-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: lp-step; } .lp-step { position: relative; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .lp-step__num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--color-muted); font-feature-settings: "tnum"; } .lp-step__title { margin: var(--space-4) 0 var(--space-2); } .lp-step__body { margin: 0; color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.7; } /* ════════════════════════════════════════════════════════════════════════ VISIBILITY — split layout + monochrome metric bars ════════════════════════════════════════════════════════════════════════ */ .lp-split { display: grid; grid-template-columns: 1fr; gap: var(--lp-block-gap); align-items: center; } .lp-checklist { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); } .lp-checklist li { position: relative; padding-left: 30px; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; } .lp-checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-soft); } .lp-checklist li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 8px; border: solid var(--color-text); border-width: 0 2px 2px 0; transform: rotate(45deg); } .lp-metrics { display: grid; gap: var(--space-4); } .metric-card { padding: clamp(20px, 3vw, 26px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .metric-value { display: block; font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-feature-settings: "tnum"; color: var(--color-text); } .metric-label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); } .metric-bar { margin-top: var(--space-4); height: 6px; border-radius: 999px; background: var(--color-surface-soft); overflow: hidden; } .metric-fill { height: 100%; border-radius: 999px; background: var(--color-accent); width: 0; transition: width 1.1s var(--ease-out); } /* ════════════════════════════════════════════════════════════════════════ TESTIMONIALS — infinite carousel of quote cards ════════════════════════════════════════════════════════════════════════ */ .lp-marquee--quotes .lp-marquee__track { align-items: stretch; animation-duration: var(--lp-marquee-duration, 75s); } .lp-quote { flex-shrink: 0; width: min(380px, 82vw); margin: 0 var(--space-4) 0 0; padding: clamp(22px, 2.4vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; white-space: normal; transition: border-color var(--duration-normal) var(--ease-out); } .lp-quote:hover { border-color: var(--color-border-strong, var(--color-border)); } .lp-quote p { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--color-text); text-wrap: pretty; } .lp-quote__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); } .lp-quote__avatar { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-surface-soft); } .lp-quote__who strong { display: block; font-size: var(--text-sm); color: var(--color-text); } .lp-quote__who span { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); } /* ════════════════════════════════════════════════════════════════════════ PRICING TEASER The pricing cards themselves are styled by the shared components/pricing-card.css (.pc-plan*). Only the homepage-specific "See full comparison" link belongs here. ════════════════════════════════════════════════════════════════════════ */ .lp-plans-more { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; } .lp-plans-more__note { margin: 0; font-size: var(--text-sm); color: var(--color-muted); } /* ════════════════════════════════════════════════════════════════════════ FAQ (markup hooks consumed by landing.js) ════════════════════════════════════════════════════════════════════════ */ .faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-2); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: clip; transition: border-color var(--duration-normal) var(--ease-out); } .faq-item:hover, .faq-item[data-open="true"] { border-color: var(--color-border-strong, var(--color-border)); } .faq-item__trigger { width: 100%; text-align: left; border: none; background: transparent; color: var(--color-text); padding: 20px 56px 20px 22px; font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; position: relative; } .faq-item__trigger::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--color-muted), var(--color-muted)) center / 12px 2px no-repeat, linear-gradient(var(--color-muted), var(--color-muted)) center / 2px 12px no-repeat; transition: transform var(--duration-normal) var(--ease-out); } .faq-item[data-open="true"] .faq-item__trigger::after { transform: rotate(90deg); background: linear-gradient(var(--color-text), var(--color-text)) center / 12px 2px no-repeat; } .faq-item__trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; border-radius: var(--radius-sm); } .faq-item__content { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-out); } .faq-item__content p { margin: 0; padding: 0 22px 20px; color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.7; } /* ════════════════════════════════════════════════════════════════════════ FINAL CTA ════════════════════════════════════════════════════════════════════════ */ .lp-cta { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(36px, 5vw, 64px); text-align: center; overflow: hidden; } .lp-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--lp-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--lp-grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(80% 120% at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(80% 120% at 50% 0%, #000 10%, transparent 70%); opacity: 0.5; } .lp-cta > * { position: relative; z-index: 1; } .lp-cta__title { margin: var(--space-3) auto 0; max-width: 18ch; } .lp-cta__actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } /* ════════════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 720px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .lp-split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 88px); } } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Force every motion variant to its final, visible state with no transition (Req 4.9). Covers transform / filter / clip-path so blur-up and mask-up also resolve cleanly. */ [data-motion], [data-motion].in-view { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } /* Scroll-link elements resolve to their final/static state. initScrollLink already early-returns under reduced motion, so no inline transform is written and these rules fully define the resting state (Req 5.9). The forced `--progress: 1` also overrides the `@media (scripting: enabled)` masked default so the panel never sits hidden. */ [data-scroll], [data-scroll="progress"] { --progress: 1; opacity: 1; transform: none; clip-path: none; will-change: auto; } .metric-fill { transition: none; } .lp-marquee__track { animation: none; } .lp-float { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════ MODERN SCROLL-DRIVEN ENHANCEMENT (progressive — native, no library) Where supported, the big preview gains a subtle scroll-linked rise/scale and the floating cards drift on scroll. JS reveal remains the universal baseline. ════════════════════════════════════════════════════════════════════════ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) { .lp-hero__preview { animation: lp-preview-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } @keyframes lp-preview-rise { from { transform: translateY(40px) scale(0.97); opacity: 0.85; } to { transform: translateY(0) scale(1); opacity: 1; } } .lp-float--a { animation: lp-floaty-a 7s var(--ease-in-out) infinite, lp-drift-up linear both; animation-timeline: auto, scroll(); animation-range: auto, 0 100%; } .lp-float--b { animation: lp-floaty-b 8s var(--ease-in-out) infinite, lp-drift-down linear both; animation-timeline: auto, scroll(); animation-range: auto, 0 100%; } @keyframes lp-drift-up { to { translate: 0 -60px; } } @keyframes lp-drift-down { to { translate: 0 -30px; } } } } /* ════════════════════════════════════════════════════════════════════════ LANDING-ONLY FIXED HEADER — bordered pill, transparent background Scoped with :has() so the shared header stays unchanged on every other page (dashboard, pricing). The pill is a hairline-bordered outline with no fill, no blur and no shadow — nothing behind it. Fixed to the viewport. ════════════════════════════════════════════════════════════════════════ */ @supports selector(:has(*)) { /* Fixed, fully transparent shell. Theme-scoped selectors are required to outrank header.css, which styles the shell via :root[data-theme] .site-header (higher specificity). */ :root:not([data-theme="dark"]) body:has(.landing) header.site-header, :root[data-theme="dark"] body:has(.landing) header.site-header { position: fixed; inset-inline: 0; top: 0; background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Offset page content so the fixed header never overlaps it */ body:has(.landing) main.landing { padding-block-start: 84px; } /* Liquid-glass pill — translucent, heavy blur + saturation */ body:has(.landing) .site-header__container { margin-block-start: 14px; min-height: 60px; padding-inline: clamp(14px, 2.4vw, 26px); border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); border-radius: var(--radius-full, 999px); background: color-mix(in srgb, var(--color-surface) 60%, transparent); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--shadow-lg); } /* Dark mode: deeper translucency, faint inner highlight */ html[data-theme="dark"] body:has(.landing) .site-header__container { border-color: rgba(255, 255, 255, 0.12); background: color-mix(in srgb, var(--color-surface) 48%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-lg); } @media (max-width: 640px) { body:has(.landing) .site-header__container { border-radius: var(--radius-lg); } body:has(.landing) main.landing { padding-block-start: 76px; } } } /* ════════════════════════════════════════════════════════════════════════ "WHAT YOU GET" SHOWCASE (.wyg) — pinned chat-screenshot pairing The signature moment: an editorial, asymmetric, scroll-synced layout that no three-column card grid can imitate. A sticky product screenshot on the left; a scrolling sequence of capability blocks on the right. • Layout (Req 6.7/6.9): single column with the media first below `lg`; a `1fr 1.05fr` two-column grid with a CSS-sticky media at `lg+`. The `lg` breakpoint is 980px, matching `.lp-split` in this file. • Frame (Req 7.x): token-built device/app chrome — hairline border, `--radius-lg`, `--shadow-lg`, a thin top bar with three monochrome dots (drawn with tokens, no gradient). Height is preserved so the layout never collapses before the screenshot asset is supplied; a CSS-drawn placeholder (`.is-empty` / `.wyg__frame--placeholder`, onerror-swapped) fills the gap. • Active state (Req 6.10 / 8.3): `.is-active` (set by initShowcase) is a quiet scroll-sync — the heading ink strengthens AND the index chip fills. State is conveyed by fill + weight + ink, never by color or motion alone. • Theme parity (Req 9.4): every theme-dependent color resolves from Theme_Tokens (`--color-border` / `--color-text` / `--color-accent` and the existing semantic tokens), so it swaps cleanly between light and dark. • Motion: the `.is-active` treatment is purely static (no transform / animation), so it is unaffected by Reduced_Motion. ════════════════════════════════════════════════════════════════════════ */ .wyg { /* ~96px pin offset — clears the fixed landing header. Built from tokens. */ --wyg-sticky-top: calc(var(--space-8) * 2 + var(--space-4)); --wyg-frame-min-height: 18rem; display: grid; grid-template-columns: 1fr; /* mobile: single column */ gap: var(--lp-block-gap); align-items: start; } /* Media first on mobile (explicit order keeps the screenshot above the list) */ .wyg__media { order: -1; margin: 0; } /* ── Frame: clean, borderless screenshot surface ───────────────────────── */ .wyg__frame { position: relative; min-height: var(--wyg-frame-min-height); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); overflow: hidden; } .wyg__chrome { min-height: var(--space-6); padding-inline: var(--space-3); display: flex; align-items: center; gap: var(--space-2); border-block-end: 1px solid var(--color-border); background: var(--color-surface-soft); } .wyg__chrome span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-border-strong); } /* ── Screenshot stage — four layered product shots; the active one fades in ── The frame holds a fixed-ratio stage so the layout never jumps as shots swap or while images load. landing.js (initShowcase) toggles `.is-active` on the shot matching the capability nearest the viewport centre (lg+ only). */ .wyg__stage { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--color-bg); } .wyg__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow); } .wyg__shot.is-active { opacity: 1; visibility: visible; transition: opacity var(--duration-slow) var(--ease-out); } /* ── Placeholder / empty state ─────────────────────────────────────────── The onerror handler swaps in `.is-empty`. The hairline frame + chrome bar persist, the screenshot is hidden, and the token-built caption is centered in the preserved height — no collapse, no broken-image icon. */ .wyg__placeholder { display: none; } .wyg__frame.is-empty .wyg__stage, .wyg__frame--placeholder .wyg__stage { display: none; } .wyg__frame.is-empty .wyg__placeholder, .wyg__frame--placeholder .wyg__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); } /* ── Capability rail (scroll-synced timeline) ─────────────────────────────── A vertical spine threads the capability cards together. An accent fill travels down the spine as the reader advances (`--wyg-progress`, written by landing.js → initWygRail), and the card nearest the viewport centre lifts to a surface (`.is-active`, written by initShowcase at lg+). State is carried by fill + ink + elevation — never color or motion alone. Progressive enhancement: the spine fill defaults to fully drawn; only when scripting is available does it start at 0 and animate as you scroll. */ .wyg__list { --wyg-progress: 1; position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); } @media (scripting: enabled) { .wyg__list { --wyg-progress: 0; } } /* Spine track + accent progress fill */ .wyg__list::before, .wyg__list::after { content: ""; position: absolute; inset-inline-start: 14px; top: var(--space-2); width: 2px; border-radius: 999px; } .wyg__list::before { bottom: var(--space-2); background: var(--color-border); } .wyg__list::after { height: calc(var(--wyg-progress) * (100% - var(--space-4))); background: var(--color-accent); transition: height var(--duration-slow) var(--ease-out); } .wyg__item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; } /* Node sits in the rail column, centred on the spine, aligned to the head */ .wyg__node { justify-self: center; margin-top: calc(var(--space-5) + 10px); width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--color-border-strong, var(--color-border)); background: var(--color-bg); z-index: 1; transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring); } /* Card — flat by default; lifts to a surface when active */ .wyg__card { padding: var(--space-5) clamp(18px, 2.2vw, 24px); border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent; transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .wyg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .wyg__index { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; font-feature-settings: "tnum"; color: var(--color-muted); transition: color var(--duration-normal) var(--ease-out); } .wyg__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-soft); transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-spring); } .wyg__icon svg { width: 18px; height: 18px; } /* Heading sits a touch soft by default so .is-active can strengthen the ink */ .wyg__title { margin: var(--space-4) 0 0; color: var(--color-text-soft); transition: color var(--duration-normal) var(--ease-out); } .wyg__body { margin: var(--space-3) 0 0; max-width: 52ch; color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.7; } .wyg__viz { margin-top: var(--space-5); } /* ── Chat mini-viz (item 01) — a question + assistant reply pairing ─────── */ .wyg__chat { display: grid; gap: var(--space-3); } .wyg__bubble { max-width: 82%; padding: 10px 14px; font-size: var(--text-sm); line-height: 1.45; border-radius: 16px; } .wyg__bubble--ask { justify-self: end; border-bottom-right-radius: 5px; background: var(--color-accent); color: var(--color-on-accent); } .wyg__bubble--reply { justify-self: start; border-bottom-left-radius: 5px; background: var(--color-surface-soft); border: 1px solid var(--color-border-soft); color: var(--color-text); } /* ── Active card (set by initShowcase) ────────────────────────────────── Four independent, non-color-only signals: the spine node FILLS and gains a focus ring (fill + shape), the icon badge inverts to ink (fill), the card lifts onto a hairline surface (elevation), and the index + heading ink strengthen (weight/ink). Nothing here depends on motion. */ .wyg__item.is-active .wyg__node { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-bg); } .wyg__item.is-active .wyg__card { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-md); } .wyg__item.is-active .wyg__icon { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); transform: translateY(-1px); } .wyg__item.is-active .wyg__index { color: var(--color-text); } .wyg__item.is-active .wyg__title { color: var(--color-text); } /* ── Showcase: two-column + sticky media at `lg+` (980px) ──────────────── Below this width the base rules above already stack the media first. */ @media (min-width: 980px) { .wyg { grid-template-columns: 1fr 1.05fr; } .wyg__media { order: 0; position: sticky; top: var(--wyg-sticky-top); } } /* ── Reduced motion ───────────────────────────────────────────────────── Active treatment is static; drop the short transitions so state resolves instantly without the spine fill or node animating. */ @media (prefers-reduced-motion: reduce) { .wyg__node, .wyg__card, .wyg__icon, .wyg__index, .wyg__title, .wyg__shot, .wyg__list::after { transition: none; } }