/* engineering-premium.css ─ premium UI chrome * Loaded after tokens.css + engineering-personas.css. Self-contained primitives * for: skeleton loaders, toast notifications, cmd+k palette, ? shortcuts modal, * glossary modal, welcome banner, recipe picker, persona greeting strip, * empty/error/stale states, plain-english tier toggle, theme toggle, page * transitions, micro-interactions. Mobile responsive. */ /* ── Tier-aware label visibility ──────────────────────────────────────── */ [data-tier="operator"] .tier-engineer { display: none !important; } [data-tier="engineer"] .tier-operator { display: none !important; } /* Plain-English layer + technical layer can co-exist. Default = engineer (the * existing technical labels). Toggling sets data-tier on . */ /* ── Premium header bar (added by JS into every dashboard) ───────────── */ .eng-premium-bar { position: fixed; top: 0; right: 16px; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(20,24,34,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border:1px solid var(--border); border-radius: 0 0 12px 12px; border-top: 0; font-size: 11px; color:var(--text); } .eng-premium-bar button { background:var(--bg-card); border:1px solid var(--border); color: inherit; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 11px; letter-spacing: .3px; transition: background .18s, border-color .18s, transform .12s; } .eng-premium-bar button:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } .eng-premium-bar button:active { transform: scale(.96); } .eng-premium-bar .premium-sep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 4px; } /* ── Skeleton loader (replaces "loading…" text everywhere) ────────────── */ .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%); background-size: 200% 100%; border-radius: 6px; animation: skel-shimmer 1.4s ease-in-out infinite; } .skeleton.line { height: 12px; margin: 6px 0; } .skeleton.line-sm { height: 10px; width: 60%; } .skeleton.line-lg { height: 16px; } .skeleton.block { height: 80px; } .skeleton.card { height: 140px; border-radius: 12px; } .skeleton.avatar { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; } @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Empty / error / stale states (composable) ───────────────────────── */ .state-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; text-align: center; border-radius: 12px; background:var(--bg-card); border: 1px dashed rgba(255,255,255,.12); } .state-card.error { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.05); } .state-card.stale { border-color: rgba(245,182,91,.35); background: rgba(245,182,91,.04); } .state-card .state-emoji { font-size: 28px; line-height: 1; } .state-card .state-msg { font-size: 13px; color:var(--text); } .state-card .state-hint { font-size: 11px; color:var(--muted); } .state-card button { background: var(--persona-glow-cool, #3a8ee6); color:var(--text); border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; transition: filter .18s, transform .12s; } .state-card button:hover { filter: brightness(1.15); } .state-card button:active { transform: scale(.96); } .state-card.error button { background: rgba(239,68,68,.85); } .state-card.stale button { background: rgba(245,182,91,.85); color: #1a1a1a; } /* ── Toast notification system ────────────────────────────────────────── */ .toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 380px; } .toast { pointer-events: auto; background: rgba(20,24,34,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid var(--border); border-left: 3px solid var(--persona-glow-cool, #3a8ee6); border-radius: 10px; padding: 10px 14px; color:var(--text); font-size: 12.5px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: toast-in .26s cubic-bezier(.2,.8,.2,1) both; min-width: 240px; display: flex; align-items: flex-start; gap: 10px; } .toast.success { border-left-color: #4ade80; } .toast.error { border-left-color: #ef4444; } .toast.warn { border-left-color: #f5b65b; } .toast.info { border-left-color: #3a8ee6; } .toast .toast-emoji { font-size: 18px; flex-shrink: 0; line-height: 1.2; } .toast .toast-body { flex: 1; } .toast .toast-title { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; } .toast .toast-msg { color:var(--text); font-size: 11.5px; } .toast.exit { animation: toast-out .22s cubic-bezier(.2,.8,.2,1) both; } @keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } } /* ── cmd+k palette + ? shortcuts modal + glossary modal ──────────────── */ .eng-modal-host { position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: modal-bg-in .18s ease both; } .eng-modal-host.exit { animation: modal-bg-out .15s ease both; } .eng-modal { background: rgba(20,24,34,.94); border:1px solid var(--border); border-radius: 14px; width: min(640px, 92vw); max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,.6); animation: modal-in .22s cubic-bezier(.2,.8,.2,1) both; } .eng-modal.exit { animation: modal-out .18s ease both; } .eng-modal .modal-head { padding: 12px 16px; border-bottom:1px solid var(--border); display: flex; align-items: center; gap: 10px; font-family: Orbitron, monospace; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color:var(--text); } .eng-modal .modal-close { margin-left: auto; background:var(--bg-card); border:1px solid var(--border); color:var(--text); cursor: pointer; border-radius: 8px; padding: 3px 8px; font-size: 11px; } .eng-modal .modal-body { padding: 12px 16px; overflow-y: auto; flex: 1; } .eng-modal .modal-search { width: 100%; background:var(--bg-card); border:1px solid var(--border); color:var(--text); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 10px; } .eng-modal .palette-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background .12s; } .eng-modal .palette-row:hover, .eng-modal .palette-row.active { background: rgba(58,142,230,.18); color:var(--text); } .eng-modal .palette-row .icon { font-size: 18px; } .eng-modal .palette-row .desc { font-size: 11px; color:var(--muted); margin-top: 2px; } .eng-modal .palette-row .kbd { font-size: 10px; color:var(--muted); font-family: monospace; } .eng-modal .glossary-row { padding: 10px 12px; border-radius: 8px; margin: 4px 0; background:var(--bg-card); border:1px solid var(--border); } .eng-modal .glossary-row .term { font-weight: 700; color: var(--persona-glow-cool, #3a8ee6); font-size: 13px; } .eng-modal .glossary-row .defn { font-size: 12px; color:var(--text); margin-top: 4px; line-height: 1.45; } .eng-modal .glossary-row .also { font-size: 10px; color:var(--muted); margin-top: 4px; } .eng-modal .shortcut-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 10px; border-bottom:1px solid var(--border); font-size: 12.5px; } .eng-modal .shortcut-row .kbd { font-family: monospace; background:var(--bg-card); padding: 2px 6px; border-radius: 4px; font-size: 11px; color:var(--text); } @keyframes modal-bg-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-bg-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-in { from { transform: translateY(-10px); opacity: .4; } to { transform: translateY(0); opacity: 1; } } @keyframes modal-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-10px); opacity: 0; } } /* ── Welcome banner (first-run, dismissible) ─────────────────────────── */ .welcome-banner { margin: 0 0 14px; padding: 16px 20px 14px; background: linear-gradient(135deg, rgba(176,141,87,.10), rgba(58,142,230,.08)); border: 1px solid rgba(176,141,87,.4); border-radius: 14px; position: relative; overflow: hidden; } .welcome-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 200px at 30% 0%, rgba(245,182,91,.15), transparent 60%); pointer-events: none; } .welcome-banner h2 { margin: 0 0 6px; font-family: Orbitron, monospace; font-size: 16px; letter-spacing: 1px; color: #f5b65b; } .welcome-banner p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color:var(--text); } .welcome-banner .welcome-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .welcome-banner .welcome-step { font-size: 11.5px; padding: 6px 11px; background:var(--bg-card); border:1px solid var(--border); border-radius: 999px; color:var(--text); } .welcome-banner .welcome-step strong { color: #f5b65b; } .welcome-banner .welcome-dismiss { position: absolute; top: 10px; right: 10px; background:var(--bg-card); border:1px solid var(--border); color:var(--text); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 11px; } .welcome-banner .welcome-dismiss:hover { background: rgba(255,255,255,.1); } /* ── Recipe picker (Quick Dispatch upgrade) ──────────────────────────── */ .recipe-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; } .recipe-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background .18s, border-color .18s, transform .12s; font-size: 12.5px; color: rgba(255,255,255,.9); } .recipe-card:hover { background: rgba(58,142,230,.10); border-color: var(--persona-glow-cool, #3a8ee6); transform: translateY(-1px); } .recipe-card:active { transform: scale(.97); } .recipe-card .recipe-icon { font-size: 22px; flex-shrink: 0; } .recipe-card .recipe-body { flex: 1; } .recipe-card .recipe-title { font-weight: 600; font-size: 12.5px; } .recipe-card .recipe-sub { font-size: 10.5px; color:var(--muted); } /* ── Persona greeting strip ──────────────────────────────────────────── */ .persona-greeting { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(90deg, rgba(176,141,87,.1), rgba(255,255,255,.02)); border: 1px solid rgba(176,141,87,.25); border-radius: 12px; margin-bottom: 12px; } .persona-greeting .pg-avatar { width: 36px; height: 36px; border-radius: 10px; background: rgba(245,182,91,.18); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; box-shadow: 0 0 18px -4px #f5b65b; } .persona-greeting .pg-msg { font-size: 12.5px; color:var(--text); } .persona-greeting .pg-msg b { color: #f5b65b; } /* ── Persona role bubble (added under codename) ──────────────────────── */ .eng-persona-card .persona-role-bubble { font-size: 11px; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-left: 3px solid var(--persona-color, #3a8ee6); padding: 6px 10px; border-radius: 6px; margin: 6px 0 8px; font-style: italic; line-height: 1.4; } /* ── Page transitions (apply to .eng-panel switching) ────────────────── */ .eng-panel { animation: panel-in .26s cubic-bezier(.2,.8,.2,1); } @keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── Theme toggle (light mode override applied via [data-theme]) ─────── */ [data-theme="light"] { --persona-card-bg: rgba(255,255,255,.92); --persona-card-border: rgba(0,0,0,.08); --persona-card-shadow: 0 4px 18px rgba(0,0,0,.08); --evo-bar-bg: rgba(0,0,0,.06); } [data-theme="light"] body, [data-theme="light"] .eng-app, [data-theme="light"] .evo-app { background: #f6f8fb !important; color: #1a1d24 !important; } [data-theme="light"] .eng-card, [data-theme="light"] .evo-card, [data-theme="light"] .vp-card { background: white !important; border-color: rgba(0,0,0,.08) !important; color: #1a1d24 !important; } [data-theme="light"] .skeleton { background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.10), rgba(0,0,0,.04)); background-size: 200% 100%; } /* ── Mobile responsive ──────────────────────────────────────────────── */ @media (max-width: 640px) { .eng-premium-bar { right: 8px; padding: 4px 6px; gap: 4px; } .eng-premium-bar button { padding: 4px 7px; font-size: 10px; } .toast-host { left: 12px; right: 12px; max-width: none; } .recipe-picker { grid-template-columns: 1fr; } .welcome-banner { padding: 12px 14px; } .welcome-banner h2 { font-size: 14px; } .eng-modal { width: 96vw; max-height: 80vh; } .eng-modal .modal-search { font-size: 13px; padding: 8px 10px; } }