/* ============================================================== */ /* DESIGN TOKENS — HouseWhisper Design System */ /* Foundation Token Structural Pass (FST-2026-181-tk01) */ /* SME reviewed: Kenji Watanabe + Maya Torres, 2026-05-10 */ /* ============================================================== */ /* THREE-LAYER ARCHITECTURE ──────────────────────── Layer 1 — Static scale primitives (--space-16, --color-neutral-900, etc.) Value-encoded or role-encoded names. Transparent. Never change at runtime. Source of truth for all resolver tables. Layer 2 — Breakpoint resolver tokens (--screen-margin, --font-size-display-lg, etc.) Stable role names. Value determined by @media resolver table. Resolver maps viewport breakpoint → Layer 1 value. Layer 3 — Density resolver tokens (--flex{px}) Stable role names. Value determined by data-density attribute resolver table. Resolver maps density level (-1/0/+2/+3) → Layer 1 value. Components use Layer 2 and 3 tokens. Never hardcode Layer 1 values in components. Layer 1 values appear only in resolver tables and in the static scale definition. TOKEN NAMING RULES ────────────────── Value-encoded (number = value): --space-{px} e.g. --space-16: 16px --border-width-{px} e.g. --border-width-2: 2px --color-neutral-{N} e.g. --color-neutral-900 (higher = darker) Role-encoded (name = intent): --color-{role} e.g. --color-text-primary, --color-surface-card --color-{name} e.g. --color-violet (brand primitives) --{scale}-{size} e.g. --display-lg, --body-md (typography roles) --radius-{name} e.g. --radius-md, --radius-full --duration-{name}-ms unitless, e.g. --duration-short-ms: 150 --duration-{name} ready-to-use, e.g. --duration-short: calc(...) --ease-{name} e.g. --ease-standard --icon-size-{name} e.g. --icon-size-md --flex{px} density resolver tokens, e.g. --flex16 (Layer 3) TYPOGRAPHY SYSTEMS — two coexist: (PREFERRED) Role tokens: --display-lg, --body-md, etc. Each role is decomposed into --font-size-{role}, --line-height-{role}, --letter-spacing-{role}, plus a convenience shorthand alias. Breakpoint overrides change only the decomposed parts; shorthand updates automatically. (DEPRECATED) Raw size scale: --text-xs through --text-6xl Layer 1 primitives. DO NOT use in new components. Exist only for backward compatibility. An LLM reaching for --text-xl is using the wrong layer. SURFACE / FOOTER NOTE: --color-surface-dark and --color-surface-footer share the same hex value (#1B1B3A) by design. They are semantically distinct tokens — semantic distinction preserves the ability to change the footer independently if it ever needs its own value. */ /* ── @property registrations — must precede :root ─────────────── */ /* Register any token used in @keyframes for Safari 16.4+ interpolation. Without registration, custom properties do not interpolate in @keyframes — they jump from start to end value with no transition. Example: @property --scroll-progress { syntax: ''; inherits: false; initial-value: 0; } */ /* ============================================================== */ /* :ROOT — ALL LAYER 1 TOKENS + LAYER 2 RESOLVER TABLES */ /* ============================================================== */ :root { /* ──────────────────────────────────────────────────────────── */ /* SECTION 1: BRAND COLOR PRIMITIVES */ /* ──────────────────────────────────────────────────────────── */ /* Brand palette — primary (70% of creative output) */ --color-violet: #A328FF; /* Ion Violet — confidence, energy, CTAs */ --color-blue: #3597FF; /* Lift Blue — dependable, fresh */ --color-white: #FFFFFF; /* Brand palette — secondary (backgrounds, accents) */ --color-green: #16FEBE; /* Pulse Green — optimistic, progress */ --color-lavender: #CDA3F9; /* Partnerships, welcoming */ --color-soft-blue: #ACD0FB; /* ──────────────────────────────────────────────────────────── */ /* SECTION 2: NEUTRAL PALETTE (Layer 1 — value-encoded) */ /* ──────────────────────────────────────────────────────────── */ /* Numeric scale — higher number = darker. Use semantic aliases (--color-text-*, --color-surface-*) in components. Use neutrals directly only when no semantic alias applies. */ --color-neutral-900: #181C20; /* darkest — near-black text, dark UI elements */ --color-neutral-500: #626262; /* mid — secondary text */ --color-neutral-550: #6B7280; /* mid-light — form placeholder text (4.63:1 on white, WCAG AA) */ --color-neutral-400: #A6A8A9; /* light-mid — muted text, disabled */ --color-neutral-200: #EEEEEE; /* near-light — borders, dividers, subtle bg */ --color-neutral-100: #F7F9FF; /* near-white — cloud background, alt sections */ /* DEPRECATED — old metal names. Aliases to numeric scale. Use --color-neutral-{N} in all new work. Will be removed after full migration. */ --color-iron: var(--color-neutral-900); /* DEPRECATED — use --color-neutral-900 */ --color-steel: var(--color-neutral-500); /* DEPRECATED — use --color-neutral-500 */ --color-tin: var(--color-neutral-400); /* DEPRECATED — use --color-neutral-400 */ --color-mist: var(--color-neutral-200); /* DEPRECATED — use --color-neutral-200 */ --color-cloud: var(--color-neutral-100); /* DEPRECATED — use --color-neutral-100 */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 3: SEMANTIC TEXT COLORS */ /* ──────────────────────────────────────────────────────────── */ --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-500); --color-text-muted: var(--color-neutral-400); --color-text-placeholder: var(--color-neutral-550); /* form input placeholder hint text — 4.63:1 on white, WCAG AA */ --color-text-inverse: var(--color-white); --color-text-accent: var(--color-violet); /* Dark surface text token — WCAG AAA compliant on dark surfaces #D1A3FF on #1B1B3A = 7.74:1 — passes WCAG AA (4.5:1) and AAA (7:1) for normal text. Use for accent-colored interactive text (Tint + Text buttons) on dark/gradient surfaces. DO NOT use --color-violet (#A328FF) for normal-sized text on dark — 3.51:1 FAILS AA. */ --color-text-accent-on-dark: #D1A3FF; --color-violet-dark: #7B1FD4; /* darkened violet — CTA gradient end, link hover */ --color-violet-dark-rgb: 123 31 212; /* RGB channels for rgba() state layers — rgba(var(--color-violet-dark-rgb), 0.08) */ --color-violet-xdark: #6B0FD4; /* extra dark violet — hero gradient start */ --color-surface-hero-light: #E8EDFB; /* cool lavender-blue hero section tint */ --color-link: var(--color-violet); --color-link-hover: var(--color-violet-dark); --color-link-active: var(--color-violet-dark); /* active/current-position state for scroll-spied and active-page links */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 4: ON-* SURFACE PAIRINGS */ /* ──────────────────────────────────────────────────────────── */ /* Use on-* tokens for ALL text color decisions. Never pair --color-text-primary with a surface token without checking the on-* pair exists. These encode the WCAG-validated relationships. */ --color-text-on-surface-primary: var(--color-text-primary); /* text on white/primary bg */ --color-text-on-surface-secondary: var(--color-text-primary); /* text on cloud section */ --color-text-on-surface-card: var(--color-text-primary); /* text on card */ --color-text-on-surface-dark: var(--color-text-inverse); /* text on dark sections/footer */ --color-text-on-surface-brand: var(--color-text-inverse); /* text on violet CTA band */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 5: SURFACE PALETTE — 5 LEVELS + DARK SURFACES */ /* ──────────────────────────────────────────────────────────── */ /* Light surfaces */ --color-surface-primary: #FFFFFF; /* default page background */ --color-surface-secondary: #F7F9FF; /* alternate section background (cloud) */ --color-surface-card: #FDFEFF; /* card on primary surface; near-white cool hint, creates object separation without heavy contrast */ --color-surface-card-raised: #FFFFFF; /* featured/elevated card; pure white + stronger shadow reads as "closer to user" */ --color-surface-overlay: rgba(27, 27, 58, 0.4); /* modal/drawer backdrop; derived from --color-surface-dark RGB for palette coherence */ --color-surface-nav-overlay: var(--color-surface-primary); /* mobile nav panel background. DISTINCT from --color-surface-overlay (which is the dark modal scrim). Dev fallback = white. Final value per Maya OD1: white → keep var(--color-surface-primary) dark → change to var(--color-surface-dark) */ /* Dark surfaces */ --color-surface-dark: #1B1B3A; /* primary dark section background */ --color-surface-header: #131328; /* navigation bar (dark scroll state) */ --color-surface-footer: #1B1B3A; /* footer — intentionally same value as surface-dark; semantically distinct tokens, may diverge independently */ --color-surface-brand: #A328FF; /* violet CTA band surface */ /* Surface header — white for default (pre-scroll) state */ --color-surface-header-light: #FFFFFF; --color-surface-header-scrolled: rgba(255, 255, 255, 0.95); /* ──────────────────────────────────────────────────────────── */ /* SECTION 6: SURFACE INTERACTION STATES */ /* ──────────────────────────────────────────────────────────── */ /* State tokens encode hover/pressed behavior. Use these instead of composing --state-hover opacity manually — that composition is the system's job, not the component's. */ --color-surface-card-hover: #F8FAFE; /* subtle shift from --color-surface-card for hovered card */ --color-surface-secondary-hover: #F0F4FF; /* hovered row/item on secondary surface */ --color-surface-avatar-fallback: var(--color-neutral-200); /* background when no avatar image exists */ /* Admin surfaces — tool context, not storefront */ --color-surface-admin: #F6F7FE; /* admin page background; white inputs read as figure */ --color-surface-admin-sidebar: #EFF1FA; /* sidebar zone distinction within admin layout */ --color-surface-dropdown: #FFFFFF; /* transient dropdown panel surface — semantically distinct from --color-surface-primary for independent theming */ --color-surface-interactive-selected: var(--color-violet-200); /* toolbar/toggle button aria-pressed=true state */ --color-surface-code: #F0F2F5; /* code/machine data blocks — #181C20 on #F0F2F5 = 17:1 AAA */ /* Public metadata tag tokens — non-interactive website tags from HW DS Tag v.1 */ --color-tag-bg: #F5F7FD; /* Figma Tag v.1 container fill */ --color-tag-text: #64625E; /* Figma Tag v.1 label text; 5.66:1 on --color-tag-bg */ /* Chip tokens — hw-admin-chip atom (multi_select, tag_picker) */ --color-chip-bg: rgba(123, 31, 212, 0.10); /* violet tint — #181C20 on computed ~#EDE5FA ≈ 14:1 AAA */ --color-chip-border: rgba(123, 31, 212, 0.25); /* translucent violet border */ --color-chip-text: var(--color-text-primary); /* semantic alias — enables chip-specific text color changes */ --radius-chip: var(--radius-full); /* pill shape, distinguishes chips from rectangular inputs */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 7: BORDER COLORS */ /* ──────────────────────────────────────────────────────────── */ --color-border-default: var(--color-neutral-200); /* standard card outlines, section dividers */ --color-border-form-default: #DDE1F1; /* form input resting border — cool gray, non-interactive signal */ --color-border-form-private: rgba(var(--color-violet-dark-rgb), 0.5); /* private/gated form field border — violet at 50% opacity; TR-2026-001 approved */ --color-border-subtle: var(--color-neutral-100); /* very light separation, barely visible */ --color-border-interactive: var(--color-violet-dark); /* interactive element hover/active borders */ --color-border-disabled: var(--color-neutral-200); /* disabled state borders (same as default; named semantically so behavior is explicit) */ --color-border-danger: var(--color-error); /* error state borders — passes 3:1 on white for WCAG 1.4.11 graphical objects */ --color-border-warning: #B86800; /* WCAG-compliant amber for warning borders/icons on light surfaces (4.7:1 on white ✓) */ --color-border-card-admin: #9AA3BF; /* card boundaries on admin bg (#F6F7FE); #9AA3BF on #F6F7FE ≈ 3.1:1, passes WCAG 1.4.11 */ --color-toggle-track-off: #767676; /* toggle unchecked track — 4.59:1 on #FFFFFF, passes WCAG 1.4.11 (3:1). PROVISIONAL — Maya OD pending */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 8: FUNCTIONAL / STATE COLORS */ /* ──────────────────────────────────────────────────────────── */ /* Form validation states */ --color-error: #D92D20; /* error text + invalid border — 4.7:1 on white */ --color-error-border: #D92D20; /* error border — same value as error, semantic alias */ --color-error-focus: rgba(217, 45, 32, 0.12); /* error input focus ring */ --color-success: #067647; /* success text — 4.9:1 on white */ --color-success-border: #17B26A; /* valid border — lighter than text */ --color-success-focus: rgba(6, 118, 71, 0.12); /* success input focus ring */ --color-star: #F59E0B; /* star rating fill */ /* Content freshness signals — DEC-025 WARNING: Use role-named tokens below for new work. --color-background-warning and --color-background-critical are the canonical names. */ /* Amber: backgrounds and dark surfaces ONLY. #FFB700 fails WCAG 1.4.11 (3:1) on white — cannot be used as text or border color on light surfaces. Warm temperature is intentional contrast to cool brand palette. Use as large solid blocks only, not inline UI elements. For amber foreground: use --color-chart-4 (#B86800, 4.7:1 on white). */ --color-background-warning: #FFB700; /* Danger/critical: backgrounds and dark surfaces ONLY. #D93025 passes 4.5:1 on white for text but this is reserved for background use in staleness indicators. Warm temperature is intentional. Use as large solid blocks only. */ --color-background-critical: #D93025; /* WCAG-compliant graphical object variants */ /* --color-border-danger: see Section 7 — passes 3:1 on white for borders/icons */ --color-text-on-warning: #1F2937; /* 13.5:1 on --color-background-warning (#FFB700) — required because #FFB700 fails WCAG 1.4.11 for graphical objects */ --color-text-warning: #B86800; /* warning foreground text/icons on light surfaces (4.7:1 on white ✓) same hex as --color-border-warning; separate token — roles may diverge */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 9: TONAL TINT SCALES */ /* ──────────────────────────────────────────────────────────── */ /* Background/surface tints only. Text on these surfaces must use a foreground token that passes 3:1 on the composed background. */ /* Lavender tint — backgrounds only */ --color-lavender-100: rgba(205, 163, 249, 0.15); /* soft lavender section tint */ /* Violet tint scale — backgrounds only */ --color-violet-50: rgba(163, 40, 255, 0.04); --color-violet-100: rgba(163, 40, 255, 0.08); --color-violet-200: rgba(163, 40, 255, 0.12); --color-violet-300: rgba(163, 40, 255, 0.20); --color-violet-400: rgba(163, 40, 255, 0.30); /* hero bloom gradient stop */ /* Green tint scale — backgrounds only. --color-green (#16FEBE) fails 3:1 on white — cannot be used as text or border color on light surfaces. Use --color-chart-3 (Teal DV, #0B8A6E, 5.5:1) for foreground on these tint backgrounds. */ --color-green-50: rgba(22, 254, 190, 0.04); --color-green-100: rgba(22, 254, 190, 0.08); --color-green-200: rgba(22, 254, 190, 0.12); --color-green-300: rgba(22, 254, 190, 0.20); /* Amber tint scale — backgrounds only. --color-background-warning (#FFB700) fails 3:1 on white. Use --color-chart-4 (#B86800, 4.7:1) for amber text/icons on light surfaces. */ --color-amber-50: rgba(255, 183, 0, 0.04); --color-amber-100: rgba(255, 183, 0, 0.10); --color-amber-200: rgba(255, 183, 0, 0.16); --color-amber-300: rgba(255, 183, 0, 0.24); /* Danger tint scale — expired content backgrounds */ --color-danger-50: rgba(217, 48, 37, 0.04); --color-danger-100: rgba(217, 48, 37, 0.10); --color-danger-200: rgba(217, 48, 37, 0.16); --color-danger-300: rgba(217, 48, 37, 0.24); /* ──────────────────────────────────────────────────────────── */ /* SECTION 10: GRADIENTS */ /* ──────────────────────────────────────────────────────────── */ /* Gradients are recipes using constituent color tokens. Angles and stop percentages are hardcoded — only color values reference tokens. WARNING: if any referenced color token is undefined, the entire gradient silently becomes invalid and disappears — no console error. */ --gradient-brand: linear-gradient(224deg, var(--color-green) 0%, var(--color-blue) 49%, var(--color-violet) 94%); --gradient-glass-border: linear-gradient(146deg, var(--color-green) 0%, var(--color-blue) 24%, var(--color-violet) 100%); --gradient-soft: linear-gradient(179deg, var(--color-white) 0.87%, var(--color-soft-blue) 34.57%, var(--color-lavender) 69.95%, var(--color-white) 113.2%); --gradient-dark: linear-gradient(180deg, var(--color-surface-header) 0%, var(--color-surface-dark) 100%); --gradient-cta-band: linear-gradient(180deg, var(--color-violet) 0%, var(--color-violet-dark) 100%); /* Light hero — two layers; compose in CSS as stacked backgrounds */ --gradient-hero-light-base: linear-gradient(180deg, var(--color-surface-hero-light) 0%, var(--color-white) 91%); --gradient-hero-light-bloom: radial-gradient(ellipse at 62% 75%, var(--color-violet-400) 0%, transparent 55%); /* Additional hero gradients */ --gradient-hero-bg: linear-gradient(145deg, var(--color-violet-xdark) 0%, var(--color-violet) 45%, var(--color-blue) 100%); --gradient-hero-overlay: linear-gradient(180deg, var(--color-violet-200) 0%, transparent 60%); --gradient-section-soft-purple: linear-gradient(180deg, var(--color-neutral-100) 0%, var(--color-lavender-100) 100%); /* ──────────────────────────────────────────────────────────── */ /* SECTION 11: TYPOGRAPHY — FONT FAMILY & WEIGHT PRIMITIVES */ /* ──────────────────────────────────────────────────────────── */ --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Weight primitives (mapped to brand guidelines roles) */ --font-weight-thin: 100; --font-weight-light: 300; /* headlines on clean layouts */ --font-weight-regular: 400; /* body text */ --font-weight-medium: 500; /* subheads, nav */ --font-weight-semibold: 600; /* CTA buttons, labels */ --font-weight-bold: 700; /* editorial subheads, impact */ --font-weight-black: 900; /* display headlines, hero */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 12: TYPOGRAPHY ROLES — DECOMPOSED (PREFERRED) */ /* ──────────────────────────────────────────────────────────── */ /* Tokens cover: font-size, line-height, letter-spacing per role. Tokens do NOT cover: paragraph spacing, list-item spacing, indent — these are contextual behaviors applied via CSS classes (.hw-prose), not global tokens. They belong in the template/content PRD, not here. Breakpoint overrides live in a @media block within :root. The shorthand aliases update automatically — no duplication needed. */ /* ── Display — hero headlines, maximum impact ── Material 3 baseline: 57/64, 45/52, 36/44. HW adjustment: display-sm is 38/44.5 to match the homepage Figma hero. */ --font-size-display-lg: 3.5625rem; /* 57px */ --line-height-display-lg: 1.122807; /* 64px */ --letter-spacing-display-lg: 0; --display-lg: var(--font-weight-bold) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-family); --font-size-display-md: 2.8125rem; /* 45px */ --line-height-display-md: 1.155556; /* 52px */ --letter-spacing-display-md: 0; --display-md: var(--font-weight-bold) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family); --font-size-display-sm: 2.375rem; /* 38px */ --line-height-display-sm: 1.171875; /* 44.5px */ --letter-spacing-display-sm: 0; --display-sm: var(--font-weight-bold) var(--font-size-display-sm)/var(--line-height-display-sm) var(--font-family); /* ── Pull Quote — editorial anchor, 3rem (48px) desktop. ~2.7x body-lg. Strong display contrast — pull quote is a compositional anchor. */ --font-size-display-pullquote: 3rem; /* 48px desktop */ --line-height-display-pullquote: 1.4; --letter-spacing-display-pullquote: 0; --display-pullquote: var(--font-weight-regular) var(--font-size-display-pullquote)/var(--line-height-display-pullquote) var(--font-family); /* ── Headline — section titles. Material 3 baseline: 32/40, 28/36, 24/32. ── */ --font-size-headline-lg: 2rem; /* 32px */ --line-height-headline-lg: 1.25; /* 40px */ --letter-spacing-headline-lg: 0; --headline-lg: var(--font-weight-bold) var(--font-size-headline-lg)/var(--line-height-headline-lg) var(--font-family); --font-size-headline-md: 1.75rem; /* 28px */ --line-height-headline-md: 1.285714; /* 36px */ --letter-spacing-headline-md: 0; --headline-md: var(--font-weight-bold) var(--font-size-headline-md)/var(--line-height-headline-md) var(--font-family); --font-size-headline-sm: 1.5rem; /* 24px */ --line-height-headline-sm: 1.333333; /* 32px */ --letter-spacing-headline-sm: 0; --headline-sm: var(--font-weight-bold) var(--font-size-headline-sm)/var(--line-height-headline-sm) var(--font-family); /* ── Title — card titles, subsection headers. Material 3 baseline: 22/28, 16/24, 14/20. HW adjustment: title-md is 18/27 for compact trust/press copy in Figma. ── */ --font-size-title-lg: 1.375rem; /* 22px */ --line-height-title-lg: 1.272727; /* 28px */ --letter-spacing-title-lg: 0; --title-lg: var(--font-weight-medium) var(--font-size-title-lg)/var(--line-height-title-lg) var(--font-family); --font-size-title-md: 1.125rem; /* 18px */ --line-height-title-md: 1.5; /* 27px */ --letter-spacing-title-md: 0; --title-md: var(--font-weight-medium) var(--font-size-title-md)/var(--line-height-title-md) var(--font-family); --font-size-title-sm: 0.875rem; /* 14px */ --line-height-title-sm: 1.428571; /* 20px */ --letter-spacing-title-sm: 0; --title-sm: var(--font-weight-medium) var(--font-size-title-sm)/var(--line-height-title-sm) var(--font-family); /* ── Body — paragraph text. Material 3 baseline: 16/24, 14/20, 12/16. HW adjustment: body-lg is 18/25 to match the homepage lead copy. ── */ --font-size-body-lg: 1.125rem; /* 18px */ --line-height-body-lg: 1.388889; /* 25px */ --letter-spacing-body-lg: 0; --body-lg: var(--font-weight-regular) var(--font-size-body-lg)/var(--line-height-body-lg) var(--font-family); --font-size-body-md: 1rem; /* 16px */ --line-height-body-md: 1.5; /* 24px */ --letter-spacing-body-md: 0; --body-md: var(--font-weight-regular) var(--font-size-body-md)/var(--line-height-body-md) var(--font-family); --font-size-body-sm: 0.875rem; /* 14px */ --line-height-body-sm: 1.428571; /* 20px */ --letter-spacing-body-sm: 0; --body-sm: var(--font-weight-regular) var(--font-size-body-sm)/var(--line-height-body-sm) var(--font-family); /* ── Label — buttons, form labels, metadata. Material 3 baseline: 14/20, 12/16, 11/16. HW adjustment: label-lg uses 14/21 where Figma testimonial labels are stacked. ── */ --font-size-label-lg: 0.875rem; /* 14px */ --line-height-label-lg: 1.5; /* 21px */ --letter-spacing-label-lg: 0; --label-lg: var(--font-weight-medium) var(--font-size-label-lg)/var(--line-height-label-lg) var(--font-family); --font-size-label-md: 0.75rem; /* 12px */ --line-height-label-md: 1.333333; /* 16px */ --letter-spacing-label-md: 0; --label-md: var(--font-weight-medium) var(--font-size-label-md)/var(--line-height-label-md) var(--font-family); --font-size-label-sm: 0.6875rem; /* 11px */ --line-height-label-sm: 1.454545; /* 16px */ --letter-spacing-label-sm: 0.04em; --label-sm: var(--font-weight-medium) var(--font-size-label-sm)/var(--line-height-label-sm) var(--font-family); /* Credential line — hw-person-card (Maya v4: purple, uppercase, tracked, semi-bold) */ --text-credential-size: var(--font-size-label-sm); --text-credential-weight: var(--font-weight-semibold); --text-credential-color: var(--color-violet); --text-credential-transform: uppercase; --text-credential-tracking: 0.08em; /* ──────────────────────────────────────────────────────────── */ /* SECTION 13: TYPOGRAPHY ROLES — RAW SIZE SCALE (DEPRECATED) */ /* ──────────────────────────────────────────────────────────── */ /* DEPRECATED raw size scale — DO NOT USE IN NEW COMPONENTS. These are Layer 1 primitives, not Layer 2 resolver tokens. Their names imply roles they do not fulfil. Any LLM building a component that reaches for --text-xl is using the wrong layer. Use --display-*, --headline-*, --body-*, --label-* roles above instead. Retained only for backward compatibility with legacy components. */ --text-2xs: 0.6875rem; /* 11px — axis ticks in dense charts only */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 2.75rem; /* 44px */ --text-5xl: 3.25rem; /* 52px */ --text-6xl: 4rem; /* 64px */ /* Line height primitives (used by typography utility classes) */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.75; /* ──────────────────────────────────────────────────────────── */ /* SECTION 14: TEXT TREATMENT TOKENS */ /* ──────────────────────────────────────────────────────────── */ /* Use in typography utility classes. Prevents scattered hardcoded string values. */ --text-transform-uppercase: uppercase; /* badges, category chips, section eyebrows */ --text-transform-capitalize: capitalize; /* title-case styling */ --text-transform-none: none; /* explicit reset */ --text-decoration-underline: underline; /* links, interactive text */ --text-decoration-line-through: line-through; /* pricing strikethrough, completed states */ --text-decoration-none: none; /* explicit reset (link hover that removes underline) */ --font-variant-small-caps: small-caps; /* editorial subheadings, byline treatments */ --font-variant-none: normal; /* explicit reset */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 15: DATA VISUALIZATION TYPOGRAPHY */ /* ──────────────────────────────────────────────────────────── */ /* DATA VISUALIZATION ONLY — SVG-rendered via Recharts. Not interchangeable with HTML/CSS type roles. Consulted: Maya Torres — 8 roles, revised weights/tnum matrix. */ /* Axis tick labels — recede behind data. tnum: YES */ --chart-type-axis-tick: 400 var(--text-2xs)/1.2 var(--font-family); /* Axis dimension title — "Revenue ($)", "Month". tnum: NO */ --chart-type-axis-title: 500 var(--text-xs)/1.3 var(--font-family); /* Value printed on/above a bar or point. CONDITIONAL — see DV Typography Spec. tnum: YES */ --chart-type-data-label: 600 var(--text-2xs)/1.2 var(--font-family); /* Series name in legend row. tnum: NO */ --chart-type-legend: 400 var(--text-sm)/1.4 var(--font-family); /* Dimension being hovered in tooltip. tnum: NO */ --chart-type-tooltip-title: 600 var(--text-sm)/1.2 var(--font-family); /* Metric name in multi-series tooltip. tnum: NO */ --chart-type-tooltip-label: 400 var(--text-2xs)/1.4 var(--font-family); /* The number — answer to the hover question. Weight 700: must dominate. tnum: YES */ --chart-type-tooltip-value: 700 var(--text-sm)/1.4 var(--font-family); /* Period-over-period delta. tnum: NO. Color is semantic (green/red). */ --chart-type-tooltip-delta: 500 var(--text-2xs)/1.2 var(--font-family); /* Tabular numbers — apply both properties; SVG environments may support one but not both */ --chart-font-feature-tnum: "tnum" 1; /* ──────────────────────────────────────────────────────────── */ /* SECTION 16: MOTION — DURATION SCALE */ /* ──────────────────────────────────────────────────────────── */ /* @property note: If any custom property needs to animate via @keyframes (e.g., a scroll-progress counter), register it with @property for Safari 16.4+ compatibility. Without registration, custom properties do not interpolate in @keyframes — they jump from start to end value. Example: @property --scroll-progress { syntax: ''; inherits: false; initial-value: 0; } prefers-reduced-motion note: Every component with motion MUST include a @media (prefers-reduced-motion: reduce) override that removes transform from transitions and shortens or removes durations. This is non-negotiable for accessibility. This is a CSS pattern requirement, not a token — tokens cannot encode the conditional removal of transition properties. */ /* ── Functional UI durations — Priya-reviewed ── */ /* Unitless (for calc() arithmetic) */ --duration-xshort-ms: 75; /* instant feedback: checkbox, toggle — gap between 0 and 150ms */ --duration-short-ms: 150; /* micro-interactions: hover state layers */ --duration-medium-ms: 250; /* standard transitions: most UI motion */ --duration-long-ms: 400; /* enter/expand: accordion, modal entry */ --duration-xlong-ms: 500; /* upper bound for functional UI motion — 400→600 is too large a step */ /* Ready-to-use (attach directly to transition/animation) */ --duration-xshort: calc(var(--duration-xshort-ms) * 1ms); --duration-short: calc(var(--duration-short-ms) * 1ms); --duration-medium: calc(var(--duration-medium-ms) * 1ms); --duration-long: calc(var(--duration-long-ms) * 1ms); --duration-xlong: calc(var(--duration-xlong-ms) * 1ms); /* ── Narrative durations — GSAP scroll scenes ── Without these, Kai hardcodes duration: 2. These are Layer 1 primitives. GSAP reference: getComputedStyle(root).getPropertyValue('--duration-scene-medium-ms') / 1000 */ --duration-scene-short-ms: 1000; /* quick scene transition */ --duration-scene-medium-ms: 1500; /* standard scroll scene */ --duration-scene-long-ms: 2000; /* complex choreography */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 17: MOTION — DELAY TOKENS */ /* ──────────────────────────────────────────────────────────── */ /* Without these, stagger animations and tooltip delays are hardcoded */ --delay-short-ms: 100; /* list item stagger, sequential entrance */ --delay-medium-ms: 300; /* tooltip appear-on-hover intent delay */ --delay-long-ms: 500; /* complex popover, preview card hover delay */ --delay-short: calc(var(--delay-short-ms) * 1ms); --delay-medium: calc(var(--delay-medium-ms) * 1ms); --delay-long: calc(var(--delay-long-ms) * 1ms); /* ──────────────────────────────────────────────────────────── */ /* SECTION 18: MOTION — ANIMATION PROPERTY TOKENS */ /* ──────────────────────────────────────────────────────────── */ /* Prevents hardcoded 'infinite', 'forwards' in keyframe declarations */ --motion-iteration-infinite: infinite; --motion-fill-forwards: forwards; /* ──────────────────────────────────────────────────────────── */ /* SECTION 19: MOTION — EASING CURVES (M3 corrected values) */ /* ──────────────────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* general movement, stays on screen */ --ease-standard-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* elements entering (ease out) */ --ease-standard-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1); /* elements exiting (ease in) */ --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* important transitions */ --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0); /* large elements entering */ --ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15); /* large elements exiting */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 20: MOTION — COMPOSED TRANSITION SHORTHANDS */ /* ──────────────────────────────────────────────────────────── */ /* DEPRECATED — convenience aliases only. Build transitions in CSS from primitives: transition: opacity var(--duration-short) var(--ease-standard); Do not use these in new components. Will be removed after component migration. USAGE TRAP: `transition: var(--transition-fast)` without a property name = `transition-property: all` = layout/paint jank. Always specify the property: `transition: opacity var(--transition-fast)`. */ --transition-fast: var(--duration-short) var(--ease-standard); --transition-base: var(--duration-medium) var(--ease-standard); --transition-slow: var(--duration-long) var(--ease-standard); --transition-enter: var(--duration-long) var(--ease-emphasized-decelerate); --transition-exit: var(--duration-medium) var(--ease-emphasized-accelerate); /* ──────────────────────────────────────────────────────────── */ /* SECTION 21: SPACING SCALE (Layer 1 — value-encoded) */ /* ──────────────────────────────────────────────────────────── */ /* Scale philosophy: - Page composition snaps to an 8px grid. - Static primitives still include 2px and 4px correction steps for borders, optical alignment, type baseline snapping, paragraph spacing, and line-height decisions where pure 8px rhythm is too coarse. - The post-8px scale keeps 4px baseline correction stops through 64px for typography rhythm, component internals, and optical alignment. - Larger page-composition values use broader jumps, with 72px and 88px kept as deliberate half-steps around common section rhythm. - Semantic/density-responsive spacing lives in flex tokens. Use semantic aliases (--section-padding-y etc.) for layout sections. Use primitives directly only when a specific pixel value is the right answer. */ --space-0: 0; --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-52: 52px; --space-56: 56px; --space-60: 60px; --space-64: 64px; --space-72: 72px; --space-80: 80px; --space-88: 88px; --space-96: 96px; --space-120: 120px; --space-160: 160px; /* NOTE: Old indexed names (--space-1 through --space-15) have been removed. All spacing references in _components.css have been updated to pixel-value names. Preview files (housewhisper-design-system/preview/) may reference old names — they will silently fall back to unset until those files are updated. This is an accepted trade-off per PRD Section 11 / C16. See scaffold gap: preview file spacing migration not specified in PRD. */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 22: SEMANTIC SPACING ALIASES (Layer 2) */ /* ──────────────────────────────────────────────────────────── */ --baseline-grid: var(--space-4); --paragraph-gap-sm: var(--space-8); --paragraph-gap-md: var(--space-12); --paragraph-gap-lg: var(--space-16); --section-padding-y: var(--space-96); --section-padding-y-sm: var(--space-64); --content-gap: var(--space-40); /* Compatibility alias. New layout work should use --screen-margin directly. */ --section-padding-x: var(--screen-margin); /* Density defaults. Components should consume --flex* tokens when their spacing should respond to density; use --space-* primitives for fixed optical values. */ --flex0: var(--space-0); --flex2: var(--space-2); --flex4: var(--space-4); --flex8: var(--space-8); --flex12: var(--space-12); --flex16: var(--space-16); --flex20: var(--space-20); --flex24: var(--space-24); --flex32: var(--space-32); --flex40: var(--space-40); --flex48: var(--space-48); --flex56: var(--space-56); --flex64: var(--space-64); --flex80: var(--space-80); --flex96: var(--space-96); --flex120: var(--space-120); --flex160: var(--space-160); /* ──────────────────────────────────────────────────────────── */ /* SECTION 23: BORDER WIDTHS (Layer 1 + Layer 2 semantic) */ /* ──────────────────────────────────────────────────────────── */ /* Primitives — value-encoded (number = pixel value) */ --border-width-0: 0px; /* removes a border */ --border-width-1: 1px; /* standard */ --border-width-2: 2px; /* emphasis */ --border-width-4: 4px; /* high-emphasis active indicators */ /* Semantic aliases — role-named (Layer 2) */ --border-width-divider: var(--border-width-1); /* horizontal rules, content separators */ --border-width-control: var(--border-width-1); /* inputs, buttons, card outlines */ --border-width-focus: var(--border-width-2); /* focus rings on interactive elements */ --border-width-indicator: var(--border-width-4); /* active state tabs, navigation */ /* Compound border shorthand aliases — encode the bordered=interactive system rule */ --border-interactive-default: var(--border-width-1) solid var(--color-violet-dark); /* bordered = interactive: non-button interactive elements */ --border-static-default: none; /* no border = static: display-only elements */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 24: BORDER RADIUS */ /* ──────────────────────────────────────────────────────────── */ --radius-xxs: 2px; /* smallest radius — high-density admin/tool UI; below --radius-xs (4px) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* guarantees pill/capsule shape at any element height. NOT 100px — a 100px value fails for elements taller than 200px. */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 25: ELEVATION + SHADOW SCALE */ /* ──────────────────────────────────────────────────────────── */ --elevation-0: none; --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --elevation-2: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06); --elevation-4: 0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08); --elevation-5: 0 24px 48px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.1); /* Semantic shadow aliases — map to elevation */ --shadow-sm: var(--elevation-1); --shadow-md: var(--elevation-2); --shadow-lg: var(--elevation-3); --shadow-header: var(--elevation-2); /* Specialty shadow tokens — specific use cases */ --shadow-card-feature: 0px 4px 42px rgba(0, 0, 0, 0.10); /* large, airy — feature cards */ --shadow-btn-primary: 0px 0px 11px rgba(0, 0, 0, 0.13); /* CTA buttons — Figma spec */ --shadow-tag-featured: inset 0 1px 1px rgba(0, 0, 0, 0.20); /* HW DS Tag v.1 Featured only */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 26: ICON SIZES */ /* ──────────────────────────────────────────────────────────── */ /* All values on 4px grid. Role-named — sizes may vary by density context. Never set icon width/height to raw px values in components. Icon system: Material Symbols Rounded (locked). */ --icon-size-xs: 16px; /* inline with body copy, dense UI controls */ --icon-size-sm: 20px; /* supporting roles in list items, inputs */ --icon-size-md: 24px; /* default standalone UI icon (buttons, nav) */ --icon-size-lg: 32px; /* primary actions, larger touch targets */ --icon-size-xl: 48px; /* small empty state, card illustration */ --icon-size-2xl: 64px; /* feature section illustration icons */ --icon-size-3xl: 96px; /* onboarding, larger illustrative contexts */ --icon-size-4xl: 128px; /* hero decorative, background iconography */ /* Avatar size scale — SEPARATE from icon-size (avatars represent people/entities; icons represent actions/concepts — coupling these scales would be semantically wrong) */ --avatar-size-sm: 32px; /* dense layouts, compact author mentions */ --avatar-size-md: 48px; /* hw-author-card default */ --avatar-size-lg: 72px; /* hw-speaker-card hero position */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 27: STATE LAYERS (Material-inspired) */ /* ──────────────────────────────────────────────────────────── */ /* Overlaid on surface color at these opacities */ --state-hover: 0.08; --state-focus: 0.12; --state-pressed: 0.16; --state-dragged: 0.16; --state-disabled-container: 0.12; --state-disabled-content: 0.38; /* ──────────────────────────────────────────────────────────── */ /* SECTION 28: FOCUS RING */ /* ──────────────────────────────────────────────────────────── */ --focus-ring: 2px solid var(--color-violet); --focus-ring-offset: 2px; --focus-ring-shadow: 0 0 0 3px rgba(163, 40, 255, 0.15); /* violet glow on focused form elements */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 29: Z-INDEX SCALE */ /* ──────────────────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-overlay-control: 310; /* toggle controls that must sit above their overlay (e.g., nav close button) */ --z-modal: 400; --z-toast: 500; /* ──────────────────────────────────────────────────────────── */ /* SECTION 30: LAYOUT TOKENS */ /* ──────────────────────────────────────────────────────────── */ --container-sm: 680px; --container-md: 800px; --container-lg: 1100px; --container-xl: 1280px; --page-rail: 1056px; /* Primary content rail: 1281px Figma frame minus 2x ~113px gutters */ --page-gutter: var(--screen-margin); /* compatibility alias; use --screen-margin for new work */ --grid-columns: 12; --grid-gap: var(--space-20); /* default grid gap */ --grid-gap-sm: var(--space-16); /* tight grid, dense layouts */ --grid-gap-md: var(--space-20); /* standard grid */ --grid-gap-lg: var(--space-24); /* loose grid, generous layouts */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 31: BREAKPOINT REFERENCE TOKENS */ /* ──────────────────────────────────────────────────────────── */ /* REFERENCE ONLY — @media queries cannot consume custom properties. Hardcode these values directly in @media rules. Purpose: single source of truth for JS and documentation. Values match the designed screen-margin steps (discrete, not interpolated). */ --breakpoint-xs: 320px; /* smallest supported mobile */ --breakpoint-sm: 360px; /* small mobile (screen-margin step 1) */ --breakpoint-md: 420px; /* mid mobile (screen-margin step 2) */ --breakpoint-lg: 768px; /* tablet (screen-margin step 3) */ --breakpoint-xl: 1024px; /* small desktop */ --breakpoint-2xl: 1280px; /* standard desktop */ --breakpoint-3xl: 1440px; /* widescreen */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 32: LIGHT SOURCE TOKENS */ /* ──────────────────────────────────────────────────────────── */ /* Shared across all material button variants. 135deg = top-left origin. Every pseudo-element, gradient, and directional stroke in the button family uses this angle. Entry:exit ratio ~5.6:1 — same light, different material density. */ --light-angle: 135deg; --light-entry-strong: rgba(255, 255, 255, 0.72); /* glass ::before entry face */ --light-entry-mid: rgba(255, 255, 255, 0.45); /* oblique / secondary faces */ --light-entry-soft: rgba(255, 255, 255, 0.12); /* shadow face */ --light-exit-glow: rgba(255, 255, 255, 0.26); /* glass ::after exit face */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 33: GLASS SURFACE TOKENS */ /* ──────────────────────────────────────────────────────────── */ --surface-glass-bg: rgba(255, 255, 255, 0.12); --surface-glass-bg-light: rgba(255, 255, 255, 0.20); /* ghost-panel, glass btn resting */ --surface-glass-bg-heavy: rgba(255, 255, 255, 0.40); /* glass btn hover, frosted card */ --surface-glass-border: rgba(255, 255, 255, 0.2); --surface-glass-border-strong: rgba(255, 255, 255, 0.45); --surface-glass-blur: blur(12px); --surface-glass-blur-sm: blur(8px); --surface-glass-blur-btn: blur(20px); /* strong enough to visually read as frosted glass */ /* ──────────────────────────────────────────────────────────── */ /* SECTION 34: CHART PALETTE (DATA VISUALIZATION ONLY) */ /* ──────────────────────────────────────────────────────────── */ /* DATA VISUALIZATION ONLY. These are not UI or brand colors. --color-chart-1 is NOT a substitute for --color-violet in buttons, badges, or links. The DV palette is adjusted for 3:1 contrast on chart backgrounds — it is not calibrated for general UI use. Never reference --color-chart-* outside of chart components and data visualization. */ --color-chart-1: #8B12E8; /* Violet DV — 277°, 6.8:1 on white */ --color-chart-2: #1B79D3; /* Blue DV — 211°, 4.5:1 on white */ --color-chart-3: #0B8A6E; /* Teal DV — 163°, 5.5:1 on white */ --color-chart-4: #B86800; /* Amber DV — 38°, 4.7:1 on white */ --color-chart-5: #B33480; /* Magenta DV — 323°, 4.3:1 on white */ --color-chart-6: #4B52CC; /* Indigo DV — 240°, 4.4:1 on white */ /* Confusable pairs in deuteranopia: chart-1+chart-2, chart-2+chart-6. Add pattern/dash secondary differentiator whenever both appear in the same chart. */ /* Chart delta — positive/negative change indicators (tooltip context, dark bg only) */ --color-chart-delta-pos: #4CAF50; /* positive change — on dark tooltip bg only */ --color-chart-delta-neg: #EF4444; /* negative change — on dark tooltip bg only */ /* Chart surface tokens */ --color-chart-bg: var(--color-surface-primary); --color-chart-grid: var(--color-neutral-200); --color-chart-axis: var(--color-neutral-400); --color-chart-label: var(--color-text-secondary); --color-chart-tooltip-bg: var(--color-neutral-900); --color-chart-tooltip-text: var(--color-white); } /* ============================================================== */ /* LAYER 3: DENSITY RESOLVER — FLEX SPACING */ /* ============================================================== */ /* --flex* tokens are density-responsive spacing roles for components, molecules, and local layout clusters. The resolver moves each token along the static --space-* primitive ladder and clamps at the floor/ceiling. Default density is 0. Scope density with data-density on any subtree: data-density="-1" denser by one step data-density="0" default data-density="+1" roomier by one step data-density="+2" roomier by two steps data-density="+3" roomiest by three steps For component-specific behavior, define a local resolver inside the component selector by overriding only the --flex* values that component consumes. */ [data-density="-1"] { --flex0: var(--space-0); --flex2: var(--space-0); --flex4: var(--space-2); --flex8: var(--space-4); --flex12: var(--space-8); --flex16: var(--space-12); --flex20: var(--space-16); --flex24: var(--space-20); --flex32: var(--space-24); --flex40: var(--space-32); --flex48: var(--space-40); --flex56: var(--space-48); --flex64: var(--space-56); --flex80: var(--space-64); --flex96: var(--space-80); --flex120: var(--space-96); --flex160: var(--space-120); } [data-density="+1"], [data-density="1"] { --flex0: var(--space-2); --flex2: var(--space-4); --flex4: var(--space-8); --flex8: var(--space-12); --flex12: var(--space-16); --flex16: var(--space-20); --flex20: var(--space-24); --flex24: var(--space-32); --flex32: var(--space-40); --flex40: var(--space-48); --flex48: var(--space-56); --flex56: var(--space-64); --flex64: var(--space-80); --flex80: var(--space-96); --flex96: var(--space-120); --flex120: var(--space-160); --flex160: var(--space-160); } [data-density="+2"], [data-density="2"] { --flex0: var(--space-4); --flex2: var(--space-8); --flex4: var(--space-12); --flex8: var(--space-16); --flex12: var(--space-20); --flex16: var(--space-24); --flex20: var(--space-32); --flex24: var(--space-40); --flex32: var(--space-48); --flex40: var(--space-56); --flex48: var(--space-64); --flex56: var(--space-80); --flex64: var(--space-96); --flex80: var(--space-120); --flex96: var(--space-160); --flex120: var(--space-160); --flex160: var(--space-160); } [data-density="+3"], [data-density="3"] { --flex0: var(--space-8); --flex2: var(--space-12); --flex4: var(--space-16); --flex8: var(--space-20); --flex12: var(--space-24); --flex16: var(--space-32); --flex20: var(--space-40); --flex24: var(--space-48); --flex32: var(--space-56); --flex40: var(--space-64); --flex48: var(--space-80); --flex56: var(--space-96); --flex64: var(--space-120); --flex80: var(--space-160); --flex96: var(--space-160); --flex120: var(--space-160); --flex160: var(--space-160); } /* ============================================================== */ /* LAYER 2: BREAKPOINT RESOLVER — SCREEN MARGIN */ /* ============================================================== */ /* Screen margin is a resolver token, not a component decision. Mobile steps are discrete: 16px smallest phones 24px larger phones 32px tablets and up Desktop width is constrained by page/container rails, not by increasing viewport margins indefinitely. */ :root { --screen-margin: var(--space-16); } /* 320px+ */ @media (min-width: 360px) { :root { --screen-margin: var(--space-24); } } /* larger phones */ @media (min-width: 768px) { :root { --screen-margin: var(--space-32); } } /* tablets+ */ /* ============================================================== */ /* LAYER 2: BREAKPOINT RESOLVER — TYPOGRAPHY FONT SIZES */ /* ============================================================== */ /* Only font-size and line-height change at breakpoints. Shorthand tokens (--display-lg, --body-md, etc.) update automatically because they reference the decomposed tokens above. No need to rewrite full shorthands here. Scale: display roles step down one Material-like level at mobile; title/body/label remain stable. */ @media (max-width: 768px) { :root { /* Display scale — mobile */ --font-size-display-lg: 2.8125rem; /* 45px */ --line-height-display-lg: 1.155556; /* 52px */ --font-size-display-md: 2.375rem; /* 38px */ --line-height-display-md: 1.171875; /* 44.5px */ --font-size-display-sm: 2rem; /* 32px */ --line-height-display-sm: 1.25; /* 40px */ /* Pull quote — mobile (spans full width, must be smaller) */ --font-size-display-pullquote: 2rem; /* 32px */ /* Headline scale — mobile */ --font-size-headline-lg: 1.75rem; /* 28px */ --line-height-headline-lg: 1.285714; /* 36px */ --font-size-headline-md: 1.5rem; /* 24px */ --line-height-headline-md: 1.333333; /* 32px */ --font-size-headline-sm: 1.375rem; /* 22px */ --line-height-headline-sm: 1.272727; /* 28px */ /* Title / Body / Label — unchanged at mobile */ } } /* ============================================================== */ /* END OF TOKEN FILE */ /* ============================================================== */ /* ============================================ */ /* BASE / RESET */ /* Modern reset + global defaults */ /* ============================================ */ :root { --site-canvas-max: 1680px; --site-canvas-background: #FFFFFF; --site-canvas-border-color: rgba(109, 107, 130, 0.20); --site-root-background: #E1E0EA; --site-page-background: #E1E0EA; --site-page-background-image: radial-gradient(circle at 50% 73%, rgba(250, 250, 255, 0) 0%, #D9D7E5 100%), radial-gradient(circle at 100% -11%, #F8F8FC 0%, #ECE8EF 27%, #DDDCEC 58%, #F5F6FA 100%), radial-gradient(circle at 3% -7%, #F8F8FC 0%, #EAE8EE 27%, #E2E1EA 58%, #F5F6FA 100%), radial-gradient(circle at 50% 23%, #F6F7FC 0%, #E1E0EA 100%); } /* ── Reset ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-padding-top: 80px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--site-root-background); } body { font: var(--body-lg); color: var(--color-text-primary); background-color: var(--site-page-background); background-image: var(--site-page-background-image); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 50%; z-index: calc(var(--z-sticky) + 2); width: min(100%, var(--site-canvas-max)); border-right: 1px solid var(--site-canvas-border-color); border-left: 1px solid var(--site-canvas-border-color); transform: translateX(-50%); pointer-events: none; } body > main, body > .page-content { flex: 1; } body > main, body > .page-content, body > .site-footer { width: min(100%, var(--site-canvas-max)); max-width: var(--site-canvas-max); margin-inline: auto; } body > main, body > .page-content { background-color: var(--site-canvas-background); } /* ── Links ──────────────────────────────────── */ a { text-decoration: none; color: inherit; } /* ── Images ─────────────────────────────────── */ img, svg, video { display: block; max-width: 100%; height: auto; } img { font-style: italic; /* alt text styling when image fails */ } /* ── Lists ──────────────────────────────────── */ ul, ol { list-style: none; } /* ── Tables ─────────────────────────────────── */ table { border-collapse: collapse; border-spacing: 0; } /* ── Form Elements ──────────────────────────── */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* ── Focus ──────────────────────────────────── */ /* Visible focus for keyboard users only */ :focus { outline: none; } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* ── Selection ──────────────────────────────── */ ::selection { background-color: var(--color-violet); color: var(--color-white); } .dark-context ::selection, [data-theme="dark"] ::selection, .hw-section--dark ::selection, .hw-section--brand ::selection, .surface--gradient ::selection, .gradient-background2 ::selection, .homepage-proof-swoop .homepage-faq ::selection { background-color: var(--color-violet-dark); color: var(--color-white); } /* ── Reduced Motion ─────────────────────────── */ /* Respect user preferences for motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Screen Reader Only ─────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Section base ───────────────────────────── */ section { position: relative; } /* ── Sup (trademark, etc.) ──────────────────── */ sup { top: -0.75em; left: 2px; font-weight: var(--font-weight-medium); font-size: 46%; } /* ============================================ */ /* LAYOUT SYSTEM */ /* Containers, grid, sections, stacks */ /* ============================================ */ /* ── Page-level body class modifiers ──────── */ /* Ebook gate page — strips nav to remove distractions from form conversion */ body.ebook-page .site-header__nav, body.ebook-page .header-hamburger-toggle { display: none; } /* ── Containers ───────────────────────────── */ .container { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--section-padding-x); width: 100%; } .container--sm { max-width: var(--container-sm); } .container--md { max-width: var(--container-md); } .container--xl { max-width: var(--container-xl); } .container--full { max-width: none; padding-inline: 0; } /* Locks primary page content to the designed rail while full-bleed section backgrounds, horns, gradients, and media can keep expanding with viewport. */ .page-rail { width: min(var(--page-rail), calc(100% - var(--screen-margin) - var(--screen-margin))); margin-inline: auto; box-sizing: border-box; } /* Prose constraint within a wider grid column. ~70–80 CPL at 16px base. Full-bleed elements (stat callouts, comparison bars) sit outside this wrapper. */ .reading-column { max-width: var(--container-sm); margin-inline: auto; } /* ── 12-Column Grid ──────────────────────── */ .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gap); } /* Span utilities */ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } /* Responsive: stack to single column */ @media (max-width: 768px) { .grid--stack-tablet > * { grid-column: 1 / -1; } } @media (max-width: 480px) { .grid--stack-mobile > * { grid-column: 1 / -1; } } /* ── Simple Grid (auto-fit) ─────────────── */ /* Use when you want equal columns that wrap */ .auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min, 280px), 1fr)); gap: var(--grid-gap); } /* ── Stack (vertical spacing) ───────────── */ /* Consistent vertical rhythm between items */ .stack > * + * { margin-top: var(--stack-gap, var(--space-24)); } .stack--sm { --stack-gap: var(--space-12); } .stack--md { --stack-gap: var(--space-24); } .stack--lg { --stack-gap: var(--space-40); } .stack--xl { --stack-gap: var(--space-80); } /* ── Cluster (horizontal wrapping) ──────── */ /* Flex items that wrap with consistent gap */ .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-16)); align-items: center; } .cluster--center { justify-content: center; } .cluster--between { justify-content: space-between; } /* ── Section Wrappers ────────────────────── */ .hw-section { padding: var(--section-padding-y) 0; position: relative; /* No isolation/transform/filter/will-change here — they kill backdrop-filter on children */ } .hw-section--tight { padding: var(--section-padding-y-sm) 0; } .hw-section--flush { padding: 0; } /* Section themes */ .hw-section--dark { background-color: var(--color-surface-dark); color: var(--color-text-on-surface-dark); } .hw-section--header-dark { background: var(--gradient-dark); color: var(--color-text-on-surface-dark); } .hw-section--brand { background: var(--gradient-cta-band); color: var(--color-text-on-surface-brand); } .hw-section--gradient { background: var(--gradient-soft); } .hw-section--cloud { background-color: var(--color-surface-secondary); } .hw-section--mist { background-color: var(--color-neutral-200); } /* Branded inner-page hero — violet gradient, white text. Applied to the header zone of every content page so all pages share the same visual identity as the homepage hero. */ .hw-section--page-hero { background: var(--gradient-hero-bg); color: #fff; padding-top: calc(var(--section-padding-y) * 1.25); padding-bottom: calc(var(--section-padding-y) * 1.25); position: relative; overflow: hidden; } /* Subtle radial bloom — matches homepage hero language */ .hw-section--page-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 100% 110%, rgba(53, 151, 255, 0.25) 0%, transparent 60%); pointer-events: none; } .hw-section--page-hero .text-secondary, .hw-section--page-hero .text-muted { color: rgba(255, 255, 255, 0.72) !important; } .hw-section--page-hero a, .hw-section--page-hero .hw-body-sm { color: rgba(255, 255, 255, 0.65); } .hw-section--page-hero a:hover { color: #fff; } /* ── Flex Utilities ──────────────────────── */ .flex { display: flex; } .flex--inline { display: inline-flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--column { flex-direction: column; } .flex--wrap { flex-wrap: wrap; } .flex--gap-xs { gap: var(--space-8); } .flex--gap-sm { gap: var(--space-12); } .flex--gap { gap: var(--space-20); } .flex--gap-lg { gap: var(--space-40); } /* ── Split Layout ────────────────────────── */ /* Two-column split that stacks on mobile */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: center; } .split--60-40 { grid-template-columns: 3fr 2fr; } .split--40-60 { grid-template-columns: 2fr 3fr; } @media (max-width: 768px) { .split { grid-template-columns: 1fr; } } /* ── Aspect Ratio Container ──────────────── */ /* Prevents CLS for media embeds (video, maps, responsive images). Child fills container. */ .aspect-ratio { position: relative; width: 100%; overflow: hidden; } .aspect-ratio > iframe, .aspect-ratio > video, .aspect-ratio > embed, .aspect-ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; } .aspect-ratio--16-9 { aspect-ratio: 16 / 9; } .aspect-ratio--4-3 { aspect-ratio: 4 / 3; } .aspect-ratio--2-3 { aspect-ratio: 2 / 3; } .aspect-ratio--1-1 { aspect-ratio: 1 / 1; } /* ── Page content offset ─────────────────── */ /* Accounts for fixed header height */ .page-content { padding-top: 64px; } body.has-announcement-banner .page-content { padding-top: calc(64px + var(--announcement-banner-offset)); } /* ============================================ */ /* REGISTERED PROPERTIES — button edge ring */ @property --btn-edge-hi { syntax: ""; inherits: false; initial-value: rgba(255, 255, 255, 0.14); } @property --btn-edge-mid { syntax: ""; inherits: false; initial-value: rgba(255, 255, 255, 0.03); } @property --btn-edge-lo { syntax: ""; inherits: false; initial-value: rgba(0, 0, 0, 0.04); } /* ============================================ */ /* COMPONENT LIBRARY */ /* Reusable UI elements built on design tokens */ /* */ /* Anatomy (Material M3-inspired): */ /* Container + Content + State Layer */ /* */ /* Each component has: */ /* - Base styles (container) */ /* - Variants (--primary, --secondary, etc.) */ /* - States (hover, focus, pressed, disabled) */ /* - Sizes (--sm, --lg) where applicable */ /* ============================================ */ /* ═══════════════════════════════════════════ */ /* BUTTONS — v3 (M3 state layers + flex tokens) */ /* ═══════════════════════════════════════════ */ .hw-btn { --button-label-weight: var(--font-weight-medium); --gradient-label-weight: var(--font-weight-bold); --frosted-label-weight: var(--font-weight-regular); --glass-label-weight: var(--frosted-label-weight); --tint-label-weight: var(--frosted-label-weight); --button-content-gap: 6px; --button-leading-icon-gap: var(--flex4); --button-trailing-icon-gap: var(--flex4); --symbol-weight: var(--button-label-weight); --hw-btn-label-size: var(--font-size-label-lg); --hw-btn-label-line-height: 20px; --button-motion-standard: cubic-bezier(0.2, 0, 0, 1); --button-state-duration: 180ms; --button-press-duration: 90ms; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-content-gap); padding: var(--flex12) var(--flex16); border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; font: var(--button-label-weight) var(--hw-btn-label-size) / var(--hw-btn-label-line-height) var(--font-family); letter-spacing: 0; -webkit-tap-highlight-color: transparent; will-change: transform; } .hw-btn:has(.material-symbols-rounded:first-child:not(:last-child)), .hw-btn:has(.material-symbol-svg:first-child:not(:last-child)), .hw-btn:has(.hw-btn__icon:first-child:not(:last-child)) { gap: var(--button-leading-icon-gap); } .hw-btn:has(.material-symbols-rounded:last-child:not(:first-child)), .hw-btn:has(.material-symbol-svg:last-child:not(:first-child)), .hw-btn:has(.hw-btn__icon:last-child:not(:first-child)) { gap: var(--button-trailing-icon-gap); } .hw-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--button-state-duration) var(--button-motion-standard); } .hw-btn:disabled, .hw-btn[aria-disabled="true"] { opacity: var(--state-disabled-content); pointer-events: none; } .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' var(--symbol-weight, var(--font-weight-regular)), 'GRAD' 0, 'opsz' 24; } .material-symbol-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; fill: currentColor; } .hw-btn .material-symbols-rounded, .hw-btn .material-symbol-svg { width: var(--icon-size-xs); height: var(--icon-size-xs); font-size: var(--icon-size-xs); font-variation-settings: 'FILL' 0, 'wght' var(--symbol-weight), 'GRAD' 0, 'opsz' 20; } /* ── 1. Gradient (primary CTA) ──────────── */ .hw-btn--gradient, .hw-btn--primary { background: var(--gradient-brand); color: var(--color-white); font-weight: var(--gradient-label-weight); --symbol-weight: var(--gradient-label-weight); box-shadow: 0 2px 6px rgba(163, 40, 255, 0.20); transition: transform 220ms var(--button-motion-standard), box-shadow 220ms var(--button-motion-standard), filter 220ms var(--button-motion-standard); } .hw-btn--gradient::before, .hw-btn--primary::before { background: white; } .hw-btn--gradient:hover::before, .hw-btn--primary:hover::before { opacity: var(--state-hover); } .hw-btn--gradient:focus-visible::before, .hw-btn--primary:focus-visible::before { opacity: var(--state-focus); } .hw-btn--gradient:active::before, .hw-btn--primary:active::before { opacity: var(--state-pressed); transition-duration: var(--duration-short); } .hw-btn--gradient:focus-visible, .hw-btn--primary:focus-visible { outline: 3px solid var(--color-neutral-900); outline-offset: 3px; } .hw-btn--gradient:hover, .hw-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(110, 44, 210, 0.22); } .hw-btn--gradient:active, .hw-btn--primary:active { transform: translateY(0) scale(0.985); box-shadow: 0 2px 8px rgba(110, 44, 210, 0.18); transition: transform var(--button-press-duration) var(--button-motion-standard), box-shadow var(--button-press-duration) var(--button-motion-standard); } /* ── 2. Glass ───────────────────────────── */ .hw-btn--glass { --glass-fill: 0.72; --glass-shadow: 0.08; --glass-scale: 0.98; background: rgba(255, 255, 255, var(--glass-fill)); color: var(--color-neutral-900); font-weight: var(--glass-label-weight); --symbol-weight: var(--glass-label-weight); box-shadow: 0 4px 16px rgba(0, 0, 0, var(--glass-shadow)); overflow: visible; transition: transform 220ms var(--button-motion-standard), box-shadow 220ms var(--button-motion-standard); } .hw-btn--glass::before { background: var(--color-violet); } .hw-btn--glass:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(72, 40, 120, 0.14); } .hw-btn--glass:hover::before { opacity: calc(var(--state-hover) * 0.55); } .hw-btn--glass:focus-visible { box-shadow: 0 8px 22px rgba(72, 40, 120, 0.14); outline: 3px solid var(--color-neutral-900); outline-offset: 3px; } .hw-btn--glass:focus-visible::before { opacity: calc(var(--state-focus) * 0.55); } .hw-btn--glass:active { transform: translateY(0) scale(var(--glass-scale)); box-shadow: 0 3px 10px rgba(72, 40, 120, 0.10); transition: transform var(--button-press-duration) var(--button-motion-standard), box-shadow var(--button-press-duration) var(--button-motion-standard); } .hw-btn--glass:active::before { opacity: calc(var(--state-pressed) * 0.6); transition-duration: var(--button-press-duration); } /* ── 3. Tint ────────────────────────────── */ .hw-btn--tint { --tint-fill: 0.13; --tint-entry: 1; background: linear-gradient(135deg, rgba(255, 255, 255, calc(var(--tint-entry) * 0.32)) 0%, rgba(255, 255, 255, calc(var(--tint-entry) * 0.10)) 34%, rgba(255, 255, 255, 0) 58%), rgba(163, 40, 255, var(--tint-fill)); color: var(--color-violet); font-weight: var(--tint-label-weight); --symbol-weight: var(--tint-label-weight); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--tint-entry) * 0.28)); transition: transform 220ms var(--button-motion-standard), box-shadow 220ms var(--button-motion-standard), background-color var(--button-state-duration) var(--button-motion-standard); } .hw-btn--tint::before { background: var(--color-violet); } .hw-btn--tint:hover::before { opacity: var(--state-hover); } .hw-btn--tint:focus-visible::before { opacity: var(--state-focus); } .hw-btn--tint:active::before { opacity: var(--state-pressed); transition-duration: var(--duration-short); } .hw-btn--tint:focus-visible { outline: 3px solid var(--color-violet); outline-offset: 3px; } .hw-btn--tint:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--tint-entry) * 0.34)), 0 6px 16px rgba(113, 38, 190, 0.12); } .hw-btn--tint:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--tint-entry) * 0.34)), 0 6px 16px rgba(113, 38, 190, 0.12); } .hw-btn--tint:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--tint-entry) * 0.24)); transition: transform var(--button-press-duration) var(--button-motion-standard), box-shadow var(--button-press-duration) var(--button-motion-standard); } /* ── 4. Text ────────────────────────────── */ .hw-btn--text { background-color: transparent; color: var(--color-violet); padding: var(--flex12) var(--flex16); transition: transform 180ms var(--button-motion-standard); } .hw-btn--text::before { background: var(--color-neutral-900); } .hw-btn--text:hover::before { opacity: var(--state-hover); } .hw-btn--text:focus-visible { background-color: transparent; outline: 3px solid var(--color-violet); outline-offset: 3px; } .hw-btn--text:focus-visible::before { opacity: var(--state-focus); } .hw-btn--text:active { transform: scale(0.985); transition: transform var(--button-press-duration) var(--button-motion-standard); } .hw-btn--text:active::before { opacity: var(--state-pressed); transition-duration: var(--duration-short); } /* ── Dark surface overrides ─────────────── */ .surface--dark .hw-btn--glass, .hw-section--dark .hw-btn--glass, [data-theme="dark"] .hw-btn--glass { --glass-fill: 0.14; color: var(--color-white); } .surface--dark .hw-btn--tint, .hw-section--dark .hw-btn--tint, [data-theme="dark"] .hw-btn--tint { background-color: rgba(163,40,255,0.25); color: var(--color-text-accent-on-dark); border: 1px solid rgba(209,163,255,0.45); } .surface--dark .hw-btn--tint::before, .hw-section--dark .hw-btn--tint::before, [data-theme="dark"] .hw-btn--tint::before { background: var(--color-text-accent-on-dark); } .surface--dark .hw-btn--tint:hover, .hw-section--dark .hw-btn--tint:hover, [data-theme="dark"] .hw-btn--tint:hover { background-color: rgba(163,40,255,0.35); } .surface--dark .hw-btn--tint:focus-visible, .hw-section--dark .hw-btn--tint:focus-visible, [data-theme="dark"] .hw-btn--tint:focus-visible { background-color: rgba(163,40,255,0.35); outline-color: var(--color-text-accent-on-dark); } .surface--dark .hw-btn--text, .hw-section--dark .hw-btn--text, [data-theme="dark"] .hw-btn--text { color: var(--color-text-accent-on-dark); } .surface--dark .hw-btn--text::before, .hw-section--dark .hw-btn--text::before, [data-theme="dark"] .hw-btn--text::before { background: var(--color-text-accent-on-dark); } .surface--dark .hw-btn--text:hover, .hw-section--dark .hw-btn--text:hover, [data-theme="dark"] .hw-btn--text:hover { background: transparent; } .surface--dark .hw-btn--text:focus-visible, .hw-section--dark .hw-btn--text:focus-visible, [data-theme="dark"] .hw-btn--text:focus-visible { background: transparent; outline-color: var(--color-text-accent-on-dark); } .surface--dark .hw-btn--text:active, .hw-section--dark .hw-btn--text:active, [data-theme="dark"] .hw-btn--text:active { background: transparent; } /* ── Gradient surface overrides ─────────── */ .surface--gradient .hw-btn--glass, .hw-section--brand .hw-btn--glass { --glass-fill: 0.18; color: var(--color-white); } .surface--gradient .hw-btn--tint, .hw-section--brand .hw-btn--tint { background-color: rgba(255,255,255,0.18); color: var(--color-white); border: 1px solid rgba(255,255,255,0.40); } .surface--gradient .hw-btn--tint::before, .hw-section--brand .hw-btn--tint::before { background: var(--color-white); } .surface--gradient .hw-btn--tint:hover, .hw-section--brand .hw-btn--tint:hover { background-color: rgba(255,255,255,0.26); } .surface--gradient .hw-btn--tint:focus-visible, .hw-section--brand .hw-btn--tint:focus-visible { background-color: rgba(255,255,255,0.26); outline-color: var(--color-white); } .surface--gradient .hw-btn--text, .hw-section--brand .hw-btn--text { color: var(--color-white); } .surface--gradient .hw-btn--text::before, .hw-section--brand .hw-btn--text::before { background: var(--color-white); } .surface--gradient .hw-btn--text:hover, .hw-section--brand .hw-btn--text:hover { background: transparent; } .surface--gradient .hw-btn--text:focus-visible, .hw-section--brand .hw-btn--text:focus-visible { background: transparent; outline-color: var(--color-white); } .surface--gradient .hw-btn--text:active, .hw-section--brand .hw-btn--text:active { background: transparent; } /* ── Soft gradient surface (hw-section--gradient = white→lavender, light) ── */ /* Explicitly pins dark text — surface is light, not dark. Prevents accidental white-on-light if these buttons are added here in future. */ .hw-section--gradient .hw-btn--glass { color: var(--color-neutral-900); } .hw-section--gradient .hw-btn--tint { color: var(--color-violet); } .hw-section--gradient .hw-btn--text { color: var(--color-violet); } /* ── Sizes ──────────────────────────────── */ .hw-btn--sm { --hw-btn-label-size: var(--font-size-label-md); --hw-btn-label-line-height: 16px; padding: var(--flex8) var(--flex16); } .hw-btn--lg { --hw-btn-label-size: var(--font-size-label-lg); --hw-btn-label-line-height: 20px; padding: var(--flex16) var(--flex32); } .hw-btn--full { width: 100%; justify-content: center; } /* ── Icon-only shapes ───────────────────── */ .hw-btn--icon-square, .hw-btn--icon-round { width: 44px; height: 44px; padding: 0; flex-shrink: 0; } .hw-btn--icon-square { border-radius: var(--radius-sm); } .hw-btn--icon-round { border-radius: var(--radius-full); } .hw-btn--icon-square .material-symbols-rounded, .hw-btn--icon-round .material-symbols-rounded, .hw-btn--icon-square .material-symbol-svg, .hw-btn--icon-round .material-symbol-svg { width: var(--icon-size-md); height: var(--icon-size-md); font-size: var(--icon-size-md); font-variation-settings: 'FILL' 0, 'wght' var(--symbol-weight), 'GRAD' 0, 'opsz' 24; } .hw-btn--density-plus-1:not(.hw-btn--icon-square):not(.hw-btn--icon-round) { padding: var(--flex16) var(--flex32); } .hw-btn--density-plus-1.hw-btn--icon-square, .hw-btn--density-plus-1.hw-btn--icon-round { width: 56px; height: 56px; } .hw-btn--density-plus-1.hw-btn--icon-square .material-symbols-rounded, .hw-btn--density-plus-1.hw-btn--icon-round .material-symbols-rounded, .hw-btn--density-plus-1.hw-btn--icon-square .material-symbol-svg, .hw-btn--density-plus-1.hw-btn--icon-round .material-symbol-svg { width: var(--icon-size-lg); height: var(--icon-size-lg); font-size: var(--icon-size-lg); font-variation-settings: 'FILL' 0, 'wght' var(--symbol-weight), 'GRAD' 0, 'opsz' 32; } .hw-btn--icon-square.hw-btn--gradient, .hw-btn--icon-round.hw-btn--gradient, .hw-btn--icon-square.hw-btn--primary, .hw-btn--icon-round.hw-btn--primary { --symbol-weight: var(--gradient-label-weight); } .hw-btn--icon-square.hw-btn--glass, .hw-btn--icon-round.hw-btn--glass { --symbol-weight: var(--glass-label-weight); } .hw-btn--icon-square.hw-btn--tint, .hw-btn--icon-round.hw-btn--tint { --symbol-weight: var(--tint-label-weight); } .hw-btn--icon-square.hw-btn--text, .hw-btn--icon-round.hw-btn--text { --symbol-weight: var(--button-label-weight); } /* ── Reduced motion ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .hw-btn--gradient, .hw-btn--primary, .hw-btn--glass, .hw-btn--tint, .hw-btn--text { transition: none; } .hw-btn::before { transition: none; } .hw-btn--gradient:active, .hw-btn--primary:active, .hw-btn--glass:active, .hw-btn--tint:active, .hw-btn--text:active { transform: none; } } /* ── Icon child ─────────────────────────── */ .hw-btn__icon { width: 1.25em; height: 1.25em; flex-shrink: 0; } /* ── DEPRECATED — Phase 2 migration pending ─ hw-btn--secondary → hw-btn--glass or hw-btn--tint hw-btn--outline-light → hw-btn--glass on .surface--dark hw-btn--soft / hw-btn--ghost → hw-btn--tint ─────────────────────────────────────────── */ .hw-btn--secondary { background: transparent; color: var(--color-violet); border: 2px solid var(--color-violet); padding: calc(var(--flex12) - 2px) calc(var(--flex24) - 2px); } .hw-btn--secondary:hover { background: var(--color-violet); color: var(--color-white); } .hw-btn--outline-light { background: transparent; color: var(--color-white); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55); } .hw-btn--outline-light:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85); } .hw-btn--outline-light:active { background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.65); } .hw-btn--soft { background: rgba(255,255,255,0.10); color: var(--color-text-primary); } .hw-btn--soft:hover { background: rgba(255,255,255,0.18); } .hw-btn--soft:active { background: rgba(255,255,255,0.25); } .hw-btn--ghost { background: rgba(163,40,255,0.06); color: var(--color-violet); } .hw-btn--ghost:hover { background: rgba(163,40,255,0.12); } /* Legacy alias */ .salesbtn { background: var(--gradient-brand); color: var(--color-white); box-shadow: var(--shadow-btn-primary); border-radius: var(--radius-sm); font: var(--label-lg); cursor: pointer; transition: box-shadow var(--transition-fast), transform var(--transition-fast); text-decoration: none; display: inline-block; padding: var(--space-12) var(--space-32); } .salesbtn:hover { box-shadow: var(--elevation-3); transform: translateY(-1px); } /* ═══════════════════════════════════════════ */ /* TYPOGRAPHY */ /* Role-based typography classes */ /* ═══════════════════════════════════════════ */ /* Display — hero headlines */ .hw-display-lg { font: var(--display-lg); } .hw-display-md { font: var(--display-md); } .hw-display { font: var(--display-sm); } /* Headline — section titles */ .hw-headline-lg { font: var(--headline-lg); } .hw-headline { font: var(--headline-md); } .hw-headline-sm { font: var(--headline-sm); } /* Title — card titles, subsection headers */ .hw-title-lg { font: var(--title-lg); } .hw-title { font: var(--title-md); } .hw-title-sm { font: var(--title-sm); } /* Body — paragraph text */ .hw-body-lg { font: var(--body-lg); } .hw-body { font: var(--body-md); } .hw-body-sm { font: var(--body-sm); } /* Label — buttons, tags, metadata */ .hw-label-lg { font: var(--label-lg); } .hw-label { font: var(--label-md); } .hw-label-sm { font: var(--label-sm); } /* ── Section Header System ───────────────── */ /* */ /* Three optional layers, used consistently: */ /* 1. Eyebrow (.section-eyebrow) */ /* - Small label, violet or muted */ /* - ONLY when headline is abstract and */ /* needs grounding */ /* 2. Headline (.section-title) */ /* - The main message of the section */ /* - Every content section gets one */ /* 3. Subtitle (.section-subtitle) */ /* - Supporting context */ /* - Only when headline needs explanation */ /* */ /* Social proof strips (press, partners) use */ /* a single headline — no eyebrow, no subtitle */ .section-eyebrow { font: var(--label-md); color: var(--color-violet); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-12); } .section-eyebrow--muted { color: var(--color-text-muted); text-transform: none; letter-spacing: normal; } .section-title { font: var(--headline-lg); text-align: center; } .section-subtitle { font: var(--body-lg); color: var(--color-text-secondary); text-align: center; max-width: var(--container-md); margin-inline: auto; } /* Legacy alias */ .bigpurple { color: var(--color-violet); font: var(--display-sm); text-align: center; } /* Responsive typography */ @media (max-width: 1024px) { .hw-display-lg { font-size: var(--text-5xl); } .hw-display-md { font-size: var(--text-4xl); } .hw-display { font-size: var(--text-3xl); } .section-title { font-size: var(--text-3xl); } } @media (max-width: 768px) { .hw-display-lg { font-size: var(--text-4xl); } .hw-display-md { font-size: var(--text-3xl); } .hw-display { font-size: var(--text-2xl); } .hw-headline-lg { font-size: var(--text-2xl); } .section-title { font-size: var(--text-2xl); } } @media (max-width: 480px) { .hw-display-lg { font-size: var(--text-3xl); } .hw-display-md { font-size: var(--text-2xl); } .hw-display { font-size: var(--text-xl); } .section-title { font-size: var(--text-xl); } } /* ═══════════════════════════════════════════ */ /* CARDS */ /* Container: surface + elevation + radius */ /* ═══════════════════════════════════════════ */ .hw-card { background: var(--color-surface-primary); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); } /* Elevated — interactive cards */ .hw-card--elevated { box-shadow: var(--elevation-2); } .hw-card--elevated:hover { transform: translateY(-4px); box-shadow: var(--elevation-3); } /* Outlined — flat with border */ .hw-card--outlined { box-shadow: none; border: 1px solid var(--color-neutral-200); } .hw-card--outlined:hover { border-color: var(--color-neutral-400); box-shadow: var(--elevation-1); } /* Card on dark backgrounds */ .hw-card--dark { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-on-surface-dark); } .hw-card--dark:hover { background: rgba(255, 255, 255, 0.1); } /* Card anatomy */ .hw-card__media { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-neutral-200); } .hw-card__media img { width: 100%; height: 100%; object-fit: cover; } .hw-card__body { padding: var(--space-24); } .hw-card__title { font: var(--title-lg); color: var(--color-text-on-surface-card); margin-bottom: var(--space-8); } .hw-card__text { font: var(--body-sm); color: var(--color-text-secondary); } .hw-card__footer { padding: var(--space-16) var(--space-24); border-top: 1px solid var(--color-neutral-200); } /* Dark card overrides */ .hw-card--dark .hw-card__title { color: var(--color-white); } .hw-card--dark .hw-card__text { color: var(--color-neutral-400); } .hw-card--dark .hw-card__footer { border-color: rgba(255, 255, 255, 0.1); } /* Solution cards — homepage three-card solution pattern */ .hw-solution-card-grid { --hw-solution-card-grid-min: 280px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hw-solution-card-grid-min)), 1fr)); gap: clamp(var(--space-20), 2.66vw, var(--space-28)); align-items: stretch; width: 100%; max-width: 1052px; margin-inline: auto; } .hw-solution-card { --hw-solution-card-accent-color: var(--color-violet); display: flex; flex-direction: column; align-items: center; min-width: 0; gap: calc(var(--space-8) + var(--space-2)); padding: var(--space-24) var(--space-24) var(--space-40); overflow: hidden; background: var(--color-surface-primary); border-radius: var(--radius-lg); box-shadow: inset 0 7px 0 var(--hw-solution-card-accent-color), var(--shadow-card-feature); } .hw-solution-card--accent-violet { --hw-solution-card-accent-color: var(--color-violet); } .hw-solution-card--accent-green { --hw-solution-card-accent-color: var(--color-green); } .hw-solution-card--accent-blue { --hw-solution-card-accent-color: var(--color-blue); } .hw-solution-card .hw-solution-card__kicker { text-transform: uppercase; --hw-tag-shadow: var(--shadow-tag-featured); --hw-tag-font-weight: var(--font-weight-regular); --hw-tag-font-size: var(--font-size-label-md); --hw-tag-line-height: 1.17; --hw-tag-letter-spacing: 0; } .hw-solution-card__content { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; gap: var(--space-16); min-width: 0; text-align: left; } .hw-solution-card__title, .hw-solution-card__text { margin: 0; overflow-wrap: break-word; } .hw-solution-card__title { color: var(--color-text-primary); font: var(--font-weight-bold) var(--font-size-title-md)/var(--line-height-title-md) var(--font-family); } .hw-solution-card__text { color: var(--color-text-secondary); font: var(--body-md); } /* Legacy alias */ .card { background: var(--color-surface-primary); border-radius: var(--radius-xl); box-shadow: var(--elevation-2); overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { transform: translateY(-4px); box-shadow: var(--elevation-3); } .card--flat { box-shadow: none; border: 1px solid var(--color-neutral-200); } .card--flat:hover { box-shadow: var(--elevation-1); } .card__body { padding: var(--space-24); } .card__title { font: var(--title-lg); color: var(--color-text-primary); margin-bottom: var(--space-12); } .card__text { font: var(--body-sm); color: var(--color-text-secondary); } /* ═══════════════════════════════════════════ */ /* STAT / PROOF POINT */ /* Big number with supporting text */ /* ═══════════════════════════════════════════ */ .hw-stat { text-align: center; padding: var(--space-16); } .hw-stat__value { font: var(--display-md); color: var(--color-text-primary); margin-bottom: var(--space-8); } .hw-stat__value--accent { color: var(--color-violet); } .hw-stat__label { font: var(--body-sm); color: var(--color-text-secondary); max-width: 240px; margin-inline: auto; } /* Dark variant */ .hw-section--dark .hw-stat__value { color: var(--color-white); } .hw-section--dark .hw-stat__label { color: var(--color-neutral-400); } /* ═══════════════════════════════════════════ */ /* LOGO GRID */ /* Partner/press logos in responsive grid */ /* ═══════════════════════════════════════════ */ .hw-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-24); align-items: center; justify-items: center; } .hw-logo-grid__item { display: flex; align-items: center; justify-content: center; padding: var(--space-12); opacity: 0.6; transition: opacity var(--transition-fast); filter: grayscale(100%); } .hw-logo-grid__item:hover { opacity: 1; filter: grayscale(0%); } .hw-logo-grid__item img { max-height: 40px; width: auto; object-fit: contain; } /* ═══════════════════════════════════════════ */ /* BADGE / CHIP */ /* ═══════════════════════════════════════════ */ .hw-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); font: var(--label-sm); text-transform: uppercase; letter-spacing: 0.06em; } .hw-badge--primary { background: var(--color-violet); color: var(--color-white); } .hw-badge--outline { background: transparent; color: var(--color-violet); border: 1px solid var(--color-violet); } .hw-badge--muted { background: var(--color-neutral-100); color: var(--color-text-secondary); } .hw-badge--dark { background: rgba(255, 255, 255, 0.1); color: var(--color-white); } /* M3 filter chip: container + state layer */ .hw-chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-radius: var(--radius-full); border: 1px solid var(--color-neutral-200); font: var(--label-md); color: var(--color-text-secondary); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .hw-chip::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--transition-fast); } .hw-chip:hover { border-color: var(--color-violet); color: var(--color-violet); } .hw-chip:hover::before { opacity: var(--state-hover); } .hw-chip:active::before { opacity: var(--state-pressed); } .hw-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } .hw-chip.is-active { background: var(--color-violet); border-color: var(--color-violet); color: var(--color-white); } .hw-chip.is-active::before { display: none; } /* Dark surface variant — used on violet/gradient page heroes */ .hw-chip--dark { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); } .hw-chip--dark:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(255,255,255,0.15); } .hw-chip--dark.is-active { background: #fff; border-color: #fff; color: var(--color-violet); } /* ═══════════════════════════════════════════ */ /* TESTIMONIAL */ /* Quote card with attribution */ /* ═══════════════════════════════════════════ */ .hw-testimonial { padding: var(--space-24); border-radius: var(--radius-lg); border: 1px solid var(--color-neutral-200); background: var(--color-surface-primary); } .hw-testimonial__quote { font: var(--body-lg); font-style: italic; color: var(--color-text-primary); margin-bottom: var(--space-20); position: relative; } .hw-testimonial__quote::before { content: '\201C'; font-size: 3em; line-height: 1; color: var(--color-violet); position: absolute; top: -0.2em; left: -0.05em; opacity: 0.3; } .hw-testimonial__author { display: flex; align-items: center; gap: var(--space-12); } .hw-testimonial__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; } .hw-testimonial__name { font: var(--label-md); color: var(--color-text-primary); } .hw-testimonial__role { font: var(--body-sm); color: var(--color-text-muted); } /* Slim variant (inline, no border) */ .hw-testimonial--slim { border: none; background: transparent; padding: var(--space-16) 0; border-left: 3px solid var(--color-violet); padding-left: var(--space-20); border-radius: 0; } /* ═══════════════════════════════════════════ */ /* FORM / INPUT GROUP */ /* Newsletter signup, contact forms */ /* ═══════════════════════════════════════════ */ .hw-input { font: var(--body-md); color: var(--color-text-primary); background: var(--color-surface-primary); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); padding: var(--space-12) var(--space-16); width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .hw-input:hover { border-color: var(--color-neutral-400); } .hw-input:focus { outline: none; border-color: var(--color-violet); box-shadow: 0 0 0 3px rgba(163, 40, 255, 0.15); } .hw-input::placeholder { color: var(--color-neutral-400); } /* Input group: inline input + button */ .hw-input-group { display: flex; gap: var(--space-8); max-width: 480px; } .hw-input-group .hw-input { flex: 1; border-radius: var(--radius-full) 0 0 var(--radius-full); border-right: none; } .hw-input-group .hw-btn { border-radius: 0 var(--radius-full) var(--radius-full) 0; flex-shrink: 0; } @media (max-width: 480px) { .hw-input-group { flex-direction: column; } .hw-input-group .hw-input, .hw-input-group .hw-btn { border-radius: var(--radius-full); border: 1px solid var(--color-neutral-200); } .hw-input-group .hw-input { border-right: 1px solid var(--color-neutral-200); } } .hw-label { display: block; font: var(--label-md); color: var(--color-text-primary); margin-bottom: var(--space-8); } /* ═══════════════════════════════════════════ */ /* AVATAR */ /* Profile images, team photos */ /* ═══════════════════════════════════════════ */ .hw-avatar { border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; } .hw-avatar--sm { width: 32px; height: 32px; } .hw-avatar--md { width: 48px; height: 48px; } .hw-avatar--lg { width: 80px; height: 80px; } .hw-avatar--xl { width: 120px; height: 120px; } /* ═══════════════════════════════════════════ */ /* DIVIDER */ /* Section separators */ /* ═══════════════════════════════════════════ */ .hw-divider { border: none; height: 1px; background: var(--color-neutral-200); margin: var(--space-40) 0; } .hw-divider--dark { background: rgba(255, 255, 255, 0.1); } /* ═══════════════════════════════════════════ */ /* ICON (inline SVG wrapper) */ /* ═══════════════════════════════════════════ */ .hw-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hw-icon--sm { width: 16px; height: 16px; } .hw-icon--md { width: 24px; height: 24px; } .hw-icon--lg { width: 32px; height: 32px; } .hw-icon--xl { width: 48px; height: 48px; } .hw-icon svg { width: 100%; height: 100%; } /* ═══════════════════════════════════════════ */ /* COLOR & TEXT UTILITIES */ /* ═══════════════════════════════════════════ */ .text-violet { color: var(--color-violet); } .text-blue { color: var(--color-blue); } .text-green { color: var(--color-green); } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .text-inverse { color: var(--color-text-inverse); } /* TODO: use on-* token — surface context unknown for utility class */ .text-accent { color: var(--color-text-accent); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* ═══════════════════════════════════════════ */ /* SPACING UTILITIES */ /* ═══════════════════════════════════════════ */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-4); } .mb-2 { margin-bottom: var(--space-8); } .mb-3 { margin-bottom: var(--space-12); } .mb-4 { margin-bottom: var(--space-16); } .mb-5 { margin-bottom: var(--space-20); } .mb-6 { margin-bottom: var(--space-24); } .mb-8 { margin-bottom: var(--space-40); } .mb-10 { margin-bottom: var(--space-56); } .mb-12 { margin-bottom: var(--space-80); } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-16); } .mt-6 { margin-top: var(--space-24); } .mt-8 { margin-top: var(--space-40); } .mt-12 { margin-top: var(--space-80); } /* ═══════════════════════════════════════════ */ /* TABS */ /* Horizontal tab bar with content panels */ /* ═══════════════════════════════════════════ */ /* M3 Tab anatomy: container + state layer + active indicator */ .hw-tabs__list { display: flex; gap: 0; border-bottom: 1px solid var(--color-neutral-200); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; } .hw-tabs__list::-webkit-scrollbar { display: none; } .hw-tabs__tab { position: relative; padding: var(--space-16) var(--space-24); background: none; border: none; font: var(--label-lg); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } /* M3 state layer */ .hw-tabs__tab::before { content: ''; position: absolute; inset: var(--space-4); border-radius: var(--radius-sm); background: currentColor; opacity: 0; transition: opacity var(--transition-fast); } .hw-tabs__tab:hover::before { opacity: var(--state-hover); } .hw-tabs__tab:active::before { opacity: var(--state-pressed); } .hw-tabs__tab:hover { color: var(--color-violet); } /* M3 active indicator — 3px bar at bottom */ .hw-tabs__tab::after { content: ''; position: absolute; bottom: -1px; left: var(--space-16); right: var(--space-16); height: 3px; border-radius: 3px 3px 0 0; background: var(--color-violet); transform: scaleX(0); transition: transform var(--duration-medium) var(--ease-emphasized); } .hw-tabs__tab.is-active { color: var(--color-violet); } .hw-tabs__tab.is-active::after { transform: scaleX(1); } .hw-tabs__tab:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-xs); } .hw-tabs__panel { display: none; padding-top: var(--space-40); animation: hw-tab-fade-in var(--duration-medium) var(--ease-standard-decelerate); } .hw-tabs__panel.is-active { display: block; } @keyframes hw-tab-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Dark variant */ .hw-section--dark .hw-tabs__list { border-color: rgba(255, 255, 255, 0.1); } .hw-section--dark .hw-tabs__tab { color: var(--color-neutral-400); } .hw-section--dark .hw-tabs__tab:hover { color: var(--color-white); } .hw-section--dark .hw-tabs__tab.is-active { color: var(--color-white); } .hw-section--dark .hw-tabs__tab::after { background: var(--color-white); } /* ═══════════════════════════════════════════ */ /* CAROUSEL */ /* Sliding content with prev/next navigation */ /* M3 motion: emphasized-decelerate for enter */ /* ═══════════════════════════════════════════ */ .hw-carousel { position: relative; overflow: hidden; } .hw-carousel--fade { --hw-carousel-fade-duration: var(--duration-medium); --hw-carousel-fade-ease: var(--ease-standard); } .hw-carousel__track { display: flex; transition: transform var(--duration-long) var(--ease-emphasized); } .hw-carousel__slide { flex: 0 0 100%; min-width: 0; } .hw-carousel--fade .hw-carousel__track { display: grid; transform: none; transition: none; isolation: isolate; } .hw-carousel--fade .hw-carousel__slide { grid-area: 1 / 1; flex: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hw-carousel-fade-duration) var(--hw-carousel-fade-ease), visibility 0s linear var(--hw-carousel-fade-duration); } .hw-carousel--fade:not(.is-initialized) .hw-carousel__slide:first-child, .hw-carousel--fade .hw-carousel__slide.is-active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .hw-carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-16); margin-top: var(--space-24); } /* M3 icon button: 40px target, state layer */ .hw-carousel__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-neutral-200); background: var(--color-white); cursor: pointer; color: var(--color-text-secondary); transition: color var(--transition-fast), border-color var(--transition-fast); } .hw-carousel__btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--transition-fast); } .hw-carousel__btn:hover { color: var(--color-violet); border-color: var(--color-violet); } .hw-carousel__btn:hover::before { opacity: var(--state-hover); } .hw-carousel__btn:active::before { opacity: var(--state-pressed); } .hw-carousel__btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } .hw-carousel__btn svg { position: relative; width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } .hw-carousel__dots { display: flex; gap: var(--space-8); } /* M3 indicator dot: 8px, transition with emphasized curve */ .hw-carousel__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-200); border: none; cursor: pointer; padding: 0; transition: background var(--transition-fast), transform var(--duration-short) var(--ease-standard); } .hw-carousel__dot:hover { transform: scale(1.3); } .hw-carousel__dot.is-active { background: var(--color-violet); } /* ═══════════════════════════════════════════ */ /* IDENTITY */ /* hw-identity — DEPRECATED. Superseded by hw-author-card + hw-person-card. */ /* Person chip: avatar + name + role */ /* ═══════════════════════════════════════════ */ .hw-identity { display: flex; align-items: center; gap: var(--space-12); } .hw-identity__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; background: var(--color-neutral-200); } .hw-identity__avatar--lg { width: 56px; height: 56px; } .hw-identity__info { min-width: 0; } .hw-identity__name { font: var(--label-md); color: var(--color-text-primary); } .hw-identity__role { font: var(--body-sm); color: var(--color-text-muted); } /* Dark variant */ .hw-section--dark .hw-identity__name { color: var(--color-white); } .hw-section--dark .hw-identity__role { color: var(--color-neutral-400); } /* Inline variant (horizontal, compact) */ .hw-identity--inline { gap: var(--space-8); } .hw-identity--inline .hw-identity__avatar { width: 28px; height: 28px; } .hw-identity--inline .hw-identity__info { display: flex; align-items: baseline; gap: var(--space-8); } /* ═══════════════════════════════════════════ */ /* RATING */ /* Star rating display (read-only) */ /* ═══════════════════════════════════════════ */ .hw-rating { display: inline-flex; gap: 2px; align-items: center; } .hw-rating__star { width: 18px; height: 18px; color: #F59E0B; } .hw-rating__star--empty { color: var(--color-neutral-200); } .hw-rating__star svg { width: 100%; height: 100%; fill: currentColor; } .hw-rating--lg .hw-rating__star { width: 24px; height: 24px; } /* ═══════════════════════════════════════════ */ /* STEPS */ /* Numbered vertical steps */ /* M3 list anatomy: leading element + content */ /* ═══════════════════════════════════════════ */ .hw-steps { display: flex; flex-direction: column; gap: 0; } .hw-steps__item { display: grid; grid-template-columns: 60px 1fr 1fr; gap: var(--space-24); align-items: start; padding: var(--space-40) 0; border-bottom: 1px solid var(--color-neutral-200); } .hw-steps__item:last-child { border-bottom: none; } /* M3 leading element: circular container */ .hw-steps__number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(163, 40, 255, 0.08); color: var(--color-violet); font: var(--label-lg); flex-shrink: 0; transition: background var(--transition-base), color var(--transition-base); } .hw-steps__content { display: flex; flex-direction: column; gap: var(--space-8); } .hw-steps__title { font: var(--title-lg); color: var(--color-text-primary); } .hw-steps__text { font: var(--body-md); color: var(--color-text-secondary); } .hw-steps__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-100); aspect-ratio: 4 / 3; } .hw-steps__media img { width: 100%; height: 100%; object-fit: cover; } /* Alternating layout: even items flip content and media */ .hw-steps__item:nth-child(even) { grid-template-columns: 60px 1fr 1fr; } .hw-steps__item:nth-child(even) .hw-steps__media { order: -1; } @media (max-width: 768px) { .hw-steps__item { grid-template-columns: 40px 1fr; gap: var(--space-16); } .hw-steps__media { grid-column: 2; } .hw-steps__item:nth-child(even) .hw-steps__media { order: 0; } } /* ═══════════════════════════════════════════ */ /* SCROLL SCENE */ /* Pinned section with scrubbed stages */ /* ═══════════════════════════════════════════ */ .hw-scene { position: relative; } .hw-scene__sticky { height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hw-scene__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--section-padding-x); } .hw-scene__scroll-height { /* Height determines how long the scroll sequence lasts. Default: 3 viewport heights per stage. Override with inline style. */ height: 300vh; } /* Progress indicator (optional) */ .hw-scene__progress { position: absolute; bottom: var(--space-40); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-12); z-index: 10; } .hw-scene__progress-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-200); transition: background var(--transition-fast), transform var(--transition-fast); } .hw-scene__progress-dot.is-active { background: var(--color-violet); transform: scale(1.3); } /* ═══════════════════════════════════════════ */ /* CONTENT PAGE */ /* For static pages (privacy, terms, etc.) */ /* ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ */ /* FAQ ACCORDION */ /* ═══════════════════════════════════════════ */ .hw-faq { --hw-faq-max-width: 457px; --hw-faq-heading-gap: clamp(var(--space-24), var(--flex32), var(--space-40)); --hw-faq-row-gap: clamp(var(--space-12), var(--flex16), var(--space-20)); --hw-faq-row-padding-block: clamp(var(--space-12), var(--flex16), var(--space-20)); --hw-faq-question-gap: var(--space-16); --hw-faq-icon-target-size: var(--icon-size-lg); --hw-faq-icon-size: var(--icon-size-sm); --hw-faq-icon-motion-duration: var(--duration-medium); --hw-faq-icon-motion-ease: cubic-bezier(0.2, 0, 0, 1); --hw-faq-divider-color: var(--color-neutral-200); --hw-faq-heading-color: var(--color-text-primary); --hw-faq-question-color: var(--color-text-primary); --hw-faq-question-hover-color: var(--hw-faq-question-color); --hw-faq-answer-color: var(--color-text-secondary); --hw-faq-answer-padding-block-end: clamp(var(--space-16), var(--flex20), var(--space-24)); --hw-faq-row-min-height: clamp(var(--space-64), var(--flex80), var(--space-96)); --hw-faq-motion-duration: 0ms; --hw-faq-motion-ease: cubic-bezier(0.4, 0, 0.2, 1); max-width: var(--hw-faq-max-width); margin-inline: auto; } .hw-faq__heading { margin: 0 0 var(--hw-faq-heading-gap); color: var(--hw-faq-heading-color); font: var(--headline-md); font-weight: var(--font-weight-regular); letter-spacing: 0; } .hw-faq__list { display: flex; flex-direction: column; } .hw-faq__item { border-top: 1px solid var(--hw-faq-divider-color); cursor: pointer; -webkit-tap-highlight-color: transparent; } .hw-faq__item:last-child { border-bottom: 1px solid var(--hw-faq-divider-color); } .hw-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--hw-faq-question-gap); width: 100%; min-height: var(--hw-faq-row-min-height); padding: 0; background: none; border: none; cursor: pointer; font: var(--title-md); font-weight: var(--font-weight-regular); color: var(--hw-faq-question-color); text-align: left; -webkit-tap-highlight-color: transparent; transition: none; } .hw-faq__item:hover .hw-faq__question, .hw-faq__question:hover { color: var(--hw-faq-question-hover-color); } .hw-faq__question:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } .hw-faq__icon { display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; width: var(--hw-faq-icon-target-size); height: var(--hw-faq-icon-target-size); color: currentColor; font-size: 0; line-height: 1; border-radius: var(--radius-full); transition: background-color var(--duration-short) var(--ease-standard); font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-regular), 'GRAD' 0, 'opsz' 24; } .hw-faq__icon::before, .hw-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--hw-faq-icon-size); height: 2px; background: currentColor; border-radius: var(--radius-full); transform-origin: center; transition: transform var(--hw-faq-icon-motion-duration) var(--hw-faq-icon-motion-ease); } .hw-faq__icon::before { transform: translate(-50%, -50%); } .hw-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .hw-faq__item:hover .hw-faq__icon, .hw-faq__question:hover .hw-faq__icon { background-color: color-mix(in srgb, currentColor calc(var(--state-hover) * 100%), transparent); } .hw-faq__item.is-open .hw-faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); } .hw-faq__item.is-open .hw-faq__icon::after { transform: translate(-50%, -50%) rotate(135deg); } /* Layout opens immediately; FAQ rows do not animate so expansion stays responsive. */ .hw-faq__answer { display: grid; grid-template-rows: 0fr; cursor: default; overflow: hidden; transition: none; } .hw-faq__item.is-open .hw-faq__answer { grid-template-rows: 1fr; } .hw-faq__answer-inner { min-height: 0; overflow: hidden; opacity: 1; transform: none; transition: none; } .hw-faq__answer-body { padding: 0 0 var(--hw-faq-answer-padding-block-end); font: var(--body-md); color: var(--hw-faq-answer-color); line-height: var(--line-height-body-md); } @media (prefers-reduced-motion: reduce) { .hw-carousel--fade .hw-carousel__slide { transition: none; } .hw-faq__icon, .hw-faq__icon::before, .hw-faq__icon::after, .hw-faq__answer, .hw-faq__answer-inner { transition: none; } } /* Dark variant */ .hw-faq--on-dark, .hw-section--dark .hw-faq, .hw-section--brand .hw-faq, .dark-context .hw-faq, [data-theme="dark"] .hw-faq { --hw-faq-heading-color: var(--color-text-primary); --hw-faq-question-color: var(--color-text-primary); --hw-faq-question-hover-color: var(--hw-faq-question-color); --hw-faq-answer-color: var(--color-text-secondary); --hw-faq-divider-color: rgba(255, 255, 255, 0.24); } .content-page { max-width: var(--container-md); margin: 0 auto; padding: var(--space-120) var(--section-padding-x) var(--space-64); color: var(--color-text-primary); line-height: 1.7; } .content-page h1 { font: var(--headline-lg); margin-bottom: var(--space-8); } .content-page .effective-date { color: var(--color-text-muted); font: var(--body-sm); margin-bottom: var(--space-40); } .content-page h2 { font: var(--headline-sm); margin-top: var(--space-40); margin-bottom: var(--space-12); } .content-page p { margin-bottom: var(--space-16); font: var(--body-md); } .content-page ul { margin-bottom: var(--space-16); padding-left: var(--space-24); list-style: disc; } .content-page li { margin-bottom: var(--space-12); font: var(--body-md); } .content-page a { color: var(--color-link); text-decoration: underline; } .content-page a:hover { color: var(--color-link-hover); } .privacy-policy-page { --privacy-footer-clearance: 142px; color: var(--color-text-primary); } .privacy-policy-page__breadcrumb { width: min(var(--page-rail), calc(100% - var(--screen-margin) - var(--screen-margin))); margin: 0 auto; padding-top: clamp(28px, 5vw, 56px); } .privacy-policy-shell { padding: clamp(24px, 4vw, 48px) 0 calc(var(--space-120) + var(--privacy-footer-clearance)); } .privacy-policy-shell__rail { display: flex; justify-content: flex-start; } .privacy-policy-page .content-page--legal { width: min(820px, 100%); max-width: 820px; margin: 0; padding: 0 0 var(--space-24); } .privacy-policy-page .content-page h1 { max-width: 100%; margin-bottom: var(--space-12); } .privacy-policy-page .content-page .effective-date { margin-bottom: var(--space-48); } .privacy-policy-page .content-page h2 { margin-top: var(--space-48); padding-top: var(--space-32); border-top: var(--border-width-divider) solid var(--color-border-default); } .privacy-policy-page .content-page h2:first-of-type { margin-top: var(--space-16); } .privacy-policy-page .content-page p, .privacy-policy-page .content-page li { max-width: 75ch; } .privacy-policy-page .content-page ul ul { margin-top: var(--space-12); } .privacy-policy-page .content-page a { overflow-wrap: anywhere; text-underline-offset: 0.18em; } @media (max-width: 767px) { .privacy-policy-page__breadcrumb { width: min(var(--page-rail), calc(100% - var(--screen-margin) - var(--screen-margin))); } .privacy-policy-shell { padding-bottom: calc(var(--space-80) + var(--privacy-footer-clearance)); } .privacy-policy-page .content-page h1 { max-width: 100%; } .privacy-policy-page .content-page h2 { margin-top: var(--space-40); padding-top: var(--space-24); } } /* ══════════════════════════════════════════════════════════════ */ /* hw-person-card — v4 visual language */ /* Photo overflows card bottom with arc top edge (NOT circular) */ /* ══════════════════════════════════════════════════════════════ */ .hw-person-card { background: var(--color-surface-primary); border: 1px solid rgba(163, 40, 255, 0.15); border-radius: var(--radius-lg); padding: var(--space-32) var(--space-24) var(--space-24); display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--shadow-card); position: relative; overflow: visible; margin-bottom: 80px; } .hw-person-card__name { font: var(--title-sm); color: var(--color-text-primary); margin: 0; } .hw-person-card__credential { font-size: var(--text-credential-size, var(--font-size-label-sm)); font-weight: var(--text-credential-weight, var(--font-weight-semibold)); color: var(--text-credential-color, var(--color-violet)); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-8) 0 0; } .hw-person-card__role { font: var(--body-sm); color: var(--color-text-muted); margin: var(--space-4) 0 0; } .hw-person-card__bio { font: var(--body-sm); color: var(--color-text-secondary); margin: var(--space-12) 0 0; } .hw-person-card__linkedin { display: inline-flex; align-items: center; margin-top: var(--space-16); color: var(--color-text-muted); text-decoration: none; font: var(--label-sm); gap: var(--space-4); transition: color var(--transition-fast); } .hw-person-card__linkedin:hover { color: var(--color-violet-dark); } .hw-person-card__photo { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 160px; height: 200px; overflow: hidden; border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 30% 30% var(--radius-lg) var(--radius-lg); } .hw-person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* * INTEGRATED — Button Variants v2 * Styles moved to _components.css (FST-2026-242-btn02, 2026-05-13). * Glass `:root` custom properties moved to component-scoped vars on .hw-btn--glass. * File retained in concat order — safe to remove in next CSS cleanup session. */ /* ============================================ */ /* MOLECULAR COMPONENTS — _molecules.css */ /* Assembled from atoms. Smallest unit that */ /* achieves a recognizable composed purpose. */ /* */ /* Import order: after _components.css */ /* */ /* Molecules (28) — FST-2026-187 through 237: */ /* mol01 hw-tag FST-2026-187 */ /* mol02 hw-notification FST-2026-188 */ /* mol03 hw-card FST-2026-189 */ /* mol04 hw-filter-chip FST-2026-190 */ /* mol05 hw-pullquote FST-2026-191 */ /* mol06 hw-stat-callout FST-2026-192 */ /* mol07 hw-comparison-bar FST-2026-193 */ /* mol08 hw-benchmark-indicator FST-2026-194 */ /* mol09 hw-sticky-cta-bar FST-2026-195 */ /* mol10 hw-avatar FST-2026-204 */ /* mol11 hw-author-card FST-2026-205 */ /* mol12 hw-card--story FST-2026-206 */ /* mol13 hw-summary-box FST-2026-207 */ /* mol14 hw-benefit-list FST-2026-208 */ /* mol15 hw-speaker-card FST-2026-209 */ /* mol16 hw-countdown-timer FST-2026-210 */ /* mol17 hw-process-step/list FST-2026-211 */ /* mol18 hw-staleness-indicator FST-2026-212 */ /* mol19 hw-press-card FST-2026-213 */ /* mol20 hw-company-glance FST-2026-214 */ /* mol21 hw-company-logo FST-2026-215 */ /* mol22 hw-form-success FST-2026-216 */ /* mol23 hw-video-player FST-2026-217 */ /* mol24 hw-proof-point FST-2026-233 */ /* mol25 hw-related-links-group FST-2026-234 */ /* mol26 hw-support-escalation FST-2026-235 */ /* mol27 hw-feature-card FST-2026-236 */ /* mol28 hw-proof-display FST-2026-237 */ /* ============================================ */ /* ── hw-avatar (Atom) ────────────────────────────────────── */ .hw-avatar { --_avatar-size: var(--avatar-size-md); /* 48px default — override via size modifier */ display: inline-flex; align-items: center; justify-content: center; width: var(--_avatar-size); height: var(--_avatar-size); flex-shrink: 0; border-radius: var(--radius-full); overflow: hidden; background-color: var(--color-surface-avatar-fallback); border: var(--border-width-1) solid var(--color-neutral-200); } .hw-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Size variants */ .hw-avatar--sm { --_avatar-size: var(--avatar-size-sm); } /* 32px */ .hw-avatar--md { --_avatar-size: var(--avatar-size-md); } /* 48px */ .hw-avatar--lg { --_avatar-size: var(--avatar-size-lg); } /* 72px */ /* Brand fallback — editorial team, no individual headshot. Background: --color-blue (Lift Blue). Logo mark via background-image or slot SVG. Consumer must supply the logo mark SVG as a background-image or inline SVG child. */ .hw-avatar--brand { background-color: var(--color-blue); border-color: var(--color-blue); } /* ── hw-author-card ──────────────────────────────────────── */ .hw-author-card { display: flex; align-items: center; gap: var(--space-16); } .hw-author-card__meta { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; /* prevents long names from overflowing flex container */ flex: 1 1 0; } .hw-author-card__name { font: var(--label-lg); /* 16px semibold */ color: var(--color-text-primary); } .hw-author-card__role { font: var(--label-md); /* 14px semibold — step down */ color: var(--color-text-secondary); } /* ── hw-tag (static metadata tag) ────────────────────────── */ /* Tags are non-interactive labels for products, resources, integrations, and metadata. Clickable/filterable versions are hw-chip components. */ .hw-tag { --hw-tag-bg: var(--color-tag-bg); --hw-tag-color: var(--color-tag-text); --hw-tag-shadow: none; --hw-tag-font-weight: var(--font-weight-regular); --hw-tag-font-size: var(--font-size-label-md); --hw-tag-line-height: calc(var(--space-12) + var(--space-2)); --hw-tag-letter-spacing: 0; --hw-tag-icon-size: var(--icon-size-xs); --hw-tag-padding-block: calc(var(--space-4) + var(--space-2)); --hw-tag-padding-inline: var(--space-12); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); max-width: 100%; min-height: calc(var(--hw-tag-icon-size) + (var(--hw-tag-padding-block) * 2)); padding: var(--hw-tag-padding-block) var(--hw-tag-padding-inline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--hw-tag-font-weight) var(--hw-tag-font-size)/var(--hw-tag-line-height) var(--font-family); letter-spacing: var(--hw-tag-letter-spacing); background-color: var(--hw-tag-bg); color: var(--hw-tag-color); border: 0; border-radius: var(--radius-full); box-shadow: var(--hw-tag-shadow); cursor: default; user-select: none; } .hw-tag--featured { --hw-tag-shadow: var(--shadow-tag-featured); } .hw-tag--standard { --hw-tag-shadow: none; } .hw-tag__icon, .hw-tag > .material-symbols-rounded { width: var(--hw-tag-icon-size); height: var(--hw-tag-icon-size); font-size: var(--hw-tag-icon-size); line-height: 1; flex: 0 0 var(--hw-tag-icon-size); color: currentColor; fill: currentColor; } .hw-tag > .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' var(--hw-tag-font-weight), 'GRAD' 0, 'opsz' 20; } /* ── hw-notification ────────────────────────────────────── */ /* Variant custom properties — defaults (note/tip) */ .hw-notification { --hw-notification-accent: var(--color-violet); --hw-notification-bg: var(--color-violet-50); --hw-notification-icon: var(--color-violet); } /* Variant overrides */ .hw-notification--note, .hw-notification--tip { --hw-notification-accent: var(--color-violet); --hw-notification-bg: var(--color-violet-50); --hw-notification-icon: var(--color-violet); } .hw-notification--warning { --hw-notification-accent: var(--color-background-warning); --hw-notification-bg: var(--color-amber-100); --hw-notification-icon: #B86800; /* Custom CSS exception: no token yet — see PRD FST-2026-188 */ } .hw-notification--error { --hw-notification-accent: var(--color-error); --hw-notification-bg: var(--color-danger-100); --hw-notification-icon: var(--color-error); } /* Base component */ .hw-notification { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-16); margin: var(--space-32) 0; border-left: var(--border-width-4) solid var(--hw-notification-accent); border-radius: var(--radius-sm); background-color: var(--hw-notification-bg); } .hw-notification__icon { flex-shrink: 0; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--hw-notification-icon); fill: var(--hw-notification-icon); } .hw-notification__content { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .hw-notification__title { font: var(--title-sm); color: var(--color-text-primary); margin: 0; } .hw-notification__body { font: var(--body-sm); color: var(--color-text-secondary); margin: 0; } /* Banner modifier — no side margins */ .hw-notification--banner { margin-left: 0; margin-right: 0; } /* Warning text — amber tint requires darker text for WCAG AA */ .hw-notification--warning .hw-notification__title, .hw-notification--warning .hw-notification__body { color: var(--color-text-on-warning); /* #1F2937 on amber-100 ≈ 13.97:1 ✓ */ } /* ── hw-card ─────────────────────────────────────────────── */ /* Card grid container */ .hw-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-24); } /* Outer container */ .hw-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: var(--border-width-1) solid var(--color-border-default); background-color: var(--color-surface-card); overflow: hidden; box-shadow: var(--elevation-1); transition: box-shadow var(--duration-medium) var(--ease-standard), border-color var(--duration-medium) var(--ease-standard); } /* Image container — 16:9 aspect ratio */ .hw-card__image { position: relative; padding-bottom: 56.25%; background-color: var(--color-surface-secondary); flex-shrink: 0; } .hw-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Missing image fallback */ .hw-card__image--empty { background-color: var(--color-surface-secondary); } /* Body block */ .hw-card__body { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); flex: 1; } /* Title — 2-line clamp */ .hw-card__title { font: var(--headline-sm); color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } /* Description — 3-line clamp, flex:1 pushes meta to bottom */ .hw-card__description { font: var(--body-md); color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; margin: 0; } /* Metadata */ .hw-card__meta { font: var(--label-sm); color: var(--color-text-muted); margin-top: auto; } /* Clickable variant */ .hw-card--link { text-decoration: none; cursor: pointer; color: inherit; display: flex; flex-direction: column; } .hw-card--link:hover { box-shadow: var(--elevation-2); border-color: var(--color-border-interactive); } .hw-card--link:focus-visible { outline: var(--border-width-2) solid var(--color-border-interactive); outline-offset: var(--space-4); box-shadow: var(--elevation-2); border-color: var(--color-border-interactive); } .hw-card--link:active { transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { .hw-card { transition: none; } .hw-card--link:active { transform: none; } } /* ── hw-feature-card ────────────────────────────────────── */ /* Reusable feature/featured content card for product highlights, resource-center featured entries, pricing callouts, and similar content. "Featured" comes from promoted placement, span, optional media/aside, elevated surface, and optional accent treatment. This is not the default pattern for long lists; list/resource rows should use quieter list-item structures. Padding and internal gaps consume flex density tokens with component-level clamps. */ .hw-feature-card-grid { --hw-feature-card-grid-min: 300px; --hw-feature-card-grid-max: 1fr; --hw-feature-card-grid-gap: clamp(var(--space-16), var(--flex20), var(--space-24)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hw-feature-card-grid-min)), var(--hw-feature-card-grid-max))); gap: var(--hw-feature-card-grid-gap); align-items: stretch; } .hw-feature-card-grid--fit { --hw-feature-card-grid-max: var(--hw-feature-card-grid-min); justify-content: center; } .hw-feature-card { --hw-feature-card-padding-block-start: clamp(var(--space-16), var(--flex20), var(--space-24)); --hw-feature-card-padding-inline: clamp(var(--space-16), var(--flex20), var(--space-32)); --hw-feature-card-padding-block-end: clamp(var(--space-20), var(--flex24), var(--space-32)); --hw-feature-card-gap: clamp(var(--space-12), var(--flex16), var(--space-24)); --hw-feature-card-content-gap: clamp(var(--space-8), var(--flex12), var(--space-16)); --hw-feature-card-min-inline-size: 280px; --hw-feature-card-max-measure: 64ch; --hw-feature-card-title-lines: 2; --hw-feature-card-description-lines: 4; --hw-feature-card-media-ratio: 4 / 3; --hw-feature-card-media-min-block-size: 136px; --hw-feature-card-media-max-block-size: 220px; --hw-feature-card-media-inline-size: clamp(176px, 32%, 296px); --hw-feature-card-media-radius: 10px; --hw-feature-card-min-block-size: auto; --hw-feature-card-accent-size: 0px; --hw-feature-card-accent-color: transparent; --hw-feature-card-bg: var(--color-surface-primary); --hw-feature-card-border-color: rgba(17, 17, 17, 0.06); --hw-feature-card-shadow: var(--shadow-card-feature); --hw-feature-card-hover-shadow: 0 8px 48px rgba(0, 0, 0, 0.12); --hw-feature-card-hover-bg: var(--hw-feature-card-bg); position: relative; display: flex; flex-direction: column; gap: var(--hw-feature-card-gap); min-inline-size: min(100%, var(--hw-feature-card-min-inline-size)); min-block-size: var(--hw-feature-card-min-block-size); padding: var(--hw-feature-card-padding-block-start) var(--hw-feature-card-padding-inline) var(--hw-feature-card-padding-block-end); color: inherit; background: var(--hw-feature-card-bg); border: 1px solid var(--hw-feature-card-border-color); border-radius: var(--radius-xl); box-shadow: inset 0 var(--hw-feature-card-accent-size) 0 var(--hw-feature-card-accent-color), var(--hw-feature-card-shadow); overflow: hidden; transition: background-color var(--duration-medium) var(--ease-standard), border-color var(--duration-medium) var(--ease-standard), box-shadow var(--duration-medium) var(--ease-standard); } .hw-feature-card--accent-violet { --hw-feature-card-accent-size: 7px; --hw-feature-card-accent-color: var(--color-violet); } .hw-feature-card--accent-blue { --hw-feature-card-accent-size: 7px; --hw-feature-card-accent-color: var(--color-blue); } .hw-feature-card--accent-green { --hw-feature-card-accent-size: 7px; --hw-feature-card-accent-color: var(--color-green); } .hw-feature-card--accent-dark { --hw-feature-card-accent-size: 7px; --hw-feature-card-accent-color: var(--color-neutral-900); } .hw-feature-card--quiet { --hw-feature-card-shadow: none; --hw-feature-card-hover-shadow: none; --hw-feature-card-border-color: var(--color-border-default); } .hw-feature-card--vertical-media { --hw-feature-card-padding-block-start: var(--space-24); --hw-feature-card-padding-inline: var(--space-24); --hw-feature-card-padding-block-end: var(--space-32); --hw-feature-card-gap: var(--space-12); --hw-feature-card-content-gap: var(--space-12); --hw-feature-card-min-inline-size: 300px; --hw-feature-card-min-block-size: 552px; --hw-feature-card-max-measure: 32ch; --hw-feature-card-title-lines: 3; --hw-feature-card-description-lines: 5; } .hw-feature-card--link { color: inherit; text-decoration: none; cursor: pointer; } .hw-feature-card--link:hover { background-color: var(--hw-feature-card-hover-bg); border-color: var(--color-border-interactive); box-shadow: inset 0 var(--hw-feature-card-accent-size) 0 var(--hw-feature-card-accent-color), var(--hw-feature-card-hover-shadow); } .hw-feature-card--link:focus-visible { outline: var(--border-width-2) solid var(--color-border-interactive); outline-offset: var(--space-4); border-color: var(--color-border-interactive); } .hw-feature-card__content, .hw-feature-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--hw-feature-card-content-gap); min-inline-size: 0; max-inline-size: var(--hw-feature-card-max-measure); } .hw-feature-card__tag, .hw-feature-card .hw-tag { align-self: flex-start; } .hw-feature-card__title { margin: 0; color: var(--color-text-primary); font: var(--title-md); font-weight: var(--font-weight-semibold); max-inline-size: var(--hw-feature-card-max-measure); display: -webkit-box; -webkit-line-clamp: var(--hw-feature-card-title-lines); -webkit-box-orient: vertical; overflow: hidden; } .hw-feature-card__description, .hw-feature-card__text { margin: 0; color: var(--color-text-secondary); font: var(--body-md); max-inline-size: var(--hw-feature-card-max-measure); display: -webkit-box; -webkit-line-clamp: var(--hw-feature-card-description-lines); -webkit-box-orient: vertical; overflow: hidden; } .hw-feature-card__action { display: inline-flex; align-items: center; gap: var(--space-8); align-self: flex-start; margin-top: auto; color: var(--color-violet); font: var(--body-md); font-weight: var(--font-weight-semibold); text-decoration: none; } .hw-feature-card__title-link { color: inherit; text-decoration: none; } .hw-feature-card__title-link:hover { color: var(--color-violet); text-decoration: underline; text-underline-offset: 3px; } .hw-feature-card__action:hover { text-decoration: underline; text-underline-offset: 3px; } .hw-feature-card__title-link:focus-visible, .hw-feature-card__action:focus-visible { outline: var(--border-width-2) solid var(--color-border-interactive); outline-offset: var(--space-4); border-radius: var(--radius-xs); } .hw-feature-card__action .material-symbols-rounded { width: var(--icon-size-sm); height: var(--icon-size-sm); font-size: var(--icon-size-sm); line-height: 1; font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-semibold), 'GRAD' 0, 'opsz' 24; } .hw-feature-card__media { position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: var(--hw-feature-card-media-ratio); min-block-size: var(--hw-feature-card-media-min-block-size); max-block-size: var(--hw-feature-card-media-max-block-size); background: linear-gradient(135deg, rgba(245, 247, 253, 0.95), rgba(224, 232, 248, 0.86)); border-radius: var(--hw-feature-card-media-radius); overflow: hidden; color: var(--color-text-muted); } .hw-feature-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .hw-feature-card__media .material-symbols-rounded { font-size: var(--icon-size-xl); line-height: 1; opacity: 0.7; font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-regular), 'GRAD' 0, 'opsz' 48; } .hw-feature-card__aside { display: flex; align-items: center; justify-content: center; flex: 0 0 clamp(128px, 22%, 184px); min-inline-size: 128px; padding-inline-start: clamp(var(--space-16), var(--flex24), var(--space-32)); border-left: 1px solid var(--color-border-subtle); } .hw-feature-card--horizontal { flex-direction: row; align-items: stretch; } .hw-feature-card--horizontal .hw-feature-card__media { flex: 0 1 var(--hw-feature-card-media-inline-size); inline-size: auto; min-inline-size: 184px; max-inline-size: 320px; min-block-size: 160px; max-block-size: none; aspect-ratio: auto; } .hw-feature-card--horizontal-reverse { flex-direction: row-reverse; } .hw-feature-card--compact { --hw-feature-card-padding-block-start: clamp(var(--space-16), var(--flex20), var(--space-24)); --hw-feature-card-padding-inline: clamp(var(--space-16), var(--flex20), var(--space-32)); --hw-feature-card-padding-block-end: clamp(var(--space-20), var(--flex24), var(--space-32)); --hw-feature-card-description-lines: 3; } @media (max-width: 767px) { .hw-feature-card { --hw-feature-card-min-inline-size: 0px; } .hw-feature-card--horizontal, .hw-feature-card--horizontal-reverse { flex-direction: column; } .hw-feature-card--horizontal .hw-feature-card__media, .hw-feature-card--horizontal-reverse .hw-feature-card__media { inline-size: 100%; min-inline-size: 0; max-inline-size: none; aspect-ratio: var(--hw-feature-card-media-ratio); } .hw-feature-card__aside { flex-basis: auto; inline-size: 100%; min-inline-size: 0; padding-block-start: var(--space-16); padding-inline-start: 0; border-top: 1px solid var(--color-border-subtle); border-left: 0; } } @media (prefers-reduced-motion: reduce) { .hw-feature-card { transition: none; } .hw-feature-card--link:hover, .hw-feature-card--link:active { transform: none; } } /* ── hw-filter-chip ──────────────────────────────────────── */ /* Chip row container */ .hw-chip-row { display: flex; gap: var(--space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-4); scrollbar-width: none; } .hw-chip-row::-webkit-scrollbar { display: none; } /* Individual chip */ .hw-chip { --hw-chip-icon-size: var(--icon-size-xs); --hw-chip-focus-ring-color: var(--color-neutral-900); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: var(--space-8); box-sizing: border-box; width: fit-content; max-width: 100%; height: 40px; min-height: 40px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-full); border: var(--border-interactive-default); background-color: transparent; color: var(--color-violet-dark); font: var(--label-md); white-space: nowrap; cursor: pointer; transition: background-color var(--duration-short) var(--ease-standard), color var(--duration-short) var(--ease-standard), border-color var(--duration-short) var(--ease-standard); } .hw-chip::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--duration-short) var(--ease-standard); } /* Hover (inactive base fill) */ .hw-chip:hover:not(.is-active):not(.is-selected):not([aria-pressed="true"]):not([aria-selected="true"]) { background-color: var(--color-violet-50); } .hw-chip:hover::before { opacity: var(--state-hover); } .hw-chip__icon, .hw-chip > .material-symbols-rounded { width: var(--hw-chip-icon-size); height: var(--hw-chip-icon-size); font-size: var(--hw-chip-icon-size); line-height: 1; flex: 0 0 var(--hw-chip-icon-size); color: currentColor; } .hw-chip > .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-medium), 'GRAD' 0, 'opsz' 20; } /* Active / selected — both class and aria-pressed selectors */ .hw-chip.is-active, .hw-chip[aria-pressed="true"] { background-color: var(--color-violet-dark); border-color: var(--color-violet-dark); color: var(--color-white); } .hw-chip:disabled, .hw-chip[aria-disabled="true"] { background-color: var(--color-neutral-100); border-color: var(--color-border-disabled); color: var(--color-neutral-400); cursor: not-allowed; transform: none; } .hw-chip:disabled::before, .hw-chip[aria-disabled="true"]::before { opacity: 0; } /* Focus-visible */ .hw-chip:focus-visible { outline: 3px solid var(--hw-chip-focus-ring-color); outline-offset: 3px; } .hw-chip:focus-visible::before { opacity: var(--state-focus); } /* Press */ .hw-chip:active { transform: scale(0.98); } .hw-chip--input { --hw-chip-action-size: 20px; gap: var(--space-8); padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12); cursor: grab; user-select: none; -webkit-user-select: none; } .hw-chip--input::before { display: none; } .hw-chip.hw-chip--input.is-selected, .hw-chip.hw-chip--input[aria-selected="true"], .hw-chip.hw-chip--input.is-selected:hover, .hw-chip.hw-chip--input[aria-selected="true"]:hover { background-color: var(--color-violet-dark); border-color: var(--color-violet-dark); color: var(--color-white); } .hw-chip--input.is-dragging { opacity: 0.72; transform: translateY(-1px); box-shadow: var(--shadow-md); cursor: grabbing; } .hw-chip__label { position: relative; z-index: 1; min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; user-select: none; -webkit-user-select: none; white-space: nowrap; } .hw-chip__remove { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--hw-chip-action-size); height: var(--hw-chip-action-size); flex: 0 0 var(--hw-chip-action-size); padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: currentColor; } .hw-chip__remove { cursor: pointer; } .hw-chip__remove:hover { background-color: var(--color-violet-100); color: var(--color-violet-dark); } .hw-chip--input.is-selected .hw-chip__remove:hover, .hw-chip--input[aria-selected="true"] .hw-chip__remove:hover { background-color: rgba(255, 255, 255, 0.18); color: var(--color-white); } .hw-chip__remove:focus-visible { outline: 3px solid var(--hw-chip-focus-ring-color); outline-offset: 2px; } .hw-chip__remove > .material-symbols-rounded { width: var(--hw-chip-icon-size); height: var(--hw-chip-icon-size); font-size: var(--hw-chip-icon-size); line-height: 1; font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-medium), 'GRAD' 0, 'opsz' 20; } .hw-chip--input[aria-disabled="true"] .hw-chip__remove, .hw-chip__remove:disabled { cursor: not-allowed; opacity: 0.58; } .hw-chip--input[aria-disabled="true"] .hw-chip__remove:hover, .hw-chip__remove:disabled:hover { background-color: transparent; color: currentColor; } .hw-chip--input[aria-disabled="true"] { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .hw-chip { transition: none; } } /* ── hw-pullquote ────────────────────────────────────────── */ .hw-pullquote { margin: var(--space-48) 0; padding: 0; border: none; font-style: normal; } /* Opening quotation mark */ .hw-pullquote::before { content: '\201C'; display: block; font-family: var(--font-family); font-size: var(--font-size-display-md); font-weight: var(--font-weight-black); line-height: 0.8; color: var(--color-text-accent); margin-bottom: var(--space-16); } /* Quote text — font shorthand then clamp override */ .hw-pullquote__text { font: var(--display-pullquote); font-size: clamp(1.75rem, 1.5rem + 2vw, 3rem); color: var(--color-text-primary); margin: 0; font-style: normal; } /* Attribution (optional — no gap when absent) */ .hw-pullquote__attribution { display: block; font: var(--body-sm); color: var(--color-text-secondary); font-style: italic; margin-top: var(--space-16); } .hw-pullquote__attribution::before { content: '\2014\00A0'; } /* ── hw-stat-callout ─────────────────────────────────────── */ /* No visible container — whitespace isolation only */ .hw-stat-callout { padding: var(--space-48) 0; text-align: center; } /* Value: display-lg, dark text (NOT violet — scale does emphasis here) */ .hw-stat-callout__value { display: block; font: var(--display-lg); font-size: clamp(2.5rem, 2rem + 4vw, 4rem); letter-spacing: var(--letter-spacing-display-lg); color: var(--color-text-primary); } /* Label */ .hw-stat-callout__label { display: block; font: var(--label-lg); color: var(--color-text-secondary); margin-top: var(--space-8); } /* Context — optional, no gap when absent */ .hw-stat-callout__context { display: block; font: var(--body-sm); color: var(--color-text-muted); margin-top: var(--space-4); max-width: 40ch; margin-inline: auto; } /* ── hw-proof-display (Display proof points) ─────────────── */ /* Large numeric proof points for promoted stats. Uses Material display/label roles and neutral emphasis; color is not the affordance. */ .hw-proof-display { --hw-proof-display-min-column: 160px; --hw-proof-display-item-gap: var(--space-4); --hw-proof-display-divider-color: var(--color-border-subtle); --hw-proof-display-value-font: var(--display-md); --hw-proof-display-label-font: var(--body-sm); --hw-proof-display-value-color: var(--color-text-primary); --hw-proof-display-label-color: var(--color-text-secondary); --hw-proof-display-item-padding-inline: clamp(var(--space-8), var(--flex16), var(--space-24)); --hw-proof-display-item-padding-block: var(--space-4); --hw-proof-display-label-measure: 24ch; --hw-proof-display-value-column: auto; --hw-proof-display-label-column: minmax(0, 1fr); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hw-proof-display-min-column)), 1fr)); align-items: stretch; margin: 0; } .hw-proof-display__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hw-proof-display-item-gap); min-width: 0; padding: var(--hw-proof-display-item-padding-block) var(--hw-proof-display-item-padding-inline); text-align: center; } .hw-proof-display__value { display: block; flex: 0 0 var(--hw-proof-display-value-column); color: var(--hw-proof-display-value-color); font: var(--hw-proof-display-value-font); font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; } .hw-proof-display__label { display: block; flex: 1 1 auto; max-width: var(--hw-proof-display-label-measure); margin: 0; color: var(--hw-proof-display-label-color); font: var(--hw-proof-display-label-font); } .hw-proof-display--horizontal .hw-proof-display__item + .hw-proof-display__item { border-left: 1px solid var(--hw-proof-display-divider-color); } .hw-proof-display--vertical { --hw-proof-display-value-column: clamp(7rem, 36%, 8.5rem); grid-template-columns: 1fr; gap: var(--space-16); } .hw-proof-display--vertical .hw-proof-display__item { display: grid; grid-template-columns: var(--hw-proof-display-value-column) var(--hw-proof-display-label-column); gap: var(--space-12); align-items: center; justify-content: stretch; text-align: left; } .hw-proof-display--vertical .hw-proof-display__value { min-width: 0; justify-self: center; text-align: center; } .hw-proof-display--vertical .hw-proof-display__label { width: 100%; max-width: none; } .hw-proof-display--vertical .hw-proof-display__item + .hw-proof-display__item { padding-top: var(--space-16); border-top: 1px solid var(--hw-proof-display-divider-color); } .hw-proof-display-card { --hw-proof-display-card-padding: var(--space-24) var(--space-24) var(--space-40); --hw-proof-display-card-radius: 16px; --hw-proof-display-card-max-width: 360px; display: grid; gap: var(--space-20); width: 100%; max-width: var(--hw-proof-display-card-max-width); min-width: 0; padding: var(--hw-proof-display-card-padding); border: 1px solid rgba(224, 229, 242, 0.7); border-radius: var(--hw-proof-display-card-radius); background: rgba(255, 255, 255, 0.86); box-shadow: var(--shadow-sm); } .hw-proof-display-card > .hw-tag { justify-self: center; } .hw-proof-display--single { display: inline-grid; grid-template-columns: 1fr; } .hw-proof-display--single .hw-proof-display__item { padding: 0; } @media (max-width: 767px) { .hw-proof-display--horizontal { grid-template-columns: 1fr; gap: var(--space-16); } .hw-proof-display--horizontal .hw-proof-display__item { padding-inline: var(--space-0); } .hw-proof-display--horizontal .hw-proof-display__item + .hw-proof-display__item { padding-top: var(--space-16); border-top: 1px solid var(--hw-proof-display-divider-color); border-left: 0; } } /* ── hw-comparison-bar ───────────────────────────────────── */ /* Outer container */ .hw-comparison-bar { display: flex; flex-direction: column; gap: var(--space-16); } /* Each bar row: 3-column grid — 120px | 1fr | auto */ .hw-comparison-bar__row { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-12); align-items: center; } /* Label (col 1) */ .hw-comparison-bar__label { font: var(--label-md); color: var(--color-text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bar track (col 2) */ .hw-comparison-bar__track { background-color: var(--color-neutral-200); height: var(--space-12); border-radius: var(--radius-full); overflow: hidden; } /* Fill elements — width driven by inline style; role="img" aria-label required in HTML */ .hw-comparison-bar__fill-before, .hw-comparison-bar__fill-after { display: block; height: 100%; border-radius: var(--radius-full); min-width: 0; } .hw-comparison-bar__fill-before { background-color: var(--color-violet); } .hw-comparison-bar__fill-after { background-color: var(--color-neutral-400); } /* Value (col 3) */ .hw-comparison-bar__value { font: var(--label-md); color: var(--color-text-primary); white-space: nowrap; } /* Loading skeleton state */ .hw-comparison-bar--loading .hw-comparison-bar__fill-before, .hw-comparison-bar--loading .hw-comparison-bar__fill-after { background-color: var(--color-neutral-200); width: 100%; animation: hw-comparison-bar-pulse var(--duration-xlong) var(--ease-standard) var(--motion-iteration-infinite) alternate; } @keyframes hw-comparison-bar-pulse { from { opacity: 1; } to { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .hw-comparison-bar--loading .hw-comparison-bar__fill-before, .hw-comparison-bar--loading .hw-comparison-bar__fill-after { animation: none; } } /* Mobile reflow (<480px) — label stacks above track + value */ @media (max-width: 480px) { .hw-comparison-bar__row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; } .hw-comparison-bar__label { grid-column: 1 / -1; grid-row: 1; text-align: left; } .hw-comparison-bar__track { grid-column: 1; grid-row: 2; } .hw-comparison-bar__value { grid-column: 2; grid-row: 2; } } /* ── hw-benchmark-indicator ──────────────────────────────── */ /* Outer container */ .hw-benchmark-indicator { position: relative; width: 100%; padding: var(--space-32) 0; } /* Axis line */ .hw-benchmark-indicator__axis { position: relative; width: 100%; height: var(--border-width-2); background-color: var(--color-neutral-200); } /* Markers — shared base */ .hw-benchmark-indicator__marker { position: absolute; top: 0; } /* Industry average marker (circle) */ .hw-benchmark-indicator__marker--industry { width: 10px; height: 10px; border-radius: var(--radius-full); background-color: var(--color-neutral-400); transform: translateX(-50%) translateY(-50%); } /* HouseWhisper marker (diamond) — transform ORDER IS CRITICAL */ .hw-benchmark-indicator__marker--hw { width: 12px; height: 12px; border-radius: var(--radius-xs); background-color: var(--color-violet); transform: translateX(-50%) translateY(-50%) rotate(45deg); } /* Labels — shared base */ .hw-benchmark-indicator__label { position: absolute; white-space: nowrap; font: var(--label-sm); transform: translateX(-50%); } /* Industry label (below axis) */ .hw-benchmark-indicator__label--industry { top: calc(100% + var(--space-8)); color: var(--color-text-secondary); } /* HouseWhisper label (above axis) */ .hw-benchmark-indicator__label--hw { bottom: calc(100% + var(--space-8)); color: var(--color-text-accent); font-weight: var(--font-weight-bold); } /* Loading skeleton state */ .hw-benchmark-indicator--loading .hw-benchmark-indicator__marker--skeleton { position: absolute; top: 0; width: 10px; height: 10px; border-radius: var(--radius-full); background-color: var(--color-neutral-200); transform: translateX(-50%) translateY(-50%); animation: hw-benchmark-pulse var(--duration-xlong) var(--ease-standard) var(--motion-iteration-infinite) alternate; } @keyframes hw-benchmark-pulse { from { opacity: 1; } to { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .hw-benchmark-indicator--loading .hw-benchmark-indicator__marker--skeleton { animation: none; } } /* ── hw-sticky-cta-bar ───────────────────────────────────── */ /* Base: opaque fallback for browsers without backdrop-filter */ .hw-sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-16) var(--space-32); background: rgba(255, 255, 255, 0.92); /* opaque fallback — Firefox */ box-shadow: var(--elevation-4); transform: translateY(100%); transition: transform var(--duration-medium) var(--ease-emphasized-decelerate); isolation: isolate; /* stacking context for z-index:-1 pseudo-elements */ } /* Glass surface — backdrop-filter browsers only */ @supports (backdrop-filter: blur(9px)) or (-webkit-backdrop-filter: blur(9px)) { .hw-sticky-cta-bar { background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(9px) saturate(210%); -webkit-backdrop-filter: blur(9px) saturate(210%); } } /* Visible state */ .hw-sticky-cta-bar.is-visible { transform: translateY(0); } /* Entry face ::before — specular highlight top-left */ .hw-sticky-cta-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, transparent 45%); pointer-events: none; z-index: -1; } /* Exit face ::after — transmission glow bottom-right */ .hw-sticky-cta-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(315deg, rgba(255, 255, 255, 0.26) 0%, rgba(0, 0, 0, 0.10) 100%); pointer-events: none; z-index: -1; } /* Headline */ .hw-sticky-cta-bar__headline { font: var(--title-lg); color: var(--color-text-inverse); flex: 1; min-width: 0; /* REQUIRED — enables text truncation in flex context */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* CTA — composited via .hw-btn.hw-btn--primary; no additional styles needed */ /* Dismiss button */ .hw-sticky-cta-bar__dismiss { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-full); cursor: pointer; color: rgba(255, 255, 255, 0.70); transition: background-color var(--duration-short) var(--ease-standard), color var(--duration-short) var(--ease-standard); } .hw-sticky-cta-bar__dismiss:hover { background-color: rgba(255, 255, 255, 0.12); color: var(--color-white); } .hw-sticky-cta-bar__dismiss:focus-visible { outline: var(--border-width-2) solid var(--color-white); outline-offset: 2px; } /* Mobile <480px: hide headline, CTA + dismiss only */ @media (max-width: 479px) { .hw-sticky-cta-bar__headline { display: none; } } @media (prefers-reduced-motion: reduce) { .hw-sticky-cta-bar { transition: none; } } /* ── hw-card--story (Customer Story card modifier) ─────── */ /* Logo container replaces the 16:9 image slot as first child */ .hw-card--story .hw-card__logo-container { display: flex; justify-content: center; align-items: center; background-color: var(--color-neutral-100); padding: var(--space-20); height: var(--space-80); flex-shrink: 0; } /* Logo image — normalizes variable aspect ratios */ .hw-card--story .hw-card__logo-container img { max-width: 80%; max-height: 80%; width: auto; height: auto; object-fit: contain; display: block; } /* ── hw-summary-box (Customer Story context block) ──────── */ .hw-summary-box { padding: var(--space-24); border: var(--border-width-1) solid var(--color-neutral-200); border-radius: var(--radius-md); background-color: var(--color-surface-primary); } .hw-summary-box__heading { font: var(--title-sm); color: var(--color-text-primary); margin-bottom: var(--space-16); } .hw-summary-box__list { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; } .hw-summary-box__row { display: flex; justify-content: space-between; align-items: baseline; } .hw-summary-box__key { font: var(--body-sm); color: var(--color-text-secondary); } .hw-summary-box__value { font: var(--body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* ── hw-benefit-list (Ebook benefit bullets) ───────────── */ .hw-benefit-list { list-style: none; padding-left: var(--space-0); margin: 0; display: flex; flex-direction: column; gap: var(--space-16); } .hw-benefit-list__item { display: flex; align-items: flex-start; gap: var(--space-12); } .hw-benefit-list__icon { flex-shrink: 0; color: var(--color-violet); width: var(--icon-size-md); height: var(--icon-size-md); } .hw-benefit-list__text { font: var(--body-md); color: var(--color-text-secondary); } /* ── hw-speaker-card (Webinar speaker credentials) ──────── */ /* ── Component: hw-speaker-card ────────────────────────────────────────── Molecule for speaker credentials on webinar pages. Composition: vertical stack — avatar (top) → name → title → company logo. The hw-avatar atom is used via class composition in HTML; this file does NOT reimplement avatar styles. New molecule — NOT a variant of hw-card (different structure: vertical centred stack vs. 16:9 image + body). SME sources: Kenji Watanabe (token spec), Maya Torres (composition), Jordan Park (grid container flag). ─────────────────────────────────────────────────────────────────────── */ .hw-speaker-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; } /* ── Name ── */ .hw-speaker-card__name { font: var(--body-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-align: center; margin: 0; } /* ── Title / role ── */ .hw-speaker-card__title { font: var(--body-md); color: var(--color-text-secondary); text-align: center; margin: 0; } /* ── Company logo ── */ /* Grayscale treatment; max-height anchored to --space-32 (32px) */ .hw-speaker-card__logo { max-height: var(--space-32); width: auto; object-fit: contain; opacity: 0.7; filter: grayscale(100%); } /* ── Speaker grid container ── */ /* Jordan Park flag: use .auto-grid with --auto-grid-min: 260px. A single .auto-grid utility class is expected to exist in the layout system; this block wires the min-width custom property for the hw-speaker-card context. */ .hw-speaker-grid { --auto-grid-min: 260px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min), 1fr)); gap: var(--space-32); } /* ── Reduced-motion override ── */ /* hw-speaker-card has no motion at rest; placeholder ensures the pattern is present if entrance animations are added later. */ @media (prefers-reduced-motion: reduce) { .hw-speaker-card, .hw-speaker-card__logo { transition: none; animation: none; } } /* ── hw-countdown-timer (Webinar live countdown) ────────── */ .hw-countdown-timer { display: flex; gap: var(--space-24); } .hw-countdown-timer__block { background-color: var(--color-neutral-100); border: var(--border-width-1) solid var(--color-neutral-200); border-radius: var(--radius-md); padding: var(--space-16) var(--space-24); } .hw-countdown-timer__unit { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .hw-countdown-timer__number { font: var(--headline-md); color: var(--color-text-primary); font-variant-numeric: tabular-nums; } .hw-countdown-timer__label { font: var(--label-sm); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } @media (prefers-reduced-motion: reduce) { .hw-countdown-timer__number { transition: none; } } /* ── hw-process-step + hw-process-list (Agent Tips how-to) ── */ /* ───────────────────────────────────────────── hw-process-list — organism container ───────────────────────────────────────────── */ .hw-process-list { display: flex; flex-direction: column; gap: var(--space-32); position: relative; } /* Dashed connecting line — single ::before on the container. Aligns to horizontal center of the 32px number circles (left: 16px = half of 32px). */ .hw-process-list::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 16px; width: var(--border-width-2); background-image: repeating-linear-gradient( to bottom, var(--color-neutral-200) 0, var(--color-neutral-200) 6px, transparent 6px, transparent 12px ); z-index: 0; } /* ───────────────────────────────────────────── hw-process-step — molecule (one numbered step) ───────────────────────────────────────────── */ .hw-process-step { display: flex; align-items: flex-start; gap: var(--space-16); position: relative; z-index: 1; } /* Number circle — outlined, not filled */ .hw-process-step__number { width: var(--space-32); height: var(--space-32); flex-shrink: 0; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; border: var(--border-width-1) solid var(--color-violet); background-color: var(--color-surface-primary); font: var(--label-md); color: var(--color-violet); } /* Content block */ .hw-process-step__content { display: flex; flex-direction: column; gap: var(--space-4); } /* Step title */ .hw-process-step__title { font: var(--title-sm); color: var(--color-text-primary); } /* Step body */ .hw-process-step__body { font: var(--body-md); color: var(--color-text-secondary); } /* ───────────────────────────────────────────── Responsive reflow — <480px Number stacks above content (column layout) ───────────────────────────────────────────── */ @media (max-width: 480px) { .hw-process-step { flex-direction: column; align-items: flex-start; } } /* ───────────────────────────────────────────── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hw-process-step { transition: none; } } /* ── hw-staleness-indicator--warning ───────────────────── */ .hw-staleness-indicator--warning { background: var(--color-amber-100); border: var(--border-width-1) solid var(--color-border-warning); color: var(--color-text-on-warning); font: var(--label-sm); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); white-space: nowrap; } /* ── hw-press-card (Press mention card) ─────────────────── */ .hw-press-card { display: flex; align-items: center; gap: var(--space-20); padding: var(--space-24); border-radius: var(--radius-md); text-decoration: none; background-color: transparent; transition: background-color var(--duration-short) var(--ease-standard); } .hw-press-card:hover { background-color: var(--color-neutral-100); } .hw-press-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } .hw-press-card:active { background-color: var(--color-neutral-200); } .hw-press-card__logo { flex-shrink: 0; width: 140px; display: flex; align-items: center; justify-content: center; } .hw-press-card__logo img { max-width: 100%; max-height: 56px; object-fit: contain; object-position: left center; } .hw-press-card__text { flex: 1; min-width: 0; } .hw-press-card__headline { font: var(--body-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-4); } .hw-press-card__meta { font: var(--body-sm); color: var(--color-text-secondary); } @media (prefers-reduced-motion: reduce) { .hw-press-card { transition: none; } } /* ── hw-company-glance (Newsroom sidebar block) ─────────── */ .hw-company-glance { padding: var(--space-24); border: var(--border-width-1) solid var(--color-neutral-200); border-radius: var(--radius-md); background-color: var(--color-surface-primary); } .hw-company-glance__heading { font: var(--label-lg); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-primary); margin-bottom: var(--space-16); } .hw-company-glance__list { display: flex; flex-direction: column; gap: var(--space-16); list-style: none; margin: 0; padding: 0; } .hw-company-glance__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); } .hw-company-glance__key { font: var(--body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .hw-company-glance__value { font: var(--body-sm); color: var(--color-text-secondary); text-align: right; } /* ── hw-company-logo (Company/partner logo atom) ────────── */ .hw-company-logo { display: inline-flex; align-items: center; justify-content: center; height: var(--space-40); } .hw-company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } /* Size variant — large (hero/feature contexts) */ .hw-company-logo--lg { height: var(--space-80); } /* ── hw-form-success (Post-submission state) ───────────── */ /* Molecule: hw-form-success Replaces a gated form (ebook, webinar registration) on successful submission. CLS prevention: consumer JS records the form container height and applies it as min-height on the wrapper before swapping content. Expected markup:
check_circle

…

…

*/ .hw-form-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-16); padding: var(--space-32); box-sizing: border-box; } /* ── Icon slot ── */ .hw-form-success__icon { width: var(--icon-size-2xl); height: var(--icon-size-2xl); font-size: var(--icon-size-2xl); line-height: 1; color: var(--color-success); flex-shrink: 0; /* Entrance animation — fades and scales in after form swap */ animation: hw-form-success-icon-enter var(--duration-long) var(--ease-emphasized-decelerate) both; } /* ── Headline ── */ .hw-form-success__headline { font: var(--headline-sm); color: var(--color-text-primary); margin: 0; /* Staggered entrance */ animation: hw-form-success-content-enter var(--duration-long) var(--ease-emphasized-decelerate) var(--delay-short) both; } /* ── Message ── */ .hw-form-success__message { font: var(--body-md); color: var(--color-text-secondary); max-width: 40ch; margin: 0; /* Staggered entrance */ animation: hw-form-success-content-enter var(--duration-long) var(--ease-emphasized-decelerate) calc(var(--delay-short) * 2) both; } /* ── Entrance keyframes ── */ @keyframes hw-form-success-icon-enter { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } } @keyframes hw-form-success-content-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Reduced motion override ── */ @media (prefers-reduced-motion: reduce) { .hw-form-success__icon, .hw-form-success__headline, .hw-form-success__message { animation: none; } } /* ── hw-video-player (On-demand video embed) ─────────────── */ .hw-video-player { background-color: var(--color-neutral-200); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elevation-3); } /* ── hw-proof-point (Inline trust signal) ───────────────── */ /* FST-2026-233-mol24 — FORGE COMPLETE 2026-05-12 */ /* Job: attributed customer result/quote inside .reading-column, sustaining reading rhythm (not a full-bleed interruption). Evidence primary; attribution subordinate; optional logo. */ .hw-proof-point { background-color: var(--color-surface-secondary); padding: var(--space-24); border-radius: var(--radius-sm); margin: var(--space-32) 0; position: relative; display: flex; align-items: center; gap: var(--space-16); } /* Left accent rule — ::before over border-left: independent border-radius, decoupled from box model, animatable. Maya/Forge: 2px (accent), not 4px (stop sign). */ .hw-proof-point::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: var(--border-width-2); background-color: var(--color-violet-dark); border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .hw-proof-point__content { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 auto; min-width: 0; /* allows text to shrink below intrinsic width at 320px */ } .hw-proof-point__evidence, .hw-proof-point__attribution { margin: 0; } /* Italic signals customer voice — different voice within prose flow (Maya/Forge) */ .hw-proof-point__evidence { font: var(--body-md); font-style: italic; color: var(--color-text-on-surface-secondary); } .hw-proof-point__attribution { font: var(--body-sm); color: var(--color-text-secondary); } /* Optional — omit wrapper when no logo; content fills full width cleanly */ .hw-proof-point__logo-wrapper { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } /* ── hw-related-links-group (Grouped sidebar navigation) ─── */ /* FST-2026-234-mol25 — FORGE COMPLETE 2026-05-12 */ /* Job: 2–4 grouped navigation links under a heading, for sidebar contexts. Launch use: In the News sidebar (sibling to hw-company-glance). Open composition — no border, no surface. */ .hw-related-links-group { /* Open — no border, no surface. Gap from adjacent blocks set by sidebar stack. */ } /* Long-form tokens required — font shorthand followed by font-weight is destructive. Use --font-size-* + --line-height-* sub-tokens directly (Jordan Park, Forge). */ .hw-related-links-group__heading { font-size: var(--font-size-title-sm); line-height: var(--line-height-title-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin: 0 0 var(--space-12) 0; /* Sentence-case in copy — NOT uppercase. Maya: uppercase reads too assertive for the In the News restrained-authority register. */ } .hw-related-links-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* No gap — padding on links provides spacing and expands touch targets */ } .hw-related-links-group__link { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-primary); text-decoration: none; /* display:block + padding = ≥44px touch target (Jordan Park, Forge critical fix) */ display: block; padding-top: var(--space-8); padding-bottom: var(--space-8); } .hw-related-links-group__link:hover { color: var(--color-violet-dark); /* NOT --color-violet: #A328FF fails AA on white */ text-decoration: underline; } .hw-related-links-group__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* ── hw-support-escalation (Agent Tips escape hatch) ──────── */ /* FST-2026-235-mol26 — FORGE COMPLETE 2026-05-12 */ /** * @deprecated To be replaced by hw-ask-box (WEB-027). * Launch-state fallback only. Do not use in new designs. * Remove when WEB-027 ships on Agent Tips pages. */ /* Job: mandatory exit path for users who finish a help doc without resolution. "Still stuck?" + "Contact Support" link. Always present on Agent Tips pages. */ .hw-support-escalation { padding-top: var(--space-32); padding-bottom: var(--space-32); display: flex; flex-direction: column; gap: var(--space-8); /* No border — Maya: bordered box adds wrong weight at this frustration moment */ } /* Top separator: "article is over" signal via space, not containment (Maya) */ .hw-support-escalation::before { content: ''; display: block; width: 100%; height: 1px; background: var(--color-neutral-200); margin-bottom: var(--space-32); } /* --body-lg + semibold: content token + weight = tonal shift, not structural announcement. Maya: --title-sm would "open a new chapter" — wrong register. Direct human address. */ .hw-support-escalation__heading { font: var(--body-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } .hw-support-escalation__link { display: inline-block; /* touch target: inline renders ~24px, fails 44px min */ padding-top: var(--space-12); /* inline-block + space-12 x2 + ~24px line-height ≈ 48px */ padding-bottom: var(--space-12); font: var(--body-md); color: var(--color-violet-dark); /* NOT --color-violet: fails WCAG AA on white */ text-decoration: none; } .hw-support-escalation__link:hover { text-decoration: underline; } .hw-support-escalation__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* ── hw-process-step--neutral (Agent Tips calm register) ──── */ /* Overrides violet circle with neutral grey — post-sale surface, utility register, not marketing energy. Kenji B / FST-2026-236-prd01. */ .hw-process-step--neutral .hw-process-step__number { border-color: var(--color-neutral-300); color: var(--color-text-primary); background-color: var(--color-surface-primary); } /* ── hw-staleness-indicator ─────────────────────────────── */ /* Replaces tag-namespaced staleness styles for post-sale help surfaces. Neutral grey register — calm signal, not alert. Kenji C / FST-2026-236-prd01. */ .hw-staleness-indicator { background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); color: var(--color-text-secondary); font: var(--label-sm); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); white-space: nowrap; } /* ── hw-toc (Agent Tips Table of Contents) ──────────────────── */ /* Desktop: static non-sticky list. Mobile (<=480px): collapsible accordion. Motion spec: Priya Anand FST-2026-236-prd01-amend-B. 150ms expand / 100ms chevron / cubic-bezier(0.2,0,0,1). */ .hw-toc { margin-bottom: var(--space-32); } /* Desktop: button hidden, panel always visible */ .hw-toc__trigger { display: none; } .hw-toc__panel { background: var(--color-neutral-50); border-radius: var(--radius-md); padding: var(--space-20) var(--space-24); } .hw-toc__list { list-style: decimal; padding-left: var(--space-20); margin: 0; display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; } .hw-toc__link { font: var(--body-sm); color: var(--color-violet-dark); text-decoration: none; display: block; padding: var(--space-4) 0; } .hw-toc__link:hover { text-decoration: underline; } .hw-toc__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* Mobile: toggle button shown, panel collapses via grid-template-rows */ @media (max-width: 480px) { .hw-toc__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-12) var(--space-16); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); font: var(--label-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); cursor: pointer; text-align: left; } .hw-toc__trigger:hover { background: var(--color-neutral-100); } .hw-toc__trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-md); } .hw-toc__chevron { transition: transform 100ms cubic-bezier(0.2, 0, 0, 1); flex-shrink: 0; } .hw-toc__trigger[aria-expanded="true"] .hw-toc__chevron { transform: rotate(180deg); } .hw-toc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 150ms cubic-bezier(0.2, 0, 0, 1); overflow: hidden; padding: 0; background: transparent; border-radius: 0; } .hw-toc__trigger[aria-expanded="true"] + .hw-toc__panel { grid-template-rows: 1fr; } .hw-toc__panel > .hw-toc__list { padding: var(--space-12) var(--space-16) var(--space-16); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); } @media (prefers-reduced-motion: reduce) { .hw-toc__panel { transition-duration: 0ms; } .hw-toc__chevron { transition-duration: 0ms; } } } /* ── hw-help-fork__content (Hub page prose-width block) ─────── */ /* Constrains fork copy to --container-md (800px) per Kenji/PRD. Left-aligned within full-width .hw-section banner. */ .hw-help-fork__content { max-width: var(--container-md); display: flex; flex-direction: column; gap: var(--space-24); } /* ── hw-article-meta (Validated date + read time + category) ── */ .hw-article-meta { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; padding: var(--space-12) 0 var(--space-24); border-bottom: 1px solid var(--color-neutral-200); margin-bottom: var(--space-32); font: var(--body-sm); color: var(--color-text-secondary); } /* hw-toc__heading — desktop label, hidden on mobile (trigger text covers it) */ .hw-toc__heading { font: var(--label-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin: 0 0 var(--space-12); } @media (max-width: 480px) { .hw-toc__heading { display: none; } } /* ============================================ */ /* DARK CONTEXT */ /* */ /* Apply .dark-context (or [data-theme="dark"]) */ /* to any element — section, card, div — to */ /* override all semantic tokens for that block */ /* and everything inside it. */ /* */ /* Does NOT set a background color. Pair with: */ /* hw-section--dark (dark navy section) */ /* hw-section--brand (violet band) */ /* inline style="background:..." */ /* ============================================ */ .dark-context, [data-theme="dark"] { color-scheme: dark; /* ── Text ───────────────────────────────── */ --color-text-primary: rgba(255, 255, 255, 0.92); --color-text-secondary: rgba(255, 255, 255, 0.58); --color-text-muted: rgba(255, 255, 255, 0.36); --color-text-inverse: var(--color-neutral-900); --color-text-accent: var(--color-lavender); /* ── Surfaces ───────────────────────────── */ --color-surface-primary: #242450; /* elevated card on dark section */ --color-surface-secondary: #1B1B3A; /* base dark — same as section bg */ /* ── Borders & Dividers ─────────────────── */ --color-neutral-200: rgba(255, 255, 255, 0.08); --color-neutral-400: rgba(255, 255, 255, 0.36); /* ── Links ──────────────────────────────── */ --color-link: var(--color-lavender); --color-link-hover: var(--color-soft-blue); /* ── Focus ring ─────────────────────────── */ --focus-ring: 2px solid var(--color-lavender); } /* ── Base text color ───────────────────────── Semantic token override handles most components, but elements that set color explicitly need this. */ .dark-context, [data-theme="dark"] { color: var(--color-text-primary); } /* ─────────────────────────────────────────── */ /* COMPONENT OVERRIDES */ /* Only where raw values are used in source */ /* that can't adapt via token changes alone. */ /* ─────────────────────────────────────────── */ /* ── Buttons ─────────────────────────────── */ /* Deprecated button overrides removed 2026-05-13 (FST-2026-243-btn03). hw-btn--secondary, hw-btn--ghost, hw-btn--soft are deprecated. v2 surface overrides (glass, tint, text) live in _components.css. */ /* ── Cards ───────────────────────────────── */ /* hw-card uses --color-surface-primary (overridden above) and --color-neutral-200 for border (overridden above) — auto-adapts. Only need to handle the dark card variant explicitly. */ .dark-context .hw-card--dark, [data-theme="dark"] .hw-card--dark { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); } /* ── Inputs ──────────────────────────────── */ /* Background + border use tokens (auto-adapts). Placeholder and caret need explicit treatment. */ .dark-context .hw-input, .dark-context .hw-select, .dark-context .hw-textarea, [data-theme="dark"] .hw-input, [data-theme="dark"] .hw-select, [data-theme="dark"] .hw-textarea { background: rgba(255, 255, 255, 0.06); color: var(--color-text-primary); } .dark-context .hw-input::placeholder, .dark-context .hw-textarea::placeholder, [data-theme="dark"] .hw-input::placeholder, [data-theme="dark"] .hw-textarea::placeholder { color: var(--color-text-muted); } .dark-context .hw-input:focus, .dark-context .hw-select:focus, .dark-context .hw-textarea:focus, [data-theme="dark"] .hw-input:focus, [data-theme="dark"] .hw-select:focus, [data-theme="dark"] .hw-textarea:focus { border-color: var(--color-lavender); box-shadow: 0 0 0 3px rgba(205, 163, 249, 0.18); } /* ── Chips ───────────────────────────────── */ .dark-context .hw-chip, [data-theme="dark"] .hw-chip { border-color: rgba(255, 255, 255, 0.12); color: var(--color-text-secondary); } .dark-context .hw-chip:hover, [data-theme="dark"] .hw-chip:hover { color: var(--color-lavender); border-color: var(--color-lavender); } .dark-context .hw-chip.is-active, [data-theme="dark"] .hw-chip.is-active { background: var(--color-lavender); border-color: var(--color-lavender); color: var(--color-neutral-900); } /* ── FAQ accordion ───────────────────────── */ .dark-context .hw-faq__item, [data-theme="dark"] .hw-faq__item { border-color: rgba(255, 255, 255, 0.08); } .dark-context .hw-faq__question, [data-theme="dark"] .hw-faq__question { color: var(--color-text-primary); } .dark-context .hw-faq__question:hover, [data-theme="dark"] .hw-faq__question:hover { color: var(--hw-faq-question-hover-color, var(--color-text-primary)); } .dark-context .hw-faq__answer-body, [data-theme="dark"] .hw-faq__answer-body { color: var(--color-text-secondary); } /* ── Tabs ────────────────────────────────── */ .dark-context .hw-tabs__list, [data-theme="dark"] .hw-tabs__list { border-color: rgba(255, 255, 255, 0.08); } .dark-context .hw-tabs__tab, [data-theme="dark"] .hw-tabs__tab { color: var(--color-text-muted); } .dark-context .hw-tabs__tab:hover, .dark-context .hw-tabs__tab.is-active, [data-theme="dark"] .hw-tabs__tab:hover, [data-theme="dark"] .hw-tabs__tab.is-active { color: var(--color-white); } .dark-context .hw-tabs__tab::after, [data-theme="dark"] .hw-tabs__tab::after { background: var(--color-lavender); } /* ── Stat ────────────────────────────────── */ .dark-context .hw-stat__value, [data-theme="dark"] .hw-stat__value { color: var(--color-text-primary); } .dark-context .hw-stat__label, [data-theme="dark"] .hw-stat__label { color: var(--color-text-secondary); } /* ── Identity (avatar chip) ──────────────── */ .dark-context .hw-identity__name, [data-theme="dark"] .hw-identity__name { color: var(--color-text-primary); } .dark-context .hw-identity__role, [data-theme="dark"] .hw-identity__role { color: var(--color-text-muted); } /* ── Divider ─────────────────────────────── */ .dark-context .hw-divider, [data-theme="dark"] .hw-divider { background: rgba(255, 255, 255, 0.08); } /* ── Logo grid ───────────────────────────── */ .dark-context .hw-logo-grid__item, [data-theme="dark"] .hw-logo-grid__item { filter: brightness(0) invert(1); opacity: 0.5; } .dark-context .hw-logo-grid__item:hover, [data-theme="dark"] .hw-logo-grid__item:hover { opacity: 0.85; } /* ── Section eyebrow ─────────────────────── */ .dark-context .section-eyebrow, [data-theme="dark"] .section-eyebrow { color: var(--color-lavender); } .dark-context .section-eyebrow--muted, [data-theme="dark"] .section-eyebrow--muted { color: var(--color-text-muted); } /* ── Carousel nav buttons ────────────────── */ .dark-context .hw-carousel__btn, [data-theme="dark"] .hw-carousel__btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--color-text-secondary); } .dark-context .hw-carousel__btn:hover, [data-theme="dark"] .hw-carousel__btn:hover { color: var(--color-lavender); border-color: var(--color-lavender); } .dark-context .hw-carousel__dot, [data-theme="dark"] .hw-carousel__dot { background: rgba(255, 255, 255, 0.16); } .dark-context .hw-carousel__dot.is-active, [data-theme="dark"] .hw-carousel__dot.is-active { background: var(--color-lavender); } /* ============================================ */ /* UTILITIES */ /* Small helpers that don't belong to a */ /* specific component */ /* ============================================ */ /* ── Visibility ─────────────────────────────── */ .hidden { display: none !important; } .visible-tablet { display: none !important; } @media (max-width: 768px) { .visible-tablet { display: block !important; } .hidden-tablet { display: none !important; } } .visible-mobile { display: none !important; } @media (max-width: 480px) { .visible-mobile { display: block !important; } .hidden-mobile { display: none !important; } } /* ── Aspect Ratios ──────────────────────────── */ .aspect-video { aspect-ratio: 16 / 9; } .aspect-square { aspect-ratio: 1 / 1; } /* ── Overflow ───────────────────────────────── */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* ── Truncation ─────────────────────────────── */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Editor-applied text styles ─────────────── */ .hw-editor-text-violet { color: var(--color-violet); } .hw-editor-text-dark { color: var(--color-text-primary); } .hw-editor-text-blue { color: var(--color-blue); } .hw-editor-text-violet-dark { color: var(--color-violet-dark); } .hw-editor-text-secondary { color: var(--color-text-secondary); } .hw-editor-text-regular { font-weight: var(--font-weight-regular) !important; } @supports (background-clip: text) or (-webkit-background-clip: text) { .hw-editor-text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* ── Scroll entrance animations ─────────────── */ /* Initial states: only applied when JS is running (.js-animate on ). Without JS, elements are visible at all times. */ .js-animate [data-animate="fade-up"] { opacity: 0; transform: translateY(30px); } .js-animate [data-animate="fade-down"] { opacity: 0; transform: translateY(-30px); } .js-animate [data-animate="fade-left"] { opacity: 0; transform: translateX(-40px); } .js-animate [data-animate="fade-right"] { opacity: 0; transform: translateX(40px); } .js-animate [data-animate="fade-in"] { opacity: 0; } .js-animate [data-animate="scale-in"] { opacity: 0; transform: scale(0.92); } /* Stagger: hide direct children */ .js-animate [data-animate-stagger] > * { opacity: 0; transform: translateY(20px); } /* Visible state — transition to natural position */ .js-animate [data-animate].anim-visible, .js-animate [data-animate-stagger] > *.anim-visible { opacity: 1 !important; transform: none !important; transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .js-animate [data-animate], .js-animate [data-animate-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Width constraints ──────────────────────── */ .w-full { width: 100%; } .max-w-prose { max-width: 65ch; } /* ── Mobile show/hide (480px breakpoint) ────── */ /* hw-show-mobile / hw-hide-mobile: used by Agent Tips escape hatch mobile button variant */ .hw-show-mobile { display: none !important; } @media (max-width: 480px) { .hw-show-mobile { display: block !important; } .hw-hide-mobile { display: none !important; } } /* ============================================ */ /* HEADER */ /* ============================================ */ :root { --announcement-banner-height: 56px; --announcement-banner-offset: 0px; } body.has-announcement-banner { --announcement-banner-offset: var(--announcement-banner-height); } .announcement-banner { position: fixed; top: 0; left: 0; right: 0; width: min(100%, var(--site-canvas-max)); max-width: var(--site-canvas-max); margin-inline: auto; z-index: calc(var(--z-sticky) + 1); background: #000000; color: #16febf; } .announcement-banner__inner { display: flex; align-items: center; justify-content: center; width: min(1090px, calc(100% - var(--screen-margin) - var(--screen-margin))); min-height: var(--announcement-banner-height); margin: 0 auto; padding: var(--space-16) 0; box-sizing: border-box; text-align: center; } .announcement-banner__text { margin: 0; color: #ffffff; font: var(--body-md); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.35; } .announcement-banner__label { color: #ffffff; font-weight: var(--font-weight-bold); } .announcement-banner__link { color: #16febf; text-decoration: none; white-space: nowrap; } .announcement-banner__link:hover, .announcement-banner__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .announcement-banner__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } .site-header { --site-header-bg-rest: transparent; --site-header-bg-scrolled: #ffffff; --site-header-border-scrolled: rgba(24, 28, 32, 0.10); --site-header-shadow-scrolled: 0 2px 10px rgba(24, 28, 32, 0.06); position: fixed; top: 0; left: 0; right: 0; width: min(100%, var(--site-canvas-max)); max-width: var(--site-canvas-max); margin-inline: auto; z-index: var(--z-sticky); /* 200 */ background-color: var(--site-header-bg-rest); border-bottom: 1px solid transparent; transition: background-color var(--duration-short) var(--ease-standard), border-color var(--duration-short) var(--ease-standard); } body.has-announcement-banner .site-header { top: var(--announcement-banner-offset); } .site-header--scrolled { background-color: var(--site-header-bg-scrolled); box-shadow: var(--site-header-shadow-scrolled); border-bottom-color: var(--site-header-border-scrolled); } @media (prefers-reduced-transparency: reduce) { .site-header--scrolled { background-color: rgba(255, 255, 255, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none; } } .site-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: min(var(--page-rail), calc(100% - var(--screen-margin) - var(--screen-margin))); max-width: var(--page-rail); margin: 0 auto; padding: 12px 0; box-sizing: border-box; } /* ── Logo ───────────────────────────────────── */ .site-header__logo { flex-shrink: 0; display: flex; align-items: center; margin-right: auto; text-decoration: none; } .site-header__logo-img { width: 193px; height: 47px; object-fit: contain; } /* ── Nav ────────────────────────────────────── */ .site-header__right { display: flex; align-items: center; gap: 12px; } .site-header__nav { display: flex; align-items: center; gap: 12px; } .site-header a, .site-header button, .mobile-nav-toggle-wrapper button, .mobile-nav-overlay a, .mobile-nav-overlay button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .site-header__nav .navLink, .site-header__nav .nav-dropdown__trigger { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; text-decoration: none; color: var(--color-text-primary); font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-regular); line-height: 20px; padding: 12px 20px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); border: none; background: none; cursor: pointer; white-space: nowrap; appearance: none; } .site-header__nav .navLink:hover, .site-header__nav .nav-dropdown__trigger:hover { color: var(--color-violet-dark); background-color: var(--color-violet-50); } .site-header__nav .navItem { display: inline-flex; align-items: center; gap: 2px; } /* ── Dropdown ───────────────────────────────── */ .nav-dropdown { position: relative; } .nav-dropdown__chevron { width: 16px; height: 16px; transition: transform var(--transition-fast); flex-shrink: 0; } .nav-dropdown.is-open .nav-dropdown__chevron { transform: rotate(180deg); } .nav-dropdown__menu { position: absolute; top: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%); min-width: 180px; background: var(--color-surface-primary); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: var(--shadow-card-feature); padding: var(--space-8) 0; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: var(--z-dropdown); /* 100 — desktop dropdown; not needed in mobile overlay */ } .nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown__link { display: block; padding: var(--space-8) var(--space-16); color: var(--color-text-secondary); text-decoration: none; font-family: var(--font-family); font-size: var(--text-sm); font-weight: var(--font-weight-regular); transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; } .nav-dropdown__link:hover { color: var(--color-violet); background-color: var(--color-violet-50); } /* ── CTA Button ─────────────────────────────── */ /* Sign in — text button sized to match adjacent header controls. */ .site-header__signin { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; box-sizing: border-box; border-radius: var(--radius-sm); color: var(--color-text-primary); font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-regular); line-height: 20px; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color var(--transition-fast), background-color var(--transition-fast); } .site-header__signin:hover { color: var(--color-violet-dark); background-color: var(--color-violet-50); } @media (max-width: 768px) { .site-header__inner { width: 100%; max-width: none; padding-left: var(--space-20); } .site-header__logo-img { height: 31px; width: auto; } .site-header__signin { display: none; } } /* Header CTA uses fixed non-glass treatments. Homepage CTA crossfades from a soft lavender fill to gradient with the existing header scroll state. */ .site-header__cta { --hw-btn-label-size: 14px; --hw-btn-label-line-height: 20px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; box-sizing: border-box; border-radius: var(--radius-sm); color: var(--color-text-primary); font-family: var(--font-family); font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .site-header__cta:not(.hw-btn) { background-color: #f7e8ff; box-shadow: 0 2px 8px rgba(24, 28, 32, 0.10); transition: background-color var(--transition-fast), box-shadow var(--transition-fast); } .site-header__cta:not(.hw-btn):hover, .site-header__cta:not(.hw-btn):focus-visible { background-color: var(--color-violet-50); box-shadow: 0 4px 12px rgba(24, 28, 32, 0.14); } .site-header__cta.hw-btn--gradient, .site-header__cta.hw-btn--primary { color: var(--color-white); } .site-header__cta--home { isolation: isolate; overflow: hidden; background-color: #ebebff; color: var(--color-neutral-900); font-weight: var(--gradient-label-weight); --symbol-weight: var(--gradient-label-weight); box-shadow: 0 2px 8px rgba(24, 28, 32, 0.10); transition: color var(--duration-short) var(--ease-standard), box-shadow var(--duration-short) var(--ease-standard); will-change: auto; } .site-header__cta-label { position: relative; z-index: 2; } .site-header__cta--home::before { z-index: 1; background: var(--color-neutral-900); } .site-header__cta--home::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--gradient-brand); opacity: 0; pointer-events: none; transition: opacity var(--duration-short) var(--ease-standard); } .site-header--scrolled .site-header__cta--home { color: var(--color-white); box-shadow: 0 2px 8px rgba(163, 40, 255, 0.20); } .site-header--scrolled .site-header__cta--home::before { background: var(--color-white); } .site-header--scrolled .site-header__cta--home::after { opacity: 1; } .site-header__cta--home:hover::before { opacity: var(--state-hover); } .site-header__cta--home:focus-visible::before { opacity: var(--state-focus); } .site-header__cta--home:active::before { opacity: var(--state-pressed); transition-duration: var(--duration-short); } .site-header__cta--home:hover, .site-header__cta--home:focus-visible { box-shadow: 0 4px 12px rgba(24, 28, 32, 0.14); } .site-header--scrolled .site-header__cta--home:hover, .site-header--scrolled .site-header__cta--home:focus-visible { box-shadow: 0 8px 20px rgba(110, 44, 210, 0.22); } .site-header__cta--home:focus-visible { outline: 3px solid var(--color-neutral-900); outline-offset: 3px; } .site-header__cta--home:active { box-shadow: 0 1px 6px rgba(24, 28, 32, 0.12); } .site-header--scrolled .site-header__cta--home:active { box-shadow: 0 2px 8px rgba(110, 44, 210, 0.18); } /* ── Mobile CTA (Step 7) ────────────────────────────────────── */ .site-header__mobile-right { display: none; /* hidden at desktop */ } @media (max-width: 768px) { /* Clear fixed hamburger toggle (44px wide + 8px right + 12px gap) */ .site-header__inner { padding-right: calc(44px + var(--space-8) + var(--space-12)); } .site-header__mobile-right { display: flex; align-items: center; flex-shrink: 0; } .site-header__cta--mobile { min-height: 44px; white-space: nowrap; } .site-header__cta--mobile.hw-btn--gradient, .site-header__cta--mobile.hw-btn--primary { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Mobile nav toggle wrapper ──────────────── ARCHITECTURE NOTE: This element is a DOM SIBLING of .site-header, not a child. z-index: var(--z-overlay-control) puts it above .mobile-nav-overlay (z-index 300). Position + coordinates mirror the hamburger's visual position in the header. ────────────────────────────────────────────── */ .mobile-nav-toggle-wrapper { display: none; /* hidden at desktop */ position: fixed; top: 12px; /* vertically center in 64px header: (64px - 40px) / 2 = 12px */ right: var(--space-8); z-index: var(--z-overlay-control); /* 310 — above the overlay at 300 */ align-items: center; justify-content: center; } body.has-announcement-banner .mobile-nav-toggle-wrapper { top: calc(var(--announcement-banner-offset) + 12px); } body.has-announcement-banner.mobile-nav-open .mobile-nav-toggle-wrapper { top: 12px; } @media (max-width: 768px) { :root { --announcement-banner-height: 52px; } .announcement-banner__inner { padding: var(--space-8) 0; } .announcement-banner__text { font-size: clamp(12px, 1.85vw, 14px); line-height: 1.35; } .mobile-nav-toggle-wrapper { display: flex; } } @media (max-width: 480px) { :root { --announcement-banner-height: 56px; } .announcement-banner__text { font-size: clamp(11px, 3vw, 13px); } } .site-header__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: var(--space-8); background: none; border: none; cursor: pointer; appearance: none; border-radius: var(--radius-sm); } .site-header__hamburger span { display: block; width: 22px; height: 2px; background-color: var(--color-neutral-900); border-radius: 1px; transition-property: transform, opacity; transition-duration: var(--duration-short); transition-timing-function: var(--ease-standard); } .site-header__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__hamburger.is-open span:nth-child(2) { opacity: 0; } .site-header__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile nav overlay ───────────────────────────────────────── ARCHITECTURE CONSTRAINT: .mobile-nav-overlay MUST be a sibling of .site-header. Never wrap both elements in a shared animated or transformed parent. A shared animated parent creates an ancestor stacking context that kills backdrop-filter on .site-header--scrolled (the glass header effect). ─────────────────────────────────────────────────────────────── */ .mobile-nav-overlay { --mobile-nav-overlay-inline: var(--space-24); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); /* 300 — above .site-header at 200 */ background-color: var(--color-surface-nav-overlay, var(--color-surface-primary)); display: flex; flex-direction: column; padding: var(--space-96) var(--mobile-nav-overlay-inline) var(--space-32); /* CLOSE state (default) */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition-property: opacity, visibility, transform; transition-duration: var(--duration-medium); transition-timing-function: var(--ease-emphasized-accelerate); } .mobile-nav-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-duration: var(--duration-long); transition-timing-function: var(--ease-emphasized-decelerate); } .mobile-nav-overlay__logo { position: absolute; top: 32px; left: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: auto; height: auto; transform: translateX(-50%); } .mobile-nav-overlay__logo-img { width: 188px; max-width: none; height: auto; flex: 0 0 auto; display: block; } /* Only show on mobile */ @media (min-width: 769px) { .mobile-nav-overlay { display: none; } } @media (min-width: 650px) and (max-width: 768px) { .mobile-nav-overlay { --mobile-nav-overlay-inline: var(--space-160); padding-top: var(--space-160); } } @media (min-width: 480px) and (max-width: 649px) { .mobile-nav-overlay { --mobile-nav-overlay-inline: var(--space-120); } } /* ── Mobile nav overlay — nav list ──────────────────────────── */ .mobile-nav-overlay__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-nav-overlay__list { list-style: none; margin: 0; padding: 0; } .mobile-nav-overlay__item { border-bottom: 1px solid var(--color-border-default); } .mobile-nav-overlay__link { display: flex; align-items: center; min-height: 56px; padding: var(--space-16) var(--space-8); text-decoration: none; color: var(--color-text-primary); font: var(--body-lg); font-weight: var(--font-weight-medium); transition-property: color, background-color; transition-duration: var(--duration-short); transition-timing-function: var(--ease-standard); } .mobile-nav-overlay__link:hover, .mobile-nav-overlay__link:focus-visible { background-color: var(--color-violet-50); color: var(--color-violet-dark); /* #7B1FD4 — 4.5:1+ on white, AA pass */ outline: none; } /* Group header labels (non-interactive) */ .mobile-nav-overlay__item--group-header { padding: var(--space-16) var(--space-8) var(--space-8); font: var(--label-md); color: var(--color-text-muted); border-bottom: none; text-transform: uppercase; letter-spacing: 0.05em; } /* Sub-item indentation */ .mobile-nav-overlay__link--sub { padding-left: var(--space-24); font: var(--body-md); font-weight: var(--font-weight-regular); } /* ── Mobile nav overlay — top CTA ──────────────────────────── */ .mobile-nav-overlay__cta-wrapper { flex-shrink: 0; display: flex; flex-direction: column; padding: 0 var(--space-8) var(--space-40); gap: var(--space-16); } .mobile-nav-overlay__cta { flex: 1; justify-content: center; } /* Sign In escape hatch in overlay (Maya M5) */ .mobile-nav-overlay__cta-wrapper .site-header__signin { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-8) 0; color: var(--color-text-secondary); font: var(--body-sm); text-decoration: underline; text-underline-offset: 2px; } .mobile-nav-overlay__cta-wrapper .site-header__signin:hover { color: var(--color-violet-dark); } /* ── Mobile — hide desktop elements, show overlay elements ──── */ @media (max-width: 768px) { .site-header__right { display: none; } .site-header__nav--desktop { display: none; } } /* ── prefers-reduced-motion — nav overlay ────────────────────── Targeted override: only .mobile-nav-overlay and hamburger spans. Do NOT use a global * { transition: none } — that would break the button system's state-layer transitions. ─────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mobile-nav-overlay, .mobile-nav-overlay.is-open { transition-property: opacity, visibility; transition-duration: var(--duration-short); transition-timing-function: ease-in-out; transform: none; } .site-header__hamburger span { transition-duration: var(--duration-xshort); } } /* ============================================ */ /* HOMEPAGE-SPECIFIC STYLES */ /* Supplements the design system components */ /* ============================================ */ :root { --homepage-press-overlap: 64px; } /* ── Hero ────────────────────────────────────── */ .homepage-hero { padding-top: calc(64px + var(--space-120)); padding-bottom: var(--space-120); min-height: 80vh; display: flex; align-items: center; } .homepage-hero__content { max-width: var(--container-md); margin-inline: auto; } /* ── Press Bar ───────────────────────────────── */ .homepage-press__grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); max-width: var(--container-lg); margin-inline: auto; } .homepage-press__grid .hw-logo-grid__item img { max-height: 28px; } /* ── Problem Section ─────────────────────────── */ .homepage-problem__cards { max-width: var(--container-lg); margin-inline: auto; } /* ── Features Grid ───────────────────────────── */ .homepage-features__grid .hw-card { height: 100%; } .homepage-features__grid .hw-card__body { display: flex; flex-direction: column; height: 100%; } .homepage-features__grid .hw-btn--ghost { margin-top: auto; align-self: flex-start; } /* ── Stats Grid ──────────────────────────────── */ .homepage-stats > .page-rail { width: min(var(--container-xl), calc(100% - var(--screen-margin) - var(--screen-margin))); } .homepage-stats__display { --hw-proof-display-min-column: 260px; --hw-proof-display-item-gap: var(--space-10); --hw-proof-display-divider-color: #eeeeee; --hw-proof-display-copy-color: #626262; --hw-proof-display-label-gradient: linear-gradient(90deg, #A328FF 0%, #338FF0 100%); max-width: min(1240px, 100%); margin: 0 auto clamp(var(--space-64), 7.6vw, var(--space-96)); } .homepage-stats__display .hw-proof-display__item { min-height: 100px; padding-block: 0; gap: 4px; justify-content: flex-start; } .homepage-stats__display.hw-proof-display--horizontal > .hw-proof-display__item { justify-content: flex-start !important; } .homepage-stats__display .hw-proof-display__title { display: grid; gap: var(--space-0); color: var(--hw-proof-display-copy-color); padding: 0 clamp(var(--space-12), 2.5vw, var(--space-32)); } .homepage-stats__display .hw-proof-display__value { color: inherit; font: var(--display-sm); } .homepage-stats__display .hw-proof-display__label { max-width: none; color: inherit; font: var(--title-lg); } @supports (background-clip: text) or (-webkit-background-clip: text) { .homepage-stats__display .hw-proof-display__label { background-image: var(--hw-proof-display-label-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } @media (min-width: 901px) { .homepage-stats__display .hw-proof-display__label { font: var(--body-sm) !important; font-weight: var(--font-weight-bold) !important; } } .homepage-stats__display .hw-proof-display__description { display: block; max-width: 42ch; color: var(--hw-proof-display-copy-color); font: var(--body-sm); text-align: center; } /* ── Solution Proof Band ────────────────────── */ .homepage-solution-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(247, 251, 255, 0.92) 0%, var(--color-white) 22%, var(--color-white) 100%); } .homepage-solution-band::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: clamp(104px, 11vw, 164px); background: linear-gradient(180deg, rgba(247, 251, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .homepage-solution-band__background { position: absolute; z-index: 0; left: 50%; bottom: clamp(-150px, -7.6vw, -86px); width: 100%; min-width: 100%; height: clamp(640px, 50%, 640px); object-fit: fill; object-position: center bottom; transform: translateX(-50%); pointer-events: none; user-select: none; } .homepage-solution-band > .hw-section, .homepage-solution-band > .product-pillars { position: relative; z-index: 2; } .homepage-solution-band .homepage-stats { padding-block: clamp(var(--space-64), 7.4vw, var(--space-96)) clamp(var(--space-56), 5.4vw, var(--space-72)); background: transparent; } .homepage-solution-band__header { text-align: center; margin-bottom: clamp(var(--space-40), 5vw, var(--space-64)); } .homepage-solution-band__headline { margin: 0; color: var(--color-neutral-900); font: var(--headline-lg); } @media (max-width: 900px) { .homepage-solution-band .homepage-stats { padding-block: var(--space-64) var(--space-48); } .homepage-stats__display { --hw-proof-display-item-gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; column-gap: var(--space-16); margin-bottom: var(--space-48); } .homepage-stats__display.hw-proof-display--horizontal .hw-proof-display__item + .hw-proof-display__item { padding-top: 0; border-top: 0; border-left: 1px solid var(--hw-proof-display-divider-color); gap: 3px; } .homepage-stats__display .hw-proof-display__item { justify-content: flex-start; gap: var(--space-6); min-height: 0; padding-inline: var(--space-8); } .homepage-stats__display .hw-proof-display__title { padding-inline: clamp(var(--space-8), 2vw, var(--space-16)); } .homepage-stats__display .hw-proof-display__value, .homepage-stats__display .hw-proof-display__label { font: var(--body-lg); font-weight: var(--font-weight-bold); } .homepage-stats__display .hw-proof-display__description { max-width: 38ch; color: #555555; font: var(--label-sm); font-weight: var(--font-weight-regular); letter-spacing: 0; } .homepage-solution-band__header { margin-bottom: var(--space-40); } } @media (max-width: 530px) { .homepage-solution-band .homepage-stats { padding-block: var(--space-64) var(--space-48); padding-top: 0; } } @media (max-width: 767px) { .homepage-stats__display { grid-template-columns: 1fr; row-gap: var(--space-12); column-gap: 0; padding-block: var(--space-32); } .homepage-stats__display.hw-proof-display--horizontal .hw-proof-display__item + .hw-proof-display__item { padding-top: var(--space-12); border-top: 0; border-left: 0; gap: 2px; } .homepage-stats__display .hw-proof-display__item { position: relative; gap: 4px; } .homepage-stats__display .hw-proof-display__title { padding-inline: 0; width: 100%; min-width: 0; justify-items: center; } .homepage-stats__display.hw-proof-display--horizontal .hw-proof-display__item:nth-child(3) { grid-column: auto; padding-top: var(--space-12); border-top: 0; } .homepage-stats__display.hw-proof-display--horizontal .hw-proof-display__item + .hw-proof-display__item::before, .homepage-stats__display.hw-proof-display--horizontal .hw-proof-display__item:nth-child(3)::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--hw-proof-display-divider-color); } .homepage-stats__display .hw-proof-display__item:nth-child(3) .hw-proof-display__title { display: grid; justify-content: stretch; gap: var(--space-0); white-space: normal; } .homepage-stats__display .hw-proof-display__item:nth-child(3) .hw-proof-display__label { max-width: 100%; min-width: 0; white-space: normal; } .homepage-stats__display .hw-proof-display__item:nth-child(3) .hw-proof-display__description { max-width: 38ch; } } @media (max-width: 480px) { .homepage-stats__display { margin-bottom: var(--space-48); } } /* ── CRM Grid ────────────────────────────────── */ .homepage-crm__grid { max-width: var(--container-md); margin-inline: auto; } .homepage-crm__grid .hw-logo-grid__item img { max-height: 48px; } /* ── Partners Grid ───────────────────────────── */ .homepage-partners__grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .homepage-partners__grid .hw-logo-grid__item img { max-height: 32px; } /* ── Newsletter ──────────────────────────────── */ .homepage-newsletter .hw-input-group { max-width: 440px; } .homepage-newsletter .hw-input { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: var(--color-white); } .homepage-newsletter .hw-input::placeholder { color: var(--color-neutral-400); } .homepage-newsletter .hw-input:focus { border-color: var(--color-violet); box-shadow: 0 0 0 3px rgba(163, 40, 255, 0.25); } /* ── Hero ────────────────────────────────────── */ .homepage-hero { --hero-swoosh-width: 118px; --hero-swoosh-height: 87px; --hero-visual-gap: clamp(20px, 3vw, 40px); --hero-visual-height: clamp(290px, 26vw, 450px); --hero-strip-overlap: clamp(178px, 14vw, 226px); --hero-press-overlap: var(--homepage-press-overlap); --hero-logo-clearance: 32px; --hero-logo-bottom-inset: calc(var(--hero-press-overlap) + var(--hero-logo-clearance)); --hero-stairs-width: 100%; --hero-stairs-top: clamp(-451px, -32vw, -290px); --hero-underlay-width: var(--hero-stairs-width); --hero-underlay-top: clamp(-280px, -18vw, -220px); position: relative; z-index: 20; display: grid; grid-template-rows: auto; isolation: isolate; /* preserves nav backdrop-filter */ margin-top: -64px; padding-top: calc(128px + var(--space-40)); padding-bottom: 0; /* bottom-strip provides visual close */ max-height: 800px; min-height: clamp(600px, 72vh, 800px); overflow: hidden; background-color: #e8e5ff; background-image: url('/assets/images/homepage/hero-gradient-background.webp'); background-repeat: no-repeat; background-position: center top; background-size: cover; } .homepage-hero::before { content: ""; display: none; opacity: 0; transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .homepage-hero.is-visual-ready::before { opacity: 1; } .homepage-hero::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; width: var(--hero-swoosh-width); height: var(--hero-swoosh-height); background: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; } /* All direct children occupy the same grid cell — layers stack */ .homepage-hero > * { grid-area: 1 / 1; } /* Layer 1: gradient background element (now a passthrough — bg is on the section) */ .homepage-hero__bg { z-index: 1; pointer-events: none; } /* Layer 3: content — flex column so strip pins to bottom */ .homepage-hero__content-layout { z-index: 3; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: inherit; } .homepage-hero__rail { position: relative; z-index: 4; } .homepage-hero__text { display: flex; flex-direction: column; gap: var(--space-32); padding: 0; max-width: 680px; } .homepage-hero__copy { display: flex; flex-direction: column; gap: var(--space-8); } .homepage-hero__headline { font: var(--display-sm); letter-spacing: var(--letter-spacing-display-sm); color: var(--color-neutral-900); margin: 0; } .homepage-hero__headline-accent { display: inline-block; color: transparent; background: linear-gradient(90deg, #a328ff 0%, #338ff0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .homepage-hero__sub { font: var(--body-lg); color: var(--color-neutral-600); margin: 0; } .homepage-hero__actions { gap: var(--space-20); } .homepage-hero .hw-btn--lg { --hw-btn-label-size: var(--font-size-body-lg); --hw-btn-label-line-height: 24px; } .homepage-hero__visual-stage { position: relative; z-index: 2; height: var(--hero-visual-height); margin-top: var(--hero-visual-gap); width: 100%; min-width: 0; overflow: visible; pointer-events: none; } .homepage-hero__visual-stage::before { content: ""; display: block; position: absolute; z-index: 0; left: 50%; top: var(--hero-underlay-top); width: var(--hero-underlay-width); aspect-ratio: 1283 / 1168.5; background: none; opacity: 0; transform: translateX(-50%); transform-origin: center top; transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .homepage-hero.is-visual-ready .homepage-hero__visual-stage::before { background: url('/assets/images/homepage/hero-stairs-underlay.svg') center / 100% 100% no-repeat; opacity: 1; } .homepage-hero__stairs-picture { display: block; } .homepage-hero__stairs { position: absolute; left: 50%; top: var(--hero-stairs-top); width: var(--hero-stairs-width); max-width: none; height: auto; z-index: 1; opacity: 0; transform: translateX(-50%); transform-origin: 33.5% 36.5%; transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; } .homepage-hero.is-visual-ready .homepage-hero__stairs { opacity: 1; } .hw-hero-load .homepage-hero [data-hero-reveal] { transition: opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1), transform 0.62s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .hw-hero-load:not(.hw-hero-load-fallback) .homepage-hero:not(.is-copy-ready) [data-hero-reveal="copy"], .hw-hero-load:not(.hw-hero-load-fallback) .homepage-hero:not(.is-visual-ready) [data-hero-reveal="visual"], .hw-hero-load:not(.hw-hero-load-fallback) .homepage-hero:not(.is-strip-ready) [data-hero-reveal="strip"] { opacity: 0; transform: translateY(18px); } .hw-hero-load .homepage-hero.is-visual-ready [data-hero-reveal="visual"] { transition-delay: 0.08s; } .hw-hero-load .homepage-hero.is-strip-ready [data-hero-reveal="strip"] { transition-delay: 0.16s; } .hw-hero-load .homepage-hero.is-hero-ready [data-hero-reveal], .hw-hero-load-fallback .homepage-hero [data-hero-reveal] { will-change: auto; } @media (prefers-reduced-motion: reduce) { .hw-hero-load .homepage-hero [data-hero-reveal] { transition: none; transform: none !important; } } /* ── Bottom strip ────────────────────────────── */ .homepage-hero__bottom-strip { position: relative; z-index: 4; margin-top: calc(var(--hero-strip-overlap) * -1) !important; padding: 0; padding-bottom: 16px !important; width: 100%; min-width: 0; overflow: visible; } .homepage-hero__bottom-strip::before { content: ""; position: absolute; z-index: 0; inset: clamp(28px, 4vw, 56px) 0 0; border-bottom-right-radius: clamp(78px, 8vw, 132px); pointer-events: none; } @media (min-width: 1081px) { .homepage-hero { --hero-logo-bottom-inset: var(--hero-press-overlap); } .homepage-hero__bottom-strip { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0 !important; } } .partner-bar { margin-inline: auto; color: var(--color-white); } @media (min-width: 900px) { .partner-bar { width: min(1798px, calc(100% - var(--screen-margin) - var(--screen-margin))); min-height: clamp(190px, 196px, 276px); max-width: 930px !important; } } .partner-bar::after, .partner-bar__feature::after, .partner-bar__logos::after, .partner-bar__portrait-wrap::after { content: ""; display: table; clear: both; } .partner-bar__title { margin: 0; color: var(--color-white); font: var(--title-sm); font-weight: var(--font-weight-bold); line-height: 1.18; text-align: center; opacity: 0.75; } .partner-bar__rule { display: block; width: 89.2%; height: 1px; margin: 12px auto 0; background: rgba(255, 255, 255, 0.24); } .partner-bar__logos { float: left; margin: 12px 0 0 5%; font-size: 0; width: 60%; } .partner-bar__logo { float: right; width: 13.2%; height: clamp(38px, 3.1vw, 44px); margin-left: 6.5%; margin-bottom: 8px; max-width: none; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.52; } .partner-bar__feature { float: left; width: 29%; margin: 12px 5% 0 0; } .partner-bar__brand { display: block; float: left; margin-right: 24px; margin-left: 24px; } .partner-bar__company { display: block; margin-top: 8px; color: var(--color-white); font: var(--label-md); font-weight: var(--font-weight-bold); line-height: 1.15; white-space: nowrap; text-align: right; opacity: 0.75; } .partner-bar__name { display: block; margin-top: var(--space-8); color: #16febf; font: var(--label-sm); font-weight: var(--font-weight-regular); line-height: 1.15; white-space: nowrap; text-align: right; opacity: 0.75; } .partner-bar__partner-mark { display: block; width: 52%; height: clamp(34px, 2.7vw, 48px); margin-top: clamp(8px, 0.4vw, 24px); object-fit: contain; object-position: right center; filter: brightness(0) invert(1); opacity: 0.82; float: right; } .partner-bar__portrait-wrap { float: left; display: block; width: 80px; aspect-ratio: 1 / 1; } .hw-is-safari .partner-bar__brand { display: inline-block; float: left; margin-right: 12px; margin-left: 24px; width: 38%; } .hw-is-safari .partner-bar__portrait-wrap { float: left; display: inline-block; width: 80px; aspect-ratio: 1 / 1; } .hw-is-safari .partner-bar__company { display: block; margin-top: 8px; width: fit-content; float: right; clear: both; } .hw-is-safari .partner-bar__name { display: block; margin-top: var(--space-8); width: fit-content; float: right; clear: both; } .hw-is-safari .partner-bar__partner-mark { display: block; width: 52%; height: clamp(34px, 2.7vw, 48px); margin-top: clamp(8px, 0.4vw, 24px); object-fit: contain; object-position: right center; filter: brightness(0) invert(1); opacity: 0.82; float: right; clear: both; } .partner-bar__photo { display: block; width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; box-shadow: 0 0px 8px rgba(40, 0, 110, 0.24); } .partner-bar__play { --symbol-weight: var(--font-weight-bold); position: relative; z-index: 3; float: left; width: 50%; aspect-ratio: 1 / 1; margin-top: -45%; margin-left: -7%; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-full); background: rgba(163, 40, 255, 0.72); color: var(--color-white); cursor: pointer; text-align: center; font-size: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 8px 20px rgba(95, 20, 170, 0.22); transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .partner-bar__play::before { content: none; } .partner-bar__play .material-symbols-rounded, .partner-bar__play .material-symbol-svg { display: inline-block; margin-top: 2px; width: var(--icon-size-lg); height: var(--icon-size-lg); font-size: var(--icon-size-lg); font-variation-settings: 'FILL' 1, 'wght' var(--symbol-weight), 'GRAD' 0, 'opsz' 24; transform: translateX(1px); } .partner-bar__play:hover { background: rgba(179, 64, 255, 0.86); transform: scale(1.03); } @media (max-width: 899.98px) { .partner-bar { width: min(930px, calc(100% - var(--screen-margin) - var(--screen-margin))); } .partner-bar__title { font: var(--body-md); font-weight: var(--font-weight-bold); } .partner-bar__rule { width: 89.2%; } .partner-bar__feature { float: none; width: min(286px, 78%); min-height: 0; margin: 0 auto; } .partner-bar__company { font: var(--label-md); font-weight: var(--font-weight-bold); } .partner-bar__name { font: var(--label-sm); margin-top: 0; } .partner-bar__partner-mark { display: block; width: 52%; height: clamp(34px, 2.7vw, 48px); margin-top: 0; object-fit: contain; object-position: right center; filter: brightness(0) invert(1); opacity: 0.82; float: right; } .partner-bar__portrait-wrap { width: 66px; } .partner-bar__logos { float: none; width: 100%; min-height: 112px; margin: clamp(16px, 6vw, 16px) auto 0; text-align: center; } .partner-bar__logo { display: inline-block; float: none; width: 82px; height: 40px; margin-left: 20px; margin-right: 20px; vertical-align: middle; } } @media (max-width: 425px) { .partner-bar__feature { float: none; width: min(286px, 70%); min-height: 0; margin: 8px auto 0; } .partner-bar__logo { display: inline-block; float: none; width: 64px; height: 40px; margin-left: 20px; margin-right: 20px; vertical-align: middle; } } @media (max-width: 360px) { .partner-bar { width: min(285px, calc(100% - var(--space-24) - var(--space-24))); } .partner-bar__title { font: var(--title-sm); font-weight: var(--font-weight-bold); } .partner-bar__rule { width: 71.2%; } .partner-bar__feature { float: none; width: auto; min-height: 0; margin: 0 auto; } .partner-bar__company { font: var(--label-lg); font-weight: var(--font-weight-bold); } .partner-bar__name { font: var(--label-sm); } .partner-bar__logos { min-height: 150px; } .partner-bar__logo { display: inline-block; float: none; width: 24%; height: 38px; margin-left: 4%; margin-right: 4%; margin-bottom: 22px; vertical-align: middle; } } /* Hero testimonial video expando */ .hero-video-expando { --video-expando-radius: 64px; --video-expando-top-overlap: -64px; --video-expando-media-width: clamp(306px, 27vw, 336px); --video-expando-horn-width: 118px; --video-expando-horn-height: 87px; position: relative; z-index: 29; margin-top: var(--video-expando-top-overlap); padding: 104px 0 128px; overflow: visible; border-radius: var(--video-expando-radius) 0 var(--video-expando-radius) 0; background: radial-gradient(circle at 23% 54%, rgba(163, 40, 255, 0.32), transparent 34%), radial-gradient(circle at 82% 32%, rgba(41, 196, 204, 0.12), transparent 30%), linear-gradient(135deg, #16012d 0%, #26024f 48%, #090112 100%); color: var(--color-white); opacity: 0; transform: translateY(-12px); will-change: opacity, transform; transition: opacity 160ms ease-out, transform 160ms cubic-bezier(0.2, 0, 0.2, 1); } .hero-video-expando::before { content: ""; position: absolute; z-index: 0; top: calc((var(--video-expando-horn-height) * -1) + 1px); right: 0; width: calc(var(--video-expando-horn-width) + 1px); height: calc(var(--video-expando-horn-height) + 1px); background: radial-gradient(circle at 23% 54%, rgba(163, 40, 255, 0.32), transparent 34%), radial-gradient(circle at 82% 32%, rgba(41, 196, 204, 0.12), transparent 30%), linear-gradient(135deg, #16012d 0%, #26024f 48%, #090112 100%); -webkit-mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; } .hero-video-expando[hidden] { display: none; } .hero-video-expando.is-open { opacity: 1; transform: translateY(0); } .hero-video-expando.is-closing { pointer-events: none; } .hero-video-expando__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, var(--video-expando-media-width)) minmax(0, 1fr); align-items: center; gap: clamp(var(--space-40), 7vw, var(--space-96)); } .hero-video-expando__media { position: relative; justify-self: end; width: var(--video-expando-media-width); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 50% 38%, rgba(123, 55, 255, 0.22), transparent 46%), #05010d; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(164, 79, 255, 0.12); } .hero-video-expando__media iframe, .hero-video-expando__media video { display: block; width: 100%; height: 100%; border: 0; background: #05010d; transition: opacity 180ms ease; } .hero-video-expando__media.is-loading iframe { opacity: 0; } .hero-video-expando__loading, .hero-video-expando__placeholder { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: var(--space-12); padding: var(--space-24); background: radial-gradient(circle at 50% 42%, rgba(123, 55, 255, 0.2), transparent 46%), #05010d; font: var(--label-lg); color: rgba(255, 255, 255, 0.72); text-align: center; } .hero-video-expando__loading .material-symbols-rounded, .hero-video-expando__loading .material-symbol-svg { width: 48px; height: 48px; font-size: 48px; color: rgba(255, 255, 255, 0.84); } .hero-video-expando__content { max-width: 620px; display: grid; gap: var(--space-20); } .hero-video-expando__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); } .hero-video-expando__eyebrow { margin: 0; font: var(--label-lg); color: rgba(255, 255, 255, 0.68); } .hero-video-expando__close { width: 40px; height: 40px; padding: 0; color: var(--color-white); background: transparent; box-shadow: none; } .hero-video-expando__close::before { background: var(--color-white); } .hero-video-expando__close:hover::before { opacity: var(--state-hover); } .hero-video-expando__close:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; } .hero-video-expando__close:focus-visible::before { opacity: var(--state-focus); } .hero-video-expando__close:active { transform: scale(0.98); } .hero-video-expando__close:active::before { opacity: var(--state-pressed); } .hero-video-expando__close .material-symbols-rounded, .hero-video-expando__close .material-symbol-svg { width: var(--icon-size-sm); height: var(--icon-size-sm); font-size: var(--icon-size-sm); } .hero-video-expando__title { margin: 0; max-width: 80%; font: var(--headline-sm); letter-spacing: var(--letter-spacing-display-sm); color: var(--color-white); } .hero-video-expando__description { margin: 0; max-width: 56ch; font: var(--body-lg); color: rgba(255, 255, 255, 0.76); } @media (max-width: 900px) { .hero-video-expando { --video-expando-top-overlap: -48px; --video-expando-media-width: min(326px, calc(100vw - 48px)); --video-expando-horn-width: clamp(78px, 14.9vw, 118px); --video-expando-horn-height: clamp(58px, 11vw, 87px); padding: 88px 0 104px; } .hero-video-expando__inner { grid-template-columns: 1fr; gap: var(--space-40); } .hero-video-expando__media { justify-self: center; } .hero-video-expando__content { max-width: none; } } @media (max-width: 520px) { .hero-video-expando { --video-expando-radius: 40px; --video-expando-media-width: min(318px, calc(100vw - 48px)); padding: 80px 0 96px; } .hero-video-expando__inner { gap: var(--space-32); } .hero-video-expando__media { border-radius: 20px; } .hero-video-expando__description { font: var(--body-md); } } @media (min-width: 1600px) { .homepage-hero { --hero-visual-height: clamp(390px, 28vw, 520px); --hero-stairs-top: clamp(-448px, -21.8vw, -416px); } } @media (prefers-reduced-motion: reduce) { .hero-video-expando, .hero-video-expando__media iframe, .hero-video-expando__media video { transition: none; } } /* ── Responsive ──────────────────────────────── */ @media (max-width: 1080px) { .homepage-hero { --hero-swoosh-width: clamp(78px, 14.9vw, 118px); --hero-swoosh-height: clamp(58px, 11vw, 87px); --hero-visual-gap: var(--space-48); --hero-visual-height: clamp(300px, 37vw, 380px); --hero-strip-overlap: clamp(194px, 25vw, 250px); --hero-stairs-top: clamp(-323px, calc(25px - 42.4vw), -155px); --hero-underlay-top: clamp(-172px, calc(104px - 27vw), -103px); margin-top: -64px; padding-top: calc(128px + var(--space-32)); max-height: none; min-height: unset; } .homepage-hero__text { padding-top: 0; padding-bottom: 0; max-width: 100%; } .homepage-hero__visual-stage::before { display: block; } } @media (max-width: 1023px) { .homepage-hero::before { display: block; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: clamp(220px, 52vw, 320px); background: #8800fe; } } @media (min-width: 641px) and (max-width: 900px) { .homepage-hero { --hero-stairs-top: clamp(-323px, calc(25px - 33.4vw), -155px); } .homepage-hero__bottom-strip { padding: var(--space-0) 0 0; padding-bottom: calc(var(--hero-logo-bottom-inset) - var(--space-24)) !important; } } @media (max-width: 768px) { .homepage-hero__bottom-strip { padding: var(--space-64) 0 0; padding-bottom: var(--hero-logo-bottom-inset) !important; } } @media (max-width: 640px) { .homepage-hero { --hero-visual-gap: var(--space-24); --hero-visual-height: clamp(226px, 70vw, 310px); --hero-strip-overlap: clamp(196px, 58vw, 238px); --hero-stairs-top: clamp(-90px, -18vw, -67px); --hero-underlay-top: clamp(-10px, calc(50vw - 197.5px), 15px); padding-top: calc(96px + var(--space-32)); } .homepage-hero__headline, .homepage-hero__sub { text-align: center; } .homepage-hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-16); } .homepage-hero__actions .hw-btn { width: 100%; justify-content: center; } } @media (min-width: 401px) and (max-width: 640px) { .homepage-hero { --hero-stairs-top: clamp(-62px, -12.5vw, -52px); } } /* ── Stats (updated) ─────────────────────────── */ /* ── Proof / FAQ / CTA swoop field ───────────── */ .homepage-proof-swoop { --proof-card-width: 536px; --proof-faq-width: 457px; --proof-column-gap: 64px; --proof-violet-offset: 140px; --proof-horn-width: 118px; --proof-horn-height: 87px; --proof-horn-color: var(--color-violet); height: auto; min-height: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(var(--screen-margin), 1fr) minmax(0, var(--proof-card-width)) var(--proof-column-gap) minmax(0, var(--proof-faq-width)) minmax(var(--screen-margin), 1fr); align-items: start; padding: 72px 0 72px; background: transparent; overflow: hidden; border-radius: 0 0 0 140px; z-index: 4; } .homepage-proof-swoop::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 100%; background: var(--color-violet); pointer-events: none; margin-top: var(--proof-violet-offset); } .homepage-proof-swoop::after { content: ""; position: absolute; z-index: 1; top: calc(var(--proof-violet-offset) - var(--proof-horn-height)); left: 0; width: var(--proof-horn-width); height: var(--proof-horn-height); background: var(--proof-horn-color); -webkit-mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; transform: scaleX(-1); } .homepage-proof-swoop > .hw-section { position: relative; z-index: 2; background: transparent; } .homepage-proof-swoop .testimonial-featured { grid-row: 1; grid-column: 2; padding: 0; } .homepage-proof-swoop .testimonial-featured .page-rail { width: 100%; max-width: none; padding-inline: 0; } .homepage-proof-swoop .homepage-faq { grid-row: 1; grid-column: 4; align-self: start; margin: 106px 0 0; padding: 0; color: var(--color-white); } .homepage-proof-swoop .homepage-faq .container { width: 100%; max-width: none; padding-inline: 0; } .homepage-proof-swoop .homepage-faq .hw-faq { --hw-faq-heading-color: var(--color-white); --hw-faq-question-color: var(--color-white); --hw-faq-question-hover-color: var(--color-white); --hw-faq-answer-color: rgba(255, 255, 255, 0.82); --hw-faq-divider-color: #CE8CFF; margin-inline: 0; } @media (max-width: 1180px) { .homepage-proof-swoop { --proof-horn-width: clamp(78px, 14.9vw, 118px); --proof-horn-height: clamp(58px, 11vw, 87px); display: block; padding: var(--space-64) 0 0; } .homepage-proof-swoop::before { display: block; } .homepage-proof-swoop .testimonial-featured { padding-inline: var(--screen-margin); } .homepage-proof-swoop .homepage-faq { position: relative; margin-top: var(--space-56); padding: var(--space-64) var(--screen-margin); } .homepage-proof-swoop .homepage-faq .container { position: relative; z-index: 1; } .homepage-proof-swoop .homepage-faq .hw-faq { --hw-faq-max-width: 570px; margin: 0 auto; } } /* ── Testimonial featured ───────────────────── */ .testimonial-featured { background: var(--color-white); } .testimonial-featured__carousel { position: relative; overflow: visible; max-width: 536px; margin-inline: auto; } .testimonial-featured__eyebrow { max-width: 536px; margin: 0 auto var(--space-24); color: var(--color-violet); font: var(--title-md); font-weight: var(--font-weight-bold); text-align: left; } .testimonial-featured__track { position: relative; display: grid; align-items: stretch; min-height: 751px; overflow: hidden; border-radius: 18px; background: var(--color-white); box-shadow: 0 0 17px rgba(0, 0, 0, 0.05); isolation: isolate; } .testimonial-featured__track::before { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; width: 294px; height: 252px; background: url(/assets/images/homepage/testimonial-swoop.png) center / 100% 100% no-repeat; pointer-events: none; } .testimonial-featured__slide { grid-area: 1 / 1; position: relative; z-index: 1; display: grid; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 60ms linear, visibility 0s linear 60ms; } .testimonial-featured__carousel:not(.is-ready) .testimonial-featured__slide:first-child, .testimonial-featured__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .testimonial-featured__card { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 751px; padding: 34px 24px 110px; background: transparent; } .testimonial-featured__content { z-index: 2; display: flex; min-height: calc(751px - 144px); flex-direction: column; } .testimonial-featured__quote { position: relative; z-index: 4; max-width: none; margin: 10px 7px 0; color: var(--color-text-primary); font: var(--body-lg); } .testimonial-featured__quote::before, .testimonial-featured__quote::after { display: block; color: var(--color-violet); font: var(--font-weight-bold) 42px / 0.72 var(--font-family); pointer-events: none; } .testimonial-featured__quote::before { content: "“"; margin-bottom: var(--space-12); } .testimonial-featured__quote::after { content: "”"; margin-top: var(--space-20); color: #338ff0; text-align: right; } .testimonial-featured__quote-lead, .testimonial-featured__quote-rest { display: block; } .testimonial-featured__quote-lead { font: var(--headline-sm); } .testimonial-featured__quote-rest { margin-top: var(--space-24); font: var(--body-lg); white-space: pre-line; } .testimonial-featured__author { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 0; max-width: 290px; margin: var(--space-24) 0 0; } .testimonial-featured__name { color: var(--color-violet); font: var(--body-md); font-weight: var(--font-weight-bold); } .testimonial-featured__company { color: var(--color-violet); font: var(--body-md); white-space: pre-line; } .testimonial-featured__image-wrap { position: absolute; z-index: 2; right: 0; bottom: 0; display: grid; place-items: end; width: 264px; height: 252px; pointer-events: none; } .testimonial-featured__image { display: block; width: 246px; height: 246px; object-fit: contain; } .testimonial-featured__image.is-cutout { width: 252px; height: 252px; } .testimonial-featured__image.is-avatar { width: 196px; height: 196px; border-radius: 50%; object-fit: cover; box-shadow: var(--elevation-3); } @media (min-width: 768px) { .testimonial-featured__slide--frontgate .testimonial-featured__image-wrap { width: 284px; height: 272px; } .testimonial-featured__slide--frontgate .testimonial-featured__image.is-cutout { width: 282px; height: 262px; object-fit: cover; object-position: center bottom; } } .testimonial-featured__controls { position: absolute; z-index: 6; left: 24px; bottom: 48px; display: flex; align-items: center; gap: var(--space-8); } .testimonial-featured__control { --tint-fill: 0.28; --tint-entry: 0.8; color: var(--color-violet); backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; } .testimonial-featured__control::before { transition: none; } .testimonial-featured__control:hover, .testimonial-featured__control:focus-visible, .testimonial-featured__control:active { transform: none; } .testimonial-featured__control .material-symbols-rounded, .testimonial-featured__control .material-symbol-svg { font-variation-settings: 'FILL' 0, 'wght' var(--font-weight-regular), 'GRAD' 0, 'opsz' 24; } @media (max-width: 767px) { .testimonial-featured__eyebrow { max-width: none; margin-bottom: var(--space-16); } .testimonial-featured__card { min-height: 0; padding: var(--space-32) var(--space-24) 0; } .testimonial-featured__track { min-height: 0; } .testimonial-featured__track::before { width: 244px; height: 202px; } .testimonial-featured__slide { position: absolute; inset: 0; } .testimonial-featured__carousel:not(.is-ready) .testimonial-featured__slide:first-child, .testimonial-featured__slide.is-active { position: relative; inset: auto; } .testimonial-featured__content { min-height: 0; } .testimonial-featured__quote { max-width: none; font: var(--body-md); margin-inline: 0; } .testimonial-featured__quote::before, .testimonial-featured__quote::after { font-size: 34px; } .testimonial-featured__quote::after { margin-top: var(--space-16); } .testimonial-featured__author { margin-top: var(--space-24); max-width: calc(100% - var(--space-72)); } .testimonial-featured__image-wrap { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 210px; height: 210px; margin: auto -18px 0 0; padding-top: var(--space-16); } .testimonial-featured__image, .testimonial-featured__image.is-cutout { width: 210px; height: 210px; } .testimonial-featured__image.is-avatar { width: 144px; height: 144px; } .testimonial-featured__controls { position: relative; left: auto; bottom: auto; justify-content: center; margin-top: var(--space-16); } .testimonial-featured__control { --tint-fill: 0; --tint-entry: 1; color: var(--color-white); background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 8px 20px rgba(58, 12, 118, 0.14); } .testimonial-featured__control::before { background: var(--color-white); } } @media (prefers-reduced-motion: reduce) { .testimonial-featured__slide { transition: none; } } /* ── Press bar ───────────────────────────────── */ .press-bar { --press-swoosh-width: 118px; --press-swoosh-height: 87px; --press-horn-radius: 110px; --press-surface-height: 160px; position: relative; z-index: 4; background: transparent; overflow: visible; } section#press-bar { z-index: 30 !important; margin-top: calc(0px - var(--homepage-press-overlap)) !important; border-radius: 64px 0 64px 0; background-color: white !important; } .press-bar::before { content: ""; position: absolute; z-index: 2; top: calc(var(--press-swoosh-height) * -1); right: 0; width: var(--press-swoosh-width); height: var(--press-swoosh-height); background: var(--color-white); -webkit-mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; } .press-bar::after { content: ""; position: absolute; z-index: 2; left: 0; bottom: calc(var(--press-swoosh-height) * -1); width: var(--press-swoosh-width); height: var(--press-swoosh-height); background: var(--color-white); -webkit-mask: url('/assets/images/homepage/press-swoosh-bottom.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-bottom.svg') center / 100% 100% no-repeat; pointer-events: none; } .press-bar__inner { position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(var(--space-32), 5vw, var(--space-64)); min-height: var(--press-surface-height); margin-inline: auto; padding-block: 38px; } .press-bar__copy { display: grid; align-content: center; justify-items: start; gap: 3px; min-width: 0; } .press-bar__eyebrow { font-family: var(--font-family); font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.5; color: rgba(0, 0, 0, 0.55); margin: 0; } .press-bar__headline { font-family: var(--font-family); font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.5; max-width: 32rem; margin: 0; text-wrap: balance; } .press-bar__headline-link { color: var(--color-violet); text-decoration: none; transition: color 200ms var(--ease-standard); } .press-bar__headline-link:hover, .press-bar__headline-link:focus-visible { color: var(--color-violet-dark); } .press-bar__headline-link:focus-visible { border-radius: 8px; outline: 3px solid color-mix(in srgb, var(--color-violet) 34%, transparent); outline-offset: 6px; } .press-bar__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; row-gap: 18px; column-gap: clamp(var(--space-24), 4vw, var(--space-56)); width: 100%; } .press-bar__logo-item { display: flex; align-items: center; justify-content: center; height: 33px; } .press-bar__logo-link { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; } .press-bar__logo-link:focus-visible { border-radius: 8px; outline: 3px solid color-mix(in srgb, var(--color-violet) 34%, transparent); outline-offset: 8px; } .press-bar__logo-item:nth-child(4) { width: 94px; } .press-bar__logo-item:nth-child(5) { grid-column: 2; width: 150px; } .press-bar__logo-item:nth-child(6) { grid-column: 3; width: 105px; } .press-bar__logo-item img { max-height: 33px; max-width: 100%; width: auto; opacity: 0.86; filter: grayscale(1); transition: opacity 200ms var(--ease-standard), filter 200ms var(--ease-standard); } .press-bar__logo-link:hover img { opacity: 0.8; filter: grayscale(0.2); } /* ── Post-media gradient field ───────────────── */ .homepage-gradient-field { --homepage-gradient-overlap: 87px; --homepage-gradient-height: 1609px; position: relative; isolation: isolate; background: linear-gradient( 180deg, rgba(232, 237, 251, 1) 0%, rgba(232, 237, 251, 1) 9%, rgba(255, 255, 255, 1) 100% ) top / 100% var(--homepage-gradient-height) no-repeat, var(--color-white); margin-top: calc(var(--homepage-gradient-overlap) * -1); padding-top: var(--homepage-gradient-overlap); } .homepage-gradient-field > .feature-story { position: relative; z-index: 1; background: transparent; padding-bottom: 40px; padding-top: 40px; } #fs-database { padding-top: 0px; padding-bottom: 0px; } @media (max-width: 1180px) { .press-bar { --press-swoosh-width: clamp(78px, 14.9vw, 118px); --press-swoosh-height: clamp(58px, 11vw, 87px); --press-horn-radius: 56px; } .homepage-gradient-field { --homepage-gradient-overlap: clamp(58px, 11vw, 87px); } } @media (max-width: 900px) { :root { --homepage-press-overlap: 35px; } #fs-database, #fs-routing, #fs-transfer, #fs-agent { --feature-story-stack-gap: var(--space-12); } .press-bar { --press-surface-height: 0; } .press-bar__inner { grid-template-columns: 1fr; justify-items: stretch; gap: 25px; padding: 32px 24px; text-align: center; } .press-bar__copy { justify-items: stretch; gap: 3px; } .press-bar__eyebrow { font-size: 18px; line-height: 1.5; } .press-bar__headline { max-width: 100%; font-size: 18px; font-weight: var(--font-weight-regular); line-height: 1.5; } .press-bar__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px 30px; border-top: 1px solid var(--color-neutral-200); padding-top: 25px; } .press-bar__logo-item { width: auto !important; grid-column: auto !important; justify-content: center; height: 20px; } .press-bar__logo-item img { max-height: 20px; } .homepage-gradient-field { --homepage-gradient-height: clamp(1180px, 206vw, 1609px); } #fs-database { padding-top: 64px; padding-bottom: 0; } #fs-database .feature-story__inner { gap: var(--feature-story-stack-gap); } #fs-database .feature-story__visual { max-height: 500px; overflow: hidden; width: 100vw; margin-left: calc(var(--screen-margin) * -1); align-items: flex-start; transform-origin: top; } section#fs-voice, section#fs-routing, section#fs-transfer, section#fs-agent, section#fs-fs-agent { background: linear-gradient(181deg, #E8EDFB -100%, transparent) !important; border-top: 3px solid #cfd9f4; } } @media (max-width: 560px) { .press-bar__logos { gap: 11px 30px; } .press-bar__logo-item { min-width: 0; } } @media (max-width: 425px) { #fs-database .feature-story__visual { max-height: 400px; overflow: hidden; width: 100vw; margin-left: calc(var(--screen-margin) * -1); } } @media (min-width: 376px) and (max-width: 425px) { #fs-database .anim-database { transform-origin: center top; margin-top: -50px; transform: scale(1.4); top: -20px; } } @media (max-width: 375px) { #fs-database .anim-database { transform-origin: center top; margin-top: -50px; transform: scale(1.5); top: -20px; } } /* ── CRM chips ───────────────────────────────── */ .crm-chips { position: relative; z-index: 1; padding: 36px 0; background: var(--color-white); } .crm-chips__inner { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 5fr); align-items: center; gap: clamp(var(--space-32), 5vw, var(--space-64)); min-height: 72px; } .crm-chips__text { min-width: 0; max-width: 32rem; } .crm-chips__eyebrow { font-family: var(--font-family); font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.5; color: rgba(17, 17, 17, 0.55); margin: 0 0 3px; } .crm-chips__body { font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.5; color: rgba(85, 85, 85, 0.55); margin: 0; } .crm-chips__list { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; min-width: 0; } .crm-chip { flex: 0 0 auto; } .crm-chips__more-link { display: inline-flex; align-items: center; justify-content: center; padding: 9px 10px 10px; border-radius: var(--radius-full); background: transparent; color: var(--color-violet); font: var(--font-weight-medium) 11px / 1.171875 var(--font-family); white-space: nowrap; text-decoration: none; transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard); display: none; } .crm-chips__more-link:hover { background: rgba(163, 40, 255, 0.06); color: var(--color-violet-dark); } @media (max-width: 900px) { .crm-chips__inner { grid-template-columns: 1fr; align-items: flex-start; gap: var(--space-12); } .crm-chips__text { min-width: 0; max-width: none; } .crm-chips__eyebrow { font-family: var(--font-family); font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.5; color: rgba(17, 17, 17, 0.55); margin: 0 0 3px; text-align: center; } .crm-chips__body { font-family: var(--font-family); font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.5; color: rgba(85, 85, 85, 0.55); margin: 0; align-items: center; text-align: center; } .crm-chips__list { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; min-width: 0; justify-content: center; } .crm-chips__more-link { display: none; } } @media (max-width: 768px) { .press-bar__logos { gap: 11px 30px; } } /* ── Final CTA ───────────────────────────────── */ .homepage-cta { --homepage-cta-proof-overlap: 160px; --homepage-cta-footer-overlap: 142px; --homepage-cta-horn-width: clamp(78px, 14.9vw, 118px); --homepage-cta-horn-height: clamp(58px, 11vw, 87px); position: relative; isolation: isolate; z-index: 3; margin-top: calc(-1 * var(--homepage-cta-proof-overlap)); padding-top: calc(var(--space-120) + var(--homepage-cta-proof-overlap)); padding-bottom: calc(var(--space-120) + var(--homepage-cta-footer-overlap)); background-color: var(--color-white); background-image: url('/assets/images/homepage/cta-bg-waves.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .homepage-cta::after { content: ""; position: absolute; z-index: 0; top: var(--homepage-cta-proof-overlap); width: var(--homepage-cta-horn-width); height: var(--homepage-cta-horn-height); background: var(--color-violet); -webkit-mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; transform: scaleY(-1); } .homepage-cta::after { right: 0; } .homepage-cta > .container { position: relative; z-index: 1; } .homepage-cta__headline-accent { color: var(--color-violet-dark); /* fallback for browsers without background-clip support */ } @supports (background-clip: text) or (-webkit-background-clip: text) { .homepage-cta__headline-accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .homepage-cta__subtitle { color: var(--color-violet-dark); } /* ============================================ */ /* FEATURE STORY */ /* Reusable split: text-left / visual-right */ /* Used by: database, routing, transfer, voice */ /* ============================================ */ .feature-story { --feature-story-stack-gap: var(--space-40); background: var(--color-white); overflow: hidden; } /* Allows animation markers and glow fields to escape their layout box. */ .feature-story--visual-bleed, .feature-story--visual-bleed .feature-story__visual { overflow: visible; } /* Alternate bg for visual rhythm */ .feature-story--cloud { background: var(--color-neutral-100); } .feature-story__inner { display: grid; grid-template-columns: 6fr 7fr; grid-template-areas: "text visual"; gap: var(--space-80); align-items: center; min-height: 420px; } /* Reversed: illustration left, text right (features 2 + 4) */ .feature-story--reversed .feature-story__inner { grid-template-columns: 7fr 6fr; grid-template-areas: "visual text"; } .feature-story__text { grid-area: text; } .feature-story__visual { grid-area: visual; } /* ── Text column ─────────────────────────── */ .feature-story__text { display: flex; flex-direction: column; gap: 12px; width: min(424px, 100%); padding: var(--space-32) 0; z-index: 10; } .feature-story__copy { display: flex; flex-direction: column; gap: var(--space-12); } .feature-story__headline { margin: 0; color: var(--color-neutral-900); } .feature-story__body { margin: 0; } .feature-story__body > p { margin: 0; } .feature-story__cta { align-self: flex-start; } /* ── Collapsible feature panel ─────────────── */ .collapseable-feature-panel, .collapsible-feature-panel { display: flex; flex-direction: column; align-items: center; gap: 0; align-self: flex-start; width: min(100%, 378px); padding: 24px 24px 40px; border-radius: 12px; color: var(--color-neutral-500); margin-left: -24px; transition: background-color 120ms var(--ease-standard), box-shadow var(--duration-short) var(--ease-standard); } .collapseable-feature-panel.is-open, .collapsible-feature-panel.is-open { background: var(--color-white); box-shadow: 0 0 30px rgba(0, 0, 0, 0.06); } .collapseable-feature-panel--wide { width: min(100%, 432px); } .feature-panel-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .collapseable-feature-panel .feature-grid, .collapsible-feature-panel .feature-grid { display: grid; align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 34px; width: 100%; height: 0; margin-top: 0; overflow: hidden; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-4px); transition: height 240ms var(--ease-standard-accelerate), margin-top 130ms var(--ease-standard-accelerate), opacity 90ms linear, transform 130ms var(--ease-standard-accelerate), visibility 0s linear 130ms; } .collapseable-feature-panel.is-open .feature-grid, .collapsible-feature-panel.is-open .feature-grid { height: var(--feature-grid-height, auto); margin-top: 14px; opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); text-align: left; transition: height var(--duration-short) var(--ease-standard-decelerate), margin-top var(--duration-short) var(--ease-standard-decelerate), opacity 100ms linear, transform var(--duration-short) var(--ease-standard-decelerate), visibility 0s linear 0s; } .collapseable-feature-panel .feature-panel-toggle-icon, .collapsible-feature-panel .feature-panel-toggle-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; color: #1F1F1F; } .collapseable-feature-panel .feature-panel-toggle-icon svg, .collapsible-feature-panel .feature-panel-toggle-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; } .collapseable-feature-panel .feature-panel-toggle-icon--open, .collapsible-feature-panel .feature-panel-toggle-icon--open, .collapseable-feature-panel.is-open .feature-panel-toggle-icon--closed, .collapsible-feature-panel.is-open .feature-panel-toggle-icon--closed { display: none; } .collapseable-feature-panel.is-open .feature-panel-toggle-icon--open, .collapsible-feature-panel.is-open .feature-panel-toggle-icon--open { display: inline-flex; } .collapseable-feature-panel .feature-grid-item, .collapsible-feature-panel .feature-grid-item { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .collapseable-feature-panel .feature-grid-item-icon, .collapsible-feature-panel .feature-grid-item-icon { display: flex; min-height: var(--icon-size-lg); align-items: flex-start; color: var(--color-violet-dark); /* fallback for browsers without text background clipping */ font-family: "Material Symbols Rounded"; font-size: var(--icon-size-lg); font-weight: 200; line-height: 1; font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 32; } .collapseable-feature-panel .feature-grid-item-icon .material-symbols-rounded, .collapsible-feature-panel .feature-grid-item-icon .material-symbols-rounded { display: inline-block; width: var(--icon-size-lg); height: var(--icon-size-lg); font: inherit; line-height: 1; font-variation-settings: inherit; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .collapseable-feature-panel .feature-grid-item-icon svg, .collapsible-feature-panel .feature-grid-item-icon svg { display: block; width: var(--icon-size-lg); height: var(--icon-size-lg); flex: 0 0 var(--icon-size-lg); fill: currentColor; } .collapseable-feature-panel:not(.good-hands-panel) .feature-grid-item-icon svg path, .collapsible-feature-panel:not(.good-hands-panel) .feature-grid-item-icon svg path { fill: url("#feature-panel-icon-gradient"); } .collapseable-feature-panel .feature-grid-item-text, .collapsible-feature-panel .feature-grid-item-text { color: var(--color-neutral-500); font: var(--font-weight-regular) 0.75rem/1.5 var(--font-family); letter-spacing: 0; } /* ── Visual column ───────────────────────── */ .feature-story__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; } .feature-story__visual > img { width: 100%; max-height: 520px; height: auto; object-fit: contain; border-radius: var(--radius-xl); display: block; } .feature-story__visual > .feature-story__poster { display: none; max-height: none; max-width: none; border-radius: 0; } .feature-story__visual > .feature-story__poster--voice { width: min(116%, 621px); flex: 0 1 621px; aspect-ratio: 1242 / 1132; } .feature-story__visual > .feature-story__poster--routing { width: min(100%, 593px); flex: 0 1 593px; aspect-ratio: 1142 / 774; } .feature-story__visual > .feature-story__poster--handoff { width: min(100%, 556px); flex: 0 1 556px; aspect-ratio: 1112 / 1122; } .feature-story__visual > .feature-story__poster--database { width: min(140%, 595px); flex: 0 1 595px; aspect-ratio: 1190 / 1354; transform-origin: 0 0; } .feature-story__visual .anim-carousel { width: min(100%, 705px); flex: 0 1 705px; } .feature-story__visual .anim-1to1 { width: min(100%, 621px); flex: 0 1 621px; } @media (max-width: 425px) { #fs-voice .feature-story__visual { overflow: hidden; } .feature-story__visual .anim-1to1 { width: min(100%, 621px); flex: 0 1 621px; transform: scale(1.3); } } /* ── Agent assistant / good-hands composition ─────────────── */ .feature-story--agent { --good-hands-gradient-start: clamp(300px, 60%, 380px); --good-hands-gradient-feather: clamp(78px, 8vw, 132px); --good-hands-scene-width: min(100%, 760px); --good-hands-scene-aspect: 760 / 430; --good-hands-dock-offset: 40px; position: relative; overflow: hidden; padding-bottom: 0; background: var(--color-white); } .homepage-gradient-field > .feature-story.feature-story--agent { padding-bottom: 0; } .feature-story--agent::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient( 180deg, rgba(246, 249, 255, 0) 0, rgba(246, 249, 255, 0) var(--good-hands-gradient-start), #F8FAFF calc(var(--good-hands-gradient-start) + var(--good-hands-gradient-feather)), #F6F9FF 100% ); pointer-events: none; } .feature-story--agent:has(.good-hands-panel.is-open) { --good-hands-gradient-start: clamp(410px, 66%, 560px); } .feature-story--agent .page-rail { position: relative; z-index: 1; } .feature-story--agent .feature-story__inner { min-height: clamp(430px, 36vw, 520px); grid-template-columns: minmax(340px, 432px) minmax(560px, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; padding-inline: clamp(0px, 4vw, 48px); } .feature-story--agent .feature-story__text { width: min(432px, 100%); gap: var(--space-16); align-self: center; padding-top: 0; padding-bottom: 0; } .feature-story--agent .feature-story__body { max-width: 360px; } .feature-story--agent .feature-story__headline { max-width: 380px; } .feature-story--agent .feature-story__icon-grid { display: none; } .feature-story--agent .feature-story__visual { min-height: clamp(350px, 34vw, 438px); align-items: flex-end; justify-content: flex-start; align-self: stretch; margin-top: 0; } .good-hands-panel { width: 432px; max-width: 100%; margin-left: -24px; margin-bottom: 24px; } .good-hands-panel .good-hands-panel__trigger { border-radius: 8px; } .good-hands-panel .feature-grid { column-gap: 16px; row-gap: 34px; } .good-hands-panel .feature-grid-item { gap: 4px; } .good-hands-panel .feature-grid-item-icon { width: 32px; height: 32px; min-height: 32px; align-items: center; justify-content: flex-start; font-size: 32px; line-height: 1.2; color: var(--color-violet); } .good-hands-panel .feature-grid-item-icon svg { width: 32px; height: 32px; max-width: none; max-height: none; flex: 0 0 32px; } .good-hands-panel .feature-grid-item-icon svg path { fill: url("#feature-panel-icon-gradient"); } .good-hands-panel .feature-grid-item-text { color: #626262; font: var(--font-weight-regular) 12px/1.5 var(--font-family); } .good-hands-visual { position: relative; width: var(--good-hands-scene-width); aspect-ratio: var(--good-hands-scene-aspect); align-self: end; margin-top: 10px; overflow: visible; isolation: isolate; transform: translateY(var(--good-hands-dock-offset)); border: 1px dashed rgba(88, 150, 238, 0.42); border-radius: 16px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72); } .feature-story--agent .good-hands-visual.anim-walktalk { border: 0; background: transparent; box-shadow: none; } .feature-story--agent .good-hands-visual.anim-walktalk .anim-walktalk__bg, .feature-story--agent .good-hands-visual.anim-walktalk .anim-walktalk__bg::before { background: transparent; } .feature-story--agent .good-hands-poster { display: none; width: var(--good-hands-scene-width); max-height: none; max-width: none; height: auto; aspect-ratio: 1680 / 950; border: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; transform: translate(0px, 0px); } /* Placeholder for pending image assets */ .feature-story__visual-placeholder { width: 100%; min-height: 360px; border-radius: var(--radius-xl); background: var(--color-neutral-100); border: 2px dashed var(--color-neutral-200); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-400); font: var(--body-sm); } /* ── Agent assistant icon grid ─────────────── */ .feature-story__icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-top: var(--space-8); } .feature-story__icon-item { display: flex; gap: var(--space-12); align-items: flex-start; } .feature-story__icon-item .material-symbols-rounded, .feature-story__icon-item .material-symbol-svg { display: inline-block; width: var(--icon-size-lg); height: var(--icon-size-lg); font-size: var(--icon-size-lg); color: var(--color-violet-dark); /* fallback for browsers without text background clipping */ flex-shrink: 0; line-height: 1; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 32; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .feature-story__icon-item p { font: var(--body-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .feature-story__icon-item--emphasis p { font-weight: var(--font-weight-bold); color: var(--color-violet-dark); } /* ── Lead tag chips (database story) ──────── */ .fs-lead-tags { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-40); background: linear-gradient(160deg, #F0F4FF 0%, #FAFBFF 100%); border-radius: var(--radius-xl); width: 100%; } .fs-lead-tag { display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-20); border-radius: var(--radius-full); font: var(--label-md); background: rgba(255, 255, 255, 0.9); position: relative; color: var(--color-neutral-900); align-self: flex-start; box-shadow: var(--elevation-1); } /* Gradient border via pseudo-element */ .fs-lead-tag::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--gradient-brand); z-index: -1; opacity: 0.6; } .fs-lead-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); flex-shrink: 0; } .fs-lead-tag__dot--amber { background: #F59E0B; } .fs-lead-tag__dot--blue { background: var(--color-blue); } .fs-lead-tag__dot--violet { background: var(--color-violet); } .fs-lead-tag__label { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: var(--font-weight-semibold); } .fs-lead-tag__meta { color: var(--color-neutral-500); font: var(--body-sm); margin-left: auto; } /* ── Responsive ──────────────────────────── */ @media (max-width: 900px) { .feature-story--agent { --good-hands-gradient-start: 300px; --good-hands-scene-width: min(100%, 520px); --good-hands-scene-aspect: 520 / 372; } .feature-story--agent:has(.good-hands-panel.is-open) { --good-hands-gradient-start: 560px; } .feature-story__inner, .feature-story--reversed .feature-story__inner { grid-template-columns: 1fr; grid-template-areas: "text" "visual"; /* DEC-056: text-first always on mobile */ gap: var(--feature-story-stack-gap); min-height: unset; } #fs-voice .feature-story__inner { gap: 0; } .feature-story__visual { min-height: 260px; } #fs-voice .anim-1to1, #fs-routing .anim-leadrouting, #fs-transfer .anim-calltransfer, #fs-database .anim-database { display: none; } #fs-voice .feature-story__poster, #fs-routing .feature-story__poster, #fs-transfer .feature-story__poster, #fs-database .feature-story__poster { display: block; } #fs-routing .feature-story__visual { overflow: clip; } #fs-voice, #fs-routing, #fs-database { overflow-x: hidden; } .feature-story__text { padding: 0; justify-self: center; } .feature-story__cta { align-self: center; } .feature-story__body { margin: 0; text-align: center; } .feature-story__headline { margin: 0; color: var(--color-neutral-900); text-align: center; } .feature-story__icon-grid { grid-template-columns: 1fr; } .collapseable-feature-panel, .collapsible-feature-panel { margin-left: 0; } .feature-story--agent .feature-story__inner, .feature-story--agent.feature-story--reversed .feature-story__inner { display: flex !important; flex-direction: column !important; grid-template-areas: none !important; grid-template-columns: 100% !important; position: relative; gap: 0; min-height: auto !important; padding-inline: 0; text-align: center; align-items: center; } .feature-story--agent .feature-story__text { width: min(432px, 100%); gap: var(--space-16); margin-inline: auto; align-items: center; text-align: center; z-index: 5; } .feature-story--agent .feature-story__headline, .feature-story--agent .feature-story__body { max-width: 380px; } .feature-story--agent .feature-story__visual { justify-content: center; min-height: 0; margin-top: 0; } .good-hands-panel { align-self: center; margin-left: 0; margin-bottom: 20px; } .good-hands-visual { margin-top: 0; } .feature-story--agent .good-hands-poster { display: block; width: min(110vw, 840px); transform: translate(0px, 0px); } .feature-story--agent .good-hands-visual.anim-walktalk { display: none; } } @media (max-width: 374px) { .feature-story__visual > .feature-story__poster--routing { transform: scale(1.4); } } @media (max-width: 480px) { .feature-story--agent { --good-hands-gradient-start: 318px; --good-hands-scene-width: min(100%, 330px); --good-hands-scene-aspect: 330 / 328; } .feature-story--agent:has(.good-hands-panel.is-open) { --good-hands-gradient-start: 610px; } .feature-story--agent .feature-story__inner, .feature-story--agent.feature-story--reversed .feature-story__inner { gap: var(--feature-story-stack-gap); } .feature-story--agent .feature-story__visual { justify-content: center; min-height: 0; margin-top: 0; } .good-hands-panel { padding: var(--space-16) var(--space-16) var(--space-32); } .good-hands-panel .good-hands-panel__trigger { --hw-btn-label-size: var(--font-size-label-md); padding-inline: var(--space-20); } .good-hands-panel .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 22px; } .good-hands-panel .feature-grid-item-icon { width: 28px; height: 28px; min-height: 28px; font-size: 28px; } .good-hands-panel .feature-grid-item-icon svg { max-width: 26px; max-height: 26px; } .good-hands-panel .feature-grid-item-text { font-size: 10px; } .good-hands-visual { border-radius: 12px; } .feature-story--agent .good-hands-poster { width: min(120vw, 506px); border-radius: 0; transform: translate(0px, 0px); } } @media (max-width: 900px) { #fs-agent .feature-story__inner { display: flex !important; flex-direction: column !important; grid-template-areas: none !important; grid-template-columns: 100% !important; gap: 0 !important; min-height: auto !important; } #fs-agent .feature-story__text { order: 1 !important; grid-area: auto !important; width: 100% !important; max-width: 600px !important; margin: 0 auto !important; text-align: center !important; align-items: center !important; } #fs-agent .feature-story__visual { order: 2 !important; grid-area: auto !important; width: 100% !important; align-items: flex-end !important; margin-top: 0 !important; margin-bottom: 0 !important; justify-content: center !important; transform: none !important; } } @media (max-width: 1199px) and (min-width: 901px) { .feature-story--agent .feature-story__visual { min-height: clamp(350px, 34vw, 410px); margin-top: 0; } } @media (min-width: 1200px) { .feature-story--agent .feature-story__inner { grid-template-columns: minmax(432px, 5fr) minmax(680px, 7fr); gap: clamp(56px, 5vw, 96px); } .feature-story--agent .feature-story__text { width: min(432px, 100%); } } /* ============================================ */ /* PRODUCT PILLARS */ /* Homepage solution card band */ /* ============================================ */ .product-pillars { position: relative; z-index: 1; padding-block: 0 clamp(var(--space-24), 2.4vw, var(--space-32)); background: transparent; } .product-pillars > .page-rail { position: relative; z-index: 1; } @media (max-width: 900px) { .product-pillars { padding-bottom: var(--space-40); } } /* ============================================ */ /* CLOSE MORE DEALS */ /* Page-width payoff section */ /* ============================================ */ .close-deals { position: relative; overflow-x: clip; overflow-y: visible; padding-block: clamp(76px, 6.8vw, 108px) 0; } .close-deals__visual-wrap { position: relative; display: block; width: 100%; max-width: 1274px; margin-inline: auto; overflow: visible; } .close-deals__text { position: relative; z-index: 9; top: auto; right: auto; display: flex; flex-direction: column; align-items: center; gap: 0; width: auto; min-height: 0; padding: 0; box-sizing: border-box; overflow: visible; isolation: auto; text-align: center; margin: 0 0 16px 0; } .close-deals__text::before, .close-deals__text::after { display: none; } .close-deals__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-self: stretch; gap: 5px; width: 100%; text-align: center; } .close-deals__headline { color: var(--color-neutral-900); margin: 0; } .close-deals__body { width: 100%; max-width: 600px; margin: 0 auto; font-weight: var(--font-weight-regular); line-height: 1.45; } .close-deals__cta { display: inline-flex; } .close-deals__panel { margin-top: 0; margin-left: auto; margin-right: auto; } .close-deals__panel .feature-grid-item { align-items: flex-start; text-align: left; } .close-deals__panel .feature-grid-item-text { text-align: left; } @media (max-width: 1120px) and (min-width: 768px) { .close-deals { padding-block-start: clamp(64px, 8vw, 88px); } .close-deals__visual-wrap { width: 100%; max-width: 1274px; } .close-deals__text { top: auto; right: auto; width: auto; } } @media (max-width: 900px) { #close-more-deals { margin-bottom: 24px; } } @media (max-width: 767px) { .close-deals { padding-block: 0; } .close-deals__visual-wrap { display: flex; flex-direction: column; gap: clamp(20px, 5vw, 28px); width: min(520px, 100vw); padding-inline: 0; padding-block: clamp(52px, 13vw, 76px) 0; box-sizing: border-box; overflow: hidden; } .close-deals__text { order: 1; position: relative; inset: auto; width: auto; min-height: 0; margin-inline: clamp(26px, 10vw, 74px); padding: 0; align-items: center; text-align: center; } .close-deals__body { max-width: 24rem; } } /* ============================================ SHARED ANIMATION AVATAR PRIMITIVE ============================================ */ .hw-anim-avatar { --hw-avatar-ring-gradient: conic-gradient(from 180deg, #16FEBF 0deg, #338FF0 116deg, #A328FF 244deg, #16FEBF 360deg); --hw-avatar-label-gradient: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); isolation: isolate; } .hw-anim-avatar__ball, .hw-anim-avatar__photo, .hw-anim-avatar__precomposed { display: block; pointer-events: none; } .hw-anim-avatar__photo, .hw-anim-avatar__precomposed { max-width: none; } .hw-anim-avatar__precomposed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ============================================================ * WALK AND TALK * Stage: 1274 x 391 control plane (kept from prior version). * Characters cluster RIGHT half; cards float LEFT-CENTER. * Card surfaces sourced from Figma node 511:3386 (HW Design * System — Walk and Talk cards). Schema: see prd-walktalk- * editor-cards-schema.md. * ============================================================ */ .anim-walktalk { position: relative; width: 100%; max-width: 760px; aspect-ratio: 760 / 430; margin: 0 auto; isolation: isolate; overflow: visible; -webkit-clip-path: inset(-30% -18% 0 -18%); clip-path: inset(-30% -18% 0 -18%); border-radius: 0; font-family: var(--font-family, "Roboto", system-ui, sans-serif); text-align: left; color: var(--color-white, #FFFFFF); container-type: inline-size; container-name: walktalk; --walktalk-fg-motion-ratio: 0.064; --walktalk-bg-motion-ratio: 0.056; } .anim-walktalk__bg { position: absolute; inset: 0; z-index: 0; background: var(--color-white, #FFFFFF); pointer-events: none; } .anim-walktalk__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 74% 78% at 49% 130%, #E9EEFB 0%, #F4F7FD 48%, #FFFFFF 78% ); } /* Shadows are decorative ground-shadows that lived at the character's * feet level. With the 760×430 frame cropping characters mid-lower-body, * the shadows would render below the visible plane anyway. Hidden * entirely to avoid carrying weight that never paints. */ .anim-walktalk__shadow { display: none; } .anim-walktalk__shadow--man { left: calc(var(--walktalk-man-shadow-left, 410) / 760 * 100%); top: calc(var(--walktalk-man-shadow-top, 48) / 430 * 100%); width: calc(300 / 760 * 100%); height: calc(290 / 430 * 100%); } .anim-walktalk__shadow--woman { left: calc(var(--walktalk-woman-shadow-left, 266) / 760 * 100%); top: calc(var(--walktalk-woman-shadow-top, 233) / 430 * 100%); width: calc(340 / 760 * 100%); height: calc(154 / 430 * 100%); filter: blur(2px); } .anim-walktalk__shadow--woman img { display: block; width: 100%; height: 100%; } .anim-walktalk__shadow-glow, .anim-walktalk__shadow-spot { position: absolute; display: block; border-radius: 999px; } .anim-walktalk__shadow-glow { left: 0; top: calc(396.36 / 486 * 100%); width: 100%; height: calc(89.64 / 486 * 100%); background: #E9EEFB; filter: blur(clamp(24px, 7.456cqi, 95px)); } .anim-walktalk__shadow-spot { background: rgba(0, 0, 0, 0.05); filter: blur(clamp(2px, 0.628cqi, 8px)); } .anim-walktalk__shadow-spot--man-a { left: calc(166.32 / 502.2 * 100%); top: calc(449.28 / 486 * 100%); width: calc(177.12 / 502.2 * 100%); height: calc(17.28 / 486 * 100%); } .anim-walktalk__shadow-spot--man-b { left: calc(152.28 / 502.2 * 100%); top: calc(454.68 / 486 * 100%); width: calc(58.32 / 502.2 * 100%); height: calc(9.72 / 486 * 100%); } .anim-walktalk__shadow-spot--man-c { left: calc(319.68 / 502.2 * 100%); top: calc(454.68 / 486 * 100%); width: calc(49.68 / 502.2 * 100%); height: calc(9.72 / 486 * 100%); } .anim-walktalk.is-man-in .anim-walktalk__shadow--man, .anim-walktalk.is-woman-in .anim-walktalk__shadow--woman { opacity: 1; } .anim-walktalk__character { position: absolute; opacity: 0; transform: translate3d(var(--walktalk-character-enter-x, -16px), 0, 0); backface-visibility: hidden; contain: paint; transition: opacity 780ms cubic-bezier(.22, .9, .3, 1), transform 780ms cubic-bezier(.22, .9, .3, 1); } .anim-walktalk__character.is-revealing { will-change: transform, opacity; } .anim-walktalk__character img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; object-position: center top; opacity: 0; visibility: hidden; backface-visibility: hidden; transition: none; } .anim-walktalk__character img.is-active { opacity: 1; visibility: visible; box-shadow: none; filter: drop-shadow(white 0 0 1px) drop-shadow(white 0 0 0); } .anim-walktalk__character--man img { transform: translateZ(0) scaleX(var(--walktalk-man-flip, 1)); } .anim-walktalk__character--woman img { transform: translateZ(0) scaleX(var(--walktalk-woman-flip, 1)); } .anim-walktalk__character--man { --walktalk-character-enter-x: var(--walktalk-fg-enter-x, -16px); --walktalk-character-exit-x: var(--walktalk-fg-exit-x, 16px); left: calc(var(--walktalk-man-left, 489) / 760 * 100%); top: calc(var(--walktalk-man-top, 48) / 430 * 100%); width: calc(var(--walktalk-man-width, 146) / 760 * 100%); height: calc(var(--walktalk-man-height, 274) / 430 * 100%); z-index: 4; transform-origin: bottom center; } .anim-walktalk__character--woman { --walktalk-character-enter-x: var(--walktalk-bg-enter-x, 10px); --walktalk-character-exit-x: var(--walktalk-bg-exit-x, -10px); left: calc(var(--walktalk-woman-left, 378) / 760 * 100%); top: calc(var(--walktalk-woman-top, 119) / 430 * 100%); width: calc(var(--walktalk-woman-width, 105) / 760 * 100%); height: calc(var(--walktalk-woman-height, 193) / 430 * 100%); z-index: 5; filter: blur(2px); } .anim-walktalk.is-man-in .anim-walktalk__character--man, .anim-walktalk.is-woman-in .anim-walktalk__character--woman { opacity: 1; transform: translate3d(0, 0, 0); } .anim-walktalk.is-foreground-primed .anim-walktalk__character--man { opacity: 1; transform: translate3d(0, 0, 0); transition: none; } .anim-walktalk.is-foreground-primed .anim-walktalk__shadow--man { opacity: 1; transition: none; } /* ── CARD COMMON ───────────────────────────────────────────── */ .anim-walktalk__card { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; overflow: visible; opacity: 0; color: var(--color-white, #FFFFFF); transition: opacity 560ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); pointer-events: none; /* Blue surface for all types except database_updates. */ background: var(--color-blue, #3597FF); border: 1px solid var(--color-white, #FFFFFF); font-family: "Roboto", system-ui, sans-serif; text-align: left; } .anim-walktalk__card.is-revealing { will-change: transform, opacity; } /* Position slots. Each card's BOTTOM-RIGHT corner is anchored at a * fixed point in the 760×430 plane (via right/bottom). Cards scale * toward their bottom-right anchor. Position values are set per-card * to match the composition target — they do not share an offset * vector with character positions because cards float for composition * balance, not strict forced perspective. */ .anim-walktalk { --walktalk-lead-scale: 0.94; --walktalk-trail-scale: 0.64; } .anim-walktalk__card--lead { right: calc(var(--walktalk-lead-card-right, 205) / 760 * 100%); bottom: calc(var(--walktalk-lead-card-bottom, 237) / 430 * 100%); z-index: 3; transform-origin: bottom right; transform: scale(var(--walktalk-lead-scale, 0.94)) translate3d(0, 8px, 0); } .anim-walktalk__card--trail { right: calc(var(--walktalk-trail-card-right, 383) / 760 * 100%); bottom: calc(var(--walktalk-trail-card-bottom, 145) / 430 * 100%); z-index: 2; transform-origin: bottom right; transform: scale(var(--walktalk-trail-scale, 0.64)) translate3d(0, 8px, 0); } /* ── PER-TYPE FIGMA SIZING ─────────────────────────────────── * Each card is built at its native Figma width, padding, gap, * and border-radius (HW Design System node 511:3386). * Heights are intentionally NOT set — content drives the box. */ .anim-walktalk__card.is-market-report { width: calc(250 / 760 * 100%); border-radius: calc(8.65 / 760 * 100cqi); padding: calc(14.41 / 760 * 100cqi) calc(15.37 / 760 * 100cqi); gap: calc(5.76 / 760 * 100cqi); } .anim-walktalk__card.is-followup { width: calc(276 / 760 * 100%); border-radius: calc(8.93 / 760 * 100cqi); padding: calc(14.88 / 760 * 100cqi) calc(18.96 / 760 * 100cqi); gap: calc(5.95 / 760 * 100cqi); } .anim-walktalk__card.is-tasks { width: calc(276 / 760 * 100%); border-radius: calc(8.93 / 760 * 100cqi); padding: calc(14.88 / 760 * 100cqi) calc(18.96 / 760 * 100cqi); gap: calc(5.95 / 760 * 100cqi); } .anim-walktalk__card.is-voice-notes { width: calc(261.81 / 760 * 100%); border-radius: calc(8.33 / 760 * 100cqi); padding: calc(13.88 / 760 * 100cqi) calc(17.69 / 760 * 100cqi); gap: calc(5.55 / 760 * 100cqi); } .anim-walktalk__card.is-database-updates { /* Deep purple surface + mint-green Roboto Mono inks. * #4A0182 is a one-off scene color (not yet tokenized). */ width: calc(270.31 / 760 * 100%); background: linear-gradient(180deg, rgba(74, 1, 130, 1) 0%, rgba(74, 1, 130, 0.92) 100%); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--color-green, #16FEBE); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius: calc(8.4 / 760 * 100cqi); padding: calc(14 / 760 * 100cqi) calc(8 / 760 * 100cqi) calc(14 / 760 * 100cqi) calc(14 / 760 * 100cqi); gap: calc(9 / 760 * 100cqi); } /* ── CARD: HouseWhisper brand row ─────────────────────────── */ .anim-walktalk__card-brand { display: flex; align-items: center; gap: calc(8.6 / 760 * 100cqi); opacity: 0.8; text-align: left; transform: translate3d(0, 2px, 0); transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), transform 440ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk__card-brand.is-muted { opacity: 0.6; } .anim-walktalk__card-brand-icon { display: block; width: calc(9.92 / 760 * 100cqi); height: calc(13.88 / 760 * 100cqi); flex: 0 0 auto; } .anim-walktalk__card-brand-text { font-size: calc(11.9 / 760 * 100cqi); font-weight: 700; line-height: 1.17; letter-spacing: 0; color: inherit; } /* ── CARD: body text + messages ───────────────────────────── */ .anim-walktalk__card-body { display: flex; flex-direction: column; gap: calc(4 / 760 * 100cqi); margin: 0; font-size: calc(13.4 / 760 * 100cqi); font-weight: 400; line-height: 1.5; text-align: left; color: inherit; opacity: 0; transform: translate3d(0, 2px, 0); transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk__card-body-message { display: block; font-size: calc(12 / 760 * 100cqi); font-weight: 400; line-height: 1.5; } .anim-walktalk__card.is-followup .anim-walktalk__card-body { font-size: calc(13.88 / 760 * 100cqi); font-weight: 400; line-height: 1.5; } .anim-walktalk__card.is-followup .anim-walktalk__card-recipient-label { display: block; font-weight: 700; } .anim-walktalk__card.is-followup .anim-walktalk__card-body-message { font-size: calc(13.88 / 760 * 100cqi); font-weight: 400; line-height: 1.5; margin-bottom: calc(4 / 760 * 100cqi); } /* ── CARD: Followup avatar row ────────────────────────────── */ .anim-walktalk__card-recipient-row { display: flex; align-items: center; gap: calc(8.9 / 760 * 100cqi); opacity: 0.85; text-align: left; transform: translate3d(0, 2px, 0); transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), transform 440ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk__card-avatar { display: inline-flex; align-items: center; justify-content: center; width: calc(16 / 760 * 100cqi); height: calc(16 / 760 * 100cqi); border-radius: 999px; border: 1px solid #DBF7F5; background: linear-gradient(135deg, #4A0182 0%, #7B1FD4 100%); color: var(--color-white, #FFFFFF); font-family: "Roboto", system-ui, sans-serif; font-weight: 700; font-size: calc(9 / 760 * 100cqi); line-height: 1; text-transform: uppercase; flex: 0 0 auto; box-sizing: border-box; } .anim-walktalk__card-recipient-name { font-size: calc(11.9 / 760 * 100cqi); font-weight: 700; line-height: 1.17; color: inherit; } /* ── CARD: MarketReport thumbnail tile ─────────────────────── */ .anim-walktalk__card-thumb { position: relative; display: flex; align-items: center; gap: calc(7.7 / 760 * 100cqi); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: calc(5.8 / 760 * 100cqi); padding: calc(11.5 / 760 * 100cqi) calc(11.5 / 760 * 100cqi); opacity: 0; transform: translate3d(0, 2px, 0); transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); text-align: left; overflow: hidden; } /* Glass face sheens — entry face (top) + exit face (bottom). * Per memory: backdrop-filter alone isn't enough on isolated stages * (and the parent's isolation:isolate kills backdrop-filter anyway); * ::before + ::after gradients are what give the tile its "glass" * identity. */ .anim-walktalk__card-thumb::before, .anim-walktalk__card-thumb::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; pointer-events: none; z-index: 0; } .anim-walktalk__card-thumb::before { top: 0; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100% ); } .anim-walktalk__card-thumb::after { bottom: 0; background: linear-gradient( to top, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ); } .anim-walktalk__card-thumb > * { position: relative; z-index: 1; } .anim-walktalk__card-thumb-image { display: block; width: calc(29.78 / 760 * 100cqi); height: calc(30.74 / 760 * 100cqi); border-radius: calc(5.9 / 760 * 100cqi); object-fit: cover; flex: 0 0 auto; } .anim-walktalk__card-thumb-text { display: flex; flex-direction: column; gap: 0; font-size: calc(11.8 / 760 * 100cqi); line-height: 1.5; text-align: left; } .anim-walktalk__card-thumb-text strong { font-weight: 700; } /* ── CARD: title + list (Tasks + Voice notes) ────────────── */ /* Both card types use
  • for proper list semantics. No *
      markers — visual differentiation is via line-height only * (Figma is a single text node; we render as a list for * accessibility + reliable line breaks). */ .anim-walktalk__card-list-title { margin: 0; line-height: 1.8; text-align: left; } /* Voice notes — native disc bullets. */ .anim-walktalk__card-list { list-style: disc; margin: 0; padding: 0 11px; text-align: left; } /* Tasks — CSS-drawn checkbox squares (Figma uses the ▢ glyph; CSS * box renders crisper than relying on font fallback). */ .anim-walktalk__card-checklist { list-style: none; margin: 0; padding: 0; text-align: left; } .anim-walktalk__card-list-item, .anim-walktalk__card-checklist-item { line-height: 1.8; text-align: left; } .anim-walktalk__card-checklist-item { position: relative; padding-left: calc(18 / 760 * 100cqi); } .anim-walktalk__card-checklist-item::before { content: ""; position: absolute; left: 0; top: 0.55em; width: calc(11 / 760 * 100cqi); height: calc(11 / 760 * 100cqi); border: 1px solid currentColor; border-radius: calc(1.5 / 760 * 100cqi); opacity: 0.9; } /* Tasks — items Roboto 400, title bold for hierarchy. */ .anim-walktalk__card.is-tasks .anim-walktalk__card-list-title, .anim-walktalk__card.is-tasks .anim-walktalk__card-checklist-item { font-size: calc(13.88 / 760 * 100cqi); } .anim-walktalk__card.is-tasks .anim-walktalk__card-list-title { font-weight: 700; } .anim-walktalk__card.is-tasks .anim-walktalk__card-checklist-item { font-weight: 400; } /* Voice notes — softened to Roboto 400 (Figma is 700 but reads heavy). */ .anim-walktalk__card.is-voice-notes .anim-walktalk__card-list-title, .anim-walktalk__card.is-voice-notes .anim-walktalk__card-list-item { font-size: calc(12.95 / 760 * 100cqi); font-weight: 400; } /* ── CARD: Voice notes purple orb ─────────────────────────── */ .anim-walktalk__card-orb { position: absolute; left: calc(-24 / 760 * 100cqi); bottom: calc(-24 / 760 * 100cqi); width: calc(50.3 / 760 * 100cqi); height: calc(51.88 / 760 * 100cqi); opacity: 0; transform: translate3d(-2px, 2px, 0) scale(0.92); transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 4; } .anim-walktalk__card-orb img { display: block; width: 100%; height: 100%; } /* ── CARD: database_updates eyebrow + footer ──────────────── */ .anim-walktalk__card-eyebrow-row { display: flex; align-items: center; gap: calc(5 / 760 * 100cqi); opacity: 0; text-align: left; transform: translate3d(0, 2px, 0); transition: opacity 360ms cubic-bezier(.4, 0, .2, 1), transform 440ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk__card-eyebrow-icon { display: block; width: calc(18.09 / 760 * 100cqi); height: calc(18.19 / 760 * 100cqi); flex: 0 0 auto; } .anim-walktalk__card-eyebrow { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(14.4 / 760 * 100cqi); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: left; color: var(--color-green, #16FEBE); } .anim-walktalk__card.is-database-updates .anim-walktalk__card-body { gap: calc(4 / 760 * 100cqi); color: var(--color-green, #16FEBE); } .anim-walktalk__card.is-database-updates .anim-walktalk__card-body-message { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(12 / 760 * 100cqi); font-weight: 400; line-height: 1.5; opacity: 0.85; } .anim-walktalk__card-footer-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; opacity: 0; text-align: left; transform: translate3d(0, 2px, 0); transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk__card-footer-row .anim-walktalk__card-brand { color: #FDFEFF; } .anim-walktalk__card-footer-row .anim-walktalk__card-brand-text { color: #FDFEFF; } .anim-walktalk__card-footer-icon { display: block; width: calc(30.45 / 760 * 100cqi); height: calc(24.93 / 760 * 100cqi); flex: 0 0 auto; opacity: 0.85; } /* ── Reveal state choreography ────────────────────────────── */ .anim-walktalk.is-man-card-in .anim-walktalk__card--lead { opacity: 1; transform: scale(var(--walktalk-lead-scale, 0.94)) translate3d(0, 0, 0); } .anim-walktalk.is-woman-card-in .anim-walktalk__card--trail { opacity: 0.92; /* Preserve scale (driven by --walktalk-trail-scale); only translate animates. */ transform: scale(var(--walktalk-trail-scale, 0.72)) translate3d(0, 0, 0); } .anim-walktalk.is-man-title-in .anim-walktalk__card--lead .anim-walktalk__card-brand, .anim-walktalk.is-man-title-in .anim-walktalk__card--lead .anim-walktalk__card-recipient-row, .anim-walktalk.is-man-title-in .anim-walktalk__card--lead .anim-walktalk__card-eyebrow-row, .anim-walktalk.is-woman-title-in .anim-walktalk__card--trail .anim-walktalk__card-brand, .anim-walktalk.is-woman-title-in .anim-walktalk__card--trail .anim-walktalk__card-recipient-row, .anim-walktalk.is-woman-title-in .anim-walktalk__card--trail .anim-walktalk__card-eyebrow-row { opacity: 1; transform: translate3d(0, 0, 0); } .anim-walktalk.is-man-title-in .anim-walktalk__card--lead .anim-walktalk__card-brand.is-muted, .anim-walktalk.is-woman-title-in .anim-walktalk__card--trail .anim-walktalk__card-brand.is-muted { opacity: 0.6; } .anim-walktalk.is-man-amount-in .anim-walktalk__card--lead .anim-walktalk__card-body, .anim-walktalk.is-man-amount-in .anim-walktalk__card--lead .anim-walktalk__card-thumb, .anim-walktalk.is-man-amount-in .anim-walktalk__card--lead .anim-walktalk__card-footer-row, .anim-walktalk.is-man-amount-in .anim-walktalk__card--lead .anim-walktalk__card-orb, .anim-walktalk.is-woman-amount-in .anim-walktalk__card--trail .anim-walktalk__card-body, .anim-walktalk.is-woman-amount-in .anim-walktalk__card--trail .anim-walktalk__card-thumb, .anim-walktalk.is-woman-amount-in .anim-walktalk__card--trail .anim-walktalk__card-footer-row, .anim-walktalk.is-woman-amount-in .anim-walktalk__card--trail .anim-walktalk__card-orb { opacity: 1; transform: translate3d(0, 0, 0); } .anim-walktalk.is-man-amount-in .anim-walktalk__card--lead .anim-walktalk__card-orb, .anim-walktalk.is-woman-amount-in .anim-walktalk__card--trail .anim-walktalk__card-orb { transform: translate3d(0, 0, 0) scale(1); } .anim-walktalk__card-brand.is-revealing, .anim-walktalk__card-recipient-row.is-revealing, .anim-walktalk__card-eyebrow-row.is-revealing, .anim-walktalk__card-body.is-revealing, .anim-walktalk__card-thumb.is-revealing, .anim-walktalk__card-footer-row.is-revealing, .anim-walktalk__card-orb.is-revealing { will-change: transform, opacity; } /* ── Leaving / fade-out ───────────────────────────────────── */ .anim-walktalk.is-leaving .anim-walktalk__character, .anim-walktalk.is-leaving .anim-walktalk__card, .anim-walktalk.is-leaving .anim-walktalk__shadow { opacity: 0; transition: opacity 900ms cubic-bezier(.4, 0, .2, 1), transform 900ms cubic-bezier(.4, 0, .2, 1); } .anim-walktalk.is-leaving .anim-walktalk__character--man, .anim-walktalk.is-leaving .anim-walktalk__character--woman { transform: translate3d(var(--walktalk-character-exit-x, 12px), 0, 0); } /* ── Static / reduced-motion fallback ─────────────────────── */ .anim-walktalk.is-static *, .anim-walktalk.is-static *::before, .anim-walktalk.is-static *::after { animation: none !important; transition: none !important; } .anim-walktalk.is-static .anim-walktalk__character, .anim-walktalk.is-static .anim-walktalk__shadow, .anim-walktalk.is-static .anim-walktalk__card--lead, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-brand, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-recipient-row, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-eyebrow-row, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-body, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-thumb, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-footer-row, .anim-walktalk.is-static .anim-walktalk__card--lead .anim-walktalk__card-orb { opacity: 1 !important; transform: none !important; } .anim-walktalk.is-static .anim-walktalk__card--trail { opacity: 0.92 !important; transform: scale(0.72) !important; } .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-brand, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-recipient-row, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-eyebrow-row, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-body, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-thumb, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-footer-row, .anim-walktalk.is-static .anim-walktalk__card--trail .anim-walktalk__card-orb { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .anim-walktalk *, .anim-walktalk *::before, .anim-walktalk *::after { animation: none !important; transition: none !important; } .anim-walktalk__character, .anim-walktalk__shadow, .anim-walktalk__card--lead, .anim-walktalk__card--lead .anim-walktalk__card-brand, .anim-walktalk__card--lead .anim-walktalk__card-recipient-row, .anim-walktalk__card--lead .anim-walktalk__card-eyebrow-row, .anim-walktalk__card--lead .anim-walktalk__card-body, .anim-walktalk__card--lead .anim-walktalk__card-thumb, .anim-walktalk__card--lead .anim-walktalk__card-footer-row, .anim-walktalk__card--lead .anim-walktalk__card-orb { opacity: 1 !important; transform: none !important; } .anim-walktalk__card--trail { opacity: 0.92 !important; transform: scale(var(--walktalk-trail-scale, 0.72)) !important; } .anim-walktalk__card--trail .anim-walktalk__card-brand, .anim-walktalk__card--trail .anim-walktalk__card-recipient-row, .anim-walktalk__card--trail .anim-walktalk__card-eyebrow-row, .anim-walktalk__card--trail .anim-walktalk__card-body, .anim-walktalk__card--trail .anim-walktalk__card-thumb, .anim-walktalk__card--trail .anim-walktalk__card-footer-row, .anim-walktalk__card--trail .anim-walktalk__card-orb { opacity: 1 !important; transform: none !important; } } /* ── Mobile container-query sizing ────────────────────────── */ @container walktalk (max-width: 420px) { .anim-walktalk__card-brand-text { font-size: calc(14.4 / 760 * 100cqi); } .anim-walktalk__card-body { font-size: calc(15 / 760 * 100cqi); } .anim-walktalk__card-list-title { font-size: calc(15 / 760 * 100cqi); } .anim-walktalk__card-checklist-item, .anim-walktalk__card-list-item { font-size: calc(15 / 760 * 100cqi); } .anim-walktalk__card-eyebrow { font-size: calc(15 / 760 * 100cqi); } .anim-walktalk__card.is-database-updates .anim-walktalk__card-body-message { font-size: calc(13 / 760 * 100cqi); } .anim-walktalk__card-thumb-text { font-size: calc(13 / 760 * 100cqi); } } @media (max-width: 520px) { .anim-walktalk { --walktalk-fg-motion-ratio: 0.044; --walktalk-bg-motion-ratio: 0.038; } } @media (min-width: 521px) and (max-width: 860px) { .anim-walktalk { --walktalk-fg-motion-ratio: 0.052; --walktalk-bg-motion-ratio: 0.046; } } .feature-story--agent .good-hands-visual.anim-walktalk { transform: none; transform-origin: center bottom; } @media (min-width: 1025px) { .feature-story--agent .good-hands-visual.anim-walktalk { transform: scale(1.35) translate(-80px, 0); } } @media (min-width: 426px) and (max-width: 899px) { .feature-story--agent .good-hands-visual.anim-walktalk { transform: scale(1.25) translate(-38px, 0); } } @media (max-width: 425px) { .feature-story--agent .good-hands-visual.anim-walktalk { transform: scale(1.5) translate(0, 0); } } /* Mobile composition keeps the same 760×430 animation plane but shifts * the character pair left inside the Good Hands mount. Card anchors * are derived from these character variables in JS. */ @media (max-width: 767px) { .feature-story--agent .good-hands-visual.anim-walktalk { --walktalk-man-left: 334 !important; --walktalk-man-shadow-left: 255 !important; --walktalk-woman-left: 227 !important; --walktalk-woman-shadow-left: 115 !important; } } /* ============================================ CALL TRANSFER ANIMATION Figma node 390:774, storyboard frames 556 x 561 ============================================ */ .anim-calltransfer { --anim-calltransfer-avatar-spin-ms: 1160ms; --anim-calltransfer-alert-in-ms: 740ms; --anim-calltransfer-sms-in-ms: 760ms; --anim-calltransfer-reply-in-ms: 560ms; --anim-calltransfer-call-in-ms: 760ms; --anim-calltransfer-release-ms: 900ms; position: relative; width: min(100%, 556px); aspect-ratio: 556 / 561; margin: 0 auto; isolation: isolate; overflow: visible; background: transparent; color: #111; font-family: var(--font-family, "Roboto", system-ui, sans-serif); container-type: inline-size; perspective: 900px; } .feature-story__visual .anim-calltransfer { flex: 0 1 556px; } .anim-calltransfer__ambient { position: absolute; left: 14.0%; top: 20.59%; width: 64.76%; height: 67.49%; z-index: 0; pointer-events: none; opacity: 0; background: linear-gradient(172deg, rgba(233, 238, 251, 0) 22%, rgba(255, 255, 255, 0.96) 52%); filter: blur(56px); transform: translateZ(0); transition: opacity 760ms ease; } .anim-calltransfer.is-stage-in .anim-calltransfer__ambient { opacity: 0.92; } .anim-calltransfer__phone { position: absolute; left: 24.28%; top: 4.46%; width: 48.11%; height: 70.46%; z-index: 1; border-radius: 39.5px 39.5px 0 0; background: rgba(255, 255, 255, 0.94); box-shadow: 0 3.12px 35.36px rgba(0, 0, 0, 0.19), inset 0 4px 18px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(8px); transition: opacity 760ms ease, transform 900ms cubic-bezier(.22, .9, .3, 1); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 77%, rgba(0, 0, 0, 0.55) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 77%, rgba(0, 0, 0, 0.55) 88%, transparent 100%); } .anim-calltransfer.is-stage-in .anim-calltransfer__phone { opacity: 1; transform: translateY(0); } .anim-calltransfer__status { position: absolute; left: 42.27%; top: 8.2%; width: 11.87%; height: 1.43%; z-index: 2; display: flex; align-items: stretch; justify-content: flex-start; gap: 2px; opacity: 0; transform: translateY(8px); transition: opacity 680ms ease 120ms, transform 900ms cubic-bezier(.22, .9, .3, 1); } .anim-calltransfer.is-stage-in .anim-calltransfer__status { opacity: 0.56; transform: translateY(0); } .anim-calltransfer__status-bar, .anim-calltransfer__status-dot { display: block; background: rgba(217, 217, 217, 0.72); border-radius: 20px; } .anim-calltransfer__status-bar { width: 85.29%; } .anim-calltransfer__status-dot { width: 11.76%; } .anim-calltransfer__agent { --calltransfer-agent-ring-scale: 1; position: absolute; left: 10.79%; top: 65.78%; width: 16.55%; aspect-ratio: 1; z-index: 12; border-radius: 50%; opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: center; isolation: isolate; transition: opacity 360ms ease, transform 620ms cubic-bezier(.22, .9, .3, 1.08); } .anim-calltransfer__agent::before { content: ""; position: absolute; inset: -14%; z-index: 4; box-sizing: border-box; padding: 14%; border-radius: 50%; background: conic-gradient(from 180deg, #16FEBF 0deg, #338FF0 116deg, #A328FF 244deg, #16FEBF 360deg); filter: drop-shadow(0 8px 18px rgba(51, 143, 240, 0.16)) drop-shadow(0 5px 12px rgba(163, 40, 255, 0.14)); opacity: 0; transform: scale(0.72); transform-origin: center; pointer-events: none; transition: opacity 760ms ease 120ms, transform 1120ms cubic-bezier(.22, .74, .2, 1), filter 900ms ease; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .anim-calltransfer__agent-ball, .anim-calltransfer__agent-image, .anim-calltransfer__agent img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: contain; object-position: center; background: transparent; box-shadow: none; } .anim-calltransfer__agent-ball { z-index: 1; opacity: 0; transform: scale(1.045) rotate(0deg); filter: saturate(0.98) brightness(1.02); transition: opacity 360ms ease; } .anim-calltransfer__agent-image, .anim-calltransfer__agent img.anim-calltransfer__agent-image { z-index: 2; opacity: 0; transform: scale(0.965); transition: opacity 520ms ease, transform 680ms cubic-bezier(.22, .9, .3, 1); } .anim-calltransfer__agent-image.is-buyer-photo, .anim-calltransfer__agent img.anim-calltransfer__agent-image.is-buyer-photo { object-fit: cover; object-position: center 30%; background: #fff; } .anim-calltransfer.is-agent-anchor .anim-calltransfer__agent, .anim-calltransfer.is-agent-spin-in .anim-calltransfer__agent, .anim-calltransfer.is-agent-label .anim-calltransfer__agent, .anim-calltransfer.is-agent-ready .anim-calltransfer__agent { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer.is-agent-spin-in .anim-calltransfer__agent::before, .anim-calltransfer.is-agent-label .anim-calltransfer__agent::before, .anim-calltransfer.is-agent-ready .anim-calltransfer__agent::before { opacity: 1; transform: scale(var(--calltransfer-agent-ring-scale)); } .anim-calltransfer.is-agent-anchor .anim-calltransfer__agent-ball { opacity: 0.88; } .anim-calltransfer.is-agent-spin-in .anim-calltransfer__agent-ball { opacity: 0; animation: hw-calltransfer-avatar-ball-into-face var(--anim-calltransfer-avatar-spin-ms) cubic-bezier(.2, .78, .18, 1) both; } .anim-calltransfer.is-agent-spin-in .anim-calltransfer__agent-image, .anim-calltransfer.is-agent-label .anim-calltransfer__agent-image, .anim-calltransfer.is-agent-ready .anim-calltransfer__agent-image { opacity: 1; transform: scale(1); } .anim-calltransfer.is-agent-ready .anim-calltransfer__agent-ball { opacity: 0; } @keyframes hw-calltransfer-avatar-ball-into-face { 0% { opacity: 0.88; transform: scale(1.045) rotate(0deg); filter: saturate(0.98) brightness(1.02); } 45% { opacity: 0.78; transform: scale(1.08) rotate(185deg); filter: saturate(1.08) brightness(1.04); } 100% { opacity: 0; transform: scale(0.965) rotate(360deg); filter: saturate(0.98) brightness(1); } } .anim-calltransfer__ready { position: absolute; left: 6.47%; top: 82.54%; width: 25%; min-width: 104px; height: auto; z-index: 13; display: flex; align-items: center; justify-content: center; padding: 8px 10px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.42); box-shadow: 0 10px 22px rgba(51, 143, 240, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.62); opacity: 0; transform: translateY(10px); transition: opacity 420ms ease, transform 560ms cubic-bezier(.22, .9, .3, 1.08); } .anim-calltransfer__ready::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .anim-calltransfer__ready span { position: relative; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; line-height: 1.3188; font-weight: 400; letter-spacing: 0; white-space: nowrap; background-image: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .anim-calltransfer__ready-shadow { position: absolute; left: 13.23%; top: 92.51%; width: 11.49%; height: 1.32%; z-index: 1; border-radius: 999px; opacity: 0; filter: blur(7px); background: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); transform: translateY(8px) scale(0.94); transition: opacity 360ms ease, transform 620ms cubic-bezier(.22, .9, .3, 1.08); } .anim-calltransfer__ready-shadow::after { content: ""; position: absolute; inset: 18% 14%; border-radius: inherit; background: inherit; opacity: 0.58; filter: blur(3px); } .anim-calltransfer.is-agent-anchor .anim-calltransfer__ready-shadow, .anim-calltransfer.is-agent-spin-in .anim-calltransfer__ready-shadow, .anim-calltransfer.is-agent-label .anim-calltransfer__ready-shadow, .anim-calltransfer.is-agent-ready .anim-calltransfer__ready-shadow { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer.is-agent-label .anim-calltransfer__ready, .anim-calltransfer.is-agent-ready .anim-calltransfer__ready { opacity: 1; transform: translateY(0); } .anim-calltransfer__buyer { position: absolute; left: 70.5%; top: 28.34%; width: 33.12%; height: 68.05%; z-index: 8; display: block; object-fit: contain; object-position: center; opacity: 0; transform: translateX(18px) translateY(8px); transform-origin: center bottom; pointer-events: none; transition: opacity 520ms ease 220ms, transform 640ms cubic-bezier(.22, .9, .3, 1) 180ms; } .anim-calltransfer.is-alert-in .anim-calltransfer__buyer { opacity: 1; transform: translateX(0) translateY(0); filter: drop-shadow(white 0 0 1px) drop-shadow(white 0 0 0); } @media (max-width: 520px) { .anim-calltransfer__buyer { left: 68.5%; transform: translateX(8px) translateY(8px); } } .anim-calltransfer__alert { position: absolute; left: 19.78%; top: 25.49%; width: 56.65%; z-index: 7; padding: 13px 14px 15px; border-radius: 9.36px; background: linear-gradient(170deg, #4099f5 0%, #338FF0 100%); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 18px 34px rgba(51, 143, 240, 0.18), 0 2px 7px rgba(30, 109, 208, 0.08); opacity: 0; transform: translateY(-12px) scale(0.976); transform-origin: top left; transition: opacity 560ms ease, transform var(--anim-calltransfer-alert-in-ms) cubic-bezier(.22, .9, .3, 1); } .anim-calltransfer.is-alert-in .anim-calltransfer__alert { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer.is-sms-in .anim-calltransfer__alert, .anim-calltransfer.is-call-in .anim-calltransfer__alert, .anim-calltransfer.is-release .anim-calltransfer__alert { opacity: 0; transform: translate(42px, -74px) scale(0.66); transition: opacity 420ms ease, transform 620ms cubic-bezier(.36, 0, .42, 1); } .anim-calltransfer__alert-head { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 12px; font-size: 12px; line-height: 1.171875; font-weight: 700; white-space: nowrap; } .anim-calltransfer__alert-icon { width: 10px; height: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: currentColor; } .anim-calltransfer__alert-icon img { width: 10px; height: 13px; display: block; filter: brightness(0) invert(1); opacity: 0.88; } .anim-calltransfer__alert-title, .anim-calltransfer__alert-emoji { display: inline-block; } .anim-calltransfer__alert-emoji { font-size: 12px; line-height: 1; } .anim-calltransfer__alert-body { width: 100%; font-size: 16px; line-height: 1.5; font-weight: 400; color: #fff; } .anim-calltransfer__alert-body strong { font-weight: 700; } .anim-calltransfer__sms { position: absolute; left: 27.34%; top: 12.3%; width: 42.09%; height: 66.13%; z-index: 5; display: flex; flex-direction: column; align-items: stretch; gap: 16px; box-sizing: border-box; padding: 7px 6px; opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform var(--anim-calltransfer-sms-in-ms) cubic-bezier(.22, .9, .3, 1); pointer-events: none; } .anim-calltransfer.is-sms-in .anim-calltransfer__sms { opacity: 1; transform: translateY(0); } .anim-calltransfer.is-call-in .anim-calltransfer__sms, .anim-calltransfer.is-release .anim-calltransfer__sms { opacity: 0; transform: translateY(-10px); transition: opacity 360ms ease, transform 520ms cubic-bezier(.36, 0, .42, 1); } .anim-calltransfer__message { width: 187.61px; min-height: 0; padding: 10px 14px 13px; border-radius: 7.78px; background: linear-gradient(170deg, #4099f5 0%, #338FF0 100%); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(51, 143, 240, 0.18); opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 480ms ease, transform 620ms cubic-bezier(.22, .9, .3, 1); } .anim-calltransfer.is-sms-in .anim-calltransfer__message { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer__message-head { display: flex; align-items: center; gap: 7.8px; margin-bottom: 6px; opacity: 0.8; font-size: 10.37px; line-height: 1.171875; font-weight: 700; white-space: nowrap; } .anim-calltransfer__message-head img { width: 8.64px; height: 12.09px; display: block; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: 0.88; } .anim-calltransfer__message-body { font-size: 12.09px; line-height: 1.5; font-weight: 400; } .anim-calltransfer__reply { width: 131px; margin-left: auto; padding: 10px 12px 7px; border-radius: 9px; background: #A328FF; color: #fff; box-shadow: 0 0 8px rgba(163, 40, 255, 0.20); opacity: 0; transform: translateY(16px) scale(0.986); transition: opacity 420ms ease, transform var(--anim-calltransfer-reply-in-ms) cubic-bezier(.22, .9, .3, 1); } .anim-calltransfer.is-reply-in .anim-calltransfer__reply { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer__reply-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; color: rgba(255, 255, 255, 0.62); font-size: 12px; line-height: 1.171875; font-weight: 400; white-space: nowrap; } .anim-calltransfer__reply-avatar { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: url("/assets/images/anim-speedtolead/buyer-woman.png") center 8% / 250% auto no-repeat, #fff; box-shadow: 0 0 0 1px #A328FF; opacity: 0.6; } .anim-calltransfer__reply-body { font-size: 14px; line-height: 1.5; font-weight: 700; } .anim-calltransfer__hwball { position: absolute; left: 14.03%; top: 14.97%; width: 12.95%; aspect-ratio: 1; z-index: 0; display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72), 0 0 18px rgba(51, 143, 240, 0.16), 0 10px 22px rgba(30, 109, 208, 0.14); opacity: 0; transform: translateZ(0); transform-origin: center; filter: saturate(0.7) blur(0.1px); transition: opacity 520ms ease, filter 520ms ease; pointer-events: none; } .anim-calltransfer__hwball.is-on { opacity: 0.2; } .anim-calltransfer__hwball.is-muted { opacity: 0.2; filter: saturate(0.7) blur(0.1px); } .anim-calltransfer__hwball.is-muted.is-receding { transition: opacity 880ms cubic-bezier(.34, 0, .16, 1), filter 920ms cubic-bezier(.34, 0, .16, 1); } .anim-calltransfer__hwball.is-attending { opacity: 0.76; filter: saturate(0.98) blur(0); transition: opacity 440ms cubic-bezier(.18, .86, .24, 1), filter 440ms ease; } .anim-calltransfer__call { position: absolute; left: 27.34%; top: 12.3%; width: 42.09%; height: 73.26%; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 47px 6px 7px; border-radius: 6.91px 6.91px 0 0; background: #35005D; color: #fff; opacity: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0.58) 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0.58) 92%, transparent 100%); transform: translateY(18px) scale(0.984); transform-origin: top center; transition: opacity 520ms ease, transform var(--anim-calltransfer-call-in-ms) cubic-bezier(.22, .9, .3, 1); pointer-events: none; } .anim-calltransfer__call::after { content: ""; position: absolute; left: -27%; bottom: -17%; width: 154%; height: 68%; background: linear-gradient(172deg, rgba(233, 238, 251, 0) 22%, rgba(255, 255, 255, 0.96) 52%); filter: blur(38px); pointer-events: none; } .anim-calltransfer.is-call-in .anim-calltransfer__call { opacity: 1; transform: translateY(0) scale(1); } .anim-calltransfer.is-release .anim-calltransfer__call { opacity: 0; transform: translateY(18px) scale(0.988); transition: opacity 460ms ease, transform var(--anim-calltransfer-release-ms) cubic-bezier(.36, 0, .42, 1); } .anim-calltransfer__call-mark { position: relative; z-index: 1; width: 33px; height: 47px; display: block; margin-bottom: 16px; } .anim-calltransfer__call-copy { position: relative; z-index: 1; width: 182px; height: 46px; text-align: center; margin-bottom: 66px; } .anim-calltransfer__call-title, .anim-calltransfer__call-name { font-size: 19.76px; line-height: 1.171875; letter-spacing: 0; } .anim-calltransfer__call-title { font-weight: 700; } .anim-calltransfer__call-name { font-weight: 400; } .anim-calltransfer__pickup { position: relative; z-index: 1; width: 182px; min-height: 59px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; border-radius: 10px; background: linear-gradient(270deg, #16FEBF 0%, #338FF0 52%, #A328FF 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 10px 22px rgba(51, 143, 240, 0.22), 0 3px 8px rgba(163, 40, 255, 0.16); } .anim-calltransfer__pickup span { color: #fff; font-size: 19.76px; line-height: 1.171875; font-weight: 700; letter-spacing: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); } .anim-calltransfer.is-release .anim-calltransfer__buyer, .anim-calltransfer.is-release .anim-calltransfer__agent, .anim-calltransfer.is-release .anim-calltransfer__ready, .anim-calltransfer.is-release .anim-calltransfer__ready-shadow { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 460ms ease, transform 640ms cubic-bezier(.36, 0, .42, 1); } .anim-calltransfer.is-release .anim-calltransfer__buyer { transform: translateX(12px) translateY(10px); } .anim-calltransfer.is-static *, .anim-calltransfer.is-static *::before, .anim-calltransfer.is-static *::after { animation: none !important; transition: none !important; } .anim-calltransfer.is-static .anim-calltransfer__phone, .anim-calltransfer.is-static .anim-calltransfer__status, .anim-calltransfer.is-static .anim-calltransfer__agent, .anim-calltransfer.is-static .anim-calltransfer__ready, .anim-calltransfer.is-static .anim-calltransfer__ready-shadow, .anim-calltransfer.is-static .anim-calltransfer__buyer, .anim-calltransfer.is-static .anim-calltransfer__call { opacity: 1 !important; } .anim-calltransfer.is-static .anim-calltransfer__ambient, .anim-calltransfer.is-static .anim-calltransfer__alert, .anim-calltransfer.is-static .anim-calltransfer__sms { opacity: 0 !important; } .anim-calltransfer.is-static .anim-calltransfer__hwball { opacity: 0.2 !important; } .anim-calltransfer.is-static .anim-calltransfer__phone, .anim-calltransfer.is-static .anim-calltransfer__status, .anim-calltransfer.is-static .anim-calltransfer__agent, .anim-calltransfer.is-static .anim-calltransfer__ready, .anim-calltransfer.is-static .anim-calltransfer__call { transform: none !important; } .anim-calltransfer.is-static .anim-calltransfer__buyer { transform: none !important; } .anim-calltransfer.is-static .anim-calltransfer__agent-ball { opacity: 0 !important; } .anim-calltransfer.is-static .anim-calltransfer__agent-image { opacity: 1 !important; transform: none !important; } @container (max-width: 430px) { .anim-calltransfer__ready { min-width: 64px; padding: 4px 7px 6px; } .anim-calltransfer__ready span { font-size: 10.5px; } .anim-calltransfer__alert { padding: 8px 9px 9px; } .anim-calltransfer__alert-head { gap: 4px; margin-bottom: 6px; font-size: 9.5px; } .anim-calltransfer__alert-icon, .anim-calltransfer__alert-icon img { width: 8px; height: 10.4px; } .anim-calltransfer__alert-emoji { font-size: 9.5px; } .anim-calltransfer__alert-body { font-size: 11px; } .anim-calltransfer__message { width: 80.2%; min-height: 0; padding: 7px 8px 9px; } .anim-calltransfer__sms { gap: 10px; padding: 4px; } .anim-calltransfer__message-head { gap: 5px; margin-bottom: 4px; font-size: 8px; } .anim-calltransfer__message-head img { width: 7px; height: 9.8px; } .anim-calltransfer__message-body { font-size: 8.8px; } .anim-calltransfer__reply { width: 56%; margin-top: 0; padding: 7px 8px 6px; } .anim-calltransfer__reply-head { gap: 3px; margin-bottom: 4px; font-size: 8.5px; } .anim-calltransfer__reply-avatar { width: 11px; height: 11px; flex-basis: 11px; } .anim-calltransfer__reply-body { font-size: 10.5px; } .anim-calltransfer__call { padding: 28px 5px 6px; } .anim-calltransfer__call-mark { width: 22px; height: 31px; margin-bottom: 10px; } .anim-calltransfer__call-copy { width: 112px; height: 28px; margin-bottom: 40px; } .anim-calltransfer__call-title, .anim-calltransfer__call-name, .anim-calltransfer__pickup span { font-size: 12.5px; } .anim-calltransfer__pickup { width: 112px; min-height: 36px; margin-bottom: 0; } } /* ============================================ */ /* GRADIENT BACKGROUNDS */ /* ============================================ */ .gradient-background1 { /*background: linear-gradient(20deg, #FFF 16.85%, #F0F4FE 38.42%, #EBF1FF 71.78%, #E7FFF1 102.09%) !important;*/ background: linear-gradient(179deg, #FFF 0.87%, #ACD0FB 34.57%, #CDA3F9 69.95%, #FFF 113.2%); } .gradient-background { background: linear-gradient(179deg, #FFF 0.87%, #ACD0FB 34.57%, #CDA3F9 69.95%, #FFF 113.2%); } .gradient-background2 { background-color: #4B007D; color: white !important; } /* ============================================ */ /* WAVY LINES */ /* ============================================ */ .wavylines, .wavylines2, .wavylines3 { display: block; position: absolute; top: 0px; left: 0px; width: 100%; right: 0px; bottom: 0px; overflow: hidden; z-index: 2; pointer-events: none; } div.wavylines > svg { transform: scale(1.2); transform-origin: 0; transform-box: content-box; width: 100vw; } #wavyLinesSVG1{ transform: rotate(360deg) translate(-180px, 68px) scale(1.3); transform-origin: 0; transition: top; transform-box: content-box; width: 100vw; opacity: .5; } #wavyLinesSVG2 { transform: rotate(180deg) translate(0, -54px) scale(1.2); transform-origin: 50vw; transition: top; transform-box: content-box; width: 100vw; } /* ============================================ */ /* HERO SECTION */ /* ============================================ */ .bigpurple { color: #A328FF; font-weight: 300; text-align: center; } h1.bigpurple { color: #A328FF; font-weight: 300; font-size: 48px; text-align: center; line-height: 1.2; margin: 5px auto; position: relative; z-index: 10; height: auto; width: 100%; } h2.bigpurple { font-weight: 100; font-size: 56px; text-align: center; line-height: 1.2; margin: 30px auto 20px auto; position: relative; z-index: 10; } h4.subtext { color: var(--color-text-primary); font-weight: 300; font-size: 26px; text-align: center; margin: 5px auto 5px auto; max-width: 900px; line-height: 150%; position: relative; z-index: 10; } #section-hero { padding: 230px 5% 0 5%; /*padding-top: 140px;*/ } @media (max-width: 1024px) { #section-hero { padding-top: 80px; } } /* ============================================ */ /* VIDEO CONTAINER */ /* ============================================ */ .video-container { width: 100vw; position: relative; overflow: hidden; mask-image: url('data:image/svg+xml,'); mask-repeat: no-repeat; mask-size: 100vw; mask-position: 0px 0px; transform: translate(-50%, 10px); left: 50%; margin: 60px 0 0 0; z-index: 3; } #heroVid { width: 100%; height: auto; } #generalbtn3 { position: absolute; bottom: 21px; left: 50%; transition: all .2s ease-in-out; transform: translate(-50%, 0px); } #generalbtn3:hover { opacity: 1 !important; box-shadow: 0 0 24px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.1) !important; } /* ============================================ */ /* PRESS BAR */ /* ============================================ */ /* Homepage press bar styles currently live in _homepage.css because the section's decorative horns are tied to the landing-page composition. Keep this file free of legacy width/tile rules until the pattern is promoted into a reusable section primitive. */ /* ============================================ */ /* SOLUTIONS / TABS */ /* ============================================ */ #solutions { position: relative; /*padding: 40px 0;*/ } #solutions h4 { width: 78%; margin: 30px auto 0px auto; text-align: center; line-height: 150%; position: relative; z-index: 20; } h4.prodTitlePrime { font-weight: 700; font-size: 1.2em; } h4.prodTitleSecond { font-weight: 100; font-size: 1.2em; line-height: 1.66; margin-top: 6px !important; } #solutions h4.prodTitleSecond { line-height: 1.66; } .pagidots { width: 100%; display: flex; justify-content: center; gap: 20px; } #sol_pagidots { margin: -30px 0px 30px 0px; } #tes_pagidots { margin: 0px 0px 30px 0px; } .pagidot { border: 1px solid #ffffff5e; border-radius: 100%; width: 12px; height: 12px; } #tes_pagidots .pagidot { background-color: #fff !important; border: 1px solid #d5b6ff !important; } #solutions .pagidot.active { border: 1px solid #fff; } #tes_pagidots .pagidot.active { border: 1px solid #A328FF !important; } .tabbywrapper { display: flex; flex-direction: row; margin: 0px auto; justify-content: center; font-weight: 600; font-size: 18px; color: #3597FF; width: fit-content; background-color: #fff; border-radius: 38px; gap: 12px; padding: 12px; position: relative; overflow: hidden; } .tabby { padding: 6px 18px; border-radius: 28px; transition: background-color .2s linear, color .2s linear; cursor: pointer; } .tabby:hover { background-color: #6B00AF; color: #fff; } .tabbyactive { background-color: #A328FF; color: #fff; } .fade { transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; opacity: 0; display: none; } .showMo { opacity: 1; transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; display: flex !important; } /* ============================================ */ /* SOLUTIONS SCENES */ /* ============================================ */ #sceneWrap { display: flex; flex-direction: column; } #crmupdated, #updateprofle, #summaryblock { padding: 0 0 70px 0; min-height: 452px; position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-image-source: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); border-image-slice: 1; flex-direction: column; overflow-y: clip; } .product_update_area { width: 70%; display: block; } .product_update_area_100 { width: 100%; } :root { --fade-duration: 1s; --active-color1: #16FEBF; --active-color2: #338FF0; --active-color3: #A328FF; } /* ============================================ */ /* SMS SCENE */ /* ============================================ */ #smsScene { z-index: 2; bottom: 0px; width: 100%; left: 0px; position: absolute; height: 100%; visibility: visible; display: block; } #smsSceneFocus { position: absolute; bottom: -26px; left: 30%; } #crmupdated #standandread { left: 320px; width: 174px; margin-bottom: -11px; bottom: 0; position: absolute; z-index: 30; } #standandread > .svgAsset, #walkandtalk > .svgAsset, #carlady > .svgAsset { width: 100%; height: auto; display: block; z-index: 4; position: relative; } #herocardSMS { max-width: 346px !important; opacity: 1; border-radius: 32px 32px 0px 0px; height: 410px; background: none; border: 1px solid #CC87FF; bottom: -26px; left: 19%; } #smsAddressBar { width: 110%; border-bottom: 1px solid rgba(204, 135, 255, .5); text-align: center; font-size: 18px; font-weight: 600; padding: 6px 0px 16px; color: white; margin: -10px 0 0 0; transform: translate(-5%, 0px); display: flex; gap: 7px; flex-direction: row; align-items: center; justify-content: center; } #smsContactCardImg { width: 26px; height: 26px; background-image: url(../assets/images/sms-contact-card.png); background-size: 100%; background-repeat: no-repeat; margin: -1px 0 0 0; } #smsWindow { display: flex; flex-direction: column; align-items: flex-start; overflow-y: hidden; overflow-x: hidden; position: relative; width: 100%; height: 342px; } #smsWindow ul { margin: 0px; padding: 8px 0px 0px 0px; } #smsWindow li { list-style: none; margin: 0px 0px 8px 0px; padding: 0px; font-size: 16px; line-height: 24px; } .message { padding: 6px 14px; margin: 14px 0 0 0; border-radius: 15px; max-width: 80%; display: none; position: relative; font-size: 20px; /*font-weight: bolder;*/ } .message p { margin: 0; line-height: 150%; } .bot { background-color: #A328FF; text-align: left; margin-left: 10px; color: white; } .bot::before { content: ''; position: absolute; top: 50%; left: -20px; border-width: 10px; border-style: solid; border-color: transparent #A328FF transparent transparent; transform: translateY(-50%); } .agent { background-color: #3597FF; text-align: right; color: white; align-self: flex-end; margin-right: 10px; } .agent::before { content: ''; position: absolute; top: 50%; right: -20px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #3597FF; transform: translateY(-50%); } #smsSceneOpenHouseSign { width: 102px; position: absolute; bottom: -57px; left: 425px; } /* ============================================ */ /* VOICE SCENE */ /* ============================================ */ #voiceScene { z-index: 2; bottom: 0px; width: 100%; left: 0px; position: absolute; height: 100%; } .illustration { z-index: 3; bottom: 0px; width: 63%; left: -71px; position: absolute; } #eventPoi { top: -30px; left: 43%; z-index: 1; position: absolute; } .roadbgnd-image { position: absolute; top: 57%; background-image: url("data:image/svg+xml,%3Csvg id='bushes' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1685.5 75.8'%3E%3Cpath d='M0 75.8c8.4-2.9 18-1.1 26.7-3 11.5-2.5 18.6-4.4 30.7-2.8 4.4.6 10.7 2.4 15.1 1.6 5.1-.9 7.9-5.5 12.8-7.2 6.4-2.2 13.1-3.9 19.6-2.4 3 2.1 1 5.8 3.8 7.6 1.8-.5 3.7-1 5.7-1.5 3.7-7.7 12.3-6.7 18.6-8.6-2.3-7.2 5.3-13.7 10.6-16.3 1.7.4 1.6 2.2 3.2 2.7v-4.7q2.8-.2 5.3 2.9c2.2.6 8.3-.5 10.5-1.2-.4-3 2.1-4.9 2.3-7.3 1.7-1.2 3.3-.1 4.8-.8.9-3.6 3-6.3 6.5-7.7 1.4 1.9 1.2 4.7 4.4 4.9.3-2 .8-4.1 2.7-5.6 5.5 2.4 13.8.9 18.9 3.9 3.7 2.1 11.3 11.3 9.1 15.9h7.1c1.3-4.6 7.3-11.3 11.5-14.3 3.2.3 8.9 1.2 11.8 2.6 4.5 2.1 5.5 5.6 9.2 8 1.5-2.6 5.5-2.1 5.9-5.4 5.5-.2 8.6 7.3 12.8 7.1.7 2 6.6 11.9 8.5 13 2.9-.7 5.2-2.9 8.3-3.3 2.9-.4 5.4 2.4 8.4 1.1 1.6 1 1.3 3.1 3.5 3.6 7.8-1.3 14.7 6.4 19.4-1.2.9-1.4 1.6-10.6.7-10.3 2.4-1 2.2 1.7 4.6 2.1-2.7-4.5.3-7.6 1.5-11 4.6-1.1 9.1 4.1 12.7-1.2 2.1.2 1.9 2.5 3.4 2.9 1.6-2 3.3-.5 5.2-.3-.5 2.3.5 4.1 1.9 5.7 3.2-.8 3.8 2.6 6 3.3-1.7 3.4-2.1 4.1-4.1 5.7 1 1 2.3-.5 3.4.4 1.2 4.1 2.3 2.7 4.1 5.8-.2 1.7-2.9 1.3-2.4 4 3.3-.9 4.8-4.3 8.4-5.4-2.7-1.8-.9-3.8-2-5.8 2.5.5 4.4.8 6.2 1.1.3.9.6 1.7 1 2.7 1.4-1.6 3.3-2.3 4.7-2.9.9-1.1-.8-2.3.8-2.8 3 2.7 6.4 4.4 10.3 4.9 1.5-2.1 1.7-4.2 1.5-6.1 1.2-1.3 2.6-1.1 4.1-1.5-1-3.7 4.6-6.3 1.6-10.1 1.8-2.9.4-1.3 1.2-4.7 2.6.2 9.6-9.8 13.4-10.8 3-.8 14.8 1.7 16.4 5-.2.9-.5 2-.8 3 2.9 2.4 3.5 5.4 2.8 8.8 1.3.3 2.1-1 3.1-.2.3 1.6-2.1 2.3-1.4 3.7 3 .1 5.3 2.2 8.1 2 1.3 3.9 1.2 7.3-1.9 10.1 1.8 1.3 3.1-.7 4.6 0 .3.6.7 1.3 1.1 2.1 6-.4 11.2-4.5 17.4-3.6.5-3.5 5-15.5 9.2-16.1 2.6-.4 5.1 7.5 9.7 6.4-3.9-3.5.1-3.3 2.8-5.4.4-2.4 1.5-4.4 3.6-6 3.1 2.5 7.3 1.3 10.6 3.3 5.5-1.3 10 1.3 14.1 3.3 1.3 2-.4 3.7 1.1 5.8.3.4 3.8-1.7 4.6-1.3.5.8.5 1.6-.1 2.3.7.5 2 .1 2.5 1.3 0 1.4-2.9 1.4-1.6 3.6 2.6 2.3 6.1 2.6 9.6 2.8-.3 1.7 0 3.3-1.1 4.5 5.9.7 11.2-2.3 17.1-1.8-.6-2.2-2.9-2.1-3.1-3.9 3.7-2.1 6.3-5.7 10.2-7.5 3.7 3.3 8.3 5.3 10.4 9.4 12.1 0 24.5 1.5 36.4 1.1 7.1-.2 21.6-.5 27.5-5.3 1.2-4.1-4-8-.5-11.4 1.7 2.1 3.5 1.4 5.6.4-5.6-6.9 6.5-14.5 7.6-20.1 2.2.2 4.1.1 5.1 2.4.7-1.1.4-2.1 1.4-2.8 8.1-.5 10.3 9 16.6 8.1 0 2.7 1.4 4.8 2.4 6.8 1.4 0 2.2-.3 2.7-1.3 0-1.9-2.3-3.4-1-5.5 2.4-.3 2.9 2.8 4.9 2.8 1.6-1.3 1.2-3.2 2.1-4.6q3.8-.8 1.5-6.5c2.7-1.1 5.8-1.9 6.5-6.4 2.1 3.9 4.7 5.7 7.8 6 1.3 2.1-.5 3.9.5 5.7 2.2.7 4.5.8 6.8.3.6 3.6-1.6 6.4-1.5 9.5 7.8-1.4 13.5-14.8 14.9-20.8 4.2 1.2 2.6 7.3 7.4 7.8 5.2.5 2.6-4.9 6-6.3 3.4-1.4 4.1.7 7.2 0 4.4-.9 6.1-2.3 10-4.4 1.2 0 .9 1.4 1.8 1.6 1.1-.7 1.4-2.3 3-2.5 2.3.7 2.2 3.1 3 4.8 2.4-1.2 3.8 2 5.5.2 1.1-1.1-.1-2.9.9-3.9 3.6-.6 2.7 3.2 4.4 4.5 8.1-5.2 15.1-2.9 18.1 5.7.6-.7.2-1.8 2-2.4.4 3.4 5.3 5 2.7 9.7 1.8-.4 2.7.8 3.9.9 1.1-.7.4-2.5 2.1-2.8 1.8.7 2.1 3.9 5.3 3.2-4.6-6.2-4.3-12.2.8-17.9 1.4-.2 3-.5 4.3-.7.9.8.1 2.3 1.5 2.6 1.2-.8-.5-2.3.9-3.2 3.6-.9 4.4-3.9 8.3-2.1.3-.8.9-1.4 1.7-1.6.6 1.1 1.4 2 2.4 2.7 2-1.9 2.6-4.6 4.1-6.4 3.6-.6 4.4 1.6 4.6 4.4 1.2-.7.8-2.2 2.1-2.4q4.5 3.1 7.8 8.5c.1.9-1.2.6-.9 1.6 3.4.5 5.9-1 7.5-3.3 1.4-.3 1.8.9 2.7.5 1-1.3-.7-3 .6-4.5 1.9.3 3.2 2 5.2 2.7 4.1-3.7 1.4-2.2 2.3-6.6 3.2-1.3 5.5-6.1 10.1-1.5.4 1.6.8 4 2.9 5.4-1.5 7 15.8 11.2 19.7 7.7.4-1.3.3-2.7 1.3-3.8 4.6 2.4 4.4-.7 3.9-4 1.5.7 2.7 1.3 3.8 1.8 1.2-1.2-.9-2.7.5-3.7q3.3 1.3 7.9-1.2c1.7.2.9 2.9 2.7 2.9 1.8-.9.1-3 1.6-4.1 1.5 0 3.1-.6 4.6-.2 1 2.6-.1 4.9-.2 7.4 1.2-.8 1.6-2 1.4-3.4.4-1.7 1.4-1.9 3-.6-1.4 1 5.6-2.8 4.8-2.7 3.7 5.9 8.4 11.1 13.1 16.1-.9 1.8-3.2.7-3.9 2.6 1.1 2.1 1.9 4.5 3.8 5.8-.5 2.1-3.2 1.9-3.1 4 2 2.1 4.4 2.7 7.4 2.1-2.4 2.2-2.9 5.3-5.2 7.1.5 1 .9 1.7 1 1.9 8.3 3.5 16.3 0 24.3.2 4.1-4.4-4.3-6 3.3-9.4 1-1.4-.1-3.3 1.4-4.2 1.8 0 2.8 1.4 3.9 2.5 1.1-1.9 1.1-3.6.6-5.5 1.1.3 1.7.4 2.5.7.3-5 3.9-8.5 5.1-13.3 1.1.6 1.9.9 2.5 1.2 3.6-1.3 1.6-4.5 2.2-6.8 1.4-.5 2.6-1.2 4.1-.9 1.4 3 5.2 2.6 5.7 6.3 4 1.1 2.3 4.6 3.1 7.1 1 0 1.6-1.4 3.1-.4 1.2 2 4.7 6.3 4.7 6.3 2.4 3.7 5.5 6.6 8.9 7.3 0-3.2-2.1-5.9-1.5-9.5 2.4.6 4.6.4 6.8-.3 1-1.7-.8-3.6.5-5.7 3.1-.3 5.7-2 7.8-6 .7 4.5 3.8 5.3 6.5 6.4q-2.3 5.7 1.5 6.5c.8 1.4.4 3.3 2.1 4.6 2 0 2.5-3 4.9-2.8 1.3 2.1-1 3.6-1 5.5.4 1 1.3 1.3 2.7 1.3 1-2.1 2.4-4.1 2.4-6.8 6.3 1 8.5-8.5 16.6-8.1 1 .7.7 1.7 1.4 2.8.9-2.3 2.9-2.3 5.1-2.4 1.1 5.6 13.2 13.2 7.6 20.1 2.1 1 3.9 1.6 5.6-.4 3.5 3.4-1.8 7.3-.5 11.4 5.9 4.8 20.4 5.1 27.5 5.3 11.9.4 24.3-1.1 36.4-1.1 2.2-4.1 6.7-6.1 10.4-9.4 3.9 1.8 6.5 5.4 10.2 7.5-.2 1.8-2.4 1.7-3.1 3.9 5.9-.6 11.2 2.5 17.1 1.8-1-1.3-.9-2.8-1.1-4.5 3.5-.2 7-.5 9.6-2.8 1.3-2.2-1.6-2.2-1.6-3.6.5-1.2 1.7-.9 2.5-1.3-.6-.8-.7-1.5-.1-2.3.8-.4 4.3 1.7 4.6 1.3 1.5-2.1-.2-3.8 1.1-5.8 4.2-2 8.6-4.6 14.1-3.3 3.3-2 7.5-.8 10.6-3.3 2.1 1.7 3.2 3.6 3.6 6 2.7 2.1 6.7 1.9 2.8 5.4 4.6 1.1 7.2-6.8 9.7-6.4 4.2.6 8.7 12.7 9.2 16.1 6.2-.9 11.4 3.2 17.4 3.6.4-.8.7-1.5 1.1-2.1 1.5-.7 2.8 1.4 4.6 0-3.2-2.8-3.2-6.2-1.9-10.1 2.8.2 5.1-1.9 8.1-2 .7-1.4-1.7-2.1-1.4-3.7 1-.8 1.8.5 3.1.2-.8-3.3-.2-6.4 2.8-8.8-.3-1-.6-2.1-.8-3 1.6-3.4 13.4-5.8 16.4-5 3.9 1 10.8 11 13.4 10.8.8 3.4-.6 1.8 1.2 4.7-3.1 3.8 2.6 6.3 1.6 10.1 1.6.4 3 .2 4.1 1.5-.2 1.9 0 4 1.5 6.1 3.9-.4 7.3-2.2 10.3-4.9 1.6.5-.1 1.7.8 2.8 1.4.6 3.2 1.2 4.7 2.9.4-1.1.7-1.8 1-2.7 1.8-.3 3.8-.7 6.2-1.1-1 1.9.7 4-2 5.8 3.6 1 5.1 4.4 8.4 5.4.5-2.7-2.2-2.4-2.4-4 1.8-3.1 2.9-1.7 4.1-5.8 1.1-.9 2.4.6 3.4-.4-2-1.6-2.5-2.2-4.1-5.7 2.3-.7 2.8-4.1 6-3.3 1.5-1.6 2.5-3.4 1.9-5.7 1.9-.2 3.6-1.7 5.2.3 1.5-.4 1.3-2.7 3.4-2.9 3.6 5.3 8 .1 12.7 1.2 1.2 3.4 4.1 6.5 1.5 11 2.4-.4 2.3-3 4.6-2.1-.9-.3-.2 8.9.7 10.3 4.7 7.5 11.7 0 19.4 1.2 2.2-.5 1.9-2.6 3.5-3.6 3 1.3 5.5-1.5 8.4-1.1 3.1.4 5.4 2.6 8.3 3.3 2-1.1 7.8-11 8.5-13 4.1.2 7.3-7.4 12.8-7.1.4 3.3 4.4 2.8 5.9 5.4 3.7-2.4 4.7-5.9 9.2-8 2.9-1.3 8.5-2.3 11.8-2.6 4.2 3 10.2 9.6 11.5 14.3h7.1c-2.2-4.6 5.4-13.8 9.1-15.9 5.2-2.9 13.4-1.5 18.9-3.9 2 1.5 2.4 3.6 2.7 5.6 3.2-.2 3-3 4.4-4.9 3.5 1.5 5.6 4.1 6.5 7.7 1.5.6 3.1-.5 4.8.8.1 2.4 2.7 4.3 2.3 7.3 2.2.8 8.3 1.8 10.5 1.2q2.5-3.1 5.3-2.9v4.7c1.6-.5 1.5-2.3 3.2-2.7 5.3 2.6 12.9 9.1 10.6 16.3 6.3 1.9 14.9.9 18.6 8.6 1.9.5 3.9 1 5.7 1.5 2.9-1.8.8-5.4 3.8-7.6 6.5-1.5 13.2.3 19.6 2.4 4.9 1.7 7.7 6.2 12.8 7.2 4.4.8 10.7-1 15.1-1.6 12-1.6 19.2.3 30.7 2.8 8.7 1.9 18.3 0 26.7 3' style='fill:none;stroke:rgba(255,255,255,.2);stroke-width:2px;stroke-miterlimit:10' data-name='6gS4kC'/%3E%3C/svg%3E"); background-repeat: repeat-x; height: 50%; z-index: 1; animation: moveBackground 40s linear infinite; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; } @keyframes moveBackground { 0% { background-position: 0px 15%; } 100% { background-position: -1000px 15%; } } /* ============================================ */ /* AUDIO PLAYER */ /* ============================================ */ #audio-player { z-index: 50; text-align: center; display: flex; flex-direction: column; align-items: center; transition: all .5s; } #audio-prompt { background: #A328FF; display: flex; flex-direction: row-reverse; align-items: center; gap: 0px; transition: all .5s; width: 100vw; justify-content: center; height: 68px; } #audio-prompt.active { padding: 14px 40px; gap: 10px; height:100%; } #audio-prompt-label { padding: 6px 12px 6px 0px; font-weight: 300; color: #fff; text-align: left; line-height: 140%; display: block; font-size: 16px; } #audio-prompt-label i { font-weight: 500; font-size: 16px; } .hidden { display: none !important; } #seek-bar { width: 60%; margin: 14px 4px 10px 0px; } #statusbar { display: flex; flex-direction: row; justify-content: left; align-items: center; gap: 6px; } .audio-btn { border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; box-shadow: 0px 0px 10px 3px rgba(182, 102, 252, .5); background: linear-gradient(white, white) padding-box, linear-gradient(231deg, #16FEBF 0.37%, #338FF0 48.45%, #A328FF 93.73%) border-box; border: 6px solid transparent; } .audio-btn:hover { opacity: .75; } #play-btn, #pause-btn { width: 50px; height: 50px; transform: scale(.75); flex-shrink: 0; } #play-btn, #pause-btn, input[type="range"] { margin: 10px 4px 10px 0px; } #play-btn:after { position: relative; width: 0; content: ''; left: 8%; border-top: 12px solid transparent; border-left: 24px solid #338FF0; border-bottom: 12px solid transparent; height: 0; } #pause-btn:after { position: relative; width: 0px; content: ''; left: 1.5%; border-style: double; border-width: 0px 0px 0px 22px; height: 28px; border-color: #338FF0; } #audioTimeElap { margin: 2px .5% 0px 0px; font-size: 9px; } /* ============================================ */ /* CRM PROFILE / POINT GRID */ /* ============================================ */ #updateprofle { padding-bottom: 30px !important; --box-width: 37px; --box-height: -8px; --box-depth: 37px; --box-spacing: 50px; --animation-duration: 4s; --animation-delay: .2s; --scale: 1; width: 100%; height: 492px; flex-direction: column; } #pointgridparent { box-sizing: border-box; display: block; overflow: hidden; position: absolute; left: 50%; right: 50%; top: 0px; bottom: 0px; width: 100vw; margin-left: -50vw; margin-right: -50vw; } #pointgrid { position: absolute; top: -320px; left: 0; right: 0; bottom: 10px; display: flex; transform-style: preserve-3d; font-size: 0; transform: perspective(1000px) rotate3d(1, 0, 0, 65deg) translate(0px, 0px); justify-content: center; will-change: transform; transform-origin: bottom; } .pointgroup { display: inline-block; margin-right: var(--box-spacing); transform-style: preserve-3d; } .gridfocus { position: relative; width: var(--box-width); height: var(--box-depth); transform-style: preserve-3d; margin-bottom: var(--box-spacing); animation-name: wave; animation-delay: calc(var(--scale, 1) * var(--animation-delay)); animation-duration: var(--animation-duration); animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.74, .14, .18, .91); box-shadow: 0 26px 13px 0 rgba(0, 0, 244, 0.15); border-radius: 50%; border: 1px solid #ffffff8f; will-change: transform, opacity; transition-property: background; transition-delay: 1s; overflow: clip; } @keyframes wave { 50% { transform: translateZ(12px); } } .gridfocusBG { opacity: 0; background: linear-gradient(231deg, #16FEBF 0.37%, #338FF0 48.45%, #A328FF 93.73%); transition: opacity .1s ease-in-out; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .refreshuser.show > .gridfocusBG { opacity: 1; } svg.defaultuser { fill: #ffffffa3; transform: scale(1.2) translate(5px, 5px); z-index: 1; position: relative; } #bubs { transform: translate(558px, -58px); z-index: 50; } .ttip { position: absolute; background: #fff; z-index: 40; border-radius: 12px; padding: 8px 12px; display: flex; font-size: 14px; line-height: 150%; gap: 8px; perspective: 0px; } .ttip::after { content: ''; position: absolute; bottom: -20px; left: 45%; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #fff transparent transparent transparent; } .ttip_icon { width: 38px; height: 38px; border-radius: 50%; display: block; background: linear-gradient(black, black) padding-box, linear-gradient(231deg, #16FEBF 0.37%, #338FF0 48.45%, #A328FF 93.73%) border-box; border: 3px solid transparent; } svg.svgBubbleIcon { transform: scale(.95) translate(-1px, 8px); } .ttip_title { font-weight: bold; } /* ============================================ */ /* WALK AND TALK SCENE */ /* ============================================ */ #summaryblock { width: 100%; overflow-y: clip; } .herocard.show { opacity: 1; } .herocard { width: 400px; border-radius: 30px; background: var(--color-surface-secondary); box-shadow: 0 43.74px 68.04px 0 rgba(163, 40, 255, 0.26); position: absolute; z-index: 3; padding: 36px; transform: scale(0.8); max-height: 500px; transform-origin: bottom center; will-change: transform, opacity; } .cardtitle { font-size: 22px; font-weight: 100; margin-bottom: 12px; } .cardsubtitle { font-size: 12px; font-weight: 300; } .herocard span.aitext { background: linear-gradient(231deg, var(--active-color1) 0.37%, var(--active-color2) 48.45%, var(--active-color3) 93.73%), #FFF; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .aitext { background: linear-gradient(231deg, #16FEBF 0.37%, #338FF0 48.45%, #A328FF 93.73%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; animation: animateGradient 2s infinite linear; } @keyframes animateGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .callsubhead { font-weight: bold; width: 100%; } .actiontitle { line-height: 24px; width: -webkit-fill-available; } .cardaction { background-color: rgba(128, 128, 128, 0.13); margin: 10px auto; border-radius: 12px; padding: 3% 63px 3% 12px; min-height: 50px; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: right 10px bottom 50%; background-size: 30px; } .cardaction.complete { background-image: url('data:image/svg+xml,') !important; background-repeat: no-repeat; background-position: left 10px bottom 50%; background-size: 30px; padding: 3% 12px 3% 50px; } .hiddenTask { display: none; } #speechContainer { position: absolute; margin: 0px auto; top: 7%; width: 250px; left: 73%; transform-origin: left; } #speech-bubble { position: relative; background: #f0f4fe; border-radius: 10px; padding: 20px; max-width: 400px; font-size: 16px; color: #333; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 0.5s ease-in-out; } #speech-bubble::before { content: ''; position: absolute; top: 20px; left: -22px; border-width: 22px 0px 20px 23px; border-style: solid; border-color: #f0f4fe transparent transparent transparent; } #speechText { margin: 0; padding: 0; line-height: 140%; } @keyframes walkAcross { 0% { left: -18%; opacity: 0; transform: translateY(0); } 2% { left: -9%; opacity: 1; transform: translateY(-0.5px); } 4% { left: -4%; transform: translateY(0); } 6% { left: -2%; transform: translateY(-0.5px); } 8% { left: 0%; transform: translateY(0); } 10% { left: 2%; transform: translateY(-0.5px); } 12% { left: 4%; transform: translateY(0); } 14% { left: 6%; transform: translateY(-0.5px); } 16% { left: 9%; transform: translateY(0); } 18% { left: 12%; transform: translateY(-0.5px); } 20% { left: 15%; transform: translateY(0); } 22% { left: 18%; transform: translateY(-0.5px); } 24% { left: 21%; transform: translateY(0); } 26% { left: 24%; transform: translateY(-0.5px); } 28% { left: 27%; transform: translateY(0); } 30% { left: 30%; transform: translateY(-0.5px); } 32% { left: 33%; transform: translateY(0); } 34% { left: 36%; transform: translateY(-0.5px); } 36% { left: 39%; transform: translateY(0); } 38% { left: 42%; transform: translateY(-0.5px); } 40% { left: 45%; transform: translateY(0); } 42% { left: 48%; transform: translateY(-0.5px); } 44% { left: 51%; transform: translateY(0); } 46% { left: 54%; transform: translateY(-0.5px); } 48% { left: 57%; transform: translateY(0); } 50% { left: 60%; transform: translateY(-0.5px); } 52% { left: 63%; transform: translateY(0); } 54% { left: 66%; transform: translateY(-0.5px); } 56% { left: 69%; transform: translateY(0); } 58% { left: 72%; transform: translateY(-0.5px); } 60% { left: 75%; transform: translateY(0); } 62% { left: 78%; transform: translateY(-0.5px); } 64% { left: 81%; transform: translateY(0); } 66% { left: 84%; transform: translateY(-0.5px); } 68% { left: 87%; transform: translateY(0); } 70% { left: 90%; transform: translateY(-0.5px); } 72% { left: 93%; transform: translateY(0); } 74% { left: 96%; transform: translateY(-0.5px); } 76% { left: 100%; transform: translateY(0); } 80% { left: 106%; opacity: 1; } 85% { left: 110%; opacity: 1; } 88% { left: 115%; opacity: 0; } 90% { left: -25%; opacity: 0; } 91% { left: -22%; opacity: 1; } 100% { left: -20%; transform: translateY(0); opacity: 1; } } #summaryblock #walkandtalk { left: -15%; width: 11%; margin-bottom: 0px; bottom: -80px; position: absolute; z-index: 30; } #summaryblock #door1 { left: 6%; bottom: 0; width: 22%; position: absolute; transform: translate(0, 106px) scaleY(1.15); opacity: .35; } #summaryblock #door2 { right: 6%; bottom: 0; width: 16%; position: absolute; transform: translate(0, 106px) scaleY(1); opacity: .35; } #herocard4 { bottom: -29px; left: 50%; max-width: 450px; opacity: 1; border-radius: 20px 20px 0px 0px; height: 350px; transform: translate(-50%, 0px) scale(.8); transform-origin: bottom center; } .poi2 { display: block; width: 50px; overflow: hidden; height: 50px; position: absolute; border-radius: 50%; box-shadow: 0px 0px 24px 13px white; } .poi2 video { transform: scale(2); } #summPoi { top: 9px; left: -24px; } #sendPoi { top: -11px; left: -319px; } /* ============================================ */ /* IMPLEMENTATION / CRM SECTION */ /* ============================================ */ #section-implementation { padding: 60px 5%; text-align: center; background-color: #fff; } #crmDiagram { position: relative; margin: 30px auto; display: block; max-width: 100%; } .section-label { text-align: center; margin: 60px 0 10px 0; font-size: 1.3em; line-height: 1.66; color: #A328FF; } .section-label strong { font-weight: 700; } .crm-grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: auto; gap: 20px; max-width: 1100px; margin: 30px auto 40px auto; padding: 0 5%; align-items: center; } .crm-cell-fub { grid-column: 1 / 5; grid-row: 1 / 2; } .crm-cell-sierra { grid-column: 16 / 20; grid-row: 3 / 4; } .crm-cell-kvcore { grid-column: 22 / 27; grid-row: 1 / 2; } .crm-cell-moxi { grid-column: 2 / 6; grid-row: 2 / 3; } .crm-cell-salesforce { grid-column: 21 / 25; grid-row: 2 / 3; } .crm-cell-lofty { grid-column: 7 / 11; grid-row: 3 / 4; } .crm-cell-card { grid-column: 7 / 20; grid-row: 1 / 3; } @media (max-width: 768px) { .crm-grid { grid-template-columns: repeat(12, 1fr); } .crm-cell-fub { grid-column: 1 / 5; grid-row: 1 / 2; } .crm-cell-sierra { grid-column: 5 / 9; grid-row: 1 / 2; } .crm-cell-kvcore { grid-column: 9 / 13; grid-row: 1 / 2; } .crm-cell-moxi { grid-column: 1 / 5; grid-row: 2 / 3; } .crm-cell-card { grid-column: 1 / 13; grid-row: 3 / 4; } .crm-cell-salesforce { grid-column: 5 / 9; grid-row: 2 / 3; } .crm-cell-lofty { grid-column: 9 / 13; grid-row: 2 / 3; } } @media (max-width: 430px) { .crm-grid { grid-template-columns: repeat(2, 1fr); } .crm-cell-fub { grid-column: 1 / 2; grid-row: 1 / 2; } .crm-cell-sierra { grid-column: 2 / 3; grid-row: 1 / 2; } .crm-cell-kvcore { grid-column: 1 / 2; grid-row: 2 / 3; } .crm-cell-moxi { grid-column: 2 / 3; grid-row: 2 / 3; } .crm-cell-salesforce { grid-column: 1 / 2; grid-row: 3 / 4; } .crm-cell-lofty { grid-column: 2 / 3; grid-row: 3 / 4; } .crm-cell-card { grid-column: 1 / 3; grid-row: 4 / 5; } } #tieroverflow2 { text-align: center; border-radius: 30px; box-shadow: inset 0px 6px 32px rgba(0, 221, 179, 0.25); padding: 30px 0px 0px 0px; display: inline-block; position: relative; width: 100%; max-width: 500px; margin: 0px 0px 16px 0px; } #tieroverflow2 h4 { color: var(--color-text-secondary); font-size: 1em; } #tieroverflow2 h4.prodTitlePrime { color: var(--color-text-secondary); } #tieroverflow2 h4.prodTitleSecond { font-weight: 100; } #generalbtn2 { margin-top: 10px !important; } /* ============================================ */ /* TESTIMONIALS */ /* ============================================ */ #section-testimonials { padding: 80px 5% 20px 5%; position: relative; background-color: #fff; color: var(--color-text-primary); margin-top: 0; border-top: 1px solid #eee; } #section-featured-partners { margin-top: 0 !important; padding-top: 0 !important; } #section-featured-partners .section-label { margin-top: 20px; } #testimonials-wrapper { display: flex; flex-direction: column; align-items: center; transition: height 0.25s ease; overflow: hidden; position: relative; justify-content: flex-start; height: 100%; width: 100%; min-height: 300px; } #testimonials-wrapper .pagi, #solutions .pagi { box-sizing: border-box; position: absolute; display: block; transform: scale(var(--ggs, 1)); width: 32px; height: 32px; border: 4px solid transparent; border-radius: 100px; cursor: pointer; } #testimonials-wrapper .pagi:hover { color: #0066FF; } #testimonials-wrapper .pagi::after, #solutions .pagi::after { content: ""; display: block; box-sizing: border-box; position: absolute !important; width: 38px; height: 38px; border-bottom: 4px solid; border-right: 4px solid; border-color: #A328FF; } #solutions .pagi:hover::after { border-color: #FFF; } #testimonials-wrapper .pagination-left, #solutions .pagination-left { transform: rotate(135deg); } #testimonials-wrapper .pagination-right, #solutions .pagination-right { transform: rotate(-45deg); } #testimonials-wrapper .pagi { top: 60px; } #solutions .pagi { top: unset; z-index: 10; } #solutions .pagination-left { left: 12%; } #solutions .pagination-right { right: 12%; } #testimonials-wrapper .pagination-left { left: 60px; } #testimonials-wrapper .pagination-right { right: 60px; } .testimonial { text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; margin: 0px auto; opacity: 0; transform: scale(0.95); transform-origin: top; transition: opacity 0.25s ease, transform 0.25s ease; max-width: 800px; padding: 0 60px; } .showMonial { display: block; opacity: 1; transform: scale(1); } .quote { font-weight: 100; font-size: 1.2em; line-height: 1.66; color: rgb(0, 0, 0); text-align: center; margin: 20px 0px 20px 0px; } .attribution { display: flex; flex-direction: column; align-items: center; } .person, .personName, .companyName { display: inline-block; width: 100%; text-align: center; } .personImg { width: 75px; height: 75px; border-radius: 100px; background-position: center center; background-size: cover; filter: contrast(1.5); background-color: grey; } #imgperson1 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/jason_giles.jpg); } #imgperson2 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/team/jeffp.jpg); } #imgperson3 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/ed_kaminsky.webp); } #imgperson4 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/Lauren-Bowen.webp); } #imgperson5 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/nathan_butrick.webp); } #imgperson6 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/george_laughton.webp); } #imgperson7 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/abel_gilbert.webp); } #imgperson8 { background-image: linear-gradient(231deg, #16febfa6 0.37%, #338ff085 48.45%, #a328ffc7 93.73%), url(../assets/images/quotes/jeff_dana.webp); } .personName { font-weight: 600; margin: 8px 0 -6px 0; color: var(--color-text-primary); } .companyName { font-size: 14px; line-height: 150%; padding-top: 2px; color: #666; } /* ============================================ */ /* FEATURED PARTNERS */ /* ============================================ */ /* Partner logos grid — 24-col canvas like CRM grid */ .partner-logos-grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: auto; gap: 20px; max-width: 1100px; margin: 30px auto 40px auto; padding: 0; align-items: center; } .partner-cell { display: flex; align-items: center; justify-content: center; padding: 10px; } .partner-cell img { width: 100%; height: auto; max-height: 80px; object-fit: contain; opacity: 0.5; filter: grayscale(100%); transition: opacity 0.3s, filter 0.3s; } .partner-cell img:hover { opacity: 1; filter: grayscale(0%); } /* Row 1: 5 partners evenly across 24 cols (each ~4.8 cols, use 4 col spans with gaps) */ .partner-cell:nth-child(1) { grid-column: 1 / 5; grid-row: 1; } .partner-cell:nth-child(2) { grid-column: 6 / 10; grid-row: 1; } .partner-cell:nth-child(3) { grid-column: 11 / 15; grid-row: 1; } .partner-cell:nth-child(4) { grid-column: 16 / 20; grid-row: 1; } .partner-cell:nth-child(5) { grid-column: 21 / 25; grid-row: 1; } /* Row 2 */ .partner-cell:nth-child(6) { grid-column: 1 / 5; grid-row: 2; } .partner-cell:nth-child(7) { grid-column: 6 / 10; grid-row: 2; } .partner-cell:nth-child(8) { grid-column: 11 / 15; grid-row: 2; } .partner-cell:nth-child(9) { grid-column: 16 / 20; grid-row: 2; } .partner-cell:nth-child(10) { grid-column: 21 / 25; grid-row: 2; } /* Row 3 */ .partner-cell:nth-child(11) { grid-column: 1 / 5; grid-row: 3; } .partner-cell:nth-child(12) { grid-column: 6 / 10; grid-row: 3; } .partner-cell:nth-child(13) { grid-column: 11 / 15; grid-row: 3; } .partner-cell:nth-child(14) { grid-column: 16 / 20; grid-row: 3; } .partner-cell:nth-child(15) { grid-column: 21 / 25; grid-row: 3; } @media (max-width: 768px) { .partner-logos-grid { grid-template-columns: repeat(12, 1fr); } .partner-cell:nth-child(1), .partner-cell:nth-child(4), .partner-cell:nth-child(7), .partner-cell:nth-child(10), .partner-cell:nth-child(13) { grid-column: 1 / 5; } .partner-cell:nth-child(2), .partner-cell:nth-child(5), .partner-cell:nth-child(8), .partner-cell:nth-child(11), .partner-cell:nth-child(14) { grid-column: 5 / 9; } .partner-cell:nth-child(3), .partner-cell:nth-child(6), .partner-cell:nth-child(9), .partner-cell:nth-child(12), .partner-cell:nth-child(15) { grid-column: 9 / 13; } .partner-cell:nth-child(1), .partner-cell:nth-child(2), .partner-cell:nth-child(3) { grid-row: 1; } .partner-cell:nth-child(4), .partner-cell:nth-child(5), .partner-cell:nth-child(6) { grid-row: 2; } .partner-cell:nth-child(7), .partner-cell:nth-child(8), .partner-cell:nth-child(9) { grid-row: 3; } .partner-cell:nth-child(10), .partner-cell:nth-child(11), .partner-cell:nth-child(12) { grid-row: 4; } .partner-cell:nth-child(13), .partner-cell:nth-child(14), .partner-cell:nth-child(15) { grid-row: 5; } } @media (max-width: 430px) { .partner-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .partner-cell { grid-column: span 1 !important; grid-row: auto !important; } } /* ============================================ */ /* PACKAGES / HUBSPOT FORM */ /* ============================================ */ #section-packages { padding: 60px 5%; text-align: center; background-color: #A328FF; color: white; } #tieroverflow { width: 75%; text-align: center; margin: 34px auto 0px auto; } #solutions h2 { color: white; padding: 0 0 20px 0; } #section-packages h2, #section-footer h2 { color: white; } .salesbtn { padding: 12px 16px; border-radius: 24px; background: linear-gradient(231deg, #16FEBF 0.37%, #338FF0 48.45%, #A328FF 93.73%), #FFF; margin: 36px auto; display: block; text-align: center; color: white; font-weight: 600; width: max-content; box-shadow: 0 0 24px rgba(0, 0, 0, 0.25), inset 0 0 5px rgba(0, 0, 0, 0.1); cursor: pointer; opacity: 1; transition: opacity .2s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .salesbtn:hover { opacity: .6; } /* v2: form inside white card on /book-a-demo */ .hbspt-form { width: 100%; max-width: 520px; } .hbspt-form label { color: var(--color-text-primary) !important; font-size: var(--text-sm) !important; font-family: var(--font-family) !important; font-weight: var(--font-weight-semibold) !important; margin-bottom: var(--space-4) !important; } /* v1 legacy: form on purple background (old packages section) */ #section-packages .hbspt-form { max-width: 448px; margin: 40px auto; background: rgba(134, 0, 233, 1.0); padding: 50px 42px 50px 50px; border-radius: 36px; } #section-packages .hbspt-form label { color: white !important; } /* ============================================ */ /* BREADCRUMBS */ /* ============================================ */ .help-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: 0; margin: 0; list-style: none; } .help-breadcrumb li { display: inline-flex; align-items: center; color: var(--color-neutral-400); font: var(--label-md); } .help-breadcrumb li + li::before { content: ""; display: inline-flex; width: 7px; height: 7px; margin-right: var(--space-8); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .help-breadcrumb a { color: inherit; text-decoration: none; } .help-breadcrumb a:hover, .help-breadcrumb a:focus-visible { color: var(--color-violet-dark); text-decoration: underline; } .help-breadcrumb [aria-current="page"] { color: var(--color-neutral-400); } /* ============================================ */ /* ABOUT PAGE */ /* ============================================ */ .about-page, .about-page + .homepage-faq { --about-snake-cloud: var(--color-surface-secondary); --about-snake-founders: #9B26F9; --about-snake-horn-width: clamp(78px, 14.9vw, 118px); --about-snake-horn-height: clamp(58px, 11vw, 87px); --about-snake-corner: clamp(64px, 6.3vw, 90px); } .about-page { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 36%, rgba(247, 249, 255, 0.42) 100%), url("/assets/images/book-a-demo/book-a-demo-background.webp") center top / 100% auto no-repeat, var(--color-surface-primary); } @media (max-width: 920px) { .about-page { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 36%, rgba(247, 249, 255, 0.42) 100%), url("/assets/images/book-a-demo/book-a-demo-background-1280.webp") center top / 100% auto no-repeat, var(--color-surface-primary); } } .about-page .prose-sm { max-width: 745px; color: var(--color-text-primary); font-family: var(--font-family); font-size: 20px; font-weight: var(--font-weight-regular); line-height: 1.63; } .about-page .prose-sm p { margin: 0; } .about-page .prose-sm p + p { margin-top: var(--space-28); } .about-page .prose-sm a { color: var(--color-violet); font-weight: var(--font-weight-bold); text-decoration: none; } .about-page .prose-sm a:hover { text-decoration: underline; } .about-page__breadcrumb { padding-top: calc(var(--nav-height, 8px) + var(--space-32)); padding-bottom: var(--space-16); } /* ── Hero ───────────────────────────────────── */ .about-hero { position: relative; min-height: 238px; padding: var(--space-56) 0 var(--space-48); overflow: hidden; background: transparent; } .about-hero__inner { max-width: var(--container-lg); padding-right: 0; } .about-hero h1, .about-hero__title { display: block; width: min(calc(100vw - (var(--screen-margin) * 2)), 745px); max-width: 100%; margin: 0 0 var(--space-32); color: var(--color-text-primary); font: var(--display-sm); } .about-hero__headline-gradient { display: inline-block; color: var(--color-blue); background: linear-gradient(90deg, #a328ff 0%, #338ff0 58%, #16febe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .about-hero p { width: auto; max-width: 100%; margin: 0; color: var(--color-text-primary); font: inherit; } /* ── Origin story ───────────────────────────── */ .about-story { position: relative; z-index: 31; padding: var(--space-16) 0 var(--space-48); background: transparent; } .about-story__layout { display: block; max-width: var(--container-lg); } .about-story__body { display: block; } .about-founders__kicker { margin: 0; color: var(--color-violet-dark); font: var(--label-md); text-transform: uppercase; } .about-story__title { margin: 0 0 var(--space-32); color: var(--color-text-primary); font: var(--headline-md); } .about-story__body p:not(.about-story__kicker) { color: var(--color-text-primary); font: inherit; } /* ── About snake seams ──────────────────────── The About page uses alternating full-width surfaces. Each section owns its surface; pseudo-elements only paint the adjacent-surface horns so the connection can be replaced later without touching section content. */ .about-founders, .about-history, .about-page + .homepage-faq { position: relative; isolation: isolate; overflow: visible; } .about-page + .homepage-faq { z-index: 32; margin-top: -1px; padding-top: var(--space-72); padding-bottom: calc(142px + var(--space-96)); background-color: var(--about-snake-cloud); border-radius: 0; box-shadow: 0 -1px 0 var(--about-snake-cloud); } .about-page + .homepage-faq::before { display: none; } .about-page + .homepage-faq::after { display: none; } /* ── Founders grid ──────────────────────────── */ .about-founders { margin-top: -1px; z-index: 30; padding: var(--space-120) 0 var(--space-160); background-color: var(--about-snake-founders); background-image: linear-gradient(rgba(155, 38, 249, 0.96), rgba(155, 38, 249, 0.92)), url("/assets/images/about/about-founder-surface-6bad19.png"); background-size: cover; background-position: center center; background-blend-mode: normal; border-radius: var(--about-snake-corner) 0 0 0; box-shadow: inset 0 2px 0 var(--about-snake-founders); color: var(--color-surface-primary); } .about-page + .homepage-faq + .site-footer { z-index: 33; } .about-page + .site-footer { z-index: 33; } /* ── History section ───────────────────────── */ .about-history { z-index: 31; margin-top: -2px; padding: var(--space-120) 0 calc(142px + var(--space-96)); background: linear-gradient(180deg, rgba(247, 249, 255, 0.96), rgba(247, 249, 255, 0.9)), url("/assets/images/book-a-demo/book-a-demo-background.webp") center bottom / cover no-repeat, var(--about-snake-cloud); border-radius: var(--about-snake-corner) 0 0 0; } .about-history::before { content: ""; position: absolute; z-index: 2; top: calc(var(--about-snake-horn-height) * -1); right: 0; width: var(--about-snake-horn-width); height: calc(var(--about-snake-horn-height) + 2px); background: var(--about-snake-cloud); -webkit-mask: url("/assets/images/homepage/press-swoosh-top.svg") center / 100% 100% no-repeat; mask: url("/assets/images/homepage/press-swoosh-top.svg") center / 100% 100% no-repeat; pointer-events: none; transform: scaleX(1); } .about-history::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: var(--about-snake-horn-width); height: var(--about-snake-horn-height); background: #a338f9; -webkit-mask: url("/assets/images/homepage/press-swoosh-bottom.svg") center / 100% 100% no-repeat; mask: url("/assets/images/homepage/press-swoosh-bottom.svg") center / 100% 100% no-repeat; pointer-events: none; } .about-history__inner { max-width: var(--container-lg); } .about-history h2 { max-width: 745px; margin: 0 0 var(--space-24); color: var(--color-text-primary); font: var(--headline-md); } .about-history__body { color: var(--color-text-secondary); } .about-history__body p { color: inherit; } .about-history__cta { margin-top: var(--space-32); } .about-founders > .container { position: relative; z-index: 3; } .about-founders::before { content: ""; position: absolute; z-index: 2; top: calc(var(--about-snake-horn-height) * -1); right: 0; width: var(--about-snake-horn-width); height: calc(var(--about-snake-horn-height) + 2px); background: #9B26F9; -webkit-mask: url("/assets/images/homepage/press-swoosh-top.svg") center / 100% 100% no-repeat; mask: url("/assets/images/homepage/press-swoosh-top.svg") center / 100% 100% no-repeat; pointer-events: none; } .about-founders::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: var(--about-snake-horn-width); height: var(--about-snake-horn-height); background: var(--about-snake-cloud); -webkit-mask: url("/assets/images/homepage/press-swoosh-bottom.svg") center / 100% 100% no-repeat; mask: url("/assets/images/homepage/press-swoosh-bottom.svg") center / 100% 100% no-repeat; pointer-events: none; } .about-founders__header { display: grid; gap: var(--space-8); margin-bottom: var(--space-32); } .about-founders__header h2 { margin: 0; color: var(--color-surface-primary); font: var(--headline-lg); } .about-founders__intro { max-width: 745px; margin: 0; color: rgba(255, 255, 255, 0.88); font: var(--body-md); } .about-founders__kicker { color: var(--color-green); } .about-founders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); } .about-founders .hw-person-card { min-height: 720px; margin-bottom: 0; padding: var(--space-32) var(--space-24) 0; align-items: stretch; overflow: hidden; text-align: left; background: #4a0182; border-color: transparent; border-radius: 16px; box-shadow: 0 4px 42px rgba(0, 0, 0, 0.1), inset 0 7px 0 var(--color-green); } .about-founders .hw-person-card__name, .about-founders .hw-person-card__bio { color: var(--color-surface-primary); } .about-founders .hw-person-card__credential, .about-founders .hw-person-card__linkedin { color: var(--color-green); } .about-founders .hw-person-card__name { font: var(--title-lg); } .about-founders .hw-person-card__role { color: rgba(255, 255, 255, 0.72); font: var(--body-lg); margin-top: var(--space-4); } .about-founders .hw-person-card__bio { margin-top: var(--space-16); font: var(--body-md); } .about-founders .hw-person-card__linkedin { margin-top: var(--space-16); font: var(--label-md); align-self: flex-start; width: max-content; max-width: 100%; } .about-founders .hw-person-card__linkedin:hover, .about-founders .hw-person-card__linkedin:focus-visible { color: #75f7df; } .about-founders .hw-person-card__linkedin .material-symbols-rounded, .about-founders .hw-person-card__linkedin .material-symbol-svg { width: 16px; height: 16px; font-size: 16px; line-height: 1; } .about-founders .hw-person-card__photo { position: relative; right: auto; bottom: auto; left: auto; width: min(74%, 230px); height: 236px; margin: auto calc(var(--space-8) * -1) 0 auto; transform: none; overflow: visible; border-radius: 0; } .about-founders .hw-person-card__photo img { width: 102%; height: 130%; object-fit: contain; object-position: bottom right; transform: translate(10px, -64px); } #spencer-photo { height: min(91%, 218px) !important; width: min(83%, 238px); transform: translate(10px, -4px); } @media (max-width: 992px) { .about-story__layout { max-width: var(--container-lg); } .about-founders-grid { grid-template-columns: repeat(2, 1fr); } .about-founders .hw-person-card { min-height: 700px; } } @media (min-width: 993px) and (max-width: 1180px) { .about-page, .about-page + .homepage-faq { --about-snake-corner: 72px; } .about-story__layout { max-width: var(--container-lg); } } @media (max-width: 768px) { .about-page, .about-page + .homepage-faq { --about-snake-horn-width: 58px; --about-snake-horn-height: 43px; --about-snake-corner: 52px; } .about-page__breadcrumb { padding-top: var(--space-24); padding-bottom: var(--space-8); } .about-hero { min-height: 0; padding: var(--space-32) 0 var(--space-40); } .about-hero__inner { padding-right: 0; } .about-hero h1, .about-hero__title { width: auto; font: var(--headline-lg); } .about-hero p { width: auto; } .about-story { padding: var(--space-24) 0 var(--space-72); } .about-page + .homepage-faq { margin-top: -1px; padding-top: var(--space-56); padding-bottom: calc(142px + var(--space-72)); border-radius: 0; } .about-founders { margin-top: -1px; padding: var(--space-120) 0 var(--space-120); } .about-founders-grid { grid-template-columns: 1fr; gap: var(--space-24); justify-items: center; } .about-founders .hw-person-card { width: min(100%, 640px); min-height: 660px; } .about-history { padding: var(--space-96) 0 calc(142px + var(--space-72)); } } @media (max-width: 480px) { .about-page, .about-page + .homepage-faq { --about-snake-horn-width: 42px; --about-snake-horn-height: 31px; --about-snake-corner: 40px; } .about-page .prose-sm { font-size: 20px; } .about-founders .hw-person-card__photo { width: min(74%, 236px); height: 228px; } } /* ============================================ */ /* IN THE NEWS PAGE */ /* ============================================ */ .news-page { --news-footer-overlap: 142px; background: var(--color-surface-primary); } .news-page__breadcrumb { max-width: calc(var(--page-rail) + (var(--section-padding-x) * 2)); padding-top: var(--space-24); padding-bottom: var(--space-12); } .news-hero { position: relative; padding: var(--space-24) 0 var(--space-20); overflow: hidden; background: transparent; } .news-hero__inner { max-width: calc(var(--page-rail) + (var(--section-padding-x) * 2)); } .news-hero h1, .news-hero__title { display: block; margin: 0 0 var(--space-16); color: var(--color-text-primary); font: var(--display-sm); } .news-hero p { max-width: none; margin: 0; color: var(--color-text-secondary); font: var(--body-lg); } .news-listing { padding: var(--space-40) 0 var(--space-88, 88px); } .news-listing + .news-listing { padding-top: 0; } .news-listing:last-of-type { padding-bottom: calc(var(--space-96) + var(--news-footer-overlap)); } .news-listing > .container { max-width: calc(var(--page-rail) + (var(--section-padding-x) * 2)); } .news-section__header { max-width: 720px; margin: 0 0 var(--space-24); } .news-section__title { margin: 0 0 var(--space-8); color: var(--color-text-primary); font: var(--headline-sm); } .news-section__description { margin: 0; color: var(--color-text-secondary); font: var(--body-md); } .news-listing__list { display: flex; flex-direction: column; } .news-list-item { display: grid; grid-template-columns: 198px minmax(0, 1fr); gap: var(--space-20); align-items: start; min-width: 0; padding: var(--space-24); border-bottom: 1px solid var(--color-border-subtle); background: transparent; color: inherit; } .news-list-item--press-release { border: 2px solid transparent; border-radius: 10px; background: linear-gradient(var(--color-surface-primary), var(--color-surface-primary)) padding-box, linear-gradient(224deg, #16FEBF 0%, #338FF0 49%, #A328FF 94%) border-box; box-shadow: none; } .news-list-item__media { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 198 / 140; padding: var(--space-24); border-radius: var(--radius-xs, 4px); background: var(--color-surface-secondary); text-decoration: none; transition: background-color var(--duration-fast) ease; } .news-list-item__media:hover, .news-list-item__media:focus-visible { background: #FCF8FF; text-decoration: none; } .news-list-item__media--brand { background: #F7F9FF; } .news-list-item__media img { display: block; width: auto; max-width: 82%; max-height: 72px; object-fit: contain; } .news-list-item__media--brand img { max-width: 70%; max-height: 54px; } .news-list-item__media-label { color: var(--color-text-secondary); font: var(--title-sm); text-align: center; } .news-list-item__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 575px; min-width: 0; min-height: 140px; gap: var(--space-6); padding: 0; text-align: left; } .news-list-item__title { color: var(--color-text-primary); font: var(--title-lg); font-weight: var(--font-weight-regular); text-decoration: none; transition: color var(--duration-fast) ease; line-height: 1.5; } .news-list-item__meta { color: var(--color-text-tertiary); font: var(--label-md); } .news-list-item__cta { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: auto; color: var(--color-violet); font: var(--label-lg); text-decoration: none; transition: color var(--duration-fast) ease; } .news-list-item__title:hover, .news-list-item__title:focus-visible, .news-list-item__cta:hover, .news-list-item__cta:focus-visible { color: var(--color-violet-dark); text-decoration: none; } .news-list-item__media:focus-visible, .news-list-item__title:focus-visible, .news-list-item__cta:focus-visible { outline: 2px solid var(--color-border-interactive); outline-offset: 4px; border-radius: 2px; } .news-list-item__cta-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; } @media (max-width: 768px) { .news-page__breadcrumb { padding-top: var(--space-24); padding-bottom: var(--space-12); } .news-hero { padding: var(--space-24) 0 var(--space-20); } .news-hero h1, .news-hero__title { font: var(--headline-lg); } .news-listing { padding: var(--space-32) 0 var(--space-56); } .news-listing:last-of-type { padding-bottom: calc(var(--space-72) + var(--news-footer-overlap)); } .news-section__header { margin-bottom: var(--space-24); } .news-list-item { grid-template-columns: clamp(104px, 24vw, 160px) minmax(0, 1fr); gap: var(--space-16); padding: var(--space-20) 0; } .news-list-item--press-release { padding-right: 12px; padding-left: 12px; } .news-list-item__media { padding: var(--space-16); } .news-list-item__content { min-height: 0; } .news-list-item__title { font: var(--title-md); } } @media (max-width: 640px) { .news-list-item { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-12); } .news-list-item__media { padding: var(--space-8); } .news-list-item__media img { max-height: 40px; } .news-list-item__cta { font: var(--label-md); } } /* ============================================ */ /* PRESS RELEASE DETAIL */ /* ============================================ */ .press-release-page { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 255, 0.7) 100%), var(--color-surface-primary); } .press-release-page__breadcrumb { padding-top: calc(var(--nav-height, 8px) + var(--space-32)); padding-bottom: var(--space-16); } .press-release-article { padding: var(--space-48) 0 calc(142px + var(--space-96)); } .press-release-article__inner { max-width: 820px; } .press-release__timing { margin: 0 0 var(--space-8); color: var(--color-violet-dark); text-transform: uppercase; } .press-release__date { margin: 0 0 var(--space-24); color: var(--color-text-secondary); } .press-release__title { max-width: 790px; margin: 0; color: var(--color-text-primary); overflow-wrap: anywhere; } .press-release__subheadline { max-width: 740px; margin: var(--space-24) 0 0; color: var(--color-text-secondary); } .press-release__dateline { margin: var(--space-32) 0 0; color: var(--color-text-primary); text-transform: uppercase; } .press-release__body, .press-release__about-body, .press-release__contact { color: var(--color-text-primary); } .press-release__body { margin-top: var(--space-24); } .press-release__body > * { margin: 0; } .press-release__body > * + *, .press-release__about-body > * + * { margin-top: var(--space-24); } .press-release__body a, .press-release__about-body a, .press-release__contact a { color: var(--color-violet); font-weight: var(--font-weight-bold); text-decoration: none; overflow-wrap: anywhere; } .press-release__body a:hover, .press-release__about-body a:hover, .press-release__contact a:hover { text-decoration: underline; } .press-release__quotes { margin-top: var(--space-48); } .press-release-quote { margin: 0; padding: var(--space-8) 0 var(--space-8) var(--space-24); border-left: 3px solid var(--color-violet); } .press-release-quote + .press-release-quote { margin-top: var(--space-32); } .press-release-quote blockquote { margin: 0; } .press-release-quote p { margin: 0; color: var(--color-text-primary); } .press-release-quote figcaption { margin-top: var(--space-16); color: var(--color-text-secondary); } .press-release__about, .press-release__contact { margin-top: var(--space-56); padding-top: var(--space-32); border-top: 1px solid var(--color-neutral-200); } .press-release__about h2, .press-release__contact h2 { margin: 0 0 var(--space-16); color: var(--color-text-primary); } .press-release__about-body > *:first-child, .press-release__contact p { margin-top: 0; } .press-release__contact p { margin-bottom: 0; } .press-release__end-marker { margin: var(--space-48) 0 0; color: var(--color-text-secondary); text-align: center; } @media (max-width: 768px) { .press-release-page__breadcrumb { padding-top: calc(var(--nav-height, 8px) + var(--space-24)); padding-bottom: var(--space-8); } .press-release-article { padding: var(--space-32) 0 calc(120px + var(--space-64)); } .press-release-quote { padding-left: var(--space-16); } } /* ============================================ */ /* BOOK A DEMO PAGE */ /* ============================================ */ .demo-page { background: url("/assets/images/book-a-demo/book-a-demo-background.webp") center top / 100% auto no-repeat, var(--color-surface-primary); } @media (max-width: 920px) { .demo-page { background: url("/assets/images/book-a-demo/book-a-demo-background-1280.webp") center top / 100% auto no-repeat, var(--color-surface-primary); } } .demo-page#main-content { --demo-footer-overlap: 142px; --demo-page-horn-width: clamp(78px, 14.9vw, 118px); --demo-page-horn-height: clamp(58px, 11vw, 87px); position: relative; z-index: 2; overflow: visible; } .demo-page#main-content::after { content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; width: var(--demo-page-horn-width); height: var(--demo-page-horn-height); background: var(--color-surface-secondary); -webkit-mask: url('/assets/images/homepage/press-swoosh-bottom.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-bottom.svg') center / 100% 100% no-repeat; pointer-events: none; transform-origin: bottom left; transform: rotate(270deg) translateY(100%); } .demo-hero { min-height: 336px; padding-top: calc(var(--nav-height, 34px) + var(--space-48)); padding-bottom: var(--space-64); background: transparent; } .demo-hero__eyebrow { margin: 0 0 var(--space-8); color: var(--color-text-primary); font: var(--font-weight-bold) var(--font-size-body-md)/var(--line-height-body-md) var(--font-family); } .demo-hero h1, .demo-hero__title { display: block; margin: 0 0 var(--space-16); color: var(--color-text-primary); font: var(--display-sm); } .demo-hero h1 span, .demo-hero__title span { display: block; } .demo-hero h1 span:first-child, .demo-hero__title span:first-child { width: fit-content; max-width: 100%; color: var(--color-blue); background: linear-gradient(90deg, #a328ff 0%, #338ff0 58%, #16febe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .demo-hero p { margin: 0; color: var(--color-text-secondary); font: var(--body-lg); } .demo-conversion { padding: 0 0 calc(var(--space-96) + var(--demo-footer-overlap)); background: transparent; } .demo-conversion__layout { display: grid; grid-template-columns: minmax(0, 673px) minmax(320px, 360px); gap: var(--space-48); align-items: start; margin-top: calc(var(--space-64) * -1); } .demo-form-panel { display: grid; gap: var(--space-32); padding: var(--space-48) var(--space-56) var(--space-56); border: 4px solid var(--color-green); border-radius: 16px; background: linear-gradient(148deg, rgba(74, 1, 130, 0.9) 0%, rgba(74, 1, 130, 1) 90%); box-shadow: var(--shadow-card); color: var(--color-surface-primary); } .demo-form-panel__header { display: grid; gap: var(--space-12); } .demo-form-panel__header h2, .demo-form-panel__header h3 { margin: 0; color: var(--color-surface-primary); font: var(--headline-md); } .demo-form-panel__header p { margin: 0; color: var(--color-green); font: var(--body-lg); } .demo-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-40); } .demo-form-field--full { grid-column: 1 / -1; } .demo-hubspot-form { min-height: 0; } .demo-hubspot-form:empty { min-height: 420px; } .demo-form-panel .hw-label { color: var(--color-surface-primary); } .demo-form-panel .hw-field__instruction, .demo-form-panel .hw-help { color: rgba(255, 255, 255, 0.72); } .demo-form-panel .hw-input { background: var(--color-surface-primary); } .demo-form-panel .hw-textarea { background: var(--color-surface-primary); } .demo-form-panel .hw-btn { justify-self: stretch; } #hubspot-form-container form { display: grid; gap: var(--space-16); } #hubspot-form-container fieldset { display: grid !important; gap: var(--space-16) var(--space-40); width: 100% !important; max-width: none !important; } #hubspot-form-container .form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #hubspot-form-container .form-columns-1 { grid-template-columns: 1fr; } #hubspot-form-container .hs-form-field { width: 100% !important; margin: 0; float: none !important; } #hubspot-form-container label { display: block; margin-bottom: var(--space-4); color: var(--color-surface-primary) !important; font: var(--label-md); } #hubspot-form-container label span, #hubspot-form-container legend, #hubspot-form-container .hs-form-field > label, #hubspot-form-container .hs-form-field > label span { color: var(--color-surface-primary) !important; } #hubspot-form-container .hs-form-required { color: var(--color-background-warning) !important; } #hubspot-form-container .hs-field-desc { margin: var(--space-4) 0 var(--space-8) !important; color: rgba(255, 255, 255, 0.72) !important; font: var(--label-md) !important; } #hubspot-form-container .hs-input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--color-border-subtle); border-radius: 6px; background: var(--color-surface-primary); color: var(--color-text-primary); font: var(--body-md); } #hubspot-form-container .hs-input.error, #hubspot-form-container .hs-input.invalid, #hubspot-form-container .hs-form-field.error .hs-input, #hubspot-form-container .hs-form-field.invalid .hs-input, #hubspot-form-container input[aria-invalid="true"], #hubspot-form-container select[aria-invalid="true"], #hubspot-form-container textarea[aria-invalid="true"] { border-color: #f36b5c !important; background: #fff0ed !important; box-shadow: 0 0 0 3px rgba(243, 107, 92, 0.22) !important; } #hubspot-form-container .hs-input.error:focus, #hubspot-form-container .hs-input.invalid:focus, #hubspot-form-container input[aria-invalid="true"]:focus, #hubspot-form-container select[aria-invalid="true"]:focus, #hubspot-form-container textarea[aria-invalid="true"]:focus { border-color: #ff7a66 !important; box-shadow: 0 0 0 3px rgba(243, 107, 92, 0.28), 0 0 0 1px rgba(74, 1, 130, 0.12) inset !important; outline: 0 !important; } #hubspot-form-container textarea.hs-input { min-height: 96px; resize: vertical; } #hubspot-form-container .hs-error-msgs { padding: 0; margin: var(--space-8) 0 0; list-style: none; color: var(--color-error, #e11900); font: var(--label-sm); } #hubspot-form-container .hs-error-msgs label, #hubspot-form-container .hs-error-msg { color: #ffd4cc !important; font: var(--font-weight-bold) var(--font-size-label-sm)/var(--line-height-label-sm) var(--font-family) !important; } #hubspot-form-container .submitted-message, #hubspot-form-container .submitted-message h4, #hubspot-form-container .submitted-message span { max-width: 100% !important; color: var(--color-surface-primary) !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } #hubspot-form-container .submitted-message { display: block !important; padding: 0 !important; margin: 0 !important; } #hubspot-form-container .submitted-message h4 { margin: 0 !important; font: var(--font-weight-bold) var(--font-size-title-md)/var(--line-height-title-md) var(--font-family) !important; letter-spacing: 0 !important; } #hubspot-form-container .hs-submit { display: grid; justify-items: stretch; margin-top: var(--space-8); } #hubspot-form-container .actions { display: grid !important; } #hubspot-form-container .hs-button, #hubspot-form-container .hs-button.primary, #hubspot-form-container input.hs-button, #hubspot-form-container input.hs-button.primary, #hubspot-form-container input[type="submit"] { -webkit-appearance: none !important; appearance: none !important; min-height: 52px !important; width: 100% !important; padding: var(--space-16) var(--space-24) !important; border: 0 !important; border-radius: var(--radius-sm) !important; outline: 0 !important; background: var(--gradient-brand) !important; color: var(--color-surface-primary) !important; cursor: pointer !important; font: var(--font-weight-bold) var(--font-size-body-md)/var(--line-height-body-md) var(--font-family) !important; text-shadow: none !important; box-shadow: 0 2px 6px rgba(163, 40, 255, 0.2) !important; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1), filter 220ms cubic-bezier(0.2, 0, 0, 1) !important; } #hubspot-form-container .hs-button:hover, #hubspot-form-container .hs-button.primary:hover, #hubspot-form-container input.hs-button:hover, #hubspot-form-container input.hs-button.primary:hover, #hubspot-form-container input[type="submit"]:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 20px rgba(110, 44, 210, 0.22) !important; } #hubspot-form-container .hs-button:active, #hubspot-form-container .hs-button.primary:active, #hubspot-form-container input.hs-button:active, #hubspot-form-container input.hs-button.primary:active, #hubspot-form-container input[type="submit"]:active { transform: translateY(0) scale(0.985) !important; box-shadow: 0 2px 8px rgba(110, 44, 210, 0.18) !important; } #hubspot-form-container .hs-richtext, #hubspot-form-container .legal-consent-container { color: rgba(255, 255, 255, 0.72); font: var(--label-sm); } #hubspot-form-container .legal-consent-container .inputs-list { padding: 0 !important; margin: var(--space-12) 0 0 !important; list-style: none !important; } #hubspot-form-container .legal-consent-container .inputs-list > li { margin: 0 !important; } #hubspot-form-container .legal-consent-container .hs-form-booleancheckbox-display, #hubspot-form-container .legal-consent-container .hs-form-checkbox-display { display: grid !important; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--space-12); margin: 0 !important; color: var(--color-surface-primary) !important; font: var(--font-weight-bold) var(--font-size-label-md)/var(--line-height-label-md) var(--font-family) !important; } #hubspot-form-container .legal-consent-container .hs-form-booleancheckbox-display > span, #hubspot-form-container .legal-consent-container .hs-form-checkbox-display > span { margin: 0 !important; } .hw-is-safari #hubspot-form-container .legal-consent-container .hs-form-booleancheckbox-display { position: relative; display: block !important; min-height: 24px; padding-left: 34px; } .hw-is-safari #hubspot-form-container .legal-consent-container .hs-form-booleancheckbox-display > span { display: block; margin: 0 !important; float: none; } .hw-is-safari #hubspot-form-container .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"] { position: absolute !important; left: 0; top: 1px; } #hubspot-form-container .legal-consent-container input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; display: grid !important; place-content: center !important; width: 22px !important; height: 22px !important; min-height: 22px !important; margin: 0 !important; border: 2px solid var(--color-surface-primary) !important; border-radius: 3px !important; background: var(--color-surface-primary) !important; cursor: pointer !important; } #hubspot-form-container .legal-consent-container input[type="checkbox"]::before { content: "" !important; width: 10px !important; height: 10px !important; border-radius: 2px !important; background: #4a0182 !important; transform: scale(0) !important; transition: transform 140ms ease !important; } #hubspot-form-container .legal-consent-container input[type="checkbox"]:checked::before { transform: scale(1) !important; } #hubspot-form-container .legal-consent-container input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-green) !important; outline-offset: 3px !important; } .demo-proof-card { --hw-proof-display-card-max-width: 444px; --demo-proof-label-gradient: linear-gradient(90deg, #A328FF 0%, #338FF0 100%); align-self: start; justify-self: stretch; margin-top: -150px; } .demo-proof-card__list { --hw-proof-display-item-gap: var(--space-6); gap: 0; } .demo-proof-card .hw-proof-display__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-24) 0; text-align: center; } .demo-proof-card .hw-proof-display__item + .hw-proof-display__item { border-top: 0; } .demo-proof-card .hw-proof-display__item + .hw-proof-display__item::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: #eeeeee; } .demo-proof-card .hw-proof-display__item:first-child { padding-top: 0; } .demo-proof-card .hw-proof-display__item:last-child { padding-bottom: 0; } .demo-proof-card .hw-proof-display__title { display: grid; gap: var(--space-0); min-width: 0; } .demo-proof-card .hw-proof-display__value { justify-self: center; color: var(--color-neutral-900); font: var(--headline-md); text-align: center; line-height: 24px; } .demo-proof-card .hw-proof-display__label { max-width: none; color: var(--color-neutral-900); font: var(--title-lg); margin-top: 6px; } @supports (background-clip: text) or (-webkit-background-clip: text) { .demo-proof-card .hw-proof-display__label { background-image: var(--demo-proof-label-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } .demo-proof-card .hw-proof-display__description { margin: 0; color: var(--color-text-secondary); font: var(--body-sm); text-align: center; } @media (max-width: 900px) { .demo-hero { min-height: auto; padding-top: calc(var(--nav-height, 64px) + var(--space-16)); padding-bottom: var(--space-48); } .demo-conversion__layout { grid-template-columns: 1fr; margin-top: 0; } .demo-conversion { padding-bottom: calc(var(--space-72) + var(--demo-footer-overlap)); } .demo-proof-card { max-width: none; margin-top: 0; } } @media (max-width: 768px) { .demo-hero { padding-top: calc(var(--nav-height, 64px) + var(--space-12)); padding-bottom: var(--space-40); } .demo-hero h1, .demo-hero__title { font: var(--headline-lg); } .demo-form-panel { padding: var(--space-32) var(--space-24) var(--space-40); } .demo-form-grid, #hubspot-form-container .form-columns-2 { grid-template-columns: 1fr; } .demo-hubspot-form:empty { min-height: 560px; } } /* ============================================ */ /* 404 PAGE */ /* ============================================ */ body.not-found-body { --site-page-background: #FFFFFF; --site-page-background-image: none; } body.not-found-body .not-found-page { padding-top: 0; background: #FFFFFF; } .not-found-hero { min-height: 755px; padding: calc(var(--announcement-banner-offset) + 223px) 0 170px; overflow: hidden; } .not-found-hero__rail { display: grid; grid-template-columns: minmax(0, 550px) minmax(180px, 259px); align-items: start; justify-content: space-between; gap: 72px; margin-bottom: calc(var(--space-120) + var(--space-4)); } .not-found-hero__copy { display: grid; gap: 48px; justify-items: start; } .not-found-hero__title { margin: 0; max-width: 550px; color: #181C20; font: var(--display-md); letter-spacing: 0; } .not-found-hero__title-emphasis, .not-found-hero__title-rest { display: inline; } .not-found-hero__title-emphasis { font-weight: var(--font-weight-bold); } .not-found-hero__title-rest { font-weight: var(--font-weight-regular); } .not-found-hero__code { margin: 0; color: #626262; font: var(--body-lg); font-weight: var(--font-weight-regular); } .not-found-hero__home-link { display: inline-flex; align-items: center; min-height: 44px; color: #A328FF; font: var(--body-lg); font-weight: var(--font-weight-regular); text-decoration: none; text-underline-offset: 0.22em; } .not-found-hero__home-link:hover { text-decoration: underline; } .not-found-hero__home-link:focus-visible { outline: var(--focus-ring); outline-offset: 5px; border-radius: var(--radius-xs); } .not-found-hero__mark { width: 259px; max-width: 100%; margin-top: 1px; justify-self: end; } .not-found-page + .site-footer { margin-top: calc(-1 * var(--site-footer-overlap)); } @media (max-width: 920px) { .not-found-hero { min-height: 700px; padding: calc(var(--announcement-banner-offset) + 180px) 0 160px; } .not-found-hero__rail { grid-template-columns: minmax(0, 1fr) 190px; gap: 40px; } .not-found-hero__title { font: var(--display-sm); } .not-found-hero__mark { width: 190px; } } @media (max-width: 700px) { .not-found-hero { min-height: 0; padding: calc(var(--announcement-banner-offset) + 144px) 0 180px; } .not-found-hero__rail { grid-template-columns: 1fr; gap: 56px; } .not-found-hero__copy { gap: 32px; } .not-found-hero__mark { display: none; } } @media (max-width: 480px) { .not-found-hero { padding: calc(var(--announcement-banner-offset) + 136px) 0 168px; } .not-found-hero__title { font: var(--headline-lg); } .not-found-hero__code, .not-found-hero__home-link { font: var(--body-md); } } /* ============================================ */ /* FOOTER */ /* ============================================ */ .site-footer { --site-footer-rail: 1174px; --site-footer-cap-height: clamp(98px, 8.8vw, 113px); --site-footer-curve: clamp(104px, 17vw, 100px); --site-footer-horn-width: 118px; --site-footer-horn-height: 87px; --site-footer-cap-radius: var(--site-footer-curve); --site-footer-surface-radius: var(--site-footer-curve); --site-footer-content-offset: 80px; --site-footer-overlap: 142px; position: relative; isolation: isolate; color: var(--color-white); margin-top: calc(-1 * var(--site-footer-overlap)); z-index: 4; } .site-footer::before { content: ""; position: absolute; z-index: 1; top: calc(var(--site-footer-horn-height) * -1); right: 0; width: var(--site-footer-horn-width); height: var(--site-footer-horn-height); background: #6000A9; -webkit-mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; mask: url('/assets/images/homepage/press-swoosh-top.svg') center / 100% 100% no-repeat; pointer-events: none; } .site-footer__surface { position: relative; z-index: 0; min-height: 563px; padding: var(--site-footer-content-offset) 0 var(--space-56); background: linear-gradient( 180deg, #6000A9 0%, #6000A9 34%, #260043 82% ); border-top-left-radius: var(--site-footer-surface-radius); overflow: hidden; } .site-footer__inner.page-rail { position: relative; z-index: 2; width: min(var(--site-footer-rail), calc(100% - var(--screen-margin) - var(--screen-margin))); } .site-footer__main { display: grid; grid-template-columns: minmax(180px, 389px) minmax(0, 1fr); align-items: start; gap: clamp(var(--space-56), 7.3vw, 93px); } .site-footer__logo-link { display: inline-flex; align-items: center; } .site-footer__logo { display: block; width: 209px; max-width: 100%; height: auto; } .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: var(--space-48); } .site-footer__heading { margin: 0 0 var(--space-8); color: var(--color-white); font: var(--body-md); font-weight: var(--font-weight-bold); } .site-footer__list { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .site-footer__list a { color: var(--color-white); font: var(--body-md); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } .site-footer__list a:hover { color: var(--color-green); } .site-footer__list a:focus-visible, .site-footer__social-link:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .site-footer__bottom { display: grid; gap: var(--space-32); margin-top: clamp(var(--space-56), 6.9vw, 88px); padding-top: var(--space-24); border-top: 1px solid rgba(22, 254, 191, 0.3); } .site-footer__social { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; } .site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--space-32); height: var(--space-32); color: rgba(255, 255, 255, 0.34); border-radius: var(--radius-full); transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); } .site-footer__social-link:hover { color: var(--color-white); background-color: rgba(255, 255, 255, var(--state-hover)); transform: translateY(-1px); } .site-footer__social-link svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; } .site-footer__social-link--stub { color: rgba(255, 255, 255, 0.22); cursor: default; } .site-footer__social-link--stub:hover { color: rgba(255, 255, 255, 0.22); background-color: transparent; transform: none; } .site-footer__legal { max-width: 721px; color: rgba(255, 255, 255, 0.49); font: var(--body-sm); } .site-footer__legal p { margin: 0; } .site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; transition: color var(--transition-fast); } .site-footer__legal a:hover { color: var(--color-white); } .page-content + .homepage-faq .hw-faq { --hw-faq-max-width: var(--container-md); } .page-content:not(.about-page) + .homepage-faq { --page-faq-footer-overlap: 142px; padding-bottom: calc(var(--section-padding-y) + var(--page-faq-footer-overlap)); } @media (max-width: 920px) { .site-footer__surface { min-height: 0; } .site-footer__main { grid-template-columns: 1fr; gap: var(--space-48); margin: 0 40px; } .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40) var(--space-48); } } @media (max-width: 560px) { .site-footer { --site-footer-cap-height: 84px; --site-footer-cap-radius: 96px; --site-footer-surface-radius: 88px; --site-footer-content-offset: 128px; } .site-footer__surface { padding-bottom: var(--space-48); } .site-footer__logo { width: min(209px, 72vw); } .site-footer__nav { grid-template-columns: 1fr; gap: var(--space-32); } } #logoFooter{ text-align: center; } #logoFooterImg{ transform: scale(0.8); } #footerdisclaimer p, #footerdisclaimer a { text-align: center; font-size: 12px; color: rgba(255, 255, 255, .5); } #footerdisclaimer { text-align: center; position: relative; z-index: 1; padding: 20px 10%; } #footerdisclaimer a { text-decoration: underline; } /* ============================================ */ /* THANK YOU MODAL */ /* ============================================ */ #thankYouModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s ease-in-out; z-index: 9999; } #thankYouModal .modal-content { background: #A328FF; padding: 20px 30px; border-radius: 10px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); min-width: 418px; color: white !important; } .modal-content img { height: 43px; margin-top: 19px; } #thankYouModal h2 { color: white !important; margin: -2px 0px 18px 0px; } .modal-content span { margin-bottom: 33px; display: inline-block; } #thankYouModal.show { visibility: visible; opacity: 1; transition: opacity 0.3s ease-in-out; } #thankYouModal .close { cursor: pointer; font-size: 20px; margin-top: 10px; color: #007BFF; } #thankYouModal .close:hover { text-decoration: underline; } /* ============================================ */ /* PROGRESS BAR */ /* ============================================ */ #progress-bar-container { width: 95%; height: 4px; background-color: transparent; position: absolute; bottom: 0; left: 50%; overflow: hidden; z-index: 100; transform: translate(-50%, 0px); } #progress-bar { height: 100%; width: 100%; background-color: #A328FF; transform-origin: left; transform: scaleX(0); transition: transform 0.1s; } /* Section markers */ .contSection { scroll-margin-top: 80px; } /* ============================================ */ /* WAVY SECTION DIVIDERS */ /* ============================================ */ /* No wavy dividers on testimonials - white bg section */ #section-packages::before { content: ""; position: absolute; background: url('data:image/svg+xml,') no-repeat 0 0; z-index: 1; width: 100vw !important; left: 50% !important; transform: translateX(-50%) scaleX(-1.5) scaleY(-1) !important; height: 80px !important; background-size: cover !important; background-position: center bottom !important; top: auto !important; bottom: 100% !important; margin-bottom: -2px !important; } #section-about::after { content: ""; position: absolute; top: -59px; left: 0; width: 100%; height: 60px; background: url('data:image/svg+xml,') no-repeat 0 0; /* background-size: 100% 100%; */ z-index: 1; transform: rotate(180deg) scaleX(1.5); } #section-footer { background-color: #4B007D; margin-top: 60px; padding: 40px 0; overflow: visible; position: relative; } #section-footer::before { content: ""; position: absolute; background: url('data:image/svg+xml,') no-repeat 0 0; z-index: 1; width: 100vw !important; left: 50% !important; transform: translateX(-50%) scaleX(-1.5) scaleY(-1) !important; height: 80px !important; background-size: cover !important; background-position: center bottom !important; top: auto !important; bottom: 100% !important; margin-bottom: -2px !important; } #footerContent{ width: 100%; padding: 5% 0 5% 0; text-align: center; position: relative; z-index: 1; } #footerWaveWrap { height: 100%; overflow: hidden; position: absolute; top: 0px; width: 100%; z-index: 0; } svg#wavyLinesSVG2 { transform: rotate(180deg) translate(0, -53px) scale(1.2); transform-origin: 50vw; transition: top; transform-box: content-box; width: 100vw; user-select: none; /* Standard syntax */ -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* WebKit/Blink browsers */ } /* ============================================ */ /* RESPONSIVE: 1600px */ /* ============================================ */ @media (max-width: 1600px) { h1.bigpurple { font-size: 64px; } h4.subtext { font-size: 36px; } } /* ============================================ */ /* RESPONSIVE: 1440px */ /* ============================================ */ @media (max-width: 1440px) { h1.bigpurple { font-size: 58px; } h2.bigpurple { font-size: 50px; } h4.subtext { font-size: 32px; } } /* ============================================ */ /* RESPONSIVE: 1240px */ /* ============================================ */ @media (max-width: 1240px) { #crmDiagram { transform: scale(0.8); transform-origin: center top; } #wavyLinesSVG1 { transform: rotate(360deg) translate(-180px, 148px) scale(1.3); transform-origin: 0; transform-box: content-box; width: 100vw; } } /* ============================================ */ /* RESPONSIVE: 1024px */ /* ============================================ */ @media (max-width: 1024px) { #floatingheader {flex-direction: column !important;} #floatingheader a {display: none;} #floatingheader.short #lrgLogo { margin: 13px auto 0px auto; background-position: 50% 44%; opacity: 1; height: 51px; background-size: 156px; } #floatingheader.short #lrgLogo {display: block !important;} #floatingheader.short.show #lrgLogo {display: none !important;} #floatingheader.show a:first-child #navLogo {margin: 0 auto 10px auto;} #floatingheader.show { height: 100% !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 9999; } #floatingheader.show a { width: 100% !important; text-align: center !important; display: block !important; margin-bottom: 18px; } #headerLinks { flex-direction: column; position: relative; z-index: 2; } #lrgLogo { transform: translate(-50%, -5px); position: absolute; left: 50%; } .hamburger { cursor: pointer; width: 24px; height: 24px; display: flex !important; flex-direction: column; justify-content: space-around; align-items: center; position: fixed; top: 20px; right: 20px; z-index: 10000; } .hamburger div { width: 100%; height: 1px; background-color: #a6a8a9; transition: all 0.3s ease; } .hamburger.open div:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.open div:nth-child(2) { opacity: 0; } .hamburger.open div:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* #floatingheader.short #lrgLogo {display: block !important;} #floatingheader.short.show #lrgLogo {display: none !important;} #floatingheader.show a:first-child #navLogo {margin: 0 auto 10px auto;} */ h1.bigpurple { font-size: 48px; } h2.bigpurple { font-size: 44px; } h4.subtext { font-size: 22px; margin: 24px auto 5px auto; } .tabbywrapper { gap: 4px; padding: 9px; max-width: fit-content; /* width: 85%; */ } .tabby { padding: 4px 18px; font-size: 1em; text-align: center; line-height: 130%; align-content: center; } #solutions h4 { width: 90% !important; } h4.prodTitlePrime { font-size: 20px; margin-top: 24px !important; } h4.prodTitleSecond { font-size: 20px; font-weight: 300; opacity: .75; line-height: 175% !important; } #testimonials-wrapper .pagination-right { right: 30px !important; } #testimonials-wrapper .pagination-left { left: 30px !important; } .carousel { flex-wrap: wrap; justify-content: center; gap:1em;} .carouItem { max-width: 300px !important; width: 45% !important; } #testimonials-wrapper .pagination-right { right: 30px !important; } #testimonials-wrapper .pagination-left { left: 30px !important; } #crmDiagram { transform: scale(0.85); transform-origin: center top; } #tieroverflow2 h4.prodTitleSecond{ font-weight: 300; padding: 0 7px; } } /* ============================================ */ /* RESPONSIVE: 768px */ /* ============================================ */ @media (max-width: 768px) { #floatingheader.short #lrgLogo {display: block !important;} #floatingheader.short.show #lrgLogo {display: none !important;} #floatingheader.show a:first-child #navLogo {margin: 0 auto 10px auto;} .press-tile { height: 26px; } .tabby { padding: 4px 18px 4px 18px; font-size: .9em; } #solutions .pagination-left { left: 5%; } #solutions .pagination-right { right: 5%; } /* */ /* STAND AND READ */ /* */ #crmupdated #standandread { left: 0; width: 100%; position: relative; bottom: 0; } #smsSceneFocus { width: 100%; display: contents; position: relative; } #sendPoi { top: -281px; left: -229px; } #herocardSMS { transform: translate(-50%, 0px) scale(0.75); height: 458px; left: 50%; position: absolute; } #smsWindow{ height: 410px; } #standandread .svgAsset { position: absolute; right: -7px; bottom: 0px; width: 37%; } #standandread #sendPoi { top: 210px; left: 148px; position: absolute; } #solutions h4{ width: 95% !important; } #solutions h4.prodTitleSecond { font-weight: 300; font-size: 1em; } #smsSceneOpenHouseSign { width: 132px; bottom: -57px; right: -22px; left: unset; } /* */ /* Voice Scene */ /* */ #carlady.illustration { width: 174% !important; left: -481px !important; } .roadbgnd-image { top: 43%; } /* */ /* WALK AND TALK */ /* */ #walkandtalk.illustration { width: 25% !important; } #herocard4 { bottom: 0 !important; max-width: 96% !important; height: 370px !important; transform-origin: bottom center; } #summaryblock #door1 { left: -25%; bottom: 0; width: 42%; position: absolute; transform: translate(0, 106px) scaleY(1.15); opacity: .35; } #summaryblock #door2 { right: -14%; bottom: 0; width: 32%; position: absolute; transform: translate(0, 106px) scaleY(1); opacity: .35; } h4.prodTitleSecond { font-size: 1em; font-weight: 300; } #crmDiagram { transform: scale(.9); transform-origin: center top; } } /* ============================================ */ /* RESPONSIVE: 590px */ /* ============================================ */ @media (max-width: 590px) { #floatingheader.short #lrgLogo {display: block !important;} #floatingheader.short.show #lrgLogo {display: none !important;} #floatingheader.show a:first-child #navLogo {margin: 0 auto 10px auto;} #solutions .pagination-left { left: 10%; margin: -94px 0px 0px 0px; } #solutions .pagination-right { right: 10%; margin: -94px 0px 0px 0px; } #herocardSMS, #smsSceneFocus { bottom: -4px; left: -5%; } } /* ============================================ */ /* RESPONSIVE: 430px */ /* ============================================ */ @media (max-width: 430px) { h1.bigpurple { font-size: 28px !important; } h2.bigpurple { font-size: 36px; } h4.subtext { font-size: 1em !important; margin: 24px auto 5px auto; } h4.prodTitleSecond { font-size: 14px; font-weight: 500; opacity: .75; line-height: 175% !important; } #floatingheader.short #lrgLogo {display: block !important;} #floatingheader.short.show #lrgLogo {display: none !important;} #floatingheader.show a:first-child #navLogo {margin: 0 auto 10px auto;} /* */ /* STAND AND READ */ /* */ #crmupdated #standandread { left: 0; width: 100%; position: relative; bottom: 0; } #smsSceneFocus { width: 100%; display: contents; position: relative; } #sendPoi { top: -281px; left: -229px; } #herocardSMS { transform: translate(-50%, 0px) scale(0.65); height: 427px; left: 50%; position: absolute; } #smsWindow{ height: 460px; } #standandread .svgAsset { position: absolute; right: -69px; bottom: 0px; transform: scaleX(-1); width: 52%; } #standandread #sendPoi { top: 260px; left: 18px; position: absolute; } #solutions h4.prodTitleSecond { font-weight: 300; font-size: .9em; } #smsSceneOpenHouseSign{ display: none; } /* */ /* Voice Scene */ /* */ #carlady.illustration { width: 283% !important; left: -481px !important; } /* */ /* WALK AND TALK */ /* */ #summPoi.poi2 { transform: scale(.5); } #walkandtalk.illustration { width: 25% !important; } #speechContainer { transform: translate(0, -18px) scale(.8); } #herocard4 { bottom: -12px !important; left: -6% !important; max-width: 96% !important; height: 370px !important; transform: scale(0.7); transform-origin: bottom center; } #audio-prompt { box-sizing: border-box; padding: 0 16px; } /* */ /* IMPLEMENTATION */ /* */ #crmDiagram { transform: translate(0px, -31px) scale(1.1); transform-origin: center top; } #tieroverflow { width: 100% !important; } .carousel { flex-direction: column; align-items: center; } .carouItem { width: 90% !important; max-width: unset !important; } #testimonials-wrapper .pagination-right { right: 20px !important; } #testimonials-wrapper .pagination-left { left: 20px !important; } .testimonial { padding: 0 10px; } #section-packages::before { background: url('data:image/svg+xml,') no-repeat 0px -20px; } .hbspt-form { width: 80vw; padding: 23px 16px 50px 22px; } #section-about::after { background: url('data:image/svg+xml,') no-repeat 0px -20px; } #section-footer::before { background: url('data:image/svg+xml,') no-repeat 0px -20px; } #section-footer { padding: 40px 20px; } } /* ============================================ */ /* RESPONSIVE: 375px */ /* ============================================ */ @media (max-width: 375px) { #floatingheader.short { height: 54px; } #floatingheader.short #lrgLogo { margin: 13px auto 0px auto; background-position: 50% 44%; opacity: 1; height: 51px; background-size: 156px; } .hamburger { top: 15px; right: 20px; } #floatingheader.short #lrgLogo { display: block !important; } #floatingheader.short.show #lrgLogo { display: none !important; } #floatingheader.show a:first-child #navLogo { margin: 0 auto 10px auto; } .section-label { margin: 18px 0 10px 0; } h4.prodTitleSecond { font-size: .9em; font-weight: 200; } h4.subtext { font-size: 1em !important; } .video-container { margin: 20px 0 0 0; } .tabbywrapper { gap: 4px; padding: 9px; max-width: fit-content; width: 100%; } .tabby { font-size: .7em !important; } /* */ /* STAND AND READ */ /* */ #crmupdated #standandread { right: -60px; width: 100% !important; display: block; left: unset; } #smsSceneFocus { width: 100%; display: contents; } #herocardSMS { transform: translate(-50%, 0px) scale(0.65); height: 427px; left: 50%; position: absolute; } #smsWindow{ height: 410px; } #standandread .svgAsset{ position: absolute; right: -11px; bottom: 0px; transform: scaleX(-1); } #standandread #sendPoi { bottom: 230px; left: -64px; top: unset; right: unset; } #solutions h4.prodTitleSecond { font-weight: 300; font-size: .9em; } /* */ /* Voice Scene */ /* */ #carlady.illustration { width: 283% !important; left: -381px !important; } /* */ /* WALK AND TALK */ /* */ #summPoi.poi2 { transform: scale(.5); } #walkandtalk.illustration { width: 25% !important; } #speechContainer { transform: translate(0, -18px) scale(.8); } #herocard4 { bottom: -12px !important; left: -6% !important; max-width: 96% !important; height: 370px !important; transform: scale(0.7); transform-origin: bottom center; } /* */ /* PLAY AUDIO */ /* */ #play-btn, #pause-btn { width: 50px; height: 50px; transform: scale(.75); flex-shrink: 0; } /* */ /* IMPLEMENTATION */ /* */ #crmDiagram { transform: translate(0px, -31px) scale(1.1); transform-origin: center top; } #section-testimonials { padding: 20px 5% 0px 5%; } .testimonial { padding: 0 10px; } #section-implementation { padding: 20px 5%; } #section-packages { padding: 20px 5%; } #section-packages::before { top: -36px; } .hbspt-form { width: 78vw; padding: 23px 16px 50px 22px; } #section-about { padding: 20px 5%; } #section-about::after { top: -36px; } #section-footer::before { top: -36px; } } /* ============================================ */ /* RESPONSIVE: 320px */ /* ============================================ */ @media (max-width: 320px) { #floatingheader.short { height: 54px; } #floatingheader.short #lrgLogo { margin: 13px auto 0px auto; background-position: 50% 44%; opacity: 1; height: 51px; background-size: 156px; } .hamburger { top: 15px; right: 20px; } #floatingheader.short #lrgLogo { display: block !important; } #floatingheader.short.show #lrgLogo { display: none !important; } #floatingheader.show a:first-child #navLogo { margin: 0 auto 10px auto; } h4.subtext { font-size: 1em !important; } .video-container { margin: 20px 0 0 0; } .tabbywrapper { gap: 4px; padding: 9px; max-width: fit-content; width: 100%; } .tabby { padding: 4px 18px; font-size: .5em; text-align: center; /* line-height: 130%; */ align-content: center; } /* */ /* STAND AND READ */ /* */ #crmupdated #standandread { right: -60px; width: 100% !important; display: block; left: unset; } #smsSceneFocus { width: 100%; display: contents; } #herocardSMS { transform: translate(-50%, 0px) scale(0.65); height: 427px; left: 50%; position: absolute; } #smsWindow{ height: 410px; } #standandread .svgAsset{ position: absolute; /* right: 39px; */ bottom: 0px; transform: scaleX(-1); } #standandread #sendPoi { bottom: 230px; left: -90px; top: unset; right: unset; } /* */ /* Voice Scene */ /* */ #carlady.illustration { width: 283% !important; left: -381px !important; } /* */ /* Walk and talk */ /* */ #walkandtalk.illustration { width: 25% !important; } #herocard4 { bottom: -12px !important; left: -6% !important; max-width: 96% !important; height: 370px !important; transform: scale(0.75); transform-origin: bottom center; } #solutions h4.prodTitleSecond { font-weight: 300; font-size: .9em; } #play-btn, #pause-btn { width: 50px; height: 50px; transform: scale(.75); flex-shrink: 0; } .section-label { margin: 18px 0 10px 0; } h4.prodTitleSecond { font-size: .9em; font-weight: 200; } #section-testimonials { padding: 20px 5% 0px 5%; } .testimonial { padding: 0 10px; } #section-implementation { padding: 20px 5%; } #section-packages { padding: 20px 5%; } #section-packages::before { top: -36px; } .hbspt-form { width: 78vw; padding: 23px 16px 50px 22px; } #section-about { padding: 20px 5%; } #section-about::after { top: -36px; } #section-footer::before { top: -36px; } } /* ============================================================ * PRODUCT ANIMATIONS * Namespace: .anim-* * * Performance contract: * - Only `transform` and `opacity` animate. * - `will-change` is toggled per-bubble (on reveal, off at end). * - Lead photos preload via JS before the scene plays. * - JS pauses the loop when the component scrolls off-screen. * * Each animation is a self-contained component: * - aspect-ratio container in normal flow * - children absolutely positioned inside * ============================================================ */ /* ── 1:1 conversation — storyboarded from Figma node 379:642 ── */ .anim-1to1 { position: relative; width: 100%; max-width: 621px; aspect-ratio: 621 / 566; margin: 0 auto; isolation: isolate; font-family: var(--font-family, "Roboto", system-ui, sans-serif); color: #111; transition: opacity 380ms ease; container-type: inline-size; --bubble-radius: calc(9 / 621 * 100cqi); --bubble-pad-x: calc(16 / 621 * 100cqi); --bubble-pad-y: calc(15 / 621 * 100cqi); --bubble-font-size: calc(15 / 621 * 100cqi); --bubble-sender-size: calc(12 / 621 * 100cqi); --bubble-line-height: 1.5; --bubble-head-gap: calc(9 / 621 * 100cqi); --bubble-head-space: calc(6 / 621 * 100cqi); --bubble-chip-size: calc(16 / 621 * 100cqi); } .anim-1to1.is-resetting .anim-1to1__feed, .anim-1to1.is-resetting .anim-1to1__ball, .anim-1to1.is-resetting .anim-1to1__avatar, .anim-1to1.is-resetting .anim-1to1__stage, .anim-1to1.is-loop-outro .anim-1to1__feed, .anim-1to1.is-loop-outro .anim-1to1__ball, .anim-1to1.is-loop-outro .anim-1to1__avatar, .anim-1to1.is-loop-outro .anim-1to1__stage { opacity: 0; transition: opacity 680ms ease; } .anim-1to1.is-convo-outro .anim-1to1__feed, .anim-1to1.is-convo-outro .anim-1to1__ball, .anim-1to1.is-convo-outro .anim-1to1__stage { opacity: 0; transition: opacity 560ms cubic-bezier(.34, 0, .16, 1); } .anim-1to1.is-debug-render *, .anim-1to1.is-debug-render *::before, .anim-1to1.is-debug-render *::after { transition: none !important; } /* White storyboard plane; the phone supplies depth. */ .anim-1to1__bg { position: absolute; inset: 0; background: transparent; z-index: -1; } /* Single whisper ball. JS fixes the anchor while classes set cue tone. */ .anim-1to1__ball { position: absolute; left: 0; top: 0; width: 12.88%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78), 0 0 18px rgba(51, 143, 240, 0.16), 0 10px 22px rgba(30, 109, 208, 0.14); opacity: 0; filter: saturate(0.7) blur(0.1px); transition: opacity 520ms ease, filter 520ms ease; z-index: 0; pointer-events: none; } .anim-1to1__ball.is-on { opacity: 0.24; } .anim-1to1__ball.is-muted { opacity: 0.24; filter: saturate(0.7) blur(0.1px); } .anim-1to1__ball.is-muted.is-receding { transition: opacity 880ms cubic-bezier(.34, 0, .16, 1), filter 920ms cubic-bezier(.34, 0, .16, 1); } .anim-1to1__ball.is-attending { opacity: 0.76; filter: saturate(0.98) blur(0); transition: opacity 440ms cubic-bezier(.18, .86, .24, 1), filter 440ms ease; } .anim-1to1__ball video, .anim-1to1__ball img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transform-origin: 50% 50%; } .anim-1to1__ball.is-attending video { animation: hw-1to1-ball-queue-spin 1120ms cubic-bezier(.22, .72, .18, 1) both; will-change: transform; } .anim-1to1__ball.is-muted video { animation: none; } @keyframes hw-1to1-ball-queue-spin { 0% { transform: scale(1.06) rotate(0deg); } 100% { transform: scale(1.06) rotate(-360deg); } } /* ── Phone surface (visual frame only, no children) ──────── */ .anim-1to1__phone { position: absolute; left: 21.85%; top: 8.66%; width: 51.70%; height: 68.73%; background: rgba(255, 255, 255, 0.9); border-radius: calc(38 / 621 * 100cqi) calc(38 / 621 * 100cqi) 0 0; box-shadow: 0 calc(-8.75 / 621 * 100cqi) calc(30 / 621 * 100cqi) rgba(0, 0, 0, 0.15), inset 0 calc(4 / 621 * 100cqi) calc(18 / 621 * 100cqi) rgba(0, 0, 0, 0.08); z-index: 1; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); } .anim-1to1__phone::before { content: ""; position: absolute; left: 39.88%; top: 6.68%; width: 18.06%; height: 2.06%; background: rgba(217, 217, 217, 0.5); border-radius: 20px; } .anim-1to1__phone::after { content: ""; position: absolute; left: 58.56%; top: 6.68%; width: 2.49%; height: 2.06%; background: rgba(217, 217, 217, 0.5); border-radius: 50%; } /* ── Right-side standalone lead anchor ─── */ .anim-1to1__avatar { position: absolute; left: 73.15%; top: 61.66%; width: 14.81%; aspect-ratio: 1; z-index: 5; isolation: isolate; opacity: 0; transform: scale(0.94); transition: opacity 520ms ease, transform 640ms cubic-bezier(.22,.8,.24,1), filter 520ms ease; will-change: transform, opacity; --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 0; --avatar-ball-opacity: 0; --avatar-ball-filter: saturate(0.8) brightness(1); --avatar-photo-opacity: 0; --avatar-photo-filter: none; --avatar-ring-gradient-scale: 0.72; } .anim-1to1__avatar.is-anchor, .anim-1to1__avatar.is-ball-anchor, .anim-1to1__avatar.is-ball-to-face, .anim-1to1__avatar.is-face-to-ball { opacity: 1; transform: scale(1); } .anim-1to1__avatar::before, .anim-1to1__avatar::after { content: ""; position: absolute; inset: -14.13%; border-radius: 50%; padding: 14.13%; box-sizing: border-box; transform: scale(1); transform-origin: 50% 50%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .anim-1to1__avatar::before { background: #d9d9d9; opacity: var(--avatar-ring-neutral-opacity); z-index: 3; transition: opacity 680ms cubic-bezier(.22, .9, .3, 1); } .anim-1to1__avatar::after { background: conic-gradient(from 180deg, #16FEBF 0deg, #338FF0 116deg, #A328FF 244deg, #16FEBF 360deg); opacity: var(--avatar-ring-gradient-opacity); transform: scale(var(--avatar-ring-gradient-scale)); filter: drop-shadow(0 8px 18px rgba(51, 143, 240, 0.16)) drop-shadow(0 5px 12px rgba(163, 40, 255, 0.14)); z-index: 4; transition: opacity 760ms ease 120ms, transform 1120ms cubic-bezier(.22, .74, .2, 1), filter 900ms ease; will-change: opacity, transform; } .anim-1to1__avatar-ball { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 1; display: block; opacity: var(--avatar-ball-opacity); filter: var(--avatar-ball-filter); transform: scale(1.045) rotate(0deg); transform-origin: 50% 50%; transition: opacity 580ms cubic-bezier(.22, .8, .24, 1), filter 580ms ease; will-change: transform, opacity; } .anim-1to1__avatar img:not(.anim-1to1__avatar-ball) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 50%; background: #eee; z-index: 2; display: block; filter: var(--avatar-photo-filter); opacity: var(--avatar-photo-opacity); transition: filter 700ms ease, opacity 700ms ease; } .anim-1to1__avatar.is-ball-anchor { --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 0; --avatar-ball-opacity: 0.88; --avatar-ball-filter: saturate(0.98) brightness(1.02); --avatar-photo-opacity: 0; } .anim-1to1__avatar.is-ball-to-face { --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 1; --avatar-ring-gradient-scale: 1; --avatar-ball-opacity: 0; --avatar-photo-opacity: 1; --avatar-photo-filter: none; } .anim-1to1__avatar.is-ball-to-face .anim-1to1__avatar-ball { animation: hw-1to1-avatar-ball-into-face 1160ms cubic-bezier(.2, .78, .18, 1) both; } .anim-1to1__avatar.is-face-to-ball { --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 0; --avatar-ring-gradient-scale: 0.72; --avatar-ball-opacity: 0.88; --avatar-ball-filter: saturate(0.98) brightness(1.02); --avatar-photo-opacity: 0; } .anim-1to1__avatar.is-face-to-ball .anim-1to1__avatar-ball { animation: hw-1to1-avatar-ball-back-out 1120ms cubic-bezier(.22, .76, .18, 1) both; } .anim-1to1__avatar.is-tagged { --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 1; --avatar-ring-gradient-scale: 1; --avatar-photo-opacity: 1; --avatar-photo-filter: none; } .anim-1to1__avatar.is-qualified { --avatar-ring-neutral-opacity: 0; --avatar-ring-gradient-opacity: 1; --avatar-ring-gradient-scale: 1; --avatar-photo-opacity: 1; --avatar-photo-filter: none; } .anim-1to1__avatar.is-tagged .anim-1to1__avatar-ball, .anim-1to1__avatar.is-qualified .anim-1to1__avatar-ball { animation: none; opacity: 0; } @keyframes hw-1to1-avatar-ball-into-face { 0% { opacity: 0.88; filter: saturate(0.98) brightness(1.02); transform: scale(1.045) rotate(0deg); } 58% { opacity: 0.72; filter: saturate(0.98) brightness(1.03); } 100% { opacity: 0; filter: saturate(0.8) brightness(1); transform: scale(0.965) rotate(360deg); } } @keyframes hw-1to1-avatar-ball-back-out { 0% { opacity: 0; filter: saturate(0.76) brightness(1); transform: scale(0.965) rotate(360deg); } 42% { opacity: 0.74; filter: saturate(0.98) brightness(1.03); } 100% { opacity: 0.88; filter: saturate(0.98) brightness(1.02); transform: scale(1.045) rotate(0deg); } } /* ── Shared gradient glass label primitives ─────────────────── */ .anim-1to1__stage, .anim-leadrouting__badge { --hw-gradient-label-fill: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); --hw-gradient-label-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.28) 100%), rgba(255, 255, 255, 0.42); --hw-gradient-label-shadow: url("/assets/images/anim-shared/label-gradient-shadow.png"); } /* ── Stage badge below avatar — glass surface, gradient stroke/text ─ */ .anim-1to1__stage { position: absolute; left: 69.36%; top: 77.65%; width: 22.38%; box-sizing: border-box; padding: calc(8 / 621 * 100cqi) calc(10 / 621 * 100cqi) calc(10 / 621 * 100cqi); background: var(--hw-gradient-label-surface); backdrop-filter: blur(4px) saturate(125%); -webkit-backdrop-filter: blur(4px) saturate(125%); border-radius: calc(3 / 621 * 100cqi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.22); font-family: "Roboto Mono", ui-monospace, monospace; font-size: calc(18 / 621 * 100cqi); line-height: 1.31884765625; text-align: center; white-space: nowrap; z-index: 8; isolation: isolate; overflow: visible; color: #338FF0; opacity: 0; transform: translateY(0); transition: opacity 720ms cubic-bezier(.34, 0, .16, 1); will-change: opacity; } .anim-1to1__stage span { position: relative; z-index: 2; display: block; background-image: var(--hw-gradient-label-fill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .anim-1to1__stage.is-on { opacity: 1; transform: translateY(0); } .anim-1to1__stage::before { content: ""; position: absolute; inset: 0; border-radius: calc(3 / 621 * 100cqi); padding: calc(2 / 621 * 100cqi); background: var(--hw-gradient-label-fill); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .anim-1to1__stage::after { content: ""; position: absolute; left: 50%; top: calc(100% + calc(4 / 621 * 100cqi)); width: 18.84cqi; height: 8.86cqi; transform: translateX(-50%); background: var(--hw-gradient-label-shadow) center / contain no-repeat; opacity: 1; z-index: -1; pointer-events: none; } /* ── Message feed (sibling of phone, can extend beyond it) ── */ .anim-1to1__feed { position: absolute; left: 24.32%; top: 17.67%; width: 46.22%; height: 76.33%; z-index: 2; overflow: hidden; border-radius: calc(8 / 621 * 100cqi) calc(8 / 621 * 100cqi) 0 0; pointer-events: none; } .anim-1to1__track { --chat-scroll-y: 0px; position: absolute; left: 0; top: 0; width: 100%; padding-top: 2.415cqi; transform: translate3d(0, var(--chat-scroll-y), 0); transition: transform 980ms cubic-bezier(.32, .08, .22, 1); will-change: transform; } .anim-1to1__track[data-view="report"] { --chat-scroll-y: -12.2cqi; } .anim-1to1__track[data-view="reply"] { --chat-scroll-y: -5.475cqi; } .anim-1to1__track[data-view="followup"] { --chat-scroll-y: -40.258cqi; } .anim-1to1__track[data-view="final"] { --chat-scroll-y: -55.25cqi; } .anim-1to1__track[data-view="static"] { --chat-scroll-y: 0px; } .anim-1to1__bubble { position: relative; box-sizing: border-box; max-width: none; padding: var(--bubble-pad-y) var(--bubble-pad-x) calc(var(--bubble-pad-y) + 2px); border-radius: var(--bubble-radius); color: #fff; font-size: var(--bubble-font-size); line-height: var(--bubble-line-height); opacity: 0; transform: translate3d(0, 0, 0); transition: width 420ms cubic-bezier(.22, .9, .3, 1), min-height 420ms cubic-bezier(.22, .9, .3, 1), padding 420ms cubic-bezier(.22, .9, .3, 1), opacity 720ms ease, filter 560ms ease; } .anim-1to1__bubble.is-revealing { will-change: opacity; } .anim-1to1__bubble.is-on { opacity: 1; transform: translate3d(0, 0, 0); } .anim-1to1__bubble.is-archived { opacity: 1; filter: none; transform: translate3d(0, 0, 0); } .anim-1to1__bubble--report.is-archived { opacity: 1; } .anim-1to1__bubble.is-hidden { opacity: 0; transform: translate3d(0, 0, 0); } .anim-1to1__bubble--hw { background: linear-gradient(170deg, #4099f5 0%, #338FF0 100%); padding: calc(12 / 621 * 100cqi) calc(16 / 621 * 100cqi); border-bottom-left-radius: var(--bubble-radius); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 4px 14px rgba(51, 143, 240, 0.18); } .anim-1to1__bubble--agent { background: linear-gradient(170deg, #b76dff 0%, #7c3aed 100%); padding: calc(12 / 621 * 100cqi) calc(16 / 621 * 100cqi); border-bottom-left-radius: var(--bubble-radius); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 4px 14px rgba(124, 58, 237, 0.18); } .anim-1to1__bubble--prompt { margin-left: 3.90%; width: 82.93%; margin-bottom: 2.737cqi; } .anim-1to1__bubble--report { margin-left: 3.83%; width: 82.93%; margin-bottom: 2.737cqi; padding: calc(15 / 621 * 100cqi) calc(16 / 621 * 100cqi); } .anim-1to1__bubble--followup-reply { margin-left: 3.83%; width: 82.93%; margin-bottom: 2.737cqi; min-height: calc(88 / 621 * 100cqi); } .anim-1to1__bubble--lead { --bubble-head-gap: 4px; background: #fff; color: #111; right: auto; padding: calc(12 / 621 * 100cqi); border-bottom-right-radius: var(--bubble-radius); box-shadow: 0 0 8px rgba(22, 254, 191, 0.8); } .anim-1to1__bubble--reply { margin-left: auto; margin-right: 3.83%; width: 82.93%; margin-bottom: 2.254cqi; } .anim-1to1__bubble--followup { margin-left: auto; margin-right: 3.83%; width: 82.93%; margin-bottom: 2.254cqi; } .anim-1to1__bubble--lead.is-typing { width: calc(170 / 621 * 100cqi); min-height: calc(86 / 621 * 100cqi); padding: calc(12 / 621 * 100cqi) calc(14 / 621 * 100cqi); } .anim-1to1__bubble--lead.is-message { width: 82.93%; } .anim-1to1__bubble-head { display: flex; align-items: center; gap: var(--bubble-head-gap); margin-bottom: var(--bubble-head-space); opacity: 0; transform: translateX(calc(-4 / 621 * 100cqi)); transition: opacity 540ms ease, transform 660ms cubic-bezier(.22, .9, .3, 1); } .anim-1to1__bubble--lead .anim-1to1__bubble-head { transform: translateX(calc(4 / 621 * 100cqi)); color: #444; } .anim-1to1__bubble--agent .anim-1to1__bubble-head { color: rgba(255, 255, 255, 0.92); } .anim-1to1__bubble.is-on .anim-1to1__bubble-head { opacity: 1; transform: translateX(0); } .anim-1to1__body { opacity: 0; transform: translateY(calc(4 / 621 * 100cqi)); transition: opacity 540ms ease 130ms, transform 660ms cubic-bezier(.22, .9, .3, 1) 130ms; max-width: 100%; } .anim-1to1__bubble.is-on .anim-1to1__body { opacity: 1; transform: translateY(0); } .anim-1to1__paragraph-gap { display: block; height: .55em; } .anim-1to1__lead-content { position: relative; display: grid; align-items: center; min-height: calc(var(--bubble-font-size) * var(--bubble-line-height)); } .anim-1to1__lead-content > .anim-1to1__typing, .anim-1to1__lead-content > .anim-1to1__body { grid-area: 1 / 1; } .anim-1to1__typing { display: inline-flex; align-items: center; gap: calc(4 / 621 * 100cqi); width: max-content; opacity: 0; transform: translateY(calc(3 / 621 * 100cqi)); transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, .8, .24, 1); } .anim-1to1__typing span { width: calc(5 / 621 * 100cqi); height: calc(5 / 621 * 100cqi); border-radius: 50%; background: #40444a; opacity: 0.34; transform: translateY(0); } .anim-1to1__bubble--lead.is-typing .anim-1to1__typing { opacity: 1; transform: translateY(0); } .anim-1to1__bubble--lead.is-typing .anim-1to1__typing span { animation: hw-1to1-human-typing-dot 760ms cubic-bezier(.42, 0, .28, 1) infinite; } .anim-1to1__bubble--lead.is-typing .anim-1to1__typing span:nth-child(2) { animation-delay: 110ms; } .anim-1to1__bubble--lead.is-typing .anim-1to1__typing span:nth-child(3) { animation-delay: 220ms; } .anim-1to1__bubble--lead.is-typing .anim-1to1__body { position: absolute; inset: 0 auto auto 0; visibility: hidden; opacity: 0; transform: translateY(calc(4 / 621 * 100cqi)); transition-delay: 0ms; } .anim-1to1__bubble--lead.is-message .anim-1to1__typing { opacity: 0; transform: translateY(calc(-2 / 621 * 100cqi)); } .anim-1to1__bubble--lead.is-message .anim-1to1__body { position: relative; visibility: visible; transition-delay: 80ms; } @keyframes hw-1to1-human-typing-dot { 0%, 78%, 100% { opacity: 0.34; transform: translateY(0); } 34% { opacity: 1; transform: translateY(calc(-1 / 621 * 100cqi)); } } /* HW chip = small white glyph (the standalone whisper ball is the real HW presence). Lead chip = lead's photo. */ .anim-1to1__chip { width: var(--bubble-chip-size); height: var(--bubble-chip-size); flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); overflow: hidden; display: flex; align-items: center; justify-content: center; } .anim-1to1__bubble--hw .anim-1to1__chip { width: calc(10 / 621 * 100cqi); height: calc(14 / 621 * 100cqi); border-radius: 0; background: url("/assets/images/anim-leads/hw-bubble-mark.svg") center / contain no-repeat; } .anim-1to1__bubble--agent .anim-1to1__chip { color: #fff; background: rgba(255, 255, 255, 0.18); } .anim-1to1__bubble--agent .anim-1to1__chip::before { content: "A"; font-size: calc(8 / 621 * 100cqi); font-weight: 800; line-height: 1; } .anim-1to1__bubble--lead .anim-1to1__chip { background: #eee; } .anim-1to1__chip img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .anim-1to1__sender { font-weight: 700; font-size: var(--bubble-sender-size); letter-spacing: 0; } /* Tails were too visually loud against the phone surface. Keep the conversation standard as clean rounded message blocks. */ .anim-1to1__bubble::after { content: none; } .anim-1to1__report { margin-top: calc(6 / 621 * 100cqi); width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: calc(6 / 621 * 100cqi); padding: calc(12 / 621 * 100cqi); display: flex; align-items: center; gap: calc(8 / 621 * 100cqi); color: #fff; opacity: 0; transform: translateY(calc(6 / 621 * 100cqi)); transition: opacity 380ms ease 220ms, transform 420ms cubic-bezier(.22, .9, .3, 1) 220ms; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .anim-1to1__bubble.is-on .anim-1to1__report { opacity: 1; transform: translateY(0); } .anim-1to1__report-thumb { width: calc(31 / 621 * 100cqi); aspect-ratio: 31 / 32; border-radius: calc(6 / 621 * 100cqi); background: url("/assets/images/anim-leads/market-report-thumb.png") center / cover; flex-shrink: 0; } .anim-1to1__report-text { display: grid; gap: calc(2 / 621 * 100cqi); font-size: calc(12.32 / 621 * 100cqi); line-height: 1.5; white-space: nowrap; } .anim-1to1__report-text strong, .anim-1to1__report-text span { display: block; } .anim-1to1__report-text strong { font-weight: 700; line-height: 1.18; } .anim-1to1__report-text span { line-height: 1.18; } .anim-1to1__task-list { margin-top: calc(7 / 621 * 100cqi); padding: calc(8 / 621 * 100cqi) calc(10 / 621 * 100cqi); border-radius: calc(6 / 621 * 100cqi); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.38); list-style: none; display: grid; gap: calc(5 / 621 * 100cqi); font-size: calc(12.32 / 621 * 100cqi); line-height: 1.28; opacity: 0; transform: translateY(6px); transition: opacity 380ms ease 220ms, transform 420ms cubic-bezier(.22, .9, .3, 1) 220ms; } .anim-1to1__task-list li { position: relative; padding-left: calc(12 / 621 * 100cqi); } .anim-1to1__task-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: calc(5 / 621 * 100cqi); height: calc(5 / 621 * 100cqi); border-radius: 50%; background: currentColor; opacity: 0.72; } .anim-1to1__bubble.is-on .anim-1to1__task-list { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .anim-1to1 *, .anim-1to1 *::before, .anim-1to1 *::after { animation: none !important; transition: none !important; } .anim-1to1__bubble, .anim-1to1__bubble-head, .anim-1to1__body, .anim-1to1__report, .anim-1to1__avatar, .anim-1to1__stage { opacity: 1 !important; transform: none !important; } } .anim-leadrouting.is-static { background: url("/assets/images/anim-leadrouting/lead-routing-frame.png") center / contain no-repeat; } .anim-leadrouting.is-static > * { display: none !important; } @media (max-width: 520px) { .anim-1to1.is-static { --bubble-font-size: clamp(13px, 4.3cqi, 14px); --bubble-sender-size: clamp(10px, 3.7cqi, 11px); --bubble-line-height: 1.5; } .anim-1to1.is-static .anim-1to1__phone { left: 7%; top: 5%; width: 86%; height: 90%; border-radius: 28px 28px 0 0; } .anim-1to1.is-static .anim-1to1__feed { left: 13%; top: 22%; width: 74%; height: 66%; border-radius: 8px; } .anim-1to1.is-static .anim-1to1__track { padding-top: 0; } .anim-1to1.is-static .anim-1to1__bubble--followup-reply { margin-left: 0; width: 100%; min-height: 0; padding: 10px 12px 12px; } .anim-1to1.is-static .anim-1to1__avatar, .anim-1to1.is-static .anim-1to1__stage { display: none !important; } .anim-leadrouting { background: url("/assets/images/anim-leadrouting/lead-routing-frame.png") center / contain no-repeat; } .anim-leadrouting > * { display: none !important; } } /* ───────────────────────────────────────────────────────────── LEAD ROUTING — proportions from Figma 320:2172 (593 × 387) ───────────────────────────────────────────────────────────── Stage classes added by JS on the root, in order: is-lead-in — hot-lead badge + buyer gradient outline draw is-agents-in — agent ring + foreground connector lines draw is-evaluating — candidates pulse, unavailables dim is-selected — winner highlights, badge lands Each per-agent variant carries one of: is-vacation | is-busy | is-candidate | is-winner ───────────────────────────────────────────────────────────── */ .anim-leadrouting { position: relative; width: 100%; max-width: 593px; aspect-ratio: 593 / 387; margin: 0 auto; isolation: isolate; font-family: var(--font-family, "Roboto", system-ui, sans-serif); color: #111; transition: opacity 540ms ease; container-type: inline-size; } .anim-leadrouting.is-leaving { opacity: 1; } /* Rehearsal mode — used during the invisible window between scenes to swap state classes without any element animating. */ .anim-leadrouting.is-rehearsal, .anim-leadrouting.is-rehearsal *, .anim-leadrouting.is-rehearsal *::before, .anim-leadrouting.is-rehearsal *::after { transition: none !important; animation: none !important; } /* Backdrop — glow only. Keep the stage transparent so the animation does not read as a card or boxed background plane. */ .anim-leadrouting__bg { position: absolute; inset: -8% -6% -5%; border-radius: 999px; z-index: 0; background: radial-gradient(ellipse 74% 48% at 50.1% 58.7%, rgba(233, 238, 251, 0.58) 0%, rgba(233, 238, 251, 0.22) 46%, rgba(233, 238, 251, 0) 76%), radial-gradient(ellipse 36% 18% at 50% 78%, rgba(163, 40, 255, 0.10) 0%, rgba(163, 40, 255, 0) 72%); pointer-events: none; } /* Lead ground plane: the agent contact shadows live inside each .anim-leadrouting__agent so their lifecycle is physically attached to the station they ground. */ .anim-leadrouting__shadow { position: absolute; z-index: 1; border-radius: 999px; opacity: 0; filter: blur(calc(var(--shadow-blur, 8px) * 0.85)); transform: translate3d(0, 4px, 0) scale(0.82); transform-origin: center; pointer-events: none; transition: opacity 520ms ease, transform 760ms cubic-bezier(.22, .9, .3, 1); } .anim-leadrouting__shadow::after { content: ""; position: absolute; inset: 18% 14%; border-radius: inherit; background: inherit; opacity: 0.58; filter: blur(calc(var(--shadow-blur, 8px) * 0.22)); } .anim-leadrouting__shadow--lead::after { inset: 12% 10%; opacity: 0.42; filter: blur(calc(var(--shadow-blur, 21px) * 0.18)); } .anim-leadrouting.is-lead-in .anim-leadrouting__shadow--lead { opacity: var(--shadow-opacity); transform: translate3d(0, 0, 0) scale(1); transition-delay: 220ms; } .anim-leadrouting.is-lead-out .anim-leadrouting__shadow--lead { transition-delay: 0ms; } /* SVG connector lines — span the whole frame. Stack contract: agent discs/labels sit in the back field; connectors are foreground routes over them; the buyer/ring/tag sit highest so the route origin remains readable. */ .anim-leadrouting__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 32; pointer-events: none; overflow: visible; } .anim-leadrouting__line { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translate3d(0, 9px, 0) scaleY(0.96); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 520ms ease, clip-path 820ms cubic-bezier(.22, .9, .3, 1), transform 760ms cubic-bezier(.22, .9, .3, 1); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.58) 36%, rgba(0, 0, 0, 0.86) 70%, #000 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.58) 36%, rgba(0, 0, 0, 0.86) 70%, #000 100%); } /* Default candidate / unavailable strokes */ .anim-leadrouting__line.is-vacation, .anim-leadrouting__line.is-busy { stroke: rgba(120, 120, 140, 0.35); stroke-width: 2; } .anim-leadrouting__line.is-candidate { stroke: rgba(163, 40, 255, 0.75); stroke-width: 2.25; } .anim-leadrouting__line.is-winner { stroke: #A328FF; stroke-width: 3; } /* Lines draw during is-agents-in */ .anim-leadrouting.is-agents-in .anim-leadrouting__line { opacity: 0.96; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translate3d(0, 0, 0) scaleY(1); } /* Staggered draw — routes sprout from the buyer outward into the agent field. */ .anim-leadrouting.is-agents-in .anim-leadrouting__line--a1 { opacity: 1; transition-delay: 0ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__line--a4 { opacity: 0.88; transition-delay: 120ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__line--a3 { opacity: 0.66; transition-delay: 240ms; } /* In evaluating phase, unavailable lines fade further */ .anim-leadrouting.is-evaluating .anim-leadrouting__line.is-vacation, .anim-leadrouting.is-evaluating .anim-leadrouting__line.is-busy, .anim-leadrouting.is-selected .anim-leadrouting__line.is-vacation, .anim-leadrouting.is-selected .anim-leadrouting__line.is-busy { opacity: 0; } .anim-leadrouting.is-selected .anim-leadrouting__line.is-candidate { opacity: 1; } .anim-leadrouting.is-selected .anim-leadrouting__line.is-winner { opacity: 1; } .anim-leadrouting.is-routing-out .anim-leadrouting__line--a3 { transition-delay: 0ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__line--a4 { transition-delay: 90ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__line--a1 { transition-delay: 180ms; } /* ── Agent stations ─────────────────────────────────────────── */ .anim-leadrouting__agent { /* --depth: 1 = foreground, 0.74 = back-row. Set per-slot via JS. */ --depth: 1; position: absolute; width: var(--display-size, var(--size, 13%)); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.86); opacity: 0; border-radius: 50%; color: #B8B5C8; overflow: visible; display: block; transition: opacity 360ms ease, transform 520ms cubic-bezier(.2, .9, .3, 1.2); } .anim-leadrouting__agent-disc { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.98) 0 28%, rgba(255, 255, 255, 0.54) 42%, transparent 58%), linear-gradient(145deg, #FFFFFF 0%, #FDFAFF 54%, #F5F1FB 100%); box-shadow: inset 0 0 0 1px #FFFFFF, inset -3px -5px 11px rgba(78, 56, 126, 0.035), 0 1px 2px rgba(46, 30, 89, 0.035); transform: scale(1); transform-origin: center; transition: transform 360ms cubic-bezier(.2, .9, .3, 1.08), background-color 320ms ease, box-shadow 320ms ease, color 320ms ease; } .anim-leadrouting__agent::after { content: none; } .anim-leadrouting__agent-shadow { position: absolute; left: var(--agent-shadow-left, 0); top: var(--agent-shadow-top, 118%); width: var(--agent-shadow-width, 92%); height: var(--agent-shadow-height, 18%); border-radius: 999px; background: var(--agent-shadow-fill, #A328FF); opacity: 0; filter: blur(calc(var(--agent-shadow-blur, 8px) * 0.66)); transform: scale(0.82); transform-origin: center; z-index: 0; pointer-events: none; transition: opacity 360ms ease, transform 520ms cubic-bezier(.22, .9, .3, 1); } .anim-leadrouting.is-agents-in .anim-leadrouting__agent-shadow { opacity: var(--agent-shadow-opacity, 0.08); transform: scale(1); } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a1 .anim-leadrouting__agent-shadow { transition-delay: 60ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a2 .anim-leadrouting__agent-shadow { transition-delay: 140ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a3 .anim-leadrouting__agent-shadow { transition-delay: 220ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a4 .anim-leadrouting__agent-shadow { transition-delay: 300ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a5 .anim-leadrouting__agent-shadow { transition-delay: 380ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a3 .anim-leadrouting__agent-shadow { transition-delay: 0ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a2 .anim-leadrouting__agent-shadow { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a4 .anim-leadrouting__agent-shadow { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a5 .anim-leadrouting__agent-shadow { transition-delay: 150ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a1 .anim-leadrouting__agent-shadow { transition-delay: 190ms; } .anim-leadrouting__agent-shadow::after { content: ""; position: absolute; inset: 18% 14%; border-radius: inherit; background: inherit; opacity: 0.58; filter: blur(calc(var(--agent-shadow-blur, 8px) * 0.16)); } .anim-leadrouting__agent-glyph { position: relative; z-index: 2; width: 100%; height: 100%; display: block; } /* In is-agents-in, agents pop in scaled to their slot's depth */ .anim-leadrouting.is-agents-in .anim-leadrouting__agent { opacity: calc(0.55 + var(--depth) * 0.45); /* back rows slightly muted */ transform: translate(-50%, -50%) scale(1); } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a1 { transition-delay: 60ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a2 { transition-delay: 140ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a3 { transition-delay: 220ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a4 { transition-delay: 300ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__agent--a5 { transition-delay: 380ms; } .anim-leadrouting.is-unselecting .anim-leadrouting__agent, .anim-leadrouting.is-unselecting .anim-leadrouting__label, .anim-leadrouting.is-unselecting .anim-leadrouting__line { animation: none !important; transition-delay: 0ms !important; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a3 { transition-delay: 0ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a2 { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a4 { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a5 { transition-delay: 150ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__agent--a1 { transition-delay: 190ms; } /* Per-state agent visuals */ .anim-leadrouting__agent.is-vacation, .anim-leadrouting__agent.is-busy { color: #BBB6B6; } .anim-leadrouting__agent.is-vacation .anim-leadrouting__agent-disc, .anim-leadrouting__agent.is-busy .anim-leadrouting__agent-disc { background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.92) 0 28%, rgba(255, 255, 255, 0.42) 44%, transparent 60%), linear-gradient(145deg, #FFFFFF 0%, #FDFBFF 60%, #F5F3F8 100%); box-shadow: inset 0 0 0 1px #FFFFFF, inset -3px -5px 11px rgba(78, 56, 126, 0.025), 0 1px 2px rgba(46, 30, 89, 0.025); } .anim-leadrouting.is-evaluating .anim-leadrouting__agent.is-vacation, .anim-leadrouting.is-evaluating .anim-leadrouting__agent.is-busy, .anim-leadrouting.is-selected .anim-leadrouting__agent.is-vacation, .anim-leadrouting.is-selected .anim-leadrouting__agent.is-busy { opacity: 1; } .anim-leadrouting__agent.is-candidate { color: #A328FF; } .anim-leadrouting__agent.is-candidate .anim-leadrouting__agent-disc { background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.98) 0 30%, rgba(255, 255, 255, 0.48) 45%, transparent 61%), linear-gradient(145deg, #FFFFFF 0%, #FDFAFF 54%, #F7F0FF 100%); box-shadow: 0 0 0 1.6px rgba(163, 40, 255, 0.80), inset -3px -5px 10px rgba(163, 40, 255, 0.035), 0 6px 18px rgba(46, 30, 89, 0.08); } .anim-leadrouting__agent--a3.is-candidate .anim-leadrouting__agent-disc { box-shadow: 0 0 0 1.25px rgba(163, 40, 255, 0.75), 0 6px 18px rgba(46, 30, 89, 0.06); } .anim-leadrouting__agent--a4.is-candidate .anim-leadrouting__agent-disc { box-shadow: 0 0 0 1.75px rgba(163, 40, 255, 0.95), 0 6px 18px rgba(46, 30, 89, 0.08); } /* During evaluation, candidates pulse to show being weighed */ .anim-leadrouting.is-evaluating .anim-leadrouting__agent.is-candidate .anim-leadrouting__agent-disc { animation: leadrouting-pulse 900ms ease-in-out infinite alternate; } .anim-leadrouting.is-evaluating .anim-leadrouting__agent.is-winner { color: #A328FF; } .anim-leadrouting.is-evaluating .anim-leadrouting__agent.is-winner .anim-leadrouting__agent-disc { animation: leadrouting-pulse 900ms ease-in-out infinite alternate; animation-delay: 200ms; box-shadow: 0 0 0 1.5px rgba(163, 40, 255, 0.55), inset -3px -5px 10px rgba(163, 40, 255, 0.04), 0 6px 18px rgba(46, 30, 89, 0.10); } @keyframes leadrouting-pulse { from { transform: scale(1); } to { transform: scale(1.035); } } /* In is-selected, the winner steps FORWARD: scales above its depth and gets the highest z-index so it visually pops in front of everything. */ .anim-leadrouting.is-selected .anim-leadrouting__agent.is-winner, .anim-leadrouting.is-selected-out .anim-leadrouting__agent.is-winner { color: #FFFFFF; z-index: 14 !important; } .anim-leadrouting.is-selected .anim-leadrouting__agent.is-winner .anim-leadrouting__agent-disc, .anim-leadrouting.is-selected-out .anim-leadrouting__agent.is-winner .anim-leadrouting__agent-disc { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22) 0 16%, rgba(255, 255, 255, 0.08) 30%, transparent 48%), linear-gradient(145deg, #B145FF 0%, #A328FF 56%, #9822EE 100%); box-shadow: inset 0 0 0 1.75px #FDFAFF, inset -4px -7px 13px rgba(76, 18, 150, 0.14), inset 2px 2px 5px rgba(255, 255, 255, 0.16), 0 10px 26px rgba(163, 40, 255, 0.22); transform: scale(1.02); } .anim-leadrouting.is-selected .anim-leadrouting__agent.is-winner { opacity: 1; } .anim-leadrouting.is-selected-out .anim-leadrouting__agent.is-winner { opacity: 1; } .anim-leadrouting.is-routing-out.is-selected-out .anim-leadrouting__agent.is-winner { opacity: 0; } .anim-leadrouting.is-agents-in.is-selected .anim-leadrouting__agent.is-winner .anim-leadrouting__agent-shadow { opacity: var(--agent-shadow-selected-opacity, var(--agent-shadow-opacity)); transform: scale(1); } .anim-leadrouting.is-selected .anim-leadrouting__agent.is-candidate { color: #A328FF; opacity: var(--candidate-opacity, 0.56); } .anim-leadrouting.is-selected .anim-leadrouting__agent.is-candidate .anim-leadrouting__agent-disc { box-shadow: 0 0 0 1.6px rgba(163, 40, 255, 0.95), 0 6px 18px rgba(46, 30, 89, 0.06); } .anim-leadrouting.is-selected .anim-leadrouting__agent--a3.is-candidate .anim-leadrouting__agent-disc { box-shadow: 0 0 0 1.25px rgba(163, 40, 255, 0.95), 0 6px 18px rgba(46, 30, 89, 0.05); } .anim-leadrouting.is-selected .anim-leadrouting__agent--a4.is-candidate .anim-leadrouting__agent-disc { box-shadow: 0 0 0 1.75px rgba(163, 40, 255, 0.95), 0 6px 18px rgba(46, 30, 89, 0.06); } /* ── Labels — rounded rect, mono text, gradient stroke if active ── */ .anim-leadrouting__label { --stem-h: 4.13cqi; --stem-w: 2px; --dot-size: 8px; position: absolute; z-index: 18 !important; transform: translateY(4px); opacity: 0; padding: 4px 8px 5px; border-radius: 4px; font-family: "Roboto Mono", ui-monospace, monospace; font-size: clamp(9.5px, 1.89cqi, 11.2px); line-height: 1.31884765625; background: rgba(255, 255, 255, 0.9); color: #888; box-shadow: 0 0 0 1px rgba(120, 120, 140, 0.20); white-space: nowrap; transition: opacity 360ms ease, transform 420ms cubic-bezier(.22, .9, .3, 1), color 320ms ease, box-shadow 320ms ease; } .anim-leadrouting__label--a1, .anim-leadrouting__label--a5 { --stem-h: 4.13cqi; --stem-w: 2px; --dot-size: 8px; padding: 6px 10px; font-size: clamp(12px, 2.36cqi, 14px); box-shadow: 0 0 0 2px currentColor; } .anim-leadrouting__label--a2, .anim-leadrouting__label--a4 { --stem-h: 3.31cqi; --stem-w: 1.6px; --dot-size: 7px; padding: 4px 8px 5px; border-radius: 3.2px; font-size: clamp(9.5px, 1.89cqi, 11.2px); box-shadow: 0 0 0 1.6px currentColor; } .anim-leadrouting__label--a3 { --stem-h: 2.83cqi; --stem-w: 1.36px; --dot-size: 5.5px; padding: 3.4px 6.8px 4.25px; border-radius: 2.72px; font-size: clamp(8px, 1.61cqi, 9.52px); box-shadow: 0 0 0 1.36px currentColor; } .anim-leadrouting__label::before, .anim-leadrouting__label::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: currentColor; pointer-events: none; } .anim-leadrouting__label::before { top: calc(100% - 1px); width: var(--stem-w); height: var(--stem-h); border-radius: 999px; opacity: 0.58; } .anim-leadrouting__label::after { top: calc(100% + var(--stem-h) - var(--dot-size) / 2); width: var(--dot-size); height: var(--dot-size); border-radius: 50%; opacity: 0.72; } .anim-leadrouting.is-agents-in .anim-leadrouting__label { opacity: 1; transform: translateY(0); } .anim-leadrouting.is-agents-in .anim-leadrouting__label--a1 { transition-delay: 120ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__label--a2 { transition-delay: 200ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__label--a3 { transition-delay: 280ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__label--a4 { transition-delay: 360ms; } .anim-leadrouting.is-agents-in .anim-leadrouting__label--a5 { transition-delay: 440ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__label--a3 { transition-delay: 0ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__label--a2 { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__label--a4 { transition-delay: 80ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__label--a5 { transition-delay: 150ms; } .anim-leadrouting.is-routing-out .anim-leadrouting__label--a1 { transition-delay: 190ms; } /* Candidate labels — violet gradient stroke + gradient text via clip */ .anim-leadrouting__label.is-candidate, .anim-leadrouting__label.is-winner { color: #A328FF; } /* Winner label gets the brand-gradient stroke + gradient text on selection */ .anim-leadrouting.is-selected .anim-leadrouting__label.is-winner { color: #A328FF; background: rgba(255, 255, 255, 0.9); border: 0; } .anim-leadrouting.is-selected .anim-leadrouting__label.is-winner span { background-image: none; color: currentColor; font-weight: 400; } /* Unavailable labels — slightly dimmer text, no border emphasis */ .anim-leadrouting__label.is-vacation, .anim-leadrouting__label.is-busy { color: #999; } .anim-leadrouting.is-evaluating .anim-leadrouting__label.is-vacation, .anim-leadrouting.is-evaluating .anim-leadrouting__label.is-busy, .anim-leadrouting.is-selected .anim-leadrouting__label.is-vacation, .anim-leadrouting.is-selected .anim-leadrouting__label.is-busy { opacity: 1; } .anim-leadrouting.is-selected .anim-leadrouting__label.is-candidate { color: #A328FF; opacity: var(--candidate-opacity, 0.56); } /* ── Lead avatar — center stage ─────────────────────────────── */ .anim-leadrouting__lead { --hw-lead-ring-stroke-final: clamp(8px, 2.2cqi, 13px); --hw-lead-ring-overlap: 0.75px; position: absolute; left: 42.664%; top: 59.432%; transform: translate(-50%, -50%) scale(1); width: 19.899%; aspect-ratio: 1; z-index: 40; opacity: 1; transition: transform 540ms cubic-bezier(.2, .9, .3, 1.2); } .anim-leadrouting__lead::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box; padding: var(--hw-lead-ring-stroke-final); background: conic-gradient(from 180deg, #16FEBF 0deg, #338FF0 116deg, #A328FF 244deg, #16FEBF 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transform: translateZ(0) scale(0.72); transform-origin: center; transition: opacity 760ms ease 120ms, transform 1120ms cubic-bezier(.22, .74, .2, 1); z-index: 5; pointer-events: none; } .anim-leadrouting__lead::after { content: ""; position: absolute; inset: calc(var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-overlap)); border-radius: 50%; background: linear-gradient(180deg, #F2F4F8 0%, #E7EBF2 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 1px 3px rgba(69, 74, 94, 0.055), 0 8px 20px rgba(69, 74, 94, 0.04); opacity: 0; transition: opacity 360ms ease; z-index: 1; pointer-events: none; } .anim-leadrouting--neutral-anchor .anim-leadrouting__lead::after { opacity: 1; } .anim-leadrouting--neutral-anchor .anim-leadrouting__lead-ball { opacity: 0; } .anim-leadrouting__lead-ball { position: absolute; inset: calc(var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-overlap)); width: calc(100% - var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-stroke-final) + var(--hw-lead-ring-overlap) + var(--hw-lead-ring-overlap)); height: calc(100% - var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-stroke-final) + var(--hw-lead-ring-overlap) + var(--hw-lead-ring-overlap)); border-radius: 50%; object-fit: cover; display: block; opacity: 0.88; filter: saturate(0.82) brightness(1.05); transform: scale(1.03) rotate(0deg); transform-origin: center; z-index: 2; pointer-events: none; will-change: opacity, filter, transform; transition: opacity 980ms cubic-bezier(.34, 0, .16, 1), filter 1040ms ease, transform 1120ms cubic-bezier(.22, .9, .3, 1); } .anim-leadrouting__lead-anchor { inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.88; filter: none; transform: scale(1); } .anim-leadrouting__lead-photo { position: absolute; inset: calc(var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-overlap)); width: calc(100% - var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-stroke-final) + var(--hw-lead-ring-overlap) + var(--hw-lead-ring-overlap)); height: calc(100% - var(--hw-lead-ring-stroke-final) - var(--hw-lead-ring-stroke-final) + var(--hw-lead-ring-overlap) + var(--hw-lead-ring-overlap)); object-fit: cover; object-position: center; border-radius: 50%; background: #FFFFFF; box-shadow: none; z-index: 4; display: block; opacity: 0; filter: grayscale(1) saturate(0.3) brightness(1.04); transform: scale(1.018); transform-origin: center; transition: opacity 820ms ease 180ms, filter 940ms ease 180ms, transform 980ms cubic-bezier(.2, .9, .3, 1.08) 120ms; } .anim-leadrouting.is-lead-in .anim-leadrouting__lead-ball, .anim-leadrouting.is-evaluating .anim-leadrouting__lead-ball, .anim-leadrouting.is-selected .anim-leadrouting__lead-ball { opacity: 0; filter: saturate(0.72) brightness(1); transform: scale(0.965) rotate(360deg); } .anim-leadrouting.is-lead-in .anim-leadrouting__lead-ball { animation: anim-leadrouting-ball-into-face 1180ms cubic-bezier(.22, .74, .2, 1) both; } .anim-leadrouting.is-lead-out .anim-leadrouting__lead-ball { opacity: 0.88; filter: saturate(0.82) brightness(1.05); transform: scale(1.03) rotate(0deg); animation: anim-leadrouting-ball-back-out 1120ms cubic-bezier(.22, .9, .3, 1) both; transition: opacity 920ms cubic-bezier(.34, 0, .16, 1) 120ms, filter 980ms ease 120ms, transform 1040ms cubic-bezier(.22, .9, .3, 1) 80ms; } @keyframes anim-leadrouting-ball-into-face { 0% { transform: scale(1.03) rotate(0deg); } 100% { transform: scale(0.965) rotate(360deg); } } @keyframes anim-leadrouting-ball-back-out { 0% { transform: scale(0.965) rotate(360deg); } 100% { transform: scale(1.03) rotate(0deg); } } .anim-leadrouting.is-lead-in .anim-leadrouting__lead::before { opacity: 1; transform: translateZ(0) scale(1); } .anim-leadrouting.is-lead-out .anim-leadrouting__lead::before { transition: opacity 720ms ease, transform 980ms cubic-bezier(.22, .9, .3, 1); } .anim-leadrouting.is-lead-in .anim-leadrouting__lead-photo, .anim-leadrouting.is-evaluating .anim-leadrouting__lead-photo, .anim-leadrouting.is-selected .anim-leadrouting__lead-photo { opacity: 1; filter: grayscale(0) saturate(1) brightness(1); transform: scale(1.018); } .anim-leadrouting.is-lead-out .anim-leadrouting__lead-photo { transition: opacity 760ms ease, filter 860ms ease, transform 900ms cubic-bezier(.22, .9, .3, 1); } /* ── "Hot lead" badge — gradient stroke + gradient text ─────── */ .anim-leadrouting__badge { position: absolute; left: 33.221%; top: 71.576%; transform: translate(-50%, 8px); opacity: 0; z-index: 44; padding: 8px 10px 10px; border-radius: 4px; background: var(--hw-gradient-label-surface); backdrop-filter: blur(4px) saturate(125%); -webkit-backdrop-filter: blur(4px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.22); font-family: "Roboto Mono", ui-monospace, monospace; font-size: clamp(13px, 3.035cqi, 18px); line-height: 1.31884765625; isolation: isolate; overflow: visible; transition: opacity 460ms ease 280ms, transform 520ms cubic-bezier(.22, .9, .3, 1.2) 280ms; } .anim-leadrouting__badge::before { content: ""; position: absolute; inset: 0; border-radius: 4px; padding: 2px; background: var(--hw-gradient-label-fill); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } .anim-leadrouting__badge::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 19.73cqi; height: 9.27cqi; transform: translateX(-50%); background: var(--hw-gradient-label-shadow) center / contain no-repeat; opacity: 1; z-index: -1; pointer-events: none; } .anim-leadrouting__badge span { position: relative; z-index: 2; display: block; background-image: var(--hw-gradient-label-fill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 400; } /* Hot lead badge now arrives WITH the lead avatar (beat 1). Same trigger, slightly later transition-delay so the badge lands a beat after the avatar — but in the same beat, not at selection. */ .anim-leadrouting.is-lead-in .anim-leadrouting__badge { opacity: 1; transform: translate(-50%, 0); } .anim-leadrouting.is-lead-out .anim-leadrouting__badge { transition: opacity 360ms ease, transform 420ms cubic-bezier(.22, .9, .3, 1); transition-delay: 0ms; } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .anim-leadrouting *, .anim-leadrouting *::before, .anim-leadrouting *::after { animation: none !important; transition: none !important; } .anim-leadrouting__lead, .anim-leadrouting__agent, .anim-leadrouting__label, .anim-leadrouting__badge { opacity: 1 !important; } .anim-leadrouting__lead { transform: translate(-50%, -50%) scale(1) !important; } .anim-leadrouting__agent { transform: translate(-50%, -50%) scale(1) !important; } .anim-leadrouting__label { transform: translateY(0) !important; } .anim-leadrouting__badge { transform: translateY(0) !important; } .anim-leadrouting__line { opacity: 1 !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; transform: translate3d(0, 0, 0) scale(1) !important; } } /* ───────────────────────────────────────────────────────────── CAROUSEL — proportions from Figma 321:2932 (1168 × 654) ───────────────────────────────────────────────────────────── Interactive + auto-flipping capability tour. Left zone — heading + supporting subhead that swap per slide Right zone — 5 capability tiles in a loose cluster. The active tile carries `is-active`; inactive tiles are muted. Click any tile to activate it. Stage classes added by JS on the root: is-entered — root has entered the viewport (entrance) is-paused — auto-advance is paused after user click Per-tile classes: is-active — currently spotlit; violet icon glow ───────────────────────────────────────────────────────────── */ .anim-carousel { position: relative; width: 100%; max-width: 1168px; margin: 0 auto; isolation: isolate; font-family: var(--font-family, "Roboto", system-ui, sans-serif); color: #111; transition: opacity 380ms ease; /* Interactive elements need pointer events — other anims disable them. */ pointer-events: auto; /* Drive responsive switch off the carousel's own inline-size, not the viewport. The carousel may live inside a 50% column on wide pages. */ container-type: inline-size; /* Content-driven height: the tile cluster (aspect-ratio 533/511) sets the right column's natural height; the left column stretches to match via grid. No outer aspect-ratio needed. */ } /* Soft lavender → white backdrop matching the other animations */ .anim-carousel__bg { position: absolute; inset: 0; border-radius: 24px; z-index: -1; background: radial-gradient(ellipse 38% 38% at 18% 70%, rgba(246, 234, 255, 0.85) 0%, transparent 65%), radial-gradient(ellipse 36% 30% at 82% 30%, rgba(232, 237, 251, 0.55) 0%, transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%); } /* Soft violet bloom — Figma ellipse 70 (480 × 256, blur 95) */ .anim-carousel__bloom { position: absolute; left: 4%; top: 42%; width: 41%; height: 39%; border-radius: 50%; background: #F6EAFF; filter: blur(60px); opacity: 0.7; z-index: 0; pointer-events: none; } /* ── Two-column layout ──────────────────────────────────────── */ .anim-carousel__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; z-index: 1; /* Height is content-driven: right column tile cluster sets it */ min-height: 100%; } /* ── LEFT — copy + supporting image ─────────────────────────── */ .anim-carousel__copy { position: relative; padding: clamp(20px, 5%, 56px) clamp(16px, 4.5%, 50px); display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(10px, 1.6vw, 19px); z-index: 2; } .anim-carousel__eyebrow { font-family: "Roboto Mono", ui-monospace, monospace; font-size: clamp(10px, 1vw, 12px); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: #888; opacity: 0; transform: translateY(6px); transition: opacity 420ms ease 100ms, transform 460ms cubic-bezier(.22,.9,.3,1) 100ms; } .anim-carousel.is-entered .anim-carousel__eyebrow { opacity: 1; transform: translateY(0); } .anim-carousel__heading { position: relative; margin: 0; font-weight: 700; font-size: clamp(22px, 2.8cqi, 32px); line-height: 1.17; color: #111; /* Each slide's heading text crossfades; min-height keeps layout stable */ min-height: 2.4em; } .anim-carousel__heading-slot { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel__heading-slot.is-active { opacity: 1; transform: translateY(0); transition-delay: 120ms; } .anim-carousel__subhead { position: relative; margin: 0; font-weight: 400; font-size: clamp(14px, 2.05cqi, 22px); line-height: 1.45; color: #A328FF; min-height: 3em; } .anim-carousel__subhead-slot { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel__subhead-slot.is-active { opacity: 1; transform: translateY(0); transition-delay: 200ms; } /* Phone + whisper ball at bottom of left column — matches Figma node 321:2801. Built from CSS so we don't need to ship raster art. */ .anim-carousel__phone { position: relative; margin-top: auto; width: clamp(160px, 26vw, 268px); aspect-ratio: 244 / 281; margin-left: 10%; align-self: flex-start; opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 620ms ease 320ms, transform 720ms cubic-bezier(.22, .9, .3, 1) 320ms; } .anim-carousel.is-entered .anim-carousel__phone { opacity: 1; transform: translateY(0) scale(1); } .anim-carousel__phone-face { position: absolute; left: 22%; top: 0; right: 0; bottom: 0; background: #fff; border-radius: 38px 38px 0 0; box-shadow: 0 -7px 23px rgba(0, 0, 0, 0.13), inset 0 4px 18px rgba(0, 0, 0, 0.07), inset 0 0 13px rgba(186, 197, 224, 0.50); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); } .anim-carousel__phone-ball { position: absolute; /* Figma whisper ball x=0 y=98 w=61 h=61 within the 298×281 phone group */ left: 0; top: 35%; width: 20.4%; aspect-ratio: 1; border-radius: 50%; background: #338FF0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.96), 0 8px 26px rgba(51, 143, 240, 0.35), 0 2px 6px rgba(30, 109, 208, 0.25); } .anim-carousel__phone-ball::after { content: "whisper\Aball"; white-space: pre; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); font-size: clamp(7px, 0.9vw, 11px); font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: 0.02em; } .anim-carousel__phone-sparkle { position: absolute; right: 18%; top: 38%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 2px solid #9216FE; z-index: 3; display: flex; align-items: center; justify-content: center; color: #A328FF; } .anim-carousel__phone-sparkle::before { /* Four-point sparkle / star — drawn as two narrow rotated rectangles */ content: ""; width: 60%; height: 60%; background: radial-gradient(ellipse 50% 8% at 50% 50%, currentColor 0%, currentColor 50%, transparent 60%), radial-gradient(ellipse 8% 50% at 50% 50%, currentColor 0%, currentColor 50%, transparent 60%); background-repeat: no-repeat; background-position: center; } /* ── RIGHT — tile cluster (carousel) ────────────────────────── */ .anim-carousel__deck { position: relative; padding: clamp(20px, 4%, 40px) clamp(16px, 5%, 56px) clamp(40px, 7%, 60px); display: flex; align-items: center; justify-content: center; z-index: 2; } .anim-carousel__grid { position: relative; width: 100%; max-width: 533px; aspect-ratio: 533 / 511; /* 5-tile cluster — mirrors Figma 321:2724 layout (533 × 511) */ } /* Each tile carries its own absolute placement variables. Coordinates are normalised against the Figma cluster bounding box 533 × 511. --x, --y : top-left as % of grid --w : width as % of grid --r : aspect ratio of the tile (w/h) That keeps the cluster geometry intact while allowing the grid to scale fluidly with the column. */ .anim-carousel__tile { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--r); display: flex; flex-direction: column; align-items: center; gap: 4%; padding: 0; background: transparent; border: 0; cursor: pointer; color: #64625E; font: inherit; text-align: center; pointer-events: auto; /* Entrance + state */ opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 520ms ease, transform 620ms cubic-bezier(.22, .9, .3, 1), color 320ms ease; -webkit-tap-highlight-color: transparent; } .anim-carousel__tile:focus { outline: none; } .anim-carousel__tile:focus-visible { outline: 2px solid #A328FF; outline-offset: 6px; border-radius: 8px; } .anim-carousel.is-entered .anim-carousel__tile { opacity: 0.68; transform: translateY(0) scale(1); } .anim-carousel.is-entered .anim-carousel__tile:nth-child(1) { transition-delay: 120ms; } .anim-carousel.is-entered .anim-carousel__tile:nth-child(2) { transition-delay: 200ms; } .anim-carousel.is-entered .anim-carousel__tile:nth-child(3) { transition-delay: 280ms; } .anim-carousel.is-entered .anim-carousel__tile:nth-child(4) { transition-delay: 360ms; } .anim-carousel.is-entered .anim-carousel__tile:nth-child(5) { transition-delay: 440ms; } .anim-carousel__tile:hover { opacity: 1; color: #1F1F1F; } /* ── Tile icon — a soft rounded square holding a glyph ──────── */ .anim-carousel__tile-icon { position: relative; width: 60%; aspect-ratio: 1; border-radius: 24%; background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(140, 25, 225, 0.06), 0 8px 20px rgba(46, 30, 89, 0.06), 0 1px 3px rgba(46, 30, 89, 0.05); display: flex; align-items: center; justify-content: center; color: #64625E; transition: transform 460ms cubic-bezier(.22, .9, .3, 1.05), background 320ms ease, color 320ms ease, box-shadow 380ms ease; } .anim-carousel__tile-icon svg { width: 46%; height: 46%; display: block; } .anim-carousel__tile:hover .anim-carousel__tile-icon { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(140, 25, 225, 0.18), 0 12px 26px rgba(46, 30, 89, 0.10), 0 1px 3px rgba(46, 30, 89, 0.05); } /* Active tile = violet face + purple glow + scale up (matches Figma 321:2779) */ .anim-carousel__tile.is-active { opacity: 1; color: #1F1F1F; } .anim-carousel__tile.is-active .anim-carousel__tile-icon { background: linear-gradient(180deg, #B447FF 0%, #8C13E6 100%); color: #FFFFFF; transform: translateY(-2px) scale(1.025); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.40) inset, 0 0 26px rgba(140, 25, 225, 0.30), 0 0 0 3px rgba(163, 40, 255, 0.08), 0 10px 24px rgba(118, 18, 197, 0.24); } /* Tile caption */ .anim-carousel__tile-caption { width: 96%; font-size: clamp(10.5px, 2cqi, 14px); line-height: 1.45; font-weight: 400; color: inherit; transition: color 320ms ease, font-weight 320ms ease; } .anim-carousel__tile.is-active .anim-carousel__tile-caption { color: #1F1F1F; font-weight: 600; } /* ── Center whisper-ball orbiter (Figma Group 1178) ─────────── */ .anim-carousel__core { position: absolute; /* Figma group 1178: x=185 y=198 w=133 h=160 within 533×511 cluster */ left: 34.7%; top: 38.7%; width: 25%; aspect-ratio: 133 / 160; pointer-events: none; opacity: 0; transform: scale(0.85); transition: opacity 620ms ease 420ms, transform 720ms cubic-bezier(.22, .9, .3, 1.2) 420ms; } .anim-carousel.is-entered .anim-carousel__core { opacity: 1; transform: scale(1); } .anim-carousel__core-frame { position: absolute; left: 10.5%; top: 11.4%; right: 16.5%; bottom: 11.4%; border-radius: 18px; background: #1F1F1F; box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.14), inset 0 0 13px rgba(186, 197, 224, 0.50), 0 18px 40px rgba(46, 30, 89, 0.20); overflow: hidden; } .anim-carousel__core-frame::before { content: ""; position: absolute; inset: -8%; background: radial-gradient(circle at 30% 30%, rgba(22, 254, 191, 0.20) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(163, 40, 255, 0.25) 0%, transparent 55%), linear-gradient(270deg, #16FEBF 0%, #338FF0 52%, #A328FF 100%); opacity: 0.85; /* Slow ambient rotation — only transform animates */ animation: anim-carousel-orb-rot 22s linear infinite; } @keyframes anim-carousel-orb-rot { 0% { transform: rotate(0deg) scale(1.05); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1.05); } } .anim-carousel__core-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.22) 0%, transparent 50%); pointer-events: none; } .anim-carousel__core-ball { position: absolute; /* Figma ellipse 71 inside frame: ~43%/49% within 110×123 inner area */ left: 50%; top: 50%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.15) 30%, transparent 55%), linear-gradient(135deg, #2cffc9 0%, #338FF0 50%, #A328FF 100%); transform: translate(-50%, -50%); box-shadow: 0 0 22px rgba(51, 143, 240, 0.38), 0 0 46px rgba(163, 40, 255, 0.24); z-index: 2; animation: anim-carousel-orb-breath 5600ms ease-in-out infinite; } @keyframes anim-carousel-orb-breath { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } } /* ── Slide indicator dots — sit below the cluster ───────────── */ .anim-carousel__nav { position: absolute; left: 50%; bottom: clamp(8px, 1.6%, 18px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(140, 25, 225, 0.08), 0 6px 18px rgba(46, 30, 89, 0.07); z-index: 6; opacity: 0; transition: opacity 520ms ease 500ms; } .anim-carousel.is-entered .anim-carousel__nav { opacity: 1; } .anim-carousel__dot { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(120, 120, 140, 0.30); cursor: pointer; transition: background 280ms ease, transform 280ms cubic-bezier(.22,.9,.3,1.2), width 360ms cubic-bezier(.22,.9,.3,1); pointer-events: auto; } .anim-carousel__dot::before { /* Larger hit target without changing visual */ content: ""; position: absolute; inset: -8px; } .anim-carousel__dot:hover { background: rgba(140, 25, 225, 0.50); } .anim-carousel__dot:focus { outline: none; } .anim-carousel__dot:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px #A328FF; } .anim-carousel__dot.is-active { background: #A328FF; width: 22px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 12px rgba(163, 40, 255, 0.35); } /* ── Responsive: stack when the carousel's container is narrow ─ Container query — the carousel may live inside a 50% column on wide pages, so a viewport-driven breakpoint can't see that. */ @container (max-width: 760px) { .anim-carousel__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; } .anim-carousel__copy { padding: clamp(20px, 6%, 40px) clamp(20px, 6%, 40px) 0; gap: 12px; text-align: left; } .anim-carousel__heading { font-size: clamp(20px, 5.5cqi, 28px); min-height: 2.2em; } .anim-carousel__subhead { font-size: clamp(13px, 3.6cqi, 18px); min-height: 3em; } .anim-carousel__phone { display: none; } .anim-carousel__deck { padding: clamp(8px, 3%, 24px) clamp(20px, 6%, 40px) clamp(48px, 8%, 64px); } .anim-carousel__grid { max-width: 460px; margin: 0 auto; } .anim-carousel__tile-caption { font-size: clamp(10px, 2.2cqi, 12.5px); } } /* Viewport fallback for older browsers without container queries */ @supports not (container-type: inline-size) { @media (max-width: 760px) { .anim-carousel__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; } .anim-carousel__phone { display: none; } .anim-carousel__grid { max-width: 460px; margin: 0 auto; } } } /* ── Reduced motion: pin to first slide, no transitions ─────── */ @media (prefers-reduced-motion: reduce) { .anim-carousel *, .anim-carousel *::before, .anim-carousel *::after { animation: none !important; transition: none !important; } .anim-carousel__tile, .anim-carousel__phone, .anim-carousel__core, .anim-carousel__nav, .anim-carousel__eyebrow { opacity: 1 !important; transform: none !important; } .anim-carousel__heading-slot, .anim-carousel__subhead-slot { opacity: 0; } .anim-carousel__heading-slot.is-active, .anim-carousel__subhead-slot.is-active { opacity: 1 !important; transform: none !important; } } /* ============================================================ * Responsive + low-capacity fallbacks * * JS adds .is-static when the browser reports reduced motion, * Save-Data, 2G-class networking, or very low device capacity. * The approved homepage components render a final-state composition * with no timers, keyframes, or autoplaying video. * ============================================================ */ .anim-1to1.is-static *, .anim-1to1.is-static *::before, .anim-1to1.is-static *::after, .anim-leadrouting.is-static *, .anim-leadrouting.is-static *::before, .anim-leadrouting.is-static *::after, .anim-carousel.is-static *, .anim-carousel.is-static *::before, .anim-carousel.is-static *::after { animation: none !important; transition: none !important; } @media (hover: none) { .anim-carousel__tile:hover .anim-carousel__tile-icon { transform: none; } } @container (max-width: 420px) { .anim-leadrouting__label { font-size: 8.2px; padding: 2px 4px 3px; } .anim-leadrouting__badge { font-size: 13px; padding: 6px 9px 8px; } .anim-carousel__heading { font-size: clamp(20px, 7.5cqi, 26px); min-height: 3.55em; } .anim-carousel__subhead { font-size: clamp(13px, 4.4cqi, 16px); min-height: 4.7em; } .anim-carousel__grid { max-width: 240px; aspect-ratio: 1; } .anim-carousel__tile { justify-content: center; } .anim-carousel__tile-caption { display: none; } .anim-carousel__tile-icon { width: 66%; } .anim-carousel__nav { bottom: -4px; } } /* Carousel state composition for Figma 321:2793 / hover 330:3900. Selected nodes get the purple shield treatment. Hovered inactive nodes get the larger background shield, matching the Figma hover frame. */ .anim-carousel { max-width: 705px; aspect-ratio: 705 / 629; overflow: visible; background: #FFFFFF var(--static-frame, none) center / contain no-repeat; opacity: 0; transform: translateY(4px) scale(0.997); transition: opacity 620ms ease, transform 720ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel.is-entered { opacity: 1; transform: translateY(0) scale(1); } .anim-carousel.is-composed { background: #FFFFFF; } .anim-carousel__core-art { position: absolute; left: 38.4397%; top: 40.8633%; width: 18.8652%; height: 25.4293%; display: block; overflow: visible; pointer-events: none; user-select: none; z-index: 3; opacity: 0; transform: translateY(4px) scale(0.985); transition: opacity 560ms ease 120ms, transform 680ms cubic-bezier(.22, .9, .3, 1) 120ms; } .anim-carousel.is-entered .anim-carousel__core-art { opacity: 1; transform: translateY(0) scale(1); } .anim-carousel__core-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; overflow: visible; } .anim-carousel__core-base-path { fill: #FFFFFF; } .anim-carousel__core-detail-path { fill: url(#anim-carousel-core-gradient); } .anim-carousel__node { position: absolute; left: var(--node-x); top: var(--node-y); width: var(--node-w); height: var(--node-h); padding: 0; border: 0; background: transparent; color: #64625E; font: inherit; cursor: pointer; z-index: 4; opacity: 0; transform: translateY(5px); transition: opacity 520ms ease, transform 640ms cubic-bezier(.22, .9, .3, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .anim-carousel.is-entered .anim-carousel__node { opacity: 1; transform: translateY(0); } .anim-carousel.is-entered .anim-carousel__node:nth-of-type(2) { transition-delay: 70ms; } .anim-carousel.is-entered .anim-carousel__node:nth-of-type(3) { transition-delay: 120ms; } .anim-carousel.is-entered .anim-carousel__node:nth-of-type(4) { transition-delay: 170ms; } .anim-carousel.is-entered .anim-carousel__node:nth-of-type(5) { transition-delay: 220ms; } .anim-carousel.is-entered .anim-carousel__node:nth-of-type(6) { transition-delay: 270ms; } .anim-carousel__node:focus { outline: none; } .anim-carousel__node:focus-visible .anim-carousel__node-icon { outline: 1px solid rgba(163, 40, 255, 0.42); outline-offset: 5px; border-radius: 50%; } .anim-carousel__node-icon { position: absolute; left: var(--icon-x); top: var(--icon-y); width: var(--icon-w); height: var(--icon-h); display: block; isolation: isolate; overflow: visible; pointer-events: none; } .anim-carousel__state-shield { position: absolute; left: -21.25%; top: -31.75%; width: 142.31%; height: 163.46%; object-fit: contain; pointer-events: none; user-select: none; opacity: 0; transform: translateY(0) scale(1); transition: opacity 220ms ease; } .anim-carousel__state-shield--hover { z-index: 0; } .anim-carousel__state-shield--active { z-index: 1; display: none; } .anim-carousel__node.is-hovered:not(.is-active) .anim-carousel__state-shield--hover { opacity: 1; } .anim-carousel__node.is-active .anim-carousel__state-shield--active { opacity: 1; } .anim-carousel.is-changing .anim-carousel__node.is-active .anim-carousel__state-backplate--active { animation: anim-carousel-selected-land 820ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel__node-inactive, .anim-carousel__node-active { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; } .anim-carousel__node-inactive { z-index: 2; object-fit: contain; opacity: 1; transition: opacity 180ms ease; } .anim-carousel__node-inactive--built { position: absolute; } .anim-carousel__inactive-shield { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; } .anim-carousel__state-backplate { position: absolute; left: -21.25%; top: -31.75%; width: 142.31%; height: 163.46%; display: block; max-width: none; overflow: visible; opacity: 0; pointer-events: none; user-select: none; transition: opacity 220ms ease; z-index: 0; transform-origin: 50% 52%; } .anim-carousel__state-backplate::before { content: ""; position: absolute; left: 7.5%; top: 9.5%; width: 85%; height: 80%; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(163, 40, 255, 0.46) 0%, rgba(163, 40, 255, 0.24) 36%, rgba(163, 40, 255, 0) 72%); filter: blur(13px); z-index: 0; } .anim-carousel__state-backplate-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; overflow: visible; z-index: 1; } .anim-carousel__state-backplate-svg path { fill: #FFFFFF; } .anim-carousel__state-backplate--active { opacity: 1; z-index: 1; } .anim-carousel__state-backplate--active .anim-carousel__state-backplate-svg path { fill: #A328FF; } .anim-carousel__state-backplate--hover { z-index: 0; } .anim-carousel__state-backplate--hover::before { opacity: 0.82; } .anim-carousel__node.is-hovered:not(.is-active) .anim-carousel__state-backplate--hover { opacity: 1; } .anim-carousel__active-inner-shield { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; overflow: visible; z-index: 2; } .anim-carousel__active-inner-shield path { fill: #FFFFFF; } .anim-carousel__inactive-shield path { fill: #E5EAF7; } .anim-carousel__inactive-symbol { position: absolute; left: var(--symbol-x, 28%); top: var(--symbol-y, 26%); width: var(--symbol-w, 46%); height: var(--symbol-h, 46%); object-fit: contain; z-index: 2; } .anim-carousel__inactive-symbol-svg { left: 0; top: 0; width: 100%; height: 100%; } .anim-carousel__inactive-symbol-svg path { fill: #A328FF; stroke: #A328FF; stroke-width: 0.5; stroke-linejoin: round; } .anim-carousel__inactive-check { position: absolute; left: 60.58%; top: 62.50%; width: 25.96%; height: 25.96%; display: block; border-radius: 50%; background: #FFFFFF; color: #A328FF; z-index: 3; } .anim-carousel__node-active { z-index: 3; opacity: 0; transition: opacity 170ms ease; transform: none; overflow: visible; } .anim-carousel__active-symbol { position: absolute; left: var(--symbol-x, 28%); top: var(--symbol-y, 26%); width: var(--symbol-w, 46%); height: var(--symbol-h, 46%); object-fit: contain; filter: brightness(0) invert(1); z-index: 3; } .anim-carousel__active-symbol-svg { left: 0; top: 0; width: 100%; height: 100%; filter: none; } .anim-carousel__active-symbol-svg path { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 0.5; stroke-linejoin: round; } .anim-carousel__active-check { position: absolute; left: 60.58%; top: 62.50%; width: 25.96%; height: 25.96%; border-radius: 50%; background: #A328FF; color: #FFFFFF; z-index: 4; } .anim-carousel__inactive-check svg, .anim-carousel__active-check svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; } .anim-carousel__node.is-active { color: #A328FF; z-index: 6; } .anim-carousel__node.is-active .anim-carousel__node-inactive { opacity: 0; } .anim-carousel__node.is-active .anim-carousel__node-active { opacity: 1; transform: none; } .anim-carousel__node-caption { position: absolute; left: var(--caption-center-x); top: var(--caption-y); width: var(--caption-w); display: block; box-sizing: border-box; transform: translateX(-50%); color: currentColor; font-family: var(--font-family, "Roboto", system-ui, sans-serif); font-size: clamp(8px, 1.986cqi, 14px); font-weight: 400; font-synthesis: none; line-height: 1.45; letter-spacing: 0; text-align: center; white-space: pre-line; text-wrap: initial; overflow-wrap: normal; word-break: normal; hyphens: none; min-height: 4.35em; pointer-events: none; } .anim-carousel__node.is-active .anim-carousel__node-caption { font-weight: 700; } .anim-carousel__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @keyframes anim-carousel-selected-land { 0% { opacity: 0.18; transform: translateY(0) scale(1); } 48% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .anim-carousel__bg, .anim-carousel__bloom, .anim-carousel__stage { display: none !important; } @media (hover: none) { .anim-carousel__node.is-hovered .anim-carousel__state-shield--hover { opacity: 0; } } /* GOOD-HANDS CAROUSEL - Figma 426:11983 coordinate scene */ .anim-carousel--good-hands { --good-hands-control-size: calc(43 / 551 * 100cqi); --good-hands-control-gap: calc(16 / 551 * 100cqi); position: relative; width: clamp(551px, 48vw, 720px); max-width: none; aspect-ratio: 551 / 513; margin-inline: auto; overflow: visible; isolation: isolate; background: transparent; color: var(--color-neutral-900); opacity: 0; transform: translateY(8px) scale(0.992); transition: opacity 620ms var(--ease-standard), transform 760ms cubic-bezier(.22, .9, .3, 1); container-type: inline-size; pointer-events: auto; } .anim-carousel--good-hands.is-entered { opacity: 1; transform: translateY(0) scale(1); } .anim-carousel--good-hands .anim-carousel__scene { position: absolute; inset: 0; overflow: visible; } .anim-carousel--good-hands .anim-carousel__ambient { position: absolute; z-index: 0; left: calc(-113 / 551 * 100%); top: calc(239 / 513 * 100%); width: calc(664 / 551 * 100%); height: calc(139 / 513 * 100%); border-radius: 999px; background: #E9EEFB; filter: blur(calc(30 / 551 * 100cqi)); opacity: 0.84; pointer-events: none; } .anim-carousel--good-hands .anim-carousel__card-art, .anim-carousel--good-hands .anim-carousel__connector-art, .anim-carousel--good-hands .anim-carousel__fixed-shield, .anim-carousel--good-hands .anim-carousel__crm-database, .anim-carousel--good-hands .anim-carousel__crm-database-dot { position: absolute; display: block; max-width: none; object-fit: fill; pointer-events: none; user-select: none; } .anim-carousel--good-hands .anim-carousel__card-art { z-index: 4; left: var(--good-hands-card-x, calc(60.52 / 551 * 100%)); top: var(--good-hands-card-y, calc(101.5 / 513 * 100%)); width: var(--good-hands-card-w, calc(270 / 551 * 100%)); height: var(--good-hands-card-h, calc(209 / 513 * 100%)); transform-origin: 50% 72%; transition: opacity 150ms var(--ease-standard), transform 170ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel--good-hands .anim-carousel__fixed-shield { z-index: 6; left: calc(296 / 551 * 100%); top: calc(20 / 513 * 100%); width: calc(230 / 551 * 100%); height: calc(322 / 513 * 100%); filter: drop-shadow(calc(-13 / 551 * 100cqi) calc(2 / 551 * 100cqi) calc(15 / 551 * 100cqi) rgba(74, 1, 130, 0.18)) drop-shadow(0 calc(10 / 551 * 100cqi) calc(14 / 551 * 100cqi) rgba(150, 166, 205, 0.16)); } .anim-carousel--good-hands .anim-carousel__card-shadow { position: absolute; z-index: 2; left: var(--good-hands-card-shadow-x, calc(75 / 551 * 100%)); top: var(--good-hands-card-shadow-y, calc(300 / 513 * 100%)); width: var(--good-hands-card-shadow-w, calc(240 / 551 * 100%)); height: var(--good-hands-card-shadow-h, calc(14 / 513 * 100%)); border-radius: 999px; background: linear-gradient(83deg, rgba(74, 1, 130, 0.5) 42%, rgba(150, 166, 205, 0.46) 100%); filter: blur(calc(7 / 551 * 100cqi)); opacity: 0.16; pointer-events: none; transition: opacity 150ms var(--ease-standard), transform 170ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel--good-hands[data-active="crm"] .anim-carousel__card-shadow { opacity: 0.42; } .anim-carousel--good-hands .anim-carousel__crm-database { z-index: 7; left: calc(262.43 / 551 * 100%); top: calc(205.24 / 513 * 100%); width: calc(25.02 / 551 * 100%); height: calc(24.93 / 513 * 100%); opacity: 0; transition: opacity 150ms var(--ease-standard); } .anim-carousel--good-hands .anim-carousel__crm-database-dot { z-index: 8; left: calc(257 / 551 * 100%); top: calc(219 / 513 * 100%); width: calc(10 / 551 * 100%); height: calc(10 / 513 * 100%); opacity: 0; transition: opacity 150ms var(--ease-standard); } .anim-carousel--good-hands[data-active="crm"] .anim-carousel__crm-database, .anim-carousel--good-hands[data-active="crm"] .anim-carousel__crm-database-dot { opacity: 1; } .anim-carousel--good-hands .anim-carousel__active-caption { position: absolute; z-index: 5; left: var(--good-hands-caption-x, calc(48 / 551 * 100%)); top: var(--good-hands-caption-y, calc(325 / 513 * 100%)); width: var(--good-hands-caption-w, calc(318 / 551 * 100%)); height: calc(56.93 / 513 * 100%); margin: 0; color: #181C20; font-family: var(--font-family, "Roboto", system-ui, sans-serif); font-size: clamp(12px, calc(16 / 551 * 100cqi), 16px); font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: 0; text-wrap: balance; transition: opacity 150ms var(--ease-standard), transform 170ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel--good-hands .anim-carousel__connector-art { z-index: 5; left: var(--good-hands-connector-x, calc(94 / 551 * 100%)); top: var(--good-hands-connector-y, calc(383 / 513 * 100%)); width: var(--good-hands-connector-w, calc(237 / 551 * 100%)); height: var(--good-hands-connector-h, calc(33 / 513 * 100%)); opacity: 1; overflow: visible; transition: transform 170ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel--good-hands .anim-carousel__connector-line, .anim-carousel--good-hands .anim-carousel__connector-tick { stroke: rgba(150, 166, 205, 0.48); stroke-width: 1; vector-effect: non-scaling-stroke; } .anim-carousel--good-hands .anim-carousel__connector-active-run, .anim-carousel--good-hands .anim-carousel__connector-active-stem, .anim-carousel--good-hands .anim-carousel__connector-active-tick { stroke: #A328FF; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .anim-carousel--good-hands .anim-carousel__connector-active-run, .anim-carousel--good-hands .anim-carousel__connector-active-tick { transition: x1 150ms var(--ease-standard), x2 150ms var(--ease-standard), opacity 150ms var(--ease-standard); } .anim-carousel--good-hands .anim-carousel__connector-active-dot { fill: #A328FF; } .anim-carousel--good-hands.is-changing-out .anim-carousel__card-art, .anim-carousel--good-hands.is-changing-out .anim-carousel__active-caption, .anim-carousel--good-hands.is-changing-out .anim-carousel__card-shadow, .anim-carousel--good-hands.is-changing-out .anim-carousel__crm-database, .anim-carousel--good-hands.is-changing-out .anim-carousel__crm-database-dot { opacity: 0; transform: translateY(calc(4 / 551 * 100cqi)); } .anim-carousel--good-hands .anim-carousel__controls { position: absolute; z-index: 7; left: var(--good-hands-controls-x, calc(74 / 551 * 100%)); top: var(--good-hands-controls-y, calc(418 / 513 * 100%)); display: flex; align-items: center; justify-content: center; gap: var(--good-hands-control-gap); } .anim-carousel--good-hands .anim-carousel__control { position: relative; width: var(--good-hands-control-size); height: var(--good-hands-control-size); padding: 0; border: 0; border-radius: 999px; background: #F1E1FF; color: #8D20DF; display: grid; place-items: center; cursor: pointer; appearance: none; transform: translateY(0); box-shadow: 0 0 0 1.25px rgba(163, 40, 255, 0.20) inset, 0 7px 16px rgba(123, 31, 212, 0.11); transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard), box-shadow 180ms var(--ease-standard), transform 180ms cubic-bezier(.22, .9, .3, 1); -webkit-tap-highlight-color: transparent; } .anim-carousel--good-hands .anim-carousel__control::before { content: ""; position: absolute; inset: calc(-8 / 551 * 100cqi); border-radius: inherit; } .anim-carousel--good-hands .anim-carousel__control-layer { position: absolute; inset: calc(-5 / 551 * 100cqi); border-radius: inherit; background: rgba(163, 40, 255, 0.15); opacity: 0; transform: scale(0.88); transition: opacity 150ms var(--ease-standard), transform 180ms cubic-bezier(.22, .9, .3, 1); } .anim-carousel--good-hands .anim-carousel__control.is-hovered .anim-carousel__control-layer, .anim-carousel--good-hands .anim-carousel__control:hover .anim-carousel__control-layer, .anim-carousel--good-hands .anim-carousel__control:focus-visible .anim-carousel__control-layer { opacity: 1; transform: scale(1); } .anim-carousel--good-hands .anim-carousel__control:focus { outline: none; } .anim-carousel--good-hands .anim-carousel__control:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(163, 40, 255, 0.42); } .anim-carousel--good-hands .anim-carousel__control:hover { transform: translateY(calc(-1 / 551 * 100cqi)); } .anim-carousel--good-hands .anim-carousel__control.is-active { background: #7B1FD4; color: #FFFFFF; box-shadow: 0 13px 26px rgba(123, 31, 212, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.30) inset; } .anim-carousel--good-hands .anim-carousel__control-icon { position: relative; z-index: 1; width: 53.5%; height: 62.8%; display: grid; place-items: center; } .anim-carousel--good-hands .anim-carousel__control-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; opacity: 1; transition: filter 160ms var(--ease-standard), opacity 160ms var(--ease-standard); } .anim-carousel--good-hands .anim-carousel__control.is-active .anim-carousel__control-art { filter: brightness(0) invert(1); opacity: 1; } .anim-carousel--good-hands .anim-carousel__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 1199px) and (min-width: 901px) { .anim-carousel--good-hands { width: clamp(500px, 52vw, 551px); } } @media (max-width: 480px) { .anim-carousel--good-hands { width: 551px; } } @media (prefers-reduced-motion: reduce) { .anim-carousel--good-hands, .anim-carousel--good-hands *, .anim-carousel--good-hands *::before, .anim-carousel--good-hands *::after { animation: none !important; transition: none !important; } } /* DATABASE VISUAL - controlled rebuild of Figma 350:14 (538 x 612) */ .anim-database { position: relative; width: 100%; max-width: 538px; aspect-ratio: 538 / 612; margin: 0 auto; overflow: visible; isolation: isolate; background: transparent; container-type: inline-size; font-family: var(--font-family, "Roboto", system-ui, sans-serif); } .anim-database__field { position: absolute; inset: 0; overflow: visible; } .anim-database__field::before { content: ""; position: absolute; left: -5%; top: 0; width: 98%; height: 94%; border-radius: 50%; background: #1C2130; opacity: 0.012; filter: blur(74px); transform: rotate(-2deg); pointer-events: none; } .anim-database__ghost, .anim-database__person { position: absolute; aspect-ratio: 1; border-radius: 999px; box-sizing: border-box; } .anim-database__ghost { border: min(4px, 0.7435cqi) solid rgba(130, 134, 143, 0.42); opacity: 0; background: radial-gradient(circle at 50% 42%, rgba(136, 140, 148, 0.15) 0 23%, transparent 24%), radial-gradient(circle at 50% 73%, rgba(136, 140, 148, 0.15) 0 28%, transparent 29%), rgba(255, 255, 255, 0.22); transition: opacity 760ms ease var(--delay, 0ms); z-index: 1; } .anim-database__person { margin: 0; opacity: 0; filter: grayscale(1) saturate(0.12) contrast(0.82) brightness(1.08) blur(0.18px); transition: opacity 620ms ease, filter 1180ms cubic-bezier(.22, .9, .3, 1) var(--delay, 0ms); z-index: 2; } .anim-database__person::before, .anim-database__person::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; } .anim-database__person::before { inset: 0; background: conic-gradient(from 214deg, #27D9C4 0deg, #338FF0 112deg, #A328FF 244deg, #27D9C4 360deg); box-shadow: 0 min(7px, 1.3011cqi) min(13px, 2.4164cqi) rgba(42, 73, 116, 0.17), min(4px, 0.7435cqi) min(6px, 1.1152cqi) min(10px, 1.8587cqi) rgba(108, 42, 186, 0.20); } .anim-database__person::after { inset: 8.8%; background: rgba(255, 255, 255, 0.92); } .anim-database__person img { position: absolute; inset: 8.8%; display: block; width: 82.4%; height: 82.4%; border-radius: inherit; object-fit: cover; user-select: none; pointer-events: none; z-index: 1; } .anim-database.is-visible .anim-database__ghost { opacity: calc(var(--final-opacity, 0.16) * 0.62); } .anim-database.is-visible .anim-database__person { opacity: 0.42; } .anim-database.is-clear .anim-database__ghost { opacity: var(--final-opacity, 0.16); } .anim-database.is-clear .anim-database__person.is-clear { opacity: 1; filter: grayscale(0) saturate(1.02) contrast(1.02) brightness(1) blur(0); } .anim-database.is-clear .anim-database__person.is-soft { opacity: 0.58; filter: grayscale(0.55) saturate(0.38) contrast(0.92) brightness(1.04) blur(0); } .anim-database.is-clear .anim-database__person.is-muted { opacity: 0.32; filter: grayscale(1) saturate(0.10) contrast(0.86) brightness(1.07) blur(0); } .anim-database__tag { position: absolute; left: var(--x); top: var(--y); translate: -50% 0; transform: translateY(0); display: inline-flex; align-items: center; justify-content: center; min-height: min(25px, 4.6468cqi); padding: min(5px, 0.9294cqi) min(10px, 1.8587cqi) min(6px, 1.1152cqi); box-sizing: border-box; border-radius: min(4px, 0.7435cqi); border: min(2px, 0.3717cqi) solid transparent; background: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)) padding-box, linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%) border-box; font-family: "Roboto Mono", ui-monospace, monospace; font-size: min(10px, 1.8587cqi); font-weight: 400; line-height: 1.31884765625; letter-spacing: 0; text-align: center; white-space: nowrap; opacity: 0; transition: opacity 520ms ease var(--delay, 0ms); z-index: 5; } .anim-database__tag-text { display: block; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(146deg, #16FEBF 0%, #338FF0 24%, #A328FF 100%); -webkit-background-clip: text; background-clip: text; } .anim-database.is-tagged .anim-database__tag { opacity: 1; } @media (prefers-reduced-motion: reduce) { .anim-database *, .anim-database *::before, .anim-database *::after { animation: none !important; transition: none !important; } .anim-database .anim-database__ghost, .anim-database .anim-database__person, .anim-database .anim-database__tag { opacity: 1 !important; transform: translateY(0) !important; } .anim-database .anim-database__person.is-soft { opacity: 0.58 !important; } .anim-database .anim-database__person.is-muted, .anim-database .anim-database__ghost { opacity: 0.32 !important; } }