590bb3283c
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>
57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
/**
|
|
* 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>
|
|
);
|
|
}
|