/* Altnyx — shared design tokens. One canonical vocabulary for the whole site. Pages link this file and reference these custom properties; the few pages with a distinct palette opt in via a theme class on : (default) → standard app/marketing palette (platform, pricing, blog…) .theme-home → homepage's warmer-grey palette Cascade order matters: light base first, then per-theme light overrides, then the dark base (so it wins for shared tokens in dark mode), then the dark per-theme overrides. Brand palette (Altnyx Brand Kit): Primary #6E50A6, Deep Shade #3D2C5C, Light Tint #B79BD9, Mid Light #9B84C4, Charcoal Text #2B2B2B, White #FFFFFF. --blue is the primary/CTA token — mapped to the brand purple ramp; its -m (hover) and -l/-ll (pale tint) values are derived for contrast, its resting value is the exact brand hex. --purple is a secondary/category accent (unrelated to the primary brand color) and was shifted to Deep Shade/Mid Light so it reads as a distinct, cooler purple next to --blue. --sky/--teal/--amber are untouched secondary category accents. */ :root { --blue:#6E50A6; --blue-m:#7F62B4; --blue-l:#EFE9F6; --blue-ll:#F8F5FB; --sky:#3A9CE8; --teal:#0E6B54; --teal-m:#1A9E76; --teal-l:#E0F4EE; --amber:#7D4B0C; --amber-m:#E8961E; --amber-l:#FDF0DC; --purple:#3D2C5C; --purple-m:#55407A; --purple-l:#EAE6F0; --red:#9B2020; --red-m:#D94040; --red-l:#FDE8E8; --ink:#2B2B2B; --ink-2:#3F4354; --ink-3:#7B7F96; --sur:#ffffff; --sur-2:#F5F7FA; --sur-3:#EDF0F7; --sur-4:#E4E8F2; --bdr:rgba(12,12,14,.07); --bdr-s:rgba(12,12,14,.12); --bdr-h:rgba(12,12,14,.22); --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-2xl:32px; --font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace; --ease:cubic-bezier(.22,1,.36,1); --sh:0 1px 3px rgba(12,12,14,.05),0 8px 28px rgba(12,12,14,.07); --sh-h:0 2px 8px rgba(12,12,14,.05),0 20px 48px rgba(12,12,14,.10); --sh-c:0 1px 3px rgba(12,12,14,.06),0 8px 24px rgba(12,12,14,.07); } /* Homepage — warmer-grey surfaces (light). Ink + primary now match the rest of the site (one brand color everywhere); only the surface warmth stays homepage-specific. */ .theme-home { --ink:#2B2B2B; --ink-2:#4a4a4a; --ink-3:#8a8a8a; --sur-2:#f7f6f4; --sur-3:#f0ede8; --sur-4:#e8e4de; --bdr:rgba(10,10,10,.09); --bdr-h:rgba(10,10,10,.16); } /* Blog/marketing group — slightly stronger borders + tighter elevation (light) */ .theme-blog { --bdr:rgba(12,12,14,.08); --bdr-s:rgba(12,12,14,.14); --sh-h:0 2px 8px rgba(12,12,14,.06),0 16px 40px rgba(12,12,14,.10); } /* ── Dark base (wins over the light per-theme overrides above) ── */ [data-theme="dark"] { --blue:#B79BD9; --blue-m:#C9B3E3; --blue-l:#3D2C5C; --blue-ll:#2E2247; --sky:#4BBDF0; --teal:#1A9E76; --teal-m:#26C492; --teal-l:#0D2920; --amber:#E8961E; --amber-m:#F5B83D; --amber-l:#2A1E08; --purple:#9B84C4; --purple-m:#B29FD0; --purple-l:#2A2140; --red:#D94040; --red-m:#EF6060; --red-l:#2A1010; --ink:#EDEDF0; --ink-2:#C0C4D4; --ink-3:#969BAF; --sur:#0E1018; --sur-2:#14171F; --sur-3:#1C2030; --sur-4:#242840; --bdr:rgba(237,237,240,.07); --bdr-s:rgba(237,237,240,.12); --bdr-h:rgba(237,237,240,.22); --sh:0 1px 3px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.4); --sh-h:0 2px 8px rgba(0,0,0,.3),0 20px 48px rgba(0,0,0,.5); --sh-c:0 1px 3px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.4); } /* Homepage dark — darkens surfaces/inks/borders; primary matches dark base */ [data-theme="dark"].theme-home { --ink:#efefef; --ink-2:#aaaaaa; --ink-3:#666666; --sur:#0c0c0e; --sur-2:#131316; --sur-3:#1c1c21; --sur-4:#25252c; --bdr:rgba(255,255,255,.07); --bdr-h:rgba(255,255,255,.14); } /* ── Aura gradient background — shared decorative component, usable on any page/section. Two blurred brand-colour blobs behind card content. */ .aura-section { position: relative; overflow: hidden; } .aura-blob { position: absolute; border-radius: 50%; filter: blur(75px); pointer-events: none; z-index: 0; } .aura-blob-a { width: 620px; height: 620px; background: var(--blue); opacity: .26; } .aura-blob-b { width: 540px; height: 540px; background: var(--teal-m); opacity: .22; } [data-theme="dark"] .aura-blob-a { opacity: .38; } [data-theme="dark"] .aura-blob-b { opacity: .3; } .aura-doodle { position: absolute; z-index: 0; pointer-events: none; opacity: .45; color: var(--blue); } [data-theme="dark"] .aura-doodle { opacity: .3; } .aura-content { position: relative; z-index: 1; } /* ── Book Demo button — one unified rounded style, used site-wide (nav, drawer, hero and closing CTAs). .btn-demo-lg is the larger variant for hero/CTA placements; the bare class is the compact nav/drawer size. */ .btn-demo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 13px; font-weight: 600; background: var(--blue); color: #fff; border: none; border-radius: 12px; padding: 10px 22px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn-demo:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(110,80,166,.35); } .btn-demo svg { flex-shrink: 0; } .btn-demo-lg { font-size: 14px; padding: 12px 28px; border-radius: 16px; } /* Respect the OS-level "reduce motion" preference site-wide. This is a blanket rule (not per-component) so it covers every animation on every page — hero word-reveals, aurora/orb drift, radar sweeps, agent-icon hover lifts, reveal-on-scroll fades — without needing a matching class-by-class override on each page. Durations go to ~0 rather than `animation:none` so elements still land in their final `both`/`forwards` state instead of getting stuck at their 0% keyframe (e.g. mid-fade-out). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }