[viganogabriele]

Stacked on #212: feat/guides-visual-refinement, the last layer of the stack that starts at #199. This covers /matricole/guida, the Guida della Matricola download page. None of the earlier PRs touched it: #209 only covered /matricole.

The page is standalone by design: header and footer are hidden on it (#133, #156). So it keeps its own screen-centered layout and does not take the shared hero and section rhythm, which assume the fixed header.

What changes

• Fluid title: the title jumped from 45 px to 120 px at 1024 px, so tablets got a small title and lg:leading-33 patched the line height. It now uses typo-display-fluid-extralarge (from feat(home): refine homepage layout, proportions and card states #199): about 44 px on phones, 66 px at 768, 81 px at 1024, 106 px at 1440, 120 px from about 1728.
• Title tag: the title is now the page's h1. The page had no h1, because the header is hidden.
• Description: it uses text-balance instead of leaving "aggiornato." alone on the last line, with one size step at sm instead of at lg.
• Gutters: the shared CONTAINER gutters (24/40/64 px) replace the 48 px margins that squeezed the text at 320 px.
• Short screens: py-16 keeps the content off the edges on short landscape screens, where the centered block can be taller than the viewport.
• CardSplit on phones: in the stacked layout, the 40 px gaps between version, label and download button become 12/24 px, so the three parts read as one card. The row layout from sm is unchanged. CardSplit is used only by this page.

Content, the fallback guide, the download action and its accessible label are unchanged. No new dependencies.

Not changed

I first tried the shared Hero, but its title-sizing rule gave a 3-line, 113 px title at 640 px, so I went back to the fluid scale above.

The download button stays icon-only, as in the CardSplit design. Whether to add a visible "Scarica" label is a designer call.

Screenshots (before | after)

The backend is unreachable locally, so both sides show the built-in fallback guide (1.0, 14 luglio 2026). The Next dev overlay is hidden.

1920

Verification

• Widths: 320, 360, 402, 640, 768, 1024, 1280, 1440 and 1920 px, with no horizontal overflow. Also checked 844×390 landscape.
• Checks: pnpm check (Biome), pnpm build, pnpm typecheck and node --test tests/*.test.mjs (3/3) all pass.

Merge order

Merge after #212, in the stack order #199 → … → #212 → this. The pr-assets/guida-matricola-visual-refinement branch only holds the screenshots and can be deleted after review.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: d03cbc23-4ee0-4ab7-b649-497ccbef3de4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn