- Shipped
- August 19, 2026 at 3:43 AM UTC
- Author
- Kamo
- Commit
- 646db37
PREVIEW BANNER — its CSS lived in a `<style jsx>` block inside the component. In the App Router styled-jsx does not server-render CSS for client components, so the SSR HTML shipped the banner markup (it is the first element in <body>) with class names matching no stylesheet, and the <style> tag only appeared once the JS bundle ran. Confirmed against production: zero inline <style> blocks in the served HTML, and none of the rules in the CSS bundle either. The rules move to globals.css, which is a render-blocking stylesheet in <head>, so they apply on first paint. The banner is position:fixed and its height was only reserved by an effect writing document.body.style.paddingTop, so content sat underneath it until hydration and then jumped. `body { padding-top: var(--banner-h, 38px) }` now reserves it from the first paint; the effect still overwrites the variable with the measured height, which matters where the copy wraps on small screens. FEATURE CARDS — the previous fix used a stretched ::after at z-index 1, but the card's <h3> and <p> carry `relative z-10`. They painted above the overlay and swallowed the click across most of the card, so it was still dead everywhere that mattered. Rather than escalate z-index against content that legitimately needs to sit above the hover layers, the anchor now wraps the entire card. That is the right semantics for a card that navigates as a whole and gives it one tab stop instead of two; the inner "Learn more" reverts to plain markup, since a link inside a link is invalid.