From 8a296edcbc302f1454f425d341da45f49dccb267 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 22 May 2026 05:08:01 +0000
Subject: [PATCH] =?UTF-8?q?buttons:=20invert=20neon-green=20CTA=20text=20t?=
 =?UTF-8?q?o=20dark-gray=20(#1a1a1a)=20for=20readability;=20bump=20Ask=20B?=
 =?UTF-8?q?B=20AI=20above=20cookie=20bar=20(bottom-6=E2=86=92bottom-24)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AskBBAI.tsx |  2 +-
 src/styles/tailwind.css    | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/AskBBAI.tsx b/src/components/AskBBAI.tsx
index a9a34f3..1bc5b70 100644
--- a/src/components/AskBBAI.tsx
+++ b/src/components/AskBBAI.tsx
@@ -67,7 +67,7 @@ export default function AskBBAI() {
         <button
           type="button"
           onClick={() => setOpen(true)}
-          className="fixed bottom-6 right-6 z-40 bg-black text-white rounded-full pl-5 pr-5 py-3 shadow-2xl flex items-center gap-3 hover:bg-zinc-900 transition-colors"
+          className="fixed bottom-24 right-6 z-40 bg-black text-white rounded-full pl-5 pr-5 py-3 shadow-2xl flex items-center gap-3 hover:bg-zinc-900 transition-colors"
           aria-label="Ask BB AI"
         >
           <span className="relative inline-block w-3 h-3">
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 3733fb2..577947e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1420,15 +1420,25 @@ h1, h2, h3 {
   box-shadow: 0 0 14px rgba(0, 212, 255, 0.18);
 }
 
-/* Buttons previously blue → emerald→cyan gradient with black text */
+/* Buttons previously blue → emerald→cyan gradient with dark text inverted.
+   Use the same dark gray as the card backgrounds (#1a1a1a) so the button
+   reads as a brand-color "chip" punching out the panel. */
 .bb-neon .bg-\[\#3b82f6\],
 .bb-neon button.bg-\[\#3b82f6\],
 .bb-neon a.bg-\[\#3b82f6\] {
   background: linear-gradient(90deg, #00ff9f 0%, #00d4ff 100%) !important;
-  color: #000 !important;
+  color: #1a1a1a !important;
+  font-weight: 800 !important;
+  text-shadow: none !important;
   box-shadow: 0 0 14px rgba(0, 212, 255, 0.30);
   border: none;
 }
+.bb-neon .bg-\[\#3b82f6\] *,
+.bb-neon button.bg-\[\#3b82f6\] *,
+.bb-neon a.bg-\[\#3b82f6\] * {
+  color: #1a1a1a !important;
+  text-shadow: none !important;
+}
 .bb-neon .bg-\[\#3b82f6\]:hover,
 .bb-neon .hover\:bg-\[\#2563eb\]:hover,
 .bb-neon button.bg-\[\#3b82f6\]:hover,
@@ -1437,6 +1447,29 @@ h1, h2, h3 {
   box-shadow: 0 0 22px rgba(0, 255, 159, 0.45);
 }
 
+/* Subscribe button (.btn-subscribe is its own component class) — same
+   neon background, dark gray text under the neon scope. */
+.bb-neon .btn-subscribe {
+  background: linear-gradient(90deg, #00ff9f 0%, #00d4ff 100%) !important;
+  color: #1a1a1a !important;
+  font-weight: 800 !important;
+  text-shadow: none !important;
+  box-shadow: 0 0 14px rgba(0, 212, 255, 0.30) !important;
+}
+.bb-neon .btn-subscribe:hover {
+  background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%) !important;
+  color: #0a0a0a !important;
+  box-shadow: 0 0 22px rgba(0, 255, 159, 0.45) !important;
+}
+
+/* Any element using --color-accent as bg → invert text under neon scope. */
+.bb-neon button[style*="--color-accent"],
+.bb-neon a[style*="--color-accent"],
+.bb-neon [style*="background: var(--color-accent)"],
+.bb-neon [style*="background-color: var(--color-accent)"] {
+  color: #1a1a1a !important;
+}
+
 /* Category pills / tags / "AI" badges — cyan via attribute selector */
 .bb-neon [class*="bg-[#3b82f6]/"] {
   background: rgba(0, 212, 255, 0.12) !important;