Update app.py

app.py

@@ -78,30 +78,29 @@ 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 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
-.sticky-cta a:hover { filter: brightness(0.97); }
+.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 .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; }
+/* hero API chip */
+.api-cta-hero {
+  display:inline-flex; align-items:center; justify-content:center;
+  gap:8px; padding:8px 14px; border-radius:999px;
+  background:#0ea5e9; color:#fff; font-weight:700; border:1px solid rgba(255,255,255,0.25);
+  box-shadow: 0 4px 14px rgba(14,165,233,0.25);
 }
+.api-cta-hero:hover { filter: brightness(1.05); }
+.api-cta-wrap { text-align:center; margin-top:8px; }
 
 
 
@@ -138,25 +137,14 @@ CUSTOM_CSS = """
 with gr.Blocks(title="Video Face Swap", theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo:
     # Sticky banner
     gr.HTML(
-        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>
-        """
+        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>"""
     )
 
 
-
     gr.Markdown(
         f"""
         ### Video Face Swap (Preview)
@@ -168,6 +156,18 @@ with gr.Blocks(title="Video Face Swap", theme=gr.themes.Soft(), css=CUSTOM_CSS)
         elem_id="hero-md"
     )
 
+    gr.HTML(
+        """
+        <div class="api-cta-wrap">
+          <a class="api-cta-hero"
+             href="https://www.face-swap.co/api?utm_source=hfspace_videofaceswap&utm_medium=hero_api"
+             target="_blank" rel="noopener" aria-label="Face Swap API">
+             API
+          </a>
+        </div>
+        """
+    )
+
 
     with gr.Row():
         with gr.Column(scale=5):