/* Milestone 9: update-safe public Directorist presentation layer. */ body.directorist-content-active main.site-main { background: var(--hp-color-white); color: var(--hp-color-ink); } /* Owner request (2026-08-21), Section 16: friendly note inserted client-side * (directorist.js addLocationGuidance()) just before the Map field on the * Add Listing form -- explains why the field matters before a business * owner skips it, without editing the vendor template. */ .hp-location-guidance { display: flex; align-items: flex-start; gap: var(--hp-space-2); margin: 0 0 var(--hp-space-3); padding: var(--hp-space-3) var(--hp-space-4); border: 1px solid var(--hp-color-primary-100); border-radius: var(--hp-radius-md); background: var(--hp-color-primary-100); color: var(--hp-color-primary-700); font-size: var(--hp-text-sm); font-weight: 600; line-height: 1.4; } .hp-location-guidance::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 13-9 13s-9-7-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 13-9 13s-9-7-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .hp-directory-empty__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-700); font-size: var(--hp-text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hp-directory-empty__actions { display: flex; flex-wrap: wrap; gap: var(--hp-space-3); margin-top: var(--hp-space-6); } /* Stage B V43 owner correction (2026-08-03): this rule and the more specific * .directorist-form-element rule further down both used `outline` with * different colours/offsets on the same field (the search input matches * both). `outline` does not follow border-radius in Safari/WebKit, so it * drew as a sharp-cornered rectangle poking out past the input's rounded * corners -- visible as a "double bubble" on iPhone. `box-shadow` always * follows border-radius, so it replaces `outline` as the actual visible * ring; a transparent outline is kept so forced-colors/high-contrast mode * still gets a real ring from the browser. */ .hp-directory-empty a:focus-visible, body.directorist-content-active .directorist-btn:focus-visible, body.directorist-content-active button:focus-visible, body.directorist-content-active input:focus-visible, body.directorist-content-active select:focus-visible, body.directorist-content-active a:focus-visible { outline: 3px solid transparent !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--hp-color-primary-500) !important; } body.directorist-content-active .directorist-archive-contents, body.directorist-content-active .directorist-archive-items, body.directorist-content-active .directorist-header-bar, body.directorist-content-active .directorist-search-contents { color: var(--hp-color-ink); } body.directorist-content-active .directorist-btn, body.directorist-content-active button:not(.cmplz-btn), body.directorist-content-active .directorist-form-element, body.directorist-content-active select, body.directorist-content-active input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) { min-height: 44px; } body.directorist-content-active .directorist-pagination .page-numbers, body.directorist-content-active .directorist-pagination a, body.directorist-content-active .directorist-viewas-dropdown__links a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .hp-directory-empty { width: min(100%, 42rem); margin: clamp(1.5rem, 5vw, 4rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-xl); background: var(--hp-color-white); box-shadow: var(--hp-shadow-card); color: var(--hp-color-ink); text-align: left; } .hp-directory-empty h2 { margin: 0 0 var(--hp-space-3); color: var(--hp-color-ink); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.15; } .hp-directory-empty > p:not(.hp-directory-empty__eyebrow) { margin: 0; color: var(--hp-color-body); line-height: 1.65; } @media (max-width: 767px) { body.directorist-content-active main.site-main, body.directorist-content-active .directorist-archive-contents, body.directorist-content-active .directorist-archive-items, body.directorist-content-active .directorist-header-bar, body.directorist-content-active .directorist-search-contents { background: var(--hp-color-white) !important; } .hp-directory-empty__actions { flex-direction: column; } .hp-directory-empty__actions a { width: 100%; justify-content: center; } .hp-directory-empty { width: calc(100% - 2rem); } } /* Milestone 10: restrained business-passport profile hierarchy. */ body.single-at_biz_dir .directorist-single { width: min(100%, 78rem) !important; max-width: 78rem !important; padding: clamp(1.25rem, 4vw, 3rem) var(--hp-space-4) clamp(3rem, 8vw, 6rem) !important; } /* * Wave 6 owner correction (2026-08-19): "giant empty title/header area" * confirmed live via real getBoundingClientRect measurement on MC Sports * Therapy & Biomechanics -- ~131px of dead space between the nav and the * Back/Share row, then another ~70px before the H1 itself, before any * real business content appears. Root cause was NOT this file's own * padding (already restyled, not oversized) but two Directorist DEFAULT * spacing values this file had never touched: `.directorist-single- * contents-area`'s own 50px margin-top, and this h1 rule's own 24px * (--hp-space-6) extra top margin stacked on top of the header's own * padding. Reduced both below; header padding itself also tightened * slightly (was already roughly the same real magnitude as Directorist's * own un-overridden default, not actually smaller). */ body.single-at_biz_dir .directorist-single-contents-area { margin-top: var(--hp-space-4) !important; } body.single-at_biz_dir .directorist-single-listing-header { margin-bottom: var(--hp-space-6); padding: clamp(0.75rem, 2.5vw, 1.5rem) !important; border: 1px solid var(--hp-color-primary-100); border-radius: var(--hp-radius-xl); background: linear-gradient(145deg, var(--hp-color-white), var(--hp-color-primary-100)) !important; box-shadow: var(--hp-shadow-card); } body.single-at_biz_dir .directorist-single-listing-header h1, body.single-at_biz_dir .directorist-listing-title { max-width: 52rem; margin-block: var(--hp-space-3) var(--hp-space-4) !important; font-size: clamp(1.75rem, 5vw, 3.5rem) !important; line-height: 1.08 !important; } /* Owner correction: "Go Back" was wrapping into two lines ("Go" / "Back") -- Directorist's own button rule leaves white-space at its default (normal), and the button's own width (built from its content) is just narrow enough to wrap two words at some viewport widths. */ body.single-at_biz_dir .directorist-single-listing-top .directorist-btn { white-space: nowrap; } body.single-at_biz_dir .directorist-single-listing-top .directorist-btn, body.single-at_biz_dir .directorist-single-listing-action, body.single-at_biz_dir .directorist-single-listing-header .directorist-btn, body.single-at_biz_dir .directorist-single-info a, body.single-at_biz_dir .directorist-single-map__direction a { min-height: 44px !important; min-width: 44px !important; align-items: center; border-radius: var(--hp-radius-md) !important; } body.single-at_biz_dir .directorist-listing-category a { min-height: 44px; font-weight: 800 !important; } /* Final owner acceptance (2026-08-21): the category/Popular pills are useful, but Directorist's full-width white wrapper made them look like a form field. Keep the real pills and their layout; remove only that redundant visual container. This avoids the fragile intrinsic-width changes previously investigated and leaves every interactive target untouched. */ body.single-at_biz_dir .directorist-listing-single-quickinfo { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-action:not(.directorist-btn-light) { background: var(--hp-color-primary-500) !important; color: var(--hp-color-white) !important; } /* Wave 6 owner polish (2026-08-20), "Improve: CTA visibility": confirmed live via computed styles that the Call/Email buttons (a genuinely different class, .directorist-btn-default, from the rule just above, which only covers .directorist-single-listing-action -- the Back/Share utility row) were still Directorist's own bland white/grey default while the far-less-important Back/Share buttons already carried the branded purple treatment. Additive styling only, no structural/DOM change. */ body.single-at_biz_dir .directorist-listing-actions .directorist-btn.directorist-btn-default { background: var(--hp-color-primary-500) !important; border-color: var(--hp-color-primary-500) !important; color: var(--hp-color-white) !important; } body.single-at_biz_dir .directorist-listing-actions .directorist-btn.directorist-btn-default:hover, body.single-at_biz_dir .directorist-listing-actions .directorist-btn.directorist-btn-default:focus-visible { background: var(--hp-color-primary-600) !important; border-color: var(--hp-color-primary-600) !important; } /* Wave 6 owner polish (2026-08-20), "Reduce: repeated information": confirmed live on two real listings (Swan Gallery and Framing, MC Sports Therapy & Biomechanics) that Phone/Email repeat a second time in the lower "Contact" info card, identical in value to the CTA buttons already shown above -- confirmed via a direct site-database read that this site has exactly one directory type (Business) and its CTA action-placeholder config always includes phone+email, so the top buttons are always present whenever this second copy would otherwise show a value; no information is lost, only the duplicate row is hidden. Website and Social Info are NOT duplicated anywhere else and are left untouched. */ body.single-at_biz_dir .directorist-card-general-section .directorist-single-info-phone, body.single-at_biz_dir .directorist-card-general-section .directorist-single-info-email { display: none; } /* Owner fix (2026-08-18): confirmed live the real cause of the wasted hero * space -- Directorist's own Swiper gallery renders a fixed ~740x580 * slide box regardless of the actual image's real proportions, so a * roughly-square business logo (the common case for this project's real * listing mix -- see the archive-card comment above) sits with large * empty margins inside a landscape-shaped box. Capping the slide/wrapper * height (CSS only, Swiper's own touch/swipe JS operates on width, not a * hard-coded height) tightens this without touching Directorist's own * gallery markup/JS -- not an unrelated redesign, the same * !important-override pattern already used throughout this file. */ body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider, body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper, body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide { max-height: 24rem !important; } /* * Owner-caught bug (2026-08-21): this rule set object-fit:contain * unconditionally for every hero image, with no aspect-ratio gating at * all -- confirmed live (specificity math + real fetched markup) that * this silently wins over Directorist's own native * `.swiper-slide img { object-fit: cover }` rule, and over this site's own * real Directorist Builder setting (confirmed live as "background-cover" * on the actual slider-wrap class). Real, non-square business photography * was very likely rendering needlessly letterboxed on businesses' own * detail pages -- the opposite problem from the archive grid's cropping, * but the same root cause (an unconditional rule with no logo-vs-photo * distinction). Default now matches the other three surfaces (cover for * real photography); assets/css/directory-media.css adds the matching * contain-for-genuine-logos override, driven by the same aspect-ratio * detection already proven on the archive grid. */ body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide > img { max-height: 24rem; object-fit: cover; border-radius: var(--hp-radius-xl); background: var(--hp-color-primary-100); } /* * Owner directive (2026-08-21), Business Detail Page upgrade: a genuine * two-column premium storefront layout -- name/actions/details on the * left, one large gallery on the right -- built entirely with CSS grid on * top of Directorist's own existing header markup (no PHP template * override, no change to what data renders or how). Confirmed live on two * real listings (a data-rich one and Nefel Cafe, the owner's own * limited-data example) that .directorist-single-listing-header's direct * children are always some subset of: .directorist-single-listing-top * (Back/Share), the H1 title, .hp-community-box (Support this business), * .directorist-listing-details (category/badges/phone/email -- already * hidden entirely by Directorist's own action-section.php when empty, not * something this rule needs to handle) and * .directorist-single-listing-slider-wrap (the gallery, or the category- * artwork fallback when there's no real photo -- same wrapper class * either way, confirmed live). Targeting "everything except the slider" * rather than naming each part individually means this keeps working * regardless of which optional parts a given listing has. * * Desktop-only (1000px+, matching this theme's existing 2-column * breakpoint in homepage.css/compact-filters.css) -- narrower than that, * this reverts to the original single-column stack untouched, avoiding an * image awkwardly stretched to match a long text column on a phone. */ @media (min-width: 1000px) { body.single-at_biz_dir .directorist-single-listing-header.hp-storefront-enhanced { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--hp-space-6); align-items: start; } body.single-at_biz_dir .directorist-single-listing-header .hp-storefront-summary { grid-column: 1; min-width: 0; } body.single-at_biz_dir .directorist-single-listing-header.hp-storefront-enhanced > .directorist-single-listing-slider-wrap { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--hp-space-4); height: auto !important; min-height: 0 !important; } /* The 24rem cap above suits the single-column mobile stack; the two- column layout gives the gallery more room to feel like the "large image area" the owner asked for, still a fixed/predictable shape rather than one that chases the text column's own variable height. */ body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider, body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper, body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide { max-height: none !important; height: 30rem !important; } body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider { width: 100% !important; } body.single-at_biz_dir .directorist-single-listing-header .directorist-single-listing-slider > .swiper-wrapper > .swiper-slide > img { height: 30rem; max-height: none; } } body.single-at_biz_dir .directorist-card { margin-top: var(--hp-space-6) !important; overflow: hidden; border: 1px solid var(--hp-color-border) !important; border-radius: var(--hp-radius-xl) !important; background: var(--hp-color-white) !important; box-shadow: var(--hp-shadow-card) !important; } body.single-at_biz_dir .directorist-card__header { padding: var(--hp-space-4) var(--hp-space-6) !important; border-bottom: 1px solid var(--hp-color-border) !important; background: var(--hp-color-primary-100) !important; } body.single-at_biz_dir .directorist-card__header h2, body.single-at_biz_dir .directorist-card__header h3 { color: var(--hp-color-ink) !important; font-size: var(--hp-text-xl) !important; } body.single-at_biz_dir .directorist-card__body { padding: clamp(1.25rem, 4vw, 2rem) !important; font-size: var(--hp-text-base); line-height: 1.75; } body.single-at_biz_dir .directorist-single-info { min-height: 44px; align-items: flex-start; padding-block: var(--hp-space-2); } /* * Owner-flagged (2026-08-20): the Contact section's Phone/Email/Social Info * rows read as raw, unstyled Directorist output. Traced the real cause * rather than guessing (assets/css/all-listings.css, Directorist's own * default): the colon is a real `::before` pseudo-element pinned to the * RIGHT edge of a fixed-width label box (70-140px) regardless of the * label's own text length, so "Phone" and "Social Info" end up with * visibly different gaps before their colon. Right-aligning the label text * within that same box makes every label hug its own colon consistently, * without touching Directorist's colon logic at all. Separately: phone and * email are already real / links in the * vendor markup (confirmed by reading phone.php/email.php directly) -- they * were never actually plain text, just coloured to match ordinary body * copy with no link affordance, so this is a colour/underline fix only, no * template change needed. */ body.single-at_biz_dir .directorist-single-info__label__text { text-align: right; } body.single-at_biz_dir .directorist-single-info__value a:not(.directorist-btn) { color: var(--hp-color-primary-700) !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 2px; } body.single-at_biz_dir .directorist-single-info__value a:not(.directorist-btn):hover { color: var(--hp-color-primary-500) !important; } .hp-local-map-notice { display: flex; min-height: 16rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--hp-space-3); padding: var(--hp-space-6); background: var(--hp-color-primary-100); color: var(--hp-color-body); text-align: center; } .hp-local-map-notice strong { color: var(--hp-color-ink); font-size: var(--hp-text-lg); } .hp-business-claim { display: grid; width: min(calc(100% - 2rem), 75rem); grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: var(--hp-space-6); align-items: center; margin: var(--hp-space-8) auto var(--hp-space-5); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--hp-color-primary-200); border-radius: var(--hp-radius-xl); background: linear-gradient(135deg, var(--hp-color-primary-100), var(--hp-color-white)); box-shadow: var(--hp-shadow-sm); } .hp-business-claim__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-700); font-size: var(--hp-text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hp-business-claim h2 { margin: 0 0 var(--hp-space-3); color: var(--hp-color-ink); font-size: clamp(1.5rem, 4vw, 2.25rem); } .hp-business-claim__copy > p:last-child { margin: 0; color: var(--hp-color-body); line-height: 1.65; } .hp-business-claim__action { display: flex; flex-direction: column; gap: var(--hp-space-3); align-items: stretch; text-align: center; } .hp-business-claim__register { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; color: var(--hp-color-primary-700); font-weight: 800; } .hp-business-claim .directorist-claim-listing-wrapper, .hp-business-claim .directorist-card { margin: 0 !important; } /* Owner-caught bug (2026-08-22): .directorist-content-active .directorist-card (the vendor's own generic card component) still painted its full white background/border/border-radius/box-shadow here -- only margin had been reset -- rendering a second, redundant white card behind the claim button, nested inside this section's own lavender-gradient card. Neutralised the same way .directorist-card__body already was below. */ .hp-business-claim .directorist-card { padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .hp-business-claim .directorist-card__header { display: none !important; } .hp-business-claim .directorist-card__body { padding: 0 !important; background: transparent !important; } .hp-business-claim .directorist-claim-listing__title, .hp-business-claim .directorist-claim-listing__description { display: none; } .hp-business-claim .directorist-btn-modal-js { display: inline-flex !important; width: 100%; min-height: 48px; align-items: center; justify-content: center; border-radius: var(--hp-radius-pill) !important; background: var(--hp-color-primary-600) !important; color: var(--hp-color-white) !important; font-weight: 800 !important; } /* The existing Partner Hub support action now belongs beside ownership, not in the business-first hero. Present it as one compact lavender action strip rather than another large white content card. */ body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower { display: grid; width: min(calc(100% - 2rem), 75rem); grid-template-columns: minmax(0, 1fr) auto; gap: var(--hp-space-5); align-items: center; margin: var(--hp-space-8) auto var(--hp-space-4); padding: clamp(1.1rem, 3vw, 1.6rem); border-color: var(--hp-color-primary-200); background: linear-gradient(135deg, var(--hp-color-primary-100), var(--hp-color-white)); box-shadow: none; } body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower .hp-community-box__copy { display: grid; gap: .35rem; } body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower .hp-community-box__copy h2, body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower .hp-community-box__copy p { margin: 0; } body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower > :where(form, a) { margin: 0; } body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower > :where(form, a) .hp-btn, body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower > a.hp-btn { min-width: 10.5rem; min-height: 46px; } body.single-at_biz_dir .hp-storefront-support-lower + .hp-business-claim { margin-top: 0; } @media (max-width: 767px) { body.single-at_biz_dir .hp-community-box.hp-storefront-support-lower { grid-template-columns: 1fr; } } .hp-profile-discovery { display: grid; width: min(calc(100% - 2rem), 75rem); grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); gap: var(--hp-space-8); align-items: center; margin: 0 auto clamp(3rem, 7vw, 6rem); padding: clamp(1.5rem, 5vw, 3rem); border-radius: var(--hp-radius-xl); background: var(--hp-color-primary-900); color: var(--hp-color-white); } .hp-profile-discovery__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-200); font-size: var(--hp-text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hp-profile-discovery h2 { margin: 0 0 var(--hp-space-3); color: var(--hp-color-white); font-size: clamp(1.5rem, 4vw, 2.5rem); } .hp-profile-discovery p:not(.hp-profile-discovery__eyebrow) { margin: 0; color: var(--hp-color-white); line-height: 1.65; } .hp-profile-discovery__links { display: flex; flex-direction: column; gap: var(--hp-space-3); } .hp-profile-discovery__links .hp-c-btn { width: 100%; } .hp-profile-discovery__correction { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; color: var(--hp-color-white); font-weight: 700; } .hp-trust-badges { display: grid; gap: var(--hp-space-4); margin: var(--hp-space-6) auto; max-width: var(--hp-content-wide, 1180px); padding-inline: var(--hp-space-4); } .hp-trust-badge { background: var(--hp-color-white); border: 1px solid var(--hp-color-border, #d8dee8); border-left: 4px solid var(--hp-color-primary-600, #3154a5); border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow-sm); overflow-wrap: anywhere; padding: var(--hp-space-5); } .hp-trust-badge .hp-status-badge { background: var(--hp-color-primary-050, #eef3ff); border-radius: 999px; color: var(--hp-color-primary-800, #203c7a); display: inline-block; padding: .35rem .75rem; } @media (max-width: 767px) { /* Bottom clearance comes from the shared --hp-tabbar-clearance body rule (navigation.css); the old 6rem here stacked a second, phantom band on top of it. */ body.single-at_biz_dir .directorist-single { padding-inline: var(--hp-space-3) !important; padding-bottom: var(--hp-space-4) !important; } body.single-at_biz_dir .directorist-single-listing-header { padding: var(--hp-space-4) !important; } body.single-at_biz_dir .directorist-card__header { padding-inline: var(--hp-space-4) !important; } .hp-profile-discovery { grid-template-columns: 1fr; gap: var(--hp-space-6); margin-bottom: var(--hp-space-4); } .hp-business-claim { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { body.directorist-content-active *, body.directorist-content-active *::before, body.directorist-content-active *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Search-led local index direction. */ body.directorist-content-active .directorist-archive-contents { width: min(100%, 78rem); margin-inline: auto; padding: 0 var(--hp-space-4) clamp(3rem, 7vw, 6rem); } body.directorist-content-active .elementor-widget-directorist_search_listing, body.directorist-content-active .directorist-search-contents { position: relative; z-index: 3; pointer-events: none; } /* Directorist's search wrapper is taller than its visible form and overlaps * the archive toolbar below. Keep the wrapper available as the dropdown * stacking context, but only let the actual form receive pointer input so * the visible Grid/List/Map controls are never covered by empty space. */ body.directorist-content-active .directorist-search-form { pointer-events: auto; } body.directorist-content-active .directorist-search-field, body.directorist-content-active .directorist-form-group { margin: 0 !important; } body.directorist-content-active .directorist-search-field, body.directorist-content-active .directorist-form-element, body.directorist-content-active .select2-selection { border-color: var(--hp-color-border) !important; border-radius: var(--hp-radius-md) !important; background: var(--hp-color-white) !important; } /* Stage B V43: the keyword field had no explicit sizing at all, so * Directorist's own tight default padding read as cramped/clipped text -- * the one concrete gap the owner's screenshot showed compared to every * other search/filter surface on the site. Extend the existing override * block above rather than building a second search component. */ body.directorist-content-active .directorist-form-element, body.directorist-content-active .select2-selection { min-height: 48px !important; padding: 12px 16px !important; font-size: 0.95rem !important; box-sizing: border-box !important; } body.directorist-content-active .select2-selection__rendered { line-height: 24px !important; padding-left: 0 !important; } body.directorist-content-active .select2-selection__arrow { height: 46px !important; } body.directorist-content-active .directorist-search-field__input::placeholder { color: var(--hp-color-body) !important; opacity: 1; } /* Owner correction: Directorist never declares an explicit width/height for this * clear (x) control, so it renders sized to its ~16px icon glyph with no real hit * area around it -- taps that visibly land on the icon miss the actual clickable * box and fall through to the input underneath instead. A negative-inset ::after * enlarges the real clickable area to a touch-safe size without moving or resizing * the visible icon; the click/keyboard wiring itself lives in directorist.js. */ body.directorist-content-active .directorist-search-field__btn--clear { cursor: pointer; } body.directorist-content-active .directorist-search-field__btn--clear::after { content: ""; position: absolute; inset: -14px; } /* Stage B V43 owner correction (2026-08-03): Directorist ships this label as * a floating-placeholder that sits absolutely positioned on top of the * input (default: centred over it) and is meant to animate out of the way * once its own JS toggles .input-is-focused/.input-has-value on the * wrapper. Giving the label a real for/id pairing (inc/js/directorist.js) * did not touch that JS at all, but on staging the label stopped clearing * out of the way on focus, leaving its text visibly overlaid on the field * -- confirmed by the owner on iPhone via before/after screenshots. Force * it fully off-screen in every state instead of trying to fix Directorist's * own animation: it stays in the DOM with its real for/id and accessible * name for assistive tech, but is never sighted-visible, focused or not. * The class is repeated to out-specify Directorist's own * `.input-is-focused .directorist-search-field__label` rule (4 classes * deep) with room to spare, since both rules use !important. */ body.directorist-content-active .directorist-search-field__label.directorist-search-field__label.directorist-search-field__label.directorist-search-field__label.directorist-search-field__label { position: absolute !important; top: auto !important; left: auto !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; font-size: 0 !important; opacity: 0 !important; } /* .directorist-form-element/.directorist-btn-search/.directorist-btn-submit * are all real /