/* ============================================================================= * Shared header — used by index.html, stats.html, ecosystem.html * * Relies on CSS variables declared per-page in :root (--bg, --surface, --border, * --text, --muted, --grin, --blue, --green) so theme switching keeps working. * * Per-page opt-out: set `` to hide the data pills + API * button (e.g. ecosystem.html, which has its own summary bar below). * ============================================================================= */ /* ── Header layout ───────────────────────────────────────────────────────── */ header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex-shrink: 0; gap: 12px; z-index: 1050; } .logo { display: flex; align-items: center; gap: 8px; } .logo-img { height: 26px; width: 26px; flex-shrink: 0; } .logo-dot { width: 8px; height: 8px; background: var(--grin); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .logo h1 { font-size: 16px; font-weight: 600; color: var(--text); } .logo h1 span { color: var(--grin); } /* ── Nav ─────────────────────────────────────────────────────────────────── */ nav { display: flex; gap: 6px; } .nav-btn { color: var(--muted); text-decoration: none; padding: 5px 13px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; font-weight: 500; transition: all 0.15s; white-space: nowrap; } .nav-btn:hover { color: var(--text); border-color: var(--muted); } .nav-btn.active { color: var(--grin); border-color: var(--grin); background: rgba(255,153,0,0.1); } /* ── Header right side ───────────────────────────────────────────────────── */ .header-right { display: flex; align-items: center; justify-self: end; flex-wrap: wrap; } .stat-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ── Combined pills ──────────────────────────────────────────────────────── */ .pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .pill-network { border-color: var(--grin); background: rgba(255,153,0,0.08); } .pill-network .v-peers { color: var(--grin); } .pill-network .v-countries { color: var(--blue); } .pill-market { border-color: var(--green); background: rgba(63,185,80,0.08); } .pill-market .v-usd { color: var(--green); } .pill-market .v-btc { color: #ffd700; } html[data-theme="light"] .pill-market { border-color: #cf222e; background: rgba(207,34,46,0.08); } html[data-theme="light"] .pill-market .v-btc { color: #cf222e; } .pill-sep { color: var(--border); font-size: 14px; opacity: 0.7; } /* ── API docs button ─────────────────────────────────────────────────────── */ .api-pill-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); height: 26px; padding: 0 9px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; transition: all 0.15s; flex-shrink: 0; } .api-pill-btn:hover { border-color: var(--blue); color: var(--blue); } html[data-theme="matrix"] .api-pill-btn { border-color: #008800; color: #00cc44; } html[data-theme="matrix"] .api-pill-btn:hover { border-color: #00e5ff; color: #00e5ff; } /* ── Theme picker ────────────────────────────────────────────────────────── */ .theme-picker { position: relative; } .theme-pill-btn { padding: 3px 9px; border-radius: 20px; font-size: 12px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all 0.15s; } .theme-pill-btn:hover { border-color: var(--grin); color: var(--text); } .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: none; z-index: 1100; min-width: 145px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .theme-menu.open { display: block; } .tm-item { display: block; width: 100%; padding: 8px 14px; background: transparent; border: none; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; transition: background 0.1s; } .tm-item:hover { background: rgba(255,153,0,0.1); color: var(--grin); } .tm-item.active { color: var(--grin); font-weight: 600; } /* ── Per-page opt-out: hide data pills + API on pages without those fetches */ body[data-no-pills] .stat-pills > .pill, body[data-no-pills] .stat-pills > .api-pill-btn, body[data-no-pills] .stat-pills > .pill-sep { display: none; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { header { grid-template-columns: 1fr; padding: 10px 14px; gap: 8px; } .logo h1 { font-size: 14px; } nav { justify-self: center; } .header-right { justify-self: auto; } .nav-btn { padding: 4px 9px; font-size: 11px; } }