/* ========================================================================== Nav dropdowns — Figma 944:15027 (Products) and 946:15634 (Company). Both frames draw the SAME shell: a 915 × 370 panel, white, square corners, one soft shadow, split 384 (links) + 531 (art). It hangs from the header's bottom edge (y = 72) and is centred on the VIEWPORT, not on the button it belongs to — Figma puts it at x = 502.5 on a 1920 frame, and 502.5 + 915/2 = 960. There is no scrim, by request (2026-09-16). An earlier build dimmed the page behind an open panel; Figma has no such layer, and the panel's own shadow is what separates it from the page. site/callix/menu.js builds the panel and owns when it is open — pointer over the trigger or over the panel, with a grace period for the travel between them. This file is only its geometry. ========================================================================== */ /* ---- the shell (946:15719) ------------------------------------------------------------ */ .cx-menu { /* the panel is a bare div appended to , so it declares its own position — without it left/top do nothing and the panel lands at the end of the document. */ position: fixed; z-index: 20; left: 50% !important; top: 72px !important; /* the header's bottom edge, no gap */ transform: translateX(-50%); width: 915px !important; height: 370px !important; max-height: none !important; background: var(--cx-surface); border-radius: 0; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); overflow: hidden; } /* `display` is deliberately NOT set here: .cx-menu:not([data-view]) below is what keeps a closed panel off the screen, and a display declaration here would override it. */ .cx-menu__pane { display: flex; align-items: center; width: 100%; height: 100%; } /* Closing does not remove the panel — site/callix/menu.js only drops its `data-view` — so this is what takes it off the screen, ground and shadow included. `data-view` is what "open" means here: the element, its classes and its box all survive a close. */ .cx-menu:not([data-view]) { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: no-preference) { /* scoped to the open state: with `both` fill an unscoped animation would pin opacity at 1 and beat the closed rule above, since animations outrank normal declarations */ .cx-menu[data-view] { animation: cx-menu-in 140ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes cx-menu-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } } } /* below 1024 the sheet is the navigation; the panel would otherwise sit over it */ @media (max-width: 1023px) { .cx-menu { display: none !important; } } /* ---- left column (946:16023) — 384 wide, 16 padding, 8 between its two blocks --------- */ .cx-menu__links { box-sizing: border-box; flex: 0 0 384px; width: 384px; height: 370px; overflow: clip; display: flex; flex-direction: column; gap: 8px; padding: 16px; /* Figma strokes are painted over the box, not inside the layout: a real border-right would take the column's content from 352 to 351 and push the art 1px out of its 531. An inset shadow draws the same hairline and costs no width. */ box-shadow: inset -1px 0 0 0 var(--cx-line-dark-2); /* rgba(255,255,255,.08) — Figma's own value */ } .cx-menu__list { flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; width: 100%; } /* ---- a row. The tinted ground is the hover state; the description is not — it is always there (2026-09-16: "the subtitles only appear on hover, fix it"). Figma draws one row tinted WITH a description and the other with neither, which I first read as both belonging to hover. Only the ground does. Every row is therefore 82 tall at rest, not 56. ---- */ .cx-menu__row { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 16px; text-decoration: none; background: transparent; transition: background-color 120ms linear; } .cx-menu__row span { font-family: var(--cx-sans); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.09px; color: var(--cx-ink); } .cx-menu__desc { opacity: 0.6; } .cx-menu__row:hover, .cx-menu__row:focus-visible { background: #f5f5f5; } .cx-menu__row:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: -2px; } /* Products has four rows since /mcp joined (2026-09-25). The panel is a fixed 370, and the list gets what the stamp leaves it: 370 − 32 padding − 8 gap − 42.616 stamp = 287.4. Four 82px rows overran into the stamp; 10px vertical padding makes each row 70, 280 in all, and keeps the stamp pinned at the foot. */ .cx-menu--platform .cx-menu__row { padding: 10px 16px; } /* Company's rows carry no description in the file, so they keep one line and 8/16 padding */ .cx-menu--resources .cx-menu__row { padding: 8px 16px; } /* ---- the stamp (946:16011) — Products' footer block, 352 × 42.616 -------------------- */ .cx-menu__stamp { box-sizing: border-box; display: flex; align-items: center; width: 100%; /* strokes again: a real 0.609px border on all four sides would add 1.22 to a block Figma measures at 42.616, and the block is what pins the list's bottom edge. Inset shadows draw it for free. */ box-shadow: inset 0 0 0 0.609px rgba(38, 38, 38, 0.48); } .cx-menu__stamp-body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; box-shadow: inset -0.609px 0 0 0 rgba(38, 38, 38, 0.48); } .cx-menu__stamp-row { display: flex; align-items: center; justify-content: space-between; padding: 4.875px; white-space: nowrap; line-height: 1; /* Figma: leading-none — 2 rows + rule = 42.616 */ } /* Figma sets this stamp in Andale Mono — a system face the site does not ship and the only Andale in the file. Every other mono run in the design is Geist Mono, which is what --cx-mono resolves to, so the stamp follows the site's mono. A deliberate divergence from the file, and the one place the design and the build disagree on a family. */ .cx-menu__stamp-row span { font-family: var(--cx-mono); font-weight: 400; font-size: 10.969px; line-height: 1; letter-spacing: -0.1645px; color: rgba(38, 38, 38, 0.73); } .cx-menu__stamp-rule { display: block; width: 100%; height: 1.116px; } .cx-menu__stamp-rule img { display: block; width: 100%; height: 100%; max-width: none; } .cx-menu__stamp-mark { display: block; flex: none; width: 42.047px; height: 42.047px; } /* ---- the badge (946:16032) — Company's footer block, 284.842 × 195.033 at (0.5, −15) ---- */ .cx-menu__foot { position: relative; flex: 1 0 0; min-height: 0; width: 100%; } .cx-menu__badge { position: absolute; left: 0.5px; top: -15px; width: 284.842px; height: 195.033px; pointer-events: none; } .cx-menu__badge img { display: block; width: 284.842px; height: 195.033px; max-width: none; } /* ---- right column (944:15450 / 946:15740) — 531 wide, full height -------------------- */ .cx-menu__art { flex: 0 0 531px; width: 531px; height: 370px; position: relative; overflow: hidden; background: var(--cx-page); /* #fafaf9 — Company's empty half */ box-shadow: inset -1px 0 0 0 var(--cx-line-dark-2); } .cx-menu__art img { display: block; width: 531px; height: 370px; max-width: none; }