/* ========================================================= WALKER PROFESSIONAL FINDER Component-specific styles only. Shared colors and spacing language come from walker-standard.css. ========================================================= */ .walker-people-finder, .walker-people-finder * { box-sizing: border-box; } .walker-people-finder { margin-inline: auto; max-width: var(--walker-people-finder-max-width, 760px); position: relative; width: 100%; z-index: 8; } .walker-people-finder__shell { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 24px; box-shadow: 0 24px 62px rgba(8, 24, 33, 0.24), 0 3px 10px rgba(8, 24, 33, 0.1); padding: 8px; transition: var(--walker-ui-transition, 220ms ease); } .walker-people-finder:focus-within .walker-people-finder__shell { border-color: rgba(0, 165, 177, 0.72); box-shadow: 0 28px 66px rgba(8, 24, 33, 0.28), 0 0 0 4px rgba(0, 165, 177, 0.16); } .walker-people-finder__input-wrap { align-items: center; background: #f5f8f8; border-radius: 17px; display: flex; gap: 12px; min-height: 58px; padding: 0 16px; } .walker-people-finder__icon { color: var(--walker-ui-teal, #00a5b1); flex: 0 0 auto; height: 22px; width: 22px; } .walker-people-finder__icon, .walker-people-finder__clear svg, .walker-people-finder__result-arrow { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .walker-people-finder__input { appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--walker-ui-ink, #24343d) !important; flex: 1 1 auto; font-size: clamp(15px, 1.5vw, 17px) !important; font-weight: 600; line-height: 1.35; min-width: 0; outline: 0 !important; padding: 0 !important; width: 100%; } .walker-people-finder__input::-webkit-search-cancel-button { display: none; } .walker-people-finder__input::placeholder { color: #76858b; font-weight: 500; opacity: 1; } .walker-people-finder__clear { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #7f8c91; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 32px; justify-content: center; padding: 7px; transition: var(--walker-ui-transition, 220ms ease); width: 32px; } .walker-people-finder__clear:hover, .walker-people-finder__clear:focus-visible { background: rgba(0, 165, 177, 0.1); color: var(--walker-ui-teal-dark, #007d87); outline: 0; } .walker-people-finder__clear svg { height: 17px; width: 17px; } .walker-people-finder__results { background: var(--walker-ui-white, #fff); border: 1px solid rgba(21, 57, 70, 0.14); border-radius: 22px; box-shadow: 0 30px 74px rgba(9, 29, 38, 0.23), 0 4px 10px rgba(9, 29, 38, 0.08); left: 0; margin-top: 11px; overflow: hidden; position: absolute; right: 0; text-align: left; } /* * Body-level autocomplete portal. * The JavaScript moves the results node under so it cannot be clipped * by a hero, WPBakery row, animation wrapper, or any other overflow context. */ .walker-people-finder__results--portal { display: flex; flex-direction: column; left: auto; margin-top: 0; max-height: min(560px, calc(100vh - 24px)); position: fixed; right: auto; z-index: 2147483000; } .walker-people-finder__results--portal .walker-people-finder__result-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .walker-people-finder__results--portal .walker-people-finder__footer { flex: 0 0 auto; } .walker-people-finder__results[hidden], .walker-people-finder__clear[hidden] { display: none !important; } .walker-people-finder__result-list { display: grid; } .walker-people-finder__result { align-items: center; background: #fff; color: inherit; display: grid; gap: 13px; grid-template-columns: 54px minmax(0, 1fr) 20px; padding: 14px 17px; text-decoration: none !important; transition: var(--walker-ui-transition, 220ms ease); } .walker-people-finder__result + .walker-people-finder__result { border-top: 1px solid rgba(21, 57, 70, 0.08); } .walker-people-finder__result:hover, .walker-people-finder__result:focus-visible, .walker-people-finder__result.is-active { background: rgba(0, 165, 177, 0.075); outline: 0; } .walker-people-finder__avatar { align-items: center; background: radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.2), transparent 34%), linear-gradient(135deg, var(--walker-ui-teal-dark, #007d87), var(--walker-ui-navy, #17334b)); border: 1px solid rgba(0, 165, 177, 0.24); border-radius: 50%; color: #fff; display: flex; font-size: 14px; font-weight: 850; height: 52px; justify-content: center; letter-spacing: 0.04em; overflow: hidden; width: 52px; } .walker-people-finder__avatar img { display: block; height: 100%; object-fit: cover; width: 100%; } .walker-people-finder__result-copy { min-width: 0; } .walker-people-finder__name, .walker-people-finder__meta, .walker-people-finder__services { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .walker-people-finder__name { color: var(--walker-ui-navy, #17334b); font-size: 15px; font-weight: 850; letter-spacing: -0.015em; line-height: 1.25; } .walker-people-finder__meta { color: #65757b; font-size: 12px; font-weight: 650; line-height: 1.35; margin-top: 4px; } .walker-people-finder__services { color: var(--walker-ui-teal-dark, #007d87); font-size: 10px; font-weight: 850; letter-spacing: 0.11em; line-height: 1.35; margin-top: 5px; text-transform: uppercase; } .walker-people-finder__result-arrow { color: var(--walker-ui-teal, #00a5b1); height: 18px; transition: transform 180ms ease; width: 18px; } .walker-people-finder__result:hover .walker-people-finder__result-arrow, .walker-people-finder__result:focus-visible .walker-people-finder__result-arrow, .walker-people-finder__result.is-active .walker-people-finder__result-arrow { transform: translateX(3px); } .walker-people-finder__state { padding: 20px 20px 18px; } .walker-people-finder__state-heading { color: var(--walker-ui-navy, #17334b); font-size: 15px; font-weight: 850; line-height: 1.3; margin: 0; } .walker-people-finder__state-copy { color: #64757c; font-size: 13px; line-height: 1.6; margin: 5px 0 0; } .walker-people-finder__footer { align-items: center; background: #f7f9f9; border-top: 1px solid rgba(21, 57, 70, 0.08); display: flex; flex-wrap: wrap; gap: 7px 14px; justify-content: space-between; padding: 10px 17px; } .walker-people-finder__footer-note { color: #718087; font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; } .walker-people-finder__footer-link { color: var(--walker-ui-teal-dark, #007d87) !important; font-size: 12px; font-weight: 850; text-decoration: none !important; } .walker-people-finder__footer-link:hover, .walker-people-finder__footer-link:focus-visible { color: var(--walker-ui-navy, #17334b) !important; outline: 0; text-decoration: underline !important; } .walker-people-finder__helper { color: rgba(255, 255, 255, 0.66) !important; font-size: 13px !important; line-height: 1.5 !important; margin: 13px 12px 0 !important; text-align: center; } /* Light-page placement option. Add this class in WPBakery when needed. */ .walker-people-finder--light .walker-people-finder__helper { color: #65757b !important; } @media (max-width: 620px) { .walker-people-finder__shell { border-radius: 20px; padding: 6px; } .walker-people-finder__input-wrap { border-radius: 15px; min-height: 54px; padding-inline: 13px; } .walker-people-finder__input { font-size: 14px !important; } .walker-people-finder__results { border-radius: 18px; } .walker-people-finder__result { gap: 11px; grid-template-columns: 46px minmax(0, 1fr) 16px; padding: 12px 13px; } .walker-people-finder__avatar { font-size: 12px; height: 44px; width: 44px; } .walker-people-finder__name { font-size: 14px; } .walker-people-finder__meta { font-size: 11px; } .walker-people-finder__services { display: none; } .walker-people-finder__footer { align-items: flex-start; flex-direction: column; padding: 10px 13px; } } @media (prefers-reduced-motion: reduce) { .walker-people-finder__shell, .walker-people-finder__clear, .walker-people-finder__result, .walker-people-finder__result-arrow { transition: none; } }