update v1.1

css/products.css

@@ -0,0 +1,155 @@
+/* Glow effect for active arrow */
+.dropdown-item.active i.fa-chevron-right {
+  color: #22d3ee;
+  text-shadow:
+    0 0 5px #22d3ee,
+    0 0 10px #22d3ee,
+    0 0 20px #22d3ee,
+    0 0 40px #0ea5e9;
+  background: linear-gradient(to bottom, #22d3ee, #0ea5e9);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: all 0.3s ease;
+}
+
+.content-area {
+  padding: 20px; /* Adjusted padding for mobile */
+  overflow-y: auto;
+  transition: all 0.3s ease-out;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 5;
+  display: none; /* Hide by default on mobile */
+}
+.content-area.active {
+   display: block; /* Show when active on mobile */
+   opacity: 1;
+   pointer-events: auto;
+}
+@media (min-width: 768px) {
+  .content-area {
+    position: fixed;
+    left: 300px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 80px 20px 20px;
+    border-left: 1px solid rgba(34, 211, 238, 0.2);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+  .dropdown-item:hover .content-area,
+  .dropdown-item.active .content-area,
+  .content-area.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .dropdown-item button:hover {
+    transform: translateX(5px);
+  }
+  .dropdown-item.active button {
+    background: rgba(34, 211, 238, 0.1);
+    border-left: 3px solid rgba(34, 211, 238, 0.5);
+  }
+}
+.glass-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  /* Existing glass-card styles from style.css */
+  background: rgba(36,40,46,0.76);
+  border-radius: 2rem;
+  box-shadow: 0 7px 48px 0 #000B;
+  border: 1px solid rgba(116, 250, 255, 0.3);
+  backdrop-filter: blur(8px);
+}
+.glass-card:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 0 25px 50px -12px rgba(34, 211, 238, 0.25); /* This might be overridden by style.css .shadow-3d:hover */
+}
+.content-area .glass-card {
+  /* Styles similar to .flipbook-page and .glass-card.selected */
+  opacity: 1; /* Make them fully visible */
+  transform: none; /* Remove any default transform */
+  filter: none; /* Remove any default filter */
+  border: 1px solid rgba(116, 250, 255, 0.3); /* Match .glass-card.selected border */
+  box-shadow: 0 12px 36px 0 #33f8fd14, 0 0px 0px #252526; /* Match .shadow-3d */
+  width: 18rem; /* Set a specific width */
+  height: 32rem; /* Set a specific height */
+}
+@media (min-width: 768px) {
+  .content-area .glass-card {
+    width: 20rem; /* Adjust width for larger screens */
+    height: 36rem; /* Adjust height for larger screens */
+  }
+}
+.content-area .glass-card:hover {
+  box-shadow: 0 16px 64px 0 #29ffc679, 0 1px 6px #1115; /* Match .shadow-3d:hover */
+  transform: translateY(-6px) scale(1.05); /* Match .shadow-3d:hover */
+}
+.menu-item {
+  position: relative;
+  overflow: hidden;
+}
+.menu-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 1));
+  transition: width 0.3s ease;
+}
+.menu-item:hover::after {
+  width: 100%;
+}
+.menu-item.active::after {
+  width: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0.2);
+    border-color: rgba(34, 211, 238, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+}
+
+.pulse-border {
+  animation: pulse 3s infinite;
+  border: 1px solid rgba(34, 211, 238, 0.3);
+}
+
+/* Product modal styles */
+#productModal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.9);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999 !important;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+#productModal:not(.hidden) {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible !important;
+}
+#productModal .glass-card {
+  max-height: 90vh;
+  overflow-y: auto;
+}