* { box-sizing: border-box; } :root { --ground: #060D09; --panel: #0C1710; --panel-2: #122018; --ink: #E9F5EE; --muted: #9DB5A8; --faint: #7F9788; --accent: #00C88C; --lime: #C7FF47; --accent-bar: #00A978; --blue-bar: #4F84D4; --hairline: #1C3226; --good: #3FB884; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --display: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif; } html { color-scheme: dark; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .shell { max-width: 1060px; margin: 0 auto; padding: 0 26px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: #14402E; } nav { display: flex; align-items: baseline; gap: 26px; padding: 24px 0 20px; border-bottom: 1px solid var(--hairline); } .wordmark { color: var(--ink); font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; } .wordmark:hover { text-decoration: none; } .wordmark .by { margin-left: 8px; color: var(--faint); font-size: 10.5px; font-weight: 500; letter-spacing: 1px; } nav .links { display: flex; gap: 20px; margin-left: auto; font-size: 13.5px; flex-wrap: wrap; } nav .links a { color: var(--muted); } nav .links a:hover, nav .links a.current { color: var(--accent); } nav .links a.current, nav .links a.cta { font-weight: 600; } nav .links a.cta { color: var(--accent); } /* Resources menu. Progressive enhancement, and deliberately in that direction: the markup ships with the two links sitting inline in the nav and the trigger hidden, so every destination is reachable with no script at all. site.js then hides the links, reveals the trigger and turns the pair into a dropdown. Only four of the pages set the "js" class on , so this cannot rely on it. */ nav .menu { position: relative; display: inline-flex; align-items: baseline; gap: 20px; } nav .menu-panel { display: inline-flex; align-items: baseline; gap: 20px; } /* The UA rule for [hidden] loses to any class selector above, so the panel has to be told to stay hidden explicitly or it reopens itself. */ nav .menu-panel[hidden] { display: none; } nav .menu-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--muted); background: none; border: 0; font: inherit; font-size: 13.5px; cursor: pointer; } nav .menu-trigger[hidden] { display: none; } nav .menu-trigger:hover, nav .menu-trigger[aria-expanded="true"], nav .menu-trigger.current { color: var(--accent); } nav .menu-trigger.current { font-weight: 600; } nav .menu-trigger::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 140ms ease; } nav .menu-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); } nav .menu.is-enhanced { gap: 0; } nav .menu.is-enhanced .menu-panel { position: absolute; z-index: 20; top: calc(100% + 14px); /* Anchored to its right edge: the trigger sits near the end of the nav, so a left-anchored panel runs off the viewport at some widths. */ right: -12px; left: auto; max-width: calc(100vw - 32px); flex-direction: column; align-items: stretch; gap: 2px; min-width: 178px; padding: 7px; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.92); } nav .menu.is-enhanced .menu-panel a { padding: 7px 10px; border-radius: 6px; white-space: nowrap; } nav .menu.is-enhanced .menu-panel a:hover { background: rgba(0, 200, 140, 0.1); text-decoration: none; } @media (prefers-reduced-motion: reduce) { nav .menu-trigger::after { transition: none; } } .eyebrow { margin: 0 0 14px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; } h1, h2, h3 { margin: 0; text-wrap: balance; } h1, h2 { font-family: var(--display); } footer { padding: 30px 0 52px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 13px; } footer .cols { display: flex; gap: 36px; flex-wrap: wrap; justify-content: space-between; } footer .footer-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1; } footer .footer-brand strong { font-size: 16px; } footer .momento-logo-link { display: inline-flex; align-items: center; } footer .momento-logo { display: block; width: 102px; height: auto; } footer .footer-policies { display: flex; justify-content: flex-end; gap: 16px; margin-top: 14px; font-size: 12px; } footer .fine { max-width: 90ch; margin-top: 24px; color: var(--faint); font-size: 12px; line-height: 1.6; } @media (max-width: 560px) { nav { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; } nav .links { margin-left: 0; flex-basis: 100%; } }