hero: promote lone Sign Up Now pill to filled primary button (Steve + contrarian gate)

23db9fe604c50ff36f6b2e2f993841b912ad7e2a · 2026-07-20 15:57:24 -0700 · Steve Abrams
Files touched

M sections/home-slideshow.liquid
Diff

commit 23db9fe604c50ff36f6b2e2f993841b912ad7e2a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jul 20 15:57:24 2026 -0700

    hero: promote lone Sign Up Now pill to filled primary button (Steve + contrarian gate)
---
 sections/home-slideshow.liquid | 42 ++++++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/sections/home-slideshow.liquid b/sections/home-slideshow.liquid
index 5849d95..d446f43 100644
--- a/sections/home-slideshow.liquid
+++ b/sections/home-slideshow.liquid
@@ -79,43 +79,41 @@
     }
     #shopify-section-{{ section.id }} .home-slideshow-slide-content { z-index: 2; }
 
-    /* DW restrained secondary CTA — luxury "Book a consultation" hairline pill (DTD verdict C, 2026-06-29).
-       Deliberately quieter than the primary .home-slideshow-slide-cta: lighter weight, smaller, wider
-       tracking, hairline outline, ample whitespace — a premium secondary, never a competing banner. */
-    /* Wrapper forces the secondary onto its own row beneath the primary button and inherits the
-       slide's text-align (left/center/right) so the pill stays aligned with the heading. The primary
-       .home-slideshow-slide-cta is an inline text-button, so without this the secondary would sit
-       beside it as a visual peer — the opposite of the restrained, subordinate treatment we want. */
+    /* DW PRIMARY hero CTA — promoted to the loud, filled pill (Steve + Contrarian gate, 2026-07-20).
+       Was the restrained hairline secondary (DTD verdict C, 2026-06-29); now that it is the hero's
+       SOLE call-to-action ("Sign Up Now"), it wears full primary weight: opaque near-black fill,
+       heavier Lora, larger type, generous padding, soft lift-shadow — a confident main button while
+       keeping the rounded pill shape. Note: the snippet injects inline color = overlay text color
+       (#fff for this slide), so a dark fill + white text reads at full contrast over the hero photo. */
+    /* Wrapper keeps the button on its own row beneath the heading and inherits the slide's
+       text-align (left/center/right) so it stays aligned with the copy. */
     #shopify-section-{{ section.id }} .home-slideshow-slide-cta2-row {
       display: block;
       margin-top: 18px;
     }
     #shopify-section-{{ section.id }} .home-slideshow-slide-cta2 {
       display: inline-block;
-      padding: 9px 26px;
+      padding: 15px 42px;
       font-family: Lora, serif;
       font-style: normal;
-      font-weight: 400;
-      font-size: 0.7857142857rem;       /* ~11px — well below the ~16px primary */
+      font-weight: 600;
+      font-size: 1rem;                  /* ~14px — full primary weight, up from the ~11px secondary */
       line-height: 1;
-      letter-spacing: 0.18em;
+      letter-spacing: 0.14em;
       text-transform: uppercase;
       text-decoration: none;
-      border: 1px solid currentColor;    /* hairline pill, inherits overlay text color */
+      border: none;                     /* solid filled pill — no hairline outline */
       border-radius: 999px;
-      /* Faint dark backing + soft shadow so the small pill text always clears contrast over a
-         variable hero photo (APCA), without becoming a loud solid block like the primary button. */
-      background: rgba(0,0,0,0.46);   /* APCA Lc>=75 worst-case over a light photo region; still translucent vs the opaque primary */
-      -webkit-backdrop-filter: blur(6px);
-              backdrop-filter: blur(6px);
-      text-shadow: 0 1px 6px rgba(0,0,0,0.45);
-      opacity: 0.95;
-      transition: opacity 0.25s ease, background-color 0.25s ease;
+      background: #1e1e1e;              /* opaque near-black — the loud primary block */
+      box-shadow: 0 4px 16px rgba(0,0,0,0.28);
+      opacity: 1;
+      transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
     }
     #shopify-section-{{ section.id }} .home-slideshow-slide-cta2:hover,
     #shopify-section-{{ section.id }} .home-slideshow-slide-cta2:focus {
-      opacity: 1;
-      background: rgba(0,0,0,0.55);
+      background: #000;
+      transform: translateY(-1px);
+      box-shadow: 0 7px 22px rgba(0,0,0,0.34);
     }
     @media (min-width: 770px) {
       #shopify-section-{{ section.id }} .home-slideshow-slide-cta2-row { margin-top: 24px; }
← 8ddcec0 5x: verify front-page CTA change live (hero + nav Sign Up No · back to Dw Theme Frontpage Cta · auto-save: 2026-07-20T16:33:10 (1 files) — snippets/mobile-n 6a22e98 →