/* =========================================================
Tiny Homes USA — Global Stylesheet
Design: Glassmorphism + CSS 3D + luxury real estate aesthetic
========================================================= */
/* ---------- DESIGN TOKENS ---------- */
:root {
/* Brand palette (pulled from live site CSS) */
--navy-900: #0F172A;
--navy-800: #1E293B;
--navy-700: #334155;
--navy-600: #475569;
--navy-500: #64748B;
--navy-400: #94A3B8;
--navy-300: #CBD5E1;
--navy-200: #E2E8F0;
--navy-100: #F1F5F9;
--navy-50: #F8FAFC;
--gold-700: #8F7038;
--gold-600: #A88948;
--gold-500: #C8A96A; /* signature */
--gold-400: #D4B97A;
--gold-300: #E4D2A4;
--gold-200: #F0E3BF;
--gold-100: #F8F1DC;
--teal-900: #042F2E;
--teal-800: #083A39;
--teal-700: #0F5A57;
--white: #ffffff;
--black: #000000;
/* Surfaces / glass (premium glassmorphism - tuned to match reference sample) */
--glass-bg-light: rgba(255,255,255,0.10); /* light on dark bgs */
--glass-bg-mid: rgba(255,255,255,0.16);
--glass-bg-dark: rgba(15,23,42,0.28); /* dark on light bgs */
--glass-bg-white: rgba(255,255,255,0.72); /* opaque-ish for above-photo cards */
--glass-border-light: rgba(255,255,255,0.22);
--glass-border-dark: rgba(255,255,255,0.10);
--glass-hilite: rgba(255,255,255,0.35);
--glass-blur: 18px;
--glass-blur-strong: 24px;
--glass-saturate: 180%;
/* Shadows — soft, luxurious */
--shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--shadow-sm: 0 2px 8px rgba(15,23,42,0.08);
--shadow-md: 0 6px 24px rgba(15,23,42,0.10);
--shadow-lg: 0 20px 60px rgba(15,23,42,0.14);
--shadow-xl: 0 40px 120px rgba(15,23,42,0.25);
--shadow-gold: 0 20px 50px rgba(200,169,106,0.30);
--shadow-ring-gold: 0 0 0 1px rgba(200,169,106,0.45), 0 18px 60px rgba(200,169,106,0.25);
/* Type — all-sans institutional system (Inter for both display and body) */
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--fs-100: 0.75rem; /* 12 */
--fs-200: 0.875rem; /* 14 */
--fs-300: 1rem; /* 16 */
--fs-400: 1.125rem; /* 18 */
--fs-500: 1.25rem; /* 20 */
--fs-600: 1.5rem; /* 24 */
--fs-700: 2rem; /* 32 */
--fs-800: 2.75rem; /* 44 */
--fs-900: 4rem; /* 64 */
--fs-1000: clamp(2.75rem, 5.5vw, 4.5rem);
--fs-hero: clamp(2.75rem, 6.5vw, 5.25rem);
/* Radii */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--r-pill: 999px;
/* Spacing */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
--sp-7: 3rem;
--sp-8: 4rem;
--sp-9: 6rem;
--sp-10: 8rem;
/* Layout */
--container-max: 1240px;
--container-pad: clamp(1rem, 4vw, 2.5rem);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 180ms;
--dur-mid: 360ms;
--dur-slow: 700ms;
/* Z-layers */
--z-nav: 1000;
--z-modal: 2000;
}
/* ---------- ANNOUNCEMENT BAR (above nav on every page) ---------- */
.announcement-bar {
background: linear-gradient(90deg, var(--navy-900), var(--teal-800), var(--navy-900));
color: var(--gold-400);
text-align: center;
padding: 0.55rem 1rem;
font-size: var(--fs-100);
font-weight: 500;
letter-spacing: 0.08em;
position: relative;
z-index: calc(var(--z-nav) + 1);
border-bottom: 1px solid rgba(200,169,106,0.25);
}
.announcement-bar strong { color: var(--white); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.announcement-bar a { color: var(--gold-400); margin-left: 0.5rem; border-bottom: 1px solid rgba(200,169,106,0.4); padding-bottom: 1px; }
.announcement-bar a:hover { color: var(--gold-300); }
/* Push nav down when announcement bar is present */
body.has-announce .site-nav { top: 36px; }
body.has-announce .hero,
body.has-announce .page-hero { padding-top: calc(10rem + 12px); }
/* ---------- SVG ICONS ---------- */
.icon-svg {
display: inline-block;
vertical-align: middle;
stroke: currentColor;
fill: none;
flex-shrink: 0;
}
.feature .icon,
.stat-item .icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow-gold);
}
.feature .icon .icon-svg {
width: 26px;
height: 26px;
stroke-width: 2;
color: var(--navy-900);
}
.btn .icon-svg { width: 16px; height: 16px; stroke-width: 2.2; }
/* ---------- CERTIFICATION BADGES (on model cards) ---------- */
.cert-badges {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin: 0.25rem 0;
}
.cert-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.55rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--r-pill);
background: rgba(200, 169, 106, 0.1);
border: 1px solid rgba(200, 169, 106, 0.35);
color: var(--gold-700);
}
.cert-badge svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* ---------- SCROLL-REVEAL ---------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
/* ---------- STAT COUNTER ---------- */
.stat-item .num[data-count] { font-variant-numeric: tabular-nums; }
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-300);
line-height: 1.65;
color: var(--navy-900);
background: var(--navy-50);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--gold-500); }
input, textarea, select { font: inherit; color: inherit; }
/* ---------- TYPOGRAPHY (Option B: all-sans institutional) ---------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 var(--sp-4);
color: var(--navy-900);
font-feature-settings: "ss01", "cv11"; /* Inter stylistic set: single-story 'a', straight 'l' — more confident display look */
}
h1 {
font-size: var(--fs-1000);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.02;
}
h2 {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
}
h3 { font-size: var(--fs-700); font-weight: 700; letter-spacing: -0.025em; }
h4 { font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 var(--sp-4); color: var(--navy-700); }
.lead { font-size: var(--fs-400); line-height: 1.6; color: var(--navy-600); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-body);
font-size: var(--fs-100);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-500);
}
.eyebrow::before {
content: "";
width: 28px; height: 1px;
background: var(--gold-500);
display: inline-block;
}
/* .serif-it kept as a hook for pull quotes — now renders as clean Inter italic */
.serif-it { font-family: var(--font-body); font-style: italic; font-weight: 400; }
/* .highlight — gold emphasis WITHOUT italic serif flourish (sans, gold color, same weight) */
.highlight {
font-family: inherit;
font-style: normal;
color: var(--gold-500);
font-weight: inherit;
}
/* ---------- LAYOUT ---------- */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
padding-block: clamp(3.5rem, 8vw, 7rem);
position: relative;
}
.section-sm { padding-block: clamp(2rem, 5vw, 4rem); }
.section-dark {
background: var(--navy-900);
color: var(--white);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: var(--navy-300); }
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 960px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.flex { display: flex; gap: var(--sp-4); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-6 { margin-bottom: var(--sp-6); }
/* ---------- GLASSMORPHISM UTILITIES (premium, reference-sample quality) ---------- */
/* Shared premium glass recipe:
1. Strong backdrop-filter blur + saturate (colors behind pop through)
2. Very subtle semi-transparent fill
3. 1px top-light border (multi-layer box-shadow creates edge highlight)
4. Soft drop shadow + top inset highlight (creates glass-lit-from-above look)
5. ::before radial corner highlight (bright bloom in top-left)
6. ::after gold accent glow bottom-right
All pseudo-elements use pointer-events:none so they don't block clicks. */
.glass-card,
.glass-panel {
position: relative;
isolation: isolate;
overflow: hidden;
}
.glass-card {
background: var(--glass-bg-white);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border-light);
border-radius: var(--r-md);
box-shadow:
0 20px 60px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 1px 0 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(15, 23, 42, 0.06);
transition: transform var(--dur-mid) var(--ease-out),
box-shadow var(--dur-mid) var(--ease-out);
}
.glass-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 40% at 10% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
radial-gradient(50% 40% at 90% 100%, rgba(200, 169, 106, 0.12) 0%, transparent 60%);
z-index: 0;
}
.glass-card > * { position: relative; z-index: 1; }
.glass-card:hover {
transform: translateY(-6px);
box-shadow:
0 30px 80px rgba(15, 23, 42, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}
.glass-card.dark {
background: var(--glass-bg-light);
border-color: var(--glass-border-dark);
color: var(--white);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 1px 0 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.glass-card.dark::before {
background:
radial-gradient(60% 40% at 10% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
radial-gradient(50% 40% at 90% 100%, rgba(200, 169, 106, 0.22) 0%, transparent 60%);
}
.glass-panel {
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: var(--r-lg);
box-shadow:
0 24px 72px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 1px 0 0 rgba(255, 255, 255, 0.3);
}
.glass-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(55% 40% at 5% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 60%),
radial-gradient(50% 40% at 95% 100%, rgba(200, 169, 106, 0.12) 0%, transparent 60%);
z-index: 0;
}
.glass-panel > * { position: relative; z-index: 1; }
.glass-panel.dark {
background: rgba(15, 23, 42, 0.28);
border-color: rgba(255, 255, 255, 0.16);
color: var(--white);
box-shadow:
0 24px 72px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 1px 0 0 rgba(255, 255, 255, 0.1);
}
.glass-panel.dark::before {
background:
radial-gradient(55% 40% at 5% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
radial-gradient(50% 40% at 95% 100%, rgba(200, 169, 106, 0.2) 0%, transparent 60%);
}
/* Feature on an image / hero backgrounds - strongest blur */
.glass-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--r-lg);
color: #fff;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 1px 0 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.glass-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(55% 40% at 5% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
radial-gradient(50% 40% at 95% 100%, rgba(200, 169, 106, 0.24) 0%, transparent 55%);
z-index: 0;
}
.glass-hero > * { position: relative; z-index: 1; }
.glass-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.4rem 0.9rem;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.45);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,0.55);
font-size: var(--fs-100);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy-900);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(15,23,42,0.08);
}
.glass-pill.dark {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.22);
color: var(--white);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 18px rgba(0,0,0,0.2);
}
.glass-pill.gold {
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
border-color: var(--gold-400);
color: var(--navy-900);
}
/* ---------- 3D SPHERE DECORATIONS (pure CSS) ---------- */
.sphere-decor {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(0.4px);
will-change: transform;
}
.sphere-gold {
background: radial-gradient(circle at 30% 30%,
#FFF3D4 0%,
var(--gold-400) 30%,
var(--gold-600) 70%,
var(--gold-700) 100%);
box-shadow:
inset -8px -10px 20px rgba(100,60,20,0.35),
inset 8px 8px 20px rgba(255,230,180,0.25),
var(--shadow-gold);
}
.sphere-navy {
background: radial-gradient(circle at 30% 30%,
#5B6F93 0%,
var(--navy-700) 30%,
var(--navy-800) 70%,
var(--navy-900) 100%);
box-shadow:
inset -6px -8px 20px rgba(0,0,0,0.45),
inset 6px 6px 15px rgba(255,255,255,0.12),
var(--shadow-lg);
}
.sphere-glass {
background: radial-gradient(circle at 30% 30%,
rgba(255,255,255,0.85) 0%,
rgba(200,169,106,0.45) 45%,
rgba(15,23,42,0.30) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
inset -4px -6px 14px rgba(15,23,42,0.35),
inset 4px 4px 12px rgba(255,255,255,0.55),
var(--shadow-md);
}
/* Size variants */
.sphere-xs { width: 40px; height: 40px; }
.sphere-sm { width: 64px; height: 64px; }
.sphere-md { width: 110px; height: 110px; }
.sphere-lg { width: 180px; height: 180px; }
.sphere-xl { width: 260px; height: 260px; }
/* Float animations */
@keyframes floatA {
0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(12px,-24px,0) rotate(5deg); }
}
@keyframes floatB {
0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(-18px,-18px,0) rotate(-6deg); }
}
@keyframes floatC {
0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(14px,20px,0) rotate(4deg); }
}
.float-a { animation: floatA 8s var(--ease) infinite; }
.float-b { animation: floatB 11s var(--ease) infinite; }
.float-c { animation: floatC 9s var(--ease) infinite; }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 0.95rem 1.6rem;
font-family: var(--font-body);
font-size: var(--fs-200);
font-weight: 600;
letter-spacing: 0.04em;
border-radius: var(--r-pill);
transition:
transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.btn-gold {
background:
linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%),
linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 50%, var(--gold-600) 100%);
color: var(--navy-900);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.45) inset,
0 -1px 0 0 rgba(120,90,40,0.25) inset,
var(--shadow-gold);
border: 1px solid rgba(168,137,72,0.4);
position: relative;
overflow: hidden;
}
.btn-gold::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 700ms var(--ease-out);
pointer-events: none;
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.55) inset,
0 -1px 0 0 rgba(120,90,40,0.3) inset,
0 30px 70px rgba(200,169,106,0.40);
color: var(--navy-900);
}
.btn-gold:hover::before { transform: translateX(100%); }
.btn-gold:active {
transform: scale(0.97) translateY(1px);
box-shadow:
0 1px 2px 0 rgba(120,90,40,0.4) inset,
0 4px 10px rgba(200,169,106,0.25);
transition-duration: 80ms;
}
.btn-ghost {
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.35);
color: var(--white);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
background: rgba(255,255,255,0.18);
color: var(--white);
transform: translateY(-2px);
}
.btn-ghost:active {
transform: scale(0.97) translateY(1px);
background: rgba(255,255,255,0.22);
transition-duration: 80ms;
}
.btn-navy {
background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
color: var(--white);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.08) inset,
0 -1px 0 0 rgba(0,0,0,0.3) inset,
var(--shadow-sm);
border: 1px solid rgba(255,255,255,0.06);
}
.btn-navy:hover {
background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-800) 100%);
color: var(--gold-400);
transform: translateY(-2px);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.12) inset,
0 -1px 0 0 rgba(0,0,0,0.35) inset,
var(--shadow-md);
}
.btn-navy:active {
transform: scale(0.97) translateY(1px);
box-shadow:
0 1px 3px 0 rgba(0,0,0,0.4) inset;
transition-duration: 80ms;
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--navy-900);
color: var(--navy-900);
}
.btn-outline:hover {
background: var(--navy-900);
color: var(--white);
transform: translateY(-1px);
}
.btn-outline:active {
transform: scale(0.97) translateY(1px);
transition-duration: 80ms;
}
/* Universal press physics for any btn variant that doesn't have its own :active */
.btn:active:not(.btn-gold):not(.btn-navy):not(.btn-ghost):not(.btn-outline) {
transform: scale(0.97) translateY(1px);
transition-duration: 80ms;
}
.btn-outline:active { transform: translateY(0); }
.btn-ghost:active { background: rgba(255,255,255,0.22); transform: translateY(0); }
.btn-gold:focus-visible,
.btn-navy:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible {
outline: 3px solid var(--gold-400);
outline-offset: 3px;
}
/* ---------- FOCUS-VISIBLE (keyboard accessibility) ---------- */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--gold-500);
outline-offset: 2px;
border-radius: 3px;
}
.nav-links a:focus-visible {
outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
border-color: var(--gold-500);
box-shadow: 0 0 0 4px rgba(200,169,106,0.20);
}
/* Skip-to-main link */
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: calc(var(--z-modal) + 10);
background: var(--navy-900);
color: var(--white);
padding: 0.6rem 1rem;
border-radius: var(--r-sm);
font-size: var(--fs-200);
font-weight: 600;
transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--gold-400); }
/* ---------- DROP CAPS (for editorial sections) ---------- */
.drop-cap p:first-of-type::first-letter,
p.drop-cap::first-letter {
font-family: var(--font-display);
font-size: 4.2rem;
font-weight: 700;
float: left;
line-height: 0.85;
padding: 0.3rem 0.6rem 0 0;
color: var(--gold-500);
margin-top: 0.25rem;
}
/* ---------- NEWSLETTER FORM ---------- */
.newsletter {
margin-top: var(--sp-6);
padding: var(--sp-6) 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--sp-6);
align-items: center;
}
@media (max-width: 720px) {
.newsletter { grid-template-columns: 1fr; }
}
.newsletter h4 {
font-family: var(--font-display);
font-size: var(--fs-500);
color: var(--white);
margin: 0 0 0.35rem;
}
.newsletter p {
font-size: var(--fs-200);
color: var(--navy-400);
margin: 0;
}
.newsletter form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.newsletter input[type="email"] {
flex: 1;
min-width: 0;
padding: 0.85rem 1rem;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: var(--white);
border-radius: var(--r-pill);
font-size: var(--fs-200);
}
.newsletter input[type="email"]::placeholder { color: var(--navy-400); }
.newsletter input[type="email"]:focus {
outline: none;
border-color: var(--gold-400);
background: rgba(255,255,255,0.08);
box-shadow: 0 0 0 3px rgba(200,169,106,0.15);
}
.newsletter .btn {
padding: 0.85rem 1.4rem;
}
/* ---------- LIVE CHAT WIDGET ---------- */
.chat-launcher {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: calc(var(--z-nav) - 1);
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
color: var(--navy-900);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg), 0 0 0 4px rgba(200,169,106,0.25);
border: 2px solid rgba(255,255,255,0.45);
cursor: pointer;
transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.chat-launcher:hover { transform: scale(1.08) rotate(-4deg); }
.chat-launcher:active { transform: scale(0.96); }
.chat-launcher .icon-svg { width: 24px; height: 24px; stroke-width: 2.2; }
.chat-launcher .pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--gold-400);
animation: chatPulse 2.2s var(--ease-out) infinite;
}
@keyframes chatPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.45); opacity: 0; }
}
.chat-panel {
position: fixed;
right: 1.25rem;
bottom: 5.5rem;
z-index: calc(var(--z-nav) - 1);
width: min(360px, calc(100vw - 2.5rem));
max-height: 70vh;
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
display: none;
flex-direction: column;
overflow: hidden;
transform-origin: bottom right;
animation: chatOpen 280ms var(--ease-out);
border: 1px solid rgba(15,23,42,0.06);
}
.chat-panel.open { display: flex; }
@keyframes chatOpen {
from { opacity: 0; transform: scale(0.9) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.chat-header {
background: linear-gradient(135deg, var(--navy-900), var(--teal-800));
color: var(--white);
padding: 1.1rem 1.25rem;
display: flex;
gap: 0.9rem;
align-items: center;
}
.chat-header .avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
display: inline-flex; align-items: center; justify-content: center;
color: var(--navy-900);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
flex-shrink: 0;
}
.chat-header .who {
font-family: var(--font-display);
font-size: var(--fs-500);
line-height: 1.1;
}
.chat-header .status {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: var(--gold-400);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.2rem;
}
.chat-header .status::before {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
}
.chat-header .close {
margin-left: auto;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
color: var(--white);
font-size: 1.15rem;
}
.chat-body {
padding: 1.25rem;
overflow-y: auto;
flex: 1;
background: var(--navy-50);
}
.chat-bubble {
background: var(--white);
border-radius: var(--r-md);
padding: 0.9rem 1rem;
font-size: var(--fs-200);
color: var(--navy-800);
box-shadow: var(--shadow-xs);
margin-bottom: 0.75rem;
border-bottom-left-radius: 4px;
}
.chat-quick {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.chat-quick button {
text-align: left;
padding: 0.75rem 1rem;
background: var(--white);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
color: var(--navy-900);
font-size: var(--fs-200);
font-weight: 500;
transition: all 150ms var(--ease);
cursor: pointer;
}
.chat-quick button:hover {
background: var(--gold-100);
border-color: var(--gold-500);
transform: translateX(2px);
}
.chat-footer {
padding: 0.9rem 1.25rem;
background: var(--white);
border-top: 1px solid var(--navy-200);
display: flex;
gap: 0.5rem;
align-items: center;
}
.chat-footer a.btn {
padding: 0.5rem 0.9rem;
font-size: var(--fs-100);
flex-shrink: 0;
}
.chat-footer small {
font-size: var(--fs-100);
color: var(--navy-500);
}
/* ---------- DELIVERY MAP (CSS/SVG-based US radius) ---------- */
.delivery-map {
position: relative;
aspect-ratio: 16/10;
background: linear-gradient(135deg, var(--navy-900), var(--navy-800), var(--teal-800));
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.delivery-map svg {
width: 100%;
height: 100%;
display: block;
}
.delivery-map .hq-dot {
fill: var(--gold-400);
filter: drop-shadow(0 0 8px var(--gold-400));
animation: hqPulse 2.4s var(--ease-out) infinite;
}
@keyframes hqPulse {
0%, 100% { r: 5; }
50% { r: 8; }
}
.delivery-map .free-zone {
fill: rgba(200,169,106,0.18);
stroke: var(--gold-400);
stroke-width: 2;
stroke-dasharray: 6 6;
}
.delivery-map .flat-zone {
fill: rgba(255,255,255,0.05);
stroke: rgba(255,255,255,0.25);
stroke-width: 1;
stroke-dasharray: 3 6;
}
.delivery-map .map-text {
fill: var(--white);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.delivery-map .map-text-sub { fill: var(--gold-400); font-size: 10px; letter-spacing: 0.12em; }
.delivery-map .map-legend {
position: absolute;
bottom: 1rem;
left: 1rem;
background: rgba(15,23,42,0.8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
padding: 0.75rem 1rem;
color: var(--white);
font-size: var(--fs-100);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.delivery-map .map-legend .row { display: flex; align-items: center; gap: 0.55rem; letter-spacing: 0.08em; }
.delivery-map .map-legend .swatch {
width: 14px; height: 14px; border-radius: 2px;
border: 1.5px dashed var(--gold-400);
background: rgba(200,169,106,0.18);
}
.delivery-map .map-legend .swatch.flat { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }
/* ---------- FAQ TABS ---------- */
.faq-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding: 0.4rem;
background: var(--navy-100);
border-radius: var(--r-pill);
}
.faq-tab {
flex: 1;
min-width: 120px;
padding: 0.7rem 1rem;
font-size: var(--fs-100);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy-600);
border-radius: var(--r-pill);
background: transparent;
transition: all 200ms var(--ease);
cursor: pointer;
text-align: center;
}
.faq-tab:hover { color: var(--navy-900); background: rgba(255,255,255,0.5); }
.faq-tab.active {
background: var(--navy-900);
color: var(--gold-400);
box-shadow: var(--shadow-sm);
}
.faq-search {
position: relative;
margin-bottom: 1.5rem;
}
.faq-search input {
width: 100%;
padding: 0.95rem 1rem 0.95rem 3rem;
border: 1px solid var(--navy-200);
background: var(--white);
border-radius: var(--r-pill);
font-size: var(--fs-300);
}
.faq-search .icon-svg {
position: absolute;
left: 1.1rem;
top: 50%;
transform: translateY(-50%);
color: var(--navy-500);
pointer-events: none;
}
.faq-search input:focus {
outline: none;
border-color: var(--gold-500);
box-shadow: 0 0 0 4px rgba(200,169,106,0.15);
}
.faq-group { display: none; }
.faq-group.active { display: block; }
.faq-group details.hidden-by-search { display: none; }
.faq-no-match {
padding: 2rem;
text-align: center;
color: var(--navy-500);
font-style: italic;
display: none;
}
/* ---------- REVIEWS FILTER ---------- */
.reviews-filter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2rem;
}
.review-filter-chip {
padding: 0.55rem 1.1rem;
font-size: var(--fs-100);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--navy-200);
background: var(--white);
color: var(--navy-700);
border-radius: var(--r-pill);
cursor: pointer;
transition: all 180ms var(--ease);
}
.review-filter-chip:hover {
border-color: var(--gold-500);
color: var(--navy-900);
}
.review-filter-chip.active {
background: var(--navy-900);
color: var(--gold-400);
border-color: var(--navy-900);
}
.testimonial.filtered-out { display: none; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: var(--fs-100); }
.btn-lg { padding: 1.15rem 2rem; font-size: var(--fs-300); }
/* ---------- NAVIGATION ---------- */
.site-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-nav);
padding-block: 0.9rem;
transition:
background var(--dur-mid) var(--ease),
backdrop-filter var(--dur-mid) var(--ease),
transform 320ms var(--ease-out);
background: transparent;
will-change: transform;
}
.site-nav.scrolled {
background: rgba(10, 26, 48, 0.78);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-bottom: 1px solid rgba(200, 169, 106, 0.16);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
/* When nav is scrolled AND on a light/cream section, text must be light since bg is now navy */
.site-nav.scrolled .nav-links > li > a,
.site-nav.scrolled .logo {
color: #fff;
}
.site-nav.scrolled .logo img {
filter: brightness(0) invert(1);
}
.site-nav.scrolled .nav-burger span,
.site-nav.scrolled .nav-burger span::before,
.site-nav.scrolled .nav-burger span::after {
background: #fff;
}
/* Hide-on-scroll-down — motion.js adds .nav-hidden to both bar + nav */
.site-nav.nav-hidden { transform: translateY(-100%); }
.announcement-bar {
transition: transform 320ms var(--ease-out);
will-change: transform;
}
.announcement-bar.nav-hidden { transform: translateY(-100%); }
.site-nav .nav-inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
}
.site-nav .logo img {
height: 44px;
width: auto;
}
.nav-links {
display: none;
gap: var(--sp-6);
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
font-size: var(--fs-200);
font-weight: 500;
color: var(--navy-900);
position: relative;
padding-block: 0.25rem;
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: 0;
height: 2px;
background: var(--gold-500);
transition: right var(--dur-fast) var(--ease);
}
.nav-links a:hover::after { right: 0; }
/* --- NAV DROPDOWNS (hover on desktop) --- */
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a .caret {
margin-left: 0.3rem;
font-size: 0.7em;
opacity: 0.65;
transition: transform 180ms var(--ease);
}
.nav-links .has-dropdown:hover > a .caret,
.nav-links .has-dropdown:focus-within > a .caret { transform: rotate(180deg); opacity: 1; }
.nav-links .dropdown {
position: absolute;
top: 100%;
left: -0.75rem;
min-width: 240px;
margin: 0;
padding: 0.5rem 0;
list-style: none;
background: #ffffff; /* solid white — no bleed-through */
border: 1px solid rgba(15,23,42,0.12);
border-radius: var(--r-md);
box-shadow: 0 20px 60px rgba(15,23,42,0.18);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms step-end;
z-index: 10;
}
.nav-links .has-dropdown:hover > .dropdown,
.nav-links .has-dropdown:focus-within > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0ms;
}
.nav-links .dropdown li { margin: 0; }
/* Dropdown items: always dark-navy regardless of .on-dark/.scrolled parent state.
High-specificity override prevents .site-nav.on-dark .nav-links a (0,3,1)
from making dropdown items white-on-white. */
.site-nav .nav-links .dropdown a,
.site-nav.on-dark .nav-links .dropdown a,
.site-nav.scrolled .nav-links .dropdown a,
.site-nav.on-dark.scrolled .nav-links .dropdown a {
display: block;
padding: 0.65rem 1.15rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--navy-800);
white-space: nowrap;
border-radius: 0;
transition: background-color 120ms var(--ease), color 120ms var(--ease), padding-left 120ms var(--ease);
}
.site-nav .nav-links .dropdown a:hover,
.site-nav .nav-links .dropdown a:focus-visible,
.site-nav.on-dark .nav-links .dropdown a:hover,
.site-nav.on-dark .nav-links .dropdown a:focus-visible {
background: var(--gold-100);
color: var(--navy-900);
padding-left: 1.45rem;
}
.nav-links .dropdown a::after { display: none; }
.site-nav.on-dark .nav-links a { color: var(--white); }
/* Keep nav links WHITE even when scrolled, because scrolled bg is now navy */
.site-nav.on-dark.scrolled .nav-links a,
.site-nav.on-dark.scrolled .nav-links > li > a { color: var(--white); }
.nav-cta { display: none; }
.nav-burger {
width: 42px; height: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(15,23,42,0.10);
}
.nav-burger span {
width: 18px; height: 2px; background: var(--navy-900);
position: relative;
}
.nav-burger span::before,
.nav-burger span::after {
content: ""; position: absolute; left: 0;
width: 18px; height: 2px; background: var(--navy-900);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
@media (min-width: 1024px) {
.nav-links { display: flex; }
.nav-cta { display: inline-flex; }
.nav-burger { display: none; }
}
/* Mobile drawer */
.mobile-menu {
position: fixed;
inset: 0;
background: rgba(10, 26, 48, 0.98);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
z-index: calc(var(--z-nav) + 1);
display: none;
flex-direction: column;
overflow-y: auto;
padding: 0;
}
.mobile-menu.open { display: flex; }
.mobile-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: sticky;
top: 0;
background: rgba(10, 26, 48, 0.98);
backdrop-filter: blur(18px);
z-index: 2;
}
.mobile-menu-head img {
height: 32px;
width: auto;
filter: brightness(0) invert(1);
}
.mobile-menu .close {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
font-size: 1.5rem;
border: 0;
cursor: pointer;
display: grid;
place-items: center;
line-height: 1;
transition: background 180ms var(--ease);
}
.mobile-menu .close:hover { background: rgba(255, 255, 255, 0.2); }
.mobile-menu-nav { flex: 1; padding: 1rem 0.5rem; }
.mobile-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-menu-list > li:last-child { border-bottom: 0; }
.mobile-menu-list > li > a,
.mm-parent {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.1rem 1rem;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.005em;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: background 180ms var(--ease), color 180ms var(--ease);
}
.mobile-menu-list > li > a:hover,
.mm-parent:hover { background: rgba(255, 255, 255, 0.04); color: var(--gold-400); }
.mm-caret {
transition: transform 240ms var(--ease);
color: var(--gold-400);
flex-shrink: 0;
}
.mm-parent[aria-expanded="true"] .mm-caret { transform: rotate(180deg); }
.mm-parent[aria-expanded="true"] { color: var(--gold-400); }
.mm-sub {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 320ms var(--ease);
background: rgba(0, 0, 0, 0.2);
}
.mm-sub.open { max-height: 600px; }
.mm-sub li { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.mm-sub li:first-child { border-top: 0; }
.mm-sub a {
display: block;
padding: 0.85rem 1rem 0.85rem 2.25rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.95rem;
font-weight: 500;
transition: color 180ms var(--ease), padding-left 180ms var(--ease);
border-bottom: 0 !important;
}
.mm-sub a:hover {
color: var(--gold-400);
padding-left: 2.5rem;
}
.mm-sub a strong { color: var(--gold-400); font-weight: 700; }
.mobile-menu-foot {
padding: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 0.75rem;
background: rgba(0, 0, 0, 0.25);
}
.mobile-menu-foot .btn { justify-content: center; }
/* ---------- HERO ---------- */
.hero {
position: relative;
min-height: 100vh;
color: var(--white);
background:
radial-gradient(circle at 80% 20%, rgba(200,169,106,0.18), transparent 55%),
radial-gradient(circle at 20% 90%, rgba(15,58,57,0.35), transparent 60%),
linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--teal-800) 100%);
overflow: hidden;
display: flex;
align-items: center;
}
.hero .container { position: relative; z-index: 3; padding-block: 9rem 5rem; }
.hero h1 {
color: var(--white);
font-size: var(--fs-hero);
max-width: 14ch;
letter-spacing: -0.03em;
}
.hero h1 .highlight { display: block; }
.hero p { color: var(--navy-300); max-width: 48ch; font-size: var(--fs-400); }
/* Full-bleed background video + tint overlay (only active when .has-video) */
.hero.has-video {
background: var(--navy-900); /* fallback if video fails */
}
.hero .hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
/* Mobile video: force autoplay via JS (CSS keeps video visible on all screens) */
.hero .hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle at 80% 20%, rgba(200,169,106,0.18), transparent 55%),
radial-gradient(circle at 20% 90%, rgba(15,58,57,0.35), transparent 60%),
linear-gradient(135deg, rgba(15,23,42,0.78) 0%, rgba(30,41,59,0.65) 50%, rgba(8,58,57,0.72) 100%);
}
/* Diagonal light rays */
.hero .rays {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 2;
}
.hero .rays::before,
.hero .rays::after {
content: "";
position: absolute;
width: 200%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(200,169,106,0.22), transparent);
transform: rotate(-18deg);
left: -50%;
}
.hero .rays::before { top: 32%; }
.hero .rays::after { top: 62%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); }
/* Hero floating spheres layout */
.hero .sphere-tl { top: 12%; left: 8%; animation-duration: 11s; }
.hero .sphere-tr { top: 18%; right: 10%; animation-duration: 9s; }
.hero .sphere-bl { bottom: 16%; left: 12%; animation-duration: 13s; }
.hero .sphere-br { bottom: 22%; right: 8%; animation-duration: 10s; }
/* Hero glass center card (legacy — kept for backward compat but no longer used) */
.hero-card {
display: inline-flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-6);
max-width: 680px;
}
/* Hero content — editorial, no glass, left-aligned by default */
.hero-content {
display: flex;
flex-direction: column;
gap: 1.75rem;
max-width: 760px;
text-shadow: 0 2px 16px rgba(15,23,42,0.45);
}
/* Centered variant (for the new homepage hero) */
.hero-content.hero-centered {
max-width: 1100px;
margin: 0 auto;
text-align: center;
align-items: center;
gap: 1.75rem;
}
.hero-content.hero-centered h1 {
/* Sized so BOTH "Affordable Luxury Tiny Homes" and "Delivered Across the United States"
each fit on a single line at desktop widths. */
font-size: clamp(2rem, 4.6vw, 4rem);
letter-spacing: -0.02em;
line-height: 1.14;
max-width: 40ch; /* room for "Delivered Across the United States" on one line */
margin: 0 auto;
}
.hero-content.hero-centered p {
max-width: 68ch;
margin: 0 auto;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.55;
}
.hero-content.hero-centered .hero-actions {
justify-content: center;
margin-top: 0.5rem;
}
.hero-content.hero-centered .btn-lg {
padding: 1.05rem 2.1rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
}
.hero-content .eyebrow {
text-shadow: none;
font-size: 0.78rem;
letter-spacing: 0.24em;
font-weight: 600;
}
.hero-content h1 {
text-shadow: 0 4px 32px rgba(15,23,42,0.55);
font-size: clamp(3rem, 7.5vw, 5.75rem);
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0;
}
.hero-content p {
text-shadow: 0 2px 8px rgba(15,23,42,0.5);
font-size: clamp(1rem, 1.3vw, 1.15rem);
max-width: 56ch;
line-height: 1.65;
color: rgba(248,250,252,0.88);
margin: 0;
}
.hero-content .hero-meta {
text-shadow: 0 2px 8px rgba(15,23,42,0.5);
display: flex;
gap: 0;
flex-wrap: wrap;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
color: rgba(248,250,252,0.82);
padding-top: 0.75rem;
border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-content .hero-meta span {
padding: 0.25rem 0;
}
.hero-content .hero-meta span + span {
padding-left: 1.25rem;
margin-left: 1.25rem;
border-left: 1px solid rgba(255,255,255,0.14);
}
.hero-content .hero-actions {
text-shadow: none;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
@media (max-width: 640px) {
.hero-content .hero-meta { flex-direction: column; border-top: 0; padding-top: 0; gap: 0.15rem; }
.hero-content .hero-meta span + span { padding-left: 0; margin-left: 0; border-left: 0; }
}
/* Premium deep-navy overlay for home hero — matches brand palette */
.hero.has-video .hero-overlay {
background:
linear-gradient(180deg, rgba(10,26,48,0.72) 0%, rgba(5,14,30,0.85) 100%),
radial-gradient(ellipse at 20% 40%, rgba(200,169,106,0.16), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(15,58,57,0.25), transparent 55%);
}
.hero-meta {
display: flex;
gap: var(--sp-5);
flex-wrap: wrap;
font-size: var(--fs-200);
color: var(--navy-300);
}
.hero-meta strong { color: var(--gold-400); font-weight: 600; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* ---------- CARDS ---------- */
.model-card {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
position: relative;
border: 1px solid rgba(15,23,42,0.05);
}
.model-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-400), var(--gold-500), var(--gold-400));
z-index: 2;
}
.model-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.model-card .media {
aspect-ratio: 4/3;
background: var(--navy-100);
overflow: hidden;
position: relative;
}
.model-card .media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.model-card:hover .media img { transform: scale(1.05); }
.model-card .media .tag {
position: absolute; top: 1rem; left: 1rem;
background: rgba(15,23,42,0.85);
color: var(--gold-400);
font-size: var(--fs-100);
font-weight: 700;
padding: 0.35rem 0.75rem;
letter-spacing: 0.1em;
border-radius: var(--r-pill);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.model-card .body {
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.model-card h3 {
margin: 0;
font-size: var(--fs-600);
color: var(--navy-900);
}
.model-card .specs {
display: flex;
gap: var(--sp-4);
font-size: var(--fs-200);
color: var(--navy-600);
padding-block: var(--sp-2);
border-top: 1px solid var(--navy-200);
border-bottom: 1px solid var(--navy-200);
}
.model-card .specs span { display: inline-flex; gap: 0.3rem; align-items: center; }
.model-card .specs b { color: var(--navy-900); font-weight: 700; }
.model-card .price {
font-family: var(--font-display);
font-size: var(--fs-700);
color: var(--gold-600);
line-height: 1;
}
.model-card .price small { font-family: var(--font-body); font-size: var(--fs-100); font-weight: 500; color: var(--navy-500); display: block; letter-spacing: 0.12em; text-transform: uppercase; }
.model-card .actions {
display: flex;
gap: var(--sp-3);
margin-top: auto;
}
/* ---------- STATS STRIP ---------- */
.stats {
background: var(--navy-900);
color: var(--white);
padding-block: var(--sp-8);
position: relative;
overflow: hidden;
}
.stats::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 50%, rgba(200,169,106,0.12), transparent 45%),
radial-gradient(circle at 85% 50%, rgba(200,169,106,0.12), transparent 45%);
}
.stats .container { position: relative; }
.stats .grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: center; }
.stat-item .num {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.5vw, 3.25rem);
font-weight: 700;
line-height: 1;
color: var(--gold-400);
margin-bottom: var(--sp-2);
}
.stat-item .label {
font-size: var(--fs-100);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy-300);
}
/* ---------- TESTIMONIALS ---------- */
.testimonial {
padding: var(--sp-6);
position: relative;
}
.testimonial::before {
content: "\201C";
font-family: var(--font-display);
font-size: 6rem;
line-height: 1;
color: var(--gold-500);
position: absolute;
top: 0.5rem;
left: 1.2rem;
opacity: 0.6;
}
.testimonial .stars {
color: var(--gold-500);
letter-spacing: 0.1em;
font-size: var(--fs-400);
margin-bottom: var(--sp-3);
position: relative;
z-index: 1;
}
.testimonial blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-400);
line-height: 1.55;
color: var(--navy-800);
margin: 0 0 var(--sp-4);
position: relative;
z-index: 1;
}
.testimonial cite {
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 700;
font-size: var(--fs-200);
color: var(--navy-900);
letter-spacing: 0.02em;
}
.testimonial cite span {
display: block;
font-weight: 400;
font-size: var(--fs-100);
color: var(--navy-500);
margin-top: 0.25rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ---------- FEATURE ICONS ---------- */
.feature {
padding: var(--sp-6) var(--sp-5);
text-align: left;
position: relative;
}
.feature .icon {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
display: inline-flex; align-items: center; justify-content: center;
color: var(--navy-900);
font-size: 1.5rem;
margin-bottom: var(--sp-4);
box-shadow: var(--shadow-gold);
}
.feature h4 {
margin: 0 0 var(--sp-2);
font-size: var(--fs-500);
font-family: var(--font-display);
}
.feature p { font-size: var(--fs-200); color: var(--navy-600); margin: 0; }
/* ---------- FOOTER ---------- */
.site-footer {
background: var(--navy-900);
color: var(--navy-300);
padding-block: var(--sp-8) var(--sp-5);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(200,169,106,0.08), transparent 50%);
}
.site-footer .container { position: relative; }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: var(--sp-7);
padding-bottom: var(--sp-7);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 860px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 540px) {
.footer-grid { grid-template-columns: 1fr; }
}
.footer-brand img { height: 48px; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.footer-brand p { color: var(--navy-400); font-size: var(--fs-200); max-width: 32ch; }
.footer-contact {
display: flex; flex-direction: column; gap: var(--sp-2);
font-size: var(--fs-200);
margin-top: var(--sp-4);
color: var(--navy-300);
}
.footer-contact a { color: var(--gold-400); }
.footer-col h4 {
font-family: var(--font-body);
font-size: var(--fs-100);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-500);
margin: 0 0 var(--sp-4);
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--sp-2);
}
.footer-col a {
font-size: var(--fs-200);
color: var(--navy-300);
}
.footer-col a:hover { color: var(--gold-400); }
.footer-badges {
display: flex;
gap: var(--sp-5);
flex-wrap: wrap;
justify-content: center;
padding: var(--sp-6) 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-badges img {
height: 42px;
filter: grayscale(1) brightness(1.4);
opacity: 0.7;
transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.footer-badges img:hover {
filter: grayscale(0) brightness(1);
opacity: 1;
}
.footer-bottom {
padding-top: var(--sp-5);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
font-size: var(--fs-100);
color: var(--navy-500);
}
/* ---------- PAGE HERO (interior pages, deep brand navy) ---------- */
.page-hero {
background:
radial-gradient(ellipse at 80% 20%, rgba(200,169,106,0.12), transparent 55%),
radial-gradient(ellipse at 15% 85%, rgba(15,58,57,0.3), transparent 55%),
linear-gradient(135deg, #0a1a30 0%, #050e1e 60%, #0a1a30 100%);
color: var(--white);
padding: 10rem 0 5rem;
position: relative;
overflow: hidden;
}
.page-hero h1 {
color: var(--white);
font-size: clamp(2.5rem, 5vw, 4rem);
max-width: 18ch;
margin-bottom: var(--sp-4);
}
.page-hero p { color: var(--navy-300); max-width: 52ch; font-size: var(--fs-400); }
/* Base breadcrumb for light-background usage (safety default) */
.breadcrumb {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy-700);
font-weight: 600;
margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--navy-700); opacity: 0.7; transition: color 180ms var(--ease), opacity 180ms var(--ease); }
.breadcrumb a:hover { opacity: 1; color: var(--gold-600); }
.page-hero .breadcrumb {
font-size: var(--fs-100);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-400);
margin-bottom: var(--sp-4);
}
.page-hero .breadcrumb a { color: var(--gold-400); opacity: 0.6; }
.page-hero .breadcrumb a:hover { opacity: 1; }
.page-hero .sphere-1 { top: 20%; right: 12%; }
.page-hero .sphere-2 { bottom: 15%; right: 40%; }
.page-hero .sphere-3 { top: 55%; right: 8%; }
/* ---------- FORM ---------- */
.contact-form {
display: grid;
gap: var(--sp-4);
grid-template-columns: 1fr 1fr;
}
.contact-form .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
font-size: var(--fs-100);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--navy-700);
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 0.95rem 1rem;
border: 1px solid var(--navy-200);
border-radius: var(--r-sm);
background: rgba(255,255,255,0.85);
font-size: var(--fs-300);
color: var(--navy-900);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--gold-500);
box-shadow: 0 0 0 4px rgba(200,169,106,0.15);
}
.form-field textarea { resize: vertical; min-height: 120px; }
/* ---------- TABLE (financing) ---------- */
.finance-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--navy-200);
}
.finance-table thead {
background: var(--navy-900);
color: var(--white);
}
.finance-table th,
.finance-table td {
padding: 1rem 1.25rem;
text-align: left;
font-size: var(--fs-200);
}
.finance-table th {
font-size: var(--fs-100);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-400);
}
.finance-table tbody tr { border-bottom: 1px solid var(--navy-200); }
.finance-table tbody tr:nth-child(odd) { background: var(--navy-50); }
.finance-table tbody tr:last-child { border-bottom: 0; }
.finance-table tbody td:first-child { font-weight: 600; color: var(--navy-900); }
.finance-table tbody td.apr { color: var(--gold-600); font-weight: 700; }
/* ---------- FAQ / ACCORDION ---------- */
.accordion { display: flex; flex-direction: column; gap: var(--sp-3); }
.accordion details {
background: var(--white);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 1rem 1.5rem;
transition: box-shadow var(--dur-fast) var(--ease);
}
.accordion details[open] {
box-shadow: var(--shadow-md);
border-color: var(--gold-400);
}
.accordion summary {
cursor: pointer;
list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
font-family: var(--font-display);
font-size: var(--fs-500);
font-weight: 700;
color: var(--navy-900);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: "+";
font-size: 1.5rem;
font-weight: 300;
color: var(--gold-500);
transition: transform var(--dur-fast) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion p { margin: 1rem 0 0; color: var(--navy-600); }
/* ---------- FINAL CTA (refined, professional) ---------- */
.final-cta {
position: relative;
padding: 4.5rem 0;
color: #fff;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse at 15% 20%, rgba(200,169,106,0.1), transparent 50%),
radial-gradient(ellipse at 90% 80%, rgba(15,58,57,0.3), transparent 55%),
linear-gradient(180deg, #0a1a30 0%, #050e1e 100%);
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
opacity: 0.9;
}
.final-cta-inner {
max-width: 780px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.final-cta .eyebrow {
color: var(--gold-400);
margin-bottom: 0.75rem;
}
.final-cta h2 {
color: #fff;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 1rem;
max-width: 22ch;
}
.final-cta h2 .highlight { color: var(--gold-400); font-style: italic; }
.final-cta p {
color: rgba(255,255,255,0.72);
font-size: 1rem;
line-height: 1.55;
max-width: 54ch;
margin: 0 0 1.75rem;
}
.final-cta-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1.5rem;
}
.final-cta-caption {
font-size: 0.88rem;
color: rgba(255,255,255,0.55) !important;
margin: 0 !important;
letter-spacing: 0.005em;
}
.final-cta-caption a {
color: var(--gold-400);
font-weight: 600;
font-variant-numeric: tabular-nums;
border-bottom: 1px solid rgba(200,169,106,0.3);
padding-bottom: 1px;
transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.final-cta-caption a:hover {
color: var(--gold-300);
border-color: var(--gold-400);
}
.final-cta-caption .dot {
color: rgba(255,255,255,0.3);
margin: 0 0.5rem;
}
/* Editorial variant - newsletter signup */
.final-cta-editorial .editorial-newsletter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
max-width: 480px;
width: 100%;
margin: 0 0 1.5rem;
}
.final-cta-editorial .editorial-newsletter input {
flex: 1;
min-width: 240px;
padding: 0.95rem 1.25rem;
border-radius: var(--r-sm);
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 1rem;
font-family: inherit;
backdrop-filter: blur(8px);
}
.final-cta-editorial .editorial-newsletter input::placeholder {
color: rgba(255,255,255,0.45);
}
.final-cta-editorial .editorial-newsletter input:focus {
outline: 0;
border-color: var(--gold-400);
background: rgba(255,255,255,0.12);
box-shadow: 0 0 0 3px rgba(200,169,106,0.15);
}
.final-cta-editorial .editorial-newsletter .btn {
padding: 0.95rem 1.75rem;
}
.final-cta-editorial .editorial-newsletter input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Trust variant - warmer, slightly different background */
.final-cta-trust {
background:
radial-gradient(ellipse at 20% 30%, rgba(200,169,106,0.13), transparent 55%),
radial-gradient(ellipse at 85% 75%, rgba(15,58,57,0.28), transparent 55%),
linear-gradient(135deg, #0d1c35 0%, #0a1628 100%);
}
@media (max-width: 768px) {
.final-cta { padding: 3.5rem 0; }
.final-cta h2 { font-size: 1.75rem; }
.final-cta-actions { flex-direction: column; width: 100%; max-width: 320px; }
.final-cta-actions .btn { width: 100%; justify-content: center; }
.final-cta-caption { font-size: 0.82rem; }
.final-cta-caption .dot { display: block; margin: 0.35rem 0; }
}
/* ==========================================================
HOMEPAGE REDESIGN — editorial luxury upgrades
(media bar, process timeline, split panels, owner stories,
home delivery map w/ pins, feature rail, floor plans)
========================================================== */
/* H2 upgrade: editorial-weight display size (Tier 3 #11) */
body.has-hero .section h2,
body.has-hero .section-dark h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: -0.025em;
line-height: 1.1;
}
/* Tightened section padding for premium curated feel (was 9vw / 115px) */
body.has-hero .section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
/* Warm cream section background (used once to break cold-slate rhythm) */
.section-cream {
background:
radial-gradient(circle at 85% 15%, rgba(200,169,106,0.06), transparent 55%),
#FAF5E8 !important;
}
/* Left-align section headers (was centered) */
.section-head-left {
max-width: 60ch;
margin: 0 0 3rem;
}
.section-head-left h2 { margin-top: 0.75rem; }
.section-head-left p.lead { margin: 0; }
/* ---------- MEDIA BAR (trust logos under hero) ---------- */
.media-bar {
padding: 1.5rem 0;
background: var(--navy-50);
border-top: 1px solid var(--navy-200);
border-bottom: 1px solid var(--navy-200);
}
.media-bar .inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
display: flex;
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
flex-wrap: wrap;
justify-content: center;
}
.media-bar .lbl {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--navy-500);
white-space: nowrap;
}
.media-bar .logos {
display: flex;
gap: clamp(1.25rem, 3vw, 2.5rem);
flex-wrap: wrap;
align-items: center;
}
.media-bar .logos img {
height: 38px;
filter: none;
opacity: 1;
transition: transform 200ms var(--ease);
}
.media-bar .logos img:hover { transform: translateY(-2px); }
/* ---------- PROCESS TIMELINE (4-step, animated) ---------- */
.process {
position: relative;
max-width: 1120px;
margin: 0 auto;
}
/* (timeline connector removed — too noisy; dots float clean) */
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
position: relative;
z-index: 1;
}
@media (max-width: 860px) {
.process::before { display: none; }
.process-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.process-steps { grid-template-columns: 1fr; }
}
.process-step {
text-align: center;
padding: 1.5rem 1rem;
}
.process-step .dot {
width: 88px;
height: 88px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255,243,212,0.55), transparent 55%),
linear-gradient(135deg, var(--navy-900), var(--navy-800));
border: 2px solid var(--gold-500);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 700;
color: var(--gold-400);
box-shadow: 0 10px 30px rgba(15,23,42,0.15);
position: relative;
}
.process-step .dot::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid rgba(200,169,106,0.35);
}
.process-step h4 {
font-family: var(--font-display);
font-size: 1.15rem;
margin: 0 0 0.4rem;
color: var(--navy-900);
}
.process-step p {
font-size: 0.9rem;
color: var(--navy-600);
margin: 0;
line-height: 1.55;
}
/* ---------- CINEMATIC PHOTO BREAK (full-bleed signature image) ---------- */
.cinematic-break {
position: relative;
height: clamp(420px, 55vh, 620px);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.cinematic-break::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0) 40%, rgba(15,23,42,0.75) 100%);
pointer-events: none;
}
.cinematic-break .caption {
position: relative;
z-index: 1;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad) 2.5rem;
color: var(--white);
width: 100%;
}
.cinematic-break .caption .eyebrow {
color: var(--gold-400);
margin-bottom: 0.5rem;
}
.cinematic-break .caption h3 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
color: var(--white);
max-width: 28ch;
margin: 0;
line-height: 1.15;
text-shadow: 0 4px 24px rgba(15,23,42,0.55);
}
/* ---------- PULL-QUOTE SPLIT VARIANT (no image, giant serif quote) ---------- */
.split-panel.quote-only {
grid-template-columns: 1fr;
text-align: center;
padding-block: clamp(3rem, 7vw, 5.5rem);
max-width: 900px;
}
.split-panel.quote-only .split-media { display: none; }
.split-panel.quote-only .num-callout {
display: block;
font-size: clamp(3rem, 6vw, 5rem);
margin-bottom: 1.25rem;
color: var(--gold-500);
}
.split-panel.quote-only .num-callout sub { display: block; margin-left: 0; margin-top: 0.25rem; }
.split-panel.quote-only h3 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
max-width: 22ch;
margin-inline: auto;
line-height: 1.2;
}
.split-panel.quote-only p {
max-width: 52ch;
margin-inline: auto;
font-size: 1.1rem;
}
.split-panel.quote-only .divider-rule {
width: 48px;
height: 2px;
background: var(--gold-500);
margin: 1.5rem auto;
border: 0;
}
/* ---------- EDITORIAL SPLIT PANELS ---------- */
.split-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
max-width: 1240px;
margin: 0 auto;
padding-block: clamp(2rem, 5vw, 4.5rem);
}
.split-panel + .split-panel { border-top: 1px solid var(--navy-200); }
.split-panel.reverse .split-media { order: 2; }
@media (max-width: 860px) {
.split-panel { grid-template-columns: 1fr; gap: 2rem; }
.split-panel.reverse .split-media { order: 0; }
}
.split-media {
aspect-ratio: 4/3;
overflow: hidden;
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
position: relative;
}
.split-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--ease-out);
}
.split-panel:hover .split-media img { transform: scale(1.03); }
.split-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 50%, rgba(15,23,42,0.15));
pointer-events: none;
}
.split-content h3 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin: 0.75rem 0 1rem;
letter-spacing: -0.015em;
}
.split-content p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--navy-600);
}
.split-content .num-callout {
display: inline-block;
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 700;
color: var(--gold-500);
line-height: 0.9;
margin-bottom: 0.5rem;
letter-spacing: -0.03em;
}
.split-content .num-callout sub {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--navy-500);
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
vertical-align: baseline;
margin-left: 0.4rem;
}
/* ---------- OWNER STORIES (merged testimonials + delivery) ---------- */
.owner-story {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--navy-200);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.owner-story:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--gold-400);
}
.owner-story .photo {
aspect-ratio: 4/3;
overflow: hidden;
position: relative;
}
.owner-story .photo img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease-out);
}
.owner-story:hover .photo img { transform: scale(1.05); }
.owner-story .photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, rgba(15,23,42,0.55));
}
.owner-story .photo .meta {
position: absolute;
left: 1.25rem;
bottom: 1rem;
color: var(--white);
z-index: 1;
}
.owner-story .photo .meta .model {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-400);
font-weight: 700;
}
.owner-story .photo .meta .loc {
font-family: var(--font-display);
font-size: 1.15rem;
margin-top: 0.15rem;
font-weight: 700;
}
.owner-story .body {
padding: 1.75rem;
}
.owner-story .stars {
color: var(--gold-500);
letter-spacing: 0.1em;
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.owner-story blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
line-height: 1.55;
color: var(--navy-800);
margin: 0 0 1rem;
}
.owner-story cite {
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 700;
font-size: 0.9rem;
color: var(--navy-900);
}
.owner-story cite span {
display: block;
font-weight: 400;
font-size: 0.72rem;
color: var(--navy-500);
margin-top: 0.2rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ==========================================================
STATE PAGE SYSTEM — modelled on live /tiny-homes-in-california/
Premium version with editorial typography + clean spacing
========================================================== */
/* Hero */
.state-hero {
background:
radial-gradient(ellipse at 85% 20%, rgba(200,169,106,0.14), transparent 55%),
radial-gradient(ellipse at 15% 85%, rgba(15,58,57,0.3), transparent 55%),
linear-gradient(135deg, #0a1a30 0%, #050e1e 60%, #0a1a30 100%);
color: var(--white);
padding: 10rem 0 5rem;
position: relative;
overflow: hidden;
text-align: center;
}
.state-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center top, rgba(200,169,106,0.08), transparent 60%);
pointer-events: none;
}
.state-hero > * { position: relative; z-index: 1; }
.state-hero-eyebrow {
display: inline-block;
padding: 0.5rem 1.25rem;
background: rgba(200,169,106,0.12);
border: 1px solid rgba(200,169,106,0.35);
border-radius: var(--r-pill);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-400);
margin-bottom: 2rem;
}
.state-hero h1 {
color: var(--white);
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
letter-spacing: -0.035em;
line-height: 1.05;
max-width: 24ch;
margin: 0 auto 1.5rem;
}
.state-hero-sub {
color: rgba(248,250,252,0.75);
font-size: clamp(1rem, 1.25vw, 1.2rem);
line-height: 1.65;
max-width: 68ch;
margin: 0 auto 2.5rem;
}
.state-hero-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.state-hero-trust {
display: inline-flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
font-size: 0.875rem;
color: rgba(248,250,252,0.75);
}
.state-hero-trust span:not(:first-child):not(:last-child) {
color: var(--gold-400);
opacity: 0.6;
}
/* Stats strip (just below hero) */
.state-stats-strip {
background: var(--navy-900);
color: var(--white);
padding: 2.5rem 0;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.state-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1.5rem;
text-align: center;
}
.state-stat-num {
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 800;
color: var(--gold-400);
line-height: 1;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.state-stat-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
/* Section wrappers */
.state-section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.state-section-white { background: var(--white); }
.state-section-cream { background: #F8F4EA; } /* cream like the live site */
.state-section-dark { background: var(--navy-900); color: var(--white); }
.state-section-dark h2 { color: var(--white); }
.state-section-dark p { color: rgba(255,255,255,0.72); }
.state-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 3rem;
}
.state-section-head h2 {
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -0.03em;
margin: 0.75rem 0 0.75rem;
}
.state-section-head p {
font-size: 1.05rem;
color: var(--navy-600);
margin: 0;
}
.state-section-dark .state-section-head p { color: rgba(255,255,255,0.7); }
/* Pill eyebrow (cream pill with gold uppercase text) */
.state-pill {
display: inline-block;
padding: 0.5rem 1.25rem;
background: rgba(200,169,106,0.14);
border-radius: var(--r-pill);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-700);
}
.state-pill-dark {
background: rgba(200,169,106,0.14);
color: var(--gold-400);
}
.state-section-cta {
text-align: center;
margin-top: 3rem;
}
/* Featured-model cards (mini cards with gold-framed photo + dark CTA) */
.state-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.75rem;
max-width: 1200px;
margin: 0 auto;
}
.state-card {
background: var(--white);
border: 1px solid var(--gold-300);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.state-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(15,23,42,0.12);
border-color: var(--gold-500);
}
.state-card-media {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--navy-100);
position: relative;
}
.state-card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 500ms var(--ease-out);
}
.state-card:hover .state-card-media img { transform: scale(1.06); }
.state-card-tag {
position: absolute;
top: 1rem; left: 1rem;
background: rgba(15,23,42,0.9);
color: var(--gold-400);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
border-radius: var(--r-pill);
backdrop-filter: blur(6px);
}
.state-card-body { padding: 1.5rem 1.5rem 1.75rem; }
.state-card-body h3 {
font-size: 1.35rem;
margin: 0 0 0.5rem;
color: var(--navy-900);
letter-spacing: -0.02em;
}
.state-card-specs {
display: flex;
gap: 1rem;
align-items: center;
font-size: 0.85rem;
color: var(--navy-600);
padding: 0.5rem 0;
border-top: 1px solid var(--navy-200);
border-bottom: 1px solid var(--navy-200);
margin-bottom: 1rem;
}
.state-card-specs b { color: var(--navy-900); font-weight: 700; }
.state-card-price {
font-size: 1.25rem;
font-weight: 800;
color: var(--gold-600);
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.state-card-price span {
font-weight: 500;
font-size: 0.85rem;
color: var(--navy-500);
letter-spacing: 0;
}
/* Why [State] grid */
.state-why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.state-why-item {
background: var(--white);
border-radius: var(--r-lg);
padding: 2rem 1.75rem;
box-shadow: 0 4px 16px rgba(15,23,42,0.04);
transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.state-why-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
.state-why-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--navy-900);
margin-bottom: 1.25rem;
box-shadow: 0 8px 24px rgba(200,169,106,0.25);
}
.state-why-icon .icon-svg { stroke: var(--navy-900); }
.state-why-item h3 {
font-size: 1.2rem;
margin: 0 0 0.5rem;
color: var(--navy-900);
letter-spacing: -0.015em;
}
.state-why-item p {
font-size: 0.925rem;
color: var(--navy-600);
line-height: 1.6;
margin: 0;
}
/* Financing + buyer profile side-by-side */
.state-finance-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 860px) {
.state-finance-layout { grid-template-columns: 1fr; }
}
.state-finance-copy h2 {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
color: var(--white);
margin: 0.75rem 0 1rem;
line-height: 1.15;
letter-spacing: -0.025em;
}
.state-finance-copy > p {
color: rgba(255,255,255,0.72);
font-size: 1.05rem;
line-height: 1.65;
margin: 0 0 1.5rem;
max-width: 52ch;
}
.state-finance-bullets {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.state-finance-bullets li {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255,255,255,0.88);
font-size: 1rem;
}
.state-finance-bullets .icon-svg { color: var(--gold-400); flex-shrink: 0; }
.state-buyer-panel {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-lg);
padding: 2rem 2rem 1.75rem;
}
.state-buyer-panel h3 {
color: var(--white);
font-size: 1.25rem;
margin: 0 0 0.5rem;
letter-spacing: -0.015em;
}
.state-buyer-sub {
color: rgba(255,255,255,0.55);
font-size: 0.85rem;
margin: 0 0 1.5rem;
}
.buyer-bar { margin-bottom: 1.25rem; }
.buyer-bar-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.4rem;
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
}
.buyer-bar-head b {
color: var(--gold-400);
font-weight: 700;
font-size: 1rem;
}
.buyer-bar-track {
height: 6px;
background: rgba(255,255,255,0.08);
border-radius: 3px;
overflow: hidden;
}
.buyer-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
border-radius: 3px;
transition: width 800ms var(--ease-out);
}
/* How It Works */
.state-steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.state-step { padding: 1rem 0.75rem; }
.state-step-num {
width: 76px; height: 76px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
box-shadow: 0 10px 30px rgba(200,169,106,0.3);
}
.state-step h4 {
font-size: 1.15rem;
margin: 0 0 0.5rem;
color: var(--navy-900);
letter-spacing: -0.015em;
}
.state-step p {
font-size: 0.925rem;
color: var(--navy-600);
line-height: 1.6;
margin: 0;
}
/* Testimonial strip */
.state-testimonial-strip {
background: #F4F4F5;
padding: 4rem 0;
}
.state-testimonial {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.state-testimonial-stars {
color: var(--gold-500);
font-size: 1.15rem;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.state-testimonial blockquote {
font-size: clamp(1.15rem, 2vw, 1.5rem);
line-height: 1.5;
color: var(--navy-900);
margin: 0 0 2rem;
font-style: italic;
letter-spacing: -0.015em;
}
.state-testimonial-author {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-align: left;
}
.state-testimonial-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.state-testimonial-name { font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }
.state-testimonial-loc { color: var(--navy-500); font-size: 0.8rem; }
/* FAQ */
.state-faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.state-faq {
background: var(--white);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 1.25rem 1.5rem;
transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.state-faq[open] {
box-shadow: 0 8px 24px rgba(15,23,42,0.08);
border-color: var(--gold-500);
}
.state-faq summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.05rem;
font-weight: 600;
color: var(--navy-900);
letter-spacing: -0.01em;
}
.state-faq summary::-webkit-details-marker { display: none; }
.faq-plus {
color: var(--gold-500);
font-size: 1.4rem;
font-weight: 300;
transition: transform 180ms var(--ease);
flex-shrink: 0;
}
.state-faq[open] .faq-plus { transform: rotate(45deg); }
.state-faq p {
margin: 1rem 0 0;
color: var(--navy-600);
font-size: 0.975rem;
line-height: 1.65;
}
/* Final CTA */
.state-final-cta {
background:
radial-gradient(circle at 20% 20%, rgba(200,169,106,0.22), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(200,169,106,0.18), transparent 50%),
linear-gradient(135deg, var(--navy-900) 0%, #0a1628 100%);
color: var(--white);
padding: 5rem 0;
text-align: center;
}
.state-final-cta h2 {
color: var(--white);
font-size: clamp(2rem, 4vw, 3rem);
max-width: 24ch;
margin: 0 auto 1rem;
letter-spacing: -0.03em;
}
.state-final-cta > .container > p {
color: rgba(255,255,255,0.72);
max-width: 56ch;
margin: 0 auto 2rem;
font-size: 1.05rem;
}
.state-final-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.state-final-micro {
font-size: 0.825rem;
color: rgba(255,255,255,0.5);
margin: 0;
}
.state-final-micro a {
color: var(--gold-400);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- DELIVERY COST CALCULATOR ---------- */
.delivery-calc {
max-width: 1100px;
margin: 0 auto;
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--teal-800) 100%);
color: var(--white);
border-radius: var(--r-lg);
padding: clamp(2.5rem, 5vw, 4rem);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.delivery-calc::before {
content: "";
position: absolute;
top: -30%;
right: -15%;
width: 60%;
height: 140%;
background: radial-gradient(circle, rgba(200,169,106,0.18), transparent 65%);
pointer-events: none;
}
.delivery-calc > * { position: relative; z-index: 1; }
.delivery-calc .calc-header { text-align: center; margin-bottom: 2.5rem; }
.delivery-calc .calc-header h2 { color: var(--white); margin-bottom: 0.75rem; }
.delivery-calc .calc-header .lead { color: rgba(255,255,255,0.78); max-width: 56ch; margin: 0 auto; }
.calc-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: end;
max-width: 640px;
margin: 0 auto 1rem;
}
@media (max-width: 560px) { .calc-form { grid-template-columns: 1fr; } }
.calc-input-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.calc-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-400);
}
#calcZip {
padding: 1.1rem 1.25rem;
font-size: 1.35rem;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.12em;
color: var(--white);
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.18);
border-radius: var(--r-pill);
text-align: center;
transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
#calcZip::placeholder { color: rgba(255,255,255,0.35); font-weight: 400; letter-spacing: 0.04em; }
#calcZip:focus {
outline: none;
border-color: var(--gold-400);
background: rgba(255,255,255,0.12);
box-shadow: 0 0 0 4px rgba(200,169,106,0.20);
}
.calc-submit { height: 60px; }
.calc-error {
text-align: center;
color: #fca5a5;
font-size: 0.9rem;
margin: 0.5rem 0 0;
padding: 0.65rem 1rem;
background: rgba(239,68,68,0.12);
border: 1px solid rgba(239,68,68,0.3);
border-radius: var(--r-sm);
max-width: 640px;
margin-inline: auto;
}
.calc-result {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.12);
animation: calcFadeIn 400ms var(--ease-out);
}
@keyframes calcFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.calc-distance {
text-align: center;
font-size: 1.05rem;
color: rgba(255,255,255,0.75);
margin-bottom: 2rem;
}
.calc-dist-num {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--gold-400);
display: inline-block;
line-height: 1;
vertical-align: -0.2em;
margin-right: 0.35rem;
}
.calc-zip-echo { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-left: 0.35rem; }
.calc-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .calc-options { grid-template-columns: 1fr; } }
.calc-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-md);
padding: 1.75rem 1.75rem 1.5rem;
position: relative;
}
.calc-card.featured {
background: rgba(200,169,106,0.08);
border-color: rgba(200,169,106,0.4);
box-shadow: 0 12px 40px rgba(200,169,106,0.15);
}
.calc-card-badge {
position: absolute;
top: -11px; right: 1.25rem;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 0.75rem;
border-radius: var(--r-pill);
}
.calc-card-label {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-400);
margin-bottom: 0.5rem;
}
.calc-card-price {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
color: var(--white);
line-height: 1;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.calc-card.featured .calc-card-price { color: var(--gold-400); }
.calc-card-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.calc-card-list li {
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
padding-left: 1.5rem;
position: relative;
line-height: 1.45;
}
.calc-card-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.9rem;
height: 2px;
background: var(--gold-500);
}
.calc-card.featured .calc-card-list li { color: rgba(255,255,255,0.88); }
.calc-disclaimer {
text-align: center;
font-size: 0.8rem;
color: rgba(255,255,255,0.55);
font-style: italic;
max-width: 62ch;
margin: 0 auto 1.5rem;
line-height: 1.55;
}
.calc-cta {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.calc-cta .btn-outline-dark {
background: transparent;
border: 1.5px solid rgba(255,255,255,0.4);
color: var(--white);
}
.calc-cta .btn-outline-dark:hover {
background: var(--white);
color: var(--navy-900);
border-color: var(--white);
}
/* ---------- HOMEPAGE DELIVERY MAP EMBED (iframe) ---------- */
.home-map-embed {
aspect-ratio: 21/9; /* editorial proportion, not cinematic overload */
max-width: 980px; /* was 1240px — tighter, less dominant */
margin: 0 auto;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: var(--navy-900);
position: relative;
}
.home-map-embed iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 760px) {
.home-map-embed { aspect-ratio: 3/2; } /* slightly taller on phones for legibility */
}
/* ---------- (legacy inline SVG map styles — kept for other pages) ---------- */
.home-map-wrap {
position: relative;
max-width: 1120px;
margin: 0 auto;
}
.home-map {
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--navy-900), var(--navy-800), var(--teal-800));
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
position: relative;
}
.home-map svg { width: 100%; height: 100%; display: block; }
.home-map .us-outline {
fill: rgba(255,255,255,0.05);
stroke: rgba(255,255,255,0.2);
stroke-width: 1.5;
}
.home-map .hq-dot {
fill: var(--gold-400);
filter: drop-shadow(0 0 8px var(--gold-400));
}
.home-map .hq-ring {
fill: none;
stroke: rgba(200,169,106,0.35);
stroke-width: 1.5;
stroke-dasharray: 4 6;
}
.home-map .pin {
cursor: pointer;
transition: transform 200ms var(--ease-out);
}
.home-map .pin:hover { transform: translate(0, -3px); }
.home-map .pin circle {
fill: var(--gold-400);
stroke: var(--white);
stroke-width: 2;
transition: r 180ms var(--ease-out), fill 180ms var(--ease-out);
}
.home-map .pin:hover circle,
.home-map .pin.active circle {
r: 9;
fill: var(--gold-300);
}
.home-map .pin text {
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
fill: var(--white);
text-anchor: middle;
opacity: 0;
transition: opacity 200ms var(--ease);
pointer-events: none;
}
.home-map .pin:hover text,
.home-map .pin.active text { opacity: 1; }
.home-map .map-info {
position: absolute;
top: 1.5rem; left: 1.5rem;
background: rgba(15,23,42,0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
color: var(--white);
max-width: 260px;
}
.home-map .map-info .eyebrow {
color: var(--gold-400);
font-size: 0.7rem;
margin-bottom: 0.5rem;
}
.home-map .map-info .num {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 700;
color: var(--gold-400);
line-height: 1;
margin-bottom: 0.25rem;
}
.home-map .map-info p {
font-size: 0.8rem;
color: var(--navy-300);
margin: 0;
line-height: 1.5;
}
.home-map .tooltip {
position: absolute;
background: var(--white);
color: var(--navy-900);
padding: 0.6rem 0.85rem;
border-radius: var(--r-sm);
font-size: 0.78rem;
font-weight: 500;
box-shadow: var(--shadow-md);
pointer-events: none;
opacity: 0;
transform: translate(-50%, -120%);
transition: opacity 180ms var(--ease);
white-space: nowrap;
z-index: 5;
}
.home-map .tooltip.visible { opacity: 1; }
.home-map .tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--white);
}
.home-map .tooltip strong {
color: var(--gold-600);
display: block;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
/* ---------- FEATURE RAIL (one big article + small links) ---------- */
.feature-rail {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 3rem;
max-width: 1240px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 860px) { .feature-rail { grid-template-columns: 1fr; } }
.feature-rail .hero-article {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
border: 1px solid var(--navy-200);
}
.feature-rail .hero-article:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.feature-rail .hero-article .media {
aspect-ratio: 16/9;
overflow: hidden;
}
.feature-rail .hero-article .media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 900ms var(--ease-out);
}
.feature-rail .hero-article:hover .media img { transform: scale(1.04); }
.feature-rail .hero-article .body {
padding: 2rem;
}
.feature-rail .hero-article h3 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0.75rem 0 0.75rem;
}
.feature-rail .hero-article blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.5;
color: var(--navy-700);
border-left: 3px solid var(--gold-500);
padding-left: 1.25rem;
margin: 1rem 0 1.5rem;
}
.feature-rail .side-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.feature-rail .side-list .side-article {
display: flex;
gap: 1rem;
padding: 1.25rem;
background: var(--white);
border-radius: var(--r-md);
border: 1px solid var(--navy-200);
transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.feature-rail .side-list .side-article:hover {
border-color: var(--gold-400);
transform: translateX(4px);
}
.feature-rail .side-article .thumb {
width: 72px;
height: 72px;
border-radius: var(--r-sm);
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.feature-rail .side-article h4 {
font-family: var(--font-display);
font-size: 1.05rem;
margin: 0.1rem 0 0.3rem;
line-height: 1.25;
}
.feature-rail .side-article .cat {
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
}
.feature-rail .side-article p {
margin: 0;
font-size: 0.82rem;
color: var(--navy-500);
}
/* ---------- FLOOR PLAN MINI (on model cards) ---------- */
.floor-plan-mini {
aspect-ratio: 2/1;
width: 100%;
margin-top: 0.75rem;
border-radius: var(--r-sm);
background: var(--navy-50);
padding: 0.75rem;
border: 1px solid var(--navy-200);
position: relative;
}
.floor-plan-mini svg { width: 100%; height: 100%; display: block; }
.floor-plan-mini .room {
fill: rgba(200,169,106,0.15);
stroke: var(--gold-500);
stroke-width: 1;
}
.floor-plan-mini .room.bed {
fill: rgba(15,23,42,0.08);
stroke: var(--navy-700);
}
.floor-plan-mini .room.bath {
fill: rgba(15,58,57,0.12);
stroke: var(--teal-700);
}
.floor-plan-mini text {
font-family: var(--font-body);
font-size: 7px;
font-weight: 700;
fill: var(--navy-700);
text-anchor: middle;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.floor-plan-mini .plan-label {
position: absolute;
top: 0.35rem;
right: 0.5rem;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--navy-500);
text-transform: uppercase;
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- UTILITY ---------- */
.max-640 { max-width: 640px; }
.max-720 { max-width: 720px; }
.mx-auto { margin-inline: auto; }
.only-lg { display: none; }
@media (min-width: 1024px) { .only-lg { display: inline-flex; } .hide-lg { display: none; } }
/* ============================================================
RESOURCES PAGES (phase5) - Custom Build / Blog / Article / Financing
============================================================ */
/* ---------- SHARED RESOURCES HERO ---------- */
.resources-hero {
position: relative;
min-height: 640px;
padding: 10rem 0 6rem;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.resources-hero-media { position: absolute; inset: 0; z-index: -2; }
.resources-hero-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.resources-hero-scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,26,48,0.78) 0%, rgba(5,14,30,0.92) 100%),
radial-gradient(60% 80% at 20% 40%, rgba(200,169,106,0.16) 0%, transparent 80%);
}
.resources-hero-inner { position: relative; max-width: 1080px; }
.resources-hero-inner h1 {
color: #fff;
font-size: clamp(2.25rem, 4.6vw, 3.75rem);
letter-spacing: -0.025em;
max-width: 22ch;
margin: 1rem 0 1.25rem;
}
.resources-hero-inner h1 .highlight { color: var(--gold-400); font-style: italic; }
.resources-hero-lead {
font-size: 1.2rem;
line-height: 1.55;
color: rgba(255,255,255,0.86);
max-width: 54ch;
margin-bottom: 2rem;
}
.eyebrow-on-dark { color: var(--gold-400) !important; letter-spacing: 0.18em; }
.breadcrumb-on-dark { color: rgba(255,255,255,0.72); margin-bottom: 1.5rem; }
.breadcrumb-on-dark a { color: rgba(255,255,255,0.72); }
.breadcrumb-on-dark a:hover { color: #fff; }
.breadcrumb-on-dark span { color: rgba(255,255,255,0.95); font-weight: 600; }
.resources-hero-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.16);
max-width: 900px;
}
.resources-hero-trust > div { display: flex; flex-direction: column; }
.resources-hero-trust strong {
font-size: 1.75rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.resources-hero-trust span {
font-size: 0.8rem;
color: rgba(255,255,255,0.68);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 0.35rem;
}
.resources-hero-trust-financing strong { font-size: 1.1rem; letter-spacing: -0.01em; }
.resources-hero-trust-financing span { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: rgba(255,255,255,0.75); line-height: 1.45; margin-top: 0.5rem; }
@media (max-width: 768px) {
.resources-hero { padding: 8rem 0 4rem; min-height: unset; }
.resources-hero-trust { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; }
.resources-hero-trust strong { font-size: 1.4rem; }
}
/* ---------- CUSTOM BUILD PROCESS ---------- */
.custom-process { padding: 6rem 0; background: #fff; }
.custom-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.custom-process-step {
background: var(--white);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 2rem 1.75rem;
position: relative;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.custom-process-step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gold-400);
}
.custom-process-num {
position: absolute;
top: -20px;
left: 1.75rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
font-weight: 800;
font-size: 1.25rem;
display: grid;
place-items: center;
box-shadow: var(--shadow-gold);
}
.custom-process-icon {
margin-top: 1.5rem;
margin-bottom: 1rem;
width: 52px;
height: 52px;
border-radius: var(--r-sm);
background: var(--navy-50);
color: var(--navy-800);
display: grid;
place-items: center;
}
.custom-process-step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.custom-process-step p { font-size: 0.95rem; color: var(--navy-700); margin-bottom: 1rem; }
.custom-process-meta {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
}
@media (max-width: 1024px) { .custom-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .custom-process-grid { grid-template-columns: 1fr; } }
/* ---------- DEPOSIT TRANSPARENCY ---------- */
.custom-deposit { padding: 6rem 0; background: var(--navy-900); color: #fff; }
.custom-deposit-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 3rem;
align-items: center;
}
.custom-deposit-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(200,169,106,0.08) 100%);
border: 1px solid rgba(200,169,106,0.3);
border-radius: var(--r-lg);
padding: 3rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.custom-deposit-card::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle at center, rgba(200,169,106,0.1) 0%, transparent 40%);
pointer-events: none;
}
.custom-deposit-price {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.5rem, 8vw, 6.5rem);
line-height: 1;
color: var(--gold-400);
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.5rem;
margin: 1.5rem 0 0.5rem;
letter-spacing: -0.03em;
}
.custom-deposit-price .curr { font-size: 0.45em; margin-top: 0.4em; font-weight: 700; }
.custom-deposit-price .num { font-variant-numeric: tabular-nums; }
.custom-deposit-label {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
font-weight: 700;
margin-bottom: 1.25rem;
}
.custom-deposit-note { color: rgba(255,255,255,0.85); max-width: 36ch; margin: 0 auto; font-size: 1rem; }
.custom-deposit-copy h2 { color: #fff; margin-bottom: 1.25rem; }
.custom-deposit-copy > p { color: rgba(255,255,255,0.78); font-size: 1.1rem; margin-bottom: 2rem; }
.custom-deposit-list { list-style: none; padding: 0; margin: 0; }
.custom-deposit-list li {
display: grid;
grid-template-columns: 38px 1fr;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
align-items: center;
}
.custom-deposit-list li:last-child { border-bottom: 0; }
.custom-deposit-ic {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(200,169,106,0.15);
color: var(--gold-400);
display: grid;
place-items: center;
}
.custom-deposit-list strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 0.15rem; }
.custom-deposit-list span { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
@media (max-width: 900px) { .custom-deposit-grid { grid-template-columns: 1fr; gap: 2rem; } }
/* ---------- FEATURES ---------- */
.custom-features { padding: 6rem 0; background: var(--cream); }
.custom-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.custom-feature {
background: #fff;
border-radius: var(--r-md);
padding: 2rem 1.75rem;
border: 1px solid rgba(15,23,42,0.06);
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.custom-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.custom-feature-icon {
width: 56px;
height: 56px;
border-radius: var(--r-sm);
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: grid;
place-items: center;
margin-bottom: 1.25rem;
}
.custom-feature h3 { font-size: 1.2rem; margin-bottom: 0.65rem; }
.custom-feature p { font-size: 0.95rem; margin: 0; color: var(--navy-700); }
@media (max-width: 1024px) { .custom-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .custom-features-grid { grid-template-columns: 1fr; } }
/* ---------- USE CASES ---------- */
.custom-use-cases { padding: 6rem 0; background: #fff; }
.custom-use-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 3rem;
}
.custom-use-card {
padding: 2rem;
border-radius: var(--r-md);
background: var(--navy-50);
border: 1px solid var(--navy-200);
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms var(--ease);
}
.custom-use-card:hover {
transform: translateY(-4px);
background: #fff;
box-shadow: var(--shadow-lg);
border-color: var(--gold-400);
}
.custom-use-ic {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--navy-900);
color: var(--gold-400);
display: grid;
place-items: center;
margin-bottom: 1.25rem;
}
.custom-use-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.custom-use-card p { font-size: 0.92rem; margin: 0; color: var(--navy-700); }
@media (max-width: 1024px) { .custom-use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .custom-use-grid { grid-template-columns: 1fr; } }
/* ---------- OPTIONS ---------- */
.custom-options { padding: 6rem 0; background: var(--navy-50); }
.custom-options-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 3rem;
}
.custom-options-card {
background: #fff;
border-radius: var(--r-md);
padding: 2rem 1.75rem;
border: 1px solid var(--navy-200);
}
.custom-options-card h3 {
font-size: 1.05rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold-600);
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--navy-200);
}
.custom-options-card ul { list-style: none; padding: 0; margin: 0; }
.custom-options-card li {
font-size: 0.92rem;
color: var(--navy-800);
padding: 0.55rem 0;
border-bottom: 1px dashed var(--navy-200);
}
.custom-options-card li:last-child { border-bottom: 0; }
.custom-options-cta {
margin-top: 3rem;
text-align: center;
padding: 2.5rem;
background: #fff;
border-radius: var(--r-md);
border: 1px solid var(--navy-200);
}
.custom-options-cta p { max-width: 50ch; margin: 0 auto 1.5rem; font-size: 1.05rem; }
@media (max-width: 1024px) { .custom-options-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .custom-options-grid { grid-template-columns: 1fr; } }
/* ---------- TIMELINE ---------- */
.custom-timeline { padding: 6rem 0; background: #fff; }
.custom-timeline-bar {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
position: relative;
}
.custom-timeline-bar::before {
content: "";
position: absolute;
top: 40px;
left: 5%;
right: 5%;
height: 4px;
background: linear-gradient(90deg, var(--gold-400), var(--gold-500), var(--gold-400));
border-radius: 2px;
z-index: 0;
}
.custom-timeline-stage {
position: relative;
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 2.5rem 1.5rem 1.75rem;
margin-top: 40px;
z-index: 1;
}
.custom-timeline-stage::before {
content: "";
position: absolute;
top: -48px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--gold-500);
border: 4px solid #fff;
box-shadow: 0 0 0 4px var(--gold-200);
}
.custom-timeline-stage .s-num {
display: block;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
margin-bottom: 0.5rem;
}
.custom-timeline-stage strong { display: block; color: var(--navy-900); font-size: 1.1rem; margin-bottom: 0.5rem; }
.custom-timeline-stage p { font-size: 0.9rem; color: var(--navy-700); margin: 0; }
@media (max-width: 900px) {
.custom-timeline-bar { grid-template-columns: 1fr; }
.custom-timeline-bar::before { display: none; }
.custom-timeline-stage { margin-top: 3.5rem; }
}
/* ============================================================
BLOG INDEX
============================================================ */
.blog-hero .blog-hero-art {
position: absolute; inset: 0;
background:
radial-gradient(60% 80% at 80% 20%, rgba(200,169,106,0.3) 0%, transparent 60%),
radial-gradient(50% 70% at 20% 70%, rgba(15,58,57,0.4) 0%, transparent 60%),
linear-gradient(135deg, #0b1a30 0%, #071123 100%);
}
.blog-search {
display: flex;
gap: 0.5rem;
align-items: center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
border-radius: var(--r-pill);
padding: 0.5rem 0.5rem 0.5rem 1.25rem;
max-width: 640px;
backdrop-filter: blur(18px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.15);
}
.blog-search-ic { color: rgba(255,255,255,0.7); display: grid; place-items: center; }
.blog-search input {
flex: 1;
background: transparent;
border: 0;
outline: none;
color: #fff;
font-size: 1rem;
font-family: inherit;
padding: 0.75rem 0.5rem;
}
.blog-search input::placeholder { color: rgba(255,255,255,0.55); }
.blog-search .btn { padding: 0.75rem 1.5rem; }
.blog-filter-bar {
background: #fff;
border-bottom: 1px solid var(--navy-200);
padding: 1.25rem 0;
position: sticky;
top: 80px;
z-index: 40;
backdrop-filter: blur(12px);
}
.blog-filter-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog-filter-pills .pill {
background: var(--navy-50);
border: 1px solid var(--navy-200);
color: var(--navy-700);
padding: 0.55rem 1.1rem;
border-radius: var(--r-pill);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 180ms var(--ease);
}
.blog-filter-pills .pill:hover { border-color: var(--gold-400); color: var(--navy-900); }
.blog-filter-pills .pill-active {
background: var(--navy-900);
border-color: var(--navy-900);
color: #fff;
}
.blog-featured { padding: 4rem 0 2rem; background: var(--cream); }
.blog-grid-wrap { padding: 4rem 0 6rem; background: var(--cream); }
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2.5rem;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
background: #fff;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
border: 1px solid rgba(15,23,42,0.05);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card-media {
display: block;
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--navy-100);
}
.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-cat {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--gold-500);
color: var(--navy-900);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
border-radius: var(--r-sm);
}
.blog-card-cat-secondary {
background: rgba(15,23,42,0.08);
color: var(--navy-900);
position: static;
}
.blog-tag {
position: absolute;
top: 1rem;
right: 1rem;
background: #fff;
color: var(--navy-900);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.8rem;
border-radius: var(--r-sm);
}
.blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta {
display: flex;
gap: 0.5rem;
align-items: center;
font-size: 0.82rem;
color: var(--navy-500);
margin-bottom: 0.75rem;
}
.blog-card-meta .dot { color: var(--navy-300); }
.blog-card-body h3 {
font-size: 1.2rem;
line-height: 1.3;
margin-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.blog-card-body h3 a { color: var(--navy-900); transition: color 180ms var(--ease); }
.blog-card-body h3 a:hover { color: var(--gold-600); }
.blog-card-body p {
font-size: 0.95rem;
color: var(--navy-700);
margin-bottom: 1.25rem;
flex: 1;
}
.blog-card-link {
color: var(--gold-600);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.03em;
transition: color 180ms var(--ease);
}
.blog-card-link:hover { color: var(--navy-900); }
.blog-card-featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
}
.blog-card-featured .blog-card-media { aspect-ratio: 4/3; }
.blog-card-featured .blog-card-body { padding: 3rem 2.5rem; justify-content: center; }
.blog-card-featured h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.2;
margin-bottom: 1rem;
}
.blog-card-featured h2 a { color: var(--navy-900); transition: color 180ms var(--ease); }
.blog-card-featured h2 a:hover { color: var(--gold-600); }
.blog-card-featured p { font-size: 1.05rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) {
.blog-card-featured { grid-template-columns: 1fr; }
.blog-card-featured .blog-card-body { padding: 2rem; }
}
.blog-result-count { color: var(--navy-500); font-size: 0.9rem; margin-top: 0.5rem; }
.blog-newsletter { padding: 5rem 0; background: #fff; }
.blog-newsletter-card {
background: linear-gradient(135deg, var(--navy-900) 0%, #051226 100%);
color: #fff;
border-radius: var(--r-lg);
padding: 3rem;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3rem;
align-items: center;
position: relative;
overflow: hidden;
}
.blog-newsletter-card::before {
content: "";
position: absolute;
top: -50%; right: -20%;
width: 70%;
height: 200%;
background: radial-gradient(circle, rgba(200,169,106,0.18) 0%, transparent 50%);
pointer-events: none;
}
.blog-newsletter-card h2 { color: #fff; }
.blog-newsletter-card p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 42ch; }
.blog-newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.blog-newsletter-form input {
flex: 1;
min-width: 220px;
padding: 1rem 1.25rem;
border-radius: var(--r-sm);
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.1);
color: #fff;
font-size: 1rem;
font-family: inherit;
backdrop-filter: blur(8px);
}
.blog-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.blog-newsletter-form input:focus { outline: 0; border-color: var(--gold-400); background: rgba(255,255,255,0.15); }
@media (max-width: 900px) { .blog-newsletter-card { grid-template-columns: 1fr; padding: 2rem; } }
/* ============================================================
ARTICLE (Cost in Texas)
============================================================ */
.article-hero {
position: relative;
padding: 9rem 0 5rem;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.article-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
z-index: -2;
}
.article-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,26,48,0.82) 0%, rgba(5,14,30,0.96) 100%);
z-index: -1;
}
.article-hero-inner { max-width: 900px; }
.article-hero-cats {
display: flex;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.article-hero-cats .blog-card-cat { position: static; }
.article-hero-inner h1 {
color: #fff;
font-size: clamp(2rem, 4vw, 3.25rem);
letter-spacing: -0.025em;
line-height: 1.15;
margin-bottom: 1.5rem;
}
.article-hero-inner h1 .highlight { color: var(--gold-400); font-style: italic; }
.article-byline {
display: flex;
gap: 1rem;
align-items: center;
margin-top: 1.5rem;
}
.article-byline-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: grid;
place-items: center;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.05em;
}
.article-byline strong { color: #fff; font-size: 1rem; display: block; }
.article-byline span { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.article-layout { padding: 5rem 0; background: #fff; }
.article-container {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: flex-start;
}
.article-toc {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.article-toc-box {
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 1.5rem;
}
.article-toc-box .eyebrow { color: var(--gold-600); display: block; margin-bottom: 0.75rem; font-size: 0.72rem; }
.article-toc-box ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
}
.article-toc-box ol li {
counter-increment: toc;
margin-bottom: 0.5rem;
padding: 0.5rem 0;
font-size: 0.88rem;
line-height: 1.4;
border-bottom: 1px solid rgba(15,23,42,0.06);
}
.article-toc-box ol li:last-child { border-bottom: 0; }
.article-toc-box ol li::before {
content: counter(toc, decimal-leading-zero);
color: var(--gold-600);
font-weight: 700;
margin-right: 0.5rem;
font-size: 0.8rem;
}
.article-toc-box ol li a { color: var(--navy-700); transition: color 180ms var(--ease); }
.article-toc-box ol li a:hover { color: var(--navy-900); }
.article-toc-cta {
background: linear-gradient(135deg, var(--navy-900), #051226);
color: #fff;
border-color: transparent;
}
.article-toc-cta h4 { color: #fff; margin-bottom: 0.5rem; }
.article-toc-cta p { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin-bottom: 1rem; }
.article-body { font-size: 1.08rem; line-height: 1.75; color: var(--navy-800); max-width: 760px; }
.article-body h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: -0.01em;
margin: 3.5rem 0 1.25rem;
scroll-margin-top: 120px;
color: var(--navy-900);
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--gold-200);
}
.article-body h2:first-of-type { margin-top: 0; }
.article-body h3 {
font-size: 1.25rem;
margin: 1.5rem 0 0.5rem;
color: var(--navy-900);
}
.article-body p { margin-bottom: 1.1rem; }
.article-body a.article-link, .article-body p a {
color: var(--gold-600);
text-decoration: underline;
text-decoration-color: var(--gold-300);
text-underline-offset: 3px;
transition: color 180ms var(--ease);
font-weight: 600;
}
.article-body a.article-link:hover, .article-body p a:hover { color: var(--navy-900); }
.article-body .article-ul {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.article-body .article-ul li { margin-bottom: 0.5rem; }
.article-key-take {
background: linear-gradient(135deg, rgba(200,169,106,0.08), rgba(15,58,57,0.04));
border: 1px solid var(--gold-200);
border-left: 4px solid var(--gold-500);
border-radius: var(--r-md);
padding: 1.75rem 2rem;
margin-bottom: 3rem;
}
.article-key-take h3 {
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-600);
margin-bottom: 1rem;
}
.article-key-take ul { list-style: none; padding: 0; margin: 0; }
.article-key-take li {
padding: 0.5rem 0 0.5rem 1.5rem;
position: relative;
font-size: 1rem;
color: var(--navy-800);
}
.article-key-take li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0.5rem;
color: var(--gold-600);
font-weight: 800;
font-size: 1rem;
}
.article-price-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem 0 2rem;
}
.article-price-card {
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.article-price-card:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); }
.article-price-tier {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
}
.article-price-range {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
color: var(--navy-900);
margin: 0.25rem 0;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.article-price-size {
font-size: 0.85rem;
color: var(--navy-500);
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.article-price-card p { font-size: 0.92rem; margin: 0; color: var(--navy-700); }
@media (max-width: 600px) { .article-price-grid { grid-template-columns: 1fr; } }
.article-callout {
background: var(--navy-50);
border-left: 4px solid var(--gold-500);
padding: 1rem 1.5rem;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
font-size: 1rem;
margin: 1.5rem 0;
color: var(--navy-800);
}
.article-factors { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }
.article-factor {
display: grid;
grid-template-columns: 60px 1fr;
gap: 1.25rem;
background: #fff;
border-left: 4px solid var(--gold-500);
padding: 1.25rem 1.5rem;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
border-top: 1px solid var(--navy-100);
border-right: 1px solid var(--navy-100);
border-bottom: 1px solid var(--navy-100);
}
.article-factor-num {
font-family: var(--font-display);
font-size: 2.25rem;
font-weight: 800;
color: var(--gold-500);
line-height: 1;
letter-spacing: -0.03em;
}
.article-factor h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.article-factor p { font-size: 0.95rem; margin: 0; }
.article-monthly-table {
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
margin: 1.5rem 0;
overflow: hidden;
}
.article-monthly-row {
display: flex;
justify-content: space-between;
padding: 0.9rem 1.5rem;
border-bottom: 1px solid var(--navy-200);
font-size: 0.95rem;
}
.article-monthly-row:last-child { border-bottom: 0; }
.article-monthly-label { color: var(--navy-700); }
.article-monthly-val { color: var(--navy-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.article-monthly-total { background: var(--navy-900); color: #fff; }
.article-monthly-total .article-monthly-label { color: rgba(255,255,255,0.85); font-weight: 700; }
.article-monthly-total .article-monthly-val { color: var(--gold-400); font-size: 1.1rem; }
.article-inline-cta {
margin: 3rem 0;
background: linear-gradient(135deg, var(--navy-900), #051226);
color: #fff;
padding: 2.5rem;
border-radius: var(--r-md);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
}
.article-inline-cta h3 { color: #fff; margin-bottom: 0.5rem; }
.article-inline-cta p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0; }
.article-inline-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
@media (max-width: 700px) {
.article-inline-cta { grid-template-columns: 1fr; }
.article-inline-cta-actions { justify-content: flex-start; }
}
.article-author {
margin-top: 4rem;
padding: 2rem;
background: var(--navy-50);
border-radius: var(--r-md);
display: grid;
grid-template-columns: 72px 1fr;
gap: 1.5rem;
border: 1px solid var(--navy-200);
}
.article-author-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.5rem;
}
.article-author h4 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.article-author p { font-size: 0.92rem; color: var(--navy-700); margin: 0; }
.article-related { padding: 5rem 0; background: var(--cream); }
@media (max-width: 900px) {
.article-container { grid-template-columns: 1fr; }
.article-toc { position: static; order: -1; margin-bottom: 2rem; }
.article-toc-box ol { columns: 2; column-gap: 1.5rem; }
.article-toc-cta { display: none; }
}
@media (max-width: 600px) { .article-toc-box ol { columns: 1; } }
/* ============================================================
FINANCING
============================================================ */
.financing-hero .resources-hero-scrim {
background:
linear-gradient(180deg, rgba(8,23,47,0.75) 0%, rgba(8,23,47,0.92) 100%),
radial-gradient(50% 60% at 30% 30%, rgba(200,169,106,0.18) 0%, transparent 80%);
}
.financing-options { padding: 6rem 0; background: #fff; }
.financing-options-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.financing-option {
background: var(--cream);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.financing-option:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--gold-400);
background: #fff;
}
.financing-option-ic {
width: 56px;
height: 56px;
border-radius: var(--r-sm);
background: var(--navy-900);
color: var(--gold-400);
display: grid;
place-items: center;
margin-bottom: 1.25rem;
}
.financing-option h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.financing-option p { font-size: 0.92rem; margin-bottom: 1rem; color: var(--navy-700); }
.financing-option ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
flex: 1;
}
.financing-option li {
font-size: 0.88rem;
padding: 0.45rem 0 0.45rem 1.35rem;
position: relative;
color: var(--navy-800);
border-bottom: 1px dashed var(--navy-200);
}
.financing-option li:last-child { border-bottom: 0; }
.financing-option li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0.5rem;
color: var(--gold-600);
font-weight: 800;
font-size: 0.85rem;
}
.financing-option-link {
color: var(--gold-600);
font-weight: 700;
font-size: 0.88rem;
transition: color 180ms var(--ease);
}
.financing-option-link:hover { color: var(--navy-900); }
@media (max-width: 1024px) { .financing-options-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .financing-options-grid { grid-template-columns: 1fr; } }
.financing-how { padding: 6rem 0; background: var(--navy-50); }
.financing-how-grid {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 3rem;
align-items: center;
}
.financing-how-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.financing-how-list li {
padding: 0.75rem 0 0.75rem 2rem;
position: relative;
font-size: 1rem;
color: var(--navy-800);
border-bottom: 1px solid var(--navy-200);
}
.financing-how-list li:last-child { border-bottom: 0; }
.financing-how-list li::before {
content: "\2713";
position: absolute;
left: 0;
top: 1rem;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold-500);
color: #fff;
font-weight: 800;
font-size: 0.85rem;
display: grid;
place-items: center;
line-height: 1;
}
.financing-how-card {
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-lg);
padding: 2.5rem;
box-shadow: var(--shadow-lg);
}
.financing-how-card .eyebrow { display: block; margin-bottom: 1.25rem; }
.financing-how-row {
display: flex;
justify-content: space-between;
padding: 0.65rem 0;
border-bottom: 1px solid var(--navy-100);
font-size: 0.95rem;
color: var(--navy-700);
}
.financing-how-row .v { color: var(--navy-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.financing-how-card hr { border: 0; border-top: 1px solid var(--navy-200); margin: 0.5rem 0; }
.financing-how-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 1rem 0 0.5rem;
}
.financing-how-total span { font-size: 0.88rem; color: var(--navy-600); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.financing-how-total strong {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--gold-600);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.financing-how-note { font-size: 0.78rem; color: var(--navy-500); margin: 0.75rem 0 0; }
@media (max-width: 900px) { .financing-how-grid { grid-template-columns: 1fr; gap: 2rem; } }
.financing-examples { padding: 6rem 0; background: #fff; }
.financing-examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.financing-example {
background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 2rem 1.75rem;
text-align: left;
position: relative;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.financing-example:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.financing-example-label {
display: block;
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--navy-500);
font-weight: 700;
}
.financing-example-price {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--navy-900);
letter-spacing: -0.02em;
margin: 0.25rem 0 1.25rem;
font-variant-numeric: tabular-nums;
display: block;
}
.financing-example-body {
background: var(--navy-900);
color: #fff;
border-radius: var(--r-sm);
padding: 1.25rem 1.5rem;
margin: 0 -0.25rem 1.25rem;
position: relative;
}
.financing-example-body .financing-example-label { color: rgba(255,255,255,0.7); margin-bottom: 0.35rem; }
.financing-example-mo {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--gold-400);
letter-spacing: -0.02em;
display: block;
}
.financing-example-apr {
display: block;
font-size: 0.75rem;
color: rgba(255,255,255,0.7);
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.financing-example p { font-size: 0.95rem; color: var(--navy-800); margin-bottom: 0.25rem; }
.financing-example-note { font-size: 0.85rem !important; color: var(--navy-500) !important; }
@media (max-width: 900px) { .financing-examples-grid { grid-template-columns: 1fr; } }
.financing-process { padding: 6rem 0; background: var(--cream); }
.financing-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.financing-process-step {
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 2.5rem 1.75rem 1.75rem;
text-align: center;
position: relative;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.financing-process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.financing-process-step .state-step-num {
margin: 0 auto 1rem;
position: static;
transform: none;
}
.financing-process-step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.financing-process-step p { font-size: 0.9rem; margin-bottom: 0.75rem; }
.financing-process-meta {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
padding: 0.3rem 0.75rem;
background: var(--gold-200);
border-radius: var(--r-sm);
}
.financing-process-cta {
margin-top: 3rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.financing-process-cta span { font-size: 0.85rem; color: var(--navy-600); }
@media (max-width: 1024px) { .financing-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .financing-process-grid { grid-template-columns: 1fr; } }
/* shared section-head */
.section-head { text-align: center; max-width: 820px; margin: 0 auto 2rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { max-width: 58ch; margin: 0 auto; font-size: 1.05rem; }
/* ============================================================
FINANCING APPLICATION FORM
============================================================ */
.financing-apply {
position: relative;
padding: 6rem 0 7rem;
background: #0a1a2e;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.financing-apply-bg {
position: absolute;
inset: 0;
z-index: -1;
background-color: #0a1a2e;
background-image:
radial-gradient(ellipse at 20% 10%, rgba(200,169,106,0.08) 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, rgba(15,58,57,0.25) 0%, transparent 55%),
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
/* -------- Head -------- */
.financing-apply-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.financing-apply-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.35rem;
background: rgba(200,169,106,0.1);
color: var(--gold-400);
border: 1px solid rgba(200,169,106,0.28);
border-radius: var(--r-pill);
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.02em;
margin-bottom: 1.75rem;
}
.financing-apply-pill svg { flex: 0 0 auto; }
.financing-apply-head h2 {
color: #fff;
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.financing-apply-head p {
color: rgba(255,255,255,0.72);
font-size: 1.1rem;
max-width: 52ch;
margin: 0 auto 2.5rem;
line-height: 1.55;
}
/* -------- Progress tracker -------- */
.financing-apply-progress {
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
max-width: 900px;
flex-wrap: wrap;
}
.apply-step {
display: flex;
align-items: center;
gap: 0.65rem;
color: rgba(255,255,255,0.45);
font-weight: 600;
transition: color 260ms var(--ease);
}
.apply-step-num {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.55);
font-weight: 800;
font-size: 0.95rem;
transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.apply-step-label { font-size: 1rem; letter-spacing: -0.005em; }
.apply-step.is-active { color: #fff; }
.apply-step.is-active .apply-step-num {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
border-color: var(--gold-400);
box-shadow: 0 0 0 5px rgba(200,169,106,0.15);
}
.apply-step.is-done .apply-step-num {
background: var(--gold-600);
color: #fff;
border-color: var(--gold-600);
box-shadow: none;
}
.apply-step-line {
flex: 1;
min-width: 32px;
max-width: 60px;
height: 2px;
background: rgba(255,255,255,0.14);
border-radius: 2px;
transition: background 260ms var(--ease);
}
.apply-step-line.is-active { background: var(--gold-500); }
@media (max-width: 680px) {
.financing-apply-progress { gap: 0.35rem; }
.apply-step-label { display: none; }
.apply-step-line { max-width: 40px; }
}
/* -------- Form container -------- */
.financing-apply-form {
max-width: 980px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
/* -------- Sections -------- */
.apply-section {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
padding: 2rem 2.25rem 2.25rem;
margin: 0;
}
.apply-section-head {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0 0 1.25rem;
margin: 0 0 1.5rem;
border-bottom: 1px solid rgba(200,169,106,0.18);
width: 100%;
color: var(--gold-400);
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
}
.apply-ic {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
font-size: 1.15rem;
filter: saturate(1.1);
}
/* -------- Grid rows -------- */
.apply-row { display: grid; gap: 1.25rem 1.5rem; }
.apply-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
.apply-row-2 { grid-template-columns: 1fr; }
}
/* -------- Fields -------- */
.apply-field {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-bottom: 1.25rem;
}
.apply-field:last-child { margin-bottom: 0; }
.apply-field-half { max-width: calc(50% - 0.75rem); }
@media (max-width: 640px) { .apply-field-half { max-width: 100%; } }
.apply-field label {
font-size: 0.78rem;
font-weight: 700;
color: #94a8c3;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.apply-field .req { color: var(--gold-400); margin-left: 2px; }
.apply-field input,
.apply-field select,
.apply-field textarea {
background: rgba(15,23,42,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-sm);
color: #fff;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
padding: 0.95rem 1.15rem;
width: 100%;
transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
appearance: none;
-webkit-appearance: none;
}
.apply-field input::placeholder,
.apply-field textarea::placeholder {
color: rgba(255,255,255,0.28);
}
.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
outline: 0;
border-color: var(--gold-400);
background: rgba(15,23,42,0.72);
box-shadow: 0 0 0 3px rgba(200,169,106,0.15);
}
.apply-field input:invalid:not(:placeholder-shown),
.apply-field select:invalid:not([value=""]):not(:placeholder-shown) {
border-color: rgba(239,68,68,0.45);
}
/* Selects: custom caret */
.apply-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1.15rem center;
background-size: 14px;
padding-right: 2.75rem;
cursor: pointer;
}
.apply-field select option { background: #0a1a2e; color: #fff; }
.apply-field textarea {
resize: vertical;
min-height: 100px;
}
.apply-field-note {
font-size: 0.8rem;
color: rgba(255,255,255,0.42);
font-style: italic;
}
/* -------- SSN field with eye toggle -------- */
.apply-ssn-wrap { position: relative; }
.apply-ssn-wrap input { padding-right: 3rem; letter-spacing: 0.25em; font-family: inherit; }
.apply-ssn-toggle {
position: absolute;
right: 0.65rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: rgba(255,255,255,0.4);
padding: 0.5rem;
cursor: pointer;
display: grid;
place-items: center;
border-radius: 6px;
transition: color 180ms var(--ease), background 180ms var(--ease);
}
.apply-ssn-toggle:hover { color: var(--gold-400); background: rgba(255,255,255,0.04); }
.apply-ssn-toggle.is-visible { color: var(--gold-400); }
/* -------- Signature canvas -------- */
.apply-sig {
position: relative;
background: rgba(15,23,42,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-sm);
padding: 0.6rem;
transition: border-color 180ms var(--ease);
overflow: hidden;
}
.apply-sig:hover { border-color: rgba(200,169,106,0.35); }
#sigCanvas {
display: block;
width: 100%;
height: 200px;
background:
repeating-linear-gradient(180deg, transparent 0, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px);
border-radius: 6px;
cursor: crosshair;
touch-action: none;
}
.apply-sig-clear {
position: absolute;
right: 1rem;
bottom: 1rem;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.14);
padding: 0.55rem 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 180ms var(--ease);
backdrop-filter: blur(4px);
}
.apply-sig-clear:hover {
background: rgba(200,169,106,0.15);
color: var(--gold-400);
border-color: var(--gold-400);
}
/* -------- Submit block -------- */
.apply-submit {
margin-top: 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2.5rem;
background: rgba(200,169,106,0.04);
border: 1px solid rgba(200,169,106,0.18);
border-radius: var(--r-md);
}
.apply-consent {
display: grid;
grid-template-columns: 22px 1fr;
gap: 0.9rem;
max-width: 720px;
text-align: left;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(255,255,255,0.75);
cursor: pointer;
}
.apply-consent input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 3px;
accent-color: var(--gold-500);
cursor: pointer;
flex: 0 0 auto;
}
.apply-consent strong { color: var(--gold-400); }
.apply-submit-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-width: 280px;
justify-content: center;
font-size: 1.05rem;
padding: 1.1rem 2.25rem;
}
.apply-submit-btn:disabled { opacity: 0.7; cursor: wait; }
.apply-submit-note {
font-size: 0.85rem;
color: rgba(255,255,255,0.55);
margin: 0;
display: inline-flex;
align-items: center;
}
/* Responsive */
@media (max-width: 768px) {
.financing-apply { padding: 4rem 0 5rem; }
.apply-section { padding: 1.5rem 1.25rem 1.75rem; }
.apply-submit { padding: 1.75rem 1.25rem; }
.financing-apply-head h2 { font-size: 2rem; }
}
/* ============================================================
CONTACT PAGE - Premium form
============================================================ */
.contact-hero-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.75rem;
margin-top: 2.75rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.14);
max-width: 800px;
}
.contact-hero-trust > div { display: flex; flex-direction: column; }
.contact-hero-trust strong {
font-size: 1.65rem;
font-weight: 800;
color: #fff;
line-height: 1.1;
letter-spacing: -0.015em;
}
.contact-hero-trust span {
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
letter-spacing: 0.06em;
margin-top: 0.3rem;
}
@media (max-width: 640px) {
.contact-hero-trust { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.contact-hero-trust strong { font-size: 1.25rem; }
}
/* -------- MAIN GRID -------- */
.contact-main {
padding: 6rem 0 5rem;
background: var(--cream);
position: relative;
}
.contact-main::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 15% 85%, rgba(200,169,106,0.08) 0%, transparent 35%);
pointer-events: none;
}
.contact-main-grid {
position: relative;
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 2.5rem;
align-items: flex-start;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 900px) { .contact-main-grid { grid-template-columns: 1fr; gap: 2rem; } }
/* -------- FORM CARD -------- */
.contact-card {
background: #fff;
border: 1px solid rgba(15,23,42,0.08);
border-radius: var(--r-lg);
box-shadow: 0 4px 30px rgba(15,23,42,0.06);
padding: clamp(1.75rem, 3.5vw, 2.75rem);
transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.contact-card:hover { box-shadow: 0 12px 48px rgba(15,23,42,0.1); }
.contact-card-head { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--navy-100); }
.contact-card-head h2 { margin: 0.5rem 0 0.5rem; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.contact-card-head p { color: var(--navy-600); margin: 0; font-size: 1rem; line-height: 1.55; max-width: 58ch; }
/* -------- FORM V2 -------- */
.contact-form-v2 { display: flex; flex-direction: column; gap: 1.25rem; }
.cf-row { display: grid; gap: 1rem 1.25rem; }
.cf-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .cf-row-2 { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-field label {
font-weight: 700;
font-size: 0.92rem;
color: var(--navy-900);
letter-spacing: 0.005em;
}
.cf-req { color: var(--gold-600); margin-left: 2px; }
.cf-field input,
.cf-field select,
.cf-field textarea {
background: #fff;
border: 1.5px solid var(--navy-200);
border-radius: var(--r-sm);
color: var(--navy-900);
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
padding: 0.9rem 1.15rem;
width: 100%;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
appearance: none;
-webkit-appearance: none;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--navy-400); }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
outline: 0;
border-color: var(--gold-500);
box-shadow: 0 0 0 3px rgba(200,169,106,0.18);
}
.cf-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1.15rem center;
background-size: 14px;
padding-right: 2.75rem;
cursor: pointer;
}
.cf-field textarea { resize: vertical; min-height: 130px; }
.cf-submit {
margin-top: 0.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--navy-100);
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.cf-submit-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 1rem 2rem;
font-size: 1rem;
}
.cf-submit-btn:disabled { opacity: 0.7; cursor: wait; }
.cf-submit-note { color: var(--navy-500); font-size: 0.85rem; margin: 0; }
/* -------- SIDEBAR -------- */
.contact-aside { display: flex; flex-direction: column; gap: 1rem; }
.contact-aside .contact-card { padding: 1.75rem 1.85rem; position: relative; }
.contact-aside .contact-card h4 { font-size: 1.1rem; margin-bottom: 0.35rem; line-height: 1.3; }
.contact-aside .contact-card p { font-size: 0.92rem; color: var(--navy-600); margin: 0 0 1rem; }
.contact-aside .contact-card p:last-child { margin-bottom: 0; }
.contact-card-ic {
width: 40px;
height: 40px;
border-radius: var(--r-sm);
background: rgba(200,169,106,0.1);
color: var(--gold-600);
display: grid;
place-items: center;
margin-bottom: 0.85rem;
}
.contact-card-phone {
background: linear-gradient(145deg, var(--navy-900), #051226);
color: #fff;
border-color: transparent;
}
.contact-card-phone .eyebrow { color: var(--gold-400) !important; }
.contact-phone {
display: block;
margin-top: 0.75rem;
font-family: var(--font-display);
font-size: clamp(1.85rem, 3vw, 2.35rem);
font-weight: 800;
color: var(--gold-400);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.contact-phone:hover { color: var(--gold-300); }
.contact-phone-hours { color: rgba(255,255,255,0.7); margin: 1rem 0 1.25rem; font-size: 0.9rem; }
.contact-phone-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.contact-phone-badges span {
font-size: 0.75rem;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
padding: 0.35rem 0.75rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--r-pill);
font-weight: 600;
}
.contact-email {
display: inline-block;
margin-top: 0.35rem;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--navy-900);
word-break: break-all;
line-height: 1.3;
}
.contact-email:hover { color: var(--gold-600); }
.contact-card-cta {
background: linear-gradient(145deg, #f8e8ca, #fcf3d8);
border-color: rgba(200,169,106,0.25);
}
.contact-card-cta h4 { color: var(--navy-900); }
.contact-card-cta p { color: var(--navy-700); }
/* -------- TRUST BAR -------- */
.contact-trust-bar {
padding: 3.5rem 0;
background: #fff;
border-top: 1px solid var(--navy-100);
border-bottom: 1px solid var(--navy-100);
}
.contact-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.contact-trust-grid > div { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-trust-grid strong {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 800;
color: var(--gold-600);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
.contact-trust-grid span {
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy-500);
font-weight: 600;
}
@media (max-width: 680px) {
.contact-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.contact-trust-grid strong { font-size: 1.5rem; }
}
.contact-faq { padding: 5rem 0; background: var(--cream); }
/* ============================================================
CUSTOM BUILD INTAKE FORM (dark card variant)
============================================================ */
.cb-apply {
position: relative;
padding: 6rem 0 7rem;
background: #0b1a30;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.cb-apply-bg {
position: absolute;
inset: 0;
z-index: -1;
background-color: #0b1a30;
background-image:
radial-gradient(ellipse at 85% 20%, rgba(200,169,106,0.12) 0%, transparent 55%),
radial-gradient(ellipse at 10% 90%, rgba(15,58,57,0.35) 0%, transparent 55%),
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
.cb-apply-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.cb-apply-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.25rem;
background: rgba(200,169,106,0.12);
color: var(--gold-400);
border: 1px solid rgba(200,169,106,0.28);
border-radius: var(--r-pill);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
}
.cb-apply-head h2 {
color: #fff;
font-size: clamp(2rem, 4vw, 3.25rem);
margin-bottom: 1rem;
letter-spacing: -0.025em;
}
.cb-apply-head h2 .highlight { color: var(--gold-400); font-style: italic; }
.cb-apply-head p {
color: rgba(255,255,255,0.75);
font-size: 1.08rem;
max-width: 58ch;
margin: 0 auto;
line-height: 1.6;
}
.cb-apply-form {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.cb-section {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
padding: 2rem 2.25rem 2.25rem;
margin: 0;
}
.cb-section-head {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0 0 1.25rem;
margin: 0 0 1.5rem;
border-bottom: 1px solid rgba(200,169,106,0.18);
width: 100%;
color: #fff;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: -0.01em;
}
.cb-step {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 800;
color: var(--gold-400);
letter-spacing: 0.15em;
background: rgba(200,169,106,0.12);
padding: 0.35rem 0.7rem;
border-radius: 6px;
border: 1px solid rgba(200,169,106,0.25);
}
.cb-row { display: grid; gap: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.cb-row-2 { grid-template-columns: 1fr 1fr; }
.cb-row:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .cb-row-2 { grid-template-columns: 1fr; } }
.cb-field { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.25rem; }
.cb-field:last-child { margin-bottom: 0; }
.cb-field label {
font-weight: 700;
font-size: 0.92rem;
color: #dce7f5;
letter-spacing: -0.005em;
}
.cb-req { color: var(--gold-400); margin-left: 2px; }
.cb-field input[type="text"],
.cb-field input[type="email"],
.cb-field input[type="tel"],
.cb-field input[type="number"],
.cb-field select,
.cb-field textarea {
background: rgba(15,23,42,0.55);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-sm);
color: #fff;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
padding: 0.95rem 1.15rem;
width: 100%;
transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
appearance: none;
-webkit-appearance: none;
}
.cb-field input::placeholder,
.cb-field textarea::placeholder { color: rgba(255,255,255,0.28); }
.cb-field input:focus,
.cb-field select:focus,
.cb-field textarea:focus {
outline: 0;
border-color: var(--gold-400);
background: rgba(15,23,42,0.75);
box-shadow: 0 0 0 3px rgba(200,169,106,0.15);
}
.cb-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1.15rem center;
background-size: 14px;
padding-right: 2.75rem;
cursor: pointer;
}
.cb-field select option { background: #0b1a30; color: #fff; }
.cb-field textarea { resize: vertical; min-height: 130px; }
/* -------- PILLS (radios as pill buttons) -------- */
.cb-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.25rem;
}
.cb-pill {
position: relative;
cursor: pointer;
}
.cb-pill input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cb-pill > span {
display: inline-block;
padding: 0.65rem 1.15rem;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.03);
border-radius: var(--r-pill);
color: rgba(255,255,255,0.85);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.005em;
transition: all 180ms var(--ease);
user-select: none;
}
.cb-pill:hover > span {
border-color: rgba(200,169,106,0.45);
background: rgba(200,169,106,0.08);
color: #fff;
}
.cb-pill input:checked + span {
background: var(--gold-500);
border-color: var(--gold-500);
color: var(--navy-900);
font-weight: 700;
box-shadow: 0 4px 14px rgba(200,169,106,0.3);
}
.cb-pill input:focus-visible + span {
outline: 3px solid rgba(200,169,106,0.5);
outline-offset: 2px;
}
/* -------- CHECKBOXES (feature grid) -------- */
.cb-checkgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
@media (max-width: 760px) { .cb-checkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cb-checkgrid { grid-template-columns: 1fr; } }
.cb-check {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 0.9rem;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(15,23,42,0.35);
border-radius: var(--r-sm);
cursor: pointer;
transition: all 180ms var(--ease);
}
.cb-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--gold-500);
cursor: pointer;
flex: 0 0 auto;
}
.cb-check span {
font-size: 0.88rem;
color: rgba(255,255,255,0.85);
line-height: 1.3;
}
.cb-check:hover {
border-color: rgba(200,169,106,0.35);
background: rgba(200,169,106,0.06);
}
.cb-check:has(input:checked) {
border-color: var(--gold-400);
background: rgba(200,169,106,0.12);
}
.cb-check:has(input:checked) span { color: #fff; }
/* -------- SUBMIT -------- */
.cb-submit {
padding: 2.25rem;
background: rgba(200,169,106,0.05);
border: 1px solid rgba(200,169,106,0.2);
border-radius: var(--r-md);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 0.5rem;
}
.cb-consent {
display: grid;
grid-template-columns: 22px 1fr;
gap: 0.9rem;
max-width: 720px;
text-align: left;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(255,255,255,0.78);
cursor: pointer;
}
.cb-consent input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 3px;
accent-color: var(--gold-500);
cursor: pointer;
}
.cb-consent strong { color: var(--gold-400); }
.cb-submit-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-width: 280px;
justify-content: center;
font-size: 1.05rem;
padding: 1.1rem 2.25rem;
}
.cb-submit-btn:disabled { opacity: 0.7; cursor: wait; }
.cb-submit-note {
font-size: 0.85rem;
color: rgba(255,255,255,0.55);
margin: 0;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.cb-apply { padding: 4rem 0 5rem; }
.cb-section { padding: 1.5rem 1.25rem 1.75rem; }
.cb-submit { padding: 1.75rem 1.25rem; }
.cb-apply-head h2 { font-size: 2rem; }
}
/* ============================================================
DELIVERY ZONES SECTION (redesigned)
============================================================ */
.delivery-zones-section {
padding: 5rem 0;
background: linear-gradient(180deg, var(--navy-50) 0%, #fff 100%);
}
.delivery-zones-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 2rem;
align-items: stretch;
}
@media (max-width: 1024px) { .delivery-zones-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
/* -------- MAP VISUALIZATION -------- */
.delivery-map-v2 {
position: relative;
width: 100%;
max-width: 100%;
background: linear-gradient(145deg, #0b1a30 0%, #061326 60%, #083a39 130%);
border: 1px solid rgba(200,169,106,0.15);
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4/3;
min-height: 420px;
box-shadow: 0 20px 60px rgba(15,23,42,0.15);
}
@media (max-width: 720px) {
.delivery-map-v2 {
aspect-ratio: 1/1;
min-height: 0;
}
}
@media (max-width: 480px) {
.delivery-map-v2 {
aspect-ratio: 4/5;
}
}
.delivery-map-v2::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.delivery-map-v2 svg {
position: relative;
display: block;
width: 100%;
height: 100%;
}
/* Map text labels */
.delivery-map-v2 .dm-label-hq {
fill: #fff;
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.15em;
}
.delivery-map-v2 .dm-label-zone {
fill: rgba(212, 185, 122, 0.85);
font-family: var(--font-body);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.2em;
}
.delivery-map-v2 .dm-label-zone-out {
fill: rgba(255,255,255,0.45);
font-family: var(--font-body);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.2em;
}
/* HQ pulsing dot */
.delivery-map-v2 .dm-hq-dot { animation: dmPulse 2.6s ease-in-out infinite; transform-origin: 320px 240px; transform-box: fill-box; }
.delivery-map-v2 .dm-hq-glow { animation: dmHalo 2.6s ease-in-out infinite; transform-origin: 320px 240px; transform-box: fill-box; }
@keyframes dmPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes dmHalo {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.95; }
}
.delivery-map-v2 .dm-state-dots circle { transition: transform 240ms var(--ease); }
/* Legend (overlaid bottom-left, premium glass) */
.delivery-map-v2 .dm-legend {
position: absolute;
left: 1rem;
bottom: 1rem;
background: rgba(6, 15, 33, 0.35);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--r-sm);
padding: 0.85rem 1rem;
color: rgba(255,255,255,0.9);
font-size: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
box-shadow:
0 12px 40px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.2),
inset 1px 0 0 rgba(255,255,255,0.1);
overflow: hidden;
isolation: isolate;
}
.delivery-map-v2 .dm-legend::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(55% 40% at 5% 0%, rgba(255,255,255,0.14) 0%, transparent 60%),
radial-gradient(50% 40% at 95% 100%, rgba(200,169,106,0.18) 0%, transparent 60%);
z-index: 0;
}
.delivery-map-v2 .dm-legend > * { position: relative; z-index: 1; }
.dm-legend-row {
display: flex;
align-items: center;
gap: 0.55rem;
font-weight: 500;
letter-spacing: 0.005em;
}
.dm-sw {
width: 14px;
height: 14px;
border-radius: 50%;
flex: 0 0 auto;
}
.dm-sw-free { background: rgba(212,185,122,0.3); border: 1.5px dashed #D4B97A; }
.dm-sw-flat { background: rgba(255,255,255,0.1); border: 1.5px dashed rgba(255,255,255,0.35); }
.dm-sw-special { background: rgba(255,255,255,0.05); border: 1.5px dashed rgba(255,255,255,0.25); }
/* -------- ZONE CARDS -------- */
.delivery-zones-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.delivery-zone-card {
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
padding: 1.5rem 1.75rem;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"head price"
"sub price"
"states price";
row-gap: 0.65rem;
column-gap: 1.25rem;
align-items: center;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.delivery-zone-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: var(--gold-400);
}
.dz-head { grid-area: head; display: flex; align-items: center; gap: 0.75rem; }
.dz-head h3 { margin: 0; font-size: 1.15rem; color: var(--navy-900); line-height: 1.2; }
.dz-sub { grid-area: sub; margin: 0; font-size: 0.92rem; color: var(--navy-600); line-height: 1.4; }
.dz-states { grid-area: states; display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; }
.dz-states span {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.25rem 0.55rem;
background: var(--navy-50);
border: 1px solid var(--navy-200);
border-radius: 4px;
color: var(--navy-800);
font-variant-numeric: tabular-nums;
}
.dz-pill {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
border-radius: var(--r-pill);
line-height: 1;
}
.dz-pill-free { background: var(--gold-500); color: var(--navy-900); }
.dz-pill-flat { background: var(--navy-100); color: var(--navy-800); border: 1px solid var(--navy-300); }
.dz-pill-special { background: var(--navy-900); color: var(--gold-400); }
.dz-price {
grid-area: price;
text-align: right;
padding-left: 1rem;
border-left: 1px solid var(--navy-100);
min-width: 120px;
}
.dz-price-label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy-500);
font-weight: 700;
margin-bottom: 0.25rem;
}
.dz-price-val {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 800;
color: var(--navy-900);
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
display: block;
}
.delivery-zone-free .dz-price-val { color: var(--gold-600); }
.delivery-zone-special .dz-price-val { color: var(--navy-900); }
/* Accent left-border for each card */
.delivery-zone-card { border-left-width: 4px; }
.delivery-zone-free { border-left-color: var(--gold-500); }
.delivery-zone-flat { border-left-color: var(--navy-400); }
.delivery-zone-special { border-left-color: var(--teal-800); }
@media (max-width: 560px) {
.delivery-zone-card {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"sub"
"states"
"price";
}
.dz-price {
text-align: left;
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--navy-100);
padding-top: 0.75rem;
margin-top: 0.25rem;
}
}
.delivery-zones-note {
margin: 2rem auto 0;
text-align: center;
max-width: 70ch;
font-size: 0.92rem;
color: var(--navy-600);
font-style: italic;
}
/* ============================================================
3D HERO ANIMATIONS (all hero types except home-page video hero)
Applied by motion.js via class="hero-3d-on"
============================================================ */
/* Parent hero: enable 3D stacking context and mouse-parallax vars */
.hero-3d-on {
perspective: 1400px;
--px: 0;
--py: 0;
--pz: 0;
}
/* Scene layer - sits behind the scrim, in front of the image */
.hero-3d-scene {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
transform-style: preserve-3d;
perspective: 1400px;
}
/* Base shape */
.hero-3d-shape {
position: absolute;
will-change: transform, opacity;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* ------- SHAPE 1: Large gold ring (far back) ------- */
.h3d-ring {
top: 8%;
right: -5%;
width: 360px;
height: 360px;
border-radius: 50%;
border: 2px solid rgba(200, 169, 106, 0.35);
box-shadow:
inset 0 0 80px rgba(200, 169, 106, 0.08),
0 0 80px rgba(200, 169, 106, 0.06);
opacity: 0.55;
animation: h3dRing 26s ease-in-out infinite;
transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -18px), -120px) rotateX(65deg) rotateY(0deg);
}
@keyframes h3dRing {
0% { transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -18px), -120px) rotateX(65deg) rotateY(0deg) rotateZ(0deg); }
50% { transform: translate3d(calc(var(--px) * -22px - 40px), calc(var(--py) * -18px + 24px), -80px) rotateX(72deg) rotateY(180deg) rotateZ(20deg); }
100% { transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -18px), -120px) rotateX(65deg) rotateY(360deg) rotateZ(0deg); }
}
/* ------- SHAPE 2: Smaller gold ring (mid) ------- */
.h3d-ring-2 {
bottom: 12%;
left: 4%;
width: 220px;
height: 220px;
border-radius: 50%;
border: 1.5px dashed rgba(200, 169, 106, 0.35);
opacity: 0.5;
animation: h3dRing2 22s ease-in-out infinite;
transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 14px), -40px) rotateX(55deg) rotateY(0deg);
}
@keyframes h3dRing2 {
0% { transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 14px), -40px) rotateX(55deg) rotateY(0deg) rotateZ(0deg); }
50% { transform: translate3d(calc(var(--px) * 18px + 30px), calc(var(--py) * 14px - 18px), 10px) rotateX(48deg) rotateY(-170deg) rotateZ(-15deg); }
100% { transform: translate3d(calc(var(--px) * 18px), calc(var(--py) * 14px), -40px) rotateX(55deg) rotateY(-360deg) rotateZ(0deg); }
}
/* ------- SHAPE 3: Glowing gold sphere (front, brightest) ------- */
.h3d-orb {
top: 38%;
right: 22%;
width: 26px;
height: 26px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #F0E3BF 0%, #D4B97A 55%, #A88948 100%);
box-shadow:
0 0 24px rgba(200, 169, 106, 0.6),
0 0 60px rgba(200, 169, 106, 0.35),
inset -4px -6px 10px rgba(168, 137, 72, 0.4);
opacity: 0.9;
animation: h3dOrb 14s ease-in-out infinite;
transform: translate3d(calc(var(--px) * 38px), calc(var(--py) * 30px), 60px);
}
@keyframes h3dOrb {
0%, 100% { transform: translate3d(calc(var(--px) * 38px), calc(var(--py) * 30px), 60px) scale(1); }
50% { transform: translate3d(calc(var(--px) * 38px + 20px), calc(var(--py) * 30px - 30px), 120px) scale(1.15); }
}
/* ------- SHAPE 4: Small secondary orb ------- */
.h3d-orb-2 {
top: 60%;
left: 28%;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #F0E3BF 0%, #D4B97A 55%, transparent 100%);
box-shadow: 0 0 16px rgba(200, 169, 106, 0.5);
opacity: 0.75;
animation: h3dOrb2 18s ease-in-out infinite 2s;
transform: translate3d(calc(var(--px) * 26px), calc(var(--py) * 22px), 40px);
}
@keyframes h3dOrb2 {
0%, 100% { transform: translate3d(calc(var(--px) * 26px), calc(var(--py) * 22px), 40px) scale(1); opacity: 0.75; }
50% { transform: translate3d(calc(var(--px) * 26px + 60px), calc(var(--py) * 22px - 40px), 90px) scale(1.3); opacity: 0.95; }
}
/* ------- SHAPE 5: Light beam diagonal sweep ------- */
.h3d-beam {
top: -20%;
left: 35%;
width: 2px;
height: 140%;
background: linear-gradient(180deg, transparent 0%, rgba(200, 169, 106, 0.4) 45%, rgba(200, 169, 106, 0.6) 55%, transparent 100%);
opacity: 0.4;
filter: blur(1.2px);
animation: h3dBeam 30s ease-in-out infinite;
transform: translate3d(calc(var(--px) * -12px), 0, -60px) rotateZ(12deg);
}
@keyframes h3dBeam {
0%, 100% { transform: translate3d(calc(var(--px) * -12px), 0, -60px) rotateZ(12deg); opacity: 0.25; }
50% { transform: translate3d(calc(var(--px) * -12px + 180px), 0, -20px) rotateZ(8deg); opacity: 0.5; }
}
/* ------- SHAPE 6: Premium glass prism (matches glassmorphism reference) ------- */
.h3d-prism {
top: 24%;
right: 8%;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 18px;
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
opacity: 0.7;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 1px 0 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.25);
animation: h3dPrism 19s ease-in-out infinite;
transform: translate3d(calc(var(--px) * -30px), calc(var(--py) * -26px), 30px) rotateX(35deg) rotateY(25deg);
}
.h3d-prism::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(55% 40% at 5% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
radial-gradient(50% 40% at 95% 100%, rgba(200, 169, 106, 0.3) 0%, transparent 60%);
}
@keyframes h3dPrism {
0%, 100% { transform: translate3d(calc(var(--px) * -30px), calc(var(--py) * -26px), 30px) rotateX(35deg) rotateY(25deg) rotateZ(0deg); }
50% { transform: translate3d(calc(var(--px) * -30px + 40px), calc(var(--py) * -26px + 18px), 70px) rotateX(55deg) rotateY(155deg) rotateZ(8deg); }
}
/* ------- KEN BURNS on hero image ------- */
/* Target all the image elements across hero variants */
.hero-3d-on .resources-hero-media img,
.hero-3d-on .article-hero-bg,
.hero-3d-on .property-hero-bg,
.hero-3d-on .state-hero-bg,
.hero-3d-on .blog-hero-art {
animation: h3dKenBurns 30s ease-in-out infinite alternate;
transform-origin: center center;
will-change: transform;
}
@keyframes h3dKenBurns {
0% { transform: scale(1.0) translate3d(0, 0, 0); }
100% { transform: scale(1.12) translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 10px), 0); }
}
/* Mouse parallax layer for hero images independently of ken burns */
.hero-3d-on .resources-hero-media {
transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 6px), 0);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Foreground content gets a SUBTLE opposite parallax to add depth */
.hero-3d-on .resources-hero-inner,
.hero-3d-on .article-hero-inner,
.hero-3d-on .page-hero .container,
.hero-3d-on .state-hero-inner {
position: relative;
z-index: 3;
transform: translate3d(calc(var(--px) * -4px), calc(var(--py) * -4px), 0);
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Scrim stays above image/shapes but below content */
.hero-3d-on .resources-hero-scrim,
.hero-3d-on .article-hero-scrim {
z-index: 1;
}
/* Ensure scene floats above media, below scrim */
.hero-3d-on .hero-3d-scene { z-index: 0; }
/* Mobile: shrink shapes, disable parallax-induced transforms */
@media (max-width: 700px) {
.h3d-ring { width: 220px; height: 220px; right: -15%; }
.h3d-ring-2 { width: 150px; height: 150px; }
.h3d-orb { right: 10%; }
.h3d-prism { width: 55px; height: 55px; right: 4%; }
.h3d-beam { opacity: 0.25; }
}
/* Reduced motion: freeze the scene but keep shapes visible (subtle only) */
@media (prefers-reduced-motion: reduce) {
.hero-3d-on .hero-3d-shape { animation: none !important; transition: none !important; }
.hero-3d-on .resources-hero-media img,
.hero-3d-on .article-hero-bg,
.hero-3d-on .property-hero-bg,
.hero-3d-on .state-hero-bg,
.hero-3d-on .blog-hero-art { animation: none !important; }
.h3d-beam { display: none; }
}
/* ============================================================
FOOTER V2 — 4-tier professional footer
Newsletter | Main 5-col | Trust strip | Legal bar
============================================================ */
.site-footer-v2 {
background: linear-gradient(180deg, #0a1a30 0%, #050e1e 100%);
color: rgba(255, 255, 255, 0.72);
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
isolation: isolate;
}
.site-footer-v2::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(ellipse at 15% 0%, rgba(200, 169, 106, 0.09) 0%, transparent 55%),
radial-gradient(ellipse at 90% 100%, rgba(15, 58, 57, 0.25) 0%, transparent 60%),
url("data:image/svg+xml;utf8,");
background-repeat: repeat;
}
.site-footer-v2 a {
color: inherit;
text-decoration: none;
transition: color 180ms var(--ease);
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* -------- TIER 1: NEWSLETTER -------- */
.footer-newsletter {
padding: 3rem 0 3rem;
position: relative;
border-bottom: 1px solid rgba(200, 169, 106, 0.15);
}
.footer-newsletter::before {
content: "";
position: absolute;
bottom: 0;
left: 25%;
right: 25%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.footer-newsletter-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: center;
}
.footer-newsletter-copy .eyebrow {
color: var(--gold-400);
margin-bottom: 0.65rem;
display: block;
}
.footer-newsletter-copy h3 {
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
color: #fff;
margin-bottom: 0.5rem;
letter-spacing: -0.015em;
line-height: 1.25;
}
.footer-newsletter-copy p {
color: rgba(255, 255, 255, 0.65);
font-size: 0.95rem;
margin: 0;
max-width: 52ch;
line-height: 1.55;
}
.footer-newsletter-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
position: relative;
}
.footer-newsletter-form input {
flex: 1;
min-width: 220px;
padding: 1rem 1.25rem;
border-radius: var(--r-sm);
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 1rem;
font-family: inherit;
transition: border-color 180ms var(--ease), background 180ms var(--ease);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.footer-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.42); }
.footer-newsletter-form input:focus {
outline: 0;
border-color: var(--gold-400);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
}
.footer-newsletter-form input:disabled { opacity: 0.6; cursor: not-allowed; }
.footer-newsletter-form button:disabled { opacity: 0.85; cursor: default; background: var(--gold-600); }
.footer-newsletter-form .thanks {
flex-basis: 100%;
color: var(--gold-400);
font-size: 0.85rem;
margin-top: 0.5rem;
font-weight: 600;
}
@media (max-width: 768px) {
.footer-newsletter-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.footer-newsletter { padding: 2.5rem 0; }
}
/* -------- TIER 2: MAIN 5-COLUMN -------- */
.footer-main {
padding: 4rem 0 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
}
.footer-main::before {
content: "";
position: absolute;
bottom: 0;
left: 25%;
right: 25%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,169,106,0.4), transparent);
}
.footer-main-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
gap: 2.5rem 2rem;
}
@media (max-width: 1200px) {
.footer-main-grid {
grid-template-columns: 1.3fr 1fr 1fr;
gap: 2.5rem 2rem;
}
.footer-col-connect { grid-column: 1 / -1; max-width: none; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2rem; }
.footer-col-connect .footer-phone, .footer-col-connect .footer-email, .footer-col-connect .footer-hours {
display: inline-flex; margin-right: 2rem;
}
}
@media (max-width: 720px) {
.footer-main-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.footer-col-brand { grid-column: 1 / -1; }
.footer-col-connect { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
.footer-main-grid { grid-template-columns: 1fr; }
}
/* --- Brand column --- */
.footer-col-brand { display: flex; flex-direction: column; }
.footer-logo img {
height: 44px;
width: auto;
filter: brightness(0) invert(1);
display: block;
margin-bottom: 1.25rem;
}
.footer-tagline {
color: rgba(255, 255, 255, 0.65);
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 1.5rem;
max-width: 38ch;
}
.footer-address {
font-style: normal;
font-size: 0.88rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 1.5rem;
}
.footer-address strong {
display: block;
color: var(--gold-400);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 0.35rem;
}
/* Social icons */
.footer-social {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.02);
transition: all 220ms var(--ease);
}
.footer-social a:hover {
color: var(--navy-900);
border-color: var(--gold-400);
background: var(--gold-400);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(200, 169, 106, 0.35);
}
.footer-social a svg { display: block; }
.footer-brand-cta { align-self: flex-start; }
/* --- Standard link columns --- */
.footer-h {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-400);
margin: 0 0 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(200, 169, 106, 0.18);
line-height: 1;
}
.footer-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.footer-list a {
font-size: 0.92rem;
color: rgba(255, 255, 255, 0.72);
line-height: 1.3;
position: relative;
display: inline-block;
}
.footer-list a::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1.5px;
background: var(--gold-400);
transition: width 220ms var(--ease);
}
.footer-list a:hover {
color: var(--gold-400);
}
.footer-list a:hover::after { width: 100%; }
.footer-list strong { color: var(--gold-400); font-weight: 700; }
/* --- Connect column --- */
.footer-col-connect { display: flex; flex-direction: column; }
.footer-col-connect .footer-phone,
.footer-col-connect .footer-email,
.footer-col-connect .footer-hours {
display: grid;
grid-template-columns: 22px 1fr;
grid-template-areas:
"icon label"
"icon value";
column-gap: 0.75rem;
row-gap: 0.15rem;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
line-height: 1.25;
}
.footer-col-connect .footer-phone:last-of-type,
.footer-col-connect .footer-email:last-of-type,
.footer-col-connect .footer-hours:last-of-type { border-bottom: 0; }
.footer-col-connect svg { grid-area: icon; color: var(--gold-400); align-self: center; }
.footer-col-connect .label {
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
font-weight: 700;
grid-area: label;
}
.footer-col-connect .value {
font-size: 0.95rem;
color: #fff;
font-weight: 600;
grid-area: value;
font-variant-numeric: tabular-nums;
}
.footer-col-connect .footer-hours .value { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.8); }
.footer-col-connect .footer-phone:hover .value,
.footer-col-connect .footer-email:hover .value { color: var(--gold-400); }
.footer-connect-cta {
margin-top: 1.25rem;
color: var(--gold-400) !important;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.02em;
padding: 0.75rem 0;
border-top: 1px solid rgba(200, 169, 106, 0.2);
display: inline-block;
transition: color 180ms var(--ease);
}
.footer-connect-cta:hover { color: #fff !important; }
/* -------- TIER 3: TRUST STRIP -------- */
.footer-trust {
padding: 2rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.015);
}
.footer-trust-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem 1.5rem;
}
.footer-trust-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.72);
transition: color 180ms var(--ease);
}
.footer-trust-item:hover { color: #fff; }
.footer-trust-item svg {
flex: 0 0 auto;
color: var(--gold-400);
opacity: 0.85;
transition: opacity 180ms var(--ease), transform 220ms var(--ease);
}
.footer-trust-item:hover svg { opacity: 1; transform: scale(1.1); }
.footer-trust-item strong {
display: block;
color: #fff;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
}
.footer-trust-item span {
display: block;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.02em;
margin-top: 0.1rem;
line-height: 1.25;
}
@media (max-width: 1024px) { .footer-trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .footer-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
/* -------- TIER 4: LEGAL BAR -------- */
.footer-legal {
padding: 1.5rem 0;
background: rgba(0, 0, 0, 0.25);
}
.footer-legal-grid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.82rem;
}
.footer-legal-left {
display: flex;
gap: 0.6rem;
align-items: center;
color: rgba(255, 255, 255, 0.55);
flex-wrap: wrap;
}
.footer-copyright { color: rgba(255, 255, 255, 0.75); }
.footer-copyright strong { color: #fff; font-weight: 700; }
.footer-sep { color: rgba(255, 255, 255, 0.25); }
.footer-location { color: rgba(255, 255, 255, 0.55); }
.footer-legal-right {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-legal-right a {
color: rgba(255, 255, 255, 0.6);
font-size: 0.82rem;
transition: color 180ms var(--ease);
position: relative;
}
.footer-legal-right a:hover { color: var(--gold-400); }
@media (max-width: 640px) {
.footer-legal-grid { flex-direction: column; align-items: flex-start; }
.footer-legal-right { gap: 1rem; }
}
/* ============ Delivery map iframe variant ============ */
.delivery-map-iframe {
background: #0b1a30;
padding: 0;
border: 1px solid rgba(200, 169, 106, 0.2);
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}
.delivery-map-iframe::before { display: none; }
.delivery-map-iframe iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
background: #0b1a30;
}
/* ============================================================
MOBILE OVERFLOW GUARDS
- Prevent CSS grid children from forcing their min-content width
- Ensure long words wrap instead of pushing layout
============================================================ */
@media (max-width: 768px) {
.financing-how-grid > *,
.cf-row-2 > *,
.apply-row > *,
.cb-row > *,
.cb-checkgrid > *,
.footer-main-grid > *,
.footer-newsletter-grid > *,
.footer-trust-grid > *,
.footer-legal-grid > *,
.article-inline-cta > *,
.article-price-grid > *,
.article-container > *,
.custom-deposit-grid > *,
.blog-card-featured > *,
.blog-newsletter-card > *,
.blog-grid > *,
.delivery-zones-grid > *,
.delivery-zone-card > *,
.delivery-zones-cards > *,
.contact-main-grid > *,
.contact-trust-grid > *,
.financing-examples-grid > *,
.financing-options-grid > *,
.financing-process-grid > *,
.custom-features-grid > *,
.custom-process-grid > *,
.custom-use-grid > *,
.custom-options-grid > *,
.custom-timeline-bar > *,
.cb-submit > *,
.apply-submit > * {
min-width: 0;
}
/* Long words and URLs should wrap, not overflow */
.cf-field, .apply-field, .cb-field,
.footer-email, .footer-phone, .footer-hours,
.article-body, .blog-card-body, .blog-newsletter-card p,
.contact-email, .footer-tagline {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* H1-H4 on narrow screens shouldn't push layout with long brand/product names */
h1, h2, h3, h4 {
overflow-wrap: break-word;
word-wrap: break-word;
}
}
/* Extra-narrow (iPhone SE / old Android) — 320-360px */
@media (max-width: 380px) {
.footer-main, .footer-newsletter, .footer-trust, .footer-legal {
padding-left: 0;
padding-right: 0;
}
.footer-main .container, .footer-newsletter .container,
.footer-trust .container, .footer-legal .container {
padding-inline: 1rem;
}
/* Shrink hero H1 slightly on tiny screens */
.resources-hero-inner h1,
.article-hero-inner h1,
.page-hero h1,
.state-hero h1 {
font-size: clamp(1.75rem, 7vw, 2.25rem);
}
}
/* ============================================================
FEATURES CSS — Favorites, Compare, Mobile Dock, Inventory,
Toasts, Scroll Progress, Back-to-Top, Saved Homes, Compare Page,
Quiz, Case Studies, Financing Calculator
============================================================ */
/* ---------- CARD ACTIONS OVERLAY (heart + compare) ---------- */
.card-actions-overlay {
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
z-index: 5;
opacity: 0.85;
transition: opacity 180ms var(--ease);
}
.model-card:hover .card-actions-overlay,
.catalog-card:hover .card-actions-overlay,
.state-card:hover .card-actions-overlay { opacity: 1; }
.card-action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
border: 0;
display: grid;
place-items: center;
cursor: pointer;
color: var(--navy-900);
transition: all 220ms var(--ease);
box-shadow: 0 2px 10px rgba(15,23,42,0.15);
backdrop-filter: blur(4px);
}
.card-action-btn:hover {
background: #fff;
transform: scale(1.08);
box-shadow: 0 4px 16px rgba(15,23,42,0.2);
}
.card-action-btn.fav-btn.is-fav {
background: #e02434;
color: #fff;
}
.card-action-btn.fav-btn.is-fav svg { fill: currentColor; }
.card-action-btn.cmp-btn.is-cmp {
background: var(--gold-500);
color: var(--navy-900);
}
/* ---------- NAV FAVORITE BADGE (small heart+number in nav) ---------- */
.nav-fav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.5rem;
color: inherit;
}
.nav-fav-badge {
display: inline-block;
min-width: 20px;
padding: 2px 6px;
border-radius: 10px;
background: var(--gold-500);
color: var(--navy-900);
font-size: 0.7rem;
font-weight: 800;
text-align: center;
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
/* ---------- TOAST NOTIFICATIONS ---------- */
.toast-container {
position: fixed;
bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
right: 1.25rem;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
}
.toast {
pointer-events: auto;
min-width: 240px;
max-width: 340px;
padding: 0.9rem 1.15rem;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
color: #fff;
border-radius: var(--r-sm);
box-shadow: 0 12px 40px rgba(15,23,42,0.35);
font-size: 0.92rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.65rem;
transform: translateY(12px) scale(0.96);
opacity: 0;
transition: transform 280ms var(--ease), opacity 280ms var(--ease);
border-left: 3px solid var(--gold-500);
}
.toast.toast-in { transform: translateY(0) scale(1); opacity: 1; }
.toast.toast-out { transform: translateY(12px) scale(0.96); opacity: 0; }
.toast-success svg { color: var(--gold-400); flex-shrink: 0; }
.toast-warn { border-left-color: #f59e0b; }
@media (max-width: 640px) {
.toast-container { left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
.toast { min-width: 0; width: 100%; max-width: 100%; }
}
/* ---------- STICKY MOBILE CTA DOCK ---------- */
.mobile-dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
display: none;
background: rgba(10, 26, 48, 0.72);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-top: 1px solid rgba(200, 169, 106, 0.2);
padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}
.mobile-dock-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.65rem 0.5rem;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
border-radius: var(--r-sm);
transition: background 180ms var(--ease), color 180ms var(--ease);
}
.mobile-dock-btn:hover,
.mobile-dock-btn:active { background: rgba(200, 169, 106, 0.15); color: var(--gold-400); }
.mobile-dock-btn svg { display: block; }
.mobile-dock-primary {
background: var(--gold-500);
color: var(--navy-900);
}
.mobile-dock-primary:hover { background: var(--gold-400); color: var(--navy-900); }
/* Mobile dock removed per user request. Keep CSS but hide it. */
.mobile-dock { display: none !important; }
/* ---------- COMPARE TRAY (premium glass: floating bottom on desktop, above dock on mobile) ---------- */
.compare-tray {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 950;
max-width: 820px;
margin: 0 auto;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--r-md);
padding: 0.85rem 1.1rem;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 1px 0 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
isolation: isolate;
animation: trayIn 320ms var(--ease);
}
.compare-tray::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(55% 40% at 5% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 60%),
radial-gradient(50% 40% at 95% 100%, rgba(200, 169, 106, 0.22) 0%, transparent 60%);
z-index: 0;
}
.compare-tray > * { position: relative; z-index: 1; }
@keyframes trayIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.compare-tray-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
}
.compare-tray-items { display: flex; gap: 0.5rem; }
.compare-tray-item,
.compare-tray-slot {
width: 48px;
height: 48px;
border-radius: var(--r-sm);
overflow: hidden;
display: block;
flex-shrink: 0;
position: relative;
transition: transform 180ms var(--ease);
}
.compare-tray-item { background: #fff; }
.compare-tray-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.compare-tray-item:hover { transform: translateY(-2px); }
.compare-tray-slot {
background: rgba(255, 255, 255, 0.04);
border: 1.5px dashed rgba(255, 255, 255, 0.2);
}
.compare-tray-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
letter-spacing: 0.04em;
font-weight: 600;
}
.compare-tray-actions { display: flex; gap: 0.5rem; align-items: center; }
.compare-tray-clear {
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
padding: 0.4rem 0.5rem;
letter-spacing: 0.04em;
transition: color 180ms var(--ease);
}
.compare-tray-clear:hover { color: var(--gold-400); }
@media (max-width: 768px) {
.compare-tray { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 0.75rem; right: 0.75rem; padding: 0.7rem 0.9rem; }
.compare-tray-inner { grid-template-columns: 1fr; gap: 0.65rem; }
.compare-tray-label { text-align: center; font-size: 0.78rem; }
.compare-tray-actions { justify-content: space-between; }
.compare-tray-item, .compare-tray-slot { width: 40px; height: 40px; }
}
/* ---------- LIVE INVENTORY COUNTER STRIP ---------- */
.inventory-strip {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem 1.75rem;
padding: 1.1rem 1.25rem;
background: linear-gradient(135deg, rgba(200, 169, 106, 0.08), rgba(15, 58, 57, 0.05));
border: 1px solid rgba(200, 169, 106, 0.2);
border-radius: var(--r-md);
font-size: 0.88rem;
color: var(--navy-800);
margin: 0 auto 2rem;
max-width: 940px;
}
.inv-stat {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
.inv-stat strong {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
color: var(--gold-600);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
animation: invPulse 2.4s ease-in-out infinite;
}
@keyframes invPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}
.inv-stat span {
color: var(--navy-700);
font-weight: 600;
letter-spacing: 0.005em;
}
.inv-sep { color: var(--navy-300); }
@media (max-width: 680px) {
.inventory-strip { flex-direction: column; gap: 0.75rem; }
.inv-sep { display: none; }
.inv-stat { flex-direction: row; justify-content: center; width: 100%; }
}
/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 9999;
pointer-events: none;
background: transparent;
}
.scroll-progress-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
/* ---------- BACK TO TOP ---------- */
.back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 880;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--navy-900);
color: #fff;
border: 1px solid rgba(200, 169, 106, 0.35);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity 240ms var(--ease), transform 240ms var(--ease), background 180ms var(--ease);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.back-to-top.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--gold-500);
color: var(--navy-900);
border-color: var(--gold-500);
}
@media (max-width: 768px) {
.back-to-top { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; }
}
/* ---------- SAVED HOMES PAGE ---------- */
.saved-homes-hero { padding: 6rem 0 3rem; }
.saved-empty {
text-align: center;
padding: 4rem 2rem;
background: var(--cream);
border: 1px dashed var(--navy-200);
border-radius: var(--r-lg);
color: var(--navy-700);
}
.saved-empty svg { color: var(--gold-500); margin: 0 auto 1.25rem; }
.saved-empty h3 { color: var(--navy-900); margin-bottom: 0.5rem; }
.saved-empty p { margin-bottom: 1.5rem; font-size: 1.05rem; }
#savedHomesGrid:not(:empty) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.saved-card {
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
overflow: hidden;
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.saved-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.saved-card-media {
display: block;
aspect-ratio: 16/10;
overflow: hidden;
}
.saved-card-media img { width: 100%; height: 100%; object-fit: cover; }
.saved-card-body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.saved-card-body h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.saved-card-body h3 a { color: var(--navy-900); }
.saved-card-body h3 a:hover { color: var(--gold-600); }
.saved-card-price {
font-family: var(--font-display);
font-weight: 800;
color: var(--gold-600);
font-size: 1.2rem;
margin-bottom: 1rem;
flex: 1;
}
.saved-card-actions { display: flex; gap: 0.5rem; }
/* ---------- COMPARE PAGE ---------- */
.cmp-grid {
display: grid;
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
overflow: hidden;
background: #fff;
}
.cmp-label, .cmp-cell, .cmp-head {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--navy-100);
border-right: 1px solid var(--navy-100);
font-size: 0.95rem;
}
.cmp-label {
background: var(--navy-50);
font-weight: 700;
color: var(--navy-700);
letter-spacing: 0.02em;
font-size: 0.82rem;
text-transform: uppercase;
}
.cmp-head {
background: var(--cream);
position: relative;
padding: 1.5rem;
}
.cmp-head img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
border-radius: var(--r-sm);
margin-bottom: 0.75rem;
}
.cmp-head h3 { font-size: 1.1rem; margin: 0.5rem 0; }
.cmp-remove {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.08);
border: 0;
color: var(--navy-700);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
transition: all 180ms var(--ease);
}
.cmp-remove:hover { background: var(--navy-900); color: #fff; }
.cmp-cell { color: var(--navy-800); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-grid > *:last-child,
.cmp-grid > :nth-last-child(-n + var(--cmp-count, 4)) { border-right: 0; }
#compareEmpty {
text-align: center;
padding: 5rem 2rem;
background: var(--cream);
border: 1px dashed var(--navy-200);
border-radius: var(--r-lg);
}
@media (max-width: 720px) {
.cmp-grid { font-size: 0.85rem; }
.cmp-label { padding: 0.75rem 0.85rem; font-size: 0.72rem; }
.cmp-cell, .cmp-head { padding: 0.85rem; }
.cmp-head h3 { font-size: 0.95rem; }
}
/* ---------- FINANCING CALCULATOR ---------- */
.fin-calc {
background: linear-gradient(135deg, var(--navy-900), #061326);
color: #fff;
border-radius: var(--r-lg);
padding: clamp(1.75rem, 3vw, 2.5rem);
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}
.fin-calc-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.75rem;
}
.fin-calc-head .eyebrow { color: var(--gold-400); }
.fin-calc-grid { display: grid; gap: 1.25rem; }
.fin-slider {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.fin-slider-label {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
font-weight: 700;
}
.fin-slider-val {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
color: var(--gold-400);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.fin-calc input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.fin-calc input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold-500);
cursor: grab;
border: 3px solid #fff;
box-shadow: 0 2px 10px rgba(200, 169, 106, 0.4);
transition: transform 180ms var(--ease);
}
.fin-calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.fin-calc input[type="range"]::-moz-range-thumb {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--gold-500);
cursor: grab;
border: 3px solid #fff;
box-shadow: 0 2px 10px rgba(200,169,106,0.4);
}
.fin-calc-result {
margin-top: 1.75rem;
padding: 1.5rem;
background: rgba(200, 169, 106, 0.1);
border: 1px solid rgba(200, 169, 106, 0.3);
border-radius: var(--r-md);
display: grid;
gap: 0.75rem;
}
.fin-calc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.95rem;
}
.fin-calc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fin-calc-row.main {
border-bottom: 0;
padding: 0.5rem 0 0.75rem;
border-top: 1px solid rgba(255,255,255,0.15);
margin-top: 0.5rem;
}
.fin-calc-row span { color: rgba(255, 255, 255, 0.7); }
.fin-calc-row strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-calc-row.main strong {
font-family: var(--font-display);
font-size: 2.25rem;
color: var(--gold-400);
font-weight: 800;
letter-spacing: -0.02em;
}
.fin-calc-row.main span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); font-weight: 700; }
.fin-calc-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 1rem 0 0; text-align: center; font-style: italic; }
/* ---------- QUIZ FUNNEL ---------- */
.quiz-container {
max-width: 720px;
margin: 0 auto;
padding: 2.5rem 2rem 3rem;
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-lg);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}
.quiz-progress {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 2rem;
}
.quiz-progress-bar {
flex: 1;
height: 6px;
background: var(--navy-100);
border-radius: 3px;
overflow: hidden;
}
.quiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
border-radius: 3px;
transition: width 400ms var(--ease-out);
}
.quiz-progress-label {
font-size: 0.82rem;
letter-spacing: 0.08em;
color: var(--gold-600);
font-weight: 700;
white-space: nowrap;
}
.quiz-step {
display: none;
animation: quizIn 420ms var(--ease);
}
.quiz-step.active { display: block; }
@keyframes quizIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.quiz-step h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.5rem; }
.quiz-step p { color: var(--navy-600); margin-bottom: 2rem; }
.quiz-options {
display: grid;
gap: 0.75rem;
margin-bottom: 2rem;
}
.quiz-option {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.15rem 1.35rem;
border: 1.5px solid var(--navy-200);
border-radius: var(--r-md);
background: #fff;
cursor: pointer;
transition: all 180ms var(--ease);
}
.quiz-option:hover {
border-color: var(--gold-400);
background: rgba(200, 169, 106, 0.04);
transform: translateX(4px);
}
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option:has(input:checked) {
border-color: var(--gold-500);
background: rgba(200, 169, 106, 0.08);
box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.12);
}
.quiz-option-icon {
width: 44px;
height: 44px;
border-radius: var(--r-sm);
background: var(--navy-50);
color: var(--gold-600);
display: grid;
place-items: center;
flex-shrink: 0;
transition: background 180ms var(--ease);
}
.quiz-option:has(input:checked) .quiz-option-icon {
background: var(--gold-500);
color: var(--navy-900);
}
.quiz-option-text { flex: 1; }
.quiz-option-text strong {
display: block;
font-size: 1rem;
color: var(--navy-900);
margin-bottom: 0.2rem;
}
.quiz-option-text span { color: var(--navy-600); font-size: 0.88rem; }
.quiz-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
gap: 1rem;
}
.quiz-back {
background: transparent;
border: 0;
color: var(--navy-500);
font-weight: 600;
cursor: pointer;
padding: 0.5rem 0;
font-size: 0.92rem;
}
.quiz-back:hover { color: var(--navy-900); }
.quiz-back:disabled { opacity: 0.4; cursor: not-allowed; }
.quiz-result {
text-align: center;
padding: 1rem 0;
}
.quiz-result-intro {
background: linear-gradient(135deg, rgba(200, 169, 106, 0.1), rgba(200, 169, 106, 0.05));
padding: 2rem;
border-radius: var(--r-md);
margin-bottom: 2rem;
}
.quiz-result-intro h2 { margin-bottom: 0.75rem; }
.quiz-result-intro p { color: var(--navy-700); font-size: 1.05rem; }
.quiz-recs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
text-align: left;
}
@media (max-width: 560px) {
.quiz-container { padding: 1.75rem 1.25rem 2rem; }
.quiz-option { padding: 0.9rem 1rem; gap: 0.75rem; }
.quiz-option-icon { width: 36px; height: 36px; }
}
/* ---------- CASE STUDIES ---------- */
.case-study-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 2rem;
transition: box-shadow 240ms var(--ease);
}
.case-study-card:hover { box-shadow: var(--shadow-lg); }
.case-study-card:nth-child(even) .case-study-media { order: 2; }
.case-study-media {
background-size: cover;
background-position: center;
min-height: 340px;
position: relative;
}
.case-study-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 50%, rgba(15, 23, 42, 0.4));
}
.case-study-body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.case-study-meta {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.case-study-meta span {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
padding: 0.35rem 0.75rem;
background: rgba(200, 169, 106, 0.1);
border: 1px solid rgba(200, 169, 106, 0.25);
border-radius: var(--r-pill);
}
.case-study-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 1rem; letter-spacing: -0.015em; }
.case-study-body blockquote {
font-family: var(--font-display);
font-size: 1.1rem;
line-height: 1.55;
color: var(--navy-800);
font-style: italic;
margin: 0 0 1.5rem;
padding-left: 1.25rem;
border-left: 3px solid var(--gold-500);
}
.case-study-owner {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.case-study-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
color: var(--navy-900);
display: grid;
place-items: center;
font-weight: 800;
flex-shrink: 0;
}
.case-study-owner strong { display: block; color: var(--navy-900); }
.case-study-owner span { font-size: 0.88rem; color: var(--navy-500); }
.case-study-specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--navy-100);
border-bottom: 1px solid var(--navy-100);
margin-bottom: 1.25rem;
}
.case-study-specs > div { display: flex; flex-direction: column; gap: 0.15rem; }
.case-study-specs strong {
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--navy-900);
font-weight: 800;
letter-spacing: -0.01em;
}
.case-study-specs span {
font-size: 0.7rem;
color: var(--navy-500);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
@media (max-width: 768px) {
.case-study-card { grid-template-columns: 1fr; }
.case-study-card:nth-child(even) .case-study-media { order: 0; }
.case-study-media { min-height: 220px; }
.case-study-body { padding: 1.75rem; }
}
/* ============================================================
TESTIMONIAL CARDS V2 (with owner photos)
============================================================ */
.testimonial.testimonial-v2 {
background: #fff;
border: 1px solid var(--navy-200);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
box-shadow: 0 2px 12px rgba(15,23,42,0.04);
}
.testimonial-v2:hover {
transform: translateY(-6px);
box-shadow: 0 18px 50px rgba(15,23,42,0.12);
border-color: var(--gold-400);
}
.testimonial-media {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--navy-100);
}
.testimonial-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease);
}
.testimonial-v2:hover .testimonial-media img { transform: scale(1.03); }
.testimonial-body {
padding: 1.75rem 1.75rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.testimonial-body .stars {
color: var(--gold-500);
font-size: 1.1rem;
letter-spacing: 0.1em;
margin-bottom: 0.85rem;
}
.testimonial-body blockquote {
font-family: var(--font-body);
font-size: 0.98rem;
line-height: 1.6;
color: var(--navy-800);
margin: 0 0 1.25rem;
font-style: normal;
flex: 1;
position: relative;
padding-left: 1rem;
border-left: 3px solid var(--gold-500);
}
.testimonial-body cite {
display: flex;
flex-direction: column;
font-style: normal;
font-weight: 700;
color: var(--navy-900);
font-size: 1.05rem;
letter-spacing: -0.005em;
padding-top: 1rem;
border-top: 1px solid var(--navy-100);
}
.testimonial-body cite span {
font-weight: 500;
font-size: 0.85rem;
color: var(--navy-500);
letter-spacing: 0.02em;
margin-top: 0.2rem;
}
.testimonial-v2.filtered-out { display: none; }
/* Reviews grid should keep 3-col on desktop, 2 on tablet, 1 on mobile */
#reviewsGrid.grid.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
@media (max-width: 1024px) { #reviewsGrid.grid.grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { #reviewsGrid.grid.grid-3 { grid-template-columns: 1fr; } }
/* ============================================================
PRESS STRIP ("As featured in" logos)
============================================================ */
.press-strip {
padding: 2.5rem 0;
background: #fff;
border-top: 1px solid var(--navy-100);
border-bottom: 1px solid var(--navy-100);
}
.press-strip .container {
display: flex;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}
.press-strip-label {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy-400);
font-weight: 700;
white-space: nowrap;
}
.press-strip-logos {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.press-logo {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
height: 40px;
opacity: 0.35;
filter: grayscale(1);
transition: opacity 260ms var(--ease), filter 260ms var(--ease);
cursor: default;
}
.press-logo:hover {
opacity: 1;
filter: grayscale(0);
}
.press-logo img {
height: 28px;
width: auto;
object-fit: contain;
}
/* Text placeholder logos (until real logos are available) */
.press-logo-text {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--navy-900);
text-transform: uppercase;
user-select: none;
}
@media (max-width: 768px) {
.press-strip { padding: 1.75rem 0; }
.press-strip .container { gap: 1.25rem; }
.press-strip-logos { gap: 1.25rem; }
.press-logo { min-width: 80px; }
.press-logo-text { font-size: 1rem; }
}