/* ============================================================ RAMSAROOP PROFESSIONAL — PERSISTENT COMMAND BAR ------------------------------------------------------------ css/command-bar.css · Phase A (P1/P2) · tokens-2100.css base Self-contained, ADDITIVE component. Injected site-wide at serve time by server.js (link in , container + script before ). It never removes or alters existing page markup — it only adds #command-bar. Legacy pages (without [data-theme="2100"]) still get a functional fixed top bar that reuses the canonical style.css tokens so it reads correctly on both navy and ivory pages. Accessibility: gold :focus-visible, 44px targets, combobox/listbox, arrow-key nav, Esc, / & Cmd/Ctrl+K focus, reduced-motion, live regions for answers/refusals. ============================================================ */ :root { --cb-h: 52px; /* compact fixed bar height (legacy pages) */ --cb-h-hero: 56px; /* prominent hero variant height */ } /* --- containment so the embedded panel never corrupts page flow --- */ #command-bar { box-sizing: border-box; font-family: var(--font-body, 'Inter', sans-serif); font-size: 15px; line-height: 1.4; color: var(--color-ivory, #F7F3EA); } #command-bar *, #command-bar *::before, #command-bar *::after { box-sizing: inherit; margin: 0; padding: 0; } /* ================= GLOBAL VARIANT (site-wide, fixed top) ============ */ #command-bar[data-cb="global"] { position: fixed; top: 0; left: 0; right: 0; height: var(--cb-h); z-index: 9990; background: linear-gradient(180deg, #060A10 0%, #0A0F16 100%); border-bottom: 1px solid var(--color-gold, #C6A15B); display: flex; align-items: center; } /* push the legacy fixed nav down so the bar never overlays it */ body.rr-cb-active .nav { top: var(--cb-h) !important; } /* /2126 uses a sticky .k-rail (NOT the legacy fixed .nav); keep it below the fixed global bar when the bar is active so it never slides underneath. */ body.rr-cb-active .k-rail { top: var(--cb-h) !important; } body.rr-cb-active { padding-top: calc(var(--nav-height, 68px) + var(--cb-h)) !important; } #command-bar[data-cb="global"] .cb-inner { width: min(1100px, 100%); margin: 0 auto; padding: 0 16px; display: flex; gap: 12px; align-items: center; } /* ================= HERO VARIANT (command surface homepage) =========== */ #command-bar[data-cb="hero"] { position: relative; width: 100%; border-radius: var(--r-3, 12px); background: var(--bg-surface1, #121A24); border: 1px solid var(--line-hair, rgba(201,210,220,0.22)); border-top: 2px solid var(--color-gold, #C6A15B); /* CLS guard (homepage cinematic hero): the hero command bar is rendered by deferred JS after first paint, so the empty
collapses to ~0px and the flex/grid-centered hero re-centres when the bar fills to its ~59px working height. Reserving the rendered height up front makes the browser lay the hero out at its final size once — no post-first-paint reflow, CLS ~0. */ min-height: 59px; } #command-bar[data-cb="hero"] .cb-inner { padding: 6px; display: flex; gap: 10px; align-items: center; } /* ================= FIELD ================= */ .cb-field { flex: 1 1 auto; position: relative; display: flex; align-items: center; min-height: 40px; /* 44px effective with 2px ring + 2px border */ background: var(--bg-canvas, #0A0F16); border: 1px solid var(--line-hair, rgba(201,210,220,0.22)); border-radius: var(--r-2, 8px); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .cb-field:focus-within { border-color: var(--color-gold, #C6A15B); box-shadow: 0 0 0 2px var(--color-gold-glow, rgba(198,161,91,0.2)); } .cb-glyph { padding: 0 0 0 14px; color: var(--color-gold, #C6A15B); font-size: 18px; line-height: 1; user-select: none; } .cb-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary, #F7F3EA); font-family: var(--font-body, 'Inter', sans-serif); font-size: 15px; padding: 8px 6px; height: 100%; } .cb-input::placeholder { color: var(--text-muted, #9CA3AF); opacity: 1; } .cb-input:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: -2px; border-radius: 6px; } .cb-shortcut { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #9CA3AF); border: 1px solid var(--line-hair, rgba(201,210,220,0.22)); border-radius: 4px; padding: 2px 6px; margin-right: 6px; white-space: nowrap; letter-spacing: 0.03em; } .cb-clear { min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--text-muted, #9CA3AF); font-size: 16px; cursor: pointer; border-radius: var(--r-1, 4px); } .cb-clear:hover { color: var(--color-ivory, #F7F3EA); } .cb-clear:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: 2px; } /* ================= ACTIONS ================= */ .cb-ask-btn { min-height: 44px; min-width: 72px; padding: 0 18px; border-radius: var(--r-1, 4px); border: 1px solid var(--color-gold, #C6A15B); background: transparent; color: var(--color-gold, #C6A15B); font-family: var(--font-body, 'Inter', sans-serif); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .cb-ask-btn:hover { background: var(--color-gold, #C6A15B); color: var(--color-navy, #0B1F33); } .cb-ask-btn:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: 2px; } .cb-ask-btn:disabled { opacity: 0.5; cursor: default; } /* hide hint on very small screens; Ask stays 44px */ @media (max-width: 560px) { .cb-shortcut { display: none; } #command-bar[data-cb="global"] .cb-inner { padding: 0 10px; } } /* ================= RESULTS PANEL ================= */ .cb-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 9995; background: var(--bg-surface1, #121A24); border: 1px solid var(--line-hair, rgba(201,210,220,0.22)); border-radius: var(--r-2, 8px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); overflow: hidden; max-height: min(60vh, 480px); display: flex; flex-direction: column; } /* global fixed bar: dropdown must scroll with the fixed panel */ #command-bar[data-cb="global"] { } #command-bar[data-cb="global"] .cb-results { position: fixed; } /* type filter chips */ .cb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-hair, rgba(201,210,220,0.22)); } .cb-chip { min-height: 34px; border: 1px solid var(--line-hair, rgba(201,210,220,0.28)); background: transparent; color: var(--text-muted, #9CA3AF); font-family: var(--font-mono, monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 0 12px; cursor: pointer; } .cb-chip:hover { border-color: var(--color-gold, #C6A15B); color: var(--color-gold, #C6A15B); } .cb-chip[aria-pressed="true"] { background: var(--t-gold, rgba(198,161,91,0.16)); border-color: var(--color-gold, #C6A15B); color: var(--color-gold, #C6A15B); } .cb-chip:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: 2px; } /* scrollable result list */ .cb-list { overflow-y: auto; padding: 4px 0; } .cb-list[role="listbox"] { padding: 4px 0; } .cb-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; min-height: 44px; color: var(--text-primary, #F7F3EA); text-decoration: none; border: 0; background: transparent; cursor: pointer; border-left: 3px solid transparent; font-family: var(--font-body, 'Inter', sans-serif); } .cb-row[role="option"] { border-left-color: transparent; } .cb-row:hover { background: var(--t-white, rgba(247,243,234,0.05)); } .cb-row.is-active, .cb-row[aria-selected="true"] { background: var(--t-gold, rgba(198,161,91,0.14)); border-left-color: var(--color-gold, #C6A15B); } .cb-row:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: -2px; } .cb-row-main { flex: 1 1 auto; min-width: 0; } .cb-row-title { font-weight: 500; font-size: 14px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cb-row-sub { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #9CA3AF); margin-top: 2px; } /* type + confidence badges */ .cb-badge { flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--line-hair, rgba(201,210,220,0.3)); border-radius: 4px; padding: 2px 6px; color: var(--text-secondary, #C9D2DC); white-space: nowrap; } .cb-confidence { flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; padding: 2px 6px; white-space: nowrap; } /* confidence triad — NEVER colour-only (glyph + literal label always) */ .cb-conf-verified { color: var(--color-gold, #C6A15B); border: 1px solid rgba(198,161,91,0.5); } .cb-conf-ratified { color: var(--color-gold, #C6A15B); border: 1px solid rgba(198,161,91,0.5); } .cb-conf-inferred { color: var(--c-sand, #D7CDB4); border: 1px solid rgba(215,205,180,0.45); } .cb-conf-claim { color: var(--color-teal-light, #3D8278); border: 1px solid rgba(61,130,120,0.5); } .cb-conf-unverified, .cb-conf-pending { color: var(--text-muted, #9CA3AF); border: 1px dashed rgba(154,163,175,0.6); font-style: italic; } /* empty / message states */ .cb-empty { padding: 18px 16px; color: var(--text-muted, #9CA3AF); font-size: 14px; line-height: 1.5; border-top: 1px solid var(--line-hair, rgba(201,210,220,0.22)); } .cb-empty a { color: var(--color-gold-light, #D4B572); text-decoration: underline; } .cb-empty a:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); outline-offset: 2px; } .cb-hint { padding: 10px 14px; color: var(--text-muted, #9CA3AF); font-size: 13px; } .cb-hint b { color: var(--text-secondary, #C9D2DC); font-weight: 600; } /* ================= ASK-RANDY ANSWER PANEL ================= */ .cb-answer { display: flex; flex-direction: column; max-height: min(60vh, 460px); overflow-y: auto; } .cb-answer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-hair, rgba(201,210,220,0.22)); font-family: var(--font-mono, monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #9CA3AF); } .cb-answer-head .cb-close { min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--text-muted, #9CA3AF); font-size: 16px; cursor: pointer; border-radius: 4px; } .cb-answer-head .cb-close:hover { color: var(--color-ivory, #F7F3EA); } .cb-answer-head .cb-close:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); } .cb-answer-body { padding: 14px 16px; color: var(--text-primary, #F7F3EA); font-size: 14px; line-height: 1.6; white-space: pre-line; } .cb-answer-body a { color: var(--color-gold-light, #D4B572); text-decoration: underline; } .cb-answer-body .bm-tag { display: inline-block; font-family: var(--font-mono, monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid; padding: 1px 6px; border-radius: 3px; margin-right: 6px; } .cb-answer-body .bm-Fact { color: var(--color-gold, #C6A15B); border-color: rgba(198,161,91,0.5); } .cb-answer-body .bm-Analysis { color: var(--color-teal-light, #3D8278); border-color: rgba(61,130,120,0.5); } .cb-provenance { padding: 8px 16px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-data, #8A94A0); border-top: 1px solid var(--line-hair, rgba(201,210,220,0.16)); } .cb-sources { padding: 8px 16px 12px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #9CA3AF); } .cb-sources a { color: var(--color-gold-light, #D4B572); text-decoration: underline; margin-right: 10px; } .cb-sources a:focus-visible { outline: 2px solid var(--color-gold-light, #D4B572); } /* boundary/refusal treatment — only for Ask refusals */ .cb-answer.cb-refusal { border-left: 3px solid var(--c-danger, #E8A48C); } .cb-refusal .cb-answer-body { color: var(--c-danger, #E8A48C); font-style: italic; } /* live regions */ .cb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ================= REDUCED MOTION ================= */ @media (prefers-reduced-motion: reduce) { #command-bar *, #command-bar *::before, #command-bar *::after { animation: none !important; transition: none !important; } .cb-field, .cb-ask-btn, .cb-row { transition: none !important; } }