/* ============================================================================ Free Trial band — "Explore Atlas / Before You Commit". Figma 774:310031 "Frame 2147259147" (1512 x 1063), file rijNBFC24rPaqbSoj29uvJ. Every dimension below is the value in the node JSON. The band is one full-bleed photograph with a heading and a lime button floated over it. The frame's own fill is a single-stop ramp, i.e. flat #001918, and it only shows in the 84px above the photo. 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 are wrong on any non-square box. Figma child order is back-to-front. Paint order: 774:310032/33 photo 1512x979 @ (0, 84) 774:310034 top ellipse 1831x297 @ (-185, -116), blur 50 774:310035 bottom scrim 1512x400 @ (0, 663) 774:310036 top scrim 1512x401 @ (0, 0), rotation 180 774:310037 heading block 748x241 @ (40, 160) 774:310051 lime button 240x56 @ (1232, 277) ========================================================================= */ .afxfw { position: relative; min-height: 1063px; overflow: hidden; background: #001918; font-family: var(--font-sans); color: var(--af-white); } .afxfw *, .afxfw *::before, .afxfw *::after { box-sizing: border-box; } /* --- 774:310033 "Rectangle 161133313" — 1512x979 at y 84, scaleMode FILL (centre crop, no imageTransform, so `cover` is exact). FULL BLEED: this is a band background, not placed art. Pinned at 1512 it leaves a bare strip of #001918 down the right on wider viewports, so it spans the viewport and keeps its aspect with cover. -------------------- */ .afxfw-bg { position: absolute; left: 0; right: 0; top: 84px; width: auto; min-width: 1512px; height: 979px; background: url('/assets/figma/ftw-bg.webp') center / cover no-repeat; pointer-events: none; } /* --- 774:310034 "Ellipse 14485" — 1831x297 at (-185, -116), LAYER_BLUR 50. Two stacked solid fills (#001918 under #0F0F0F); only the top one is ever seen. Centred off the stage origin so it keeps its drawn position above 1512. ---------------------------------------------------------- */ .afxfw-cap { position: absolute; left: 50%; top: -116px; margin-left: -941px; width: 1831px; height: 297px; border-radius: 50%; background: var(--af-shell-bottom); filter: blur(50px); pointer-events: none; } /* --- 774:310036 (rotation 180) and 774:310035 — the two scrims that sink the photo into the neighbouring bands. Same paint, flipped: dark at the top edge on one, dark at the bottom edge on the other. --------------------- */ .afxfw-scrim { position: absolute; left: 0; right: 0; width: auto; min-width: 1512px; pointer-events: none; } .afxfw-scrim--top { top: 0; height: 401px; background: linear-gradient(180deg, #0F0F0F 0%, rgba(15,15,15,0) 100%); } .afxfw-scrim--bottom { top: 663px; height: 400px; background: linear-gradient(0deg, #0F0F0F 0%, rgba(15,15,15,0) 100%); } /* The heading and the button are placed on a fixed 1512 STAGE, centred, so the design keeps its geometry instead of left-aligning above 1512. */ .afxfw-stage { position: absolute; left: 50%; top: 0; width: 1512px; margin-left: -756px; height: 1063px; z-index: 2; } /* --- 774:310037 — 748x241 at (40, 160), column, gap 16. The 40 is the page gutter and the 160 is a MARGIN; as padding the box grows and both headings drop 160px. -------------------------------------------------- */ .afxfw-head { position: absolute; left: var(--gutter); top: 160px; width: 748px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* 774:310038 — 187x33, radius 57, padding 6/14, gap 7, BACKGROUND_BLUR 16.7. Its fill AND its stroke are both visible:false in the file, so the chip is bare text over the frosted patch. No blend mode here, so the backdrop-filter is safe to ship. */ .afxfw-eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); font-family: var(--font-display); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); white-space: nowrap; } .afxfw-eyebrow img { width: 16px; height: 16px; display: block; flex: none; } /* 774:310048 — 748x192, gap 0. SF Pro 510 / 96 / 96px / ls -2.88. 748 is a `width`: at auto the second line rewraps. */ .afxfw-h2 { margin: 0; width: 748px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 96px; line-height: 96px; letter-spacing: -2.88px; color: var(--af-white); } .afxfw-h2 span { display: block; white-space: nowrap; } /* 774:310049 "Explore Atlas" — 503x96. Two stacked gradient fills with the same handles; children[0] is the bottom one, so fills[1] is what shows. Re-derived over the 503x96 box. */ .afxfw-h2 .afxfw-h2a { background: linear-gradient(120.8deg, #F8F8F8 46.6%, #636363 93.18%); -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:310051 — 240x56 at (1232, 277), radius 100, padding 18/32, gap 8, fill #E1FFA0, 1.5px INSIDE gradient stroke, drop shadow 2/14/24 rgba(38,63,66,.12). Label textCase TITLE, SF Pro 590. Ink is #001D21, set and never inherited. ---------------------------------------------- */ .afxfw-cta { position: absolute; left: 1232px; top: 277px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 240px; height: 56px; padding: 18px 32px; border: 0; border-radius: var(--r-pill); background: var(--af-lime); color: var(--af-ink-teal); box-shadow: 2px 14px 24px 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-transform: capitalize; text-decoration: none; white-space: nowrap; transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out); } .afxfw-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(125.15deg, rgba(5,63,59,.6) 40.66%, rgba(5,63,59,.162) 68.57%, rgba(5,63,59,.6) 94.92%); -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; } .afxfw-chev { width: 20px; height: 20px; display: block; flex: none; transition: transform var(--t-fast) var(--e-out); } /* ---- motion ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .afxfw-cta:hover { box-shadow: 2px 14px 24px 0 rgba(38,63,66,.2); } .afxfw-cta:hover .afxfw-chev { transform: translateX(2px); } } .afxfw-cta:active { transform: scale(.985); } .afxfw-cta:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; } /* ---- narrow viewports --------------------------------------------------- */ @media (max-width: 1200px) { .afxfw { min-height: 0; padding: 120px 0 160px; } .afxfw-stage { position: static; width: auto; margin-left: 0; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0 var(--gutter); } .afxfw-head, .afxfw-cta { position: static; } .afxfw-head { width: 100%; } .afxfw-h2 { width: 100%; font-size: 52px; line-height: 54px; letter-spacing: -1.56px; } .afxfw-h2 span { white-space: normal; } }