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/app/globals.css

@@ -186,13 +186,15 @@ body {
 
 .site-bg {
   background:
-    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 18%, rgba(255,255,255,0.7)), rgba(255,255,255,0.85)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, rgba(255,255,255,0.6)), rgba(255,255,255,0.75)),
     url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
+  background-blend-mode: overlay;
 }
 .app.dark .site-bg {
   background:
-    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, rgba(15,17,23,0.8)), rgba(15,17,23,0.9)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 8%, rgba(15,17,23,0.7)), rgba(15,17,23,0.85)),
     url("/assets/images/background-dark.jpg") no-repeat fixed center / cover;
+  background-blend-mode: overlay;
 }
 
 .article-body {
@@ -898,6 +900,14 @@ tbody tr:hover {
   border-color: #f97316;
 }
 
+/* ── Glass dropdown (backdrop blur) ─────────────────────────── */
+.glass-dropdown {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: color-mix(in srgb, var(--color-dropdown) 78%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+}
+
 /* ── Radio sidebar ──────────────────────────────────────────── */
 .radio-layout {
   display: flex;

src/components/language-switcher.tsx

@@ -59,7 +59,7 @@ export function LanguageSwitcher() {
       {open && (
         <div
           className="absolute right-0 mt-1 min-w-[160px] 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)" }}
         >
           {LOCALES.map((l) => (
             <button

src/components/mobile-nav.tsx

@@ -34,7 +34,11 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
         <div
           className="fixed inset-0 z-30 md:hidden"
           onClick={() => setOpen(false)}
-          style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
+          style={{
+            backgroundColor: "rgba(0,0,0,0.45)",
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)",
+          }}
         />
       )}
 

src/components/navbar-color-picker.tsx

@@ -73,7 +73,7 @@ export function NavbarColorPicker() {
       {mounted && open && (
         <div
           className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-3 px-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)" }}
         >
           <div className="text-xs font-semibold uppercase tracking-wider mb-2 px-2" style={{ color: "var(--color-text-muted)" }}>Navbar kleur</div>
           <div className="grid grid-cols-5 gap-1.5">

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 ? (

src/components/public/photo-lightbox.tsx

@@ -97,7 +97,7 @@ export function PhotoLightbox({ photos }: { photos: LightboxPhoto[] }) {
             justifyContent: "center",
             padding: "1.5rem",
             background: "rgba(0, 0, 0, 0.82)",
-            backdropFilter: "blur(2px)",
+            backdropFilter: "blur(8px)",
             cursor: "zoom-out",
           }}
         >

src/components/top-header.tsx

@@ -68,7 +68,7 @@ export async function TopHeader() {
               </summary>
               <div
                 className="absolute right-0 mt-1 min-w-[180px] 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="/admin" className="dropdown-item">
                   Admin panel
@@ -91,7 +91,7 @@ export async function TopHeader() {
             </summary>
             <div
               className="absolute right-0 mt-1 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="/me" className="dropdown-item">
                 My dashboard