AV launch: global color scheme to match logo — gold #ffb800 primary, red #d60701 secondary, warm dark bars (1a1208 / 161310) replacing the inherited BB blue palette. Swapped 21 root tokens + 112 component files.

2026-06-02 23:24:54 +00:00
parent 54117c34d3
commit 10ecf723dc
115 changed files with 1082 additions and 1082 deletions
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -5,18 +5,18 @@
 :root {
  --color-primary: #0d0d0d;
  --color-secondary: #161616;
-  --color-accent: #3b82f6;
-  --color-accent-dark: #2563eb;
-  --color-accent-muted: #1e3a5f;
-  --color-accent-red: #cc0000;
-  --color-accent-red-dark: #aa0000;
+  --color-accent: #ffb800;
+  --color-accent-dark: #d99700;
+  --color-accent-muted: #4a3500;
+  --color-accent-red: #d60701;
+  --color-accent-red-dark: #a30501;
  --color-bg: #111111;
  --color-card: #1a1a1a;
  --color-foreground: #e8e8e8;
  --color-muted: #888888;
  --color-border: #2a2a2a;
-  --color-top-bar: #1a2535;
-  --color-sub-nav: #161c28;
+  --color-top-bar: #1a1208;
+  --color-sub-nav: #161310;
  /* --font-serif and --font-sans are injected on <html> by next/font/google
     (Lora + Inter) in src/app/layout.tsx. The system-font tails are real
     fallbacks for the brief window before the self-hosted face is ready. */
@@ -516,7 +516,7 @@ h1, h2, h3 {
 }
 /* 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%);
+  background: linear-gradient(90deg, #ff4035 0%, #ffd25a 100%);
  color: #1a1a1a;
  font-weight: 900;
  text-shadow: none;
@@ -844,12 +844,12 @@ a.company-mention:hover {
 .ProseMirror ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
 .ProseMirror ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
 .ProseMirror li { margin: 0.25rem 0; }
-.ProseMirror blockquote { border-left: 3px solid #3b82f6; padding-left: 1rem; margin: 0.75rem 0; color: #888; font-style: italic; }
+.ProseMirror blockquote { border-left: 3px solid #ffb800; padding-left: 1rem; margin: 0.75rem 0; color: #888; font-style: italic; }
 .ProseMirror pre { background: #1a1a1a; border: 1px solid #252525; border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; }
-.ProseMirror code { background: #1a1a1a; border-radius: 3px; padding: 0.15em 0.4em; font-family: 'Courier New', monospace; font-size: 0.875em; color: #3b82f6; }
+.ProseMirror code { background: #1a1a1a; border-radius: 3px; padding: 0.15em 0.4em; font-family: 'Courier New', monospace; font-size: 0.875em; color: #ffb800; }
 .ProseMirror pre code { background: none; padding: 0; color: #cccccc; }
 .ProseMirror hr { border: none; border-top: 1px solid #252525; margin: 1.25rem 0; }
-.ProseMirror a { color: #3b82f6; text-decoration: underline; }
+.ProseMirror a { color: #ffb800; text-decoration: underline; }
 .ProseMirror img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.75rem 0; }
 .ProseMirror strong { font-weight: 700; color: #fff; }
 .ProseMirror em { font-style: italic; }
@@ -1249,7 +1249,7 @@ a.company-mention:hover {
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
-  color: #3b82f6;
+  color: #ffb800;
  margin-bottom: 14px;
 }
 .bb-modal-eyebrow-dot {
@@ -1257,7 +1257,7 @@ a.company-mention:hover {
  width: 7px;
  height: 7px;
  border-radius: 50%;
-  background: #3b82f6;
+  background: #ffb800;
  box-shadow: 0 0 10px rgba(59,130,246,0.65);
  animation: bb-modal-pulse 2.2s ease-in-out infinite;
 }
@@ -1306,7 +1306,7 @@ a.company-mention:hover {
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
 }
 .bb-modal-input:focus {
-  border-color: #3b82f6;
+  border-color: #ffb800;
  background: rgba(59,130,246,0.06);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
 }
@@ -1342,7 +1342,7 @@ a.company-mention:hover {
  border: 1px solid transparent;
 }
 .bb-modal-btn-primary {
-  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+  background: linear-gradient(180deg, #ffb800 0%, #d99700 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(59,130,246,0.28);
 }
@@ -1389,7 +1389,7 @@ a.company-mention:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  color: #3b82f6;
+  color: #ffb800;
 }
 .bb-modal-success-title {
  font-family: var(--font-heading);
@@ -1411,41 +1411,41 @@ a.company-mention:hover {

 /* ─── Neon homepage palette ─────────────────────────────────────────
   Scoped to the homepage via `.bb-neon` on the root <div>. CSS-only
-   recolor: maps the existing blue accents (#3b82f6 / #60a5fa) to the
+   recolor: maps the existing blue accents (#ffb800 / #ffd25a) to the
   ticker's emerald + cyan, with subtle glows. No layout changes. */
 .bb-neon {
-  --color-accent: #00ff9f;
-  --color-accent-dark: #00d4ff;
+  --color-accent: #ff4035;
+  --color-accent-dark: #ffd25a;
  --color-accent-muted: rgba(0, 255, 159, 0.18);
-  --color-text-info: #00d4ff;
-  --color-text-info-strong: #00ff9f;
+  --color-text-info: #ffd25a;
+  --color-text-info-strong: #ff4035;
 }

 /* Section headings — emerald with subtle glow */
 .bb-neon h2,
 .bb-neon h3.font-heading,
 .bb-neon .font-heading.section-title {
-  color: #00ff9f;
+  color: #ff4035;
  text-shadow: 0 0 6px rgba(0, 255, 159, 0.35);
  letter-spacing: -0.01em;
 }

 /* Existing blue text → cyan */
-.bb-neon .text-\[\#3b82f6\] {
-  color: #00d4ff !important;
+.bb-neon .text-\[\#ffb800\] {
+  color: #ffd25a !important;
  text-shadow: 0 0 4px rgba(0, 212, 255, 0.25);
 }
-.bb-neon .text-\[\#60a5fa\] {
-  color: #00d4ff !important;
+.bb-neon .text-\[\#ffd25a\] {
+  color: #ffd25a !important;
 }
 .bb-neon a:not(.bbt-item):not(.bbt-label):hover {
-  color: #00d4ff;
+  color: #ffd25a;
  text-shadow: 0 0 4px rgba(0, 212, 255, 0.35);
 }

 /* Borders previously blue → neon-tinted, subtle */
-.bb-neon .border-\[\#3b82f6\],
-.bb-neon .border-\[\#1e3a5f\] {
+.bb-neon .border-\[\#ffb800\],
+.bb-neon .border-\[\#4a3500\] {
  border-color: rgba(0, 255, 159, 0.35) !important;
 }

@@ -1467,26 +1467,26 @@ a.company-mention:hover {
 /* 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;
+.bb-neon .bg-\[\#ffb800\],
+.bb-neon button.bg-\[\#ffb800\],
+.bb-neon a.bg-\[\#ffb800\] {
+  background: linear-gradient(90deg, #ff4035 0%, #ffd25a 100%) !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\] * {
+.bb-neon .bg-\[\#ffb800\] *,
+.bb-neon button.bg-\[\#ffb800\] *,
+.bb-neon a.bg-\[\#ffb800\] * {
  color: #1a1a1a !important;
  text-shadow: none !important;
 }
-.bb-neon .bg-\[\#3b82f6\]:hover,
-.bb-neon .hover\:bg-\[\#2563eb\]:hover,
-.bb-neon button.bg-\[\#3b82f6\]:hover,
-.bb-neon a.bg-\[\#3b82f6\]:hover {
+.bb-neon .bg-\[\#ffb800\]:hover,
+.bb-neon .hover\:bg-\[\#d99700\]:hover,
+.bb-neon button.bg-\[\#ffb800\]:hover,
+.bb-neon a.bg-\[\#ffb800\]:hover {
  background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%) !important;
  box-shadow: 0 0 22px rgba(0, 255, 159, 0.45);
 }
@@ -1494,7 +1494,7 @@ a.company-mention:hover {
 /* 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;
+  background: linear-gradient(90deg, #ff4035 0%, #ffd25a 100%) !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
@@ -1515,13 +1515,13 @@ a.company-mention:hover {
 }

 /* Category pills / tags / "AI" badges — cyan via attribute selector */
-.bb-neon [class*="bg-[#3b82f6]/"] {
+.bb-neon [class*="bg-[#ffb800]/"] {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
 }

 /* Subscribe / newsletter accent boxes */
-.bb-neon .bg-\[\#1a2535\],
+.bb-neon .bg-\[\#1a1208\],
 .bb-neon .bg-\[\#0d1f35\] {
  background-color: #050a0a !important;
  border: 1px solid rgba(0, 255, 159, 0.25);
@@ -1555,13 +1555,13 @@ a.company-mention:hover {
 }

 /* Focus rings on interactive elements */
-.bb-neon .focus\:ring-\[\#3b82f6\]:focus,
-.bb-neon .focus-visible\:ring-\[\#3b82f6\]:focus-visible {
+.bb-neon .focus\:ring-\[\#ffb800\]:focus,
+.bb-neon .focus-visible\:ring-\[\#ffb800\]:focus-visible {
  --tw-ring-color: rgba(0, 212, 255, 0.6) !important;
 }
-.bb-neon .focus\:border-\[\#3b82f6\]:focus,
-.bb-neon .focus-visible\:border-\[\#3b82f6\]:focus-visible {
-  border-color: #00d4ff !important;
+.bb-neon .focus\:border-\[\#ffb800\]:focus,
+.bb-neon .focus-visible\:border-\[\#ffb800\]:focus-visible {
+  border-color: #ffd25a !important;
 }

 /* ─── Article body — NYT/WaPo-classy typography ──────────────────────────
@@ -1614,7 +1614,7 @@ a.company-mention:hover {
  line-height: 1.3;
 }
 .bb-article-prose blockquote {
-  border-left: 3px solid #00ff9f;
+  border-left: 3px solid #ff4035;
  padding: 0.4em 0 0.4em 1.2em;
  margin: 1.8em 0;
  font-style: italic;
@@ -1628,7 +1628,7 @@ a.company-mention:hover {
  font-size: 54px;
  line-height: 0;
  vertical-align: -0.4em;
-  color: #00ff9f;
+  color: #ff4035;
  margin-right: 0.15em;
  opacity: 0.55;
 }
@@ -1641,8 +1641,8 @@ a.company-mention:hover {
  transition: color 120ms ease, text-decoration-color 120ms ease;
 }
 .bb-article-prose a:hover {
-  color: #00d4ff;
-  text-decoration-color: #00d4ff;
+  color: #ffd25a;
+  text-decoration-color: #ffd25a;
 }
 .bb-article-prose figure {
  margin: 1.8em 0;