cyb/src/pages/oracle/landing/OracleLanding.module.scss

@use '../../../layouts/variables.module' as *;

$mobile-breakpoint: 1279px;

:export {
  mobileBreakpoint: $mobile-breakpoint;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // header, footer widths, TODO: use variables
  min-height: calc(100vh - $reservedTopHeight - $actionBarHeight);
  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;
  inset: 0;
}

.header {
  margin: 0 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: rgb(255 255 255 / 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: rgb(255 255 255 / 50%);
    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: 0;
  bottom: 10px;
  z-index: 3;
  width: var(--graph-size);
  height: var(--graph-size);
  background-color: black;
  overflow: hidden;
  border-radius: 50% 50% 50% 0;
  border: 1px solid rgb(118 255 3 / 10%);

  .enlargeBtn {
    position: absolute;
    bottom: 35px;
    right: 35px;
  }

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