/* ────────────────────────────────────────────────────────────────────────── Ambient blue glow shared by About / Contact / Become a Partner. Two soft radial blobs sit on a fixed, negative-z layer behind everything. Their positions are driven by registered custom properties so they can be transitioned: glow.js seeds the *previous* page's positions before first paint, then flips to this page's positions, making the glow slide into place as you move between these pages. See assets/js/glow.js. is made transparent so the negative-z layer shows; keeps the base colour so there's no white flash before paint. ────────────────────────────────────────────────────────────────────────── */ @property --glow-a-x { syntax: ""; inherits: true; initial-value: 28%; } @property --glow-a-y { syntax: ""; inherits: true; initial-value: 22%; } @property --glow-b-x { syntax: ""; inherits: true; initial-value: 78%; } @property --glow-b-y { syntax: ""; inherits: true; initial-value: 82%; } html body { background-color: transparent; } /* Slide between page positions. No transition on a direct visit — initial styles don't animate — so the glow only slides when navigating page→page (glow.js seeds the start position before flipping to these targets). */ :root { transition: --glow-a-x 1.1s ease, --glow-a-y 1.1s ease, --glow-b-x 1.1s ease, --glow-b-y 1.1s ease; } /* Per-page targets, set on . Keep these in sync with the POS map in assets/js/glow.js. */ html[data-glow="about"] { --glow-a-x: 28%; --glow-a-y: 22%; /* top-left */ --glow-b-x: 78%; --glow-b-y: 82%; /* bottom-right */ } html[data-glow="contact"] { --glow-a-x: 50%; --glow-a-y: 18%; /* top-center */ --glow-b-x: 50%; --glow-b-y: 84%; /* bottom-center */ } html[data-glow="partner"] { --glow-a-x: 74%; --glow-a-y: 20%; /* top-right */ --glow-b-x: 24%; --glow-b-y: 82%; /* bottom-left */ } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: var(--bg-primary); } body::after { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background-image: radial-gradient( 40% 50% at var(--glow-a-x) var(--glow-a-y), rgba(91, 168, 245, 0.18), transparent 70% ), radial-gradient( 45% 55% at var(--glow-b-x) var(--glow-b-y), rgba(61, 147, 237, 0.13), transparent 70% ); filter: blur(40px); animation: glow-sheen 26s ease-in-out infinite alternate; } /* Symmetric horizontal drift so centered layouts (Contact) stay centred — an asymmetric/left-leaning range reads as the glow sitting off to one side. Vertical drift + scale keep the layer breathing. */ @keyframes glow-sheen { from { transform: translate3d(-4%, -6%, 0) scale(1.06); } to { transform: translate3d(4%, 7%, 0) scale(1.18); } } @media (prefers-reduced-motion: reduce) { :root { transition: none; } body::after { animation: none; } }