/* ============================================================================ Affiliates band 1 — hero. Figma 959:69604 (1512 x 890), file rijNBFC24rPaqbSoj29uvJ. Every dimension below is the value in the node JSON. Tokens come from atlas-tokens.css; the navbar is the shared .afx-nav from atlas-chrome.css and the announcement bar the shared .afx-bar — neither is rebuilt here. This frame is the same hero component as the Free Trial hero (774:269166), so the geometry reasoning in atlas-ft-hero.css applies verbatim. The two differences: this page DOES carry the announcement bar above the hero (959:69603, its own 1512x56 sibling frame), and the ghost button's chevron is visible:false in the file, so it ships without one. GRADIENTS: re-derived from gradientHandlePositions in PIXEL space. Figma stores handles normalised to the node box, so reading them without undoing the aspect ratio gives the wrong angle and the wrong stop offsets on any non-square box. Each gradient below carries its derived angle and stops. COPY: the design's strings, with two deliberate departures. 1. "Become а Partner" (959:69628) is drawn with a Cyrillic а (U+0430). Shipped with a Latin a — the Cyrillic one breaks search and screen readers and is plainly a typo. 2. The commission figures are NOT the design's. 959:69611 reads 10% and 959:69625 "Up to 15%", both of which predate Affiliate Program v3 (July 2026). v3 sets the entry tier at 12.5% and the top published tier (Elite Partner) at 22.5%, so those are the numbers here. 30% exists in v3 only as an override-inclusive ceiling and is internal — not published. ========================================================================= */ .afxah { position: relative; min-height: 890px; overflow: hidden; background: var(--af-black); } .afxah *, .afxah *::before, .afxah *::after { box-sizing: border-box; } /* --- 959:69604 frame fill — image f793a536…, scaleMode FILL (cover, centred). Source is 1536x1024 into a 1512x890 box. ---------------------------- */ .afxah-bg { position: absolute; inset: 0; background: url('/assets/figma/aff-hero-bg.webp') no-repeat 50% 50% / cover; pointer-events: none; } /* --- 959:69605 "Ellipse 473" — 1693x956 at x -776 y 117, #051F1D, LAYER_BLUR 516.4 (Figma's radius is ~2x the CSS one -> 258.2px), mix-blend-mode HARD_LIGHT. Left edge x=-776 from a 50% origin is -776 - 756 = -1532. DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome composites a backdrop-filter on a mix-blend-mode element as an opaque frosted plate over the whole ellipse, which buries the artwork behind it. Layer blur + hard-light alone matches the reference render, so the background blur is dropped — same call as the home and Free Trial heroes, which are the same component. ------------------------------- */ .afxah-glow { position: absolute; left: 50%; top: 117px; width: 1693px; height: 956px; margin-left: -1532px; background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* --- 959:69606 "Overlay" — 1512x900 at y 0. Note the rectangle is 10px taller than the 890 band and is not clipped in the file; overflow hidden on the section handles that. ---------------------------------- */ .afxah-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 900px; background: linear-gradient(89.91deg, rgba(5,63,59,.62) .05%, rgba(194,213,213,0) 21.06%, rgba(194,213,213,0) 81.86%, rgba(5,63,59,.4) 98.4%); pointer-events: none; } .afxah-inner { position: relative; z-index: 2; } /* --- the content column. 959:69622 sits at x 46 and the stat rules start at x 46 too, so this page is drawn on a 46px gutter, not the 40px one the home page uses. Fixed 1512 stage, CENTRED, so nothing left-aligns above the design width. ---------------------------------------------------- */ .afxah-stage { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 46px; } /* --- 959:69622 — content frame 1054x452 at (46, 187), column, gap 32. The navbar is 10 (margin) + 59 (height) = 69 tall, so 187 - 69 = 118 of MARGIN. Padding would inflate the box and drag every child down. ----- */ .afxah-body { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 1054px; margin-top: 118px; } /* 959:69623 — DM Sans 500 / 14 / 21px (150%), #FFF */ .afxah-eyebrow { margin: 0; font-family: var(--font-ui); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; color: var(--af-white); } /* 959:69624 — SF Pro 510 / 110 / 99px (90%) / ls -3%; 911x198, i.e. two lines. Fixed width, not max-width: the wrap "Send traders. / Get paid in 24 hours." is the design's. Two fills, white under a near-white top-light ramp; the ramp is on top and opaque, so it is the one that renders. */ .afxah-h1 { width: 911px; margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 110px; line-height: 99px; letter-spacing: -3.3px; color: var(--af-white); background: linear-gradient(122.01deg, #F8F8F8 57.28%, #FFFFFF 93.19%); -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:69625 — SF Pro 510 / 18 / 27px / ls -2%, opacity .8, 550x81 (3 lines) */ .afxah-lead { width: 550px; margin: 0; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: var(--af-white); opacity: .8; } /* --- 959:69626 — CTA row 469x56, gap 12 ---------------------------------- */ .afxah-ctas { display: flex; flex-direction: row; align-items: center; gap: 12px; } /* 959:69627 — 221x56, radius 100, fill #E1FFA0, padding 18/32, gap 8, drop shadow 2/14/24.1 rgba(38,63,66,.12), 1.5px INSIDE gradient stroke. The stroke paint carries opacity .6, folded into the alphas below. Ink is #001D21 — set, never inherited from a link colour. */ .afxah-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 221px; height: 56px; padding: 18px 32px; border-radius: var(--r-pill); background: var(--af-lime); color: var(--af-ink-teal); box-shadow: 2px 14px 24.1px 0 rgba(38,63,66,.12); font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 19.09px; letter-spacing: -.48px; text-decoration: none; white-space: nowrap; border: 0; transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out); } /* a border cannot take a gradient, hence the padding/mask ring */ .afxah-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(127.41deg, rgba(5,63,59,.6) 39.51%, rgba(5,63,59,.162) 68.35%, rgba(5,63,59,.6) 95.58%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* I959:69630 — the 20x20 double chevron, second stroke at .4 opacity, ink #001D21. Byte-identical to the home export, so that file is reused. */ .afxah-chev { width: 20px; height: 20px; flex: none; display: block; transition: transform var(--t-fast) var(--e-out); } /* 959:69631 — 236x55, radius 50, 1px INSIDE rgba(255,255,255,.08), BACKGROUND_BLUR 27.8 (Figma radius is ~2x the CSS one -> 13.9px), no fill. 959:69633, its chevron frame, is visible:false — no icon here. */ .afxah-btn-ghost { display: inline-flex; align-items: center; justify-content: center; width: 236px; height: 55px; padding: 18px 32px; border-radius: var(--r-50); border: 1px solid var(--w-08); background: transparent; -webkit-backdrop-filter: blur(13.9px); backdrop-filter: blur(13.9px); font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 19.09px; letter-spacing: -.48px; color: var(--af-white); text-transform: capitalize; text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } /* --- 959:69607 / 959:69612 / 959:69617 — the stat strip. Three 449x90 columns at x 46 / 534 / 1022, y 781. That is a 39 gap and a total of 1425, 5 wider than the 1420 the 46px gutter leaves, sitting 2.5px right of the frame centre. Reproduced as drawn: the columns keep their 449 and overflow the stage by those 5px on the right, which is invisible (the rule inside each column is only 436 wide) and keeps all three rules on their drawn x. The content frame ends at 187 + 452 = 639, so 781 - 639 = 142 of MARGIN. --------------------------------------- */ .afxah-stats { display: flex; flex-direction: row; gap: 39px; width: 1425px; margin-top: 142px; } /* column: 449x90, column, gap 17. The rule is a Figma VECTOR of height 0 with a 1px CENTER stroke, so it contributes nothing to the 90: 0 + 17 + 73. A CSS hairline has to be a real 1px box, so the gap absorbs it — 1 + 16 + 73 = 90, and the label still lands on its drawn y of 798. */ .afxah-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 449px; flex: none; } /* 959:69608 — VECTOR 436 wide, 1px CENTER stroke rgba(255,255,255,.25) */ .afxah-rule { width: 436px; height: 1px; background: var(--w-25); flex: none; } /* Below the 1512 design frame the three pinned 449 columns had nowhere to go: measured at 1280 the row ran 191px past the right edge and was clipped by the band's overflow, so the third stat was cut in half. Only the sub-1512 case is touched — at and above the design width the row keeps its drawn 1425 and the documented 5px overhang. */ @media (max-width: 1511px) { .afxah-stats { width: 100%; } .afxah-stat { width: auto; flex: 1 1 0; min-width: 0; } .afxah-rule { width: 100%; max-width: 436px; } } .afxah-statbody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } /* 959:69610 — Saans 400 / 14 / 21px, opacity .8 */ .afxah-statlabel { margin: 0; font-family: var(--font-alt); font-weight: var(--w-regular); font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8; } /* 959:69611 — Saans 600 / 32 / 48px */ .afxah-statvalue { margin: 0; font-family: var(--font-alt); font-weight: var(--w-semi); font-size: 32px; line-height: 48px; color: var(--af-white); } /* ------------------------------------------------------------------ motion */ @media (hover: hover) and (pointer: fine) { .afxah-btn:hover { box-shadow: 2px 18px 28px 0 rgba(38,63,66,.18); } .afxah-btn:hover .afxah-chev { transform: translateX(2px); } .afxah-btn-ghost:hover { background-color: var(--w-06); } } .afxah-btn:active, .afxah-btn-ghost:active { transform: scale(.98); } .afxah-btn:focus-visible, .afxah-btn-ghost:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .afxah-btn, .afxah-btn-ghost, .afxah-chev { transition: none; } } /* 959:69635 — the navbar is inset 10 from the 1512 frame, not 46, so it is a sibling of .afxah-stage rather than a child. .afx-nav already carries `width: calc(100% - 20px); max-width: 1492px; margin: 10px auto 0`, so it only needs the 1512 column to centre inside. */ .afxah-navwrap { width: 100%; max-width: var(--shell); margin: 0 auto; } /* --------------------------------------------------------------------------- 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) { .afxah-glow { filter: none; background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%); } }