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:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user