Header/hero polish: fix + dog-ify the theme toggle, Forum link, image zoom

css/style.css

@@ -50,10 +50,15 @@ summary:focus-visible {
 .site-header nav { display: flex; gap: 18px; align-items: center; }
 .site-header nav a { color: var(--dim); text-decoration: none; }
 .theme-btn {
-  background: none; border: none; cursor: pointer; color: var(--dim);
-  font-size: 1rem; padding: 0; line-height: 1; visibility: hidden;
+  width: 26px; height: 26px; border: none; padding: 0; cursor: pointer;
+  /* Apollo dog mascot, painted full-colour (not tinted) like the wiki annotation marker. */
+  background: url("../assets/brand/apollo-dog.png") center / contain no-repeat;
+  visibility: hidden; /* revealed by theme.js once wired up */
 }
-.theme-btn:hover { color: var(--ink); }
+.theme-btn:hover { opacity: .75; }
+/* On the dark header the dog's dark outline vanishes; give it the same white
+   backing it already has on the (white) light-mode header so it stays legible. */
+[data-theme="dark"] .theme-btn { background-color: #fff; border-radius: 6px; }
 main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
 .site-footer { text-align: center; color: var(--dim); font-size: .85rem; padding: 24px; border-top: 1px solid var(--line); }
 .loading { color: var(--dim); }
@@ -73,7 +78,7 @@ main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
   padding: 14px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
 }
 .device-card:hover { border-color: var(--blue); box-shadow: 0 4px 14px -8px rgba(65,122,171,.5); }
-.device-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: var(--img-bg); }
+.device-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--img-bg); }
 .device-card h3 { margin: 10px 0 2px; font-size: 1rem; }
 .device-card p { margin: 0; color: var(--dim); font-size: .82rem; }
 .device-card .go { color: var(--blue); font-weight: 600; font-size: .85rem; margin-top: 8px; display: inline-block; }

index.html

@@ -27,15 +27,12 @@
     <nav>
       <a href="https://wiki.apolloautomation.com">Wiki</a>
       <a href="https://apolloautomation.com">Shop</a>
-      <a href="https://dsc.gg/ApolloAutomation">Discord</a>
-      <button id="theme-toggle" class="theme-btn" title="Toggle theme" aria-label="Toggle theme">🌙</button>
+      <a href="https://discord.apolloautomation.com/">Discord</a>
+      <a href="https://forum.apolloautomation.com/">Forum</a>
+      <button id="theme-toggle" class="theme-btn" title="Toggle theme" aria-label="Toggle theme"></button>
     </nav>
   </header>
   <main id="app"><p class="loading">Loading devices…</p></main>
-  <footer class="site-footer">
-    <p>Firmware installs run entirely in your browser over USB.
-       Prefer the classic pages? Every device also has a standalone installer linked from its GitHub repo.</p>
-  </footer>
   <script type="module" src="js/app.js"></script>
 </body>
 </html>

js/theme.js

@@ -1,6 +1,5 @@
 // js/theme.js — theme toggle: System / Dark / Light (cycles on click)
 const THEMES = ['system', 'dark', 'light'];
-const ICONS  = { system: '⬤', dark: '🌙', light: '☀' };
 const LABELS = { system: 'System theme', dark: 'Dark theme',  light: 'Light theme' };
 const NEXT_LABEL = {
   system: 'Switch to dark theme',
@@ -35,7 +34,7 @@ export function initThemeToggle() {
   const mq = matchMedia('(prefers-color-scheme: dark)');
 
   function updateBtn(pref) {
-    btn.textContent = ICONS[pref];
+    // The icon is the Apollo dog (a CSS background); only the labels track state.
     btn.setAttribute('aria-label', LABELS[pref]);
     btn.title = NEXT_LABEL[pref];
   }
@@ -57,7 +56,9 @@ export function initThemeToggle() {
     setPref(next);
   });
 
-  // Initialise button state (makes it visible)
+  // Initialise button state and reveal it (CSS hides it until JS wires it up).
+  // Must be an explicit 'visible' — '' only clears the inline value and would
+  // fall back to the .theme-btn { visibility: hidden } rule, leaving it hidden.
   updateBtn(storedPref());
-  btn.style.visibility = '';
+  btn.style.visibility = 'visible';
 }

js/views/hub.js

@@ -4,8 +4,7 @@ export function renderHub(el, registry) {
   el.innerHTML = `
     <section class="hero">
       <h1>Flash your Apollo device from the browser</h1>
-      <p>Plug your device into USB, pick it below, and you'll be up and running in about two minutes.
-         Installing needs Chrome, Edge, or Firefox — other browsers get manual instructions.</p>
+      <p>Plug in your device via USB, choose your device below, and you'll be running the latest firmware in minutes!</p>
     </section>
     <div class="filters">
       <button data-cat="all" class="active" aria-pressed="true">All devices</button>

tests/installer.spec.js

@@ -11,6 +11,13 @@ test('hub renders a card for every registry device', async ({ page }) => {
   }
 });
 
+test('theme toggle is revealed once the script wires it up', async ({ page }) => {
+  await page.goto('/');
+  // CSS hides .theme-btn until theme.js sets an explicit visibility; a regression
+  // to `visibility = ''` would fall back to the hidden rule and fail this.
+  await expect(page.locator('#theme-toggle')).toBeVisible();
+});
+
 test('category filter shows exactly the cards in that category', async ({ page }) => {
   await page.goto('/');
   // Pick a category deterministically (most-populated, alphabetical tiebreak)