/* results — desktop 3001:667 (1440 x 680) / mobile 3001:3944 (335 x 397.79). SECTION-SCOPED ONLY: .results__* rules + scoped overrides of the already-linked template classes (css/templates/slider.css). No global selector, no :root, no .container, no template stylesheet copy or link, no other section touched. Mobile-first: base = 375, then @media 768 (PSEUDO-tablet, interpolated — nothing is drawn there) then @media 1024 (the drawn desktop layer). Arithmetic this file must reproduce (slice 2.3, both layers close exactly): DESKTOP 192 + 40 + 448 = 680 | 380 + 40 + 28 = 448 | 302 + 20 + 58 = 380 466.667*3 + 20*2 = 1440.0 | 28 + 10 + 1364 + 10 + 28 = 1440 MOBILE 50 + 30 + 317.79 = 397.79 | 269.79 + 20 + 28 = 317.79 216.79 + 10 + 43 = 269.79 | 335*3 + 20*2 = 1045 (extent, > 335 BY DESIGN) 28 + 10 + 259 + 10 + 28 = 335 */ /* ============================================================================ SECTION-SCOPED TOKENS — on .results, never :root (tokens.css is PAGE-SCAFFOLD's). Declared in ALL THREE BANDS: a scoped token missing from the pseudo-tablet block is exactly how ragazzi-pdp2 shipped a badge 2x too large across 768-1023 (brief 4.1a rule 2). Only the three gaps that actually DIFFER across layers get a token. Everything else in this section is drawn identically at 375 and 1520 and ships unclamped (slice D-9): card<->card 20 (page --grid-gap), nav gap 10, meta gap 10, num->meta gap 10, arrow box 28, glyph 16x28, Line 36 1x15, every hairline 1. Bounds are computed, not chosen: D-min = round(D-base * 1024/1520), D-max = round(D-base * 1920/1520) -> 40 -> 27/51, 20 -> 13/25. No token has min === base === max on any band. The 1024 step-down (~36px at 1023 -> ~27px at 1024) is the desktop band scaling layout and type TOGETHER, by design — settled territory, do not "fix" it. ============================================================================ */ .results { --results-head-gap: 30px; /* h2 -> body (M 30 -> D 40) */ --results-body-gap: 20px; /* track -> nav (M 20 -> D 40) */ --results-card-gap: 10px; /* image -> stat row (M 10 -> D 20) */ /* The card hairline is BLACK at 30% (#0000004d, measured on all 6 rects: strokes [{SOLID, (0,0,0), opacity 0.3}], strokeAlign INSIDE, weight 1). It is NOT --c-ink-30 (rgba(35,35,35,.3)) and NOT --c-hairline (opaque #000), and tokens.css has no 30%-black entry — so this is a section-scoped alias, not a near-match substitution (slice D-14). Colours take no clamps, so it needs no band blocks. */ --results-card-border: rgba(0, 0, 0, 0.3); } @media (min-width: 768px) { .results { --results-head-gap: clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 40px); --results-body-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 40px); --results-card-gap: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 20px); } } @media (min-width: 1024px) { .results { --results-head-gap: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --results-body-gap: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --results-card-gap: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); } } /* ============================================================================ SHELL — 3001:667 / 3001:3944: column, gap 40 (D) / 30 (M), padding 0, HUG height. align-items: stretch, NOT flex-end, despite Figma counterAxisAlignItems: MAX — both children carry layoutAlign: STRETCH and span the full content box, so the keyword is unobservable; `flex-end` in a CSS column would shrink both to content width and destroy the 1440 row (slice D-19; accepted-deviation row pre-declared for the gate). NO margin-block-start here: the page rule `section + section` owns the boundary and the drawn 119 is within 1px of its 120 default (slice D-8). ============================================================================ */ .results { display: flex; flex-direction: column; align-items: stretch; gap: var(--results-head-gap); } /* ---- head — 3001:668 (1440 x 192, row, gap 40, align center) + 3001:669 (848 FIXED) ------- On MOBILE both are transparent full-width pass-throughs: Figma has no wrapper there (3001:3945 is a direct child), so they must stay plain blocks — making .results__head a flex row on mobile would shrink the h2 to its max-content (~230px) instead of the drawn 335. The desktop 848 constraint is a PERCENTAGE of the content box (848/1440 = 58.889%) so it survives the 1024 seam and the --max-vw cap without a second set of numbers (brief 1.1). */ @media (min-width: 1024px) { .results__head { display: flex; align-items: center; column-gap: var(--results-head-gap); /* drawn 40; inert with one child, but it is the node's real value rather than a silent 0 */ } .results__head-inner { flex: 0 1 auto; max-width: 58.889%; } } /* ---- h2 — 3001:670 / 3001:3945 ------------------------------------------------------------ .t-h2 (components.css) already carries every drawn property, per band, from tokens.css: Oswald 600 -> 700 (--fw-h2), 28 -> 96 (--text-h2), lh 0.88 -> 1 (--lh-h2), ls -4% -> -6.25% (--ls-h2), UPPER, and #232323 -> #252627 (--c-heading). line-height: 100% on desktop is REAL, not Figma AUTO (192 / 2 lines / 96px = 1.000; AUTO would read ~1.29) — slice D-12. So this section adds NOTHING to the h2 and mints no type token. The drawn mobile break; hidden from 768 up, where the desktop wrap comes from the 58.889% constraint instead. 768-1023 renders one line — interpolated, honest, not a bug. */ @media (min-width: 768px) { .results__brk { display: none; } } /* ============================================================================ BODY / SLIDER — 3001:671 (1440 x 448, column, gap 40) / 3001:3946 (335 x 317.79, gap 20). .results__body also carries the JS-bound .slides-wrapper (template gives it position: relative, which is harmless here since nothing is absolutely positioned). ============================================================================ */ .results__body { display: flex; flex-direction: column; gap: var(--results-body-gap); } /* ---- track — 3001:672 / 3001:3947 --------------------------------------------------------- overflow-x: auto (from the template) is what PRODUCES the mobile scroll — never a negative margin plus an explicit track width, which is the wrapper-stretch fake that leaves scrollWidth === clientWidth (RECOGNIZE.md anti-pattern). The track must NOT bleed to the viewport edge either: Figma draws it inside the 335 content column, and bleeding it changes clientWidth and breaks the card-width === viewport-width identity (MUST-APPLY 1 + 2). Template defaults overridden here, each a visible defect otherwise (MUST-APPLY 5): margin-top: 20px -> 0 (the body's flex gap already owns track<->nav; this would add) padding: 0 10px -> 0 (+20px silently breaks every extent number above) gap: 16px -> 20 (Figma is 20 on BOTH layers -> the page's --grid-gap) KEEP `scroll-snap-type: x mandatory` and `scroll-behavior: auto`. The "override snap to none per button-nav variant" advice in brief 8.2a / reference memory is SUPERSEDED: scroll-behavior: auto is the real cure, and removing snap leaves a released drag half-way through a card (slice MUST-APPLY 4). The .is-dragging variant is RE-STATED at this file's own specificity: .results__track .slides-blocks is (0,2,0) — identical to .slides-blocks.is-dragging — and loads later, so without this the state variant is silently outranked and snap stays mandatory through the whole drag (ADAPT.md; nooa-landing 2026-08-02). MUST-APPLY 3. */ .results__track.slides-blocks { margin-top: 0; padding: 0; gap: var(--grid-gap); scroll-snap-type: x mandatory; scroll-behavior: auto; } .results__track.slides-blocks.is-dragging { scroll-snap-type: none; scroll-behavior: auto; } /* ---- card — 3001:673/681/689 / 3001:3948/3956/3964 ---------------------------------------- MOBILE: `flex: 0 0 100%` of the track viewport, NEVER a hard 335px. That is what makes the LAST card reachable at every width: card = W, scrollWidth = 3W + 40, maxScroll = 2(W + 20), and the snap points are 0 / W+20 / 2(W+20) — the last one EQUALS maxScroll exactly, for every W. A hard `flex: 0 0 335px` breaks it the moment the viewport is not 375 (at 768 the points become 0/355/710 against a maxScroll of 317, and cards 2-3 go unreachable). D-3. DESKTOP: `flex: 1 1 0` = Figma layoutGrow: 1 -> 3 x 466.667 in the 1440 box, gap 20, 1440.0 exactly, so scrollWidth can never exceed clientWidth. `min-width: 0` keeps the flex basis authoritative in both directions, so both identities are exact rather than conditional on the text's min-content (measured: card min-content ~263px at 375 and ~240px at 1024, well inside the 335 / 310 available). Template defaults overridden: width 281px / height 400px and the 1440-band 425x637 (demo values — ADAPT.md STANDALONE-DEMO ARTIFACTS; note `@media (min-width: 1440px)` is dead weight here, 1440 is not a breakpoint on this page), border-radius 12px/20px -> 0 (the page has NO radii anywhere), overflow: hidden -> visible (nothing overflows a card), scroll-snap-align: center -> start (center moves every snap point and breaks the maxScroll identity). These beat the template by specificity (0,2,0 vs 0,1,0) at every width. */ .results__card.slide-wrapper { flex: 0 0 100%; min-width: 0; width: auto; height: auto; border-radius: 0; overflow: visible; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--results-card-gap); } .results__card.slide-wrapper:last-child { scroll-snap-align: end; } /* DESKTOP: Figma layoutSizingHorizontal FILL + layoutGrow 1 -> `flex: 1 1 0`, i.e. three equal shares of the content box: (1440 - 2*20)/3 = 466.667 at 1520, and scrollWidth === clientWidth at EVERY desktop width. Measured consequence of omitting this block: the cards stayed at `flex: 0 0 100%`, each read 1440 wide at 1520, and the desktop track scrolled 2920px — the exact failure this section's D-1 says must not happen. */ @media (min-width: 1024px) { .results__card.slide-wrapper { flex: 1 1 0; } } /* ---- card image — 3001:674/682/690 / 3001:3949/3957/3965 ---------------------------------- ONE aspect-ratio serves both layers: 466.667/302 = 1.545253 and 335/216.793 = 1.545257, identical to 6 s.f.; 1400/906 -> 700/453 is the exact reduced form (slice D-16). It also reserves the box, so no CLS on a 10011px image-led page. box-sizing: border-box is the Figma strokeAlign: INSIDE semantics — without it every card grows 2px and the 1440 row overflows (slice D-15). The global reset already sets it; it is restated here because the whole 302/216.79 arithmetic depends on it. object-position 50% 50% (the CSS default, stated) reproduces all three crops: the fills are scaleMode FILL with NO imageTransform and NO crop, so Figma's compositing IS plain cover. Template `.slide-image { height: 100% }` is overridden to auto — a percentage height against an indefinite column parent is exactly what broke the mobile aspect in ragazzi-mission. */ .results__img.slide-image { width: 100%; height: auto; aspect-ratio: 700 / 453; object-fit: cover; object-position: 50% 50%; border: 1px solid var(--results-card-border); box-sizing: border-box; } /* ---- stat row — 3001:675/683/691 / 3001:3950/3958/3966: row, gap 10, align center --------- Vertical centring closes exactly, so never hand-tune an offset: desktop (58 - 24)/2 = 17 = the meta frame's drawn y; mobile (43 - 19)/2 = 12 = its drawn y. Row height is the numeral's own line box: 48 * 1.2 = 57.6 ~ 58 (D), 36 * 1.2 = 43.2 ~ 43 (M). Gaps 10 everywhere here are drawn identically on both layers -> unclamped (slice D-9). */ .results__stat { display: flex; align-items: center; gap: 10px; } /* numeral — Oswald 600, 36 -> 48. --ls-stat already carries the band-bound tracking (-0.0556em through 1023, -0.0417em from 1024 — both an absolute -2px), which is exactly slice D-11, so no local per-band override is needed. HUG width -> does not shrink. */ .results__num { flex: 0 0 auto; font-family: var(--font-display); font-weight: 600; font-size: var(--text-stat); line-height: var(--lh-stat); /* 1.2, both layers */ letter-spacing: var(--ls-stat); color: var(--c-ink); } /* meta cluster — 3001:677/685/693 / 3001:3952/3960/3968: layoutGrow 1, row, gap 10, centred. The per-card widths (332.67 / 327.67 / 327.67) differ ONLY because the numerals do; they are a flex: 1 consequence and must never be hard-coded. */ .results__meta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } /* platform label — Onest 700, 16 -> 20, lh 1.2, ls 0%, UPPER. A near-miss on TWO page tokens, so only the SIZE is borrowed: --text-label matches family, weight, case and both sizes but declares lh 1 and ls -8%/-6.4%; --text-h5 matches lh 1.2 and the sizes but is weight 800 at -3%. Figma is 700 / 1.2 / 0%. The two mismatched properties are therefore set locally — no page token is forked and no new clamped token is minted (slice D-10). `letter-spacing: 0` is load-bearing: body.css inherits -0.05em down here. */ .results__platform { font-family: var(--font-body); font-weight: 700; font-size: var(--text-label); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--c-ink); } /* Line 36 — 3001:679/687/695 / 3001:3954/3962/3970: a 0 x 15 vector, strokeWeight 1, strokeAlign CENTER, #232323. A zero-extent vector with no padding, so its 1px simply straddles the geometry = a painted 1px. The CENTER-stroke padding trap does NOT fire anywhere in this section (slice D-15). */ .results__div { flex: 0 0 1px; width: 1px; height: 15px; background: var(--c-ink); } /* metric word — Onest 600, 16 -> 20, lh 1.15, ls -5%: an exact match for --text-body-lg. */ .results__kind { font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); color: var(--c-ink); } /* ============================================================================ NAV STRIP — 3001:697 (1440 x 28) / 3001:3972 (335 x 28). NOT a segmented progress bar and NOT dots: exactly three children — a 28x28 prev button, gap 10, a 1px rule with layoutGrow: 1, gap 10, a 28x28 next button (slice 5.3 / D-6, read from live `geometry=paths` because the exporter collapsed both strips). The rule is `flex: 1`, not two measured widths — that is why 1364 (D) and 259 (M) differ. Both arrows stay visually uniform #232323 at opacity 1 on every layer; no muted side is invented and neither side is hard-coded muted. `disabled` carries the state (slice D-7 / 10 BA-1). On desktop BOTH are permanently disabled and must stay VISIBLE at the drawn ink. Template .carousel-btn defaults overridden (44x44 plate, #DED6D8 fill, border-radius 50%, position: absolute; top/transform, left/right 30px, and a background hover the design does not draw) -> a bare 28x28 triangle in the flow strip. Specificity (0,2,0)/(0,3,0) beats the template's (0,1,0)/(0,2,0), and this file loads after it. ============================================================================ */ .results__nav { display: flex; align-items: center; gap: 10px; } .results__nav .carousel-btn { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent; position: static; top: auto; left: auto; right: auto; transform: none; cursor: pointer; } .results__nav .carousel-btn svg { display: block; width: 16px; height: 28px; flex: 0 0 auto; } /* Stay exactly as drawn while unreachable — and stay PRESENT. `display: flex` re-asserts against `.carousel-controls .carousel-btn:disabled { display: none }`, which is already inert here (no .carousel-controls ancestor) but whose failure mode is the whole desktop strip disappearing (MUST-APPLY 6). */ .results__nav .carousel-btn:disabled { display: flex; opacity: 1; cursor: default; } .results__nav .carousel-btn:hover { background: transparent; } .results__nav .carousel-btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; } /* 3001:700 / 3001:3975 — a 1364x0 (D) / 259x0 (M) vector, strokeWeight 1, #232323, layoutGrow: 1. CSS, not an asset. */ .results__rule { flex: 1 1 auto; height: 1px; background: var(--c-ink); }