/* ============================================================================ Community band 1 — announcement bar + navbar + hero. Figma 774:60467 (bar, 1512x56) and 774:60468 (hero, 1512x890), file rijNBFC24rPaqbSoj29uvJ. Markup: fragments/comm-hero.html. This page DOES draw the announcement bar, so the section is 56 + 890 = 946 tall, exactly like the home hero. Every y below is a margin or an absolute top; padding on the wrappers would inflate the boxes and push the whole column down (the mistake that cost 69px on the home hero). Shared furniture reused verbatim, never re-declared here: .afx-bar / .afx-nav / .afx-lang atlas-chrome.css .afx-btn-lime / .afx-btn-ghost atlas-hero.css .afx-page atlas-hero.css DECLARED DEVIATION — the four floating chat cards are drawn in Whitney, Discord's licensed UI face. Atlas has no licence for it, so they render in the site stack (SF Pro / Inter). Sizes, line-heights and colours are the drawn values. ========================================================================= */ /* 774:60468 — the frame's own fill is image 22f5999e at scaleMode STRETCH with an imageTransform. The crop is baked into comm-hero-bg.webp by outputs/mkassets.py, so this places it 1:1 instead of guessing at background-position. */ .afxch { position: relative; min-height: 946px; overflow: hidden; background: var(--af-black); } /* FULL-BLEED: drawn on a 1512 canvas but this is a band background, not placed art. Pinned at 1512 it leaves a bare strip down the right above 1512. */ .afxch__bg { position: absolute; left: 0; right: 0; top: 56px; width: auto; min-width: 1512px; height: 890px; background: url('/assets/figma/comm-hero-bg.webp') center top / cover no-repeat; pointer-events: none; } /* 774:60469 "Ellipse 473" — 1693x956 at (-776, 117) inside the 890 band, so (-776, 173) in section coordinates. #051F1D, LAYER_BLUR 516.4 (Figma's radius is 2x the CSS blur() value), HARD_LIGHT. DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome renders backdrop-filter on a mix-blend-mode element as an opaque frosted plate, nothing like Figma's result. Same call as the identical node in the home hero and the final band. */ .afxch__glow { position: absolute; left: 50%; top: 173px; width: 1693px; height: 956px; margin-left: -1532px; /* -776 - 756 */ background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* 774:60470 "Overlay" — 1512x900 at band y 0, i.e. section y 56. The two edge washes are what stop the chat cards floating on bare photograph. */ .afxch__overlay { position: absolute; left: 0; top: 56px; width: 100%; height: 900px; /* re-derived from the raw gradientHandlePositions against the real 1512x900 box; fx.py's own angle reads the handle vector and ignores the box. */ background: linear-gradient(89.9deg, rgba(5,63,59,.62) .05%, rgba(194,213,213,0) 21.06%, rgba(194,213,213,0) 81.86%, rgba(5,63,59,.4) 98.4%); pointer-events: none; } .afxch__inner { position: relative; z-index: 2; } /* the 1432 content column inside the 1512 shell. Deliberately NOT .afx-page: that rule is capped at 1432 AND takes a 40px padding at max-width 1512, so at exactly 1512 its content starts at 80 and everything drawn at 40 lands 40px right. Measured, not assumed. */ .afxch__page { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; } /* ---- 774:60486 — hero column, 1054x452 at band (46,198) = section y 254. The bar is 56 and the nav is 10 + 59, so content starts at 125: 254 - 125 = 129 of MARGIN. Column, gap 32, left aligned. ----------- */ .afxch__row { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 1054px; max-width: 100%; margin: 129px 0 0 6px; /* the column is drawn at x46 inside a 40px gutter */ } /* 774:60487 — DM Sans 500 / 14 / 21px */ .afxch__eyebrow { margin: 0; font-family: var(--font-ui); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; color: var(--af-white); } /* 774:60488 — SF Pro 510 / 110 / 99px (90%) / ls -3.3px, 760 wide, two lines. Top fill re-derived on the 760x198 box: #F8F8F8 -> #FFFFFF at 126.8deg. */ .afxch__h1 { margin: 0; width: 760px; max-width: 100%; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 110px; line-height: 99px; letter-spacing: -3.3px; background: linear-gradient(126.8deg, #F8F8F8 54.88%, #FFFFFF 93.2%); -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; } .afxch__h1 span { display: block; } /* 774:60489 — SF Pro 510 / 18 / 27px / ls -0.36px, 555 wide, node opacity .8 */ .afxch__lead { margin: 0; width: 555px; max-width: 100%; opacity: .8; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: var(--af-white); } /* 774:60490 — row, gap 12 */ .afxch__ctas { display: flex; flex-direction: row; align-items: center; gap: 12px; } /* ---- 774:60494 / 60496 / 60498 / 60500 — four chat cards, absolutely placed inside the 1512 STAGE. A fixed-1512 stage that POSITIONS content must stay centred, or the whole cluster left-aligns above 1512. ----- */ .afxch__chat { position: absolute; left: 50%; margin-left: -756px; top: 56px; width: 1512px; height: 890px; pointer-events: none; z-index: 3; } /* 16px padding, column, gap 4, radius 16, fill rgba(54,57,63,.63), BACKGROUND_BLUR 28 -> backdrop-filter blur(14px). No mix-blend-mode on this element, so the backdrop filter is safe here. */ /* Each card is 16px of padding around a 35px avatar and a 31px text column, so 67 exactly, and that height is held. DECLARED DEVIATION — the message body is drawn in Whitney, which is about 15% narrower than the substituted stack at the same 11.5px (measured on the real render: 415.4px of ink where the file draws 361). Holding the drawn WIDTH would wrap all four cards to two lines and change their shape; scaling the type down would change a drawn value. So the type stays at 11.5, the line stays single, and the card hugs it. The cards are therefore pinned by their drawn RIGHT edge (1465 / 1312 / 1466 / 1210) rather than their left, so they grow inwards. The cluster reads as a right-hand stack against the photo, the right margin matches the file exactly, and nothing spills past the 1512 canvas. */ .afxch__msg { position: absolute; display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 16px; border-radius: var(--r-16); background: rgba(54,57,63,.63); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: auto; box-sizing: border-box; } .afxch__msg--a { right: 47px; top: 287px; min-width: 437px; } .afxch__msg--b { right: 200px; top: 370px; min-width: 438px; } .afxch__msg--c { right: 46px; top: 453px; min-width: 491px; } .afxch__msg--d { right: 302px; top: 536px; min-width: 336px; } /* I…;84:1819 "User Avatar" — 35x35 frame, image ellipse inset 2px at 31x31 */ .afxch__av { width: 35px; height: 35px; flex: none; border-radius: 50%; padding: 2px; box-sizing: border-box; } .afxch__av img { width: 31px; height: 31px; display: block; border-radius: 50%; } .afxch__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .afxch__meta { display: flex; flex-direction: row; align-items: baseline; gap: 6px; } /* 500 / 11.5 / 13.26px */ .afxch__name { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 11.5px; line-height: 13.26px; color: var(--af-white); white-space: nowrap; } /* 500 / 9 / 10.36px, Discord's muted timestamp */ .afxch__when { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 9px; line-height: 10.36px; color: rgba(255,255,255,.5); white-space: nowrap; } /* 500 / 11.5 / 13.24px */ .afxch__text { margin: 0; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 11.5px; line-height: 13.24px; color: rgba(255,255,255,.85); white-space: nowrap; } /* ---- 774:60471 / 60476 / 60481 — stat strip, three 449-wide columns at x 46 / 534 / 1022, band y 781 (section y 837). The hero column ends at band y 650, so the gap is 131. The rule is 436 wide, not the full column: 13px short on purpose. --------------------------------------- */ .afxch__stats { display: flex; flex-direction: row; gap: 39px; align-items: flex-start; width: 1425px; max-width: 100%; margin: 131px 0 0 6px; } .afxch__stat { display: flex; flex-direction: column; gap: 17px; align-items: flex-start; width: 449px; flex: none; } /* the rule is a VECTOR line: zero height with a 1px CENTER stroke, so it straddles the column's top edge and contributes nothing to the 90. A plain 1px box would push the label down and make the column 91. */ .afxch__rule { width: 436px; max-width: 100%; height: 1px; margin-bottom: -1px; background: var(--w-25); } .afxch__statbody { display: flex; flex-direction: column; gap: 4px; } /* Saans 400 / 14 / 21px, node opacity .8 */ .afxch__label { font-family: var(--font-alt); font-weight: var(--w-regular); font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8; } /* Saans 600 / 32 / 48px */ .afxch__value { font-family: var(--font-alt); font-weight: var(--w-semi); font-size: 32px; line-height: 48px; color: var(--af-white); } /* ---------------------------------------------------------------- responsive 774:121928 "Mobile" (393x1337) is the only frame below 1512, so 393 is matched and everything between is derived. */ @media (max-width: 1511px) { .afxch__row, .afxch__stats { margin-left: 0; } .afxch__stats { width: 100%; } .afxch__stat { flex: 1; width: auto; } .afxch__rule { width: 100%; } } @media (max-width: 1360px) { /* the chat cluster is drawn hard against the right edge of the 1512 stage; below that it would sit over the headline, so it rides the viewport. */ .afxch__chat { left: auto; right: 0; margin-left: 0; width: 1512px; } } @media (max-width: 1180px) { .afxch { min-height: 0; padding-bottom: 72px; } .afxch__chat { position: static; width: auto; height: auto; margin: 48px 0 0; display: flex; flex-direction: column; gap: 12px; padding: 0 var(--gutter); } .afxch__msg { position: static; width: auto; min-width: 0; max-width: 100%; } .afxch__text { white-space: normal; } .afxch__msg--b, .afxch__msg--c, .afxch__msg--d { margin-left: 48px; } .afxch__h1 { font-size: 80px; line-height: 72px; letter-spacing: -2.4px; width: auto; } .afxch__row { margin-top: 96px; width: 100%; } } @media (max-width: 720px) { /* 774:121928 — hero column at (24,188) 345 wide; h1 56/60; lead 18/27; the two CTAs go full width and stack; the four cards indent alternately. */ .afxch__row { margin-top: 64px; gap: 24px; } .afxch__h1 { font-size: 56px; line-height: 60px; letter-spacing: -1.68px; } .afxch__lead { width: auto; font-size: 18px; line-height: 27px; } .afxch__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; } .afxch__ctas .afx-btn-lime, .afxch__ctas .afx-btn-ghost { width: 100%; } .afxch__chat { margin-top: 40px; } .afxch__msg { max-width: 100%; } .afxch__msg--b, .afxch__msg--d { margin-left: 48px; } .afxch__msg--c { margin-left: 0; } .afxch__stats { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 48px; } .afxch__stat { width: auto; } } /* --------------------------------------------------------------------------- MOBILE PERFORMANCE, 3 Aug 2026 This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur cost is O(area x radius), so on a phone GPU it is one of the most expensive things on the page — and because it sits in the backdrop root, anything that samples the backdrop (the mobile menu's overlay) had to resolve it first, which took ~15s. A 258px-blurred solid ellipse is, visually, a radial gradient; below 768 it is drawn as one, for nothing. ------------------------------------------------------------------------ */ @media (max-width: 767px) { .afxch__glow { filter: none; background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%); } }