/* * StageHill member directory * Scoped to [ultimatemember form_id="10"] through .stagehill-members-directory. * This file changes presentation only. Ultimate Member remains responsible for * AJAX searching, filters, sorting, member data, grid/list switching and paging. */ .stagehill-members-directory { --sh-members-surface: #ffffff; --sh-members-soft: #f7f7f7; --sh-members-soft-hover: #f1f1f1; --sh-members-border: #e1e1e1; --sh-members-border-strong: #cdcdcd; --sh-members-text: #151515; --sh-members-muted: #777777; --sh-members-accent: #111111; --sh-members-accent-hover: #000000; --sh-members-radius: 16px; --sh-members-control-radius: 10px; --sh-members-shadow: 0 12px 34px rgba(0, 0, 0, 0.045); width: 100%; max-width: 1160px !important; margin: 34px auto 58px !important; padding: 0 20px; color: var(--sh-members-text); } .stagehill-members-directory, .stagehill-members-directory *, .stagehill-members-directory *::before, .stagehill-members-directory *::after { box-sizing: border-box; } /* Search, sorting, and filters */ .stagehill-members-directory .um-member-directory-header { gap: 0; padding: 24px; margin: 0 0 28px; border: 1px solid var(--sh-members-border); border-radius: var(--sh-members-radius); background: var(--sh-members-surface); box-shadow: var(--sh-members-shadow); } .stagehill-members-directory .um-member-directory-header .um-member-directory-header-row:not(.um-member-directory-filters-bar) { align-items: center; margin: 0 0 16px; } .stagehill-members-directory .um-member-directory-header .um-member-directory-header-row:last-child { margin-bottom: 0; } .stagehill-members-directory .um-member-directory-header .um-member-directory-header-row.um-member-directory-search-row { justify-content: stretch; } .stagehill-members-directory .um-member-directory-header .um-member-directory-search-line { width: 100% !important; gap: 10px; } .stagehill-members-directory .um-member-directory-header .um-member-directory-search-line label { max-width: none !important; margin: 0 !important; } .stagehill-members-directory .um-member-directory-header input.um-search-line, .stagehill-members-directory .um-member-directory-header .um-search-filter input[type="text"], .stagehill-members-directory .um-member-directory-header .um-search-filter input[type="search"], .stagehill-members-directory .um-member-directory-header .um-search-filter input[type="number"], .stagehill-members-directory .um-member-directory-header .um-search-filter input[type="date"] { width: 100%; height: 48px !important; min-height: 48px; padding: 0 15px !important; border: 1px solid var(--sh-members-border) !important; border-radius: var(--sh-members-control-radius) !important; background: var(--sh-members-surface) !important; box-shadow: none !important; color: var(--sh-members-text) !important; font-size: 15px !important; line-height: 46px !important; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .stagehill-members-directory .um-member-directory-header input.um-search-line::placeholder, .stagehill-members-directory .um-member-directory-header .um-search-filter input::placeholder { color: #9a9a9a; opacity: 1; } .stagehill-members-directory .um-member-directory-header input.um-search-line:focus, .stagehill-members-directory .um-member-directory-header .um-search-filter input:focus { border-color: var(--sh-members-accent) !important; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.07) !important; } .stagehill-members-directory .um-member-directory-search-line .um-do-search.um-button { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: auto !important; min-width: 116px; height: 48px !important; min-height: 48px; margin: 0 !important; padding: 0 22px !important; border: 1px solid var(--sh-members-accent) !important; border-radius: var(--sh-members-control-radius) !important; background: var(--sh-members-accent) !important; box-shadow: none !important; color: #ffffff !important; font-size: 14px !important; font-weight: 650 !important; line-height: 46px !important; text-transform: none !important; transition: background-color 160ms ease, border-color 160ms ease; } .stagehill-members-directory .um-member-directory-search-line .um-do-search.um-button:hover, .stagehill-members-directory .um-member-directory-search-line .um-do-search.um-button:focus { border-color: var(--sh-members-accent-hover) !important; background: var(--sh-members-accent-hover) !important; color: #ffffff !important; } .stagehill-members-directory .um-member-directory-nav-line { min-height: 38px; gap: 16px; padding-top: 2px; border-top: 1px solid var(--sh-members-border); } .stagehill-members-directory .um-member-directory-nav-line .um-member-directory-sorting { align-items: center !important; min-width: 0; padding-top: 16px; color: var(--sh-members-muted); font-size: 14px; } .stagehill-members-directory .um-member-directory-sorting-a { align-items: center !important; min-width: 0; } .stagehill-members-directory .um-member-directory-sorting-a > a, .stagehill-members-directory .um-member-directory-filters-a > a { color: var(--sh-members-text) !important; font-size: 14px; font-weight: 650; line-height: 1.4; text-decoration: none !important; } .stagehill-members-directory .um-member-directory-sorting-a > a:hover, .stagehill-members-directory .um-member-directory-sorting-a > a:focus, .stagehill-members-directory .um-member-directory-filters-a > a:hover, .stagehill-members-directory .um-member-directory-filters-a > a:focus { color: var(--sh-members-text) !important; text-decoration: none !important; } .stagehill-members-directory .um-member-directory-sorting-a > i, .stagehill-members-directory .um-member-directory-filters-a > i { color: var(--sh-members-muted); font-size: 12px; } .stagehill-members-directory .um-member-directory-filters { align-items: center !important; padding-top: 16px; } .stagehill-members-directory .um-member-directory-filters-a { align-items: center !important; justify-content: flex-end !important; } .stagehill-members-directory .um-member-directory-view-type { margin-top: 16px !important; } .stagehill-members-directory .um-member-directory-view-type-a { color: var(--sh-members-muted) !important; } .stagehill-members-directory .um-member-directory-header-row.um-member-directory-filters-bar { padding: 0 !important; } .stagehill-members-directory .um-member-directory-header-row .um-search { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding-top: 2px; } .stagehill-members-directory .um-search-filter { align-items: center !important; } /* Select2 old/new markup used by different Ultimate Member builds. */ .stagehill-members-directory .um-search-filter .select2-container, .stagehill-members-directory .um-search-filter .um-s1 { width: 100% !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-choice, .stagehill-members-directory .um-search-filter .select2-container .select2-selection, .stagehill-members-directory .um-search-filter select.um-s1 { display: flex !important; align-items: center; width: 100% !important; height: 48px !important; min-height: 48px; padding: 0 42px 0 15px !important; border: 1px solid var(--sh-members-border) !important; border-radius: var(--sh-members-control-radius) !important; background: var(--sh-members-surface) !important; box-shadow: none !important; color: var(--sh-members-text) !important; font-size: 15px !important; line-height: 46px !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-chosen, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__rendered { padding: 0 !important; color: var(--sh-members-text) !important; font-size: 15px !important; line-height: 46px !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-arrow, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__arrow { top: 0 !important; right: 10px !important; width: 28px !important; height: 46px !important; border: 0 !important; background: transparent !important; } .stagehill-members-directory .um-search-filter .select2-container-active .select2-choice, .stagehill-members-directory .um-search-filter .select2-container--focus .select2-selection, .stagehill-members-directory .um-search-filter .select2-container--open .select2-selection { border-color: var(--sh-members-accent) !important; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.07) !important; } .stagehill-members-directory .um-filtered-line { align-items: center !important; gap: 8px; min-height: 0; margin-top: 12px !important; } .stagehill-members-directory .um-filtered-line .um-members-filter-tag { min-height: 32px; margin: 0 !important; padding: 5px 10px !important; border: 1px solid var(--sh-members-border) !important; border-radius: 8px !important; background: var(--sh-members-soft) !important; color: var(--sh-members-muted); font-size: 13px !important; line-height: 1.35; } .stagehill-members-directory .um-filtered-line .um-members-filter-tag strong { color: var(--sh-members-text); } .stagehill-members-directory .um-filtered-line .um-members-filter-remove { display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 7px !important; border-radius: 50%; color: var(--sh-members-muted); font-size: 18px !important; font-weight: 500 !important; line-height: 18px; } .stagehill-members-directory .um-filtered-line .um-members-filter-remove:hover { background: #e7e7e7; color: var(--sh-members-text) !important; } .stagehill-members-directory .um-filtered-line .um-clear-filters { margin-left: 2px; } .stagehill-members-directory .um-filtered-line .um-clear-filters a { margin: 0 !important; padding: 5px 2px !important; color: var(--sh-members-text) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } /* Sorting/dropdown menus */ .stagehill-members-directory .um-new-dropdown { padding: 7px; border: 1px solid var(--sh-members-border) !important; border-radius: 12px !important; background: var(--sh-members-surface) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12) !important; } .stagehill-members-directory .um-new-dropdown ul li a { padding: 10px 11px !important; border-radius: 7px; color: var(--sh-members-text) !important; font-size: 14px; line-height: 1.35 !important; text-decoration: none !important; } .stagehill-members-directory .um-new-dropdown ul li a:hover, .stagehill-members-directory .um-new-dropdown ul li a:focus { background: var(--sh-members-soft) !important; color: var(--sh-members-text) !important; } /* Results heading */ .stagehill-members-directory .um-members-wrapper { margin: 0 !important; } .stagehill-members-directory .um-members-intro { margin: 0 0 16px !important; text-align: left !important; } .stagehill-members-directory .um-members-total { color: var(--sh-members-text); font-size: 14px !important; font-weight: 650 !important; line-height: 1.4; } /* Grid cards */ .stagehill-members-directory .um-members-grid .um-gutter-sizer { width: 24px !important; } .stagehill-members-directory .um-members-grid .um-member { display: flex; flex-direction: column; width: calc((100% - 48px) / 3) !important; min-height: 350px; margin-bottom: 24px !important; border: 1px solid var(--sh-members-border) !important; border-radius: var(--sh-members-radius); background: var(--sh-members-surface) !important; box-shadow: var(--sh-members-shadow); overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .stagehill-members-directory .um-members-grid .um-member:hover { border-color: var(--sh-members-border-strong) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.07); transform: translateY(-2px); } .stagehill-members-directory .um-members-grid .um-member-photo { padding: 32px 20px 16px !important; } .stagehill-members-directory .um-members-grid .um-member-photo a { display: inline-flex !important; position: relative; border-radius: 50%; } .stagehill-members-directory .um-members-grid .um-member-photo a img { width: 120px !important; height: 120px !important; border: 1px solid var(--sh-members-border) !important; background: var(--sh-members-soft) !important; box-shadow: none !important; object-fit: cover; } .stagehill-members-directory .um-members-grid .um-member.with-cover .um-member-cover { border-bottom: 1px solid var(--sh-members-border); background: var(--sh-members-soft); } .stagehill-members-directory .um-members-grid .um-member.with-cover .um-member-photo { padding-top: 0 !important; } .stagehill-members-directory .um-members-grid .um-member.with-cover .um-member-photo a img { width: 96px !important; height: 96px !important; top: -34px !important; margin-bottom: -38px !important; } .stagehill-members-directory .um-members-grid .um-member-card { display: flex; flex: 1; flex-direction: column; padding: 0 22px 22px !important; } .stagehill-members-directory .um-members-grid .um-member-card.no-photo { padding-top: 28px !important; } .stagehill-members-directory .um-members-grid .um-member-name { display: flex; align-items: center; justify-content: center; position: relative; min-height: 28px; margin: 0 0 10px !important; } .stagehill-members-directory .um-members-grid .um-member-name::after { content: ""; position: absolute; width: 34px; height: 3px; margin-top: 38px; border-radius: 999px; background: var(--sh-members-accent); } .stagehill-members-directory .um-members-grid .um-member-name a, .stagehill-members-directory .um-members-list .um-member-name a { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; max-width: 100%; border: 0 !important; box-shadow: none !important; color: var(--sh-members-text) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; text-decoration: none !important; } .stagehill-members-directory .um-members-grid .um-member-name a:hover, .stagehill-members-directory .um-members-grid .um-member-name a:focus, .stagehill-members-directory .um-members-list .um-member-name a:hover, .stagehill-members-directory .um-members-list .um-member-name a:focus { color: var(--sh-members-text) !important; text-decoration: none !important; } .stagehill-members-directory .um-members-grid .um-member-tagline { padding: 5px 4px 0 !important; color: var(--sh-members-muted) !important; font-size: 13px !important; line-height: 1.65 !important; } .stagehill-members-directory .um-members-grid .um-members-edit-btn { height: auto !important; margin: 5px 0 8px !important; } .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button, .stagehill-members-directory .um-members-list .um-button { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 126px !important; min-height: 38px !important; margin: 0 auto !important; padding: 0 15px !important; border: 1px solid var(--sh-members-border) !important; border-radius: 8px !important; background: var(--sh-members-soft) !important; box-shadow: none !important; color: var(--sh-members-text) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 36px !important; text-decoration: none !important; text-transform: none !important; } .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:hover, .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:focus, .stagehill-members-directory .um-members-list .um-button:hover, .stagehill-members-directory .um-members-list .um-button:focus { border-color: var(--sh-members-border-strong) !important; background: var(--sh-members-soft-hover) !important; color: var(--sh-members-text) !important; } .stagehill-members-directory .um-members-grid .um-member-meta-main { margin-top: auto; } .stagehill-members-directory .um-members-grid .um-member-meta { margin: 17px 0 0 !important; padding: 17px 0 0 !important; border-top: 1px solid var(--sh-members-border) !important; color: var(--sh-members-muted); } .stagehill-members-directory .um-members-grid .um-member-metaline { padding-top: 7px !important; color: var(--sh-members-muted); font-size: 13px !important; line-height: 1.55 !important; } .stagehill-members-directory .um-members-grid .um-member-metaline strong { color: var(--sh-members-text); font-weight: 650; } .stagehill-members-directory .um-members-grid .um-member-more, .stagehill-members-directory .um-members-grid .um-member-less { margin-top: 12px; } .stagehill-members-directory .um-members-grid .um-member-more a, .stagehill-members-directory .um-members-grid .um-member-less a { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 30px; border-radius: 8px; color: var(--sh-members-text) !important; text-decoration: none !important; } .stagehill-members-directory .um-members-grid .um-member-more a:hover, .stagehill-members-directory .um-members-grid .um-member-less a:hover { background: var(--sh-members-soft); } .stagehill-members-directory .um-members-grid .um-member-more a i, .stagehill-members-directory .um-members-grid .um-member-less a i { height: 28px !important; font-size: 24px !important; line-height: 28px !important; } /* List view */ .stagehill-members-directory .um-members-list { gap: 16px !important; } .stagehill-members-directory .um-members-list .um-member { padding: 22px !important; border: 1px solid var(--sh-members-border) !important; border-radius: var(--sh-members-radius); background: var(--sh-members-surface) !important; box-shadow: var(--sh-members-shadow); } .stagehill-members-directory .um-members-list .um-member-photo, .stagehill-members-directory .um-members-list .um-member-photo a, .stagehill-members-directory .um-members-list .um-member-photo a img { width: 96px !important; height: 96px !important; } .stagehill-members-directory .um-members-list .um-member-photo a img { border: 1px solid var(--sh-members-border) !important; background: var(--sh-members-soft) !important; object-fit: cover; } .stagehill-members-directory .um-members-list .um-member-name { margin-bottom: 8px !important; } .stagehill-members-directory .um-members-list .um-member-name a { justify-content: flex-start; } .stagehill-members-directory .um-members-list .um-member-tagline, .stagehill-members-directory .um-members-list .um-member-metaline { color: var(--sh-members-muted) !important; font-size: 13px !important; line-height: 1.55 !important; } .stagehill-members-directory .um-members-list .um-member-card-footer { padding-top: 14px !important; border-top: 1px solid var(--sh-members-border) !important; } /* Empty state and pagination */ .stagehill-members-directory .um-members-none { padding: 38px 24px; border: 1px dashed var(--sh-members-border-strong); border-radius: var(--sh-members-radius); background: var(--sh-members-soft); color: var(--sh-members-muted); text-align: center; } .stagehill-members-directory .um-members-pagination-box { margin-top: 8px; } .stagehill-members-directory .um-members-pagi { gap: 5px; } .stagehill-members-directory .um-members-pagi .pagi { display: inline-flex !important; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px !important; border: 1px solid var(--sh-members-border) !important; border-radius: 8px !important; background: var(--sh-members-surface) !important; color: var(--sh-members-text) !important; font-size: 13px; font-weight: 650; line-height: 36px !important; text-decoration: none !important; } .stagehill-members-directory .um-members-pagi .pagi:hover, .stagehill-members-directory .um-members-pagi .pagi:focus { border-color: var(--sh-members-border-strong) !important; background: var(--sh-members-soft) !important; color: var(--sh-members-text) !important; } .stagehill-members-directory .um-members-pagi .pagi.current { border-color: var(--sh-members-accent) !important; background: var(--sh-members-accent) !important; color: #ffffff !important; } /* Keep AJAX feedback restrained and centered within the directory. */ .stagehill-members-directory .um-members-overlay { border-radius: var(--sh-members-radius); background: rgba(255, 255, 255, 0.68) !important; backdrop-filter: blur(2px); } .stagehill-members-directory .um-members-overlay .um-ajax-loading { border-left-color: var(--sh-members-accent) !important; } @media (max-width: 960px) { .stagehill-members-directory { margin-top: 26px !important; padding: 0 18px; } .stagehill-members-directory .um-member-directory-header-row .um-search { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .stagehill-members-directory .um-members-grid .um-gutter-sizer { width: 20px !important; } .stagehill-members-directory .um-members-grid .um-member { width: calc((100% - 20px) / 2) !important; } } @media (max-width: 680px) { .stagehill-members-directory { margin: 20px auto 42px !important; padding: 0 12px; } .stagehill-members-directory .um-member-directory-header { padding: 16px; border-radius: 14px; } .stagehill-members-directory .um-member-directory-search-line { flex-direction: column !important; align-items: stretch !important; gap: 9px; } .stagehill-members-directory .um-member-directory-search-line .um-do-search.um-button { width: 100% !important; } .stagehill-members-directory .um-member-directory-nav-line { align-items: flex-start !important; flex-wrap: wrap !important; gap: 5px 12px; } .stagehill-members-directory .um-member-directory-sorting, .stagehill-members-directory .um-member-directory-filters { width: 100% !important; flex: 0 0 100% !important; justify-content: flex-start !important; text-align: left !important; } .stagehill-members-directory .um-member-directory-filters-a { justify-content: flex-start !important; } .stagehill-members-directory .um-member-directory-header-row .um-search { grid-template-columns: minmax(0, 1fr) !important; } .stagehill-members-directory .um-members-grid .um-gutter-sizer { width: 0 !important; } .stagehill-members-directory .um-members-grid .um-member { width: 100% !important; min-height: 0; margin-bottom: 16px !important; border-radius: 14px; } .stagehill-members-directory .um-members-grid .um-member-photo { padding-top: 26px !important; } .stagehill-members-directory .um-members-list .um-member { padding: 16px !important; border-radius: 14px; } } @media (max-width: 420px) { .stagehill-members-directory { padding: 0 8px; } .stagehill-members-directory .um-member-directory-header { padding: 14px; } .stagehill-members-directory .um-members-grid .um-member-card { padding-right: 16px !important; padding-left: 16px !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.3 * ---------------------------------------------------------------------- */ .stagehill-members-directory { --sh-members-soft: #f8f8f8; --sh-members-soft-hover: #f1f1f1; --sh-members-border: #dedede; --sh-members-border-strong: #bfbfbf; --sh-members-radius: 14px; --sh-members-control-radius: 9px; --sh-members-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); max-width: 1180px !important; } .stagehill-members-directory .um-member-directory-header { position: relative; padding: 22px 24px 21px; overflow: visible; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035); } .stagehill-members-directory .um-member-directory-header::before { content: ""; position: absolute; top: -1px; left: 24px; width: 54px; height: 3px; border-radius: 0 0 999px 999px; background: #111111; } .stagehill-members-directory .um-member-directory-search-line label { position: relative; } .stagehill-members-directory .um-member-directory-header input.um-search-line { padding-right: 48px !important; font-weight: 500 !important; } .stagehill-members-directory .um-member-directory-header input.um-search-line::-webkit-search-cancel-button, .stagehill-members-directory .um-member-directory-header input.um-search-line::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } .stagehill-members-directory .stagehill-members-search-clear { display: none; align-items: center; justify-content: center; position: absolute; top: 50%; right: 12px; z-index: 3; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #111111; font: inherit; font-size: 22px; font-weight: 400; line-height: 1; text-align: center; transform: translateY(-50%); cursor: pointer; } .stagehill-members-directory .stagehill-members-search-clear.is-visible { display: inline-flex; } .stagehill-members-directory .stagehill-members-search-clear:hover, .stagehill-members-directory .stagehill-members-search-clear:focus { border: 0; background: transparent; box-shadow: none; color: #111111; outline: none; } .stagehill-members-directory .stagehill-members-search-clear:focus-visible { outline: 2px solid #111111; outline-offset: 1px; } .stagehill-members-directory .um-member-directory-nav-line { gap: 12px; } .stagehill-members-directory .um-member-directory-sorting-a, .stagehill-members-directory .um-member-directory-filters-a { display: inline-flex !important; align-items: center !important; min-height: 36px; padding: 7px 10px; border: 1px solid var(--sh-members-border); border-radius: 8px; background: var(--sh-members-soft); transition: border-color 160ms ease, background-color 160ms ease; } .stagehill-members-directory .um-member-directory-sorting-a:hover, .stagehill-members-directory .um-member-directory-filters-a:hover { border-color: var(--sh-members-border-strong); background: #ffffff; } .stagehill-members-directory .um-member-directory-sorting-a > a, .stagehill-members-directory .um-member-directory-filters-a > a { font-weight: 700; } .stagehill-members-directory .um-member-directory-sorting-a > i, .stagehill-members-directory .um-member-directory-filters-a > i { margin-left: 6px !important; } .stagehill-members-directory .um-filtered-line { padding-top: 2px; } .stagehill-members-directory .um-filtered-line .um-members-filter-tag { border-color: #d4d4d4 !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025); } .stagehill-members-directory .um-filtered-line .um-members-filter-remove { color: #111111 !important; } .stagehill-members-directory .um-filtered-line .um-clear-filters a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 32px; padding: 5px 10px !important; border: 1px solid var(--sh-members-border); border-radius: 8px; background: var(--sh-members-soft); font-weight: 700; transition: border-color 160ms ease, background-color 160ms ease; } .stagehill-members-directory .um-filtered-line .um-clear-filters a:hover, .stagehill-members-directory .um-filtered-line .um-clear-filters a:focus { border-color: var(--sh-members-border-strong); background: #ffffff; } .stagehill-members-directory .um-members-intro { display: flex; align-items: center; justify-content: space-between; } .stagehill-members-directory .um-members-total { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px; border: 1px solid var(--sh-members-border); border-radius: 999px; background: var(--sh-members-soft); } .stagehill-members-directory .um-members-grid .um-member { position: relative; min-height: 360px; border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.035); } .stagehill-members-directory .um-members-grid .um-member::before { content: ""; position: absolute; top: -1px; left: 50%; z-index: 2; width: 44px; height: 3px; border-radius: 0 0 999px 999px; background: #111111; transform: translateX(-50%); opacity: 0.8; transition: width 180ms ease, opacity 180ms ease; } .stagehill-members-directory .um-members-grid .um-member:hover::before { width: 72px; opacity: 1; } .stagehill-members-directory .um-members-grid .um-member-photo a img { border: 4px solid #ffffff !important; box-shadow: 0 0 0 1px var(--sh-members-border), 0 8px 22px rgba(0, 0, 0, 0.08) !important; } .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status, .stagehill-members-directory .um-members-grid .um-member-photo span[class*="online"] { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } .stagehill-members-directory .um-members-grid .um-member-name a, .stagehill-members-directory .um-members-list .um-member-name a { font-size: 19px !important; font-weight: 750 !important; } .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button, .stagehill-members-directory .um-members-list .um-button { border-color: #d5d5d5 !important; background: #ffffff !important; font-weight: 700 !important; } .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:hover, .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:focus, .stagehill-members-directory .um-members-list .um-button:hover, .stagehill-members-directory .um-members-list .um-button:focus { border-color: #111111 !important; background: #111111 !important; color: #ffffff !important; } .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:hover i, .stagehill-members-directory .um-members-grid .um-edit-profile-btn.um-button:focus i, .stagehill-members-directory .um-members-list .um-button:hover i, .stagehill-members-directory .um-members-list .um-button:focus i { color: #ffffff !important; } .stagehill-members-directory .um-members-list .um-member { position: relative; overflow: hidden; } .stagehill-members-directory .um-members-list .um-member::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 0; width: 3px; border-radius: 0 999px 999px 0; background: #111111; opacity: 0.85; } .stagehill-members-directory .um-members-pagi .pagi { font-weight: 700; } @media (max-width: 680px) { .stagehill-members-directory .um-member-directory-header::before { left: 16px; } .stagehill-members-directory .um-member-directory-sorting-a, .stagehill-members-directory .um-member-directory-filters-a { width: auto; } .stagehill-members-directory .um-members-grid .um-member { min-height: 0; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.4 * WorkScout-style dropdown controls and a zero-result-safe heading. * ---------------------------------------------------------------------- */ /* Ultimate Member's zero-result response intentionally contains no heading. * These guards also cover cached/third-party template overrides that leave an * empty result-count element behind. */ .stagehill-members-directory .um-members-intro:has(.um-members-total:empty), .stagehill-members-directory .um-members-total:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Country, Account type, Online Status, and any future Select2 filters use the * same restrained rectangular field language as WorkScout controls. */ .stagehill-members-directory .um-search-filter .select2-container .select2-choice, .stagehill-members-directory .um-search-filter .select2-container .select2-selection--single, .stagehill-members-directory .um-search-filter select.um-s1 { display: flex !important; align-items: center !important; width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 46px 0 15px !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.25 7 7.25l6-6' fill='none' stroke='%23999' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important; box-shadow: none !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 48px !important; transition: border-color 150ms ease, box-shadow 150ms ease !important; } .stagehill-members-directory .um-search-filter select.um-s1 { -webkit-appearance: none !important; appearance: none !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-chosen, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__rendered { width: 100% !important; padding: 0 !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 46px !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-default, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__placeholder { color: #999999 !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-arrow, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__arrow, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__arrow b { display: none !important; } .stagehill-members-directory .um-search-filter .select2-container-active .select2-choice, .stagehill-members-directory .um-search-filter .select2-container--focus .select2-selection--single, .stagehill-members-directory .um-search-filter .select2-container--open .select2-selection--single, .stagehill-members-directory .um-search-filter select.um-s1:focus { border-color: #b9b9b9 !important; box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.045) !important; outline: 0 !important; } /* Sort by is a dropdown too, so present it as a full WorkScout field rather * than the compact rounded chip used in the previous pass. */ .stagehill-members-directory .um-member-directory-sorting-a { display: inline-flex !important; position: relative !important; align-items: center !important; width: auto !important; min-width: 215px !important; height: 48px !important; min-height: 48px !important; padding: 0 46px 0 14px !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background: #ffffff !important; box-shadow: none !important; transition: border-color 150ms ease, box-shadow 150ms ease !important; } .stagehill-members-directory .um-member-directory-sorting-a::after { content: ""; position: absolute; top: 50%; right: 16px; width: 12px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.25 7 7.25l6-6' fill='none' stroke='%23999' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat; transform: translateY(-50%); pointer-events: none; } .stagehill-members-directory .um-member-directory-sorting-a:hover, .stagehill-members-directory .um-member-directory-sorting-a:focus-within, .stagehill-members-directory .um-member-directory-sorting-a.um-member-directory-sorting-visible { border-color: #b9b9b9 !important; background: #ffffff !important; box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.045) !important; } .stagehill-members-directory .um-member-directory-sorting-a > a { display: block !important; width: 100% !important; overflow: hidden !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 46px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .stagehill-members-directory .um-member-directory-sorting-a > i { display: none !important; } /* WorkScout-style dropdown panels and options. The sorting panel remains * inside the directory; Select2 panels receive the companion class in JS. */ .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown { width: 100% !important; min-width: 215px !important; padding: 5px 0 !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11) !important; overflow: hidden !important; } .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown ul li a { padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; white-space: normal !important; } .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown ul li a:hover, .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown ul li a:focus, .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown ul li a[data-selected="1"] { background: #f5f5f5 !important; color: #111111 !important; } .select2-dropdown.stagehill-members-workscout-dropdown, .select2-drop.stagehill-members-workscout-dropdown { padding: 5px 0 !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11) !important; overflow: hidden !important; } .select2-dropdown.stagehill-members-workscout-dropdown .select2-search--dropdown, .select2-drop.stagehill-members-workscout-dropdown .select2-search { padding: 8px 10px !important; } .select2-dropdown.stagehill-members-workscout-dropdown .select2-search__field, .select2-drop.stagehill-members-workscout-dropdown .select2-input { height: 40px !important; padding: 0 12px !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; box-shadow: none !important; font-size: 14px !important; outline: 0 !important; } .select2-dropdown.stagehill-members-workscout-dropdown .select2-results__options, .select2-drop.stagehill-members-workscout-dropdown .select2-results { max-height: 260px !important; padding: 0 !important; } .select2-dropdown.stagehill-members-workscout-dropdown .select2-results__option, .select2-drop.stagehill-members-workscout-dropdown .select2-results li { margin: 0 !important; padding: 10px 14px !important; border: 0 !important; background: #ffffff !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; } .select2-dropdown.stagehill-members-workscout-dropdown .select2-results__option--highlighted, .select2-dropdown.stagehill-members-workscout-dropdown .select2-results__option[aria-selected="true"], .select2-drop.stagehill-members-workscout-dropdown .select2-highlighted, .select2-drop.stagehill-members-workscout-dropdown .select2-result-selectable:hover { background: #f5f5f5 !important; color: #111111 !important; } @media (max-width: 680px) { .stagehill-members-directory .um-member-directory-sorting { width: 100% !important; } .stagehill-members-directory .um-member-directory-sorting-a { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.5 * Mobile-safe placeholders, CSS-only arrows, and debounced AJAX search. * ---------------------------------------------------------------------- */ /* The form-10 directory searches live through AJAX; the field therefore owns * the full row and the legacy submit button is not needed. */ .stagehill-members-directory .um-member-directory-search-line { display: block !important; } .stagehill-members-directory .um-member-directory-search-line label { display: block !important; position: relative !important; width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } .stagehill-members-directory .um-member-directory-search-line .um-do-search.um-button { display: none !important; } .stagehill-members-directory .um-member-directory-header input.um-search-line { width: 100% !important; padding-right: 52px !important; } /* Keep the black clear control pre-rendered and stable on desktop and mobile. */ .stagehill-members-directory .stagehill-members-search-clear { display: inline-flex !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; color: #111111 !important; transition: opacity 120ms ease, visibility 120ms ease !important; } .stagehill-members-directory .stagehill-members-search-clear.is-visible { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .stagehill-members-directory .stagehill-members-search-clear, .stagehill-members-directory .stagehill-members-search-clear:hover, .stagehill-members-directory .stagehill-members-search-clear:focus, .stagehill-members-directory .stagehill-members-search-clear:active { border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: #111111 !important; } /* Dark-mode engines can transform data-URI background arrows into repeating * line patterns. All member-directory arrows are now pure CSS borders. */ .stagehill-members-directory .um-search-filter.um-select-filter-type { position: relative !important; } .stagehill-members-directory .um-search-filter.um-select-filter-type::after { content: "" !important; position: absolute !important; top: 50% !important; right: 18px !important; z-index: 4 !important; width: 9px !important; height: 9px !important; margin-top: -7px !important; border: 0 !important; border-right: 2px solid #999999 !important; border-bottom: 2px solid #999999 !important; background: transparent !important; background-image: none !important; transform: rotate(45deg) !important; pointer-events: none !important; } .stagehill-members-directory .um-search-filter .select2-container, .stagehill-members-directory .um-search-filter .select2-container .select2-choice, .stagehill-members-directory .um-search-filter .select2-container .select2-selection, .stagehill-members-directory .um-search-filter .select2-container .select2-selection--single, .stagehill-members-directory .um-search-filter select.um-s1 { background-image: none !important; background-repeat: no-repeat !important; } .stagehill-members-directory .um-search-filter .select2-container .select2-arrow, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__arrow, .stagehill-members-directory .um-search-filter .select2-container .select2-selection__arrow b { display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; } /* Make placeholders survive Select2 reinitialisation and remain readable on * narrow screens. The JS also labels the native empty option as a fallback. */ .stagehill-members-directory .um-search-filter .select2-container, .stagehill-members-directory .um-search-filter .select2-selection--single, .stagehill-members-directory .um-search-filter .select2-choice { display: block !important; width: 100% !important; min-width: 0 !important; } .stagehill-members-directory .um-search-filter .select2-chosen, .stagehill-members-directory .um-search-filter .select2-selection__rendered { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; text-indent: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .stagehill-members-directory .um-search-filter .stagehill-select-placeholder, .stagehill-members-directory .um-search-filter .select2-selection__placeholder, .stagehill-members-directory .um-search-filter .select2-default, .stagehill-members-directory .um-search-filter select.stagehill-select-empty { color: #999999 !important; } /* Sort by uses the same field geometry and the same CSS-only chevron. */ .stagehill-members-directory .um-member-directory-sorting-a { background-image: none !important; } .stagehill-members-directory .um-member-directory-sorting-a::after { content: "" !important; top: 50% !important; right: 18px !important; width: 9px !important; height: 9px !important; border: 0 !important; border-right: 2px solid #999999 !important; border-bottom: 2px solid #999999 !important; background: transparent !important; background-image: none !important; transform: translateY(-65%) rotate(45deg) !important; } @media (max-width: 680px) { .stagehill-members-directory .um-member-directory-header { padding: 16px !important; } .stagehill-members-directory .um-member-directory-search-line { display: block !important; } .stagehill-members-directory .um-member-directory-nav-line { display: flex !important; align-items: stretch !important; } .stagehill-members-directory .um-member-directory-sorting { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; padding-top: 16px !important; } .stagehill-members-directory .um-member-directory-sorting > span { display: block !important; width: 100% !important; font-size: 14px !important; line-height: 1.3 !important; } .stagehill-members-directory .um-member-directory-sorting-a { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; } .stagehill-members-directory .um-member-directory-sorting-a > a { width: 100% !important; line-height: 46px !important; } .stagehill-members-directory .um-member-directory-sorting-a .um-new-dropdown { left: 0 !important; right: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; } .stagehill-members-directory .um-member-directory-filters, .stagehill-members-directory .um-member-directory-filters-a { max-width: 100% !important; } .stagehill-members-directory .um-member-directory-header-row .um-search, .stagehill-members-directory .um-search-filter, .stagehill-members-directory .um-search-filter .select2-container, .stagehill-members-directory .um-search-filter select.um-s1 { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .stagehill-members-directory .um-search-filter .select2-choice, .stagehill-members-directory .um-search-filter .select2-selection--single, .stagehill-members-directory .um-search-filter select.um-s1 { height: 52px !important; min-height: 52px !important; line-height: 50px !important; } .stagehill-members-directory .um-search-filter .select2-chosen, .stagehill-members-directory .um-search-filter .select2-selection__rendered { font-size: 15px !important; line-height: 50px !important; } .stagehill-members-directory .stagehill-members-search-clear { right: 10px !important; width: 34px !important; height: 34px !important; font-size: 24px !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.6 * Form 10 only: guaranteed clear X and unified WorkScout sort dropdown. * ---------------------------------------------------------------------- */ /* Native browser search controls are disabled because the plugin supplies one * predictable clear control with the existing AJAX search handler. */ .stagehill-members-directory input.um-search-line::-webkit-search-cancel-button, .stagehill-members-directory input.um-search-line::-webkit-search-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; } /* The button is always mounted to prevent first-paint movement. Visibility is * controlled by .is-visible; the X itself is made from two black CSS lines and * therefore cannot disappear through icon-font or inherited glyph styling. */ .stagehill-members-directory button.stagehill-members-search-clear, .stagehill-members-directory button.stagehill-members-search-clear:hover, .stagehill-members-directory button.stagehill-members-search-clear:focus, .stagehill-members-directory button.stagehill-members-search-clear:active { position: absolute !important; top: 50% !important; right: 11px !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: translateY(-50%) !important; transform-origin: center !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; transition: opacity 120ms ease, visibility 120ms ease !important; } .stagehill-members-directory button.stagehill-members-search-clear.is-visible, .stagehill-members-directory button.stagehill-members-search-clear.is-visible:hover, .stagehill-members-directory button.stagehill-members-search-clear.is-visible:focus, .stagehill-members-directory button.stagehill-members-search-clear.is-visible:active { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .stagehill-members-directory .stagehill-members-search-clear-icon { position: relative !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; transform: none !important; } .stagehill-members-directory .stagehill-members-search-clear-icon::before, .stagehill-members-directory .stagehill-members-search-clear-icon::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 17px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 2px !important; background: #111111 !important; background-color: #111111 !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform-origin: center !important; pointer-events: none !important; } .stagehill-members-directory .stagehill-members-search-clear-icon::before { transform: translate(-50%, -50%) rotate(45deg) !important; } .stagehill-members-directory .stagehill-members-search-clear-icon::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } .stagehill-members-directory button.stagehill-members-search-clear:focus-visible { outline: 2px solid #111111 !important; outline-offset: 1px !important; } /* Sort by uses the exact same control dimensions, border, radius, typography, * chevron, focus treatment, panel, and option styling as the form's Country, * Account type, and Online Status Select2 fields. */ .stagehill-members-directory .stagehill-members-sort-field { position: relative !important; display: grid !important; grid-template-columns: max-content minmax(260px, 360px) !important; align-items: center !important; gap: 12px !important; width: fit-content !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding-top: 16px !important; } .stagehill-members-directory .stagehill-members-sort-label { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: var(--sh-members-muted) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; white-space: nowrap !important; } .stagehill-members-directory .stagehill-members-sort-control, .stagehill-members-directory .stagehill-members-sort-control:hover, .stagehill-members-directory .stagehill-members-sort-control:focus-within, .stagehill-members-directory .stagehill-members-sort-control.um-new-dropdown-shown { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 46px 0 15px !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 150ms ease, box-shadow 150ms ease !important; cursor: pointer !important; } .stagehill-members-directory .stagehill-members-sort-control:hover, .stagehill-members-directory .stagehill-members-sort-control:focus-within, .stagehill-members-directory .stagehill-members-sort-control.um-new-dropdown-shown { border-color: #b9b9b9 !important; box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.045) !important; } .stagehill-members-directory .stagehill-members-sort-control > a, .stagehill-members-directory .stagehill-members-sort-control > a:hover, .stagehill-members-directory .stagehill-members-sort-control > a:focus, .stagehill-members-directory .stagehill-members-sort-control > a:active { display: block !important; width: 100% !important; min-width: 0 !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 46px !important; text-align: left !important; text-decoration: none !important; text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hidden !important; } .stagehill-members-directory .stagehill-members-sort-control > i { display: none !important; } .stagehill-members-directory .stagehill-members-sort-control::after { content: "" !important; position: absolute !important; top: 50% !important; right: 18px !important; z-index: 2 !important; display: block !important; width: 9px !important; height: 9px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-right: 2px solid #999999 !important; border-bottom: 2px solid #999999 !important; background: transparent !important; background-image: none !important; transform: translateY(-65%) rotate(45deg) !important; pointer-events: none !important; } /* Ultimate Member clones the sort menu into body. This class is attached to * that clone by the existing StageHill directory script. */ body > .um-new-dropdown.stagehill-members-sort-dropdown { z-index: 999999 !important; left: var(--stagehill-sort-dropdown-left) !important; width: var(--stagehill-sort-dropdown-width) !important; min-width: var(--stagehill-sort-dropdown-width) !important; max-width: calc(100vw - 16px) !important; margin: 0 !important; padding: 5px 0 !important; border: 1px solid #e0e0e0 !important; border-radius: 3px !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11) !important; box-sizing: border-box !important; overflow: hidden !important; } body > .um-new-dropdown.stagehill-members-sort-dropdown ul { max-height: 260px !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; list-style: none !important; } body > .um-new-dropdown.stagehill-members-sort-dropdown ul li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; } body > .um-new-dropdown.stagehill-members-sort-dropdown ul li a, body > .um-new-dropdown.stagehill-members-sort-dropdown ul li a:visited { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; color: #666666 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; box-sizing: border-box !important; } body > .um-new-dropdown.stagehill-members-sort-dropdown ul li a:hover, body > .um-new-dropdown.stagehill-members-sort-dropdown ul li a:focus, body > .um-new-dropdown.stagehill-members-sort-dropdown ul li a[data-selected="1"] { background: #f5f5f5 !important; color: #111111 !important; text-decoration: none !important; } @media (max-width: 680px) { .stagehill-members-directory .stagehill-members-sort-field { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; max-width: none !important; } .stagehill-members-directory .stagehill-members-sort-label { width: 100% !important; font-size: 15px !important; white-space: normal !important; } .stagehill-members-directory .stagehill-members-sort-control { width: 100% !important; height: 52px !important; min-height: 52px !important; } .stagehill-members-directory .stagehill-members-sort-control > a { height: 50px !important; line-height: 50px !important; } .stagehill-members-directory button.stagehill-members-search-clear, .stagehill-members-directory button.stagehill-members-search-clear:hover, .stagehill-members-directory button.stagehill-members-search-clear:focus, .stagehill-members-directory button.stagehill-members-search-clear:active { right: 10px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.7 * Keep the guaranteed black X vertically centred inside the search field. * ---------------------------------------------------------------------- */ .stagehill-members-directory .um-member-directory-search-line label { position: relative !important; } .stagehill-members-directory .um-member-directory-header input.um-search-line { display: block !important; margin: 0 !important; vertical-align: top !important; } .stagehill-members-directory button.stagehill-members-search-clear, .stagehill-members-directory button.stagehill-members-search-clear:hover, .stagehill-members-directory button.stagehill-members-search-clear:focus, .stagehill-members-directory button.stagehill-members-search-clear:active { /* The scoped search input is always 48px high. Anchoring the button to its * 24px centre prevents the label's inherited line box from pushing it down. */ top: 24px !important; transform: translateY(-50%) !important; } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.8 * Keep the online indicator as the dot only, with no ring, tile, or backdrop. * ---------------------------------------------------------------------- */ .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status, .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status:hover, .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status:focus, .stagehill-members-directory .um-members-grid .um-member-photo span[class*="online"] { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: 0 !important; } .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status::before, .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status::after, .stagehill-members-directory .um-members-grid .um-member-photo span[class*="online"]::before, .stagehill-members-directory .um-members-grid .um-member-photo span[class*="online"]::after, .stagehill-members-directory .um-members-grid .um-member-photo .um-online-status > i { border: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: 0 !important; } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.9 * Smooth form-10 biography expansion while Masonry continuously reflows. * ---------------------------------------------------------------------- */ .stagehill-members-directory .um-members-grid .um-member-meta { will-change: height, opacity; } .stagehill-members-directory .um-members-grid.stagehill-grid-reflowing, .stagehill-members-directory .um-members-grid.stagehill-grid-reflowing .um-member { will-change: height, transform, top, left; } @media (prefers-reduced-motion: reduce) { .stagehill-members-directory .um-members-grid .um-member-meta, .stagehill-members-directory .um-members-grid .um-member { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.10 * Equal-height form-10 cards with a biography panel that opens upward inside * the card. No card dimensions or Masonry positions change when it opens. * ---------------------------------------------------------------------- */ .stagehill-members-directory .um-members-grid .um-member { height: 560px !important; min-height: 560px !important; max-height: 560px !important; } .stagehill-members-directory .um-members-grid .um-member-card { position: relative !important; min-height: 0 !important; overflow: hidden !important; padding-bottom: 58px !important; } /* Reserve the same vertical space for every member name, including names that * wrap to a second line. */ .stagehill-members-directory .um-members-grid .stagehill-member-name-slot { display: flex !important; align-items: center !important; justify-content: center !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 2px !important; overflow: hidden !important; } .stagehill-members-directory .um-members-grid .stagehill-member-name-slot::after { margin-top: 48px !important; } .stagehill-members-directory .um-members-grid .stagehill-member-name-slot a { display: -webkit-box !important; max-height: 52px !important; overflow: hidden !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center !important; } /* Keep an identical edit-button slot even when the current visitor cannot edit * that member. The empty slot is visually transparent. */ .stagehill-members-directory .um-members-grid .stagehill-member-edit-slot { display: flex !important; align-items: center !important; justify-content: center !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; margin: 0 !important; padding: 4px 0 8px !important; } /* Exactly four aligned detail rows: account/member type, country, joined date, * and last-active date, using the form's existing configured field order. */ .stagehill-members-directory .um-members-grid .stagehill-member-details { display: grid !important; grid-template-rows: 42px repeat(3, 24px) !important; align-content: start !important; height: 114px !important; min-height: 114px !important; max-height: 114px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .stagehill-members-directory .um-members-grid .stagehill-member-detail-slot { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 4px !important; overflow: hidden !important; color: var(--sh-members-muted) !important; font-size: 13px !important; line-height: 1.55 !important; text-align: center !important; } .stagehill-members-directory .um-members-grid .stagehill-member-detail-slot-1 { padding-top: 2px !important; white-space: normal !important; } .stagehill-members-directory .um-members-grid .stagehill-member-detail-slot:not(.stagehill-member-detail-slot-1) { white-space: nowrap !important; text-overflow: ellipsis !important; } .stagehill-members-directory .stagehill-member-empty-value { color: var(--sh-members-muted) !important; opacity: 0.72; } /* The control stays at the bottom of the fixed card. The biography itself is * an internal overlay that travels upward and scrolls when its content is long. */ .stagehill-members-directory .um-members-grid .stagehill-member-biography { position: absolute !important; right: 22px !important; bottom: 12px !important; left: 22px !important; z-index: 8 !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-more, .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-less { position: absolute !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid transparent !important; background: var(--sh-members-surface) !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-less { display: none !important; } .stagehill-members-directory .um-members-grid .um-member.stagehill-biography-expanded .stagehill-member-biography > .um-member-more { display: none !important; } .stagehill-members-directory .um-members-grid .um-member.stagehill-biography-expanded .stagehill-member-biography > .um-member-less { display: flex !important; border-top-color: var(--sh-members-border) !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-more a, .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-less a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-meta { position: absolute !important; right: 0 !important; bottom: 38px !important; left: 0 !important; z-index: 2 !important; display: block !important; height: 218px !important; max-height: 218px !important; margin: 0 !important; padding: 18px 14px !important; border: 1px solid var(--sh-members-border) !important; border-bottom: 0 !important; border-radius: 12px 12px 0 0 !important; background: var(--sh-members-surface) !important; box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.07) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; color: var(--sh-members-muted) !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(calc(100% + 46px)); transition: transform 280ms cubic-bezier(0.22, 0.74, 0.24, 1), opacity 180ms ease, visibility 0s linear 280ms; will-change: transform, opacity; } .stagehill-members-directory .um-members-grid .um-member.stagehill-biography-expanded .stagehill-member-biography > .um-member-meta { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .stagehill-members-directory .um-members-grid .stagehill-member-biography .um-member-metaline { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.6 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere; } .stagehill-members-directory .um-members-grid .stagehill-member-biography .um-member-metaline strong, .stagehill-members-directory .um-members-grid .stagehill-member-biography .stagehill-member-biography-value { display: block !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography .um-member-metaline strong { margin-bottom: 4px !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography .stagehill-member-biography-value p:first-child { margin-top: 0 !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography .stagehill-member-biography-value p:last-child { margin-bottom: 0 !important; } /* The fixed card height means opening/closing a biography never changes a grid * item's dimensions. Disable the previous height-animation optimisation. */ .stagehill-members-directory .um-members-grid .um-member-meta { will-change: auto; } @media (max-width: 680px) { .stagehill-members-directory .um-members-grid .um-member { height: 570px !important; min-height: 570px !important; max-height: 570px !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography { right: 16px !important; left: 16px !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-meta { height: 232px !important; max-height: 232px !important; } } @media (prefers-reduced-motion: reduce) { .stagehill-members-directory .um-members-grid .stagehill-member-biography > .um-member-meta { transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.11 * Compact, independently scrollable account/member-type field. The type list * never changes the fixed card height or overlaps country/joined/active rows. * ---------------------------------------------------------------------- */ .stagehill-members-directory .um-members-grid .stagehill-member-detail-slot-1 { position: relative !important; align-items: stretch !important; padding: 0 2px !important; overflow: hidden !important; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 2px 9px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; overflow: hidden !important; color: inherit !important; font: inherit !important; line-height: 19px !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; transition: background-color 150ms ease, box-shadow 150ms ease !important; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll.is-overflowing { display: block !important; padding-right: 7px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-gutter: stable !important; scrollbar-width: thin !important; scrollbar-color: var(--sh-members-border-strong) transparent !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll.is-overflowing:hover, .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll.is-overflowing:focus { background: var(--sh-members-soft) !important; outline: 0 !important; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll.is-overflowing:focus-visible { box-shadow: inset 0 0 0 1px var(--sh-members-border-strong) !important; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll::-webkit-scrollbar { width: 4px; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll::-webkit-scrollbar-track { background: transparent; } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--sh-members-border-strong); } .stagehill-members-directory .um-members-grid .stagehill-member-type-scroll:not(.is-overflowing)::-webkit-scrollbar { display: none; } /* ------------------------------------------------------------------------- * StageHill directory polish v1.0.12 * Centre the clear X against the search input itself, label last activity, * and remove unnecessary fixed-card space below the aligned detail rows. * ---------------------------------------------------------------------- */ .stagehill-members-directory .stagehill-members-search-control { position: relative !important; display: block !important; width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .stagehill-members-directory .stagehill-members-search-control > input.um-search-line { display: block !important; width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding-right: 52px !important; } .stagehill-members-directory .stagehill-members-search-control > button.stagehill-members-search-clear, .stagehill-members-directory .stagehill-members-search-control > button.stagehill-members-search-clear:hover, .stagehill-members-directory .stagehill-members-search-control > button.stagehill-members-search-clear:focus, .stagehill-members-directory .stagehill-members-search-control > button.stagehill-members-search-clear:active { top: 50% !important; right: 10px !important; bottom: auto !important; left: auto !important; margin: 0 !important; transform: translateY(-50%) !important; } .stagehill-members-directory .um-members-grid .stagehill-member-detail-label { display: inline-block !important; flex: 0 0 auto !important; margin: 0 4px 0 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; line-height: inherit !important; white-space: nowrap !important; } /* The visible content requires about 445px. A 470px fixed card keeps a small, * deliberate breathing area while preserving perfectly aligned rows. */ .stagehill-members-directory .um-members-grid .um-member { height: 470px !important; min-height: 470px !important; max-height: 470px !important; } .stagehill-members-directory .um-members-grid .um-member-card { padding-bottom: 50px !important; } .stagehill-members-directory .um-members-grid .stagehill-member-biography { bottom: 6px !important; } @media (max-width: 680px) { .stagehill-members-directory .stagehill-members-search-control, .stagehill-members-directory .stagehill-members-search-control > input.um-search-line { height: 48px !important; min-height: 48px !important; max-height: 48px !important; } .stagehill-members-directory .um-members-grid .um-member { height: 470px !important; min-height: 470px !important; max-height: 470px !important; } }