/*! * Ring particle field: canvas placement and stacking fixes. * * Site: techconnect.insure * Stack: Avada 7.11.7 + Fusion Builder + Slider Revolution 6.7.10 * * The canvas self-mounts as the first child of at z-index -1, so * anything opaque above it in the stacking order will hide it. Everything * below the first block exists to clear those layers. */ /* --------------------------------------------------------------------------- 1. Page colour Put the colour on and keep transparent, so the fixed canvas at z-index -1 has something to sit against. --------------------------------------------------------------------------- */ /* !important is required on both. These are single-element selectors with the lowest possible specificity, and Avada's generated stylesheet loads after this file and sets its own body background, so it wins on source order. The body rule is the critical one. An element at z-index -1 renders BEHIND its parent's background, so a white body paints straight over the canvas no matter what anything else on the page does. */ html { background: #000 !important; } body, html body { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* --------------------------------------------------------------------------- 2. The canvas itself --------------------------------------------------------------------------- */ #rp-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; } /* --------------------------------------------------------------------------- 3. Avada wrappers Avada writes background colours from Theme Options into a generated stylesheet that loads after this one, and #boxed-wrapper carries the page background in boxed layout mode. Hence !important throughout this file. Scoped to body.home so only the front page is affected. Remove .home from each selector to run it site-wide. --------------------------------------------------------------------------- */ body.home #boxed-wrapper, body.home #wrapper, body.home .fusion-header-wrapper, body.home .fusion-header, body.home .fusion-page-title-bar { background: transparent !important; background-color: transparent !important; } /* --------------------------------------------------------------------------- 4. Slider Revolution rs-module-wrap carries background: rgb(255,255,255) as an INLINE style, so it cannot be overridden without !important. Better to fix this at source: Slider Revolution > edit the slider > Slider Settings > Layout > Background > Transparent, then the same on each slide under Slide Options > Background. Once that is done the rs-* rules in this block can be deleted and only the wrapper rules above are needed. --------------------------------------------------------------------------- */ body.home #sliders-container, body.home .fusion-slider-revolution, body.home .rev_slider_wrapper, body.home rs-fullwidth-wrap, body.home rs-module-wrap, body.home rs-module, body.home rs-slides, body.home rs-slide { background: transparent !important; background-color: transparent !important; } /* Avada draws these as gradient overlays either side of a fullwidth slider. Against a dark background they read as grey smudges. */ body.home .shadow-left, body.home .shadow-right { display: none !important; } /* --------------------------------------------------------------------------- 5. Page content below the hero #main is deliberately left opaque. The canvas is position: fixed, so particles show behind the hero and the rest of the page scrolls up over them. To run particles the full length of the page, uncomment this block. Note that exposes the #0a0a0b background across the whole front page, so body copy, headings and the footer will need light colours to stay readable. --------------------------------------------------------------------------- */ /* body.home #main, body.home .fusion-footer, body.home .fusion-footer-widget-area, body.home .fusion-footer-copyright-area { background: transparent !important; background-color: transparent !important; } */ /* --------------------------------------------------------------------------- 6. Fallback stacking mode If clearing backgrounds proves impossible, comment out the z-index -1 in block 2 and uncomment this instead. It puts the canvas above the page backgrounds and lifts the content above the canvas. --------------------------------------------------------------------------- */ /* #rp-canvas { z-index: 0; } body.home #wrapper, body.home #main { position: relative; z-index: 1; } */ /* --------------------------------------------------------------------------- 7. Reduced motion The script already renders a single static frame when the OS setting is on. This drops the canvas opacity so that still frame reads as a subtle texture rather than a frozen animation. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #rp-canvas { opacity: 0.5; } }