Spaces:
Paused
Paused
| /* ============================================================ | |
| Brain-5D Operator Experience — Improved & Refined | |
| ============================================================ | |
| Base design system with reduced specificity, | |
| better maintainability, and enhanced performance. | |
| ============================================================ */ | |
| /* ---------- 1. Design Tokens ---------- */ | |
| :root { | |
| /* Color System */ | |
| --exp-bg-0: #061017; | |
| --exp-bg-1: #0a1822; | |
| --exp-panel: rgba(9, 27, 38, 0.78); | |
| --exp-panel-strong: rgba(11, 31, 43, 0.97); | |
| --exp-line: rgba(89, 151, 172, 0.23); | |
| --exp-line-strong: rgba(64, 224, 208, 0.42); | |
| --exp-text: #eef8fb; | |
| --exp-muted: #8daebb; | |
| --exp-accent: #40e0d0; | |
| --exp-blue: #67b7ff; | |
| --exp-warm: #ffb45b; | |
| --exp-danger: #ff6c83; | |
| /* Borders & Radius */ | |
| --exp-radius: 14px; | |
| --exp-radius-sm: 9px; | |
| --exp-border: 1px solid var(--exp-line); | |
| --exp-border-strong: 1px solid var(--exp-line-strong); | |
| /* Shadows */ | |
| --exp-shadow-glow: 0 0 0 1px rgba(64, 224, 208, 0.05), | |
| 0 18px 55px rgba(0, 0, 0, 0.24); | |
| --exp-shadow-card: 0 12px 34px rgba(0, 0, 0, 0.12); | |
| --exp-shadow-card-hover: 0 15px 38px rgba(0, 0, 0, 0.15); | |
| --exp-shadow-dialog: 0 32px 100px rgba(0, 0, 0, 0.48); | |
| /* Typography */ | |
| --exp-font-base: clamp(0.78rem, 0.9vw, 0.92rem); | |
| --exp-font-small: 0.62rem; | |
| --exp-font-tiny: 0.56rem; | |
| /* Transitions */ | |
| --exp-transition: 0.25s cubic-bezier(0.2, 0, 0, 1); | |
| } | |
| /* Light Theme Overrides */ | |
| body[data-theme="light"] { | |
| --exp-bg-0: #eef5f7; | |
| --exp-bg-1: #f9fcfd; | |
| --exp-panel: rgba(255, 255, 255, 0.91); | |
| --exp-panel-strong: #ffffff; | |
| --exp-line: rgba(31, 78, 94, 0.16); | |
| --exp-line-strong: rgba(8, 127, 120, 0.35); | |
| --exp-text: #10242f; | |
| --exp-muted: #526d78; | |
| --exp-accent: #087f78; | |
| --exp-blue: #176ca8; | |
| --exp-warm: #a75b00; | |
| --exp-danger: #b4233a; | |
| --exp-shadow-glow: 0 0 0 1px rgba(8, 127, 120, 0.04), | |
| 0 16px 42px rgba(16, 36, 47, 0.09); | |
| } | |
| /* ---------- 2. Base & Reset ---------- */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| html { | |
| background: var(--exp-bg-0); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ---------- 3. Body & Layout Context ---------- */ | |
| .experience-ready { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| min-height: 0; | |
| overflow: hidden; | |
| color: var(--exp-text); | |
| background: | |
| radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--exp-accent) 9%, transparent), transparent 31rem), | |
| radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--exp-blue) 7%, transparent), transparent 34rem), | |
| linear-gradient(180deg, var(--exp-bg-1), var(--exp-bg-0) 30rem) fixed; | |
| } | |
| /* Subtle grid overlay */ | |
| .experience-ready::before { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| pointer-events: none; | |
| opacity: 0.17; | |
| background-image: | |
| linear-gradient(var(--exp-line) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--exp-line) 1px, transparent 1px); | |
| background-size: 42px 42px; | |
| mask-image: linear-gradient(to bottom, black, transparent 65%); | |
| } | |
| /* ---------- 4. Top Bar ---------- */ | |
| .experience-ready .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| display: grid; | |
| grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.2fr) auto; | |
| align-items: center; | |
| gap: 18px; | |
| min-height: 76px; | |
| padding: 12px clamp(14px, 2vw, 30px); | |
| border-bottom: var(--exp-border); | |
| background: color-mix(in srgb, var(--exp-panel-strong) 90%, transparent); | |
| backdrop-filter: blur(24px) saturate(130%); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.13); | |
| } | |
| .experience-ready .topbar-brand { | |
| min-width: 0; | |
| } | |
| .experience-ready .topbar-brand h1 { | |
| margin: 1px 0 0; | |
| font-size: clamp(1rem, 1.35vw, 1.35rem); | |
| letter-spacing: -0.02em; | |
| } | |
| .experience-ready .topbar-brand .eyebrow { | |
| color: var(--exp-accent); | |
| font-size: 0.67rem; | |
| font-weight: 800; | |
| letter-spacing: 0.16em; | |
| } | |
| /* Status Cluster */ | |
| .experience-status-cluster { | |
| display: grid; | |
| grid-template-columns: auto repeat(3, minmax(86px, 1fr)); | |
| align-items: center; | |
| overflow: hidden; | |
| border: var(--exp-border); | |
| border-radius: var(--exp-radius-sm); | |
| background: color-mix(in srgb, var(--exp-panel) 84%, transparent); | |
| } | |
| .experience-live-dot { | |
| width: 8px; | |
| height: 8px; | |
| margin: 0 13px; | |
| border-radius: 50%; | |
| background: var(--exp-accent); | |
| box-shadow: 0 0 14px color-mix(in srgb, var(--exp-accent) 68%, transparent); | |
| } | |
| .experience-status-copy { | |
| min-width: 0; | |
| padding: 7px 11px; | |
| border-left: var(--exp-border); | |
| } | |
| .experience-status-copy small, | |
| .experience-status-copy strong { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .experience-status-copy small { | |
| margin-bottom: 2px; | |
| color: var(--exp-muted); | |
| font-size: 0.57rem; | |
| font-weight: 800; | |
| letter-spacing: 0.12em; | |
| } | |
| .experience-status-copy strong { | |
| color: var(--exp-text); | |
| font-size: 0.76rem; | |
| } | |
| /* Topbar Right Actions */ | |
| .experience-ready .topbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| justify-content: flex-end; | |
| flex-wrap: wrap; | |
| } | |
| /* ---------- 5. Buttons & Controls ---------- */ | |
| .experience-icon-button, | |
| .experience-ready .icon-btn, | |
| .experience-ready .multifunction-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 38px; | |
| padding: 7px 10px; | |
| border: var(--exp-border); | |
| border-radius: 8px; | |
| background: color-mix(in srgb, var(--exp-panel) 86%, transparent); | |
| color: var(--exp-text); | |
| font: inherit; | |
| font-size: 0.72rem; | |
| font-weight: 750; | |
| cursor: pointer; | |
| transition: border-color var(--exp-transition), background var(--exp-transition); | |
| } | |
| .experience-icon-button:hover, | |
| .experience-icon-button.active, | |
| .experience-ready .icon-btn:hover, | |
| .experience-ready .multifunction-btn:hover { | |
| border-color: var(--exp-line-strong); | |
| background: color-mix(in srgb, var(--exp-accent) 10%, var(--exp-panel-strong)); | |
| } | |
| /* ---------- 6. Navigation (Tab Nav) ---------- */ | |
| .experience-ready .tab-nav { | |
| position: sticky; | |
| top: 76px; | |
| z-index: 18; | |
| width: calc(100% - clamp(24px, 3vw, 56px)); | |
| margin: 12px auto 16px; | |
| padding: 5px; | |
| border: var(--exp-border); | |
| border-radius: var(--exp-radius); | |
| background: color-mix(in srgb, var(--exp-panel-strong) 88%, transparent); | |
| box-shadow: var(--exp-shadow-glow); | |
| backdrop-filter: blur(22px); | |
| } | |
| .experience-ready .tab-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 9px; | |
| min-height: 50px; | |
| border-radius: 10px; | |
| transition: background var(--exp-transition), border-color var(--exp-transition); | |
| } | |
| .experience-tab-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 24px; | |
| height: 24px; | |
| flex: 0 0 auto; | |
| border: var(--exp-border); | |
| border-radius: 7px; | |
| color: var(--exp-accent); | |
| font-size: 0.85rem; | |
| } | |
| .experience-tab-copy { | |
| display: flex; | |
| min-width: 0; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1px; | |
| } | |
| .experience-tab-copy strong { | |
| color: inherit; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.02em; | |
| } | |
| .experience-tab-copy small { | |
| color: var(--exp-muted); | |
| font-size: 0.56rem; | |
| font-weight: 750; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| } | |
| .experience-ready .tab-btn.active .experience-tab-icon { | |
| border-color: var(--exp-line-strong); | |
| background: color-mix(in srgb, var(--exp-accent) 12%, transparent); | |
| box-shadow: 0 0 22px color-mix(in srgb, var(--exp-accent) 10%, transparent); | |
| } | |
| /* ---------- 7. Main Workspace ---------- */ | |
| .experience-ready main { | |
| flex: 1 1 auto; | |
| padding-top: 0; | |
| min-height: 0; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| } | |
| .experience-ready .brain5d-primary-nav { | |
| flex: 0 0 auto; | |
| position: static; | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| /* ---------- 8. Workspace Headers ---------- */ | |
| .experience-ready .workspace-header, | |
| .experience-ready .overview-command-bar, | |
| .experience-ready .dashboard-generated-header { | |
| position: relative; | |
| overflow: hidden; | |
| border: var(--exp-border); | |
| border-radius: var(--exp-radius); | |
| background: | |
| linear-gradient(112deg, color-mix(in srgb, var(--exp-accent) 9%, transparent), transparent 34%), | |
| linear-gradient(180deg, color-mix(in srgb, var(--exp-panel-strong) 92%, transparent), var(--exp-panel)); | |
| box-shadow: var(--exp-shadow-glow); | |
| } | |
| /* Decorative circle */ | |
| .experience-ready .workspace-header::after, | |
| .experience-ready .overview-command-bar::after, | |
| .experience-ready .dashboard-generated-header::after { | |
| content: ""; | |
| position: absolute; | |
| right: -50px; | |
| bottom: -100px; | |
| width: 230px; | |
| height: 230px; | |
| border: 1px solid color-mix(in srgb, var(--exp-accent) 17%, transparent); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .experience-ready .workspace-header h2, | |
| .experience-ready .overview-command-bar h2, | |
| .experience-ready .dashboard-generated-header h2 { | |
| font-size: clamp(1.45rem, 2.2vw, 2.35rem); | |
| letter-spacing: -0.035em; | |
| } | |
| .experience-ready .workspace-header p, | |
| .experience-ready .overview-command-bar p, | |
| .experience-ready .dashboard-generated-header p { | |
| font-size: var(--exp-font-base); | |
| line-height: 1.55; | |
| } | |
| /* ---------- 9. Context Ribbon ---------- */ | |
| .experience-ribbon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 14px; | |
| width: 100%; | |
| margin: -2px 0 14px; | |
| padding: 9px 11px 9px 14px; | |
| border: var(--exp-border); | |
| border-left: 3px solid var(--exp-accent); | |
| border-radius: var(--exp-radius-sm); | |
| background: color-mix(in srgb, var(--exp-panel) 84%, transparent); | |
| } | |
| .experience-ribbon-copy { | |
| min-width: 0; | |
| } | |
| .experience-ribbon-copy span, | |
| .experience-ribbon-copy strong { | |
| display: block; | |
| } | |
| .experience-ribbon-copy span { | |
| margin-bottom: 2px; | |
| color: var(--exp-accent); | |
| font-size: 0.58rem; | |
| font-weight: 850; | |
| letter-spacing: 0.14em; | |
| } | |
| .experience-ribbon-copy strong { | |
| overflow: hidden; | |
| color: var(--exp-muted); | |
| font-size: 0.74rem; | |
| font-weight: 650; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .experience-ribbon-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .experience-ribbon-actions button { | |
| min-height: 32px; | |
| padding: 5px 9px; | |
| border: var(--exp-border); | |
| border-radius: 7px; | |
| background: var(--exp-panel-strong); | |
| color: var(--exp-muted); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 0.68rem; | |
| transition: border-color var(--exp-transition), color var(--exp-transition); | |
| } | |
| .experience-ribbon-actions button:hover, | |
| .experience-ribbon-actions button.active { | |
| border-color: var(--exp-line-strong); | |
| color: var(--exp-text); | |
| } | |
| /* ---------- 10. Guided Welcome Panel ---------- */ | |
| .experience-welcome { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: minmax(260px, 0.82fr) minmax(480px, 1.5fr); | |
| gap: clamp(18px, 2.2vw, 34px); | |
| margin: 0 0 16px; | |
| padding: clamp(18px, 2vw, 30px); | |
| overflow: hidden; | |
| border: var(--exp-border-strong); | |
| border-radius: var(--exp-radius); | |
| background: | |
| radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--exp-accent) 14%, transparent), transparent 40%), | |
| var(--exp-panel-strong); | |
| box-shadow: var(--exp-shadow-glow); | |
| } | |
| .experience-welcome-copy h2 { | |
| max-width: 15ch; | |
| margin: 5px 0 10px; | |
| color: var(--exp-text); | |
| font-size: clamp(1.35rem, 2vw, 2rem); | |
| line-height: 1.05; | |
| letter-spacing: -0.04em; | |
| } | |
| .experience-welcome-copy p { | |
| max-width: 62ch; | |
| margin: 0; | |
| color: var(--exp-muted); | |
| font-size: 0.8rem; | |
| line-height: 1.6; | |
| } | |
| .experience-eyebrow { | |
| color: var(--exp-accent); | |
| font-size: 0.59rem; | |
| font-weight: 850; | |
| letter-spacing: 0.16em; | |
| } | |
| .experience-welcome-steps { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 7px; | |
| } | |
| .experience-welcome-steps button { | |
| display: flex; | |
| min-width: 0; | |
| min-height: 112px; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| padding: 12px; | |
| border: var(--exp-border); | |
| border-radius: 10px; | |
| background: color-mix(in srgb, var(--exp-panel) 88%, transparent); | |
| color: var(--exp-text); | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color var(--exp-transition), transform var(--exp-transition); | |
| } | |
| .experience-welcome-steps button:hover { | |
| border-color: var(--exp-line-strong); | |
| transform: translateY(-1px); | |
| } | |
| .experience-welcome-steps b { | |
| color: var(--exp-accent); | |
| font-size: 0.63rem; | |
| letter-spacing: 0.09em; | |
| } | |
| .experience-welcome-steps span, | |
| .experience-welcome-steps strong, | |
| .experience-welcome-steps small { | |
| display: block; | |
| } | |
| .experience-welcome-steps strong { | |
| margin-bottom: 4px; | |
| font-size: 0.73rem; | |
| } | |
| .experience-welcome-steps small { | |
| color: var(--exp-muted); | |
| font-size: 0.62rem; | |
| line-height: 1.35; | |
| } | |
| .experience-dismiss { | |
| position: absolute; | |
| top: 9px; | |
| right: 9px; | |
| width: 30px; | |
| height: 30px; | |
| border: var(--exp-border); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--exp-muted); | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: border-color var(--exp-transition), color var(--exp-transition); | |
| } | |
| .experience-dismiss:hover { | |
| border-color: var(--exp-line-strong); | |
| color: var(--exp-text); | |
| } | |
| /* ---------- 11. Cards & Panels ---------- */ | |
| .experience-ready .card, | |
| .experience-ready .panel, | |
| .experience-ready .control-card, | |
| .experience-ready .overview-surface, | |
| .experience-ready .snapshot-info-card, | |
| .experience-ready .settings-section, | |
| .experience-ready .research-section, | |
| .experience-ready .gate-panel, | |
| .experience-ready .embodiment-card { | |
| border: var(--exp-border); | |
| border-radius: var(--exp-radius); | |
| background: linear-gradient(180deg, color-mix(in srgb, var(--exp-panel-strong) 58%, transparent), var(--exp-panel)); | |
| box-shadow: var(--exp-shadow-card); | |
| transition: border-color var(--exp-transition), box-shadow var(--exp-transition); | |
| } | |
| .experience-ready .card:hover, | |
| .experience-ready .control-card:hover, | |
| .experience-ready .overview-surface:hover { | |
| border-color: color-mix(in srgb, var(--exp-accent) 35%, var(--exp-line)); | |
| box-shadow: var(--exp-shadow-card-hover); | |
| } | |
| .experience-ready .panel-title, | |
| .experience-ready .overview-surface-title { | |
| padding-bottom: 9px; | |
| border-bottom: var(--exp-border); | |
| } | |
| .experience-ready .panel-title h2, | |
| .experience-ready .panel-title h3, | |
| .experience-ready .overview-surface-title h3 { | |
| letter-spacing: -0.025em; | |
| } | |
| /* ---------- 12. Overview Status Rail ---------- */ | |
| .experience-ready .overview-status-rail { | |
| display: flex; | |
| gap: 7px; | |
| margin-bottom: 14px; | |
| } | |
| .experience-ready .overview-status-item { | |
| flex: 1; | |
| min-height: 68px; | |
| padding: 10px 12px; | |
| border: var(--exp-border); | |
| border-radius: 10px; | |
| background: var(--exp-panel); | |
| } | |
| .experience-ready .overview-status-item span { | |
| color: var(--exp-muted); | |
| font-size: 0.62rem; | |
| font-weight: 750; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .experience-ready .overview-status-item strong { | |
| display: block; | |
| margin-top: 6px; | |
| font-size: 0.88rem; | |
| } | |
| /* ---------- 13. Utility Bars ---------- */ | |
| .experience-ready .workspace-view-tabs, | |
| .experience-ready .workspace-jumps, | |
| .experience-ready .dashboard-utility-bar { | |
| border: var(--exp-border); | |
| background: color-mix(in srgb, var(--exp-panel) 86%, transparent); | |
| box-shadow: none; | |
| } | |
| /* ---------- 14. Unknown State ---------- */ | |
| .experience-unknown-state { | |
| color: var(--exp-muted); | |
| text-decoration: underline dotted color-mix(in srgb, var(--exp-muted) 45%, transparent); | |
| text-underline-offset: 3px; | |
| } | |
| /* ---------- 15. Dialogs / Command Center ---------- */ | |
| .experience-dialog { | |
| width: min(760px, calc(100vw - 28px)); | |
| max-height: min(78vh, 760px); | |
| padding: 0; | |
| overflow: hidden; | |
| border: var(--exp-border-strong); | |
| border-radius: 16px; | |
| background: var(--exp-panel-strong); | |
| color: var(--exp-text); | |
| box-shadow: var(--exp-shadow-dialog); | |
| } | |
| .experience-dialog::backdrop { | |
| background: rgba(1, 8, 13, 0.7); | |
| backdrop-filter: blur(8px); | |
| } | |
| .experience-dialog-frame { | |
| display: flex; | |
| max-height: inherit; | |
| flex-direction: column; | |
| } | |
| .experience-dialog header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 18px 20px 14px; | |
| border-bottom: var(--exp-border); | |
| } | |
| .experience-dialog header h2 { | |
| margin: 3px 0 0; | |
| font-size: 1.15rem; | |
| } | |
| .experience-dialog header > button { | |
| width: 32px; | |
| height: 32px; | |
| border: var(--exp-border); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--exp-muted); | |
| cursor: pointer; | |
| transition: border-color var(--exp-transition), color var(--exp-transition); | |
| } | |
| .experience-dialog header > button:hover { | |
| border-color: var(--exp-line-strong); | |
| color: var(--exp-text); | |
| } | |
| .experience-command-search { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 14px; | |
| padding: 0 14px; | |
| border: var(--exp-border-strong); | |
| border-radius: 10px; | |
| background: color-mix(in srgb, var(--exp-panel) 88%, transparent); | |
| color: var(--exp-accent); | |
| } | |
| .experience-command-search input { | |
| width: 100%; | |
| min-height: 48px; | |
| border: 0; | |
| outline: none; | |
| background: transparent; | |
| color: var(--exp-text); | |
| font: inherit; | |
| } | |
| .experience-command-results { | |
| min-height: 220px; | |
| padding: 0 14px 14px; | |
| overflow: auto; | |
| } | |
| .experience-command-item { | |
| display: grid; | |
| grid-template-columns: 36px 1fr auto; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| margin-bottom: 4px; | |
| padding: 10px; | |
| border: 1px solid transparent; | |
| border-radius: 9px; | |
| background: transparent; | |
| color: var(--exp-text); | |
| cursor: pointer; | |
| text-align: left; | |
| transition: border-color var(--exp-transition), background var(--exp-transition); | |
| } | |
| .experience-command-item:hover, | |
| .experience-command-item.selected { | |
| border-color: var(--exp-line); | |
| background: color-mix(in srgb, var(--exp-accent) 8%, var(--exp-panel)); | |
| } | |
| .experience-command-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| border: var(--exp-border); | |
| border-radius: 8px; | |
| color: var(--exp-accent); | |
| } | |
| .experience-command-item strong, | |
| .experience-command-item small { | |
| display: block; | |
| } | |
| .experience-command-item strong { | |
| margin-bottom: 3px; | |
| font-size: 0.8rem; | |
| } | |
| .experience-command-item small { | |
| color: var(--exp-muted); | |
| font-size: 0.67rem; | |
| } | |
| .experience-dialog footer { | |
| display: flex; | |
| gap: 16px; | |
| padding: 10px 14px; | |
| border-top: var(--exp-border); | |
| color: var(--exp-muted); | |
| font-size: 0.63rem; | |
| } | |
| kbd { | |
| display: inline-grid; | |
| min-width: 22px; | |
| min-height: 21px; | |
| place-items: center; | |
| padding: 2px 5px; | |
| border: var(--exp-border); | |
| border-bottom-color: var(--exp-line-strong); | |
| border-radius: 5px; | |
| background: var(--exp-panel); | |
| color: var(--exp-text); | |
| font: inherit; | |
| font-size: 0.61rem; | |
| box-shadow: inset 0 -1px 0 var(--exp-line); | |
| } | |
| .experience-shortcut-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 8px; | |
| padding: 16px 20px; | |
| } | |
| .experience-shortcut-grid > div { | |
| display: flex; | |
| min-height: 54px; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 10px 12px; | |
| border: var(--exp-border); | |
| border-radius: 9px; | |
| background: var(--exp-panel); | |
| } | |
| .experience-shortcut-grid strong { | |
| margin-left: auto; | |
| color: var(--exp-muted); | |
| font-size: 0.7rem; | |
| font-weight: 650; | |
| } | |
| .experience-integrity-note { | |
| margin: 0; | |
| padding: 13px 20px 17px; | |
| border-top: var(--exp-border); | |
| color: var(--exp-muted); | |
| font-size: 0.7rem; | |
| line-height: 1.5; | |
| } | |
| /* ---------- 16. Focus Mode ---------- */ | |
| [data-experience-focus="true"] .topbar-brand .icon-btn, | |
| [data-experience-focus="true"] .topbar-brand .eyebrow, | |
| [data-experience-focus="true"] .header-context, | |
| [data-experience-focus="true"] .dashboard-utility-bar, | |
| [data-experience-focus="true"] .experience-welcome { | |
| display: none ; | |
| } | |
| [data-experience-focus="true"] .topbar { | |
| grid-template-columns: minmax(180px, 0.5fr) minmax(320px, 1fr) auto; | |
| } | |
| [data-experience-focus="true"] .tab-nav { | |
| opacity: 0.72; | |
| transition: opacity var(--exp-transition); | |
| } | |
| [data-experience-focus="true"] .tab-nav:hover, | |
| [data-experience-focus="true"] .tab-nav:focus-within { | |
| opacity: 1; | |
| } | |
| /* ---------- 17. Footer ---------- */ | |
| .experience-ready .site-footer { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| grid-template-rows: auto auto; | |
| width: 100%; | |
| margin-top: 18px; | |
| padding: 0; | |
| gap: 1px; | |
| background: var(--exp-line); | |
| } | |
| .experience-ready .site-footer .footer-segment, | |
| .experience-ready .site-footer .footer-vitals, | |
| .experience-ready .site-footer .footer-io { | |
| min-width: 0; | |
| min-height: 34px; | |
| padding: 4px 8px; | |
| overflow: hidden; | |
| background: color-mix(in srgb, var(--exp-panel-strong) 94%, transparent); | |
| font-size: 0.65rem; | |
| } | |
| /* Grid placement */ | |
| .experience-ready .site-footer > .footer-product { grid-column: 1; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-runtime { grid-column: 2; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-io { grid-column: 3; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-experiment { grid-column: 4; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-mode { grid-column: 5; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-health { grid-column: 6; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-vitals { grid-column: 1 / 7; grid-row: 2; } | |
| /* Vitals grid */ | |
| .experience-ready .site-footer .footer-vitals { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .experience-ready .site-footer .footer-vital { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 2px 6px; | |
| min-width: 0; | |
| color: var(--exp-muted); | |
| font-size: 7px; | |
| text-transform: uppercase; | |
| } | |
| .experience-ready .site-footer .footer-vital strong { | |
| color: var(--exp-text); | |
| font-size: 8px; | |
| font-weight: 700; | |
| } | |
| .experience-ready .site-footer .footer-vital i { | |
| grid-column: 1 / -1; | |
| display: block; | |
| height: 3px; | |
| overflow: hidden; | |
| border-radius: 2px; | |
| background: color-mix(in srgb, var(--exp-line) 55%, transparent); | |
| } | |
| .experience-ready .site-footer .footer-vital b { | |
| display: block; | |
| width: 0; | |
| height: 100%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, var(--exp-accent), var(--exp-warm)); | |
| transition: width 0.35s ease; | |
| } | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(1) strong, | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(2) strong { | |
| color: var(--exp-accent); | |
| } | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(1) b, | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(2) b { | |
| animation: footer-test-activity 1.1s ease-in-out infinite alternate; | |
| } | |
| @keyframes footer-test-activity { | |
| from { opacity: 0.45; transform: scaleX(0.72); transform-origin: left; } | |
| to { opacity: 1; transform: scaleX(1); transform-origin: left; } | |
| } | |
| .experience-ready .site-footer .footer-io { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| justify-content: space-between; | |
| } | |
| .experience-ready .site-footer .footer-io em, | |
| .experience-ready .site-footer .footer-io strong, | |
| .experience-ready .site-footer .footer-experiment-id { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Footer runtime actions */ | |
| .experience-ready .footer-runtime { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| } | |
| .experience-ready .footer-runtime-actions { | |
| display: inline-flex; | |
| gap: 2px; | |
| margin-left: auto; | |
| } | |
| .experience-ready .footer-runtime-actions button { | |
| display: grid; | |
| place-items: center; | |
| width: 20px; | |
| height: 20px; | |
| min-width: 20px; | |
| min-height: 20px; | |
| padding: 0; | |
| border: var(--exp-border); | |
| border-radius: 5px; | |
| background: color-mix(in srgb, var(--exp-panel) 86%, transparent); | |
| color: var(--exp-text); | |
| cursor: pointer; | |
| font: 700 0.62rem/1 var(--font-mono, monospace); | |
| transition: border-color var(--exp-transition), color var(--exp-transition); | |
| } | |
| .experience-ready .footer-runtime-actions button:hover, | |
| .experience-ready .footer-runtime-actions button:focus-visible { | |
| border-color: var(--exp-line-strong); | |
| color: var(--exp-accent); | |
| outline: none; | |
| } | |
| .experience-ready .footer-runtime-actions button:disabled { | |
| cursor: wait; | |
| opacity: 0.45; | |
| } | |
| .experience-ready .footer-mode .mode-btn { | |
| display: grid; | |
| place-items: center; | |
| width: 20px; | |
| height: 20px; | |
| min-width: 20px; | |
| min-height: 20px; | |
| padding: 2px 5px; | |
| border: var(--exp-border); | |
| border-radius: 5px; | |
| background: color-mix(in srgb, var(--exp-panel) 86%, transparent); | |
| color: var(--exp-text); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 0.68rem; | |
| line-height: 1; | |
| transition: border-color var(--exp-transition), background var(--exp-transition); | |
| } | |
| .experience-ready .footer-mode .mode-btn:hover { | |
| border-color: var(--exp-line-strong); | |
| background: color-mix(in srgb, var(--exp-accent) 10%, var(--exp-panel-strong)); | |
| } | |
| /* ---------- 18. Responsive ---------- */ | |
| /* Large screens */ | |
| @media (min-width: 1600px) { | |
| .experience-ready main { | |
| padding-inline: clamp(24px, 2.2vw, 44px); | |
| } | |
| .experience-ready .overview-operations-grid { | |
| gap: 16px; | |
| } | |
| } | |
| /* 1180px */ | |
| @media (max-width: 1180px) { | |
| .experience-ready .topbar { | |
| grid-template-columns: minmax(210px, 1fr) auto; | |
| } | |
| .experience-status-cluster { | |
| grid-column: 1 / -1; | |
| grid-row: 2; | |
| } | |
| .experience-ready .tab-nav { | |
| top: 120px; | |
| } | |
| .experience-welcome { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* 820px */ | |
| @media (max-width: 820px) { | |
| .experience-ready .topbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| min-height: auto; | |
| } | |
| .experience-ready .topbar-brand, | |
| .experience-ready .topbar-right, | |
| .experience-ready .experience-status-cluster { | |
| width: 100%; | |
| } | |
| .experience-ready .experience-status-cluster { | |
| order: 3; | |
| } | |
| .experience-ready .topbar-right { | |
| justify-content: flex-start; | |
| } | |
| .experience-ready .tab-nav { | |
| position: sticky; | |
| top: 0; | |
| } | |
| .experience-welcome-steps { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .experience-welcome-steps button:last-child { | |
| grid-column: 1 / -1; | |
| min-height: 82px; | |
| } | |
| .experience-ribbon { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .experience-ribbon-actions > button { | |
| flex: 1 1 auto; | |
| } | |
| .experience-shortcut-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| /* Footer responsive */ | |
| .experience-ready .site-footer { | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| } | |
| .experience-ready .site-footer > .footer-product { grid-column: 1; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-mode { grid-column: 2; grid-row: 1; } | |
| .experience-ready .site-footer > .footer-runtime { grid-column: 1 / 3; grid-row: 2; } | |
| .experience-ready .site-footer > .footer-experiment { grid-column: 1 / 3; grid-row: 3; } | |
| .experience-ready .site-footer > .footer-vitals { grid-column: 1 / 3; grid-row: 4; } | |
| .experience-ready .site-footer > .footer-io { grid-column: 1 / 3; grid-row: 5; } | |
| } | |
| /* 520px */ | |
| @media (max-width: 520px) { | |
| .experience-status-cluster { | |
| grid-template-columns: auto repeat(2, 1fr); | |
| } | |
| .experience-status-copy:nth-of-type(4) { | |
| display: none; | |
| } | |
| .experience-tab-copy small { | |
| display: none; | |
| } | |
| .experience-ready .tab-btn { | |
| min-width: 112px; | |
| } | |
| .experience-welcome-steps { | |
| grid-template-columns: 1fr; | |
| } | |
| .experience-welcome-steps button, | |
| .experience-welcome-steps button:last-child { | |
| grid-column: auto; | |
| min-height: 76px; | |
| } | |
| .experience-dialog footer { | |
| flex-wrap: wrap; | |
| } | |
| .experience-ready .site-footer .footer-vitals { | |
| grid-template-columns: 1fr; | |
| gap: 6px; | |
| } | |
| .experience-ready .site-footer .footer-io { | |
| flex-wrap: wrap; | |
| } | |
| } | |
| /* ---------- 19. Reduced Motion ---------- */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .experience-welcome-steps button, | |
| .experience-ready .tab-nav, | |
| .experience-ready .card, | |
| .experience-ready .overview-surface { | |
| transition: none ; | |
| } | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(1) b, | |
| .experience-ready .site-footer .footer-vitals.is-test-running .footer-vital:nth-child(2) b { | |
| animation: none; | |
| } | |
| } |