/* ═══════════════════════════════════════════════════════════════ support-backgrounds.css — MireonSpero™ Applies fixed-attachment background images to the of each support page without requiring a wrapper class. LOAD ORDER in each support HTML : 1. global.css 2. layout2-inner.css 3. support-backgrounds.css ← ADD THIS, page-specific 4. library.css / ethos.css / policy.css Implementation: each file uses a data attribute on to scope the background. No HTML changes to needed beyond adding data-page="library" (or ethos / policy) to the tag of each page. ALTERNATIVELY — if you prefer not to touch the HTML — each page can simply link this file AND its own page CSS, and the body rule below is scoped by page-specific CSS custom property override. See Option B below. ────────────────────────────────────────────────────────────── RECOMMENDED APPROACH (Option A — one attribute on ): library.html → ethos.html → policy.html → Then link this single shared CSS file on all three pages. No wrapper divs. No body classes. Clean and correct. ═══════════════════════════════════════════════════════════════ */ /* ── SHARED BODY BASE ─────────────────────────────────────────── Resets global.css body background (white) and establishes the fixed-attachment pattern shared by all support pages. ────────────────────────────────────────────────────────────────*/ [data-page="library"] body, [data-page="ethos"] body, [data-page="policy"] body { background-color: #f0ece4; /* warm parchment fallback while image loads */ background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0; } /* ── LIBRARY ────────────────────────────────────────────────────*/ [data-page="library"] body { background-image: url('../assets/support/library/library-background.webp'); } /* ── ETHOS ──────────────────────────────────────────────────────*/ [data-page="ethos"] body { background-image: url('../assets/support/ethos/ethos-background.webp'); } /* ── POLICY ─────────────────────────────────────────────────────*/ [data-page="policy"] body { background-image: url('../assets/support/policy/policy-background.webp'); } /* ── OVERRIDE: global.css sets body { background: #fff } ──────── layout2-inner.css does not touch body background. global.css does. The rules above have equal specificity ([attr] selector = 0-1-0) vs global.css body (0-0-1). [attr] body wins. No !important needed. ────────────────────────────────────────────────────────────────*/ /* ── MOBILE: fixed-attachment causes rendering issues on iOS ──── Degrade to scroll on small screens — visually identical at narrow widths, eliminates the iOS Safari paint bug. ────────────────────────────────────────────────────────────────*/ @media (max-width: 768px) { [data-page="library"] body, [data-page="ethos"] body, [data-page="policy"] body { background-attachment: scroll; } }