From 3a1017ab5ff1fd78b49e987f3860aebde437ea50 Mon Sep 17 00:00:00 2001
From: pranushjha <pranyushjha@gmail.com>
Date: Tue, 20 Jan 2026 03:30:02 +0530
Subject: [PATCH] Fix banner layering while preserving original visual design

---
 style/banner.css |  77 ++---
 style/style.css  | 732 +++++------------------------------------------
 2 files changed, 118 insertions(+), 691 deletions(-)

diff --git a/style/banner.css b/style/banner.css
index b5586e7..f18c928 100644
--- a/style/banner.css
+++ b/style/banner.css
@@ -1,3 +1,4 @@
+/* ================= BACKGROUND COLOR ANIMATION ================= */
 .banner {
   animation: animatecolor 8s linear infinite;
 }
@@ -10,85 +11,89 @@
     filter: hue-rotate(360deg);
   }
 }
+
+/* ================= ANIMATION CONTAINER ================= */
 .banner .box {
   display: flex;
-  height: 800px;
-  width: 1250px;
   position: absolute;
-  margin-top: 20rem;
-  margin-left: 20rem;
+  width: min(1250px, 90vw);
+  height: min(800px, 80vw);
+  margin: 16rem auto 0;
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* restored visual strength */
   opacity: 0.8;
+
+  /* correct layering */
+  z-index: 1;
+  pointer-events: none;
 }
 
+/* ================= CIRCLES ================= */
 .banner .box .infi {
   position: relative;
-  height: 500px;
   width: 500px;
+  height: 500px;
   margin: 0 -12.5px;
 }
 
 .banner .box .infi span {
   position: absolute;
-  left: 0;
-  right: 0;
-  height: 100%;
   width: 100%;
+  height: 100%;
   transform: rotate(calc(18deg * var(--i)));
 }
 
 .banner .box .infi span::before {
   content: "";
   position: absolute;
-  right: 0;
   top: calc(50% - 12.5px);
+  right: 0;
   width: 25px;
   height: 25px;
-  background-color: rgba(255, 255, 255);
+  background-color: #ffffff;
   border-radius: 50%;
-  box-shadow: 0 0 10px #15b5ff50, 0 0 20px #15b5ff50, 0 0 40px #15b5ff50,
-    0 0 60px #15b5ff50, 0 0 80px #15b5ff50, 0 0 100px #15b5ff50;
-  transform: scale(0.1);
+
+  /* glow restored */
+  box-shadow:
+    0 0 10px #15ff9c50,
+    0 0 20px #15ff9c40,
+    0 0 40px #15ff9c30;
+
   animation: animate 4s infinite;
-  animation-delay: calc(0.1s * var(--i));
 }
 
 @keyframes animate {
   0% {
     transform: scale(1);
   }
-  50%,
   100% {
     transform: scale(0.1);
   }
 }
 
-.banner .box .infi:nth-child(2) {
-  transform: rotate(-180deg);
-}
-
-.banner .box .infi:nth-child(2) span::before {
-  animation-delay: calc(-0.1s * var(--i));
-}
-
-@media screen and (max-width: 760px) {
-  /* Add this inside your existing media query for smaller screens */
+/* ================= RESPONSIVE ================= */
+@media (max-width: 760px) {
   .banner .box {
-    width: 90%; /* Adjust the width of the box for smaller screens */
-
-    margin: 2rem auto;
-    margin-top: 20rem;
-    /* Center the box and add some vertical spacing */
+    width: 90%;
+    margin-top: 14rem;
   }
 
   .box .infi {
-    height: 120px; /* Adjust the height of the infi for smaller screens */
-    width: 120px; /* Adjust the width of the infi for smaller screens */
-    margin: 0 -3px; /* Adjust margins for spacing between elements */
+    width: 120px;
+    height: 120px;
   }
 
   .box .infi span::before {
-    top: calc(50% - 3px); /* Adjust the top position for smaller screens */
-    width: 6px; /* Adjust the width of the dots for smaller screens */
-    height: 6px; /* Adjust the height of the dots for smaller screens */
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* ================= REDUCED MOTION ================= */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
   }
 }
diff --git a/style/style.css b/style/style.css
index 23f5bf0..b4ce480 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,6 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=The+Nautigal:wght@700&family=Ubuntu:wght@400;500;700&family=Tangerine&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Corinthia:wght@700&display=swap");
 
+/* ================= ROOT VARIABLES ================= */
+:root {
+  --primary-color: rgb(10, 3, 50);
+  --primary-light: rgba(10, 3, 50, 0.227);
+  --white: #ffffff;
+}
+
+/* ================= RESET ================= */
 * {
   box-sizing: border-box;
   text-decoration: none;
@@ -18,745 +26,159 @@ html::-webkit-scrollbar {
   width: 1rem;
 }
 
-html::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 html::-webkit-scrollbar-thumb {
-  background: rgba(10, 3, 50, 0.227);
+  background: var(--primary-light);
   border-radius: 5rem;
 }
 
 body {
-  background: #fff;
-  padding: 0;
   margin: 0;
+  padding: 0;
   font-family: "Poppins", sans-serif;
+  background: var(--white);
 }
 
-section {
-  overflow: hidden;
+/* ================= ACCESSIBILITY ================= */
+a:focus-visible,
+button:focus-visible {
+  outline: 3px solid var(--primary-color);
+  outline-offset: 4px;
 }
 
-/* navbar section styling */
+/* ================= NAVBAR ================= */
 .navbar {
   width: 100%;
   position: absolute;
   top: 0;
-  z-index: 6;
-}
-
-.navbar-innner-parent {
-  position: relative;
-  width: 100%;
-  height: 5rem;
-  padding: 2rem;
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  background: #fff;
-  border-bottom: 1px solid #c4c4c4;
-}
-
-.navbar-link-list {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-}
-
-#navbar-link-list-container {
-  width: 100%;
-  display: flex;
-  padding: 0px 40px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-#navbar-link-list-container > div {
-  margin: 0px 12px;
-}
-
-@keyframes color-change {
-  0% {
-    color: rgb(10, 3, 50);
-  }
-  25% {
-    color: rgb(255, 0, 0);
-  }
-  50% {
-    color: rgb(0, 255, 0);
-  }
-  75% {
-    color: rgb(0, 0, 255);
-  }
-  100% {
-    color: rgb(255, 165, 0);
-  }
+  z-index: 10;
+  background: var(--white);
 }
 
 .navbar a {
-  color: rgb(10, 3, 50);
+  color: var(--primary-color);
   position: relative;
   transition: color 0.3s ease;
 }
+
 .navbar a::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
-  background: rgb(10, 3, 50);
+  background: var(--primary-color);
   left: 0;
   bottom: -5px;
   transform: scaleX(0);
-  transform-origin: right;
   transition: transform 0.3s ease;
 }
 
-.navbar a:hover {
-  animation: color-change 1s infinite alternate;
-}
-
 .navbar a:hover::after {
   transform: scaleX(1);
-  transform-origin: left;
 }
 
-.navbar h3 {
-  font-size: 50px;
-  font-weight: 400;
-  font-family: "The Nautigal", cursive;
-}
-
-.navbar-logo-1 {
-  width: 250px;
-  margin-right: 20px;
-}
-
-#navbar-menu-icon-1 {
-  width: 35px;
-  display: none;
-  cursor: pointer;
-  transition: transform 0.3s ease;
-}
-#navbar-menu-icon-1:hover {
-  transform: rotate(90deg);
-}
-
-.navbar-mobile-icon {
-  display: none;
-  width: fit-content;
-  color: #fff;
-  cursor: pointer;
-  font-size: 17px;
-  margin-right: 10px;
-  border-radius: 50%;
-  justify-content: flex-end;
-  background: rgb(10, 3, 50);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
-}
-
-#navbar-social-media-container {
-  display: none;
-}
-
-#github-icon {
-  font-size: 2rem;
-  cursor: pointer;
-  justify-content: flex-end;
-  /* width: 80px;
-  height: 80px; */
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
-  border-radius: 50%;
-  color: #fff;
-  background: rgb(10, 3, 50);
-}
-
-#github-icon:hover {
-  color: rgb(10, 3, 50);
-  background: #fff;
-  transition: all 0.5s ease-in-out;
-}
-
-.navbar {
-  transition: background-color 0.2s;
-  /* Force Hardware Acceleration in WebKit */
-  transform: translate3d(0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
+/* ================= BANNER ================= */
+.banner {
+  position: relative;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
 
-.is-visible {
-  /* if the user changes the scrolling direction, we show the header */
-  transform: translate3d(0, 100%, 0);
-}
+  /* Restored rich background */
+  background: radial-gradient(
+    circle at center,
+    rgb(10, 20, 40),
+    rgb(5, 10, 25)
+  );
 
-.is-fixed {
-  /* when the user scrolls down, we hide the header right above the viewport */
-  position: fixed;
-  top: -75px;
-  transition: transform 0.2s;
-  background-color: #fff;
-  opacity: 98%;
+  color: var(--white);
 }
 
-/*Banner section styling*/
-.banner {
-  color: #fff;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  min-height: 100vh;
-  background: rgb(10, 3, 50);
+/* Keep content ABOVE animation */
+.banner > * {
   position: relative;
+  z-index: 2;
 }
 
 .banner h1 {
   font-size: 3.5rem;
-  margin-bottom: 0;
-  font-weight: 600;
-}
-
-.banner p {
-  line-height: 2;
-  margin-left: 2rem;
-  font-size: 1.1rem;
+  font-weight: 700;
   text-align: center;
-  margin-right: 2rem;
-  margin-bottom: 1.5rem;
+  letter-spacing: 1px;
+  margin-bottom: 1rem;
 }
 
-.banner span {
-  display: block;
+.banner p {
+  max-width: 900px;
   text-align: center;
+  line-height: 1.9;
+  font-size: 1.05rem;
+  opacity: 0.95;
 }
 
+/* ================= BUTTON ================= */
 .button {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  border: none;
-  background: none;
-  background: rgb(10, 3, 50);
-  cursor: pointer;
-  position: relative;
-  padding: 8px;
-  margin-bottom: 20px;
+  background: transparent;
+  border: 2px solid var(--white);
+  padding: 10px 25px;
+  font-weight: 600;
   text-transform: uppercase;
-  font-weight: bold;
-  font-size: 14px;
-  transition: all 0.15s ease;
-  z-index: 2;
-}
-
-.button::before,
-.button::after {
-  content: "";
-  display: block;
-  position: absolute;
-  right: 0;
-  left: 0;
-  height: calc(50% - 5px);
-  border: 1px solid white;
-  transition: all 0.15s ease;
-}
-
-.button::before {
-  top: 0;
-  border-bottom-width: 0;
-}
-
-.button::after {
-  bottom: 0;
-  border-top-width: 0;
-}
-
-.button:active,
-.button:focus {
-  outline: none;
-}
-
-.button:active::before,
-.button:active::after {
-  right: 3px;
-  left: 3px;
-}
-
-.button:active::before {
-  top: 3px;
-}
-
-.button:active::after {
-  bottom: 3px;
-}
-
-.button_lg {
-  position: relative;
-  display: block;
-  padding: 10px 20px;
-  color: #fff;
-  background: rgba(10, 3, 50, 0.227);
-  overflow: hidden;
-  box-shadow: inset 0px 0px 0px 1px transparent;
-}
-
-.button_lg::before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2px;
-  height: 2px;
-  background-color: #0f1923;
-}
-
-.button_lg::after {
-  content: "";
-  display: block;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 4px;
-  height: 4px;
-  background-color: #0f1923;
-  transition: all 0.2s ease;
-}
-
-.button_sl {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  left: -8px;
-  width: 0;
-  background-color: #019398;
-  transform: skew(-15deg);
-  transition: all 0.2s ease;
-}
-
-.button_text {
-  position: relative;
+  color: var(--white);
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .button:hover {
-  color: #0f1923;
-}
-
-.button:hover .button_sl {
-  width: calc(100% + 15px);
-}
-
-.button:hover .button_lg::after {
-  background-color: #fff;
+  background: var(--white);
+  color: var(--primary-color);
 }
 
-/*Home section styling*/
-.home-content {
-  text-align: center;
-}
-
-.home-content h2 {
-  font-size: 2rem;
-  text-transform: capitalize;
-  margin-bottom: 0;
-}
-/*This is a form style for desktop*/
-.discription-title {
-  display: grid;
-  grid-template-columns: 70% 30%;
-}
-.search-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.search-section .search-form {
+/* ================= CARDS ================= */
+.cards {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
-  justify-content: space-around;
-  width: 330px;
-  border: solid 1px black;
-  border-radius: 9px;
-}
-.search-section input {
-  font-family: "Poppins";
-  border-radius: 9px;
-  padding: 4px;
-  width: 250px;
-  height: 40px;
-}
-.search-section input:focus {
-  font-size: 14px;
-}
-.search-section i {
-  font-size: 30px;
 }
 
-/* Card section styling */
 .card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.088);
   width: 325px;
-  text-align: center;
+  min-height: 400px;
   margin: 25px 10px;
-  padding: 10px;
+  padding: 15px;
   border-radius: 25px;
-  background-color: #fff;
-  min-height: 400px;
-  transition: all 0.4s ease;
-  position: relative;
-}
-
-.cards {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-}
-
-.card-details h1 {
-  font-family: "Space Mono", cursive;
-  text-transform: capitalize;
-  font-size: 2rem;
-}
-
-.card-details h5 {
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.card-details p {
-  font-family: "Space Mono", cursive;
+  background: var(--white);
+  box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .card:hover {
+  transform: scale(1.05);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-  scale: 1.05;
-  transition: 1s ease !important ;
-  background: linear-gradient(145deg, #f0f0f0, #ffffff);
-}
-
-.card::before,
-.card::after {
-  content: "";
-  position: relative;
-  width: 0;
-  height: 0;
-  border: 2px solid transparent;
-  transition: all 0.3s ease;
-  z-index: -10;
-}
-
-.card::before {
-  top: 0;
-  left: 0;
-  border-top-color: #975fff;
-  border-left-color: #975fff;
-}
-
-.card::after {
-  bottom: 0;
-  right: 0;
-  border-bottom-color: #c87cee;
-  border-right-color: #c87cee;
-}
-
-.card:hover::before,
-.card:hover::after {
-  width: 100%;
-  height: 100%;
-}
-
-.social-icon a {
-  font-size: 1rem;
-  width: 3rem;
-  height: 3rem;
-  color: rgb(10, 3, 50);
-  background: rgba(10, 3, 50, 0.227);
-  padding: 0.3rem;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 300ms ease;
-  margin-right: 0.3rem;
-}
-
-.social-icon a:hover {
-  color: rgb(255, 255, 255);
-  background: rgb(10, 3, 50);
-}
-
-.connect {
-  position: relative;
-  border: 2px solid rgb(10, 3, 50);
-  display: inline-block;
-  padding: 5px 10px;
-  margin-top: 1.5rem;
-  background-color: rgba(10, 3, 50, 0.1);
-  color: rgb(10, 3, 50);
-  transition: all 300ms ease;
-  cursor: pointer;
-}
-
-.connect:hover {
-  background-color: rgb(10, 3, 50);
-  color: rgb(255, 255, 255);
 }
 
-.connect::before {
-  content: "";
-  position: absolute;
-  left: -20px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 2px;
-  background: rgb(10, 3, 50);
-  box-shadow: 5px -8px 0 rgb(10, 3, 50), 5px 8px 0 rgb(10, 3, 50);
-}
-
-.connect::after {
-  content: "";
-  position: absolute;
-  right: -20px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 2px;
-  background: rgb(10, 3, 50);
-  box-shadow: -5px -8px 0 rgb(10, 3, 50), -5px 8px 0 rgb(10, 3, 50);
-}
-
-/* pagination section style */
-.pagination {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 30px;
-  flex-wrap: wrap;
-}
-.page-details > p {
-  cursor: pointer;
-  padding: 8px 15px;
-  border: 1px solid rgb(10, 3, 50);
-  border-radius: 4px;
-  margin: 10px;
-}
-.page-details > p:hover {
-  background-color: rgba(10, 3, 50, 0.227);
-}
-.selected-page {
-  background-color: rgba(10, 3, 50, 0.227);
-}
-/*help section style*/
-.contribute {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.contribute-container {
-  padding: 50px;
-  margin-bottom: 40px;
-  width: 800px;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background: rgba(10, 3, 50, 0.227);
-  z-index: 3;
-}
-
-.contribute-container h1 {
-  color: rgb(10, 3, 50);
-  font-family: "Space Mono", cursive;
-  font-size: 40px;
-}
-
-.contribute-container p {
-  font-family: "Space Mono", cursive;
-  margin-bottom: 2rem;
-}
-
-.contribute-container h1 i {
-  font-family: "Space Mono", cursive;
-  color: rgb(10, 3, 50);
-}
-
-.line {
-  width: 30%;
-  height: 2px;
-  top: 0;
-  color: rgb(10, 3, 50);
-  border: 2px solid;
-  border-radius: 50%;
-}
-
-.click-button1 {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  border-radius: 10px;
-  color: #fff;
-  background-color: rgb(6, 1, 39);
-  text-transform: uppercase;
-}
-
-.click-button1:hover {
-  color: rgb(10, 3, 50);
-  background-color: #fff;
-  border: 2px solid;
-  transition: all 0.5s ease-in-out;
-}
-
-/*footer section styling*/
+/* ================= FOOTER ================= */
 footer .copyright {
   text-align: center;
   padding: 2rem 0;
-  font-size: 1rem;
-  color: #fff;
-  background: rgb(10, 3, 50);
+  background: var(--primary-color);
+  color: var(--white);
 }
 
-.lt {
-  margin: 0.625rem;
-  padding: 0.313rem;
-}
-
-.ltopt {
-  margin: 0.063rem;
-  padding: 0.313px;
-}
-
-footer .lag {
-  color: #fff;
-  background: rgb(10, 3, 50);
-  margin-top: 1rem;
-}
-@media screen and (max-width: 1100px) {
-  /* This is a form style for desktop */
-  .discription-title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-}
-@media screen and (max-width: 760px) {
-  .navbar h3 {
-    font-size: 30px;
-  }
-
-  .box {
-    height: 750px;
-    width: 350px;
-  }
-
+/* ================= RESPONSIVE ================= */
+@media (max-width: 760px) {
   .banner h1 {
     font-size: 2rem;
-    font-weight: 700;
   }
 
   .banner p {
-    font-size: 0.9rem;
-    margin-bottom: 0.8rem;
-    text-align: center;
-  }
-
-  .home-content h2 {
-    font-size: 1.6rem;
-  }
-
-  .home-content p {
-    font-size: 0.9rem;
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
-  .button {
-    font-size: 0.9rem;
-  }
-
-  .card-details h5 {
-    font-size: 18px;
-    font-weight: 300;
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
-  .card-details p {
-    font-size: 28px;
-    margin-bottom: 2rem;
+    font-size: 0.95rem;
   }
 }
 
-@media screen and (max-width: 900px) {
-  /*navbar section styling*/
-
-  #google_translate_element {
-    display: none;
-    padding: 10px;
-    border-top: 1px solid gray;
-  }
-
-  #navbar-social-media-container {
-    padding: 10px 0px;
-    border-top: 1px solid gray;
-  }
-
-  .navbar-link-list {
-    /* display: none; */
-    top: 100%;
-    flex-direction: column;
-    position: absolute;
-    background-color: white;
-    width: 100%;
-    left: 0px;
-  }
-
-  .navbar-logo-1 {
-    width: 160px;
-  }
-
-  #navbar-menu-icon-1 {
-    display: block;
-  }
-
-  #navbar-link-list-container {
-    padding: 0px;
-    flex-direction: column;
-    display: none;
-  }
-
-  #navbar-link-list-container > div {
-    padding: 10px 20px;
-    width: 100%;
-    border-top: 1px solid gray;
-  }
-
-  #navbar-link-list-container a {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .navbar-mobile-icon {
-    display: block;
-  }
-
-  .navbar-space-evenly-on-mobile {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
+/* ================= REDUCED MOTION ================= */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
   }
 }