Strengthen mobile navbar blur

CHANGELOG.md

@@ -16,6 +16,9 @@ All notable changes to the New Optic website will be documented in this file.
 - Tightened mobile sizing for the WhatsApp nav pill and hero trust badge.
 - Balanced mobile navbar controls so the language switcher, WhatsApp CTA, and menu do not bunch up on the right.
 - Reduced the mobile gap between the reputation section and contact panel.
+- Let the mobile WhatsApp nav CTA stretch into available navbar space.
+- Restored mobile glass blur and premium highlight layers instead of flattening glass surfaces.
+- Added a dedicated stronger blur treatment for the mobile top navigation bar.
 
 ## [1.0.0] - 2026-05-16
 

app/globals.css

@@ -86,7 +86,8 @@ a {
   background: rgba(255, 255, 255, 0.68);
   border: 1px solid rgba(255, 255, 255, 0.72);
   box-shadow: 0 18px 60px rgba(17, 19, 23, 0.08);
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px) saturate(1.22);
+  -webkit-backdrop-filter: blur(24px) saturate(1.22);
 }
 
 .premium-glass::before {
@@ -115,6 +116,12 @@ a {
     inset 18px 0 34px rgba(255, 255, 255, 0.12);
 }
 
+.nav-glass {
+  background: rgba(255, 255, 255, 0.62);
+  backdrop-filter: blur(30px) saturate(1.32);
+  -webkit-backdrop-filter: blur(30px) saturate(1.32);
+}
+
 .hairline {
   background: linear-gradient(90deg, transparent, rgba(17, 19, 23, 0.15), transparent);
   height: 1px;
@@ -172,25 +179,21 @@ a {
     display: none;
   }
 
-  .floating-sheen {
-    animation: none;
-    opacity: 0;
-  }
-
-  .glass,
-  [class*="backdrop-blur"] {
-    backdrop-filter: none !important;
-    -webkit-backdrop-filter: none !important;
-  }
-
   .glass {
-    background: rgba(255, 255, 255, 0.86);
+    background: rgba(255, 255, 255, 0.72);
-    box-shadow: 0 10px 30px rgba(17, 19, 23, 0.07);
+    box-shadow: 0 14px 34px rgba(17, 19, 23, 0.08);
+    backdrop-filter: blur(18px) saturate(1.24);
+    -webkit-backdrop-filter: blur(18px) saturate(1.24);
   }
 
-  .premium-glass::before,
+  .nav-glass {
-  .premium-glass::after {
+    background: rgba(255, 255, 255, 0.58);
-    display: none;
+    border-color: rgba(255, 255, 255, 0.86);
+    box-shadow:
+      0 14px 36px rgba(17, 19, 23, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.78);
+    backdrop-filter: blur(26px) saturate(1.38);
+    -webkit-backdrop-filter: blur(26px) saturate(1.38);
   }
 
   main > section {

components/Navbar.tsx

@@ -27,7 +27,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 max-[374px]:px-2.5 sm:px-6">
-      <nav className="glass premium-glass mx-auto flex max-w-7xl items-center justify-start gap-2 rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 md:justify-between sm:px-5" aria-label="Main navigation">
+      <nav className="glass premium-glass nav-glass relative mx-auto flex max-w-7xl items-center justify-start gap-2 overflow-hidden rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 md:justify-between sm:px-5" aria-label="Main navigation">
         <a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex shrink-0 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 max-[374px]:size-9">
             <Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />
@@ -48,9 +48,9 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
           </PhysicsButton>
         </div>
 
-        <div className="relative z-[3] flex min-w-0 flex-1 items-center justify-between gap-1 max-[374px]:gap-0.5 sm:gap-2 md:hidden">
+        <div className="relative z-[3] flex min-w-0 flex-1 items-center gap-1.5 max-[374px]:gap-0.5 sm:gap-2 md:hidden">
-          <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="min-w-[108px] max-w-[132px] flex-1 bg-white/80 backdrop-blur-none max-[374px]:min-w-[96px] max-[374px]:max-w-[108px] max-[374px]:p-0.5" buttonClassName="flex-1 px-0.5 max-[374px]:px-0 max-[374px]:py-1.5 sm:px-3" />
+          <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="w-[132px] shrink-0 bg-white/72 backdrop-blur-xl max-[374px]:w-[106px] max-[374px]:p-0.5" buttonClassName="flex-1 px-0.5 max-[374px]:px-0 max-[374px]:py-1.5 sm:px-3" />
-          <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} shrink-0 px-2.5 py-2 text-[11px] max-[374px]:px-1.5 max-[374px]:py-1.5 max-[374px]:text-[9px] sm:px-5 sm:py-2.5 sm:text-sm`}>
+          <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} min-w-0 flex-1 px-2.5 py-2 text-[11px] max-[374px]:px-1.5 max-[374px]:py-1.5 max-[374px]:text-[9px] sm:px-5 sm:py-2.5 sm:text-sm`}>
             {t.nav.cta}
           </PhysicsButton>
           <motion.button