.ra-live-lyrics{
--ra-navy:#071a34;
--ra-navy-2:#0b2342;
--ra-card:#0b1d34;
--ra-card-2:#102a49;
--ra-line:rgba(143,190,230,.20);
--ra-blue:#5fc7ff;
--ra-blue-2:#26a8f2;
--ra-sand:#ffc76d;
--ra-text:#f7fbff;
--ra-muted:#b6c7d8;
max-width:1180px;
margin:24px auto;
font-family:inherit;
color:var(--ra-text);
}
.ra-lyrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ra-card{
position:relative;
overflow:hidden;
min-width:0;
color:var(--ra-text);
background:
radial-gradient(120% 120% at 0% 0%,rgba(95,199,255,.10),transparent 48%),
linear-gradient(145deg,rgba(13,38,68,.97),rgba(6,21,41,.97));
border:1px solid var(--ra-line);
border-radius:22px;
padding:24px 26px;
box-shadow:0 18px 50px rgba(1,10,25,.24),inset 0 1px 0 rgba(255,255,255,.04);
}
.ra-card::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 32%);
}
.ra-now-card,.ra-next-card{min-height:170px;display:flex;flex-direction:column}
.ra-now-card::before,.ra-next-card::before{
content:"";
position:absolute;
left:0;right:0;top:0;
height:3px;
opacity:.95;
}
.ra-now-card::before{background:linear-gradient(90deg,var(--ra-blue),rgba(95,199,255,.08) 72%,transparent)}
.ra-next-card::before{background:linear-gradient(90deg,var(--ra-sand),rgba(255,199,109,.08) 72%,transparent)}
.ra-next-card{
background:
radial-gradient(120% 120% at 100% 0%,rgba(255,199,109,.08),transparent 48%),
linear-gradient(145deg,rgba(13,38,68,.97),rgba(6,21,41,.97));
}
.ra-kicker{
display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
font-size:12px;
line-height:1;
letter-spacing:.17em;
font-weight:800;
color:#b9d7ef;
text-transform:uppercase;
}
.ra-kicker::before{
content:"";
width:7px;height:7px;
flex:0 0 7px;
border-radius:999px;
background:var(--ra-blue);
box-shadow:0 0 14px rgba(95,199,255,.75);
}
.ra-next-card .ra-kicker::before{background:var(--ra-sand);box-shadow:0 0 14px rgba(255,199,109,.62)}
.ra-song-title{
position:relative;
z-index:1;
max-width:100%;
font-size:clamp(25px,3vw,36px);
font-weight:850;
line-height:1.08;
letter-spacing:-.025em;
text-wrap:balance;
overflow-wrap:anywhere;
text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.ra-song-artist{
position:relative;
z-index:1;
margin-top:8px;
font-size:17px;
line-height:1.3;
color:var(--ra-muted);
font-weight:500;
}
.ra-time-row{
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
margin-top:auto;
padding-top:20px;
font-variant-numeric:tabular-nums;
color:#91abc3;
font-size:12px;
font-weight:650;
}
.ra-progress{
position:relative;
z-index:1;
height:5px;
margin-top:8px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.08);
box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.ra-progress-fill{
width:0%;height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--ra-blue-2),#8bdcff);
box-shadow:0 0 12px rgba(95,199,255,.5);
transition:width .35s linear;
}
.ra-lyrics-card{
grid-column:1/-1;
min-height:440px;
padding:20px 22px 22px;
background:
radial-gradient(120% 100% at 50% 0%,rgba(43,126,184,.10),transparent 52%),
linear-gradient(145deg,rgba(9,29,52,.98),rgba(5,18,35,.98));
}
.ra-lyrics-head{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:10px;
padding:0 4px;
}
.ra-lyrics-head .ra-kicker{margin:0}
.ra-offset-control{
display:flex;
align-items:center;
gap:8px;
padding:4px;
border:1px solid rgba(155,195,225,.14);
border-radius:999px;
background:rgba(3,14,28,.40);
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
backdrop-filter:blur(8px);
}
.ra-offset{
min-width:82px;
text-align:center;
font-size:12px;
color:#a9bfd3;
font-variant-numeric:tabular-nums;
}
.ra-offset-btn{
appearance:none;
min-width:42px;
height:32px;
border:1px solid rgba(143,190,230,.22);
background:rgba(14,42,70,.72);
color:#f7fbff;
border-radius:999px;
padding:0 10px;
cursor:pointer;
font:inherit;
font-size:12px;
font-weight:750;
transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ra-offset-btn:hover{
transform:translateY(-1px);
background:rgba(29,92,137,.78);
border-color:rgba(95,199,255,.55);
box-shadow:0 5px 15px rgba(0,0,0,.18);
}
.ra-offset-btn:active{transform:translateY(0)}
.ra-offset-btn:focus-visible{outline:2px solid var(--ra-blue);outline-offset:2px}
.ra-lyrics-stage{
height:360px;
overflow-y:auto;
overflow-x:hidden;
scroll-behavior:smooth;
padding:110px 22px 120px;
position:relative;
border:1px solid rgba(159,202,233,.16);
border-radius:18px;
background-image:
linear-gradient(180deg,rgba(4,20,38,.53),rgba(3,18,35,.67)),
url(//radio-albena.com/wp-content/plugins/radio-albena-live-lyrics-test/assets/images/lyrics_replace_beach.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
color:#fff;
box-shadow:inset 0 0 55px rgba(0,8,20,.24),0 12px 34px rgba(0,7,18,.18);
scrollbar-width:thin;
scrollbar-color:rgba(137,205,244,.55) rgba(5,20,38,.25);
}
.ra-lyrics-stage::before{
content:"";
position:sticky;
display:block;
pointer-events:none;
z-index:0;
}
.ra-lyrics-stage::-webkit-scrollbar{width:8px}
.ra-lyrics-stage::-webkit-scrollbar-track{background:rgba(4,18,34,.30);border-radius:999px}
.ra-lyrics-stage::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(126,204,247,.72),rgba(56,129,177,.72));border-radius:999px;border:2px solid rgba(4,18,34,.35)}
.ra-lyrics-stage.is-beach-fallback{
overflow:hidden;
background-image:
linear-gradient(180deg,rgba(3,19,36,.34),rgba(3,18,34,.48)),
url(//radio-albena.com/wp-content/plugins/radio-albena-live-lyrics-test/assets/images/lyrics_replace_beach.png);
}
.ra-lyrics-stage.is-beach-fallback .ra-lyrics-message{
position:absolute;
inset:0;
height:auto;
padding:36px;
color:#fff;
opacity:1;
font-weight:750;
font-size:clamp(18px,2.2vw,24px);
text-shadow:0 3px 18px rgba(0,0,0,.85);
}
.ra-lyrics-lines{position:relative;z-index:1;text-align:center;min-width:0;overflow:hidden}
.ra-lyrics-line{
font-size:clamp(21px,3.15vw,38px);
line-height:1.3;
font-weight:760;
color:rgba(239,247,255,.48);
opacity:.78;
transform:scale(.975);
transition:opacity .22s ease,transform .22s ease,color .22s ease,text-shadow .22s ease;
padding:9px 12px;
overflow-wrap:anywhere;
word-break:normal;
text-shadow:0 2px 14px rgba(0,0,0,.66);
}
.ra-lyrics-line.is-past{color:rgba(218,232,244,.30);opacity:.48}
.ra-lyrics-line.is-active{
color:#fff;
opacity:1;
transform:scale(1.045);
text-shadow:0 3px 16px rgba(0,0,0,.82),0 0 20px rgba(95,199,255,.12);
}
.ra-lyrics-plain{
position:relative;
z-index:1;
white-space:pre-wrap;
max-width:820px;
margin:0 auto;
font-size:20px;
line-height:1.8;
color:rgba(250,253,255,.93);
text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.ra-lyrics-message{
position:relative;
z-index:1;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:20px;
font-weight:650;
color:rgba(255,255,255,.93);
text-shadow:0 2px 14px rgba(0,0,0,.78);
}
.ra-lyrics-disabled{padding:20px;border:1px solid #ddd;border-radius:12px}
@media(max-width:720px){
.ra-lyrics-grid{grid-template-columns:1fr;gap:14px}
.ra-lyrics-card{grid-column:auto}
.ra-card{padding:20px;border-radius:18px}
.ra-now-card,.ra-next-card{min-height:155px}
.ra-song-title{font-size:clamp(24px,8vw,32px)}
.ra-lyrics-card{padding:17px}
.ra-lyrics-head{align-items:flex-start;gap:12px}
.ra-offset-control{gap:4px}
.ra-offset{min-width:70px;font-size:11px}
.ra-offset-btn{min-width:38px;height:30px;padding:0 8px}
.ra-lyrics-stage{height:320px;padding:95px 12px 100px;border-radius:15px}
}
@media(max-width:480px){
.ra-lyrics-head{flex-direction:column;align-items:stretch}
.ra-offset-control{align-self:flex-end}
.ra-song-title{font-size:27px}
.ra-lyrics-line{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
.ra-lyrics-stage{scroll-behavior:auto}
.ra-lyrics-line,.ra-offset-btn,.ra-progress-fill{transition:none}
} .ra-audio-controls{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-top:16px;
}
.ra-audio-btn,
.ra-audio-mute{
appearance:none;
border:1px solid rgba(143,190,230,.23);
color:#f7fbff;
background:rgba(11,35,66,.76);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,8,20,.18);
cursor:pointer;
transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ra-audio-btn{
min-height:34px;
border-radius:999px;
padding:7px 12px;
display:inline-flex;
align-items:center;
gap:7px;
font:inherit;
font-size:11px;
font-weight:850;
letter-spacing:.07em;
}
.ra-audio-btn:hover,.ra-audio-mute:hover{
transform:translateY(-1px);
border-color:rgba(95,199,255,.55);
background:rgba(19,61,100,.82);
}
.ra-audio-play{
background:linear-gradient(135deg,rgba(22,123,177,.88),rgba(25,88,145,.88));
border-color:rgba(95,199,255,.40);
}
.ra-audio-play.is-playing{
box-shadow:0 0 0 1px rgba(95,199,255,.10),0 0 18px rgba(38,168,242,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.ra-audio-stop{color:#d7e5f1}
.ra-audio-mute{
width:34px;
height:34px;
border-radius:50%;
padding:0;
display:grid;
place-items:center;
font-size:15px;
}
.ra-audio-volume{
width:88px;
accent-color:var(--ra-blue);
cursor:pointer;
}
.ra-audio-status{
display:inline-flex;
align-items:center;
gap:6px;
color:#819bb2;
font-size:10px;
line-height:1;
letter-spacing:.10em;
font-weight:850;
white-space:nowrap;
}
.ra-audio-status::before{
content:"";
width:6px;height:6px;
border-radius:50%;
background:#52677a;
box-shadow:0 0 0 3px rgba(82,103,122,.10);
}
.ra-audio-status.is-live{color:#92dcff}
.ra-audio-status.is-live::before{
background:#57d2ff;
box-shadow:0 0 12px rgba(87,210,255,.85);
}
@media(max-width:720px){
.ra-audio-controls{margin-top:14px}
.ra-audio-volume{width:72px}
}
@media(max-width:420px){
.ra-audio-volume{display:none}
.ra-audio-btn{padding:7px 10px}
}