@charset "UTF-8"; /* FlexVPN Aurora Glass primitives (PR-1, 2026-05-16). Three layered glass surfaces + animated aurora canvas. Designed for additive use — does NOT override existing landing.css rules. See docs/superpowers/specs/2026-05-16-aurora-glass-foundation-design.md */ /* ───────────────────────────────────────────────────────── AURORA MESH — Layer 0 canvas decoration Apply via `.aurora-mesh` class on a positioned ancestor (typically with isolation: isolate, or a hero section). Three GPU-only blobs, animated 60s ease-in-out infinite alternate. ───────────────────────────────────────────────────────── */ .aurora-mesh { position: relative; isolation: isolate; } .aurora-mesh::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(circle at 15% 25%, var(--aurora-mag) 0%, transparent 38%), radial-gradient(circle at 85% 35%, var(--aurora-vio) 0%, transparent 42%), radial-gradient(circle at 50% 90%, var(--aurora-blu) 0%, transparent 45%); filter: blur(120px) saturate(110%); opacity: 0.22; pointer-events: none; animation: aurora-drift 60s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.22; } 50% { transform: translate3d(-3%, 2%, 0) scale(1.05); opacity: 0.28; } 100% { transform: translate3d(2%, -2%, 0) scale(0.98); opacity: 0.20; } } /* ───────────────────────────────────────────────────────── GLASS PRIMITIVES — Layer 1 Four variants — share tint + stroke + inner refraction + drop shadow. Differ by blur amount and tint depth. .glass-pane → flat panel (footers, banners, sections) .glass-card → content card (default — most uses) .glass-nav → sticky nav / top bar (over hero) .glass-modal → dialogs, sheets, drawers (heaviest blur) ───────────────────────────────────────────────────────── */ .glass-pane, .glass-card, .glass-nav, .glass-modal { position: relative; background: var(--glass-tint-2); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inner), var(--glass-shadow); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-sat)); } .glass-pane { border-radius: 16px; } .glass-card { border-radius: 20px; } .glass-nav { background: var(--glass-tint-3); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); border-radius: 0; border-top: 0; border-left: 0; border-right: 0; } .glass-modal { background: var(--glass-tint-3); backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-xl)) saturate(var(--glass-sat)); border-radius: 24px; } /* ───────────────────────────────────────────────────────── FALLBACK 1 — @supports not backdrop-filter Safari ≤ 14, very old Android WebView. Replace blur with solid background; keep stroke + shadow. ───────────────────────────────────────────────────────── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-pane, .glass-card, .glass-nav, .glass-modal { background: var(--bg-elev-1); } } /* ───────────────────────────────────────────────────────── FALLBACK 2 — prefers-reduced-transparency (macOS / iOS a11y) Same as fallback-1: solid bg, no blur. ───────────────────────────────────────────────────────── */ @media (prefers-reduced-transparency: reduce) { .glass-pane, .glass-card, .glass-nav, .glass-modal { background: var(--bg-elev-1); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ───────────────────────────────────────────────────────── FALLBACK 3 — prefers-reduced-motion (a11y) Freeze aurora animation. Glass surfaces stay (motion ≠ transparency). ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aurora-mesh::before { animation: none; } } /* ───────────────────────────────────────────────────────── FALLBACK 4 — print Strip decoration. Solid white bg, black text upstream from body. ───────────────────────────────────────────────────────── */ @media print { .aurora-mesh::before { display: none; } .glass-pane, .glass-card, .glass-nav, .glass-modal { background: #fff; color: #000; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-color: #ccc; } }