/* ============================================ ATMOSPHERIC LAYER Opt-in visual system ported from the design system. Use on hero, CTA, and feature-hype sections. Content-dense sections should stay on the base navy palette. ============================================ */ :root { /* ─── True black canvas (atmospheric alternative to --bg-primary) ─── */ --bg-void: #000000; --bg-void-surface: #0a0a0a; --bg-void-elevated: #18181b; --bg-glass: rgba(255, 255, 255, 0.05); --bg-glass-hover: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.10); --border-glass-hover: rgba(255, 255, 255, 0.20); /* ─── Signature tri-color gradient (lime → purple → pink) ─── */ --sig-1: #c8ff00; --sig-2: #a78bfa; --sig-3: #f472b6; --gradient-sig: linear-gradient(90deg, var(--sig-1) 0%, var(--sig-2) 50%, var(--sig-3) 100%); --gradient-sig-soft: linear-gradient(90deg, transparent 0%, rgba(200,255,0,.6) 20%, rgba(167,139,250,.6) 50%, rgba(244,114,182,.6) 80%, transparent 100%); --gradient-sig-animated: linear-gradient(-45deg, #c8ff00, #a78bfa, #f472b6, #c8ff00); /* ─── Color-coded service card accents ─── */ --svc-analytics: linear-gradient(135deg, #4facfe, #00f2fe); --svc-enterprise: linear-gradient(135deg, #a855f7, #7c3aed); --svc-startup: linear-gradient(135deg, #f093fb, #f5576c); --svc-ai: linear-gradient(135deg, #c8ff00, #a0e000); /* ─── Ambient radial washes (apply as section ::before backgrounds) ─── */ --wash-hero: radial-gradient(circle at 20% 30%, rgba(200,255,0,.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(167,139,250,.08) 0%, transparent 50%); --wash-cta: radial-gradient(circle at 30% 40%, rgba(74,222,128,.12) 0%, transparent 55%), radial-gradient(circle at 70% 60%, rgba(244,114,182,.10) 0%, transparent 55%), radial-gradient(circle at 50% 90%, rgba(139,92,246,.10) 0%, transparent 55%); } /* ---------- Section modifier: atmospheric ---------- */ .section--atmo { background: var(--bg-void); position: relative; overflow: hidden; } .section--atmo::before { content: ''; position: absolute; inset: 0; background: var(--wash-hero); pointer-events: none; z-index: 0; } .section--atmo > * { position: relative; z-index: 1; } /* ---------- Glass card variant ---------- */ .card--glass { background: var(--bg-glass); border: 1px solid var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-xl); position: relative; overflow: hidden; transition: transform 250ms ease, background 250ms ease, box-shadow 250ms ease; } .card--glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-sig-soft); opacity: 0; transition: opacity 250ms ease; } .card--glass:hover { background: var(--bg-glass-hover); border-color: var(--border-glass-hover); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(167, 139, 250, 0.15); } .card--glass:hover::before { opacity: 1; } /* ---------- Atmospheric MODE switch ---------- Toggle by setting data-atmo="true" on . */ html[data-atmo="true"] body { background: var(--bg-void); } html[data-atmo="true"] .section, html[data-atmo="true"] .section--surface { background: transparent; } html[data-atmo="true"] .card { background: var(--bg-glass); border-color: var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html[data-atmo="true"] .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-sig-soft); opacity: 0; transition: opacity 250ms ease; } html[data-atmo="true"] .card:hover { background: var(--bg-glass-hover); border-color: var(--border-glass-hover); box-shadow: 0 12px 40px rgba(167, 139, 250, 0.15); } html[data-atmo="true"] .card:hover::before { opacity: 1; } html[data-atmo="true"] .section__title { background: var(--gradient-sig-animated); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent !important; animation: sigShift 10s ease infinite; } /* ---------- Signature gradient text ---------- */ .text-sig { background: var(--gradient-sig-animated); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: sigShift 8s ease infinite; } @keyframes sigShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }