/* ============================================================================ Free Trial band — "No other prop firm has done this", the founder's note. Figma 774:310052 "Frame 2147259239" (1512 x 1165.7), file rijNBFC24rPaqbSoj29uvJ. Every dimension below is the value in the node JSON. The root really is an auto-layout column: padding 120/299/60/299, gap 93, align CENTER. The 299 side padding is not binding — the content column is 968 wide, wider than the 914 the padding leaves — so only the 120 top and 60 bottom are reproduced, as padding, because that is what they are. 120 + 985.7 + 60 = 1165.7. GRADIENTS: re-derived from gradientHandlePositions in pixel space. fx.py projects the handle in normalised box space and drops the aspect ratio, so its angles and stops are wrong on any non-square box. ROTATED NODES: Figma reports the axis-aligned bounding box of a rotated node, never the node. Each card below is solved back out of its AABB with w = (cos.Wa - sin.Ha)/cos2t, h = (cos.Ha - sin.Wa)/cos2t, and the rotation sign is flipped because Figma is counter-clockwise positive and CSS is clockwise positive. Figma child order is back-to-front: 774:310053 hairline curves 2011.5x836.5 @ (-249.8, 19), rotation 180 774:310057 content column 968x985.7 @ (272, 120) ========================================================================= */ .afxfl { position: relative; overflow: hidden; padding: 120px 0 60px; display: flex; justify-content: center; background: linear-gradient(179.16deg, #EBEDF2 .94%, #FFFFFF 78.08%); font-family: var(--font-sans); color: #0D0D0D; } .afxfl *, .afxfl *::before, .afxfl *::after { box-sizing: border-box; } /* --- 774:310053 "vector" — two 0.21-opacity hairline strokes (774:310054 / 310055) with a soft white radial rectangle (774:310056) laid over their middle. Exported as ONE image: the strokes are open bezier paths with multi-stop gradient strokes and the soften plate carries a backdrop blur, none of which survives a CSS rebuild. The group carries rotation 180, which Figma bakes into the export, so it is placed unrotated at its AABB origin. ------------------------------- */ .afxfl-curves { position: absolute; left: 50%; top: 19px; margin-left: -1005.8px; width: 2011.5px; height: 836.5px; z-index: 0; pointer-events: none; } /* --- 774:310057 — 968x985.7, column, align CENTER, gap 60 ----------------- */ .afxfl-col { position: relative; z-index: 1; width: 968px; display: flex; flex-direction: column; align-items: center; gap: 60px; } /* 774:310058 — 645x599.7, column, align CENTER, gap 32 */ .afxfl-top { width: 645px; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* 774:310059 — 645x267, gap 32. 774:310060 is a single-child pass-through and is flattened away; its gap never applies. 774:310061 is the gap-16 pair. */ .afxfl-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; } .afxfl-headtop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 774:310062 — 185x33, radius 57, padding 6/14, gap 7. No fill, no stroke. */ .afxfl-eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D; white-space: nowrap; } .afxfl-eyebrow img { width: 16px; height: 16px; display: block; flex: none; } /* 774:310074 — 645x160, gap 0. SF Pro 510 / 80 / 80px / ls -2.4, centred. */ .afxfl-h2 { margin: 0; width: 645px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 80px; line-height: 80px; letter-spacing: -2.4px; text-align: center; color: #0D0D0D; } .afxfl-h2 span { display: block; white-space: nowrap; } /* 774:310075 "No other prop firm" — 585x80. Two stacked gradient fills; children[0] is the bottom one, so fills[1] is what shows. Re-derived over the 585x80 box. */ .afxfl-h2 .afxfl-h2a { background: linear-gradient(117.77deg, #0D0D0D 64.26%, #CECECE 93.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 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; } /* 774:310077 — 163x26, SF Pro 510 / 20 / 26.4px (132%) / ls -.6, opacity .8 */ .afxfl-kicker { margin: 0; font-size: 20px; line-height: 26.4px; font-weight: var(--w-medium); letter-spacing: -.6px; text-align: center; color: #0D0D0D; opacity: .8; } /* ---- 774:310078 — the card fan, 584x300.7 at (464, 419) ------------------ The group inside it (774:310079) is 658.1 wide and deliberately overhangs the frame on both sides, so the frame is a positioning box, not a clip. Every offset below is relative to the frame's own top-left. */ .afxfl-fan { position: relative; width: 584px; height: 300.7px; flex: none; } /* 774:310080 "Ellipse 1112" — 588x188.4 @ (444.9, 580.7) absolute, rgba(212,223,222,.63), LAYER_BLUR 38.49. The ground shadow. */ .afxfl-fan__ground { position: absolute; left: -19.1px; top: 161.7px; width: 588px; height: 188.4px; background: rgba(212,223,222,.63); border-radius: 50%; filter: blur(38.49px); } /* 774:310082 / 310084 / 310086 — three crops of one 1536x1024 sheet, each with its own imageTransform, so each is shipped as its own file rather than as background-position arithmetic. 774:310082 AABB 350.94x370.2 @ (413.2, 365.5) rot -30.858 -> 235 x 290.8 774:310084 AABB 312.89x302.8 @ (611.5, 432.9) rot -5.098 -> 289.3 x 278.2 774:310086 AABB 272.37x299.2 @ (799.0, 397.4) rot 11.013 -> 226.8 x 260.7 Positioned by centre, which is the one point rotation does not move. */ .afxfl-fan__card { position: absolute; display: block; transform-origin: 50% 50%; } .afxfl-fan__card--a { width: 235px; height: 290.8px; left: 124.67px; top: 131.6px; margin: -145.4px 0 0 -117.5px; transform: rotate(30.858deg); } .afxfl-fan__card--b { width: 289.3px; height: 278.2px; left: 303.95px; top: 165.3px; margin: -139.1px 0 0 -144.65px; transform: rotate(5.098deg); } .afxfl-fan__card--c { width: 226.8px; height: 260.7px; left: 471.19px; top: 128px; margin: -130.35px 0 0 -113.4px; transform: rotate(-11.013deg); } /* 774:310083 / 310085 "Ellipse 1114 / 1115" — black, opacity .83, LAYER_BLUR 27.33, blendMode OVERLAY. They sit BETWEEN the cards and darken the edge each card overlaps. Same AABB solve as the cards (rot -16.049). */ .afxfl-fan__shade { position: absolute; border-radius: 50%; background: var(--af-black); opacity: .83; filter: blur(27.33px); mix-blend-mode: overlay; transform-origin: 50% 50%; transform: rotate(16.049deg); } .afxfl-fan__shade--a { width: 180.6px; height: 196.4px; left: 236.26px; top: 173.15px; margin: -98.2px 0 0 -90.3px; } .afxfl-fan__shade--b { width: 180.6px; height: 191.5px; left: 425.67px; top: 166.4px; margin: -95.75px 0 0 -90.3px; } /* ---- 774:310087 — the note, 968x326, column, align CENTER, gap 32 -------- */ .afxfl-note { width: 968px; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* 774:310088 — 968x238, SF Pro 400 / 28 / 36.96px (132%) / ls -.84, centred, node opacity .8. The hard break before "We think this becomes the standard" is the file's own carriage return. */ .afxfl-note__body { margin: 0; width: 100%; font-size: 28px; line-height: 36.96px; font-weight: var(--w-regular); letter-spacing: -.84px; text-align: center; color: #0D0D0D; opacity: .8; } /* 774:310089 — 189x56, row, gap 12, align CENTER */ .afxfl-by { display: flex; flex-direction: row; align-items: center; gap: 12px; } /* 774:310090 — 56x56, radius 12, clipped, #C8C8C8 under the portrait */ .afxfl-by__pic { width: 56px; height: 56px; border-radius: 12px; display: block; background: #C8C8C8; object-fit: cover; flex: none; } /* 774:310092 — column, gap 6 */ .afxfl-by__txt { display: flex; flex-direction: column; gap: 6px; } /* 774:310094 — Saans 500 / 16 / 16px */ .afxfl-by__name { margin: 0; font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 16px; color: #0D0D0D; } /* 774:310096 — Saans 500 / 14 / 14px, opacity .6 */ .afxfl-by__role { margin: 0; font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; color: #0D0D0D; opacity: .6; } /* ---- narrow viewports --------------------------------------------------- The frame is only drawn at 1512; below that the fixed boxes are released. Nothing here changes the 1512 rendering. */ @media (max-width: 1060px) { .afxfl { padding: 80px var(--gutter) 60px; } .afxfl-col, .afxfl-top, .afxfl-note { width: 100%; } .afxfl-h2 { width: 100%; font-size: 48px; line-height: 50px; letter-spacing: -1.44px; } .afxfl-h2 span { white-space: normal; } .afxfl-note__body { font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; } .afxfl-fan { transform: scale(.8); transform-origin: 50% 50%; } } @media (max-width: 640px) { .afxfl-fan { transform: scale(.55); } }