feat(site): explain the proof gauge behind a (?) on the production wall (#1977)

A help-circle button beside "in production at": hover peeks the
explainer, click pins it open, outside click or Escape dismisses.
The panel anchors to the caption row so it never overflows narrow
viewports, and the button's padded hit area serves touch without
growing the 13px glyph.

Copy: "Every logo links to public proof and is graded on age and
code over words."

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: igalklebanov

site/src/pages/index.module.css

@@ -314,13 +314,74 @@ a.stat:hover .statValue {
   font-family: var(--ifm-font-family-monospace);
   font-size: 12px;
   letter-spacing: 0.1em;
+  position: relative;
   text-transform: uppercase;
 }
 
 .productionCaption:not(:first-child) {
   margin-top: 10px;
 }
 
+/* The (?) beside "in production at": hover peeks the gauge explainer,
+   click pins it open. The panel anchors to the caption row (not the icon)
+   so it never overflows narrow viewports. */
+.proofHelp {
+  color: var(--kl-faint);
+  display: inline-block;
+  margin-left: 7px;
+  vertical-align: -2px;
+}
+
+/* Padding grows the tap target to ~29px; the negative margin keeps the
+   13px glyph optically in place. */
+.proofHelpButton {
+  color: inherit;
+  cursor: help;
+  display: block;
+  margin: -8px;
+  padding: 8px;
+}
+
+.proofHelpButton svg {
+  display: block;
+  height: 13px;
+  width: 13px;
+}
+
+.proofHelp:hover,
+.proofHelpOpen {
+  color: var(--kl-mut);
+}
+
+.proofHelpPanel {
+  background: var(--kl-panel);
+  border: 1px solid var(--kl-line);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px var(--kl-shadow);
+  color: var(--kl-text2);
+  font-family: var(--ifm-font-family-base);
+  font-size: 12.5px;
+  left: 0;
+  letter-spacing: normal;
+  line-height: 1.6;
+  opacity: 0;
+  padding: 10px 12px;
+  pointer-events: none;
+  position: absolute;
+  text-transform: none;
+  top: calc(100% + 8px);
+  transition: opacity 0.15s ease;
+  width: 320px;
+  max-width: 80vw;
+  z-index: 10;
+}
+
+.proofHelp:hover .proofHelpPanel,
+.proofHelpOpen .proofHelpPanel {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .productionNames {
   align-items: stretch;
   display: flex;

site/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { JSX, useEffect, useState } from 'react'
+import React, { JSX, useEffect, useRef, useState } from 'react'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import clsx from 'clsx'
@@ -391,12 +391,77 @@ const LOGO_WITH_NAME = new Set([
 ])
 
 function SectionProduction() {
+  const [helpOpen, setHelpOpen] = useState(false)
+  const helpRef = useRef<HTMLSpanElement>(null)
+
+  // Hover peeks the explainer; a click pins it open until a click lands
+  // outside or Escape is pressed.
+  useEffect(() => {
+    if (!helpOpen) {
+      return
+    }
+
+    const onClick = (event: MouseEvent) => {
+      if (!helpRef.current?.contains(event.target as Node)) {
+        setHelpOpen(false)
+      }
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setHelpOpen(false)
+      }
+    }
+
+    document.addEventListener('click', onClick)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('click', onClick)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [helpOpen])
+
   return (
     <section className={styles.production}>
       <div className={clsx('container', styles.productionInner)}>
         {PROOF_GROUPS.map(({ group, caption }) => (
           <React.Fragment key={group}>
-            <span className={styles.productionCaption}>{caption}</span>
+            <span className={styles.productionCaption}>
+              {caption}
+              {group === 'production' && (
+                <span
+                  ref={helpRef}
+                  className={clsx(
+                    styles.proofHelp,
+                    helpOpen && styles.proofHelpOpen,
+                  )}
+                >
+                  <button
+                    aria-expanded={helpOpen}
+                    aria-label="How proof is graded"
+                    className={clsx('clean-btn', styles.proofHelpButton)}
+                    onClick={() => setHelpOpen((open) => !open)}
+                    type="button"
+                  >
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle cx="12" cy="12" r="10" />
+                      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                      <path d="M12 17h.01" />
+                    </svg>
+                  </button>
+                  <span role="tooltip" className={styles.proofHelpPanel}>
+                    Every logo links to public proof and is graded on age and
+                    code over words.
+                  </span>
+                </span>
+              )}
+            </span>
             <span className={styles.productionNames}>
               {proofEntries
                 .filter((entry) => entry.group === group)