/* ============================================================================ Pay Later v2 — band 3, "The lowest risk path to getting funded". Figma 930:22569 "Frame 2147259147" (1512 x 600), page 930:22278, y=2590. Every value read from the node JSON via tools/figma/fx.py. Do not hand-tune: re-extract instead. fx.py already halves Figma's blur radii, so the numbers below are CSS-ready blur() / backdrop-filter values. HEIGHT. 600px exactly. Nothing in the band overflows it; the frame clips. Vertical stack, all from the file, all margins (never padding): 40 copy column top (930:22577 y) 33 badge (930:22578 h) 16 gap (930:22577 itemSpacing) 128 headline block (930:22588 h, 2 x 64) --- 217 content ends; the remaining 383 is photograph. The CTA (930:22591) is a sibling of the copy column inside group 930:22576, pinned at x 1244 / y 125 — not part of that 16px rhythm. SKIPPED — visible:false in the file - 930:22571 "Group 2147258055" (88x26 at 87.5, 379) and its two "Vector 6928" children (930:22572, 930:22573). - 930:22570 fills[1]: a CUSTOM shader paint (CodeComponentId .../428) at opacity .13. - 930:22578 fills[0] (a white->black 14% linear) and its OVERLAY gradient stroke. The badge therefore has NO background and NO border: the only visible effect it carries is the BACKGROUND_BLUR. DECLARED DEVIATIONS 1. 930:22575 is the same rectangle as 930:22574 with rotation -3.14159 (180 deg). fx.py reports gradient angles from the handle positions and does NOT apply the node rotation, so it prints the same 360deg for both. Built rotated: opaque at the band's top edge, transparent at y=200. Verified against the file's own render — the rotated build scores 1.57 mean abs error over rows 0-220 against 2.56 for dropping the layer and 2.93 for shipping it unrotated. 2. 930:22570's image fill is scaleMode STRETCH with imageTransform [[1,0,0],[0,0.6474,0.0646]], i.e. the source 1602x982 is cropped to y 6.463%..71.200% and stretched. The crop is baked into pl2-lowrisk-bg.webp (1602x636, aspect 2.5189 against the band's 2.52), so `cover` at 1512 is the stretch, and stays undistorted wider. Shipped at native crop size, not 2x: the source has no more pixels than that. 3. 930:22589's two fills have identical handles and both are opaque NORMAL, so fills[0] (#3F4547 -> #A8BCB9) is completely hidden by fills[1] and is not built. Pre-composited to the one visible ramp. 4. 930:22589's gradient angle is derived from handle P2, not from P1. Figma's linear gradient keeps its iso-lines PARALLEL TO (P2 - P0) in the node's pixel space; projecting on (P1 - P0) instead (what a naive handle-to-CSS conversion does) gives 115.24deg and is visibly wrong — 16.70 mean abs error against the file's render versus 2.20 for the 157.07deg below. Ramp length 133.7px on the 424x64 box. 5. 930:22591's 1.5px INSIDE stroke is the file's own linear-gradient(161.7deg, #053F3B, rgba(5,63,59,.27) 51.44%, #053F3B) — byte-identical to token --af-card-g, which is what ships. A gradient is not a border, so it is a masked pseudo-element. 6. The hover / active / focus block and the narrow-viewport block are not in the file. Nothing in either changes the 1512 rendering. ========================================================================= */ /* 930:22569 — 1512x600, clipsContent. Its fill is a linear whose two stops are both #0F0F0F, i.e. flat. `isolation: isolate` keeps the band self-contained the way the frame is. */ .pl2-lowrisk { position: relative; isolation: isolate; height: 600px; overflow: hidden; background: var(--af-shell-bottom); font-family: var(--font-sans); color: var(--af-white); } /* 930:22570 "Rectangle 161133313" — 1512x600 at (0,0). FULL-BLEED: this is the band background, not placed art, so it spans the viewport and never centres on a 1512 stage. See deviation 2. */ .pl2-lowrisk__bg { position: absolute; left: 0; right: 0; top: 0; /* width:100%, NOT width:auto. This is a replaced element: with left/right pinned and width:auto an resolves to its intrinsic width, not the container's, so the photo stopped at min-width 1512 and left a bare strip down the right of every viewport wider than that. A
would have stretched; an does not. */ width: 100%; min-width: 1512px; height: 600px; object-fit: cover; object-position: center; pointer-events: none; } /* 930:22570 fills[2] — 180deg #0F0F0F -> transparent, handles at y .09499 and .16905 of the rect. Against this element's OWN 600 that is 57.00px and 101.43px, written in px so it cannot be re-based on a different height. */ .pl2-lowrisk__imgfade { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 600px; background: linear-gradient(180deg, var(--af-shell-bottom) 0, var(--af-shell-bottom) 57px, rgba(15,15,15,0) 101.43px); pointer-events: none; } /* 930:22574 "Rectangle 161133128" — 1512x200 at (0,400), gradient handles run bottom -> top, so #0F0F0F sits on the band's bottom edge. */ .pl2-lowrisk__fadebot { position: absolute; left: 0; right: 0; top: 400px; width: auto; min-width: 1512px; height: 200px; background: linear-gradient(0deg, var(--af-shell-bottom) 0%, rgba(15,15,15,0) 100%); pointer-events: none; } /* 930:22575 — the same rectangle at (0,0), rotated 180deg. See deviation 1. */ .pl2-lowrisk__fadetop { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 200px; background: linear-gradient(180deg, var(--af-shell-bottom) 0%, rgba(15,15,15,0) 100%); pointer-events: none; } /* 930:22576 "Group 2147258064" — 1432x177 at (40,40). A fixed 1512 stage that POSITIONS content, so it stays centred rather than going full-bleed. */ .pl2-lowrisk__stage { position: absolute; left: 50%; margin-left: -756px; top: 0; width: 1512px; height: 600px; z-index: 1; } /* ---- 930:22577 "Frame 2147259268" — 605x177 at (40,40), column, gap 16 ---- */ .pl2-lowrisk__copy { position: absolute; left: 40px; top: 40px; width: 605px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* 930:22578 "Frame 2147259134" — 201x33, row, gap 7, padding 6/14, radius 57. Fill and stroke are both visible:false; the BACKGROUND_BLUR is the whole effect, and it carries no blend mode, so the backdrop-filter stays. */ .pl2-lowrisk__badge { display: inline-flex; align-items: center; gap: 7px; width: 201px; height: 33px; padding: 6px 14px; border-radius: 57px; backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); } .pl2-lowrisk__badge img { display: block; width: 16px; height: 16px; flex: none; } /* 930:22587 — SF Pro 510, 14/21, ls -0.42 */ .pl2-lowrisk__badgeLabel { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -0.42px; color: var(--af-white); white-space: nowrap; } /* ---- 930:22588 "Frame 2147259132" — 605x128 at (40,89), column, gap 0 ---- Both lines are SF Pro 510, 64/64, ls -1.92, textCase TITLE. */ .pl2-lowrisk__h2 { margin: 0; width: 605px; display: flex; flex-direction: column; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 64px; line-height: 64px; letter-spacing: -1.92px; text-transform: capitalize; } .pl2-lowrisk__h2a, .pl2-lowrisk__h2b { display: block; height: 64px; white-space: nowrap; } /* 930:22589 — 424x64. The gradient box is the node box, so the width is fixed at 424: widen it and the ramp moves. See deviations 3 and 4. */ .pl2-lowrisk__h2a { width: 424px; background: linear-gradient(157.07deg, #F8F8F8 33.58%, #636363 93.23%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 930:22590 — 605x64, flat #FFFFFF */ .pl2-lowrisk__h2b { color: var(--af-white); } /* ---- 930:22591 "Button" (component 632:11345) — 228x56 at (1244,125) ------ padding 18/32, gap 8, radius 100, fill #E1FFA0, drop shadow 2 14 24 rgba(38,63,66,.12). Ink is set explicitly: never inherit the link colour onto lime. */ .pl2-lowrisk__cta { position: absolute; left: 1244px; top: 125px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 228px; height: 56px; padding: 18px 32px; border-radius: var(--r-pill); background: var(--af-lime); color: var(--af-ink-teal); text-decoration: none; font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 19.09px; letter-spacing: -0.48px; text-transform: capitalize; white-space: nowrap; box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12); } /* 1.5px INSIDE gradient stroke — see deviation 5 */ .pl2-lowrisk__cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--af-card-g); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* I930:22591;194:75574 is a 16px slot; the 20px chevron (component 292:12) is drawn at 20x20 and overflows it 2px each side. */ .pl2-lowrisk__chev { display: block; width: 20px; height: 20px; margin: 0 -2px; transition: transform var(--t-fast) var(--e-out); } /* ---- motion — not in the file. Transform and opacity only, hover behind a real pointer; reduced motion is already neutralised in atlas-tokens.css. -- */ @media (hover: hover) and (pointer: fine) { .pl2-lowrisk__cta:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); } .pl2-lowrisk__cta:hover .pl2-lowrisk__chev { transform: translateX(2px); } } .pl2-lowrisk__cta:active { transform: scale(.97); } .pl2-lowrisk__cta:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 4px; border-radius: var(--r-pill); } /* ---- narrow viewports --------------------------------------------------- The band is only drawn at 1512 and the file has no mobile counterpart for it. Below 1512 the fixed boxes are released so it still reads; nothing here changes the 1512 rendering. */ @media (max-width: 1200px) { .pl2-lowrisk__stage { left: 0; margin-left: 0; width: 100%; } .pl2-lowrisk__copy { width: auto; max-width: calc(100% - 80px); } .pl2-lowrisk__cta { left: auto; right: 40px; } } @media (max-width: 860px) { .pl2-lowrisk { height: auto; min-height: 520px; padding-bottom: 56px; } .pl2-lowrisk__bg, .pl2-lowrisk__imgfade { height: 100%; } .pl2-lowrisk__fadebot { top: auto; bottom: 0; } .pl2-lowrisk__stage { position: relative; left: auto; margin-left: 0; height: auto; } .pl2-lowrisk__copy { position: relative; left: auto; top: auto; max-width: 100%; padding: 40px var(--gutter) 0; } .pl2-lowrisk__h2 { width: 100%; font-size: 40px; line-height: 44px; letter-spacing: -1.2px; } .pl2-lowrisk__h2a { width: auto; } .pl2-lowrisk__h2a, .pl2-lowrisk__h2b { height: auto; white-space: normal; } .pl2-lowrisk__cta { position: relative; left: auto; right: auto; top: auto; margin: 32px var(--gutter) 0; } }