feat(team): add tinted band and tagline to ABA Clinic Management section

Move the --color-tint background from Employment Opportunities to the ABA Clinic Management group. Restructure the group template so the section (not the inner container) carries the background, allowing it to span full width. Add the live site's italic tagline "Applied Behavior Analysis '(ABA) at your service'" from the source markup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(team): restyle cards to match live site and add image hover effect
2026-06-16 01:25:08 -07:00 · 2026-06-16 01:24:21 -07:00 · 2026-06-16 01:23:49 -07:00 · 2026-06-16 01:23:15 -07:00 · 2026-06-15 17:34:38 -07:00 · 2026-06-15 17:34:38 -07:00
3 changed files with 64 additions and 26 deletions
@@ -26,6 +26,8 @@ const groups = [
  },
  {
    title: 'ABA Clinic Management',
+    tagline: 'Applied Behavior Analysis "(ABA) at your service"',
+    tinted: true,
    members: [
      ['team-mariah-marley.webp', 'Mariah Marley', 'Claims Billing'],
      ['team-eney-garcia.webp', 'Eney Garcia, BA', 'Accounts Billing'],
@@ -42,16 +44,21 @@ const groups = [
    <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) => (
-    <section class="team-group container">
-      <h2>{group.title}</h2>
-      <div class="team-grid">
-        {group.members.map(([image, name, role]) => (
-          <article class="team-member">
-            <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
-            <h3>{name}</h3>
-            <p>{role}</p>
-          </article>
-        ))}
+    <section class:list={['team-group', { 'team-group--tinted': group.tinted }]}>
+      <div class="container">
+        <h2>{group.title}</h2>
+        {group.tagline && <p class="team-group__tagline"><em>{group.tagline}</em></p>}
+        <div class="team-grid">
+          {group.members.map(([image, name, role]) => (
+            <article class="team-member">
+              <div class="team-thumb">
+                <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
+              </div>
+              <h3>{name}</h3>
+              <p>{role}</p>
+            </article>
+          ))}
+        </div>
      </div>
    </section>
  ))}
@@ -60,7 +67,7 @@ const groups = [
      <p class="script-label">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.</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>
      <a class="button" href="/careers">View Open Positions</a>
    </div>
  </section>
@@ -70,16 +77,18 @@ const groups = [
  .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; }
+  .team-group--tinted { background: var(--color-tint); }
+  .team-group h2 { margin: 0 auto 1rem; max-width: 760px; }
+  .team-group__tagline { font-size: 1.125rem; margin: 0 auto 2rem; }
+  .team-grid { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; justify-content: center; }
+  .team-member { flex: 0 0 227px; }
+  .team-thumb { border-radius: 4px; overflow: hidden; }
+  .team-thumb img { display: block; object-fit: cover; transform: scale(1.1); transition: transform .5s; width: 100%; }
+  .team-thumb img:hover { transform: scale(1.05); }
+  .team-member h3 { font-family: var(--font-body); font-size: .8rem; margin-bottom: 0; }
+  .team-member p { font-size: .85rem; margin: 0; }
+  .team-careers { padding-block: 5rem; }
  @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)); }
+    .team-member { flex-basis: min(100%, 227px); }
  }
 </style>
@@ -7,15 +7,43 @@ const { section } = Astro.props;
  .insurance-section .logo-row {
    align-items: center;
    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-lg);
+    flex-direction: column;
    justify-content: space-between;
    margin-top: 2rem;
  }

  .insurance-section .logo-row img {
-    max-height: 55px;
-    max-width: 130px;
+    flex: 0 1 auto;
+    max-width: 200px;
+  }
+
+  @media (min-width: 640px) {
+    .insurance-section .logo-row {
+      display: grid;
+      gap: var(--space-lg);
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      align-items: center;
+      justify-items: center;
+    }
+
+    .insurance-section .logo-row img {
+      flex: 0 1 auto;
+      max-width: 25vw;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .insurance-section .logo-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
+
+    .insurance-section .logo-row img {
+      flex-basis: 0;
+      flex-grow: 1;
+      max-width: 120px;
+    }
  }
 </style>

@@ -11,7 +11,8 @@ h3 { font-size: 1.5rem; }
 a { 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: 1.5rem; margin: 0 0 .5rem; }
+.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 2rem; margin: 0; }
+.script-label + h2 { margin-top: 0; }

 .prose :where(ul, ol) {
  margin-block: 0 1.5rem;
Author	SHA1	Message	Date
DeCentN2MadnessandClaude Sonnet 4.6	db1e3b168b	feat(team): add tinted band and tagline to ABA Clinic Management section Move the --color-tint background from Employment Opportunities to the ABA Clinic Management group. Restructure the group template so the section (not the inner container) carries the background, allowing it to span full width. Add the live site's italic tagline "Applied Behavior Analysis '(ABA) at your service'" from the source markup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 01:25:08 -07:00
DeCentN2MadnessandClaude Sonnet 4.6	562109f207	feat(team): restyle cards to match live site and add image hover effect Remove the bordered, aspect-ratio-constrained card style and replace with a plain flex-wrap grid of 227px cards using the live site's 4px-radius, borderless image treatment and smaller body-font labels. Wrap each image in a .team-thumb overflow container and add a scale(1.1)→scale(1.05) zoom-out transition on hover, matching the Growmeda plugin behavior on the live page. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 01:24:21 -07:00
DeCentN2MadnessandClaude Sonnet 4.6	f5c715f5c0	fix(team): restore HR contact email in Employment Opportunities The live site's second paragraph ends with a contact sentence that was missing from the Astro component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 01:23:49 -07:00
DeCentN2MadnessandClaude Sonnet 4.6	496744471a	fix(typography): increase script-label size and collapse gap to following h2 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-16 01:23:15 -07:00
DeCentN2Madness	4675809911	feat(library): restore live-site intro copy above post listings - add the two live intro paragraphs between the hero and article grid - keep the library listing cards in the live two-column layout - restore the 4:3 cropped article thumbnails and card spacing via library-scoped selectors - avoid leaking the card-grid overrides into unrelated pages - add likes/views from api to library article cards	2026-06-15 17:34:38 -07:00
DeCentN2Madness	f64c535971	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-15 17:34:38 -07:00
DeCentN2Madness	79e9e08464	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-15 17:34:38 -07:00