/* ============================================================================ Fidelity Residential — BRAND OVERRIDE (header + logos + buttons only) Load this LAST in , after theme-skin-color-set1.mini.css. Scope is intentionally narrow: it restyles the header chrome and themed buttons, swaps nothing else. Page bodies, sections, fonts are untouched. ========================================================================== */ :root{ --fr-navy: #1B3A6B; /* brand primary */ --fr-gold: #C8A84B; /* brand accent */ --fr-gold-dk: #B8983F;/* button hover */ --fr-cta-text: #1B3A6B; } /* ---------- HEADER CHROME ---------------------------------------------------*/ /* navy utility top-strip (was the old theme-colored2 background) */ #header .header-top.bg-theme-colored2, .header .header-top.bg-theme-colored2{ background-color: var(--fr-navy) !important; } /* keep the utility-strip text + icons white */ #header .header-top .text-white, #header .header-top a.text-white, #header .header-top i.text-white{ color:#fff !important; } /* signature gold accent line across the top of the header */ #header.header{ border-top: 6px solid var(--fr-gold); } /* the main nav bar stays white (it already is — make it explicit) */ #header .header-nav-wrapper.bg-white{ background:#fff !important; } /* nav links: hover / active / open-dropdown -> gold */ #menuzord-right .menuzord-menu > li:hover > a, #menuzord-right .menuzord-menu > li.active > a, #menuzord-right .menuzord-menu > li > a:hover, #menuzord-right .menuzord-menu ul.dropdown li:hover > a{ color: var(--fr-gold) !important; } /* menuzord nav fix: the menu (10 items) almost exactly fills the container, so menuzord flips into "responsive/scrollable" mode even on desktop and applies a mobile `top:-76px`, lifting the whole menu up into the navy top-strip. This sheet loads last, so force the offset back to 0 — menu sits on the white bar. */ #menuzord-right .menuzord-menu.menuzord-indented.scrollable, #menuzord-right .menuzord-menu.menuzord-right.menuzord-indented.scrollable{ position: relative !important; top: 0 !important; } /* new logo is ~3.6:1 (vs old 5.5:1). The legacy theme sets `.menuzord-brand img{max-width:200px!important;height:auto!important}`, which — with an SVG that has no fixed pixel size — collapsed the logo to ~0px tall and broke the nav float. Pin explicit dimensions with !important so the brand box always has height. 158x44 keeps the 3.6:1 ratio (no distortion). */ .menuzord-brand img{ height:44px !important; width:158px !important; max-width:none !important; } /* footer brand logo: vector fills its box edge-to-edge (the trust logos have built-in padding), so trim its width and add a gap so it isn't cramped. */ img#footer_logo[src*="fidelity_logo_navy-gold"]{ width: 14% !important; height: auto !important; margin-right: 3% !important; vertical-align: middle; } /* ---------- BUTTONS (gold fill, navy text) --------------------------------*/ .btn-theme-colored, a.btn-theme-colored, button.btn-theme-colored, input.btn-theme-colored, .btn-theme-colored:link, .btn-theme-colored:visited{ background-color: var(--fr-navy) !important; border: 2px solid var(--fr-gold) !important; color: #fff !important; } .btn-theme-colored:hover, .btn-theme-colored:focus, .btn-theme-colored:active, .btn-theme-colored.active{ background-color: var(--fr-gold) !important; border-color: var(--fr-gold) !important; color: var(--fr-navy) !important; } /* ---- Primary CTA buttons (bet-Button: "Get started", "View Rates", etc.) ---- were blue (#2686c6) -> green (#8cc641) hover. Now: gold fill, navy text. */ .bet-Button--primary, .bet-Button--primary:link, .bet-Button--primary:visited{ background-color: var(--fr-navy) !important; border: 2px solid var(--fr-gold) !important; color: #fff !important; } .bet-Button--primary:hover, .bet-Button--primary:focus{ background-color: var(--fr-gold) !important; border-color: var(--fr-gold) !important; color: var(--fr-navy) !important; } /* the "View Rates" CTA wraps an inside the button: white by default, navy on hover */ .bet-Button--primary a, .bet-Button--primary a:link, .bet-Button--primary a:visited{ color: #fff !important; text-decoration:none !important; } .bet-Button--primary:hover a, .bet-Button--primary:focus a, .bet-Button--primary a:hover{ color: var(--fr-navy) !important; } /* ---- Accent / highlight text (e.g. "Customers Say") were green/orange -> gold ---- */ .text-theme-colored, .text-theme-colored2{ color: var(--fr-gold) !important; } .text-hover-theme-colored1:hover, .text-hover-theme-colored2:hover{ color: var(--fr-gold) !important; } /* ---- Leftover old-palette accents ---- */ .odometer{ color: var(--fr-navy) !important; } /* stat counters: blue -> navy */ .triangle{ border-bottom-color: #D6DEEA !important; } /* decorative light-blue wedge -> light navy tint */ /* ---- Headings: style-main.css defaults all h1/h2 to blue (#2686c6). Flip to navy. Deliberately NO !important and matched specificity so section-specific white-on-dark headings (hero, navy bands) still override correctly. ---- */ h1, h2, .h1, .h2{ color: var(--fr-navy); } /* ---- Remaining direct-blue text -> navy (these may carry !important upstream) ---- */ .review-author, .readMore, .icon-box-title, .icon-box-title b{ color: var(--fr-navy) !important; } .readMore a, .icon-box a, p.text-center a{ color: var(--fr-navy) !important; } .readMore a:hover, .icon-box a:hover{ color: var(--fr-gold) !important; } /* ---- Stat circles + price-tag badges: blue -> navy. NOTE: these carry !important in the per-page inline CSS which is re-applied AFTER this sheet (a preload of index-inline.mini.css sits lower in ), so we need higher specificity (body ...) to win the cascade regardless of source order. ---- */ body .circle{ background: #1B3A6B !important; } body .circle, body .circle *{ color: #fff !important; } body div.price-tag{ background: #1B3A6B !important; color: #fff !important; } /* ---- Purchase / Refinance "process" timeline pages ---- (cd-timeline component: green step banners, blue markers, blue Apply-Now CTAs, and an inline-styled "Fidelity Residential" wordmark) ---- */ #bt1{ background: var(--fr-navy) !important; } /* green step banner -> navy (its own rule keeps text white) */ .cd-timeline-img{ background-color: var(--fr-navy) !important; } /* blue timeline markers -> navy */ .cd-read-more{ /* "Apply Now" -> navy/white/gold-border */ background-color: var(--fr-navy) !important; color: #fff !important; border: 2px solid var(--fr-gold) !important; } .cd-read-more:hover, .cd-read-more:focus{ background-color: var(--fr-gold) !important; color: var(--fr-navy) !important; } /* inline-styled wordmark: "Fidelity" -> navy, "Residential" -> gold (beats inline color) */ .bs3{ color: var(--fr-navy) !important; } .cd-date > span{ color: var(--fr-gold) !important; } /* the vertical timeline connector line (a ::before pseudo-element) was green */ .cd-container::before{ background: var(--fr-navy) !important; }