/* ============================================================================ chartnav.css — FarsiChart 4-chart switcher, per-page identity, unified band. Loaded AFTER chart.css so its band rules override the old per-page gradients. Scheme B: Top Artists=blue, Top Songs=teal, Trending=amber, New Releases=pink. Light colors (teal, amber) get DARK on-text for 4.5:1 contrast. ============================================================================ */ /* ── Per-page color tokens (set via body.page-*) ──────────────────────────── --pa page accent (chip text, hovers) --pa-on text ON a solid --pa fill (white for dark hues, dark for light hues) --pa-fill solid fill for the active segment --pa-tint translucent tint (chip bg, soft accents) --pa-band the very-dark band color painted below the nav */ body.page-artists { --pa:#22c55e; --pa-on:#04210f; --pa-fill:#22c55e; --pa-tint:rgba(34,197,94,.14); --pa-band:#0c2016; } /* home = subtle brand green (calmer than the 3 charts) */ body.page-songs { --pa:#14b8a6; --pa-on:#05312c; --pa-fill:#2dd4bf; --pa-tint:rgba(20,184,166,.15); --pa-band:#06211e; } body.page-trending { --pa:#f59e0b; --pa-on:#3a2702; --pa-fill:#fbbf24; --pa-tint:rgba(245,158,11,.16); --pa-band:#201704; } body.page-new { --pa:#ec4899; --pa-on:#ffffff; --pa-fill:#db2777; --pa-tint:rgba(236,72,153,.15); --pa-band:#260b19; } /* ── Unified color BAND ───────────────────────────────────────────────────── Painted on the BODY so it sits BEHIND everything — including the ad banner — and starts the instant the 56px nav ends. Banner-independent: with no banner the H1 just shifts up; the band is unchanged. Fade widened (56→1120px) so there's ~2x more colour than before. Same mechanism on all 4 pages. */ body.page-artists, body.page-songs, body.page-trending, body.page-new { background: linear-gradient(180deg, #0a0a0a 0, #0a0a0a 56px, var(--pa-band) 56px, #0a0a0a 1120px) no-repeat; background-color: #0a0a0a; } @media (max-width: 768px) { /* header is 56px tall on mobile too */ body.page-artists, body.page-songs, body.page-trending, body.page-new { background: linear-gradient(180deg, #0a0a0a 0, #0a0a0a 56px, var(--pa-band) 56px, #0a0a0a 820px) no-repeat; background-color: #0a0a0a; } } /* Heroes stay transparent so the body band shows through */ body.page-artists .hero, body.page-songs .hero, body.page-new .hero, body.page-trending .tr-hero { background: transparent !important; } /* ── THE PERMANENT BANNER-INDEPENDENCE FIX ────────────────────────────────── The colour band lives on and starts at the nav bottom (above). The ONLY thing that ever made it look like it "starts below the ad banner" is the ad/reserve element painting an OPAQUE bar over it. There are two engines and they ship that opaque bar via an inline