style.css

/* --- Page background: Single unified background --- */
html, body {
  background-color: rgb(40,9,109) !important;
  background-image: url('https://huggingface.co/spaces/XRachel/workshop/resolve/main/Python_R.jpg') !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

/* --- Main container --- */
.gradio-container {
  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;
  padding-top: 220px !important;
  padding-bottom: 150px !important;
  background: transparent !important;
}

/* --- Title in ESCP gold --- */
#escp_title h1 {
  color: rgb(242,198,55) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}

/* --- Subtitle --- */
#escp_title p, #escp_title em {
  color: rgba(255,255,255,0.85) !important;
  text-align: center !important;
}

/* --- Tab bar background --- */
.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;
}

/* --- ALL tab buttons: force white text --- */
.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;
  border: none !important;
  background: transparent !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  opacity: 1 !important;
}

/* --- Selected tab: ESCP gold --- */
.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;
}

/* --- White card panels --- */
.gradio-container .gr-block,
.gradio-container .gr-box,
.gradio-container .gr-panel,
.gradio-container .gr-group {
  background: #ffffff !important;
  border-radius: 10px !important;
}

/* --- Tab content area --- */
.tabitem {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 16px !important;
}