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

slice 4: accent palette refinement — blue → teal

Browse Source 
Replace the four accent-family hex codes site-wide with the teal palette
(keeps the dark theme; only swaps the accent family, not the dark base):

  #3b82f6 (accent primary CTA)   → #5B7C8D  (teal)        [839×]
  #2563eb (accent-dark / hover)  → #4A6473  (darker teal) [44×]
  #60a5fa (info link, lighter)   → #8FB0C3  (mid teal)    [68×]
  #1e3a5f (accent-muted bg)      → #2F4F5F  (navy)        [44×]

tailwind.config.js tokens updated to match (accent/accent-dark/accent-muted).
Sweep also covers tailwind.css. 108 files touched. The dark base (#0d0d0d,
#111, #161616, #1a1a1a etc.) is intentionally untouched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar (via Claude)
2026-05-15 23:33:04 +00:00
parent f6fa7570c4
commit 52fe7bceb6
109 changed files with 937 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/news/NewsPageClient.tsx
View File

@@ -146,7 +146,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
placeholder="Search articles, topics, authors…"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] text-[#e0e0e0] placeholder-[#555] text-sm font-body pl-9 pr-4 py-2.5 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors"
className="w-full bg-[#1a1a1a] border border-[#2a2a2a] text-[#e0e0e0] placeholder-[#555] text-sm font-body pl-9 pr-4 py-2.5 rounded-sm focus:outline-none focus:border-[#5B7C8D] transition-colors"
/>
{search && (
<button
@@ -167,7 +167,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
type="date"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors [color-scheme:dark]"
className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#5B7C8D] transition-colors [color-scheme:dark]"
title="From date"
/>
<span className="text-[#444] text-xs">–</span>
@@ -175,7 +175,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
type="date"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors [color-scheme:dark]"
className="bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body px-3 py-2.5 rounded-sm focus:outline-none focus:border-[#5B7C8D] transition-colors [color-scheme:dark]"
title="To date"
/>
</div>
@@ -185,7 +185,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="appearance-none bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body pl-3 pr-8 py-2.5 rounded-sm focus:outline-none focus:border-[#3b82f6] transition-colors cursor-pointer"
className="appearance-none bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] text-xs font-body pl-3 pr-8 py-2.5 rounded-sm focus:outline-none focus:border-[#5B7C8D] transition-colors cursor-pointer"
>
{SORT_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -207,8 +207,8 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
onClick={() => setActiveCategory(cat)}
className={`px-2.5 py-1 text-[11px] font-body rounded-sm border transition-colors ${
activeCategory === cat
? "bg-[#3b82f6] border-[#3b82f6] text-white"
: "bg-[#1a1a1a] border-[#2a2a2a] text-[#888] hover:border-[#3b82f6] hover:text-[#3b82f6]"
? "bg-[#5B7C8D] border-[#5B7C8D] text-white"
: "bg-[#1a1a1a] border-[#2a2a2a] text-[#888] hover:border-[#5B7C8D] hover:text-[#5B7C8D]"
}`}
>
{cat}
@@ -246,7 +246,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p className="text-[#555] font-body text-sm">No articles match your filters.</p>
<button onClick={clearFilters} className="mt-3 text-[#3b82f6] text-xs font-body hover:underline">Clear filters</button>
<button onClick={clearFilters} className="mt-3 text-[#5B7C8D] text-xs font-body hover:underline">Clear filters</button>
</div>
) : (
<div className="space-y-0">
@@ -268,9 +268,9 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1.5">
<span className="text-[#3b82f6] font-body text-[10px] font-bold uppercase tracking-wider">{article.category || "NEWS"}</span>
<span className="text-[#5B7C8D] font-body text-[10px] font-bold uppercase tracking-wider">{article.category || "NEWS"}</span>
</div>
<h2 className="font-heading text-[#e0e0e0] text-base font-bold leading-snug mb-2 group-hover:text-[#3b82f6] transition-colors line-clamp-2">
<h2 className="font-heading text-[#e0e0e0] text-base font-bold leading-snug mb-2 group-hover:text-[#5B7C8D] transition-colors line-clamp-2">
{article.title || "Untitled"}
</h2>
<p className="text-[#777] font-body text-sm leading-relaxed line-clamp-2">{article.excerpt || ""}</p>
@@ -293,7 +293,7 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
<AISuggestedArticles variant="full" />
<div className="bg-[#111] border border-[#222] p-4">
<h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-3 pb-2 border-b border-[#222]">
<h3 className="font-body font-bold text-xs text-[#5B7C8D] uppercase tracking-widest mb-3 pb-2 border-b border-[#222]">
Popular Tags
</h3>
<div className="flex flex-wrap gap-2">
@@ -303,8 +303,8 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
onClick={() => setActiveCategory(tag)}
className={`px-2 py-1 border text-xs font-body rounded-sm transition-colors ${
activeCategory === tag
? "bg-[#3b82f6] border-[#3b82f6] text-white"
: "bg-[#1a1a1a] border-[#2a2a2a] text-[#888] hover:border-[#3b82f6] hover:text-[#3b82f6]"
? "bg-[#5B7C8D] border-[#5B7C8D] text-white"
: "bg-[#1a1a1a] border-[#2a2a2a] text-[#888] hover:border-[#5B7C8D] hover:text-[#5B7C8D]"
}`}
>
{tag}
@@ -312,8 +312,8 @@ export default function NewsPage({ articles }: { articles: Article[] }) {
))}
</div>
</div>
<div className="bg-[#0d1520] border border-[#1e3a5f] p-4">
<h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-2">Newsletter</h3>
<div className="bg-[#0d1520] border border-[#2F4F5F] p-4">
<h3 className="font-body font-bold text-xs text-[#5B7C8D] uppercase tracking-widest mb-2">Newsletter</h3>
<p className="text-[#777] text-xs font-body mb-3">Get broadcast news delivered to your inbox every week.</p>
<Link href="/home-page#newsletter" className="btn-subscribe text-xs py-2 px-4 inline-block">Subscribe Free</Link>
</div>

52
src/app/news/[slug]/NewsArticleDetailClient.tsx
View File

@@ -271,11 +271,11 @@ export default function NewsArticleDetailClient({
{/* Breadcrumb */}
<div className="bg-[#0d0d0d] border-b border-[#1a1a1a]">
<div className="max-w-container mx-auto px-4 py-2.5 flex items-center gap-2 text-xs font-body text-[#555]">
<Link href="/home-page" className="hover:text-[#3b82f6] transition-colors">
<Link href="/home-page" className="hover:text-[#5B7C8D] transition-colors">
Home
</Link>
<span>/</span>
<Link href="/news" className="hover:text-[#3b82f6] transition-colors">
<Link href="/news" className="hover:text-[#5B7C8D] transition-colors">
News
</Link>
<span>/</span>
@@ -293,7 +293,7 @@ export default function NewsArticleDetailClient({
<div className="flex items-center gap-3 mb-4">
<Link
href="/news"
className="text-xs font-bold uppercase tracking-widest text-[#3b82f6] hover:underline">
className="text-xs font-bold uppercase tracking-widest text-[#5B7C8D] hover:underline">
{article.category}
</Link>
<span className="text-xs text-[#777]">{article.readTime}</span>
@@ -319,7 +319,7 @@ export default function NewsArticleDetailClient({
<div>
<Link
href={`/authors/${article.authorSlug}`}
className="font-heading font-bold text-sm hover:text-[#3b82f6] transition-colors text-[#e0e0e0]">
className="font-heading font-bold text-sm hover:text-[#5B7C8D] transition-colors text-[#e0e0e0]">
{article.author}
</Link>
<p className="font-body text-xs text-[#777]">{article.authorTitle}</p>
@@ -332,7 +332,7 @@ export default function NewsArticleDetailClient({
<button
onClick={() => setEmailShareOpen(true)}
aria-label="Share via email"
className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-widest text-[#888] hover:text-[#3b82f6] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-widest text-[#888] hover:text-[#5B7C8D] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="14"
height="14"
@@ -352,7 +352,7 @@ export default function NewsArticleDetailClient({
onClick={handleSaveToReadingList}
disabled={savingState !== "idle"}
aria-label={isSaved ? "Remove from reading list" : "Save to reading list"}
className="text-xs font-bold uppercase tracking-widest text-[#3b82f6] hover:text-blue-300 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="text-xs font-bold uppercase tracking-widest text-[#5B7C8D] hover:text-blue-300 disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
{savingState === "saving" ?"Saving..."
: savingState === "removing" ?"Removing..."
: isSaved
@@ -384,7 +384,7 @@ export default function NewsArticleDetailClient({
[&_ul]:mb-4 [&_ul]:pl-5 [&_ul]:space-y-2
[&_li]:text-[#aaa]
[&_strong]:text-[#e0e0e0] [&_strong]:font-bold
[&_a]:text-[#3b82f6] [&_a]:hover:underline"
[&_a]:text-[#5B7C8D] [&_a]:hover:underline"
/>
{/* Tags */}
@@ -395,7 +395,7 @@ export default function NewsArticleDetailClient({
{article.tags.map((tag) => (
<span
key={tag}
className="px-3 py-1 text-xs font-body bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] hover:border-[#3b82f6] hover:text-[#3b82f6] transition-colors rounded-sm cursor-default">
className="px-3 py-1 text-xs font-body bg-[#1a1a1a] border border-[#2a2a2a] text-[#888] hover:border-[#5B7C8D] hover:text-[#5B7C8D] transition-colors rounded-sm cursor-default">
{tag}
</span>
))}
@@ -409,7 +409,7 @@ export default function NewsArticleDetailClient({
<p className="font-body text-sm text-[#777]">Found this article useful?</p>
<button
onClick={() => setEmailShareOpen(true)}
className="flex items-center gap-2 px-4 py-2 bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3b82f6] text-[#888] hover:text-[#3b82f6] text-xs font-bold uppercase tracking-widest transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="flex items-center gap-2 px-4 py-2 bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#5B7C8D] text-[#888] hover:text-[#5B7C8D] text-xs font-bold uppercase tracking-widest transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="13"
height="13"
@@ -430,7 +430,7 @@ export default function NewsArticleDetailClient({
<div className="pt-6 border-t border-[#222]">
<Link
href="/news"
className="inline-flex items-center gap-2 text-[#3b82f6] font-body text-sm hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="inline-flex items-center gap-2 text-[#5B7C8D] font-body text-sm hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="14"
height="14"
@@ -453,7 +453,7 @@ export default function NewsArticleDetailClient({
{/* Related Articles Sidebar */}
<div className="bg-[#111] border border-[#222] p-5">
<h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
<h3 className="font-body font-bold text-xs text-[#5B7C8D] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
Related Articles
</h3>
<div className="space-y-4">
@@ -472,10 +472,10 @@ export default function NewsArticleDetailClient({
/>
</div>
<div className="flex-1 min-w-0">
<p className="text-[#3b82f6] font-body text-[9px] font-bold uppercase tracking-wider mb-0.5">
<p className="text-[#5B7C8D] font-body text-[9px] font-bold uppercase tracking-wider mb-0.5">
{related.category}
</p>
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#3b82f6] transition-colors line-clamp-2 leading-snug">
<p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#5B7C8D] transition-colors line-clamp-2 leading-snug">
{related.title}
</p>
</div>
@@ -485,7 +485,7 @@ export default function NewsArticleDetailClient({
</div>
{/* Newsletter Signup */}
<div className="bg-[#0d1520] border border-[#1e3a5f] p-5">
<div className="bg-[#0d1520] border border-[#2F4F5F] p-5">
<h3 className="font-heading text-[#e0e0e0] font-bold mb-2">Stay Updated</h3>
<p className="font-body text-[#777] text-xs mb-4">
Get the latest broadcast engineering news delivered to your inbox.
@@ -522,7 +522,7 @@ export default function NewsArticleDetailClient({
onClick={prevCarousel}
disabled={carouselIndex === 0}
aria-label="Previous articles"
className="w-8 h-8 flex items-center justify-center border border-[#2a2a2a] text-[#666] hover:border-[#3b82f6] hover:text-[#3b82f6] disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="w-8 h-8 flex items-center justify-center border border-[#2a2a2a] text-[#666] hover:border-[#5B7C8D] hover:text-[#5B7C8D] disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="14"
height="14"
@@ -538,7 +538,7 @@ export default function NewsArticleDetailClient({
onClick={nextCarousel}
disabled={carouselIndex >= maxIndex}
aria-label="Next articles"
className="w-8 h-8 flex items-center justify-center border border-[#2a2a2a] text-[#666] hover:border-[#3b82f6] hover:text-[#3b82f6] disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="w-8 h-8 flex items-center justify-center border border-[#2a2a2a] text-[#666] hover:border-[#5B7C8D] hover:text-[#5B7C8D] disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="14"
height="14"
@@ -577,11 +577,11 @@ export default function NewsArticleDetailClient({
/>
</div>
<div className="flex items-center gap-2 mb-1.5">
<span className="text-[#3b82f6] font-body text-[10px] font-bold uppercase tracking-wider">
<span className="text-[#5B7C8D] font-body text-[10px] font-bold uppercase tracking-wider">
{related.category}
</span>
</div>
<h3 className="font-heading text-[#e0e0e0] text-sm font-bold leading-snug group-hover:text-[#3b82f6] transition-colors line-clamp-2 mb-1.5">
<h3 className="font-heading text-[#e0e0e0] text-sm font-bold leading-snug group-hover:text-[#5B7C8D] transition-colors line-clamp-2 mb-1.5">
{related.title}
</h3>
<p className="text-[#666] font-body text-xs line-clamp-2 leading-relaxed">
@@ -606,7 +606,7 @@ export default function NewsArticleDetailClient({
onClick={() => setCarouselIndex(i)}
aria-label={`Go to slide ${i + 1}`}
className={`w-1.5 h-1.5 rounded-full transition-colors focus:outline-none ${
i === carouselIndex ? "bg-[#3b82f6]" : "bg-[#333]"
i === carouselIndex ? "bg-[#5B7C8D]" : "bg-[#333]"
}`}
/>
))}
@@ -639,7 +639,7 @@ export default function NewsArticleDetailClient({
setEmailStatus("idle");
}}
aria-label="Close share dialog"
className="absolute top-4 right-4 text-[#555] hover:text-[#e0e0e0] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#3b82f6]">
className="absolute top-4 right-4 text-[#555] hover:text-[#e0e0e0] transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-[#5B7C8D]">
<svg
width="18"
height="18"
@@ -654,13 +654,13 @@ export default function NewsArticleDetailClient({
</button>
<div className="flex items-center gap-3 mb-5">
<div className="w-9 h-9 rounded-sm bg-[#1a2a3a] border border-[#1e3a5f] flex items-center justify-center flex-shrink-0">
<div className="w-9 h-9 rounded-sm bg-[#1a2a3a] border border-[#2F4F5F] flex items-center justify-center flex-shrink-0">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="#3b82f6"
stroke="#5B7C8D"
strokeWidth="2"
aria-hidden="true">
<rect x="2" y="4" width="20" height="16" rx="2" />
@@ -706,7 +706,7 @@ export default function NewsArticleDetailClient({
<label
htmlFor="email-to"
className="block font-body text-xs text-[#888] uppercase tracking-wider mb-1.5">
Recipient Email <span className="text-[#3b82f6]">*</span>
Recipient Email <span className="text-[#5B7C8D]">*</span>
</label>
<input
id="email-to"
@@ -714,7 +714,7 @@ export default function NewsArticleDetailClient({
value={emailTo}
onChange={(e) => setEmailTo(e.target.value)}
placeholder="colleague@example.com"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] focus:border-[#3b82f6] text-[#e0e0e0] placeholder-[#444] text-sm font-body px-3 py-2.5 rounded-sm outline-none transition-colors"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] focus:border-[#5B7C8D] text-[#e0e0e0] placeholder-[#444] text-sm font-body px-3 py-2.5 rounded-sm outline-none transition-colors"
/>
</div>
<div>
@@ -729,7 +729,7 @@ export default function NewsArticleDetailClient({
onChange={(e) => setEmailNote(e.target.value)}
placeholder="Thought you might find this interesting..."
rows={3}
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] focus:border-[#3b82f6] text-[#e0e0e0] placeholder-[#444] text-sm font-body px-3 py-2.5 rounded-sm outline-none transition-colors resize-none"
className="w-full bg-[#0d0d0d] border border-[#2a2a2a] focus:border-[#5B7C8D] text-[#e0e0e0] placeholder-[#444] text-sm font-body px-3 py-2.5 rounded-sm outline-none transition-colors resize-none"
/>
</div>
@@ -773,7 +773,7 @@ export default function NewsArticleDetailClient({
<div
role="status"
aria-live="polite"
className="fixed bottom-4 right-4 bg-[#1a1a1a] border border-[#3b82f6] text-white px-4 py-3 rounded-sm text-sm font-body shadow-lg z-50">
className="fixed bottom-4 right-4 bg-[#1a1a1a] border border-[#5B7C8D] text-white px-4 py-3 rounded-sm text-sm font-body shadow-lg z-50">
{saveToast}
</div>
)}