From 6302a500d5ac6a3df10739ba540c2f292feb5b7c Mon Sep 17 00:00:00 2001 From: Sam Shao Date: Mon, 10 Aug 2026 08:42:50 -0700 Subject: [PATCH] Fix green-dots watermark drifting from "100T" at wide viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same root cause and fix pattern as the carousel-story photo/dots drift: left:-55px lived directly in .cards-stat-container (the full-bleed section), so it resolved against that element's own true edge — not against the max-width:1200px centered grid "100T" and the other stats sit in. That value was a margin from the true edge, correct-looking only at the specific viewport width it was measured at; at any wider width the true edge moves further from the grid's own edge than the grid's does, dragging this watermark away from "100T" the wider the screen gets. Confirmed directly: 39px gap from "100T" at 1464px, 267px at 1920px. Fixed via a calc() formula instead of a wrapping reference element (the approach used for carousel-story's analogous fix) — the existing comments on .cards-stat-container's own wrappers already flag why giving them their own position would risk lifting the picture's paint layer above the stat-grid block that follows it in DOM order, so introducing a new positioned wrapper here isn't the lower-risk option it was for carousel-story. (100vw - 1200px)/2 is the grid's own left edge (standard centering math, valid because this section is genuinely full-bleed so its own width is the viewport's), then offset by "100T"'s own 80px padding, fortinet.com's measured 32px gap, and this image's own 228px width. fortinet.com's real gap between its first stat number and its own green-dots watermark is a constant 32px, verified directly at both 1464px and 1920px (identical both times) — recalibrated from that real, width-independent relationship rather than reusing a value that only happened to look right at one width. Verified: gap between "100T" and the watermark is now 32px at both 1464px and 1920px (was 39px vs 267px before this fix). Mobile unaffected (fix is scoped to the existing >=900px media query). Co-Authored-By: Claude Sonnet 5 --- blocks/cards-stat/cards-stat.css | 34 +++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/blocks/cards-stat/cards-stat.css b/blocks/cards-stat/cards-stat.css index ca1e6c4..da83665 100644 --- a/blocks/cards-stat/cards-stat.css +++ b/blocks/cards-stat/cards-stat.css @@ -168,7 +168,8 @@ main .cards-stat-container.dark { grid's own first column off the left edge of the page — at left:0 (fully on-canvas) all 5 of its columns show, one more than the source's 4. -55px is exactly one column's spacing (the asset's dots repeat every 55px), so - it drops precisely the first column and nothing more. */ + it drops precisely the first column and nothing more. Overridden below + at >=900px, where this value stops being correct — see that rule. */ bottom: -40px; } @@ -193,6 +194,37 @@ main .cards-stat-container.dark { width: 228px; height: 411px; overflow: hidden; + + /* -55px (the base rule above) is a margin from this section's own + full-bleed left edge — correct-looking only at the specific viewport + width it was measured at. At >=900px "100T" and the other stats sit + in a max-width:1200px centered grid (.cards-stat > ul), so the gap + between this section's true edge and that grid's own edge grows with + viewport width, dragging this watermark away from "100T" the wider + the screen gets (confirmed directly: 39px gap from "100T" at 1464px, + 267px at 1920px). Recalibrated from fortinet.com's own real, + constant relationship instead — checked directly there: its own + first stat number and its green-dots watermark stay exactly 32px + apart regardless of viewport width (identical at 1464px and 1920px). + + (100vw - 1200px) / 2 is that centered grid's own left edge (standard + max-width/margin:auto centering math) — since this section is + full-bleed, its own left edge is the viewport's, so 100vw stands in + for "this section's own width" here without needing a separate + centered reference element (the approach used for carousel-story's + analogous photo/dots drift, where the clipping/stacking rules on + this section's own wrapper make adding one riskier — see the + "intentionally left position:static" comment above). "100T" itself + sits 80px past that edge (.cards-stat-card-body's own left padding + at this width) via text-align:center on an h3 that still spans its + full grid cell, not the rendered glyphs' own edge — a stable + reference independent of how wide any specific number renders. + Subtracting the target 32px gap and this image's own 228px width + gives this element's own left edge, expressed relative to the + viewport (the containing block position:absolute resolves against + here, since .cards-stat-container is that same full-bleed width): + (100vw - 1200px)/2 + 80 - 32 - 228 = (100vw - 1200px)/2 - 180. */ + left: calc((100vw - 1200px) / 2 - 180px); } .cards-stat-container > .default-content-wrapper:last-child img {