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;