/** * NLH SearchAll - Live Suggest Modal (Pure Function "workshop" theme) * * Industrial-workshop aesthetic: dark steel surfaces, electric-blue accent, * monospace blueprint labels, hard edges. Deliberately distinct from the MVP * Motorsports red theme. Surface/accent tokens come from the Pf/workshop design * system (var(--pf-*) defined in web/css/home/home-pf/_global.less); every token * carries a hex fallback so the panel renders correctly even before tokens load. * * The panel + backdrop are appended to and positioned fixed, so they are a * true full-width modal beneath the header on BOTH desktop and mobile, independent * of the header markup (no dependency on the old MVP .search-wrapper/.show-search). */ /* ======================================================== Backdrop (dims the page below the header bar) ======================================================== */ .nlh-suggest-backdrop { display: none; position: fixed; top: var(--nlh-modal-top, 64px); left: 0; right: 0; bottom: 0; z-index: 9990; background: rgba(8, 8, 10, 0.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .nlh-suggest-backdrop--open { display: block; } /* ======================================================== Modal panel (full-width drop beneath the header) ======================================================== */ .nlh-suggest-dropdown { display: none; position: fixed; top: var(--nlh-modal-top, 64px); left: 0; right: 0; bottom: auto; z-index: 9999; max-height: calc(100vh - var(--nlh-modal-top, 64px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--pf-bg-base, #111113); border-top: 2px solid var(--pf-blue, #3B7DFF); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6); font-family: var(--pf-font-body, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); } .nlh-suggest-dropdown--open { display: block; } /* ---- Chrome: eyebrow label + close ---- */ .nlh-suggest-chrome { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1180px; margin: 0 auto; padding: 13px 24px; box-sizing: border-box; } .nlh-suggest-eyebrow { font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--pf-blue, #3B7DFF); } .nlh-suggest-close { -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid var(--pf-concrete, #3A3A42); color: var(--pf-steel-light, #8A8A98); width: 30px; height: 30px; line-height: 1; font-size: 20px; border-radius: 0; cursor: pointer; transition: color .12s ease, border-color .12s ease, background-color .12s ease; } .nlh-suggest-close:hover, .nlh-suggest-close:focus { color: var(--pf-white-hot, #fff); border-color: var(--pf-blue, #3B7DFF); background: var(--pf-blue-dim, rgba(59, 125, 255, 0.12)); outline: none; } /* ---- Body wrapper ---- */ .nlh-suggest-body { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 22px; box-sizing: border-box; } /* ======================================================== Results ======================================================== */ .nlh-suggest-results { display: block; } .nlh-suggest-section-label { padding: 14px 10px 6px; font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pf-blue, #3B7DFF); } /* ---- Product row ---- */ .nlh-suggest-product { display: flex; align-items: center; gap: 14px; min-width: 0; /* allow the flex/grid item to shrink so the name can ellipsize */ padding: 11px 10px; cursor: pointer; text-decoration: none; color: var(--pf-chalk, #C8C8D0); border-bottom: 1px solid var(--pf-edge-light, rgba(255, 255, 255, 0.05)); border-left: 2px solid transparent; transition: background-color .12s ease, border-color .12s ease; } .nlh-suggest-product:hover, .nlh-suggest-product.nlh-suggest-item--active { background: var(--pf-blue-dim, rgba(59, 125, 255, 0.12)); border-left-color: var(--pf-blue, #3B7DFF); } .nlh-suggest-product__image { flex-shrink: 0; width: 52px; height: 52px; border-radius: 0; overflow: hidden; background: var(--pf-bg-steel, #1C1C20); border: 1px solid var(--pf-concrete, #3A3A42); } .nlh-suggest-product__image img { width: 100%; height: 100%; object-fit: contain; display: block; } .nlh-suggest-product__no-image { width: 100%; height: 100%; background: var(--pf-bg-steel, #1C1C20); } .nlh-suggest-product__info { flex: 1; min-width: 0; overflow: hidden; } .nlh-suggest-product__name { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--pf-white, #EAEAEF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nlh-suggest-product__name mark { background: none; color: var(--pf-blue-hot, #5B9AFF); font-weight: 700; } .nlh-suggest-product__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 10px; color: var(--pf-steel, #6B6B78); line-height: 1.3; } .nlh-suggest-product__brand { color: var(--pf-steel-light, #8A8A98); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .nlh-suggest-product__sku { color: var(--pf-steel, #6B6B78); letter-spacing: 0.02em; } .nlh-suggest-product__parent { font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 10px; color: var(--pf-steel, #6B6B78); margin-top: 3px; font-style: normal; } .nlh-suggest-product__price { flex-shrink: 0; font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 14px; font-weight: 700; color: var(--pf-white-hot, #fff); white-space: nowrap; padding-left: 8px; } /* ---- Child-match accent (a product whose child SKU/MPN matched) ---- */ .nlh-suggest-child-match { border-left: 2px solid var(--pf-blue, #3B7DFF); background: rgba(59, 125, 255, 0.04); } /* ---- "View all results" ---- */ .nlh-suggest-viewall { display: block; margin-top: 8px; padding: 14px 10px; font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pf-steel-light, #8A8A98); text-align: center; text-decoration: none; cursor: pointer; border: 1px solid var(--pf-concrete, #3A3A42); transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .nlh-suggest-viewall:hover, .nlh-suggest-viewall.nlh-suggest-item--active { background: var(--pf-blue-dim, rgba(59, 125, 255, 0.12)); color: var(--pf-white-hot, #fff); border-color: var(--pf-blue, #3B7DFF); } .nlh-suggest-viewall strong { color: var(--pf-chalk, #C8C8D0); font-weight: 700; } .nlh-suggest-viewall:hover strong, .nlh-suggest-viewall.nlh-suggest-item--active strong { color: var(--pf-white-hot, #fff); } /* ---- Empty / loading ---- */ .nlh-suggest-empty { padding: 28px 10px; text-align: center; font-family: var(--pf-font-mono, 'Space Mono', 'SF Mono', Consolas, monospace); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pf-steel, #6B6B78); } .nlh-suggest-loading { display: flex; align-items: center; justify-content: center; padding: 28px; } .nlh-suggest-spinner { width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: var(--pf-blue, #3B7DFF); border-radius: 50%; animation: nlh-spin .6s linear infinite; } @keyframes nlh-spin { to { transform: rotate(360deg); } } /* ======================================================== Desktop: use the full width with a two-column product grid ======================================================== */ @media (min-width: 768px) { .nlh-suggest-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; align-items: start; } .nlh-suggest-section-label, .nlh-suggest-viewall, .nlh-suggest-empty, .nlh-suggest-loading { grid-column: 1 / -1; } } /* ======================================================== Mobile: full-screen panel beneath the header ======================================================== */ @media (max-width: 767px) { .nlh-suggest-dropdown { bottom: 0; max-height: none; } .nlh-suggest-chrome { padding: 12px 16px; } .nlh-suggest-body { padding: 0 16px 24px; } .nlh-suggest-product { padding: 13px 8px; gap: 14px; } .nlh-suggest-product__image { width: 56px; height: 56px; } .nlh-suggest-product__name { font-size: 14px; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .nlh-suggest-product__meta { font-size: 11px; } .nlh-suggest-product__price { font-size: 15px; } .nlh-suggest-viewall { position: sticky; bottom: 0; background: var(--pf-bg-base, #111113); } } /* Lock background scroll while the modal is open (all sizes) */ body.nlh-suggest-open { overflow: hidden; } /* ======================================================== Search RESULTS PAGE: child-match cards (unchanged surface) These style the white product-grid cards injected on the catalogsearch results page, not the dropdown. Preserved as-is. ======================================================== */ [data-nlh-child-match] { position: relative; } [data-nlh-child-match] > .product-item-info { position: relative; display: block !important; background: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; overflow: visible !important; box-shadow: none !important; } [data-nlh-child-match] > .product-item-info::before { display: none !important; } [data-nlh-child-match] > .product-item-info:hover { z-index: 60; box-shadow: none !important; } [data-nlh-child-match] .product-item-image { position: relative; display: block; background: #fff; border-bottom: 1px solid #e5e5e5; overflow: hidden; } [data-nlh-child-match] .product-item-photo { display: block; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } [data-nlh-child-match] .product-item-photo img, [data-nlh-child-match] .product-item-image img { display: block; width: 100%; height: auto; } [data-nlh-child-match] .product-item-details { width: 100%; margin: 0; left: auto !important; right: auto !important; top: 0; padding: 15px 16px 25px; border: 0 !important; background: #fff; box-sizing: border-box; min-height: 140px; } [data-nlh-child-match] > .product-item-info:hover .product-item-details { position: relative !important; left: auto !important; right: auto !important; top: 44px !important; z-index: auto !important; box-shadow: none !important; } [data-nlh-child-match] .product-item-name, [data-nlh-child-match] .product-item-details .product-item-name { text-align: left; } [data-nlh-child-match] .product-item-inner { left: -1px !important; right: -1px !important; top: -44px !important; } [data-nlh-child-match] .product-item-actions { width: 100%; } [data-nlh-child-match] .product-item-info:hover .product-item-inner, [data-nlh-child-match] .product-item-info:hover .product-item-image .action { opacity: 1; visibility: visible; } .nlh-child-match-overlay { position: absolute; left: 0; right: 0; bottom: 0; width: auto; box-sizing: border-box; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 11px; font-style: italic; line-height: 1.3; padding: 6px 10px; text-align: center; z-index: 5; pointer-events: none; transition: opacity 0.2s ease; } [data-nlh-child-match] .product-item-info:hover .nlh-child-match-overlay { opacity: 0; } /* Child cards: opt out of the theme's absolute hover expansion. Keep details in normal flow so the action bar stays between image and details. */ .products-grid .product-item[data-nlh-child-match] > .product-item-info:hover .product-item-details { position: relative !important; left: auto !important; right: auto !important; top: 44px !important; max-height: none !important; overflow: visible !important; z-index: auto !important; box-shadow: none !important; } .nlh-suggest-section { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .nlh-suggest-section-label--inline { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #888; white-space: nowrap; flex-shrink: 0; } .nlh-suggest-brand-chip, .nlh-suggest-cat-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; cursor: pointer; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.18); } .nlh-suggest-brand-chip { background: rgba(192, 32, 38, 0.12); color: #e0a0a2; border-color: rgba(192, 32, 38, 0.35); } .nlh-suggest-brand-chip:hover, .nlh-suggest-item.nlh-suggest-brand-chip.nlh-suggest-item--active { background: rgba(192, 32, 38, 0.28); color: #fff; text-decoration: none; } .nlh-suggest-cat-chip { background: rgba(255, 255, 255, 0.06); color: #bbb; } .nlh-suggest-cat-chip:hover, .nlh-suggest-item.nlh-suggest-cat-chip.nlh-suggest-item--active { background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none; } .nlh-suggest-brand-chip--no-url { opacity: 0.6; cursor: default; pointer-events: none; } @media (max-width: 767px) { .nlh-suggest-section { padding: 6px 12px; gap: 5px; } .nlh-suggest-brand-chip, .nlh-suggest-cat-chip { font-size: 11px; padding: 3px 8px; } }