From c5d4c1d075513a36f68288b27608bc3b7d76eaba Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Wed, 20 May 2026 05:40:04 +0000
Subject: [PATCH] header/footer chrome polish: logo in footer, search in NAV
 bar, NAV bar restyle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  - 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>
---
 src/components/Footer.tsx |  10 ++-
 src/components/Header.tsx | 110 +++++++++++++-----------------
 src/styles/tailwind.css   | 137 +++++++++++++++++++++++++++++++++-----
 3 files changed, 175 insertions(+), 82 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 642434d..7176c02 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -108,8 +108,14 @@ export default function Footer() {
         <div className="border-t border-[#222] pt-5 pb-3 flex flex-col sm:flex-row items-center justify-between gap-4">
           <Link
             href="/home-page"
-            className="font-heading text-[#888] hover:text-[#3b82f6] transition-colors text-sm tracking-wide">
-            Broadcast Beat
+            aria-label="Broadcast Beat — home"
+            className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity">
+            <AppImage
+              src="/assets/images/logo.png"
+              alt="Broadcast Beat"
+              width={180}
+              height={24}
+              className="h-6 w-auto object-contain" />
           </Link>
 
           <div className="flex items-center gap-4">
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index cb53b69..0396fb6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -350,60 +350,7 @@ export default function Header() {
                 <NotificationCenter />
               </div>
 
-              {/* Enhanced Search */}
-              <div className="hidden md:flex items-center gap-2">
-                <div className={`search-bar-wrapper ${searchFocused ? "search-bar-expanded" : ""}`}>
-                  <input
-                    ref={searchRef}
-                    type="search"
-                    placeholder={searchFocused ? "Search articles..." : "Search..."}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e?.target?.value)}
-                    onFocus={() => setSearchFocused(true)}
-                    onBlur={() => setSearchFocused(false)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        submitSearch();
-                      }
-                    }}
-                    className="search-input search-input-enhanced pr-16"
-                    aria-label="Search articles (press / to focus)"
-                  />
-                  {searchQuery && (
-                    <button
-                      type="button"
-                      onClick={() => { setSearchQuery(""); searchRef.current?.focus(); }}
-                      className="search-clear-btn"
-                      aria-label="Clear search">
-                      <CloseIcon size={11} />
-                    </button>
-                  )}
-                  {!searchQuery && !searchFocused && (
-                    <span className="search-kbd-hint" aria-hidden="true">/</span>
-                  )}
-                  {(searchQuery || searchFocused) && (
-                    <button
-                      type="button"
-                      onClick={submitSearch}
-                      aria-label="Submit search"
-                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#3b82f6] hover:text-[#60a5fa] transition-colors cursor-pointer"
-                    >
-                      <SearchIcon size={13} strokeWidth={1.75} />
-                    </button>
-                  )}
-                  {!searchQuery && !searchFocused && (
-                    <button
-                      type="button"
-                      onClick={() => searchRef.current?.focus()}
-                      aria-label="Focus search"
-                      className="absolute right-8 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#3b82f6] transition-colors cursor-pointer"
-                    >
-                      <SearchIcon size={13} strokeWidth={1.75} />
-                    </button>
-                  )}
-                </div>
-              </div>
+              {/* Search moved to the Browse bar below the leaderboard */}
 
               {/* Mobile Hamburger */}
               <button
@@ -532,20 +479,53 @@ export default function Header() {
         </div>
       )}
 
-      {/* BROWSE BAR — primary nav (was previously above the banner) */}
+      {/* BROWSE BAR — search left, primary nav right */}
       <div className="bb-browse-bar hidden md:block" role="navigation" aria-label="Browse sections">
         <div className="max-w-container mx-auto px-4">
           <div className="bb-browse-row">
-            <EventsDropdown />
-            {navLinks.map((link) => (
-              <Link
-                key={link.label}
-                href={link.href}
-                className="bb-browse-item">
-                {link.label}
-              </Link>
-            ))}
-            <AboutDropdown />
+            {/* Search (left) */}
+            <div className="bb-browse-search">
+              <SearchIcon size={14} strokeWidth={1.75} className="bb-browse-search-icon" aria-hidden="true" />
+              <input
+                ref={searchRef}
+                type="search"
+                placeholder="Search broadcast news…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e?.target?.value)}
+                onFocus={() => setSearchFocused(true)}
+                onBlur={() => setSearchFocused(false)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    submitSearch();
+                  }
+                }}
+                aria-label="Search articles"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => { setSearchQuery(""); searchRef.current?.focus(); }}
+                  aria-label="Clear search"
+                  className="bb-browse-search-clear">
+                  <CloseIcon size={11} />
+                </button>
+              )}
+            </div>
+
+            {/* Menu (right) */}
+            <nav className="bb-browse-menu" aria-label="Main sections">
+              <EventsDropdown />
+              {navLinks.map((link) => (
+                <Link
+                  key={link.label}
+                  href={link.href}
+                  className="bb-browse-item">
+                  {link.label}
+                </Link>
+              ))}
+              <AboutDropdown />
+            </nav>
           </div>
         </div>
       </div>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4cc28d7..ce80aaf 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -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 {