/* Auto-generated by planning/site_tools/apply_brand.py — DO NOT EDIT BY HAND. Source: branding/brand-config.json Loaded after all legacy stylesheets to re-skin the site without modifying captured assets. Toggle off by removing the import in SiteLayout.astro / the page that includes it. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); :root { --brand-primary: #005E81; --brand-secondary: #008A7E; --brand-accent: #691F6B; --brand-cta: #F09D01; --brand-bg-light: #D0F5FF; --brand-text: #4D6881; --brand-dark: #00294B; } [style*="color: #00457c"], [style*="color:#00457c"] { color: #005E81 !important; } [style*="background-color: #00457c"], [style*="background-color:#00457c"] { background-color: #005E81 !important; } [style*="background: #00457c"], [style*="background:#00457c"] { background-color: #005E81 !important; } [style*="border-color: #00457c"], [style*="border-color:#00457c"] { border-color: #005E81 !important; } [style*="color: #00457C"], [style*="color:#00457C"] { color: #005E81 !important; } [style*="background-color: #00457C"], [style*="background-color:#00457C"] { background-color: #005E81 !important; } [style*="background: #00457C"], [style*="background:#00457C"] { background-color: #005E81 !important; } [style*="border-color: #00457C"], [style*="border-color:#00457C"] { border-color: #005E81 !important; } [style*="color: #00926f"], [style*="color:#00926f"] { color: #008A7E !important; } [style*="background-color: #00926f"], [style*="background-color:#00926f"] { background-color: #008A7E !important; } [style*="background: #00926f"], [style*="background:#00926f"] { background-color: #008A7E !important; } [style*="border-color: #00926f"], [style*="border-color:#00926f"] { border-color: #008A7E !important; } [style*="color: #00926F"], [style*="color:#00926F"] { color: #008A7E !important; } [style*="background-color: #00926F"], [style*="background-color:#00926F"] { background-color: #008A7E !important; } [style*="background: #00926F"], [style*="background:#00926F"] { background-color: #008A7E !important; } [style*="border-color: #00926F"], [style*="border-color:#00926F"] { border-color: #008A7E !important; } [style*="color: #EEF9FB"], [style*="color:#EEF9FB"] { color: #D0F5FF !important; } [style*="background-color: #EEF9FB"], [style*="background-color:#EEF9FB"] { background-color: #D0F5FF !important; } [style*="background: #EEF9FB"], [style*="background:#EEF9FB"] { background-color: #D0F5FF !important; } [style*="border-color: #EEF9FB"], [style*="border-color:#EEF9FB"] { border-color: #D0F5FF !important; } [style*="color: #eef9fb"], [style*="color:#eef9fb"] { color: #D0F5FF !important; } [style*="background-color: #eef9fb"], [style*="background-color:#eef9fb"] { background-color: #D0F5FF !important; } [style*="background: #eef9fb"], [style*="background:#eef9fb"] { background-color: #D0F5FF !important; } [style*="border-color: #eef9fb"], [style*="border-color:#eef9fb"] { border-color: #D0F5FF !important; } [style*="color: #79B7E7"], [style*="color:#79B7E7"] { color: #D0F5FF !important; } [style*="background-color: #79B7E7"], [style*="background-color:#79B7E7"] { background-color: #D0F5FF !important; } [style*="background: #79B7E7"], [style*="background:#79B7E7"] { background-color: #D0F5FF !important; } [style*="border-color: #79B7E7"], [style*="border-color:#79B7E7"] { border-color: #D0F5FF !important; } [style*="color: #79b7e7"], [style*="color:#79b7e7"] { color: #D0F5FF !important; } [style*="background-color: #79b7e7"], [style*="background-color:#79b7e7"] { background-color: #D0F5FF !important; } [style*="background: #79b7e7"], [style*="background:#79b7e7"] { background-color: #D0F5FF !important; } [style*="border-color: #79b7e7"], [style*="border-color:#79b7e7"] { border-color: #D0F5FF !important; } [style*="color: #C5DBEC"], [style*="color:#C5DBEC"] { color: #D0F5FF !important; } [style*="background-color: #C5DBEC"], [style*="background-color:#C5DBEC"] { background-color: #D0F5FF !important; } [style*="background: #C5DBEC"], [style*="background:#C5DBEC"] { background-color: #D0F5FF !important; } [style*="border-color: #C5DBEC"], [style*="border-color:#C5DBEC"] { border-color: #D0F5FF !important; } [style*="color: #c5dbec"], [style*="color:#c5dbec"] { color: #D0F5FF !important; } [style*="background-color: #c5dbec"], [style*="background-color:#c5dbec"] { background-color: #D0F5FF !important; } [style*="background: #c5dbec"], [style*="background:#c5dbec"] { background-color: #D0F5FF !important; } [style*="border-color: #c5dbec"], [style*="border-color:#c5dbec"] { border-color: #D0F5FF !important; } [style*="color: #e17009"], [style*="color:#e17009"] { color: #F09D01 !important; } [style*="background-color: #e17009"], [style*="background-color:#e17009"] { background-color: #F09D01 !important; } [style*="background: #e17009"], [style*="background:#e17009"] { background-color: #F09D01 !important; } [style*="border-color: #e17009"], [style*="border-color:#e17009"] { border-color: #F09D01 !important; } [style*="color: #E17009"], [style*="color:#E17009"] { color: #F09D01 !important; } [style*="background-color: #E17009"], [style*="background-color:#E17009"] { background-color: #F09D01 !important; } [style*="background: #E17009"], [style*="background:#E17009"] { background-color: #F09D01 !important; } [style*="border-color: #E17009"], [style*="border-color:#E17009"] { border-color: #F09D01 !important; } /* Auto-mirrored legacy CSS rules → brand colors */ .ui-widget.ui-widget-content { border-color: #D0F5FF !important; } html .ui-button.ui-state-disabled:active { border-color: #D0F5FF !important; } .ui-button:focus { border-color: #D0F5FF !important; } .ui-button.ui-state-active:hover { border-color: #D0F5FF !important; } .ui-button.ui-state-active:hover { color: #F09D01 !important; } .ui-state-active .ui-icon-background { border-color: #D0F5FF !important; } .ui-state-active .ui-icon-background { background-color: #F09D01 !important; } .ui-state-active a:visited { color: #F09D01 !important; } h1 { color: #005E81 !important; } nav.secondary a:hover:after,footer ul.sitemap a:hover:after,nav.primary ul.sitemap a:hover:after,nav.secondary a:focus:after,footer ul.sitemap a:focus:after,nav.primary ul.sitemap a:focus:after { color: #005E81 !important; } header nav.primary > ul > li > a { color: #005E81 !important; } header nav.primary > ul > li > a:hover { color: #008A7E !important; } header nav.primary > ul > li.selected > a { color: #008A7E !important; } nav.primary > ul > li:hover > a { color: #008A7E !important; } nav.primary ul .nav-wrap { background-color: #008A7E !important; } nav.secondary { background-color: #005E81 !important; } #siteSearchTxt { color: #005E81 !important; } #siteSearchBtn:hover { color: #005E81 !important; } .srch-filter a.srch-exe.on { color: #008A7E !important; } #ctaCustom > span > li:hover > a { background-color: #008A7E !important; } #ctaCustom > span > li > a:hover { background-color: #008A7E !important; } #ctaCustom ul.drop-down { background-color: #008A7E !important; } footer .inner a:hover { color: #005E81 !important; } footer h2,footer .inner h2 a { color: #008A7E !important; } footer .inner h2 a:hover { color: #005E81 !important; } footer ul.sitemap em.fa-angle-right { color: #008A7E !important; } footer ul.sitemap a:hover:after { background-color: #005E81 !important; } footer ul.social a { background-color: #008A7E !important; } footer ul.social a:hover { background-color: #005E81 !important; } #homeSlides > li,#serviceSlides > li { background-color: #D0F5FF !important; } .rslides li.dark { color: #005E81 !important; } .rslides li.dark a { color: #005E81 !important; } .rslides li.dark .slide-txt ul li a:hover { color: #008A7E !important; } .info-wrap .slide-txt a.btn { background-color: #008A7E !important; } .info-wrap .slide-txt a.btn:hover,.info-wrap .slide-txt .slideBtn a:hover { background-color: #005E81 !important; } .rslides_tabs .rslides_here a { background-color: #005E81 !important; } ul.child-sibling li a { color: #005E81 !important; } ul.child-sibling li:hover,ul.child-sibling li a:hover { color: #008A7E !important; } ul.ico a { color: #005E81 !important; } ul.ico a:hover { color: #008A7E !important; } ul.ico img { background-color: #008A7E !important; } ul.ico img.on,ul.ico img:hover { background-color: #005E81 !important; } .highlights h2 a { color: #005E81 !important; } .highlights h2 a:hover { color: #008A7E !important; } .highlights .learn-more a { color: #008A7E !important; } .highlights .learn-more a:hover { color: #005E81 !important; } .highlights .rslides_tabs .rslides_here a { background-color: #005E81 !important; } .hw ul li.item1 a { background-color: #005E81 !important; } .hw ul li.item2 a { background-color: #008A7E !important; } .date-feed h2 a { color: #005E81 !important; } .date-feed h2 a:hover { color: #008A7E !important; } .date-feed ul .read-more a,.date-feed .view-all a { color: #008A7E !important; } .date-feed ul .read-more a:hover,.date-feed .view-all a:hover { color: #005E81 !important; } .date-feed ul li .date-row { background-color: #005E81 !important; } .date-feed ul li .date-row .icon { background-color: #008A7E !important; } .page-content h2 { color: #005E81 !important; } .page-content h3 { color: #008A7E !important; } .page-content a { color: #008A7E !important; } .page-content a:hover { color: #005E81 !important; } .mktoForm .mktoButtonWrap.mktoSimple .mktoButton { background-color: #005E81 !important; } .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover { background-color: #008A7E !important; } .fad-slider { background-color: #005E81 !important; } .appt-slider { background-color: #008A7E !important; } .cta-btn:nth-child(odd) wrapper { background-color: #008A7E !important; } .cta-btn:nth-child(even) wrapper { background-color: #005E81 !important; } .ols-cta.col1 { background-color: #005E81 !important; } .ols-cta input[type=submit] { background-color: #008A7E !important; } .ols-cta.col3 wrapper { background-color: #005E81 !important; } a.btn { background-color: #008A7E !important; } a.btn:hover { background-color: #005E81 !important; } a.btn2 { background-color: #005E81 !important; } a.btn2:hover { background-color: #008A7E !important; } #e-btn:hover { background-color: #005E81 !important; } .wtw-title { background-color: #005E81 !important; } .col h3 { color: #005E81 !important; } .inquicker-wrapper input[type="submit"] { background-color: #005E81 !important; } .inquicker-wrapper input[type="submit"]:hover { background-color: #008A7E !important; } .info-wrap .breadcrumb a:hover { color: #008A7E !important; } .rslides li.light .breadcrumb a:hover { color: #008A7E !important; } .page-content .final-row { background-color: #005E81 !important; } .page-content .final-row a:hover { color: #D0F5FF !important; } .breadcrumb { color: #005E81 !important; } .breadcrumb a { color: #005E81 !important; } .breadcrumb a:hover { color: #008A7E !important; } .cpsty_Navigation a { color: #005E81 !important; } .cpsty_Navigation a:hover { color: #008A7E !important; } .cpsty_Navigation.cpsty_NavigationSelected a { color: #008A7E !important; } .cpsty_Navigation.cpsty_SubNavigation1.cpsty_NavigationSelected img { background-color: #008A7E !important; } ul.promo h2 { color: #005E81 !important; } ul.promo a { color: #008A7E !important; } ul.promo a:hover { color: #005E81 !important; } a.return,.page-content a.return { color: #005E81 !important; } a.return:hover,.page-content a.return:hover { color: #008A7E !important; } ul.tabs li a.selected img { background-color: #005E81 !important; } ul.tabs li img { background-color: #008A7E !important; } .tab-content a { color: #008A7E !important; } .tab-content a:hover { color: #005E81 !important; } .tab-content ul.info li a:hover { color: #008A7E !important; } .tab-content ul.info img { background-color: #005E81 !important; } .tab-content ul.info h3 { color: #005E81 !important; } .tab-content ul.rel-items li a { color: #005E81 !important; } .tab-content ul.rel-items li a:hover { color: #005E81 !important; } .tab-content ul.rel-items li p { color: #008A7E !important; } .tab-content ul.rel-items li.view-all a { color: #008A7E !important; } .tab-content ul.rel-items li.view-all a:hover { color: #005E81 !important; } .module-search { background-color: #D0F5FF !important; } .module-search h2 { color: #005E81 !important; } .module-search h3 { color: #005E81 !important; } .module-search > input[type="submit"] { background-color: #005E81 !important; } .module-search > input[type="submit"]:hover { background-color: #008A7E !important; } .module-search a { color: #008A7E !important; } .module-search a:hover { color: #005E81 !important; } .search-events-header { color: #005E81 !important; } .search-term { color: #008A7E !important; } ul.results h2 a { color: #005E81 !important; } ul.results h2 a:hover { color: #008A7E !important; } ul.results .title-date .date { color: #008A7E !important; } ul.results em.tax,ul.results em.mod-name { color: #008A7E !important; } .pag-header a,.pag-footer a { border-color: #008A7E !important; } .pag-header a,.pag-footer a { color: #008A7E !important; } .pag-header a:hover,.pag-footer a:hover { background-color: #008A7E !important; } a.cpsty_PagerCurrentPage,a.cpsty_PagerCurrentPage:hover { background-color: #005E81 !important; } a.cpsty_PagerCurrentPage,a.cpsty_PagerCurrentPage:hover { border-color: #005E81 !important; } .phys .missing img { background-color: #008A7E !important; } .mod-details.phys .appt { border-color: #005E81 !important; } .mod-details.phys .appt { background-color: #D0F5FF !important; } .mod-details.phys ul.col-2 li.loc ul .fa.fa-map-marker { color: #005E81 !important; } .schedulizer-details { border-color: #005E81 !important; } .schedulizer-details { background-color: #D0F5FF !important; } .schedulizer-details .schedule-btn { background-color: #005E81 !important; } \.schedulizer-details .schedule-btn:hover { background-color: #008A7E !important; } .schedulizer-details .schedule-btn a { background-color: #005E81 !important; } .schedulizer-details .schedule-btn a:hover { background-color: #008A7E !important; } .calendar ul.filter label { color: #008A7E !important; } .cpsty_CalendarTitleBar { background-color: #005E81 !important; } .cpsty_CalendarTitleBar .cpsty_Calendar_Next a:hover { color: #D0F5FF !important; } .cpsty_CalendarDayHeader { background-color: #008A7E !important; } .cpsty_CalendarTodaysDayCell { background-color: #D0F5FF !important; } .cpsty_CalendarEventTitleDiv a { color: #005E81 !important; } .srch-filter h2 { color: #005E81 !important; } .srch-filter a { color: #005E81 !important; } .srch-filter a:hover { color: #008A7E !important; } .form-container .ff-container input[type="text"],.form-container .ff-container input[type="password"],.form-container .ff-container textarea,.form-container select { outline-color: #008A7E !important; } .form-container input[type="submit"],.form-container input[type="button"] { background-color: #005E81 !important; } .form-container input[type="submit"]:hover,.form-container input[type="button"]:hover { background-color: #008A7E !important; } #siteLocations a { color: #008A7E !important; } #siteLocations a:hover { color: #005E81 !important; } #siteLocations ul.loc-menu li[data-index] em.fa-angle-right { color: #008A7E !important; } #siteLocations > ul.loc-menu li[data-index].on,#siteLocations > ul.loc-menu li[data-index].on:hover { background-color: #005E81 !important; } #siteLocations ul.loc-menu li[data-index]:hover { background-color: #008A7E !important; } #siteLocations ul.loc-menu li[data-content] { border-color: #005E81 !important; } #siteLocations h2 { color: #005E81 !important; } #siteLocations .er span { color: #005E81 !important; } ul.loc-stats p .num { color: #005E81 !important; } #siteLocations em.alpha { background-color: #005E81 !important; } ul.loc-info h2 { color: #005E81 !important; } ul.loc-info .er span,ul.promo .er span { color: #005E81 !important; } ul.loc-info a { color: #008A7E !important; } ul.loc-info a:hover { color: #005E81 !important; } .locs-servs h4 { color: #008A7E !important; } .locs-servs h3:hover,.locs-servs h3.on,.locs-servs h4:hover,.locs-servs h4.on { color: #005E81 !important; } .locs-servs h3.on:hover,.locs-servs h4.on:hover { color: #008A7E !important; } li.slicknav_txtnode { color: #005E81 !important; } .slicknav_nav li.phone a { color: #005E81 !important; } .top-ribbon.mo { background-color: #005E81 !important; } ul.er-wait img { background-color: #005E81 !important; } ul.er-wait h3 { color: #005E81 !important; } ul.er-wait li a { color: #008A7E !important; } .slicknav_nav ul { background-color: #008A7E !important; } li.slicknav_txtnode { background-color: #008A7E !important; } .slicknav_nav ul li a:hover { color: #008A7E !important; } .info-wrap .slide-txt,.rslides li.right .slide-txt { color: #005E81 !important; } .rslides li.light a,.page-content ul.full li.light h2 { color: #005E81 !important; } .page-content ul.full li.light a { color: #008A7E !important; } .page-content ul.full li.light a:hover { color: #005E81 !important; } select.mobile-menu { background-color: #008A7E !important; } .fad-slider-mobile { background-color: #005E81 !important; } .appt-slider-mobile { background-color: #008A7E !important; } /* Headings + brand-prominent text. Note: this is the DEFAULT — the descendant rules emitted further down will override this color inside known dark/light sections so text contrast stays readable. */ a, .navbar a, .menu_container a, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .brand, .logo a, .site-title { color: var(--brand-primary); } /* Primary buttons */ .btn-primary, .button-primary, button.primary, .vc_btn-primary, .vc_btn3-color-primary, .bg-primary, .background-primary { background-color: var(--brand-primary) !important; color: #fff !important; border-color: var(--brand-primary) !important; } .btn-primary:hover, .button-primary:hover, .vc_btn-primary:hover { background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; } /* Secondary buttons */ .btn-secondary, .button-secondary, button.secondary, .vc_btn-secondary, .bg-secondary { background-color: var(--brand-secondary) !important; color: #fff !important; border-color: var(--brand-secondary) !important; } /* Accent emphasis */ .accent, .bg-accent { background-color: var(--brand-accent) !important; color: #fff !important; } /* CTA — call-to-action emphasis */ .cta, .btn-cta, .button-cta, .call-to-action, .vc_btn3-color-warning, [class*="action"][class*="btn"] { background-color: var(--brand-cta) !important; color: #fff !important; } /* DARK sections (originally dark bg + white text in legacy theme). Map to brand-primary so the white text inside stays readable. */ .skincolored_section, .skincolored_section.transparent { background-color: var(--brand-primary) !important; color: #fff !important; } .skincolored_section a, .skincolored_section a:link, .skincolored_section a:visited { color: #fff !important; } /* Legacy "secondary" section (originally dark green + white text). Map to brand-secondary so white text stays readable. */ .secondary_section { background-color: var(--brand-secondary) !important; color: #fff !important; } .secondary_section a, .secondary_section a:link, .secondary_section a:visited { color: #fff !important; } /* LIGHT sections (originally light bg + dark text). Map to brand-bg-light; keep dark text from legacy. Don't force a text color so legacy dark-on-light stays intact. */ .bg-light, .background-light, .body-bg_section { background-color: var(--brand-bg-light) !important; } /* .light_section already legitimately light + dark in legacy — leave alone */ /* Body-text-class opt-ins */ .body-text, .secondary-text, .muted, p.muted, .text-muted, .footer-meta { color: var(--brand-text) !important; } /* Footer — semantic footer element + explicit footer container classes ONLY. Do NOT include legacy section classes (e.g. .secondary_section) here, because those classes appear inside the page body too and forcing dark-base would break content sections. */ footer, .footer, .site-footer, .site-footer-wrap, .footer-inner, .dark-section, .bg-dark { background-color: var(--brand-dark) !important; color: #fff !important; } footer a, .footer a, .site-footer a, .site-footer-wrap a { color: var(--brand-bg-light) !important; } /* Section descendant text-color contracts (auto-emitted) */ .skincolored_section { color: #ffffff; } .skincolored_section p, .skincolored_section li, .skincolored_section td, .skincolored_section th, .skincolored_section span, .skincolored_section div, .skincolored_section h1, .skincolored_section h2, .skincolored_section h3, .skincolored_section h4, .skincolored_section h5, .skincolored_section h6 { color: #ffffff !important; } .skincolored_section a, .skincolored_section a:link, .skincolored_section a:visited { color: #D0F5FF !important; } .secondary_section { color: #ffffff; } .secondary_section p, .secondary_section li, .secondary_section td, .secondary_section th, .secondary_section span, .secondary_section div, .secondary_section h1, .secondary_section h2, .secondary_section h3, .secondary_section h4, .secondary_section h5, .secondary_section h6 { color: #ffffff !important; } .secondary_section a, .secondary_section a:link, .secondary_section a:visited { color: #D0F5FF !important; } .dark-section { color: #ffffff; } .dark-section p, .dark-section li, .dark-section td, .dark-section th, .dark-section span, .dark-section div, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6 { color: #ffffff !important; } .dark-section a, .dark-section a:link, .dark-section a:visited { color: #D0F5FF !important; } .bg-dark { color: #ffffff; } .bg-dark p, .bg-dark li, .bg-dark td, .bg-dark th, .bg-dark span, .bg-dark div, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 { color: #ffffff !important; } .bg-dark a, .bg-dark a:link, .bg-dark a:visited { color: #D0F5FF !important; } .site-footer { color: #ffffff; } .site-footer p, .site-footer li, .site-footer td, .site-footer th, .site-footer span, .site-footer div, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #ffffff !important; } .site-footer a, .site-footer a:link, .site-footer a:visited { color: #D0F5FF !important; } .site-footer-wrap { color: #ffffff; } .site-footer-wrap p, .site-footer-wrap li, .site-footer-wrap td, .site-footer-wrap th, .site-footer-wrap span, .site-footer-wrap div, .site-footer-wrap h1, .site-footer-wrap h2, .site-footer-wrap h3, .site-footer-wrap h4, .site-footer-wrap h5, .site-footer-wrap h6 { color: #ffffff !important; } .site-footer-wrap a, .site-footer-wrap a:link, .site-footer-wrap a:visited { color: #D0F5FF !important; } .footer-inner { color: #ffffff; } .footer-inner p, .footer-inner li, .footer-inner td, .footer-inner th, .footer-inner span, .footer-inner div, .footer-inner h1, .footer-inner h2, .footer-inner h3, .footer-inner h4, .footer-inner h5, .footer-inner h6 { color: #ffffff !important; } .footer-inner a, .footer-inner a:link, .footer-inner a:visited { color: #D0F5FF !important; } .info-wrap { color: #ffffff; } .info-wrap p, .info-wrap li, .info-wrap td, .info-wrap th, .info-wrap span, .info-wrap div, .info-wrap h1, .info-wrap h2, .info-wrap h3, .info-wrap h4, .info-wrap h5, .info-wrap h6 { color: #ffffff !important; } .info-wrap a, .info-wrap a:link, .info-wrap a:visited { color: #D0F5FF !important; } .rslides_tabs { color: #ffffff; } .rslides_tabs p, .rslides_tabs li, .rslides_tabs td, .rslides_tabs th, .rslides_tabs span, .rslides_tabs div, .rslides_tabs h1, .rslides_tabs h2, .rslides_tabs h3, .rslides_tabs h4, .rslides_tabs h5, .rslides_tabs h6 { color: #ffffff !important; } .rslides_tabs a, .rslides_tabs a:link, .rslides_tabs a:visited { color: #D0F5FF !important; } .tabs { color: #ffffff; } .tabs p, .tabs li, .tabs td, .tabs th, .tabs span, .tabs div, .tabs h1, .tabs h2, .tabs h3, .tabs h4, .tabs h5, .tabs h6 { color: #ffffff !important; } .tabs a, .tabs a:link, .tabs a:visited { color: #D0F5FF !important; } .body-bg_section { color: #4D6881; } .body-bg_section p, .body-bg_section li, .body-bg_section td, .body-bg_section th, .body-bg_section span, .body-bg_section div, .body-bg_section h1, .body-bg_section h2, .body-bg_section h3, .body-bg_section h4, .body-bg_section h5, .body-bg_section h6 { color: #4D6881 !important; } .body-bg_section a, .body-bg_section a:link, .body-bg_section a:visited { color: #005E81 !important; } .light_section { color: #4D6881; } .light_section p, .light_section li, .light_section td, .light_section th, .light_section span, .light_section div, .light_section h1, .light_section h2, .light_section h3, .light_section h4, .light_section h5, .light_section h6 { color: #4D6881 !important; } .light_section a, .light_section a:link, .light_section a:visited { color: #005E81 !important; } .bg-light { color: #4D6881; } .bg-light p, .bg-light li, .bg-light td, .bg-light th, .bg-light span, .bg-light div, .bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6 { color: #4D6881 !important; } .bg-light a, .bg-light a:link, .bg-light a:visited { color: #005E81 !important; } .background-light { color: #4D6881; } .background-light p, .background-light li, .background-light td, .background-light th, .background-light span, .background-light div, .background-light h1, .background-light h2, .background-light h3, .background-light h4, .background-light h5, .background-light h6 { color: #4D6881 !important; } .background-light a, .background-light a:link, .background-light a:visited { color: #005E81 !important; } .homeSlides { color: #4D6881; } .homeSlides p, .homeSlides li, .homeSlides td, .homeSlides th, .homeSlides span, .homeSlides div, .homeSlides h1, .homeSlides h2, .homeSlides h3, .homeSlides h4, .homeSlides h5, .homeSlides h6 { color: #4D6881 !important; } .homeSlides a, .homeSlides a:link, .homeSlides a:visited { color: #005E81 !important; } .event-box { color: #4D6881; } .event-box p, .event-box li, .event-box td, .event-box th, .event-box span, .event-box div, .event-box h1, .event-box h2, .event-box h3, .event-box h4, .event-box h5, .event-box h6 { color: #4D6881 !important; } .event-box a, .event-box a:link, .event-box a:visited { color: #005E81 !important; } .appt { color: #4D6881; } .appt p, .appt li, .appt td, .appt th, .appt span, .appt div, .appt h1, .appt h2, .appt h3, .appt h4, .appt h5, .appt h6 { color: #4D6881 !important; } .appt a, .appt a:link, .appt a:visited { color: #005E81 !important; } /* Typography — Plus Jakarta Sans across body content + headings. Buttons + UI elements with tight metric-dependent layouts are NOT included so box dimensions stay source-faithful. */ body, p, span, div, li, td, th, label, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, a:not(.btn):not(.vc_btn):not([class*="btn-"]), .menu_container, .navbar { font-family: "Plus Jakarta Sans", sans-serif !important; } /* Pin button typography to the legacy font (configurable via font.button_legacy_family in brand-config.json). Without this, buttons can inherit a different font-family from a parent and render taller than source because of font-metric differences. */ .btn, button, .vc_btn, [class*="btn-"], [type="button"], [type="submit"] { font-family: Arial, Helvetica, sans-serif !important; } /* Icon fonts MUST be preserved on .fa / icon-* elements (do NOT use font-family: revert here — that would revert to the inherited Raleway from the .btn parent, breaking the glyphs). Force the legacy icon-font families explicitly. IMPORTANT: scope `[class^="icon-"]` / `[class*=" icon-"]` to `i` / `span` ONLY. Bare attribute selectors match the icon-button anchor itself (e.g. `` matches `[class*=" icon-"]`), which forces FontAwesome onto the button text and blows up the box height. */ .fa, .fas, .far, .fab, .fal, .fad { font-family: 'FontAwesome', 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Font Awesome 5 Duotone', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 6 Duotone' !important; } i[class^="icon-"], i[class*=" icon-"], span[class^="icon-"], span[class*=" icon-"] { font-family: 'FontAwesome', 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Font Awesome 5 Duotone', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 6 Duotone' !important; } i[class*="vcpb-"], span[class*="vcpb-"] { font-family: 'vcpb-plugin-icons' !important; } i[class*="webfont-"], span[class*="webfont-"] { font-family: 'webfont-medical-icons' !important; } /* Pin font-size + line-height to legacy values. Pin VERTICAL padding only — horizontal padding must remain free so legacy icon-button rules like `.btn.with-icon.icon-left { padding-left:57px; padding-right:24px }` keep working. Using `!important` on the shorthand `padding` would override those lateral values. */ .btn-lg, .btn-group-lg > .btn { font-size: 15px !important; line-height: 1.33 !important; padding-top: 10px !important; padding-bottom: 10px !important; } .btn-xs, .btn-group-xs > .btn { font-size: 12px !important; line-height: 1.5 !important; padding-top: 1px !important; padding-bottom: 1px !important; } /* Hide WordPress autop-injected junk inside icon buttons. wpautop wraps button anchors in

and inserts
after icon glyphs; both inflate the button height. Strip them defensively. */ .btn.with-icon br, .btn.with-icon p:empty, .plethora_button.btn_block > p { display: none !important; } .btn.with-icon p, .plethora_button.btn_block > p { margin: 0 !important; padding: 0 !important; } /* Weights only on the elements we re-fonted (don't restyle button weights — leave to legacy theme). */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } body, p { font-weight: 400; } /* Per-site extra_css from brand-config.json */ /* Footer social icons — vertical centering fix + FHS rebrand colors. Legacy CSS uses `display: table-cell; vertical-align: middle` on , but the parent

  • is `float: left` (not display: table-row), so the table-cell vertical centering is orphaned and the icon sits at the top of the circle. Switch to flexbox for proper centering and recolor to brand-cta yellow (hover → brand-secondary teal). */ footer ul.social a, footer ul.social a:link, footer ul.social a:visited { display: flex !important; align-items: center !important; justify-content: center !important; width: 43px !important; height: 43px !important; background-color: #F09D01 !important; border-radius: 50% !important; } footer ul.social a:hover { background-color: #008A7E !important; } footer ul.social em.fa { display: block !important; width: 100% !important; height: 100% !important; background-position: center center !important; background-repeat: no-repeat !important; font-size: 0 !important; } footer ul.social .fa-facebook { background-size: 60% !important; } footer ul.social .fa-instagram { background-size: 55% !important; } footer ul.social .fa-linkedin { background-size: 50% !important; background-position: 50% 50% !important; } footer ul.social .fa-twitter { background-size: 50% !important; } footer ul.social .fa-youtube { background-size: 60% !important; } /* Carousel slide CTA button — yellow background with white text (NOT bold) per user spec. Specificity bumped via html body[id] chain to beat the dark-section anchor override below. */ /* Carousel button base — non-bio variant. Yellow CTA, white text, regular weight. Mirrors nw-physicians.com proven values; #homeSlides ID prefix gives high specificity so dark-section anchor rules don't hijack it. */ html body[id] #homeSlides .info-wrap .slide-txt a.btn, html body[id] #homeSlides .info-wrap a.btn, html body[id] #homeSlides li.dark .slide-txt a.btn, html body[id] #homeSlides li.light .slide-txt a.btn, html body[id] #ppsSlides .info-wrap a.btn { background-color: #F09D01 !important; color: #ffffff !important; border-color: #F09D01 !important; font-size: 14px !important; font-weight: 400 !important; padding: 6px 18px !important; min-width: 120px !important; margin-top: 22px !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; line-height: 1.4 !important; display: inline-block !important; } html body[id] #homeSlides .info-wrap .slide-txt a.btn:hover, html body[id] #homeSlides .info-wrap a.btn:hover, html body[id] #homeSlides li.dark .slide-txt a.btn:hover, html body[id] #homeSlides li.light .slide-txt a.btn:hover, html body[id] #ppsSlides .info-wrap a.btn:hover { background-color: #008A7E !important; color: #ffffff !important; } /* `.btn.bio` Featured Provider variant — display:block on its own line, with max-width 200px and 20px top/bottom margin so the trailing location-logo stacks below it cleanly. Matches source style at home.html L569-574. Same #homeSlides specificity boost so it overrides the .btn rule above. */ html body[id] #homeSlides .info-wrap .slide-txt a.btn.bio, html body[id] #homeSlides .info-wrap a.btn.bio, html body[id] #homeSlides li .slide-txt a.btn.bio, html body[id] #ppsSlides a.btn.bio { display: block !important; max-width: 200px !important; min-width: 0 !important; margin-top: 22px !important; margin-bottom: 14px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 6px 18px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; text-align: center !important; } /* Featured Provider trailing location-logo — guarantee a consistent gap from the bio button above. Source HTML places `style="margin-top:25px"` inline. Pin via CSS so the auto-mirror can't collapse the gap. The path on northwesthealth.com is `/Featured_Providers/...png`. */ html body[id] #homeSlides .info-wrap .slide-txt img[src*="Featured_Providers"], html body[id] #ppsSlides .info-wrap img[src*="Featured_Providers"], html body[id] .info-wrap .slide-txt img[src*="Featured_Providers"], html body[id] .info-wrap .slide-txt img[src*="/Logos"] { margin-top: 22px !important; margin-bottom: 8px !important; display: inline-block !important; width: 260px !important; max-width: 260px !important; height: auto !important; } /* Homepage `.hw` (Health & Wellness) tiles — Newsroom + Visitor Information. Source has `.hw ul li { color: #FFF }` and tile backgrounds are brand- primary navy + brand-secondary teal. The brand-override's universal heading rule (color: navy) makes the h2 invisible on the navy tile. Force white on all text inside .hw tiles. */ html body[id] .hw ul li, html body[id] .hw ul li h1, html body[id] .hw ul li h2, html body[id] .hw ul li h3, html body[id] .hw ul li p, html body[id] .hw ul li p.lm, html body[id] .hw ul li a, html body[id] .hw ul li a:link, html body[id] .hw ul li a:visited { color: #ffffff !important; } html body[id] .hw ul li a:hover { color: #ffffff !important; text-decoration: none !important; } /* Carousel slide text colors — match source's `.dark`/`.light` convention. Source uses class names that name the BACKGROUND tone, so: .rslides li.dark (dark bg or solid colored bg) → NAVY text from theme .rslides li.light (light/photo bg) → WHITE text On nwh: `.light` slides are "Free Heart Health Assessment" + "OB Appointments" — flat brand-blue background panels. Every other slide (Community Impact, Freeman Welcomes, Joint Pain, Can't wait, etc.) is `.dark` with a photo backdrop and uses navy text per source intent. */ html body[id] .rslides li.dark .slide-txt, html body[id] .rslides li.dark .slide-txt h1, html body[id] .rslides li.dark .slide-txt h2, html body[id] .rslides li.dark .slide-txt h3, html body[id] .rslides li.dark .slide-txt p, html body[id] .rslides li.dark .slide-txt span, html body[id] .rslides li.dark .info-wrap, html body[id] .rslides li.dark .info-wrap .slide-txt, html body[id] .rslides li.dark .info-wrap .slide-txt h1, html body[id] .rslides li.dark .info-wrap .slide-txt h2, html body[id] .rslides li.dark .info-wrap .slide-txt h3, html body[id] .rslides li.dark .info-wrap .slide-txt p, html body[id] .rslides li.dark .info-wrap .slide-txt span { color: #005E81 !important; } html body[id] .rslides li.dark .slide-txt a:not(.btn), html body[id] .rslides li.dark .info-wrap .slide-txt a:not(.btn) { color: #005E81 !important; } html body[id] .rslides li.dark .slide-txt a:not(.btn):hover, html body[id] .rslides li.dark .info-wrap .slide-txt a:not(.btn):hover { color: #008A7E !important; } html body[id] .rslides li.light .slide-txt, html body[id] .rslides li.light .slide-txt h1, html body[id] .rslides li.light .slide-txt h2, html body[id] .rslides li.light .slide-txt h3, html body[id] .rslides li.light .slide-txt p, html body[id] .rslides li.light .slide-txt span, html body[id] .rslides li.light .info-wrap .slide-txt, html body[id] .rslides li.light .info-wrap .slide-txt h1, html body[id] .rslides li.light .info-wrap .slide-txt h2, html body[id] .rslides li.light .info-wrap .slide-txt h3, html body[id] .rslides li.light .info-wrap .slide-txt p, html body[id] .rslides li.light .info-wrap .slide-txt span { color: #ffffff !important; } html body[id] .rslides li.light .slide-txt a:not(.btn), html body[id] .rslides li.light .info-wrap .slide-txt a:not(.btn) { color: #ffffff !important; } html body[id] .rslides li.light .slide-txt a:not(.btn):hover, html body[id] .rslides li.light .info-wrap .slide-txt a:not(.btn):hover { color: #ffffff !important; opacity: 0.85 !important; } /* CTA button on every slide should sit on its own line below the body text (source render). WP serialisation strips the `

    ` wrapper around descriptions, so the `a.btn` ends up as an inline sibling of the bare text node. Use `display: block` with `width: fit-content` to keep the button sized to its label while forcing it onto its own line in flow. Bio variant (.btn.bio) already has its own block layout rules. */ html body[id] #homeSlides .info-wrap .slide-txt a.btn:not(.bio), html body[id] .rslides li .info-wrap .slide-txt a.btn:not(.bio) { display: block !important; width: fit-content !important; clear: both !important; margin-top: 24px !important; } /* `.btn.bio` variant (Featured Provider slides) — source HTML places an `` location-logo immediately after the anchor, so the button needs to render on its own line with the logo below it. */ body .info-wrap .slide-txt a.btn.bio, body .info-wrap a.btn.bio { display: block !important; max-width: 200px !important; min-width: 0 !important; margin: 20px 0 !important; padding: 6px 18px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center !important; } /* FHS masthead logo sizing — match legacy `.logo img` constraints. */ header .logo img, .logo img { max-width: 285px !important; max-height: 80px !important; width: auto !important; height: auto !important; } /* Add a bit of breathing room between the masthead logo cell and the first nav item ("Find a Doctor"). The legacy `display: table-cell` layout doesn't include any horizontal gap, so the logo butts up against the nav. 20px right padding on the .logo cell gives separation without forcing a nav wrap (legacy default 50px between items + 6 items can overflow). */ header .logo, .logo { padding-right: 20px !important; } /* Compact the nav item gap so all 6 primary items (Find a Doctor, Services, Patients & Visitors, Careers, Locations, About) fit on one row at 1280px viewport. Legacy default is `nav.primary > ul > li { margin-right: 50px }` which over a 6-item nav consumes ~250px just in margins — push it tighter. */ html body[id] header nav.primary > ul > li, html body[id] nav.primary > ul > li { margin-right: 28px !important; } html body[id] header nav.primary > ul > li:last-child, html body[id] nav.primary > ul > li:last-child { margin-right: 0 !important; } /* Homepage layout fix — `ul.ico` (the row of 6 icon promos under the carousel) has floated `

  • ` children but no clearfix on the parent. The floats escape and collapse subsequent sections (#siteLocations, .highlights, .hw, .date-feed) to width:0 / left:1230. Add a clearfix so subsequent siblings render at full width. Same hazard exists on any page with similar legacy patterns; scope generously. */ html body[id] ul.ico::after, html body[id] ul.ico::before, html body[id] .hw::after, html body[id] .hw ul::after, html body[id] .highlights::after, html body[id] #siteLocations::after, html body[id] .date-feed::after, html body[id] .date-feed ul::after { content: "" !important; display: table !important; clear: both !important; } html body[id] ul.ico, html body[id] .hw, html body[id] .hw ul, html body[id] .highlights, html body[id] #siteLocations, html body[id] .date-feed, html body[id] .date-feed ul { overflow: hidden !important; } /* `ul.ico` — match source: 60px top margin (gap below carousel), no bullets. */ html body[id] ul.ico, html body[id] ul.ico li { list-style: none !important; } html body[id] ul.ico { margin: 60px 0 0 !important; padding-left: 0 !important; } /* `.hw` tiles — match source values. Source applies bg on `.hw ul li.item1 a` and `.hw ul li.item2 a` (display:block padding 55px 40px 65px), but WP serialisation collapsed `` to wrap only the trailing ``. So apply the bg + padding on `
  • ` instead, mirroring source dimensions. */ html body[id] .hw ul li.item1, html body[id] .hw ul li:first-child { background-color: #005E81 !important; } html body[id] .hw ul li.item2, html body[id] .hw ul li:last-child { background-color: #008A7E !important; } /* Stretch both .hw tiles to the same height (source render shows them visually equal even though content length differs). Use flex on the ul so item1 and item2 stretch. Floats on li still work for source's width:49% sizing, but flex prevails for height. */ html body[id] .hw ul { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 2% !important; } html body[id] .hw ul li { width: 49% !important; color: #ffffff !important; padding: 55px 40px 65px !important; box-sizing: border-box !important; flex: 1 1 49% !important; } html body[id] .hw ul li.item1, html body[id] .hw ul li:first-child { float: left !important; } html body[id] .hw ul li.item2, html body[id] .hw ul li:last-child { float: right !important; } html body[id] .hw ul li a { background: transparent !important; display: inline !important; min-height: 0 !important; padding: 0 !important; color: #ffffff !important; } html body[id] .hw ul li img { float: right !important; margin: 20px 0 0 20px !important; max-width: 80px !important; height: auto !important; position: static !important; } html body[id] .hw ul li h2 { font-weight: 700 !important; margin: 0 0 15px !important; font-size: 165% !important; color: #ffffff !important; } html body[id] .hw ul li p { margin: 0 0 40px !important; font-size: 125% !important; line-height: 165% !important; color: #ffffff !important; } html body[id] .hw ul li p.lm { margin: 0 !important; } html body[id] .hw ul li, html body[id] .hw ul li h1, html body[id] .hw ul li h2, html body[id] .hw ul li p, html body[id] .hw ul li p.lm { text-shadow: none !important; } /* Restore source spacing for `.highlights`, `.hw`, `ul.ico`. Source uses: .hw { padding: 33px 0 110px } .highlights { padding: 33px 50px 110px } ul.ico { margin: 60px 0 0 } Don't override these — let source/auto-mirror values stand. */ /* `.highlights` (Healthy Highlights) — explicit source-faithful card text spacing. Source has bigger line-heights and a 135% Learn More link. */ html body[id] .highlights .img-wrap { margin: 0 0 25px !important; max-height: 170px !important; overflow: hidden !important; } html body[id] .highlights h2 { font-size: 165% !important; font-weight: 400 !important; margin: 0 0 10px !important; } html body[id] .highlights p { margin: 0 !important; font-size: 125% !important; line-height: 185% !important; } /* WP serialisation dropped the `

    ` around the description, so the body text renders as a bare text node inside `.hh li > ul > li`. Set the description-style font properties on the card itself — h2 + .learn-more override these via their own rules, so the styles only land on the bare text. Source target: ~17.5px / 185% line-height / gray. */ html body[id] .hh li > ul > li { font-size: 125% !important; line-height: 185% !important; color: #4D6881 !important; } html body[id] .highlights .learn-more { margin: 22px 0 0 !important; font-weight: 500 !important; font-size: 110% !important; line-height: 1.4 !important; display: block !important; clear: both !important; } html body[id] .highlights .learn-more a, html body[id] .highlights .learn-more a:link, html body[id] .highlights .learn-more a:visited { color: #008A7E !important; } html body[id] .highlights .learn-more a:hover { color: #005E81 !important; } html body[id] .highlights h2 a, html body[id] .highlights h2 a:link, html body[id] .highlights h2 a:visited { color: #005E81 !important; } /* `.hh` 4-up grid — match source 23.75% width / 1.6666% right margin. */ html body[id] .hh li > ul > li { width: 23.75% !important; max-width: 280px !important; margin: 0 1.6666% 0 0 !important; float: left !important; position: relative !important; display: list-item !important; } html body[id] .hh li > ul > li.last, html body[id] .hh li > ul > li:last-child { margin-right: 0 !important; } /* News & Press Releases (.date-feed) date-row arrow — auto-mirror only matches `background-color`/`color`, not `border-left` declarations, so the CSS triangle is still legacy navy `#00457c`. Match the date-row bg (FHS primary navy `#005E81`) for visual coherence. */ html body[id] .date-feed .date-row .arrow-right, html body[id] .date-row .arrow-right, html body[id] .arrow-right { border-left-color: #005E81 !important; } /* Hero carousel slide height — pin to 500px so the absolute-positioned slide LIs don't collapse the rslides container to 0 and the carousel doesn't disappear. Scoped to #homeSlides ONLY (NOT generic .rslides), because responsiveSlides JS adds .rslides class to .hh too — pinning .rslides forces the Healthy Highlights slider to 500px and creates dead space below its 360px-tall cards. */ body #homeSlides, body .slide-wrap > #homeSlides { position: relative !important; height: 500px !important; min-height: 500px !important; max-height: 500px !important; overflow: hidden !important; } body #homeSlides > li { height: 500px !important; min-height: 500px !important; max-height: 500px !important; width: 100% !important; top: 0 !important; left: 0 !important; overflow: hidden !important; } body #homeSlides .info-wrap { height: 500px !important; min-height: 500px !important; max-height: 500px !important; overflow: hidden !important; } /* Source's inline `