/* ============================================================================ How It Works — announcement bar + hero. Figma file 84J3BYC09NZcH6pAx3IWa5 (the NEWER copy, not rijNBFC24rPaqbSoj29uvJ). Desktop 1048:492306 bar 1512x56 at y 0 1048:492307 hero 1512x890 at y 56 Mobile 1048:498713 393x856 (bar + navbar + hero in ONE band) The bar is its own node here, NOT a child of the hero — unlike the home page. The NAVBAR however IS a child of the hero (1048:492330 at y=10 of the hero, i.e. 66 absolute), so the shared .afx-nav markup lives inside the hero fragment and is not injected separately. Doing both stacks two navbars. Chrome (.afx-bar, .afx-nav, .afx-lang) is shared furniture and comes from atlas-chrome.css / atlas-chrome.js. Nothing here restyles it. ========================================================================= */ /* 1048:492307 "3" — 1512x890, image fill f93f9476… scaleMode FILL, clips. The image is a band background rather than placed art, so it spans the viewport (full-bleed rule) while the 1512 stage inside stays centred. */ .afxhw-hero { position: relative; isolation: isolate; height: 890px; overflow: hidden; background: var(--af-black); font-family: var(--font-sans); color: var(--af-white); } .afxhw-hero__bg { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 890px; background: url('/assets/figma/hiw-hero-bg.webp') center / cover no-repeat; pointer-events: none; } /* 1048:492308 "Ellipse 473" — 1693x956 at (-776, 117), #051F1D, LAYER_BLUR 516.4 (Figma radius is 2x the CSS blur value), 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, which buries the photo. Same call as atlas-hero.css. */ .afxhw-hero__glow { position: absolute; left: 50%; margin-left: -1532px; top: 117px; width: 1693px; height: 956px; background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* 1048:492309 "Overlay" — 1512x900 at (0,0), 89.8deg linear. Drawn 10px taller than the band; the band clips it. Full-bleed. */ .afxhw-hero__overlay { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 900px; background: linear-gradient(89.8deg, rgba(5,63,59,.62) 0%, rgba(194,213,213,0) 21.36%, rgba(194,213,213,0) 83.19%, rgba(5,63,59,.4) 100%); pointer-events: none; } /* the 1512 stage. A fixed-width STAGE that positions content stays CENTRED, or the whole design left-aligns above 1512. */ .afxhw-hero__stage { position: relative; z-index: 2; width: 1512px; margin: 0 auto; height: 890px; } /* 1048:492330 — navbar, 1492x59 at (10,10). Shared component, so the shared .afx-nav rules own it; only the offset is set here. ABSOLUTE, not a 10px top margin. The stage is not a BFC, so a margin on the first child collapses out of it and moved the stage — and every absolutely positioned thing measured against it — 10px down. */ .afxhw-hero__stage > .afx-nav { position: absolute; left: 10px; top: 10px; width: 1492px; margin: 0; } /* ---- 1048:492325 — copy column, 1054x425 at (46, 198), col gap 32 ------- */ .afxhw-hero__copy { position: absolute; left: 46px; top: 198px; width: 1054px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; } /* 1048:492326 — DM Sans 500 14/21 */ .afxhw-hero__eyebrow { margin: 0; width: 157px; font-family: var(--font-ui); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; color: var(--af-white); } /* 1048:492327 — SF Pro 510 110/99, ls -3.3px, 559 wide over two lines. Fill is a 160.8deg #F8F8F8 -> #FFFFFF ramp over white; at 110px the ramp is invisible against the flat white beneath it, so it ships as the flat colour. 510 maps to 500 (see the project type ramp). */ .afxhw-hero__h1 { margin: 0; width: 559px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 110px; line-height: 99px; letter-spacing: -3.3px; color: var(--af-white); } /* 1048:492328 — SF Pro 510 18/27, ls -.36, opacity .8, 270 wide */ .afxhw-hero__lead { margin: 0; width: 270px; font-weight: var(--w-medium); font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: rgba(255,255,255,.8); } /* 1048:492329 — lime button, 241x56, radius 100, padding 18/32, gap 8. Ink is #001D21 (--af-ink-teal), set explicitly: inheriting the link colour here once shipped a lime CTA at 1.1:1. */ .afxhw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 18px 32px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--af-lime); box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12); color: var(--af-ink-teal); font-weight: var(--w-semi); font-size: 16px; line-height: 19px; letter-spacing: -.48px; text-decoration: none; white-space: nowrap; position: relative; isolation: isolate; } /* 1.5px INSIDE gradient stroke — border-color cannot take a gradient */ .afxhw-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(161.7deg, rgba(5,63,59,.6) 0%, rgba(5,63,59,.162) 51.44%, rgba(5,63,59,.6) 100%); -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; } .afxhw-btn img { width: 20px; height: 20px; display: block; flex: none; } /* ---- 1048:492310/315/320 — stat strip, three 449x90 columns at y 781 ---- x 46 / 534 / 1022, so the pitch is 488 and each column's 436 rule sits at its own left edge. Rule is a 1px CENTER stroke on a zero-height vector. */ .afxhw-stats { position: absolute; left: 46px; top: 781px; width: 1425px; display: flex; flex-direction: row; gap: 39px; } .afxhw-stat { width: 449px; display: flex; flex-direction: column; gap: 17px; } .afxhw-stat__rule { display: block; width: 436px; height: 1px; background: var(--w-25); } .afxhw-stat__body { display: flex; flex-direction: column; gap: 4px; } /* 1048:492313 — 400 14 */ .afxhw-stat__k { font-size: 14px; line-height: 21px; font-weight: var(--w-regular); color: var(--af-white); } /* 1048:492314 — 600 32. The drawn value box is 48 tall (1048:492312 is 73 = 21 label + 4 gap + 48 value), not the 38 a default ratio gives. */ .afxhw-stat__v { font-size: 32px; line-height: 48px; font-weight: var(--w-semi); color: var(--af-white); } /* ------------------------------------------------------------- responsive 1048:498713 "Mobile" (393x800 under the bar) is the only frame below 1512, so 393 is matched and everything between is derived. Without this the fixed 1512 stage pushed documentElement.scrollWidth to 1405 at a 1280 viewport. */ @media (max-width: 1511px) { .afxhw-hero__stage { width: 100%; } .afxhw-hero__stage > .afx-nav { left: 10px; right: 10px; width: auto; } .afxhw-hero__copy { left: var(--gutter); right: var(--gutter); width: auto; } .afxhw-hero__h1 { max-width: 100%; } .afxhw-stats { left: var(--gutter); right: var(--gutter); width: auto; } .afxhw-stat { flex: 1 1 0; width: auto; min-width: 0; } .afxhw-stat__rule { width: 100%; } } @media (max-width: 900px) { /* the 110px headline is wider than the viewport well before the mobile breakpoint; step it down rather than let it set a scroll width */ .afxhw-hero__h1 { font-size: 84px; line-height: 78px; letter-spacing: -2.52px; } } /* ========================= mobile — 1048:498713, 393x856 ================= ONE band: bar (498738, 393x56 at 0) + nav pill (498725, 377x64 at 8,64) + copy (498717, 345x311 at 24,188) + stats row (498745, 345x63 at 24,769). The hero is 800 tall under a 56 bar; the overlay carries the image fill. */ @media (max-width: 760px) { .afxhw-hero { height: 800px; } .afxhw-hero__bg { height: 800px; min-width: 393px; } .afxhw-hero__overlay { height: 800px; min-width: 393px; } /* 1048:498716 — 1311x740 at (-624, 146-56) and 1048:498715 at (-588, 1146). Only the upper one is inside the 800px band; the lower is clipped away. */ .afxhw-hero__glow { left: -624px; margin-left: 0; top: 90px; width: 1311px; height: 740px; } .afxhw-hero__stage { width: 100%; height: 800px; } /* 1048:498725 — the nav pill is 377x64 at (8, 64), NOT the desktop 1492x59 at (10,10). The desktop rule pins an explicit width, so without this the nav stayed 1492 wide inside a 393 frame and only survived because the hero clips. The shared chrome owns what is inside it; this is placement. */ .afxhw-hero__stage > .afx-nav { left: 8px; top: 8px; width: 377px; } .afxhw-hero__copy { left: 24px; top: 132px; width: 345px; gap: 24px; } /* 1048:498718 — on mobile the eyebrow and the h1 are a nested column with gap 16 inside the outer gap-24 column. The desktop tree is flat at gap 32, so the 8px difference is taken back here rather than restructuring. */ .afxhw-hero__eyebrow { width: auto; margin-bottom: -8px; } /* 1048:498722 — 64/57.6, ls -1.92, 345 wide, 116 tall over two lines */ .afxhw-hero__h1 { width: 345px; font-size: 64px; line-height: 57.6px; letter-spacing: -1.92px; } .afxhw-hero__lead { width: 345px; } /* 1048:498745 — three 107-wide columns, gap 12, at y 769 (713 in-band) */ .afxhw-stats { left: 24px; top: 713px; width: 345px; gap: 12px; } .afxhw-stat { width: 107px; gap: 12px; } .afxhw-stat__rule { width: 107px; } .afxhw-stat__body { gap: 0; } .afxhw-stat__v { font-size: 20px; line-height: 30px; } }