The bar carries the drafts' translucent ground with
`backdrop-filter: blur(14px)`, and a filtered element becomes the containing
block for every position:fixed descendant (CSS Filter Effects 1 s.6.1). The
drawer was rendered inside that header, so its `fixed inset-0` resolved
against the 64px bar rather than the viewport. Measured on the built page at
390x844, the panel came out 390x64: a strip of drawer background at the top,
the menu spilling over the hero with nothing painted behind it, and the page
underneath scroll-locked. The header is also a stacking context
(z-index: var(--layer-header)), so an aria-modal dialog nested inside it
could never rise above anything painted above the bar.
The drawer is now portalled to <body>, which resolves the containing block
and the stacking context at once, and is where a modal dialog belongs
regardless. The portal mounts one commit after hydration so the first client
render still matches the server's; nothing is lost, because the trigger is a
button with an onClick - without JavaScript the drawer could not be opened
at all - and every link in it already ships in the server-rendered
DesktopNav markup.
The inert walk benefits too. It inerts each ancestor's OTHER children up to
<body>, which previously could not reach the header without inerting the
drawer inside it; from the portal, body's other children are exactly the
header, main and footer.
Also gives the hamburger and its close twin a 44x44 hit area. They were
24x24, under the WCAG 2.5.5 target size; a logical negative inline-end
margin keeps the glyph on the same page gutter the wordmark opposite it
uses, so it still mirrors in Arabic.
Verified in a headless browser against the production build at 390x844: the
panel fills the viewport in both locales and mirrors under dir="rtl", focus
moves to Close on open and back to the trigger on Escape, the scroll lock
and the inert flags are set and cleared, and the desktop nav is unchanged -
three group triggers and a working dropdown at 1440px, the hamburger at
1279px.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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>
Illusion
