Added see-through content when the background effect is triggered.

assets/css/custom.css

@@ -6,16 +6,38 @@
 .glass {
   background: rgba(18, 47, 101, 0.6);
   border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8px);
   animation: backdropShift 10s linear infinite;
+  animation-delay: 2s;
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(18, 47, 101, 0.45);
   padding: 2rem;
   filter: saturate(0.8) brightness(0.9);
+  opacity: 1;
+  transition: opacity 1s ease-in-out, background 1s ease-in-out, backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s ease-in-out, filter 1s ease-in-out;
   z-index: 2;
 }
 
+@keyframes backdropShift {
+  0% {
+    backdrop-filter: blur(8px) hue-rotate(-10deg);
+  }
+  50% {
+    backdrop-filter: blur(8px) hue-rotate(10deg);
+  }
+  100% {
+    backdrop-filter: blur(8px) hue-rotate(-10deg);
+  }
+}
+
+.glass-unblurred {
+  background: rgba(18, 47, 101, 0.05) !important;
+  backdrop-filter: blur(0) hue-rotate(0deg) !important;
+  -webkit-backdrop-filter: blur(0) hue-rotate(0deg) !important;
+  filter: saturate(1.0) brightness(1.0) !important;
+  opacity: 0.6 !important;
+}
+
 .toc:has(#TableOfContents) {
   background-color: rgba(25, 25, 35, 0.3);
   border-radius: 10px;
@@ -145,18 +167,6 @@ header button[id^="search-button"]:hover {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
-@keyframes backdropShift {
-  0% {
-    backdrop-filter: blur(8px) hue-rotate(-10deg);
-  }
-  50% {
-    backdrop-filter: blur(8px) hue-rotate(10deg);
-  }
-  100% {
-    backdrop-filter: blur(8px) hue-rotate(-10deg);
-  }
-}
-
 /* TOC link styling */
 #TableOfContents a {
   color: rgba(255, 255, 255, 0.8);

layouts/partials/background-images.html

@@ -64,6 +64,7 @@
             circle.classList.remove('active');
             circle.classList.add('fade-out');
             fullImg.classList.add('unblurred');
+            document.querySelectorAll('.glass').forEach(el => el.classList.add('glass-unblurred'));
             isRevealed = true;
           }, 4000);
         }, 1000);
@@ -82,6 +83,7 @@
       resetTimer();
       circle.classList.remove('fade-out');
       fullImg.classList.remove('unblurred');
+      document.querySelectorAll('.glass').forEach(el => el.classList.remove('glass-unblurred'));
       isRevealed = false;
     };
 

layouts/partials/home/page.html

@@ -56,6 +56,7 @@
             circle.classList.remove('active');
             circle.classList.add('fade-out');
             fullImg.classList.add('unblurred');
+            document.querySelectorAll('.glass').forEach(el => el.classList.add('glass-unblurred'));
             isRevealed = true;
           }, 4000);
         }, 1000);
@@ -74,6 +75,7 @@
       resetTimer();
       circle.classList.remove('fade-out');
       fullImg.classList.remove('unblurred');
+      document.querySelectorAll('.glass').forEach(el => el.classList.remove('glass-unblurred'));
       isRevealed = false;
     };