/wp-content/themes/your-theme/page-radio.php
Your Radio
:root{
–bg:#fff;
–fg:#111;
–muted:#666;
–line:#e7e7e7;
–pad:18px;
–max:1200px;
–radius:14px;
}
*{box-sizing:border-box}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, “Helvetica Neue”, sans-serif;
background:var(–bg);
color:var(–fg);
padding-bottom:86px; /* space for player bar */
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(–max); margin:0 auto; padding:0 var(–pad)}
.topbar{
position:sticky; top:0; z-index:10;
background:rgba(255,255,255,.9);
backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid var(–line);
}
.topbar-inner{
display:flex; align-items:center; justify-content:space-between;
height:64px;
}
.brand{
display:flex; gap:10px; align-items:center; font-weight:700;
letter-spacing:.2px;
}
.logo{
width:34px; height:34px; border:2px solid var(–fg);
border-radius:50%; display:grid; place-items:center; font-size:12px;
}
.nav{
display:flex; gap:14px; align-items:center;
font-size:14px;
}
.nav a{padding:8px 10px; border-radius:999px}
.nav a:hover{background:#f4f4f4}
.btn{
border:1px solid var(–fg);
background:var(–fg);
color:var(–bg);
padding:10px 14px;
border-radius:999px;
cursor:pointer;
font-weight:600;
font-size:14px;
}
.btn.secondary{
background:transparent;
color:var(–fg);
}
.hero{
padding:22px 0 8px;
border-bottom:1px solid var(–line);
}
.kicker{color:var(–muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em}
.h1{
margin:8px 0 10px;
font-size: clamp(28px, 3vw, 44px);
line-height:1.08;
letter-spacing:-.02em;
font-weight:800;
}
.sub{
margin:0;
color:var(–muted);
max-width:70ch;
line-height:1.5;
}
.section{padding:26px 0}
.section h2{
margin:0 0 14px;
font-size:18px;
letter-spacing:-.01em;
}
.nextup{
display:flex; flex-wrap:wrap; gap:16px;
border:1px solid var(–line);
border-radius:var(–radius);
padding:16px;
align-items:center;
}
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:8px 12px;
border:1px solid var(–line);
border-radius:999px;
font-size:13px;
color:var(–muted);
}
.dot{
width:8px; height:8px; border-radius:50%;
background:var(–fg);
}
.nextup-title{font-weight:700}
.nextup-meta{color:var(–muted); font-size:13px}
.grid{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap:16px;
}
.card{
grid-column: span 4;
border:1px solid var(–line);
border-radius:var(–radius);
overflow:hidden;
background:#fff;
min-height:320px;
display:flex;
flex-direction:column;
}
.thumb{
aspect-ratio: 16 / 10;
background:#f2f2f2;
display:block;
width:100%;
object-fit:cover;
}
.card-body{
padding:14px;
display:flex;
flex-direction:column;
gap:8px;
flex:1;
}
.title{font-weight:800; line-height:1.15}
.meta{color:var(–muted); font-size:13px}
.tags{
margin-top:auto;
display:flex; flex-wrap:wrap; gap:8px;
}
.tag{
font-size:12px;
padding:6px 10px;
border-radius:999px;
border:1px solid var(–line);
color:#333;
background:#fafafa;
}
.newslist{
display:grid;
gap:10px;
border-top:1px solid var(–line);
padding-top:14px;
}
.newsitem{
display:flex; gap:10px; align-items:baseline;
padding:10px 0;
border-bottom:1px solid var(–line);
}
.date{min-width:110px; color:var(–muted); font-size:13px}
.headline{font-weight:700}
.snippet{color:var(–muted); font-size:13px}
.playerbar{
position:fixed; left:0; right:0; bottom:0; z-index:20;
background:rgba(255,255,255,.96);
border-top:1px solid var(–line);
backdrop-filter:saturate(180%) blur(10px);
}
.player-inner{
max-width:var(–max);
margin:0 auto;
padding:12px var(–pad);
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.now{
display:flex; flex-direction:column;
gap:2px;
min-width:220px;
}
.now strong{font-size:14px}
.now span{font-size:13px; color:var(–muted)}
.controls{
display:flex; align-items:center; gap:10px;
}
.bigplay{
width:46px; height:46px;
border-radius:999px;
border:1px solid var(–fg);
background:var(–fg);
color:var(–bg);
cursor:pointer;
font-weight:800;
}
.vol{
width:140px;
}
/* simple mobile */
@media (max-width: 900px){
.nav a{display:none}
.card{grid-column: span 6}
}
@media (max-width: 600px){
.card{grid-column: span 12}
.date{min-width:92px}
.vol{display:none}
.now{min-width:auto}
}
Live from your city
Independent radio for music, voices, and community.
A minimal, editorial homepage with shows, news, and a persistent player button, inspired by community radio platforms.
Next Up
On Air soon
Sunday Live Session
13:00–16:00 • Talk, Music, Community
About
Put your short mission text here. Keep it direct, like Refuge Worldwide does with a simple intro and a link to read more. :contentReference[oaicite:1]{index=1}
// Replace with your real stream URL (Icecast, Shoutcast, HLS, etc.)
const STREAM_URL = “
https://example.com/stream.mp3”;
const audio = new Audio();
audio.src = STREAM_URL;
audio.preload = “none”;
audio.crossOrigin = “anonymous”;
const playBtn = document.getElementById(“playBtn”);
const nowTitle = document.getElementById(“nowTitle”);
const nowMeta = document.getElementById(“nowMeta”);
const vol = document.getElementById(“vol”);
vol.addEventListener(“input”, () => audio.volume = parseFloat(vol.value));
audio.volume = parseFloat(vol.value);
function playPause(){
if (audio.paused){
audio.play().then(() => {
playBtn.textContent = “❚❚”;
nowTitle.textContent = “Live Stream”;
nowMeta.textContent = “Now playing”;
}).catch(() => {
nowTitle.textContent = “Cannot play”;
nowMeta.textContent = “Check stream URL or browser autoplay settings”;
});
} else {
audio.pause();
playBtn.textContent = “▶”;
nowTitle.textContent = “Paused”;
nowMeta.textContent = “Press play to continue”;
}
}
function toggleMenu(){
alert(“Menu placeholder. In WordPress, this can open an overlay with links.”);
}
WeareBonFree Community Radio 