/* * Aurora — shared by the pre-mount loader (linked from index.html ``) * and the post-mount app shell (`.bp-app-aurora` inside `bp-app-shell`). * * Single source of truth: tokens, blob shapes, body base gradient. * Blobs are intentionally **static** — no `animation:` rules. Continuous blob * motion across open tabs pinned GPU memory and forced the compositor to * re-blur stacked surfaces every frame. Do not reintroduce decorative motion. * Do not duplicate these rules in `styles.css` or `index.html`. */ :root { --color-aurora-primary: #993df5; --color-aurora-1: color-mix( in srgb, var(--color-aurora-primary) 56%, transparent ); --color-aurora-2: oklch(0.72 0.16 260 / 0.48); --color-aurora-3: oklch(0.78 0.16 165 / 0.44); --color-aurora-base-from: oklch(0.97 0.02 60); --color-aurora-base-via: oklch(0.96 0.025 280); --color-aurora-base-to: oklch(0.95 0.03 200); } :root[data-theme="dark"] { --color-aurora-1: color-mix( in srgb, var(--color-aurora-primary) 40%, transparent ); --color-aurora-2: oklch(0.5 0.16 260 / 0.4); --color-aurora-3: oklch(0.52 0.16 165 / 0.34); --color-aurora-base-from: oklch(0.21 0.02 60); --color-aurora-base-via: oklch(0.19 0.025 280); --color-aurora-base-to: oklch(0.17 0.03 200); } :root[data-product="engage"] { --color-aurora-primary: #f26e1e; } /* Body carries the aurora base gradient so the page background stays continuous while the pre-mount loader fades out and the app shell takes over. */ html, body { background: linear-gradient( 135deg, var(--color-aurora-base-from), var(--color-aurora-base-via), var(--color-aurora-base-to) ); } .bp-app-aurora { pointer-events: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient( 135deg, var(--color-aurora-base-from), var(--color-aurora-base-via), var(--color-aurora-base-to) ); } /* No `will-change: transform` — blobs are static, so promoting them to their own compositor layer just pins GPU memory in every open tab for no gain. */ .bp-app-aurora-blob { position: absolute; border-radius: 9999px; filter: blur(64px); } .bp-app-aurora-blob-warm { top: -10rem; left: -10rem; width: 35rem; height: 35rem; background: radial-gradient( circle at 30% 30%, var(--color-aurora-1), transparent 60% ); } .bp-app-aurora-blob-cool { top: 28%; right: -10rem; width: 32rem; height: 32rem; background: radial-gradient( circle at 60% 40%, var(--color-aurora-2), transparent 60% ); } .bp-app-aurora-blob-mint { bottom: -4rem; left: 28%; width: 29rem; height: 29rem; background: radial-gradient( circle at 50% 50%, var(--color-aurora-3), transparent 60% ); } .bp-app-aurora-noise { position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay; background-image: radial-gradient(oklch(0 0 0) 1px, transparent 1px); background-size: 3px 3px; }