From f0e02b40e593f40e144ff591f61069b66c9afcaa Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Tue, 23 Jun 2026 13:11:18 -0400
Subject: [PATCH] One consistent top bar across the whole hub (HubBar
 everywhere)

There were three different top bars (home3/detail vs /play vs /art). Unify on the
shared HubBar:
- HubBar is now fully self-contained (own @font-face + hardcoded hub colors) so it
  renders identically regardless of the host page's tokens/fonts.
- /art: dropped its bespoke gallery bar for <HubBar active="art" />.
- /play: dropped its bar for <HubBar active="games" />; the contextual in-game
  step-back (Game Selection / Play Hub) moves into the page body as a secondary
  ".gameback" control, shown only in game views (the global nav is in HubBar).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/components/HubBar.svelte | 17 +++++++----
 frontend/src/routes/art/+page.svelte      | 36 ++--------------------
 frontend/src/routes/play/+page.svelte     | 37 +++++++++++------------
 3 files changed, 31 insertions(+), 59 deletions(-)

diff --git a/frontend/src/lib/components/HubBar.svelte b/frontend/src/lib/components/HubBar.svelte
index 232a4b8..1724b0c 100644
--- a/frontend/src/lib/components/HubBar.svelte
+++ b/frontend/src/lib/components/HubBar.svelte
@@ -62,19 +62,24 @@
 {/if}
 
 <style>
+  /* Self-contained so the bar looks identical on EVERY page, regardless of the host
+     page's own fonts/tokens — one cohesive top bar across the whole site. */
+  @font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
+
   .bar {
     display: flex; align-items: center; justify-content: space-between;
     max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
     padding: 26px clamp(18px, 5vw, 44px) 0;
+    font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
   }
   .brand { display: block; line-height: 0; }
   .brand img { height: 48px; width: auto; display: block; }
 
   .bar-end { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
   .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 16.5px; font-weight: 500; }
-  .nav a { color: var(--body, #6b6256); text-decoration: none; }
+  .nav a { color: #6b6256; text-decoration: none; }
   .nav a.on { color: #23201b; }
-  .nav a:hover { color: var(--teal, #0083ad); }
+  .nav a:hover { color: #0083ad; }
   .nav-soon { color: #b3a890; }
   .acct {
     width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #e6c9a0; background: #FCEFD7;
@@ -95,18 +100,18 @@
   .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
 
   /* drop panel */
-  .menu-wrap { max-width: 1180px; width: 100%; margin: 10px auto 0; box-sizing: border-box; padding: 0 clamp(18px, 5vw, 44px); }
+  .menu-wrap { max-width: 1180px; width: 100%; margin: 10px auto 0; box-sizing: border-box; padding: 0 clamp(18px, 5vw, 44px); font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; }
   .menu {
-    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--news-border, #f2e7d3);
+    display: flex; flex-direction: column; background: #fff; border: 1px solid #f2e7d3;
     border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -20px rgba(60, 50, 30, 0.4);
   }
   .menu a, .menu .menu-soon {
     padding: 14px 18px; font-size: 16px; font-weight: 500; text-decoration: none;
-    color: var(--body, #6b6256); border-top: 1px solid #f3ece0;
+    color: #6b6256; border-top: 1px solid #f3ece0;
   }
   .menu a:first-child { border-top: none; }
   .menu a.on { color: #23201b; }
-  .menu a:hover { background: var(--canvas, #FFF9EF); color: var(--teal, #0083ad); }
+  .menu a:hover { background: #FFF9EF; color: #0083ad; }
   .menu-soon { display: flex; align-items: center; justify-content: space-between; color: #b3a890; }
   .menu-soon em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c3b69c; }
 
diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte
index a58af49..124f6da 100644
--- a/frontend/src/routes/art/+page.svelte
+++ b/frontend/src/routes/art/+page.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { getJSON } from '$lib/api.js';
   import { afterNavigate, goto } from '$app/navigation';
+  import HubBar from '$lib/components/HubBar.svelte';
 
   // Virtual frames the viewer can switch between — remembered locally, no account needed.
   const FRAMES = [
@@ -86,23 +87,7 @@
 {/snippet}
 
 <div class="room">
-  <header class="bar">
-    <a class="brand" href="/" aria-label="upbeatBytes home">
-      <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
-    </a>
-    <nav class="nav">
-      <a href="/">News</a>
-      <a href="/play">Games</a>
-      <a href="/art" aria-current="page">Art</a>
-      <a class="acct" href="/account" aria-label="Your account">
-        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
-             stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <circle cx="12" cy="8" r="3.3" />
-          <path d="M5.5 19.2a6.5 6.5 0 0 1 13 0" />
-        </svg>
-      </a>
-    </nav>
-  </header>
+  <HubBar active="art" />
 
   <main class="gallery">
     <button class="back" onclick={goBack} aria-label="Go back">
@@ -204,23 +189,6 @@
     flex-direction: column;
   }
 
-  .bar {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px clamp(16px, 5vw, 56px);
-    max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box;
-  }
-  .brand { display: block; line-height: 0; }
-  .brand img { height: 34px; width: auto; display: block; }
-  .nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 26px); }
-  .nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
-  .nav a:hover { color: var(--ink); }
-  .nav a[aria-current="page"] { color: var(--accent); }
-  .acct {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 38px; height: 38px; border-radius: 50%; color: var(--muted);
-  }
-  .acct:hover { color: var(--accent); background: #eef6f9; }
-
   .gallery {
     flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
     padding: clamp(6px, 1.5vw, 16px) clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px);
diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte
index be4ffc8..3c5c125 100644
--- a/frontend/src/routes/play/+page.svelte
+++ b/frontend/src/routes/play/+page.svelte
@@ -3,6 +3,7 @@
   import { goto, afterNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import { getJSON } from '$lib/api.js';
+  import HubBar from '$lib/components/HubBar.svelte';
   import { pushGameStatesBatch } from '$lib/gamesync.js';
   import { ritualState } from '$lib/ritual.js';
   import { prefs, initPrefs } from '$lib/prefs.svelte.js';
@@ -270,20 +271,16 @@
   {#if isDevGated(game)}<meta name="robots" content="noindex" />{/if}
 </svelte:head>
 
-<header class="bar">
-  <div class="container inner">
-    <a class="brand" href="/"><img class="logo" src="/logo.svg" alt="Upbeat Bytes" /></a>
-    {#if view === 'hub'}
-      <a class="back" href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>News</a>
-    {:else}
-      <button class="back" onclick={back}>
-        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>{view === 'play' ? 'Game Selection' : 'Play Hub'}
-      </button>
-    {/if}
-  </div>
-</header>
+<HubBar active="games" />
 
 <main class="container page" class:gameview={view === 'play'}>
+  {#if view !== 'hub'}
+    <!-- in-game step-back (selection / hub); the global nav lives in HubBar above -->
+    <button class="gameback" onclick={back}>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      {view === 'play' ? 'Game Selection' : 'Play Hub'}
+    </button>
+  {/if}
   {#if view === 'hub'}
     <h1>Play</h1>
     <p class="sub">A small calm thing after the brief. One of each a day — no rush, no score to beat but your own.</p>
@@ -428,13 +425,15 @@
 </main>
 
 <style>
-  header.bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
-  .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
-  .logo { height: 40px; display: block; }
-  .back { color: var(--accent-deep); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px;
-          background: none; border: none; font-family: inherit; cursor: pointer; }
-  .back svg { width: 17px; height: 17px; display: block; }
-  .page { padding: 22px 20px 70px; }
+  /* in-game step-back, below the shared HubBar (matches the hub Back affordance) */
+  .gameback { color: var(--accent-deep); font-size: 0.9rem; font-weight: 600; display: inline-flex;
+              align-items: center; gap: 6px; background: none; border: none; font-family: inherit;
+              cursor: pointer; padding: 6px 10px 6px 0; margin-bottom: 4px;
+              -webkit-tap-highlight-color: transparent; }
+  .gameback svg { width: 16px; height: 16px; display: block; transition: transform 0.15s ease; }
+  .gameback:hover { color: var(--accent); }
+  .gameback:hover svg { transform: translateX(-2px); }
+  .page { padding: 16px 20px 70px; }
   h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 6px 0 6px; }
   .seltitle { font-size: clamp(1.7rem, 4.5vw, 2.2rem); }
   .sub { color: var(--muted); margin: 0 0 24px; max-width: 540px; }