Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
abd2aab752
|
|||
|
965c090782
|
|||
|
a163ff98c9
|
@@ -12,3 +12,9 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
|
|||||||
<a class="text-link" href={href}>{readMore}</a>
|
<a class="text-link" href={href}>{readMore}</a>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
|
||||||
|
.blog-card-meta img { aspect-ratio: 1; border-radius: 50%; height: 42px; width: 42px; }
|
||||||
|
.blog-card h3 { font-size: 1.35rem; }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -4,3 +4,8 @@
|
|||||||
<a class="button button-light" href="/client-consultation">Schedule a Free Consultation</a>
|
<a class="button button-light" href="/client-consultation">Schedule a Free Consultation</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.cta-band { background: var(--color-primary); color: white; padding-block: var(--space-xl); }
|
||||||
|
.cta-band h2, .cta-band .eyebrow { color: white; margin: 0; }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -63,3 +63,28 @@ const labels = lang === 'es'
|
|||||||
<p><a href="/privacy-policy">Privacy Policy</a> | <a href="/faqs">FAQ</a></p>
|
<p><a href="/privacy-policy">Privacy Policy</a> | <a href="/faqs">FAQ</a></p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.site-footer { background: var(--color-primary-dark); color: white; padding-block: var(--space-xl) var(--space-md); }
|
||||||
|
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr 1.5fr; }
|
||||||
|
.site-footer h2, .site-footer a { color: white; text-decoration: none; }
|
||||||
|
.site-footer h2 { font-size: 1.25rem; letter-spacing: .3px; margin-bottom: 1.2rem; }
|
||||||
|
.site-footer a:hover { color: var(--color-accent); }
|
||||||
|
.site-footer ul { list-style: none; padding: 0; }
|
||||||
|
.site-footer li { line-height: 2.6; margin-bottom: 0; }
|
||||||
|
.site-footer p { line-height: 2.6; }
|
||||||
|
.footer-contact { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; margin-top: 2rem; }
|
||||||
|
.footer-contact-item { align-items: flex-start; display: flex; gap: .6rem; line-height: 1.5; }
|
||||||
|
.footer-contact-item img { flex-shrink: 0; }
|
||||||
|
.footer-contact-item address { font-style: normal; }
|
||||||
|
.social-links { display: flex; gap: .85rem; margin-left: 1.6rem; margin-top: .25rem; }
|
||||||
|
.social-links a { align-items: center; color: white; display: flex; opacity: .85; }
|
||||||
|
.social-links a:hover { color: var(--color-accent); opacity: 1; }
|
||||||
|
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 20%); display: flex; justify-content: space-between; margin-top: var(--space-lg); padding-top: var(--space-md); }
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.footer-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.footer-bottom { align-items: flex-start; flex-direction: column; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -24,3 +24,20 @@ const utility = lang === 'es'
|
|||||||
<a class="button button-small" href="/tour">Tour AIA</a>
|
<a class="button button-small" href="/tour">Tour AIA</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
||||||
|
|||||||
@@ -13,3 +13,12 @@ const { title, eyebrow, description, image, alt = '' } = Astro.props;
|
|||||||
{image && <img src={image} alt={alt} loading="eager" />}
|
{image && <img src={image} alt={alt} loading="eager" />}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
|
||||||
|
.hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
|
||||||
|
.hero img { max-height: 430px; object-fit: contain; width: 100%; }
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -38,34 +38,32 @@ function fromHomeContent(home: HomePageContent): HomeSection[] {
|
|||||||
const sections: HomeSection[] = entry.data.home
|
const sections: HomeSection[] = entry.data.home
|
||||||
? fromHomeContent(entry.data.home)
|
? fromHomeContent(entry.data.home)
|
||||||
: ((entry.data.sections ?? []) as HomeSection[]);
|
: ((entry.data.sections ?? []) as HomeSection[]);
|
||||||
|
|
||||||
function renderSection(section: HomeSection) {
|
|
||||||
switch (section.type) {
|
|
||||||
case 'hero':
|
|
||||||
return <HomeHero section={section} />;
|
|
||||||
case 'services-intro':
|
|
||||||
return <HomeServicesIntro section={section} />;
|
|
||||||
case 'benefits':
|
|
||||||
return <HomeBenefits section={section} />;
|
|
||||||
case 'skills':
|
|
||||||
return <HomeSkills section={section} />;
|
|
||||||
case 'insurance':
|
|
||||||
return <HomeInsurance section={section} />;
|
|
||||||
case 'esa':
|
|
||||||
return <HomeEsa section={section} />;
|
|
||||||
case 'financial-help':
|
|
||||||
return <HomeFinancialHelp section={section} />;
|
|
||||||
case 'process':
|
|
||||||
return <HomeProcess section={section} />;
|
|
||||||
case 'director':
|
|
||||||
return <HomeDirector section={section} />;
|
|
||||||
case 'testimonials':
|
|
||||||
return <HomeTestimonials section={section} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
---
|
---
|
||||||
<BaseLayout {title} {description} {canonical} {lang}>
|
<BaseLayout {title} {description} {canonical} {lang}>
|
||||||
{sections.map(renderSection)}
|
{sections.map((section) => {
|
||||||
|
switch (section.type) {
|
||||||
|
case 'hero':
|
||||||
|
return <HomeHero section={section} />;
|
||||||
|
case 'services-intro':
|
||||||
|
return <HomeServicesIntro section={section} />;
|
||||||
|
case 'benefits':
|
||||||
|
return <HomeBenefits section={section} />;
|
||||||
|
case 'skills':
|
||||||
|
return <HomeSkills section={section} />;
|
||||||
|
case 'insurance':
|
||||||
|
return <HomeInsurance section={section} />;
|
||||||
|
case 'esa':
|
||||||
|
return <HomeEsa section={section} />;
|
||||||
|
case 'financial-help':
|
||||||
|
return <HomeFinancialHelp section={section} />;
|
||||||
|
case 'process':
|
||||||
|
return <HomeProcess section={section} />;
|
||||||
|
case 'director':
|
||||||
|
return <HomeDirector section={section} />;
|
||||||
|
case 'testimonials':
|
||||||
|
return <HomeTestimonials section={section} />;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})}
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
@@ -4,3 +4,10 @@ const logos = ['aetna.png', 'bluecrossblueshield-logo-1.webp', 'logo-ahcccs.webp
|
|||||||
<section class="insurance-strip" aria-labelledby="insurance-title">
|
<section class="insurance-strip" aria-labelledby="insurance-title">
|
||||||
<div class="container"><h2 id="insurance-title">Insurance partners</h2><div class="logo-row">{logos.map((logo) => <img src={`/assets/images/${logo}`} alt="" loading="lazy" />)}</div></div>
|
<div class="container"><h2 id="insurance-title">Insurance partners</h2><div class="logo-row">{logos.map((logo) => <img src={`/assets/images/${logo}`} alt="" loading="lazy" />)}</div></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
|
||||||
|
.insurance-strip h2 { font-size: 1.4rem; }
|
||||||
|
.logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
|
||||||
|
.logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -51,3 +51,15 @@ const activeShort = langMeta[activeCode]?.short ?? 'EN';
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.lang-switcher { position: relative; }
|
||||||
|
.lang-switcher__trigger { align-items: center; color: var(--color-primary); cursor: pointer; display: flex; font-size: .85rem; font-weight: 700; gap: .35rem; }
|
||||||
|
.lang-switcher__trigger svg { flex-shrink: 0; }
|
||||||
|
.lang-switcher__menu { background: white; box-shadow: var(--shadow-md); display: none; left: 50%; list-style: none; margin: 0; min-width: 110px; padding: .5rem 0 .4rem; position: absolute; top: 100%; transform: translateX(-50%); z-index: 10; }
|
||||||
|
.lang-switcher__menu a { color: rgb(83 83 91); display: block; font-size: .85rem; padding: .4rem .9rem; text-decoration: none; white-space: nowrap; }
|
||||||
|
.lang-switcher__menu a:hover { background: var(--color-primary); color: white; }
|
||||||
|
.lang-switcher__menu a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
|
||||||
|
.lang-switcher:hover .lang-switcher__menu,
|
||||||
|
.lang-switcher:focus-within .lang-switcher__menu { display: block; }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -96,3 +96,10 @@ const { slug } = Astro.props;
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); margin-block: var(--space-xl); padding-top: var(--space-md); }
|
||||||
|
.like-view-counter button { background: white; border: 1px solid var(--color-border); border-radius: 999px; padding: .6rem 1rem; }
|
||||||
|
.like-view-counter button.liked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
|
||||||
|
.like-view-counter button:disabled { cursor: wait; opacity: .65; }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -2,3 +2,7 @@
|
|||||||
const { title = 'Scottsdale', address = '8901 E Raintree Dr Ste 160, Scottsdale, AZ 85260' } = Astro.props;
|
const { title = 'Scottsdale', address = '8901 E Raintree Dr Ste 160, Scottsdale, AZ 85260' } = Astro.props;
|
||||||
---
|
---
|
||||||
<article class="card location-card"><h3>{title}</h3><p>{address}</p><a class="text-link" href={`https://maps.google.com/?q=${encodeURIComponent(address)}`}>Get directions</a></article>
|
<article class="card location-card"><h3>{title}</h3><p>{address}</p><a class="text-link" href={`https://maps.google.com/?q=${encodeURIComponent(address)}`}>Get directions</a></article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.location-card { padding: var(--space-lg); }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -22,3 +22,19 @@ const aboutLinks = lang === 'es'
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.main-nav { margin-inline: auto; }
|
||||||
|
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
|
||||||
|
.main-nav li { position: relative; }
|
||||||
|
.main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
|
||||||
|
.main-nav a:hover { color: var(--color-accent-strong); }
|
||||||
|
.main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
|
||||||
|
.main-nav .submenu a { display: block; padding: .45rem 1rem; }
|
||||||
|
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.main-nav { display: none; }
|
||||||
|
:global(.mobile-nav) .main-nav { display: block; }
|
||||||
|
:global(.mobile-nav) .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -6,3 +6,10 @@ const { lang = 'en' } = Astro.props;
|
|||||||
<summary>Menu</summary>
|
<summary>Menu</summary>
|
||||||
<MainNav lang={lang} />
|
<MainNav lang={lang} />
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mobile-nav { display: none; }
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.mobile-nav { display: block; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -16,3 +16,18 @@ const { title, image, eyebrow, constrain = false } = Astro.props;
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
|
||||||
|
.page-hero h1 { margin: 0; }
|
||||||
|
.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
|
||||||
|
.page-hero--image > .container { padding-block: 10rem; }
|
||||||
|
.page-hero--image h1 { max-width: 600px; }
|
||||||
|
.page-hero__copy { max-width: 600px; }
|
||||||
|
.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.page-hero--image > .container { padding-block: 6.25rem; }
|
||||||
|
.page-hero--image { text-align: center; }
|
||||||
|
.page-hero--image h1, .page-hero__copy { margin-inline: auto; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -65,3 +65,21 @@ const groups = [
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.team-intro { padding-block: 4rem; text-align: center; }
|
||||||
|
.team-intro .script-label { font-size: 1.8rem; }
|
||||||
|
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
||||||
|
.team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
|
||||||
|
.team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
|
||||||
|
.team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
|
||||||
|
.team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
|
||||||
|
.team-member p { margin: 0; }
|
||||||
|
.team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.team-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (min-width: 761px) and (max-width: 1050px) {
|
||||||
|
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -49,3 +49,18 @@ const { image, alt, videoUrl, videoTitle } = Astro.props;
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
|
||||||
|
.video-card img { width: 100%; }
|
||||||
|
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
|
||||||
|
.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
|
||||||
|
.video-card::before { animation-delay: .5s; }
|
||||||
|
.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
|
||||||
|
.video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
|
||||||
|
.video-dialog-inner { position: relative; }
|
||||||
|
.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
|
||||||
|
.video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
|
||||||
|
.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
|
||||||
|
@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -17,6 +17,17 @@ const { section } = Astro.props;
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.process-section h2 { text-align: center; }
|
||||||
|
.process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
|
||||||
|
.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
|
||||||
|
.process-grid div:hover { transform: scale(1.05); z-index: 1; }
|
||||||
|
.process-grid img { margin: 0 auto 1rem; width: 42%; }
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.process-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function equalizeProcessCards() {
|
function equalizeProcessCards() {
|
||||||
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
||||||
|
|||||||
@@ -50,3 +50,14 @@ const { section } = Astro.props;
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.testimonial-section h2 { text-align: center; }
|
||||||
|
.testimonial-section blockquote { margin: 0 auto; max-width: 720px; padding: 0 2rem; text-align: center; }
|
||||||
|
.testimonial-author { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
|
||||||
|
.testimonial-swiper { --swiper-pagination-bullet-horizontal-gap: 1vw; padding-bottom: 3rem !important; }
|
||||||
|
.testimonial-swiper .swiper-pagination-bullet { background-color: var(--color-accent); opacity: 1; }
|
||||||
|
.testimonial-swiper .swiper-pagination-bullet-active { background-color: var(--color-accent-strong); }
|
||||||
|
.testimonial-swiper .swiper-button-next, .testimonial-swiper .swiper-button-prev { color: var(--color-accent); }
|
||||||
|
.testimonial-swiper .swiper-button-next:hover, .testimonial-swiper .swiper-button-prev:hover { color: var(--color-accent-strong); }
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -10,3 +10,24 @@ const canonical = `https://www.azinstitute4autism.com${languagePrefix}/library`;
|
|||||||
<section class="library-intro"><div class="container"><h2>Library</h2><p>{description}</p></div></section>
|
<section class="library-intro"><div class="container"><h2>Library</h2><p>{description}</p></div></section>
|
||||||
<div class="container section library-layout"><slot /></div>
|
<div class="container section library-layout"><slot /></div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
|
||||||
|
.library-intro h2 { color: white; }
|
||||||
|
.library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
|
||||||
|
.library-sidebar { position: sticky; top: 1rem; }
|
||||||
|
.library-sidebar label { display: block; font-weight: 700; margin-bottom: .4rem; }
|
||||||
|
.library-sidebar input { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }
|
||||||
|
.library-sidebar h2 { font-size: 1.1rem; margin-top: 2rem; }
|
||||||
|
.library-sidebar ul { list-style: none; padding: 0; }
|
||||||
|
.library-sidebar li { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
|
||||||
|
.library-sidebar a { color: var(--color-primary); font-size: .9rem; }
|
||||||
|
.blog-list { display: grid; gap: 2rem; }
|
||||||
|
.blog-list .blog-card { box-shadow: none; display: grid; grid-template-columns: 240px 1fr; }
|
||||||
|
.blog-list .blog-card > a img { aspect-ratio: 4 / 3; height: 100%; }
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.library-layout { grid-template-columns: 1fr; }
|
||||||
|
.library-sidebar { position: static; }
|
||||||
|
.blog-list .blog-card { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -19,3 +19,15 @@ const { entry } = Astro.props;
|
|||||||
</article>
|
</article>
|
||||||
<BlogPostFooter entryId={entry.id} />
|
<BlogPostFooter entryId={entry.id} />
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.article-header { padding-block: 4.5rem 0; text-align: left; }
|
||||||
|
.article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
|
||||||
|
.article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }
|
||||||
|
.article-byline img { margin-top: 0; height: 52px; width: 52px; }
|
||||||
|
.article-featured { height: 480px; margin: 3rem auto 0; max-width: 800px; overflow: hidden; }
|
||||||
|
.article-featured img { height: 100%; margin: 0; object-fit: cover; width: 100%; }
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.article-featured { height: auto; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -6,6 +6,10 @@ const posts = (await getCollection('blog', ({ data }) => data.lang === 'en' && !
|
|||||||
const popular = posts.slice(0, 5);
|
const popular = posts.slice(0, 5);
|
||||||
---
|
---
|
||||||
<BlogIndexLayout title="The Library at AZ Institute for Autism" description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance.">
|
<BlogIndexLayout title="The Library at AZ Institute for Autism" description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance.">
|
||||||
|
<div class="container library-copy">
|
||||||
|
<p>Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, including teaching self-advocacy, proactive and reactive strategies, and innovative intervention techniques.</p>
|
||||||
|
<p>We also highlight community events, success stories, and expert guidance to foster understanding and empowerment. Whether you're a parent, caregiver, educator, or advocate, our goal is to provide meaningful content that helps children with autism reach their highest potential in a compassionate and supportive environment. Stay connected with us as we continue to share knowledge and celebrate progress!</p>
|
||||||
|
</div>
|
||||||
<div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
|
<div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
|
||||||
<aside class="library-sidebar">
|
<aside class="library-sidebar">
|
||||||
<label for="library-search">Search</label>
|
<label for="library-search">Search</label>
|
||||||
|
|||||||
@@ -1,149 +1,14 @@
|
|||||||
.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; }
|
|
||||||
.lang-switcher { position: relative; }
|
|
||||||
.lang-switcher__trigger { align-items: center; color: var(--color-primary); cursor: pointer; display: flex; font-size: .85rem; font-weight: 700; gap: .35rem; }
|
|
||||||
.lang-switcher__trigger svg { flex-shrink: 0; }
|
|
||||||
.lang-switcher__menu { background: white; box-shadow: var(--shadow-md); display: none; left: 50%; list-style: none; margin: 0; min-width: 110px; padding: .5rem 0 .4rem; position: absolute; top: 100%; transform: translateX(-50%); z-index: 10; }
|
|
||||||
.lang-switcher__menu a { color: rgb(83 83 91); display: block; font-size: .85rem; padding: .4rem .9rem; text-decoration: none; white-space: nowrap; }
|
|
||||||
.lang-switcher__menu a:hover { background: var(--color-primary); color: white; }
|
|
||||||
.lang-switcher__menu a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }
|
|
||||||
.lang-switcher:hover .lang-switcher__menu,
|
|
||||||
.lang-switcher:focus-within .lang-switcher__menu { display: block; }
|
|
||||||
.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; }
|
|
||||||
.main-nav { margin-inline: auto; }
|
|
||||||
.main-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
|
|
||||||
.main-nav li { position: relative; }
|
|
||||||
.main-nav a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
|
|
||||||
.main-nav a:hover { color: var(--color-accent-strong); }
|
|
||||||
.main-nav .submenu { background: white; box-shadow: var(--shadow-md); display: none; gap: 0; left: -1rem; min-width: 180px; padding: .75rem 0; position: absolute; top: 100%; }
|
|
||||||
.main-nav .submenu a { display: block; padding: .45rem 1rem; }
|
|
||||||
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
|
|
||||||
.mobile-nav { display: none; }
|
|
||||||
.button { background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 4px; color: var(--color-primary); display: inline-block; padding: .65rem 1.2rem; text-decoration: none; transition: .3s linear all; }
|
.button { background: var(--color-accent); border: 2px solid var(--color-accent); border-radius: 4px; color: var(--color-primary); display: inline-block; padding: .65rem 1.2rem; text-decoration: none; transition: .3s linear all; }
|
||||||
.button:hover { background: transparent; border-color: var(--color-accent-strong); color: var(--color-primary); }
|
.button:hover { background: transparent; border-color: var(--color-accent-strong); color: var(--color-primary); }
|
||||||
.button-small { font-size: .9rem; }
|
.button-small { font-size: .9rem; }
|
||||||
.button-light { background: white; color: var(--color-primary-dark); }
|
.button-light { background: white; color: var(--color-primary-dark); }
|
||||||
.hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
|
|
||||||
.hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
|
|
||||||
.hero img { max-height: 430px; object-fit: contain; width: 100%; }
|
|
||||||
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
|
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
|
||||||
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
|
.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
|
||||||
.card-body, .location-card { padding: var(--space-lg); }
|
.card-body { padding: var(--space-lg); }
|
||||||
.card h2, .card h3 { margin-top: 0; }
|
.card h2, .card h3 { margin-top: 0; }
|
||||||
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
|
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
|
||||||
.text-link { font-weight: 700; }
|
.text-link { font-weight: 700; }
|
||||||
.insurance-strip { background: white; border-block: 1px solid var(--color-border); padding-block: var(--space-lg); text-align: center; }
|
|
||||||
.insurance-strip h2 { font-size: 1.4rem; }
|
|
||||||
.logo-row { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; }
|
|
||||||
.logo-row img { filter: grayscale(1); max-height: 55px; max-width: 130px; }
|
|
||||||
.cta-band { background: var(--color-primary); color: white; padding-block: var(--space-xl); }
|
|
||||||
.cta-band h2, .cta-band .eyebrow { color: white; margin: 0; }
|
|
||||||
.site-footer { background: var(--color-primary-dark); color: white; padding-block: var(--space-xl) var(--space-md); }
|
|
||||||
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr 1fr 1.5fr; }
|
|
||||||
.site-footer h2, .site-footer a { color: white; text-decoration: none; }
|
|
||||||
.site-footer h2 { font-size: 1.25rem; letter-spacing: .3px; margin-bottom: 1.2rem; }
|
|
||||||
.site-footer a:hover { color: var(--color-accent); }
|
|
||||||
.site-footer ul { list-style: none; padding: 0; }
|
|
||||||
.site-footer li { line-height: 2.6; margin-bottom: 0; }
|
|
||||||
.site-footer p { line-height: 2.6; }
|
|
||||||
.footer-contact { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; margin-top: 2rem; }
|
|
||||||
.footer-contact-item { align-items: flex-start; display: flex; gap: .6rem; line-height: 1.5; }
|
|
||||||
.footer-contact-item img { flex-shrink: 0; }
|
|
||||||
.footer-contact-item address { font-style: normal; }
|
|
||||||
.social-links { display: flex; gap: .85rem; margin-left: 1.6rem; margin-top: .25rem; }
|
|
||||||
.social-links a { align-items: center; color: white; display: flex; opacity: .85; }
|
|
||||||
.social-links a:hover { color: var(--color-accent); opacity: 1; }
|
|
||||||
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 20%); display: flex; justify-content: space-between; margin-top: var(--space-lg); padding-top: var(--space-md); }
|
|
||||||
.article-header { padding-block: var(--space-xl) var(--space-lg); text-align: center; }
|
|
||||||
.article-header h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); }
|
|
||||||
.article-header img { border-radius: var(--radius-lg); margin-top: var(--space-lg); width: 100%; }
|
|
||||||
.like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); margin-block: var(--space-xl); padding-top: var(--space-md); }
|
|
||||||
.like-view-counter button { background: white; border: 1px solid var(--color-border); border-radius: 999px; padding: .6rem 1rem; }
|
|
||||||
.like-view-counter button.liked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
|
|
||||||
.like-view-counter button:disabled { cursor: wait; opacity: .65; }
|
|
||||||
.page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
|
|
||||||
.page-hero h1 { margin: 0; }
|
|
||||||
.page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
|
|
||||||
.page-hero--image > .container { padding-block: 10rem; }
|
|
||||||
.page-hero--image h1 { max-width: 600px; }
|
|
||||||
.page-hero__copy { max-width: 600px; }
|
|
||||||
.page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
|
|
||||||
.library-intro { background: var(--color-primary); color: white; padding-block: 3rem; }
|
|
||||||
.library-intro h2 { color: white; }
|
|
||||||
.library-layout { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1fr 240px; }
|
|
||||||
.library-sidebar { position: sticky; top: 1rem; }
|
|
||||||
.library-sidebar label { display: block; font-weight: 700; margin-bottom: .4rem; }
|
|
||||||
.library-sidebar input { border: 1px solid var(--color-border); border-radius: 4px; font: inherit; padding: .7rem; width: 100%; }
|
|
||||||
.library-sidebar h2 { font-size: 1.1rem; margin-top: 2rem; }
|
|
||||||
.library-sidebar ul { list-style: none; padding: 0; }
|
|
||||||
.library-sidebar li { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
|
|
||||||
.library-sidebar a { color: var(--color-primary); font-size: .9rem; }
|
|
||||||
.blog-list { display: grid; gap: 2rem; }
|
|
||||||
.blog-list .blog-card { box-shadow: none; display: grid; grid-template-columns: 240px 1fr; }
|
|
||||||
.blog-list .blog-card > a img { aspect-ratio: 4 / 3; height: 100%; }
|
|
||||||
.blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
|
|
||||||
.blog-card-meta img { aspect-ratio: 1; border-radius: 50%; height: 42px; width: 42px; }
|
|
||||||
.blog-card h3 { font-size: 1.35rem; }
|
|
||||||
.article-header { padding-block: 4.5rem 0; text-align: left; }
|
|
||||||
.article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
|
|
||||||
.article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }
|
|
||||||
.article-byline img { margin-top: 0; height: 52px; width: 52px; }
|
|
||||||
.article-featured { height: 480px; margin: 3rem auto 0; max-width: 800px; overflow: hidden; }
|
|
||||||
.article-featured img { height: 100%; margin: 0; object-fit: cover; width: 100%; }
|
|
||||||
.team-intro { padding-block: 4rem; text-align: center; }
|
|
||||||
.team-intro .script-label { font-size: 1.8rem; }
|
|
||||||
.team-group { padding-block: 2rem 4rem; text-align: center; }
|
|
||||||
.team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
|
|
||||||
.team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
|
|
||||||
.team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
|
|
||||||
.team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
|
|
||||||
.team-member p { margin: 0; }
|
|
||||||
.team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
|
|
||||||
@media (max-width: 950px) { .main-nav, .header-inner > .button { display: none; } .mobile-nav { display: block; } .mobile-nav .main-nav { display: block; } .mobile-nav .main-nav ul { align-items: flex-start; flex-direction: column; padding: var(--space-md); } .hero-grid, .footer-grid { grid-template-columns: 1fr; } }
|
|
||||||
.source-list { margin-block: 0 1.5rem; padding-inline-start: 2.5rem; }
|
.source-list { margin-block: 0 1.5rem; padding-inline-start: 2.5rem; }
|
||||||
.source-list li { line-height: 1.625; margin: 0; padding-inline-start: .15rem; }
|
.source-list li { line-height: 1.625; margin: 0; padding-inline-start: .15rem; }
|
||||||
.source-list li::marker { color: var(--color-accent); }
|
.source-list li::marker { color: var(--color-accent); }
|
||||||
.source-list li > p { margin-block: 0; }
|
.source-list li > p { margin-block: 0; }
|
||||||
.video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
|
|
||||||
.video-card img { width: 100%; }
|
|
||||||
.video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
|
|
||||||
.video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
|
|
||||||
.video-card::before { animation-delay: .5s; }
|
|
||||||
@keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
|
|
||||||
.video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
|
|
||||||
.video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
|
|
||||||
.video-dialog-inner { position: relative; }
|
|
||||||
.video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
|
|
||||||
.video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
|
|
||||||
.video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
|
|
||||||
.process-section h2, .testimonial-section h2 { text-align: center; }
|
|
||||||
.process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
|
|
||||||
.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
|
|
||||||
.process-grid div:hover { transform: scale(1.05); z-index: 1; }
|
|
||||||
.process-grid img { margin: 0 auto 1rem; width: 42%; }
|
|
||||||
.testimonial-section blockquote { margin: 0 auto; max-width: 720px; padding: 0 2rem; text-align: center; }
|
|
||||||
.testimonial-author { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
|
|
||||||
.testimonial-swiper { --swiper-pagination-bullet-horizontal-gap: 1vw; padding-bottom: 3rem !important; }
|
|
||||||
.testimonial-swiper .swiper-pagination-bullet { background-color: var(--color-accent); opacity: 1; }
|
|
||||||
.testimonial-swiper .swiper-pagination-bullet-active { background-color: var(--color-accent-strong); }
|
|
||||||
.testimonial-swiper .swiper-button-next, .testimonial-swiper .swiper-button-prev { color: var(--color-accent); }
|
|
||||||
.testimonial-swiper .swiper-button-next:hover, .testimonial-swiper .swiper-button-prev:hover { color: var(--color-accent-strong); }
|
|
||||||
@media (max-width: 760px) {
|
|
||||||
.utility-inner { justify-content: center; }
|
|
||||||
.header-inner { min-height: 88px; }
|
|
||||||
.header-inner .lang-switcher { margin-left: auto; }
|
|
||||||
.process-grid { grid-template-columns: 1fr 1fr; }
|
|
||||||
.footer-bottom { align-items: flex-start; flex-direction: column; }
|
|
||||||
.library-layout { grid-template-columns: 1fr; }
|
|
||||||
.library-sidebar { position: static; }
|
|
||||||
.blog-list .blog-card { grid-template-columns: 1fr; }
|
|
||||||
.article-featured { height: auto; }
|
|
||||||
.team-grid { grid-template-columns: 1fr; }
|
|
||||||
.page-hero--image > .container { padding-block: 6.25rem; }
|
|
||||||
.page-hero--image { text-align: center; }
|
|
||||||
.page-hero--image h1, .page-hero__copy { margin-inline: auto; }
|
|
||||||
}
|
|
||||||
@media (min-width: 761px) and (max-width: 1050px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
||||||
|
|||||||
Reference in New Issue
Block a user