carries an inline padding via the * `qsas-result--custom-pad` marker class. In that case the outer *

's own 1em 1.1em padding would STACK on top of the chosen * value, defeating the override. Zeroing it here lets the * admin's choice be the sole source of card padding. Layouts * WITHOUT the override (no marker class) keep the default 1em 1.1em. * * :has() is supported in all evergreen browsers since 2023; older * browsers fall through to the default padding which is a safe * graceful degradation. */ .qsas-results__item:has(> .qsas-result--custom-pad) { padding: 0; } .qsas-results__item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .qsas-results__item { transition: none; } .qsas-results__item:hover { transform: none; } } /* ------------------------------------------------------------------------- * Result card * --------------------------------------------------------------------- */ .qsas-result { display: flex; gap: 1em; align-items: flex-start; min-width: 0; max-width: 100%; /* Break long unbreakable strings (URLs, IDs, long meta values * without spaces) instead of forcing the card to grow wider. * Cascades to all text descendants. */ overflow-wrap: anywhere; word-break: break-word; /* v1.9.54 — Container query context. Distinct name from the * custom-layout card (qsas-card) so the two render paths can * have independent breakpoints without leaking rules into * each other. Used by the fields-grid 480-cqi rule below. */ container-type: inline-size; container-name: qsas-card-default; } /* Defensive image bound — anywhere inside the card, an can't * grow wider than its column. Prevents featured images and inline * images in excerpts from busting the layout. */ .qsas-result img, .qsas-result svg { max-width: 100%; height: auto; } /* Thumbnail: hard-capped at 120×120 on every viewport, with object-fit * cover so non-square source images don't stretch. */ .qsas-result__thumb { flex: 0 0 120px; width: 120px; height: 120px; display: block; overflow: hidden; border-radius: 8px; background: #f6f7f7; } .qsas-result__thumb-img { display: block; width: 120px; height: 120px; max-width: 120px; max-height: 120px; object-fit: cover; } /* v1.9.41 — When the admin set @size:N on a featured_image leaf * in the builder, the renderer adds the `--sized` modifier class * and an inline `style="flex: 0 0 N%; width: N%; max-width: N%;"` * on the wrapper. These rules drop the fixed 120-px height so the * image scales by aspect ratio, plus rewrite the inner * so it fills the resized wrapper and uses `contain` (don't crop * what's now visible after the rescale). * * A 400-px safety cap on max-height stops a tall image (e.g. a * portrait logo) from blowing out the card vertically when the * admin picks a large size; the user can override that on their * own theme if they want unconstrained height. */ /* v1.9.56 — Per-device image sizing via CSS custom properties. * * The image_size_style() helper emits one to three inline CSS * variables on the element: * * --qsas-sz → desktop (card > 768cqi) * --qsas-sz-tab → tablet (481-768cqi) * --qsas-sz-mob → mobile (≤ 480cqi) * * Each rule's `var()` fallback chain handles missing values: if * tablet isn't specified, tablet uses desktop; if mobile isn't * specified, mobile cascades through tablet to desktop. This is * what makes the old `@size:N` (single value) keep working * unchanged — without --sz-tab or --sz-mob set, all three * breakpoints resolve to --sz. * * NO floor / NO clamp — the admin's percentage is rendered * exactly as authored. The earlier 40-px floor was removed at * the admin's explicit request: if you ask for 5% on a 360-cqi * mobile card, you get 18px. */ .qsas-result__thumb--sized { flex-basis: var(--qsas-sz); width: var(--qsas-sz); height: auto; max-height: 400px; max-width: 100%; } .qsas-result__thumb--sized .qsas-result__thumb-img { width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; } @container qsas-card (max-width: 768px) { .qsas-result__thumb--sized { flex-basis: var(--qsas-sz-tab, var(--qsas-sz)); width: var(--qsas-sz-tab, var(--qsas-sz)); } } @container qsas-card (max-width: 480px) { .qsas-result__thumb--sized { flex-basis: var(--qsas-sz-mob, var(--qsas-sz-tab, var(--qsas-sz))); width: var(--qsas-sz-mob, var(--qsas-sz-tab, var(--qsas-sz))); } } .qsas-result__body { min-width: 0; } .qsas-result__title { margin: 0 0 0.35em; font-size: 1.25em; line-height: 1.3; } .qsas-result__title a { color: inherit; text-decoration: none !important; transition: opacity 0.15s ease; } /* No underline on hover/focus — many themes inject one via * `a:hover { text-decoration: underline }` globally, so we use * !important to defeat that. Visual feedback via opacity dim * instead, which is subtler and doesn't disrupt the layout. */ .qsas-result__title a:hover, .qsas-result__title a:focus { text-decoration: none !important; opacity: 0.75; } .qsas-result__meta { display: flex; flex-wrap: wrap; gap: 0.75em; font-size: 0.85em; opacity: 0.75; margin: 0 0 0.5em; } .qsas-result__excerpt { margin: 0 0 0.6em; line-height: 1.55; } .qsas-result__excerpt p:last-child { margin-bottom: 0; } .qsas-result__taxonomies { font-size: 0.85em; opacity: 0.85; margin: 0 0 0.6em; } /* Custom fields layout — a 2-column grid where each cell holds one field * (inline bold label + value). Items flow row-by-row (2-by-2). The Call Now * block is a sibling that naturally sits below this grid on its own row. * * On narrow viewports the grid collapses to a single column so very small * phone screens don't get cramped two-line wraps in each cell. */ .qsas-result__fields-grid { margin: 0 0 0.8em; font-size: 0.92em; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5em; row-gap: 0.5em; } .qsas-result__field { min-width: 0; /* allow long values to truncate / wrap inside the cell */ line-height: 1.45; } .qsas-result__cf-label { font-weight: 700; margin-right: 0.3em; /* inline-flow with the value so the colon-and-value follow on the same * line, only wrapping when the value is genuinely too long for the cell. */ } .qsas-result__cf-value { /* inherits inline flow */ } @container qsas-card-default (max-width: 480px) { .qsas-result__fields-grid { grid-template-columns: 1fr; row-gap: 0.35em; } } /* Theme-override fallback — older copies of result-item.php in custom * themes still emit the old

and: pairs). Keep these rules so those overrides don't * suddenly render unstyled when the plugin is upgraded. The current * built-in template uses the new .qsas-result__fields-grid structure * above instead. */ .qsas-result__custom-fields { margin: 0 0 0.6em; font-size: 0.92em; display: grid; grid-template-columns: max-content 1fr; gap: 0.2em 0.6em; } .qsas-result__custom-fields--no-labels { grid-template-columns: 1fr; } /* ========================================================================== * Custom Card Layout (DSL output) * * Emitted by Frontend\CardLayout::render() when the user has authored a * layout in the "Custom Card Layout" textarea on the Result Display tab. * * Two container primitives: * .qsas-layout-row — horizontal flex (children side by side, wrap on small) * .qsas-layout-col — vertical flex (children stacked top to bottom) * * Modifier classes the parser emits: * .qsas-layout-col--fixed — column hugs its content (used for featured_image) * .qsas-layout-col--1 / --2 / --3 — proportional weights (flex-grow values) * * Themes can override gap/padding/etc on these classes without touching the * layout logic — these rules are intentionally minimal so they don't fight * theme styles. * ========================================================================== */ .qsas-result--custom-layout { /* Custom layouts manage their own internal flow — drop the article's * default flex (which was logo-on-left, body-on-right for the built-in * card) so the user's DSL is in charge. */ display: block; /* v1.9.43 — Containment context so descendants can size with * `cqw` units (1cqw = 1% of this card's inline size). The * @size:N feature on featured_image uses this so the image is * always sized relative to the CARD width, not the immediate * flex column — which fails to resolve percentages when the * column is `Hug content` (flex: 0 0 auto), causing the column * to balloon to fit the full-size image's intrinsic width. */ container-type: inline-size; container-name: qsas-card; } /* v1.9.59 — Per-device slots. The custom-layout article emits one * to three .qsas-card-slot wrappers, each carrying classes for the * device(s) it serves. CSS @container queries on the card's own * inline-size show/hide each slot so only one is visible at a time. * * Default: all slots hidden. Each device's @container rule reveals * the matching slot. Slots can be members of multiple devices (when * the cascade resolved them to the same DSL) — the matching rule * for the active card-width range wins. * * Breakpoints aligned with the existing row-stack thresholds: * mobile → card ≤ 480cqi * tablet → card 481–768cqi * desktop → card > 768cqi */ .qsas-card-slot { display: none; } @container qsas-card (max-width: 480px) { .qsas-card-slot--mobile { display: block; } } @container qsas-card (min-width: 481px) and (max-width: 768px) { .qsas-card-slot--tablet { display: block; } } @container qsas-card (min-width: 769px) { .qsas-card-slot--desktop { display: block; } } /* v1.9.62 — @inline merge. The `•` separator and the inline-leaf * content are spliced INSIDE the previous sibling's wrapper at * render time (see CardLayout::render_children). The classes here * just style the separator and give the appended content a * normal whitespace boundary. No display:block worries — the * spans flow inline with the host wrapper's existing content. */ .qsas-inline-sep { margin: 0 0.5em; color: #9ca3af; font-weight: 400; } .qsas-inline-content { display: inline; } /* v1.9.64 — Fallback wrapper used when the previous sibling has * no `` to splice into (e.g. a
title widget). Without * this, the bullet + content spans would float as siblings in the * parent flex column and each become its own line. The host keeps * them grouped as a single block under the previous element. */ .qsas-inline-host { display: block; } .qsas-layout-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em; align-items: flex-start; margin: 0 0 0.6em; } .qsas-layout-row:last-child { margin-bottom: 0; } .qsas-layout-col { flex: 1 1 0; min-width: 0; /* allow long content to wrap inside */ display: flex; flex-direction: column; gap: 0.5em; } /* "Fixed" column hugs its content rather than expanding — typically used * for the featured-image column so the image's intrinsic 120 × 120 size is * respected and the column doesn't waste space. */ .qsas-layout-col--fixed { flex: 0 0 auto; } /* Numeric weight modifiers — useful for asymmetric layouts ([col 2] is * twice as wide as a default [col 1]). */ .qsas-layout-col--1 { flex: 1 1 0; } .qsas-layout-col--2 { flex: 2 1 0; } .qsas-layout-col--3 { flex: 3 1 0; } .qsas-layout-col--4 { flex: 4 1 0; } /* v1.9.54 — Container queries replace the viewport media query that * used to collapse rows on small SCREENS regardless of how wide the * actual card was. The card itself is the container now * (.qsas-result--custom-layout has `container-type: inline-size` and * `container-name: qsas-card`, set in v1.9.43), so descendants react * to the CARD's own inline-size: * * - Search results page on mobile (viewport 390 px, card 360 px): * card < 600 cqi → collapse. Same as before. * - Search results page on desktop (viewport 1400 px, card 800 px): * card > 600 cqi → horizontal. Same as before. * - NEW — card placed in a sidebar widget on a 1400-px desktop * (card ~280 px wide): used to stay horizontal because viewport * was big; now collapses correctly because the CARD is narrow. * - NEW — three cards in a CSS grid on a wide desktop (each card * ~380 px): each card decides independently based on its slot * width, not the viewport. * * Browser support: Chrome 105+ (Aug 2022), Safari 16+ (Sep 2022), * Firefox 110+ (Feb 2023) — universally available in 2026. */ @container qsas-card (max-width: 480px) { .qsas-layout-row { flex-direction: column; align-items: stretch; } .qsas-layout-col--fixed { /* The "fixed" column (typically featured_image) stops * being fixed-width on narrow cards and just sits above * the body content. */ align-self: flex-start; } } /* v1.9.55 — Per-row stack threshold overrides. * * The default (above) collapses every .qsas-layout-row at * card ≤ 480cqi. The classes below let the DSL author opt out * or shift that threshold per individual row: * * [row stack:never] → never collapses (always horizontal) * [row stack:wide] → collapses earlier, at card ≤ 768cqi * [row stack:normal] → same as default (≤ 480cqi) * [row stack:narrow] → only on very narrow cards (≤ 320cqi) * [row stack:always] → always vertical regardless of card width * * `stack:never` and `stack:always` use `!important` to win * against the default threshold rule above; the breakpoint * variants use higher-specificity selectors (.row.row--stack-X) * so a parent @container query can re-trigger them. */ .qsas-layout-row--stack-never { flex-direction: row !important; align-items: flex-start !important; } .qsas-layout-row--stack-always { flex-direction: column !important; align-items: stretch !important; } .qsas-layout-row--stack-always > .qsas-layout-col--fixed { align-self: flex-start; } /* Keep "stack-wide" rows horizontal between 481cqi and 768cqi, * collapse them at ≤ 768cqi. Also keep "stack-narrow" rows * horizontal between 321cqi and 480cqi, collapse only at ≤ 320cqi. * "stack-normal" inherits the default behavior — no override. */ @container qsas-card (min-width: 481px) { .qsas-layout-row.qsas-layout-row--stack-narrow, .qsas-layout-row.qsas-layout-row--stack-wide { flex-direction: row; align-items: flex-start; } .qsas-layout-row.qsas-layout-row--stack-narrow > .qsas-layout-col--fixed, .qsas-layout-row.qsas-layout-row--stack-wide > .qsas-layout-col--fixed { align-self: auto; } } @container qsas-card (max-width: 768px) { .qsas-layout-row--stack-wide { flex-direction: column; align-items: stretch; } .qsas-layout-row--stack-wide > .qsas-layout-col--fixed { align-self: flex-start; } } @container qsas-card (max-width: 320px) { .qsas-layout-row--stack-narrow { flex-direction: column; align-items: stretch; } .qsas-layout-row--stack-narrow > .qsas-layout-col--fixed { align-self: flex-start; } } /* v1.9.55 — Visibility flags. * * .qsas-hide--mobile → hidden when card ≤ 480cqi * .qsas-hide--desktop → hidden when card > 480cqi * * Same breakpoint as the default row-collapse, so "mobile" and * "desktop" mean a consistent thing across the responsive system. * The class is emitted by the renderer on the leaf's wrapper * div or on the container element itself. */ @container qsas-card (max-width: 480px) { .qsas-hide--mobile { display: none !important; } } @container qsas-card (min-width: 481px) { .qsas-hide--desktop { display: none !important; } } /* Call Now button — a pill-shaped, green CTA. The number is intentionally * NOT on the button face (per requirement) — the icon + "Call Now" label * carries the affordance, and the tel: href + aria-label carry the actual * number for the dialer and assistive tech. */ .qsas-result__calls { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.4em 0 0.6em; } .qsas-result__call-button { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 1.15em; background: linear-gradient(180deg, #28a745 0%, #1f8a3a 100%); color: #fff; border: 0; border-radius: 999px; /* full pill */ font-weight: 600; font-size: 0.92em; line-height: 1; text-decoration: none; box-shadow: 0 2px 5px rgba(31, 138, 58, 0.28), 0 1px 2px rgba(31, 138, 58, 0.18); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .qsas-result__call-button:hover, .qsas-result__call-button:focus { background: linear-gradient(180deg, #2ebd4f 0%, #1f8a3a 100%); box-shadow: 0 4px 10px rgba(31, 138, 58, 0.34), 0 2px 4px rgba(31, 138, 58, 0.22); color: #fff; text-decoration: none; outline: 0; } .qsas-result__call-button:focus-visible { outline: 2px solid #1d2327; outline-offset: 2px; } .qsas-result__call-button:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(31, 138, 58, 0.28); } .qsas-result__call-icon { flex: 0 0 16px; width: 16px; height: 16px; } /* v1.9.80 — Toggle variant of the Call Now button. Visually * IDENTICAL to the regular Call Now button — same gradient, hover, * lift, focus ring, icon. Only the JS click behavior differs (see * frontend.js: clicks toggle the visible text between "Call Now" * and the actual phone number instead of dialing a tel: link). The * dedicated modifier class is here to give us a hook in case we * later want to add a subtle visual cue (e.g. a tooltip arrow or * a small "tap to reveal" affordance). For now it's a no-op style. */ .qsas-result__call-button--toggle { /* Intentionally empty — inherits everything from the base * .qsas-result__call-button rule above. */ } @media (prefers-reduced-motion: reduce) { .qsas-result__call-button { transition: none; } .qsas-result__call-button:active { transform: none; } } .qsas-result__more { margin: 0.5em 0 0; } .qsas-result__more-link { display: inline-block; font-weight: 600; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .qsas-result__more-link:hover, .qsas-result__more-link:focus { opacity: 0.8; } /* ------------------------------------------------------------------------- * Pagination * --------------------------------------------------------------------- */ .qsas-results__pagination { display: flex; flex-wrap: wrap; gap: 0.35em; justify-content: center; margin: 1.5em 0 0; font-size: 0.95em; } .qsas-results__pagination .page-numbers { display: inline-flex; min-width: 2em; padding: 0.35em 0.6em; justify-content: center; align-items: center; border: 1px solid currentColor; border-radius: 3px; text-decoration: none; color: inherit; opacity: 0.85; } .qsas-results__pagination .page-numbers.current { font-weight: 700; opacity: 1; } .qsas-results__pagination .page-numbers:hover, .qsas-results__pagination .page-numbers:focus { opacity: 1; } .qsas-results__pagination .page-numbers.dots { border-color: transparent; cursor: default; } /* ------------------------------------------------------------------------- * Loading + empty states * --------------------------------------------------------------------- */ .qsas-loading { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9em; opacity: 0.8; } .qsas-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: qsas-spin 0.8s linear infinite; } @keyframes qsas-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .qsas-loading::before { animation: none; } } /* Screen-reader-only utility (in case theme doesn't define one). */ .qsas-search-form .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* ========================================================================= * Bidirectional Infinite Scroll — UI affordances * * Three pieces of UI added by the JS-side InfiniteScroll module: * * 1. `.qsas-pagination--hidden-by-scroll` — applied to the inline *
when the JS takes over pagination. The nav stays in the DOM * (the AJAX swap needs to know max-pages from data-attrs that * hydrate on every response), it just doesn't render. * * 2. `.qsas-results__end` — the "End of Results" sticker appended * below the results list. Hidden by default, made visible only * when currentPage === maxPages so the user knows there's nothing * more to load downward. * * 3. `.qsas-back-to-top` — the thin floating bar pinned to the * bottom of the viewport with a single button. Only visible * when content overflows the viewport AND the user has scrolled * away from the top (or is past page 1). Click → smooth-scroll * to top, or jump back to page 1 first if they're past it. * * The bar is `position: fixed` and lives at level (the JS * appends it there) so it isn't affected by transformed ancestors * anywhere in the page's DOM tree. * ========================================================================= */ .qsas-pagination--hidden-by-scroll { display: none; } .qsas-results__end { display: none; margin: 24px 0 8px; padding: 12px 16px; text-align: center; color: #646970; font-size: 13px; font-style: italic; border-top: 1px dashed #dcdcde; } .qsas-results__end--visible { display: block; } /* v1.9.104 — "Upgrade membership" upsell at the end of the results. * Hidden until the infinite-scroll JS reveals it at the end (or rendered * visible immediately for single-page results). Subtle one-line message * with the upgrade button centered beneath it. The button inherits the * plugin's default button color (--qsas-btn-rest-*) with a safe fallback. */ .qsas-results__upsell { display: none; margin: 20px auto 8px; padding: 18px 16px; max-width: 640px; text-align: center; border-top: 1px solid #ececec; } .qsas-results__upsell--visible { display: block; } .qsas-results__upsell-text { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: #3c434a; } /* v1.9.106 — configurable message font size. Medium matches the * historical default. */ .qsas-results__upsell-text--small { font-size: 13px; } .qsas-results__upsell-text--medium { font-size: 15px; } .qsas-results__upsell-text--large { font-size: 18px; } .qsas-results__upsell-text--xlarge { font-size: 22.5px; } .qsas-results__upsell-btn { display: inline-block; padding: 10px 22px; border: none; border-radius: 6px; background: var( --qsas-btn-rest-bg, #2271b1 ); color: var( --qsas-btn-rest-fg, #ffffff ); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; } .qsas-results__upsell-btn:hover, .qsas-results__upsell-btn:focus { background: var( --qsas-btn-hover-bg, var( --qsas-btn-rest-bg, #135e96 ) ); color: var( --qsas-btn-hover-fg, var( --qsas-btn-rest-fg, #ffffff ) ); opacity: .92; text-decoration: none; } /* v1.9.105 — configurable button width as a % of the results row. * A sized button becomes a centered block of the chosen width. */ .qsas-results__upsell-btn--w25, .qsas-results__upsell-btn--w50, .qsas-results__upsell-btn--w75, .qsas-results__upsell-btn--w100 { display: block; margin-left: auto; margin-right: auto; box-sizing: border-box; } .qsas-results__upsell-btn--w25 { width: 25%; } .qsas-results__upsell-btn--w50 { width: 50%; } .qsas-results__upsell-btn--w75 { width: 75%; } .qsas-results__upsell-btn--w100 { width: 100%; } /* v1.9.107 — configurable button label font size. */ .qsas-results__upsell-btn--text-small { font-size: 13px; } .qsas-results__upsell-btn--text-medium { font-size: 14px; } .qsas-results__upsell-btn--text-large { font-size: 16px; } .qsas-results__upsell-btn--text-xlarge { font-size: 20px; } @media ( max-width: 600px ) { .qsas-results__upsell { padding: 16px 12px; } .qsas-results__upsell-text { font-size: 14px; } .qsas-results__upsell-text--small { font-size: 12px; } .qsas-results__upsell-text--medium { font-size: 14px; } .qsas-results__upsell-text--large { font-size: 16px; } .qsas-results__upsell-text--xlarge { font-size: 20px; } .qsas-results__upsell-btn, .qsas-results__upsell-btn--w25, .qsas-results__upsell-btn--w50, .qsas-results__upsell-btn--w75, .qsas-results__upsell-btn--w100 { display: block; width: 100%; box-sizing: border-box; } } .qsas-back-to-top { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 6px 14px; /* thin — keeps it out of the way */ background: rgba( 255, 255, 255, 0.96 ); border-top: 1px solid #dcdcde; box-shadow: 0 -2px 6px rgba( 0, 0, 0, 0.05 ); display: flex; justify-content: flex-end; /* button on the right */ align-items: center; pointer-events: none; opacity: 0; transform: translateY( 100% ); transition: opacity 180ms ease, transform 220ms ease; } .qsas-back-to-top--visible { opacity: 1; transform: translateY( 0 ); pointer-events: auto; } .qsas-back-to-top__btn { appearance: none; cursor: pointer; border: 1px solid #c3c4c7; background: #fff; color: #1d2327; padding: 4px 12px; font-size: 13px; line-height: 1.4; border-radius: 3px; } .qsas-back-to-top__btn:hover, .qsas-back-to-top__btn:focus { background: #f0f0f1; border-color: #8c8f94; } /* Featured-image thumbnail when link gating is off — render as a * plain block (no anchor) so the click-affordance and pointer cursor * are gone but the image keeps its dimensions and lazy-loading. */ .qsas-result__thumb--nolink { display: inline-block; cursor: default; } .qsas-result__thumb--nolink .qsas-result__thumb-img { pointer-events: none; } /* Title when link gating is off — same h3 wrapper, same class as the * linked variant; no special selector needed. The bare text just * inherits the qsas-result__title font-size/weight automatically. */ /* Compensate for the thin Back-to-Top bar: when it's visible we add * a touch of bottom padding to the document so the last result isn't * trapped underneath. Only kicks in when the bar is actually visible * (the JS toggles the --visible class). */ body:has( .qsas-back-to-top--visible ) { padding-bottom: 48px; } /* ========================================================================= * Link gating — non-clickable variants of dropdown rows * * When the admin has gated links off for the current visitor (see * ResultCap::should_show_link), live search rows render as
* instead of . CSS keeps everything else identical — same padding, * same row layout, same hover-background — only the click cursor and * the underline-like affordance go away. * ========================================================================= */ .qsas-live-results__link--nolink { cursor: default; text-decoration: none; } .qsas-live-results__link--nolink:hover, .qsas-live-results__link--nolink:focus { /* Same hover bg as the linked version so the layout doesn't shift, * but no underline / text-color change since the row isn't actionable. */ cursor: default; } /* ========================================================================= * Loading indicators for the bidirectional infinite scroll. Two stable * elements (top + bottom of the results container) toggled via the * `--visible` modifier class on each fetch. The JS guarantees at least * 300ms of visibility per fetch so even fast servers / cached responses * give the user perceptible feedback that something happened. * ========================================================================= */ .qsas-results__loading { display: none; padding: 14px 16px; color: #646970; font-size: 13px; gap: 10px; align-items: center; justify-content: center; } .qsas-results__loading--visible { display: flex; } .qsas-results__loading--top { border-bottom: 1px solid rgba( 0, 0, 0, 0.06 ); margin-bottom: 8px; } .qsas-results__loading--bottom { border-top: 1px solid rgba( 0, 0, 0, 0.06 ); margin-top: 8px; } .qsas-results__spinner { width: 16px; height: 16px; display: inline-block; border: 2px solid #c3c4c7; border-top-color: #2271b1; border-radius: 50%; animation: qsas-spin 0.8s linear infinite; flex: 0 0 auto; } .qsas-results__loading-text { font-style: italic; } @keyframes qsas-spin { to { transform: rotate( 360deg ); } } /* Respect users who've opted out of motion. Static dashes instead of * a spinning ring — still visually conveys "in progress" but without * the rotation. */ @media (prefers-reduced-motion: reduce) { .qsas-results__spinner { animation: none; border-style: dashed; border-color: #8c8f94; border-top-color: #2271b1; } } /* ========================================================================= * Sticky header strip — search form + result counter pinned to the top * of the viewport while the visitor scrolls through results. * * The JS-side init builds this wrapper on every results page that has * both a `.qsas-search-form` and a `.qsas-results__header` available * (see initStickySearchHeader in frontend.js). Form and header are * moved INSIDE this wrapper at DOM-ready, so the two scroll together * as a single sticky unit. The wrapper is position:sticky from the * first paint (no JS transition, no fade-in — the admin asked for * "fija desde que carga la página, sin transición"). * * The background colour is themable via `--qsas-results-header-bg` * (defaults baked into class-options-manager.php at #f5f5f5). The * counter text colour is hardcoded black for legibility — see the * `.qsas-sticky-search-header .qsas-results__count` rule below. * * Z-index 50 sits above ordinary content but below admin bar overlays * (typically z-index 99999) so logged-in administrators still see the * WP admin bar above the sticky strip. Box-shadow uses the same colour * formula as the Back-to-Top button so the two areas relate visually. * ========================================================================= */ .qsas-sticky-search-header { position: sticky; top: 0; z-index: 50; background: var( --qsas-results-header-bg, #f5f5f5 ); padding: 10px 16px; margin: 0 0 16px 0; box-shadow: 0 2px 4px var( --qsas-back-to-top-shadow, rgba( 0, 0, 0, 0.06 ) ); /* Match the content width exactly. Without box-sizing:border-box, * the wrapper's 16px horizontal padding gets ADDED to the parent's * available width, which pushes the bar's right edge past the * result cards below. With border-box, padding is included in the * computed width and the bar lines up with the cards. */ box-sizing: border-box; max-width: 100%; } /* Document-level scroll padding: tells the browser to treat the top * `--qsas-sticky-bottom` pixels as reserved space for any programmatic * scrolling. This covers three real-world cases that previously left * the first result card partially hidden behind the pinned sticky * strip on certain screen sizes: * * 1. Browser scroll restoration: on reload or back/forward * navigation, the browser tries to restore the previous scroll * position. Without scroll-padding-top, that restore can place * the viewport such that the first card's top edge lands behind * the sticky. * * 2. Anchor-link navigation (URL with #fragment): the browser * scrolls so the target element sits at top:0 of the viewport. * With scroll-padding-top, it lands at the configured offset * below the sticky instead. * * 3. Any scrollIntoView() call elsewhere in the codebase (e.g., a * future feature, a theme integration, an accessibility tool): * this rule provides a sensible default landing zone. * * Fallback 80px keeps the rule defined even in the brief window * between page paint and the JS that publishes --qsas-sticky-bottom. */ html { scroll-padding-top: var( --qsas-sticky-bottom, 80px ); } /* Tighten internal spacing when form + header live inside the wrapper — * the wrapper already provides padding so the children shouldn't add * their own. Also strip the global `.qsas-results__header` border-bottom * + opacity (defined far above this rule for standalone headers) so the * counter line inside the sticky strip renders clean against the * configured background — no dividing line, full opacity. */ .qsas-sticky-search-header .qsas-search-form { margin: 0; } .qsas-sticky-search-header .qsas-results__header { margin: 0; padding: 0; border-bottom: 0; opacity: 1; } /* Counter text is always solid black against the configurable * background. The admin chose this explicitly: configuring the counter * colour separately would make it too easy to land on a hard-to-read * combination, so we lock it. Override opacity from the global rule * so the black reads as solid (not 0.8 faded). */ .qsas-sticky-search-header .qsas-results__count { color: #000; font-weight: 500; opacity: 1; } /* Note: the WP admin bar offset and the theme-header offset are both * computed and applied via inline style by the JS at init time (see * resolveStickyOffset in frontend.js). We don't set them in CSS so we * don't conflict with the dynamic value. The `top: 0` baked into * `.qsas-sticky-search-header` above acts as a fallback for the brief * window between page paint and JS execution. */ /* Apply themable colours to the existing Back-to-Top floating bar. * (The base layout — fixed/bottom/right, padding, visibility states — * was already established by an earlier rule block above.) Now that * the var pipeline is in place, the bar's background, the inner * button's bg/text, and the shadow all become admin-configurable. */ .qsas-back-to-top { background: var( --qsas-back-to-top-bg, #ffffff ); box-shadow: 0 -2px 6px var( --qsas-back-to-top-shadow, rgba( 0, 0, 0, 0.05 ) ); } .qsas-back-to-top__btn { background: var( --qsas-back-to-top-bg, #ffffff ); color: var( --qsas-back-to-top-text, #1d2327 ); border-color: var( --qsas-back-to-top-shadow, #c3c4c7 ); } .qsas-back-to-top__btn:hover, .qsas-back-to-top__btn:focus { /* On hover, mix the bg toward the shadow tone slightly. With * color-mix() supported in all evergreen browsers, this is the * cleanest way to derive a hover surface from the live var. */ background: color-mix( in srgb, var( --qsas-back-to-top-bg, #ffffff ) 90%, var( --qsas-back-to-top-shadow, #000 ) 10% ); } /* ========================================================================= * Debug index badge — admin tool for validating the bidirectional * infinite scroll output. Renders only when the admin enables * "Show result index numbers" in Settings → Advanced → Debug Tools. * * The badge sits in the .qsas-results__item LI wrapper (not inside the * article) so it overlays the entire card regardless of whether the * card uses the built-in default layout or a Custom Card Layout DSL. * The LI gets position:relative so the badge can absolute-position * itself in the top-right corner. * * Pure visual marker — pointer-events: none so it never intercepts * clicks on the card content beneath it. aria-hidden="true" in the * PHP also keeps it out of the accessibility tree, since it's debug * info for the admin, not content for screen readers. * ========================================================================= */ .qsas-results__item { position: relative; /* Scroll-margin lets scrollIntoView from the bidirectional * infinite-scroll's applySwap land each boundary item with the * right clearance: * * - top: the value of --qsas-sticky-bottom, kept in sync by * resolveStickyOffset in frontend.js. Equals the total * height of the pinned chrome (theme header + admin bar + * sticky search strip). When the JS calls * firstItem.scrollIntoView({block:'start'}) for a downward * swap, the item's top lands at exactly that margin from * the viewport top — just BELOW the sticky chrome, never * behind it. Fallback 80px if the var isn't set yet * (handles the brief window between page paint and JS * execution). * * - bottom: a small 16px gap so the upward-swap case (last * item scrolled to block:'end') sits a few pixels above * the viewport bottom, not flush against it. */ scroll-margin-top: var( --qsas-sticky-bottom, 80px ); scroll-margin-bottom: 16px; } .qsas-result__debug-index { position: absolute; top: 8px; right: 8px; z-index: 5; background: #dc2626; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 10px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 ); pointer-events: none; } /* =================================================================== * Filter shortcodes ([qs_filter], [qs_filter_bar], * [qs_search_filter_interface]) * =================================================================== * Three layouts share the same field markup — only the wrapper class * differs: * .qsas-filter--vertical Sidebar style (fields stacked, full width) * .qsas-filter--horizontal Bar style (fields side-by-side, compact) * inside .qsas-interface--with-filter All-in-one combined layout */ /* Base form wrapper — common to all layouts. */ .qsas-filter { font-size: 14px; } .qsas-filter * { box-sizing: border-box; } /* Individual field — label + input(s). */ /* v1.9.135 — Frontend filter fields use a fieldset + legend so each field's * label sits on its top border (notched outline), independent of the theme * background color. The fieldset is the visible outline; inner controls are * borderless (rule further below) so there is a single border per field. */ .qsas-filter__field { position: relative; margin: 0 0 14px; padding: 4px 10px 8px; border: 1px solid #c3c4c7; border-radius: 8px; min-width: 0; min-inline-size: 0; background: transparent; } .qsas-filter__label { width: auto; max-width: 100%; padding: 0 6px; margin: 0 0 0 2px; font-weight: 600; font-size: 12px; line-height: 1.2; color: #1d2327; } /* Inputs/selects fill the available width by default. Horizontal layout * overrides this below. */ .qsas-filter select, .qsas-filter input[type="text"], .qsas-filter input[type="number"], .qsas-filter input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid #c3c4c7; border-radius: 3px; font-size: 14px; } /* v1.9.135 — Inside the notched fieldset the controls drop their own border / * background so the fieldset is the single field outline (matches the design * reference). The whole field highlights on focus. */ .qsas-filter__field select, .qsas-filter__field input[type="text"], .qsas-filter__field input[type="number"], .qsas-filter__field input[type="date"] { border: 0; border-radius: 0; padding: 4px 0; background: transparent; box-shadow: none; font-size: 14px; } .qsas-filter__field select:focus, .qsas-filter__field input:focus { outline: none; box-shadow: none; } .qsas-filter__field:focus-within { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; } /* Checkbox / radio option lists. */ .qsas-filter__options { display: flex; flex-direction: column; gap: 4px; } .qsas-filter__option { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 14px; cursor: pointer; } .qsas-filter__option input[type="checkbox"], .qsas-filter__option input[type="radio"] { margin: 0; } /* Range + date_range — two inputs separated by an em-dash. */ .qsas-filter__range, .qsas-filter__date-range { display: flex; align-items: center; gap: 8px; } .qsas-filter__range input, .qsas-filter__date-range input { flex: 1; min-width: 0; } .qsas-filter__range-sep { color: #888; flex: 0 0 auto; } /* Toggle — single checkbox + label. */ .qsas-filter__toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; } /* Apply + reset actions. */ .qsas-filter__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0; } /* v1.9.133 — Apply & Reset are fully styled by an inline rule generated * from each button's saved config (colors, hover/effect, radius, padding, * font size — see ButtonLibrary::filter_button_inline_css). These static * rules are just a sane fallback for when that inline CSS is unavailable, * plus the shared icon/label layout. */ .qsas-filter__apply, .qsas-filter__reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #2271b1; color: #fff; border: 1px solid #2271b1; border-radius: 3px; padding: 8px 16px; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; } .qsas-fbtn__icon { display: inline-flex; align-items: center; } .qsas-fbtn__icon svg { width: 1.1em; height: 1.1em; display: block; } /* ---- Vertical layout (sidebar) ---- */ .qsas-filter--vertical { display: flex; flex-direction: column; padding: 16px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px; max-width: 320px; } /* ---- Horizontal layout (bar) ---- */ .qsas-filter--horizontal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 16px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px; } .qsas-filter--horizontal .qsas-filter__field { margin-bottom: 0; flex: 1 1 180px; min-width: 0; } .qsas-filter--horizontal .qsas-filter__actions { margin-top: 0; padding-top: 0; border-top: none; flex: 0 0 auto; } /* Checkbox/radio groups inside the horizontal bar lay out inline. */ .qsas-filter--horizontal .qsas-filter__options { flex-direction: row; flex-wrap: wrap; gap: 8px; } /* ---- All-in-one interface ---- */ .qsas-interface--with-filter .qsas-interface__body { display: flex; gap: 24px; margin-top: 16px; } .qsas-interface--with-filter .qsas-interface__filter { flex: 0 0 280px; } .qsas-interface--with-filter .qsas-interface__filter .qsas-filter--vertical { max-width: none; } .qsas-interface--with-filter .qsas-interface__results { flex: 1; min-width: 0; } /* v1.9.125 — Self-contained [qs_filter_bar]: the horizontal filter bar sits * on top, the results list below. Brand-new class, scoped here only, so it * cannot affect any existing layout. */ .qsas-interface--filter-bar .qsas-interface__filter-bar { margin-bottom: 1.25rem; } /* v1.9.129 — [qs_search_filter_interface_any]: ONE unified piece, fixed * three rows that never reflow — search on top, filter bar below, results * (with the total) last. Scoped entirely to the new wrapper, so no other * layout is affected. */ .qsas-interface--stacked { display: flex; flex-direction: column; gap: 6px; } .qsas-interface--stacked .qsas-interface__search, .qsas-interface--stacked .qsas-interface__filter-bar { margin-bottom: 0; } .qsas-interface--stacked .qsas-search-form { margin: 0; } /* The filter bar blends into the piece — drop its standalone gray card so * it doesn't read as a separate box wasting vertical space. */ .qsas-interface--stacked .qsas-filter--horizontal { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 8px; padding: 0; background: transparent; border: 0; border-radius: 0; } /* Every filter shrinks to share a SINGLE row, on ANY device (overrides the * generic ≤782px column-stacking for this interface only). */ .qsas-interface--stacked .qsas-filter--horizontal .qsas-filter__field { flex: 1 1 0; min-width: 0; } .qsas-interface--stacked .qsas-filter--horizontal .qsas-filter__field select, .qsas-interface--stacked .qsas-filter--horizontal .qsas-filter__field input { width: 100%; min-width: 0; box-sizing: border-box; } /* v1.9.149 — Give the control content horizontal breathing room so the * selected value / placeholder isn't flush against the field edges. * v1.9.155 — Also trim the vertical padding so the filter row reads more * compact (less tall), closer in height to the search input above it. */ .qsas-interface--stacked .qsas-filter__field select, .qsas-interface--stacked .qsas-filter__field input[type="text"], .qsas-interface--stacked .qsas-filter__field input[type="number"], .qsas-interface--stacked .qsas-filter__field input[type="date"] { padding: 2px 8px; } /* v1.9.155 — Tighter fieldset padding so the notched filter boxes aren't * noticeably taller than the search field. */ .qsas-interface--stacked .qsas-filter__field { padding-top: 1px; padding-bottom: 4px; } .qsas-interface--stacked .qsas-filter__label { font-size: 11px; } /* Keep labels on one line so the columns stay tidy when narrow. */ .qsas-interface--stacked .qsas-filter--horizontal .qsas-filter__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Reset/Apply stay compact and don't steal row space from the fields. */ .qsas-interface--stacked .qsas-filter--horizontal .qsas-filter__actions { flex: 0 0 auto; } /* v1.9.136 — Drop the divider line under the result total ("1 Agency") in * this interface only. The global .qsas-results__header border-bottom stays * for every other layout. */ .qsas-interface--stacked .qsas-results__header { border-bottom: 0; padding-bottom: 0; } /* v1.9.146 — The Sticky wrapper (`.qsas-iface-bar .qsas-sticky-search-header`) * holds the search + the movable blocks (filters, total); results render * OUTSIDE it. `.qsas-iface-bar` only stacks those rows vertically — the gray * band + pinned positioning come from the reused `.qsas-sticky-search-header` * class, whose definition is left untouched. */ .qsas-interface--stacked .qsas-iface-bar { display: flex; flex-direction: column; gap: 6px; } .qsas-interface--stacked .qsas-interface__total { min-width: 0; } .qsas-interface--stacked .qsas-interface__total:empty { display: none; } /* v1.9.148 — In this interface the focused filter field no longer draws the * bright blue ring around the fieldset (which also wrapped its * label). Keep the neutral border; no glowing outline. Scoped here so other * shortcodes keep their existing focus styling. */ .qsas-interface--stacked .qsas-filter__field:focus-within { border-color: #c3c4c7; box-shadow: none; } /* ---- Mobile: stack filter above results, full-width controls ---- */ @media (max-width: 782px) { /* v1.9.152 — On mobile, every search shortcode spans the FULL screen * width (breaks out of the theme's content padding) to use all the * available horizontal space. */ .qsas-interface, .qsas-search-form { width: 100vw; max-width: 100vw; margin-left: calc( 50% - 50vw ); margin-right: calc( 50% - 50vw ); box-sizing: border-box; } /* The interface already bleeds full-width; its inner search form must * NOT bleed again (that would overflow). Keep it normal inside. */ .qsas-interface .qsas-search-form { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; } .qsas-filter--vertical { max-width: none; } /* v1.9.153 — With the interface bled full-width, give the result cards a * little side breathing room so they don't sit flush against the screen * edges. */ .qsas-interface__results { padding-left: 5px; padding-right: 5px; box-sizing: border-box; } .qsas-filter--horizontal { flex-direction: column; align-items: stretch; } .qsas-filter--horizontal .qsas-filter__field { flex: 1 1 auto; } .qsas-interface--with-filter .qsas-interface__body { flex-direction: column; } .qsas-interface--with-filter .qsas-interface__filter { flex: 1 1 auto; } } /* =================================================================== * Filter form AJAX states (v1.9.0) * =================================================================== */ /* In LIVE mode, the Apply button is redundant — every input change * triggers an AJAX update — so hide it. We use the JS-controlled * class so the button is still visible on no-JS fallback (where the * form will do its native method=GET reload). */ .qsas-filter--js-controlled[data-qsas-filter-apply="live"] .qsas-filter__apply { display: none; } /* Loading state on the results container during a filter AJAX * request. Dims slightly so the visitor can see something's happening * without making the content unreadable. */ .qsas-results--filter-loading { opacity: 0.55; pointer-events: none; transition: opacity 180ms ease-out; }