/* Site-wide nav search: the input sits in the nav actions; the results dropdown is a fixed-position panel appended to by js/site-search.js. Styling leans on the shared theme variables so it tracks light/dark mode automatically. */ .nav-search { position: relative; display: flex; align-items: center; } .nav-search-icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-muted); pointer-events: none; } .nav-search-icon svg { width: 1rem; height: 1rem; } .nav-search-input { width: 12rem; max-width: 40vw; padding: 0.4rem 0.7rem 0.4rem 2rem; font-size: 0.9rem; color: var(--text-primary); background: var(--surface-bg, rgba(127, 127, 127, 0.08)); border: 1px solid var(--border-color); border-radius: 999px; transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.2s ease; } .nav-search-input::placeholder { color: var(--text-muted); } .nav-search-input:focus { outline: none; border-color: var(--accent-gold); box-shadow: var(--focus-ring, 0 0 0 3px rgba(200, 160, 40, 0.25)); } /* Hide the native search "clear" button so the control stays visually consistent across browsers. */ .nav-search-input::-webkit-search-decoration, .nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* --- Results dropdown (appended to body) --- */ .site-search-panel { position: fixed; z-index: 4000; max-height: min(70vh, 32rem); overflow-y: auto; padding: 0.35rem; background: var(--surface-bg, #fff); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); } .site-search-panel[hidden] { display: none; } .site-search-empty { padding: 0.85rem 0.9rem; color: var(--text-muted); font-size: 0.9rem; } .site-search-item { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.6rem 0.7rem; border-radius: 8px; text-decoration: none; color: var(--text-primary); } .site-search-item + .site-search-item { border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); } .site-search-item:hover, .site-search-item.is-active { background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg)); } .site-search-type { flex: 0 0 auto; margin-top: 0.1rem; padding: 0.1rem 0.45rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 16%, transparent); border-radius: 999px; } .site-search-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .site-search-title { font-weight: 600; line-height: 1.25; } .site-search-snippet { font-size: 0.82rem; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .site-search-topics { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; } .site-search-topic { font-size: 0.7rem; padding: 0.05rem 0.4rem; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 999px; } .site-search-item mark { background: color-mix(in srgb, var(--accent-gold) 45%, transparent); color: inherit; padding: 0 0.05em; border-radius: 3px; } @media (max-width: 640px) { .nav-search-input { width: 100%; max-width: none; } }