Sofia Dives

Enquiries now send to a role address on our own domain, committed in siteConfig, with Cloudflare Email Routing forwarding to the parents. Two reasons. Recipients change in the Email Routing UI — immediate, no redeploy, several destinations supported — where a Pages secret needs a deploy to take effect. And safeguarding: this is a child's site, so no parent's personal inbox is written into the repo, the build, or the Pages environment. Fewer copies is strictly better.

EmailIt still sends; Email Routing only receives and forwards. The dead parent_email plumbing went with it — the value was injected into settings but no component ever rendered it. The field stays on the Directus singleton, still excluded from public read; the site just ignores it.

Password resets and user invites silently disappeared. The EMAIL_* values were set in the Coolify UI, but the directus service's environment: block never declared them — and Compose uses the env file for ${...} interpolation only, so an undeclared variable never reaches the container. With no EMAIL_TRANSPORT, Directus falls back to sendmail, which isn't in the image, so mail vanishes without a clear error.

The password now uses :? so a missing value fails the deploy loudly instead of booting with quietly broken email. The PUBLIC_URL default was corrected to the live host at the same time, since auth-email links are built from it.

Sofia came out of the 2026 NAGs a triple national champion — gold on 1m, 3m and platform. Most of the site reads from Directus, but the fallback fixtures, the hardcoded StatCards standfirst and the SEO meta descriptions do not, so those were brought in line by hand. The results meta also drops “synchro”, since there are no synchro results; the enum values stay, because they are a schema contract and the filter only renders chips for boards that have results.

The news hero, the news cards and the home hero all ignored each image's Directus focal point and cropped dead-centre, which pushed the subject out of frame on anything that wasn't centred to begin with. Focal point is now honoured, and the article hero scrim was rebalanced at the same time.

A small labelling correction on the results board filter chips. The height qualifier was redundant and made the chips read as a different event.

Images embedded in CMS markdown — the story body and inline news images — were hard-edged against the page. Scoped to .prose img so logos and UI imagery are unaffected.

The “Ready to talk?” block on /support reused .contact, which is the homepage's two-column copy-and-figure grid. With flat children, the rule, heading, paragraph and button auto-placed across two columns — heading and button right, text left. Given its own centred .contact-cta class; the homepage grid is untouched.

Category badges shared the date meta-row and crowded it whenever a post carried more than one. They now sit in their own wrapping row pinned to the card bottom, so they align across cards. Pagination mirrors the Results pattern — progressive enhancement, nine per page, pager only past that, current page in gold.

It did not work first time: hiding relied on the [hidden] attribute, but .news-card{display:flex} beat the UA [hidden]{display:none}, so every card stayed visible.

Creating an image field over the Directus MCP with special:['file'] gives you the interface but not the directus_files foreign key. The failure mode is nasty: uploads through Studio break while the public asset still resolves, so nothing looks wrong from the outside. Now a standing rule in CLAUDE.md — declare the FK relation explicitly on all five image fields.

A quiet maker's mark at the very bottom of the footer: muted small-caps text with a 16px white square logomark, Useful Labs linking out in a new tab. Two passes to get it right — the underline was displacing the vertical alignment, and the hairline divider framed the block and drew the eye. Both dropped. Discrete is the point.

The gold rounded-square mark is replaced by a thin gold ring with a gold SD on navy — reusing the site's signature ring motif and reading as achievement. One CSS change to .brand .mono updates both the nav and the footer, since both sit on navy; the news-card placeholder monogram is separately scoped and untouched. A single ring, not a double — the double lost definition at this size. The favicon is the filled gold disc with a navy SD, which stays crisp at 16–32px.

An intermediate state between transparent and solid. The moment scrolling starts over the hero, the bar condenses and picks up a translucent navy with a backdrop blur, so hero content passing behind it stays legible instead of colliding with the brand and links — most noticeable on mobile. Once the hero is past, it resolves to solid navy and the blur is dropped behind the opaque bar. The toggle is rAF-throttled, and reduced-motion is still instant.

Fixed header, transparent and airy at 84px over the homepage hero, resolving to solid navy and condensing to 62px once the hero scrolls past — driven by an IntersectionObserver on the hero rather than a scroll handler, so there is no jank. Interior pages get the compact bar from the top and reserve --nav-h, so no layout shift. Active page carries a gold underline via aria-current, and anchor targets get scroll-margin-top to clear the bar.

One trap worth recording: the homepage nav modifier was named hero, which collided with the hero section's .hero rule and stacked the nav vertically. Renamed to .over-hero.

Two root causes. Fonts used font-display:swap with no preload, so every page painted in the fallback and then reflowed — about 6% width shift on the nav brand. Preloading the primary latin Hanken woff2 keeps the swap policy but removes the reflow. Second, with no stable scrollbar gutter, moving between scrolling and non-scrolling pages nudged centred content ~15px; scrollbar-gutter:stable on html settles it.

Supporters were a plain grid. They are now text-first plates with a logomark, link and popover, given an engraved honour-board treatment with a hover lift and shimmer, and a champion frame for the top tier. A Team Sofia ribbon renders after the support section on the homepage — full-width pills on mobile, 44px touch targets, radius matched to the support plates.

Single news posts now open with a full-bleed cover hero and an overlaid headline (a navy gradient and ring motif when there is no cover), then a bone reading body with a navy drop cap and Newsreader pull-quotes. Reading time is computed from word count, never entered by hand.

The Results page now leads with an airy achievement stat row and a Latest Result card, then a medal-badge scoreboard: filter by board (1m / 3m / platform / synchro), personal-best rows get a faint gold wash and a PB tag, and client-side pagination kicks in past 20 entries.

One shared enquiry form sits behind every tier and contact CTA. Cloudflare Turnstile plus a honeypot guard it, the send runs server-side in a Cloudflare Pages Function, and it routes to a single parent address. No checkout, no donations — support is always an enquiry.

The contact send was failing against the /v1/emails path. The live EmailIt API is /v2/emails — swapped it and the enquiry flow went green end to end.

Safeguarding guardrails on the data layer: the public role reads only published news and active supporters, the parent email is excluded from every public response and injected server-side, and a draft news item was confirmed invisible to the public API. First name only, everywhere.

Directus stores uploads in an S3-compatible Wasabi bucket and serves them through on-the-fly transforms. A 1.8 MB PNG comes back as a ~92 KB WebP at the right width — hero, news covers and supporter logos are all sized at request time.

Content-as-code: a Directus flow posts to /api/directus-sync, which pulls the public content and commits fresh JSON snapshots to GitHub. The push triggers the Cloudflare Pages build — so the live site reads committed snapshots and never depends on Directus being up.

Day one and the whole thing stands up: Home, Her Story, Results, News, Support, Contact and Privacy, all ported from the mockups, wired to a self-hosted Directus, and passing astro check + build with zero errors. Static-first on Cloudflare Pages, strict TypeScript, self-hosted fonts.