feat: complete header and dropdown redesign for professional look

- Redesign site header with multi-layer gradient overlays, decorative glows, dot pattern texture, responsive clamp font sizing, and animated ping online badge
- Add glass-dropdown CSS class with 60% opacity backdrop blur (20px) and smooth dropdownIn animation (scale + translate)
- Fix dropdown positioning with top-full for proper alignment under menu triggers
- Standardize all dropdowns (nav, top-header, color picker, language switcher) to use glass-dropdown class

src/app/globals.css

@@ -900,12 +900,28 @@ tbody tr:hover {
   border-color: #f97316;
 }
 
-/* ── Glass dropdown (backdrop blur) ─────────────────────────── */
+/* ── Glass dropdown (backdrop blur + animation) ─────────────── */
 .glass-dropdown {
-  backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(20px) saturate(200%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(200%);
-  background-color: color-mix(in srgb, var(--color-dropdown) 78%, transparent);
+  background-color: color-mix(in srgb, var(--color-dropdown) 60%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
+  box-shadow: 0 8px 32px color-mix(in srgb, rgb(0 0 0) 20%, transparent);
+}
+
+details[open] > .glass-dropdown {
+  animation: dropdownIn 0.15s ease-out;
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 /* ── Radio sidebar ──────────────────────────────────────────── */

src/components/language-switcher.tsx

@@ -58,8 +58,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"
+          className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[160px] rounded-xl z-50 py-2"
-          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/navbar-color-picker.tsx

@@ -72,8 +72,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"
+          className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-3 px-2"
-          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

@@ -36,16 +36,13 @@ export async function Navigation() {
               {t("community")}
               <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
             </summary>
-              <div
+            <div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-                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"
+              <Link href="/news" className="dropdown-item">{t("articles")}</Link>
-                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+              <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
-              >
+              <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
-                <Link href="/news" className="dropdown-item">{t("articles")}</Link>
+              <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
-                <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
+              <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
-                <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
+            </div>
-                <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
-                <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
-              </div>
           </details>
 
           <details className="relative group md:flex">
@@ -54,10 +51,7 @@ export async function Navigation() {
               {t("shop")}
               <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
             </summary>
-            <div
+            <div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-              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) 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>
               <Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
@@ -80,10 +74,7 @@ export async function Navigation() {
               {t("assistance")}
               <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
             </summary>
-            <div
+            <div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
-              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) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
-            >
               <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
               {session?.user ? (
                 <Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>

src/components/top-header.tsx

@@ -67,8 +67,7 @@ export async function TopHeader() {
                 Administration
               </summary>
               <div
-                className="absolute right-0 mt-1 min-w-[180px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+                className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[180px] rounded-xl z-50 py-2"
-                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
@@ -90,8 +89,7 @@ export async function TopHeader() {
               <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
             </summary>
             <div
-              className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+              className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
-              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