localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

buttons: invert neon-green CTA text to dark-gray (#1a1a1a) for readability; bump Ask BB AI above cookie bar (bottom-6→bottom-24)

Browse Source
This commit is contained in:
Ryan Salazar
2026-05-22 05:08:01 +00:00
parent d674149486
commit 8a296edcbc
2 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AskBBAI.tsx
View File

@@ -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">

37
src/styles/tailwind.css
View File

@@ -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;