homepage/custom.css

/* ============================================================================
   KalliLab — FINAL CUSTOM CSS
   Header CSS removed completely / everything else kept
   ============================================================================ */

:root {
  --kl-bg: #071015;
  --kl-panel: rgba(8, 14, 19, 0.78);
  --kl-panel-2: rgba(11, 19, 24, 0.86);

  --kl-card: rgba(11, 19, 25, 0.72);
  --kl-card-hover: rgba(14, 24, 31, 0.78);
  --kl-tab: rgba(9, 16, 22, 0.78);
  --kl-tab-hover: rgba(12, 22, 28, 0.82);
  --kl-tab-active: rgba(10, 22, 26, 0.84);

  --kl-border: rgba(118, 181, 187, 0.12);
  --kl-border-strong: rgba(0, 200, 160, 0.34);
  --kl-border-active: rgba(74, 219, 196, 0.62);

  --kl-text: #e8fbfb;
  --kl-text-soft: rgba(220, 243, 243, 0.74);
  --kl-text-dim: rgba(182, 215, 215, 0.54);

  --kl-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  --kl-glow: 0 0 18px rgba(0, 200, 160, 0.14);
  --kl-glow-strong: 0 0 24px rgba(0, 200, 160, 0.22);

  --kl-radius: 18px;
  --kl-radius-sm: 14px;

  --kl-font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --kl-font-tech: "JetBrains Mono", "Consolas", monospace;

  --kl-transition: 180ms ease;
}

/* ============================================================================
   BASE
   ============================================================================ */

html,
body {
  background: #050c10;
  color: var(--kl-text);
  font-family: var(--kl-font-ui);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, rgba(0, 200, 160, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(4, 10, 14, 0.18), rgba(4, 10, 14, 0.48));
  z-index: 0;
}

.container,
main,
#page_container {
  position: relative;
  z-index: 1;
}

.container {
  max-width: 94%;
}

/* ============================================================================
   TABS
   ============================================================================ */

#myTab {
  display: flex;
  gap: 18px;
  margin: 0 24px 22px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

#myTabContent,
.tab-content,
.dropdown-area,
.tabcontent {
  margin: 0;
  padding: 0;
}

[id$="-tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 180px;
  padding: 0 22px;
  border: 1px solid var(--kl-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 18, 24, 0.72), rgba(7, 13, 18, 0.82));
  color: var(--kl-text-soft);
  font-family: var(--kl-font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--kl-transition),
    background var(--kl-transition),
    box-shadow var(--kl-transition),
    color var(--kl-transition);
}

[id$="-tab"]:hover {
  color: var(--kl-text);
  border-color: rgba(0, 200, 160, 0.28);
  background: linear-gradient(180deg, var(--kl-tab-hover), rgba(8, 15, 20, 0.88));
  box-shadow: var(--kl-glow);
  transform: none;
}

[id$="-tab"].tab-focused,
[id$="-tab"].active,
[id$="-tab"][aria-selected="true"] {
  color: var(--kl-text);
  border-color: var(--kl-border-active);
  background: linear-gradient(180deg, var(--kl-tab-active), rgba(7, 14, 18, 0.9));
  box-shadow: var(--kl-glow-strong);
  transform: none;
}

.tabcontent {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.tabcontent.active {
  display: block;
  opacity: 1;
  visibility: visible;
  margin: 0;
}

/* ============================================================================
   GROUP TITLES
   ============================================================================ */

.service-group,
.services-group,
.bookmarks-group,
.widget-group {
  margin-bottom: 18px;
}

h2,
.group-title,
.section-title {
  color: var(--kl-text-soft);
  font-family: var(--kl-font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================================
   SERVICE CARDS
   ============================================================================ */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius);
  background: linear-gradient(180deg, rgba(12, 20, 26, 0.72), rgba(8, 14, 18, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--kl-shadow);
  color: var(--kl-text);
  text-shadow: none;
  font-weight: 500;
  white-space: normal;
  overflow: hidden;
  transition:
    border-color var(--kl-transition),
    background var(--kl-transition),
    box-shadow var(--kl-transition);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74, 219, 196, 0.03), transparent 36%);
  pointer-events: none;
}

.service-card:hover {
  border-color: var(--kl-border-strong);
  background: linear-gradient(180deg, rgba(14, 24, 31, 0.78), rgba(9, 16, 21, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(0, 200, 160, 0.05),
    0 0 18px rgba(0, 200, 160, 0.1);
  transform: none;
}

.service-card a {
  color: inherit;
  text-decoration: none;
}

.service-header,
.service-title,
.card-title {
  color: var(--kl-text) !important;
  font-family: var(--kl-font-ui);
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.service-description,
.card-description,
.service-card p {
  color: var(--kl-text-dim) !important;
}

.service-icon img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.service-container {
  color: var(--kl-text-soft);
}

.service-block {
  position: relative;
  border: none;
  border-radius: var(--kl-radius);
  background: transparent;
}

.service-card .status,
.service-status,
.card-status {
  font-family: var(--kl-font-tech);
  font-size: 0.8rem;
  color: var(--kl-text-soft);
}

/* ============================================================================
   IFRAMES / SPECIALS
   ============================================================================ */

iframe {
  width: 100%;
  border: 0;
  background-color: transparent;
}

.home-assistant {
  height: 960px;
  margin: -20px -20px 0;
}

.todo {
  height: 455px;
  margin: -18px 0 0;
}

.ha-calendar {
  height: 995px;
  margin-top: -10px;
}

.epl-calendar {
  height: 520px;
  margin: -40px 0 0;
  pointer-events: none;
}

.glance {
  height: 905px;
  margin: 0 0 -40px;
}

.epl {
  height: 1014px;
  margin: -30px -80px 0;
}

/* ============================================================================
   CUSTOM LISTS
   ============================================================================ */

#upcominggames .flex.flex-row.text-right,
#tautulli_recent_movies .flex.flex-row.text-right,
#tautulli_recent_shows .flex.flex-row.text-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: -1.8px 0 -0.9px 10px;
  border-radius: 0.5rem;
  text-align: left;
  font-weight: 400;
}

#upcominggames .flex.flex-row.text-right > div,
#tautulli_recent_movies .flex.flex-row.text-right > div,
#tautulli_recent_shows .flex.flex-row.text-right > div {
  position: relative;
  display: inline-block;
  width: 60px;
  padding-left: 0;
  text-align: left;
  font-weight: 400;
}

#upcominggames .flex.flex-row.text-right > div:first-child,
#tautulli_recent_movies .flex.flex-row.text-right > div:first-child,
#tautulli_recent_shows .flex.flex-row.text-right > div:first-child {
  margin-right: 23px;
}

#upcominggames .flex.flex-row.text-right > div:last-child,
#tautulli_recent_movies .flex.flex-row.text-right > div:last-child,
#tautulli_recent_shows .flex.flex-row.text-right > div:last-child {
  margin-left: -18px;
}

#upcomingtv span > span:first-child {
  padding-left: 8px;
}

#upcominggames .flex.flex-row.text-right > div:first-child::after,
#tautulli_recent_shows .flex.flex-row.text-right > div:first-child::after,
#tautulli_recent_movies .flex.flex-row.text-right > div:first-child::after {
  content: "";
  position: absolute;
  left: 50px;
  top: 50%;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0.5rem;
  transform: translateY(-50%);
}

#upcominggames .flex.flex-row.text-right > div:first-child::after {
  background-color: #0078d4;
}

#tautulli_recent_shows .flex.flex-row.text-right > div:first-child::after {
  background-color: #00cbfe;
}

#tautulli_recent_movies .flex.flex-row.text-right > div:first-child::after {
  background-color: #f59e0b;
}

#upcominggames .service-container > div > div,
#tautulli_recent_movies .service-container > div > div,
#tautulli_recent_shows .service-container > div > div {
  display: block;
  margin: 3px 3px 1px;
  border-radius: 0.4rem;
  text-align: left;
  text-shadow: none;
  font-size: 12px;
  font-weight: 400;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

.relative {
  position: relative;
}

.active {
  opacity: 1;
  visibility: visible;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes updatePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.74;
  }
}

@keyframes loadingBar {
  0% {
    width: 0;
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.45;
  }
}

.service-card.updating {
  animation: updatePulse 0.5s ease-in-out;
}

.service-card.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 160, 0.2), rgba(74, 219, 196, 0.9));
  animation: loadingBar 2s linear infinite;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  #myTab {
    flex-direction: column;
    gap: 8px;
    margin: 0 12px 18px;
  }

  [id$="-tab"] {
    width: 100%;
    min-width: 0;
  }

  .container {
    max-width: 100%;
  }

  .service-card,
  [id$="-tab"] {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .service-card,
  [id$="-tab"] {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================================
   BOOKMARKS — FINAL MATCH TO MAIN CARDS
   ============================================================================ */

/* Haupt-Balken */
#bookmarks a[href],
.service-block a[href] {
  position: relative;

  border: 1px solid var(--kl-border) !important;
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(12, 20, 26, 0.72),
    rgba(8, 14, 18, 0.72)
  ) !important;

  backdrop-filter: blur(6px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    var(--kl-shadow);

  transition:
    border-color var(--kl-transition),
    background var(--kl-transition),
    box-shadow var(--kl-transition);

  overflow: hidden;
}

/* leichter Glow Layer wie bei Cards */
#bookmarks a[href]::before,
.service-block a[href]::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(74, 219, 196, 0.04),
    transparent 40%
  );

  pointer-events: none;
}

/* Hover exakt wie Main Cards */
#bookmarks a[href]:hover,
.service-block a[href]:hover {
  border-color: var(--kl-border-strong) !important;

  background: linear-gradient(
    180deg,
    rgba(14, 24, 31, 0.78),
    rgba(9, 16, 21, 0.78)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(0, 200, 160, 0.05),
    0 0 18px rgba(0, 200, 160, 0.1);
}

/* Text sauber wie oben */
#bookmarks a[href] * {
  color: var(--kl-text-soft) !important;
  font-weight: 500;
}

#bookmarks a[href]:hover * {
  color: var(--kl-text) !important;
}

/* Icons etwas cleaner */
#bookmarks img {
  border-radius: 6px;
  opacity: 0.9;
}

/* leichte Separation zwischen Reihen */
#bookmarks .flex,
#bookmarks .grid {
  gap: 10px;
}