fix: bring social share widget into WCAG AA and theming standard compliance

2 files changed, 32 insertions, 22 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 4386b1d..d7d2be0 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -299,16 +299,15 @@ html.theme-light {
   /* Social share widget */
   .share-widget {
     padding-top: 0.75rem;
-    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+    border-top: 1px solid var(--border);
   }
 
   .share-label {
     font-family: var(--font-mono, monospace);
-    font-size: 0.7rem;
+    font-size: 0.75rem;
     color: var(--text-dim);
     letter-spacing: 0.08em;
     margin-bottom: 0.5rem;
-    opacity: 0.7;
   }
 
   .btn-share {
@@ -318,8 +317,8 @@ html.theme-light {
     width: 50px;
     height: 50px;
     border-radius: 4px;
-    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-    background: color-mix(in srgb, var(--surface) 50%, transparent);
+    border: 1px solid var(--border);
+    background: var(--surface);
     color: var(--text-dim);
     cursor: pointer;
     transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
@@ -336,22 +335,28 @@ html.theme-light {
 
   .btn-share:hover {
     color: var(--accent);
-    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
-    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+    border-color: rgba(var(--accent-rgb), 0.5);
+    background: rgba(var(--accent-rgb), 0.06);
     box-shadow: 0 0 10px var(--accent-glow);
   }
 
   .btn-share:focus-visible {
-    outline: none;
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
     color: var(--accent);
     border-color: var(--accent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
   }
 
   .btn-share--copied {
     color: var(--accent2);
-    border-color: color-mix(in srgb, var(--accent2) 50%, transparent);
-    background: color-mix(in srgb, var(--accent2) 6%, var(--surface));
+    border-color: var(--accent2);
+    background: var(--surface);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .btn-share {
+      transition: none;
+    }
   }
 
   /* Badge base style */
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 2768fc1..f7d346b 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1411,16 +1411,15 @@ button,
 
 .share-widget {
   padding-top: 0.75rem;
-  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+  border-top: 1px solid var(--border);
 }
 
 .share-label {
   font-family: var(--font-mono, monospace);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   color: var(--text-dim);
   letter-spacing: 0.08em;
   margin-bottom: 0.5rem;
-  opacity: 0.7;
 }
 
 .btn-share {
@@ -1430,8 +1429,8 @@ button,
   width: 50px;
   height: 50px;
   border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-  background: color-mix(in srgb, var(--surface) 50%, transparent);
+  border: 1px solid var(--border);
+  background: var(--surface);
   color: var(--text-dim);
   cursor: pointer;
   transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
@@ -1448,22 +1447,28 @@ button,
 
 .btn-share:hover {
   color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
-  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: rgba(var(--accent-rgb), 0.06);
   box-shadow: 0 0 10px var(--accent-glow);
 }
 
 .btn-share:focus-visible {
-  outline: none;
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
   color: var(--accent);
   border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
 .btn-share--copied {
   color: var(--accent2);
-  border-color: color-mix(in srgb, var(--accent2) 50%, transparent);
-  background: color-mix(in srgb, var(--accent2) 6%, var(--surface));
+  border-color: var(--accent2);
+  background: var(--surface);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-share {
+    transition: none;
+  }
 }
 
 /* Badge base style */