Postits

board.php

@@ -22,46 +22,56 @@ $isAdmin = ($userRole === 'ADMIN');
     width: 100% !important;
 }
 
-/* --- Realistische Post-it Styling met Opkrullende Rand Links Onder --- */
+/* --- Realistische Echte Post-it Sticky Note Styling --- */
 .postit-note {
     position: relative;
-    border-radius: 4px 18px 4px 18px;
-    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 14px;
+    box-shadow: 
+        0 1px 1px rgba(0, 0, 0, 0.08),
+        0 4px 6px -1px rgba(0, 0, 0, 0.08),
+        0 10px 18px -4px rgba(0, 0, 0, 0.12),
+        -2px 6px 8px -2px rgba(0, 0, 0, 0.08);
     transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
 }
 .postit-note:hover {
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.16), 0 6px 10px -2px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px) rotate(-0.5deg);
+    box-shadow: 
+        0 2px 4px rgba(0, 0, 0, 0.06),
+        0 8px 12px -2px rgba(0, 0, 0, 0.12),
+        0 16px 24px -4px rgba(0, 0, 0, 0.16),
+        -4px 8px 12px -2px rgba(0, 0, 0, 0.12);
 }
+/* Echte sticky note curl & schaduw links onder */
 .postit-note::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: -1px;
-    width: 20px;
-    height: 20px;
-    background: linear-gradient(135deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 45%, transparent 50%);
+    width: 24px;
+    height: 24px;
+    background: 
+        linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 35%, transparent 45%),
+        linear-gradient(315deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 48%);
     border-bottom-left-radius: 4px;
-    box-shadow: -2px 2px 4px rgba(0,0,0,0.12);
     pointer-events: none;
     z-index: 5;
 }
+/* Subtiele klevende plakrand aan de bovenkant */
 .postit-note::before {
     content: '';
     position: absolute;
     top: 0;
-    left: 15%;
-    right: 15%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.4);
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
+    border-top-left-radius: 2px;
+    border-top-right-radius: 3px;
     pointer-events: none;
 }
-.dark .postit-note::before {
-    background: rgba(255, 255, 255, 0.1);
-}
 </style>
 
 <div id="boardPageContainer" class="space-y-4 w-full">