CRN Test

California Rock News — Live Event Coverage

:root{
–ink:#120f0c;–ink-2:#1c1712;–paper:#f2e9d8;–paper-dim:#c9bfa9;
–marquee:#e23b2e;–gold:#e3a73e;–highway:#3c6672;–line:rgba(242,233,216,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(–ink);color:var(–paper);font-family:’IBM Plex Sans’,sans-serif;line-height:1.5;}
.display{font-family:’Anton’,sans-serif;font-weight:400;letter-spacing:0.5px;text-transform:uppercase;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.skip-link{position:absolute;left:-999px;top:0;background:var(–gold);color:var(–ink);padding:10px 16px;z-index:100;font-weight:700;}
.skip-link:focus{left:12px;top:12px;}

.ticker-bar{background:var(–gold);color:var(–ink);overflow:hidden;white-space:nowrap;border-bottom:2px solid var(–ink);}
.ticker-track{display:inline-block;padding:7px 0;padding-left:100%;animation:scroll-left 36s linear infinite;font-family:’Space Mono’,monospace;font-weight:700;font-size:0.8rem;letter-spacing:0.03em;}
.ticker-track span{margin-right:3em;}
@keyframes scroll-left{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none;padding-left:1rem;}}

header.site{position:sticky;top:0;z-index:50;background:rgba(18,15,12,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(–line);}
.nav-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand .display{font-size:1.5rem;color:var(–paper);}
.brand .display em{font-style:normal;color:var(–marquee);}
nav.primary{display:flex;gap:26px;align-items:center;}
nav.primary a{color:var(–paper-dim);font-weight:600;font-size:0.85rem;letter-spacing:0.03em;text-transform:uppercase;padding-bottom:4px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;}
nav.primary a:hover{color:var(–paper);border-color:var(–marquee);}
.nav-toggle{display:none;background:none;border:1px solid var(–line);color:var(–paper);padding:8px 12px;font-size:1rem;border-radius:2px;}

.hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;background:
linear-gradient(180deg, rgba(18,15,12,0.15) 0%, rgba(18,15,12,0.35) 45%, rgba(18,15,12,0.96) 100%),
url(‘https://californiarocknews.com/wp-content/uploads/2025/11/k5a8707mana-kia-forum-11.21.25-alex-kluft.jpg?w=1600’)
center/cover no-repeat;
border-bottom:1px solid var(–line);
}
.hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:60px 24px 50px;width:100%;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:’Space Mono’,monospace;font-size:0.75rem;letter-spacing:0.12em;color:var(–gold);text-transform:uppercase;margin-bottom:16px;}
.eyebrow::before{content:”●”;color:var(–marquee);}
h1.hero-title{font-size:clamp(2.2rem,6vw,4.4rem);line-height:0.96;margin:0 0 16px;color:var(–paper);text-shadow:0 4px 30px rgba(0,0,0,0.4);}
h1.hero-title .line2{color:var(–marquee);}
.hero-sub{max-width:560px;color:var(–paper-dim);font-size:1.05rem;margin:0 0 28px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-block;padding:13px 26px;font-weight:700;font-size:0.86rem;letter-spacing:0.03em;text-transform:uppercase;border-radius:2px;transition:transform .15s ease,background .15s ease;}
.btn-solid{background:var(–marquee);color:var(–paper);}
.btn-solid:hover{background:#c72e22;transform:translateY(-2px);}
.btn-outline{border:1px solid var(–paper-dim);color:var(–paper);}
.btn-outline:hover{border-color:var(–paper);transform:translateY(-2px);}

section{max-width:1200px;margin:0 auto;padding:56px 24px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(–line);padding-bottom:14px;margin-bottom:30px;flex-wrap:wrap;gap:10px;}
.section-head h2{font-size:1.8rem;margin:0;color:var(–paper);}
.section-head .tag{font-family:’Space Mono’,monospace;font-size:0.76rem;color:var(–paper-dim);}

/* embedded article cards (JS-populated) */
.article-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;}
.article-card{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;background-size:cover;background-position:center;background-color:var(–ink-2);display:flex;align-items:flex-end;border:1px solid var(–line);transition:transform .15s ease,border-color .15s ease;}
.article-card:hover{transform:translateY(-3px);border-color:var(–gold);}
.article-card.wide{grid-row:span 2;aspect-ratio:auto;}
.article-card::after{content:””;position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,15,12,0) 30%, rgba(18,15,12,0.94) 100%);}
.article-card .card-body{position:relative;padding:20px;z-index:1;}
.article-card .card-tag{font-family:’Space Mono’,monospace;font-size:0.7rem;color:var(–gold);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;display:block;}
.article-card h3{font-family:’IBM Plex Sans’,sans-serif;font-weight:700;font-size:1.02rem;line-height:1.3;margin:0 0 8px;color:var(–paper);}
.article-card.wide h3{font-size:1.45rem;}
.article-card p{font-size:0.85rem;color:var(–paper-dim);margin:0;display:none;}
.article-card.wide p{display:block;}
.skeleton{animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

footer.site{border-top:1px solid var(–line);padding:44px 24px 30px;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.footer-inner p{color:var(–paper-dim);font-size:0.85rem;margin:0;}
.social-row{display:flex;gap:12px;}
.social-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(–line);display:flex;align-items:center;justify-content:center;color:var(–paper);transition:background .15s ease,border-color .15s ease,transform .15s ease;}
.social-btn:hover{background:var(–marquee);border-color:var(–marquee);transform:translateY(-2px);}
.social-btn svg{width:17px;height:17px;fill:currentColor;}

@media (max-width:880px){
nav.primary{display:none;}
.nav-toggle{display:inline-block;}
.article-grid{grid-template-columns:1fr;}
.article-card.wide{grid-row:auto;aspect-ratio:4/5;}
.footer-inner{flex-direction:column;align-items:flex-start;}
}

SoCal live music, straight up

ON STAGE
IN CALIFORNIA.

California Rock News covers the shows worth driving for — live reviews and photo coverage from the venues, arenas, and clubs across Southern California.

Live Event Coverage

LOADING…

(function () {
var FEED_URL = “https://public-api.wordpress.com/rest/v1.1/sites/californiarocknews.com/posts/?number=6&fields=ID,title,URL,excerpt,date,featured_image,categories”;
var grid = document.getElementById(“article-grid”);
var countLabel = document.getElementById(“article-count”);
var ticker = document.getElementById(“ticker-track”);

function stripHtml(html) {
var tmp = document.createElement(“div”);
tmp.innerHTML = html || “”;
return (tmp.textContent || tmp.innerText || “”).trim();
}
function truncate(text, max) {
if (text.length <= max) return text;
return text.slice(0, max).replace(/\s+\S*$/, "") + "…";
}
function firstCategory(categories) {
if (!categories) return "Live Review";
var keys = Object.keys(categories);
return keys.length ? categories[keys[0]].name : "Live Review";
}
function formatDate(iso) {
var d = new Date(iso);
if (isNaN(d)) return "";
return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
}

function buildCard(post, wide) {
var a = document.createElement("a");
a.className = "article-card" + (wide ? " wide" : "");
a.href = post.URL;
a.target = "_blank";
a.rel = "noopener noreferrer";
if (post.featured_image) {
a.style.backgroundImage = "url('" + post.featured_image + "')";
}
var body = document.createElement("div");
body.className = "card-body";

var tag = document.createElement("span");
tag.className = "card-tag";
tag.textContent = firstCategory(post.categories) + " · " + formatDate(post.date);

var h3 = document.createElement("h3");
h3.textContent = post.title;

var p = document.createElement("p");
p.textContent = truncate(stripHtml(post.excerpt), 140);

body.appendChild(tag);
body.appendChild(h3);
body.appendChild(p);
a.appendChild(body);
return a;
}

fetch(FEED_URL)
.then(function (res) {
if (!res.ok) throw new Error("Feed request failed: " + res.status);
return res.json();
})
.then(function (data) {
var posts = data && data.posts ? data.posts : [];
if (!posts.length) throw new Error("No posts returned");

grid.innerHTML = "";
posts.forEach(function (post, i) {
grid.appendChild(buildCard(post, i === 0));
});
countLabel.textContent = posts.length + " ARTICLES LOADED";

ticker.innerHTML = "";
var tickerPosts = posts.concat(posts);
tickerPosts.forEach(function (post) {
var span = document.createElement("span");
span.textContent = post.title.toUpperCase();
ticker.appendChild(span);
});
})
.catch(function (err) {
console.warn("Could not load live articles:", err);
countLabel.textContent = "COULD NOT LOAD ARTICLES";
grid.innerHTML = '

Live articles could not be loaded right now. Visit the full site.

‘;
ticker.innerHTML = “VISIT CALIFORNIARockNEWS.COM FOR THE LATEST COVERAGE“;
});
})();