Strengthen mobile navbar blur

This reverts commit e69e20f753, reversing
changes made to 0ac37261a8.

CHANGELOG.md

@@ -6,11 +6,19 @@ All notable changes to the New Optic website will be documented in this file.
 
 ### Changed
 
+- Added a New York-style display font stack for large latin headings while keeping SF-style UI text.
+- Switched the latin typography to an SF Pro-style system font stack for a more Apple-like feel.
 - 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.
 - Replaced the mobile hamburger dropdown with a fast, solid menu animation without bounce or stretch effects.
 - Kept the language switcher visible in the mobile top navigation bar.
 - Added cursor-reactive stretch motion to desktop nav links and matched the glossy dark WhatsApp CTA style on mobile.
 - Corrected the French 2004 trust wording to use "depuis" without "autour de".
+- 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

@@ -6,6 +6,8 @@
   color-scheme: light;
   --bg: #f6f5f2;
   --ink: #111317;
+  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-display: "New York Large", "New York", "NewYork", ui-serif, Georgia, Cambria, "Times New Roman", serif;
 }
 
 * {
@@ -24,7 +26,7 @@ body {
     url('/assets/New-optic-BG-mobile.webp') center top / cover scroll,
     linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
   color: var(--ink);
-  font-family: var(--font-sans), system-ui, sans-serif;
+  font-family: var(--font-sans);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
@@ -67,6 +69,10 @@ body[dir="rtl"] {
   font-family: var(--font-arabic), system-ui, sans-serif;
 }
 
+body:not([dir="rtl"]) :where(h1, h2) {
+  font-family: var(--font-display);
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -80,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 {
@@ -109,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;
@@ -166,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 {

app/layout.tsx

@@ -1,10 +1,9 @@
 import type { Metadata } from "next";
-import { Inter, Noto_Kufi_Arabic } from "next/font/google";
+import { Noto_Kufi_Arabic } from "next/font/google";
 import "./globals.css";
 import { business } from "@/config/business";
 import { fr } from "@/messages/fr";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap" });
 const arabic = Noto_Kufi_Arabic({ subsets: ["arabic"], variable: "--font-arabic", display: "swap" });
 
 export const metadata: Metadata = {
@@ -28,7 +27,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="fr" className={`${inter.variable} ${arabic.variable} scroll-smooth`}>
+    <html lang="fr" className={`${arabic.variable} scroll-smooth`}>
       <body>
         {children}
       </body>

components/ContactSection.tsx

@@ -7,7 +7,7 @@ import PhysicsButton from "./PhysicsButton";
 
 export default function ContactSection({ t, whatsappUrl }: { t: Messages; whatsappUrl: string }) {
   return (
-    <AnimatedSection id="contact" className="px-4 py-20 sm:px-6">
+    <AnimatedSection id="contact" className="px-4 pb-16 pt-6 sm:px-6 sm:py-20">
       <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[1.08fr_0.92fr]">
         <div className="rounded-[3rem] bg-white p-8 shadow-glass sm:p-12">
           <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-optical/75">{t.contact.eyebrow}</p>

components/HeroSection.tsx

@@ -29,9 +29,9 @@ export default function HeroSection({ t, whatsappUrl }: { t: Messages; whatsappU
       <motion.div className="absolute left-1/2 top-24 hidden h-72 w-72 -translate-x-1/2 rounded-full bg-optical/10 blur-3xl lg:block" animate={canAnimateIntro ? { scale: [1, 1.16, 1], opacity: [0.55, 0.88, 0.55] } : undefined} transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }} />
       <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[1fr_0.92fr]">
         <motion.div initial={canAnimateIntro ? { opacity: 0, y: 24 } : false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }} className="relative z-10 text-center lg:text-start">
-          <div className="mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-ink/10 bg-white/65 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-ink/60 shadow-sm backdrop-blur lg:mx-0">
+          <div className="mx-auto mb-5 inline-flex max-w-full items-center gap-1.5 rounded-full border border-ink/10 bg-white/65 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-ink/60 shadow-sm backdrop-blur max-[374px]:px-2.5 max-[374px]:text-[9px] max-[374px]:tracking-[0.08em] sm:mb-6 sm:gap-2 sm:px-4 sm:py-2 sm:text-xs sm:tracking-[0.18em] lg:mx-0">
-            <ShieldCheck size={15} className="text-optical" />
+            <ShieldCheck className="size-3.5 shrink-0 text-optical sm:size-[15px]" />
-            {t.hero.eyebrow}
+            <span className="whitespace-nowrap leading-4">{t.hero.eyebrow}</span>
           </div>
           <h1 className="mx-auto max-w-4xl text-5xl font-semibold tracking-[-0.075em] text-ink sm:text-7xl lg:mx-0 lg:text-8xl">{t.hero.title}</h1>
           <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-ink/64 sm:text-xl lg:mx-0">{t.hero.subtitle}</p>

components/Navbar.tsx

@@ -26,10 +26,10 @@ 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">
+    <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-between gap-2 rounded-full px-3 py-3 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 items-center gap-3" aria-label="New Optic home">
+        <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">
+          <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 />
           </span>
           <span className="hidden text-sm font-semibold tracking-[-0.02em] xs:inline sm:inline">{business.name}</span>
@@ -48,9 +48,9 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
           </PhysicsButton>
         </div>
 
-        <div className="relative z-[3] flex items-center 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="bg-white/80 backdrop-blur-none" buttonClassName="px-2 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} px-3 py-2.5 text-xs max-[374px]:hidden sm:px-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
@@ -58,7 +58,7 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
             onClick={() => setOpen((value) => !value)}
             whileTap={{ scale: 0.94 }}
             transition={{ duration: 0.08 }}
-            className="grid size-11 place-items-center rounded-full bg-white/70 text-ink outline-none transition focus-visible:ring-2 focus-visible:ring-optical/45 focus-visible:ring-offset-2"
+            className="grid size-11 shrink-0 place-items-center rounded-full bg-white/70 text-ink outline-none transition max-[374px]:size-9 focus-visible:ring-2 focus-visible:ring-optical/45 focus-visible:ring-offset-2"
             aria-label={t.nav.menu}
             aria-expanded={open}
           >

components/TrustSection.tsx

@@ -5,7 +5,7 @@ import SectionHeader from "./SectionHeader";
 
 export default function TrustSection({ t }: { t: Messages }) {
   return (
-    <AnimatedSection id="trust" className="px-4 py-20 sm:px-6">
+    <AnimatedSection id="trust" className="px-4 pb-8 pt-16 sm:px-6 sm:py-20">
       <div className="mx-auto max-w-7xl overflow-hidden rounded-[3rem] bg-ink p-8 text-white shadow-glass sm:p-12 lg:p-16">
         <SectionHeader eyebrow={t.trust.eyebrow} title={t.trust.title} body={t.trust.body} tone="dark" />
         <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 } } }}>

tailwind.config.ts

@@ -11,7 +11,8 @@ const config: Config = {
         optical: "#315f8f"
       },
       fontFamily: {
-        sans: ["var(--font-sans)", "Inter", "system-ui", "sans-serif"],
+        sans: ["var(--font-sans)"],
+        display: ["var(--font-display)"],
         arabic: ["var(--font-arabic)", "system-ui", "sans-serif"]
       },
       boxShadow: {