feat(website): adopt the shared The Solid Chain sticky header

apps/website/src/components/Topbar.tsx

@@ -1,23 +1,20 @@
-import { NAV_LINKS } from "../content.js";
+import { NAV_LINKS, TOPBAR } from "../content.js";
 
+// Product row of the shared sticky header (brand book §08): glyph, then the bold product
+// name and a short context line, ahead of the site's own nav anchors. The reDeploy-specific
+// chevron mark previously rendered here was dropped — the family brand mark already anchors
+// the statusbar row above it, and duplicating a logo across both rows of the same sticky
+// header read as redundant. See the PR description for the full rationale.
 export default function Topbar() {
   return (
     <div className="topbar">
-      <svg className="mark" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path
-          fill="#F5A524"
-          fillRule="evenodd"
-          d="M 107.1 55.23 L 97.58 55.23 L 97.58 51.84 A 17.59 17.59 0 0 0 80.12 34.12 L 39.81 34.12 A 17.7 17.7 0 0 0 22.12 51.84 L 22.12 55.23 L 12.79 55.23 L 12.79 48.6 A 27.21 27.21 0 0 1 38.1 24.68 L 81.75 24.68 A 27.21 27.21 0 0 1 106.99 47.55 L 106.99 55.23 Z M 81.75 95.18 L 38.1 95.18 A 27.21 27.21 0 0 1 12.82 72.3 L 12.82 64.78 L 22.16 64.78 L 22.16 68.02 A 17.58 17.58 0 0 0 39.69 85.65 L 80.04 85.65 A 17.65 17.65 0 0 0 97.72 68.02 L 97.72 64.78 L 107.06 64.78 L 107.06 71.25 A 27.21 27.21 0 0 1 81.75 95.18 Z"
-        />
-        <g stroke="#D6FF7A" strokeWidth="7.21" fill="none" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M47 57 L60 45 L73 57" />
-          <path d="M47 75 L60 63 L73 75" />
-        </g>
-      </svg>
+      <span className="chev hl" aria-hidden="true">
+        {TOPBAR.glyph}
+      </span>
       <b>
         <span className="re">re</span>Deploy
-      </b>{" "}
-      <span className="chev hl">^^</span>
+      </b>
+      <span className="tagline"> — {TOPBAR.tagline}</span>
       <nav>
         {NAV_LINKS.map((link) => (
           <a key={link.label} href={link.href}>

apps/website/src/content.ts

@@ -29,6 +29,13 @@ export const NAV_LINKS: NavLink[] = [
   { label: "github", href: REPO_URL },
 ];
 
+// Product row (brand book §08): glyph + bold product name + short context, ahead of the
+// site's own nav anchors. Kept short — this is a strip, not the hero subhead.
+export const TOPBAR = {
+  glyph: "^^",
+  tagline: "declarative, idempotent, verifiable deploys",
+};
+
 export const HERO = {
   headline: [{ text: "One spec. One graph. " }, { text: "One truth.", as: "hl" }] as RichSegment[],
   subhead: [

apps/website/src/styles.css

@@ -133,9 +133,8 @@ body {
   font-size: 12px;
 }
 
-.topbar .mark {
-  width: 30px;
-  height: 30px;
+.topbar .chev {
+  font-weight: 700;
 }
 
 .topbar b {
@@ -148,6 +147,10 @@ body {
   font-weight: 500;
 }
 
+.topbar .tagline {
+  color: var(--dim);
+}
+
 .topbar nav {
   margin-left: auto;
   display: flex;

apps/website/test/Topbar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import Topbar from "../src/components/Topbar.js";
+import { NAV_LINKS, TOPBAR } from "../src/content.js";
+
+describe("Topbar", () => {
+  it("renders the shared header's product row: glyph, bold name, then a short context", () => {
+    const { container } = render(<Topbar />);
+
+    expect(screen.getByText(TOPBAR.glyph)).toBeInTheDocument();
+    expect(container.querySelector("b")?.textContent).toBe("reDeploy");
+    expect(container.textContent).toContain(TOPBAR.tagline);
+
+    // Brand book §08 order: glyph, then name, then context — ahead of the nav.
+    const text = container.textContent ?? "";
+    expect(text.indexOf(TOPBAR.glyph)).toBeLessThan(text.indexOf("reDeploy"));
+    expect(text.indexOf("reDeploy")).toBeLessThan(text.indexOf(TOPBAR.tagline));
+  });
+
+  it("still exposes the site's own nav anchors alongside the product row", () => {
+    render(<Topbar />);
+
+    for (const link of NAV_LINKS) {
+      const anchor = screen.getByRole("link", { name: link.label });
+      expect(anchor).toHaveAttribute("href", link.href);
+    }
+  });
+});

apps/website/test/content.test.ts

@@ -13,6 +13,7 @@ import {
   SPLIT_CAPTION,
   STUDIO_SECTION,
   STUDIO_URL,
+  TOPBAR,
   type RichSegment,
 } from "../src/content.js";
 
@@ -85,6 +86,12 @@ describe("content", () => {
     }
   });
 
+  it("has a short, non-empty topbar glyph and tagline for the shared header's product row", () => {
+    expect(TOPBAR.glyph).toBe("^^");
+    expect(TOPBAR.tagline.length).toBeGreaterThan(0);
+    expect(TOPBAR.tagline.length).toBeLessThan(80);
+  });
+
   it("has a footer prompt line and a three-entry family strip with exactly one current item", () => {
     expect(FOOTER.promptUser).toBe("roberto@thesolidchain:~$");
     expect(FOOTER.family).toHaveLength(3);