[yasinmiran]

Fixes on the landing page and the navigation, plus accessibility and ordering problems that were already on main. This sits on top of #356, because the hero takes its words from site.json there, and carries all of #356's commits, so merge #356 first, by any method; GitHub then moves this PR's base to main.

Rotating word

The hero's rotating word flickered on every swap. It used a 3D flip in CSS: the old phrase turned edge-on while the new one turned in from edge-on, both faded to a quarter of their opacity, with backface-visibility and perspective on, and a second timer swapping CSS classes alongside the animations. I recorded every painted frame of a swap in headless Chromium. There the old version passes through a couple of frames where both phrases are edge-on and pale; I couldn't get a hard blank out of it, so the flicker people see is most likely how a real GPU composites that 3D flip.

The phrases now slide up with motion's AnimatePresence. The old phrase rises and fades out while the new one rises and fades in over it, so every recorded frame of the swap shows legible text, and motion removes the old phrase when its exit ends. All the 3D styles and the keyframes are gone. Every phrase still sits invisible in the same grid cell, so the headline never changes size mid-swap. The server-rendered page shows the first phrase fully visible, reduced motion keeps it there, and the pause button still holds the current phrase.

This changes the look from a flip to a slide. If the flip should come back, motion can do it, but the overlap through edge-on is part of what made it read as a flicker.

Navigation bar

Once you scroll, the navigation used to merge into a floating rounded pill, inset 12 to 32 px from the edges. It now becomes a full-width rectangle flush with the top, left and right, with the same surface and shadow. Its padding matches the floating insets, so the logo and the buttons stay at the same horizontal position when it merges. The merge still animates through motion's layout animation, in both directions. At the top of the page nothing changes.

Footer

The ELIXIR brand sentence had lost its dash in the March redesign and read "Norwegian Node of ELIXIR the European infrastructure". It's back to the wording the brand guidelines fix: "ELIXIR – the European infrastructure for life science data".

From the regression review

A second reviewer compared this branch with main across all pages. Two regressions came out of it, both fixed here:

• Navigation under the site banner. The banner is sticky at the top, so the full-width bar slid under it once you scrolled, and with an announcement on none of the nav controls could be clicked at 640px and up. The banner now publishes its height as --site-banner-height (cleared when it's dismissed), and the navigation sits below it, floating or merged. That also fixes phones, where a two-line banner already covered the floating pill on main. With a test banner on, every nav control is clickable at its centre at 320, 375, 640, 768, 1024 and 1440px, at the top, scrolled and after dismissing.
• Sticky columns under a long banner. A second pass found that with the bar below the banner, a banner wrapping to two lines put the top 8px of the funding filter column under the bar on wide screens. The sticky offsets of that column and of the home page's services intro now add the banner height, the way the page sidebar's does.
• Duplicate word in search. The animated copy of the first phrase added a second "life science" to the home page's Pagefind entry. It's excluded now, so the entry matches main word for word.

Problems that were already on main

• Skip link hidden behind the logo. At desktop widths the focused skip link shared z-50 with the header, which comes later in the page, so the logo covered it (WCAG 2.4.11). It now sits above the header and the banner, fixed in view when focused from further down.
• Headings under the navigation after an in-page link. Headings carried 48 to 96px scroll margins from before the fixed bar, so jumping to a section on the accessibility page left its heading under the nav. One scroll-padding-top on the page now clears the navigation and the banner for every in-page link and focus move, and the per-heading margins are gone. The page sidebar's sticky offset counts the banner too.
• Same-date items in no fixed order. News, events and RSS items with the same date sorted by date only, so builds could list them either way, and the home page could pick a different third news item. They fall back to their id (their link in the feed).
• Menu links stuck under the header on short screens. On a phone held sideways (740x360) the menu overflowed, and justify-center pushed its first links above the top of the list, under the header and out of scroll reach. The list is centred with auto margins now, which start it at the top whenever it doesn't fit, and its top padding counts the banner.
• Funding filters below the window. The filter column holds 31 filters, about 1230px, so while stuck it ran off the bottom of the window; the last topics only came into view at the end of the project list, and tabbing to them put focus off screen. It scrolls on its own now. Since that shows a scrollbar on systems with classic scrollbars, it's the one change here that alters the look, and it sits in its own commit (ccc52e8) in case you'd rather drop it.
• The reviewer also flagged carousel images missing the base path. That turned out to be the raw prop in the island markup; every rendered image already gets the base.

Not in this PR

Built with a base path (--base /elixir-test), 15 pages have links or images that miss it, on main too: relative images and links in MDX, because rehypeRelativeAssets is registered without a base option, a handful of hard-coded internal links in post bodies, and the admin favicon. The live site is served from /, so nothing breaks today, and the fix means editing posts.

Testing

astro check (0 errors, 0 warnings), the build, pnpm test, pnpm test:slugs and pnpm test:pages pass on Node 24. I also screenshotted the navigation at the top of the page, scrolled, and frame by frame through the merge and split, at 375 and 1440 px in light and dark. Every request outside localhost was blocked.

For the review fixes: with a test banner on and off, at 375 and 1440, the skip link is on top both at the top of the page and focused mid-page, and headings reached through /accessibility/#standards, /accessibility/#testing, /about/#impact and /about/everyone/#org-uio all land below the navigation and the banner; on main the skip link is covered at 1440 and the accessibility headings land 24 to 28px under the bar. No two neighbouring feed items are out of order. Against main, only /news/ (same-day order), /training/ and /research-support/ (the dash edits in #356) change in visible text once the footer dash and the hero's invisible phrase copies are accounted for.

For the second pass, both sticky columns stay below the bar at 1024 and 1440 with banners of one, two and three lines. The mobile menu reaches every item at 740x360, 720x400, 375x667 and 320x568, with and without a banner, and stays centred when it fits. On /funding-and-projects/ at 1440x800 and 1440x1200, tabbing through the page leaves no focus stop under the bar or off screen, no focus ring in the column is clipped, and with scrollbars shown no filter label wraps.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.