Delete style.css

style.css

@@ -1,423 +0,0 @@
-/* ── Reset & base ── */
-*, *::before, *::after { box-sizing: border-box; }
-
-html, body {
-  background: #f4f4f6 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  min-height: 100vh !important;
-  font-family: system-ui, -apple-system, sans-serif !important;
-}
-
-/* ── Full-width Gradio shell ── */
-gradio-app,
-.gradio-app,
-.main,
-#app,
-[data-testid="app"] {
-  background: #f4f4f6 !important;
-  background-image:
-    url('https://huggingface.co/spaces/ESCP/F2_Salary_Prediction_Model/resolve/main/background_top.png'),
-    url('https://huggingface.co/spaces/ESCP/F2_Salary_Prediction_Model/resolve/main/background_mid.png'),
-    url('https://huggingface.co/spaces/ESCP/F2_Salary_Prediction_Model/resolve/main/background_bottom.png') !important;
-  background-position: top center, 0 440px, bottom center !important;
-  background-repeat: no-repeat, repeat-y, no-repeat !important;
-  background-size: 100% auto, 100% auto, 100% auto !important;
-  min-height: 100vh !important;
-}
-
-/* ── Gradio container: full width, no padding-top ── */
-.gradio-container {
-  max-width: 100% !important;
-  width: 100% !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  background: transparent !important;
-}
-
-/* ── Title block ── */
-#escp_title {
-  text-align: center !important;
-  padding: 28px 0 8px !important;
-}
-#escp_title h1 {
-  color: #0d1b5e !important;
-  font-size: 2.6rem !important;
-  font-weight: 900 !important;
-  margin: 0 0 6px !important;
-  letter-spacing: -0.5px !important;
-}
-#escp_title p,
-#escp_title em {
-  color: #3a4888 !important;
-  font-size: 1rem !important;
-  font-weight: 500 !important;
-}
-
-/* ── Tab nav: pill-style top bar ── */
-.tabs > .tab-nav,
-.tab-nav,
-div[role="tablist"],
-.svelte-tabs > .tab-nav {
-  background: white !important;
-  border-bottom: 0.5px solid #dde0f0 !important;
-  border-radius: 0 !important;
-  padding: 0 20px !important;
-  display: flex !important;
-  gap: 4px !important;
-  box-shadow: 0 1px 4px rgba(26,40,104,0.06) !important;
-}
-
-.tabs > .tab-nav button,
-.tab-nav button,
-div[role="tablist"] button,
-button[role="tab"],
-.svelte-tabs button,
-.tab-nav > button,
-.tabs button {
-  color: #7a88c0 !important;
-  font-weight: 700 !important;
-  font-size: 0.9rem !important;
-  border: none !important;
-  background: transparent !important;
-  padding: 14px 22px !important;
-  border-radius: 0 !important;
-  border-bottom: 2.5px solid transparent !important;
-  opacity: 1 !important;
-  transition: color 0.15s, border-color 0.15s !important;
-}
-
-.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: #1a2868 !important;
-  background: #eef2ff !important;
-  border-bottom: 3px solid #1a2868 !important;
-  border-radius: 6px 6px 0 0 !important;
-}
-
-.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: #7a88c0 !important;
-  border-bottom: 2.5px solid transparent !important;
-}
-
-/* ── Tab content: no heavy white box ── */
-.tabitem {
-  background: transparent !important;
-  border-radius: 0 !important;
-  padding: 20px 24px 40px !important;
-}
-
-/* ── White cards ── */
-.gradio-container .gr-block,
-.gradio-container .gr-box,
-.gradio-container .gr-panel,
-.gradio-container .gr-group {
-  background: white !important;
-  border-radius: 16px !important;
-  border: 0.5px solid #e0e4f0 !important;
-}
-
-/* ── Inputs ── */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-  background: #fafbff !important;
-  border: 0.5px solid #dde0f0 !important;
-  border-radius: 8px !important;
-  font-size: 13px !important;
-  color: #0d1b5e !important;
-}
-
-.gradio-container input:focus,
-.gradio-container textarea:focus {
-  border-color: #1a2868 !important;
-  outline: none !important;
-  box-shadow: 0 0 0 3px rgba(26,40,104,0.08) !important;
-}
-
-/* ── Blue slider thumbs ── */
-input[type="range"] {
-  accent-color: #1a2868 !important;
-}
-input[type="range"]::-webkit-slider-thumb {
-  background: #1a2868 !important;
-  border: 2px solid white !important;
-  box-shadow: 0 0 0 3px rgba(26,40,104,0.15) !important;
-}
-input[type="range"]::-moz-range-thumb {
-  background: #1a2868 !important;
-  border: 2px solid white !important;
-}
-input[type="range"]::-webkit-slider-runnable-track {
-  background: #dde8f8 !important;
-  border-radius: 4px !important;
-}
-
-/* ── Primary button ── */
-button.primary,
-.gradio-container button.primary,
-.gradio-container button[variant="primary"] {
-  background: #1a2868 !important;
-  color: white !important;
-  font-size: 1rem !important;
-  font-weight: 700 !important;
-  padding: 13px 20px !important;
-  border-radius: 12px !important;
-  border: none !important;
-  box-shadow: 0 4px 14px rgba(26,40,104,0.22) !important;
-  letter-spacing: 0.2px !important;
-}
-button.primary:hover,
-.gradio-container button.primary:hover {
-  background: #253499 !important;
-  box-shadow: 0 6px 20px rgba(26,40,104,0.32) !important;
-}
-
-/* ── Secondary button ── */
-button.secondary,
-.gradio-container button.secondary {
-  background: white !important;
-  color: #1a2868 !important;
-  border: 1.5px solid #1a2868 !important;
-  border-radius: 10px !important;
-  font-weight: 700 !important;
-}
-button.secondary:hover {
-  background: #f4f4f6 !important;
-}
-
-/* ── Labels & headings inside tabs ── */
-.tabitem h1 { color: #0d1b5e !important; font-size: 1.6rem !important; font-weight: 900 !important; }
-.tabitem h2 { color: #0d1b5e !important; font-size: 1.3rem !important; font-weight: 800 !important; }
-.tabitem h3 { color: #0d1b5e !important; font-size: 1.1rem !important; font-weight: 800 !important; }
-.tabitem h4 { color: #1a2868 !important; font-size: 0.95rem !important; font-weight: 700 !important; }
-.tabitem p  { color: #4a5280 !important; font-size: 0.88rem !important; }
-
-/* ── Dataframes ── */
-[data-testid="dataframe"] {
-  background: white !important;
-  border-radius: 12px !important;
-  border: 0.5px solid #e0e4f0 !important;
-}
-table { font-size: 0.82rem !important; }
-th { color: #7a88c0 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }
-
-/* ── Chatbot ── */
-.gr-chatbot {
-  min-height: 360px !important;
-  background: white !important;
-  border-radius: 14px !important;
-  border: 0.5px solid #e0e4f0 !important;
-}
-.gr-chatbot .message.user { background: #f4f4f6 !important; border-radius: 12px !important; }
-.gr-chatbot .message.bot  { background: #f8f9ff !important; border-radius: 12px !important; }
-
-/* ── Examples ── */
-.examples-row button {
-  background: #f4f4f6 !important;
-  color: #1a2868 !important;
-  border: 0.5px solid #c0c8e8 !important;
-  border-radius: 8px !important;
-  font-size: 0.8rem !important;
-  font-weight: 600 !important;
-}
-.examples-row button:hover { background: #e0e4f5 !important; }
-
-/* ── Transparent footer/header ── */
-header, header *, footer, footer * {
-  background: transparent !important;
-  box-shadow: none !important;
-}
-footer a, footer button, header a, header button {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !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;
-}
-section footer { background: transparent !important; }
-section footer button, section footer a {
-  background: transparent !important;
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  color: #4a5280 !important;
-}
-section footer button, section footer button * {
-  background: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-  filter: none !important;
-}
-section footer button::before, section footer button::after {
-  background: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-}
-.gradio-container footer button,
-.gradio-container footer button *,
-.gradio-container .footer button,
-.gradio-container .footer button * {
-  background: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-}
-
-/* ── GROUP boxes = white cards with shadow ── */
-.gradio-container .gr-group {
-  background: white !important;
-  border-radius: 18px !important;
-  border: 0.5px solid #e4e8f4 !important;
-  padding: 20px !important;
-  box-shadow: 0 2px 16px rgba(26,40,104,0.06) !important;
-  margin-bottom: 12px !important;
-}
-
-/* ── Remove Gradio's default label styling, make our own cleaner ── */
-.gradio-container label > span {
-  font-size: 11px !important;
-  font-weight: 700 !important;
-  color: #7a88c0 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.8px !important;
-}
-
-/* ── Sliders: full width, bigger thumb ── */
-input[type="range"] {
-  width: 100% !important;
-  height: 4px !important;
-  accent-color: #1a2868 !important;
-  border-radius: 2px !important;
-}
-input[type="range"]::-webkit-slider-thumb {
-  width: 18px !important;
-  height: 18px !important;
-  background: #1a2868 !important;
-  border: 2.5px solid white !important;
-  border-radius: 50% !important;
-  box-shadow: 0 0 0 3px rgba(26,40,104,0.15) !important;
-  cursor: pointer !important;
-}
-input[type="range"]::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, #1a2868, #4a6ee0) !important;
-  border-radius: 2px !important;
-  height: 4px !important;
-}
-
-/* ── Inputs: cleaner, more modern ── */
-.gradio-container input[type="text"],
-.gradio-container input[type="number"],
-.gradio-container textarea {
-  background: #f8f9ff !important;
-  border: 1px solid #e4e8f4 !important;
-  border-radius: 10px !important;
-  padding: 10px 14px !important;
-  font-size: 13px !important;
-  color: #0d1b5e !important;
-  transition: border-color 0.15s, box-shadow 0.15s !important;
-}
-.gradio-container input:focus,
-.gradio-container textarea:focus {
-  border-color: #1a2868 !important;
-  box-shadow: 0 0 0 3px rgba(26,40,104,0.1) !important;
-  outline: none !important;
-}
-
-/* ── Dropdown select ── */
-.gradio-container select,
-.gradio-container .gr-dropdown select {
-  background: #f8f9ff !important;
-  border: 1px solid #e4e8f4 !important;
-  border-radius: 10px !important;
-  padding: 10px 14px !important;
-  font-size: 13px !important;
-  color: #0d1b5e !important;
-  font-weight: 600 !important;
-}
-
-/* ── Primary button: gradient purple-blue like mockup ── */
-button.primary,
-.gradio-container button.primary,
-.gradio-container button[variant="primary"],
-.gr-button-primary {
-  background: linear-gradient(135deg, #1a2868 0%, #3a5cd0 100%) !important;
-  color: white !important;
-  font-size: 1rem !important;
-  font-weight: 800 !important;
-  padding: 14px 24px !important;
-  border-radius: 14px !important;
-  border: none !important;
-  box-shadow: 0 6px 20px rgba(26,40,104,0.28) !important;
-  letter-spacing: 0.3px !important;
-  width: 100% !important;
-  transition: all 0.2s !important;
-}
-button.primary:hover,
-.gradio-container button.primary:hover {
-  box-shadow: 0 8px 28px rgba(26,40,104,0.38) !important;
-  transform: translateY(-1px) !important;
-}
-
-/* ── Plot containers: clean white cards ── */
-.gradio-container .gr-plot,
-.gradio-container [data-testid="plot"] {
-  background: white !important;
-  border-radius: 16px !important;
-  border: 0.5px solid #e4e8f4 !important;
-  box-shadow: 0 2px 12px rgba(26,40,104,0.05) !important;
-  overflow: hidden !important;
-  min-height: 380px !important;
-}
-
-/* ── HTML output areas: no background ── */
-.gradio-container .gr-html {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* ── Tab content padding ── */
-.tabitem {
-  padding: 16px 20px 40px !important;
-}
-
-/* ── Number input ── */
-.gradio-container input[type="number"] {
-  background: #eef2ff !important;
-  border: 1px solid #c8d0f0 !important;
-  border-radius: 8px !important;
-  color: #1a2868 !important;
-  font-weight: 700 !important;
-  text-align: center !important;
-}
-
-/* ── Section headers inside tabitem ── */
-.tabitem h3 {
-  color: #0d1b5e !important;
-  font-size: 1rem !important;
-  font-weight: 800 !important;
-  margin-bottom: 4px !important;
-}
-.tabitem > .prose p,
-.tabitem p {
-  color: #7a88c0 !important;
-  font-size: 0.82rem !important;
-  margin-top: 2px !important;
-}
-
-/* ── Row gaps ── */
-.gradio-container .gr-row {
-  gap: 16px !important;
-}