/** * NHC Widgets — Gradient Background element styles. * * The gradient lives on a dedicated layer (.nhc-grad__bg) at z-index:-1, so it * always sits behind the content and never covers a sticky sidebar. The actual * gradient value is printed inline on that layer by PHP. * * Contained: the layer fills the wrapper box. * Full-width: the layer is stretched to the viewport width. The CSS below is a * fallback that is correct when the wrapper is centred; gradient-bg.js refines * the left offset / width so it is exact from any horizontal position. * (Horizontal overflow is clipped by the theme on , so no h-scroll.) */ .nhc-grad { position: relative; } .nhc-grad__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-repeat: no-repeat; background-size: cover; pointer-events: none; } /* Full-width fallback (exact when the wrapper is centred in the viewport). */ .nhc-grad--full > .nhc-grad__bg { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); } /* Content layer stays above the gradient. */ .nhc-grad__inner { position: relative; z-index: 1; }