/** * Search Component Styles * Accessible autocomplete with ARIA combobox pattern */ /* Search container */ .search-container { padding: 0; border-bottom: none; margin: 0; width: 100%; position: relative; transition: opacity var(--transition-base), transform var(--transition-base); } .search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Search input wrapper */ .search-input-wrapper { position: relative; display: flex; align-items: center; border: 1px solid rgba(15, 23, 42, 0.18); border-radius: 999px; background-color: #f8fafc; padding: 0 0.45rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); gap: 0.35rem; } .topbar-search .search-input-wrapper { border-color: rgba(15, 23, 42, 0.22); background-color: #ffffff; } .search-input-wrapper:focus-within { border-color: #1a5632; background-color: #ffffff; } .search-leading-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: #1a5632; font-size: 1.1rem; } .search-input { width: 100%; flex: 1; padding: 0.95rem 0.75rem 0.95rem 0; padding-right: 48px; border: none; font-size: var(--font-size-base); background-color: #ffffff; color: #0f172a; transition: all var(--transition-fast); border-radius: 999px; font-weight: 600; } .search-input:focus-visible { border-radius: 1.5rem; } .search-input::placeholder { color: #5b6475; } .search-input:focus { outline: none; } /* Clear button */ .search-clear { position: absolute; right: 4px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: none; border-radius: var(--radius-full); font-size: 24px; color: #757575; cursor: pointer; transition: all var(--transition-fast); } .search-clear:hover { background-color: #f1f5f9; color: #374151; } .search-clear:focus { outline: 2px solid #1a5632; outline-offset: 2px; } @media (max-width: 800px) { /* Max width on search bar */ .topbar-search { max-width: 300px; } /* Remove box shadow on search wrapper */ .topbar-search .search-input-wrapper { padding: 0 0.25rem; border-radius: 1.5rem; box-shadow: none; } .topbar-search .search-input-wrapper:focus-within { box-shadow: none; } .search-input-wrapper { border-width: 1px; } .search-input { padding: 0.65rem 0.5rem 0.65rem 0; font-size: 0.95rem; } .search-leading-icon { width: 30px; height: 30px; font-size: 1rem; } .search-clear { width: 32px; height: 32px; right: 2px; } } /* Search results dropdown Portalled to by search.js to escape the topbar stacking context. Position (fixed, top, left, width) is set dynamically by positionResults(). overflow:hidden clips children to border-radius; inner wrapper handles scrolling. */ .search-results { background-color: #ffffff; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 1rem; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18); z-index: var(--z-tooltip); overflow: hidden; } /* Inner scroll wrapper — keeps overflow:hidden on outer intact for border-radius */ .search-results-inner { max-height: 400px; overflow-y: auto; } /* Result items */ .search-result-item { padding: var(--spacing-md); cursor: pointer; border-bottom: 1px solid #e0e0e0; background-color: #ffffff; color: #212121; transition: background-color var(--transition-fast); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background-color: #fafafa; } /* Keyboard-selected state */ .search-result-item[aria-selected="true"] { background-color: #1a5632; color: #ffffff; } .search-result-item[aria-selected="true"] .search-result-meta, .search-result-item[aria-selected="true"] .search-result-code, .search-result-item[aria-selected="true"] .search-result-indicator { color: rgba(255, 255, 255, 0.85); } .search-result-item[aria-selected="true"] .search-highlight { background-color: #fdb913; color: #212121; } /* Result name (primary text) */ .search-result-name { font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-xs); line-height: var(--line-height-normal); } /* Building code shown after name */ .search-result-code { font-weight: var(--font-weight-normal); color: #757575; } /* Meta info (address) */ .search-result-meta { font-size: var(--font-size-sm); color: #757575; line-height: var(--line-height-normal); } /* Tag match indicator (arrow to building) */ .search-result-indicator { font-weight: var(--font-weight-normal); color: #757575; margin-left: var(--spacing-sm); } /* Match text (for tag searches) */ .search-match-text { font-style: italic; } /* Search highlight */ .search-highlight { background-color: #fdb913; color: #212121; padding: 0 2px; border-radius: 2px; font-weight: var(--font-weight-semibold); } /* No results state */ .search-no-results { padding: var(--spacing-lg); text-align: center; color: #757575; font-style: italic; } /* Loading state */ .search-loading { padding: var(--spacing-lg); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); color: #757575; } /* High contrast mode adjustments */ @media (prefers-contrast: more) { .search-input:focus { box-shadow: 0 0 0 4px #1a5632; } .search-result-item[aria-selected="true"] { outline: 3px solid #ffffff; outline-offset: -3px; } .search-highlight { outline: 1px solid #212121; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .search-input, .search-clear, .search-result-item { transition: none; } }