<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COLLABTUNES — AIO Page Header Component | Component Factory</title>

<!--
================================================================================
COLLABTUNES_AIO_PAGE_HEADER_COMPONENT_5_13_26.html
Collaborhythm / Collabtunes — HTML/CSS Component Factory
Generated: 5.13.26 | Asian Claude — Greenfield Support Track
================================================================================
PURPOSE:
  Complete, copy/paste-ready AIO page header.
  Includes every element from the verified staging page top section.

CONTAINS:
  1. Page metadata block (collabtunes meta tags)
  2. Full CSS for header elements (tokens + component styles)
  3. Staging banner (remove on live promotion)
  4. Social bar with placeholder links
  5. Fast-scroll navigation (right sidebar, fixed position)
  6. Page header: breadcrumb, collection type, title, rating badge, back buttons

SUBSTITUTION TOKENS — replace these when generating a new page:
  {{COLLECTION_ID}}     e.g. SONG_LIST_2
  {{COLLECTION_TITLE}}  e.g. Sheila Tequila
  {{RATING}}            e.g. PG-13
  {{GX_STATUS}}         e.g. PENDING-DELTA-VERIFICATION  or  21
  {{DATE}}              e.g. 2026-05-13
  {{PAGE_TYPE}}         e.g. SONG LIST  or  SET LIST
  {{PAGE_NUMBER}}       e.g. 2 of 10  or  7 of 24
  {{LIVE_URL_SLUG}}     e.g. song-list-2  or  set-list-7

FAST-SCROLL TARGETS (must exist as id="..." in page body):
  top / identity / tracks / context / canon / status
================================================================================
-->

<style>

/* ── DESIGN TOKENS (paste full :root block from DESIGN_TOKENS_BASE_CSS in production) ── */
:root {
  --bg-primary:     #070911;
  --bg-panel:       #0b0a08;
  --bg-soft:        #111111;
  --text-main:      #d8d0bd;
  --text-strong:    #e7d7b8;
  --text-muted:     #8f96a8;
  --accent-gold:    #ffd21f;
  --accent-oldgold: #d4af37;
  --accent-chrome:  #a3a3a3;
  --accent-danger:  #ff3131;
  --border-hard:    #1a1a1a;
  --border-soft:    #141414;
  --border-block:   #1e1e1e;
  --border-mid:     #2a2a2a;
  --font-body:      Georgia, 'Times New Roman', serif;
  --font-mono:      'Courier New', Courier, monospace;
  --content-width:  900px;
  --z-fastscroll:   100;
  --transition-fast: 0.15s;
}

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

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  padding-bottom: 4rem;
}

/* ── STAGING BANNER ──────────────────────────────── */
/* REMOVE THIS ENTIRE BLOCK when promoting to live.   */
.staging-banner {
  background: var(--accent-danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
}
/* ── END STAGING BANNER ─────────────────────────── */

/* ── SOCIAL BAR ── */
.social-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-hard);
  padding: 0.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.social-bar a {
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.social-bar a:hover { color: var(--accent-gold); }

.social-bar .site-id {
  color: var(--accent-oldgold);
  margin-right: 0.5rem;
  font-weight: bold;
}

.social-bar .divider {
  color: var(--border-mid);
}

/* ── FAST SCROLL (right sidebar, fixed) ── */
.fast-scroll {
  position: fixed;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: var(--z-fastscroll);
}

.scroll-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  border-radius: 2px;
}

.scroll-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* ── PAGE HEADER ── */
.page-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 2rem 1.5rem 2rem;
  border-bottom: 1px solid #1c1c1c;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.breadcrumb a {
  color: var(--accent-oldgold);
  text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border-mid); }

.collection-type {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.20em;
  color: var(--accent-gold);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.page-title {
  font-size: 2.2rem;
  font-weight: normal;
  color: var(--text-strong);
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.rating-badge {
  display: inline-block;
  border: 1px solid var(--accent-oldgold);
  color: var(--accent-oldgold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* Estimated rating — dashed border signals unconfirmed */
.rating-badge-pending {
  display: inline-block;
  border: 1px dashed var(--accent-oldgold);
  color: var(--accent-oldgold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 2px;
  text-transform: uppercase;
}

.pending-badge {
  display: inline-block;
  background: var(--accent-gold);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.meta-tag {
  display: inline-block;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.10em;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.back-btn {
  display: inline-block;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  border-radius: 2px;
}

.back-btn:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ── MOBILE SAFETY ── */
@media (max-width: 600px) {
  .fast-scroll { display: none; }  /* Hide sidebar on small screens */
  .mobile-note {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-hard);
    text-align: center;
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .page-title { font-size: 1.6rem; }
  .page-header { padding: 1.5rem 1.25rem 1rem; }
}

@media (min-width: 601px) {
  .mobile-note { display: none; }
}

/* ── COMPONENT FACTORY DEMO LABEL (remove in production) ── */
.factory-note {
  background: var(--bg-panel);
  border: 1px dashed var(--accent-chrome);
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent-chrome);
  letter-spacing: 0.08em;
  line-height: 1.8;
  max-width: var(--content-width);
  margin: 2rem auto;
}

</style>
</head>

<body id="top">

<!-- ============================================================
     COMPONENT 1 OF 6 IN HEADER STACK: STAGING BANNER
     Remove entire div when promoting to live.
     Replace with nothing — no placeholder.
     ============================================================ -->
<div class="staging-banner">
  ⚠ STAGING ONLY — NOT FOR PUBLIC DEPLOYMENT ⚠
</div>


<!-- ============================================================
     COMPONENT 2 OF 6: SOCIAL BAR
     Placeholder hrefs — replace with real URLs when Tom provides.
     Do not remove placeholder links — layout depends on them.
     ============================================================ -->
<nav class="social-bar" aria-label="Site navigation">
  <span class="site-id">Collaborhythm</span>
  <a href="https://collabtunes.com/switchboard-quicklinks/">Switchboard</a>
  <span class="divider">|</span>
  <a href="#">Facebook</a>
  <a href="#">Twitter/X</a>
  <a href="#">Instagram</a>
  <a href="#">YouTube</a>
  <a href="#">Spotify</a>
  <a href="#">Apple Music</a>
  <a href="#">Bandcamp</a>
  <a href="#">SoundCloud</a>
  <a href="#">TikTok</a>
  <a href="#">LinkedIn</a>
</nav>


<!-- ============================================================
     COMPONENT 3 OF 6: FAST SCROLL (fixed right sidebar)
     Targets must exist in page body as id="[name]"
     Standard AIO set: top / identity / tracks / context / canon / status
     ============================================================ -->
<nav class="fast-scroll" aria-label="Fast navigation">
  <a class="scroll-btn" href="#top">Top</a>
  <a class="scroll-btn" href="#identity">ID</a>
  <a class="scroll-btn" href="#tracks">Tracks</a>
  <a class="scroll-btn" href="#context">Context</a>
  <a class="scroll-btn" href="#canon">Canon</a>
  <a class="scroll-btn" href="#status">Status</a>
</nav>


<!-- ============================================================
     COMPONENT 4 OF 6: PAGE HEADER
     Substitute all {{TOKENS}} before use.
     ============================================================ -->
<header class="page-header">

  <!-- Breadcrumb / location indicator -->
  <div class="breadcrumb">
    <a href="https://collabtunes.com/">Collabtunes</a>
    <span class="sep">›</span>
    <a href="https://collabtunes.com/switchboard-quicklinks/">Switchboard</a>
    <span class="sep">›</span>
    <span>{{PAGE_TYPE}} {{PAGE_NUMBER}}</span>
  </div>

  <!-- Collection type label -->
  <div class="collection-type">{{PAGE_TYPE}}</div>

  <!-- Page title -->
  <h1 class="page-title">{{COLLECTION_TITLE}}</h1>

  <!-- Header meta: rating badge + GX badge + meta tags -->
  <div class="header-meta">

    <!-- Confirmed rating — use .rating-badge -->
    <!-- Estimated rating — use .rating-badge-pending with "— Estimated" suffix -->
    <span class="rating-badge">{{RATING}}</span>

    <!-- GX score: use pending-badge if unconfirmed -->
    <!-- Replace with: <span class="rating-badge">GX — 21</span> when confirmed -->
    <span class="pending-badge">GX — <span class="pending-badge">SOURCE PULL REQUIRED</span></span>

    <!-- Meta tags — optional, add/remove as needed -->
    <span class="meta-tag">{{PAGE_TYPE}} {{PAGE_NUMBER}}</span>
    <span class="meta-tag">Collaborhythm</span>
    <span class="meta-tag">V1 Staging</span>

  </div>

  <!-- Navigation buttons -->
  <div class="btn-row">
    <a class="back-btn"
       href="https://collabtunes.com/switchboard-quicklinks/">← Switchboard</a>
    <a class="back-btn"
       href="https://collabtunes.com/{{LIVE_URL_SLUG}}/"
       target="_blank" rel="noopener">Live Page ↗</a>
  </div>

</header>
<!-- ── END PAGE HEADER ── -->


<!-- ============================================================
     COMPONENT FACTORY NOTE (remove in production)
     ============================================================ -->
<div class="factory-note">
  <strong>COLLABTUNES_AIO_PAGE_HEADER_COMPONENT_5_13_26.html</strong><br>
  Component factory reference. Remove this div in production pages.<br><br>
  SUBSTITUTE BEFORE USE:<br>
  {{COLLECTION_ID}}     → e.g. SONG_LIST_2<br>
  {{COLLECTION_TITLE}}  → e.g. Sheila Tequila<br>
  {{RATING}}            → e.g. PG-13  |  Use .rating-badge-pending + "— Estimated" if unconfirmed<br>
  {{PAGE_TYPE}}         → e.g. SONG LIST  or  SET LIST<br>
  {{PAGE_NUMBER}}       → e.g. 2 of 10  or  7 of 24<br>
  {{LIVE_URL_SLUG}}     → e.g. song-list-2  or  set-list-7<br><br>
  GX BADGE RULE:<br>
  Confirmed GX → &lt;span class="rating-badge"&gt;GX — [number]&lt;/span&gt;<br>
  Pending GX   → &lt;span class="pending-badge"&gt;GX — SOURCE PULL REQUIRED&lt;/span&gt;<br>
  Delta GX     → pending-badge + add gx-conflict-note block in identity section<br><br>
  STAGING BANNER: Remove &lt;div class="staging-banner"&gt; on live promotion.<br>
  MOBILE: Fast scroll hides on screens under 600px (by design).
</div>

<!-- Mobile bar — shows on small screens as fast-scroll replacement -->
<div class="mobile-note">
  For best experience, turn device sideways or use a desktop browser.
</div>

</body>
</html>
