diff --git a/public/challenge-cards/communication-card-gray.svg b/public/challenge-cards/communication-card-gray.svg
new file mode 100644
index 0000000..b8c664b
--- /dev/null
+++ b/public/challenge-cards/communication-card-gray.svg
@@ -0,0 +1,13 @@
+
diff --git a/public/challenge-cards/design-card-gray.svg b/public/challenge-cards/design-card-gray.svg
new file mode 100644
index 0000000..a1a7af4
--- /dev/null
+++ b/public/challenge-cards/design-card-gray.svg
@@ -0,0 +1,13 @@
+
diff --git a/public/challenge-cards/marketing-card-gray.svg b/public/challenge-cards/marketing-card-gray.svg
new file mode 100644
index 0000000..624059f
--- /dev/null
+++ b/public/challenge-cards/marketing-card-gray.svg
@@ -0,0 +1,13 @@
+
diff --git a/public/challenge-cards/multimedia-card-gray.svg b/public/challenge-cards/multimedia-card-gray.svg
new file mode 100644
index 0000000..4229def
--- /dev/null
+++ b/public/challenge-cards/multimedia-card-gray.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/components/challenge-card.tsx b/src/components/challenge-card.tsx
index 41e096e..1a03f82 100644
--- a/src/components/challenge-card.tsx
+++ b/src/components/challenge-card.tsx
@@ -43,6 +43,13 @@ const DEPARTMENT_CARDS: Record = {
[Department.DESIGN]: "design-card.svg",
};
+const DEPARTMENT_CARDS_GRAY: Record = {
+ [Department.MARKETING]: "marketing-card-gray.svg",
+ [Department.COMMUNICATION]: "communication-card-gray.svg",
+ [Department.MULTIMEDIA]: "multimedia-card-gray.svg",
+ [Department.DESIGN]: "design-card-gray.svg",
+};
+
const DEPARTMENT_MASCOTS: Record = {
[Department.MARKETING]: "marketing-mascot.png",
[Department.COMMUNICATION]: "communication-mascot.png",
@@ -130,10 +137,6 @@ export default function ChallengeCard({
// countdown can't disagree about whether the challenge is open.
const now = useNow();
- const textColor =
- DEPARTMENT_COLORS[department] ||
- "var(--brand-marketing)";
-
const unlocksAt = toTime(unlocks_at);
const endsAt = toTime(ends_at);
// The server's answer holds the first paint; the client clock takes over on
@@ -145,6 +148,10 @@ export default function ChallengeCard({
// and drained of its color the same way.
const isLocked = submissionWindow !== "open";
+ const textColor = isLocked
+ ? "#888888"
+ : DEPARTMENT_COLORS[department] || "var(--brand-marketing)";
+
// Only a challenge that hasn't unlocked hides its mascot: there is nothing to
// show off yet, and a lock is the whole message. A closed one keeps the
// mascot — it did run — and says it's over in the line underneath instead.
@@ -190,8 +197,9 @@ export default function ChallengeCard({
const heading = title ?? "Coming Soon...";
const cardImage =
- DEPARTMENT_CARDS[department] ||
- "marketing-card.svg";
+ (isLocked
+ ? DEPARTMENT_CARDS_GRAY[department]
+ : DEPARTMENT_CARDS[department]) || "marketing-card.svg";
const mascot =
DEPARTMENT_MASCOTS[department] ||
@@ -201,14 +209,10 @@ export default function ChallengeCard({
+