| |
| .font-orbitron { |
| font-family: 'Orbitron', sans-serif; |
| } |
|
|
| .font-poppins { |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| .glass-panel { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| box-shadow: |
| 0 8px 32px rgba(0, 0, 0, 0.3), |
| inset 0 1px 1px rgba(255, 255, 255, 0.1); |
| } |
|
|
| |
| .stat-card { |
| background: rgba(255, 255, 255, 0.03); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 1.5rem; |
| padding: 2rem; |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
|
|
| .stat-card:hover { |
| transform: translateY(-5px); |
| background: rgba(255, 255, 255, 0.05); |
| } |
|
|
| |
| .action-btn { |
| padding: 1rem 2rem; |
| border-radius: 2rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| border: 2px solid transparent; |
| } |
|
|
| .action-btn.primary { |
| background: linear-gradient(135deg, #f59e0b, #d97706); |
| color: white; |
| } |
|
|
| .action-btn.secondary { |
| background: linear-gradient(135deg, #8b5cf6, #7c3aed); |
| color: white; |
| } |
|
|
| .action-btn.tertiary { |
| background: transparent; |
| border-color: rgba(255, 255, 255, 0.3); |
| color: rgba(255, 255, 255, 0.8); |
| } |
|
|
| .action-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .action-btn.tertiary:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.5); |
| } |
|
|
| |
| .loot-box { |
| position: relative; |
| padding: 2rem; |
| border-radius: 1.5rem; |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| } |
|
|
| .loot-box::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: 1.5rem; |
| padding: 2px; |
| background: linear-gradient(45deg, transparent, transparent, transparent); |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: xor; |
| mask-composite: exclude; |
| transition: all 0.3s ease; |
| } |
|
|
| .loot-box.common::before { |
| background: linear-gradient(45deg, transparent, rgba(52, 211, 153, 0.2), transparent); |
| } |
|
|
| .loot-box.rare::before { |
| background: linear-gradient(45deg, transparent, rgba(34, 211, 238, 0.2), transparent); |
| } |
|
|
| .loot-box.epic::before { |
| background: linear-gradient(45deg, transparent, rgba(168, 85, 247, 0.2), transparent); |
| } |
|
|
| .loot-box.legendary::before { |
| background: linear-gradient(45deg, transparent, rgba(245, 158, 11, 0.2), transparent); |
| } |
|
|
| .loot-box:hover { |
| transform: translateY(-8px) scale(1.02); |
| } |
|
|
| .loot-box:hover::before { |
| background-size: 200 |
