/* ============================================================================ SECTION 10-recovery-41 — "4.1 Recovery" · Figma 2784:339 · 1280 x 912 ---------------------------------------------------------------------------- Ground truth: figma-truth/10-recovery-41.spec.md + sections-en/10-recovery-41.png Lifted component: Salient `nectar-post-grid` [data-style=content_overlaid] [data-text-layout=all_bottom_left_shadow] [data-hover-effect=zoom], from http://127.0.0.1:5010/salient/mag/ . Its stylesheet is already vendored and linked by the shell (element-post-grid.q-98228494a0.css) — everything below is a RETARGET of that component, not a reimplementation, and every rule that fights a Salient rule says which one and why (CONVENTIONS.md §8.6). A second, independent source was used for the numbers marked [PDF]: Figma's own PDF export of the two card nodes. PDF keeps the photo as an image XObject and the caption as a text object, so the placement matrices and the text matrices are exact, not measured. They agree with the spec's pixel measurements everywhere they overlap, which is why they are trusted here. ========================================================================== */ .mk-recovery-41 { /* ---- section-local constants. Each appears once on the page, so per CONVENTIONS.md §4 they live here with their citation rather than in tokens.css. --------------------------------------------------------- */ --r41-h: 912px; /* spec §1.1 root bounds — 4+450+4+450+4 */ --r41-card-h: 450px; /* spec §1.5 card height, fixed at both widths */ --r41-inset: var(--mk-space-60); /* spec §1.6 caption padding 60 */ --r41-plate: 114px; /* spec §1.7 "Play mouse " 114 x 114 */ /* Caption paragraph gap. NOT a free choice: the [PDF] text matrices put the title baseline at card y 323 and the description baseline at card y 380 (spec §2.7 measured 327 / 384 in SECTION coords, and card 1 starts at y 4 — the same numbers). With Poppins' real metrics (hhea asc 1050 / desc 350 per 1000 upm, read from fonts/Poppins-Regular.ttf) the 24/43.2 line box puts its baseline 30.0px below its top and the 18/32.4 box puts its baseline 22.5px below its top, so the CSS gap that reproduces a 57px baseline delta is 57 - (43.2 - 30.0) - 22.5 = 21.3px. 21.4 lands the block bottom on 390 = card bottom - 60 exactly. Figma's own paragraphSpacing is 25 (spec §2.2) — the 3.6px difference is Figma vs CSS line-box geometry, not a different design value. */ --post-grid-meta-gap: 21.4px; /* Scrim. Figma OVERRIDES Salient here (spec §6.2 "Scrim divergence — Figma wins"): Salient ships height 55% / rgba(15,15,15,..) / opacity .9; Figma specifies the full 450px card height, pure black, ending at bf = 0.749. The gradientTransform row 1 is [0,1,0] => t = y, so 0 is the card top. Re-confirmed from the PDF shading: axis runs page-y 450 -> 0 with an alpha function of t x 0.75. */ --r41-scrim-from: rgba(0, 0, 0, 0); --r41-scrim-to: rgba(0, 0, 0, 0.749); /* #000000bf, spec §3 */ position: relative; min-height: var(--r41-h); background: var(--mk-surface-mist); /* #f4f9fb, spec §3 */ display: flex; align-items: stretch; /* NO GAP. The root declares itemSpacing 43 with SPACE_BETWEEN, but the two children measure 563 + 717 = 1280 = the frame width, so there is no free space to distribute and Figma renders them flush. Spec §1.1 calls this out as a trap and proves it in pixels (background to x 562.5, photo from x 563.0). Do not reintroduce the 43. */ gap: 0; } /* ========================================================================== 1. TEXT PANEL — 2784:343, fixed 563 (.mk-measure-563 from grid.css) ========================================================================== */ .mk-recovery-41__text { flex: 0 0 auto; padding: var(--mk-page-x); /* 120 on all four sides — spec §1.2 */ box-sizing: border-box; } /* 2784:344 — VERTICAL / MIN / MIN, itemSpacing 24, no padding. Content sums to 589 inside a 672 box, so the children hug the TOP and the slack falls below (spec §1.3, confirmed by first ink at section y 123). */ .mk-recovery-41__group { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--mk-space-24); } /* 2784:421 — .mk-eyebrow (tokens.css) already carries Poppins Light 300 / 16 / 24 / +3px / uppercase. Only the fill and the reset are section business. */ .mk-recovery-41__eyebrow { margin: 0; /* Salient's skin-material sets `p{padding-bottom:var( --nectar-paragraph-bottom-spacing,1.5em)}`, i.e. +24px on a 16px eyebrow. Figma's frame is a 24px line box with nothing under it (spec §1.3), and leaving the padding in place pushed the whole left column down by exactly 24px in the first render. Measured, not guessed. */ padding-bottom: 0; color: var(--mk-ink-strong); /* #000, NOT --mk-ink-body — spec §3 */ } /* The "2/#" counter run. Poppins Medium 500, derived from a bloom-corrected stem ratio of 0.0931 em (spec §2.6). This is the least certain call in the spec — it could be SemiBold 600 at the edge of the error bar — but 600 is not an authored weight anywhere else on this page, so 500 stands. The ES payload reports a UNIFORM Light eyebrow: the emphasis is EN-only. */ .mk-recovery-41__counter { font-weight: var(--mk-w-medium); } /* 2784:346 — Merriweather Light 300 / 48 / 60. tokens.css already pins opsz 18 and letter-spacing 0 for h2. Salient sets h2 sizes in style.css and in the id-scoped dynamic sheet, so this rule is deliberately specific. */ .mk-recovery-41 .mk-recovery-41__h2 { margin: 0; /* tokens.css already does this via `.mk-page :is(h1,h2,h3,.mk-serif)`, but that rule needs the .mk-page ancestor. Restated here so the fragment is correct on its own — Salient's dynamic sheet ships `body h2{font-family: Cormorant;letter-spacing:-0.03em;font-size:48px;line-height:58px}` plus three breakpoint overrides, and losing the .mk-page ancestor for any reason silently swaps the face for the demo's Cormorant. */ font-family: var(--mk-font-serif); /* ---- OPTICAL SIZE: this deliberately CONTRADICTS CONVENTIONS.md §8.4 and the `.mk-page :is(h1,h2,h3,.mk-serif)` rule in tokens.css, which pin `font-optical-sizing:none; font-variation-settings:"wdth" 100,"opsz" 18` on the reasoning that every named Merriweather instance pins opsz 18. Measured against figma-truth/sections-en/10-recovery-41.png, that is not what Figma rendered. Five variants of this exact H2 were rendered at 2x and diffed against the Figma export over the headline's bounding box: opsz 18 (the shell's pin) ink 124.5..321.5 8692 px meanDiff 26.45 opsz = font-size (auto) ink 124.5..313.0 8006 px meanDiff 0.60 opsz 48 (explicit) ink 124.5..313.0 8006 px meanDiff 0.60 wdth 96 / opsz 30 ink 124.5..312.5 8248 px meanDiff 5.20 opsz 144 ink 123.5..286.0 6281 px meanDiff 29.02 FIGMA REFERENCE ink 124.5..313.5 8050 px The pin makes the headline 8px too wide (every glyph ~4% wide, uniformly — checked glyph by glyph, so it is a width/optical difference, not tracking). Figma's canvas applies optical sizing by TYPE SIZE. `auto` is therefore the faithful setting, and this override is measured, not preferred. THIS IS A SHELL-LEVEL FINDING: the same pin is on every h1/h2/h3 on the page, including the 96px hero. Flagged in the handback. */ font-optical-sizing: auto; font-variation-settings: normal; letter-spacing: 0; /* not the demo's -0.03em */ font-weight: var(--mk-w-light); font-size: var(--mk-size-display); /* 48 */ line-height: var(--mk-lh-display); /* 60 — spec §2.7, ES proves it: the two-line ES H2 measures 60 apart */ color: var(--mk-ink-strong); } /* 2784:347 — Poppins 400 / 20 / 180%, #1a2328. */ .mk-recovery-41__body { width: 100%; } .mk-recovery-41__body p { margin: 0; padding-bottom: 0; /* kills Salient's skin-material `p{padding-bottom:1.5em}` = +30px on a 20px paragraph. Figma's paragraph rhythm is the 25px below, nothing else. */ font-family: var(--mk-font-sans); font-weight: var(--mk-w-regular); font-size: var(--mk-size-body); /* 20 */ line-height: var(--mk-lh-body); /* 180% -> 36 */ color: var(--mk-ink-body); } /* paragraphSpacing. Derived, not read (spec §9.4): within a paragraph the baseline advance is 36, across the stored "\n" it is 61 => +25. Confirmed by the exact node-height identity 12 x 36 + 25 = 457 = the node's stated height. It is a margin, NOT the 24px flex gap (spec §7.9). */ .mk-recovery-41__body p + p { margin-top: 25px; } /* The only two decorated runs in the body — "World Allergy Org" and "EPA". textDecoration reports "mixed" on the node; the render shows UNDERLINE on exactly these two and nothing else (spec §2.4). The ES body has NO decoration at all, so this stays EN-only. */ .mk-recovery-41__cite { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; /* matched to the render; Figma does not expose an underline offset */ } /* ========================================================================== 2. IMAGE RAIL — 2784:340. Fluid width (.mk-rail-images = 100% - 563), full-bleed to the right edge, 4 top / 4 bottom padding, 4 between cards. ========================================================================== */ .mk-recovery-41__rail { position: relative; flex: 1 1 auto; min-width: 0; padding: var(--mk-space-4) 0; /* T4 R0 B4 L0 — spec §1.4 */ box-sizing: border-box; } /* Salient's own base is `display:flex;flex-wrap:wrap`. One column, stacked, on the Figma 4px pitch. */ .mk-recovery-41 .nectar-post-grid.mk-recovery-41__grid { flex-direction: column; flex-wrap: nowrap; gap: var(--mk-space-4); /* Salient resolves .content colour through this var; pin it so we do not depend on the demo's --nectar-font-light-color being present. */ --post-grid-light-text-color: var(--mk-ink-inverse); } /* Salient sizes items from data-grid-item-height in the DEMO's inline sheet (`.nectar-post-grid[data-grid-item-height="50vh"] .nectar-post-grid-item{ min-height:50vh}`), which is not part of the vendored file. Same pattern, our value: the card height is a hard 450 at BOTH design widths (spec §5.1). */ .mk-recovery-41 .nectar-post-grid[data-grid-item-height="450px"] .nectar-post-grid-item { width: 100%; height: var(--r41-card-h); min-height: var(--r41-card-h); } /* 2784:356 / 2784:364 — cornerRadius TL 4 · TR 0 · BR 0 · BL 4. Verified by arc fit on the @2x export: R = 8 image px = 4 section px on the left corners, 0 on the right (spec §1.5). Salient's `.inner` already carries overflow:hidden, which is what clips the hover zoom to the radius. */ .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .inner { border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card); background-color: transparent; /* fights Salient's rgba(0,0,0,.1) placeholder ground; the photos are opaque and Figma has no such fill */ } /* ---- the scrim. Overrides `.nectar-post-grid[data-text-layout=all_bottom_left_shadow] .nectar-post-grid-item div.inner:before{height:55%;opacity:.9; background:linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75))}` Salient's STRUCTURE and TIMING are kept (position, z-index 10, the .65s cubic-bezier(.05,.2,.1,1) opacity transition); only the geometry and the colour stops move to Figma's. ------------------------------------ */ .mk-recovery-41 .nectar-post-grid[data-text-layout=all_bottom_left_shadow] .nectar-post-grid-item div.inner:before { height: 100%; opacity: 1; background: linear-gradient(to bottom, var(--r41-scrim-from) 0%, var(--r41-scrim-to) 100%); } /* ---- card 2 only: scaleMode CROP, not FILL. [PDF] `1178.555176 0 0 450 -461.445526 0 cm` on a 1376x768 source. As a fraction of the 717 card that is width 164.373%, left -64.358% — i.e. the right 60.837% of the photo, stretched to the frame. That is precisely the imageTransform [[0.6083721,0,0.3915349],[0,1,0]] of spec §3.2, and the percentages hold at 1440 too (CROP maps the crop rect onto whatever box it is given). Verified against the Figma render: median per-channel delta 2 for this placement versus 12 for a plain cover, so the anamorphic stretch is real and intended by the source file, not a reading error. */ .mk-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img { width: 164.373%; /* 1178.555176 / 717 */ left: -64.358%; /* -461.445526 / 717 */ object-fit: fill; /* deliberate: CROP does not preserve aspect. See the note above. */ } /* Salient's `.row .nectar-post-grid .nectar-post-grid-item-bg img:not([srcset]) {width:100%}` would undo the line above if this section is ever nested in a Salient .row, so restate it at higher specificity. */ .mk-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img:not([srcset]) { width: 164.373%; } /* ---- caption box. Overrides `.nectar-post-grid .nectar-post-grid-item .content{padding:35px}`. Figma: 60 on all four sides, block bottom-anchored (spec §1.6 — the -180deg rotated frame in Figma is just how the designer got MAX alignment; build it as a bottom-anchored inset box, which is exactly what Salient's all_bottom_left flex column already does). */ .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .content { padding: var(--r41-inset); --post-grid-padding: var(--r41-inset); } /* 2784:380 / 2784:392 run 1 — Poppins Light 300 / 24 / 180%, white. Weight and size are [M] in the spec, reconstructed from stem width and x-height because this MCP build cannot expand mixed text runs (spec §9.1). THREE things are being overridden here: - Salient's `line-height:1.3em` and `max-width:75%` on .post-heading - our own tokens.css rule `.mk-page :is(h1,h2,h3,.mk-serif)`, which would otherwise render this h3 in Merriweather with opsz pinned. */ .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .content .post-heading { margin: 0; max-width: 100%; font-family: var(--mk-font-sans); font-optical-sizing: auto; font-variation-settings: normal; font-weight: var(--mk-w-light); font-size: var(--mk-size-title); /* 24 */ line-height: var(--mk-lh-body); /* 180% -> 43.2 */ letter-spacing: 0; } /* 2784:380 / 2784:392 run 2 — Poppins Regular 400 / 18 / 180%, white. Overrides Salient's `.meta-excerpt{line-height:1.6}`; the top margin comes from Salient's own --post-grid-meta-gap, set at the top of this file. */ .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .meta-excerpt { max-width: 100%; font-family: var(--mk-font-sans); font-weight: var(--mk-w-regular); font-size: var(--mk-size-body-sm); /* 18 */ line-height: var(--mk-lh-body); /* 180% -> 32.4 */ } /* DROP_SHADOW on all four caption text nodes: #00000080, offset (0,4), radius 14 (spec §3.3). No spread was returned; assumed 0 (spec §9.9). */ .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .content .post-heading, .mk-recovery-41 .nectar-post-grid .nectar-post-grid-item .meta-excerpt { text-shadow: 0 4px 14px var(--mk-shadow-50); } /* ========================================================================== 3. THE "View" PLATE — 2784:413 Inner markup (.color-circle + span.inner-layer) is Salient's `.nectar-view-indicator`, built by init.js from data-indicator-text. Its own CSS is a position:fixed 94px cursor follower, which is NOT what Figma draws, so the two rules below are the lifted ones with Figma's geometry: .nectar-view-indicator .color-circle{background-color:#000;width:100%; height:100%;display:block;position:absolute;border-radius:50%} .nectar-view-indicator.blurred-bg .color-circle{backdrop-filter:blur(..)} body .nectar-view-indicator span{font-size:16px;color:#fff; text-align:center;width:100%;display:inline-block} The root class is ours on purpose: init.js reuses any existing `.nectar-view-indicator` in the DOM, so carrying that class would let a later section's real indicator hijack this static plate. ========================================================================== */ .mk-recovery-41__view { position: absolute; /* card 1 spans rail y 4..454, so 4 + 60 = 64 from the rail's own top edge; the rail's right edge IS the section's right edge, so 60 is 60 (spec §1.7, which also rules that the ES left-pinned position is a constraint artifact and must NOT be reproduced). */ top: calc(var(--mk-space-4) + var(--r41-inset)); right: var(--r41-inset); width: var(--r41-plate); height: var(--r41-plate); z-index: 300; /* above Salient's .content (200) */ pointer-events: none; /* keep .nectar-post-grid-link clickable */ } .mk-recovery-41__view .color-circle { position: absolute; inset: 0; display: block; border-radius: var(--mk-radius-circle); /* Figma cornerRadius 90 on a 114 box clamps to a full circle */ background-color: var(--mk-pill-scrim-fill); /* #000 @ 0.5 — spec §3 */ /* BACKGROUND_BLUR radius 4. Figma's radius is ~2x the CSS Gaussian sigma, so the spec (§3.3, §9.11) proposes blur(2px) while tokens.css chose `--mk-pill-blur: blur(4px)` for the same Figma radius on the nav pills (00-hero §2.4). They cannot both be right. Settled by measurement over the plate's 114px box against the Figma export — the mirror edge running behind the circle is the tell: blur(0) meanDiff 2.278 p95 9 pct>16 1.12 blur(2) meanDiff 1.738 p95 4 pct>16 0.57 <- closest blur(3) meanDiff 2.143 p95 7 pct>16 0.57 blur(4) meanDiff 2.737 p95 12 pct>16 2.13 So blur(2px) here, and --mk-pill-blur is probably 2x too strong page-wide. Flagged in the handback rather than edited: tokens.css is read-only to a section builder. */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .mk-recovery-41__view .inner-layer { position: relative; display: block; width: 100%; height: 100%; font-family: var(--mk-font-sans); font-weight: var(--mk-w-light); font-size: var(--mk-size-body-sm); /* 18 — spec §1.7 child 2784:419 */ line-height: var(--r41-plate); /* cross-axis centred: (114-32)/2 = 41 */ text-align: center; color: var(--mk-ink-inverse); } /* ========================================================================== 4. RESPONSIVE Only 1280 and 1440 exist in the file. Everything below 1280 is spec §5.2 inference, and grid.css already steps --mk-page-x (120 -> 64 -> 48 -> 24) and collapses .mk-measure-563 / .mk-rail-images to 100% at <=1024. ========================================================================== */ /* 2026-09-02 — WAS `(max-width: 1024px)`. An iPad Pro 13" in portrait is 1024px wide: >=1000 runs the DESKTOP recovery engine (the founder's rule: landscape/>=1000 = desktop treatment), which positions the panels for the ROW layout, while this block had already broken the row into a column — MEASURED at 1024x1366: step 1's panel rendered as a 65px sliver (_tools/_scratch/eyes/ipadpro-rail). The tablet stack now ends where the engine begins. */ @media (max-width: 999px) { /* Stack: text block first, image rail beneath, still full-bleed. Card height and the 4px pitch are kept (spec §5.2). */ .mk-recovery-41 { flex-wrap: wrap; min-height: 0; } .mk-recovery-41__text { flex-basis: 100%; } .mk-recovery-41__rail { flex-basis: 100%; } /* grid.css collapses .mk-measure-323 to 100% here, which would run 20/36 body copy across the whole viewport. Spec §5.2 says to reduce the panel padding rather than stretch the measure, so cap the block at the width Figma gave the whole panel — a Figma number, not an invented one. */ .mk-recovery-41__group { max-width: 563px; } } @media (max-width: 767px) { /* Caption inset 60 -> 32 BEFORE touching the type: at 375px a 60px inset leaves only 255px of measure (spec §5.2). The plate scales with it. */ .mk-recovery-41 { --r41-inset: 32px; --r41-plate: 88px; } .mk-recovery-41 .nectar-post-grid[data-grid-item-height="450px"] .nectar-post-grid-item { height: auto; min-height: var(--r41-card-h); } } @media (max-width: 690px) { /* Salient forces `padding-bottom:75%` on overlaid items at this width to fake an aspect ratio. Our cards have a real height, so the extra padding would add 75% of the card width to it. */ body .mk-recovery-41 .nectar-post-grid[data-columns][data-grid-spacing] .nectar-post-grid-item { padding-bottom: 0; } } /* ========================================================================== 10 · MK-RPLAN BINDING — D23 / D24 / D26. See sections/09-recovery-42.css for the component and the founder trace. >>> THIS SECTION IS WHERE D26 IS LITERALLY TRUE. <<< The rule retired below read: .mk-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img { width: 164.373%; left: -64.358%; object-fit: fill; } with the comment "deliberate: CROP does not preserve aspect … Verified against the Figma render: median per-channel delta 2 for this placement versus 12 for a plain cover, so the anamorphic stretch is real and intended by the source file, not a reading error. Do not 'fix' it." The reasoning was sound and the conclusion was wrong. Figma node 2784:364 carries `scaleMode: CROP` with imageTransform [[0.6084,0,0.3915],[0,1,0]], which maps the right 60.837% of a 1376x768 photo onto a 717x450 frame — an x-scale of 1.644 against a y-scale of 1.0, i.e. the ERMI kit is squashed horizontally by 39%. The build reproduced it faithfully because Figma is the pixel authority. The founders looked at the result and said, D26, "recovery-plan images look stretched." A crop handle dragged in the design file is a mistake in the design file, not a specification. Where a Figma value is anamorphic, the render is evidence of a Figma error and `cover` is the correct build — that is PREDICATE P-D26 in the helix. ========================================================================== */ #s10-recovery-41 { min-height: 100svh; } #s10-recovery-41.mk-recovery-41 { display: grid; grid-template-columns: 50% 50%; align-items: start; } #s10-recovery-41 .mk-recovery-41__text { flex: none; padding: var(--mk-page-x); padding-right: var(--mk-space-60); } #s10-recovery-41 .mk-recovery-41__group { max-width: 100%; } #s10-recovery-41 .mk-recovery-41__rail { flex: none; padding: 0; } /* NB `#s10-recovery-41 .mk-recovery-41 …` does NOT match: the section element IS `.mk-recovery-41`, it does not contain one. The 4px grid gap survived a first pass because of exactly that slip — measured 1804 instead of 1800. */ #s10-recovery-41 .nectar-post-grid.mk-recovery-41__grid { gap: 0; padding: 0; margin: 0; } #s10-recovery-41 .nectar-post-grid-wrap { padding: 0; margin: 0; } #s10-recovery-41 .nectar-post-grid[data-grid-item-height="450px"] .nectar-post-grid-item { height: 100svh; min-height: 100svh; } #s10-recovery-41 .nectar-post-grid .nectar-post-grid-item .inner { border-radius: 0; } /* D26 — the anamorphic CROP is reverted to an aspect-preserving cover. */ #s10-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img, #s10-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img:not([srcset]), #s10-recovery-41 .nectar-post-grid-item-bg img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center; } /* The corner-pinned "View" plate goes. It is a STATIC copy of a cursor-following control parked in the top-right of card 1 — the same pattern the founders ordered removed in D16 ("REMOVE the example mouse-hover swatch left visible in the top-right") and the same class G6 makes cursor-following by definition. It was anchored to a 450px card that no longer exists, so leaving it would float it over the middle of a full-screen photo. Markup kept, hidden here, so the Figma node trace (2784:413) survives for whoever authors the real one. */ #s10-recovery-41 .mk-recovery-41__view { display: none; } /* ========================================================================== §H. THE HOVER CURSOR — Figma 2784:413, taxonomy variant D (`3092:1375`) Lane: r2:cursor-sixth. Spec of record: review/branding/cursors.md §2.1/§2.5. Contract at the seam: build/COMPONENT-hover-cursor.md. WHY THIS BLOCK EXISTS AND WHEN IT DIES --------------------------------------------------------------------------- `sections/10-recovery-41.html` now sets `data-indicator="yes"`, so Salient's own `$t(el,"view-indicator")` builds and drives the `.nectar-view-indicator` singleton. That engine gets the FILL, the INK COLOUR, the LABEL TEXT and the BLUR FLAG from attributes (which is the only level that works — Salient writes those inline and inline beats every stylesheet). It does NOT get the DIAMETER, the BLUR RADIUS, the circle's 2px offset or the label's typography from attributes: those live in the vendored stylesheets at values that are not ours. This block is the four corrections, and nothing else. SELF-RETIRING. Every geometry rule below is gated on `:not([data-myk-cursor-variant])`. That attribute is written by `js/myk-hover-cursor.js` the instant the controller takes ownership of the disc (REQ-CUR-1, owner `final:consolidate`). So this block switches ITSELF off when the component lands — it cannot become the stale duplicate that REQ-CUR-3 exists to delete, and it cannot fight the controller's inline write. Filed as REQ-CUR-6 so the sweep removes the file's dead half deliberately. The TYPOGRAPHY rules at the bottom are deliberately NOT gated. Read why there. ========================================================================== */ /* §H.1 · THE DISC — 96, not Salient's 94. `style-non-critical.q-40f8116f6d.css` ships `.nectar-view-indicator{width:94px; height:94px;left:-47px;top:-47px}`. 94 is the Salient donor's number (`salient-truth/MECHANIC-carousel-cursor.md`); the Mykrobial general- interactivity disc is 96 at both in-context placements (`3333:136`, `3333:169` — cursors.md §2.5), and 96 is what the component's variant table ships for `general/flip` and `general/labelled` alike. `left/top` must stay at exactly -half, because Salient centres the node by translating it to the raw clientX/clientY with no correction of its own. */ .nectar-view-indicator:not([data-myk-cursor-variant]) { width: 96px; height: 96px; left: -48px; top: -48px; } /* §H.2 · THE CIRCLE — kill the 2px limp. Salient's `.nectar-view-indicator .color-circle` is `width:100%;height:100%` at `left:-2px;top:-2px`, so the painted disc sits 2px up and left of the point the engine is tracking. Nothing in the Figma taxonomy has that offset (§2.0: the disc is a true circle centred on the pointer), and it is the sort of 2px that reads as "slightly broken" without ever being locatable. `border` is restated as none for the same reason §2.0 gives: no cursor in this system has a border. Salient's `style-see-through` draws a 2px white ring; we never select that value, but a future edit that does would silently get one. */ .nectar-view-indicator:not([data-myk-cursor-variant]) .color-circle { left: 0; top: 0; border: none; } /* §H.3 · THE BLUR — 4px, not 12. `data-indicator-blur="true"` in the HTML makes `mouseBind` add `.blurred-bg`, and the vendored rule behind that class is `backdrop-filter: blur(12px)`. Figma declares `BACKGROUND_BLUR` radius **4** on variant D, render-proven twice independently: cursors.md §2.3 (89–94% of backdrop high-frequency energy destroyed inside the disc on the taxonomy board) and §4B.0 (the mirror edge behind `2784:413` is visibly softened inside the disc and sharp outside it, in the page comp itself). 12px is Salient's house value and is three times ours. Both prefixes: Safari still needs `-webkit-`. */ .nectar-view-indicator:not([data-myk-cursor-variant]).blurred-bg .color-circle { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* §H.4 · THE LABEL BOX — a real box to centre a word in. Salient's span is `display:inline-block; line-height:94px` — it centres by line-height, which only works while the line-height IS the diameter. The moment §H.5 sets the type to 18/180% that breaks and the word rides the top of the disc. This is the same absolute-inset flex box `css/myk-hover-cursor.css` §4 gives `data-myk-content^="label"`, so the two agree by construction and the REQ-CUR-6 hoist is a copy, not a re-derivation. (This is NOT the `inset: 0` trap recorded in COMPONENT §10b.2. That one is about the CHEVRON rail on `.nectar-drag-indicator`, whose glyphs are absolutely positioned against a deliberately zero-height span. A label has no such children and wants a real box.) */ .nectar-view-indicator:not([data-myk-cursor-variant]) .inner-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* §H.5 · THE LABEL TYPE — and the two `!important`s, which are not laziness. NOT GATED on `:not([data-myk-cursor-variant])`, deliberately. Measured live on `_probe-hover-cursor.html` WITH the controller running: the label computed to `14px 400 Poppins` and `text-transform: uppercase`, i.e. it renders **VIEW** at 14px where Figma draws **View** at 18. The controller is not at fault — it declares 18px/180% correctly in `myk-hover-cursor.css` §6 — but the vendored dynamic stylesheet `salient-dynamic-styles-multi-id-37.q-6d7044fbbd.css` ships .nectar-view-indicator span { font-size: 14px !important; } and names `.nectar-view-indicator span` inside a ~60-selector uppercase list carrying `text-transform: uppercase !important`. `!important` beats specificity, so the component's own declarations lose. The DOM's textContent is still the string `View`, which is why a text-equality check passes and only a render (or a computed-style read) catches it — the exact trap the brief warned about. This is filed for the component as REQ-CUR-5; until it lands these two lines are the only thing on the page that makes variant D read correctly in EITHER world, so they stay ungated and they stay `!important`. The other three values are ordinary cascade wins over the same rule's `font-family: Inter; letter-spacing: .1em; font-weight: 600` — Poppins Regular 18 / 180%, letter-spacing 0, per cursors.md §2.1. */ .nectar-view-indicator .inner-layer, .nectar-view-indicator span { font-family: var(--mk-font-sans); font-weight: 400; font-size: var(--mk-size-body-sm) !important; /* 18 */ line-height: 180%; letter-spacing: 0; text-transform: none !important; text-align: center; white-space: nowrap; } /* ========================================================================== R3 · 10 · MK-RPLAN ROUND-3 BINDING — D04 · D05 · D06 · D07 Component, timings and the full rationale: sections/09-recovery-42.css, block "R3 · MK-RPLAN, ROUND-3 PASS". This file only re-states the three id rules above that pin round-2's values, at their own specificity. ========================================================================== */ /* D06 — 100svh -> 80svh. At 1512x900 the panel goes 720x900 -> 720x720, which takes `cover` from a 1.172x UPSCALE of the 1376x768 source to a 0.9375x downscale and hands back a quarter more of the frame, and leaves 176px of card 2 showing under card 1. */ /* +1 class over css/rhythm.css §B04's copy of this same selector — see sections/09-recovery-42.css block R3-5 for why the two disagree and which founder item owns which box. `min-height` too: rhythm.css raises both, and a 120svh floor silently defeats an 80svh height. */ .mk-page #s10-recovery-41 .nectar-post-grid[data-grid-item-height="450px"] .nectar-post-grid-item.mk-rplan__panel { height: var(--mk-rplan-panel-h); min-height: var(--mk-rplan-panel-h); } /* D07 — Figma cornerRadius TL4 / TR0 / BR0 / BL4. Round 2 zeroed it because the panel was edge-to-edge on all four sides; it is still edge-to-edge on the right, so only the left pair rounds. The post grid paints its photo on `.inner`, which is the element that has to carry the clip. */ #s10-recovery-41 .nectar-post-grid .nectar-post-grid-item, #s10-recovery-41 .nectar-post-grid .nectar-post-grid-item .inner { border-radius: var(--mk-rplan-radius) 0 0 var(--mk-rplan-radius); overflow: hidden; } /* D07 — the 4px gutter. `.nectar-post-grid` keeps `gap: 0` from round 2 ON PURPOSE: the component gives every panel `margin-bottom: 4px`, so a grid gap here would stack with it. Measured with both: section 1456 instead of 1452, i.e. an 8px gutter where Figma says 4. Only the 4px lead-in is added, on the wrapper, because 10's `.mk-rplan__stage` is the rail itself and its padding is pinned to 0 by a round-2 id rule above. */ #s10-recovery-41 .nectar-post-grid-wrap { padding-top: var(--mk-rplan-gap); } /* D04 — see 09's block R3-2. The row's `padding-inline` is dropped above 1440 and the same amount is re-applied here, so ink-left is unchanged and the photo reaches the right edge of the browser. */ /* D04's left gutter is css/rhythm.css §D04's, not this file's — see 09-recovery-42.css block R3-2. The rail keeps its authored padding. */ /* D05 — placement. Chosen by rendering the real 720x720 crop of the real asset (scratchpad/crop-sim2.png), not by guessing. card 1: the MYCOTOXINS PANEL card and the counter sit at 0.72-0.88 of the frame; centre-cropping cut them off at the right edge. card 2: the ERMI kit flat-lay is centred at ~0.65. NOTE both of these are 55KB / 37KB JPEGs at 1376x768 and are the only two recovery photographs with no .webp or .png sibling on disk — the residual "lower quality" after the upscale is fixed is theirs, and it is an asset request (SHARED-REQUESTS REQ-BR-7), not a CSS one. */ #s10-recovery-41 .mk-recovery-41__item--1 .nectar-post-grid-item-bg img { object-position: 82% center; } #s10-recovery-41 .mk-recovery-41__item--2 .nectar-post-grid-item-bg img, #s10-recovery-41 .mk-recovery-41__item--crop .nectar-post-grid-item-bg img { object-position: 70% center; } /* D04 — the page gutter the row's `padding-inline` used to supply, moved onto the rail so the media column can bleed to the glass. Rationale, the measurement and the rhythm.css interaction: 09-recovery-42.css block R3-2. MUST be the last padding declaration for this rail in this file. */ #s10-recovery-41 .mk-recovery-41__text { padding-left: var(--mk-rplan-gutter); } /* THE PINNED RAIL, AT ID SPECIFICITY. The component states the pin in 09-recovery-42.css block R3-A at (0,3,0), and four of the five sections pin their rail width with an id rule of their own (12 uses 100%, 13 uses auto) that out-ranks it. MEASURED with only the component rule: 12 and 13 computed 1512px wide instead of 756 when fixed — a rail spread across the whole viewport, on top of its own photographs. A width of 100% of a grid AREA and of the VIEWPORT are the same number until the element leaves flow, which is exactly why this only appears once something is pinned. Restated here, per file, where it wins. grid-column is belt: a fixed rail is out of grid flow, so without an explicit track the stage would auto-place into column 1. */ #s10-recovery-41[data-rplan-rail] .mk-recovery-41__text { position: fixed; top: 0; left: var(--mk-rplan-pin-x, 0px); width: var(--mk-rplan-pin-w, 50%); height: 100svh; } #s10-recovery-41 .mk-rplan__rail { grid-column: 1; } #s10-recovery-41 .mk-rplan__stage { grid-column: 2; } /* THE MEASURE — the one step out of five that was still 323px wide. `.mk-measure-323` (grid.css) sets a fixed 323px WIDTH, the Figma measure for the retired 563px rail. Round 2 released it on 09 (`#s09-recovery-42 .mk-recovery-42__copy { width: 100% }`) and on 11/12/13 by other routes, and missed 10; `#s10-recovery-41 .mk-recovery-41__group { max-width: 100% }` raises a cap that was never what bound it. MEASURED at 1512: copy width 09 540 · 10 323 · 11 540 · 12 756 · 13 540. It was survivable while each rail scrolled past on its own. It is not survivable now that the five rails CROSS-FADE IN PLACE (block R3-A): the text block visibly narrowed to 60% on step 2 and widened again on step 3, inside a transition whose entire job is to make the copy the only thing that changes. Released to the rail measure its four siblings use. */ #s10-recovery-41 .mk-recovery-41__group { width: 100%; max-width: 100%; } /* ========================================================================== 10 · MOBILE STRIP MATES (<=999px) — for 09-recovery-42.css block R4-M. Rationale at 09's twin block. NB 10's class names are crossed: the TEXT element is `.mk-recovery-41__text` (the mk-rplan__rail) and `.mk-recovery-41__rail` is the stage. The 50/50 template lives on the SECTION here, so the release does too. ========================================================================== */ @media (max-width: 999px) { #s10-recovery-41.mk-recovery-41 { grid-template-columns: 100%; } #s10-recovery-41 .mk-rplan__rail, #s10-recovery-41 .mk-rplan__stage { grid-column: auto; } #s10-recovery-41 .mk-recovery-41__text { padding: var(--mk-rplan-strip-top) var(--mk-page-x) var(--mk-rplan-strip-bot, var(--mk-space-24)); /* R5 item 2 */ } /* Caption: NOT restated. Round 6 retires the top-band squeeze (R5-STACK, deleted in 09-recovery-42.css) that this id-rank mate used to restore against — panels no longer shrink per stacked index, so 10's post-grid caption reverts to its own authored `.content { justify-content: flex-end }` and default scrim, unmodified. */ /* R4-M round-9 mate — WIDTH, id-ranked (FT-20260901: "your cards are hanging off the right side"). Vendor's own `body .nectar-post-grid[data-columns][data-grid-spacing] .nectar-post-grid-item { width: 100%; padding-bottom: 75% }` (element-post-grid.q-98228494a0.css, @media max-width:690px, (0,4,1)) outranks the shared `.mk-rplan-js .mk-rplan .mk-rplan__panel { width: auto }` (0,3,0) at exactly the Pixel-7 width this was reported at (412 < 690). `width:100%` PLUS the shared rule's own `margin: 0 var(--mk-page-x)` is the bug: percentage width does not subtract margins, so the card occupies 100% + 2×page-x — page-x wider than its container, hanging off the right (and, less visibly, the left). 10 is the only one of the five sections built on `nectar-post-grid` rather than `nectar-fancy-box`/raw columns, so it is the only one this vendor rule can reach. */ #s10-recovery-41 .mk-rplan__panel { width: auto; padding-bottom: 0; } }