fix: improve backdrop blur visibility on dropdowns and overlays

- Reduce dropdown background opacity from 97% to 80% so backdrop-filter is visible
- Add glass-dropdown CSS class with blur(16px) and saturate(180%)
- Add backdrop blur to mobile nav overlay for smoother feel
- Increase photo lightbox backdrop blur from 2px to 8px
- Add background-blend-mode: overlay to site-bg for richer texture

src/components/navigation.tsx

@@ -38,7 +38,7 @@ export async function Navigation() {
             </summary>
               <div
                 className="md:absolute static left-0 mt-1.5 md:min-w-[200px] rounded-xl md:shadow-xl z-50 py-2 border backdrop-blur-md md:ml-0 ml-4"
-                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
               >
                 <Link href="/news" className="dropdown-item">{t("articles")}</Link>
                 <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
@@ -56,7 +56,7 @@ export async function Navigation() {
             </summary>
             <div
               className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
-              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
             >
               <Link href="/shop" className="dropdown-item">{t("shop")}</Link>
               <Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
@@ -82,7 +82,7 @@ export async function Navigation() {
             </summary>
             <div
               className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
-              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
             >
               <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
               {session?.user ? (