IllusionandClaude Opus 5
aedef6daeb
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
258 lines
12 KiB
CSS
258 lines
12 KiB
CSS
/* ============================================================================
|
|
TIER 1 - PRIMITIVES
|
|
----------------------------------------------------------------------------
|
|
Raw values only. No meaning, no roles, no component names.
|
|
"green-600", never "accent". "neutral-800", never "page-background".
|
|
|
|
Nothing in app/ may reference these directly except app/styles/semantic.css
|
|
and app/styles/typography.css. Components use TIER 2 (semantic.css).
|
|
|
|
Values sourced from the published Figma variables of
|
|
file yvKHp3Ha2rQmv9kt9tCC7j - the hexes marked [figma] are exact; the
|
|
surrounding ramp steps are derived from them (tint = mix with white,
|
|
shade = multiply toward black).
|
|
========================================================================= */
|
|
|
|
@theme static {
|
|
/* --------------------------------------------------------------------
|
|
COLOUR - base
|
|
-------------------------------------------------------------------- */
|
|
--color-white: #ffffff; /* [figma] base/white */
|
|
--color-black: #000000; /* [figma] base/black */
|
|
--color-transparent: transparent;
|
|
|
|
/* --------------------------------------------------------------------
|
|
COLOUR - neutral ramp (built around the brand Dark Grey #1d1d1b)
|
|
-------------------------------------------------------------------- */
|
|
--color-neutral-50: #f8f9fa; /* [figma] text/primary on dark */
|
|
--color-neutral-100: #e8e8e8; /* [figma] stroke/subtle */
|
|
--color-neutral-200: #d6d6d4;
|
|
--color-neutral-300: #c2c2c0; /* [figma] text/secondary */
|
|
--color-neutral-400: #949492; /* [figma] text/tertiary */
|
|
--color-neutral-500: #5c565c; /* [figma] base/grey-500 */
|
|
--color-neutral-600: #454543;
|
|
--color-neutral-700: #2e2e2c;
|
|
--color-neutral-800: #1d1d1b; /* [figma] Neutral Black/800 - brand Dark Grey */
|
|
--color-neutral-850: #141413; /* the design drafts' footer / raised panel */
|
|
--color-neutral-900: #0b0b0a; /* [figma] Neutral Black/900 */
|
|
|
|
/* --------------------------------------------------------------------
|
|
COLOUR - green ramp (brand Dark Turquoise #008764)
|
|
600 is the brand colour. 700 is the Figma button hover shade.
|
|
-------------------------------------------------------------------- */
|
|
--color-green-50: #f0f8f5;
|
|
--color-green-100: #dbeee9;
|
|
--color-green-200: #b3dbd1;
|
|
--color-green-300: #85c5b5;
|
|
--color-green-400: #4daa93; /* [figma] brand Green/400 - primary button disabled fill */
|
|
--color-green-500: #26997b;
|
|
--color-green-600: #008764; /* [figma] background/accent, interactive/primary, text/accent */
|
|
--color-green-700: #006b4f; /* [figma] base/turquoise-dark, interactive/primary-hover */
|
|
--color-green-800: #00563f;
|
|
--color-green-900: #00402f;
|
|
|
|
/* --------------------------------------------------------------------
|
|
COLOUR - red ramp (brand Red #dd322f)
|
|
500 is the brand colour. 600/700 are derived press states.
|
|
-------------------------------------------------------------------- */
|
|
--color-red-50: #fdf3f3;
|
|
--color-red-100: #fae2e2;
|
|
--color-red-200: #f5c2c1;
|
|
--color-red-300: #ef9d9b;
|
|
--color-red-400: #e76b69;
|
|
--color-red-500: #dd322f; /* [figma] interactive/danger, base/red */
|
|
--color-red-600: #c02c29;
|
|
--color-red-700: #a42523;
|
|
--color-red-800: #851e1c;
|
|
--color-red-900: #631715;
|
|
|
|
/* --------------------------------------------------------------------
|
|
COLOUR - alpha steps (translucent overlays, hairlines, scrims)
|
|
-------------------------------------------------------------------- */
|
|
--color-white-a04: rgb(255 255 255 / 0.04);
|
|
--color-white-a08: rgb(255 255 255 / 0.08);
|
|
--color-white-a12: rgb(255 255 255 / 0.12);
|
|
--color-white-a16: rgb(255 255 255 / 0.16);
|
|
--color-white-a24: rgb(255 255 255 / 0.24);
|
|
--color-white-a40: rgb(255 255 255 / 0.4);
|
|
--color-white-a64: rgb(255 255 255 / 0.64);
|
|
|
|
--color-black-a04: rgb(0 0 0 / 0.04);
|
|
--color-black-a08: rgb(0 0 0 / 0.08);
|
|
--color-black-a12: rgb(0 0 0 / 0.12);
|
|
--color-black-a16: rgb(0 0 0 / 0.16);
|
|
--color-black-a20: rgb(0 0 0 / 0.2); /* [figma] hero picture shade */
|
|
--color-black-a24: rgb(0 0 0 / 0.24);
|
|
--color-black-a40: rgb(0 0 0 / 0.4);
|
|
--color-black-a56: rgb(0 0 0 / 0.56);
|
|
--color-black-a72: rgb(0 0 0 / 0.72);
|
|
|
|
/* The pale mint tint the home hero washes its picture with - green-200,
|
|
not the brand green-600 the --color-green-a* steps below carry. */
|
|
--color-green-200-a12: rgb(179 219 209 / 0.12);
|
|
|
|
--color-green-a12: rgb(0 135 100 / 0.12);
|
|
--color-green-a16: rgb(0 135 100 / 0.16);
|
|
--color-green-a24: rgb(0 135 100 / 0.24);
|
|
--color-green-a40: rgb(0 135 100 / 0.4);
|
|
|
|
--color-red-a12: rgb(221 50 47 / 0.12);
|
|
--color-red-a16: rgb(221 50 47 / 0.16);
|
|
--color-red-a24: rgb(221 50 47 / 0.24);
|
|
|
|
/* --------------------------------------------------------------------
|
|
TYPEFACES
|
|
Panton (EN) and Montserrat Arabic (AR) are the licensed brand faces,
|
|
licensed into the repo - the first family in each stack is the real
|
|
one, everything after it is the free fallback that ships today.
|
|
@font-face declarations live in typography.css.
|
|
-------------------------------------------------------------------- */
|
|
--font-en: "Panton", "Figtree", ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, sans-serif;
|
|
--font-ar: "Montserrat Arabic", "IBM Plex Sans Arabic",
|
|
"Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
|
|
--font-sans: var(--font-en);
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
|
|
/* --------------------------------------------------------------------
|
|
FONT SIZE ramp (px in the comment, rem in the value)
|
|
-------------------------------------------------------------------- */
|
|
--text-xs: 0.75rem; /* 12 - [figma] Label/Medium */
|
|
--text-sm: 0.875rem; /* 14 - [figma] Body/Small */
|
|
--text-md: 1rem; /* 16 - [figma] Body/Medium Bold */
|
|
--text-lg: 1.125rem; /* 18 - [figma] Body/Large Bold */
|
|
--text-xl: 1.375rem; /* 22 */
|
|
--text-2xl: 1.75rem; /* 28 - [figma] Heading/H2 */
|
|
--text-3xl: 2.25rem; /* 36 */
|
|
--text-4xl: 2.75rem; /* 44 - [figma] Display/Small */
|
|
--text-5xl: 3.5rem; /* 56 */
|
|
|
|
/* --------------------------------------------------------------------
|
|
LINE HEIGHT ramp - fixed steps, named after their px value / 4
|
|
-------------------------------------------------------------------- */
|
|
--leading-4: 1rem; /* 16 */
|
|
--leading-5: 1.25rem; /* 20 */
|
|
--leading-6: 1.5rem; /* 24 */
|
|
--leading-7: 1.75rem; /* 28 */
|
|
--leading-8: 1.875rem; /* 30 */
|
|
--leading-9: 2.25rem; /* 36 */
|
|
--leading-10: 2.75rem; /* 44 */
|
|
--leading-11: 3.25rem; /* 52 */
|
|
--leading-12: 4rem; /* 64 */
|
|
|
|
/* --------------------------------------------------------------------
|
|
LETTER SPACING ramp
|
|
-------------------------------------------------------------------- */
|
|
--tracking-tighter: -1px; /* [figma] Display/Small */
|
|
--tracking-tight: -0.6px;
|
|
--tracking-snug: -0.3px; /* [figma] Heading/H2 */
|
|
--tracking-normal: 0px;
|
|
--tracking-wide: 0.5px; /* [figma] Label/Medium */
|
|
--tracking-wider: 1px;
|
|
|
|
/* --------------------------------------------------------------------
|
|
FONT WEIGHT ramp
|
|
Panton "SemiBold" is published at weight 500 in the Figma library,
|
|
which is why medium is 500 and semibold is 600.
|
|
-------------------------------------------------------------------- */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500; /* [figma] Label/Medium */
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700; /* [figma] every Bold role */
|
|
--font-weight-black: 900;
|
|
|
|
/* --------------------------------------------------------------------
|
|
SPACING ramp
|
|
-------------------------------------------------------------------- */
|
|
--spacing: 0.25rem; /* base unit for p-1, gap-2, ... */
|
|
--spacing-2xs: 0.25rem; /* 4 */
|
|
--spacing-xs: 0.5rem; /* 8 - [figma] space/xs */
|
|
--spacing-sm: 0.75rem; /* 12 - [figma] space/sm */
|
|
--spacing-md: 1rem; /* 16 - [figma] space/md */
|
|
--spacing-lg: 1.5rem; /* 24 - [figma] space/lg */
|
|
--spacing-xl: 2rem; /* 32 */
|
|
--spacing-2xl: 3rem; /* 48 */
|
|
--spacing-3xl: 4rem; /* 64 */
|
|
--spacing-4xl: 6rem; /* 96 */
|
|
--spacing-5xl: 8rem; /* 128 */
|
|
|
|
/* --------------------------------------------------------------------
|
|
RADIUS ramp
|
|
-------------------------------------------------------------------- */
|
|
--radius-none: 0px;
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px; /* [figma] radius/sm */
|
|
--radius-md: 8px; /* [figma] radius/md */
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* --------------------------------------------------------------------
|
|
BORDER WIDTH ramp
|
|
-------------------------------------------------------------------- */
|
|
--border-width-sm: 1px;
|
|
--border-width-md: 1.5px; /* [figma] secondary button stroke */
|
|
--border-width-lg: 2px;
|
|
--border-width-xl: 3px;
|
|
|
|
/* --------------------------------------------------------------------
|
|
OPACITY ramp
|
|
-------------------------------------------------------------------- */
|
|
--opacity-0: 0;
|
|
--opacity-8: 0.08;
|
|
--opacity-16: 0.16;
|
|
--opacity-40: 0.4; /* [figma] every disabled button */
|
|
--opacity-50: 0.5; /* [figma] launch strip, flanking photos */
|
|
--opacity-64: 0.64;
|
|
--opacity-100: 1;
|
|
|
|
/* --------------------------------------------------------------------
|
|
SHADOW ramp
|
|
-------------------------------------------------------------------- */
|
|
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.08);
|
|
--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);
|
|
--shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.18), 0 4px 8px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.28);
|
|
--shadow-none: 0 0 #0000;
|
|
|
|
/* --------------------------------------------------------------------
|
|
DURATION ramp
|
|
-------------------------------------------------------------------- */
|
|
--duration-instant: 0ms;
|
|
--duration-fast: 120ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 320ms;
|
|
--duration-slower: 520ms;
|
|
--duration-slowest: 800ms;
|
|
|
|
/* --------------------------------------------------------------------
|
|
EASING ramp
|
|
-------------------------------------------------------------------- */
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
|
|
|
|
/* --------------------------------------------------------------------
|
|
Z-INDEX ladder - raw ordinals, semantic layer names live in tier 2
|
|
-------------------------------------------------------------------- */
|
|
--z-0: 0;
|
|
--z-10: 10;
|
|
--z-20: 20;
|
|
--z-30: 30;
|
|
--z-40: 40;
|
|
--z-50: 50;
|
|
--z-60: 60;
|
|
--z-70: 70;
|
|
|
|
/* --------------------------------------------------------------------
|
|
CONTAINER widths
|
|
-------------------------------------------------------------------- */
|
|
--container-prose: 68ch;
|
|
--container-content: 80rem; /* 1280 */
|
|
--container-wide: 90rem; /* 1440 */
|
|
}
|