CSS
.card-14__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(124, 108, 255, 0.15);
color: #7c6cff;
border: 1px solid rgba(124, 108, 255, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-14__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-14__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-14 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
background: #0a0a0f;
border: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
transition: border-color 0.2s;
}
.card-14:hover {
border-color: rgba(255, 108, 138, 0.35);
}
.card-14::before,
.card-14::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
}
.card-14::before {
background: rgba(255, 108, 138, 0.07);
clip-path: polygon(0 18%, 100% 18%, 100% 45%, 0 45%);
}
.card-14::after {
background: rgba(61, 232, 245, 0.07);
clip-path: polygon(0 55%, 100% 55%, 100% 82%, 0 82%);
}
.card-14:hover::before,
.card-14:hover::after {
opacity: 1;
}
.card-14:hover::before {
animation: card-14-glitch-a 0.4s step-end infinite;
}
.card-14:hover::after {
animation: card-14-glitch-b 0.4s step-end infinite 0.1s;
}
@keyframes card-14-glitch-a {
0%, 100% { transform: translate(-4px, 0); }
33% { transform: translate(-6px, 2px); }
66% { transform: translate(-2px, -2px); }
}
@keyframes card-14-glitch-b {
0%, 100% { transform: translate(4px, 0); }
33% { transform: translate(6px, -2px); }
66% { transform: translate(2px, 2px); }
}