chore: update ads banner design

Author: meroxdotdev

_includes/update-list.html

@@ -33,59 +33,144 @@ <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}<
     </ul>
 
 
-<div class="sidepanel-cta">
-  <p class="cta-text">Promote your brand here! <a href="mailto:[email protected]" class="cta-link">Contact me</a></p>
+<div class="promo-strip">
+  <span class="promo-label">AD</span>
+  <span class="promo-text">Your brand here</span>
+  <a href="mailto:[email protected]" class="promo-action">
+    <span>Contact</span>
+    <svg class="promo-arrow" width="12" height="12" viewBox="0 0 16 16">
+      <path d="M6 3 L11 8 L6 13" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </a>
+  
   <style>
-    .sidepanel-cta {
-      font-family: 'Arial', sans-serif;
-      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;
-      text-align: center;
-      margin-bottom: 1rem;
-      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);
+    .promo-strip {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 0.875rem 0;
+      margin: 2rem 0;
+      border-top: 1px solid rgba(128, 128, 128, 0.12);
+      border-bottom: 1px solid rgba(128, 128, 128, 0.12);
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+      font-size: 0.75rem;
+      letter-spacing: 0.025em;
+      color: inherit;
+      opacity: 0.55;
+      transition: opacity 0.3s ease;
     }
 
-    /* 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);
+    /* Dark mode - comportament normal */
+    [data-theme="dark"] .promo-strip:hover,
+    .promo-strip:hover {
+      opacity: 0.85;
     }
 
-    .sidepanel-cta:hover {
-      transform: scale(1.02);
+    /* Light mode - deja "highlighted" */
+    [data-theme="light"] .promo-strip,
+    :root:not([data-theme]) .promo-strip {
+      opacity: 0.75;
     }
 
-    .cta-text {
-      margin: 0;
-      font-size: 0.95rem;
-      line-height: 1.4;
+    [data-theme="light"] .promo-strip:hover,
+    :root:not([data-theme]) .promo-strip:hover {
+      opacity: 0.9;
     }
 
-    .cta-link {
-      color: inherit;
+    .promo-label {
+      padding: 0.2rem 0.4rem;
+      background: transparent;
+      border: 1px solid;
+      border-radius: 3px;
       font-weight: 600;
-      text-decoration: underline;
-      transition: opacity 0.2s ease;
+      font-size: 0.625rem;
+      letter-spacing: 0.05em;
+      /* Culoare verde mint subtilă */
+      color: #52b788;
+      border-color: #52b788;
+      opacity: 0.7;
+    }
+
+    /* Light mode - label mai vizibil */
+    [data-theme="light"] .promo-label,
+    :root:not([data-theme]) .promo-label {
+      color: #40916c;
+      border-color: #40916c;
+      opacity: 0.8;
+    }
+
+    .promo-text {
+      flex: 1;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 0.7rem;
+      opacity: 0.9;
+    }
+
+    /* Light mode - text mai bold */
+    [data-theme="light"] .promo-text,
+    :root:not([data-theme]) .promo-text {
+      opacity: 1;
+      font-weight: 500;
+    }
+
+    .promo-action {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      color: inherit;
+      text-decoration: none;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 0.7rem;
+      transition: gap 0.2s ease;
+    }
+
+    .promo-action:hover {
+      gap: 0.5rem;
     }
 
-    .cta-link:hover {
+    .promo-arrow {
+      opacity: 0.4;
+      transition: transform 0.2s ease, opacity 0.2s ease;
+    }
+
+    /* Light mode - săgeată mai vizibilă */
+    [data-theme="light"] .promo-arrow,
+    :root:not([data-theme]) .promo-arrow {
+      opacity: 0.6;
+    }
+
+    .promo-action:hover .promo-arrow {
+      transform: translateX(2px);
       opacity: 0.7;
     }
 
+    [data-theme="light"] .promo-action:hover .promo-arrow,
+    :root:not([data-theme]) .promo-action:hover .promo-arrow {
+      opacity: 0.9;
+    }
+
     @media (max-width: 768px) {
-      .sidepanel-cta {
-        padding: 0.8rem;
+      .promo-strip {
+        font-size: 0.65rem;
+        gap: 0.75rem;
+        padding: 0.75rem 0;
+      }
+      
+      .promo-label {
+        font-size: 0.55rem;
+        padding: 0.15rem 0.35rem;
+      }
+      
+      .promo-text,
+      .promo-action {
+        font-size: 0.625rem;
       }
-      .cta-text {
-        font-size: 0.9rem;
+      
+      .promo-arrow {
+        width: 10px;
+        height: 10px;
       }
     }
   </style>