/* ═══════════════════════════════════════════════════════════════════ app-background.css — universal frosted-glass canvas (Sunwave OS). ONE warm light-orange "frosted glass" backdrop shared by every page. A bright base with soft orange glows reaching in from two corners and a faint ink shadow in the other two, plus a fine grain — subtle, but visible across the whole surface. Built to never break page content: - The wash lives on a DEDICATED element (`.sw-frost`, rendered as the first child of by partials/app-background.ejs) pinned BEHIND all content (position:fixed, z-index:-1, pointer-events:none). It uses its own element rather than body::before so it never collides with surfaces that already use body's pseudo-layers (the paper-mode grain). Cards keep their own opaque fills, so nothing inside a page changes. - `body { isolation: isolate }` gives a stacking context so the z-index:-1 frost paints ABOVE body's own (usually opaque) background instead of being hidden beneath it. isolation changes no positioning or containing block, so it can't move any absolutely/fixed element. - position:fixed means the backdrop looks identical no matter how far you scroll on a very long page; a solid base color on fills the overscroll / rubber-band gutter on all four sides, so force-scrolling past the top, bottom, or either side reveals the frost, never white. Only the embedded iframes opt out (they must stay see-through). Load this LAST, after tokens/style/admin, via partials/app-background-css.ejs. See INTERFACE_DESIGN_PHILOSOPHY_NEW.md and NAVIGATION.md (§4). ═══════════════════════════════════════════════════════════════════ */ :root { /* Solid frosted base — bright warm white with the faintest cream warmth. Fills the overscroll gutters and underpins the wash. Whiter than --sw-canvas (#F8F5EF) so the app reads as light frosted glass with a warm cast rather than cream. */ --sw-frost-base: #FBF8F3; /* The wash: a calm blue glow top-right, a warm orange glow bottom-left, with a faint ink shadow in the other two corners ("a slight dark mixed in"). Alphas stay low so it reads as atmosphere, but reach well into the page so the tint is visible across the surface, not just pinned in the corners. Brand blue = #BFE0F3, orange = #F38A3F, ink = #373B4D (literal here since a gradient stop can't take a var() alpha cleanly). */ --sw-frost-wash: radial-gradient(135% 105% at 100% -8%, rgba(191, 224, 243, 0.22) 0%, rgba(191, 224, 243, 0) 62%), radial-gradient(125% 100% at -10% 110%, rgba(243, 138, 63, 0.12) 0%, rgba(243, 138, 63, 0) 64%), radial-gradient(95% 80% at 4% 0%, rgba(55, 59, 77, 0.05) 0%, rgba(55, 59, 77, 0) 55%), radial-gradient(90% 78% at 100% 106%, rgba(55, 59, 77, 0.04) 0%, rgba(55, 59, 77, 0) 58%); } /* Overscroll / rubber-band gutter on every side shows the frost base, never white. (A background-color always fills the canvas, including the bounce region, on macOS/iOS.) */ html { background-color: var(--sw-frost-base); } /* Stacking context so the frost (z-index:-1) paints above body's own background. (See header note — purely a paint change, no layout effect.) */ body { isolation: isolate; } /* The frosted wash — fixed to the viewport, pinned behind all content. */ .sw-frost { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--sw-frost-base); background-image: var(--sw-frost-wash); background-repeat: no-repeat; } /* Fine fractal-noise grain — the "frosted" texture. Very low opacity, layered over the wash inside the same element so it can never touch a real element. */ .sw-frost::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* ── Tech installed app: warm the very top so it isn't a flat white bar ── On the standalone /tech app the content is short and the shared wash's warmth rises only from the bottom-left, leaving the status-bar + date-nav zone reading as a flat white "bar". Layer a gentle warm frosted tint over just the top ~220px (status bar + date stepper) so it blends into the page instead. Scoped to the app shell, so the admin/booking/customer surfaces keep the shared wash as-is. Sits FIRST in the list so it paints over the base + shared wash. */ body.tech-appshell .sw-frost { background-image: radial-gradient(120% 48% at 50% -14%, rgba(243, 138, 63, 0.13) 0%, rgba(243, 138, 63, 0) 70%), var(--sw-frost-wash); } /* ── Opt-out: embedded iframes must stay see-through ── The booker iframe and any KPI/issues embed sit inside another page; the frost would block what's behind them. Hide the frost and clear the iframe's html base so they stay transparent. */ html:has(body.embed-mode), html:has(body.kpi-embed-mode), html:has(body.issues-embed) { background: transparent; } body.embed-mode .sw-frost, body.kpi-embed-mode .sw-frost, body.issues-embed .sw-frost { display: none; } /* Keep the wash off of print (clean estimates / invoices). */ @media print { html { background: #FFFFFF !important; } .sw-frost { display: none !important; } }