/* ============================================================ SELF-HOSTED FONTS (r11) — eliminates third-party FOUT/CLS ============================================================ */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/fraunces-var.woff2') format('woff2-variations'), url('/assets/fonts/fraunces-var.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inter-var.woff2') format('woff2-variations'), url('/assets/fonts/inter-var.woff2') format('woff2'); } /* Metric-matched fallback to eliminate CLS during font swap */ @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 105%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ============================================================ VA FLORIDA LOAN — EDITORIAL DESIGN SYSTEM v1 Global override that re-themes existing components without rewriting any markup. Loaded LAST in so it wins cascade. Palette: navy #0E1A2F · cream #F7F4ED · bronze #A8814A Type: Fraunces (display) + Inter (UI/body) ============================================================ */ :root, html { --navy: #0E1A2F !important; --navy-dark: #0A1426 !important; --navy-light: #1B2A47 !important; --gold: #A8814A !important; --gold-dark: #8B6837 !important; --gold-light: #C29B65 !important; --gold-bg: #FBF7EF !important; --bg: #F7F4ED !important; --paper: #FFFFFF !important; --cream: #F7F4ED !important; --bronze: #A8814A !important; --bronze-dark: #8B6837 !important; --ink: #0E1A2F !important; --ink-2: #3B4252 !important; --ink-3: #5A6273 !important; --line: #E6E1D6 !important; --surface: #FFFFFF !important; --text-muted: #3B4252 !important; --text-faint: #5A6273 !important; --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --shadow-lg: 0 30px 80px -40px rgba(14,26,47,0.22); } /* ---------- BASE TYPE ---------- */ html, body { background: #F7F4ED !important; color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, .city-hero__title, .section-title, .hero h1, .hero h2, .cta-banner__title, .testimonial__quote { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: #0E1A2F !important; } h1 { font-size: clamp(38px, 5vw, 64px) !important; } h2 { font-size: clamp(30px, 3.8vw, 48px) !important; } h3 { font-size: clamp(22px, 2.4vw, 28px) !important; } p, li, td, .body-text, .body-text p { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif !important; } em, .city-hero__title em, .section-title em { font-style: italic !important; color: #A8814A !important; font-weight: 500 !important; } a { color: inherit; } /* ---------- HEADER (sticky cream blur) ---------- */ .header, header.header { background: rgba(247, 244, 237, 0.94) !important; backdrop-filter: saturate(140%) blur(8px) !important; -webkit-backdrop-filter: saturate(140%) blur(8px) !important; border-bottom: 1px solid #E6E1D6 !important; color: #0E1A2F !important; box-shadow: none !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } .header__inner { padding: 12px 0 !important; } .header__logo-text { color: #0E1A2F !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -0.01em !important; } .header__logo-text span { color: #5A6273 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } .header__nav a, .nav-dropdown__trigger { color: #3B4252 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; } .header__nav a:hover { color: #A8814A !important; } .header__phone { color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; } /* ---------- BUTTONS (pill, editorial) ---------- */ .btn, .btn--primary, .btn--navy, .btn--apply, .btn--schedule, .btn--outline, .sticky-cta__btn--apply, .header__cta .btn--apply { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; border-radius: 999px !important; letter-spacing: 0 !important; text-transform: none !important; transition: all .18s ease !important; box-shadow: none !important; } .btn--primary, .btn--apply, .btn--schedule, .sticky-cta__btn--apply, .header__cta .btn--apply { background: #A8814A !important; color: #FFFFFF !important; border: 1px solid #A8814A !important; } .btn--primary:hover, .btn--apply:hover, .btn--schedule:hover, .sticky-cta__btn--apply:hover, .header__cta .btn--apply:hover { background: #8B6837 !important; border-color: #8B6837 !important; transform: translateY(-1px) !important; } .btn--navy { background: #0E1A2F !important; color: #F7F4ED !important; border: 1px solid #0E1A2F !important; } .btn--navy:hover { background: #000 !important; border-color: #000 !important; } .btn--outline, .btn--ghost { background: transparent !important; color: #0E1A2F !important; border: 1px solid #0E1A2F !important; } .btn--outline:hover { background: #0E1A2F !important; color: #F7F4ED !important; } .btn--xl { padding: 16px 32px !important; font-size: 15px !important; } /* ---------- TRUST STRIP ---------- */ .trust-strip { background: #FBF7EF !important; color: #3B4252 !important; border-bottom: 1px solid #E6E1D6 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 12.5px !important; } .trust-strip strong { color: #0E1A2F !important; } .trust-strip a { color: #6E4F26 !important; } /* ---------- BREADCRUMB ---------- */ .breadcrumb { background: #F7F4ED !important; border-bottom: 1px solid #E6E1D6 !important; padding: 14px 0 !important; } .breadcrumb__list, .breadcrumb__list li { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 12px !important; color: #5A6273 !important; letter-spacing: 0.04em !important; } .breadcrumb__list a { color: #0E1A2F !important; font-weight: 500 !important; } /* ---------- CITY / PAGE HERO (editorial) ---------- */ .city-hero, .hero { background: #F7F4ED !important; color: #0E1A2F !important; padding: 88px 0 80px !important; border-bottom: 1px solid #E6E1D6 !important; } .city-hero__badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #A8814A !important; background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 22px !important; } .city-hero__badge svg { color: #A8814A !important; } .city-hero__title { font-size: clamp(44px, 6vw, 84px) !important; font-weight: 500 !important; letter-spacing: -0.025em !important; line-height: 1.04 !important; color: #0E1A2F !important; margin: 0 0 24px !important; } .city-hero__title em { font-style: italic !important; color: #A8814A !important; font-weight: 400 !important; } .city-hero__sub { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 18px !important; line-height: 1.6 !important; color: #3B4252 !important; max-width: 640px !important; margin: 0 0 32px !important; } .city-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px !important; } .city-hero__pill { background: #FFFFFF !important; color: #0E1A2F !important; border: 1px solid #E6E1D6 !important; border-radius: 999px !important; padding: 8px 16px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; } .city-hero__pill svg { color: #A8814A !important; } /* ---------- BENEFIT BAR ---------- */ .benefit-bar { background: #0E1A2F !important; color: #F7F4ED !important; padding: 22px 0 !important; border-top: none !important; border-bottom: none !important; } .benefit-bar__inner { display: flex; flex-wrap: wrap; gap: 20px 36px; justify-content: center; } .benefit-bar__item { color: #F7F4ED !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.04em !important; display: inline-flex; align-items: center; gap: 8px; } .benefit-bar__item svg { color: #A8814A !important; } /* ---------- CONTENT SECTIONS ---------- */ .content-section { background: #F7F4ED !important; padding: 88px 0 !important; } .content-section + .content-section { border-top: 1px solid #E6E1D6 !important; } section[style*="background: var(--surface)"], section[style*="background:var(--surface)"] { background: #FFFFFF !important; } .section-label { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; color: #A8814A !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; display: flex; align-items: center; gap: 12px; margin-bottom: 18px !important; } .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: #A8814A !important; } .section-title { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: clamp(32px, 4vw, 54px) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: #0E1A2F !important; margin-bottom: 28px !important; line-height: 1.08 !important; } .body-text, .body-text p { font-family: 'Inter', 'Inter Fallback', sans-serif !important; color: #3B4252 !important; font-size: 16.5px !important; line-height: 1.7 !important; } .body-text strong { color: #0E1A2F !important; } /* ---------- STATS / INFO CARDS ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; } .stat-card { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; padding: 28px 24px !important; box-shadow: none !important; } .stat-card__value { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: 28px !important; font-weight: 500 !important; color: #0E1A2F !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; } .stat-card__label { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #5A6273 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin-top: 8px !important; } .info-card { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; padding: 32px !important; box-shadow: none !important; } .info-card__icon { background: #FBF7EF !important; color: #A8814A !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; } .info-card__title { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: 22px !important; font-weight: 500 !important; color: #0E1A2F !important; } /* ---------- TABLES (BAH, comparison) ---------- */ .bah-table, table.bah-table, .compare-table { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; width: 100%; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } .bah-table th, .compare-table th { background: #0E1A2F !important; color: #F7F4ED !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 16px 20px !important; text-align: left !important; } .bah-table td, .compare-table td { padding: 16px 20px !important; border-bottom: 1px solid #E6E1D6 !important; color: #3B4252 !important; font-size: 14.5px !important; } .bah-table .highlight, .compare-table td.label { color: #0E1A2F !important; font-weight: 600 !important; background: #FBF7EF !important; } /* ---------- NEIGHBORHOOD / LIST CHIPS ---------- */ .neighborhood-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; padding: 0 !important; margin-top: 16px !important; } .neighborhood-list li { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; padding: 8px 16px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .neighborhood-list li::before { content: '' !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: #A8814A !important; color: transparent !important; font-size: 0 !important; } /* ---------- FAQ ---------- */ .faq-item { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; margin-bottom: 12px !important; } .faq-item__q { color: #0E1A2F !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: 17px !important; font-weight: 500 !important; padding: 18px 24px !important; } .faq-item__q svg { color: #A8814A !important; } .faq-item__a { color: #3B4252 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; padding: 0 24px 20px !important; line-height: 1.65 !important; } /* ---------- CTA BANNER (final CTA / inline) — editorial cream ---------- */ section.cta-banner, .cta-banner { background: #FBF7EF !important; color: #0E1A2F !important; padding: 96px 0 !important; border-top: 1px solid #E6E1D6 !important; text-align: center !important; } .cta-banner .section__eyebrow, .cta-banner__eyebrow { color: #6E4F26 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-size: 12px !important; } section.cta-banner h2, .cta-banner__title, .cta-banner h2, section:not(.section--navy).cta-banner h2 { color: #0E1A2F !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 500 !important; font-size: clamp(34px, 4.4vw, 56px) !important; letter-spacing: -0.02em !important; line-height: 1.08 !important; margin: 12px 0 18px !important; } .cta-banner h2 em, .cta-banner__title em { color: #A8814A !important; font-style: italic !important; font-weight: 400 !important; } .cta-banner p, .cta-banner__sub { color: #3B4252 !important; font-size: 17px !important; line-height: 1.6 !important; } .cta-banner .btn-pair { justify-content: center !important; } .cta-banner .btn--navy, .cta-banner .btn--navy.btn--red-lg { background: #0E1A2F !important; color: #F7F4ED !important; border-color: #0E1A2F !important; } .cta-banner .btn--navy:hover { background: #000 !important; border-color: #000 !important; } .cta-banner .btn--primary, .cta-banner .btn--apply, .cta-banner .btn--apply.btn--red-lg { background: #A8814A !important; color: #FFFFFF !important; border-color: #A8814A !important; } .cta-banner a[style*="color:var(--red)"], .cta-banner a[style*="color: var(--red)"] { color: #A8814A !important; } /* ---------- BTN--RED-LG (legacy red button modifier) ---------- */ .btn--red-lg { background: #A8814A !important; color: #FFFFFF !important; border-color: #A8814A !important; } .btn--red-lg:hover { background: #8B6837 !important; border-color: #8B6837 !important; box-shadow: none !important; } .cta-inline { background: #FBF7EF !important; color: #0E1A2F !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; padding: 28px !important; } .cta-inline p, .cta-inline strong { color: #0E1A2F !important; } .cta-inline a:not(.btn) { color: #A8814A !important; text-decoration: underline !important; } .cta-inline .btn, .cta-inline .btn--navy { background: #0E1A2F !important; color: #F7F4ED !important; border-color: #0E1A2F !important; } /* ---------- PROPERTY TYPE / CARD WIDGETS ---------- */ .property-type-card { background: #FFFFFF !important; color: #0E1A2F !important; border: 1px solid #E6E1D6 !important; border-radius: 4px !important; padding: 20px !important; } .property-type-card strong { color: #0E1A2F !important; } .property-type-card span { color: #5A6273 !important; } /* ---------- ARTICLE / BLOG ---------- */ .article-wrap, .article-content, article { font-family: 'Inter', 'Inter Fallback', sans-serif !important; color: #1F2937 !important; font-size: 18px !important; line-height: 1.75 !important; } .article-wrap h1, article h1 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: clamp(36px, 4.4vw, 56px) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.06 !important; color: #0E1A2F !important; margin-bottom: 24px !important; } .article-wrap h2, article h2 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: clamp(26px, 2.8vw, 36px) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; color: #0E1A2F !important; margin: 48px 0 16px !important; } .article-wrap h3, article h3 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: 22px !important; font-weight: 500 !important; color: #0E1A2F !important; margin: 32px 0 12px !important; } .article-wrap p, .article-wrap li, article p, article li { color: #1F2937 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } .article-wrap a, article a { color: #A8814A !important; text-decoration: underline !important; text-decoration-color: rgba(168,129,74,0.4) !important; text-underline-offset: 3px !important; } .article-wrap a:hover, article a:hover { color: #8B6837 !important; text-decoration-color: #8B6837 !important; } .article-wrap blockquote, article blockquote { border-left: 2px solid #A8814A !important; padding-left: 24px !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-style: italic !important; font-size: 22px !important; color: #0E1A2F !important; line-height: 1.5 !important; margin: 32px 0 !important; background: transparent !important; } .article-disclaimer, .article-disclaimer em { color: #5A6273 !important; } /* ---------- FOOTER ---------- */ .footer, footer.footer { background: #0E1A2F !important; color: #A8B0BD !important; padding: 64px 0 32px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 13.5px !important; line-height: 1.65 !important; } .footer h3, .footer h4 { color: #F7F4ED !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; margin: 0 0 14px !important; } .footer__brand-sub { color: #A8814A !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } .footer a { color: #A8B0BD !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } .footer a:hover { color: #F7F4ED !important; } .footer__legal a { color: #C4C9D2 !important; text-decoration: underline !important; } .footer__legal { border-top: 1px solid #1B2A47 !important; margin-top: 36px !important; padding-top: 24px !important; color: #A8B0BD !important; font-size: 11.5px !important; line-height: 1.7 !important; } /* ---------- DARK / NAVY SECTIONS ---------- */ .section--navy, section.section--navy { background: #0E1A2F !important; color: #F7F4ED !important; } .section--navy h1, .section--navy h2, .section--navy h3 { color: #F7F4ED !important; } .section--navy p { color: #C4C9D2 !important; } .section--navy .section-label { color: #A8814A !important; } .section--navy .section-label::before { background: #A8814A !important; } /* ---------- DSCR-tier carry-over (in case shared) ---------- */ .dscr-tier__ratio { color: #A8814A !important; font-weight: 700 !important; } /* ---------- STICKY MOBILE CTA (new) ---------- */ .va-sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: #0E1A2F; border-top: 1px solid #1B2A47; padding: 10px 12px; gap: 8px; box-shadow: 0 -8px 24px rgba(0,0,0,0.25); } .va-sticky-cta a { flex: 1; text-align: center; font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; font-size: 14px; padding: 13px 12px; border-radius: 999px; text-decoration: none; letter-spacing: 0; text-transform: none; } .va-sticky-cta .va-sticky-call { background: transparent; color: #F7F4ED; border: 1px solid #3B4660; } .va-sticky-cta .va-sticky-apply { background: #8B6837; color: #FFFFFF; border: 1px solid #8B6837; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 880px) { .city-hero, .hero { padding: 56px 0 56px !important; } .city-hero__title { font-size: clamp(36px, 9vw, 56px) !important; } .content-section { padding: 56px 0 !important; } .section-title { font-size: clamp(26px, 7vw, 36px) !important; } .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .stat-card { padding: 20px 16px !important; } .benefit-bar__inner { gap: 14px 22px !important; justify-content: flex-start !important; } .header__nav { display: none !important; } .header__inner { padding: 8px 0 !important; } .footer { padding: 48px 0 24px !important; } body { padding-bottom: 72px !important; } .va-sticky-cta { display: flex !important; } .article-wrap, article { font-size: 16.5px !important; } } /* ---------- KILL OLD RED PATRIOTIC ACCENTS ---------- */ [style*="color:#B91C1C"], [style*="color: #B91C1C"], [style*="color:#DC2626"], [style*="color: #DC2626"], [style*="color:#B8742E"], [style*="color: #B8742E"] { color: #A8814A !important; } [style*="background:#B91C1C"], [style*="background: #B91C1C"] { background: #A8814A !important; } /* ---------- LEGACY FLAG / WAVE ELEMENT TONE-DOWN ---------- */ .flag-wave, .va-flag, [class*="flag-"] svg path[fill="#B91C1C"], [class*="flag-"] svg path[fill="#DC2626"] { fill: #A8814A !important; } svg path[fill="#B91C1C"], svg rect[fill="#B91C1C"], svg polygon[fill="#B91C1C"] { fill: #A8814A !important; } /* ---------- BLOG POST HERO (editorial navy) ---------- */ .post-hero { background: #0E1A2F !important; color: #F7F4ED !important; padding: 96px 0 64px !important; border-bottom: 1px solid #1B2A47 !important; position: relative !important; overflow: hidden !important; } .post-hero::before { opacity: 0.15 !important; } .post-hero__inner { max-width: 820px !important; } .post-hero__breadcrumb, .post-hero__breadcrumb a, .post-hero__breadcrumb span { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 12px !important; letter-spacing: 0.04em !important; color: rgba(247,244,237,0.55) !important; } .post-hero__breadcrumb a:hover { color: #A8814A !important; } .post-hero__category { background: transparent !important; border: none !important; color: #A8814A !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 0 !important; margin-bottom: 18px !important; } .post-hero__title { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: clamp(38px, 5.2vw, 64px) !important; font-weight: 500 !important; letter-spacing: -0.025em !important; line-height: 1.06 !important; color: #F7F4ED !important; margin-bottom: 24px !important; } .post-hero__meta, .post-hero__meta-item { font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-size: 13px !important; color: rgba(247,244,237,0.7) !important; letter-spacing: 0 !important; } /* ---------- ARTICLE LEAD PARAGRAPH ---------- */ .article-lead, .article-wrap .article-lead { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-size: clamp(20px, 1.9vw, 24px) !important; font-weight: 400 !important; line-height: 1.5 !important; color: #0E1A2F !important; letter-spacing: -0.01em !important; margin: 0 0 32px !important; } .article-wrap p { font-size: 18px !important; line-height: 1.75 !important; color: #1F2937 !important; } .article-wrap strong { color: #0E1A2F !important; } .article-wrap hr { border: none !important; border-top: 1px solid #E6E1D6 !important; margin: 48px 0 !important; } /* ---------- RELATED ARTICLES (kill red left border / red eyebrow) ---------- */ .related-articles { background: #FBF7EF !important; } .related-card, a.related-card, .related-articles a.related-card { border-left-color: #A8814A !important; border-color: #E6E1D6 !important; border-left: 4px solid #A8814A !important; border-radius: 4px !important; background: #FFFFFF !important; color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; box-shadow: none !important; } .related-card div[style*="color:#B91C1C"], .related-card div[style*="color: #B91C1C"] { color: #A8814A !important; } .related-articles > div > div[style*="background:#B91C1C"], .related-articles div[style*="background:#B91C1C"] { background: #A8814A !important; } /* ---------- AUTHOR EAT (gold top border) ---------- */ .author-eat { background: #FBF7EF !important; border-top: 1px solid #E6E1D6 !important; border-bottom: 1px solid #E6E1D6 !important; padding: 56px 20px !important; } .author-eat h2, .author-eat h3 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; color: #0E1A2F !important; } /* ---------- HOMEPAGE LEGACY HERO QUIZ CARD ---------- */ .quiz-section, #quiz, .quiz-card { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-radius: 6px !important; box-shadow: 0 30px 80px -40px rgba(14,26,47,0.18) !important; } /* ---------- POST-NAV (next/prev cards) ---------- */ .post-nav, .post-nav-card { border-color: #E6E1D6 !important; background: #FFFFFF !important; } .post-nav-card { font-family: 'Inter', 'Inter Fallback', sans-serif !important; color: #0E1A2F !important; } .post-nav-card:hover { border-color: #A8814A !important; } /* ---------- FORCE SECTION HEADINGS SERIF IN LIGHT SECTIONS ---------- */ section:not(.section--navy):not(.cta-banner):not(.benefit-bar):not(.post-hero):not(.hero) h1, section:not(.section--navy):not(.cta-banner):not(.benefit-bar):not(.post-hero):not(.hero) h2, section:not(.section--navy):not(.cta-banner):not(.benefit-bar):not(.post-hero):not(.hero) h3, section:not(.section--navy):not(.cta-banner):not(.benefit-bar):not(.post-hero):not(.hero) h4 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; color: #0E1A2F !important; font-weight: 500 !important; letter-spacing: -0.02em !important; } /* ---------- BLOG-CTA inline red gradient kill (editorial cream block) ---------- */ .blog-cta, section .blog-cta, article .blog-cta { background: #FBF7EF !important; background-image: none !important; border: 1px solid #E6E1D6 !important; border-left: 4px solid #A8814A !important; border-radius: 4px !important; color: #0E1A2F !important; padding: 32px clamp(20px, 4vw, 40px) !important; text-align: left !important; margin: 48px 0 !important; box-shadow: none !important; } .blog-cta h3 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 500 !important; color: #0E1A2F !important; font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important; letter-spacing: -0.01em !important; margin-bottom: 0.5rem !important; } .blog-cta p { color: #3B4252 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; margin-bottom: 1.25rem !important; } .blog-cta p[style*="opacity"] { opacity: 1 !important; color: #5A6273 !important; } .blog-cta a[style*="color:#fca5a5"], .blog-cta a[style*="color: #fca5a5"] { color: #A8814A !important; font-weight: 700 !important; } .blog-cta .btn-group { justify-content: flex-start !important; } .blog-cta .btn--white { background: #0E1A2F !important; color: #FFFFFF !important; border: 1px solid #0E1A2F !important; border-radius: 2px !important; padding: 12px 22px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } .blog-cta .btn--white:hover { background: #000 !important; border-color: #000 !important; } .blog-cta .btn--ghost { background: transparent !important; color: #0E1A2F !important; border: 1px solid #0E1A2F !important; border-radius: 2px !important; padding: 12px 22px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; } .blog-cta .btn--ghost:hover { background: #0E1A2F !important; color: #FFFFFF !important; } /* ---------- GUARANTEE CALLOUT red links kill ---------- */ .guarantee-callout a[style*="color:#fca5a5"], .guarantee-callout a[style*="color: #fca5a5"] { color: #A8814A !important; } /* ---------- POST-NAV-CARD (next/also article cards) ---------- */ .post-nav, .post-nav-card { font-family: 'Inter', 'Inter Fallback', sans-serif !important; } .post-nav-card { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; border-left: 3px solid #A8814A !important; border-radius: 4px !important; padding: 18px 22px !important; } .post-nav-card__label { color: #A8814A !important; font-weight: 700 !important; letter-spacing: 0.08em !important; } .post-nav-card__title { color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } .post-nav-card:hover { border-color: #A8814A !important; } /* ============================================================ MOBILE QA PATCHES — round 2 ============================================================ */ /* 1) APPLY BUTTON FLAG BACKGROUND — kill */ .btn--apply, a.btn--apply, .header__cta .btn--apply, .btn.btn--apply { background: #0E1A2F !important; background-image: none !important; background-color: #0E1A2F !important; color: #FFFFFF !important; border: 1px solid #0E1A2F !important; border-radius: 2px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: none !important; } .btn--apply:hover, a.btn--apply:hover { background: #000 !important; background-image: none !important; border-color: #000 !important; } .btn--apply::before, .btn--apply::after { content: none !important; background: none !important; } /* 2) HEADER LOGO RED SVG RECT — bronze */ .header__logo svg rect[fill="#B91C1C"], .header__logo svg rect[fill="#DC2626"], header svg rect[fill="#B91C1C"] { fill: #A8814A !important; } .header__logo svg rect:not([fill]) { fill: #A8814A !important; } /* 3) AUTHOR-STRIP avatar red bg → bronze */ .author-strip__avatar, .author-strip__avatar[style*="#B91C1C"] { background: #A8814A !important; background-color: #A8814A !important; color: #FFFFFF !important; } /* 4) POST-HERO H1 — force cream on navy (beat the global section h1 navy rule) */ body section.post-hero h1, body section.post-hero h1.post-hero__title, html body .post-hero h1.post-hero__title, html body .post-hero .post-hero__title { color: #F7F4ED !important; } body section.post-hero h1 em, body .post-hero__title em { color: #A8814A !important; font-style: italic !important; font-weight: 500 !important; } /* 5) MOBILE HEADER — hide Schedule button + Phone link on small screens (Apply Now stays, sticky bottom CTA has Call + Schedule paths) */ @media (max-width: 768px) { .header__cta .btn--schedule, .header .header__phone { display: none !important; } .header__cta { gap: 0 !important; } .header__cta .btn--apply { padding: 8px 14px !important; font-size: 13px !important; white-space: nowrap !important; } .header__inner { gap: 8px !important; } .header__logo-text { font-size: 14px !important; line-height: 1.2 !important; } .header__logo-text span { display: none !important; } } /* 6) Duplicate sticky kill — hide our injected sticky if old sticky exists, else show ours */ .has-old-sticky .va-sticky-cta { display: none !important; } /* ============================================================ MOBILE QA PATCHES — round 3 (after stripping flag-wave-cta) ============================================================ */ /* SCHEDULE button — match Apply Now editorial style */ .btn--schedule, a.btn--schedule, .header__cta .btn--schedule, body .header__cta .btn--schedule { background: transparent !important; background-image: none !important; background-color: transparent !important; color: #F7F4ED !important; border: 1px solid rgba(247,244,237,0.4) !important; border-radius: 2px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 500 !important; text-shadow: none !important; box-shadow: none !important; animation: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 8px 14px !important; flex: 0 0 auto !important; } body .header__cta .btn--schedule:hover { background: rgba(247,244,237,0.08) !important; border-color: #A8814A !important; } /* Apply Now — bronze pill */ body .header__cta .btn--apply, body .btn--apply { background: #8B6837 !important; background-image: none !important; background-color: #8B6837 !important; color: #FFFFFF !important; border: 1px solid #8B6837 !important; border-radius: 2px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: none !important; animation: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 8px 14px !important; flex: 0 0 auto !important; letter-spacing: 0.01em !important; } body .header__cta .btn--apply:hover { background: #6E4F26 !important; border-color: #6E4F26 !important; } /* HERO__STAT — make legible on cream hero */ body .hero__stat, .hero__stat { color: #3B4252 !important; opacity: 1 !important; font-weight: 500 !important; } body .hero__stat-icon, .hero__stat-icon { color: #A8814A !important; } /* HERO QUIZ WRAP — kill red border */ .hero__quiz-wrap, body .hero__quiz-wrap { border: 1px solid #E6E1D6 !important; background: #FFFFFF !important; border-radius: 4px !important; box-shadow: 0 8px 32px rgba(14,26,47,0.08) !important; } /* HERO__TRUST — light gray was fine on navy; navy hero is now cream, so darken */ .hero__trust, body .hero__trust { color: #5A6273 !important; } /* HOMEPAGE HERO CHIP "FLORIDA'S VA LOAN SPECIALIST" — kill red */ .hero__chip, .hero__eyebrow-chip, [class*="hero"][class*="chip"] { background: #FBF7EF !important; border: 1px solid #E6E1D6 !important; color: #0E1A2F !important; } /* Mobile: stack header more aggressively below 480 */ @media (max-width: 480px) { body .header__cta { gap: 6px !important; } body .header__cta .btn--schedule { display: none !important; /* keep only Apply on tiniest screens */ } body .header__cta .btn--apply { padding: 7px 12px !important; font-size: 12.5px !important; } } /* ============================================================ ROUND 4: QUIZ HEADER + STATS BAR contrast fixes ============================================================ */ /* QUIZ HEADER (navy bg) — force cream text */ body .quiz-header, .quiz-header { background: #0E1A2F !important; color: #F7F4ED !important; } body .quiz-header *, .quiz-header * { color: #F7F4ED !important; } body .quiz-header h1, body .quiz-header h2, body .quiz-header h3 { color: #F7F4ED !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.01em !important; } body .quiz-header .quiz-subtitle, .quiz-header .quiz-subtitle, .quiz-header p { color: rgba(247,244,237,0.85) !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } /* QUIZ QUESTION text — navy on white */ body .quiz-question, .quiz-question, .quiz-step .question, .hero__quiz-wrap .quiz-question { color: #0E1A2F !important; font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; font-weight: 500 !important; } /* QUIZ STEP / progress label */ body .quiz-progress, .quiz-progress, .quiz-step-label, .quiz-progress-text { color: #3B4252 !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } /* QUIZ OPTIONS — cream cards with navy text */ body .quiz-option, .quiz-option { background: #FFFFFF !important; border: 1px solid #E6E1D6 !important; color: #0E1A2F !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; border-radius: 4px !important; } body .quiz-option:hover, .quiz-option:hover { border-color: #A8814A !important; background: #FBF7EF !important; } body .quiz-option.selected, .quiz-option.selected { border-color: #A8814A !important; background: #FBF7EF !important; color: #0E1A2F !important; } /* STATS BAR (navy bg) — cream text */ body .stats-bar, .stats-bar { background: #0E1A2F !important; color: #F7F4ED !important; } body .stats-bar *, .stats-bar .stats-bar__value, .stats-bar .stats-bar__label, .stats-bar .stats-bar__item { color: #F7F4ED !important; } body .stats-bar .stats-bar__value { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif !important; color: #A8814A !important; font-weight: 600 !important; } body .stats-bar .stats-bar__label { color: rgba(247,244,237,0.7) !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 11px !important; } /* QUIZ BUTTONS / next-back */ body .quiz-btn, body .quiz-next, body .quiz-back, .quiz-btn, .quiz-next, .quiz-back { background: #0E1A2F !important; color: #FFFFFF !important; border: 1px solid #0E1A2F !important; border-radius: 2px !important; font-family: 'Inter', 'Inter Fallback', sans-serif !important; } body .quiz-next:hover, .quiz-next:hover { background: #000 !important; } body .quiz-back, .quiz-back { background: transparent !important; color: #0E1A2F !important; } /* ════════════════════════════════════════ BURGER DRAWER — mobile nav ════════════════════════════════════════ */ /* Burger button (hidden on desktop) */ .va-burger{ display:none; position:relative; width:42px;height:42px; background:transparent; border:1px solid #0E1A2F; border-radius:6px; cursor:pointer; padding:0; margin-right:8px; flex-shrink:0; -webkit-tap-highlight-color:transparent; } .va-burger:hover{ background:rgba(14,26,47,0.06); } .va-burger span{ position:absolute; left:10px;right:10px; height:2px; background:#0E1A2F; border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease; } .va-burger span:nth-child(1){ top:13px; } .va-burger span:nth-child(2){ top:20px; } .va-burger span:nth-child(3){ top:27px; } .va-burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); } .va-burger.is-open span:nth-child(2){ opacity:0; } .va-burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); } /* Overlay */ .va-drawer-overlay{ position:fixed;inset:0; background:rgba(14,26,47,0.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; z-index:998; } .va-drawer-overlay.is-open{ opacity:1; visibility:visible; } /* Drawer panel */ .va-drawer{ position:fixed; top:0;right:0; width:min(86vw, 360px); height:100vh; height:100dvh; background:#F7F4ED; color:#0E1A2F; z-index:999; transform:translateX(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; box-shadow:-8px 0 32px rgba(14,26,47,0.18); overflow-y:auto; -webkit-overflow-scrolling:touch; } .va-drawer.is-open{ transform:translateX(0); } .va-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; background:#0E1A2F; color:#F7F4ED; flex-shrink:0; } .va-drawer__brand{ display:flex; align-items:center; gap:10px; } .va-drawer__brand-mark svg{ display:block; } .va-drawer__brand-text{ display:flex; flex-direction:column; line-height:1.15; } .va-drawer__brand-text strong{ font-family:'Fraunces', 'Fraunces Fallback', Georgia, serif; font-weight:600; font-size:1.05rem; color:#F7F4ED; letter-spacing:-0.01em; } .va-drawer__brand-text span{ font-size:0.72rem; color:#A8814A; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; } .va-drawer__close{ background:transparent; border:1px solid rgba(247,244,237,0.25); color:#F7F4ED; width:38px;height:38px; border-radius:6px; display:inline-flex; align-items:center;justify-content:center; cursor:pointer; padding:0; } .va-drawer__close:hover{ background:rgba(247,244,237,0.08); } .va-drawer__nav{ display:flex; flex-direction:column; padding:14px 0; flex:1; } .va-drawer__link{ display:block; padding:14px 22px; color:#0E1A2F !important; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-size:1.02rem; font-weight:600; letter-spacing:-0.005em; border-bottom:1px solid #E6E1D6; text-decoration:none; transition:background .15s ease, color .15s ease; } .va-drawer__link:hover, .va-drawer__link:focus-visible{ background:#EFE9D8; color:#8B6837 !important; } .va-drawer__section{ padding:18px 22px 8px; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:#8B6837; } .va-drawer__sublink{ display:block; padding:10px 22px 10px 30px; color:#3B4252 !important; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-size:0.92rem; font-weight:500; text-decoration:none; border-bottom:1px solid #EDE7DA; transition:background .15s ease, color .15s ease; } .va-drawer__sublink:hover, .va-drawer__sublink:focus-visible{ background:#EFE9D8; color:#8B6837 !important; } .va-drawer__cta{ padding:18px 20px 14px; display:flex; flex-direction:column; gap:10px; border-top:1px solid #E6E1D6; background:#FFFFFF; flex-shrink:0; } .va-drawer__apply{ display:block; background:#A8814A !important; color:#FFFFFF !important; text-align:center; padding:14px 18px; border-radius:6px; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-weight:700; font-size:0.98rem; letter-spacing:0.01em; text-decoration:none; border:1px solid #A8814A; } .va-drawer__apply:hover{ background:#8B6837 !important; border-color:#8B6837; } .va-drawer__schedule{ display:block; background:transparent !important; color:#0E1A2F !important; text-align:center; padding:13px 18px; border-radius:6px; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-weight:600; font-size:0.95rem; text-decoration:none; border:1px solid #0E1A2F; } .va-drawer__schedule:hover{ background:#0E1A2F !important; color:#F7F4ED !important; } .va-drawer__call{ display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; color:#0E1A2F !important; font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-weight:600; font-size:0.92rem; text-decoration:none; border-radius:6px; background:#EFE9D8; } .va-drawer__call:hover{ background:#E6E1D6; } .va-drawer__call svg{ stroke:#A8814A; } .va-drawer__foot{ padding:14px 22px 22px; font-size:0.72rem; line-height:1.55; color:#5A6273; background:#FFFFFF; border-top:1px solid #EDE7DA; flex-shrink:0; } /* Show burger only on tablet and mobile */ @media (max-width: 980px){ .va-burger{ display:inline-flex; align-items:center; justify-content:center; } /* Hide desktop-only header elements on tablet/mobile */ .header__cta .btn--schedule{ display:none !important; } .header__phone{ display:none !important; } } @media (max-width: 480px){ .header__cta .btn--apply{ padding:8px 14px; font-size:0.78rem; } .va-burger{ width:40px; height:40px; margin-right:6px; } } /* ════════════════════════════════════════ FIXES r8 — Apply Now subtitle + sticky bottom width ════════════════════════════════════════ */ /* Drawer Apply Now subtitle */ .va-drawer__apply{ line-height:1.15; padding:13px 18px; } .va-drawer__apply-sub{ display:block; font-size:0.72rem; font-weight:500; letter-spacing:0.02em; opacity:0.92; margin-top:3px; text-transform:none; } /* Header Apply Now subtitle (small text under pill) */ .header__apply-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; } .header__apply-sub{ font-family:'Inter', 'Inter Fallback', system-ui, sans-serif; font-size:9.5px; font-weight:500; letter-spacing:0.04em; color:#8B6837; text-transform:uppercase; white-space:nowrap; line-height:1.1; } @media (max-width:480px){ .header__apply-sub{ font-size:8.5px; letter-spacing:0.03em; } } /* Sticky bottom bar — wider Book a Call button */ .va-sticky-cta{ /* allow longer label to wrap nicely */ } .va-sticky-call{ font-size:0.95rem !important; letter-spacing:-0.005em !important; padding:13px 14px !important; text-align:center; line-height:1.15; white-space:nowrap; } .va-sticky-apply{ font-size:0.95rem !important; padding:13px 14px !important; white-space:nowrap; } @media (max-width:380px){ .va-sticky-call{ font-size:0.85rem !important; padding:12px 8px !important; } .va-sticky-apply{ font-size:0.85rem !important; padding:12px 8px !important; } } /* ════════════════════════════════════════ FIXES r9 — hide redundant hero CTA on mobile ════════════════════════════════════════ */ @media (max-width: 980px){ .hero__cta-group{ display:none !important; } } /* ============================================================ R10 — LIGHTHOUSE FIXES (2026-06-18) ============================================================ */ /* CLS fix: reserve hero quiz wrap height to prevent layout shift */ @media (max-width: 980px) { .hero__quiz-wrap { min-height: 540px !important; contain: layout !important; } } .hero__quiz-wrap { min-height: 480px; } /* Ensure focus indicator visible on bronze CTAs (a11y) */ .btn--apply:focus-visible, .btn:focus-visible { outline: 3px solid #F7F4ED !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #6E4F26 !important; } /* Drawer when open: ensure no aria-hidden conflict */ .va-drawer:not(.is-open) { visibility: hidden; } .va-drawer.is-open { visibility: visible; } /* ============================================================ R11 — FINAL CONTRAST FIXES (2026-06-18) ============================================================ */ /* Author-eat E-E-A-T block: preserve gold heading + phone on navy card */ .author-eat h3, .author-eat h3[style*="E8A020"], section.author-eat h3, section#author-eat h3 { color: #FFD774 !important; /* light gold for 8.5:1 contrast on #0D2240 */ } .author-eat a[style*="E8A020"], .author-eat a[href^="tel:"] { color: #FFD774 !important; } /* Sticky bottom bar Apply CTA — bronze-dark for contrast */ .va-sticky-apply { background: #8B6837 !important; border-color: #8B6837 !important; } .va-sticky-cta .va-sticky-apply, .va-sticky-cta a.va-sticky-apply { background: #8B6837 !important; border: 1px solid #8B6837 !important; } /* H1 — bias toward LCP-friendly rendering */ .hero__title, .hero h1 { font-display: optional; }