feat: update hero section with carousel functionality and styling enhancements

.drone.yml

@@ -22,4 +22,4 @@ steps:
 volumes:
   - name: website-data
     host:
-      path: /root/khywebsite/data/html
+      path: /root/khy/data/html

index.html

@@ -68,6 +68,62 @@
         cursor: pointer;
       }
 
+      /* Attention animation for projects button */
+      .attention-animation {
+        animation: attention-pulse 3s ease-in-out infinite;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .attention-animation::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
+        animation: shimmer 4s ease-in-out infinite;
+      }
+
+      @keyframes attention-pulse {
+        0%,
+        100% {
+          transform: scale(1);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+            0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        50% {
+          transform: scale(1.02);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+            0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+      }
+
+      @keyframes shimmer {
+        0% {
+          left: -100%;
+        }
+        50% {
+          left: 100%;
+        }
+        100% {
+          left: 100%;
+        }
+      }
+
+      .attention-animation:hover {
+        animation: none;
+        transform: scale(1.05);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+          0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
+
       .product-card:hover {
         transform: translateY(-8px) scale(1.02);
         box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
@@ -334,11 +390,11 @@
           <!-- Main Content -->
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
             <!-- Left Side - Image -->
-            <div class="relative">
+            <div id="hero-image" class="relative">
               <img
                 src="assets/images/our_story.jpg"
                 alt="Modern office interior"
-                class="w-full h-auto rounded-lg"
+                class="w-full h-auto rounded-lg transition-opacity duration-300"
               />
               <!-- Navigation Arrow -->
               <div class="absolute top-1/2 right-4 transform -translate-y-1/2">
@@ -361,6 +417,32 @@
                   </svg>
                 </button>
               </div>
+
+              <!-- Carousel Indicators -->
+              <div
+                class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
+              >
+                <div
+                  id="carousel-indicator-0"
+                  class="w-3 h-3 bg-white rounded-full opacity-100 transition-opacity duration-300 cursor-pointer"
+                ></div>
+                <div
+                  id="carousel-indicator-1"
+                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
+                ></div>
+                <div
+                  id="carousel-indicator-2"
+                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
+                ></div>
+                <div
+                  id="carousel-indicator-3"
+                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
+                ></div>
+                <div
+                  id="carousel-indicator-4"
+                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
+                ></div>
+              </div>
             </div>
 
             <!-- Right Side - Text Content -->
@@ -386,7 +468,7 @@
 
               <button
                 id="projects-button"
-                class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
+                class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm attention-animation"
               >
                 Explore past projects
               </button>
@@ -985,6 +1067,6 @@
       </div>
     </footer>
 
-    <script src="scripts/main.js?v=1.1"></script>
+    <script src="scripts/main.js?v=4.7"></script>
   </body>
 </html>

scripts/main.js

@@ -661,23 +661,6 @@ function initSite() {
       });
     });
   }
-  // Story arrow button functionality
-  const storyArrowButton = document.getElementById("story-arrow-button");
-  if (storyArrowButton) {
-    storyArrowButton.addEventListener("click", function () {
-      // You can customize this action - for now, let's scroll to the products section
-      const productsSection = document.getElementById("products");
-      if (productsSection) {
-        const headerHeight = 112;
-        const targetPosition = productsSection.offsetTop - headerHeight;
-
-        window.scrollTo({
-          top: targetPosition,
-          behavior: "smooth",
-        });
-      }
-    });
-  }
 
   // Product detail page functionality
   (async function initProductDetail() {
@@ -1737,6 +1720,111 @@ if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", function () {
   initQuoteBadge();
   initAddToQuote();
+  initHeroCarousel();
 });
 
-// Version: 4.2 - Moved Show Less button to end of blog post content
+// Hero Carousel Functionality
+function initHeroCarousel() {
+  const arrowButton = document.getElementById("story-arrow-button");
+  const heroImage = document.querySelector("#hero-image img");
+
+  if (!arrowButton || !heroImage) return;
+
+  // Carousel images array
+  const carouselImages = [
+    "assets/images/our_story.jpg",
+    "assets/images/first_homepage.jpg",
+    "assets/images/conference_room.jpg",
+    "assets/images/lounge_chair.jpg",
+    "assets/images/kitchen.JPG",
+  ];
+
+  let currentImageIndex = 0;
+  let originalHeight = null;
+
+  // Function to capture original image height on first load
+  function captureOriginalHeight() {
+    if (!originalHeight) {
+      originalHeight = heroImage.offsetHeight;
+      console.log("Original image height captured:", originalHeight + "px");
+    }
+  }
+
+  // Function to update image with fade transition
+  function updateImage(newIndex) {
+    const newImage = new Image();
+    newImage.onload = function () {
+      // Fade out current image
+      heroImage.style.opacity = "0";
+
+      setTimeout(() => {
+        // Change image source
+        heroImage.src = carouselImages[newIndex];
+        heroImage.alt = `Carousel image ${newIndex + 1}`;
+
+        // Apply original height to maintain uniformity
+        if (originalHeight && newIndex !== 0) {
+          heroImage.style.height = originalHeight + "px";
+          heroImage.style.objectFit = "cover";
+        } else if (newIndex === 0) {
+          // Reset to original for the first image
+          heroImage.style.height = "auto";
+          heroImage.style.objectFit = "initial";
+        }
+
+        // Fade in new image
+        heroImage.style.opacity = "1";
+
+        // Update indicators
+        updateIndicators(newIndex);
+      }, 300);
+    };
+    newImage.src = carouselImages[newIndex];
+  }
+
+  // Function to update carousel indicators
+  function updateIndicators(activeIndex) {
+    for (let i = 0; i < 5; i++) {
+      const indicator = document.getElementById(`carousel-indicator-${i}`);
+      if (indicator) {
+        indicator.style.opacity = i === activeIndex ? "1" : "0.5";
+      }
+    }
+  }
+
+  // Arrow button click handler
+  arrowButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+    updateImage(currentImageIndex);
+  });
+
+  // Indicator click handlers
+  for (let i = 0; i < 5; i++) {
+    const indicator = document.getElementById(`carousel-indicator-${i}`);
+    if (indicator) {
+      indicator.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        currentImageIndex = i;
+        updateImage(currentImageIndex);
+      });
+    }
+  }
+
+  // Capture original height after image loads
+  if (heroImage.complete) {
+    captureOriginalHeight();
+  } else {
+    heroImage.addEventListener("load", captureOriginalHeight);
+  }
+
+  // Auto-advance carousel every 5 seconds
+  setInterval(() => {
+    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
+    updateImage(currentImageIndex);
+  }, 5000);
+}
+
+// Version: 4.7 - Use original image height as standard for carousel uniformity

styles/main.css

@@ -1,6 +1,4 @@
-*,
+*, ::before, ::after {
-::before,
-::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -132,7 +130,7 @@
 
 ::before,
 ::after {
-  --tw-content: "";
+  --tw-content: '';
 }
 
 /*
@@ -156,8 +154,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -246,8 +243,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -348,9 +344,9 @@ select {
 */
 
 button,
-input:where([type="button"]),
+input:where([type='button']),
-input:where([type="reset"]),
+input:where([type='reset']),
-input:where([type="submit"]) {
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -397,7 +393,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -490,8 +486,7 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder,
+input::-moz-placeholder, textarea::-moz-placeholder {
-textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -690,6 +685,10 @@ video {
   top: 6rem;
 }
 
+.bottom-4 {
+  bottom: 1rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -949,6 +948,10 @@ video {
   height: 6rem;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
@@ -1053,6 +1056,10 @@ video {
   width: 6rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .min-w-\[2rem\] {
   min-width: 2rem;
 }
@@ -1103,29 +1110,31 @@ video {
 
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-x-full {
   --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+}
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .cursor-pointer {
@@ -1723,8 +1732,7 @@ video {
 }
 
 .font-sans {
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .text-2xl {
@@ -1932,6 +1940,10 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
+.text-black\/90 {
+  color: rgb(0 0 0 / 0.9);
+}
+
 .text-opacity-90 {
   --tw-text-opacity: 0.9;
 }
@@ -1945,59 +1957,50 @@ video {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
   --tw-shadow: 0 8px 24px rgba(0,0,0,0.06);
   --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .blur {
   --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
-    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .drop-shadow-sm {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
-    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
-    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .transition {
-  transition-property: color, background-color, border-color, fill, stroke,
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color;
-    opacity, box-shadow, transform, filter, backdrop-filter,
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color;
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-    backdrop-filter;
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-    backdrop-filter, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2009,12 +2012,9 @@ video {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color, fill, stroke,
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
-    -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-property: color, background-color, border-color,
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
-    text-decoration-color, fill, stroke;
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2037,6 +2037,10 @@ video {
   transition-duration: 150ms;
 }
 
+.delay-200 {
+  transition-delay: 200ms;
+}
+
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2045,27 +2049,29 @@ video {
   transition-duration: 300ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .hover\:-translate-y-0\.5:hover {
   --tw-translate-y: -0.125rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .hover\:scale-110:hover {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+}
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+
+.hover\:animate-none:hover {
+  animation: none;
 }
 
 .hover\:border-gray-600:hover {
@@ -2185,29 +2191,21 @@ video {
 }
 
 .hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-    0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-amber-200\/50:hover {
@@ -2217,11 +2215,7 @@ video {
 
 .hover\:backdrop-blur-sm:hover {
   --tw-backdrop-blur: blur(4px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
-    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
-    var(--tw-backdrop-sepia);
 }
 
 .focus\:border-black:focus {
@@ -2244,12 +2238,9 @@ video {
 }
 
 .focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus\:ring-uc-gold:focus {
@@ -2258,12 +2249,9 @@ video {
 }
 
 .focus-visible\:ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
 }
 
 .focus-visible\:ring-uc-gold:focus-visible {
@@ -2272,31 +2260,25 @@ video {
 }
 
 .active\:scale-95:active {
-  --tw-scale-x: 0.95;
+  --tw-scale-x: .95;
-  --tw-scale-y: 0.95;
+  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .group:hover .group-hover\:scale-105 {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .group:hover .group-hover\:scale-110 {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .group:hover .group-hover\:stroke-white {
-  stroke: #ffffff;
+  stroke: #FFFFFF;
 }
 
 .group:hover .group-hover\:opacity-100 {