projects/ngclient/src/app/core/components/custom-card/custom-card.component.scss
@use '@ship-ui/core/styles/helpers' as *;

:host {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--base-2);

  body.dark & {
    .card:before {
      background: radial-gradient(rgba(var(--primary-rgb-900), 1) 0%, #00000000 60%);
    }
  }
}

.card {
  max-width: p2r(480);
  width: 100%;
  position: relative;
  z-index: 100;
  background-color: var(--base-1);
  border-radius: var(--shape-5);
  box-shadow: var(--box-shadow-40);
  border: 1px solid var(--base-3);
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    height: p2r(480);
    transform: translateY(-#{p2r(285)});
    left: 0;
    right: 0;
    z-index: -2;
    background: radial-gradient(rgb(from var(--primary-1) r g b / 1) 0%, #00000000 60%);
  }

  img.noise {
    position: absolute;
    height: p2r(480);
    width: 100%;
    transform: translateY(-#{p2r(285)});
    left: 0;
    right: 0;
    z-index: -1;
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  }
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: p2r(32 32 0);
  gap: p2r(12);
  position: relative;
  z-index: 10;
}

.header-title {
  font: var(--title-30);
  display: flex;
  align-items: center;
  gap: p2r(10);

  img {
    height: p2r(28);
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3));
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: p2r(32);
  gap: p2r(40);
  position: relative;
  z-index: 10;

  footer {
    font: var(--paragraph-40);
    color: var(--base-9);
    text-align: center;
    text-wrap: balance;
  }
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('/assets/backgrounds/base-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  body.dark & {
    opacity: 1;
  }
}

footer:empty {
  display: none;
}
