/* ═══ Aether — Decorative Layer ══════════════════════════════════════════ Setting-sun glow (sidebar + login page), cloudy-gradient backgrounds. Stage 2 ships sidebar + login glow. Stage 4 adds chart-card gradient utilities. */ /* — Sidebar setting-sun glow — */ /* Applies to any `.sidebar` element. The glow renders as a ::before pseudo- element positioned at the bottom center. Sidebar must have `overflow: hidden` to clip the glow. The glow uses a high z-index to render ON TOP of the sidebar background, and the sidebar content sits above it. The glow has two layers: - A bright, curved "surface of the sun" at the bottom (hot orange core) - A soft, fading gradient extending upward ~20% of the sidebar height */ .sidebar { overflow: hidden; } .sidebar::before { content: ''; position: absolute; left: 50%; bottom: -180px; width: 280px; height: 280px; transform: translateX(-50%); /* Bright curved sun surface at bottom with soft upward glow */ background: radial-gradient(ellipse at center, rgba(255, 140, 50, 0.55) 0%, rgba(255, 122, 26, 0.35) 25%, rgba(255, 122, 26, 0.18) 40%, rgba(255, 122, 26, 0.08) 55%, rgba(255, 122, 26, 0.03) 70%, transparent 85%); border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(1px); } /* All direct children of .sidebar must sit above the glow. */ .sidebar > * { position: relative; z-index: 2; } /* User pill at the bottom of the sidebar renders semi-transparently so the glow bleeds through faintly. backdrop-filter is progressive enhancement. */ .sidebar__user-pill, .sidebar-footer .adviser-pill { background: rgba(255,255,255,0.04); backdrop-filter: blur(2px); } /* — Adviser login viewport glow — */ /* Activated by adding `class="login-page"` to the of /login. */ body.login-page { position: relative; } body.login-page::after { content: ''; position: fixed; left: 50%; bottom: -280px; width: 500px; height: 500px; transform: translateX(-50%); /* Bright curved sun surface at bottom with soft upward glow */ background: radial-gradient(ellipse at center, rgba(255, 140, 50, 0.50) 0%, rgba(255, 122, 26, 0.30) 25%, rgba(255, 122, 26, 0.15) 40%, rgba(255, 122, 26, 0.06) 55%, rgba(255, 122, 26, 0.02) 70%, transparent 85%); border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(2px); } body.login-page > * { position: relative; z-index: 1; } /* — Cloudy-gradient surfaces — apply to a .card to swap its background — */ .card--gradient-cool { background: var(--gradient-cloud-cool); } .card--gradient-warm { background: var(--gradient-cloud-warm); } .card--gradient-mint { background: var(--gradient-cloud-mint); } .card--gradient-purple { background: var(--gradient-cloud-purple); } /* Text rendered on a gradient surface uses the primary text colour by default. The gradients are designed for ≥4.5:1 contrast against var(--text-primary). Don't render text-muted on gradient cards. */ .card--gradient-cool, .card--gradient-warm, .card--gradient-mint, .card--gradient-purple { color: var(--text-primary); }