The background gradient is fixed to the viewport so the page scrolls over it

The site does not have a flat background colour. The body element has a CSS gradient at a hundred and sixty-five degrees with four colour stops — near-black at the top, deep purple at forty percent, a cooler dark at seventy percent, and back to near-black at the bottom. The key property is background-attachment fixed. That pins the gradient to the viewport, not the document. When you scroll, the content moves but the background stays still. The effect is subtle — you probably do not notice it consciously, but the page feels like it has depth. Content floats over a static atmosphere instead of sliding on a flat surface. The same gradient drives every page. Service pages, checkout pages, the notes section, the portal — they all inherit the body gradient because it is set once in globals.css. No per-page background configuration. No component-level overrides. Light mode swaps all four stops to lavender tones at the same angle and the same positions. The gradient structure is identical — only the palette changes. The colour-scheme property on the html element switches between dark and light based on the data-theme attribute, so native browser controls like scrollbars and select dropdowns match the theme automatically. One CSS rule on the body creates the entire visual foundation. No images, no JavaScript, no performance cost. The four-stop gradient is roughly sixty bytes of CSS. The fixed attachment means the browser composites the background as a single layer and never repaints it on scroll. It is the cheapest visual effect on the entire site and the one that touches every pixel.