/* ===================================================================
Skyline Home Offer — Bright Minimal (Variation 3)
Production stylesheet
=================================================================== */
/* ============================================================
MULTI-STEP LEAD MODAL
============================================================ */
/* Note: we intentionally do NOT lock body scroll. The modal is
position:fixed so it stays static while the page scrolls behind. */
.shof-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
.shof-modal.shof-modal-open { opacity: 1; pointer-events: auto; }
.shof-modal[hidden] { display: none; }
.shof-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 15, 15, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.shof-modal-panel {
position: relative;
width: 100%;
max-width: 620px;
max-height: 92vh;
overflow-y: auto;
background: #F8F4ED;
border-radius: 20px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 169, 97, 0.1);
padding: 44px 44px 32px;
transform: translateY(20px) scale(0.96);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
font-family: 'Inter', system-ui, sans-serif;
color: #0F0F0F;
}
.shof-modal.shof-modal-open .shof-modal-panel {
transform: translateY(0) scale(1);
}
.shof-modal-close {
position: absolute;
top: 16px;
right: 16px;
background: rgba(15, 15, 15, 0.05);
border: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #0F0F0F;
transition: all 0.2s;
z-index: 1;
}
.shof-modal-close:hover {
background: rgba(15, 15, 15, 0.1);
transform: rotate(90deg);
}
/* Progress strip across the top */
.shof-modal-progress {
position: relative;
margin: -16px -44px 24px;
padding: 0 44px;
}
.shof-modal-progress-track {
height: 6px;
background: rgba(201, 169, 97, 0.15);
border-radius: 0;
overflow: hidden;
margin: 0 -44px;
}
.shof-modal-progress-fill {
height: 100%;
background: linear-gradient(90deg, #C9A961 0%, #A88A26 100%);
border-radius: 0;
width: 16.66%;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.shof-modal-step-pill {
display: inline-block;
margin: 16px auto 0;
padding: 6px 16px;
border: 1.5px solid #C9A961;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #A88A26;
letter-spacing: 0.5px;
position: relative;
background: #F8F4ED;
}
.shof-modal-progress { text-align: center; }
.shof-modal-body { min-height: 280px; }
/* Override the legacy global .shof-step rule which defaults to display:none.
Inside the modal we use the [hidden] attribute to control visibility. */
.shof-modal .shof-step { display: block; animation: none; }
.shof-modal .shof-step[hidden] { display: none; }
.shof-modal .shof-step h2,
.shof-step h2 {
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;
text-align: center;
margin: 16px 0 12px;
color: #0F0F0F;
}
.shof-step-sub {
text-align: center;
font-size: 15px;
color: rgba(15, 15, 15, 0.65);
margin-bottom: 28px;
line-height: 1.5;
}
/* Step 1 — Price slider */
.shof-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 32px 0 20px;
}
.shof-price-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: #FFFFFF;
border: 1.5px solid #E5DCC8;
color: #0F0F0F;
font-size: 22px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.shof-price-btn:hover {
background: #C9A961;
border-color: #C9A961;
color: #FFFFFF;
transform: scale(1.05);
}
.shof-price-value {
flex: 1;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: #0F0F0F;
}
.shof-price-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(to right, #C9A961 0%, #C9A961 var(--shof-fill, 26%), rgba(201,169,97,0.18) var(--shof-fill, 26%), rgba(201,169,97,0.18) 100%);
height: 6px;
border-radius: 3px;
outline: none;
margin: 8px 0;
}
.shof-price-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: #C9A961;
border: 3px solid #FFFFFF;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(201,169,97,0.4);
}
.shof-price-slider::-moz-range-thumb {
width: 22px;
height: 22px;
background: #C9A961;
border: 3px solid #FFFFFF;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(201,169,97,0.4);
}
.shof-price-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 13px;
color: rgba(15, 15, 15, 0.55);
font-weight: 500;
}
/* Trust strip below the slider — two-line layout */
.shof-trust-strip {
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid rgba(201, 169, 97, 0.2);
text-align: center;
}
.shof-trust-line {
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: rgba(15, 15, 15, 0.7);
margin: 0 0 12px;
font-weight: 500;
}
.shof-trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
font-size: 12.5px;
font-weight: 600;
color: rgba(15, 15, 15, 0.75);
}
.shof-trust-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.shof-trust-star {
color: #C9A961;
font-size: 14px;
text-shadow: 0 1px 3px rgba(201, 169, 97, 0.3);
}
[data-theme="dark"] .shof-trust-strip { border-top-color: rgba(201, 169, 97, 0.25); }
[data-theme="dark"] .shof-trust-line { color: rgba(248, 244, 237, 0.7); }
[data-theme="dark"] .shof-trust-badges { color: rgba(248, 244, 237, 0.8); }
@media (max-width: 600px) {
.shof-trust-strip { margin-top: 24px; padding-top: 18px; }
.shof-trust-line { font-size: 12px; margin-bottom: 10px; }
.shof-trust-badges { gap: 8px 14px; font-size: 11.5px; }
}
/* Step 2 — Tile grid */
.shof-tile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
.shof-tile {
background: #FFFFFF;
border: 1.5px solid #E5DCC8;
border-radius: 12px;
padding: 18px 14px;
font-size: 15px;
font-weight: 600;
color: #0F0F0F;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
text-align: center;
line-height: 1.3;
}
.shof-tile:hover {
border-color: #C9A961;
background: rgba(201, 169, 97, 0.06);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(201, 169, 97, 0.15);
}
.shof-tile-selected {
border-color: #C9A961;
background: linear-gradient(135deg, #C9A961, #A88A26);
color: #FFFFFF;
}
/* Generic input */
.shof-input {
width: 100%;
padding: 16px 18px;
border: 1.5px solid #E5DCC8;
border-radius: 12px;
font-size: 16px;
font-family: inherit;
background: #FFFFFF;
color: #0F0F0F;
transition: all 0.2s;
outline: none;
}
.shof-input::placeholder { color: rgba(15, 15, 15, 0.4); }
.shof-input:focus {
border-color: #C9A961;
box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.15);
}
.shof-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.shof-field-error {
color: #C7421E;
font-size: 13px;
margin-top: 8px;
min-height: 18px;
text-align: center;
}
.shof-disclaimer-sm {
font-size: 12px;
color: rgba(15, 15, 15, 0.55);
text-align: center;
margin-top: 14px;
line-height: 1.5;
}
/* Footer with Back / Next — scoped inside .shof-modal so legacy
.shof-back / .shof-next styles elsewhere don't bleed in. */
.shof-modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
gap: 12px;
}
.shof-modal .shof-back {
background: transparent;
border: 1.5px solid #E5DCC8;
border-radius: 10px;
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
color: #0F0F0F;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.shof-modal .shof-back:hover { background: rgba(15, 15, 15, 0.05); border-color: #C9A961; color: #A88A26; }
.shof-modal .shof-next {
background: linear-gradient(135deg, #C9A961, #A88A26);
border: none;
border-radius: 10px;
padding: 11px 22px;
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
letter-spacing: 0.3px;
box-shadow: 0 4px 14px rgba(201, 169, 97, 0.35);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.shof-modal .shof-next:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(201, 169, 97, 0.45);
background: linear-gradient(135deg, #D4B574, #B89832);
}
.shof-modal .shof-next:disabled { opacity: 0.7; cursor: default; transform: none; }
/* Success screen */
.shof-success { text-align: center; padding: 20px 0; }
.shof-success-icon {
width: 88px;
height: 88px;
background: linear-gradient(135deg, #4ADE80, #22C55E);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #FFFFFF;
box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
animation: shofPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes shofPop {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.shof-success-text {
font-size: 15px;
line-height: 1.55;
color: rgba(15, 15, 15, 0.8);
max-width: 440px;
margin: 0 auto 8px;
}
.shof-success-sub {
font-size: 14px;
color: rgba(15, 15, 15, 0.6);
margin-top: 6px;
}
.shof-success-sub a { color: #A88A26; font-weight: 700; }
.shof-modal-done {
margin-top: 24px;
background: transparent;
border: 1.5px solid #C9A961;
color: #A88A26;
padding: 11px 28px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
}
.shof-modal-done:hover { background: rgba(201, 169, 97, 0.12); }
/* Dark mode */
[data-theme="dark"] .shof-modal-panel {
background: #1A1612;
color: #F8F4ED;
}
[data-theme="dark"] .shof-modal-close { background: rgba(248,244,237,0.08); color: #F8F4ED; }
[data-theme="dark"] .shof-modal-close:hover { background: rgba(248,244,237,0.15); }
[data-theme="dark"] .shof-step h2 { color: #F8F4ED; }
[data-theme="dark"] .shof-step-sub { color: rgba(248,244,237,0.65); }
[data-theme="dark"] .shof-price-value { color: #F8F4ED; }
[data-theme="dark"] .shof-price-btn { background: #2A2620; border-color: #3A332A; color: #F8F4ED; }
[data-theme="dark"] .shof-price-btn:hover { background: #C9A961; border-color: #C9A961; color: #0F0F0F; }
[data-theme="dark"] .shof-price-labels { color: rgba(248,244,237,0.55); }
[data-theme="dark"] .shof-tile { background: #2A2620; border-color: #3A332A; color: #F8F4ED; }
[data-theme="dark"] .shof-tile:hover { background: rgba(201,169,97,0.12); border-color: #C9A961; }
[data-theme="dark"] .shof-input { background: #2A2620; border-color: #3A332A; color: #F8F4ED; }
[data-theme="dark"] .shof-input::placeholder { color: rgba(248,244,237,0.4); }
[data-theme="dark"] .shof-input:focus { border-color: #C9A961; }
[data-theme="dark"] .shof-modal .shof-back { border-color: #3A332A; color: #F8F4ED; background: transparent; }
[data-theme="dark"] .shof-modal .shof-back:hover { background: rgba(248,244,237,0.06); border-color: #C9A961; color: #C9A961; }
[data-theme="dark"] .shof-modal-step-pill { background: #1A1612; }
[data-theme="dark"] .shof-success-text { color: rgba(248,244,237,0.85); }
[data-theme="dark"] .shof-success-sub { color: rgba(248,244,237,0.6); }
[data-theme="dark"] .shof-disclaimer-sm { color: rgba(248,244,237,0.55); }
/* Mobile */
@media (max-width: 600px) {
.shof-modal { padding: 0; align-items: flex-end; }
.shof-modal-panel {
max-height: 96vh;
border-radius: 20px 20px 0 0;
padding: 32px 22px 24px;
}
.shof-modal-progress { margin: -12px -22px 20px; padding: 0 22px; }
.shof-modal-progress-track { margin: 0 -22px; }
.shof-step h2 { font-size: 24px; }
.shof-step-sub { font-size: 14px; margin-bottom: 22px; }
.shof-price-value { font-size: 22px; }
.shof-row-2 { grid-template-columns: 1fr; }
.shof-tile-grid { grid-template-columns: 1fr; }
.shof-modal-footer { flex-direction: row; }
.shof-modal .shof-back, .shof-modal .shof-next { padding: 10px 16px; font-size: 13px; }
}
/* ===================================================================
End of multi-step modal
=================================================================== */
:root {
--white: #FFFFFF;
--off-white: #FAFBFC;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-400: #94A3B8;
--gray-600: #475569;
--gray-900: #0F172A;
--blue: #2563EB;
--blue-dark: #1D4ED8;
--blue-soft: #EFF6FF;
--green: #10B981;
--red: #EF4444;
--black: #000000;
--amber: #FBBF24;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--white);
color: var(--gray-900);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.011em;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }
/* ===== ICON SYSTEM ===== */
.icon {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 40px; height: 40px; }
/* Icon containers (rounded squares with backgrounds) */
.icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
flex-shrink: 0;
}
.icon-box-blue {
background: var(--blue-soft);
color: var(--blue);
}
.icon-box-blue-grad {
background: linear-gradient(135deg, var(--blue) 0%, #6366F1 100%);
color: white;
box-shadow: 0 6px 16px rgba(37,99,235,0.25);
}
.icon-box-white {
background: var(--white);
color: var(--blue);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Icons sized inside container elements */
.step-icon .icon { width: 28px; height: 28px; }
.value-icon .icon { width: 28px; height: 28px; }
.contact-card-icon .icon { width: 28px; height: 28px; }
.area-tile-icon .icon { width: 18px; height: 18px; color: var(--blue); }
.state-emoji .icon { width: 36px; height: 36px; color: var(--blue); }
.hero-tag .icon { width: 16px; height: 16px; }
.section-tag .icon { width: 16px; height: 16px; }
.header-phone .icon { width: 16px; height: 16px; }
.btn .icon { width: 18px; height: 18px; }
.footer-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.5; }
.footer-line .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--blue); }
.footer-line span { flex: 1; }
/* ===== HEADER ===== */
.header {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: 1280px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 17px;
color: var(--gray-900);
letter-spacing: -0.5px;
text-decoration: none;
}
.logo-icon {
width: 32px;
height: 32px;
display: block;
object-fit: contain;
background: transparent;
border-radius: 6px;
flex-shrink: 0;
}
.nav { display: flex; gap: 28px; align-items: center; }
.nav a {
color: var(--gray-600);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.15s;
}
.nav a:hover, .nav a.active { color: var(--gray-900); }
.header-phone {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--gray-900);
text-decoration: none;
font-size: 14px;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--gray-900);
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
cursor: pointer;
border: none;
transition: all 0.15s;
letter-spacing: -0.01em;
font-family: inherit;
}
.btn-primary { background: var(--gray-900); color: white; }
.btn-primary:hover {
background: var(--black);
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.btn-outline {
background: var(--white);
color: var(--gray-900);
border: 1px solid var(--gray-200);
}
.btn-outline:hover { border-color: var(--gray-900); }
.btn-blue { background: var(--blue); color: white; }
.btn-blue:hover { background: var(--blue-dark); }
/* ===== SECTION HEADERS ===== */
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--blue-soft);
color: var(--blue);
padding: 10px 20px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.3px;
margin-bottom: 20px;
}
.section-title {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 16px;
letter-spacing: -1.5px;
}
.section-title em {
font-style: normal;
color: var(--blue);
}
.section-sub {
font-size: 18px;
color: var(--gray-600);
max-width: 700px;
margin-bottom: 48px;
line-height: 1.55;
}
.text-center { text-align: center; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }
/* ===== HERO ===== */
.hero {
padding: 80px 0 100px;
background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
align-items: center;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--blue-soft);
color: var(--blue);
padding: 10px 20px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.3px;
margin-bottom: 20px;
}
.hero h1 {
font-size: 64px;
font-weight: 800;
line-height: 1.05;
margin-bottom: 22px;
letter-spacing: -2.5px;
color: var(--gray-900);
}
.hero h1 em {
font-style: normal;
background: linear-gradient(120deg, var(--blue) 0%, #6366F1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-sub {
font-size: 19px;
color: var(--gray-600);
margin-bottom: 32px;
max-width: 540px;
line-height: 1.55;
}
.hero-bullets {
display: flex;
gap: 28px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.hero-bullets div {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--gray-600);
}
.hero-bullets .star {
color: #C9A961;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
text-shadow: 0 1px 2px rgba(201,169,97,0.25);
}
/* Italicized tagline above the hero bullets */
.hero-trust { margin-bottom: 32px; }
.hero-trust-line {
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--gray-600);
font-weight: 500;
margin: 0 0 14px;
white-space: nowrap;
letter-spacing: -0.1px;
}
.hero-trust .hero-bullets { margin-bottom: 0; }
[data-theme="dark"] .hero-trust-line { color: rgba(248, 244, 237, 0.7) !important; }
@media (max-width: 720px) {
.hero-trust-line { white-space: normal; font-size: 12.5px; margin-bottom: 12px; }
.hero-trust { margin-bottom: 24px; }
}
.hero-bullets .check {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* ===== PAGE HERO (sub-pages) ===== */
.page-hero {
background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
padding: 80px 0 60px;
text-align: center;
}
.page-hero h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.05;
margin-bottom: 16px;
letter-spacing: -2px;
}
.page-hero p {
font-size: 19px;
color: var(--gray-600);
max-width: 700px;
margin: 0 auto;
}
/* ===== FORM ===== */
.hero-form {
background: var(--white);
padding: 32px;
border-radius: 16px;
border: 1px solid var(--gray-200);
box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}
.form-step {
color: var(--blue);
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}
.form-title {
font-size: 24px;
font-weight: 800;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.form-field { margin-bottom: 14px; }
.form-field label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
color: var(--gray-600);
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.15s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-submit {
width: 100%;
padding: 14px;
background: var(--gray-900);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
margin-top: 8px;
font-family: inherit;
}
.form-submit:hover { background: var(--black); }
.form-disclaimer {
font-size: 12px;
color: var(--gray-400);
margin-top: 12px;
text-align: center;
}
/* ===== CUSTOM MULTI-STEP FORM ===== */
.shof-form { width: 100%; }
.shof-progress {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.shof-progress-bar {
flex: 1;
height: 4px;
background: var(--gray-100);
border-radius: 2px;
overflow: hidden;
}
.shof-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--blue) 0%, #6366F1 100%);
border-radius: 2px;
transition: width 0.4s ease;
width: 50%;
}
.shof-progress-label {
font-size: 12px;
color: var(--gray-600);
font-weight: 500;
white-space: nowrap;
}
.shof-step {
display: none;
animation: shofFadeIn 0.3s ease;
}
.shof-step.active { display: block; }
@keyframes shofFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.shof-field { margin-bottom: 14px; }
.shof-field label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
color: var(--gray-600);
}
.shof-field label .req { color: var(--red); }
.shof-field input,
.shof-field textarea,
.shof-field select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
background: white;
color: var(--gray-900);
}
.shof-field input:focus,
.shof-field textarea:focus,
.shof-field select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.shof-field input.shof-error,
.shof-field textarea.shof-error,
.shof-field select.shof-error {
border-color: var(--red);
}
.shof-field textarea {
min-height: 80px;
resize: vertical;
font-family: inherit;
}
.shof-error-msg {
color: var(--red);
font-size: 12px;
margin-top: 4px;
display: none;
}
.shof-error-msg.visible { display: block; }
.shof-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.shof-row.three-col {
grid-template-columns: 2fr 1fr 1fr;
}
/* Radio button group for property condition */
.shof-radio-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.shof-radio-option {
position: relative;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
transition: all 0.15s;
}
.shof-radio-option:hover { border-color: var(--gray-400); }
.shof-radio-option input[type="radio"] {
position: absolute;
opacity: 0;
}
.shof-radio-option .radio-label {
font-size: 13px;
font-weight: 500;
color: var(--gray-900);
display: block;
}
.shof-radio-option .radio-sub {
font-size: 11px;
color: var(--gray-400);
display: block;
margin-top: 2px;
}
.shof-radio-option input[type="radio"]:checked + .radio-content {
color: var(--blue);
}
.shof-radio-option:has(input:checked) {
border-color: var(--blue);
background: var(--blue-soft);
}
/* Checkbox for SMS consent */
.shof-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
color: var(--gray-600);
line-height: 1.5;
}
.shof-checkbox input[type="checkbox"] {
margin-top: 2px;
width: 16px;
height: 16px;
flex-shrink: 0;
accent-color: var(--blue);
cursor: pointer;
}
.shof-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.shof-back {
padding: 14px 20px;
background: white;
color: var(--gray-600);
border: 1px solid var(--gray-200);
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
}
.shof-back:hover { border-color: var(--gray-900); color: var(--gray-900); }
.shof-next,
.shof-submit {
flex: 1;
padding: 14px 20px;
background: var(--gray-900);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.shof-next:hover,
.shof-submit:hover { background: var(--black); }
.shof-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.shof-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: shof-spin 0.6s linear infinite;
display: none;
}
.shof-submit.loading .shof-spinner { display: inline-block; }
.shof-submit.loading .shof-text { opacity: 0.7; }
@keyframes shof-spin {
to { transform: rotate(360deg); }
}
/* Success state */
.shof-success {
display: none;
text-align: center;
padding: 32px 16px;
}
.shof-success.active { display: block; }
.shof-success-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue) 0%, #6366F1 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
margin: 0 auto 20px;
animation: shof-pop 0.4s ease;
}
@keyframes shof-pop {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.shof-success h3 {
font-size: 24px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.shof-success p {
color: var(--gray-600);
font-size: 15px;
line-height: 1.6;
max-width: 360px;
margin: 0 auto;
}
/* Honeypot - hidden field for bot detection */
.shof-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
/* ===== Custom Address Autocomplete Dropdown (Nominatim/OSM) ===== */
.shof-autocomplete-wrap {
position: relative;
width: 100%;
}
.shof-autocomplete-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
background: #fff;
border: 1px solid #E5DCC8;
border-radius: 12px;
box-shadow: 0 16px 40px rgba(15,15,15,0.14);
overflow: hidden;
padding: 6px 0;
font-family: 'Inter', sans-serif;
max-height: 320px;
overflow-y: auto;
}
.shof-autocomplete-item {
padding: 10px 16px;
cursor: pointer;
border: none;
background: transparent;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.35;
transition: background 0.12s ease;
}
.shof-autocomplete-item.active,
.shof-autocomplete-item:hover {
background: rgba(201,169,97,0.12);
}
.shof-autocomplete-main {
font-size: 14px;
font-weight: 600;
color: #0F0F0F;
}
.shof-autocomplete-sub {
font-size: 12px;
color: #6B6356;
}
/* ===== SAVINGS CALCULATOR (3D + INTERACTIVE) ===== */
.savings-section {
background:
radial-gradient(ellipse at 20% 0%, rgba(99,102,241,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(37,99,235,0.20) 0%, transparent 50%),
linear-gradient(135deg, #0A0F1F 0%, #111827 50%, #1E293B 100%);
color: white;
padding: 120px 0;
position: relative;
overflow: hidden;
perspective: 1500px;
}
/* Animated gradient orbs in background */
.savings-section::before,
.savings-section::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.savings-section::before {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(96,165,250,0.4) 0%, transparent 70%);
top: -100px;
right: -100px;
animation: savingsOrbA 20s ease-in-out infinite;
}
.savings-section::after {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(167,139,250,0.35) 0%, transparent 70%);
bottom: -50px;
left: -50px;
animation: savingsOrbB 25s ease-in-out infinite;
}
@keyframes savingsOrbA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-100px, 50px) scale(1.2); }
}
@keyframes savingsOrbB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(80px, -80px) scale(1.15); }
}
/* Subtle grid overlay */
.savings-section .grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}
.savings-section .container {
position: relative;
z-index: 1;
text-align: center;
}
.savings-section .section-tag {
background: rgba(96,165,250,0.15);
color: #60A5FA;
}
.savings-section .section-title {
color: white;
margin-bottom: 12px;
}
.savings-section .section-title em {
background: linear-gradient(120deg, #60A5FA 0%, #A78BFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-style: normal;
}
.savings-section .section-sub {
color: rgba(255,255,255,0.7);
margin-bottom: 32px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Slider control with 3D depth */
.savings-slider-wrapper {
max-width: 800px;
margin: 0 auto 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
padding: 32px 36px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 25px 50px -12px rgba(0,0,0,0.5),
inset 0 1px 0 0 rgba(255,255,255,0.1);
transform: translateZ(0);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.savings-slider-wrapper:hover {
transform: translateY(-4px) translateZ(0);
box-shadow:
0 35px 60px -12px rgba(0,0,0,0.6),
inset 0 1px 0 0 rgba(255,255,255,0.15);
}
.savings-slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.savings-slider-label {
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.7);
letter-spacing: 0.5px;
}
.savings-slider-value {
font-size: 28px;
font-weight: 800;
color: white;
letter-spacing: -1px;
}
.savings-slider {
width: 100%;
height: 8px;
border-radius: 4px;
appearance: none;
-webkit-appearance: none;
background: rgba(255,255,255,0.1);
outline: none;
cursor: pointer;
}
.savings-slider::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, #60A5FA var(--slider-pct, 0%), rgba(255,255,255,0.1) var(--slider-pct, 0%));
}
.savings-slider::-moz-range-track {
height: 8px;
border-radius: 4px;
background: rgba(255,255,255,0.1);
}
.savings-slider::-moz-range-progress {
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, #60A5FA, #A78BFA);
}
.savings-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e2e8f0 100%);
border: 4px solid #60A5FA;
cursor: grab;
margin-top: -12px;
box-shadow:
0 6px 16px rgba(0,0,0,0.4),
0 0 0 4px rgba(96,165,250,0.2),
0 0 20px rgba(96,165,250,0.4),
inset 0 1px 0 rgba(255,255,255,0.8);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.savings-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow:
0 8px 20px rgba(0,0,0,0.5),
0 0 0 6px rgba(96,165,250,0.25),
0 0 30px rgba(96,165,250,0.6),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.savings-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.2);
}
.savings-slider::-moz-range-thumb {
width: 32px;
height: 32px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e2e8f0 100%);
border: 4px solid #60A5FA;
cursor: grab;
box-shadow:
0 6px 16px rgba(0,0,0,0.4),
0 0 20px rgba(96,165,250,0.4);
}
.savings-slider-range {
display: flex;
justify-content: space-between;
margin-top: 12px;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* Comparison cards with 3D tilt and floating animations */
.savings-cards {
display: grid;
grid-template-columns: 1fr 60px 1fr 1fr;
gap: 16px;
align-items: center;
max-width: 1000px;
margin: 0 auto;
perspective: 1500px;
transform-style: preserve-3d;
}
.savings-card {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
color: var(--gray-900);
border-radius: 20px;
padding: 32px 22px;
text-align: center;
position: relative;
transform-style: preserve-3d;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
box-shadow:
0 20px 40px -10px rgba(0,0,0,0.4),
0 8px 16px -4px rgba(0,0,0,0.2),
inset 0 1px 0 0 rgba(255,255,255,0.8);
animation: savingsCardFloat 6s ease-in-out infinite;
will-change: transform;
}
.savings-card:nth-child(1) { animation-delay: 0s; }
.savings-card:nth-child(3) { animation-delay: -2s; }
.savings-card:nth-child(4) { animation-delay: -4s; }
.savings-card:hover {
transform: perspective(1000px) translateY(-8px) translateZ(20px);
animation-play-state: paused;
box-shadow:
0 30px 60px -10px rgba(0,0,0,0.5),
0 16px 32px -8px rgba(0,0,0,0.3),
inset 0 1px 0 0 rgba(255,255,255,0.9);
}
@keyframes savingsCardFloat {
0%, 100% { transform: perspective(1000px) translateY(0px); }
50% { transform: perspective(1000px) translateY(-8px); }
}
/* Winner card — glowing pulse */
.savings-card.winner {
background: linear-gradient(135deg, #4F8AF7 0%, #6366F1 50%, #8B5CF6 100%);
color: white;
box-shadow:
0 25px 50px -10px rgba(99,102,241,0.5),
0 0 0 1px rgba(255,255,255,0.1) inset,
0 1px 0 0 rgba(255,255,255,0.2) inset;
position: relative;
overflow: hidden;
animation: savingsCardFloat 6s ease-in-out infinite, savingsWinnerGlow 3s ease-in-out infinite;
}
.savings-card.winner::before {
content: '';
position: absolute;
inset: -2px;
background: conic-gradient(
from 0deg,
transparent,
rgba(255,255,255,0.3),
transparent,
rgba(255,255,255,0.2),
transparent
);
border-radius: 20px;
animation: savingsWinnerRotate 4s linear infinite;
z-index: -1;
}
.savings-card.winner::after {
content: '';
position: absolute;
inset: 1px;
background: linear-gradient(135deg, #4F8AF7 0%, #6366F1 50%, #8B5CF6 100%);
border-radius: 19px;
z-index: -1;
}
@keyframes savingsWinnerGlow {
0%, 100% {
box-shadow:
0 25px 50px -10px rgba(99,102,241,0.5),
0 0 40px rgba(99,102,241,0.4),
0 0 0 1px rgba(255,255,255,0.1) inset,
0 1px 0 0 rgba(255,255,255,0.2) inset;
}
50% {
box-shadow:
0 25px 60px -10px rgba(99,102,241,0.7),
0 0 80px rgba(99,102,241,0.6),
0 0 0 1px rgba(255,255,255,0.15) inset,
0 1px 0 0 rgba(255,255,255,0.25) inset;
}
}
@keyframes savingsWinnerRotate {
to { transform: rotate(360deg); }
}
.savings-card.winner:hover {
transform: perspective(1000px) translateY(-12px) translateZ(30px) scale(1.02);
}
/* Number animation — pulse when value changes */
.savings-card-amount {
display: inline-block;
transform-origin: center;
transition: transform 0.2s ease;
}
.savings-card-amount.pulse {
animation: savingsNumberPulse 0.4s ease;
}
@keyframes savingsNumberPulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* Scroll-reveal entrance animation — only active if JS enables it */
body.js-reveal-enabled .savings-section:not(.savings-revealed) .savings-slider-wrapper,
body.js-reveal-enabled .savings-section:not(.savings-revealed) .savings-cards,
body.js-reveal-enabled .savings-section:not(.savings-revealed) .savings-cta-row {
opacity: 0;
transform: translateY(40px);
}
body.js-reveal-enabled .savings-section .savings-slider-wrapper,
body.js-reveal-enabled .savings-section .savings-cards,
body.js-reveal-enabled .savings-section .savings-cta-row {
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.js-reveal-enabled .savings-section.savings-revealed .savings-slider-wrapper { transition-delay: 0.1s; }
body.js-reveal-enabled .savings-section.savings-revealed .savings-cards { transition-delay: 0.3s; }
body.js-reveal-enabled .savings-section.savings-revealed .savings-cta-row { transition-delay: 0.5s; }
/* Stagger card reveal */
body.js-reveal-enabled .savings-section:not(.savings-revealed) .savings-card {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
body.js-reveal-enabled .savings-section .savings-card {
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.js-reveal-enabled .savings-section.savings-revealed .savings-card:nth-child(1) { transition-delay: 0.4s; }
body.js-reveal-enabled .savings-section.savings-revealed .savings-card:nth-child(3) { transition-delay: 0.5s; }
body.js-reveal-enabled .savings-section.savings-revealed .savings-card:nth-child(4) { transition-delay: 0.6s; }
body.js-reveal-enabled .savings-section.savings-revealed .savings-vs { transition-delay: 0.55s; }
.savings-card-label {
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.3;
}
.savings-card-sub {
font-size: 12px;
color: var(--gray-600);
margin-bottom: 16px;
}
.savings-card.winner .savings-card-sub { color: rgba(255,255,255,0.8); }
.savings-card-amount {
font-size: 36px;
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1;
}
.savings-card.winner .savings-card-amount { color: white; }
.savings-vs {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
color: var(--gray-900);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
margin: 0 auto;
box-shadow:
0 10px 30px rgba(0,0,0,0.3),
0 4px 10px rgba(0,0,0,0.2),
inset 0 1px 0 0 rgba(255,255,255,0.9),
inset 0 -2px 4px rgba(0,0,0,0.05);
animation: savingsVsPulse 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes savingsVsPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.savings-disclaimer {
font-size: 12px;
color: rgba(255,255,255,0.5);
margin-top: 32px;
}
.savings-cta-row {
margin-top: 40px;
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.savings-cta-row .btn-primary {
background: white;
color: var(--gray-900);
}
.savings-cta-row .btn-primary:hover { background: var(--gray-100); }
.savings-cta-row .btn-outline {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.2);
}
.savings-cta-row .btn-outline:hover { border-color: white; }
@media (max-width: 768px) {
.savings-cards {
grid-template-columns: 1fr;
}
.savings-card { animation: none; transform: none !important; }
.savings-card:hover { transform: translateY(-4px) !important; }
.savings-vs { animation: none; transform: rotate(90deg); }
.savings-slider-value { font-size: 22px; }
.savings-section { padding: 80px 0; perspective: none; }
.savings-section::before, .savings-section::after { animation: none; }
}
/* ===== SIMPLE FORM DISCLAIMER ===== */
.shof-disclaimer {
font-size: 11px;
color: var(--gray-400);
margin-top: 14px;
line-height: 1.5;
text-align: center;
}
.shof-disclaimer a {
color: var(--gray-600);
text-decoration: underline;
}
/* ===== PROPERTIES GRID ===== */
.properties-section { background: var(--gray-50); }
/* Featured problem icons — gold-outlined badges above the checkmark grid */
.problem-icons {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
max-width: 920px;
margin: 40px auto 48px;
}
.problem-icon-card { text-align: center; }
.problem-icon-badge {
width: 72px;
height: 72px;
margin: 0 auto 12px;
background: linear-gradient(135deg, rgba(201,169,97,0.18), rgba(201,169,97,0.04));
border: 1px solid rgba(201,169,97,0.35);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #C9A961;
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.problem-icon-badge svg { width: 32px; height: 32px; display: block; }
.problem-icon-card:hover .problem-icon-badge {
transform: translateY(-3px);
border-color: #C9A961;
background: linear-gradient(135deg, rgba(201,169,97,0.28), rgba(201,169,97,0.08));
}
.problem-icon-label {
font-size: 13px;
font-weight: 600;
color: rgba(15, 15, 15, 0.85);
letter-spacing: 0.2px;
}
[data-theme="dark"] .problem-icon-label,
.properties-section .problem-icon-label { color: rgba(248, 244, 237, 0.85) !important; }
@media (max-width: 900px) {
.problem-icons { grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 32px auto 36px; }
.problem-icon-badge { width: 64px; height: 64px; border-radius: 14px; }
.problem-icon-badge svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
.problem-icons { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.problem-icon-badge { width: 56px; height: 56px; }
.problem-icon-badge svg { width: 24px; height: 24px; }
.problem-icon-label { font-size: 11.5px; }
}
.properties-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.properties-col {
background: var(--white);
border-radius: 12px;
padding: 24px;
border: 1px solid var(--gray-100);
}
.properties-col li {
list-style: none;
padding: 9px 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--gray-900);
font-weight: 500;
}
.properties-col .check {
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--blue-soft);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
/* ===== COMPARISON ===== */
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 40px;
}
.comparison-card {
background: var(--white);
border-radius: 16px;
padding: 36px;
border: 1px solid var(--gray-200);
}
.comparison-card.winner {
border: 2px solid var(--blue);
background: linear-gradient(180deg, var(--blue-soft) 0%, var(--white) 80%);
}
.comparison-card h3 {
font-size: 22px;
margin-bottom: 24px;
font-weight: 700;
letter-spacing: -0.5px;
}
.comparison-card.winner h3 { color: var(--blue); }
.comparison-card ul { list-style: none; }
.comparison-card li {
padding: 14px 0;
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-600);
}
.comparison-card li:last-child { border-bottom: none; }
.comparison-card .icon-x { color: var(--red); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.comparison-card .icon-check { color: var(--green); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.comparison-card strong { color: var(--gray-900); }
/* ===== TRUSTED ===== */
.trusted-section { background: var(--white); }
.trusted-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.trusted-image {
border-radius: 16px;
overflow: hidden;
}
.trusted-image img { width: 100%; height: auto; }
.trusted-content h2 {
font-size: 42px;
line-height: 1.15;
margin-bottom: 20px;
font-weight: 800;
letter-spacing: -1.5px;
}
.trusted-content p {
font-size: 17px;
color: var(--gray-600);
margin-bottom: 18px;
line-height: 1.6;
}
/* ===== ACCORDION ===== */
.accordion-section { background: var(--gray-50); }
.accordion {
max-width: 800px;
margin: 40px auto 0;
}
.accordion-item {
background: var(--white);
border-radius: 12px;
margin-bottom: 8px;
overflow: hidden;
border: 1px solid var(--gray-100);
}
.accordion-header {
padding: 22px 24px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
font-size: 16px;
background: none;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
color: inherit;
}
.accordion-toggle {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--gray-100);
color: var(--gray-900);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
transition: transform 0.2s;
}
.accordion-body {
padding: 0 24px 22px;
color: var(--gray-600);
font-size: 15px;
display: none;
line-height: 1.6;
}
.accordion-item.open .accordion-body { display: block; }
.accordion-item.open .accordion-toggle {
transform: rotate(45deg);
background: var(--blue);
color: white;
}
/* ===== STEPS ===== */
.steps-section { background: var(--white); }
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.step-card {
background: var(--gray-50);
border-radius: 16px;
padding: 32px 28px;
}
.step-number {
font-size: 13px;
font-weight: 600;
color: var(--blue);
margin-bottom: 16px;
letter-spacing: 1px;
}
.step-icon {
width: 56px;
height: 56px;
background: var(--white);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.step-card h3 {
font-size: 20px;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: -0.3px;
}
.step-card p {
font-size: 14px;
color: var(--gray-600);
line-height: 1.55;
}
/* ===== TESTIMONIALS ===== */
.testimonials-section { background: var(--gray-50); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.testimonial {
background: var(--white);
border-radius: 16px;
padding: 28px;
border: 1px solid var(--gray-100);
}
/* Review platform badges */
.review-platform-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.review-platform {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
}
.review-platform svg {
display: block;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.reviews-trust-line {
margin-top: 30px;
font-size: 13px;
color: var(--gray-600);
text-align: center;
font-style: italic;
}
.reviews-trust-line a {
color: #A88A26;
text-decoration: none;
font-weight: 600;
font-style: normal;
}
.reviews-trust-line a:hover { text-decoration: underline; }
[data-theme="dark"] .reviews-trust-line { color: rgba(248,244,237,0.65) !important; }
[data-theme="dark"] .reviews-trust-line a { color: #C9A961 !important; }
[data-theme="dark"] .review-platform svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.stars {
color: var(--amber);
font-size: 16px;
letter-spacing: 1px;
line-height: 1;
}
.review-platform-row .stars { margin-bottom: 0; }
/* Legacy: when stars are NOT inside review-platform-row, keep margin */
.testimonial > .stars { margin-bottom: 16px; }
.testimonial-quote {
font-size: 14px;
color: var(--gray-900);
line-height: 1.6;
margin-bottom: 20px;
}
.testimonial-attribution {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blue-soft);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.testimonial-name {
font-weight: 600;
font-size: 14px;
}
.testimonial-loc {
font-size: 12px;
color: var(--gray-400);
}
/* ===== TEAM CARDS ===== */
.team-section { background: var(--white); }
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.team-card {
background: var(--gray-50);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
}
.team-photo {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 32px;
margin: 0 auto 16px;
}
.team-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 4px;
}
.team-title {
font-size: 13px;
color: var(--blue);
font-weight: 600;
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.team-bio {
font-size: 13px;
color: var(--gray-600);
line-height: 1.5;
}
/* ===== CONTACT CARDS ===== */
.contact-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.contact-card {
background: var(--white);
border-radius: 16px;
padding: 36px;
border: 1px solid var(--gray-100);
text-align: center;
display: flex;
flex-direction: column;
align-items: stretch;
}
.contact-card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--blue-soft);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 20px;
}
.contact-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.contact-card p {
font-size: 14px;
color: var(--gray-600);
margin-bottom: 16px;
}
.contact-card-info {
font-size: 18px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 20px;
word-break: break-word;
}
.contact-card .btn {
width: 100%;
justify-content: center;
margin-top: auto;
}
/* ===== AREAS GRID ===== */
.areas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 40px;
}
.area-tile {
background: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: 12px;
padding: 24px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
color: var(--gray-900);
transition: all 0.15s;
}
.area-tile:hover {
border-color: var(--blue);
background: var(--blue-soft);
}
.area-tile-icon {
width: 36px;
height: 36px;
background: var(--white);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--blue);
flex-shrink: 0;
}
.states-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.state-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 32px;
text-align: center;
}
.state-emoji {
font-size: 48px;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--blue-soft);
border-radius: 16px;
color: var(--blue);
margin-left: auto;
margin-right: auto;
}
.state-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.state-card p { font-size: 14px; color: var(--gray-600); }
/* ===== CTA ===== */
.cta-section {
background: var(--gray-900);
color: white;
padding: 100px 0;
}
.cta-section .container { text-align: center; }
.cta-section h2 {
font-size: 56px;
line-height: 1.05;
margin-bottom: 16px;
font-weight: 800;
letter-spacing: -2px;
color: white;
}
.cta-section h2 em {
font-style: normal;
background: linear-gradient(120deg, #60A5FA 0%, #A78BFA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cta-section p {
font-size: 19px;
color: rgba(255,255,255,0.7);
margin: 0 auto 36px;
max-width: 600px;
}
.cta-section .btn-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .btn-primary {
background: white;
color: var(--gray-900);
}
.cta-section .btn-primary:hover { background: var(--gray-100); }
.cta-section .btn-outline {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.2);
}
.cta-section .btn-outline:hover { border-color: white; }
/* ===== FOOTER ===== */
.footer {
background: var(--white);
color: var(--gray-600);
padding: 60px 0 24px;
border-top: 1px solid var(--gray-100);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 40px;
}
.footer h4 {
color: var(--gray-900);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 18px;
}
.footer-brand p {
font-size: 14px;
line-height: 1.6;
max-width: 320px;
}
.footer-tagline {
color: var(--blue);
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
margin-top: 12px;
}
.footer ul { list-style: none; }
.footer li { padding: 5px 0; font-size: 14px; }
.footer a {
color: var(--gray-600);
text-decoration: none;
}
.footer a:hover { color: var(--gray-900); }
.footer-contact div { padding: 4px 0; font-size: 14px; }
.footer-bottom {
border-top: 1px solid var(--gray-100);
padding-top: 24px;
display: flex;
justify-content: space-between;
font-size: 12px;
flex-wrap: wrap;
gap: 12px;
color: var(--gray-400);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero-grid,
.trusted-grid,
.comparison-grid {
grid-template-columns: 1fr;
}
.properties-grid,
.steps-grid,
.testimonials-grid,
.team-grid,
.areas-grid,
.states-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-cards {
grid-template-columns: 1fr;
}
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero h1 { font-size: 42px; }
.section-title,
.cta-section h2,
.page-hero h1 {
font-size: 34px;
}
.nav { display: none; }
.mobile-menu-btn { display: block; }
.nav.open {
display: flex;
position: fixed;
top: 65px;
left: 0;
right: 0;
background: white;
flex-direction: column;
align-items: flex-end;
text-align: right;
padding: 24px 28px;
gap: 16px;
border-bottom: 1px solid var(--gray-100);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
z-index: 99;
}
.nav.open a { width: auto; }
.header-phone { display: none; }
}
@media (max-width: 600px) {
.properties-grid,
.steps-grid,
.testimonials-grid,
.team-grid,
.areas-grid,
.states-grid {
grid-template-columns: 1fr;
}
.footer-grid { grid-template-columns: 1fr; }
section { padding: 60px 0; }
.hero { padding: 40px 0 60px; }
.hero h1 { font-size: 36px; }
.container { padding: 0 16px; }
}
/* ===================================================================
PREMIUM EDITORIAL THEME — Approved final design (Variant B)
Cream #F8F4ED · Deep black #0F0F0F · Metallic gold #C9A961
Playfair Display serif headlines + Inter body
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&display=swap');
body { background: #F8F4ED; color: #0F0F0F; }
h1, h2, h3, .hero h1, .section-title, .form-title, .cta-section h2,
.team-name, .savings-slider-value, .savings-card-amount, .testimonial h3 {
font-family: 'Playfair Display', Georgia, serif !important;
}
.hero { background: linear-gradient(180deg, #F8F4ED 0%, #FFFFFF 100%); }
.page-hero { background: linear-gradient(180deg, #F8F4ED 0%, #FFFFFF 100%); }
.hero h1 em, .section-title em, .cta-section h2 em, .page-hero em, .hero-form h3 em {
background: none !important;
-webkit-text-fill-color: #C9A961 !important;
color: #C9A961 !important;
font-style: italic !important;
}
/* Buttons */
.btn-primary { background: #0F0F0F !important; color: #fff !important; }
.btn-primary:hover { background: #2A2620 !important; }
.btn-outline { border-color: #0F0F0F !important; color: #0F0F0F !important; }
.btn-outline:hover { background: #0F0F0F !important; color: #fff !important; }
.shof-submit { background: #0F0F0F !important; color: #fff !important; }
/* Tags */
.hero-tag, .section-tag { background: rgba(201,169,97,0.15) !important; color: #A88A26 !important; }
/* Hero form & inputs */
.hero-form, .form-wrapper { background: #fff; border: 1px solid #E5DCC8; }
.shof-field input:focus, .shof-field textarea:focus, .shof-field select:focus {
border-color: #C9A961 !important;
box-shadow: 0 0 0 3px rgba(201,169,97,0.15) !important;
}
/* Properties grid (dark theme) */
.properties-section { background: #0F0F0F !important; color: #fff; }
.properties-section .section-title { color: #fff !important; }
.properties-section .section-sub { color: rgba(255,255,255,0.7) !important; }
.properties-col { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.properties-col li { color: rgba(255,255,255,0.95) !important; border-bottom-color: rgba(255,255,255,0.08); }
.properties-col .check { background: #C9A961; color: #0F0F0F; }
/* Comparison cards */
.comparison-card.winner { border: 2px solid #C9A961 !important; background: linear-gradient(180deg, rgba(201,169,97,0.05) 0%, #fff 80%) !important; }
.comparison-card.winner h3 { color: #A88A26 !important; }
.icon-check { color: #4A8B5C !important; }
/* Savings section */
.savings-section { background: linear-gradient(135deg, #1A1612 0%, #2A241F 50%, #0F0F0F 100%) !important; }
.savings-section::before { background: radial-gradient(circle, rgba(201,169,97,0.4) 0%, transparent 70%) !important; }
.savings-section::after { background: radial-gradient(circle, rgba(201,169,97,0.3) 0%, transparent 70%) !important; }
.savings-section .section-tag { background: rgba(201,169,97,0.2) !important; color: #C9A961 !important; }
.savings-section .section-title em { color: #C9A961 !important; -webkit-text-fill-color: #C9A961 !important; }
.savings-card.winner { background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%) !important; box-shadow: 0 25px 50px -10px rgba(201,169,97,0.5) !important; }
.savings-card.winner::before { background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.4), transparent) !important; }
.savings-card.winner::after { background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%) !important; }
.savings-slider::-webkit-slider-thumb { border-color: #C9A961 !important; box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 20px rgba(201,169,97,0.5) !important; }
/* Trusted section */
.trusted-section { background: #F8F4ED !important; }
/* Accordion */
.accordion-section { background: #FFFFFF !important; }
.accordion-item { background: #F8F4ED; }
.accordion-item.open { border-color: #C9A961; }
.accordion-item.open .accordion-header { color: #A88A26; }
.accordion-item.open .accordion-toggle { background: #C9A961; }
/* Steps */
.steps-section { background: #F8F4ED !important; }
.step-card { background: #fff; }
.step-icon { background: rgba(201,169,97,0.1); color: #C9A961; }
.step-icon .icon { color: #C9A961; }
.step-number { color: #C9A961; }
/* Testimonials */
.testimonials-section { background: #FFFFFF !important; }
.testimonial { border: 1px solid #E5DCC8; }
.avatar { background: #C9A961; color: #0F0F0F; }
.stars { color: #C9A961; }
/* CTA */
.cta-section { background: linear-gradient(135deg, #0F0F0F 0%, #2A2620 100%) !important; }
.cta-section h2 em { -webkit-text-fill-color: #C9A961 !important; color: #C9A961 !important; background: none !important; }
.cta-section .btn-primary { background: #fff !important; color: #0F0F0F !important; }
.cta-section .btn-primary:hover { background: #C9A961 !important; color: #0F0F0F !important; }
/* Footer */
.footer { background: #0F0F0F !important; color: rgba(255,255,255,0.7); border-top-color: #2A2620 !important; }
.footer h4 { color: #C9A961 !important; }
.footer-tagline { color: #C9A961 !important; }
.footer a { color: rgba(255,255,255,0.7); }
.footer a:hover { color: #C9A961 !important; }
.footer-line .icon { color: #C9A961 !important; }
.footer-line span { color: rgba(255,255,255,0.7); }
/* Header */
.header { background: rgba(248,244,237,0.85); border-bottom-color: #E5DCC8; }
/* Premium Editorial: logo-icon is now a real image, no background/color overrides needed */
.nav a:hover, .nav a.active { color: #A88A26 !important; }
.header-phone:hover { color: #A88A26 !important; }
/* ===================================================================
THEME TOGGLE BUTTON
=================================================================== */
.theme-toggle {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid #E5DCC8;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #0F0F0F;
margin-right: 8px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(201,169,97,0.12); border-color: #C9A961; color: #A88A26; }
.theme-toggle .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: inline-block; fill: currentColor; stroke: none; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
/* ===================================================================
DARK MODE — Premium Editorial (cream/black/gold flipped)
Activated by [data-theme="dark"] on
=================================================================== */
[data-theme="dark"] body {
background: #0F0F0F !important;
color: #F8F4ED !important;
}
/* Headings stay cream/gold */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
color: #F8F4ED !important;
}
[data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span,
[data-theme="dark"] label, [data-theme="dark"] div { color: inherit; }
/* Header — translucent dark */
[data-theme="dark"] .header {
background: rgba(15,15,15,0.85) !important;
border-bottom-color: #2A2620 !important;
backdrop-filter: blur(10px);
}
[data-theme="dark"] .nav a { color: rgba(248,244,237,0.85) !important; }
[data-theme="dark"] .nav a:hover, [data-theme="dark"] .nav a.active { color: #C9A961 !important; }
[data-theme="dark"] .header-phone { color: #F8F4ED !important; }
[data-theme="dark"] .header-phone:hover { color: #C9A961 !important; }
[data-theme="dark"] .logo { color: #F8F4ED !important; }
[data-theme="dark"] .mobile-menu-btn { color: #F8F4ED !important; }
[data-theme="dark"] .theme-toggle { border-color: #2A2620; color: #F8F4ED; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(201,169,97,0.18); border-color: #C9A961; color: #C9A961; }
/* Hero & page hero */
[data-theme="dark"] .hero { background: linear-gradient(180deg, #0F0F0F 0%, #1A1612 100%) !important; }
[data-theme="dark"] .page-hero { background: linear-gradient(180deg, #0F0F0F 0%, #1A1612 100%) !important; }
[data-theme="dark"] .hero-sub, [data-theme="dark"] .page-hero p { color: rgba(248,244,237,0.8) !important; }
[data-theme="dark"] .hero-bullets { color: rgba(248,244,237,0.85) !important; }
[data-theme="dark"] .hero-bullets .check { background: #C9A961 !important; color: #0F0F0F !important; }
[data-theme="dark"] .hero-bullets .star { color: #C9A961 !important; text-shadow: 0 1px 4px rgba(201,169,97,0.4); }
[data-theme="dark"] .hero-tag { background: rgba(201,169,97,0.18) !important; color: #C9A961 !important; }
/* Section tags & section sub */
[data-theme="dark"] .section-tag { background: rgba(201,169,97,0.18) !important; color: #C9A961 !important; }
[data-theme="dark"] .section-sub { color: rgba(248,244,237,0.7) !important; }
/* Buttons */
[data-theme="dark"] .btn-primary { background: #C9A961 !important; color: #0F0F0F !important; }
[data-theme="dark"] .btn-primary:hover { background: #A88A26 !important; color: #0F0F0F !important; }
[data-theme="dark"] .btn-outline { border-color: #C9A961 !important; color: #C9A961 !important; }
[data-theme="dark"] .btn-outline:hover { background: #C9A961 !important; color: #0F0F0F !important; }
[data-theme="dark"] .shof-submit { background: #C9A961 !important; color: #0F0F0F !important; }
[data-theme="dark"] .shof-submit:hover { background: #A88A26 !important; }
/* Forms */
[data-theme="dark"] .hero-form, [data-theme="dark"] .form-wrapper {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .form-title, [data-theme="dark"] .hero-form h3 { color: #F8F4ED !important; }
[data-theme="dark"] .shof-field label { color: rgba(248,244,237,0.85) !important; }
[data-theme="dark"] .shof-field input,
[data-theme="dark"] .shof-field textarea,
[data-theme="dark"] .shof-field select {
background: #0F0F0F !important;
border-color: #2A2620 !important;
color: #F8F4ED !important;
}
[data-theme="dark"] .shof-field input::placeholder,
[data-theme="dark"] .shof-field textarea::placeholder { color: rgba(248,244,237,0.4) !important; }
[data-theme="dark"] .shof-field input:focus,
[data-theme="dark"] .shof-field textarea:focus,
[data-theme="dark"] .shof-field select:focus {
border-color: #C9A961 !important;
box-shadow: 0 0 0 3px rgba(201,169,97,0.2) !important;
}
[data-theme="dark"] .shof-disclaimer { color: rgba(248,244,237,0.6) !important; }
[data-theme="dark"] .shof-disclaimer a { color: #C9A961 !important; }
/* Autocomplete dropdown */
[data-theme="dark"] .shof-autocomplete-dropdown {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .shof-autocomplete-main { color: #F8F4ED !important; }
[data-theme="dark"] .shof-autocomplete-sub { color: rgba(248,244,237,0.55) !important; }
[data-theme="dark"] .shof-autocomplete-item.active,
[data-theme="dark"] .shof-autocomplete-item:hover { background: rgba(201,169,97,0.18) !important; }
/* Comparison cards */
[data-theme="dark"] .comparison-card {
background: #1A1612 !important;
border-color: #2A2620 !important;
color: #F8F4ED !important;
}
[data-theme="dark"] .comparison-card h3 { color: #F8F4ED !important; }
[data-theme="dark"] .comparison-card.winner {
background: linear-gradient(180deg, rgba(201,169,97,0.12) 0%, #1A1612 80%) !important;
border-color: #C9A961 !important;
}
[data-theme="dark"] .comparison-card.winner h3 { color: #C9A961 !important; }
[data-theme="dark"] .comparison-card li { color: rgba(248,244,237,0.85) !important; border-bottom-color: rgba(248,244,237,0.08) !important; }
[data-theme="dark"] .icon-check { color: #C9A961 !important; }
[data-theme="dark"] .icon-x { color: rgba(248,244,237,0.4) !important; }
/* Trusted section */
[data-theme="dark"] .trusted-section { background: #0F0F0F !important; }
[data-theme="dark"] .trusted-section .section-title { color: #F8F4ED !important; }
/* Accordion */
[data-theme="dark"] .accordion-section { background: #0F0F0F !important; }
[data-theme="dark"] .accordion-item {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .accordion-header { color: #F8F4ED !important; }
[data-theme="dark"] .accordion-item.open { border-color: #C9A961 !important; }
[data-theme="dark"] .accordion-item.open .accordion-header { color: #C9A961 !important; }
[data-theme="dark"] .accordion-body { color: rgba(248,244,237,0.8) !important; }
[data-theme="dark"] .accordion-toggle { background: #2A2620 !important; color: #F8F4ED !important; }
[data-theme="dark"] .accordion-item.open .accordion-toggle { background: #C9A961 !important; color: #0F0F0F !important; }
/* Steps */
[data-theme="dark"] .steps-section { background: #0F0F0F !important; }
[data-theme="dark"] .step-card {
background: #1A1612 !important;
border-color: #2A2620 !important;
color: #F8F4ED !important;
}
[data-theme="dark"] .step-card h3 { color: #F8F4ED !important; }
[data-theme="dark"] .step-card p { color: rgba(248,244,237,0.8) !important; }
/* Testimonials */
[data-theme="dark"] .testimonials-section { background: #0F0F0F !important; }
[data-theme="dark"] .testimonial {
background: #1A1612 !important;
border-color: #2A2620 !important;
color: #F8F4ED !important;
}
[data-theme="dark"] .testimonial p { color: rgba(248,244,237,0.85) !important; }
[data-theme="dark"] .testimonial-name { color: #F8F4ED !important; }
[data-theme="dark"] .testimonial-loc { color: rgba(248,244,237,0.6) !important; }
/* Areas */
[data-theme="dark"] .area-tile {
background: #1A1612 !important;
border-color: #2A2620 !important;
color: #F8F4ED !important;
}
[data-theme="dark"] .area-tile:hover { border-color: #C9A961 !important; }
[data-theme="dark"] .area-tile h4 { color: #F8F4ED !important; }
[data-theme="dark"] .area-tile p { color: rgba(248,244,237,0.65) !important; }
[data-theme="dark"] .state-card {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .state-card h3 { color: #F8F4ED !important; }
[data-theme="dark"] .state-card p { color: rgba(248,244,237,0.65) !important; }
/* Team & values cards */
[data-theme="dark"] .team-card,
[data-theme="dark"] .value-card {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .team-card h3, [data-theme="dark"] .team-name { color: #F8F4ED !important; }
[data-theme="dark"] .team-role { color: #C9A961 !important; }
[data-theme="dark"] .team-card p, [data-theme="dark"] .value-card p { color: rgba(248,244,237,0.75) !important; }
[data-theme="dark"] .value-card h3 { color: #F8F4ED !important; }
[data-theme="dark"] .value-icon { background: rgba(201,169,97,0.15) !important; color: #C9A961 !important; }
/* Contact cards */
[data-theme="dark"] .contact-card {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .contact-card h3 { color: #F8F4ED !important; }
[data-theme="dark"] .contact-card p { color: rgba(248,244,237,0.7) !important; }
[data-theme="dark"] .contact-card-info { color: #F8F4ED !important; }
[data-theme="dark"] .contact-card-icon { background: rgba(201,169,97,0.15) !important; color: #C9A961 !important; }
[data-theme="dark"] .hours-row { border-bottom-color: rgba(248,244,237,0.08) !important; }
[data-theme="dark"] .hours-day { color: #F8F4ED !important; }
[data-theme="dark"] .hours-time { color: rgba(248,244,237,0.7) !important; }
/* Sections that use background utilities */
[data-theme="dark"] section[style*="background: var(--white)"],
[data-theme="dark"] section[style*="background: var(--gray-50)"] {
background: #0F0F0F !important;
}
[data-theme="dark"] .form-section { background: #0F0F0F !important; }
/* Generic text utilities */
[data-theme="dark"] .text-muted { color: rgba(248,244,237,0.6) !important; }
/* Mobile menu */
[data-theme="dark"] .nav.open { background: #1A1612 !important; border-color: #2A2620 !important; }
/* Smooth transition between themes */
html, body, .header, .hero, .page-hero, .accordion-section, .steps-section,
.testimonials-section, .trusted-section, .form-section, .contact-card,
.testimonial, .step-card, .accordion-item, .area-tile, .state-card,
.team-card, .value-card, .hero-form, .form-wrapper, .comparison-card {
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}
/* ===================================================================
STATES CAROUSEL — Areas We Buy
=================================================================== */
.states-carousel-section {
padding: 100px 0;
background: #FFFFFF;
}
.states-carousel {
position: relative;
margin-top: 50px;
outline: none;
}
.states-viewport {
overflow: hidden;
border-radius: 24px;
}
.states-track {
display: flex;
/* Ease-in-out-quint — slow start, accelerates through the middle, settles smoothly */
transition: transform 0.85s cubic-bezier(0.83, 0, 0.17, 1);
will-change: transform;
}
.state-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 1fr 1fr;
background: #fff;
border: 1px solid #E5DCC8;
border-radius: 24px;
overflow: hidden;
min-height: 480px;
}
.state-slide-media {
position: relative;
overflow: hidden;
background: #1A1612;
}
.state-slide-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 8s ease;
}
.state-slide-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.state-slide-state-label {
position: absolute;
bottom: 28px;
left: 28px;
background: rgba(15,15,15,0.85);
color: #C9A961;
padding: 10px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
backdrop-filter: blur(8px);
z-index: 2;
border: 1px solid rgba(201,169,97,0.35);
}
.state-slide-body {
padding: 56px 48px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.state-slide-eyebrow {
display: inline-block;
background: rgba(201,169,97,0.15);
color: #A88A26;
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 18px;
width: fit-content;
}
.state-slide-body h3 {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 48px;
font-weight: 800;
line-height: 1;
margin-bottom: 18px;
letter-spacing: -1.5px;
color: #0F0F0F;
}
.state-slide-body p {
font-size: 16px;
line-height: 1.65;
color: #4A4439;
margin-bottom: 28px;
}
.state-slide-cities {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.state-slide-cities span {
background: rgba(201,169,97,0.08);
color: #0F0F0F;
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
border: 1px solid rgba(201,169,97,0.25);
transition: all 0.2s ease;
}
.state-slide-cities span:hover {
background: rgba(201,169,97,0.18);
border-color: #C9A961;
}
/* Arrow buttons */
.states-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
border: 1px solid #E5DCC8;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
box-shadow: 0 10px 30px rgba(15,15,15,0.12);
transition: all 0.2s ease;
color: #0F0F0F;
}
.states-arrow:hover {
background: #C9A961;
color: #fff;
border-color: #C9A961;
transform: translateY(-50%) scale(1.06);
box-shadow: 0 14px 36px rgba(201,169,97,0.35);
}
.states-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.states-arrow:disabled:hover {
background: #fff;
color: #0F0F0F;
border-color: #E5DCC8;
transform: translateY(-50%) scale(1);
}
.states-arrow .icon {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.states-arrow-prev { left: -28px; }
.states-arrow-next { right: -28px; }
/* Pagination dots (state abbreviations) */
.states-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 32px;
flex-wrap: wrap;
}
.states-dot {
background: transparent;
border: 1px solid #E5DCC8;
color: #0F0F0F;
padding: 9px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
min-width: 60px;
}
.states-dot:hover {
border-color: #C9A961;
color: #C9A961;
}
.states-dot.active {
background: #0F0F0F;
border-color: #0F0F0F;
color: #C9A961;
}
/* Mobile responsive */
@media (max-width: 768px) {
.states-carousel-section { padding: 60px 0; }
.state-slide { grid-template-columns: 1fr; min-height: auto; }
.state-slide-media { aspect-ratio: 16/10; }
.state-slide-body { padding: 32px 24px; }
.state-slide-body h3 { font-size: 32px; letter-spacing: -1px; }
.state-slide-body p { font-size: 15px; }
.state-slide-state-label { bottom: 16px; left: 16px; padding: 8px 16px; font-size: 11px; }
.states-arrow-prev { left: 8px; }
.states-arrow-next { right: 8px; }
.states-arrow {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px);
}
.states-arrow .icon { width: 18px; height: 18px; }
.states-dot { padding: 8px 14px; font-size: 12px; min-width: 52px; }
}
/* DARK MODE — states carousel */
[data-theme="dark"] .states-carousel-section { background: #0F0F0F !important; }
[data-theme="dark"] .state-slide {
background: #1A1612 !important;
border-color: #2A2620 !important;
}
[data-theme="dark"] .state-slide-body h3 { color: #F8F4ED !important; }
[data-theme="dark"] .state-slide-body p { color: rgba(248,244,237,0.75) !important; }
[data-theme="dark"] .state-slide-cities span {
background: rgba(201,169,97,0.1);
color: #F8F4ED;
border-color: rgba(201,169,97,0.3);
}
[data-theme="dark"] .state-slide-cities span:hover {
background: rgba(201,169,97,0.22);
border-color: #C9A961;
}
[data-theme="dark"] .states-arrow {
background: #1A1612;
color: #F8F4ED;
border-color: #2A2620;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
[data-theme="dark"] .states-arrow:hover {
background: #C9A961;
color: #0F0F0F;
border-color: #C9A961;
}
[data-theme="dark"] .states-dot {
background: transparent;
border-color: #2A2620;
color: #F8F4ED;
}
[data-theme="dark"] .states-dot:hover { border-color: #C9A961; color: #C9A961; }
[data-theme="dark"] .states-dot.active {
background: #C9A961;
border-color: #C9A961;
color: #0F0F0F;
}
/* ===================================================================
DARK MODE — savings cards keep dark text on white background.
The savings section is dark in BOTH themes; non-winner cards stay
white-on-dark, winner stays gold-on-dark. Their inner text must
not be cream-flipped by the global dark-mode rules.
=================================================================== */
[data-theme="dark"] .savings-card { color: var(--gray-900) !important; }
[data-theme="dark"] .savings-card .savings-card-label,
[data-theme="dark"] .savings-card .savings-card-sub,
[data-theme="dark"] .savings-card .savings-card-amount,
[data-theme="dark"] .savings-card h3,
[data-theme="dark"] .savings-card p { color: var(--gray-900) !important; }
[data-theme="dark"] .savings-card .savings-card-sub { color: var(--gray-600) !important; }
/* Winner card — text stays white in both themes (gold-bg keeps white text legible) */
[data-theme="dark"] .savings-card.winner,
[data-theme="dark"] .savings-card.winner .savings-card-label,
[data-theme="dark"] .savings-card.winner .savings-card-amount { color: #FFFFFF !important; }
[data-theme="dark"] .savings-card.winner .savings-card-sub { color: rgba(255,255,255,0.85) !important; }
/* Slider track labels (Listing Price, $50K / $2M) — stay light on dark glass slider */
[data-theme="dark"] .savings-slider-label,
[data-theme="dark"] .savings-slider-value,
[data-theme="dark"] .savings-slider-min,
[data-theme="dark"] .savings-slider-max { color: #F8F4ED !important; }
/* ===================================================================
CTA SECTION — Phone button visibility fix (both themes)
.cta-section is always dark. Override Premium-Editorial's
.btn-outline (which forces dark text+border globally) so the
"(804) 799-0000" outline button stays cream/gold-readable.
=================================================================== */
.cta-section .btn-outline {
background: transparent !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,0.35) !important;
}
.cta-section .btn-outline:hover {
background: rgba(201,169,97,0.15) !important;
border-color: #C9A961 !important;
color: #C9A961 !important;
}
.cta-section .btn-outline .icon {
color: currentColor !important;
stroke: currentColor !important;
}
/* Same fix for the savings calculator's CTA row (also on dark gradient) */
.savings-cta-row .btn-outline {
background: transparent !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,0.35) !important;
}
.savings-cta-row .btn-outline:hover {
background: rgba(201,169,97,0.15) !important;
border-color: #C9A961 !important;
color: #C9A961 !important;
}
.savings-cta-row .btn-outline .icon {
color: currentColor !important;
stroke: currentColor !important;
}
/* CTA primary button — keep white-on-dark in both themes */
.cta-section .btn-primary {
background: #FFFFFF !important;
color: #0F0F0F !important;
}
.cta-section .btn-primary:hover {
background: #C9A961 !important;
color: #0F0F0F !important;
}
/* ===================================================================
AI CHAT WIDGET — Floating bottom-right with expandable panel
=================================================================== */
#shof-chat-root { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: 'Inter', system-ui, sans-serif; }
.shof-chat-fab {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%);
color: #0F0F0F;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px rgba(201,169,97,0.45), 0 4px 12px rgba(0,0,0,0.2);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
position: relative;
}
.shof-chat-fab:hover { transform: scale(1.06); box-shadow: 0 16px 36px rgba(201,169,97,0.55), 0 6px 14px rgba(0,0,0,0.25); }
.shof-chat-fab:active { transform: scale(0.96); }
.shof-chat-fab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shof-chat-fab svg.shof-chat-fab-icon-open { fill: currentColor; stroke: none; }
.shof-chat-fab .shof-chat-fab-icon-close { display: none; }
#shof-chat-root.shof-chat-open .shof-chat-fab .shof-chat-fab-icon-open { display: none; }
#shof-chat-root.shof-chat-open .shof-chat-fab .shof-chat-fab-icon-close { display: block; }
/* Pulse ring */
.shof-chat-fab::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid rgba(201,169,97,0.5);
opacity: 0;
animation: shofChatPulse 2.5s ease-out infinite;
}
@keyframes shofChatPulse {
0% { transform: scale(0.95); opacity: 0.7; }
70%, 100% { transform: scale(1.5); opacity: 0; }
}
#shof-chat-root.shof-chat-open .shof-chat-fab::before { animation: none; }
/* Panel */
.shof-chat-panel {
position: absolute;
bottom: 80px;
right: 0;
width: 380px;
height: 560px;
max-height: calc(100vh - 120px);
background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 24px 60px rgba(15,15,15,0.25), 0 8px 20px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.96);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid #E5DCC8;
}
#shof-chat-root.shof-chat-open .shof-chat-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Header */
.shof-chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: linear-gradient(135deg, #0F0F0F 0%, #2A2620 100%);
color: #F8F4ED;
border-bottom: 1px solid #2A2620;
}
.shof-chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 4px;
}
.shof-chat-avatar img { width: 28px; height: 28px; object-fit: contain; }
.shof-chat-header-text { flex: 1; min-width: 0; }
.shof-chat-title { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; color: #F8F4ED; }
.shof-chat-status { font-size: 12px; color: rgba(248,244,237,0.7); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.shof-chat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 2px rgba(74,222,128,0.25); }
.shof-chat-reset {
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(248,244,237,0.75);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.shof-chat-reset:hover { background: rgba(201,169,97,0.18); color: #C9A961; border-color: #C9A961; }
.shof-chat-reset svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Close (X) button — mirrors the reset button styling */
.shof-chat-close-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(248,244,237,0.75);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-left: 4px;
padding: 0;
}
.shof-chat-close-btn:hover { background: rgba(239,68,68,0.18); color: #FCA5A5; border-color: rgba(239,68,68,0.4); }
.shof-chat-close-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Body */
.shof-chat-body {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
background: #F8F4ED;
}
.shof-chat-body::-webkit-scrollbar { width: 6px; }
.shof-chat-body::-webkit-scrollbar-track { background: transparent; }
.shof-chat-body::-webkit-scrollbar-thumb { background: rgba(201,169,97,0.35); border-radius: 3px; }
.shof-chat-msg { display: flex; max-width: 88%; animation: shofChatMsgIn 0.3s ease-out; }
@keyframes shofChatMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.shof-chat-msg-user { align-self: flex-end; }
.shof-chat-msg-assistant { align-self: flex-start; }
.shof-chat-bubble {
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
}
.shof-chat-msg-user .shof-chat-bubble {
background: linear-gradient(135deg, #0F0F0F 0%, #2A2620 100%);
color: #F8F4ED;
border-bottom-right-radius: 4px;
}
.shof-chat-msg-assistant .shof-chat-bubble {
background: #FFFFFF;
color: #0F0F0F;
border: 1px solid #E5DCC8;
border-bottom-left-radius: 4px;
}
.shof-chat-bubble a { color: #C9A961; text-decoration: underline; }
.shof-chat-msg-user .shof-chat-bubble a { color: #C9A961; }
/* Typing indicator */
.shof-chat-typing { display: inline-flex; gap: 4px; padding: 2px 0; align-items: center; height: 14px; }
.shof-chat-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #C9A961;
animation: shofChatTypingBlink 1.4s infinite ease-in-out both;
}
.shof-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.shof-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes shofChatTypingBlink {
0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1.1); }
}
/* Suggested chips */
.shof-chat-suggested {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 14px 8px;
background: #F8F4ED;
}
.shof-chat-chip {
background: #FFFFFF;
border: 1px solid #E5DCC8;
color: #0F0F0F;
padding: 7px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.shof-chat-chip:hover { background: rgba(201,169,97,0.15); border-color: #C9A961; }
/* Guided conversation options (clickable buttons) */
.shof-chat-options {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 14px 12px 14px;
align-items: flex-start;
width: 100%;
animation: shofChatMsgIn 0.35s ease-out;
}
.shof-chat-option-btn {
background: #FFFFFF;
border: 1.5px solid #E5DCC8;
color: #0F0F0F;
padding: 10px 16px;
border-radius: 14px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
text-align: left;
max-width: 88%;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shof-chat-option-btn:hover:not(:disabled) {
background: rgba(201,169,97,0.10);
border-color: #C9A961;
transform: translateX(2px);
box-shadow: 0 2px 6px rgba(201,169,97,0.15);
}
.shof-chat-option-btn:active:not(:disabled) {
transform: translateX(0);
}
.shof-chat-option-btn:disabled {
opacity: 0.5;
cursor: default;
}
[data-theme="dark"] .shof-chat-option-btn {
background: #1A1A1A;
border-color: #2A2A2A;
color: #F5F5F5;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .shof-chat-option-btn:hover:not(:disabled) {
background: rgba(201,169,97,0.15);
border-color: #C9A961;
}
/* Input form */
.shof-chat-form {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid #E5DCC8;
background: #FFFFFF;
}
.shof-chat-input {
flex: 1;
border: 1px solid #E5DCC8;
border-radius: 999px;
padding: 11px 16px;
font-size: 14px;
font-family: inherit;
outline: none;
background: #F8F4ED;
color: #0F0F0F;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shof-chat-input:focus { border-color: #C9A961; box-shadow: 0 0 0 3px rgba(201,169,97,0.15); }
.shof-chat-input:disabled { opacity: 0.5; }
.shof-chat-input::placeholder { color: rgba(15,15,15,0.4); }
.shof-chat-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%);
color: #0F0F0F;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.shof-chat-send svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shof-chat-send:hover { transform: scale(1.06); }
.shof-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* Mobile — windowed (not full-screen) so visitors can see the page
underneath, close it with the X, and use the FAB without confusion. */
@media (max-width: 600px) {
#shof-chat-root { bottom: 16px; right: 16px; }
.shof-chat-panel {
position: fixed;
bottom: 90px;
right: 12px;
left: 12px;
top: 70px;
width: auto;
height: auto;
max-height: calc(100vh - 160px);
border-radius: 18px;
border: 1px solid #E5DCC8;
box-shadow: 0 24px 60px rgba(15,15,15,0.35), 0 8px 20px rgba(0,0,0,0.15);
}
}
/* ============= DARK MODE ============= */
[data-theme="dark"] .shof-chat-panel {
background: #1A1612;
border-color: #2A2620;
}
[data-theme="dark"] .shof-chat-body { background: #0F0F0F; }
[data-theme="dark"] .shof-chat-msg-assistant .shof-chat-bubble {
background: #1A1612;
color: #F8F4ED;
border-color: #2A2620;
}
[data-theme="dark"] .shof-chat-suggested { background: #0F0F0F; }
[data-theme="dark"] .shof-chat-chip {
background: #1A1612;
border-color: #2A2620;
color: #F8F4ED;
}
[data-theme="dark"] .shof-chat-chip:hover { background: rgba(201,169,97,0.18); border-color: #C9A961; }
[data-theme="dark"] .shof-chat-form { background: #1A1612; border-top-color: #2A2620; }
[data-theme="dark"] .shof-chat-input {
background: #0F0F0F;
border-color: #2A2620;
color: #F8F4ED;
}
[data-theme="dark"] .shof-chat-input::placeholder { color: rgba(248,244,237,0.4); }
[data-theme="dark"] .shof-chat-body::-webkit-scrollbar-thumb { background: rgba(201,169,97,0.4); }
/* ===================================================================
DARK MODE — comparison card highlighted strong tags
The light-mode rule .comparison-card strong { color: var(--gray-900) }
becomes near-invisible on the dark surface. Flip to cream on the
"Listing with an agent" card and gold on the winner "Selling to Skyline".
=================================================================== */
[data-theme="dark"] .comparison-card strong { color: #F8F4ED !important; }
[data-theme="dark"] .comparison-card.winner strong { color: #C9A961 !important; }
/* ===================================================================
CHAT — "Send my information" action button
Rendered inside the chat body when the bot is ready to submit
the captured lead to /api/submit.
=================================================================== */
.shof-chat-action-row { align-self: stretch !important; max-width: 100% !important; padding: 4px 0 8px; }
.shof-chat-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%);
color: #0F0F0F;
border: none;
border-radius: 999px;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
box-shadow: 0 8px 22px rgba(201,169,97,0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
letter-spacing: 0.3px;
width: auto;
margin: 4px 0;
}
.shof-chat-action-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(201,169,97,0.5); }
.shof-chat-action-btn:active { transform: translateY(0); }
.shof-chat-action-btn:disabled { opacity: 0.85; cursor: default; transform: none; }
.shof-chat-action-btn svg {
width: 16px; height: 16px;
stroke: currentColor; fill: none;
stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.shof-chat-action-btn-sent {
background: linear-gradient(135deg, #4ADE80 0%, #16A34A 100%) !important;
color: #0F0F0F !important;
box-shadow: 0 8px 22px rgba(74,222,128,0.35) !important;
}
/* Dark mode tweaks */
[data-theme="dark"] .shof-chat-action-btn { color: #0F0F0F; }
/* ===================================================================
MICRO-ANIMATIONS — fade-in on scroll
=================================================================== */
.shof-fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.shof-fade-in.shof-fade-in-visible {
opacity: 1;
transform: translateY(0);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.shof-fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ===================================================================
MOBILE POLISH — tighten everything at 375px (iPhone SE & similar)
=================================================================== */
@media (max-width: 480px) {
/* Container padding tighter */
.container { padding: 0 16px; }
/* Header — compact */
.header-inner { padding: 10px 4px; }
.logo { font-size: 14px; gap: 8px; }
.logo-icon { width: 28px; height: 28px; }
.header-phone { font-size: 12px; padding: 6px 10px; }
.header-phone .icon { width: 14px; height: 14px; }
.theme-toggle { width: 34px; height: 34px; margin-right: 4px; }
.theme-toggle .icon { width: 16px; height: 16px; }
.nav { display: none; } /* mobile menu handles this */
/* Hero — readable thumb-sized */
.hero { padding: 36px 0 28px; }
.hero h1 { font-size: 38px; line-height: 1.08; letter-spacing: -1.5px; }
.hero-sub { font-size: 15px; line-height: 1.5; margin-top: 14px; }
.hero-tag { font-size: 12px; padding: 7px 14px; }
.hero-bullets { gap: 8px; font-size: 13px; flex-wrap: wrap; justify-content: center; }
.hero-bullets .check { width: 20px; height: 20px; }
.hero-cta-row { flex-direction: column; gap: 8px; width: 100%; }
.hero-cta-row .btn { width: 100%; }
/* Page hero (sub-pages) */
.page-hero { padding: 50px 0 28px; }
.page-hero h1 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
.page-hero p { font-size: 15px; margin-top: 12px; }
/* Section titles */
.section-title { font-size: 32px; line-height: 1.1; letter-spacing: -1px; }
.section-sub { font-size: 15px; line-height: 1.55; margin-top: 12px; }
.section-tag { font-size: 12px; padding: 8px 16px; }
section { padding: 50px 0; }
/* Forms — bigger touch targets */
.hero-form, .form-wrapper { padding: 24px 18px; border-radius: 16px; }
.form-title, .hero-form h3 { font-size: 22px; }
.shof-field { margin-bottom: 14px; }
.shof-field label { font-size: 13px; margin-bottom: 6px; }
.shof-field input, .shof-field textarea, .shof-field select {
font-size: 16px; /* prevents iOS auto-zoom */
padding: 13px 14px;
border-radius: 10px;
}
.shof-submit { font-size: 15px; padding: 14px; border-radius: 10px; }
.shof-disclaimer { font-size: 11px; line-height: 1.4; margin-top: 10px; }
/* Buttons */
.btn { padding: 12px 20px; font-size: 14px; }
.btn-row { flex-direction: column; width: 100%; gap: 8px; }
.btn-row .btn { width: 100%; }
/* Savings calculator — stack tightly */
.savings-section { padding: 60px 0; }
.savings-slider-row { gap: 12px; }
.savings-slider-row label { font-size: 14px; }
.savings-slider-value { font-size: 28px; }
.savings-slider-min, .savings-slider-max { font-size: 11px; }
.savings-cards {
grid-template-columns: 1fr;
gap: 12px;
}
.savings-card { padding: 22px 18px; }
.savings-card-label { font-size: 14px; }
.savings-card-sub { font-size: 12px; }
.savings-card-amount { font-size: 32px; }
.savings-vs-divider { display: none; }
/* Comparison cards */
.comparison-grid { grid-template-columns: 1fr; gap: 16px; }
.comparison-card { padding: 24px 18px; }
.comparison-card h3 { font-size: 22px; }
.comparison-card li { font-size: 14px; padding: 10px 0; }
/* Steps */
.steps-grid { grid-template-columns: 1fr; gap: 16px; }
.step-card { padding: 24px 20px; }
.step-card h3 { font-size: 22px; }
.step-card p { font-size: 14px; }
.step-icon { width: 48px; height: 48px; }
.step-icon .icon { width: 22px; height: 22px; }
.step-number { font-size: 36px; }
/* Accordion */
.accordion-item { padding: 18px 20px; }
.accordion-header { font-size: 15px; line-height: 1.4; }
.accordion-body { font-size: 14px; }
.accordion-toggle { width: 28px; height: 28px; }
/* Properties / situations grid */
.properties-grid { grid-template-columns: 1fr; gap: 12px; }
.properties-col { padding: 22px 18px; }
.properties-col li { font-size: 14px; padding: 9px 0; }
/* Testimonials */
.testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
.testimonial { padding: 24px 20px; }
.testimonial p { font-size: 14px; line-height: 1.55; }
.stars { font-size: 14px; }
/* States carousel */
.states-carousel-section { padding: 50px 0; }
.state-slide-body { padding: 24px 18px; }
.state-slide-body h3 { font-size: 28px; }
.state-slide-body p { font-size: 14px; line-height: 1.5; }
.state-slide-eyebrow { font-size: 10px; }
.state-slide-state-label { font-size: 10px; padding: 6px 12px; bottom: 12px; left: 12px; }
.state-slide-cities span { font-size: 11px; padding: 5px 10px; }
.states-pagination { gap: 6px; margin-top: 24px; }
.states-dot { padding: 7px 12px; font-size: 11px; min-width: 46px; }
.states-arrow { width: 40px; height: 40px; }
.states-arrow .icon { width: 16px; height: 16px; }
.states-arrow-prev { left: 4px; }
.states-arrow-next { right: 4px; }
/* Contact cards */
.contact-cards { grid-template-columns: 1fr; gap: 12px; }
.contact-card { padding: 26px 20px; }
.contact-card h3 { font-size: 18px; }
.contact-card p { font-size: 13px; }
.contact-card-info { font-size: 15px; }
.contact-card-icon { width: 48px; height: 48px; margin-bottom: 14px; }
/* CTA section */
.cta-section { padding: 60px 0; }
.cta-section h2 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
.cta-section p { font-size: 14px; margin-bottom: 24px; }
/* Footer — single column, tighter */
.footer { padding: 40px 0 20px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer h4 { font-size: 12px; margin-bottom: 12px; }
.footer-brand p { font-size: 13px; }
.footer-tagline { font-size: 11px; }
.footer ul li { font-size: 13px; }
.footer-line { font-size: 13px; }
.footer-bottom { font-size: 11px; flex-direction: column; gap: 8px; text-align: center; }
/* Legal pages */
.legal-prose { font-size: 15px; line-height: 1.65; }
.legal-prose h2 { font-size: 22px; margin-top: 28px; }
.legal-prose p { margin-bottom: 12px; }
.legal-contact { padding: 18px 20px; }
/* Chat widget — already mobile-takeover, just tighten the launcher */
#shof-chat-root { bottom: 12px; right: 12px; }
.shof-chat-fab { width: 54px; height: 54px; }
.shof-chat-fab svg { width: 22px; height: 22px; }
}
/* Even tinier — iPhone SE width 320px */
@media (max-width: 360px) {
.hero h1 { font-size: 32px; }
.page-hero h1 { font-size: 30px; }
.section-title { font-size: 28px; }
.savings-card-amount { font-size: 28px; }
}
/* ===================================================================
STATE-THEMED ACCENT ILLUSTRATIONS — subtle watermark silhouettes
behind section headers. Decorative, no semantic meaning.
=================================================================== */
.section-with-accent {
position: relative;
overflow: hidden;
}
.section-with-accent::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: right -40px top 40px;
background-size: auto 180px;
opacity: 0.06;
z-index: 0;
}
.section-with-accent > .container { position: relative; z-index: 1; }
/* Colonial mansion silhouette (Virginia) */
.section-with-accent.accent-va::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Lighthouse silhouette (North Carolina) */
.section-with-accent.accent-nc::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Row homes silhouette (Maryland) */
.section-with-accent.accent-md::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Antebellum mansion with columns (Georgia) */
.section-with-accent.accent-ga::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Windmill silhouette (Texas) */
.section-with-accent.accent-tx::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Generic house silhouette (default) */
.section-with-accent.accent-house::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Dark mode — slightly brighter accent so it shows through */
[data-theme="dark"] .section-with-accent::before { opacity: 0.08; }
/* Hide accents on small screens — keeps mobile clean */
@media (max-width: 768px) {
.section-with-accent::before { display: none; }
}
/* ===================================================================
HERO B — Calculator-first A/B variant for index-b.html
=================================================================== */
.hero-b { padding: 70px 0 90px; }
.hero-b-center {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.hero-b-center .hero-tag {
margin: 0 auto 22px;
display: inline-flex;
}
.hero-b h1 {
font-size: 58px;
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 16px;
}
.hero-b-sub {
font-size: 18px;
line-height: 1.55;
max-width: 600px;
margin: 0 auto 38px;
}
/* Inline calculator card */
.hero-b-calc {
background: rgba(255,255,255,0.85);
border: 1px solid #E5DCC8;
border-radius: 20px;
padding: 28px 32px;
margin: 0 auto 30px;
max-width: 620px;
text-align: left;
backdrop-filter: blur(8px);
}
.hero-b-calc .savings-slider-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.hero-b-calc .savings-slider-row label {
font-size: 13px;
font-weight: 600;
color: #6B6356;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-b-calc .savings-slider-value {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 800;
color: #0F0F0F;
}
.hero-b-slider {
width: 100%;
height: 6px;
appearance: none;
-webkit-appearance: none;
background: linear-gradient(to right, #C9A961 0%, #C9A961 12%, rgba(15,15,15,0.1) 12%, rgba(15,15,15,0.1) 100%);
border-radius: 3px;
outline: none;
margin-bottom: 6px;
}
.hero-b-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: #fff;
border: 3px solid #C9A961;
cursor: pointer;
box-shadow: 0 4px 12px rgba(201,169,97,0.4);
}
.hero-b-slider::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%;
background: #fff;
border: 3px solid #C9A961;
cursor: pointer;
}
.hero-b-slider-labels {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #6B6356;
margin-bottom: 20px;
}
.hero-b-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
.hero-b-card {
padding: 16px 14px;
border-radius: 14px;
text-align: center;
}
.hero-b-loser { background: rgba(15,15,15,0.06); }
.hero-b-winner {
background: linear-gradient(135deg, #C9A961 0%, #A88A26 100%);
color: #0F0F0F;
}
.hero-b-card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 6px;
opacity: 0.85;
}
.hero-b-card-amount {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 800;
}
.hero-b-savings-line {
text-align: center;
font-size: 14px;
color: #4A4439;
padding-top: 6px;
}
.hero-b-savings-line strong {
font-family: 'Playfair Display', serif;
font-size: 22px;
color: #A88A26;
margin: 0 4px;
}
/* Single-field address CTA */
.hero-b-cta { max-width: 620px; margin: 0 auto 30px; }
.hero-b-form { background: transparent; }
.hero-b-address-row {
display: flex;
gap: 10px;
background: #fff;
border: 2px solid #C9A961;
border-radius: 999px;
padding: 6px 6px 6px 22px;
box-shadow: 0 12px 40px rgba(201,169,97,0.25);
}
.hero-b-address-input {
flex: 1;
border: none;
background: transparent;
font-size: 16px;
font-family: inherit;
color: #0F0F0F;
outline: none;
}
.hero-b-cta-btn {
flex-shrink: 0;
background: #0F0F0F !important;
color: #fff !important;
border-radius: 999px !important;
padding: 14px 26px !important;
font-weight: 700;
white-space: nowrap;
}
.hero-b-more-fields {
display: none;
margin-top: 14px;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.hero-b-more-fields.expanded { display: grid; }
@media (max-width: 700px) {
.hero-b-more-fields.expanded { grid-template-columns: 1fr; }
}
.hero-b-bullets {
display: flex;
gap: 26px;
justify-content: center;
flex-wrap: wrap;
font-size: 14px;
font-weight: 600;
margin-top: 28px;
}
.hero-b-bullets .check {
background: #C9A961;
color: #0F0F0F;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 6px;
font-weight: 700;
font-size: 12px;
}
/* Dark mode */
[data-theme="dark"] .hero-b-calc {
background: rgba(26,22,18,0.85);
border-color: #2A2620;
}
[data-theme="dark"] .hero-b-calc .savings-slider-value { color: #F8F4ED; }
[data-theme="dark"] .hero-b-savings-line { color: rgba(248,244,237,0.85); }
[data-theme="dark"] .hero-b-address-row {
background: #1A1612;
border-color: #C9A961;
}
[data-theme="dark"] .hero-b-address-input { color: #F8F4ED; }
[data-theme="dark"] .hero-b-cta-btn {
background: #C9A961 !important;
color: #0F0F0F !important;
}
/* Mobile */
@media (max-width: 600px) {
.hero-b { padding: 36px 0 50px; }
.hero-b h1 { font-size: 38px; letter-spacing: -1.5px; }
.hero-b-sub { font-size: 15px; margin-bottom: 26px; }
.hero-b-calc { padding: 20px 18px; }
.hero-b-calc .savings-slider-value { font-size: 24px; }
.hero-b-cards { grid-template-columns: 1fr; }
.hero-b-address-row {
flex-direction: column;
border-radius: 16px;
padding: 8px;
}
.hero-b-address-input { padding: 12px 14px; }
.hero-b-cta-btn { width: 100%; border-radius: 12px !important; }
}