Add visual polish and micro-interactions for editorial feel
Phase 1 - Critical Fixes: - EmptyState: warm palette, coral button, Playfair Display title - Pagination: design system colors, coral active state - LoadingSkeleton: warm shimmer with coral tint Phase 2 - Signature Patterns: - Navigation: sliding underline hover effect on links - globals.css: increased noise texture opacity for paper feel - RankingsView: alternating row backgrounds - HomeView: decorative coral bar under section headings Phase 3 - Polish: - SchoolCard: SVG trend icons replacing unicode arrows - RankingsView: styled metallic rank badges replacing emoji medals Phase 4 - Micro-interactions: - Navigation badge: pop animation when count changes - HomeView grid: staggered entry animation for cards Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -63,16 +63,39 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Sliding underline effect */
|
||||
.navLink::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
height: 2px;
|
||||
background: var(--accent-coral, #e07256);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.25s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.navLink:hover {
|
||||
color: var(--text-primary, #1a1612);
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
}
|
||||
|
||||
.navLink:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.navLink.active {
|
||||
color: var(--accent-coral, #e07256);
|
||||
background: rgba(224, 114, 86, 0.1);
|
||||
}
|
||||
|
||||
.navLink.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -85,6 +108,22 @@
|
||||
color: white;
|
||||
background: var(--accent-coral, #e07256);
|
||||
border-radius: 9999px;
|
||||
animation: badgePop 0.3s ease-out;
|
||||
box-shadow: 0 2px 6px rgba(224, 114, 86, 0.4);
|
||||
}
|
||||
|
||||
@keyframes badgePop {
|
||||
0% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
Reference in New Issue
Block a user