/* =========================================================
ELITE COLLECTIVE REALTY — Lead Capture Form System
Brand CSS matched to patriciablakemore.com / elitecollectiverealty.com
Colors: Navy #1B2A4A · Gold #C4A35A · Cream #F7F5F0
Fonts: Cormorant Garamond (headings) · Lato (body)
========================================================= */
:root {
--ecr-navy: #1B2A4A;
--ecr-navy-deep: #0F1A2E;
--ecr-navy-mid: #2C4A6E;
--ecr-gold: #C4A35A;
--ecr-gold-light: #D4B876;
--ecr-cream: #F7F5F0;
--ecr-cream-border: #EDE9E0;
--ecr-charcoal: #3A3632;
--ecr-muted: #6B7B8D;
--ecr-white: #FFFFFF;
--ecr-error: #B23A48;
--ecr-font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--ecr-font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--ecr-shadow-soft: 0 8px 40px rgba(27, 42, 74, 0.08);
--ecr-shadow-lift: 0 20px 60px rgba(27, 42, 74, 0.15);
}
/* ---------- Google font preload (add to if not already) ----------
------------------------------------------------------------------------ */
/* ========= FORM SECTION WRAPPER ========= */
.ecr-form-section {
background: var(--ecr-cream);
padding: 100px 0;
font-family: var(--ecr-font-sans);
color: var(--ecr-charcoal);
}
.ecr-form-section.ecr-bg-white { background: var(--ecr-white); }
.ecr-form-section.ecr-bg-navy { background: var(--ecr-navy); color: rgba(255,255,255,0.85); }
.ecr-container {
max-width: 780px;
margin: 0 auto;
padding: 0 24px;
}
.ecr-container.ecr-wide { max-width: 1100px; }
/* ========= HEADINGS ========= */
.ecr-eyebrow {
font-family: var(--ecr-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ecr-gold);
margin: 0 0 18px;
text-align: center;
}
.ecr-form-section.ecr-bg-navy .ecr-eyebrow { color: var(--ecr-gold-light); }
.ecr-headline {
font-family: var(--ecr-font-serif);
font-weight: 300;
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
line-height: 1.1;
color: var(--ecr-navy);
text-align: center;
margin: 0 0 20px;
letter-spacing: -0.01em;
}
.ecr-form-section.ecr-bg-navy .ecr-headline { color: var(--ecr-white); }
.ecr-headline em { font-style: italic; color: var(--ecr-gold); font-weight: 400; }
.ecr-subhead {
font-family: var(--ecr-font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--ecr-muted);
text-align: center;
max-width: 640px;
margin: 0 auto 50px;
}
.ecr-form-section.ecr-bg-navy .ecr-subhead { color: rgba(255,255,255,0.75); }
.ecr-gold-line {
display: block;
width: 60px;
height: 2px;
background: var(--ecr-gold);
margin: 24px auto 32px;
border: 0;
}
/* ========= FORM CARD ========= */
.ecr-form-card {
background: var(--ecr-white);
padding: 56px clamp(24px, 5vw, 64px);
box-shadow: var(--ecr-shadow-soft);
border-top: 3px solid var(--ecr-gold);
}
.ecr-form-section.ecr-bg-navy .ecr-form-card {
background: rgba(255,255,255,0.04);
border-top-color: var(--ecr-gold);
border: 1px solid rgba(196,163,90,0.3);
border-top-width: 3px;
}
/* ========= FORM GRID ========= */
.ecr-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 28px;
}
.ecr-form-grid .ecr-field-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
.ecr-form-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ========= FIELDS ========= */
.ecr-field { display: flex; flex-direction: column; }
.ecr-label {
font-family: var(--ecr-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ecr-navy);
margin-bottom: 10px;
}
.ecr-form-section.ecr-bg-navy .ecr-label { color: rgba(255,255,255,0.85); }
.ecr-label .ecr-required {
color: var(--ecr-gold);
margin-left: 4px;
font-weight: 700;
}
.ecr-input,
.ecr-select,
.ecr-textarea {
width: 100%;
min-height: 48px;
padding: 14px 16px;
font-family: var(--ecr-font-sans);
font-size: 15px;
color: var(--ecr-charcoal);
background: var(--ecr-white);
border: 1px solid var(--ecr-cream-border);
border-radius: 0;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
-webkit-appearance: none;
appearance: none;
}
.ecr-form-section.ecr-bg-navy .ecr-input,
.ecr-form-section.ecr-bg-navy .ecr-select,
.ecr-form-section.ecr-bg-navy .ecr-textarea {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.2);
color: var(--ecr-white);
}
.ecr-input::placeholder,
.ecr-textarea::placeholder { color: #A9A9A9; font-style: italic; }
.ecr-input:focus,
.ecr-select:focus,
.ecr-textarea:focus {
outline: none;
border-color: var(--ecr-gold);
box-shadow: 0 0 0 3px rgba(196,163,90,0.15);
}
.ecr-textarea { min-height: 140px; resize: vertical; font-family: var(--ecr-font-sans); }
.ecr-select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%231B2A4A' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 10px;
padding-right: 40px;
}
/* ========= RADIO / CHECKBOX ========= */
.ecr-radio-group,
.ecr-check-group {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 4px;
}
.ecr-radio,
.ecr-check {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
min-height: 44px;
border: 1px solid var(--ecr-cream-border);
background: var(--ecr-white);
cursor: pointer;
font-size: 14px;
color: var(--ecr-charcoal);
transition: all 0.2s ease;
user-select: none;
}
.ecr-form-section.ecr-bg-navy .ecr-radio,
.ecr-form-section.ecr-bg-navy .ecr-check {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.2);
color: var(--ecr-white);
}
.ecr-radio:hover,
.ecr-check:hover { border-color: var(--ecr-gold); }
.ecr-radio input,
.ecr-check input {
accent-color: var(--ecr-gold);
width: 16px;
height: 16px;
margin: 0;
}
.ecr-radio input:checked + span,
.ecr-check input:checked + span { font-weight: 600; color: var(--ecr-navy); }
.ecr-radio:has(input:checked),
.ecr-check:has(input:checked) {
border-color: var(--ecr-gold);
background: rgba(196,163,90,0.08);
}
/* ========= BUTTON ========= */
.ecr-btn {
display: inline-block;
padding: 18px 48px;
min-height: 56px;
font-family: var(--ecr-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 2.56px;
text-transform: uppercase;
color: var(--ecr-white);
background: var(--ecr-gold);
border: 1px solid var(--ecr-gold);
border-radius: 0;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.ecr-btn:hover {
background: var(--ecr-navy);
border-color: var(--ecr-navy);
color: var(--ecr-white);
transform: translateY(-1px);
}
.ecr-btn-outline {
background: transparent;
color: var(--ecr-navy);
border-color: var(--ecr-navy);
}
.ecr-btn-outline:hover {
background: var(--ecr-navy);
color: var(--ecr-white);
}
.ecr-btn-block { display: block; width: 100%; }
.ecr-form-actions {
margin-top: 40px;
text-align: center;
}
/* ========= HONEYPOT ========= */
.ecr-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* ========= PRIVACY / CONTACT BLOCK ========= */
.ecr-privacy-note {
margin-top: 24px;
font-size: 12px;
color: var(--ecr-muted);
text-align: center;
font-style: italic;
line-height: 1.6;
}
.ecr-contact-block {
margin-top: 50px;
padding: 32px;
background: var(--ecr-navy);
color: var(--ecr-white);
text-align: center;
border-top: 3px solid var(--ecr-gold);
}
.ecr-contact-block .ecr-cb-name {
font-family: var(--ecr-font-serif);
font-size: 26px;
font-weight: 400;
margin: 0 0 4px;
color: var(--ecr-white);
}
.ecr-contact-block .ecr-cb-title {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ecr-gold);
margin: 0 0 16px;
}
.ecr-contact-block .ecr-cb-line {
font-size: 15px;
line-height: 1.8;
color: rgba(255,255,255,0.85);
margin: 0;
}
.ecr-contact-block a { color: var(--ecr-gold-light); text-decoration: none; }
.ecr-contact-block a:hover { color: var(--ecr-white); }
.ecr-contact-block .ecr-cb-legal {
margin-top: 14px;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
/* ========= VALUATION HERO VARIANT (Form 4) ========= */
.ecr-valuation-hero {
background: linear-gradient(135deg, var(--ecr-navy) 0%, var(--ecr-navy-mid) 100%);
color: var(--ecr-white);
padding: 120px 0;
position: relative;
overflow: hidden;
}
.ecr-valuation-hero::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: 4px; background: var(--ecr-gold);
}
.ecr-valuation-hero .ecr-headline,
.ecr-valuation-hero .ecr-subhead,
.ecr-valuation-hero .ecr-eyebrow { color: var(--ecr-white); }
/* ========= STICKY FOOTER BAR (Form 8) ========= */
.ecr-sticky-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--ecr-navy);
color: var(--ecr-white);
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
border-top: 2px solid var(--ecr-gold);
z-index: 9998;
transform: translateY(100%);
transition: transform 0.4s ease;
font-family: var(--ecr-font-sans);
}
.ecr-sticky-bar.visible { transform: translateY(0); }
.ecr-sticky-bar p {
margin: 0;
font-family: var(--ecr-font-serif);
font-size: 20px;
font-weight: 400;
}
.ecr-sticky-bar p em { color: var(--ecr-gold); font-style: italic; }
.ecr-sticky-bar form {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.ecr-sticky-bar input[type="email"] {
min-width: 260px;
padding: 12px 14px;
min-height: 44px;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.08);
color: var(--ecr-white);
font-family: var(--ecr-font-sans);
font-size: 14px;
}
.ecr-sticky-bar input::placeholder { color: rgba(255,255,255,0.55); }
.ecr-sticky-bar .ecr-btn { padding: 12px 28px; min-height: 44px; }
.ecr-sticky-close {
position: absolute;
top: 6px; right: 10px;
background: transparent;
border: 0;
color: rgba(255,255,255,0.6);
font-size: 20px;
cursor: pointer;
line-height: 1;
}
/* ========= EXIT-INTENT MODAL (Form 8) ========= */
.ecr-modal-overlay {
position: fixed; inset: 0;
background: rgba(15,26,46,0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.ecr-modal-overlay.active { display: flex; }
.ecr-modal {
background: var(--ecr-white);
max-width: 560px;
width: 100%;
padding: 56px 48px;
position: relative;
border-top: 4px solid var(--ecr-gold);
box-shadow: var(--ecr-shadow-lift);
font-family: var(--ecr-font-sans);
}
.ecr-modal-close {
position: absolute;
top: 16px; right: 20px;
background: transparent;
border: 0;
font-size: 28px;
color: var(--ecr-muted);
cursor: pointer;
line-height: 1;
}
.ecr-modal h2 {
font-family: var(--ecr-font-serif);
font-size: 36px;
font-weight: 400;
color: var(--ecr-navy);
margin: 0 0 12px;
text-align: center;
}
.ecr-modal p {
color: var(--ecr-muted);
text-align: center;
margin: 0 0 28px;
font-size: 15px;
line-height: 1.6;
}
/* ========= SHOWING REQUEST BUTTON (Form 5) ========= */
.ecr-showing-btn {
display: inline-block;
margin-top: 16px;
padding: 12px 28px;
font-family: var(--ecr-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ecr-navy);
background: transparent;
border: 1px solid var(--ecr-gold);
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.ecr-showing-btn:hover {
background: var(--ecr-gold);
color: var(--ecr-white);
}
/* ========= MARKET REPORT LANDING PAGE (Form 8) ========= */
.ecr-landing {
min-height: 100vh;
background: linear-gradient(135deg, var(--ecr-navy-deep) 0%, var(--ecr-navy) 50%, var(--ecr-navy-mid) 100%);
color: var(--ecr-white);
display: flex;
align-items: center;
padding: 60px 24px;
font-family: var(--ecr-font-sans);
}
.ecr-landing-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 900px) {
.ecr-landing-inner { grid-template-columns: 1fr; gap: 40px; }
}
.ecr-landing-copy h1 {
font-family: var(--ecr-font-serif);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
line-height: 1.1;
margin: 20px 0;
color: var(--ecr-white);
}
.ecr-landing-copy h1 em { color: var(--ecr-gold); font-style: italic; }
.ecr-landing-copy ul {
list-style: none;
padding: 0;
margin: 30px 0;
}
.ecr-landing-copy ul li {
padding: 12px 0 12px 32px;
position: relative;
font-size: 16px;
color: rgba(255,255,255,0.85);
line-height: 1.6;
}
.ecr-landing-copy ul li::before {
content: "◆";
color: var(--ecr-gold);
position: absolute;
left: 0; top: 12px;
font-size: 12px;
}
/* ========= RESPONSIVE ========= */
@media (max-width: 640px) {
.ecr-form-section { padding: 60px 0; }
.ecr-form-card { padding: 36px 20px; }
.ecr-headline { font-size: 2rem; }
.ecr-modal { padding: 40px 24px; }
.ecr-modal h2 { font-size: 28px; }
.ecr-sticky-bar p { display: none; }
}
/* ========= ACCESSIBILITY: 44px minimum tap targets already set ========= */
/* All .ecr-input, .ecr-select, .ecr-textarea, .ecr-radio, .ecr-check, .ecr-btn ≥ 44px */