How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Header: fixed, 32px from the top, min(1344px, 100% - 96px) wide and centered. The bar is 94px tall with 13px × 40px padding and 64px gaps: logo (pushed left), search icon, "Products", "Menu" with its icon, and the bag. It starts transparent over the page.
- Opening search: - The header background fades to the solid ink color (450ms). - The logo, icons and links fade out (250ms). - The search row fades in 120ms later (300ms). It sits at the same height, 40px in from each side, with a magnifier, the input 22px after it, and a close button. - The input takes focus after 120ms. - The panel under the bar grows from grid-template-rows: 0fr to 1fr over 560ms cubic-bezier(0.76, 0, 0.24, 1), so it opens to exactly its content height.
- Panel: 43px × 40px padding (17px bottom). - The heading (display font, 32px uppercase) reads "Most looked at" when the field is empty, "Results for “silk”" while typing, or "No pieces match “xyz”". - Up to four 200 × 200 results sit in a row, 20px apart, with the name 30px under each photo. Hover zooms the photo to 1.04 and turns the name the accent color. - More than four matches adds an underlined "See all 9 pieces" link on the right of the heading. - No matches shows "Try velvet, gota, ivory, bridal." with each word a button that searches for it.
- Matching: accents are ignored and every word you type must appear in the name or the description. Name matches rank first, and names that start with the word rank highest.
- Closing: the close button, Escape, a click anywhere outside the header, or choosing a result. The query clears on close. Enter goes to your shop page with ?q=.
- Under 1200px: the header is 16px from each edge, the bar has 20px gaps and 20px padding, "Products" and the "Menu" label hide, and the panel is two columns of square results (24px × 20px padding, 24px heading).
- Under 768px: the header is a full-width 68px bar. Menu and search sit left, the logo is centered, and account and bag sit right. Searching turns it light with dark text. The panel has 20px padding, a 17px heading, 12px gaps between results and 13px names. The input is 16px so iOS does not zoom.
- Reduced motion: the panel appears without growing.