diff --git a/docs/redesign/round6/heading-focus-after-1440.webp b/docs/redesign/round6/heading-focus-after-1440.webp new file mode 100644 index 0000000..a7845a7 Binary files /dev/null and b/docs/redesign/round6/heading-focus-after-1440.webp differ diff --git a/src/styles/base.css b/src/styles/base.css index 808048b..176bbf6 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -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. */