From 00e6dcf32d381fb63a10cbbb2e3e19ee1a62639e Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Wed, 8 Apr 2026 09:53:50 +0000
Subject: [PATCH] increase visual transparency

---
 dist/index.css | 12 ++++++------
 src/base.css   |  4 ++--
 src/colors.css |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index 27a29b06..e02bad58 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -14,7 +14,7 @@
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
-  opacity: 0.3;
+  opacity: 0.4;
 }
 main {
   z-index: 2;
@@ -59,7 +59,7 @@ main {
 }
 @media (prefers-color-scheme: dark) {
   #background-wrapper {
-    opacity: 0.2;
+    opacity: 0.5;
   }
   #background-wrapper #sky {
     --color-1: hsl(188, 100%, 30%);
@@ -106,7 +106,7 @@ main {
       
       120deg,
       hsl(var(--hue), 100%, var(--gradient-luma-1)),
-      hsla(var(--hue), 100%, var(--gradient-luma-2), 90%) );
+      hsla(var(--hue), 100%, var(--gradient-luma-2), 40%) );
   --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
   --surface-active: hsl(var(--hue), 100%, var(--active-luma));
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
@@ -130,13 +130,13 @@ main {
 @media (min-width: 1024px) {
   [color]:not([color=standard]).background {
     --luma: var(--background-luma);
-    --sat: 80%;
-    background: hsl(var(--hue), var(--sat), var(--luma));
+    --sat: 100%;
+    background: hsl(var(--hue), var(--sat), var(--luma), 40%);
   }
   @media (prefers-color-scheme: dark) {
     [color]:not([color=standard]).background {
       --luma: var(--background-luma-dark);
-      --sat: 40%;
+      --sat: 100%;
     }
   }
   [color=standard].background {
diff --git a/src/base.css b/src/base.css
index 1efaa3e1..e20d6a98 100644
--- a/src/base.css
+++ b/src/base.css
@@ -21,7 +21,7 @@
 
     overflow: hidden;
 
-    opacity: 0.3;
+    opacity: 0.4;
 }
 
 main {
@@ -78,7 +78,7 @@ main {
 
 @media (prefers-color-scheme: dark) {
     #background-wrapper {
-        opacity: 0.2;
+        opacity: 0.5;
     }
 
     #background-wrapper #sky {
diff --git a/src/colors.css b/src/colors.css
index 1b22cfb6..6cb0d97f 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -36,7 +36,7 @@
     --surface: linear-gradient(
         120deg,
         hsl(var(--hue), 100%, var(--gradient-luma-1)),
-        hsla(var(--hue), 100%, var(--gradient-luma-2), 90%)
+        hsla(var(--hue), 100%, var(--gradient-luma-2), 40%)
     );
     --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
     --surface-active: hsl(var(--hue), 100%, var(--active-luma));
@@ -70,14 +70,14 @@
 @media (min-width: 1024px) {
     [color]:not([color="standard"]).background {
         --luma: var(--background-luma);
-        --sat: 80%;
-        background: hsl(var(--hue), var(--sat), var(--luma));
+        --sat: 100%;
+        background: hsl(var(--hue), var(--sat), var(--luma), 40%);
     }
 
     @media (prefers-color-scheme: dark) {
         [color]:not([color="standard"]).background {
             --luma: var(--background-luma-dark);
-            --sat: 40%;
+            --sat: 100%;
         }
     }