/* ============================================================================ Stories — FINAL CTA. Figma 705:524695 "Frame 2147259241", 1512 x 1597, at y = 4560 inside the desktop frame 705:463416. Fragment: fragments/st2-cta.html Depends on: atlas-tokens.css, atlas-hero.css (button component). HEIGHT. The 1597 Figma reports INCLUDES the site footer 705:524725 (y = 5354, 803 tall), which is a child of this frame but ships as its own reusable band. This file stops at the footer's top edge: 1597 - 803 = 794. Figma child order is back-to-front, so children[0] is the BOTTOM layer. The stack, in paint order, in band-relative coordinates (Figma y - 4560): 705:524696 bg photo 1516x853 @ (0, 0) blendMode SCREEN 705:524697 Ellipse 473 1693x956 @ (27, -124) #051F1D, HARD_LIGHT 705:524698 black plate 737x41 @ (388, 725) LAYER_BLUR 74.6 705:524699 clip frame 1821.3x1629.1 @ (-183, -351) 705:524700 "light" 2158.4x3337.4 @ (-634, -2150.7) node opacity .3 705:524713 content column 558x392 @ (477, 120) 705:524725 footer 1488x803 @ (12, 794) NOT BUILT HERE 705:524803 Mask group — its only child 705:524804 is visible:false 705:524805 trust row 706x16 @ (403, 735) Every y offset below is a margin or an absolute top, never padding. REUSED FROM elsewhere in the build, rather than written a second time: .afx-btn-lime / .afx-btn-ghost / .afx-btn__chev (atlas-hero.css) — the drawn instances are the same component at the same 293x56 / 234x55, radius 100 / 50, padding 18/32, gap 8, 1.5px inside gradient stroke, 1px rgba(255,255,255,.08) stroke, backdrop-blur 27.8. Only the two values this instance draws differently are re-stated below. /assets/figma/final-coin.svg — 705:524716 is the same vuesax/bulk/coin. /assets/figma/final-check.svg — 705:524809 is the same 13x13 #7CB1AC tick inside a 16x16 frame. /assets/figma/icon-chevron-lime.svg — I705:524723;194:75575 is the same double chevron, ink #001D21 with the second stroke at .4. PRICE. "$5" is a Pay Later literal, not a LAB data field, so there was never anything to read it from and no writer was ever wired to the old [data-af-entry-price] hooks. They are gone. Following fragments/final.html: the body sentence keeps its "$5" exactly as drawn, and only the lime CTA drops it and re-points at checkout.atlasfunded.com. See the COPY FLAG in fragments/st2-cta.html. ========================================================================= */ /* 705:524695 — 1512x1597. Two stacked linear fills with identical handles, so only the top one (fills[1]) is drawn: #303030 -> #0F0F0F, handles [[.5076, 0], [.5076, .4389]] i.e. the ramp finishes at .4389 of the FULL 1597 frame = 700.9px, and everything below is flat #0F0F0F. Expressed against this 794px box that is 700.9 / 794 = 88.27%. (atlas-final.css carries the raw 43.89% on its own 794px box, which lands the ramp at 348px instead of 732px. Re-derived here rather than copied.) `isolation: isolate` confines the SCREEN and HARD_LIGHT layers to this band instead of letting them blend against the section above. */ .afxs-cta { position: relative; isolation: isolate; min-height: 794px; overflow: hidden; background: linear-gradient(180deg, #303030 0%, #0F0F0F 88.27%); font-family: var(--font-sans); color: var(--af-white); } /* 705:524696 "image 1167" — 1516x853 at (0, 0), blendMode SCREEN. The fill is scaleMode STRETCH with an imageTransform; the crop is baked into the export, so a plain `cover` is correct. FULL-BLEED: this is a band background, not placed art. Pinned at 1516 it stops short on wider viewports and leaves a bare strip of flat band colour down the right, so it spans the viewport and `cover` keeps the aspect. */ .afxs-cta__bg { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1516px; height: 853px; background: url('/assets/figma/st2-cta-bg.webp') center / cover no-repeat; mix-blend-mode: screen; pointer-events: none; } /* 705:524697 "Ellipse 473" — 1693x956 at (27, -124), #051F1D, LAYER_BLUR 516.4 (Figma's radius is ~2x the CSS blur() value) -> 258.2px, blendMode HARD_LIGHT. 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 photo behind it — nothing like Figma's result. Layer blur + hard-light alone matches the reference, so the background blur is dropped deliberately. Same call as the identical node in the hero and in the home final CTA. Placed art on a 1512 stage, so it is centred at every viewport width (27 - 756 = -729) rather than pinned to the viewport's left edge. */ .afxs-cta__glow { position: absolute; left: 50%; margin-left: -729px; top: -124px; width: 1693px; height: 956px; background: #051F1D; border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* 705:524698 — 737x41 at (388, 725), solid #000000, LAYER_BLUR 74.6 -> 37.3px. A soft dark plate that sits the trust row off the photo. Centred: 388 - 756 = -368. */ .afxs-cta__plate { position: absolute; left: 50%; margin-left: -368px; top: 725px; width: 737px; height: 41px; background: var(--af-black); filter: blur(37.3px); pointer-events: none; } /* 705:524700 "light" — four overlapping blurred white rectangles (alphas .04 to .32, layer blurs 33.5 to 75.6) inside a group at node opacity 0.3. Exported flat rather than rebuilt: nothing about it is reproducible in CSS, and the render peaks at 42/255 alpha. The group opacity is baked into the export, so no extra opacity is applied here. Drawn 2158.4x3337.4 at (-634, -2150.7); centred, -634 - 756 = -1390. `100% 100%` maps the export back onto the drawn rect, which is right whatever scale the export was taken at. 705:524699, the 1821.3x1629.1 clip frame this sits in, is NOT built: it spans (-183, -351) to (1638.3, 1278.1) and so fully contains the band's own visible 1512x794 area. It clips nothing that shows, and the band's own overflow:hidden does the rest. */ .afxs-cta__light { position: absolute; left: 50%; margin-left: -1390px; top: -2150.7px; width: 2158.4px; height: 3337.4px; background: url('/assets/figma/st2-light-cta.webp') center / 100% 100% no-repeat; pointer-events: none; } /* ---- 705:524713 — content column, 558x392 at (477, 120) ------------------ */ /* 477 = (1512 - 558) / 2, so it is a centred fixed column, not a padding box. The 120 is a MARGIN. As padding the column becomes 512 tall and every offset below it lands 120px low. .afxs-cta is a BFC (overflow: hidden), so the margin cannot collapse out of the section. */ .afxs-cta__inner { position: relative; z-index: 2; width: 558px; margin: 120px auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* 705:524714 — column, gap 16 */ .afxs-cta__head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 705:524715 — 119x33, radius 57, padding 6/14, gap 7, no fill, BACKGROUND_BLUR 16.7 -> backdrop-filter blur(8.35px). No blend mode and no layer blur on this node, so the backdrop-filter is safe to ship. Saans VF-TRIAL 500 / 14 / 21px / ls -.42 -> --font-alt (Saans is trial-only and maps onto the primary stack until it is licensed). */ .afxs-cta__eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; box-sizing: border-box; backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); 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; } .afxs-cta__eyebrow img { width: 16px; height: 16px; display: block; flex: none; } /* 705:524718 — heading block, 558x160, gap 0, centred. 705:524720 "verified payout" is drawn 712 wide inside a 558 column, so the heading deliberately overhangs by 77px each side. 712 is a `width`, not a max-width, and nowrap holds the line: at 558 it wraps and the band gains 80px. align-items:center on the parent keeps the overhang symmetric, and flex:none stops the 712 box being shrunk back to 558. */ .afxs-cta__h2 { margin: 0; width: 712px; flex: none; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 80px; line-height: 80px; letter-spacing: -2.4px; text-align: center; color: var(--af-white); } .afxs-cta__h2a, .afxs-cta__h2b { display: block; white-space: nowrap; margin: 0 auto; } /* 705:524719 "Be the next" — 363x80. Two stacked gradient fills with identical handles; children[0] is the bottom one, so fills[1] is what you see: #F8F8F8 -> #636363, handles p0 (.54878, -.26111) p1 (.93152, .93434). Re-derived against the real 363x80 box (fx.py's printed angle ignores the aspect ratio): direction 124.54deg, gradient-line length 344.35px, so the two handles project to 44.21% and 93.19% along it. The 363px width is held explicitly so the gradient box stays the drawn one whatever the fallback font measures. */ .afxs-cta__h2a { width: 363px; background: linear-gradient(124.54deg, #F8F8F8 44.21%, #636363 93.19%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 705:524720 — 712x80, flat #FFFFFF */ .afxs-cta__h2b { width: 712px; } /* 705:524721 — 558x63, SF Pro 510 / 16 / 21.12px / ls -.32, node opacity .8 */ .afxs-cta__body { margin: 0; width: 100%; font-size: 16px; line-height: 21.12px; font-weight: var(--w-medium); letter-spacing: -.32px; text-align: center; color: var(--af-white); opacity: .8; } /* 705:524722 — button row, 539x56, gap 12, align MIN. 293 + 12 + 234 = 539, centred in the 558 column (x 486.5). Both buttons HUG their labels in the file, so their widths are derived, not fixed, and they are left derived here. Chrome sets SF Pro about 4% tighter than Figma measures it, so the row renders 523.7 rather than 539 — 7.6px in from each drawn edge, symmetric because the column is centred. Pinning 293 and 234 would fake the drawn width by stretching the padding, which is worse; the same shared button behaves this way everywhere on the site. */ .afxs-cta__ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } /* 705:524723 / 705:524724 — the shared button component from atlas-hero.css. Only the delta this instance draws is re-stated: DROP_SHADOW radius is 24.1 here, 24 on the hero instance. DECLARED DEVIATION — both labels carry textCase TITLE in the file and are shipped sentence case. DESIGN.md mandates sentence case, and the hero button on this same page (705:463460, same component, no textCase) is sentence case, so title case here would be inconsistent within one page. Ink on the lime button is #001D21 via --af-ink-teal, set by .afx-btn-lime and never inherited from a link colour. Measured in Chrome, computed rgb(0,29,33) on computed rgb(225,255,160) = 15.87:1. */ .afxs-cta__lime { box-shadow: 2px 14px 24.1px 0 rgba(38,63,66,.12); } @media (hover: hover) and (pointer: fine) { .afxs-cta__lime:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); } } /* I705:524723;194:75574 — a 16x20 slot holding the 20x20 chevron instance, so the icon overhangs its own layout box by 2px each side. Without the slot the button measures 297 instead of the drawn 293. */ .afxs-cta__chevbox { display: flex; align-items: center; justify-content: center; width: 16px; height: 20px; flex: none; } /* ---- 705:524805 — trust row, 706x16 at (403, 735) ------------------------ */ /* 403 = (1512 - 706) / 2. The row sits 735 - (120 + 392) = 223px below the content column's bottom edge, so that is a margin, not padding. 705:524805 is a 1-item column (gap 36) wrapping 705:524806, the actual row; the wrapper adds no geometry and is flattened away. Items: 259 + 16 + 236 + 16 + 179 = 706. The 706 is held as a `width` so the row's left edge lands on the drawn 403; the row is justify MIN in the file, so the ~16px the tighter Chrome text frees up falls at the right end, as it would in Figma. */ .afxs-cta__trust { position: relative; z-index: 2; width: 706px; margin: 223px auto 0; display: flex; flex-direction: row; align-items: center; gap: 16px; } /* 705:524807 / 524811 / 524815 — gap 8, 16x16 icon frame holding a 13x13 #7CB1AC tick, SF Pro 510 / 14 / 14px / ls 0 */ .afxs-cta__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 14px; font-weight: var(--w-medium); letter-spacing: 0; color: var(--af-white); white-space: nowrap; } .afxs-cta__trust img { width: 16px; height: 16px; display: block; flex: none; } /* ---- the 43px below the trust row --------------------------------------- The trust row's bottom edge is 735 + 16 = 751 and the footer 705:524725 starts at 794, so the band carries 43px of clear space after it. That is held by the 794px min-height on .afxs-cta, not by a margin on the footer: the footer is a separate band and owns none of this band's geometry. */ /* ---- motion + focus ----------------------------------------------------- Transform and opacity only, hover behind a real pointer; reduced motion is already neutralised globally in atlas-tokens.css. The focus ring sits 4px outside the button, on the dark band, so lime reads against it on both. No border-radius here on purpose: the outline already follows each button's own radius, and forcing --r-pill would silently retint the ghost button's drawn 50 to 100 while focused. */ .afxs-cta a:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 4px; } /* ---- narrow viewports --------------------------------------------------- The frame is only drawn at 1512. Below it the fixed boxes are released so the band still reads; nothing here changes the 1512 rendering. */ @media (max-width: 760px) { .afxs-cta { min-height: 0; } .afxs-cta__inner { width: auto; max-width: 100%; padding: 96px var(--gutter) 0; } .afxs-cta__h2 { width: 100%; font-size: 48px; line-height: 48px; letter-spacing: -1.44px; } .afxs-cta__h2a, .afxs-cta__h2b { width: auto; white-space: normal; } .afxs-cta__ctas { flex-wrap: wrap; justify-content: center; } .afxs-cta__trust { width: auto; margin: 96px 0 0; padding: 0 var(--gutter) 96px; flex-wrap: wrap; justify-content: center; gap: 12px 16px; } .afxs-cta__plate, .afxs-cta__light { display: none; } }