/* ========================================================================== Wayvo "How it works" — [wayvo_how_it_works] Enqueued by shortcodes/wayvoHowItWorks.php, on pages that use the shortcode only. ── ON THE NUMBERS ────────────────────────────────────────────────────────── Built from the Figma export for "How it works 01", a 1440x800 frame. The four design PNGs are 2880x1600 — exactly 2x — so scale is 1.0 and the export's values go in literally. Every number in the export is a clean integer except the badge digit's 13.7863px, which is a 16px style caught inside a 0.861645 scaled instance — the same artefact the featured brands card carried. Built at 14. ── --hiw-scale IS A LENGTH, AND THAT IS THE WHOLE POINT ──────────────────── "How many rendered px per design px." The literals it multiplies are therefore UNITLESS Figma measurements: calc(325 * var(--hiw-scale)), not calc(325px * ...). Same convention as customHeader.css. WHY, AND IT IS THE ROOT OF EVERY SCALE PROBLEM THIS PROJECT HAS HAD: a Figma frame is exactly ONE width and a browser is every width. A fixed 325px card is 22.6% of the 1440 frame but 27% of a 1200 container and 36% of a 900 one — the same CSS, a visibly different design. The first build of this section followed the export literally (the left column is `flex: none` at 325, the right `flex-grow: 1`), which is exactly right at 1440 and makes the cards read far too large at anything narrower. That is what Paul saw on the homepage. So the scale is derived from the CONTAINER rather than fixed: --hiw-scale: clamp(0.764px, calc(100cqw / 1440), 1.334px) 100cqw is the container's own width, so at 1440 the scale is exactly 1px and every value is the design's, and at any other width the whole section keeps the design's proportions instead of only its absolute sizes. cqw and not vw: the section sits inside whatever the page gives it — an Elementor section, the OceanWP container — and the viewport is not that box. Measuring the wrong one is how a design ends up correct in isolation and wrong on the page. THE TWO LIMITS ARE DELIBERATE. The cap at 1.334 is 1920/1440: past that the section stops growing, because a 99px heading on an ultrawide monitor is not what anybody drew. The floor at 0.764 is 1100/1440, which is where the layout stacks anyway — below it the tiers set their own scale, since shrinking 16px body copy proportionally would put it under 10px. --hiw-nudge is a plain multiplier on top, for "a bit smaller" without touching any of this. One number, as before. ── THE OPEN STEP IS AUTO-HEIGHT, NOT THE EXPORT'S 170 ────────────────────── The export reports 170 for the open card. That is not a fixed height; it is what a FOUR-LINE description comes to. Measured across all four PNGs: open height = 20 + 38 (title) + 4 (gap) + 22n (n body lines) + 20 4 lines -> 170, list 464 (the export's own numbers) 3 lines -> 148, list 442 2 lines -> 126, list 420 and the list's bottom edge is 760 in every one of them — 800 less the 40 padding. So the column is bottom-anchored and the open step grows upward. Building to a fixed 170 would have clipped three steps out of four. The reveal therefore animates grid-template-rows 0fr -> 1fr rather than a height, which is the only way to transition to a content-driven height without measuring anything in JS. ========================================================================== */ /* The section cannot be its own container query container, so the scale is read from this wrapper. Everything else lives on .wayvo-hiw. */ .wayvo-hiw-wrap { container-type: inline-size; width: 100%; } .wayvo-hiw { /* Rendered px per design px. See the note at the top before changing it. */ --hiw-nudge: 1; /* --wv-cw, not 100cqw (2026-10-21): the scale stops at 1 once the container passes the content width, so the content row tops out at the design's 1360 + 40 padding = 1440. The grey still bleeds (below). */ --hiw-scale: calc(clamp(0.764px, calc(var(--wv-cw, 100cqw) / 1440), 1.334px) * var(--hiw-nudge)); /* Palette. The ground is the same #F5F5F5 the gift card page uses. */ --hiw-ground: #f5f5f5; --hiw-surface: #ffffff; --hiw-ink: #101011; --hiw-ink-soft: #8d8b8b; --hiw-badge-idle: #e5e5e5; /* Overridden per step by an inline custom property on each button, so one declaration feeds the badge fill and anything else that needs the step's colour. Falls back to the idle grey, which makes a step with no colour degrade to "looks closed" rather than to a colour nobody chose. */ --hiw-step-color: var(--hiw-badge-idle); /* The section's vertical padding, as a token because the Discover column has to cancel exactly this much to reach the section's edges. Two places needing the same number is precisely how they end up disagreeing. */ --hiw-pad: calc(40 * var(--hiw-scale)); position: relative; /* the CTA is positioned against this */ box-sizing: border-box; display: flex; flex-direction: row; align-items: flex-end; gap: calc(40 * var(--hiw-scale)); width: 100%; min-height: calc(800 * var(--hiw-scale)); /* FULL WIDTH, ALWAYS. The section used to carry max-width: calc(1440 * var(--hiw-scale)) with auto margins, which left bare page either side of the grey once the scale hit its cap. The grey is the section, so it fills; what gets capped is the CONTENT ROW, and the padding is what does the capping. The plain padding is declared first as the fallback: 100cqw is invalid without container query support, which would otherwise take the whole declaration with it and leave the section with no padding at all. */ padding: var(--hiw-pad); /* Below the cap this is EXACTLY equal to 40 * scale — (cqw - 0.9444cqw)/2 and 40 * cqw/1440 are the same number — so the two agree continuously and this only starts doing anything once the scale stops growing. Past that the extra width becomes margin and the content row stays 1360 * scale, which is the design's content row. */ padding-inline: calc((100cqw - 1360 * var(--hiw-scale)) / 2); background-color: var(--hiw-ground); /* ── THE GREY BLEEDS TO THE PAGE EDGES, THE CONTENT DOES NOT ────────────── The section fills its container, but the container is the boxed one the page gives it — 1180 on the homepage against a 1440 viewport — so the grey stopped short with bare page either side. What is wanted is the BAND full width and everything inside it exactly where it already is. So this paints, and does not lay out. The shadow has no blur and no offset: it is 100vmax of solid --hiw-ground spread evenly around the border box, and the clip-path then cuts it back flush top and bottom while leaving the sideways spread alone. Net result is a full-width band exactly as tall as the section. WHY NOT THE USUAL TRICKS. A `width: 100vw` pseudo-element is the common answer and it is wrong here twice: 100vw INCLUDES the scrollbar, so it overhangs by ~15px and gives the whole page a horizontal scrollbar, and it needs `z-index: -1`, which escapes this element — .wayvo-hiw is position:relative with z-index auto and so creates no stacking context — and can land behind an Elementor ancestor's own background, where it is invisible. A box-shadow is part of this element's own painting: it cannot be covered by the content, cannot escape upwards, and contributes nothing to the scrollable overflow area, so no scrollbar. WIDENING THE WRAPPER IS NOT AN OPTION, and this is the real constraint. .wayvo-hiw-wrap is the container query container every number in this file is measured from. Stretching it to the viewport would take 100cqw from 1180 to 1440 and rescale the ENTIRE section by 22% — the thing asked for was a wider background, not a bigger component. Safe to clip at the border box because both Discover bleeds stop exactly flush with it — the desktop column is 100% + 2 * pad tall against a -1 * pad margin, which is the section's height precisely, and the mobile one bleeds sideways, where the clip is open to 100vmax anyway. */ box-shadow: 0 0 0 100vmax var(--hiw-ground); clip-path: inset(0 -100vmax); font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--hiw-ink); } .wayvo-hiw *, .wayvo-hiw *::before, .wayvo-hiw *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- Left column — Frame 545 -------------------------------------------------------------------------- */ /* space-between over the fixed 720 puts the heading at the top and the steps at the bottom. That bottom anchoring is the mechanism, not a side effect: the open step grows UPWARD, so the list's last card never moves. */ .wayvo-hiw__col { flex: 0 0 calc(325 * var(--hiw-scale)); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: calc(40 * var(--hiw-scale)); align-self: stretch; min-height: calc(720 * var(--hiw-scale)); } /* THE HEADING IS WIDER THAN ITS COLUMN, and that is what the design does: the column is 325 and the H2's own box is 536. It overflows to the right, where the right column's content is centred in 995 and never reaches it. Not clipped, and deliberately not forced to wrap inside 325 — at 56px that would break it into five or six lines. */ .wayvo-hiw__heading { flex: none; width: calc(536 * var(--hiw-scale)); max-width: none; margin: 0; font-size: calc(56 * var(--hiw-scale)); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--hiw-ink); } /* Two-tone in the design: the first clause muted, the rest ink. */ .wayvo-hiw__heading-muted { color: var(--hiw-ink-soft); } /* -------------------------------------------------------------------------- Steps — Frame 549 -------------------------------------------------------------------------- */ .wayvo-hiw__steps { display: flex; flex-direction: column; align-items: stretch; gap: calc(20 * var(--hiw-scale)); width: 100%; } /* A real