/* ═══════════════════════════════════════════════════════════════ ATMOSPHERE — Global visual layer for Evident ICU Extends the sirens-to-scales vocabulary to every surface. Applied via [data-site-surface] on (set by base.njk). Layer stack (behind all content): body::before — scales-of-justice watermark (all surfaces) body::after — sirens/scales atmosphere glow (per surface) Glassmorphism utilities (.ev-glass family) are available to any component on any surface. Homepage-launch uses the full sirens-to-scales.css scroll narrative on top of these base layers. ═══════════════════════════════════════════════════════════════ */ /* ─── Glassmorphism Tokens ─────────────────────────────────────── */ :root { --glass-blur: 16px; --glass-blur-sm: 8px; --glass-blur-lg: 28px; --glass-bg: rgb(255 255 255 / 4%); --glass-bg-mid: rgb(255 255 255 / 7%); --glass-bg-strong: rgb(255 255 255 / 11%); --glass-bg-dark: rgb(0 0 0 / 18%); --glass-border: rgb(255 255 255 / 8%); --glass-border-strong: rgb(255 255 255 / 15%); --glass-shadow: 0 4px 24px rgb(0 0 0 / 25%), 0 1px 4px rgb(0 0 0 / 14%); --glass-shadow-lg: 0 8px 40px rgb(0 0 0 / 32%), 0 2px 10px rgb(0 0 0 / 18%); --atm-scales-opacity: 0.045; } /* ─── Glassmorphism Utilities ──────────────────────────────────── */ /* Base — subtle frosted layer, suitable for cards, sidebars, panels */ .ev-glass { backdrop-filter: blur(var(--glass-blur)) saturate(1.25); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* Small — for tight UI elements (tags, chips, tooltips) */ .ev-glass--sm { backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.15); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* Large — for modal dialogs, large overlays */ .ev-glass--lg { backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.4); background: var(--glass-bg-mid); border: 1px solid var(--glass-border-strong); box-shadow: var(--glass-shadow-lg); } /* Strong — high-contrast frosted surface */ .ev-glass--strong { backdrop-filter: blur(var(--glass-blur)) saturate(1.5); background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); box-shadow: var(--glass-shadow-lg); } /* Dark — for deep panels on already-dark backgrounds */ .ev-glass--dark { backdrop-filter: blur(var(--glass-blur)) saturate(1.2); background: var(--glass-bg-dark); border: 1px solid rgb(255 255 255 / 5%); box-shadow: var(--glass-shadow); } /* Surface — matches the existing app-surface palette on dark app pages */ .ev-glass--surface { backdrop-filter: blur(var(--glass-blur)) saturate(1.3); background: color-mix(in srgb, var(--app-surface, #1e2a4e) 75%, transparent); border: 1px solid color-mix(in srgb, var(--app-border, #3a4f7a) 60%, transparent); box-shadow: var(--glass-shadow); } /* ─── Scales-of-Justice Watermark ──────────────────────────────── */ /* The scales emblem is rendered via inline SVG data URI at low opacity. It anchors to the lower-right of the viewport — a quiet institutional reference, not a decorative flourish. TWO rules are required: body::before — public surface (body is the canvas; .sirens-page etc. all have transparent backgrounds) .app-page::before — app and auth surfaces (.app-page has an opaque background that would bury a body pseudo-element) mix-blend-mode: luminosity makes the mark work on both dark and light backgrounds without forcing a specific tint. */ /* Shared property block for the scales mark */ body::before, .app-page::before { content: ""; position: fixed; pointer-events: none; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cline x1='50' y1='12' x2='50' y2='108'/%3E%3Ccircle cx='50' cy='7' r='5.5' fill='white' stroke='none'/%3E%3Cline x1='12' y1='38' x2='88' y2='38' stroke-width='2'/%3E%3Ccircle cx='50' cy='38' r='3.5' fill='white' stroke='none'/%3E%3Cline x1='12' y1='38' x2='12' y2='70' stroke-width='1.5'/%3E%3Cpath d='M2 70 Q12 81 22 70' stroke-width='2'/%3E%3Cline x1='88' y1='38' x2='88' y2='70' stroke-width='1.5'/%3E%3Cpath d='M78 70 Q88 81 98 70' stroke-width='2'/%3E%3Crect x='33' y='108' width='34' height='5.5' rx='2.5' fill='white' stroke='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 88% 82%; background-size: clamp(160px, 26vmin, 320px); opacity: var(--atm-scales-opacity); mix-blend-mode: luminosity; } /* body::before lives behind the body background stack */ body::before { z-index: -1; } /* .app-page::before — With isolation: isolate on .app-page, this element is contained within .app-page's stacking context. z-index: -1 paints above .app-page's own background/gradients but below its non-positioned children (app-shell, auth-section, etc.), which is exactly the desired layer. */ .app-page::before { z-index: -1; } @media (prefers-reduced-motion: no-preference) { body::before, .app-page::before { animation: ev-scales-breathe 14s ease-in-out infinite; } } @keyframes ev-scales-breathe { 0%, 100% { opacity: var(--atm-scales-opacity); } 50% { opacity: calc(var(--atm-scales-opacity) * 1.45); } } @media (prefers-reduced-motion: reduce) { body::before, .app-page::before { animation: none; } } /* ─── Atmospheric Overlays (per surface) ───────────────────────── */ /* Public surface — marketing and informational pages. body is the canvas here (.sirens-page and other wrappers are transparent). The atmosphere sits on body::after. Mirrors the sirens-to-scales color vocabulary: warm red-amber (urgency, the siren) at top corners; cool blue (institutional order, the scales) at bottom. On pages that load sirens-to-scales.css, the JS-driven warm/cool overlay divs layer on top of this static base. */ body[data-site-surface="public"]::after { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: -1; background: radial-gradient(circle at 16% 2%, rgb(199 71 94 / 13%), transparent 26%), radial-gradient(circle at 84% 4%, rgb(45 120 255 / 16%), transparent 28%), radial-gradient(circle at 50% 3%, rgb(217 175 103 / 6%), transparent 22%), radial-gradient(circle at 8% 96%, rgb(45 120 255 / 12%), transparent 24%), radial-gradient(circle at 92% 94%, rgb(217 175 103 / 10%), transparent 22%), radial-gradient(circle at 50% 92%, rgb(217 175 103 / 5%), transparent 20%); } /* App surface — authenticated dashboard, billing, settings, cases. .app-page has an opaque background that buries body::after, so the atmosphere is placed on .app-page::after instead. Deep sapphire at lower-left and tanzanite at upper-right give the page its forensic gravity. A trace of ruby at the center carries the siren note — evidence always carries its weight. */ body[data-site-surface="app"] .app-page::after { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 42% at 0% 100%, rgb(31 58 153 / 20%), transparent 55%), radial-gradient(ellipse 45% 32% at 100% 0%, rgb(74 45 181 / 13%), transparent 50%), radial-gradient(ellipse 60% 36% at 50% 55%, rgb(199 71 94 / 5%), transparent 60%); } /* Auth surface — login, signup, onboarding pages. Also uses .app-page, so also goes on .app-page::after. Quieter than the app: a single cool blue radial anchors the institutional tone, with a secondary warm note to acknowledge the moment of entry — urgency crossing into order. */ body[data-site-surface="auth"] .app-page::after { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: -1; background: radial-gradient(circle at 22% 8%, rgb(45 120 255 / 15%), transparent 32%), radial-gradient(circle at 78% 92%, rgb(31 58 153 / 18%), transparent 36%), radial-gradient(circle at 50% 50%, rgb(199 71 94 / 4%), transparent 50%); } /* ─── Targeted glass enhancements ──────────────────────────────── */ /* Panels that slide in from the edge benefit from a deeper blur since they overlay the already-atmospheric page. We enhance only where the existing backdrop-filter is absent or too light. */ body[data-site-surface="app"] .notification-panel { backdrop-filter: blur(20px) saturate(1.3); background: color-mix(in srgb, var(--app-surface, #1e2a4e) 88%, transparent); border-inline-start-color: color-mix(in srgb, var(--app-border, #3a4f7a) 55%, transparent); } body[data-site-surface="app"] .ai-panel { backdrop-filter: blur(22px) saturate(1.35); background: color-mix(in srgb, var(--app-surface, #1e2a4e) 84%, transparent); border-inline-start-color: color-mix(in srgb, var(--app-border, #3a4f7a) 50%, transparent); }