From 486f239fb11a4521a10049528cb7f0add18445f9 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Thu, 10 Sep 2026 19:07:57 +0100
Subject: [PATCH] add transparency for themes

---
 frontend/src/lib/components/Card.svelte           | 8 ++++++++
 frontend/src/routes/[fam]/+layout.svelte          | 2 +-
 frontend/src/routes/[fam]/[username]/+page.svelte | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index 74736f5..325565b 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -52,6 +52,14 @@
 	.card.has-accent {
 		border-top: 3px solid var(--card-accent, #6366f1);
 	}
+	/* Background pattern active (has-pattern on the layout root): cards go
+	   translucent so the pattern shows through. Desktop/tablet only — mobile
+	   cards are already fully transparent. */
+	@media (min-width: 640px) {
+		:global(.has-pattern) .card {
+			background: #ffffffd9;
+		}
+	}
 	/* Tablet (2-col grid): anything spanning 3+ collapses to a full row (span 2) */
 	@media (min-width: 640px) and (max-width: 1023px) {
 		.card[data-cols='3'],
diff --git a/frontend/src/routes/[fam]/+layout.svelte b/frontend/src/routes/[fam]/+layout.svelte
index 5482c8a..d2356e7 100644
--- a/frontend/src/routes/[fam]/+layout.svelte
+++ b/frontend/src/routes/[fam]/+layout.svelte
@@ -194,7 +194,7 @@
 	});
 </script>
 
-<div class="layout-stage" class:chat-open={chatStore.open}>
+<div class="layout-stage" class:chat-open={chatStore.open} class:has-pattern={!!bgPattern}>
 	<div
 		class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
 		style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
diff --git a/frontend/src/routes/[fam]/[username]/+page.svelte b/frontend/src/routes/[fam]/[username]/+page.svelte
index e0be904..d0c1c74 100644
--- a/frontend/src/routes/[fam]/[username]/+page.svelte
+++ b/frontend/src/routes/[fam]/[username]/+page.svelte
@@ -103,6 +103,8 @@
 		);
 	}
 
+	let hasClaimableRewards = $derived(claimableRewards().length > 0);
+
 	function memberClaimable(memberId: string) {
 		return claimableRewards().filter((r: any) => r.memberId === memberId);
 	}
@@ -1067,7 +1069,7 @@
 					{/if}
 				</Card>
 
-				<Card cols={1} title="Claims" accent="#f97316" class="claims-card">
+				<Card cols={1} title="Claims" accent={claimableRewards().length > 0 ? '#f97316' : undefined} class={claimableRewards().length > 0 ? 'claims-card' : ''}>
 					{#if claimableRewards().length === 0}
 						<div class="claims-empty">
 							{@html checkCircleIcon}<span>No outstanding claims</span>