From 088a2259c45c0d19951130e1c0fd5225aa75f5c2 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Fri, 6 Mar 2026 07:56:12 -0500
Subject: [PATCH] Nav CTA pill button, hero gradient background, pricing top
 banners, final CTA gradient

---
 index.html  |  9 +++----
 landing.css | 73 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index ae28fbc..a09ecbf 100644
--- a/index.html
+++ b/index.html
@@ -39,8 +39,8 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
       <section class="middle"></section>
       <section class="log-in">
         <a href="https://blog.makepostsell.com/">Blog</a>
-        <span class="nav-sep">|</span>
         <a href="https://my.makepostsell.com/u/settings">My Account</a>
+        <a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta">Open a Shop</a>
       </section>
     </section>
   </section>
@@ -69,15 +69,14 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
 
         <div class="landing-pricing">
           <div class="landing-pricing-card">
-            <span class="landing-pricing-icon">&#128197;</span>
+            <div class="landing-pricing-banner">Monthly</div>
             <span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span>
             <span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span>
           </div>
           <div class="landing-pricing-card landing-pricing-featured">
-            <span class="landing-pricing-badge">Best value</span>
-            <span class="landing-pricing-icon">&#127775;</span>
+            <div class="landing-pricing-banner landing-pricing-banner-featured">Best value &#8212; save 42%</div>
             <span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
-            <span class="landing-pricing-desc">Save 42%. Two months free.</span>
+            <span class="landing-pricing-desc">Two months free. Same features.</span>
           </div>
         </div>
 
diff --git a/landing.css b/landing.css
index bcb0213..d43ec34 100644
--- a/landing.css
+++ b/landing.css
@@ -33,11 +33,7 @@
     margin: 0;
     display: flex;
     align-items: center;
-    gap: 16px;
-}
-
-.nav-sep {
-    color: #e0e0e0;
+    gap: 20px;
 }
 
 .nav-grid .log-in a {
@@ -51,10 +47,27 @@
     color: #a3c765;
 }
 
+.nav-cta {
+    background: #0b0b0b;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    padding: 10px 24px;
+    border-radius: 50px;
+    transition: background 0.2s ease, transform 0.15s ease;
+    white-space: nowrap;
+}
+
+.nav-cta:hover {
+    background: #333;
+    color: #fff !important;
+    transform: translateY(-1px);
+}
+
 /* ---- Hero ---- */
 
 .landing-hero {
-    background-color: #FFFFFF;
+    background: linear-gradient(180deg, #f0f7e6 0%, #FFFFFF 100%);
     padding: 60px 24px 70px;
     text-align: center;
     max-width: none;
@@ -79,7 +92,7 @@
 .landing-hero-subtitle {
     font-size: 1.25em;
     font-weight: 500;
-    color: #0b0b0b;
+    color: #333;
     margin: 0 0 24px;
     line-height: 1.4;
 }
@@ -188,9 +201,10 @@ a.mps-button.landing-cta-large {
     background: #FFFFFF;
     border: 1px solid #e0e0e0;
     border-radius: 16px;
-    padding: 36px 24px;
+    padding: 0;
     text-align: center;
     position: relative;
+    overflow: hidden;
     transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
 
@@ -199,39 +213,35 @@ a.mps-button.landing-cta-large {
     transform: translateY(-2px);
 }
 
+.landing-pricing-banner {
+    background: #F9F9FA;
+    color: #515151;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 10px 24px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.landing-pricing-banner-featured {
+    background: #a3c765;
+    color: #fff;
+    border-bottom: none;
+}
+
 .landing-pricing-featured {
     border: 2px solid #a3c765;
     box-shadow: 0 4px 20px rgba(163, 199, 101, 0.15);
 }
 
-.landing-pricing-badge {
-    position: absolute;
-    top: -13px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #a3c765;
-    color: #fff;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    padding: 4px 16px;
-    border-radius: 50px;
-}
-
-.landing-pricing-icon {
-    font-size: 28px;
-    display: block;
-    margin-bottom: 12px;
-}
-
 .landing-pricing-amount {
     font-size: 3em;
     font-weight: 700;
     color: #0b0b0b;
     display: block;
     line-height: 1;
-    margin-bottom: 8px;
+    margin: 28px 0 8px;
 }
 
 .landing-pricing-period {
@@ -244,6 +254,7 @@ a.mps-button.landing-cta-large {
     font-size: 15px;
     color: #666;
     display: block;
+    padding: 0 24px 28px;
 }
 
 /* ---- Cards (override common.css for landing) ---- */
@@ -396,7 +407,7 @@ a.mps-button.landing-cta-large {
 /* ---- Final CTA ---- */
 
 .landing-final-cta {
-    background: linear-gradient(135deg, #f8faf5 0%, #f0f6ff 100%);
+    background: linear-gradient(135deg, #f0f7e6 0%, #f0f6ff 100%);
     text-align: center;
     padding: 80px 24px;
 }