/* ============================================ CRITICAL START DESIGN TOKENS ============================================ Source: D19 Option B "Textured Light" prototype Reference: D16 Component Library, D1 Brand Guidelines, D18 Interaction Specs These tokens are imported by every component's CSS module. Since code components run in Shadow DOM, tokens must be explicitly imported — they do not cascade from the page. ============================================ */ :host, :host { /* Backgrounds — Cool Steel palette (approved 2026-04-21) Body and alt-section surfaces carry a subtle blue tint that reads more technical/platform-leaning than the previous neutral near-whites. */ --bg-primary: #F4F8FD; /* Cool Steel body (was #FAFAFA) */ --bg-white: #FFFFFF; --bg-muted: #EAF1F9; /* Cool Steel alt-section (was #F4F4F5) */ --bg-dark: #1E1E1E; --bg-charcoal: #121820; /* Cool Steel near-black (was #343741) — StatRow, Footer, Outcomes, Transparency, dark accordions all inherit */ --bg-navy: #004C97; --dark-section-bg: linear-gradient(135deg, #003A73 0%, #00264A 100%); /* Cool Steel deep-navy band — Final CTA etc. */ /* Section background recipes (2026-04-29) — the canonical Two-Container Rule surfaces. Use these on every
: alternate light/dark for the dark→light→dark→light scroll rhythm Cameron likes from stripe.com. Light: subtle white→cool-steel gradient, almost imperceptible. Dark: deep navy gradient. Page bodies prepend the Ambient Background which sits over both. */ --bg-light-section: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%); --bg-dark-section: linear-gradient(135deg, #003A73 0%, #00264A 100%); /* Alias of --dark-section-bg, keep both for back-compat */ /* Text */ --text-primary: #1E1E1E; --text-secondary: #52525B; --text-muted: #71717A; --text-inverse: #FFFFFF; --text-faint: #A1A1AA; --text-inverse-muted: rgba(255, 255, 255, 0.55); /* Brand blues — consolidated 3-blue palette (2026-04-27) Replaces the earlier 5-blue brand set. Three roles: --blue-primary workhorse for CTAs, links, fills, borders, focus on light bg --blue-bright accent + on-dark text. Wordmark, gradient highlight, dark surfaces. --blue-deep navy anchor for gradient endpoints and deep-navy section bands. */ --blue-bright: #009CDE; /* Brand blue. AA text on charcoal (5.96:1 on #121820). */ --blue-primary: #0072B5; /* AA text on white (5.15:1) and on muted (4.69:1). */ --blue-primary-hover: #005A91; /* Hover state for --blue-primary on light surfaces. */ --blue-deep: #004C97; /* Navy. Gradient endpoint, dark section accents. */ --brand-red: #EF3340; --brand-red-accessible: #E22C3F; /* 4.50:1 on white. WCAG AA text. */ --brand-gradient: linear-gradient(135deg, var(--blue-bright) 0%, var(--blue-deep) 100%); /* Accent — CTAs */ --cta-orange: #FA6614; /* 3.01:1 on white — WCAG AA large text */ --cta-orange-hover: #E55D0F; /* Typography */ --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Typography Scale — Desktop */ --display-size: 56px; --display-weight: 700; --display-line-height: 1.1; /* HeroSplit variant — deliberately tighter than --display-size (the centered HeroStandard pattern). 2026-04-30: extracted from inline font-size declarations so the responsive overrides (44/36 → 40/32) are part of the token system, not bespoke @media in the component. */ --hero-split-display-size: 54px; --h2-size: 40px; --h2-weight: 700; --h2-line-height: 1.2; --h3-size: 28px; --h3-weight: 600; --h3-line-height: 1.25; --h4-size: 20px; --h4-weight: 600; --h4-line-height: 1.3; --body-size: 16px; --body-weight: 400; --body-line-height: 1.6; --body-large-size: 18px; --body-large-weight: 400; --body-large-line-height: 1.6; --small-size: 14px; --micro-size: 12px; /* Spacing */ --section-pad: 96px; --section-pad-tablet: 64px; --section-pad-mobile: 48px; --container: 1200px; /* DEFAULT — most sections, body grids */ --container-narrow: 960px; /* Articles, legal, narrow forms */ --container-wide: 1440px; /* Hero rows that benefit from extra breathing room */ --container-padding: 32px; --container-padding-mobile: 20px; /* Button geometry (2026-04-29 codification) — three sizes only. Compact = pill-shaped header CTAs and inline navigation actions. Default = body CTAs (CtaSection, hero primary, form submits). Large = reserved for the homepage hero showpiece if needed. Pill radius for compact (signals "always-available"); md radius for body buttons (signals "deliberate action"). */ --btn-pad-compact: 7px 14px; --btn-pad-default: 14px 32px; --btn-pad-large: 18px 40px; --btn-radius-pill: 100px; --btn-radius-default: var(--radius-sm); --btn-font-compact: 14px; --btn-font-default: var(--body-size); --btn-shadow-orange-rest: 0 1px 2px rgba(250, 102, 20, 0.18); --btn-shadow-orange-hover: 0 4px 12px rgba(250, 102, 20, 0.28); /* Motion (D18 tokens) */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-gentle: 800ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); /* Borders — cooler neutral to match Cool Steel palette */ --border-light: #D6DEE8; /* Cool Steel (was #E4E4E7) */ --border-muted: #C4CEDE; /* Cool Steel (was #D4D4D8) */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Shadows — legacy single-layer (kept for back-compat) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); /* Modern multi-layer elevation system (2026-04-28) Stripe-inspired stacked shadows in navy tint. Each elevation level uses 2-4 stacked shadows that compound into real-feeling depth. The navy tint (rgba 0, 76, 151) makes the shadows feel like part of the brand instead of generic gray. Use these in place of --shadow-* on all card/container surfaces. */ --elev-1: 0 1px 2px rgba(0, 76, 151, 0.04), 0 4px 12px rgba(0, 76, 151, 0.04); --elev-2: 0 2px 4px rgba(0, 76, 151, 0.06), 0 8px 20px rgba(0, 76, 151, 0.07), 0 16px 32px rgba(0, 76, 151, 0.05); --elev-3: 0 4px 8px rgba(0, 76, 151, 0.06), 0 12px 24px rgba(0, 76, 151, 0.08), 0 24px 48px rgba(0, 76, 151, 0.10); /* Dark variants — for cards on charcoal/navy section backgrounds */ --elev-1-dark: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 38, 74, 0.18); --elev-2-dark: 0 2px 4px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 38, 74, 0.24), 0 16px 32px rgba(0, 38, 74, 0.20); /* Inset highlight for the top edge of cards — the "object catching light" detail. Pair with one of the --elev-* shadows. */ --elev-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.5); --elev-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Standard transition timing for hover states. cubic-bezier(0.4, 0, 0.2, 1) is the "natural" feel — quick start, gentle settle. */ --ease-hover: cubic-bezier(0.4, 0, 0.2, 1); /* Interactive card surfaces — Cool Steel gradient (approved 2026-04-21) Cooler/more saturated than the prior V2 tokens — pairs with the new Cool Steel body tint above. Applied to "selectable" cards that sit on the light body surface: Bento Grid tiles, Threat Intelligence Callout cards, and (in Phase 2) Industry / Solution / Partner Benefits / Related Resources / Differentiator / Threat / Step cards. Do NOT apply to Service Portfolio (already dark), Stat Row, Outcomes Ticker, Leadership Grid, Integration Logo Bar, or Footer. */ --gradient-card-rest: linear-gradient(135deg, #E3EEFB 0%, #C4D8F0 100%); --gradient-card-hover: linear-gradient(135deg, #D4E4F7 0%, #AFC8EA 100%); --border-card-blue: rgba(0, 114, 181, 0.32); --border-card-blue-hover: rgba(0, 114, 181, 0.52); --shadow-card-hover: 0 8px 24px rgba(0, 76, 151, 0.14); } /* Mobile typography overrides */ @media (max-width: 767px) { :host, :host { --display-size: 36px; --hero-split-display-size: 32px; --h2-size: 28px; --h3-size: 22px; --h4-size: 18px; --body-large-size: 17px; --section-pad: var(--section-pad-mobile); --container-padding: var(--container-padding-mobile); } } /* Tablet typography overrides */ @media (min-width: 768px) and (max-width: 1199px) { :host, :host { --display-size: 44px; --hero-split-display-size: 40px; --h2-size: 34px; --h3-size: 24px; --section-pad: var(--section-pad-tablet); } } /* ============================================ BRAND-COLOR GRADIENT BLOBS (2026-04-28) ============================================ Atmospheric layer — five large soft-blurred blobs in mid/deep brand blues. Sits below the noise pixel layer (z-index 0 vs 9998). Fixed to viewport so blobs are stable as content scrolls past. Heavy blur (140px) + low opacity (0.20–0.32) keeps them as ATMOSPHERE, not distinct shapes. Bright blue held back to 0.20 so the frosted header never reads aqua. Mix-blend-mode: soft-light keeps blobs visible on dark sections (charcoal, navy) AND on light sections, without overpowering either. */ .AmbientBackground-module__blobLayer--EPuKt { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .AmbientBackground-module__blob--mKFdp { position: absolute; border-radius: 50%; filter: blur(140px); mix-blend-mode: soft-light; will-change: transform; } .AmbientBackground-module__blob1--PYwle { width: 720px; height: 720px; background: #0072B5; opacity: 0.32; top: -180px; left: -200px; } .AmbientBackground-module__blob2--UTGnG { width: 680px; height: 680px; background: #004C97; opacity: 0.30; top: 280px; right: -220px; } .AmbientBackground-module__blob3--u9rdk { width: 540px; height: 540px; background: #009CDE; opacity: 0.20; top: 1100px; left: 18%; } .AmbientBackground-module__blob4--D2EXn { width: 620px; height: 620px; background: #0072B5; opacity: 0.30; top: 1700px; right: 5%; } .AmbientBackground-module__blob5--N_OIJ { width: 700px; height: 700px; background: #004C97; opacity: 0.32; top: 2400px; left: -150px; } /* ============================================ AMBIENT BACKGROUND — galaxy-wisp pixel field ============================================ Two fixed-position layers that paint a fine pixel-grid "wispy" field along the left and right edges of the viewport, fading to a clean white center. Rendered via SVG inside each layer; procedurally generated in the component so nothing is bundled as a static asset. Positioning: position: fixed, so it covers the viewport regardless of where the component is dropped in the page. pointer-events: none, so clicks always fall through to actual content. Masked with a linear gradient per side to dissolve into the center. Final settings (approved 2026-04-21): - Motion: drift on, two different durations + phase offset per side - Density: Sparse (densityMultiplier = 0.90) - Opacity: Whisper (opacityCap = 0.14) - Glitch: High (tickMs 80, perTick 3) */ /* ============================================ AMBIENT BACKGROUND — TRUE BACKDROP MODE (2026-05-12 PM) ============================================ Previously this lived at z-index: 9998 with mix-blend-mode: multiply so that it could be "above" the content but visually subtle. That approach produced visible blue dots on white card surfaces and bled into button/text pixels — a paint-time trick, not a real stacking-order fix. Now: the ambient is a TRUE backdrop. It sits at z-index: -1, behind every section. The home page body opts into a canvas color via `body[data-ambient-home]` (set by AmbientBackground.tsx on mount) and each home page light section overrides its own background to transparent so the canvas + ambient pixels show through. White content cards inside those sections remain opaque white and read as cards floating on the textured backdrop — which is the look Cameron wanted ("between content and background"). Dark/Navy sections keep their solid backgrounds and naturally hide the ambient behind them (correct: those are meant to be solid drama moments). No mix-blend-mode needed — pixels are simply painted on the canvas, and content boxes drawn on top occlude them. This is exactly the "true background" semantic. */ /* Set the home page body canvas color so the ambient has a base to paint on. Without this, body bg would be transparent and the ambient pixels would appear floating against whatever the page root paints (often white), with no contrast against the cool-steel theme. */ body[data-ambient-home] { background-color: var(--bg-primary, #F4F8FD); } .AmbientBackground-module__ambientLayer--egTjf { position: fixed; top: 0; bottom: 0; width: 28vw; pointer-events: none; /* TRUE backdrop layer. z-index: -1 sits behind every element in normal flow that has z-index: auto. Section backgrounds that are opaque will completely hide the ambient (correct for dark/navy drama sections). Sections that are transparent will let the ambient show through (correct for home page light sections). */ z-index: -1; /* Gentle linear fade from edge to center — full opacity at the outermost edge, dissolving to zero by the middle of the 28vw band. No more aggressive mask narrowing since pixels are no longer competing with content; they're behind it. */ -webkit-mask-image: linear-gradient( to var(--mask-dir), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to var(--mask-dir), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0) 100% ); } .AmbientBackground-module__left--DvjQ1 { left: 0; --mask-dir: right; } .AmbientBackground-module__right--A1yhv { right: 0; --mask-dir: left; } /* Whisper-level drift — pixel-level glitches (via JS) carry the real motion. Different durations + phase offset so left and right never sync. */ @keyframes AmbientBackground-module__cs-ambient-drift--tZDzv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .AmbientBackground-module__motionOn--sJBXD.AmbientBackground-module__left--DvjQ1 { animation: AmbientBackground-module__cs-ambient-drift--tZDzv 60s ease-in-out infinite; } .AmbientBackground-module__motionOn--sJBXD.AmbientBackground-module__right--A1yhv { animation: AmbientBackground-module__cs-ambient-drift--tZDzv 72s ease-in-out infinite -18s; } .AmbientBackground-module__ambientLayer--egTjf svg { width: 100%; height: 100%; display: block; } /* Respect user motion preference — no drift, no glitches (component suppresses the glitch loop in JS when this matches). */ @media (prefers-reduced-motion: reduce) { .AmbientBackground-module__motionOn--sJBXD.AmbientBackground-module__left--DvjQ1, .AmbientBackground-module__motionOn--sJBXD.AmbientBackground-module__right--A1yhv { animation: none; } }