/* ============================================================================= Find Your Dream Pontoon · CSS · v1.15.0 ----------------------------------------------------------------------------- Port of the Round-3 handoff exports approved 2026-08-07: 3A Category Rail · 3B Clean Tab Bar · 3C Pill Grid + Accordion 3D Spotlight Pager rev 1.15.0 — 2026-08-23 • CROSS-FILE OWNERSHIP. This file no longer sets `top`, `max-height` or `overflow-y` on the slideout. It publishes ONE number, --fydp-tab-top, and style.css does the rest. See §SLIDEOUT at the foot of this file. The old arrangement reached into another component's box model at (1,0,1)+!important in order to beat ten (1,0,0)+!important `top` rules whose source order RUCSS could reorder. That reasoning was correct for its time and is now obsolete: style.css declares `top` exactly once, without !important, so there is nothing left to beat. Two files cannot race over a property only one of them sets. • THE max-height WAS ALSO WRONG, not merely out of scope. It measured `100dvh - var(--fydp-tab-top) - 16px` from the CONTAINER, while four landscape bands in style.css pulled #sidebar_slideout_content up a further -100px with a bare negative margin. It under-sized the panel by exactly that amount wherever both applied. style.css now measures from --slideout-panel-top, which is the card's real top edge. • THE `top` OVERRIDE WAS ALSO THE CAUSE OF A CROSS-PAGE BUG. Because this sheet is only enqueued where the shortcode renders, --fydp-tab-top is declared on / and undefined on /boat-model/… — so the slideout PANEL opened ~156px lower on FYDP pages than everywhere else. style.css now anchors the panel to a page-independent value and lets only the TAB follow this number, which is the only thing it was ever for. • The clearance value itself is UNCHANGED at 240px, as is the rev-1.9.0 verification snippet. Nothing about the tab's resting position moves. rev 1.14.0 — 2026-08-15 • THE DESKTOP CAPTION COMES OFF THE PHOTOGRAPH. Same treatment the 3C accordion has carried since 1.10.0, now applied at >=1025px as well, so the component has one card rather than two. No template change. • MEASURED FIRST. Overlay heights swept across all eight tabs, vw 1707, card 284 x 189: 44px 26 of 30 cards one-line title, no subtitle 64px 2 of 30 one-line title + subtitle (tab 0) 65px 4 of 30 two-line title (tabs 1, 3) The label covers 23% of the picture on most cards and 34% on six of them. Before 1.13.0 the worst case was 26%, because the card was 61px taller — but it was taller by cropping 23% off the width. Giving the picture back and then hiding a third of it under the label is not a trade worth keeping. • A TALLER CARD DOES NOT FIX THIS, which is why this rev is not simply a larger --fydp-card-min-h. .fydp-card__ov is bottom-anchored: it occupies the bottom 44 or 65px of whatever the card is, so growing the card grows the photo in the same proportion. 3:2 card 189 caption covers 23% / 34% crop 0.0% 7:5 card 203 caption covers 22% / 32% crop 6.6% 4:3 card 213 caption covers 21% / 31% crop 11.1% Three percentage points for a ninth of the photograph. The only way to stop the caption covering the picture is to take it off the picture. Dropping the 12px bottom padding — the other thing that was on the table — buys 4px and puts the type on the 6px corner radius. • ROW HEIGHT COMES BACK, which was the other thing 1.13.0 cost. Cards run 219px (one line) to 240px (two lines, or one plus a subtitle) against the 250px they were before 1.13.0. So the section is close to the height it had, with the photograph both complete and uncovered. • THE 21px SPREAD IS NOT LEVELLED, deliberately. `align-items: start` puts every photo on its row's top edge and the card is transparent below, so there is no box edge for the mismatch to show against — the reasoning that retired --fydp-acc-title-min on mobile in 1.12.0. --fydp-card-min-h remains if uniform cards are ever wanted, and it now means exactly that: with the ratio on the image rather than the card, raising the floor adds trailing space instead of cropping. 240px levels everything, at zero cost to the photograph. That is a different property from the one that was switched off in 1.13.0, in effect if not in name. • ALL FOUR DESIGNS, not just 3B. `.fydp-block .fydp-card` rather than `.fydp-block--clean-tab-bar .fydp-card`, because two card treatments in one component depending on which design is assigned is not a thing worth maintaining. 3A is the one to look at in QA: its cards are 403 x 269, so the caption covered 16-24% there rather than 34%, and it had the least wrong with it. To contain this to 3B instead, add --clean-tab-bar to the four selectors below and nothing else changes. • SPECIFICITY (0,3,0), not (0,2,0)-plus-source-order. These rules would win on order alone, being later in the file than the base card block, but RUCSS rewrites this stylesheet on every "Clear Used CSS" and order is not something to bet a layout on — see the 1.9.0 note. Every design carries .fydp-block, so the extra class costs nothing. VERIFY on desktop — the same sweep that sized this rev: (async()=>{const r=document.querySelector('[data-fydp]'); const b=[...r.querySelectorAll('[data-fydp-block]')] .find(e=>e.offsetParent||e.getClientRects().length); const f=()=>new Promise(k=>requestAnimationFrame( ()=>requestAnimationFrame(k)));const per=[]; for(let i=0;i<8;i++){AvalonFYDP.setActive(r,i);await f(); const p=b.querySelector('.fydp-panel:not([hidden])');if(!p)continue; const c=[...p.querySelectorAll('.fydp-card')];if(!c.length)continue; const g=[...p.querySelectorAll('.fydp-card__img')]; const q=c[0].getBoundingClientRect(); const m=g[0].getBoundingClientRect(); per.push({i,cardW:Math.round(q.width), cardH:[...new Set(c.map(e=>Math.round( e.getBoundingClientRect().height)))], imgH:Math.round(m.height), imgTops:[...new Set(g.map(e=>Math.round( e.getBoundingClientRect().top)))].length, scrim:getComputedStyle(c[0],'::after').content});} AvalonFYDP.setActive(r,0); console.log(JSON.stringify({vw:innerWidth, rev:getComputedStyle(r).getPropertyValue('--fydp-css-rev').trim(), design:b.getAttribute('data-fydp-design'),per}));})() `imgH` must equal cardW / 1.5 — 189 at a 284px track — in every tab, including tabs 3 and 5 where a boat has no photograph and the placeholder span holds the box. `imgTops` must read 1: every photo on the row's top edge, which is what makes the ragged card bottoms invisible. `cardH` will list two or three values per tab; that is correct, not a levelling failure. `scrim` must read "none". rev 1.13.0 — 2026-08-15 • DESKTOP CARDS GO BACK TO A TRUE 3:2 AND THE PHOTOS STOP BEING CROPPED. One declaration: --fydp-card-min-h 250px -> 0px at >=1025px. No mobile change, no template change, no new mechanism. • THIS REVERSES A DECISION MADE IN 1.4.0 AND RESTATED SINCE, so the reason matters. The floor existed to match the outgoing `.custom-post-tabs .tab-post { min-height: 250px }` and avoid reading as a shrink beside the live site. But that legacy rule is `width: 23%; min-height: 250px; background-size: cover` — the same geometry, so PRODUCTION HAS ALWAYS CROPPED BY THE SAME ~23%. The number was inherited rather than designed, and matching it meant inheriting the crop. The approved 3B desktop comp draws `.card { aspect-ratio: 3/2 }` with no floor, so 0 is the comp. • THE CROP WAS NEVER A SETTING, it was arithmetic. At the 1252px container: card, 4-up with 32px gutters 289px wide a WHOLE 3:2 photo at that width 193px tall the old floor 250px width a whole photo needs at 250 375px -> a 1596px container At 289 x 250 the 1024x683 source scaled to 375x250 and 86px was cut, 22.9% of its width, 43px off each side. At 289 x 193 it fits exactly. Three arrangements were weighed and rejected: `object-fit: contain` (whole photo, but 28px letterbox bars), photo at 3:2 above a 57px solid strip (whole photo, height kept, but the bottom-anchored overlay then lands on flat colour with the scrim running over it), and a 3-up grid (396 x 264 — the only option that keeps 250px AND shows everything, at the cost of the comp's four columns and a 3+1 orphan row at limit=4). • 3A IS UNAFFECTED, which is worth knowing before looking for a change that is not there. Its rail layout leaves 838px for a 2-up grid, so its cards are 403px wide and 269px tall from `aspect-ratio` alone — already above the old floor, which therefore never bound on Category Rail. 3B, 3C-desktop and 3D all run 4-up at 289px and were all clamped, so those three move together: rows 57px shorter, crop 22.9% -> 0. • --fydp-grid-gap STAYS AT 32px even though its justification is spent. 32 was chosen in 1.4.0 because four ~23%-cropped frames ran hull-to-frame- edge and read as one band unless a wide gutter broke them up; with the water back around each boat, 24px would now do. Kept because the spacing between thumbnails was to be preserved. VERIFY on desktop, any tab: (()=>{const r=document.querySelector('[data-fydp]'); const b=[...r.querySelectorAll('[data-fydp-block]')] .find(e=>e.offsetParent||e.getClientRects().length); const p=b.querySelector('.fydp-panel:not([hidden])'); const c=p.querySelector('.fydp-card'); const i=p.querySelector('img.fydp-card__img'); const q=c.getBoundingClientRect(); const box=q.width/q.height, nat=i.naturalWidth/i.naturalHeight; console.log(JSON.stringify({vw:innerWidth, rev:getComputedStyle(r).getPropertyValue('--fydp-css-rev').trim(), design:b.getAttribute('data-fydp-design'), cardW:Math.round(q.width),cardH:Math.round(q.height), boxRatio:+box.toFixed(3),imgRatio:+nat.toFixed(3), cropPct:+((1-Math.min(box,nat)/Math.max(box,nat))*100).toFixed(1), minH:getComputedStyle(c).minHeight, gap:getComputedStyle(p.querySelector('.fydp-grid')) .columnGap}));})() Expect cardW ~289, cardH ~193, boxRatio 1.500 against an imgRatio of 1.499, `cropPct` 0.0, `minH` "0px", `gap` "32px". A boxRatio near 1.156 with cropPct ~22.9 means a pre-1.13.0 file is still live. On Category Rail the same probe should read ~403 x 269 both before and after — that one is meant not to move. rev 1.12.0 — 2026-08-15 • TWO NUMBERS, both set by looking at 1.11.0 on device. No new mechanism, no new selector, no template change. 3C accordion only. .fydp-card-sub padding-top 5px -> 1px --fydp-acc-row-gap 7px -> 10px (back to where it was) • THE 1px IS THE TITLE-TO-SUBTITLE GAP on the categories that have one. 5px read as a gutter between two separate things; 1px reads as a label and its qualifier, which is what they are. IT ALSO SHORTENS THE NO-SUBTITLE CARDS BY 4px, because this rule is the collapsed empty box as well as the populated one. The distance from the last line of text to the button therefore goes 15 -> 11 where the last row has no subtitle, against ~10 where it does. That is the two cases converging, which is the direction 1.11.0 was already travelling, but it was not separately asked for. To keep 1.11.0's 15px on the empty case while still tightening the populated one, one line does it: .fydp .fydp-block--pill-grid-accordion .fydp-card-sub:empty { padding-top: 5px; } :empty is exact here — the template renders with no whitespace inside when the value is missing, so an unpopulated box matches and a populated one cannot. • BOTH ORIENTATIONS, though specified against portrait. The rule is block- scoped rather than media-scoped, as it has been since 1.11.0, so landscape tightens by the same 4px. Deliberate: the card widths are within 6px of each other (132 portrait / 138 landscape), the type sizes are identical, and the only subtitled category is acc 0 in both. A per-orientation split here would be a difference with no cause. • THE ROW GUTTER GOES BACK TO 10px. 1.11.0 took it to 7px to close a gap that the 1px padding has now closed by other means. The override is left in place at its inert value rather than deleted: the split between row and column gutters is the part worth keeping, since --fydp-grid-gap drives both axes and moving it would change the card width and every title wrap with it. • ARITHMETIC. Portrait vw 363, card 132 x 88, four cards, no subtitles, two-line titles: cell 128 -> 124, body ~344 -> ~339. Landscape vw 674, card 138 x 92: no-subtitle cell 132 -> 128; acc 0, which has subtitles, 146 -> 142. VERIFY with the sweep in the rev-1.11.0 note below. Expected values change as follows: ctaGap ~11 where the last row has no subtitle (was ~15) ~10 where it does (unchanged) subH contains 1 (collapsed empty box, was 5) and ~15 on acc 0 only (was ~19) gap ["10px","10px"] portrait — the two are equal again, which is correct, not a sign the override failed. Confirm by moving --fydp-acc-row-gap and re-reading. rev 1.11.0 — 2026-08-15 • ON-DEVICE TUNING OF 1.10.0, plus one regression 1.10.0 introduced. 3C accordion only; 3A, 3B, 3C-desktop and 3D are untouched again. • THE TITLE FLOOR IS OFF. --fydp-acc-title-min goes 3.9em -> 1.3em portrait and 2.6em -> 0.6em landscape, both set by looking at the thing on a Galaxy S8+ and an iPhone SE. Both values are BELOW one line (1.3 x 11.5 = 14.95px, which is exactly one line at line-height 1.3), so the reservation never engages and titles are natural height. 1.10.0 bought row-levelled subtitles with a blank line under every short title; on device that trade was the wrong way round, and the misalignment it was preventing is hard to see on a transparent caption with no box edge. The property stays as the tunable — 2.6em restores two lines, 3.9em three. • THE EMPTY SUBTITLE COLLAPSES, 20px -> 5px, and that is what moves the CTA rather than a margin on the CTA. `margin-top: -5px` on .fydp-cta-wrap--block was the request and was declined, because the condition it needs is not addressable in CSS. Measured on the deployed data: acc 0 subs [S S . .] portrait rows: r1 = S S, r2 = . . acc 1-7 [. . . .] The stray gap appears when the LAST ROW carries no visible subtitle: portrait, that is all eight categories (acc 0's two subtitled boats are cards 1 and 2, so row 1); landscape, it is every category except acc 0, whose single row of four contains them. No flat value is right in both, a panel-level :has() gets portrait acc 0 backwards, and a PHP flag has the same granularity problem as the :has(). Collapsing the reservation answers it per cell, with nothing to get wrong, and it goes on answering it if subtitle="model" ever populates all thirty cards. • PORTRAIT ROW GUTTER 10px -> 7px, via --fydp-acc-row-gap. Longhands, not --fydp-grid-gap: that drives both axes, and 3px off the COLUMN gutter takes the card from 132px to ~133.5 and moves where every title wraps — which would invalidate the sweeps this section is sized from. Landscape is one row at limit=4, so there is no row gutter there to tighten. • REGRESSION FIXED, in cards.php rather than here. 1.10.0 moved aspect-ratio and --fydp-card-bg off .fydp-card and onto .fydp-card__img so the caption could sit below the photo. A boat with no featured image renders no at all, so those cards lost their box entirely and collapsed to a bare title. Two are in that state now — "Catalina Cruise Rear Bench" and "GEOfish CRF". The template now emits an empty on that branch, which picks up every rule below and restores the blank 3:2 box on mobile while leaving desktop pixel-identical. Setting the two thumbnails is still the real fix. • ARITHMETIC, for comparison against the sweep below. Portrait vw 363, card 132 x 88, a four-card category with no subtitles and two-line titles: cell 158 -> 128, body 407 -> ~344. Landscape vw 674, card 138 x 92: no-subtitle cell 147 -> 132, body 210 -> ~195; acc 0, which has subtitles, 210 -> ~209, i.e. deliberately unmoved. VERIFY, portrait and landscape: (async()=>{const r=document.querySelector('[data-fydp]'); const b=[...r.querySelectorAll('[data-fydp-block]')] .find(e=>e.offsetParent||e.getClientRects().length); const f=()=>new Promise(k=>requestAnimationFrame( ()=>requestAnimationFrame(k)));const o=[]; for(let i=0;i<8;i++){AvalonFYDP.setActive(r,i);await f(); const bd=b.querySelector('.fydp-acc.is-on .fydp-acc__body'); if(!bd)continue;const g=bd.querySelector('.fydp-grid'); const cl=[...bd.querySelectorAll('.fydp-cell')]; const cta=bd.querySelector('.fydp-cta-wrap--block'); const sub=c=>c.querySelector('.fydp-card-sub'); const ink=cl.map(c=>{const s=sub(c);return (s&&s.textContent.trim() ?s:c.querySelector('.fydp-card__t')) .getBoundingClientRect().bottom;}); const cs=getComputedStyle(g); o.push({i,n:cl.length, subs:cl.filter(c=>sub(c).textContent.trim()).length, subH:[...new Set(cl.map(c=>Math.round( sub(c).getBoundingClientRect().height)))], imgH:Math.round(bd.querySelector('.fydp-card__img') .getBoundingClientRect().height), gap:[cs.rowGap,cs.columnGap], ctaGap:Math.round(cta.getBoundingClientRect().top -Math.max(...ink)), bodyH:Math.round(bd.getBoundingClientRect().height)});} AvalonFYDP.setActive(r,0); console.log(JSON.stringify({vw:innerWidth, orient:matchMedia('(orientation:portrait)').matches ?'portrait':'landscape', rev:getComputedStyle(r).getPropertyValue('--fydp-css-rev').trim(), per:o}));})() `ctaGap` is the distance from the last line of visible text to the button, and it is the number this rev exists to fix. Expect ~15 where the last row has no subtitle and ~10 where it does. Anything near 30 means a pre-1.11.0 file is still live. `subH` must contain 5 (the collapsed empty box) and, on acc 0 only, ~19. `gap` must read ["7px","10px"] portrait — if both read 7px the column gutter moved and the card widths have shifted. `imgH` must stay cardW / 1.5 in every category including the two with no photograph. rev 1.10.0 — 2026-08-15 • 3C ACCORDION ONLY: THE CARD TITLE MOVES OUT FROM ON TOP OF THE PHOTO AND SITS UNDER IT, ABOVE THE SUBTITLE. Nothing else changes. 3A, 3B, 3C- desktop and 3D keep the comp's scrim overlay exactly as ported, and on this site's shortcode config the accordion is the block that serves BOTH mobile slots — fydp_partial_for() folds portrait and landscape into one .fydp-block--pill-grid-accordion carrying both context classes — so the block selector alone is a precise "mobile, not desktop" scope and no media query is needed to express it. • WHY, in numbers rather than taste. Swept live, all eight categories: portrait vw 363 card 132 x 88 title max 45px (3 lines) landscape vw 674 card 138 x 92 title max 30px (2 lines) A two-line title in the ported 8/9px overlay box is ~46px on an 88px photo. Over half the image, on the one form factor with the least of it. And the scrim cannot help at that size: it is rgba(3,7,9,0) 48% -> rgba(3,7,9,.9) 100%, drawn for a 300-410px desktop card where the label sits in the deep end; at 88px the same two lines start near the 50% stop, where the gradient is still mostly transparent. • FULL-BLEED, NOT INSET, and that is a measurement not a preference. The same sweep run at a 9px inset returned 45px in BOTH orientations — landscape's saving is entirely the 18px. The title also lines up with .fydp-card-sub, which never had a horizontal inset. • THE RESERVATION. --fydp-acc-title-min, 3.9em portrait / 2.6em landscape, declared on .fydp-card__t so the `em` resolves against that rule's own 11.5px. Without a floor the subtitles in a row sit at different heights whenever the titles differ in line count — the identical problem .fydp-card-sub's 15px min-height already solves one element up. Untouched at 320 and below; the note beside the rule has the sweep and the number. • WHAT THIS COSTS. Portrait: cell 108 -> 158, open body 307 -> 407, list 898 -> 998. Landscape: cell 112 -> 147, open body 175 -> 210, list 643 -> 678. limit=4 and the accordion is single-open, so the worst case is two rows in portrait and one in landscape. Signed off in advance: "if .fydp-acc needs to be expanded, then that is ok." VERIFY after deploy, portrait and landscape, at your narrowest supported width — same sweep as before the change, so the numbers above are directly comparable: (async()=>{const r=document.querySelector('[data-fydp]'); const b=[...r.querySelectorAll('[data-fydp-block]')] .find(e=>e.offsetParent||e.getClientRects().length); const f=()=>new Promise(k=>requestAnimationFrame( ()=>requestAnimationFrame(k)));const o=[]; for(let i=0;i<8;i++){AvalonFYDP.setActive(r,i);await f(); const bd=b.querySelector('.fydp-acc.is-on .fydp-acc__body'); if(!bd)continue;const c=bd.querySelector('.fydp-card'); const g=[...bd.querySelectorAll('.fydp-card__img')]; const s=[...bd.querySelectorAll('.fydp-card-sub')]; o.push({i,cardH:Math.round(c.getBoundingClientRect().height), imgH:Math.round(g[0].getBoundingClientRect().height), subTops:[...new Set(s.map(e=>Math.round( e.getBoundingClientRect().top)))].length, bodyH:Math.round(bd.getBoundingClientRect().height)});} AvalonFYDP.setActive(r,0); console.log(JSON.stringify({vw:innerWidth, rev:getComputedStyle(r).getPropertyValue('--fydp-css-rev').trim(), per:o}));})() `subTops` counts DISTINCT subtitle y positions in the open body: 1 for a single row, 2 for two rows. Anything higher means the floor is short and --fydp-acc-title-min needs a line adding. `imgH` must stay cardW/1.5 — if it does not, the aspect-ratio moved somewhere it should not have. • NOT A BUG FIX. The overlay is what the approved 3C export drew, at these same card sizes. This is a deliberate departure from the comp for the mini card, and the comp remains correct for every card that is 300px or wider. rev 1.9.0 — 2026-08-13 • THE TAB IS A TOP LAYER AGAIN, AND THE TWO BOXES NO LONGER MEET. 1.8.0 stopped the email tab covering the 3D pager arrow by painting the header OVER it (z-index 100 vs 99). That worked, and was rejected on sight: a position:fixed overlay disappearing behind page furniture is not a pattern anyone uses, and it does not read as intentional. Correct call. z-index is back to 30 and the whole 1.8.0 mechanism is gone — body.fydp-slideout-open, the stand-down rule and the JS state mirror. • THE CONSTRAINT, so this is not re-litigated a fourth time. .fydp-shead is position:sticky and full-bleed, so its box sweeps every y value in the viewport before it pins. The tab is position:fixed, so it sits at one y. A band that sweeps every y MUST cross a band that sits at one y. There is no CSS that makes them never intersect. The options are therefore only ever these three, and 1.7.x / 1.8.0 spent themselves discovering it the long way: tab in front -> it covers the arrow for ~200px of scrolling tab behind -> the tuck (1.8.0) REJECTED tab moves -> motion (1.7.x) REJECTED What IS achievable, and what this rev ships, is no overlap in the RESTING state — while the header is pinned and the section is being read — with the tab in front throughout and a brief crossing on the way in, exactly as the tab already crosses the cards and the CTA. That crossing is unremarkable. The persistent overlap was the bug. • HOW: one static px `top` on portrait, +165px from where the thicket puts it, so the tab rests at [260, 420] and the pinned header tops out below it. Sized from a live sweep of all eight categories: vw 394 header 145 / 165 / 165 / 165 / 165 / 185 / 165 / 145 max 185, and the ARROW only moves half of any height change because it is centred in .fydp-pager The header grows on narrower screens — the headline column is vw - 148, and the

itself starts wrapping below ~375 — so the max is estimated at ~232 at vw 360 and ~252 at vw 320. 260 clears all three. That estimate is the one unmeasured number here, which is why it is a custom property: --fydp-tab-top, one line, one number. VERIFY at your narrowest supported width: (async()=>{const r=document.querySelector('[data-fydp]'); const b=[...r.querySelectorAll('[data-fydp-block]')] .find(e=>e.offsetParent||e.getClientRects().length); const sh=b.querySelector('[data-fydp-shead]'); const f=()=>new Promise(k=>requestAnimationFrame( ()=>requestAnimationFrame(k)));const h=[]; for(let i=0;i<8;i++){AvalonFYDP.setActive(r,i);await f(); h.push(Math.round(sh.getBoundingClientRect().height));} AvalonFYDP.setActive(r,0); const t=document.getElementById('sidebar_slideout_toggle') .getBoundingClientRect().top; console.log(JSON.stringify({vw:innerWidth,sheadMax:Math.max(...h), tabTop:Math.round(t),clear:Math.round(t)-Math.max(...h)}));})() `clear` must be positive. If it is not, raise --fydp-tab-top by the shortfall. Nothing else in this file depends on the value. • WHY `top`, WHEN 1.7.1 ARGUED AGAINST IT. That objection was to ANIMATING it — a layout pass per frame on a fixed element mid-scroll. A static declaration resolves once at layout and costs nothing. Using px also kills the vh dependence that forced 1.7.x to compute a delta in JS: the thicket's 7/8/10/20% all resolve against viewport height while the thing being cleared is a pixel count, which is why no percentage was ever going to be right. • THE SPECIFICITY, stated because this is the file where that lesson was learned. style.css owns `top` in five !important rules at (1,0,0) (lines 5892 / 6143 / 6234 / 6372 / 6514) and their source order relative to this file is NOT stable — RUCSS can reorder it on any "Clear Used CSS". `body #sidebar_slideout_container` is (1,0,1) with !important, so it wins outright in every delivery mode rather than winning a tie. • The open form panel would have run off the bottom of a short viewport once the container dropped 165px, so #sidebar_slideout_content gets a matching max-height and scrolls. 100dvh with a 100vh fallback. • Portrait only. Landscape returns to exactly its pre-1.7.0 behaviour (z-index 30, style.css's 27/35/37% top), per the standing scope. rev 1.8.0 — 2026-08-13 • THE SLIDEOUT NO LONGER MOVES. AT ALL. 1.7.0 and 1.7.1 both tried to solve "the email tab covers the 3D pager's next arrow" by MOVING the tab. Measurement on the live site proved that cannot work, so the whole approach is withdrawn and replaced with four lines of paint order. THE PROOF, from getBoundingClientRect() on the affected device (viewport 853, container top 85.3 = 10%, toggle margin-top 10): tab [95, 255] 160px tall, position:fixed shead [T, T + 146] 146px tall, position:sticky arrow [T + 68, T + 112] 44px, inside the shead .fydp-shead is STICKY, so it travels the full height of the viewport before it pins at top:0 — and a 44px arrow riding inside it sweeps from y≈853 down to y=68. A 44px object crossing the whole screen passes through ANY 160px fixed band. The only band it would miss is one entirely above y=120, and a 160px element does not fit there. => No fixed position for the tab avoids the arrow. None. The 1.7.x shift merely relocated the collision: it began at T=251 and ran to T=47, i.e. for 204px of scrolling, which is exactly the reported "it repositions and still covers the arrow." AND THE MOVE COULD NOT BE HIDDEN EITHER. Translating a 160px band by S past a fixed 146px window changes the exposed length by S wherever you fire it — checked at three trigger points, always ~79px of visible change. To hide a 64px shift the bar would have to be 160+64=224px tall. It is 146. • WHAT REPLACES IT: `z-index: 100` on the pinned .fydp-shead (was 30). The slideout container is z-index 99 in the ROOT stacking context, and a probe up the whole ancestor chain of .fydp-shead found no stacking context between it and — no Elementor transform, no z-index on #fydp-sec-id, no will-change. So the two are siblings in the root context and 100 beats 99 outright. - The header is now painted OVER the tab, which answers the actual request ("never have the email signup over .fydp-shead") literally and at every scroll position, not just at the ends. - Hit-testing follows paint order, so the arrow is now TAPPABLE through the tab's column. That was broken at intermediate scroll positions in every version up to and including 1.7.1, even when it looked clear. - The shead is full-bleed with rgba(9,12,11,.95) + blur(10px) over a #000 tab, so the covered part of the tab does not read as "half hidden", it reads as a tab that starts at the bar's bottom edge. Nothing animates, nothing is measured, nothing is published to CSS. Deleted: --fydp-shead-h, --fydp-slideout-shift, .fydp-sec-inview, .fydp-slideout-offset, the `translate` rule, its transition restatement and its reduced-motion companion. See §SLIDEOUT. • ONE new state class: body.fydp-slideout-open, mirrored from the container's own .open/.closed by the FYDP JS. Required, not optional — open, the 310px form panel spans roughly y 85-585 and a raised header would slice straight across it. Contains "fydp" so the (.*)fydp(.*) RUCSS safelist pattern carries it, same as .fydp-sec-inview did. • ACCEPTED COST, recorded so nobody "fixes" it later: with the tab static at [95,255] and the pinned bar at [0,146], the top 51px of the tab (32%) sits behind the bar while the section is pinned, and during the crossing the bar briefly covers all but ~14px of it. That is the trade that was chosen over any motion at all. rev 1.7.1 — 2026-08-12 (SUPERSEDED by 1.8.0 — retained for the reasoning) • THE JOLT. v1.7.0 moved the slideout tab by overriding `top` and flipped it with an IntersectionObserver at threshold 0 on the .fydp root. Two faults, one symptom: - TIMING. threshold 0 with no rootMargin fires the moment the root's TOP edge touches the viewport BOTTOM — a full screen before any of this component is visible. On the live homepage that puts the flip in the middle of the "Explore The Avalon Lineup" grid (section 1abdde7, which sits immediately above #fydp-sec-id / f9731d6), so the tab jumped 76px with nothing on screen to explain it. Same a full screen late on the way back up. - PROPERTY. `top` is a layout property. Animating it out of the jolt was not an option on a fixed element mid-scroll on a phone, so v1.7.0 snapped, which is what made it read as a jolt. • Fix, both halves: - rootMargin '0px 0px -70% 0px' collapses the observer's band to the top 30% of the viewport. The class now flips when the block's top edge ENTERS that band — i.e. as the section arrives at the top of the screen, with the header visibly sliding into place — and off again only once the block has fully scrolled past. The movement is now simultaneous with, and explained by, the section's own arrival. - `top` is no longer touched at all. The offset is applied with the independent `translate` property, which composes with the container's existing `transform: translateX()` instead of fighting it, is compositor-only, and needs no !important because nothing else on the site sets `translate` (verified: 0 declarations in style.css). The five-rule !important `top` thicket is left exactly as it was. • The shift is a DELTA computed in JS from the container's own resolved `top`, not an absolute position, so it lands correctly on every one of the portrait device queries (7% / 8% / 10% / 20%) without this file having to know which one matched. It latches to the session maximum and resets only on resize/orientationchange, so paging between categories cannot nudge the tab mid-scroll as the headline rewraps. • Option A (a static offset for the whole page) was considered and declined: the hero video's CTA sits under the tab at the top of the homepage, so the tab has to keep its normal position up there. rev 1.7.0 — 2026-08-11 • THE PINK BORDER. hello-elementor/assets/css/reset.css (3.4.9) carries [type=button],[type=submit],button{ background-color:transparent; border:1px solid #c36; border-radius:3px; color:#c36; padding:.5rem 1rem; text-align:center; white-space:nowrap; ... } at (0,1,1)/(0,0,1), and it is enqueued AFTER this file (the child's wp_enqueue_scripts callback is registered before the parent's, so every child asset prints first). v1.1.0 deliberately weakened this file's button reset to `:where(.fydp) button` = (0,0,1) so it could not outrank the component rules — but that made it TIE with hello's reset, and the later source won. Three symptoms on 3A, all one rule: - pink 1px top + right borders on .fydp-rail__item (its own rule declares only border-left and border-bottom, so the other two edges were left for the cascade to fill) plus border-radius:3px; - `white-space:nowrap` — never declared here at ALL, in any mode — so the long SEO category titles overflowed the 370px rail and spilled across the card grid (button{overflow:visible} too); - `text-align:center` on rail rows, against the 3A comp's left. • Fix is order-independent, because source order here is not stable: under RUCSS the used-CSS blob happened to place this file AFTER reset.css (pink suppressed, spill not), under ?nowprocket the raw link order applies (both symptoms). Any "Clear Used CSS" can flip that. 1. Reset selector `:where(.fydp) button` (0,0,1) -> `.fydp [data-fydp-block] :where(button)` (0,2,0). (0,2,0) and not the more obvious (0,1,0) because hello's rule is a SELECTOR LIST and its `[type=button]` arm is itself (0,1,0) — every control this component renders is `