, visible only on keyboard focus"). * First focusable element in (site/snippets/head.php), ahead of the * logo. Hidden off-screen until keyboard focus, then revealed as a * full-width bar above everything else on the page (incl. the fixed logo, * z-index 100, and the cookie banner, z-index 200) so it never has to * visually share the top-left corner with the logo at the same time. */ .dk-skip-link { position: fixed; inset-inline: 0; top: 0; z-index: 999; display: flex; align-items: center; justify-content: center; block-size: 2.75rem; background-color: var(--dk-color-black); color: var(--dk-color-white); text-decoration: none; transform: translateY(-100%); transition: transform 0.2s ease; } .dk-skip-link:focus-visible { transform: translateY(0); outline: none; box-shadow: inset 0 0 0 3px var(--dk-color-focus); } @media (prefers-reduced-motion: reduce) { .dk-skip-link { transition: none; } }