/* ccm-events.css — extracted from ccm-events.html (Session C, 2026-07-11). Shared styles live in ccm.css. */
:root {
--cat-track: #3b82f6;
--cat-club: #10b981;
}
/* ── PAGE HEADER (title baked into controls bar) ─────────── */
.page-header {
border-bottom: 1px solid var(--border);
}
.page-header-top {
padding: 48px 72px 16px;
display: flex; align-items: baseline; gap: 14px;
}
.page-title {
font-family: var(--font-display); font-weight: 900;
font-size: var(--text-2xl); text-transform: uppercase; letter-spacing: -0.02em;
line-height: 1; color: var(--text);
}
.page-title em { font-style: normal; color: var(--red); }
.page-subtitle {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted);
}
/* ── CONTROLS ─────────────────────────────────────────────── */
.controls {
background: var(--surface); padding: 0 72px;
display: flex; align-items: center;
border-top: 1px solid var(--border); overflow-x: auto;
justify-content: space-between; position: sticky; top: 56px; z-index: 10;
}
.filter-group { display: flex; align-items: center; gap: 0; }
.filter-label {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.15em;
text-transform: uppercase; color: var(--muted); margin-right: 8px; white-space: nowrap;
}
.filter-btn {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
padding: 14px 14px; border: none; cursor: pointer; background: transparent; color: var(--muted);
border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.filter-btn .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.filter-btn:hover { color: var(--text); }
.filter-btn.active { color: var(--text); border-bottom-color: currentColor; }
.filter-btn[data-cat="all"].active { color: var(--text); border-bottom-color: var(--text); }
.filter-btn[data-cat="road"].active { color: var(--red); }
.filter-btn[data-cat="track"].active { color: var(--cat-track); }
.filter-btn[data-cat="tt"].active { color: var(--red); }
.filter-btn[data-cat="club"].active { color: var(--cat-club); }
.view-toggle { display: flex; gap: 2px; padding: 12px 0; flex-shrink: 0; }
.view-btn {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
padding: 6px 12px; border: 1px solid var(--border); background: transparent;
color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.view-btn.active { background: var(--surface3); color: var(--text); border-color: var(--muted); }
/* ── MAIN ─────────────────────────────────────────────────── */
.main { padding: 40px 72px; }
/* ── MONTH GROUP ──────────────────────────────────────────── */
.month-group { margin-bottom: 40px; }
.month-header {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
padding-bottom: 10px; border-bottom: 2px solid var(--border);
}
.month-name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; color: var(--text); }
.month-year { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.15em; color: var(--muted); }
.month-count { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--muted); margin-left: auto; }
/* ── EVENTS GRID ──────────────────────────────────────────── */
.events-grid { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
/* ── EVENT TILE ───────────────────────────────────────────── */
.ec {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 16px; align-items: stretch;
padding: 14px 16px;
background: var(--surface2);
border: 1px solid var(--border);
border-left: 4px solid transparent;
text-decoration: none; color: inherit;
transition: background 0.1s, border-color 0.1s; cursor: pointer;
}
.ec:hover { background: var(--surface3); }
.ec.past { opacity: 0.38; }
.ec.cat-road { border-left-color: var(--red); }
.ec.cat-track { border-left-color: var(--cat-track); }
.ec.cat-tt { border-left-color: var(--gold); }
.ec.cat-club { border-left-color: var(--cat-club); }
.ec.cat-unknown { border-left-color: var(--border); }
/* Date block — SAT/JUN stacked left, big number right */
.ec-date {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0; padding-right: 16px; margin-right: 2px;
border-right: 1px solid var(--border);
}
.ec-daymon { display: flex; flex-direction: column; align-items: flex-end; }
.ec-dow, .ec-mon {
font-family: var(--font-mono); font-size: var(--text-base); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); line-height: 1.25;
}
.ec-d {
font-family: var(--font-display); font-weight: 900; font-size: var(--text-5xl);
color: var(--text); line-height: 1; letter-spacing: -0.04em;
}
/* Body */
.ec-body { min-width: 0; }
.ec-name {
font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); line-height: 1.15;
}
.ec-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.ec-badge {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
text-transform: uppercase; padding: 2px 6px; border-radius: 1px; flex-shrink: 0;
}
.cat-road .ec-badge { background: rgba(238,28,37,0.1); color: var(--red); border: 1px solid rgba(238,28,37,0.2); }
.cat-track .ec-badge { background: rgba(59,130,246,0.1); color: var(--cat-track); border: 1px solid rgba(59,130,246,0.2); }
.cat-tt .ec-badge { background: rgba(255,215,0,0.08); color: var(--gold); border: 1px solid rgba(255,215,0,0.2); }
.cat-club .ec-badge { background: rgba(16,185,129,0.1); color: var(--cat-club); border: 1px solid rgba(16,185,129,0.2); }
.cat-unknown .ec-badge { background: rgba(0,0,0,0.04); color: var(--muted); border: 1px solid var(--border); }
.ec-sep { color: var(--border); font-size: var(--text-xs); }
.ec-time, .ec-loc { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--muted); }
.ec-pill {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
text-transform: uppercase; padding: 2px 6px; border-radius: 1px;
border: 1px solid rgba(255,215,0,0.3); color: var(--gold); flex-shrink: 0;
}
/* Extra info (trophy / series / description) inside the tile */
.ec-extra { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ec-trophy {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--muted);
}
.ec-trophy-icon { color: var(--gold); margin-right: 3px; }
.ec-series {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
text-transform: uppercase; padding: 1px 6px; border-radius: 1px; border: 1px solid var(--border);
color: var(--muted); display: inline-block; align-self: flex-start;
}
.ec-desc-extra {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-enter {
font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--red); text-decoration: none;
padding: 3px 10px; border: 1px solid rgba(238,28,37,0.35); border-radius: 1px;
transition: background 0.1s; align-self: flex-start; margin-top: 2px;
}
.ec-enter:hover { background: rgba(238,28,37,0.08); }
/* ── LOADING / EMPTY ──────────────────────────────────────── */
.loading-state {
display: flex; flex-direction: column; align-items: center;
gap: 16px; padding: 80px 0; color: var(--muted);
}
.loading-spinner {
width: 28px; height: 28px; border: 2px solid var(--border);
border-top-color: var(--red); border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; }
.empty { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--muted); padding: 40px 0; text-align: center; }
.error-state { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--red); padding: 40px 0; text-align: center; line-height: 2; }
/* ── DESKTOP: 2-column tile grid ─────────────────────────── */
@media (min-width: 769px) {
.events-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
.page-header-top { padding: 14px 16px 12px; }
.controls { padding: 0 16px; top: 48px; }
.main { padding: 24px 16px; }
.stats-bar { flex-wrap: wrap; }
.stat-item { min-width: 50%; border-bottom: 1px solid var(--border); }
}