laconic.com/src/components/sections/about/roadmap/roadmap.module.scss

@import '~/css/helpers';

.section {
  @include respond-to('mobile') {
    margin-top: 0;
    padding-top: 0;
  }

  position: relative;
  margin: tovw(25px, 'default', 20px) 0 tovw(135px, 'default', 38px) 0;

  .container {
    @include respond-to('mobile') {
      padding: 0 tovw(56px, 'default', 32px);
    }

    display: flex;
    flex-direction: column;

    h2 {
      text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
    }

    .roadmap {
      @include respond-to('mobile') {
        position: relative;
        margin: 0;
        margin-top: tovw(50px, 'mobile', 70px);
        padding-left: tovw(15px, 'mobile', 30px);
      }

      width: 100%;
      margin-top: tovw(110px, 'default', 60px);

      .block {
        @include respond-to('mobile') {
          grid-template-rows: repeat(2, 1fr);
          grid-template-columns: 1fr;
          min-height: tovw(220px, 'mobile', 480px);
        }

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-height: 230px;

        ul {
          @include respond-to('mobile') {
            line-height: 1.6;
          }

          margin-bottom: 0;
          padding-left: tovw(20px, 'default', 18px);
          font-family: var(--font-tt-hoves);
          font-size: tovw(18px, 'default', 15px);

          li {
            padding: tovw(4px) 0;
          }
        }

        > div {
          @include respond-to('mobile') {
            display: flex;
            flex-direction: column;
            width: 100%;
          }

          position: relative;
          width: tovw(320px, 'default', 160px);

          .line {
            @include respond-to('mobile') {
              position: relative;
              transform: rotate(270deg);
              margin: 0 0 tovw(-50px, 'mobile', -45px)
                tovw(25px, 'mobile', 55px);
              align-self: flex-start;
            }

            position: absolute;
            margin-left: tovw(-50px, 'default', -105px);
            margin-top: tovw(35px, 'default', 30px);
            width: tovw(4px, 'default', 3px);
            transform: scaleY(125%);
          }

          .dot {
            position: absolute;
            width: tovw(22px, 'default', 22px);
            height: tovw(22px, 'default', 22px);
            left: tovw(-59px, 'default', -147px);
            background-color: var(--color-white);
            border-radius: 50%;
            box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-white);
            z-index: 5;
          }
        }

        &:first-child {
          @include respond-to('mobile') {
            padding-bottom: 0;
            margin-top: tovw(-25px, 'mobile', -25px);
          }

          padding-bottom: tovw(100px, 'default', 20px);

          .line {
            @include respond-to('mobile') {
              transform: rotate(270deg);
            }

            transform: rotate(180deg) scaleY(135%);
          }

          .dot {
            @include respond-to('mobile') {
              position: absolute;
              top: tovw(14px, 'mobile', 55px);
              left: tovw(-52px, 'mobile', -41px);
            }

            top: tovw(255px, 'default', 220px);
          }

          div:nth-child(2) {
            @include respond-to('mobile') {
              grid-area: 2 / 1 / 3 / 2;
            }

            grid-area: 1 / 3 / 1 / 4;
          }
        }

        &:nth-child(3) {
          @include respond-to('mobile') {
            padding-top: 0;
          }

          position: relative;
          padding-top: tovw(100px, 'default', 20px);

          .line {
            @include respond-to('mobile') {
              bottom: unset;
            }

            bottom: tovw(30px, 'default', 30px);
          }

          .dot {
            @include respond-to('mobile') {
              position: absolute;
              top: tovw(14px, 'mobile', 56px);
              left: tovw(-52px, 'mobile', -41px);
            }

            bottom: tovw(262px, 'default', 219px);
          }

          div:first-child {
            @include respond-to('mobile') {
              grid-area: 1 / 1 / 2 / 2;
            }

            grid-area: 1 / 2 / 1 / 3;
          }

          div:nth-child(2) {
            @include respond-to('mobile') {
              grid-area: 2 / 1 / 3 / 2;
            }

            grid-area: 1 / 4 / 1 / 5;
          }
        }
      }

      .separator {
        @include respond-to('mobile') {
          position: absolute;
          width: unset;
          height: calc(100% + tovw(260px));
          left: 0;
          top: 0;
          transform: translateY(tovw(-130px));
          border-bottom: unset;
          border-left: 2px solid var(--color-white);
          border-image-source: linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-white) 85%,
            var(--color-black) 100%
          );
        }

        width: calc(100% + tovw(260px));
        transform: translateX(tovw(-130px));
        border-bottom: 2px solid var(--color-white);
        border-image-slice: 1;
        border-image-source: linear-gradient(
          90deg,
          var(--color-white) 0%,
          var(--color-white) 85%,
          var(--color-black) 100%
        );
      }
    }
  }
}

[data-theme='light'] {
  .section .container {
    .roadmap .block {
      .dot {
        background-color: var(--color-accent);
        box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-accent);
      }
    }
  }
}