/* The site-wide "skip to content" link. * * Injected into every built page by scripts/skip-link.mjs — this file is the * only definition. Before it, four separate implementations existed * (.skip-link in three stylesheets, .penalty-skip, .mc-skip) and 39 of 54 * pages had none at all. * * Deliberately self-contained: landing stylesheets do not share a variable * set, so every value here either stands alone or carries a fallback. The * font family is inherited from on purpose. */ .skip-link { position: fixed; top: 0; /* logical, so the Arabic pages anchor it to the right edge */ inset-inline-start: 0; /* The consent banner sits at 2147483000 and can grow tall on a small viewport. A skip link that something else can cover is a skip link that does not work, so it goes above that layer. */ z-index: 2147483001; transform: translateY(-140%); padding: 12px 20px; border-end-end-radius: 10px; background: var(--ink-900, #0a0f2c); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; transition: transform .15s ease; } /* :focus-visible, not :focus — a mouse click on a nearby element should not slide it into view. */ .skip-link:focus-visible { transform: none; outline: 3px solid #fff; outline-offset: -6px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }