/* ============================================================ Stonewall Security — Shared Animated Network Background "Monochrome Polygon Network — Fluid Depth Edition" ONE fixed, full-viewport canvas (#network-bg) renders the animated polygon network behind ALL content on every page. Layering (all behind page content, which stays at auto/≥0): body background ............ atmospheric base gradient body::before (z -3) ......... soft fog, behind the network #network-bg (z -2) ......... the animated canvas body::after (z -1) ......... edge vignette, in front of net page content (auto / ≥0) .... sections, cards, header, footer The canvas is a child of ; because negative-z children paint above the body's own background but below in-flow content, the section fills are the only real occluders — those are made transparent in each page stylesheet so the network shows through. ============================================================ */ :root { color-scheme: dark; --bg: #050607; } /* Atmospheric base gradient — the bottom-most layer. Loaded after base.css so it supersedes the flat body fill. */ body { background: radial-gradient(ellipse 77% 82% at 45% 44%, rgba(22, 24, 27, .82) 0%, rgba(13, 15, 17, .72) 46%, rgba(6, 7, 8, .94) 82%, #020303 100%), linear-gradient(135deg, #030405 0%, #0a0b0c 47%, #020303 100%); background-color: var(--bg); } /* The animated canvas — pinned to the viewport, behind content. */ #network-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; pointer-events: none; background: transparent; } /* Logo line-rig canvas (home page). Pinned, and sits ABOVE the hero photo (z 0) but BELOW the stone logo (z 2) and content (z 5), so the industrial accent lines show on top of the Oklahoma City photo, framing the logo. */ #logo-rig { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; background: transparent; } /* Fog (behind the network) and edge vignette (in front of it) — both fixed to the viewport and inert. */ body::before, body::after { content: ""; position: fixed; inset: -8%; pointer-events: none; } body::before { z-index: -3; background: radial-gradient(ellipse 58% 43% at 18% -3%, rgba(122, 130, 138, .060) 0%, rgba(91, 98, 106, .025) 42%, transparent 74%), radial-gradient(ellipse 45% 52% at -4% 69%, rgba(118, 126, 134, .048) 0%, rgba(88, 95, 102, .018) 43%, transparent 76%), radial-gradient(circle at 21% 37%, rgba(132, 140, 148, .044) 0 7%, transparent 31%), radial-gradient(circle at 76% 26%, rgba(120, 128, 136, .034) 0 6%, transparent 29%), radial-gradient(circle at 69% 80%, rgba(105, 113, 121, .026) 0 5%, transparent 29%), linear-gradient(128deg, transparent 18%, rgba(115, 122, 129, .024) 39%, transparent 57%), linear-gradient(103deg, transparent 22%, rgba(100, 108, 116, .019) 49%, transparent 71%), radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .06) 68%, rgba(0, 0, 0, .60) 100%); filter: blur(12px); opacity: .82; } body::after { z-index: -1; background: radial-gradient(ellipse 74% 77% at 47% 45%, transparent 44%, rgba(0, 0, 0, .10) 67%, rgba(0, 0, 0, .48) 100%); box-shadow: inset 0 0 115px 30px rgba(0, 0, 0, .30); }