CSS
/* Demo 08 overrides shared __tag/__title/__body so the green CRT palette
reads correctly against the black card background. Inlined here so a
user pasting just the demo gets the full effect with no shared prelude. */
.card-08__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-08__title {
font-size: 17px;
font-weight: 700;
color: #1ed98a;
margin-bottom: 6px;
}
.card-08__body {
font-size: 13px;
color: rgba(30, 217, 138, 0.65);
line-height: 1.6;
}
.card-08 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
background: #0a0a0a;
border: 1px solid rgba(30, 217, 138, 0.2);
cursor: pointer;
font-family: monospace;
color: #1ed98a;
transition: box-shadow 0.3s;
}
.card-08:hover {
box-shadow:
0 0 24px rgba(30, 217, 138, 0.18),
inset 0 0 24px rgba(30, 217, 138, 0.04);
}
.card-08__scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(0, 0, 0, 0.22) 3px,
rgba(0, 0, 0, 0.22) 4px
);
opacity: 0;
transition: opacity 0.4s;
}
.card-08:hover .card-08__scanlines {
opacity: 1;
animation: card-08-scroll 4s linear infinite;
}
@keyframes card-08-scroll {
0% { background-position: 0 0; }
100% { background-position: 0 40px; }
}