/* ============================================================ U2 GLASS — Ambient Glass design system for Unit 2 dashboard Loads AFTER shared.css. Applies only to pages with . Spec: docs/superpowers/specs/2026-06-12-visual-overhaul-design.md ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { --u2-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --u2-fast: 150ms; --u2-med: 250ms; --u2-slow: 500ms; --u2-radius: 12px; --u2-blur: 12px; --u2-bg0: #080c12; --u2-backdrop: radial-gradient(1100px circle at 15% -5%, #16334d 0%, transparent 55%), radial-gradient(900px circle at 95% 100%, #1a2a4d 0%, transparent 45%), #080c12; --u2-panel: rgba(255, 255, 255, 0.05); --u2-panel-solid: #131b29; /* no-backdrop-filter fallback */ --u2-panel-raised: rgba(13, 20, 32, 0.75); --u2-panel-raised-solid: #0d1420; --u2-panel-accent: rgba(27, 96, 157, 0.16); --u2-border: rgba(255, 255, 255, 0.10); --u2-border-strong: rgba(125, 180, 232, 0.30); --u2-glow: 0 10px 26px rgba(27, 96, 157, 0.30); --u2-shadow: 0 4px 18px rgba(0, 0, 0, 0.40); --u2-text: #dde5f0; --u2-muted: #8da3bd; --u2-dim: #566578; --u2-hero-grad: linear-gradient(90deg, #dde5f0, #7db4e8); --u2-ok: #3fb950; --u2-warn: #e3b341; --u2-err: #f85149; --u2-focus: rgba(36, 116, 187, 0.55); } body.light { --u2-bg0: #eef2f7; --u2-backdrop: radial-gradient(1100px circle at 15% -5%, #d7e6f5 0%, transparent 55%), radial-gradient(900px circle at 95% 100%, #dde3f2 0%, transparent 45%), #eef2f7; --u2-panel: rgba(255, 255, 255, 0.65); --u2-panel-solid: #ffffff; --u2-panel-raised: rgba(255, 255, 255, 0.85); --u2-panel-raised-solid: #ffffff; --u2-panel-accent: rgba(27, 96, 157, 0.10); --u2-border: rgba(13, 40, 70, 0.10); --u2-border-strong: rgba(27, 96, 157, 0.35); --u2-glow: 0 10px 24px rgba(27, 96, 157, 0.18); --u2-shadow: 0 4px 16px rgba(30, 50, 80, 0.12); --u2-text: #15243a; --u2-muted: #4d6076; --u2-dim: #7a8aa0; --u2-hero-grad: linear-gradient(90deg, #15243a, #1B609D); } /* ---------- 2. PAGE BACKDROP ---------- */ body.u2 { background: var(--u2-backdrop); background-attachment: fixed; color: var(--u2-text); } /* app-shell pages load app-shell.css after this file; its body.app-shell background and #page-header skin outrank body.u2 / .u2-card on source order and specificity. These scoped overrides win on specificity. */ body.app-shell.u2 { background: var(--u2-backdrop); background-attachment: fixed; color: var(--u2-text); } body.app-shell.u2 #page-header { background: var(--u2-panel); -webkit-backdrop-filter: blur(var(--u2-blur)); backdrop-filter: blur(var(--u2-blur)); border: 1px solid var(--u2-border); box-shadow: var(--u2-shadow); } /* ---------- 3. COMPONENTS ---------- */ /* Glass card */ .u2-card { background: var(--u2-panel); -webkit-backdrop-filter: blur(var(--u2-blur)); backdrop-filter: blur(var(--u2-blur)); border: 1px solid var(--u2-border); border-radius: var(--u2-radius); box-shadow: var(--u2-shadow); transition: transform var(--u2-med) var(--u2-ease), box-shadow var(--u2-med) var(--u2-ease), border-color var(--u2-med) var(--u2-ease); } .u2-card:hover { transform: translateY(-3px); box-shadow: var(--u2-glow); border-color: var(--u2-border-strong); } .u2-card--static:hover { /* opt-out for non-interactive panels */ transform: none; box-shadow: var(--u2-shadow); border-color: var(--u2-border); } /* KPI tile */ .u2-kpi { padding: 16px 18px; } .u2-kpi .u2-kpi-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--u2-muted); } .u2-kpi .u2-kpi-value { font-size: 28px; font-weight: 700; background: var(--u2-hero-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.25; } .u2-kpi .u2-kpi-delta { font-size: 12px; color: var(--u2-muted); } .u2-kpi .u2-kpi-delta.up { color: var(--u2-ok); } .u2-kpi .u2-kpi-delta.down { color: var(--u2-err); } .u2-kpi--accent { background: var(--u2-panel-accent); border-color: var(--u2-border-strong); } /* Buttons */ .u2-btn { background: rgba(27, 96, 157, 0.45); border: 1px solid var(--u2-border-strong); color: var(--u2-text); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: transform var(--u2-fast) var(--u2-ease), box-shadow var(--u2-med) var(--u2-ease), background var(--u2-fast) var(--u2-ease); } body.light .u2-btn { background: #1B609D; color: #fff; } .u2-btn:hover { background: rgba(27, 96, 157, 0.65); box-shadow: 0 0 16px rgba(27, 96, 157, 0.5); } body.light .u2-btn:hover { background: #134a7a; } .u2-btn:active { transform: scale(0.96); } .u2-btn:focus-visible { outline: 2px solid var(--u2-focus); outline-offset: 2px; } .u2-btn--ghost { background: transparent; border-color: var(--u2-border); } .u2-btn--ghost:hover { background: var(--u2-panel); box-shadow: none; border-color: var(--u2-border-strong); } body.light .u2-btn--ghost { background: transparent; color: var(--u2-text); } .u2-btn--danger { background: rgba(248, 81, 73, 0.35); border-color: rgba(248, 81, 73, 0.5); } .u2-btn--danger:hover { background: rgba(248, 81, 73, 0.55); box-shadow: 0 0 16px rgba(248, 81, 73, 0.4); } /* Tables */ .u2-table { width: 100%; border-collapse: collapse; } .u2-table th { position: sticky; top: 0; background: var(--u2-panel-raised); -webkit-backdrop-filter: blur(var(--u2-blur)); backdrop-filter: blur(var(--u2-blur)); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--u2-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--u2-border); z-index: 1; } .u2-table td { padding: 9px 12px; border-bottom: 1px solid var(--u2-border); font-size: 13px; } .u2-table tbody tr { transition: background var(--u2-fast) var(--u2-ease); } .u2-table tbody tr:hover { background: var(--u2-panel); } /* Chart bars (height is data, set inline; .u2-bar-grow adds entrance) */ .u2-bar { width: 22px; background: linear-gradient(180deg, #7db4e8, #1B609D); border-radius: 3px 3px 0 0; } .u2-bar--hi { background: linear-gradient(180deg, #a8d0f5, #2474bb); } /* Nav */ .u2-nav { background: var(--u2-panel-raised); -webkit-backdrop-filter: blur(var(--u2-blur)); backdrop-filter: blur(var(--u2-blur)); border-bottom: 1px solid var(--u2-border); transition: box-shadow var(--u2-med) var(--u2-ease); } .u2-nav.u2-nav--scrolled { box-shadow: var(--u2-shadow); } .u2-nav a { position: relative; color: var(--u2-muted); transition: color var(--u2-fast) var(--u2-ease); } .u2-nav a:hover { color: var(--u2-text); } .u2-nav a.active { color: var(--u2-text); } .u2-nav a::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: #2474bb; transform: scaleX(0); transform-origin: left; transition: transform var(--u2-med) var(--u2-ease); } .u2-nav a.active::after { transform: scaleX(1); } /* Modal */ .u2-modal-backdrop { background: rgba(4, 8, 14, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: u2-fade var(--u2-med) var(--u2-ease) both; position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; } .u2-modal-backdrop.u2-open { display: flex; } .u2-modal { background: var(--u2-panel-raised); -webkit-backdrop-filter: blur(var(--u2-blur)); backdrop-filter: blur(var(--u2-blur)); border: 1px solid var(--u2-border); border-radius: var(--u2-radius); box-shadow: var(--u2-glow); animation: u2-scale-in var(--u2-med) var(--u2-ease) both; } /* Forms */ .u2-input, .u2-select, .u2-textarea { background: var(--u2-panel); border: 1px solid var(--u2-border); border-radius: 8px; color: var(--u2-text); padding: 8px 12px; font-size: 13px; transition: border-color var(--u2-fast) var(--u2-ease), box-shadow var(--u2-fast) var(--u2-ease); } .u2-input:focus, .u2-select:focus, .u2-textarea:focus { outline: none; border-color: var(--u2-border-strong); box-shadow: 0 0 0 3px var(--u2-focus); } /* Live pulse dot (sparingly: genuinely live feeds only) */ .u2-live { width: 8px; height: 8px; border-radius: 50%; background: var(--u2-ok); display: inline-block; animation: u2-pulse 2s var(--u2-ease) infinite; } /* ---------- 4. MOTION ---------- */ @keyframes u2-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes u2-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes u2-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes u2-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes u2-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55); } 50% { opacity: 0.75; box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); } } /* Entrance: u2-glass.js sets --u2-i per sibling (capped at 8) */ .u2-enter { animation: u2-rise var(--u2-slow) var(--u2-ease) both; animation-delay: calc(var(--u2-i, 0) * 80ms); } .u2-bar-grow { transform-origin: bottom; animation: u2-bar-grow 700ms var(--u2-ease) both; animation-delay: calc(var(--u2-i, 0) * 100ms); } /* ---------- 5. GUARDS ---------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .u2-card, .u2-input, .u2-select, .u2-textarea { background: var(--u2-panel-solid); } .u2-nav, .u2-modal, .u2-table th { background: var(--u2-panel-raised-solid); } } @media (prefers-reduced-motion: reduce) { .u2-enter, .u2-bar-grow, .u2-modal, .u2-modal-backdrop { animation: none; } .u2-live { animation: none; opacity: 1; } .u2-card, .u2-card:hover { transform: none; } .u2-btn:active { transform: none; } } /* Mobile: cut blur cost — many stacked frosted surfaces in one scroll column */ @media (max-width: 768px) { :root { --u2-blur: 6px; } .u2-table th, body.u2 #sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; } }