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:
2026-06-09 14:47:36 -07:00
parent ce5e53c71f
commit 1bc0224f76
3 changed files with 16 additions and 4 deletions
+11
View File
@@ -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>