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

- 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>
2026-05-20 05:40:04 +00:00
parent 3bb27e2e0a
commit c5d4c1d075
3 changed files with 175 additions and 82 deletions
--- 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">
--- 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>
--- 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 {