Add background overlay to enhance visual depth on Services Homepage

2025-11-24 01:14:01 -05:00
parent c36c2c08f4
commit af0f307d9b
2 changed files with 2 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
  </head>
  <body>
    <canvas id="galaxy-canvas"></canvas>
+    <div id="background-overlay"></div>
    <header>
      <h1>My Services</h1>
      <p class="subtitle">Quick links to the commonly used containers on this host</p>
--- a/styles.css
+++ b/styles.css
@@ -5,6 +5,7 @@
 *{box-sizing:border-box}
 html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#001a2d;color:#e6eef8;overflow-x:hidden}
 #galaxy-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
+#background-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(60,60,60,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1;pointer-events:none}
 header,main,footer{position:relative;z-index:10}
 header{padding:24px 20px;text-align:center;background:rgba(0,26,45,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 header h1{margin:0;font-size:28px}