fleet/website/assets/styles/components/parallax-city.component.less

/**
 * <parallax-city>
 *
 * App-wide styles for our ajax buttons.
 */

[parasails-component='parallax-city'] {
  background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 650px);
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  [purpose='parallax-city-container'] {
    height: 456px;
    position: relative;
    .parallax-layer {
      position: absolute;
      right: 0;
      bottom: -1px;
      width: 100%;
      height: 100%;
      will-change: transform;
      background-size: auto 100%;
      transition: 0.1s smooth;
      transition-property: all;
    }
    [purpose='foreground-cloud-1'] {
      background-image: url('/images/parallax-cloud-city/1-cloud-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: repeat-x;
      z-index: 100;
    }
    [purpose='foreground-cloud-2'] {
      background-image: url('/images/parallax-cloud-city/2-cloud-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: repeat-x;
      z-index: 99;
    }
    [purpose='large-island'] {
      background-image: url('/images/parallax-cloud-city/3-island-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 97;
    }
    [purpose='small-island-1'] {
      background-image: url('/images/parallax-cloud-city/4-island-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 95;
    }
    [purpose='small-island-2'] {
      background-image: url('/images/parallax-cloud-city/5-island-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 95;
    }
    [purpose='background-cloud-1'] {
      background-image: url('/images/parallax-cloud-city/6-cloud-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 1;
    }
    [purpose='background-cloud-2'] {
      background-image: url('/images/parallax-cloud-city/7-cloud-3840x456@2x.png');
      background-position: center bottom;
      background-repeat: repeat-x;
      z-index: 1;
    }
  }
  @media (max-width: 991px) {
    [purpose='parallax-city-container'] {
      height: 400px;
    }
  }
  @media (max-width: 768px) {
    [purpose='parallax-city-container'] {
      height: 300px;
    }
  }
  @media (max-width: 575px) {
    [purpose='parallax-city-container'] {
      height: 300px;
      background-image: url('/images/parallax-cloud-city/cloud-city-static-576x300@2x.png');
      background-size: contain;
      background-position: center bottom;
      background-repeat: no-repeat;
      .parallax-layer {
        display: none;
      }
    }
  }
  @media (max-width: 375px) {
    [purpose='parallax-city-container'] {
      height: 200px;
    }
  }
}