From 6957801f36d198491442e42c4f9b83c018e4b1e2 Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Wed, 11 Mar 2026 01:03:18 +0000
Subject: [PATCH] Overhaul nav styling and storytelling typography/background
 classes

---
 public/css/style.css | 61 +++++++++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 2168e49..066a3d1 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -23,7 +23,7 @@ body {
     var(--bg);
   line-height: 1.75;
   letter-spacing: 0.01em;
-  font-size: 17px;
+  font-size: 18px;
   overflow-x: hidden;
 }
 
@@ -33,13 +33,18 @@ img { max-width: 100%; display: block; }
 .container { width: min(1180px, calc(100% - 2.25rem)); margin-inline: auto; }
 .section { padding: 5.75rem 0; }
 .section-alt {
-  background: linear-gradient(180deg, #fff1f1 0%, #ffe8e8 100%);
+  background: linear-gradient(180deg, #ffe9e9 0%, #ffdede 100%);
   border-top: 1px solid #f6d1d1;
   border-bottom: 1px solid #f6d1d1;
 }
 
+.story-band { padding: 4.5rem 0; background: linear-gradient(180deg, rgba(200,25,25,.08), rgba(200,25,25,.02)); border-top: 1px solid #f3c3c3; border-bottom: 1px solid #f3c3c3; }
+.story-steps { display: grid; gap: 1rem; }
+.story-step { padding: 1.1rem 1.15rem; border-left: 4px solid var(--accent); background: rgba(255,255,255,.55); border-radius: 10px; }
+.story-kicker { color: #a61c1c; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: .35rem; }
+
 h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; }
-p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
+p { margin: 0 0 1.1rem; font-size: 1.09rem; color: var(--text); }
 
 .site-header {
   position: sticky;
@@ -70,19 +75,16 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
 .brand span { font-size: 1.05rem; }
 
 .site-nav {
-  display: flex;
-  align-items: center;
-  gap: 1.2rem;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
+  display: block;
   min-width: 0;
 }
 
 .nav-links {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: .6rem;
+  flex-wrap: wrap;
   min-width: 0;
 }
 
@@ -91,29 +93,33 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
   font-weight: 700;
   font-size: 1rem;
   line-height: 1;
-  padding: .4rem .1rem;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
+  padding: .58rem .86rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
   white-space: nowrap;
-  transition: color .2s ease, border-color .2s ease, transform .2s ease;
+  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
 }
 
 .nav-links a:hover {
   color: var(--accent);
-  border-bottom-color: rgba(200, 25, 25, 0.5);
+  border-color: rgba(200, 25, 25, 0.28);
+  background: #fff0f0;
   transform: translateY(-1px);
 }
 
 .nav-links a.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
+  color: #8d1414;
+  background: #ffe4e4;
+  border-color: rgba(200, 25, 25, 0.35);
 }
 
-.nav-cta {
+.nav-cta,
+.nav-links a.nav-cta-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: .7rem 1.1rem;
+  padding: .66rem 1.05rem;
   border-radius: 999px;
   border: 1px solid #b71414;
   background: linear-gradient(180deg, #df2a2a 0%, #bf1616 100%);
@@ -121,13 +127,22 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
   font-weight: 800;
   white-space: nowrap;
   box-shadow: 0 8px 16px rgba(161, 14, 14, 0.22);
-  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
 }
 
-.nav-cta:hover {
+.nav-cta:hover,
+.nav-links a.nav-cta-link:hover {
+  color: #fff;
   transform: translateY(-1px);
   box-shadow: 0 10px 20px rgba(161, 14, 14, 0.3);
   filter: saturate(1.05);
+  border-color: #a91212;
+  background: linear-gradient(180deg, #e23535 0%, #bb1212 100%);
+}
+
+.nav-links a.nav-cta-link.active {
+  color: #fff;
+  border-color: #a91212;
+  background: linear-gradient(180deg, #e23535 0%, #bb1212 100%);
 }
 
 .mobile-toggle { display: none; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: .3rem .35rem; }
@@ -145,7 +160,7 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
 h1 { font-size: clamp(2.45rem, 5.3vw, 4.2rem); margin: .25rem 0 .95rem; }
 h2 { font-size: clamp(2rem, 3.6vw, 2.85rem); margin: 0 0 1rem; }
 h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .65rem; }
-.lead { color: var(--muted); font-size: 1.18rem; max-width: 68ch; }
+.lead { color: var(--muted); font-size: 1.22rem; max-width: 68ch; }
 .hero-actions { display: flex; gap: .85rem; margin-top: 1.5rem; flex-wrap: wrap; }
 
 .btn {
@@ -369,5 +384,5 @@ select:focus-visible {
   }
 
   .section { padding: 4.25rem 0; }
-  body { font-size: 16.5px; }
+  body { font-size: 17px; }
 }