crr-tools/packages/crr-brand/README.md

CRR brand

Canonical CRR visual assets and framework-independent CSS, consumed by both apps.

• assets/logo.png: the original Tournament logo, copied without conversion.
• assets/favicon.png: the original Tournament favicon.
• styles/tokens.css: shared palette around #ed1c24, font stack, radii, shadows, spacing and focus-ring values.
• styles/base.css: box sizing, body defaults, links, controls, focus and tables.
• styles/components.css: the existing primary/quiet button, panel and error alert patterns used by both Vue and Jinja. Existing class names are supported directly so templates retain their own structure.

Load tokens, base and components before the application's own stylesheet. Application CSS owns sizes, typography hierarchy, responsive layout, control spacing, specialist badges and print-card dimensions. Local variable names are aliases of --crr-* tokens, keeping existing styles/components compatible.

Tournament resolves @crr-brand through Vite and uses assets/ as its public asset directory. Shifts mounts this directory at /brand using FastAPI StaticFiles; Jinja uses url_for('brand', ...) so ROOT_PATH is respected. Its PDF exporter reads this same logo. Both Docker builds copy the package from the repository-root context, preserving its relative path to each application.

Brand-only changes trigger both application CI jobs. This package contains no domain code or UI framework components and has no independent public version.

After changing branding, run both app checks/builds and make branding-visual-check to compare desktop/mobile geometry and Tournament print cards against the legacy baseline. make migration-visual-check compares rendered pages to the approved Phase 2 screenshots. Baseline staging and Playwright prerequisites are documented in migration/README.md.