Home menu UNO-style UX refactor (tactile, hero Play)
Keep the Persian-luxury palette, adopt casual card-game UX: - New .press-3d primitive (solid underside that compresses on tap, reduced-motion aware) for tactile buttons. - Home: a large glowing hero "Play online" button (Play icon + chevron), a tactile vs-computer card, and chunkier mode tiles with color-tinted icon chips (teal/sky/gold/rose). All handlers + i18n unchanged. Verified: tsc + next build clean; web rebuilt :1500. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -59,6 +59,20 @@
|
||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
|
||||
}
|
||||
|
||||
/* Tactile "3D press" buttons (casual card-game feel) — a solid underside that
|
||||
compresses on tap. Pair with a bg/glass class for the face. */
|
||||
.press-3d {
|
||||
box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.30), 0 8px 16px rgba(0, 0, 0, 0.28);
|
||||
transition: transform 0.08s ease, box-shadow 0.08s ease;
|
||||
}
|
||||
.press-3d:active {
|
||||
transform: translateY(4px);
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.press-3d, .press-3d:active { transition: none; transform: none; }
|
||||
}
|
||||
|
||||
/* HUD text stays legible over the dynamic felt/table (game-ui best practice). */
|
||||
.hud-shadow {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.4);
|
||||
|
||||
Reference in New Issue
Block a user