exadel-inc/esl

@import (reference) '../common/variables.less';
@import './base-layout.less';
 
.star-background {
  background: @landing-bg-color url('/assets/common/stars.webp') repeat fixed;
  background-size: 50vw auto;
}
 
.fog-background {
  &::before {
    content: '';
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 
    background: url('/assets/common/fog.webp') repeat;
    background-size: 100vw auto;
    animation: slow-move-right 100s infinite linear;
 
    @media print {
      display: none;
    }
  }
 
  @media @md-xl {
    &::before {
      z-index: 11;
    }
  }
}
 
.landing-layout {
  .star-background;
  .fog-background;
  color: @landing-fg-color;
 
  @keyframes slow-move-right {
    0% {
      background-position: 0 0;
      opacity: 1;
    }
    50% {
      opacity: 0.75;
    }
    100% {
      background-position: 100vw 0;
      opacity: 1;
    }
  }
 
  .main-scroll {
    @media @md-xl {
      top: @header-height-desktop;
    }
 
    .scrollbar-thumb {
      background: #4a4a55;
    }
    .scrollbar-track {
      background: #2e2f35;
    }
  }
 
  @media @md-xl {
    .header {
      .star-background;
    }
  }
}