style: soften the focus ring on programmatically focused headings

This commit is contained in:
2026-10-11 02:11:49 +03:00
parent 70b628f65a
commit 43dec06bbc
2 changed files with 13 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -51,6 +51,19 @@ summary:focus-visible,
outline-offset: 3px;
}
/* Destination headings take programmatic focus after a keyboard or scripted
jump. A thinner, softer ring still marks the landing point (about 5:1
against the night background) without shouting like a control's focus. */
:is(h1, h2)[tabindex]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus) 60%, transparent);
outline-offset: 6px;
border-radius: 2px;
}
@media (forced-colors: active) {
:is(h1, h2)[tabindex]:focus-visible { outline-color: Highlight; }
}
.portfolio-main:focus-visible {
/* The localized cue lives outside the reading mask. Keep the main landmark
focusable for native skip links without outlining the entire document. */