/* Roadaro — global command palette (⌘K / Ctrl+K). * Pairs with roadaro-command.js. Self-contained: no build step, no framework, * no dependency on any page's own CSS variables (every value has a literal * fallback so the palette looks identical on all ~46 office pages). * * Identity: brand navy #00394d, brand gold #c8901a (DESIGN.md §2). * Dark mode follows the repo-wide [data-theme="dark"] convention set by the * inline boot script in each page's (localStorage dv_theme). * * Everything is namespaced .rcp-* so it can never collide with page styles. * Loaded AFTER roadaro-actionbar.css, i.e. last, so its own rules win without * !important; it deliberately styles nothing outside its own subtree except the * one opt-in nav hint chip (.rcp-chip). */ /* ── design tokens ─────────────────────────────────────────────────────────── */ .rcp-scope, #rcp-backdrop, #rcp-help { --rcp-navy: #00394d; --rcp-gold: #c8901a; --rcp-surface: #ffffff; --rcp-surface-2: #f6f8f9; --rcp-ink: #16202b; --rcp-ink-2: #5a6a78; --rcp-ink-3: #8c99a5; --rcp-line: #dfe5ea; --rcp-line-soft: #edf1f4; --rcp-active: rgba(200, 144, 26, 0.14); --rcp-active-line: #c8901a; --rcp-scrim: rgba(6, 22, 32, 0.44); --rcp-shadow: 0 24px 64px rgba(6, 22, 32, 0.28), 0 2px 8px rgba(6, 22, 32, 0.12); --rcp-kbd-bg: #eef2f5; --rcp-kbd-ink: #5a6a78; } /* Dark mode: same token names, dark-ladder values (premium.css surface ladder). */ [data-theme="dark"] #rcp-backdrop, [data-theme="dark"] #rcp-help, [data-theme="dark"] .rcp-scope { --rcp-navy: #9ecbff; --rcp-gold: #f0c46a; --rcp-surface: #121722; --rcp-surface-2: #171e2b; --rcp-ink: #e6edf3; --rcp-ink-2: #a7b4c2; --rcp-ink-3: #7d8a98; --rcp-line: #2b3442; --rcp-line-soft: #232b37; --rcp-active: rgba(240, 196, 106, 0.14); --rcp-active-line: #f0c46a; --rcp-scrim: rgba(2, 8, 14, 0.62); --rcp-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); --rcp-kbd-bg: #232b37; --rcp-kbd-ink: #a7b4c2; } /* ── backdrop ──────────────────────────────────────────────────────────────── */ #rcp-backdrop, #rcp-help { position: fixed; inset: 0; z-index: 2147482000; /* under signout-confirm (…483000), over pages */ display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px 24px; background: var(--rcp-scrim); -webkit-backdrop-filter: blur(3px) saturate(115%); backdrop-filter: blur(3px) saturate(115%); opacity: 0; transition: opacity 0.13s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; overflow-y: auto; overscroll-behavior: contain; } #rcp-backdrop.rcp-on, #rcp-help.rcp-on { display: flex; opacity: 1; } /* ── panel ─────────────────────────────────────────────────────────────────── */ .rcp-panel { width: 560px; max-width: 100%; margin: auto 0; background: var(--rcp-surface); color: var(--rcp-ink); border: 1px solid var(--rcp-line); border-radius: 18px; box-shadow: var(--rcp-shadow); overflow: hidden; transform: translateY(-8px) scale(0.985); opacity: 0; transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.16s ease; } #rcp-backdrop.rcp-on .rcp-panel, #rcp-help.rcp-on .rcp-panel { transform: none; opacity: 1; } /* ── input row ─────────────────────────────────────────────────────────────── */ .rcp-inputrow { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rcp-line-soft); } .rcp-inputrow > i { font-size: 18px; color: var(--rcp-gold); flex: none; line-height: 1; } .rcp-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rcp-ink); font: inherit; font-size: 15.5px; font-weight: 600; padding: 2px 0; } .rcp-input::placeholder { color: var(--rcp-ink-3); font-weight: 500; } .rcp-input:focus { outline: 0; box-shadow: none; } /* ── results ───────────────────────────────────────────────────────────────── */ .rcp-list { max-height: 54vh; min-height: 64px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scroll-padding-top: 30px; scroll-padding-bottom: 6px; } .rcp-group { display: flex; align-items: center; gap: 8px; padding: 10px 10px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rcp-ink-3); position: sticky; top: 0; background: var(--rcp-surface); z-index: 1; } .rcp-group b { font-weight: 800; color: var(--rcp-ink-3); } .rcp-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; cursor: pointer; border-left: 2px solid transparent; color: var(--rcp-ink); } .rcp-row[aria-selected="true"] { background: var(--rcp-active); border-left-color: var(--rcp-active-line); } .rcp-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--rcp-surface-2); border: 1px solid var(--rcp-line-soft); color: var(--rcp-navy); font-size: 15px; line-height: 1; } .rcp-row[aria-selected="true"] .rcp-ic { color: var(--rcp-gold); border-color: var(--rcp-line); } .rcp-txt { min-width: 0; flex: 1 1 auto; } .rcp-lb { font-size: 13.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rcp-sb { font-size: 11.5px; font-weight: 500; color: var(--rcp-ink-2); line-height: 1.35; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rcp-tag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rcp-ink-3); background: var(--rcp-surface-2); border: 1px solid var(--rcp-line-soft); border-radius: 999px; padding: 3px 8px; } .rcp-row.rcp-more { color: var(--rcp-ink-2); font-size: 12px; font-weight: 700; padding-left: 12px; } .rcp-row.rcp-more .rcp-ic { background: transparent; border-style: dashed; } .rcp-empty { padding: 30px 18px 34px; text-align: center; color: var(--rcp-ink-2); font-size: 13px; line-height: 1.6; } .rcp-empty i { display: block; font-size: 26px; color: var(--rcp-ink-3); margin-bottom: 8px; } .rcp-empty b { color: var(--rcp-ink); } /* ── footer hint bar ───────────────────────────────────────────────────────── */ .rcp-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--rcp-line-soft); background: var(--rcp-surface-2); font-size: 11px; font-weight: 600; color: var(--rcp-ink-2); } .rcp-foot .rcp-dot { color: var(--rcp-ink-3); padding: 0 2px; } .rcp-foot .rcp-sp { margin-left: auto; } .rcp-helpbtn { flex: none; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; color: var(--rcp-ink-2); background: var(--rcp-kbd-bg); border: 1px solid var(--rcp-line); border-radius: 7px; padding: 3px 9px; } .rcp-helpbtn:hover { color: var(--rcp-ink); border-color: var(--rcp-ink-3); } kbd.rcp-k { display: inline-block; min-width: 17px; text-align: center; font-family: inherit; font-size: 10.5px; font-weight: 800; line-height: 1.5; color: var(--rcp-kbd-ink); background: var(--rcp-kbd-bg); border: 1px solid var(--rcp-line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; } /* ── shortcuts help overlay ────────────────────────────────────────────────── */ #rcp-help .rcp-panel { width: 460px; } .rcp-help-head { display: flex; align-items: center; gap: 9px; padding: 15px 16px; border-bottom: 1px solid var(--rcp-line-soft); font-size: 15px; font-weight: 800; color: var(--rcp-ink); } .rcp-help-head i { color: var(--rcp-gold); font-size: 17px; } .rcp-help-x { margin-left: auto; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--rcp-ink-2); background: var(--rcp-kbd-bg); border: 1px solid var(--rcp-line); border-radius: 7px; padding: 3px 10px; } .rcp-help-body { padding: 6px 6px 12px; max-height: 60vh; overflow-y: auto; } .rcp-help-sec { padding: 12px 12px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rcp-ink-3); } .rcp-help-row { display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 13px; color: var(--rcp-ink); } .rcp-help-keys { flex: none; display: flex; align-items: center; gap: 4px; min-width: 108px; } .rcp-help-row span.rcp-desc { color: var(--rcp-ink-2); font-weight: 600; } /* ── nav discoverability chip ──────────────────────────────────────────────── */ /* Injected into the shared .nav-utils cluster (built by roadaro-nav.js), which is a plain inline-flex row whose child order is fixed by CSS `order` in roadaro-nav.css (1=weather, 2=diesel, 3=gear, 4=theme). order:0 slots the chip in front of that cluster without moving any existing child. */ .nav-utils .rcp-chip { order: 0; } .rcp-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; flex: none; border-radius: 999px; border: 1px solid var(--rcp-line, #dfe5ea); background: rgba(128, 128, 128, 0.08); color: var(--t2, #5a6a78); font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .rcp-chip:hover { background: rgba(200, 144, 26, 0.16); color: #00394d; border-color: #c8901a; } .rcp-chip i { font-size: 12px; opacity: 0.8; } .rcp-chip kbd { font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; } [data-theme="dark"] .rcp-chip { border-color: #2b3442; color: #a7b4c2; } [data-theme="dark"] .rcp-chip:hover { color: #f0c46a; border-color: #f0c46a; } @media (max-width: 900px) { .rcp-chip { display: none; } } /* ── a11y ──────────────────────────────────────────────────────────────────── */ .rcp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible focus everywhere inside the palette (the input's own ring is the whole input row, so it gets a dedicated treatment). */ .rcp-inputrow:focus-within { box-shadow: inset 0 0 0 2px rgba(200, 144, 26, 0.32); } .rcp-panel :focus-visible, .rcp-chip:focus-visible { outline: 2px solid var(--rcp-gold, #c8901a); outline-offset: 2px; } /* ── responsive / zoom (usable at 200%) ────────────────────────────────────── */ @media (max-width: 640px), (max-height: 560px) { #rcp-backdrop, #rcp-help { padding: 4vh 10px 16px; } .rcp-panel { width: 100%; border-radius: 14px; } .rcp-list { max-height: 62vh; } .rcp-foot { font-size: 10.5px; } } @media (max-height: 420px) { .rcp-list { max-height: 46vh; } } /* ── reduced motion ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #rcp-backdrop, #rcp-help, .rcp-panel, .rcp-chip, .rcp-row { transition: none !important; animation: none !important; } }