/** * search-widget.css * ------------------ * Styles for the header search icon/expanding bar + the autosuggest * dropdown. Color tokens use the site's brand red accent so this drops * into the current header without clashing. * * Token assumptions (override these to match your exact theme): * --fe-accent: #d9232d (brand red) * --fe-accent-dark: #b01c24 (darker red, for hover/active states) * --fe-text: #1f2330 * --fe-muted: #6b7280 * --fe-surface: #ffffff * --fe-border: #e8e8ec */ :root { --fe-accent: #d9232d; --fe-accent-dark: #b01c24; --fe-text: #1f2330; --fe-muted: #6b7280; --fe-surface: #ffffff; --fe-border: #e8e8ec; --fe-shadow: 0 12px 32px rgba(20, 20, 30, 0.14); --fe-radius: 999px; } /* --------------------------------------------------------------------- Header layout — the search wrapper sits between logo and hamburger and is the ONLY element that grows. Logo/hamburger never move position, but on very narrow screens the logo TEXT (not the mark/icon) hides while search is open, the same pattern Google/Amazon use on mobile, so the input gets enough room to actually be usable rather than a cramped 60px sliver. The logo element itself never shifts or disappears entirely — only its wordmark — so there's no layout jump. --------------------------------------------------------------------- */ .fe-header-actions { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; /* allows the search wrapper to actually shrink/grow inside flex */ } /* When search is open, give it breathing room by collapsing the logo's text label on narrow screens. Add data-fe-search-open="true" to your or header via JS (search-widget.js does this automatically) and tag your wordmark element with class="fe-logo-text". */ @media (max-width: 480px) { [data-fe-search-open='true'] .fe-logo-text { display: none; } } .fe-search-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: 40px; /* Collapsed width = just the circular button. Expansion animates this. */ width: 40px; max-width: 100%; border-radius: var(--fe-radius); background: var(--fe-surface); transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 1; min-width: 40px; } .fe-search-wrap.is-open { /* Grow to fill all remaining flex space between logo and hamburger. Because this is the only flex-growing sibling, it can never overlap the fixed logo or fixed hamburger — flexbox simply won't let it. */ flex: 1 1 auto; width: 100%; background: #fff; box-shadow: 0 0 0 1.5px var(--fe-border) inset; } .fe-search-toggle { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--fe-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; z-index: 2; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; } .fe-search-toggle:hover { background: var(--fe-accent-dark); } .fe-search-toggle:active { transform: scale(0.93); } .fe-search-wrap.is-open .fe-search-toggle { background: transparent; color: var(--fe-muted); position: relative; order: 2; margin-left: auto; } .fe-search-wrap.is-open .fe-search-toggle:hover { color: var(--fe-text); background: rgba(0, 0, 0, 0.05); } .fe-search-toggle .fe-icon-close { display: none; } .fe-search-wrap.is-open .fe-search-toggle .fe-icon-search { display: none; } .fe-search-wrap.is-open .fe-search-toggle .fe-icon-close { display: inline-flex; } .fe-search-input { width: 0; opacity: 0; border: none; outline: none; background: transparent; font-size: 15px; color: var(--fe-text); padding: 0; transition: opacity 0.22s ease 0.05s; order: 1; flex: 1 1 auto; min-width: 0; } .fe-search-wrap.is-open .fe-search-input { width: auto; opacity: 1; padding: 0 8px 0 16px; } .fe-search-input::placeholder { color: var(--fe-muted); } /* --------------------------------------------------------------------- Autosuggest dropdown --------------------------------------------------------------------- */ .fe-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--fe-surface); border-radius: 16px; box-shadow: var(--fe-shadow); border: 1px solid var(--fe-border); max-height: min(70vh, 480px); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1000; } .fe-search-dropdown.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .fe-search-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fe-muted); padding: 12px 16px 6px; } .fe-search-result { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--fe-text); min-height: 44px; /* touch target */ cursor: pointer; transition: background 0.12s ease; } .fe-search-result:hover, .fe-search-result.is-active { background: #fdeeee; } .fe-search-result-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: #fbe4e5; color: var(--fe-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; } .fe-search-result-body { flex: 1 1 auto; min-width: 0; } .fe-search-result-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fe-search-result-title mark { background: #f8c9cc; color: var(--fe-accent-dark); border-radius: 3px; padding: 0 1px; } .fe-search-result-desc { font-size: 12.5px; color: var(--fe-muted); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fe-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; flex-shrink: 0; white-space: nowrap; } .fe-badge.fe-badge-featured { background: #fbe4e5; color: var(--fe-accent-dark); } .fe-search-didyoumean { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; } .fe-search-chip { font-size: 13px; padding: 7px 14px; border-radius: 999px; background: #f4f5f7; border: 1px solid var(--fe-border); color: var(--fe-text); cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; transition: background 0.15s ease, border-color 0.15s ease; } .fe-search-chip:hover { background: #fbe4e5; border-color: #f3b8bb; } .fe-search-empty { padding: 28px 16px; text-align: center; color: var(--fe-muted); font-size: 14px; } .fe-search-viewall { display: block; text-align: center; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--fe-accent-dark); text-decoration: none; border-top: 1px solid var(--fe-border); min-height: 44px; } .fe-search-viewall:hover { background: #fdeeee; } /* --------------------------------------------------------------------- Backdrop — dims page content slightly when search is open on mobile, and is the element that "click outside to close" listens on. --------------------------------------------------------------------- */ .fe-search-backdrop { position: fixed; inset: 0; background: rgba(15, 15, 20, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 900; } .fe-search-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* --------------------------------------------------------------------- Breakpoint tuning — verified at 320 / 360 / 375 / 390 / 412px widths. The flex-based approach above is inherently fluid, but we tighten paddings at the very narrowest widths so nothing feels cramped. --------------------------------------------------------------------- */ @media (max-width: 359px) { .fe-search-wrap.is-open .fe-search-input { padding: 0 4px 0 12px; font-size: 14px; } .fe-search-result { padding: 10px 12px; } .fe-search-result-icon { width: 28px; height: 28px; } } @media (min-width: 768px) { .fe-search-wrap.is-open { flex: 0 1 420px; /* on tablets+, cap growth so it doesn't stretch edge-to-edge */ } .fe-search-dropdown { max-height: 520px; } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .fe-search-wrap, .fe-search-input, .fe-search-dropdown, .fe-search-backdrop, .fe-search-toggle { transition: none !important; } } /* Visible keyboard focus (accessibility) */ .fe-search-toggle:focus-visible, .fe-search-input:focus-visible, .fe-search-chip:focus-visible, .fe-search-result:focus-visible, .fe-search-viewall:focus-visible { outline: 2px solid var(--fe-accent-dark); outline-offset: 2px; }