From 819a47fad728afd0f1ab06b3587b4ce741123898 Mon Sep 17 00:00:00 2001
From: oimwiodev <oimwiodev@outlook.com>
Date: Sat, 16 May 2026 14:33:15 +0100
Subject: [PATCH] Fix desktop glass rendering artifacts

---
 CHANGELOG.md                 | 6 ++++++
 components/LiquidGlass.tsx   | 1 +
 components/Navbar.tsx        | 2 +-
 components/PhysicsButton.tsx | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f02198..010705d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/components/LiquidGlass.tsx b/components/LiquidGlass.tsx
index 4a20bec..d07bc99 100644
--- a/components/LiquidGlass.tsx
+++ b/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;
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 0c9cfea..d89f66c 100644
--- a/components/Navbar.tsx
+++ b/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 />
diff --git a/components/PhysicsButton.tsx b/components/PhysicsButton.tsx
index d68ec8f..810f858 100644
--- a/components/PhysicsButton.tsx
+++ b/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"