localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header/footer chrome polish: logo in footer, search in NAV bar, NAV bar restyle

Browse Source 
- Footer bottom: replace the plain "Broadcast Beat" text wordmark
    with the same logo image used in the top-left header (so footer
    matches header brand mark).

  - Move the site-wide search input out of the top sticky row and
    into the Browse bar that sits below the 728x90 leaderboard. Top
    row is now just logo / reading-list / notification bell.

  - Browse bar redesign for personality + alignment:
      * 48px tall, dark navy gradient with a 2px accent-blue bottom
        border and a horizontal sheen across the top edge
      * Search input (pill shape, focus-glow ring) sits flush left
      * Menu items (Events ▾, Newsletter, Forum, About ▾) are now
        right-aligned via flex justify-between
      * Each menu item is uppercase + tracked, hover lights an
        accent-blue underline that scales in from the left
      * EventsDropdown and AboutDropdown buttons now use the same
        .bb-browse-item class — fixes the vertical alignment issue
        where they were rendering at the old 60px nav-link-bb height
        while the new bar is 48px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-20 05:40:04 +00:00
parent 3bb27e2e0a
commit c5d4c1d075
3 changed files with 175 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/styles/tailwind.css
View File

@@ -811,45 +811,152 @@ h1, h2, h3 {
/* =====================
BROWSE NAV BAR (sits below the 728x90 header banner)
Search on the left, primary nav on the right.
===================== */
.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);
background: linear-gradient(180deg, #0c1118 0%, #0a0f15 100%);
border-top: 1px solid #1a1f28;
border-bottom: 2px solid var(--color-accent);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.02);
position: relative;
}
.bb-browse-bar::after {
/* subtle horizontal sheen */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.45), transparent);
pointer-events: none;
}
.bb-browse-row {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 12px;
height: 48px;
}
/* Search input (left side) */
.bb-browse-search {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 1 320px;
max-width: 360px;
min-width: 200px;
margin: 8px 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding-left: 12px;
transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.bb-browse-search:focus-within {
border-color: var(--color-accent);
background: rgba(59, 130, 246, 0.06);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.bb-browse-search-icon {
flex-shrink: 0;
color: #7c8696;
pointer-events: none;
}
.bb-browse-search input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: #e6ecf3;
padding: 6px 10px;
}
.bb-browse-search input::placeholder {
color: #6b7585;
font-weight: 400;
}
.bb-browse-search-clear {
flex-shrink: 0;
margin-right: 6px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: #98a3b3;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
border: 0;
}
.bb-browse-search-clear:hover {
background: rgba(59, 130, 246, 0.18);
color: #fff;
}
/* Menu (right side) */
.bb-browse-menu {
display: inline-flex;
align-items: stretch;
gap: 0;
height: 44px;
margin-left: auto;
}
.bb-browse-item {
position: relative;
display: inline-flex;
align-items: center;
padding: 0 16px;
padding: 0 18px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #cccccc;
color: #d1d8e4;
text-decoration: none;
border-right: 1px solid #1a1a1a;
transition: background 0.15s ease, color 0.15s ease;
border-left: 1px solid rgba(255, 255, 255, 0.05);
transition: background var(--transition-fast), color var(--transition-fast);
}
.bb-browse-item:first-of-type {
border-left: 1px solid #1a1a1a;
.bb-browse-menu > .bb-browse-item:last-child {
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.bb-browse-item::after {
/* underline accent on hover/active */
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-fast);
}
.bb-browse-item:hover,
.bb-browse-item[aria-expanded="true"] {
background: #161616;
color: var(--color-accent);
background: rgba(59, 130, 246, 0.08);
color: #ffffff;
}
.bb-browse-item:hover::after,
.bb-browse-item[aria-expanded="true"]::after {
transform: scaleX(1);
}
.bb-browse-item .bb-browse-caret {