From 241bcd466a03ffb3a3742e18fd7943713439bfc8 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Sun, 31 Mar 2024 21:55:52 +0530
Subject: [PATCH] (fixed): mobile floating navbar search button border spacing
 transparency

---
 htdocs/assets/_floatingbar.php |  55 ++---
 htdocs/assets/style.css        | 374 ++++++++++++++++++++++-----------
 tailwind.config.js             |   7 +-
 3 files changed, 294 insertions(+), 142 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 1678156..ea2b881 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -148,31 +148,38 @@ function isNavPageActive($pageName, $pageRoute) {
     <button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
 </div>
 <div id="mobile-floating-bar" class="fixed inset-x-0 bottom-[3vh] z-[50] flex lg:hidden justify-center items-center">
-    <div class="bottomnav w-[90vw] p-3 bg-bg_secondary rounded-xl relative flex justify-around items-center shadow-[0px_0px_30px] shadow-bg_primary">
-        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath ?>'">
-            <lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
-            <p class="mx-1 text-xs">Home</p>
-            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
-        </span>
-        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
-            <lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
-            <p class="mx-1 text-xs">Projects</p>
-            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
-        </span>
-        <div class="flex items-center absolute -top-1/2">
-            <button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full mx-2 shadow-[0px_0px_30px] shadow-bg_primary transition transform duration-300 border-[8px] border-bg_primary before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[20px] before:bg-[transparent] before:rounded-tr-full after:shadow-[0px_-10px_0_0_rgb(15,_23,_42)] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[20px] after:bg-[transparent] after:rounded-tl-full before:shadow-[0px_-10px_0_0_rgb(15,_23,_42)]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
+    <div class="bottomnav w-[90vw] relative flex justify-around items-end">
+        <div class="w-full flex justify-around items-center p-3 bg-bg_secondary rounded-tl-xl rounded-bl-xl rounded-tr-2xl shadow-[0px_0px_30px] shadow-bg_primary">
+            <span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath ?>'">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/cnpvyndp.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+                <p class="mx-1 text-xs">Home</p>
+                <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('home.php', '/');?>"></span>
+            </span>
+            <span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/projects' ?>'">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/utpmnzxz.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+                <p class="mx-1 text-xs">Projects</p>
+                <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('projects.php', '/projects');?>"></span>
+            </span>
+        </div>
+        <div class="flex items-center absolute -top-1/2 inset-x-auto">
+            <button id="mobilesearchbutton" class="searchbutton bg-accent_primary px-5 py-4 rounded-full transition transform duration-300 border-[8px] border-[transparent] bg-clip-padding before:content-[''] before:absolute before:top-1/2 before:-left-6 before:w-[20px] before:h-[40px] before:bg-bg_secondary before:rounded-tr-full after:shadow-[0px_-10px_0_0_transparent] after:content-[''] after:absolute after:top-1/2 after:-right-6 after:w-[20px] after:h-[40px] after:bg-bg_secondary after:rounded-tl-full before:shadow-[0px_-10px_0_0_transparent]"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
+        </div>
+        <div class="spacer w-[120px] bg-bg_secondary p-[1.15rem] relative">
+            <div class="absolute -top-[23px] left-0 w-[35px] h-[25px] bg-radiul-gradient-transparent-secondary"></div>
+            <div class="absolute -top-[23px] right-0 w-[35px] h-[25px] bg-radiul-gradient-secondary-transparent"></div>
+        </div>
+        <div class="w-full flex justify-around items-center p-3 bg-bg_secondary rounded-tr-xl rounded-br-xl rounded-tl-2xl shadow-[0px_0px_30px] shadow-bg_primary">
+            <span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+                <p class="mx-1 text-xs">Blog</p>
+                <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
+            </span>
+            <span class="bottoomnavitem flex flex-col items-center relative cursor-pointer" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
+                <lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
+                <p class="mx-1 text-xs">Contact</p>
+                <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
+            </span>
         </div>
-        <div class="spacer w-[20%]"></div>
-        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/blog' ?>'">
-            <lord-icon class="mx-1" src="https://cdn.lordicon.com/lyrrgrsl.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
-            <p class="mx-1 text-xs">Blog</p>
-            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('blog.php', '/blog');?>"></span>
-        </span>
-        <span class="bottoomnavitem flex flex-col items-center relative" onclick="location.href='<?php echo $basePath . '/contact' ?>'">
-            <lord-icon class="mx-1" src="https://cdn.lordicon.com/kthelypq.json" target=".bottoomnavitem" trigger="hover" colors="primary:#38BDF8" style="width:20px"></lord-icon>
-            <p class="mx-1 text-xs">Contact</p>
-            <span class="absolute -bottom-3 left-0 h-[3px] bg-accent_primary transition-all duration-300 rounded-tr-full rounded-tl-full w-0 <?php echo isNavPageActive('contact.php', '/contact');?>"></span>
-        </span>
     </div>
 </div>
 <div id="mobile-floating-share" class="fixed right-[1rem] -bottom-[10vh] z-[40] flex lg:hidden justify-center items-center">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 7d58feb..b30bff5 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -581,14 +581,31 @@ video {
   right: 0px;
 }
 
-.-top-7 {
-  top: -1.75rem;
+.inset-x-auto {
+  left: auto;
+  right: auto;
+}
+
+.-bottom-3 {
+  bottom: -0.75rem;
+}
+
+.-bottom-\[10vh\] {
+  bottom: -10vh;
+}
+
+.-top-1\/2 {
+  top: -50%;
 }
 
 .-top-\[0\.60rem\] {
   top: -0.60rem;
 }
 
+.-top-\[23px\] {
+  top: -23px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -641,6 +658,10 @@ video {
   right: 0.75rem;
 }
 
+.right-\[1rem\] {
+  right: 1rem;
+}
+
 .right-\[3\.3rem\] {
   right: 3.3rem;
 }
@@ -677,46 +698,6 @@ video {
   top: 4.7rem;
 }
 
-.-top-1\/2 {
-  top: -50%;
-}
-
-.-bottom-5 {
-  bottom: -1.25rem;
-}
-
-.bottom-5 {
-  bottom: 1.25rem;
-}
-
-.-bottom-2 {
-  bottom: -0.5rem;
-}
-
-.-bottom-3 {
-  bottom: -0.75rem;
-}
-
-.left-\[1rem\] {
-  left: 1rem;
-}
-
-.right-\[1rem\] {
-  right: 1rem;
-}
-
-.bottom-\[5vh\] {
-  bottom: 5vh;
-}
-
-.-bottom-\[5vh\] {
-  bottom: -5vh;
-}
-
-.-bottom-\[10vh\] {
-  bottom: -10vh;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -741,14 +722,14 @@ video {
   z-index: 100;
 }
 
-.z-\[50\] {
-  z-index: 50;
-}
-
 .z-\[40\] {
   z-index: 40;
 }
 
+.z-\[50\] {
+  z-index: 50;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -1057,6 +1038,10 @@ video {
   height: 200px;
 }
 
+.h-\[25px\] {
+  height: 25px;
+}
+
 .h-\[27px\] {
   height: 27px;
 }
@@ -1073,6 +1058,10 @@ video {
   height: 35px;
 }
 
+.h-\[3px\] {
+  height: 3px;
+}
+
 .h-\[40px\] {
   height: 40px;
 }
@@ -1102,10 +1091,6 @@ video {
   height: 100vh;
 }
 
-.h-\[3px\] {
-  height: 3px;
-}
-
 .max-h-\[45vh\] {
   max-height: 45vh;
 }
@@ -1126,8 +1111,8 @@ video {
   width: 0.5rem;
 }
 
-.w-\[20\%\] {
-  width: 20%;
+.w-\[120px\] {
+  width: 120px;
 }
 
 .w-\[200px\] {
@@ -1207,10 +1192,6 @@ video {
   width: 100vw;
 }
 
-.w-\[3rem\] {
-  width: 3rem;
-}
-
 .max-w-\[45vw\] {
   max-width: 45vw;
 }
@@ -1287,6 +1268,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1328,6 +1313,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1376,14 +1365,38 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-bl-xl {
+  border-bottom-left-radius: 0.75rem;
+}
+
+.rounded-br-xl {
+  border-bottom-right-radius: 0.75rem;
+}
+
+.rounded-tl-2xl {
+  border-top-left-radius: 1rem;
+}
+
 .rounded-tl-full {
   border-top-left-radius: 9999px;
 }
 
+.rounded-tl-xl {
+  border-top-left-radius: 0.75rem;
+}
+
+.rounded-tr-2xl {
+  border-top-right-radius: 1rem;
+}
+
 .rounded-tr-full {
   border-top-right-radius: 9999px;
 }
 
+.rounded-tr-xl {
+  border-top-right-radius: 0.75rem;
+}
+
 .border-\[1px\] {
   border-width: 1px;
 }
@@ -1404,14 +1417,6 @@ video {
   border-width: 5px;
 }
 
-.border-\[12px\] {
-  border-width: 12px;
-}
-
-.border-\[6px\] {
-  border-width: 6px;
-}
-
 .border-\[8px\] {
   border-width: 8px;
 }
@@ -1467,6 +1472,10 @@ video {
   border-color: rgba(255, 255, 255, 0.15);
 }
 
+.border-\[transparent\] {
+  border-color: transparent;
+}
+
 .border-accent_primary {
   --tw-border-opacity: 1;
   border-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1490,11 +1499,6 @@ video {
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
 }
 
-.border-bg_primary {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
-}
-
 .border-b-accent_secondary_transparent {
   border-bottom-color: rgba(255, 255, 255, 0.30);
 }
@@ -1566,12 +1570,24 @@ video {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.bg-radiul-gradient-secondary-transparent {
+  background-image: radial-gradient(at top left, transparent 65%, #1E293B 35%);
+}
+
+.bg-radiul-gradient-transparent-secondary {
+  background-image: radial-gradient(at top right, transparent 65%, #1E293B 35%);
+}
+
 .from-bg_third {
   --tw-gradient-from: #26334A var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(38 51 74 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1600,6 +1616,10 @@ video {
   padding: 0.30rem;
 }
 
+.p-\[1\.15rem\] {
+  padding: 1.15rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1645,6 +1665,16 @@ video {
   padding-right: 0.85rem;
 }
 
+.px-\[1\.30rem\] {
+  padding-left: 1.30rem;
+  padding-right: 1.30rem;
+}
+
+.px-\[1\.35rem\] {
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+}
+
 .px-\[1rem\] {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1705,21 +1735,6 @@ video {
   padding-bottom: 0.30rem;
 }
 
-.px-\[1\.50rem\] {
-  padding-left: 1.50rem;
-  padding-right: 1.50rem;
-}
-
-.px-\[1\.30rem\] {
-  padding-left: 1.30rem;
-  padding-right: 1.30rem;
-}
-
-.px-\[1\.35rem\] {
-  padding-left: 1.35rem;
-  padding-right: 1.35rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1918,6 +1933,48 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[0px_5px_30px\] {
+  --tw-shadow: 0px 5px 30px;
+  --tw-shadow-colored: 0px 5px 30px 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-\[0px_10px_20px\] {
+  --tw-shadow: 0px 10px 20px;
+  --tw-shadow-colored: 0px 10px 20px 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-\[0px_1px_20px\] {
+  --tw-shadow: 0px 1px 20px;
+  --tw-shadow-colored: 0px 1px 20px 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-\[0px_30px_20px\] {
+  --tw-shadow: 0px 30px 20px;
+  --tw-shadow-colored: 0px 30px 20px 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-\[0px_30px_30px\] {
+  --tw-shadow: 0px 30px 30px;
+  --tw-shadow-colored: 0px 30px 30px 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-\[0px_40px_10px\] {
+  --tw-shadow: 0px 40px 10px;
+  --tw-shadow-colored: 0px 40px 10px 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-\[0px_40px_50px\] {
+  --tw-shadow: 0px 40px 50px;
+  --tw-shadow-colored: 0px 40px 50px 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-accent_primary {
   --tw-shadow-color: #38BDF8;
   --tw-shadow: var(--tw-shadow-colored);
@@ -2006,19 +2063,9 @@ video {
   position: absolute;
 }
 
-.before\:top-0::before {
+.before\:-left-6::before {
   content: var(--tw-content);
-  top: 0px;
-}
-
-.before\:-left-10::before {
-  content: var(--tw-content);
-  left: -2.5rem;
-}
-
-.before\:-left-5::before {
-  content: var(--tw-content);
-  left: -1.25rem;
+  left: -1.5rem;
 }
 
 .before\:top-1\/2::before {
@@ -2026,19 +2073,24 @@ video {
   top: 50%;
 }
 
-.before\:-left-7::before {
+.before\:-bottom-\[50px\]::before {
   content: var(--tw-content);
-  left: -1.75rem;
+  bottom: -50px;
 }
 
-.before\:-left-6::before {
+.before\:left-0::before {
   content: var(--tw-content);
-  left: -1.5rem;
+  left: 0px;
 }
 
-.before\:h-\[20px\]::before {
+.before\:h-\[40px\]::before {
   content: var(--tw-content);
-  height: 20px;
+  height: 40px;
+}
+
+.before\:h-\[50px\]::before {
+  content: var(--tw-content);
+  height: 50px;
 }
 
 .before\:w-\[20px\]::before {
@@ -2046,15 +2098,45 @@ video {
   width: 20px;
 }
 
+.before\:w-\[120px\]::before {
+  content: var(--tw-content);
+  width: 120px;
+}
+
+.before\:w-\[50px\]::before {
+  content: var(--tw-content);
+  width: 50px;
+}
+
+.before\:w-\[70px\]::before {
+  content: var(--tw-content);
+  width: 70px;
+}
+
+.before\:w-\[75px\]::before {
+  content: var(--tw-content);
+  width: 75px;
+}
+
+.before\:w-\[60px\]::before {
+  content: var(--tw-content);
+  width: 60px;
+}
+
+.before\:w-full::before {
+  content: var(--tw-content);
+  width: 100%;
+}
+
 .before\:rounded-tr-full::before {
   content: var(--tw-content);
   border-top-right-radius: 9999px;
 }
 
-.before\:bg-bg_primary::before {
+.before\:bg-bg_secondary::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
 .before\:bg-accent_primary::before {
@@ -2063,18 +2145,75 @@ video {
   background-color: rgb(56 189 248 / var(--tw-bg-opacity));
 }
 
-.before\:bg-\[transparent\]::before {
+.before\:shadow-\[0px_-10px_0_0_transparent\]::before {
   content: var(--tw-content);
-  background-color: transparent;
-}
-
-.before\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::before {
-  content: var(--tw-content);
-  --tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
+  --tw-shadow: 0px -10px 0 0 transparent;
   --tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.before\:shadow-\[0px_-50px_30px\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px -50px 30px;
+  --tw-shadow-colored: 0px -50px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_50px_30px\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 50px 30px;
+  --tw-shadow-colored: 0px 50px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_-50px_30px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px -50px 30px inset;
+  --tw-shadow-colored: inset 0px -50px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_50px_30px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 50px 30px inset;
+  --tw-shadow-colored: inset 0px 50px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_0px_30px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 0px 30px inset;
+  --tw-shadow-colored: inset 0px 0px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_10px_30px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 10px 30px inset;
+  --tw-shadow-colored: inset 0px 10px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_10px_50px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 10px 50px inset;
+  --tw-shadow-colored: inset 0px 10px 50px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-\[0px_5px_50px_inset\]::before {
+  content: var(--tw-content);
+  --tw-shadow: 0px 5px 50px inset;
+  --tw-shadow-colored: inset 0px 5px 50px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.before\:shadow-bg_primary::before {
+  content: var(--tw-content);
+  --tw-shadow-color: #0F172A;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .before\:content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
@@ -2095,9 +2234,9 @@ video {
   top: 50%;
 }
 
-.after\:h-\[20px\]::after {
+.after\:h-\[40px\]::after {
   content: var(--tw-content);
-  height: 20px;
+  height: 40px;
 }
 
 .after\:w-\[20px\]::after {
@@ -2110,14 +2249,15 @@ video {
   border-top-left-radius: 9999px;
 }
 
-.after\:bg-\[transparent\]::after {
+.after\:bg-bg_secondary::after {
   content: var(--tw-content);
-  background-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.after\:shadow-\[0px_-10px_0_0_rgb\(15\2c _23\2c _42\)\]::after {
+.after\:shadow-\[0px_-10px_0_0_transparent\]::after {
   content: var(--tw-content);
-  --tw-shadow: 0px -10px 0 0 rgb(15, 23, 42);
+  --tw-shadow: 0px -10px 0 0 transparent;
   --tw-shadow-colored: 0px -10px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index c48880c..a019d1a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,7 +19,12 @@ module.exports = {
       accent_secondary_transparent: 'rgba(255, 255, 255, 0.30)',
       accent_primary_extratransparent: 'rgba(56, 189, 248, 0.15)',
     },
-    extend: {},
+    extend: {
+      backgroundImage: {
+        'radiul-gradient-transparent-secondary': 'radial-gradient(at top right, transparent 65%, #1E293B 35%)',
+        'radiul-gradient-secondary-transparent': 'radial-gradient(at top left, transparent 65%, #1E293B 35%)',
+      },
+    },
   },
   plugins: [],
 }