/* ── Platform token contract ─────────────────────────────────────────────── * A React island's shadcn pieces (the mobile filters Drawer, the List/Map * ToggleGroup — `apps/agent-website/components/liquid-filters/`, * `liquid-search-view/`) render on top of an arbitrary tenant preset's * markup, so they can never reference shadcn's own theme classes * (`bg-primary`, `text-muted-foreground`, …) — those resolve from the * PLATFORM app's theme, not the tenant's, and would paint the same navy * button chrome onto a preset that's warm and beige. These ten custom * properties are the only thing such an island may style itself off (via * the `tpn-*` Tailwind tokens agent-website registers over them — * `bg-tpn-surface`, `rounded-tpn-sm` — or the `#liquid-page` bridge that * remaps shadcn's semantic vars onto them; `check:tailwind-tokens` rejects * a raw `bg-[var(--tpn-surface)]`) — this * `:root` block (rewritten to `#liquid-page` by `scopeCss`, see * `validate/css.ts`) is their platform-wide FLOOR, and any preset stylesheet * loaded after this one may freely override them for its own brand, exactly * like every other token here. Values default to sane, theme-agnostic * neutrals so an island renders sensibly even on a preset that never * touches them. */ #liquid-page { --tpn-ink: inherit; /* Secondary/muted text (captions, helper copy, placeholder labels) that still has to follow the tenant palette instead of a hardcoded gray. Derived from --tpn-ink so a preset that never maps it still gets a readable, theme-consistent muted tone; a preset may override it directly. On the base-styles fallback palette (#171717 ink on #fff surface) this resolves to ~#6b6b6b, a 5.3:1 contrast ratio against white — above the 4.5:1 AA floor for normal text. */ --tpn-ink-muted: color-mix(in srgb, var(--tpn-ink) 64%, var(--tpn-surface)); --tpn-surface: #fff; --tpn-surface-muted: #f4f4f4; --tpn-line: #dadada; --tpn-accent: #171717; --tpn-accent-foreground: #fff; --tpn-radius: 999px; --tpn-radius-sm: 6px; --tpn-font: inherit; /* Search-map marker chrome — read by `@realtytable/map`'s `createMarkerDom`/`setMarkerSelected` (packages/map/src/web/marker-dom.ts) via `var(--tpn-marker-*, …)`, so a marker matches the tenant theme instead of the package's shared BaanMe-teal fallback. Defaults derive from the token contract above (surface/ink), not from a second set of invented neutrals, so a preset that never touches these still gets a marker that matches its own `--tpn-surface`/`--tpn-ink`. */ --tpn-marker-bg: var(--tpn-surface); --tpn-marker-fg: var(--tpn-ink); --tpn-marker-border: var(--tpn-ink); --tpn-marker-radius: var(--tpn-radius); --tpn-marker-font: var(--tpn-font); --tpn-marker-shadow: none; /* Optional CSS `filter` applied to the MapLibre canvas itself (e.g. `grayscale(1)`) — see `.tpn-search-map .maplibregl-canvas-container` below. `none` renders the basemap exactly as today. */ --tpn-map-filter: none; } /* Links the tags emit should inherit the preset's typography, not the UA's. * * EVERY selector here is wrapped in :where() so it contributes ZERO * specificity. That is not a stylistic nicety — the first version of this file * used a plain `.tpn-region a[href]` (specificity 0,2,1), and since every * section is {% region %}-wrapped, it beat any preset button rule written with * a single class (0,1,0). The result was CTA text rendering in the inherited * colour against its own contrasting background: genuinely invisible buttons in * two presets. * * This file's own comment says it "must never become a house style", and * specificity is exactly how a reset becomes one by accident. With :where(), * a single class always wins and presets keep full control. */ #liquid-page :where( .tpn-listing-card__link, .tpn-results__link, .tpn-filters__link, .tpn-filters__reset, .tpn-article-card__link, .tpn-nav-card__link, .tpn-region a[href], .tpn-project-hero__directions ) { color: inherit; text-decoration: none; } /* Media the tags emit must never overflow its container. The horizontal overflow bugs found at 375px were all images rendering at intrinsic width. */ #liquid-page :where( .tpn-listing-card__image, .tpn-listing-gallery__image, .tpn-results__image, .tpn-detail-page img, .tpn-area-map__image, .tpn-project-hero__image, .tpn-project-gallery__image, .tpn-project-card__image ) { max-width: 100%; height: auto; } /* ── listing gallery viewer (full-screen, CSS-only) ────────────────────── Tapping a property photo previously did nothing. These rules turn the :target overlays the gallery tag emits into a real full-screen viewer. The whole mechanism is inert HTML + CSS on purpose — see renderListingGallery() in tags/listing-tags.ts for why an island could not be used. Presets may restyle every class here; only the display property and the :target selector carry the behaviour. */ #liquid-page :where(.tpn-listing-gallery__link) { display: block; min-width: 0; min-height: 0; cursor: zoom-in; } #liquid-page .tpn-listing-gallery__viewer { display: none; } /* Not :where() — this pair IS the behaviour, and a preset that restyles the viewer must not be able to switch it off by accident. */ #liquid-page .tpn-listing-gallery__viewer:target { display: flex; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); } #liquid-page :where(.tpn-listing-gallery__scrim) { position: absolute; inset: 0; background: oklch(0 0 0 / 0.9); } #liquid-page :where(.tpn-listing-gallery__full) { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } #liquid-page :where(.tpn-listing-gallery__close, .tpn-listing-gallery__prev, .tpn-listing-gallery__next) { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; background: oklch(1 0 0 / 0.12); color: #fff; font-size: 1.75rem; line-height: 1; text-decoration: none; } #liquid-page :where(.tpn-listing-gallery__close) { top: 1rem; right: 1rem; font-size: 1.5rem; } #liquid-page :where(.tpn-listing-gallery__prev) { left: 1rem; } #liquid-page :where(.tpn-listing-gallery__next) { right: 1rem; } #liquid-page :where(.tpn-listing-gallery__counter) { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); margin: 0; color: oklch(1 0 0 / 0.85); font-size: 0.875rem; } /* ── site chrome (site_nav / site_footer) ──────────────────────────────── A neutral, complete floor — not a look. These two tags are renderer-owned (see site-chrome-tags.ts for why the chrome cannot live in a preset), so like the shared pages they need to be presentable on a tenant whose stylesheet has never heard of them, while staying trivial to override: everything here is :where(), so a single preset class beats all of it. Colours inherit, so a preset that sets a brand background and ink on its scope keeps them here instead of getting a white strip. */ #liquid-page :where(.tpn-site-nav) { position: relative; border-bottom: 1px solid var(--border, oklch(0.88 0.006 85)); } #liquid-page :where(.tpn-site-nav__inner) { max-width: 80rem; margin: 0 auto; padding: 0.9rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } #liquid-page :where(.tpn-site-nav[data-tpn-variant="centered"]) :where(.tpn-site-nav__inner) { justify-content: center; text-align: center; } #liquid-page :where(.tpn-site-nav[data-tpn-variant="stacked"]) :where(.tpn-site-nav__inner) { flex-direction: column; align-items: flex-start; } #liquid-page :where(.tpn-site-nav__brand) { display: inline-flex; align-items: center; color: inherit; text-decoration: none; margin-right: auto; } #liquid-page :where(.tpn-site-nav__logo) { display: block; height: 1.6rem; width: auto; } #liquid-page :where(.tpn-site-nav__wordmark) { font-weight: 600; letter-spacing: 0.02em; } #liquid-page :where(.tpn-site-nav__links) { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } #liquid-page :where(.tpn-site-nav__link) { color: inherit; text-decoration: none; font-size: 0.9375rem; } #liquid-page :where(.tpn-site-nav__link--active) { font-weight: 600; } #liquid-page :where(.tpn-site-nav__end) { display: flex; align-items: center; gap: 1rem; } #liquid-page :where(.tpn-site-nav__locales) { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; } #liquid-page :where(.tpn-site-nav__locale) { color: inherit; text-decoration: none; opacity: 0.65; } #liquid-page :where(.tpn-site-nav__locale--active) { opacity: 1; font-weight: 600; } #liquid-page :where(.tpn-site-nav__cta) { border: 1px solid currentColor; border-radius: var(--radius, 0.625rem); padding: 0.45rem 0.95rem; color: inherit; text-decoration: none; font-size: 0.875rem; white-space: nowrap; } /* Mobile disclosure menu — the platform-owned replacement for the inline link rail and locale switcher, both of which most presets hide below 48rem with nothing standing in for them (see site-chrome-tags.ts's module doc). The menu is a native `

`: closed on every viewport by default and forced open-able below 48rem by `interaction-invariants.ts`. The panel is positioned against the header itself (not the toggle) so it can span the full width like a sheet — which is why the floor gives the header `position: relative`; a preset making it sticky keeps the same containing block. */ #liquid-page :where(.tpn-site-nav__menu) { display: none; position: static; } #liquid-page :where(summary.tpn-site-nav__menu-toggle) { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; border-radius: var(--radius, 0.625rem); color: inherit; } #liquid-page :where(summary.tpn-site-nav__menu-toggle)::-webkit-details-marker { display: none; } #liquid-page :where(summary.tpn-site-nav__menu-toggle):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* A CSS-only hamburger — inline `

` of the contact list — an email, phone number, or LINE id, all candidates for an unbreakable string wider than a phone viewport. See the `.tpn-site-footer__inner` doc above for why `min-width: 0` is required alongside `overflow-wrap` inside a grid/flex ancestor. */ #liquid-page :where(.tpn-site-footer__contact-item) { min-width: 0; overflow-wrap: anywhere; } #liquid-page :where(.tpn-site-footer__legal) { max-width: 80rem; margin: 0 auto; padding: 1.25rem; border-top: 1px solid var(--border, oklch(0.88 0.006 85)); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; opacity: 0.7; } #liquid-page :where(.tpn-site-footer__copyright), #liquid-page :where(.tpn-site-footer__license) { margin: 0; } @media (max-width: 48rem) { #liquid-page :where(.tpn-site-footer__inner) { grid-template-columns: minmax(0, 1fr); } } /* Tag-emitted lists carry no bullets by default; presets add them if wanted. Two entries here were wrong rather than missing-by-choice: the amenities reset named .tpn-listing-amenities__list, a class the tag has never emitted (its ul is .tpn-listing-amenities; the __list suffix is the CONTACT tag's convention), and the contact list was absent altogether. Both kept UA bullets and the 40px list indent on every preset page that renders them — visible as bulleted phone numbers under a contact heading. */ #liquid-page :where( .tpn-listing-grid, .tpn-results, .tpn-article-list, .tpn-nav-cards, .tpn-listing-amenities, .tpn-listing-contact__list, .tpn-site-footer__contact, .tpn-filters__options, .tpn-project-amenities, .tpn-project-grid ) { list-style: none; margin: 0; padding: 0; } /* Same UA-default bug as `.tpn-listing-details__value` above (see `shared-page-styles.ts`'s "The 40px UA indent on

is the whole bug here."): a bare `

` carries a browser-default 40px `margin-inline-start`, which `project-tags.ts` never resets for its own dd's — visible as an indented unit size/price/count in `.tpn-project-units` and an indented progress value in `.tpn-project-progress`. */ #liquid-page :where( .tpn-project-units__size, .tpn-project-units__price, .tpn-project-units__count, .tpn-project-progress__status, .tpn-project-progress__value ) { margin: 0; } /* The filter bar is server-rendered and deliberately works without JavaScript. This neutral floor makes its links usable on every published tenant, even when the tenant stylesheet predates the tag. Preset CSS can override every value because :where() keeps specificity at zero. */ #liquid-page :where(.tpn-filters) { /* Five, because renderListingFiltersHtml() always emits exactly five groups (rent-or-buy, type, bedrooms, bathrooms, price). A default of four made the last group wrap onto its own row on every desktop search page, which — together with the 44px touch target below — grew the filter bar to 370px and pushed the first result below the fold at 1440x900. Every real portal shows results in the first screen. */ --tpn-filter-columns: 5; /* A single-row flex rail at EVERY width, not just ≥52rem as before — the old rule was a `grid-auto-flow: column` grid below 52rem, which still let chips claim `minmax(min(78vw, 18rem), 1fr)` each and wrap onto a second row the moment six chips plus Reset couldn't fit. `nowrap` + `min-width: 0` makes this genuinely one row always; at narrower widths the fold breakpoints below hide rail chips (and reveal their `More` panel twins) so the row never runs out of space instead of wrapping. */ display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; gap: 0.5rem; /* Deliberately not a scroll container: that would also be a clipping context, and the facet popovers open out of it. */ overflow: visible; margin: 0 0 1.25rem; padding: 0.25rem 0 0.75rem; /* Inherit the page's ink. This line used to pin the whole filter bar to a near-black FALLBACK, which the chips then faithfully inherited — so deriving the chip colours from currentColor changed nothing until this one was fixed too. The container is where the ink enters the subtree. */ color: inherit; } #liquid-page :where(.tpn-filters[data-tpn-columns="2"]) { --tpn-filter-columns: 2; } #liquid-page :where(.tpn-filters[data-tpn-columns="3"]) { --tpn-filter-columns: 3; } #liquid-page :where(.tpn-filters[data-tpn-columns="5"]) { --tpn-filter-columns: 5; } #liquid-page :where(.tpn-filters__group) { position: relative; /* Never grows or shrinks with the rail — chips keep their intrinsic width and the fold breakpoints below are what actually shed width, rather than every chip getting squeezed illegibly thin. */ flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; border: 0; } /* The facet control: a pill naming the facet and its current value, with a caret. Native

, so it opens on click and on Enter/Space with no script. */ #liquid-page :where(.tpn-filters__summary) { display: inline-flex; align-items: baseline; gap: 0.4rem; box-sizing: border-box; min-height: 36px; padding: 0.4rem 0.75rem; border: 1px solid color-mix(in oklab, currentColor 22%, transparent); border-radius: var(--radius, 0.625rem); background: color-mix(in oklab, currentColor 5%, transparent); cursor: pointer; white-space: nowrap; list-style: none; } /* Suppress the UA disclosure triangle in both engines, then draw our own. */ #liquid-page :where(.tpn-filters__summary)::-webkit-details-marker { display: none; } #liquid-page :where(.tpn-filters__summary)::after { content: ""; align-self: center; width: 0.4rem; height: 0.4rem; margin-left: 0.15rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-0.1em, -0.1em); opacity: 0.65; } #liquid-page :where(.tpn-filters__group[open]) :where(.tpn-filters__summary)::after { transform: rotate(225deg) translate(-0.05em, -0.05em); } #liquid-page :where(.tpn-filters__legend) { margin: 0; padding: 0; /* Same inheritance rule as the chips: a fixed mid-grey is invisible on a near-black page (measured 2.35:1 on a dark preset), so the ink is always inherited. It is inherited at FULL strength, not faded. This used to be color-mix(in oklab, currentColor 80%, transparent) on the theory that 80% "reads as secondary on any surface and still clears AA" — it does not. Fading the ink scales contrast down by whatever the page's own contrast happens to be, so on a preset whose body ink is already a mid-tone against a pale ground the legend lands BELOW AA: measured 3.47:1 against 4.5:1 on a pale-green preset, on every one of the five facet legends. The hierarchy the fade was buying is already carried by size and weight against .tpn-filters__value (0.8125rem/500 vs 0.8125rem/700), so dropping the fade costs nothing visually and makes the legend exactly as legible as body text on any surface a preset chooses. */ color: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; } #liquid-page :where(.tpn-filters__value) { font-size: 0.8125rem; font-weight: 700; } /* The panel floats over the page rather than pushing the results down, which is what makes the bar a single row instead of five. */ #liquid-page :where(.tpn-search__modes) { display: flex; gap: 0.25rem; } /* The native radio is hidden but still focusable and still the thing that holds state: :checked + label is what every preset styles against. Clipped rather than display:none, which would take it out of the tab order and break the arrow-key behaviour a radiogroup is chosen for. */ #liquid-page :where(.tpn-search__mode-input) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Any typed-search text input under 16px computed font-size makes iOS Safari zoom the whole viewport on focus. This is a zero-specificity floor only — it never wins against a preset's own .tpn-search__input rule (that is the point of :where(), see the file header), so it protects a preset that sets no font-size at all (inherits from the page) but does nothing for a preset that explicitly sets something smaller on mobile. Those presets need their own mobile-scoped fix; this is not a substitute for that. */ @media (max-width: 48rem) { #liquid-page :where(.tpn-search__input) { font-size: max(16px, 1em); } } /* Anchor point for the autocomplete suggestion popup. `{% listing_search %}` renders `.tpn-search__autocomplete` (the popup's portal mount) as a CHILD of this form — see the CSS CLASS CONTRACT in content-tags.ts — so `.tpn-suggest` below can be positioned with plain `position: absolute`, anchored to whichever edge the form actually has, instead of a `position: fixed` popup whose coordinates a script recomputes on every scroll/resize/reflow. That fixed-position approach drifted away from the input on mobile (the visual viewport resizing under the on-screen keyboard, scroll position changing mid-recompute); anchoring to the form's own box has no coordinates to fall out of sync. */ #liquid-page :where(.tpn-search) { position: relative; } /* The suggestion popup itself, rendered by the React search island — see `apps/agent-website/components/liquid-search/liquid-search-islands.tsx`. Themed the same way `.tpn-filters__panel` below is: a `--tpn-search-suggest-*` pair defaulting to the system Canvas/CanvasText colours, NOT to `--tpn-surface`/`--tpn-text` — those two are only DEFINED on the shared search-results page shell (see shared-page-styles.ts), so they are undefined on every hero search box, which is most of them, and pairing one themed value with a hardcoded fallback is exactly what produced white-on-white on a light preset before (same failure mode documented on `.tpn-filters__panel`). `Canvas`/`CanvasText` are a matched, always-readable system pair; a tenant can still override both together via the custom properties. */ #liquid-page :where(.tpn-suggest) { position: absolute; top: 100%; left: 0; right: 0; margin: 0.35rem 0 0; z-index: var(--tpn-search-suggest-z, 1000); max-height: min(24rem, 60vh); overflow-y: auto; padding: var(--tpn-search-suggest-padding, 0.25rem); background: var(--tpn-search-suggest-bg, Canvas); color: var(--tpn-search-suggest-color, CanvasText); border: var(--tpn-search-suggest-border, 1px solid var(--border, oklch(0.88 0.006 85))); border-radius: var(--tpn-search-suggest-radius, var(--radius, 0.625rem)); box-shadow: var(--tpn-search-suggest-shadow, 0 12px 28px -12px oklch(0 0 0 / 0.35)); font-family: inherit; text-align: left; } #liquid-page :where(.tpn-suggest__list) { margin: 0; padding: 0; list-style: none; } /* Row styling matches `.tpn-filters__link`/`.tpn-filters__link:hover` below — the same padding, radius, and hover treatment as the filter dropdown's option rows, so the two popovers on a search page read as one visual language rather than two competing dropdown styles. */ #liquid-page :where(.tpn-suggest__option) { display: flex; align-items: center; gap: 0.625rem; padding: var(--tpn-search-suggest-option-padding, 0.55rem 0.75rem); border-radius: var(--tpn-search-suggest-option-radius, calc(var(--radius, 0.625rem) - 0.125rem)); text-align: left; cursor: pointer; } #liquid-page :where(.tpn-suggest__option[data-active="true"]) { background: var( --tpn-search-suggest-active-bg, color-mix(in oklab, currentColor 14%, transparent) ); } #liquid-page :where(.tpn-suggest__icon) { flex: none; opacity: 0.45; } #liquid-page :where(.tpn-suggest__body) { display: flex; flex-direction: column; gap: 0.05rem; /* `min-width: 0` is what lets the ellipsis below actually engage. */ min-width: 0; flex: 1 1 auto; } /* The typed run, emphasised — the standard cue for WHY a row is in the list. */ #liquid-page :where(.tpn-suggest__title) { font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #liquid-page :where(.tpn-suggest__match) { font-weight: 700; } #liquid-page :where(.tpn-suggest__type) { flex: none; padding-left: 0.5rem; opacity: 0.5; font-size: 0.75rem; white-space: nowrap; } #liquid-page :where(.tpn-suggest__meta) { font-size: 0.8125rem; opacity: 0.6; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #liquid-page :where(.tpn-suggest__empty) { padding: 0.7rem 0.75rem; opacity: 0.6; } /* Visually hidden but still announced — the `aria-live` status text, same clip-path technique `.tpn-search__mode-input` above uses. */ #liquid-page :where(.tpn-suggest__status) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } #liquid-page :where(.tpn-filters__panel) { position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0; /* `max-content` alone wins the min/max-width tug-of-war whenever a facet's intrinsic content (the Price panel's two number inputs plus its submit button) is wider than the viewport, forcing the panel past the screen edge on a phone — `90vw` on `max-width` never got a chance to clamp it back down. Capping `min-width` at the same viewport-aware ceiling as `max-width` (before hydration moves this into the mobile dialog) keeps every panel inside the screen at any width. */ min-width: min(max-content, calc(100vw - 2rem)); max-width: min(22rem, calc(100vw - 2rem)); padding: 0.6rem; border: 1px solid var(--border, oklch(0.88 0.006 85)); border-radius: var(--radius, 0.625rem); /* `--tpn-filter-panel-bg`/`--tpn-filter-panel-fg` default to the system Canvas/CanvasText pair, exactly as before, so nothing changes for a preset that sets neither. The two used to be `--background`/inherited page ink instead: a preset defining `--background` (common) while the chips inside kept inheriting the PAGE's ink (not the panel's) produced white-on-white at 1:1 on light presets — the panel and its ink came from two unrelated sources that could disagree. A preset now opts in by setting BOTH custom properties together, so the pair can never disagree — see `.tpn-filters__panel` in `presets/commercial/styles.css` for a preset that does. Setting only one of the two is unsupported: the unset half still falls back to the system colour, which may not pair safely with the preset's chosen half. */ background: var(--tpn-filter-panel-bg, Canvas); color: var(--tpn-filter-panel-fg, CanvasText); box-shadow: 0 12px 28px -12px oklch(0 0 0 / 0.35); } /* The production-sized facets stay inside one compact More disclosure. The panel is intentionally a bounded, scrollable surface: curated amenities can add dozens of links without stretching a search page below its results. */ #liquid-page :where(.tpn-filters__more-panel) { width: min(56rem, calc(100vw - 2rem)); max-width: none; max-height: min(70vh, 42rem); overflow: auto; } #liquid-page :where(.tpn-filters__advanced) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 1.25rem; } #liquid-page :where(.tpn-filters__facet) { min-width: 0; margin: 0; padding: 0; border: 0; } #liquid-page :where(.tpn-filters__facet-legend) { margin: 0 0 0.5rem; padding: 0; color: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; } /* Chips inside the panel take the PANEL's ink, not the page's. */ #liquid-page :where(.tpn-filters__panel) :where(.tpn-filters__link) { color: inherit; border-color: color-mix(in oklab, currentColor 25%, transparent); background: transparent; } #liquid-page :where(.tpn-filters__panel) :where(.tpn-filters__link--active) { background: color-mix(in oklab, currentColor 14%, transparent); } #liquid-page :where(.tpn-filters__options) { display: flex; flex-wrap: wrap; gap: 0.375rem; } #liquid-page :where(.tpn-filters__link, .tpn-filters__reset) { display: inline-flex; box-sizing: border-box; min-height: 44px; align-items: center; justify-content: center; /* Derived from the inherited ink, NOT from fixed light-theme defaults. The previous pair took its background from the preset (often defined, often dark) and its text colour from a near-black FALLBACK (rarely defined), so on every dark-surfaced preset the chips rendered near-black on near-black, measured at 1.25:1 and were simply unreadable. Inheriting the text colour and tinting the surface with it keeps a chip legible on any surface a preset chooses, which is the "inheritance over invention" rule the shared floor already states. */ border: 1px solid color-mix(in oklab, currentColor 22%, transparent); border-radius: var(--radius, 0.625rem); background: color-mix(in oklab, currentColor 6%, transparent); color: inherit; padding: 0.625rem 0.875rem; font-size: 0.875rem; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; } #liquid-page :where(.tpn-filters__link:hover, .tpn-filters__reset:hover) { background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; } #liquid-page :where(.tpn-filters__link:focus-visible, .tpn-filters__reset:focus-visible) { outline: 3px solid var(--ring, var(--primary, oklch(0.28 0.04 235))); outline-offset: 2px; } #liquid-page :where(.tpn-filters__link--active, .tpn-filters__link--active:hover) { /* Selection is expressed with weight and an outline, not a filled brand colour. A filled state cannot be made contrast-safe from here: it pairs a preset-defined --primary with a --primary-foreground the preset usually does NOT define, so on every dark-primary preset the active chip rendered dark-on-dark (measured 1.05:1). Weight + border + underline inherit the page ink, so they are exactly as legible as body text on any surface. A preset that defines a real primary/foreground pair can still fill the chip: everything here is :where(), so one preset class beats all of it. */ border-color: currentColor; background: color-mix(in oklab, currentColor 12%, transparent); color: inherit; font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; } #liquid-page :where(.tpn-filters__reset) { align-self: end; color: var(--primary, oklch(0.28 0.04 235)); } @media (min-width: 52rem) { #liquid-page :where(.tpn-filters__more-panel) { left: auto; right: 0; } } /* The 44px minimum above is a touch target and stays wherever the pointer is coarse. On a mouse-driven viewport it is dead height repeated across ~28 chips, so the same controls get a denser (but still comfortably clickable) scale — this is most of what moves the first search result into the fold. */ @media (min-width: 52rem) and (pointer: fine) { #liquid-page :where(.tpn-filters__link, .tpn-filters__reset) { min-height: 34px; padding: 0.4rem 0.7rem; font-size: 0.8125rem; } #liquid-page :where(.tpn-filters__options) { gap: 0.3rem; } #liquid-page :where(.tpn-filters) { gap: 0.85rem; margin-bottom: 1.5rem; } } /* ── Folding overflow chips into "More" ─────────────────────────────────── No JavaScript is available to measure available width, so folding is done with static breakpoints instead of container queries against actual content size: `renderListingFiltersHtml` tags Bathrooms/Bedrooms/Property type with `data-tpn-fold="1"/"2"/"3"` (Transaction, Price and More are never folded — they're the facets a visitor reaches for first), and `renderMoreFilters` renders an identical copy of each behind `.tpn-filters__folded[data-tpn-fold="N"]` at the top of the More panel (built with the same `renderAdvancedFacet` helper the other advanced facets use, so it's visually consistent with the rest of the panel). Each breakpoint below hides one rail chip and reveals its folded twin in the same rule, so exactly one copy of a facet is visible at any width — never both, never neither. */ #liquid-page :where(.tpn-filters__folded) { display: none; } @media (max-width: 64rem) { #liquid-page :where(.tpn-filters__group[data-tpn-fold="1"]) { display: none; } #liquid-page :where(.tpn-filters__folded[data-tpn-fold="1"]) { display: block; } } @media (max-width: 52rem) { #liquid-page :where(.tpn-filters__group[data-tpn-fold="2"]) { display: none; } #liquid-page :where(.tpn-filters__folded[data-tpn-fold="2"]) { display: block; } } @media (max-width: 44rem) { #liquid-page :where(.tpn-filters__group[data-tpn-fold="3"]) { display: none; } #liquid-page :where(.tpn-filters__folded[data-tpn-fold="3"]) { display: block; } } /* ── Price panel free-form range form ───────────────────────────────────── `.tpn-filters__price-form` sits above the preset price chips inside the Price panel — presets keep working with plain links, and a visitor who wants an exact number can type one instead. `method="get"` posting to `/filter-resolve` (see `apps/agent-website/app/[domain]/filter-resolve/route.ts`) is itself a real top-level navigation, so this needs no client script and nothing here is gated behind `script-src`. */ #liquid-page :where(.tpn-filters__price-form) { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0 0 0.75rem; border-bottom: 1px solid color-mix(in oklab, currentColor 16%, transparent); } #liquid-page :where(.tpn-filters__price-field) { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } #liquid-page :where(.tpn-filters__price-label) { font-size: 0.75rem; font-weight: 600; color: color-mix(in oklab, currentColor 80%, transparent); } #liquid-page :where(.tpn-filters__price-input) { box-sizing: border-box; width: 7rem; min-height: 44px; padding: 0.5rem 0.625rem; border: 1px solid color-mix(in oklab, currentColor 25%, transparent); border-radius: var(--radius, 0.625rem); background: transparent; color: inherit; font-size: 0.875rem; } #liquid-page :where(.tpn-filters__price-input):focus-visible { outline: 3px solid var(--ring, var(--primary, oklch(0.28 0.04 235))); outline-offset: 1px; } #liquid-page :where(.tpn-filters__price-submit) { display: inline-flex; box-sizing: border-box; min-height: 44px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: var(--radius, 0.625rem); background: color-mix(in oklab, currentColor 10%, transparent); color: inherit; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; } #liquid-page :where(.tpn-filters__price-submit):hover { background: color-mix(in oklab, currentColor 18%, transparent); } #liquid-page :where(.tpn-filters__price-submit):focus-visible { outline: 3px solid var(--ring, var(--primary, oklch(0.28 0.04 235))); outline-offset: 2px; } /* ── Mobile "Filters" button ─────────────────────────────────────────────── Below 48rem (768px) only ~2 of `.tpn-filters`'s groups fit before the nowrap rail above runs out of room. `renderMobileFiltersButton` (`filter-tags.ts`) emits this trigger, ships `hidden` in the markup, and the JSON facet model `{% listing_filters %}` also emits (`data-tpn-filters-model` on `.tpn-filters`) is what `LiquidFilterIslands` (`apps/agent-website/components/liquid-filters/liquid-filter-islands.tsx`) reads to drive a shadcn `Drawer` bottom sheet — a React island, not a native `

Guiding you home.

Real estate is personal. So is our approach.

Local insight across every market we serve

Your next move starts here.