/* ============================================================================ RoyRentals — module stylesheet /rentals/assets/css/styles.css Plain CSS (no build step). Dark-first with a full light theme keyed off html[data-bs-theme], which Header1 sets from localStorage("preferred_theme"). Contents 01 Tokens & theme 02 Reset & base 03 Shell: topbar, panels, footer, backdrop 04 Primitives: buttons, chips, badges, fields, cards, tables, tabs 05 Seeker: hero, search, facets, listing cards, match score, detail 06 Tenant: rent card, receipts, ledger, messaging 07 Manager: KPIs, bars, switcher, forms, amenities picker 08 Overlays: modal, sheet, toast, skeletons 09 Utilities 10 Print (receipts / statements) ========================================================================== */ /* ── 01 Tokens & theme ─────────────────────────────────────────────────── */ :root { --rr-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --rr-display: 'Oswald', 'Montserrat', system-ui, sans-serif; --rr-bg: #0a1120; --rr-bg-soft: #0e1729; --rr-surface: #131d33; --rr-surface-2: #1a2540; --rr-surface-3: #223054; --rr-line: rgba(255, 255, 255, .09); --rr-line-strong: rgba(255, 255, 255, .18); --rr-text: #e9eefb; --rr-text-soft: #c3cee4; --rr-muted: #93a2bf; --rr-brand: #0d9488; --rr-brand-2: #3b82f6; --rr-brand-ink: #ffffff; --rr-grad: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%); --rr-grad-soft: linear-gradient(135deg, rgba(13, 148, 136, .18), rgba(59, 130, 246, .18)); --rr-good: #22c55e; --rr-warn: #f59e0b; --rr-bad: #ef4444; --rr-info: #38bdf8; --rr-gold: #fbbf24; --rr-r-sm: 8px; --rr-r: 12px; --rr-r-lg: 18px; --rr-r-xl: 26px; --rr-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85); --rr-shadow-lg: 0 32px 70px -30px rgba(0, 0, 0, .9); --rr-ring: 0 0 0 3px rgba(13, 148, 136, .35); --rr-top-h: 66px; --rr-maxw: 1280px; /* Mobile-first: every control is at least a comfortable thumb target. The compact desktop sizes are re-applied in the min-width:620px block. */ --rr-tap: 46px; --rr-tap-sm: 42px; --rr-safe-b: env(safe-area-inset-bottom, 0px); --rr-safe-t: env(safe-area-inset-top, 0px); } html[data-bs-theme="light"] { --rr-bg: #f4f7fc; --rr-bg-soft: #eaf0f9; --rr-surface: #ffffff; --rr-surface-2: #f5f8fd; --rr-surface-3: #e9eff8; --rr-line: rgba(15, 23, 42, .10); --rr-line-strong: rgba(15, 23, 42, .22); --rr-text: #0f172a; --rr-text-soft: #27354f; --rr-muted: #5d6c88; --rr-shadow: 0 16px 34px -26px rgba(15, 23, 42, .5); --rr-shadow-lg: 0 30px 60px -34px rgba(15, 23, 42, .45); } /* ── 02 Reset & base ───────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { min-height: 100%; } /* Horizontal clipping has to live on the root element. Putting `overflow-x: hidden` on turns the body into a scroll container, and that silently breaks every `position: sticky` descendant — the app bar stops pinning to the top of the screen when the results are scrolled. `clip` on the body is only a backstop: unlike `hidden` it does not create a scroll container. */ html { overflow-x: hidden; } .rr-body { margin: 0; padding: 0; /* The platform adds utility classes to (`d-flex flex-column …`), but those definitions can be missing from the loaded CSS build — leaving body a ROW flex container, which makes every child shrink-to-fit (the console then measured 1280px wide inside a 900px viewport). Claim the layout here. */ display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; /* The platform's abstract CSS pins the document with html, body { height: 100% !important } and .h-100 { height: 100% !important } which caps the body at one viewport. Sticky children may only travel inside their containing block, so with a viewport-tall body the app bar unpinned itself after the first screen. Both need !important to beat those rules. */ height: auto !important; min-height: 100dvh; background: var(--rr-bg); color: var(--rr-text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Direct children of the shell must never be flex-sized by their content. */ .rr-top, .rr-main, .rr-foot { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; } body.rr-lock { overflow: hidden; } /* ── Touch behaviour (mobile-first) ───────────────────────────────────────── • no 300ms click delay and no grey flash on tap • no iOS text inflation when a phone is rotated • horizontal panes stop at their edges instead of scrolling the page */ button, a, label, select, .rr-chip, .rr-tab, .rr-icon-btn, [data-st] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* The platform disables text selection on the whole document, but a tenant must be able to copy a paybill number, a receipt number or a verification code. Chrome (buttons, tab bars, chips) stays unselectable. */ .rr-body { user-select: text; -webkit-user-select: text; } .rr-btn, .rr-tab, .rr-switch button, .rr-chip, .rr-badge, .rr-icon-btn, .rr-seg button, .rr-modal-head, .rr-kicker, .rr-label, .rr-field>span, .rr-spec { user-select: none; -webkit-user-select: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } .rr-tabs, .rr-gallery-thumbs, .rr-switch, .rr-table-wrap, .rr-scroll-y, .rr-modal-body, .rr-amen-picker { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* Anchor jumps must clear the sticky header. */ html { scroll-padding-top: calc(var(--rr-top-h) + 12px); } h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.18; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: clamp(1.5rem, 6.4vw, 2.9rem); } h2 { font-size: clamp(1.2rem, 4.4vw, 1.8rem); } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } p { margin: 0 0 .8em; } a { color: var(--rr-brand-2); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(13, 148, 136, .4); } .rr-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 90% -8%, rgba(59, 130, 246, .16), transparent 60%), radial-gradient(880px 520px at 2% 4%, rgba(13, 148, 136, .16), transparent 62%); } .rr-skip { position: absolute; left: -9999px; top: 0; background: var(--rr-surface); padding: 8px 14px; z-index: 100; } .rr-skip:focus { left: 8px; } /* ── 03 Shell ──────────────────────────────────────────────────────────── */ .rr-top { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--rr-bg) 82%, transparent); border-bottom: 1px solid var(--rr-line); } .rr-top-in { max-width: var(--rr-maxw); margin: 0 auto; min-height: var(--rr-top-h); padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .rr-brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none !important; min-width: 0; flex: 0 1 auto; } .rr-brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: var(--rr-grad); color: #fff; display: grid; place-items: center; font-family: var(--rr-display); font-size: 1.05rem; letter-spacing: .04em; box-shadow: 0 10px 24px -12px rgba(13, 148, 136, .9); } .rr-brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; } .rr-brand-text b { font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; } .rr-brand-text i { font-style: normal; font-size: .64rem; color: var(--rr-muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .rr-switch { display: flex; gap: 4px; background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: 999px; padding: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; scroll-snap-type: x proximity; } .rr-switch::-webkit-scrollbar { display: none; } .rr-switch>button { scroll-snap-align: center; min-height: 40px; } .rr-switch button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; color: var(--rr-muted); padding: 8px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; transition: background .16s, color .16s, transform .16s; } .rr-switch button:hover { color: var(--rr-text); } .rr-switch button.is-on { background: var(--rr-grad); color: #fff; box-shadow: 0 10px 22px -14px rgba(59, 130, 246, .95); } .rr-switch-icon { font-size: .95rem; } .rr-switch em { font-style: normal; } .rr-top-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .rr-icon-btn { position: relative; width: var(--rr-tap); height: var(--rr-tap); border-radius: 12px; border: 1px solid var(--rr-line); background: var(--rr-surface); cursor: pointer; display: grid; place-items: center; font-size: 1.05rem; color: var(--rr-text-soft); transition: transform .14s, border-color .14s; } .rr-icon-btn:hover { transform: translateY(-1px); border-color: var(--rr-line-strong); } .rr-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--rr-bad); color: #fff; font-size: .62rem; font-style: normal; font-weight: 700; display: grid; place-items: center; } .rr-count:empty, .rr-count[data-zero="1"] { display: none; } .rr-userchip { display: inline-flex; align-items: center; } .rr-signin { border: 0; cursor: pointer; border-radius: 999px; background: var(--rr-grad); color: #fff; min-height: var(--rr-tap); padding: 10px 18px; font-weight: 700; font-size: .84rem; } .rr-uchip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rr-line); background: var(--rr-surface); border-radius: 999px; min-height: var(--rr-tap-sm); padding: 4px 14px 4px 4px; cursor: pointer; } .rr-uchip span { font-size: .8rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Place banner (the /space bridge) ─────────────────────────────────────── E-Tours hands the visitor here with a country + county; this says which place they are looking at, what it costs, and how to get back to the explorer. The tint shifts from teal (we are there) to amber (the county was quiet and we widened) to blue (nothing here at all), so the state reads at a glance. ─────────────────────────────────────────────────────────────────────────── */ .rr-place { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); background-color: var(--rr-surface); background-image: radial-gradient(130% 170% at 0% 0%, rgba(13, 148, 136, .16), transparent 62%); } .rr-place.is-quiet { background-image: radial-gradient(130% 170% at 0% 0%, rgba(245, 158, 11, .17), transparent 62%); } .rr-place.is-dead { background-image: radial-gradient(130% 170% at 0% 0%, rgba(59, 130, 246, .15), transparent 62%); } .rr-place-mark { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; background-color: var(--rr-surface-2); background-image: var(--rr-grad-soft); border: 1px solid var(--rr-line); } .rr-place b { display: block; font-size: .95rem; line-height: 1.3; } .rr-place .rr-meta { margin-top: 7px; } .rr-place-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* The back-link is a real anchor, so it has to lose the underline Bootstrap adds. */ .rr-place-actions a.rr-btn { text-decoration: none !important; } @media (min-width: 620px) { .rr-place { padding: 14px 16px; } } .rr-main { position: relative; z-index: 1; max-width: var(--rr-maxw); margin: 0 auto; padding: 12px 12px 56px; } /* Dial the banner tint back on a white surface. */ html[data-bs-theme="light"] .rr-place { background-image: radial-gradient(130% 170% at 0% 0%, rgba(13, 148, 136, .11), transparent 62%); } html[data-bs-theme="light"] .rr-place.is-quiet { background-image: radial-gradient(130% 170% at 0% 0%, rgba(245, 158, 11, .13), transparent 62%); } html[data-bs-theme="light"] .rr-place.is-dead { background-image: radial-gradient(130% 170% at 0% 0%, rgba(59, 130, 246, .11), transparent 62%); } .rr-panel { max-width: 100%; min-width: 0; } .rr-panel[hidden] { display: none !important; } /* A horizontal scroll-snap strip of proof points. It stays a scroller at every width rather than wrapping — on a wide screen all the pills simply fit, so the row reads as a plain stat line; on a phone it swipes one pill at a time. The extra inline-end padding is the end gutter: it keeps the final pill clear of the masked fade once the strip is scrolled fully to the right. */ .rr-trustbar { display: flex; gap: 8px; flex-wrap: nowrap; margin: 2px -12px 12px; padding: 2px 26px 6px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; /* Fade the right edge so it is obvious the row scrolls on a phone. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); } .rr-trustbar::-webkit-scrollbar { display: none; } .rr-trustbar>* { flex: 0 0 auto; scroll-snap-align: start; } .rr-trust-item { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--rr-line); background: var(--rr-surface-2); border-radius: var(--rr-r); min-height: var(--rr-tap-sm); min-width: 152px; padding: 8px 14px 8px 10px; font-size: .78rem; color: var(--rr-muted); white-space: nowrap; } /* The icon tile, the figure, then the label. The minimum width above is deliberate: about two boxes land on a phone screen, which is what makes the row read as something you can swipe rather than a short centred list. */ .rr-trust-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; background: var(--rr-grad-soft); border: 1px solid var(--rr-line); } .rr-trust-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rr-trust-item b { color: var(--rr-text); font-size: .92rem; line-height: 1.25; } .rr-trust-body>span { font-size: .72rem; line-height: 1.3; } .rr-trust-item .rr-btn { flex: 0 0 auto; margin-left: 2px; } /* The marketing stats bar and the public footer belong to discovery only — once the visitor is looking at their own tenancy or their portfolio they are chrome that pushes real content off a phone screen. */ body[data-view="tenant"] .rr-trustbar, body[data-view="manager"] .rr-trustbar { display: none; } body[data-view="tenant"] .rr-foot, body[data-view="manager"] .rr-foot { padding-top: 18px; margin-top: 12px; } body[data-view="tenant"] .rr-foot-col:nth-child(2), body[data-view="manager"] .rr-foot-col:nth-child(2) { display: none; } .rr-foot { position: relative; z-index: 1; border-top: 1px solid var(--rr-line); margin-top: 24px; padding: 22px 12px calc(36px + var(--rr-safe-b)); display: grid; gap: 18px; grid-template-columns: 1fr; max-width: var(--rr-maxw); margin-inline: auto; color: var(--rr-muted); font-size: .84rem; } .rr-foot-col { display: flex; flex-direction: column; gap: 8px; } .rr-foot-col a { min-height: 34px; display: inline-flex; align-items: center; } /* A footer entry that opens an in-app dialog rather than navigating — styled to sit flush with the links beside it, but built as a button so it is focusable and announced correctly. */ .rr-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--rr-brand-2); cursor: pointer; text-align: left; min-height: 34px; display: inline-flex; align-items: center; } .rr-linkbtn:hover { color: var(--rr-text); } .rr-foot-col b { color: var(--rr-text); } /* ── 04 Primitives ─────────────────────────────────────────────────────── */ .rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--rr-tap); padding: 10px 16px; border-radius: var(--rr-r); border: 1px solid var(--rr-line-strong); background: var(--rr-surface-2); color: var(--rr-text); font-weight: 600; font-size: .86rem; cursor: pointer; transition: transform .14s, box-shadow .14s, background .14s, opacity .14s; text-decoration: none !important; white-space: nowrap; } .rr-btn:hover { transform: translateY(-1px); } .rr-btn:active { transform: translateY(0); } .rr-btn:disabled, .rr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .rr-btn-primary { background: var(--rr-grad); border-color: transparent; color: #fff; box-shadow: 0 14px 30px -18px rgba(59, 130, 246, .95); } .rr-btn-ok { background: color-mix(in srgb, var(--rr-good) 22%, var(--rr-surface-2)); border-color: color-mix(in srgb, var(--rr-good) 45%, transparent); color: var(--rr-text); } .rr-btn-warn { background: color-mix(in srgb, var(--rr-warn) 20%, var(--rr-surface-2)); border-color: color-mix(in srgb, var(--rr-warn) 45%, transparent); } .rr-btn-danger { background: color-mix(in srgb, var(--rr-bad) 20%, var(--rr-surface-2)); border-color: color-mix(in srgb, var(--rr-bad) 45%, transparent); } .rr-btn-ghost { background: transparent; border-color: var(--rr-line); } .rr-btn-soft { background: var(--rr-grad-soft); border-color: var(--rr-line); } .rr-btn-block { width: 100%; } .rr-btn-sm { min-height: var(--rr-tap-sm); padding: 8px 14px; font-size: .8rem; border-radius: var(--rr-r-sm); } .rr-btn-lg { min-height: 52px; padding: 14px 22px; font-size: .95rem; } .rr-btn-icon { min-height: var(--rr-tap-sm); width: var(--rr-tap-sm); padding: 0; border-radius: var(--rr-r-sm); } .rr-btn.is-loading { pointer-events: none; opacity: .75; } .rr-btn.is-loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: rr-spin .7s linear infinite; } @keyframes rr-spin { to { transform: rotate(360deg); } } .rr-chips { display: flex; flex-wrap: wrap; gap: 7px; } .rr-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rr-line); background: var(--rr-surface); border-radius: 999px; min-height: var(--rr-tap-sm); padding: 8px 14px; font-size: .8rem; color: var(--rr-text-soft); cursor: pointer; } .rr-chip b { font-weight: 700; color: var(--rr-text); } .rr-chip.is-on { background: var(--rr-grad); border-color: transparent; color: #fff; } .rr-chip.is-static { cursor: default; } .rr-chip-close { opacity: .7; font-size: .9rem; } .rr-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--rr-surface-3); color: var(--rr-text-soft); border: 1px solid var(--rr-line); white-space: nowrap; } .rr-badge-ok { background: color-mix(in srgb, var(--rr-good) 18%, transparent); color: #7ff0ab; border-color: color-mix(in srgb, var(--rr-good) 40%, transparent); } .rr-badge-warn { background: color-mix(in srgb, var(--rr-warn) 18%, transparent); color: #ffd28a; border-color: color-mix(in srgb, var(--rr-warn) 40%, transparent); } .rr-badge-bad { background: color-mix(in srgb, var(--rr-bad) 18%, transparent); color: #ffb1b1; border-color: color-mix(in srgb, var(--rr-bad) 40%, transparent); } .rr-badge-info { background: color-mix(in srgb, var(--rr-info) 18%, transparent); color: #a9e6ff; border-color: color-mix(in srgb, var(--rr-info) 40%, transparent); } .rr-badge-brand { background: var(--rr-grad); color: #fff; border-color: transparent; } .rr-badge-gold { background: color-mix(in srgb, var(--rr-gold) 20%, transparent); color: #ffe08a; border-color: color-mix(in srgb, var(--rr-gold) 45%, transparent); } html[data-bs-theme="light"] .rr-badge-ok { color: #146c3a; } html[data-bs-theme="light"] .rr-badge-warn { color: #8a5300; } html[data-bs-theme="light"] .rr-badge-bad { color: #9b1c1c; } html[data-bs-theme="light"] .rr-badge-info { color: #075985; } html[data-bs-theme="light"] .rr-badge-gold { color: #854d0e; } .rr-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rr-field>span, .rr-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rr-muted); } .rr-field-grow { flex: 1 1 220px; } .rr-input, .rr-select, .rr-textarea, .rr-field>input, .rr-field>select, .rr-field>textarea, .rr-search input, .rr-search select { width: 100%; min-height: var(--rr-tap); padding: 12px 14px; background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: var(--rr-r); color: var(--rr-text); /* 16px is the threshold below which iOS Safari zooms the page on focus. */ font-size: 16px; line-height: 1.3; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .14s, box-shadow .14s; } .rr-textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .rr-input:focus, .rr-select:focus, .rr-textarea:focus { border-color: var(--rr-brand); box-shadow: var(--rr-ring); } .rr-input::placeholder, .rr-textarea::placeholder { color: color-mix(in srgb, var(--rr-muted) 80%, transparent); } .rr-select { background-image: linear-gradient(45deg, transparent 50%, var(--rr-muted) 50%), linear-gradient(135deg, var(--rr-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; } /* Native controls must never be wider than their track. */ input[type="search"] { -webkit-appearance: none; appearance: none; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--rr-brand); } .rr-hint { font-size: .74rem; color: var(--rr-muted); } .rr-err { font-size: .76rem; color: #ff9d9d; } .rr-input.is-bad, .rr-select.is-bad, .rr-textarea.is-bad { border-color: var(--rr-bad); } .rr-check { display: flex; align-items: center; gap: 11px; font-size: .85rem; color: var(--rr-text-soft); cursor: pointer; min-height: var(--rr-tap-sm); padding: 2px 0; } .rr-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--rr-brand); flex: 0 0 20px; } .rr-check em { font-style: normal; color: var(--rr-muted); font-size: .72rem; display: block; } .rr-check[hidden] { display: none !important; } .rr-card { background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); box-shadow: var(--rr-shadow); overflow: hidden; min-width: 0; } .rr-card-pad { padding: 14px; } .rr-sect { background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); margin-bottom: 14px; overflow: hidden; min-width: 0; } .rr-sect-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--rr-line); background: linear-gradient(180deg, var(--rr-surface-2), transparent); } .rr-sect-head h3, .rr-sect-head h2 { margin: 0; font-size: 1rem; } .rr-sect-head .rr-grow { flex: 1 1 auto; } .rr-sect-body { padding: 12px 14px; } .rr-sect-body.tight { padding: 0; } /* The console header is the first thing an agency sees, so it reads as a card rather than a bare title: a tinted panel, a brand hairline along the top, an icon tile in the same language as the trust boxes, and the org's figures as chips so they scan as data instead of as a sentence. */ .rr-panel-head { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 4px 0 14px; padding: 16px; border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); background-color: var(--rr-surface); background-image: radial-gradient(120% 150% at 0% 0%, rgba(13, 148, 136, .18), transparent 58%), radial-gradient(110% 140% at 100% 100%, rgba(59, 130, 246, .14), transparent 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--rr-shadow); overflow: hidden; } .rr-panel-head::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--rr-grad); opacity: .85; } .rr-panel-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; /* Grow into the row so the action buttons keep their natural width on one line and the chips (not the buttons) are what wraps. */ flex: 1 1 auto; } .rr-panel-copy { min-width: 0; } /* The same tinted tile used by the home-page trust boxes. */ .rr-panel-mark { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; background-color: var(--rr-surface-2); background-image: var(--rr-grad-soft); border: 1px solid var(--rr-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .rr-panel-head h2 { margin: 0 0 7px; font-size: clamp(1.3rem, 5.2vw, 1.75rem); line-height: 1.12; letter-spacing: -.02em; } .rr-panel-head .rr-kicker { margin-bottom: 6px; } .rr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .74rem; line-height: 1.3; } .rr-meta-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 11px; border: 1px solid var(--rr-line); border-radius: 999px; background: color-mix(in srgb, var(--rr-surface-2) 78%, transparent); color: var(--rr-muted); white-space: nowrap; } .rr-meta-chip b { color: var(--rr-text); font-weight: 700; } .rr-meta-chip.is-good { border-color: color-mix(in srgb, var(--rr-good) 42%, transparent); background: color-mix(in srgb, var(--rr-good) 14%, transparent); color: var(--rr-good); } .rr-meta-chip.is-warn { border-color: color-mix(in srgb, var(--rr-warn) 42%, transparent); background: color-mix(in srgb, var(--rr-warn) 16%, transparent); color: var(--rr-warn); } .rr-meta-chip.is-bad { border-color: color-mix(in srgb, var(--rr-bad) 45%, transparent); background: color-mix(in srgb, var(--rr-bad) 16%, transparent); color: var(--rr-bad); } .rr-meta-chip.is-good b, .rr-meta-chip.is-warn b, .rr-meta-chip.is-bad b { color: inherit; } /* The tint is dialled back on a white surface so the card stays calm. */ html[data-bs-theme="light"] .rr-panel-head { background-image: radial-gradient(120% 150% at 0% 0%, rgba(13, 148, 136, .12), transparent 58%), radial-gradient(110% 140% at 100% 100%, rgba(59, 130, 246, .10), transparent 62%); } .rr-panel-head>div:first-child { min-width: 0; } .rr-panel-head-actions { margin-left: 0; display: flex; gap: 8px; flex-wrap: wrap; } .rr-panel-head-actions>* { flex: 1 1 auto; } .rr-panel-head-actions .rr-field, .rr-panel-head-actions .rr-select { width: 100%; } .rr-panel-head-actions .rr-btn { white-space: nowrap; } .rr-tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; min-width: 0; border-bottom: 1px solid var(--rr-line); margin-bottom: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 12px; /* Fade the right edge so it is obvious the row scrolls on a phone. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%); } .rr-tabs::-webkit-scrollbar { display: none; } .rr-tab { border: 0; background: transparent; cursor: pointer; padding: 12px 12px; min-height: var(--rr-tap); border-bottom: 2px solid transparent; color: var(--rr-muted); font-weight: 600; font-size: .85rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; scroll-snap-align: start; } .rr-tab.is-on { color: var(--rr-text); border-bottom-color: var(--rr-brand); } .rr-tab b { background: var(--rr-surface-3); border-radius: 999px; padding: 1px 7px; font-size: .68rem; } .rr-seg { display: inline-flex; background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: 999px; padding: 3px; gap: 3px; flex-wrap: wrap; } .rr-seg button { border: 0; background: transparent; color: var(--rr-muted); cursor: pointer; border-radius: 999px; min-height: var(--rr-tap-sm); padding: 8px 14px; font-size: .8rem; font-weight: 600; } .rr-seg button.is-on { background: var(--rr-surface); color: var(--rr-text); box-shadow: var(--rr-shadow); } .rr-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; border-radius: var(--rr-r); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .rr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; min-width: 520px; } .rr-table th, .rr-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--rr-line); vertical-align: middle; } .rr-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-muted); font-weight: 700; white-space: nowrap; background: var(--rr-surface); } .rr-table tbody tr:hover { background: var(--rr-surface-2); } .rr-table td.rr-num, .rr-table th.rr-num { text-align: right; font-variant-numeric: tabular-nums; } .rr-table .rr-strong { font-weight: 700; } /* The identity column stays put while the rest scrolls sideways, so a phone user never loses track of which row they are reading. */ .rr-table th:first-child, .rr-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--rr-surface); box-shadow: 1px 0 0 var(--rr-line); } .rr-table tbody tr:hover td:first-child { background: var(--rr-surface-2); } .rr-table td:first-child { max-width: 46vw; } .rr-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .rr-empty { text-align: center; padding: 26px 16px; color: var(--rr-muted); border: 1px dashed var(--rr-line-strong); border-radius: var(--rr-r-lg); display: flex; flex-direction: column; align-items: center; gap: 8px; } .rr-empty span { font-size: 1.6rem; } .rr-dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .86rem; } .rr-dl dt { color: var(--rr-muted); min-width: 0; } .rr-dl dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } .rr-dl .rr-tot dt, .rr-dl .rr-tot dd { border-top: 1px solid var(--rr-line); padding-top: 7px; color: var(--rr-text); font-weight: 700; } /* ── 05 Seeker ─────────────────────────────────────────────────────────── */ .rr-hero { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 20px; min-width: 0; } .rr-hero>* { min-width: 0; } .rr-hero-copy { background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-xl); padding: 18px; box-shadow: var(--rr-shadow-lg); min-width: 0; } .rr-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rr-brand-2); font-weight: 700; margin-bottom: 8px; } .rr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rr-brand); box-shadow: 0 0 0 4px rgba(13, 148, 136, .18); } .rr-hero-copy h1 em { font-style: normal; background: var(--rr-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .rr-hero-sub { color: var(--rr-muted); font-size: .9rem; max-width: 62ch; } /* Marquee scaffolding (see heroMarquee() in app.js). Neutral by default, so a viewport above the phone breakpoint — or one with no JS — just gets the plain paragraph: the track is a block and the duplicate copy is not rendered. */ .rr-mq-track { display: block; /* Must out-size its container for the -50% loop to work; the module-wide `.rr-panel * { max-width: 100% }` guard would otherwise cap it. */ max-width: none; } .rr-mq-item { max-width: none; } .rr-mq-item[aria-hidden="true"] { display: none; } .rr-search { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; } .rr-search-row { display: grid; gap: 10px; grid-template-columns: 1fr; } .rr-search-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* The primary action spans the full width on a phone — thumb-friendly and unmistakable — then shrinks back to its natural size on wider screens. */ .rr-search-actions .rr-btn { flex: 1 1 100%; } .rr-search-actions .rr-btn-primary { order: -1; flex: 1 1 100%; } .rr-hero-kpis { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 0 0; margin: 12px 0 0; border-top: 1px solid var(--rr-line); } .rr-kpi { display: flex; flex-direction: column; min-width: 0; } .rr-kpi b { font-family: var(--rr-display); font-size: 1.3rem; letter-spacing: .01em; } .rr-kpi span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-muted); } .rr-hero-card { background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-xl); padding: 14px; box-shadow: var(--rr-shadow-lg); min-width: 0; } .rr-hero-card-title { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-muted); font-weight: 700; margin-bottom: 8px; } /* One teaser is enough on a phone; all three once there is room. */ .rr-hero-card .rr-col>.rr-thread:nth-child(n + 2) { display: none; } .rr-block { margin-bottom: 18px; min-width: 0; } .rr-layout { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; min-width: 0; } .rr-layout>* { min-width: 0; } /* On a phone the facet column would be a wall of checkboxes above the results, so it is folded away and replaced by the sticky refine bar (everything in it is also in the filter sheet, which is built for touch). */ .rr-facets { display: none; } .rr-mobilebar { position: sticky; top: calc(var(--rr-top-h) + 1px); z-index: 40; display: flex; gap: 8px; align-items: center; margin: 0 -12px 12px; padding: 8px 12px; background: color-mix(in srgb, var(--rr-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rr-line); } .rr-mobilebar .rr-btn { flex: 0 0 auto; } .rr-mobilebar .rr-grow { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--rr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rr-mobilebar-count { font-weight: 700; color: var(--rr-text); } .rr-facet { border-bottom: 1px solid var(--rr-line); padding: 12px 0; } .rr-facet:last-child { border-bottom: 0; } .rr-facet-head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rr-text-soft); } .rr-facet-head b { margin-left: auto; font-size: .7rem; color: var(--rr-muted); font-weight: 600; } .rr-facet-body { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 232px; overflow-y: auto; } .rr-facet-more { margin-top: 6px; border: 0; background: transparent; color: var(--rr-brand-2); font-size: .82rem; font-weight: 700; cursor: pointer; padding: 0; min-height: var(--rr-tap-sm); text-align: left; } .rr-range { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .rr-range input { flex: 1; min-width: 0; } .rr-results-head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; } .rr-results-head h3 { margin: 0; } .rr-results-head .rr-muted { font-size: .82rem; margin-bottom: 0; } .rr-results-head .rr-row { gap: 8px; } .rr-results-head .rr-field { width: 100%; } .rr-grid { display: grid; gap: 14px; grid-template-columns: 1fr; min-width: 0; } .rr-grid>* { min-width: 0; } .rr-prop { position: relative; display: flex; flex-direction: column; min-width: 0; } .rr-prop .rr-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--rr-surface-2); } .rr-prop .rr-card-media img { width: 100%; height: 100%; object-fit: cover; } /* Scrim so status badges and the save button stay legible over a bright photo. */ .rr-prop .rr-card-media::after { content: ''; position: absolute; inset: 0 0 auto; height: 78px; background: linear-gradient(180deg, rgba(4, 8, 18, .58), transparent); pointer-events: none; } .rr-card-badges { position: absolute; inset: 8px 8px auto; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; } .rr-card-badges-end { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 1; } .rr-save { position: absolute; top: 8px; right: 8px; width: var(--rr-tap); height: var(--rr-tap); border-radius: 50%; border: 1px solid var(--rr-line-strong); background: color-mix(in srgb, var(--rr-bg) 75%, transparent); backdrop-filter: blur(6px); color: var(--rr-text); cursor: pointer; font-size: 1.15rem; display: grid; place-items: center; z-index: 2; } .rr-save.is-on { color: #ff6b8a; border-color: #ff6b8a; } .rr-match { position: absolute; left: 8px; bottom: 8px; background: color-mix(in srgb, var(--rr-bg) 78%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--rr-line-strong); border-radius: 999px; padding: 5px 11px; font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; z-index: 1; } .rr-match-bar { width: 46px; height: 5px; border-radius: 999px; background: var(--rr-surface-3); overflow: hidden; } .rr-match-bar i { display: block; height: 100%; background: var(--rr-grad); } .rr-prop-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; } /* Stacked while space is tight, so a long title and a long price never fight. */ .rr-prop-top { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .rr-price { margin-left: 0; text-align: left; white-space: nowrap; } .rr-price b { font-family: var(--rr-display); font-size: 1.25rem; display: block; letter-spacing: .01em; } .rr-price small { color: var(--rr-muted); font-size: .7rem; } .rr-prop-title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3; } .rr-prop-title a { color: inherit; } .rr-prop-place { font-size: .78rem; color: var(--rr-muted); display: inline-flex; gap: 6px; align-items: center; min-width: 0; } .rr-specs { display: flex; flex-wrap: wrap; gap: 6px; } .rr-spec { font-size: .74rem; color: var(--rr-text-soft); background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: 999px; padding: 5px 11px; } .rr-amen-preview { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; color: var(--rr-muted); } /* On a phone the card actions are full-width targets in a 2-column grid. */ .rr-prop-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rr-line); align-items: center; } .rr-prop-foot .rr-agency { grid-column: 1 / -1; } .rr-prop-foot .rr-btn { width: 100%; margin-left: 0; } .rr-reasons { font-size: .74rem; color: #86efac; display: flex; gap: 6px; flex-wrap: wrap; } .rr-gaps { font-size: .74rem; color: var(--rr-muted); } .rr-agency { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--rr-text-soft); } .rr-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--rr-surface-3); display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: var(--rr-text); } .rr-avatar-lg { width: 46px; height: 46px; font-size: 1rem; } .rr-more { display: flex; justify-content: center; padding: 16px 0; } /* Property detail */ .rr-detail { display: grid; gap: 16px; grid-template-columns: 1fr; } .rr-detail-head { display: flex; flex-direction: column; gap: 8px; } .rr-detail-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .rr-detail-title h2 { margin: 0; } .rr-detail-price { margin-left: 0; text-align: left; } .rr-detail-price b { font-family: var(--rr-display); font-size: 1.55rem; } .rr-gallery-main { aspect-ratio: 16 / 10; background: var(--rr-surface-2); position: relative; } .rr-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .rr-gallery-main::after { content: ''; position: absolute; inset: 0 0 auto; height: 88px; background: linear-gradient(180deg, rgba(4, 8, 18, .6), transparent); pointer-events: none; } .rr-gallery-thumbs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; } .rr-gallery-thumbs img { width: 82px; height: 58px; object-fit: cover; border-radius: var(--rr-r-sm); cursor: pointer; opacity: .65; border: 2px solid transparent; flex: 0 0 auto; } .rr-gallery-thumbs img.is-on { opacity: 1; border-color: var(--rr-brand); } .rr-strip { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-tile { background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: var(--rr-r); padding: 10px 12px; } .rr-tile span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-muted); } .rr-tile b { font-size: .94rem; font-variant-numeric: tabular-nums; } .rr-amen-group { margin-bottom: 12px; } .rr-amen-group h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-muted); margin-bottom: 6px; } .rr-amen-list { display: flex; flex-wrap: wrap; gap: 6px; } .rr-amen { font-size: .76rem; border: 1px solid var(--rr-line); background: var(--rr-surface-2); border-radius: 999px; padding: 4px 10px; display: inline-flex; gap: 6px; align-items: center; } .rr-rule-list { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font-size: .82rem; } .rr-rule { display: flex; gap: 8px; align-items: center; } .rr-rule i { font-style: normal; } .rr-rule.no { color: var(--rr-muted); } .rr-rule.yes { color: var(--rr-text-soft); } .rr-map { position: relative; height: 240px; border-radius: var(--rr-r); border: 1px solid var(--rr-line); background: var(--rr-surface-2); overflow: hidden; } .rr-map-img { width: 100%; height: 100%; object-fit: cover; opacity: .85; } .rr-map-pin { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; } .rr-warnbox { background: color-mix(in srgb, var(--rr-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rr-warn) 34%, transparent); border-radius: var(--rr-r); padding: 10px 12px; font-size: .82rem; } .rr-note { background: var(--rr-grad-soft); border: 1px solid var(--rr-line); border-radius: var(--rr-r); padding: 10px 12px; font-size: .82rem; } .rr-timeline { display: flex; flex-direction: column; gap: 12px; } .rr-tl-item { display: flex; gap: 10px; } .rr-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rr-brand); margin-top: 6px; flex: 0 0 10px; box-shadow: 0 0 0 4px rgba(13, 148, 136, .16); } .rr-tl-body { flex: 1; font-size: .82rem; } .rr-tl-body b { display: block; } /* ── 06 Tenant ─────────────────────────────────────────────────────────── */ .rr-pay { display: grid; gap: 14px; grid-template-columns: 1fr; } .rr-balance { font-family: var(--rr-display); font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: .01em; line-height: 1; } .rr-balance small { font-family: var(--rr-font); font-size: .74rem; color: var(--rr-muted); display: block; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; } .rr-progress { height: 9px; border-radius: 999px; background: var(--rr-surface-3); overflow: hidden; margin: 10px 0 6px; } .rr-progress i { display: block; height: 100%; background: var(--rr-grad); } .rr-receipt { background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: var(--rr-r); padding: 14px; } .rr-receipt-head { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--rr-line-strong); padding-bottom: 10px; margin-bottom: 10px; } .rr-receipt-foot { border-top: 1px dashed var(--rr-line-strong); margin-top: 10px; padding-top: 10px; font-size: .78rem; color: var(--rr-muted); } .rr-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; font-weight: 700; } .rr-ledger { font-size: .82rem; } .rr-bubble { background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: 14px; padding: 9px 12px; font-size: .84rem; max-width: 88%; } .rr-msg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .rr-msg-me { align-items: flex-end; } .rr-msg-me .rr-bubble { background: var(--rr-grad-soft); border-color: var(--rr-line-strong); } .rr-msg-meta { font-size: .68rem; color: var(--rr-muted); } .rr-composer { display: flex; gap: 8px; align-items: flex-end; } .rr-composer .rr-textarea { min-height: 46px; } .rr-thread { border: 1px solid var(--rr-line); border-radius: var(--rr-r); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--rr-surface-2); min-width: 0; } .rr-thread.is-on { border-color: var(--rr-brand); } .rr-thread-top { display: flex; gap: 10px; align-items: center; min-width: 0; } .rr-thread-top b { flex: 1; min-width: 0; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 07 Manager ────────────────────────────────────────────────────────── */ .rr-switcher { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rr-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; } .rr-kpi-tile { background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; } .rr-kpi-tile span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--rr-muted); font-weight: 600; } .rr-kpi-tile b { font-family: var(--rr-display); font-size: 1.5rem; letter-spacing: .01em; } .rr-kpi-tile i { font-style: normal; font-size: .72rem; color: var(--rr-muted); } .rr-kpi-tile.is-good b { color: #7ff0ab; } .rr-kpi-tile.is-warn b { color: #ffd28a; } .rr-kpi-tile.is-bad b { color: #ffb1b1; } html[data-bs-theme="light"] .rr-kpi-tile.is-good b { color: #146c3a; } html[data-bs-theme="light"] .rr-kpi-tile.is-warn b { color: #8a5300; } html[data-bs-theme="light"] .rr-kpi-tile.is-bad b { color: #9b1c1c; } .rr-bars { display: flex; flex-direction: column; gap: 8px; } .rr-bar { display: grid; grid-template-columns: minmax(74px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: .78rem; } .rr-bar-track { height: 9px; border-radius: 999px; background: var(--rr-surface-3); overflow: hidden; } .rr-bar-fill { height: 100%; background: var(--rr-grad); } .rr-bar-fill.warn { background: linear-gradient(135deg, #f59e0b, #ef4444); } .rr-bar-val { font-variant-numeric: tabular-nums; font-weight: 700; } .rr-attention { display: flex; flex-direction: column; gap: 8px; } .rr-attention-item { display: flex; gap: 10px; align-items: center; border-left: 3px solid var(--rr-warn); background: var(--rr-surface-2); border-radius: var(--rr-r-sm); padding: 9px 11px; font-size: .82rem; } .rr-attention-item.is-bad { border-left-color: var(--rr-bad); } .rr-attention-item.is-info { border-left-color: var(--rr-info); } .rr-attention-item b { display: block; } .rr-attention-item .rr-grow { flex: 1; } .rr-form { display: grid; gap: 12px; } .rr-form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } .rr-form-sect { border: 1px solid var(--rr-line); border-radius: var(--rr-r); padding: 12px; background: var(--rr-surface-2); } .rr-form-sect>h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--rr-brand-2); margin-bottom: 10px; } .rr-span-2 { grid-column: span 1; } .rr-radio-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .rr-radio-card { border: 1px solid var(--rr-line); background: var(--rr-surface); border-radius: var(--rr-r); padding: 9px 11px; cursor: pointer; font-size: .82rem; display: flex; flex-direction: column; gap: 2px; } .rr-radio-card.is-on { border-color: var(--rr-brand); box-shadow: var(--rr-ring); } .rr-radio-card b { font-size: .86rem; } .rr-radio-card em { font-style: normal; color: var(--rr-muted); font-size: .72rem; } .rr-amen-picker { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-height: 260px; overflow-y: auto; padding: 4px; } .rr-steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: .72rem; color: var(--rr-muted); } .rr-step { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rr-line); } .rr-step.is-on { background: var(--rr-grad); color: #fff; border-color: transparent; } .rr-orgpill { display: inline-flex; align-items: center; gap: 8px; background: var(--rr-surface-2); border: 1px solid var(--rr-line); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; } .rr-orgpill em { font-style: normal; color: var(--rr-muted); font-size: .72rem; } .rr-toolbar { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-bottom: 12px; } .rr-toolbar .rr-field { flex: unset; width: 100%; } .rr-toolbar .rr-select, .rr-toolbar .rr-input { width: 100%; } .rr-toolbar .rr-grow { grid-column: 1 / -1; } .rr-toolbar .rr-btn { width: 100%; } .rr-toolbar .rr-seg { grid-column: 1 / -1; overflow-x: auto; max-width: 100%; } .rr-mini { font-size: .72rem; color: var(--rr-muted); } .rr-price-line { font-variant-numeric: tabular-nums; font-weight: 700; } /* ── 08 Overlays ───────────────────────────────────────────────────────── */ .rr-modal-root { position: fixed; inset: 0; z-index: 200; background: rgba(4, 8, 18, .72); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 0; } .rr-modal-root[hidden] { display: none !important; } .rr-modal { background: var(--rr-bg-soft); border: 1px solid var(--rr-line); border-radius: var(--rr-r-xl) var(--rr-r-xl) 0 0; width: min(760px, 100%); max-height: min(92dvh, 92vh); display: flex; flex-direction: column; box-shadow: var(--rr-shadow-lg); animation: rr-up .22s ease-out; /* Grab handle — it is a sheet, and it should look like one. */ position: relative; padding-top: 10px; } .rr-modal::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 999px; background: var(--rr-line-strong); } .rr-modal-wide { width: min(1040px, 100%); } @keyframes rr-up { from { transform: translateY(22px); opacity: .4; } to { transform: none; opacity: 1; } } .rr-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 8px 14px 12px; border-bottom: 1px solid var(--rr-line); } .rr-modal-head h3 { margin: 0; } .rr-modal-head .rr-grow { flex: 1; min-width: 0; } .rr-x { border: 1px solid var(--rr-line); background: var(--rr-surface); color: var(--rr-text); width: var(--rr-tap-sm); height: var(--rr-tap-sm); border-radius: 10px; cursor: pointer; flex: 0 0 auto; } .rr-modal-body { padding: 14px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rr-modal-foot { padding: 12px 14px calc(12px + var(--rr-safe-b)); border-top: 1px solid var(--rr-line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rr-modal-foot .rr-grow { flex: 1 1 100%; } /* On a phone the actions stack and go full width; the primary one sits on top. */ .rr-modal-foot .rr-btn { flex: 1 1 100%; } .rr-modal-foot .rr-btn-primary { order: -1; } .rr-toast { position: fixed; left: 50%; bottom: calc(18px + var(--rr-safe-b)); transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 20px)); pointer-events: none; } .rr-toast>* { pointer-events: auto; } .rr-toast[hidden] { display: none !important; } .rr-toast-item { background: var(--rr-surface); border: 1px solid var(--rr-line-strong); border-left: 4px solid var(--rr-info); border-radius: var(--rr-r); padding: 11px 13px; font-size: .84rem; box-shadow: var(--rr-shadow-lg); animation: rr-up .2s ease-out; display: flex; gap: 9px; align-items: flex-start; } .rr-toast-item.ok { border-left-color: var(--rr-good); } .rr-toast-item.err { border-left-color: var(--rr-bad); } .rr-toast-item.warn { border-left-color: var(--rr-warn); } .rr-toast-item b { display: block; } .rr-skeleton { background: linear-gradient(90deg, var(--rr-surface-2), var(--rr-surface-3), var(--rr-surface-2)); background-size: 200% 100%; animation: rr-shim 1.3s linear infinite; border-radius: var(--rr-r); } .rr-skeleton-card { height: 240px; } .rr-skeleton-block { height: 260px; margin-bottom: 12px; } .rr-skeleton-row { height: 52px; margin-bottom: 8px; } @keyframes rr-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── 09 Utilities ──────────────────────────────────────────────────────── */ .rr-muted { color: var(--rr-muted); } .rr-soft { color: var(--rr-text-soft); } .rr-strong { font-weight: 700; } .rr-small { font-size: .8rem; } .rr-tiny { font-size: .72rem; } /* Last-resort guard: nothing a listing or a tenant typed may widen the page. */ .rr-panel, .rr-panel * { max-width: 100%; } .rr-center { text-align: center; } .rr-right { text-align: right; } .rr-nowrap { white-space: nowrap; } .rr-grow { flex: 1 1 auto; min-width: 0; } .rr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .rr-row-tight { display: flex; align-items: center; gap: 4px; min-width: 0; } .rr-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; } .rr-between>* { min-width: 0; } .rr-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .rr-hide { display: none !important; } .rr-mt { margin-top: 12px; } .rr-mb { margin-bottom: 12px; } .rr-scroll-y { max-height: 340px; overflow-y: auto; } .rr-divider { height: 1px; background: var(--rr-line); margin: 12px 0; } /* Ellipsis only ever works on a flex/grid child if the child is allowed to shrink below its text width — without `min-width: 0` a single long listing title sets the page's intrinsic width and a phone gets a horizontal scrollbar. */ .rr-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rr-break { word-break: break-word; } .rr-grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; min-width: 0; } .rr-grid-2>* { min-width: 0; } .rr-grid-3 { display: grid; gap: 12px; grid-template-columns: 1fr; min-width: 0; } .rr-grid-3>* { min-width: 0; } .rr-tabular { font-variant-numeric: tabular-nums; } /* ── 10 Print ──────────────────────────────────────────────────────────── */ @media print { .rr-top, .rr-foot, .rr-backdrop, .rr-toast, .rr-modal-head, .rr-modal-foot, .rr-no-print { display: none !important; } .rr-body { background: #fff; color: #000; } .rr-modal-root { position: static; background: none; backdrop-filter: none; padding: 0; display: block; } .rr-modal { width: 100%; max-height: none; border: 0; box-shadow: none; background: #fff; color: #000; border-radius: 0; } .rr-modal-body { overflow: visible; padding: 0; } .rr-receipt { border: 1px solid #999; background: #fff; color: #000; } .rr-code, .rr-dl dd, .rr-price-line { color: #000; } } /* ── Responsive ───────────────────────────────────────────────────────────── Mobile-first: everything above is sized for a thumb. From here up we trade touch comfort back for density, because a mouse is precise and a wide screen can afford three columns. ─────────────────────────────────────────────────────────────────────────── */ /* Small tablets / large phones in landscape */ @media (min-width: 620px) { :root { --rr-tap: 42px; --rr-tap-sm: 34px; } /* denser controls again */ .rr-input, .rr-select, .rr-textarea, .rr-field>input, .rr-field>select, .rr-field>textarea, .rr-search input, .rr-search select { min-height: 42px; padding: 10px 12px; font-size: .9rem; } .rr-textarea { min-height: 88px; } .rr-check { min-height: 28px; gap: 9px; font-size: .84rem; } .rr-check input { width: 17px; height: 17px; flex: 0 0 17px; } .rr-btn-sm { min-height: 32px; padding: 6px 12px; font-size: .78rem; } .rr-tab { padding: 10px 12px; min-height: 40px; } .rr-seg button { min-height: 30px; padding: 6px 12px; font-size: .78rem; } /* layouts that no longer need to be stacked */ .rr-panel-head { flex-direction: row; align-items: flex-end; /* The action block keeps its buttons together, so when it does not fit beside the copy the whole block drops to its own right-aligned row instead of leaving one button orphaned on a line of its own. */ flex-wrap: wrap; gap: 12px 14px; } .rr-panel-main { flex: 1 1 460px; } .rr-panel-head-actions { margin-left: auto; } .rr-panel-head-actions>* { flex: 0 1 auto; } .rr-panel-head-actions .rr-field, .rr-panel-head-actions .rr-select { width: auto; } .rr-results-head { flex-direction: row; align-items: center; justify-content: space-between; } .rr-results-head .rr-field { width: auto; } .rr-search-actions .rr-btn, .rr-search-actions .rr-btn-primary { flex: 0 1 auto; order: 0; } .rr-hero-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rr-prop-top { flex-direction: row; align-items: flex-start; gap: 10px; } .rr-price { margin-left: auto; text-align: right; } .rr-prop-foot { display: flex; flex-wrap: wrap; } .rr-prop-foot .rr-btn { width: auto; margin-left: auto; } .rr-detail-title { flex-direction: row; align-items: flex-start; gap: 12px; } .rr-detail-price { margin-left: auto; text-align: right; } .rr-toolbar { display: flex; flex-wrap: wrap; } .rr-toolbar .rr-field { flex: 0 1 180px; width: auto; } .rr-toolbar .rr-grow { flex: 1; grid-column: auto; } .rr-toolbar .rr-btn { width: auto; } .rr-modal-foot .rr-btn { flex: 0 1 auto; } .rr-modal-foot .rr-btn-primary { order: 0; } .rr-modal-foot .rr-grow { flex: 1 1 auto; } .rr-search-row { grid-template-columns: 1.4fr 1fr; } /* Still a scroller — just aligned to the content column instead of bleeding past it, and the pills get roomier. */ .rr-trustbar { margin: 4px 0 14px; padding: 2px 26px 2px 0; scroll-padding-inline: 0; } .rr-trust-item { min-height: 56px; min-width: 168px; padding: 10px 16px 10px 12px; } .rr-trust-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 1.15rem; } .rr-trust-item b { font-size: 1rem; } .rr-trust-body>span { font-size: .76rem; } .rr-hero-card .rr-col>.rr-thread:nth-child(n + 2) { display: block; } .rr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-span-2 { grid-column: span 2; } .rr-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-foot { grid-template-columns: repeat(3, 1fr); } .rr-modal-root { align-items: center; padding: 20px; } .rr-modal { border-radius: var(--rr-r-xl); padding-top: 0; } .rr-modal::before { display: none; } .rr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-table { min-width: 560px; } } @media (min-width: 900px) { .rr-main { padding: 18px 20px 70px; } .rr-hero { grid-template-columns: 1.55fr .95fr; align-items: start; } .rr-hero-copy, .rr-hero-card { padding: 24px; } .rr-search-row { grid-template-columns: 1.6fr 1fr 1fr .7fr .9fr; } /* The facet column replaces the mobile refine bar from here up. */ .rr-layout { grid-template-columns: 292px 1fr; } .rr-mobilebar { display: none; } .rr-facets { display: block; position: sticky; top: calc(var(--rr-top-h) + 12px); max-height: calc(100dvh - var(--rr-top-h) - 30px); overflow-y: auto; background: var(--rr-surface); border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg); padding: 4px 14px 14px; } .rr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rr-detail { grid-template-columns: 1.6fr 1fr; align-items: start; } .rr-detail-aside { position: sticky; top: calc(var(--rr-top-h) + 12px); } .rr-pay { grid-template-columns: 1.1fr .9fr; } .rr-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rr-span-2 { grid-column: span 2; } .rr-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rr-switch { margin-left: 0; } .rr-top-in { gap: 18px; } } @media (min-width: 1200px) { .rr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── Small screens: the app bar becomes two rows ─────────────────────────── The brand and the shortcut buttons keep the top row; the workspace switcher drops to a full-width row beneath them. That gives the switcher the whole width to work with instead of a squeezed middle column that scrolls inside itself, so nothing has to be shrunk or hidden to fit — the single row needs ~887px before it stops scrolling the switcher, which is why this runs all the way up to the desktop breakpoint. Below 520px the switch also goes icon-only — see the next block. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 899px) { /* Two rows: brand/actions (a 46px control tall) + the switcher row + gaps. The sticky offsets (refine bar, facet column, detail aside) follow it. */ :root { --rr-top-h: 120px; } /* Grid, not flex: the switcher keeps its DOM position (brand → nav → actions, which is also the focus order) but paints on the row below. */ .rr-top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "switch switch"; align-items: center; row-gap: 8px; column-gap: 8px; } .rr-brand { grid-area: brand; } .rr-top-actions { grid-area: actions; } .rr-switch { grid-area: switch; width: 100%; margin-left: 0; scroll-snap-type: none; } /* Full-width, equal segments: on a small screen the switch is the primary navigation, so it takes the whole row instead of hugging three pills and leaving dead space beside them. */ .rr-switch>button { flex: 1 1 0; min-width: 0; justify-content: center; } } /* ── Very small phones (≤ 519px) ──────────────────────────────────────────── The workspace switcher, the brand and the shortcut buttons cannot all fit with labels, so the switch becomes an icon-only segmented control (still labelled for assistive tech) and the account chip keeps only its avatar. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 519px) { .rr-brand, .rr-brand-mark { flex-shrink: 0; } .rr-brand-text i { display: none; } /* Labels go; the equal-width segmented control above already keeps every workspace one tap away without any horizontal scroll. */ .rr-switch>button { padding: 8px 6px; gap: 0; } .rr-switch-icon { font-size: 1.15rem; /* A tight line box keeps this row exactly as tall as the labelled one, so one --rr-top-h serves both bands. */ line-height: 1.2; } /* Saved searches live in the account menu too — drop the header shortcut so all three workspaces fit without a horizontal scroll. */ .rr-top-actions .rr-icon-btn[data-st="openAlerts"] { display: none; } .rr-uchip { padding: 4px; } .rr-uchip>span:not(.rr-avatar) { display: none; } .rr-signin { padding: 10px 14px; } .rr-hero-copy { padding: 16px; } /* The subtitle is a long sentence; at this width it costs four lines of the fold to say one thing. As a marquee it takes one, drifts left slowly, and pauses under the thumb on hover/touch. Both ends are masked so the text fades rather than being chopped. */ .rr-hero-sub { font-size: .86rem; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } /* Two copies side by side, each carrying the gap as padding, so shifting the track by exactly -50% lands copy two where copy one started — no jump. `width: max-content` is what makes that exact: an inline-level box is otherwise clamped to the width available on the line. */ .rr-mq-track { display: inline-flex; width: max-content; animation: rr-mq var(--rr-mq-dur, 28s) linear infinite; will-change: transform; } /* The module-wide `.rr-panel * { max-width: 100% }` guard sits later in this file and would clamp the track back to one item's width, which breaks the loop — so it is out-specified here. */ .rr-hero-sub .rr-mq-track, .rr-hero-sub .rr-mq-item { max-width: none; } .rr-mq-item, .rr-mq-item[aria-hidden="true"] { display: inline-block; padding-right: 44px; } .rr-hero-sub:hover .rr-mq-track, .rr-hero-sub:focus-within .rr-mq-track { animation-play-state: paused; } .rr-mobilebar { margin: 0 -12px 10px; } } @keyframes rr-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Motion off means the marquee is off — and, just as importantly, not left as a frozen clipped line. Width, wrapping and the duplicate copy are all reverted, so the subtitle goes back to being a normal paragraph. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .rr-mq-track, .rr-mq-item, .rr-mq-item[aria-hidden="true"] { display: block; width: auto; max-width: 100%; padding-right: 0; animation: none !important; } .rr-mq-item[aria-hidden="true"] { display: none; } .rr-hero-sub { overflow: visible; white-space: normal; -webkit-mask-image: none; mask-image: none; } }