/* ============================================================ Synesaia · Animated node-network background (site-wide) ------------------------------------------------------------ Used in combination with network.js. Each page should: 1. Include this stylesheet (after tokens.css) 2. Place

directly inside 3. Load network.js before Page content must sit above the fixed background. Direct children of are bumped to z-index:1 automatically here. If a page's card backgrounds are opaque (e.g. solid var(--bg)), change them to translucent equivalents (e.g. rgba(14,14,14,0.6)) so the network bleeds through. ============================================================ */ .site-network { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.62; mask-image: radial-gradient(ellipse 95% 88% at 50% 50%, #000 45%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 95% 88% at 50% 50%, #000 45%, transparent 100%); } .site-network svg { width: 100%; height: 100%; display: block; } .site-network .net-line { stroke: #f0ede8; stroke-width: 0.55; fill: none; opacity: 0.18; } .site-network .net-line--accent { stroke: oklch(0.62 0.085 195); opacity: 0.5; stroke-width: 0.85; } .site-network .net-node { fill: oklch(0.62 0.085 195); opacity: 0.75; } .site-network .net-node--accent { fill: oklch(0.62 0.085 195); opacity: 1; } .site-network .net-node--hollow { fill: none; stroke: oklch(0.62 0.085 195); stroke-width: 0.7; opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .site-network { opacity: 0.42; } } /* Ensure all page content stacks above the fixed background */ body > nav, body > section, body > footer, body > div.subnav, body > div.subnav-wrap { position: relative; z-index: 1; }