- improve text to background contrasts

- slightly reduce redundancy

Author: TobiasMue91

index.html

@@ -15,7 +15,7 @@
     <title>GPTGames: Collection of AI-Generated HTML Games and Utilities</title>
     <style>
         :root {
-            --primary:#0276a8; --primary-hover: #015f87; --secondary: #bf6b0b; --secondary-hover: #9c5b06;
+            --primary:#005885; --primary-hover: #004a6e; --secondary: #166437; --secondary-hover: #114a2a;
             --bg:#f8f9fa; --card:#fff; --dark:#1e272e; --gray:#e2e6ea; --text:#1e272e; --border:#dee2e6;
             --shadow:0 2px 6px rgba(0,0,0,0.08); --radius:8px; --transition:all 0.2s ease;
         }
@@ -61,7 +61,7 @@
         .card-type {position:absolute; top:0.5rem; left:0.5rem; padding:0.25rem 0.5rem; border-radius:var(--radius); font-size:0.7rem; font-weight:600; color:white; z-index:2;}
         .card-type.game {background:var(--primary);}
         .card-type.tool {background:var(--secondary);}
-        .new-badge {background:#2ecc71;}
+        .new-badge {background:#166437;}
         .featured-badge {background:#9b59b6;}
         .card-content {padding:1rem; display:flex; flex-direction:column; flex-grow:1;}
         .card-title {font-size:1rem; font-weight:600; margin-bottom:0.5rem; color:var(--dark); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
@@ -138,8 +138,17 @@
         .svg-inline--fa {display: inline-block;vertical-align: -0.125em;overflow: visible;}
         #themeToggleBtn:focus-visible {outline: 2px solid var(--primary);}
         .theme-icon-light, .theme-icon-dark {pointer-events: none;}
-        .light-mode { --primary: #0276a8; --primary-hover: #015f87; --secondary: #bf6b0b; --secondary-hover: #9c5b06; --bg: #f8f9fa; --card: #fff; --dark: #1e272e; --gray: #e2e6ea; --text: #1e272e; --border: #dee2e6; --shadow: 0 2px 6px rgba(0,0,0,0.08); }
-        .dark-mode { --primary: #029CDF; --primary-hover: #0276a8; --secondary: #bf6b0b; --secondary-hover: #9c5b06; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
+        .dark-mode {
+            --primary: #0068a0;
+            --primary-hover: #005885;
+            --bg: #121212;
+            --card: #1e1e1e;
+            --dark: #d4d5d6;
+            --gray: #2d2d2d;
+            --text: #e4e6eb;
+            --border: #333333;
+            --shadow: 0 2px 6px rgba(0,0,0,0.2);
+        }
         .dark-mode body { background-color: var(--bg); background-blend-mode: color-burn; }
         .dark-mode header, .dark-mode .filter-bar, .dark-mode footer { background-color: var(--card); border-color: var(--border); }
         .dark-mode .card, .dark-mode .stat-card, .dark-mode .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }