Lakehouse/config/homepage/custom.css

/* Refined Cyberpunk / Palantir Theme */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Montserrat:wght@400;600;700&display=swap');

:root {
  --neon-blue: #00f3ff;
  --neon-purple: #9d00ff;
  --neon-green: #00ff66;
  --neon-pink: #ff007f;
  --neon-yellow: #ffea00;
  --neon-orange: #ff6600;
  --bg-dark: #050810;
  --card-bg-light: rgba(20, 27, 45, 0.85);
  --card-bg-dark: rgba(10, 15, 28, 0.6);
}

body {
  background-color: var(--bg-dark) !important;
  background-image: 
    radial-gradient(circle at 20% 40%, rgba(0, 243, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(157, 0, 255, 0.05) 0%, transparent 50%) !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #f1f5f9 !important;
  line-height: 1.5;
}

/* Hide default homepage elements that make it look standard */
header { border-bottom: 1px solid rgba(255,255,255,0.03) !important; }

/* The Cards - Sleek and Tight */
.service {
  background: linear-gradient(135deg, var(--card-bg-light) 0%, var(--card-bg-dark) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px 12px 12px 6px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(10px) !important;
}

.service:hover {
  transform: translateY(-2px) translateX(4px) !important;
  background: linear-gradient(135deg, rgba(30, 41, 65, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Typography */
.service-name {
  font-family: 'Fira Code', monospace !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}

.service-description {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
}

/* THE ICONS - Smaller and perfectly proportioned */
.service-icon {
  width: 3.2rem !important;
  height: 3.2rem !important;
  min-width: 3.2rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  margin-right: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
}

.service-icon img, 
.service-icon svg {
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) saturate(130%) brightness(1.1) !important;
  transition: all 0.3s ease !important;
}

.service:hover .service-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: scale(1.08) !important;
  box-shadow: inset 0 0 15px rgba(255,255,255,0.05) !important;
}

.service:hover .service-icon svg,
.service:hover .service-icon img {
  filter: drop-shadow(0 0 8px currentColor) saturate(150%) brightness(1.2) !important;
}

/* Icon colors based on services.yaml */
.mdi-apache-kafka, .si-apachekafka { color: #E02014 !important; }
.mdi-database-sync, .si-apachedebezium { color: #4ECDC4 !important; }
.mdi-star-four-points, .si-apachespark { color: #E25A1C !important; }
.si-trino { color: #DD00A1 !important; }
.si-mongodb { color: #47A248 !important; }
.si-postgresql { color: #4169E1 !important; }
.si-apachecassandra { color: #1287B1 !important; }
.si-mysql { color: #4479A1 !important; }
.si-neo4j { color: #008CC1 !important; }
.mdi-database-cloud, .si-minio { color: #00d2ff !important; }
.mdi-server-network { color: #b500ff !important; }
.si-apacheairflow { color: #017CEE !important; }
.mdi-chart-bar, .si-apachesuperset { color: #6c5ce7 !important; }
.si-elasticsearch { color: #005571 !important; }
.si-kibana { color: #F04E98 !important; }
.si-grafana { color: #F46800 !important; }
.si-proxmox { color: #E57000 !important; }
.si-git { color: #F05032 !important; }
.mdi-account-group, .si-openldap { color: #0984e3 !important; }
.mdi-rss { color: #f59e0b !important; }

/* Group Headers - Tighter and more professional */
.services-group > div.flex.items-center.justify-between.mb-2 {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

.services-group .text-theme-700.dark\:text-theme-200.text-lg.font-bold {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* --- COLUMN GLOW EFFECTS (Borders & Headers only) --- */

/* 1. Data Pipeline (Blue) */
.services-group:nth-child(1) .service { border-left-color: var(--neon-blue) !important; }
.services-group:nth-child(1) .service:hover { box-shadow: -5px 0 15px rgba(0, 243, 255, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(1) .text-lg.font-bold { color: var(--neon-blue) !important; text-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important; }

/* 2. Source Systems (Purple) */
.services-group:nth-child(2) .service { border-left-color: var(--neon-purple) !important; }
.services-group:nth-child(2) .service:hover { box-shadow: -5px 0 15px rgba(157, 0, 255, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(2) .text-lg.font-bold { color: var(--neon-purple) !important; text-shadow: 0 0 10px rgba(157, 0, 255, 0.3) !important; }

/* 3. Storage (Green) */
.services-group:nth-child(3) .service { border-left-color: var(--neon-green) !important; }
.services-group:nth-child(3) .service:hover { box-shadow: -5px 0 15px rgba(0, 255, 102, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(3) .text-lg.font-bold { color: var(--neon-green) !important; text-shadow: 0 0 10px rgba(0, 255, 102, 0.3) !important; }

/* 4. Orchestration (Pink) */
.services-group:nth-child(4) .service { border-left-color: var(--neon-pink) !important; }
.services-group:nth-child(4) .service:hover { box-shadow: -5px 0 15px rgba(255, 0, 127, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(4) .text-lg.font-bold { color: var(--neon-pink) !important; text-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important; }

/* 5. Analytics (Yellow) */
.services-group:nth-child(5) .service { border-left-color: var(--neon-yellow) !important; }
.services-group:nth-child(5) .service:hover { box-shadow: -5px 0 15px rgba(255, 234, 0, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(5) .text-lg.font-bold { color: var(--neon-yellow) !important; text-shadow: 0 0 10px rgba(255, 234, 0, 0.3) !important; }

/* 6. Management (Orange) */
.services-group:nth-child(6) .service { border-left-color: var(--neon-orange) !important; }
.services-group:nth-child(6) .service:hover { box-shadow: -5px 0 15px rgba(255, 102, 0, 0.15), 0 4px 12px rgba(0,0,0,0.5) !important; }
.services-group:nth-child(6) .text-lg.font-bold { color: var(--neon-orange) !important; text-shadow: 0 0 10px rgba(255, 102, 0, 0.3) !important; }

/* --- 7. RSS FEEDS (Compact Layout) --- */
.services-group:nth-child(7) .service { 
  border-left-color: #64748b !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  box-shadow: none !important;
}
.services-group:nth-child(7) .service:hover {
  background: rgba(30, 41, 59, 0.8) !important;
  box-shadow: -3px 0 10px rgba(100, 116, 139, 0.2) !important;
}
.services-group:nth-child(7) .service-icon {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  padding: 5px !important;
  margin-right: 12px !important;
  border-radius: 6px !important;
}
.services-group:nth-child(7) .service-name {
  font-size: 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
.services-group:nth-child(7) .service-description {
  font-size: 0.75rem !important;
  margin-top: 2px !important;
}
.services-group:nth-child(7) .text-lg.font-bold { 
  color: #94a3b8 !important; 
  text-shadow: none !important;
  font-size: 1rem !important;
}