/* base.css — Nubien-style dark violet system */ :root { /* Type scale (fluid) */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem); --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); --text-3xl: clamp(2.5rem, 1.2rem + 3.6vw, 4.25rem); --text-hero: clamp(2.75rem, 1rem + 5vw, 5.5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Palette — pure black with aurora accents */ --color-bg: #000000; --color-surface: #050508; --color-surface-2: #0E0E1633; --color-card: #0C0C1400; --color-card-solid: #0B0B13; --color-border: #1B1B2A; --color-border-soft: #121220; --color-text: #ECECF5; --color-text-muted: #B0B0C6; --color-text-faint: #7A7A92; /* Aurora palette — teal, mint, violet on black */ --aurora-teal: #22E5C3; --aurora-mint: #3DF09B; --aurora-violet: #8A5BFF; --aurora-blue: #3D7BFF; --aurora-magenta: #D44CFF; --color-primary: #8A5BFF; --color-primary-hover: #9D72FF; --color-primary-active: #6F44E4; --color-primary-soft: #1A1530; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* Transitions */ --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.55); --shadow-glow: 0 0 60px rgba(34, 229, 195, 0.25); /* Content widths */ --content-default: 1180px; --content-narrow: 760px; /* Fonts */ --font-body: 'Satoshi', system-ui, -apple-system, sans-serif; --font-display: 'Satoshi', system-ui, -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--space-16); /* Lock horizontal scrolling at the document level — without this, mobile Safari lets users pinch/swipe horizontally because the aurora container bleeds wider than the viewport. overflow-x on body alone is ignored on the element on iOS. */ overflow-x: clip; width: 100%; } body { min-height: 100dvh; line-height: 1.55; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); /* `clip` is stronger than `hidden` — it prevents any horizontal scroll from appearing even when child elements extend past the viewport (like our wider-than-screen aurora). */ overflow-x: clip; width: 100%; position: relative; } /* Site-wide aurora field — layered colored blurs that drift slowly. Everything here is heavily blurred and uses very soft radial falloffs so there are no visible edges or bands between sections. */ /* Layer 0 — GALAXY base. A deep space backdrop that sits fixed on the viewport: a dark cosmic radial wash plus a very low-opacity starfield. This is the dominant layer — the aurora is only a subtle glow on top. */ /* Pure black canvas backdrop — the stars themselves are rendered by the scroll-reactive starfield canvas (see .starfield + main.js). */ body::before { content: ""; position: fixed; inset: 0; z-index: -4; pointer-events: none; background: #000000; } /* Background is pure black — the only colored accent on the page is the hero halo (see .hero__halo in style.css) and the optional per-section .glow-section helper below. */ /* ===== Section glow helper ===== A single soft, heavily-blurred radial glow anchored behind a section. Used to give each major section a quiet sense of atmosphere and visual separation without hard dividers. Apply .glow-section to any main > section along with a position modifier (--left, --right, --center) and an optional hue modifier (--teal default, --violet, --mix). The glow sits inside the section (absolute, not fixed) so it scrolls naturally with the content and fades out at the section’s edges. */ .glow-section { position: relative; } .glow-section::before { content: ""; position: absolute; /* Keep glow inside the section bounds so it doesn't bleed into the neighbors and stack with their glows. Slight horizontal inset keeps the falloff soft at the edges. */ inset: 8% -6%; z-index: 0; pointer-events: none; background: var(--glow-bg, radial-gradient(50% 40% at 50% 50%, rgba(34, 229, 195, 0.12), rgba(34, 229, 195, 0) 72%)); filter: blur(90px); opacity: 1; } /* Make sure actual section content renders above the glow */ .glow-section > * { position: relative; z-index: 1; } /* Hue variants — quiet atmospheric washes. Alphas tuned low so glows read as subtle color temperature shifts, never as plates of color. */ .glow-section--teal { --glow-bg: radial-gradient(50% 40% at var(--glow-x, 50%) var(--glow-y, 50%), rgba(34, 229, 195, 0.12), rgba(34, 229, 195, 0) 72%); } .glow-section--violet { --glow-bg: radial-gradient(50% 40% at var(--glow-x, 50%) var(--glow-y, 50%), rgba(138, 91, 255, 0.14), rgba(138, 91, 255, 0) 72%); } .glow-section--mix { --glow-bg: radial-gradient(38% 30% at 25% 45%, rgba(34, 229, 195, 0.10), rgba(34, 229, 195, 0) 72%), radial-gradient(38% 30% at 75% 55%, rgba(138, 91, 255, 0.12), rgba(138, 91, 255, 0) 72%); } .glow-section--magenta { --glow-bg: radial-gradient(50% 40% at var(--glow-x, 50%) var(--glow-y, 50%), rgba(212, 76, 255, 0.12), rgba(212, 76, 255, 0) 72%); } /* Position modifiers — set via CSS vars on .glow-section so one color variant can be anchored anywhere. */ .glow-section--left { --glow-x: 18%; --glow-y: 50%; } .glow-section--right { --glow-x: 82%; --glow-y: 50%; } .glow-section--top { --glow-x: 50%; --glow-y: 15%; } .glow-section--bottom { --glow-x: 50%; --glow-y: 85%; } .glow-section--center { --glow-x: 50%; --glow-y: 50%; } @media (prefers-reduced-motion: reduce) { .glow-section::before { transition: none; animation: none; } } /* ===== Aurora wash ===== A bolder, animated multi-blob aurora gradient sitting behind a section. Unlike the subtle .glow-section (single radial, ~0.12 alpha), this uses three overlapping blurred radial blobs in teal / violet / magenta that slowly drift and pulse — giving the section a living aurora backdrop without any rectangular edges. Apply .aurora-wash to the same section you'd apply .glow-section to; it layers on top / replaces the quieter wash. Blobs use absolute positioning with organic percentages so they never read as a rectangle. */ .aurora-wash { position: relative; isolation: isolate; } .aurora-wash::before, .aurora-wash::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Fade out toward the section edges so the wash blends into neighbors */ -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 30%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.25) 78%, transparent 100%); mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 30%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.25) 78%, transparent 100%); filter: blur(80px) saturate(130%); will-change: transform, opacity; } /* Layer 1 — teal + mint blobs drifting clockwise-ish */ .aurora-wash::before { background: radial-gradient(42% 38% at 22% 35%, rgba(34, 229, 195, 0.38), rgba(34, 229, 195, 0) 70%), radial-gradient(38% 34% at 78% 62%, rgba(61, 240, 155, 0.30), rgba(61, 240, 155, 0) 72%); animation: aurora-wash-drift-1 26s ease-in-out infinite; } /* Layer 2 — violet + magenta blobs drifting counter */ .aurora-wash::after { background: radial-gradient(40% 36% at 68% 30%, rgba(138, 91, 255, 0.40), rgba(138, 91, 255, 0) 72%), radial-gradient(36% 32% at 28% 72%, rgba(212, 76, 255, 0.32), rgba(212, 76, 255, 0) 72%); animation: aurora-wash-drift-2 32s ease-in-out infinite; } @keyframes aurora-wash-drift-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } 33% { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: 1.00; } 66% { transform: translate3d(-3%, 4%, 0) scale(0.95); opacity: 0.70; } } @keyframes aurora-wash-drift-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.80; } 40% { transform: translate3d(-4%, 3%, 0) scale(1.10); opacity: 1.00; } 75% { transform: translate3d(3%, -2%, 0) scale(0.92); opacity: 0.65; } } .aurora-wash > * { position: relative; z-index: 1; } /* Hue variants — emphasize a specific color family */ .aurora-wash--teal::before { background: radial-gradient(45% 40% at 25% 38%, rgba(34, 229, 195, 0.48), rgba(34, 229, 195, 0) 72%), radial-gradient(40% 36% at 72% 58%, rgba(61, 240, 155, 0.38), rgba(61, 240, 155, 0) 72%); } .aurora-wash--teal::after { background: radial-gradient(36% 32% at 70% 28%, rgba(34, 229, 195, 0.30), rgba(34, 229, 195, 0) 72%), radial-gradient(34% 30% at 30% 72%, rgba(138, 91, 255, 0.28), rgba(138, 91, 255, 0) 72%); } .aurora-wash--violet::before { background: radial-gradient(45% 40% at 25% 38%, rgba(138, 91, 255, 0.48), rgba(138, 91, 255, 0) 72%), radial-gradient(40% 36% at 72% 58%, rgba(212, 76, 255, 0.38), rgba(212, 76, 255, 0) 72%); } .aurora-wash--violet::after { background: radial-gradient(36% 32% at 70% 28%, rgba(34, 229, 195, 0.32), rgba(34, 229, 195, 0) 72%), radial-gradient(34% 30% at 30% 72%, rgba(212, 76, 255, 0.30), rgba(212, 76, 255, 0) 72%); } .aurora-wash--magenta::before { background: radial-gradient(45% 40% at 25% 40%, rgba(212, 76, 255, 0.48), rgba(212, 76, 255, 0) 72%), radial-gradient(40% 36% at 75% 62%, rgba(138, 91, 255, 0.40), rgba(138, 91, 255, 0) 72%); } .aurora-wash--magenta::after { background: radial-gradient(38% 34% at 72% 30%, rgba(34, 229, 195, 0.30), rgba(34, 229, 195, 0) 72%), radial-gradient(34% 30% at 28% 70%, rgba(212, 76, 255, 0.35), rgba(212, 76, 255, 0) 72%); } @media (prefers-reduced-motion: reduce) { .aurora-wash::before, .aurora-wash::after { animation: none; } } @keyframes galaxy-twinkle { /* Barely perceptible star shimmer — just enough to feel alive */ 0% { opacity: 1; } 50% { opacity: 0.92; } 100% { opacity: 1; } } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; } p, li, figcaption { text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { cursor: pointer; background: none; border: none; } ::selection { background: rgba(124, 91, 255, 0.4); color: #fff; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body::before { animation: none !important; } .aurora-streak { display: none !important; } } /* ====== Reveal on scroll ====== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="scale"] { transform: scale(0.96); } [data-reveal].is-visible { transform: none !important; } /* Stagger children */ [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); } [data-stagger].is-visible > * { opacity: 1; transform: none; } [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; } [data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; } [data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; } [data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; } [data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; } [data-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; } /* Pricing variant — slower, more dramatic expo-out matching the button scroll curve */ [data-stagger="pricing"] > * { opacity: 0; transform: translateY(40px) scale(0.97); transition: opacity 1100ms cubic-bezier(0.19, 1, 0.22, 1), transform 1100ms cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } [data-stagger="pricing"].is-visible > * { opacity: 1; transform: none; } [data-stagger="pricing"].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-stagger="pricing"].is-visible > *:nth-child(2) { transition-delay: 120ms; } [data-stagger="pricing"].is-visible > *:nth-child(3) { transition-delay: 240ms; } [data-stagger="pricing"].is-visible > *:nth-child(4) { transition-delay: 360ms; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > *, [data-stagger="pricing"] > * { opacity: 1 !important; transform: none !important; } } /* ====== Image fade-in on scroll ====== */ .img-fade { opacity: 0; transform: scale(1.04); filter: blur(4px); transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 900ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform, filter; } .img-fade.is-loaded { opacity: 1; transform: scale(1); filter: blur(0); } @media (prefers-reduced-motion: reduce) { .img-fade { opacity: 1; transform: none; filter: none; transition: none; } } /* Hero title word-by-word blur-in entrance */ .word-anim { display: inline-block; opacity: 0; transform: translateY(24%); filter: blur(6px); animation: word-in 800ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; will-change: opacity, transform, filter; /* Prevent subpixel artifacts from blur on fractional transforms */ backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* Pending state: hold words hidden until JS triggers play (removes this class) */ .word-anim--pending { animation-play-state: paused; } @keyframes word-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .word-anim { animation: none; opacity: 1; transform: none; filter: none; will-change: auto; } } a, button, [role="button"], input, textarea, select { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============ AURORA WIPE TRANSITION ============ Reuses the exact intro-streak choreography from components/aurora-intro/aurora-intro.css — three angled aurora ribbons sweep across the viewport, briefly cover it, then wipe off to the right. Compressed from the intro's 1600ms timeline to ~700ms and with no wordmark hold phase. The JS adds .is-wiping to replay the animation on every click (toggled off + forced reflow + toggled back on). Timing on the .is-wiping ribbons (700ms each): 0 → 40% sweep in from left edge (fast lead-in) 40 → 55% peak cover (ribbon spans the screen) 55 → 100% sweep off to the right (exit) Uses an even-middle cubic-bezier so the ribbon actually spends visible time on-screen at the compressed 700ms duration. ================================================= */ .aurora-wipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; /* Stage has no solid background — the ribbons themselves do the covering. A backdrop-filter on the backing layer blurs the page behind as the aurora sweeps in, so the transition reads as the aurora washing over the page, not as a black curtain drop. */ background: transparent; overflow: hidden; isolation: isolate; will-change: opacity, visibility; } .aurora-wipe.is-wiping { animation: wipe-stage 720ms linear forwards; } /* Backing layer — sits behind the ribbons and fades in a tinted wash that mirrors the ribbons' arc. It starts transparent, fills to a deep navy as the ribbons reach center, then fades back out with the stage. This is what provides full-screen opaque coverage during the silent page jump, without the initial "snap to black." */ .aurora-wipe__backing { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(8, 6, 20, 0.95), rgba(5, 5, 12, 0.98) 60%, rgba(5, 5, 12, 1) 100%); will-change: opacity; } .aurora-wipe.is-wiping .aurora-wipe__backing { animation: wipe-backing 720ms cubic-bezier(0.4, 0, 0.2, 1) forwards; } .aurora-wipe__streak { position: absolute; inset: 0; } /* Base ribbon — matches .aurora-streak__ribbon from the intro */ .aurora-wipe__ribbon { position: absolute; z-index: 2; left: -60%; top: 50%; width: 220%; height: 90vh; transform: translate3d(-100%, -50%, 0) rotate(-8deg); background: radial-gradient(ellipse 55% 70% at 30% 50%, rgba(34, 229, 195, 0.95), transparent 65%), radial-gradient(ellipse 45% 60% at 55% 45%, rgba(61, 240, 155, 0.85), transparent 65%), radial-gradient(ellipse 55% 65% at 78% 55%, rgba(138, 91, 255, 0.90), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(34, 229, 195, 0.35) 15%, rgba(61, 240, 155, 0.55) 40%, rgba(138, 91, 255, 0.55) 70%, rgba(61, 123, 255, 0.35) 85%, transparent 100%); filter: blur(28px) saturate(160%); mix-blend-mode: screen; opacity: 0; will-change: transform, opacity, filter; } .aurora-wipe.is-wiping .aurora-wipe__ribbon { animation: wipe-flow 720ms cubic-bezier(0.5, 0.1, 0.5, 0.9) forwards; } .aurora-wipe__ribbon--2 { top: 42%; height: 70vh; transform: translate3d(-100%, -50%, 0) rotate(-4deg); background: radial-gradient(ellipse 60% 60% at 40% 50%, rgba(138, 91, 255, 0.85), transparent 65%), radial-gradient(ellipse 55% 55% at 70% 50%, rgba(212, 76, 255, 0.75), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(138, 91, 255, 0.45) 30%, rgba(212, 76, 255, 0.50) 60%, transparent 100%); filter: blur(36px) saturate(170%); } .aurora-wipe.is-wiping .aurora-wipe__ribbon--2 { animation: wipe-flow 720ms cubic-bezier(0.52, 0.1, 0.5, 0.9) 20ms forwards; } .aurora-wipe__ribbon--3 { top: 58%; height: 60vh; transform: translate3d(-100%, -50%, 0) rotate(-12deg); background: radial-gradient(ellipse 60% 60% at 35% 50%, rgba(61, 123, 255, 0.75), transparent 65%), radial-gradient(ellipse 55% 55% at 72% 50%, rgba(34, 229, 195, 0.80), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(61, 123, 255, 0.40) 25%, rgba(34, 229, 195, 0.45) 65%, transparent 100%); filter: blur(32px) saturate(160%); } .aurora-wipe.is-wiping .aurora-wipe__ribbon--3 { animation: wipe-flow 720ms cubic-bezier(0.48, 0.1, 0.5, 0.9) 40ms forwards; } /* Ribbon choreography — same keyframe shape as the intro's .streak-flow but with the middle hold compressed out. The ribbon sweeps in from off-screen left, peaks at ~50% coverage centered, then sweeps off to the right. */ @keyframes wipe-flow { 0% { transform: translate3d(-100%, -50%, 0) rotate(-8deg) skewX(-4deg); opacity: 0; } 15% { opacity: 1; } 40% { transform: translate3d(-5%, -50%, 0) rotate(-3deg) skewX(0deg); opacity: 1; } 55% { transform: translate3d(10%, -50%, 0) rotate(-1deg) skewX(2deg); opacity: 1; } 75% { transform: translate3d(60%, -50%, 0) rotate(2deg) skewX(5deg); opacity: 1; } 100% { transform: translate3d(130%, -50%, 0) rotate(4deg) skewX(8deg); opacity: 0; } } /* Stage container — instantly visible so ribbons can render, but the stage itself has no background. Its opacity stays at 1 throughout; the backing layer handles the fill. */ @keyframes wipe-stage { 0% { opacity: 1; visibility: visible; } 99% { opacity: 1; visibility: visible; } 100% { opacity: 1; visibility: hidden; } } /* Backing fills in with the ribbons (0→45%), holds full opacity through the silent page jump (45→75%), then fades out with the aurora tail so the destination is revealed underneath. */ @keyframes wipe-backing { 0% { opacity: 0; } 18% { opacity: 0.25; } 35% { opacity: 0.85; } 45% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } /* Destination fade-in — when the curtain lifts, the page content softly fades up so it reads as an arrival, not a reveal. JS adds .is-arriving to at the same moment the curtain starts fading. */ body.is-arriving main, body.is-arriving .footer, body.is-arriving .nav { animation: page-arrive 380ms cubic-bezier(0.2, 0, 0, 1) both; } @keyframes page-arrive { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { /* Skip the wipe entirely — JS also short-circuits to an instant jump. */ .aurora-wipe, .aurora-wipe.is-wiping { display: none !important; } }