renders as snap-row on
mobile only on the home page. Listings.html is unaffected. */
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] #featuredGrid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--mv2-container-x);
-webkit-overflow-scrolling: touch;
padding: 4px var(--mv2-container-x) 22px;
margin: 0 calc(-1 * var(--mv2-container-x));
scrollbar-width: none;
}
body[data-portal="public"][data-page="home"] #featuredGrid::-webkit-scrollbar { display: none; }
body[data-portal="public"][data-page="home"] #featuredGrid > .property-card,
body[data-portal="public"][data-page="home"] #featuredGrid > .property-card-skeleton {
flex: 0 0 86%;
max-width: 340px;
scroll-snap-align: start;
}
}
/* ── Freshness chip (rendered by card-builder.js) ──────────────────
Uses absolute positioning inside .property-card-img, stacked under
the existing top-left badge with a small gap. Visible on every card
that has p.created_at within the last 7 days. */
body[data-portal="public"] .property-card-fresh-chip {
position: absolute;
top: 56px; /* sits under the existing badge (≈40px tall + gap) */
left: 12px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 9px;
background: rgba(4, 120, 87, 0.95);
color: #FFFFFF;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--mv2-r-pill);
box-shadow: 0 2px 8px rgba(4, 120, 87, 0.30);
pointer-events: none;
}
body[data-portal="public"] .property-card-fresh-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #B7F1C6;
box-shadow: 0 0 0 0 rgba(183, 241, 198, 0.8);
animation: mv2-fresh-pulse 2.4s ease-out infinite;
}
@keyframes mv2-fresh-pulse {
0% { box-shadow: 0 0 0 0 rgba(183, 241, 198, 0.8); }
70% { box-shadow: 0 0 0 8px rgba(183, 241, 198, 0); }
100% { box-shadow: 0 0 0 0 rgba(183, 241, 198, 0); }
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"] .property-card-fresh-dot { animation: none; }
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.3 — How It Works: vertical scroll-progress timeline ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.3, agent_issues #33) ║
║ ║
║ - Vertical rail with progress fill driven by --hiw-progress (0-1) ║
║ set by the inline rAF script in the section. ║
║ - Step bubbles transition to active state when their center crosses ║
║ the viewport anchor (55% down). ║
║ - Reduced motion: rail full, all steps active by default, no transit║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .mv2-hiw {
background: #FFFFFF;
padding: var(--mv2-section-y-mobile) 0;
position: relative;
}
@media (min-width: 769px) {
body[data-portal="public"][data-page="home"] .mv2-hiw {
padding: var(--mv2-section-y-desktop) 0;
}
}
/* Header */
body[data-portal="public"][data-page="home"] .mv2-hiw__header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mv2-stack-7);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__header .mv2-eyebrow {
justify-content: center;
}
body[data-portal="public"][data-page="home"] .mv2-hiw__subtitle {
color: var(--mv2-muted);
font-size: var(--mv2-fs-body);
line-height: var(--mv2-lh-body);
margin: var(--mv2-stack-3) auto 0;
max-width: 56ch;
}
/* ── Track + rail ─────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__track {
list-style: none;
margin: 0 auto;
padding: 0;
position: relative;
max-width: 760px;
--hiw-progress: 0;
--hiw-bubble-size: 56px;
--hiw-rail-x: 28px; /* center of bubble = (56/2) */
}
@media (min-width: 769px) {
body[data-portal="public"][data-page="home"] .mv2-hiw__track {
--hiw-bubble-size: 72px;
--hiw-rail-x: 36px;
}
}
body[data-portal="public"][data-page="home"] .mv2-hiw__rail {
position: absolute;
top: var(--hiw-bubble-size);
bottom: var(--hiw-bubble-size);
left: var(--hiw-rail-x);
width: 2px;
background: var(--mv2-hairline);
transform: translateX(-1px);
border-radius: 2px;
overflow: hidden;
z-index: 0;
}
body[data-portal="public"][data-page="home"] .mv2-hiw__rail-fill {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(180deg, var(--mv2-brand) 0%, var(--mv2-brand-dark) 100%);
transform: scaleY(var(--hiw-progress));
transform-origin: top center;
transition: transform 240ms var(--mv2-ease);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-hiw__rail-fill { transition: none; }
}
/* ── Step row ─────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__step {
position: relative;
display: grid;
grid-template-columns: var(--hiw-bubble-size) 1fr;
gap: clamp(16px, 3vw, 28px);
align-items: flex-start;
padding: 8px 0 clamp(36px, 6vw, 72px);
z-index: 1;
}
body[data-portal="public"][data-page="home"] .mv2-hiw__step:last-child {
padding-bottom: 0;
}
/* ── Bubble (default = pre-active state) ──────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble {
width: var(--hiw-bubble-size);
height: var(--hiw-bubble-size);
border-radius: 50%;
background: #FFFFFF;
border: 2px solid var(--mv2-hairline);
color: var(--mv2-muted);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
transition: background var(--mv2-dur-lg) var(--mv2-ease),
border-color var(--mv2-dur-lg) var(--mv2-ease),
color var(--mv2-dur-lg) var(--mv2-ease),
transform var(--mv2-dur-lg) var(--mv2-ease),
box-shadow var(--mv2-dur-lg) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble-num {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 700;
font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
line-height: 1;
position: absolute;
top: 6px;
right: 8px;
color: inherit;
opacity: 0.65;
}
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble-icon {
font-size: clamp(18px, 1.2vw + 14px, 24px);
}
/* ── Bubble: active state ─────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__step.is-active .mv2-hiw__bubble {
background: var(--mv2-brand);
border-color: var(--mv2-brand);
color: #FFFFFF;
transform: scale(1.04);
box-shadow: 0 8px 24px rgba(0, 106, 255, 0.28);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__step.is-active .mv2-hiw__bubble-num {
opacity: 0.9;
}
/* ── Step body ────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__body {
padding-top: 6px;
transition: opacity var(--mv2-dur-lg) var(--mv2-ease),
transform var(--mv2-dur-lg) var(--mv2-ease);
opacity: 0.62;
transform: translateY(2px);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__step.is-active .mv2-hiw__body {
opacity: 1;
transform: translateY(0);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__step-title {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 600;
font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
line-height: 1.25;
color: var(--mv2-ink);
margin: 0 0 8px;
}
body[data-portal="public"][data-page="home"] .mv2-hiw__step-desc {
color: var(--mv2-muted);
font-size: var(--mv2-fs-body);
line-height: var(--mv2-lh-body);
margin: 0;
max-width: 56ch;
}
/* Reduced motion fallback: all bodies fully visible by default */
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble,
body[data-portal="public"][data-page="home"] .mv2-hiw__body { transition: none; }
body[data-portal="public"][data-page="home"] .mv2-hiw__body { opacity: 1; transform: none; }
}
/* ── CTA ──────────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hiw__cta {
display: flex;
flex-direction: column;
gap: var(--mv2-stack-3);
align-items: center;
margin-top: var(--mv2-stack-7);
text-align: center;
}
@media (min-width: 769px) {
body[data-portal="public"][data-page="home"] .mv2-hiw__cta {
flex-direction: row;
justify-content: center;
gap: var(--mv2-stack-5);
}
}
body[data-portal="public"][data-page="home"] .mv2-hiw__cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--mv2-brand);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid transparent;
transition: border-color var(--mv2-dur) var(--mv2-ease),
color var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__cta-link:hover {
color: var(--mv2-brand-dark);
border-bottom-color: var(--mv2-brand);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__cta-link i {
font-size: 12px;
transition: transform var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__cta-link:hover i { transform: translateX(3px); }
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.4 — "Verified, every time" trust block ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.4, agent_issues #34) ║
║ ║
║ 4-pillar trust section between Featured & HIW. Warm-bg, centered ║
║ header, 4-up grid on desktop, 2x2 on tablet, 1-up on mobile. ║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .mv2-trustblock {
background: var(--mv2-bg-warm);
padding: var(--mv2-section-y-mobile) 0;
position: relative;
}
@media (min-width: 769px) {
body[data-portal="public"][data-page="home"] .mv2-trustblock {
padding: var(--mv2-section-y-desktop) 0;
}
}
/* Header */
body[data-portal="public"][data-page="home"] .mv2-trustblock__header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mv2-stack-7);
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__header .mv2-eyebrow {
justify-content: center;
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__subtitle {
color: var(--mv2-muted);
font-size: var(--mv2-fs-body);
line-height: var(--mv2-lh-body);
margin: var(--mv2-stack-3) auto 0;
max-width: 60ch;
}
/* Pillar grid */
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillars {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--mv2-stack-5);
max-width: 1100px;
}
@media (min-width: 600px) {
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillars {
grid-template-columns: repeat(2, 1fr);
gap: var(--mv2-stack-5) var(--mv2-stack-5);
}
}
@media (min-width: 1024px) {
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillars {
grid-template-columns: repeat(4, 1fr);
gap: var(--mv2-stack-5);
}
}
/* Single pillar */
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillar {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0;
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(212, 160, 23, 0.10);
color: var(--mv2-gold);
font-size: 22px;
margin-bottom: var(--mv2-stack-3);
box-shadow: inset 0 0 0 1px rgba(212, 160, 23, 0.18);
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillar-title {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 600;
font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.3rem);
line-height: 1.25;
color: var(--mv2-ink);
margin: 0 0 8px;
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__pillar-desc {
color: var(--mv2-muted);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
max-width: 36ch;
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.5 — Testimonials humanization ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.5, agent_issues #35) ║
║ ║
║ - Initials avatar circles (italic Fraunces, soft gold tint) ║
║ - Middle card promoted to "story tile": italic display quote + ║
║ gold left accent + warmer paper bg ║
║ - Mobile: 1-up vertical, then horizontal snap carousel >=600px, ║
║ 3-up grid on desktop (story tile spans 2 columns) ║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .mv2-testimonials {
background: #FFFFFF;
padding: var(--mv2-section-y-mobile) 0;
position: relative;
}
@media (min-width: 769px) {
body[data-portal="public"][data-page="home"] .mv2-testimonials {
padding: var(--mv2-section-y-desktop) 0;
}
}
/* Header */
body[data-portal="public"][data-page="home"] .mv2-testimonials__header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mv2-stack-7);
}
body[data-portal="public"][data-page="home"] .mv2-testimonials__header .mv2-eyebrow {
justify-content: center;
}
body[data-portal="public"][data-page="home"] .mv2-testimonials__subtitle {
color: var(--mv2-muted);
font-size: var(--mv2-fs-body);
line-height: var(--mv2-lh-body);
margin: var(--mv2-stack-3) auto 0;
max-width: 56ch;
}
/* ── Row layout ───────────────────────────────────────────────────
Mobile (<600px): vertical stack
Tablet (600–1023px): horizontal snap carousel
Desktop (>=1024px): 3-column grid; story tile spans 2 columns
*/
body[data-portal="public"][data-page="home"] .mv2-testimonials__row {
display: grid;
grid-template-columns: 1fr;
gap: var(--mv2-stack-4);
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 600px) and (max-width: 1023px) {
body[data-portal="public"][data-page="home"] .mv2-testimonials__row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 14px;
padding: 6px var(--mv2-container-x) 22px;
margin: 0 calc(-1 * var(--mv2-container-x));
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body[data-portal="public"][data-page="home"] .mv2-testimonials__row::-webkit-scrollbar { display: none; }
body[data-portal="public"][data-page="home"] .mv2-testimonials__row > .mv2-testimonial {
flex: 0 0 86%;
max-width: 460px;
scroll-snap-align: start;
}
}
@media (min-width: 1024px) {
body[data-portal="public"][data-page="home"] .mv2-testimonials__row {
grid-template-columns: 1fr 1.5fr 1fr;
gap: var(--mv2-stack-5);
align-items: stretch;
}
}
/* ── Single testimonial card ─────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-testimonial {
background: #FFFFFF;
border: 1px solid var(--mv2-hairline);
border-radius: var(--mv2-r-lg);
padding: 28px 24px 24px;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
transition: border-color var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial:hover {
border-color: rgba(0, 106, 255, 0.18);
box-shadow: 0 6px 24px rgba(10, 23, 41, 0.06);
}
/* Story tile variant */
body[data-portal="public"][data-page="home"] .mv2-testimonial--story {
background: var(--mv2-bg-warm);
border-color: rgba(212, 160, 23, 0.30);
box-shadow: 0 1px 0 rgba(212, 160, 23, 0.12) inset;
}
body[data-portal="public"][data-page="home"] .mv2-testimonial--story::before {
content: "";
position: absolute;
left: 0; top: 24px; bottom: 24px;
width: 3px;
background: linear-gradient(180deg, var(--mv2-gold) 0%, rgba(212, 160, 23, 0.5) 100%);
border-radius: 0 3px 3px 0;
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__quote-icon {
position: absolute;
top: 22px;
right: 22px;
font-size: 22px;
color: rgba(212, 160, 23, 0.45);
}
/* ── Initials avatar ─────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mv2-display);
font-style: normal;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.01em;
color: #5A4416;
background: rgba(212, 160, 23, 0.16);
border: 1px solid rgba(212, 160, 23, 0.28);
flex-shrink: 0;
}
/* per-card hue tints (additive variety, still in the warm gold family) */
body[data-portal="public"][data-page="home"] .mv2-avatar--mt {
background: rgba(0, 106, 255, 0.10);
color: #1B3A87;
border-color: rgba(0, 106, 255, 0.22);
}
body[data-portal="public"][data-page="home"] .mv2-avatar--ps {
/* keep the gold default — it's the story tile */
}
body[data-portal="public"][data-page="home"] .mv2-avatar--jk {
background: rgba(4, 120, 87, 0.10);
color: #044E37;
border-color: rgba(4, 120, 87, 0.22);
}
/* ── Quote text ──────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-testimonial__quote {
margin: 0;
color: var(--mv2-ink);
font-size: 1rem;
line-height: 1.6;
font-style: normal;
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__quote--display {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 500;
font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem);
line-height: 1.45;
color: var(--mv2-ink);
padding-left: 8px;
}
/* ── Meta ────────────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-testimonial__meta {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
padding-top: 6px;
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__name {
font-weight: 600;
font-size: 0.95rem;
color: var(--mv2-ink);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__detail {
font-size: 0.85rem;
color: var(--mv2-muted);
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.6 — City spotlight strip ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.6, agent_issues #36) ║
║ ║
║ Pill row of 8 markets, each → /listings.html?city=
. ║
║ Mobile: horizontal snap scroll. Desktop: wrap to 2 rows of 4. ║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .mv2-cities {
background: #FFFFFF;
padding: clamp(48px, 7vw, 80px) 0;
position: relative;
}
body[data-portal="public"][data-page="home"] .mv2-cities__header {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mv2-stack-5);
}
body[data-portal="public"][data-page="home"] .mv2-cities__header .mv2-eyebrow {
justify-content: center;
}
body[data-portal="public"][data-page="home"] .mv2-cities__subtitle {
color: var(--mv2-muted);
font-size: var(--mv2-fs-body);
line-height: var(--mv2-lh-body);
margin: var(--mv2-stack-3) auto 0;
max-width: 56ch;
}
/* ── Pill row ──────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-cities__row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
body[data-portal="public"][data-page="home"] .mv2-cities__row {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 4px var(--mv2-container-x) 18px;
margin: 0 calc(-1 * var(--mv2-container-x));
gap: 10px;
scrollbar-width: none;
justify-content: flex-start;
}
body[data-portal="public"][data-page="home"] .mv2-cities__row::-webkit-scrollbar { display: none; }
body[data-portal="public"][data-page="home"] .mv2-cities__item {
scroll-snap-align: start;
flex-shrink: 0;
}
}
body[data-portal="public"][data-page="home"] .mv2-cities__item { margin: 0; }
/* ── Single pill ──────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-cities__pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: var(--mv2-bg-warm);
border: 1px solid var(--mv2-hairline);
border-radius: var(--mv2-r-pill);
color: var(--mv2-ink);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
transition: background var(--mv2-dur) var(--mv2-ease),
border-color var(--mv2-dur) var(--mv2-ease),
color var(--mv2-dur) var(--mv2-ease),
transform var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover,
body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible {
background: #FFFFFF;
border-color: var(--mv2-brand);
color: var(--mv2-brand-dark);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 106, 255, 0.10);
outline: none;
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill-icon {
font-size: 14px;
color: var(--mv2-gold);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(212, 160, 23, 0.12);
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover .mv2-cities__pill-icon,
body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible .mv2-cities__pill-icon {
background: rgba(0, 106, 255, 0.10);
color: var(--mv2-brand);
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill-name {
font-weight: 600;
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill-state {
color: var(--mv2-muted-2);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-cities__pill { transition: none; }
body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover { transform: none; }
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.7 — Emotional final CTA + mv2 mobile sticky CTA refresh ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.7, agent_issues #37) ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Final CTA section (warm gradient, editorial close) ───────────── */
body[data-portal="public"][data-page="home"] .mv2-finalcta {
position: relative;
padding: clamp(72px, 10vw, 128px) 0;
overflow: hidden;
text-align: center;
isolation: isolate;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at top, rgba(212, 160, 23, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(0, 106, 255, 0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--mv2-bg-warm) 0%, #FFFEFC 100%);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__bg::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 160, 23, 0.35) 50%,
transparent 100%);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__inner {
max-width: 720px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mv2-stack-4);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__eyebrow {
margin: 0;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__headline {
margin: 0;
max-width: 16ch;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__subtitle {
margin: 0;
color: var(--mv2-muted);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
line-height: 1.6;
max-width: 52ch;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: var(--mv2-stack-3);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__cta {
min-height: 52px;
padding: 0 28px;
font-size: 1rem;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__cta i {
margin-left: 8px;
font-size: 0.85em;
transition: transform var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__cta:hover i {
transform: translateX(3px);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__reassurance {
margin: var(--mv2-stack-3) 0 0;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--mv2-muted-2);
font-size: 0.85rem;
font-weight: 500;
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__reassurance i {
color: var(--mv2-gold);
font-size: 0.95em;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-finalcta__cta:hover i { transform: none; }
}
/* ── Mobile sticky CTA refresh (mv2-mcta) ──────────────────────────
Scoped under [data-portal="public"] so it works on any public page,
not just home (matches placement of the bar in the markup).
*/
[data-portal="public"] .mv2-mcta {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
display: flex;
gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 254, 251, 0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--mv2-hairline);
box-shadow: 0 -6px 24px rgba(10, 23, 41, 0.06);
transform: translateY(110%);
transition: transform 280ms var(--mv2-ease);
}
[data-portal="public"] .mv2-mcta.mv2-mcta--visible {
transform: translateY(0);
}
[data-portal="public"] .mv2-mcta__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 14px;
border-radius: var(--mv2-r-md);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background var(--mv2-dur) var(--mv2-ease),
color var(--mv2-dur) var(--mv2-ease),
border-color var(--mv2-dur) var(--mv2-ease);
}
[data-portal="public"] .mv2-mcta__btn--ghost {
background: rgba(255, 255, 255, 0.7);
color: var(--mv2-ink);
border: 1px solid var(--mv2-hairline);
}
[data-portal="public"] .mv2-mcta__btn--ghost:hover,
[data-portal="public"] .mv2-mcta__btn--ghost:focus-visible {
background: #FFFFFF;
color: var(--mv2-brand-dark);
border-color: var(--mv2-brand);
outline: none;
}
[data-portal="public"] .mv2-mcta__btn--primary {
background: linear-gradient(180deg, var(--mv2-brand) 0%, var(--mv2-brand-dark) 100%);
color: #FFFFFF;
border: 1px solid var(--mv2-brand-dark);
box-shadow: 0 2px 8px rgba(0, 106, 255, 0.25);
}
[data-portal="public"] .mv2-mcta__btn--primary:hover,
[data-portal="public"] .mv2-mcta__btn--primary:focus-visible {
background: var(--mv2-brand-dark);
color: #FFFFFF;
outline: none;
}
[data-portal="public"] .mv2-mcta__btn i {
font-size: 0.9em;
}
@media (min-width: 769px) {
[data-portal="public"] .mv2-mcta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
[data-portal="public"] .mv2-mcta { transition: none; }
}
/* On home page when mobile CTA is visible, add bottom padding so footer
isn't covered. Footer is injected so we add padding to body. */
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] { padding-bottom: 76px; }
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.8 — listings.html mv2 refresh ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.8, agent_issues #38) ║
║ ║
║ Scoped to body[data-portal="public"][data-page="listings"] ║
║ Additive — preserves all #IDs that listings.js depends on. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Page header: warm bg, italic Fraunces title ────────────────── */
body[data-portal="public"][data-page="listings"] .mv2-listings-header {
position: relative;
padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px);
isolation: isolate;
border-bottom: 1px solid var(--mv2-hairline);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at top left, rgba(212, 160, 23, 0.07) 0%, transparent 55%),
linear-gradient(180deg, var(--mv2-bg-warm) 0%, #FFFEFC 100%);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__inner {
display: flex;
flex-direction: column;
gap: var(--mv2-stack-3);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__eyebrow {
margin: 0;
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__title {
margin: 0;
font-family: var(--mv2-display);
font-weight: 400;
font-style: normal;
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--mv2-ink);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__title em {
font-style: normal;
font-weight: 700;
color: var(--mv2-ink);
background: linear-gradient(180deg, transparent 65%, rgba(212, 160, 23, 0.28) 65%);
padding: 0 0.05em;
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__subtitle {
margin: 0;
color: var(--mv2-muted);
font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
line-height: 1.55;
max-width: 56ch;
}
/* ── Search row: bigger fields, hairline borders, brand focus ring ── */
body[data-portal="public"][data-page="listings"] .mv2-search-row {
margin-top: var(--mv2-stack-4);
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
body[data-portal="public"][data-page="listings"] .mv2-search-field {
position: relative;
background: #FFFFFF;
border: 1px solid var(--mv2-hairline);
border-radius: var(--mv2-r-md);
transition: border-color var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease);
display: flex;
align-items: center;
min-height: 50px;
}
body[data-portal="public"][data-page="listings"] .mv2-search-field:focus-within {
border-color: var(--mv2-brand);
box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.15);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field > i.fas {
flex-shrink: 0;
width: 38px;
text-align: center;
font-size: 14px;
color: var(--mv2-muted-2);
transition: color var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field:focus-within > i.fas {
color: var(--mv2-brand);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field input,
body[data-portal="public"][data-page="listings"] .mv2-search-field select {
flex: 1;
border: none;
background: transparent;
outline: none;
padding: 12px 14px 12px 0;
font-size: 0.95rem;
color: var(--mv2-ink);
font-family: inherit;
min-width: 0;
}
body[data-portal="public"][data-page="listings"] .mv2-search-field--text {
flex: 2 1 280px;
}
body[data-portal="public"][data-page="listings"] .mv2-search-field--select {
flex: 1 1 150px;
}
body[data-portal="public"][data-page="listings"] .mv2-search-field--select select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
padding-right: 32px;
cursor: pointer;
}
body[data-portal="public"][data-page="listings"] .mv2-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 0 24px;
border-radius: var(--mv2-r-md);
background: linear-gradient(180deg, var(--mv2-brand) 0%, var(--mv2-brand-dark) 100%);
color: #FFFFFF;
border: 1px solid var(--mv2-brand-dark);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 106, 255, 0.25);
transition: background var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease),
transform var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="listings"] .mv2-search-btn:hover,
body[data-portal="public"][data-page="listings"] .mv2-search-btn:focus-visible {
background: var(--mv2-brand-dark);
box-shadow: 0 4px 14px rgba(0, 106, 255, 0.35);
transform: translateY(-1px);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="listings"] .mv2-search-btn:hover { transform: none; }
}
@media (max-width: 600px) {
body[data-portal="public"][data-page="listings"] .mv2-search-field--text { flex: 1 1 100%; }
body[data-portal="public"][data-page="listings"] .mv2-search-btn { flex: 1 1 100%; }
}
/* ── Filter bar polish ─────────────────────────────────────────── */
body[data-portal="public"][data-page="listings"] .mv2-filter-bar {
background: #FFFFFF;
border-bottom: 1px solid var(--mv2-hairline);
}
/* ── Listings section header ────────────────────────────────────── */
body[data-portal="public"][data-page="listings"] .mv2-listings-section {
background: #FFFFFF;
padding-top: clamp(28px, 4vw, 48px);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-heading {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--mv2-ink);
}
/* JS may highlight city/area text inside in the listings heading */
body[data-portal="public"][data-page="listings"] .mv2-listings-heading em {
font-style: normal;
font-weight: 700;
color: var(--mv2-accent-strong);
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.9 — property.html mv2 refresh ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.9, agent_issues #39) ║
║ ║
║ Scoped to body[data-portal="public"][data-page="property"] ║
║ Additive — no JS-touched IDs altered. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Page bg: warm paper top fade for editorial feel ──────────────── */
body[data-portal="public"][data-page="property"] .mv2-property {
position: relative;
isolation: isolate;
}
body[data-portal="public"][data-page="property"] .mv2-property::before {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 280px;
background: linear-gradient(180deg, var(--mv2-bg-warm) 0%, transparent 100%);
z-index: -1;
pointer-events: none;
}
/* ── Breadcrumb: subtle hairline + muted ──────────────────────────── */
body[data-portal="public"][data-page="property"] .mv2-breadcrumb {
font-size: 0.85rem;
color: var(--mv2-muted-2);
letter-spacing: 0.01em;
}
body[data-portal="public"][data-page="property"] .mv2-breadcrumb a {
color: var(--mv2-muted);
text-decoration: none;
transition: color var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="property"] .mv2-breadcrumb a:hover,
body[data-portal="public"][data-page="property"] .mv2-breadcrumb a:focus-visible {
color: var(--mv2-brand-dark);
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
/* ── Detail header: editorial price + Fraunces title ──────────────── */
body[data-portal="public"][data-page="property"] .mv2-detail-header {
padding-bottom: var(--mv2-stack-3);
border-bottom: 1px solid var(--mv2-hairline);
margin-bottom: var(--mv2-stack-4);
}
body[data-portal="public"][data-page="property"] .mv2-detail-header #detailPrice {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--mv2-ink);
}
body[data-portal="public"][data-page="property"] .mv2-detail-header #detailPrice span {
font-family: var(--mv2-body);
font-size: 0.45em;
font-weight: 500;
color: var(--mv2-muted);
margin-left: 4px;
letter-spacing: 0;
}
body[data-portal="public"][data-page="property"] .mv2-detail-header #detailTitle {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 600;
font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
line-height: 1.3;
color: var(--mv2-ink);
margin-top: var(--mv2-stack-2);
}
body[data-portal="public"][data-page="property"] .mv2-detail-header #detailAddress {
font-size: 0.95rem;
color: var(--mv2-muted);
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}
body[data-portal="public"][data-page="property"] .mv2-detail-header #detailAddress i {
color: var(--mv2-gold);
font-size: 0.95em;
}
/* ── Section titles (editorial italic Fraunces) ───────────────────── */
body[data-portal="public"][data-page="property"] .mv2-section-title {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
line-height: 1.25;
color: var(--mv2-ink);
margin-bottom: var(--mv2-stack-3);
letter-spacing: -0.005em;
}
body[data-portal="public"][data-page="property"] .mv2-section-title em {
font-style: normal;
font-weight: 700;
color: var(--mv2-accent-strong);
background: linear-gradient(180deg, transparent 65%, rgba(212, 160, 23, 0.22) 65%);
padding: 0 0.05em;
}
/* ── Apply card sidebar: warm bg, editorial price, polished CTA ──── */
body[data-portal="public"][data-page="property"] .mv2-apply-card {
background: var(--mv2-bg-warm);
border: 1px solid var(--mv2-hairline);
border-radius: var(--mv2-r-lg);
position: relative;
overflow: hidden;
}
body[data-portal="public"][data-page="property"] .mv2-apply-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--mv2-gold) 0%, rgba(212, 160, 23, 0.4) 100%);
}
body[data-portal="public"][data-page="property"] .mv2-apply-card #sidebarPrice {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.15rem);
line-height: 1.1;
color: var(--mv2-ink);
letter-spacing: -0.01em;
}
body[data-portal="public"][data-page="property"] .mv2-apply-card #sidebarPrice span {
font-family: var(--mv2-body);
font-size: 0.45em;
font-weight: 500;
color: var(--mv2-muted);
margin-left: 4px;
}
body[data-portal="public"][data-page="property"] .mv2-apply-card #applyBtn {
background: linear-gradient(180deg, var(--mv2-brand) 0%, var(--mv2-brand-dark) 100%);
border: 1px solid var(--mv2-brand-dark);
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: 0 4px 14px rgba(0, 106, 255, 0.25);
transition: background var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease),
transform var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="property"] .mv2-apply-card #applyBtn:hover,
body[data-portal="public"][data-page="property"] .mv2-apply-card #applyBtn:focus-visible {
background: var(--mv2-brand-dark);
box-shadow: 0 6px 20px rgba(0, 106, 255, 0.32);
transform: translateY(-1px);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="property"] .mv2-apply-card #applyBtn:hover { transform: none; }
}
/* ── Landlord card: avatar polish ─────────────────────────────────── */
body[data-portal="public"][data-page="property"] .mv2-landlord-card {
border-color: var(--mv2-hairline);
border-radius: var(--mv2-r-md);
}
body[data-portal="public"][data-page="property"] .mv2-landlord-card #landlordAvatar {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 700;
background: rgba(212, 160, 23, 0.16);
color: #5A4416;
border: 1px solid rgba(212, 160, 23, 0.28);
}
body[data-portal="public"][data-page="property"] .mv2-landlord-card #landlordVerified {
color: var(--mv2-brand);
}
/* ── Contact card: cleaner inputs ─────────────────────────────────── */
body[data-portal="public"][data-page="property"] .mv2-contact-card .form-input,
body[data-portal="public"][data-page="property"] .mv2-contact-card .form-textarea {
border: 1px solid var(--mv2-hairline);
border-radius: var(--mv2-r-sm);
padding: 11px 13px;
font-size: 0.95rem;
background: #FFFFFF;
transition: border-color var(--mv2-dur) var(--mv2-ease),
box-shadow var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="property"] .mv2-contact-card .form-input:focus,
body[data-portal="public"][data-page="property"] .mv2-contact-card .form-textarea:focus {
border-color: var(--mv2-brand);
box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.15);
outline: none;
}
body[data-portal="public"][data-page="property"] .mv2-contact-card .form-label {
font-weight: 600;
color: var(--mv2-ink);
letter-spacing: 0.01em;
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.10 — Secondary marketing pages (about, how-to-apply, ║
║ how-it-works, faq) mv2 refresh ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.10, agent_issues #40)║
║ ║
║ Shared CSS — 4 pages have identical .info-hero/.info-page/.info- ║
║ content/.info-section skeleton; selector list scopes per data-page. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Hero: warm paper bg, italic Fraunces title ─────────────────── */
body[data-portal="public"][data-page="about"] .mv2-info-hero,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero,
body[data-portal="public"][data-page="faq"] .mv2-info-hero {
position: relative;
padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
isolation: isolate;
border-bottom: 1px solid var(--mv2-hairline);
text-align: center;
}
body[data-portal="public"][data-page="about"] .mv2-info-hero__bg,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero__bg,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero__bg,
body[data-portal="public"][data-page="faq"] .mv2-info-hero__bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse at top, rgba(212, 160, 23, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at bottom right, rgba(0, 106, 255, 0.05) 0%, transparent 60%),
linear-gradient(180deg, var(--mv2-bg-warm) 0%, #FFFEFC 100%);
}
body[data-portal="public"][data-page="about"] .mv2-info-hero-inner,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero-inner,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero-inner,
body[data-portal="public"][data-page="faq"] .mv2-info-hero-inner {
position: relative;
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--mv2-stack-3);
align-items: center;
}
/* ── Hero title (italic Fraunces with gold marker on emphasis) ──── */
body[data-portal="public"][data-page="about"] .mv2-info-hero-title,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero-title,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero-title,
body[data-portal="public"][data-page="faq"] .mv2-info-hero-title {
margin: 0;
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--mv2-ink);
text-wrap: balance;
}
body[data-portal="public"][data-page="about"] .mv2-info-hero-title em,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero-title em,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero-title em,
body[data-portal="public"][data-page="faq"] .mv2-info-hero-title em {
font-style: normal;
font-weight: 700;
color: var(--mv2-ink);
background: linear-gradient(180deg, transparent 65%, rgba(212, 160, 23, 0.30) 65%);
padding: 0 0.05em;
}
/* ── Hero subtitle ──────────────────────────────────────────────── */
body[data-portal="public"][data-page="about"] .mv2-info-hero-sub,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-hero-sub,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-hero-sub,
body[data-portal="public"][data-page="faq"] .mv2-info-hero-sub {
margin: 0;
color: var(--mv2-muted);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
line-height: 1.55;
max-width: 56ch;
text-wrap: pretty;
}
/* ── Page body: white, comfortable reading width ───────────────── */
body[data-portal="public"][data-page="about"] .mv2-info-page,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-page,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-page,
body[data-portal="public"][data-page="faq"] .mv2-info-page {
background: #FFFFFF;
padding: clamp(40px, 6vw, 80px) 0;
}
body[data-portal="public"][data-page="about"] .mv2-info-content,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-content,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-content,
body[data-portal="public"][data-page="faq"] .mv2-info-content {
max-width: 760px;
margin: 0 auto;
}
/* ── Sections within the body get rhythm + Fraunces h2s ────────── */
body[data-portal="public"][data-page="about"] .mv2-info-section,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section,
body[data-portal="public"][data-page="faq"] .mv2-info-section {
margin-bottom: var(--mv2-stack-6);
}
body[data-portal="public"][data-page="about"] .mv2-info-section:last-child,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section:last-child,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section:last-child,
body[data-portal="public"][data-page="faq"] .mv2-info-section:last-child {
margin-bottom: 0;
}
body[data-portal="public"][data-page="about"] .mv2-info-section h2,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section h2,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section h2,
body[data-portal="public"][data-page="faq"] .mv2-info-section h2 {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 400;
font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--mv2-ink);
margin: 0 0 var(--mv2-stack-3);
}
body[data-portal="public"][data-page="about"] .mv2-info-section p,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section p,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section p,
body[data-portal="public"][data-page="faq"] .mv2-info-section p {
font-size: 1rem;
line-height: 1.65;
color: var(--mv2-ink);
margin: 0 0 var(--mv2-stack-3);
}
body[data-portal="public"][data-page="about"] .mv2-info-section p:last-child,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section p:last-child,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section p:last-child,
body[data-portal="public"][data-page="faq"] .mv2-info-section p:last-child {
margin-bottom: 0;
}
body[data-portal="public"][data-page="about"] .mv2-info-section ul, .mv2-info-section ol,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section ul, .mv2-info-section ol,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section ul, .mv2-info-section ol,
body[data-portal="public"][data-page="faq"] .mv2-info-section ul, .mv2-info-section ol {
font-size: 1rem;
line-height: 1.7;
color: var(--mv2-ink);
padding-left: 1.4em;
margin: 0 0 var(--mv2-stack-3);
}
body[data-portal="public"][data-page="about"] .mv2-info-section li,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section li,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section li,
body[data-portal="public"][data-page="faq"] .mv2-info-section li {
margin-bottom: 0.4em;
}
body[data-portal="public"][data-page="about"] .mv2-info-section li::marker,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section li::marker,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section li::marker,
body[data-portal="public"][data-page="faq"] .mv2-info-section li::marker {
color: var(--mv2-gold);
}
body[data-portal="public"][data-page="about"] .mv2-info-section a,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section a,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section a,
body[data-portal="public"][data-page="faq"] .mv2-info-section a {
color: var(--mv2-brand-dark);
text-decoration: underline;
text-decoration-color: rgba(0, 106, 255, 0.35);
text-underline-offset: 3px;
transition: text-decoration-color var(--mv2-dur) var(--mv2-ease);
}
body[data-portal="public"][data-page="about"] .mv2-info-section a:hover, .mv2-info-section a:focus-visible,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section a:hover, .mv2-info-section a:focus-visible,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section a:hover, .mv2-info-section a:focus-visible,
body[data-portal="public"][data-page="faq"] .mv2-info-section a:hover, .mv2-info-section a:focus-visible {
text-decoration-color: var(--mv2-brand-dark);
outline: none;
}
body[data-portal="public"][data-page="about"] .mv2-info-section strong,
body[data-portal="public"][data-page="how-to-apply"] .mv2-info-section strong,
body[data-portal="public"][data-page="how-it-works"] .mv2-info-section strong,
body[data-portal="public"][data-page="faq"] .mv2-info-section strong {
font-weight: 600;
color: var(--mv2-ink);
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase 9.11 — Shared nav + footer mv2 refresh ║
║ Added: 2026-04-26 (DESIGN_EXTENSION_PLAN.md §9.11, agent_issues #41)║
║ ║
║ Both components hydrated by /js/components.js into every public ║
║ page. CSS scoped to [data-portal="public"] so admin / landlord ║
║ / tenant portals are unaffected. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Main desktop nav ──────────────────────────────────────────── */
[data-portal="public"] .mv2-nav {
background: rgba(255, 254, 251, 0.94);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--mv2-hairline);
}
[data-portal="public"] .mv2-nav-inner {
align-items: center;
}
[data-portal="public"] .mv2-nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--mv2-ink);
}
[data-portal="public"] .mv2-nav-logo-name {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 500;
font-size: 1.15rem;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--mv2-ink);
}
[data-portal="public"] .mv2-nav-logo-tagline {
font-family: var(--mv2-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mv2-muted-2);
margin-top: 1px;
}
/* ── Desktop nav links ─────────────────────────────────────────── */
[data-portal="public"] .mv2-nav-links {
display: flex;
align-items: center;
gap: 4px;
}
[data-portal="public"] .mv2-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--mv2-r-sm);
color: var(--mv2-ink);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.005em;
transition: background var(--mv2-dur) var(--mv2-ease),
color var(--mv2-dur) var(--mv2-ease);
}
[data-portal="public"] .mv2-nav-link:hover,
[data-portal="public"] .mv2-nav-link:focus-visible {
background: rgba(0, 106, 255, 0.06);
color: var(--mv2-brand-dark);
outline: none;
}
[data-portal="public"] .mv2-nav-link.active::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 2px;
height: 2px;
background: var(--mv2-gold);
border-radius: 2px;
}
[data-portal="public"] .mv2-nav-link--landlord {
background: rgba(212, 160, 23, 0.10);
color: #5A4416;
font-weight: 600;
}
[data-portal="public"] .mv2-nav-link--landlord:hover,
[data-portal="public"] .mv2-nav-link--landlord:focus-visible {
background: rgba(212, 160, 23, 0.18);
color: #4A3812;
}
/* ── Mobile drawer ─────────────────────────────────────────────── */
[data-portal="public"] .mv2-nav-drawer {
background: #FFFEFB;
}
[data-portal="public"] .mv2-nav-drawer-header {
border-bottom: 1px solid var(--mv2-hairline);
padding-bottom: 14px;
}
[data-portal="public"] .mv2-nav-drawer-link {
border-radius: var(--mv2-r-sm);
font-weight: 500;
transition: background var(--mv2-dur) var(--mv2-ease),
color var(--mv2-dur) var(--mv2-ease);
}
[data-portal="public"] .mv2-nav-drawer-link:hover,
[data-portal="public"] .mv2-nav-drawer-link:focus-visible {
background: rgba(0, 106, 255, 0.06);
color: var(--mv2-brand-dark);
outline: none;
}
[data-portal="public"] .mv2-nav-drawer-link.active {
background: rgba(212, 160, 23, 0.12);
color: #5A4416;
}
[data-portal="public"] .mv2-nav-drawer-link i {
color: var(--mv2-gold);
}
/* ── Footer ─────────────────────────────────────────────────────── */
[data-portal="public"] .mv2-footer {
background: var(--mv2-bg-warm);
border-top: 1px solid var(--mv2-hairline);
padding: clamp(48px, 7vw, 80px) 0 clamp(28px, 3vw, 40px);
position: relative;
}
[data-portal="public"] .mv2-footer::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 160, 23, 0.30) 50%,
transparent 100%);
}
[data-portal="public"] .mv2-footer-logo-text {
font-family: var(--mv2-display);
font-style: normal;
font-weight: 500;
font-size: 1.2rem;
letter-spacing: -0.005em;
color: var(--mv2-ink);
}
[data-portal="public"] .mv2-footer-desc {
color: var(--mv2-muted);
font-size: 0.92rem;
line-height: 1.6;
max-width: 32ch;
margin: 12px 0 16px;
}
[data-portal="public"] .mv2-footer-col-title {
font-family: var(--mv2-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--mv2-muted-2);
margin-bottom: 14px;
}
[data-portal="public"] .mv2-footer-link {
display: block;
color: var(--mv2-ink);
text-decoration: none;
font-size: 0.92rem;
padding: 4px 0;
transition: color var(--mv2-dur) var(--mv2-ease);
}
[data-portal="public"] .mv2-footer-link:hover,
[data-portal="public"] .mv2-footer-link:focus-visible {
color: var(--mv2-brand-dark);
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
[data-portal="public"] .mv2-footer-bottom {
border-top: 1px solid var(--mv2-hairline);
margin-top: clamp(36px, 5vw, 56px);
padding-top: 22px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-size: 0.82rem;
color: var(--mv2-muted-2);
}
[data-portal="public"] .mv2-footer-eq i {
color: var(--mv2-gold);
margin-right: 4px;
}
[data-portal="public"] .mv2-footer-bottom-links {
margin-left: auto;
display: flex;
gap: 18px;
}
[data-portal="public"] .mv2-footer-bottom-links a {
color: var(--mv2-muted);
text-decoration: none;
transition: color var(--mv2-dur) var(--mv2-ease);
}
[data-portal="public"] .mv2-footer-bottom-links a:hover,
[data-portal="public"] .mv2-footer-bottom-links a:focus-visible {
color: var(--mv2-brand-dark);
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
@media (max-width: 600px) {
[data-portal="public"] .mv2-footer-bottom-links {
margin-left: 0;
flex-basis: 100%;
}
}
/* ╚══════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════╗
║ Policy / legal page chrome — breadcrumb + sticky side TOC ║
║ Used by: policies, privacy, terms, fair-housing, *-policy pages ║
╚══════════════════════════════════════════════════════════════════╝ */
[data-portal="public"] .policy-breadcrumb {
font-size: 0.85rem;
color: var(--m-muted);
padding: 14px 0 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
font-family: 'Inter', system-ui, sans-serif;
}
[data-portal="public"] .policy-breadcrumb a {
color: var(--m-muted);
text-decoration: none;
transition: color .18s ease;
}
[data-portal="public"] .policy-breadcrumb a:hover,
[data-portal="public"] .policy-breadcrumb a:focus-visible {
color: var(--m-brand);
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
[data-portal="public"] .policy-breadcrumb .sep {
color: var(--m-soft);
user-select: none;
}
[data-portal="public"] .policy-breadcrumb [aria-current="page"] {
color: var(--m-text);
font-weight: 600;
}
/* Sticky right-side TOC, only on wide screens. Built dynamically by
/js/policy-toc.js — pages that already include their own .policy-toc
block are skipped by the script. */
[data-portal="public"] .policy-toc-side {
position: fixed;
top: 110px;
right: max(20px, calc((100vw - 1180px) / 2 - 220px));
width: 220px;
max-height: calc(100vh - 160px);
overflow-y: auto;
padding: 16px 18px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(15,23,42,.06);
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.82rem;
z-index: 5;
}
[data-portal="public"] .policy-toc-side h4 {
margin: 0 0 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--m-muted);
font-weight: 700;
}
[data-portal="public"] .policy-toc-side ol {
list-style: none;
margin: 0; padding: 0;
counter-reset: policy-toc-counter;
}
[data-portal="public"] .policy-toc-side li {
counter-increment: policy-toc-counter;
margin: 0 0 4px;
line-height: 1.4;
}
[data-portal="public"] .policy-toc-side a {
color: var(--m-muted);
text-decoration: none;
display: block;
padding: 5px 8px 5px 26px;
border-radius: 6px;
position: relative;
transition: background .15s ease, color .15s ease;
}
[data-portal="public"] .policy-toc-side a::before {
content: counter(policy-toc-counter);
position: absolute;
left: 6px; top: 5px;
font-size: 10px;
color: var(--m-soft);
font-variant-numeric: tabular-nums;
font-weight: 600;
}
[data-portal="public"] .policy-toc-side a:hover {
background: var(--m-brand-pale);
color: var(--m-brand-dark);
}
[data-portal="public"] .policy-toc-side a.is-active {
background: var(--m-brand-pale);
color: var(--m-brand-dark);
font-weight: 600;
}
[data-portal="public"] .policy-toc-side a.is-active::before {
color: var(--m-brand);
}
@media (max-width: 1280px) {
[data-portal="public"] .policy-toc-side { display: none; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L1 — Living Hero (Ken Burns + live activity chip) ║
║ Added: BATCH_01 of IMPLEMENTATION_PLAN.md ║
║ Scope: home page only (body[data-page="home"]) ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Slow Ken Burns drift on the hero photo ──────────────────────────── */
@keyframes mv2-kenburns {
0% { transform: scale(1.06) translate3d(0, 0, 0); }
50% { transform: scale(1.14) translate3d(-1.5%, -1.2%, 0); }
100% { transform: scale(1.06) translate3d(0, 0, 0); }
}
body[data-portal="public"][data-page="home"] .mv2-hero__bg-img {
animation: mv2-kenburns 28s ease-in-out infinite;
will-change: transform;
transform-origin: center 35%;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-hero__bg-img {
animation: none;
}
}
/* ── Live activity chip ─────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-hero__live {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 12px;
background: rgba(10, 23, 41, 0.42);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: saturate(160%) blur(8px);
-webkit-backdrop-filter: saturate(160%) blur(8px);
border-radius: 999px;
color: rgba(255, 255, 255, 0.96);
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.005em;
max-width: min(100%, 460px);
opacity: 0;
transform: translateY(6px);
transition: opacity 600ms ease, transform 600ms ease;
}
body[data-portal="public"][data-page="home"] .mv2-hero__live[data-ready="true"] {
opacity: 1;
transform: translateY(0);
}
body[data-portal="public"][data-page="home"] .mv2-hero__live-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(183, 241, 198, 0.18);
color: #B7F1C6;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
}
body[data-portal="public"][data-page="home"] .mv2-hero__live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #B7F1C6;
box-shadow: 0 0 0 0 rgba(183, 241, 198, 0.7);
animation: mv2-pulse 2.4s ease-out infinite;
display: inline-block;
}
body[data-portal="public"][data-page="home"] .mv2-hero__live-text {
display: inline-block;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1;
transition: opacity 350ms ease;
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-hero__live-dot { animation: none; }
body[data-portal="public"][data-page="home"] .mv2-hero__live { transition: none; }
body[data-portal="public"][data-page="home"] .mv2-hero__live-text { transition: none; }
}
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] .mv2-hero__live {
margin-top: 14px;
font-size: 0.82rem;
padding: 7px 12px 7px 10px;
gap: 8px;
}
body[data-portal="public"][data-page="home"] .mv2-hero__live-label {
font-size: 0.66rem;
padding: 2px 6px;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L2 — Mobile sticky search pill + full-screen sheet ║
║ Added: BATCH_02 of IMPLEMENTATION_PLAN.md ║
║ Scope: home page on viewports ≤768px only ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Sticky search pill (mobile only) ───────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-msearch-pill {
display: none;
position: fixed;
top: max(8px, env(safe-area-inset-top, 8px));
left: 12px;
right: 12px;
z-index: 1100; /* above #site-nav */
align-items: center;
gap: 12px;
padding: 12px 16px 12px 18px;
min-height: 52px;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border: 1px solid rgba(10, 23, 41, 0.08);
border-radius: 999px;
box-shadow: 0 12px 36px rgba(10, 23, 41, 0.18), 0 2px 6px rgba(10, 23, 41, 0.10);
color: var(--mv2-ink, #1f2937);
font-family: inherit;
font-size: 0.96rem;
font-weight: 500;
text-align: left;
cursor: pointer;
opacity: 0;
transform: translateY(-12px);
transition: opacity 240ms ease, transform 240ms ease;
pointer-events: none;
width: auto;
}
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] .mv2-msearch-pill {
display: inline-flex;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill[data-visible="true"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill__icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mv2-brand, #006AFF);
color: #fff;
font-size: 13px;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill__text {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(31, 41, 55, 0.78);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill__filters {
flex-shrink: 0;
font-size: 12px;
color: var(--mv2-muted-2, #6B7280);
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-msearch-pill { transition: none; }
}
/* ── Backdrop ───────────────────────────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 1190;
background: rgba(10, 23, 41, 0.45);
opacity: 0;
transition: opacity 220ms ease;
}
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet-backdrop {
display: block;
pointer-events: none;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
}
/* ── Full-screen sheet (slides down from top) ──────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1200;
background: #FFFFFF;
border-radius: 0 0 24px 24px;
box-shadow: 0 24px 60px rgba(10, 23, 41, 0.22);
padding: max(8px, env(safe-area-inset-top, 8px)) 16px 22px;
transform: translateY(-110%);
transition: transform 320ms cubic-bezier(0.32, 0.72, 0.16, 1);
max-height: 100dvh;
overflow-y: auto;
}
@media (max-width: 768px) {
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet {
display: block;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet[data-open="true"] {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet { transition: none; }
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__handle {
width: 44px;
height: 5px;
border-radius: 999px;
background: rgba(10, 23, 41, 0.14);
margin: 8px auto 14px;
cursor: grab;
touch-action: none;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px 14px;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__title {
font-family: "Fraunces", "Inter", serif;
font-style: normal;
font-weight: 600;
font-size: 1.35rem;
color: var(--mv2-ink, #1f2937);
margin: 0;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__close {
appearance: none;
border: 0;
background: rgba(10, 23, 41, 0.06);
color: var(--mv2-ink, #1f2937);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 2px;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field {
position: relative;
display: flex;
align-items: center;
background: var(--mv2-bg-warm, #FAF8F5);
border: 1px solid var(--mv2-hairline, #E5E7EB);
border-radius: var(--mv2-r-md, 12px);
min-height: 56px;
padding: 0 16px 0 46px;
transition: border-color 200ms ease, background 200ms ease;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field:focus-within {
border-color: var(--mv2-brand, #006AFF);
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(0, 106, 255, 0.10);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field > i {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--mv2-muted-2, #6B7280);
font-size: 15px;
pointer-events: none;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field input,
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field select {
flex: 1;
border: 0;
background: transparent;
font: inherit;
font-size: 1rem;
color: var(--mv2-ink, #1f2937);
outline: none;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__field select {
padding-right: 22px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
cursor: pointer;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__submit {
margin-top: 6px;
min-height: 56px;
border-radius: var(--mv2-r-md, 12px);
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L3 — Featured listings: horizontal snap-scroll on mobile ║
║ Added: BATCH_03 of IMPLEMENTATION_PLAN.md ║
║ Scope: home page, .featured-section .property-grid only ║
║ Desktop layout (≥541px) is unchanged. ║
╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 540px) {
body[data-portal="public"][data-page="home"] .featured-section .property-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
overflow-y: hidden;
gap: 12px;
padding: 4px 4px 14px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 4px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Bleed slightly past the .container padding so cards reach the edge */
margin-inline: calc(var(--m-s-4, 16px) * -1);
padding-inline: var(--m-s-4, 16px);
scroll-padding-left: var(--m-s-4, 16px);
/* Hide scrollbar but keep functionality */
scrollbar-width: none;
-ms-overflow-style: none;
}
body[data-portal="public"][data-page="home"] .featured-section .property-grid::-webkit-scrollbar {
display: none;
}
body[data-portal="public"][data-page="home"] .featured-section .property-grid > .property-card {
flex: 0 0 78vw;
max-width: 320px;
scroll-snap-align: start;
scroll-snap-stop: always;
/* Override the entrance translate so cards always render visible
in the rail (the IntersectionObserver-driven cp-card-visible
trigger may not fire reliably for off-screen rail cards). */
opacity: 1;
transform: none;
}
/* Subtle right-edge fade hint that there's more to scroll */
body[data-portal="public"][data-page="home"] .featured-section .mv2-featured__container,
body[data-portal="public"][data-page="home"] .featured-section .container {
position: relative;
}
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .featured-section .property-grid {
scroll-behavior: auto;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L4 — Save-without-signup nudge + heart pulse (BATCH_04) ║
║ Scope: global (works on home, listings, property pages) ║
╚══════════════════════════════════════════════════════════════════════╝ */
@keyframes cp-heart-pulse {
0% { transform: scale(1); }
35% { transform: scale(1.28); }
60% { transform: scale(0.94); }
100% { transform: scale(1); }
}
.cp-heart-pulse { animation: cp-heart-pulse 600ms cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
.cp-heart-pulse { animation: none; }
}
.cp-saved-nudge {
position: fixed;
left: 16px;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
z-index: 10050;
pointer-events: none;
opacity: 0;
transform: translateY(16px);
transition: opacity 280ms cubic-bezier(.22,1,.36,1),
transform 280ms cubic-bezier(.22,1,.36,1);
display: flex;
justify-content: center;
}
.cp-saved-nudge--in { opacity: 1; transform: translateY(0); }
.cp-saved-nudge__inner {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 420px;
padding: 12px 12px 12px 14px;
background: #ffffff;
color: #1f2937;
border: 1px solid rgba(15,23,42,0.08);
border-radius: 14px;
box-shadow:
0 12px 32px -8px rgba(15,23,42,0.18),
0 4px 12px -4px rgba(15,23,42,0.10);
}
.cp-saved-nudge__icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fee2e2;
color: #e11d48;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.cp-saved-nudge__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
font-size: 13px;
line-height: 1.35;
}
.cp-saved-nudge__text strong {
font-size: 13.5px;
font-weight: 600;
color: #0f172a;
}
.cp-saved-nudge__text span {
color: #475569;
font-size: 12px;
}
.cp-saved-nudge__cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 14px;
border-radius: 9px;
background: #006aff;
color: #fff !important;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 180ms ease, transform 180ms ease;
}
.cp-saved-nudge__cta:hover { background: #0056d6; }
.cp-saved-nudge__cta:active { transform: scale(0.97); }
.cp-saved-nudge__close {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 180ms ease, color 180ms ease;
}
.cp-saved-nudge__close:hover { background: #f1f5f9; color: #0f172a; }
/* Lift above the bottom mobile CTA bar if it's present */
body:has(#mobile-cta) .cp-saved-nudge {
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) {
.cp-saved-nudge {
left: auto;
right: 24px;
bottom: 24px;
justify-content: flex-end;
}
.cp-saved-nudge__inner { width: 380px; }
body:has(#mobile-cta) .cp-saved-nudge { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.cp-saved-nudge { transition: opacity 1ms; transform: none; }
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L5 — Editorial typography pass (BATCH_05) ║
║ Scope: body[data-portal="public"][data-page="home"] ║
║ ║
║ Now that the Fraunces upright axis is loaded, display headlines ║
║ actually render in Fraunces (previously fell back to Georgia). ║
║ This block tightens tracking, sets optical sizing, refines ║
║ eyebrows toward an "editorial / architectural" register. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Display headlines: real Fraunces with proper optical sizing ──── */
body[data-portal="public"][data-page="home"] .mv2-headline,
body[data-portal="public"][data-page="home"] .featured-title,
body[data-portal="public"][data-page="home"] h2.mv2-headline--md {
font-family: 'Fraunces', 'Georgia', 'Times New Roman', serif;
font-optical-sizing: auto;
font-variation-settings: 'opsz' 96, 'SOFT' 50;
letter-spacing: -0.022em;
line-height: 1.05;
text-wrap: balance;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The featured section headline was Inter 800 — promote to Fraunces 500
to unify the editorial voice. Slightly larger to earn the lighter weight. */
body[data-portal="public"][data-page="home"] .featured-title {
font-weight: 500;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.08;
margin-bottom: 6px;
}
/* Gold accent words in home headlines — bold Fraunces + gold underline. */
body[data-portal="public"][data-page="home"] .mv2-headline em,
body[data-portal="public"][data-page="home"] .featured-title em {
font-style: normal;
font-weight: 700;
font-variation-settings: 'opsz' 96, 'SOFT' 50, 'WONK' 0;
letter-spacing: -0.015em;
color: var(--mv2-gold);
text-decoration: underline;
text-decoration-color: rgba(212, 160, 23, 0.40);
text-underline-offset: 5px;
text-decoration-thickness: 2px;
}
/* ── Eyebrows: more tracking + slightly heavier; signals "editorial" ── */
body[data-portal="public"][data-page="home"] .mv2-eyebrow {
font-weight: 600;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-feature-settings: 'tnum' 1;
}
/* The decorative rule before the eyebrow — extend & soften */
body[data-portal="public"][data-page="home"] .mv2-eyebrow::before {
width: 24px;
opacity: 0.85;
}
/* ── Lede: more reading rhythm ───────────────────────────────────── */
body[data-portal="public"][data-page="home"] .mv2-lede {
line-height: 1.55;
letter-spacing: -0.001em;
max-width: 56ch;
}
/* ── Section subtitles (under section headlines) — softer color, italic
small-caps tracking is too much; just tighten the lede-style tone. */
body[data-portal="public"][data-page="home"] .featured-subtitle {
font-size: 15px;
line-height: 1.5;
color: var(--m-muted-2);
letter-spacing: -0.001em;
}
/* ── Mobile: pull headline size down a touch so the editorial face
reads as confident rather than cramped at small widths. */
@media (max-width: 540px) {
body[data-portal="public"][data-page="home"] .mv2-hero .mv2-headline {
font-size: clamp(2rem, 7vw, 2.5rem);
letter-spacing: -0.024em;
}
body[data-portal="public"][data-page="home"] .featured-title {
font-size: clamp(26px, 6.5vw, 32px);
}
body[data-portal="public"][data-page="home"] .mv2-eyebrow {
font-size: 0.68rem;
letter-spacing: 0.16em;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L6 — Backdrop-blur sticky nav refinement (BATCH_06) ║
║ Scope: body[data-portal="public"][data-page="home"] ║
║ ║
║ Two-state sticky nav: at the very top the nav is more transparent ║
║ so the hero photo subtly bleeds through; once the user starts to ║
║ scroll, the nav frosts up, gains a hairline, and lifts with a soft ║
║ shadow. iOS "scroll edge" feel. ║
║ Body attribute toggled by /js/cp-scroll-nav.js. ║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .mv2-nav,
body[data-portal="public"][data-page="home"] .nav {
transition:
background-color 280ms cubic-bezier(.22,1,.36,1),
border-bottom-color 280ms cubic-bezier(.22,1,.36,1),
box-shadow 280ms cubic-bezier(.22,1,.36,1),
-webkit-backdrop-filter 280ms cubic-bezier(.22,1,.36,1),
backdrop-filter 280ms cubic-bezier(.22,1,.36,1);
will-change: background-color;
}
/* ── Default (no JS yet / pre-toggle) — same as scrolled, safe contrast */
body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .mv2-nav,
body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .nav {
background: rgba(255, 254, 251, 0.94);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
}
/* ── Top state: at-rest over the hero photo ─────────────────────── */
body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .mv2-nav,
body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .nav {
background: rgba(255, 254, 251, 0.78);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom-color: transparent;
box-shadow: none;
}
/* ── Scrolled state: lifted, fully frosted, hairline visible ──── */
body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .mv2-nav,
body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .nav {
background: rgba(255, 254, 251, 0.96);
-webkit-backdrop-filter: saturate(190%) blur(16px);
backdrop-filter: saturate(190%) blur(16px);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.02),
0 6px 18px -12px rgba(0, 0, 0, 0.10);
}
@media (prefers-reduced-motion: reduce) {
body[data-portal="public"][data-page="home"] .mv2-nav,
body[data-portal="public"][data-page="home"] .nav {
transition: none;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L7 — Warm dark mode (BATCH_07) ║
║ Scope: body[data-portal="public"][data-page="home"] ║
║ ║
║ Activates only when the OS reports prefers-color-scheme: dark. ║
║ No user toggle yet — pure system-preference response. ║
║ Warm dark (mahogany / espresso) — never pure black — to keep the ║
║ editorial / architectural feel. Brand blue + gold preserved as ║
║ accent moments. Hero (photo + dark overlay) needs no changes. ║
╚══════════════════════════════════════════════════════════════════════╝ */
@media (prefers-color-scheme: dark) {
/* ── Token redefinition (both --m-* and --mv2-* token systems) ─── */
body[data-portal="public"][data-page="home"] {
color-scheme: dark;
/* legacy --m-* */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239; /* deep ink-blue swap */
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
}
/* Page background */
body[data-portal="public"][data-page="home"] {
background: #0e0c08;
color: #f5f1e8;
}
/* ── Property card image placeholder — slightly lighter than card */
body[data-portal="public"][data-page="home"] .property-card-img {
background: #2a221b;
}
/* Save/share buttons on cards — light frosted on dark */
body[data-portal="public"][data-page="home"] .property-card-save,
body[data-portal="public"][data-page="home"] .property-card-share {
background: rgba(20, 16, 12, 0.78);
border-color: rgba(245, 241, 232, 0.20);
color: #f5f1e8;
}
body[data-portal="public"][data-page="home"] .property-card-save:hover,
body[data-portal="public"][data-page="home"] .property-card-share:hover {
background: rgba(20, 16, 12, 0.92);
}
body[data-portal="public"][data-page="home"] .property-card-save.saved {
color: #f87171;
}
/* ── Nav (overrides Phase L6 frosted bg for dark) ──────────────── */
body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .mv2-nav,
body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .nav,
body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .mv2-nav,
body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .nav {
background: rgba(14, 12, 8, 0.86);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: rgba(245, 241, 232, 0.10);
}
body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .mv2-nav,
body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .nav {
background: rgba(14, 12, 8, 0.55);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom-color: transparent;
}
/* Mobile search pill — dark frosted */
body[data-portal="public"][data-page="home"] .mv2-msearch-pill {
background: rgba(20, 16, 12, 0.92);
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.10);
box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill__icon {
color: #b8aea0;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-pill__filters {
color: #9b9183;
}
/* Mobile search sheet — dark surface */
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet {
background: #181410;
color: #f5f1e8;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__title { color: #f5f1e8; }
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__handle {
background: rgba(245, 241, 232, 0.20);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet input,
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet select {
background: #0e0c08;
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.12);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet input::placeholder {
color: #6e6759;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__close {
color: #b8aea0;
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__close:hover {
background: rgba(245, 241, 232, 0.06);
color: #f5f1e8;
}
/* Saved nudge — dark variant */
body[data-portal="public"][data-page="home"] .cp-saved-nudge__inner {
background: #181410;
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.10);
box-shadow:
0 12px 32px -8px rgba(0,0,0,.55),
0 4px 12px -4px rgba(0,0,0,.35);
}
body[data-portal="public"][data-page="home"] .cp-saved-nudge__icon {
background: rgba(248, 113, 113, 0.18);
color: #f87171;
}
body[data-portal="public"][data-page="home"] .cp-saved-nudge__text strong { color: #f5f1e8; }
body[data-portal="public"][data-page="home"] .cp-saved-nudge__text span { color: #b8aea0; }
body[data-portal="public"][data-page="home"] .cp-saved-nudge__close { color: #9b9183; }
body[data-portal="public"][data-page="home"] .cp-saved-nudge__close:hover {
background: rgba(245, 241, 232, 0.06);
color: #f5f1e8;
}
/* Live hero chip & lede — keep readable over photo (already photo-dark) */
body[data-portal="public"][data-page="home"] .mv2-hero__live {
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
}
/* Skeleton shimmer — darker base */
body[data-portal="public"][data-page="home"] .property-card.skeleton,
body[data-portal="public"][data-page="home"] .skeleton-shimmer {
background: linear-gradient(90deg, #1f1812 25%, #2a221b 50%, #1f1812 75%);
}
/* Heart pulse accent fill on dark */
body[data-portal="public"][data-page="home"] .property-card-save.saved .fa-heart {
color: #f87171;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Phase L8 — Skeleton-screen primitives (BATCH_08) ║
║ ║
║ Two reusable affordances that replace mechanical spinners site- ║
║ wide with a calmer, type-led shimmer language: ║
║ • .cp-shimmer-bar — slim animated horizontal bar (used in ║
║ pull-to-refresh + the "still loading" featured-grid fallback). ║
║ • .cp-loading-still — the typographic "Still gathering…" row ║
║ that appears under the featured grid when the fetch is slow. ║
║ ║
║ Honors prefers-reduced-motion (no shimmer translation). ║
║ Dark-mode variants inherit from L7 token redefinition. ║
╚══════════════════════════════════════════════════════════════════════╝ */
/* Shimmer bar primitive — 3px tall, 240px wide track, 60px traveler */
.cp-shimmer-bar {
display: inline-block;
position: relative;
width: 240px;
max-width: 60vw;
height: 3px;
border-radius: 999px;
background: rgba(10, 23, 41, 0.06);
overflow: hidden;
vertical-align: middle;
}
.cp-shimmer-bar::after {
content: "";
position: absolute;
inset: 0;
width: 60px;
border-radius: inherit;
background: linear-gradient(
90deg,
transparent 0%,
var(--mv2-accent, #d4a017) 50%,
transparent 100%
);
opacity: 0.85;
animation: cp-shimmer-bar-travel 1.6s cubic-bezier(.4,0,.2,1) infinite;
will-change: transform;
}
@keyframes cp-shimmer-bar-travel {
0% { transform: translateX(-60px); }
100% { transform: translateX(240px); }
}
@media (prefers-reduced-motion: reduce) {
.cp-shimmer-bar::after {
animation: none;
transform: translateX(90px); /* park it center-ish */
opacity: 0.55;
}
}
/* Pull-to-refresh tweaks — make the bar inline with the label */
.ptr {
gap: 10px;
}
.ptr .cp-shimmer-bar {
width: 90px;
max-width: 90px;
}
/* "Still gathering listings…" row under the featured grid */
.cp-loading-still {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 24px 24px 8px;
color: var(--mv2-muted, #6b7280);
font-size: 0.92rem;
font-family: var(--mv2-font-body, inherit);
letter-spacing: 0.01em;
animation: cp-loading-still-fade 240ms ease-out both;
}
.cp-loading-still__text {
opacity: 0.92;
}
@keyframes cp-loading-still-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cp-loading-still { animation: none; }
}
/* Dark-mode override for the shimmer track (the traveler picks up
--mv2-accent which is already lightened in L7). */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="home"] .cp-shimmer-bar {
background: rgba(245, 241, 232, 0.10);
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════════════════════════════════════════════════╗
║ Featured listings: VERTICAL stack on the homepage (all breakpoints) ║
║ Overrides: L1062/L1074/L1077 grid + L5636 mobile horizontal rail. ║
║ Scope: home page only (body[data-page="home"]) → listings.html and ║
║ property.html grids are unaffected. ║
╚══════════════════════════════════════════════════════════════════════╝ */
body[data-portal="public"][data-page="home"] .featured-section .property-grid,
body[data-portal="public"][data-page="home"] .mv2-featured .property-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--m-s-4, 16px);
overflow: visible !important;
overflow-x: visible !important;
scroll-snap-type: none !important;
margin-inline: 0 !important;
padding: 0 !important;
scroll-padding-inline: 0 !important;
scroll-padding-left: 0 !important;
}
body[data-portal="public"][data-page="home"] .featured-section .property-grid > .property-card,
body[data-portal="public"][data-page="home"] .mv2-featured .property-grid > .property-card {
flex: initial !important;
width: 100% !important;
max-width: none !important;
scroll-snap-align: none !important;
scroll-snap-stop: normal !important;
opacity: 1;
transform: none;
}
@media (min-width: 540px) {
body[data-portal="public"][data-page="home"] .featured-section .property-grid,
body[data-portal="public"][data-page="home"] .mv2-featured .property-grid {
grid-template-columns: 1fr !important;
gap: var(--m-s-5, 24px);
}
body[data-portal="public"][data-page="home"] .featured-section .property-grid > .property-card,
body[data-portal="public"][data-page="home"] .mv2-featured .property-grid > .property-card {
/* Cap card width on wider screens so a single-column stack doesn't
stretch to ridiculous proportions on desktop. Centered in the column. */
max-width: 720px !important;
margin-inline: auto !important;
}
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */
/* ── Homepage unification (April 29 2026) ─────────────────────────────
Replaces ad-hoc inline style="" from index.html with tokenized
utility + skeleton modifier classes. Public homepage stays on the
marketing token system (--m-*); empty-state, .btn .btn-primary, and
.why-cta-btn already exist above and use those tokens.
─────────────────────────────────────────────────────────────────────── */
.ta-center { text-align: center; }
.property-card-body--skeleton { gap: 10px; padding: 20px; }
/* ════════════════════════════════════════════════════════════════════════════ *
* PHASE 9.5 — Comprehensive homepage dark theme: explicit toggle + gap fills
* ────────────────────────────────────────────────────────────────────────────
* Triggers below: (a) @media (prefers-color-scheme: dark) and
* (b) html[data-theme="dark"]
*
* The existing @media block earlier in this file remains untouched (provides
* baseline OS-level dark mode for nav, hero chip, search pill, cards). This
* addendum adds:
* 1. A complete mirror of that block scoped to html[data-theme="dark"], so
* a manual theme toggle works without depending on OS preference.
* 2. NEW dark-mode rules for previously uncovered sections: cities,
* featured-section chrome, how-it-works, testimonials, stats bar,
* final-cta, mobile sticky bars, footer, ghost buttons, empty state,
* property-card body, trust-block items, why-section.
*
* Most other components already use var(--m-*) / var(--mv2-*) tokens and
* auto-adapt via the token redefinition below.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
PART 1 — Mirror of existing dark @media block, scoped to html[data-theme="dark"]
(Token redefinitions + element overrides for nav, search pill/sheet, cards,
saved-listing nudge, skeletons, etc.)
───────────────────────────────────────────────────────────────────────────── */
/* ── Token redefinition (both --m-* and --mv2-* token systems) ─── */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] {
color-scheme: dark;
/* legacy --m-* */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239; /* deep ink-blue swap */
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
}
/* Page background */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] {
background: #0e0c08;
color: #f5f1e8;
}
/* ── Property card image placeholder — slightly lighter than card */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-img {
background: #2a221b;
}
/* Save/share buttons on cards — light frosted on dark */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-save,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-share {
background: rgba(20, 16, 12, 0.78);
border-color: rgba(245, 241, 232, 0.20);
color: #f5f1e8;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-save:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-share:hover {
background: rgba(20, 16, 12, 0.92);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-save.saved {
color: #f87171;
}
/* ── Nav (overrides Phase L6 frosted bg for dark) ──────────────── */
html[data-theme="dark"] body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .mv2-nav,
html[data-theme="dark"] body[data-portal="public"][data-page="home"]:not([data-mv2-scrolled]) .nav,
html[data-theme="dark"] body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .mv2-nav,
html[data-theme="dark"] body[data-portal="public"][data-page="home"][data-mv2-scrolled="true"] .nav {
background: rgba(14, 12, 8, 0.86);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: rgba(245, 241, 232, 0.10);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .mv2-nav,
html[data-theme="dark"] body[data-portal="public"][data-page="home"][data-mv2-scrolled="false"] .nav {
background: rgba(14, 12, 8, 0.55);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom-color: transparent;
}
/* Mobile search pill — dark frosted */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-pill {
background: rgba(20, 16, 12, 0.92);
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.10);
box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-pill__icon {
color: #b8aea0;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-pill__filters {
color: #9b9183;
}
/* Mobile search sheet — dark surface */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet {
background: #181410;
color: #f5f1e8;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__title { color: #f5f1e8; }
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__handle {
background: rgba(245, 241, 232, 0.20);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet input,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet select {
background: #0e0c08;
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.12);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet input::placeholder {
color: #6e6759;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__close {
color: #b8aea0;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__close:hover {
background: rgba(245, 241, 232, 0.06);
color: #f5f1e8;
}
/* Saved nudge — dark variant */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__inner {
background: #181410;
color: #f5f1e8;
border-color: rgba(245, 241, 232, 0.10);
box-shadow:
0 12px 32px -8px rgba(0,0,0,.55),
0 4px 12px -4px rgba(0,0,0,.35);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__icon {
background: rgba(248, 113, 113, 0.18);
color: #f87171;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__text strong { color: #f5f1e8; }
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__text span { color: #b8aea0; }
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__close { color: #9b9183; }
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-saved-nudge__close:hover {
background: rgba(245, 241, 232, 0.06);
color: #f5f1e8;
}
/* Live hero chip & lede — keep readable over photo (already photo-dark) */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hero__live {
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
}
/* Skeleton shimmer — darker base */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card.skeleton,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .skeleton-shimmer {
background: linear-gradient(90deg, #1f1812 25%, #2a221b 50%, #1f1812 75%);
}
/* Heart pulse accent fill on dark */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-save.saved .fa-heart {
color: #f87171;
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .cp-shimmer-bar {
background: rgba(245, 241, 232, 0.10);
}
/* ─────────────────────────────────────────────────────────────────────────────
PART 2 — Gap-fill rules for previously uncovered sections, applied under
html[data-theme="dark"] (explicit toggle).
───────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hero__search-field:focus-within {
background: rgba(24, 20, 16, 0.96) !important; box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.20);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__header {
border-bottom-color: rgba(245, 241, 232, 0.10);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .trust-strip {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .trust-strip__item {
color: var(--m-muted); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-cities {
background: var(--m-bg);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible {
background: var(--m-surface); border-color: var(--mv2-accent); color: var(--mv2-accent); box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover .mv2-cities__icon,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible .mv2-cities__icon {
background: rgba(244, 210, 122, 0.12); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hiw {
background: var(--m-bg);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hiw__bubble {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hiw__bubble.is-active,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-hiw__step.is-active .mv2-hiw__bubble {
background: var(--mv2-accent); border-color: var(--mv2-accent); color: #1a1610; box-shadow: 0 8px 24px rgba(244, 210, 122, 0.28);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonials {
background: var(--m-bg);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonial {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonial:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonial__quote {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonial__name {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-testimonial__role {
color: var(--m-muted);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-avatar {
color: var(--mv2-accent); background: rgba(244, 210, 122, 0.16); border-color: rgba(244, 210, 122, 0.28);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .stats-bar {
background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-surface-2) 100%); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .stats-bar .stat-value,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .stats-bar .stat-number {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .stats-bar .stat-label {
color: var(--m-muted);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-finalcta__bg {
background: radial-gradient(ellipse at top, rgba(244, 210, 122, 0.12) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(0, 106, 255, 0.10) 0%, transparent 60%), linear-gradient(180deg, var(--m-bg) 0%, #1a1610 100%);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mobile-cta-bar {
background: rgba(20, 16, 12, 0.92); border-top-color: rgba(245, 241, 232, 0.10); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mobile-cta-bar .mcta-ghost {
background: var(--m-surface-2); color: var(--m-ink); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-mcta {
background: rgba(20, 16, 12, 0.92); border-top-color: rgba(245, 241, 232, 0.10); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer {
background: #0a0806; color: rgba(245, 241, 232, 0.72);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer a,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer .footer-link,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer a,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-link {
color: rgba(245, 241, 232, 0.72);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer a:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer .footer-link:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer a:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-link:hover {
color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer .footer-col-title,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-col-title,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer-col-title,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer-col-title {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .footer .footer-bottom,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-bottom {
border-top-color: rgba(245, 241, 232, 0.10);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-btn--ghost:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-btn--ghost:focus-visible {
background: var(--m-surface); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-featured__cta a,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-featured__cta .btn-secondary {
color: var(--mv2-accent); border-color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-trustblock__item {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .mv2-trustblock__icon {
background: rgba(244, 210, 122, 0.12); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .empty-state-icon {
background: rgba(244, 210, 122, 0.10); border-color: rgba(244, 210, 122, 0.22); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-body {
background: transparent; color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-features,
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .property-card-features li {
color: var(--m-muted);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .why-section {
background: linear-gradient(180deg, #0a0806 0%, #181410 100%);
}
html[data-theme="dark"] body[data-portal="public"][data-page="home"] .section-eyebrow {
background: rgba(0, 106, 255, 0.16); color: #4d9aff;
}
/* ─────────────────────────────────────────────────────────────────────────────
PART 3 — Same gap-fill rules under @media (prefers-color-scheme: dark) so
visitors with OS-level dark mode see them too.
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="home"] .mv2-hero__search-field:focus-within {
background: rgba(24, 20, 16, 0.96) !important; box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.20);
}
body[data-portal="public"][data-page="home"] .mv2-msearch-sheet__header {
border-bottom-color: rgba(245, 241, 232, 0.10);
}
body[data-portal="public"][data-page="home"] .trust-strip {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .trust-strip__item {
color: var(--m-muted); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .mv2-cities {
background: var(--m-bg);
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover,
body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible {
background: var(--m-surface); border-color: var(--mv2-accent); color: var(--mv2-accent); box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
body[data-portal="public"][data-page="home"] .mv2-cities__pill:hover .mv2-cities__icon,
body[data-portal="public"][data-page="home"] .mv2-cities__pill:focus-visible .mv2-cities__icon {
background: rgba(244, 210, 122, 0.12); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .mv2-hiw {
background: var(--m-bg);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .mv2-hiw__bubble.is-active,
body[data-portal="public"][data-page="home"] .mv2-hiw__step.is-active .mv2-hiw__bubble {
background: var(--mv2-accent); border-color: var(--mv2-accent); color: #1a1610; box-shadow: 0 8px 24px rgba(244, 210, 122, 0.28);
}
body[data-portal="public"][data-page="home"] .mv2-testimonials {
background: var(--m-bg);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__quote {
color: var(--m-ink);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__name {
color: var(--m-ink);
}
body[data-portal="public"][data-page="home"] .mv2-testimonial__role {
color: var(--m-muted);
}
body[data-portal="public"][data-page="home"] .mv2-avatar {
color: var(--mv2-accent); background: rgba(244, 210, 122, 0.16); border-color: rgba(244, 210, 122, 0.28);
}
body[data-portal="public"][data-page="home"] .stats-bar {
background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-surface-2) 100%); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .stats-bar .stat-value,
body[data-portal="public"][data-page="home"] .stats-bar .stat-number {
color: var(--m-ink);
}
body[data-portal="public"][data-page="home"] .stats-bar .stat-label {
color: var(--m-muted);
}
body[data-portal="public"][data-page="home"] .mv2-finalcta__bg {
background: radial-gradient(ellipse at top, rgba(244, 210, 122, 0.12) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(0, 106, 255, 0.10) 0%, transparent 60%), linear-gradient(180deg, var(--m-bg) 0%, #1a1610 100%);
}
body[data-portal="public"][data-page="home"] .mobile-cta-bar {
background: rgba(20, 16, 12, 0.92); border-top-color: rgba(245, 241, 232, 0.10); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
}
body[data-portal="public"][data-page="home"] .mobile-cta-bar .mcta-ghost {
background: var(--m-surface-2); color: var(--m-ink); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .mv2-mcta {
background: rgba(20, 16, 12, 0.92); border-top-color: rgba(245, 241, 232, 0.10); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}
body[data-portal="public"][data-page="home"] .footer {
background: #0a0806; color: rgba(245, 241, 232, 0.72);
}
body[data-portal="public"][data-page="home"] .footer a,
body[data-portal="public"][data-page="home"] .footer .footer-link,
body[data-portal="public"][data-page="home"] .mv2-footer a,
body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-link {
color: rgba(245, 241, 232, 0.72);
}
body[data-portal="public"][data-page="home"] .footer a:hover,
body[data-portal="public"][data-page="home"] .footer .footer-link:hover,
body[data-portal="public"][data-page="home"] .mv2-footer a:hover,
body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-link:hover {
color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .footer .footer-col-title,
body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-col-title,
body[data-portal="public"][data-page="home"] .footer-col-title,
body[data-portal="public"][data-page="home"] .mv2-footer-col-title {
color: var(--m-ink);
}
body[data-portal="public"][data-page="home"] .footer .footer-bottom,
body[data-portal="public"][data-page="home"] .mv2-footer .mv2-footer-bottom {
border-top-color: rgba(245, 241, 232, 0.10);
}
body[data-portal="public"][data-page="home"] .mv2-btn--ghost:hover,
body[data-portal="public"][data-page="home"] .mv2-btn--ghost:focus-visible {
background: var(--m-surface); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .mv2-featured__cta a,
body[data-portal="public"][data-page="home"] .mv2-featured__cta .btn-secondary {
color: var(--mv2-accent); border-color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__item {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="home"] .mv2-trustblock__icon {
background: rgba(244, 210, 122, 0.12); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .empty-state-icon {
background: rgba(244, 210, 122, 0.10); border-color: rgba(244, 210, 122, 0.22); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="home"] .property-card-body {
background: transparent; color: var(--m-text);
}
body[data-portal="public"][data-page="home"] .property-card-features,
body[data-portal="public"][data-page="home"] .property-card-features li {
color: var(--m-muted);
}
body[data-portal="public"][data-page="home"] .why-section {
background: linear-gradient(180deg, #0a0806 0%, #181410 100%);
}
body[data-portal="public"][data-page="home"] .section-eyebrow {
background: rgba(0, 106, 255, 0.16); color: #4d9aff;
}
}
/* ════════════════════════════════════════════════════════════════════════════ *
* PHASE 9.6 — Dark theme rollout: listings.html + property.html
* ────────────────────────────────────────────────────────────────────────────
* Same dual-trigger approach as Phase 9.5 (homepage):
* - @media (prefers-color-scheme: dark) (OS-level)
* - html[data-theme="dark"] (manual toggle)
*
* Each page first redefines the --m-* / --mv2-* tokens to dark values, so
* every component already using those tokens (the majority of styles in
* cp-marketing.css scoped to these pages) auto-adapts. Then a focused set
* of element overrides patches the components that were authored with
* hardcoded light values (search field, filter bar, listings-section bg,
* detail-section, amenity-item, apply-card body, landlord avatar text, etc.).
*
* Components that were *intentionally* dark in light mode (lightbox,
* mosaic gallery, apply-card-header navy gradient, mobile-apply-bar) are
* deliberately untouched — they already read correctly in either theme.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── Token redefinition: listings.html (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
/* ─── Token redefinition: listings.html (OS prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="listings"] {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
}
/* ─── Element overrides: listings.html (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-listings-section {
background: var(--m-bg);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-listings-header__bg {
background:
radial-gradient(ellipse at top left, rgba(244, 210, 122, 0.08) 0%, transparent 55%),
linear-gradient(180deg, var(--mv2-bg-warm) 0%, var(--mv2-bg-warm-2) 100%);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-listings-header {
border-bottom-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-search-field {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-search-field:focus-within {
background: var(--m-surface-2); box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.20); border-color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-search-field input,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-search-field select {
background: transparent; color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-search-field input::placeholder {
color: var(--m-muted-2);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-filter-bar,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-bar {
background: var(--m-bg); border-bottom-color: var(--m-border); box-shadow: 0 1px 0 var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-chip,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-filter-chip {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-chip:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-filter-chip:hover,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-chip.active,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .mv2-filter-chip.active {
background: var(--m-surface-2); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-dropdown,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-dropdown-wrap > .filter-dropdown {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-dropdown input,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-dropdown select,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-dropdown textarea {
background: var(--m-bg); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .filter-count {
background: var(--mv2-accent); color: #1a1610;
}
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .toast-container .toast,
html[data-theme="dark"] body[data-portal="public"][data-page="listings"] .toast {
background: var(--m-surface); color: var(--m-text); border-color: var(--m-border);
}
/* ─── Element overrides: listings.html (OS prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="listings"] .mv2-listings-section {
background: var(--m-bg);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header__bg {
background:
radial-gradient(ellipse at top left, rgba(244, 210, 122, 0.08) 0%, transparent 55%),
linear-gradient(180deg, var(--mv2-bg-warm) 0%, var(--mv2-bg-warm-2) 100%);
}
body[data-portal="public"][data-page="listings"] .mv2-listings-header {
border-bottom-color: var(--m-border);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field:focus-within {
background: var(--m-surface-2); box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.20); border-color: var(--mv2-accent);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field input,
body[data-portal="public"][data-page="listings"] .mv2-search-field select {
background: transparent; color: var(--m-text);
}
body[data-portal="public"][data-page="listings"] .mv2-search-field input::placeholder {
color: var(--m-muted-2);
}
body[data-portal="public"][data-page="listings"] .mv2-filter-bar,
body[data-portal="public"][data-page="listings"] .filter-bar {
background: var(--m-bg); border-bottom-color: var(--m-border); box-shadow: 0 1px 0 var(--m-border);
}
body[data-portal="public"][data-page="listings"] .filter-chip,
body[data-portal="public"][data-page="listings"] .mv2-filter-chip {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="listings"] .filter-chip:hover,
body[data-portal="public"][data-page="listings"] .mv2-filter-chip:hover,
body[data-portal="public"][data-page="listings"] .filter-chip.active,
body[data-portal="public"][data-page="listings"] .mv2-filter-chip.active {
background: var(--m-surface-2); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="listings"] .filter-dropdown,
body[data-portal="public"][data-page="listings"] .filter-dropdown-wrap > .filter-dropdown {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
body[data-portal="public"][data-page="listings"] .filter-dropdown input,
body[data-portal="public"][data-page="listings"] .filter-dropdown select,
body[data-portal="public"][data-page="listings"] .filter-dropdown textarea {
background: var(--m-bg); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="listings"] .filter-count {
background: var(--mv2-accent); color: #1a1610;
}
body[data-portal="public"][data-page="listings"] .toast-container .toast,
body[data-portal="public"][data-page="listings"] .toast {
background: var(--m-surface); color: var(--m-text); border-color: var(--m-border);
}
}
/* ─── Token redefinition: property.html (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"][data-page="property"] {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
/* ─── Token redefinition: property.html (OS prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="property"] {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
}
/* ─── Element overrides: property.html (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-main {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-section {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-section-title,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-title,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-price {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-address,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-meta-row,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-desc {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-meta-item {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-meta-item:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 4px 16px rgba(244, 210, 122, 0.10);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-meta-icon {
background: rgba(244, 210, 122, 0.10); border-color: rgba(244, 210, 122, 0.22); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tabs-wrap,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tabs {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tab {
color: var(--m-muted); border-bottom-color: transparent;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tab.active,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tab[aria-selected="true"] {
color: var(--mv2-accent); border-bottom-color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-tab-panel {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenities-grid,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-grid {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 2px 12px rgba(244, 210, 122, 0.08);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-green {
color: #34d399;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-sky {
color: #38bdf8;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-amber {
color: #fbbf24;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-purple {
color: #a78bfa;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-rose {
color: #fb7185;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .amenity-item i.icon-teal {
color: #2dd4bf;
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .map-container {
background: var(--m-surface); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .map-open-btn {
background: var(--m-surface); color: var(--mv2-accent); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .map-open-btn:hover {
background: var(--m-surface-2); border-color: var(--mv2-accent); box-shadow: 0 4px 14px rgba(244, 210, 122, 0.18);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-card {
background: var(--m-surface); border-color: var(--m-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-card-body {
background: var(--m-surface); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-card-price,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-card-avail {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-cost-row,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-cost-row__label,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-cost-row__value {
color: var(--m-text); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .apply-divider {
background: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .share-btn {
background: var(--m-surface); color: var(--m-text); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .share-btn:hover {
background: var(--m-surface-2); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .share-btn.saved {
color: #f87171; border-color: rgba(248, 113, 113, 0.40); background: rgba(248, 113, 113, 0.10);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .mv2-landlord-card,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .landlord-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .mv2-landlord-card #landlordAvatar,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .landlord-card-avatar {
background: rgba(244, 210, 122, 0.16); color: var(--mv2-accent); border-color: rgba(244, 210, 122, 0.28);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .mv2-landlord-card .landlord-name,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .mv2-landlord-card .landlord-title {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .detail-section.skeleton,
html[data-theme="dark"] body[data-portal="public"][data-page="property"] .skeleton-line {
background: linear-gradient(90deg, var(--m-surface) 25%, var(--m-surface-2) 50%, var(--m-surface) 75%);
}
/* ─── Element overrides: property.html (OS prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"][data-page="property"] .detail-main {
color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .detail-section {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .detail-section-title,
body[data-portal="public"][data-page="property"] .detail-title,
body[data-portal="public"][data-page="property"] .detail-price {
color: var(--m-ink);
}
body[data-portal="public"][data-page="property"] .detail-address,
body[data-portal="public"][data-page="property"] .detail-meta-row,
body[data-portal="public"][data-page="property"] .detail-desc {
color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .detail-meta-item {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .detail-meta-item:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 4px 16px rgba(244, 210, 122, 0.10);
}
body[data-portal="public"][data-page="property"] .detail-meta-icon {
background: rgba(244, 210, 122, 0.10); border-color: rgba(244, 210, 122, 0.22); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="property"] .detail-tabs-wrap,
body[data-portal="public"][data-page="property"] .detail-tabs {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .detail-tab {
color: var(--m-muted); border-bottom-color: transparent;
}
body[data-portal="public"][data-page="property"] .detail-tab.active,
body[data-portal="public"][data-page="property"] .detail-tab[aria-selected="true"] {
color: var(--mv2-accent); border-bottom-color: var(--mv2-accent);
}
body[data-portal="public"][data-page="property"] .detail-tab-panel {
color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .amenities-grid,
body[data-portal="public"][data-page="property"] .amenity-grid {
color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .amenity-item {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .amenity-item:hover {
border-color: rgba(244, 210, 122, 0.30); box-shadow: 0 2px 12px rgba(244, 210, 122, 0.08);
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-green {
color: #34d399;
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-sky {
color: #38bdf8;
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-amber {
color: #fbbf24;
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-purple {
color: #a78bfa;
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-rose {
color: #fb7185;
}
body[data-portal="public"][data-page="property"] .amenity-item i.icon-teal {
color: #2dd4bf;
}
body[data-portal="public"][data-page="property"] .map-container {
background: var(--m-surface); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .map-open-btn {
background: var(--m-surface); color: var(--mv2-accent); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .map-open-btn:hover {
background: var(--m-surface-2); border-color: var(--mv2-accent); box-shadow: 0 4px 14px rgba(244, 210, 122, 0.18);
}
body[data-portal="public"][data-page="property"] .apply-card {
background: var(--m-surface); border-color: var(--m-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}
body[data-portal="public"][data-page="property"] .apply-card-body {
background: var(--m-surface); color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .apply-card-price,
body[data-portal="public"][data-page="property"] .apply-card-avail {
color: var(--m-ink);
}
body[data-portal="public"][data-page="property"] .apply-cost-row,
body[data-portal="public"][data-page="property"] .apply-cost-row__label,
body[data-portal="public"][data-page="property"] .apply-cost-row__value {
color: var(--m-text); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .apply-divider {
background: var(--m-border);
}
body[data-portal="public"][data-page="property"] .share-btn {
background: var(--m-surface); color: var(--m-text); border-color: var(--m-border);
}
body[data-portal="public"][data-page="property"] .share-btn:hover {
background: var(--m-surface-2); border-color: var(--mv2-accent); color: var(--mv2-accent);
}
body[data-portal="public"][data-page="property"] .share-btn.saved {
color: #f87171; border-color: rgba(248, 113, 113, 0.40); background: rgba(248, 113, 113, 0.10);
}
body[data-portal="public"][data-page="property"] .mv2-landlord-card,
body[data-portal="public"][data-page="property"] .landlord-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"][data-page="property"] .mv2-landlord-card #landlordAvatar,
body[data-portal="public"][data-page="property"] .landlord-card-avatar {
background: rgba(244, 210, 122, 0.16); color: var(--mv2-accent); border-color: rgba(244, 210, 122, 0.28);
}
body[data-portal="public"][data-page="property"] .mv2-landlord-card .landlord-name,
body[data-portal="public"][data-page="property"] .mv2-landlord-card .landlord-title {
color: var(--m-ink);
}
body[data-portal="public"][data-page="property"] .detail-section.skeleton,
body[data-portal="public"][data-page="property"] .skeleton-line {
background: linear-gradient(90deg, var(--m-surface) 25%, var(--m-surface-2) 50%, var(--m-surface) 75%);
}
}
/* ════════════════════════════════════════════════════════════════════════════ *
* PHASE 9.7 — Dark theme: all remaining public static content pages
* ────────────────────────────────────────────────────────────────────────────
* Same dual-trigger approach (@media + html[data-theme="dark"]).
*
* Uses ONE selector that catches every public page that doesn't already
* have its own per-page dark scope:
* body[data-portal="public"]:not([data-page="home"])
* :not([data-page="listings"])
* :not([data-page="property"])
*
* This covers (verified at commit time):
* about, faq, policies, terms, privacy,
* application-credit-policy, fair-housing, holding-deposit-policy,
* how-it-works, how-to-apply, landlord-platform-agreement,
* policy-changelog, rental-application-policy,
* 404 (after data-page="404" added to body),
* verify-lease (after data-portal="public" + data-page="verify-lease" added)
*
* And any future public page that gets data-portal="public" plus a new
* data-page value will also dark-adapt automatically without further CSS.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── Token redef: all-other-public-pages (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
/* ─── Token redef: all-other-public-pages (OS @media prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) {
color-scheme: dark;
/* legacy --m-* token system */
--m-bg: #0e0c08;
--m-white: #181410;
--m-surface: #1f1812;
--m-surface-2: #2a221b;
--m-border: #2e261c;
--m-border-strong: #3d3324;
--m-ink: #f5f1e8;
--m-ink-2: #e7e0d2;
--m-text: #e0d8c8;
--m-muted: #b8aea0;
--m-muted-2: #9b9183;
--m-soft: #6e6759;
--m-brand-pale: #102239;
--m-gold-pale: #2a221b;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.30);
--m-shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
--m-shadow-lg: 0 18px 40px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.32);
/* modern --mv2-* token system */
--mv2-bg-warm: #0e0c08;
--mv2-bg-warm-2: #1a1610;
--mv2-ink: #f5f1e8;
--mv2-ink-2: #e7e0d2;
--mv2-muted: #b8aea0;
--mv2-muted-2: #9b9183;
--mv2-hairline: #2e261c;
--mv2-hairline-strong:#3d3324;
--mv2-accent: #f4d27a;
--mv2-accent-pale: #2a221b;
--mv2-accent-strong: #f4d27a;
--mv2-shadow-hairline:0 0 0 1px var(--mv2-hairline);
--mv2-shadow-soft: 0 1px 2px rgba(0,0,0,.50), 0 8px 24px rgba(0,0,0,.45);
--mv2-shadow-lift: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55);
--mv2-overlay-ink: rgba(0, 0, 0, 0.62);
/* page paint */
background: #0e0c08;
color: #e0d8c8;
}
}
/* ─── Element overrides: all-other-public-pages (explicit data-theme="dark") ─── */
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header {
background: linear-gradient(180deg, var(--mv2-bg-warm) 0%, var(--mv2-bg-warm-2) 100%); color: var(--m-ink); border-bottom-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero h1,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header h1,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header h1,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header h1 {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero p,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header p,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header p,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header p {
color: var(--m-muted);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-body,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) main.content,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .content-wrap {
background: var(--m-bg); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body h2,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body h2,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body h2,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body h3,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body h3,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body h3 {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body a,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body a,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body a {
color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body a:hover,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body a:hover,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body a:hover {
color: #fbe49b;
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body hr,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body hr,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body hr {
border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body code,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body code,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body code {
background: var(--m-surface-2); color: var(--m-ink); border-color: var(--m-border);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body blockquote,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body blockquote,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body blockquote {
border-left-color: var(--mv2-accent); background: var(--m-surface); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-item,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-question,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-item summary {
color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-answer {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc h3 {
color: var(--m-muted);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc a {
color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc a:hover {
color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-callout {
background: rgba(245, 158, 11, 0.08); border-left-color: var(--mv2-accent); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-callout strong {
color: var(--mv2-accent);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .arbitration-block {
background: rgba(220, 38, 38, 0.10); border-color: rgba(248, 113, 113, 0.50); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .arbitration-block h3 {
color: #fb7185;
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .version-block {
background: var(--m-surface); border-left-color: var(--mv2-accent); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .version-meta {
color: var(--m-muted-2);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .card,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .panel,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .card-header {
background: var(--m-surface-2); border-bottom-color: var(--m-border); color: var(--m-ink);
}
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body ul li,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body ol li,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body ul li,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body ol li,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body ul li,
html[data-theme="dark"] body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body ol li {
color: var(--m-text);
}
/* ─── Element overrides: all-other-public-pages (OS @media prefers-color-scheme: dark) ─── */
@media (prefers-color-scheme: dark) {
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header {
background: linear-gradient(180deg, var(--mv2-bg-warm) 0%, var(--mv2-bg-warm-2) 100%); color: var(--m-ink); border-bottom-color: var(--m-border);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero h1,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header h1,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header h1,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header h1 {
color: var(--m-ink);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-hero p,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-header p,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-header p,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-header p {
color: var(--m-muted);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .page-body,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) main.content,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .content-wrap {
background: var(--m-bg); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body h2,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body h2,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body h2,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body h3,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body h3,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body h3 {
color: var(--m-ink);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body a,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body a,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body a {
color: var(--mv2-accent);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body a:hover,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body a:hover,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body a:hover {
color: #fbe49b;
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body hr,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body hr,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body hr {
border-color: var(--m-border);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body code,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body code,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body code {
background: var(--m-surface-2); color: var(--m-ink); border-color: var(--m-border);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body blockquote,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body blockquote,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body blockquote {
border-left-color: var(--mv2-accent); background: var(--m-surface); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-item,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-question,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-item summary {
color: var(--m-ink);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .faq-answer {
color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc h3 {
color: var(--m-muted);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc a {
color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-toc a:hover {
color: var(--mv2-accent);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-callout {
background: rgba(245, 158, 11, 0.08); border-left-color: var(--mv2-accent); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-callout strong {
color: var(--mv2-accent);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .arbitration-block {
background: rgba(220, 38, 38, 0.10); border-color: rgba(248, 113, 113, 0.50); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .arbitration-block h3 {
color: #fb7185;
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .version-block {
background: var(--m-surface); border-left-color: var(--mv2-accent); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .version-meta {
color: var(--m-muted-2);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .card,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .panel,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .info-card {
background: var(--m-surface); border-color: var(--m-border); color: var(--m-text);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .card-header {
background: var(--m-surface-2); border-bottom-color: var(--m-border); color: var(--m-ink);
}
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body ul li,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .doc-body ol li,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body ul li,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .legal-body ol li,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body ul li,
body[data-portal="public"]:not([data-page="home"]):not([data-page="listings"]):not([data-page="property"]) .policy-body ol li {
color: var(--m-text);
}
}
/* ════════════════════════════════════════════════════════════════════════════ *
* PHASE 9.8 — Theme toggle button (sun/moon)
* ────────────────────────────────────────────────────────────────────────────
* Lives in the main nav (desktop) and mobile drawer body.
* Light icon set: shows MOON in light theme (= "switch to dark"),
* shows SUN in dark theme (= "switch to light").
* Wired by js/components.js → wireThemeToggle().
* ════════════════════════════════════════════════════════════════════════════ */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ─── Desktop nav toggle: small circular icon button ─── */
.theme-toggle.mv2-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: 12px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--mv2-hairline, rgba(26, 26, 26, 0.10));
background: transparent;
color: var(--mv2-ink, #1A1A1A);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-toggle.mv2-theme-toggle:hover,
.theme-toggle.mv2-theme-toggle:focus-visible {
background: rgba(212, 160, 23, 0.10);
border-color: var(--mv2-accent, #d4a017);
color: var(--mv2-accent, #d4a017);
outline: none;
transform: translateY(-1px);
}
.theme-toggle.mv2-theme-toggle:active { transform: translateY(0); }
.theme-toggle.mv2-theme-toggle .theme-toggle__icon {
position: absolute;
font-size: 15px;
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle.mv2-theme-toggle,
.theme-toggle.mv2-theme-toggle .theme-toggle__icon {
transition: none;
}
}
/* ─── Default (light): show moon, hide sun ─── */
.theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
.theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
/* ─── Dark theme (either trigger): show sun, hide moon ─── */
html[data-theme="dark"] .theme-toggle__icon--sun,
html[data-theme="dark"] .nav-drawer-theme-toggle .theme-toggle__icon--sun {
opacity: 1; transform: rotate(0) scale(1);
}
html[data-theme="dark"] .theme-toggle__icon--moon,
html[data-theme="dark"] .nav-drawer-theme-toggle .theme-toggle__icon--moon {
opacity: 0; transform: rotate(-90deg) scale(0.6);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .theme-toggle__icon--sun,
html:not([data-theme="light"]) .nav-drawer-theme-toggle .theme-toggle__icon--sun {
opacity: 1; transform: rotate(0) scale(1);
}
html:not([data-theme="light"]) .theme-toggle__icon--moon,
html:not([data-theme="light"]) .nav-drawer-theme-toggle .theme-toggle__icon--moon {
opacity: 0; transform: rotate(-90deg) scale(0.6);
}
}
/* ─── Toggle button color in dark theme (both triggers) ─── */
html[data-theme="dark"] .theme-toggle.mv2-theme-toggle {
color: var(--mv2-accent, #f4d27a);
border-color: rgba(245, 241, 232, 0.18);
}
html[data-theme="dark"] .theme-toggle.mv2-theme-toggle:hover,
html[data-theme="dark"] .theme-toggle.mv2-theme-toggle:focus-visible {
background: rgba(244, 210, 122, 0.14);
border-color: var(--mv2-accent, #f4d27a);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .theme-toggle.mv2-theme-toggle {
color: #f4d27a;
border-color: rgba(245, 241, 232, 0.18);
}
html:not([data-theme="light"]) .theme-toggle.mv2-theme-toggle:hover,
html:not([data-theme="light"]) .theme-toggle.mv2-theme-toggle:focus-visible {
background: rgba(244, 210, 122, 0.14);
border-color: #f4d27a;
}
}
/* ─── Mobile drawer toggle entry: looks like a nav-drawer-link with icon swap ─── */
.nav-drawer-theme-toggle {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.nav-drawer-theme-toggle .theme-toggle__icon {
position: static;
width: 18px;
text-align: center;
font-size: 16px;
transition: opacity 200ms ease;
}
/* In light mode: drawer entry shows moon */
.nav-drawer-theme-toggle .theme-toggle__icon--sun { display: none; }
.nav-drawer-theme-toggle .theme-toggle__icon--moon { display: inline-block; opacity: 1; transform: none; }
html[data-theme="dark"] .nav-drawer-theme-toggle .theme-toggle__icon--moon { display: none; }
html[data-theme="dark"] .nav-drawer-theme-toggle .theme-toggle__icon--sun { display: inline-block; opacity: 1; transform: none; color: #f4d27a; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .nav-drawer-theme-toggle .theme-toggle__icon--moon { display: none; }
html:not([data-theme="light"]) .nav-drawer-theme-toggle .theme-toggle__icon--sun { display: inline-block; opacity: 1; transform: none; color: #f4d27a; }
}
/* ─── Hide desktop toggle on mobile (drawer entry takes over) ─── */
@media (max-width: 767px) {
.theme-toggle.mv2-theme-toggle { display: none; }
}