Fix layout: restore banner CSS, use gr.Group for cards, improve footer contrast

app.py

@@ -78,114 +78,57 @@ footer { display: none !important; }
 .gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
 .main { padding: 0 !important; }
 
-/* ── TOP NAVBAR ── */
-.top-nav {
-    background: linear-gradient(135deg, #0a2540 0%, #0e4a6e 40%, #1a6b5a 100%);
-    background-size: cover;
-    padding: 18px 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+/* ── TOP NAVBAR BANNER ── */
+.top-nav-banner {
     position: relative;
+    width: 100%;
     overflow: hidden;
-    min-height: 90px;
-    border-bottom: 2px solid rgba(32, 201, 151, 0.3);
-}
-.top-nav::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2320c997' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-    opacity: 0.5;
-}
-.nav-left {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    z-index: 1;
-}
-.nav-logo-wrap {
-    background: rgba(32, 201, 151, 0.15);
-    border: 1px solid rgba(32, 201, 151, 0.3);
-    border-radius: 12px;
-    padding: 8px 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.nav-logo-wrap svg { width: 38px; height: 38px; }
-.nav-brand { display: flex; flex-direction: column; }
-.nav-brand-name {
-    font-size: 1.75rem;
-    font-weight: 800;
-    color: #20c997;
-    line-height: 1;
-    letter-spacing: -0.5px;
-    margin: 0;
+    border-bottom: 2px solid rgba(32, 201, 151, 0.4);
 }
-.nav-brand-name span { color: #ffffff; }
-.nav-brand-sub {
-    font-size: 0.78rem;
-    color: rgba(255,255,255,0.65);
-    margin: 3px 0 0;
-    font-weight: 400;
-    letter-spacing: 0.2px;
-}
-.nav-brand-tagline {
-    font-size: 0.72rem;
-    color: rgba(255,255,255,0.45);
-    margin: 1px 0 0;
-    font-style: italic;
+.top-nav-banner img {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    object-position: center 30%;
+    display: block;
 }
-.nav-center {
+.top-nav-links-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
     display: flex;
+    align-items: flex-start;
+    padding: 18px 36px 0;
     gap: 28px;
-    align-items: center;
-    z-index: 1;
+    z-index: 10;
 }
-.nav-center a {
-    color: rgba(255,255,255,0.80);
+.nav-link-item {
+    color: rgba(255,255,255,0.88);
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
     padding-bottom: 2px;
-    transition: color 0.2s;
     border-bottom: 2px solid transparent;
+    transition: color 0.2s, border-color 0.2s;
+    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
 }
-.nav-center a:hover { color: #fff; }
-.nav-center a.active {
-    color: #fff;
-    border-bottom-color: #20c997;
-    padding-bottom: 2px;
-}
-.nav-right {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    z-index: 1;
-}
-.nav-quote {
-    text-align: right;
-    color: rgba(255,255,255,0.65);
-    font-size: 0.78rem;
-    font-style: italic;
-    line-height: 1.5;
-}
-.nav-quote strong { color: rgba(255,255,255,0.85); font-style: normal; }
-.nav-cta {
+.nav-link-item:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
+.nav-link-item.active { color: #fff; border-bottom-color: #20c997; }
+.nav-cta-top {
     background: #20c997;
     color: #0a2540 !important;
-    padding: 10px 22px;
-    border-radius: 8px;
+    padding: 8px 20px;
+    border-radius: 7px;
     font-weight: 700;
-    font-size: 0.9rem;
+    font-size: 0.88rem;
     text-decoration: none;
     white-space: nowrap;
     transition: background 0.2s, transform 0.15s;
-    border: none;
-    display: inline-block;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
+    text-shadow: none;
 }
-.nav-cta:hover { background: #12b886; transform: translateY(-1px); }
+.nav-cta-top:hover { background: #12b886; transform: translateY(-1px); }
 
 /* ── BODY LAYOUT ── */
 .body-layout {
@@ -346,12 +289,12 @@ footer { display: none !important; }
 /* Model Panel */
 .model-panel {
     background: white;
-    border-radius: 16px;
-    border: 1px solid #e2e8f0;
-    padding: 20px;
+    border-radius: 16px !important;
+    border: 1px solid #e2e8f0 !important;
+    padding: 16px !important;
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 10px;
     box-shadow: 0 1px 8px rgba(0,0,0,0.04);
 }
 .model-label {
@@ -462,9 +405,9 @@ footer { display: none !important; }
 }
 
 .img-card {
-    background: white;
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
+    background: white !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 16px !important;
     overflow: hidden;
     box-shadow: 0 2px 12px rgba(0,0,0,0.05);
 }
@@ -559,13 +502,13 @@ footer { display: none !important; }
 .footer-brand { color: rgba(255,255,255,0.85); font-weight: 600; }
 .footer-links { display: flex; gap: 20px; align-items: center; }
 .footer-links a {
-    color: rgba(255,255,255,0.55);
+    color: rgba(255,255,255,0.75);
     text-decoration: none;
     transition: color 0.2s;
 }
 .footer-links a:hover { color: white; }
 .footer-socials { display: flex; gap: 14px; align-items: center; }
-.footer-socials a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
+.footer-socials a { color: rgba(255,255,255,0.75); transition: color 0.2s; }
 .footer-socials a:hover { color: white; }
 """
 
@@ -839,26 +782,27 @@ with gr.Blocks(css=CSS, title="SentiEnhance — AI Satellite Super-Resolution")
 
                 # Model + Enhance
                 with gr.Column(scale=3):
-                    gr.HTML("""
-                    <div class="model-panel">
-                      <div class="model-label">Model Selection</div>
-                    </div>
-                    """)
-                    model_selector = gr.Dropdown(
-                        choices=["HAT-SAT (Recommended)", "ESRGAN (Baseline)"],
-                        value="HAT-SAT (Recommended)",
-                        show_label=False,
-                        container=False
-                    )
-                    gr.HTML("""
-                    <div style="display:flex;align-items:center;gap:8px;margin:6px 0 2px;">
-                      <span style="font-size:0.78rem;color:#64748b;">Selected Model:</span>
-                      <span class="model-best-badge">Best Quality</span>
-                    </div>
-                    <div class="model-info">
-                      <strong>HAT-SAT:</strong> State-of-the-art model for satellite image super-resolution with high detail and spectral consistency.
-                    </div>
-                    """)
+                    with gr.Group(elem_classes="model-panel"):
+                        gr.HTML("""
+                          <div class="model-label">Model Selection</div>
+                        """)
+                        model_selector = gr.Dropdown(
+                            choices=["HAT-SAT (Recommended)", "ESRGAN (Baseline)"],
+                            value="HAT-SAT (Recommended)",
+                            show_label=False,
+                            container=False
+                        )
+                        gr.HTML("""
+                        <div style="display:flex;align-items:center;gap:8px;margin:6px 0 2px;">
+                          <span style="font-size:0.78rem;color:#64748b;">Selected Model:</span>
+                          <span class="model-best-badge">Best Quality</span>
+                        </div>
+                        <div class="model-info">
+                          <strong>HAT-SAT:</strong> State-of-the-art model for satellite image super-resolution with high detail and spectral consistency.
+                        </div>
+                        """)
+                    
+                    gr.HTML("<br>")
                     enhance_btn = gr.Button("✨ Enhance Image", elem_id="enhance-btn")
                     gr.HTML('<div class="processing-hint">Processing may take a few moments...</div>')
 
@@ -870,52 +814,55 @@ with gr.Blocks(css=CSS, title="SentiEnhance — AI Satellite Super-Resolution")
             gr.HTML('<div class="results-title">Results</div>')
 
             with gr.Row():
-                with gr.Column(scale=5, elem_classes="img-card"):
-                    gr.HTML("""
-                    <div class="img-card-header">
-                      <div class="img-card-label">
-                        <span class="img-label-dot original"></span>
-                        Original (Sentinel-2, 10m)
-                      </div>
-                    </div>
-                    """)
-                    original_image = gr.Image(
-                        label="",
-                        type="pil",
-                        interactive=False,
-                        show_label=False,
-                        elem_classes="result-img-wrap"
-                    )
+                with gr.Column(scale=5):
+                    with gr.Group(elem_classes="img-card"):
+                        gr.HTML("""
+                        <div class="img-card-header">
+                          <div class="img-card-label">
+                            <span class="img-label-dot original"></span>
+                            Original (Sentinel-2, 10m)
+                          </div>
+                        </div>
+                        """)
+                        original_image = gr.Image(
+                            label="",
+                            type="pil",
+                            interactive=False,
+                            show_label=False,
+                            elem_classes="result-img-wrap"
+                        )
 
-                with gr.Column(scale=5, elem_classes="img-card"):
-                    gr.HTML("""
-                    <div class="img-card-header">
-                      <div class="img-card-label">
-                        <span class="img-label-dot enhanced"></span>
-                        Enhanced (HAT-SAT, 4x)
-                      </div>
-                    </div>
-                    """)
-                    enhanced_image = gr.Image(
-                        label="",
-                        type="pil",
-                        interactive=False,
-                        show_label=False,
-                        elem_classes="result-img-wrap"
-                    )
+                with gr.Column(scale=5):
+                    with gr.Group(elem_classes="img-card"):
+                        gr.HTML("""
+                        <div class="img-card-header">
+                          <div class="img-card-label">
+                            <span class="img-label-dot enhanced"></span>
+                            Enhanced (HAT-SAT, 4x)
+                          </div>
+                        </div>
+                        """)
+                        enhanced_image = gr.Image(
+                            label="",
+                            type="pil",
+                            interactive=False,
+                            show_label=False,
+                            elem_classes="result-img-wrap"
+                        )
 
                 with gr.Column(scale=3):
-                    gr.HTML('<div class="dl-panel"><div class="dl-title">Download &amp; Share</div></div>')
-                    download_png = gr.DownloadButton(
-                        "📥 Download Enhanced Image",
-                        elem_id="dl-png-btn"
-                    )
-                    download_tiff = gr.DownloadButton(
-                        "📄 Download as GeoTIFF",
-                        elem_classes="btn-outline-custom"
-                    )
-                    compare_btn = gr.Button("🔍 Compare Images", elem_classes="btn-outline-custom")
-                    share_btn = gr.Button("🔗 Share Result", elem_classes="btn-outline-custom")
+                    with gr.Group(elem_classes="dl-panel"):
+                        gr.HTML('<div class="dl-title">Download &amp; Share</div>')
+                        download_png = gr.DownloadButton(
+                            "📥 Download Enhanced Image",
+                            elem_id="dl-png-btn"
+                        )
+                        download_tiff = gr.DownloadButton(
+                            "📄 Download as GeoTIFF",
+                            elem_classes="btn-outline-custom"
+                        )
+                        compare_btn = gr.Button("🔍 Compare Images", elem_classes="btn-outline-custom")
+                        share_btn = gr.Button("🔗 Share Result", elem_classes="btn-outline-custom")
 
     gr.HTML(FOOTER_HTML)