/* ============================================================
RADIO PACIUGO — Design System
Versione: 1.0 | Marzo 2026
Per Antigravity: usa queste variabili nel CSS di WordPress
============================================================ */

:root {
–rp-dark: #2B3D2C;
–rp-mid: #5C8A3C;
–rp-light: #A8D47A;
–rp-pale: #F4F8F2;
–rp-cream: #F7F4EE;
–rp-terra: #C9836A;
–rp-warm: #E8D5B0;
–rp-ink: #3D3529;
–rp-muted: #7A7468;
–font-display: ‘Cormorant Garamond’, Georgia, serif;
–font-body: ‘DM Sans’, system-ui, sans-serif;
–radius-sm: 8px;
–radius-md: 16px;
–radius-lg: 24px;
–radius-pill: 32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
font-family: var(–font-body);
background: var(–rp-cream);
color: var(–rp-ink);
line-height: 1.6;
font-size: 16px;
}

/* ============================================================
NAVIGATION
============================================================ */
.rp-nav {
background: var(–rp-dark);
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
position: sticky;
top: 0;
z-index: 1000;
}

.rp-logo {
font-family: var(–font-display);
font-size: 24px;
font-weight: 600;
color: #fff;
letter-spacing: 0.02em;
text-decoration: none;
}
.rp-logo span { color: var(–rp-light); }

.rp-nav-links {
display: flex;
gap: 28px;
list-style: none;
}
.rp-nav-links a {
color: rgba(255,255,255,0.65);
text-decoration: none;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s;
}
.rp-nav-links a:hover { color: var(–rp-light); }

.rp-nav-cta {
background: var(–rp-mid);
color: #fff;
border: none;
padding: 9px 22px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: opacity 0.2s;
}
.rp-nav-cta:hover { opacity: 0.85; }
.rp-nav-cta::before { content: ‘▶’; font-size: 9px; }

/* ============================================================
LIVE TICKER
============================================================ */
.rp-ticker {
background: var(–rp-mid);
color: #fff;
padding: 9px 40px;
font-size: 12px;
display: flex;
align-items: center;
gap: 14px;
letter-spacing: 0.04em;
}
.rp-ticker strong { font-weight: 500; letter-spacing: 0.1em; }
.rp-ticker-dot {
width: 8px;
height: 8px;
background: var(–rp-light);
border-radius: 50%;
flex-shrink: 0;
animation: tickerPulse 1.4s ease-in-out infinite;
}
.rp-ticker-next { margin-left: auto; opacity: 0.55; }

@keyframes tickerPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.5); }
}

/* ============================================================
HERO
============================================================ */
.rp-hero {
background: var(–rp-dark);
padding: 80px 40px 72px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
overflow: hidden;
}
.rp-hero::before {
content: ”;
position: absolute;
top: -80px; right: -80px;
width: 360px; height: 360px;
background: var(–rp-mid);
opacity: 0.1;
border-radius: 50%;
pointer-events: none;
}
.rp-hero::after {
content: ”;
position: absolute;
bottom: -100px; left: 35%;
width: 240px; height: 240px;
background: var(–rp-terra);
opacity: 0.07;
border-radius: 50%;
pointer-events: none;
}

.rp-hero-text { position: relative; z-index: 1; }

.rp-eyebrow {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–rp-light);
font-weight: 500;
margin-bottom: 18px;
}

.rp-hero h1 {
font-family: var(–font-display);
font-size: 60px;
font-weight: 500;
color: #fff;
line-height: 1.06;
margin-bottom: 22px;
letter-spacing: -0.015em;
}
.rp-hero h1 em {
font-style: italic;
color: var(–rp-light);
}

.rp-hero-sub {
font-size: 16px;
color: rgba(255,255,255,0.6);
font-weight: 300;
line-height: 1.75;
margin-bottom: 40px;
max-width: 400px;
}

.rp-cta-group { display: flex; gap: 12px; flex-wrap: wrap; }

.rp-btn-primary {
background: var(–rp-terra);
color: #fff;
border: none;
padding: 15px 30px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: opacity 0.2s;
}
.rp-btn-primary:hover { opacity: 0.88; }

.rp-btn-ghost {
background: transparent;
color: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,0.25);
padding: 15px 30px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}
.rp-btn-ghost:hover {
border-color: rgba(255,255,255,0.55);
color: #fff;
}

.rp-btn-dark {
background: var(–rp-dark);
color: #fff;
border: none;
padding: 13px 26px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
}
.rp-btn-dark:hover { opacity: 0.85; }

.rp-btn-outline-dark {
background: transparent;
color: var(–rp-dark);
border: 1px solid var(–rp-dark);
padding: 13px 26px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 14px;
font-weight: 400;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.rp-btn-outline-dark:hover {
background: var(–rp-dark);
color: #fff;
}

/* Player Card */
.rp-player-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(–radius-lg);
padding: 30px;
position: relative;
z-index: 1;
}

.rp-player-label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 18px;
}

.rp-player-track {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
}

.rp-track-art {
width: 56px;
height: 56px;
background: var(–rp-mid);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}

.rp-track-name {
font-family: var(–font-display);
font-size: 20px;
font-weight: 500;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.rp-track-artist {
font-size: 13px;
color: rgba(255,255,255,0.45);
margin-top: 2px;
}

.rp-waveform {
display: flex;
align-items: center;
gap: 3px;
height: 36px;
margin-bottom: 18px;
}

.rp-waveform-bar {
background: var(–rp-mid);
width: 3px;
border-radius: 2px;
opacity: 0.55;
animation: waveAnim 1.2s ease-in-out infinite;
}
.rp-waveform-bar.played {
background: var(–rp-light);
opacity: 1;
}

@keyframes waveAnim {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(var(–h, 1.5)); }
}

.rp-player-controls {
display: flex;
align-items: center;
gap: 14px;
}

.rp-play-btn {
width: 42px;
height: 42px;
background: var(–rp-terra);
border: none;
border-radius: 50%;
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.2s;
}
.rp-play-btn:hover { opacity: 0.85; }

.rp-progress-bar {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
cursor: pointer;
}
.rp-progress-fill {
height: 100%;
width: 42%;
background: var(–rp-light);
border-radius: 2px;
}

/* ============================================================
SECTIONS BASE
============================================================ */
.rp-section {
padding: 80px 40px;
}

.rp-section-inner {
max-width: 960px;
margin: 0 auto;
}

.rp-section-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–rp-muted);
font-weight: 500;
margin-bottom: 8px;
}

.rp-section-title {
font-family: var(–font-display);
font-size: 42px;
font-weight: 500;
color: var(–rp-dark);
line-height: 1.12;
margin-bottom: 14px;
}

.rp-section-sub {
font-size: 15px;
color: var(–rp-muted);
font-weight: 300;
max-width: 560px;
line-height: 1.75;
margin-bottom: 44px;
}

/* ============================================================
FEATURED PROGRAM — NatúrAndò
============================================================ */
.rp-featured { background: var(–rp-pale); }

.rp-featured-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}

.rp-featured-img {
background: var(–rp-dark);
border-radius: var(–radius-md);
height: 320px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

.rp-program-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(–rp-mid);
color: #fff;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: var(–radius-pill);
font-weight: 500;
margin-bottom: 18px;
}
.rp-program-tag::before { content: ‘▶’; font-size: 8px; }

.rp-featured-title {
font-family: var(–font-display);
font-size: 48px;
font-weight: 500;
color: var(–rp-dark);
line-height: 1.08;
margin-bottom: 16px;
}
.rp-featured-title em {
font-style: italic;
color: var(–rp-terra);
}

.rp-featured-desc {
font-size: 15px;
color: var(–rp-muted);
line-height: 1.8;
font-weight: 300;
margin-bottom: 28px;
}

.rp-meta-row {
display: flex;
gap: 20px;
margin-bottom: 32px;
flex-wrap: wrap;
}

.rp-meta-item {
font-size: 12px;
color: var(–rp-muted);
display: flex;
align-items: center;
gap: 7px;
}

.rp-meta-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(–rp-light);
flex-shrink: 0;
}

/* ============================================================
MOOD CHANNELS
============================================================ */
.rp-channels { background: var(–rp-cream); }

.rp-channels-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 20px;
}

.rp-channels-desc {
max-width: 300px;
font-size: 14px;
color: var(–rp-muted);
font-weight: 300;
line-height: 1.7;
}

.rp-channel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.rp-channel-card {
border-radius: var(–radius-md);
padding: 26px 22px 22px;
cursor: pointer;
transition: transform 0.22s ease;
position: relative;
overflow: hidden;
}
.rp-channel-card:hover { transform: translateY(-4px); }

.rp-channel-card.naturando { background: var(–rp-dark); }
.rp-channel-card.vinile { background: #3D3529; }
.rp-channel-card.classici { background: #4A2C1A; }
.rp-channel-card.electro { background: #1A2B3D; }

.rp-channel-play {
position: absolute;
top: 16px; right: 16px;
width: 32px; height: 32px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: rgba(255,255,255,0.65);
border: none;
cursor: pointer;
transition: background 0.2s;
}
.rp-channel-card.naturando .rp-channel-play {
background: var(–rp-terra);
color: #fff;
}
.rp-channel-play:hover { background: rgba(255,255,255,0.25); }

.rp-channel-icon {
font-size: 30px;
margin-bottom: 14px;
display: block;
}

.rp-channel-name {
font-family: var(–font-display);
font-size: 21px;
font-weight: 500;
color: #fff;
line-height: 1.2;
margin-bottom: 7px;
}

.rp-channel-claim {
font-size: 12px;
color: rgba(255,255,255,0.45);
line-height: 1.55;
margin-bottom: 14px;
font-weight: 300;
}

.rp-channel-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}

.rp-channel-tag {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.55);
font-size: 10px;
padding: 3px 9px;
border-radius: var(–radius-sm);
letter-spacing: 0.05em;
}

/* ============================================================
COMMUNITY CHART
============================================================ */
.rp-chart-section { background: var(–rp-pale); }

.rp-chart-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 52px;
align-items: start;
}

.rp-chart-subtitle {
font-size: 13px;
color: var(–rp-muted);
margin-bottom: 6px;
}

.rp-chart-list { list-style: none; }

.rp-chart-item {
display: flex;
align-items: center;
gap: 16px;
padding: 15px 0;
border-bottom: 1px solid rgba(61,53,41,0.08);
}

.rp-chart-rank {
font-family: var(–font-display);
font-size: 24px;
font-weight: 400;
color: var(–rp-light);
width: 30px;
flex-shrink: 0;
text-align: center;
}

.rp-chart-info { flex: 1; min-width: 0; }

.rp-chart-song {
font-size: 14px;
font-weight: 500;
color: var(–rp-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.rp-chart-artist {
font-size: 12px;
color: var(–rp-muted);
margin-top: 2px;
}

.rp-chart-votes {
font-size: 12px;
color: var(–rp-terra);
font-weight: 500;
white-space: nowrap;
}

.rp-vote-btn {
width: 30px;
height: 30px;
background: transparent;
border: 1px solid var(–rp-light);
border-radius: 50%;
color: var(–rp-mid);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s, color 0.2s;
}
.rp-vote-btn:hover {
background: var(–rp-light);
color: var(–rp-dark);
}
.rp-vote-btn.voted {
background: var(–rp-light);
color: var(–rp-dark);
border-color: var(–rp-light);
}

.rp-chart-sidebar {
background: var(–rp-dark);
border-radius: var(–radius-md);
padding: 32px;
color: #fff;
}

.rp-chart-sidebar-title {
font-family: var(–font-display);
font-size: 30px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 14px;
}

.rp-chart-sidebar-desc {
font-size: 14px;
color: rgba(255,255,255,0.5);
line-height: 1.75;
font-weight: 300;
margin-bottom: 28px;
}

.rp-btn-full {
width: 100%;
padding: 13px;
border-radius: var(–radius-pill);
font-family: var(–font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
margin-bottom: 10px;
transition: opacity 0.2s;
}
.rp-btn-full:hover { opacity: 0.88; }
.rp-btn-full.solid {
background: var(–rp-terra);
color: #fff;
border: none;
}
.rp-btn-full.outline {
background: transparent;
color: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================================
ANALYTICS / CREATOR
============================================================ */
.rp-analytics { background: var(–rp-cream); }

.rp-analytics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}

.rp-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.rp-metric-card {
background: var(–rp-pale);
border-radius: var(–radius-md);
padding: 22px 18px;
}

.rp-metric-value {
font-family: var(–font-display);
font-size: 36px;
font-weight: 500;
color: var(–rp-dark);
line-height: 1;
margin-bottom: 5px;
}

.rp-metric-label {
font-size: 12px;
color: var(–rp-muted);
font-weight: 400;
}

.rp-metric-delta {
font-size: 11px;
color: var(–rp-mid);
font-weight: 500;
margin-top: 5px;
}

/* ============================================================
ABOUT STRIP
============================================================ */
.rp-about {
background: var(–rp-dark);
padding: 72px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 56px;
flex-wrap: wrap;
}

.rp-about-text { max-width: 580px; }

.rp-about-title {
font-family: var(–font-display);
font-size: 38px;
font-weight: 500;
color: #fff;
line-height: 1.2;
margin-bottom: 18px;
}

.rp-about-desc {
font-size: 15px;
color: rgba(255,255,255,0.55);
line-height: 1.8;
font-weight: 300;
}

.rp-about-badge {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(–radius-md);
padding: 24px 32px;
text-align: center;
flex-shrink: 0;
}

.rp-about-quote {
font-family: var(–font-display);
font-size: 16px;
font-style: italic;
color: rgba(255,255,255,0.6);
line-height: 1.65;
}

.rp-about-loc {
font-size: 11px;
color: var(–rp-light);
margin-top: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* ============================================================
PLAYER BAR (sticky bottom)
============================================================ */
.rp-playerbar {
position: sticky;
bottom: 0;
background: var(–rp-dark);
border-top: 1px solid rgba(255,255,255,0.08);
padding: 10px 32px;
display: flex;
align-items: center;
gap: 20px;
z-index: 1000;
}

.rp-pb-track {
display: flex;
align-items: center;
gap: 12px;
min-width: 220px;
}

.rp-pb-art {
width: 40px;
height: 40px;
background: var(–rp-mid);
border-radius: var(–radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}

.rp-pb-name {
font-size: 13px;
font-weight: 500;
color: #fff;
}

.rp-pb-artist {
font-size: 11px;
color: rgba(255,255,255,0.4);
margin-top: 1px;
}

.rp-pb-controls {
display: flex;
align-items: center;
gap: 16px;
margin: 0 auto;
}

.rp-pb-btn {
background: transparent;
border: none;
color: rgba(255,255,255,0.45);
font-size: 14px;
cursor: pointer;
transition: color 0.2s;
}
.rp-pb-btn:hover { color: rgba(255,255,255,0.8); }

.rp-pb-play {
width: 38px;
height: 38px;
background: var(–rp-terra);
border: none;
border-radius: 50%;
color: #fff;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
}
.rp-pb-play:hover { opacity: 0.85; }

.rp-pb-prog {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
max-width: 280px;
cursor: pointer;
}
.rp-pb-prog-fill {
height: 100%;
width: 35%;
background: var(–rp-light);
border-radius: 2px;
transition: width 0.1s;
}

.rp-live-badge {
background: #E8593C;
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: var(–radius-sm);
text-transform: uppercase;
}

.rp-pb-actions {
display: flex;
gap: 10px;
margin-left: auto;
}

/* ============================================================
RESPONSIVE — Mobile
============================================================ */
@media (max-width: 768px) {
.rp-nav { padding: 0 20px; }
.rp-nav-links { display: none; }

.rp-hero {
grid-template-columns: 1fr;
padding: 48px 20px 40px;
gap: 36px;
}
.rp-hero h1 { font-size: 42px; }

.rp-section { padding: 56px 20px; }

.rp-featured-grid,
.rp-analytics-grid,
.rp-chart-grid { grid-template-columns: 1fr; gap: 32px; }

.rp-channel-grid { grid-template-columns: 1fr 1fr; }

.rp-about { padding: 48px 20px; flex-direction: column; }
.rp-about-badge { width: 100%; }

.rp-ticker-next { display: none; }

.rp-playerbar {
padding: 10px 16px;
gap: 12px;
}
.rp-pb-controls { gap: 10px; }
}

@media (max-width: 480px) {
.rp-channel-grid { grid-template-columns: 1fr; }
.rp-metrics { grid-template-columns: 1fr 1fr; }
.rp-hero h1 { font-size: 36px; }
}

/* Waveform bars */
(function() {
const heights = [14,20,10,26,16,12,22,18,8,24,14,20,10,28,16,12,20,14,18,8,24,16,12,22];
const delays = [0,0.1,0.25,0.4,0.55,0.7,0.15,0.3,0.45,0.6,0.05,0.2,0.35,0.5,0.65,0.8,0.1,0.3,0.45,0.6,0.2,0.35,0.5,0.65];
const playedCount = 7;
const container = document.getElementById(‘waveform’);
if (!container) return;
heights.forEach(function(h, i) {
var bar = document.createElement(‘div’);
bar.className = ‘rp-waveform-bar’ + (i < playedCount ? ' played' : '');
bar.style.cssText = 'height:' + h + 'px;–h:' + (1 + (28 – h) / 14).toFixed(1) + ';animation-delay:' + delays[i] + 's';
container.appendChild(bar);
});
})();

/* Chart list */
var chartData = [
{ rank:1, song:'Respiro di Notte', artist:'Anima Naturale', votes:312 },
{ rank:2, song:'Salento in Fiore', artist:'Marco Castagna', votes:287 },
{ rank:3, song:'Cammino Lento', artist:'Terra Madre', votes:241 },
{ rank:4, song:'Alba sul Mediterraneo', artist:'Silenzio e Suono',votes:198 },
{ rank:5, song:'Uliveto al Tramonto', artist:'Pino De Palma', votes:174 }
];

(function() {
var list = document.getElementById('chartList');
if (!list) return;
chartData.forEach(function(item) {
var li = document.createElement('li');
li.className = 'rp-chart-item';
li.innerHTML =
'‘ + item.rank + ‘‘ +
‘

‘ +
‘‘ + item.votes + ‘ voti‘ +
‘♡‘;
list.appendChild(li);
});

/* Vote interaction */
list.addEventListener(‘click’, function(e) {
var btn = e.target.closest(‘.rp-vote-btn’);
if (!btn) return;
var rank = parseInt(btn.dataset.rank);
var entry = chartData.find(function(d){ return d.rank === rank; });
if (!entry) return;
if (btn.classList.contains(‘voted’)) {
btn.classList.remove(‘voted’);
entry.votes -= 1;
btn.setAttribute(‘aria-label’, ‘Vota’);
} else {
btn.classList.add(‘voted’);
entry.votes += 1;
btn.setAttribute(‘aria-label’, ‘Voto rimosso’);
}
var el = document.getElementById(‘votes-‘ + rank);
if (el) el.textContent = entry.votes + ‘ voti’;
});
})();

/* Play button toggle (hero + playerbar) */
function makePlayToggle(btn) {
if (!btn) return;
btn.addEventListener(‘click’, function() {
var playing = btn.textContent.trim() === ‘❚❚’;
btn.textContent = playing ? ‘▶’ : ‘❚❚’;
});
}
makePlayToggle(document.getElementById(‘heroPlayBtn’));
makePlayToggle(document.getElementById(‘pbPlayBtn’));

/* Progress bar click (playerbar) */
(function() {
var bar = document.getElementById(‘pbProgress’);
var fill = document.getElementById(‘pbFill’);
if (!bar || !fill) return;
bar.addEventListener(‘click’, function(e) {
var rect = bar.getBoundingClientRect();
var pct = Math.max(0, Math.min(100, ((e.clientX – rect.left) / rect.width) * 100));
fill.style.width = Math.round(pct) + ‘%’;
});
})();