/* [claude:opus-4.7-1m][hurc:v0.7.0] * ============================================================================ * search-popup.css — Neural-LLM dark-theme styling for mod_geekelasticsearch * ============================================================================ * * PURPOSE * The Geek ElasticSearch JoomlaGeek module (mod_geekelasticsearch, ID 140 at * nav `search` position) ships with a vendor look that assumes a light theme: * the `.search-icon` block is painted #F4F4F4, the popup uses Remodal's * default white card, the input field renders as a stock Bootstrap-2 light * form-control, and the result tiles read as plain links. None of this * matches the nllm dark template, and the icon's `#F4F4F4` background reads * as a glaring rectangle against the navy header. * * This file owns the dark-theme override for every surface the module emits. * It loads globally (the search icon is in the nav on every page) and is * structured so all colors derive from `--nllm-*` brand tokens — no literals. * * ARCHITECTURE * Module markup hierarchy (from tmpl/default.php + tmpl/_form.php + * helper.php::getIcon()): * * #geek-search-140.geek-search-wrapper * └─ .search-icon (trigger; vendor paints background inline) * ├─ (vendor PNG glyph) * └─ (icon_text label, currently "Search") * * .remodal-overlay (Remodal backdrop, body-level) * .remodal-bg (Remodal body-content blur layer) * .remodal#geek-search-modal-140 * └─ .geek-search * ├─

(modal title) * └─ .search-form * └─
* └─ .search-box.control-group * └─ .input-group.input-append.input-large * ├─ * └─ .input-group-addon.add-on (search submit) * └─ .search-results (XHR-populated result tiles) * * We address those layers in this order: nav icon → modal chrome → form * field → results list → close button → mobile-first responsive tweaks. * * VENDOR INLINE STYLE COEXISTENCE * helper.php::getIcon() registers an inline addStyleDeclaration() that paints * `#geek-search-140 .search-icon { padding:Xpx; background:; }`. * Two complementary mitigations are in place: * 1. Module params updated via DB: icon_bgcolor='transparent', * icon_padding='0' — so the vendor inline styles become harmless. * 2. This file additionally uses `body #geek-search-` prefixes where icon * rules need to win against the vendor inline declaration (specificity * 0,1,1,1 beats vendor's 0,1,1,0). Avoids `!important` noise. * * DEPENDENCIES * - templates/nllm/css/brand/tokens.css — all --nllm-* tokens * - templates/nllm/css/template.css — body/heading defaults * * LOAD ORDER * Loaded globally via $wa->registerAndUseStyle('nllm.search.popup', ...) in * templates/nllm/index.php, AFTER nllm.tokens + nllm.template, BEFORE module * inline styles (vendor uses Document::addStyleDeclaration which lands in * , but this file's body-prefixed selectors carry higher specificity). * * MOBILE-FIRST * Base rules target 320px viewports. Tablet (≥600px) and desktop (≥1024px) * widen the modal card and tighten the icon row spacing. * ============================================================================ */ /* ============================================================================ * SECTION 1 — Nav icon trigger * ---------------------------------------------------------------------------- * The element the user clicks to open the search modal. Lives inside the nav * bar (.neural-nav__search-cell — owned by the topbar layout, not this file). * Vendor markup:
Search
. * * Goals: * - Erase the vendor's light-grey background pill (handled by DB param + * these higher-specificity overrides). * - Make the trigger feel clickable: subtle hover bg, brand-violet focus * ring, pointer cursor, comfortable 44px tap target. * - Recolor the PNG glyph (vendor ships a dark search.png — we apply a CSS * filter to lighten it to --nllm-text-muted) so it reads on dark nav. * ============================================================================ */ body .geek-search-wrapper .search-icon, body [id^="geek-search-"] .search-icon { /* Reset vendor inline styles defensively. Body prefix wins specificity. */ display: inline-flex; align-items: center; gap: var(--nllm-space-xs); padding: var(--nllm-space-xs) var(--nllm-space-sm); background: transparent; border: 1px solid transparent; border-radius: var(--nllm-radius-sm); cursor: pointer; min-height: 36px; transition: background-color 120ms ease, border-color 120ms ease; } body .geek-search-wrapper .search-icon:hover, body [id^="geek-search-"] .search-icon:hover { /* Subtle violet-tinted hover — reads as interactive without overpowering. */ background-color: color-mix(in srgb, var(--nllm-violet) 12%, transparent); border-color: color-mix(in srgb, var(--nllm-violet) 30%, transparent); } body .geek-search-wrapper .search-icon:focus-visible, body [id^="geek-search-"] .search-icon:focus-visible { outline: 2px solid var(--nllm-violet-soft); outline-offset: 2px; } body .geek-search-wrapper .search-icon img, body [id^="geek-search-"] .search-icon img { /* Vendor ships a dark glyph PNG; CSS filter lifts it to a near-token light grey that matches --nllm-text-muted (#cbd5e1). brightness>1 inverts the dark pixels; saturate(0) strips residual color. */ width: 18px; height: 18px; filter: invert(0.85) brightness(1.1) saturate(0); opacity: 0.85; } body .geek-search-wrapper .search-icon:hover img, body [id^="geek-search-"] .search-icon:hover img { opacity: 1; } body .geek-search-wrapper .search-icon span, body [id^="geek-search-"] .search-icon span { /* The "Search" label. Module params already set color to #cbd5e1 (matches --nllm-text-muted) — we re-assert via token so the source of truth is this file, not the DB. */ color: var(--nllm-text-muted); font-family: var(--nllm-font-sans); font-size: var(--nllm-text-sm); font-weight: 500; line-height: 1; letter-spacing: 0.01em; } /* ============================================================================ * SECTION 2 — Remodal popup chrome * ---------------------------------------------------------------------------- * Remodal is the lightbox library mod_geekelasticsearch uses to present the * search modal. Vendor ships a white card + light overlay. We re-paint to the * dark-theme surface stack: deep-blue backdrop with low-alpha tint, near-black * modal card with violet-tinged border + soft shadow. * * Selectors that follow target the *vendor* Remodal classes (.remodal, * .remodal-overlay, .remodal-bg, .remodal-close) so we don't fight a moving * target if the module bumps its template. * ============================================================================ */ body .remodal-overlay { /* Backdrop tint — dark-navy with high alpha gives a focused modal feel without making the rest of the page invisible. */ background-color: rgba(15, 23, 42, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body .remodal { /* Modal card. */ background-color: var(--nllm-surface); color: var(--nllm-text); border: 1px solid var(--nllm-surface-edge); border-radius: var(--nllm-radius-md); box-shadow: var(--nllm-shadow-lg); padding: var(--nllm-space-lg); max-width: min(92vw, 720px); } body .remodal .geek-search { background-color: transparent; color: var(--nllm-text); } body .remodal .geek-search h2, body .remodal .geek-search h3 { /* Modal title — sits above the search input. Use h3 token size, not the larger marketing h2 (we're inside a modal, not on a landing page). */ color: var(--nllm-text); font-family: var(--nllm-font-sans); font-size: var(--nllm-text-h3); font-weight: 600; margin: 0 0 var(--nllm-space-md); line-height: 1.2; } body .remodal .geek-search a { /* All anchors inside the modal (result links, taxonomy chips) use the cyan accent so they're discoverable against the violet-tinted card. */ color: var(--nllm-cyan-bright); text-decoration: none; transition: color 120ms ease; } body .remodal .geek-search a:hover { color: var(--nllm-cyan-pale); text-decoration: underline; } /* ============================================================================ * SECTION 3 — Search input + submit button * ---------------------------------------------------------------------------- * The form-field cluster inside the modal. Vendor markup uses Bootstrap-2 * input-group classes — we re-style them as a dark-theme pill with the search * button rendered as a brand-violet adornment on the right. * ============================================================================ */ body .remodal .search-form { margin-bottom: var(--nllm-space-md); } body .remodal .search-box.control-group { margin: 0; } body .remodal .input-group.input-append.input-large { /* Field cluster — flex layout so the input flexes and the submit button sits flush on the right. */ display: flex; align-items: stretch; gap: 0; width: 100%; border-radius: var(--nllm-radius-sm); overflow: hidden; background-color: var(--nllm-surface-deep); border: 1px solid var(--nllm-surface-edge); transition: border-color 120ms ease, box-shadow 120ms ease; } body .remodal .input-group.input-append.input-large:focus-within { /* Move the focus ring to the wrapper so it draws around the whole cluster (input + button) instead of just the bare input. */ border-color: var(--nllm-violet-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nllm-violet) 25%, transparent); } body .remodal .input-group input.form-control[name="searchword"], body .remodal .input-group input.form-control[name="searchword"]:focus, body .remodal .input-group input.form-control[name="searchword"]:hover, body .remodal .input-group input.form-control[name="searchword"]:active { /* Vendor ships a `:focus` rule at equal specificity that paints the field white the moment it's focused — the modal opens already-focused, so this is the user's first-impression bug. `!important` is the escape hatch because the vendor declaration is equal-specificity loaded-after. */ flex: 1 1 auto; min-width: 0; /* lets the input shrink inside flex */ background-color: transparent !important; color: var(--nllm-text) !important; border: 0; box-shadow: none; padding: var(--nllm-space-sm) var(--nllm-space-md); font-family: var(--nllm-font-sans); font-size: var(--nllm-text-body); line-height: 1.4; outline: none; } body .remodal .input-group input.form-control[name="searchword"]::placeholder { /* Placeholder uses the subtle-text token so the hint doesn't compete with the actual entered text. */ color: var(--nllm-text-subtle); opacity: 1; /* WebKit defaults to 0.54 */ } body .remodal .input-group input.form-control[name="searchword"]:-webkit-autofill { /* Chrome autofill paints a bright yellow background by default — neutralize it so autofilled queries stay on-theme. */ -webkit-text-fill-color: var(--nllm-text); -webkit-box-shadow: 0 0 0 1000px var(--nllm-surface-deep) inset; transition: background-color 5000s ease-in-out 0s; } body .remodal .input-group .input-group-addon.add-on { /* Vendor's `.geek-search-wrapper .search-form .search-box .input-group > span` rule paints this Bootstrap-3-success-green (rgb(92,184,92)) at equal specificity (0,4,1) — since vendor's sheet loads after ours, we lose the source-order tiebreaker. `!important` is the surgical escape hatch. */ display: inline-flex; align-items: center; justify-content: center; background-color: var(--nllm-violet) !important; color: var(--nllm-text) !important; border: 0; padding: 0 var(--nllm-space-md); cursor: pointer; min-width: 48px; transition: background-color 120ms ease; } body .remodal .input-group .input-group-addon.add-on:hover { background-color: var(--nllm-violet-soft) !important; } body .remodal .input-group .input-group-addon.add-on img, body .remodal .input-group .input-group-addon.add-on i { /* Whether the addon ships an or an icon, lift the color so the glyph reads on the violet pill. */ filter: brightness(0) invert(1); opacity: 0.95; } /* ============================================================================ * SECTION 4 — Result tiles (.search-results) * ---------------------------------------------------------------------------- * XHR-populated list of matches. Vendor outputs each result as a stacked link * + snippet block. We give each tile a card treatment — surface-soft bg, * rounded corners, subtle violet hover lift — so results feel browsable. * ============================================================================ */ body .remodal .search-results { margin-top: var(--nllm-space-md); max-height: 60vh; /* container scroll, not body scroll */ overflow-y: auto; padding-right: var(--nllm-space-xs); /* breathing room for scrollbar */ } body .remodal .search-results::-webkit-scrollbar { width: 8px; } body .remodal .search-results::-webkit-scrollbar-track { background-color: transparent; } body .remodal .search-results::-webkit-scrollbar-thumb { background-color: var(--nllm-surface-edge); border-radius: var(--nllm-radius-full); } body .remodal .search-results > * { /* Each result tile. Vendor wraps results in varied tags (.result-item, .search-result, direct ) depending on layout — universal-child selector catches them all. */ display: block; padding: var(--nllm-space-sm) var(--nllm-space-md); margin-bottom: var(--nllm-space-xs); background-color: var(--nllm-surface-soft); border: 1px solid transparent; border-radius: var(--nllm-radius-sm); color: var(--nllm-text); text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease; } body .remodal .search-results > *:hover { background-color: color-mix(in srgb, var(--nllm-violet) 14%, var(--nllm-surface-soft)); border-color: color-mix(in srgb, var(--nllm-violet) 35%, transparent); transform: translateX(2px); /* tiny lift hints at clickability */ } body .remodal .search-results h3, body .remodal .search-results h4, body .remodal .search-results .result-title { color: var(--nllm-text); font-size: var(--nllm-text-body); font-weight: 600; margin: 0 0 var(--nllm-space-xs); line-height: 1.3; } body .remodal .search-results .result-snippet, body .remodal .search-results .result-description, body .remodal .search-results p { color: var(--nllm-text-muted); font-size: var(--nllm-text-sm); margin: 0; line-height: 1.5; } body .remodal .search-results em, body .remodal .search-results strong { /* Search-term highlights in snippets — paint as cyan accent so the matched phrase pops in the dark tile. */ color: var(--nllm-cyan-bright); background-color: transparent; font-style: normal; font-weight: 600; } body .remodal .search-results .no-results, body .remodal .geek-search .no-results-message { /* Empty-state copy when ES returns zero hits. */ color: var(--nllm-text-subtle); font-style: italic; padding: var(--nllm-space-md); text-align: center; } /* ============================================================================ * SECTION 5 — Close button (.remodal-close) * ---------------------------------------------------------------------------- * Remodal injects a default X-close at top-right. Vendor ships it as a dark * glyph against the white card — invisible on our dark card. Repaint as a * subtle light-grey X that brightens on hover. * ============================================================================ */ body .remodal-close { color: var(--nllm-text-subtle); transition: color 120ms ease, background-color 120ms ease; border-radius: var(--nllm-radius-full); width: 36px; height: 36px; line-height: 36px; text-align: center; } body .remodal-close::before { color: inherit; font-size: 20px; line-height: 36px; } body .remodal-close:hover, body .remodal-close:focus { color: var(--nllm-text); background-color: color-mix(in srgb, var(--nllm-text) 8%, transparent); } /* ============================================================================ * SECTION 6 — Search filters / taxonomy chips (optional sidebar) * ---------------------------------------------------------------------------- * Only renders when `show_taxonomy=1`. Tucked at the top of the modal as a * row of filter pills (category facets, content-type chips). Style as muted * outline buttons so they don't compete with the result tiles below. * ============================================================================ */ body .remodal .search-filters { display: flex; flex-wrap: wrap; gap: var(--nllm-space-xs); margin-bottom: var(--nllm-space-md); padding-bottom: var(--nllm-space-md); border-bottom: 1px solid var(--nllm-surface-edge); } body .remodal .search-filters .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nllm-space-xs); } body .remodal .search-filters .filter-group label { color: var(--nllm-text-subtle); font-size: var(--nllm-text-sm); font-weight: 500; margin: 0 var(--nllm-space-xs) 0 0; } body .remodal .search-filters select, body .remodal .search-filters .btn-group .btn { background-color: var(--nllm-surface-deep); color: var(--nllm-text); border: 1px solid var(--nllm-surface-edge); border-radius: var(--nllm-radius-sm); padding: var(--nllm-space-xs) var(--nllm-space-sm); font-size: var(--nllm-text-sm); cursor: pointer; } body .remodal .search-filters .btn-group .btn:hover, body .remodal .search-filters .btn-group .btn.active { background-color: var(--nllm-violet); border-color: var(--nllm-violet); color: var(--nllm-text); } /* ============================================================================ * SECTION 6b — Inline filter rows (.control-group.filter-list.filter-*) * ---------------------------------------------------------------------------- * The form-level filter rows rendered by _formfields.php — "Filter by type", * "Filter by date", "Filter by categories". Vendor markup is: * * .control-group.filter-list.filter-types * ├── .control-label >