app fix

app.py

@@ -122,22 +122,22 @@ CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
 
 :root {
-    --violet: #8b7cf6;
-    --coral: #fb7185;
-    --mint: #34d399;
-    --bg-0: #0a0b13;
-    --card: rgba(255,255,255,0.035);
-    --card-border: rgba(255,255,255,0.09);
-    --text-dim: #9ba0b4;
-    --text-faint: #676d80;
+    --blue: #2563eb;
+    --blue-deep: #0ea5e9;
+    --cyan: #06b6d4;
+    --bg-0: #f7fafc;
+    --card: #ffffff;
+    --card-border: #e2e8f0;
+    --text-heading: #0f172a;
+    --text-dim: #475569;
+    --text-faint: #94a3b8;
 }
 
 .gradio-container {
     background:
-        radial-gradient(ellipse 900px 520px at 50% -8%, rgba(139,124,246,0.16) 0%, transparent 62%),
-        radial-gradient(ellipse 700px 600px at 100% 20%, rgba(251,113,133,0.10) 0%, transparent 55%),
-        radial-gradient(ellipse 700px 600px at 0% 30%, rgba(52,211,153,0.07) 0%, transparent 55%),
-        radial-gradient(ellipse 1400px 900px at 50% 0%, #14172a 0%, var(--bg-0) 60%) !important;
+        radial-gradient(ellipse 900px 520px at 50% -8%, rgba(37,99,235,0.07) 0%, transparent 62%),
+        radial-gradient(ellipse 700px 600px at 100% 20%, rgba(6,182,212,0.06) 0%, transparent 55%),
+        radial-gradient(ellipse 1400px 900px at 50% 0%, #eef4ff 0%, var(--bg-0) 55%) !important;
     background-attachment: fixed !important;
     font-family: 'Inter', sans-serif !important;
     position: relative;
@@ -146,15 +146,15 @@ CUSTOM_CSS = """
     content: "";
     position: fixed; inset: 0; pointer-events: none; z-index: 0;
     background-image:
-        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+        linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
     background-size: 48px 48px;
     mask-image: radial-gradient(ellipse 1000px 600px at 50% 0%, black 0%, transparent 70%);
 }
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: var(--bg-0); }
-::-webkit-scrollbar-thumb { background: #2a2d40; border-radius: 8px; }
-::-webkit-scrollbar-thumb:hover { background: var(--violet); }
+::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
+::-webkit-scrollbar-thumb:hover { background: var(--blue); }
 
 @keyframes revealUp {
     from { opacity: 0; transform: translateY(22px); }
@@ -185,22 +185,21 @@ CUSTOM_CSS = """
     letter-spacing: -0.025em !important;
     line-height: 1.05 !important;
     margin-bottom: 6px !important;
-    background: linear-gradient(135deg, #ffffff 0%, #cfd0f0 50%, #f3c9d2 100%);
+    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 60%, #06b6d4 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    filter: drop-shadow(0 2px 28px rgba(139,124,246,0.18));
 }
 #hero-headline {
     display: inline-block;
-    color: #d9d3ff !important;
+    color: #1d4ed8 !important;
     font-family: 'Space Grotesk', sans-serif !important;
     font-weight: 600 !important;
     font-size: 18px !important;
     margin-top: 10px !important;
     padding: 6px 18px !important;
-    background: linear-gradient(90deg, rgba(139,124,246,0.14), rgba(251,113,133,0.14));
-    border: 1px solid rgba(139,124,246,0.35);
+    background: linear-gradient(90deg, rgba(37,99,235,0.08), rgba(6,182,212,0.08));
+    border: 1px solid rgba(37,99,235,0.25);
     border-radius: 999px;
 }
 .status-badge {
@@ -210,14 +209,14 @@ CUSTOM_CSS = """
 }
 .dot {
     width: 8px; height: 8px; border-radius: 50%;
-    background: var(--violet);
-    box-shadow: 0 0 12px 2px rgba(139,124,246,0.75);
+    background: var(--blue);
+    box-shadow: 0 0 10px 2px rgba(37,99,235,0.55);
     display: inline-block; animation: pulse 2.2s infinite;
 }
 @keyframes pulse {
-    0% { box-shadow: 0 0 0 0 rgba(139,124,246,.55), 0 0 12px 2px rgba(139,124,246,0.75); }
-    70% { box-shadow: 0 0 0 9px rgba(139,124,246,0), 0 0 12px 2px rgba(139,124,246,0.75); }
-    100% { box-shadow: 0 0 0 0 rgba(139,124,246,0), 0 0 12px 2px rgba(139,124,246,0.75); }
+    0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45), 0 0 10px 2px rgba(37,99,235,0.55); }
+    70% { box-shadow: 0 0 0 9px rgba(37,99,235,0), 0 0 10px 2px rgba(37,99,235,0.55); }
+    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0), 0 0 10px 2px rgba(37,99,235,0.55); }
 }
 #hero-contact {
     display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center;
@@ -229,13 +228,13 @@ CUSTOM_CSS = """
     transition: all .18s ease;
 }
 #hero-contact a:hover {
-    color: #0a0b13 !important;
-    background: linear-gradient(90deg, var(--violet), var(--coral));
+    color: #ffffff !important;
+    background: linear-gradient(90deg, var(--blue), var(--cyan));
     border-color: transparent;
 }
 
 .section-label {
-    font-family: 'JetBrains Mono', monospace !important; color: var(--violet) !important;
+    font-family: 'JetBrains Mono', monospace !important; color: var(--blue) !important;
     letter-spacing: 0.12em !important; text-transform: uppercase; font-size: 12.5px !important;
     font-weight: 600 !important;
 }
@@ -244,8 +243,7 @@ CUSTOM_CSS = """
     background: var(--card) !important;
     border: 1px solid var(--card-border) !important;
     border-radius: 18px !important;
-    backdrop-filter: blur(18px);
-    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
+    box-shadow: 0 20px 50px -24px rgba(15,23,42,0.18), 0 4px 12px -6px rgba(15,23,42,0.06) !important;
     padding: 22px !important;
     position: relative;
     z-index: 1;
@@ -262,14 +260,14 @@ CUSTOM_CSS = """
 }
 .gradio-container button:hover { transform: translateY(-2px); }
 button.primary, button[class*="primary"] {
-    background: linear-gradient(135deg, var(--violet) 0%, var(--coral) 100%) !important;
+    background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%) !important;
     border: none !important;
-    box-shadow: 0 8px 24px -8px rgba(139,124,246,0.55) !important;
-    color: #0a0b13 !important;
+    box-shadow: 0 8px 20px -8px rgba(37,99,235,0.45) !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
 }
 button.primary:hover, button[class*="primary"]:hover {
-    box-shadow: 0 12px 32px -8px rgba(251,113,133,0.6) !important;
+    box-shadow: 0 12px 28px -8px rgba(6,182,212,0.5) !important;
 }
 
 .tabs > .tab-nav {
@@ -281,6 +279,7 @@ button.primary:hover, button[class*="primary"]:hover {
     display: inline-flex !important;
     gap: 2px !important;
     margin-bottom: 18px;
+    box-shadow: 0 2px 8px -4px rgba(15,23,42,0.08);
 }
 .tabs > .tab-nav button {
     font-family: 'JetBrains Mono', monospace !important;
@@ -293,10 +292,10 @@ button.primary:hover, button[class*="primary"]:hover {
     margin: 0 !important;
 }
 .tabs > .tab-nav button.selected {
-    background: linear-gradient(135deg, var(--violet) 0%, var(--coral) 100%) !important;
-    color: #0a0b13 !important;
+    background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%) !important;
+    color: #ffffff !important;
     font-weight: 700 !important;
-    box-shadow: 0 6px 18px -6px rgba(139,124,246,0.6);
+    box-shadow: 0 6px 16px -6px rgba(37,99,235,0.5);
 }
 
 .proj-card {
@@ -304,12 +303,13 @@ button.primary:hover, button[class*="primary"]:hover {
     border: 1px solid var(--card-border) !important;
     border-radius: 14px !important;
     padding: 18px !important;
+    box-shadow: 0 2px 8px -4px rgba(15,23,42,0.06);
     transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
 }
 .proj-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(139,124,246,0.45) !important;
-    box-shadow: 0 16px 40px -16px rgba(139,124,246,0.3) !important;
+    border-color: rgba(37,99,235,0.35) !important;
+    box-shadow: 0 16px 36px -18px rgba(37,99,235,0.28) !important;
 }
 
 .gr-accordion, [class*="accordion"] {
@@ -320,7 +320,7 @@ button.primary:hover, button[class*="primary"]:hover {
     border-radius: 14px !important;
     overflow: hidden !important;
     border: 1px solid var(--card-border) !important;
-    box-shadow: 0 12px 32px -18px rgba(0,0,0,0.6);
+    box-shadow: 0 12px 28px -20px rgba(15,23,42,0.2);
 }
 .cv-table table { font-size: 13.5px !important; }
 .cv-table thead th {
@@ -328,11 +328,11 @@ button.primary:hover, button[class*="primary"]:hover {
     text-transform: uppercase !important;
     font-size: 10.5px !important;
     letter-spacing: 0.08em !important;
-    color: var(--mint) !important;
-    background: rgba(52,211,153,0.06) !important;
+    color: var(--blue) !important;
+    background: rgba(37,99,235,0.06) !important;
 }
-.cv-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; }
-.cv-table tbody tr:hover { background: rgba(139,124,246,0.06) !important; }
+.cv-table tbody tr:nth-child(even) { background: rgba(15,23,42,0.015) !important; }
+.cv-table tbody tr:hover { background: rgba(37,99,235,0.05) !important; }
 """
 
 with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
@@ -343,9 +343,9 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
         <div class="status-badge"><span class="dot"></span> resume · live · self-querying</div>
         <div id="hero-name">Angkit Sarma</div>
         <div><span id="hero-headline">AI/ML Engineer — Agentic Systems &amp; LLM Applications</span></div>
-        <p id="hero-bio" style="color:#9ba0b4; max-width:680px; margin-top:16px; line-height:1.6;">
+        <p id="hero-bio" style="color:#475569; max-width:680px; margin-top:16px; line-height:1.6;">
         4+ years building and shipping ML and generative AI systems — from a 50%-faster semantic
-        search pipeline to <b style="color:#eef0f4">INFERA</b>, an agentic AI tool that won 1st place
+        search pipeline to <b style="color:#0f172a">INFERA</b>, an agentic AI tool that won 1st place
         at the Flexday AI Hackathon. Ask the panel below anything about my experience — it's a live
         TF-IDF retrieval engine running over this résumé's own content.
         </p>
@@ -437,7 +437,7 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
                     gr.Markdown("**Predictive Allocation** — ML Deployment Pipeline\n\n*Python · Azure SQL · Azure Blob · DevOps*\n\nRe-engineered end-to-end training/deployment pipeline; hardened security with Snyk and Wiz.")
             gr.HTML(
                 '<p style="font-family:\'JetBrains Mono\',monospace; font-size:13px; margin-top:14px;">'
-                '<a href="https://github.com/angkit-hash" target="_blank" style="color:#34d399; text-decoration:none; border-bottom:1px solid #34d399;">'
+                '<a href="https://github.com/angkit-hash" target="_blank" style="color:#0ea5e9; text-decoration:none; border-bottom:1px solid #0ea5e9;">'
                 '→ View source &amp; more projects on GitHub</a></p>'
             )
 
@@ -466,4 +466,4 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
             )
 
 if __name__ == "__main__":
-    demo.launch(css=CUSTOM_CSS, theme=gr.themes.Base(primary_hue="purple", neutral_hue="slate"))
+    demo.launch(css=CUSTOM_CSS, theme=gr.themes.Base(primary_hue="blue", neutral_hue="slate"))