/* Site chrome: the nav and footer shared by every page on the site. * * Extracted verbatim from metomic.css, which is where this design originated * and which still styles the bodies of /, /platform/ and /book-a-demo/. The * chrome rules were moved out rather than copied, so there is exactly one * definition of the nav and footer; metomic.css now loads alongside this file * on those three pages instead of duplicating it. * * What is deliberately NOT here: metomic.css's four global rules * (`*`, `html`, `body`, `h1`). This stylesheet loads on the 102 Webflow-export * pages too, and those rules would fight the Webflow bundle -- measured * against the homepage, adding the bundle's own resets moved h1 from 72px to * 54px and grew the page by 757px. Chrome-only resets are scoped below * instead. * * Tokens are likewise scoped to the chrome rather than :root: metomic.css and * the Webflow bundle both define `--black` and `--radius` with different * values, so declaring these globally would silently repaint Webflow pages. * Custom properties inherit, so descendants of .nav-wrap/.footer still see * them. Keep the values below in sync with metomic.css's :root. */ /* NOTE ON UNITS -- this file is intentionally in px, not rem. * * The chrome is shared by two page families that disagree about the root * font size. metomic.css (loaded only by /, /platform/ and /book-a-demo/) * sets html{font-size:16px} with 18px above 1919px and 15px below 991px; * the 102 Webflow-export pages and the Astro pages load no such rule and sit * at the browser default. Sizing the chrome in rem therefore rendered it * 12.5% larger on those three pages at a 1920px window -- same stylesheet, * different nav. px makes the chrome render identically everywhere, which is * the entire point of it being shared. Its own breakpoints below still handle * responsiveness. */ /* Self-hosted so the chrome carries no CDN dependency. The three hand-built * pages currently pull this face from api.fontshare.com; these .woff2 files * are already in the repo under public/fonts/ and are byte-identical faces. * Note the family name has a space -- the Webflow bundle registers the same * typeface as `Clashgrotesk`, which is a different family string. */ @font-face { font-family: 'Clash Grotesk'; src: url('/fonts/ClashGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Clash Grotesk'; src: url('/fonts/ClashGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Clash Grotesk'; src: url('/fonts/ClashGrotesk-Variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; } /* Design tokens, scoped -- see note above on why these are not on :root. */ .nav-wrap, .footer { --black: #1a1a1a; --cream-light: #f7f7f7; --grey-light: #e5e3dd; --grey-dark: #5c5c5c; --purple: #614ab3; --lavender: #e2d7ff; --lilac: #c6b0ff; --midnight: #181718; --orange: #ff7e47; --orange-hover: #d5691b; --radius: 8px; --font-heading: 'Clash Grotesk', 'ClashGrotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* Chrome-scoped reset. metomic.css gets these from its global `*` rule, which * this file cannot carry; without them the nav's lists inherit the host page's * UA margins and the Webflow bundle's content-box sizing. */ .nav-wrap, .nav-wrap *, .footer, .footer * { box-sizing: border-box; } .nav-wrap ul, .nav-wrap li, .nav-wrap p, .footer ul, .footer li, .footer p { margin: 0; padding: 0; } .nav-wrap ul, .footer ul { list-style: none; } /* The footer markup wraps its grid in .container. The Webflow bundle defines * its own bare `.container` (3 rules), so this is scoped to the footer to * keep the two from colliding in either direction. */ .footer .container { max-width: 1200px; margin: 0 auto; padding: 0 3%; } /* ── Nav ─────────────────────────────── */ .nav-wrap{ position:sticky;top:0;z-index:50; background:rgba(247,247,247,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--grey-light); } .nav{ display:flex;align-items:center;gap:40px; height:72px;max-width:1200px;margin:0 auto;padding:0 3%; } .nav-logo{color:var(--black);display:flex;align-items:center;} .nav-logo svg{width:126px;height:auto;display:block;} .nav-links{display:flex;gap:28px;list-style:none;flex:1;} /* The dropdown parents are