Update app.py

app.py

@@ -160,7 +160,10 @@ SHARED_CSS = """
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-html { scroll-behavior: smooth; }
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
 
 body {
   font-family: var(--sans);
@@ -169,6 +172,8 @@ body {
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   line-height: 1.6;
+  overflow-x: hidden;
+  width: 100%;
 }
 
 /* Grain */
@@ -186,17 +191,18 @@ body::after {
 /* ── TOPBAR ── */
 .topbar {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 18px 40px;
+  padding: 14px 16px;
   border-bottom: 1px solid var(--bd);
   position: sticky; top: 0; z-index: 100;
   background: rgba(14,16,24,.92);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
+  width: 100%; box-sizing: border-box;
 }
 
 .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
 
-.brand-logo { height: 52px; width: auto; object-fit: contain; }
+.brand-logo { height: 36px; width: auto; object-fit: contain; }
 
 .brand-sep { width: 1px; height: 20px; background: var(--bd-2); }
 
@@ -222,7 +228,7 @@ body::after {
 }
 
 /* ── SHELL ── */
-.shell { margin: 0 auto; padding: 0 32px 80px; }
+.shell { max-width: 1060px; margin: 0 auto; padding: 0 16px 80px; width: 100%; box-sizing: border-box; }
 
 /* ── HERO ── */
 .hero { padding: 56px 0 44px; text-align: center; position: relative; }
@@ -235,7 +241,7 @@ body::after {
 }
 
 .hero-logo-wrap { margin-bottom: 28px; }
-.hero-logo { height: 186px; width: auto; object-fit: contain; filter: drop-shadow(0 0 24px rgba(201,168,76,.15)); }
+.hero-logo { height: 90px; width: auto; object-fit: contain; filter: drop-shadow(0 0 24px rgba(201,168,76,.15)); }
 
 .hero-sub {
   font-size: .8rem;
@@ -296,8 +302,9 @@ body::after {
   background: var(--bg-1);
   border: 1px solid var(--bd-2);
   border-radius: 14px;
-  padding: 6px 6px 6px 20px;
+  padding: 6px 6px 6px 16px;
   transition: border-color .25s, box-shadow .25s;
+  width: 100%; box-sizing: border-box;
 }
 .search-row:focus-within {
   border-color: var(--gold-dim);
@@ -367,10 +374,11 @@ body::after {
 /* ── RESULT CARDS ── */
 .result-card {
   background: var(--bg-1); border: 1px solid var(--bd);
-  border-radius: 16px; padding: 26px 28px;
+  border-radius: 16px; padding: 22px 20px;
   margin-bottom: 12px; position: relative; overflow: hidden;
   transition: border-color .22s, box-shadow .22s, transform .15s;
   animation: riseUp .3s ease both;
+  width: 100%; box-sizing: border-box;
 }
 
 @keyframes riseUp {
@@ -378,14 +386,14 @@ body::after {
   to   { opacity: 1; transform: translateY(0); }
 }
 
-/* Circuit accent linha esquerda */
+/* Accent linha esquerda — neutro */
 .result-card::before {
   content: '';
-  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
+  background: rgba(255,255,255,.08);
   transition: opacity .2s;
 }
-.result-card.acordaos::before { background: linear-gradient(180deg, var(--blue), transparent); }
-.result-card.decisoes::before { background: linear-gradient(180deg, var(--purple), transparent); }
+.result-card:hover::before { background: var(--gold-dim); }
 
 /* Corner circuit decoration */
 .result-card::after {
@@ -419,9 +427,9 @@ body::after {
 /* Tipo tag */
 .tipo-tag {
   display: inline-flex; align-items: center; gap: 5px;
-  font-family: var(--mono); font-size: .60rem; letter-spacing: .07em;
-  padding: 3px 9px; border-radius: 20px; font-weight: 500;
-  flex-shrink: 0; margin-top: 2px;
+  font-family: var(--mono); font-size: .58rem; letter-spacing: .05em;
+  padding: 3px 8px; border-radius: 20px; font-weight: 500;
+  flex-shrink: 0; margin-top: 2px; white-space: nowrap;
 }
 .tipo-tag.acordaos { background: var(--blue-dim); color: #7ab4ff; border: 1px solid var(--blue-bd); }
 .tipo-tag.decisoes { background: var(--purple-dim); color: #b39dff; border: 1px solid var(--purple-bd); }
@@ -436,10 +444,11 @@ body::after {
   border-bottom: 1px solid var(--bd);
 }
 .meta-pill {
-  font-size: .73rem; color: var(--tx-2);
+  font-size: .70rem; color: var(--tx-2);
   background: var(--bg-2); border: 1px solid var(--bd);
-  border-radius: 20px; padding: 3px 11px;
-  display: flex; align-items: center; gap: 5px;
+  border-radius: 20px; padding: 3px 10px;
+  display: flex; align-items: center; gap: 4px;
+  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .meta-pill-icon { opacity: .55; font-size: .75rem; }
 
@@ -614,7 +623,11 @@ def index():
 <!-- TOPBAR -->
 <nav class="topbar">
   <a href="/" class="brand">
-    STJ | TJPR </span>
+    <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_light.png"
+         alt="PARA AI" class="brand-logo"
+         onerror="this.style.display='none'">
+    <div class="brand-sep"></div>
+    <span class="brand-label">Jurisprudência STF</span>
   </a>
   <div class="topbar-right">
     <span class="status-dot">online</span>
@@ -628,12 +641,13 @@ def index():
     <div class="hero-glow"></div>
 
     <div class="hero-logo-wrap">
-      <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo.png"
+      <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_light.png"
            alt="PARA AI" class="hero-logo"
            onerror="this.style.display='none'">
     </div>
 
-    <h1 class="hero-title">Busque acórdãos e decisões<br></h1>
+    <p class="hero-sub">Supremo Tribunal Federal · Pesquisa Jurisprudencial</p>
+    <h1 class="hero-title">Busque acórdãos e decisões<br><em>com precisão.</em></h1>
 
     <!-- SEARCH -->
     <div class="search-wrap">
@@ -717,7 +731,8 @@ def index():
 
   <!-- FOOTER -->
   <footer class="footer">
-     <span class="footer-note">para.AI - JURIMETRIA CAUSAL</span>
+    <span class="footer-brand">PARA<span>|AI</span></span>
+    <span class="footer-note">Dados: jurisprudencia.stf.jus.br · uso não-oficial</span>
   </footer>
 
 </div><!-- /shell -->