fix(readable-background): add a translucent background to main content (#23)

### Explanation

This makes the main content area readable.
![Screenshot 2026-02-03 at 12.10.01 PM.png](/attachments/5103926c-17a1-49b5-8594-2f985b6bb23d)

### Issue

22

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [x] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [x] My contribution adds new code, and I have added tests to cover it.
- [x] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [x] All new and existing tests pass locally with my changes.
- [x] Code coverage remains at or above the configured threshold.

### Documentation

I have made the following PR to update the documentation site by adding a translucent background to main content sections to improve text readability against the background artwork.

### Versioning

Minor - My pull request introduces a new non-breaking feature.

Co-authored-by: Rain <rainkalugdan@gmail.com>
Reviewed-on: #23
Co-authored-by: rain <rain@nhcarrigan.com>
Co-committed-by: rain <rain@nhcarrigan.com>

src/styles/style.css

@@ -1,18 +1,19 @@
 :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-purple-translucent: hsla(267, 40%, 17%, 0.597);
+  --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 */
   --primary-color: var(--witch-purple);
-  --background-color: var(--witch-lavender)DC;
+  --background-color: var(--witch-lavender) DC;
   --sl-color-text-accent: var(--witch-purple);
 
   /* Additional Starlight overrides */
@@ -22,12 +23,19 @@
   --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"] {
   /* Dark theme uses darker colors for background, lighter for text */
+
+  .page {
+    --background-color: var(--witch-purple-translucent);
+  }
   --primary-color: var(--witch-lavender);
-  --background-color: var(--witch-purple)ee;
   --sl-color-text-accent: var(--witch-lavender);
 
   /* Additional Starlight overrides for dark theme */
@@ -77,6 +85,11 @@ a {
   color: var(--primary-color) !important;
 }
 
+.page {
+  background: var(--content-bg);
+  backdrop-filter: var(--content-blur);
+}
+
 a[aria-current="page"] {
   color: var(--background-color) !important;
   background-color: var(--witch-rose) !important;
@@ -106,7 +119,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;
 }