header: restore bb-browse-bar styles after DoubleTicker revert

The DoubleTicker commit (a52f8ad, since reverted) had bundled the
.bb-browse-bar / .bb-browse-row / .bb-browse-item CSS rules together
with the ticker CSS. Reverting the ticker removed the Browse bar
styles too, but Header.tsx still uses those classes for the
below-the-leaderboard nav. Re-add just the Browse bar selectors so
that nav renders correctly post-revert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-20 03:54:12 +00:00
parent b1378de6d6
commit 7f0675a0e3

View File

@@ -807,4 +807,60 @@ h1, h2, h3 {
.ProseMirror strong { font-weight: 700; color: #fff; }
.ProseMirror em { font-style: italic; }
.ProseMirror u { text-decoration: underline; }
.ProseMirror s { text-decoration: line-through; }
.ProseMirror s { text-decoration: line-through; }
/* =====================
BROWSE NAV BAR (sits below the 728x90 header banner)
===================== */
.bb-browse-bar {
background: linear-gradient(180deg, #0b0b0b 0%, #0e0e0e 100%);
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.bb-browse-row {
display: flex;
align-items: stretch;
gap: 0;
height: 44px;
}
.bb-browse-item {
position: relative;
display: inline-flex;
align-items: center;
padding: 0 16px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #cccccc;
text-decoration: none;
border-right: 1px solid #1a1a1a;
transition: background 0.15s ease, color 0.15s ease;
}
.bb-browse-item:first-of-type {
border-left: 1px solid #1a1a1a;
}
.bb-browse-item:hover,
.bb-browse-item[aria-expanded="true"] {
background: #161616;
color: var(--color-accent);
}
.bb-browse-item .bb-browse-caret {
display: inline-block;
margin-left: 6px;
font-size: 8px;
opacity: 0.7;
transform: translateY(-1px);
transition: transform 0.15s ease;
}
.bb-browse-item[aria-expanded="true"] .bb-browse-caret {
transform: rotate(180deg) translateY(1px);
}