/* ========================================================================== Site atmosphere — shared (home, about, any page) Opt in: add class "has-atmosphere" on and include the markup from partials/site-atmosphere.html ========================================================================== */ .has-atmosphere { --apx-cyan: #03a7ff; --apx-navy: #001b29; --apx-orange: #ff7300; --apx-glow-cyan: rgba(3, 167, 255, 0.22); --apx-glow-orange: rgba(255, 115, 0, 0.16); --atm-progress: 0; --atm-mx: 50%; --atm-my: 30%; --atm-intensity: 1; --atm-grid-alpha: 0.28; position: relative; max-width: 100%; /* Do NOT set overflow-y on body — it breaks position:sticky headers. Horizontal bleed is clipped on html below. */ background: linear-gradient( 180deg, rgba(236, 246, 252, 0.9) 0%, rgba(255, 255, 255, 0.72) 18%, rgba(248, 251, 253, 0.85) 45%, rgba(255, 255, 255, 0.9) 70%, rgba(236, 246, 252, 0.95) 100% ); } /* clip on html only — does not create a body scrollport, so sticky headers keep working */ html:has(body.has-atmosphere), html:has(body.home--enhanced) { overflow-x: clip; max-width: 100%; } /* Let atmosphere read through light page modules */ .has-atmosphere .about-us_content, .has-atmosphere .about-capabilities, .has-atmosphere .about-cap-rail, .has-atmosphere .clients-slider-wrapper, .has-atmosphere .apx-faq, .has-atmosphere .pre-footer-enhanced, .has-atmosphere .services-section, .has-atmosphere .services-grid-section, .has-atmosphere .tech-stack, .has-atmosphere .tech-marquee, .has-atmosphere .process-section, .has-atmosphere .industries-section, .has-atmosphere .case-studies-list, .has-atmosphere .csd-overview, .has-atmosphere .csd-strategy, .has-atmosphere .csd-solutions, .has-atmosphere .csd-related, .has-atmosphere .ins-hero, .has-atmosphere .ins-feed, .has-atmosphere .ind-hero, .has-atmosphere .ind-cover, .has-atmosphere .ind-body, .has-atmosphere .ind-related, .has-atmosphere .cr-banner, .has-atmosphere .cr-culture, .has-atmosphere .cr-openings, .has-atmosphere .cr-perks, .has-atmosphere .atm-passthrough { position: relative; z-index: 1; background: transparent; } .has-atmosphere .footer-section { position: relative; z-index: 2; } .has-atmosphere header, .has-atmosphere .header-section { z-index: 10; } /* Full-page atmosphere (grid + mesh + canvas) */ .site-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .site-atmosphere__grid { position: absolute; inset: -10%; background-image: radial-gradient( circle, rgba(0, 27, 41, 0.22) 1px, transparent 1.5px ); background-size: 42px 42px; opacity: calc(var(--atm-grid-alpha) * var(--atm-intensity)); transform: translate3d( calc((var(--atm-mx) - 50%) * -0.04), calc((var(--atm-my) - 50%) * -0.03), 0 ); mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.25) 100% ); -webkit-mask-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.25) 100% ); will-change: transform, opacity; } .site-atmosphere__mesh { position: absolute; inset: 0; } .atm-orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform, opacity; opacity: calc(0.85 * var(--atm-intensity)); transition: opacity 0.4s ease; } .atm-orb--a { width: min(58vw, 640px); height: min(58vw, 640px); top: -12%; left: -8%; background: radial-gradient( circle, rgba(3, 167, 255, 0.5) 0%, rgba(3, 167, 255, 0) 70% ); } .atm-orb--b { width: min(48vw, 520px); height: min(48vw, 520px); top: 8%; right: -10%; background: radial-gradient( circle, rgba(255, 115, 0, 0.5) 0%, rgba(255, 115, 0, 0) 68% ); } .atm-orb--c { width: min(70vw, 760px); height: min(40vw, 420px); bottom: 8%; left: 20%; background: radial-gradient( ellipse at center, rgba(3, 167, 255, 0.3) 0%, rgba(255, 115, 0, 0.1) 45%, transparent 72% ); opacity: calc(0.65 * var(--atm-intensity)); } .site-atmosphere__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(0.9 * var(--atm-intensity)); } .site-atmosphere__wash { position: absolute; inset: 0; background: radial-gradient( ellipse 80% 50% at var(--atm-mx) var(--atm-my), rgba(3, 167, 255, 0.1), transparent 55% ), linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) calc(35% + var(--atm-progress) * 20%), rgba(236, 246, 252, 0.35) 100% ); transition: background 0.2s linear; } .site-atmosphere__vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 40%, rgba(255, 255, 255, 0.35) 100% ); opacity: 0.65; } @media (max-width: 768px) { .atm-orb { filter: blur(56px); } .site-atmosphere__canvas { opacity: calc(0.55 * var(--atm-intensity)); } } @media (prefers-reduced-motion: reduce) { .site-atmosphere__canvas { display: none; } .atm-orb { transition: none; } }