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

AV: precise recolor to spec — warm dark backgrounds (#1c1815/#231d18/#26201a/#15110e) + gold #F0A623 / orange #D85A30 accents + warm text (#FBEFE0/#C9BBA8/#8a7e6e). 138 component files + 36 token swaps.

Browse Source
This commit is contained in:
Ryan Salazar
2026-06-02 23:46:00 +00:00
parent 01c1abf99d
commit 2876ac6ecd
141 changed files with 2020 additions and 2020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/styles/tailwind.css
View File

@@ -3,20 +3,20 @@
@tailwind utilities;
:root {
--color-primary: #0d0d0d;
--color-secondary: #161616;
--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: #1a1208;
--color-sub-nav: #161310;
--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;
/* --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 +83,7 @@ body {
background: linear-gradient(
90deg,
#1e1e1e 25%,
#2a2a2a 50%,
#3a322b 50%,
#1e1e1e 75%
);
background-size: 200% 100%;
@@ -248,7 +248,7 @@ body {
width: 6px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
background: #231d18;
}
::-webkit-scrollbar-thumb {
background: #2a3a50;
@@ -291,7 +291,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: #222222;
background: #3a322b;
}
/* Search bar wrapper — expands on focus */
@@ -319,7 +319,7 @@ body {
font-size: 11px;
font-family: var(--font-mono);
color: #555;
background: #2a2a2a;
background: #3a322b;
border: 1px solid #3a3a3a;
border-radius: 2px;
padding: 1px 5px;
@@ -348,7 +348,7 @@ body {
.search-clear-btn:hover {
color: #cccccc;
background: #2a2a2a;
background: #3a322b;
}
/* =====================
@@ -403,8 +403,8 @@ body {
AD PLACEHOLDER
===================== */
.ad-placeholder {
background: #1a1a1a;
border: 1px solid #2a2a2a;
background: #231d18;
border: 1px solid #3a322b;
display: flex;
align-items: center;
justify-content: center;
@@ -438,7 +438,7 @@ body {
font-weight: 600;
padding: 5px 12px;
border: 1px solid #333333;
background: #1a1a1a;
background: #231d18;
color: #cccccc;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
@@ -516,8 +516,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%, #ffd25a 100%);
color: #1a1a1a;
background: linear-gradient(90deg, #ff4035 0%, #F0A623 100%);
color: #231d18;
font-weight: 900;
text-shadow: none;
box-shadow: 0 0 12px rgba(0, 212, 255, 0.25);
@@ -540,11 +540,11 @@ h1, h2, h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #e8e8e8;
color: #FBEFE0;
margin-top: 2rem;
margin-bottom: 0.875rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #2a2a2a;
border-bottom: 1px solid #3a322b;
}
.article-body h3 {
@@ -577,7 +577,7 @@ h1, h2, h3 {
}
.article-body strong {
color: #e8e8e8;
color: #FBEFE0;
font-weight: 700;
}
@@ -622,8 +622,8 @@ a.company-mention:hover {
SPOTLIGHT CARD
===================== */
.spotlight-card {
background: #1a1a1a;
border: 1px solid #2a2a2a;
background: #231d18;
border: 1px solid #3a322b;
overflow: hidden;
transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
@@ -766,7 +766,7 @@ a.company-mention:hover {
text-transform: uppercase;
padding: 4px 10px;
border: 1px solid #333;
background: #1a1a1a;
background: #231d18;
color: #888;
cursor: pointer;
border-radius: 2px;
@@ -838,18 +838,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: #e8e8e8; }
.ProseMirror h2 { font-size: 1.4rem; font-weight: 700; margin: 0.9rem 0 0.4rem; color: #FBEFE0; }
.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 #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: #ffb800; }
.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 pre code { background: none; padding: 0; color: #cccccc; }
.ProseMirror hr { border: none; border-top: 1px solid #252525; margin: 1.25rem 0; }
.ProseMirror a { color: #ffb800; text-decoration: underline; }
.ProseMirror hr { border: none; border-top: 1px solid #3a322b; margin: 1.25rem 0; }
.ProseMirror a { color: #F0A623; 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: #ffb800;
color: #F0A623;
margin-bottom: 14px;
}
.bb-modal-eyebrow-dot {
@@ -1257,7 +1257,7 @@ a.company-mention:hover {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ffb800;
background: #F0A623;
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: #ffb800;
border-color: #F0A623;
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, #ffb800 0%, #d99700 100%);
background: linear-gradient(180deg, #F0A623 0%, #BA7517 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: #ffb800;
color: #F0A623;
}
.bb-modal-success-title {
font-family: var(--font-heading);
@@ -1411,13 +1411,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 (#ffb800 / #ffd25a) to the
recolor: maps the existing blue accents (#F0A623 / #F0A623) to the
ticker's emerald + cyan, with subtle glows. No layout changes. */
.bb-neon {
--color-accent: #ff4035;
--color-accent-dark: #ffd25a;
--color-accent-dark: #F0A623;
--color-accent-muted: rgba(0, 255, 159, 0.18);
--color-text-info: #ffd25a;
--color-text-info: #F0A623;
--color-text-info-strong: #ff4035;
}
@@ -1431,62 +1431,62 @@ a.company-mention:hover {
}
/* Existing blue text → cyan */
.bb-neon .text-\[\#ffb800\] {
color: #ffd25a !important;
.bb-neon .text-\[\#F0A623\] {
color: #F0A623 !important;
text-shadow: 0 0 4px rgba(0, 212, 255, 0.25);
}
.bb-neon .text-\[\#ffd25a\] {
color: #ffd25a !important;
.bb-neon .text-\[\#F0A623\] {
color: #F0A623 !important;
}
.bb-neon a:not(.bbt-item):not(.bbt-label):hover {
color: #ffd25a;
color: #F0A623;
text-shadow: 0 0 4px rgba(0, 212, 255, 0.35);
}
/* Borders previously blue → neon-tinted, subtle */
.bb-neon .border-\[\#ffb800\],
.bb-neon .border-\[\#4a3500\] {
.bb-neon .border-\[\#F0A623\],
.bb-neon .border-\[\#412402\] {
border-color: rgba(0, 255, 159, 0.35) !important;
}
/* Card border softening to neon */
.bb-neon .border-\[\#252525\],
.bb-neon .border-\[\#2a2a2a\] {
.bb-neon .border-\[\#3a322b\],
.bb-neon .border-\[\#3a322b\] {
border-color: rgba(0, 255, 159, 0.14) !important;
}
/* Hover state on cards / clickable wrappers — cyan border + faint glow */
.bb-neon .border-\[\#252525\]:hover,
.bb-neon .border-\[\#2a2a2a\]:hover,
.bb-neon a:hover > .border-\[\#252525\],
.bb-neon a:hover > .border-\[\#2a2a2a\] {
.bb-neon .border-\[\#3a322b\]:hover,
.bb-neon .border-\[\#3a322b\]:hover,
.bb-neon a:hover > .border-\[\#3a322b\],
.bb-neon a:hover > .border-\[\#3a322b\] {
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 (#1a1a1a) so the button
Use the same dark gray as the card backgrounds (#231d18) so the button
reads as a brand-color "chip" punching out the panel. */
.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;
.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;
font-weight: 800 !important;
text-shadow: none !important;
box-shadow: 0 0 14px rgba(0, 212, 255, 0.30);
border: none;
}
.bb-neon .bg-\[\#ffb800\] *,
.bb-neon button.bg-\[\#ffb800\] *,
.bb-neon a.bg-\[\#ffb800\] * {
color: #1a1a1a !important;
.bb-neon .bg-\[\#F0A623\] *,
.bb-neon button.bg-\[\#F0A623\] *,
.bb-neon a.bg-\[\#F0A623\] * {
color: #231d18 !important;
text-shadow: none !important;
}
.bb-neon .bg-\[\#ffb800\]:hover,
.bb-neon .hover\:bg-\[\#d99700\]:hover,
.bb-neon button.bg-\[\#ffb800\]:hover,
.bb-neon a.bg-\[\#ffb800\]:hover {
.bb-neon .bg-\[\#F0A623\]:hover,
.bb-neon .hover\:bg-\[\#BA7517\]:hover,
.bb-neon button.bg-\[\#F0A623\]:hover,
.bb-neon a.bg-\[\#F0A623\]:hover {
background: linear-gradient(90deg, #14ffb0 0%, #4ee0ff 100%) !important;
box-shadow: 0 0 22px rgba(0, 255, 159, 0.45);
}
@@ -1494,8 +1494,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%, #ffd25a 100%) !important;
color: #1a1a1a !important;
background: linear-gradient(90deg, #ff4035 0%, #F0A623 100%) !important;
color: #231d18 !important;
font-weight: 800 !important;
text-shadow: none !important;
box-shadow: 0 0 14px rgba(0, 212, 255, 0.30) !important;
@@ -1511,17 +1511,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: #1a1a1a !important;
color: #231d18 !important;
}
/* Category pills / tags / "AI" badges — cyan via attribute selector */
.bb-neon [class*="bg-[#ffb800]/"] {
.bb-neon [class*="bg-[#F0A623]/"] {
background: rgba(0, 212, 255, 0.12) !important;
border-color: rgba(0, 212, 255, 0.35) !important;
}
/* Subscribe / newsletter accent boxes */
.bb-neon .bg-\[\#1a1208\],
.bb-neon .bg-\[\#231d18\],
.bb-neon .bg-\[\#0d1f35\] {
background-color: #050a0a !important;
border: 1px solid rgba(0, 255, 159, 0.25);
@@ -1538,30 +1538,30 @@ a.company-mention:hover {
/* Skeletons keep their dim look — don't recolor */
.bb-neon .skeleton {
background: #0d0d0d;
background: #1c1815;
}
/* Divider lines */
.bb-neon hr,
.bb-neon .h-px.bg-\[\#2a2a2a\],
.bb-neon .h-px.bg-\[\#3a322b\],
.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-\[\#e8e8e8\],
.bb-neon .text-\[\#FBEFE0\],
.bb-neon .text-\[\#e0e0e0\] {
color: #d1d5db !important;
}
/* Focus rings on interactive elements */
.bb-neon .focus\:ring-\[\#ffb800\]:focus,
.bb-neon .focus-visible\:ring-\[\#ffb800\]:focus-visible {
.bb-neon .focus\:ring-\[\#F0A623\]:focus,
.bb-neon .focus-visible\:ring-\[\#F0A623\]:focus-visible {
--tw-ring-color: rgba(0, 212, 255, 0.6) !important;
}
.bb-neon .focus\:border-\[\#ffb800\]:focus,
.bb-neon .focus-visible\:border-\[\#ffb800\]:focus-visible {
border-color: #ffd25a !important;
.bb-neon .focus\:border-\[\#F0A623\]:focus,
.bb-neon .focus-visible\:border-\[\#F0A623\]:focus-visible {
border-color: #F0A623 !important;
}
/* ─── Article body — NYT/WaPo-classy typography ──────────────────────────
@@ -1641,8 +1641,8 @@ a.company-mention:hover {
transition: color 120ms ease, text-decoration-color 120ms ease;
}
.bb-article-prose a:hover {
color: #ffd25a;
text-decoration-color: #ffd25a;
color: #F0A623;
text-decoration-color: #F0A623;
}
.bb-article-prose figure {
margin: 1.8em 0;
@@ -1687,7 +1687,7 @@ a.company-mention:hover {
.bb-article-prose code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92em;
background: #1a1a1a;
background: #231d18;
padding: 0.1em 0.4em;
border-radius: 3px;
color: #f0eee8;