portal/DESIGN.md

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 (focus rings only; links use the darkened --link so they pass AA on white), 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.
• Comments in the code cite SPEC §…, BRAND D.x and REQUIREMENTS: those are the CTAO specification, the brand guidelines PDF and the team's consolidated requirements, kept in the project's document folder at Cyfronet, not in this repo.
• 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 (types + build + link check, a few seconds).