/* ============================================================ fcc.cc — Unified Topbar (.umb) Sitewide topbar injected via sub_filter + fcc-unified-topbar.js. Replaces the legacy econav strip; mounts via

or auto-injects unless . ============================================================ */ .umb { border-bottom: 1px solid var(--ink); background: var(--paper); font-family: var(--sans); } .umb-inner { max-width: var(--maxw, 1280px); margin: 0 auto; padding: 10px var(--gutter, 32px); display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-2); } .umb-onair { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: umb-pulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes umb-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); } } .umb-date { color: var(--ink-2); } .umb-version { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .umb-updated { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .umb-sep { color: var(--rule); user-select: none; } .umb-spacer { flex: 1; } /* Locale + weather slot */ .umb-locale { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; } .umb-locale:hover { color: var(--ink); } .umb-locale svg { width: 11px; height: 11px; color: var(--accent); flex-shrink: 0; } .umb-locale .place { color: var(--ink-2); } .umb-locale .dot-sep { color: var(--rule); } .umb-locale .weather { color: var(--ink-3); } /* Now-playing badge */ .umb-np { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3); padding: 3px 9px; border: 1px solid var(--rule); border-radius: 2px; background: color-mix(in srgb, var(--accent) 8%, transparent); white-space: nowrap; } .umb-np:hover { color: var(--ink); border-color: var(--accent); } .umb-np .bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; } .umb-np .bars span { display: block; width: 2px; background: var(--accent); animation: umb-np-bars 1s ease-in-out infinite; } .umb-np .bars span:nth-child(1) { height: 60%; animation-delay: 0s; } .umb-np .bars span:nth-child(2) { height: 100%; animation-delay: 0.18s; } .umb-np .bars span:nth-child(3) { height: 75%; animation-delay: 0.36s; } .umb-np .bars span:nth-child(4) { height: 45%; animation-delay: 0.54s; } @keyframes umb-np-bars { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } } .umb-np .np-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .umb-np .np-label { color: var(--ink); font-weight: 500; } .umb-np .np-sub { color: var(--ink-3); font-style: italic; } /* Quick light/dark toggle */ .umb-quickmode { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px; transition: all .14s; background: transparent; cursor: pointer; } .umb-quickmode:hover { color: var(--accent); border-color: var(--accent); } .umb-quickmode svg { width: 13px; height: 13px; flex-shrink: 0; } /* Theme label + 5-dot palette picker */ .umb-theme { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .umb-theme-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; } .umb-theme-dots { display: flex; gap: 7px; } .umb-theme-dot { appearance: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-2); cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; } .umb-theme-dot:hover { transform: scale(1.18); } .umb-theme-dot:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); } .umb-theme-dot[data-on="true"] { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px var(--accent); border-color: var(--accent); } .umb-theme-dot[data-tone="penny"] { background: #d4593f; } .umb-theme-dot[data-tone="ochre"] { background: #d4a445; } .umb-theme-dot[data-tone="ivy"] { background: #4f8a5a; } .umb-theme-dot[data-tone="newsprint"] { background: #efe7d6; } .umb-theme-dot[data-tone="paper"] { background: #ffffff; } /* Active dot ring contrast on light themes */ [data-theme="newsprint"] .umb-theme-dot[data-on="true"], [data-theme="paper"] .umb-theme-dot[data-on="true"], [data-mode="light"] .umb-theme-dot[data-on="true"] { box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--ink); border-color: var(--ink); } .umb-home { font-family: var(--mono); font-size: 11px; color: var(--ink-2); } .umb-home:hover { color: var(--ink); } .umb-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; color: var(--ink-2); position: relative; } .umb-icon:hover { color: var(--ink); } .umb-icon svg { width: 16px; height: 16px; } .umb-badge { position: absolute; top: -2px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font: 700 9px/14px var(--mono); text-align: center; } [data-theme="newsprint"] .umb-badge, [data-theme="paper"] .umb-badge, [data-mode="light"] .umb-badge { color: var(--ink); background: var(--accent); } .umb-user { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); padding: 4px 10px; border: 1px solid var(--rule); border-radius: 2px; text-transform: uppercase; } .umb-user:hover { border-color: var(--ink-2); } /* Compact mode for narrow viewports — fold locale + now-playing under on hover or when crammed. Phase 0 ships a simple media-query collapse. */ @media (max-width: 900px) { .umb-locale, .umb-np, .umb-theme-label, .umb-home { display: none; } .umb-inner { gap: 10px; font-size: 11px; } } /* ─── Legacy chrome suppression ───────────────────────────────────────── Hide the legacy `

` that ~60 var/www/fcc-* pages render whenever the new unified topbar is going to mount. Selector fires immediately (no JS race / FOUC) on any page that doesn't carry the opt-out attribute. Opt-out pages (data-fcc-topbar-auto="off") keep their legacy chrome. The `body:not(...)` rule applies to bare AND any body with other attributes, but NOT to bodies with data-fcc-topbar-auto="off". */ body:not([data-fcc-topbar-auto="off"]) > .wrap > header.site-header, body:not([data-fcc-topbar-auto="off"]) > header.site-header { display: none; } /* ============================================================ Mobile (.fcc-mtop) — Option A two-row mobile topbar. Sourced from design_handoff_music_mobile/music-mobile.css §1. JS renders this DOM in place of .umb when ?fcc-mtop=1 query is set and the viewport is ≤700px. Phase 1 of the /music/ mobile Variant C plan — gated behind the query flag so the sitewide desktop default is unchanged until Phase 6 promotes. All rules below scoped behind @media (max-width: 700px) — on desktop, the .fcc-mtop element (if accidentally rendered) is invisible. JS guards against this anyway by only mounting mobile DOM at the same breakpoint. ============================================================ */ @media (max-width: 700px) { .fcc-mtop { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); font-family: var(--sans); color: var(--ink); } .fcc-mtop *, .fcc-mtop *::before, .fcc-mtop *::after { box-sizing: border-box; } .fcc-mtop a { color: inherit; text-decoration: none; } .fcc-mtop button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .fcc-mtop-r1 { display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 48px; } .fcc-mtop-iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); border: 1px solid transparent; transition: background .14s, color .14s, border-color .14s; } .fcc-mtop-iconbtn:hover, .fcc-mtop-iconbtn:focus-visible { background: var(--paper-2); color: var(--ink); border-color: var(--rule); } .fcc-mtop-iconbtn svg { width: 20px; height: 20px; } .fcc-mtop-iconbtn .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; } .fcc-mtop-brand { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; } .fcc-mtop-brand .mark { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .fcc-mtop-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .fcc-mtop-meta .sep { color: var(--ink-4); } .fcc-mtop-meta .ver { color: var(--ink-2); } .fcc-mtop-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); } .fcc-mtop-chip[hidden] { display: none; } .fcc-mtop-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } .fcc-mtop-chip svg { width: 12px; height: 12px; } .fcc-mtop-r2 { display: flex; align-items: stretch; gap: 0; padding: 0 18px 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; border-top: 1px solid var(--rule); background: var(--paper); } .fcc-mtop-r2::-webkit-scrollbar { display: none; } .fcc-mtop-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 14px 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; } .fcc-mtop-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .fcc-mtop-tab .swatch { width: 8px; height: 8px; border-radius: 1px; background: var(--ink-3); flex: 0 0 auto; } .fcc-mtop-tab[aria-current="page"] .swatch { background: var(--accent); } /* When the mobile topbar is mounted, suppress the legacy .umb chrome so we don't render both stacked. */ body[data-fcc-mtop="1"] .umb { display: none; } }