DeCentN2Madness
e5af9cbca2
- relocate header, footer, nav, hero, and page-hero styles into their owning components - move blog index, blog post, team, video, insurance, CTA, and home-section styles out of the global sheet - keep focused on shared primitives such as buttons, cards, links, and list styling - preserve existing layout and responsive behavior while reducing global CSS scope
44 lines
1.8 KiB
Plaintext
44 lines
1.8 KiB
Plaintext
---
|
|
import LanguageSwitcher from './LanguageSwitcher.astro';
|
|
import MainNav from './MainNav.astro';
|
|
import MobileNav from './MobileNav.astro';
|
|
const { lang = 'en' } = Astro.props;
|
|
const utility = lang === 'es'
|
|
? { credit: 'Solicitar CareCredit', bill: 'Pagar mi factura' }
|
|
: { credit: 'Apply Care Credit', bill: 'Pay My Bill' };
|
|
---
|
|
<header class="site-header">
|
|
<div class="utility-bar">
|
|
<div class="container utility-inner">
|
|
<a href="https://go.carecredit.com/consumer/providersearch">{utility.credit}</a>
|
|
<a href="https://www.patientnotebook.com/abaclinic/Enhanced/SendMoney/MakePayment">{utility.bill}</a>
|
|
</div>
|
|
</div>
|
|
<div class="container header-inner">
|
|
<a class="brand" href={lang === 'en' ? '/' : `/${lang}`}>
|
|
<img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" />
|
|
</a>
|
|
<MainNav lang={lang} />
|
|
<MobileNav lang={lang} />
|
|
<LanguageSwitcher />
|
|
<a class="button button-small" href="/tour">Tour AIA</a>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.utility-bar { background: var(--color-primary); color: white; font-size: .85rem; }
|
|
.utility-inner { align-items: center; display: flex; gap: var(--space-md); justify-content: flex-end; min-height: 38px; }
|
|
.utility-bar a { color: white; text-decoration: none; }
|
|
.site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
|
|
.header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
|
|
.brand img { width: 150px; }
|
|
@media (max-width: 950px) {
|
|
.header-inner > .button { display: none; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.utility-inner { justify-content: center; }
|
|
.header-inner { min-height: 88px; }
|
|
.header-inner .lang-switcher { margin-left: auto; }
|
|
}
|
|
</style>
|