chore: make contact ads more view friendly

Author: meroxdotdev

_includes/update-list.html

@@ -38,32 +38,48 @@ <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}<
   <style>
     .sidepanel-cta {
       font-family: 'Arial', sans-serif;
-      background: linear-gradient(135deg, #007bff, #0056b3);
-      color: #fff;
+      background: var(--card-bg);
+      backdrop-filter: blur(8px) saturate(160%);
+      -webkit-backdrop-filter: blur(8px) saturate(160%);
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.15);
       padding: 1rem;
-      border-radius: 6px;
       text-align: center;
       margin-bottom: 1rem;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-      transition: transform 0.2s ease-in-out;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
+      color: var(--text-color);
     }
+
+    /* Dark mode: păstrăm look-ul siteului */
+    [data-theme="dark"] .sidepanel-cta {
+      background: var(--card-bg);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+      color: var(--text-color);
+    }
+
     .sidepanel-cta:hover {
       transform: scale(1.02);
     }
+
     .cta-text {
       margin: 0;
       font-size: 0.95rem;
       line-height: 1.4;
     }
+
     .cta-link {
-      color: #fff;
+      color: inherit;
       font-weight: 600;
       text-decoration: underline;
       transition: opacity 0.2s ease;
     }
+
     .cta-link:hover {
-      opacity: 0.8;
+      opacity: 0.7;
     }
+
     @media (max-width: 768px) {
       .sidepanel-cta {
         padding: 0.8rem;