/* ── Site-wide hero background with frosted-glass container ── CSS vars --hero-bg-url / --hero-bg-dark injected by PageWrap. Container IDs: #pw-outer (buildGenericPage), #pw-content (pagewrapnavbarbs) IMPORTANT: #pw-outer contains the fixed navbar — it must NOT have backdrop-filter or it breaks position:fixed. Frost goes on #pw-content. ───────────────────────────────────────────────────────────────── */ /* Background image on body. Longhand properties each get !important to guarantee they override the inline background-color:#F2F2F2 injected by PageWrap bodypadd. */ body { background-color: transparent !important; background-image: var(--hero-bg-url) !important; background-position: center !important; background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } [data-bs-theme="dark"] body { background-color: transparent !important; background-image: var(--hero-bg-dark) !important; background-position: center !important; background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } /* Outer wrapper: transparent — navbar lives here, must not interfere */ #pw-outer { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Also clear any stray .container background from Bootstrap or other sheets */ #pw-outer.container, #pw-outer.container-fluid { background: transparent !important; } /* ── Frosted-glass on inner content container ── */ #pw-content { background: rgba(255, 255, 255, 0.28) !important; backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); border-radius: 12px; margin-top: 0.75rem; margin-bottom: 2rem; padding: 1rem 1.5rem 1.5rem; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); } [data-bs-theme="dark"] #pw-content { background: rgba(33, 37, 41, 0.18) !important; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } /* ── Cards: semi-transparent ── */ #pw-content .card { background: rgba(255, 255, 255, 0.35) !important; } [data-bs-theme="dark"] #pw-content .card { background: rgba(52, 58, 64, 0.22) !important; } /* Tables: transparent */ #pw-content .table { --bs-table-bg: transparent; } /* ── Full-screen homepage overrides ── The alt-homepage and homepage-split are full-screen launchers that manage their own background. Disable frosted-glass on those pages. */ #pw-content:has(.alt-homepage), #pw-content:has(.homepage-split) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0; margin: 0; padding: 0; box-shadow: none; border: none; } /* Modals + dropdowns: stay fully opaque */ .modal-content { background: var(--bs-modal-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Mobile ── */ @media (max-width: 991px) { body, [data-bs-theme="dark"] body { background-attachment: scroll !important; } #pw-content { border-radius: 0; margin-top: 0; margin-bottom: 0; border-left: none; border-right: none; } } /* ── Print ── */ @media print { body { background: #fff !important; } #pw-content, #pw-content .card { background: transparent !important; backdrop-filter: none !important; } }