/* --------------------------------------------------------------- Adeia — the Capability page Layout for capability.html only. Every selector is scoped under .page-capability, which sits on the page's , so nothing here can reach another page's markup. Colour, type, spacing and easing come from tokens.css; .display, .h2, .h3, .lead, .body, .label, .mono, .quiet, .plus-link and .visually-hidden come from base.css and are not restated. The masthead and the footer are the exceptions. Their rules live in styles/hero.css and styles/closing.css, which this page does not load, so the parts of them this page needs are restated here under the page scope rather than pulled in wholesale. Contrast, measured against the ground each element sits on: hero --orchid on --ink 6.40:1 display heading --mist on --ink 11.90:1 lead copy --on-ink-quiet on --ink 5.77:1 10px eyebrow policy --on-bone on --bone 11.79:1 table and headings --on-bone-quiet 6.04:1 secondary copy approvals --on-paper on --paper 15.35:1 headings and copy --on-paper-quiet 6.69:1 step copy audit --mist on --ink 11.90:1 headings and copy --on-ink-quiet 5.77:1 note copy adapters --orchid on --forest 5.61:1 display heading --on-forest 11.96:1 body copy --on-forest-quiet 7.08:1 10px meta Every one clears WCAG AA at the size it is used. The three verdicts in the rules table never rely on hue. Each is the word itself, set in a different weight, with a different fill: none, outlined, and reversed out. In greyscale all three stay distinct. --------------------------------------------------------------- */ /* ===================================================================== Masthead — restated, scoped. See the note at the top of this file. ===================================================================== */ .page-capability .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 over the hero; over the pale grounds further down it is what keeps the wordmark above 4.5:1. */ .page-capability .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-capability .masthead__mark { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none; color: var(--mist); } /* A