feat(process): equal-height cards with hover scale effect
Equalizes all six process cards to the tallest card's height via a resize-aware script. Adds scale(1.05) hover transition matching the live site. Adjusts card padding and icon sizing; shortens two step labels for better card balance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -16,3 +16,14 @@ const { section } = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function equalizeProcessCards() {
|
||||
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
||||
cards.forEach(c => (c.style.height = ''));
|
||||
const max = Math.max(...cards.map(c => c.offsetHeight));
|
||||
if (max > 0) cards.forEach(c => (c.style.height = `${max}px`));
|
||||
}
|
||||
equalizeProcessCards();
|
||||
window.addEventListener('resize', equalizeProcessCards);
|
||||
</script>
|
||||
|
||||
@@ -115,9 +115,9 @@ sections:
|
||||
- icon: learner-journey-step-2.svg
|
||||
label: Speak with a Client Advocate
|
||||
- icon: learner-journey-step-3.svg
|
||||
label: Fill and Sign a Client Intake Packet
|
||||
label: Fill and Sign an Intake Packet
|
||||
- icon: learner-journey-step-4.svg
|
||||
label: Verify Billing and Insurance Information and Benefits
|
||||
label: Verify Billing and Insurance
|
||||
- icon: learner-journey-step-5.svg
|
||||
label: Schedule an Assessment
|
||||
- icon: learner-journey-step-6.svg
|
||||
|
||||
@@ -128,8 +128,9 @@
|
||||
.esa-grid img { max-height: 170px; justify-self: center; }
|
||||
.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: 2rem 1rem; text-align: center; }
|
||||
.process-grid img { margin: 0 auto 1rem; width: 72px; }
|
||||
.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%; }
|
||||
.director-card { align-items: center; display: flex; gap: 1.5rem; }
|
||||
.director-card img { max-height: 260px; width: auto; }
|
||||
.signature { max-width: 270px; }
|
||||
|
||||
Reference in New Issue
Block a user