/* mentors — desktop 3001:623 / mobile 3001:3225 · the slider/ template on BOTH layers. SCOPED ONLY: .mentors__* rules + scoped overrides of the ALREADY-LINKED template classes (.slides-blocks / .slide-wrapper / .carousel-btn come from css/templates/slider.css, which index.html links once). No global selector, no :root, no .container, no template copy. Section tokens live on .mentors, not :root — a section may not write global scope, and every consumer of them is inside this section anyway. All five fluid ones are declared in ALL THREE bands (brief-page 4.1a rule 2: ragazzi-pdp2 shipped a badge 2x too large because two scoped tokens were missing from exactly the 768-1023 block). Derivations: M-min = round(M*320/375) · M-max = round(M*767/375) D-min = round(D*1024/1520) · D-max = round(D*1920/1520). */ /* ============================ MOBILE 0-767 (base) ============================ */ .mentors { /* ---- fluid, three bands ---- */ --mentors-card-w: clamp(181px, calc(212px + (var(--max-vw) - 375px) * 0.015), 434px); --mentors-gap: clamp(9px, calc(10px + (var(--max-vw) - 375px) * 0.015), 20px); --mentors-head-gap: clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px); --mentors-nav-gap: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); /* --mentors-name-minh has no mobile value: mobile plates are pinned by the drawn 40px min-height (D-12), not by the name box. It enters at 768 with the rule that uses it. */ /* ---- fixed on BOTH layers, identical in Figma → deliberately NOT clamped (slice 2.4, stated so nobody "fixes" it later) ---- */ --mentors-plate-pad: 5px; --mentors-plate-gap: 5px; --mentors-plate-minh: 40px; /* 3001:3236/3242/3249/3255 carry an explicit h-[40px] */ --mentors-arrow: 28px; /* 28 on both layers; does NOT scale with the band */ --mentors-nav-gap-x: 10px; /* arrow <-> hairline, 3001:661.gap / 3001:3260.gap */ --mentors-photo-ratio: 5 / 7; /* 314.6/440.44 = 212/296.8 = 0.714286, exact */ /* The names are the one place the page token is wrong for this section: --lh-h4 is 0.95 in every band, but the NODE draws mobile names at lineHeight 100% (2 lines of 14 = 28, which is what hugs card 1's plate to the drawn 38) and desktop at 95% (2 lines of 22 = 41.8 -> the drawn 42). Scoped here rather than forking the page token. */ --mentors-name-lh: 1; /* Same class of trap on the ROLE labels, and it splits by layer. The export writes lineHeight "100%" for all ten, but that is Figma AUTO leading on the desktop layer (FD-175, already recorded for --lh-btn in tokens.css): desktop draws 18px for one line and 36 for two — measured here, `normal` gives exactly 18 / 36 while `1` gives 14 / 28. Mobile is the opposite: `1` reproduces the drawn 24px two-line box and keeps the plates at the drawn 38 / 40, whereas `normal` (16 / 32) pushes cards 2, 4 and 5 to 42. So the token is per-band, each band using the value that matches its own drawn boxes. */ --mentors-role-lh: 1; /* ---- FIX-Audit P0-1 / P1-1 (2026-08-12): the card's TYPE scales with the CARD, not with the viewport, below 1024. The defect: between 480 and 1023 the white role text escaped its black plate onto the white page (contrast 1.00:1, illegible) or collided with the name, and the plates blew out to 2.04x their drawn height with the row going ragged (measured at 767: plate heights [49.75, 63.63, 40, 81.50, 63.63] against the drawn [38, 40, 40, 40, 40]). The mechanism is arithmetic, not a typo: every fluid token in this pipeline ramps by an ABSOLUTE slope (`base + (max-vw - anchor) * k`), so across 375->767 a 12px role grows +49% while a 212px card grows +2.8%. The type outruns the box it has to fit inside. Same shape in 768-1023, where both restart at their base and ramp at 0.025. The fix keeps the drawn anchors EXACT and removes the whole class: inside the card, the name and role are a fixed RATIO of the card width (14/212 and 12/212 — the drawn mobile values at the drawn mobile card), so the text can never outgrow the plate at any width in between. At 375 this resolves to exactly 14 and 12. Above 1024 the drawn desktop layer takes over untouched and the page tokens are used verbatim. */ --mentors-name-fs: calc(var(--mentors-card-w) * 14 / 212); --mentors-role-fs: calc(var(--mentors-card-w) * 12 / 212); display: flex; flex-direction: column; /* Section-scoped top margin: audience -> mentors is 82 on desktop, one of the five boundaries that is NOT ~120 (brief-page 4.5, slice D-20). Mobile inherits the uniform 50. */ margin-top: var(--section-gap); } /* Frame 51's triangle symbol holder — takes no space and paints nothing itself. */ .mentors__sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .mentors__title { /* type/weight/colour come from .t-h2 (components.css): Oswald 600 #232323 on mobile, 700 #252627 from 1024 via --fw-h2 / --c-heading. Nothing to restate. */ align-self: flex-start; } /* --------------------------------------------------------------------------- TRACK — .slides-blocks is JS-BOUND (slider.js queries it); these are scoped overrides of the template's demo values, not a second copy of the template. The template ships margin-top: 20px, padding: 0 10px and gap: 16px — all three are demo values and all three are wrong here. D-2: the track is the ONLY element that bleeds the right gutter. Viewport = content box + gutter = 1480 at 1520 / 355 at 375, which is what Figma draws (its own render of 3001:623 came back 1480 wide, not 1653). D-5: the card width is a px clamp, NEVER a percentage — inside overflow-x:auto a percentage resolves against the viewport, so 5 cards would total 109% of the viewport instead of the drawn 111.7% and the peek and the travel both die. --------------------------------------------------------------------------- */ .mentors__track.slides-blocks { margin-top: var(--mentors-head-gap); margin-right: calc(-1 * var(--gutter)); padding: 0; display: flex; flex-wrap: nowrap; align-items: flex-start; /* D-6: 3001:627/3001:3228 alignItems MIN. Flex's default stretch would equalise the five natural card heights and stretch every photo — a P1. */ gap: var(--mentors-gap); overflow-x: auto; /* KEEP mandatory snap and KEEP scroll-behavior auto (brief-page 8.2a: the historical "remove the snap" fix was the wrong one). */ scroll-snap-type: x mandatory; scroll-behavior: auto; } /* Restated at (0,3,0) because the rule above outranks the template's own `.slides-blocks.is-dragging` (0,2,0) by load order. Without this, snap stays mandatory for the whole drag, the browser re-snaps on every pointermove and the row comes out in steps instead of following the cursor (slider/ADAPT.md, measured on nooa-landing 2026-08-02). */ .mentors__track.slides-blocks.is-dragging { scroll-snap-type: none; scroll-behavior: auto; } /* --------------------------------------------------------------------------- CARD — .slide-wrapper is JS-BOUND (slider.js measures the first one for its step). Template demo values overridden: width 281px, height 400px, radius 12/20px, overflow hidden, scroll-snap-align center, plus a 1440px block that would force 425 x 637. --------------------------------------------------------------------------- */ .mentors__card.slide-wrapper { flex: 0 0 var(--mentors-card-w); width: var(--mentors-card-w); height: auto; /* natural height — the five differ by design (D-6) */ border-radius: 0; /* radii: everything 0 on this page */ overflow: visible; display: flex; flex-direction: column; align-items: flex-start; gap: var(--mentors-gap); /* same value as the track gap on each layer */ scroll-snap-align: start; } /* D-4 — MUST-APPLY, and it is load-bearing on BOTH layers here. Desktop travel is 173px, LESS than one card step (334.6): with `start` on all five, the snap points 334.6/669.2/1003.8/1338.4 all sit beyond maxScroll and the row reads DEAD. Mobile's last point (888) also exceeds maxScroll (745), so card 5 never becomes fully visible. `end` on the last card adds a reachable snap at exactly maxScroll, where card 5 lands flush with the viewport's right edge on both layers. */ .mentors__card.slide-wrapper:last-child { scroll-snap-align: end; } /* ---- name plate (Frame 42 / Frame 43) ---- */ .mentors__plate { width: 100%; display: flex; align-items: flex-end; /* Figma MAX on 9 of the 10 plates */ gap: var(--mentors-plate-gap); padding: var(--mentors-plate-pad); background: var(--c-ink); } /* D-12: 3001:3236/3242/3249/3255 carry an explicit 40px; 3001:3230 does not and hugs to 38 because its role is a single nowrap line. That shifts card 1's photo 2px up relative to its siblings — which is what Figma draws (image y:48 vs y:50), not a bug to normalise away. */ .mentors__card:not(:first-child) .mentors__plate { min-height: var(--mentors-plate-minh); } /* Card 3 is the only plate with justifyContent SPACE_BETWEEN (3001:3242) — mobile only. On desktop 3001:643 is MIN + a flex-1 name box, so this reverts at 1024. */ .mentors__plate--split { justify-content: space-between; } /* Card 5's mobile plate is the only one with alignItems CENTER (3001:3255). Desktop 3001:656 is MAX like the rest, so this reverts at 1024. */ .mentors__plate--center { align-items: center; } .mentors__name { flex: 1 1 0; /* width is DERIVED: plate_content - gap - role */ min-width: 0; font-family: var(--font-body); font-weight: 800; font-size: var(--mentors-name-fs); /* card-proportional below 1024, --text-h4 at 1024+ */ line-height: var(--mentors-name-lh); letter-spacing: var(--ls-h4); /* -3%: the dominant style. 3001:638/657/3256 draw -4%, accepted single-node drift (D-15), max delta 0.22px */ text-transform: uppercase; /* Figma textCase UPPER — source string stays as typed */ color: var(--c-bg); } .mentors__name--nowrap { white-space: nowrap; /* "Отар", one word, both layers */ } /* D-11 — card 3's name wrapper is a REAL element on both layers (3001:644 / 3001:3243), not decoration: on desktop its 42px height is what pins card 3's plate to the same 52 as the four whose names run to two lines. */ .mentors__name-box { display: flex; align-items: center; justify-content: center; align-self: stretch; /* Figma height: 100% */ flex: 0 0 auto; /* mobile 3001:3243 hugs (37px) */ min-width: 0; } /* D-9 — MUST-APPLY. The role labels wrap to 2 lines in 7 of 10 plates and Figma sets an explicit width on exactly those 7. With white-space: normal and no width each label flows onto one line, the plate widens and the whole track length is wrong. The per-card value is a PERCENTAGE OF THE PLATE CONTENT BOX (inline --role-w-* on the element), so it survives the 1024 seam; the two bands need different percentages because the role's font-size differs (14 desktop / 12 mobile) while the plate scales. Cards 1 and 3 set no variable — an unresolved var() computes max-width to its initial `none`, and they carry --nowrap instead, exactly as Figma draws them. */ .mentors__role { flex: 0 0 auto; max-width: var(--role-w-m); font-family: var(--font-body); font-weight: 400; font-size: var(--mentors-role-fs); /* card-proportional below 1024, --text-micro at 1024+ */ line-height: var(--mentors-role-lh); letter-spacing: var(--ls-micro); text-transform: uppercase; text-align: right; /* Figma RIGHT on 8 of 10 instances */ color: var(--c-bg); } .mentors__role--nowrap { white-space: nowrap; } /* 3001:658 (desktop card 5) is the one role drawn LEFT-aligned in a box that is flush right — and its mobile twin 3001:3257 is drawn RIGHT. FIX-Audit P2-1: BA-2 makes desktop canonical for COPY, which is a DOM question (one node or two); alignment is CSS, so both layers can simply have what they are drawn with. Below 1024 the role keeps the section default (`right`, 3001:3257); the left alignment enters with the desktop layer that draws it. */ @media (min-width: 1024px) { .mentors__role--start { text-align: left; } } /* ---- photo. One file per mentor, identical hash on both layers; every fill is scaleMode FILL with NO crop and NO imageTransform -> plain object-fit: cover, no object-position. aspect-ratio (not just width) reserves the box: brief-page 7.5 flags CLS as this page's obvious risk. Card 5's mobile 211.57 x 296.2 is the same ratio with 0.43px of designer drift — built at 212 x 5/7, never encoded as 211.57. ---- */ .mentors__photo { width: 100%; height: auto; aspect-ratio: var(--mentors-photo-ratio); object-fit: cover; /* All ten photo nodes carry a Figma image filter of saturation -100 that the REST export does not emit (no filter/saturation key anywhere in cache/mentors.*.json — logged in flow-defects.md). Without this the section ships in the source files' blue duotone while Figma draws it black-and-white, which is also how brief/mentors.md 3.1 describes it. Measured, not eyeballed: the asset mean RGB is (151.6, 156.9, 191.9) with a 46.5 channel spread; Figma's own render of 3001:640 is R=G=B=154.9, spread 0.0, at the SAME luminance distribution (mean 153.6/std 80.6 vs 154.9/78.2) — a pure desaturation, no contrast or exposure change, so grayscale(1) reproduces it exactly. */ filter: grayscale(1); } .mentors__bio { width: 100%; font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-alt); line-height: var(--lh-body-alt); letter-spacing: var(--ls-body-alt); color: var(--c-ink); overflow-wrap: break-word; } /* --------------------------------------------------------------------------- NAV STRIP (Frame 51) — content width on both layers, does NOT bleed. A prev/next arrow pair + ONE unbroken hairline (D-3). The buttons keep the JS-bound .carousel-btn.prev/.next classes, so the template's demo chrome has to be undone here: it positions them absolute at top:50% with a 44px pink circle and left/right: 30px. Overridden at (0,3,0) so `.carousel-btn.prev`, `.carousel-btn.next` and `.carousel-btn:hover` (all (0,2,0)) cannot win. --------------------------------------------------------------------------- */ .mentors__nav { margin-top: var(--mentors-nav-gap); width: 100%; display: flex; align-items: center; gap: var(--mentors-nav-gap-x); } .mentors__nav .mentors__arrow.carousel-btn { position: relative; top: auto; left: auto; right: auto; transform: none; flex: 0 0 auto; width: var(--mentors-arrow); height: var(--mentors-arrow); display: flex; align-items: center; justify-content: center; padding: 0; background: none; border-radius: 0; transition: none; pointer-events: auto; color: var(--c-ink); /* the glyph paints currentColor */ } /* D-13 — grow the hit area to >= 44px WITHOUT changing the measured 28 x 28 box (the gate measures the button, and Frame 78 / Frame 79 are 28 x 28 on both layers). */ .mentors__nav .mentors__arrow.carousel-btn::after { content: ''; position: absolute; inset: -8px; } /* D-14 — both triangles are drawn at full #232323 and no muted state exists in the file, but the pair IS a state pair: the disabled ink comes from the page's own state vocabulary (--c-ink-30, already assigned to the inactive half of the En/Ru pair), never hardcoded on one side. slider.js sets [disabled] from scroll position; prev starts disabled at rest. */ .mentors__nav .mentors__arrow.carousel-btn:disabled { color: var(--c-ink-30); cursor: default; } .mentors__arrow-glyph { width: var(--mentors-arrow); height: var(--mentors-arrow); fill: currentColor; } /* Both triangles are exact mirrors across x=14 (apex 13.9881 vs 14.013 — 0.025px, noise), so ONE symbol is reused and the next arrow is flipped. */ .mentors__arrow--next .mentors__arrow-glyph { transform: scaleX(-1); } .mentors__rule { flex: 1 1 0; /* 1364 = 1440 - 2*28 - 2*10 ✓ · 259 = 335 - 76 ✓ */ height: 1px; background: var(--c-ink); } /* ================== PSEUDO-TABLET 768-1023 — INTERPOLATED ================== has-tablet-layer: false. Nothing is drawn here and nothing in the pipeline measures it, which is exactly why every one of the fluid tokens is restated (brief-page 4.1a rule 2). Without this block the desktop formula would return 314.6 * 768/1520 = 159px cards at 768. Text METRICS stay at their mobile values through this band, matching tokens.css. =========================================================================== */ @media (min-width: 768px) { .mentors { --mentors-card-w: clamp(212px, calc(212px + (var(--max-vw) - 768px) * 0.025), 314.6px); --mentors-gap: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 20px); --mentors-head-gap: clamp(30px, calc(30px + (var(--max-vw) - 768px) * 0.025), 40px); --mentors-nav-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 40px); /* FIX-Audit P1-3: derived, not a second ramp. The plate must hold TWO name lines, so the floor IS two name lines — 2 x font-size x line-height. The old `clamp(28, 28 + (max-vw-768) x 0.025, 42)` ramped at 0.025 while a two-line name ramps at 2 x 0.025, so they agreed only at 768: at 1023 the floor was 34.375 against a real 40.75 name, and card 3's plate came out 6.37px shorter than its four siblings. */ --mentors-name-minh: calc(var(--mentors-name-fs) * var(--mentors-name-lh) * 2); margin-top: clamp(50px, calc(50px + (var(--max-vw) - 768px) * 0.025), 82px); } /* FIX-Audit P1-2: the floor belongs to the WRAPPER, not the name. On `.mentors__name` it made the name element fill the 42px box, so the wrapper's `align-items: center` had nothing left to centre and card 3's single line pinned to the top (measured ink centre 10.0 against the required 21.0 — `ОТАР` sat level with its neighbours' FIRST line instead of between their two). The wrapper is a real Figma node on both layers (3001:644 / 3001:3243) and is exactly what Figma gives the explicit height to. */ .mentors__name-box { min-height: var(--mentors-name-minh); } } /* ========================= DESKTOP 1024+ (drawn layer) ========================= Proportional to --vw-base 1520, capped by --max-vw. Card 314.6, gap 20, plate 52, photo 440.44, track content 1653 in a 1480 viewport -> maxScroll 173. ============================================================================= */ @media (min-width: 1024px) { .mentors { --mentors-card-w: clamp(212px, calc(314.6px * (var(--max-vw) / var(--vw-base))), 397px); --mentors-gap: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --mentors-head-gap: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --mentors-nav-gap: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --mentors-name-minh: clamp(28px, calc(42px * (var(--max-vw) / var(--vw-base))), 53px); --mentors-name-lh: 0.95; /* 3001:630 etc. draw lineHeight 95% on this layer */ --mentors-role-lh: normal; /* Figma AUTO leading = 18px at 14px, measured exact */ /* The drawn layer takes its type straight from the page ramp again — the card-proportional sizing exists only for the two bands Figma does not draw. At 1520 these resolve to the drawn 22 and 14. */ --mentors-name-fs: var(--text-h4); --mentors-role-fs: var(--text-micro); margin-top: clamp(55px, calc(82px * (var(--max-vw) / var(--vw-base))), 104px); } /* Card 3's plate is MIN with a flex-1 name box on this layer (3001:643 / 3001:644): 156.6 + 5 + 143 = 304.6 = the plate content box, to the pixel. */ .mentors__plate--split { justify-content: flex-start; } .mentors__name-box { flex: 1 1 0; } /* 3001:656 is MAX like the other four desktop plates. */ .mentors__plate--center { align-items: flex-end; } .mentors__role { max-width: var(--role-w-d); } }