6c2d89a099
Landing frontend improvements: - Update InfoPanel.css and SimonSelector.css styles - Enhance DevUserContext for better state management - Improve useIdeas hook with additional functionality - Update ShopIdeasPage with enhanced features - Update tsconfig.json configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
599 lines
14 KiB
CSS
599 lines
14 KiB
CSS
/* ============================================
|
|
SIMON GAME SELECTOR - STUNNING REIMAGINED
|
|
============================================ */
|
|
|
|
/* Timing variables */
|
|
.simon-container {
|
|
--quadrant-glow-fade-duration: 0.4s;
|
|
}
|
|
|
|
/* CONTAINER - Now part of Layout, not full-page */
|
|
.simon-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
position: relative;
|
|
/* overflow visible to allow glow effects to extend beyond container */
|
|
overflow: visible;
|
|
/* Background handled by AIBackground in Layout */
|
|
}
|
|
|
|
/* Aurora background effect - now handled by AIBackground component */
|
|
|
|
/* Floating particles */
|
|
.simon-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent),
|
|
radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.2), transparent),
|
|
radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.4), transparent),
|
|
radial-gradient(2px 2px at 80% 50%, rgba(255, 255, 255, 0.2), transparent),
|
|
radial-gradient(1px 1px at 10% 80%, rgba(255, 255, 255, 0.3), transparent),
|
|
radial-gradient(2px 2px at 90% 90%, rgba(255, 255, 255, 0.2), transparent);
|
|
animation: particleFloat 20s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes particleFloat {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-100vh); }
|
|
}
|
|
|
|
/* HEADER */
|
|
.simon-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.simon-title {
|
|
font-size: clamp(3rem, 10vw, 5rem);
|
|
font-weight: 800;
|
|
background: linear-gradient(
|
|
135deg,
|
|
#FFD700 0%,
|
|
#FF6B6B 25%,
|
|
#4ECDC4 50%,
|
|
#45B7D1 75%,
|
|
#96E6A1 100%
|
|
);
|
|
background-size: 200% 200%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: titleShimmer 4s ease-in-out infinite;
|
|
letter-spacing: 0.1em;
|
|
text-shadow: 0 0 60px rgba(255, 255, 255, 0.3);
|
|
margin: 0;
|
|
}
|
|
|
|
@keyframes titleShimmer {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.simon-tagline {
|
|
font-size: clamp(0.9rem, 2.5vw, 1.3rem);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-top: 0.75rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* SIMON GRID - Circular Layout */
|
|
.simon-grid {
|
|
position: relative;
|
|
width: clamp(320px, 85vmin, 700px);
|
|
height: clamp(320px, 85vmin, 700px);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Rotating orbital light sweep around the entire grid */
|
|
.simon-grid::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 0deg,
|
|
transparent 0deg,
|
|
transparent 330deg,
|
|
rgba(255, 255, 255, 0.15) 345deg,
|
|
rgba(255, 255, 255, 0.4) 355deg,
|
|
rgba(255, 255, 255, 0.15) 360deg
|
|
);
|
|
animation: orbitalSweep 12s linear infinite;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Secondary slower orbital with color tint */
|
|
.simon-grid::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -20px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
from 180deg,
|
|
transparent 0deg,
|
|
transparent 300deg,
|
|
rgba(147, 112, 219, 0.1) 330deg,
|
|
rgba(147, 112, 219, 0.25) 350deg,
|
|
rgba(147, 112, 219, 0.1) 360deg
|
|
);
|
|
animation: orbitalSweep 18s linear infinite reverse;
|
|
pointer-events: none;
|
|
z-index: -2;
|
|
filter: blur(4px);
|
|
}
|
|
|
|
@keyframes orbitalSweep {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* QUADRANT BASE STYLES */
|
|
.simon-quadrant {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
cursor: pointer;
|
|
/* Fast exit transition (when un-hovering) */
|
|
transition: all 0.15s ease-out;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* Note: overflow visible to allow glow effects to extend beyond quadrant bounds */
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Quadrant positions - circular arrangement */
|
|
.simon-quadrant-1 {
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 100% 0 0 0;
|
|
transform-origin: bottom right;
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
|
|
animation: idleGlow1 6s ease-in-out infinite;
|
|
}
|
|
|
|
.simon-quadrant-2 {
|
|
top: 0;
|
|
right: 0;
|
|
border-radius: 0 100% 0 0;
|
|
transform-origin: bottom left;
|
|
background: linear-gradient(225deg, #4169E1 0%, #1E90FF 50%, #00BFFF 100%);
|
|
animation: idleGlow2 6s ease-in-out infinite 1.5s;
|
|
}
|
|
|
|
.simon-quadrant-3 {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-radius: 0 0 0 100%;
|
|
transform-origin: top right;
|
|
background: linear-gradient(45deg, #32CD32 0%, #00FF7F 50%, #7FFF00 100%);
|
|
animation: idleGlow3 6s ease-in-out infinite 3s;
|
|
}
|
|
|
|
.simon-quadrant-4 {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-radius: 0 0 100% 0;
|
|
transform-origin: top left;
|
|
background: linear-gradient(315deg, #DC143C 0%, #FF4500 50%, #FF6347 100%);
|
|
animation: idleGlow4 6s ease-in-out infinite 4.5s;
|
|
}
|
|
|
|
/* ============================================
|
|
IDLE ANIMATIONS - Subtle glow breathing effects
|
|
============================================ */
|
|
|
|
/* Glow intensity breathing - subtle box-shadow pulsing */
|
|
@keyframes idleGlow1 {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.1);
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.2);
|
|
filter: brightness(1.1) saturate(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes idleGlow2 {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(65, 105, 225, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.1);
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 50px rgba(65, 105, 225, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.2);
|
|
filter: brightness(1.1) saturate(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes idleGlow3 {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(50, 205, 50, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.1);
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 50px rgba(50, 205, 50, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.2);
|
|
filter: brightness(1.1) saturate(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes idleGlow4 {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(220, 20, 60, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.1);
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 50px rgba(220, 20, 60, 0.5), inset 0 0 40px rgba(255, 255, 255, 0.2);
|
|
filter: brightness(1.1) saturate(1.1);
|
|
}
|
|
}
|
|
|
|
/* Quadrant glass overlay with shimmer sweep */
|
|
.simon-quadrant::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.1) 30%,
|
|
transparent 60%
|
|
),
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
transparent 40%,
|
|
rgba(255, 255, 255, 0.3) 50%,
|
|
transparent 60%,
|
|
transparent 100%
|
|
);
|
|
background-size: 100% 100%, 300% 100%;
|
|
background-position: 0 0, -100% 0;
|
|
pointer-events: none;
|
|
animation: shimmerSweep 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* Stagger shimmer timing per quadrant */
|
|
.simon-quadrant-1::before { animation-delay: 0s; }
|
|
.simon-quadrant-2::before { animation-delay: 2s; }
|
|
.simon-quadrant-3::before { animation-delay: 4s; }
|
|
.simon-quadrant-4::before { animation-delay: 6s; }
|
|
|
|
@keyframes shimmerSweep {
|
|
0%, 100% {
|
|
background-position: 0 0, -100% 0;
|
|
}
|
|
40%, 60% {
|
|
background-position: 0 0, 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Quadrant glow effect */
|
|
.simon-quadrant::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hover states - CSS class applied by React state for reliable glow */
|
|
/* Base state: no animation, explicit low glow for smooth transition */
|
|
.simon-quadrant:not(.is-hovered) {
|
|
animation: none !important;
|
|
transition: box-shadow var(--quadrant-glow-fade-duration) ease-out, filter var(--quadrant-glow-fade-duration) ease-out;
|
|
}
|
|
|
|
/* Non-hovered: same 3-shadow structure as hovered for smooth CSS transition */
|
|
.simon-quadrant-1:not(.is-hovered) {
|
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), 0 0 0px rgba(255, 215, 0, 0), 0 0 0px rgba(255, 215, 0, 0);
|
|
}
|
|
|
|
.simon-quadrant-2:not(.is-hovered) {
|
|
box-shadow: 0 0 20px rgba(65, 105, 225, 0.2), 0 0 0px rgba(65, 105, 225, 0), 0 0 0px rgba(65, 105, 225, 0);
|
|
}
|
|
|
|
.simon-quadrant-3:not(.is-hovered) {
|
|
box-shadow: 0 0 20px rgba(50, 205, 50, 0.2), 0 0 0px rgba(50, 205, 50, 0), 0 0 0px rgba(50, 205, 50, 0);
|
|
}
|
|
|
|
.simon-quadrant-4:not(.is-hovered) {
|
|
box-shadow: 0 0 20px rgba(220, 20, 60, 0.2), 0 0 0px rgba(220, 20, 60, 0), 0 0 0px rgba(220, 20, 60, 0);
|
|
}
|
|
|
|
/* Hovered state: intense glow */
|
|
.simon-quadrant.is-hovered {
|
|
animation: none !important;
|
|
filter: brightness(1.4) saturate(1.3);
|
|
transition: box-shadow 0.15s ease-out, filter 0.15s ease-out;
|
|
}
|
|
|
|
.simon-quadrant-1.is-hovered {
|
|
box-shadow: 0 0 80px rgba(255, 215, 0, 1), 0 0 120px rgba(255, 215, 0, 0.8), 0 0 160px rgba(255, 215, 0, 0.5);
|
|
}
|
|
|
|
.simon-quadrant-2.is-hovered {
|
|
box-shadow: 0 0 80px rgba(65, 105, 225, 1), 0 0 120px rgba(65, 105, 225, 0.8), 0 0 160px rgba(65, 105, 225, 0.5);
|
|
}
|
|
|
|
.simon-quadrant-3.is-hovered {
|
|
box-shadow: 0 0 80px rgba(50, 205, 50, 1), 0 0 120px rgba(50, 205, 50, 0.8), 0 0 160px rgba(50, 205, 50, 0.5);
|
|
}
|
|
|
|
.simon-quadrant-4.is-hovered {
|
|
box-shadow: 0 0 80px rgba(220, 20, 60, 1), 0 0 120px rgba(220, 20, 60, 0.8), 0 0 160px rgba(220, 20, 60, 0.5);
|
|
}
|
|
|
|
/* Active/click state */
|
|
.simon-quadrant:active {
|
|
filter: brightness(1.5) saturate(1.3);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Quadrant labels */
|
|
.quadrant-label {
|
|
font-size: clamp(1.2rem, 4vw, 2.2rem);
|
|
font-weight: 700;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
text-shadow:
|
|
0 2px 8px rgba(255, 255, 255, 0.5),
|
|
0 0 20px rgba(255, 255, 255, 0.3);
|
|
z-index: 2;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Position labels in the visual center of each pie-slice
|
|
Each quadrant's center (50%, 50%) is safe from curved outer edges */
|
|
.simon-quadrant-1 .quadrant-label {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.simon-quadrant-2 .quadrant-label {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.simon-quadrant-3 .quadrant-label {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.simon-quadrant-4 .quadrant-label {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* CENTER CIRCLE - static decorative element (like real Simon game) */
|
|
.simon-center {
|
|
position: absolute;
|
|
/* Use inset auto + margin auto for true centering */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: clamp(140px, 30%, 220px);
|
|
height: clamp(140px, 30%, 220px);
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, #2a2a3a, #1a1a2a 50%, #0a0a15);
|
|
z-index: 30;
|
|
pointer-events: none;
|
|
border: 4px solid rgba(255, 255, 255, 0.15);
|
|
box-shadow:
|
|
0 0 0 8px rgba(0, 0, 0, 0.5),
|
|
0 0 60px rgba(0, 0, 0, 0.8),
|
|
inset 0 0 40px rgba(0, 0, 0, 0.5),
|
|
0 0 100px rgba(255, 255, 255, 0.1);
|
|
/* Initial fade-in + continuous glow */
|
|
animation:
|
|
centerFadeIn 0.5s ease-out 0.3s both,
|
|
centerGlow 3s ease-in-out 0.8s infinite;
|
|
}
|
|
|
|
/* One-time fade-in on page load */
|
|
@keyframes centerFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes centerGlow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 0 8px rgba(0, 0, 0, 0.5),
|
|
0 0 60px rgba(0, 0, 0, 0.8),
|
|
inset 0 0 40px rgba(0, 0, 0, 0.5),
|
|
0 0 100px rgba(255, 255, 255, 0.1);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 0 8px rgba(0, 0, 0, 0.5),
|
|
0 0 80px rgba(0, 0, 0, 0.9),
|
|
inset 0 0 40px rgba(0, 0, 0, 0.5),
|
|
0 0 150px rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
/* No hover state needed - center is purely decorative */
|
|
|
|
/* FOOTER */
|
|
.simon-footer {
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: clamp(0.85rem, 2vw, 1.1rem);
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
|
|
/* Large tablets and small desktops */
|
|
@media (max-width: 1024px) {
|
|
.simon-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.simon-footer {
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Tablets */
|
|
@media (max-width: 768px) {
|
|
.simon-container {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
.simon-header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.simon-tagline {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.simon-footer {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.footer-text {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
/* Mobile phones */
|
|
@media (max-width: 480px) {
|
|
.simon-container {
|
|
justify-content: space-evenly;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.simon-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.simon-tagline {
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.simon-footer {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.quadrant-label {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Very small devices */
|
|
@media (max-width: 360px) {
|
|
.simon-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.simon-tagline {
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.quadrant-label {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* Landscape mobile */
|
|
@media (max-height: 500px) and (orientation: landscape) {
|
|
.simon-container {
|
|
padding: 0.5rem;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.simon-header {
|
|
flex: 1 1 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.simon-grid {
|
|
width: min(50vh, 400px);
|
|
height: min(50vh, 400px);
|
|
}
|
|
|
|
.simon-footer {
|
|
flex: 1 1 100%;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* Touch devices - Framer Motion handles hover, just enhance active state */
|
|
@media (hover: none) {
|
|
.simon-quadrant:active {
|
|
filter: brightness(1.4) saturate(1.2);
|
|
}
|
|
}
|
|
|
|
/* Reduced motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.simon-container::after,
|
|
.simon-title,
|
|
.simon-center,
|
|
.simon-quadrant,
|
|
.simon-quadrant::before,
|
|
.simon-grid::before,
|
|
.simon-grid::after {
|
|
animation: none;
|
|
}
|
|
|
|
.simon-quadrant {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode */
|
|
@media (prefers-contrast: high) {
|
|
.quadrant-label {
|
|
color: #000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.simon-quadrant::before {
|
|
display: none;
|
|
}
|
|
}
|