From e5b09fe6d70c302cdb35a5b8f3bfcd0f4622207a Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 22 May 2026 05:40:54 +0000
Subject: [PATCH] ui: solid Read More button + neon palette site-wide (not just
 homepage) so header/footer stays consistent on all pages

---
 src/app/home-page/page.tsx |  2 +-
 src/app/layout.tsx         |  2 +-
 src/styles/tailwind.css    | 43 ++++++++++++++++++++++++++++++--------
 3 files changed, 36 insertions(+), 11 deletions(-)
diff --git a/src/app/home-page/page.tsx b/src/app/home-page/page.tsx
index 185565c..3e9f9ec 100644
--- a/src/app/home-page/page.tsx
+++ b/src/app/home-page/page.tsx
@@ -130,7 +130,7 @@ function FeedSkeleton() {
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-background bb-neon">
+    <div className="min-h-screen bg-background">
       {/* Sticky top bar + nav */}
       <Header />
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 78e36ea..286edc7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -140,7 +140,7 @@ export default function RootLayout({
             })
           }} />
 </head>
-      <body>
+      <body className="bb-neon">
         {/* Skip to main content — WCAG 2.4.1 */}
         <a
           href="#main-content"
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 03d3b53..eac88d3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -487,20 +487,45 @@ h1, h2, h3 {
    READ MORE
    ===================== */
 .read-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--color-accent);
+  color: #ffffff;
+  background: var(--color-accent);
+  padding: 7px 14px;
+  border-radius: 2px;
+  border: 1px solid transparent;
   text-decoration: none;
-  transition: color var(--transition-fast), letter-spacing var(--transition-fast);
+  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+.read-more::after {
+  content: "→";
+  font-size: 13px;
+  line-height: 1;
 }
-
 .read-more:hover {
-  color: var(--color-accent-dark);
-  letter-spacing: 0.07em;
-  text-decoration: underline;
+  background: var(--color-accent-dark);
+  text-decoration: none;
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
+}
+/* Under neon scope: green→cyan gradient with dark-gray text (matches other CTAs) */
+.bb-neon .read-more {
+  background: linear-gradient(90deg, #00ff9f 0%, #00d4ff 100%);
+  color: #1a1a1a;
+  font-weight: 900;
+  text-shadow: none;
+  box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
+}
+.bb-neon .read-more:hover {
+  background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%);
+  color: #0a0a0a;
+  box-shadow: 0 0 18px rgba(0, 255, 159, 0.40);
 }
 
 /* =====================
