Lakehouse/config/homepage/custom.css

/* ATC Lakehouse — Palantir dark + Dell orange */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-deep: #06080c;
  --bg-main: #0a0e14;
  --bg-card: #121820;
  --bg-card-hover: #181f2a;
  --border: rgba(74, 158, 255, 0.12);
  --border-hover: rgba(232, 117, 42, 0.45);
  --text: #e8ecf1;
  --text-muted: #8b9cb3;
  --accent-blue: #4a9eff;
  --accent-orange: #e8752a;
  --accent-orange-glow: rgba(232, 117, 42, 0.25);
  --dell-blue: #007db8;
}

* {
  font-family: 'Inter', system-ui, sans-serif !important;
}

body {
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 125, 184, 0.08), transparent),
              radial-gradient(ellipse 80% 50% at 100% 0%, rgba(232, 117, 42, 0.06), transparent),
              var(--bg-main) !important;
  color: var(--text) !important;
  min-height: 100vh;
}

/* ── Header / widgets row ── */
#information-widgets,
.information-widget-container {
  background: linear-gradient(180deg, #0d1219 0%, rgba(18, 24, 32, 0.98) 100%) !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--dell-blue), var(--accent-orange), var(--dell-blue)) 1 !important;
  padding: 14px 28px !important;
}

header {
  background: transparent !important;
  border: none !important;
}

header h1 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #fff 30%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.information-widget-greeting {
  color: var(--text) !important;
}

.information-widget-greeting .text-theme-800 {
  color: var(--accent-orange) !important;
  font-weight: 600 !important;
}

.information-widget-greeting .text-theme-500 {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}

.information-widget-logo img,
.information-widget-logo svg {
  max-height: 48px !important;
  width: auto !important;
  filter: drop-shadow(0 0 14px var(--accent-orange-glow));
}

.information-widget-search input {
  background: var(--bg-deep) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}

.information-widget-search input:focus {
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 0 2px var(--accent-orange-glow) !important;
}

main {
  padding: 24px 28px 48px !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
}

.services-group {
  margin-bottom: 32px !important;
}

.services-group > div:first-child,
.services-group h2 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--accent-orange) !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--accent-orange), var(--accent-blue), transparent) 1 !important;
}

.services-group ul,
.services-group > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Database sections — wider tiles, always show connection strings */
.services-group:has(h2) ul .service:has(.service-description) {
  min-height: 168px !important;
}

.service {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px 12px 14px !important;
  min-height: 132px !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  position: relative !important;
  overflow: visible !important;
}

.service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dell-blue), var(--accent-orange));
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 12px 12px 0 0;
}

.service:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 24px var(--accent-orange-glow) !important;
  transform: translateY(-4px) !important;
  z-index: 2 !important;
}

.service:hover::before {
  opacity: 1;
}

.service-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  margin: 0 0 10px 0 !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(0, 125, 184, 0.12), rgba(232, 117, 42, 0.08)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.service-icon img,
.service-icon svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.service-name {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
  width: 100% !important;
}

.service-description {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.56rem !important;
  line-height: 1.5 !important;
  color: #7d8fa8 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 4px !important;
}

/* DB / API tiles: show full connection info */
.service:not([href]) .service-description,
.service[href=""] .service-description {
  max-height: none !important;
  color: #9aadc4 !important;
}

.service:hover .service-description {
  max-height: none !important;
  color: #b8c8dc !important;
}

.status-status-healthy,
.status-dot-green {
  background: #3dd68c !important;
  box-shadow: 0 0 8px rgba(61, 214, 140, 0.5) !important;
}

.status-status-unhealthy,
.status-dot-red {
  background: #f87171 !important;
}

.ping {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  font-size: 0.55rem !important;
  margin: 0 !important;
}

.information-widget-resources {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
}

footer {
  opacity: 0.45;
  border-top: 1px solid var(--border) !important;
}

/* Live feed widgets */
.services-group:has(.service-widget) ul {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

.services-group:has(.service-widget) .service {
  min-height: 220px !important;
  align-items: stretch !important;
}

.service-widget {
  background: var(--bg-deep) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  margin-top: 10px !important;
  padding: 8px 10px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  width: 100% !important;
  text-align: left !important;
}

.service-widget::-webkit-scrollbar {
  width: 4px;
}

.service-widget::-webkit-scrollbar-thumb {
  background: var(--accent-orange);
  border-radius: 4px;
}

.service-widget a,
.service-widget li a {
  color: var(--accent-blue) !important;
  font-size: 0.65rem !important;
  line-height: 1.4 !important;
  display: block !important;
  padding: 3px 0 !important;
}

.service-widget a:hover {
  color: var(--accent-orange) !important;
}

.service-widget li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 4px 0 !important;
}

.information-widget-openmeteo {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}