/* EGI Portal — Atmosphere layer * -------------------------------------------------------------- * Constellation Amendment to BRAND_SPEC.md (Appendix A). * * Three intensity tiers, opt-in via : * full — Landing, Login. Full canvas + orbs + overlays + scan * dimmed — Authenticated idle pages. Orbs only, ≤50% opacity * off — Data-dense pages. No atmosphere * * The atmosphere never undermines data legibility per the Rigor pillar. * `prefers-reduced-motion` degrades all tiers to no animations. * * Colors come from brand.css scale tokens. No raw hex. * * Load order: AFTER components.css (last in cascade). * -------------------------------------------------------------- */ /* ════════════════════════════════════════════════════════════════ * CANVAS — full-screen particle field (mounted by atmosphere.js) * ════════════════════════════════════════════════════════════════ */ #atmosphere-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Hidden by default; tier classes show as needed */ body:not([data-atmosphere="full"]) #atmosphere-canvas { display: none; } /* ════════════════════════════════════════════════════════════════ * ORBS — floating gradient blobs * ════════════════════════════════════════════════════════════════ */ .atmo-orb { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 1; transition: opacity 400ms ease, filter 400ms ease, background 400ms ease; } .atmo-orb-1 { width: 600px; height: 600px; /* teal-500 #33BACC at 0.18 — saturated enough to read on pure white */ background: radial-gradient(circle, rgba(51, 186, 204, 0.18) 0%, transparent 70%); top: -10%; right: -5%; animation: atmo-orb-float 25s ease-in-out infinite; } .atmo-orb-2 { width: 500px; height: 500px; /* pink-400 #D5679A at 0.14 */ background: radial-gradient(circle, rgba(213, 103, 154, 0.14) 0%, transparent 70%); bottom: 10%; left: -8%; animation: atmo-orb-float 25s ease-in-out infinite; animation-delay: -8s; } .atmo-orb-3 { width: 400px; height: 400px; /* purple-400 #9480BC at 0.14 */ background: radial-gradient(circle, rgba(148, 128, 188, 0.14) 0%, transparent 70%); top: 45%; right: 10%; animation: atmo-orb-float 25s ease-in-out infinite; animation-delay: -16s; } @keyframes atmo-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-20px, 15px) scale(0.95); } 75% { transform: translate(15px, 25px) scale(1.02); } } /* Dark-theme: lighter ramp steps (§4.2) at higher alpha so orbs read against navy-900 */ [data-theme="dark"] .atmo-orb { filter: blur(80px); } [data-theme="dark"] .atmo-orb-1 { /* teal-400 #64CBD9 at 0.22 alpha */ background: radial-gradient(circle, rgba(100, 203, 217, 0.22) 0%, transparent 70%); } [data-theme="dark"] .atmo-orb-2 { /* pink-300 #E297BA at 0.18 alpha */ background: radial-gradient(circle, rgba(226, 151, 186, 0.18) 0%, transparent 70%); } [data-theme="dark"] .atmo-orb-3 { /* purple-300 #B6A8D1 at 0.18 alpha */ background: radial-gradient(circle, rgba(182, 168, 209, 0.18) 0%, transparent 70%); } /* ════════════════════════════════════════════════════════════════ * OVERLAYS — dot grid (light), hex grid + noise (dark) * ════════════════════════════════════════════════════════════════ */ .atmo-dots { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.5; /* teal-600 #2895A4 at 0.22 — visible without overpowering */ background-image: radial-gradient(circle, rgba(40, 149, 164, 0.22) 1px, transparent 1px); background-size: 40px 40px; transition: opacity 400ms ease; } [data-theme="dark"] .atmo-dots { opacity: 0; } .atmo-hex { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0L60 15v22L30 52 0 37V15z' fill='none' stroke='%2364CBD9' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 60px 52px; transition: opacity 400ms ease; } [data-theme="dark"] .atmo-hex { opacity: 0.03; } .atmo-noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); transition: opacity 400ms ease; } [data-theme="dark"] .atmo-noise { opacity: 0.03; } /* ════════════════════════════════════════════════════════════════ * TIER MODIFIERS * * Default state has all atmosphere elements hidden via the body * selector below. The tier classes selectively show them. * ════════════════════════════════════════════════════════════════ */ /* Default: hide all atmosphere if no tier set */ body:not([data-atmosphere]) .atmo-orb, body:not([data-atmosphere]) .atmo-dots, body:not([data-atmosphere]) .atmo-hex, body:not([data-atmosphere]) .atmo-noise, body[data-atmosphere="off"] .atmo-orb, body[data-atmosphere="off"] .atmo-dots, body[data-atmosphere="off"] .atmo-hex, body[data-atmosphere="off"] .atmo-noise { display: none; } /* DIMMED: orbs at 50% opacity, no float animation, no canvas, no scan line */ body[data-atmosphere="dimmed"] .atmo-orb { opacity: 0.5; animation: none; } body[data-atmosphere="dimmed"] .atmo-dots { opacity: 0.175; /* 50% of 0.35 */ } body[data-atmosphere="dimmed"][data-theme="dark"] .atmo-hex, body[data-atmosphere="dimmed"] [data-theme="dark"] .atmo-hex { opacity: 0.015; /* 50% of 0.03 */ } body[data-atmosphere="dimmed"] .atmo-noise { /* keep noise hidden in dimmed */ display: none; } /* FULL: everything on. (No overrides needed — the defaults above are full intensity.) */ /* The legacy Landing atmosphere did not honor prefers-reduced-motion * on the orb-float animation. We match that behavior — the float is a * 25-second ease-in-out cycle that translates 30px max, well below * the vestibular-trigger threshold. The constellation canvas in * atmosphere.js is similarly always-animated. */