Update app.py

app.py

@@ -78,18 +78,30 @@ def open_side():  # tiny helper
 CUSTOM_CSS = """
 .sticky-cta {
   position: sticky; top: 0; z-index: 1000;
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 10px;
   background: #a5b4fc;
   color: #0f172a;
   padding: 10px 14px;
-  text-align: center;
   border-bottom: 1px solid #333;
-  display: block;                 /* full-width clickable */
-  text-decoration: none;          /* remove underline */
-  cursor: pointer;
 }
-.sticky-cta:hover { filter: brightness(0.97); }
-.sticky-cta .pill { background:#4f46e5; color:#fff; padding:4px 10px; border-radius:999px; margin-left:10px; }
-.sticky-cta .cta-link { font-weight:600; text-decoration: underline; }
+.sticky-cta a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
+.sticky-cta a:hover { filter: brightness(0.97); }
+
+.sticky-cta .pill {
+  background:#4f46e5; color:#fff; padding:4px 10px; border-radius:999px; margin-left:10px;
+}
+.api-cta {
+  background:#0ea5e9; color:#fff; padding:6px 12px; border-radius:999px;
+  font-weight:700; border:1px solid rgba(255,255,255,0.25);
+}
+.api-cta:hover { filter: brightness(1.05); }
+
+/* (optional) tighten on small screens */
+@media (max-width: 520px) {
+  .sticky-cta { padding: 8px 12px; }
+  .sticky-cta .pill { display:none; }
+}
 
 
 
@@ -126,14 +138,25 @@ CUSTOM_CSS = """
 with gr.Blocks(title="Video Face Swap", theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
     # Sticky banner
     gr.HTML(
-        f"""<a class="sticky-cta" href="https://www.face-swap.co/?utm_source=hfspace_videofaceswap&utm_medium=banner" target="_blank" rel="noopener"
-              aria-label="Upgrade to Pro on face-swap.co">
-              ⚡ <strong>Upgrade to HD</strong> — priority queue & no duration limit!
-              <span class="pill">GPU</span>
-            </a>"""
+        f"""
+        <div class="sticky-cta" aria-label="Site actions">
+          <a href="https://www.face-swap.co/?utm_source=hfspace_videofaceswap&utm_medium=banner"
+             target="_blank" rel="noopener" aria-label="Upgrade to Pro on face-swap.co">
+            ⚡ <strong>Upgrade to HD</strong> — priority queue & no duration limit!
+            <span class="pill">GPU</span>
+          </a>
+    
+          <a class="api-cta"
+             href="https://www.face-swap.co/api?utm_source=hfspace_videofaceswap&utm_medium=sticky_api"
+             target="_blank" rel="noopener" aria-label="Face Swap API">
+            API
+          </a>
+        </div>
+        """
     )
 
 
+
     gr.Markdown(
         f"""
         ### Video Face Swap (Preview)