feat: glitter border on team/class cards, mobile-friendly class selector

- Animated gold border glitter effect on active team card and class image
- Classes selector: 2-column grid on mobile (no scroll), list on desktop
- Selector appears above detail on mobile (flex-col-reverse)
- Compact selector items on mobile (icon + name only)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 19:55:09 +03:00
parent 303c52653c
commit f2b840416d
4 changed files with 58 additions and 11 deletions

View File

@@ -213,7 +213,7 @@ export function Team() {
return (
<div
key={m.name}
className="absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none"
className={`absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none ${style.isCenter ? "team-card-glitter" : ""}`}
style={{
width: style.width,
height: style.height,
@@ -221,8 +221,10 @@ export function Team() {
zIndex: style.zIndex,
transform: style.transform,
filter: style.filter,
borderColor: style.borderColor,
boxShadow: style.boxShadow,
borderColor: style.isCenter ? "transparent" : style.borderColor,
boxShadow: style.isCenter
? "0 0 40px rgba(201,169,110,0.15), 0 0 80px rgba(201,169,110,0.08)"
: style.boxShadow,
transition: style.transition,
}}
>