/* AqarTrust — the marketplace filter panel. Linked only on the opportunities page (functions/[[route]].js, ROUTE_CSS). Every selector is namespaced (.f-*), so nothing here can reach another layout. Logical properties only: the whole panel mirrors from without a single left or right in the file. */ /* ---------- head: count, search, toolbar ---------- */ .f-head { border-block-end: 1px solid var(--line); background: var(--surface); } .f-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .f-h1 { font-size: clamp(23px, 3vw, 34px); margin-block-start: 8px; } .f-sub { margin-block-start: 6px; } /* what this kind of listing is (resale against contract transfer, update/LISTING_MODES.md); not on /opportunities, where the first card photo must stay the largest paint */ .f-lede { margin-block-start: 6px; max-width: 62ch; color: var(--ink-2); } /* minmax(0, 1fr), not 1fr: a 1fr track will not shrink below its input's intrinsic width, which pushed the page 16px sideways at 375px. */ .f-search { margin: 0; grid-template-columns: minmax(0, 1fr) auto; flex: 1 1 340px; max-width: 540px; min-width: 0; } .f-search .hsearch-in { min-width: 0; } .f-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-start: 18px; } .f-quick { flex: 0 1 auto; } /* the chips are .has-count: the count's badge, side and gap come from style.css */ .f-sort { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .f-sort select { min-height: 40px; padding-block: 6px; width: auto; min-width: 186px; } .f-sort label { white-space: nowrap; } .f-toggle { display: none; align-items: center; gap: 7px; } .f-toggle svg { width: 17px; height: 17px; } .f-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--jade); color: var(--on-jade); font-size: 11.5px; font-weight: 700; } /* ---------- active filter pills ---------- */ .f-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px dashed var(--line); } .f-active-k { flex: none; } .f-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade); font-size: 13.5px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--jade) 22%, transparent); transition: background .15s, color .15s; } .f-chip:hover { background: var(--jade); color: var(--on-jade); border-color: var(--jade); } .f-chip-x { font-size: 15px; line-height: 1; opacity: .7; } .f-chip-clear { background: transparent; color: var(--ink-2); border-color: var(--line-2); } .f-chip-clear:hover { background: var(--clay-wash); color: var(--clay); border-color: transparent; } .f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- layout ---------- */ .f-main { padding-block: 24px clamp(40px, 6vw, 72px); } .f-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 26px; align-items: start; } .f-results { min-width: 0; } .f-results.is-busy { opacity: .5; pointer-events: none; transition: opacity .2s var(--ease); } .f-empty { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); } .f-empty-h { font-size: 18px; font-weight: 700; color: var(--ink); margin-block-end: 6px; } /* ---------- the panel ---------- */ .f-panel { position: sticky; inset-block-start: calc(var(--nav-h) + 12px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--nav-h) - 26px); min-width: 0; } /* This was a grid inside a height-capped scroll container, and the track sizing gave each open group a 136px row while the group itself rendered at 470px — so every group painted over the one below it. A flex column has no track sizing to get wrong: children keep their own height and the container scrolls. */ .f-groups { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 3px; } .f-groups > * { flex: 0 0 auto; } .f-groups::-webkit-scrollbar { width: 8px; } .f-groups::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; } /* Shown at every width: it holds "Save this search", and hiding it above 980px left desktop visitors no way to save one. Only the close button is phone-only. */ .f-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; } .f-x { display: none; font-size: 22px; line-height: 1; color: var(--ink-3); padding: 0 6px; } .f-x:hover { color: var(--clay); } .f-foot { display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 9px; } .f-show { flex: 1 1 auto; } .f-hide-btn { display: none; } .f-panel.is-dirty .f-show { box-shadow: 0 0 0 3px var(--jade-wash); } /* ---------- a group ---------- */ .f-g > summary { gap: 8px; padding: 12px 14px; } .f-gt { margin-inline-end: auto; } .f-gc { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--jade); color: var(--on-jade); font-size: 11px; font-weight: 700; } .f-b { padding: 2px 12px 13px; display: grid; gap: 9px; } .f-scroll { max-height: 262px; overflow-y: auto; overscroll-behavior: contain; margin-inline: -4px; padding-inline: 4px; } .f-scroll::-webkit-scrollbar { width: 7px; } .f-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; } .f-sub-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-block-start: 3px; } .f-hint { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-block-start: 5px; } .f-hint-top { margin-block: 0 2px; } .f-none { padding: 8px 10px; } /* ---------- an option row ---------- */ .f-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-xs); cursor: pointer; } .f-opt:hover { background: var(--surface-2); } .f-opt input { inline-size: 18px; block-size: 18px; min-height: 0; flex: none; cursor: pointer; } .f-opt-t { flex: 1; min-width: 0; display: grid; } .f-opt-l { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; } .f-opt-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; } .f-opt.is-on { background: var(--jade-wash); } .f-opt.is-on .f-opt-l { color: var(--jade); font-weight: 600; } .f-opt.is-zero .f-opt-l, .f-pill.is-zero > span { color: var(--ink-3); } /* dimmed by colour, not opacity: zero is information and must stay readable */ .f-opt:focus-within { outline: 2px solid var(--jade); outline-offset: 1px; } .f-n { font-size: 12px; font-weight: 600; color: var(--ink-3); flex: none; } /* ---------- a city block inside the area list ---------- */ .f-city + .f-city { margin-block-start: 4px; border-block-start: 1px solid var(--line); padding-block-start: 4px; } .f-city-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 700; color: var(--ink-3); } .f-city-h:hover { background: var(--surface-2); color: var(--jade); } .f-city-a { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; } /* ---------- a developer and its projects (N24) ---------- */ .f-dev + .f-dev { margin-block-start: 2px; } /* its projects, indented under it; shown once it or one of them is ticked, without JavaScript */ .f-nest { margin-inline-start: 26px; padding-inline-start: 6px; border-inline-start: 2px solid var(--line); } .f-dev:not(:has(input:checked)) > .f-nest { display: none; } /* ---------- the listing-mode switch above the results (functions/_app/modes.js) ---------- */ .f-modes { margin-block-end: var(--space-4); } /* the selected tab's count: the tinted badge on jade reads below 4.5:1 (axe), so it takes the pair reversed */ .f-modes .chip.on > .count { background: var(--on-jade); color: var(--jade); } /* ---------- pill toggles ---------- */ .f-pills-row { display: flex; flex-wrap: wrap; gap: 6px; } .f-pill { position: relative; display: inline-flex; } .f-pill input { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; opacity: 0; margin: 0; cursor: pointer; } .f-pill > span { display: inline-flex; align-items: center; gap: 7px; /* .has-count: the count's side comes from style.css */ padding: 6px 11px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; } .f-pill:hover > span { border-color: var(--ink-3); color: var(--ink); } .f-pill input:checked + span { background: var(--jade); border-color: var(--jade); color: var(--on-jade); } .f-pill input:focus-visible + span { outline: 2.5px solid var(--jade); outline-offset: 2px; } /* ---------- number and money inputs ---------- */ .f-num-l { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-block-end: 5px; } .f-num-in { display: flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; } .f-num-in:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-wash); } .f-num-in input { flex: 1; min-width: 0; min-height: 42px; padding: 9px 12px; border: 0; background: transparent; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; font-size: 15px; } [dir="rtl"] .f-num-in input { text-align: end; } /* the input is ltr inside, so end is the digit side */ .f-num-in input:focus { outline: 0; box-shadow: none; } .f-num-u { display: grid; place-items: center; padding-inline: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-inline-start: 1px solid var(--line); white-space: nowrap; } .f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ---------- the list search box ---------- */ .f-find { position: relative; display: flex; align-items: center; } .f-find svg { position: absolute; inset-inline-start: 10px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; } /* size and the icon's room only; the look is the shared control (update/CONVENTIONS.md) */ .f-find input { width: 100%; min-height: 40px; padding-block: 8px; padding-inline: 34px 12px; font-size: 14px; } .f-find input::-webkit-search-cancel-button { cursor: pointer; } /* ---------- narrow screens: the panel lives behind the Filters button ---------- */ @media (max-width: 980px) { .f-layout { grid-template-columns: 1fr; } .f-toggle { display: inline-flex; } .f-sort { margin-inline-start: 0; } .f-panel { display: none; position: static; max-height: none; margin-block-end: 20px; } .f-panel.is-open { display: flex; } .f-x { display: inline; } .f-hide-btn { display: inline-flex; } .f-groups { overflow: visible; max-height: none; } .f-scroll { max-height: 300px; } .f-foot { position: sticky; inset-block-end: 0; z-index: 6; box-shadow: var(--sh-2); } } @media (max-width: 620px) { .f-title { align-items: stretch; } .f-search { max-width: none; flex: 1 1 100%; } .f-bar { gap: 8px; } .f-quick { order: 3; flex: 1 1 100%; } .f-sort { flex: 1 1 100%; } .f-sort select { flex: 1; min-width: 0; } .f-two { grid-template-columns: 1fr; } .f-h1 { font-size: 26px; } } /* The search row kept its three-column desktop grid on a phone, so it was 474px wide in a 390px viewport and scrolled the whole page sideways. */ @media (max-width: 620px) { .hsearch.f-search { grid-template-columns: 1fr; min-width: 0; } .hsearch.f-search > * { min-width: 0; } } .hsearch.f-search { max-width: 100%; } .hsearch.f-search .hsearch-in { min-width: 0; } .f-said { margin-block-start: 6px; color: var(--jade); }