Add liquid glass filter definitions to site layout

app/layout.tsx

@@ -21,6 +21,7 @@ import "./community.css";
 import "./community-social.css";
 import "./cinematic-intro.css";
 import "./tournaments.css";
+import "./site-glass.css";
 import { themeInitScript } from "@/shared/theme";
 import { SiteSettingsProvider } from "@/components/SiteSettingsProvider";
 import { initialSiteSettings } from "@/lib/site-settings";
@@ -52,6 +53,64 @@ export default async function RootLayout({
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>
       <body>
+        <svg
+          aria-hidden="true"
+          className="site-filter-definitions"
+          focusable="false"
+        >
+          <defs>
+            <filter
+              id="liquid-glass-distortion"
+              x="-10%"
+              y="-20%"
+              width="120%"
+              height="140%"
+              colorInterpolationFilters="sRGB"
+            >
+              <feTurbulence
+                type="fractalNoise"
+                baseFrequency="0.012 0.055"
+                numOctaves={2}
+                seed={7}
+                result="glass-noise"
+              />
+              <feGaussianBlur
+                in="glass-noise"
+                stdDeviation="2.5"
+                result="soft-glass-noise"
+              />
+              <feDisplacementMap
+                in="SourceGraphic"
+                in2="soft-glass-noise"
+                scale={18}
+                xChannelSelector="R"
+                yChannelSelector="G"
+                result="refracted-backdrop"
+              />
+              <feSpecularLighting
+                in="soft-glass-noise"
+                surfaceScale={3}
+                specularConstant={0.55}
+                specularExponent={32}
+                lightingColor="#fff"
+                result="glass-highlight"
+              >
+                <feDistantLight azimuth={315} elevation={55} />
+              </feSpecularLighting>
+              <feComposite
+                in="glass-highlight"
+                in2="SourceAlpha"
+                operator="in"
+                result="bounded-highlight"
+              />
+              <feBlend
+                in="refracted-backdrop"
+                in2="bounded-highlight"
+                mode="screen"
+              />
+            </filter>
+          </defs>
+        </svg>
         <a className="skip-link" href="#main-content">
           {t("Skip to content")}
         </a>

app/site-glass.css

@@ -0,0 +1,173 @@
+/* A restrained frosted-glass treatment for the shared site navigation. */
+.site-header {
+  --site-header-glass: rgb(8 11 16 / 0.78);
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 40;
+  background: var(--bg);
+  border-bottom-color: rgb(235 242 250 / 0.14);
+  box-shadow:
+    inset 0 1px rgb(255 255 255 / 0.055),
+    0 8px 24px rgb(3 6 10 / 0.12);
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .site-header {
+    background: var(--site-header-glass);
+    backdrop-filter: blur(7px) saturate(135%);
+    -webkit-backdrop-filter: blur(7px) saturate(135%);
+  }
+}
+
+@supports (backdrop-filter: url("#liquid-glass-distortion")) {
+  .site-header {
+    backdrop-filter: url("#liquid-glass-distortion") blur(5px) saturate(135%);
+  }
+}
+
+@supports (-webkit-backdrop-filter: url("#liquid-glass-distortion")) {
+  .site-header {
+    -webkit-backdrop-filter: url("#liquid-glass-distortion") blur(5px)
+      saturate(135%);
+  }
+}
+
+html[data-theme="light"] .site-header {
+  --site-header-glass: rgb(246 249 242 / 0.78);
+  border-bottom-color: rgb(52 76 43 / 0.18);
+  box-shadow:
+    inset 0 1px rgb(255 255 255 / 0.72),
+    0 8px 24px rgb(39 58 33 / 0.08);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .site-header {
+    background: var(--bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .site-header::before {
+    display: none;
+  }
+}
+
+.site-header::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(
+      112deg,
+      rgb(255 255 255 / 0.09),
+      transparent 24%,
+      transparent 76%,
+      rgb(255 255 255 / 0.035)
+    ),
+    linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 70%);
+}
+
+.site-header .header-inner {
+  position: relative;
+  z-index: 1;
+}
+
+html[data-theme="light"] .site-header::before {
+  background:
+    linear-gradient(
+      112deg,
+      rgb(255 255 255 / 0.55),
+      transparent 24%,
+      transparent 76%,
+      rgb(255 255 255 / 0.18)
+    ),
+    linear-gradient(180deg, rgb(255 255 255 / 0.34), transparent 70%);
+}
+
+.site-filter-definitions {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Keep the secondary support label quiet until someone points to or focuses it. */
+.header-report {
+  position: relative;
+}
+
+.header-report > span {
+  display: block;
+  position: absolute;
+  inset-block-start: calc(100% + 9px);
+  inset-inline-start: 50%;
+  z-index: 2;
+  max-width: min(14rem, calc(100vw - 24px));
+  padding: 6px 9px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--panel);
+  box-shadow: 0 5px 16px rgb(3 6 10 / 0.2);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1.35;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translate(-50%, -3px);
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease,
+    visibility 140ms ease;
+}
+
+.header-report:is(:hover, :focus-visible) > span {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+/* The header icon carries this action above phone width, so avoid a duplicate menu row. */
+@media (max-width: 1200px) and (min-width: 601px) {
+  .site-navigation .nav-support {
+    display: none;
+  }
+}
+
+/* Touch screens cannot reveal hover labels; keep the action clear there. */
+@media (hover: none) {
+  .header-report > span {
+    position: static;
+    max-width: none;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}
+
+@media (hover: none) and (max-width: 1000px) {
+  .header-report {
+    width: auto;
+    padding-inline: 8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-header,
+  .header-report > span {
+    transition: none;
+  }
+}

components/ReportBugButton.tsx

@@ -13,7 +13,7 @@ export function ReportBugButton() {
       aria-label={t("Report a bug")}
     >
       <Bug size={18} aria-hidden="true" />
-      <span>{t("Report a bug")}</span>
+      <span aria-hidden="true">{t("Report a bug")}</span>
     </Link>
   );
 }