/*
* Broker embed. Dark is the default; is the
* opt-in paper theme for white sites. Every color is a token below so the
* two themes stay one design.
*/
:root {
/* Height of the bottom mark. Attribution and the legend stack above it. */
--fl-mark-h: 32px;
--fl-surface: #0f1522;
--fl-panel: rgb(16 20 28 / 94%);
--fl-rule: rgb(246 245 242 / 14%);
--fl-text: #f6f5f2;
--fl-muted: #aab4c0;
/* Caveat tone for the source line: amber, 11:1 on the dark panel. */
--fl-caveat: #f2c46d;
--fl-accent: #1e4d7b;
--fl-control-icon: invert(1);
/* RAMP_COLORS from rent-map-hud.js. Brighter is a higher stated median. */
--fl-step-1: #1d4470;
--fl-step-2: #2a609a;
--fl-step-3: #3f7fc0;
--fl-step-4: #6aa3dc;
--fl-step-5: #a9cdf2;
--fl-swatch-rule: rgb(246 245 242 / 22%);
/* Withheld is texture, not a darker blue: the map's hatch as a key. */
--fl-withheld:
repeating-linear-gradient(
135deg,
rgb(170 180 192 / 45%) 0 1px,
transparent 1px 4px
),
#1a2130;
--fl-withheld-rule: #c9d3de;
}
/* Paper theme. LIGHT_RAMP in rent-map-embed.js: darker is higher. */
html[data-theme="light"] {
--fl-surface: #f6f5f2;
--fl-panel: rgb(246 245 242 / 96%);
--fl-rule: color-mix(in srgb, #172033 16%, #f6f5f2);
--fl-text: #172033;
--fl-muted: #4e5966;
/* Dark amber on paper, 6:1. */
--fl-caveat: #8a5a00;
--fl-control-icon: none;
--fl-step-1: #bcd3ea;
--fl-step-2: #8cb2da;
--fl-step-3: #5b8cc0;
--fl-step-4: #336597;
--fl-step-5: #1b4474;
--fl-swatch-rule: rgb(23 32 51 / 28%);
--fl-withheld:
repeating-linear-gradient(
135deg,
rgb(78 89 102 / 45%) 0 1px,
transparent 1px 4px
),
#f6f5f2;
--fl-withheld-rule: #4e5966;
}
html,
body {
margin: 0;
height: 100%;
min-height: 100dvh;
max-width: 100%;
background: var(--fl-surface);
color: var(--fl-text);
font-family: "Public Sans", sans-serif;
overflow: hidden;
}
#fact-lease-map {
position: absolute;
inset: 0;
min-height: 100dvh;
background: var(--fl-surface);
}
#fact-lease-map .maplibregl-map,
#fact-lease-map .maplibregl-canvas {
background: var(--fl-surface);
}
/*
* The canvas is shown only after the camera is inside the metro (is-framed,
* from sa-frame.js) and the first idle frame has drawn (is-painted, from
* rent-map-embed.js). A framed but unpainted map stays hidden behind the
* status line instead of reading as a blank square.
*/
#fact-lease-map .maplibregl-canvas,
#fact-lease-map .maplibregl-canvas-container,
#fact-lease-map .maplibregl-control-container,
#fact-lease-map.fact-lease-booting .maplibregl-canvas-container {
visibility: hidden;
}
#fact-lease-map.is-framed.is-painted .maplibregl-canvas,
#fact-lease-map.is-framed.is-painted .maplibregl-canvas-container,
#fact-lease-map.is-framed.is-painted .maplibregl-control-container {
visibility: visible;
}
.fact-lease-status {
position: absolute;
z-index: 4;
top: 12px;
left: 12px;
margin: 0;
max-width: min(18rem, calc(100% - 64px));
box-sizing: border-box;
padding: 6px 8px;
background: var(--fl-panel);
color: var(--fl-text);
border: 1px solid var(--fl-rule);
border-left: 3px solid var(--fl-accent);
font-size: 13px;
}
.fact-lease-status a {
color: var(--fl-text);
}
.fact-lease-status:empty {
display: none;
}
/* One compact panel: figure, sub, meta. */
.fact-lease-hud {
position: absolute;
z-index: 4;
top: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 0;
box-sizing: border-box;
max-width: min(18rem, calc(100% - 64px));
min-width: 0;
padding: 12px;
background: var(--fl-panel);
color: var(--fl-text);
border: 1px solid var(--fl-rule);
overflow: clip;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.fact-lease-status:not(:empty) + .fact-lease-hud {
top: 56px;
}
.fact-lease-hud > p {
margin: 0;
}
.fact-lease-hud > .fact-lease-figure {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1.1;
}
#fact-lease-median {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
}
.fact-lease-unit {
color: var(--fl-muted);
font-size: 12px;
font-weight: 600;
}
.fact-lease-unit:empty {
display: none;
}
.fact-lease-hud > .fact-lease-sub {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
}
/* Who the median is made of, when one host dominates n. A caveat, not a stat. */
.fact-lease-hud > .fact-lease-source {
margin-top: 2px;
color: var(--fl-caveat);
font-size: 11px;
font-weight: 600;
line-height: 1.35;
}
.fact-lease-hud > .fact-lease-source:empty {
display: none;
}
.fact-lease-hud > .fact-lease-meta {
margin-top: 2px;
color: var(--fl-muted);
font-size: 11px;
line-height: 1.4;
}
.fact-lease-sub
> span:not(:empty):not(.fact-lease-city)
~ span:not(:empty)::before,
.fact-lease-meta > span:not(:empty) ~ span:not(:empty)::before {
content: " ยท ";
}
/* "San Antonio citywide median": the city names the figure on a broker's
page. The scope keeps its own text ("Citywide median") for the painter. */
.fact-lease-city + #fact-lease-scope {
display: inline-block;
}
.fact-lease-city + #fact-lease-scope::first-letter {
text-transform: lowercase;
}
.fact-lease-sub:not(:has(span:not(:empty))),
.fact-lease-meta:not(:has(span:not(:empty))) {
display: none;
}
/* Narrow and short frames show a bare ramp strip in place of the legend. */
.fact-lease-hud > .fact-lease-keystrip {
display: none;
align-items: center;
gap: 2px;
margin-top: 6px;
color: var(--fl-muted);
font-size: 10px;
}
.fact-lease-keystrip span:first-child {
margin-right: 4px;
}
.fact-lease-keystrip .fact-lease-keystrip-hi {
margin-left: 4px;
}
.fact-lease-keystrip i {
display: inline-block;
width: 14px;
height: 6px;
background: var(--fl-step);
}
html[data-theme="light"] .fact-lease-keystrip i {
box-shadow: inset 0 0 0 1px var(--fl-swatch-rule);
}
/* Withheld in the strip: the legend's hatch with its dashed edge. */
.fact-lease-keystrip i.fact-lease-keystrip-withheld {
width: 12px;
height: 8px;
margin-left: 6px;
box-sizing: border-box;
background: var(--fl-withheld);
border: 1px dashed var(--fl-withheld-rule);
box-shadow: none;
}
.fact-lease-keystrip span.fact-lease-keystrip-withheld-label {
margin-left: 2px;
}
/* Legend sits above the attribution row, which sits above the mark. */
.fact-lease-legend {
position: absolute;
z-index: 4;
left: 12px;
bottom: calc(var(--fl-mark-h) + 12px);
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
align-items: center;
max-width: min(30rem, calc(100% - 64px));
box-sizing: border-box;
margin: 0;
padding: 8px 10px;
background: var(--fl-panel);
color: var(--fl-text);
border: 1px solid var(--fl-rule);
font-size: 11px;
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.fact-lease-legend-title {
flex-basis: 100%;
font-weight: 600;
}
.fact-lease-ramp {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.fact-lease-ramp[hidden] {
display: none;
}
.fact-lease-step {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.fact-lease-step[hidden] {
display: none;
}
.fact-lease-step-withheld,
.fact-lease-step-none {
color: var(--fl-muted);
}
.fact-lease-swatch {
display: inline-block;
width: 14px;
height: 10px;
border: 1px solid var(--fl-swatch-rule);
box-sizing: border-box;
background: var(--fl-step);
}
.fact-lease-step-1 {
--fl-step: var(--fl-step-1);
}
.fact-lease-step-2 {
--fl-step: var(--fl-step-2);
}
.fact-lease-step-3 {
--fl-step: var(--fl-step-3);
}
.fact-lease-step-4 {
--fl-step: var(--fl-step-4);
}
.fact-lease-step-5 {
--fl-step: var(--fl-step-5);
}
/* Withheld: the hatch at the map's withheld paint, dashed outline. */
.fact-lease-step-withheld .fact-lease-swatch {
background: var(--fl-withheld);
border: 1px dashed var(--fl-withheld-rule);
}
.fact-lease-step-none .fact-lease-swatch {
background: transparent;
border: 1px solid var(--fl-withheld-rule);
opacity: 0.6;
}
/*
* The mark: one solid 32px bar on every size. Wordmark, the factlease.com
* link, and "Not an availability claim." are never hidden.
*/
.fact-lease-mark {
position: absolute;
z-index: 6;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-wrap: nowrap;
gap: 12px;
align-items: center;
height: var(--fl-mark-h);
max-width: none;
margin: 0;
padding: 0 12px;
box-sizing: border-box;
background: var(--fl-surface);
color: var(--fl-muted);
border: 0;
border-top: 1px solid var(--fl-rule);
font-size: 11px;
line-height: 1;
white-space: nowrap;
box-shadow: none;
}
.fact-lease-mark a {
color: var(--fl-text);
font-weight: 600;
}
.fact-lease-mark > .fact-lease-wordmark {
flex: 0 0 auto;
font-size: 13px;
text-decoration: none;
}
.fact-lease-mark-note {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.fact-lease-mark-open {
flex: 0 0 auto;
margin-left: auto;
}
/* Popup: the panel surface, never the data hue. */
.maplibregl-popup-content {
background: var(--fl-panel);
color: var(--fl-text);
border: 1px solid var(--fl-rule);
border-radius: 0;
box-shadow: none;
padding: 10px 24px 10px 12px;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
border-bottom-color: var(--fl-panel);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
border-top-color: var(--fl-panel);
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
border-right-color: var(--fl-panel);
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
border-left-color: var(--fl-panel);
}
.maplibregl-popup-close-button {
color: var(--fl-text);
font-size: 16px;
}
.maplibregl-popup-close-button:hover {
background: color-mix(in srgb, var(--fl-text) 12%, transparent);
}
.fact-lease-tip {
margin: 0;
color: var(--fl-text);
font:
13px/1.4 "Public Sans",
sans-serif;
font-variant-numeric: tabular-nums;
}
.fact-lease-tip strong {
color: var(--fl-text);
font-weight: 600;
}
.fact-lease-tip a {
color: var(--fl-text);
}
.fact-lease-tip p {
margin: 4px 0 0;
}
.fact-lease-tip-suites {
margin: 4px 0 0;
padding-left: 1.1rem;
}
.fact-lease-tip-suites li {
margin: 2px 0;
}
.fact-lease-tip-note {
display: block;
margin-top: 4px;
color: var(--fl-muted);
font-size: 11px;
}
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact,
.maplibregl-ctrl-attrib.maplibregl-compact-show {
background-color: var(--fl-panel);
color: var(--fl-muted);
}
.maplibregl-ctrl-attrib a {
color: var(--fl-muted);
}
html[data-theme="dark"] .maplibregl-ctrl-attrib-button {
filter: invert(1);
}
/* Attribution clears the mark. z-index 5 keeps it above the legend, below the mark. */
.maplibregl-ctrl-bottom-right {
z-index: 5;
max-width: 60%;
bottom: var(--fl-mark-h);
}
.maplibregl-ctrl-top-right {
z-index: 5;
}
.maplibregl-ctrl-group {
background: var(--fl-panel);
border: 1px solid var(--fl-rule);
border-radius: 0;
box-shadow: none;
}
.maplibregl-ctrl-group button {
background-color: transparent;
width: 32px;
height: 32px;
}
.maplibregl-ctrl-group button + button {
border-top: 1px solid var(--fl-rule);
}
.maplibregl-ctrl-group button span {
filter: var(--fl-control-icon);
}
/* Narrow frames: the note keeps only the claim sentence. */
@media (max-width: 480px) {
.fact-lease-mark-long {
display: none;
}
.fact-lease-legend {
left: 8px;
right: 44px;
max-width: none;
}
.fact-lease-status,
.fact-lease-hud {
top: 8px;
left: 8px;
}
.fact-lease-status:not(:empty) + .fact-lease-hud {
top: 52px;
}
}
/* Up to 640px wide the legend box would cover published ZIPs; the key
becomes the strip inside the panel. */
@media (max-width: 640px), (max-height: 400px) {
.fact-lease-legend {
display: none;
}
.fact-lease-hud > .fact-lease-keystrip {
display: flex;
}
}
/* The report link yields before the wordmark or the claim does. */
@media (max-width: 400px) {
.fact-lease-mark-open {
display: none;
}
}
/* A short frame (320x280) shows the median, the mark, the attribution, and
the zoom control. The legend yields to a bare ramp strip. */
@media (max-height: 400px) {
#fact-lease-sub,
#fact-lease-meta {
display: none;
}
.fact-lease-hud {
padding: 8px 10px;
}
#fact-lease-median {
font-size: 20px;
}
}