From 70bc2b834657c419dc43d324fa7a63e132ca640a Mon Sep 17 00:00:00 2001
From: M0RPH3US <MakD@users.noreply.github.com>
Date: Sun, 16 Mar 2025 18:22:06 +0530
Subject: [PATCH] Update slideshowpure.css

---
 slideshowpure.css | 338 ++++++++++++++++------------------------------
 1 file changed, 114 insertions(+), 224 deletions(-)

diff --git a/slideshowpure.css b/slideshowpure.css
index eca511a..d0ea06a 100644
--- a/slideshowpure.css
+++ b/slideshowpure.css
@@ -38,6 +38,17 @@
   }
 }
 
+.backdrop.low-quality {
+  filter: blur(5px);
+  transform: scale(1.05);
+  transition: filter 0.3s ease, transform 0.3s ease;
+}
+
+.backdrop.high-quality {
+  filter: blur(0);
+  transform: scale(1);
+}
+
 /*Mobiles S*/
 @media only screen and (max-width: 320px) and (orientation: portrait) {
   .backdrop,
@@ -81,12 +92,7 @@
   .fade-out {
     opacity: 0 !important;
   }
-  /*#homeTab {
-    top: -5em;
-    padding-bottom: 5em !important;
-    position: relative;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
-  }*/
+
   .sections.homeSectionsContainer {
     position: relative;
     z-index: 8;
@@ -97,7 +103,7 @@
     bottom: 20%;
     left: 50%;
     transform: translateX(-50%) scale(0.6);
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff13;
@@ -115,7 +121,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 27px;
@@ -130,7 +137,6 @@
     overflow: hidden;
     margin: 0;
     padding: 0%;
-    /*top: -3.5em;*/
   }
   .slide {
     transition: opacity 0.5s ease-in-out;
@@ -152,24 +158,21 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 50%;
     max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
-  }
-  .featured-logo-blur {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    scale: 1.01;
-    filter: blur(1.1rem);
-    z-index: 3;
+    transition: filter 0.3s ease;
+  }
+
+  .logo.low-quality {
+    filter: brightness(1.5) blur(5px);
+  }
+
+  .logo.high-quality {
+    filter: brightness(1.5);
   }
   .backdrop {
     position: absolute;
@@ -360,22 +363,10 @@
     cursor: pointer;
     color: #fff;
     z-index: 3;
-    display: none;
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
+
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -388,7 +379,7 @@
     position: absolute;
     top: calc(50% + 11em);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -407,7 +398,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -743,12 +735,7 @@
   .fade-out {
     opacity: 0 !important;
   }
-  /*#homeTab {
-    top: -5em;
-    padding-bottom: 5em !important;
-    position: relative;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
-  }*/
+
   .sections.homeSectionsContainer {
     position: relative;
     z-index: 8;
@@ -759,7 +746,7 @@
     bottom: 20%;
     left: 50%;
     transform: translateX(-50%) scale(0.6);
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff13;
@@ -777,7 +764,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 27px;
@@ -792,7 +780,6 @@
     overflow: hidden;
     margin: 0;
     padding: 0%;
-    /*top: -3.5em;*/
   }
   .slide {
     transition: opacity 0.5s ease-in-out;
@@ -810,28 +797,26 @@
   .slide:focus {
     outline: #fff solid 2px;
   }
+
   .logo {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 50%;
     max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
-  }
-  .featured-logo-blur {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    scale: 1.01;
-    filter: blur(1.1rem);
-    z-index: 3;
+    transition: filter 0.3s ease;
+  }
+
+  .logo.low-quality {
+    filter: brightness(1.5) blur(5px);
+  }
+
+  .logo.high-quality {
+    filter: brightness(1.5);
   }
   .backdrop {
     position: absolute;
@@ -1022,22 +1007,9 @@
     cursor: pointer;
     color: #fff;
     z-index: 3;
-    display: none;
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -1050,7 +1022,7 @@
     position: absolute;
     top: calc(50% + 22vh);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -1069,7 +1041,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -1406,12 +1379,7 @@
   .fade-out {
     opacity: 0 !important;
   }
-  /*#homeTab {
-    top: -5em;
-    padding-bottom: 5em !important;
-    position: relative;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
-  }*/
+
   .sections.homeSectionsContainer {
     position: relative;
     z-index: 8;
@@ -1422,7 +1390,7 @@
     bottom: 20%;
     left: 50%;
     transform: translateX(-50%) scale(0.6);
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff13;
@@ -1440,7 +1408,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 27px;
@@ -1455,7 +1424,6 @@
     overflow: hidden;
     margin: 0;
     padding: 0%;
-    /*top: -3.5em;*/
   }
   .slide {
     transition: opacity 0.5s ease-in-out;
@@ -1473,28 +1441,26 @@
   .slide:focus {
     outline: #fff solid 2px;
   }
+
   .logo {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 50%;
     max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
-  }
-  .featured-logo-blur {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    scale: 1.01;
-    filter: blur(1.1rem);
-    z-index: 3;
+    transition: filter 0.3s ease;
+  }
+
+  .logo.low-quality {
+    filter: brightness(1.5) blur(5px);
+  }
+
+  .logo.high-quality {
+    filter: brightness(1.5);
   }
   .backdrop {
     position: absolute;
@@ -1685,22 +1651,9 @@
     cursor: pointer;
     color: #fff;
     z-index: 3;
-    display: none;
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -1713,7 +1666,7 @@
     position: absolute;
     top: calc(50% + 11em);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -1732,7 +1685,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -2078,7 +2032,7 @@
     bottom: 24%;
     left: 50%;
     transform: translateX(-50%) scale(0.6);
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff13;
@@ -2096,7 +2050,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 27px;
@@ -2128,28 +2083,26 @@
   .slide:focus {
     outline: #fff solid 2px;
   }
+
   .logo {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 50%;
     max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
-  }
-  .featured-logo-blur {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    scale: 1.01;
-    filter: blur(1.1rem);
-    z-index: 3;
+    transition: filter 0.3s ease;
+  }
+
+  .logo.low-quality {
+    filter: brightness(1.5) blur(5px);
+  }
+
+  .logo.high-quality {
+    filter: brightness(1.5);
   }
   .backdrop {
     position: absolute;
@@ -2340,22 +2293,9 @@
     cursor: pointer;
     color: #fff;
     z-index: 3;
-    display: none;
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -2368,7 +2308,7 @@
     position: absolute;
     top: calc(50% + 34vh);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -2387,7 +2327,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -2680,7 +2621,6 @@
     align-items: center;
   }
 }
-/*upwards changed lanscape width*/
 
 @media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
   .backdrop,
@@ -2724,23 +2664,18 @@
   .fade-out {
     opacity: 0 !important;
   }
-  /*#homeTab {
-    top: -5em;
-    padding-bottom: 5em !important;
-    position: relative;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
-  }*/
   .sections.homeSectionsContainer {
     position: relative;
     z-index: 8;
     top: 73vh;
   }
+
   .dots-container {
     position: absolute;
     bottom: 20%;
     left: 50%;
     transform: translateX(-50%) scale(0.6);
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff13;
@@ -2751,6 +2686,7 @@
     height: 22px;
     transition: opacity 0.5s ease-in-out;
   }
+
   .dot {
     display: inline-block;
     width: 9px;
@@ -2758,14 +2694,17 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
+
   .dot.active {
     width: 27px;
     height: 12px;
     background-color: #fff;
     border-radius: 10px;
   }
+
   #slides-container {
     position: relative;
     width: 100vw;
@@ -2790,28 +2729,26 @@
   .slide:focus {
     outline: #fff solid 2px;
   }
+
   .logo {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     max-height: 50%;
     max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
-  }
-  .featured-logo-blur {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 50%;
-    max-width: 70%;
-    width: auto;
-    scale: 1.01;
-    filter: blur(1.1rem);
-    z-index: 3;
+    transition: filter 0.3s ease;
+  }
+
+  .logo.low-quality {
+    filter: brightness(1.5) blur(5px);
+  }
+
+  .logo.high-quality {
+    filter: brightness(1.5);
   }
   .backdrop {
     position: absolute;
@@ -3002,22 +2939,9 @@
     cursor: pointer;
     color: #fff;
     z-index: 3;
-    display: none;
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -3030,7 +2954,7 @@
     position: absolute;
     top: calc(50% + 9em);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -3049,7 +2973,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -3368,18 +3293,6 @@
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -3392,7 +3305,7 @@
     position: absolute;
     top: calc(50% + 21vh);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -3411,7 +3324,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -3729,18 +3643,6 @@
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -3749,11 +3651,12 @@
     right: 20px;
     font-size: 12px;
   }
+
   .dots-container {
     position: absolute;
     top: calc(50% + 20vh);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -3765,6 +3668,7 @@
     transition: opacity 0.5s ease-in-out;
     scale: 0.8;
   }
+
   .dot {
     display: inline-block;
     width: 9px;
@@ -3772,14 +3676,17 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
+
   .dot.active {
     width: 22px;
     height: 12px;
     background-color: #fff;
     border-radius: 6px;
   }
+
   body {
     margin: 0;
     padding: 0;
@@ -3803,7 +3710,6 @@
     top: 65vh;
   }
   .slide {
-    transition: opacity 0.5s ease-in-out;
     position: absolute;
     top: 0;
     left: 0;
@@ -3811,13 +3717,7 @@
     height: 100%;
     display: block;
   }
-  .slide.active {
-    opacity: 1;
-    display: block;
-  }
-  .slide:focus {
-    outline: #fff solid 2px;
-  }
+
   .backdrop-container {
     position: relative;
     top: -40%;
@@ -4090,18 +3990,7 @@
     justify-content: center;
     align-items: center;
   }
-  .arrow::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background-color: rgb(12 110 162 / 0.7);
-    border-radius: 50%;
-    z-index: -1;
-  }
+
   .left-arrow {
     left: 20px;
     font-size: 12px;
@@ -4114,7 +4003,7 @@
     position: absolute;
     top: calc(50% + 21vh);
     right: 3%;
-    z-index: 2;
+    z-index: 3;
     display: flex;
     gap: 5px;
     background-color: #ffffff3d;
@@ -4133,7 +4022,8 @@
     margin: 0 5px;
     background-color: #cecece;
     border-radius: 50%;
-    transition: background-color 0.3s;
+    transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
+      height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
   }
   .dot.active {
     width: 22px;
@@ -4427,4 +4317,4 @@
     display: flex;
     align-items: center;
   }
-}
\ No newline at end of file
+}