/* CARIBASOL — T-RESULTS (review preview). Visual baseline: Home V2 (index.html): Archivo Expanded titles + Inter text (D-090), page gradient warm off-white → pale desaturated blue, greige/pale-yellow surface gradients, brand blue / deep blue, 12/20/24 radii. Behaviour: WF-03 §8.1–8.4, D-027…D-031, D-043; sticky contract D-062 (--sticky-top). No third-party CSS. */ /* ---- tokens, base, page gradient, review note, motion discipline: css/base.css (giro 13) ---- */ /* ---- header, phone menu, footer: css/shell.css (giro 13, D-127 — one shell on every page) ---- */ .icon-btn { width: calc(33px * var(--ui)); height: calc(33px * var(--ui)); border: 0; background: transparent; border-radius: calc(9px * var(--ui)); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); } /* ---- intro ---- */ .intro { padding: calc(18px * var(--ui)) var(--gx) calc(15px * var(--ui)); max-width: calc(760px + 2 * var(--gx)); } .intro h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(29px * var(--ui)), calc(3.8vw * var(--ui)), calc(44px * var(--ui))); line-height: 1.06; /* giro 22 (D-205): the page-title scale of .pg-intro h1 (was 33 / 23 px, 1.08) */ font-weight: 600; letter-spacing: -.02em; text-wrap: pretty; } .intro h1 span { display: block; } /* Resale / New developments share the same two-line title geometry */ .intro__lede { margin: calc(11px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); max-width: calc(480px * var(--ui)); } .intro__count { margin: calc(11px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); min-height: calc(25px * var(--ui)); } .intro__count .n { font-size: calc(17px * var(--ui)); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-right: calc(3px * var(--ui)); } .intro__note { margin: calc(8px * var(--ui)) 0 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); } .intro__guides { margin: calc(8px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); } /* giro 17: link from Buy to the Guides */ .intro__guides a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 1024px) { .intro { padding-top: calc(var(--hdr-h) + calc(30px * var(--ui))); } } /* the desktop header is out of flow (sticky wrapper of height 0) */ /* ---- filter bar: sticky at --sticky-top (D-062) ---- */ .fbar-sentinel { height: 1px; } .fbar { position: sticky; top: var(--sticky-top); z-index: 15; padding: 0 var(--gx); } /* surface: one system with the floating header — cream rgba(247, 250, 253,.82) + blur 18 + hairline; the V2 panel gradient sits on top while docked and fades out when stuck */ /* giro 15 (D-139): the blur is NOT on the element that holds the text — a backdrop-filter makes the element a separate layer and its text is painted with the softer layer anti-aliasing. The cream .82 surface + blur 18 sit on ::after (behind the gradient ::before, behind the text); the bar itself is plain. Same look. */ .mbar, .fbar .sheet { position: relative; isolation: isolate; border-radius: var(--r-panel); border: 1px solid rgba(14, 34, 64, .08); box-shadow: 0 8px 28px rgba(14, 34, 64, .05); transition: box-shadow .25s; } .mbar::after, .fbar .sheet::after { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; background: rgba(247, 250, 253, .82); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); } .mbar::before, .fbar .sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surf-panel); opacity: 1; transition: opacity .25s; } .fbar.stuck .mbar::before, .fbar.stuck .sheet::before { opacity: 0; } .fbar.stuck .mbar, .fbar.stuck .sheet { box-shadow: 0 8px 28px rgba(14, 34, 64, .06); } /* phones: compact bar = the single sticky region */ .mbar { display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: calc(6px * var(--ui)) calc(6px * var(--ui)) calc(6px * var(--ui)) calc(8px * var(--ui)); } .mbar__count { font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; min-width: 0; flex: 1 1 auto; text-align: right; overflow: hidden; text-overflow: ellipsis; } .mbar .btn--filters, .mbar .sortbox { flex: 0 0 auto; } .sortbox--m select { max-width: calc(84px * var(--ui)); } .btn--filters { min-height: calc(33px * var(--ui)); } .btn .count { display: inline-flex; align-items: center; justify-content: center; min-width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); padding: 0 calc(5px * var(--ui)); border-radius: calc(749px * var(--ui)); background: var(--blue); color: #fff; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; margin-left: calc(3px * var(--ui)); } .btn--ghost .count { background: var(--blue); } @media (min-width: 1024px) { .mbar { display: none; } } /* the ONE form: in-flow dialog (desktop bar) · :modal sheet (phones) */ .sheet { position: relative; height: auto; max-height: none; inset: auto; border: 0; padding: 0; margin: 0; width: 100%; max-width: none; background: transparent; color: inherit; display: none; overflow: visible; } .sheet[open] { display: block; } .sheet form { display: contents; } .sheet__head, .sheet__foot { display: none; } @media (max-width: 1023.98px) { .sheet:modal { display: flex; flex-direction: column; position: fixed; inset: 0; width: 100%; height: 100%; max-height: 100%; background: var(--ground); } .sheet:modal form { display: flex; flex-direction: column; height: 100%; min-height: 0; } .sheet:modal .sheet__head { display: flex; align-items: center; justify-content: space-between; padding: calc(9px * var(--ui)) calc(6px * var(--ui)) calc(9px * var(--ui)) calc(15px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .sheet:modal .sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: calc(15px * var(--ui)) calc(15px * var(--ui)) calc(18px * var(--ui)); -webkit-overflow-scrolling: touch; } .sheet:modal .sheet__foot { display: flex; gap: calc(9px * var(--ui)); padding: calc(9px * var(--ui)) calc(12px * var(--ui)) calc(calc(9px * var(--ui)) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ground); flex: 0 0 auto; } .sheet:modal .sheet__foot .btn--primary { flex: 1 1 auto; } .sheet::backdrop { background: rgba(14, 34, 64, .35); } /* no-JS phones: dialog stays open in flow → render as a plain panel */ .no-js .sheet[open] { background: var(--surf-panel); border-radius: var(--r-panel); padding: calc(12px * var(--ui)); margin-top: calc(9px * var(--ui)); } .no-js .sheet[open] .sheet__foot { display: flex; gap: calc(9px * var(--ui)); margin-top: calc(12px * var(--ui)); } } @media (min-width: 1024px) { .fbar .sheet { display: block; padding: calc(9px * var(--ui)) calc(12px * var(--ui)) calc(8px * var(--ui)); } .frow { display: grid; grid-template-columns: auto minmax(calc(150px * var(--ui)), 1fr) calc(87px * var(--ui)) calc(78px * var(--ui)) calc(150px * var(--ui)) auto auto; gap: calc(8px * var(--ui)); align-items: start; } .frow .seg--mode, .frow .btn--search, .frow .btn--more { margin-top: calc(18px * var(--ui)); } /* label height 18 + gap 6: same row as the inputs, no fake label */ .btn--more { padding: 0 calc(5px * var(--ui)) 0 calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); } .more { display: none; } .fbar.more-open .more { display: block; } .more { margin-top: calc(6px * var(--ui)); padding-top: calc(8px * var(--ui)); border-top: 1px solid rgba(14, 34, 64, .08); max-height: calc(100vh - var(--sticky-top) - calc(120px * var(--ui))); overflow: auto; } .more__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) calc(128px * var(--ui)); gap: calc(9px * var(--ui)) calc(15px * var(--ui)); align-items: start; } .more .fld { gap: calc(3px * var(--ui)); } .more .seg--n label span { min-height: calc(27px * var(--ui)); padding: 0 calc(9px * var(--ui)); } .more .chip { min-height: calc(26px * var(--ui)); padding: 0 calc(8px * var(--ui)); } .more .field { height: calc(30px * var(--ui)); } .more__foot { display: flex; justify-content: flex-end; gap: calc(6px * var(--ui)); margin-top: calc(6px * var(--ui)); } } /* giro 7 fix: the one-row bar needs ≈1160 px — between 1024 and 1299 it ran past the viewport (page overflow up to 1225 px). There it wraps onto two rows: mode · location · type · beds / price · Search · More filters. ≥ 1300 unchanged. */ @media (min-width: 1024px) and (max-width: 1299px) { .frow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(5px * var(--ui)) calc(8px * var(--ui)); } .frow > * { order: 6; } .frow .seg--mode { order: 1; } .frow .fld--loc { order: 2; flex: 1 1 calc(150px * var(--ui)); min-width: 0; } #pop-type { order: 3; width: calc(87px * var(--ui)); } #pop-beds { order: 4; width: calc(78px * var(--ui)); } .frow::after { content: ''; order: 5; flex: 0 0 100%; height: 0; } /* forced line break */ .frow .fld--price { order: 6; flex: 0 1 calc(255px * var(--ui)); } .frow .btn--search { order: 7; } .frow .btn--more { order: 8; margin-left: auto; } #pop-beds .pop__panel { left: auto; right: 0; } /* Beds closes the first row here: its panel opens toward the page */ } /* ---- controls (V2 panel values) ---- */ .fld { display: flex; flex-direction: column; gap: calc(5px * var(--ui)); min-width: 0; border: 0; padding: 0; margin: 0; } .fld__label { font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--muted); } .field { height: calc(36px * var(--ui)); width: 100%; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); padding: 0 calc(11px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); outline: none; } .field:focus { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .field::placeholder { color: var(--muted); font-weight: 500; } .native-select { display: block; width: 100%; min-height: calc(36px * var(--ui)); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); padding: calc(6px * var(--ui)) calc(9px * var(--ui)); } .seg { display: inline-flex; background: var(--ground-2); border-radius: calc(749px * var(--ui)); padding: 2px; border: 0; margin: 0; } .seg label { position: relative; display: inline-flex; } .seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; } .seg label span { display: inline-flex; align-items: center; justify-content: center; min-height: calc(29px * var(--ui)); padding: 0 calc(11px * var(--ui)); border-radius: calc(749px * var(--ui)); color: var(--muted); font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; } .seg label:has(:checked) span { background: var(--blue); color: #fff; } .seg label:has(:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 2px; } .seg--mode label span { padding: 0 calc(10px * var(--ui)); min-height: calc(32px * var(--ui)); } .seg--n { flex-wrap: wrap; } .seg--n label span { min-width: calc(33px * var(--ui)); min-height: calc(32px * var(--ui)); } @media (max-width: 1023.98px) { .seg--mode { width: 100%; } .seg--mode label { flex: 1 1 0; } .seg--mode label span { width: 100%; min-height: calc(33px * var(--ui)); } } /* location: field-like button + searchable multi-select popover (provider vocabulary grouped by zone) */ .loc-btn { position: relative; width: 100%; height: calc(36px * var(--ui)); display: flex; align-items: center; gap: calc(6px * var(--ui)); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); padding: 0 calc(26px * var(--ui)) 0 calc(9px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; } .loc-btn > svg:first-child { color: var(--muted); flex: 0 0 auto; } .loc-btn__val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loc-btn__val.is-empty { color: var(--muted); font-weight: 500; } .loc-btn__chev { position: absolute; right: calc(9px * var(--ui)); top: 50%; transform: translateY(-50%); color: var(--muted); transition: transform .2s; } .loc-btn[aria-expanded=true] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .loc-btn[aria-expanded=true] .loc-btn__chev { transform: translateY(-50%) rotate(180deg); } .loc-pop { background: var(--white); border-radius: calc(12px * var(--ui)); border: 1px solid var(--line); padding: calc(8px * var(--ui)); } .loc-search { display: flex; align-items: center; gap: calc(6px * var(--ui)); height: calc(33px * var(--ui)); padding: 0 calc(9px * var(--ui)); border-radius: calc(8px * var(--ui)); background: var(--ground-2); color: var(--muted); } .loc-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--ink); height: calc(30px * var(--ui)); } .loc-search input::placeholder { color: var(--muted); } .loc-search:focus-within { box-shadow: 0 0 0 2px var(--blue); } .loc-pop .ta-chips { display: flex; flex-wrap: wrap; gap: calc(5px * var(--ui)); margin: calc(6px * var(--ui)) 0 0; } .loc-pop .ta-chips:empty { display: none; } .ta-list { margin: calc(6px * var(--ui)) 0 0; padding: 0; list-style: none; max-height: calc(198px * var(--ui)); overflow: auto; overscroll-behavior: contain; } .ta-list li[role=option] { display: flex; align-items: center; gap: calc(8px * var(--ui)); min-height: calc(30px * var(--ui)); padding: calc(3px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); cursor: pointer; } .ta-list li.is-zone { font-weight: 600; margin-top: calc(3px * var(--ui)); } .ta-list li[role=option] .meta { margin-left: auto; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ta-list li:not(.is-zone) { padding-left: calc(17px * var(--ui)); } .ta-list li.is-active, .ta-list li[role=option]:hover { background: var(--blue-t); } .ta-list .tick { flex: 0 0 auto; width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); border-radius: calc(5px * var(--ui)); border: 1.5px solid var(--line-2); background: var(--white); position: relative; } .ta-list li[aria-selected=true] .tick { background: var(--blue); border-color: var(--blue); } .ta-list li[aria-selected=true] .tick::after { content: ''; position: absolute; left: calc(4px * var(--ui)); top: 2px; width: calc(4px * var(--ui)); height: calc(7px * var(--ui)); border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .ta-list .ta-empty { padding: calc(9px * var(--ui)) calc(6px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); } .loc-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui)); margin-top: calc(6px * var(--ui)); padding-top: calc(6px * var(--ui)); border-top: 1px solid var(--line); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); } @media (min-width: 1024px) { .fld--loc { position: relative; } .loc-pop { position: absolute; left: 0; top: calc(100% + calc(6px * var(--ui))); width: calc(285px * var(--ui)); max-width: calc(100vw - 2 * var(--gx)); box-shadow: 0 16px 40px rgba(14, 34, 64, .14); z-index: 7; } } @media (max-width: 1023.98px) { .loc-pop { margin-top: calc(6px * var(--ui)); } } /* chips (checkbox chips + active-filter chips) */ .chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); } .chip { display: inline-flex; align-items: center; gap: calc(5px * var(--ui)); min-height: calc(27px * var(--ui)); padding: 0 calc(9px * var(--ui)); border-radius: calc(749px * var(--ui)); background: var(--ground-2); border: 1px solid transparent; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--ink); white-space: nowrap; cursor: pointer; position: relative; transition: background .15s, color .15s; } .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .chip:has(:checked) { background: var(--blue); color: #fff; } .chip:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .chips--active .chip { background: var(--white); border-color: var(--line); padding-right: calc(3px * var(--ui)); } .chip__x { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); border: 0; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .chip__x:hover { background: var(--ground-2); color: var(--ink); } .chips--active .chip--clear, .chip--clear { background: transparent; color: var(--blue); border-color: transparent; padding: 0 calc(9px * var(--ui)); justify-content: center; line-height: 1; font: inherit; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; } .chip--clear:hover { text-decoration: underline; } /* faceted availability (D-078): a value the current universe cannot reach stays in place (no layout jump) and is disabled */ .chip:has(:disabled), .seg label:has(:disabled) span { opacity: .34; cursor: not-allowed; } .chip:has(:disabled) { background: var(--ground-2); color: var(--ink); } .chips__note { flex: 1 1 100%; margin-top: 2px; } .ta-list li[role=option] .meta { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; } /* popovers (desktop): details/summary styled as a field */ .pop { position: relative; min-width: 0; } .pop > summary { list-style: none; display: flex; flex-direction: column; gap: calc(5px * var(--ui)); cursor: pointer; } .pop > summary::-webkit-details-marker { display: none; } .pop > summary .pop__val { display: flex; align-items: center; justify-content: space-between; gap: calc(6px * var(--ui)); height: calc(36px * var(--ui)); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--white); padding: 0 calc(9px * var(--ui)) 0 calc(11px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pop > summary svg { position: absolute; right: calc(9px * var(--ui)); bottom: calc(12px * var(--ui)); color: var(--muted); pointer-events: none; transition: transform .2s; } .pop[open] > summary svg { transform: rotate(180deg); } .pop[open] > summary .pop__val { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .pop > summary:focus-visible { outline: none; } .pop > summary:focus-visible .pop__val { outline: 2px solid var(--blue); outline-offset: 2px; } .pop__panel { border: 0; margin: 0; padding: 0; } @media (min-width: 1024px) { .pop__panel { position: absolute; left: 0; top: calc(100% + calc(6px * var(--ui))); min-width: 100%; width: max-content; max-width: calc(315px * var(--ui)); background: var(--white); border-radius: calc(12px * var(--ui)); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(14, 34, 64, .14); padding: calc(11px * var(--ui)); z-index: 6; } } @media (max-width: 1023.98px) { .pop { display: flex; flex-direction: column; gap: calc(5px * var(--ui)); } .pop::before { content: attr(data-label); font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--muted); } } /* price range: two editable EUR fields (authoritative) on one row, two native ranges on one track BELOW them (WF-03 8.1, D-043 model C: 29 stops) */ .range { --th: calc(21px * var(--ui)); --tv: calc(12px * var(--ui)); } /* thumb hit size / visible circle (phones: 44 / 20) */ .range__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3px * var(--ui)) calc(6px * var(--ui)); align-items: center; } .money { position: relative; min-width: 0; } .money .field { padding: 0 calc(20px * var(--ui)) 0 calc(8px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); } .money span { position: absolute; right: calc(8px * var(--ui)); top: 0; bottom: 0; display: flex; align-items: center; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); pointer-events: none; } /* giro 15: centred by flex, not translateY(-50%) (a half-pixel offset) */ .range__track { grid-column: 1 / -1; position: relative; height: var(--th); min-width: 0; --min: 0; --max: 100; } .range__track::before { content: ''; position: absolute; left: calc(var(--th) / 2); right: calc(var(--th) / 2); top: calc(var(--th) / 2 - 2px); height: calc(3px * var(--ui)); border-radius: 2px; background: var(--line); } /* the part of the scale the current search cannot reach is shaded out (D-078); the handles stop there, "Any" stays reachable */ .range--bounded .range__track::before { background: linear-gradient(90deg, var(--ground-2) 0 calc(var(--alo, 0) * 1%), var(--line) calc(var(--alo, 0) * 1%) calc(var(--ahi, 100) * 1%), var(--ground-2) calc(var(--ahi, 100) * 1%) 100%); } .range__fill { position: absolute; top: calc(var(--th) / 2 - 2px); height: calc(3px * var(--ui)); border-radius: 2px; background: var(--blue); left: calc(var(--th) / 2 + (100% - var(--th)) * var(--min) / 100); width: calc((100% - var(--th)) * (var(--max) - var(--min)) / 100); } .range__track input[type=range] { position: absolute; inset: 0; width: 100%; height: var(--th); margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; outline: none; } .range__track input[type=range]::-webkit-slider-runnable-track { height: var(--th); background: transparent; border: 0; } .range__track input[type=range]::-moz-range-track { height: var(--th); background: transparent; border: 0; } .range__track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: var(--th); height: var(--th); margin-top: 0; border: 0; border-radius: 50%; cursor: grab; background: radial-gradient(circle, #fff 0 calc(var(--tv) / 2 - 2px), var(--blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px)); } .range__track input[type=range]::-moz-range-thumb { pointer-events: auto; width: var(--th); height: var(--th); border: 0; border-radius: 50%; cursor: grab; background: radial-gradient(circle, #fff 0 calc(var(--tv) / 2 - 2px), var(--blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px)); } .range__track input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; background: radial-gradient(circle, #fff 0 calc(var(--tv) / 2 - 2px), var(--blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), rgba(13, 83, 161, .18) calc(var(--tv) / 2 + .5px) calc(var(--th) / 2 - 1px), transparent calc(var(--th) / 2)); } .range__track input[type=range]:focus-visible::-webkit-slider-thumb { background: radial-gradient(circle, #fff 0 calc(var(--tv) / 2 - 2px), var(--blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px) calc(var(--tv) / 2 + 3px), var(--blue) calc(var(--tv) / 2 + 3px) calc(var(--tv) / 2 + 5px), transparent calc(var(--tv) / 2 + 5.5px)); } .range__track input[type=range]:focus-visible::-moz-range-thumb { background: radial-gradient(circle, #fff 0 calc(var(--tv) / 2 - 2px), var(--blue) calc(var(--tv) / 2 - 2px) calc(var(--tv) / 2), transparent calc(var(--tv) / 2 + .5px) calc(var(--tv) / 2 + 3px), var(--blue) calc(var(--tv) / 2 + 3px) calc(var(--tv) / 2 + 5px), transparent calc(var(--tv) / 2 + 5.5px)); } .range__readout { margin: 2px 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .range__readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .range { position: relative; } } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--ui)); min-height: calc(36px * var(--ui)); padding: 0 calc(14px * var(--ui)); border-radius: var(--r-ctl); border: 1px solid transparent; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .btn--primary { background: var(--blue); color: #fff; } .btn--primary:hover { background: var(--blue-h); color: #fff; } .btn--secondary { background: var(--white); color: var(--ink); border-color: var(--line); } .btn--secondary:hover { border-color: var(--blue); color: var(--blue); } .btn--ghost { background: transparent; color: var(--blue); padding: 0 calc(8px * var(--ui)); } .btn--ghost:hover { color: var(--blue-h); text-decoration: underline; } .btn--sm { min-height: calc(30px * var(--ui)); padding: 0 calc(11px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); } .btn--more svg { transition: transform .2s; } .btn--more[aria-expanded=true] svg { transform: rotate(180deg); } .btn--search { padding: 0 calc(12px * var(--ui)); } /* ---- results head: count + chips | sort ---- */ .results { padding: calc(17px * var(--ui)) var(--gx) 0; scroll-margin-top: calc(var(--sticky-top) + calc(72px * var(--ui))); } .rhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(8px * var(--ui)) calc(18px * var(--ui)); margin-bottom: calc(15px * var(--ui)); } .rhead__count { margin: 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); font-variant-numeric: tabular-nums; min-height: calc(33px * var(--ui)); display: flex; align-items: center; } .rhead__chips { grid-column: 1 / -1; } .rhead__chips:empty { display: none; } .sortbox { display: inline-flex; align-items: center; gap: calc(6px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); } .sortbox select { min-height: calc(33px * var(--ui)); border: 1px solid var(--line); border-radius: calc(749px * var(--ui)); background: var(--white); padding: 0 calc(26px * var(--ui)) 0 calc(11px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--ink); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235b5751' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .sortbox--m select { padding-left: calc(9px * var(--ui)); } .sortbox--d { display: none; } @media (min-width: 1024px) { .sortbox--d { display: inline-flex; } } /* ---- cards (V2 language: photo + text, no boxes) ---- */ .grid { display: grid; grid-template-columns: 1fr; gap: calc(24px * var(--ui)) calc(18px * var(--ui)); } /* giro 11 (D-115): gaps widened below — the cards' paper face (8 / 12 px around) is present at rest */ .grid[aria-busy=true] { opacity: .55; transition: opacity .2s; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(27px * var(--ui)) calc(24px * var(--ui)); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(36px * var(--ui)) calc(33px * var(--ui)); } } .card, .card:hover { display: block; color: var(--ink); border-radius: var(--r-photo); } /* giro 8: the price no longer turns link-blue on hover (generic a:hover) */ .card:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; } /* D-104 / D-105 (giro 9): the media box is a wrapper; the photograph sits in .t3d__ph (css/shared.css) under the badges and the count; the whole card tilts (js/cards.js) */ .card__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-photo); } .card__ph { background: var(--line); box-shadow: 1px 2px 3px rgba(14, 34, 64, .18), 3px 8px 14px -4px rgba(14, 34, 64, .22); } /* giro 11: the photograph plane of the Home cards (same light, round corners) */ .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--line-2); } .card__media .ph svg { width: calc(36px * var(--ui)); height: calc(36px * var(--ui)); } .badges { position: absolute; z-index: 1; top: calc(9px * var(--ui)); left: calc(9px * var(--ui)); display: flex; gap: calc(5px * var(--ui)); } .badge { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: calc(4px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(749px * var(--ui)); background: rgba(247, 250, 253, .92); color: var(--muted); } .badge--newdev { background: var(--amber); color: var(--ink); } .badge--own { background: rgba(247, 250, 253, .92); color: var(--ink); } .card__count { position: absolute; z-index: 1; right: calc(9px * var(--ui)); bottom: calc(9px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; background: rgba(14, 34, 64, .74); color: #fff; padding: 2px calc(6px * var(--ui)); border-radius: calc(749px * var(--ui)); font-variant-numeric: tabular-nums; } /* giro 13 critique: .55 measured 4.1:1 → .74 (as the Home .lc__n .76) ≥ 4.5:1 over a mid-tone photo */ .card__body { padding: calc(11px * var(--ui)) calc(3px * var(--ui)) 0; } .card__top { display: flex; justify-content: space-between; align-items: baseline; gap: calc(9px * var(--ui)); margin-top: calc(4px * var(--ui)); } .card__price { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .card__price--range { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); } .card__price--por { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--muted); } .card__ref { font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .card__title { margin: calc(3px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.6em; } /* giro 18c (D-183): two lines max, always two lines tall → every card of a grid has the same height */ .card:hover .card__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .card__loc { margin-top: 2px; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); } .card__facts { margin-top: calc(3px * var(--ui)); min-height: 1.4em; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* D-183: one line, constant height */ .card__feat { margin-top: calc(3px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); } /* ---- states ---- */ .state { border-radius: var(--r-big); padding: calc(24px * var(--ui)) calc(18px * var(--ui)); margin: calc(6px * var(--ui)) 0 calc(18px * var(--ui)); } .state h2 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(18px * var(--ui)), calc(3vw * var(--ui)), calc(24px * var(--ui))); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; text-wrap: pretty; } .state p { margin: calc(9px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); max-width: calc(465px * var(--ui)); } .state .chips { margin-top: calc(12px * var(--ui)); } .state__actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(15px * var(--ui)); } .state__help { font-size: max(12px, calc(12px * var(--ui))) !important; } .state--empty { background: var(--surf-tl); border: 1px solid rgba(14, 34, 64, .06); } .state--503 { background: var(--white); border: 1px solid rgba(14, 34, 64, .06); border-top: 3px solid var(--amber); } .state--503 .kicker { color: var(--deep); } @media (min-width: 1024px) { .state { padding: calc(36px * var(--ui)) calc(42px * var(--ui)); } } /* ---- pagination ---- */ .pag { margin: calc(30px * var(--ui)) 0 calc(6px * var(--ui)); } .pag ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(5px * var(--ui)); } .pag a, .pag [aria-current], .pag .gap { display: inline-flex; align-items: center; justify-content: center; min-width: calc(33px * var(--ui)); height: calc(33px * var(--ui)); padding: 0 calc(9px * var(--ui)); border-radius: calc(749px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; font-variant-numeric: tabular-nums; } .pag a { color: var(--ink); background: var(--white); border: 1px solid var(--line); } .pag a:hover { border-color: var(--blue); color: var(--blue); } .pag [aria-current] { background: var(--blue); color: #fff; } .pag .gap { color: var(--muted); } .pag .pag__edge { padding: 0 calc(12px * var(--ui)); } /* ---- editorial note below the results (mode explanation moved out of the intro) ---- */ .mode-note { margin: calc(30px * var(--ui)) 0 0; max-width: calc(480px * var(--ui)); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); padding-top: calc(15px * var(--ui)); border-top: 1px solid var(--line); } /* ---- related landings ---- */ .browse { padding: calc(30px * var(--ui)) var(--gx) 0; } .browse__links { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-top: calc(9px * var(--ui)); } .browse__links a { display: inline-flex; align-items: center; min-height: calc(33px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(749px * var(--ui)); background: var(--white); border: 1px solid var(--line); color: var(--ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; } .browse__links a:hover { border-color: var(--blue); color: var(--blue); } /* ---- footer (V2) ---- */ /* ---- phone sheet layout (after the control rules so it wins the cascade) ---- */ @media (max-width: 1023.98px) { .frow { display: flex; flex-direction: column; gap: calc(17px * var(--ui)); } .seg--mode { order: 1; } .fld--loc { order: 2; } .fld--price { order: 3; } #pop-type { order: 4; } #pop-beds { order: 5; } .btn--search, .btn--more { display: none; } .pop > summary { display: none; } .more { display: block; margin-top: calc(17px * var(--ui)); } .more__grid { display: flex; flex-direction: column; gap: calc(17px * var(--ui)); } .more__foot { display: none; } /* touch: 44 px thumbs, track full width (about 12 px per stop on 350 px, D-043) */ .range { --th: calc(33px * var(--ui)); --tv: calc(15px * var(--ui)); } .range__row { gap: calc(6px * var(--ui)) calc(9px * var(--ui)); } .money .field { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); padding: 0 calc(23px * var(--ui)) 0 calc(9px * var(--ui)); } .chip { min-height: calc(33px * var(--ui)); padding: 0 calc(11px * var(--ui)); } .chips--active .chip { padding-right: 0; } .chip__x { width: calc(33px * var(--ui)); height: calc(33px * var(--ui)); } .seg--n label span { min-height: calc(33px * var(--ui)); } .pag a, .pag [aria-current] { min-width: calc(33px * var(--ui)); } } /* unbuilt routes (D-076): data-route without href — not links: no pointer, no hover, not focusable */ a:not([href]){cursor:default;color:inherit} /* ======================= giro 27 (point 7): Buy — the chosen search on top of the results, a compact bar fixed while scrolling (closes the open point of giro 25) ======================= A (default): the one-row bar IS compact — it stays fixed under the header (sticky, --sticky-top) on desktop; its drop-downs and More filters open below it. B (giro 25 panel): the full panel scrolls away; once it has left the window the compact bar (.mbar: Filters · count · sort) appears fixed under the header — "Filters" brings the panel back. Phones: unchanged — the compact bar is the one sticky region (D-062), "Filters" opens the full-screen sheet. */ @media (min-width: 1024px) { html[data-search=a] .cs-wrap { position: sticky; top: calc(var(--sticky-top) + calc(4px * var(--ui))); z-index: 16; margin-bottom: calc(12px * var(--ui)); } html[data-search=a] .cs-card { padding: 0; border: 0; background: none; box-shadow: none; } html[data-search=a] .cs-card .csa-under { justify-content: flex-start; margin-top: calc(4px * var(--ui)); } /* 27.10.2026: stuck under the header, "More filters" stays — a white pill with a soft shadow, readable over any card or photo */ html[data-search=a] .cs-wrap.is-stuck .csa-under { margin-top: calc(8px * var(--ui)); } html[data-search=a] .cs-wrap.is-stuck .csa-more { min-height: calc(38px * var(--ui)); background: #fff; box-shadow: 0 0 0 1px rgba(13, 83, 161, .10), 0 6px 18px rgba(5, 26, 54, .18); } html[data-search=b].cs-out .fbar .mbar { display: flex; max-width: 100%; } html[data-search=b] .fbar .mbar .btn--filters::after { content: ''; } html[data-search=b] .mbar__count { font-size: max(var(--fs-body-min), calc(15px * var(--ui))); } html[data-search=b] .mbar .sortbox--m select { max-width: none; } html[data-search=b] .mbar { padding: calc(8px * var(--ui)) calc(10px * var(--ui)); } } /* giro 27 (WebKit): a narrow