# Design handoff

All styling lives in **`src/styles/global.css`** — design tokens in `:root`
(colors, type scale, spacing, radius, shadows, `--header-h`) + plain-CSS
components below them. No frameworks, no preprocessors, no runtime JS for
presentation. Pages are `.astro` templates (plain HTML).

## Brand (official: CTAO Brand Guidelines, April 2024 — PDF in the project docs)

- Colors: Galaxy Blue `#00004A`, Cherenkov Blue `#00E4D8`, Moon Gray
  `#F5F5F5`, Cosmic Azure `#007AFF` (links/focus), Interstellar Indigo
  `#00009C`. Cherenkov is an ACCENT (brand book rations it — currently:
  primary CTA, hero subtitle, logo flash); it fails AA as text on white.
- Type: **Inter** for everything, **Space Grotesk** (weight 500) only for
  communicative headlines (h1/h2). Sizes come from the `--fs-*` scale.
- Logo files in `public/brand/`; always "CTAO", min 100px wide, no effects.

## Practical notes (the non-obvious ones)

- **`public/admin/preview.css` mirrors the `.prose` styles** so the CMS
  editor preview matches articles 1:1 — when you touch `.prose` or its
  tokens, update the mirror (both files carry a KEEP IN SYNC comment).
- Fonts ship **inlined as data: URIs** in global.css (no font requests, no
  swap flash). The woff2 files in `public/fonts/` look unused but feed the
  CMS preview — keep them.
- All `animation`/`transition` rules sit in the single
  `prefers-reduced-motion: no-preference` block at the end of global.css.
- Scroll-driven effects need `vite.build.cssMinify: 'esbuild'`
  (astro.config.mjs) — the default minifier breaks `animation-timeline`.
- `--header-h` drives the sticky-header offsets (anchors, TOC rail, reading
  progress); change the header height only through the token.
- Deterministic gate before pushing: `npm run check` (build + link check).