src/styles/style.css

@@ -1,13 +1,13 @@
 :root {
   /* Witch color palette */
-  --witch-purple: #2B1B3D;
-  --witch-plum: #44275A;
-  --witch-rose: #A8577E;
-  --witch-mauve: #D4A5C7;
-  --witch-lavender: #E8D5E8;
-  --witch-black: #0A0009;
-  --witch-silver: #C0C0C0;
-  --witch-moon: #F5F5F5;
+  --witch-purple: #2b1b3d;
+  --witch-plum: #44275a;
+  --witch-rose: #a8577e;
+  --witch-mauve: #d4a5c7;
+  --witch-lavender: #e8d5e8;
+  --witch-black: #0a0009;
+  --witch-silver: #c0c0c0;
+  --witch-moon: #f5f5f5;
   --witch-shadow: rgba(10, 0, 9, 0.7);
 
   /* Light theme uses lighter colors for background, darker for text */
@@ -22,6 +22,10 @@
   --sl-color-gray-4: var(--witch-rose);
   --sl-color-gray-5: var(--witch-plum);
   --sl-color-gray-6: var(--witch-purple);
+
+  /* Translucent background */
+  --content-bg: rgba(181, 185, 187, 0.543);
+  --content-blur: 8px;
 }
 
 html[data-theme="dark"] {
@@ -67,6 +71,16 @@ html[data-theme="dark"] {
   color: var(--primary-color);
 }
 
+.right-sidebar-panel {
+  background: var(--content-bg);
+  backdrop-filter: var(--content-blur);
+}
+
+.content-panel {
+  background: var(--content-bg);
+  backdrop-filter: var(--content-blur);
+}
+
 h1,
 h2,
 h3,
@@ -106,7 +120,8 @@ footer > div > p {
   color: var(--primary-color) !important;
 }
 
-starlight-theme-select, starlight-theme-select > label {
+starlight-theme-select,
+starlight-theme-select > label {
   color: var(--primary-color) !important;
 }
 
@@ -116,6 +131,8 @@ starlight-theme-select, starlight-theme-select > label {
 
 .sidebar-content {
   color: var(--primary-color) !important;
+  background: var(--content-bg);
+  backdrop-filter: var(--content-blur);
 }
 
 .link-title {