/** * IAG UI v4 Preview — "Command & Intelligence" Theme Overlay * * Antigravity spec: iag_master_design_ux_redesign_spec.md (2026-08-21). * Isolated under html.iag-preview-v4 — every rule in section (B) onward is * scoped so production (no class on ) renders byte-identical to * before this file existed. See brain/08-permanent-decisions.md 08.21 for * the governance exception this round operates under. * * Token strategy: this file REDEFINES existing custom properties on * `html.iag-preview-v4` rather than duplicating component rules. Every * component in components.css/drawers.css/filters.css/home.css already * consumes var(--token-name), so redefining the token cascades the new * value into every page automatically — zero component CSS is forked. * `html.iag-preview-v4` (element+class, specificity 0-1-1) naturally * outranks the bare `:root` (pseudo-class, specificity 0-1-0) these tokens * are first defined on, so no !important is needed anywhere in this file. */ /* ══════════════════════════════════════════════════════════════ (A) Demo launcher / exit bar — UNSCOPED. These mount via JS only in the classic view (launcher, admin-only) or the preview view (exit bar); the CSS itself has no gate, matching how the widget script decides visibility. ══════════════════════════════════════════════════════════════ */ .iag-v4-demo-launcher { position: fixed; left: 16px; bottom: 16px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 9999px; background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); color: #ffffff; font-family: 'Cairo', system-ui, sans-serif; font-size: 13px; font-weight: 800; box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35); cursor: pointer; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1); } .iag-v4-demo-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 118, 110, 0.45); } .iag-v4-demo-launcher-dot { width: 8px; height: 8px; border-radius: 50%; background: #a7f3d0; box-shadow: 0 0 0 0 rgba(167, 243, 208, 0.7); animation: iagV4Pulse 1.8s infinite; } @keyframes iagV4Pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 243, 208, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(167, 243, 208, 0); } 100% { box-shadow: 0 0 0 0 rgba(167, 243, 208, 0); } } .iag-v4-exit-bar { position: fixed; left: 16px; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px; background: #0b192c; color: #ffffff; font-family: 'Cairo', system-ui, sans-serif; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); } .iag-v4-exit-bar-label strong { color: #5eead4; } .iag-v4-exit-bar-btn { border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #ffffff; font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; } .iag-v4-exit-bar-btn:hover { background: rgba(255, 255, 255, 0.18); } @media (max-width: 640px) { .iag-v4-demo-launcher { left: 8px; bottom: 8px; padding: 8px 12px; font-size: 12px; } .iag-v4-exit-bar { left: 8px; right: 8px; bottom: 8px; } } @media (prefers-reduced-motion: reduce) { .iag-v4-demo-launcher-dot { animation: none; } .iag-v4-demo-launcher { transition: none; } } /* ══════════════════════════════════════════════════════════════ (B) v4 Design Tokens — scoped under html.iag-preview-v4 Spec §3.1 / §3.2. Values are the spec's literal numbers even where they are very close to (or the same as) the v3 production tokens — this is a verbatim implementation, not a re-derivation. ══════════════════════════════════════════════════════════════ */ html.iag-preview-v4 { /* Surfaces */ --color-bg: #ffffff; --color-surface-2: #f8fafc; --color-surface-3: #f1f5f9; --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* Brand */ --brand-primary: #0b192c; /* v4 deep slate nav base (was v3 teal) */ --brand-primary-teal: #0f766e; --brand-primary-hover: #0d6b63; --brand-primary-light: #f0fdfa; --brand-accent: #0d9488; /* v4 "active clipping" accent */ --color-primary: var(--brand-primary-teal); --color-primary-hover: var(--brand-primary-hover); --color-primary-light: var(--brand-primary-light); /* Text */ --color-text-1: #0f172a; --color-text-4: #64748b; --color-text-light: #94a3b8; /* Semantic status */ --color-danger: #dc2626; --color-danger-light: #fef2f2; --color-warning: #d97706; --color-warning-light: #fffbe6; --color-success: #059669; --color-success-light: #ecfdf5; --color-info: #2563eb; --color-info-light: #eff6ff; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-brand: 0 4px 12px -2px rgba(15, 118, 110, 0.18); --shadow-brand-hover: 0 6px 18px -2px rgba(15, 118, 110, 0.28); /* Motion (spec §7) */ --transition-base: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { html.iag-preview-v4 { --transition-base: none; --transition-fast: none; --transition-normal: none; } } /* ══════════════════════════════════════════════════════════════ (C) Component tweaks not fully token-driven ══════════════════════════════════════════════════════════════ */ /* Sidebar — v4 deep-slate gradient (spec §4), Active Clipping preserved (same mechanism as v3, brain 09.2 — not re-implemented, just re-toned). */ html.iag-preview-v4 .iag-premium-sidebar { background: linear-gradient(180deg, #0b192c 0%, #073e3a 100%); box-shadow: -4px 0 32px rgba(0, 0, 0, 0.22); } html.iag-preview-v4 .iag-premium-sidebar .premium-profile-card { background: linear-gradient(145deg, #0b192c 0%, #0c4a40 100%); } html.iag-preview-v4 .iag-premium-sidebar .menu-item.active { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } /* Ghost Table — row hover + severity ribbon per spec §6.1 (values already match production 1:1; kept explicit here for the isolated theme to be self-describing per the spec, not just inheriting by coincidence). */ html.iag-preview-v4 .data-table tr:hover td { background: var(--brand-primary-light); } html.iag-preview-v4 .data-table th { background: var(--color-surface-3); font-size: 11px; letter-spacing: 0.05em; } html.iag-preview-v4 .table-container { box-shadow: none; } /* Buttons — 40px height, 8px radius, teal shadow (spec §6.1). */ html.iag-preview-v4 .btn { min-height: 40px; border-radius: var(--radius-sm); transition: var(--transition-fast); } html.iag-preview-v4 .btn:active { transform: scale(0.98); } html.iag-preview-v4 .btn-primary { background: var(--brand-primary-teal); box-shadow: var(--shadow-brand); } html.iag-preview-v4 .btn-primary:hover { box-shadow: var(--shadow-brand-hover); } html.iag-preview-v4 .btn-icon { min-width: 44px; min-height: 44px; } /* Drawer — right slide, light scrim (spec §6.3 / §7). */ html.iag-preview-v4 .iag-drawer-panel { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } html.iag-preview-v4 .iag-side-drawer { background: rgba(15, 23, 42, 0.25); } /* Filter dropdown panel — slide+fade per spec §7 motion table. */ html.iag-preview-v4 .filter-container, html.iag-preview-v4 .iag-fmenu { transition: var(--transition-fast); } /* Typography scale (spec §3.2). */ html.iag-preview-v4 h1, html.iag-preview-v4 .page-title { font-size: 24px; font-weight: 800; line-height: 1.25; } html.iag-preview-v4 h2, html.iag-preview-v4 .section-title { font-size: 18px; font-weight: 700; line-height: 1.3; } html.iag-preview-v4 h3 { font-size: 15px; font-weight: 600; line-height: 1.4; } html.iag-preview-v4 body { font-size: 14px; line-height: 1.5; } /* Numeric / tabular alignment for IDs, dates, counters (spec §3.2). */ html.iag-preview-v4 .data-table td, html.iag-preview-v4 .stat-card-big, html.iag-preview-v4 .stat-card-small { font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════ (D) Home Command Center — split workspace layout (spec §5.1) Desktop-only 68/32 split; the map stays SINGLE-COLUMN below the list on tablet/mobile — brain 08.17 point 9 explicitly rejected a two-column grid that squeezes the map into ~180px on narrow screens, and that ruling is respected here unchanged. The map itself (SVG paint, coverage-follows- PERIOD-not-filter) is untouched production code — brain 08.17 point 8 ("لم يُنقض قط") — this block only repositions the EXISTING map/peers DOM, it does not repaint or refilter it. ══════════════════════════════════════════════════════════════ */ /* Implementation note (documented conflict, per instruction §9/§15): the spec's right rail is "SVG map + peer gauge below it". In production the map is fused inside #hcc-workspace-host together with the search/filter controls and the district facility list — one component owned by home-workspace-map.js (brain 08.17), not separable without editing that module's render() internals, which this round does not touch. The closest presentation-only equivalent: the workspace block (search + filters + map + list, unmodified) takes the 68% column, and the peer performance strip (already its own sibling, .hcc-band-below) becomes the 32% sticky rail. Pure CSS grid-area placement — no DOM reparenting, no JS, nothing in home-workspace-map.js or home-command-center.js touched. */ @media (min-width: 1200px) { html.iag-preview-v4 #hcc-root { display: grid; grid-template-columns: 68% 32%; column-gap: 1rem; grid-template-areas: "status status" "workspace rail"; } html.iag-preview-v4 #hcc-root > .hcc-band-status { grid-area: status; } html.iag-preview-v4 #hcc-root > #hcc-workspace-host { grid-area: workspace; min-width: 0; } html.iag-preview-v4 #hcc-root > .hcc-band-below { grid-area: rail; align-self: start; position: sticky; top: 84px; } }