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

12
src/app/home-page/components/SpotlightCarousel.tsx
View File

@@ -156,14 +156,14 @@ export default function SpotlightCarousel() {
ref={prevBtnRef}
onClick={() => go(-1)}
aria-label="Previous spotlight (Left arrow key)"
className="carousel-btn w-7 h-7 border border-[#333] bg-[#1a1a1a] hover:border-[#3b82f6] hover:text-[#3b82f6] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="carousel-btn w-7 h-7 border border-[#333] bg-[#1a1a1a] hover:border-[#5B7C8D] hover:text-[#5B7C8D] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
<ChevronLeftIcon size={13} />
</button>
<button
ref={nextBtnRef}
onClick={() => go(1)}
aria-label="Next spotlight (Right arrow key)"
className="carousel-btn w-7 h-7 border border-[#333] bg-[#1a1a1a] hover:border-[#3b82f6] hover:text-[#3b82f6] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
className="carousel-btn w-7 h-7 border border-[#333] bg-[#1a1a1a] hover:border-[#5B7C8D] hover:text-[#5B7C8D] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D]">
<ChevronRightIcon size={13} />
</button>
</div>
@@ -181,7 +181,7 @@ export default function SpotlightCarousel() {
key={`${startIndex}-${i}`}
href={item.href}
role="listitem"
className={`spotlight-card group block spotlight-slide-in focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
className={`spotlight-card group block spotlight-slide-in focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${
i >= 3 ? "hidden lg:block" : i >= 2 ? "hidden md:block" : ""
}`}
style={{ animationDelay: `${i * 50}ms` }}
@@ -201,10 +201,10 @@ export default function SpotlightCarousel() {
</div>
</div>
<div className="p-2.5 md:p-3 border-t border-[#2a2a2a]">
<p className="font-body text-[11px] font-bold text-[#3b82f6] uppercase tracking-wide mb-1">
<p className="font-body text-[11px] font-bold text-[#5B7C8D] uppercase tracking-wide mb-1">
{item.name}
</p>
<h3 className="font-heading text-[#e0e0e0] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-2 group-hover:text-[#3b82f6] transition-colors duration-200">
<h3 className="font-heading text-[#e0e0e0] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-2 group-hover:text-[#5B7C8D] transition-colors duration-200">
{item.title}
</h3>
</div>
@@ -221,7 +221,7 @@ export default function SpotlightCarousel() {
role="tab"
aria-selected={Math.floor(startIndex / VISIBLE) === i}
aria-label={`Go to spotlight page ${i + 1}`}
className={`h-1.5 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
className={`h-1.5 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#5B7C8D] ${
Math.floor(startIndex / VISIBLE) === i
? "w-5 bg-accent" : "w-1.5 bg-[#333] hover:bg-[#555]"
}`}