From 45c66eaa88aefba86bf2a75d17c0f2fcdebaae1b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Fri, 15 May 2026 11:59:35 +0000
Subject: style(card): move backdrop blur to an opt-in .card-glass modifier

Strip backdrop-filter: blur(4px) from the base .card so the ~50
in-flow surfaces (landing panels, schedule rows, tool cards, user
profile cards, badge wall, etc.) stop paying for a blur they don't
need. Introduce .card-glass for the surfaces that actually float over
other content: the sticky page header, header nav dropdowns, command
palette, title-attribute tooltips, LinkedTooltip, and HoverCover.
Popup, MediaRoulette, and Notification keep their existing
parent-overlay or solid-background treatments.
---
 src/lib/CommandPalette/CommandPalette.svelte | 2 +-
 src/lib/Layout/Dropdown.svelte               | 2 +-
 src/lib/Media/Cover/HoverCover.svelte        | 2 +-
 src/lib/Tooltip/LinkedTooltip.svelte         | 2 +-
 src/lib/Tooltip/tooltip.ts                   | 1 +
 src/routes/+layout.svelte                    | 2 +-
 src/styles/card.css                          | 3 +++
 7 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/CommandPalette/CommandPalette.svelte b/src/lib/CommandPalette/CommandPalette.svelte
index 5eb06ef7..ca3513f4 100644
--- a/src/lib/CommandPalette/CommandPalette.svelte
+++ b/src/lib/CommandPalette/CommandPalette.svelte
@@ -178,7 +178,7 @@ const handleGlobalKey = (e: KeyboardEvent) => {
     aria-modal="true"
     aria-label="Command palette"
   >
-    <div class="dropdown-content card card-small">
+    <div class="dropdown-content card card-small card-glass">
       <input
         bind:this={inputRef}
         bind:value={search}
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte
index 105b29f3..95b763ad 100644
--- a/src/lib/Layout/Dropdown.svelte
+++ b/src/lib/Layout/Dropdown.svelte
@@ -111,7 +111,7 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => {
   </span>
 
   <div
-    class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}
+    class={`dropdown-content card card-small card-glass ${open ? 'dropdown-open' : ''}`}
     id={menuId}
     role="menu"
     aria-labelledby={toggleId}
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte
index 1909449f..c1412fa4 100644
--- a/src/lib/Media/Cover/HoverCover.svelte
+++ b/src/lib/Media/Cover/HoverCover.svelte
@@ -8,7 +8,7 @@ export let width = 250;
 
 {#if options.hovering}
   <img
-    class="hover-image show card card-small"
+    class="hover-image show card card-small card-glass"
     src={options.media
       ? $settings.displayDataSaver
         ? options.media.coverImage.medium
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index bbf0ffe5..2a7961f5 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -253,7 +253,7 @@ const handleMouseLeave = () => {
 
 {#if tooltipDiv}
   <div
-    class="tooltip card card-small"
+    class="tooltip card card-small card-glass"
     style={`left: ${$tooltipPosition.x}px; top: ${$tooltipPosition.y}px; opacity: ${opacity}; --tooltip-opacity-transition-time: ${tooltipOpacityTransitionTime}ms;`}
   >
     {#key content}
diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts
index 3235cb25..3024bbff 100644
--- a/src/lib/Tooltip/tooltip.ts
+++ b/src/lib/Tooltip/tooltip.ts
@@ -24,6 +24,7 @@ const tooltip = (element: HTMLElement) => {
 
 			tooltipDiv.classList.add("card");
 			tooltipDiv.classList.add("card-small");
+			tooltipDiv.classList.add("card-glass");
 			document.body.appendChild(tooltipDiv);
 		}
 	};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4aaf2159..633fdffc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -239,7 +239,7 @@ $: {
   <Announcement />
 
   <div class="container">
-    <div class="card card-centered header" class:header-hidden={!isHeaderVisible}>
+    <div class="card card-centered card-glass header" class:header-hidden={!isHeaderVisible}>
       <div>
         <a href={root('/')} class="header-item">{$locale().navigation.home}</a><a
           href={root('/completed')}
diff --git a/src/styles/card.css b/src/styles/card.css
index 6aabf5fb..07a62fcd 100644
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -30,6 +30,9 @@ details,
 	background-color: var(--base0011);
 	padding: 1rem;
 	border-radius: 8px;
+}
+
+.card-glass {
 	backdrop-filter: blur(4px);
 	-webkit-backdrop-filter: blur(4px);
 }
-- 
cgit v1.2.3