/** * ========================================================================= * Avalon Search Suggest — frontend stylesheet * v1.0.3 (Section 14 of the plugin's anatomy) * ========================================================================= * * Scope rule: every selector starts with .avalon-suggest-* and never * touches the host input, the Elementor wrapper, or anything outside * the dropdown's own DOM subtree. Zero global selectors. Zero !important. * * Brand color (#006991) usage: the operator-locked color appears in * EXACTLY ONE rule — the 1px inter-item border between adjacent * .avalon-suggest-option elements. This matches CONTINUATION §7.6: * "brand color usage minimized; used ONLY for the 1px inter-item * border in the suggestion dropdown." Hover and keyboard-active * states use neutral rgba(0,0,0,0.04). * * The brand color is settable per-instance via the inline custom * property `--avalon-suggest-brand-color`, which Section 13's * buildDropdown() sets at runtime from CFG.brand_color (server- * localized from AVALON_SUGGEST_BRAND_COLOR). A wp-config override * of that constant propagates without a CSS rebuild. * * Z-index: 99998. One less than the WP admin bar (99999), one more * than Elementor's sticky-header default (9999). * * Positioning: the dropdown is mounted inside the form wrapper. Desktop * uses position:absolute (top:100%). Mobile (max-width:1023px) switches * to position:fixed with an inline `top` set by Section 13's * positionDropdown() from the input's bounding rect, so it isn't clipped * by the Elementor popup modal (#elementor-popup-modal-27443). v1.0.2 * briefly portaled the dropdown to ; that orphaned it on popup * re-render and was reverted in v1.0.3. * * Accessibility: * - @media (prefers-reduced-motion: reduce) disables transitions. * - @media (forced-colors: active) switches to Windows High Contrast * system tokens (Canvas, CanvasText, Highlight, ButtonBorder). * - Tap targets ≥ 44px on mobile (WCAG 2.5.5 AAA). * - font-size ≥ 16px on the host input prevents iOS zoom-on-focus * (set by the theme; we don't override the input). * * ========================================================================= */ /* ── Dropdown container ─────────────────────────────────────────────── */ .avalon-suggest-dropdown { /* Custom-property tokens. --avalon-suggest-brand-color is set inline by Section 13's JS; the others are static here for the CSS cache. */ --avalon-suggest-brand-color: #006991; /* fallback if JS doesn't set */ --avalon-suggest-bg: #ffffff; --avalon-suggest-text: inherit; --avalon-suggest-hover-bg: rgba(0, 0, 0, 0.04); --avalon-suggest-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); --avalon-suggest-z-index: 99998; /* Mounted inside the form wrapper. Desktop: absolute, just under the input. Mobile (@media below): position:fixed with an inline top set by JS, so the popup can't clip it. v1.0.3 (reverted v1.0.2 portal). */ position: absolute; top: 100%; left: 0; right: 0; z-index: var(--avalon-suggest-z-index); margin: 4px 0 0 0; padding: 0; list-style: none; background: var(--avalon-suggest-bg); color: var(--avalon-suggest-text); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; box-shadow: var(--avalon-suggest-shadow); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; font-size: 15px; line-height: 1.4; } .avalon-suggest-dropdown[hidden] { display: none; } /* ── Options ────────────────────────────────────────────────────────── */ .avalon-suggest-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* ── THE brand-color rule — 1px inter-item border (the ONLY use) ────── */ .avalon-suggest-option + .avalon-suggest-option { border-top: 1px solid var(--avalon-suggest-brand-color); } /* ── Hover + keyboard-active (neutral, NOT brand color) ─────────────── */ .avalon-suggest-option:hover, .avalon-suggest-option[aria-selected="true"] { background-color: var(--avalon-suggest-hover-bg); } /* ── Focus-visible: brand-color outline, no background fill ─────────── */ .avalon-suggest-option:focus-visible { outline: 2px solid var(--avalon-suggest-brand-color); outline-offset: -2px; } /* ── Label (flexes, truncates with ellipsis) ────────────────────────── */ .avalon-suggest-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Matched-prefix emphasis (bold + brand-color text, transparent bg) */ .avalon-suggest-option-label mark { background: transparent; color: var(--avalon-suggest-brand-color); font-weight: 700; padding: 0; } /* ── Type badge (small, subtle, right-aligned) ──────────────────────── */ .avalon-suggest-option-type { flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.55; padding: 2px 6px; border-radius: 2px; background: rgba(0, 0, 0, 0.05); } .avalon-suggest-option-type:empty { display: none; } /* ── Mobile / tablet (max-width: 1023px) ────────────────────────────── */ @media (max-width: 1023px) { .avalon-suggest-dropdown { /* Stay ABSOLUTE relative to the form wrapper (NOT fixed): a fixed child of the Elementor popup's transformed ancestor lands off-screen. positionDropdown() sets top/bottom inline and may add .avalon-suggest-dropup to flip above the input. v1.0.3. */ position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0 0; max-height: 60vh; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Drop-up variant: anchored to the input's top edge, opening upward. */ .avalon-suggest-dropdown.avalon-suggest-dropup { top: auto; bottom: 100%; margin: 0 0 4px 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15); } .avalon-suggest-option { min-height: 44px; /* WCAG 2.5.5 Level AAA tap target */ padding: 12px 16px; font-size: 16px; /* matches host input; consistent rhythm */ } .avalon-suggest-option-type { font-size: 12px; } } /* ── Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .avalon-suggest-dropdown { transition: none; } } /* ── Forced colors (Windows High Contrast Mode) ─────────────────────── */ @media (forced-colors: active) { .avalon-suggest-dropdown { border: 1px solid ButtonBorder; background: Canvas; color: CanvasText; } .avalon-suggest-option + .avalon-suggest-option { /* Override the brand-color rule under forced-colors so the system Border token is honored rather than a fixed teal. */ border-top-color: ButtonBorder; } .avalon-suggest-option:hover, .avalon-suggest-option[aria-selected="true"] { background: Highlight; color: HighlightText; } .avalon-suggest-option-label mark { background: Highlight; color: HighlightText; forced-color-adjust: none; } } /* ═══════════════════════════════════════════════════════════════════════ * Clear ("X") button — cross-browser (v1.0.4) * ═══════════════════════════════════════════════════════════════════════ * Chrome/Edge/Safari paint a native clear button via the WebKit-only * ::-webkit-search-cancel-button pseudo-element. Firefox has no * equivalent, so the X never appeared there. We suppress the native one * (so Chrome doesn't show two) and render our own button, injected by * Section 13's JS into .elementor-search-form__container. It is shown only * when the input has text and sits just left of the submit icon. * * Scope note: the .elementor-search-form__* selectors below are the ONE * place this stylesheet reaches outside .avalon-suggest-*. Justified * because the native pseudo-element can only be suppressed on the host * input itself, and the custom button has to share the input's container. * Still zero !important. * ─────────────────────────────────────────────────────────────────────── */ /* Suppress the native WebKit/Blink clear button so it doesn't duplicate the custom one in Chrome/Edge/Safari. */ .elementor-search-form__input::-webkit-search-cancel-button, .elementor-search-form__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* The input's container is a flex row [input][submit]. Make it the positioning context for the absolutely-placed clear button. JS also promotes it at runtime as a belt-and-braces guard. */ .elementor-search-form__container { position: relative; } /* Custom clear button. Hidden by default; JS toggles [hidden] off when the field has text. Anchored to the right edge of the input, offset left of the submit icon so the two never overlap. */ .avalon-suggest-clear { position: absolute; top: 50%; /* Distance from the input's right edge to the clear button. ONE number, CSS-only — JS no longer sets any positioning variable (the old measure-the-submit-button approach was unreliable: getBoundingClientRect could return an oversized width before Elementor finished sizing the submit button, producing a huge `right` that flung the X to the LEFT over the typed text). Default 28px sits the X flush against this header's icon-skin submit button. Lower it to move the X right (toward/ over the icon); raise it to move the X left (more gap from the icon). */ right: var(--avalon-suggest-clear-right, 30px); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.18); color: #ffffff; cursor: pointer; line-height: 1; z-index: 2; -webkit-tap-highlight-color: transparent; transition: background-color 0.12s ease; } .avalon-suggest-clear[hidden] { display: none; } .avalon-suggest-clear:hover { background: rgba(0, 0, 0, 0.32); } .avalon-suggest-clear:focus-visible { outline: 2px solid var(--avalon-suggest-brand-color, #006991); outline-offset: 2px; } /* The "×" glyph. Width/height tuned by operator to center the mark — do NOT normalize these to square; the stretched ratio is intentional. */ .avalon-suggest-clear svg { width: 23px; height: 12px; display: block; pointer-events: none; /* clicks always land on the button, not the path */ } /* Mobile / tablet: larger tap target (WCAG 2.5.5) and a touch more room. */ @media (max-width: 1023px) { .avalon-suggest-clear { width: 28px; height: 28px; /* Inherits `right` from the base rule. If the popup's submit button is a different width than desktop and the X isn't flush, override just for this breakpoint, e.g.: --avalon-suggest-clear-right: 44px; */ } .avalon-suggest-clear svg { width: 27px; height: 14px; } } /* Forced colors (Windows High Contrast). */ @media (forced-colors: active) { .avalon-suggest-clear { background: ButtonFace; color: ButtonText; border: 1px solid ButtonBorder; } } /* ── End of file ────────────────────────────────────────────────────── */