disclosure-bureau/web/components/brand-mark.tsx

/**
 * 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>
  );
}