import { cn } from '@/lib/cn';
import { t } from '@/i18n';
/**
* CountryAtlas brand mark — "the graticule A".
* A globe ring carrying a light graticule (one inner meridian ellipse and a tropic parallel), whose equator is
* the crossbar of a capital "A" drawn by two meridian legs meeting at the pole. Globe + atlas + the letter A in one
* glyph; strokes only, `currentColor`, monochrome-capable, legible at 16 px (the graticule fades, the A and the
* ring stay).
*
* Usage: (header), (favicons, OG), .
*/
export const MARK_PATHS = {
ring: { cx: 16, cy: 16, r: 13 },
meridian: { cx: 16, cy: 16, rx: 5.6, ry: 13 },
equator: 'M3.6 19.6h24.8',
tropic: 'M4.2 11.2h23.6',
legs: 'M9.3 27.4 16 6.2l6.7 21.2',
} as const;
export function LogoMark({ size = 28, className, title, strokeWidth = 2 }: { size?: number; className?: string; title?: string; strokeWidth?: number }) {
const m = MARK_PATHS;
return (
);
}
export function Wordmark({ className }: { className?: string }) {
return (
Country
Atlas
);
}
export function Logo({ variant = 'full', size = 26, className }: { variant?: 'full' | 'mark' | 'wordmark'; size?: number; className?: string }) {
if (variant === 'mark') return ;
if (variant === 'wordmark') return ;
return (
);
}
/** Raw SVG string of the mark (for favicons / OG rasterisation); `color` is a CSS colour. */
export function logoMarkSvg({ size = 512, color = '#1c5cab', background, radius = 0, strokeWidth = 2 }: { size?: number; color?: string; background?: string; radius?: number; strokeWidth?: number } = {}): string {
const m = MARK_PATHS;
const bg = background ? `` : '';
const thin = (strokeWidth * 0.6).toFixed(2);
return (
``
);
}