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

feat(brand): AV BEAT 2026 rebrand — blue/navy/white identity

Browse Source 
- New AvBeatLogo inline-SVG component (rounded-square emblem with
  forward-leaning AV monogram + horizontal beam detail) at
  src/components/AvBeatLogo.tsx, three variants (full/wordmark/icon).
- Header.tsx now uses the responsive AV BEAT logo lockup in the
  top-left, links to /, full lockup on desktop (emblem+wordmark+tagline),
  emblem+wordmark on tablet, emblem-only on mobile.
- Removed DualSpeedTicker (the 'RECENT FORUM POSTS' ticker strip);
  the news ticker / glow chrome does not match the new aesthetic and the
  forum row was the explicit removal target.
- Tailwind theme + globals.css now expose the AV BEAT 2026 palette as
  semantic tokens: --brand-blue (#1D4ED8), --brand-blue-bright (#38BDF8),
  --brand-navy (#0F172A), --brand-bg (#F8FAFC), --brand-surface, --brand-border,
  --brand-text, --brand-text-muted. Legacy --color-* aliases re-point to the
  new tokens so any inline-styled component re-themes for free.
- Site-wide hex sweep migrates 2,769 hardcoded color literals across 144
  files from the old dark-broadcast palette to the new tokens (orange
  -> blue, dark-brown -> white surface / navy text, cream -> navy).
- Layout body class flipped from 'bb-neon' to 'bg-brand-bg text-brand-text'
  so the dark glow chrome no longer leaks through the new light theme.
This commit is contained in:
Local Administrator
2026-06-03 12:07:18 +00:00
parent 39d2bf9073
commit 8042024c4a
146 changed files with 2219 additions and 2081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/styles/tailwind.css
View File

@@ -3,20 +3,36 @@
@tailwind utilities;
:root {
--color-primary: #1c1815;
--color-secondary: #231d18;
--color-accent: #F0A623;
--color-accent-dark: #BA7517;
--color-accent-muted: #412402;
--color-accent-red: #D85A30;
--color-accent-red-dark: #E24B4A;
--color-bg: #1c1815;
--color-card: #231d18;
--color-foreground: #FBEFE0;
--color-muted: #C9BBA8;
--color-border: #3a322b;
--color-top-bar: #231d18;
--color-sub-nav: #26201a;
/* AV BEAT 2026 brand palette — single source of truth.
Used as both Tailwind theme values (tailwind.config.js) and direct
CSS custom properties in arbitrary inline styles. Update here and
the entire site re-themes. */
--brand-blue: #1D4ED8;
--brand-blue-bright: #38BDF8;
--brand-navy: #0F172A;
--brand-white: #FFFFFF;
--brand-bg: #F8FAFC;
--brand-surface: #FFFFFF;
--brand-border: #DCE6F2;
--brand-text: #0F172A;
--brand-text-muted: #475569;
/* Legacy aliases — every `--color-*` previously consumed by inline
styles or component CSS now resolves to the new identity. */
--color-primary: var(--brand-navy);
--color-secondary: var(--brand-surface);
--color-accent: var(--brand-blue);
--color-accent-dark: #1E3A8A;
--color-accent-muted: var(--brand-border);
--color-accent-red: var(--brand-blue);
--color-accent-red-dark:#1E3A8A;
--color-bg: var(--brand-bg);
--color-card: var(--brand-surface);
--color-foreground: var(--brand-text);
--color-muted: var(--brand-text-muted);
--color-border: var(--brand-border);
--color-top-bar: var(--brand-surface);
--color-sub-nav: var(--brand-bg);
/* --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. */
@@ -83,7 +99,7 @@ body {
background: linear-gradient(
90deg,
#1e1e1e 25%,
#3a322b 50%,
#DCE6F2 50%,
#1e1e1e 75%
);
background-size: 200% 100%;
@@ -248,7 +264,7 @@ body {
width: 6px;
}
::-webkit-scrollbar-track {
background: #231d18;
background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
background: #2a3a50;
@@ -291,7 +307,7 @@ body {
.search-input-enhanced:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 2px 8px rgba(0,0,0,0.4);
background: #3a322b;
background: #DCE6F2;
}
/* Search bar wrapper — expands on focus */
@@ -319,7 +335,7 @@ body {
font-size: 11px;
font-family: var(--font-mono);
color: #555;
background: #3a322b;
background: #DCE6F2;
border: 1px solid #3a3a3a;
border-radius: 2px;
padding: 1px 5px;
@@ -348,7 +364,7 @@ body {
.search-clear-btn:hover {
color: #cccccc;
background: #3a322b;
background: #DCE6F2;
}
/* =====================
@@ -403,8 +419,8 @@ body {
AD PLACEHOLDER
===================== */
.ad-placeholder {
background: #231d18;
border: 1px solid #3a322b;
background: #FFFFFF;
border: 1px solid #DCE6F2;
display: flex;
align-items: center;
justify-content: center;
@@ -438,7 +454,7 @@ body {
font-weight: 600;
padding: 5px 12px;
border: 1px solid #333333;
background: #231d18;
background: #FFFFFF;
color: #cccccc;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
@@ -516,8 +532,8 @@ h1, h2, h3 {
}
/* Under neon scope: green→cyan gradient with dark-gray text (matches other CTAs) */
.bb-neon .read-more {
background: linear-gradient(90deg, #ff4035 0%, #F0A623 100%);
color: #231d18;
background: linear-gradient(90deg, #ff4035 0%, #1D4ED8 100%);
color: #FFFFFF;
font-weight: 900;
text-shadow: none;
box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
@@ -540,11 +556,11 @@ h1, h2, h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #FBEFE0;
color: #0F172A;
margin-top: 2rem;
margin-bottom: 0.875rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #3a322b;
border-bottom: 1px solid #DCE6F2;
}
.article-body h3 {
@@ -577,7 +593,7 @@ h1, h2, h3 {
}
.article-body strong {
color: #FBEFE0;
color: #0F172A;
font-weight: 700;
}
@@ -622,8 +638,8 @@ a.company-mention:hover {
SPOTLIGHT CARD
===================== */
.spotlight-card {
background: #231d18;
border: 1px solid #3a322b;
background: #FFFFFF;
border: 1px solid #DCE6F2;
overflow: hidden;
transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
@@ -766,7 +782,7 @@ a.company-mention:hover {
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid #333;
background: #231d18;
background: #FFFFFF;
color: #888;
cursor: pointer;
border-radius: 2px;
@@ -838,18 +854,18 @@ a.company-mention:hover {
}
.ProseMirror h1 { font-size: 1.75rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #fff; }
.ProseMirror h2 { font-size: 1.4rem; font-weight: 700; margin: 0.9rem 0 0.4rem; color: #FBEFE0; }
.ProseMirror h2 { font-size: 1.4rem; font-weight: 700; margin: 0.9rem 0 0.4rem; color: #0F172A; }
.ProseMirror h3 { font-size: 1.15rem; font-weight: 700; margin: 0.8rem 0 0.35rem; color: #cccccc; }
.ProseMirror p { margin: 0.5rem 0; line-height: 1.7; }
.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 #F0A623; padding-left: 1rem; margin: 0.75rem 0; color: #888; font-style: italic; }
.ProseMirror pre { background: #231d18; border: 1px solid #3a322b; border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; }
.ProseMirror code { background: #231d18; border-radius: 3px; padding: 0.15em 0.4em; font-family: 'Courier New', monospace; font-size: 0.875em; color: #F0A623; }
.ProseMirror blockquote { border-left: 3px solid #1D4ED8; padding-left: 1rem; margin: 0.75rem 0; color: #888; font-style: italic; }
.ProseMirror pre { background: #FFFFFF; border: 1px solid #DCE6F2; border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; }
.ProseMirror code { background: #FFFFFF; border-radius: 3px; padding: 0.15em 0.4em; font-family: 'Courier New', monospace; font-size: 0.875em; color: #1D4ED8; }
.ProseMirror pre code { background: none; padding: 0; color: #cccccc; }
.ProseMirror hr { border: none; border-top: 1px solid #3a322b; margin: 1.25rem 0; }
.ProseMirror a { color: #F0A623; text-decoration: underline; }
.ProseMirror hr { border: none; border-top: 1px solid #DCE6F2; margin: 1.25rem 0; }
.ProseMirror a { color: #1D4ED8; 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 +1265,7 @@ a.company-mention:hover {
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #F0A623;
color: #1D4ED8;
margin-bottom: 14px;
}
.bb-modal-eyebrow-dot {
@@ -1257,7 +1273,7 @@ a.company-mention:hover {
width: 7px;
height: 7px;
border-radius: 50%;
background: #F0A623;
background: #1D4ED8;
box-shadow: 0 0 10px rgba(59,130,246,0.65);
animation: bb-modal-pulse 2.2s ease-in-out infinite;
}
@@ -1306,7 +1322,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: #F0A623;
border-color: #1D4ED8;
background: rgba(59,130,246,0.06);
box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
@@ -1342,7 +1358,7 @@ a.company-mention:hover {
border: 1px solid transparent;
}
.bb-modal-btn-primary {
background: linear-gradient(180deg, #F0A623 0%, #BA7517 100%);
background: linear-gradient(180deg, #1D4ED8 0%, #1E3A8A 100%);
color: #ffffff;
box-shadow: 0 6px 18px rgba(59,130,246,0.28);
}
@@ -1389,7 +1405,7 @@ a.company-mention:hover {
display: inline-flex;
align-items: center;
justify-content: center;
color: #F0A623;
color: #1D4ED8;
}
.bb-modal-success-title {
font-family: var(--font-heading);
@@ -1411,13 +1427,13 @@ 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 (#F0A623 / #F0A623) to the
recolor: maps the existing blue accents (#1D4ED8 / #1D4ED8) to the
ticker's emerald + cyan, with subtle glows. No layout changes. */
.bb-neon {
--color-accent: #ff4035;
--color-accent-dark: #F0A623;
--color-accent-dark: #1D4ED8;
--color-accent-muted: rgba(0, 255, 159, 0.18);
--color-text-info: #F0A623;
--color-text-info: #1D4ED8;
--color-text-info-strong: #ff4035;
}
@@ -1431,62 +1447,62 @@ a.company-mention:hover {
}
/* Existing blue text → cyan */
.bb-neon .text-\[\#F0A623\] {
color: #F0A623 !important;
.bb-neon .text-\[\#1D4ED8\] {
color: #1D4ED8 !important;
text-shadow: 0 0 4px rgba(0, 212, 255, 0.25);
}
.bb-neon .text-\[\#F0A623\] {
color: #F0A623 !important;
.bb-neon .text-\[\#1D4ED8\] {
color: #1D4ED8 !important;
}
.bb-neon a:not(.bbt-item):not(.bbt-label):hover {
color: #F0A623;
color: #1D4ED8;
text-shadow: 0 0 4px rgba(0, 212, 255, 0.35);
}
/* Borders previously blue → neon-tinted, subtle */
.bb-neon .border-\[\#F0A623\],
.bb-neon .border-\[\#412402\] {
.bb-neon .border-\[\#1D4ED8\],
.bb-neon .border-\[\#DCE6F2\] {
border-color: rgba(0, 255, 159, 0.35) !important;
}
/* Card border softening to neon */
.bb-neon .border-\[\#3a322b\],
.bb-neon .border-\[\#3a322b\] {
.bb-neon .border-\[\#DCE6F2\],
.bb-neon .border-\[\#DCE6F2\] {
border-color: rgba(0, 255, 159, 0.14) !important;
}
/* Hover state on cards / clickable wrappers — cyan border + faint glow */
.bb-neon .border-\[\#3a322b\]:hover,
.bb-neon .border-\[\#3a322b\]:hover,
.bb-neon a:hover > .border-\[\#3a322b\],
.bb-neon a:hover > .border-\[\#3a322b\] {
.bb-neon .border-\[\#DCE6F2\]:hover,
.bb-neon .border-\[\#DCE6F2\]:hover,
.bb-neon a:hover > .border-\[\#DCE6F2\],
.bb-neon a:hover > .border-\[\#DCE6F2\] {
border-color: rgba(0, 212, 255, 0.55) !important;
box-shadow: 0 0 14px rgba(0, 212, 255, 0.18);
}
/* Buttons previously blue → emerald→cyan gradient with dark text inverted.
Use the same dark gray as the card backgrounds (#231d18) so the button
Use the same dark gray as the card backgrounds (#FFFFFF) so the button
reads as a brand-color "chip" punching out the panel. */
.bb-neon .bg-\[\#F0A623\],
.bb-neon button.bg-\[\#F0A623\],
.bb-neon a.bg-\[\#F0A623\] {
background: linear-gradient(90deg, #ff4035 0%, #F0A623 100%) !important;
color: #231d18 !important;
.bb-neon .bg-\[\#1D4ED8\],
.bb-neon button.bg-\[\#1D4ED8\],
.bb-neon a.bg-\[\#1D4ED8\] {
background: linear-gradient(90deg, #ff4035 0%, #1D4ED8 100%) !important;
color: #FFFFFF !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-\[\#F0A623\] *,
.bb-neon button.bg-\[\#F0A623\] *,
.bb-neon a.bg-\[\#F0A623\] * {
color: #231d18 !important;
.bb-neon .bg-\[\#1D4ED8\] *,
.bb-neon button.bg-\[\#1D4ED8\] *,
.bb-neon a.bg-\[\#1D4ED8\] * {
color: #FFFFFF !important;
text-shadow: none !important;
}
.bb-neon .bg-\[\#F0A623\]:hover,
.bb-neon .hover\:bg-\[\#BA7517\]:hover,
.bb-neon button.bg-\[\#F0A623\]:hover,
.bb-neon a.bg-\[\#F0A623\]:hover {
.bb-neon .bg-\[\#1D4ED8\]:hover,
.bb-neon .hover\:bg-\[\#1E3A8A\]:hover,
.bb-neon button.bg-\[\#1D4ED8\]:hover,
.bb-neon a.bg-\[\#1D4ED8\]:hover {
background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%) !important;
box-shadow: 0 0 22px rgba(0, 255, 159, 0.45);
}
@@ -1494,8 +1510,8 @@ 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, #ff4035 0%, #F0A623 100%) !important;
color: #231d18 !important;
background: linear-gradient(90deg, #ff4035 0%, #1D4ED8 100%) !important;
color: #FFFFFF !important;
font-weight: 800 !important;
text-shadow: none !important;
box-shadow: 0 0 14px rgba(0, 212, 255, 0.30) !important;
@@ -1511,17 +1527,17 @@ a.company-mention:hover {
.bb-neon a[style*="--color-accent"],
.bb-neon [style*="background: var(--color-accent)"],
.bb-neon [style*="background-color: var(--color-accent)"] {
color: #231d18 !important;
color: #FFFFFF !important;
}
/* Category pills / tags / "AI" badges — cyan via attribute selector */
.bb-neon [class*="bg-[#F0A623]/"] {
.bb-neon [class*="bg-[#1D4ED8]/"] {
background: rgba(0, 212, 255, 0.12) !important;
border-color: rgba(0, 212, 255, 0.35) !important;
}
/* Subscribe / newsletter accent boxes */
.bb-neon .bg-\[\#231d18\],
.bb-neon .bg-\[\#FFFFFF\],
.bb-neon .bg-\[\#0d1f35\] {
background-color: #050a0a !important;
border: 1px solid rgba(0, 255, 159, 0.25);
@@ -1538,30 +1554,30 @@ a.company-mention:hover {
/* Skeletons keep their dim look — don't recolor */
.bb-neon .skeleton {
background: #1c1815;
background: #F8FAFC;
}
/* Divider lines */
.bb-neon hr,
.bb-neon .h-px.bg-\[\#3a322b\],
.bb-neon .h-px.bg-\[\#DCE6F2\],
.bb-neon .bg-\[\#222\] {
background-color: rgba(0, 255, 159, 0.15) !important;
}
/* Body / paragraph copy: lean toward spec's #d1d5db where currently muted */
.bb-neon .text-\[\#FBEFE0\],
.bb-neon .text-\[\#0F172A\],
.bb-neon .text-\[\#e0e0e0\] {
color: #d1d5db !important;
}
/* Focus rings on interactive elements */
.bb-neon .focus\:ring-\[\#F0A623\]:focus,
.bb-neon .focus-visible\:ring-\[\#F0A623\]:focus-visible {
.bb-neon .focus\:ring-\[\#1D4ED8\]:focus,
.bb-neon .focus-visible\:ring-\[\#1D4ED8\]:focus-visible {
--tw-ring-color: rgba(0, 212, 255, 0.6) !important;
}
.bb-neon .focus\:border-\[\#F0A623\]:focus,
.bb-neon .focus-visible\:border-\[\#F0A623\]:focus-visible {
border-color: #F0A623 !important;
.bb-neon .focus\:border-\[\#1D4ED8\]:focus,
.bb-neon .focus-visible\:border-\[\#1D4ED8\]:focus-visible {
border-color: #1D4ED8 !important;
}
/* ─── Article body — NYT/WaPo-classy typography ──────────────────────────
@@ -1641,8 +1657,8 @@ a.company-mention:hover {
transition: color 120ms ease, text-decoration-color 120ms ease;
}
.bb-article-prose a:hover {
color: #F0A623;
text-decoration-color: #F0A623;
color: #1D4ED8;
text-decoration-color: #1D4ED8;
}
.bb-article-prose figure {
margin: 1.8em 0;
@@ -1687,7 +1703,7 @@ a.company-mention:hover {
.bb-article-prose code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92em;
background: #231d18;
background: #FFFFFF;
padding: 0.1em 0.4em;
border-radius: 3px;
color: #f0eee8;