/* =========================================================================== Verified Handles — reusable search bar component --------------------------------------------------------------------------- Self-contained: defines its OWN light/dark tokens and must NOT rely on vh.css being present (the homepage hero is a standalone document that does not load vh.css). Paired with /static/js/searchbar.js and the EJS partial views/partials/searchbar.ejs. Used on the homepage hero (variant "hero") and the search-results header (variant "header"). =========================================================================== */ .vh-sb { /* Light theme tokens (overridden for dark below). */ --sb-fg: #24292f; /* primary text */ --sb-sub: #57606a; /* secondary text (subtitles) */ --sb-ph: #6b7280; /* placeholder — >= 4.6:1 on #fff (WCAG 1.4.3) */ --sb-field-bg: #fff; --sb-border: #b9c0c8; --sb-border-strong: #6e7781; --sb-accent: #0b5fd6; /* focus ring + match highlight, >= 4.5:1 on #fff*/ --sb-panel-bg: #fff; --sb-panel-border: #d0d7de; --sb-active-bg: #eaf1fb; /* active option, >= 3:1 vs panel (WCAG 1.4.11) */ --sb-active-bar: #0b5fd6; --sb-muted: #57606a; --sb-on-accent: #ffffff; /* text/icon on the accent submit fill */ --sb-shadow: 0 10px 30px rgba(140, 149, 159, 0.28), 0 2px 6px rgba(140, 149, 159, 0.18); position: relative; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; text-align: start; } .vh-sb *, .vh-sb *::before, .vh-sb *::after { box-sizing: border-box; } /* Defensive resets so the component is self-contained regardless of the host page's base CSS (the results page loads vh.css, which has bare li/p rules). Kept at single-class specificity so they don't clobber our own button rules. */ .vh-sb__opt { padding: 0; } /* neutralise vh.css `li{padding:8px}` on the results page */ .vh-sb__note p { margin: 0 0 6px; font-size: 0.9rem; white-space: normal; } .vh-sb__note p:last-child { margin-bottom: 0; } /* Dark tokens apply under BOTH triggers, mirroring vh-2026.css's theme system: (1) OS dark — UNLESS the user forced light via [data-theme='light']; and (2) the user forced dark via [data-theme='dark'] on a light-OS machine. searchbar.css carries its own tokens (the hero is a standalone doc), but it must still honour the global [data-theme] override that theme-init.js / the header toggle set on — without selector (2) a forced-dark user got a white searchbar on a dark page. The two blocks are identical — KEEP THEM IN SYNC. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .vh-sb { --sb-fg: #c9d1d9; --sb-sub: #8b949e; --sb-ph: #8b949e; /* ~4.6:1 on #161b22 */ --sb-field-bg: #0d1117; --sb-border: #30363d; --sb-border-strong: #6e7681; --sb-accent: #58a6ff; --sb-panel-bg: #161b22; --sb-panel-border: #30363d; --sb-active-bg: #1f2a3d; --sb-active-bar: #58a6ff; --sb-muted: #8b949e; --sb-on-accent: #0d1117; /* dark ink on the pale-blue submit — 7.5:1 (fixes CONTRAST-02) */ --sb-shadow: 0 10px 30px rgba(1, 4, 9, 0.7), 0 2px 6px rgba(1, 4, 9, 0.6); } } :root[data-theme='dark'] .vh-sb { --sb-fg: #c9d1d9; --sb-sub: #8b949e; --sb-ph: #8b949e; /* ~4.6:1 on #161b22 */ --sb-field-bg: #0d1117; --sb-border: #30363d; --sb-border-strong: #6e7681; --sb-accent: #58a6ff; --sb-panel-bg: #161b22; --sb-panel-border: #30363d; --sb-active-bg: #1f2a3d; --sb-active-bar: #58a6ff; --sb-muted: #8b949e; --sb-on-accent: #0d1117; /* dark ink on the pale-blue submit — 7.5:1 */ --sb-shadow: 0 10px 30px rgba(1, 4, 9, 0.7), 0 2px 6px rgba(1, 4, 9, 0.6); } /* --- Sizing variants ----------------------------------------------------- */ .vh-sb--hero { width: min(640px, 92vw); margin-inline: auto; } .vh-sb--header { width: 100%; margin: 0 0 1.4em; } /* --- Field (input + icons + buttons) ------------------------------------- */ .vh-sb__field { position: relative; display: block; } .vh-sb__input { width: 100%; margin: 0; font: inherit; font-size: 1rem; line-height: 1.2; color: var(--sb-fg); background: var(--sb-field-bg); border: 1px solid var(--sb-border-strong); border-radius: 10px; padding-block: 0; padding-inline-start: 44px; /* room for the search glyph */ padding-inline-end: 84px; /* room for clear + submit buttons */ height: 44px; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .vh-sb--hero .vh-sb__input { height: 54px; font-size: 1.15rem; border-radius: 12px; } .vh-sb__input::placeholder { color: var(--sb-ph); opacity: 1; } /* Hide the native search "x" — we ship our own accessible clear button. */ .vh-sb__input::-webkit-search-cancel-button, .vh-sb__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .vh-sb__input:hover { border-color: var(--sb-fg); } .vh-sb__field:focus-within .vh-sb__input { border-color: var(--sb-accent); } /* Keyboard-only focus ring (WCAG 2.4.11 / 2.4.13): >=2px, >=3:1, per-scheme. */ .vh-sb__input:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; border-color: var(--sb-accent); } /* Decorative search glyph */ .vh-sb__icon { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--sb-muted); pointer-events: none; } .vh-sb__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } /* Submit + clear buttons */ .vh-sb__submit, .vh-sb__clear { position: absolute; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; margin: 0; border: 0; background: transparent; cursor: pointer; color: var(--sb-muted); padding: 0; } .vh-sb__submit { inset-inline-end: 6px; width: 38px; height: 38px; border-radius: 8px; color: var(--sb-on-accent); background: var(--sb-accent); } .vh-sb--hero .vh-sb__submit { width: 44px; height: 44px; } .vh-sb__submit svg { width: 18px; height: 18px; fill: currentColor; } .vh-sb__submit:hover { filter: brightness(1.06); } .vh-sb__clear { inset-inline-end: 52px; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; } .vh-sb--hero .vh-sb__clear { inset-inline-end: 58px; } .vh-sb__clear svg { width: 13px; height: 13px; fill: currentColor; } .vh-sb__clear:hover { color: var(--sb-fg); background: rgba(140, 149, 159, 0.18); background: color-mix(in srgb, var(--sb-fg) 12%, transparent); } .vh-sb__clear[hidden] { display: none; } .vh-sb__submit:focus-visible, .vh-sb__clear:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; } /* --- Suggestions panel (listbox) ----------------------------------------- */ .vh-sb__panel { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: 1000; margin: 0; padding: 6px; list-style: none; max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain; background: var(--sb-panel-bg); border: 1px solid var(--sb-panel-border); border-radius: 12px; box-shadow: var(--sb-shadow); -webkit-overflow-scrolling: touch; } .vh-sb__panel[hidden] { display: none; } /* ROUTE-010 lane B — the 404 page's "did you mean" slot is this same widget with the panel IN FLOW instead of floating: it is page content the visitor reads, not a popover over other content, so it must not overlay what follows, cast a popover shadow, or scroll independently. Everything else (rows, badges, skeleton, notes, dark mode) is inherited unchanged. */ .vh-sb--suggest { width: 100%; margin: 0 0 var(--vh-space-4, 16px); } .vh-sb--suggest .vh-sb__panel { position: static; z-index: auto; margin-block-start: 8px; max-height: none; overflow-y: visible; box-shadow: none; } /* Group label (e.g. "Recent", "Trending") — NOT a navigable option. */ .vh-sb__section { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-muted); } .vh-sb__section-clear { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.72rem; text-transform: none; letter-spacing: 0; color: var(--sb-accent); padding: 2px 4px; border-radius: 6px; } .vh-sb__section-clear:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 1px; } /* A single option row */ .vh-sb__opt { position: relative; display: block; margin: 1px 0; border-radius: 8px; } .vh-sb__link { display: flex; align-items: center; gap: 10px; min-height: 44px; /* WCAG 2.5.8 touch target */ padding: 6px 10px; text-decoration: none; color: var(--sb-fg); border-radius: 8px; border-inline-start: 3px solid transparent; } .vh-sb__opt[aria-selected="true"] .vh-sb__link, .vh-sb__link:hover { background: var(--sb-active-bg); border-inline-start-color: var(--sb-active-bar); } .vh-sb__lead { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sb-muted); display: inline-flex; } .vh-sb__lead svg { width: 100%; height: 100%; fill: currentColor; } .vh-sb__text { flex: 1 1 auto; min-width: 0; } /* min-width:0 enables ellipsis */ .vh-sb__title { display: block; font-size: 0.98rem; color: var(--sb-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vh-sb__sub { display: block; font-size: 0.8rem; color: var(--sb-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Match highlight — weight + accent colour, NOT a yellow fill, so it survives dark mode and forced-colors. */ .vh-sb__hl { background: transparent; color: var(--sb-accent); font-weight: 700; } /* Verified / trending badges */ .vh-sb__badge { flex: 0 0 auto; width: 18px; height: 18px; } .vh-sb__badge img { display: block; width: 18px; height: 18px; } /* Remove-one-recent button (sibling of the anchor, overlaid on the trailing edge) */ .vh-sb__opt--recent .vh-sb__link { padding-inline-end: 40px; } .vh-sb__remove { position: absolute; inset-inline-end: 8px; inset-block-start: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--sb-muted); width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 1; } .vh-sb__remove:hover { color: var(--sb-fg); background: rgba(140, 149, 159, 0.18); background: color-mix(in srgb, var(--sb-fg) 12%, transparent); } .vh-sb__remove:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 1px; } /* Empty / notice rows (no results, banned term, errors) */ .vh-sb__note { padding: 12px 12px; font-size: 0.9rem; color: var(--sb-muted); } .vh-sb__note strong { color: var(--sb-fg); } .vh-sb__note a { color: var(--sb-accent); text-decoration: none; } .vh-sb__note a:hover { text-decoration: underline; } .vh-sb__note kbd { font: inherit; font-size: 0.8em; padding: 1px 6px; border: 1px solid var(--sb-panel-border); border-radius: 5px; background: rgba(140, 149, 159, 0.14); background: color-mix(in srgb, var(--sb-fg) 8%, transparent); } /* --- Skeleton loading ---------------------------------------------------- */ .vh-sb__skel { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; } /* rgba fallback FIRST so the bar is visible on engines without color-mix() */ .vh-sb__skel-line { height: 12px; border-radius: 6px; background: rgba(140, 149, 159, 0.2); background: color-mix(in srgb, var(--sb-fg) 12%, transparent); } .vh-sb__skel-line:nth-child(2) { width: 60%; height: 10px; } @media (prefers-reduced-motion: no-preference) { .vh-sb__skel-line { background: rgba(140, 149, 159, 0.2); background: linear-gradient(90deg, color-mix(in srgb, var(--sb-fg) 8%, transparent) 25%, color-mix(in srgb, var(--sb-fg) 18%, transparent) 37%, color-mix(in srgb, var(--sb-fg) 8%, transparent) 63%); background-size: 400% 100%; animation: vh-sb-shimmer 1.2s ease-in-out infinite; } } @keyframes vh-sb-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* `.vh-visually-hidden` (live region, label, hint) is defined once in vh-2026.css, which Layout always loads alongside this sheet — no divergent duplicate here (GLOBAL-05). */ /* --- Motion preferences -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vh-sb__input, .vh-sb__panel, .vh-sb__skel-line { transition: none !important; animation: none !important; } } /* --- Forced colors / Windows High Contrast ------------------------------- */ @media (forced-colors: active) { .vh-sb__input:focus-visible { outline: 2px solid Highlight; } .vh-sb__opt[aria-selected="true"] .vh-sb__link { background: Highlight; color: HighlightText; forced-color-adjust: none; } .vh-sb__hl { color: inherit; } } /* --- Mobile -------------------------------------------------------------- */ @media (max-width: 768px) { .vh-sb--hero { width: 100%; } .vh-sb__panel { max-height: 60vh; } .vh-sb__link { min-height: 48px; } } /* --- Print --------------------------------------------------------------- */ @media print { .vh-sb__panel, .vh-sb__clear, .vh-sb__submit, .vh-visually-hidden { display: none !important; } }