From a048d395f74e0392dab499aee405890e8ba660de Mon Sep 17 00:00:00 2001
From: Jeffrey Hales <committable@bluechip.icu>
Date: Sat, 20 Jun 2026 12:00:21 -0700
Subject: [PATCH] refactor(typography): standardize eyebrow labels across page
 shells

- consolidate the shared eyebrow label styling into the global typography layer
- replace the old script-label usage in page hero, home hero, FAQ, and team shells
- keep the next heading flush under the label across all affected page types
---
 www/src/components/PageHero.astro       |  2 +-
 www/src/components/home/HomeHero.astro  |  4 ++--
 www/src/components/pages/FaqPage.astro  |  4 ++--
 www/src/components/pages/TeamPage.astro |  6 +++---
 www/src/styles/typography.css           | 20 ++++++++++++++------
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/www/src/components/PageHero.astro b/www/src/components/PageHero.astro
index 02ad056..ef5f3f3 100644
--- a/www/src/components/PageHero.astro
+++ b/www/src/components/PageHero.astro
@@ -13,7 +13,7 @@ const { title, subtitle, image, eyebrow, constrain = false } = Astro.props;
   <div class="container">
     <div class="page-hero__heading">
     {eyebrow
-      ? <div class="page-hero__copy"><p class="script-label">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
+      ? <div class="page-hero__copy"><p class="eyebrow">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
       : <><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</>
     }
     </div>
diff --git a/www/src/components/home/HomeHero.astro b/www/src/components/home/HomeHero.astro
index c858081..6ef6d5a 100644
--- a/www/src/components/home/HomeHero.astro
+++ b/www/src/components/home/HomeHero.astro
@@ -6,7 +6,7 @@ const { section } = Astro.props;
 <section class="home-hero">
   <div class="container home-hero-grid">
     <div>
-      <p class="script-label">{section.eyebrow}</p>
+      <p class="eyebrow">{section.eyebrow}</p>
       <h1 set:html={section.heading} />
       <p>{section.body}</p>
       <a class="button" href={section.cta.href}>{section.cta.label}</a>
@@ -19,7 +19,7 @@ const { section } = Astro.props;
   .home-hero { background: var(--color-tint); overflow: hidden; }
   .home-hero-grid { align-items: end; display: grid; grid-template-columns: 1fr .9fr; min-height: 520px; padding-top: 4rem; }
   .home-hero-grid > div { align-self: center; padding-bottom: 4rem; }
-  .home-hero-grid p:not(.script-label) { max-width: 570px; }
+  .home-hero-grid p:not(.eyebrow) { max-width: 570px; }
   .home-hero-grid img { align-self: end; justify-self: end; max-height: 500px; object-fit: contain; }
   @media (max-width: 760px) {
     .home-hero-grid { grid-template-columns: 1fr; padding-top: 3rem; text-align: center; }
diff --git a/www/src/components/pages/FaqPage.astro b/www/src/components/pages/FaqPage.astro
index ed1327c..ee31eee 100644
--- a/www/src/components/pages/FaqPage.astro
+++ b/www/src/components/pages/FaqPage.astro
@@ -38,7 +38,7 @@
 
   <section class="faq-cta faq-cta-primary">
     <div class="container-narrow">
-      <p class="script-label">Still have questions?</p>
+      <p class="eyebrow">Still have questions?</p>
       <h2>Reach Out to Learn More</h2>
       <p>We hope this FAQ gives you a clear picture of how Applied Behavior Analysis (ABA) therapy at the Arizona Institute for Autism can support your child’s growth. If you have more questions or would like to <a href="/client-consultation">schedule an assessment</a>, please reach out. Our team is here to guide you and your learner every step of the way!</p>
     </div>
@@ -558,7 +558,7 @@
     padding-block: 3.5rem;
   }
 
-  .faq-cta-primary .script-label {
+  .faq-cta-primary .eyebrow {
     color: #f9b34d;
   }
 
diff --git a/www/src/components/pages/TeamPage.astro b/www/src/components/pages/TeamPage.astro
index f62f326..c1ef4b7 100644
--- a/www/src/components/pages/TeamPage.astro
+++ b/www/src/components/pages/TeamPage.astro
@@ -40,7 +40,7 @@ const groups = [
 <article class="team-page">
   <section class="team-intro container-narrow">
     <h2>Our Clinical Team</h2>
-    <p class="script-label">Arizona Institute for Autism<br />Scottsdale, Arizona</p>
+    <p class="eyebrow">Arizona Institute for Autism<br />Scottsdale, Arizona</p>
     <p>AIA's clinical team consists of experienced professionals and paraprofessionals as well as Board Certified Behavior Analysts (BCBA) and Psychologists who have diverse experience and expertise.</p>
   </section>
   {groups.map((group) => (
@@ -64,7 +64,7 @@ const groups = [
   ))}
   <section class="team-careers">
     <div class="container-narrow">
-      <p class="script-label">Join the AIA Team!</p>
+      <p class="eyebrow">Join the AIA Team!</p>
       <h2>Employment Opportunities</h2>
       <p>Apply online to join the AIA team! At the Arizona Institute for Autism (AIA) we are on a mission to improve special education and strengthen communities throughout Arizona.</p>
       <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach. For questions regarding open positions, please contact us at <a href="mailto:hr@azinstitute4autism.com">hr@azinstitute4autism.com</a>.</p>
@@ -75,7 +75,7 @@ const groups = [
 
 <style>
   .team-intro { padding-block: 4rem; text-align: center; }
-  .team-intro .script-label { font-size: 1.8rem; }
+  .team-intro .eyebrow { font-size: 1.8rem; }
   .team-group { padding-block: 2rem 4rem; text-align: center; }
   .team-group h2 { margin: 0 auto 1rem; max-width: 760px; }
   .team-group__tagline { font-size: 1.125rem; margin: 0 auto 2rem; }
diff --git a/www/src/styles/typography.css b/www/src/styles/typography.css
index 660e44e..7c3e432 100644
--- a/www/src/styles/typography.css
+++ b/www/src/styles/typography.css
@@ -3,18 +3,26 @@
 @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/regular.woff2') format('woff2'); font-display: swap; }
 @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
 body { color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.625; }
-h1, h2, h3 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
+h1, h2, h3, h4 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
 .no-balance { text-wrap: auto; }
 h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); }
 h2 { font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.25; }
-h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
+h3 { font-size: clamp(1.8rem, 3.4vw, 2rem); }
+h4 { font-size: clamp(1.5rem, 3vw, 1.8rem); }
 a, a:visited { color: var(--color-accent-strong); text-decoration: none; }
 a:hover, a:active { color: var(--color-accent); }
 a.button { color: var(--color-primary) }
-.eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
-.lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; }
-.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 2rem; margin: 0; }
-.script-label + h2 { margin-top: 0; }
+
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent-strong);
+  font-family: var(--font-accent);
+  font-size: 2rem;
+}
+
+.eyebrow + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 0;
+}
 
 .prose :where(ul, ol) {
   margin-block: 0 1.5rem;