/* ─────────────────────────────────────────────────────────────
DPM V2 — Dark-first design system
Dark is the default; [data-theme="light"] on flips.
Users can toggle from the header; choice persists in localStorage.
───────────────────────────────────────────────────────────── */
:root {
/* Dark palette (default) */
--bg: #0a0f1c;
--bg-elevated: #141a2b;
--surface: #1a2036;
--surface-hover: #232a44;
--border: #2a3352;
--border-strong: #3d4a70;
--ink-1: #f0f4ff;
--ink-2: #b7c0d8;
--ink-3: #8b93a8;
--ink-inverse: #0a0f1c;
--accent: #4d7dff;
--accent-hover: #6a94ff;
--accent-ink: #ffffff;
--accent-soft: rgba(77, 125, 255, 0.12);
--success: #22c96d;
--warn: #f5a623;
--error: #ef4a4a;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-3: 0 8px 28px rgba(0, 0, 0, 0.5);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Inter", var(--font-body);
--max-width: 1140px;
}
[data-theme="light"] {
--bg: #f7f8fc;
--bg-elevated: #ffffff;
--surface: #ffffff;
--surface-hover: #f0f3fa;
--border: #e4e8f2;
--border-strong: #c3ccdf;
--ink-1: #1a2036;
--ink-2: #3d4664;
--ink-3: #6a7391;
--ink-inverse: #ffffff;
--accent: #2b57e5;
--accent-hover: #1e46c9;
--accent-ink: #ffffff;
--accent-soft: rgba(43, 87, 229, 0.10);
--shadow-1: 0 1px 2px rgba(20, 30, 60, 0.06);
--shadow-2: 0 4px 14px rgba(20, 30, 60, 0.08);
--shadow-3: 0 10px 30px rgba(20, 30, 60, 0.12);
}
/* Prefers-color-scheme respected on first visit — before user toggles */
@media (prefers-color-scheme: light) {
:root:not([data-theme]):not([data-theme="dark"]) {
/* fallback for browsers not honoring our attribute — dark stays default */
}
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--ink-1);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Layout primitives ─────────────────────────────────────── */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-5);
}
section {
padding: var(--space-7) 0;
}
/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink-1);
margin: 0 0 var(--space-3);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 var(--space-4); color: var(--ink-2); }
a {
color: var(--accent);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-3);
}
.muted { color: var(--ink-3); }
/* ── Header ────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in oklab, var(--bg) 90%, transparent);
backdrop-filter: saturate(1.4) blur(12px);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
gap: var(--space-4);
}
.brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.01em;
}
.brand a {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.brand-logo {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: contain;
background: #fff;
padding: 4px;
flex-shrink: 0;
}
/* reCAPTCHA attribution — small muted line beneath the submit button.
Google's branding policy requires attribution whenever the badge is
hidden or de-emphasized, and it's good practice to show it regardless. */
.form-recaptcha-attr {
margin-top: 10px;
font-size: 0.75rem;
color: var(--ink-3);
line-height: 1.4;
}
.form-recaptcha-attr a {
color: var(--ink-3);
text-decoration: underline;
text-underline-offset: 2px;
}
.form-recaptcha-attr a:hover { color: var(--accent); }
.nav {
display: flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.nav a {
color: var(--ink-2);
font-size: 0.94rem;
font-weight: 500;
}
.nav a:hover { color: var(--ink-1); }
.theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--ink-2);
padding: 6px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--ink-1); }
/* ── Hero ──────────────────────────────────────────────────── */
.hero {
padding: var(--space-8) 0;
background:
radial-gradient(ellipse at top left, var(--accent-soft), transparent 55%),
radial-gradient(ellipse at bottom right, var(--accent-soft), transparent 55%),
var(--bg);
}
/* Hero — image on the RIGHT, spanning from the H1 top down to the
CTA-row bottom (raj 2026-09-17: "start at the bottom where we have
4 buttons and height should be up-to Property Management wording").
Structural change: eyebrow + trust-bar are now OUTSIDE the 2-column
grid — the grid contains only [h1 + lead + cta | image] — so the
image's stretched height exactly matches the copy column (H1 top →
CTA bottom) without extending past either. */
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: stretch; /* image column matches copy column height */
margin-bottom: var(--space-5);
}
/* Image cell must NOT contribute to intrinsic row height, or its
aspect-ratio height pushes the grid row taller than the copy column.
position:absolute on the img takes it out of the cell's sizing
contribution; the cell then stretches to match copy height exactly,
and the img fills that stretched cell via inset:0 + object-fit. */
.hero-image {
position: relative;
align-self: stretch;
min-height: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-3);
border: 1px solid var(--border);
background: var(--surface);
}
.hero-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 4-CTA row — all buttons stay on one line at desktop widths. Tighter
padding + gap keeps them within the wider copy column. Wraps to 2 rows
only when the viewport is genuinely narrow. */
.cta-row-4 {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cta-row-4 .btn {
padding: 11px 14px;
font-size: 0.92rem;
}
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-copy p.lead {
font-size: 1.1rem;
color: var(--ink-2);
margin-bottom: var(--space-5);
max-width: 46ch;
}
.cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.trust-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-5);
padding: var(--space-3) 0;
border-top: 1px solid var(--border);
margin-top: var(--space-5);
color: var(--ink-3);
font-size: 0.88rem;
}
.trust-bar span { display: inline-flex; align-items: center; gap: 6px; }
.trust-bar strong { color: var(--ink-1); font-weight: 700; }
/* Older .hero-image duplicate removed 2026-09-17 — the primary rules
live earlier in this file under the "Hero — image on the RIGHT..."
block. Height: auto here was overriding the stretch behavior. */
/* ── Buttons ───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
text-decoration: none;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
box-shadow: 0 2px 8px color-mix(in oklab, var(--accent) 40%, transparent);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary {
background: var(--surface);
color: var(--ink-1);
border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--ink-1); }
.btn-ghost {
background: transparent;
color: var(--ink-1);
border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface); }
.btn-block { width: 100%; }
/* ── Cards ─────────────────────────────────────────────────── */
.section-heading {
text-align: center;
margin-bottom: var(--space-6);
}
.section-heading h2 { margin-bottom: var(--space-2); }
.section-heading p { color: var(--ink-3); margin: 0 auto; max-width: 60ch; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
.card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-1);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
border-color: var(--border-strong);
}
.card h4 {
color: var(--ink-1);
margin-bottom: var(--space-2);
font-size: 1.1rem;
}
.card p {
color: var(--ink-2);
font-size: 0.94rem;
margin: 0;
}
.card .card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent);
margin-bottom: var(--space-3);
font-size: 1.2rem;
}
.card-community {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.card-community .card-img {
width: 100%;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.8rem;
letter-spacing: -0.02em;
overflow: hidden;
position: relative;
text-align: center;
padding: var(--space-4);
}
.card-community .card-img::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top left, rgba(255,255,255,0.15), transparent 60%);
pointer-events: none;
}
.card-community .card-img.wr { background: linear-gradient(135deg, #1f3a5f 0%, #3d6dab 100%); }
.card-community .card-img.va { background: linear-gradient(135deg, #4a2f6f 0%, #7f5aa8 100%); }
.card-community .card-img.np { background: linear-gradient(135deg, #1f5a4f 0%, #3d9a7a 100%); }
.card-community .card-img .city {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.75;
margin-bottom: 4px;
}
.card-community .card-img .name {
display: block;
font-size: 1.4rem;
line-height: 1.2;
}
.card-community .card-img img { display: none; }
.card-community .card-body { padding: var(--space-5); }
.card-community h4 { margin-bottom: var(--space-2); }
.card-community .badge {
display: inline-block;
background: var(--accent-soft);
color: var(--accent);
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.78rem;
font-weight: 600;
margin-bottom: var(--space-3);
}
.card-community ul.facts {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
color: var(--ink-2);
font-size: 0.92rem;
}
.card-community ul.facts li { padding: 2px 0; }
.card-community ul.facts li::before {
content: "→";
color: var(--accent);
margin-right: 8px;
}
/* ── Split section (owners/tenants) ─────────────────────────── */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.split .card {
padding: var(--space-6);
}
/* ── Bullets ───────────────────────────────────────────────── */
.bullets {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
}
.bullets li {
padding: var(--space-4);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--ink-2);
position: relative;
padding-left: 42px;
}
.bullets li::before {
content: "✓";
position: absolute;
left: 14px;
top: 14px;
color: var(--accent);
font-weight: 700;
}
/* ── Forms ─────────────────────────────────────────────────── */
.form-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-1);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
align-items: start; /* prevents tall + short label pairs from misaligning */
}
.form-grid .full { grid-column: 1 / -1; }
/* Labels are now flex columns so their /