/* ========================================================================== Particle background Extracted from the Casa Colibri index page. Usage: The script injects its own if one is not already in the document, so no extra markup is required. Wrap your page content in an element with class .particles-content (or apply position: relative and z-index: 1 yourself) so it paints above the canvas. ========================================================================== */ :root { /* Page background behind the particles. */ --particle-bg: #0f172a; /* Particle and connection-line colour. Hex or rgb() both work. If this variable is absent the script falls back to --accent, and then to #3b82f6. */ --particle-color: #3b82f6; } /* Background is set on html as well as body so the root canvas is filled from the first paint, regardless of background propagation. Combine this with in the head to avoid a white flash on reload while stylesheets are still loading. */ html { min-height: 100%; background: var(--particle-bg); } body { background: var(--particle-bg); min-height: 100vh; overflow-x: hidden; } #particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; /* z-index 0 rather than -1. A negative z-index child paints behind its ancestors' content, so anything that turns an ancestor into a stacking context (a browser extension applying a filter to , for example) hides the canvas completely. Sitting at 0 with the content at 1 is stable. */ z-index: 0; } /* Optional helper. Anything that should sit on top of the particles needs a stacking position above the canvas. */ .particles-content { position: relative; z-index: 1; } /* Frosted-panel look that reads well on top of the particle field. Deliberately no backdrop-filter: blurring a canvas that repaints every frame forces the browser to re-sample the backdrop constantly, and it occasionally hands back an empty snapshot, which shows up as the panel blinking out. The layered gradient below fakes the same effect without that risk. */ .particles-panel { position: relative; background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), rgba(30, 41, 59, .88); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); /* Keep a promoted layer at all times so the element never switches between "no layer" and "layer" on hover, which is the other common cause of a one-frame flash. */ transform: translate3d(0, 0, 0); will-change: transform; }