/* ============================================================================ Atlas site chrome — announcement bar + navbar. Built from Figma 705:16099 (bar) and 705:16080 (nav). Every dimension below is the value in the file. Shared furniture: reused on every page, never rebuilt per page. ========================================================================= */ /* ---------------------------------------------------------------- reset */ .afx *, .afx *::before, .afx *::after { box-sizing: border-box; } /* =============================== announcement bar ======================== Figma 705:16099 — COMPONENT, 1512x56, fill #0B2A27, row, gap 12, padding 8px 10px, justify CENTER, align CENTER. */ /* ---------------------------------------------------------- the canvas Overscroll — the rubber-band strip you get when you drag past either end of the page — is painted with the CANVAS background, which the browser takes from , or from when has none. Every v2 page sets `body { background: var(--af-black) }` in its head and leaves untouched, so both strips came out pure black. Above a dark green bar that read as a gap in the page. The two ends want DIFFERENT colours: green at the top to meet the bar, black at the bottom to meet the footer. A single background-color cannot do that, but a gradient can — the root's background is painted across the whole canvas, and the rubber band extends whichever edge it is nearest. So the top half of the canvas is the bar's green and the bottom half black, and each end picks up the colour beside it. Where the 50% split actually lands does not matter: is opaque and spans the whole document, so the only parts of this that are ever visible are the two extended edges. NOT background-attachment: fixed. That also works, and sizes the gradient to the viewport instead, but it makes the root background repaint on every scroll for no benefit here. Scoped with :has() to pages that ACTUALLY carry the bar. A handful load this sheet without one (privacy, terms), and there a green top would have nothing above it to match — worse than the black it replaced. Where :has() is unsupported the rule does not apply and the page keeps today's behaviour. The legacy .nav-glass pages set html themselves in site.css and never load this file. */ html:has(.afx-bar) { background-color: var(--af-black); background-image: linear-gradient(to bottom, var(--af-bar) 0, var(--af-bar) 50%, var(--af-black) 50%, var(--af-black) 100%); background-repeat: no-repeat; } .afx-bar { height: 56px; background: var(--af-bar); display: flex; flex-direction: row; gap: 12px; padding: 8px 10px; justify-content: center; align-items: center; font-family: var(--font-alt); } /* Figma 705:16100 / 705:16102 — INSTANCE, h 40, radius 12, padding 12, gap 6, backdrop-blur 34px, shadow 0 8 12 rgba(0,0,0,.08). */ .afx-bar__pill { display: flex; align-items: center; gap: 6px; height: 40px; padding: 12px; border-radius: var(--r-12); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); box-shadow: 0 8px 12px 0 rgba(0,0,0,.08); color: var(--af-white); text-decoration: none; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } @media (hover: hover) and (pointer: fine) { .afx-bar__pill:hover { background-color: var(--w-06); } } .afx-bar__pill:active { transform: scale(.98); } .afx-bar__icon { width: 16px; height: 16px; flex: none; display: block; } /* Figma I705:16100;566:6671 — Saans 500 / 14px / 100% line-height */ .afx-bar__label { font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; color: var(--af-white); } /* Figma I705:16100;566:6676 — DM Sans 500 / 14px, opacity .6 */ .afx-bar__sub { font-family: var(--font-ui); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; color: var(--af-white); opacity: .6; } /* Figma 705:16101 — LINE, h 19, 1px #FFF at opacity .1 */ .afx-bar__rule { width: 1px; height: 19px; background: var(--af-white); opacity: .1; flex: none; } /* =============================== navbar ================================== Figma 705:16080 — 1492x59 at x=10, fill rgba(255,255,255,.1), radius 48, 1px INSIDE gradient stroke, GLASS effect. Sits 10px inset from the 1512 shell, 10px below the bar (page y=66). */ .afx-nav { position: relative; /* a stacking context, so the z-index:-1 frost layer below is CONTAINED — without it a negative-z child can paint behind an ancestor's background and the bar loses its frost entirely. A plain stacking context does not form a backdrop root, so this does not undo the fix. */ z-index: 0; width: calc(100% - 20px); max-width: 1492px; height: 59px; margin: 10px auto 0; border-radius: var(--r-48); background: var(--w-10); /* DECLARED DEVIATION: 705:16080 carries Figma's GLASS effect, which exposes no radius and has no CSS equivalent. Approximated with a backdrop blur. THE BLUR LIVES ON ::before, NOT HERE, and that is load-bearing. An element carrying backdrop-filter becomes a BACKDROP ROOT for everything inside it: its descendants' own backdrop-filters then sample this element's already composited backdrop instead of the page. With the blur on .afx-nav the mega-menu panels' blur did literally nothing — measured, pixel for pixel identical with it on and off, at any radius. A pseudo-element has no descendants, so it can carry the filter without rooting anything. */ display: flex; align-items: center; font-family: var(--font-alt); } /* the frost layer — see the note on .afx-nav for why it is not on .afx-nav */ .afx-nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); pointer-events: none; z-index: -1; } /* the INSIDE gradient stroke. a pseudo-element so the gradient survives — border-color cannot take a gradient. */ .afx-nav::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--af-hair-nav); -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; } /* Figma 705:16081 — 184x20, padding 0 16. The file draws the mark as two stacked copies of the same image (705:16083 + 705:16084), the upper one COLOR_DODGE. Reproducing that literally in CSS tints the wordmark GREEN over the teal hero, because CSS dodges against the page backdrop while Figma dodges only against the layer below it. Sampling the reference render shows the intended result is flat #FCFCFC — zero channel spread — so one copy forced to white is exact, and it does not depend on whatever sits behind the navbar. */ /* 705:16081 / 959:164546 sit at x18 inside a nav whose left edge is x10, i.e. the bar has an 8px inset before the brand's own 16px padding. */ .afx-nav__brand { display: flex; align-items: center; padding: 0 16px; margin-left: 8px; flex: none; } .afx-nav__logo { position: relative; width: 152px; height: 20px; display: block; } .afx-nav__logo img { width: 152px; height: 20px; display: block; filter: brightness(0) invert(1); } /* Figma 705:16093 "Frame 11" — row, gap 32, 484 wide at x 514 inside a 1512 frame, i.e. centred on the PAGE (514 + 484/2 = 756 = 1512/2). The futures frame's copy (959:164559-63) sits at exactly the same x. FIXED 2 Aug 2026: `margin: 0 auto` centred the list in the space LEFT OVER between the 184px brand and the 269px action cluster, which lands its centre at 708 — 48px left of the design on both / and /futures. Absolute centring on the nav is what the file actually draws. */ .afx-nav__links { /* Centred with auto inline margins rather than translate(-50%,-50%): a transform on an ancestor ALSO forms a backdrop root, and this row sits between the mega-menu panels and the page. See the note on .afx-nav. Horizontal centring is margin-inline:auto against a max-content width; vertical needs no help, the row is full-height and centres its own items. */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: max-content; display: flex; flex-direction: row; gap: 32px; align-items: center; /* auto inline margins do the centring; this must stay a shorthand that KEEPS them, a bare `margin: 0` later in the block silently wins. */ margin: 0 auto; list-style: none; padding: 0; } /* Figma 705:16094-98 — Saans 500 / 16px / 95% (15.2px), #FFF */ .afx-nav__link { font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 15.2px; color: var(--af-white); text-decoration: none; white-space: nowrap; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out); } @media (hover: hover) and (pointer: fine) { .afx-nav__link:hover { background-size: 100% 1px; } } /* Figma 705:16085 — right cluster, row, gap 24 (inner group gap 8), h 43. `margin-left: auto` now does the pushing that the links' auto margins used to do, since .afx-nav__links was taken out of flow to centre it properly. */ .afx-nav__actions { display: flex; flex-direction: row; align-items: center; gap: 8px; padding-right: 8px; margin-left: auto; flex: none; } /* Figma 705:16087 — 43x43, radius 50, fill rgba(255,255,255,.06), 1px INSIDE rgba(255,255,255,.17). Also the positioning context for the language menu (705:16103). */ .afx-lang { position: relative; flex: none; } .afx-nav__globe { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-50); background: var(--w-06); border: 1px solid var(--w-17); color: var(--af-white); cursor: pointer; padding: 0; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .afx-nav__globe svg { width: 18px; height: 18px; display: block; } @media (hover: hover) and (pointer: fine) { .afx-nav__globe:hover { background-color: var(--w-10); } } .afx-nav__globe:active { transform: scale(.97); } /* Figma 705:16089 — 84x42, radius 50, fill rgba(255,255,255,.16), 1px INSIDE rgba(255,255,255,.08), backdrop-blur 34, shadow 0 8 12 .08 */ .afx-nav__login { height: 42px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-50); /* Two layers, not one. The Figma fill is white at 16%, which over a dark hero reads as a frosted pill — but the label is white too, so over a LIGHT hero (the /models bands, any pale artwork) it was white-on-near-white and the button effectively vanished. A dark scrim underneath guarantees the label always has something to sit on: barely perceptible over dark, decisive over light. Cheaper and far less brittle than giving the nav a light/dark theme it does not otherwise have. */ background: linear-gradient(rgba(12,12,12,.30), rgba(12,12,12,.30)), var(--w-16); border: 1px solid var(--w-17); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); box-shadow: 0 8px 12px 0 rgba(0,0,0,.08); font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 18.16px; color: var(--af-white); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } @media (hover: hover) and (pointer: fine) { .afx-nav__login:hover { background: linear-gradient(rgba(12,12,12,.22), rgba(12,12,12,.22)), var(--w-25); } } .afx-nav__login:active { transform: scale(.97); } /* Figma 705:16091 — 126x42, radius 120, fill #F9F9F7, shadow 0 8 12 .08. Ink is #263F42 — set explicitly, never inherited. */ .afx-nav__cta { height: 42px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-round); background: var(--af-beige); box-shadow: 0 8px 12px 0 rgba(0,0,0,.08); font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 18.16px; color: var(--af-slate-teal); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } @media (hover: hover) and (pointer: fine) { .afx-nav__cta:hover { background-color: var(--af-white); } } .afx-nav__cta:active { transform: scale(.97); } /* =============================== language menu =========================== Figma 705:16103 — 78x200, column, gap 0, padding 4, radius 13, fill rgba(0,0,0,.13), 1px INSIDE gradient hairline, backdrop-blur 72.95, shadow 9px 10px 24px rgba(38,63,66,.28). Absolute x 12225 vs the globe's 12225 -> left-aligned with the button. Absolute y 31069 vs the globe's bottom 31061 -> an 8px gap. The file draws this panel OPEN; on the site it is the globe's menu. */ .afx-lang__menu { position: absolute; top: calc(100% + 8px); left: 0; width: 78px; padding: 4px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 0; align-items: center; border-radius: 13px; background: rgba(0,0,0,.13); /* raised with the mega-menu panels so the two dropdown surfaces frost the same amount — they open from the same bar and sit side by side */ backdrop-filter: blur(80px) saturate(1.25); -webkit-backdrop-filter: blur(80px) saturate(1.25); box-shadow: 9px 10px 24px 0 rgba(38,63,66,.28); z-index: 40; /* closed state */ opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out), visibility 0s linear var(--t-fast); } .afx-lang__menu::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--af-hair); -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; } .afx-lang[data-open="true"] .afx-lang__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; } /* Figma 705:16104 — 70x32, row, gap 8, padding 8 12, radius 8. The current locale carries fill rgba(38,63,66,.15); the others carry the same colour at .06 with visible:false, which is the hover state. */ .afx-lang__item { width: 70px; } .afx-lang__link { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 70px; height: 32px; padding: 8px 12px; border-radius: var(--r-8); background: transparent; color: var(--af-white); text-decoration: none; font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 16px; line-height: 16px; transition: background-color var(--t-fast) var(--e-out); } .afx-lang__link[aria-current="true"] { background: rgba(38,63,66,.15); } @media (hover: hover) and (pointer: fine) { .afx-lang__link:hover { background: rgba(38,63,66,.06); } } /* the flag instance — 16x16, radius 100, clipped */ .afx-lang__flag { width: 16px; height: 16px; flex: none; border-radius: 50%; overflow: hidden; display: block; } /* focus — visible for keyboard users, absent on mouse click */ .afx :focus-visible { outline: 2px solid var(--af-lime); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- responsive The design is drawn at 1512 only. Below the content column the nav collapses to brand + actions; the link row moves into a menu. */ @media (max-width: 1100px) { .afx-nav__links { display: none; } } @media (max-width: 720px) { .afx-bar__sub { display: none; } .afx-nav__login { display: none; } /* The bar is drawn at 1512 with two pills. It carries FOUR markets now, and even with the subs hidden they measure 486 against a 393 viewport, so centred flex either overflows the document or squashes the labels. Below 720 it becomes a scroll rail instead — the same pattern the step bands and the team/timeline rails use at this width. Four pills stay reachable, the fourth peeks to advertise the scroll, the bar keeps its 56px height and the DOCUMENT never gains a horizontal scrollbar. Above 720 nothing here applies and the centred two-up geometry is untouched. */ .afx-bar { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .afx-bar::-webkit-scrollbar { display: none; } .afx-bar__pill { flex: none; scroll-snap-align: start; } .afx-bar__rule { flex: none; } }