📱mobile responsiveness for navbar Menu

2025-12-05 15:51:16 +02:00
parent bba507a7e8
commit 919e638144
8 changed files with 355 additions and 27 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -449,3 +449,83 @@
    margin-bottom: 3rem;
  }
 }
+
+/* === MOBILE RESPONSIVE UTILITIES === */
+@media (max-width: 767px) {
+  .show-mobile-only {
+    display: block;
+  }
+  .hide-mobile {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .show-mobile-only {
+    display: none !important;
+  }
+  .hide-mobile {
+    display: block;
+  }
+}
+
+/* === BUTTON GLITCH EFFECT === */
+@layer utilities {
+  .glitch-btn-cyber {
+    --glitch-shimmy: 5;
+    --glitch-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
+    --glitch-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
+    --glitch-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
+    --glitch-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
+    --glitch-clip-5: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
+    --glitch-clip-6: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
+  }
+
+  .glitch-overlay {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    color: var(--neon-cyan);
+    z-index: 10;
+  }
+
+  .glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {
+    display: flex;
+    animation: glitch-btn-animate 2s infinite;
+  }
+
+  @keyframes glitch-btn-animate {
+    0% { clip-path: var(--glitch-clip-1); }
+    2%, 8% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
+    6% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
+    9% { clip-path: var(--glitch-clip-2); transform: translate(0, 0); }
+    10% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
+    13% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
+    14%, 21% { clip-path: var(--glitch-clip-4); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
+    25%, 30% { clip-path: var(--glitch-clip-5); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
+    35%, 45% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
+    40% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
+    50% { clip-path: var(--glitch-clip-6); transform: translate(0, 0); }
+    55% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
+    60% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
+    61%, 100% { clip-path: var(--glitch-clip-4); }
+  }
+
+  .glitch-btn-subtle {
+    --glitch-shimmy: 2;
+  }
+
+  .glitch-overlay-pink { color: var(--neon-pink); }
+  .glitch-overlay-purple { color: var(--neon-purple); }
+  .glitch-overlay-magenta { color: var(--neon-magenta); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {
+      animation: none;
+      display: none;
+    }
+  }
+}