Not officially a licensed product or anything, but I do have a whole bunch of songs that I play regularly to set the mood for writing Paradiso. It’s hard to nail down exactly what this playlist is, maybe 1980s synth-pop meets industrial meets alt-rock?
/* Scoped to this block only */
#paradiso-grit{
–teal:#22e0d7; –rose:#ff86b0;
–ink1:#0a0711; –ink2:#130d1d;
–gold:#d9bf78;
–radius:20px; –edge:2px;
max-width:960px; margin:2.5rem auto; padding:0 16px; position:relative;
}
/* Card: darker, dirtier, vignette */
#paradiso-grit .card{
position:relative; overflow:hidden; text-align:center; color:#e8ecf3;
border-radius:var(–radius);
background:
radial-gradient(120% 160% at 70% -20%, rgba(34,224,215,.10), transparent 60%),
radial-gradient(100% 140% at 10% 0%, rgba(255,134,176,.09), transparent 55%),
linear-gradient(180deg, var(–ink2), var(–ink1));
box-shadow:
0 0 0 var(–edge) rgba(217,191,120,.65) inset,
0 0 0 calc(var(–edge)*3) rgba(217,191,120,.25) inset,
0 0 40px rgba(34,224,215,.28),
0 0 86px rgba(255,134,176,.16);
padding: 2.4rem 1.4rem 1.6rem;
}
/* gritty vignette */
#paradiso-grit .vignette{
content:””; position:absolute; inset:-20px; pointer-events:none; mix-blend-mode:multiply;
background:
radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%),
radial-gradient(140% 140% at 20% 0%, rgba(0,0,0,.35), transparent 40%),
radial-gradient(140% 140% at 80% 0%, rgba(0,0,0,.28), transparent 42%);
z-index:3;
}
/* Heavy VHS grain (stronger + jitter) */
#paradiso-grit .grain{
content:””; position:absolute; inset:-2% -2% -2% -2%;
pointer-events:none; mix-blend-mode:screen; z-index:2;
background-image:
repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px);
opacity:.6; animation: grit-jitter 1.3s steps(4) infinite;
}
@keyframes grit-jitter{
0%{ transform: translate(0,0) }
25%{ transform: translate(-1px,1px) }
50%{ transform: translate(1px,-1px) }
75%{ transform: translate(0.5px,0.5px) }
100%{ transform: translate(0,0) }
}
/* Neon rain (kept minimal) */
#paradiso-grit .rain{
content:””; position:absolute; inset:-40% -20% -40% -20%; z-index:1; pointer-events:none;
mix-blend-mode:screen; opacity:.45;
background-image:
repeating-linear-gradient( to bottom-right, rgba(34,224,215,.06) 0 2px, transparent 2px 22px),
repeating-linear-gradient( to bottom-left, rgba(255,134,176,.05) 0 1px, transparent 1px 18px);
animation: rain-move 14s linear infinite;
}
@keyframes rain-move{ 0%{ transform: translateY(-2%) } 100%{ transform: translateY(2%) } }
/* Title: chrome + chromatic aberration */
#paradiso-grit .title-wrap{ position:relative; width:min(560px,92%); margin:0 auto 1.1rem; }
#paradiso-grit .title{
position:relative; padding:.6rem 1rem; border-radius:14px; overflow:hidden;
border:1px solid rgba(217,191,120,.6);
background:linear-gradient(180deg, rgba(217,191,120,.16), rgba(217,191,120,.05));
text-transform:uppercase; letter-spacing:.22em; font-weight:900; font-size:1.02rem;
background-clip:text; -webkit-background-clip:text; color:transparent;
background-image: linear-gradient(90deg, #eaf2ff, #a5b6ff 45%, #f6a3d0 70%, #eef4ff);
text-shadow: 0 0 10px rgba(255,134,176,.45), 0 0 22px rgba(34,224,215,.35);
}
/* RGB split (aberration) */
#paradiso-grit .title.aberr-r{ position:absolute; inset:0; transform:translateX(1px); color:transparent;
text-shadow: 1px 0 0 rgba(255,0,70,.35); filter: blur(.2px); pointer-events:none; }
#paradiso-grit .title.aberr-b{ position:absolute; inset:0; transform:translateX(-1px); color:transparent;
text-shadow: -1px 0 0 rgba(0,200,255,.35); filter: blur(.2px); pointer-events:none; }
/* hard scanlines over plate */
#paradiso-grit .title-wrap:after{
content:””; position:absolute; inset:0; border-radius:14px; pointer-events:none; mix-blend-mode:screen;
background: repeating-linear-gradient(to bottom, rgba(255,255,255,.11) 0 1px, transparent 1px 3px);
opacity:.45; animation: scan 4.8s linear infinite;
}
@keyframes scan{ 0%{ transform:translateY(-20%) } 100%{ transform:translateY(20%) } }
/* Player with CRT bow + bezel */
#paradiso-grit .frame{ position:relative; margin:1.2rem auto 0; max-width:900px; z-index:4; }
/* bezel / glow behind */
#paradiso-grit .bezel{
position:absolute; inset:-16px; border-radius:18px; z-index:3; pointer-events:none;
background:
radial-gradient(120% 140% at 50% 10%, rgba(34,224,215,.18), transparent 60%),
radial-gradient(100% 140% at 50% 90%, rgba(255,134,176,.16), transparent 60%);
filter: blur(18px);
}
/* CRT curvature via 3D transform + mask vignette */
#paradiso-grit .tube{
position:relative; z-index:5; border-radius:16px; overflow:hidden;
box-shadow: 0 0 26px rgba(34,224,215,.45), 0 0 60px rgba(34,224,215,.22);
transform: perspective(1200px) translateZ(0) scale(1) rotateX(.4deg);
isolation:isolate;
}
#paradiso-grit .tube:after{
content:””; position:absolute; inset:0; pointer-events:none; z-index:6;
background:
radial-gradient(110% 140% at 50% 50%, transparent 64%, rgba(0,0,0,.38) 100%);
mix-blend-mode:multiply;
}
#paradiso-grit iframe{
display:block; width:100%; height:420px; border:0;
transform: translateZ(0); /* keep it crisp */
}
/* Safety note */
#paradiso-grit .note{ margin:1.05rem 0 0; font-size:.92rem; opacity:.85; z-index:5; position:relative; }
#paradiso-grit .note a{ color:var(–teal); text-decoration:none; border-bottom:1px dotted rgba(34,224,215,.6); }
/* Mobile */
@media (max-width:600px){
#paradiso-grit .card{ padding:2rem 1rem 1.25rem; }
#paradiso-grit iframe{ height:300px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#paradiso-grit .grain, #paradiso-grit .rain{ animation:none !important; }
}
PARADISO — OFFICIAL PLAYLIST
PARADISO — OFFICIAL PLAYLIST
PARADISO — OFFICIAL PLAYLIST
Trouble on Safari with blockers? Open the playlist on YouTube.
This playlist is definitely going to get longer and longer, so I’ll probably have a couple of them uploaded here, maybe grouped together by theme … or scene? Or you know what? I’ll just figure that bridge-crossing strategy when I have to.
In the meantime, enjoy!
a little more juju 