/** * StarzMeet — Send One Request: search-page selection + the request dialog. * * Uses the site's purple system (#7C3AED / #6D28D9 on #F7F6FC) so this reads as * part of StarzMeet rather than a bolted-on widget. Two layout facts drive most * of the awkward-looking numbers: * * - The mobile tab bar owns the bottom of the screen on these pages, so the * selection bar sits above it and both give way to the dialog. * - ListingPro modals are trapped inside mmenu's #mm-0 stacking context; ours * is a child of , so it can simply outrank everything with a normal * z-index instead of fighting a context it cannot win. */ :root { --szq-purple: #7C3AED; --szq-purple-dark: #6D28D9; --szq-ink: #1E2338; --szq-muted: #5C6478; --szq-line: #E5E1F2; --szq-bg: #F7F6FC; --szq-danger: #A33A3A; --szq-tabbar: 58px; } /* ------------------------------------------------------------- explainer -- */ .szq-explainer { margin: 0 0 16px; padding: 12px 16px; background: #F3EEFF; border: 1px solid #DDD1FA; border-radius: 10px; color: #4C2D8C; font-size: 14.5px; line-height: 1.55; } /* ---------------------------------------------------------- card checkbox -- */ .szq-host { position: relative; } .szq-pick { position: absolute; top: 10px; left: 10px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; cursor: pointer; } /* The real input stays in the accessibility tree and keeps keyboard behaviour; the visible tick is drawn by the sibling span. */ .szq-pick-box { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .szq-pick-tick { display: block; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #C9C2E4; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 3px rgba(30, 35, 56, .18); transition: background .12s ease, border-color .12s ease; pointer-events: none; } .szq-pick-tick::after { content: ""; display: block; width: 6px; height: 11px; margin: 3px auto 0; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; } .szq-pick-box:checked + .szq-pick-tick { background: var(--szq-purple); border-color: var(--szq-purple); } .szq-pick-box:checked + .szq-pick-tick::after { opacity: 1; } .szq-pick-box:focus-visible + .szq-pick-tick { outline: 3px solid var(--szq-purple); outline-offset: 2px; } /* Honest labels on cards we cannot reach directly. * * The rebuilt card (.sm-arch-card, assets/css/starzmeet-archive.css) is a CSS * grid with named areas — "media body" / "acts acts". A child with no area of * its own is auto-placed into the 86px media column and wraps to roughly one * word per line. grid-column: 1 / -1 puts these on a row of their own. The * chip carries the short form; its title attribute holds the full sentence, * which is also shown in full on the confirmation step. */ .szq-reach, .szq-noteligible { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--szq-muted); } .szq-reach { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; background: #F4F2FA; font-weight: 600; } .szq-reach::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; } .szq-reach-invite { color: #6D28D9; background: #F3EEFF; } .szq-reach-followup { color: #8A6100; background: #FEF6E3; } .szq-noteligible { color: #8A6100; } /* ------------------------------------------------------------ sticky bar -- */ .szq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 20px; background: #fff; border-top: 1px solid var(--szq-line); box-shadow: 0 -4px 24px rgba(76, 45, 140, .10); /* translateY(100%) alone is NOT enough to hide this. The JS lifts the bar by the mobile tab bar's height (bottom: 62px), so sliding down by its own height still left a 62px sliver of "No providers selected yet" pinned above the tab bar. visibility makes the hidden state unambiguous and also takes it out of the tab order; the transform is kept for the slide-in. */ transform: translateY(110%); visibility: hidden; transition: transform .18s ease, visibility .18s; } .szq-bar.is-active { transform: translateY(0); visibility: visible; } /* Clear the mobile tab bar rather than sitting on top of it. */ @media (max-width: 991px) { .szq-bar { bottom: var(--szq-tabbar); } } .szq-bar-count { margin: 0; font-size: 15px; font-weight: 700; color: var(--szq-ink); } .szq-bar-actions { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } .szq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--szq-purple); border-radius: 10px; background: var(--szq-purple); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; } .szq-btn:hover { background: var(--szq-purple-dark); border-color: var(--szq-purple-dark); } .szq-btn[disabled], .szq-btn[aria-disabled="true"] { background: #D9D3EC; border-color: #D9D3EC; color: #fff !important; cursor: not-allowed; } .szq-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--szq-purple); font-size: 14.5px; font-weight: 600; cursor: pointer; } .szq-link:hover { text-decoration: underline; } /* ------------------------------------------------------ announcements ----- */ /* Visible only to assistive tech — the selection count changes need announcing without a visual duplicate of the bar's own label. */ .szq-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .szq-toast { position: fixed; left: 50%; bottom: 96px; z-index: 10010; max-width: min(520px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 12px; background: var(--szq-ink); color: #fff; font-size: 14px; line-height: 1.5; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .szq-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------------------------------------------------------------- dialog -- */ .szq-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .szq-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 40, .55); } .szq-modal-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(30, 20, 60, .32); overflow: hidden; } .szq-modal-head { position: relative; padding: 22px 56px 16px 26px; border-bottom: 1px solid var(--szq-line); } .szq-modal-head h2 { margin: 0 0 4px; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--szq-ink); } .szq-modal-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--szq-muted); } .szq-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--szq-muted); font-size: 26px; line-height: 1; cursor: pointer; } .szq-x:hover { background: var(--szq-bg); color: var(--szq-ink); } .szq-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 26px 8px; } .szq-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--szq-line); background: var(--szq-bg); } /* `hidden` is only `display:none` in the UA sheet, so ANY class rule that sets * display wins — including .szq-btn's own inline-flex. Without this the footer * shows "Review and send", "Yes, send my request" and "View my requests" all at * once, which is exactly what happened the first time this was rendered. */ .szq-modal [hidden], .szq-bar [hidden] { display: none !important; } /* The warning has to read as a caution before the message box, not as decoration underneath it — it is the one line that changes what people type. */ .szq-privacy { margin: 0 0 20px; padding: 12px 14px; border: 1px solid #F0DCA8; border-left: 4px solid #D69E00; border-radius: 8px; background: #FEF9EC; color: #6B5200; font-size: 13.5px; line-height: 1.55; } .szq-field { margin: 0 0 16px; } .szq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 540px) { .szq-row { grid-template-columns: 1fr; } } .szq-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--szq-ink); } .szq-opt { font-weight: 400; color: var(--szq-muted); } .szq-input { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #D9D3EC; border-radius: 10px; background: #fff; color: var(--szq-ink); font-size: 15px; line-height: 1.4; } .szq-input:focus { border-color: var(--szq-purple); outline: 2px solid rgba(124, 58, 237, .25); outline-offset: 0; } .szq-textarea { min-height: 104px; resize: vertical; } .szq-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--szq-muted); } .szq-err { margin: 0; font-size: 12.5px; color: var(--szq-danger); } .szq-err:empty { display: none; } .szq-field.has-error .szq-input { border-color: var(--szq-danger); } .szq-field.has-error .szq-label { color: var(--szq-danger); } .szq-chips { display: flex; flex-wrap: wrap; gap: 8px; } .szq-chip { margin: 0; cursor: pointer; } .szq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .szq-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #D9D3EC; border-radius: 999px; font-size: 14px; color: var(--szq-ink); background: #fff; } .szq-chip input:checked + span { border-color: var(--szq-purple); background: #F3EEFF; color: #4C2D8C; font-weight: 600; } .szq-chip input:focus-visible + span { outline: 3px solid var(--szq-purple); outline-offset: 2px; } .szq-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--szq-ink); cursor: pointer; } .szq-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--szq-purple); flex: 0 0 auto; } .szq-consent.has-error .szq-check { color: var(--szq-danger); } .szq-formerr { margin: 12px 0 0; font-size: 13.5px; color: var(--szq-danger); } .szq-formerr:empty { display: none; } /* ---------------------------------------------------------------- review -- */ .szq-review h3, .szq-done h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--szq-ink); } .szq-review-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--szq-line); border-radius: 12px; overflow: hidden; } .szq-review-list li { padding: 12px 16px; border-bottom: 1px solid var(--szq-line); font-size: 15px; font-weight: 600; color: var(--szq-ink); } .szq-review-list li:last-child { border-bottom: 0; } .szq-review-note { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--szq-muted); } /* ------------------------------------------------------------------ done -- */ .szq-done { text-align: center; padding: 18px 0 8px; } .szq-done-mark { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: #E3F4EA; color: #128a53; font-size: 30px; line-height: 58px; } .szq-done-msg { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--szq-ink); } .szq-done-ref { margin: 0; font-size: 13px; letter-spacing: .04em; color: var(--szq-muted); } /* ------------------------------------------------- chrome while modal open -- */ /* Our own dialog: get every piece of floating page chrome out from in front of it. Same reasoning (and same offenders) as inc/modal-chrome.php. */ body.szq-modal-open { overflow: hidden; } body.szq-modal-open .szq-bar, body.szq-modal-open .sm-tabbar, body.szq-modal-open .sm-actionbar, body.szq-modal-open .szr-switch, body.szq-modal-open .ssm-owner-fab, body.szq-modal-open .grecaptcha-badge { display: none !important; } body.szq-modal-open header, body.szq-modal-open .lp-customize-header-outer { z-index: 0 !important; } /* And when a THEME modal (sign-in, claim) is open, our bar gets out of ITS way. inc/modal-chrome.php adds this class. */ body.szm-modal-open .szq-bar { display: none !important; } @media (max-width: 600px) { .szq-modal { padding: 0; } .szq-modal-panel { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; } .szq-bar { gap: 8px; padding: 10px 14px; } .szq-bar-count { flex: 1 1 100%; font-size: 14px; } .szq-bar-actions { flex: 1 1 100%; justify-content: space-between; } .szq-btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .szq-bar, .szq-toast, .szq-pick-tick { transition: none; } }