File size: 2,723 Bytes
b12c8c1 ef1602a b12c8c1 ef1602a b12c8c1 ef1602a a8484cd b12c8c1 ef1602a b12c8c1 ef1602a b12c8c1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/* Custom Fonts */
.font-orbitron {
font-family: 'Orbitron', sans-serif;
}
.font-poppins {
font-family: 'Poppins', sans-serif;
}
/* Glass Morphism */
.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 Cards */
.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 Buttons */
.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 Styles */
.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 |