500 lines
12 KiB
CSS
500 lines
12 KiB
CSS
:root {
|
|
--bg: #0b0d12;
|
|
--panel: #141821;
|
|
--panel-2: #1c2230;
|
|
--rule: #262d3c;
|
|
--ink: #eef1f7;
|
|
--ink-dim: #98a1b3;
|
|
--ink-dimmer: #6b7488;
|
|
--accent: #ffb84d; /* hero / UI brand color (unchanged) */
|
|
--warn: #ff6a6a; /* warn text/numbers (unchanged) */
|
|
|
|
/* Map palette -- chosen so each layer is unambiguous when overlapping. */
|
|
--i2: #3b82f6; /* I-2 zoning footprint (cool, recessive) */
|
|
--strict: #ef4444; /* strict-eligible parcels -- urgent red */
|
|
--buildable: #fbbf24; /* buildable patches -- amber */
|
|
--siteable: #f97316; /* building envelope -- deeper orange */
|
|
--protected: #22c55e; /* homes newly protected -- green = good news */
|
|
--marginal: #c084fc; /* DC site lost if raised to 500 -- purple, no overlap with red/yellow */
|
|
--you: #06b6d4; /* your address -- cyan, unmistakable single dot */
|
|
--maxw: 1080px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(255,184,77,0.35); }
|
|
a:hover { border-bottom-color: var(--accent); }
|
|
|
|
.kicker {
|
|
font-size: 12px;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dimmer);
|
|
margin-bottom: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---------- Hero ---------- */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 80px 24px 40px;
|
|
max-width: var(--maxw);
|
|
margin: 0 auto;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(72px, 14vw, 156px);
|
|
margin: 0;
|
|
letter-spacing: -0.05em;
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
line-height: 0.95;
|
|
}
|
|
.hero h1 .period { color: inherit; }
|
|
.hero .lede {
|
|
font-size: clamp(17px, 2.1vw, 21px);
|
|
color: var(--ink-dim);
|
|
margin: 24px auto 0;
|
|
max-width: 640px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 16px;
|
|
margin: 48px auto 0;
|
|
max-width: 880px;
|
|
}
|
|
.stat {
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 14px;
|
|
padding: 24px 20px;
|
|
text-align: center;
|
|
}
|
|
.stat .num {
|
|
display: block;
|
|
font-size: 64px;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
color: var(--accent);
|
|
letter-spacing: -0.04em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat .num.warn { color: var(--warn); }
|
|
.stat .lbl {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
margin-top: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
.disclaimer {
|
|
max-width: 720px;
|
|
margin: 28px auto 0;
|
|
padding: 14px 18px;
|
|
font-size: 13.5px;
|
|
color: var(--ink-dim);
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 8px;
|
|
line-height: 1.55;
|
|
text-align: left;
|
|
}
|
|
.disclaimer em {
|
|
color: var(--ink);
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- Map ---------- */
|
|
.mapwrap {
|
|
max-width: var(--maxw);
|
|
margin: 56px auto 0;
|
|
padding: 0 16px;
|
|
}
|
|
.map-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.seg {
|
|
display: inline-flex;
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 999px;
|
|
padding: 3px;
|
|
overflow: hidden;
|
|
}
|
|
.seg-btn {
|
|
background: transparent;
|
|
color: var(--ink-dim);
|
|
border: 0;
|
|
padding: 8px 18px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: 999px;
|
|
transition: background 0.15s, color 0.15s;
|
|
font-family: inherit;
|
|
}
|
|
.seg-btn:hover { color: var(--ink); }
|
|
.seg-btn.active { background: var(--accent); color: #1a1a1a; }
|
|
/* Layers menu: the trigger button lives in .map-controls. The panel itself
|
|
is rendered INLINE in the page flow (between controls and map) — toggling
|
|
it open simply pushes the map down. No z-index, no overlays, no surprise
|
|
stacking-context fights with Leaflet. */
|
|
.layer-menu {
|
|
margin-left: auto;
|
|
}
|
|
.layer-menu > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 8px 14px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--ink-dim);
|
|
user-select: none;
|
|
}
|
|
.layer-menu > summary::-webkit-details-marker { display: none; }
|
|
.layer-menu > summary::after { content: " ▾"; opacity: 0.6; }
|
|
.layer-menu > summary:hover { color: var(--ink); }
|
|
.layer-menu[open] > summary { color: var(--ink); background: var(--panel-2); }
|
|
|
|
.menu-panel {
|
|
margin: 10px 0 0;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
padding: 4px 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
}
|
|
.menu-panel[hidden] { display: none; }
|
|
.menu-panel label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
font-size: 13.5px;
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
}
|
|
.menu-panel label:hover { background: var(--rule); border-radius: 6px; }
|
|
.menu-panel input[type=checkbox] { accent-color: var(--accent); flex-shrink: 0; }
|
|
|
|
@media (max-width: 640px) {
|
|
.menu-panel { grid-template-columns: 1fr; }
|
|
.menu-panel label { padding: 12px 14px; font-size: 14px; }
|
|
}
|
|
|
|
#map {
|
|
height: 64vh;
|
|
min-height: 520px;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--rule);
|
|
background: #060810;
|
|
}
|
|
|
|
.legend {
|
|
margin-top: 12px;
|
|
font-size: 12px;
|
|
color: var(--ink-dim);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 18px;
|
|
padding: 0 4px;
|
|
}
|
|
.legend .sw {
|
|
display: inline-block;
|
|
width: 14px; height: 10px;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
border-radius: 2px;
|
|
}
|
|
.legend .sw.I2 { background: rgba(59,130,246,0.25); border: 1px solid var(--i2); }
|
|
.legend .sw.STRICT { background: rgba(239,68,68,0.30); border: 1.5px solid var(--strict); }
|
|
.legend .sw.BUILDABLE { background: rgba(251,191,36,0.40); border: 1px solid var(--buildable); }
|
|
.legend .sw.SITEABLE { background: rgba(249,115,22,0.55); border: 1px solid var(--siteable); }
|
|
.legend .sw.MARGINAL { background: transparent; border: 2px dashed var(--marginal); }
|
|
.legend .sw.PROTECTED { background: var(--protected); border-radius: 50%; width: 10px; height: 10px; border: 0; }
|
|
.legend .sw.YOU { background: var(--you); border-radius: 50%; width: 10px; height: 10px; border: 1px solid #fff; }
|
|
|
|
/* ---------- Address checker ---------- */
|
|
.checker {
|
|
max-width: 720px;
|
|
margin: 48px auto 0;
|
|
padding: 28px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 14px;
|
|
position: relative;
|
|
}
|
|
.checker h2 {
|
|
font-size: 19px;
|
|
margin: 0 0 16px;
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.addr-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.addr-row input {
|
|
flex: 1;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
font-size: 15px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.addr-row input:focus { border-color: var(--accent); }
|
|
.addr-row button {
|
|
background: var(--accent);
|
|
color: #1a1a1a;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
font-family: inherit;
|
|
padding: 0 22px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.addr-row button:hover { filter: brightness(1.08); }
|
|
|
|
.suggest {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 6px 0 0;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
position: absolute;
|
|
left: 28px;
|
|
right: 100px;
|
|
z-index: 500;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
|
|
}
|
|
.suggest li {
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--rule);
|
|
font-size: 14px;
|
|
}
|
|
.suggest li:last-child { border-bottom: 0; }
|
|
.suggest li:hover, .suggest li.active { background: var(--rule); }
|
|
|
|
.result {
|
|
margin-top: 18px;
|
|
padding: 16px 18px;
|
|
background: var(--bg);
|
|
border-radius: 10px;
|
|
border-left: 4px solid var(--accent);
|
|
}
|
|
.result .big {
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
color: var(--warn);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.result .little {
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
margin-top: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
.result b { color: var(--ink); }
|
|
.result .muted { color: var(--ink-dimmer); font-size: 0.75em; }
|
|
|
|
.cmp-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.cmp-cell {
|
|
text-align: center;
|
|
padding: 10px 6px;
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 8px;
|
|
}
|
|
.cmp-cell.active {
|
|
border-color: var(--accent);
|
|
background: var(--panel-2);
|
|
}
|
|
.cmp-cell .cmp-lbl {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
color: var(--ink-dimmer);
|
|
margin-bottom: 4px;
|
|
}
|
|
.cmp-cell.active .cmp-lbl { color: var(--accent); }
|
|
.cmp-cell .cmp-val {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.cmp-cell .muted { color: var(--ink-dimmer); font-weight: 500; }
|
|
|
|
/* ---------- Case for 500 ft ---------- */
|
|
.case {
|
|
max-width: var(--maxw);
|
|
margin: 64px auto 0;
|
|
padding: 40px 24px;
|
|
}
|
|
.case h2 {
|
|
font-size: clamp(22px, 3vw, 30px);
|
|
font-weight: 700;
|
|
margin: 0 0 18px;
|
|
letter-spacing: -0.015em;
|
|
color: var(--ink);
|
|
}
|
|
.case .lede {
|
|
font-size: 16px;
|
|
color: var(--ink-dim);
|
|
margin: 0 0 24px;
|
|
max-width: 760px;
|
|
}
|
|
.case .lede strong { color: var(--accent); }
|
|
|
|
.case-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 18px 0;
|
|
background: var(--panel);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.case-table th, .case-table td {
|
|
padding: 14px 16px;
|
|
text-align: right;
|
|
border-bottom: 1px solid var(--rule);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.case-table tr:last-child td { border-bottom: 0; }
|
|
.case-table th:first-child, .case-table td:first-child {
|
|
text-align: left;
|
|
color: var(--ink-dim);
|
|
font-weight: 500;
|
|
}
|
|
.case-table thead th {
|
|
color: var(--ink-dimmer);
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
background: var(--panel-2);
|
|
}
|
|
.case-table tbody td:nth-child(2) { color: var(--warn); font-weight: 700; }
|
|
.case-table tbody td:nth-child(3) { color: var(--ink); }
|
|
.case-table tbody td:nth-child(4) { color: var(--protected); font-weight: 700; }
|
|
.case-table tbody td.zero { color: var(--protected); font-weight: 700; }
|
|
.case-foot {
|
|
font-size: 12.5px;
|
|
color: var(--ink-dimmer);
|
|
margin: 8px 0 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.case-foot em { color: var(--ink); font-style: normal; }
|
|
|
|
.case-actions {
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
color: var(--ink-dim);
|
|
}
|
|
.case-actions label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
|
|
|
|
/* ---------- Caveats ---------- */
|
|
.caveats {
|
|
max-width: 760px;
|
|
margin: 72px auto 64px;
|
|
padding: 32px 24px;
|
|
border-top: 1px solid var(--rule);
|
|
font-size: 13.5px;
|
|
color: var(--ink-dim);
|
|
line-height: 1.65;
|
|
}
|
|
.caveats h3 {
|
|
margin: 0 0 14px;
|
|
font-size: 12px;
|
|
color: var(--ink-dimmer);
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
.caveats p { margin: 0 0 12px; }
|
|
.caveats em { color: var(--ink); font-style: normal; font-weight: 600; }
|
|
.caveats .footnote { font-size: 12px; color: var(--ink-dimmer); margin-top: 18px; }
|
|
.caveats .credit {
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
margin-top: 18px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid var(--rule);
|
|
text-align: center;
|
|
}
|
|
.caveats .credit a { color: var(--accent); font-weight: 600; }
|
|
|
|
/* ---------- Leaflet overrides ---------- */
|
|
.leaflet-container { background: #060810; font-family: inherit; }
|
|
.leaflet-popup-content-wrapper {
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
border-radius: 8px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.5);
|
|
}
|
|
.leaflet-popup-tip { background: var(--panel); }
|
|
.leaflet-popup-content { font-size: 13px; line-height: 1.5; margin: 14px 16px; }
|
|
.leaflet-popup-content b { color: var(--accent); }
|
|
.leaflet-control-zoom a {
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
border: 1px solid var(--rule);
|
|
}
|
|
.leaflet-control-zoom a:hover { background: var(--panel-2); }
|
|
.leaflet-control-attribution {
|
|
background: rgba(11,13,18,0.85);
|
|
color: var(--ink-dimmer);
|
|
font-size: 11px;
|
|
}
|
|
.leaflet-control-attribution a { color: var(--ink-dim); border-bottom: 0; }
|
|
|
|
@media (max-width: 640px) {
|
|
.hero { padding-top: 56px; }
|
|
.case { padding: 32px 16px; }
|
|
.case-table { font-size: 13px; }
|
|
.case-table th, .case-table td { padding: 10px 10px; }
|
|
}
|