Initial B2B Blog Launch by Antigravity Autopilot

Author: TechStack Global

index.html

@@ -43,8 +43,11 @@ <h1>Scale Your Business<br>With 2026 Automation</h1>
                     <h2>Latest Blueprints</h2>
                 </div>
                 <div class="article-grid">
-                    <div class="article-card">
-                        <img src="thumb_shopify.png" alt="Shopify vs BigCommerce" class="card-image">
+                    <div class="article-card animate-in" style="animation-delay: 0.1s;">
+                        <div class="card-image-wrapper">
+                            <img src="thumb_shopify.png?v=2" alt="Shopify vs BigCommerce" class="card-image">
+                            <span class="read-time">8 min read</span>
+                        </div>
                         <div class="card-body">
                             <span class="category">Comparison</span>
                             <h3>Shopify vs. BigCommerce: 2026 Verdict</h3>
@@ -54,8 +57,11 @@ <h3>Shopify vs. BigCommerce: 2026 Verdict</h3>
                         </div>
                     </div>
 
-                    <div class="article-card">
-                        <img src="thumb_fiverr.png" alt="Fiverr Pro B2B" class="card-image">
+                    <div class="article-card animate-in" style="animation-delay: 0.2s;">
+                        <div class="card-image-wrapper">
+                            <img src="thumb_fiverr.png?v=2" alt="Fiverr Pro B2B" class="card-image">
+                            <span class="read-time">6 min read</span>
+                        </div>
                         <div class="card-body">
                             <span class="category">Operations</span>
                             <h3>Leveraging Fiverr Pro for B2B Growth</h3>
@@ -65,19 +71,29 @@ <h3>Leveraging Fiverr Pro for B2B Growth</h3>
                         </div>
                     </div>
 
-                    <div class="article-card">
-                        <img src="thumb_stack.png" alt="Tech Stack 2026" class="card-image">
+                    <div class="article-card animate-in" style="animation-delay: 0.3s;">
+                        <div class="card-image-wrapper">
+                            <img src="thumb_stack.png?v=2" alt="Tech Stack 2026" class="card-image">
+                            <span class="read-time">12 min read</span>
+                        </div>
                         <div class="card-body">
                             <span class="category">Expert Guide</span>
-                            <h3>The Ultimate B2B Tech Stack 2026</h3>
+                            <div style="display: flex; align-items: center; gap: 8px;">
+                                <h3>The Ultimate B2B Tech Stack 2026</h3>
+                                <span
+                                    style="background: #ef4444; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: bold;">TRENDING</span>
+                            </div>
                             <p>A data-driven blueprint for choosing the software that actually scales your revenue to
                                 $10k/mo and beyond.</p>
                             <a href="posts/tech-stack-2026.html" class="read-more">Read Full Blueprint &rarr;</a>
                         </div>
                     </div>
 
-                    <div class="article-card">
-                        <img src="thumb_affiliate.png" alt="Affiliate Blueprint" class="card-image">
+                    <div class="article-card animate-in" style="animation-delay: 0.4s;">
+                        <div class="card-image-wrapper">
+                            <img src="thumb_affiliate.png?v=2" alt="Affiliate Blueprint" class="card-image">
+                            <span class="read-time">10 min read</span>
+                        </div>
                         <div class="card-body">
                             <span class="category">Business Strategy</span>
                             <h3>The 2026 B2B Affiliate Blueprint</h3>
@@ -87,8 +103,11 @@ <h3>The 2026 B2B Affiliate Blueprint</h3>
                         </div>
                     </div>
 
-                    <div class="article-card">
-                        <img src="thumb_guide.png" alt="B2B Automation Guide" class="card-image">
+                    <div class="article-card animate-in" style="animation-delay: 0.5s;">
+                        <div class="card-image-wrapper">
+                            <img src="thumb_guide.png?v=2" alt="B2B Automation Guide" class="card-image">
+                            <span class="read-time">15 min read</span>
+                        </div>
                         <div class="card-body">
                             <span class="category">Strategic Pillar</span>
                             <h3>B2B Automation Guide: The ROI Key</h3>

style.css

@@ -1,16 +1,35 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
 
 :root {
-    --bg-color: #f8fafc;
+    --bg-color: #ffffff;
+    --surface-color: #f8fafc;
     --text-color: #0f172a;
-    --text-muted: #64748b;
+    --text-muted: #475569;
     --accent-color: #2563eb;
     --secondary-accent: #10b981;
-    --card-bg: rgba(255, 255, 255, 0.85);
-    --border-color: rgba(15, 23, 42, 0.08);
+    --card-bg: #ffffff;
+    --border-color: #e2e8f0;
     --font-main: 'Inter', sans-serif;
-    --glass-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
-    --hero-grad: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+    --hero-grad: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-in {
+    animation: fadeInUp 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
 }
 
 * {
@@ -99,10 +118,11 @@ nav {
     font-size: 4.5rem;
     font-weight: 800;
     letter-spacing: -3px;
-    line-height: 1;
+    line-height: 1.1;
     margin-bottom: 1.5rem;
     background: linear-gradient(to right, #fff, #94a3b8);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
@@ -157,29 +177,50 @@ nav {
 }
 
 .article-card {
-    background: white;
+    background: var(--card-bg);
     border: 1px solid var(--border-color);
-    border-radius: 32px;
+    border-radius: 20px;
     overflow: hidden;
-    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+    box-shadow: var(--shadow-md);
+    display: flex;
+    flex-direction: column;
 }
 
 .article-card:hover {
-    transform: translateY(-15px) scale(1.02);
-    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12);
-    border-color: rgba(37, 99, 235, 0.2);
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--accent-color);
+}
+
+.card-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    height: 220px;
 }
 
 .card-image {
     width: 100%;
-    height: 250px;
+    height: 100%;
     object-fit: cover;
-    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+    transition: transform 0.6s ease;
 }
 
 .article-card:hover .card-image {
-    transform: scale(1.1);
+    transform: scale(1.05);
+}
+
+.read-time {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    background: rgba(15, 23, 42, 0.8);
+    color: white;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    backdrop-filter: blur(4px);
 }
 
 .card-body {