/* ============================================================================ SECTION 12-recovery-44 — "4.4 Recovery" — Figma node 2785:464 (1280 x 1366) ---------------------------------------------------------------------------- Ground truth : ../../figma-truth/12-recovery-44.spec.md ../../figma-truth/sections-en/12-recovery-44.png (2x) + this run's own SVG vector export of 2785:466 / :471 / :474 / :477 (written to _tools/_scratch/) which settles several values the spec could only estimate from pixels. Every such correction is marked [SVG-VECTOR] below. Lifted from : Salient `elements/fancy-box` demo on the live mirror http://127.0.0.1:5010/salient/elements/fancy-box/ — `.nectar-fancy-box[data-style="hover_desc"][data-bg-animation="long_zoom"]` Its stylesheet is already vendored: vendor/wp-content/themes/salient/css/build/elements/element-fancy-box.q-b2fac09bdb.css Nothing below re-implements that component; every rule here either RETARGETS one of its declarations to a Figma value or neutralises a demo-specific behaviour. The Salient rule being overridden is named in the comment above each override. THE THREE PHOTOS ARE REAL SOURCE BYTES, NOT A COMPOSITE. spec §8.6 says raw image bytes are unavailable through the MCP. They are — via `save_screenshots ... format: "SVG"`. Figma's SVG export embeds the image FILL as a base64 PNG in and emits the gradient scrim and the caption as separate SVG nodes, so the raster comes out clean: no scrim, no baked caption. 1376x768 each, in img/12-recovery-44/. ========================================================================== */ .mk-recovery-44 { /* Section fill — pixel-verified rgb(244,249,251), spec §3.1 (2785:464). */ background: var(--mk-surface-mist); /* spec §1.1: layoutMode HORIZONTAL, itemSpacing 43 is INERT (563 + 717 = 1280 exactly, and 563 + 877 = 1440). spec §5.1: "Adding a 43px gap would open a #f4f9fb seam that does not exist in either export." -> NO gap. */ display: flex; align-items: stretch; min-height: 1366px; /* spec header: EN 1280 x 1366, ES 1440 x 1366 */ } /* ========================================================================== 1. LEFT RAIL — fixed editorial column spec §4.3: "a fixed 563px editorial rail with a 120px inset, butted against a flexible full-bleed image band. Implement it as a two-child flex row (flex: 0 0 563px + flex: 1 1 auto), *not* as col-span-* on a 12-column grid." 563 is not a magic number: it is 120 + 323 + 120, i.e. the page margin, the real 323px measure, and the page margin again — which is why the width is expressed against --mk-page-x and stays correct when the margin steps down. .mk-container is deliberately NOT used here: it would inset BOTH sides of the whole 1280 band, and the image band must bleed to the frame edge. ========================================================================== */ .mk-recovery-44__rail { flex: 0 0 auto; box-sizing: border-box; width: calc(323px + 2 * var(--mk-page-x)); /* = 563 @ 120. spec §4.1 */ padding: var(--mk-page-x); /* T/R/B/L 120 — spec §1.1 (2785:465) */ display: flex; flex-direction: column; justify-content: center; /* primaryAxisAlignItems CENTER */ align-items: flex-start; /* counterAxisAlignItems MIN */ gap: var(--mk-space-24); /* itemSpacing 24 — spec §1.1 (2785:466) */ } /* The three stack children are hugged to the 323 measure so the body wraps exactly where Figma wraps it (12 lines x 36 = 432 — spec §2.1). `padding: 0` is NOT belt-and-braces: Salient's style.css puts a bottom padding on every

(measured in the browser as 24px on the eyebrow and 30px on the body). Left alone it adds 54px to the 564px content block, the centred stack starts at 374 instead of 401, and every element in the rail is 27px high. CONVENTIONS §8.6 — measure first, then override. */ .mk-recovery-44__rail > * { width: 100%; margin: 0; padding: 0; } /* -- eyebrow · 2785:467 --------------------------------------------------- Poppins 16 / lh 24 / tracking 3px / uppercase / #000. .mk-eyebrow (tokens.css) already carries family, weight, size, line-height, tracking and text-transform; only the fill is section-side. The stored characters are sentence case ("Recovery plan #/#") and Figma renders them upper — CONVENTIONS §8.2. Keep the sentence case in the markup. */ .mk-recovery-44__eyebrow { color: var(--mk-ink-strong); } /* MIXED RUN. spec §2.1 measured it and could only call it "medium confidence". [SVG-VECTOR] settles it: the exported ink box for 2785:467 is 207.243 x 17.904 px. Rebuilding that string from the shipped faces gives all Light .................. 204.272 (off by 2.97) Light + Regular "#/#" ...... 205.664 (off by 1.58) all Medium ................. 212.288 (off by 5.05) Light + MEDIUM "#/#" ....... 207.216 (off by 0.027) <-- this one and Poppins Medium's "/" (yMax 944, yMin -175) is the only glyph in the string that produces an ink height of exactly (944+175)/1000 * 16 = 17.904. Two independent agreements, so the split is a read, not a guess. */ .mk-recovery-44__eyebrow-num { font-weight: var(--mk-w-medium); } /* -- display heading · 2785:468 ------------------------------------------- Merriweather Light 48 / lh 60 / tracking 0 / #000. tokens.css `.mk-page :is(h1,h2,h3,.mk-serif)` already pins font-optical-sizing:none + "wdth" 100, "opsz" 18 — CONVENTIONS §8.4. Rendered as

: the page's single

belongs to the hero (00-hero). */ .mk-recovery-44 .mk-recovery-44__rail .mk-recovery-44__title { font-family: var(--mk-font-serif); font-weight: var(--mk-w-light); font-size: var(--mk-size-display); /* 48 */ line-height: var(--mk-lh-display); /* 60px */ color: var(--mk-ink-strong); /* OVERRIDES the `body h2, …` branch of the WP-generated salient-dynamic-styles-multi-id-37.css, which sets `letter-spacing:-0.03em` and, measured in the browser, beats tokens.css's own `.mk-page :is(h1,h2,h3,.mk-serif){letter-spacing:0}`. Unfixed it tightens "[Stabilize]" by 1.44px per glyph pair. spec §2.1: letterSpacing 0. */ letter-spacing: 0; } /* -- body · 2785:469 ------------------------------------------------------- Poppins Regular 20 / lh 180% (=36) / #1a2328 / 12 lines. */ .mk-recovery-44__body { 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% -> 36px */ color: var(--mk-ink-body); } /* THE CITATION IS A REAL HYPERLINK, AND IT IS UNDERLINED. spec §8.5 reports `textDecoration: "mixed"` on this node and concludes "no underline or strikethrough is visible anywhere in the 2x render. Treated as none." [SVG-VECTOR] shows that conclusion is wrong. The export carries — three 1px underline rules on the last three lines — and three wrappers over the same three runs. The underline starts 37.8125px into line 10, which is exactly the advance width of the word "the " in Poppins Regular 20 (37.82), so the linked run begins at "Journal" and ends at "Practice". Underline geometry read off the same export: top edge 2.0px below the baseline, 1.0px thick, painted in the body colour (no separate link colour). */ .mk-recovery-44__body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; /* [SVG-VECTOR] 345.68 - 344.68 */ /* Figma puts the rule TOP 2.0px below the baseline ([SVG-VECTOR]: line-12 baseline 834, rule 836..837). `text-underline-offset` is NOT measured from the baseline — it is added to the UA's zero position. Measured that zero position directly (_tools/_scratch/underline-probe.html: the same run rendered at transform:scale(16) against a 1px reference rule pinned to baseline+2): at `auto` the underline lands exactly one CSS pixel ABOVE the reference, i.e. Blink's zero is baseline + max(1, ceil(thickness/2)) = baseline + 1. So the value that reproduces Figma is 1px, not 2px. */ text-underline-offset: 1px; text-decoration-skip-ink: none; /* Figma paints an unbroken rule through the descenders of "Allergy" and "Immunology" */ } /* ========================================================================== 2. IMAGE BAND — full-bleed, absorbs 100% of the width delta spec §5.1: rail 563 at BOTH 1280 and 1440; the panel goes 717 -> 877. spec §1.1 (2785:470): itemSpacing 4, padding T4 R0 B4 L0, cornerRadius TL 0 / TR 4 / BR 4 / BL 0. 4 + 450 + 4 + 450 + 4 + 450 + 4 = 1366. `.mk-stack-4` (grid.css) is the shared 4-pad / 4-gap primitive; only its horizontal padding has to go, because this panel pads top/bottom only. ========================================================================== */ .mk-recovery-44__band { flex: 1 1 auto; min-width: 0; padding-inline: 0; /* .mk-stack-4 pads all four sides */ border-radius: 0 var(--mk-radius-card) var(--mk-radius-card) 0; } /* ========================================================================== 3. THE CARD — Salient `nectar-fancy-box[data-style="hover_desc"]`, retargeted ========================================================================== */ .mk-recovery-44 { /* Section-local literals, each cited once here rather than repeated inline. Not promoted to tokens.css: they are section measures, CONVENTIONS §4. */ --mk-r44-card-h: 450px; /* spec §1.1 — FIXED at both 1280 and 1440 (§5.1) */ --mk-r44-para-gap: 21.4px; /* see §3.3 below */ --mk-r44-scrim: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.749) 100%); /* ^ spec §3.2: GRADIENT_LINEAR, stops #00000000 -> #000000bf (0xbf/255 = 0.7490), gradientTransform decoded to a plain top->bottom sweep over the card's FULL height. Corroborated by [SVG-VECTOR], which emits with stop-opacity 0 -> 0.75 — i.e. vertical, full height, pure black. */ } /* Card height. Salient's own idiom is an inline `style="min-height: …"` on the box (that is how the demo sets 350px); the markup keeps that idiom and only changes the value — to var(--mk-r44-card-h) rather than a literal, so the inline declaration (which no non-!important rule could outrank) still steps down at the breakpoints in §4. */ /* -- radius --------------------------------------------------------------- OVERRIDES: .nectar-fancy-box[data-border-radius="5px"]:not([data-style=parallax_hover]):not([data-style=color_box_hover]) { border-radius:5px; overflow:hidden } (element-fancy-box.css) `data-border-radius="5px"` is kept on the element on purpose — it is what supplies `overflow:hidden`, without which the long_zoom scale would spill. Only the radius is retargeted: spec §1.4 gives each card TL/BL 4, TR/BR 0 (the right side is square because it bleeds to the frame edge). The Salient selector scores (0,4,0); this one matches it and wins on order. */ .mk-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"] { border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card); /* OVERRIDES: .nectar-fancy-box[data-style=hover_desc]{padding:11%} spec §6.3: the inset is a fixed 60px at BOTH 1280 and 1440, not a ratio. */ padding: var(--mk-space-60); } /* -- the photo layer ------------------------------------------------------ OVERRIDES: .nectar-fancy-box .box-bg { height:100.2%; width:100.2% } Salient overscans the background by 0.2% to kill sub-pixel seams in its own grid. Figma's fill covers the card EXACTLY (scaleMode FILL, and the SVG export's pattern transform decodes to a plain centred cover: image 1376x768 scaled to 806.25x450 with a -44.63px left offset, which is exactly half the 806.25-717 overflow). The 0.2% therefore enlarges the photo relative to the design. It is not a rounding-level difference — recomposited against the 2x Figma export with the caption region masked out: card 1 100.0% -> MAE 0.99 / p99 6.1 100.2% -> MAE 3.35 / p99 36.5 card 2 100.0% -> MAE 0.74 / p99 3.0 100.2% -> MAE 2.20 / p99 21.4 card 3 100.0% -> MAE 0.78 / p99 5.0 100.2% -> MAE 2.50 / p99 39.3 (0-255 per channel; that MAE ~0.8 at 100% is also the proof that the extracted rasters, the centred-cover placement and the scrim below are all correct.) `background-size: cover` and `background-position: center` are Salient's own and are already the Figma values, so they stay untouched. */ .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .box-bg { width: 100%; height: 100%; } /* -- the scrim ------------------------------------------------------------ OVERRIDES: .nectar-fancy-box[data-style=hover_desc] .box-bg:after, .nectar-fancy-box[data-style=hover_desc] .box-bg:before { height:85%; background:linear-gradient(to bottom, rgba(15,15,15,0), rgba(15,15,15,.75) 100%) } and the rest/hover swap .box-bg:after{opacity:0} / .hovered .box-bg:before{opacity:0} .hovered .box-bg:after{opacity:1} spec §6.3: use the Figma values (pure black, FULL height), and "keep the scrim at opacity 1 always; do not fade it in" — it is fully painted at rest in both exports. So :before becomes the one static Figma scrim and :after is removed rather than left to cross-fade against it. */ .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .box-bg::before, .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"].hovered .box-bg::before { height: 100%; background: var(--mk-r44-scrim); opacity: 1; } .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .box-bg::after, .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"].hovered .box-bg::after { display: none; } /* -- caption block -------------------------------------------------------- Salient already supplies the geometry: `.inner { align-self: flex-end }` is the Figma `primaryAxisAlignItems: MAX`, and the box's 60px padding puts the block at left 60 / bottom 60 (spec §1.3 — measured, because the caption node is inside a -180deg/-180deg rotation pair that cancels; do NOT reproduce the rotation). Nothing to add for position. spec §1.3 measured geometry, card-local: caption box left 60, width 597, last line box bottom 390 (= 450 - 60). Both confirmed by [SVG-VECTOR]: the ink starts at x 62.394, and Poppins Regular "[" has a left side bearing of 133/1000 em = 2.394px at 18px — 60 + 2.394 = 62.394 exactly. */ /* title = caption line 1. spec §2.2: Poppins LIGHT 24 / lh 180% / #fff. OVERRIDES tokens.css `.mk-page :is(h1,h2,h3,.mk-serif)` which would otherwise set Merriweather on this

— CONVENTIONS §8.6. Colour is left to Salient: `.nectar-fancy-box[data-style=hover_desc] .inner *{color:#fff}` is already the Figma value. */ .mk-recovery-44 .nectar-fancy-box .heading-wrap h3 { font-family: var(--mk-font-sans); font-weight: var(--mk-w-light); font-size: var(--mk-size-title); /* 24 */ line-height: var(--mk-lh-body); /* 180% -> 43.2px */ letter-spacing: 0; margin: 0; text-transform: none; font-variation-settings: normal; /* undo the Merriweather opsz pin */ } /* body = caption line 2. spec §2.2: Poppins Regular 18 / lh 180% / #fff. OVERRIDES three Salient declarations on `.hover-content`: { opacity:0; position:absolute; bottom:0; left:0; transform:translateY(20px) } { margin-top:10px; line-height:1.5em } spec §6.3 OPEN DECISION, default (A): "Both lines always visible; hover only drives the long_zoom image scale". Both exports render both lines, so the reveal is switched off and the line becomes a normal in-flow paragraph. */ .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .hover-content, .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"].hovered .hover-content { position: static; opacity: 1; transform: none; 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.4px */ /* §3.3 PARAGRAPH SPACING = 21.4, not 21.6. spec §2.2/§9.3 derives 21.6 by assuming the auto-height node's reported height of 97 is a rounded 97.2. [SVG-VECTOR] measures it directly and it is 21.4, twice over: (a) the "[" of line 1 is a straight-edged glyph, so its exported yMax is exact. Ink top = 300.584 card-local. Poppins Light "[" yMax = 934, so the line-1 baseline is 300.584 + 0.934*24 = 322.800 42. The line-2 baseline is fixed by the block bottom (390 - 32.4 + 3.6 + 18.9 = 380.100), and 380.100 - 13.2 - 22.5 = 344.400 is where the gap starts, so P = 344.400 - 322.800 - 0 ... = 21.400 exactly. (b) 43.2 + P + 32.4 = 97 (the height Figma actually reports) => P = 21.4. The two agree to 0.001px. 21.6 would put line 1 0.2px too high. */ margin-top: var(--mk-r44-para-gap); } /* the DROP_SHADOW on all six caption text nodes — spec §2.3. text-shadow, not filter: drop-shadow, or the card itself would be shadowed. */ .mk-recovery-44 .nectar-fancy-box .heading-wrap h3, .mk-recovery-44 .nectar-fancy-box .hover-content { text-shadow: 0 4px 14px var(--mk-shadow-50); } /* -- hover ---------------------------------------------------------------- Salient's init.js Zi() adds `.hovered` on mouseenter/touchstart AND writes an inline `transform: translateY(-px)` onto .heading-wrap — that is the hover_desc reveal, and under decision (A) it must not happen. An inline style can only be beaten with !important; this is the one place in the section that uses it, and this is why. */ .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .heading-wrap { transform: none !important; } /* What DOES survive on hover, per spec §6.3: - `long_zoom`: .hovered .box-bg { transform:scale(1.2); transition: 9s } "keep; it is the slow ambient drift that suits a 450px band" What is switched off: - the card lift `.hovered { transform:translateY(-10px); box-shadow:… }`. spec §6.3-A keeps it, but that rule was written for the demo's separate grid columns. Here the three cards are BUTTED on a 4px pitch inside a clipped band, so a -10px lift tears the 4/450/4 rhythm and shows the #f4f9fb ground through a 10px slot. Salient's own answer to exactly this is the `disable-hover-movement` class, which the founder-bound /salient/resort/ demo puts on every one of its hover_desc boxes — so the class is lifted, not invented. FLAGGED: a deliberate departure from spec §6.3-A, on geometry grounds. */ /* -- NO-JS / NOT-YET-INITIALISED GUARD ----------------------------------- MEASURED, not theoretical: without this rule all three cards render at opacity 0 in the assembled shell. Salient's style.css hides every entrance-animated element up front — .col.has-animation, .nectar-fancy-box.has-animation, .wpb_column.has-animation, img.img-with-animation { opacity:0; position:relative } — and then un-hides the ones that cannot be animated: html:not(.js) .col.has-animation, html:not(.js) .wpb_column.has-animation, html:not(.js) img.img-with-animation { opacity:1 } `.nectar-fancy-box.has-animation` is missing from that second list. On the real Salient site that is harmless, because WordPress inlines a head script that rewrites the root class no-js -> js before first paint. This shell ships `` and NOTHING removes it (grepped: not in priority.js, not in nectar-delay-javascript.js, not in salient-static-compat.js, not in index.html), and on top of that waypoints.q-*.js is one of the ten `type="salientlazyscript"` tags, so `window.Waypoint` is undefined until the delay-JS upgrade fires on first user interaction — verified in the browser: globalWaypoint "undefined", jqWaypoint "undefined", lazyRemaining 10. Result: nothing ever clears opacity:0. This rule is Salient's own guard with the selector it forgot. It is inert the moment the root class becomes `js`, so it does not block the animation once the shell adds the no-js -> js swap (reported separately — it is a page-level fix, not a section-level one). */ html:not(.js) .mk-recovery-44 .nectar-fancy-box.has-animation { opacity: 1; transform: none; } /* -- reduced motion ------------------------------------------------------- spec §6.4, verbatim: "a 9s continuous zoom is exactly the sort of motion this audience (MCAS / severe sensitivity) needs to be able to switch off." */ @media (prefers-reduced-motion: reduce) { .mk-recovery-44 .nectar-fancy-box, .mk-recovery-44 .nectar-fancy-box .box-bg, .mk-recovery-44 .nectar-fancy-box .box-bg::before, .mk-recovery-44 .nectar-fancy-box .heading-wrap, .mk-recovery-44 .nectar-fancy-box .hover-content { transition: none !important; } .mk-recovery-44 .nectar-fancy-box.hovered .box-bg { transform: none !important; } /* the entrance is driven by anime.js from init.js, not by CSS, so the resting state has to be forced visible or a reduced-motion visitor would get an opacity:0 card. */ .mk-recovery-44 .nectar-fancy-box.has-animation { opacity: 1; transform: none; } } /* ========================================================================== 4. BELOW 1280 — DERIVED, NOT IN FIGMA. Needs founder sign-off. spec §5.2: "There is no tablet or mobile frame for this section anywhere in the file… Everything in this sub-section is reasoning from the auto-layout modes above, and needs founder sign-off before it is treated as truth." The breakpoints are grid.css's, so the whole page steps together; the spec's own numbers (rail inset 120->64, card 450->360->280, caption 60->40->24, h1 48->32, body 20->17, eyebrow 16->13 @ tracking 2.4, card title 24->20, card body 18->16) are used verbatim inside them. ========================================================================== */ /* 1280–1050: nothing changes but the band, which is the flex child. 1049–1025: grid.css drops --mk-page-x to 64, so the rail computes to 451 and the band to 573 — spec §5.2 exactly, with no rule needed here. */ /* 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) { /* spec §5.2 tablet: "the fixed 563 rail no longer leaves a usable band. Switch the section's layoutMode from HORIZONTAL to VERTICAL." */ .mk-recovery-44 { flex-direction: column; min-height: 0; --mk-r44-card-h: 360px; } .mk-recovery-44__rail { width: 100%; padding-block: 64px; /* spec §5.2 "64px inset" */ } .mk-recovery-44__band { border-radius: 0; /* the band is no longer a right edge */ } .mk-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"] { border-radius: var(--mk-radius-card); padding: 40px; /* spec §5.2 "caption inset 60 -> 40" */ } } @media (max-width: 640px) { .mk-recovery-44 { --mk-r44-card-h: 280px; } .mk-recovery-44__eyebrow { font-size: 13px; letter-spacing: 2.4px; } /* selector matches the base rule's specificity (0,3,0) — the base rule had to be raised to out-rank Salient's `body h2`, so this one has to follow it. */ .mk-recovery-44 .mk-recovery-44__rail .mk-recovery-44__title { font-size: 32px; line-height: 40px; } .mk-recovery-44__body { font-size: 17px; } .mk-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"] { padding: var(--mk-space-24); /* spec §5.2 "caption inset 60 -> 24" */ } .mk-recovery-44 .nectar-fancy-box .heading-wrap h3 { font-size: 20px; } .mk-recovery-44 .nectar-fancy-box[data-style="hover_desc"] .hover-content { font-size: 16px; } } /* ========================================================================== 12 · MK-RPLAN BINDING — D23 / D24 / D26. Component + trace: 09-recovery-42.css RETIRED: section min-height 1366; rail width calc(323 + 2*120); band .mk-stack-4 (4px pad all round, class removed in markup) with the right-side-only card radius; --mk-r44-card-h 450 (inline, removed in markup). ========================================================================== */ #s12-recovery-44 { min-height: 100svh; } #s12-recovery-44.mk-recovery-44 { display: grid; grid-template-columns: 50% 50%; align-items: start; } #s12-recovery-44 .mk-recovery-44__rail { flex: none; width: 100%; padding: var(--mk-page-x); padding-right: var(--mk-space-60); } #s12-recovery-44 .mk-recovery-44__band { flex: none; border-radius: 0; padding: 0; } #s12-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"], #s12-recovery-44 .nectar-fancy-box[data-style="hover_desc"].mk-rplan__panel { height: 100svh; min-height: 0; padding: var(--mk-space-60); border-radius: 0; } #s12-recovery-44 .nectar-fancy-box[data-bg-animation="long_zoom"].hovered .box-bg { transform: none; } /* see 11 */ /* ========================================================================== R3 · 12 · MK-RPLAN ROUND-3 BINDING — D04 · D05 · D06 · D07 Component + rationale: sections/09-recovery-42.css block "R3 · MK-RPLAN". ========================================================================== */ /* +1 class over css/rhythm.css §B04's two copies of these — 09's R3-5. */ .mk-page #s12-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"].mk-rplan__panel, .mk-page #s12-recovery-44 .nectar-fancy-box[data-style="hover_desc"].mk-rplan__panel.mk-recovery-44__card--1, .mk-page #s12-recovery-44 .nectar-fancy-box[data-style="hover_desc"].mk-rplan__panel.mk-recovery-44__card--2, .mk-page #s12-recovery-44 .nectar-fancy-box[data-style="hover_desc"].mk-rplan__panel.mk-recovery-44__card--3 { height: var(--mk-rplan-panel-h); border-radius: var(--mk-rplan-radius) 0 0 var(--mk-rplan-radius); } #s12-recovery-44 .mk-recovery-44__band { padding-top: var(--mk-rplan-gap); } /* D04's left gutter is css/rhythm.css §D04's — see 09's block R3-2. */ /* D05 — placement, from the rendered crops (scratchpad/crop-sim2.png). card 1: the three blocker bottles run 0.45-0.70; at `center` the third one was cut in half by the right edge. card 2: the seated figure is at 0.62-0.78, the air purifier at 0.55. card 3: the treatment chair is 0.50-0.72 and the IV pole 0.78-0.88 — the pole is the only thing in the frame that says "IV therapy" and centre-cropping deleted it. */ #s12-recovery-44 .mk-recovery-44__card--1 .box-bg { background-position: 76% center; } #s12-recovery-44 .mk-recovery-44__card--2 .box-bg { background-position: 68% center; } #s12-recovery-44 .mk-recovery-44__card--3 .box-bg { background-position: 78% 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. */ #s12-recovery-44 .mk-recovery-44__rail { 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. */ #s12-recovery-44[data-rplan-rail] .mk-recovery-44__rail { position: fixed; top: 0; left: var(--mk-rplan-pin-x, 0px); width: var(--mk-rplan-pin-w, 50%); height: 100svh; } #s12-recovery-44 .mk-rplan__rail { grid-column: 1; } #s12-recovery-44 .mk-rplan__stage { grid-column: 2; } /* ========================================================================== 12 · MOBILE STRIP MATES (<=999px) — for 09-recovery-42.css block R4-M. Rationale at 09's twin block. 12's 50/50 template lives on the SECTION. ========================================================================== */ @media (max-width: 999px) { #s12-recovery-44.mk-recovery-44 { grid-template-columns: 100%; } #s12-recovery-44 .mk-rplan__rail, #s12-recovery-44 .mk-rplan__stage { grid-column: auto; } #s12-recovery-44 .mk-recovery-44__rail { padding: var(--mk-rplan-strip-top) var(--mk-page-x) var(--mk-rplan-strip-bot, var(--mk-space-24)); /* R5 item 2 */ } /* R5 item 2 — 12's lanes sit straight on the rail, so its copy root IS the rail (mk-rplan__copy lands on it) and the shared 16px strip-gap rule in 09-recovery-42.css R4-M reaches it via its second selector. */ /* 12's own `justify-content: center` (desktop: centre the copy in the 1126px padded rail) beats the component's mobile flex-start on file order and floats 4/5's text ~40px lower than every other step's — the strip swap would read as the copy JUMPING. Top-aligned like 09-13. */ #s12-recovery-44 .mk-recovery-44__rail { justify-content: flex-start; } /* 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 — each card's caption reverts to its own authored bottom anchor, unmodified. */ }