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
This commit is contained in:
2026-06-15 16:26:57 -07:00
parent 7ef8b3a585
commit e5af9cbca2
20 changed files with 232 additions and 138 deletions
+13 -2
View File
@@ -4,8 +4,19 @@ interface Props { section: InsuranceSection }
const { section } = Astro.props;
---
<style>
.insurance-section .logo-row { margin-top: 2rem; }
.logo-row img { filter: none; }
.insurance-section .logo-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
justify-content: center;
margin-top: 2rem;
}
.insurance-section .logo-row img {
max-height: 55px;
max-width: 130px;
}
</style>
<section class="section insurance-section">
+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[];
@@ -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>