diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index ba79780c9..d3e931cf8 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -42,7 +42,7 @@ function handleCardClick(event: MouseEvent) {
 
 <template>
   <div>
-    <h2 class="text-lg text-fg uppercase tracking-wider mb-6">
+    <h2 id="get-involved" class="text-lg text-fg uppercase tracking-wider mb-6">
       {{ $t('about.get_involved.title') }}
     </h2>
 
diff --git a/app/pages/about.vue b/app/pages/about.vue
index b25006496..e55827d8c 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -73,227 +73,13 @@ const roleLabels = computed(
     }) as Partial<Record<Role, string>>,
 )
 
-// --- Popover Logic (Global Single Instance with Event Delegation) ---
-// We use a single global popover instance for performance (especially in Firefox with many items).
-// Event delegation on the list handles interactions, avoiding listeners on every item.
 const activeContributor = shallowRef<GitHubContributor>()
-const popoverPos = reactive({ top: 0, left: 0, align: 'center' as 'left' | 'center' | 'right' })
-const panelRef = useTemplateRef<HTMLElement>('panelRef')
-const activeBtnEl = shallowRef<HTMLElement>()
-let closeTimer: ReturnType<typeof setTimeout> | undefined
-let lastOpenTime = 0
-
-// Mouse tracking for scroll interactions
-let mouseX = 0
-let mouseY = 0
-let scrollTimer: ReturnType<typeof setTimeout> | undefined
-
-function cancelClose() {
-  if (closeTimer) {
-    clearTimeout(closeTimer)
-    closeTimer = undefined
-  }
-}
-
-function computePos(btn: HTMLElement) {
-  const r = btn.getBoundingClientRect()
-  const vw = window.innerWidth
-  const POP_W = 256
-  const GAP = 8
-
-  popoverPos.top = r.bottom + GAP
-  const center = r.left + r.width / 2
-
-  if (center - POP_W / 2 < GAP) {
-    popoverPos.align = 'left'
-    popoverPos.left = r.left
-  } else if (center + POP_W / 2 > vw - GAP) {
-    popoverPos.align = 'right'
-    popoverPos.left = r.right
-  } else {
-    popoverPos.align = 'center'
-    popoverPos.left = center
-  }
-}
-
-// DON'T MOVE aria-expanded to the template, Firefox performance issues
-function setActiveBtnExpanded(btn: HTMLElement | null, value: boolean) {
-  if (activeBtnDom && activeBtnDom !== btn) {
-    activeBtnDom.removeAttribute('aria-controls')
-    activeBtnDom.setAttribute('aria-expanded', 'false')
-  }
-  activeBtnDom = btn
-  if (btn) {
-    if (value) {
-      btn.setAttribute('aria-expanded', 'true')
-      btn.setAttribute('aria-controls', 'contributor-popover')
-    } else {
-      btn.setAttribute('aria-expanded', 'false')
-      btn.removeAttribute('aria-controls')
-    }
-  }
-}
-
-function openById(id: number, btnEl: HTMLElement, focus = false) {
-  const c = contributors.value.find(x => x.id === id)
-  if (!c || !isExpandable(c)) return
-  cancelClose()
-  computePos(btnEl)
-  activeBtnEl.value = btnEl
-  setActiveBtnExpanded(btnEl, true)
-  activeContributor.value = c
-  lastOpenTime = Date.now()
-
-  if (focus) {
-    nextTick(() => {
-      panelRef.value?.focus()
-    })
-  }
-}
-
-function scheduleCloseActive() {
-  cancelClose()
-  closeTimer = setTimeout(() => {
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-  }, 80)
-}
-
-function getButtonFromEvent(e: Event): HTMLButtonElement | null {
-  return (e.target as Element).closest('button[data-cid]')
-}
-
-function onListMouseEnter(e: MouseEvent) {
-  const btn = getButtonFromEvent(e)
-  if (!btn) return
-  openById(Number(btn.dataset.cid), btn)
-}
-
-function onListMouseLeave(e: MouseEvent) {
-  // only close if we exist >ul>
-  const related = e.relatedTarget as Element | null
-  if (related?.closest('[data-popover-panel]')) return
-  if (!related?.closest('button[data-cid]')) scheduleCloseActive()
-}
-
-function onListClick(e: MouseEvent) {
-  const btn = getButtonFromEvent(e)
-  if (!btn) return
-  const id = Number(btn.dataset.cid)
-  if (activeContributor.value?.id === id && Date.now() - lastOpenTime > 50) {
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-    // Return focus to button when closing via click
-    btn.focus()
-  } else {
-    // Open and focus the panel for keyboard accessibility
-    openById(id, btn, true)
-  }
-}
-
-// Panel mouse events
-function onPanelMouseLeave(e: MouseEvent) {
-  const related = e.relatedTarget as Element | null
-  if (!related?.closest('button[data-cid]')) scheduleCloseActive()
-}
-
-// Tab management inside the panel (manual focus)
-function onPanelKeydown(e: KeyboardEvent) {
-  if (e.key !== 'Tab' || !panelRef.value) return
-  const focusables = [...panelRef.value.querySelectorAll<HTMLElement>('a[href]')]
-  if (!focusables.length) {
-    e.preventDefault()
-    activeBtnEl.value?.focus()
-    return
-  }
-
-  const first = focusables[0]
-  const last = focusables.at(-1)!
-
-  if (e.shiftKey && document.activeElement === panelRef.value) {
-    e.preventDefault()
-    activeBtnEl.value?.focus()
-    return
-  }
 
-  if (e.shiftKey && document.activeElement === first) {
-    e.preventDefault()
-    // Keep open but focus button
-    activeBtnEl.value?.focus()
-  } else if (!e.shiftKey && document.activeElement === last) {
-    e.preventDefault()
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-
-    // Find next button
-    const allBtns = [...document.querySelectorAll<HTMLElement>('button[data-cid]')]
-    const idx = allBtns.indexOf(activeBtnEl.value!)
-    const nextBtn = allBtns[idx + 1]
-
-    if (nextBtn) {
-      nextBtn.focus()
-    } else {
-      activeBtnEl.value?.focus()
-    }
-  }
-}
-
-// Document listeners
-function onDocumentPointerDown(e: PointerEvent) {
-  if (!activeContributor.value) return
-  const t = e.target as Element
-  if (!t.closest('[data-popover-panel]') && !t.closest('button[data-cid]')) {
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-  }
-}
-
-function onDocumentKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && activeContributor.value) {
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-    activeBtnEl.value?.focus()
-  }
-}
-
-function onMouseMove(e: MouseEvent) {
-  mouseX = e.clientX
-  mouseY = e.clientY
-}
-
-function checkHover() {
-  const el = document.elementFromPoint(mouseX, mouseY)
-  const btn = el?.closest('button[data-cid]') as HTMLElement | null
-  if (btn) {
-    openById(Number(btn.dataset.cid), btn)
-  }
-}
-
-function onScroll() {
-  if (activeContributor.value) {
-    setActiveBtnExpanded(null, false)
-    activeContributor.value = undefined
-  }
-  clearTimeout(scrollTimer)
-  scrollTimer = setTimeout(checkHover, 150)
+function onBeforeToggleHoverCard(event: ToggleEvent & { source: HTMLElement }) {
+  const { cid } = event.source.dataset
+  const contributor = contributors.value.find(c => c.id === Number(cid))
+  activeContributor.value = contributor
 }
-
-let activeBtnDom: HTMLElement | null = null
-
-onMounted(() => {
-  document.addEventListener('pointerdown', onDocumentPointerDown)
-  document.addEventListener('keydown', onDocumentKeydown)
-  window.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('mousemove', onMouseMove, { passive: true })
-})
-onBeforeUnmount(() => {
-  cancelClose()
-  clearTimeout(scrollTimer)
-  document.removeEventListener('pointerdown', onDocumentPointerDown)
-  document.removeEventListener('keydown', onDocumentKeydown)
-  window.removeEventListener('scroll', onScroll)
-  window.removeEventListener('mousemove', onMouseMove)
-})
 </script>
 
 <template>
@@ -406,9 +192,14 @@ onBeforeUnmount(() => {
 
         <!-- Sponsors -->
         <div class="sponsors-logos">
-          <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
+          <h2 id="sponsors" class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.sponsors.title') }}
           </h2>
+          <a
+            href="#oss-partners"
+            class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1"
+            >{{ $t('about.skip_sponsors') }}</a
+          >
           <AboutLogoList
             :list="SPONSORS"
             class="grid grid-cols-2 md:flex md:flex-row md:items-center"
@@ -417,20 +208,23 @@ onBeforeUnmount(() => {
 
         <!-- OSS partners -->
         <div>
-          <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
+          <h2 id="oss-partners" class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.oss_partners.title') }}
           </h2>
+          <a href="#team" class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1">{{
+            $t('about.skip_oss_partners')
+          }}</a>
           <AboutLogoList :list="OSS_PARTNERS" class="items-center" />
         </div>
 
         <div>
-          <h2 class="text-lg uppercase tracking-wider mb-4">
+          <h2 id="team" class="text-lg uppercase tracking-wider mb-4">
             {{ $t('about.team.title') }}
           </h2>
           <p class="text-fg-muted leading-relaxed mb-6">
             {{ $t('about.contributors.description') }}
           </p>
-          <section aria-labelledby="contributors-heading">
+          <section>
             <h3 id="contributors-heading" class="text-sm text-fg uppercase tracking-wider mb-4">
               {{
                 $t(
@@ -440,6 +234,11 @@ onBeforeUnmount(() => {
                 )
               }}
             </h3>
+            <a
+              href="#get-involved"
+              class="not-focus:sr-only absolute bg-bg-elevated rounded px-2 py-1 z-1"
+              >{{ $t('about.skip_contributors') }}</a
+            >
 
             <div
               v-if="contributorsStatus === 'pending'"
@@ -458,9 +257,6 @@ onBeforeUnmount(() => {
             <ul
               v-else-if="contributors.length"
               class="flex flex-wrap justify-center gap-2 list-none p-0 overflow-visible"
-              @mouseover="onListMouseEnter"
-              @mouseout="onListMouseLeave"
-              @click="onListClick"
             >
               <li
                 v-for="contributor in contributors"
@@ -468,40 +264,14 @@ onBeforeUnmount(() => {
                 class="relative h-12 w-12 list-none group"
                 style="contain: layout style"
               >
-                <LinkBase
-                  v-if="!contributor.expandable"
-                  :to="contributor.html_url"
-                  :aria-label="contributor.login"
-                  no-underline
-                  no-new-tab-icon
-                  class="group relative block h-12 w-12 rounded-lg transition-transform outline-none p-0 bg-transparent"
-                >
-                  <img
-                    :src="`${contributor.avatar_url}&s=64`"
-                    :alt="$t('about.contributors.avatar', { name: contributor.login })"
-                    width="64"
-                    height="64"
-                    class="w-12 h-12 rounded-lg ring-2 ring-transparent transition-shadow duration-200 hover:ring-accent"
-                  />
-                  <span
-                    class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
-                    dir="ltr"
-                    role="tooltip"
-                  >
-                    @{{ contributor.login }}
-                  </span>
-                </LinkBase>
                 <button
-                  v-else
-                  type="button"
-                  aria-expanded="false"
                   :data-cid="contributor.id"
-                  :aria-label="contributor.login"
-                  class="group relative block h-12 w-12 rounded-lg transition-transform duration-200 outline-none p-0 border-none cursor-pointer bg-transparent"
+                  class="group relative block h-12 w-12 rounded-lg transition-transform outline-none p-0 bg-transparent"
+                  interestfor="contributor-hovercard"
                 >
                   <img
                     :src="`${contributor.avatar_url}&s=64`"
-                    :alt="$t('about.contributors.avatar', { name: contributor.login })"
+                    :alt="contributor.login"
                     width="64"
                     height="64"
                     class="w-12 h-12 rounded-lg ring-2 ring-transparent transition-shadow duration-200 hover:ring-accent"
@@ -515,217 +285,180 @@ onBeforeUnmount(() => {
       </section>
     </article>
 
-    <Transition name="pop">
+    <article
+      id="contributor-hovercard"
+      popover="hint"
+      aria-labelledby="contributor-hovercard-title"
+      class="contributor-hovercard"
+      @beforetoggle="onBeforeToggleHoverCard"
+    >
       <div
         v-if="activeContributor"
-        id="contributor-popover"
-        ref="panelRef"
-        data-popover-panel
-        role="group"
-        tabindex="-1"
-        :aria-label="activeContributor.name || activeContributor.login"
-        class="contributor-popover"
-        :class="`align-${popoverPos.align}`"
-        :style="{ top: `${popoverPos.top}px`, left: `${popoverPos.left}px` }"
-        @mouseleave="onPanelMouseLeave"
-        @keydown="onPanelKeydown"
+        class="flex flex-col gap-y-3 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
       >
-        <div
-          class="flex flex-col gap-y-3 w-64 rounded-xl border border-border-subtle bg-bg-elevated p-4 shadow-2xl text-start"
-        >
-          <div class="flex flex-col gap-2 min-w-0">
-            <span class="w-full font-sans font-bold text-fg leading-tight truncate block">
-              {{ activeContributor.name || activeContributor.login }}
-            </span>
-            <div
-              v-if="roleLabels[activeContributor.role]"
-              class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
-            >
-              {{ roleLabels[activeContributor.role] }}
-            </div>
-            <p
-              v-if="activeContributor.bio"
-              class="font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
-            >
-              "{{ activeContributor.bio }}"
-            </p>
-            <div
-              v-if="activeContributor.companyHTML"
-              class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
-            >
-              <div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
-              <div
-                class="leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline)"
-                v-html="activeContributor.companyHTML"
-              />
-            </div>
+        <div class="flex flex-col gap-2 min-w-0">
+          <h4
+            id="contributor-hovercard-title"
+            class="w-full font-sans font-bold text-fg leading-tight truncate block"
+          >
+            {{ activeContributor.name || activeContributor.login }}
+          </h4>
+          <div
+            v-if="roleLabels[activeContributor.role]"
+            class="font-mono text-3xs uppercase tracking-wider text-accent font-bold"
+          >
+            {{ roleLabels[activeContributor.role] }}
+          </div>
+          <p
+            v-if="activeContributor.bio"
+            class="font-sans text-xs text-fg-subtle line-clamp-3 leading-relaxed"
+          >
+            "{{ activeContributor.bio }}"
+          </p>
+          <div
+            v-if="activeContributor.companyHTML"
+            class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
+          >
+            <div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
             <div
-              v-else-if="activeContributor.company"
-              class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
-            >
-              <div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
-              <span>{{ activeContributor.company }}</span>
-            </div>
+              class="leading-relaxed break-words min-w-0 [&_a]:(text-accent no-underline hover:underline)"
+              v-html="activeContributor.companyHTML"
+            />
           </div>
-
-          <div class="flex flex-col gap-2 text-3xs text-fg-subtle font-sans">
-            <div v-if="activeContributor.location" class="flex items-center gap-1">
-              <div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
-              <span class="truncate">{{ activeContributor.location }}</span>
-            </div>
-            <a
-              v-if="activeContributor.websiteUrl"
-              :href="activeContributor.websiteUrl"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1 hover:text-accent transition-colors"
-            >
-              <div class="i-lucide:link size-3 shrink-0" aria-hidden="true" />
-              <span class="truncate">{{
-                activeContributor.websiteUrl.replace(/^https?:\/\//, '')
-              }}</span>
-            </a>
-            <a
-              v-if="activeContributor.twitterUsername"
-              :href="`https://x.com/${activeContributor.twitterUsername}`"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1 hover:text-accent transition-colors"
-            >
-              <div class="i-simple-icons:x size-2.5 shrink-0" aria-hidden="true" />
-              <span>@{{ activeContributor.twitterUsername }}</span>
-            </a>
-            <a
-              v-if="activeContributor.blueskyHandle"
-              :href="`https://bsky.app/profile/${activeContributor.blueskyHandle}`"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1 hover:text-accent transition-colors"
-            >
-              <div class="i-simple-icons:bluesky size-2.5 shrink-0" aria-hidden="true" />
-              <span>@{{ activeContributor.blueskyHandle }}</span>
-            </a>
-            <a
-              v-if="activeContributor.mastodonUrl"
-              :href="activeContributor.mastodonUrl"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1 hover:text-accent transition-colors"
-            >
-              <div class="i-simple-icons:mastodon size-2.5 shrink-0" aria-hidden="true" />
-              <span class="truncate">{{
-                activeContributor.mastodonUrl.replace(/^https?:\/\//, '').replace(/\/@?/, '@')
-              }}</span>
-            </a>
+          <div
+            v-else-if="activeContributor.company"
+            class="flex items-center gap-1 font-sans text-2xs text-fg-muted min-w-0"
+          >
+            <div class="i-lucide:building-2 size-3 shrink-0 text-accent/80" aria-hidden="true" />
+            <span>{{ activeContributor.company }}</span>
           </div>
+        </div>
 
-          <div class="flex items-center justify-between border-t border-border-subtle pt-3">
-            <a
-              :href="activeContributor.html_url"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-3xs text-fg-subtle font-mono hover:text-accent"
-            >
-              @{{ activeContributor.login }}
-            </a>
-
-            <a
-              v-if="activeContributor.sponsors_url"
-              :href="activeContributor.sponsors_url"
-              :aria-label="$t('about.team.sponsor_aria', { name: activeContributor.login })"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
-            >
-              <span class="i-lucide:heart size-3" aria-hidden="true" />
-              <span>{{ $t('about.team.sponsor') }}</span>
-            </a>
+        <div class="flex flex-col gap-2 text-3xs text-fg-subtle font-sans">
+          <div v-if="activeContributor.location" class="flex items-center gap-1">
+            <div class="i-lucide:map-pin size-3 shrink-0" aria-hidden="true" />
+            <span class="truncate">{{ activeContributor.location }}</span>
           </div>
+          <a
+            v-if="activeContributor.websiteUrl"
+            :href="activeContributor.websiteUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1 hover:text-accent transition-colors"
+          >
+            <div class="i-lucide:link size-3 shrink-0" aria-hidden="true" />
+            <span class="truncate">{{
+              activeContributor.websiteUrl.replace(/^https?:\/\//, '')
+            }}</span>
+          </a>
+          <a
+            v-if="activeContributor.twitterUsername"
+            :href="`https://x.com/${activeContributor.twitterUsername}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1 hover:text-accent transition-colors"
+          >
+            <div class="i-simple-icons:x size-2.5 shrink-0" aria-hidden="true" />
+            <span>@{{ activeContributor.twitterUsername }}</span>
+          </a>
+          <a
+            v-if="activeContributor.blueskyHandle"
+            :href="`https://bsky.app/profile/${activeContributor.blueskyHandle}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1 hover:text-accent transition-colors"
+          >
+            <div class="i-simple-icons:bluesky size-2.5 shrink-0" aria-hidden="true" />
+            <span>@{{ activeContributor.blueskyHandle }}</span>
+          </a>
+          <a
+            v-if="activeContributor.mastodonUrl"
+            :href="activeContributor.mastodonUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1 hover:text-accent transition-colors"
+          >
+            <div class="i-simple-icons:mastodon size-2.5 shrink-0" aria-hidden="true" />
+            <span class="truncate">{{
+              activeContributor.mastodonUrl.replace(/^https?:\/\//, '').replace(/\/@?/, '@')
+            }}</span>
+          </a>
+        </div>
+
+        <div class="flex items-center justify-between border-t border-border-subtle pt-3">
+          <a
+            :href="activeContributor.html_url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-3xs text-fg-subtle font-mono hover:text-accent"
+          >
+            @{{ activeContributor.login }}
+          </a>
+
+          <a
+            v-if="activeContributor.sponsors_url"
+            :href="activeContributor.sponsors_url"
+            :aria-label="$t('about.team.sponsor_aria', { name: activeContributor.login })"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-1 rounded border border-purple-700/30 bg-purple-700/5 text-purple-700 dark:border-purple-300/30 dark:bg-purple-300/5 dark:text-purple-300 px-2 py-0.5 text-4xs font-bold uppercase tracking-wider transition-colors hover:bg-purple-700/15 dark:hover:bg-purple-300/15"
+          >
+            <span class="i-lucide:heart size-3" aria-hidden="true" />
+            <span>{{ $t('about.team.sponsor') }}</span>
+          </a>
         </div>
       </div>
-    </Transition>
+    </article>
   </main>
 </template>
 
 <style scoped>
-[data-cid] img {
-  transition:
-    box-shadow 100ms ease,
-    transform 200ms ease;
-}
+[data-cid] {
+  img {
+    transition:
+      box-shadow 100ms ease,
+      transform 200ms ease;
+  }
 
-[data-cid][aria-expanded='true'] img {
-  @apply ring-2 ring-accent;
-  transform: scale(1.1);
-  --un-ring-opacity: 1;
-  --un-ring-color: color-mix(in srgb, var(--accent) var(--un-ring-opacity), transparent);
-  box-shadow: 0 0 0 2px var(--un-ring-color);
-}
+  &:interest-source {
+    anchor-name: --contributor-link;
+  }
 
-@media (hover: hover) {
-  [data-cid]:hover img,
-  [data-cid][aria-expanded='true'] img {
+  &:is(:hover, :interest-source) img {
     transform: scale(1.1);
     --un-ring-opacity: 1;
     --un-ring-color: color-mix(in srgb, var(--accent) var(--un-ring-opacity), transparent);
     box-shadow: 0 0 0 2px var(--un-ring-color);
   }
-}
 
-/* Capture tap/click (focus without keyboard navigation => for chrome tap) */
-[data-cid]:focus:not(:focus-visible) img,
-[data-cid]:focus-visible img {
-  transform: scale(1.1);
-  --un-ring-opacity: 1;
-  --un-ring-color: color-mix(in srgb, var(--accent) var(--un-ring-opacity), transparent);
-  box-shadow: 0 0 0 2px var(--un-ring-color);
-}
+  &:focus-visible {
+    outline: none;
+    z-index: 20;
 
-[data-cid]:focus-visible {
-  outline: none;
-  z-index: 20;
+    img {
+      transform: scale(1.1);
+      --un-ring-opacity: 1;
+      --un-ring-color: color-mix(in srgb, var(--accent) var(--un-ring-opacity), transparent);
+      box-shadow: 0 0 0 2px var(--un-ring-color);
+    }
+  }
 }
 
-/* FF popup outline */
-.contributor-popover:focus {
-  outline: none;
-}
+.contributor-hovercard:interest-target {
+  inset: unset;
+  margin: 8px;
 
-.contributor-popover {
   position: fixed;
-  z-index: 9999;
-  transform: translateX(-50%);
-  /* GPU layer: avoid repaints in the main thread */
-  will-change: opacity;
-  contain: layout style;
-  /* Remove focus outline from container:
-     don't remove important to fix FF outline
-  */
-  outline: none !important;
-  /* same computePos GAP */
-  padding-top: 8px;
-  margin-top: -8px;
-}
+  position-anchor: --contributor-link;
+  position-area: block-end center;
+  position-try-fallbacks: block-start;
 
-.contributor-popover.align-left {
-  transform: translateX(0);
-}
-.contributor-popover.align-right {
-  transform: translateX(-100%);
-}
+  background-color: transparent;
 
-.pop-enter-active {
-  transition:
-    opacity 100ms ease-out,
-    transform 120ms ease-out;
-}
-.pop-leave-active {
-  transition: opacity 60ms ease-in;
-}
-.pop-enter-from {
-  opacity: 0;
-}
-.pop-leave-to {
-  opacity: 0;
+  transition: opacity 100ms ease-out;
+
+  @starting-style {
+    opacity: 0;
+  }
 }
 </style>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 8ecbae3b3..d3543acfb 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -905,6 +905,9 @@
     "title": "About",
     "heading": "about",
     "meta_description": "npmx is a fast, modern browser for the npm registry. A better UX/DX for exploring npm packages.",
+    "skip_sponsors": "Skip sponsors list",
+    "skip_oss_partners": "Skip open source partners list",
+    "skip_contributors": "Skip contributors list",
     "what_we_are": {
       "title": "What we are",
       "better_ux_dx": "better UX/DX",
diff --git a/i18n/schema.json b/i18n/schema.json
index 9bc4956d5..1b3e62c78 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2719,6 +2719,15 @@
         "meta_description": {
           "type": "string"
         },
+        "skip_sponsors": {
+          "type": "string"
+        },
+        "skip_oss_partners": {
+          "type": "string"
+        },
+        "skip_contributors": {
+          "type": "string"
+        },
         "what_we_are": {
           "type": "object",
           "properties": {