revue du style

index.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
       rel="stylesheet"
     />
     <title>Maison du Barbier — Salon de luxe</title>

src/components/About.jsx

@@ -32,7 +32,7 @@ export default function About() {
   return (
     <section
       id="a-propos"
-      className="border-t border-white/5 bg-barber-bg py-20 sm:py-28"
+      className="border-t border-barber-border py-20 sm:py-28"
     >
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
@@ -42,7 +42,7 @@ export default function About() {
             viewport={{ once: true, margin: '-80px' }}
             transition={{ duration: 0.55 }}
           >
-            <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+            <p className="mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
               Notre maison
             </p>
             <h2 className="font-serif text-3xl font-medium leading-tight text-barber-cream sm:text-4xl md:text-5xl">
@@ -58,7 +58,7 @@ export default function About() {
               que vous passiez pour une retouche express ou pour un après-midi « signature ».
             </p>
 
-            <dl className="mt-10 grid grid-cols-3 gap-4 border-y border-white/10 py-8">
+            <dl className="mt-10 grid grid-cols-3 gap-4 border-y border-barber-border py-8">
               {stats.map((s) => (
                 <div key={s.label} className="text-center sm:text-left">
                   <dt className="font-serif text-2xl text-barber-gold sm:text-3xl">{s.value}</dt>
@@ -75,7 +75,7 @@ export default function About() {
             transition={{ duration: 0.55, delay: 0.08 }}
             className="relative"
           >
-            <div className="overflow-hidden rounded-lg border border-white/10">
+            <div className="overflow-hidden rounded-2xl border border-barber-border shadow-[0_24px_48px_-24px_rgba(0,0,0,0.5)]">
               <img
                 src={sideImage}
                 alt="Détail d'une coupe en salon"
@@ -83,7 +83,7 @@ export default function About() {
                 className="aspect-[4/5] w-full object-cover sm:aspect-[5/6]"
               />
             </div>
-            <div className="absolute -bottom-4 -left-4 hidden max-w-xs rounded border border-barber-gold/30 bg-barber-stone/95 p-4 text-xs leading-relaxed text-barber-cream/75 backdrop-blur-sm sm:block sm:text-sm">
+            <div className="absolute -bottom-4 -left-4 hidden max-w-xs rounded-2xl border border-barber-border bg-barber-stone/90 p-4 text-xs leading-relaxed text-barber-cream/75 shadow-xl backdrop-blur-md sm:block sm:text-sm">
               « Nous ne vendons pas une coupe : nous installons une habitude de soin. »
               <span className="mt-2 block font-medium text-barber-gold">— Marc-Antoine V., directeur artistique</span>
             </div>
@@ -101,7 +101,7 @@ export default function About() {
                 viewport={{ once: true, margin: '-40px' }}
                 transition={{ delay: i * 0.08, duration: 0.45 }}
               >
-                <article className="h-full rounded-lg border border-white/10 bg-barber-stone/50 p-6">
+                <article className="h-full rounded-2xl border border-barber-border bg-barber-stone/40 p-6 backdrop-blur-sm transition-colors hover:border-barber-gold/25 hover:bg-barber-stone/55">
                   <Icon className="h-8 w-8 text-barber-gold" aria-hidden />
                   <h3 className="mt-4 font-serif text-lg text-barber-cream">{p.title}</h3>
                   <p className="mt-2 text-sm leading-relaxed text-barber-cream/60">{p.text}</p>

src/components/BackToTop.jsx

@@ -21,7 +21,7 @@ export default function BackToTop() {
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 12 }}
           transition={{ duration: 0.25 }}
-          className="fixed bottom-6 right-4 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-barber-gold/40 bg-barber-bg/90 text-barber-gold shadow-lg backdrop-blur-sm transition-colors hover:border-barber-gold hover:bg-barber-gold/10 sm:bottom-8 sm:right-6"
+          className="fixed bottom-6 right-4 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-barber-border bg-barber-bg/85 text-barber-gold shadow-[0_8px_32px_-8px_rgba(0,0,0,0.5)] backdrop-blur-xl transition-colors hover:border-barber-gold/45 hover:bg-barber-gold/10 sm:bottom-8 sm:right-6"
           aria-label="Retour en haut"
         >
           <ChevronUp className="h-5 w-5" aria-hidden />

src/components/Faq.jsx

@@ -29,7 +29,7 @@ export default function Faq() {
   const [open, setOpen] = useState(0)
 
   return (
-    <section id="faq" className="border-t border-white/5 py-20 sm:py-28">
+    <section id="faq" className="border-t border-barber-border py-20 sm:py-28">
       <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -38,7 +38,7 @@ export default function Faq() {
           transition={{ duration: 0.55 }}
           className="mb-10 text-center"
         >
-          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+          <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
             Questions fréquentes
           </p>
           <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -60,11 +60,11 @@ export default function Faq() {
                 viewport={{ once: true, margin: '-20px' }}
                 transition={{ delay: i * 0.05, duration: 0.4 }}
               >
-                <div className="overflow-hidden rounded-lg border border-white/10 bg-barber-stone/40">
+                <div className="overflow-hidden rounded-2xl border border-barber-border bg-barber-stone/35 backdrop-blur-sm">
                   <button
                     type="button"
                     aria-expanded={isOpen}
-                    className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-white/5"
+                    className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-white/[0.04]"
                     onClick={() => setOpen(isOpen ? -1 : i)}
                   >
                     <span className="text-sm font-medium text-barber-cream sm:text-base">{item.q}</span>
@@ -81,7 +81,7 @@ export default function Faq() {
                         exit={{ height: 0, opacity: 0 }}
                         transition={{ duration: 0.25 }}
                       >
-                        <p className="border-t border-white/5 px-5 pb-5 pt-4 text-sm leading-relaxed text-barber-cream/65">
+                        <p className="border-t border-barber-border px-5 pb-5 pt-4 text-sm leading-relaxed text-barber-cream/65">
                           {item.a}
                         </p>
                       </motion.div>

src/components/Footer.jsx

@@ -8,12 +8,15 @@ const hours = [
 
 export default function Footer() {
   return (
-    <footer id="contact" className="border-t border-barber-gold/20 bg-barber-bg py-16 sm:py-20">
+    <footer id="contact" className="border-t border-barber-border bg-barber-bg/90 py-16 backdrop-blur-sm sm:py-20">
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-3">
           <div>
-            <p className="font-serif text-2xl text-barber-cream">
-              Atelier <span className="text-barber-gold">Royal</span>
+            <p className="font-serif text-2xl font-medium text-barber-cream">
+              Atelier{' '}
+              <span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent">
+                Royal
+              </span>
             </p>
             <p className="mt-4 max-w-sm text-sm leading-relaxed text-barber-cream/60">
               12 rue de la Couture, 75002 Paris — métro Bourse ou Sentier (lignes 3 et 8). Accès PMR sur
@@ -55,7 +58,7 @@ export default function Footer() {
             </h3>
             <ul className="mt-4 space-y-3 text-sm text-barber-cream/75">
               {hours.map((h) => (
-                <li key={h.day} className="flex justify-between gap-4 border-b border-white/5 pb-3">
+                <li key={h.day} className="flex justify-between gap-4 border-b border-barber-border pb-3">
                   <span className="text-barber-cream/55">{h.day}</span>
                   <span>{h.time}</span>
                 </li>
@@ -75,7 +78,7 @@ export default function Footer() {
                 href="https://instagram.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex h-11 w-11 items-center justify-center rounded border border-white/15 text-barber-cream transition-all hover:border-barber-gold hover:text-barber-gold"
+                className="flex h-11 w-11 items-center justify-center rounded-xl border border-barber-border bg-white/[0.04] text-barber-cream transition-all hover:border-barber-gold/50 hover:text-barber-gold"
                 aria-label="Instagram"
               >
                 <Instagram className="h-5 w-5" />
@@ -84,7 +87,7 @@ export default function Footer() {
                 href="https://facebook.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex h-11 w-11 items-center justify-center rounded border border-white/15 text-barber-cream transition-all hover:border-barber-gold hover:text-barber-gold"
+                className="flex h-11 w-11 items-center justify-center rounded-xl border border-barber-border bg-white/[0.04] text-barber-cream transition-all hover:border-barber-gold/50 hover:text-barber-gold"
                 aria-label="Facebook"
               >
                 <Facebook className="h-5 w-5" />
@@ -99,7 +102,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="mt-14 border-t border-white/10 pt-8 text-center text-xs leading-relaxed text-barber-cream/40">
+        <div className="mt-14 border-t border-barber-border pt-8 text-center text-xs leading-relaxed text-barber-cream/40">
           <p>
             © {new Date().getFullYear()} Atelier Royal SAS — RCS Paris 812 456 789. Hébergement et données :
             traitement conforme au RGPD sur simple demande.

src/components/Gallery.jsx

@@ -55,7 +55,7 @@ const images = [
 
 export default function Gallery() {
   return (
-    <section id="galerie" className="border-t border-white/5 py-20 sm:py-28">
+    <section id="galerie" className="border-t border-barber-border py-20 sm:py-28">
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -64,7 +64,7 @@ export default function Gallery() {
           transition={{ duration: 0.55 }}
           className="mb-12 text-center"
         >
-          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+          <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
             Portfolio
           </p>
           <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -91,7 +91,7 @@ export default function Gallery() {
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true, margin: '-20px' }}
               transition={{ delay: i * 0.05, duration: 0.45 }}
-              className={`group relative overflow-hidden rounded-lg border border-white/10 bg-barber-stone ${img.className}`}
+              className={`group relative overflow-hidden rounded-2xl border border-barber-border bg-barber-stone/50 ${img.className}`}
             >
               <img
                 src={img.src}

src/components/Hero.jsx

@@ -15,15 +15,23 @@ export default function Hero() {
         style={{ backgroundImage: `url('${heroImage}')` }}
         aria-hidden
       />
-      <div className="absolute inset-0 bg-gradient-to-t from-barber-bg via-barber-bg/85 to-barber-bg/40" />
-      <div className="absolute inset-0 bg-gradient-to-r from-barber-bg/60 via-transparent to-barber-bg/50" />
+      <div className="absolute inset-0 bg-gradient-to-t from-barber-bg via-barber-bg/88 to-barber-bg/35" />
+      <div className="absolute inset-0 bg-gradient-to-r from-barber-bg/70 via-transparent to-barber-bg/55" />
+      <div
+        className="pointer-events-none absolute inset-0 opacity-40 mix-blend-soft-light"
+        style={{
+          backgroundImage:
+            'radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232,184,74,0.15), transparent)',
+        }}
+        aria-hidden
+      />
 
       <div className="relative z-10 mx-auto max-w-4xl px-4 text-center sm:px-6">
         <motion.p
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.15, duration: 0.6 }}
-          className="mb-4 text-xs font-medium uppercase tracking-[0.35em] text-barber-gold sm:text-sm"
+          className="mx-auto mb-4 flex w-max items-center rounded-full border border-barber-border bg-white/[0.04] px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.28em] text-barber-gold/95 backdrop-blur-sm sm:text-xs"
         >
           Coiffure & barbier — Paris
         </motion.p>
@@ -31,17 +39,19 @@ export default function Hero() {
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.25, duration: 0.65 }}
-          className="font-serif text-4xl font-medium leading-tight tracking-tight text-barber-cream sm:text-5xl md:text-6xl lg:text-7xl"
+          className="font-serif text-4xl font-medium leading-[1.08] tracking-tight text-barber-cream sm:text-5xl md:text-6xl lg:text-7xl"
         >
           L&apos;Art de la Coupe,
           <br />
-          <span className="text-barber-gold">l&apos;Excellence du Style</span>
+          <span className="bg-gradient-to-r from-barber-gold via-amber-200 to-barber-gold-muted bg-clip-text text-transparent">
+            l&apos;Excellence du Style
+          </span>
         </motion.h1>
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.4, duration: 0.6 }}
-          className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-barber-cream/75 sm:text-base"
+          className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-barber-cream/70 sm:text-base"
         >
           Un sanctuaire du soin masculin où chaque détail compte — matériaux nobles, gestes précis
           et une ambiance feutrée pour un moment qui vous ressemble.
@@ -54,14 +64,14 @@ export default function Hero() {
         >
           <a
             href="#contact"
-            className="inline-flex items-center justify-center gap-2 rounded border border-barber-gold bg-barber-gold px-8 py-3.5 text-sm font-semibold tracking-wide text-barber-bg transition-all hover:bg-transparent hover:text-barber-gold"
+            className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-barber-gold to-amber-400 px-8 py-3.5 text-sm font-semibold tracking-wide text-barber-bg shadow-[0_0_32px_-4px_var(--color-barber-glow)] transition-transform hover:scale-[1.02] active:scale-[0.98]"
           >
             <Calendar className="h-4 w-4" aria-hidden />
             Prendre RDV
           </a>
           <a
             href="#services"
-            className="text-sm font-medium tracking-wide text-barber-cream/80 underline-offset-4 transition-colors hover:text-barber-gold hover:underline"
+            className="rounded-full border border-barber-border bg-white/[0.04] px-6 py-3 text-sm font-semibold text-barber-cream/90 backdrop-blur-sm transition-colors hover:border-barber-gold/40 hover:text-barber-gold"
           >
             Découvrir nos prestations
           </a>
@@ -71,7 +81,7 @@ export default function Hero() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 0.85, duration: 0.6 }}
-          className="mx-auto mt-14 flex max-w-lg flex-wrap items-center justify-center gap-x-8 gap-y-3 border-t border-white/10 pt-8 text-xs text-barber-cream/50 sm:text-sm"
+          className="mx-auto mt-14 flex max-w-lg flex-wrap items-center justify-center gap-x-8 gap-y-3 border-t border-barber-border pt-8 text-xs text-barber-cream/45 sm:text-sm"
         >
           <span>
             <strong className="font-semibold text-barber-gold">4,9/5</strong> sur 380+ avis vérifiés

src/components/Navbar.jsx

@@ -19,7 +19,7 @@ export default function Navbar() {
       initial={{ y: -24, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
-      className="fixed inset-x-0 top-0 z-50 border-b border-white/5 bg-barber-bg/80 backdrop-blur-md"
+      className="fixed inset-x-0 top-0 z-50 border-b border-barber-border bg-barber-bg/75 backdrop-blur-xl backdrop-saturate-150"
     >
       <nav
         className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
@@ -27,10 +27,10 @@ export default function Navbar() {
       >
         <a
           href="#accueil"
-          className="group font-serif text-lg tracking-wide text-barber-cream sm:text-xl"
+          className="group font-serif text-lg font-medium tracking-tight text-barber-cream sm:text-xl"
         >
           <span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '}
-          <span className="text-barber-gold transition-colors group-hover:text-barber-cream">
+          <span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent transition-opacity group-hover:opacity-90">
             Royal
           </span>
         </a>
@@ -40,7 +40,7 @@ export default function Navbar() {
             <li key={href}>
               <a
                 href={href}
-                className="whitespace-nowrap text-xs font-medium tracking-wide text-barber-cream/80 transition-colors hover:text-barber-gold lg:text-sm"
+                className="whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium text-barber-cream/75 transition-colors hover:bg-white/[0.06] hover:text-barber-cream lg:text-sm"
               >
                 {label}
               </a>
@@ -50,7 +50,7 @@ export default function Navbar() {
 
         <button
           type="button"
-          className="flex h-10 w-10 items-center justify-center rounded border border-barber-gold/30 text-barber-gold transition-colors hover:border-barber-gold hover:bg-barber-gold/10 md:hidden"
+          className="flex h-10 w-10 items-center justify-center rounded-full border border-barber-border bg-white/[0.04] text-barber-gold transition-colors hover:border-barber-gold/50 hover:bg-barber-gold/10 md:hidden"
           aria-expanded={open}
           aria-controls="mobile-menu"
           onClick={() => setOpen((v) => !v)}
@@ -68,7 +68,7 @@ export default function Navbar() {
             animate={{ height: 'auto', opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.25 }}
-            className="overflow-hidden border-b border-white/5 bg-barber-bg md:hidden"
+            className="overflow-hidden border-b border-barber-border bg-barber-bg/95 backdrop-blur-xl md:hidden"
           >
             <ul className="flex flex-col gap-1 px-4 pb-4">
               {links.map(({ href, label }) => (
@@ -76,7 +76,7 @@ export default function Navbar() {
                   <a
                     href={href}
                     onClick={() => setOpen(false)}
-                    className="block rounded px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/5 hover:text-barber-gold"
+                    className="block rounded-xl px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/[0.06] hover:text-barber-gold"
                   >
                     {label}
                   </a>

src/components/Services.jsx

@@ -23,7 +23,7 @@ export default function Services() {
   return (
     <section
       id="services"
-      className="relative border-t border-white/5 bg-barber-stone py-20 sm:py-28"
+      className="relative border-t border-barber-border bg-barber-stone/80 py-20 sm:py-28"
     >
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <motion.div
@@ -33,8 +33,8 @@ export default function Services() {
           transition={{ duration: 0.55 }}
           className="mx-auto mb-14 max-w-2xl text-center"
         >
-          <p className="mb-3 flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
-            <Scissors className="h-4 w-4" aria-hidden />
+          <p className="mx-auto mb-3 inline-flex items-center justify-center gap-2 rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
+            <Scissors className="h-3.5 w-3.5" aria-hidden />
             Prestations
           </p>
           <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -57,7 +57,7 @@ export default function Services() {
         >
           {services.map((s) => (
             <motion.li key={s.id} variants={item}>
-              <article className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-white/10 bg-barber-bg p-6 transition-all duration-300 hover:border-barber-gold/60 hover:shadow-[0_0_40px_-8px_rgba(212,175,55,0.25)]">
+              <article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-barber-border bg-barber-bg/80 p-6 backdrop-blur-sm transition-all duration-300 hover:border-barber-gold/35 hover:shadow-[0_0_48px_-12px_var(--color-barber-glow)]">
                 <div className="mb-4 flex items-start justify-between gap-2">
                   <h3 className="font-serif text-xl text-barber-cream transition-colors group-hover:text-barber-gold">
                     {s.name}
@@ -70,7 +70,7 @@ export default function Services() {
                 <p className="mb-6 flex-1 text-sm leading-relaxed text-barber-cream/65">
                   {s.description}
                 </p>
-                <div className="flex flex-wrap items-end justify-between gap-2 border-t border-white/10 pt-4">
+                <div className="flex flex-wrap items-end justify-between gap-2 border-t border-barber-border pt-4">
                   <div>
                     <p className="text-2xl font-semibold tabular-nums text-barber-gold">
                       {s.price}€

src/components/Testimonials.jsx

@@ -62,7 +62,7 @@ function Stars({ count }) {
 
 export default function Testimonials() {
   return (
-    <section className="border-t border-white/5 bg-barber-stone py-20 sm:py-28">
+    <section className="border-t border-barber-border bg-barber-stone/80 py-20 sm:py-28">
       <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -71,7 +71,7 @@ export default function Testimonials() {
           transition={{ duration: 0.55 }}
           className="mb-12 text-center"
         >
-          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+          <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
             Témoignages
           </p>
           <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -92,12 +92,12 @@ export default function Testimonials() {
               viewport={{ once: true, margin: '-40px' }}
               transition={{ delay: (i % 3) * 0.06, duration: 0.5 }}
             >
-              <blockquote className="flex h-full flex-col rounded-lg border border-white/10 bg-barber-bg p-6">
+              <blockquote className="flex h-full flex-col rounded-2xl border border-barber-border bg-barber-bg/80 p-6 backdrop-blur-sm transition-colors hover:border-barber-gold/20">
                 <Stars count={r.rating} />
                 <p className="mt-4 flex-1 text-sm leading-relaxed text-barber-cream/80">
                   &ldquo;{r.text}&rdquo;
                 </p>
-                <footer className="mt-6 border-t border-white/10 pt-4">
+                <footer className="mt-6 border-t border-barber-border pt-4">
                   <cite className="not-italic text-sm font-medium text-barber-gold">{r.name}</cite>
                   <p className="mt-0.5 text-xs text-barber-cream/45">{r.role}</p>
                 </footer>

src/index.css

@@ -1,13 +1,16 @@
 @import 'tailwindcss';
 
 @theme {
-  --color-barber-bg: #0a0a0a;
-  --color-barber-gold: #d4af37;
-  --color-barber-gold-muted: #b8962e;
-  --color-barber-cream: #ece8e1;
-  --color-barber-stone: #1a1a1a;
-  --font-serif: 'Playfair Display', ui-serif, Georgia, serif;
-  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --color-barber-bg: #0a0b0f;
+  --color-barber-surface: #12141c;
+  --color-barber-gold: #e8b84a;
+  --color-barber-gold-muted: #c49a3a;
+  --color-barber-cream: #f1f3f7;
+  --color-barber-stone: #181b26;
+  --color-barber-border: oklch(1 0 0 / 0.08);
+  --color-barber-glow: oklch(0.82 0.13 82 / 0.2);
+  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
+  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
 }
 
 @layer base {
@@ -16,10 +19,20 @@
   }
 
   body {
-    @apply m-0 min-h-svh bg-barber-bg font-sans text-barber-cream antialiased;
+    @apply m-0 min-h-svh font-sans text-barber-cream antialiased;
+    background-color: var(--color-barber-bg);
+    background-image:
+      radial-gradient(ellipse 100% 80% at 50% -30%, rgba(232, 184, 74, 0.09), transparent 55%),
+      radial-gradient(ellipse 50% 40% at 100% 20%, rgba(99, 102, 241, 0.06), transparent 50%),
+      radial-gradient(ellipse 40% 30% at 0% 80%, rgba(232, 184, 74, 0.04), transparent 45%);
   }
 
   #root {
     @apply min-h-svh w-full max-w-none;
   }
+
+  ::selection {
+    background-color: oklch(0.82 0.13 82 / 0.45);
+    color: var(--color-barber-bg);
+  }
 }