first commit

wp-content/plugins/elementor-addon/assets/css/main.scss

@@ -0,0 +1,131 @@
+.elementor-widget-custom-slider {
+  .custom-slider-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    height: 500px;
+
+    @media (max-width: 768px) {
+      height: 400px;
+    }
+
+    .custom-slider-swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-wrapper {
+      height: 100%;
+    }
+
+    .swiper-slide {
+      height: 100%;
+
+      .custom-slider-slide-inner {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          filter: brightness(0.5);
+
+          transform: scale(1.05);
+        }
+      }
+    }
+
+    .swiper-slide-active .custom-slider-slide-inner img {
+      animation: customSliderZoom 4.5s ease-out forwards;
+    }
+
+    @keyframes customSliderZoom {
+      from {
+        transform: scale(1);
+      }
+
+      to {
+        transform: scale(1.05);
+      }
+    }
+
+    .custom-slider-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      z-index: 1;
+
+      .custom-slider-overlay-inner {
+        max-width: 700px;
+        text-align: center;
+        padding: 20px;
+        pointer-events: auto;
+        color: #fff;
+
+        @media (max-width: 768px) {
+          padding: 15px;
+        }
+
+        .custom-slider-title {
+          margin: 0 0 10px;
+          font-size: clamp(26px, 4vw, 42px);
+          font-family: 'Inconsolata', Sans-serif;
+          font-weight: 700;
+        }
+
+        .custom-slider-text {
+          margin: 0 0 20px;
+          font-size: clamp(14px, 2vw, 18px);
+          font-family: 'Inconsolata', Sans-serif;
+          letter-spacing: 2px;
+          font-weight: 300;
+        }
+
+        .custom-slider-button {
+          display: inline-block;
+          border-radius: 0;
+          border: none;
+          text-decoration: none;
+          transition: 0.35s ease all;
+          color: #fff;
+          font-family: "Inconsolata", Sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          letter-spacing: 2px;
+          padding: 15px 40px;
+          background: #bc1834;
+          outline: 0;
+          text-transform: uppercase;
+
+          &:hover {
+            background: #021526;
+          }
+        }
+      }
+    }
+
+    .swiper-button-prev,
+    .swiper-button-next {
+      color: #fff;
+      transition: opacity 0.3s ease;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    .swiper-pagination-bullet {
+      background: rgba(255, 255, 255, 0.6);
+      opacity: 1;
+
+      &-active {
+        background: #fff;
+      }
+    }
+  }
+}