/* ════════════════════════════════════════════════════════════════ FRAGRANCE BOX — global luxury background system. A subtle, Apple-style off-white depth applied site-wide. Centralized tokens, one stylesheet, no image assets, no animation. Loaded once on every public page via includes/nav.php. KILL SWITCH (revert to plain white instantly, no code deletion): 1. PHP: set $navLuxBg = false; in includes/nav.php (omits the ). 2. CSS: add class "fb-lux-off" to or . See backups/luxury-background-system/README.md for full rollback. ════════════════════════════════════════════════════════════════ */ :root { --fb-bg-base: #fbfbfa; --fb-bg-surface: #ffffff; --fb-bg-soft: #f5f5f3; --fb-bg-radial-strong: rgba(0, 0, 0, 0.032); --fb-bg-radial-soft: rgba(0, 0, 0, 0.018); --fb-bg-grain-opacity: 0.02; } /* Soft luxury depth on the page canvas. `html body` (specificity 0,0,2) layers over any page that sets a plain body background. */ html body { background: radial-gradient(circle at 78% 12%, var(--fb-bg-radial-strong), transparent 34%), radial-gradient(circle at 15% 4%, var(--fb-bg-radial-soft), transparent 30%), linear-gradient(180deg, var(--fb-bg-base) 0%, var(--fb-bg-surface) 46%, var(--fb-bg-soft) 100%); background-attachment: fixed; } /* Ultra-subtle grain — tiny CSS dot texture (no image). Fixed, behind all content, never blocks clicks, ignored by assistive tech. */ .fb-lux-layer { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--fb-bg-grain-opacity); background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.22) 1px, transparent 0); background-size: 18px 18px; } /* Mobile: fixed attachment can repaint-jank on iOS, and the grain is wasted on small screens. Scroll attachment + no grain. */ @media (max-width: 768px) { html body { background-attachment: scroll; } .fb-lux-layer { display: none; } } /* Kill switch — revert to the previous plain white. */ html.fb-lux-off body, body.fb-lux-off { background: #fff !important; } html.fb-lux-off .fb-lux-layer, body.fb-lux-off .fb-lux-layer { display: none !important; }