fix: make About family icons ink-only and center the footer

HQ and Gateway buttons now use currentColor marks like the platform
row. License and Version share a baseline. The footer is just the
centered copyright line.

Author: jatinkrmalik

app/fragments/about.py

@@ -9,24 +9,21 @@
 
 # Official marks from VocaHQ/.github. Do not redraw.
 # Talk-to-us: brand/vocahq/social.
-# Family platforms: brand/promo/cards/platform.
+# Family row: brand/promo/cards/platform, vocahq/voca-mark, vocagateway-1u chassis.
 # Host hero: brand/vocagateway/vocagateway-tower.svg.
-# Small family button: brand/vocagateway/vocagateway-1u.svg (holds at 16px).
 _BRAND_DIR = Path(__file__).resolve().parent.parent / "webui" / "brand"
 _MARK_TOWER = "/assets/brand/vocagateway/vocagateway-tower.svg"
-_MARK_1U = "/assets/brand/vocagateway/vocagateway-1u.svg"
-_MARK_HQ = "/assets/voca-logo.svg"
 _ISSUES_URL = "https://github.com/VocaHQ/vocagateway/issues"
 _LICENSE_URL = "https://github.com/VocaHQ/vocagateway/blob/main/LICENSE"
 
-# icon, href, label. Platform names are files in webui/brand/platform/.
-_FAMILY_LINKS: tuple[tuple[str, str, str], ...] = (
-    ("hq", "https://vocahq.com", "VocaHQ"),
-    ("linux", "https://vocalinux.com", "VocaLinux"),
-    ("apple", "https://vocamac.com", "VocaMac"),
-    ("windows", "https://vocawin.com", "VocaWin"),
-    ("android", "https://vocaphone.vocahq.com", "VocaPhone"),
-    ("gateway", "https://vocagateway.vocahq.com", "VocaGateway"),
+# folder, file stem, href, label.
+_FAMILY_LINKS: tuple[tuple[str, str, str, str], ...] = (
+    ("vocahq", "voca-mark", "https://vocahq.com", "VocaHQ"),
+    ("platform", "linux", "https://vocalinux.com", "VocaLinux"),
+    ("platform", "apple", "https://vocamac.com", "VocaMac"),
+    ("platform", "windows", "https://vocawin.com", "VocaWin"),
+    ("platform", "android", "https://vocaphone.vocahq.com", "VocaPhone"),
+    ("vocagateway", "vocagateway-1u-mark", "https://vocagateway.vocahq.com", "VocaGateway"),
 )
 
 _CONTACT_LINKS: tuple[tuple[str, str, str], ...] = (
@@ -46,28 +43,13 @@ def _link_target(url: str) -> str:
     return ' target="_blank" rel="noopener noreferrer"'
 
 
-def _mark_img(src: str) -> str:
-    return (
-        f'<span class="about-icon">'
-        f'<img src="{escape(src, quote=True)}" width="16" height="16" alt="" />'
-        f"</span>"
-    )
-
-
-def _family_icon(name: str) -> str:
-    if name == "hq":
-        return _mark_img(_MARK_HQ)
-    if name == "gateway":
-        return _mark_img(_MARK_1U)
-    return f'<span class="about-icon">{_icon(name, folder="platform")}</span>'
-
-
 def about_fragment(version: str, commit: CommitStatus | None = None) -> str:
     family = "".join(
         f'<a class="ghost" href="{escape(url, quote=True)}"'
         f"{_link_target(url)}>"
-        f"{_family_icon(name)}{escape(label)}</a>"
-        for name, url, label in _FAMILY_LINKS
+        f'<span class="about-icon">{_icon(stem, folder=folder)}</span>'
+        f"{escape(label)}</a>"
+        for folder, stem, url, label in _FAMILY_LINKS
     )
     contacts = "".join(
         f'<a class="ghost" href="{escape(url, quote=True)}"'

app/webui/brand/vocagateway/vocagateway-1u-mark.svg

@@ -103,12 +103,6 @@ <h1>VocaGateway</h1>
 
   <footer class="site-footer">
     <p class="footer-copy">&copy; 2026 <a href="https://github.com/VocaHQ" target="_blank" rel="noopener noreferrer">VocaHQ</a></p>
-    <nav class="footer-links" aria-label="Project repositories">
-      <a href="https://github.com/VocaHQ/vocagateway" target="_blank" rel="noopener noreferrer">VocaGateway</a>
-      <a href="https://github.com/VocaHQ/vocaphone" target="_blank" rel="noopener noreferrer">VocaPhone</a>
-      <a href="https://github.com/VocaHQ/vocalinux" target="_blank" rel="noopener noreferrer">VocaLinux</a>
-      <a href="https://github.com/VocaHQ/vocamac" target="_blank" rel="noopener noreferrer">VocaMac</a>
-    </nav>
   </footer>
 
   <div id="toast" class="toast hidden" role="status" aria-live="polite"></div>

app/webui/brand/vocahq/voca-mark.svg

@@ -461,15 +461,14 @@ main {
 .site-footer {
   flex: 0 0 auto;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px 20px;
+  justify-content: center;
   margin-top: auto;
   padding: 18px var(--gutter) 22px;
   border-top: 1px solid var(--line-soft);
   color: var(--faint);
   font-size: 0.84rem;
+  text-align: center;
 }
 .footer-copy {
   margin: 0;
@@ -480,18 +479,6 @@ main {
   text-decoration: none;
 }
 .footer-copy a:hover { color: var(--accent); }
-.footer-links {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 14px;
-}
-.footer-links a {
-  color: var(--muted);
-  text-decoration: none;
-  font-weight: 500;
-}
-.footer-links a:hover { color: var(--accent); }
 
 /* ------------------------------------------------------------------ sections */
 
@@ -2494,8 +2481,7 @@ button.danger.ghost:hover {
 .htmx-request .actions button, .actions button.htmx-request { opacity: 0.45; pointer-events: none; }
 
 /* About reuses Overview / Settings chrome. Official tower mark is 52px in the
-   system-card hero. Family and talk-to-us icons stay 16px. Platform glyphs
-   inherit currentColor; HQ and Gateway lockups keep approved fills. */
+   system-card hero. Family and talk-to-us icons stay 16px currentColor. */
 #about-host .sys-hero {
   display: flex;
   align-items: center;
@@ -2558,8 +2544,18 @@ button.danger.ghost:hover {
   width: 16px;
   height: 16px;
 }
-.about-icon img {
-  border-radius: 3px;
+#about-this-build .facts {
+  align-items: baseline;
+  column-gap: 12px;
+  row-gap: 6px;
+}
+#about-this-build .facts dt,
+#about-this-build .facts dd {
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+#about-this-build .facts dd a {
+  text-underline-offset: 0.18em;
 }
 
 /* ---------------------------------------------------------------- responsive */
@@ -2576,9 +2572,6 @@ button.danger.ghost:hover {
   :root { --gutter: 16px; }
   main { padding: 20px 16px 40px; }
   .site-footer {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
     padding-block: 16px 20px;
   }
   .brand .muted { display: none; }

app/webui/index.html

@@ -69,6 +69,19 @@ def test_platform_marks_are_the_official_files() -> None:
     assert "M18.4395 5.5586" in android
 
 
+def test_family_marks_are_current_color() -> None:
+    hq = (BRAND / "vocahq" / "voca-mark.svg").read_text(encoding="utf-8")
+    gateway = (BRAND / "vocagateway" / "vocagateway-1u-mark.svg").read_text(encoding="utf-8")
+    for svg in (hq, gateway):
+        assert 'fill="currentColor"' in svg
+        assert "#0F6B57" not in svg
+        assert "#0B1A15" not in svg
+        assert "#F2F6F2" not in svg
+    assert "M 164 127 A 65 65" in hq
+    assert 'viewBox="96 372 832 280"' in gateway
+    assert 'width="832" height="280"' in gateway
+
+
 def test_official_1u_mark_is_vendored() -> None:
     mark = (
         Path(__file__).resolve().parents[1]

app/webui/styles.css

@@ -772,7 +772,6 @@ def _assert_about_surface(html: str) -> None:
     assert "Early" not in html
     assert "The host you run" in html
     assert "/assets/brand/vocagateway/vocagateway-tower.svg" in html
-    assert "/assets/brand/vocagateway/vocagateway-1u.svg" in html
     assert 'id="about-this-build"' in html
     assert 'id="about-family"' in html
     assert 'id="about-talk"' in html
@@ -807,7 +806,9 @@ def _assert_about_surface(html: str) -> None:
     assert "VocaWin</a>" in html
     assert "VocaPhone</a>" in html
     assert "VocaGateway</a>" in html
-    assert "/assets/voca-logo.svg" in html
+    # Family row is currentColor: HQ mic, 1U chassis, platform marks.
+    assert "M 164 127 A 65 65" in html
+    assert 'width="832" height="280"' in html
     # Official platform marks from VocaHQ/.github brand/promo/cards/platform.
     assert "M12.504 0c-.155" in html
     assert "M12.152 6.896" in html
@@ -843,6 +844,9 @@ async def test_webui_shell_is_public(admin_client: httpx.AsyncClient) -> None:
     # Fifth tab, after the existing four. Hash routing uses data-tab="about".
     tabs = [part.split('"', 1)[0] for part in response.text.split('data-tab="')[1:]]
     assert tabs[:5] == ["overview", "models", "pair", "settings", "about"]
+    assert "footer-copy" in response.text
+    assert "footer-links" not in response.text
+    assert "© 2026" in response.text or "&copy; 2026" in response.text
     assert response.headers["cache-control"] == "no-store"
     assert response.headers["x-frame-options"] == "DENY"
     assert response.headers["x-content-type-options"] == "nosniff"