/* Public browsing components: quiet controls, property photography and the dated stamp. */ .rr-ui .city-discovery { background:var(--paper); padding:22px 0 12px; border-bottom:1px solid var(--line-soft); } .rr-ui .city-discovery__layout { gap:14px; } .rr-ui .city-discovery__intro h1 { font-size:28px; line-height:1.12; letter-spacing:-.032em; } .rr-ui .city-discovery__intro h1 span { color:var(--ink); } .rr-ui .city-discovery__intro p { font-size:13px; margin-top:6px; } .rr-ui .city-search { background:var(--mist); border:1px solid var(--line); box-shadow:none; border-radius:var(--r-btn); min-height:52px; } .rr-ui .city-search:hover { border-color:var(--brand); } .rr-ui .city-search__go { background:transparent; color:var(--brand); box-shadow:none; } .rr-ui .city-search__locate { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-btn); width:48px; height:48px; } .rr-ui .city-discovery__areas { gap:16px; min-height:36px; } .rr-ui .city-discovery__areas a { gap:6px; font-size:12px; min-height:36px; } .city-area-count { color:var(--slate); font-size:11px; font-variant-numeric:tabular-nums; } .rr-ui .discover.has-locked-location { background:var(--paper); padding:12px 0 10px; border-bottom:1px solid var(--line-soft); } .rr-ui .nearby-browse { padding:0; margin:0 0 8px; border:0; } .rr-ui .nearby-browse__heading { min-height:38px; gap:10px; } .rr-ui .rr-location-trail { font-size:13px; gap:8px; } .rr-ui .rr-location-token { background:transparent; border:0; padding:0; font-weight:600; } .rr-ui .rr-location-token > a { width:32px; min-height:36px; display:grid; place-items:center; color:var(--slate); } .rr-ui .rr-browse-actions { gap:10px; } .rr-ui .rr-browse-actions > a { font-size:12px; } .rr-ui .near-search.is-location-locked,.rr-ui .city-browse-controls .near-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0; background:transparent; border:0; box-shadow:none; } .rr-ui .near-search.is-location-locked [data-type-select][hidden] { display:none; } .rr-type-menu { position:relative; flex:0 1 auto; order:1; min-width:0; } .rr-type-menu > summary,.rr-ui .near-search .city-budget,.rr-ui .near-search__more > summary { display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--paper); color:var(--ink-soft); font:600 12px/1.3 var(--font-body); cursor:pointer; list-style:none; white-space:nowrap; box-shadow:var(--shadow-sm); } .rr-type-menu > summary::-webkit-details-marker { display:none; } .rr-ui .near-search .city-budget { order:0; margin:0; } .rr-ui .near-search__more { order:2; margin:0; } .rr-type-menu[open] > summary { border-color:var(--brand); background:var(--brand-tint); color:var(--brand); } .rr-type-menu .rr-type-choices { position:absolute; top:calc(100% + 8px); left:0; z-index:25; display:flex; flex-direction:column; width:200px; padding:6px; gap:2px; border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:var(--shadow-lift); } .rr-type-menu:not([open]) .rr-type-choices { display:none; } .rr-type-menu .rr-type-choices button { display:block; width:100%; min-height:44px; text-align:left; padding:10px 12px; border:0; border-radius:6px; background:transparent; font-size:14px; } .rr-type-menu .rr-type-choices button[aria-pressed=true] { background:var(--brand-tint); color:var(--brand); } .rr-type-menu .rr-type-choices button:hover { background:var(--mist); } .rr-ui [data-near-applied] { order:5; flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; } .rr-ui [data-near-applied]:empty { display:none; } .rr-ui [data-near-applied] button { min-height:34px; background:var(--brand-tint); border:0; border-radius:6px; padding:6px 10px; font-size:12px; color:var(--brand); } .rr-ui .discovery-section--listings { padding-top:16px; background:var(--paper); } .rr-ui .city-results-toolbar,.rr-ui .locality-results-summary,.rr-ui .search-results-heading { margin:0 0 14px; gap:10px; align-items:center; } .rr-ui .city-results-toolbar h2,.rr-ui .search-results-heading h2 { font-size:15px; letter-spacing:-.012em; } .rr-ui .locality-results-summary p { font-size:14px; font-weight:600; } .rr-ui .city-results-toolbar select { background:transparent; border:0; box-shadow:none; font-size:12px; padding-inline:0; } .rr-ui .grid { gap:26px 24px; } .rr-ui .card { border:0; border-radius:0; box-shadow:none; background:var(--paper); overflow:visible; } .rr-ui .card:hover { transform:none; box-shadow:none; } /* * THE card aspect ratio. There is one, and it is here. * * Nine aspect-ratio declarations existed on this selector across this file and * discovery.css; this file loads last, so the other seven were dead and editing * them did nothing — the trap app.css already documents once at its K2 note, * arrived at again by a different route. The dead ones are now gone. * * 3:2 rather than 4:3: measured at 360px, 4:3 made the card 409px, which is * 1.56 cards per screen on a product whose pitch is that the list is short and * every entry real. K2 specified 3:2 and this had drifted back. */ .rr-ui .card__media { aspect-ratio:3/2; border-radius:var(--r-card); overflow:hidden; background:var(--mist-deep); } .rr-ui .card__media img { object-fit:contain; object-position:center; } /* No cropping, in either direction (owner decision, 26 Sep 2026). A photo of any shape sits whole inside the frame; the frame's own --mist-deep shows on the short sides. A crop hid the edge of a room that the agent chose to photograph, and on a product whose promise is "the photos are of this room", what the visitor sees should be exactly what was shot. */ .rr-ui .cardstrip__slide img { object-fit:contain; } .rr-ui .card__media, .rr-ui .cardstrip__slide { background:var(--mist-deep); } .rr-ui .card__body { padding:11px 0 0; gap:0; } .rr-ui .card .price { display:flex; align-items:baseline; gap:3px; margin:0 0 5px; } .rr-ui .card .price__figure { font:700 23px/1.15 var(--font-display); letter-spacing:-.025em; color:var(--ink); } .rr-ui .card .price__unit { font-size:12px; } .rr-ui .card .price__deposit { margin:0 0 0 auto; flex-basis:auto; font-size:11px; color:var(--slate); } .rr-ui .card__title { margin:0 0 5px; font:600 15px/1.35 var(--font-body); letter-spacing:-.012em; } .rr-ui .card__title a { -webkit-line-clamp:2; } /* generated titles run to "3 BHK Flat or House in Madhukam"; one line cut every one of them */ .rr-ui .card__meta { margin:0; font-size:12px; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rr-ui .card__place { color:var(--ink-soft); } .rr-ui .card__facts { color:var(--slate); margin-top:1px; } .rr-ui .card__place { margin:0 0 6px; gap:4px; font-size:12px; line-height:1.45; color:var(--slate); } .rr-ui .card__place > span:first-of-type { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .rr-ui .card__features { display:flex; flex-wrap:nowrap; gap:7px; margin:0; overflow:hidden; } .rr-ui .card__features li { background:none; padding:0; font-size:12px; white-space:nowrap; color:var(--ink-soft); } .rr-ui .card__features li+li::before { content:'·'; margin-right:7px; padding:0; color:var(--slate-light); } .rr-ui .card__foot { margin-top:9px; padding:0 0 0 8px; border:0; border-left:2px solid var(--verified); } .rr-ui .card__foot:has(.stamp--rechecking),.rr-ui .card__foot:has(.stamp--expired) { border-color:var(--slate-light); } .rr-ui .card__foot .stamp { font:500 10px/1.55 var(--font-mono); text-transform:uppercase; letter-spacing:.025em; margin:0; padding:0; background:none; border:0; color:var(--ink-soft); } .rr-ui .card__foot .stamp__dot { display:none; } .rr-ui .card__save { top:10px; right:10px; width:44px; height:44px; min-height:44px; border:0; background:rgba(255,255,255,.96); box-shadow:var(--shadow-sm); } .rr-ui .card__configuration-label { position:absolute; bottom:10px; left:10px; z-index:3; padding:5px 9px; background:rgba(255,255,255,.96); color:var(--ink); font:600 12px/1.4 var(--font-body); border-radius:4px; pointer-events:none; } .rr-ui .card__photo-count { bottom:10px; right:10px; } .rr-ui .cardstrip__dots { bottom:14px; } .rr-ui .near-filter-panel__head h2 { font-size:22px; letter-spacing:-.024em; } .rr-ui .near-filter-sheet { border-radius:16px 16px 0 0; box-shadow:var(--shadow-sheet); } .rr-ui .near-filter-panel label { font-size:13px; } .rr-ui .near-filter-panel input:not([type=checkbox]),.rr-ui .near-filter-panel select { background:var(--mist); border-color:var(--line); min-height:48px; font-size:16px; } .rr-ui .near-filter-sheet[open] { animation:rr-browse-sheet 160ms var(--ease); } @keyframes rr-browse-sheet { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } @media(min-width:900px) { .rr-ui .city-discovery { padding:28px 0 16px; } .rr-ui .city-discovery__intro h1 { font-size:36px; } .rr-ui .city-discovery__layout { row-gap:18px; } .rr-ui .near-filter-sheet { border-radius:12px; } .rr-ui .card .price__figure { font-size:24px; } } @media(max-width:599px) { .rr-ui .nearby-browse__heading { flex-wrap:wrap; gap:0 12px; } .rr-ui .rr-browse-actions { margin-left:auto; } .rr-ui .city-results-toolbar { gap:6px; } .rr-ui .city-results-toolbar h2 { font-size:14px; } .rr-ui .card__title { font-size:15px; } } @media(prefers-reduced-motion:reduce) { .rr-ui .near-filter-sheet[open] { animation:none; } } @media(max-width:599px) { .rr-ui .city-discovery { padding:14px 0 8px; } .rr-ui .city-discovery__layout { gap:8px; } .rr-ui .city-discovery__intro h1 { font-size:26px; } .rr-ui .city-discovery__intro p { margin-top:4px; font-size:12px; } .rr-ui .city-discovery__areas { min-height:30px; } .rr-ui .city-discovery__areas a { min-height:32px; } .rr-ui .city-discovery + .discovery-section--listings { padding-top:10px; } .rr-ui .city-results-toolbar { margin-bottom:10px; } } .rr-ui .card__chips { top:10px; bottom:auto; z-index:3; } .rr-ui .card:has(.card__chips) .card__media::after { opacity:0; } .rr-ui [data-near-applied] .near-applied__clear { background:transparent; color:var(--slate); text-decoration:underline; } .rr-ui .rr-browse-actions:empty { display:none; } .rr-ui .near-search__more > summary > span[aria-hidden] { display:none; } /* A compact branded search surface; photography remains the main content. */ .rr-ui .city-discovery { background:var(--brand); border:0; color:var(--paper); } .rr-ui .city-discovery__intro h1, .rr-ui .city-discovery__intro h1 span { color:var(--paper); } .rr-ui .city-discovery__intro p { color:var(--brand-tint); } .rr-ui .city-search { background:var(--paper); color:var(--ink); border-color:var(--paper); box-shadow:var(--shadow-sm); } .rr-ui .city-search__go { background:var(--brand-tint); border-radius:6px; width:32px; height:32px; } .rr-ui .city-search__locate { background:var(--brand-tint); border-color:transparent; color:var(--brand); } .rr-ui .city-discovery__areas { gap:12px; } .rr-ui .city-discovery__areas > span { color:var(--brand-tint); } .rr-ui .city-discovery__areas a { color:var(--paper); } .rr-ui .city-area-count { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 4px; border-radius:4px; background:var(--brand-tint); color:var(--brand); } .rr-ui .city-browse-controls .city-budget, .rr-ui .city-browse-controls .rr-type-menu > summary, .rr-ui .city-browse-controls .near-search__more > summary { background:transparent; color:var(--paper); border-color:var(--brand-hi); box-shadow:none; } .rr-ui .near-search .city-budget.has-selection, .rr-ui .rr-type-menu.has-selection > summary, .rr-ui .near-search__more.has-selection > summary, .rr-ui .city-browse-controls .rr-type-menu[open] > summary { background:var(--brand-tint); color:var(--brand); border-color:var(--brand-tint); } .rr-ui .near-search__more > summary .icon { width:16px; height:16px; flex-shrink:0; } .rr-ui .near-search .near-search__more > summary { display:flex; align-items:center; gap:6px; } .rr-ui .city-browse-controls [data-near-applied] .near-applied__clear { color:var(--paper); } .rr-ui .discover.has-locked-location { background:var(--brand-tint); border-bottom-color:var(--line); } .rr-ui .discover.has-locked-location .city-budget.has-selection, .rr-ui .discover.has-locked-location .rr-type-menu.has-selection > summary, .rr-ui .discover.has-locked-location .near-search__more.has-selection > summary { background:var(--brand); border-color:var(--brand); color:var(--paper); } .rr-ui .discover.has-locked-location [data-near-applied] button { background:var(--paper); } .rr-ui .rr-location-token { color:var(--brand); } .rr-ui .discovery-section--listings { background:var(--mist); } .rr-ui .card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; } .rr-ui .card:hover { box-shadow:var(--shadow-lift); } .rr-ui .card__media { border-radius:0; } .rr-ui .card__body { padding:11px 12px 12px; } .rr-ui .card .price__figure { font-size:22px; } .rr-ui .card .price__deposit { font-size:10px; } /* One green line, per §9.2j — the filled --mist box read as a second card footer and cost 16px of the 32px this row occupied. */ .rr-ui .card__foot { background:none; margin-top:8px; padding:0 0 0 8px; border-radius:0; } .rr-ui .card__features { gap:5px; } .rr-ui .card__features li { font-size:11px; } .rr-ui .card__features li+li::before { margin-right:5px; } .rr-ui .card__save[aria-pressed=true] { color:var(--brand); background:var(--brand-tint); } .rr-ui .tabbar { box-shadow:0 -1px 0 var(--line),var(--shadow-sm); } .rr-ui .tabbar__icon { display:grid; place-items:center; width:48px; height:30px; border-radius:8px; } .rr-ui .tabbar__tab[aria-current=page] .tabbar__icon { background:var(--brand-tint); } .rr-ui .tabbar__tab { gap:2px; } .rr-ui .rr-type-menu > summary, .rr-ui .city-budget, .rr-ui .near-search__more > summary, .rr-ui .card__save, .rr-ui .tabbar__icon { transition:background-color 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease); } .rr-ui .rr-type-menu[open] .rr-type-choices { animation:rr-browse-menu 140ms var(--ease); } .rr-ui .near-filter-sheet::backdrop { background:rgba(14,20,27,.48); } .rr-ui .near-filter-panel__head { border-bottom:1px solid var(--line); padding-bottom:14px; } .rr-ui .near-filter-panel__footer { background:var(--mist); } .rr-ui :is(.rr-type-menu > summary,.city-budget,.near-search__more > summary,.city-search,.card__save):focus-visible { outline:3px solid var(--brand-hi); outline-offset:3px; } @keyframes rr-browse-menu { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } @media(max-width:599px) { .rr-ui .city-discovery { padding-top:14px; padding-bottom:8px; } .rr-ui .city-discovery__intro h1 { font-size:25px; } .rr-ui .city-discovery__intro p { display:none; } .rr-ui .city-discovery__layout { gap:8px; } .rr-ui .city-discovery__areas a { min-height:36px; } .rr-ui .near-search.is-location-locked,.rr-ui .city-browse-controls .near-search { gap:6px; } .rr-ui .rr-type-menu > summary,.rr-ui .near-search .city-budget,.rr-ui .near-search__more > summary { min-height:44px; padding:9px 10px; } .rr-ui .grid { gap:18px; } } @media(prefers-reduced-motion:reduce) { .rr-ui .rr-type-menu[open] .rr-type-choices,.rr-ui .near-filter-sheet[open] { animation:none; } .rr-ui .rr-type-menu > summary,.rr-ui .city-budget,.rr-ui .near-search__more > summary,.rr-ui .card__save,.rr-ui .tabbar__icon { transition:none; } } /* Small amenity symbols aid scanning while the labels remain readable. */ .rr-ui .card__features { gap:10px; flex-wrap:wrap; } .rr-ui .card__features li { display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1.45; } .rr-ui .card__features li+li::before { content:none; } .rr-ui .card__features .icon { width:14px; height:14px; flex:0 0 14px; color:var(--slate); } .rr-ui .card__title { margin-bottom:6px; } .rr-ui .card__body { padding:12px; } .rr-ui .card__foot { margin-top:10px; } .rr-detection-confirm { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .rr-detection-confirm .btn { min-height:44px; font-size:13px; } /* A search-origin pin only; exact listing locations remain private. */ .rr-search-pin { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--mist); } .rr-search-pin__label { font-weight:600; font-size:14px; margin:0 0 8px; } .rr-search-pin__frame { position:relative; border-radius:8px; overflow:hidden; } .rr-search-pin__canvas { height:240px; width:100%; background:var(--mist-deep); } .rr-search-pin__marker { position:absolute; width:28px; height:38px; left:50%; top:50%; transform:translate(-50%,-100%); pointer-events:none; filter:drop-shadow(0 2px 2px rgba(14,20,27,.3)); } .rr-search-pin__marker svg { width:100%; height:100%; fill:var(--brand); stroke:var(--paper); stroke-width:1.5; } .rr-search-pin__marker circle { fill:var(--paper); stroke:none; } .rr-search-pin__hint { font-size:12px; color:var(--slate); margin-top:8px; } .rr-search-pin .rr-detection-confirm { flex-wrap:nowrap; } .rr-search-pin .btn { padding-inline:10px; flex:1; } .rr-search-pin .btn:disabled { opacity:.55; cursor:wait; } @media(min-width:600px) { .rr-search-pin__canvas { height:300px; } } /* Location picker has one purpose: find and confirm a point. */ .rr-ui [data-location-picker] .near-search__fallback[hidden] { display:none; } .rr-ui [data-location-picker] .near-search__actions { border:0; padding-bottom:0; } .rr-ui [data-location-picker] [data-near-me] { width:100%; min-height:48px; background:var(--brand-tint); border-radius:8px; justify-content:flex-start; padding:12px; } .city-areas-dialog { width:min(520px,calc(100% - 32px)); max-height:80dvh; padding:20px; border:0; border-radius:12px; box-shadow:var(--shadow-lift); color:var(--ink); } .city-areas-dialog::backdrop { background:rgba(14,20,27,.48); } .city-areas-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .city-areas-dialog h2 { font-size:20px; margin:0; } .city-areas-dialog__head button { flex:0 0 44px; height:44px; border:0; border-radius:8px; background:var(--mist); font-size:24px; } .city-areas-dialog input { width:100%; font-size:16px; } .city-areas-dialog__note { font-size:12px; color:var(--slate); margin:10px 0; } .city-areas-dialog__list { display:grid; gap:4px; } .city-areas-dialog__list a { display:flex; justify-content:space-between; gap:12px; padding:12px; border-radius:8px; min-height:48px; font-size:14px; } .city-areas-dialog__list a:hover { background:var(--brand-tint); } .city-areas-dialog__list small { color:var(--slate); white-space:nowrap; } .city-areas-dialog__list [hidden] { display:none; } /* National home: location first, photography immediately below. */ .rr-ui .home-location { background:var(--brand); color:var(--paper); padding:24px 0 14px; } .home-location__layout { display:grid; gap:14px; } .rr-ui .home-location h1 { margin:0; color:var(--paper); font-size:30px; line-height:1.13; letter-spacing:-.032em; } .rr-ui .home-location h1 span { color:var(--brand-tint); } .home-location__intro > p { margin:8px 0 0; font-size:13px; color:var(--brand-tint); } .home-location__search { display:flex; align-items:center; gap:8px; min-width:0; } .rr-ui .home-location .city-search { flex:1; min-width:0; background:var(--paper); padding:12px; } .rr-ui .home-location .city-search > .icon { flex:0 0 18px; color:var(--brand); } .rr-ui .home-location .city-search > span:not(.city-search__go) { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rr-ui .home-location .city-search__go { display:none; } .rr-ui .home-location .city-search__locate { flex:0 0 48px; color:var(--brand); background:var(--brand-tint); } .home-location__proof { display:flex; align-items:center; gap:7px; margin:0; font-size:11px; color:var(--brand-tint); } .home-location__proof .icon { width:14px; height:14px; } .home-location__cities { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding-top:4px; border-top:1px solid var(--brand-hi); } .home-location__cities > span { color:var(--brand-tint); font-size:12px; } .home-location__cities a { display:inline-flex; align-items:center; gap:7px; color:var(--paper); font-size:13px; font-weight:600; min-height:40px; } .rr-national .discovery-section--listings { padding-top:18px; } .rr-ui .home-results-head { align-items:center; gap:10px; margin-bottom:14px; } .rr-ui .home-results-head h2 { font-size:17px; margin:0; } .rr-ui .home-results-head p { font-size:11px; color:var(--slate); margin:4px 0 0; } .home-refine { display:flex; gap:4px; align-items:center; min-height:44px; font-size:12px; font-weight:600; white-space:nowrap; } .home-refine .icon { width:16px; height:16px; } @media(min-width:900px) { .rr-ui .home-location { padding:32px 0 20px; } .home-location__layout { grid-template-columns:1fr 1fr; column-gap:40px; align-items:center; } .home-location__intro { grid-column:1; grid-row:1 / 3; } .rr-ui .home-location h1 { font-size:42px; } .home-location__search { grid-column:2; grid-row:1; } .home-location__proof { grid-column:2; grid-row:2; } .home-location__cities { grid-column:1 / -1; } .rr-ui .home-location .city-search > span:not(.city-search__go) { font-size:15px; } } @media(max-width:599px) { .rr-national .discovery-section:not(.discovery-section--listings) { padding-top:30px; padding-bottom:30px; } .rr-national .remote-view { padding:22px 18px; gap:20px; } .rr-national .remote-view h2 { font-size:25px; } .rr-national .remote-view p { font-size:14px; } .rr-national .trust-grid { gap:18px; } .rr-national .owner-invite { padding:20px; } } @media(max-width:599px) { .rr-ui .home-location { padding:18px 0 8px; } .home-location__layout { gap:10px; } .rr-ui .home-location h1 { font-size:28px; } .home-location__intro > p { display:none; } .home-location__cities a { min-height:36px; } .rr-ui .home-results-head { display:block; } .rr-national .discovery-section--listings { padding-top:16px; } } /* Tenant-focused drawer, with owners and policies clearly separated. */ .rr-ui .menu__panel { width:min(90vw,360px); transform:translateX(100%); transition:transform 180ms var(--ease); } .rr-ui .menu[data-open=true] .menu__panel { transform:translateX(0); } .rr-ui .menu__head { padding:12px 16px; } .rr-ui .menu__body { padding:12px 16px max(16px,env(safe-area-inset-bottom)); } .menu-location { display:flex; align-items:center; gap:10px; padding:12px; background:var(--brand-tint); border-radius:10px; color:var(--brand); margin-bottom:12px; min-height:64px; } .menu-location > .icon { flex:0 0 20px; width:20px; height:20px; } .menu-location > span:not(.menu-location__change) { min-width:0; flex:1; } .menu-location small { display:block; font-size:11px; color:var(--slate); } .menu-location strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .menu-location__change { font-size:12px; font-weight:600; } .menu__group + .menu__group { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; } .rr-ui .menu__i { gap:12px; min-height:48px; padding:12px; font-size:14px; } .rr-ui .menu__i .icon { width:19px; height:19px; flex:0 0 19px; opacity:1; color:var(--slate); } .rr-ui .menu__i[aria-current=page] { color:var(--brand); background:var(--brand-tint); font-weight:600; } .rr-ui .menu__i[aria-current=page] .icon { color:var(--brand); } .menu-owner { border-top:1px solid var(--line); margin-top:10px; padding-top:12px; } .menu-owner p { font-size:11px; color:var(--slate); margin:0 12px 6px; } .rr-ui .menu-owner .menu__i--cta { background:var(--brand); color:var(--paper); } .rr-ui .menu-owner .menu__i--cta .icon { color:var(--paper); } .menu-legal { display:flex; gap:20px; padding:10px 12px 0; } .menu-legal a { font-size:12px; min-height:36px; display:flex; align-items:center; color:var(--slate); } @media(prefers-reduced-motion:reduce) { .rr-ui .menu,.rr-ui .menu__panel { transition:none; } } /* ------------------------------------------ the results heading, made real -- * The h1 on both results templates was `screen-reader-text`, so the first * readable line on a locality page was a card title 545px down and the page * opened on four stacked control surfaces. Sized as a page title rather than a * hero: §4.2's h1 scale (30/38/48) is for a landing page and would shout here. * Optical tracking per §4.2 — large display type needs negative tracking to * look even. * ------------------------------------------------------------------------- */ .rr-ui .locality-results-summary__title { grid-column: 1 / -1; margin: 0; font: 800 21px/1.22 var(--font-display); letter-spacing: -.022em; color: var(--ink); } /* The count stops being the heading and becomes its subline. */ .rr-ui .locality-results-summary > p { margin: 2px 0 0; font: 500 13px/1.45 var(--font-body); color: var(--slate); } @media (min-width: 600px) { .rr-ui .locality-results-summary__title { font-size: 26px; letter-spacing: -.026em; } .rr-ui .locality-results-summary > p { font-size: 14px; } } /* One radius on the controls in the band above it. Measured on the live locality page: 0px, 6px and 10px were all in use within ~100px of each other, which is what makes a tidy row look untidy. */ .rr-ui .near-applied a, .rr-ui .near-applied button, .rr-ui .nearby-browse__chips a { border-radius: 10px; } /* ===================================== compact results header (direction CC) * Measured on the live locality page at 360x640: 284px of chrome above the * first card, on a page with two results. This band was 153px of it. * * The savings, in order of size: the tint goes (it made a control strip read * as a hero), the padding halves, and "Explore nearby" stops being a dropdown * — its chips are the inventory when an area holds two listings. * ------------------------------------------------------------------------- */ .rr-ui .discover.has-locked-location { background: var(--paper); padding: 6px 0 4px; border-bottom: 1px solid var(--line); } .rr-ui .discover.has-locked-location .nearby-browse { margin: 0; } .rr-ui .discover.has-locked-location .nearby-browse__heading { min-height: 0; padding: 0; margin: 0 0 6px; } /* The nearby rail: a scrolling row, drawn as pills so it is plainly a different object from the square filter controls above it (§9.2g). */ .rr-ui .rr-nearby-menu { position: relative; display: block; margin: 2px 0 0; } .rr-ui .nearby-browse__chips { display: flex; gap: 6px; padding-block: 1px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rr-ui .nearby-browse__chips::-webkit-scrollbar { display: none; } .rr-ui .nearby-browse__chips a { flex-shrink: 0; display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 600 12px/1.2 var(--font-body); color: var(--ink); text-decoration: none; white-space: nowrap; } .rr-ui .nearby-browse__chips a span { font: 400 11px/1.2 var(--font-body); color: var(--slate); } /* Says it scrolls. A rail cut off at a hard edge looks like a rendering fault — §9.2n, where the same fade was already the answer elsewhere. */ .rr-ui .rr-nearby-menu::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), var(--paper) 78%); } /* The rest of the compaction. Measured before: appbar 65 + band 129 + summary 72 = 296px above the first card. Each rule below names what it buys. */ /* The control row was 44px pills in a 52px row inside a 12px-padded band. */ .rr-ui .discover.has-locked-location .near-search__row, .rr-ui .discover.has-locked-location .city-filters { gap: 7px; margin: 0; } .rr-ui .discover.has-locked-location .city-budget, .rr-ui .discover.has-locked-location .rr-type-menu > summary, .rr-ui .discover.has-locked-location .near-search__more > summary { min-height: 38px; padding: 8px 11px; font-size: 12.5px; } .rr-ui .discover.has-locked-location .rr-location-trail { min-height: 0; padding-block: 0; font-size: 12.5px; } /* The heading and its count: 72px of a two-line block for eight words. */ .rr-ui .locality-results-summary { margin-bottom: 9px; gap: 4px 10px; } .rr-ui .locality-results-summary__title { font-size: 19px; } .rr-ui .locality-results-summary > p { margin: 0; font-size: 12.5px; } .rr-ui .discovery-section--listings { padding-top: 11px; } /* ============================================ results bar (direction CC1) * On results pages the app bar is the page: up · h1 · count · location · * search · menu, in 52px. The logo row is gone here (see header.php). * ------------------------------------------------------------------------- */ .rr-results .appbar__row { min-height: 52px; gap: 6px; padding-inline: 10px 8px; } .rr-results .appbar .nav { display: none; } .rr-results .upnav { flex-shrink: 0; width: 32px; min-width: 32px; } .rr-results .appbar__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; margin: 0; font: 800 17px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; } /* The qualifier reads small; the place carries the weight. Both are one h1. */ .rr-results .appbar__title-lead { font: 500 11.5px/1.2 var(--font-body); color: var(--slate); flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .rr-results .appbar__title-place { overflow: hidden; text-overflow: ellipsis; } .rr-results .appbar__count { flex-shrink: 0; font: 400 12px/1.2 var(--font-body); color: var(--slate); } .rr-results .appbar__ico, .rr-results .placechip--icon { flex-shrink: 0; width: 36px; height: 36px; min-height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink-soft); cursor: pointer; } .rr-results .placechip--icon .placechip__t, .rr-results .placechip--icon .icon:last-child { display: none; } .rr-results .placechip--icon .icon { width: 17px; height: 17px; margin: 0; } .rr-results .appbar__ico .icon { width: 17px; height: 17px; color: var(--brand); } .rr-results .burger { flex-shrink: 0; } /* Band under the bar: on browse just the pills; on area pages the nearby rail (CC2) then the pills. */ .rr-results .discover.has-locked-location { padding: 6px 0 5px; } .rr-results .discover.has-locked-location .nearby-browse { margin: 0 0 6px; } .rr-results .discover.has-locked-location .nearby-browse__heading { display: none; } /* Map view keeps a slim row; the count that shared it lives in the bar now. */ .rr-ui .locality-results-summary--tools { min-height: 0; margin: 0 0 8px; } .rr-ui .locality-results-summary--tools [data-map-open] { min-height: 32px; padding: 5px 10px; font-size: 12px; } .rr-ui .locality-results-summary--tools:empty { display: none; } /* ================================================ AA6 — the location strip * Rendered by JS after the visitor taps the location icon. It says which area * the point matched, offers the results, and offers a way to disagree. Nothing * here is server-rendered: the page is cached, so a visitor-specific answer * would be baked into everyone's copy (§9.2e). * ------------------------------------------------------------------------- */ .locate-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; } .locate-strip[hidden] { display: none; } .locate-strip__card { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-tint); } .locate-strip__card.is-outside { border-color: var(--line); background: var(--mist); } .locate-strip__ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--brand); color: var(--paper); } .locate-strip__ico .icon { width: 16px; height: 16px; } .is-outside .locate-strip__ico { background: var(--slate); } .locate-strip__text { flex: 1 1 auto; min-width: 0; } .locate-strip__text strong { display: block; font: 700 13px/1.3 var(--font-body); color: var(--ink); } .locate-strip__text span { display: block; font: 400 11px/1.4 var(--font-body); color: var(--slate); } .locate-strip__go, .locate-strip__no { flex-shrink: 0; min-height: 32px; padding: 6px 10px; border-radius: 8px; font: 600 12px/1 var(--font-body); cursor: pointer; text-decoration: none; } .locate-strip__go { border: 0; background: var(--brand); color: var(--paper); } .locate-strip__no { border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); } .locate-strip__near { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .locate-strip__near a { font: 600 11.5px/1 var(--font-body); color: var(--brand); text-decoration: none; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); } /* ============================================= rows at 118px (direction X2) * Every page under 900px - the home page, similar listings, saved, visits. * §8.2: one card, built once, used everywhere. The 3-up desktop grid keeps * the full card. * The markup is untouched: the same .card, .card__media, .cardstrip. This is * the swipe strip laid out beside the body instead of above it. * ------------------------------------------------------------------------- */ @media (max-width: 899px) { .rr-ui .grid { gap: 8px; } .rr-ui .card { display: flex; flex-direction: row; align-items: stretch; border-radius: 11px; } /* an earlier rule sets column */ .rr-ui .card__media { flex: 0 0 146px; width: 146px; aspect-ratio: auto; height: auto; min-height: 110px; border-radius: 0; } .rr-ui .card__media--strip { overflow: hidden; } .rr-ui .cardstrip { height: 100%; } .rr-ui .cardstrip__slide { height: 100%; } .rr-ui .card__body { flex: 1 1 auto; min-width: 0; padding: 8px 10px 8px 10px; display: flex; flex-direction: column; gap: 1px; } .rr-ui .card .price { margin: 0 0 2px; } .rr-ui .card .price__figure { font-size: 17px; } .rr-ui .card .price__deposit { font-size: 10px; } .rr-ui .card__title { margin: 0; font-size: 13px; line-height: 1.3; } .rr-ui .card__title a { -webkit-line-clamp: 2; } .rr-ui .card__meta { font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one row each: place, then facts */ .rr-ui .card__facts { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* facts may take two rows; the place stays one */ .rr-ui .card__foot { margin-top: auto; padding-top: 4px; } .rr-ui .card__foot .stamp { font-size: 9px; } .rr-ui .card__save { width: 32px; height: 32px; min-height: 32px; top: 6px; right: 6px; } .rr-ui .card__save .icon { width: 15px; height: 15px; } .rr-ui .card__configuration-label { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 10px; } .rr-ui .card__photo-count { display: none; } .rr-ui .card__shot { display: none; } /* Dots become segment bars along the top of the photo: they say how many without a number, never sit under the price, and survive a pale photo. */ .rr-ui .cardstrip__dots { top: 6px; bottom: auto; left: 6px; right: 6px; display: flex; gap: 2px; justify-content: stretch; } .rr-ui .cardstrip__dot { flex: 1 1 0; width: auto; height: 2px; border-radius: 1px; background: rgba(255,255,255,.45); } .rr-ui .cardstrip__dot.is-on { width: auto; background: #fff; } } /* ================================================ AA4 — search takes the screen * On a phone the picker is the whole screen, not a 460px box floating over a * dimmed page. 390px cannot hold search, a location and a trail side by side; * a full screen holds them all with room. GPS is the first row (Y4). * ------------------------------------------------------------------------- */ @media (max-width: 599px) { .rr-location-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0; border: 0; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 16px 16px; box-shadow: none; } .rr-location-dialog::backdrop { background: transparent; } .rr-location-dialog__head { margin-bottom: 10px; } .rr-location-dialog__head h2 { font-size: 17px; } .rr-location-dialog [data-near-me] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-tint); color: var(--brand); font: 700 14px/1.2 var(--font-body); text-align: left; } } /* At phone width the qualifier is clipped, not removed: the h1 still reads "Flats & Houses in HSR Layout" to search engines and screen readers, while the bar shows the place at full size. Measured: with both visible the place had 81px and needed 92. */ @media (max-width: 599px) { .rr-results .appbar__title-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ===================================== CC1, completed: the pill row goes * With JS on, the results page has one bar and (on area pages) one rail. * Type lives in the sheet, Filters is the bar's icon, Map is the rail's first * chip. Without JS every original control stays where it was. * ------------------------------------------------------------------------- */ .js .rr-results .discover .rr-type-menu, .js .rr-results .discover .city-budget, .js .rr-results .discover .near-search__more > summary, .js .rr-results .discover [data-near-applied], .js .rr-results .discover .near-search__status, /* The form's own Previous/Next belongs to its stand-alone "near" mode. On a results page the grid paginates itself (the_posts_pagination), and once the breadcrumb row went this nav reflowed INTO the pill row - "Budget · Page 1 of 2 · Next · Homes", pills wrapped to three lines. Seen live. */ .js .rr-results .discover .near-search__pages { display: none; } /* And with JS off the same nav must not sit between the pills either. */ .rr-results .discover .near-search__pages { flex-basis: 100%; order: 99; } .js .rr-results .discover.has-locked-location { padding: 0; border-bottom: 0; } .js .rr-results .discover.has-locked-location .nearby-browse { margin: 0; padding: 7px 0 6px; border-bottom: 1px solid var(--line); } .js .rr-results .discover.has-locked-location .rr-nearby-menu { margin: 0; } /* Map view's own row is gone: the rail's Map chip opens the same map. */ .js .rr-results .locality-results-summary--tools [data-map-open] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .js .rr-results .locality-results-summary--tools { margin: 0; min-height: 0; } .js .rr-results .discovery-section--listings { padding-top: 8px; } /* Inside the sheet the native type