[viganogabriele]

Stacked on #205 (feat/collabora-visual-refinement); part of the page-by-page visual refinement started in #199. Merge the stack in order.

/contact (Figma desktop 5062:15713, mobile 5075:16345) was close to Figma at 1728 px but built on its own layout: a min-[1616px] breakpoint, gap-60/gap-75 between sections, an invalid max-w-[959], and centered text everywhere below 1616 px. This PR moves it onto the shared layout of the redesigned pages and fixes the problems the audit found.

What changes

Layout and rhythm

• The page uses CONTAINER, SECTION_TITLE, SECTION_LEAD, PAGE_MAIN and PAGE_HERO from components/layout/page.ts. It now has the same column, title styles and section spacing as Storia, Su di noi, Struttura, Team, Unisciti and Collabora.
• Text is left-aligned at every width, consistent with the other pages. Before, it was centered until 1616 px and left-aligned above.
• At 1440 px the page goes from 4092 to 3134 px tall, with the same content. The extra height was oversized gaps (240–300 px), not content.

Email cards (the audit's "3 + 1 instead of 4 in a row")

• The layout is a grid: four columns from xl as in Figma, 2×2 from sm, one column on phones. No card is ever alone on a row; before, flex-wrap left "Collaborazioni" orphaned at most widths.
• Cards size to their content instead of the fixed 312×264 box, and rows stay even.
• From xl the card titles step down from 24 to 20 px, so "Informazioni Generali" fits on one line and the descriptions line up across the row.
• Only the email pills (mailto:) are interactive; the cards themselves have no hover.

"Hai mille dubbi sul Poli?"

• "Trova il tuo gruppo" was a <button> with no action. It now links to /groups, the same destination as the inline link in the paragraph above it.
• Text and photo sit side by side from xl, as in Figma. Below xl they stack, with the photo capped at 768 px. At 1024 px the two-column version squeezed the title onto four lines.
• The photo keeps Figma's 2.1:1 crop at every width.

"Vuoi sviluppare un progetto insieme a noi?"

• The text column is 768 px wide, keeping lines under ~75 characters.
• The highlighted phrase uses text-blue-secondary (AA on the background) instead of text-blue-primary.

Shared changes and their reach

Change	Other pages affected
ContactCard: no fixed size, title 20 px from xl	none (only used on /contact)

Screenshots

All captures are full pages, before and after.

Desktop 1440

Desktop 1279 (last width with the stacked layout)

Tablet 1024

Mobile 390

Verification

• pnpm check, pnpm build, pnpm typecheck and node --test tests/*.test.mjs (2/2) all pass.
• I checked the page in the browser at 320, 390, 768, 1024, 1180, 1279, 1280, 1366, 1440, 1728 and 1920 px. No horizontal overflow at any width.

Trade-offs

• Phones are left-aligned. Figma's mobile frame centers the text; I kept left alignment for consistency with the other redesigned pages.
• The layout switches at 1279/1280 px, where the photo moves beside the text (the page shortens by about 490 px). It is the same xl switch used by the other pages.

Deliberately left out

• Copy is unchanged. In "Candidature" the link reads "Struttura" but points to /join; whether to change the label or the destination is a content decision.
• The footer stays as it is, because it is an open design decision.

Housekeeping

The screenshots live on the pr-assets/contact-visual-refinement branch, which 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: 316f8eb9-df62-4ddd-abba-1bec7487dce8

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