/* ============================================================================ fb-cmdk — Global search command palette. Component is fully self-contained — no dependency on other fb-app CSS except for the design-token variables in tokens.css (--bg, --surface, --text, etc). Mirrors _handoff/search-redesign/mockup.html exactly. State is driven by data-state="empty|loading|results|noresult" on the .fb-cmdk-backdrop root (set by fb-cmdk.js). ============================================================================ */ .fb-cmdk-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); display: flex; justify-content: center; padding-top: 10vh; animation: fb-cmdk-fade-in 0.18s ease-out; } .fb-cmdk-backdrop[hidden] { display: none; } @keyframes fb-cmdk-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fb-cmdk-slide-down { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .fb-cmdk { width: 100%; max-width: 680px; margin: 0 16px; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; animation: fb-cmdk-slide-down 0.22s cubic-bezier(0.16, 1, 0.3, 1); } /* Lock body scroll while open (set on by fb-cmdk.js) */ body.fb-cmdk-open { overflow: hidden; } /* ── Header (input row) ──────────────────────────────────────────────────── */ .fb-cmdk__header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); } .fb-cmdk__icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; } .fb-cmdk__input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-display, inherit); font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; padding: 0; } .fb-cmdk__input::placeholder { color: var(--text-dim); font-weight: 400; } .fb-cmdk__kbd { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 10.5px; color: var(--text-muted); padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; } .fb-cmdk__close-btn { cursor: pointer; transition: background-color 0.1s ease; } .fb-cmdk__close-btn:hover { background: var(--border-soft); color: var(--text-2); } .fb-cmdk__spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: fb-cmdk-spin 0.8s linear infinite; } @keyframes fb-cmdk-spin { to { transform: rotate(360deg); } } /* Show spinner ONLY during loading */ .fb-cmdk__spinner { display: none; } .fb-cmdk-backdrop[data-state="loading"] .fb-cmdk__spinner { display: block; } /* ── Body (scrollable results) ───────────────────────────────────────────── */ .fb-cmdk__body { flex: 1; overflow-y: auto; padding: 8px 0; } .fb-cmdk__body::-webkit-scrollbar { width: 6px; } .fb-cmdk__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .fb-cmdk__body::-webkit-scrollbar-track { background: transparent; } /* ── Group ───────────────────────────────────────────────────────────────── */ .fb-cmdk__group { padding: 8px 0; } .fb-cmdk__group-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 4px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; } .fb-cmdk__group-count { color: var(--text-dim); font-weight: 500; } /* ── Row ─────────────────────────────────────────────────────────────────── */ .fb-cmdk__row { display: flex; align-items: center; gap: 14px; padding: 10px 18px; cursor: pointer; border-left: 2px solid transparent; user-select: none; text-decoration: none; color: inherit; transition: background-color 0.08s ease, border-color 0.08s ease; } .fb-cmdk__row.is-active { background: var(--surface-2); border-left-color: var(--accent); } .fb-cmdk__row:focus { outline: none; } .fb-cmdk__row-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-mono, ui-monospace, monospace); } .fb-cmdk__row-icon--funds { background: rgba(201, 169, 98, 0.14); color: var(--accent); } .fb-cmdk__row-icon--holdings { background: rgba(96, 165, 250, 0.14); color: #2563eb; } .fb-cmdk__row-icon--sectors { background: rgba(167, 139, 250, 0.14); color: #7c3aed; } .fb-cmdk__row-icon--countries { background: rgba(251, 146, 60, 0.14); color: #ea580c; font-size: 16px; } .fb-cmdk__row-icon--insights { background: rgba(74, 222, 128, 0.14); color: #16a34a; } .fb-cmdk__row-icon--recent { background: var(--surface-2); color: var(--text-muted); } .fb-cmdk__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fb-cmdk__row-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.005em; } .fb-cmdk__row-title em { font-style: normal; background: rgba(201, 169, 98, 0.20); color: var(--accent); border-radius: 2px; padding: 0 1px; } .fb-cmdk__row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-cmdk__row-sub .sep { color: var(--text-dim); margin: 0 6px; } .fb-cmdk__row-meta { flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-variant-numeric: tabular-nums; } .fb-cmdk__chip { padding: 3px 7px; border-radius: 5px; font-weight: 700; letter-spacing: 0.04em; } .fb-cmdk__chip--pos { background: rgba(34, 197, 94, 0.13); color: var(--pos); } .fb-cmdk__chip--neg { background: rgba(239, 68, 68, 0.13); color: var(--neg); } .fb-cmdk__chip--mut { background: var(--surface-2); color: var(--text-muted); } .fb-cmdk__row-arrow { color: var(--text-dim); font-size: 14px; opacity: 0; transition: opacity 0.1s ease; } .fb-cmdk__row.is-active .fb-cmdk__row-arrow, .fb-cmdk__row:hover .fb-cmdk__row-arrow { opacity: 1; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .fb-cmdk__footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-2); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); } .fb-cmdk__footer-hints { display: flex; gap: 16px; } .fb-cmdk__hint { display: inline-flex; align-items: center; gap: 5px; } .fb-cmdk__hint kbd, .fb-cmdk__brand-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; color: var(--text-2); } .fb-cmdk__brand { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); } /* ── Empty state ─────────────────────────────────────────────────────────── */ .fb-cmdk__empty { padding: 60px 24px; text-align: center; color: var(--text-muted); } .fb-cmdk__empty-icon { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--text-dim); } .fb-cmdk__empty-title { font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; } .fb-cmdk__empty-sub { font-size: 13px; color: var(--text-muted); } /* ── Skeleton (loading) ──────────────────────────────────────────────────── */ .fb-cmdk__skel-row { display: flex; align-items: center; gap: 14px; padding: 10px 18px; } .fb-cmdk__skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--border-soft) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: fb-cmdk-shimmer 1.4s linear infinite; border-radius: 4px; } @keyframes fb-cmdk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fb-cmdk__skel--icon { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; } .fb-cmdk__skel--title { height: 12px; width: 60%; } .fb-cmdk__skel--sub { height: 10px; width: 40%; margin-top: 6px; } .fb-cmdk__skel-body { flex: 1; } /* ── Responsive (mobile full-screen sheet) ───────────────────────────────── */ @media (max-width: 640px) { .fb-cmdk-backdrop { padding-top: 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } .fb-cmdk { max-width: 100%; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; box-shadow: none; } .fb-cmdk__footer { display: none; } /* hint bar takes valuable vertical real estate on mobile */ .fb-cmdk__row-sub { white-space: normal; line-height: 1.35; } }