Update style.css

style.css

@@ -1,33 +1,40 @@
 /* =========================================================
    CS1 GROUP 14 — JOB RISK ANALYZER
-   Dark dashboard — works against HF's forced light page bg
+   Dark + colorful (cyan/violet/emerald/amber accents)
    ========================================================= */
 
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
 
 :root {
-  --bg:           #0a0a0a;
-  --bg-1:         #111111;
-  --bg-2:         #161616;
-  --bg-3:         #1c1c1c;
-  --surface:      #131313;
-  --surface-elev: #181818;
-  --border:       #2a2a2a;
-  --border-soft:  #1f1f1f;
-  --border-hi:    #383838;
-
-  --ink:        #ededed;
-  --ink-soft:   #a1a1a1;
-  --ink-mute:   #666666;
-
-  --accent:        #34d399;
-  --accent-glow:   rgba(52, 211, 153, 0.18);
-  --accent-soft:   rgba(52, 211, 153, 0.08);
-
-  --warn:       #f59e0b;
-  --danger:     #ef4444;
-  --info:       #60a5fa;
-  --purple:     #a78bfa;
+  /* Base — deep navy instead of pure black */
+  --bg:           #0c1220;
+  --bg-1:         #131a2c;
+  --bg-2:         #1a2238;
+  --bg-3:         #232b44;
+  --surface:      #161d31;
+  --surface-elev: #1d253c;
+  --border:       #2a3553;
+  --border-soft:  #1f2841;
+  --border-hi:    #3a4670;
+
+  /* Text */
+  --ink:        #f1f5fc;
+  --ink-soft:   #b4bdd4;
+  --ink-mute:   #6f7a98;
+
+  /* Accent palette — multiple colors that play together */
+  --cyan:       #22d3ee;
+  --cyan-glow:  rgba(34, 211, 238, 0.18);
+  --violet:     #a78bfa;
+  --violet-glow:rgba(167, 139, 250, 0.18);
+  --emerald:    #34d399;
+  --emerald-glow:rgba(52, 211, 153, 0.18);
+  --amber:      #fbbf24;
+  --amber-glow: rgba(251, 191, 36, 0.18);
+  --pink:       #f472b6;
+  --pink-glow:  rgba(244, 114, 182, 0.18);
+  --red:        #f87171;
+  --red-glow:   rgba(248, 113, 113, 0.18);
 
   --radius:    8px;
   --radius-lg: 12px;
@@ -37,31 +44,25 @@
 }
 
 /* =========================================================
-   FORCE DARK BACKGROUND ON THE WHOLE PAGE
-   This is the key fix — HF was leaving the body white
+   PAGE BACKGROUND — deep navy with colored glows
    ========================================================= */
 
 html, body,
-gradio-app,
-.gradio-app,
-.main,
-#app,
+gradio-app, .gradio-app,
+.main, #app,
 [data-testid="app"],
 .gradio-container,
-.contain,
-main {
+.contain, main {
   background: var(--bg) !important;
   background-color: var(--bg) !important;
   color: var(--ink) !important;
 }
 
-/* Glow effects on top + bottom */
-gradio-app,
-.gradio-app,
-[data-testid="app"] {
+gradio-app, .gradio-app, [data-testid="app"] {
   background-image:
-    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.10), transparent 60%),
-    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(96, 165, 250, 0.08), transparent 60%) !important;
+    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(167, 139, 250, 0.18), transparent 60%),
+    radial-gradient(ellipse 50% 35% at 85% 10%, rgba(34, 211, 238, 0.14), transparent 60%),
+    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(52, 211, 153, 0.10), transparent 60%) !important;
   background-attachment: fixed !important;
   background-repeat: no-repeat !important;
   min-height: 100vh !important;
@@ -83,15 +84,15 @@ body::before {
   position: fixed;
   inset: 0;
   background-image:
-    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
-  background-size: 64px 64px;
+    linear-gradient(to right, rgba(167, 139, 250, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(167, 139, 250, 0.04) 1px, transparent 1px);
+  background-size: 56px 56px;
   pointer-events: none;
   z-index: 0;
 }
 
 .gradio-container {
-  max-width: 1200px !important;
+  max-width: 1240px !important;
   width: 92vw !important;
   margin: 0 auto !important;
   padding-top: 56px !important;
@@ -101,13 +102,13 @@ body::before {
 }
 
 /* =========================================================
-   HEADER
+   HEADER — gradient title
    ========================================================= */
 
 #escp_title {
   text-align: left !important;
-  margin-bottom: 56px !important;
-  padding-bottom: 32px !important;
+  margin-bottom: 40px !important;
+  padding-bottom: 28px !important;
   border-bottom: 1px solid var(--border) !important;
   position: relative !important;
 }
@@ -117,23 +118,25 @@ body::before {
   display: block !important;
   font-family: var(--font-mono) !important;
   font-size: 11px !important;
-  color: var(--accent) !important;
+  color: var(--cyan) !important;
   letter-spacing: 0.05em !important;
   margin-bottom: 16px !important;
   text-transform: uppercase !important;
 }
 
 #escp_title h1 {
-  color: var(--ink) !important;
   font-family: var(--font-display) !important;
   font-size: 2.5rem !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
   letter-spacing: -0.035em !important;
   text-align: left !important;
   margin: 0 0 12px 0 !important;
-  background: none !important;
-  -webkit-text-fill-color: var(--ink) !important;
   line-height: 1.1 !important;
+  background: linear-gradient(135deg, #f1f5fc 0%, #a78bfa 50%, #22d3ee 100%) !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  color: transparent !important;
 }
 
 #escp_title p, #escp_title em {
@@ -145,7 +148,7 @@ body::before {
   margin: 0 !important;
 }
 
-/* Pulsing status dot (top-right of header) */
+/* Pulsing emerald dot top-right */
 #escp_title::after {
   content: '' !important;
   position: absolute !important;
@@ -154,8 +157,8 @@ body::before {
   width: 8px !important;
   height: 8px !important;
   border-radius: 50% !important;
-  background: var(--accent) !important;
-  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 12px var(--accent) !important;
+  background: var(--emerald) !important;
+  box-shadow: 0 0 0 4px var(--emerald-glow), 0 0 12px var(--emerald) !important;
   animation: pulse-dot 2s ease-in-out infinite !important;
 }
 
@@ -165,7 +168,7 @@ body::before {
 }
 
 /* =========================================================
-   TABS — segmented control
+   TABS — fix visibility (this is what broke before)
    ========================================================= */
 
 .tabs > .tab-nav,
@@ -176,18 +179,23 @@ div[role="tablist"],
   border: 1px solid var(--border) !important;
   border-radius: 10px !important;
   padding: 4px !important;
-  margin-bottom: 32px !important;
-  display: inline-flex !important;
+  margin-bottom: 24px !important;
+  display: flex !important;
+  flex-wrap: wrap !important;
   gap: 2px !important;
-  width: auto !important;
-  max-width: fit-content !important;
+  width: fit-content !important;
+  max-width: 100% !important;
 }
 
+/* CRITICAL: ensure ALL tab buttons are visible (this is what broke) */
 .tabs > .tab-nav button,
 .tab-nav button,
 div[role="tablist"] button,
 button[role="tab"],
 .svelte-tabs button {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
   color: var(--ink-soft) !important;
   font-family: var(--font-display) !important;
   font-weight: 500 !important;
@@ -198,8 +206,8 @@ button[role="tab"],
   border-radius: 6px !important;
   border-bottom: none !important;
   transition: color 0.15s, background 0.15s !important;
-  opacity: 1 !important;
   letter-spacing: -0.005em !important;
+  white-space: nowrap !important;
 }
 
 .tabs > .tab-nav button:hover,
@@ -214,10 +222,10 @@ button[role="tab"]:hover {
 button[role="tab"][aria-selected="true"],
 button[role="tab"].selected,
 .svelte-tabs button.selected {
-  color: var(--accent) !important;
-  background: var(--surface-elev) !important;
-  box-shadow: 0 0 0 1px var(--border-hi), 0 0 12px var(--accent-glow) !important;
-  font-weight: 500 !important;
+  color: var(--ink) !important;
+  background: linear-gradient(135deg, var(--violet-glow), var(--cyan-glow)) !important;
+  box-shadow: 0 0 0 1px var(--violet), inset 0 1px 0 rgba(255,255,255,0.1) !important;
+  font-weight: 600 !important;
   border-bottom: none !important;
 }
 
@@ -250,17 +258,17 @@ button[role="tab"].selected,
   background: var(--surface) !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--radius-lg) !important;
-  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 12px rgba(0,0,0,0.25) !important;
 }
 
 /* =========================================================
-   LABELS
+   LABELS — colorful uppercase mono
    ========================================================= */
 
 .gradio-container label,
 .gradio-container .gr-label,
 .gradio-container span[data-testid="block-info"] {
-  color: var(--ink-soft) !important;
+  color: var(--cyan) !important;
   font-family: var(--font-mono) !important;
   font-weight: 500 !important;
   font-size: 0.7rem !important;
@@ -269,7 +277,7 @@ button[role="tab"].selected,
 }
 
 /* =========================================================
-   INPUTS — make text VISIBLE
+   INPUTS
    ========================================================= */
 
 .gradio-container input,
@@ -282,7 +290,7 @@ button[role="tab"].selected,
   font-family: var(--font-display) !important;
   font-size: 0.9rem !important;
   padding: 10px 14px !important;
-  caret-color: var(--accent) !important;
+  caret-color: var(--cyan) !important;
 }
 
 .gradio-container input:hover,
@@ -294,9 +302,9 @@ button[role="tab"].selected,
 .gradio-container input:focus,
 .gradio-container textarea:focus,
 .gradio-container select:focus {
-  border-color: var(--accent) !important;
+  border-color: var(--violet) !important;
   background: var(--bg-1) !important;
-  box-shadow: 0 0 0 3px var(--accent-glow) !important;
+  box-shadow: 0 0 0 3px var(--violet-glow) !important;
   outline: none !important;
 }
 
@@ -306,19 +314,18 @@ button[role="tab"].selected,
 }
 
 textarea {
-  font-family: var(--font-display) !important;
   font-size: 0.9rem !important;
   line-height: 1.6 !important;
 }
 
 /* =========================================================
-   BUTTONS
+   BUTTONS — vibrant gradient primary
    ========================================================= */
 
 .gradio-container button:not([role="tab"]) {
   font-family: var(--font-display) !important;
   font-weight: 500 !important;
-  padding: 10px 18px !important;
+  padding: 11px 20px !important;
   border-radius: var(--radius) !important;
   font-size: 0.9rem !important;
   letter-spacing: -0.005em !important;
@@ -326,18 +333,17 @@ textarea {
 }
 
 button.primary {
-  background: var(--accent) !important;
-  color: #062b1f !important;
-  border: 1px solid var(--accent) !important;
-  box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow) !important;
+  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%) !important;
+  color: #0a0e1c !important;
+  border: none !important;
+  box-shadow: 0 0 16px var(--violet-glow), 0 0 24px var(--cyan-glow) !important;
   font-weight: 600 !important;
 }
 
 button.primary:hover {
-  background: #5fe5b0 !important;
-  border-color: #5fe5b0 !important;
+  background: linear-gradient(135deg, #b89df9 0%, #4ee2f7 100%) !important;
   transform: translateY(-1px) !important;
-  box-shadow: 0 0 0 1px #5fe5b0, 0 0 24px var(--accent-glow) !important;
+  box-shadow: 0 0 24px var(--violet-glow), 0 0 32px var(--cyan-glow) !important;
 }
 
 button.secondary {
@@ -348,37 +354,35 @@ button.secondary {
 
 button.secondary:hover {
   background: var(--bg-3) !important;
-  border-color: var(--border-hi) !important;
+  border-color: var(--violet) !important;
+  color: var(--violet) !important;
 }
 
 /* =========================================================
    MARKDOWN
    ========================================================= */
 
-.tabitem h1, .tabitem h2 {
+.tabitem h1, .tabitem h2,
+.gradio-container h1, .gradio-container h2 {
   color: var(--ink) !important;
   font-weight: 600 !important;
   letter-spacing: -0.025em !important;
 }
 
-.tabitem h2 {
-  font-size: 1.5rem !important;
-  margin-top: 0 !important;
-}
+.tabitem h2 { font-size: 1.5rem !important; margin-top: 0 !important; }
 
-.tabitem h3 {
+.tabitem h3, .gradio-container h3 {
   color: var(--ink) !important;
   font-weight: 500 !important;
   font-size: 0.95rem !important;
-  letter-spacing: -0.005em !important;
   margin-top: 28px !important;
   margin-bottom: 12px !important;
   padding-bottom: 8px !important;
   border-bottom: 1px solid var(--border) !important;
 }
 
-.tabitem h4 {
-  color: var(--accent) !important;
+.tabitem h4, .gradio-container h4 {
+  color: var(--cyan) !important;
   font-family: var(--font-mono) !important;
   font-weight: 500 !important;
   font-size: 0.7rem !important;
@@ -402,7 +406,7 @@ button.secondary:hover {
 
 .tabitem code, .gradio-container code {
   background: var(--bg-2) !important;
-  color: var(--accent) !important;
+  color: var(--amber) !important;
   padding: 2px 6px !important;
   border-radius: 4px !important;
   font-size: 0.85em !important;
@@ -430,7 +434,7 @@ table {
 
 table thead th {
   background: var(--bg-1) !important;
-  color: var(--accent) !important;
+  color: var(--violet) !important;
   font-family: var(--font-mono) !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
@@ -444,7 +448,7 @@ table tbody td {
   border-bottom: 1px solid var(--border-soft) !important;
   color: var(--ink-soft) !important;
   padding: 11px 14px !important;
-  background: var(--surface) !important;
+  background: transparent !important;
 }
 
 table tbody tr:hover td {
@@ -474,18 +478,16 @@ table tbody tr:hover td {
 
 .gr-chatbot .message.user,
 .chatbot .message.user {
-  background: var(--bg-2) !important;
-  color: var(--ink) !important;
+  background: linear-gradient(135deg, var(--violet-glow), transparent) !important;
   border-radius: 12px 12px 4px 12px !important;
-  border-color: var(--border) !important;
+  border-color: var(--violet) !important;
 }
 
 .gr-chatbot .message.bot,
 .chatbot .message.bot {
   background: var(--surface-elev) !important;
-  color: var(--ink) !important;
   border-radius: 12px 12px 12px 4px !important;
-  border-left: 2px solid var(--accent) !important;
+  border-left: 2px solid var(--cyan) !important;
 }
 
 /* =========================================================
@@ -506,9 +508,9 @@ table tbody tr:hover td {
 }
 
 .examples-row button:hover {
-  background: var(--accent-soft) !important;
-  color: var(--accent) !important;
-  border-color: var(--accent) !important;
+  background: var(--violet-glow) !important;
+  color: var(--violet) !important;
+  border-color: var(--violet) !important;
 }
 
 /* =========================================================
@@ -529,7 +531,7 @@ table tbody tr:hover td {
 }
 
 /* =========================================================
-   NUMBER INPUT (the big score)
+   SCORE NUMBER (big metric)
    ========================================================= */
 
 [data-testid="number-input"] input,
@@ -537,14 +539,14 @@ table tbody tr:hover td {
   font-family: var(--font-mono) !important;
   font-size: 1.75rem !important;
   font-weight: 600 !important;
-  color: var(--accent) !important;
+  color: var(--cyan) !important;
   background: var(--bg-1) !important;
   letter-spacing: -0.02em !important;
   text-align: center !important;
 }
 
 /* =========================================================
-   FOOTER / GRADIO CHROME
+   GRADIO CHROME
    ========================================================= */
 
 footer, footer *,
@@ -556,16 +558,11 @@ header, header * {
   font-size: 0.75rem !important;
 }
 
-footer a {
-  color: var(--ink-mute) !important;
-}
-
-footer a:hover {
-  color: var(--accent) !important;
-}
+footer a { color: var(--ink-mute) !important; }
+footer a:hover { color: var(--cyan) !important; }
 
 /* =========================================================
-   CATCH-ALL: force readable text everywhere
+   FORCE READABLE TEXT EVERYWHERE
    ========================================================= */
 
 .gradio-container,
@@ -579,9 +576,7 @@ footer a:hover {
   color: var(--ink) !important;
 }
 
-.gradio-container .prose * {
-  color: inherit !important;
-}
+.gradio-container .prose * { color: inherit !important; }
 
 /* =========================================================
    SCROLLBARS
@@ -591,13 +586,12 @@ footer a:hover {
   scrollbar-width: thin;
   scrollbar-color: var(--border-hi) transparent;
 }
-
 *::-webkit-scrollbar { width: 8px; height: 8px; }
 *::-webkit-scrollbar-track { background: transparent; }
 *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-*::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
+*::-webkit-scrollbar-thumb:hover { background: var(--violet); }
 
 ::selection {
-  background: var(--accent-glow);
+  background: var(--violet-glow);
   color: var(--ink);
 }