Remove all animations, keep only static FLASH SALE badge on Atlas

templates/index.html

@@ -94,43 +94,15 @@
     padding: 5px 12px; border-radius: 5px;
     font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
     z-index: 2;
-    animation: glow 0.8s ease-in-out infinite;
-  }
-  @keyframes glow {
-    0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.3); }
-    50% { box-shadow: 0 0 25px rgba(59,130,246,0.8); }
   }
 
   /* ── Limited offer ── */
   .old-price { text-decoration:line-through; color:var(--muted); font-size:18px; font-weight:400; }
-  .deal-price { font-size:32px; font-weight:800; color:#22c55e; animation: dealPulse 0.7s ease-in-out infinite; }
+  .deal-price { font-size:32px; font-weight:800; color:#22c55e; }
-  @keyframes dealPulse {
+  .flash-sale-tag { 
-    0%, 100% { transform:scale(1); }
-    25% { transform:scale(1.06); }
-    75% { transform:scale(1.06); }
-  }
-  .limited-tag { 
     display:inline-block; background:#ef4444; color:#fff; 
-    padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700;
+    padding:4px 14px; border-radius:4px; font-size:12px; font-weight:800;
-    animation: blink 0.5s ease-in-out infinite; margin-top:4px;
+    letter-spacing:1px; margin-top:4px;
-  }
-  @keyframes blink {
-    0%, 100% { opacity:1; }
-    50% { opacity:0.2; }
-  }
-  .hurry-text { font-size:11px; color:#ef4444; font-weight:600; margin-top:6px; animation: shake 0.3s ease-in-out infinite; }
-  @keyframes shake {
-    0%, 100% { transform:translateX(0); }
-    25% { transform:translateX(-3px); }
-    75% { transform:translateX(3px); }
-  }
-  .btn-shake { animation: shake 0.4s ease-in-out infinite; }
-
-  /* ── Flash overlay ── */
-  .pricing-card.flash-deal { border-color:#ef4444; animation: flashBorder 0.8s ease-in-out infinite; }
-  @keyframes flashBorder {
-    0%, 100% { border-color:#ef4444; box-shadow:0 0 0 rgba(239,68,68,0); }
-    50% { border-color:#ff6b6b; box-shadow:0 0 15px rgba(239,68,68,0.3); }
   }
 
   /* Why */
@@ -387,17 +359,16 @@ async function loadPricing() {
       const priceHTML = isAtlas
         ? `<div class="old-price">${Number(t.sell_price).toLocaleString('fr-MA')} MAD</div>
            <div class="deal-price">3 990 <small>MAD</small></div>
-           <div><span class="limited-tag">${lang==='fr'?'Offre limitée':'Limited offer'}</span></div>
+           <div><span class="flash-sale-tag">⚡ FLASH SALE</span></div>`
-           <div class="hurry-text">${lang==='fr'?'⭐ Dépêchez-vous !':"⭐ Hurry!"}</div>`
         : `<div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>`;
       return `
-      <div class="pricing-card ${isAtlas ? 'flash-deal' : ''}">
+      <div class="pricing-card">
         ${isAtlas ? '<div class="promo-badge">LE BON CHOIX</div>' : ''}
         <h3>${t.name}</h3>
         ${priceHTML}
         <div class="desc">${(desc[lang]||desc.fr)[t.name] || t.description || ''}</div>
         <ul class="specs">${(specs[lang]||specs.fr)[t.name]?.map(s => `<li>${s}</li>`).join('') || ''}</ul>
-        <a href="https://wa.me/212725569519" class="btn btn-primary ${isAtlas ? 'btn-shake' : ''}" style="width:100%;text-align:center;">${lang==='fr'?'Commander':'Order'}</a>
+        <a href="https://wa.me/212725569519" class="btn btn-primary" style="width:100%;text-align:center;">${lang==='fr'?'Commander':'Order'}</a>
       </div>`;
     }).join('');
   } catch(e) { document.getElementById('pricingGrid').innerHTML = '<p style="color:var(--muted);text-align:center;">Pricing unavailable</p>'; }