CSS
/* Demo 18 paints in green CRT/terminal palette so it overrides the
shared __tag/__title rules with its own. */
.card-18__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(30, 217, 138, 0.12);
color: #1ed98a;
border: 1px solid rgba(30, 217, 138, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-18__title {
font-size: 17px;
font-weight: 700;
color: #1ed98a;
margin-bottom: 6px;
}
.card-18 {
width: 100%;
max-width: 280px;
padding: 22px;
border-radius: 14px;
background: #07070e;
border: 1px solid rgba(30, 217, 138, 0.2);
font-family: monospace;
cursor: pointer;
transition:
border-color 0.3s,
box-shadow 0.3s;
}
.card-18:hover {
border-color: rgba(30, 217, 138, 0.5);
box-shadow: 0 0 24px rgba(30, 217, 138, 0.1);
}
.card-18__hidden {
font-size: 12px;
color: #1ed98a;
max-width: 0;
overflow: hidden;
white-space: nowrap;
opacity: 0;
transition:
max-width 0.75s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.25s;
}
.card-18:hover .card-18__hidden {
max-width: 400px;
opacity: 1;
}
.card-18__cursor {
display: inline-block;
width: 8px;
height: 14px;
background: #1ed98a;
margin-top: 5px;
opacity: 0;
}
.card-18:hover .card-18__cursor {
opacity: 1;
animation: card-18-blink 0.7s step-end infinite;
}
@keyframes card-18-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}