Update style.css

style.css

@@ -1,359 +1,458 @@
-/* --- Target the Gradio app wrapper for backgrounds --- */
+/* =========================================================
+   MINIMAL PRO — CS1 Group 14
+   White + Charcoal + Indigo accent, animated gradient borders
+   ========================================================= */
+
+/* --- Color tokens --- */
+:root {
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --ink: #0f172a;
+  --ink-soft: #475569;
+  --ink-mute: #94a3b8;
+  --border: #e2e8f0;
+  --accent: #4f46e5;
+  --accent-soft: #eef2ff;
+  --accent-2: #06b6d4;
+  --danger: #dc2626;
+  --warn: #ea580c;
+  --ok: #059669;
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
+  --radius: 14px;
+  --radius-lg: 20px;
+}
+
+/* --- Background: clean off-white with ESCP imagery faded out --- */
 gradio-app,
 .gradio-app,
 .main,
 #app,
 [data-testid="app"] {
-  background-color: rgb(40,9,109) !important;
+  background-color: var(--bg) !important;
   background-image:
+    linear-gradient(rgba(250,250,250,0.92), rgba(250,250,250,0.92)),
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_top.png'),
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_mid.png'),
     url('https://huggingface.co/spaces/atascioglu/SE21AppTemplate/resolve/main/background_bottom.png') !important;
   background-position:
+    center,
     top center,
     0 913px,
     bottom center !important;
   background-repeat:
+    no-repeat,
     no-repeat,
     repeat-y,
     no-repeat !important;
   background-size:
+    cover,
     100% auto,
     100% auto,
     100% auto !important;
+  background-attachment: fixed, scroll, scroll, scroll !important;
   min-height: 100vh !important;
 }
 
-/* --- Fallback on html/body --- */
 html, body {
-  background-color: rgb(40,9,109) !important;
+  background-color: var(--bg) !important;
   margin: 0 !important;
   padding: 0 !important;
   min-height: 100vh !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
+  color: var(--ink) !important;
 }
 
-/* Bottom image is now part of the main background layers (positioned at bottom center) */
-
 /* --- Main container --- */
 .gradio-container {
-  max-width: 1400px !important;
-  width: 94vw !important;
+  max-width: 1280px !important;
+  width: 92vw !important;
   margin: 0 auto !important;
-  padding-top: 220px !important;
-  padding-bottom: 150px !important;
+  padding-top: 60px !important;
+  padding-bottom: 80px !important;
   background: transparent !important;
 }
 
-/* --- Title in ESCP gold --- */
+/* --- Title block --- */
+#escp_title {
+  text-align: center !important;
+  margin-bottom: 48px !important;
+}
+
 #escp_title h1 {
-  color: rgb(242,198,55) !important;
-  font-size: 3rem !important;
+  color: var(--ink) !important;
+  font-size: 3.5rem !important;
   font-weight: 800 !important;
+  letter-spacing: -0.04em !important;
   text-align: center !important;
   margin: 0 0 12px 0 !important;
+  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%) !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
 }
 
-/* --- Subtitle --- */
 #escp_title p, #escp_title em {
-  color: rgba(255,255,255,0.85) !important;
+  color: var(--ink-soft) !important;
   text-align: center !important;
+  font-style: normal !important;
+  font-size: 1.05rem !important;
+  font-weight: 500 !important;
+}
+
+/* =========================================================
+   ANIMATED GRADIENT BORDER — used on tab content + KPI grid
+   ========================================================= */
+@keyframes gradient-rotate {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes gradient-rotate-slow {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
 }
 
-/* --- Tab bar background --- */
+/* --- Tab bar --- */
 .tabs > .tab-nav,
 .tab-nav,
 div[role="tablist"],
 .svelte-tabs > .tab-nav {
-  background: rgba(40,9,109,0.6) !important;
-  border-radius: 10px 10px 0 0 !important;
-  padding: 4px !important;
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  margin-bottom: 24px !important;
+  display: flex !important;
+  gap: 4px !important;
+  border-bottom: 1px solid var(--border) !important;
+  border-radius: 0 !important;
 }
 
-/* --- ALL tab buttons: force white text --- */
+/* --- Tab buttons (unselected) --- */
 .tabs > .tab-nav button,
 .tab-nav button,
 div[role="tablist"] button,
 button[role="tab"],
-.svelte-tabs button,
-.tab-nav > button,
-.tabs button {
-  color: #ffffff !important;
-  font-weight: 600 !important;
+.svelte-tabs button {
+  color: var(--ink-soft) !important;
+  font-weight: 500 !important;
+  font-size: 0.95rem !important;
   border: none !important;
   background: transparent !important;
-  padding: 10px 20px !important;
-  border-radius: 8px 8px 0 0 !important;
+  padding: 14px 20px !important;
+  border-radius: 0 !important;
+  border-bottom: 2px solid transparent !important;
+  transition: color 0.2s, border-color 0.2s !important;
   opacity: 1 !important;
+  margin-bottom: -1px !important;
+}
+
+.tabs > .tab-nav button:hover,
+.tab-nav button:hover,
+button[role="tab"]:hover {
+  color: var(--ink) !important;
 }
 
-/* --- Selected tab: ESCP gold --- */
+/* --- Selected tab --- */
 .tabs > .tab-nav button.selected,
 .tab-nav button.selected,
 button[role="tab"][aria-selected="true"],
 button[role="tab"].selected,
-div[role="tablist"] button[aria-selected="true"],
 .svelte-tabs button.selected {
-  color: rgb(242,198,55) !important;
-  background: rgba(255,255,255,0.12) !important;
-}
-
-/* --- Unselected tabs: ensure visibility --- */
-.tabs > .tab-nav button:not(.selected),
-.tab-nav button:not(.selected),
-button[role="tab"][aria-selected="false"],
-button[role="tab"]:not(.selected),
-div[role="tablist"] button:not([aria-selected="true"]) {
-  color: #ffffff !important;
-  opacity: 1 !important;
+  color: var(--accent) !important;
+  background: transparent !important;
+  border-bottom: 2px solid var(--accent) !important;
+  font-weight: 600 !important;
 }
 
-/* --- White card panels --- */
+/* --- Tab content area with animated border --- */
+.tabitem {
+  position: relative !important;
+  background: var(--surface) !important;
+  border-radius: var(--radius-lg) !important;
+  padding: 32px !important;
+  box-shadow: var(--shadow-md) !important;
+  border: 1px solid var(--border) !important;
+}
+
+.tabitem::before {
+  content: '' !important;
+  position: absolute !important;
+  inset: -2px !important;
+  border-radius: var(--radius-lg) !important;
+  padding: 2px !important;
+  background: linear-gradient(
+    115deg,
+    transparent 0%,
+    transparent 35%,
+    var(--accent) 50%,
+    var(--accent-2) 60%,
+    transparent 75%,
+    transparent 100%
+  ) !important;
+  background-size: 300% 100% !important;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
+  -webkit-mask-composite: xor !important;
+  mask-composite: exclude !important;
+  animation: gradient-rotate-slow 8s linear infinite !important;
+  pointer-events: none !important;
+  z-index: 0 !important;
+}
+
+/* --- All elements inside tabitem need to render above the ::before --- */
+.tabitem > * {
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+/* --- Inner cards / blocks --- */
 .gradio-container .gr-block,
 .gradio-container .gr-box,
 .gradio-container .gr-panel,
 .gradio-container .gr-group {
-  background: #ffffff !important;
-  border-radius: 10px !important;
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius) !important;
+  box-shadow: none !important;
 }
 
-/* --- Tab content area --- */
-.tabitem {
-  background: rgba(255,255,255,0.95) !important;
-  border-radius: 0 0 10px 10px !important;
-  padding: 16px !important;
+/* --- Form labels --- */
+.gradio-container label,
+.gradio-container .gr-label,
+.gradio-container span[data-testid="block-info"] {
+  color: var(--ink) !important;
+  font-weight: 600 !important;
+  font-size: 0.85rem !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.04em !important;
 }
 
 /* --- Inputs --- */
 .gradio-container input,
 .gradio-container textarea,
 .gradio-container select {
-  background: #ffffff !important;
-  border: 1px solid #d1d5db !important;
-  border-radius: 8px !important;
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 10px !important;
+  color: var(--ink) !important;
+  font-size: 0.95rem !important;
+  padding: 12px 14px !important;
+  transition: border-color 0.15s, box-shadow 0.15s !important;
+}
+
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
+  outline: none !important;
 }
 
-/* --- Buttons: ESCP purple primary --- */
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+  color: var(--ink-mute) !important;
+}
+
+/* --- Buttons --- */
 .gradio-container button:not([role="tab"]) {
   font-weight: 600 !important;
-  padding: 10px 16px !important;
+  padding: 12px 22px !important;
   border-radius: 10px !important;
+  font-size: 0.95rem !important;
+  letter-spacing: -0.01em !important;
+  transition: transform 0.1s, box-shadow 0.15s, background 0.15s !important;
 }
 
 button.primary {
-  background-color: rgb(40,9,109) !important;
+  background: var(--ink) !important;
   color: #ffffff !important;
-  border: none !important;
+  border: 1px solid var(--ink) !important;
+  box-shadow: var(--shadow-sm) !important;
 }
 
 button.primary:hover {
-  background-color: rgb(60,20,140) !important;
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+  transform: translateY(-1px) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 
 button.secondary {
-  background-color: #ffffff !important;
-  color: rgb(40,9,109) !important;
-  border: 2px solid rgb(40,9,109) !important;
+  background: var(--surface) !important;
+  color: var(--ink) !important;
+  border: 1px solid var(--border) !important;
 }
 
 button.secondary:hover {
-  background-color: rgb(240,238,250) !important;
-}
-
-/* --- Dataframes --- */
-[data-testid="dataframe"] {
-  background-color: #ffffff !important;
-  border-radius: 10px !important;
-}
-
-table {
-  font-size: 0.85rem !important;
+  background: var(--accent-soft) !important;
+  border-color: var(--accent) !important;
+  color: var(--accent) !important;
 }
 
-/* --- Chatbot (AI Dashboard tab) --- */
-.gr-chatbot {
-  min-height: 380px !important;
-  background-color: #ffffff !important;
-  border-radius: 12px !important;
+/* --- Markdown headings --- */
+.tabitem h1, .tabitem h2 {
+  color: var(--ink) !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.02em !important;
 }
 
-.gr-chatbot .message.user {
-  background-color: rgb(232,225,250) !important;
-  border-radius: 12px !important;
+.tabitem h3 {
+  color: var(--ink) !important;
+  font-weight: 700 !important;
+  font-size: 1.15rem !important;
+  letter-spacing: -0.01em !important;
+  margin-top: 24px !important;
 }
 
-.gr-chatbot .message.bot {
-  background-color: #f3f4f6 !important;
-  border-radius: 12px !important;
+.tabitem h4 {
+  color: var(--ink-soft) !important;
+  font-weight: 600 !important;
+  font-size: 0.95rem !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  margin-top: 20px !important;
+  margin-bottom: 12px !important;
 }
 
-/* --- Gallery --- */
-.gallery {
-  background: #ffffff !important;
-  border-radius: 10px !important;
+.tabitem p, .tabitem li {
+  color: var(--ink-soft) !important;
+  line-height: 1.6 !important;
 }
 
-/* --- Log textbox --- */
-textarea {
-  font-family: monospace !important;
-  font-size: 0.8rem !important;
+.tabitem strong {
+  color: var(--ink) !important;
+  font-weight: 700 !important;
 }
 
-/* --- Markdown headings inside tabs --- */
-.tabitem h3 {
-  color: rgb(40,9,109) !important;
-  font-weight: 700 !important;
+.tabitem code {
+  background: var(--accent-soft) !important;
+  color: var(--accent) !important;
+  padding: 2px 6px !important;
+  border-radius: 4px !important;
+  font-size: 0.9em !important;
+  font-weight: 600 !important;
 }
 
-.tabitem h4 {
-  color: #374151 !important;
+/* --- Dataframes --- */
+[data-testid="dataframe"] {
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius) !important;
+  overflow: hidden !important;
 }
 
-/* --- Examples row (AI Dashboard) --- */
-.examples-row button {
-  background: rgb(240,238,250) !important;
-  color: rgb(40,9,109) !important;
-  border: 1px solid rgb(40,9,109) !important;
-  border-radius: 8px !important;
+table {
   font-size: 0.85rem !important;
+  color: var(--ink) !important;
 }
 
-.examples-row button:hover {
-  background: rgb(232,225,250) !important;
+table thead th {
+  background: var(--bg) !important;
+  color: var(--ink) !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  font-size: 0.75rem !important;
+  letter-spacing: 0.04em !important;
+  border-bottom: 1px solid var(--border) !important;
 }
 
-/* --- Header / footer: transparent over banner --- */
-header, header *,
-footer, footer * {
-  background: transparent !important;
-  box-shadow: none !important;
+table tbody td {
+  border-bottom: 1px solid var(--border) !important;
+  color: var(--ink-soft) !important;
 }
 
-footer a, footer button,
-header a, header button {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+table tbody tr:hover td {
+  background: var(--accent-soft) !important;
+  color: var(--ink) !important;
 }
 
-#footer, #footer *,
-[class*="footer"], [class*="footer"] *,
-[class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+/* --- Chatbot --- */
+.gr-chatbot {
+  min-height: 380px !important;
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius) !important;
 }
 
-[data-testid*="api"], [data-testid*="settings"],
-[id*="api"], [id*="settings"],
-[class*="api"], [class*="settings"],
-[class*="bottom"], [class*="toolbar"], [class*="controls"] {
-  background: transparent !important;
-  box-shadow: none !important;
+.gr-chatbot .message.user {
+  background: var(--ink) !important;
+  color: #ffffff !important;
+  border-radius: 14px 14px 4px 14px !important;
 }
 
-[data-testid*="api"] *, [data-testid*="settings"] *,
-[id*="api"] *, [id*="settings"] *,
-[class*="api"] *, [class*="settings"] * {
-  background: transparent !important;
-  box-shadow: none !important;
+.gr-chatbot .message.bot {
+  background: var(--accent-soft) !important;
+  color: var(--ink) !important;
+  border-radius: 14px 14px 14px 4px !important;
 }
 
-section footer {
-  background: transparent !important;
+/* --- Examples row (chatbot suggestions) --- */
+.examples-row button {
+  background: var(--surface) !important;
+  color: var(--ink-soft) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 999px !important;
+  font-size: 0.85rem !important;
+  font-weight: 500 !important;
+  text-transform: none !important;
+  letter-spacing: 0 !important;
+  padding: 8px 14px !important;
 }
 
-section footer button,
-section footer a {
-  background: transparent !important;
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  color: white !important;
+.examples-row button:hover {
+  background: var(--accent-soft) !important;
+  color: var(--accent) !important;
+  border-color: var(--accent) !important;
 }
 
-section footer button:hover,
-section footer button:focus,
-section footer a:hover,
-section footer a:focus {
-  background: transparent !important;
-  background-color: transparent !important;
-  box-shadow: none !important;
+/* --- Plotly charts --- */
+.js-plotly-plot {
+  border-radius: var(--radius) !important;
+  overflow: hidden !important;
 }
 
-section footer button,
-section footer button * {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-  filter: none !important;
+/* --- Number / score displays --- */
+[data-testid="number-input"] input,
+.gradio-container [type="number"] {
+  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace !important;
+  font-size: 1.5rem !important;
+  font-weight: 700 !important;
+  color: var(--ink) !important;
 }
 
-section footer button::before,
-section footer button::after {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-  filter: none !important;
+/* --- Markdown response (analyze result) --- */
+.gradio-container .prose,
+.gradio-container .markdown,
+.gradio-container .gr-markdown {
+  color: var(--ink) !important;
 }
 
-section footer a,
-section footer a * {
+/* --- Gradio default footer styling cleanup --- */
+header, header *,
+footer, footer * {
   background: transparent !important;
-  background-color: transparent !important;
   box-shadow: none !important;
+  color: var(--ink-mute) !important;
 }
 
-.gradio-container footer button,
-.gradio-container footer button *,
-.gradio-container .footer button,
-.gradio-container .footer button * {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
+footer a:hover {
+  color: var(--accent) !important;
 }
 
-.gradio-container footer button::before,
-.gradio-container footer button::after,
-.gradio-container .footer button::before,
-.gradio-container .footer button::after {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
+/* --- Force readable text everywhere (dark-mode override safety net) --- */
+.gradio-container,
+.gradio-container * {
+  color-scheme: light !important;
 }
 
-/* Force readable text in all inputs regardless of system theme */
 .gradio-container input,
 .gradio-container textarea,
 .gradio-container select,
-.gradio-container .gr-text-input,
 .gradio-container [data-testid="textbox"] textarea {
-  color: #1a1a1a !important;
-  background: #ffffff !important;
-  caret-color: #1a1a1a !important;
-}
-
-.gradio-container input::placeholder,
-.gradio-container textarea::placeholder {
-  color: #888 !important;
-}
-
-/* Force readable text in score/risk number boxes */
-.gradio-container [data-testid="number-input"] input,
-.gradio-container [type="number"] {
-  color: #1a1a1a !important;
-}
-
-/* Markdown output should be dark text on white */
-.gradio-container .prose,
-.gradio-container .markdown,
-.gradio-container .gr-markdown {
-  color: #1a1a1a !important;
-}
-
-.gradio-container .prose * {
-  color: inherit !important;
+  color: var(--ink) !important;
+  background: var(--surface) !important;
+  caret-color: var(--ink) !important;
 }