From e3247f2f2a790af1b6d5ea3fe7388d436aa8cd61 Mon Sep 17 00:00:00 2001 From: another-simple-pixel Date: Tue, 30 Jun 2026 02:28:25 -0700 Subject: [PATCH] website: keep the testing-water hero flag locked to its background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The standalone flag phone + Reserve block was positioned by viewport percentage (left:82%, bottom in canvas units), so on wide or narrow desktops it drifted right/down relative to the centred background illustration. Anchor it to the section centre instead and offset it in canvas units (--sec-vwu/--sec-vhu), which scale by min(vw,vh) exactly like the background — so the block stays pinned to the same spot in the illustration on any aspect ratio, as if baked into it. Mobile is unaffected (it overrides the block to static/grid). Co-Authored-By: Claude Opus 4.8 --- website/src/css/design3.css | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/website/src/css/design3.css b/website/src/css/design3.css index cf8ec81be7..634f3b21b4 100644 --- a/website/src/css/design3.css +++ b/website/src/css/design3.css @@ -1670,16 +1670,21 @@ section.page.footer { font-size: calc(var(--sec-vwu) * 2.3); } -/* testing-water: standalone flag phone + reserve block, bottom-right (matches the baked-in - flag position of the full background). FIRST PASS — positions to calibrate visually. */ -/* testing-water: flag + Reserve block are ONE positioned unit (flex), so they - stay attached when the block's width changes. */ +/* testing-water: flag + Reserve are ONE absolutely-positioned unit. Anchored to the SECTION CENTRE + (= the centred background illustration's centre) and offset in canvas units (--sec-*), which scale + by min(vw,vh) exactly like the background. So the block stays locked to the same spot in the + illustration on any aspect ratio — as if baked into it — instead of drifting with viewport width. + --flag-x / --flag-y are the offsets from centre (canvas units); width:max-content keeps the text + from being squeezed when the position changes. */ .cf-hero--testing-water .cf-flag-block { position: absolute; - bottom: calc(var(--sec-vhu) * 15); - left: 82%; /* horizontal CENTER of the group (it floats in the gutter, not pinned to the edge) */ - transform: translateX(-50%); - width: max-content; /* size to content, so moving the position never squeezes the text */ + left: 50%; + top: 50%; + --flag-x: 35; + --flag-y: 16; + transform: translate(calc(-50% + var(--sec-vwu) * var(--flag-x)), + calc(-50% + var(--sec-vhu) * var(--flag-y))); + width: max-content; display: flex; align-items: center; }