From 9039bdb70b56b38fbf3c332c8f2dadc82ba4f52e Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Thu, 26 Feb 2026 06:33:16 -0500
Subject: [PATCH] feat: Enhance comparison card styles for dark mode and
 improve hover effects

---
 theme/assets/css/main.css | 50 +++++++++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 52e2a4d..451991d 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -1655,18 +1655,31 @@ p:last-child { margin-bottom: 0; }
   padding-inline: 1rem;
   border-radius: var(--radius-sm);
 }
+@media (prefers-color-scheme: dark) {
+  .oribi-card.comparison-row:hover {
+    background: rgba(var(--color-primary-rgb), .1);
+  }
+}
 .oribi-card.comparison-row .comparison-check {
-  width: 28px;
-  height: 28px;
-  background: var(--color-primary-lt);
-  color: var(--color-primary);
+  width: 32px;
+  height: 32px;
+  background: var(--color-accent);
+  color: var(--color-bg);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: .85rem;
-  font-weight: 700;
+  font-size: .9rem;
+  font-weight: 800;
   flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
+}
+@media (prefers-color-scheme: dark) {
+  .oribi-card.comparison-row .comparison-check {
+    background: var(--color-accent-dk);
+    color: var(--color-accent-lt);
+    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+  }
 }
 .oribi-card.comparison-row h3 {
   font-size: 1rem;
@@ -3549,6 +3562,12 @@ p:last-child { margin-bottom: 0; }
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--card-bg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+@media (prefers-color-scheme: dark) {
+  .comparison-table-wrap {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
 }
 .comparison-table {
   width: 100%;
@@ -3570,6 +3589,12 @@ p:last-child { margin-bottom: 0; }
   top: 0;
   z-index: 1;
 }
+@media (prefers-color-scheme: dark) {
+  .comparison-table thead th {
+    background: var(--color-bg-alt);
+    border-bottom-color: var(--color-border);
+  }
+}
 .comparison-table thead th:first-child {
   text-align: left;
   min-width: 220px;
@@ -3596,7 +3621,7 @@ p:last-child { margin-bottom: 0; }
   font-size: .82rem;
   text-transform: uppercase;
   letter-spacing: .08em;
-  color: #fff;
+  color: var(--color-bg);
   text-align: left !important;
   padding: .85rem 1.25rem;
   border-bottom-color: var(--color-primary) !important;
@@ -3604,6 +3629,12 @@ p:last-child { margin-bottom: 0; }
 .comparison-group-row td:first-child {
   border-left: 4px solid var(--color-accent);
 }
+@media (prefers-color-scheme: dark) {
+  .comparison-group-row td {
+    background: var(--color-primary-dk);
+    border-bottom-color: var(--color-primary-dk) !important;
+  }
+}
 .comparison-yes {
   color: var(--color-accent);
   font-size: 1.1rem;
@@ -3616,6 +3647,11 @@ p:last-child { margin-bottom: 0; }
 .comparison-table tbody tr:hover td {
   background: rgba(var(--color-primary-rgb), .03);
 }
+@media (prefers-color-scheme: dark) {
+  .comparison-table tbody tr:hover td {
+    background: rgba(var(--color-primary-rgb), .08);
+  }
+}
 @media (max-width: 640px) {
   .comparison-table-wrap { margin-inline: calc(var(--container-pad) * -1); border-radius: 0; border-left: none; border-right: none; }
 }