From cf6bd7339ea4b13bf4fe91091db1f79974819bf0 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 02:48:18 +0800
Subject: [PATCH] fix: unify homepage card background with the browse page

Match the official-recommendation and popular cards to the message bubble
surface color (#272632) used on the browse/all page and the latest section,
so homepage content cards and the browse page share one background. Also
align the popular card border with the official card (#27292E).

Categories tiles are intentionally left unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/PopularRankList.tsx | 4 ++--
 src/components/RecommendedCard.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index 7dd074b..596c0ec 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -116,7 +116,7 @@ function PopularRankRow({
   };
 
   return (
-    <article className="relative flex items-center gap-3 rounded-2xl border border-ark-line bg-ark-panel p-3 transition hover:border-ark-gold/45 md:gap-4 md:p-4">
+    <article className="relative flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 transition hover:border-ark-gold/55 md:gap-4 md:p-4">
       <button
         type="button"
         onClick={() =>
@@ -192,7 +192,7 @@ function ComingSoonRankRow({ index }: { index: number }) {
   const label = lang === "zh-CN" ? "即将到来" : "Coming soon";
   return (
     <article
-      className="flex items-center gap-3 rounded-2xl border border-ark-line bg-ark-panel p-3 opacity-70 md:gap-4 md:p-4"
+      className="flex items-center gap-3 rounded-2xl border border-[#27292E] bg-[#272632] p-3 opacity-70 md:gap-4 md:p-4"
       aria-hidden="true"
     >
       <RankBadge index={index} />
diff --git a/src/components/RecommendedCard.tsx b/src/components/RecommendedCard.tsx
index e60f3c9..b550652 100644
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -19,7 +19,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
 }
 
 const CARD_BASE_CLASS =
-  "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30";
+  "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#272632] transition hover:border-ark-gold/55 hover:shadow-lg hover:shadow-black/30";
 
 const CARD_HOVER_SPRING = {
   type: "spring",