Refine desktop glass effects

CHANGELOG.md

@@ -24,6 +24,8 @@ All notable changes to the New Optic website will be documented in this file.
 
 ### Changed
 
+- Re-enabled liquid glass on desktop PCs using user-agent and pointer capability detection, while keeping it disabled on phones and tablets.
+- Changed trust stat label accent from blue to a softer neutral white tone.
 - Refined contact and trust UI: stat labels are now accented above values, French WhatsApp CTA says "Discuter sur WhatsApp", hours information is emphasized, and mobile navbar shows WhatsApp without opening the menu.
 - Updated customer-corrected business facts: New Optic is active since around 2004, does not offer eye exams, and offers contact lenses plus colored contact lenses.
 - Optimized mobile rendering by disabling heavy blur, fixed backgrounds, ambient animations, and WebGL glass below desktop widths.

components/HeroSection.tsx

@@ -65,7 +65,7 @@ export default function HeroSection({ t, whatsappUrl }: { t: Messages; whatsappU
           className="relative mx-auto w-full max-w-xl lg:max-w-none lg:will-change-transform"
         >
           <div className="absolute -inset-6 hidden rounded-[3rem] bg-gradient-to-br from-optical/14 via-white/0 to-silver/45 blur-2xl lg:block" />
-          <div className="glass relative overflow-hidden rounded-[2.6rem] p-3">
+          <div className="glass liquidGL-pane relative overflow-hidden rounded-[2.6rem] p-3">
             <span className="floating-sheen" />
             <div className="relative aspect-[4/3] overflow-hidden rounded-[2rem] bg-silver/40">
               <Image src={business.assets.hero} alt={t.hero.imageAlt} fill sizes="(min-width: 1024px) 45vw, 92vw" className="object-cover" priority />

components/LiquidGlass.tsx

@@ -15,7 +15,11 @@ declare global {
 export default function LiquidGlass() {
   useEffect(() => {
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    if (!window.matchMedia("(min-width: 1024px)").matches) return;
+
+    const userAgent = navigator.userAgent || "";
+    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;
 
     let cancelled = false;
     let attempts = 0;
@@ -64,7 +68,7 @@ export default function LiquidGlass() {
           shadow: true,
           specular: true,
           reveal: "fade",
-          tilt: window.innerWidth >= 768,
+          tilt: true,
           tiltFactor: 3.5,
           magnify: 1.01
         });

components/TrustSection.tsx

@@ -11,7 +11,7 @@ export default function TrustSection({ t }: { t: Messages }) {
         <motion.div className="mt-12 grid gap-4 md:grid-cols-3" initial={false} whileInView="show" viewport={{ once: true, amount: 0.08 }} variants={{ show: { transition: { staggerChildren: 0.12 } } }}>
           {t.trust.stats.map((stat) => (
             <motion.div key={stat.value} variants={{ show: { opacity: 1, y: 0, scale: 1 } }} transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }} whileHover={{ y: -6 }} className="rounded-[2rem] border border-white/10 bg-white/[0.06] p-6 text-center backdrop-blur">
-              <p className="mb-4 text-xs font-semibold uppercase tracking-[0.22em] text-optical/90">{stat.label}</p>
+              <p className="mb-4 text-xs font-semibold uppercase tracking-[0.22em] text-white/64">{stat.label}</p>
               <p className="text-5xl font-semibold tracking-[-0.06em] text-white">{stat.value}</p>
             </motion.div>
           ))}