From ac73b49d8da16cdebf74e1f2e04cf7a466337546 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 19 Nov 2025 15:26:19 +0000
Subject: [PATCH] feat: Darker icon borders/separators in dark theme + invert
 LIV Golf logo

- Add --icon-border variable: #ddd (light) / #2a2a2a (dark)
- Add --item-separator variable: rgba(0,0,0,0.1) / rgba(255,255,255,0.05)
- Replace 6 hardcoded icon borders with var(--icon-border)
- Replace 3 hardcoded separators with var(--item-separator)
- Add CSS filter to invert LIV Golf logo in dark themes for visibility
- LIV Golf logo filter: invert(1) in dark/auto(dark), none in light
---
 static/css/01-foundation/_themes.css     | 22 ++++++++++++++++++++++
 static/css/03-components/_experience.css | 18 +++++++++---------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css
index 63123d0..52916f0 100644
--- a/static/css/01-foundation/_themes.css
+++ b/static/css/01-foundation/_themes.css
@@ -36,6 +36,8 @@
   /* Borders & Dividers */
   --border-color: #333333;
   --border-light: #e0e0e0;
+  --icon-border: #ddd; /* Light visible border for icons */
+  --item-separator: rgba(0, 0, 0, 0.1); /* Light separator between items */
 
   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -84,6 +86,8 @@
   /* Borders & Dividers */
   --border-color: #404040;
   --border-light: #333333;
+  --icon-border: #2a2a2a; /* Much darker, less visible border for icons */
+  --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
 
   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -133,6 +137,8 @@
     /* Borders & Dividers */
     --border-color: #404040;
     --border-light: #333333;
+    --icon-border: #2a2a2a; /* Much darker, less visible border for icons */
+    --item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
 
     /* Shadows */
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -283,3 +289,19 @@
     transform: translateY(-3px) !important;
   }
 }
+
+/* ==============================================================================
+   SPECIFIC LOGO FIXES FOR DARK THEME
+   ============================================================================== */
+/* LIV Golf logo is black - invert it in dark themes for visibility */
+[data-color-theme="dark"] img[src*="livgolf"],
+[data-color-theme="auto"] img[src*="livgolf"] {
+  filter: invert(1);
+}
+
+/* Only apply invert to auto theme when system is in dark mode */
+@media (prefers-color-scheme: light) {
+  [data-color-theme="auto"] img[src*="livgolf"] {
+    filter: none;
+  }
+}
diff --git a/static/css/03-components/_experience.css b/static/css/03-components/_experience.css
index e5b0b5c..f4e07aa 100644
--- a/static/css/03-components/_experience.css
+++ b/static/css/03-components/_experience.css
@@ -153,7 +153,7 @@
     height: 60px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     padding: 4px;
 }
@@ -165,7 +165,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     color: var(--text-light);
     padding: 8px;
@@ -206,7 +206,7 @@
 .experience-item {
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--item-separator);
 }
 
 /* Keep border on all experience items including last one */
@@ -218,7 +218,7 @@
     align-items: flex-start;
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--item-separator);
 }
 
 /* Keep border on all course items including last one */
@@ -237,7 +237,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     padding: 4px;
 }
@@ -249,7 +249,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     color: var(--text-light);
     padding: 10px;
@@ -308,7 +308,7 @@
     align-items: flex-start;
     margin-bottom: 2.5rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--item-separator);
 }
 
 .project-icon {
@@ -325,7 +325,7 @@
     height: 80px;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     padding: 4px;
 }
@@ -337,7 +337,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--icon-border);
     background: transparent;
     color: var(--text-light);
     padding: 10px;