/* ============================================================ AURA Design System v2 — "Celestial" (Wave 0, Jul 2026) Shared tokens + primitives for the 13-app redesign. Base philosophy: deep-space canvas, one accent gradient per app (set --a1/--a2 on ), glass surfaces, cinematic type. ============================================================ */ :root { /* Canvas */ --bg-0: #050508; --bg-1: #0a0a12; --bg-2: #101019; /* Ink */ --ink-hi: #f4f4f8; --ink-mid: rgba(238, 238, 248, 0.72); --ink-low: rgba(228, 228, 244, 0.45); /* Default accent (overridden per app on body) */ --a1: #8b5cf6; --a2: #38bdf8; /* Glass */ --glass-bg: rgba(255, 255, 255, 0.045); --glass-brd: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.16); /* Type scale (fluid) */ --t-hero: clamp(2.8rem, 7.5vw, 6.5rem); --t-h1: clamp(2rem, 4.5vw, 3.4rem); --t-h2: clamp(1.4rem, 2.6vw, 2rem); --t-body: clamp(1rem, 1.15vw, 1.125rem); --t-small: 0.85rem; /* Rhythm */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.75rem; --sp-4: 3rem; --sp-5: 5.5rem; --radius: 20px; --radius-lg: 28px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 0.7s; } /* Per-app accent presets — set class on */ .app-synapse { --a1:#38bdf8; --a2:#818cf8; } .app-harmony { --a1:#f59e0b; --a2:#fb7185; } .app-transcribe { --a1:#22d3ee; --a2:#3b82f6; } .app-transcribe-m{--a1:#2dd4bf; --a2:#0ea5e9; } .app-stock { --a1:#fb923c; --a2:#f472b6; } .app-bookeditor { --a1:#fde68a; --a2:#d97706; } .app-astrolabe { --a1:#a78bfa; --a2:#6366f1; } .app-market { --a1:#34d399; --a2:#059669; } .app-wealth { --a1:#fbbf24; --a2:#10b981; } .app-nest { --a1:#c4b5fd; --a2:#fda4af; } .app-wellness { --a1:#6ee7b7; --a2:#7dd3fc; } .app-vibe { --a1:#f9a8d4; --a2:#c084fc; } .app-cosmic { --a1:#e879f9; --a2:#fb923c; } .app-genesis { --a1:#6ee7b7; --a2:#8b5cf6; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-0); color: var(--ink-hi); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: color-mix(in oklab, var(--a1) 60%, transparent); color: #fff; } h1, h2, h3, .display { font-family: "Fraunces", "Instrument Serif", Georgia, serif; font-weight: 550; letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 var(--sp-2); } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } p { color: var(--ink-mid); margin: 0 0 var(--sp-2); } a { color: inherit; } /* ---------- Signature gradient text ---------- */ .grad { background: linear-gradient(100deg, var(--a1), var(--a2) 60%, var(--a1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: grad-drift 9s ease-in-out infinite; } @keyframes grad-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- FX canvas (aura-fx.js mounts here) ---------- */ #aura-fx { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; background: radial-gradient(1100px 700px at 75% -10%, color-mix(in oklab, var(--a1) 16%, transparent), transparent 60%), radial-gradient(900px 600px at 12% 110%, color-mix(in oklab, var(--a2) 13%, transparent), transparent 60%), var(--bg-0); /* CSS fallback if WebGL unavailable */ } /* ---------- Layout ---------- */ .wrap { width: min(1180px, 92vw); margin-inline: auto; } .section { padding-block: var(--sp-5); position: relative; } .hero { min-height: 92vh; display: grid; place-content: center; text-align: center; padding-block: var(--sp-5); } .hero .display { font-size: var(--t-hero); } .kicker { font-family: "Inter", sans-serif; font-size: var(--t-small); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-low); margin-bottom: var(--sp-2); } /* ---------- Glass surfaces v2 ---------- */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--radius); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .glass::before { /* top light edge */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--glass-hi), transparent); pointer-events: none; } .glass:hover { border-color: color-mix(in oklab, var(--a1) 45%, var(--glass-brd)); box-shadow: 0 24px 70px -30px color-mix(in oklab, var(--a1) 45%, transparent); } /* ---------- Cards ---------- */ .card-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { padding: var(--sp-3); text-decoration: none; display: block; transform-style: preserve-3d; will-change: transform; } .card .icon { font-size: 1.9rem; line-height: 1; display: inline-grid; place-content: center; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--a1) 22%, transparent), color-mix(in oklab, var(--a2) 22%, transparent)); border: 1px solid color-mix(in oklab, var(--a1) 30%, transparent); margin-bottom: var(--sp-2); transform: translateZ(30px); } .card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; transform: translateZ(20px); } .card p { font-size: 0.95rem; color: var(--ink-low); margin: 0; transform: translateZ(12px); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.9em; border-radius: 999px; font: 600 0.95rem/1 "Inter", sans-serif; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 0; color: #0a0a12; background: linear-gradient(100deg, var(--a1), var(--a2)); transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out), filter 0.35s; will-change: transform; } .btn:hover { filter: brightness(1.1); box-shadow: 0 12px 40px -12px color-mix(in oklab, var(--a1) 70%, transparent); } .btn.ghost { color: var(--ink-hi); background: var(--glass-bg); border: 1px solid var(--glass-brd); } .btn.ghost:hover { border-color: color-mix(in oklab, var(--a1) 50%, var(--glass-brd)); box-shadow: none; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 0.3em 0.85em; border-radius: 999px; font: 600 0.72rem/1.4 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--glass-brd); color: var(--ink-low); background: var(--glass-bg); } .badge.live { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.35); } .badge.wip { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); } /* ---------- Reveal states (aura-motion.js) ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); } [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--reveal-delay, 0s); } [data-split] .w { display: inline-block; overflow: clip; vertical-align: bottom; } [data-split] .w > span { display: inline-block; transform: translateY(110%); } [data-split].is-in .w > span { transform: none; transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi) * 70ms); } /* ---------- A11y & reduced motion ---------- */ :focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } [data-reveal], [data-split] .w > span { opacity: 1 !important; transform: none !important; } }