pussy-ts/src/pages/oracle/landing/OracleLanding.module.scss

$mobile-breakpoint: 480px;

:export {
  mobileBreakpoint: $mobile-breakpoint;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // header, footer widths, TODO: use variables
  min-height: calc(100vh - 120px - 60px - 100px + 45px);

  padding: 0 10px;

  // not good, need fix wrapper
  margin-bottom: 100px;

  @media (width <= $mobile-breakpoint) {
    .actionBarBtn {
      min-width: 107px;
    }
  }

  --graph-size: 220px;
}

.starsWrapper {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header {
  margin: 0px auto;
  width: 415px;

  @media (width <= $mobile-breakpoint) {
    width: unset;

    > div {
      width: 100vw;
    }
  }
}

.info {
  text-align: center;
  margin: 0 auto;
  margin-top: -5%;

  // sense and sigma buttons aside
  max-width: 95%;

  * {
    font-weight: 400;
    margin: 0;
  }

  > :last-child {
    margin-top: 70px;
  }

  strong,
  a {
    color: #74ff00;
  }

  a {
    &:hover {
      opacity: 0.8;
    }
  }

  @keyframes scaleInFadeIn {
    0% {
      transform: scale(5);
      opacity: 0;
    }

    20% {
      transform: scale(1.1);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }

    // 100% {
    //   transform: scale(0);
    // }
  }

  h2,
  h3,
  h4 {
    $animation-duration: 2s;
    animation-name: scaleInFadeIn;
    animation-duration: $animation-duration;
  }

  h2 {
    font-size: clamp(26px, 3.3vw, 50px);
    color: rgba(255, 255, 255, 0.78);
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  h3 {
    font-size: clamp(40px, 4.7vw, 72px);
  }

  h4 {
    margin-top: 17px;
    font-size: clamp(20px, 2.1vw, 32px);
    color: rgba(255, 255, 255, 0.5);
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  i {
    text-decoration: line-through;
  }
}

.footer {
  display: flex;
  gap: 0 clamp(10px, 2.6vw, 40px);
  justify-content: center;
}

.graphWrapper {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 3;

  width: var(--graph-size);
  height: var(--graph-size);
  background-color: black;

  overflow: hidden;

  border-radius: 10px;
  border: 1px solid rgba(118, 255, 3, 0.1);

  .enlargeBtn {
    float: right;
    position: relative;
    top: 2px;
    right: 2px;

    z-index: 1;

    width: 22px;
    height: 22px;

    background-image: url('images/enlarge.svg');
    background-size: contain;
    background-repeat: no-repeat;

    font-size: 0;

    &:hover {
      opacity: 0.8;
    }
  }

  &::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: inset 0 0 50px 20px black;
  }
}