feat: refine dark theme colors, adjust paddings and shadows, and add subtle glow effects for improved UI depth and polish.

Author: Alexia Michelle

src/css/custom.css

@@ -30,11 +30,11 @@
 
 /* Premium Dark overrides */
 [data-theme='dark'] {
-  --ifm-background-color: #080112;
-  /* Deepest Purple/Black */
-  --ifm-navbar-background-color: #09021a;
-  --ifm-footer-background-color: #09021a;
-  /* Matches navbar for cohesion */
+  --ifm-background-color: #06010d;
+  /* Even deeper dark */
+  --ifm-navbar-background-color: #06010d;
+  --ifm-footer-background-color: #030005;
+  /* Deepest footer */
 
   --ifm-font-color-base: #e9ecef;
   --ifm-heading-color: #ffffff;
@@ -47,27 +47,26 @@
   --ifm-color-primary-lighter: #d4d0fe;
   --ifm-color-primary-lightest: #f1f0ff;
 
-  --ifm-contents-border-color: rgba(255, 255, 255, 0.05);
-  --ifm-toc-border-color: rgba(255, 255, 255, 0.05);
+  --ifm-contents-border-color: rgba(255, 255, 255, 0.03);
+  --ifm-toc-border-color: rgba(255, 255, 255, 0.03);
 
   /* Modern Depth */
   --glow-accent: rgba(162, 155, 254, 0.15);
 }
 
 /* Layout Polish */
 .navbar {
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 }
 
 .footer {
-  /* Softer gradient using #4F1C51 tone at center fading to dark */
-  background: radial-gradient(circle at center, rgba(79, 28, 81, 0.25) 0%, rgba(33, 15, 55, 0.95) 70%, #09021a 100%);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  background: var(--ifm-footer-background-color);
+  border-top: 1px solid rgba(255, 255, 255, 0.03);
   text-align: center;
-  padding: 4rem 0;
+  padding: 5rem 0;
 }
 
 .footer__links {

src/pages/index.module.css

@@ -4,33 +4,40 @@
  */
 
 .heroBanner {
-  padding: 8rem 0;
+  padding: 10rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: radial-gradient(circle at center, #1a0233 0%, #080112 100%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  background: radial-gradient(circle at 50% 120%, #1a0233 0%, #06010d 100%);
 }
 
 .heroBanner :global(.hero__title) {
-  font-size: 4rem;
+  font-size: 5rem;
   font-weight: 800;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.04em;
   margin-bottom: 1rem;
+  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .heroBanner :global(.hero__subtitle) {
   font-size: 1.5rem;
   color: #a0aec0;
   max-width: 800px;
-  margin: 0 auto 2rem;
+  margin: 0 auto 3rem;
   font-weight: 400;
 }
 
 
 @media screen and (max-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 4rem 2rem;
+  }
+
+  .heroBanner :global(.hero__title) {
+    font-size: 3rem;
   }
 }
 
@@ -43,20 +50,38 @@
 .screenshotSection {
   background: var(--ifm-background-color);
   padding: 4rem 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  position: relative;
 }
 
 .desktopScreenshot {
   max-width: 1000px;
   width: 100%;
   border-radius: 12px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(162, 155, 254, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 2rem;
+  position: relative;
+  z-index: 2;
+}
+
+/* Central glow effect behind images */
+.screenshotSection::before,
+.cockpitSection::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  height: 80%;
+  background: radial-gradient(circle, rgba(162, 155, 254, 0.08) 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 1;
 }
 
 .cockpitSection {
-  background: linear-gradient(180deg, var(--ifm-background-color) 0%, #0c0217 100%);
+  background: var(--ifm-background-color);
+  position: relative;
 }
 
 .cockpitImageGrid {
@@ -65,44 +90,45 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 2;
 }
 
 .cockpitImageSmall {
   position: absolute;
-  width: 60%;
+  width: 65%;
   border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
   top: 10%;
   left: 0;
   z-index: 1;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  transition: transform 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .cockpitImageLarge {
   position: absolute;
-  width: 80%;
+  width: 85%;
   border-radius: 8px;
-  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
-  bottom: 10%;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
+  bottom: 0%;
   right: 0;
   z-index: 2;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: transform 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .cockpitImageSmall:hover,
 .cockpitImageLarge:hover {
-  transform: scale(1.02);
+  transform: translateY(-10px) scale(1.02);
   z-index: 3;
 }
 
 @media screen and (max-width: 996px) {
   .cockpitImageGrid {
     height: auto;
     flex-direction: column;
-    gap: 1rem;
-    margin-top: 2rem;
+    gap: 2rem;
+    margin-top: 3rem;
   }
 
   .cockpitImageSmall,