/* * Zillow Reviews — chip + reviews section + modal * ================================================ * * 1. Design tokens * 2. Zillow logo assets (.tap-zillow-wordmark, .tap-zillow-house-icon) * 3. Chip base + variants (--profile, --card, --tile) * 4. Reviews section (head, summary, notice, list) * 5. Review card * 6. Modal dialog (.tap-zillow-dialog, view-profile button) * 7. States (loading, error) * 8. Media queries */ /* ── 1. Design tokens ── Mirrored from profile-page.css so the chip and modal pick up the same colors when rendered OUTSIDE the `.top-agent-experience` scope — directory pages render chips at body level, and the JS appends the modal dialog to . Inside `.top-agent-experience`, that selector's higher specificity still wins, so profile-page tokens remain the source of truth there. Keep these values in sync with profile-page.css §1. */ .tap-zillow-summary, .tap-zillow-reviews, .tap-zillow-dialog { --top-agent-black: #161E26; --top-agent-body: #374151; --top-agent-muted: #6B7280; --top-agent-blue: #0075EB; --top-agent-border: #E5E7EB; --top-agent-wash: #F9FAFB; --top-agent-surface: #FFFFFF; --top-agent-radius-md: 8px; --top-agent-radius-sm: 4px; --top-agent-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --top-agent-font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; --top-agent-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; } /* ── 2. Zillow logo assets ── Both the wordmark and the house mark size off a single height custom prop — variants below override `--tap-zillow-wordmark-h` to scale each context. `aspect-ratio` derives the width from the SVG viewBox (110:24.09). */ .tap-zillow-wordmark { display: inline-flex; align-items: center; height: var(--tap-zillow-wordmark-h, 13px); aspect-ratio: 110 / 24.09; color: #111116; line-height: 0; } .tap-zillow-wordmark svg { display: block; width: 100%; height: auto; } .tap-zillow-house-icon { display: inline-flex; width: 12px; height: 14px; line-height: 0; } .tap-zillow-house-icon svg { display: block; width: 100%; height: auto; } /* ── 3. Chip ── */ .tap-zillow-summary { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--top-agent-black); cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: background 0.15s ease; } .tap-zillow-summary:focus-visible { outline: 2px solid var(--top-agent-blue); outline-offset: 2px; } .tap-zillow-summary__rating { font-weight: 600; } .tap-zillow-summary__star { color: #FFB800; font-size: 1.05em; line-height: 1; } .tap-zillow-summary__count { color: var(--top-agent-body); } /* Wordmark sits ~1px high in its container — nudge into baseline alignment with the surrounding text. The section/modal head uses different offsets (see §4). */ .tap-zillow-summary .tap-zillow-wordmark { margin-left: -1px; margin-top: -1px; } /* Profile chip — inline, aligned with the agent name. */ .tap-zillow-summary--profile { padding: 2px 6px; margin-left: -6px; border-radius: var(--top-agent-radius-sm); font: 500 0.82rem/1.4 var(--top-agent-font-body); --tap-zillow-wordmark-h: 11px; } .tap-zillow-summary--profile:hover, .tap-zillow-summary--profile:focus, .tap-zillow-summary--profile:focus-visible { background: var(--top-agent-wash); text-decoration: none; } /* Directory chips — card (top-10 list) and tile (city carousels). Same look; tile is slightly more compact (see the scoped overrides below). */ .tap-zillow-summary--card, .tap-zillow-summary--tile, .tap-zillow-summary--similar-tile { padding: 3px 8px; border-radius: 6px; font: 500 0.82rem/1.2 var(--top-agent-font-body); --tap-zillow-wordmark-h: 12px; } .tap-zillow-summary--card:hover, .tap-zillow-summary--tile:hover, .tap-zillow-summary--similar-tile:hover { background: var(--top-agent-wash); } .agent-card-left .tap-zillow-summary--card { margin-top: 6px; margin-left: -8px; } .agents-tiles-item .tap-zillow-summary--tile { margin-top: 2px; padding: 2px 6px; gap: 3px; font-size: 0.85rem; --tap-zillow-wordmark-h: 13px; } /* Tighten the local-sales line when the chip follows it directly. */ .agents-tiles-item-overview:has(+ .tap-zillow-summary--tile) { margin-bottom: 0; } .tap-similar-tile .tap-zillow-summary--similar-tile { margin-top: 0.25rem; justify-content: center; } /* ── 4. Reviews section ── */ .tap-zillow-reviews { display: grid; gap: 1rem; scroll-margin-top: 2rem; } .tap-zillow-reviews__head { display: grid; gap: 0.375rem; } .tap-zillow-reviews__title { margin: 0; color: var(--top-agent-black); font: 700 clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem)/1.3 var(--top-agent-font-heading); } .tap-zillow-reviews__subtitle { margin: 0; color: var(--top-agent-muted); font: 400 0.875rem/1.5 var(--top-agent-font-body); } .tap-zillow-reviews__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin: 0.125rem 0 0; color: var(--top-agent-body); font: 500 0.95rem/1.3 var(--top-agent-font-body); --tap-zillow-wordmark-h: 20px; } .tap-zillow-reviews__rating { font: 600 1.25rem/1 var(--top-agent-font-body); color: var(--top-agent-black); } .tap-zillow-reviews__rating-star { color: #FFB800; font-size: 1.25rem; line-height: 1; } .tap-zillow-reviews__count { color: var(--top-agent-body); font-size: 0.95rem; } .tap-zillow-reviews__summary .tap-zillow-wordmark { margin-left: -2px; margin-top: -3px; } .tap-zillow-reviews__notice { margin: 0.25rem 0 0; border: 0; background: transparent; padding: 0; font-style: italic; color: var(--top-agent-muted); font-size: 0.8rem; line-height: 1.5; } .tap-zillow-reviews__list { display: grid; gap: 0.75rem; margin-top: 0.25rem; } /* ── 5. Review card ── */ .tap-zillow-review-card { background: var(--top-agent-surface); border: 1px solid var(--top-agent-border); border-radius: var(--top-agent-radius-md); padding: 1.25rem 1.5rem; box-shadow: var(--top-agent-shadow-sm); } .tap-zillow-review-card__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.625rem; } .tap-zillow-review-card__rating-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; line-height: 1.4; } .tap-zillow-review-card__rating { font-weight: 600; color: var(--top-agent-black); } .tap-zillow-review-card__stars { color: #FFB800; letter-spacing: 1px; font-size: 0.95rem; line-height: 1; } .tap-zillow-review-card__empty-star { color: var(--top-agent-border); } .tap-zillow-review-card__byline { font-size: 0.875rem; color: var(--top-agent-muted); } .tap-zillow-review-card__source { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--top-agent-muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color 0.15s ease; } .tap-zillow-review-card__source strong { color: var(--top-agent-body); font-weight: 600; } a.tap-zillow-review-card__source:hover, a.tap-zillow-review-card__source:focus { color: var(--top-agent-blue); } .tap-zillow-review-card__for { margin: 0.125rem 0 0; font: 500 0.875rem/1.45 var(--top-agent-font-body); color: var(--top-agent-body); } .tap-zillow-review-card__for a { color: var(--top-agent-blue); font-weight: 500; text-decoration: none; } .tap-zillow-review-card__for a:hover, .tap-zillow-review-card__for a:focus { text-decoration: underline; } .tap-zillow-review-card__details { margin: 0.25rem 0 0; color: var(--top-agent-muted); font-size: 0.8rem; line-height: 1.45; } .tap-zillow-review-card__body { margin: 0.75rem 0 0; color: var(--top-agent-body); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; } /* ── 6. Modal dialog ── */ .tap-zillow-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(860px, calc(100vh - 28px)); border: 0; border-radius: var(--top-agent-radius-md); padding: 0; background: var(--top-agent-surface); color: var(--top-agent-black); box-shadow: 0 22px 70px rgba(21, 36, 54, 0.28); } .tap-zillow-dialog::backdrop { background: rgba(10, 19, 30, 0.55); } .tap-zillow-dialog__panel { position: relative; max-height: inherit; overflow: auto; padding: 28px; } .tap-zillow-dialog__body { display: flex; flex-direction: column; gap: 18px; } .tap-zillow-dialog__body .tap-zillow-reviews__head { padding-right: 58px; } /* Modal-only title row: heading + "View profile" button side-by-side. The profile inline section passes profile_link="" so the button is absent there and the wrapper degrades to a single-child flex container. */ .tap-zillow-dialog__body .tap-zillow-reviews__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .tap-zillow-dialog__body .tap-zillow-reviews__title-row .tap-zillow-reviews__title { flex: 1 1 auto; min-width: 0; } .tap-zillow-reviews__view-profile-button { display: inline-flex; align-items: center; gap: 4px; background: var(--top-agent-blue); color: #fff; padding: 7px 12px 7px 14px; border-radius: var(--top-agent-radius-sm); font: 500 0.85rem/1.2 var(--top-agent-font-body); text-decoration: none; white-space: nowrap; flex-shrink: 0; margin-top: 2px; transition: background 0.15s ease; } .tap-zillow-reviews__view-profile-button:hover, .tap-zillow-reviews__view-profile-button:focus { background: #3eb2ef; color: #fff; text-decoration: none; } .tap-zillow-dialog__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; box-sizing: border-box; appearance: none; border: 1px solid #d3e0ee; border-radius: 50%; background: #fff; color: #2b4058; display: inline-flex; align-items: center; justify-content: center; font-size: 0; cursor: pointer; padding: 0; } .tap-zillow-dialog__close::before, .tap-zillow-dialog__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; } .tap-zillow-dialog__close::before { transform: translate(-50%, -50%) rotate(45deg); } .tap-zillow-dialog__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .tap-zillow-dialog__close:hover, .tap-zillow-dialog__close:focus { border-color: var(--top-agent-blue); color: var(--top-agent-blue); } /* ── 7. States ── */ .tap-zillow-loading, .tap-zillow-error { color: var(--top-agent-muted); font-size: 16px; line-height: 1.5; padding: 16px 8px; } /* ── 8. Media queries ── 700px: dialog panel padding reflows so the close button no longer fits beside the heading inline — drop the heading's right-clearance. 600px: phone-style reflows for the card meta and modal title row. */ @media (max-width: 700px) { .tap-zillow-dialog__panel { padding: 58px 18px 24px; } .tap-zillow-dialog__body .tap-zillow-reviews__head { padding-right: 0; } } @media (max-width: 600px) { .tap-zillow-review-card { padding: 1rem; } .tap-zillow-review-card__meta { flex-direction: column; gap: 0.25rem; } .tap-zillow-dialog__body .tap-zillow-reviews__title-row { flex-direction: column; gap: 8px; } .tap-zillow-reviews__view-profile-button { align-self: flex-start; } }