Update style.css

style.css

@@ -1,40 +1,39 @@
 /* =========================================================
    CS1 GROUP 14 — JOB RISK ANALYZER
-   Dark + colorful (cyan/violet/emerald/amber accents)
+   Warm cream + deep navy + coral accent — editorial light theme
    ========================================================= */
 
 @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 {
-  /* 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);
+  /* Cream base */
+  --bg:           #f7f3ec;
+  --bg-1:         #f1ebe0;
+  --bg-2:         #ebe3d4;
+  --surface:      #fdfaf3;
+  --surface-elev: #ffffff;
+  --border:       #d9cfb9;
+  --border-soft:  #e6dcc7;
+  --border-hi:    #c4b89f;
+
+  /* Navy text */
+  --ink:        #1a2238;
+  --ink-soft:   #4a5475;
+  --ink-mute:   #8a9099;
+
+  /* Bold accents */
+  --coral:      #e85a4f;
+  --coral-glow: rgba(232, 90, 79, 0.15);
+  --coral-soft: rgba(232, 90, 79, 0.08);
+  --navy:       #1a2238;
+  --teal:       #2a9d8f;
+  --teal-glow:  rgba(42, 157, 143, 0.18);
+  --amber:      #e9a23b;
+  --amber-glow: rgba(233, 162, 59, 0.18);
+  --plum:       #7d4e8a;
+  --plum-glow:  rgba(125, 78, 138, 0.18);
+  --red:        #c53030;
+  --green:      #2f855a;
 
   --radius:    8px;
   --radius-lg: 12px;
@@ -44,7 +43,7 @@
 }
 
 /* =========================================================
-   PAGE BACKGROUND — deep navy with colored glows
+   PAGE BACKGROUND — warm cream with subtle texture
    ========================================================= */
 
 html, body,
@@ -60,9 +59,9 @@ gradio-app, .gradio-app,
 
 gradio-app, .gradio-app, [data-testid="app"] {
   background-image:
-    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;
+    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(232, 90, 79, 0.08), transparent 60%),
+    radial-gradient(ellipse 50% 35% at 85% 10%, rgba(42, 157, 143, 0.06), transparent 60%),
+    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(125, 78, 138, 0.05), transparent 60%) !important;
   background-attachment: fixed !important;
   background-repeat: no-repeat !important;
   min-height: 100vh !important;
@@ -78,15 +77,13 @@ html, body {
   min-height: 100vh !important;
 }
 
-/* Subtle grid texture */
+/* Subtle dot grid texture */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
-  background-image:
-    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;
+  background-image: radial-gradient(circle, rgba(26, 34, 56, 0.045) 1px, transparent 1px);
+  background-size: 22px 22px;
   pointer-events: none;
   z-index: 0;
 }
@@ -102,7 +99,7 @@ body::before {
 }
 
 /* =========================================================
-   HEADER — gradient title
+   HEADER
    ========================================================= */
 
 #escp_title {
@@ -118,37 +115,36 @@ body::before {
   display: block !important;
   font-family: var(--font-mono) !important;
   font-size: 11px !important;
-  color: var(--cyan) !important;
+  color: var(--coral) !important;
   letter-spacing: 0.05em !important;
   margin-bottom: 16px !important;
   text-transform: uppercase !important;
+  font-weight: 600 !important;
 }
 
 #escp_title h1 {
   font-family: var(--font-display) !important;
-  font-size: 2.5rem !important;
+  font-size: 2.75rem !important;
   font-weight: 700 !important;
-  letter-spacing: -0.035em !important;
+  letter-spacing: -0.04em !important;
   text-align: left !important;
   margin: 0 0 12px 0 !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;
+  line-height: 1.05 !important;
+  color: var(--ink) !important;
+  background: none !important;
+  -webkit-text-fill-color: var(--ink) !important;
 }
 
 #escp_title p, #escp_title em {
   color: var(--ink-soft) !important;
   text-align: left !important;
   font-style: normal !important;
-  font-size: 0.95rem !important;
+  font-size: 1rem !important;
   font-weight: 400 !important;
   margin: 0 !important;
 }
 
-/* Pulsing emerald dot top-right */
+/* Pulsing teal status dot top-right */
 #escp_title::after {
   content: '' !important;
   position: absolute !important;
@@ -157,8 +153,8 @@ body::before {
   width: 8px !important;
   height: 8px !important;
   border-radius: 50% !important;
-  background: var(--emerald) !important;
-  box-shadow: 0 0 0 4px var(--emerald-glow), 0 0 12px var(--emerald) !important;
+  background: var(--teal) !important;
+  box-shadow: 0 0 0 4px var(--teal-glow), 0 0 12px var(--teal) !important;
   animation: pulse-dot 2s ease-in-out infinite !important;
 }
 
@@ -168,7 +164,7 @@ body::before {
 }
 
 /* =========================================================
-   TABS — fix visibility (this is what broke before)
+   TABS — solid pill segmented control
    ========================================================= */
 
 .tabs > .tab-nav,
@@ -185,9 +181,9 @@ div[role="tablist"],
   gap: 2px !important;
   width: fit-content !important;
   max-width: 100% !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset !important;
 }
 
-/* CRITICAL: ensure ALL tab buttons are visible (this is what broke) */
 .tabs > .tab-nav button,
 .tab-nav button,
 div[role="tablist"] button,
@@ -202,7 +198,7 @@ button[role="tab"],
   font-size: 0.875rem !important;
   border: none !important;
   background: transparent !important;
-  padding: 8px 16px !important;
+  padding: 8px 18px !important;
   border-radius: 6px !important;
   border-bottom: none !important;
   transition: color 0.15s, background 0.15s !important;
@@ -222,11 +218,11 @@ button[role="tab"]:hover {
 button[role="tab"][aria-selected="true"],
 button[role="tab"].selected,
 .svelte-tabs button.selected {
-  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;
+  color: #ffffff !important;
+  background: var(--ink) !important;
   font-weight: 600 !important;
   border-bottom: none !important;
+  box-shadow: 0 1px 3px rgba(26, 34, 56, 0.25) !important;
 }
 
 /* =========================================================
@@ -258,53 +254,53 @@ 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.03) inset, 0 4px 12px rgba(0,0,0,0.25) !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 2px 8px rgba(26, 34, 56, 0.04) !important;
 }
 
 /* =========================================================
-   LABELS — colorful uppercase mono
+   LABELS — coral mono caps
    ========================================================= */
 
 .gradio-container label,
 .gradio-container .gr-label,
 .gradio-container span[data-testid="block-info"] {
-  color: var(--cyan) !important;
+  color: var(--coral) !important;
   font-family: var(--font-mono) !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   font-size: 0.7rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.08em !important;
 }
 
 /* =========================================================
-   INPUTS
+   INPUTS — clean cream
    ========================================================= */
 
 .gradio-container input,
 .gradio-container textarea,
 .gradio-container select {
-  background: var(--bg-1) !important;
+  background: var(--surface-elev) !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   color: var(--ink) !important;
   font-family: var(--font-display) !important;
-  font-size: 0.9rem !important;
-  padding: 10px 14px !important;
-  caret-color: var(--cyan) !important;
+  font-size: 0.95rem !important;
+  padding: 11px 14px !important;
+  caret-color: var(--coral) !important;
 }
 
 .gradio-container input:hover,
 .gradio-container textarea:hover {
-  background: var(--bg-2) !important;
+  background: var(--surface-elev) !important;
   border-color: var(--border-hi) !important;
 }
 
 .gradio-container input:focus,
 .gradio-container textarea:focus,
 .gradio-container select:focus {
-  border-color: var(--violet) !important;
-  background: var(--bg-1) !important;
-  box-shadow: 0 0 0 3px var(--violet-glow) !important;
+  border-color: var(--coral) !important;
+  background: var(--surface-elev) !important;
+  box-shadow: 0 0 0 3px var(--coral-glow) !important;
   outline: none !important;
 }
 
@@ -314,17 +310,17 @@ button[role="tab"].selected,
 }
 
 textarea {
-  font-size: 0.9rem !important;
+  font-size: 0.95rem !important;
   line-height: 1.6 !important;
 }
 
 /* =========================================================
-   BUTTONS — vibrant gradient primary
+   BUTTONS
    ========================================================= */
 
 .gradio-container button:not([role="tab"]) {
   font-family: var(--font-display) !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   padding: 11px 20px !important;
   border-radius: var(--radius) !important;
   font-size: 0.9rem !important;
@@ -333,17 +329,17 @@ textarea {
 }
 
 button.primary {
-  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;
+  background: var(--coral) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--coral) !important;
+  box-shadow: 0 2px 6px var(--coral-glow), 0 1px 0 rgba(255,255,255,0.3) inset !important;
 }
 
 button.primary:hover {
-  background: linear-gradient(135deg, #b89df9 0%, #4ee2f7 100%) !important;
+  background: #d94a3f !important;
+  border-color: #d94a3f !important;
   transform: translateY(-1px) !important;
-  box-shadow: 0 0 24px var(--violet-glow), 0 0 32px var(--cyan-glow) !important;
+  box-shadow: 0 4px 12px var(--coral-glow) !important;
 }
 
 button.secondary {
@@ -353,9 +349,9 @@ button.secondary {
 }
 
 button.secondary:hover {
-  background: var(--bg-3) !important;
-  border-color: var(--violet) !important;
-  color: var(--violet) !important;
+  background: var(--bg-1) !important;
+  border-color: var(--coral) !important;
+  color: var(--coral) !important;
 }
 
 /* =========================================================
@@ -365,16 +361,16 @@ button.secondary:hover {
 .tabitem h1, .tabitem h2,
 .gradio-container h1, .gradio-container h2 {
   color: var(--ink) !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
   letter-spacing: -0.025em !important;
 }
 
-.tabitem h2 { font-size: 1.5rem !important; margin-top: 0 !important; }
+.tabitem h2 { font-size: 1.6rem !important; margin-top: 0 !important; }
 
 .tabitem h3, .gradio-container h3 {
   color: var(--ink) !important;
-  font-weight: 500 !important;
-  font-size: 0.95rem !important;
+  font-weight: 600 !important;
+  font-size: 1.05rem !important;
   margin-top: 28px !important;
   margin-bottom: 12px !important;
   padding-bottom: 8px !important;
@@ -382,9 +378,9 @@ button.secondary:hover {
 }
 
 .tabitem h4, .gradio-container h4 {
-  color: var(--cyan) !important;
+  color: var(--coral) !important;
   font-family: var(--font-mono) !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   font-size: 0.7rem !important;
   text-transform: uppercase !important;
   letter-spacing: 0.08em !important;
@@ -396,22 +392,23 @@ button.secondary:hover {
 .gradio-container p, .gradio-container li {
   color: var(--ink-soft) !important;
   line-height: 1.65 !important;
-  font-size: 0.92rem !important;
+  font-size: 0.95rem !important;
 }
 
 .tabitem strong, .gradio-container strong {
   color: var(--ink) !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 .tabitem code, .gradio-container code {
-  background: var(--bg-2) !important;
-  color: var(--amber) !important;
+  background: var(--bg-1) !important;
+  color: var(--plum) !important;
   padding: 2px 6px !important;
   border-radius: 4px !important;
   font-size: 0.85em !important;
   font-family: var(--font-mono) !important;
   border: 1px solid var(--border-soft) !important;
+  font-weight: 500 !important;
 }
 
 /* =========================================================
@@ -426,7 +423,7 @@ button.secondary:hover {
 }
 
 table {
-  font-size: 0.825rem !important;
+  font-size: 0.85rem !important;
   color: var(--ink) !important;
   font-family: var(--font-display) !important;
   background: var(--surface) !important;
@@ -434,13 +431,13 @@ table {
 
 table thead th {
   background: var(--bg-1) !important;
-  color: var(--violet) !important;
+  color: var(--ink) !important;
   font-family: var(--font-mono) !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
   text-transform: uppercase !important;
   font-size: 0.7rem !important;
   letter-spacing: 0.08em !important;
-  border-bottom: 1px solid var(--border) !important;
+  border-bottom: 2px solid var(--ink) !important;
   padding: 12px 14px !important;
 }
 
@@ -457,7 +454,7 @@ table tbody tr:hover td {
 }
 
 /* =========================================================
-   CHATBOT
+   CHATBOT — readable bubbles, dark text
    ========================================================= */
 
 .gr-chatbot, .chatbot {
@@ -465,29 +462,42 @@ table tbody tr:hover td {
   background: var(--bg-1) !important;
   border: 1px solid var(--border) !important;
   border-radius: var(--radius-lg) !important;
-  padding: 8px !important;
+  padding: 12px !important;
 }
 
 .gr-chatbot .message,
 .chatbot .message {
   border: 1px solid var(--border-soft) !important;
-  font-size: 0.9rem !important;
+  font-size: 0.92rem !important;
   line-height: 1.6 !important;
   color: var(--ink) !important;
+  padding: 12px 14px !important;
 }
 
 .gr-chatbot .message.user,
 .chatbot .message.user {
-  background: linear-gradient(135deg, var(--violet-glow), transparent) !important;
-  border-radius: 12px 12px 4px 12px !important;
-  border-color: var(--violet) !important;
+  background: var(--ink) !important;
+  color: #ffffff !important;
+  border-radius: 14px 14px 4px 14px !important;
+  border-color: var(--ink) !important;
+}
+
+.gr-chatbot .message.user *,
+.chatbot .message.user * {
+  color: #ffffff !important;
 }
 
 .gr-chatbot .message.bot,
 .chatbot .message.bot {
   background: var(--surface-elev) !important;
-  border-radius: 12px 12px 12px 4px !important;
-  border-left: 2px solid var(--cyan) !important;
+  color: var(--ink) !important;
+  border-radius: 14px 14px 14px 4px !important;
+  border-left: 3px solid var(--coral) !important;
+}
+
+.gr-chatbot .message.bot *,
+.chatbot .message.bot * {
+  color: var(--ink) !important;
 }
 
 /* =========================================================
@@ -495,22 +505,22 @@ table tbody tr:hover td {
    ========================================================= */
 
 .examples-row button {
-  background: var(--bg-1) !important;
-  color: var(--ink-soft) !important;
+  background: var(--surface-elev) !important;
+  color: var(--ink) !important;
   border: 1px solid var(--border) !important;
   border-radius: 999px !important;
   font-family: var(--font-display) !important;
-  font-size: 0.8rem !important;
-  font-weight: 400 !important;
+  font-size: 0.85rem !important;
+  font-weight: 500 !important;
   text-transform: none !important;
   letter-spacing: -0.005em !important;
-  padding: 6px 14px !important;
+  padding: 7px 14px !important;
 }
 
 .examples-row button:hover {
-  background: var(--violet-glow) !important;
-  color: var(--violet) !important;
-  border-color: var(--violet) !important;
+  background: var(--coral-soft) !important;
+  color: var(--coral) !important;
+  border-color: var(--coral) !important;
 }
 
 /* =========================================================
@@ -531,16 +541,16 @@ table tbody tr:hover td {
 }
 
 /* =========================================================
-   SCORE NUMBER (big metric)
+   SCORE NUMBER
    ========================================================= */
 
 [data-testid="number-input"] input,
 .gradio-container [type="number"] {
   font-family: var(--font-mono) !important;
   font-size: 1.75rem !important;
-  font-weight: 600 !important;
-  color: var(--cyan) !important;
-  background: var(--bg-1) !important;
+  font-weight: 700 !important;
+  color: var(--coral) !important;
+  background: var(--surface-elev) !important;
   letter-spacing: -0.02em !important;
   text-align: center !important;
 }
@@ -559,15 +569,15 @@ header, header * {
 }
 
 footer a { color: var(--ink-mute) !important; }
-footer a:hover { color: var(--cyan) !important; }
+footer a:hover { color: var(--coral) !important; }
 
 /* =========================================================
-   FORCE READABLE TEXT EVERYWHERE
+   FORCE LIGHT THEME
    ========================================================= */
 
 .gradio-container,
 .gradio-container * {
-  color-scheme: dark !important;
+  color-scheme: light !important;
 }
 
 .gradio-container .prose,
@@ -588,10 +598,10 @@ footer a:hover { color: var(--cyan) !important; }
 }
 *::-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(--violet); }
+*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
+*::-webkit-scrollbar-thumb:hover { background: var(--coral); }
 
 ::selection {
-  background: var(--violet-glow);
+  background: var(--coral-glow);
   color: var(--ink);
-}
+}