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

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

@@ -141,7 +141,7 @@ export default function SpotlightCarousel() {
return (
<section
suppressHydrationWarning
className="bg-[#0d0d0d] py-6 md:py-8 border-t border-b border-[#222]"
className="bg-[#1c1815] py-6 md:py-8 border-t border-b border-[#222]"
aria-label="Spotlight carousel"
onKeyDown={handleCarouselKeyDown}>
<div suppressHydrationWarning className="max-w-container mx-auto px-4">
@@ -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-[#ffb800] hover:text-[#ffb800] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ffb800]">
className="carousel-btn w-7 h-7 border border-[#333] bg-[#231d18] hover:border-[#F0A623] hover:text-[#F0A623] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F0A623]">
<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-[#ffb800] hover:text-[#ffb800] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ffb800]">
className="carousel-btn w-7 h-7 border border-[#333] bg-[#231d18] hover:border-[#F0A623] hover:text-[#F0A623] hover:bg-[#1e1e1e] flex items-center justify-center transition-colors text-[#888] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F0A623]">
<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-[#ffb800] ${
className={`spotlight-card group block spotlight-slide-in focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F0A623] ${
i >= 3 ? "hidden lg:block" : i >= 2 ? "hidden md:block" : ""
}`}
style={{ animationDelay: `${i * 50}ms` }}
@@ -200,11 +200,11 @@ export default function SpotlightCarousel() {
</span>
</div>
</div>
<div className="p-2.5 md:p-3 border-t border-[#2a2a2a]">
<p className="font-body text-[11px] font-bold text-[#ffb800] uppercase tracking-wide mb-1">
<div className="p-2.5 md:p-3 border-t border-[#3a322b]">
<p className="font-body text-[11px] font-bold text-[#F0A623] 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-[#ffb800] 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-[#F0A623] 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-[#ffb800] ${
className={`h-1.5 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#F0A623] ${
Math.floor(startIndex / VISIBLE) === i
? "w-5 bg-accent" : "w-1.5 bg-[#333] hover:bg-[#555]"
}`}