Custom CSS / JS

Edit custom.css and custom.js injected into the homepage

Styles are injected into <head> on every page. Use standard CSS. Supports Tailwind/gradient classes.

/* Center the whole Homepage shell a bit tighter */
#page_wrapper {
  max-width: 980px !important;
  margin: 53px auto 0 auto !important;
}

/* Keep groups centered */
.service-group {
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slightly more solid cards for readability */
/* Smooth hover transition */
.service-card {
  background-color: rgba(20, 28, 40, 0.78) !important;
  min-height: 54px !important;
  border: 1px solid transparent !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

/* PCL orange hover */
.service-card:hover {
  background-color: rgba(70, 40, 18, 0.90) !important;
  border-color: rgba(255, 120, 20, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(255, 120, 20, 0.25),
    0 0 18px rgba(255, 105, 0, 0.18) !important;
  transform: translateY(-2px);
}

/* Brighten service icons on hover */
.service-card img,
.service-card svg {
  transition:
    filter 180ms ease,
    transform 180ms ease !important;
}

.service-card:hover img,
.service-card:hover svg {
  filter:
    brightness(1.2)
    drop-shadow(0 0 5px rgba(255, 115, 20, 0.55)) !important;
  transform: scale(1.04);
}

/* Tighten spacing a little */
.service-group > div {
  gap: 0.5rem !important;
}

No unsaved changes