CSS
/* ─── 02 Neon Typography — retro signage / vintage bar signs ───── */
@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Bebas+Neue&family=Special+Elite&family=Monoton&display=swap');
.nn-typ {
position: relative;
width: 100%;
min-height: 700px;
background: #060614;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
overflow: hidden;
box-sizing: border-box;
}
.nn-typ *,
.nn-typ *::before,
.nn-typ *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Scanlines overlay — was body::after at z-index 100; scoped to
wrapper at z-index 5 so it covers the demo without escaping. */
.nn-typ::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0,0,0,0.08) 3px,
rgba(0,0,0,0.08) 4px
);
pointer-events: none;
z-index: 5;
}
.nn-typ .stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 36px;
align-items: center;
padding: 50px 60px;
}
/* 1 — CLASSIC CYAN NEON SIGN */
.nn-typ .neon-classic {
font-family: 'Boogaloo', cursive;
font-size: 72px;
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 10px #fff,
0 0 18px #fff,
0 0 30px #00eeff,
0 0 55px #00eeff,
0 0 80px #00eeff,
0 0 120px #00eeff;
letter-spacing: 0.05em;
}
/* 2 — FLICKERING BROKEN SIGN */
.nn-typ .neon-flicker {
font-family: 'Bebas Neue', sans-serif;
font-size: 64px;
letter-spacing: 0.12em;
color: #ff2d78;
text-shadow:
0 0 5px #ff2d78,
0 0 15px #ff2d78,
0 0 30px #ff2d78,
0 0 60px #ff2d78,
0 0 100px #ff2d78;
}
.nn-typ .neon-flicker span {
display: inline-block;
animation: nn-typ-flicker1 var(--d, 3s) var(--del, 0s) infinite;
}
.nn-typ .neon-flicker .dead {
color: rgba(255,45,120,0.18);
text-shadow: none;
animation: nn-typ-deadbulb var(--d, 4s) var(--del, 0s) infinite;
}
@keyframes nn-typ-flicker1 {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 4px #ff2d78,
0 0 12px #ff2d78,
0 0 26px #ff2d78,
0 0 52px #ff2d78,
0 0 90px #ff2d78;
color: #ff2d78;
}
20%, 24%, 55% {
text-shadow: none;
color: rgba(255,45,120,0.15);
}
}
@keyframes nn-typ-deadbulb {
0%, 45%, 55%, 100% {
color: rgba(255,45,120,0.18);
text-shadow: none;
}
48%, 52% {
color: rgba(255,45,120,0.55);
text-shadow: 0 0 8px rgba(255,45,120,0.4);
}
}
/* 3 — MULTICOLOR STROKE OUTLINE */
.nn-typ .neon-outline {
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
letter-spacing: 0.1em;
background: linear-gradient(135deg, #ff00cc 0%, #ffcc00 35%, #00ffcc 65%, #00aaff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 8px rgba(255,0,204,0.6)) drop-shadow(0 0 20px rgba(0,255,204,0.4));
animation: nn-typ-chroma 5s ease-in-out infinite alternate;
}
@keyframes nn-typ-chroma {
0% { filter: drop-shadow(0 0 8px rgba(255,0,204,0.7)) drop-shadow(0 0 22px rgba(0,255,204,0.35)); }
50% { filter: drop-shadow(0 0 16px rgba(255,204,0,0.8)) drop-shadow(0 0 36px rgba(0,170,255,0.4)); }
100% { filter: drop-shadow(0 0 8px rgba(0,255,204,0.7)) drop-shadow(0 0 22px rgba(255,0,204,0.35)); }
}
/* 4 — SINGLE WORD INTENSE VIOLET */
.nn-typ .neon-intense {
font-family: 'Monoton', cursive;
font-size: 52px;
color: #e040fb;
letter-spacing: 0.25em;
text-shadow:
0 0 2px #fff,
0 0 6px #e040fb,
0 0 16px #e040fb,
0 0 32px #e040fb,
0 0 55px #7b00d4,
0 0 90px #7b00d4;
animation: nn-typ-breathe 3s ease-in-out infinite;
}
@keyframes nn-typ-breathe {
0%, 100% {
text-shadow:
0 0 2px #fff,
0 0 6px #e040fb,
0 0 16px #e040fb,
0 0 32px #e040fb,
0 0 55px #7b00d4,
0 0 90px #7b00d4;
}
50% {
text-shadow:
0 0 2px #fff,
0 0 10px #e040fb,
0 0 28px #e040fb,
0 0 52px #e040fb,
0 0 80px #b040fb,
0 0 140px #7b00d4;
}
}
/* 5 — RETRO SIGN FRAME */
.nn-typ .neon-frame {
position: relative;
padding: 18px 40px;
border: 2px solid rgba(255, 220, 0, 0.3);
box-shadow:
0 0 14px rgba(255,220,0,0.25),
inset 0 0 14px rgba(255,220,0,0.05);
}
.nn-typ .neon-frame::before,
.nn-typ .neon-frame::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #ffdc00;
text-shadow: 0 0 10px #ffdc00, 0 0 25px #ffdc00;
animation: nn-typ-starpulse 2s ease-in-out infinite;
}
.nn-typ .neon-frame::before { left: 14px; }
.nn-typ .neon-frame::after { right: 14px; }
@keyframes nn-typ-starpulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.nn-typ .neon-frame-text {
font-family: 'Special Elite', cursive;
font-size: 38px;
letter-spacing: 0.14em;
color: #ffdc00;
text-shadow:
0 0 4px #ffdc00,
0 0 12px #ffdc00,
0 0 26px rgba(255,180,0,0.9),
0 0 50px rgba(255,140,0,0.6);
animation: nn-typ-warmglow 2.5s ease-in-out infinite;
}
@keyframes nn-typ-warmglow {
0%, 100% {
text-shadow:
0 0 4px #ffdc00,
0 0 12px #ffdc00,
0 0 26px rgba(255,180,0,0.9),
0 0 50px rgba(255,140,0,0.6);
}
50% {
text-shadow:
0 0 6px #fff,
0 0 16px #ffdc00,
0 0 38px rgba(255,180,0,1),
0 0 72px rgba(255,140,0,0.7);
}
}
@media (max-width: 640px) {
.nn-typ .neon-classic { font-size: 48px; }
.nn-typ .neon-flicker { font-size: 42px; }
.nn-typ .neon-outline { font-size: 56px; }
.nn-typ .neon-intense { font-size: 36px; }
.nn-typ .neon-frame-text { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.nn-typ .neon-flicker span,
.nn-typ .neon-outline,
.nn-typ .neon-intense,
.nn-typ .neon-frame::before,
.nn-typ .neon-frame::after,
.nn-typ .neon-frame-text { animation: none !important; }
}