Repository navigation
chore: collect visual refinement changes for review - #217
Draft
viganogabriele wants to merge 22 commits into
Draft
viganogabriele wants to merge 22 commits into
viganogabriele wants to merge 22 commits into
Conversation
- Hero: fluid title (36→72px) back on two lines on desktop, freshman link grouped with the primary action instead of floating in the corner, shorter hero so Materials is reachable. - Materials and Projects: one container (max 1536px, 24/40/64px gutters), Figma's mirrored title/cards composition from xl, a centred stacked layout below it, and content-sized cards in min/max-bounded grids so card widths no longer halve across breakpoints. - Project cards show where they lead (domain + arrow) in the corner Figma reserves for an action; the mobile carousel peeks the next card. - Only cards with a destination react to hover; linked cards get a keyboard focus ring. "Carica" no longer links to "#", the material shortcuts open the real archive. - About us: section-sized instead of full screen, h2, grey gradient per the style guide rule (decorated background or coloured text, not both). - Shared: fluid display utilities, CardCaption footer slot, visible carousel dots. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: true
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. |
…dots - Dispense, Esami and Appunti are no longer three links to the same archive page: they describe what it holds, like the Carica card. - The hero is sized by its content, so Materials is no longer pushed below the fold on 900px-tall screens. - Inactive carousel dots use slate-500, readable on the page background. - Keyed Fragment instead of a "contents" div; comments that narrated the change are removed.
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
2 times, most recently
from
November 2, 2026 14:06
fcecb70 to
43f9e76
Compare
…rs whole
- The hero fills the screen height again and centres its content in it.
- About us goes back to its full-screen block with the blue gradient
title; it stays an h2, so the page keeps a single h1.
- The fluid display styles use a 1.2 line height: at 1.12 and 1.05 the
gradient's clip cut the descenders ("gli", "Projects").
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 14:20
43f9e76 to
3995c1d
Compare
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 14:32
3995c1d to
152a419
Compare
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
4 times, most recently
from
November 2, 2026 15:02
f175d2c to
7c880d8
Compare
* feat(storia): de-cardify the history page and align it with Figma - Hero: Figma's centred XL title (fluid) with the two anchor actions; the rotated portrait collage and floating "200+" chip are gone (the board portraits already appear under "I nostri direttivi"). - "Come è nato tutto": the two 2016/2022 cards that repeated the timeline right below are removed; the text stands alone until the archive photo Figma reserves exists. - Timeline: nodes on a line (vertical below lg, horizontal from lg) instead of four hoverable glass cards; the year is the link to its chapter. - Chapters: numeral in the margin and one continuous vertical rule across all six; diagrams drawn without containers (icon chains, 5 → ~25 → 4, before → after columns, status list) instead of stacks of glass cards. - No hover on things that are not links (board portraits, the closing statement); "L'obiettivo è raggiunto" is a statement, not a card. - Projects note, thanks list, board summary and "La storia continua" lose their glass panels; the closing gradient panel and the filled "?" pill (which read as a button) become years on a line with an open slot. - One container for every section (Figma's 1272px column, 24/40/64px gutters) and left alignment at every width for this long reading page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(storia): keep milestone links and icons with their data Each milestone carries its own anchor and icon instead of two arrays kept in step by position. The chapter numeral column is 3rem, wide enough for "02" at 36px. The closing statement is a div: a figure without a caption has no meaning here. * feat(chi-siamo): refine Su di noi layout within its current structure Improve the page where Figma v1 (implemented) and v2 agree, without switching to v2, which is still an open design decision. - Hero: drop the two CTAs (in neither version), add the "La nostra visione" label both versions use, same top spacing as /storia. - Il problema: questions become compact non-interactive chips (icon first) in a 5/7 rail, instead of three tall button-like cards. - I numeri: figures at headline size beside the icon (they were 45px and outranked the section titles). - Da dove veniamo / Come siamo organizzati and Sostieni: free columns on the background; no glass cards holding section titles, no nested panel, no 57px "5x1000" and 36px tax code. - One container, gutters and title/lead roles shared with /storia and the homepage; text left-aligned on mobile. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(chi-siamo): reuse the section title and drop narrating comments The history blocks use SECTION_TITLE like every other section on the page. The #cosa-facciamo anchor lost its only link in this PR, so it goes too. * feat(struttura): unify the organisation chart and align /about with Figma - One OrganizationDiagram shared by /about and /storia instead of two copies. Nodes follow Figma's "Nodo organigramma" (glass tile, icon above a 22px label, 1px connectors); no CardIcon className overrides. - Mobile chart follows Figma's vertical "Sezione organigramma": team leads hang off a rail, Membri Team balances the admin column. - Soci box gets Figma's "Ruolo trasversale" tag and shares the chart's column width. - Board portraits no longer lift on hover (they are not links); the mobile carousel bleeds to the edge so the next portrait peeks in. - "Come funziona" and "Trova il tuo posto": plain text-primary titles as in Figma, no icon on the definitions. - Same container as /storia and /chi-siamo; the closing title uses the grey gradient (style guide: decorated background or coloured text). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(structure): connect the mobile Team growth branch and share the portrait card - Mobile chart: the stem under Team growth now turns left and meets the rail the team leads hang from; before it stopped in mid-air. - Node takes a `fill` flag instead of six call sites cancelling its min-width and padding. - The chart's accessible label lists the teams from teamLeads. - BoardMemberCard replaces the two copies of the Direttivo portrait in /about and /storia. - Comments that narrated Figma or the change are removed; the xl overlap on /storia gets one explaining why. * fix(struttura): blue closing statement, statute heading on one line * refactor(layout): share the page container and section title classes /storia, /chi-siamo and /about each defined the same content column and section title classes. They now come from components/layout/page. The two TextOnlyLayout sections in /storia keep their md:px-10 override explicitly; layouts are unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * feat(team): calmer team sections with non-interactive specialisms - Specialisms are a plain icon + label list on hairlines instead of button-like pills: they are not links, and which of Figma's four tile variants becomes standard is still open. - Figma's alternating composition: text left, right for HR, and title and text side by side with the specialisms underneath for Events. - More space between teams on desktop, shared container and title styles, descriptions at the section-lead size, left-aligned on every width. - The closing call to action sits on the background instead of a panel with its own gradient. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(layout): use the shared tokens everywhere and share the closing CTA - Every hand-written copy of SECTION_TITLE and SECTION_LEAD now uses the token, so all section titles change size at the same breakpoint (/about's closing title switched at md instead of sm). - The homepage sections use CONTAINER like every other page, so their edges line up with the footer and the rest of the site. - ClosingCta replaces the two copies of the closing call to action on /about and /team. - TextOnlyLayout drops its px-6 md:px-36 padding, which every caller cancelled; /storia no longer needs md:px-10 to undo it. - Comments that narrated Figma or the change are removed. * fix(team): lay out Events & Partnership like the other teams * fix(team): alternate the team sections left and right by position --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 15:14
7c880d8 to
09acb0a
Compare
…join (#204) * feat(join): restore Figma's rhythm and drop the extra path cards on /join - Same container, section titles and copy style as the other refined pages; copy is left-aligned at every width instead of centred on mobile. - The three "ways in" cards (not in Figma) are gone: the intro paragraph that already lists them now links to their sections. - Section spacing grows on large screens (224px from xl, 288px from 2xl), so the 1728px title positions sit within ~6% of Figma instead of -18%. - Team cards link to their team on /team and are the only cards that react to hover; InfoCard gains an optional href for this. - The members photo uses object-cover anchored to the bottom instead of Figma's percentage offsets, so the crop survives a different photo or box. - Mobile: the admin-task carousel runs to the screen edges so the next card peeks in; membership step titles are 20px and their notes 14px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(join): one inline-link style with a visible focus ring INLINE_LINK replaces the SectionLink component, whose focus state was only a thicker underline. The membership step links get the same ring. --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 15:19
09acb0a to
069e3e6
Compare
…re one page rhythm (#205) * refactor(layout): share one vertical rhythm across the redesigned pages Storia, Su di noi, Struttura, Team and Unisciti each spaced their sections differently (144 to 288px between sections at 1728, hero titles between y=224 and y=282). They now share PAGE_MAIN and PAGE_HERO from components/layout/page.ts, measured on the Figma frames: - 180px between section blocks from xl (Figma, Su di noi and Storia), 128px on tablets, 96px on phones; the same space before the footer. - Hero title at y=286 on desktop as in every Figma frame, with ~270px of air after the hero instead of the regular gap. Unisciti and Team had stretched their gaps (224-288px) to make up for sections that are shorter than in Figma; that space now follows the shared rule instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * feat(collabora): hold the page together between the Figma frames /collabora matched Figma at 1728px but fell apart elsewhere: everything stacked below 1440px with a 719px column and half the screen empty, the contact steps stayed vertical up to 1615px, and the copy ran in 24px Poppins on tablets. - Shared container, section titles and rhythm (PAGE_MAIN/PAGE_HERO) of the other redesigned pages instead of the page's own 145px-gutter frame and per-section paddings. - Copy steps 16 → 20 → 24px (Figma size from 3xl) and stays left-aligned; the wide "Cosa possiamo fare insieme?" paragraph narrows to ~65 characters below 3xl. Line breaks forced for the 1728px frame are gone. - Figures: one row of four on laptops, two on tablets, Figma's 2×2 beside the copy from xl; cards size to their content. - Photo sections side by side from lg (Figma's 719:611 ratio, centred); stacked below with the photo as wide as the copy. - Contact steps in a row from lg with flexible cards; the e-mail step is a mailto link and the only card that reacts to hover. - InfoCard: optional titleClassName. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(collabora): use the shared section tokens and pass card title styles once - SectionTitle and sectionTextClass give way to SECTION_TITLE and SECTION_LEAD, so /collabora's titles and copy step at the same breakpoints as the other pages. - InfoCard takes titleClassName as a prop: /collabora sets it once, and /join no longer reaches into the card with [&_h3] selectors. - PAGE_HERO_TOP lets pages that need no space under the hero use the hero's top padding without cancelling the bottom one. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
2 times, most recently
from
November 2, 2026 15:28
e676a11 to
a39582e
Compare
…rd grid (#206) * feat(contact): align Contattaci with the shared layout and fix the card grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(contact): sharp group photo, honest link label, one link style - The group photo is 512x246: it was declared 721x342 and stretched up to 768px wide. It now shows at its real size at most. - "Candidature" linked to /join with the label "Struttura"; the label now matches the page it opens. - The inline links use INLINE_LINK, with a visible focus ring. * fix(contact): let the group photo fill its column, centre the Collabora block * fix(contact): centre the groups text when the photo wraps below it --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
…search (#207) * feat(contact): align Contattaci with the shared layout and fix the card grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(contact): sharp group photo, honest link label, one link style - The group photo is 512x246: it was declared 721x342 and stretched up to 768px wide. It now shows at its real size at most. - "Candidature" linked to /join with the label "Struttura"; the label now matches the page it opens. - The inline links use INLINE_LINK, with a visible focus ring. * fix(contact): let the group photo fill its column, centre the Collabora block * fix(contact): centre the groups text when the photo wraps below it * feat(projects): content-sized project cards and a working collection search - One ProjectCard for the three lists: the project's logo replaces Figma's placeholder icons (crop / upload), the title gets a per-line gradient, and the footer says what the project page offers (web app or source code). - One ProjectList: cards in a min/max-bounded auto-fill grid instead of fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the next card peeking in. - The collection search box now filters by name and description (it had no handler), with an explicit "no match" state. - Empty lists render a dashed placeholder that points to "Hai un'idea?". - "Hai un'idea?" sits as text + two reference cards side by side, with a readable lead and a real mailto link. - /projects and /projects/[id] use the shared container, titles and rhythm; the detail page drops its gradient panels and closes on the background like the other pages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(projects): build cards on CardCaption and widen the search - ProjectCard is now a CardCaption with a logo, a clamped caption and a footer, instead of a second copy of its link, hover, focus and footer logic. CardCaption gains `image`, `titleClassName` and `captionClassName` for it. - The search looks through every project on the page, novelties and deprecated ones included, matches each word separately and announces the number of results. - PeekCarousel replaces the two copies of the phone carousel (homepage and project lists). - SECTION_STACK moves to layout/page and also serves /about. - t.me links are labelled Telegram, not Web. - The project page shows no placeholder icon when there is no logo, and "Hai un'idea?" sits on the container's left edge like the other sections. - Long search queries wrap inside the empty state. * fix(projects): per-line title gradient on every caption card, search with any project CardCaption draws its title gradient per line, as ProjectCard did before it moved onto CardCaption: a wrapped title no longer fades on its second line. The search box shows whenever the page has projects to search, not only when the collection itself has some. --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
#208) * feat(contact): align Contattaci with the shared layout and fix the card grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(contact): sharp group photo, honest link label, one link style - The group photo is 512x246: it was declared 721x342 and stretched up to 768px wide. It now shows at its real size at most. - "Candidature" linked to /join with the label "Struttura"; the label now matches the page it opens. - The inline links use INLINE_LINK, with a visible focus ring. * fix(contact): let the group photo fill its column, centre the Collabora block * fix(contact): centre the groups text when the photo wraps below it * feat(projects): content-sized project cards and a working collection search - One ProjectCard for the three lists: the project's logo replaces Figma's placeholder icons (crop / upload), the title gets a per-line gradient, and the footer says what the project page offers (web app or source code). - One ProjectList: cards in a min/max-bounded auto-fill grid instead of fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the next card peeking in. - The collection search box now filters by name and description (it had no handler), with an explicit "no match" state. - Empty lists render a dashed placeholder that points to "Hai un'idea?". - "Hai un'idea?" sits as text + two reference cards side by side, with a readable lead and a real mailto link. - /projects and /projects/[id] use the shared container, titles and rhythm; the detail page drops its gradient panels and closes on the background like the other pages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(projects): build cards on CardCaption and widen the search - ProjectCard is now a CardCaption with a logo, a clamped caption and a footer, instead of a second copy of its link, hover, focus and footer logic. CardCaption gains `image`, `titleClassName` and `captionClassName` for it. - The search looks through every project on the page, novelties and deprecated ones included, matches each word separately and announces the number of results. - PeekCarousel replaces the two copies of the phone carousel (homepage and project lists). - SECTION_STACK moves to layout/page and also serves /about. - t.me links are labelled Telegram, not Web. - The project page shows no placeholder icon when there is no logo, and "Hai un'idea?" sits on the container's left edge like the other sections. - Long search queries wrap inside the empty state. * fix(projects): per-line title gradient on every caption card, search with any project CardCaption draws its title gradient per line, as ProjectCard did before it moved onto CardCaption: a wrapped title no longer fades on its second line. The search box shows whenever the page has projects to search, not only when the collection itself has some. * feat(groups): fix the results layout and give every link a hover state - Results and extra pages: one ~1024px column (Figma's list width) with a shared header component (back, centred title, close) laid out on a three-column grid, so long course names no longer run under the buttons on phones. - The general groups (site, school, level, course) were squeezed four per row with their names overlapping the platform buttons; they now sit one per row, two per row from lg, as in Figma. - Group rows: name and buttons share a row; when the card is narrower than 20rem the name gets its own line instead of breaking word by word. The `stacked` variant is gone. - Hover only where there is a link: the platform buttons darken, the report flags darken, course rows lighten and nudge their chevron, the landing cards get the identity hover. Keyboard focus rings on all of them. - Wizard: no wasted 16px inset on phones, where the glass panel is invisible, so the step labels fit at 320px. - Landing title uses the fluid display size and is the page's h1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(groups): roomier group actions, complete heading outline, no 500 offline - The four actions in a group row are 6px apart on phones too: 2px left the WhatsApp link and its report flag too easy to mistake. - The general groups get a visually hidden heading, so the outline no longer jumps from h1 to h3. - getVisibleGroups returns an empty list when the backend fails, like the other queries, so /groups/extra shows its empty state instead of a 500. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
… responsive sizes (#209) * feat(contact): align Contattaci with the shared layout and fix the card grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(contact): sharp group photo, honest link label, one link style - The group photo is 512x246: it was declared 721x342 and stretched up to 768px wide. It now shows at its real size at most. - "Candidature" linked to /join with the label "Struttura"; the label now matches the page it opens. - The inline links use INLINE_LINK, with a visible focus ring. * fix(contact): let the group photo fill its column, centre the Collabora block * fix(contact): centre the groups text when the photo wraps below it * feat(projects): content-sized project cards and a working collection search - One ProjectCard for the three lists: the project's logo replaces Figma's placeholder icons (crop / upload), the title gets a per-line gradient, and the footer says what the project page offers (web app or source code). - One ProjectList: cards in a min/max-bounded auto-fill grid instead of fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the next card peeking in. - The collection search box now filters by name and description (it had no handler), with an explicit "no match" state. - Empty lists render a dashed placeholder that points to "Hai un'idea?". - "Hai un'idea?" sits as text + two reference cards side by side, with a readable lead and a real mailto link. - /projects and /projects/[id] use the shared container, titles and rhythm; the detail page drops its gradient panels and closes on the background like the other pages. * refactor(projects): build cards on CardCaption and widen the search - ProjectCard is now a CardCaption with a logo, a clamped caption and a footer, instead of a second copy of its link, hover, focus and footer logic. CardCaption gains `image`, `titleClassName` and `captionClassName` for it. - The search looks through every project on the page, novelties and deprecated ones included, matches each word separately and announces the number of results. - PeekCarousel replaces the two copies of the phone carousel (homepage and project lists). - SECTION_STACK moves to layout/page and also serves /about. - t.me links are labelled Telegram, not Web. - The project page shows no placeholder icon when there is no logo, and "Hai un'idea?" sits on the container's left edge like the other sections. - Long search queries wrap inside the empty state. * fix(projects): per-line title gradient on every caption card, search with any project CardCaption draws its title gradient per line, as ProjectCard did before it moved onto CardCaption: a wrapped title no longer fades on its second line. The search box shows whenever the page has projects to search, not only when the collection itself has some. * feat(groups): fix the results layout and give every link a hover state - Results and extra pages: one ~1024px column (Figma's list width) with a shared header component (back, centred title, close) laid out on a three-column grid, so long course names no longer run under the buttons on phones. - The general groups (site, school, level, course) were squeezed four per row with their names overlapping the platform buttons; they now sit one per row, two per row from lg, as in Figma. - Group rows: name and buttons share a row; when the card is narrower than 20rem the name gets its own line instead of breaking word by word. The `stacked` variant is gone. - Hover only where there is a link: the platform buttons darken, the report flags darken, course rows lighten and nudge their chevron, the landing cards get the identity hover. Keyboard focus rings on all of them. - Wizard: no wasted 16px inset on phones, where the glass panel is invisible, so the step labels fit at 320px. - Landing title uses the fluid display size and is the page's h1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(groups): roomier group actions, complete heading outline, no 500 offline - The four actions in a group row are 6px apart on phones too: 2px left the WhatsApp link and its report flag too easy to mistake. - The general groups get a visually hidden heading, so the outline no longer jumps from h1 to h3. - getVisibleGroups returns an empty list when the backend fails, like the other queries, so /groups/extra shows its empty state instead of a 500. * fix(card-icon): generate the responsive size classes CardIcon's responsive `size` ({ base, sm, md, lg }) builds "sm:…" classes at runtime, so Tailwind never generated the ones not written literally elsewhere (e.g. sm:px-8 for the homepage material shortcuts). Generate every prefixed variant of the size maps with @source inline(), and add a test that fails if classes.ts gains a class missing from that list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * feat(matricole): align Matricole with the shared layout and fix its grids - Hero, sections and FAQ use the shared container, hero offset, rhythm and section titles; the featured resources close the hero. - "Guide e Utility" is a section title (it was 22px on phones, smaller than the Telegram Hub card title) and sits closer to its own content. - Large resource cards: descriptions capped at 448px instead of 240px. - The large guide sits beside the 2x2 small guides only from xl, on a 5/7 split repeated by Materiali / Tech Tools, so "Mappa Microonde" no longer wraps; the four small guides use 20px titles. - Telegram Hub: two columns until xl (four columns clipped "Mercatino" at 1024px); the group has 24px padding on phones instead of 48px, so its links span the width as in the Figma mobile frame. - Resources with a link react to hover, the others don't. - Resources hidden on phones stay hidden: that's the Figma mobile frame, an open design decision. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(matricole): use the responsive card sizes and fill the tablet rows - The school tiles of the groups wizard use the sm size on phones, now that responsive CardIcon sizes are generated: at 320px they were about 400px tall each. - Materiali and Tech Tools sit side by side from lg: below xl the full-width card left half its width empty. - CardIcon's hover defaults to whether the card has an href, so callers no longer repeat Boolean(href). - The intro uses PAGE_HERO_TOP instead of cancelling PAGE_HERO's bottom padding at every breakpoint. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
* feat(contact): align Contattaci with the shared layout and fix the card grid
- Page uses the shared container, title/lead styles and vertical rhythm of
the other redesigned pages instead of ad-hoc paddings and a 1616px
breakpoint.
- Email cards: four in a row from xl as in Figma, 2×2 below, one column on
phones, so a card is never left alone on a row; cards size to content
instead of the fixed 264×312 box.
- "Trova il tuo gruppo" had no action: it now links to /groups, like the
inline link in the same paragraph.
- Group photo keeps Figma's crop next to the text from xl and is capped
when stacked; text is left-aligned at every width.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* fix(contact): sharp group photo, honest link label, one link style
- The group photo is 512x246: it was declared 721x342 and stretched up to
768px wide. It now shows at its real size at most.
- "Candidature" linked to /join with the label "Struttura"; the label now
matches the page it opens.
- The inline links use INLINE_LINK, with a visible focus ring.
* fix(contact): let the group photo fill its column, centre the Collabora block
* fix(contact): centre the groups text when the photo wraps below it
* feat(projects): content-sized project cards and a working collection search
- One ProjectCard for the three lists: the project's logo replaces Figma's
placeholder icons (crop / upload), the title gets a per-line gradient, and
the footer says what the project page offers (web app or source code).
- One ProjectList: cards in a min/max-bounded auto-fill grid instead of
fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the
next card peeking in.
- The collection search box now filters by name and description (it had no
handler), with an explicit "no match" state.
- Empty lists render a dashed placeholder that points to "Hai un'idea?".
- "Hai un'idea?" sits as text + two reference cards side by side, with a
readable lead and a real mailto link.
- /projects and /projects/[id] use the shared container, titles and
rhythm; the detail page drops its gradient panels and closes on the
background like the other pages.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* refactor(projects): build cards on CardCaption and widen the search
- ProjectCard is now a CardCaption with a logo, a clamped caption and
a footer, instead of a second copy of its link, hover, focus and
footer logic. CardCaption gains `image`, `titleClassName` and
`captionClassName` for it.
- The search looks through every project on the page, novelties and
deprecated ones included, matches each word separately and announces
the number of results.
- PeekCarousel replaces the two copies of the phone carousel (homepage
and project lists).
- SECTION_STACK moves to layout/page and also serves /about.
- t.me links are labelled Telegram, not Web.
- The project page shows no placeholder icon when there is no logo, and
"Hai un'idea?" sits on the container's left edge like the other
sections.
- Long search queries wrap inside the empty state.
* fix(projects): per-line title gradient on every caption card, search with any project
CardCaption draws its title gradient per line, as ProjectCard did before
it moved onto CardCaption: a wrapped title no longer fades on its second
line. The search box shows whenever the page has projects to search,
not only when the collection itself has some.
* feat(groups): fix the results layout and give every link a hover state
- Results and extra pages: one ~1024px column (Figma's list width) with a
shared header component (back, centred title, close) laid out on a
three-column grid, so long course names no longer run under the buttons
on phones.
- The general groups (site, school, level, course) were squeezed four per
row with their names overlapping the platform buttons; they now sit one
per row, two per row from lg, as in Figma.
- Group rows: name and buttons share a row; when the card is narrower than
20rem the name gets its own line instead of breaking word by word. The
`stacked` variant is gone.
- Hover only where there is a link: the platform buttons darken, the report
flags darken, course rows lighten and nudge their chevron, the landing
cards get the identity hover. Keyboard focus rings on all of them.
- Wizard: no wasted 16px inset on phones, where the glass panel is
invisible, so the step labels fit at 320px.
- Landing title uses the fluid display size and is the page's h1.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* fix(groups): roomier group actions, complete heading outline, no 500 offline
- The four actions in a group row are 6px apart on phones too: 2px left
the WhatsApp link and its report flag too easy to mistake.
- The general groups get a visually hidden heading, so the outline no
longer jumps from h1 to h3.
- getVisibleGroups returns an empty list when the backend fails, like
the other queries, so /groups/extra shows its empty state instead of
a 500.
* fix(card-icon): generate the responsive size classes
CardIcon's responsive `size` ({ base, sm, md, lg }) builds "sm:…" classes at
runtime, so Tailwind never generated the ones not written literally elsewhere
(e.g. sm:px-8 for the homepage material shortcuts). Generate every prefixed
variant of the size maps with @source inline(), and add a test that fails if
classes.ts gains a class missing from that list.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* feat(matricole): align Matricole with the shared layout and fix its grids
- Hero, sections and FAQ use the shared container, hero offset, rhythm and
section titles; the featured resources close the hero.
- "Guide e Utility" is a section title (it was 22px on phones, smaller than
the Telegram Hub card title) and sits closer to its own content.
- Large resource cards: descriptions capped at 448px instead of 240px.
- The large guide sits beside the 2x2 small guides only from xl, on a 5/7
split repeated by Materiali / Tech Tools, so "Mappa Microonde" no longer
wraps; the four small guides use 20px titles.
- Telegram Hub: two columns until xl (four columns clipped "Mercatino" at
1024px); the group has 24px padding on phones instead of 48px, so its
links span the width as in the Figma mobile frame.
- Resources with a link react to hover, the others don't.
- Resources hidden on phones stay hidden: that's the Figma mobile frame,
an open design decision.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* fix(matricole): use the responsive card sizes and fill the tablet rows
- The school tiles of the groups wizard use the sm size on phones, now
that responsive CardIcon sizes are generated: at 320px they were about
400px tall each.
- Materiali and Tech Tools sit side by side from lg: below xl the
full-width card left half its width empty.
- CardIcon's hover defaults to whether the card has an href, so callers
no longer repeat Boolean(href).
- The intro uses PAGE_HERO_TOP instead of cancelling PAGE_HERO's bottom
padding at every breakpoint.
* feat(associations): honest logo fallback and a steadier accordion
- Associations without a logo show their initials instead of ESN's logo,
which came from the Figma example; the unused placeholder asset is gone.
- Page on the shared container, hero and rhythm; the list keeps Figma's
1200px column.
- Accordion: constant padding open or closed (the name no longer jumps),
description aligned with the name from md and capped at a readable
measure, names at 20/22/28px instead of 22/45px, smaller logos on phones.
- The clickable header brightens on hover and rings the item on keyboard
focus; social links get accessible names, 40px targets and rel=noopener;
"Segui l'associazione" drops its blue gradient and only shows with links.
- Empty or unreachable list: a dashed placeholder like /projects.
- Shared Hero: the title size is capped so its longest word fits the
content width; "Associazioni" and "Contattaci" overflowed phones and
tablets. Titles that already fit keep the Figma sizes.
- /about association bodies keep their look on the new accordion padding.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
* refactor(hero): a description prop instead of reaching into Hero
This PR sets the title size on Hero's inner span, so /storia's
[&_h2]:typo-display-fluid-extralarge override stopped having any effect.
It is removed, and the description width /storia needs goes through a
new descriptionClassName prop. Hero's comments are cut to the reason
behind the size cap.
---------
Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
…211) * feat(contact): align Contattaci with the shared layout and fix the card grid - Page uses the shared container, title/lead styles and vertical rhythm of the other redesigned pages instead of ad-hoc paddings and a 1616px breakpoint. - Email cards: four in a row from xl as in Figma, 2×2 below, one column on phones, so a card is never left alone on a row; cards size to content instead of the fixed 264×312 box. - "Trova il tuo gruppo" had no action: it now links to /groups, like the inline link in the same paragraph. - Group photo keeps Figma's crop next to the text from xl and is capped when stacked; text is left-aligned at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(contact): sharp group photo, honest link label, one link style - The group photo is 512x246: it was declared 721x342 and stretched up to 768px wide. It now shows at its real size at most. - "Candidature" linked to /join with the label "Struttura"; the label now matches the page it opens. - The inline links use INLINE_LINK, with a visible focus ring. * fix(contact): let the group photo fill its column, centre the Collabora block * fix(contact): centre the groups text when the photo wraps below it * feat(projects): content-sized project cards and a working collection search - One ProjectCard for the three lists: the project's logo replaces Figma's placeholder icons (crop / upload), the title gets a per-line gradient, and the footer says what the project page offers (web app or source code). - One ProjectList: cards in a min/max-bounded auto-fill grid instead of fixed 312x264 boxes at fixed breakpoints; on phones a carousel with the next card peeking in. - The collection search box now filters by name and description (it had no handler), with an explicit "no match" state. - Empty lists render a dashed placeholder that points to "Hai un'idea?". - "Hai un'idea?" sits as text + two reference cards side by side, with a readable lead and a real mailto link. - /projects and /projects/[id] use the shared container, titles and rhythm; the detail page drops its gradient panels and closes on the background like the other pages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(projects): build cards on CardCaption and widen the search - ProjectCard is now a CardCaption with a logo, a clamped caption and a footer, instead of a second copy of its link, hover, focus and footer logic. CardCaption gains `image`, `titleClassName` and `captionClassName` for it. - The search looks through every project on the page, novelties and deprecated ones included, matches each word separately and announces the number of results. - PeekCarousel replaces the two copies of the phone carousel (homepage and project lists). - SECTION_STACK moves to layout/page and also serves /about. - t.me links are labelled Telegram, not Web. - The project page shows no placeholder icon when there is no logo, and "Hai un'idea?" sits on the container's left edge like the other sections. - Long search queries wrap inside the empty state. * fix(projects): per-line title gradient on every caption card, search with any project CardCaption draws its title gradient per line, as ProjectCard did before it moved onto CardCaption: a wrapped title no longer fades on its second line. The search box shows whenever the page has projects to search, not only when the collection itself has some. * feat(groups): fix the results layout and give every link a hover state - Results and extra pages: one ~1024px column (Figma's list width) with a shared header component (back, centred title, close) laid out on a three-column grid, so long course names no longer run under the buttons on phones. - The general groups (site, school, level, course) were squeezed four per row with their names overlapping the platform buttons; they now sit one per row, two per row from lg, as in Figma. - Group rows: name and buttons share a row; when the card is narrower than 20rem the name gets its own line instead of breaking word by word. The `stacked` variant is gone. - Hover only where there is a link: the platform buttons darken, the report flags darken, course rows lighten and nudge their chevron, the landing cards get the identity hover. Keyboard focus rings on all of them. - Wizard: no wasted 16px inset on phones, where the glass panel is invisible, so the step labels fit at 320px. - Landing title uses the fluid display size and is the page's h1. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(groups): roomier group actions, complete heading outline, no 500 offline - The four actions in a group row are 6px apart on phones too: 2px left the WhatsApp link and its report flag too easy to mistake. - The general groups get a visually hidden heading, so the outline no longer jumps from h1 to h3. - getVisibleGroups returns an empty list when the backend fails, like the other queries, so /groups/extra shows its empty state instead of a 500. * fix(card-icon): generate the responsive size classes CardIcon's responsive `size` ({ base, sm, md, lg }) builds "sm:…" classes at runtime, so Tailwind never generated the ones not written literally elsewhere (e.g. sm:px-8 for the homepage material shortcuts). Generate every prefixed variant of the size maps with @source inline(), and add a test that fails if classes.ts gains a class missing from that list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * feat(matricole): align Matricole with the shared layout and fix its grids - Hero, sections and FAQ use the shared container, hero offset, rhythm and section titles; the featured resources close the hero. - "Guide e Utility" is a section title (it was 22px on phones, smaller than the Telegram Hub card title) and sits closer to its own content. - Large resource cards: descriptions capped at 448px instead of 240px. - The large guide sits beside the 2x2 small guides only from xl, on a 5/7 split repeated by Materiali / Tech Tools, so "Mappa Microonde" no longer wraps; the four small guides use 20px titles. - Telegram Hub: two columns until xl (four columns clipped "Mercatino" at 1024px); the group has 24px padding on phones instead of 48px, so its links span the width as in the Figma mobile frame. - Resources with a link react to hover, the others don't. - Resources hidden on phones stay hidden: that's the Figma mobile frame, an open design decision. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(matricole): use the responsive card sizes and fill the tablet rows - The school tiles of the groups wizard use the sm size on phones, now that responsive CardIcon sizes are generated: at 320px they were about 400px tall each. - Materiali and Tech Tools sit side by side from lg: below xl the full-width card left half its width empty. - CardIcon's hover defaults to whether the card has an href, so callers no longer repeat Boolean(href). - The intro uses PAGE_HERO_TOP instead of cancelling PAGE_HERO's bottom padding at every breakpoint. * feat(associations): honest logo fallback and a steadier accordion - Associations without a logo show their initials instead of ESN's logo, which came from the Figma example; the unused placeholder asset is gone. - Page on the shared container, hero and rhythm; the list keeps Figma's 1200px column. - Accordion: constant padding open or closed (the name no longer jumps), description aligned with the name from md and capped at a readable measure, names at 20/22/28px instead of 22/45px, smaller logos on phones. - The clickable header brightens on hover and rings the item on keyboard focus; social links get accessible names, 40px targets and rel=noopener; "Segui l'associazione" drops its blue gradient and only shows with links. - Empty or unreachable list: a dashed placeholder like /projects. - Shared Hero: the title size is capped so its longest word fits the content width; "Associazioni" and "Contattaci" overflowed phones and tablets. Titles that already fit keep the Figma sizes. - /about association bodies keep their look on the new accordion padding. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(hero): a description prop instead of reaching into Hero This PR sets the title size on Hero's inner span, so /storia's [&_h2]:typo-display-fluid-extralarge override stopped having any effect. It is removed, and the description width /storia needs goes through a new descriptionClassName prop. Hero's comments are cut to the reason behind the size cap. * feat(faqs): open on a non-empty category and tighten the FAQ layout - Default to the first category that has answers: live data opens on "Generale", which is empty, so the page showed a blank band. - Empty categories show an intentional dashed empty state instead of nothing; answers keep the editors' line breaks. - Shared container and hero rhythm; the tabs follow the hero closely (they are its content, not a new section) and the list column is Figma's 900px; the callout sits 64/96px under the list instead of 272/316px. - Phones: the tab strip bleeds to the screen edges, the callout title is readable (14px instead of 11px). - Accordion (shared with /matricole and /guides): answers capped at ~70 characters per line, only the header reacts to hover, 2px focus ring. - Tabs (shared with /storia): hover tint on inactive tabs, focus ring. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(faqs): visible focus on the active tab, no tab strip for one category - The active tab's background was an opaque span drawn over the trigger, so it covered the inset focus ring exactly when Radix focuses that tab. The trigger now takes the background itself. - With a single category the tab strip is not shown: it was a full-bleed band holding one pill. - The page uses PAGE_HERO_TOP, the FAQ column is one wrapper instead of two, and ItemTitle's default size is the one its only caller needed. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 16:03
a39582e to
c5eb343
Compare
…ders (#212) * feat(guides): align the guides hub and pages, drop the lorem placeholders - /guides uses the shared container, rhythm and Hero, with Figma's subtitle ("Una raccolta di guide realizzate dai membri del Network"); the two entry cards sit in an equal-height grid and react to hover, since they are links. - /guides/generali and the course result page drop the lorem ipsum guides that were served in production and show their existing empty state instead. GENERAL_GUIDES / COURSE_GUIDES are empty until the guide model and content are decided. - The back/close header and column of the wizard's end pages move from groups/page-header to layout/flow-header (FlowHeader, FLOW_MAIN), shared by groups and guides; the top padding on phones grows from 144 to 176px so the title no longer sits 16px under the fixed header. - EMPTY_STATE (the dashed placeholder) moves to layout/page and is used by projects, associations, faqs, groups and guides. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(guides): site gutters on wizard pages, shared empty state for courses - FLOW_COLUMN builds on CONTAINER, so wizard result pages get the 64px gutter from lg like every other page instead of 40px. - The course step's empty list uses EMPTY_STATE, like the other lists this PR moved to it. - Comments trimmed; project-list imports sorted. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 16:05
c5eb343 to
92f4d31
Compare
… layout (#213) * feat(matricole): align the Guida della Matricola page with the shared layout The standalone download page kept its own title steps (45px up to 1023px, then 120px) and 48px side margins. It now uses the fluid display scale and the shared container gutters, stays centered with padding for short screens, and its title is the page's h1 (header and footer are hidden here). CardSplit, used only by this page, tightens its stacked phone layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(matricole): the Guida della Matricola title uses Hero It was the third page-title implementation, with its own gradient and sizes. Hero already fits long words to the width. * fix(matricole): restore the Guida della Matricola's own title Hero wrapped the title onto three lines at 320px and pushed the download button below a 320x568 screen. This standalone page has no header, so it keeps its fluid title; a comment now says why. --------- Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
…#214) * feat(matricole): align the Guida della Matricola page with the shared layout The standalone download page kept its own title steps (45px up to 1023px, then 120px) and 48px side margins. It now uses the fluid display scale and the shared container gutters, stays centered with padding for short screens, and its title is the page's h1 (header and footer are hidden here). CardSplit, used only by this page, tightens its stacked phone layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * refactor(matricole): the Guida della Matricola title uses Hero It was the third page-title implementation, with its own gradient and sizes. Hero already fits long words to the width. * fix(matricole): restore the Guida della Matricola's own title Hero wrapped the title onto three lines at 320px and pushed the download button below a 320x568 screen. This standalone page has no header, so it keeps its fluid title; a comment now says why. * feat(header): readable glass menus, mobile menu fixes and a single h1 The header sat inside the page wrapper (isolate + overflow-clip), where Chromium skipped its backdrop: the glass never blurred, so the page titles read sharp through the open menus. It now renders outside the wrapper and the open panels use a stronger blur, keeping the glass. The mobile menu closes on navigation and on Escape, exposes aria-expanded and uses 40px rows without the blue gradient labels. The current page and its section are marked, "Appunti" gets the external arrow, and the language and theme buttons, which only logged to the console, are removed. The logo is no longer an h1: the page Hero is, so every route has exactly one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(header): close the mobile menu on every link and keep focus in sight - The menu closes when any link in it is followed, the current page and the logo included, when tapping outside it and when focus leaves it. Before, Back reopened it and the current-page link left it open. - Escape returns focus to the toggle instead of dropping it on <body>. - Menu links get the site's focus ring: the active item was already underlined, so focusing it changed nothing. The desktop dropdown links get an outline for the same reason. - The open menu's scroll no longer moves the page underneath. - Glass forwards a ref. --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: Bianca Roberta Ianosel <ianoselbiancaroberta02@gmail.com>
The footer was the official component's bare layout: a 57px blue gradient title, 24px icon targets, two link columns ~320px apart and three "#" policy links. It now follows "footer-francesca" (593:2123), the version used across the Figma pages: "Keep in touch!" with the social pill, a site map with the association's documents and the 5x1000 card, the contact addresses, the join and report-a-bug calls to action, and a hairline legal row. Only existing content is used: no TikTok, no language selector, and the Statuto and Regolamento interno in place of policy pages that don't exist. The Su di noi support section gets an anchor for the 5x1000 card. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The footer content now sits in one rounded glass panel inside the page gutters, closing the page as a single object like the header pill opens it. The 5x1000 card becomes a lighter tile instead of glass on glass and stacks where its column is narrow; the social targets go to 36px below `sm` so the row stays whole at 320px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…t exists - The document links can wrap again: their nowrap set a 276px minimum that pushed the grid and the 5x1000 card out of the panel up to 356px. - The social pill is a light surface instead of glass on the glass panel, and CardMultipleIcons is styled for its only use rather than overridden from outside with [&>div] selectors. - The two calls to action align at the bottom when one heading wraps. - The title uses SECTION_TITLE; the statute, regulations and materials URLs come from their existing constants. - English labels carry lang="en"; the copyright years use an en dash. - Comments that narrated Figma or the change are removed.
The 404 message was 32px with no side padding, so it ran edge to edge at 320px: it gets the page gutters, a smaller size on phones and balanced lines. `<html lang>` was "en" on an Italian site, so screen readers and hyphenation used English rules; it is now "it". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
py-40 made the page 764px tall at 320x568 and pushed the button below the fold. The top padding still clears the fixed header.
BIA3IA
force-pushed
the
feat/not-found-visual-refinement
branch
from
November 2, 2026 16:19
92f4d31 to
17968c0
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This draft provides a single overview of the complete visual refinement stack against
main. It is a review index and an integrated diff; the individual pull requests remain the place to review each change, screenshots, trade-offs and open decisions.Do not merge this overview directly. Review the individual pull requests and decide which changes to accept. Each targets the preceding branch, so their diffs are incremental. If accepted as currently structured, merge them in order from #199 to #216; GitHub will retarget the next PR as its base is merged.
Review checklist
How to review
Use the individual PRs for focused diffs and their recorded verification. This PR shows the combined result and overlaps with all of them. The stack has shared components and dependencies; changes to an earlier PR can affect later ones and should be checked through the stack. Draft status signals that the work is still under review.