/* ============================================================================ Affiliates band 7 — final CTA. Figma 959:116847 (1512 x 1597), file rijNBFC24rPaqbSoj29uvJ. THE FOOTER IS A CHILD OF THIS FRAME. 959:116879 is the shared footer component, 1488x803 at (12, 794) — so the 1597 is CTA + footer, and the CTA on its own is exactly 794. Honouring 1597 here AND appending the shared footer would leave an 803px hole, which is the bug that hit home band 5e. This file styles the 794 only; the footer comes from fragments/footer.html and atlas-footer.css, unchanged. That shared footer measures taller than 803 because the home variant's top row is 232 where this frame draws 161 — the same component with shorter columns. Reused as-is rather than forked, so the band ends up taller than the file by that difference. Shared furniture wins over a per-page footer. COPY: 959:116964 reads "10% from sale one". Affiliate Program v3 puts the entry tier at 12.5%, so that is the number here — same correction as the hero's. ========================================================================= */ .afxax { position: relative; overflow: hidden; height: 794px; background: var(--af-black); } .afxax *, .afxax *::before, .afxax *::after { box-sizing: border-box; } /* --- 959:116848 — 1516x853 at 0,0, TWO stacked image fills in SCREEN: a base plate (10f8250f…) with a texture (20869da1…) over it. --------- */ /* --------------------------------------------------------------------------- ANCHORING. Everything below is drawn at an x on the 1512 canvas, so it is positioned from the CENTRE (left 50% + a margin of x - 756), not from the section's left edge. Plain `left: px` pins art to the viewport edge, so above 1512 it drifts left of everything it belongs to — which is what happened here. Backgrounds that should cover the viewport are the other case and go full-bleed instead: left 0 / right 0 / width auto with a min-width of the drawn box. ------------------------------------------------------------------------ */ .afxax-bg { /* full-bleed: at 2085 a fixed 1516 left the right-hand 569 as bare black. */ position: absolute; left: 0; right: 0; width: auto; min-width: 1516px; top: 0; height: 853px; background: url('/assets/figma/aff-cta-bg.webp') no-repeat 50% 50% / cover; pointer-events: none; } .afxax-bg::after { content: ''; position: absolute; inset: 0; background: url('/assets/figma/aff-cta-tex.webp') no-repeat 50% 50% / cover; mix-blend-mode: screen; } /* --- 959:116849 "Ellipse 473" — the same hero ellipse, moved: 1693x956 at (27, -124), #051F1D, HARD_LIGHT, LAYER_BLUR 516.4 -> 258.2 CSS. Its BACKGROUND_BLUR is dropped for the reason given in the hero. ----- */ .afxax-glow { position: absolute; left: 50%; top: -124px; margin-left: -729px; width: 1693px; height: 956px; background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* --- 959:116851 "Frame 2147259188" — the light rig, 1764.3x1464.1 at (-126, -351). Its render bounds are clipped by the frame, so the export is placed on the BOUNDING box and the section clips it, which is what Figma does. ---------------------------------------------------------- */ .afxax-light { position: absolute; left: 50%; top: -351px; margin-left: -882px; width: 1764.3px; height: 1464.1px; pointer-events: none; max-width: none; } /* --- 959:116850 — a 737x41 black plate at (388, 725) under the proof strip, LAYER_BLUR 74.6 -> 37.3 CSS. It is what makes the strip legible over the artwork. --------------------------------------------------------- */ .afxax-plate { position: absolute; left: 50%; margin-left: -368px; top: 725px; width: 737px; height: 41px; background: #000; filter: blur(37.3px); pointer-events: none; } .afxax-stage { position: relative; z-index: 2; display: flow-root; width: 100%; max-width: var(--shell); margin: 0 auto; } /* --- 959:116865 — head, 913 wide at (300, 120), gap 32 ----------------- */ .afxax-head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 913px; margin: 120px auto 0; } .afxax-headtop { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 959:116867 — pill 119x33, radius 57, padding 6/14, gap 7, backdrop blur 16.7 -> 8.35 CSS. No fill in the file; the blur and the ring carry it. */ .afxax-eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; border: 1px solid var(--w-08); -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px); margin: 0; font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); white-space: nowrap; } .afxax-eyebrow img { width: 16px; height: 16px; display: block; flex: none; } /* 959:116870 — two 80/80 lines, centred, 913x160 */ /* both lines are single lines in the file; without nowrap the first wraps inside the 913 box and the head grows 80. */ /* 913 is the Figma width, measured in SF Pro Display. The shipped stack needs 940 for the same nowrap line, so the last word ("trades") was painted 27px outside the box and clipped. The band is 1512 wide and the block is centred, so there is room; the box now takes its own content. */ .afxax-title { margin: 0; text-align: center; width: auto; max-width: 100%; } .afxax-title span { white-space: nowrap; } .afxax-title span { display: block; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: var(--af-white); } .afxax-title .t1 { background-image: linear-gradient(122.26deg, #F8F8F8 45.71%, #636363 93.18%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* ink guard. background-clip:text paints the gradient only inside this element's border box, so the descender that hangs below the last line box gets no paint at all and is sliced off flat. Push the paint box down and take the same space straight back, so the glyphs are whole and nothing below this element moves. */ padding-bottom: .2em; margin-bottom: -.2em; } /* --- 959:116873 — CTA row, 479x56, gap 12. Same two buttons as the hero; the ghost button's chevron is visible:false here too. --------------- */ .afxax-ctas { display: flex; flex-direction: row; align-items: center; gap: 12px; } /* --- 959:116959 — proof strip, 639 wide at (436.5, 735), gap 16, items 16 tall with a 16px icon and an 8 gap. ------------------------------ */ .afxax-proof { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; width: 639px; margin: 318px auto 0; } .afxax-proofitem { display: flex; flex-direction: row; align-items: center; gap: 8px; } .afxax-proofitem img { width: 16px; height: 16px; flex: none; display: block; } /* 959:116964 — SF Pro 510 / 14 / 14px, white */ .afxax-proofitem span { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; color: var(--af-white); white-space: nowrap; } /* 959:116878 — the same ghost button as the hero's, drawn 246 wide here against the hero's 236 (the CTA row is 479, not 469). */ .afxax .afxah-btn-ghost { width: 246px; } /* --------------------------------------------------------------------------- MOBILE PERFORMANCE, 3 Aug 2026 This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur cost is O(area x radius), so on a phone GPU it is one of the most expensive things on the page — and because it sits in the backdrop root, anything that samples the backdrop (the mobile menu's overlay) had to resolve it first, which took ~15s. A 258px-blurred solid ellipse is, visually, a radial gradient; below 768 it is drawn as one, for nothing. ------------------------------------------------------------------------ */ @media (max-width: 767px) { .afxax-glow { filter: none; background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%); } }