/* --- DS7-Web foundation (bundled) --- */ /* tokens.css */ /* ============================================================================ DS7-Web · TOKENS (single source of truth) SlashExperts Website 3.0 — premium marketing design system Synthesis of: DS6 (website) · DS5/assetgen (--n-*) · DS_Carly (liquid-glass) Conventions - Namespace: --w-* (web). Mirrors DS5's --n-* so assetgen embeds drop in native. - Dark-first. :root = dark. :root[data-theme="light"] = light override. - One brand ramp only: purple #9887f4 -> lavender #c18cff. No DS6 multi-color gradients. - Marketing scale (bigger type / section rhythm) lives here; product DS stays separate. ============================================================================ */ /* -------------------------------------------------------------------------- */ /* 1 · CORE PALETTE (raw values — reference only; use semantic tokens below) */ /* -------------------------------------------------------------------------- */ :root { /* Brand ramp (canonical · assetgen) */ --w-purple: #9887f4; /* indigo-purple — brand primary */ --w-lavender: #c18cff; /* lilac — brand secondary */ --w-purple-ink: #6f5fe0; /* darker purple for light-theme text/contrast */ --w-lavender-pale: #e9ddff; /* near-white lilac — hero-accent gradient endpoint only */ /* Brand neutrals — white + off-white ("paper") */ --w-white: #ffffff; /* pure white */ --w-offwhite: #f5f5f5; /* off-white / paper — premium light neutral */ /* Charcoal / ground family — replaces navy as the brand dark neutral */ --w-charcoal: #1c1a24; /* brand charcoal (cool near-black) */ --w-navy: var(--w-charcoal); /* deprecated alias — navy retired for charcoal */ --w-ink-deep: #0f0d1a; /* deepest base */ --w-ink-base: #15131f; /* base background (dark default) */ --w-ink-elev: #1a1725; /* elevated background */ /* Neutral surface steps (dark) */ --w-surface-lo: #211d2e; --w-surface: #252035; --w-surface-hi: #332e45; --w-surface-hi-2: #3d3853; /* Warm flecks — flat accents ONLY, never in a gradient (assetgen rule) */ --w-fleck-coral: #ff8b76; --w-fleck-pink: #ff719c; } /* -------------------------------------------------------------------------- */ /* 1B · STATUS COLORS (functional only — NOT brand. Use for state, not decor) */ /* -------------------------------------------------------------------------- */ :root { --w-success: #34d399; /* live / active / verified / online */ --w-warning: #fbbf24; /* attention / pending / usage */ --w-danger: #f87171; /* error / churn risk / failed */ --w-info: #60a5fa; /* informational / neutral notice */ /* tint fills + borders for status surfaces (badges, banners, rows) */ --w-success-soft: rgba(52,211,153,0.12); --w-warning-soft: rgba(251,191,36,0.12); --w-danger-soft: rgba(248,113,113,0.12); --w-info-soft: rgba(96,165,250,0.12); /* aliases — keep older references resolving */ --w-green: var(--w-success); --w-amber: var(--w-warning); --w-red: var(--w-danger); } /* -------------------------------------------------------------------------- */ /* 2 · SEMANTIC COLOR (dark default) */ /* -------------------------------------------------------------------------- */ :root { --w-bg: var(--w-ink-base); /* page background */ --w-bg-deep: var(--w-ink-deep); /* deepest sections / footer */ --w-bg-elev: var(--w-ink-elev); /* raised band */ --w-card: var(--w-surface); /* default card fill */ --w-card-lo: var(--w-surface-lo); --w-card-hi: var(--w-surface-hi); /* Text tiers */ --w-text: rgba(255,255,255,0.92); --w-text-2: rgba(255,255,255,0.66); --w-text-3: rgba(255,255,255,0.42); --w-text-prose: rgba(255,255,255,0.72); /* paragraph body — softer than primary */ --w-text-on-brand: #ffffff; --w-icon-ink: #ffffff; /* monoline icon stroke — white in dark */ /* Lines / edges */ --w-line-soft: rgba(255,255,255,0.05); --w-line: rgba(255,255,255,0.08); --w-line-strong: rgba(255,255,255,0.14); --w-edge-top: rgba(255,255,255,0.10); /* top inner highlight */ /* Brand applied */ --w-brand: var(--w-purple); --w-brand-2: var(--w-lavender); --w-brand-soft: rgba(152,135,244,0.12); /* tint fills, badge bg */ --w-brand-line: rgba(152,135,244,0.30); /* tint borders */ --w-focus: var(--w-lavender); /* focus ring */ } /* -------------------------------------------------------------------------- */ /* 3 · BRAND GRADIENTS (single ramp · all derived from purple -> lavender) */ /* -------------------------------------------------------------------------- */ :root { --w-grad-brand: linear-gradient(135deg, var(--w-purple) 0%, var(--w-lavender) 100%); --w-grad-brand-rev: linear-gradient(135deg, var(--w-lavender) 0%, var(--w-purple) 100%); --w-grad-hero: linear-gradient(135deg, var(--w-lavender) 0%, var(--w-lavender-pale) 100%); --w-grad-rim: var(--w-grad-brand); --w-grad-radial: radial-gradient(circle at 0% 0%, var(--w-lavender) 0%, var(--w-purple) 70%, rgba(152,135,244,0.6) 100%); --w-grad-iridescent: conic-gradient(from 200deg at 50% 50%, var(--w-lavender) 0deg, var(--w-purple) 120deg, var(--w-lavender) 240deg, var(--w-purple) 360deg); /* Hero mesh — purple-only radials (replaces DS6 multi-color mesh) */ --w-grad-hero-mesh: radial-gradient(ellipse 600px 420px at 16% 18%, rgba(152,135,244,0.28) 0%, transparent 60%), radial-gradient(ellipse 520px 520px at 84% 14%, rgba(193,140,255,0.22) 0%, transparent 55%), radial-gradient(ellipse 460px 360px at 74% 78%, rgba(152,135,244,0.16) 0%, transparent 55%), radial-gradient(ellipse 460px 360px at 24% 82%, rgba(193,140,255,0.16) 0%, transparent 55%); /* Edge-fade signature — composition dissolves to ground at canvas edges */ --w-edge-fade: radial-gradient(ellipse 84% 82% at 50% 48%, transparent 52%, var(--w-bg) 100%); } /* -------------------------------------------------------------------------- */ /* 4 · ELEVATION / MATERIAL (neumorphic from DS5 + liquid-glass from DS_Carly)*/ /* Light source: top. Each surface composes layered shadows. */ /* -------------------------------------------------------------------------- */ :root { /* Neumorphic raise/recess (DS5) */ --w-shadow-raise: 0 22px 38px -10px rgba(0,0,0,0.70), 0 10px 18px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 3px rgba(0,0,0,0.40); --w-shadow-raise-soft: 0 12px 24px -8px rgba(0,0,0,0.55), 0 4px 8px -2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 2px rgba(0,0,0,0.35); --w-shadow-recess: inset 0 2px 5px rgba(0,0,0,0.65), inset 0 -1px 0 rgba(255,255,255,0.06); --w-shadow-recess-deep: inset 0 3px 8px rgba(0,0,0,0.75), inset 0 -1px 0 rgba(255,255,255,0.05); /* Soft drop shadows for marketing cards (lighter than neu) */ --w-shadow-sm: 0 2px 8px rgba(0,0,0,0.30); --w-shadow-md: 0 8px 28px rgba(0,0,0,0.38); --w-shadow-lg: 0 24px 60px rgba(0,0,0,0.45); /* Brand glow (CTAs / focal) — SOFT + SUBTLE (minimal purple, like light theme) */ --w-glow-brand: 0 4px 16px rgba(152,135,244,0.16), 0 2px 6px rgba(0,0,0,0.30); --w-glow-brand-strong: 0 6px 22px rgba(152,135,244,0.24), 0 2px 8px rgba(0,0,0,0.32); /* Liquid-glass — DS_Carly aligned. Dark = INK-TINTED glass (#080610) + bright white rims (NOT white-tinted). 3 tiers: focal / ambient / nested white-lift. */ --w-glass-fill: rgba(8,6,16,0.22); /* T2 ambient — default card */ --w-glass-fill-strong: rgba(8,6,16,0.65); /* T1 focal */ --w-glass-tint: rgba(8,6,16,0.55); /* deep ink — modal/select */ --w-glass-fill-soft: rgba(255,255,255,0.05);/* T3 nested white-lift */ --w-glass-line: rgba(255,255,255,0.12); --w-glass-line-bright: rgba(255,255,255,0.22); --w-glass-rim-top: rgba(255,255,255,0.30);/* bright specular top edge */ --w-glass-rim-bottom: rgba(255,255,255,0.22); --w-glass-blur: blur(18px) saturate(145%); /* backdrop-filter value */ --w-glass-blur-lg: blur(22px) saturate(150%); --w-glass-shadow: 0 24px 60px rgba(8,6,16,0.42); --w-glass-shadow-soft: 0 16px 40px rgba(0,0,0,0.22); --w-glass-radius: 24px; /* DS_Carly card radius */ --w-glass-radius-nested: 12px; --w-nav-bg: rgba(28,26,36,0.72); /* header — charcoal frosted in dark */ /* CTA + brand-glass — theme-swapped (dark keeps the purple brand moment) */ --w-cta-fill: var(--w-grad-brand); --w-cta-text: var(--w-charcoal); /* charcoal on bright gradient — WCAG AA 5.8:1 */ --w-cta-glow: var(--w-glow-brand); --w-cta-glow-strong: var(--w-glow-brand-strong); --w-card-brand-wash: linear-gradient(160deg, rgba(152,135,244,0.18), rgba(193,140,255,0.07)); --w-card-brand-line: var(--w-brand-line); --w-tag-brand-bg: var(--w-brand-soft); --w-tag-brand-fg: var(--w-brand-2); /* Surface gradients (top-light, vertical) */ --w-grad-surface: linear-gradient(180deg, var(--w-surface-hi) 0%, var(--w-surface-lo) 100%); --w-grad-surface-hi: linear-gradient(180deg, var(--w-surface-hi-2) 0%, var(--w-surface) 100%); --w-grad-recess: linear-gradient(180deg, #15131f 0%, #1c1828 100%); } /* -------------------------------------------------------------------------- */ /* 5 · TYPOGRAPHY (fluid scale via clamp — scales continuously, no snapping) */ /* -------------------------------------------------------------------------- */ :root { --w-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --w-font-serif:'Instrument Serif', Georgia, serif; /* accent face — carried over from old site, used italic */ --w-font-kicker:'Space Mono', 'JetBrains Mono', monospace; /* uppercase eyebrow / step labels (Hightouch-style) */ --w-font-mono: 'JetBrains Mono', 'Menlo', 'SF Mono', monospace; /* numerics / IDs / shortcuts */ /* Weights */ --w-fw-regular: 400; --w-fw-medium: 500; --w-fw-semi: 600; --w-fw-bold: 700; --w-fw-black: 800; /* Fluid type scale — min @360px ... max @1440px */ --w-fs-display: clamp(2.75rem, 1.6rem + 5.1vw, 5rem); /* 44 -> 80 hero */ --w-fs-h1: clamp(2.25rem, 1.5rem + 3.3vw, 3.5rem); /* 36 -> 56 */ --w-fs-h2: clamp(1.75rem, 1.3rem + 2.0vw, 2.5rem); /* 28 -> 40 */ --w-fs-h3: clamp(1.375rem, 1.15rem + 1.0vw, 1.75rem);/* 22 -> 28 */ --w-fs-h4: clamp(1.125rem, 1.0rem + 0.55vw, 1.375rem);/* 18 -> 22 */ --w-fs-lead: clamp(1.0625rem, 0.97rem + 0.42vw, 1.25rem);/* 17 -> 20 lead para */ --w-fs-body: 1rem; /* 16 */ --w-fs-prose: 0.825rem; /* 13.2 — dense paragraph (reference: Nuckle 13.2px) */ --w-fs-sm: 0.875rem; /* 14 */ --w-fs-xs: 0.75rem; /* 12 badges / labels */ /* Line heights */ --w-lh-tight: 1.08; /* display / h1 */ --w-lh-snug: 1.2; /* headings */ --w-lh-normal: 1.6; /* body */ /* Tracking */ --w-ls-tight: -0.02em; /* heavy display */ --w-ls-normal: 0; --w-ls-wide: 0.12em; /* uppercase eyebrow / badge */ } /* -------------------------------------------------------------------------- */ /* 6 · SPACING · RADIUS · LAYOUT */ /* -------------------------------------------------------------------------- */ :root { /* Spacing scale (DS5) */ --w-s-1: 4px; --w-s-2: 8px; --w-s-3: 12px; --w-s-4: 16px; --w-s-5: 24px; --w-s-6: 32px; --w-s-7: 48px; --w-s-8: 64px; --w-s-9: 96px; --w-s-10: 128px; /* Section rhythm (fluid) */ --w-section-y: clamp(64px, 4rem + 4vw, 120px); --w-section-y-hero: clamp(96px, 6rem + 5vw, 160px); /* Radii (DS5) */ --w-r-xs: 6px; --w-r-sm: 10px; --w-r-md: 16px; --w-r-lg: 20px; --w-r-xl: 28px; --w-r-2xl: 36px; --w-r-pill: 999px; --w-r-full: 50%; /* Containers */ --w-container: 1200px; --w-container-wide: 1320px; --w-container-pad: clamp(20px, 4vw, 48px); /* Z-index scale */ --w-z-base: 1; --w-z-sticky: 100; --w-z-nav: 200; --w-z-dropdown: 300; --w-z-drawer: 400; --w-z-modal: 500; --w-z-toast: 600; } /* -------------------------------------------------------------------------- */ /* 7 · MOTION */ /* -------------------------------------------------------------------------- */ :root { --w-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* standard (DS5) */ --w-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --w-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --w-dur-fast: 140ms; --w-dur: 240ms; --w-dur-slow: 420ms; --w-reveal-y: 24px; /* reveal-on-scroll travel */ --w-panel-radius: 44px; /* panel-rise rounded corners (Adobe panel stack) */ --w-panel-overlap: 56px;/* panel-rise overlap onto previous section */ } /* -------------------------------------------------------------------------- */ /* 8 · RESPONSIVE BREAKPOINTS (reference — used in media queries elsewhere) */ /* 1280 / 1024 / 768 / 480 , mobile-first. (CSS vars can't drive @media, */ /* so these are documented here and mirrored in base.css/components.css.) */ /* -------------------------------------------------------------------------- */ /* --bp-xl: 1280px wide content / 4-col --bp-lg: 1024px collapse nav to drawer / 3->2 col --bp-md: 768px tablet -> mobile, 2->1 col --bp-sm: 480px small phones, tighten padding/type */ /* ========================================================================== */ /* LIGHT THEME OVERRIDE */ /* Flip with — only the palette changes. */ /* ========================================================================== */ :root[data-theme="light"] { /* Surfaces based on off-white #f5f5f5 (neutral). Page = off-white; cards lift to white. */ --w-bg: #f5f5f5; /* page background = off-white */ --w-bg-deep: #ebebeb; /* deepest sections / footer */ --w-bg-elev: #fafafa; /* raised band (toward white) */ --w-card: #ffffff; /* card lifts above the off-white page */ --w-card-lo: #efefef; /* recessed card / well */ --w-card-hi: #ffffff; /* elevated card */ --w-text: #1c1a24; /* charcoal ink */ --w-text-2: rgba(28,26,36,0.66); --w-text-3: rgba(28,26,36,0.62); /* bumped from .45 for WCAG AA (4.7:1) */ --w-text-prose: #302d2e; /* paragraph body — warm muted charcoal */ --w-text-on-brand: #ffffff; --w-icon-ink: var(--w-charcoal); /* monoline icon stroke — charcoal in light */ --w-line-soft: rgba(28,26,36,0.06); --w-line: rgba(28,26,36,0.10); --w-line-strong: rgba(28,26,36,0.16); --w-edge-top: rgba(255,255,255,0.9); --w-brand: var(--w-purple-ink); /* darker purple for AA on white */ --w-brand-2: var(--w-purple); --w-brand-soft: rgba(152,135,244,0.10); --w-brand-line: rgba(152,135,244,0.28); /* Light shadows — ALL SUBTLE (soft, neutral, low-alpha) */ --w-shadow-raise: 0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9); --w-shadow-raise-soft: 0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85); --w-shadow-recess: inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8); --w-shadow-recess-deep: inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7); --w-shadow-sm: 0 1px 2px rgba(28,26,36,0.04); --w-shadow-md: 0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg: 0 12px 28px rgba(28,26,36,0.07); /* Brand glow — subtle neutral elevation on light (dark theme keeps purple glow) */ --w-glow-brand: 0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong: 0 6px 16px rgba(28,26,36,0.07); /* Liquid glass — LIGHT = NEUTRAL (white / gray / dark-glass). NO purple/lavender. */ --w-glass-fill: rgba(255,255,255,0.66); /* white frosted card */ --w-glass-fill-strong: rgba(255,255,255,0.86); --w-glass-tint: rgba(28,26,36,0.90); /* dark glass (for primary CTA / contrast) */ --w-glass-fill-soft: rgba(28,26,36,0.03); /* subtle gray nested */ --w-glass-line: rgba(28,26,36,0.10); --w-glass-line-bright: rgba(28,26,36,0.16); --w-glass-rim-top: rgba(255,255,255,0.95); /* white specular edge */ --w-glass-rim-bottom: rgba(28,26,36,0.05); --w-glass-blur: blur(18px) saturate(140%); --w-glass-blur-lg: blur(22px) saturate(145%); --w-glass-shadow: 0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft: 0 4px 12px rgba(28,26,36,0.05); --w-nav-bg: var(--w-glass-fill); /* header — white frosted in light */ /* CTA + brand-glass — LIGHT neutralized: dark-glass CTA, gray washes, NO purple */ --w-cta-fill: var(--w-glass-tint); /* dark glass button */ --w-cta-text: #ffffff; --w-cta-glow: var(--w-shadow-md); --w-cta-glow-strong: var(--w-shadow-lg); --w-card-brand-wash: linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line: var(--w-line-strong); --w-tag-brand-bg: rgba(28,26,36,0.06); --w-tag-brand-fg: var(--w-text); --w-focus: rgba(28,26,36,0.55); /* neutral focus ring */ /* neutral hero mesh in light (no purple blooms behind glass) */ --w-grad-hero-mesh: radial-gradient(ellipse 600px 420px at 16% 18%, rgba(28,26,36,0.05) 0%, transparent 60%), radial-gradient(ellipse 520px 520px at 84% 14%, rgba(28,26,36,0.04) 0%, transparent 55%), radial-gradient(ellipse 460px 360px at 74% 78%, rgba(28,26,36,0.035) 0%, transparent 55%); --w-grad-surface: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); --w-grad-surface-hi: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); --w-grad-recess: linear-gradient(180deg, #ededed 0%, #e3e3e3 100%); --w-edge-fade: radial-gradient(ellipse 84% 82% at 50% 48%, transparent 52%, var(--w-bg) 100%); } /* ========================================================================== */ /* ACCESSIBILITY FALLBACKS */ /* ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --w-dur-fast: 0ms; --w-dur: 0ms; --w-dur-slow: 0ms; --w-reveal-y: 0px; } } /* Reduced transparency: components should fall back to solid --w-card when this query matches (paired solid bg required on every backdrop-blur surface). */ @media (prefers-reduced-transparency: reduce) { :root { --w-glass-fill: var(--w-card); --w-glass-fill-strong: var(--w-card-hi); --w-glass-tint: var(--w-card-hi); --w-glass-blur: none; --w-glass-blur-lg: none; } } /* ========================================================================== */ /* LEGACY MAP — DS6 -> DS7-Web (migration aid only; do NOT author new with these) When porting a Website 2.0 page, these let old class values resolve to the new palette without a full rewrite. Remove once a page is fully migrated. DS6 violet #8167ea -> --w-purple ; DS6 navy #0e0e44 -> --w-navy/ink DS6 multi-color text gradient -> --w-grad-brand (single ramp) */ /* ========================================================================== */ :root { --violet: var(--w-purple); --violet-light: var(--w-lavender); --navy: var(--w-navy); --gradient-violet: var(--w-grad-brand); } /* assets.css */ /* DS7-Web · ASSET EMBEDS — base64 brand marks, avatars, company logos. Marks downscaled to 256px / avatars 160px (crisp retina). Reference via var(--w-img-*). Full libraries: Design System/avatars_reference.md + Logo Collection/Logo_Collection_Base64_Reference.md */ :root{ /* Height of the sticky .w-nav. Measured in chromium 2026-08-07 = 68px at 1440/1024/390. Previously UNDEFINED: cu-rail.css claimed "--w-nav-h is set by base.js" and base.js never set it, so every consumer silently used the 64px fallback and sat 4px too high. Defined here so there is one source. */ --w-nav-h:68px; --w-img-carly: url("/assets/images/w/carly.png"); --w-img-visor: url("/assets/images/w/visor.png"); --w-img-se: url("/assets/images/w/se.png"); --w-img-av-diana: url("/assets/images/w/av-diana.png"); --w-img-av-jeff: url("/assets/images/w/av-jeff.png"); --w-img-av-aisha: url("/assets/images/w/av-aisha.png"); --w-img-av-ava: url("/assets/images/w/av-ava.png"); } /* Carousel logos — color-independent SILHOUETTES (black-on-transparent) for white/charcoal treatment */ :root{ --w-img-logo-sendoso: url("/assets/images/w/logo-sendoso.png"); --w-img-logo-sequel: url("/assets/images/w/logo-sequel.png"); --w-img-logo-netline: url("/assets/images/w/logo-netline.png"); --w-img-logo-udemy: url("/assets/images/w/logo-udemy.png"); --w-img-logo-checkr: url("/assets/images/w/logo-checkr.png"); --w-img-logo-warmly: url("/assets/images/w/logo-warmly.png"); --w-img-logo-salesbricks: url("/assets/images/w/logo-salesbricks.png"); --w-img-logo-euler: url("/assets/images/w/logo-euler.png"); --w-img-logo-spara: url("/assets/images/w/logo-spara.png"); --w-img-logo-syntheticfi: url("/assets/images/w/logo-syntheticfi.png"); } /* INTEGRATION logos — the products SlashExperts connects TO. Distinct namespace from --w-img-logo-* above, which are CUSTOMER logos. The two were being used interchangeably in marquees: every solutions page's Integrations section was scrolling the CUSTOMER wall under a heading promising integrations. Jeff caught it 2026-07-30 on /carly/solutions/customer-success/. Assets are the same files /integrations/ already ships via its .igl-* classes (see pages/integrations.css) — defined here as custom properties instead so any page can use them from the shared sheet without pulling in the whole integrations page stylesheet. NOTE: these are FULL-COLOUR marks. On a .cz-light band the page rule `.cz-light .w-marquee__item{filter:grayscale(1) brightness(0)}` flattens them to black silhouettes, which is the house treatment and is fine for wordmarks. Do NOT add a mark whose legibility depends on a light-coloured element inside a dark shape (Salesforce's white wordmark inside its blue cloud is the known example) — brightness(0) makes the whole thing one black blob. */ :root{ /* The three NATIVE integrations lead the row. Their marks were extracted 2026-07-30 from the inline in src/integrations.njk (they existed nowhere as image files) so any page can use them from a stylesheet. If /integrations/ ever restyles those three cards, re-export these. */ --w-img-int-salesforce: url("/assets/images/w/integrations/igl-salesforce.svg"); --w-img-int-hubspot: url("/assets/images/w/integrations/igl-hubspot.svg"); --w-img-int-slack: url("/assets/images/w/integrations/igl-slack.svg"); --w-img-int-gong: url("/assets/images/w/integrations/igl-gong.png"); --w-img-int-outreach: url("/assets/images/w/integrations/igl-outreach.png"); --w-img-int-apollo: url("/assets/images/w/integrations/igl-apollo.png"); --w-img-int-clari: url("/assets/images/w/integrations/igl-clari.png"); --w-img-int-highspot: url("/assets/images/w/integrations/igl-highspot.svg"); --w-img-int-seismic: url("/assets/images/w/integrations/igl-seismic.svg"); --w-img-int-sixsense: url("/assets/images/w/integrations/igl-sixsense.svg"); --w-img-int-clay: url("/assets/images/w/integrations/igl-clay.png"); --w-img-int-marketo: url("/assets/images/w/integrations/igl-marketo.svg"); --w-img-int-qualified: url("/assets/images/w/integrations/igl-qualified.png"); --w-img-int-freshworks: url("/assets/images/w/integrations/igl-freshworks.svg"); --w-img-int-spekit: url("/assets/images/w/integrations/igl-spekit.svg"); } :root{--w-img-av-keegan:url("/assets/images/w/av-keegan.webp")} /* base.css */ /* ============================================================================ DS7-Web · BASE — reset, element defaults, layout primitives, reveal-on-scroll. Page import order: tokens → base → components → icons → nav → footer. ============================================================================ */ /* --- reset --- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{min-height:100vh;font-family:var(--w-font);font-size:var(--w-fs-body);line-height:var(--w-lh-normal); color:var(--w-text);background:var(--w-bg); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} img,svg,video,canvas{display:block;max-width:100%;height:auto} input,button,textarea,select{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul[role="list"],ol[role="list"]{list-style:none;padding:0} :focus-visible{outline:2px solid var(--w-focus);outline-offset:2px;border-radius:2px} ::selection{background:var(--w-brand-soft);color:var(--w-text)} /* --- typography defaults (fluid scale from tokens) --- */ h1,h2,h3,h4{font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-snug);color:var(--w-text)} :where(h1,h2,h3){text-wrap:balance} h1{font-size:var(--w-fs-h1);line-height:var(--w-lh-tight)} h2{font-size:var(--w-fs-h2)} h3{font-size:var(--w-fs-h3)} h4{font-size:var(--w-fs-h4)} p{color:var(--w-text-2);text-wrap:pretty} strong,b{font-weight:var(--w-fw-semi)} small{font-size:var(--w-fs-sm)} code,kbd,samp{font-family:var(--w-font-mono);font-size:0.9em} .w-display{font-size:var(--w-fs-display);font-weight:var(--w-fw-black);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-tight)} .w-lead{font-size:var(--w-fs-lead);color:var(--w-text-2);line-height:var(--w-lh-normal)} /* italic-serif accent word + brand-gradient text */ .w-accent{font-family:var(--w-font-serif);font-style:italic;font-weight:400;letter-spacing:0; background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .w-grad{background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* reversed-ramp modifier: lavender->purple instead of purple->lavender. Pair with .w-accent on a line directly before a CTA (or pair of CTAs) so the gradient "lands" on purple right where the button picks the color back up. Compose as class="w-accent w-accent--rev". */ .w-accent--rev{background:var(--w-grad-brand-rev);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* hero modifier: lavender->pale-lilac, brighter/lighter than the standard ramp so it reads at display sizes (h1/hero). Also cancels any inherited hero text-shadow, which muddies clipped- text gradients. First used on the homepage hero ("the decisive moment"); reuse anywhere a hero h1 needs the same accent-word treatment. Compose as class="w-accent w-accent--hero". */ .w-accent--hero{background:var(--w-grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none} .w-muted{color:var(--w-text-3)} /* --- layout primitives --- */ .w-container{width:100%;max-width:var(--w-container);margin-inline:auto;padding-inline:var(--w-container-pad)} .w-container--wide{max-width:var(--w-container-wide)} .w-container--narrow{max-width:760px} .w-section{padding-block:var(--w-section-y)} .w-section--hero{padding-block:var(--w-section-y-hero) var(--w-section-y)} .w-section--flush-top{padding-top:0} /* flow + flex helpers */ .w-stack{display:flex;flex-direction:column} .w-stack>*+*{margin-top:var(--w-s-4)} .w-stack--lg>*+*{margin-top:var(--w-s-6)} .w-row{display:flex;align-items:center;gap:var(--w-s-4);flex-wrap:wrap} .w-row--between{justify-content:space-between} .w-center{text-align:center} .w-mx-auto{margin-inline:auto} /* responsive grids (1280/1024/768/480) */ .w-grid{display:grid;gap:var(--w-s-6)} .w-grid--2{grid-template-columns:repeat(2,1fr)} .w-grid--3{grid-template-columns:repeat(3,1fr)} .w-grid--4{grid-template-columns:repeat(4,1fr)} .w-grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .w-grid--split{grid-template-columns:1fr 1fr;align-items:center;gap:var(--w-s-8)} @media(max-width:1024px){ .w-grid--4{grid-template-columns:repeat(2,1fr)} .w-grid--3{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .w-grid--2,.w-grid--3,.w-grid--4,.w-grid--split{grid-template-columns:1fr} } /* --- reveal-on-scroll (driven by base.js IntersectionObserver) --- */ .w-reveal{opacity:0;transform:translateY(var(--w-reveal-y)); transition:opacity .6s var(--w-ease),transform .6s var(--w-ease);transition-delay:var(--w-reveal-delay,0ms);will-change:opacity,transform} .w-reveal.is-visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.w-reveal{opacity:1;transform:none;transition:none}} /* ── Adobe-style scroll motion (house language) ───────────────────────────── --scale: settle from slightly-enlarged (parallax-scale-down feel) .w-stagger: auto-cascade direct .w-reveal children L→R / top→bottom .w-panel-rise: rounded-corner panel stacking at section/theme boundaries */ .w-reveal--scale{transform:translateY(var(--w-reveal-y)) scale(var(--w-reveal-scale,1.05));transform-origin:50% 30%} .w-reveal--scale.is-visible{transform:none} @media(prefers-reduced-motion:reduce){.w-reveal--scale{transform:none}} .w-stagger>.w-reveal{transition-delay:calc(var(--w-stagger-step,90ms) * var(--w-stagger-i,0))} .w-stagger>.w-reveal:nth-child(1){--w-stagger-i:0} .w-stagger>.w-reveal:nth-child(2){--w-stagger-i:1} .w-stagger>.w-reveal:nth-child(3){--w-stagger-i:2} .w-stagger>.w-reveal:nth-child(4){--w-stagger-i:3} .w-stagger>.w-reveal:nth-child(5){--w-stagger-i:4} .w-stagger>.w-reveal:nth-child(6){--w-stagger-i:5} .w-panel-rise{position:relative;z-index:2; border-top-left-radius:var(--w-panel-radius,44px);border-top-right-radius:var(--w-panel-radius,44px); margin-top:calc(-1 * var(--w-panel-overlap,56px))} .w-panel-rise--dark{background:var(--w-bg)} @media(max-width:700px){.w-panel-rise{--w-panel-radius:26px;--w-panel-overlap:30px}} /* components.css */ /* ============================================================================ DS7-Web · COMPONENTS — Liquid Glass family (DS_Carly aligned) Buttons · Cards · Tags/Pills. Requires tokens.css. Material (DS_Carly): translucent INK-tinted fill (dark) / white fill (light) + backdrop blur+saturate + BRIGHT WHITE RIM (top & bottom inset) + lift. Dark theme keeps the purple brand moment on the primary CTA; LIGHT theme is fully neutral (white / gray / dark-glass) — all brand tints are token-swapped. ============================================================================ */ /* --------------------------------------------------------------------------- 0 · GLASS PRIMITIVE (.w-glass) — the Carly rim recipe in one place --------------------------------------------------------------------------- */ .w-glass{ position:relative; background:var(--w-glass-fill); -webkit-backdrop-filter:var(--w-glass-blur); backdrop-filter:var(--w-glass-blur); border:1px solid var(--w-glass-line); box-shadow: inset 0 1px 0 var(--w-glass-rim-top), inset 0 -1px 0 var(--w-glass-rim-bottom), var(--w-glass-shadow-soft); } /* =========================================================================== 0B · PARAGRAPH · .w-p Dense paragraph type — 13.2px / 1.65, muted charcoal (light) / soft white (dark). Matches the reference bento paragraph (Nuckle 13.2px #302D2E → our Plus Jakarta). =========================================================================== */ .w-p{font-family:var(--w-font);font-size:var(--w-fs-prose);line-height:1.65;font-weight:var(--w-fw-regular); color:var(--w-text-prose);margin:0;letter-spacing:0.005em} .w-p--center{text-align:center} .w-p--measure{max-width:62ch} /* Experts+ wordmark "+" lives in icons.css (after the component .w-icon overrides) */ /* =========================================================================== 1 · BUTTONS · .w-btn Variants: --primary (brand glass / dark-glass in light) · --glass · --ghost Sizes: --sm · (base) · --lg Modifiers: --icon · --block · :disabled =========================================================================== */ .w-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--w-s-2); font-family:var(--w-font);font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);line-height:1; padding:14px 24px;border-radius:var(--w-r-pill);border:1px solid transparent;cursor:pointer; white-space:nowrap;text-decoration:none;color:var(--w-text); transition:transform var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease), background var(--w-dur) var(--w-ease), border-color var(--w-dur) var(--w-ease); } .w-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)} .w-btn:active{transform:translateY(1px) scale(0.99)} .w-btn[disabled],.w-btn.is-disabled{opacity:.45;pointer-events:none} .w-btn .w-btn__i{font-size:1.05em;display:inline-flex} /* sizes */ .w-btn--sm{padding:10px 16px;font-size:var(--w-fs-xs)} .w-btn--lg{padding:18px 32px;font-size:var(--w-fs-body)} .w-btn--icon{padding:0;width:44px;height:44px;border-radius:var(--w-r-full)} .w-btn--block{width:100%} /* primary — brand glass (dark) / dark glass (light), via --w-cta-* tokens */ .w-btn--primary{ background:var(--w-cta-fill);color:var(--w-cta-text); -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur); border-color:var(--w-glass-line-bright); box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.18), var(--w-cta-glow); } .w-btn--primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.18), var(--w-cta-glow-strong)} /* glass — neutral frosted (secondary) */ .w-btn--glass{ background:var(--w-glass-fill);color:var(--w-text); -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur); border-color:var(--w-glass-line); box-shadow:inset 0 1px 0 var(--w-glass-rim-top), inset 0 -1px 0 var(--w-glass-rim-bottom), var(--w-glass-shadow-soft); } .w-btn--glass:hover{background:var(--w-glass-fill-strong);border-color:var(--w-glass-line-bright);transform:translateY(-1px)} /* ghost — bare until hover */ .w-btn--ghost{background:transparent;color:var(--w-text-2)} .w-btn--ghost:hover{color:var(--w-text);background:var(--w-glass-fill);-webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur)} /* =========================================================================== 2 · TAGS / PILLS · .w-tag Variants: (neutral) · --brand · --success · --warning · --danger · --info Modifiers: --kicker (mono uppercase) · --lg · with .w-tag__dot =========================================================================== */ .w-tag{ position:relative;display:inline-flex;align-items:center;gap:6px; font-family:var(--w-font);font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);line-height:1; padding:6px 12px;border-radius:var(--w-r-pill);color:var(--w-text-2); background:var(--w-glass-fill);border:1px solid var(--w-glass-line); -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur); box-shadow:inset 0 1px 0 var(--w-glass-rim-top); } .w-tag--lg{padding:8px 16px;font-size:var(--w-fs-sm)} .w-tag--kicker{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:0.1em;font-weight:400} .w-tag__dot{width:8px;height:8px;border-radius:var(--w-r-full);background:currentColor;flex:none} .w-tag .w-tag__i{font-size:1.1em;display:inline-flex} /* brand (token-swapped: neutral in light) + status — soft tint fill */ .w-tag--brand {background:var(--w-tag-brand-bg); border-color:var(--w-card-brand-line); color:var(--w-tag-brand-fg)} .w-tag--success{background:var(--w-success-soft); border-color:transparent; color:var(--w-success)} .w-tag--warning{background:var(--w-warning-soft); border-color:transparent; color:var(--w-warning)} .w-tag--danger {background:var(--w-danger-soft); border-color:transparent; color:var(--w-danger)} .w-tag--info {background:var(--w-info-soft); border-color:transparent; color:var(--w-info)} /* =========================================================================== 2B · SECTION BADGE · .w-badge Slim liquid-glass pill that sits above a section title: icon (left) + Space Mono uppercase kicker. Brand-tinted in dark, neutral in light. =========================================================================== */ .w-badge{ display:inline-flex;align-items:center;gap:8px;vertical-align:middle; font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:0.1em; font-size:10.5px;font-weight:400;line-height:1;color:var(--w-tag-brand-fg); padding:8px 14px;border-radius:var(--w-r-pill); background:var(--w-tag-brand-bg);border:1px solid var(--w-card-brand-line); -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur); box-shadow:inset 0 1px 0 var(--w-glass-rim-top), var(--w-glass-shadow-soft); } .w-badge--neutral{color:var(--w-text-2);background:var(--w-glass-fill);border-color:var(--w-glass-line)} .w-badge__icon{width:13px;height:13px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:inherit} .w-badge__icon svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none} /* =========================================================================== 3 · CARDS · .w-card (DS_Carly 3-tier: ambient / focal / nested) Variants: (glass=T2 ambient) · --feature (T1 focal) · --brand (tinted) · --link Parts: .w-card__icon · .w-card__title · .w-card__body · .w-card__foot =========================================================================== */ .w-card{ position:relative;display:flex;flex-direction:column;gap:var(--w-s-3); padding:var(--w-s-6);border-radius:var(--w-glass-radius); background:var(--w-glass-fill);border:1px solid var(--w-glass-line); -webkit-backdrop-filter:var(--w-glass-blur-lg);backdrop-filter:var(--w-glass-blur-lg); box-shadow: inset 0 1.5px 0 var(--w-glass-rim-top), inset 0 -1.5px 0 var(--w-glass-rim-bottom), var(--w-glass-shadow); transition:transform var(--w-dur) var(--w-ease), box-shadow var(--w-dur) var(--w-ease), border-color var(--w-dur) var(--w-ease); } .w-card__icon{ width:48px;height:48px;border-radius:var(--w-r-md);display:inline-flex;align-items:center;justify-content:center; background:var(--w-cta-fill);color:var(--w-cta-text);font-size:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), var(--w-cta-glow); } .w-card__title{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)} .w-card__body{font-size:var(--w-fs-sm);color:var(--w-text-2);line-height:var(--w-lh-normal)} .w-card__foot{margin-top:auto;padding-top:var(--w-s-3);display:flex;align-items:center;gap:var(--w-s-3)} /* feature — T1 focal: stronger fill, larger radius, deeper lift */ .w-card--feature{ background:var(--w-glass-fill-strong);border-radius:var(--w-r-2xl);border-color:var(--w-glass-line-bright); } /* brand — tinted glass (purple wash dark · neutral gray wash light) */ .w-card--brand{ background:var(--w-card-brand-wash);border-color:var(--w-card-brand-line); } /* nested tier (T3) — white-lift panel inside a card */ .w-card__nested{ background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line); border-radius:var(--w-glass-radius-nested);padding:var(--w-s-4); } /* white-outline variant — copy of the glass card with a bright white rim (not gray) */ .w-card--outline-white{border:1.5px solid rgba(255,255,255,0.7)} /* card header row (title + meta pill) — for nested/list cards */ .w-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--w-s-3)} /* nested list rows (the WOD-widget pattern: icon + title + sub, stacked in a card) */ .w-card__row{display:flex;align-items:center;gap:var(--w-s-3);padding:10px 14px; border-radius:var(--w-glass-radius-nested);background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line)} .w-card__row-ic{width:34px;height:34px;flex:none;border-radius:var(--w-r-sm);display:inline-flex;align-items:center;justify-content:center; background:var(--w-glass-fill);color:var(--w-text-2);font-size:18px;box-shadow:inset 0 1px 0 var(--w-glass-rim-top)} .w-card__row-tx{display:flex;flex-direction:column;gap:1px;min-width:0} .w-card__row-tx b{font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-text)} .w-card__row-tx small{font-size:var(--w-fs-xs);color:var(--w-text-3)} /* dark-glass card — deep charcoal/ink outer that holds a white frosted inner panel (the "widget" pattern). Dark in BOTH themes; text inside goes light. */ .w-card--dark{ background:var(--w-glass-tint);border-color:var(--w-glass-line-bright);color:rgba(255,255,255,0.92); } .w-card--dark .w-card__title{color:#ffffff} .w-card__darkhead{text-align:center;margin-bottom:var(--w-s-4)} .w-card__date{display:block;font-size:var(--w-fs-sm);color:rgba(255,255,255,0.55)} .w-card__wod{display:block;font-size:var(--w-fs-h3);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:#ffffff} /* frosted-white inner panel — 50% white + subtle noise, always light (charcoal text) */ .w-card__panel{ position:relative; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='wn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wn)' opacity='0.06'/%3E%3C/svg%3E") repeat, rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%); border:1px solid rgba(255,255,255,0.55);border-radius:var(--w-r-lg);padding:var(--w-s-4); box-shadow:0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.7); color:var(--w-charcoal); } .w-card__panel>*{position:relative} .w-card__panel .w-card__title{color:var(--w-charcoal)} .w-card__panel .w-card__body{color:rgba(28,26,36,0.66)} .w-card__panel .w-tag{background:rgba(28,26,36,0.06);border-color:transparent;color:rgba(28,26,36,0.72);-webkit-backdrop-filter:none;backdrop-filter:none} /* soft widget — GRAY glass outer + white inner. Light in BOTH themes. */ .w-card--soft{ background:rgba(206,206,212,0.55);color:var(--w-charcoal); border:1px solid rgba(255,255,255,0.45); -webkit-backdrop-filter:blur(20px) saturate(125%);backdrop-filter:blur(20px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), var(--w-glass-shadow-soft); } .w-card--soft>.w-card__title{color:var(--w-charcoal)} .w-card--soft .w-tag{background:rgba(28,26,36,0.06);border-color:transparent;color:rgba(28,26,36,0.72);-webkit-backdrop-filter:none;backdrop-filter:none} .w-card--soft .w-card__date{color:rgba(28,26,36,0.45)} .w-card--soft .w-card__wod{color:rgba(28,26,36,0.62)} /* dark widget — force all text + pills white (overrides the panel's charcoal) */ .w-card--dark .w-card__panel{color:#ffffff} .w-card--dark .w-card__title{color:#ffffff} .w-card--dark .w-card__body{color:rgba(255,255,255,0.72)} .w-card--dark .w-tag{background:rgba(255,255,255,0.16);color:#ffffff;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} /* interactive */ .w-card--link{cursor:pointer} .w-card--link:hover{transform:translateY(-3px);border-color:var(--w-glass-line-bright); box-shadow:inset 0 1.5px 0 var(--w-glass-rim-top), inset 0 -1.5px 0 var(--w-glass-rim-bottom), var(--w-shadow-lg)} /* =========================================================================== 5 · SHARED PAGE BLOCKS (cross-page primitives) Section header · Forms · CTA band · Logo cloud · Stat blocks =========================================================================== */ /* --- 5.1 Section header (eyebrow badge + title + lead) --- */ .w-section-head{max-width:64ch;margin:0 auto var(--w-s-7);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--w-s-4)} .w-section-head--left{text-align:left;align-items:flex-start;margin-left:0;margin-right:0} .w-section-head__title{font-size:var(--w-fs-h2);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-snug);color:var(--w-text)} .w-section-head__lead{font-size:var(--w-fs-lead);color:var(--w-text-2);line-height:var(--w-lh-normal);max-width:60ch} /* --- 5.2 Forms --- */ .w-field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--w-s-4)} .w-label{font-size:var(--w-fs-sm);font-weight:var(--w-fw-medium);color:var(--w-text-2)} .w-input,.w-textarea,.w-select{ width:100%;font-family:var(--w-font);font-size:var(--w-fs-sm);color:var(--w-text); background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line);border-radius:var(--w-r-md); padding:12px 14px;transition:border-color var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease),background var(--w-dur) var(--w-ease)} .w-textarea{min-height:108px;resize:vertical;line-height:1.55} .w-input::placeholder,.w-textarea::placeholder{color:var(--w-text-3)} .w-input:hover,.w-textarea:hover,.w-select:hover{border-color:var(--w-glass-line-bright)} .w-input:focus,.w-textarea:focus,.w-select:focus{outline:none;border-color:var(--w-brand);box-shadow:0 0 0 3px var(--w-brand-soft)} .w-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center} .w-help{display:flex;align-items:center;gap:6px;font-size:var(--w-fs-xs);color:var(--w-text-3)} .w-help .w-icon{width:13px;height:13px;color:inherit} /* error state */ .w-field--error .w-label{color:var(--w-danger)} .w-field--error .w-input,.w-field--error .w-textarea,.w-field--error .w-select{border-color:var(--w-danger)} .w-field--error .w-input:focus,.w-field--error .w-textarea:focus,.w-field--error .w-select:focus{border-color:var(--w-danger);box-shadow:0 0 0 3px var(--w-danger-soft)} .w-field--error .w-help{color:var(--w-danger)} /* success state */ .w-field--ok .w-input,.w-field--ok .w-textarea,.w-field--ok .w-select{border-color:var(--w-success)} .w-field--ok .w-help{color:var(--w-success)} /* checkbox / radio */ .w-check{display:inline-flex;align-items:center;gap:10px;font-size:var(--w-fs-sm);color:var(--w-text-2);cursor:pointer} .w-check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;cursor:pointer; background:var(--w-glass-fill-soft);border:1px solid var(--w-glass-line-bright);border-radius:6px;position:relative;transition:all var(--w-dur) var(--w-ease)} .w-check input[type="radio"]{border-radius:var(--w-r-full)} .w-check input:checked{background:var(--w-grad-brand);border-color:transparent} .w-check input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)} .w-check input[type="radio"]:checked::after{left:4px;top:4px;width:6px;height:6px;border:0;border-radius:50%;background:#fff;transform:none} .w-check input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-brand-soft)} /* input + button row (newsletter / inline) */ .w-input-row{display:flex;gap:var(--w-s-3);align-items:stretch} .w-input-row .w-input{flex:1} /* --- 5.3 CTA band --- */ .w-cta-band{position:relative;overflow:hidden;text-align:center;border-radius:var(--w-r-2xl); padding:clamp(40px,5vw,72px) clamp(24px,5vw,64px); display:flex;flex-direction:column;align-items:center;gap:var(--w-s-5); background:var(--w-glass-fill);border:1px solid var(--w-glass-line); -webkit-backdrop-filter:var(--w-glass-blur-lg);backdrop-filter:var(--w-glass-blur-lg); box-shadow:inset 0 1px 0 var(--w-glass-rim-top), var(--w-glass-shadow)} .w-cta-band--brand{background:var(--w-card-brand-wash);border-color:var(--w-card-brand-line)} .w-cta-band__title{font-size:var(--w-fs-h1);font-weight:var(--w-fw-black);letter-spacing:var(--w-ls-tight);line-height:var(--w-lh-tight);color:var(--w-text);max-width:18ch} .w-cta-band__lead{font-size:var(--w-fs-lead);color:var(--w-text-2);max-width:54ch} .w-cta-band__actions{display:flex;gap:var(--w-s-3);flex-wrap:wrap;justify-content:center} /* --- 5.4 Logo / trust cloud --- */ .w-logo-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px)} .w-logo-cloud__item{height:26px;width:118px;background-size:contain;background-repeat:no-repeat;background-position:center; filter:grayscale(1) brightness(0) invert(1);opacity:.5;transition:opacity var(--w-dur) var(--w-ease),filter var(--w-dur) var(--w-ease)} :root[data-theme="light"] .w-logo-cloud__item{filter:grayscale(1) brightness(0);opacity:.42} .w-logo-cloud__item:hover{filter:none;opacity:1} .w-trust-label{text-align:center;font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.12em; font-size:var(--w-fs-xs);color:var(--w-text-3);margin-bottom:var(--w-s-5)} /* --- 5.5 Stat blocks — thin H1 numbers, vertical-line separated, title/detail under --- */ .w-stat-grid{display:flex;flex-wrap:wrap} .w-stat{flex:1 1 0;min-width:128px;padding:0 var(--w-s-4);display:flex;flex-direction:column;gap:8px; border-left:1px solid var(--w-line)} .w-stat:first-child{padding-left:0;border-left:none} .w-stat:last-child{padding-right:0} .w-stat__value{font-size:var(--w-fs-h1);font-weight:300;white-space:nowrap;letter-spacing:-0.02em;line-height:1.08;color:var(--w-text);padding-bottom:2px} .w-stat__value--brand{background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .w-stat__label{font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-text)} .w-stat__detail{font-size:var(--w-fs-xs);color:var(--w-text-3);line-height:1.5} .w-stat--center{align-items:center;text-align:center} @media(max-width:600px){ .w-stat{flex-basis:100%;border-left:none;border-top:1px solid var(--w-line);padding:var(--w-s-4) 0 0} .w-stat:first-child{border-top:none;padding-top:0} } /* --- 5.6 Logo marquee — continuous right→left strip, white/charcoal silhouettes --- */ .w-marquee{overflow:hidden;position:relative;width:100%; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .w-marquee__track{display:flex;align-items:center;width:max-content;gap:clamp(32px,4vw,56px); animation:w-marquee 38s linear infinite} .w-marquee:hover .w-marquee__track{animation-play-state:paused} .w-marquee__item{height:26px;width:116px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center; filter:brightness(0) invert(1);opacity:.72} :root[data-theme="light"] .w-marquee__item{filter:brightness(0);opacity:.55} /* lockup — icon-only logos get the company name in text */ .w-marquee__lockup{height:26px;flex:none;display:inline-flex;align-items:center;gap:9px} .w-marquee__lockup i{width:28px;height:28px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center;filter:brightness(0) invert(1);opacity:.72} :root[data-theme="light"] .w-marquee__lockup i{filter:brightness(0);opacity:.55} .w-marquee__lockup b{font-family:var(--w-font);font-weight:600;font-size:16px;letter-spacing:-0.01em;color:rgba(255,255,255,0.72)} :root[data-theme="light"] .w-marquee__lockup b{color:rgba(28,26,36,0.62)} @keyframes w-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.w-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:var(--w-s-5)}} /* =========================================================================== 6 · REDUCED-TRANSPARENCY FALLBACK — swap frost for solid surfaces =========================================================================== */ @media (prefers-reduced-transparency: reduce){ .w-glass,.w-btn--glass,.w-tag,.w-card,.w-cta-band,.w-itile{background:var(--w-card);border-color:var(--w-line)} .w-card--feature{background:var(--w-card-hi)} } /* icons.css */ /* ============================================================================ CANONICAL FEATURE → ICON MAP (use the SAME icon for a feature everywhere) App / Carly / Experts+ features are tied to a bespoke icon — never swap them: Magic Write .......... #i-magic (filled 4-pt star — the one bespoke fill) Pipeline scanning .... #i-scan Proof collection ..... #i-proof Opportunity matching . #i-match Expert booking ....... #i-booking (also: expert-led selling) Expert programs ...... #i-program Availability/sched ... #i-clock In-app widget ........ #i-widget Category/decorative (consistent within a category, may vary by page): Sales #i-trending · Marketing #i-megaphone · Customer Success #i-heart · RevOps #i-settings · Close deals #i-trophy · Customer stories #i-quote · Advocates #i-thumbs-up · Blog #i-article · Case studies #i-file · Playbooks #i-book · Calculators #i-calculator · Docs #i-link · Talk to us #i-message · Events #i-calendar No two distinct features share an icon. Add a NEW Solar-linear symbol for any new feature; don't reuse a generic one. ============================================================================ */ /* ============================================================================ DS7-Web · ICONS, AVATARS & LOGOS Synthesis of DS1 (.icon-box) · DS_Carly (currentColor monoline) · DS5 (.n-glyph, .al-mark--tile). Monoline icons in rounded-rect tiles; ink = white (dark) / charcoal (light) via --w-icon-ink. Requires tokens.css + assets.css. ============================================================================ */ /* --------------------------------------------------------------------------- 1 · MONOLINE ICON · .w-icon viewBox 0 0 24 24 · fill:none · stroke:currentColor · round caps. stroke-width 2 base, 2.4 small, 1.6 large (per DS_Carly tier rules). --------------------------------------------------------------------------- */ /* .w-icon IS the — fill/stroke go on it directly (inherited by the symbol paths). Thin rounded stroke = refined iOS / Hightouch weight. Ink = white (dark) / charcoal (light). */ .w-icon{display:inline-block;vertical-align:middle;width:20px;height:20px;flex:none;color:var(--w-icon-ink); fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .w-icon--sm{width:16px;height:16px;stroke-width:1.9} .w-icon--lg{width:28px;height:28px;stroke-width:1.4} /* inline-in-text icon picks up the surrounding text color instead of ink */ .w-icon--inherit{color:inherit} /* filled variant — for solid marks like the Magic Write star (DS_Carly §40) */ .w-icon--fill{fill:currentColor;stroke-width:1.2} /* --------------------------------------------------------------------------- 2 · ICON TILE · .w-itile (rounded rectangle) Default = liquid-glass tile, icon ink. Variants: --brand · --solid. Sizes: --sm 34 · (base) 44 · --lg 56. --------------------------------------------------------------------------- */ .w-itile{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:44px;height:44px;border-radius:var(--w-r-md);color:var(--w-icon-ink); background:var(--w-glass-fill);border:1px solid var(--w-glass-line); -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur); box-shadow:inset 0 1px 0 var(--w-glass-rim-top), var(--w-glass-shadow-soft); } .w-itile .w-icon{width:22px;height:22px;color:inherit} .w-itile--sm{width:34px;height:34px;border-radius:var(--w-r-sm)} .w-itile--sm .w-icon{width:18px;height:18px;stroke-width:1.8} .w-itile--lg{width:56px;height:56px;border-radius:var(--w-r-lg)} .w-itile--lg .w-icon{width:28px;height:28px;stroke-width:1.4} /* brand tile — gradient fill, white icon + glow */ .w-itile--brand{background:var(--w-grad-brand);border-color:transparent;color:var(--w-charcoal); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), var(--w-glow-brand)} /* solid charcoal tile — white icon in both themes */ .w-itile--solid{background:var(--w-charcoal);border-color:transparent;color:#ffffff} /* --------------------------------------------------------------------------- 3 · AVATARS · .w-avatar (circular, retina base64) Set the face with style="background-image:var(--w-img-av-jeff)". --------------------------------------------------------------------------- */ .w-avatar{ width:44px;height:44px;border-radius:var(--w-r-full);flex:none; background-size:cover;background-position:center;background-color:var(--w-card); border:2px solid var(--w-bg);box-shadow:var(--w-shadow-sm); } .w-avatar--sm{width:32px;height:32px} .w-avatar--lg{width:64px;height:64px} .w-avatar--ring{box-shadow:0 0 0 2px var(--w-brand), var(--w-shadow-sm)} /* overlapping stack */ .w-avatar-stack{display:inline-flex;align-items:center} .w-avatar-stack .w-avatar{margin-left:-12px} .w-avatar-stack .w-avatar:first-child{margin-left:0} /* --------------------------------------------------------------------------- 4 · BRAND MARKS · .w-mark (Carly face · Visor generic-AI) --------------------------------------------------------------------------- */ .w-mark{width:44px;height:44px;border-radius:var(--w-r-full);flex:none; background-size:cover;background-position:center;box-shadow:var(--w-shadow-sm)} .w-mark--carly{background-image:var(--w-img-carly)} /* Visor = floating mark — transparent PNG, NO circle / NO bg / NO shadow */ .w-mark--visor{background-image:var(--w-img-visor);background-size:contain;background-repeat:no-repeat; background-color:transparent;border-radius:0;box-shadow:none} .w-mark--lg{width:64px;height:64px} .w-mark--sm{width:32px;height:32px} /* Experts+ = floating mark, structural twin of .w-mark--visor (no circle/bg/shadow). Inline SVG (not a background-image) because the E needs to switch color per surface — slash stays fixed brand purple, the E resolves via currentColor, set explicitly per context below (never rely on inheritance here). */ .w-mark--expertsplus{background:none;box-shadow:none;border-radius:0} .w-mark--expertsplus svg{display:block;width:100%;height:100%} .w-nav__phead .w-mark--expertsplus,.w-nav__feature .w-mark--expertsplus{color:var(--w-nav-ink)} .ss-card .w-mark--expertsplus{color:#fff} /* --------------------------------------------------------------------------- 5 · COMPANY LOGOS · .w-logo-tile (DS5 .al-mark--tile pattern) Logo on a white rounded-rect so brand colors read in both themes. --------------------------------------------------------------------------- */ .w-logo-tile{ width:56px;height:56px;border-radius:18px;padding:11px;flex:none; background:#ffffff;border:1px solid var(--w-glass-line);box-shadow:var(--w-shadow-sm); } .w-logo-tile i{display:block;width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center} .w-logo-tile--sm{width:44px;height:44px;border-radius:14px;padding:8px} /* SE wordmark (transparent PNG, keep on the surface, not a white tile) */ .w-logo-se{height:28px;background-image:var(--w-img-se);background-size:contain;background-repeat:no-repeat;background-position:left center} /* --------------------------------------------------------------------------- 6 · ICONS INSIDE COMPONENTS — inherit the component's color + sensible size --------------------------------------------------------------------------- */ .w-btn .w-icon{width:18px;height:18px;color:inherit} .w-tag .w-icon{width:14px;height:14px;color:inherit} .w-badge .w-icon{width:14px;height:14px;color:inherit} .w-card__icon .w-icon{width:24px;height:24px;color:inherit} .w-card__row-ic .w-icon{width:18px;height:18px;color:inherit} /* --------------------------------------------------------------------------- 7 · Experts+ wordmark "+" — small thin proportional plus. Placed LAST so it beats the component .w-icon overrides above (.w-tag/.w-btn/.w-card__icon …). --------------------------------------------------------------------------- */ .w-icon.ep-plus{width:0.72em !important;height:0.72em !important;margin-left:0.08em;vertical-align:0.03em;stroke-width:3} /* nav.css */ /* ============================================================================ DS7-Web · NAVIGATION (shared partial) — Hightouch-style premium mega-menu. Liquid-glass bar · Carly-hero IA · wide multi-column mega-dropdowns · drawer. Requires tokens.css + icons.css. Markup: nav.html · behavior: nav.js. ============================================================================ */ /* ── ANCHOR OFFSET (sitewide, 2026-08-07) ──────────────────────────────────── .w-nav is position:sticky at 68px, so without this every in-page anchor jump lands with its target *underneath* the nav. Measured in chromium before the fix: 10 of 16 sampled anchor jumps were covered by exactly 68px at 1440 and 390. 88px = the 68px nav + 20px of breathing room. This value was NOT invented — it is what use-cases.css and use-cases-experts.css had already chosen page-scoped, and those were the only two sampled pages that passed. Uses scroll-padding-top on the SCROLL CONTAINER rather than scroll-margin-top on every target, so it covers targets nobody remembered to style. The three former page-scoped scroll-margin-top rules were DELETED in the same pass — they would have stacked on top of this (88+88=176px) instead of being overridden. Gate: _tools/qa/anchor_offset_qa.py (must stay 0/16). */ html{scroll-padding-top:calc(var(--w-nav-h) + 20px)} .w-nav{ /* ONE surface + ink set shared by the bar AND the dropdown → they always match. JS (nav.js) flips .is-on-light / .is-on-dark per the section behind the header. */ --w-nav-surface:#1c1a24; --w-nav-ink:#ffffff; --w-nav-ink-2:rgba(255,255,255,0.72); --w-nav-ink-3:rgba(255,255,255,0.50); --w-nav-line:rgba(255,255,255,0.10); --w-nav-hover:rgba(255,255,255,0.08); /* logo variant swap + CTA fill — ride the same cascade as the ink tokens above */ --w-nav-logo-light:block; --w-nav-logo-dark:none; --w-nav-cta-fill:#ffffff; --w-nav-cta-ink:var(--w-charcoal); position:sticky;top:0;z-index:var(--w-z-nav); display:flex;align-items:center;gap:var(--w-s-5); padding:0 var(--w-container-pad);height:68px; background:var(--w-nav-surface);color:var(--w-nav-ink); font-family:var(--w-font); transition:background var(--w-dur) var(--w-ease),color var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease); } .w-nav--ruled{border-bottom:1px solid var(--w-nav-line)} .w-nav.is-stuck{box-shadow:0 6px 20px -8px rgba(8,6,16,0.18)} /* default skin follows the PAGE theme (used when JS adaptive isn't driving it, e.g. spec demo) */ :root[data-theme="light"] .w-nav{ --w-nav-surface:#ffffff; --w-nav-ink:var(--w-charcoal); --w-nav-ink-2:rgba(28,26,36,0.66); --w-nav-ink-3:rgba(28,26,36,0.50); --w-nav-line:rgba(28,26,36,0.10); --w-nav-hover:rgba(28,26,36,0.05); --w-nav-logo-light:none; --w-nav-logo-dark:block; --w-nav-cta-fill:var(--w-charcoal); --w-nav-cta-ink:#ffffff; } /* adaptive skins — toggled by JS based on [data-nav-surface] of the section under the bar */ .w-nav.is-on-dark{ --w-nav-surface:#1c1a24; --w-nav-ink:#ffffff; --w-nav-ink-2:rgba(255,255,255,0.72); --w-nav-ink-3:rgba(255,255,255,0.50); --w-nav-line:rgba(255,255,255,0.10); --w-nav-hover:rgba(255,255,255,0.08); --w-nav-logo-light:block; --w-nav-logo-dark:none; --w-nav-cta-fill:#ffffff; --w-nav-cta-ink:var(--w-charcoal); } .w-nav.is-on-light, .w-nav:has(.w-nav__item.is-open > .w-nav__mega--solutions), .w-nav:has(.w-nav__item:focus-within > .w-nav__mega--solutions){ --w-nav-surface:#ffffff; --w-nav-ink:var(--w-charcoal); --w-nav-ink-2:rgba(28,26,36,0.66); --w-nav-ink-3:rgba(28,26,36,0.50); --w-nav-line:rgba(28,26,36,0.10); --w-nav-hover:rgba(28,26,36,0.05); --w-nav-logo-light:none; --w-nav-logo-dark:block; --w-nav-cta-fill:var(--w-charcoal); --w-nav-cta-ink:#ffffff; } /* SOLUTIONS = the one deliberately-light menu. The panel is pinned light (see .w-nav__mega--solutions further down) and, while it is open, the BAR joins it so header + panel read as a single surface. This does NOT replace the adaptive skin: the JS is-on-dark/is-on-light toggle keeps running underneath, and the instant the panel closes the bar snaps back to whatever the section behind it dictates. The :has() rules simply out-specify .is-on-dark for the duration of the hover/focus. Browsers without :has() degrade gracefully — bar keeps its adaptive skin, panel still renders light. */ /* light-skin action buttons: ghost (Sign in) legible + primary (Book a Demo) charcoal */ .w-nav.is-on-light .w-nav__actions .w-btn--ghost, .w-nav:has(.w-nav__item.is-open > .w-nav__mega--solutions) .w-nav__actions .w-btn--ghost, .w-nav:has(.w-nav__item:focus-within > .w-nav__mega--solutions) .w-nav__actions .w-btn--ghost{color:var(--w-charcoal)} .w-nav.is-on-light .w-nav__actions .w-btn--ghost:hover, .w-nav:has(.w-nav__item.is-open > .w-nav__mega--solutions) .w-nav__actions .w-btn--ghost:hover, .w-nav:has(.w-nav__item:focus-within > .w-nav__mega--solutions) .w-nav__actions .w-btn--ghost:hover{color:var(--w-charcoal);background:var(--w-nav-hover)} .w-nav.is-on-light .w-nav__actions .w-btn--primary, .w-nav:has(.w-nav__item.is-open > .w-nav__mega--solutions) .w-nav__actions .w-btn--primary, .w-nav:has(.w-nav__item:focus-within > .w-nav__mega--solutions) .w-nav__actions .w-btn--primary{background:var(--w-charcoal);color:#fff;border-color:rgba(255,255,255,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px -10px rgba(28,26,36,0.55)} .w-nav.is-on-light .w-nav__actions .w-btn--primary:hover, .w-nav:has(.w-nav__item.is-open > .w-nav__mega--solutions) .w-nav__actions .w-btn--primary:hover, .w-nav:has(.w-nav__item:focus-within > .w-nav__mega--solutions) .w-nav__actions .w-btn--primary:hover{background:#2a2735;transform:translateY(-1px)} /* logo */ .w-nav__logo{display:inline-flex;align-items:center;font-size:1.25rem;font-weight:var(--w-fw-black); letter-spacing:var(--w-ls-tight);color:var(--w-nav-ink);text-decoration:none;flex:none} .w-nav__logo .slash{background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-right:1px} /* wordmark: two colour variants, one shown per nav skin (vars set with the ink tokens) */ .w-nav__logo-img{height:30px;width:auto;flex:none} .w-nav__logo-img--light{display:var(--w-nav-logo-light)} .w-nav__logo-img--dark{display:var(--w-nav-logo-dark)} /* center menu */ .w-nav__menu{display:flex;align-items:center;gap:2px;margin:0 auto} .w-nav__item{position:static} /* mega panel anchors to .w-nav, not the item */ .w-nav__link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--w-r-pill); font-size:var(--w-fs-sm);font-weight:var(--w-fw-medium);color:var(--w-nav-ink-2);text-decoration:none;cursor:pointer; background:none;border:none;font-family:inherit;white-space:nowrap;transition:color var(--w-dur) var(--w-ease),background var(--w-dur) var(--w-ease)} .w-nav__link:hover,.w-nav__item.is-open .w-nav__link,.w-nav__item:focus-within .w-nav__link{color:var(--w-nav-ink);background:var(--w-nav-hover)} .w-nav__caret{width:13px;height:13px;transition:transform var(--w-dur) var(--w-ease)} .w-nav__item.is-open .w-nav__caret,.w-nav__item:focus-within .w-nav__caret{transform:rotate(180deg)} /* ── MEGA PANEL ───────────────────────────────────────────────────────────── */ .w-nav__mega{ position:absolute;top:100%;left:0;right:0;transform:translateY(8px); padding:var(--w-s-7) var(--w-container-pad); border-radius:0 0 var(--w-r-2xl) var(--w-r-2xl); background:var(--w-nav-surface);border:1px solid var(--w-nav-line);border-top:none;color:var(--w-nav-ink); -webkit-backdrop-filter:var(--w-glass-blur-lg);backdrop-filter:var(--w-glass-blur-lg); box-shadow:var(--w-glass-shadow); opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--w-dur) var(--w-ease),transform var(--w-dur) var(--w-ease); } /* invisible bridge so the cursor can cross the gap from the bar into the panel */ .w-nav__mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .w-nav__item.is-open .w-nav__mega,.w-nav__item:focus-within .w-nav__mega{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .w-nav__mega-grid{display:grid;gap:0;max-width:var(--w-container);margin:0 auto} .w-nav__mega--product .w-nav__mega-grid{grid-template-columns:1.15fr 1.15fr 1fr} .w-nav__mega--platform .w-nav__mega-grid{grid-template-columns:1.1fr 1.1fr 1fr} .w-nav__mega--solutions .w-nav__mega-grid{grid-template-columns:1fr 1fr 1.1fr} .w-nav__mega--integrations .w-nav__mega-grid{grid-template-columns:1fr 1fr 1fr} /* Solutions panel is ALWAYS the light skin, regardless of the bar's is-on-dark / is-on-light state. Platform and Solutions are now structural twins (two product columns each), so the surface flip is what tells the user which menu they're in. Re-declaring the --w-nav-* set on the panel re-themes every child (kicker, phead, ptag, mrow, feat, rules) with no per-element overrides. */ .w-nav__mega--solutions{ --w-nav-surface:#ffffff; --w-nav-ink:var(--w-charcoal); --w-nav-ink-2:rgba(28,26,36,0.66); --w-nav-ink-3:rgba(28,26,36,0.50); --w-nav-line:rgba(28,26,36,0.10); --w-nav-hover:rgba(28,26,36,0.05); } .w-nav__mega--resources .w-nav__mega-grid{grid-template-columns:1fr 1.25fr 1fr} .w-nav__mega-col{padding:0 var(--w-s-6);border-left:1px solid var(--w-nav-line);min-width:0} .w-nav__mega-col:first-child{padding-left:0;border-left:none} .w-nav__mega-col:last-child{padding-right:0} .w-nav__kicker{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.12em; font-size:10px;color:var(--w-nav-ink-3);margin-bottom:var(--w-s-4)} /* product headline (Carly / Experts+) */ .w-nav__phead{display:inline-flex;align-items:center;gap:9px;font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold); letter-spacing:var(--w-ls-tight);color:var(--w-nav-ink);text-decoration:none;margin-bottom:6px} .w-nav__phead .w-mark{width:24px;height:24px;flex:none} .w-nav__phead .w-nav__arrow{width:16px;height:16px;color:var(--w-nav-ink-3);transition:transform var(--w-dur) var(--w-ease)} .w-nav__phead:hover{color:var(--w-brand-2)} .w-nav__phead:hover .w-nav__arrow{transform:translateX(3px);color:var(--w-brand-2)} .w-nav__ptag{font-size:var(--w-fs-sm);color:var(--w-nav-ink-3);line-height:1.5;margin-bottom:var(--w-s-5);max-width:30ch} /* mega row — bare monoline icon + title + subtitle (Hightouch style) */ .w-nav__mrow{display:flex;align-items:flex-start;gap:12px;padding:13px 8px;margin:0 -8px;border-radius:var(--w-r-md); text-decoration:none;transition:background var(--w-dur) var(--w-ease)} .w-nav__mrow:hover{background:var(--w-nav-hover)} .w-nav__mrow .w-icon{width:20px;height:20px;flex:none;margin-top:1px;color:var(--w-nav-ink)} .w-nav__mrow span{min-width:0} .w-nav__mrow b{display:block;font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-nav-ink)} .w-nav__mrow small{display:block;font-size:var(--w-fs-xs);color:var(--w-nav-ink-3);margin-top:1px;line-height:1.4} /* plain link list (solutions columns) */ .w-nav__llist{display:flex;flex-direction:column;gap:1px} .w-nav__llist a{display:block;padding:8px;margin:0 -8px;border-radius:var(--w-r-md); font-size:var(--w-fs-sm);font-weight:var(--w-fw-medium);color:var(--w-nav-ink-2);text-decoration:none;transition:all var(--w-dur) var(--w-ease)} .w-nav__llist a:hover{color:var(--w-nav-ink);background:var(--w-nav-hover)} /* featured rail */ .w-nav__feat{display:block;text-decoration:none} .w-nav__feat-card{aspect-ratio:16/10;border-radius:var(--w-r-lg);overflow:hidden;margin-bottom:var(--w-s-3); background:var(--w-card-brand-wash);border:1px solid var(--w-card-brand-line); display:flex;align-items:center;justify-content:center} .w-nav__feat-card .w-mark{width:46px;height:46px} .w-nav__feat-img{width:100%;height:100%;object-fit:cover;display:block} .w-nav__feat-img--zoom{transform:translateY(10%) scale(1.15)} .w-nav__feat-img--zoom30{transform:scale(1.3)} .w-nav__feat-img--zoom20{transform:scale(1.2)} .w-nav__feat b{display:block;font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-nav-ink)} .w-nav__feat p{font-size:var(--w-fs-xs);color:var(--w-nav-ink-3);line-height:1.5;margin:4px 0 var(--w-s-3)} .w-nav__feat-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-brand-2)} .w-nav__feat-link .w-icon{width:14px;height:14px;color:inherit;transition:transform var(--w-dur) var(--w-ease)} .w-nav__feat:hover .w-nav__feat-link .w-icon{transform:translateX(3px)} /* actions */ .w-nav__actions{display:flex;align-items:center;gap:var(--w-s-3);flex:none} /* nav CTA — the terminal action in the bar. Deliberately the highest-contrast object present: solid fill inverted against the current skin (white on dark, charcoal on light) rather than the softer brand-glass .w-btn--primary used in page bodies. Fill/ink come from --w-nav-cta-* set alongside the ink tokens, so it flips with the adaptive skin AND with the pinned-light Solutions panel. */ .w-nav__cta{ background:var(--w-nav-cta-fill);color:var(--w-nav-cta-ink);border-color:transparent; font-weight:var(--w-fw-semi);letter-spacing:-0.01em; box-shadow:0 1px 2px rgba(8,6,16,0.10), 0 8px 22px -12px rgba(8,6,16,0.45); } .w-nav__cta .w-icon{width:16px;height:16px;margin-left:-2px; transition:transform var(--w-dur) var(--w-ease)} .w-nav__cta:hover{background:var(--w-nav-cta-fill);color:var(--w-nav-cta-ink);transform:translateY(-1px); box-shadow:0 2px 4px rgba(8,6,16,0.12), 0 14px 30px -12px rgba(8,6,16,0.55)} .w-nav__cta:hover .w-icon{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ .w-nav__cta:hover{transform:none} .w-nav__cta:hover .w-icon{transform:none} } /* ── PROFILE / ACCOUNT menu (rightmost) ──────────────────────────────────── */ .w-nav__profile{position:relative;flex:none} .w-nav__avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:var(--w-r-full);cursor:pointer;flex:none; background:var(--w-nav-hover);border:1px solid var(--w-nav-line);color:var(--w-nav-ink-2); transition:color var(--w-dur) var(--w-ease),background var(--w-dur) var(--w-ease), border-color var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)} /* .w-icon hard-sets color:var(--w-icon-ink), which is WHITE under the dark root theme and is only re-declared inside .cz-light sections — the nav bar sits outside those. So the avatar glyph stayed white on the light nav skin and was near-invisible. color:inherit hands it back to the button, which already tracks the skin via --w-nav-ink-2 (light glyph on dark bar, charcoal glyph on light bar). */ .w-nav__avatar .w-icon{width:20px;height:20px;color:inherit} .w-nav__avatar:hover,.w-nav__profile.is-open .w-nav__avatar{color:var(--w-nav-ink);border-color:var(--w-nav-ink-3)} .w-nav__profile.is-open .w-nav__avatar{background:var(--w-nav-hover)} .w-nav__avatar:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)} .w-nav__pmenu{position:absolute;top:calc(100% + 10px);right:0;width:290px; padding:var(--w-s-4);border-radius:var(--w-r-lg); background:var(--w-nav-surface);border:1px solid var(--w-nav-line);color:var(--w-nav-ink); -webkit-backdrop-filter:var(--w-glass-blur-lg);backdrop-filter:var(--w-glass-blur-lg); box-shadow:var(--w-glass-shadow); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px); transition:opacity var(--w-dur) var(--w-ease),transform var(--w-dur) var(--w-ease),visibility var(--w-dur) var(--w-ease)} /* invisible bridge from the avatar into the panel */ .w-nav__pmenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .w-nav__profile.is-open .w-nav__pmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .w-nav__pgroup + .w-nav__pgroup{margin-top:var(--w-s-3);padding-top:var(--w-s-3);border-top:1px solid var(--w-nav-line)} .w-nav__pkicker{display:flex;align-items:center;font-family:var(--w-font-kicker);text-transform:uppercase; letter-spacing:.12em;font-size:10px;color:var(--w-nav-ink-3);padding:0 8px;margin-bottom:6px} .w-nav__prow{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--w-r-md); text-decoration:none;transition:background var(--w-dur) var(--w-ease)} .w-nav__prow:hover{background:var(--w-nav-hover)} .w-nav__prow .w-mark{width:30px;height:30px;flex:none} .w-nav__pico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none; border-radius:var(--w-r-sm);background:var(--w-nav-hover);border:1px solid var(--w-nav-line)} .w-nav__pico .w-icon{width:16px;height:16px;color:var(--w-nav-ink)} .w-nav__ptx{min-width:0;flex:1} .w-nav__ptx b{display:block;font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-nav-ink)} .w-nav__ptx small{display:block;font-size:var(--w-fs-xs);color:var(--w-nav-ink-3);margin-top:1px;line-height:1.4} .w-nav__pext{width:14px;height:14px;flex:none;color:var(--w-nav-ink-3)} .w-nav__prow:hover .w-nav__pext{color:var(--w-nav-ink-2)} /* hamburger + drawer */ .w-nav__burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex:none; background:var(--w-nav-hover);border:1px solid var(--w-nav-line);border-radius:var(--w-r-md);color:var(--w-nav-ink);cursor:pointer} .w-nav__drawer{display:none} /* ── responsive: collapse to drawer < 1024px ─────────────────────────────── */ @media(max-width:1024px){ .w-nav__menu,.w-nav__actions{display:none} .w-nav__burger{display:inline-flex}.w-nav.is-on-light .w-nav__burger{border-color:#9a9a9a}.w-nav.is-on-light .w-nav__burger svg{color:#9a9a9a;stroke:#9a9a9a}.w-nav.is-on-dark .w-nav__burger{border-color:rgba(255,255,255,.55)}.w-nav.is-on-dark .w-nav__burger svg{color:#fff;stroke:#fff} .w-nav__logo{margin-right:auto} .w-nav__logo-img{height:25px} .w-nav__drawer{display:block;position:fixed;inset:0;z-index:var(--w-z-drawer);visibility:hidden;pointer-events:none} .w-nav__drawer.is-open{visibility:visible;pointer-events:auto} .w-nav__scrim{position:absolute;inset:0;background:rgba(8,6,16,0.5);opacity:0;transition:opacity var(--w-dur) var(--w-ease)} .w-nav__drawer.is-open .w-nav__scrim{opacity:1} .w-nav__panel{--w-nav-ink:var(--w-text);--w-nav-ink-2:var(--w-text-2);--w-nav-ink-3:var(--w-text-3);--w-nav-line:var(--w-glass-line);--w-nav-hover:var(--w-glass-fill-soft); --w-nav-cta-fill:var(--w-text);--w-nav-cta-ink:var(--w-bg); position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);overflow-y:auto; padding:var(--w-s-5);background:var(--w-bg-elev);border-left:1px solid var(--w-glass-line); transform:translateX(100%);transition:transform var(--w-dur) var(--w-ease);display:flex;flex-direction:column;gap:6px} .w-nav__drawer.is-open .w-nav__panel{transform:translateX(0)} .w-nav__panel .w-nav__close{align-self:flex-end;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; background:none;border:none;color:var(--w-nav-ink);cursor:pointer;margin-bottom:var(--w-s-2)} .w-nav__panel .w-nav__feature{padding:12px 10px} .w-nav__panel .w-nav__colhead{padding:14px 10px 4px} .w-nav__panel .w-nav__actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--w-s-3);margin-top:var(--w-s-4)} .w-nav__panel .w-btn{width:100%} } /* drawer item rows (reused) */ .w-nav__feature{display:flex;align-items:flex-start;gap:var(--w-s-3);padding:10px;border-radius:var(--w-r-md);text-decoration:none} .w-nav__feature:hover{background:var(--w-nav-hover)} .w-nav__feature .w-itile{width:38px;height:38px;border-radius:var(--w-r-sm)} .w-nav__feature .w-itile .w-icon{width:18px;height:18px} .w-nav__feature .w-mark{width:38px;height:38px;flex:none} .w-nav__ft-tx b{display:flex;align-items:center;gap:6px;font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-nav-ink)} .w-nav__ft-tx small{display:block;font-size:var(--w-fs-xs);color:var(--w-nav-ink-3);margin-top:2px;line-height:1.45} .w-nav__colhead{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);color:var(--w-nav-ink-3);padding:6px 10px 2px} .w-nav__new{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.08em;font-size:9px; color:var(--w-brand-2);background:var(--w-brand-soft);border:1px solid var(--w-brand-line);border-radius:var(--w-r-pill);padding:2px 6px} /* footer.css */ /* ============================================================================ DS7-Web · FOOTER (shared partial) — sitemap footer. ALWAYS CHARCOAL regardless of theme; text is fixed light-on-charcoal. Requires tokens.css + icons.css. Markup: footer.html. ============================================================================ */ .w-footer{ background:var(--w-charcoal);color:rgba(255,255,255,0.62);font-family:var(--w-font); padding:var(--w-s-9) var(--w-container-pad) var(--w-s-6);border-top:1px solid rgba(255,255,255,0.07); } .w-footer__inner{max-width:var(--w-container-wide);margin:0 auto} /* top: brand + link columns */ .w-footer__top{display:grid;grid-template-columns:1.3fr repeat(6,1fr);gap:var(--w-s-6)} .w-footer__brand{max-width:260px} .w-footer__logo{display:inline-flex;align-items:center;font-size:1.25rem;font-weight:var(--w-fw-black); letter-spacing:var(--w-ls-tight);color:#ffffff;text-decoration:none} .w-footer__logo .slash{background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-right:1px} .w-footer__logo-img{height:32px;width:auto;display:block} .w-footer__tag{margin-top:var(--w-s-3);font-size:var(--w-fs-sm);color:rgba(255,255,255,0.48);line-height:1.6} .w-footer__social{display:flex;gap:var(--w-s-2);margin-top:var(--w-s-4)} .w-footer__social .w-itile{width:36px;height:36px;border-radius:var(--w-r-sm); background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);color:#ffffff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} .w-footer__social .w-itile:hover{background:rgba(255,255,255,0.12)} .w-footer__social .w-itile .w-icon{width:16px;height:16px} .w-footer__col h3{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em; font-size:var(--w-fs-xs);color:rgba(255,255,255,0.52);margin:0 0 var(--w-s-4)} .w-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .w-footer__link{font-size:var(--w-fs-sm);color:rgba(255,255,255,0.64);text-decoration:none;transition:color var(--w-dur) var(--w-ease)} .w-footer__link:hover{color:#ffffff} /* bottom bar */ .w-footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--w-s-4); margin-top:var(--w-s-8);padding-top:var(--w-s-5);border-top:1px solid rgba(255,255,255,0.07)} .w-footer__copy{font-size:var(--w-fs-xs);color:rgba(255,255,255,0.52)} .w-footer__legal{display:flex;flex-wrap:wrap;gap:var(--w-s-5)} .w-footer__legal a{font-size:var(--w-fs-xs);color:rgba(255,255,255,0.52);text-decoration:none} .w-footer__legal a:hover{color:rgba(255,255,255,0.72)} .w-footer__status{display:inline-flex;align-items:center;gap:8px;font-size:var(--w-fs-xs);color:rgba(255,255,255,0.52)} .w-footer__status i{width:8px;height:8px;border-radius:var(--w-r-full);background:var(--w-success);box-shadow:0 0 8px var(--w-success)} .w-footer__signoff{font-family:var(--w-font-serif);font-style:italic;font-size:var(--w-fs-sm);color:rgba(255,255,255,0.72)} @media(max-width:1024px){.w-footer__top{grid-template-columns:1fr 1fr 1fr;gap:var(--w-s-6)}.w-footer__brand{grid-column:1/-1;max-width:none}} @media(max-width:560px){.w-footer__top{grid-template-columns:1fr}.w-footer__bottom{flex-direction:column;align-items:flex-start}} /* ── REVERSE sticky reveal: the FULL footer section pins; the giant /Experts wordmark sits beneath it (sibling) and slides up into view from under the pinned footer. */ .w-footer{position:relative;z-index:2;background:var(--w-charcoal); box-shadow:0 24px 40px -18px rgba(0,0,0,.55)} .w-footer__inner{position:relative;z-index:2} .w-footer__bigmark{position:relative;z-index:1;overflow:hidden;width:100%;line-height:.74;background:var(--w-charcoal)} .w-footer__bigmark-tx{display:block;text-align:center;white-space:nowrap; font-weight:var(--w-fw-black);letter-spacing:-.05em;font-size:clamp(92px,24.6vw,470px); color:#fff;transform:none;will-change:transform} .w-footer__bigmark-tx .slash{background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @media(prefers-reduced-motion:reduce){.w-footer__bigmark-tx{transform:none}} /* ── CANONICAL footer peel-up reveal (2026-08-06). SINGLE SOURCE OF TRUTH — do NOT re-declare this in a page CSS file. Lifted verbatim from the reference implementation on /experts/solutions/sales/, which Jeff selected as the target feel. How it works: on desktop the giant /Experts mark is taken out of flow and pinned to the BOTTOM OF THE VIEWPORT at z-index 0. `main` and `.w-footer` are opaque and stack above it, so the mark is hidden during normal scrolling. At the bottom of the document, continuing to scroll rubber-bands the in-flow content upward while the fixed mark stays put — that is the "resistance", the peek, and the elastic snap-back. There is no scroll hijacking and no extra document height; the effect is entirely the browser's native overscroll behaving against a fixed layer. `transform:none!important` is load-bearing: the translateY scrub in base.js writes an INLINE transform on .w-footer__bigmark-tx on every page, which would otherwise fight the pinned mark. The !important is what neutralizes it. Below 901px there is no room to peel and no rubber-band headroom, so the mark degrades to a static, viewport-fitted wordmark at the end of the page. */ @media(min-width:901px){ main{position:relative;z-index:1;background:var(--w-bg)} .w-footer{position:relative;z-index:1} .w-footer__bigmark{position:fixed!important;left:0;right:0;bottom:0;z-index:0;overflow:hidden} .w-footer__bigmark-tx{transform:none!important} } @media(max-width:900px){ .w-footer__bigmark-tx{transform:none!important;font-size:clamp(52px,21vw,150px)} }