/* --------------------------------------------------------------- styling for the Numinix agency homepage. --------------------------------------------------------------- The Seekmodo universal suggest widget is a Web Component. Its default look is a 640 px bordered card -- fine for a typical storefront dropdown, wrong for our full-screen `#search-box` overlay where the rows want to read as part of the overlay itself, not as a popup floating over it. Customisation surface --------------------- The bundle exposes two themable handles: 1. CSS custom properties on the host (e.g. `--seekmodo-suggest-bg`, see the prop block below) for coarse-grained colour/shape tokens. 2. `::part()` selectors on the shadow internals (`wrap | group | group-title | row | thumb | name | price | badge | view-all`) for layout-level styling. We use both. Custom props for the inherited tokens (bg, radius, hover, max-height, row padding), ::part() for the things the props don't reach (centred max-width column, divider lines, thumbnail framing, font-weight, badge pill colour, etc.). Scope ----- Everything is scoped to `#search-box seekmodo-suggest` so any future inline use of the widget elsewhere on the site (e.g. a shop-page sidebar instance) keeps its default chrome. Numinix.ca ships the same `nmn/` template, so this picks up there too. */ #search-box seekmodo-suggest { /* -------- Token-level theming via the documented props ----- */ /* Card chrome off -- the overlay backdrop is already white, a second bordered card would read as visual noise. */ --seekmodo-suggest-bg: transparent; --seekmodo-suggest-border: transparent; --seekmodo-suggest-radius: 0; --seekmodo-suggest-shadow: none; /* Numinix brand palette (sampled live from the homepage): #068FCE primary blue (h1, .btn, .owl-dot.active) #057fb8 blue 600 (hover variant, derived) #57C1F2 blue 300 (carousel dots, soft accents) #171717 ink (h2, body link) #525252 ink muted (secondary copy) #f4f4f5 hover surface We expose them as locals so each rule below stays readable. */ --nmx-blue: #068FCE; --nmx-blue-strong: #057fb8; --nmx-blue-50: rgba(6, 143, 206, 0.06); --nmx-blue-100: rgba(6, 143, 206, 0.12); --nmx-ink: #171717; --nmx-ink-muted: #525252; --nmx-border: #e5e7eb; /* Suggestion section gets real vertical room -- 75 vh matches the legacy ul.ui-autocomplete dropdown which had no cap. */ --seekmodo-suggest-max-height: 75vh; /* Group titles read as quiet eyebrows above each section. Tighter tracking + uppercase, matching the agency footer eyebrows that already use this style. */ --seekmodo-suggest-group-color: var(--nmx-ink-muted); --seekmodo-suggest-group-size: 0.7rem; /* Row hover -- agency blue at 6%/12% opacity for a subtle tint that still says "this is selectable". */ --seekmodo-suggest-row-hover: var(--nmx-blue-50); --seekmodo-suggest-row-active: var(--nmx-blue-100); /* Pull rows out so the 16-18 px row text breathes. */ --seekmodo-suggest-row-padding: 0.7rem 1rem; /* Thumb size matches the legacy /numinix_seekmodo_suggest.php 60×60 image renderer so the indexer's image_url crops align with the storefront's image grid expectations. */ --seekmodo-suggest-thumb-size: 48px; /* -------- Host typography (inherits into shadow row text) -- */ font-family: Manrope, "Segoe UI", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.45; color: var(--nmx-ink); /* The widget anchors `position: fixed` to the search input and inline-stamps a width matching the input. We let that win and centre the inner column via ::part(wrap) below so the section reads as a centred homepage block, not an input-attached dropdown. */ pointer-events: auto; } /* -------- Inner column constraint + dividers --------------------- The bundle stamps `part="wrap"` on the scrollable inner div. We narrow it to a readable 720 px column and centre it, so the widget's inline-stamped 1175 px host width doesn't drag rows out to the screen edges on desktop. */ #search-box seekmodo-suggest::part(wrap) { max-width: 720px; margin: 0 auto; padding: 0.5rem 0 0; background: transparent; border: none; border-radius: 0; box-shadow: none; /* Modernise the scrollbar -- thin overlay on hover, invisible when at rest, so the column doesn't carry a desktop track gutter on macOS-style trackpads. */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; } /* -------- Section eyebrows ("SUGGESTIONS", "TRENDING", ...) ------ */ #search-box seekmodo-suggest::part(group-title) { text-align: left; padding: 1.1rem 1rem 0.45rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--nmx-ink-muted); border-top: 1px solid var(--nmx-border); margin-top: 0.25rem; } /* No top border on the very first eyebrow inside the column. */ #search-box seekmodo-suggest::part(wrap) > :first-child::part(group-title), #search-box seekmodo-suggest::part(group):first-of-type::part(group-title) { border-top: none; margin-top: 0; padding-top: 0.25rem; } /* -------- Rows ---------------------------------------------------- */ #search-box seekmodo-suggest::part(row) { border-radius: 8px; margin: 2px 4px; padding: 0.6rem 0.9rem; transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; font-size: 0.95rem; color: var(--nmx-ink); } #search-box seekmodo-suggest::part(row):hover, #search-box seekmodo-suggest::part(row row-active) { background: var(--nmx-blue-50); color: var(--nmx-blue-strong); } /* -------- Product thumbnails ------------------------------------- */ #search-box seekmodo-suggest::part(thumb) { border: 1px solid var(--nmx-border); border-radius: 8px; background: #fafafa; transition: border-color 120ms ease; } #search-box seekmodo-suggest::part(row):hover::part(thumb) { border-color: var(--nmx-blue); } /* Empty/broken-image placeholder (set by jscript_seekmodo_product_row.js when the indexer points at a missing image, or when image_url isn't on the doc at all). Stamp a tiny inline-SVG image-frame glyph so an empty cell reads as "no image" rather than "image still loading". */ #search-box seekmodo-suggest::part(thumb thumb--empty) { background-color: #f4f4f5; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 48% 48%; border-color: var(--nmx-border); opacity: 0.85; } /* -------- Product name + meta ------------------------------------ */ #search-box seekmodo-suggest::part(name) { font-weight: 600; } /* -------- Price ---------------------------------------------------- */ #search-box seekmodo-suggest::part(price) { color: var(--nmx-ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; } /* -------- Badge (trending counts, category counts) --------------- */ #search-box seekmodo-suggest::part(badge) { background: var(--nmx-blue-100); color: var(--nmx-blue-strong); font-weight: 600; font-size: 0.72rem; padding: 0.1em 0.55em; } /* -------- "View all N results" CTA -------------------------------- */ #search-box seekmodo-suggest::part(view-all) { margin-top: 0.6rem; padding: 0.85rem 1rem; border-top: 1px solid var(--nmx-border); color: var(--nmx-blue); font-weight: 700; letter-spacing: 0.02em; transition: color 120ms ease, background-color 120ms ease; } #search-box seekmodo-suggest::part(view-all):hover { color: var(--nmx-blue-strong); background: var(--nmx-blue-50); } /* -------- Powered-by footer (slotted by jscript_seekmodo_powered_by.js) The bundle renders any host children with `slot="footer"` inside the shadow `` at the bottom of `.wrap`. We inject a small there at runtime; this rule styles it. The wrap is the 75vh scrollable area, so a flow-positioned footer would only be visible after scrolling to the very bottom. Stick it to the bottom of the wrap with `position: sticky` so the attribution is always anchored to the bottom of the visible dropdown -- with a translucent backdrop so rows scrolling underneath stay legible. */ #search-box seekmodo-suggest .seekmodo-powered-by { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.5rem -4px 0; padding: 0.75rem 1rem; color: var(--nmx-ink-muted); text-decoration: none; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-top: 1px solid var(--nmx-border); opacity: 0.85; transition: opacity 120ms ease, color 120ms ease; } #search-box seekmodo-suggest .seekmodo-powered-by:hover { opacity: 1; color: var(--nmx-ink); } #search-box seekmodo-suggest .seekmodo-powered-by .seekmodo-powered-by__label { text-transform: none; letter-spacing: 0.01em; } #search-box seekmodo-suggest .seekmodo-powered-by .seekmodo-powered-by__logo { height: 28px; width: auto; display: block; /* The logo is a gradient SVG -- don't tint it. */ } /* -------- Hide the static "Search plugins and services" label ---- The agency template renders a