/* ========================================================================== PROGETTI GRID — Figma homepage 177:2448, y=2914–3613 Kicker → mouse-slideable category tabs → 3-up card grid (one panel per tab, swapped on click) → "Scopri di più" view-all link. ========================================================================== */ .progetti { padding-bottom: var(--space-120); /* gap to the next section: 3733-3613 = 120 exact */ } .progetti__kicker { margin: 0 0 var(--space-40); } /* measured: kicker bottom (2952) → subhead top (2989) = 37 */ .progetti__subhead { margin: 0 0 24px; } /* measured: subhead bottom (3073) → tabs top (3095) */ /* --- Tabs ----------------------------------------------------------------- Figma only draws the five tabs sitting flush across the 1280 container; there's no scroll affordance in the design because at 1440 they exactly fill it. Below that (and with longer real category names) they don't fit, so the track scrolls — mouse-drag added on top of native touch/trackpad scroll per the brief. */ .progetti-tabs { margin-bottom: 32px; } /* measured: chip bottom (3126) → grid top (3158) */ .progetti-tabs__track { display: flex; gap: 22px; overflow-x: auto; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; } .progetti-tabs__track::-webkit-scrollbar { display: none; } .progetti-tabs__track.is-dragging { cursor: grabbing; user-select: none; } /* The chip is 29px tall, not 44. All five boxes (177:2449–2453) are drawn h-29 with the 18px SemiBold label centred inside — the 34px line-height is the label's own leading in Figma, which is taller than the box it sits in and must not become the chip's height. Height minus the two borders IS the line box, which is what centres the label: cap top lands 8 below the chip top, exactly where Figma draws it. Padding is 12, not 20: across the five drawn chips the box is 26–29 wider than the label's ink (HEALTHCARE & HOSPITALITY is the one outlier at 19), so ~27 split two ways, less ~1.2 of side bearing each side. */ .progetti-tab { flex: none; height: 29px; padding: 2px 12px 0; border: 1px solid var(--c-border-light); border-radius: var(--radius-frame); font-weight: 600; font-size: 18px; line-height: 25px; text-transform: uppercase; /* the file sets these labels in caps (177:2498–2502) */ white-space: nowrap; color: var(--c-text-muted); background: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .progetti-tab.is-active, .progetti-tab:hover { border-color: var(--c-accent); color: var(--c-accent); } /* --- Card -------------------------------------------------------------- */ .project-card { display: block; border: 1px solid var(--c-border-light); border-radius: var(--radius-frame); overflow: hidden; background: var(--c-surface); transition: border-color var(--dur) var(--ease); } .project-card:hover { border-color: var(--c-accent); } .project-card__media { display: block; } .project-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 413 / 287; /* Figma card image, 177:2538/2539/2540 */ object-fit: cover; } /* The title and the arrow are NOT one line. Figma puts the title on its own line under the photo and the arrow on the next one, pinned right — measured on the 413x380 card at 177:2530: photo bottom 287, title box 310 (23 below it, 17/22 so it ends at 332), arrow band 342-353, card bottom 380. That is 23 / 22 / 10 / 11 / 27, and it is what makes the card 380 rather than 351. */ .project-card__row { position: relative; min-height: 93px; /* 380 card − 287 photo, i.e. the one-line case */ padding: 23px 30px 27px 24px; /* right is wider than left: the arrow starts at x=357 */ } .project-card__title { margin: 0; } /* Anchored to the bottom-right rather than placed after the title, because that is the one description that holds in both drawn cases: on its own line under a one-line title, and level with the second line when the title wraps (79:807 on the Residenziale archive). Measured from the bottom either way. BOTH OFFSETS ARE FIGMA'S LESS THE 1px BORDER, since `right`/`bottom` resolve against the row's padding box and the drawing has no border to inset: x ink runs 357–382 in a 413 card → 31 from the outer edge → 30 here. y ink centres on 348 in a 380 card → 32 up → 31 here, less the 5.5 that centres an 11px box on its own middle → 25.5, and 26 is the half that lands the painted rows on Figma's 342. */ .project-card__arrow { position: absolute; right: 30px; bottom: 26px; color: var(--c-accent); } /* The card draws a 25px shaft where the sitewide glyph is 21 — identical head, identical 11.0459 height, longer line only ("Arrow 15" vs "Arrow 3"), so it needs the longer FILE: .icon-arrow masks at `contain`, and a wider box would just scale the head up with it. Third length in the set, after the 21.75 arrow-right.svg and the 39.75 arrow-right-long.svg the lavora cards use — hence the explicit name rather than another adjective. TWO CLASSES ON PURPOSE. style.css is printed AFTER the section stylesheets on the front end, so at 0,1,0 this loses to .icon-arrow's `mask` shorthand and the card silently falls back to the short arrow — measured, not theorised. .lavora-cards .icon-arrow--long is scoped for the same reason. */ .project-card .project-card__arrow { width: 25px; -webkit-mask-image: url("../../icons/arrow-right-25.svg"); mask-image: url("../../icons/arrow-right-25.svg"); } .progetti__viewall { margin-top: 53px; } /* measured: grid bottom (3538) → link top (3591) */ /* --- SHM 08/09/2026 - BugSmash #28 (richiesta cliente) --------------------- "a capo con 'Consiglio', come su Figma. concetto e' che il testo non superi la freccia": il titolo della card occupava tutta la larghezza e la seconda riga passava sotto la freccia (assoluta a destra). Con 56px di padding a destra il testo chiude ~30px prima della freccia (colonna testo 300px nella card da 412, come nel mockup) e "Fondazione Nostra Signora del Buon / Consiglio - Ospedale Tirana" va a capo come su Figma. Vale per tutte le card progetto (archivi, servizi, home). */ .project-card__title { padding-right: 56px; }