DeCentN2Madness/aia-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: DeCentN2Madness/aia-website:7ef8b3a585556be725db8ebddde05c8fe2bc2038
Branches Tags
DeCentN2Madness/aia-website:main DeCentN2Madness/aia-website:faithful-astro-migration
...
compare: DeCentN2Madness/aia-website:abd2aab75203a53779557f1aafb0b60eaf5cce3d
Branches Tags
DeCentN2Madness/aia-website:faithful-astro-migration DeCentN2Madness/aia-website:main

3 Commits
7ef8b3a585 ... abd2aab752

Author SHA1 Message Date
DeCentN2Madness abd2aab752 feat(library): restore live-site intro copy above post listings 
- add the two missing Library introduction paragraphs between the hero and article grid
- match the live `/library` page structure without changing the shared library layout
- keep the existing sidebar and card listing behavior intact
 2026-06-11 14:28:24 -07:00
DeCentN2Madness 965c090782 fix(homepage): move section rendering into the Astro template 
- keep homepage section data driven from structured frontmatter
- render typed section components inside the template map instead of frontmatter helper code
- resolve the Astro parse error in HomePage.astro
- preserve the existing homepage section order and component split
 2026-06-11 14:26:02 -07:00
DeCentN2Madness a163ff98c9 refactor(styles): move component-specific CSS into Astro components 
- 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
 2026-06-11 13:56:25 -07:00
21 changed files with 249 additions and 164 deletions
Expand all files Collapse all files
www/src/components/BlogCard.astro
+6
View File
@@ -12,3 +12,9 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
<a class="text-link" href={href}>{readMore}</a>
</div>
</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>
www/src/components/ConsultationCTA.astro
+5
View File
@@ -4,3 +4,8 @@
<a class="button button-light" href="/client-consultation">Schedule a Free Consultation</a>
</div>
</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>
www/src/components/Footer.astro
+25
View File
@@ -63,3 +63,28 @@ const labels = lang === 'es'
<p><a href="/privacy-policy">Privacy Policy</a> | <a href="/faqs">FAQ</a></p>
</div>
</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>
www/src/components/Header.astro
+17
View File
@@ -24,3 +24,20 @@ const utility = lang === 'es'
<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>
www/src/components/Hero.astro
+9
View File
@@ -13,3 +13,12 @@ const { title, eyebrow, description, image, alt = '' } = Astro.props;
{image && <img src={image} alt={alt} loading="eager" />}
</div>
</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>
www/src/components/HomePage.astro
+5 -7
View File
@@ -38,8 +38,9 @@ function fromHomeContent(home: HomePageContent): HomeSection[] {
const sections: HomeSection[] = entry.data.home
? fromHomeContent(entry.data.home)
: ((entry.data.sections ?? []) as HomeSection[]);
function renderSection(section: HomeSection) {
---
<BaseLayout {title} {description} {canonical} {lang}>
{sections.map((section) => {
switch (section.type) {
case 'hero':
return <HomeHero section={section} />;
@@ -61,11 +62,8 @@ function renderSection(section: HomeSection) {
return <HomeDirector section={section} />;
case 'testimonials':
return <HomeTestimonials section={section} />;
}
default:
return null;
}
---
<BaseLayout {title} {description} {canonical} {lang}>
{sections.map(renderSection)}
})}
</BaseLayout>
www/src/components/InsuranceStrip.astro
+7
View File
@@ -4,3 +4,10 @@ const logos = ['aetna.png', 'bluecrossblueshield-logo-1.webp', 'logo-ahcccs.webp
<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>
</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>
www/src/components/LanguageSwitcher.astro
+12
View File
@@ -51,3 +51,15 @@ const activeShort = langMeta[activeCode]?.short ?? 'EN';
))}
</ul>
</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>
www/src/components/LikeViewCounter.astro
+7
View File
@@ -96,3 +96,10 @@ const { slug } = Astro.props;
});
});
</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>
www/src/components/LocationCard.astro
+4
View File
@@ -2,3 +2,7 @@
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>
<style>
.location-card { padding: var(--space-lg); }
</style>
www/src/components/MainNav.astro
+16
View File
@@ -22,3 +22,19 @@ const aboutLinks = lang === 'es'
))}
</ul>
</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>
www/src/components/MobileNav.astro
+7
View File
@@ -6,3 +6,10 @@ const { lang = 'en' } = Astro.props;
<summary>Menu</summary>
<MainNav lang={lang} />
</details>
<style>
.mobile-nav { display: none; }
@media (max-width: 950px) {
.mobile-nav { display: block; }
}
</style>
www/src/components/PageHero.astro
+15
View File
@@ -16,3 +16,18 @@ const { title, image, eyebrow, constrain = false } = Astro.props;
}
</div>
</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>
www/src/components/TeamPage.astro
+18
View File
@@ -65,3 +65,21 @@ const groups = [
</div>
</section>
</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>
www/src/components/VideoCard.astro
+15
View File
@@ -49,3 +49,18 @@ const { image, alt, videoUrl, videoTitle } = Astro.props;
});
});
</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>
www/src/components/home/HomeProcess.astro
+11
View File
@@ -17,6 +17,17 @@ const { section } = Astro.props;
</div>
</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>
function equalizeProcessCards() {
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
www/src/components/home/HomeTestimonials.astro
+11
View File
@@ -50,3 +50,14 @@ const { section } = Astro.props;
},
});
</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>
www/src/layouts/BlogIndexLayout.astro
+21
View File
@@ -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>
<div class="container section library-layout"><slot /></div>
</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>
www/src/layouts/BlogPostLayout.astro
+12
View File
@@ -19,3 +19,15 @@ const { entry } = Astro.props;
</article>
<BlogPostFooter entryId={entry.id} />
</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>
www/src/pages/library/index.astro
+4
View File
@@ -6,6 +6,10 @@ const posts = (await getCollection('blog', ({ data }) => data.lang === 'en' && !
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.">
<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>
<aside class="library-sidebar">
<label for="library-search">Search</label>
www/src/styles/components.css
+1 -136
View File
@@ -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:hover { background: transparent; border-color: var(--color-accent-strong); color: var(--color-primary); }
.button-small { font-size: .9rem; }
.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 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 a, .card h3 a { color: inherit; text-decoration: none; }
.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 li { line-height: 1.625; margin: 0; padding-inline-start: .15rem; }
.source-list li::marker { color: var(--color-accent); }
.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)); } }