Fix dark mode link colors - use light grey (#cccccc) instead of dark grey

- Add --color-primary-link-dark CSS variable
- Add global dark mode link color rules
- Fix .intro-link, .primary-link-button, .benchmark-main-subtitle in dark mode
- Remove inline color style from About link

Co-authored-by: openhands <openhands@all-hands.dev>

content.py

@@ -29,7 +29,7 @@ INTRO_PARAGRAPH = """
 </p>
 
 <p>
-    For methodology details, see the <a href="/about" style="color: #555555; text-decoration: underline;">About</a> page.
+    For methodology details, see the <a href="/about" class="intro-link">About</a> page.
 </p>
 """
 SCATTER_DISCLAIMER = """
@@ -239,7 +239,8 @@ css = """
 /* CSS Color Variables using All-Hands-AI color scheme */
 :root {
     --color-primary-accent: #FFE165; /* Yellow accent from All-Hands-AI */
-    --color-primary-link: #555555; /* Dark grey links */
+    --color-primary-link: #555555; /* Dark grey links for light mode */
+    --color-primary-link-dark: #cccccc; /* Light grey links for dark mode */
     --color-neutral-light: #D4CABD; /* Tan placeholder */
     --color-background-light: #F1EAE0; /* Beige/cream background */
     --color-background-dark: #292A36; /* Dark gray */
@@ -260,6 +261,17 @@ h2 {
     overflow: hidden;
 }
 
+/* Global link color styles */
+.dark a {
+    color: var(--color-primary-link-dark);
+}
+.dark a:hover {
+    color: #dddddd;
+}
+.dark a:visited {
+    color: #bbbbbb;
+}
+
 #intro-paragraph {
     font-size: 18px;
     max-width: 90%;
@@ -273,6 +285,15 @@ h2 {
     line-height: 1.8; 
 }
 
+/* Links in intro paragraph */
+.intro-link {
+    color: var(--color-primary-link);
+    text-decoration: underline;
+}
+.dark .intro-link {
+    color: var(--color-primary-link-dark);
+}
+
 #intro-paragraph ul {
     margin-top: 20px;
     margin-bottom: 20px;
@@ -392,7 +413,7 @@ nav.svelte-ti537g.svelte-ti537g {
     gap: 10px !important;
 }
 .dark .primary-link-button {
-    color: var(--color-primary-link);
+    color: var(--color-primary-link-dark);
 }
 .primary-link-button {
     background: none;
@@ -574,6 +595,9 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     overflow: hidden;
     padding-top: 120px;
 }
+.dark .benchmark-main-subtitle{
+    color: var(--color-primary-link-dark);
+}
 .benchmark-title{
     color: var(--color-primary-link);
     margin-top: 50px;