/* css/northgrid.css
   NorthGrid splash page styling (Tabler-friendly)
   - Uses local background image: /images/northgrid-splash.png
   - Brighter overall, but keeps colors natural (no saturation boost)
*/

:root { --ng-bg: #0b1220; }

html, body { height: 100%; }

body.ng-splash {
  background: var(--ng-bg) url("../images/northgrid-splash.png") center/cover no-repeat fixed;
  position: relative;
  overflow-x: hidden;
}

/* Lighten overlays to let the image shine through */
body.ng-splash::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 650px at 38% 24%, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.14)),
    linear-gradient(180deg,
      rgba(11, 18, 32, 0.18) 0%,
      rgba(11, 18, 32, 0.38) 65%,
      rgba(11, 18, 32, 0.48) 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* Brighter, but keep saturation neutral/natural */
body.ng-splash::after {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: brightness(1.18) saturate(1.00) contrast(1.02);
  -webkit-backdrop-filter: brightness(1.18) saturate(1.00) contrast(1.02);
  pointer-events: none;
  z-index: 0;
}

.ng-layer { position: relative; z-index: 1; }

.navbar.ng-navbar { background: transparent; }

.ng-card {
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(22, 32, 54, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 28px 85px rgba(0, 0, 0, 0.34);
}

.ng-footer { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 575.98px) {
  body.ng-splash { background-attachment: scroll; }
}