/* --------------------------------------------------------------- Adeia — SDK reference page Layout for sdk.html only. Every selector is scoped under .page-sdk, which sits on , so nothing here can reach the landing page even if both stylesheets are ever loaded together. Colour, type, spacing and easing come from tokens.css. The shared classes — .container, .section, .ground--*, .display, .h1, .h2, .h3, .lead, .body, .label, .mono, .quiet, .plus-link — come from base.css and are not restated here. The masthead and the footer are re-authored below rather than imported, because their rules live in hero.css and closing.css, which this page does not load. Contrast, measured against each ground it is used on: on --ink #222222 --mist #eddfee 12.4:1 body, code --on-ink-q #a99aab 5.99:1 code comments --orchid #cd8dbd 6.17:1 display, keywords on --bone #ede8da --on-bone #2a2a24 11.8:1 body --on-bone-q #57564c 6.04:1 quiet body on --paper #ffffff --on-paper #222222 15.9:1 body --on-paper-q #5c5c5c 6.69:1 quiet body on --forest #1f2d1d --on-forest #e4ecdf 11.96:1 body, links --on-forest-q #a9b8a4 6.94:1 quiet body --orchid #cd8dbd 5.61:1 display, plus mark Every one clears WCAG AA at the size it is used, including the 10px mono labels and the 12px chips. No text on this page is set in a colour that is not on that list. --------------------------------------------------------------- */ /* ===================================================================== Shared page furniture ===================================================================== */ /* Visible only once it is focused, which is the whole point of it. */ .page-sdk .page-sdk__skip { position: absolute; top: 0; left: 0; z-index: 200; padding: 0.75rem 1rem; background: var(--orchid); color: var(--ink); font-size: var(--t-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transform: translateY(-120%); } .page-sdk .page-sdk__skip:focus-visible { transform: none; } /* ---------- masthead ---------- Fixed, so it floats over grounds no single section owns. It carries its own hairline token because it sits outside any .ground. */ .page-sdk .masthead { --rule: var(--rule-on-ink); position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 1.375rem var(--pad-x); color: var(--mist); } /* An ink scrim under the bar. Invisible against the hero; over the bone and paper grounds further down it is the thing keeping the wordmark and the Menu label above 4.5:1. */ .page-sdk .masthead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(34, 34, 34, 0.92), rgba(34, 34, 34, 0.62) 55%, rgba(34, 34, 34, 0) ); pointer-events: none; } .page-sdk .masthead__mark { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none; color: var(--mist); } /* A