Tighten mobile trust contact spacing

CHANGELOG.md

@@ -14,6 +14,8 @@ All notable changes to the New Optic website will be documented in this file.
 - 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.
 
 ## [1.0.0] - 2026-05-16
 

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/Navbar.tsx

@@ -27,8 +27,8 @@ 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-between gap-2 rounded-full px-3 py-3 max-[374px]:px-2 max-[374px]:py-2.5 sm:px-5" aria-label="Main navigation">
+      <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">
-        <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 max-[374px]:size-9">
             <Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />
           </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-1 max-[374px]:gap-0.5 sm:gap-2 md:hidden">
+        <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">
-          <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="bg-white/80 backdrop-blur-none max-[374px]:p-0.5" buttonClassName="px-2 max-[374px]:px-1.5 max-[374px]:py-1.5 sm:px-3" />
+          <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" />
-          <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} 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} 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`}>
             {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 max-[374px]:size-9 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 } } }}>