From 590bb3283c8b4bd023c30227124acae094b99130 Mon Sep 17 00:00:00 2001
From: Luiz Gustavo <gutomec@gmail.com>
Date: Fri, 29 May 2026 01:47:27 -0300
Subject: [PATCH] =?UTF-8?q?ux(brand):=20logomark=20=E2=80=94=20three=20off?=
 =?UTF-8?q?set=20gold=20bars=20+=20bolder=20wordmark?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The lone "▍ The Disclosure Bureau" glyph read as a stray vertical bar next
to small mono text — easy to lose against the navbar links. The brand
needed visible weight without inventing a logotype from scratch.

- BrandMark (new) — small inline SVG-free mark: three rounded gold bars
  at decreasing heights (100% / 70% / 45%), suggesting a redaction edge
  or a stack of classified-page tabs. Each bar lifts 1px on hover, so the
  mark gets a subtle physical response without animation libraries.
- Wordmark switched to font-display font-semibold (was display regular)
  and bumped to 19/20px so it carries the row.
- On desktop a tiny "CLASSIFIED · PUBLIC RECORD" microline in #5a6678
  monospace sits beneath the wordmark; it disappears on mobile to keep
  the row tight inside the drawer.
- Used in SiteHeader (every page) and inside the MobileNav drawer
  header — replaces the previous bare-text label there too.

Verified at desktop 1440 and mobile 600 widths.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/components/brand-mark.tsx  | 57 ++++++++++++++++++++++++++++++++++
 web/components/mobile-nav.tsx  |  6 ++--
 web/components/site-header.tsx |  8 ++---
 3 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 web/components/brand-mark.tsx

diff --git a/web/components/brand-mark.tsx b/web/components/brand-mark.tsx
new file mode 100644
index 0000000..e46fba6
--- /dev/null
+++ b/web/components/brand-mark.tsx
@@ -0,0 +1,57 @@
+/**
+ * BrandMark — The Disclosure Bureau wordmark + mark.
+ *
+ * Small inline SVG (three offset gold bars suggesting a redaction edge / a
+ * classification stamp) paired with the serif wordmark and a tiny
+ * monospace "CLASSIFIED · PUBLIC RECORD" microline beneath. Used in
+ * SiteHeader on every page and inside the mobile drawer header. Keeps the
+ * brand presence consistent without depending on an external asset.
+ *
+ * Two sizes: `default` (header) and `compact` (mobile drawer).
+ */
+interface BrandMarkProps {
+  size?: "default" | "compact";
+  className?: string;
+}
+
+export function BrandMark({ size = "default", className = "" }: BrandMarkProps) {
+  const isCompact = size === "compact";
+  return (
+    <span className={`inline-flex items-center gap-2.5 group ${className}`}>
+      <span
+        aria-hidden="true"
+        className="inline-flex items-end gap-[2px]"
+        style={{ height: isCompact ? "20px" : "24px" }}
+      >
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080] transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "100%" }}
+        />
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080]/70 transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "70%" }}
+        />
+        <span
+          className="block w-[3px] rounded-sm bg-[#e0c080]/40 transition-transform group-hover:translate-y-[-1px]"
+          style={{ height: "45%" }}
+        />
+      </span>
+      <span className="flex flex-col leading-none">
+        <span
+          className={
+            isCompact
+              ? "font-display font-semibold text-[16px] text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors"
+              : "font-display font-semibold text-[19px] md:text-[20px] text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors"
+          }
+        >
+          The Disclosure Bureau
+        </span>
+        {!isCompact && (
+          <span className="hidden md:inline mt-1 font-mono text-[9px] uppercase tracking-[0.22em] text-[#5a6678]">
+            Classified · public record
+          </span>
+        )}
+      </span>
+    </span>
+  );
+}
diff --git a/web/components/mobile-nav.tsx b/web/components/mobile-nav.tsx
index bc573ae..692ef06 100644
--- a/web/components/mobile-nav.tsx
+++ b/web/components/mobile-nav.tsx
@@ -22,6 +22,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { Menu, X } from "lucide-react";
 import { AuthBar } from "./auth-bar";
+import { BrandMark } from "./brand-mark";
 import { LocaleToggleClient } from "./locale-toggle-client";
 
 interface NavItem {
@@ -94,10 +95,7 @@ export function MobileNav({
           {/* Panel */}
           <div className="absolute top-0 right-0 h-full w-[85vw] max-w-sm bg-[#0d1220] border-l border-[rgba(224,192,128,0.20)] shadow-2xl flex flex-col">
             <div className="flex items-center justify-between px-4 py-4 border-b border-[rgba(224,192,128,0.15)]">
-              <span className="font-display text-lg text-[#e7ecf3]">
-                <span className="text-[#e0c080] mr-1" aria-hidden="true">▍</span>
-                The Disclosure Bureau
-              </span>
+              <BrandMark size="compact" />
               <button
                 ref={closeBtnRef}
                 type="button"
diff --git a/web/components/site-header.tsx b/web/components/site-header.tsx
index 19cb235..a066d32 100644
--- a/web/components/site-header.tsx
+++ b/web/components/site-header.tsx
@@ -8,6 +8,7 @@
  */
 import Link from "next/link";
 import { AuthBar } from "./auth-bar";
+import { BrandMark } from "./brand-mark";
 import { LocaleToggle } from "./locale-toggle";
 import { MobileNav } from "./mobile-nav";
 import { NavLink } from "./nav-link";
@@ -26,11 +27,8 @@ export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
   return (
     <header className="border-b border-[rgba(224,192,128,0.15)]">
       <div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4">
-        <Link href="/" className="flex items-center gap-2 group" aria-label="The Disclosure Bureau — home">
-          <span className="text-[#e0c080] text-lg" aria-hidden="true">▍</span>
-          <span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
-            The Disclosure Bureau
-          </span>
+        <Link href="/" aria-label="The Disclosure Bureau — home">
+          <BrandMark />
         </Link>
 
         {/* Desktop nav — hidden below md, shown md+. */}