Fix desktop glass and hero image

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to the New Optic website will be documented in this file.
 
 ### Changed
 
+- Fixed desktop hero image visibility by removing liquid glass from image-bearing containers, while applying liquid glass to navbar/buttons and adding a stronger CSS glass fallback.
 - 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.

app/globals.css

@@ -83,6 +83,32 @@ a {
   backdrop-filter: blur(24px);
 }
 
+.premium-glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0.2)),
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.55), transparent 34%),
+    radial-gradient(circle at 82% 100%, rgba(49, 95, 143, 0.12), transparent 38%);
+  opacity: 0.72;
+  mix-blend-mode: screen;
+}
+
+.premium-glass::after {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.8),
+    inset 0 -18px 32px rgba(49, 95, 143, 0.08),
+    inset 18px 0 34px rgba(255, 255, 255, 0.12);
+}
+
 .hairline {
   background: linear-gradient(90deg, transparent, rgba(17, 19, 23, 0.15), transparent);
   height: 1px;
@@ -156,6 +182,11 @@ a {
     box-shadow: 0 10px 30px rgba(17, 19, 23, 0.07);
   }
 
+  .premium-glass::before,
+  .premium-glass::after {
+    display: none;
+  }
+
   main > section {
     content-visibility: auto;
     contain-intrinsic-size: 1px 780px;

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 liquidGL-pane relative overflow-hidden rounded-[2.6rem] p-3">
+          <div className="glass premium-glass 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/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 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 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">
         <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("group relative inline-flex touch-manipulation select-none items-center justify-center overflow-hidden will-change-transform", className)}
+      className={cn("premium-glass liquidGL-pane 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"