From 62aa8d018d3c63fec5ab61420eb0e2acf268a965 Mon Sep 17 00:00:00 2001
From: Jeremy Karst <jeremy@karsttech.com>
Date: Wed, 7 Jan 2026 02:17:41 -0500
Subject: [PATCH] Added see-through content when the background effect is
 triggered.

---
 assets/css/custom.css                   | 36 ++++++++++++++++---------
 layouts/partials/background-images.html |  2 ++
 layouts/partials/home/page.html         |  2 ++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 8db57eb..02d1c5d 100644
--- a/assets/css/custom.css
+++ b/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);
diff --git a/layouts/partials/background-images.html b/layouts/partials/background-images.html
index f3400c5..9a24ff4 100644
--- a/layouts/partials/background-images.html
+++ b/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;
     };
 
diff --git a/layouts/partials/home/page.html b/layouts/partials/home/page.html
index 634b611..375044a 100644
--- a/layouts/partials/home/page.html
+++ b/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;
     };