/* ========================= SKIP LINK Must be first focusable element in . ========================= */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.75rem 1.5rem; background: var(--mc-near-black); color: var(--mc-green); font-size: 0.9rem; font-weight: 700; font-family: var(--font-body); border-radius: 0 0 var(--mc-radius-card) var(--mc-radius-card); text-decoration: none; white-space: nowrap; transition: top 180ms ease; } .skip-link:focus { top: 0; outline: 2px solid var(--mc-green); outline-offset: 3px; } /* ========================= GLOBAL FOCUS BASELINE Components layer their own focus-visible on top of this. ========================= */ :focus-visible { outline: 2px solid var(--mc-green); outline-offset: 3px; border-radius: 2px; } /* Strip focus ring for mouse/pointer users */ :focus:not(:focus-visible) { outline: none; }