1@use "../theme" as *;
2@use "../vars" as v;
3
4.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
5
6.skip-link {
7 position: fixed;
8 // Top-left corner of the page, just below the header.
9 top: calc(#{v.$header-height} + 0.5rem);
10 left: #{v.$padding-inline};
11 z-index: 10000;
12 max-width: calc(100vw - #{v.$padding-inline} * 2);
13 padding: 0.4rem 0.85rem;
14 @include terminal-panel($radius: 3px);
15 color: theme(text);
16 font-weight: 600;
17 font-size: 0.875rem;
18 line-height: 1.2;
19 white-space: nowrap;
20 // Hide fully above the viewport. The extra 1.5rem (vs the 0.5rem reveal gap)
21 // clears the bottom edge past y=0 so its accent border can't show as a 1px
22 // line at the top.
23 transform: translateY(calc(-100% - #{v.$header-height} - 1.5rem));
24 &:focus {
25 transform: translateY(0);
26 border-color: theme(accent); // same hover/focus swap as .copy-btn
27 outline: none; // the accent border is the focus indicator
28 }
29}
30
31@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; } }