/* ═══════════════════════════════════════════════════════════════════════ * ALERT SYSTEM — visual language for Magna Earth's planetary nervous * ───────────────────────────────────────────────────────────────────── * Three primitives: * .alert-glass — universal glassmorphic surface (per-domain tint) * .alert-pulse — single keyframe-free pulse driven by --pulse-phase * (set by AlertRegistry's rAF — every pulse in sync) * .alert-shockwave — one-shot escalation animation (Houdini @property) * * All motion is gated behind prefers-reduced-motion. Reduced-motion * users get the same colors + information, just static. * Everything pulls from themes.css role colors via --th-color-*. * ═══════════════════════════════════════════════════════════════════════ */ /* ── Houdini-typed properties for smooth animation of CSS vars ──────── */ @property --pulse-phase { syntax: ''; inherits: true; initial-value: 0.5; } @property --wave-r { syntax: ''; inherits: false; initial-value: 0px; } @property --ring-fill { syntax: ''; inherits: false; initial-value: 0%; } /* ── Universal alert surface ─────────────────────────────────────────── */ .alert-glass { --domain-color: var(--th-color-globe); position: relative; background: linear-gradient( 180deg, color-mix(in oklch, var(--th-bg-surface, #1a1d27) 92%, transparent), color-mix(in oklch, var(--th-bg-void, #08090c) 88%, transparent) ); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-radius: 14px; border: 1px solid color-mix(in oklch, var(--domain-color) 28%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--domain-color) 18%, transparent) inset, 0 8px 40px -16px color-mix(in oklch, var(--domain-color) 50%, transparent), 0 1px 2px rgba(0, 0, 0, 0.4); color: var(--th-text-primary, #e4e6ed); } .alert-glass::before { /* a faint conic-gradient halo bound to the domain color */ content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient( from 160deg, color-mix(in oklch, var(--domain-color) 0%, transparent), color-mix(in oklch, var(--domain-color) 38%, transparent) 35%, color-mix(in oklch, var(--domain-color) 0%, transparent) 70%, color-mix(in oklch, var(--domain-color) 18%, transparent) 100% ); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.85; } /* Per-level intensity (subtle — domain color does the heavy lifting) */ .alert-glass[data-level='CRITICAL'] { --domain-color: var(--th-color-seismic, #ef4444); } .alert-glass[data-level='WARNING'] { --domain-color: var(--th-color-frequency, #f59e0b); } .alert-glass[data-level='ELEVATED'] { --domain-color: var(--th-color-globe, #38bdf8); } .alert-glass[data-level='INTERPRETIVE'] { --domain-color: var(--th-color-codex, #8b5cf6); } .alert-glass[data-level='NOMINAL'] { --domain-color: var(--th-color-network, #10b981); } /* Stale exit transition (TTL eviction) */ .alert-glass[data-stale='1'], [data-alert-id][data-stale='1'] { opacity: 0; transform: translateY(-4px); transition: opacity 280ms ease-out, transform 280ms ease-out; pointer-events: none; } /* ── Synchronized pulse ──────────────────────────────────────────────── */ /* Every element with .alert-pulse breathes with the same --pulse-phase. * Registry's rAF writes the variable on , so this is one frame of * paint per tick across the whole page — feels like one instrument. */ .alert-pulse { --p: var(--pulse-phase, 0.5); opacity: calc(0.55 + var(--p) * 0.45); transform: scale(calc(0.92 + var(--p) * 0.12)); transform-origin: center; will-change: transform, opacity; } .alert-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--domain-color, currentColor); box-shadow: 0 0 calc(6px + var(--p, var(--pulse-phase, 0.5)) * 10px) color-mix(in oklch, var(--domain-color, currentColor) 65%, transparent), 0 0 calc(2px + var(--p, var(--pulse-phase, 0.5)) * 4px) color-mix(in oklch, var(--domain-color, currentColor) 85%, transparent) inset; } /* ── Shockwave (one-shot on escalation) ──────────────────────────────── */ .alert-shockwave { position: relative; overflow: visible; } .alert-shockwave::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( circle at center, transparent calc(var(--wave-r) - 6px), color-mix(in oklch, var(--domain-color, var(--th-color-seismic)) 80%, transparent) var(--wave-r), transparent calc(var(--wave-r) + 6px) ); opacity: 0; } .alert-shockwave[data-fire='1']::after { animation: alert-shockwave-fire 1200ms cubic-bezier(0.16, 0.84, 0.44, 1) forwards; } @keyframes alert-shockwave-fire { 0% { --wave-r: 0px; opacity: 0; } 20% { opacity: 1; } 100% { --wave-r: 200vmax; opacity: 0; } } /* ── Alert pill (ticker + panel rows) ────────────────────────────────── */ .er-alert-pill { --p: var(--pulse-phase, 0.5); --domain-color: var(--th-color-globe); display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border: 1px solid transparent; border-left: 2px solid var(--domain-color); border-radius: 999px; background: color-mix(in oklch, var(--th-bg-surface) 78%, transparent); color: var(--th-text-primary); font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; } .er-alert-pill[data-level='CRITICAL'] { --domain-color: var(--th-color-seismic, #ef4444); box-shadow: 0 0 0 1px color-mix(in oklch, var(--domain-color) 35%, transparent) inset, 0 0 calc(4px + var(--p) * 10px) color-mix(in oklch, var(--domain-color) calc(40% + var(--p) * 30%), transparent); } .er-alert-pill[data-level='WARNING'] { --domain-color: var(--th-color-frequency, #f59e0b); box-shadow: 0 0 0 1px color-mix(in oklch, var(--domain-color) 24%, transparent) inset, 0 0 calc(2px + var(--p) * 6px) color-mix(in oklch, var(--domain-color) calc(28% + var(--p) * 22%), transparent); } .er-alert-pill[data-level='ELEVATED'] { --domain-color: var(--th-color-globe, #38bdf8); } .er-alert-pill[data-level='INTERPRETIVE'] { --domain-color: var(--th-color-codex, #8b5cf6); } .er-alert-pill[data-level='NOMINAL'] { --domain-color: var(--th-color-network, #10b981); } .er-alert-pill:hover { background: color-mix(in oklch, var(--th-bg-surface-hover) 88%, transparent); } .er-alert-pill:focus-visible { outline: 2px solid color-mix(in oklch, var(--domain-color) 65%, transparent); outline-offset: 2px; } .er-alert-pill__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--domain-color); flex: none; box-shadow: 0 0 calc(2px + var(--p) * 4px) color-mix(in oklch, var(--domain-color) 80%, transparent); } .er-alert-pill__label { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--domain-color); flex: none; } .er-alert-pill__source { font-size: 11px; font-weight: 600; color: var(--th-text-heading); flex: none; } .er-alert-pill__sep { color: var(--th-text-muted); flex: none; } .er-alert-pill__message { color: var(--th-text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 56ch; } /* ── Alert detail dialog (Popover API + ) ───────────────────── */ #er-alert-dialog { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 720px); padding: 0; border: 0; background: transparent; overflow: hidden; } #er-alert-dialog::backdrop { background: radial-gradient( ellipse at center, color-mix(in oklch, var(--th-bg-void) 78%, transparent), color-mix(in oklch, var(--th-bg-void) 96%, transparent) ); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .er-alert-card { --domain-color: var(--th-color-globe); display: flex; flex-direction: column; max-height: inherit; padding: 22px 22px 16px; gap: 18px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in oklch, var(--th-bg-surface) 96%, transparent), color-mix(in oklch, var(--th-bg-void) 96%, transparent)); border: 1px solid color-mix(in oklch, var(--domain-color) 32%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--domain-color) 18%, transparent) inset, 0 18px 60px -20px color-mix(in oklch, var(--domain-color) 55%, transparent), 0 4px 12px rgba(0, 0, 0, 0.5); overflow: auto; scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--domain-color) 40%, transparent) transparent; } .er-alert-card[data-level='CRITICAL'] { --domain-color: var(--th-color-seismic, #ef4444); } .er-alert-card[data-level='WARNING'] { --domain-color: var(--th-color-frequency, #f59e0b); } .er-alert-card[data-level='ELEVATED'] { --domain-color: var(--th-color-globe, #38bdf8); } .er-alert-card[data-level='INTERPRETIVE'] { --domain-color: var(--th-color-codex, #8b5cf6); } /* Tier 1 — Identity strip */ .er-alert-card__identity { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; } .er-alert-card__glyph { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklch, var(--domain-color) 14%, transparent); border: 1px solid color-mix(in oklch, var(--domain-color) 32%, transparent); color: var(--domain-color); } .er-alert-card__glyph svg { width: 24px; height: 24px; } .er-alert-card__title-block { min-width: 0; } .er-alert-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--domain-color); } .er-alert-card__eyebrow .alert-pulse-dot { width: 6px; height: 6px; } .er-alert-card__title { margin: 6px 0 0 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--th-text-heading); word-wrap: break-word; } .er-alert-card__close { background: transparent; border: 1px solid color-mix(in oklch, var(--th-border, var(--domain-color)) 45%, transparent); color: var(--th-text-secondary); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; font-size: 18px; } .er-alert-card__close:hover { color: var(--th-text-heading); border-color: var(--domain-color); } /* Time chips */ .er-alert-card__time-chips { display: flex; flex-wrap: wrap; gap: 6px; } .er-time-chip { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: color-mix(in oklch, var(--th-bg-surface) 70%, transparent); border: 1px solid color-mix(in oklch, var(--domain-color) 22%, transparent); color: var(--th-text-secondary); } .er-time-chip[data-kind='verified'] { color: var(--th-color-network, #10b981); border-color: color-mix(in oklch, var(--th-color-network) 35%, transparent); } .er-time-chip[data-kind='started'] { color: var(--th-text-heading); } /* Tier 2 — Geo frame */ .er-alert-card__geo { border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in oklch, var(--domain-color) 22%, transparent); background: color-mix(in oklch, var(--th-bg-void) 80%, transparent); min-height: 180px; position: relative; } .er-alert-card__geo-map { width: 100%; height: 200px; } .er-alert-card__geo-diagram { width: 100%; min-height: 180px; padding: 18px; display: grid; place-items: center; } .er-alert-card__geo-diagram svg { width: 100%; height: auto; max-height: 220px; } /* Ripple marker inside Leaflet inset */ .er-alert-marker { position: relative; width: 16px; height: 16px; } .er-alert-marker::before, .er-alert-marker::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--domain-color, #ef4444); } @media (prefers-reduced-motion: no-preference) { .er-alert-marker::before { animation: er-alert-marker-ripple 2400ms ease-out infinite; } .er-alert-marker::after { animation: er-alert-marker-ripple 2400ms ease-out infinite 800ms; } @keyframes er-alert-marker-ripple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } } } .er-alert-marker__core { position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--domain-color, #ef4444); box-shadow: 0 0 8px color-mix(in oklch, var(--domain-color, #ef4444) 80%, transparent); } /* Tier 3 — Telemetry grid */ .er-alert-card__telemetry { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .er-alert-metric { padding: 12px 14px; border-radius: 10px; background: color-mix(in oklch, var(--th-bg-surface) 76%, transparent); border: 1px solid color-mix(in oklch, var(--domain-color) 18%, transparent); } .er-alert-metric__label { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-text-muted); } .er-alert-metric__value { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--th-text-heading); line-height: 1.1; } .er-alert-metric__unit { font-size: 11px; font-weight: 500; color: var(--th-text-secondary); margin-left: 4px; letter-spacing: 0.04em; } .er-alert-metric__sub { margin-top: 4px; font-size: 11px; color: var(--th-text-secondary); } .er-alert-metric--accent .er-alert-metric__value { color: var(--domain-color); } /* Dial primitive (Kp, proton flux, Torino, contained %, etc.) */ .er-alert-dial { --val: 0; --max: 1; position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 96px; margin: 4px auto 0; border-radius: 50%; background: conic-gradient( from -90deg, var(--domain-color) 0deg calc(360deg * (var(--val) / var(--max))), color-mix(in oklch, var(--th-bg-surface-hover) 80%, transparent) calc(360deg * (var(--val) / var(--max))) 360deg ); -webkit-mask: radial-gradient(circle at center, transparent 36%, #000 38%); mask: radial-gradient(circle at center, transparent 36%, #000 38%); } .er-alert-dial__value { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--th-text-heading); } /* Confidence pills + footer */ .er-alert-card__confidence { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .er-alert-pill-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; border-radius: 999px; background: color-mix(in oklch, var(--th-bg-surface) 60%, transparent); border: 1px solid color-mix(in oklch, var(--domain-color) 24%, transparent); color: var(--th-text-secondary); } .er-alert-pill-pill[data-kind='verified'] { color: var(--th-color-network, #10b981); border-color: color-mix(in oklch, var(--th-color-network) 45%, transparent); } .er-alert-pill-pill[data-kind='model'] { color: var(--th-color-frequency, #f59e0b); border-color: color-mix(in oklch, var(--th-color-frequency) 45%, transparent); } .er-alert-pill-pill[data-kind='regional'] { color: var(--th-color-globe, #38bdf8); border-color: color-mix(in oklch, var(--th-color-globe) 45%, transparent); } .er-alert-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid color-mix(in oklch, var(--domain-color) 16%, transparent); } .er-alert-card__source { font-size: 11px; color: var(--th-text-muted); letter-spacing: 0.04em; } .er-alert-card__source strong { color: var(--th-text-secondary); font-weight: 600; } .er-alert-card__source-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border-radius: 8px; background: color-mix(in oklch, var(--domain-color) 16%, transparent); border: 1px solid color-mix(in oklch, var(--domain-color) 40%, transparent); color: var(--domain-color); text-decoration: none; } .er-alert-card__source-btn:hover { background: color-mix(in oklch, var(--domain-color) 26%, transparent); } /* ── Notification prefs drawer ───────────────────────────────────────── */ #er-prefs-drawer { --domain-color: var(--th-color-globe); position: fixed; position-anchor: --er-bell; position-area: bottom right; inset: auto; margin: 0; width: min(380px, calc(100vw - 32px)); max-height: 80vh; padding: 0; border: 0; background: transparent; overflow: visible; } /* Anchor positioning fallback for browsers without `position-anchor` */ @supports not (position-anchor: --x) { #er-prefs-drawer { top: 64px; right: 12px; } } #er-prefs-drawer::backdrop { background: transparent; } .er-prefs-drawer { padding: 18px 18px 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in oklch, var(--th-bg-surface) 96%, transparent), color-mix(in oklch, var(--th-bg-void) 96%, transparent)); border: 1px solid color-mix(in oklch, var(--th-color-globe) 22%, transparent); box-shadow: 0 18px 60px -20px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); color: var(--th-text-primary); display: flex; flex-direction: column; gap: 14px; max-height: inherit; overflow: auto; } .er-prefs-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .er-prefs-drawer__title { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--th-text-heading); } .er-prefs-drawer__hint { font-size: 11px; color: var(--th-text-muted); line-height: 1.4; } .er-prefs-domain-grid { display: grid; grid-template-columns: 1fr; gap: 6px; } .er-prefs-domain-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in oklch, var(--th-bg-surface) 70%, transparent); border: 1px solid color-mix(in oklch, var(--th-color-globe) 12%, transparent); } .er-prefs-domain-row__glyph { font-size: 14px; color: var(--domain-color, var(--th-color-globe)); } .er-prefs-domain-row__label { font-size: 12px; color: var(--th-text-heading); } .er-prefs-threshold-select { background: color-mix(in oklch, var(--th-bg-void) 80%, transparent); border: 1px solid color-mix(in oklch, var(--th-color-globe) 22%, transparent); color: var(--th-text-primary); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; padding: 4px 8px; border-radius: 6px; } .er-prefs-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; } .er-prefs-channel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in oklch, var(--th-bg-surface) 70%, transparent); border: 1px solid color-mix(in oklch, var(--th-color-globe) 14%, transparent); font-size: 12px; color: var(--th-text-primary); cursor: pointer; } .er-prefs-channel[data-locked='1'] { opacity: 0.55; cursor: not-allowed; } .er-prefs-channel__tier { margin-left: auto; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--th-color-frequency, #f59e0b); } .er-prefs-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid color-mix(in oklch, var(--th-color-globe) 14%, transparent); } .er-prefs-btn { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; background: color-mix(in oklch, var(--th-color-globe) 16%, transparent); border: 1px solid color-mix(in oklch, var(--th-color-globe) 38%, transparent); color: var(--th-color-globe); cursor: pointer; } .er-prefs-btn--ghost { background: transparent; color: var(--th-text-secondary); border-color: color-mix(in oklch, var(--th-text-secondary) 25%, transparent); } .er-prefs-status { font-size: 11px; color: var(--th-text-muted); font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; letter-spacing: 0.06em; } /* ── Segmented pill control (cap selector) ─────────────────────────── */ .er-prefs-cap-pill { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in oklch, var(--th-bg-void) 70%, transparent); border: 1px solid color-mix(in oklch, var(--th-color-globe) 18%, transparent); } .er-prefs-cap-pill__opt { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; min-width: 32px; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--th-text-secondary); cursor: pointer; transition: background 200ms ease, color 200ms ease; } .er-prefs-cap-pill__opt:hover { color: var(--th-text-heading); background: color-mix(in oklch, var(--th-color-globe) 10%, transparent); } .er-prefs-cap-pill__opt.is-active { background: color-mix(in oklch, var(--th-color-globe) 28%, transparent); color: var(--th-color-globe); box-shadow: 0 0 0 1px color-mix(in oklch, var(--th-color-globe) 50%, transparent) inset; } .er-prefs-cap-pill__opt:focus-visible { outline: 2px solid color-mix(in oklch, var(--th-color-globe) 65%, transparent); outline-offset: 2px; } .er-prefs-cap-pill__opt.is-locked { position: relative; color: var(--th-text-muted); opacity: 0.55; cursor: not-allowed; padding-right: 24px; } .er-prefs-cap-pill__opt.is-locked:hover { background: transparent; color: var(--th-color-frequency); opacity: 0.85; } .er-prefs-cap-pill__lock { display: block; position: absolute; top: 2px; right: 4px; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 6px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--th-color-frequency); pointer-events: none; } /* ── Per-domain accent on prefs rows ────────────────────────────────── */ .er-prefs-domain-row[data-domain='seismic'] { --domain-color: var(--th-color-seismic); } .er-prefs-domain-row[data-domain='tsunami'] { --domain-color: var(--th-color-gateway); } .er-prefs-domain-row[data-domain='geomagnetic'] { --domain-color: var(--th-color-codex); } .er-prefs-domain-row[data-domain='solar-radiation'] { --domain-color: var(--th-color-frequency); } .er-prefs-domain-row[data-domain='solar-flare'] { --domain-color: var(--th-color-timeline); } .er-prefs-domain-row[data-domain='volcanic'] { --domain-color: var(--th-color-seismic); } .er-prefs-domain-row[data-domain='fire-weather'] { --domain-color: var(--th-color-frequency); } .er-prefs-domain-row[data-domain='wildfire'] { --domain-color: var(--th-color-timeline); } .er-prefs-domain-row[data-domain='tropical'] { --domain-color: var(--th-color-gateway); } .er-prefs-domain-row[data-domain='neo-impact'] { --domain-color: var(--th-color-codex); } .er-prefs-domain-row[data-domain='antarctic'] { --domain-color: var(--th-color-sacred); } .er-prefs-domain-row[data-domain='natural-event'] { --domain-color: var(--th-color-network); } /* ── View transition pairs ──────────────────────────────────────────── */ ::view-transition-old(sentinel-count), ::view-transition-new(sentinel-count) { animation-duration: 360ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Per-alert pill <-> dialog shared element transition is keyed by * dynamically-set view-transition-name (vt-alert-). The browser * default crossfade looks good; just slow it slightly. */ @supports (view-transition-name: a) { ::view-transition-group(*) { animation-duration: 320ms; } } /* ── Reduced-motion: freeze the moving parts, keep the information ──── */ @media (prefers-reduced-motion: reduce) { .alert-pulse, .alert-pulse-dot, .er-alert-pill, .alert-shockwave[data-fire='1']::after { animation: none !important; transition: none !important; transform: none !important; } .er-alert-marker::before, .er-alert-marker::after { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ * LIQUID-CRYSTAL SUBSTRATE — universal detail card enhancement * Spec: research/alert-taxonomy.md §10.2 * * 1. Domain-tinted gradient substrate against deep void (page bleeds * through ~22-38% in the mid-band, like crystal over fabric). * 2. 28px backdrop blur + 1.8 saturate — the "crystal pocket" between * plastic (<24px) and frosted glass (>36px). * 3. Domain-tinted hairline border (never neutral white). * 4. Inset highlight on top + sinking shadow on bottom — prismatic edge. * 5. Layered drop shadow — black-cast for depth, domain-tinted for the * crystal's chromatic spill. * 6. Refractive sweep animation ONLY on data-level="CRITICAL" cards. * ═══════════════════════════════════════════════════════════════════════ */ .er-alert-card { /* Override the existing substrate with a domain-tinted crystal */ background: linear-gradient(180deg, color-mix(in oklch, var(--domain-color) 9%, rgba(8,12,20,0.62)) 0%, rgba(8,12,20,0.78) 60%, color-mix(in oklch, var(--domain-color) 7%, rgba(8,12,20,0.82)) 100%) !important; backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border-color: color-mix(in oklch, var(--domain-color) 22%, rgba(255,255,255,0.10)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.4), 0 24px 64px -16px rgba(0,0,0,0.6), 0 8px 24px -8px color-mix(in oklch, var(--domain-color) 30%, transparent) !important; position: relative; isolation: isolate; } /* Refractive sweep — animated crystal highlight pass. CRITICAL ONLY. Slow 7s. The "life-safety, look now" cue. Rarity is the signal. */ .er-alert-card[data-level='CRITICAL']::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(115deg, transparent 0%, transparent 44%, rgba(255,255,255,0.07) 47%, color-mix(in oklch, var(--domain-color) 22%, transparent) 50%, rgba(255,255,255,0.07) 53%, transparent 56%, transparent 100%); background-size: 250% 100%; background-position: -100% 0; mix-blend-mode: screen; opacity: 0.85; animation: er-alert-crystal-sweep 7s cubic-bezier(0.5, 0, 0.5, 1) infinite; } @keyframes er-alert-crystal-sweep { 0% { background-position: -100% 0; opacity: 0; } 10% { opacity: 0.85; } 90% { opacity: 0.85; } 100% { background-position: 200% 0; opacity: 0; } } /* Ensure card content sits above the sweep layer */ .er-alert-card > * { position: relative; z-index: 1; } /* Reduced motion: kill the sweep */ @media (prefers-reduced-motion: reduce) { .er-alert-card[data-level='CRITICAL']::after { animation: none; opacity: 0; } }