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>
110 lines
3.9 KiB
CSS
110 lines
3.9 KiB
CSS
/* ============================================================================
|
|
SHARP-ER - stylesheet entry
|
|
----------------------------------------------------------------------------
|
|
Load order matters:
|
|
1. tailwindcss - preflight + the utility engine
|
|
2. primitives.css - TIER 1, raw scales in a @theme block
|
|
3. semantic.css - TIER 2, roles that alias tier 1, per surface
|
|
4. typography.css - type roles + @font-face + the EN/AR font switch
|
|
|
|
See ./styles/README.md for the rules components have to follow.
|
|
========================================================================= */
|
|
|
|
@import "tailwindcss";
|
|
@import "./styles/primitives.css";
|
|
@import "./styles/semantic.css";
|
|
@import "./styles/typography.css";
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
DIRECTION VARIANTS
|
|
The site is served at /en/* (LTR) and /ar/* (RTL) and lays out with logical
|
|
properties, so these are only for the rare case that genuinely cannot be
|
|
expressed logically (an asymmetric icon, a background position).
|
|
------------------------------------------------------------------------ */
|
|
@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *));
|
|
@custom-variant ltr (&:where([dir="ltr"], [dir="ltr"] *));
|
|
|
|
@layer base {
|
|
/* Every surface paints itself, so <footer data-surface="light"> inside a
|
|
dark page is complete on its own. :root defaults to the dark surface. */
|
|
html,
|
|
body,
|
|
[data-surface] {
|
|
/* The design drafts stand the whole site on #0B0B0A and lift their
|
|
bands off it with #1D1D1B, so the document's ground is the SUNKEN
|
|
surface and `--surface-page` is the colour of a band. A section that
|
|
wants the lighter band paints `bg-[var(--surface-page)]`; one that
|
|
wants the ground paints nothing, or `bg-[var(--surface-sunken)]` when
|
|
it needs to say so explicitly. */
|
|
background-color: var(--surface-sunken);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
/* Tier-2 only, like everything else: --type-body-base-* is the semantic
|
|
alias of the Body/Medium role (16/24) and lives in semantic.css. */
|
|
font-size: var(--type-body-base-size);
|
|
line-height: var(--type-body-base-leading);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: start;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--surface-selection);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
/* Headings inherit the heading family; size comes from a type role utility
|
|
so that an <h2> used as a card title can still be body-lg-bold. */
|
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--field-placeholder);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
BANDS
|
|
The design drafts alternate the #0B0B0A ground with lighter #1D1D1B bands,
|
|
and a card inside a band is drawn DARKER than the band (#141413) while a
|
|
card on the ground is drawn LIGHTER (#1D1D1B). A section paints itself with
|
|
`.sh-band` and every Card, InfoPanel and tile inside it follows, instead of
|
|
each route guessing its own fill.
|
|
------------------------------------------------------------------------ */
|
|
@layer components {
|
|
.sh-band {
|
|
background-color: var(--surface-page);
|
|
--surface-card: var(--surface-raised);
|
|
}
|
|
}
|