/*
* JoinFPR.com — Four Point Realty Recruiting Website
* Global Design System v1.0
* Load this file FIRST on every page via
*
* Color System: Deep Navy & Signature Red Elegance
* Typography: Playfair Display (headings) + Poppins (body) + Montserrat (UI)
*/
/* ═══════════════════════════════════════
CSS CUSTOM PROPERTIES (Design Tokens)
═══════════════════════════════════════ */
:root {
/* Brand Colors */
--red: #F40808;
--red-dark: #C00000;
--red-light: rgba(244, 8, 8, 0.08);
/* Navy Scale */
--navy: #0F1F3D;
--navy-mid: #162D52;
--navy-light: #1E3A68;
--navy-border: #1E3360;
--navy-footer: #0A1628;
/* Neutral Scale */
--platinum: #94A3B8;
--plat-light: #CBD5E1;
--charcoal: #1C1C1C;
--gray-mid: #666262;
--gray-light: #F4F4F4;
--gray-border: #E2E8F0;
--white: #FFFFFF;
--gold: #C9A84C;
/* Typography */
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Poppins', system-ui, sans-serif;
--font-ui: 'Montserrat', system-ui, sans-serif;
/* Spacing */
--section-pad: 88px 0;
--section-pad-sm: 60px 0;
--container-max: 1320px;
--container-wide: 1440px;
/* Transitions */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--transition: all 0.25s ease;
}
/* ═══════════════════════════════════════
RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 16px;
color: var(--charcoal);
background: var(--white);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
height: auto;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
font-family: inherit;
}
/* ═══════════════════════════════════════
LAYOUT UTILITIES
═══════════════════════════════════════ */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 40px;
}
.container-wide {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 36px;
}
.section-pad { padding: var(--section-pad); }
.section-pad-sm { padding: var(--section-pad-sm); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
/* ═══════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════ */
.sec-title {
font-family: var(--font-heading);
font-size: clamp(26px, 2.8vw, 38px);
font-weight: 900;
color: var(--charcoal);
line-height: 1.1;
}
.sec-title.white { color: #fff; }
.sec-title em { color: var(--red); font-style: normal; }
.sec-title.italic-accent em { font-style: italic; color: var(--red); }
.sec-sub {
font-size: 14px;
color: var(--gray-mid);
line-height: 1.85;
margin-top: 12px;
}
.sec-sub.white { color: var(--platinum); }
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.eyebrow-line {
width: 36px;
height: 2px;
background: var(--red);
flex-shrink: 0;
}
.eyebrow-text {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
font-weight: 700;
font-family: var(--font-ui);
}
.eyebrow-center { justify-content: center; }
/* ═══════════════════════════════════════
BUTTONS
═══════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
border: none;
border-radius: 3px;
transition: var(--transition);
white-space: nowrap;
cursor: pointer;
}
.btn-red {
background: var(--red);
color: #fff;
}
.btn-red:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(244, 8, 8, 0.35);
}
.btn-navy {
background: var(--navy);
color: #fff;
}
.btn-navy:hover {
background: var(--navy-light);
transform: translateY(-2px);
}
.btn-outline-white {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.btn-outline-white:hover {
background: var(--red);
border-color: var(--red);
color: #fff;
transform: translateY(-2px);
}
.btn-outline-dark {
background: transparent;
color: var(--charcoal);
border: 1.5px solid #CBD5E1;
}
.btn-outline-dark:hover {
background: var(--red);
border-color: var(--red);
color: #fff;
transform: translateY(-2px);
}
/* ═══════════════════════════════════════
SCROLL REVEAL ANIMATIONS
Triggered by IntersectionObserver in global.js
═══════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-right.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-scale {
opacity: 0;
transform: scale(0.92);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-scale.visible {
opacity: 1;
transform: scale(1);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
/* Hover lift — apply to any card */
.hover-lift {
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(15, 31, 61, 0.12);
}
/* ═══════════════════════════════════════
TOP BAR
═══════════════════════════════════════ */
.topbar {
background: var(--navy-footer);
padding: 8px 0;
border-bottom: 1px solid var(--navy-border);
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.topbar-left {
font-size: 11px;
color: var(--platinum);
font-family: var(--font-ui);
display: flex;
gap: 22px;
flex-wrap: wrap;
align-items: center;
}
.topbar-left span {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.topbar-left i {
color: var(--red);
font-size: 10px;
}
/*
* CLICKABLE PHONE — uses tel: link for native dialing on mobile/desktop
* CSS obfuscates email display using user-select:none on the mailto anchor text
*/
.topbar-left .click-phone {
color: var(--platinum);
transition: color 0.2s;
font-weight: 600;
}
.topbar-left .click-phone:hover { color: #fff; }
/* Email protection — displayed via CSS content, not inline text */
.protected-email {
direction: ltr;
unicode-bidi: bidi-override;
}
.topbar-social {
display: flex;
gap: 8px;
align-items: center;
}
.topbar-social a {
color: var(--platinum);
font-size: 12px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: all 0.2s;
flex-shrink: 0;
}
.topbar-social a:hover {
color: #fff;
background: rgba(244, 8, 8, 0.25);
}
.topbar-social a.wa { color: #25D366; }
.topbar-social a.wa:hover { background: rgba(37, 211, 102, 0.2); color: #25D366; }
.topbar-social a.zillow-sm {
font-size: 10px;
font-weight: 800;
font-family: var(--font-ui);
color: var(--platinum);
}
.topbar-social a.zillow-sm:hover { color: #006AFF; background: rgba(0, 106, 255, 0.15); }
/* ═══════════════════════════════════════
NAVIGATION — MEGA MENU
═══════════════════════════════════════ */
.nav-wrap {
background: var(--navy);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--navy-border);
transition: box-shadow 0.3s;
}
.nav-wrap.scrolled {
box-shadow: 0 4px 30px rgba(9, 15, 30, 0.6);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: 72px;
max-width: var(--container-wide);
margin: 0 auto;
gap: 12px;
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
text-decoration: none;
}
.nav-logo-mark {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.nav-logo-text .name {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 900;
color: #fff;
letter-spacing: 0.04em;
line-height: 1.1;
white-space: nowrap;
}
.nav-logo-text .name span { color: var(--red); }
.nav-logo-text .tag {
font-size: 7.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--platinum);
font-family: var(--font-ui);
margin-top: 1px;
opacity: 0.7;
white-space: nowrap;
}
/* Nav menu */
.nav-menu {
display: flex;
align-items: center;
gap: 0;
flex: 1;
justify-content: center;
list-style: none;
}
.nav-menu > li {
position: relative;
}
.nav-menu > li > a,
.nav-menu > li > span {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
color: var(--platinum);
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
cursor: pointer;
border-radius: 3px;
transition: color 0.2s;
position: relative;
}
.nav-menu > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
height: 2px;
background: var(--red);
transform: scaleX(0);
transition: transform 0.25s;
}
.nav-menu > li > a:hover,
.nav-menu > li > span:hover,
.nav-menu > li.active > a {
color: #fff;
}
.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after {
transform: scaleX(1);
}
.nav-menu > li > span .nav-arrow {
font-size: 8px;
transition: transform 0.2s;
}
.nav-menu > li:hover > span .nav-arrow,
.nav-menu > li:hover > a .nav-arrow {
transform: rotate(180deg);
}
/* ── Standard Dropdown ── */
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
background: var(--navy);
border: 1px solid var(--navy-border);
border-radius: 6px;
padding: 8px 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.22s var(--ease-out);
z-index: 200;
list-style: none;
}
.nav-menu > li:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown li a {
display: block;
padding: 9px 18px;
font-size: 12px;
color: var(--platinum);
font-family: var(--font-ui);
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.nav-dropdown li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
padding-left: 22px;
}
.nav-dropdown li a i {
color: var(--red);
margin-right: 6px;
font-size: 10px;
width: 12px;
}
/* ── MEGA MENU — Careers ── */
.mega-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(8px);
width: 700px;
background: var(--navy);
border: 1px solid var(--navy-border);
border-radius: 8px;
padding: 24px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: all 0.22s var(--ease-out);
z-index: 200;
}
.nav-menu > li:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu-header {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
font-family: var(--font-ui);
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--navy-border);
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.mega-menu-item a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 5px;
transition: background 0.2s;
}
.mega-menu-item a:hover {
background: rgba(255, 255, 255, 0.06);
}
.mega-item-icon {
width: 32px;
height: 32px;
background: rgba(244, 8, 8, 0.12);
border: 1px solid rgba(244, 8, 8, 0.2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}
.mega-menu-item a:hover .mega-item-icon {
background: rgba(244, 8, 8, 0.2);
}
.mega-item-icon i {
color: var(--red);
font-size: 13px;
}
.mega-item-text strong {
display: block;
font-size: 12px;
font-weight: 600;
color: #fff;
font-family: var(--font-ui);
margin-bottom: 2px;
}
.mega-item-text span {
font-size: 11px;
color: var(--platinum);
line-height: 1.4;
opacity: 0.7;
}
/* Nav CTA */
.nav-right {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.nav-phone {
font-family: var(--font-ui);
font-size: 11px;
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
margin-right: 14px;
white-space: nowrap;
text-decoration: none;
transition: color 0.2s;
}
.nav-phone:hover { color: var(--plat-light); }
.nav-phone i { color: var(--red); }
.nav-cta {
background: var(--red);
color: #fff;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 11px 20px;
border: none;
border-radius: 3px;
white-space: nowrap;
transition: all 0.25s;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.nav-cta:hover {
background: var(--red-dark);
box-shadow: 0 4px 18px rgba(244, 8, 8, 0.4);
transform: translateY(-1px);
}
/* Mobile hamburger */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
background: none;
border: none;
}
.nav-hamburger span {
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all 0.3s;
}
/* ═══════════════════════════════════════
PAGE HERO BANNER (inner pages)
═══════════════════════════════════════ */
.page-hero {
background: var(--navy);
padding: 60px 0 52px;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0A1628 0%, #162D52 60%, #0F1F3D 100%);
}
.page-hero-inner {
position: relative;
z-index: 2;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
font-size: 12px;
font-family: var(--font-ui);
color: var(--platinum);
opacity: 0.7;
}
.breadcrumb a { color: var(--platinum); transition: color 0.2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-size: 8px; }
.page-hero h1 {
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 52px);
font-weight: 900;
color: #fff;
line-height: 1.08;
margin-bottom: 14px;
}
.page-hero h1 em { color: var(--red); font-style: normal; }
.page-hero p {
font-size: 15px;
color: var(--platinum);
max-width: 600px;
line-height: 1.8;
}
/* ═══════════════════════════════════════
PLAN CARDS
═══════════════════════════════════════ */
.plans-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.plan-card {
background: #fff;
border: 1px solid var(--gray-border);
border-radius: 8px;
padding: 32px 22px;
position: relative;
transition: all 0.3s var(--ease-out);
}
.plan-card:not(.featured):hover {
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(15, 31, 61, 0.13);
border-color: var(--navy);
}
.plan-card.featured:hover {
transform: translateY(-22px);
box-shadow: 0 32px 80px rgba(15, 31, 61, 0.22), 0 0 0 1px rgba(244, 8, 8, 0.25);
}
.plan-card.featured {
border-top: 4px solid var(--red);
transform: translateY(-16px);
box-shadow: 0 24px 60px rgba(15, 31, 61, 0.18), 0 0 0 1px rgba(244, 8, 8, 0.15);
z-index: 2;
position: relative;
}
.plan-badge {
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: var(--red);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 0 0 5px 5px;
font-family: var(--font-ui);
white-space: nowrap;
}
.plan-label {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
font-weight: 700;
font-family: var(--font-ui);
margin-bottom: 8px;
}
.plan-split {
font-family: var(--font-heading);
font-size: 50px;
font-weight: 900;
color: var(--navy);
line-height: 1;
}
.plan-split span { color: var(--red); }
.plan-divider {
border: none;
border-top: 1px solid #f0f0f0;
margin: 14px 0;
}
.plan-fees {
display: flex;
flex-direction: column;
gap: 7px;
}
.plan-fee-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11.5px;
color: var(--gray-mid);
line-height: 1.5;
}
.plan-fee-row i {
color: var(--red);
font-size: 11px;
margin-top: 2px;
flex-shrink: 0;
}
.plan-fee-row.ai-note {
font-size: 10.5px;
color: #999;
font-style: italic;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed #eee;
}
.plan-fee-row.ai-note i { color: #aaa; }
.plan-cta {
display: block;
width: 100%;
text-align: center;
margin-top: 20px;
background: var(--navy);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 13px;
border: none;
border-radius: 3px;
cursor: pointer;
font-family: var(--font-ui);
transition: all 0.25s;
text-decoration: none;
}
.plan-cta:hover {
background: var(--navy-light);
transform: translateY(-2px);
}
.plan-card.featured .plan-cta {
background: var(--red);
}
.plan-card.featured .plan-cta:hover {
background: var(--red-dark);
}
/* ═══════════════════════════════════════
SECTION ELEMENTS — REUSABLE
═══════════════════════════════════════ */
/* Feature cards */
.feat-card {
background: var(--gray-light);
border: 1px solid var(--gray-border);
border-radius: 8px;
padding: 24px;
transition: all 0.28s var(--ease-out);
}
.feat-card:hover {
border-color: var(--navy);
background: #EEF4FF;
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(15, 31, 61, 0.1);
}
.feat-card i {
font-size: 26px;
color: var(--navy);
margin-bottom: 12px;
display: block;
transition: color 0.2s;
}
.feat-card:hover i { color: var(--red); }
.feat-card h3 {
font-size: 14px;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 6px;
font-family: var(--font-ui);
}
.feat-card p {
font-size: 13px;
color: var(--gray-mid);
line-height: 1.65;
}
/* State tabs — plan switcher */
.state-tabs {
display: flex;
justify-content: center;
margin-bottom: 36px;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--gray-border);
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.state-tab-btn {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 11px 24px;
background: #fff;
color: var(--gray-mid);
border: none;
cursor: pointer;
transition: all 0.2s;
border-right: 1px solid var(--gray-border);
}
.state-tab-btn:last-child { border-right: none; }
.state-tab-btn.active { background: var(--navy); color: #fff; }
.state-tab-btn:hover:not(.active) { background: var(--gray-light); color: var(--charcoal); }
.plan-tab-content { display: none; }
.plan-tab-content.active { display: block; }
.plans-note {
text-align: center;
font-size: 12px;
color: #999;
font-style: italic;
margin-top: 18px;
font-family: var(--font-ui);
}
.plans-note span { color: var(--red); }
/* Testimonial cards */
.testi-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 30px;
transition: all 0.3s var(--ease-out);
}
.testi-card:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(244, 8, 8, 0.3);
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.testi-stars {
color: var(--gold);
font-size: 13px;
margin-bottom: 14px;
display: flex;
gap: 3px;
}
.testi-quote {
font-size: 13.5px;
color: var(--platinum);
line-height: 1.85;
font-style: italic;
margin-bottom: 20px;
}
.testi-bar {
width: 28px;
height: 2px;
background: var(--red);
margin-bottom: 10px;
}
.testi-name {
font-size: 13px;
font-weight: 700;
color: #fff;
font-family: var(--font-ui);
}
.testi-role {
font-size: 10px;
color: var(--red);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--font-ui);
margin-top: 3px;
}
/* FAQ accordion */
.faq-item {
border: 1px solid var(--gray-border);
border-radius: 6px;
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--navy); }
.faq-item.open { border-color: var(--navy); }
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px;
cursor: pointer;
background: #fff;
transition: background 0.2s;
}
.faq-question:hover,
.faq-item.open .faq-question { background: #EEF4FF; }
.faq-q-text {
font-size: 13px;
font-weight: 600;
color: var(--charcoal);
font-family: var(--font-ui);
padding-right: 16px;
}
.faq-icon {
color: var(--navy);
font-size: 15px;
transition: transform 0.3s;
flex-shrink: 0;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
color: var(--red);
}
.faq-answer {
padding: 0 22px 18px;
font-size: 13px;
color: var(--gray-mid);
line-height: 1.8;
display: none;
}
.faq-item.open .faq-answer { display: block; }
/* Skill bars */
.skill-bars {
display: flex;
flex-direction: column;
gap: 14px;
}
.skill-bar-item label {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: var(--charcoal);
font-family: var(--font-ui);
margin-bottom: 6px;
}
.skill-bar-track {
background: #dce8f5;
border-radius: 4px;
height: 5px;
overflow: hidden;
}
.skill-bar-fill {
height: 5px;
border-radius: 4px;
background: var(--red);
width: 0;
transition: width 1.4s var(--ease-out);
}
/* ═══════════════════════════════════════
CTA BAND
═══════════════════════════════════════ */
.cta-band {
background: var(--red);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
right: -8%;
top: 50%;
transform: translateY(-50%);
width: 380px;
height: 380px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.cta-band-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 36px;
align-items: center;
position: relative;
z-index: 2;
}
.cta-band-title {
font-family: var(--font-heading);
font-size: clamp(24px, 2.8vw, 38px);
font-weight: 900;
color: #fff;
line-height: 1.12;
}
.cta-band-title em { font-style: italic; }
.cta-band-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
margin-top: 8px;
}
.cta-band-btns {
display: flex;
gap: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-white {
background: #fff;
color: var(--red);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 26px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: all 0.25s;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-white:hover {
background: var(--navy);
color: #fff;
transform: translateY(-2px);
}
/* ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ */
.footer {
background: var(--navy-footer);
padding: 70px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
gap: 40px;
padding-bottom: 48px;
border-bottom: 1px solid var(--navy-border);
}
.footer-brand .name {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 900;
color: #fff;
}
.footer-brand .name span { color: var(--red); }
.footer-brand-tag {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
font-family: var(--font-ui);
font-weight: 700;
margin-top: 3px;
}
.footer-brand-desc {
font-size: 12.5px;
color: var(--platinum);
line-height: 1.85;
margin-top: 14px;
opacity: 0.75;
}
.footer-contact-row {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 12px;
color: var(--platinum);
margin-top: 9px;
opacity: 0.75;
}
.footer-contact-row i {
color: var(--red);
font-size: 12px;
width: 14px;
margin-top: 2px;
flex-shrink: 0;
}
.footer-contact-row a {
color: var(--platinum);
transition: color 0.2s;
}
.footer-contact-row a:hover { color: #fff; }
/* Footer social icons */
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 20px;
}
.footer-social a {
width: 34px;
height: 34px;
background: var(--navy-light);
border: 1px solid var(--navy-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--platinum);
font-size: 13px;
transition: all 0.25s;
text-decoration: none;
}
.footer-social a:hover {
background: var(--red);
color: #fff;
border-color: var(--red);
transform: translateY(-3px);
}
.footer-social a.wa:hover { background: #25D366; border-color: #25D366; }
.footer-social a.zillow-icon {
font-size: 10px;
font-weight: 800;
font-family: var(--font-ui);
}
.footer-social a.zillow-icon:hover { background: #006AFF; border-color: #006AFF; }
.footer-col-title {
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--red);
font-weight: 700;
font-family: var(--font-ui);
margin-bottom: 18px;
}
.footer-link {
display: block;
font-size: 12.5px;
color: var(--platinum);
margin-bottom: 9px;
transition: all 0.2s;
font-family: var(--font-ui);
opacity: 0.7;
text-decoration: none;
}
.footer-link:hover {
color: #fff;
opacity: 1;
padding-left: 5px;
}
.office-block { margin-top: 12px; }
.office-title {
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
font-family: var(--font-ui);
font-weight: 700;
margin-bottom: 3px;
}
.office-addr {
font-size: 11.5px;
color: var(--platinum);
line-height: 1.6;
opacity: 0.7;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
flex-wrap: wrap;
gap: 12px;
}
.footer-copy {
font-size: 11px;
color: var(--navy-border);
font-family: var(--font-ui);
}
.footer-legal {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-legal a {
font-size: 11px;
color: var(--navy-border);
font-family: var(--font-ui);
transition: color 0.2s;
}
.footer-legal a:hover { color: var(--red); }
/* ═══════════════════════════════════════
FORMS — Lead Capture
═══════════════════════════════════════ */
.form-group {
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--charcoal);
font-family: var(--font-ui);
margin-bottom: 6px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 12px 16px;
font-size: 14px;
font-family: var(--font-body);
color: var(--charcoal);
background: #fff;
border: 1.5px solid var(--gray-border);
border-radius: 4px;
transition: border-color 0.2s, box-shadow 0.2s;
appearance: none;
-webkit-appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(15, 31, 61, 0.1);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.form-error {
font-size: 12px;
color: var(--red);
margin-top: 4px;
font-family: var(--font-ui);
display: none;
}
.form-error.visible { display: block; }
/* Popup lead capture */
.popup-overlay {
position: fixed;
inset: 0;
background: rgba(9, 15, 30, 0.85);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.popup-overlay.active {
opacity: 1;
visibility: visible;
}
.popup-box {
background: #fff;
border-radius: 10px;
padding: 40px;
width: 100%;
max-width: 520px;
position: relative;
transform: scale(0.9);
transition: transform 0.3s var(--ease-out);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
max-height: 90vh;
overflow-y: auto;
}
.popup-overlay.active .popup-box { transform: scale(1); }
.popup-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
background: var(--gray-light);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
color: var(--charcoal);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.popup-close:hover { background: var(--red); color: #fff; }
/* Sticky mobile CTA */
.sticky-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--red);
z-index: 800;
padding: 14px 20px;
flex-direction: column;
align-items: center;
gap: 4px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}
.sticky-cta-text {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
font-family: var(--font-ui);
font-weight: 500;
}
.sticky-cta-btns {
display: flex;
gap: 10px;
width: 100%;
}
.sticky-cta-btns a {
flex: 1;
text-align: center;
padding: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 3px;
font-family: var(--font-ui);
transition: all 0.2s;
}
.sticky-cta-btns .s-apply {
background: #fff;
color: var(--red);
}
.sticky-cta-btns .s-call {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
/* ═══════════════════════════════════════
RESPONSIVE — MOBILE FIRST
═══════════════════════════════════════ */
@media (max-width: 1100px) {
.nav-menu > li > a,
.nav-menu > li > span {
font-size: 9px;
padding: 8px 7px;
}
.plans-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.cta-band-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.container { padding: 0 20px; }
.container-wide { padding: 0 20px; }
.nav-menu { display: none; }
.nav-hamburger { display: flex; }
.nav-menu.mobile-open {
display: flex;
flex-direction: column;
position: fixed;
top: 72px;
left: 0;
right: 0;
bottom: 0;
background: var(--navy);
padding: 20px;
overflow-y: auto;
gap: 0;
z-index: 999;
}
.nav-menu.mobile-open > li > a,
.nav-menu.mobile-open > li > span {
font-size: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--navy-border);
width: 100%;
}
.nav-dropdown,
.mega-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: rgba(255,255,255,0.04);
border-radius: 4px;
margin: 4px 0 8px 12px;
padding: 6px 0;
display: none;
}
.nav-menu.mobile-open > li.dropdown-open .nav-dropdown,
.nav-menu.mobile-open > li.dropdown-open .mega-menu { display: block; }
.plans-grid { grid-template-columns: 1fr; }
.grid-3, .grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.section-pad { padding: 60px 0; }
.sticky-cta { display: flex; }
body { padding-bottom: 80px; }
.topbar { display: none; }
}
@media (max-width: 480px) {
.cta-band-btns { flex-direction: column; }
.state-tabs { flex-direction: column; width: 100%; }
.state-tab-btn { border-right: none; border-bottom: 1px solid var(--gray-border); }
.state-tab-btn:last-child { border-bottom: none; }
}
/* ═══════════════════════════════════════
UTILITY — Image placeholder
═══════════════════════════════════════ */
.img-ph {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: #94A3B8;
}
.img-ph i { font-size: 48px; }
.img-ph span {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--font-ui);
font-weight: 600;
}
/* Benefits metric bar */
.benefit-item {
padding: 24px 16px;
border-right: 1px solid var(--navy-border);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: background 0.25s;
}
.benefit-item:hover { background: rgba(244, 8, 8, 0.08); }
.benefit-item:last-child { border-right: none; }
.benefit-item i { font-size: 20px; color: var(--red); }
.benefit-headline {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 900;
color: #fff;
line-height: 1;
}
.benefit-subline {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--platinum);
font-family: var(--font-ui);
font-weight: 600;
opacity: 0.75;
margin-top: 2px;
}
/* Print */
@media print {
.nav-wrap, .topbar, .sticky-cta, .popup-overlay { display: none !important; }
body { padding: 0 !important; }
}
/* ================================================================
WORDPRESS INTEGRATION & THEME COMPATIBILITY
Applied once, cleanly — replaces FIX 1–6 patches from earlier
================================================================ */
/* Navigation sizing for WordPress menu output */
.nav-menu > li > a,
.nav-menu > li > span {
font-size: 10px;
padding: 8px 9px;
}
.nav-inner { padding: 0 28px; }
.container { padding: 0 28px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 36px; }
/* Grid responsive overrides for WordPress */
.mega-menu-grid { grid-template-columns: repeat(3, 1fr); }
/* Logo display */
.nav-logo img,
.custom-logo { max-height: 60px; width: auto; display: block; }
.nav-logo-text { display: none; }
.nav-logo-text:only-child { display: block; }
/* Page template */
body.home main,
body.home #main-content,
body.home .page-content-wrap,
body.home .entry-content {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body:not(.home) .page-hero { display: block; }
/* page-hero */
.page-hero {
background: linear-gradient(135deg, var(--navy-footer) 0%, var(--navy) 100%);
padding: 48px 0 36px;
}
.page-hero h1 {
font-family: var(--font-heading);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 900;
color: #fff;
line-height: 1.12;
}
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb span { color: rgba(255,255,255,0.6); font-size: 12px; }
.page-hero .breadcrumb a:hover { color: var(--red); }
/* Footer nav */
.footer ul.menu { list-style: none; margin: 0; padding: 0; }
.footer ul.menu li { margin: 0; padding: 0; }
.footer ul.menu li a {
display: block; font-size: 12.5px; color: var(--platinum);
opacity: .7; margin-bottom: 9px; text-decoration: none;
transition: all .2s;
}
.footer ul.menu li a:hover { color: #fff; opacity: 1; padding-left: 5px; }
/* Content section (inner pages) — white bg, dark text */
.content-section { background: #fff; color: var(--charcoal); }
.content-section h1, .content-section h2,
.content-section h3, .content-section h4 { color: var(--navy); }
.content-section p, .content-section li { color: var(--gray-mid); }
.content-section .eyebrow-text { color: var(--red); }
.content-section a:not(.btn) { color: var(--red); }
/* Entry content constraints removed */
.entry-content { max-width: 100%; text-align: left; }
.wp-block-group, .wp-block-columns, .wp-block-html { max-width: 100%; }
/* ================================================================
FINAL DESIGN SYSTEM — Single source of truth for all sections
Replaces all previous patch files (Emergency, Layout, Corrections,
Master Fix, QC Master). Written from live audit, no conflicts.
================================================================ */
/* ── Body ── */
body { background: var(--navy); color: var(--plat-light); }
/* ── Nav phone — red CTA button ── */
a.nav-phone, .nav-phone {
background: var(--red);
color: #fff;
padding: 8px 16px;
border-radius: 4px;
font-weight: 700;
font-size: 11px;
letter-spacing: .06em;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: background .2s;
}
a.nav-phone:hover, .nav-phone:hover { background: var(--red-dark); }
.nav-phone i { color: #fff; }
/* ── Hero ── */
section.hero {
background: linear-gradient(135deg, var(--navy-footer) 0%, var(--navy-mid) 50%, var(--navy) 100%);
position: relative; overflow: hidden; min-height: 88vh;
display: flex; align-items: center; color: #fff;
}
.hero-inner {
display: grid; grid-template-columns: 1fr 420px; gap: 60px;
align-items: center; max-width: 1320px; margin: 0 auto;
padding: 80px 36px; width: 100%; position: relative; z-index: 2;
}
.hero-inner > div:not(.hero-right) { grid-column: 1; }
.hero-right { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: flex; flex-direction: column; gap: 14px; }
.hero-inner > p:not([class]) { display: none; }
.hero-h1 { font-family: var(--font-heading); font-size: clamp(34px, 4.5vw, 60px); font-weight: 900; color: #fff; line-height: 1.04; }
.hero-h1 em { color: var(--red); font-style: normal; }
.hero-h1-sub { font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 34px); font-weight: 700; font-style: italic; color: rgba(200,208,224,.7); margin-bottom: 20px; }
.hero-p { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.9; max-width: 520px; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 440px; }
.hero-feat { display: flex; align-items: center; gap: 10px; }
/* ── Benefits bar ── */
.benefits-bar { background: var(--navy-mid); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.benefits-bar-inner { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1320px; margin: 0 auto; padding: 0 36px; }
.benefit-item { padding: 22px 16px; border-right: 1px solid rgba(255,255,255,.06); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: background .2s; }
.benefit-item:last-child { border-right: none; }
.benefit-item:hover { background: rgba(244,8,8,.08); }
.benefit-headline { font-family: var(--font-heading); font-size: 20px; font-weight: 900; color: #fff; line-height: 1; }
.benefit-subline { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--platinum); font-weight: 600; opacity: .75; text-align: center; }
/* ── Feature strip ── */
.feature-strip { background: var(--navy-footer); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.feature-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1320px; margin: 0 auto; padding: 0 36px; }
.fs-item { display: flex; align-items: center; gap: 14px; padding: 0 24px; border-right: 1px solid rgba(255,255,255,.08); }
.fs-item:first-child { padding-left: 0; }
.fs-item:last-child { border-right: none; }
.fs-title { font-size: 12px; font-weight: 700; color: var(--plat-light); margin-bottom: 2px; }
.fs-desc { font-size: 11px; color: rgba(240,236,227,.5); }
/* ── Why join ── */
.why-section { background: var(--navy-light); padding: 88px 0; color: #fff; }
.why-section h2, .why-section .sec-title { color: #fff; }
.why-section .sec-sub, .why-section p { color: rgba(255,255,255,.75); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 0 36px; }
.why-features { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 24px; }
.why-feat { padding: 16px; border-left: 3px solid var(--red); border-radius: 0 4px 4px 0; background: rgba(255,255,255,.04); transition: background .2s, transform .2s; }
.why-feat:hover { background: rgba(255,255,255,.08); transform: translateX(4px); }
.why-feat-title { color: #fff; font-weight: 700; margin-bottom: 4px; }
.why-feat-desc { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.65; }
/* ── Plans section ── */
.plans-section { background: #F4F4F4; padding: 88px 0; }
.plans-section h2, .plans-section .sec-title { color: var(--navy); }
.plans-section .sec-sub, .plans-section p { color: var(--gray-mid); }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1320px; margin: 24px auto 0; padding: 28px 36px 0; }
.state-tabs { margin: 24px 0 0; }
/* ── Tech section ── */
.tech-section { background: var(--navy); padding: 88px 0; color: #fff; }
.tech-section h2, .tech-section .sec-title { color: #fff; }
.tech-section .sec-sub, .tech-section .eyebrow-text { color: rgba(255,255,255,.7); }
.tech-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 24px; }
.tech-tags br { display: none; }
.tech-tag {
display: flex; align-items: center; gap: 8px; padding: 9px 14px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
border-radius: 6px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500;
cursor: default; transition: background .2s, border-color .2s;
}
.tech-tag::before { content: '✓'; color: var(--red); font-weight: 700; flex-shrink: 0; }
.tech-tag:hover { background: rgba(244,8,8,.15); border-color: rgba(244,8,8,.35); }
/* No .active style — hover only, clicking has no persistent effect */
.tech-tag.active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.tech-cards { display: flex; flex-direction: column; gap: 12px; }
/* feat-card — light card (readable on any bg) */
.feat-card { background: var(--gray-light); border: 1px solid var(--gray-border); border-radius: 8px; padding: 24px; transition: all .28s ease; display: block; }
.feat-card:hover { border-color: var(--navy); background: #EEF4FF; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(15,31,61,.1); }
.feat-card i { font-size: 26px; color: var(--navy); margin-bottom: 12px; display: block; transition: color .2s; }
.feat-card:hover i { color: var(--red); }
.feat-card h3 { font-size: 14px; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; }
.feat-card p { font-size: 13px; color: var(--gray-mid); line-height: 1.65; }
.feat-card > p:empty { display: none; }
.tech-section .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* ── Mission section ── */
.mission-section { background: var(--navy-mid); padding: 88px 0; color: #fff; }
.mission-section h2, .mission-section .sec-title,
.mission-section p, .mission-section .eyebrow-text { color: #fff; }
.mission-section .sec-sub { color: rgba(255,255,255,.75); }
.mission-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.mission-tabs br { display: none; }
.mission-tab {
padding: 10px 22px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
border-radius: 4px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600;
font-family: var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
cursor: pointer; transition: all .25s; text-align: center;
}
.mission-tab.active, .mission-tab:hover { background: var(--red); border-color: var(--red); color: #fff; }
.skill-bar-item, .skill-bar-item label, .skill-bar-item span,
.skill-label, .skill-name, .skill-percent { color: #fff; }
/* ── Divisions ── */
.divisions-section { background: #fff; padding: 88px 0; }
.divisions-section h2, .divisions-section .sec-title { color: var(--navy); }
.divisions-section p, .division-desc { color: var(--gray-mid); }
.division-label { color: var(--red); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.division-title { font-family: var(--font-heading); font-size: 26px; font-weight: 900; color: var(--navy); margin-bottom: 12px; }
.division-card { transition: all .3s; cursor: pointer; padding: 36px 32px; border: 1px solid var(--gray-border); border-radius: 8px; background: #fff; }
.division-card:hover { box-shadow: 0 16px 48px rgba(15,31,61,.1); transform: translateY(-4px); border-color: var(--red); }
.division-bg-num { font-family: var(--font-heading); font-size: 120px; font-weight: 900; color: rgba(15,31,61,.06); line-height: 1; position: absolute; top: 10px; left: 20px; pointer-events: none; }
/* ── Team section ── */
.team-section { background: var(--navy); padding: 88px 0; color: #fff; }
.team-section h2, .team-section .sec-title, .team-section .eyebrow-text { color: #fff; }
.team-section .sec-sub, .team-section p:not(.eyebrow-text) { color: rgba(255,255,255,.7); }
.team-section .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.team-perks { display: flex; flex-direction: column; gap: 0; margin: 22px 0 28px; }
.team-perk { display: flex; align-items: flex-start; gap: 16px; padding: 16px 8px; border-bottom: 1px solid rgba(255,255,255,.08); transition: background .2s; border-radius: 6px; }
.team-perk:last-child { border-bottom: none; }
.team-perk:hover { background: rgba(255,255,255,.05); }
.team-perk-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(244,8,8,.12); border: 1px solid rgba(244,8,8,.25); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.team-perk-icon i { color: var(--red); font-size: 18px; }
.team-perk-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.team-perk-desc { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.65; }
/* ── Testimonials ── */
.testi-section { background: var(--navy-mid); padding: 88px 0; color: #fff; }
.testi-section h2, .testi-section .sec-title { color: #fff; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1320px; margin: 0 auto; padding: 0 36px; }
.testi-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 26px; transition: all .25s; }
.testi-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.testi-card p, .testi-quote { color: rgba(255,255,255,.82); font-style: italic; line-height: 1.75; }
.testi-name { color: #fff; font-weight: 700; }
.testi-role { color: var(--red); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
/* ── States section ── */
.states-section { background: var(--navy); padding: 64px 0; color: #fff; }
.states-section h2, .states-section .sec-title { color: #fff; text-align: center; }
.states-section .sec-sub { color: rgba(255,255,255,.7); text-align: center; }
.states-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1240px; margin: 28px auto 0; padding: 0 36px; }
/* Hide WordPress-injected tags that break the 3-col grid */
.states-grid > p { display: none; }
/* Hide orphan state-cards outside .states-grid */
.state-card:not(.states-grid > .state-card) { display: none; }
.states-grid .state-card::before {
content: '\f3c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
font-size: 28px; color: var(--red); display: block; margin-bottom: 12px; text-align: center;
}
/* Hide hardcoded NJ icon (replaced by ::before above) */
.states-grid .state-card > br, .states-grid .state-card > i.fa,
.states-grid .state-card > i.fas, .states-grid .state-card > i.far { display: none; }
.states-grid .state-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 28px 22px; transition: all .25s; color: #fff; }
.states-grid .state-card:hover { border-color: rgba(244,8,8,.4); transform: translateY(-4px); background: rgba(255,255,255,.09); box-shadow: 0 12px 32px rgba(244,8,8,.15); }
.state-name, .states-grid .state-card h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.state-desc, .states-grid .state-card p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 14px; flex: 1; }
.state-link, .states-grid .state-card a { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); text-decoration: none; margin-top: auto; }
/* ── FAQ ── */
.faq-section { background: #fff; padding: 88px 0; }
.faq-section h2, .faq-section .sec-title { color: var(--navy); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1320px; margin: 40px auto 0; padding: 0 36px; }
.faq-item { border: 1px solid var(--gray-border); border-radius: 8px; overflow: hidden; background: #fff; transition: border-color .2s; }
.faq-item:hover { border-color: var(--navy); }
.faq-item.open { border-color: var(--navy); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; background: #fff; border: none; width: 100%; text-align: left; transition: background .2s; }
.faq-item.open .faq-question { background: #EEF4FF; }
.faq-q-text { font-size: 14px; font-weight: 600; color: var(--navy); flex: 1; }
.faq-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gray-light); color: var(--navy); font-size: 14px; transition: transform .25s, background .2s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq-answer { display: none; padding: 0 20px 18px; font-size: 13.5px; color: var(--gray-mid); line-height: 1.75; }
.faq-item.open .faq-answer { display: block; }
/* ── CTA band ── */
.cta-band { background: var(--red); padding: 80px 0; color: #fff; }
.cta-band-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 0 36px; position: relative; z-index: 2; }
.cta-band-btns { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
/* ── Georgia tab pulse animation ── */
@keyframes fpr-tab-pulse {
0% { box-shadow: 0 0 0 0 rgba(244,8,8,.4); }
70% { box-shadow: 0 0 0 8px rgba(244,8,8,0); }
100% { box-shadow: 0 0 0 0 rgba(244,8,8,0); }
}
.state-tab-btn[data-state="ga"]:not(.active) { animation: fpr-tab-pulse 2.2s ease infinite; }
.state-tab-btn[data-state="ga"]:not(.active):hover { animation: none; }
.state-tab-btn:not(.active):hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244,8,8,.2); }
.state-tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 4px 14px rgba(15,31,61,.35); }
/* ── Form labels — white on dark sections ── */
.form-label { color: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.form-row > p:empty, .form-row > br, .form-group > p:empty, .form-group > br { display: none; }
.form-group { width: 100%; min-width: 0; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-right { display: none; }
.plans-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.why-grid { grid-template-columns: 1fr; }
.team-section .grid-2 { grid-template-columns: 1fr; }
.mission-section .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.benefits-bar-inner { grid-template-columns: repeat(3, 1fr); }
.feature-strip-inner { grid-template-columns: 1fr 1fr; }
.testi-grid { grid-template-columns: 1fr; }
.states-grid { grid-template-columns: 1fr 1fr; padding: 0 18px; }
.faq-grid { grid-template-columns: 1fr; }
.cta-band-inner { grid-template-columns: 1fr; }
.plans-grid { grid-template-columns: 1fr; }
.tech-tags { grid-template-columns: 1fr; }
.plan-card.featured { transform: translateY(-8px); }
}
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr; }
.states-grid { grid-template-columns: 1fr; }
.plan-card.featured { transform: none; }
.benefits-bar-inner { grid-template-columns: 1fr 1fr; }
.mission-tabs { flex-direction: column; }
.hero-features { grid-template-columns: 1fr; }
.plans-grid { padding: 0 18px; }
}
/* ================================================================
FPR ADDITIONS — June 2026
Paste at the VERY BOTTOM of global.css
(public_html/wp-content/themes/fourpoint-realty/css/global.css)
Then: WP Admin → LiteSpeed Cache → Purge All
================================================================ */
/* ════════════════════════════════════════════════════════════════
1. HERO CARD — commission plan card (right side of hero)
These rules were removed in the CSS rebuild. Fully restored.
════════════════════════════════════════════════════════════════ */
.hero-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 22px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.25s;
}
.hero-card:hover {
background: rgba(255, 255, 255, 0.10);
}
.hero-card-label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 14px;
font-family: var(--font-ui);
font-weight: 700;
}
.hero-card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-card-row:last-of-type {
border-bottom: none;
}
.hero-card-plan {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-ui);
}
.hero-card-split {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 900;
color: var(--red);
line-height: 1;
}
.hero-card-cta {
display: block;
text-align: center;
background: var(--red);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 12px;
border-radius: 4px;
margin-top: 16px;
text-decoration: none;
transition: background 0.2s;
font-family: var(--font-ui);
}
.hero-card-cta:hover {
background: var(--red-dark);
color: #fff;
}
/* ════════════════════════════════════════════════════════════════
2. HERO SAVINGS CARD — estimated annual savings card
════════════════════════════════════════════════════════════════ */
.hero-savings-card {
background: rgba(244, 8, 8, 0.08);
border: 1px solid rgba(244, 8, 8, 0.2);
border-radius: 10px;
padding: 18px 20px;
}
.hero-savings-label {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
font-family: var(--font-ui);
font-weight: 700;
margin-bottom: 4px;
}
.hero-savings-num {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 900;
color: #fff;
line-height: 1;
}
.hero-savings-desc {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════
3. FEAT-CARD inside .tech-section (navy background)
On homepage the tech-section is navy. Feat-cards need navy-glass
style there (NOT the gray-light default used on white pages).
════════════════════════════════════════════════════════════════ */
.tech-section .feat-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
border-left: 3px solid var(--red);
border-radius: 8px;
padding: 20px 22px;
display: flex;
align-items: flex-start;
gap: 14px;
transition: background 0.25s, transform 0.25s;
}
.tech-section .feat-card:hover {
background: rgba(255, 255, 255, 0.10);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.tech-section .feat-card > i {
font-size: 22px;
color: var(--red);
flex-shrink: 0;
margin-top: 3px;
margin-bottom: 0;
width: 26px;
display: block;
}
.tech-section .feat-card:hover i {
color: var(--red);
}
.tech-section .feat-card h3 {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
font-family: var(--font-ui);
}
.tech-section .feat-card p {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.65;
margin: 0;
}
.tech-section .feat-card > p:empty {
display: none;
}
.tech-section .feat-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Tech section two-column layout */
.tech-section .grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* ════════════════════════════════════════════════════════════════
4. GLOBAL — ALL CTA BUTTONS = WHITE TEXT
Every red or navy button must always show white text.
════════════════════════════════════════════════════════════════ */
/* btn-outline-dark: used on dark sections — fix base text to white */
.btn-outline-dark {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline-dark:hover {
color: #fff;
}
/* All red buttons */
.btn-red, a.btn-red, button.btn-red,
.btn.btn-red { color: #fff; }
.btn-red:hover, a.btn-red:hover { color: #fff; }
/* All navy buttons */
.btn-navy, a.btn-navy, button.btn-navy,
.btn.btn-navy { color: #fff; }
.btn-navy:hover { color: #fff; }
/* Plan CTA buttons — always white */
.plan-cta, a.plan-cta, button.plan-cta { color: #fff; }
.plan-cta:hover { color: #fff; }
.plan-card.featured .plan-cta { color: #fff; }
.plan-card.featured .plan-cta:hover { color: #fff; }
/* Hero card CTA */
.hero-card-cta { color: #fff; }
.hero-card-cta:hover { color: #fff; }
/* Form submit buttons */
.form-submit, button.form-submit { color: #fff; }
/* Any anchor inside a red/navy container */
.cta-band a.btn, .cta-band button { color: #fff; }
/* ════════════════════════════════════════════════════════════════
5. MISSION SECTION — phone number as red CTA button
════════════════════════════════════════════════════════════════ */
.mission-section a[href*="tel"],
.mission-section .s-call,
.mission-section .call-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--red);
color: #fff;
padding: 13px 26px;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
margin-top: 18px;
transition: background 0.2s, transform 0.2s;
font-family: var(--font-ui);
border: none;
}
.mission-section a[href*="tel"]:hover,
.mission-section .call-cta:hover {
background: var(--red-dark);
color: #fff;
transform: translateY(-1px);
}
/* ════════════════════════════════════════════════════════════════
6. CONTENT-SECTION INNER PAGES — white bg, fully readable
Covers /why-four-point-realty/, /technology/, all inner pages.
Dark-bg sub-sections inside get white text override.
════════════════════════════════════════════════════════════════ */
.content-section {
background: #ffffff;
color: var(--charcoal);
}
.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4,
.content-section h5 {
color: var(--navy);
}
.content-section p,
.content-section li,
.content-section td,
.content-section th {
color: var(--gray-mid);
}
.content-section strong,
.content-section b { color: var(--navy); }
.content-section a:not(.btn) { color: var(--red); }
.content-section .eyebrow-text { color: var(--red); }
/* Dark-background sections inside content-section keep white text */
.content-section section.hero *,
.content-section .tech-section *,
.content-section .why-section *,
.content-section .mission-section *,
.content-section .team-section *,
.content-section .testi-section *,
.content-section .cta-band *,
.content-section .apply-form-section * {
color: inherit;
}
/* Apply form inside any content-section */
.content-section .apply-form-section {
background: var(--navy);
}
.content-section .form-section-title { color: #fff; }
.content-section .form-section-sub { color: rgba(255, 255, 255, 0.7); }
.content-section .form-label { color: rgba(255, 255, 255, 0.92); }
.content-section .contract-notice {
color: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 24px;
}
.content-section .contract-notice strong { color: #fff; }
/* ════════════════════════════════════════════════════════════════
7. DOUBLE PAGE-HERO — hide theme title bar on inner pages
that already have a hero inside the page content
════════════════════════════════════════════════════════════════ */
body.page-id-93 .page-hero,
body.page-id-95 .page-hero,
body.page-id-100 .page-hero,
body.page-id-98 .page-hero,
body.page-id-5 .page-hero,
body.page-id-123 .page-hero,
body.page-id-125 .page-hero,
body.page-id-127 .page-hero,
body.page-id-129 .page-hero {
display: none;
}
/* ════════════════════════════════════════════════════════════════
8. FEATURED PLAN CARD — stays elevated above other cards
════════════════════════════════════════════════════════════════ */
.plan-card.featured {
transform: translateY(-16px);
box-shadow: 0 24px 60px rgba(15, 31, 61, 0.18), 0 0 0 1px rgba(244, 8, 8, 0.15);
z-index: 2;
position: relative;
}
.plan-card.featured:hover {
transform: translateY(-22px);
}
.plans-grid {
padding-top: 28px;
}
/* ════════════════════════════════════════════════════════════════
9. STATE CARDS — consistent pin icon across NJ / NY / GA
════════════════════════════════════════════════════════════════ */
/* Hide hard-coded NJ icon (replaced by CSS ::before on all cards) */
.states-grid .state-card > br,
.states-grid .state-card > i.fa,
.states-grid .state-card > i.fas,
.states-grid .state-card > i.far {
display: none;
}
.states-grid .state-card::before {
content: '\f3c5';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 28px;
color: var(--red);
display: block;
margin-bottom: 12px;
text-align: center;
}
/* Hide orphan
tags WordPress injects between state cards */
.states-grid > p {
display: none;
}
/* Hide state-cards not directly inside .states-grid */
.state-card:not(.states-grid > .state-card) {
display: none;
}
/* ════════════════════════════════════════════════════════════════
10. FORM LAYOUT — 2-column side-by-side fields
════════════════════════════════════════════════════════════════ */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
align-items: start;
}
.form-row > p:empty,
.form-row > br,
.form-group > p:empty,
.form-group > br {
display: none;
}
.form-group { width: 100%; min-width: 0; }
.form-label {
color: rgba(255, 255, 255, 0.92);
font-size: 12.5px;
font-weight: 600;
display: block;
margin-bottom: 5px;
}
/* ════════════════════════════════════════════════════════════════
11. RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.tech-section .grid-2 { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
.plan-card.featured { transform: translateY(-8px); }
.plans-grid { padding-top: 16px; }
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.plan-card.featured { transform: none; }
.plans-grid { padding-top: 0; }
}
/* ================================================================
FPR ADDITIONS — June 2026
Paste at the VERY BOTTOM of:
public_html/wp-content/themes/fourpoint-realty/css/global.css
Then: WP Admin → LiteSpeed Cache → Purge All
================================================================ */
/* ════════════════════════════════════════════════════════════════
1. DOUBLE HEADER FIX
Problem: page.php outputs a thin .page-hero (breadcrumb bar)
as a direct child of . The page CONTENT also has its own
richer .page-hero inside .page-content-wrap. This creates two
headers on pages that have their own full hero.
Fix: hide ONLY the outer thin bar (main > .page-hero) on pages
confirmed to have a rich inner hero. Targeted by page ID.
Pages WITHOUT their own hero keep the outer bar (correct).
════════════════════════════════════════════════════════════════ */
/* Pages confirmed to have double header (inner hero exists) */
body.page-id-117 main > .page-hero, /* Commission Plans Residential */
body.page-id-119 main > .page-hero, /* Commission Plans Commercial */
body.page-id-121 main > .page-hero, /* Commission Calculator */
body.page-id-93 main > .page-hero, /* Why Four Point Realty */
body.page-id-95 main > .page-hero, /* Agent Benefits */
body.page-id-100 main > .page-hero, /* Technology and AI */
body.page-id-131 main > .page-hero, /* FAQ */
body.page-id-147 main > .page-hero, /* Contact Us */
body.page-id-141 main > .page-hero, /* Our Story */
body.page-id-143 main > .page-hero, /* Mission and Vision */
body.page-id-145 main > .page-hero, /* States We Serve */
body.page-id-113 main > .page-hero, /* Commercial RE Careers */
body.page-id-149 main > .page-hero, /* Schedule a Call */
body.page-id-98 main > .page-hero, /* Work From Anywhere */
body.page-id-5 main > .page-hero, /* Training & Mentorship */
body.page-id-123 main > .page-hero, /* Join by State */
body.page-id-125 main > .page-hero, /* NJ Careers */
body.page-id-127 main > .page-hero, /* NY Careers */
body.page-id-129 main > .page-hero /* GA Careers */
{
display: none !important;
}
/* The inner .page-hero (inside .page-content-wrap) always shows */
.page-content-wrap .page-hero {
display: block !important;
}
/* ════════════════════════════════════════════════════════════════
2. JOIN-BY-STATE PAGE — Fix invisible text on dark background
Body is navy (#0F1F3D). The state-selector-section and
apply-form-section inherit the body bg. Text was dark on dark.
════════════════════════════════════════════════════════════════ */
/* State selector section */
.state-selector-section {
background: var(--navy, #0F1F3D);
padding: 60px 0;
color: #fff;
}
.state-selector-section h2,
.state-selector-section .sec-title {
color: #fff;
}
.state-selector-section p,
.state-selector-section .sec-sub {
color: rgba(255,255,255,0.75);
}
.state-selector-section .eyebrow-text {
color: var(--red, #F40808);
}
/* State card links (NJ/NY/GA selector cards) */
.state-selector-section .state-entry {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 24px;
transition: all 0.25s;
color: #fff;
}
.state-selector-section .state-entry:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(244,8,8,0.35);
transform: translateY(-3px);
}
.state-selector-section .state-entry h3,
.state-selector-section .state-title {
color: #fff;
}
.state-selector-section .state-entry p,
.state-selector-section .state-desc {
color: rgba(255,255,255,0.7);
}
.state-selector-section a,
.state-selector-section .state-link {
color: var(--red, #F40808);
}
/* Apply form section */
.apply-form-section {
background: var(--navy, #0F1F3D);
padding: 72px 0;
}
.apply-form-section .form-section-title,
.apply-form-section h2 {
color: #fff;
}
.apply-form-section .form-section-sub,
.apply-form-section p:not(.form-error) {
color: rgba(255,255,255,0.75);
}
.apply-form-section .form-label {
color: rgba(255,255,255,0.92);
}
.apply-form-section .eyebrow-text {
color: var(--red, #F40808);
}
.apply-form-section .form-step {
color: rgba(255,255,255,0.5);
border-color: rgba(255,255,255,0.15);
}
.apply-form-section .contract-notice {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 13px;
color: rgba(255,255,255,0.75);
}
.apply-form-section .contract-notice strong {
color: #fff;
}
/* Form inputs on dark sections */
.apply-form-section .form-input,
.apply-form-section .form-select,
.apply-form-section .form-textarea {
background: rgba(255,255,255,0.97);
color: #1E293B;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: 6px;
padding: 11px 14px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.apply-form-section .form-input:focus,
.apply-form-section .form-select:focus,
.apply-form-section .form-textarea:focus {
border-color: var(--red, #F40808);
box-shadow: 0 0 0 3px rgba(244,8,8,0.15);
outline: none;
}
.apply-form-section .form-error {
color: #fca5a5;
font-size: 12px;
margin-top: 3px;
}
.apply-form-section .form-submit {
width: 100%;
padding: 14px;
background: var(--red, #F40808);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
margin-top: 8px;
}
.apply-form-section .form-submit:hover {
background: var(--red-dark, #C00000);
}
.apply-form-section .sms-consent-wrap,
.apply-form-section label[for*="consent"],
.apply-form-section label[for*="sms"] {
color: rgba(255,255,255,0.6);
font-size: 12px;
line-height: 1.6;
}
/* Form 2-column side-by-side layout */
.apply-form-section .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
align-items: start;
}
.apply-form-section .form-row > p:empty,
.apply-form-section .form-row > br,
.apply-form-section .form-group > p:empty,
.apply-form-section .form-group > br {
display: none;
}
.apply-form-section .form-group { width: 100%; min-width: 0; }
/* ════════════════════════════════════════════════════════════════
3. APPLY NOW / JOIN NOW BUTTONS — all point to join-by-state
The href is controlled in HTML/JS, not CSS.
CSS ensures they look correct: red bg, white text, readable.
════════════════════════════════════════════════════════════════ */
.btn-red, a.btn-red, button.btn-red {
background: var(--red, #F40808);
color: #fff;
border: none;
}
.btn-red:hover, a.btn-red:hover {
background: var(--red-dark, #C00000);
color: #fff;
}
.btn-navy, a.btn-navy, button.btn-navy {
background: var(--navy, #0F1F3D);
color: #fff;
}
.btn-navy:hover { color: #fff; }
.plan-cta, a.plan-cta { color: #fff; }
.plan-cta:hover { color: #fff; }
.plan-card.featured .plan-cta { color: #fff; }
.hero-card-cta { color: #fff; }
.hero-card-cta:hover { color: #fff; }
.btn-outline-dark { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-dark:hover { color: #fff; }
.form-submit { color: #fff; }
.s-apply, a.s-apply { color: #fff; }
/* ════════════════════════════════════════════════════════════════
4. HERO CARD — restored (was removed in CSS rebuild)
════════════════════════════════════════════════════════════════ */
.hero-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 22px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.25s;
}
.hero-card:hover { background: rgba(255,255,255,0.10); }
.hero-card-label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 14px;
font-family: var(--font-ui, 'Montserrat', sans-serif);
font-weight: 700;
}
.hero-card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hero-card-row:last-of-type { border-bottom: none; }
.hero-card-plan {
font-size: 12px;
color: rgba(255,255,255,0.5);
font-family: var(--font-ui, 'Montserrat', sans-serif);
}
.hero-card-split {
font-family: var(--font-heading, 'Playfair Display', serif);
font-size: 20px;
font-weight: 900;
color: var(--red, #F40808);
line-height: 1;
}
.hero-card-cta {
display: block;
text-align: center;
background: var(--red, #F40808);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 12px;
border-radius: 4px;
margin-top: 16px;
text-decoration: none;
font-family: var(--font-ui, 'Montserrat', sans-serif);
transition: background 0.2s;
}
.hero-card-cta:hover { background: var(--red-dark, #C00000); color: #fff; }
.hero-savings-card {
background: rgba(244,8,8,0.08);
border: 1px solid rgba(244,8,8,0.2);
border-radius: 10px;
padding: 18px 20px;
}
.hero-savings-label {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
font-family: var(--font-ui, 'Montserrat', sans-serif);
font-weight: 700;
margin-bottom: 4px;
}
.hero-savings-num {
font-family: var(--font-heading, 'Playfair Display', serif);
font-size: 32px;
font-weight: 900;
color: #fff;
line-height: 1;
}
.hero-savings-desc {
font-size: 11px;
color: rgba(255,255,255,0.45);
margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════
5. TECH SECTION FEAT-CARDS — navy glass (not gray-light)
════════════════════════════════════════════════════════════════ */
.tech-section .feat-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-left: 3px solid var(--red, #F40808);
border-radius: 8px;
padding: 20px 22px;
display: flex;
align-items: flex-start;
gap: 14px;
transition: background 0.25s, transform 0.25s;
}
.tech-section .feat-card:hover {
background: rgba(255,255,255,0.10);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.tech-section .feat-card > i {
font-size: 22px;
color: var(--red, #F40808);
flex-shrink: 0;
margin-top: 3px;
margin-bottom: 0;
width: 26px;
display: block;
}
.tech-section .feat-card:hover i { color: var(--red, #F40808); }
.tech-section .feat-card h3 {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
}
.tech-section .feat-card p {
font-size: 13px;
color: rgba(255,255,255,0.65);
line-height: 1.65;
margin: 0;
}
.tech-section .feat-card > p:empty { display: none; }
.tech-section .feat-cards { display: flex; flex-direction: column; gap: 12px; }
.tech-section .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* ════════════════════════════════════════════════════════════════
6. MISSION SECTION — phone as red CTA button
════════════════════════════════════════════════════════════════ */
.mission-section a[href*="tel"],
.mission-section .call-cta,
.mission-section .s-call {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--red, #F40808);
color: #fff;
padding: 13px 26px;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
margin-top: 16px;
transition: background 0.2s, transform 0.2s;
}
.mission-section a[href*="tel"]:hover { background: var(--red-dark, #C00000); color: #fff; transform: translateY(-1px); }
/* ════════════════════════════════════════════════════════════════
7. CONTENT-SECTION (inner pages) — white bg, dark text
════════════════════════════════════════════════════════════════ */
.content-section {
background: #fff;
color: var(--charcoal, #1C1C1C);
}
.content-section h1, .content-section h2,
.content-section h3, .content-section h4 { color: var(--navy, #0F1F3D); }
.content-section p, .content-section li { color: var(--gray-mid, #666262); }
.content-section .eyebrow-text { color: var(--red, #F40808); }
.content-section a:not(.btn) { color: var(--red, #F40808); }
/* Dark-bg sub-sections inside content-section keep their own colors */
.content-section .tech-section h2, .content-section .tech-section p,
.content-section section.hero h1, .content-section section.hero p,
.content-section .cta-band *, .content-section .apply-form-section * { color: inherit; }
/* ════════════════════════════════════════════════════════════════
8. FEATURED PLAN CARD — stays elevated
════════════════════════════════════════════════════════════════ */
.plan-card.featured {
border-top: 4px solid var(--red, #F40808);
transform: translateY(-16px);
box-shadow: 0 24px 60px rgba(15,31,61,0.18), 0 0 0 1px rgba(244,8,8,0.15);
z-index: 2;
position: relative;
}
.plan-card.featured:hover { transform: translateY(-22px); }
.plans-grid { padding-top: 28px; }
/* ════════════════════════════════════════════════════════════════
9. STATE CARDS — equal icons NJ / NY / GA
════════════════════════════════════════════════════════════════ */
.states-grid .state-card > br,
.states-grid .state-card > i.fa,
.states-grid .state-card > i.fas { display: none; }
.states-grid .state-card::before {
content: '\f3c5';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 28px;
color: var(--red, #F40808);
display: block;
margin-bottom: 12px;
text-align: center;
}
.states-grid > p { display: none; }
.state-card:not(.states-grid > .state-card) { display: none; }
/* ════════════════════════════════════════════════════════════════
10. RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.tech-section .grid-2 { grid-template-columns: 1fr; gap: 28px; }
.apply-form-section .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.plan-card.featured { transform: translateY(-8px); }
.plans-grid { padding-top: 16px; }
.benefits-bar-inner { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 480px) {
.plan-card.featured { transform: none; }
.plans-grid { padding-top: 0; }
.apply-form-section .form-row { grid-template-columns: 1fr; }
}
/* ================================================================
FPR FINAL FIX — June 2026
Paste at VERY BOTTOM of global.css
public_html/wp-content/themes/fourpoint-realty/css/global.css
Then: WP Admin → LiteSpeed Cache → Purge All
================================================================ */
/* ════════════════════════════════════════════════════════════════
1. DOUBLE HEADER — Complete list of ALL pages
Hides main > .page-hero (outer thin bar) when the page already
has a richer .page-content-wrap .page-hero (inner hero).
Pages without their own inner hero keep the outer bar.
════════════════════════════════════════════════════════════════ */
body.page-id-93 main > .page-hero, /* Why Four Point Realty */
body.page-id-95 main > .page-hero, /* Agent Benefits */
body.page-id-100 main > .page-hero, /* Technology and AI */
body.page-id-98 main > .page-hero, /* Work From Anywhere */
body.page-id-5 main > .page-hero, /* Training & Mentorship */
body.page-id-107 main > .page-hero, /* Join as an Agent */
body.page-id-109 main > .page-hero, /* Join as a Team */
body.page-id-111 main > .page-hero, /* Join as a Broker */
body.page-id-104 main > .page-hero, /* Property Management */
body.page-id-113 main > .page-hero, /* Commercial RE Careers */
body.page-id-115 main > .page-hero, /* Transfer Your License */
body.page-id-117 main > .page-hero, /* Commission Plans Resid. */
body.page-id-119 main > .page-hero, /* Commission Plans Comm. */
body.page-id-121 main > .page-hero, /* Commission Calculator */
body.page-id-123 main > .page-hero, /* Join by State */
body.page-id-125 main > .page-hero, /* NJ Careers */
body.page-id-127 main > .page-hero, /* NY Careers */
body.page-id-129 main > .page-hero, /* GA Careers */
body.page-id-131 main > .page-hero, /* FAQ */
body.page-id-133 main > .page-hero, /* Training Center */
body.page-id-135 main > .page-hero, /* Agent Success Guides */
body.page-id-137 main > .page-hero, /* Download Center */
body.page-id-139 main > .page-hero, /* Webinar Registration */
body.page-id-141 main > .page-hero, /* Our Story */
body.page-id-143 main > .page-hero, /* Mission and Vision */
body.page-id-145 main > .page-hero, /* States We Serve */
body.page-id-147 main > .page-hero, /* Contact Us */
body.page-id-149 main > .page-hero /* Schedule a Call */
{ display: none !important; }
/* Inner page-hero (inside .page-content-wrap) always displays */
.page-content-wrap .page-hero { display: block !important; }
/* ════════════════════════════════════════════════════════════════
2. BENEFIT-LIST-ITEM — icon + text layout for inner pages
Used on: /why-four-point-realty/, /agent-benefits/
Structure: .benefit-list > .benefit-list-item > i + .benefit-list-item-text
════════════════════════════════════════════════════════════════ */
.benefit-list {
display: flex;
flex-direction: column;
gap: 0;
margin: 24px 0;
}
.benefit-list-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid rgba(15,31,61,0.08);
transition: transform 0.2s;
}
.benefit-list-item:last-child { border-bottom: none; }
.benefit-list-item:hover { transform: translateX(4px); }
/* Empty tags WordPress injects */
.benefit-list-item > p:empty { display: none; }
/* Icon circle */
.benefit-list-item > i,
.benefit-list-item > .benefit-icon {
width: 48px;
height: 48px;
min-width: 48px;
background: rgba(244,8,8,0.08);
border: 1px solid rgba(244,8,8,0.18);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--red);
flex-shrink: 0;
transition: background 0.2s;
}
.benefit-list-item:hover > i { background: rgba(244,8,8,0.14); }
/* Text block */
.benefit-list-item-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 2px;
}
.benefit-list-item-text strong {
font-size: 14px;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
display: block;
}
.benefit-list-item-text span {
font-size: 13px;
color: var(--gray-mid);
line-height: 1.65;
}
/* Reveal animations for benefit items */
.benefit-list-item.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.benefit-list-item.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.benefit-list-item.reveal:hover { transform: translateX(4px); }
/* Stagger delays */
.benefit-list-item.delay-1 { transition-delay: 0.05s; }
.benefit-list-item.delay-2 { transition-delay: 0.12s; }
.benefit-list-item.delay-3 { transition-delay: 0.19s; }
.benefit-list-item.delay-4 { transition-delay: 0.26s; }
.benefit-list-item.delay-5 { transition-delay: 0.33s; }
.benefit-list-item.delay-6 { transition-delay: 0.40s; }
/* ════════════════════════════════════════════════════════════════
3. CONTENT SECTION GRID — inner pages layout
.content-section > .container > .grid-2 (left/right two-column)
On white background: ensure dark text everywhere
════════════════════════════════════════════════════════════════ */
.content-section { background: #fff; color: var(--charcoal); }
.content-section h1, .content-section h2,
.content-section h3, .content-section h4 { color: var(--navy); }
.content-section p, .content-section li { color: var(--gray-mid); }
.content-section strong, .content-section b { color: var(--navy); }
.content-section .eyebrow-text { color: var(--red); }
.content-section a:not(.btn) { color: var(--red); }
/* Ensure grid-2 inside content-section works properly */
.content-section .grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.content-section .container { padding: 72px 36px; }
/* Fix dark-bg sub-sections inside white content-section */
.content-section .apply-form-section,
.content-section .apply-form-section * { color: inherit; }
/* ════════════════════════════════════════════════════════════════
4. MEGA MENU — Fix layout + add featured panel
The WordPress nav outputs items as
inside ONE which
sits in one cell of the 3-col grid. We need the items to be
visually organized as a 3-column layout.
Fix: make the inside .mega-menu-grid display as a grid,
and add a featured promotional panel via ::after on the header.
════════════════════════════════════════════════════════════════ */
/* Widen the mega menu to fit more content */
.mega-menu {
width: 760px;
}
/* ── Mega menu grid — .mega-menu-item divs in 3 columns ── */
/* Walker outputs: .mega-menu-grid > .mega-menu-item > a > icon + text */
.mega-menu-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
}
.mega-menu-item {
margin: 0;
padding: 0;
}
.mega-menu-item a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: rgba(255,255,255,0.85);
font-size: 12px;
font-family: var(--font-ui);
font-weight: 500;
transition: background 0.2s, color 0.2s;
}
.mega-menu-item a:hover {
background: rgba(255,255,255,0.07);
color: #fff;
}
.mega-item-icon {
width: 32px; height: 32px; min-width: 32px;
background: rgba(244,8,8,0.12);
border: 1px solid rgba(244,8,8,0.2);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background 0.2s;
}
.mega-menu-item a:hover .mega-item-icon { background: rgba(244,8,8,0.2); }
.mega-item-icon i { color: var(--red); font-size: 12px; }
.mega-item-text strong {
display: block; font-size: 12px; font-weight: 600; color: #fff;
font-family: var(--font-ui); margin-bottom: 2px; line-height: 1.3;
}
.mega-item-text span {
font-size: 10.5px; color: var(--platinum); line-height: 1.4; opacity: 0.7; display: block;
}
/* ── Mega menu header label ── */
.mega-menu-header {
font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--red); font-family: var(--font-ui); font-weight: 700;
margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--navy-border);
}
/* ── Featured CTA panel (added by nav-walker.php below the grid) ── */
.mega-menu-featured {
margin-top: 18px;
padding: 16px 18px;
background: rgba(244,8,8,0.08);
border: 1px solid rgba(244,8,8,0.18);
border-radius: 8px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.mega-featured-tag {
font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--red); font-family: var(--font-ui); font-weight: 700;
margin-bottom: 2px;
}
.mega-featured-title {
font-size: 14px; font-weight: 700; color: #fff;
font-family: var(--font-ui); margin-bottom: 3px; line-height: 1.2;
}
.mega-featured-desc {
font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.55; flex: 1; min-width: 200px;
}
.mega-featured-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--red); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 10px 18px; border-radius: 4px; text-decoration: none;
white-space: nowrap; transition: background 0.2s;
font-family: var(--font-ui); flex-shrink: 0;
}
.mega-featured-cta:hover { background: var(--red-dark); color: #fff; }
/* ════════════════════════════════════════════════════════════════
5. HERO CARD — restored (removed in CSS rebuild)
════════════════════════════════════════════════════════════════ */
.hero-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
padding: 22px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.25s;
}
.hero-card:hover { background: rgba(255,255,255,0.10); }
.hero-card-label {
font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255,255,255,0.4); margin-bottom: 14px;
font-family: var(--font-ui); font-weight: 700;
}
.hero-card-row {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hero-card-row:last-of-type { border-bottom: none; }
.hero-card-plan { font-size: 12px; color: rgba(255,255,255,0.5); font-family: var(--font-ui); }
.hero-card-split { font-family: var(--font-heading); font-size: 20px; font-weight: 900; color: var(--red); line-height: 1; }
.hero-card-cta {
display: block; text-align: center; background: var(--red); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
padding: 12px; border-radius: 4px; margin-top: 16px; text-decoration: none;
font-family: var(--font-ui); transition: background 0.2s;
}
.hero-card-cta:hover { background: var(--red-dark); color: #fff; }
.hero-savings-card {
background: rgba(244,8,8,0.08); border: 1px solid rgba(244,8,8,0.2);
border-radius: 10px; padding: 18px 20px;
}
.hero-savings-label {
font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.4); font-family: var(--font-ui); font-weight: 700; margin-bottom: 4px;
}
.hero-savings-num { font-family: var(--font-heading); font-size: 32px; font-weight: 900; color: #fff; line-height: 1; }
.hero-savings-desc { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }
/* ════════════════════════════════════════════════════════════════
6. TECH SECTION FEAT-CARDS — navy glass on dark background
════════════════════════════════════════════════════════════════ */
.tech-section .feat-card {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
border-left: 3px solid var(--red); border-radius: 8px; padding: 20px 22px;
display: flex; align-items: flex-start; gap: 14px; transition: background 0.25s, transform 0.25s;
}
.tech-section .feat-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-2px); }
.tech-section .feat-card > i { font-size: 22px; color: var(--red); flex-shrink: 0; margin-top: 3px; margin-bottom: 0; width: 26px; display: block; }
.tech-section .feat-card:hover i { color: var(--red); }
.tech-section .feat-card h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.tech-section .feat-card p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.65; margin: 0; }
.tech-section .feat-card > p:empty { display: none; }
.tech-section .feat-cards { display: flex; flex-direction: column; gap: 12px; }
.tech-section .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* ════════════════════════════════════════════════════════════════
7. GLOBAL BUTTON WHITE TEXT — all red/navy = white
════════════════════════════════════════════════════════════════ */
.btn-red, a.btn-red, button.btn-red { color: #fff; }
.btn-red:hover { color: #fff; }
.btn-navy, a.btn-navy { color: #fff; }
.plan-cta, a.plan-cta { color: #fff; }
.plan-cta:hover { color: #fff; }
.plan-card.featured .plan-cta { color: #fff; }
.hero-card-cta { color: #fff; }
.btn-outline-dark { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-dark:hover { color: #fff; }
.form-submit { color: #fff; }
.mission-section a[href*="tel"] {
display: inline-flex; align-items: center; gap: 8px;
background: var(--red); color: #fff; padding: 13px 26px;
border-radius: 4px; font-size: 14px; font-weight: 700;
text-decoration: none; margin-top: 16px; transition: background 0.2s;
}
.mission-section a[href*="tel"]:hover { background: var(--red-dark); color: #fff; }
/* ════════════════════════════════════════════════════════════════
8. FEATURED PLAN CARD ELEVATION
════════════════════════════════════════════════════════════════ */
.plan-card.featured {
border-top: 4px solid var(--red);
transform: translateY(-16px);
box-shadow: 0 24px 60px rgba(15,31,61,0.18), 0 0 0 1px rgba(244,8,8,0.15);
z-index: 2; position: relative;
}
.plan-card.featured:hover { transform: translateY(-22px); }
.plans-grid { padding-top: 28px; }
/* ════════════════════════════════════════════════════════════════
9. STATE CARDS — consistent icons across NJ/NY/GA
════════════════════════════════════════════════════════════════ */
.states-grid .state-card > br,
.states-grid .state-card > i.fa,
.states-grid .state-card > i.fas { display: none; }
.states-grid .state-card::before {
content: '\f3c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
font-size: 28px; color: var(--red); display: block; margin-bottom: 12px; text-align: center;
}
.states-grid > p { display: none; }
.state-card:not(.states-grid > .state-card) { display: none; }
/* ════════════════════════════════════════════════════════════════
10. APPLY FORM SECTION — dark section, white text
════════════════════════════════════════════════════════════════ */
.apply-form-section { background: var(--navy); padding: 72px 0; }
.apply-form-section .form-section-title,
.apply-form-section h2 { color: #fff; }
.apply-form-section .form-section-sub,
.apply-form-section p:not(.form-error) { color: rgba(255,255,255,0.75); }
.apply-form-section .form-label { color: rgba(255,255,255,0.92); }
.apply-form-section .form-input,
.apply-form-section .form-select,
.apply-form-section .form-textarea {
background: rgba(255,255,255,0.97); color: #1E293B;
border: 1.5px solid rgba(255,255,255,0.2); border-radius: 6px;
padding: 11px 14px; font-size: 14px; width: 100%; box-sizing: border-box;
}
.apply-form-section .form-input:focus,
.apply-form-section .form-select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(244,8,8,0.15); outline: none; }
.apply-form-section .form-error { color: #fca5a5; font-size: 12px; }
.apply-form-section .form-submit { width: 100%; padding: 14px; background: var(--red); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; margin-top: 8px; }
.apply-form-section .form-submit:hover { background: var(--red-dark); }
.apply-form-section .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }
.apply-form-section .form-row > p:empty,
.apply-form-section .form-row > br,
.apply-form-section .form-group > p:empty,
.apply-form-section .form-group > br { display: none; }
.apply-form-section .form-group { width: 100%; min-width: 0; }
.apply-form-section .contract-notice { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: rgba(255,255,255,0.75); }
.apply-form-section .contract-notice strong { color: #fff; }
.apply-form-section .sms-consent-wrap,
.apply-form-section label[for*="consent"],
.apply-form-section label[for*="sms"] { color: rgba(255,255,255,0.6); font-size: 12px; }
/* Join-by-state state-selector-section */
.state-selector-section { background: var(--navy); padding: 60px 0; color: #fff; }
.state-selector-section h2 { color: #fff; }
.state-selector-section p { color: rgba(255,255,255,0.75); }
.state-selector-section .eyebrow-text { color: var(--red); }
/* ════════════════════════════════════════════════════════════════
11. RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.mega-menu { width: 96vw; left: 50%; }
.content-section .grid-2 { grid-template-columns: 1fr; gap: 32px; }
.content-section .container { padding: 48px 24px; }
}
@media (max-width: 900px) {
.mega-menu-grid > ul.nav-dropdown { grid-template-columns: 1fr 1fr; }
.tech-section .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.plan-card.featured { transform: translateY(-8px); }
.plans-grid { padding-top: 16px; }
.mega-menu { width: 94vw; }
.mega-menu-grid > ul.nav-dropdown { grid-template-columns: 1fr; }
.apply-form-section .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.plan-card.featured { transform: none; }
.plans-grid { padding-top: 0; }
.benefit-list-item { gap: 12px; }
.benefit-list-item > i { width: 40px; height: 40px; min-width: 40px; font-size: 15px; }
}
/* ================================================================
FPR DOUBLE HEADER PATCH — Remaining Pages
Paste at the VERY BOTTOM of global.css (after everything else):
public_html/wp-content/themes/fourpoint-realty/css/global.css
Then: WP Admin → LiteSpeed Cache → Purge All
================================================================ */
/*
Pages newly confirmed with double headers.
Hides ONLY the outer thin bar (main > .page-hero).
The inner .page-content-wrap .page-hero always stays visible.
IDs confirmed from live audit:
8 = Residential Real Estate (/residential/)
9 = Commercial Real Estate (/commercial/)
11 = REO Division (/reo/)
113 = Commercial RE Careers (/commercial-real-estate-careers/)
151 = Privacy Policy
153 = Terms of Use
155 = Equal Housing
264 = License Information (newly created)
*/
body.page-id-8 main > .page-hero,
body.page-id-9 main > .page-hero,
body.page-id-11 main > .page-hero,
body.page-id-113 main > .page-hero,
body.page-id-151 main > .page-hero,
body.page-id-153 main > .page-hero,
body.page-id-155 main > .page-hero,
body.page-id-264 main > .page-hero
{ display: none !important; }
/* Guarantee inner hero always shows */
.page-content-wrap .page-hero { display: block !important; }