ani-sdhu/essp
0
1@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');2 3/* =============================================================4 Energy and Economic Data Explorer — analyst workbench theme5 Paper-white workspace, dark branded header, UGA Bulldog Red.6 ============================================================= */7 8:root {9 --red: #BA0C2F;10 --red-deep: #93001F;11 --red-tint: #F9E9ED;12 --red-line: #E4B7C1;13 --ink: #191C1F;14 --slate: #5C6570;15 --slate-light: #8A929C;16 --paper: #F4F2EC;17 --surface: #FFFFFF;18 --surface-2: #FBFAF7;19 --surface-3: #F1EFE8;20 --line: #E3E0D8;21 --line-strong: #CFCBC0;22 --header-bg: #101214;23 --focus-ring: 0 0 0 3px rgba(186, 12, 47, 0.16);24 --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 28px rgba(20, 20, 20, 0.06);25 --shadow-soft: 0 1px 2px rgba(20, 20, 20, 0.04), 0 2px 10px rgba(20, 20, 20, 0.05);26 --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;27 --font-display: 'Archivo', 'Inter', sans-serif;28 --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;29}30 31* { box-sizing: border-box; }32html, body, #react-entry-point, #_dash-app-content {33 margin: 0;34 padding: 0;35 min-height: 100%;36 background: var(--paper);37 color: var(--ink);38 font-family: var(--font-ui);39 font-size: 14px;40}41a { color: var(--red); text-decoration: none; font-weight: 600; }42a:hover { text-decoration: underline; }43 44/* ---------- Header ---------- */45 46.topbar {47 min-height: 58px;48 padding: 10px 22px;49 display: flex;50 align-items: center;51 justify-content: space-between;52 gap: 16px;53 background: var(--header-bg);54 border-bottom: 3px solid var(--red);55 color: #fff;56}57.brand-block { display: flex; flex-direction: column; }58.brand-title {59 font-family: var(--font-display);60 font-size: 19px;61 font-weight: 800;62 letter-spacing: -0.015em;63 color: #FFFFFF;64}65.brand-subtitle { color: #A9AFB6; font-size: 12px; margin-top: 1px; font-weight: 500; }66.session-badge {67 font-size: 12px;68 font-weight: 600;69 color: #E8C7CF;70 background: rgba(186, 12, 47, 0.28);71 border: 1px solid rgba(186, 12, 47, 0.55);72 border-radius: 999px;73 padding: 5px 12px;74 white-space: nowrap;75}76.session-badge:empty { display: none; }77 78.page { padding: 16px; background: var(--paper); }79 80/* ---------- Launch card ---------- */81 82.launch-card {83 max-width: 520px;84 margin: 48px auto;85 padding: 28px 28px 22px;86 border: 1px solid var(--line);87 border-radius: 14px;88 background: var(--surface);89 box-shadow: var(--shadow-card);90}91.launch-card.hidden { display: none !important; }92.launch-title {93 font-family: var(--font-display);94 font-size: 22px;95 font-weight: 800;96 letter-spacing: -0.01em;97 margin-bottom: 6px;98}99.launch-rule { width: 44px; height: 3px; background: var(--red); border: none; margin: 0 0 14px; }100 101/* ---------- Workspace grid ---------- */102 103.workspace {104 display: grid;105 grid-template-columns: clamp(300px, 27vw, 410px) 8px minmax(0, 1fr);106 gap: 0;107 height: calc(100vh - 93px);108 height: calc(100dvh - 93px);109 min-height: 460px;110 border: 1px solid var(--line);111 border-radius: 14px;112 overflow: hidden;113 background: var(--surface);114 box-shadow: var(--shadow-card);115}116.workspace.hidden { display: none; }117 118.left-panel {119 overflow-y: auto;120 overflow-x: hidden;121 padding: 16px 16px 24px;122 background: var(--surface-2);123 border-right: 1px solid var(--line);124 min-width: 0;125}126.right-panel {127 overflow-y: auto;128 overflow-x: hidden;129 padding: 16px 18px 24px;130 min-width: 0;131 background: var(--surface);132}133.splitter {134 background: var(--line);135 cursor: col-resize;136 width: 8px;137 position: relative;138 transition: background 120ms ease;139}140.splitter:hover { background: var(--red-line); }141.splitter::after {142 content: "";143 position: absolute;144 left: 2.5px;145 top: 46%;146 width: 3px;147 height: 56px;148 border-radius: 10px;149 background: var(--line-strong);150}151.splitter:hover::after { background: var(--red); }152 153/* ---------- Pipeline steps (left rail) ---------- */154 155.step { margin-bottom: 6px; }156.step-head {157 display: flex;158 align-items: center;159 gap: 9px;160 margin: 6px 0 12px;161}162.step-num {163 font-family: var(--font-mono);164 font-size: 10px;165 font-weight: 500;166 color: var(--slate-light);167 letter-spacing: 0.02em;168 border: 1px solid var(--line);169 border-radius: 6px;170 padding: 2px 6px;171 line-height: 1;172 flex: none;173}174.step-name {175 font-family: var(--font-display);176 font-size: 13px;177 font-weight: 700;178 letter-spacing: 0.03em;179 color: var(--ink);180 text-transform: uppercase;181}182.step-hint { color: var(--slate-light); font-size: 11px; font-weight: 500; margin-left: auto; }183 184.panel-title {185 font-family: var(--font-display);186 color: var(--ink);187 text-transform: uppercase;188 letter-spacing: 0.05em;189 font-size: 12px;190 font-weight: 700;191 margin: 6px 0 8px;192}193.panel-title.mini { margin-top: 14px; }194.small-muted { color: var(--slate); font-size: 13px; line-height: 1.5; margin: 4px 0 10px; }195.hint { color: var(--slate-light); font-size: 11.5px; line-height: 1.45; margin: 4px 0 6px; }196.status-text { color: var(--slate); font-size: 12px; white-space: pre-wrap; margin: 7px 0; line-height: 1.4; }197.status-text:empty { display: none; }198.selected-state {199 color: var(--red-deep);200 background: var(--red-tint);201 border: 1px solid var(--red-line);202 border-radius: 9px;203 padding: 7px 10px;204 margin-bottom: 8px;205 font-size: 12.5px;206 font-weight: 600;207}208.rule { border: none; height: 1px; background: var(--line); margin: 16px 0 12px; }209 210/* ---------- Inputs (force light, beat Dash defaults) ---------- */211 212.control-label {213 display: block;214 color: var(--slate);215 font-size: 10.5px;216 text-transform: uppercase;217 letter-spacing: 0.07em;218 font-weight: 700;219 margin: 8px 0 4px;220}221 222input.text-input,223.text-input {224 width: 100%;225 height: 38px;226 margin: 3px 0 5px;227 padding: 8px 11px;228 color: var(--ink) !important;229 background: var(--surface) !important;230 border: 1px solid var(--line-strong) !important;231 border-radius: 9px !important;232 outline: none;233 font-family: var(--font-ui);234 font-size: 13.5px;235 transition: border-color 120ms ease, box-shadow 120ms ease;236 -webkit-appearance: none;237 appearance: none;238}239.text-input::placeholder { color: var(--slate-light) !important; opacity: 1; }240.text-input:focus { border-color: var(--red) !important; box-shadow: var(--focus-ring); }241.text-input.half { width: calc(50% - 4px); }242.inline-inputs { display: flex; gap: 8px; align-items: center; width: 100%; }243 244.primary-button, .secondary-button {245 width: 100%;246 height: 38px;247 border-radius: 9px;248 margin: 5px 0;249 font-family: var(--font-ui);250 font-weight: 600;251 font-size: 13.5px;252 cursor: pointer;253 transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;254}255.primary-button { color: #fff; background: var(--red); border: 1px solid var(--red); }256.primary-button:hover { background: var(--red-deep); border-color: var(--red-deep); }257.primary-button:active { transform: translateY(1px); }258.secondary-button { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }259.secondary-button:hover { border-color: var(--red); color: var(--red-deep); }260.secondary-button:active { transform: translateY(1px); }261.primary-button:focus-visible, .secondary-button:focus-visible,262.text-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }263.half-button { width: calc(50% - 4px); }264.compact-button { max-width: 280px; margin-right: 8px; }265 266.text-button {267 background: transparent;268 border: none;269 color: var(--slate);270 font-family: var(--font-ui);271 font-size: 12.5px;272 font-weight: 600;273 cursor: pointer;274 padding: 6px 2px;275 text-decoration: underline;276 text-underline-offset: 3px;277 white-space: nowrap;278}279.text-button:hover { color: var(--red-deep); }280 281/* ---------- Source pills / radio ---------- */282 283.checklist { margin: 2px 0 8px; }284.checklist label {285 display: inline-flex;286 align-items: center;287 gap: 6px;288 margin: 0 8px 6px 0;289 padding: 6px 13px;290 color: var(--slate);291 font-size: 12.5px;292 font-weight: 600;293 background: var(--surface);294 border: 1px solid var(--line-strong);295 border-radius: 999px;296 cursor: pointer;297 transition: all 120ms ease;298}299.checklist label:has(input:checked) { color: var(--red-deep); background: var(--red-tint); border-color: var(--red); }300.checklist input { accent-color: var(--red); margin: 0; }301 302/* Segmented radio (bulk quick filter) */303.seg-radio { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--surface); }304.seg-radio label {305 display: inline-flex;306 align-items: center;307 gap: 5px;308 padding: 7px 14px;309 color: var(--slate);310 font-size: 12.5px;311 font-weight: 600;312 cursor: pointer;313 border-right: 1px solid var(--line);314 transition: background 120ms ease, color 120ms ease;315 white-space: nowrap;316 margin: 0;317}318.seg-radio label:last-child { border-right: none; }319.seg-radio label:hover { background: var(--surface-3); color: var(--ink); }320.seg-radio label:has(input:checked) { background: var(--red-tint); color: var(--red-deep); }321.seg-radio input { position: absolute; opacity: 0; width: 0; height: 0; }322 323.radio-row label {324 display: inline-flex;325 align-items: center;326 gap: 5px;327 color: var(--slate);328 font-size: 12.5px;329 font-weight: 500;330 margin: 2px 14px 6px 0;331 white-space: nowrap;332 cursor: pointer;333}334.radio-row label:has(input:checked) { color: var(--red-deep); font-weight: 600; }335.radio-row input { accent-color: var(--red); margin: 0; }336 337/* ---------- Map ---------- */338 339.state-map {340 height: 235px;341 border: 1px solid var(--line);342 border-radius: 11px;343 background: var(--surface);344 overflow: hidden;345 margin: 6px 0;346}347 348/* ---------- Dropdowns (dash / react-select v1) ---------- */349 350.dash-dropdown { margin: 3px 0 5px; font-size: 13px; }351.dash-dropdown .Select-control {352 background: var(--surface) !important;353 color: var(--ink) !important;354 border: 1px solid var(--line-strong) !important;355 border-radius: 9px !important;356 min-height: 38px;357}358.dash-dropdown .Select-control:hover { border-color: var(--red) !important; box-shadow: none; }359.dash-dropdown.is-focused:not(.is-open) > .Select-control { border-color: var(--red) !important; box-shadow: var(--focus-ring) !important; }360.dash-dropdown .Select-menu-outer {361 background: var(--surface) !important;362 border: 1px solid var(--line-strong) !important;363 border-radius: 9px;364 overflow: hidden;365 box-shadow: var(--shadow-card);366 z-index: 20;367}368.dash-dropdown .Select-value-label,369.dash-dropdown .Select-placeholder,370.dash-dropdown .Select-input > input { color: var(--ink) !important; }371.dash-dropdown .Select-placeholder { color: var(--slate-light) !important; }372.dash-dropdown .Select-option { background: var(--surface); color: var(--ink); font-size: 13px; }373.dash-dropdown .Select-option.is-focused { background: var(--red-tint); color: var(--red-deep); }374.dash-dropdown .Select-option.is-selected { background: var(--surface-3); color: var(--ink); }375.dash-dropdown .VirtualizedSelectOption { background: var(--surface); color: var(--ink); font-size: 13px; }376.dash-dropdown .VirtualizedSelectFocusedOption { background: var(--red-tint); color: var(--red-deep); }377.dash-dropdown .Select--multi .Select-value {378 background: var(--red-tint) !important;379 border: 1px solid var(--red-line) !important;380 color: var(--red-deep) !important;381 border-radius: 6px;382}383.dash-dropdown .Select--multi .Select-value-label { color: var(--red-deep) !important; font-weight: 600; }384.dash-dropdown .Select--multi .Select-value-icon {385 border-right: 1px solid var(--red-line) !important;386 color: var(--red-deep);387}388.dash-dropdown .Select--multi .Select-value-icon:hover { background: var(--red-line) !important; color: var(--red-deep); }389.dash-dropdown .Select-arrow { border-color: var(--slate) transparent transparent; }390.dash-dropdown .Select-clear { color: var(--slate); }391 392/* ---------- Metric cards ---------- */393 394.metric-grid {395 display: grid;396 grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));397 gap: 10px;398 margin-bottom: 12px;399}400.metric-card {401 padding: 10px 12px;402 border: 1px solid var(--line);403 border-radius: 11px;404 background: var(--surface-2);405}406.metric-label { color: var(--slate); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }407.metric-value {408 font-family: var(--font-display);409 color: var(--ink);410 margin-top: 3px;411 font-size: 19px;412 font-weight: 700;413 font-variant-numeric: tabular-nums;414}415 416/* ---------- Tabs ---------- */417 418.main-tabs { margin-top: 4px; }419.main-tabs .tab-container, .main-tabs .tab-parent { background: transparent !important; }420.main-tabs .tab {421 background: transparent !important;422 color: var(--slate) !important;423 border: none !important;424 border-bottom: 2px solid transparent !important;425 padding: 10px 14px !important;426 font-family: var(--font-ui);427 font-weight: 600 !important;428 font-size: 13.5px;429 letter-spacing: 0.01em;430}431.main-tabs .tab:hover { color: var(--ink) !important; }432.main-tabs .tab--selected,433.dash-tab-selected {434 background: transparent !important;435 color: var(--red-deep) !important;436 border-bottom: 2px solid var(--red) !important;437}438.main-tabs .tab-container { border-bottom: 1px solid var(--line) !important; }439.dash-tab { background: transparent !important; color: var(--slate) !important; }440.tab-body { padding-top: 14px; background: var(--surface); }441 442/* ---------- View toolbar ---------- */443 444.view-toolbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 4px 0; }445.view-toolbar .view-mode-wrap { width: min(280px, 100%); }446.view-toolbar .status-text { margin: 0 0 9px; }447 448/* ---------- Code box ---------- */449 450.code-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }451.code-toolbar .compact-button { margin: 0; }452.copy-clip {453 display: inline-flex;454 align-items: center;455 color: var(--slate);456 font-size: 18px;457 cursor: pointer;458 padding: 6px 8px;459 border: 1px solid var(--line-strong);460 border-radius: 9px;461 background: var(--surface);462}463.copy-clip:hover { color: var(--red-deep); border-color: var(--red); }464.code-box {465 width: 100%;466 min-height: 520px;467 resize: vertical;468 padding: 14px;469 margin-top: 4px;470 color: var(--ink) !important;471 background: var(--surface-2) !important;472 border: 1px solid var(--line) !important;473 border-radius: 11px;474 font-family: var(--font-mono);475 font-size: 12px;476 line-height: 1.5;477 white-space: pre;478}479 480/* =============================================================481 Downloads tab — card-based, engineer-grade482 ============================================================= */483 484.dl-tab { display: flex; flex-direction: column; gap: 16px; }485 486.dl-card {487 background: var(--surface);488 border: 1px solid var(--line);489 border-radius: 14px;490 padding: 18px 18px 16px;491 box-shadow: var(--shadow-soft);492}493 494.dl-card-head {495 display: flex;496 align-items: flex-start;497 justify-content: space-between;498 gap: 12px;499 margin-bottom: 14px;500}501.dl-card-title {502 font-family: var(--font-display);503 font-size: 15px;504 font-weight: 700;505 letter-spacing: -0.005em;506 color: var(--ink);507}508.dl-card-sub { color: var(--slate); font-size: 12.5px; line-height: 1.45; margin: 3px 0 0; max-width: 60ch; }509 510.dl-count-pill {511 flex: none;512 font-family: var(--font-mono);513 font-size: 11.5px;514 font-weight: 500;515 color: var(--slate);516 background: var(--surface-3);517 border: 1px solid var(--line);518 border-radius: 999px;519 padding: 5px 12px;520 white-space: nowrap;521}522 523.dl-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }524.dl-chip {525 width: auto !important;526 min-width: 120px;527 margin: 0 !important;528 display: inline-flex;529 align-items: center;530 justify-content: center;531 gap: 7px;532}533 534.dl-filter-row {535 display: grid;536 grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);537 gap: 14px;538 margin-bottom: 12px;539}540.dl-field { min-width: 0; }541.dl-field .control-label { margin-top: 0; }542 543.dl-mode-row {544 display: flex;545 align-items: flex-end;546 justify-content: space-between;547 gap: 14px;548 flex-wrap: wrap;549 margin-bottom: 6px;550}551.dl-mode-row .control-label { margin-top: 0; }552 553.dl-status { margin: 2px 0 10px; font-family: var(--font-mono); font-size: 11.5px; }554 555.dl-action-row {556 display: flex;557 align-items: center;558 gap: 12px;559 flex-wrap: wrap;560 margin-top: 14px;561 padding-top: 14px;562 border-top: 1px solid var(--line);563}564.dl-action { width: auto !important; min-width: 190px; margin: 0 !important; }565.dl-action-status { margin: 0; flex: 1 1 220px; }566 567/* ---------- AG Grid (light quartz) ---------- */568 569.ag-theme-quartz {570 --ag-background-color: var(--surface);571 --ag-foreground-color: var(--ink);572 --ag-header-background-color: var(--surface-2);573 --ag-header-foreground-color: var(--slate);574 --ag-odd-row-background-color: #FCFBF8;575 --ag-border-color: var(--line);576 --ag-row-border-color: #EFEDE6;577 --ag-row-hover-color: rgba(186, 12, 47, 0.06);578 --ag-selected-row-background-color: rgba(186, 12, 47, 0.10);579 --ag-checkbox-checked-color: var(--red);580 --ag-checkbox-background-color: var(--surface);581 --ag-input-focus-border-color: var(--red);582 --ag-range-selection-border-color: var(--red);583 --ag-font-size: 12.5px;584 --ag-font-family: var(--font-ui);585 --ag-header-column-separator-display: none;586 --ag-wrapper-border-radius: 10px;587}588.ag-theme-quartz .ag-header-cell-label { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }589.ag-theme-quartz .ag-paging-panel { border-top: 1px solid var(--line); color: var(--slate); font-size: 12px; }590.results-grid, .series-grid, .data-grid, .downloader-grid {591 border-radius: 10px;592 overflow: hidden;593 border: 1px solid var(--line);594 margin: 4px 0;595}596.downloader-grid { margin: 2px 0 0; }597.mono-cell { font-family: var(--font-mono); font-size: 11.5px; }598 599/* ---------- Loading spinner tint ---------- */600 601.dash-spinner, ._dash-loading { color: var(--red) !important; }602 603/* ---------- Responsive ---------- */604 605@media (max-width: 1280px) {606 .workspace { grid-template-columns: clamp(290px, 30vw, 360px) 8px minmax(0, 1fr); }607}608@media (max-width: 1023px) {609 .workspace { grid-template-columns: 1fr !important; height: auto; min-height: 0; }610 .splitter { display: none; }611 .left-panel { border-right: none; border-bottom: 1px solid var(--line); max-height: none; }612 .topbar { flex-wrap: wrap; }613}614@media (max-width: 640px) {615 .page { padding: 10px; }616 .launch-card { margin: 18px auto; padding: 20px 18px 16px; }617 .brand-subtitle { display: none; }618 .text-input.half { width: 100%; }619 .inline-inputs { flex-wrap: wrap; }620 .half-button { width: 100%; }621 .dl-filter-row { grid-template-columns: 1fr; }622 .dl-action { width: 100% !important; min-width: 0; }623 .seg-radio { width: 100%; }624}625@media (prefers-reduced-motion: reduce) {626 * { transition: none !important; animation-duration: 0.01ms !important; }627}628