151 lines
2.7 KiB
CSS
151 lines
2.7 KiB
CSS
.card {
|
|
width: 250px;
|
|
height: 350px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
|
border: 2px solid #333;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.card-inner {
|
|
padding: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Rarity effects */
|
|
.card-normal {
|
|
border-color: #666;
|
|
}
|
|
|
|
.card-rare {
|
|
border-color: #4a90e2;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
.card-super-rare {
|
|
border-color: #9c27b0;
|
|
background: linear-gradient(135deg, #2d1b69 0%, #0f0c29 100%);
|
|
}
|
|
|
|
.card-kira {
|
|
border-color: #ffd700;
|
|
background: linear-gradient(135deg, #232526 0%, #414345 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.card-kira::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
transparent 30%,
|
|
rgba(255, 215, 0, 0.1) 50%,
|
|
transparent 70%
|
|
);
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
|
|
.card-unique {
|
|
border-color: #ff00ff;
|
|
background: linear-gradient(135deg, #000000 0%, #1a0033 100%);
|
|
box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
|
|
}
|
|
|
|
.card-unique::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
transparent 0%,
|
|
rgba(255, 0, 255, 0.2) 100%
|
|
);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* Card content */
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
color: #888;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-name {
|
|
font-size: 28px;
|
|
margin: 0;
|
|
color: var(--card-color, #fff);
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.unique-badge {
|
|
margin-top: 10px;
|
|
padding: 5px 15px;
|
|
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.card-skill {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.card-footer {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 0.5; }
|
|
50% { opacity: 1; }
|
|
100% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes glow {
|
|
0% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); }
|
|
50% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.8); }
|
|
100% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); }
|
|
} |