/* ========================================================================== PROGETTO DETAIL — a single project. Figma Quinto Cassina De' Pecchi 81:1001, y=183–4915. Written as the template for every project detail page (only this one is drawn — see "Known design gap"), so nothing here is Quinto-specific. Sits under the same persistent .subnav--progetti as the archive, then the full 686px hero (not the archive's short one) carrying a translucent red name plate, the usual breadcrumb/kicker/intro opener, an "INTERVENTO" two-column block, a two-column photo gallery, and a prev/next pair. No CTA band: the footer starts at 4915 and ends at 5455, leaving 596px of empty frame below it — same trailing space as the Progetti hub. ========================================================================== */ /* --- Hero name plate (174:3659 + 174:3660) -------------------------------- Translucent red plate bleeding off the left edge: a shrink-to-fit box pulled left of the container and padded back so its text lands on the container's content edge. Figma draws the plate at x=-22 against a container starting at 80 (rect 174:3659 is x=-22 y=630 494x147), i.e. it runs off the left edge of the frame and the left radius is never seen. THE OFFSET MUST BE VIEWPORT-RELATIVE, NOT A FIXED -102px. -102 is the right number at exactly 1440 and nowhere else: above that width --pad-x drops to 0 and the container stops growing at its 1280 max-width while the window keeps going, so the container's content edge marches right and a fixed pull can no longer reach the screen edge. The plate detached and drifted inward — 58px in at 1600, 218px at 1920, 538px at 2560 — leaving a visible gap and a rounded left corner where the design has the plate running off the page. `50%` is half the container's CONTENT width, which is a stable 640px at every width (the container takes its max-width; it is not shrink-to-fit despite being a flex item, verified in the browser). `50vw` is half the viewport. So `50% - 50vw` is exactly the distance from the container's content edge to the viewport edge, and the extra 22px is Figma's overhang. The two values are negatives of each other on purpose: text x lands on `contentEdge + marginLeft + paddingLeft`, so the text sits on the container edge at ANY width by construction, and the calc only governs how far the (invisible, off-screen) left end bleeds. At 1440 these evaluate to exactly -102 / 102, so that width renders byte-for-byte as before. */ .progetto-hero__plate { display: inline-block; margin-left: calc(50% - 50vw - 22px); padding: 25px 41px 20px calc(50vw - 50% + 22px); background: rgba(175, 30, 45, .7); border-radius: var(--radius-frame); color: var(--c-text-invert); } /* Two lines at one leading but two sizes — the company name sits smaller than the place. Not a token pairing; measured off 174:3660. */ .progetto-hero__client, .progetto-hero__place { margin: 0; font-weight: 500; line-height: 51px; } .progetto-hero__client { font-size: 35px; } .progetto-hero__place { font-size: 43px; } /* The plate is bottom-anchored 92px off the hero floor rather than the caption default's 108. */ .progetto-hero .page-hero__caption { padding-bottom: 92px; } /* --- Opener --------------------------------------------------------------- */ .progetto-detail { /* No padding-top: the 64px hero→crumb and the 64px crumb→kicker are both on .page-breadcrumb--mobile-40 in common/page-hero.css now, the crumb having become its own band above this section. __kicker has no top margin, which with no padding-top here is what stops it collapsing out. */ padding-bottom: 152px; /* measured: prev/next bottom (4763) → footer top (4915) */ } .progetto-detail__kicker { margin: 0 0 17px; } /* kicker bottom (1069) → intro top (1086) */ /* Same paragraph, same measure and same five-line wrap as the archive page's intro — Figma reuses the copy verbatim. See the intro note in FIGMA-MAP §6 for why the cap is 860 rather than the 848 box Figma reports. */ .progetto-detail__intro { max-width: 860px; margin: 0 0 81px; /* measured: intro bottom (1231) → INTERVENTO top (1312) */ color: var(--c-text); } /* --- INTERVENTO block ------------------------------------------------------ Section heading over a .grid-2 split: a large lead sentence left, a list of labelled facts right. */ .progetto-detail .section-heading { margin-bottom: 24px; } /* heading box bottom (1356) → description top (1380) */ /* Figma's node box reads 521 wide but the text renders 382 — four lines. 420 is where Chrome reproduces that wrap; the full 628px column would pull it onto three. */ .progetto-detail__lead { max-width: 420px; margin: 0; } /* Fact pairs: value over label, 88px apart. The label's own box overlaps the value's 50px line box by 8px in Figma (42px between their tops, not 50), so it is pulled up rather than left to sit under a full line box. The list as a whole also starts 12px above the lead sentence beside it (1368 vs 1380): the two columns are optically aligned on their glyphs, not on a shared box top, because their line boxes are 50px and 42px. */ .spec-list { margin: -12px 0 0; } .spec-list__item + .spec-list__item { margin-top: 24px; } .spec-list__value { margin: 0; font-weight: 400; font-size: 21px; line-height: 50px; } .spec-list__label { margin: -8px 0 0; font-weight: 200; font-size: 16px; line-height: 22px; color: var(--c-text); } /* --- Gallery --------------------------------------------------------------- Two independent stacks rather than a flowed masonry: Figma hand-orders the photos and the two columns end at different heights (left 4411, right 4664), which no single flow algorithm reproduces. Each column is its own element on the shared .grid-2 track, so this stays one predictable WP gallery block. Every image keeps its drawn aspect ratio, so no column needs a fixed height. */ .progetto-gallery { align-items: start; /* columns keep their own height; they end 253px apart */ margin-top: 124px; /* measured: fact list bottom (1696) → gallery top (1820) */ } .progetto-gallery__col { display: flex; flex-direction: column; gap: var(--gap-2); } .progetto-gallery__col img { width: 100%; height: auto; border-radius: var(--radius-frame); } /* The shot's own wrapper, so the shared .media-zoom hover can clip against it. THE RADIUS HAS TO BE ON THIS BOX TOO, not only on the : .media-zoom applies overflow:hidden here, and once the image scales past the wrapper it is the WRAPPER's corners that do the clipping — a square-cornered one would fill the rounded corners back in for as long as the pointer is over the photo. Same radius on both keeps the shape constant through the transition. display:block because is inline by default; the column is a flex container so this is already true, but the rule should not depend on that. */ .progetto-gallery__shot { display: block; border-radius: var(--radius-frame); } /* --- Prev / next ---------------------------------------------------------- "TORNA AI PROGETTI" pinned left with its arrow flipped to point back, and "PROSSIMO PROGETTO" pinned right. Both are .aec-btn at the 18/600/34 size, which needs `height` too — the base pins its box to --lh-micro (22px). */ .progetto-nav { display: flex; justify-content: space-between; margin-top: 65px; /* measured: gallery bottom (4664) → link top (4729) */ } .progetto-nav .aec-btn { font-size: 18px; line-height: 34px; height: 34px; } .progetto-nav__prev { flex-direction: row-reverse; } .progetto-nav__prev .icon-arrow { transform: scaleX(-1); } .progetto-nav__prev:hover .icon-arrow { transform: scaleX(-1) translateX(4px); } @media (max-width: 1024px) { .progetto-hero__plate { margin-left: calc(var(--pad-x) * -1); padding-left: var(--pad-x); } .progetto-hero__client { font-size: 26px; } .progetto-hero__place { font-size: 32px; } .progetto-hero__client, .progetto-hero__place { line-height: 1.2; } .progetto-detail { padding-bottom: 91px; } .progetto-detail__intro { margin-bottom: 49px; } .progetto-gallery { margin-top: 53px; } .progetto-detail__lead { max-width: none; } } @media (max-width: 768px) { .progetto-detail { padding-bottom: 68px; } .progetto-detail__intro { margin-bottom: 36px; } .progetto-gallery { margin-top: 40px; } /* .aec-btn is nowrap, so the two links can't share a row this narrow — side by side they need ~440px and push the document into overflow. */ .progetto-nav { flex-direction: column; align-items: flex-start; gap: 24px; } } /* --- SHM 08/09/2026 - BugSmash #32 (richiesta cliente) --------------------- "uniformare spaziatura, controllare in tutte le pagine" (fondo scheda progetto): i link Torna ai progetti / Prossimo progetto stavano a 65px dalla gallery ma a 152px dal footer (91/68 nei breakpoint); su Figma lo spazio sotto i link e' pari a quello sopra, quindi padding-bottom 65px a tutte le larghezze. Vale per tutte le schede progetto (stesso template). */ .progetto-detail { padding-bottom: 65px; } @media (max-width: 1024px) { .progetto-detail { padding-bottom: 65px; } } @media (max-width: 768px) { .progetto-detail { padding-bottom: 65px; } } /* --- SHM 08/09/2026 - BugSmash #55 / #56 / #57 (richiesta cliente, mobile e tablet, scheda progetto) -------------------------------------------------- Il padding-bottom da 92px della targa (regola desktop, specificita' 0,2,0) vinceva anche sui 40px del page-hero mobile, quindi con l'hero da 240/360px la targa rossa restava attaccata in alto. #55 "titolo e fondo rosso fare piu' piccolo e in basso": sotto i 768px targa a 18/24px con padding ridotto, ancorata a 24px dal fondo, hero a 300px. #56 "come per mobile piu' in basso" e #57 "possiamo farla piu' alta?" (tablet): fino a 1024px hero a 420px e targa a 32px dal fondo. */ @media (max-width: 1024px) { .page-hero.progetto-hero { height: 420px; } .progetto-hero .page-hero__caption { padding-bottom: 32px; } } @media (max-width: 768px) { .page-hero.progetto-hero { height: 300px; } .progetto-hero .page-hero__caption { padding-bottom: 24px; } .progetto-hero__plate { padding: 14px 24px 12px var(--pad-x); } .progetto-hero__client { font-size: 18px; } .progetto-hero__place { font-size: 24px; } }