add transparency for themes

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}`}

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>