Fix desktop glass rendering artifacts

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the New Optic website will be documented in this file.
 
+## Unreleased
+
+### Changed
+
+- Removed the desktop liquid glass WebGL layer from navbar and CTA controls so text remains readable and glass surfaces do not show dark rendering artifacts while scrolling.
+
 ## [1.0.0] - 2026-05-16
 
 ### Added

components/LiquidGlass.tsx

@@ -20,6 +20,7 @@ export default function LiquidGlass() {
     const isMobileUserAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i.test(userAgent);
     const hasCoarsePrimaryPointer = window.matchMedia("(pointer: coarse)").matches;
     if (isMobileUserAgent || hasCoarsePrimaryPointer) return;
+    if (!document.querySelector(".liquidGL-pane")) return;
 
     let cancelled = false;
     let attempts = 0;

components/Navbar.tsx

@@ -24,7 +24,7 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
 
   return (
     <header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6">
-      <nav className="glass premium-glass liquidGL-pane mx-auto flex max-w-7xl items-center justify-between gap-2 rounded-full px-3 py-3 sm:px-5" aria-label="Main navigation">
+      <nav className="glass premium-glass mx-auto flex max-w-7xl items-center justify-between gap-2 rounded-full px-3 py-3 sm:px-5" aria-label="Main navigation">
         <a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex items-center gap-3" aria-label="New Optic home">
           <span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm">
             <Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />

components/PhysicsButton.tsx

@@ -70,7 +70,7 @@ export default function PhysicsButton({ href, children, className, external = fa
       whileHover={{ scale: 1.035 }}
       style={{ x, y, scaleX, scaleY, rotate }}
       transition={{ type: "spring", stiffness: 520, damping: 18, mass: 0.45 }}
-      className={cn("premium-glass liquidGL-pane group relative inline-flex touch-manipulation select-none items-center justify-center overflow-hidden will-change-transform", className)}
+      className={cn("premium-glass group relative inline-flex touch-manipulation select-none items-center justify-center overflow-hidden will-change-transform", className)}
     >
       <motion.span
         className="pointer-events-none absolute inset-0 rounded-full bg-white/15 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100"